@adyen/bento-vue3 1.24.0 → 1.26.0

package/dist/chunks/{index.1b1646bf.js → index.030c1dd7.js}

@@ -1,19 +1,19 @@
-import { defineComponent as O, computed as M, resolveComponent as v, openBlock as d, createBlock as $, normalizeClass as j, createSlots as Z, withCtx as C, createVNode as S, createTextVNode as W, toDisplayString as F, createCommentVNode as R, resolveDynamicComponent as se, createElementBlock as L, renderSlot as N, ref as m, onMounted as ie, Transition as le, createElementVNode as T, withKeys as g, withModifiers as D, Fragment as z, renderList as J, normalizeStyle as Y, mergeProps as G, inject as ue, provide as ae } from "vue";
-import { g as V } from "./unique-id.a2a2b458.js";
-import { a as re, B as H } from "./index.920cc1ee.js";
-import { B as Q, D as de } from "./index.70c91b3b.js";
-import { u as ce } from "./use-click-outside.941d1600.js";
-import { u as me } from "./use-has-slot.4d98bf29.js";
-import { _ as E } from "./_plugin-vue_export-helper.dad06003.js";
-import { BentoToggleButton as fe } from "../button.js";
-import { B as pe } from "./teleport.afeb4c3b.js";
-import { a as ve, C as A } from "./chevron-left.4ee92950.js";
-import { B as be, a as q } from "./base-button.ab9c947e.js";
-import { B as _e } from "./index.51fe0fc2.js";
-import "../assets/index48.css";
-const ye = O({
+import { defineComponent as T, computed as M, resolveComponent as b, openBlock as c, createBlock as B, normalizeClass as J, createSlots as Y, withCtx as C, createVNode as L, createTextVNode as V, toDisplayString as W, createCommentVNode as R, resolveDynamicComponent as ie, ref as d, inject as Z, createElementBlock as S, mergeProps as H, toHandlers as le, renderSlot as O, onMounted as ue, Transition as ae, createElementVNode as N, withKeys as h, withModifiers as F, Fragment as z, renderList as Q, normalizeStyle as X, provide as re } from "vue";
+import { g as A } from "./unique-id.a2a2b458.js";
+import { a as de, B as U } from "./index.5bdebf9d.js";
+import { B as x, D as ce } from "./index.07122048.js";
+import { u as me } from "./use-click-outside.941d1600.js";
+import { u as fe } from "./use-has-slot.4d98bf29.js";
+import { _ as w } from "./_plugin-vue_export-helper.dad06003.js";
+import { BentoToggleButton as pe } from "../button.js";
+import { B as ve } from "./teleport.afeb4c3b.js";
+import { a as be, C as j } from "./chevron-left.963d35e9.js";
+import { B as _e, a as q } from "./base-button.e84acf30.js";
+import { B as ye } from "./index.a3d60e4f.js";
+import "../assets/index7.css";
+const Ce = T({
   name: "menu-item",
-  components: { BaseButton: be, BentoTypography: _e, ChevronRightIcon: ve },
+  components: { BaseButton: _e, BentoTypography: ye, ChevronRightIcon: be },
   props: {
     /**
      * menu-item text that gets displayed as the main label
@@ -90,41 +90,41 @@ const ye = O({
         "b-menu-item--indent": e.indent
       })),
       // Methods
-      onClick: (r) => {
-        r.stopPropagation(), e.handler(), t(q.CLICK);
+      onClick: (a) => {
+        a.stopPropagation(), e.handler(), t(q.CLICK);
       }
     };
   }
 });
-function Ce(e, t, b, i, r, a) {
-  const l = v("bento-typography"), s = v("chevron-right-icon"), f = v("base-button");
-  return d(), $(f, {
-    class: j(["b-menu-item", e.conditionalClasses]),
+function he(e, t, m, s, a, r) {
+  const l = b("bento-typography"), i = b("chevron-right-icon"), p = b("base-button");
+  return c(), B(p, {
+    class: J(["b-menu-item", e.conditionalClasses]),
     role: "menuitem",
     disabled: e.disabled,
     tabindex: "-1",
     onClick: e.onClick
-  }, Z({
+  }, Y({
     default: C(() => [
-      S(l, {
+      L(l, {
         el: "span",
         variant: "body",
         stronger: e.isTitle,
         class: "b-menu-item__primary-text"
       }, {
         default: C(() => [
-          W(F(e.text), 1)
+          V(W(e.text), 1)
         ]),
         _: 1
       }, 8, ["stronger"]),
-      e.secondaryText ? (d(), $(l, {
+      e.secondaryText ? (c(), B(l, {
         key: 0,
         el: "span",
         variant: "body",
         class: "b-menu-item__secondary-text"
       }, {
         default: C(() => [
-          W(F(e.secondaryText), 1)
+          V(W(e.secondaryText), 1)
         ]),
         _: 1
       })) : R("", !0)
@@ -134,7 +134,7 @@ function Ce(e, t, b, i, r, a) {
     e.icon ? {
       name: "iconLeft",
       fn: C(() => [
-        (d(), $(se(e.icon), {
+        (c(), B(ie(e.icon), {
           class: "b-menu-item__icon-left",
           "aria-hidden": "true"
         }))
@@ -144,32 +144,48 @@ function Ce(e, t, b, i, r, a) {
     e.chevron ? {
       name: "iconRight",
       fn: C(() => [
-        S(s, { "aria-hidden": "true" })
+        L(i, { "aria-hidden": "true" })
       ]),
       key: "1"
     } : void 0
   ]), 1032, ["class", "disabled", "onClick"]);
 }
-const X = /* @__PURE__ */ E(ye, [["render", Ce], ["__scopeId", "data-v-9e8afd9c"]]);
-var h = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(h || {});
-const ge = O({
+const ee = /* @__PURE__ */ w(Ce, [["render", he], ["__scopeId", "data-v-9e8afd9c"]]);
+var g = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(g || {});
+const ge = Symbol("menu registering injection key"), Ie = {
   name: "bento-menu-list-container"
+}, ke = /* @__PURE__ */ T({
+  ...Ie,
+  setup(e) {
+    const t = d(), m = d({}), s = Z(
+      ge,
+      !1
+    );
+    if (s) {
+      const { registerMenuContainerElement: a } = s;
+      a(t), m.value = {
+        mouseleave: s == null ? void 0 : s.menuMouseLeave
+      };
+    }
+    return (a, r) => (c(), S("div", H({
+      ref_key: "menuListContainerRef",
+      ref: t,
+      class: "b-menu-list-container",
+      "data-testid": "menu-list-container"
+    }, le(m.value, !0)), [
+      O(a.$slots, "default", {}, void 0, !0)
+    ], 16));
+  }
 });
-const he = { class: "b-menu-list-container" };
-function Ie(e, t, b, i, r, a) {
-  return d(), L("div", he, [
-    N(e.$slots, "default", {}, void 0, !0)
-  ]);
-}
-const x = /* @__PURE__ */ E(ge, [["render", Ie], ["__scopeId", "data-v-ea0113ba"]]), ee = {
+const te = /* @__PURE__ */ w(ke, [["__scopeId", "data-v-02a3ca45"]]), ne = {
   "en-US": {
     menuButton: "Open menu",
     backButton: "Go back"
   }
-}, Be = O({
-  i18n: { messages: ee },
+}, Be = T({
+  i18n: { messages: ne },
   name: "sub-menu-item-list",
-  components: { BentoDivider: Q, MenuItem: X, MenuListContainer: x },
+  components: { BentoDivider: x, MenuItem: ee, MenuListContainer: te },
   props: {
     items: {
       type: Array,
@@ -180,22 +196,22 @@ const x = /* @__PURE__ */ E(ge, [["render", Ie], ["__scopeId", "data-v-ea0113ba"
       required: !0
     }
   },
-  emits: [h.CLOSE, h.BACK],
+  emits: [g.CLOSE, g.BACK],
   setup(e, { emit: t }) {
-    const b = m(null), i = m(0), r = m(e.items.length), a = () => t(h.CLOSE), l = () => t(h.BACK), s = M(() => {
+    const m = d(null), s = d(0), a = d(e.items.length), r = () => t(g.CLOSE), l = () => t(g.BACK), i = M(() => {
       var _;
-      const u = (_ = e.items) == null ? void 0 : _.map((p) => ({
-        ...p,
-        indent: !p.icon,
+      const u = (_ = e.items) == null ? void 0 : _.map((v) => ({
+        ...v,
+        indent: !v.icon,
         isTitle: !1,
-        clickHandler: a
+        clickHandler: r
       }));
       return [
         {
           text: e.title,
           secondaryText: null,
           critical: !1,
-          icon: A,
+          icon: j,
           isTitle: !0,
           disabled: !1,
           indent: !1,
@@ -205,58 +221,58 @@ const x = /* @__PURE__ */ E(ge, [["render", Ie], ["__scopeId", "data-v-ea0113ba"
         },
         ...u
       ];
-    }), f = async () => {
-      var u, _, p, I, B;
-      (B = (I = (p = (_ = (u = b.value) == null ? void 0 : u.children) == null ? void 0 : _[i.value]) == null ? void 0 : p.children) == null ? void 0 : I[0]) == null || B.focus();
+    }), p = async () => {
+      var u, _, v, I, k;
+      (k = (I = (v = (_ = (u = m.value) == null ? void 0 : u.children) == null ? void 0 : _[s.value]) == null ? void 0 : v.children) == null ? void 0 : I[0]) == null || k.focus();
     };
-    ie(async () => {
-      setTimeout(() => f(), 150);
+    ue(async () => {
+      setTimeout(() => p(), 150);
     });
     const o = () => {
-      i.value > 0 ? (i.value -= 1, s.value[i.value].disabled && o()) : i.value = r.value, f();
+      s.value > 0 ? (s.value -= 1, i.value[s.value].disabled && o()) : s.value = a.value, p();
     }, n = () => {
-      i.value < r.value ? (i.value += 1, s.value[i.value].disabled && n()) : i.value = 0, f();
+      s.value < a.value ? (s.value += 1, i.value[s.value].disabled && n()) : s.value = 0, p();
     };
     return {
       // Enums
-      BentoMenuEvent: h,
+      BentoMenuEvent: g,
       // Values
-      subMenuItemListRefLocal: b,
-      subMenuFocusedIndex: i,
-      ChevronLeftIcon: A,
-      computedItems: s,
+      subMenuItemListRefLocal: m,
+      subMenuFocusedIndex: s,
+      ChevronLeftIcon: j,
+      computedItems: i,
       // Methods
-      closeMenu: a,
+      closeMenu: r,
       onBackButton: l,
       focusPrevious: o,
       focusNext: n
     };
   }
 });
-function $e(e, t, b, i, r, a) {
-  const l = v("menu-item"), s = v("bento-divider"), f = v("menu-list-container");
-  return d(), $(le, {
+function Me(e, t, m, s, a, r) {
+  const l = b("menu-item"), i = b("bento-divider"), p = b("menu-list-container");
+  return c(), B(ae, {
     name: "b-sub-menu-item-list__transition",
     appear: ""
   }, {
     default: C(() => [
-      S(f, { class: "b-sub-menu-item-list" }, {
+      L(p, { class: "b-sub-menu-item-list" }, {
         default: C(() => [
-          T("ul", {
+          N("ul", {
             ref: "subMenuItemListRefLocal",
             role: "menu",
             class: "b-sub-menu-item-list__list",
             onKeydown: [
-              t[0] || (t[0] = g(D((...o) => e.focusNext && e.focusNext(...o), ["stop"]), ["down"])),
-              t[1] || (t[1] = g(D((...o) => e.focusPrevious && e.focusPrevious(...o), ["stop"]), ["up"])),
-              t[2] || (t[2] = g(D((...o) => e.onBackButton && e.onBackButton(...o), ["stop"]), ["esc"]))
+              t[0] || (t[0] = h(F((...o) => e.focusNext && e.focusNext(...o), ["stop"]), ["down"])),
+              t[1] || (t[1] = h(F((...o) => e.focusPrevious && e.focusPrevious(...o), ["stop"]), ["up"])),
+              t[2] || (t[2] = h(F((...o) => e.onBackButton && e.onBackButton(...o), ["stop"]), ["esc"]))
             ]
           }, [
-            (d(!0), L(z, null, J(e.computedItems, (o, n) => (d(), L("li", {
+            (c(!0), S(z, null, Q(e.computedItems, (o, n) => (c(), S("li", {
               key: `sub-menu-item-list-item-${n}`,
               role: "none"
             }, [
-              S(l, {
+              L(l, {
                 text: o.text,
                 handler: o.handler,
                 "secondary-text": o.secondaryText,
@@ -268,7 +284,7 @@ function $e(e, t, b, i, r, a) {
                 tabindex: n === e.subMenuFocusedIndex ? "0" : "-1",
                 onClick: o.clickHandler
               }, null, 8, ["text", "handler", "secondary-text", "icon", "is-title", "disabled", "critical", "indent", "tabindex", "onClick"]),
-              o.addDivider ? (d(), $(s, {
+              o.addDivider ? (c(), B(i, {
                 key: 0,
                 class: "b-sub-menu-item-list__divider"
               })) : R("", !0)
@@ -281,9 +297,9 @@ function $e(e, t, b, i, r, a) {
     _: 1
   });
 }
-const Me = /* @__PURE__ */ E(Be, [["render", $e], ["__scopeId", "data-v-621db243"]]), ke = O({
+const $e = /* @__PURE__ */ w(Be, [["render", Me], ["__scopeId", "data-v-621db243"]]), Le = T({
   name: "menu-item-list",
-  components: { BentoDivider: Q, MenuItem: X, MenuListContainer: x, SubMenuItemList: Me },
+  components: { BentoDivider: x, MenuItem: ee, MenuListContainer: te, SubMenuItemList: $e },
   props: {
     /**
      * The data to be displayed in the list
@@ -307,106 +323,106 @@ const Me = /* @__PURE__ */ E(Be, [["render", $e], ["__scopeId", "data-v-621db243
       default: !1
     }
   },
-  emits: [h.CLOSE],
+  emits: [g.CLOSE, "menu-item-click"],
   setup(e, { emit: t }) {
-    const b = m(null), i = m(null), r = m(null), a = m(!1), l = m(null), s = m(e.focusLastElement ? e.data.length - 1 : 0), f = m(0), o = m(e.data.length - 1), n = M(() => e.data.some((c) => c.icon)), u = M(() => e.indentItems || n.value ? e.data.map((c) => {
+    const m = d(null), s = d(null), a = d(null), r = d(!1), l = d(null), i = d(e.focusLastElement ? e.data.length - 1 : 0), p = d(0), o = d(e.data.length - 1), n = M(() => e.data.some((f) => f.icon)), u = M(() => e.indentItems || n.value ? e.data.map((f) => {
       let y = !1;
-      return c.icon || (y = !0), {
-        ...c,
+      return f.icon || (y = !0), {
+        ...f,
         // eslint-disable-next-line no-param-reassign
         indent: y
       };
     }) : e.data), _ = () => {
-      var c, y, k;
-      return (k = (y = (c = b.value) == null ? void 0 : c.children[s.value]) == null ? void 0 : y.children[0]) == null ? void 0 : k.focus();
-    }, p = () => t(h.CLOSE), I = async (c, y) => {
-      c.items ? (l.value = y, a.value = !0) : (l.value = y, a.value = !1, p());
-    }, B = () => {
-      s.value > 0 ? (s.value -= 1, u.value[s.value].disabled && B()) : s.value = o.value, _();
-    }, w = () => {
-      s.value < o.value ? (s.value += 1, u.value[s.value].disabled && w()) : s.value = 0, _();
-    }, P = (c, y) => {
-      var k;
-      (k = c == null ? void 0 : c.items) != null && k.length && (l.value = y, a.value = !0);
+      var f, y, $;
+      return ($ = (y = (f = m.value) == null ? void 0 : f.children[i.value]) == null ? void 0 : y.children[0]) == null ? void 0 : $.focus();
+    }, v = () => t(g.CLOSE), I = (f, y) => {
+      f.items ? (l.value = y, r.value = !0) : (l.value = y, r.value = !1, v(), t("menu-item-click"));
+    }, k = () => {
+      i.value > 0 ? (i.value -= 1, u.value[i.value].disabled && k()) : i.value = o.value, _();
+    }, E = () => {
+      i.value < o.value ? (i.value += 1, u.value[i.value].disabled && E()) : i.value = 0, _();
+    }, P = (f, y) => {
+      var $;
+      ($ = f == null ? void 0 : f.items) != null && $.length && (l.value = y, r.value = !0);
     }, K = () => {
-      l.value && a.value && (l.value = null, a.value = !1);
-    }, te = () => {
-      a.value = !1, l.value = null, _();
-    }, ne = M(() => {
-      var c, y, k;
-      return (k = (y = (c = r.value) == null ? void 0 : c[0]) == null ? void 0 : y.$el) == null ? void 0 : k.offsetHeight;
-    }), oe = M(() => a.value ? `${ne.value}px` : "");
+      l.value && r.value && (l.value = null, r.value = !1);
+    }, D = () => {
+      r.value = !1, l.value = null, _();
+    }, oe = M(() => {
+      var f, y, $;
+      return ($ = (y = (f = a.value) == null ? void 0 : f[0]) == null ? void 0 : y.$el) == null ? void 0 : $.offsetHeight;
+    }), se = M(() => r.value ? `${oe.value}px` : "");
     return {
       // Values
-      menuItemListRef: b,
-      menuItemListWrapperRef: i,
-      subMenuItemListRef: r,
+      menuItemListRef: m,
+      menuItemListWrapperRef: s,
+      subMenuItemListRef: a,
       computedData: u,
-      computedHeight: oe,
-      focusedIndex: s,
-      subMenuFocusedIndex: f,
-      showSubMenu: a,
+      computedHeight: se,
+      focusedIndex: i,
+      subMenuFocusedIndex: p,
+      showSubMenu: r,
       visibleSubMenuIndex: l,
       // Methods
-      toggleMenu: I,
-      closeMenu: p,
-      focusPrevious: B,
-      focusNext: w,
+      menuItemClick: I,
+      closeMenu: v,
+      focusPrevious: k,
+      focusNext: E,
       focusRight: P,
       focusLeft: K,
-      onBackButton: te
+      onBackButton: D
     };
   }
 });
 const Se = ["onKeydown"];
-function Le(e, t, b, i, r, a) {
-  const l = v("menu-item"), s = v("bento-divider"), f = v("sub-menu-item-list"), o = v("menu-list-container");
-  return d(), $(o, {
+function Ee(e, t, m, s, a, r) {
+  const l = b("menu-item"), i = b("bento-divider"), p = b("sub-menu-item-list"), o = b("menu-list-container");
+  return c(), B(o, {
     ref: "menuItemListWrapperRef",
-    style: Y({ height: e.computedHeight })
+    style: X({ height: e.computedHeight })
   }, {
     default: C(() => [
-      T("ul", {
+      N("ul", {
         ref: "menuItemListRef",
         class: "b-menu-item-list",
         role: "menu",
         onKeydown: [
-          t[1] || (t[1] = g((...n) => e.focusNext && e.focusNext(...n), ["down"])),
-          t[2] || (t[2] = g((...n) => e.focusPrevious && e.focusPrevious(...n), ["up"])),
-          t[3] || (t[3] = g((...n) => e.closeMenu && e.closeMenu(...n), ["esc"])),
-          t[4] || (t[4] = g((...n) => e.closeMenu && e.closeMenu(...n), ["tab"]))
+          t[1] || (t[1] = h((...n) => e.focusNext && e.focusNext(...n), ["down"])),
+          t[2] || (t[2] = h((...n) => e.focusPrevious && e.focusPrevious(...n), ["up"])),
+          t[3] || (t[3] = h((...n) => e.closeMenu && e.closeMenu(...n), ["esc"])),
+          t[4] || (t[4] = h((...n) => e.closeMenu && e.closeMenu(...n), ["tab"]))
         ]
       }, [
-        (d(!0), L(z, null, J(e.computedData, (n, u) => {
-          var _, p, I, B;
-          return d(), L("li", {
+        (c(!0), S(z, null, Q(e.computedData, (n, u) => {
+          var _, v, I, k;
+          return c(), S("li", {
             key: `menu-item-${u}`,
             class: "b-menu-item-list__item",
             role: "none",
             onKeydown: [
-              g((w) => e.focusRight(n, u), ["right"]),
-              t[0] || (t[0] = g((w) => e.focusLeft(), ["left"]))
+              h((E) => e.focusRight(n, u), ["right"]),
+              t[0] || (t[0] = h((E) => e.focusLeft(), ["left"]))
             ]
           }, [
-            S(l, {
+            L(l, {
               text: n.text,
               handler: (_ = n.items) != null && _.length ? () => null : n.handler,
               "secondary-text": n.secondaryText,
               icon: n.icon,
-              chevron: !!((p = n.items) != null && p.length),
+              chevron: !!((v = n.items) != null && v.length),
               disabled: n.disabled,
               critical: n.critical,
               indent: n.indent,
               tabindex: u === e.subMenuFocusedIndex ? "0" : "-1",
               "aria-haspopup": !!((I = n.items) != null && I.length),
               "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === u,
-              onClick: (w) => e.toggleMenu(n, u)
+              onClick: (E) => e.menuItemClick(n, u)
             }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
-            n.addDivider ? (d(), $(s, {
+            n.addDivider ? (c(), B(i, {
               key: 0,
               class: "b-menu-item-list__divider"
             })) : R("", !0),
-            (B = n.items) != null && B.length && e.showSubMenu && e.visibleSubMenuIndex === u ? (d(), $(f, {
+            (k = n.items) != null && k.length && e.showSubMenu && e.visibleSubMenuIndex === u ? (c(), B(p, {
               key: 1,
               ref_for: !0,
               ref: "subMenuItemListRef",
@@ -422,40 +438,40 @@ function Le(e, t, b, i, r, a) {
     _: 1
   }, 8, ["style"]);
 }
-const we = /* @__PURE__ */ E(ke, [["render", Le], ["__scopeId", "data-v-f1d94ee8"]]), Re = Symbol("menu inverse style injection key");
-let U = 0;
-const Ee = {
+const Re = /* @__PURE__ */ w(Le, [["render", Ee], ["__scopeId", "data-v-b2223c5d"]]), we = Symbol("menu inverse style injection key");
+let G = 0;
+const Te = {
   beforeCreate() {
-    this.uuid = U.toString(), U += 1;
+    this.uuid = G.toString(), G += 1;
   }
-}, Oe = { key: 0 }, Te = /* @__PURE__ */ T("path", {
+}, Ne = { key: 0 }, Oe = /* @__PURE__ */ N("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), Ne = /* @__PURE__ */ T("path", {
+}, null, -1), Pe = /* @__PURE__ */ N("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), Pe = /* @__PURE__ */ T("path", {
+}, null, -1), Ke = /* @__PURE__ */ N("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);
-function Ke(e, t, b, i, r, a) {
-  return d(), L("svg", G({ role: "img" }, e.$attrs, {
+function De(e, t, m, s, a, r) {
+  return c(), S("svg", H({ 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"] ? (d(), L("title", Oe, F(e.$attrs["svg-title"]), 1)) : R("", !0),
-    Te,
-    Ne,
-    Pe
+    e.$attrs["svg-title"] ? (c(), S("title", Ne, W(e.$attrs["svg-title"]), 1)) : R("", !0),
+    Oe,
+    Pe,
+    Ke
   ], 16);
 }
-const De = /* @__PURE__ */ E(Ee, [["render", Ke]]), Fe = O({
-  i18n: { messages: ee },
+const Fe = /* @__PURE__ */ w(Te, [["render", De]]), We = T({
+  i18n: { messages: ne },
   name: "bento-menu",
-  components: { BentoToggleButton: fe, BentoPopover: re, BentoTeleport: pe, MenuItemList: we, OptionsVerticalIcon: De },
+  components: { BentoToggleButton: pe, BentoPopover: de, BentoTeleport: ve, MenuItemList: Re, OptionsVerticalIcon: Fe },
   props: {
     /**
      * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.
@@ -478,8 +494,8 @@ const De = /* @__PURE__ */ E(Ee, [["render", Ke]]), Fe = O({
      */
     menuPosition: {
       type: String,
-      default: H.BOTTOM_START,
-      validator: (e) => Object.values(H).includes(e)
+      default: U.BOTTOM_START,
+      validator: (e) => Object.values(U).includes(e)
     },
     /**
      * Instructs the menu popover to be visible outside of the containing container.
@@ -505,10 +521,10 @@ const De = /* @__PURE__ */ E(Ee, [["render", Ke]]), Fe = O({
       default: !1
     }
   },
-  emits: [h.CLOSE, h.OPEN],
-  setup(e, { emit: t, slots: b }) {
-    const i = m(null), r = m(!1), a = m(!1), l = m(null), s = V("menu"), f = V("menu-popover"), o = ue(Re, m(!1));
-    ae(de, o);
+  emits: [g.CLOSE, g.OPEN, "menu-item-click"],
+  setup(e, { emit: t, slots: m }) {
+    const s = d(null), a = d(!1), r = d(!1), l = d(null), i = A("menu"), p = A("menu-popover"), o = Z(we, d(!1));
+    re(ce, o);
     const n = M(() => ({
       "b-menu--inverse": o.value
     })), u = M(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), _ = M(() => {
@@ -517,51 +533,54 @@ const De = /* @__PURE__ */ E(Ee, [["render", Ke]]), Fe = O({
           variant: "secondary",
           ...e.button
         };
-    }), p = () => {
-      r.value = !0, t(h.OPEN);
+    }), v = () => {
+      a.value = !0, t(g.OPEN);
     }, I = () => {
-      r.value && (r.value = !1, i.value.$el.focus(), t(h.CLOSE));
-    }, B = (K) => {
-      K.stopPropagation(), r.value ? I() : p();
-    }, w = () => {
-      a.value = !1, p();
+      a.value && (a.value = !1, s.value.$el.focus(), t(g.CLOSE));
+    }, k = (D) => {
+      D.stopPropagation(), a.value ? I() : v();
+    }, E = () => {
+      r.value = !1, v();
     }, P = () => {
-      a.value = !0, p();
+      r.value = !0, v();
+    }, K = () => {
+      t("menu-item-click");
     };
-    return ce(l, I, { ignore: [i] }), {
+    return me(l, I, { ignore: [s] }), {
       // Refs
       popoverRef: l,
-      menuButtonRef: i,
+      menuButtonRef: s,
       // Values
-      menuId: s,
-      popoverId: f,
-      showMenu: r,
+      menuId: i,
+      popoverId: p,
+      showMenu: a,
       computedButtonPropsWithDefaults: _,
       computedMenuWidth: u,
-      isLastElementFocused: a,
+      isLastElementFocused: r,
       // Classes
       computedClasses: n,
       isInverseColorSet: o,
       // Methods
-      hasSlot: me(b),
-      onKeyDown: w,
+      hasSlot: fe(m),
+      onKeyDown: E,
       onKeyUp: P,
       closeMenu: I,
-      toggleShowMenu: B
+      menuItemClick: K,
+      toggleShowMenu: k
     };
   }
 });
-function We(e, t, b, i, r, a) {
-  const l = v("options-vertical-icon"), s = v("bento-toggle-button"), f = v("menu-item-list"), o = v("bento-popover"), n = v("bento-teleport");
-  return d(), L("div", {
-    class: j([e.computedClasses, "b-menu"]),
+function He(e, t, m, s, a, r) {
+  const l = b("options-vertical-icon"), i = b("bento-toggle-button"), p = b("menu-item-list"), o = b("bento-popover"), n = b("bento-teleport");
+  return c(), S("div", {
+    class: J([e.computedClasses, "b-menu"]),
     onKeydown: [
-      t[0] || (t[0] = g((...u) => e.onKeyDown && e.onKeyDown(...u), ["down"])),
-      t[1] || (t[1] = g((...u) => e.onKeyUp && e.onKeyUp(...u), ["up"])),
-      t[2] || (t[2] = g((...u) => e.closeMenu && e.closeMenu(...u), ["esc"]))
+      t[0] || (t[0] = h((...u) => e.onKeyDown && e.onKeyDown(...u), ["down"])),
+      t[1] || (t[1] = h((...u) => e.onKeyUp && e.onKeyUp(...u), ["up"])),
+      t[2] || (t[2] = h((...u) => e.closeMenu && e.closeMenu(...u), ["esc"]))
     ]
   }, [
-    S(s, G({
+    L(i, H({
       ref: "menuButtonRef",
       "aria-haspopup": "true"
     }, e.computedButtonPropsWithDefaults, {
@@ -569,12 +588,12 @@ function We(e, t, b, i, r, a) {
       toggled: e.showMenu,
       inverse: e.isInverseColorSet,
       onClick: e.toggleShowMenu
-    }), Z({ _: 2 }, [
+    }), Y({ _: 2 }, [
       !e.hasSlot("default") || e.hasSlot("iconLeft") ? {
         name: "iconLeft",
         fn: C(() => [
-          N(e.$slots, "iconLeft", {}, () => [
-            S(l, {
+          O(e.$slots, "iconLeft", {}, () => [
+            L(l, {
               title: e.$t("menuButton")
             }, null, 8, ["title"])
           ], !0)
@@ -584,30 +603,30 @@ function We(e, t, b, i, r, a) {
       e.hasSlot("default") ? {
         name: "default",
         fn: C(() => [
-          N(e.$slots, "default", {}, void 0, !0)
+          O(e.$slots, "default", {}, void 0, !0)
         ]),
         key: "1"
       } : void 0,
       e.hasSlot("iconRight") ? {
         name: "iconRight",
         fn: C(() => [
-          N(e.$slots, "iconRight", {}, void 0, !0)
+          O(e.$slots, "iconRight", {}, void 0, !0)
         ]),
         key: "2"
       } : void 0
     ]), 1040, ["aria-controls", "toggled", "inverse", "onClick"]),
-    e.menuButtonRef ? (d(), $(n, {
+    e.menuButtonRef ? (c(), B(n, {
       key: 0,
       disabled: !e.teleport
     }, {
       default: C(() => [
-        e.menuButtonRef ? (d(), $(o, {
+        e.menuButtonRef ? (c(), B(o, {
           key: 0,
           id: e.menuId,
           ref: "popoverRef",
           open: e.showMenu,
           class: "b-menu__popover",
-          style: Y(e.computedMenuWidth),
+          style: X(e.computedMenuWidth),
           "target-element": e.menuButtonRef,
           position: e.menuPosition,
           "fixed-positioning": e.menuFixedPositioning,
@@ -625,11 +644,12 @@ function We(e, t, b, i, r, a) {
           "without-space": ""
         }, {
           default: C(() => [
-            S(f, {
+            L(p, {
               data: e.data,
               "focus-last-element": e.isLastElementFocused,
-              onClose: e.closeMenu
-            }, null, 8, ["data", "focus-last-element", "onClose"])
+              onClose: e.closeMenu,
+              onMenuItemClick: e.menuItemClick
+            }, null, 8, ["data", "focus-last-element", "onClose", "onMenuItemClick"])
           ]),
           _: 1
         }, 8, ["id", "open", "style", "target-element", "position", "fixed-positioning", "teleport"])) : R("", !0)
@@ -638,11 +658,12 @@ function We(e, t, b, i, r, a) {
     }, 8, ["disabled"])) : R("", !0)
   ], 34);
 }
-const Xe = /* @__PURE__ */ E(Fe, [["render", We], ["__scopeId", "data-v-42faec3b"]]);
+const xe = /* @__PURE__ */ w(We, [["render", He], ["__scopeId", "data-v-13bb0b39"]]);
 export {
-  Xe as B,
-  Re as M,
-  De as O,
-  h as a
+  xe as B,
+  ge as D,
+  we as M,
+  Fe as O,
+  g as a
 };
-//# sourceMappingURL=index.1b1646bf.js.map
+//# sourceMappingURL=index.030c1dd7.js.map