@adyen/bento-vue3 1.94.0 → 1.95.0

package/dist/chunks/{dropdown.Bsic3Nll.js → dropdown.CK8cdMyV.js}

@@ -1,28 +1,28 @@
-import { ref as B, watch as ve, computed as r, defineComponent as F, useSlots as he, toRefs as Fe, openBlock as b, createBlock as j, resolveDynamicComponent as _e, mergeProps as A, withCtx as z, createElementVNode as se, withKeys as re, unref as o, createVNode as H, toHandlers as de, createSlots as be, renderList as ue, renderSlot as q, normalizeProps as le, guardReactiveProps as me, createCommentVNode as $, useAttrs as Pe, nextTick as R, createElementBlock as x, normalizeClass as oe, Fragment as Ee, createTextVNode as fe, toDisplayString as G, withModifiers as Ne, withDirectives as ne, vShow as ye, toRef as V, inject as pt } from "vue";
+import { ref as D, watch as ve, computed as d, defineComponent as _, useSlots as he, toRefs as _e, openBlock as b, createBlock as H, resolveDynamicComponent as Pe, mergeProps as A, withCtx as W, createElementVNode as ie, withKeys as re, unref as o, createVNode as Y, toHandlers as de, createSlots as be, renderList as ue, renderSlot as U, normalizeProps as oe, guardReactiveProps as ye, createCommentVNode as R, useAttrs as Ve, inject as Ie, nextTick as F, createElementBlock as C, normalizeClass as ne, Fragment as Ee, createTextVNode as fe, toDisplayString as Q, withModifiers as $e, withDirectives as se, vShow as me, toRef as z } from "vue";
 import { B as Ke, d as xe } from "./typography.B3J6_tYk.js";
-import { g as ee } from "./generate-uid.DBWe4g6T.js";
+import { g as te } from "./generate-uid.DBWe4g6T.js";
+import { u as bt } from "./aria-label.CaUURpnB.js";
 import { u as ge } from "./index.B875RXHM.js";
-import { u as Ve } from "./use-has-slot.CyMiImRQ.js";
-import { C as ft } from "./cross-circle-fill.BWCKKn0E.js";
-import { C as bt } from "./cross-circle-fill-small.H1wH-vcZ.js";
-import { _ as X } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { s as te } from "./events.BQOQSSb7.js";
-import { C as mt } from "./chevron-down.XeE-LBV_.js";
-import { C as yt } from "./chevron-up.Cmgl2a3x.js";
+import { u as yt } from "./form-field.D_2g7vaP.js";
+import { B as S, b as Oe, a as Me, d as mt, u as vt, c as ht, e as gt } from "./use-cached-selected-values.CtWNiy-e.js";
+import { u as St } from "./use-form-layout-loading.CWbjZiwP.js";
+import { u as qe } from "./use-has-slot.CyMiImRQ.js";
+import { B as wt } from "./directive.D1-d-C2K.js";
+import { B as j, a as Lt } from "./keyboard-navigation.DWmhelVv.js";
+import { F as Ct } from "./field-label.CLV3nSzz.js";
+import { P as Ne } from "./popper-container.BH4WxeUj.js";
+import { h as Et } from "./button-actions.CxTxPprd.js";
+import { _ as ee } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { E as xt } from "./error-message.Dyvrw6ZB.js";
+import { C as Ot } from "./cross-circle-fill.BWCKKn0E.js";
+import { C as It } from "./cross-circle-fill-small.H1wH-vcZ.js";
 /* empty css              */
-import { u as vt } from "./aria-label.CaUURpnB.js";
-import { u as ht } from "./form-field.D_2g7vaP.js";
-import { B as g, b as Ie, a as ke, d as gt, u as St, c as wt, e as Lt } from "./use-cached-selected-values.C2nbQ4g-.js";
-import { u as Ct } from "./use-form-layout-loading.CWbjZiwP.js";
-import { B as Et } from "./directive.C8kY-ZW-.js";
-import { B as W, a as xt } from "./keyboard-navigation.DWmhelVv.js";
-import { F as It } from "./field-label.DFtyMriH.js";
-import { P as Me } from "./popper-container.WR8Hb24e.js";
-import { h as Ot } from "./button-actions.uco5ptf5.js";
-import { E as Dt } from "./error-message.Dyvrw6ZB.js";
+import { s as ae } from "./events.BQOQSSb7.js";
+import { C as Dt } from "./chevron-down.XeE-LBV_.js";
+import { C as Bt } from "./chevron-up.Cmgl2a3x.js";
 import "../assets/dropdown.css";
-var ae = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(ae || {});
-const Oe = {
+var le = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(le || {});
+const De = {
   "de-DE": { apply: "Anwenden", cancel: "Abbrechen", noOptionsMatchThisSearch: "Für diese Suche wurden keine Ergebnisse gefunden." },
   "en-GB": { apply: "Apply", cancel: "Cancel", noOptionsMatchThisSearch: "No options match this search" },
   "en-US": { apply: "Apply", cancel: "Cancel", noOptionsMatchThisSearch: "No options match this search" },
@@ -33,20 +33,20 @@ const Oe = {
   "ja-JP": { apply: "適用", cancel: "キャンセル", noOptionsMatchThisSearch: "この検索に一致するオプションはありません" },
   "pt-BR": { apply: "Aplicar", cancel: "Cancelar", noOptionsMatchThisSearch: "Nenhuma opção corresponde a esta busca" },
   "zh-CN": { apply: "应用", cancel: "取消", noOptionsMatchThisSearch: "没有符合此搜索条件的选项" }
-}, Bt = (e, u, d, l) => {
-  const i = B(e.value), { t: n } = ge({ messages: Oe });
+}, At = (e, c, u, l) => {
+  const i = D(e.value), { t: n } = ge({ messages: De });
   ve(e, () => {
     i.value = e.value;
   });
-  const t = r(
+  const t = d(
     () => JSON.stringify(i.value) === JSON.stringify(e.value)
   ), a = () => {
-    l(g.SELECT, i.value), l(g.CLOSE_DROPDOWN);
-  }, h = () => {
-    i.value = e.value, l(g.CLOSE_DROPDOWN);
-  }, S = () => {
-    d.value && u.value && (i.value = e.value);
-  }, p = r(() => [
+    l(S.SELECT, i.value), l(S.CLOSE_DROPDOWN);
+  }, m = () => {
+    i.value = e.value, l(S.CLOSE_DROPDOWN);
+  }, w = () => {
+    u.value && c.value && (i.value = e.value);
+  }, p = d(() => [
     {
       title: n("apply"),
       event: a,
@@ -54,41 +54,41 @@ const Oe = {
     },
     {
       title: n("cancel"),
-      event: h
+      event: m
     }
-  ]), w = (L) => {
-    i.value = L, u.value || l(g.SELECT, L);
-  }, y = (L) => {
-    w(L), l(g.TAB);
-  }, m = (L) => {
-    w(L), l(g.ENTER);
-  }, D = (L) => {
-    w(L), l(g.SPACE);
-  }, v = () => {
-    h(), l(g.ESCAPE);
-  }, c = () => {
-    l(g.SHOW_MORE);
-  }, O = {
-    [g.SELECT]: w,
-    [g.SHOW_MORE]: c,
-    [g.TAB]: y,
-    [g.SPACE]: D,
-    [g.ENTER]: m
+  ]), g = (h) => {
+    i.value = h, c.value || l(S.SELECT, h);
+  }, v = (h) => {
+    g(h), l(S.TAB);
+  }, y = (h) => {
+    g(h), l(S.ENTER);
+  }, I = (h) => {
+    g(h), l(S.SPACE);
+  }, B = () => {
+    m(), l(S.ESCAPE);
+  }, r = () => {
+    l(S.SHOW_MORE);
+  }, x = {
+    [S.SELECT]: g,
+    [S.SHOW_MORE]: r,
+    [S.TAB]: v,
+    [S.SPACE]: I,
+    [S.ENTER]: y
   };
   return {
     // Values
     actions: p,
     internalSelectedValue: i,
     // Methods
-    listeners: O,
-    onEscapeKey: v,
-    onOutsideDropdownClick: S
+    listeners: x,
+    onEscapeKey: B,
+    onOutsideDropdownClick: w
   };
-}, At = F({
-  i18n: { messages: Oe },
+}, kt = _({
+  i18n: { messages: De },
   name: "bento-dropdown-options-container"
-}), Tt = /* @__PURE__ */ F({
-  ...At,
+}), Tt = /* @__PURE__ */ _({
+  ...kt,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -147,8 +147,8 @@ const Oe = {
      */
     lazyLoadType: {
       type: String,
-      default: ke.AUTOMATIC,
-      validator: (e) => Object.values(ke).includes(e)
+      default: Me.AUTOMATIC,
+      validator: (e) => Object.values(Me).includes(e)
     },
     /**
      * Indicates if new options are lazy loading.
@@ -178,7 +178,7 @@ const Oe = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Ie.props.searching,
+    searching: Oe.props.searching,
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
@@ -187,7 +187,7 @@ const Oe = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: Me.props.targetElement.type, required: !0 },
+    targetElement: { type: Ne.props.targetElement.type, required: !0 },
     /**
      * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
      * The itemHeight function is used to calculate the height of rendered item given it's index.
@@ -197,28 +197,28 @@ const Oe = {
       default: !1
     }
   },
-  setup(e, { expose: u, emit: d }) {
-    const l = he(), i = d, n = e, { selectedValue: t, multiple: a } = Fe(n), h = B(null), { t: S } = ge({ messages: Oe }), p = r(() => n.open && !n.disabled), w = r(() => S("noOptionsMatchThisSearch")), y = r(() => ({
+  setup(e, { expose: c, emit: u }) {
+    const l = he(), i = u, n = e, { selectedValue: t, multiple: a } = _e(n), m = D(null), { t: w } = ge({ messages: De }), p = d(() => n.open && !n.disabled), g = d(() => w("noOptionsMatchThisSearch")), v = d(() => ({
       "b-dropdown-options-container--single": !n?.multiple
-    })), m = r(() => ({
+    })), y = d(() => ({
       "b-dropdown-options-container__listbox--single": !n?.multiple
-    })), { actions: D, internalSelectedValue: v, listeners: c, onEscapeKey: O, onOutsideDropdownClick: L } = Bt(t, a, p, i), C = r(() => n?.multiple ? Ot : Me), k = r(() => {
-      const T = {
+    })), { actions: I, internalSelectedValue: B, listeners: r, onEscapeKey: x, onOutsideDropdownClick: h } = At(t, a, p, i), L = d(() => n?.multiple ? Et : Ne), T = d(() => {
+      const $ = {
         "min-width": `${n?.targetElement?.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return n?.multiple ? {
         actionsLayout: "space-between",
         ariaLabel: n.ariaLabel,
-        actions: D.value,
+        actions: I.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: ee(`dropdown-options-${n.id}`),
+        id: te(`dropdown-options-${n.id}`),
         open: n.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...T
+          ...$
         },
         targetElement: n.targetElement
       } : {
@@ -227,60 +227,60 @@ const Oe = {
         position: "bottom-start",
         style: {
           display: p.value ? "block" : "none",
-          ...T
+          ...$
         },
         targetElement: n.targetElement
       };
     });
-    return u({
-      onOutsideDropdownClick: L
-    }), (T, _) => p.value ? (b(), j(_e(C.value), A({
+    return c({
+      onOutsideDropdownClick: h
+    }), ($, P) => p.value ? (b(), H(Pe(L.value), A({
       key: 0,
-      class: ["b-dropdown-options-container", y.value]
-    }, k.value), {
-      default: z(() => [
-        se("div", {
-          onKeydown: _[0] || (_[0] = re(
+      class: ["b-dropdown-options-container", v.value]
+    }, T.value), {
+      default: W(() => [
+        ie("div", {
+          onKeydown: P[0] || (P[0] = re(
             //@ts-ignore
-            (...M) => o(O) && o(O)(...M),
+            (...V) => o(x) && o(x)(...V),
             ["esc"]
           ))
         }, [
-          H(o(Ie), A({
+          Y(o(Oe), A({
             id: e.id,
             ref_key: "dropdownOptionsListboxRef",
-            ref: h,
+            ref: m,
             "aria-label": e.ariaLabel,
-            class: ["b-dropdown-options-container__listbox", m.value],
+            class: ["b-dropdown-options-container__listbox", y.value],
             "component-loading": e.componentLoading,
             "empty-state": e.emptyState,
             "is-option-disabled": e.isOptionDisabled,
             items: e.items,
-            "selected-value": o(v),
+            "selected-value": o(B),
             multiple: o(a),
             "static-categories": e.staticCategories,
-            "no-results-message": w.value,
+            "no-results-message": g.value,
             searching: e.searching,
             loading: e.loading,
             "lazy-load-type": e.lazyLoadType,
             "has-more-items": e.hasMoreItems,
             "virtual-scroll": e.virtualScroll
-          }, de(o(c))), be({ _: 2 }, [
-            ue(o(l), (M, U) => ({
-              name: U,
-              fn: z((Z) => [
-                q(T.$slots, U, le(me(Z)), void 0, !0)
+          }, de(o(r))), be({ _: 2 }, [
+            ue(o(l), (V, M) => ({
+              name: M,
+              fn: W((J) => [
+                U($.$slots, M, oe(ye(J)), void 0, !0)
               ])
             }))
           ]), 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, ["class"])) : $("", !0);
+    }, 16, ["class"])) : R("", !0);
   }
-}), Nt = /* @__PURE__ */ X(Tt, [["__scopeId", "data-v-abf92e14"]]);
-var N = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.READONLY = "readonly", e.HAS_ITEMS = "has-items", e.OPENED = "opened", e.ERROR = "error", e))(N || {}), I = /* @__PURE__ */ ((e) => (e.OPEN = "dropdown-base-open", e.KEYDOWN = "dropdown-base-keydown", e.CLOSE = "dropdown-base-close", e.INPUT = "dropdown-base-input", e.CLEAR = "dropdown-base-clear", e))(I || {});
-const qe = {
+}), $t = /* @__PURE__ */ ee(Tt, [["__scopeId", "data-v-abf92e14"]]);
+var k = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.READONLY = "readonly", e.HAS_ITEMS = "has-items", e.OPENED = "opened", e.ERROR = "error", e))(k || {}), E = /* @__PURE__ */ ((e) => (e.OPEN = "dropdown-base-open", e.KEYDOWN = "dropdown-base-keydown", e.CLOSE = "dropdown-base-close", e.INPUT = "dropdown-base-input", e.CLEAR = "dropdown-base-clear", e))(E || {});
+const Mt = /* @__PURE__ */ Symbol("dropdown small size injection key"), ze = /* @__PURE__ */ Symbol("dropdown underline style injection key"), Ue = {
   "de-DE": { clearSearch: "Suche löschen" },
   "en-GB": { clearSearch: "Clear search" },
   "en-US": { clearSearch: "Clear search" },
@@ -291,22 +291,22 @@ const qe = {
   "ja-JP": { clearSearch: "検索をクリア" },
   "pt-BR": { clearSearch: "Limpar busca" },
   "zh-CN": { clearSearch: "清除搜索" }
-}, kt = ["id", "value", "disabled", "readonly", "required"], Mt = ["id", "aria-readonly", "tabindex"], $t = {
+}, Nt = ["id", "value", "disabled", "readonly", "required"], Rt = ["id", "aria-readonly", "tabindex"], Ft = {
   key: 1,
   class: "b-dropdown-base-textbox__input-multiple-selected"
-}, Rt = { class: "b-dropdown-base-textbox__input-selected-element" }, Ft = {
+}, _t = { class: "b-dropdown-base-textbox__input-selected-element" }, Pt = {
   key: 2,
   class: "b-dropdown-base-textbox__additional-items"
-}, _t = {
+}, Vt = {
   key: 3,
   class: "b-dropdown-base-textbox__icon",
   "aria-hidden": "true"
-}, Pt = ["tabindex", "onKeydown"], Kt = F({
-  i18n: { messages: qe },
+}, Kt = ["tabindex", "onKeydown"], qt = _({
+  i18n: { messages: Ue },
   name: "dropdown-base-textbox",
   inheritAttrs: !1
-}), Vt = /* @__PURE__ */ F({
-  ...Kt,
+}), zt = /* @__PURE__ */ _({
+  ...qt,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -390,16 +390,17 @@ const qe = {
       default: null
     }
   },
-  setup(e, { expose: u, emit: d }) {
-    const { t: l } = ge({ messages: qe }), i = Pe(), n = he(), t = Ve(n), a = e, h = d, S = B(null), p = ee("textbox"), w = r(() => ({
-      [`b-dropdown-base-textbox--${N.DISABLED}`]: a.disabled,
-      [`b-dropdown-base-textbox--${N.READONLY}`]: a.readonly,
-      [`b-dropdown-base-textbox--${N.HAS_ITEMS}`]: !!a.additionalItemsSelected
-    })), y = r(
-      () => O.value && i["aria-required"] ? "true" : null
-    ), m = r(() => ({
+  setup(e, { expose: c, emit: u }) {
+    const { t: l } = ge({ messages: Ue }), i = Ve(), n = he(), t = qe(n), a = e, m = u, w = D(null), p = te("textbox"), g = Ie(ze, !1), v = d(() => ({
+      [`b-dropdown-base-textbox--${k.DISABLED}`]: a.disabled,
+      [`b-dropdown-base-textbox--${k.READONLY}`]: a.readonly,
+      [`b-dropdown-base-textbox--${k.HAS_ITEMS}`]: !!a.additionalItemsSelected,
+      "b-dropdown-base-textbox--underline": g
+    })), y = d(
+      () => h.value && i["aria-required"] ? "true" : null
+    ), I = d(() => ({
       "b-dropdown-base-textbox__input--dynamic-filtering": a.dynamicFiltering
-    })), D = r(() => a.dynamicFiltering && !!a.value && a.open), v = r(
+    })), B = d(() => a.dynamicFiltering && !!a.value && a.open), r = d(
       () => ({
         "aria-haspopup": "listbox",
         "aria-controls": a.ariaControls,
@@ -411,48 +412,49 @@ const qe = {
         "aria-disabled": a.disabled ? !0 : null,
         "aria-required": i["aria-required"]
       })
-    ), c = r(
+    ), x = d(
       () => a.multiple ? a.selectedValueItem : []
-    ), O = r(() => a.dynamicFiltering && (a.open || a.alwaysComboboxIsInput)), L = r(() => a.selectedValueItem && !a.multiple), C = r(
-      () => a.multiple && a.selectedValueItem && c.value.length > 0 && a.showSlotContentInMultiple
+    ), h = d(() => a.dynamicFiltering && (a.open || a.alwaysComboboxIsInput)), L = d(() => a.selectedValueItem && !a.multiple), T = d(
+      () => a.multiple && a.selectedValueItem && x.value.length > 0 && a.showSlotContentInMultiple
     );
     ve(
-      () => O.value,
+      () => h.value,
       () => {
-        O.value && !a.alwaysComboboxIsInput && R(() => {
-          S.value.focus();
+        h.value && !a.alwaysComboboxIsInput && F(() => {
+          w.value.focus();
         });
       }
     );
-    const k = async () => {
-      !a.disabled && !a.readonly && (h(I.OPEN), await R(), S.value.focus());
-    }, T = () => {
-      a.open && (S.value.focus(), h(I.CLOSE));
-    }, _ = (E) => a.open && E.target.tagName === "INPUT" ? null : a.open ? T() : k(), M = () => {
-      h(I.CLEAR), h(I.INPUT, ""), S.value.focus();
-    }, U = (E) => {
-      !a.readonly && !a.disabled ? h(I.INPUT, E.target.value) : (E.preventDefault(), E.stopPropagation());
+    const $ = async () => {
+      !a.disabled && !a.readonly && (m(E.OPEN), await F(), w.value.focus());
+    }, P = () => {
+      a.open && (w.value.focus(), m(E.CLOSE));
+    }, V = (O) => a.open && O.target.tagName === "INPUT" ? null : a.open ? P() : $(), M = () => {
+      m(E.CLEAR), m(E.INPUT, ""), w.value.focus();
+    }, J = (O) => {
+      !a.readonly && !a.disabled ? m(E.INPUT, O.target.value) : (O.preventDefault(), O.stopPropagation());
     };
-    return u({
+    return c({
       focus: () => {
-        S.value.focus();
+        w.value.focus();
       }
-    }), (E, Q) => (b(), x("div", {
-      class: oe(E.$attrs.class),
+    }), (O, f) => (b(), C("div", {
+      class: ne(O.$attrs.class),
       "data-testid": "textbox-wrapper",
-      onClick: _,
-      onKeydown: re(T, ["escape"])
+      onClick: V,
+      onKeydown: re(P, ["escape"])
     }, [
-      H(o(Ke), {
-        class: oe(["b-dropdown-base-textbox", w.value]),
+      Y(o(Ke), {
+        class: ne(["b-dropdown-base-textbox", v.value]),
+        variant: o(g) ? "title" : "body",
         el: "div",
         "data-testid": "base-textbox"
       }, {
-        default: z(() => [
-          O.value ? (b(), x("input", A({ key: 0 }, v.value, {
+        default: W(() => [
+          h.value ? (b(), C("input", A({ key: 0 }, r.value, {
             id: o(p),
             ref_key: "textbox",
-            ref: S,
+            ref: w,
             class: "b-dropdown-base-textbox__input",
             role: "combobox",
             type: "text",
@@ -463,70 +465,70 @@ const qe = {
             readonly: e.readonly,
             required: y.value,
             onKeydown: [
-              Q[0] || (Q[0] = (f) => E.$emit(o(I).KEYDOWN, f)),
-              re(_, ["enter"])
+              f[0] || (f[0] = (N) => O.$emit(o(E).KEYDOWN, N)),
+              re(V, ["enter"])
             ],
-            onInput: U
-          }), null, 16, kt)) : (b(), x("div", A({
+            onInput: J
+          }), null, 16, Nt)) : (b(), C("div", A({
             key: 1,
             id: o(p)
-          }, v.value, {
+          }, r.value, {
             ref_key: "textbox",
-            ref: S,
-            class: ["b-dropdown-base-textbox__input", m.value],
+            ref: w,
+            class: ["b-dropdown-base-textbox__input", I.value],
             "aria-readonly": e.readonly ? "true" : null,
             role: "combobox",
             tabindex: e.disabled ? -1 : 0
           }), [
-            L.value ? (b(), x(Ee, { key: 0 }, [
-              o(t)("display-value") ? q(E.$slots, "display-value", le(A({ key: 0 }, e.selectedValueItem)), void 0, !0) : q(E.$slots, "default", le(A({ key: 1 }, e.selectedValueItem)), () => [
-                fe(G(e.displayValue), 1)
+            L.value ? (b(), C(Ee, { key: 0 }, [
+              o(t)("display-value") ? U(O.$slots, "display-value", oe(A({ key: 0 }, e.selectedValueItem)), void 0, !0) : U(O.$slots, "default", oe(A({ key: 1 }, e.selectedValueItem)), () => [
+                fe(Q(e.displayValue), 1)
               ], !0)
-            ], 64)) : C.value ? (b(), x("div", $t, [
-              (b(!0), x(Ee, null, ue(c.value, (f) => (b(), x("div", {
-                key: f.value
+            ], 64)) : T.value ? (b(), C("div", Ft, [
+              (b(!0), C(Ee, null, ue(x.value, (N) => (b(), C("div", {
+                key: N.value
               }, [
-                se("div", Rt, [
-                  q(E.$slots, "default", A({ ref_for: !0 }, f), () => [
-                    fe(G(e.displayValue), 1)
+                ie("div", _t, [
+                  U(O.$slots, "default", A({ ref_for: !0 }, N), () => [
+                    fe(Q(e.displayValue), 1)
                   ], !0)
                 ])
               ]))), 128))
-            ])) : (b(), x(Ee, { key: 2 }, [
-              fe(G(e.displayValue), 1)
+            ])) : (b(), C(Ee, { key: 2 }, [
+              fe(Q(e.displayValue), 1)
             ], 64))
-          ], 16, Mt)),
-          e.additionalItemsSelected ? (b(), x("span", Ft, G(e.additionalItemsSelected), 1)) : $("", !0),
-          o(t)("icon") && !D.value ? (b(), x("span", _t, [
-            q(E.$slots, "icon", {}, void 0, !0)
-          ])) : $("", !0),
-          D.value ? (b(), x("span", {
+          ], 16, Rt)),
+          e.additionalItemsSelected ? (b(), C("span", Pt, Q(e.additionalItemsSelected), 1)) : R("", !0),
+          o(t)("icon") && !B.value ? (b(), C("span", Vt, [
+            U(O.$slots, "icon", {}, void 0, !0)
+          ])) : R("", !0),
+          B.value ? (b(), C("span", {
             key: 4,
             class: "b-dropdown-base-textbox__clear-search",
             tabindex: e.disabled ? -1 : 0,
             "data-testid": "clear-search-button",
-            onClick: Ne(M, ["stop"]),
-            onKeydown: re(Ne(M, ["stop"]), ["enter"]),
+            onClick: $e(M, ["stop"]),
+            onKeydown: re($e(M, ["stop"]), ["enter"]),
             onKeyup: re(M, ["space"])
           }, [
-            e.size === o(ae).SMALL ? (b(), j(o(bt), {
+            e.size === o(le).SMALL ? (b(), H(o(It), {
               key: 0,
               "svg-title": o(l)("clearSearch")
-            }, null, 8, ["svg-title"])) : (b(), j(o(ft), {
+            }, null, 8, ["svg-title"])) : (b(), H(o(Ot), {
               key: 1,
               "svg-title": o(l)("clearSearch")
             }, null, 8, ["svg-title"]))
-          ], 40, Pt)) : $("", !0)
+          ], 40, Kt)) : R("", !0)
         ]),
         _: 3
-      }, 8, ["class"])
+      }, 8, ["class", "variant"])
     ], 34));
   }
-}), ze = /* @__PURE__ */ X(Vt, [["__scopeId", "data-v-c9de8fe1"]]), qt = { class: "b-dropdown-default-textbox__chevron" }, zt = F({
+}), We = /* @__PURE__ */ ee(zt, [["__scopeId", "data-v-d9e852a4"]]), Ut = { class: "b-dropdown-default-textbox__chevron" }, Wt = _({
   name: "dropdown-default-textbox",
   inheritAttrs: !1
-}), Ut = /* @__PURE__ */ F({
-  ...zt,
+}), jt = /* @__PURE__ */ _({
+  ...Wt,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -613,115 +615,115 @@ const qe = {
     multiple: { type: Boolean, default: !1 }
   },
   emits: ["clear", "close", "input", "keydown", "open"],
-  setup(e, { expose: u, emit: d }) {
-    const l = d, i = he(), n = e, t = B(null), a = r(() => ({
-      [`b-dropdown-default-textbox--${N.ERROR}`]: !n.disabled && !n.readonly && n.isInvalid,
-      [`b-dropdown-default-textbox--${N.DISABLED}`]: n.disabled,
-      [`b-dropdown-default-textbox--${N.READONLY}`]: n.readonly,
-      [`b-dropdown-default-textbox--${N.OPENED}`]: n.open,
+  setup(e, { expose: c, emit: u }) {
+    const l = u, i = he(), n = e, t = D(null), a = d(() => ({
+      [`b-dropdown-default-textbox--${k.ERROR}`]: !n.disabled && !n.readonly && n.isInvalid,
+      [`b-dropdown-default-textbox--${k.DISABLED}`]: n.disabled,
+      [`b-dropdown-default-textbox--${k.READONLY}`]: n.readonly,
+      [`b-dropdown-default-textbox--${k.OPENED}`]: n.open,
       "b-dropdown-default-textbox--condensed": n.condensed
-    })), h = r(() => n.open && !n.disabled && !n.readonly), S = (c) => {
-      l("input", c);
-    }, p = (c) => {
-      l("keydown", c);
-    }, w = (c) => {
-      te(c), l("open");
-    }, y = (c) => {
-      te(c), l("close");
-    }, m = (c) => {
-      te(c), l("clear");
-    }, D = {
-      [I.INPUT]: S,
-      [I.OPEN]: w,
-      [I.CLOSE]: y,
-      [I.CLEAR]: m,
-      [I.KEYDOWN]: p
+    })), m = d(() => n.open && !n.disabled && !n.readonly), w = (r) => {
+      l("input", r);
+    }, p = (r) => {
+      l("keydown", r);
+    }, g = (r) => {
+      ae(r), l("open");
+    }, v = (r) => {
+      ae(r), l("close");
+    }, y = (r) => {
+      ae(r), l("clear");
+    }, I = {
+      [E.INPUT]: w,
+      [E.OPEN]: g,
+      [E.CLOSE]: v,
+      [E.CLEAR]: y,
+      [E.KEYDOWN]: p
     };
-    return u({
+    return c({
       focus: () => {
         t.value.focus();
       }
-    }), (c, O) => (b(), x("div", {
-      class: oe(["b-dropdown-default-textbox", a.value]),
+    }), (r, x) => (b(), C("div", {
+      class: ne(["b-dropdown-default-textbox", a.value]),
       "data-testid": "default-textbox"
     }, [
-      H(ze, A({
+      Y(We, A({
         ref_key: "baseTextbox",
         ref: t
-      }, { ...c.$attrs, ...c.$props }, {
+      }, { ...r.$attrs, ...r.$props }, {
         class: "b-dropdown-default-textbox__textbox",
         value: e.value
-      }, de(D)), be({
-        icon: z(() => [
-          se("div", qt, [
-            ne(H(o(yt), { "svg-title": "opened" }, null, 512), [
-              [ye, h.value]
+      }, de(I)), be({
+        icon: W(() => [
+          ie("div", Ut, [
+            se(Y(o(Bt), { "svg-title": "opened" }, null, 512), [
+              [me, m.value]
             ]),
-            ne(H(o(mt), { "svg-title": "closed" }, null, 512), [
-              [ye, !h.value]
+            se(Y(o(Dt), { "svg-title": "closed" }, null, 512), [
+              [me, !m.value]
             ])
           ])
         ]),
         _: 2
       }, [
-        ue(o(i), (L, C) => ({
-          name: C,
-          fn: z((k) => [
-            q(c.$slots, C, le(me(k ?? {})), void 0, !0)
+        ue(o(i), (h, L) => ({
+          name: L,
+          fn: W((T) => [
+            U(r.$slots, L, oe(ye(T ?? {})), void 0, !0)
           ])
         }))
       ]), 1040, ["value"])
     ], 2));
   }
-}), Wt = /* @__PURE__ */ X(Ut, [["__scopeId", "data-v-c3e3ce21"]]);
-let $e = 0;
-const jt = {
+}), Ht = /* @__PURE__ */ ee(jt, [["__scopeId", "data-v-c3e3ce21"]]);
+let Re = 0;
+const Yt = {
   beforeCreate() {
-    this.uuid = $e.toString(), $e += 1;
+    this.uuid = Re.toString(), Re += 1;
   }
-}, Ht = { key: 0 };
-function Yt(e, u, d, l, i, n) {
-  return b(), x("svg", A({ role: "img" }, e.$attrs, {
+}, Jt = { key: 0 };
+function Gt(e, c, u, l, i, n) {
+  return b(), C("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"] ? (b(), x("title", Ht, G(e.$attrs["svg-title"]), 1)) : $("", !0),
-    u[0] || (u[0] = se("path", {
+    e.$attrs["svg-title"] ? (b(), C("title", Jt, Q(e.$attrs["svg-title"]), 1)) : R("", !0),
+    c[0] || (c[0] = ie("path", {
       fill: "#001222",
       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 Jt = /* @__PURE__ */ X(jt, [["render", Yt]]);
-let Re = 0;
-const Gt = {
+const Xt = /* @__PURE__ */ ee(Yt, [["render", Gt]]);
+let Fe = 0;
+const Zt = {
   beforeCreate() {
-    this.uuid = Re.toString(), Re += 1;
+    this.uuid = Fe.toString(), Fe += 1;
   }
-}, Xt = { key: 0 };
-function Zt(e, u, d, l, i, n) {
-  return b(), x("svg", A({ role: "img" }, e.$attrs, {
+}, Qt = { key: 0 };
+function ea(e, c, u, l, i, n) {
+  return b(), C("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"] ? (b(), x("title", Xt, G(e.$attrs["svg-title"]), 1)) : $("", !0),
-    u[0] || (u[0] = se("path", {
+    e.$attrs["svg-title"] ? (b(), C("title", Qt, Q(e.$attrs["svg-title"]), 1)) : R("", !0),
+    c[0] || (c[0] = ie("path", {
       fill: "#001222",
       d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z"
     }, null, -1))
   ], 16);
 }
-const Qt = /* @__PURE__ */ X(Gt, [["render", Zt]]), ea = { class: "b-dropdown-small-textbox__chevron" }, ta = F({
+const ta = /* @__PURE__ */ ee(Zt, [["render", ea]]), aa = { class: "b-dropdown-small-textbox__chevron" }, la = _({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), aa = /* @__PURE__ */ F({
-  ...ta,
+}), oa = /* @__PURE__ */ _({
+  ...la,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -777,49 +779,50 @@ const Qt = /* @__PURE__ */ X(Gt, [["render", Zt]]), ea = { class: "b-dropdown-sm
     value: { type: String, default: "" }
   },
   emits: ["clear", "close", "input", "keydown", "open"],
-  setup(e, { expose: u, emit: d }) {
-    const l = d, i = e, n = B(null), t = r(() => ({
-      [`b-dropdown-small-textbox--${N.DISABLED}`]: i.disabled,
-      [`b-dropdown-small-textbox--${N.READONLY}`]: i.readonly,
-      [`b-dropdown-small-textbox--${N.OPENED}`]: i.open
-    })), a = r(() => i.open && !i.disabled && !i.readonly), h = (v) => {
-      l("input", v);
-    }, S = (v) => {
-      l("keydown", v);
-    }, p = (v) => {
-      te(v), l("open");
-    }, w = (v) => {
-      te(v), l("close");
-    }, y = (v) => {
-      te(v), l("clear");
-    }, m = {
-      [I.INPUT]: h,
-      [I.OPEN]: p,
-      [I.CLOSE]: w,
-      [I.CLEAR]: y,
-      [I.KEYDOWN]: S
+  setup(e, { expose: c, emit: u }) {
+    const l = u, i = e, n = D(null), t = Ie(ze, !1), a = d(() => ({
+      [`b-dropdown-small-textbox--${k.DISABLED}`]: i.disabled,
+      [`b-dropdown-small-textbox--${k.READONLY}`]: i.readonly,
+      [`b-dropdown-small-textbox--${k.OPENED}`]: i.open,
+      "b-dropdown-small-textbox--underline": t
+    })), m = d(() => i.open && !i.disabled && !i.readonly), w = (r) => {
+      l("input", r);
+    }, p = (r) => {
+      l("keydown", r);
+    }, g = (r) => {
+      ae(r), l("open");
+    }, v = (r) => {
+      ae(r), l("close");
+    }, y = (r) => {
+      ae(r), l("clear");
+    }, I = {
+      [E.INPUT]: w,
+      [E.OPEN]: g,
+      [E.CLOSE]: v,
+      [E.CLEAR]: y,
+      [E.KEYDOWN]: p
     };
-    return u({
+    return c({
       focus: () => {
         n.value.focus();
       }
-    }), (v, c) => (b(), x("div", {
-      class: oe(["b-dropdown-small-textbox", t.value])
+    }), (r, x) => (b(), C("div", {
+      class: ne(["b-dropdown-small-textbox", a.value])
     }, [
-      H(ze, A({
+      Y(We, A({
         ref_key: "baseTextbox",
         ref: n
-      }, { ...v.$attrs, ...v.$props }, {
+      }, { ...r.$attrs, ...r.$props }, {
         class: "b-dropdown-small-textbox__textbox",
-        size: o(ae).SMALL
-      }, de(m)), {
-        icon: z(() => [
-          se("div", ea, [
-            ne(H(o(Qt), { "svg-title": "opened" }, null, 512), [
-              [ye, a.value]
+        size: o(le).SMALL
+      }, de(I)), {
+        icon: W(() => [
+          ie("div", aa, [
+            se(Y(o(ta), { "svg-title": "opened" }, null, 512), [
+              [me, m.value]
             ]),
-            ne(H(o(Jt), { "svg-title": "closed" }, null, 512), [
-              [ye, !a.value]
+            se(Y(o(Xt), { "svg-title": "closed" }, null, 512), [
+              [me, !m.value]
             ])
           ])
         ]),
@@ -827,106 +830,106 @@ const Qt = /* @__PURE__ */ X(Gt, [["render", Zt]]), ea = { class: "b-dropdown-sm
       }, 16, ["size"])
     ], 2));
   }
-}), la = /* @__PURE__ */ X(aa, [["__scopeId", "data-v-39ce3ec8"]]), oa = (e, u) => u.value.reduce((d, l) => {
+}), na = /* @__PURE__ */ ee(oa, [["__scopeId", "data-v-5fe55c74"]]), sa = (e, c) => c.value.reduce((u, l) => {
   if (l.items) {
     const i = l.items.filter(
       (t) => e.value.find((a) => a.value === t.value)
     );
-    i.length === l.items.length ? d.push(l.displayValue ?? l.label) : i.forEach(({ label: t, displayValue: a }) => d.push(a ?? t));
+    i.length === l.items.length ? u.push(l.displayValue ?? l.label) : i.forEach(({ label: t, displayValue: a }) => u.push(a ?? t));
   }
-  return e.value.find((i) => i.value === l.value) && d.push(l.displayValue ?? l.label), d;
-}, []).join(", "), na = ({ items: e, placeholder: u, selectedValues: d, isMultiSelect: l }) => {
-  const i = r(
+  return e.value.find((i) => i.value === l.value) && u.push(l.displayValue ?? l.label), u;
+}, []).join(", "), ia = ({ items: e, placeholder: c, selectedValues: u, isMultiSelect: l }) => {
+  const i = d(
     () => l.value && e.value.find((t) => t.items?.length)
   );
-  return r(() => d.value.length ? i.value ? oa(d, e) : d.value.map(({ label: t, displayValue: a }) => a ?? t).join(", ") : u.value || null);
-}, Ue = (e) => {
+  return d(() => u.value.length ? i.value ? sa(u, e) : u.value.map(({ label: t, displayValue: a }) => a ?? t).join(", ") : c.value || null);
+}, je = (e) => {
   e.value.$children?.[0].$refs.textbox.focus();
-}, sa = ({
+}, ra = ({
   inputContainerRef: e,
-  optionsContainerRef: u,
-  selectedValueIndex: d,
+  optionsContainerRef: c,
+  selectedValueIndex: u,
   isDropdownOpen: l,
   isDynamicFltering: i,
   items: n,
   isMultiple: t,
   totalItemCount: a,
-  isVirtualScroll: h
-}, S, p, w) => {
-  const y = async (f) => {
-    i.value && await R(), n.value[f]?.focus();
-  }, m = async (f) => {
-    i.value && await R();
-    const ie = u.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.$el.querySelectorAll(
+  isVirtualScroll: m
+}, w, p, g) => {
+  const v = async (f) => {
+    i.value && await F(), n.value[f]?.focus();
+  }, y = async (f) => {
+    i.value && await F();
+    const N = c.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.$el.querySelectorAll(
       "button"
     );
-    ie?.length ? ie[f]?.focus() : y(f);
-  }, D = (f) => u.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.setListboxFocusedIndex(
+    N?.length ? N[f]?.focus() : v(f);
+  }, I = (f) => c.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.setListboxFocusedIndex(
     f
-  ), v = async (f) => {
-    await u.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.navigateToItem(f);
-  }, c = (f) => {
-    R(() => {
-      h ? v(f) : (D(f), y(f));
+  ), B = async (f) => {
+    await c.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.navigateToItem(f);
+  }, r = (f) => {
+    F(() => {
+      m ? B(f) : (I(f), v(f));
     });
-  }, O = () => {
-    l.value || p(), c(0);
-  }, L = () => {
-    l.value || p(), R(() => {
-      c(h ? a.value - 1 : n.value.length - 1);
+  }, x = () => {
+    l.value || p(), r(0);
+  }, h = () => {
+    l.value || p(), F(() => {
+      r(m ? a.value - 1 : n.value.length - 1);
     });
-  }, C = ({ detail: f }) => {
-    f.preventDefault(), O();
-  }, k = ({ detail: f }) => {
-    f.preventDefault(), L();
-  }, T = () => {
-    O();
-  }, _ = () => {
-    L();
+  }, L = ({ detail: f }) => {
+    f.preventDefault(), x();
+  }, T = ({ detail: f }) => {
+    f.preventDefault(), h();
+  }, $ = () => {
+    x();
+  }, P = () => {
+    h();
+  }, V = ({ detail: f }) => {
+    f.preventDefault(), w(), l.value && (t ? y(0) : r(u.value));
   }, M = ({ detail: f }) => {
-    f.preventDefault(), S(), l.value && (t ? m(0) : c(d.value));
-  }, U = ({ detail: f }) => {
-    f.preventDefault(), S(), l.value && (t ? m(0) : c(d.value));
-  }, Z = () => {
-    l.value && w();
-  }, E = () => {
-    l.value && (w(), Ue(e));
+    f.preventDefault(), w(), l.value && (t ? y(0) : r(u.value));
+  }, J = () => {
+    l.value && g();
+  }, G = () => {
+    l.value && (g(), je(e));
   };
-  return r(() => ({
-    [W.ARROW_DOWN]: C,
-    [W.ARROW_UP]: k,
-    [W.HOME]: T,
-    [W.END]: _,
-    ...i.value ? {} : { [W.SPACE]: M },
-    [W.ENTER]: U,
-    ...i.value ? {} : { [W.TAB]: Z },
-    [W.ESCAPE]: E
+  return d(() => ({
+    [j.ARROW_DOWN]: L,
+    [j.ARROW_UP]: T,
+    [j.HOME]: $,
+    [j.END]: P,
+    ...i.value ? {} : { [j.SPACE]: V },
+    [j.ENTER]: M,
+    ...i.value ? {} : { [j.TAB]: J },
+    [j.ESCAPE]: G
   }));
-}, ia = ({ inputContainerRef: e, isDropdownOpen: u }, d) => {
+}, da = ({ inputContainerRef: e, isDropdownOpen: c }, u) => {
   const l = () => {
-    u.value && d(), R(() => {
-      Ue(e);
+    c.value && u(), F(() => {
+      je(e);
     });
   };
   return {
-    [g.ENTER]: l,
-    [g.ESCAPE]: l,
-    [g.TAB]: l,
-    [g.SPACE]: l
+    [S.ENTER]: l,
+    [S.ESCAPE]: l,
+    [S.TAB]: l,
+    [S.SPACE]: l
   };
 };
-function ra(e, u, d, l, i) {
-  const n = B(e), t = B(u), a = (p, w = []) => w.flatMap((y) => y.label.toLocaleLowerCase().includes(p) ? l?.value && y.items ? [...a(p, y.items)] : [y, ...a(p, y.items)] : y.items ? [...a(p, y.items)] : []), h = d !== void 0 ? gt(() => d(n.value), i ?? 300) : void 0;
+function ua(e, c, u, l, i) {
+  const n = D(e), t = D(c), a = (p, g = []) => g.flatMap((v) => v.label.toLocaleLowerCase().includes(p) ? l?.value && v.items ? [...a(p, v.items)] : [v, ...a(p, v.items)] : v.items ? [...a(p, v.items)] : []), m = u !== void 0 ? mt(() => u(n.value), i ?? 300) : void 0;
   return ve(n, () => {
-    h !== void 0 && h();
-  }), r(() => {
-    if (!n.value || d !== void 0)
+    m !== void 0 && m();
+  }), d(() => {
+    if (!n.value || u !== void 0)
       return t.value;
     const p = n.value.toLocaleLowerCase();
     return a(p, t.value);
   });
 }
-const We = {
+const He = {
   "de-DE": { all: "Alle", ariaLabelFallback: "Dropdown", clearSearch: "Filter löschen" },
   "en-GB": { all: "All", ariaLabelFallback: "Dropdown", clearSearch: "Clear filter" },
   "en-US": { all: "All", ariaLabelFallback: "Dropdown", clearSearch: "Clear filter" },
@@ -937,16 +940,16 @@ const We = {
   "ja-JP": { all: "すべて", ariaLabelFallback: "ドロップダウン", clearSearch: "フィルターをクリア" },
   "pt-BR": { all: "Todos", ariaLabelFallback: "Menu suspenso", clearSearch: "Limpar filtro" },
   "zh-CN": { all: "全部", ariaLabelFallback: "下拉菜单", clearSearch: "清除筛选器" }
-}, da = /* @__PURE__ */ Symbol("input field component injection key"), Ma = /* @__PURE__ */ Symbol("input field hint injection key"), $a = /* @__PURE__ */ Symbol("input field parent component injection key"), ua = F({
-  i18n: { messages: We },
+}, ca = _({
+  i18n: { messages: He },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: Wt,
-    DropdownInputSmall: la
+    DropdownInputDefault: Ht,
+    DropdownInputSmall: na
   },
   model: { prop: "modelValue" }
-}), ca = /* @__PURE__ */ F({
-  ...ua,
+}), pa = /* @__PURE__ */ _({
+  ...ca,
   props: {
     ariaLabel: { default: null },
     condensed: { type: Boolean, default: !1 },
@@ -958,7 +961,7 @@ const We = {
     items: { default: () => [] },
     loading: { type: Boolean, default: !1 },
     componentLoading: { type: Boolean, default: !1 },
-    lazyLoadType: { default: Ie.props.lazyLoadType.default },
+    lazyLoadType: { default: Oe.props.lazyLoadType.default },
     multiple: { type: Boolean, default: !1 },
     search: { default: void 0 },
     showSlotContentInMultiple: { type: Boolean, default: !1 },
@@ -979,105 +982,105 @@ const We = {
     tooltipText: { default: null }
   },
   emits: ["input", "update:model-value", "show-more", "open"],
-  setup(e, { expose: u, emit: d }) {
-    const l = Pe(), i = he(), n = Ve(i), t = e, a = d, { t: h } = ge({ messages: We }), { emitValue: S } = ht(a), p = B(null), w = B(null), y = B(null), m = B(!1), D = ee("bento-dropdown-options-container"), v = ee("dropdown-label"), c = ee("dropdown-description"), O = ee("dropdown-error"), { isReadOnly: L } = Ct(V(t, "readonly")), C = r(() => t.modelValue ?? t.value), { cachedSelectedListboxOptions: k, cachedListboxSelectedValues: T, setCachedValues: _ } = St(
-      V(t, "items"),
-      C,
-      V(t, "multiple"),
-      V(t, "enableValueLabelPair")
-    ), M = B(l["aria-label"]), U = B(l["aria-describedby"]), { ariaLabel: Z, label: E } = Fe(t), Q = r(() => h("ariaLabelFallback")), f = vt({
+  setup(e, { expose: c, emit: u }) {
+    const l = Ve(), i = he(), n = qe(i), t = e, a = u, { t: m } = ge({ messages: He }), { emitValue: w } = yt(a), p = D(null), g = D(null), v = D(null), y = D(!1), I = te("bento-dropdown-options-container"), B = te("dropdown-label"), r = te("dropdown-description"), x = te("dropdown-error"), { isReadOnly: h } = St(z(t, "readonly")), L = d(() => t.modelValue ?? t.value), { cachedSelectedListboxOptions: T, cachedListboxSelectedValues: $, setCachedValues: P } = vt(
+      z(t, "items"),
+      L,
+      z(t, "multiple"),
+      z(t, "enableValueLabelPair")
+    ), V = D(l["aria-label"]), M = D(l["aria-describedby"]), { ariaLabel: J, label: G } = _e(t), O = d(() => m("ariaLabelFallback")), f = bt({
       // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: Z.value || M,
-      label: E,
-      defaultFallback: Q
-    }), ie = t.size === ae.SMALL || pt(da, !1), je = r(() => ie ? ae.SMALL : ae.DEFAULT), He = r(() => ({
+      ariaLabel: J.value || V,
+      label: G,
+      defaultFallback: O
+    }), N = t.size === le.SMALL || Ie(Mt, !1), Ye = d(() => N ? le.SMALL : le.DEFAULT), Je = d(() => ({
       "b-dropdown--condensed": t.condensed
-    })), Ye = r(() => ({
+    })), Ge = d(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), Y = B(""), ce = V(t, "items"), De = V(t, "staticCategories"), pe = ra(
-      Y,
+    })), X = D(""), ce = z(t, "items"), Be = z(t, "staticCategories"), pe = ua(
+      X,
       ce,
       t?.search?.searchEvent,
-      De,
+      Be,
       t?.search?.debounceTime
-    ), Se = r(() => t.dynamicFiltering && !!Y.value), Je = na({
+    ), Se = d(() => t.dynamicFiltering && !!X.value), Xe = ia({
       items: ce,
-      placeholder: V(t, "placeholder"),
-      isMultiSelect: V(t, "multiple"),
-      selectedValues: k
-    }), Ge = r(() => {
-      if (t?.multiple && Array.isArray(C.value))
+      placeholder: z(t, "placeholder"),
+      isMultiSelect: z(t, "multiple"),
+      selectedValues: T
+    }), Ze = d(() => {
+      if (t?.multiple && Array.isArray(L.value))
         return t.items.filter(
           ({ value: s }) => t?.value && (t?.value).includes(s)
         );
       if (!t.multiple && t.staticCategories) {
         const s = t.items.find(
-          (K) => K.items?.some((J) => J.value === C.value)
+          (q) => q.items?.some((Z) => Z.value === L.value)
         );
-        return (s ? s.items.find((K) => K.value === C.value) : t.items.find(({ value: K }) => K === C.value)) ?? null;
+        return (s ? s.items.find((q) => q.value === L.value) : t.items.find(({ value: q }) => q === L.value)) ?? null;
       }
-      return t.items.find(({ value: s }) => s === C.value);
-    }), Xe = r(() => {
-      const s = pe.value.findIndex(({ value: P }) => t.enableValueLabelPair ? C.value.value === P : C.value === P);
+      return t.items.find(({ value: s }) => s === L.value);
+    }), Qe = d(() => {
+      const s = pe.value.findIndex(({ value: K }) => t.enableValueLabelPair ? L.value.value === K : L.value === K);
       return s > -1 ? s : 0;
-    }), { isMultiLevelSelect: Be, flattenedItemsList: Ze } = wt(ce), Qe = r(() => Be.value && !t.staticCategories), et = r(() => Qe.value ? "treeitem" : "option"), tt = r(() => {
+    }), { isMultiLevelSelect: Ae, flattenedItemsList: et } = ht(ce), tt = d(() => Ae.value && !t.staticCategories), at = d(() => tt.value ? "treeitem" : "option"), lt = d(() => {
       if (t.multiple) {
-        const s = Array.isArray(C.value) ? C.value.length : 0, P = Be.value ? Ze.value.length : ce.value.length;
-        return s === 0 ? null : !t.hasMoreItems && P > 0 && P === s ? h("all") : s;
+        const s = Array.isArray(L.value) ? L.value.length : 0, K = Ae.value ? et.value.length : ce.value.length;
+        return s === 0 ? null : !t.hasMoreItems && K > 0 && K === s ? m("all") : s;
       }
       return null;
-    }), at = r(
+    }), ot = d(
       () => [
-        t.description ? c : null,
-        U.value,
-        t.errorMessage ? O : null
+        t.description ? r : null,
+        M.value,
+        t.errorMessage ? x : null
       ].filter(Boolean).join(" ") || null
-    ), lt = r(() => y.value?.$el), { visibleDomOptions: ot, updateVisibleDomOptions: Ae } = Lt(
-      lt,
+    ), nt = d(() => v.value?.$el), { visibleDomOptions: st, updateVisibleDomOptions: ke } = gt(
+      nt,
       pe,
-      et
-    ), nt = () => {
-      L.value || (m.value = !0, R(() => {
-        Ae();
+      at
+    ), it = () => {
+      h.value || (y.value = !0, F(() => {
+        ke();
       }));
     }, we = () => {
-      m.value = !1;
+      y.value = !1;
     }, Le = () => {
-      L.value || (m.value = !m.value, R(() => {
-        Ae();
-      }), Se.value && (Y.value = ""));
-    }, st = () => {
-      Se.value && (Y.value = ""), m.value && (m.value = !1, y.value.onOutsideDropdownClick());
-    }, it = async (s) => {
-      t.multiple || (Y.value = "", m.value = !1), _(s), S(T.value), t.multiple || (await R(), Te());
+      h.value || (y.value = !y.value, F(() => {
+        ke();
+      }), Se.value && (X.value = ""));
     }, rt = () => {
-      a(g.SHOW_MORE);
-    }, dt = sa(
+      Se.value && (X.value = ""), y.value && (y.value = !1, v.value.onOutsideDropdownClick());
+    }, dt = async (s) => {
+      t.multiple || (X.value = "", y.value = !1), P(s), w($.value), t.multiple || (await F(), Te());
+    }, ut = () => {
+      a(S.SHOW_MORE);
+    }, ct = ra(
       {
         inputContainerRef: p,
-        optionsContainerRef: y,
-        selectedValueIndex: Xe,
-        isDropdownOpen: m,
-        isDynamicFltering: V(t, "dynamicFiltering"),
-        items: ot,
+        optionsContainerRef: v,
+        selectedValueIndex: Qe,
+        isDropdownOpen: y,
+        isDynamicFltering: z(t, "dynamicFiltering"),
+        items: st,
         isMultiple: t.multiple,
-        totalItemCount: r(() => pe.value.length),
+        totalItemCount: d(() => pe.value.length),
         isVirtualScroll: !t?.multiple && t?.virtualScroll !== !1 && t?.lazyLoadType === "none"
       },
       Le,
-      nt,
+      it,
       we
-    ), ut = ia(
+    ), pt = da(
       {
         inputContainerRef: p,
-        isDropdownOpen: m
+        isDropdownOpen: y
       },
       we
-    ), ct = {
-      [g.CLOSE_DROPDOWN]: we,
-      [g.SELECT]: it,
-      [g.SHOW_MORE]: rt,
-      ...ut
+    ), ft = {
+      [S.CLOSE_DROPDOWN]: we,
+      [S.SELECT]: dt,
+      [S.SHOW_MORE]: ut,
+      ...pt
     };
     t.error && xe(
       'BentoDropdown "error" property',
@@ -1095,69 +1098,69 @@ const We = {
       p.value.focus();
     };
     return ve(
-      () => m.value,
+      () => y.value,
       (s) => {
         s && a("open");
       }
-    ), u({
+    ), c({
       focus: Te
-    }), (s, P) => ne((b(), x("div", {
-      class: oe(["b-dropdown", He.value])
+    }), (s, K) => se((b(), C("div", {
+      class: ne(["b-dropdown", Je.value])
     }, [
-      o(E) ? (b(), j(o(It), {
+      o(G) ? (b(), H(o(Ct), {
         key: 0,
-        id: o(v),
+        id: o(B),
         condensed: s.condensed,
-        label: o(E),
+        label: o(G),
         "tooltip-text": s.tooltipText,
         optional: s.optional,
         required: s.required
-      }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : $("", !0),
-      ne((b(), x("div", A({
+      }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : R("", !0),
+      se((b(), C("div", A({
         ref_key: "inputContainerRefWrapper",
-        ref: w
-      }, de(o(dt), !0)), [
-        (b(), j(_e(je.value), {
+        ref: g
+      }, de(o(ct), !0)), [
+        (b(), H(Pe(Ye.value), {
           ref_key: "inputContainerRef",
           ref: p,
           condensed: s.condensed,
-          value: Y.value,
-          "additional-items-selected": tt.value,
-          "aria-controls": o(D),
-          ariaExpanded: m.value,
-          "aria-labelledby": o(E) ? o(v) : null,
-          "aria-describedby": at.value,
+          value: X.value,
+          "additional-items-selected": lt.value,
+          "aria-controls": o(I),
+          ariaExpanded: y.value,
+          "aria-labelledby": o(G) ? o(B) : null,
+          "aria-describedby": ot.value,
           "aria-label": o(f),
-          "aria-readonly": o(L),
+          "aria-readonly": o(h),
           "aria-required": s.required,
-          readonly: o(L),
+          readonly: o(h),
           disabled: s.disabled,
-          "display-value": o(Je),
+          "display-value": o(Xe),
           "dynamic-filtering": s.dynamicFiltering,
           "is-invalid": !!s.errorMessage || s.error,
           multiple: s.multiple,
-          open: m.value,
-          "selected-value-item": o(ie) ? void 0 : Ge.value,
+          open: y.value,
+          "selected-value-item": o(N) ? void 0 : Ze.value,
           "show-slot-content-in-multiple": s.showSlotContentInMultiple,
-          onInput: P[0] || (P[0] = (K) => Y.value = K),
+          onInput: K[0] || (K[0] = (q) => X.value = q),
           onOpen: Le,
           onClose: Le
         }, be({ _: 2 }, [
-          ue(o(i), (K, J) => ({
-            name: J,
-            fn: z((Ce) => [
-              q(s.$slots, J, le(me(Ce)), void 0, !0)
+          ue(o(i), (q, Z) => ({
+            name: Z,
+            fn: W((Ce) => [
+              U(s.$slots, Z, oe(ye(Ce)), void 0, !0)
             ])
           }))
         ]), 1064, ["condensed", "value", "additional-items-selected", "aria-controls", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "aria-required", "readonly", "disabled", "display-value", "dynamic-filtering", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple"]))
       ], 16)), [
-        [o(xt)]
+        [o(Lt)]
       ]),
-      p.value ? (b(), j(o(Nt), A({
+      p.value ? (b(), H(o($t), A({
         key: 1,
-        id: o(D),
+        id: o(I),
         ref_key: "optionsContainerRef",
-        ref: y,
+        ref: v,
         "aria-label": o(f),
         "component-loading": s.componentLoading,
         "empty-state": s.emptyState,
@@ -1165,54 +1168,52 @@ const We = {
         "is-option-disabled": s.isOptionDisabled,
         items: o(pe),
         multiple: s.multiple,
-        "static-categories": De.value,
-        open: m.value,
-        "selected-value": o(k),
+        "static-categories": Be.value,
+        open: y.value,
+        "selected-value": o(T),
         searching: Se.value,
-        "target-element": w.value,
+        "target-element": g.value,
         loading: s.loading,
         "has-more-items": s.hasMoreItems,
         "lazy-load-type": s.lazyLoadType,
         "virtual-scroll": s.virtualScroll
-      }, de(ct)), be({ _: 2 }, [
-        ue(o(i), (K, J) => ({
-          name: J,
-          fn: z((Ce) => [
-            q(s.$slots, J, le(me(Ce)), void 0, !0)
+      }, de(ft)), be({ _: 2 }, [
+        ue(o(i), (q, Z) => ({
+          name: Z,
+          fn: W((Ce) => [
+            U(s.$slots, Z, oe(ye(Ce)), void 0, !0)
           ])
         }))
-      ]), 1040, ["id", "aria-label", "component-loading", "empty-state", "disabled", "is-option-disabled", "items", "multiple", "static-categories", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type", "virtual-scroll"])) : $("", !0),
-      s.errorMessage ? (b(), j(o(Dt), {
+      ]), 1040, ["id", "aria-label", "component-loading", "empty-state", "disabled", "is-option-disabled", "items", "multiple", "static-categories", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type", "virtual-scroll"])) : R("", !0),
+      s.errorMessage ? (b(), H(o(xt), {
         key: 2,
-        id: o(O),
+        id: o(x),
         "error-message": s.errorMessage,
         class: "b-dropdown__error-message"
-      }, null, 8, ["id", "error-message"])) : $("", !0),
-      s.description || o(n)("description") ? (b(), j(o(Ke), {
+      }, null, 8, ["id", "error-message"])) : R("", !0),
+      s.description || o(n)("description") ? (b(), H(o(Ke), {
         key: 3,
-        id: o(c),
-        class: oe(["b-dropdown__description", Ye.value]),
+        id: o(r),
+        class: ne(["b-dropdown__description", Ge.value]),
         el: "span"
       }, {
-        default: z(() => [
-          q(s.$slots, "description", {}, () => [
-            fe(G(s.description), 1)
+        default: W(() => [
+          U(s.$slots, "description", {}, () => [
+            fe(Q(s.description), 1)
           ], !0)
         ]),
         _: 3
-      }, 8, ["id", "class"])) : $("", !0)
+      }, 8, ["id", "class"])) : R("", !0)
     ], 2)), [
-      [o(Et), st]
+      [o(wt), rt]
     ]);
   }
-}), Ra = /* @__PURE__ */ X(ca, [["__scopeId", "data-v-5edc4069"]]);
+}), Na = /* @__PURE__ */ ee(pa, [["__scopeId", "data-v-0e85a425"]]);
 export {
-  Ra as B,
-  Wt as D,
-  Ma as I,
-  ae as a,
-  da as b,
-  $a as c,
-  ra as u
+  Na as B,
+  Ht as D,
+  le as a,
+  Mt as b,
+  ua as u
 };
-//# sourceMappingURL=dropdown.Bsic3Nll.js.map
+//# sourceMappingURL=dropdown.CK8cdMyV.js.map