@adyen/bento-vue3 1.0.0 → 1.1.1

package/dist/loading-indicator.js

@@ -1,10 +1,9 @@
-import { defineComponent as t, onMounted as i, onUnmounted as s, computed as l, openBlock as d, createElementBlock as r, normalizeClass as c } from "vue";
+import { defineComponent as t, onMounted as i, onUnmounted as l, computed as s, openBlock as d, createElementBlock as r, normalizeClass as c } from "vue";
 import { _ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index23.css";
+import "./assets/index21.css";
 var e = /* @__PURE__ */ ((a) => (a.START = "loading-start", a.END = "loading-end", a))(e || {});
 const p = t({
   name: "bento-loading-indicator",
-  inheritAttrs: !1,
   props: {
     /**
      * Displays the loading indicator in a small size
@@ -21,8 +20,8 @@ const p = t({
   },
   emits: [e.START, e.END],
   setup(a, { emit: n }) {
-    return i(() => n(e.START)), s(() => n(e.END)), {
-      conditionalClasses: l(() => ({
+    return i(() => n(e.START)), l(() => n(e.END)), {
+      conditionalClasses: s(() => ({
         "b-loading-indicator--inverse": a.inverse,
         "b-loading-indicator--small": a.small,
         "b-loading-indicator--large": a.large
@@ -37,9 +36,9 @@ function m(a, n, o, u, f, g) {
     "data-testid": "loading-indicator"
   }, null, 2);
 }
-const b = /* @__PURE__ */ _(p, [["render", m], ["__scopeId", "data-v-9a57a60d"]]);
+const T = /* @__PURE__ */ _(p, [["render", m], ["__scopeId", "data-v-b3018ba0"]]);
 export {
-  b as BentoLoadingIndicator,
+  T as BentoLoadingIndicator,
   e as BentoLoadingIndicatorEvent
 };
 //# sourceMappingURL=loading-indicator.js.map

package/dist/loading-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-indicator.js","sources":["../../vue2/src/components/loading-indicator/loading-indicator.types.ts","../../vue2/src/components/loading-indicator/loading-indicator.vue"],"sourcesContent":["export enum BentoLoadingIndicatorEvent {\n    START = 'loading-start',\n    END = 'loading-end',\n}\n","<template>\n    <div class=\"b-loading-indicator\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"loading-indicator\" />\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, onUnmounted } from 'vue';\n    import { BentoLoadingIndicatorEvent } from './loading-indicator.types';\n\n    export default defineComponent({\n        name: 'bento-loading-indicator',\n        inheritAttrs: false,\n        props: {\n            /**\n             * Displays the loading indicator in a small size\n             */\n            small: { type: Boolean, default: false },\n            /**\n             * Displays the loading indicator in a large size\n             */\n            large: { type: Boolean, default: false },\n            /**\n             * Displays the loading indicator in a white variant\n             */\n            inverse: { type: Boolean, default: false },\n        },\n        emits: [BentoLoadingIndicatorEvent.START, BentoLoadingIndicatorEvent.END],\n        setup(props, { emit }) {\n            onMounted(() => emit(BentoLoadingIndicatorEvent.START));\n\n            onUnmounted(() => emit(BentoLoadingIndicatorEvent.END));\n\n            const conditionalClasses = computed(() => ({\n                'b-loading-indicator--inverse': props.inverse,\n                'b-loading-indicator--small': props.small,\n                'b-loading-indicator--large': props.large,\n            }));\n\n            return {\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./loading-indicator.scss\" />\n"],"names":["BentoLoadingIndicatorEvent","BentoLoadingIndicatorEvent2","_sfc_main","defineComponent","props","emit","onMounted","onUnmounted","computed","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","openBlock","createElementBlock","normalizeClass"],"mappings":";;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,iBACAA,EAAA,MAAA,eAFQA,IAAAD,KAAA,CAAA,CAAA;ACQR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,cAAA;AAAA,EACQ,OAAA;AAAA;AAAA;AAAA;AAAA,IACP,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIoC,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA,EAIE;AAAA,EAC7C,OAAA,CAAAH,EAAA,OAAAA,EAAA,GAAA;AAAA,EACwE,MAAAI,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEpE,WAAAC,EAAA,MAAAD,EAAAL,EAAA,KAAA,CAAA,GAEAO,EAAA,MAAAF,EAAAL,EAAA,GAAA,CAAA,GAQA;AAAA,MAAO,oBANPQ,EAAA,OAAA;AAAA,QAA2C,gCAAAJ,EAAA;AAAA,QACD,8BAAAA,EAAA;AAAA,QACF,8BAAAA,EAAA;AAAA,MACA,EAAA;AAAA,IAIpC;AAAA,EACJ;AAER,CAAA;AAxCU,SAAAK,EAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAA;AAAmD,SAAAC,EAAA,GAAAC,EAAA,OAAA;AAAA,IAAkB,OAAAC,EAAA,CAAA,uBAAAR,EAAA,kBAAA,CAAA;AAAA,IAAgC,eAAA;AAAA;;;;"}
+{"version":3,"file":"loading-indicator.js","sources":["../../vue2/src/components/loading-indicator/loading-indicator.types.ts","../../vue2/src/components/loading-indicator/loading-indicator.vue"],"sourcesContent":["export enum BentoLoadingIndicatorEvent {\n    START = 'loading-start',\n    END = 'loading-end',\n}\n","<template>\n    <div class=\"b-loading-indicator\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"loading-indicator\" />\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, onUnmounted } from 'vue';\n    import { BentoLoadingIndicatorEvent } from './loading-indicator.types';\n\n    export default defineComponent({\n        name: 'bento-loading-indicator',\n        props: {\n            /**\n             * Displays the loading indicator in a small size\n             */\n            small: { type: Boolean, default: false },\n            /**\n             * Displays the loading indicator in a large size\n             */\n            large: { type: Boolean, default: false },\n            /**\n             * Displays the loading indicator in a white variant\n             */\n            inverse: { type: Boolean, default: false },\n        },\n        emits: [BentoLoadingIndicatorEvent.START, BentoLoadingIndicatorEvent.END],\n        setup(props, { emit }) {\n            onMounted(() => emit(BentoLoadingIndicatorEvent.START));\n\n            onUnmounted(() => emit(BentoLoadingIndicatorEvent.END));\n\n            const conditionalClasses = computed(() => ({\n                'b-loading-indicator--inverse': props.inverse,\n                'b-loading-indicator--small': props.small,\n                'b-loading-indicator--large': props.large,\n            }));\n\n            return {\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./loading-indicator.scss\" />\n"],"names":["BentoLoadingIndicatorEvent","BentoLoadingIndicatorEvent2","_sfc_main","defineComponent","props","emit","onMounted","onUnmounted","computed","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","openBlock","createElementBlock","normalizeClass"],"mappings":";;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,iBACAA,EAAA,MAAA,eAFQA,IAAAD,KAAA,CAAA,CAAA;ACQR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,OAAA;AAAA;AAAA;AAAA;AAAA,IACC,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIoC,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA,EAIE;AAAA,EAC7C,OAAA,CAAAH,EAAA,OAAAA,EAAA,GAAA;AAAA,EACwE,MAAAI,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEpE,WAAAC,EAAA,MAAAD,EAAAL,EAAA,KAAA,CAAA,GAEAO,EAAA,MAAAF,EAAAL,EAAA,GAAA,CAAA,GAQA;AAAA,MAAO,oBANPQ,EAAA,OAAA;AAAA,QAA2C,gCAAAJ,EAAA;AAAA,QACD,8BAAAA,EAAA;AAAA,QACF,8BAAAA,EAAA;AAAA,MACA,EAAA;AAAA,IAIpC;AAAA,EACJ;AAER,CAAA;AAvCU,SAAAK,EAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAA;AAAmD,SAAAC,EAAA,GAAAC,EAAA,OAAA;AAAA,IAAkB,OAAAC,EAAA,CAAA,uBAAAR,EAAA,kBAAA,CAAA;AAAA,IAAgC,eAAA;AAAA;;;;"}

package/dist/menu.js

@@ -1,19 +1,19 @@
-import { openBlock as m, createElementBlock as k, mergeProps as W, toDisplayString as N, createCommentVNode as P, pushScopeId as ie, popScopeId as le, createElementVNode as T, defineComponent as O, computed as M, resolveComponent as C, createBlock as S, normalizeClass as j, createSlots as ue, withCtx as g, createVNode as I, createTextVNode as A, resolveDynamicComponent as ae, renderSlot as Y, ref as f, onMounted as re, Transition as de, withKeys as y, withModifiers as E, Fragment as Z, renderList as z, normalizeStyle as G, resolveDirective as ce, withDirectives as me } from "vue";
+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 { g as F } from "./chunks/unique-id.a2a2b458.js";
-import { B as pe, a as V } from "./chunks/button.51be5335.js";
-import { BentoPopover as fe, BentoPopoverPositions as K } from "./popover.js";
-import { a as ve, C as H } from "./chunks/chevron-right.aef416c6.js";
-import { B as _e, a as q } from "./chunks/base-button.ba17724a.js";
-import { B as be, c as ye, a as he } from "./chunks/index.1d501e31.js";
-import { B as Ce } from "./chunks/directive.0408e565.js";
-import "./assets/index25.css";
+import { B as pe } from "./chunks/directive.0408e565.js";
+import { B as fe, a as V } from "./chunks/button.9cd485bc.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.7198ce06.js";
+import { B as ye, a as he, b as Ce } from "./chunks/index.a169ce0d.js";
+import "./assets/index22.css";
 let U = 0;
 const ge = {
   beforeCreate() {
     this.uuid = U.toString(), U += 1;
   }
-}, D = (e) => (ie("data-v-c663a42e"), e = e(), le(), e), Be = { key: 0 }, $e = /* @__PURE__ */ D(() => /* @__PURE__ */ T("path", {
+}, D = (e) => (le("data-v-c663a42e"), e = e(), ue(), e), Be = { key: 0 }, $e = /* @__PURE__ */ D(() => /* @__PURE__ */ T("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",
@@ -29,7 +29,7 @@ const ge = {
   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, c, s, u, a) {
+function ke(e, t, d, s, i, a) {
   return m(), k("svg", W({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -44,7 +44,7 @@ function ke(e, t, c, s, u, a) {
 }
 const we = /* @__PURE__ */ L(ge, [["render", ke], ["__scopeId", "data-v-c663a42e"]]), Se = O({
   name: "menu-item",
-  components: { BaseButton: _e, BentoTypography: be, ChevronRightIcon: ve },
+  components: { BaseButton: be, BentoTypography: ye, ChevronRightIcon: _e },
   props: {
     /**
      * menu-item text that gets displayed as the main label
@@ -112,34 +112,34 @@ const we = /* @__PURE__ */ L(ge, [["render", ke], ["__scopeId", "data-v-c663a42e
   },
   emits: [q.CLICK],
   setup(e, { emit: t }) {
-    const c = M(() => ({
+    const d = M(() => ({
       "b-menu-item--critical": e.critical,
       "b-menu-item--indent": e.indent
     }));
     return {
       // Enums
-      BentoTypographyElement: ye,
-      BentoTypographyVariant: he,
+      BentoTypographyElement: he,
+      BentoTypographyVariant: Ce,
       // Values
-      conditionalClasses: c,
+      conditionalClasses: d,
       // Methods
-      onClick: (u) => {
-        u.stopPropagation(), e.handler(), t(q.CLICK);
+      onClick: (i) => {
+        i.stopPropagation(), e.handler(), t(q.CLICK);
       }
     };
   }
 });
-function Le(e, t, c, s, u, a) {
-  const l = C("bento-typography"), i = C("chevron-right-icon"), o = C("base-button");
+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]),
     role: "menuitem",
     disabled: e.disabled,
     tabindex: "-1",
     onClick: e.onClick
-  }, ue({
+  }, ie({
     default: g(() => [
-      I(l, {
+      I(u, {
         el: e.BentoTypographyElement.SPAN,
         variant: e.BentoTypographyVariant.BODY,
         stronger: e.isTitle,
@@ -150,7 +150,7 @@ function Le(e, t, c, s, u, a) {
         ]),
         _: 1
       }, 8, ["el", "variant", "stronger"]),
-      e.secondaryText ? (m(), S(l, {
+      e.secondaryText ? (m(), S(u, {
         key: 0,
         el: e.BentoTypographyElement.SPAN,
         variant: e.BentoTypographyVariant.BODY,
@@ -177,7 +177,7 @@ function Le(e, t, c, s, u, a) {
     e.chevron ? {
       name: "iconRight",
       fn: g(() => [
-        I(i, { "aria-hidden": "true" })
+        I(l, { "aria-hidden": "true" })
       ]),
       key: "1"
     } : void 0
@@ -186,16 +186,15 @@ function Le(e, t, c, s, u, a) {
 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({
-  name: "bento-menu-list-container",
-  inheritAttrs: !1
+  name: "bento-menu-list-container"
 });
 const Oe = { class: "b-menu-list-container" };
-function Pe(e, t, c, s, u, a) {
+function Pe(e, t, d, s, i, a) {
   return m(), k("div", Oe, [
     Y(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const Q = /* @__PURE__ */ L(Te, [["render", Pe], ["__scopeId", "data-v-05bf327d"]]), X = {
+const Q = /* @__PURE__ */ L(Te, [["render", Pe], ["__scopeId", "data-v-ea0113ba"]]), X = {
   "en-US": {
     menuButton: "Open menu",
     backButton: "Go back"
@@ -216,9 +215,9 @@ const Q = /* @__PURE__ */ L(Te, [["render", Pe], ["__scopeId", "data-v-05bf327d"
   },
   emits: [h.CLOSE, h.BACK],
   setup(e, { emit: t }) {
-    const c = f(null), s = f(0), u = f(e.items.length), a = () => t(h.CLOSE), l = () => t(h.BACK), i = M(() => {
+    const d = f(null), s = f(0), i = f(e.items.length), a = () => t(h.CLOSE), u = () => t(h.BACK), l = M(() => {
       var v;
-      const d = (v = e.items) == null ? void 0 : v.map((_) => ({
+      const c = (v = e.items) == null ? void 0 : v.map((_) => ({
         ..._,
         indent: !_.icon,
         isTitle: !1,
@@ -233,47 +232,47 @@ const Q = /* @__PURE__ */ L(Te, [["render", Pe], ["__scopeId", "data-v-05bf327d"
           isTitle: !0,
           disabled: !1,
           indent: !1,
-          handler: l,
-          clickHandler: l
+          handler: u,
+          clickHandler: u
         },
-        ...d
+        ...c
       ];
     }), o = async () => {
-      var d, v, _, w, B;
-      (B = (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 || B.focus();
+      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();
     };
     re(async () => {
       setTimeout(() => o(), 150);
     });
     const n = () => {
-      s.value > 0 ? (s.value -= 1, i.value[s.value].disabled && n()) : s.value = u.value, o();
+      s.value > 0 ? (s.value -= 1, l.value[s.value].disabled && n()) : s.value = i.value, o();
     }, p = () => {
-      s.value < u.value ? (s.value += 1, i.value[s.value].disabled && p()) : s.value = 0, o();
+      s.value < i.value ? (s.value += 1, l.value[s.value].disabled && p()) : s.value = 0, o();
     };
     return {
       // Enums
       BentoMenuEvent: h,
       // Values
-      subMenuItemListRefLocal: c,
+      subMenuItemListRefLocal: d,
       subMenuFocusedIndex: s,
       ChevronLeftIcon: H,
-      computedItems: i,
+      computedItems: l,
       // Methods
       closeMenu: a,
-      onBackButton: l,
+      onBackButton: u,
       focusPrevious: n,
       focusNext: p
     };
   }
 });
-function Ke(e, t, c, s, u, a) {
-  const l = C("menu-item"), i = C("menu-list-container");
-  return m(), S(de, {
+function Ke(e, t, d, s, i, a) {
+  const u = C("menu-item"), l = C("menu-list-container");
+  return m(), S(ce, {
     name: "b-sub-menu-item-list__transition",
     appear: ""
   }, {
     default: g(() => [
-      I(i, { class: "b-sub-menu-item-list" }, {
+      I(l, { class: "b-sub-menu-item-list" }, {
         default: g(() => [
           T("ul", {
             ref: "subMenuItemListRefLocal",
@@ -293,7 +292,7 @@ function Ke(e, t, c, s, u, a) {
               ]),
               role: "none"
             }, [
-              I(l, {
+              I(u, {
                 text: o.text,
                 handler: o.handler,
                 "secondary-text": o.secondaryText,
@@ -317,7 +316,6 @@ function Ke(e, t, c, s, u, a) {
 const Ne = /* @__PURE__ */ L(Ee, [["render", Ke], ["__scopeId", "data-v-67456329"]]), De = O({
   name: "menu-item-list",
   components: { MenuItem: J, MenuListContainer: Q, SubMenuItemList: Ne },
-  inheritAttrs: !1,
   props: {
     /**
      * The data to be displayed in the list
@@ -343,7 +341,7 @@ const Ne = /* @__PURE__ */ L(Ee, [["render", Ke], ["__scopeId", "data-v-67456329
   },
   emits: [h.CLOSE],
   setup(e, { emit: t }) {
-    const c = f(null), s = f(null), u = f(null), a = f(!1), l = f(null), i = 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)), d = M(() => e.indentItems || p.value ? e.data.map((r) => {
+    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) => {
       let b = !1;
       return r.icon || (b = !0), {
         ...r,
@@ -352,38 +350,38 @@ const Ne = /* @__PURE__ */ L(Ee, [["render", Ke], ["__scopeId", "data-v-67456329
       };
     }) : e.data), v = () => {
       var r, b, $;
-      return ($ = (b = (r = c.value) == null ? void 0 : r.children[i.value]) == null ? void 0 : b.children[0]) == null ? void 0 : $.focus();
+      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) => {
-      r.items ? (l.value = b, a.value = !0) : (l.value = b, a.value = !1, _());
+      r.items ? (u.value = b, a.value = !0) : (u.value = b, a.value = !1, _());
     }, B = () => {
-      i.value > 0 ? (i.value -= 1, d.value[i.value].disabled && B()) : i.value = n.value, v();
+      l.value > 0 ? (l.value -= 1, c.value[l.value].disabled && B()) : l.value = n.value, v();
     }, R = () => {
-      i.value < n.value ? (i.value += 1, d.value[i.value].disabled && R()) : i.value = 0, v();
+      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 && (l.value = b, a.value = !0);
+      ($ = r == null ? void 0 : r.items) != null && $.length && (u.value = b, a.value = !0);
     }, ee = () => {
-      l.value && a.value && (l.value = null, a.value = !1);
+      u.value && a.value && (u.value = null, a.value = !1);
     }, ne = () => {
-      a.value = !1, l.value = null, v();
+      a.value = !1, u.value = null, v();
     }, te = M(() => {
       var r;
       return (r = s == null ? void 0 : s.value) == null ? void 0 : r.$el.offsetHeight;
     }), oe = M(() => {
       var r, b, $;
-      return ($ = (b = (r = u == null ? void 0 : u.value) == null ? void 0 : r[0]) == null ? void 0 : b.$el) == null ? void 0 : $.offsetHeight;
+      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`);
     return {
       // Values
-      menuItemListRef: c,
+      menuItemListRef: d,
       menuItemListWrapperRef: s,
-      subMenuItemListRef: u,
-      computedData: d,
+      subMenuItemListRef: i,
+      computedData: c,
       computedHeight: se,
-      focusedIndex: i,
+      focusedIndex: l,
       subMenuFocusedIndex: o,
       showSubMenu: a,
-      visibleSubMenuIndex: l,
+      visibleSubMenuIndex: u,
       // Methods
       toggleMenu: w,
       closeMenu: _,
@@ -396,8 +394,8 @@ const Ne = /* @__PURE__ */ L(Ee, [["render", Ke], ["__scopeId", "data-v-67456329
   }
 });
 const Re = ["onKeydown"];
-function Ae(e, t, c, s, u, a) {
-  const l = C("menu-item"), i = C("sub-menu-item-list"), o = C("menu-list-container");
+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, {
     ref: "menuItemListWrapperRef",
     style: G({ height: e.computedHeight })
@@ -415,7 +413,7 @@ function Ae(e, t, c, s, u, a) {
         ]
       }, [
         (m(!0), k(Z, null, z(e.computedData, (n, p) => {
-          var d, v, _, w;
+          var c, v, _, w;
           return m(), k("li", {
             key: `menu-item-${p}`,
             class: "b-menu-item-list__item",
@@ -425,9 +423,9 @@ function Ae(e, t, c, s, u, a) {
               t[0] || (t[0] = y((B) => e.focusLeft(), ["left"]))
             ]
           }, [
-            I(l, {
+            I(u, {
               text: n.text,
-              handler: (d = n.items) != null && d.length ? () => null : n.handler,
+              handler: (c = n.items) != null && c.length ? () => null : n.handler,
               "secondary-text": n.secondaryText,
               icon: n.icon,
               chevron: !!((v = n.items) != null && v.length),
@@ -439,7 +437,7 @@ function Ae(e, t, c, s, u, a) {
               "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === p,
               onClick: (B) => 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(i, {
+            (w = n.items) != null && w.length && e.showSubMenu && e.visibleSubMenuIndex === p ? (m(), S(l, {
               key: 0,
               ref_for: !0,
               ref: "subMenuItemListRef",
@@ -455,12 +453,11 @@ function Ae(e, t, c, s, u, a) {
     _: 1
   }, 8, ["style"]);
 }
-const Fe = /* @__PURE__ */ L(De, [["render", Ae], ["__scopeId", "data-v-ad82835f"]]), Ve = O({
+const Fe = /* @__PURE__ */ L(De, [["render", Ae], ["__scopeId", "data-v-a917040d"]]), Ve = O({
   i18n: { messages: X },
   name: "bento-menu",
-  components: { BentoButton: pe, BentoPopover: fe, MenuItemList: Fe, OptionsVerticalIcon: we },
-  directives: { BentoClickOutsideDirective: Ce },
-  inheritAttrs: !1,
+  components: { BentoButton: fe, BentoPopover: ve, MenuItemList: Fe, OptionsVerticalIcon: we },
+  directives: { BentoClickOutsideDirective: pe },
   props: {
     /**
      * The data to be displayed in the list
@@ -505,28 +502,28 @@ const Fe = /* @__PURE__ */ L(De, [["render", Ae], ["__scopeId", "data-v-ad82835f
   },
   emits: [h.CLOSE, h.OPEN],
   setup(e, { emit: t }) {
-    const c = f(null), s = f(!1), u = f(!1), a = F("menu"), l = F("menu-popover"), i = M(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), o = () => {
+    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);
     }, n = () => {
-      s.value && (s.value = !1, c.value.$el.focus(), t(h.CLOSE));
+      s.value && (s.value = !1, d.value.$el.focus(), t(h.CLOSE));
     };
     return {
       // Enums
       BentoButtonVariant: V,
       BentoPopoverPositions: K,
       // Values
-      menuButtonRef: c,
+      menuButtonRef: d,
       menuId: a,
-      popoverId: l,
+      popoverId: u,
       showMenu: s,
-      computedMenuWidth: i,
-      isLastElementFocused: u,
+      computedMenuWidth: l,
+      isLastElementFocused: i,
       // Methods
       onKeyDown: () => {
-        u.value = !1, o();
+        i.value = !1, o();
       },
       onKeyUp: () => {
-        u.value = !0, o();
+        i.value = !0, o();
       },
       closeMenu: n,
       toggleShowMenu: (_) => {
@@ -535,17 +532,17 @@ const Fe = /* @__PURE__ */ L(De, [["render", Ae], ["__scopeId", "data-v-ad82835f
     };
   }
 });
-function He(e, t, c, s, u, a) {
-  const l = C("options-vertical-icon"), i = C("bento-button"), o = C("menu-item-list"), n = C("bento-popover"), p = ce("bento-click-outside-directive");
+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", {
     class: "b-menu",
     onKeydown: [
-      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"]))
+      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"]))
     ]
   }, [
-    I(i, W({
+    I(l, W({
       ref: "menuButtonRef",
       "aria-haspopup": "true"
     }, e.button, {
@@ -555,7 +552,7 @@ function He(e, t, c, s, u, a) {
     }), {
       iconLeft: g(() => [
         Y(e.$slots, "default", {}, () => [
-          I(l, {
+          I(u, {
             title: e.$t("menuButton")
           }, null, 8, ["title"])
         ], !0)
@@ -586,7 +583,7 @@ function He(e, t, c, s, u, a) {
     [p, e.closeMenu]
   ]);
 }
-const Qe = /* @__PURE__ */ L(Ve, [["render", He], ["__scopeId", "data-v-74b985d8"]]);
+const Qe = /* @__PURE__ */ L(Ve, [["render", He], ["__scopeId", "data-v-93e2bff4"]]);
 export {
   Qe as BentoMenu,
   h as BentoMenuEvent