@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/menu.js

@@ -1,50 +1,50 @@
-import { openBlock as m, createElementBlock as k, mergeProps as W, toDisplayString as N, createCommentVNode as P, pushScopeId as le, popScopeId as ue, createElementVNode as T, defineComponent as O, computed as M, resolveComponent as C, createBlock as S, normalizeClass as j, createSlots as ie, withCtx as g, createVNode as I, createTextVNode as A, resolveDynamicComponent as ae, renderSlot as Y, ref as f, onMounted as re, Transition as ce, withKeys as y, withModifiers as E, Fragment as Z, renderList as z, normalizeStyle as G, resolveDirective as de, withDirectives as me } from "vue";
-import { _ as L } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { openBlock as m, createElementBlock as k, mergeProps as V, toDisplayString as E, createCommentVNode as P, pushScopeId as se, popScopeId as le, createElementVNode as O, defineComponent as K, computed as B, resolveComponent as h, createBlock as L, normalizeClass as W, createSlots as ue, withCtx as g, createVNode as I, createTextVNode as D, resolveDynamicComponent as ie, renderSlot as j, ref as f, onMounted as ae, Transition as re, withKeys as y, withModifiers as T, Fragment as Z, renderList as z, normalizeStyle as G, resolveDirective as de, withDirectives as ce } from "vue";
+import { _ as S } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import { g as F } from "./chunks/unique-id.a2a2b458.js";
-import { B as pe } from "./chunks/directive.0408e565.js";
-import { B as fe, a as V } from "./chunks/button.e1c39f66.js";
-import { BentoPopover as ve, BentoPopoverPositions as K } from "./popover.js";
-import { a as _e, C as H } from "./chunks/chevron-right.aef416c6.js";
-import { B as be, a as q } from "./chunks/base-button.20be08da.js";
-import { B as ye, a as he, b as Ce } from "./chunks/index.222d29b0.js";
-import "./assets/index20.css";
+import { B as me } from "./chunks/directive.0408e565.js";
+import { a as pe } from "./chunks/button.a8462029.js";
+import { BentoPopover as fe, BentoPopoverPositions as H } from "./popover.js";
+import { a as ve, C as A } from "./chunks/chevron-right.aef416c6.js";
+import { B as _e, a as q } from "./chunks/base-button.6d2843c2.js";
+import { B as be } from "./chunks/index.89b00b94.js";
+import "./assets/index19.css";
 let U = 0;
-const ge = {
+const ye = {
   beforeCreate() {
     this.uuid = U.toString(), U += 1;
   }
-}, D = (e) => (le("data-v-c663a42e"), e = e(), ue(), e), Be = { key: 0 }, $e = /* @__PURE__ */ D(() => /* @__PURE__ */ T("path", {
+}, N = (e) => (se("data-v-c663a42e"), e = e(), le(), e), Ce = { key: 0 }, he = /* @__PURE__ */ N(() => /* @__PURE__ */ O("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   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.00166 0.970945 7.70006 1.00065 7.42597 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.65804 3.27936 6.93934 3.56066C7.22064 3.84197 7.60218 4 8 4Z",
   "clip-rule": "evenodd"
-}, null, -1)), Me = /* @__PURE__ */ D(() => /* @__PURE__ */ T("path", {
+}, null, -1)), ge = /* @__PURE__ */ N(() => /* @__PURE__ */ O("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   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.00166 11.9709 7.70006 12.0007 7.42597 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.65804 14.2794 6.93934 14.5607C7.22064 14.842 7.60218 15 8 15Z",
   "clip-rule": "evenodd"
-}, null, -1)), Ie = /* @__PURE__ */ D(() => /* @__PURE__ */ T("path", {
+}, null, -1)), $e = /* @__PURE__ */ N(() => /* @__PURE__ */ O("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   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.65804 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.42597 6.61418C7.70006 6.50065 8.00166 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",
   "clip-rule": "evenodd"
 }, null, -1));
-function ke(e, t, d, s, i, a) {
-  return m(), k("svg", W({ role: "img" }, e.$attrs, {
+function Me(e, t, c, s, i, a) {
+  return m(), k("svg", V({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (m(), k("title", Be, N(e.$attrs["svg-title"]), 1)) : P("", !0),
-    $e,
-    Me,
-    Ie
+    e.$attrs["svg-title"] ? (m(), k("title", Ce, E(e.$attrs["svg-title"]), 1)) : P("", !0),
+    he,
+    ge,
+    $e
   ], 16);
 }
-const we = /* @__PURE__ */ L(ge, [["render", ke], ["__scopeId", "data-v-c663a42e"]]), Se = O({
+const Be = /* @__PURE__ */ S(ye, [["render", Me], ["__scopeId", "data-v-c663a42e"]]), Ie = K({
   name: "menu-item",
-  components: { BaseButton: be, BentoTypography: ye, ChevronRightIcon: _e },
+  components: { BaseButton: _e, BentoTypography: be, ChevronRightIcon: ve },
   props: {
     /**
      * menu-item text that gets displayed as the main label
@@ -112,16 +112,12 @@ const we = /* @__PURE__ */ L(ge, [["render", ke], ["__scopeId", "data-v-c663a42e
   },
   emits: [q.CLICK],
   setup(e, { emit: t }) {
-    const d = M(() => ({
-      "b-menu-item--critical": e.critical,
-      "b-menu-item--indent": e.indent
-    }));
     return {
-      // Enums
-      BentoTypographyElement: he,
-      BentoTypographyVariant: Ce,
       // Values
-      conditionalClasses: d,
+      conditionalClasses: B(() => ({
+        "b-menu-item--critical": e.critical,
+        "b-menu-item--indent": e.indent
+      })),
       // Methods
       onClick: (i) => {
         i.stopPropagation(), e.handler(), t(q.CLICK);
@@ -129,45 +125,45 @@ const we = /* @__PURE__ */ L(ge, [["render", ke], ["__scopeId", "data-v-c663a42e
     };
   }
 });
-function Le(e, t, d, s, i, a) {
-  const u = C("bento-typography"), l = C("chevron-right-icon"), o = C("base-button");
-  return m(), S(o, {
-    class: j(["b-menu-item", e.conditionalClasses]),
+function ke(e, t, c, s, i, a) {
+  const u = h("bento-typography"), l = h("chevron-right-icon"), o = h("base-button");
+  return m(), L(o, {
+    class: W(["b-menu-item", e.conditionalClasses]),
     role: "menuitem",
     disabled: e.disabled,
     tabindex: "-1",
     onClick: e.onClick
-  }, ie({
+  }, ue({
     default: g(() => [
       I(u, {
-        el: e.BentoTypographyElement.SPAN,
-        variant: e.BentoTypographyVariant.BODY,
+        el: "span",
+        variant: "body",
         stronger: e.isTitle,
         class: "b-menu-item__primary-text"
       }, {
         default: g(() => [
-          A(N(e.text), 1)
+          D(E(e.text), 1)
         ]),
         _: 1
-      }, 8, ["el", "variant", "stronger"]),
-      e.secondaryText ? (m(), S(u, {
+      }, 8, ["stronger"]),
+      e.secondaryText ? (m(), L(u, {
         key: 0,
-        el: e.BentoTypographyElement.SPAN,
-        variant: e.BentoTypographyVariant.BODY,
+        el: "span",
+        variant: "body",
         class: "b-menu-item__secondary-text"
       }, {
         default: g(() => [
-          A(N(e.secondaryText), 1)
+          D(E(e.secondaryText), 1)
         ]),
         _: 1
-      }, 8, ["el", "variant"])) : P("", !0)
+      })) : P("", !0)
     ]),
     _: 2
   }, [
     e.icon ? {
       name: "iconLeft",
       fn: g(() => [
-        (m(), S(ae(e.icon), {
+        (m(), L(ie(e.icon), {
           class: "b-menu-item__icon-left",
           "aria-hidden": "true"
         }))
@@ -183,23 +179,23 @@ function Le(e, t, d, s, i, a) {
     } : void 0
   ]), 1032, ["class", "disabled", "onClick"]);
 }
-const J = /* @__PURE__ */ L(Se, [["render", Le], ["__scopeId", "data-v-51ecff68"]]);
-var h = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(h || {});
-const Te = O({
+const J = /* @__PURE__ */ S(Ie, [["render", ke], ["__scopeId", "data-v-4fbf6230"]]);
+var C = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(C || {});
+const we = K({
   name: "bento-menu-list-container"
 });
-const Oe = { class: "b-menu-list-container" };
-function Pe(e, t, d, s, i, a) {
-  return m(), k("div", Oe, [
-    Y(e.$slots, "default", {}, void 0, !0)
+const Le = { class: "b-menu-list-container" };
+function Se(e, t, c, s, i, a) {
+  return m(), k("div", Le, [
+    j(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const Q = /* @__PURE__ */ L(Te, [["render", Pe], ["__scopeId", "data-v-ea0113ba"]]), X = {
+const Q = /* @__PURE__ */ S(we, [["render", Se], ["__scopeId", "data-v-ea0113ba"]]), X = {
   "en-US": {
     menuButton: "Open menu",
     backButton: "Go back"
   }
-}, Ee = O({
+}, Oe = K({
   i18n: { messages: X },
   name: "sub-menu-item-list",
   components: { MenuItem: J, MenuListContainer: Q },
@@ -213,11 +209,11 @@ const Q = /* @__PURE__ */ L(Te, [["render", Pe], ["__scopeId", "data-v-ea0113ba"
       required: !0
     }
   },
-  emits: [h.CLOSE, h.BACK],
+  emits: [C.CLOSE, C.BACK],
   setup(e, { emit: t }) {
-    const d = f(null), s = f(0), i = f(e.items.length), a = () => t(h.CLOSE), u = () => t(h.BACK), l = M(() => {
+    const c = f(null), s = f(0), i = f(e.items.length), a = () => t(C.CLOSE), u = () => t(C.BACK), l = B(() => {
       var v;
-      const c = (v = e.items) == null ? void 0 : v.map((_) => ({
+      const d = (v = e.items) == null ? void 0 : v.map((_) => ({
         ..._,
         indent: !_.icon,
         isTitle: !1,
@@ -228,20 +224,20 @@ const Q = /* @__PURE__ */ L(Te, [["render", Pe], ["__scopeId", "data-v-ea0113ba"
           text: e.title,
           secondaryText: null,
           critical: !1,
-          icon: H,
+          icon: A,
           isTitle: !0,
           disabled: !1,
           indent: !1,
           handler: u,
           clickHandler: u
         },
-        ...c
+        ...d
       ];
     }), o = async () => {
-      var c, v, _, w, B;
-      (B = (w = (_ = (v = (c = d.value) == null ? void 0 : c.children) == null ? void 0 : v[s.value]) == null ? void 0 : _.children) == null ? void 0 : w[0]) == null || B.focus();
+      var d, v, _, w, $;
+      ($ = (w = (_ = (v = (d = c.value) == null ? void 0 : d.children) == null ? void 0 : v[s.value]) == null ? void 0 : _.children) == null ? void 0 : w[0]) == null || $.focus();
     };
-    re(async () => {
+    ae(async () => {
       setTimeout(() => o(), 150);
     });
     const n = () => {
@@ -251,11 +247,11 @@ const Q = /* @__PURE__ */ L(Te, [["render", Pe], ["__scopeId", "data-v-ea0113ba"
     };
     return {
       // Enums
-      BentoMenuEvent: h,
+      BentoMenuEvent: C,
       // Values
-      subMenuItemListRefLocal: d,
+      subMenuItemListRefLocal: c,
       subMenuFocusedIndex: s,
-      ChevronLeftIcon: H,
+      ChevronLeftIcon: A,
       computedItems: l,
       // Methods
       closeMenu: a,
@@ -265,28 +261,28 @@ const Q = /* @__PURE__ */ L(Te, [["render", Pe], ["__scopeId", "data-v-ea0113ba"
     };
   }
 });
-function Ke(e, t, d, s, i, a) {
-  const u = C("menu-item"), l = C("menu-list-container");
-  return m(), S(ce, {
+function Ke(e, t, c, s, i, a) {
+  const u = h("menu-item"), l = h("menu-list-container");
+  return m(), L(re, {
     name: "b-sub-menu-item-list__transition",
     appear: ""
   }, {
     default: g(() => [
       I(l, { class: "b-sub-menu-item-list" }, {
         default: g(() => [
-          T("ul", {
+          O("ul", {
             ref: "subMenuItemListRefLocal",
             role: "menu",
             class: "b-sub-menu-item-list__list",
             onKeydown: [
-              t[0] || (t[0] = y(E((...o) => e.focusNext && e.focusNext(...o), ["stop"]), ["down"])),
-              t[1] || (t[1] = y(E((...o) => e.focusPrevious && e.focusPrevious(...o), ["stop"]), ["up"])),
-              t[2] || (t[2] = y(E((...o) => e.onBackButton && e.onBackButton(...o), ["stop"]), ["esc"]))
+              t[0] || (t[0] = y(T((...o) => e.focusNext && e.focusNext(...o), ["stop"]), ["down"])),
+              t[1] || (t[1] = y(T((...o) => e.focusPrevious && e.focusPrevious(...o), ["stop"]), ["up"])),
+              t[2] || (t[2] = y(T((...o) => e.onBackButton && e.onBackButton(...o), ["stop"]), ["esc"]))
             ]
           }, [
             (m(!0), k(Z, null, z(e.computedItems, (o, n) => (m(), k("li", {
               key: `sub-menu-item-list-item-${n}`,
-              class: j([
+              class: W([
                 { "b-sub-menu-item-list__back-button": n === 0 },
                 { "b-sub-menu-item-list__first-item": n == 1 }
               ]),
@@ -313,9 +309,9 @@ function Ke(e, t, d, s, i, a) {
     _: 1
   });
 }
-const Ne = /* @__PURE__ */ L(Ee, [["render", Ke], ["__scopeId", "data-v-67456329"]]), De = O({
+const Pe = /* @__PURE__ */ S(Oe, [["render", Ke], ["__scopeId", "data-v-67456329"]]), Te = K({
   name: "menu-item-list",
-  components: { MenuItem: J, MenuListContainer: Q, SubMenuItemList: Ne },
+  components: { MenuItem: J, MenuListContainer: Q, SubMenuItemList: Pe },
   props: {
     /**
      * The data to be displayed in the list
@@ -339,9 +335,9 @@ const Ne = /* @__PURE__ */ L(Ee, [["render", Ke], ["__scopeId", "data-v-67456329
       default: !1
     }
   },
-  emits: [h.CLOSE],
+  emits: [C.CLOSE],
   setup(e, { emit: t }) {
-    const d = f(null), s = f(null), i = f(null), a = f(!1), u = f(null), l = f(e.focusLastElement ? e.data.length - 1 : 0), o = f(0), n = f(e.data.length - 1), p = M(() => e.data.some((r) => r.icon)), c = M(() => e.indentItems || p.value ? e.data.map((r) => {
+    const c = f(null), s = f(null), i = f(null), a = f(!1), u = f(null), l = f(e.focusLastElement ? e.data.length - 1 : 0), o = f(0), n = f(e.data.length - 1), p = B(() => e.data.some((r) => r.icon)), d = B(() => e.indentItems || p.value ? e.data.map((r) => {
       let b = !1;
       return r.icon || (b = !0), {
         ...r,
@@ -349,35 +345,35 @@ const Ne = /* @__PURE__ */ L(Ee, [["render", Ke], ["__scopeId", "data-v-67456329
         indent: b
       };
     }) : e.data), v = () => {
-      var r, b, $;
-      return ($ = (b = (r = d.value) == null ? void 0 : r.children[l.value]) == null ? void 0 : b.children[0]) == null ? void 0 : $.focus();
-    }, _ = () => t(h.CLOSE), w = async (r, b) => {
+      var r, b, M;
+      return (M = (b = (r = c.value) == null ? void 0 : r.children[l.value]) == null ? void 0 : b.children[0]) == null ? void 0 : M.focus();
+    }, _ = () => t(C.CLOSE), w = async (r, b) => {
       r.items ? (u.value = b, a.value = !0) : (u.value = b, a.value = !1, _());
-    }, B = () => {
-      l.value > 0 ? (l.value -= 1, c.value[l.value].disabled && B()) : l.value = n.value, v();
+    }, $ = () => {
+      l.value > 0 ? (l.value -= 1, d.value[l.value].disabled && $()) : l.value = n.value, v();
     }, R = () => {
-      l.value < n.value ? (l.value += 1, c.value[l.value].disabled && R()) : l.value = 0, v();
-    }, x = (r, b) => {
-      var $;
-      ($ = r == null ? void 0 : r.items) != null && $.length && (u.value = b, a.value = !0);
-    }, ee = () => {
+      l.value < n.value ? (l.value += 1, d.value[l.value].disabled && R()) : l.value = 0, v();
+    }, Y = (r, b) => {
+      var M;
+      (M = r == null ? void 0 : r.items) != null && M.length && (u.value = b, a.value = !0);
+    }, x = () => {
       u.value && a.value && (u.value = null, a.value = !1);
-    }, ne = () => {
+    }, ee = () => {
       a.value = !1, u.value = null, v();
-    }, te = M(() => {
+    }, ne = B(() => {
       var r;
       return (r = s == null ? void 0 : s.value) == null ? void 0 : r.$el.offsetHeight;
-    }), oe = M(() => {
-      var r, b, $;
-      return ($ = (b = (r = i == null ? void 0 : i.value) == null ? void 0 : r[0]) == null ? void 0 : b.$el) == null ? void 0 : $.offsetHeight;
-    }), se = M(() => a.value ? `${oe.value}px` : `${te.value}px`);
+    }), te = B(() => {
+      var r, b, M;
+      return (M = (b = (r = i == null ? void 0 : i.value) == null ? void 0 : r[0]) == null ? void 0 : b.$el) == null ? void 0 : M.offsetHeight;
+    }), oe = B(() => a.value ? `${te.value}px` : `${ne.value}px`);
     return {
       // Values
-      menuItemListRef: d,
+      menuItemListRef: c,
       menuItemListWrapperRef: s,
       subMenuItemListRef: i,
-      computedData: c,
-      computedHeight: se,
+      computedData: d,
+      computedHeight: oe,
       focusedIndex: l,
       subMenuFocusedIndex: o,
       showSubMenu: a,
@@ -385,23 +381,23 @@ const Ne = /* @__PURE__ */ L(Ee, [["render", Ke], ["__scopeId", "data-v-67456329
       // Methods
       toggleMenu: w,
       closeMenu: _,
-      focusPrevious: B,
+      focusPrevious: $,
       focusNext: R,
-      focusRight: x,
-      focusLeft: ee,
-      onBackButton: ne
+      focusRight: Y,
+      focusLeft: x,
+      onBackButton: ee
     };
   }
 });
-const Re = ["onKeydown"];
-function Ae(e, t, d, s, i, a) {
-  const u = C("menu-item"), l = C("sub-menu-item-list"), o = C("menu-list-container");
-  return m(), S(o, {
+const Ee = ["onKeydown"];
+function Ne(e, t, c, s, i, a) {
+  const u = h("menu-item"), l = h("sub-menu-item-list"), o = h("menu-list-container");
+  return m(), L(o, {
     ref: "menuItemListWrapperRef",
     style: G({ height: e.computedHeight })
   }, {
     default: g(() => [
-      T("ul", {
+      O("ul", {
         ref: "menuItemListRef",
         class: "b-menu-item-list",
         role: "menu",
@@ -413,19 +409,19 @@ function Ae(e, t, d, s, i, a) {
         ]
       }, [
         (m(!0), k(Z, null, z(e.computedData, (n, p) => {
-          var c, v, _, w;
+          var d, v, _, w;
           return m(), k("li", {
             key: `menu-item-${p}`,
             class: "b-menu-item-list__item",
             role: "none",
             onKeydown: [
-              y((B) => e.focusRight(n, p), ["right"]),
-              t[0] || (t[0] = y((B) => e.focusLeft(), ["left"]))
+              y(($) => e.focusRight(n, p), ["right"]),
+              t[0] || (t[0] = y(($) => e.focusLeft(), ["left"]))
             ]
           }, [
             I(u, {
               text: n.text,
-              handler: (c = n.items) != null && c.length ? () => null : n.handler,
+              handler: (d = n.items) != null && d.length ? () => null : n.handler,
               "secondary-text": n.secondaryText,
               icon: n.icon,
               chevron: !!((v = n.items) != null && v.length),
@@ -435,9 +431,9 @@ function Ae(e, t, d, s, i, a) {
               tabindex: p === e.subMenuFocusedIndex ? "0" : "-1",
               "aria-haspopup": !!((_ = n.items) != null && _.length),
               "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === p,
-              onClick: (B) => e.toggleMenu(n, p)
+              onClick: ($) => e.toggleMenu(n, p)
             }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
-            (w = n.items) != null && w.length && e.showSubMenu && e.visibleSubMenuIndex === p ? (m(), S(l, {
+            (w = n.items) != null && w.length && e.showSubMenu && e.visibleSubMenuIndex === p ? (m(), L(l, {
               key: 0,
               ref_for: !0,
               ref: "subMenuItemListRef",
@@ -446,18 +442,18 @@ function Ae(e, t, d, s, i, a) {
               onBack: e.onBackButton,
               onClose: e.closeMenu
             }, null, 8, ["items", "title", "onBack", "onClose"])) : P("", !0)
-          ], 40, Re);
+          ], 40, Ee);
         }), 128))
       ], 544)
     ]),
     _: 1
   }, 8, ["style"]);
 }
-const Fe = /* @__PURE__ */ L(De, [["render", Ae], ["__scopeId", "data-v-a917040d"]]), Ve = O({
+const Re = /* @__PURE__ */ S(Te, [["render", Ne], ["__scopeId", "data-v-a917040d"]]), De = K({
   i18n: { messages: X },
   name: "bento-menu",
-  components: { BentoButton: fe, BentoPopover: ve, MenuItemList: Fe, OptionsVerticalIcon: we },
-  directives: { BentoClickOutsideDirective: pe },
+  components: { BentoButton: pe, BentoPopover: fe, MenuItemList: Re, OptionsVerticalIcon: Be },
+  directives: { BentoClickOutsideDirective: me },
   props: {
     /**
      * The data to be displayed in the list
@@ -468,12 +464,11 @@ const Fe = /* @__PURE__ */ L(De, [["render", Ae], ["__scopeId", "data-v-a917040d
     },
     /**
      * The position of where the menu should open.
-     * @see BentoPopoverPositions
      */
     menuPosition: {
       type: String,
-      default: K.BOTTOM_START,
-      validator: (e) => Object.values(K).includes(e)
+      default: H.BOTTOM_START,
+      validator: (e) => Object.values(H).includes(e)
     },
     /**
      * Instructs the menu popover to be visible outside of the containing container.
@@ -496,23 +491,20 @@ const Fe = /* @__PURE__ */ L(De, [["render", Ae], ["__scopeId", "data-v-a917040d
     button: {
       type: Object,
       default: () => ({
-        variant: V.SECONDARY
+        variant: "secondary"
       })
     }
   },
-  emits: [h.CLOSE, h.OPEN],
+  emits: [C.CLOSE, C.OPEN],
   setup(e, { emit: t }) {
-    const d = f(null), s = f(!1), i = f(!1), a = F("menu"), u = F("menu-popover"), l = M(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), o = () => {
-      s.value = !0, t(h.OPEN);
+    const c = f(null), s = f(!1), i = f(!1), a = F("menu"), u = F("menu-popover"), l = B(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), o = () => {
+      s.value = !0, t(C.OPEN);
     }, n = () => {
-      s.value && (s.value = !1, d.value.$el.focus(), t(h.CLOSE));
+      s.value && (s.value = !1, c.value.$el.focus(), t(C.CLOSE));
     };
     return {
-      // Enums
-      BentoButtonVariant: V,
-      BentoPopoverPositions: K,
       // Values
-      menuButtonRef: d,
+      menuButtonRef: c,
       menuId: a,
       popoverId: u,
       showMenu: s,
@@ -532,26 +524,26 @@ const Fe = /* @__PURE__ */ L(De, [["render", Ae], ["__scopeId", "data-v-a917040d
     };
   }
 });
-function He(e, t, d, s, i, a) {
-  const u = C("options-vertical-icon"), l = C("bento-button"), o = C("menu-item-list"), n = C("bento-popover"), p = de("bento-click-outside-directive");
-  return me((m(), k("div", {
+function Fe(e, t, c, s, i, a) {
+  const u = h("options-vertical-icon"), l = h("bento-button"), o = h("menu-item-list"), n = h("bento-popover"), p = de("bento-click-outside-directive");
+  return ce((m(), k("div", {
     class: "b-menu",
     onKeydown: [
-      t[0] || (t[0] = y((...c) => e.onKeyDown && e.onKeyDown(...c), ["down"])),
-      t[1] || (t[1] = y((...c) => e.onKeyUp && e.onKeyUp(...c), ["up"])),
-      t[2] || (t[2] = y((...c) => e.closeMenu && e.closeMenu(...c), ["esc"]))
+      t[0] || (t[0] = y((...d) => e.onKeyDown && e.onKeyDown(...d), ["down"])),
+      t[1] || (t[1] = y((...d) => e.onKeyUp && e.onKeyUp(...d), ["up"])),
+      t[2] || (t[2] = y((...d) => e.closeMenu && e.closeMenu(...d), ["esc"]))
     ]
   }, [
-    I(l, W({
+    I(l, V({
       ref: "menuButtonRef",
       "aria-haspopup": "true"
     }, e.button, {
-      "aria-expanded": e.showMenu,
+      "aria-expanded": `${e.showMenu}`,
       "aria-controls": e.showMenu ? e.menuId : null,
       onClick: e.toggleShowMenu
     }), {
       iconLeft: g(() => [
-        Y(e.$slots, "default", {}, () => [
+        j(e.$slots, "default", {}, () => [
           I(u, {
             title: e.$t("menuButton")
           }, null, 8, ["title"])
@@ -559,7 +551,7 @@ function He(e, t, d, s, i, a) {
       ]),
       _: 3
     }, 16, ["aria-expanded", "aria-controls", "onClick"]),
-    e.menuButtonRef ? (m(), S(n, {
+    e.menuButtonRef ? (m(), L(n, {
       key: 0,
       id: e.menuId,
       open: e.showMenu,
@@ -583,9 +575,9 @@ function He(e, t, d, s, i, a) {
     [p, e.closeMenu]
   ]);
 }
-const Qe = /* @__PURE__ */ L(Ve, [["render", He], ["__scopeId", "data-v-7183030b"]]);
+const Ge = /* @__PURE__ */ S(De, [["render", Fe], ["__scopeId", "data-v-487dd6cd"]]);
 export {
-  Qe as BentoMenu,
-  h as BentoMenuEvent
+  Ge as BentoMenu,
+  C as BentoMenuEvent
 };
 //# sourceMappingURL=menu.js.map