@adyen/bento-vue3 1.83.1 → 1.84.0

package/dist/chunks/{button-actions.O0cnu1_g.js → button-actions.Crj4QFAd.js}

@@ -1,67 +1,69 @@
-import { defineComponent as M, useSlots as Q, computed as _, createBlock as g, openBlock as u, withModifiers as z, normalizeClass as U, createSlots as G, withCtx as b, renderSlot as D, unref as p, createElementVNode as V, createCommentVNode as B, mergeProps as Y, renderList as x, normalizeProps as Be, guardReactiveProps as $e, resolveComponent as T, createVNode as E, createTextVNode as H, toDisplayString as j, onMounted as ee, onUnmounted as pe, useAttrs as Ee, inject as K, ref as v, toRefs as Se, Transition as ve, createElementBlock as k, Teleport as Le, resolveDynamicComponent as X, toHandlers as ie, withKeys as N, Fragment as Z, watch as be, nextTick as te, normalizeStyle as he, provide as Te, toRef as Me } from "vue";
-import { B as L } from "./button.CSp48LJt.js";
-import { B as we } from "./loading-indicator.Db794TT5.js";
-import { C as Ne } from "./cross-circle-fill.CYLL7jfC.js";
-import { C as Re } from "./checkmark-circle-fill._6-d40ru.js";
+import { defineComponent as w, useSlots as Q, computed as _, createBlock as g, openBlock as r, withModifiers as X, normalizeClass as U, createSlots as j, withCtx as b, renderSlot as P, unref as p, createElementVNode as V, createCommentVNode as O, mergeProps as H, renderList as x, normalizeProps as Ee, guardReactiveProps as Te, resolveComponent as T, createVNode as S, createTextVNode as Y, toDisplayString as G, onMounted as ee, onUnmounted as pe, useAttrs as we, inject as K, ref as v, toRefs as Me, Transition as ve, createElementBlock as I, Teleport as Ne, resolveDynamicComponent as z, toHandlers as ie, withKeys as N, Fragment as Z, watch as be, nextTick as te, toRef as he, normalizeStyle as ye, provide as Ae } from "vue";
+import { B as E } from "./button.CSp48LJt.js";
+import { B as Re } from "./loading-indicator.Db794TT5.js";
+import { C as Pe } from "./cross-circle-fill.CYLL7jfC.js";
+import { C as De } from "./checkmark-circle-fill._6-d40ru.js";
 import { u as ae } from "./use-has-slot.B7eQSabc.js";
-import { u as ye } from "./index.pdBj0KQU.js";
-import { _ as w } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as ge, D as Ae } from "./divider.Dho4_hQ7.js";
-import { C as De } from "./cross.B92GxFTY.js";
-import { B as _e, a as re, p as Pe } from "./typography.6Oo5TOMP.js";
-import { c as Fe, P as We, d as Ke } from "./popper-container.I9gzp1NR.js";
-import { u as Ue } from "./aria-label.CaUURpnB.js";
-import { o as Ve } from "./on-click-outside.D9aY9g8G.js";
-import { g as Ge } from "./generate-uid.NJ8tVoha.js";
-import { C as je } from "./chevron-down.DCQ6ZLaq.js";
+import { u as ge } from "./index.pdBj0KQU.js";
+import { _ as M } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as _e, D as Fe } from "./divider.Dho4_hQ7.js";
+import { C as We } from "./cross.B92GxFTY.js";
+import { B as Ce, a as re, p as Ke } from "./typography.6Oo5TOMP.js";
+import { c as Ue, P as Ve, d as je } from "./popper-container.I9gzp1NR.js";
+import { u as Ge } from "./aria-label.CaUURpnB.js";
+import { o as Ye } from "./on-click-outside.D9aY9g8G.js";
+import { g as He } from "./generate-uid.NJ8tVoha.js";
+import { C as Je } from "./chevron-down.DCQ6ZLaq.js";
 /* empty css              */
-import { a as He, C as ue } from "./chevron-left.Cfn1uGLH.js";
-import { a as de, B as Ye } from "./base-button.CUd03aA2.js";
-import { t as Je } from "./truncate.BfIl_-71.js";
-import { i as Ce } from "./index.CWuzEfiV.js";
-import { o as qe } from "./resize.Bqks3WUm.js";
-import { g as Xe } from "./es6.MoTTyETW.js";
+import { a as qe, C as ue } from "./chevron-left.Cfn1uGLH.js";
+import { a as de, B as ze } from "./base-button.CUd03aA2.js";
+import { t as Xe } from "./truncate.BfIl_-71.js";
+import { i as ke } from "./index.CWuzEfiV.js";
+import { o as Ze } from "./resize.Bqks3WUm.js";
+import { g as Qe } from "./es6.C1DXQV6f.js";
 import "../assets/button-actions.css";
-var A = /* @__PURE__ */ ((e) => (e.START = "start", e.LOADING = "loading", e.SUCCESS = "success", e.FAIL = "fail", e))(A || {});
+var R = /* @__PURE__ */ ((e) => (e.START = "start", e.LOADING = "loading", e.SUCCESS = "success", e.FAIL = "fail", e))(R || {});
 const Ie = {
   "en-US": {
     failed: "Failed",
     succeded: "Succeded"
   },
   "ja-JP": {
-    failed: "失敗しました"
+    failed: "失敗しました",
+    succeded: "成功"
   },
   "pt-BR": {
-    failed: "Falha"
+    failed: "Falha",
+    succeded: "Bem-sucedido"
   }
-}, ze = {
+}, xe = {
   class: "b-loading-button__icon",
   "data-testid": "loading-button-rotating-icon"
-}, Ze = {
+}, et = {
   i18n: { messages: Ie }
-}, Qe = /* @__PURE__ */ M({
-  ...Ze,
+}, tt = /* @__PURE__ */ w({
+  ...et,
   __name: "loading-button",
   props: {
     /**
      * Reduces sizing of button
      */
     condensed: {
-      type: L.props.condensed.type,
+      type: E.props.condensed.type,
       default: !1
     },
     /**
      * Displays loading-button as critical
      */
     critical: {
-      type: L.props.critical.type,
+      type: E.props.critical.type,
       default: !1
     },
     /**
      * Disables button functonality
      */
     disabled: {
-      type: L.props.disabled.type,
+      type: E.props.disabled.type,
       default: !1
     },
     /**
@@ -77,89 +79,89 @@ const Ie = {
      */
     state: {
       type: String,
-      default: A.START,
-      validator: (e) => Object.values(A).includes(e)
+      default: R.START,
+      validator: (e) => Object.values(R).includes(e)
     },
     /**
      * Types of flavour of Button
      */
     variant: {
-      type: L.props.variant.type,
+      type: E.props.variant.type,
       default: "primary",
-      validator: L.props.variant.validator
+      validator: E.props.variant.validator
     }
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const o = e, s = t, d = Q(), m = ae(d), { t: l } = ye({ messages: Ie }), f = _(() => ({
-      [`b-loading-button--${o.variant}-${A.LOADING}`]: o.state === A.LOADING && !o.disabled,
-      "b-loading-button--loading": o.state === A.LOADING && !o.disabled,
-      [`b-loading-button--${o.variant}-${A.SUCCESS}`]: o.state === A.SUCCESS,
-      "b-loading-button--inverse": o.inverse
-    })), c = _(
-      () => o.variant === "primary" && !o.inverse || o.variant !== "primary" && o.inverse
+    const s = e, o = t, d = Q(), m = ae(d), { t: u } = ge({ messages: Ie }), c = _(() => ({
+      [`b-loading-button--${s.variant}-${R.LOADING}`]: s.state === R.LOADING && !s.disabled,
+      "b-loading-button--loading": s.state === R.LOADING && !s.disabled,
+      [`b-loading-button--${s.variant}-${R.SUCCESS}`]: s.state === R.SUCCESS,
+      "b-loading-button--inverse": s.inverse
+    })), f = _(
+      () => s.variant === "primary" && !s.inverse || s.variant !== "primary" && s.inverse
     ), a = _(
-      () => o.critical && o.state === A.START || o.state === A.FAIL
-    ), i = (r) => {
-      r.stopPropagation(), o.state !== A.LOADING && s("click", r);
+      () => s.critical && s.state === R.START || s.state === R.FAIL
+    ), i = (l) => {
+      l.stopPropagation(), s.state !== R.LOADING && o("click", l);
     };
-    return (r, n) => (u(), g(L, {
+    return (l, n) => (r(), g(E, {
       critical: a.value,
       variant: e.variant,
       condensed: e.condensed,
       disabled: e.disabled,
       inverse: e.inverse,
-      class: U(["b-loading-button", f.value]),
-      onClickCapture: z(i, ["stop"])
-    }, G({
+      class: U(["b-loading-button", c.value]),
+      onClickCapture: X(i, ["stop"])
+    }, j({
       default: b(() => [
-        D(r.$slots, "default", {}, void 0, !0)
+        P(l.$slots, "default", {}, void 0, !0)
       ]),
       _: 2
     }, [
       e.state === "start" && p(m)("iconLeft") ? {
         name: "iconLeft",
         fn: b(() => [
-          D(r.$slots, "iconLeft", {}, void 0, !0)
+          P(l.$slots, "iconLeft", {}, void 0, !0)
         ]),
         key: "0"
       } : e.state !== "start" ? {
         name: "iconLeft",
         fn: b(() => [
-          V("span", ze, [
-            e.state === "fail" ? (u(), g(p(Ne), {
+          V("span", xe, [
+            e.state === "fail" ? (r(), g(p(Pe), {
               key: 0,
-              "svg-title": p(l)("failed")
-            }, null, 8, ["svg-title"])) : e.state === "success" ? (u(), g(p(Re), {
+              "svg-title": p(u)("failed")
+            }, null, 8, ["svg-title"])) : e.state === "success" ? (r(), g(p(De), {
               key: 1,
-              "svg-title": p(l)("succeded")
-            }, null, 8, ["svg-title"])) : e.state === "loading" ? (u(), g(p(we), {
+              "svg-title": p(u)("succeded")
+            }, null, 8, ["svg-title"])) : e.state === "loading" ? (r(), g(p(Re), {
               key: 2,
               small: "",
-              inverse: c.value
-            }, null, 8, ["inverse"])) : B("", !0)
+              inverse: f.value
+            }, null, 8, ["inverse"])) : O("", !0)
           ])
         ]),
         key: "1"
       } : void 0
     ]), 1032, ["critical", "variant", "condensed", "disabled", "inverse", "class"]));
   }
-}), xe = /* @__PURE__ */ w(Qe, [["__scopeId", "data-v-e68a786b"]]), et = {}, tt = /* @__PURE__ */ M({
-  ...et,
+}), nt = /* @__PURE__ */ M(tt, [["__scopeId", "data-v-e68a786b"]]), ot = {}, st = /* @__PURE__ */ w({
+  ...ot,
   __name: "toggle-button",
   props: {
     /**
      * Reduces sizing of button
      */
     condensed: {
-      type: L.props.condensed.type,
+      type: E.props.condensed.type,
       default: !1
     },
     /**
      * Disables button functonality
      */
     disabled: {
-      type: L.props.disabled.type,
+      type: E.props.disabled.type,
       default: !1
     },
     /**
@@ -174,9 +176,9 @@ const Ie = {
      * @values primary, secondary, tertiary
      */
     variant: {
-      type: L.props.variant.type,
+      type: E.props.variant.type,
       default: "primary",
-      validator: L.props.variant.validator
+      validator: E.props.variant.validator
     },
     /**
      * The state of the button whether it is toggled or not.
@@ -188,16 +190,16 @@ const Ie = {
   },
   emits: ["click", "update:toggled"],
   setup(e, { emit: t }) {
-    const o = e, s = t, d = _(
-      () => o.variant === "tertiary" ? "tertiary-with-background" : o.variant
+    const s = e, o = t, d = _(
+      () => s.variant === "tertiary" ? "tertiary-with-background" : s.variant
     ), m = _(() => ({
-      "b-toggle-button--condensed": o == null ? void 0 : o.condensed,
-      [`b-toggle-button--${d.value}-toggled`]: o.toggled,
-      "b-toggle-button--inverse": o.inverse
-    })), l = (a) => {
-      a.stopPropagation(), o != null && o.disabled || (s("click", a), s("update:toggled", !o.toggled));
-    }, f = Q(), c = (a) => ({ key: a });
-    return (a, i) => (u(), g(L, Y({ class: "b-toggle-button" }, a.$attrs, {
+      "b-toggle-button--condensed": s == null ? void 0 : s.condensed,
+      [`b-toggle-button--${d.value}-toggled`]: s.toggled,
+      "b-toggle-button--inverse": s.inverse
+    })), u = (a) => {
+      a.stopPropagation(), s != null && s.disabled || (o("click", a), o("update:toggled", !s.toggled));
+    }, c = Q(), f = (a) => ({ key: a });
+    return (a, i) => (r(), g(E, H({ class: "b-toggle-button" }, a.$attrs, {
       "aria-expanded": `${e.toggled}`,
       "aria-pressed": `${e.toggled}`,
       condensed: e.condensed,
@@ -205,19 +207,19 @@ const Ie = {
       disabled: e.disabled,
       inverse: e.inverse,
       variant: d.value,
-      onClickCapture: z(l, ["stop"])
-    }), G({ _: 2 }, [
-      x(p(f), (r, n) => ({
+      onClickCapture: X(u, ["stop"])
+    }), j({ _: 2 }, [
+      x(p(c), (l, n) => ({
         name: n,
         fn: b(() => [
-          D(a.$slots, n, Be($e(c(n))), void 0, !0)
+          P(a.$slots, n, Ee(Te(f(n))), void 0, !0)
         ])
       }))
     ]), 1040, ["aria-expanded", "aria-pressed", "condensed", "class", "disabled", "inverse", "variant"]));
   }
-}), nt = /* @__PURE__ */ w(tt, [["__scopeId", "data-v-f1b10e5f"]]), ot = M({
+}), it = /* @__PURE__ */ M(st, [["__scopeId", "data-v-f1b10e5f"]]), at = w({
   name: "bento-popover-dismiss-button",
-  components: { BentoButton: L, CrossIcon: De },
+  components: { BentoButton: E, CrossIcon: We },
   props: {
     onImage: {
       type: Boolean,
@@ -231,21 +233,21 @@ const Ie = {
     };
   }
 });
-function st(e, t, o, s, d, m) {
-  const l = T("cross-icon"), f = T("bento-button");
-  return u(), g(f, {
+function lt(e, t, s, o, d, m) {
+  const u = T("cross-icon"), c = T("bento-button");
+  return r(), g(c, {
     class: U(e.conditionalClass),
     variant: "tertiary",
-    onClick: t[0] || (t[0] = (c) => e.$emit("click"))
+    onClick: t[0] || (t[0] = (f) => e.$emit("click"))
   }, {
     iconLeft: b(() => [
-      E(l, { "svg-title": "dismiss" })
+      S(u, { "svg-title": "dismiss" })
     ]),
     _: 1
   }, 8, ["class"]);
 }
-const ce = /* @__PURE__ */ w(ot, [["render", st], ["__scopeId", "data-v-424ecdaa"]]), it = M({
-  components: { BentoTypography: _e },
+const ce = /* @__PURE__ */ M(at, [["render", lt], ["__scopeId", "data-v-424ecdaa"]]), rt = w({
+  components: { BentoTypography: Ce },
   props: {
     /**
      * Indicates if the popover contains an image.
@@ -257,50 +259,50 @@ const ce = /* @__PURE__ */ w(ot, [["render", st], ["__scopeId", "data-v-424ecdaa
     title: { type: String, default: null }
   },
   setup(e) {
-    const t = _(() => !e.isImageTitle), o = _(
+    const t = _(() => !e.isImageTitle), s = _(
       () => e.isImageTitle ? re.SUBTITLE : re.BODY
     );
     return {
       // Values
       isStrongest: t,
-      titleVariant: o
+      titleVariant: s
     };
   }
 });
-function at(e, t, o, s, d, m) {
-  const l = T("bento-typography");
-  return u(), g(l, {
+function ut(e, t, s, o, d, m) {
+  const u = T("bento-typography");
+  return r(), g(u, {
     strongest: e.isStrongest,
     variant: e.titleVariant,
     el: "span"
   }, {
     default: b(() => [
-      H(j(e.title), 1)
+      Y(G(e.title), 1)
     ]),
     _: 1
   }, 8, ["strongest", "variant"]);
 }
-const lt = /* @__PURE__ */ w(it, [["render", at]]), rt = (e, t, o = {}) => {
-  let s;
+const dt = /* @__PURE__ */ M(rt, [["render", ut]]), ct = (e, t, s = {}) => {
+  let o;
   ee(() => {
-    s = Ve(e, t, o);
+    o = Ye(e, t, s);
   }), pe(() => {
-    s && (s(), s = null);
+    o && (o(), o = null);
   });
-}, ut = /* @__PURE__ */ Symbol("input field popover injection key"), dt = /* @__PURE__ */ Symbol("input field popover injection key"), ct = /* @__PURE__ */ Symbol("popover offset injection key"), ft = {
+}, ft = /* @__PURE__ */ Symbol("input field popover injection key"), mt = /* @__PURE__ */ Symbol("input field popover injection key"), pt = /* @__PURE__ */ Symbol("popover offset injection key"), vt = {
   key: 0,
   class: "b-popover__image"
-}, mt = {
+}, bt = {
   key: 0,
   class: "b-popover__image-dismiss-button"
-}, pt = {
+}, ht = {
   key: 1,
   class: "b-popover__header"
-}, vt = { class: "b-popover__header-title" }, bt = { key: 0 }, ht = {
+}, yt = { class: "b-popover__header-title" }, gt = { key: 0 }, _t = {
   key: 3,
   class: "b-popover__footer"
-}, yt = {}, gt = /* @__PURE__ */ M({
-  ...yt,
+}, Ct = {}, kt = /* @__PURE__ */ w({
+  ...Ct,
   __name: "popover",
   props: {
     actions: { default: void 0 },
@@ -326,88 +328,88 @@ const lt = /* @__PURE__ */ w(it, [["render", at]]), rt = (e, t, o = {}) => {
   },
   emits: ["dismiss", "placement"],
   setup(e, { emit: t }) {
-    const s = e, d = t, m = Q(), l = Ee(), f = _(() => {
+    const o = e, d = t, m = Q(), u = we(), c = _(() => {
       var y;
       return {
-        id: (y = l.id) == null ? void 0 : y.toString(),
-        role: (l == null ? void 0 : l.role) === null ? void 0 : Fe.POPOVER
+        id: (y = u.id) == null ? void 0 : y.toString(),
+        role: (u == null ? void 0 : u.role) === null ? void 0 : Ue.POPOVER
       };
-    }), c = K(ct, 2), a = v(l["aria-label"]), { ariaLabel: i, title: r } = Se(s), n = Ue({
+    }), f = K(pt, 2), a = v(u["aria-label"]), { ariaLabel: i, title: l } = Me(o), n = Ge({
       ariaLabel: a.value,
       // TODO: take this line away when the aria-label props is removed
       label: i,
-      defaultFallback: r
-    }), h = K(dt, !1) || K(ut, !1), C = _(() => ({
-      "b-popover--small": s.small && !s.large,
-      "b-popover--with-divider": !!s.divider,
-      "b-popover--large": s.large && !s.small,
-      "b-popover--fit-content": s.fitContent,
-      "b-popover--without-space": s.withoutSpace,
-      "b-popover--overflow-visible": s.overflowVisible || h
+      defaultFallback: l
+    }), h = K(mt, !1) || K(ft, !1), k = _(() => ({
+      "b-popover--small": o.small && !o.large,
+      "b-popover--with-divider": !!o.divider,
+      "b-popover--large": o.large && !o.small,
+      "b-popover--fit-content": o.fitContent,
+      "b-popover--without-space": o.withoutSpace,
+      "b-popover--overflow-visible": o.overflowVisible || h
     })), $ = _(() => ({
-      "b-popover__content--with-title": !!s.title
-    })), R = () => d("dismiss"), P = ae(m);
-    return (y, F) => (u(), g(ve, { name: "b-popover__animation" }, {
+      "b-popover__content--with-title": !!o.title
+    })), A = () => d("dismiss"), D = ae(m);
+    return (y, F) => (r(), g(ve, { name: "b-popover__animation" }, {
       default: b(() => [
-        y.open ? (u(), g(p(We), {
+        y.open ? (r(), g(p(Ve), {
           key: 0,
-          id: f.value.id,
-          "aria-role": f.value.role,
+          id: c.value.id,
+          "aria-role": c.value.role,
           "aria-label": p(n),
           arrow: { classes: ["b-popover__arrow"] },
           "disabled-focus-trap": y.disableFocusTrap,
           "trap-all": y.trapAll,
           "trap-all-options": y.trapAllOptions,
-          class: U([C.value, "b-popover"]),
+          class: U([k.value, "b-popover"]),
           "fallback-position": y.fallbackPosition,
           "fixed-positioning": y.fixedPositioning,
-          offset: [0, p(c)],
+          offset: [0, p(f)],
           position: y.position,
           "target-element": y.targetElement,
           onPlacement: F[0] || (F[0] = (J) => y.$emit("placement", J))
         }, {
           default: b(() => [
-            p(P)("image") ? (u(), k("div", ft, [
-              y.dismissible ? (u(), k("div", mt, [
-                E(ce, {
+            p(D)("image") ? (r(), I("div", vt, [
+              y.dismissible ? (r(), I("div", bt, [
+                S(ce, {
                   "on-image": "",
-                  onClick: R
+                  onClick: A
                 })
-              ])) : B("", !0),
-              D(y.$slots, "image", {}, void 0, !0)
-            ])) : B("", !0),
-            p(r) ? (u(), k("div", pt, [
-              V("div", vt, [
-                p(P)("headerIcon") ? D(y.$slots, "headerIcon", { key: 0 }, void 0, !0) : B("", !0),
-                E(lt, {
-                  title: p(r),
-                  "is-image-title": !!p(P)("image")
+              ])) : O("", !0),
+              P(y.$slots, "image", {}, void 0, !0)
+            ])) : O("", !0),
+            p(l) ? (r(), I("div", ht, [
+              V("div", yt, [
+                p(D)("headerIcon") ? P(y.$slots, "headerIcon", { key: 0 }, void 0, !0) : O("", !0),
+                S(dt, {
+                  title: p(l),
+                  "is-image-title": !!p(D)("image")
                 }, null, 8, ["title", "is-image-title"])
               ]),
-              y.dismissible && !p(P)("image") ? (u(), k("div", bt, [
-                E(ce, { onClick: R })
-              ])) : B("", !0)
-            ])) : B("", !0),
-            p(P)("default") ? (u(), k("div", {
+              y.dismissible && !p(D)("image") ? (r(), I("div", gt, [
+                S(ce, { onClick: A })
+              ])) : O("", !0)
+            ])) : O("", !0),
+            p(D)("default") ? (r(), I("div", {
               key: 2,
               class: U(["b-popover__content", $.value])
             }, [
-              D(y.$slots, "default", {}, void 0, !0)
-            ], 2)) : B("", !0),
-            y.actions ? (u(), k("div", ht, [
-              E(xt, {
+              P(y.$slots, "default", {}, void 0, !0)
+            ], 2)) : O("", !0),
+            y.actions ? (r(), I("div", _t, [
+              S(nn, {
                 actions: y.actions,
                 layout: y.actionsLayout
               }, null, 8, ["actions", "layout"])
-            ])) : B("", !0)
+            ])) : O("", !0)
           ]),
           _: 3
-        }, 8, ["id", "aria-role", "aria-label", "disabled-focus-trap", "trap-all", "trap-all-options", "class", "fallback-position", "fixed-positioning", "offset", "position", "target-element"])) : B("", !0)
+        }, 8, ["id", "aria-role", "aria-label", "disabled-focus-trap", "trap-all", "trap-all-options", "class", "fallback-position", "fixed-positioning", "offset", "position", "target-element"])) : O("", !0)
       ]),
       _: 3
     }));
   }
-}), _t = /* @__PURE__ */ w(gt, [["__scopeId", "data-v-84ebb43a"]]), Ct = /* @__PURE__ */ Symbol("modal injection key"), It = /* @__PURE__ */ Symbol("sidepanel children element injection key"), kt = /* @__PURE__ */ Symbol("modal fullscreen children element injection key"), Ot = M({
+}), It = /* @__PURE__ */ M(kt, [["__scopeId", "data-v-84ebb43a"]]), Bt = /* @__PURE__ */ Symbol("modal injection key"), Ot = /* @__PURE__ */ Symbol("sidepanel children element injection key"), $t = /* @__PURE__ */ Symbol("modal fullscreen children element injection key"), St = w({
   name: "teleport",
   props: {
     to: {
@@ -426,7 +428,7 @@ const lt = /* @__PURE__ */ w(it, [["render", at]]), rt = (e, t, o = {}) => {
     waiting: !1,
     observer: null,
     parent: null,
-    isVue2: Ce
+    isVue2: ke
   }),
   computed: {
     classes() {
@@ -435,7 +437,7 @@ const lt = /* @__PURE__ */ w(it, [["render", at]]), rt = (e, t, o = {}) => {
     defaultTo() {
       if (this.to)
         return this.to;
-      const e = K(Ct, "") || K(kt, "") || K(It, "");
+      const e = K(Bt, "") || K($t, "") || K(Ot, "");
       return e ? `#${e}` : "body";
     }
   },
@@ -476,11 +478,11 @@ const lt = /* @__PURE__ */ w(it, [["render", at]]), rt = (e, t, o = {}) => {
     },
     onMutations(e) {
       let t = !1;
-      for (let o = 0; o < e.length; o++) {
-        const s = e[o], d = Array.from(s.addedNodes).filter(
+      for (let s = 0; s < e.length; s++) {
+        const o = e[s], d = Array.from(o.addedNodes).filter(
           (m) => !this.nodes.includes(m)
         );
-        Array.from(s.removedNodes).includes(this.parent) ? (this.disable(), this.waiting = !this.disabled) : this.waiting && d.length > 0 && (t = !0);
+        Array.from(o.removedNodes).includes(this.parent) ? (this.disable(), this.waiting = !this.disabled) : this.waiting && d.length > 0 && (t = !0);
       }
       t && this.move();
     },
@@ -491,7 +493,7 @@ const lt = /* @__PURE__ */ w(it, [["render", at]]), rt = (e, t, o = {}) => {
         attributes: !1,
         characterData: !1
       }), !this.childObserver && (this.childObserver = new MutationObserver((e) => {
-        e.find((o) => o.target === this.$el) && (this.nodes.forEach((o) => o.parentNode && o.parentNode.removeChild(o)), this.nodes = this.getComponentChildrenNode(), this.maybeMove());
+        e.find((s) => s.target === this.$el) && (this.nodes.forEach((s) => s.parentNode && s.parentNode.removeChild(s)), this.nodes = this.getComponentChildrenNode(), this.maybeMove());
       }), this.childObserver.observe(this.$el, {
         childList: !0,
         subtree: !1,
@@ -506,40 +508,40 @@ const lt = /* @__PURE__ */ w(it, [["render", at]]), rt = (e, t, o = {}) => {
       return [];
     }
   }
-}), Bt = /* @__PURE__ */ M({
-  ...Ot,
+}), Lt = /* @__PURE__ */ w({
+  ...St,
   setup(e) {
-    return (t, o) => p(Ce) ? (u(), k("div", {
+    return (t, s) => p(ke) ? (r(), I("div", {
       key: 0,
       class: U(t.classes)
     }, [
-      D(t.$slots, "default", {}, void 0, !0)
-    ], 2)) : (u(), g(Le, {
+      P(t.$slots, "default", {}, void 0, !0)
+    ], 2)) : (r(), g(Ne, {
       key: 1,
       to: t.defaultTo,
       where: t.where,
       disabled: t.disabled,
       class: U(t.classes)
     }, [
-      D(t.$slots, "default", {}, void 0, !0)
+      P(t.$slots, "default", {}, void 0, !0)
     ], 8, ["to", "where", "disabled", "class"]));
   }
-}), $t = /* @__PURE__ */ w(Bt, [["__scopeId", "data-v-acbda3aa"]]);
+}), Et = /* @__PURE__ */ M(Lt, [["__scopeId", "data-v-acbda3aa"]]);
 let fe = 0;
-const Et = {
+const Tt = {
   beforeCreate() {
     this.uuid = fe.toString(), fe += 1;
   }
-}, St = { key: 0 };
-function Lt(e, t, o, s, d, m) {
-  return u(), k("svg", Y({ role: "img" }, e.$attrs, {
+}, wt = { key: 0 };
+function Mt(e, t, s, o, d, m) {
+  return r(), I("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"] ? (u(), k("title", St, j(e.$attrs["svg-title"]), 1)) : B("", !0),
+    e.$attrs["svg-title"] ? (r(), I("title", wt, G(e.$attrs["svg-title"]), 1)) : O("", !0),
     t[0] || (t[0] = V("path", {
       fill: "#001222",
       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"
@@ -554,9 +556,9 @@ function Lt(e, t, o, s, d, m) {
     }, null, -1))
   ], 16);
 }
-const Tt = /* @__PURE__ */ w(Et, [["render", Lt]]), Mt = M({
+const Nt = /* @__PURE__ */ M(Tt, [["render", Mt]]), At = w({
   name: "menu-item",
-  components: { BaseButton: Ye, BentoTypography: _e, ChevronRightIcon: He },
+  components: { BaseButton: ze, BentoTypography: Ce, ChevronRightIcon: qe },
   props: {
     /**
      * menu-item text that gets displayed as the main label
@@ -626,60 +628,60 @@ const Tt = /* @__PURE__ */ w(Et, [["render", Lt]]), Mt = M({
   },
   emits: [de.CLICK],
   setup(e, { emit: t }) {
-    const s = _(() => ({
+    const o = _(() => ({
       "b-menu-item--critical": e.critical,
       "b-menu-item--indent": e.indent
-    })), d = _(() => Je(e.secondaryText, 10));
+    })), d = _(() => Xe(e.secondaryText, 10));
     return {
       // Values
-      conditionalClasses: s,
+      conditionalClasses: o,
       computedSecondaryText: d,
       // Methods
-      onClick: (l) => {
-        l.stopPropagation(), e.handler(), t(de.CLICK);
+      onClick: (u) => {
+        u.stopPropagation(), e.handler(), t(de.CLICK);
       }
     };
   }
 });
-function wt(e, t, o, s, d, m) {
-  const l = T("bento-typography"), f = T("chevron-right-icon"), c = T("base-button");
-  return u(), g(c, {
+function Rt(e, t, s, o, d, m) {
+  const u = T("bento-typography"), c = T("chevron-right-icon"), f = T("base-button");
+  return r(), g(f, {
     class: U(["b-menu-item", e.conditionalClasses]),
     role: "menuitem",
     disabled: e.disabled,
     tabindex: "-1",
     onClick: e.onClick
-  }, G({
+  }, j({
     default: b(() => [
-      E(l, {
+      S(u, {
         el: "span",
         variant: "body",
         stronger: e.isTitle,
         class: "b-menu-item__primary-text"
       }, {
         default: b(() => [
-          H(j(e.text), 1)
+          Y(G(e.text), 1)
         ]),
         _: 1
       }, 8, ["stronger"]),
-      e.computedSecondaryText ? (u(), g(l, {
+      e.computedSecondaryText ? (r(), g(u, {
         key: 0,
         el: "span",
         variant: "body",
         class: "b-menu-item__secondary-text"
       }, {
         default: b(() => [
-          H(j(e.computedSecondaryText), 1)
+          Y(G(e.computedSecondaryText), 1)
         ]),
         _: 1
-      })) : B("", !0)
+      })) : O("", !0)
     ]),
     _: 2
   }, [
     e.icon ? {
       name: "iconLeft",
       fn: b(() => [
-        (u(), g(X(e.icon), {
+        (r(), g(z(e.icon), {
           class: "b-menu-item__icon-left",
           "aria-hidden": "true"
         }))
@@ -689,45 +691,53 @@ function wt(e, t, o, s, d, m) {
     e.chevron ? {
       name: "iconRight",
       fn: b(() => [
-        E(f, { "aria-hidden": "true" })
+        S(c, { "aria-hidden": "true" })
       ]),
       key: "1"
     } : void 0
   ]), 1032, ["class", "disabled", "onClick"]);
 }
-const ke = /* @__PURE__ */ w(Mt, [["render", wt], ["__scopeId", "data-v-9dace5ac"]]);
-({ ...Ke });
+const Be = /* @__PURE__ */ M(At, [["render", Rt], ["__scopeId", "data-v-9dace5ac"]]);
+({ ...je });
 var W = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(W || {});
-const Nt = /* @__PURE__ */ Symbol("menu registering injection key"), Rt = {
+const Pt = /* @__PURE__ */ Symbol("menu registering injection key"), Dt = {
   name: "bento-menu-list-container"
-}, At = /* @__PURE__ */ M({
-  ...Rt,
+}, Ft = /* @__PURE__ */ w({
+  ...Dt,
   setup(e) {
-    const t = v(), o = v({}), s = K(Nt, !1);
-    if (s) {
-      const { registerMenuContainerElement: d } = s;
-      d(t), o.value = {
-        mouseleave: s == null ? void 0 : s.menuMouseLeave
+    const t = v(), s = v({}), o = K(Pt, !1);
+    if (o) {
+      const { registerMenuContainerElement: d } = o;
+      d(t), s.value = {
+        mouseleave: o == null ? void 0 : o.menuMouseLeave
       };
     }
-    return (d, m) => (u(), k("div", Y({
+    return (d, m) => (r(), I("div", H({
       ref_key: "menuListContainerRef",
       ref: t,
       class: "b-menu-list-container",
       "data-testid": "menu-list-container"
-    }, ie(o.value, !0)), [
-      D(d.$slots, "default", {}, void 0, !0)
+    }, ie(s.value, !0)), [
+      P(d.$slots, "default", {}, void 0, !0)
     ], 16));
   }
-}), Oe = /* @__PURE__ */ w(At, [["__scopeId", "data-v-9ef14d73"]]), le = {
+}), Oe = /* @__PURE__ */ M(Ft, [["__scopeId", "data-v-9ef14d73"]]), le = {
   "en-US": {
     backButton: "Go back",
     menuButton: "Open menu"
+  },
+  "ja-JP": {
+    backButton: "戻る",
+    menuButton: "メニューを開く"
+  },
+  "pt-BR": {
+    backButton: "voltar",
+    menuButton: "Abrir menu"
   }
-}, Dt = M({
+}, Wt = w({
   i18n: { messages: le },
   name: "sub-menu-item-list",
-  components: { BentoDivider: ge, MenuItem: ke, MenuListContainer: Oe },
+  components: { BentoDivider: _e, MenuItem: Be, MenuListContainer: Oe },
   props: {
     items: {
       type: Array,
@@ -740,9 +750,9 @@ const Nt = /* @__PURE__ */ Symbol("menu registering injection key"), Rt = {
   },
   emits: [W.CLOSE, W.BACK],
   setup(e, { emit: t }) {
-    const o = v(null), s = v(0), d = v(e.items.length), m = () => t(W.CLOSE), l = () => t(W.BACK), f = _(() => {
+    const s = v(null), o = v(0), d = v(e.items.length), m = () => t(W.CLOSE), u = () => t(W.BACK), c = _(() => {
       var n;
-      const r = (n = e.items) == null ? void 0 : n.map((h) => ({
+      const l = (n = e.items) == null ? void 0 : n.map((h) => ({
         ...h,
         indent: !h.icon,
         isTitle: !1,
@@ -757,64 +767,64 @@ const Nt = /* @__PURE__ */ Symbol("menu registering injection key"), Rt = {
           isTitle: !0,
           disabled: !1,
           indent: !1,
-          handler: l,
-          clickHandler: l,
+          handler: u,
+          clickHandler: u,
           addDivider: !0
         },
-        ...r
+        ...l
       ];
-    }), c = async () => {
-      var r, n, h, C, $;
-      ($ = (C = (h = (n = (r = o.value) == null ? void 0 : r.children) == null ? void 0 : n[s.value]) == null ? void 0 : h.children) == null ? void 0 : C[0]) == null || $.focus();
+    }), f = async () => {
+      var l, n, h, k, $;
+      ($ = (k = (h = (n = (l = s.value) == null ? void 0 : l.children) == null ? void 0 : n[o.value]) == null ? void 0 : h.children) == null ? void 0 : k[0]) == null || $.focus();
     };
     ee(async () => {
-      setTimeout(() => c(), 150);
+      setTimeout(() => f(), 150);
     });
     const a = () => {
-      s.value > 0 ? (s.value -= 1, f.value[s.value].disabled && a()) : s.value = d.value, c();
+      o.value > 0 ? (o.value -= 1, c.value[o.value].disabled && a()) : o.value = d.value, f();
     }, i = () => {
-      s.value < d.value ? (s.value += 1, f.value[s.value].disabled && i()) : s.value = 0, c();
+      o.value < d.value ? (o.value += 1, c.value[o.value].disabled && i()) : o.value = 0, f();
     };
     return {
       // Enums
       BentoMenuEvent: W,
       // Values
-      subMenuItemListRefLocal: o,
-      subMenuFocusedIndex: s,
+      subMenuItemListRefLocal: s,
+      subMenuFocusedIndex: o,
       ChevronLeftIcon: ue,
-      computedItems: f,
+      computedItems: c,
       // Methods
       closeMenu: m,
-      onBackButton: l,
+      onBackButton: u,
       focusPrevious: a,
       focusNext: i
     };
   }
 });
-function Pt(e, t, o, s, d, m) {
-  const l = T("menu-item"), f = T("bento-divider"), c = T("menu-list-container");
-  return u(), g(ve, {
+function Kt(e, t, s, o, d, m) {
+  const u = T("menu-item"), c = T("bento-divider"), f = T("menu-list-container");
+  return r(), g(ve, {
     name: "b-sub-menu-item-list__transition",
     appear: ""
   }, {
     default: b(() => [
-      E(c, { class: "b-sub-menu-item-list" }, {
+      S(f, { class: "b-sub-menu-item-list" }, {
         default: b(() => [
           V("ul", {
             ref: "subMenuItemListRefLocal",
             role: "menu",
             class: "b-sub-menu-item-list__list",
             onKeydown: [
-              t[0] || (t[0] = N(z((...a) => e.focusNext && e.focusNext(...a), ["stop"]), ["down"])),
-              t[1] || (t[1] = N(z((...a) => e.focusPrevious && e.focusPrevious(...a), ["stop"]), ["up"])),
-              t[2] || (t[2] = N(z((...a) => e.onBackButton && e.onBackButton(...a), ["stop"]), ["esc"]))
+              t[0] || (t[0] = N(X((...a) => e.focusNext && e.focusNext(...a), ["stop"]), ["down"])),
+              t[1] || (t[1] = N(X((...a) => e.focusPrevious && e.focusPrevious(...a), ["stop"]), ["up"])),
+              t[2] || (t[2] = N(X((...a) => e.onBackButton && e.onBackButton(...a), ["stop"]), ["esc"]))
             ]
           }, [
-            (u(!0), k(Z, null, x(e.computedItems, (a, i) => (u(), k("li", {
+            (r(!0), I(Z, null, x(e.computedItems, (a, i) => (r(), I("li", {
               key: `sub-menu-item-list-item-${i}`,
               role: "none"
             }, [
-              E(l, {
+              S(u, {
                 text: a.text,
                 handler: a.handler,
                 "secondary-text": a.secondaryText,
@@ -826,10 +836,10 @@ function Pt(e, t, o, s, d, m) {
                 tabindex: i === e.subMenuFocusedIndex ? "0" : "-1",
                 onClick: a.clickHandler
               }, null, 8, ["text", "handler", "secondary-text", "icon", "is-title", "disabled", "critical", "indent", "tabindex", "onClick"]),
-              a.addDivider ? (u(), g(f, {
+              a.addDivider ? (r(), g(c, {
                 key: 0,
                 class: "b-sub-menu-item-list__divider"
-              })) : B("", !0)
+              })) : O("", !0)
             ]))), 128))
           ], 544)
         ]),
@@ -839,34 +849,41 @@ function Pt(e, t, o, s, d, m) {
     _: 1
   });
 }
-const Ft = /* @__PURE__ */ w(Dt, [["render", Pt], ["__scopeId", "data-v-e1de172e"]]);
-function Wt(e, t, o) {
-  const m = v(0), l = v(0), f = (a) => {
+const Ut = /* @__PURE__ */ M(Wt, [["render", Kt], ["__scopeId", "data-v-e1de172e"]]), $e = 350, Se = 150;
+function Le(e) {
+  return Math.max(Se, Math.min(e, $e));
+}
+function Vt(e, t, s, o) {
+  const d = v(0), m = v(0), u = (a) => {
     if (!a || !a.parentElement)
       return;
-    const i = a.parentElement, r = a.cloneNode(!0);
-    r.style.position = "absolute", r.style.visibility = "hidden", i.appendChild(r), r.style.width = "max-content";
-    const n = r.offsetWidth, h = Math.max(150, Math.min(n, 350));
-    m.value = h, r.style.width = `${h}px`;
-    const C = r.offsetHeight;
-    l.value = C, i.removeChild(r), l.value = C;
+    const i = a.parentElement, l = a.cloneNode(!0);
+    l.style.position = "absolute", l.style.visibility = "hidden", i.appendChild(l), l.style.width = "max-content";
+    const n = l.offsetWidth, h = Math.max(Se, Math.min(n, $e));
+    d.value = h, l.style.width = `${h}px`;
+    const k = l.offsetHeight;
+    m.value = k, i.removeChild(l), m.value = k;
   };
-  return be([t, o], async ([a]) => {
-    var i, r;
+  be([t, s], async ([a]) => {
+    var i, l;
     if (a !== null) {
       await te();
-      const n = (r = (i = e.value) == null ? void 0 : i[0]) == null ? void 0 : r.$el;
-      n && f(n);
+      const n = (l = (i = e.value) == null ? void 0 : i[0]) == null ? void 0 : l.$el;
+      n && u(n);
     } else
-      m.value = 0, l.value = 0;
-  }), { computedStyle: _(() => {
-    const a = { width: "max-content" };
-    return o.value && (l.value > 0 && (a.height = `${l.value}px`), m.value > 0 && (a.width = `${m.value}px`)), a;
+      d.value = 0, m.value = 0;
+  });
+  const c = _(() => o != null && o.value ? Le(o.value) : 0);
+  return { computedStyle: _(() => {
+    const a = {
+      width: c.value > 0 ? `${c.value}px` : "max-content"
+    };
+    return s.value && (m.value > 0 && (a.height = `${m.value}px`), d.value > 0 && (a.width = `${d.value}px`)), a;
   }) };
 }
-const Kt = M({
+const jt = w({
   name: "menu-item-list",
-  components: { BentoDivider: ge, MenuItem: ke, MenuListContainer: Oe, SubMenuItemList: Ft },
+  components: { BentoDivider: _e, MenuItem: Be, MenuListContainer: Oe, SubMenuItemList: Ut },
   props: {
     /**
      * The data to be displayed in the list
@@ -895,69 +912,81 @@ const Kt = M({
     closeMenuOnItemSelect: {
       type: Boolean,
       default: !0
+    },
+    /**
+     * The custom popover width if one has been set
+     */
+    popoverWidth: {
+      type: Number,
+      default: null
     }
   },
   emits: [W.CLOSE, "menu-item-click"],
-  setup(e, { emit: t, expose: o }) {
-    const s = v(null), d = v(null), m = v(null), l = v(null), f = v(!1), c = v(null), a = v(e.focusLastElement ? e.data.length - 1 : 0), i = v(0), r = v(e.data.length - 1), n = _(() => e.data.some((O) => O.icon)), h = _(() => e.indentItems || n.value ? e.data.map((O) => {
-      let S = !1;
-      return O.icon || (S = !0), {
-        ...O,
-        indent: S
+  setup(e, { emit: t, expose: s }) {
+    const o = v(null), d = v(null), m = v(null), u = v(null), c = v(!1), f = v(null), a = v(e.focusLastElement ? e.data.length - 1 : 0), i = v(0), l = v(e.data.length - 1), n = _(() => e.data.some((B) => B.icon)), h = _(() => e.indentItems || n.value ? e.data.map((B) => {
+      let L = !1;
+      return B.icon || (L = !0), {
+        ...B,
+        indent: L
       };
-    }) : e.data), C = async () => {
-      var O, S, I;
-      await te(), (I = (S = (O = d.value) == null ? void 0 : O.children[a.value]) == null ? void 0 : S.children[0]) == null || I.focus();
-    }, $ = () => t(W.CLOSE), R = (O, S) => {
-      if (O.items) {
-        c.value = S, f.value = !0;
+    }) : e.data), k = async () => {
+      var B, L, C;
+      await te(), (C = (L = (B = d.value) == null ? void 0 : B.children[a.value]) == null ? void 0 : L.children[0]) == null || C.focus();
+    }, $ = () => t(W.CLOSE), A = (B, L) => {
+      if (B.items) {
+        f.value = L, c.value = !0;
         return;
       }
-      c.value = S, f.value = !1, !O.skipClose && e.closeMenuOnItemSelect !== !1 && $(), t("menu-item-click");
-    }, P = () => {
-      a.value > 0 ? (a.value -= 1, h.value[a.value].disabled && P()) : a.value = r.value, C();
+      f.value = L, c.value = !1, !B.skipClose && e.closeMenuOnItemSelect !== !1 && $(), t("menu-item-click");
+    }, D = () => {
+      a.value > 0 ? (a.value -= 1, h.value[a.value].disabled && D()) : a.value = l.value, k();
     }, y = () => {
-      a.value < r.value ? (a.value += 1, h.value[a.value].disabled && y()) : a.value = 0, C();
-    }, F = (O, S) => {
-      var I;
-      (I = O == null ? void 0 : O.items) != null && I.length && (c.value = S, f.value = !0);
+      a.value < l.value ? (a.value += 1, h.value[a.value].disabled && y()) : a.value = 0, k();
+    }, F = (B, L) => {
+      var C;
+      (C = B == null ? void 0 : B.items) != null && C.length && (f.value = L, c.value = !0);
     }, J = () => {
-      c.value && f.value && (c.value = null, f.value = !1);
+      f.value && c.value && (f.value = null, c.value = !1);
     }, ne = () => {
-      f.value = !1, c.value = null, C();
+      c.value = !1, f.value = null, k();
     };
-    o({
-      focusItem: C
+    s({
+      focusItem: k
     });
-    const { computedStyle: oe } = Wt(l, c, f);
+    const { computedStyle: oe } = Vt(
+      u,
+      f,
+      c,
+      he(e, "popoverWidth")
+    );
     return {
       // Values
       menuItemListRef: d,
       menuItemListWrapperRef: m,
-      subMenuItemListRef: l,
-      menuItemRef: s,
+      subMenuItemListRef: u,
+      menuItemRef: o,
       computedData: h,
       computedStyle: oe,
       focusedIndex: a,
       subMenuFocusedIndex: i,
-      showSubMenu: f,
-      visibleSubMenuIndex: c,
+      showSubMenu: c,
+      visibleSubMenuIndex: f,
       // Methods
-      menuItemClick: R,
+      menuItemClick: A,
       closeMenu: $,
-      focusPrevious: P,
+      focusPrevious: D,
       focusNext: y,
       focusRight: F,
       focusLeft: J,
       onBackButton: ne
     };
   }
-}), Ut = ["onKeydown"];
-function Vt(e, t, o, s, d, m) {
-  const l = T("menu-item"), f = T("bento-divider"), c = T("sub-menu-item-list"), a = T("menu-list-container");
-  return u(), g(a, {
+}), Gt = ["onKeydown"];
+function Yt(e, t, s, o, d, m) {
+  const u = T("menu-item"), c = T("bento-divider"), f = T("sub-menu-item-list"), a = T("menu-list-container");
+  return r(), g(a, {
     ref: "menuItemListWrapperRef",
-    style: he(e.computedStyle)
+    style: ye(e.computedStyle)
   }, {
     default: b(() => [
       V("ul", {
@@ -971,20 +1000,20 @@ function Vt(e, t, o, s, d, m) {
           t[4] || (t[4] = N((...i) => e.closeMenu && e.closeMenu(...i), ["tab"]))
         ]
       }, [
-        (u(!0), k(Z, null, x(e.computedData, (i, r) => {
-          var n, h, C, $;
-          return u(), k("li", {
-            key: `menu-item-${r}`,
+        (r(!0), I(Z, null, x(e.computedData, (i, l) => {
+          var n, h, k, $;
+          return r(), I("li", {
+            key: `menu-item-${l}`,
             ref_for: !0,
             ref: "menuItemRef",
             class: "b-menu-item-list__item",
             role: "none",
             onKeydown: [
-              N((R) => e.focusRight(i, r), ["right"]),
-              t[0] || (t[0] = N((R) => e.focusLeft(), ["left"]))
+              N((A) => e.focusRight(i, l), ["right"]),
+              t[0] || (t[0] = N((A) => e.focusLeft(), ["left"]))
             ]
           }, [
-            E(l, {
+            S(u, {
               text: i.text,
               handler: (n = i.items) != null && n.length ? () => null : i.handler,
               "secondary-text": i.secondaryText,
@@ -993,16 +1022,16 @@ function Vt(e, t, o, s, d, m) {
               disabled: i.disabled,
               critical: i.critical,
               indent: i.indent,
-              tabindex: r === e.subMenuFocusedIndex ? "0" : "-1",
-              "aria-haspopup": !!((C = i.items) != null && C.length),
-              "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === r,
-              onClick: (R) => e.menuItemClick(i, r)
+              tabindex: l === e.subMenuFocusedIndex ? "0" : "-1",
+              "aria-haspopup": !!((k = i.items) != null && k.length),
+              "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === l,
+              onClick: (A) => e.menuItemClick(i, l)
             }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
-            i.addDivider ? (u(), g(f, {
+            i.addDivider ? (r(), g(c, {
               key: 0,
               class: "b-menu-item-list__divider"
-            })) : B("", !0),
-            ($ = i.items) != null && $.length && e.showSubMenu && e.visibleSubMenuIndex === r ? (u(), g(c, {
+            })) : O("", !0),
+            ($ = i.items) != null && $.length && e.showSubMenu && e.visibleSubMenuIndex === l ? (r(), g(f, {
               key: 1,
               ref_for: !0,
               ref: "subMenuItemListRef",
@@ -1010,19 +1039,19 @@ function Vt(e, t, o, s, d, m) {
               title: i.text,
               onBack: e.onBackButton,
               onClose: e.closeMenu
-            }, null, 8, ["items", "title", "onBack", "onClose"])) : B("", !0)
-          ], 40, Ut);
+            }, null, 8, ["items", "title", "onBack", "onClose"])) : O("", !0)
+          ], 40, Gt);
         }), 128))
       ], 544)
     ]),
     _: 1
   }, 8, ["style"]);
 }
-const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb"]]), jt = /* @__PURE__ */ Symbol("menu inverse style injection key"), Ht = {
+const Ht = /* @__PURE__ */ M(jt, [["render", Yt], ["__scopeId", "data-v-7253ab73"]]), Jt = /* @__PURE__ */ Symbol("menu inverse style injection key"), qt = {
   i18n: { messages: le },
   name: "bento-menu"
-}, Yt = /* @__PURE__ */ M({
-  ...Ht,
+}, zt = /* @__PURE__ */ w({
+  ...qt,
   props: {
     button: { default: () => ({
       variant: "secondary"
@@ -1038,40 +1067,42 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
     closeOnClickOutsideOptions: { default: void 0 }
   },
   emits: ["menu-item-click", "click-outside"],
-  setup(e, { expose: t, emit: o }) {
-    var S;
-    const s = e, d = o, m = Q(), l = ae(m), { t: f } = ye({ messages: le }), c = v(null), a = v(null), i = v(!1), r = v(!1), n = v(null), h = Ge("menu"), C = K(jt, v(!1));
-    Te(Ae, C);
+  setup(e, { expose: t, emit: s }) {
+    var L;
+    const o = e, d = s, m = Q(), u = ae(m), { t: c } = ge({ messages: le }), f = v(null), a = v(null), i = v(!1), l = v(!1), n = v(null), h = He("menu"), k = K(Jt, v(!1));
+    Ae(Fe, k);
     const $ = _(() => ({
-      "b-menu--inverse": C.value
-    })), R = _(() => s.menuWidth ? { width: `${s.menuWidth}px` } : null), P = _(() => {
-      if (s != null && s.button)
+      "b-menu--inverse": k.value
+    })), A = _(
+      () => o.menuWidth ? { width: `${Le(o.menuWidth)}px` } : null
+    ), D = _(() => {
+      if (o != null && o.button)
         return {
           variant: "secondary",
-          ...s.button
+          ...o.button
         };
     }), y = () => {
       i.value = !0, d(W.OPEN);
-    }, F = async (I = s.revertFocusToButton) => {
+    }, F = async (C = o.revertFocusToButton) => {
       var q, se;
-      i.value && (i.value = !1, I && (await te(), (se = (q = c.value) == null ? void 0 : q.$el) == null || se.focus()), d(W.CLOSE));
-    }, J = (I) => {
-      I.stopPropagation(), i.value ? F() : y();
-    }, ne = (I) => {
-      I.preventDefault(), r.value = !1, s.disableArrowDownOpeningMenu || y();
-    }, oe = (I) => {
-      I.preventDefault(), r.value = !0, y();
-    }, O = () => {
+      i.value && (i.value = !1, C && (await te(), (se = (q = f.value) == null ? void 0 : q.$el) == null || se.focus()), d(W.CLOSE));
+    }, J = (C) => {
+      C.stopPropagation(), i.value ? F() : y();
+    }, ne = (C) => {
+      C.preventDefault(), l.value = !1, o.disableArrowDownOpeningMenu || y();
+    }, oe = (C) => {
+      C.preventDefault(), l.value = !0, y();
+    }, B = () => {
       d("menu-item-click");
     };
-    return rt(
+    return ct(
       n,
       () => {
         F(), d("click-outside");
       },
       {
-        ...s.closeOnClickOutsideOptions,
-        ignore: [c, ...((S = s.closeOnClickOutsideOptions) == null ? void 0 : S.ignore) ?? []]
+        ...o.closeOnClickOutsideOptions,
+        ignore: [f, ...((L = o.closeOnClickOutsideOptions) == null ? void 0 : L.ignore) ?? []]
       }
     ), t({
       /**
@@ -1079,10 +1110,10 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
        */
       closeMenu: F
     }), ee(() => {
-      l("iconRight") && Pe(
+      u("iconRight") && Ke(
         '"bento-menu" no longer supports the "iconRight" slot. The right-aligned icon is now fixed by design.'
       );
-    }), (I, q) => (u(), k("div", {
+    }), (C, q) => (r(), I("div", {
       class: U([$.value, "b-menu"]),
       "data-testid": "menu",
       onKeydown: [
@@ -1091,49 +1122,49 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
         q[0] || (q[0] = N((se) => F(), ["esc"]))
       ]
     }, [
-      E(nt, Y({
+      S(it, H({
         ref_key: "menuButtonRef",
-        ref: c,
+        ref: f,
         class: "b-menu__toggle-button",
         "aria-haspopup": "true"
-      }, P.value, {
+      }, D.value, {
         "aria-controls": i.value ? p(h) : null,
         toggled: i.value,
-        inverse: p(C),
+        inverse: p(k),
         onClick: J
-      }), G({ _: 2 }, [
-        !p(l)("default") || p(l)("iconLeft") ? {
+      }), j({ _: 2 }, [
+        !p(u)("default") || p(u)("iconLeft") ? {
           name: "iconLeft",
           fn: b(() => [
-            D(I.$slots, "iconLeft", {}, () => [
-              E(p(Tt), {
-                title: p(f)("menuButton")
+            P(C.$slots, "iconLeft", {}, () => [
+              S(p(Nt), {
+                title: p(c)("menuButton")
               }, null, 8, ["title"])
             ], !0)
           ]),
           key: "0"
         } : void 0,
-        p(l)("default") ? {
+        p(u)("default") ? {
           name: "default",
           fn: b(() => [
-            D(I.$slots, "default", {}, void 0, !0)
+            P(C.$slots, "default", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
-        p(l)("default") ? {
+        p(u)("default") ? {
           name: "iconRight",
           fn: b(() => [
-            E(p(je))
+            S(p(Je))
           ]),
           key: "2"
         } : void 0
       ]), 1040, ["aria-controls", "toggled", "inverse"]),
-      c.value ? (u(), g(p($t), {
+      f.value ? (r(), g(p(Et), {
         key: 0,
-        disabled: !I.teleport
+        disabled: !C.teleport
       }, {
         default: b(() => [
-          c.value ? (u(), g(_t, {
+          f.value ? (r(), g(It, {
             key: 0,
             id: p(h),
             ref_key: "popoverRef",
@@ -1141,10 +1172,10 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
             role: null,
             open: i.value,
             class: "b-menu__popover",
-            style: he(R.value),
-            "target-element": c.value,
-            position: I.menuPosition,
-            "fixed-positioning": I.menuFixedPositioning,
+            style: ye(A.value),
+            "target-element": f.value,
+            position: C.menuPosition,
+            "fixed-positioning": C.menuFixedPositioning,
             "fallback-position": [
               "bottom-start",
               "bottom-end",
@@ -1155,61 +1186,62 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
               "left-start",
               "left-end"
             ],
-            teleport: I.teleport,
+            teleport: C.teleport,
             "without-space": ""
           }, {
             default: b(() => [
-              E(Gt, {
+              S(Ht, {
                 ref_key: "menuItemListRef",
                 ref: a,
-                "close-menu-on-item-select": I.closeMenuOnItemSelect,
-                data: I.data,
-                "focus-last-element": r.value,
+                "close-menu-on-item-select": C.closeMenuOnItemSelect,
+                data: C.data,
+                "focus-last-element": l.value,
+                "popover-width": C.menuWidth,
                 onClose: F,
-                onMenuItemClick: O
-              }, null, 8, ["close-menu-on-item-select", "data", "focus-last-element"])
+                onMenuItemClick: B
+              }, null, 8, ["close-menu-on-item-select", "data", "focus-last-element", "popover-width"])
             ]),
             _: 1
-          }, 8, ["id", "open", "style", "target-element", "position", "fixed-positioning", "teleport"])) : B("", !0)
+          }, 8, ["id", "open", "style", "target-element", "position", "fixed-positioning", "teleport"])) : O("", !0)
         ]),
         _: 1
-      }, 8, ["disabled"])) : B("", !0)
+      }, 8, ["disabled"])) : O("", !0)
     ], 34));
   }
-}), Jt = /* @__PURE__ */ w(Yt, [["__scopeId", "data-v-4d921a39"]]), qt = /* @__PURE__ */ Symbol(
+}), Xt = /* @__PURE__ */ M(zt, [["__scopeId", "data-v-eee5aa88"]]), Zt = /* @__PURE__ */ Symbol(
   "button actions with menu container injection key"
-), Xt = 242, me = parseInt(Xe, 10), zt = (e, t, o) => {
-  const s = v(0);
+), Qt = 242, me = parseInt(Qe, 10), xt = (e, t, s) => {
+  const o = v(0);
   let d = null;
-  const { buttonActionsWithMenu: m, menu: l, stackButtons: f } = K(qt, {
+  const { buttonActionsWithMenu: m, menu: u, stackButtons: c } = K(Zt, {
     buttonActionsWithMenu: v(null),
     menu: v(null),
     stackButtons: v(!1)
-  }), c = _(() => m.value ?? e.value), a = _(() => l.value ? [...t.value, l.value.$el] : t.value), i = (r) => {
-    var C;
-    const n = (C = a.value) == null ? void 0 : C.reduce(
-      ($, R) => $ + R.clientWidth + me,
+  }), f = _(() => m.value ?? e.value), a = _(() => u.value ? [...t.value, u.value.$el] : t.value), i = (l) => {
+    var k;
+    const n = (k = a.value) == null ? void 0 : k.reduce(
+      ($, A) => $ + A.clientWidth + me,
       -me - 1
-    ), h = c.value.clientWidth;
-    return r && (s.value = h >= Xt && !f.value ? n : 0), s.value > h;
+    ), h = f.value.clientWidth;
+    return l && (o.value = h >= Qt && !c.value ? n : 0), o.value > h;
   };
   return be(
-    () => o.value,
+    () => s.value,
     () => {
       te(() => {
-        f.value = i(!0);
+        c.value = i(!0);
       });
     },
     { deep: !0 }
   ), ee(() => {
-    d = qe(c.value, () => {
-      f.value = i(s.value === 0);
+    d = Ze(f.value, () => {
+      c.value = i(o.value === 0);
     });
   }), pe(() => {
     d == null || d.disconnect();
-  }), f;
-}, Zt = {}, Qt = /* @__PURE__ */ M({
-  ...Zt,
+  }), c;
+}, en = {}, tn = /* @__PURE__ */ w({
+  ...en,
   __name: "button-actions",
   props: {
     actions: {},
@@ -1217,32 +1249,32 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
     layout: { default: "buttons-end" }
   },
   setup(e) {
-    const t = e, o = v(null), s = v(null), d = zt(o, s, Me(t, "actions")), m = _(() => t.actions.slice().reverse()), l = (i) => {
-      const r = t.actions.length - 1;
-      return i === r ? "primary" : "secondary";
-    }, f = _(() => ({
+    const t = e, s = v(null), o = v(null), d = xt(s, o, he(t, "actions")), m = _(() => t.actions.slice().reverse()), u = (i) => {
+      const l = t.actions.length - 1;
+      return i === l ? "primary" : "secondary";
+    }, c = _(() => ({
       [`b-button-actions--${t.layout}`]: !0,
       "b-button-actions--stacked-buttons": d.value
-    })), c = (i) => (i == null ? void 0 : i.event) !== void 0 ? {
+    })), f = (i) => (i == null ? void 0 : i.event) !== void 0 ? {
       click: i.event
     } : {}, a = (i) => i.iconOnly && (i.iconLeft || i.iconRight || i.icon);
-    return (i, r) => (u(), k("div", {
+    return (i, l) => (r(), I("div", {
       ref_key: "buttonActions",
-      ref: o,
+      ref: s,
       class: "b-button-actions"
     }, [
       V("div", {
-        class: U(["b-button-actions__container-wrapper", f.value]),
+        class: U(["b-button-actions__container-wrapper", c.value]),
         role: "group"
       }, [
-        (u(!0), k(Z, null, x(m.value, (n, h) => (u(), k("div", {
+        (r(!0), I(Z, null, x(m.value, (n, h) => (r(), I("div", {
           key: h,
           ref_for: !0,
           ref_key: "buttons",
-          ref: s,
+          ref: o,
           class: "b-button-actions__button-wrapper"
         }, [
-          n.data ? (u(), g(Jt, {
+          n.data ? (r(), g(Xt, {
             key: 0,
             ref_for: !0,
             ref: n.elementRef,
@@ -1255,11 +1287,11 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
             "menu-width": n.menuWidth,
             "revert-focus-to-button": n.revertFocusToButton,
             teleport: n.teleport
-          }, G({ _: 2 }, [
+          }, j({ _: 2 }, [
             n.icon || n.iconLeft ? {
               name: "iconLeft",
               fn: b(() => [
-                (u(), g(X(n.icon || n.iconLeft), {
+                (r(), g(z(n.icon || n.iconLeft), {
                   "svg-title": n.title
                 }, null, 8, ["svg-title"]))
               ]),
@@ -1268,12 +1300,12 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
             a(n) ? void 0 : {
               name: "default",
               fn: b(() => [
-                H(j(n.title), 1)
+                Y(G(n.title), 1)
               ]),
               key: "1"
             }
-          ]), 1032, ["data", "close-menu-on-item-select", "close-on-click-outside-options", "disable-arrow-down-opening-menu", "menu-position", "menu-fixed-positioning", "menu-width", "revert-focus-to-button", "teleport"])) : (u(), k(Z, { key: 1 }, [
-            n.state ? (u(), g(xe, Y({
+          ]), 1032, ["data", "close-menu-on-item-select", "close-on-click-outside-options", "disable-arrow-down-opening-menu", "menu-position", "menu-fixed-positioning", "menu-width", "revert-focus-to-button", "teleport"])) : (r(), I(Z, { key: 1 }, [
+            n.state ? (r(), g(nt, H({
               key: 0,
               ref_for: !0,
               ref: n.elementRef,
@@ -1282,12 +1314,12 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
               disabled: n.disabled,
               inverse: i.inverse,
               state: n.state,
-              variant: n.variant || l(h)
-            }, ie(c(n))), G({ _: 2 }, [
+              variant: n.variant || u(h)
+            }, ie(f(n))), j({ _: 2 }, [
               n.icon || n.iconLeft ? {
                 name: "iconLeft",
                 fn: b(() => [
-                  (u(), g(X(n.icon || n.iconLeft), {
+                  (r(), g(z(n.icon || n.iconLeft), {
                     "svg-title": n.title
                   }, null, 8, ["svg-title"]))
                 ]),
@@ -1296,11 +1328,11 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
               a(n) ? void 0 : {
                 name: "default",
                 fn: b(() => [
-                  H(j(n.title), 1)
+                  Y(G(n.title), 1)
                 ]),
                 key: "1"
               }
-            ]), 1040, ["condensed", "critical", "disabled", "inverse", "state", "variant"])) : (u(), g(L, Y({
+            ]), 1040, ["condensed", "critical", "disabled", "inverse", "state", "variant"])) : (r(), g(E, H({
               key: 1,
               ref_for: !0,
               ref: n.elementRef,
@@ -1309,12 +1341,12 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
               disabled: n.disabled,
               inverse: i.inverse,
               link: n.link,
-              variant: n.variant || l(h)
-            }, ie(c(n))), G({ _: 2 }, [
+              variant: n.variant || u(h)
+            }, ie(f(n))), j({ _: 2 }, [
               n.icon || n.iconLeft ? {
                 name: "iconLeft",
                 fn: b(() => [
-                  (u(), g(X(n.icon || n.iconLeft), {
+                  (r(), g(z(n.icon || n.iconLeft), {
                     "svg-title": n.title
                   }, null, 8, ["svg-title"]))
                 ]),
@@ -1323,14 +1355,14 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
               a(n) ? void 0 : {
                 name: "default",
                 fn: b(() => [
-                  H(j(n.title), 1)
+                  Y(G(n.title), 1)
                 ]),
                 key: "1"
               },
               n.iconRight ? {
                 name: "iconRight",
                 fn: b(() => [
-                  (u(), g(X(n.iconRight), {
+                  (r(), g(z(n.iconRight), {
                     "svg-title": n.title
                   }, null, 8, ["svg-title"]))
                 ]),
@@ -1342,26 +1374,26 @@ const Gt = /* @__PURE__ */ w(Kt, [["render", Vt], ["__scopeId", "data-v-968b28cb
       ], 2)
     ], 512));
   }
-}), xt = /* @__PURE__ */ w(Qt, [["__scopeId", "data-v-1a12c479"]]);
+}), nn = /* @__PURE__ */ M(tn, [["__scopeId", "data-v-1a12c479"]]);
 export {
-  xt as B,
-  Nt as D,
-  ut as I,
-  jt as M,
-  Tt as O,
-  ct as P,
-  It as S,
-  xe as a,
-  A as b,
-  nt as c,
-  $t as d,
-  qt as e,
-  Jt as f,
+  nn as B,
+  Pt as D,
+  ft as I,
+  Jt as M,
+  Nt as O,
+  pt as P,
+  Ot as S,
+  nt as a,
+  R as b,
+  it as c,
+  Et as d,
+  Zt as e,
+  Xt as f,
   W as g,
-  _t as h,
-  kt as i,
-  Ct as j,
-  dt as k,
-  rt as u
+  It as h,
+  $t as i,
+  Bt as j,
+  mt as k,
+  ct as u
 };
-//# sourceMappingURL=button-actions.O0cnu1_g.js.map
+//# sourceMappingURL=button-actions.Crj4QFAd.js.map