@adyen/bento-vue3 1.94.0 → 1.96.0

package/dist/chunks/{dropdown.Bsic3Nll.js → dropdown.C5um1anU.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 { B as Ke, d as xe } from "./typography.B3J6_tYk.js";
-import { g as ee } from "./generate-uid.DBWe4g6T.js";
+import { ref as D, watch as ve, computed as d, defineComponent as _, useSlots as he, toRefs as _e, openBlock as b, createBlock as Y, resolveDynamicComponent as Ve, mergeProps as A, withCtx as R, createElementVNode as ie, withKeys as re, unref as o, createVNode as j, toHandlers as de, createSlots as be, renderList as ue, renderSlot as W, normalizeProps as oe, guardReactiveProps as ye, createCommentVNode as F, useAttrs as Ke, inject as Ie, nextTick as P, createElementBlock as C, normalizeClass as ne, Fragment as Ee, createTextVNode as fe, toDisplayString as Q, withModifiers as Me, withDirectives as se, vShow as me, toRef as U } from "vue";
+import { B as qe, d as xe } from "./typography.B3J6_tYk.js";
+import { g as te } from "./generate-uid.DBWe4g6T.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 ze } from "./use-has-slot.CyMiImRQ.js";
+import { C as yt } from "./cross-circle-fill.BWCKKn0E.js";
+import { C as mt } from "./cross-circle-fill-small.H1wH-vcZ.js";
+import { _ as ee } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { s as ae } from "./events.BQOQSSb7.js";
+import { C as vt } from "./chevron-down.XeE-LBV_.js";
+import { C as ht } from "./chevron-up.Cmgl2a3x.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 { u as gt } from "./aria-label.CaUURpnB.js";
+import { u as St } from "./form-field.D_2g7vaP.js";
+import { B as S, b as Oe, a as Ne, d as wt, u as Lt, c as Ct, e as Et } from "./use-cached-selected-values.DOw5IKdU.js";
+import { u as xt } from "./use-form-layout-loading.CWbjZiwP.js";
+import { B as Ot } from "./directive.D1-d-C2K.js";
+import { B as H, a as It } from "./keyboard-navigation.DWmhelVv.js";
+import { F as Dt } from "./field-label.CLV3nSzz.js";
+import { h as Bt, e as At } from "./button-actions.CxTxPprd.js";
+import { P as Re } from "./popper-container.BH4WxeUj.js";
+import { E as kt } from "./error-message.Dyvrw6ZB.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,62 +33,62 @@ 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 });
+}, Tt = (e, c, u, l) => {
+  const i = D(e.value), { t: s } = 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"),
+      title: s("apply"),
       event: a,
       disabled: t.value
     },
     {
-      title: n("cancel"),
-      event: h
+      title: s("cancel"),
+      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 },
+}, $t = _({
+  i18n: { messages: De },
   name: "bento-dropdown-options-container"
-}), Tt = /* @__PURE__ */ F({
-  ...At,
+}), Mt = /* @__PURE__ */ _({
+  ...$t,
   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: Ne.AUTOMATIC,
+      validator: (e) => Object.values(Ne).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: Re.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,90 +197,90 @@ 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(() => ({
-      "b-dropdown-options-container--single": !n?.multiple
-    })), m = r(() => ({
-      "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 = {
-        "min-width": `${n?.targetElement?.clientWidth}px`,
+  setup(e, { expose: c, emit: u }) {
+    const l = he(), i = u, s = e, { selectedValue: t, multiple: a } = _e(s), m = D(null), { t: w } = ge({ messages: De }), p = d(() => s.open && !s.disabled), g = d(() => w("noOptionsMatchThisSearch")), v = d(() => ({
+      "b-dropdown-options-container--single": !s?.multiple
+    })), y = d(() => ({
+      "b-dropdown-options-container__listbox--single": !s?.multiple
+    })), { actions: I, internalSelectedValue: B, listeners: r, onEscapeKey: x, onOutsideDropdownClick: h } = Tt(t, a, p, i), L = d(() => s?.multiple ? Bt : Re), T = d(() => {
+      const $ = {
+        "min-width": `${s?.targetElement?.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
-      return n?.multiple ? {
+      return s?.multiple ? {
         actionsLayout: "space-between",
-        ariaLabel: n.ariaLabel,
-        actions: D.value,
+        ariaLabel: s.ariaLabel,
+        actions: I.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: ee(`dropdown-options-${n.id}`),
-        open: n.open,
+        id: te(`dropdown-options-${s.id}`),
+        open: s.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...T
+          ...$
         },
-        targetElement: n.targetElement
+        targetElement: s.targetElement
       } : {
         fallbackPosition: ["top-start"],
         offset: [0, 8],
         position: "bottom-start",
         style: {
           display: p.value ? "block" : "none",
-          ...T
+          ...$
         },
-        targetElement: n.targetElement
+        targetElement: s.targetElement
       };
     });
-    return u({
-      onOutsideDropdownClick: L
-    }), (T, _) => p.value ? (b(), j(_e(C.value), A({
+    return c({
+      onOutsideDropdownClick: h
+    }), ($, V) => p.value ? (b(), Y(Ve(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: R(() => [
+        ie("div", {
+          onKeydown: V[0] || (V[0] = re(
             //@ts-ignore
-            (...M) => o(O) && o(O)(...M),
+            (...K) => o(x) && o(x)(...K),
             ["esc"]
           ))
         }, [
-          H(o(Ie), A({
+          j(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), (K, M) => ({
+              name: M,
+              fn: R((J) => [
+                W($.$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"])) : F("", !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 = {
+}), Nt = /* @__PURE__ */ ee(Mt, [["__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 Rt = /* @__PURE__ */ Symbol("dropdown small size injection key"), Ue = /* @__PURE__ */ Symbol("dropdown underline style injection key"), We = {
   "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 = {
+}, Ft = ["id", "value", "disabled", "readonly", "required"], Pt = ["id", "aria-readonly", "tabindex"], _t = {
   key: 1,
   class: "b-dropdown-base-textbox__input-multiple-selected"
-}, Rt = { class: "b-dropdown-base-textbox__input-selected-element" }, Ft = {
+}, Vt = { class: "b-dropdown-base-textbox__input-selected-element" }, Kt = {
   key: 2,
   class: "b-dropdown-base-textbox__additional-items"
-}, _t = {
+}, qt = {
   key: 3,
   class: "b-dropdown-base-textbox__icon",
   "aria-hidden": "true"
-}, Pt = ["tabindex", "onKeydown"], Kt = F({
-  i18n: { messages: qe },
+}, zt = ["tabindex", "onKeydown"], Ut = _({
+  i18n: { messages: We },
   name: "dropdown-base-textbox",
   inheritAttrs: !1
-}), Vt = /* @__PURE__ */ F({
-  ...Kt,
+}), Wt = /* @__PURE__ */ _({
+  ...Ut,
   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: We }), i = Ke(), s = he(), t = ze(s), a = e, m = u, w = D(null), p = te("textbox"), g = Ie(Ue, !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 && P(() => {
+          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 P(), w.value.focus());
+    }, V = () => {
+      a.open && (w.value.focus(), m(E.CLOSE));
+    }, K = (O) => a.open && O.target.tagName === "INPUT" ? null : a.open ? V() : $(), 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: K,
+      onKeydown: re(V, ["escape"])
     }, [
-      H(o(Ke), {
-        class: oe(["b-dropdown-base-textbox", w.value]),
+      j(o(qe), {
+        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: R(() => [
+          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(K, ["enter"])
             ],
-            onInput: U
-          }), null, 16, kt)) : (b(), x("div", A({
+            onInput: J
+          }), null, 16, Ft)) : (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") ? W(O.$slots, "display-value", oe(A({ key: 0 }, e.selectedValueItem)), void 0, !0) : W(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", _t, [
+              (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", Vt, [
+                  W(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, Pt)),
+          e.additionalItemsSelected ? (b(), C("span", Kt, Q(e.additionalItemsSelected), 1)) : F("", !0),
+          o(t)("icon") && !B.value ? (b(), C("span", qt, [
+            W(O.$slots, "icon", {}, void 0, !0)
+          ])) : F("", !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: Me(M, ["stop"]),
+            onKeydown: re(Me(M, ["stop"]), ["enter"]),
             onKeyup: re(M, ["space"])
           }, [
-            e.size === o(ae).SMALL ? (b(), j(o(bt), {
+            e.size === o(le).SMALL ? (b(), Y(o(mt), {
               key: 0,
               "svg-title": o(l)("clearSearch")
-            }, null, 8, ["svg-title"])) : (b(), j(o(ft), {
+            }, null, 8, ["svg-title"])) : (b(), Y(o(yt), {
               key: 1,
               "svg-title": o(l)("clearSearch")
             }, null, 8, ["svg-title"]))
-          ], 40, Pt)) : $("", !0)
+          ], 40, zt)) : F("", !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({
+}), je = /* @__PURE__ */ ee(Wt, [["__scopeId", "data-v-d9e852a4"]]), jt = { class: "b-dropdown-default-textbox__chevron" }, Ht = _({
   name: "dropdown-default-textbox",
   inheritAttrs: !1
-}), Ut = /* @__PURE__ */ F({
-  ...zt,
+}), Yt = /* @__PURE__ */ _({
+  ...Ht,
   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,
-      "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
+  setup(e, { expose: c, emit: u }) {
+    const l = u, i = he(), s = e, t = D(null), a = d(() => ({
+      [`b-dropdown-default-textbox--${k.ERROR}`]: !s.disabled && !s.readonly && s.isInvalid,
+      [`b-dropdown-default-textbox--${k.DISABLED}`]: s.disabled,
+      [`b-dropdown-default-textbox--${k.READONLY}`]: s.readonly,
+      [`b-dropdown-default-textbox--${k.OPENED}`]: s.open,
+      "b-dropdown-default-textbox--condensed": s.condensed
+    })), m = d(() => s.open && !s.disabled && !s.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({
+      j(je, 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: R(() => [
+          ie("div", jt, [
+            se(j(o(ht), { "svg-title": "opened" }, null, 512), [
+              [me, m.value]
             ]),
-            ne(H(o(mt), { "svg-title": "closed" }, null, 512), [
-              [ye, !h.value]
+            se(j(o(vt), { "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: R((T) => [
+            W(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 = {
+}), Jt = /* @__PURE__ */ ee(Yt, [["__scopeId", "data-v-c3e3ce21"]]);
+let Fe = 0;
+const Gt = {
   beforeCreate() {
-    this.uuid = $e.toString(), $e += 1;
+    this.uuid = Fe.toString(), Fe += 1;
   }
-}, Ht = { key: 0 };
-function Yt(e, u, d, l, i, n) {
-  return b(), x("svg", A({ role: "img" }, e.$attrs, {
+}, Xt = { key: 0 };
+function Zt(e, c, u, l, i, s) {
+  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", Xt, Q(e.$attrs["svg-title"]), 1)) : F("", !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 Qt = /* @__PURE__ */ ee(Gt, [["render", Zt]]);
+let Pe = 0;
+const ea = {
   beforeCreate() {
-    this.uuid = Re.toString(), Re += 1;
+    this.uuid = Pe.toString(), Pe += 1;
   }
-}, Xt = { key: 0 };
-function Zt(e, u, d, l, i, n) {
-  return b(), x("svg", A({ role: "img" }, e.$attrs, {
+}, ta = { key: 0 };
+function aa(e, c, u, l, i, s) {
+  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", ta, Q(e.$attrs["svg-title"]), 1)) : F("", !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 la = /* @__PURE__ */ ee(ea, [["render", aa]]), oa = { class: "b-dropdown-small-textbox__chevron" }, na = _({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), aa = /* @__PURE__ */ F({
-  ...ta,
+}), sa = /* @__PURE__ */ _({
+  ...na,
   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, s = D(null), t = Ie(Ue, !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();
+        s.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({
+      j(je, A({
         ref_key: "baseTextbox",
-        ref: n
-      }, { ...v.$attrs, ...v.$props }, {
+        ref: s
+      }, { ...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: R(() => [
+          ie("div", oa, [
+            se(j(o(la), { "svg-title": "opened" }, null, 512), [
+              [me, m.value]
             ]),
-            ne(H(o(Jt), { "svg-title": "closed" }, null, 512), [
-              [ye, !a.value]
+            se(j(o(Qt), { "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) => {
+}), ia = /* @__PURE__ */ ee(sa, [["__scopeId", "data-v-5fe55c74"]]), ra = (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(", "), da = ({ 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 ? ra(u, e) : u.value.map(({ label: t, displayValue: a }) => a ?? t).join(", ") : c.value || null);
+}, He = (e) => {
   e.value.$children?.[0].$refs.textbox.focus();
-}, sa = ({
+}, ua = ({
   inputContainerRef: e,
-  optionsContainerRef: u,
-  selectedValueIndex: d,
+  optionsContainerRef: c,
+  selectedValueIndex: u,
   isDropdownOpen: l,
   isDynamicFltering: i,
-  items: n,
+  items: s,
   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 P(), s.value[f]?.focus();
+  }, y = async (f) => {
+    i.value && await P();
+    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) => {
+    P(() => {
+      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(), P(() => {
+      r(m ? a.value - 1 : s.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();
+  }, V = () => {
+    h();
+  }, K = ({ 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(), He(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(() => ({
+    [H.ARROW_DOWN]: L,
+    [H.ARROW_UP]: T,
+    [H.HOME]: $,
+    [H.END]: V,
+    ...i.value ? {} : { [H.SPACE]: K },
+    [H.ENTER]: M,
+    ...i.value ? {} : { [H.TAB]: J },
+    [H.ESCAPE]: G
   }));
-}, ia = ({ inputContainerRef: e, isDropdownOpen: u }, d) => {
+}, ca = ({ inputContainerRef: e, isDropdownOpen: c }, u) => {
   const l = () => {
-    u.value && d(), R(() => {
-      Ue(e);
+    c.value && u(), P(() => {
+      He(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;
-  return ve(n, () => {
-    h !== void 0 && h();
-  }), r(() => {
-    if (!n.value || d !== void 0)
+function pa(e, c, u, l, i) {
+  const s = 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 ? wt(() => u(s.value), i ?? 300) : void 0;
+  return ve(s, () => {
+    m !== void 0 && m();
+  }), d(() => {
+    if (!s.value || u !== void 0)
       return t.value;
-    const p = n.value.toLocaleLowerCase();
+    const p = s.value.toLocaleLowerCase();
     return a(p, t.value);
   });
 }
-const We = {
+const Ye = {
   "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 },
+}, fa = _({
+  i18n: { messages: Ye },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: Wt,
-    DropdownInputSmall: la
+    DropdownInputDefault: Jt,
+    DropdownInputSmall: ia
   },
   model: { prop: "modelValue" }
-}), ca = /* @__PURE__ */ F({
-  ...ua,
+}), ba = /* @__PURE__ */ _({
+  ...fa,
   props: {
     ariaLabel: { default: null },
     condensed: { type: Boolean, default: !1 },
@@ -958,12 +961,13 @@ 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 },
     size: { default: null },
     staticCategories: { type: Boolean, default: !1 },
+    teleport: { default: () => ({ disabled: !0 }) },
     value: { default: null },
     modelValue: { default: null },
     virtualScroll: { type: [Boolean, Object], default: !1 },
@@ -979,105 +983,110 @@ 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 = Ke(), i = he(), s = ze(i), t = e, a = u, { t: m } = ge({ messages: Ye }), { emitValue: w } = St(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 } = xt(U(t, "readonly")), L = d(() => t.modelValue ?? t.value), { cachedSelectedListboxOptions: T, cachedListboxSelectedValues: $, setCachedValues: V } = Lt(
+      U(t, "items"),
+      L,
+      U(t, "multiple"),
+      U(t, "enableValueLabelPair")
+    ), K = D(l["aria-label"]), M = D(l["aria-describedby"]), { ariaLabel: J, label: G } = _e(t), O = d(() => m("ariaLabelFallback")), f = gt({
       // 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 || K,
+      label: G,
+      defaultFallback: O
+    }), N = t.size === le.SMALL || Ie(Rt, !1), Je = d(() => N ? le.SMALL : le.DEFAULT), Ge = d(() => ({
       "b-dropdown--condensed": t.condensed
-    })), Ye = r(() => ({
+    })), Xe = d(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), Y = B(""), ce = V(t, "items"), De = V(t, "staticCategories"), pe = ra(
-      Y,
+    })), X = D(""), ce = U(t, "items"), Be = U(t, "staticCategories"), pe = pa(
+      X,
       ce,
       t?.search?.searchEvent,
-      De,
+      Be,
       t?.search?.debounceTime
-    ), Se = r(() => t.dynamicFiltering && !!Y.value), Je = na({
+    ), Se = d(() => t.dynamicFiltering && !!X.value), Ze = da({
       items: ce,
-      placeholder: V(t, "placeholder"),
-      isMultiSelect: V(t, "multiple"),
-      selectedValues: k
-    }), Ge = r(() => {
-      if (t?.multiple && Array.isArray(C.value))
+      placeholder: U(t, "placeholder"),
+      isMultiSelect: U(t, "multiple"),
+      selectedValues: T
+    }), Qe = d(() => {
+      if (t?.multiple && Array.isArray(L.value))
         return t.items.filter(
-          ({ value: s }) => t?.value && (t?.value).includes(s)
+          ({ value: n }) => t?.value && (t?.value).includes(n)
         );
       if (!t.multiple && t.staticCategories) {
-        const s = t.items.find(
-          (K) => K.items?.some((J) => J.value === C.value)
+        const n = t.items.find(
+          (z) => z.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 (n ? n.items.find((z) => z.value === L.value) : t.items.find(({ value: z }) => z === 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 s > -1 ? s : 0;
-    }), { isMultiLevelSelect: Be, flattenedItemsList: Ze } = wt(ce), Qe = r(() => Be.value && !t.staticCategories), et = r(() => Qe.value ? "treeitem" : "option"), tt = r(() => {
+      return t.items.find(({ value: n }) => n === L.value);
+    }), et = d(() => {
+      const n = pe.value.findIndex(({ value: q }) => t.enableValueLabelPair ? L.value.value === q : L.value === q);
+      return n > -1 ? n : 0;
+    }), { isMultiLevelSelect: Ae, flattenedItemsList: tt } = Ct(ce), at = d(() => Ae.value && !t.staticCategories), lt = d(() => at.value ? "treeitem" : "option"), ot = 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 n = Array.isArray(L.value) ? L.value.length : 0, q = Ae.value ? tt.value.length : ce.value.length;
+        return n === 0 ? null : !t.hasMoreItems && q > 0 && q === n ? m("all") : n;
       }
       return null;
-    }), at = r(
+    }), nt = 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,
+    ), ke = d(() => v.value?.$el), { visibleDomOptions: st, updateVisibleDomOptions: Te } = Et(
+      ke,
       pe,
-      et
-    ), nt = () => {
-      L.value || (m.value = !0, R(() => {
-        Ae();
+      lt
+    ), it = () => {
+      h.value || (y.value = !0, P(() => {
+        Te();
       }));
     }, 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, P(() => {
+        Te();
+      }), Se.value && (X.value = ""));
     }, rt = () => {
-      a(g.SHOW_MORE);
-    }, dt = sa(
+      Se.value && (X.value = ""), y.value && (y.value = !1, v.value.onOutsideDropdownClick());
+    }, dt = d(() => [
+      rt,
+      {
+        ignore: [ke]
+      }
+    ]), ut = async (n) => {
+      t.multiple || (X.value = "", y.value = !1), V(n), w($.value), t.multiple || (await P(), $e());
+    }, ct = () => {
+      a(S.SHOW_MORE);
+    }, pt = ua(
       {
         inputContainerRef: p,
-        optionsContainerRef: y,
-        selectedValueIndex: Xe,
-        isDropdownOpen: m,
-        isDynamicFltering: V(t, "dynamicFiltering"),
-        items: ot,
+        optionsContainerRef: v,
+        selectedValueIndex: et,
+        isDropdownOpen: y,
+        isDynamicFltering: U(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(
+    ), ft = ca(
       {
         inputContainerRef: p,
-        isDropdownOpen: m
+        isDropdownOpen: y
       },
       we
-    ), ct = {
-      [g.CLOSE_DROPDOWN]: we,
-      [g.SELECT]: it,
-      [g.SHOW_MORE]: rt,
-      ...ut
+    ), bt = {
+      [S.CLOSE_DROPDOWN]: we,
+      [S.SELECT]: ut,
+      [S.SHOW_MORE]: ct,
+      ...ft
     };
     t.error && xe(
       'BentoDropdown "error" property',
@@ -1091,128 +1100,134 @@ const We = {
                 Use the "v-model" or "model-value" property instead.`,
       "2.0.0"
     );
-    const Te = () => {
+    const $e = () => {
       p.value.focus();
     };
     return ve(
-      () => m.value,
-      (s) => {
-        s && a("open");
+      () => y.value,
+      (n) => {
+        n && a("open");
       }
-    ), u({
-      focus: Te
-    }), (s, P) => ne((b(), x("div", {
-      class: oe(["b-dropdown", He.value])
+    ), c({
+      focus: $e
+    }), (n, q) => se((b(), C("div", {
+      class: ne(["b-dropdown", Ge.value])
     }, [
-      o(E) ? (b(), j(o(It), {
+      o(G) ? (b(), Y(o(Dt), {
         key: 0,
-        id: o(v),
-        condensed: s.condensed,
-        label: o(E),
-        "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({
+        id: o(B),
+        condensed: n.condensed,
+        label: o(G),
+        "tooltip-text": n.tooltipText,
+        optional: n.optional,
+        required: n.required
+      }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : F("", !0),
+      se((b(), C("div", A({
         ref_key: "inputContainerRefWrapper",
-        ref: w
-      }, de(o(dt), !0)), [
-        (b(), j(_e(je.value), {
+        ref: g
+      }, de(o(pt), !0)), [
+        (b(), Y(Ve(Je.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,
+          condensed: n.condensed,
+          value: X.value,
+          "additional-items-selected": ot.value,
+          "aria-controls": o(I),
+          ariaExpanded: y.value,
+          "aria-labelledby": o(G) ? o(B) : null,
+          "aria-describedby": nt.value,
           "aria-label": o(f),
-          "aria-readonly": o(L),
-          "aria-required": s.required,
-          readonly: o(L),
-          disabled: s.disabled,
-          "display-value": o(Je),
-          "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,
-          "show-slot-content-in-multiple": s.showSlotContentInMultiple,
-          onInput: P[0] || (P[0] = (K) => Y.value = K),
+          "aria-readonly": o(h),
+          "aria-required": n.required,
+          readonly: o(h),
+          disabled: n.disabled,
+          "display-value": o(Ze),
+          "dynamic-filtering": n.dynamicFiltering,
+          "is-invalid": !!n.errorMessage || n.error,
+          multiple: n.multiple,
+          open: y.value,
+          "selected-value-item": o(N) ? void 0 : Qe.value,
+          "show-slot-content-in-multiple": n.showSlotContentInMultiple,
+          onInput: q[0] || (q[0] = (z) => X.value = z),
           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), (z, Z) => ({
+            name: Z,
+            fn: R((Ce) => [
+              W(n.$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(It)]
       ]),
-      p.value ? (b(), j(o(Nt), A({
+      p.value ? (b(), Y(o(At), {
         key: 1,
-        id: o(D),
-        ref_key: "optionsContainerRef",
-        ref: y,
-        "aria-label": o(f),
-        "component-loading": s.componentLoading,
-        "empty-state": s.emptyState,
-        disabled: s.disabled,
-        "is-option-disabled": s.isOptionDisabled,
-        items: o(pe),
-        multiple: s.multiple,
-        "static-categories": De.value,
-        open: m.value,
-        "selected-value": o(k),
-        searching: Se.value,
-        "target-element": w.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)
-          ])
-        }))
-      ]), 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), {
+        disabled: n.teleport?.disabled,
+        to: n.teleport?.to
+      }, {
+        default: R(() => [
+          j(o(Nt), A({
+            id: o(I),
+            ref_key: "optionsContainerRef",
+            ref: v,
+            "aria-label": o(f),
+            "component-loading": n.componentLoading,
+            "empty-state": n.emptyState,
+            disabled: n.disabled,
+            "is-option-disabled": n.isOptionDisabled,
+            items: o(pe),
+            multiple: n.multiple,
+            "static-categories": Be.value,
+            open: y.value,
+            "selected-value": o(T),
+            searching: Se.value,
+            "target-element": g.value,
+            loading: n.loading,
+            "has-more-items": n.hasMoreItems,
+            "lazy-load-type": n.lazyLoadType,
+            "virtual-scroll": n.virtualScroll
+          }, de(bt)), be({ _: 2 }, [
+            ue(o(i), (z, Z) => ({
+              name: Z,
+              fn: R((Ce) => [
+                W(n.$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"])
+        ]),
+        _: 3
+      }, 8, ["disabled", "to"])) : F("", !0),
+      n.errorMessage ? (b(), Y(o(kt), {
         key: 2,
-        id: o(O),
-        "error-message": s.errorMessage,
+        id: o(x),
+        "error-message": n.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"])) : F("", !0),
+      n.description || o(s)("description") ? (b(), Y(o(qe), {
         key: 3,
-        id: o(c),
-        class: oe(["b-dropdown__description", Ye.value]),
+        id: o(r),
+        class: ne(["b-dropdown__description", Xe.value]),
         el: "span"
       }, {
-        default: z(() => [
-          q(s.$slots, "description", {}, () => [
-            fe(G(s.description), 1)
+        default: R(() => [
+          W(n.$slots, "description", {}, () => [
+            fe(Q(n.description), 1)
           ], !0)
         ]),
         _: 3
-      }, 8, ["id", "class"])) : $("", !0)
+      }, 8, ["id", "class"])) : F("", !0)
     ], 2)), [
-      [o(Et), st]
+      [o(Ot), dt.value]
     ]);
   }
-}), Ra = /* @__PURE__ */ X(ca, [["__scopeId", "data-v-5edc4069"]]);
+}), Fa = /* @__PURE__ */ ee(ba, [["__scopeId", "data-v-3dc67619"]]);
 export {
-  Ra as B,
-  Wt as D,
-  Ma as I,
-  ae as a,
-  da as b,
-  $a as c,
-  ra as u
+  Fa as B,
+  Jt as D,
+  le as a,
+  Rt as b,
+  pa as u
 };
-//# sourceMappingURL=dropdown.Bsic3Nll.js.map
+//# sourceMappingURL=dropdown.C5um1anU.js.map