@adyen/bento-vue3 1.58.1 → 1.59.0

package/dist/chunks/{menu.BmSWTWp2.js → menu.HVsIOPzt.js}

@@ -1,21 +1,22 @@
-import { defineComponent as D, computed as $, resolveComponent as v, createBlock as M, openBlock as c, normalizeClass as X, createSlots as x, withCtx as I, createVNode as O, createCommentVNode as w, createTextVNode as G, toDisplayString as j, resolveDynamicComponent as ae, ref as r, inject as ee, createElementBlock as R, mergeProps as q, toHandlers as re, renderSlot as F, onMounted as de, Transition as ce, createElementVNode as N, withKeys as h, withModifiers as V, Fragment as te, renderList as ne, nextTick as oe, normalizeStyle as se, provide as me } from "vue";
-import { g as J } from "./generate-uid.NJ8tVoha.js";
-import { a as Y, B as fe } from "./popover.DiIZe9RM.js";
-import { B as le, D as pe } from "./divider.qUOSAbU6.js";
+import { defineComponent as N, computed as _, resolveComponent as C, createBlock as B, openBlock as v, normalizeClass as Q, createSlots as x, withCtx as I, createVNode as E, createCommentVNode as O, createTextVNode as G, toDisplayString as U, resolveDynamicComponent as ie, ref as d, inject as ee, createElementBlock as L, mergeProps as j, toHandlers as ae, renderSlot as K, onMounted as re, Transition as de, createElementVNode as R, withKeys as g, withModifiers as H, Fragment as te, renderList as ne, watch as ce, nextTick as q, normalizeStyle as oe, provide as me } from "vue";
+import { g as X } from "./generate-uid.NJ8tVoha.js";
+import { a as Y, B as fe } from "./popover.sXC1vaC4.js";
+import { B as se, D as pe } from "./divider.qUOSAbU6.js";
 import { u as ve } from "./use-click-outside.BnhTgpSt.js";
 import { u as be } from "./use-has-slot.B7eQSabc.js";
-import { u as Ce } from "./i18n.B6g5VX0q.js";
+import { u as ye } from "./i18n.B6g5VX0q.js";
 /* empty css              */
 import { _ as T } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { a as ye, C as Z } from "./chevron-left.BF63HtOH.js";
-import { a as z, B as Ie } from "./base-button.DdNFlbgH.js";
-import { B as ge } from "./typography.DN5eC5ch.js";
-import { B as he } from "./teleport.CfGWjxe2.js";
+import { a as Ce, C as z } from "./chevron-left.BF63HtOH.js";
+import { a as J, B as he } from "./base-button.DdNFlbgH.js";
+import { B as Ie } from "./typography.DN5eC5ch.js";
+import { t as ge } from "./truncate.BfIl_-71.js";
+import { B as Me } from "./teleport.CfGWjxe2.js";
 import { B as ke } from "./toggle-button.Dv1t15yj.js";
 import "../assets/menu.css";
-const Be = Symbol("menu inverse style injection key"), Me = D({
+const Be = Symbol("menu inverse style injection key"), _e = N({
   name: "menu-item",
-  components: { BaseButton: Ie, BentoTypography: ge, ChevronRightIcon: ye },
+  components: { BaseButton: he, BentoTypography: Ie, ChevronRightIcon: Ce },
   props: {
     /**
      * menu-item text that gets displayed as the main label
@@ -83,60 +84,62 @@ const Be = Symbol("menu inverse style injection key"), Me = D({
       default: !1
     }
   },
-  emits: [z.CLICK],
+  emits: [J.CLICK],
   setup(e, { emit: t }) {
+    const u = _(() => ({
+      "b-menu-item--critical": e.critical,
+      "b-menu-item--indent": e.indent
+    })), m = _(() => ge(e.secondaryText, 10));
     return {
       // Values
-      conditionalClasses: $(() => ({
-        "b-menu-item--critical": e.critical,
-        "b-menu-item--indent": e.indent
-      })),
+      conditionalClasses: u,
+      computedSecondaryText: m,
       // Methods
-      onClick: (d) => {
-        d.stopPropagation(), e.handler(), t(z.CLICK);
+      onClick: (i) => {
+        i.stopPropagation(), e.handler(), t(J.CLICK);
       }
     };
   }
 });
-function _e(e, t, p, s, d, b) {
-  const m = v("bento-typography"), l = v("chevron-right-icon"), u = v("base-button");
-  return c(), M(u, {
-    class: X(["b-menu-item", e.conditionalClasses]),
+function Se(e, t, p, u, m, c) {
+  const i = C("bento-typography"), l = C("chevron-right-icon"), a = C("base-button");
+  return v(), B(a, {
+    class: Q(["b-menu-item", e.conditionalClasses]),
     role: "menuitem",
     disabled: e.disabled,
     tabindex: "-1",
     onClick: e.onClick
   }, x({
     default: I(() => [
-      O(m, {
+      E(i, {
         el: "span",
         variant: "body",
         stronger: e.isTitle,
         class: "b-menu-item__primary-text"
       }, {
         default: I(() => [
-          G(j(e.text), 1)
+          G(U(e.text), 1)
         ]),
         _: 1
       }, 8, ["stronger"]),
-      e.secondaryText ? (c(), M(m, {
+      e.computedSecondaryText ? (v(), B(i, {
         key: 0,
         el: "span",
         variant: "body",
         class: "b-menu-item__secondary-text"
       }, {
         default: I(() => [
-          G(j(e.secondaryText), 1)
+          G(U(e.computedSecondaryText), 1)
         ]),
         _: 1
-      })) : w("", !0)
+      })) : O("", !0)
     ]),
     _: 2
   }, [
     e.icon ? {
       name: "iconLeft",
       fn: I(() => [
-        (c(), M(ae(e.icon), {
+        (v(), B(ie(e.icon), {
           class: "b-menu-item__icon-left",
           "aria-hidden": "true"
         }))
@@ -146,47 +149,47 @@ function _e(e, t, p, s, d, b) {
     e.chevron ? {
       name: "iconRight",
       fn: I(() => [
-        O(l, { "aria-hidden": "true" })
+        E(l, { "aria-hidden": "true" })
       ]),
       key: "1"
     } : void 0
   ]), 1032, ["class", "disabled", "onClick"]);
 }
-const ue = /* @__PURE__ */ T(Me, [["render", _e], ["__scopeId", "data-v-9e8afd9c"]]);
-var k = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(k || {});
-const $e = Symbol("menu registering injection key"), Se = {
+const ue = /* @__PURE__ */ T(_e, [["render", Se], ["__scopeId", "data-v-4cecac65"]]);
+var M = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(M || {});
+const $e = Symbol("menu registering injection key"), Ee = {
   name: "bento-menu-list-container"
-}, Le = /* @__PURE__ */ D({
-  ...Se,
+}, Le = /* @__PURE__ */ N({
+  ...Ee,
   setup(e) {
-    const t = r(), p = r({}), s = ee(
+    const t = d(), p = d({}), u = ee(
       $e,
       !1
     );
-    if (s) {
-      const { registerMenuContainerElement: d } = s;
-      d(t), p.value = {
-        mouseleave: s == null ? void 0 : s.menuMouseLeave
+    if (u) {
+      const { registerMenuContainerElement: m } = u;
+      m(t), p.value = {
+        mouseleave: u == null ? void 0 : u.menuMouseLeave
       };
     }
-    return (d, b) => (c(), R("div", q({
+    return (m, c) => (v(), L("div", j({
       ref_key: "menuListContainerRef",
       ref: t,
       class: "b-menu-list-container",
       "data-testid": "menu-list-container"
-    }, re(p.value, !0)), [
-      F(d.$slots, "default", {}, void 0, !0)
+    }, ae(p.value, !0)), [
+      K(m.$slots, "default", {}, void 0, !0)
     ], 16));
   }
-}), ie = /* @__PURE__ */ T(Le, [["__scopeId", "data-v-02a3ca45"]]), U = {
+}), le = /* @__PURE__ */ T(Le, [["__scopeId", "data-v-02a3ca45"]]), V = {
   "en-US": {
     backButton: "Go back",
     menuButton: "Open menu"
   }
-}, Oe = D({
-  i18n: { messages: U },
+}, we = N({
+  i18n: { messages: V },
   name: "sub-menu-item-list",
-  components: { BentoDivider: le, MenuItem: ue, MenuListContainer: ie },
+  components: { BentoDivider: se, MenuItem: ue, MenuListContainer: le },
   props: {
     items: {
       type: Array,
@@ -197,83 +200,83 @@ const $e = Symbol("menu registering injection key"), Se = {
       required: !0
     }
   },
-  emits: [k.CLOSE, k.BACK],
+  emits: [M.CLOSE, M.BACK],
   setup(e, { emit: t }) {
-    const p = r(null), s = r(0), d = r(e.items.length), b = () => t(k.CLOSE), m = () => t(k.BACK), l = $(() => {
-      var C;
-      const i = (C = e.items) == null ? void 0 : C.map((y) => ({
-        ...y,
-        indent: !y.icon,
+    const p = d(null), u = d(0), m = d(e.items.length), c = () => t(M.CLOSE), i = () => t(M.BACK), l = _(() => {
+      var f;
+      const s = (f = e.items) == null ? void 0 : f.map((b) => ({
+        ...b,
+        indent: !b.icon,
         isTitle: !1,
-        clickHandler: b
+        clickHandler: c
       }));
       return [
         {
           text: e.title,
           secondaryText: null,
           critical: !1,
-          icon: Z,
+          icon: z,
           isTitle: !0,
           disabled: !1,
           indent: !1,
-          handler: m,
-          clickHandler: m,
+          handler: i,
+          clickHandler: i,
           addDivider: !0
         },
-        ...i
+        ...s
       ];
-    }), u = async () => {
-      var i, C, y, g, B;
-      (B = (g = (y = (C = (i = p.value) == null ? void 0 : i.children) == null ? void 0 : C[s.value]) == null ? void 0 : y.children) == null ? void 0 : g[0]) == null || B.focus();
+    }), a = async () => {
+      var s, f, b, y, k;
+      (k = (y = (b = (f = (s = p.value) == null ? void 0 : s.children) == null ? void 0 : f[u.value]) == null ? void 0 : b.children) == null ? void 0 : y[0]) == null || k.focus();
     };
-    de(async () => {
-      setTimeout(() => u(), 150);
+    re(async () => {
+      setTimeout(() => a(), 150);
     });
     const n = () => {
-      s.value > 0 ? (s.value -= 1, l.value[s.value].disabled && n()) : s.value = d.value, u();
+      u.value > 0 ? (u.value -= 1, l.value[u.value].disabled && n()) : u.value = m.value, a();
     }, o = () => {
-      s.value < d.value ? (s.value += 1, l.value[s.value].disabled && o()) : s.value = 0, u();
+      u.value < m.value ? (u.value += 1, l.value[u.value].disabled && o()) : u.value = 0, a();
     };
     return {
       // Enums
-      BentoMenuEvent: k,
+      BentoMenuEvent: M,
       // Values
       subMenuItemListRefLocal: p,
-      subMenuFocusedIndex: s,
-      ChevronLeftIcon: Z,
+      subMenuFocusedIndex: u,
+      ChevronLeftIcon: z,
       computedItems: l,
       // Methods
-      closeMenu: b,
-      onBackButton: m,
+      closeMenu: c,
+      onBackButton: i,
       focusPrevious: n,
       focusNext: o
     };
   }
 });
-function Re(e, t, p, s, d, b) {
-  const m = v("menu-item"), l = v("bento-divider"), u = v("menu-list-container");
-  return c(), M(ce, {
+function Oe(e, t, p, u, m, c) {
+  const i = C("menu-item"), l = C("bento-divider"), a = C("menu-list-container");
+  return v(), B(de, {
     name: "b-sub-menu-item-list__transition",
     appear: ""
   }, {
     default: I(() => [
-      O(u, { class: "b-sub-menu-item-list" }, {
+      E(a, { class: "b-sub-menu-item-list" }, {
         default: I(() => [
-          N("ul", {
+          R("ul", {
             ref: "subMenuItemListRefLocal",
             role: "menu",
             class: "b-sub-menu-item-list__list",
             onKeydown: [
-              t[0] || (t[0] = h(V((...n) => e.focusNext && e.focusNext(...n), ["stop"]), ["down"])),
-              t[1] || (t[1] = h(V((...n) => e.focusPrevious && e.focusPrevious(...n), ["stop"]), ["up"])),
-              t[2] || (t[2] = h(V((...n) => e.onBackButton && e.onBackButton(...n), ["stop"]), ["esc"]))
+              t[0] || (t[0] = g(H((...n) => e.focusNext && e.focusNext(...n), ["stop"]), ["down"])),
+              t[1] || (t[1] = g(H((...n) => e.focusPrevious && e.focusPrevious(...n), ["stop"]), ["up"])),
+              t[2] || (t[2] = g(H((...n) => e.onBackButton && e.onBackButton(...n), ["stop"]), ["esc"]))
             ]
           }, [
-            (c(!0), R(te, null, ne(e.computedItems, (n, o) => (c(), R("li", {
+            (v(!0), L(te, null, ne(e.computedItems, (n, o) => (v(), L("li", {
               key: `sub-menu-item-list-item-${o}`,
               role: "none"
             }, [
-              O(m, {
+              E(i, {
                 text: n.text,
                 handler: n.handler,
                 "secondary-text": n.secondaryText,
@@ -285,10 +288,10 @@ function Re(e, t, p, s, d, b) {
                 tabindex: o === e.subMenuFocusedIndex ? "0" : "-1",
                 onClick: n.clickHandler
               }, null, 8, ["text", "handler", "secondary-text", "icon", "is-title", "disabled", "critical", "indent", "tabindex", "onClick"]),
-              n.addDivider ? (c(), M(l, {
+              n.addDivider ? (v(), B(l, {
                 key: 0,
                 class: "b-sub-menu-item-list__divider"
-              })) : w("", !0)
+              })) : O("", !0)
             ]))), 128))
           ], 544)
         ]),
@@ -298,9 +301,34 @@ function Re(e, t, p, s, d, b) {
     _: 1
   });
 }
-const Ee = /* @__PURE__ */ T(Oe, [["render", Re], ["__scopeId", "data-v-621db243"]]), we = D({
+const Te = /* @__PURE__ */ T(we, [["render", Oe], ["__scopeId", "data-v-621db243"]]);
+function Re(e, t, p) {
+  const c = d(0), i = d(0), l = (n) => {
+    if (!n || !n.parentElement)
+      return;
+    const o = n.parentElement, s = n.cloneNode(!0);
+    s.style.position = "absolute", s.style.visibility = "hidden", o.appendChild(s), s.style.width = "max-content";
+    const f = s.offsetWidth, b = Math.max(150, Math.min(f, 350));
+    c.value = b, s.style.width = `${b}px`;
+    const y = s.offsetHeight;
+    i.value = y, o.removeChild(s), i.value = y;
+  };
+  return ce([t, p], async ([n]) => {
+    var o, s;
+    if (n !== null) {
+      await q();
+      const f = (s = (o = e.value) == null ? void 0 : o[0]) == null ? void 0 : s.$el;
+      f && l(f);
+    } else
+      c.value = 0, i.value = 0;
+  }), { computedStyle: _(() => {
+    const n = { width: "max-content" };
+    return p.value && (i.value > 0 && (n.height = `${i.value}px`), c.value > 0 && (n.width = `${c.value}px`)), n;
+  }) };
+}
+const Ne = N({
   name: "menu-item-list",
-  components: { BentoDivider: le, MenuItem: ue, MenuListContainer: ie, SubMenuItemList: Ee },
+  components: { BentoDivider: se, MenuItem: ue, MenuListContainer: le, SubMenuItemList: Te },
   props: {
     /**
      * The data to be displayed in the list
@@ -331,115 +359,112 @@ const Ee = /* @__PURE__ */ T(Oe, [["render", Re], ["__scopeId", "data-v-621db243
       default: !0
     }
   },
-  emits: [k.CLOSE, "menu-item-click"],
+  emits: [M.CLOSE, "menu-item-click"],
   setup(e, { emit: t, expose: p }) {
-    const s = r(null), d = r(null), b = r(null), m = r(null), l = r(!1), u = r(null), n = r(e.focusLastElement ? e.data.length - 1 : 0), o = r(0), i = r(e.data.length - 1), C = $(() => e.data.some((a) => a.icon)), y = $(() => e.indentItems || C.value ? e.data.map((a) => {
-      let f = !1;
-      return a.icon || (f = !0), {
-        ...a,
-        indent: f
+    const u = d(null), m = d(null), c = d(null), i = d(null), l = d(!1), a = d(null), n = d(e.focusLastElement ? e.data.length - 1 : 0), o = d(0), s = d(e.data.length - 1), f = _(() => e.data.some((r) => r.icon)), b = _(() => e.indentItems || f.value ? e.data.map((r) => {
+      let h = !1;
+      return r.icon || (h = !0), {
+        ...r,
+        indent: h
       };
-    }) : e.data), g = async () => {
-      var a, f, L;
-      await oe(), (L = (f = (a = d.value) == null ? void 0 : a.children[n.value]) == null ? void 0 : f.children[0]) == null || L.focus();
-    }, B = () => t(k.CLOSE), S = (a, f) => {
-      if (a.items) {
-        u.value = f, l.value = !0;
+    }) : e.data), y = async () => {
+      var r, h, $;
+      await q(), ($ = (h = (r = m.value) == null ? void 0 : r.children[n.value]) == null ? void 0 : h.children[0]) == null || $.focus();
+    }, k = () => t(M.CLOSE), S = (r, h) => {
+      if (r.items) {
+        a.value = h, l.value = !0;
         return;
       }
-      u.value = f, l.value = !1, !a.skipClose && e.closeMenuOnItemSelect !== !1 && B(), t("menu-item-click");
-    }, E = () => {
-      n.value > 0 ? (n.value -= 1, y.value[n.value].disabled && E()) : n.value = i.value, g();
-    }, P = () => {
-      n.value < i.value ? (n.value += 1, y.value[n.value].disabled && P()) : n.value = 0, g();
-    }, W = (a, f) => {
-      var L;
-      (L = a == null ? void 0 : a.items) != null && L.length && (u.value = f, l.value = !0);
-    }, H = () => {
-      u.value && l.value && (u.value = null, l.value = !1);
+      a.value = h, l.value = !1, !r.skipClose && e.closeMenuOnItemSelect !== !1 && k(), t("menu-item-click");
+    }, w = () => {
+      n.value > 0 ? (n.value -= 1, b.value[n.value].disabled && w()) : n.value = s.value, y();
+    }, D = () => {
+      n.value < s.value ? (n.value += 1, b.value[n.value].disabled && D()) : n.value = 0, y();
+    }, W = (r, h) => {
+      var $;
+      ($ = r == null ? void 0 : r.items) != null && $.length && (a.value = h, l.value = !0);
     }, A = () => {
-      l.value = !1, u.value = null, g();
+      a.value && l.value && (a.value = null, l.value = !1);
+    }, F = () => {
+      l.value = !1, a.value = null, y();
     };
     p({
-      focusItem: g
+      focusItem: y
     });
-    const K = $(() => {
-      var a, f, L;
-      return (L = (f = (a = m.value) == null ? void 0 : a[0]) == null ? void 0 : f.$el) == null ? void 0 : L.offsetHeight;
-    }), _ = $(() => l.value ? `${K.value}px` : "");
+    const { computedStyle: P } = Re(i, a, l);
     return {
       // Values
-      menuItemListRef: d,
-      menuItemListWrapperRef: b,
-      subMenuItemListRef: m,
-      menuItemRef: s,
-      computedData: y,
-      computedHeight: _,
+      menuItemListRef: m,
+      menuItemListWrapperRef: c,
+      subMenuItemListRef: i,
+      menuItemRef: u,
+      computedData: b,
+      computedStyle: P,
       focusedIndex: n,
       subMenuFocusedIndex: o,
       showSubMenu: l,
-      visibleSubMenuIndex: u,
+      visibleSubMenuIndex: a,
       // Methods
       menuItemClick: S,
-      closeMenu: B,
-      focusPrevious: E,
-      focusNext: P,
+      closeMenu: k,
+      focusPrevious: w,
+      focusNext: D,
       focusRight: W,
-      focusLeft: H,
-      onBackButton: A
+      focusLeft: A,
+      onBackButton: F
     };
   }
-}), Te = ["onKeydown"];
-function Ne(e, t, p, s, d, b) {
-  const m = v("menu-item"), l = v("bento-divider"), u = v("sub-menu-item-list"), n = v("menu-list-container");
-  return c(), M(n, {
+}), De = ["onKeydown"];
+function Pe(e, t, p, u, m, c) {
+  const i = C("menu-item"), l = C("bento-divider"), a = C("sub-menu-item-list"), n = C("menu-list-container");
+  return v(), B(n, {
     ref: "menuItemListWrapperRef",
-    style: se({ height: e.computedHeight })
+    style: oe(e.computedStyle)
   }, {
     default: I(() => [
-      N("ul", {
+      R("ul", {
         ref: "menuItemListRef",
         class: "b-menu-item-list",
         role: "menu",
         onKeydown: [
-          t[1] || (t[1] = h((...o) => e.focusNext && e.focusNext(...o), ["down"])),
-          t[2] || (t[2] = h((...o) => e.focusPrevious && e.focusPrevious(...o), ["up"])),
-          t[3] || (t[3] = h((...o) => e.closeMenu && e.closeMenu(...o), ["esc"])),
-          t[4] || (t[4] = h((...o) => e.closeMenu && e.closeMenu(...o), ["tab"]))
+          t[1] || (t[1] = g((...o) => e.focusNext && e.focusNext(...o), ["down"])),
+          t[2] || (t[2] = g((...o) => e.focusPrevious && e.focusPrevious(...o), ["up"])),
+          t[3] || (t[3] = g((...o) => e.closeMenu && e.closeMenu(...o), ["esc"])),
+          t[4] || (t[4] = g((...o) => e.closeMenu && e.closeMenu(...o), ["tab"]))
         ]
       }, [
-        (c(!0), R(te, null, ne(e.computedData, (o, i) => {
-          var C, y, g, B;
-          return c(), R("li", {
-            key: `menu-item-${i}`,
+        (v(!0), L(te, null, ne(e.computedData, (o, s) => {
+          var f, b, y, k;
+          return v(), L("li", {
+            key: `menu-item-${s}`,
             ref_for: !0,
             ref: "menuItemRef",
             class: "b-menu-item-list__item",
             role: "none",
             onKeydown: [
-              h((S) => e.focusRight(o, i), ["right"]),
-              t[0] || (t[0] = h((S) => e.focusLeft(), ["left"]))
+              g((S) => e.focusRight(o, s), ["right"]),
+              t[0] || (t[0] = g((S) => e.focusLeft(), ["left"]))
             ]
           }, [
-            O(m, {
+            E(i, {
               text: o.text,
-              handler: (C = o.items) != null && C.length ? () => null : o.handler,
+              handler: (f = o.items) != null && f.length ? () => null : o.handler,
               "secondary-text": o.secondaryText,
               icon: o.icon,
-              chevron: !!((y = o.items) != null && y.length),
+              chevron: !!((b = o.items) != null && b.length),
               disabled: o.disabled,
               critical: o.critical,
               indent: o.indent,
-              tabindex: i === e.subMenuFocusedIndex ? "0" : "-1",
-              "aria-haspopup": !!((g = o.items) != null && g.length),
-              "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === i,
-              onClick: (S) => e.menuItemClick(o, i)
+              tabindex: s === e.subMenuFocusedIndex ? "0" : "-1",
+              "aria-haspopup": !!((y = o.items) != null && y.length),
+              "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === s,
+              onClick: (S) => e.menuItemClick(o, s)
             }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
-            o.addDivider ? (c(), M(l, {
+            o.addDivider ? (v(), B(l, {
               key: 0,
               class: "b-menu-item-list__divider"
-            })) : w("", !0),
-            (B = o.items) != null && B.length && e.showSubMenu && e.visibleSubMenuIndex === i ? (c(), M(u, {
+            })) : O("", !0),
+            (k = o.items) != null && k.length && e.showSubMenu && e.visibleSubMenuIndex === s ? (v(), B(a, {
               key: 1,
               ref_for: !0,
               ref: "subMenuItemListRef",
@@ -447,48 +472,48 @@ function Ne(e, t, p, s, d, b) {
               title: o.text,
               onBack: e.onBackButton,
               onClose: e.closeMenu
-            }, null, 8, ["items", "title", "onBack", "onClose"])) : w("", !0)
-          ], 40, Te);
+            }, null, 8, ["items", "title", "onBack", "onClose"])) : O("", !0)
+          ], 40, De);
         }), 128))
       ], 544)
     ]),
     _: 1
   }, 8, ["style"]);
 }
-const De = /* @__PURE__ */ T(we, [["render", Ne], ["__scopeId", "data-v-680773ab"]]);
-let Q = 0;
-const Pe = {
+const Ke = /* @__PURE__ */ T(Ne, [["render", Pe], ["__scopeId", "data-v-999aa4e9"]]);
+let Z = 0;
+const We = {
   beforeCreate() {
-    this.uuid = Q.toString(), Q += 1;
+    this.uuid = Z.toString(), Z += 1;
   }
-}, Ke = { key: 0 };
-function Fe(e, t, p, s, d, b) {
-  return c(), R("svg", q({ role: "img" }, e.$attrs, {
+}, Ae = { key: 0 };
+function Fe(e, t, p, u, m, c) {
+  return v(), L("svg", j({ 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"] ? (c(), R("title", Ke, j(e.$attrs["svg-title"]), 1)) : w("", !0),
-    t[0] || (t[0] = N("path", {
+    e.$attrs["svg-title"] ? (v(), L("title", Ae, U(e.$attrs["svg-title"]), 1)) : O("", !0),
+    t[0] || (t[0] = R("path", {
       fill: "#00112C",
       d: "M8 4C8.29667 4 8.58668 3.91203 8.83335 3.74721C9.08003 3.58238 9.27229 3.34811 9.38582 3.07403C9.49935 2.79994 9.52906 2.49834 9.47118 2.20737C9.4133 1.91639 9.27044 1.64912 9.06066 1.43934C8.85088 1.22956 8.58361 1.0867 8.29264 1.02882C8.00167 0.970945 7.70006 1.00065 7.42598 1.11418C7.15189 1.22771 6.91762 1.41997 6.7528 1.66665C6.58797 1.91332 6.5 2.20333 6.5 2.5C6.5 2.89783 6.65803 3.27936 6.93934 3.56066C7.22064 3.84197 7.60218 4 8 4Z"
     }, null, -1)),
-    t[1] || (t[1] = N("path", {
+    t[1] || (t[1] = R("path", {
       fill: "#00112C",
       d: "M8 15C8.29667 15 8.58668 14.912 8.83335 14.7472C9.08003 14.5824 9.27229 14.3481 9.38582 14.074C9.49935 13.7999 9.52906 13.4983 9.47118 13.2074C9.4133 12.9164 9.27044 12.6491 9.06066 12.4393C8.85088 12.2296 8.58361 12.0867 8.29264 12.0288C8.00167 11.9709 7.70006 12.0007 7.42598 12.1142C7.15189 12.2277 6.91762 12.42 6.7528 12.6666C6.58797 12.9133 6.5 13.2033 6.5 13.5C6.5 13.8978 6.65803 14.2794 6.93934 14.5607C7.22064 14.842 7.60218 15 8 15Z"
     }, null, -1)),
-    t[2] || (t[2] = N("path", {
+    t[2] || (t[2] = R("path", {
       fill: "#00112C",
       d: "M8.83335 9.24721C8.58668 9.41203 8.29667 9.5 8 9.5C7.60218 9.5 7.22064 9.34197 6.93934 9.06066C6.65803 8.77936 6.5 8.39783 6.5 8C6.5 7.70333 6.58797 7.41332 6.7528 7.16665C6.91762 6.91997 7.15189 6.72771 7.42598 6.61418C7.70006 6.50065 8.00167 6.47094 8.29264 6.52882C8.58361 6.5867 8.85088 6.72956 9.06066 6.93934C9.27044 7.14912 9.4133 7.41639 9.47118 7.70737C9.52906 7.99834 9.49935 8.29994 9.38582 8.57403C9.27229 8.84811 9.08003 9.08238 8.83335 9.24721Z"
     }, null, -1))
   ], 16);
 }
-const We = /* @__PURE__ */ T(Pe, [["render", Fe]]), He = D({
-  i18n: { messages: U },
+const He = /* @__PURE__ */ T(We, [["render", Fe]]), Ue = N({
+  i18n: { messages: V },
   name: "bento-menu",
-  components: { BentoToggleButton: ke, BentoPopover: fe, BentoTeleport: he, MenuItemList: De, OptionsVerticalIcon: We },
+  components: { BentoToggleButton: ke, BentoPopover: fe, BentoTeleport: Me, MenuItemList: Ke, OptionsVerticalIcon: He },
   props: {
     /**
      * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.
@@ -514,6 +539,13 @@ const We = /* @__PURE__ */ T(Pe, [["render", Fe]]), He = D({
       type: Array,
       required: !0
     },
+    /**
+     * Disables opening the menu when the down arrow key is pressed.
+     */
+    disableArrowDownOpeningMenu: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * The position of where the menu should open.
      */
@@ -565,86 +597,86 @@ const We = /* @__PURE__ */ T(Pe, [["render", Fe]]), He = D({
       default: void 0
     }
   },
-  emits: [k.CLOSE, k.OPEN, "menu-item-click", "click-outside"],
-  setup(e, { emit: t, expose: p, slots: s }) {
-    var K;
-    const { t: d } = Ce({ messages: U }), b = r(null), m = r(null), l = r(!1), u = r(!1), n = r(null), o = J("menu"), i = J("menu-popover"), C = ee(Be, r(!1));
-    me(pe, C);
-    const y = $(() => ({
-      "b-menu--inverse": C.value
-    })), g = $(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), B = $(() => {
+  emits: [M.CLOSE, M.OPEN, "menu-item-click", "click-outside"],
+  setup(e, { emit: t, expose: p, slots: u }) {
+    var P;
+    const { t: m } = ye({ messages: V }), c = d(null), i = d(null), l = d(!1), a = d(!1), n = d(null), o = X("menu"), s = X("menu-popover"), f = ee(Be, d(!1));
+    me(pe, f);
+    const b = _(() => ({
+      "b-menu--inverse": f.value
+    })), y = _(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), k = _(() => {
       if (e != null && e.button)
         return {
           variant: "secondary",
           ...e.button
         };
     }), S = () => {
-      l.value = !0, t(k.OPEN);
-    }, E = async (_ = e.revertFocusToButton) => {
-      var a, f;
-      l.value && (l.value = !1, _ && (await oe(), (f = (a = b.value) == null ? void 0 : a.$el) == null || f.focus()), t(k.CLOSE));
-    }, P = (_) => {
-      _.stopPropagation(), l.value ? E() : S();
-    }, W = (_) => {
-      _.preventDefault(), u.value = !1, S();
-    }, H = (_) => {
-      _.preventDefault(), u.value = !0, S();
-    }, A = () => {
+      l.value = !0, t(M.OPEN);
+    }, w = async (r = e.revertFocusToButton) => {
+      var h, $;
+      l.value && (l.value = !1, r && (await q(), ($ = (h = c.value) == null ? void 0 : h.$el) == null || $.focus()), t(M.CLOSE));
+    }, D = (r) => {
+      r.stopPropagation(), l.value ? w() : S();
+    }, W = (r) => {
+      r.preventDefault(), a.value = !1, e.disableArrowDownOpeningMenu || S();
+    }, A = (r) => {
+      r.preventDefault(), a.value = !0, S();
+    }, F = () => {
       t("menu-item-click");
     };
     return ve(
       n,
       () => {
-        E(), t("click-outside");
+        w(), t("click-outside");
       },
       {
         ...e.closeOnClickOutsideOptions,
-        ignore: [b, ...((K = e.closeOnClickOutsideOptions) == null ? void 0 : K.ignore) ?? []]
+        ignore: [c, ...((P = e.closeOnClickOutsideOptions) == null ? void 0 : P.ignore) ?? []]
       }
     ), p({
       /**
        * Control to enable programmatic closing of the menu
        */
-      closeMenu: E
+      closeMenu: w
     }), {
       // Refs
       popoverRef: n,
-      menuButtonRef: b,
-      menuItemListRef: m,
+      menuButtonRef: c,
+      menuItemListRef: i,
       // Values
       menuId: o,
-      popoverId: i,
+      popoverId: s,
       showMenu: l,
-      computedButtonPropsWithDefaults: B,
-      computedMenuWidth: g,
-      isLastElementFocused: u,
+      computedButtonPropsWithDefaults: k,
+      computedMenuWidth: y,
+      isLastElementFocused: a,
       // Classes
-      computedClasses: y,
-      isInverseColorSet: C,
+      computedClasses: b,
+      isInverseColorSet: f,
       // Methods
-      hasSlot: be(s),
+      hasSlot: be(u),
       onKeyDown: W,
-      onKeyUp: H,
-      closeMenu: E,
-      menuItemClick: A,
-      toggleShowMenu: P,
+      onKeyUp: A,
+      closeMenu: w,
+      menuItemClick: F,
+      toggleShowMenu: D,
       // Translations
-      t: d
+      t: m
     };
   }
 });
-function Ae(e, t, p, s, d, b) {
-  const m = v("options-vertical-icon"), l = v("bento-toggle-button"), u = v("menu-item-list"), n = v("bento-popover"), o = v("bento-teleport");
-  return c(), R("div", {
-    class: X([e.computedClasses, "b-menu"]),
+function Ve(e, t, p, u, m, c) {
+  const i = C("options-vertical-icon"), l = C("bento-toggle-button"), a = C("menu-item-list"), n = C("bento-popover"), o = C("bento-teleport");
+  return v(), L("div", {
+    class: Q([e.computedClasses, "b-menu"]),
     "data-testid": "menu",
     onKeydown: [
-      t[0] || (t[0] = h((...i) => e.onKeyDown && e.onKeyDown(...i), ["down"])),
-      t[1] || (t[1] = h((...i) => e.onKeyUp && e.onKeyUp(...i), ["up"])),
-      t[2] || (t[2] = h((i) => e.closeMenu(), ["esc"]))
+      t[0] || (t[0] = g((...s) => e.onKeyDown && e.onKeyDown(...s), ["down"])),
+      t[1] || (t[1] = g((...s) => e.onKeyUp && e.onKeyUp(...s), ["up"])),
+      t[2] || (t[2] = g((s) => e.closeMenu(), ["esc"]))
     ]
   }, [
-    O(l, q({
+    E(l, j({
       ref: "menuButtonRef",
       "aria-haspopup": "true"
     }, e.computedButtonPropsWithDefaults, {
@@ -656,8 +688,8 @@ function Ae(e, t, p, s, d, b) {
       !e.hasSlot("default") || e.hasSlot("iconLeft") ? {
         name: "iconLeft",
         fn: I(() => [
-          F(e.$slots, "iconLeft", {}, () => [
-            O(m, {
+          K(e.$slots, "iconLeft", {}, () => [
+            E(i, {
               title: e.t("menuButton")
             }, null, 8, ["title"])
           ], !0)
@@ -667,31 +699,31 @@ function Ae(e, t, p, s, d, b) {
       e.hasSlot("default") ? {
         name: "default",
         fn: I(() => [
-          F(e.$slots, "default", {}, void 0, !0)
+          K(e.$slots, "default", {}, void 0, !0)
         ]),
         key: "1"
       } : void 0,
       e.hasSlot("iconRight") ? {
         name: "iconRight",
         fn: I(() => [
-          F(e.$slots, "iconRight", {}, void 0, !0)
+          K(e.$slots, "iconRight", {}, void 0, !0)
         ]),
         key: "2"
       } : void 0
     ]), 1040, ["aria-controls", "toggled", "inverse", "onClick"]),
-    e.menuButtonRef ? (c(), M(o, {
+    e.menuButtonRef ? (v(), B(o, {
       key: 0,
       disabled: !e.teleport
     }, {
       default: I(() => [
-        e.menuButtonRef ? (c(), M(n, {
+        e.menuButtonRef ? (v(), B(n, {
           key: 0,
           id: e.menuId,
           ref: "popoverRef",
           role: null,
           open: e.showMenu,
           class: "b-menu__popover",
-          style: se(e.computedMenuWidth),
+          style: oe(e.computedMenuWidth),
           "target-element": e.menuButtonRef,
           position: e.menuPosition,
           "fixed-positioning": e.menuFixedPositioning,
@@ -709,7 +741,7 @@ function Ae(e, t, p, s, d, b) {
           "without-space": ""
         }, {
           default: I(() => [
-            O(u, {
+            E(a, {
               ref: "menuItemListRef",
               "close-menu-on-item-select": e.closeMenuOnItemSelect,
               data: e.data,
@@ -719,18 +751,18 @@ function Ae(e, t, p, s, d, b) {
             }, null, 8, ["close-menu-on-item-select", "data", "focus-last-element", "onClose", "onMenuItemClick"])
           ]),
           _: 1
-        }, 8, ["id", "open", "style", "target-element", "position", "fixed-positioning", "teleport"])) : w("", !0)
+        }, 8, ["id", "open", "style", "target-element", "position", "fixed-positioning", "teleport"])) : O("", !0)
       ]),
       _: 1
-    }, 8, ["disabled"])) : w("", !0)
+    }, 8, ["disabled"])) : O("", !0)
   ], 34);
 }
-const nt = /* @__PURE__ */ T(He, [["render", Ae], ["__scopeId", "data-v-8c729daa"]]);
+const ut = /* @__PURE__ */ T(Ue, [["render", Ve], ["__scopeId", "data-v-e0770132"]]);
 export {
-  nt as B,
+  ut as B,
   $e as D,
   Be as M,
-  We as O,
-  k as a
+  He as O,
+  M as a
 };
-//# sourceMappingURL=menu.BmSWTWp2.js.map
+//# sourceMappingURL=menu.HVsIOPzt.js.map