@adyen/bento-vue3 1.52.0 → 1.53.0

package/dist/chunks/{dropdown.qw5oXFYs.js → dropdown.RVt9T6j5.js}

@@ -1,21 +1,21 @@
-import { ref as C, watch as Oe, computed as p, defineComponent as j, useSlots as Be, toRefs as De, createBlock as K, openBlock as L, resolveDynamicComponent as Ie, mergeProps as P, withCtx as z, createElementVNode as te, withKeys as Ye, 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 k, createCommentVNode as F, toDisplayString as ve, normalizeClass as fe, withDirectives as ee, vShow as Le, nextTick as I, useAttrs as Ze, toRef as D, inject as Qe, createTextVNode as Xe } from "vue";
+import { ref as C, watch as Oe, computed as p, defineComponent as j, useSlots as Be, toRefs as De, createBlock as K, openBlock as L, resolveDynamicComponent as Ie, mergeProps as P, 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 k, createCommentVNode as F, toDisplayString as ve, normalizeClass as fe, withDirectives as ee, vShow as Le, nextTick as I, useAttrs as Ze, toRef as D, inject as Qe, createTextVNode as Xe } from "vue";
 import { d as Ee, B as Ge } from "./typography.DN5eC5ch.js";
-import { g as J } from "./generate-uid.NJ8tVoha.js";
-import { u as et } from "./aria-label.CaUURpnB.js";
+import { a as se, b as J, c as et, B as V, D as tt } from "./dropdown-default-textbox.CwsgzDpx.js";
+/* empty css              */
+import { _ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { s as ie } from "./events.FNmSWp_P.js";
+import { g as Y } from "./generate-uid.NJ8tVoha.js";
+import { u as at } from "./aria-label.CaUURpnB.js";
 import { u as ye } from "./i18n.D9azDLPe.js";
-import { u as tt } from "./use-form-layout-loading.D3lALhtC.js";
-import { B as at } from "./directive.O3yEdalv.js";
-import { s as se } from "./events.FNmSWp_P.js";
-import { B as N, a as lt } from "./keyboard-navigation.CqgGzfZQ.js";
-import { a as ie, b as _, c as ot, B as V, D as nt } from "./dropdown-default-textbox.CwsgzDpx.js";
-import { a as f, b as pe, B as me, c as st, u as it } from "./use-cached-selected-values.DDP7LJoI.js";
+import { u as ot } from "./use-form-layout-loading.D3lALhtC.js";
+import { B as lt } from "./directive.Cbdox5VL.js";
+import { B as N, a as nt } from "./keyboard-navigation.CqgGzfZQ.js";
+import { a as f, b as pe, B as me, c as st, u as it } from "./use-cached-selected-values.Chb18cq_.js";
 import { u as rt } from "./use-has-slot.B7eQSabc.js";
-import { F as dt, E as ut } from "./error-message.DAjisbU1.js";
-import { P as we } from "./popper-container.CEtaux25.js";
+import { F as dt, E as ut } from "./error-message.BQ5MlnLg.js";
+import { P as we } from "./popper-container.Be3h7X17.js";
 import "./popper-container.types.BCZMbVFD.js";
-import { B as ct } from "./popover.COzLcAET.js";
-import { _ as Y } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-/* empty css              */
+import { B as ct } from "./popover.BBnUL5Y_.js";
 import "../assets/dropdown.css";
 const be = {
   "en-US": {
@@ -32,30 +32,30 @@ const be = {
     cancel: "Cancelar"
   }
 }, ft = (e, i, s, a) => {
-  const o = C(e.value), { t: l } = ye({ messages: be });
+  const l = C(e.value), { t: o } = ye({ messages: be });
   Oe(e, () => {
-    o.value = e.value;
+    l.value = e.value;
   });
   const t = p(
-    () => JSON.stringify(o.value) === JSON.stringify(e.value)
+    () => JSON.stringify(l.value) === JSON.stringify(e.value)
   ), c = () => {
-    a(f.SELECT, o.value), a(f.CLOSE_DROPDOWN);
+    a(f.SELECT, l.value), a(f.CLOSE_DROPDOWN);
   }, m = () => {
-    o.value = e.value, a(f.CLOSE_DROPDOWN);
+    l.value = e.value, a(f.CLOSE_DROPDOWN);
   }, h = () => {
-    s.value && i.value && (o.value = e.value);
+    s.value && i.value && (l.value = e.value);
   }, r = p(() => [
     {
-      title: l("apply"),
+      title: o("apply"),
       event: c,
       disabled: t.value
     },
     {
-      title: l("cancel"),
+      title: o("cancel"),
       event: m
     }
   ]), b = (S) => {
-    o.value = S, i.value || a(f.SELECT, S);
+    l.value = S, i.value || a(f.SELECT, S);
   }, u = (S) => {
     b(S), a(f.TAB);
   }, x = (S) => {
@@ -76,7 +76,7 @@ const be = {
   return {
     // Values
     actions: r,
-    internalSelectedValue: o,
+    internalSelectedValue: l,
     // Methods
     listeners: E,
     onEscapeKey: v,
@@ -92,6 +92,10 @@ const be = {
      * Defines a string value that labels an interactive element.
      */
     ariaLabel: { type: String, default: null },
+    /**
+     * Indicates that dropdown items are loading
+     */
+    componentLoading: { type: Boolean, default: !1 },
     /**
      * Empty state props used with the inner empty state component which is displayed when no search results are found.
      */
@@ -145,7 +149,7 @@ const be = {
       validator: (e) => Object.values(me).includes(e)
     },
     /**
-     * Indicates if new options are loading.
+     * Indicates if new options are lazy loading.
      */
     loading: { type: Boolean, default: !1 },
     /**
@@ -192,29 +196,29 @@ const be = {
     }
   },
   setup(e, { expose: i, emit: s }) {
-    const a = Be(), o = s, l = e, { selectedValue: t, multiple: c } = De(l), m = C(null), { t: h } = ye({ messages: be }), r = p(() => l.open && !l.disabled), b = p(() => h("noOptionsMatchThisSearch")), u = p(() => ({
-      "b-dropdown-options-container--single": !(l != null && l.multiple)
+    const a = Be(), l = s, o = e, { selectedValue: t, multiple: c } = De(o), m = C(null), { t: h } = ye({ messages: be }), r = p(() => o.open && !o.disabled), b = p(() => h("noOptionsMatchThisSearch")), u = p(() => ({
+      "b-dropdown-options-container--single": !(o != null && o.multiple)
     })), x = p(() => ({
-      "b-dropdown-options-container__listbox--single": !(l != null && l.multiple)
-    })), { actions: O, internalSelectedValue: v, listeners: B, onEscapeKey: E, onOutsideDropdownClick: S } = ft(t, c, r, o), W = p(() => l != null && l.multiple ? ct : we), q = p(() => {
+      "b-dropdown-options-container__listbox--single": !(o != null && o.multiple)
+    })), { actions: O, internalSelectedValue: v, listeners: B, onEscapeKey: E, onOutsideDropdownClick: S } = ft(t, c, r, l), W = p(() => o != null && o.multiple ? ct : we), q = p(() => {
       var d;
       const A = {
-        "min-width": `${(d = l == null ? void 0 : l.targetElement) == null ? void 0 : d.clientWidth}px`,
+        "min-width": `${(d = o == null ? void 0 : o.targetElement) == null ? void 0 : d.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
-      return l != null && l.multiple ? {
+      return o != null && o.multiple ? {
         actionsLayout: "space-between",
         actions: O.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: J(`dropdown-options-${l.id}`),
-        open: l.open,
+        id: Y(`dropdown-options-${o.id}`),
+        open: o.open,
         position: "bottom-start",
         style: {
           width: "auto",
           ...A
         },
-        targetElement: l.targetElement
+        targetElement: o.targetElement
       } : {
         fallbackPosition: ["top-start"],
         offset: [0, 8],
@@ -223,7 +227,7 @@ const be = {
           display: r.value ? "block" : "none",
           ...A
         },
-        targetElement: l.targetElement
+        targetElement: o.targetElement
       };
     });
     return i({
@@ -234,7 +238,7 @@ const be = {
     }, q.value), {
       default: z(() => [
         te("div", {
-          onKeydown: d[0] || (d[0] = Ye(
+          onKeydown: d[0] || (d[0] = _e(
             //@ts-ignore
             (...y) => n(E) && n(E)(...y),
             ["esc"]
@@ -246,6 +250,7 @@ const be = {
             ref: m,
             "aria-label": e.ariaLabel,
             class: ["b-dropdown-options-container__listbox", x.value],
+            "component-loading": e.componentLoading,
             "empty-state": e.emptyState,
             "is-option-disabled": e.isOptionDisabled,
             items: e.items,
@@ -265,20 +270,20 @@ const be = {
                 X(A.$slots, w, ue(ce(R)), 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"])
+          ]), 1040, ["id", "aria-label", "class", "component-loading", "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, ["aria-label", "class"]));
   }
-}), vt = /* @__PURE__ */ Y(mt, [["__scopeId", "data-v-9390dd46"]]);
+}), vt = /* @__PURE__ */ _(mt, [["__scopeId", "data-v-a5de52a2"]]);
 let Ce = 0;
 const yt = {
   beforeCreate() {
     this.uuid = Ce.toString(), Ce += 1;
   }
 }, bt = { key: 0 };
-function gt(e, i, s, a, o, l) {
+function gt(e, i, s, a, l, o) {
   return L(), k("svg", P({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
@@ -293,14 +298,14 @@ function gt(e, i, s, a, o, l) {
     }, null, -1))
   ], 16);
 }
-const ht = /* @__PURE__ */ Y(yt, [["render", gt]]);
+const ht = /* @__PURE__ */ _(yt, [["render", gt]]);
 let xe = 0;
 const St = {
   beforeCreate() {
     this.uuid = xe.toString(), xe += 1;
   }
 }, Lt = { key: 0 };
-function Et(e, i, s, a, o, l) {
+function Et(e, i, s, a, l, o) {
   return L(), k("svg", P({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
@@ -315,7 +320,7 @@ function Et(e, i, s, a, o, l) {
     }, null, -1))
   ], 16);
 }
-const wt = /* @__PURE__ */ Y(St, [["render", Et]]), Ct = { class: "b-dropdown-small-textbox__chevron" }, xt = j({
+const wt = /* @__PURE__ */ _(St, [["render", Et]]), Ct = { class: "b-dropdown-small-textbox__chevron" }, xt = j({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
 }), Ot = /* @__PURE__ */ j({
@@ -380,37 +385,37 @@ const wt = /* @__PURE__ */ Y(St, [["render", Et]]), Ct = { class: "b-dropdown-sm
   },
   emits: ["clear", "close", "input", "keydown", "open"],
   setup(e, { expose: i, emit: s }) {
-    const a = s, o = e, l = C(null), t = p(() => ({
-      [`b-dropdown-small-textbox--${ie.DISABLED}`]: o.disabled,
-      [`b-dropdown-small-textbox--${ie.READONLY}`]: o.readonly,
-      [`b-dropdown-small-textbox--${ie.OPENED}`]: o.open
-    })), c = p(() => o.open && !o.disabled && !o.readonly), m = (v) => {
+    const a = s, l = e, o = C(null), t = p(() => ({
+      [`b-dropdown-small-textbox--${se.DISABLED}`]: l.disabled,
+      [`b-dropdown-small-textbox--${se.READONLY}`]: l.readonly,
+      [`b-dropdown-small-textbox--${se.OPENED}`]: l.open
+    })), c = p(() => l.open && !l.disabled && !l.readonly), m = (v) => {
       a("input", v);
     }, h = (v) => {
       a("keydown", v);
     }, r = (v) => {
-      se(v), a("open");
+      ie(v), a("open");
     }, b = (v) => {
-      se(v), a("close");
+      ie(v), a("close");
     }, u = (v) => {
-      se(v), a("clear");
+      ie(v), a("clear");
     }, x = {
-      [_.INPUT]: m,
-      [_.OPEN]: r,
-      [_.CLOSE]: b,
-      [_.CLEAR]: u,
-      [_.KEYDOWN]: h
+      [J.INPUT]: m,
+      [J.OPEN]: r,
+      [J.CLOSE]: b,
+      [J.CLEAR]: u,
+      [J.KEYDOWN]: h
     };
     return i({
       focus: () => {
-        l.value.focus();
+        o.value.focus();
       }
     }), (v, B) => (L(), k("div", {
       class: fe(["b-dropdown-small-textbox", t.value])
     }, [
-      Q(ot, P({
+      Q(et, P({
         ref_key: "baseTextbox",
-        ref: l
+        ref: o
       }, { ...v.$attrs, ...v.$props }, {
         class: "b-dropdown-small-textbox__textbox",
         size: n(V).SMALL
@@ -429,22 +434,22 @@ const wt = /* @__PURE__ */ Y(St, [["render", Et]]), Ct = { class: "b-dropdown-sm
       }, 16, ["size"])
     ], 2));
   }
-}), Bt = /* @__PURE__ */ Y(Ot, [["__scopeId", "data-v-66b5eaa5"]]), Dt = (e, i) => i.value.reduce((s, a) => {
+}), Bt = /* @__PURE__ */ _(Ot, [["__scopeId", "data-v-66b5eaa5"]]), Dt = (e, i) => i.value.reduce((s, a) => {
   if (a.items) {
-    const o = a.items.filter(
+    const l = a.items.filter(
       (t) => e.value.find((c) => c.value === t.value)
     );
-    o.length === a.items.length ? s.push(a.displayValue ?? a.label) : o.forEach(({ label: t, displayValue: c }) => s.push(c ?? t));
+    l.length === a.items.length ? s.push(a.displayValue ?? a.label) : l.forEach(({ label: t, displayValue: c }) => s.push(c ?? t));
   }
-  return e.value.find((o) => o.value === a.value) && s.push(a.displayValue ?? a.label), s;
+  return e.value.find((l) => l.value === a.value) && s.push(a.displayValue ?? a.label), s;
 }, []).join(", "), It = ({ items: e, placeholder: i, selectedValues: s, isMultiSelect: a }) => {
-  const o = p(
+  const l = p(
     () => a.value && e.value.find((t) => {
       var c;
       return (c = t.items) == null ? void 0 : c.length;
     })
   );
-  return p(() => s.value.length ? o.value ? Dt(s, e) : s.value.map(({ label: t, displayValue: c }) => c ?? t).join(", ") : i.value || null);
+  return p(() => s.value.length ? l.value ? Dt(s, e) : s.value.map(({ label: t, displayValue: c }) => c ?? t).join(", ") : i.value || null);
 }, Te = (e) => {
   var i;
   (i = e.value.$children) == null || i[0].$refs.textbox.focus();
@@ -453,16 +458,16 @@ const wt = /* @__PURE__ */ Y(St, [["render", Et]]), Ct = { class: "b-dropdown-sm
   optionsContainerRef: i,
   selectedValueIndex: s,
   isDropdownOpen: a,
-  isDynamicFltering: o,
-  items: l,
+  isDynamicFltering: l,
+  items: o,
   isMultiple: t
 }, c, m, h) => {
   const r = async (d) => {
     var y, w;
-    o.value && await I(), (w = (y = i.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : y.$el.querySelectorAll('[role="option"]')[d]) == null || w.focus();
+    l.value && await I(), (w = (y = i.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : y.$el.querySelectorAll('[role="option"]')[d]) == null || w.focus();
   }, b = async (d) => {
     var w, R;
-    o.value && await I();
+    l.value && await I();
     const y = (w = i.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : w.$el.querySelectorAll(
       "button"
     );
@@ -485,9 +490,9 @@ const wt = /* @__PURE__ */ Y(St, [["render", Et]]), Ct = { class: "b-dropdown-sm
       var d;
       if (t) {
         const y = i.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (d = y == null ? void 0 : y[y.length - 1].$el.querySelectorAll('[role="option"]')[l.length - 1]) == null || d.focus();
+        (d = y == null ? void 0 : y[y.length - 1].$el.querySelectorAll('[role="option"]')[o.length - 1]) == null || d.focus();
       } else
-        u(l.length - 1), r(l.length - 1);
+        u(o.length - 1), r(o.length - 1);
     }));
   }, B = () => {
     a.value && (h(), Te(e));
@@ -507,7 +512,7 @@ const wt = /* @__PURE__ */ Y(St, [["render", Et]]), Ct = { class: "b-dropdown-sm
     });
   };
   return p(() => ({
-    ...o.value ? {} : { [N.SPACE]: W },
+    ...l.value ? {} : { [N.SPACE]: W },
     [N.ENTER]: q,
     [N.ARROW_DOWN]: x,
     [N.ARROW_UP]: O,
@@ -530,14 +535,14 @@ const wt = /* @__PURE__ */ Y(St, [["render", Et]]), Ct = { class: "b-dropdown-sm
   };
 };
 function Nt(e, i, s, a) {
-  const o = C(e), l = C(i), t = (m, h = []) => h.flatMap((r) => r.label.toLocaleLowerCase().includes(m) ? a != null && a.value && r.items ? [...t(m, r.items)] : [r, ...t(m, r.items)] : r.items ? [...t(m, r.items)] : []);
-  return Oe(o, () => {
-    s !== void 0 && s(o.value);
+  const l = C(e), o = C(i), t = (m, h = []) => h.flatMap((r) => r.label.toLocaleLowerCase().includes(m) ? a != null && a.value && r.items ? [...t(m, r.items)] : [r, ...t(m, r.items)] : r.items ? [...t(m, r.items)] : []);
+  return Oe(l, () => {
+    s !== void 0 && s(l.value);
   }), p(() => {
-    if (!o.value || s !== void 0)
-      return l.value;
-    const m = o.value.toLocaleLowerCase();
-    return t(m, l.value);
+    if (!l.value || s !== void 0)
+      return o.value;
+    const m = l.value.toLocaleLowerCase();
+    return t(m, o.value);
   });
 }
 const $e = {
@@ -558,7 +563,7 @@ const $e = {
   i18n: { messages: $e },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: nt,
+    DropdownInputDefault: tt,
     DropdownInputSmall: Bt
   }
 }), Mt = /* @__PURE__ */ j({
@@ -639,9 +644,13 @@ const $e = {
      */
     label: { type: String, default: null },
     /**
-     * Indicates if new options are loading.
+     * Indicates if new options are lazy loading.
      */
     loading: { type: Boolean, default: !1 },
+    /**
+     * Indicates that dropdown items are loading
+     */
+    componentLoading: { type: Boolean, default: !1 },
     /**
      * The type of `Lazy Load`.
      * Type "automatic" will enable infinite scrolling
@@ -721,11 +730,11 @@ const $e = {
   emits: ["input", "show-more"],
   setup(e, { expose: i, emit: s }) {
     var Se;
-    const a = Ze(), o = Be(), l = rt(o), t = e, c = s, { t: m } = ye({ messages: $e }), h = C(null), r = C(null), b = C(null), u = C(!1), x = J("bento-dropdown-options-container"), O = J("dropdown-label"), v = J("dropdown-description"), B = J("dropdown-error"), { isReadOnly: E } = tt(D(t, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: W, setCachedValues: q } = st(
+    const a = Ze(), l = Be(), o = rt(l), t = e, c = s, { t: m } = ye({ messages: $e }), h = C(null), r = C(null), b = C(null), u = C(!1), x = Y("bento-dropdown-options-container"), O = Y("dropdown-label"), v = Y("dropdown-description"), B = Y("dropdown-error"), { isReadOnly: E } = ot(D(t, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: W, setCachedValues: q } = st(
       D(t, "items"),
       D(t, "value"),
       D(t, "multiple")
-    ), A = C(a["aria-label"]), { ariaLabel: d, label: y } = De(t), w = et({
+    ), A = C(a["aria-label"]), { ariaLabel: d, label: y } = De(t), w = at({
       // TODO: take ariaLabel ref away when aria-label prop is removed
       ariaLabel: d || A,
       label: y,
@@ -765,9 +774,9 @@ const $e = {
       () => `${t.description ? v : ""} ${t.errorMessage ? B : ""}`.trim() || null
     ), We = () => {
       E.value || (u.value = !0);
-    }, le = () => {
-      u.value = !1;
     }, oe = () => {
+      u.value = !1;
+    }, le = () => {
       E.value || (u.value = !u.value, ae.value && (M.value = ""));
     }, qe = () => {
       ae.value && (M.value = ""), u.value && (u.value = !1, b.value.onOutsideDropdownClick());
@@ -775,7 +784,7 @@ const $e = {
       t.multiple || (M.value = "", u.value = !1), q(g), c("input", W.value);
     }, He = () => {
       c(f.SHOW_MORE);
-    }, _e = Tt(
+    }, Je = Tt(
       {
         inputContainerRef: h,
         optionsContainerRef: b,
@@ -785,20 +794,20 @@ const $e = {
         items: t.items,
         isMultiple: t.multiple
       },
-      oe,
+      le,
       We,
-      le
-    ), Je = $t(
+      oe
+    ), Ve = $t(
       {
         inputContainerRef: h,
         isDropdownOpen: u
       },
-      le
-    ), Ve = {
-      [f.CLOSE_DROPDOWN]: le,
+      oe
+    ), Ye = {
+      [f.CLOSE_DROPDOWN]: oe,
       [f.SELECT]: Ue,
       [f.SHOW_MORE]: He,
-      ...Je
+      ...Ve
     };
     return t.error && Ee(
       'BentoDropdown "error" property',
@@ -827,7 +836,7 @@ const $e = {
         ee((L(), k("div", P({
           ref_key: "inputContainerRefWrapper",
           ref: r
-        }, G(n(_e), !0)), [
+        }, G(n(Je), !0)), [
           (L(), K(Ie(Ne.value), {
             ref_key: "inputContainerRef",
             ref: h,
@@ -850,10 +859,10 @@ const $e = {
             "selected-value-item": n(R) ? void 0 : Pe.value,
             "show-slot-content-in-multiple": e.showSlotContentInMultiple,
             onInput: T[0] || (T[0] = (U) => M.value = U),
-            onOpen: oe,
-            onClose: oe
+            onOpen: le,
+            onClose: le
           }, re({ _: 2 }, [
-            de(n(o), (U, H) => ({
+            de(n(l), (U, H) => ({
               name: H,
               fn: z((ne) => [
                 X(g.$slots, H, ue(ce(ne)), void 0, !0)
@@ -861,7 +870,7 @@ const $e = {
             }))
           ]), 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)), [
-          [n(lt)]
+          [n(nt)]
         ]),
         h.value ? (L(), K(n(vt), P({
           key: 1,
@@ -869,6 +878,7 @@ const $e = {
           ref_key: "optionsContainerRef",
           ref: b,
           "aria-label": n(w),
+          "component-loading": e.componentLoading,
           "empty-state": e.emptyState,
           "debounce-time": ($ = e.search) == null ? void 0 : $.debounceTime,
           disabled: e.disabled,
@@ -884,21 +894,21 @@ const $e = {
           "has-more-items": e.hasMoreItems,
           "lazy-load-type": e.lazyLoadType,
           "virtual-scroll": e.virtualScroll
-        }, G(Ve)), re({ _: 2 }, [
-          de(n(o), (U, H) => ({
+        }, G(Ye)), re({ _: 2 }, [
+          de(n(l), (U, H) => ({
             name: H,
             fn: z((ne) => [
               X(g.$slots, H, ue(ce(ne)), 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),
+        ]), 1040, ["id", "aria-label", "component-loading", "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 ? (L(), K(n(ut), {
           key: 2,
           id: n(B),
           "error-message": e.errorMessage,
           class: "b-dropdown__error-message"
         }, null, 8, ["id", "error-message"])) : F("", !0),
-        e.description || n(l)("description") ? (L(), K(n(Ge), {
+        e.description || n(o)("description") ? (L(), K(n(Ge), {
           key: 3,
           id: n(v),
           class: fe(["b-dropdown__description", Re.value]),
@@ -912,16 +922,16 @@ const $e = {
           _: 3
         }, 8, ["id", "class"])) : F("", !0)
       ], 2)), [
-        [n(at), qe]
+        [n(lt), qe]
       ]);
     };
   }
-}), la = /* @__PURE__ */ Y(Mt, [["__scopeId", "data-v-c2f2009c"]]);
+}), oa = /* @__PURE__ */ _(Mt, [["__scopeId", "data-v-65262eab"]]);
 export {
-  la as B,
+  oa as B,
   ta as I,
   At as a,
   aa as b,
   Nt as u
 };
-//# sourceMappingURL=dropdown.qw5oXFYs.js.map
+//# sourceMappingURL=dropdown.RVt9T6j5.js.map