@adyen/bento-vue3 1.7.0 → 1.8.0

package/dist/chunks/{dropdown.afff433b.js → dropdown.502e1f5c.js}

@@ -1,63 +1,63 @@
-import { ref as S, watch as be, computed as p, defineComponent as ne, toRefs as ve, resolveComponent as R, openBlock as b, createBlock as I, resolveDynamicComponent as ye, mergeProps as A, withCtx as O, createElementVNode as U, withKeys as Ne, createVNode as k, toHandlers as x, createSlots as Z, renderList as Y, renderSlot as G, normalizeProps as Q, guardReactiveProps as X, createElementBlock as E, toDisplayString as P, createCommentVNode as L, pushScopeId as ge, popScopeId as he, normalizeClass as we, withDirectives as q, vShow as de, nextTick as B, toRef as N, resolveDirective as ue, createTextVNode as W } from "vue";
-import { a as s, B as ee, b as te } from "./listbox.f6e5a11d.js";
-import { B as Me } from "./directive.0408e565.js";
-import { B as D, a as Pe } from "./keyboard-navigation.ca47dfa8.js";
-import { D as Ke, a as M, b as V, c as ke } from "./dropdown-default-textbox.0b38fac3.js";
-import { _ as z } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as ze, d as Fe } from "./index.2bd3812b.js";
+import { ref as $, watch as me, computed as c, defineComponent as te, toRefs as be, resolveComponent as E, openBlock as y, createBlock as A, resolveDynamicComponent as ve, mergeProps as I, withCtx as M, createElementVNode as W, withKeys as Ae, createVNode as F, toHandlers as z, createSlots as V, renderList as J, renderSlot as Z, normalizeProps as Y, guardReactiveProps as G, createElementBlock as B, toDisplayString as oe, createCommentVNode as N, pushScopeId as ye, popScopeId as ge, normalizeClass as he, withDirectives as x, vShow as re, nextTick as C, toRef as R, resolveDirective as de, createTextVNode as Ne } from "vue";
+import { B as Me, d as Pe } from "./index.75f3672e.js";
 import { g as K } from "./unique-id.a2a2b458.js";
-import { u as le } from "./i18n.6c402773.js";
-import { u as We } from "./aria-label.ac9651a5.js";
-import { u as xe } from "./use-form-layout-loading.d03e5d48.js";
-import { a as J } from "./index.bcc58fdd.js";
-import { BentoPopover as ce } from "../popover.js";
-import { E as qe } from "./error-message.64e1964b.js";
+import { u as Ke } from "./aria-label.ac9651a5.js";
+import { u as ne } from "./i18n.6c402773.js";
+import { u as ke } from "./use-form-layout-loading.d03e5d48.js";
+import { B as _, a as Fe } from "./keyboard-navigation.ca47dfa8.js";
+import { a as s, B as Q, b as X } from "./listbox.d07c24e6.js";
+import { B as ze } from "./directive.0408e565.js";
+import { a as H } from "./index.7262642e.js";
+import { a as ue } from "./index.726e2f3c.js";
+import { _ as k } from "./_plugin-vue_export-helper.dad06003.js";
+import { D as xe, a as T, b as q, c as We } from "./dropdown-default-textbox.74c4584a.js";
+import { E as Ue, F as je } from "./field-label.61679178.js";
 import "../assets/dropdown.css";
-var T = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(T || {});
-const oe = {
+var D = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(D || {});
+const ee = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, Ue = (e, o, n) => {
-  const t = S(e.value), { t: a } = le({ messages: oe });
-  be(e, () => {
+}, He = (e, o, n) => {
+  const t = $(e.value), { t: a } = ne({ messages: ee });
+  me(e, () => {
     t.value = e.value;
   });
-  const i = p(
+  const i = c(
     () => JSON.stringify(t.value) === JSON.stringify(e.value)
-  ), r = () => {
+  ), d = () => {
     n(s.SELECT, t.value), n(s.CLOSE_DROPDOWN);
-  }, d = () => {
+  }, r = () => {
     t.value = e.value, n(s.CLOSE_DROPDOWN);
-  }, l = p(() => [
+  }, l = c(() => [
     {
       title: a("apply"),
-      event: r,
+      event: d,
       disabled: i.value
     },
     {
       title: a("cancel"),
-      event: d
+      event: r
     }
-  ]), c = (v) => {
-    t.value = v, o.value || n(s.SELECT, v);
-  }, $ = (v) => {
-    c(v), n(s.TAB);
-  }, g = (v) => {
-    c(v), n(s.ENTER);
-  }, y = (v) => {
-    c(v), n(s.SPACE);
-  }, m = () => {
-    d(), n(s.ESCAPE);
-  }, h = () => {
+  ]), p = (m) => {
+    t.value = m, o.value || n(s.SELECT, m);
+  }, O = (m) => {
+    p(m), n(s.TAB);
+  }, g = (m) => {
+    p(m), n(s.ENTER);
+  }, h = (m) => {
+    p(m), n(s.SPACE);
+  }, b = () => {
+    r(), n(s.ESCAPE);
+  }, v = () => {
     n(s.SHOW_MORE);
-  }, C = {
-    [s.SELECT]: c,
-    [s.SHOW_MORE]: h,
-    [s.TAB]: $,
-    [s.SPACE]: y,
+  }, w = {
+    [s.SELECT]: p,
+    [s.SHOW_MORE]: v,
+    [s.TAB]: O,
+    [s.SPACE]: h,
     [s.ENTER]: g
   };
   return {
@@ -65,16 +65,16 @@ const oe = {
     actions: l,
     internalSelectedValue: t,
     // Methods
-    listeners: C,
-    onEscapeKey: m
+    listeners: w,
+    onEscapeKey: b
   };
-}, je = ne({
-  i18n: { messages: oe },
+}, qe = te({
+  i18n: { messages: ee },
   name: "bento-dropdown-options-container",
   components: {
-    BentoListbox: ee,
-    PopperContainer: J,
-    BentoPopover: ce
+    BentoListbox: Q,
+    PopperContainer: H,
+    BentoPopover: ue
   },
   props: {
     /**
@@ -118,8 +118,8 @@ const oe = {
      */
     inputSize: {
       type: String,
-      default: T.DEFAULT,
-      validator: (e) => Object.values(T).includes(e)
+      default: D.DEFAULT,
+      validator: (e) => Object.values(D).includes(e)
     },
     /**
      * The option elements to populate the dropdown with.
@@ -142,8 +142,8 @@ const oe = {
      */
     lazyLoadType: {
       type: String,
-      default: te.AUTOMATIC,
-      validator: (e) => Object.values(te).includes(e)
+      default: X.AUTOMATIC,
+      validator: (e) => Object.values(X).includes(e)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -169,12 +169,12 @@ const oe = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: ee.props.searching,
+    searching: Q.props.searching,
     /**
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: J.props.targetElement.type, required: !0 },
+    targetElement: { type: H.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.
@@ -194,25 +194,26 @@ const oe = {
     s.TAB
   ],
   setup(e, { emit: o, slots: n }) {
-    var u;
-    const { selectedValue: t, multiple: a } = ve(e), i = S(null), { t: r } = le({ messages: oe }), d = p(() => e.open && !e.disabled), l = p(() => r("noOptionsMatchThisSearch")), c = {
-      "min-width": `${(u = e == null ? void 0 : e.targetElement) == null ? void 0 : u.clientWidth}px`,
-      "max-width": "min(500px, 95%)"
-    }, $ = p(() => ({
+    const { selectedValue: t, multiple: a } = be(e), i = $(null), { t: d } = ne({ messages: ee }), r = c(() => e.open && !e.disabled), l = c(() => d("noOptionsMatchThisSearch")), p = c(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), g = p(() => ({
-      "b-dropdown-options-container__listbox--small": e.inputSize === T.SMALL,
+    })), O = c(() => ({
+      "b-dropdown-options-container__listbox--small": e.inputSize === D.SMALL,
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: y, internalSelectedValue: m, listeners: h, onEscapeKey: C } = Ue(
+    })), { actions: g, internalSelectedValue: h, listeners: b, onEscapeKey: v } = He(
       t,
       a,
       o
-    ), v = p(
-      () => e != null && e.multiple ? ce : J
-    ), F = p(
-      () => e != null && e.multiple ? {
+    ), w = c(
+      () => e != null && e.multiple ? ue : H
+    ), m = c(() => {
+      var u;
+      const P = {
+        "min-width": `${(u = e == null ? void 0 : e.targetElement) == null ? void 0 : u.clientWidth}px`,
+        "max-width": "min(500px, 95%)"
+      };
+      return e != null && e.multiple ? {
         actionsLayout: "space-between",
-        actions: y.value,
+        actions: g.value,
         divider: !0,
         fallbackPosition: ["top-start"],
         id: K(`dropdown-options-${e.id}`),
@@ -220,7 +221,7 @@ const oe = {
         position: "bottom-start",
         style: {
           width: "auto",
-          ...c
+          ...P
         },
         targetElement: e.targetElement
       } : {
@@ -228,42 +229,42 @@ const oe = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: d.value ? "block" : "none",
-          ...c
+          display: r.value ? "block" : "none",
+          ...P
         },
         targetElement: e.targetElement
-      }
-    );
+      };
+    });
     return {
       // Values
-      isDropdownOpen: d,
-      conditionalClasses: $,
-      conditionalListboxClasses: g,
+      isDropdownOpen: r,
+      conditionalClasses: p,
+      conditionalListboxClasses: O,
       noResultsMessage: l,
       slots: n,
-      actions: y,
-      internalSelectedValue: m,
+      actions: g,
+      internalSelectedValue: h,
       // Component wrapper
-      popperContainerOrPopoverComponent: v,
-      popperContainerOrPopoverProps: F,
+      popperContainerOrPopoverComponent: w,
+      popperContainerOrPopoverProps: m,
       // Refs
       dropdownOptionsListboxRef: i,
       // Events
-      onEscapeKey: C,
-      listeners: h
+      onEscapeKey: v,
+      listeners: b
     };
   }
 });
-function He(e, o, n, t, a, i) {
-  const r = R("bento-listbox");
-  return b(), I(ye(e.popperContainerOrPopoverComponent), A({
+function Ve(e, o, n, t, a, i) {
+  const d = E("bento-listbox");
+  return y(), A(ve(e.popperContainerOrPopoverComponent), I({
     class: ["b-dropdown-options-container", e.conditionalClasses]
   }, e.popperContainerOrPopoverProps), {
-    default: O(() => [
-      U("div", {
-        onKeydown: o[0] || (o[0] = Ne((...d) => e.onEscapeKey && e.onEscapeKey(...d), ["esc"]))
+    default: M(() => [
+      W("div", {
+        onKeydown: o[0] || (o[0] = Ae((...r) => e.onEscapeKey && e.onEscapeKey(...r), ["esc"]))
       }, [
-        k(r, A({
+        F(d, I({
           id: e.id,
           ref: "dropdownOptionsListboxRef",
           "aria-label": e.ariaLabel,
@@ -279,11 +280,11 @@ function He(e, o, n, t, a, i) {
           "lazy-load-type": e.lazyLoadType,
           "has-more-items": e.hasMoreItems,
           "virtual-scroll": e.virtualScroll
-        }, x(e.listeners)), Z({ _: 2 }, [
-          Y(e.slots, (d, l) => ({
+        }, z(e.listeners)), V({ _: 2 }, [
+          J(e.slots, (r, l) => ({
             name: l,
-            fn: O((c) => [
-              G(e.$slots, l, Q(X(c)), void 0, !0)
+            fn: M((p) => [
+              Z(e.$slots, l, Y(G(p)), void 0, !0)
             ])
           }))
         ]), 1040, ["id", "aria-label", "class", "empty-state", "is-option-disabled", "items", "selected-value", "multiple", "no-results-message", "searching", "loading", "lazy-load-type", "has-more-items", "virtual-scroll"])
@@ -292,55 +293,55 @@ function He(e, o, n, t, a, i) {
     _: 3
   }, 16, ["class"]);
 }
-const Ve = /* @__PURE__ */ z(je, [["render", He], ["__scopeId", "data-v-7cdbf295"]]);
-let pe = 0;
-const Je = {
+const Je = /* @__PURE__ */ k(qe, [["render", Ve], ["__scopeId", "data-v-470172b0"]]);
+let ce = 0;
+const Ze = {
   beforeCreate() {
-    this.uuid = pe.toString(), pe += 1;
+    this.uuid = ce.toString(), ce += 1;
   }
-}, Ze = (e) => (ge("data-v-18645fe6"), e = e(), he(), e), Ye = { key: 0 }, Ge = /* @__PURE__ */ Ze(() => /* @__PURE__ */ U("path", {
+}, Ye = (e) => (ye("data-v-18645fe6"), e = e(), ge(), e), Ge = { key: 0 }, Qe = /* @__PURE__ */ Ye(() => /* @__PURE__ */ W("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M4.4697 5.96967C4.76259 5.67678 5.23747 5.67678 5.53036 5.96967L8.00003 8.43934L10.4697 5.96967C10.7626 5.67678 11.2375 5.67678 11.5304 5.96967C11.8233 6.26256 11.8233 6.73744 11.5304 7.03033L8.53036 10.0303C8.23747 10.3232 7.76259 10.3232 7.4697 10.0303L4.4697 7.03033C4.17681 6.73744 4.17681 6.26256 4.4697 5.96967Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function Qe(e, o, n, t, a, i) {
-  return b(), E("svg", A({ role: "img" }, e.$attrs, {
+function Xe(e, o, n, t, a, i) {
+  return y(), B("svg", I({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (b(), E("title", Ye, P(e.$attrs["svg-title"]), 1)) : L("", !0),
-    Ge
+    e.$attrs["svg-title"] ? (y(), B("title", Ge, oe(e.$attrs["svg-title"]), 1)) : N("", !0),
+    Qe
   ], 16);
 }
-const Xe = /* @__PURE__ */ z(Je, [["render", Qe], ["__scopeId", "data-v-18645fe6"]]);
-let fe = 0;
-const et = {
+const et = /* @__PURE__ */ k(Ze, [["render", Xe], ["__scopeId", "data-v-18645fe6"]]);
+let pe = 0;
+const tt = {
   beforeCreate() {
-    this.uuid = fe.toString(), fe += 1;
+    this.uuid = pe.toString(), pe += 1;
   }
-}, tt = (e) => (ge("data-v-6f20d431"), e = e(), he(), e), ot = { key: 0 }, nt = /* @__PURE__ */ tt(() => /* @__PURE__ */ U("path", {
+}, ot = (e) => (ye("data-v-6f20d431"), e = e(), ge(), e), nt = { key: 0 }, lt = /* @__PURE__ */ ot(() => /* @__PURE__ */ W("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M11.5303 10.0303C11.2374 10.3232 10.7626 10.3232 10.4697 10.0303L8 7.56066L5.53033 10.0303C5.23744 10.3232 4.76256 10.3232 4.46967 10.0303C4.17678 9.73744 4.17678 9.26256 4.46967 8.96967L7.46967 5.96967C7.61032 5.82902 7.80109 5.75 8 5.75C8.19891 5.75 8.38968 5.82902 8.53033 5.96967L11.5303 8.96967C11.8232 9.26256 11.8232 9.73744 11.5303 10.0303Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function lt(e, o, n, t, a, i) {
-  return b(), E("svg", A({ role: "img" }, e.$attrs, {
+function at(e, o, n, t, a, i) {
+  return y(), B("svg", I({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (b(), E("title", ot, P(e.$attrs["svg-title"]), 1)) : L("", !0),
-    nt
+    e.$attrs["svg-title"] ? (y(), B("title", nt, oe(e.$attrs["svg-title"]), 1)) : N("", !0),
+    lt
   ], 16);
 }
-const at = /* @__PURE__ */ z(et, [["render", lt], ["__scopeId", "data-v-6f20d431"]]), it = ne({
+const it = /* @__PURE__ */ k(tt, [["render", at], ["__scopeId", "data-v-6f20d431"]]), st = te({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: Xe, ChevronUpSmallIcon: at, DropdownBaseTextbox: Ke },
+  components: { ChevronDownSmallIcon: et, ChevronUpSmallIcon: it, DropdownBaseTextbox: xe },
   inheritAttrs: !1,
   props: {
     /**
@@ -412,43 +413,43 @@ const at = /* @__PURE__ */ z(et, [["render", lt], ["__scopeId", "data-v-6f20d431
      */
     value: { type: String, default: "" }
   },
-  emits: [M.OPEN, M.CLOSE],
+  emits: [T.OPEN, T.CLOSE],
   setup(e, { emit: o }) {
-    const n = p(() => ({
-      [`b-dropdown-small-textbox--${V.DISABLED}`]: e.disabled,
-      [`b-dropdown-small-textbox--${V.READONLY}`]: e.readonly,
-      [`b-dropdown-small-textbox--${V.OPENED}`]: e.open
-    })), t = p(() => e.open && !e.disabled && !e.readonly), a = () => {
-      o(M.OPEN);
+    const n = c(() => ({
+      [`b-dropdown-small-textbox--${q.DISABLED}`]: e.disabled,
+      [`b-dropdown-small-textbox--${q.READONLY}`]: e.readonly,
+      [`b-dropdown-small-textbox--${q.OPENED}`]: e.open
+    })), t = c(() => e.open && !e.disabled && !e.readonly), a = () => {
+      o(T.OPEN);
     }, i = () => {
-      o(M.CLOSE);
-    }, r = {
-      [M.OPEN]: a,
-      [M.CLOSE]: i
+      o(T.CLOSE);
+    }, d = {
+      [T.OPEN]: a,
+      [T.CLOSE]: i
     };
     return {
       // Values
       conditionalClasses: n,
       isDropdownOpen: t,
       // Events
-      listeners: r
+      listeners: d
     };
   }
 });
-const st = { class: "b-dropdown-small-textbox__chevron" };
-function rt(e, o, n, t, a, i) {
-  const r = R("chevron-up-small-icon"), d = R("chevron-down-small-icon"), l = R("dropdown-base-textbox");
-  return b(), E("div", {
-    class: we(["b-dropdown-small-textbox", e.conditionalClasses])
+const rt = { class: "b-dropdown-small-textbox__chevron" };
+function dt(e, o, n, t, a, i) {
+  const d = E("chevron-up-small-icon"), r = E("chevron-down-small-icon"), l = E("dropdown-base-textbox");
+  return y(), B("div", {
+    class: he(["b-dropdown-small-textbox", e.conditionalClasses])
   }, [
-    k(l, A({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, x(e.listeners)), {
-      icon: O(() => [
-        U("div", st, [
-          q(k(r, { "svg-title": "opened" }, null, 512), [
-            [de, e.isDropdownOpen]
+    F(l, I({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, z(e.listeners)), {
+      icon: M(() => [
+        W("div", rt, [
+          x(F(d, { "svg-title": "opened" }, null, 512), [
+            [re, e.isDropdownOpen]
           ]),
-          q(k(d, { "svg-title": "closed" }, null, 512), [
-            [de, !e.isDropdownOpen]
+          x(F(r, { "svg-title": "closed" }, null, 512), [
+            [re, !e.isDropdownOpen]
           ])
         ])
       ]),
@@ -456,52 +457,33 @@ function rt(e, o, n, t, a, i) {
     }, 16)
   ], 2);
 }
-const dt = /* @__PURE__ */ z(it, [["render", rt], ["__scopeId", "data-v-55bc3614"]]);
-function ut(e, o, n) {
-  const t = S(e), a = S(o), i = (d, l = []) => l.flatMap((c) => c.label.toLocaleLowerCase().includes(d) ? [c, ...i(d, c.items)] : c.items ? [...i(d, c.items)] : []);
-  return be(t, () => {
-    n !== void 0 && n(t.value);
-  }), p(() => {
-    if (!t.value || n !== void 0)
-      return a.value;
-    const d = t.value.toLocaleLowerCase();
-    return i(d, a.value);
-  });
-}
-const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
+const ut = /* @__PURE__ */ k(st, [["render", dt], ["__scopeId", "data-v-55bc3614"]]), ct = ({ items: e, placeholder: o, selectedValue: n }) => {
   const t = e.value.find(({ value: a }) => a === n.value);
   return (t == null ? void 0 : t.label) || o.value || null;
 }, pt = ({ selectedValues: e, items: o, placeholder: n }) => {
   var t;
   return !e.value || ((t = e.value) == null ? void 0 : t.length) === 0 ? n.value || null : e.value.map((a) => {
-    const { label: i } = o.value.find(({ value: r }) => r === a);
+    const { label: i } = o.value.find(({ value: d }) => d === a);
     return i;
   }).join(", ");
 }, ft = ({ selectedValues: e, items: o, placeholder: n }) => {
   var t;
   return !e.value || !((t = e.value) != null && t.length) ? n.value || null : o.value.reduce((a, i) => {
     if (i.items) {
-      const r = i.items.filter(
+      const d = i.items.filter(
         (l) => e.value.includes(l.value)
       );
-      r.length === i.items.length ? a.push(i.label) : r.forEach(({ label: l }) => a.push(l));
+      d.length === i.items.length ? a.push(i.label) : d.forEach(({ label: l }) => a.push(l));
     }
     return e.value.includes(i.value) && a.push(i.label), a;
   }, []).join(", ");
 }, mt = ({ items: e, placeholder: o, value: n, multiple: t }) => {
-  const a = p(() => e.value.find((r) => {
-    var d;
-    return (d = r.items) == null ? void 0 : d.length;
+  const a = c(() => e.value.find((d) => {
+    var r;
+    return (r = d.items) == null ? void 0 : r.length;
   }));
-  return p(() => t.value ? a.value ? ft({ selectedValues: n, placeholder: o, items: e }) : pt({ selectedValues: n, items: e, placeholder: o }) : ct({ items: e, placeholder: o, selectedValue: n }));
-}, me = {
-  "en-US": {
-    optional: "optional",
-    required: "required",
-    clearSearch: "Clear filter",
-    ariaLabelFallback: "Dropdown"
-  }
-}, Se = (e) => {
+  return c(() => t.value ? a.value ? ft({ selectedValues: n, placeholder: o, items: e }) : pt({ selectedValues: n, items: e, placeholder: o }) : ct({ items: e, placeholder: o, selectedValue: n }));
+}, we = (e) => {
   var o;
   (o = e.value.$children) == null || o[0].$refs.textbox.focus();
 }, bt = ({
@@ -511,58 +493,58 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
   isDropdownOpen: t,
   isDynamicFltering: a,
   items: i,
-  isMultiple: r
-}, d, l, c) => {
-  const $ = ({ detail: u }) => {
-    u.preventDefault(), t.value || (l(), B(() => {
-      var f, _;
-      r ? (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (_ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || _[n.value].$el.focus();
+  isMultiple: d
+}, r, l, p) => {
+  const O = ({ detail: u }) => {
+    u.preventDefault(), t.value || (l(), C(() => {
+      var f, L;
+      d ? (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (L = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || L[n.value].$el.focus();
     }));
   }, g = ({ detail: u }) => {
-    u.preventDefault(), t.value || (l(), B(() => {
+    u.preventDefault(), t.value || (l(), C(() => {
       var f;
       (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus();
     }));
-  }, y = () => {
-    t.value || (l(), B(() => {
+  }, h = () => {
+    t.value || (l(), C(() => {
       var u, f;
-      if (r) {
-        const _ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[_.length - 1].$children[i.length - 1].$el.focus();
+      if (d) {
+        const L = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[L.length - 1].$children[i.length - 1].$el.focus();
       } else
         (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[i.length - 1].$el.focus();
     }));
-  }, m = () => {
-    t.value && (c(), Se(e));
-  }, h = () => {
-    t.value || l(), B(() => {
+  }, b = () => {
+    t.value && (p(), we(e));
+  }, v = () => {
+    t.value || l(), C(() => {
       var u;
       (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus();
     });
-  }, C = ({ detail: u }) => {
-    u.preventDefault(), d(), t.value && B(() => {
-      var f, _;
-      r ? (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (_ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || _[n.value].$el.focus();
+  }, w = ({ detail: u }) => {
+    u.preventDefault(), r(), t.value && C(() => {
+      var f, L;
+      d ? (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (L = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || L[n.value].$el.focus();
     });
-  }, v = () => {
-    d(), t.value && B(() => {
+  }, m = () => {
+    r(), t.value && C(() => {
       var u, f;
-      r ? (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus() : (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[n.value].$el.focus();
+      d ? (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus() : (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[n.value].$el.focus();
     });
   };
-  return p(() => ({
-    ...a.value ? {} : { [D.SPACE]: C },
-    [D.ENTER]: v,
-    [D.ARROW_DOWN]: $,
-    [D.ARROW_UP]: g,
-    [D.END]: y,
-    [D.ESCAPE]: m,
-    [D.HOME]: h
+  return c(() => ({
+    ...a.value ? {} : { [_.SPACE]: w },
+    [_.ENTER]: m,
+    [_.ARROW_DOWN]: O,
+    [_.ARROW_UP]: g,
+    [_.END]: h,
+    [_.ESCAPE]: b,
+    [_.HOME]: v
   }));
 }, vt = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
   const t = () => {
-    o.value && n(), B(() => {
-      Se(e);
+    o.value && n(), C(() => {
+      we(e);
     });
   };
   return {
@@ -571,17 +553,35 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
     [s.TAB]: t,
     [s.SPACE]: t
   };
-}, yt = ne({
-  i18n: { messages: me },
+};
+function yt(e, o, n) {
+  const t = $(e), a = $(o), i = (r, l = []) => l.flatMap((p) => p.label.toLocaleLowerCase().includes(r) ? [p, ...i(r, p.items)] : p.items ? [...i(r, p.items)] : []);
+  return me(t, () => {
+    n !== void 0 && n(t.value);
+  }), c(() => {
+    if (!t.value || n !== void 0)
+      return a.value;
+    const r = t.value.toLocaleLowerCase();
+    return i(r, a.value);
+  });
+}
+const fe = {
+  "en-US": {
+    clearSearch: "Clear filter",
+    ariaLabelFallback: "Dropdown"
+  }
+}, gt = te({
+  i18n: { messages: fe },
   name: "b-dropdown",
   components: {
-    BentoDropdownOptionsContainer: Ve,
-    BentoTypography: ze,
-    DropdownInputDefault: ke,
-    DropdownInputSmall: dt,
-    ErrorMessage: qe
+    BentoDropdownOptionsContainer: Je,
+    BentoTypography: Me,
+    DropdownInputDefault: We,
+    DropdownInputSmall: ut,
+    ErrorMessage: Ue,
+    FieldLabel: je
   },
-  directives: { BentoClickOutsideDirective: Me, BentoKeyboardNavigationDirective: Pe },
+  directives: { BentoClickOutsideDirective: ze, BentoKeyboardNavigationDirective: Fe },
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -671,8 +671,8 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
      */
     lazyLoadType: {
       type: String,
-      default: ee.props.lazyLoadType.default,
-      validator: (e) => Object.values(te).includes(e)
+      default: Q.props.lazyLoadType.default,
+      validator: (e) => Object.values(X).includes(e)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -700,9 +700,13 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
      */
     size: {
       type: String,
-      default: T.DEFAULT,
-      validator: (e) => Object.values(T).includes(e)
+      default: D.DEFAULT,
+      validator: (e) => Object.values(D).includes(e)
     },
+    /**
+     * Adds a info icon next to the label to display the passed tooltip message.
+     */
+    tooltipText: { type: String, default: null },
     /**
      * The `input` value.
      * Providing an empty string will select no options.
@@ -731,69 +735,69 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
   },
   emits: ["input", s.SHOW_MORE],
   setup(e, { attrs: o, emit: n, slots: t }) {
-    var re;
-    const { t: a } = le({ messages: me }), i = S(null), r = S(null), d = S(null), l = S(!1), c = K("bento-dropdown-options-container"), $ = K("dropdown-label"), g = K("dropdown-description"), y = K("dropdown-error"), { isReadOnly: m } = xe(N(e, "readonly")), h = S(o["aria-label"]), { ariaLabel: C } = ve(e), v = We({
-      ariaLabel: h.value,
+    var se;
+    const { t: a } = ne({ messages: fe }), i = $(null), d = $(null), r = $(null), l = $(!1), p = K("bento-dropdown-options-container"), O = K("dropdown-label"), g = K("dropdown-description"), h = K("dropdown-error"), { isReadOnly: b } = ke(R(e, "readonly")), v = $(o["aria-label"]), { ariaLabel: w } = be(e), m = Ke({
+      ariaLabel: v.value,
       // TODO: take this line away when the aria-label props is removed
-      label: C,
+      label: w,
       defaultFallback: a("ariaLabelFallback")
-    }), F = p(() => ({
+    }), P = c(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), u = S(""), f = N(e, "items"), _ = ut(u, f, (re = e == null ? void 0 : e.search) == null ? void 0 : re.searchEvent), j = p(() => e.dynamicFiltering && !!u.value), $e = mt({
+    })), u = $(""), f = R(e, "items"), L = yt(u, f, (se = e == null ? void 0 : e.search) == null ? void 0 : se.searchEvent), U = c(() => e.dynamicFiltering && !!u.value), Se = mt({
       items: f,
-      multiple: N(e, "multiple"),
-      placeholder: N(e, "placeholder"),
-      value: N(e, "value")
-    }), _e = p(() => e.size === T.DEFAULT), Oe = p(
+      multiple: R(e, "multiple"),
+      placeholder: R(e, "placeholder"),
+      value: R(e, "value")
+    }), $e = c(() => e.size === D.DEFAULT), Oe = c(
       () => e != null && e.multiple ? e.items.filter(
-        ({ value: w }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(w)
-      ) : e.items.find(({ value: w }) => w === (e == null ? void 0 : e.value))
-    ), Le = p(() => {
-      const w = e.items.findIndex(({ value: Ae }) => e.value === Ae);
-      return w > 0 ? w : 0;
-    }), Ee = p(() => {
-      var w;
-      return e.multiple ? (w = e == null ? void 0 : e.value) == null ? void 0 : w.length : null;
-    }), Ce = p(
-      () => `${e.description ? g : ""} ${e.errorMessage ? y : ""}`.trim() || null
-    ), De = () => {
-      m.value || (l.value = !0);
-    }, H = () => {
+        ({ value: S }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(S)
+      ) : e.items.find(({ value: S }) => S === (e == null ? void 0 : e.value))
+    ), Le = c(() => {
+      const S = e.items.findIndex(({ value: Te }) => e.value === Te);
+      return S > 0 ? S : 0;
+    }), Ee = c(() => {
+      var S;
+      return e.multiple ? (S = e == null ? void 0 : e.value) == null ? void 0 : S.length : null;
+    }), _e = c(
+      () => `${e.description ? g : ""} ${e.errorMessage ? h : ""}`.trim() || null
+    ), Ce = () => {
+      b.value || (l.value = !0);
+    }, j = () => {
       l.value = !1;
-    }, ae = () => {
-      m.value || (l.value = !l.value, j.value && (u.value = ""));
-    }, Ie = () => {
-      j.value && (u.value = ""), l.value && (l.value = !1);
-    }, ie = (w) => {
-      e.multiple || (u.value = "", l.value = !1), n("input", w);
-    }, se = () => {
+    }, le = () => {
+      b.value || (l.value = !l.value, U.value && (u.value = ""));
+    }, De = () => {
+      U.value && (u.value = ""), l.value && (l.value = !1);
+    }, ae = (S) => {
+      e.multiple || (u.value = "", l.value = !1), n("input", S);
+    }, ie = () => {
       n(s.SHOW_MORE);
-    }, Be = bt(
+    }, Ie = bt(
       {
         inputContainerRef: i,
-        optionsContainerRef: d,
+        optionsContainerRef: r,
         selectedValueIndex: Le,
         isDropdownOpen: l,
-        isDynamicFltering: N(e, "dynamicFiltering"),
+        isDynamicFltering: R(e, "dynamicFiltering"),
         items: e.items,
         isMultiple: e.multiple
       },
-      ae,
-      De,
-      H
-    ), Re = vt(
+      le,
+      Ce,
+      j
+    ), Be = vt(
       {
         inputContainerRef: i,
         isDropdownOpen: l
       },
-      H
-    ), Te = {
-      [s.CLOSE_DROPDOWN]: H,
-      [s.SELECT]: ie,
-      [s.SHOW_MORE]: se,
-      ...Re
+      j
+    ), Re = {
+      [s.CLOSE_DROPDOWN]: j,
+      [s.SELECT]: ae,
+      [s.SHOW_MORE]: ie,
+      ...Be
     };
-    return e.error && Fe(
+    return e.error && Pe(
       'BentoDropdown "error" property',
       `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
                         Having the field as "undefined" will hide/remove the error.
@@ -801,83 +805,56 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
       "2.0.0"
     ), {
       // Values
-      computedAriaLabel: v,
+      computedAriaLabel: m,
       additionalItemsSelected: Ee,
-      idDefaultSize: _e,
+      idDefaultSize: $e,
       isDropdownOpen: l,
-      displayValue: $e,
-      dropdownOptionsContainerId: c,
-      filteredItems: _,
-      isSearching: j,
-      isReadOnly: m,
+      displayValue: Se,
+      dropdownOptionsContainerId: p,
+      filteredItems: L,
+      isSearching: U,
+      isReadOnly: b,
       searchTerm: u,
-      labelId: $,
+      labelId: O,
       descriptionId: g,
-      errorId: y,
-      ariaDescribedBy: Ce,
+      errorId: h,
+      ariaDescribedBy: _e,
       selectedValueItem: Oe,
       // Conciliation of Vue2 $scopedSlots and Vue3 $scopes.
       // The setup method and the "useSlots" composible define
       // { slots } as a proxy of $scopedSlots and $scopes in their
       // respective Vue version. Source: https://github.com/vuejs/composition-api/issues/84#issuecomment-524885445
       slots: t,
-      descriptionConditionalClasses: F,
+      descriptionConditionalClasses: P,
       // Refs
       inputContainerRef: i,
-      inputContainerRefWrapper: r,
-      optionsContainerRef: d,
+      inputContainerRefWrapper: d,
+      optionsContainerRef: r,
       // Events
-      closeOpenedDropdown: Ie,
-      toggleDropdown: ae,
-      onOptionSelected: ie,
-      emitShowMoreEvent: se,
-      textboxKeyboardNavigationListeners: Be,
-      listboxListeners: Te
+      closeOpenedDropdown: De,
+      toggleDropdown: le,
+      onOptionSelected: ae,
+      emitShowMoreEvent: ie,
+      textboxKeyboardNavigationListeners: Ie,
+      listboxListeners: Re
     };
   }
 });
-const gt = { class: "b-dropdown" }, ht = ["id"];
+const ht = { class: "b-dropdown" };
 function wt(e, o, n, t, a, i) {
-  var g;
-  const r = R("bento-typography"), d = R("bento-dropdown-options-container"), l = R("error-message"), c = ue("bento-keyboard-navigation-directive"), $ = ue("bento-click-outside-directive");
-  return q((b(), E("div", gt, [
-    e.label ? (b(), E("div", {
+  var h;
+  const d = E("field-label"), r = E("bento-dropdown-options-container"), l = E("error-message"), p = E("bento-typography"), O = de("bento-keyboard-navigation-directive"), g = de("bento-click-outside-directive");
+  return x((y(), B("div", ht, [
+    e.label ? (y(), A(d, {
       key: 0,
       id: e.labelId,
-      class: "b-dropdown__label"
-    }, [
-      k(r, {
-        el: "span",
-        stronger: ""
-      }, {
-        default: O(() => [
-          W(P(e.label), 1)
-        ]),
-        _: 1
-      }),
-      e.optional ? (b(), I(r, {
-        key: 0,
-        class: "b-dropdown__label-requirement",
-        el: "span"
-      }, {
-        default: O(() => [
-          W(" (" + P(e.$t("optional")) + ") ", 1)
-        ]),
-        _: 1
-      })) : L("", !0),
-      e.required ? (b(), I(r, {
-        key: 1,
-        class: "b-dropdown__label-requirement",
-        el: "span"
-      }, {
-        default: O(() => [
-          W(" (" + P(e.$t("required")) + ") ", 1)
-        ]),
-        _: 1
-      })) : L("", !0)
-    ], 8, ht)) : L("", !0),
-    q((b(), E("div", A({ ref: "inputContainerRefWrapper" }, x(e.textboxKeyboardNavigationListeners, !0)), [
-      (b(), I(ye(e.size), {
+      label: e.label,
+      "tooltip-text": e.tooltipText,
+      optional: e.optional,
+      required: e.required
+    }, null, 8, ["id", "label", "tooltip-text", "optional", "required"])) : N("", !0),
+    x((y(), B("div", I({ ref: "inputContainerRefWrapper" }, z(e.textboxKeyboardNavigationListeners, !0)), [
+      (y(), A(ve(e.size), {
         ref: "inputContainerRef",
         value: e.searchTerm,
         "additional-items-selected": e.additionalItemsSelected,
@@ -896,27 +873,27 @@ function wt(e, o, n, t, a, i) {
         open: e.isDropdownOpen,
         "selected-value-item": e.idDefaultSize ? e.selectedValueItem : void 0,
         "show-slot-content-in-multiple": e.showSlotContentInMultiple,
-        onInput: o[0] || (o[0] = (y) => e.searchTerm = y),
+        onInput: o[0] || (o[0] = (b) => e.searchTerm = b),
         onOpen: e.toggleDropdown,
         onClose: e.toggleDropdown
-      }, Z({ _: 2 }, [
-        Y(e.slots, (y, m) => ({
-          name: m,
-          fn: O((h) => [
-            G(e.$slots, m, Q(X(h)), void 0, !0)
+      }, V({ _: 2 }, [
+        J(e.slots, (b, v) => ({
+          name: v,
+          fn: M((w) => [
+            Z(e.$slots, v, Y(G(w)), void 0, !0)
           ])
         }))
       ]), 1064, ["value", "additional-items-selected", "ariaControls", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "readonly", "disabled", "display-value", "dynamic-filtering", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple", "onOpen", "onClose"]))
     ], 16)), [
-      [c]
+      [O]
     ]),
-    e.inputContainerRef ? (b(), I(d, A({
+    e.inputContainerRef ? (y(), A(r, I({
       key: 1,
       id: e.dropdownOptionsContainerId,
       ref: "optionsContainerRef",
       "aria-label": e.computedAriaLabel,
       "empty-state": e.emptyState,
-      "debounce-time": (g = e.search) == null ? void 0 : g.debounceTime,
+      "debounce-time": (h = e.search) == null ? void 0 : h.debounceTime,
       disabled: e.disabled,
       "input-size": e.size,
       "is-option-disabled": e.isOptionDisabled,
@@ -930,39 +907,39 @@ function wt(e, o, n, t, a, i) {
       "has-more-items": e.hasMoreItems,
       "lazy-load-type": e.lazyLoadType,
       "virtual-scroll": e.virtualScroll
-    }, x(e.listboxListeners)), Z({ _: 2 }, [
-      Y(e.slots, (y, m) => ({
-        name: m,
-        fn: O((h) => [
-          G(e.$slots, m, Q(X(h)), void 0, !0)
+    }, z(e.listboxListeners)), V({ _: 2 }, [
+      J(e.slots, (b, v) => ({
+        name: v,
+        fn: M((w) => [
+          Z(e.$slots, v, Y(G(w)), void 0, !0)
         ])
       }))
-    ]), 1040, ["id", "aria-label", "empty-state", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type", "virtual-scroll"])) : L("", !0),
-    e.errorMessage ? (b(), I(l, {
+    ]), 1040, ["id", "aria-label", "empty-state", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type", "virtual-scroll"])) : N("", !0),
+    e.errorMessage ? (y(), A(l, {
       key: 2,
       id: e.errorId,
       "error-message": e.errorMessage,
       class: "b-dropdown__error-message"
-    }, null, 8, ["id", "error-message"])) : L("", !0),
-    e.description ? (b(), I(r, {
+    }, null, 8, ["id", "error-message"])) : N("", !0),
+    e.description ? (y(), A(p, {
       key: 3,
       id: e.descriptionId,
-      class: we(["b-dropdown__description", e.descriptionConditionalClasses]),
+      class: he(["b-dropdown__description", e.descriptionConditionalClasses]),
       el: "span"
     }, {
-      default: O(() => [
-        W(P(e.description), 1)
+      default: M(() => [
+        Ne(oe(e.description), 1)
       ]),
       _: 1
-    }, 8, ["id", "class"])) : L("", !0)
+    }, 8, ["id", "class"])) : N("", !0)
   ])), [
-    [$, e.closeOpenedDropdown]
+    [g, e.closeOpenedDropdown]
   ]);
 }
-const Mt = /* @__PURE__ */ z(yt, [["render", wt], ["__scopeId", "data-v-e9e0b9c7"]]);
+const Mt = /* @__PURE__ */ k(gt, [["render", wt], ["__scopeId", "data-v-a24ee2cb"]]);
 export {
   Mt as B,
-  T as a,
-  ut as u
+  D as a,
+  yt as u
 };
-//# sourceMappingURL=dropdown.afff433b.js.map
+//# sourceMappingURL=dropdown.502e1f5c.js.map