@adyen/bento-vue3 1.96.1 → 1.97.0

package/dist/chunks/{button-actions.CxTxPprd.js → button-actions.CWmTl4cF.js}

@@ -1,4 +1,4 @@
-import { defineComponent as L, useSlots as q, computed as g, openBlock as l, createBlock as y, withModifiers as z, normalizeClass as K, createSlots as V, withCtx as b, renderSlot as R, unref as p, createElementVNode as W, createCommentVNode as I, mergeProps as Y, renderList as Z, normalizeProps as Te, guardReactiveProps as Me, resolveComponent as S, createVNode as O, createTextVNode as G, toDisplayString as U, onMounted as Q, onUnmounted as fe, useAttrs as Ne, inject as M, ref as v, toRefs as we, Transition as me, createElementBlock as C, Teleport as Re, resolveDynamicComponent as H, toHandlers as ne, withKeys as T, Fragment as X, watch as pe, nextTick as x, toRef as ve, normalizeStyle as be, provide as Ae } from "vue";
+import { defineComponent as L, useSlots as q, computed as g, openBlock as r, createBlock as y, withModifiers as z, normalizeClass as K, createSlots as V, withCtx as b, renderSlot as R, unref as p, createElementVNode as W, createCommentVNode as I, mergeProps as Y, renderList as Z, normalizeProps as Te, guardReactiveProps as Me, resolveComponent as S, createVNode as O, createTextVNode as G, toDisplayString as U, onMounted as Q, onUnmounted as fe, useAttrs as Ne, inject as M, ref as v, toRefs as we, Transition as me, createElementBlock as C, Teleport as Re, resolveDynamicComponent as H, toHandlers as ne, withKeys as T, Fragment as X, watch as pe, nextTick as x, toRef as ve, normalizeStyle as be, provide as Ae } from "vue";
 import { B as E } from "./button.DWF7FSIw.js";
 import { B as De } from "./loading-indicator.BPol9I84.js";
 import { C as Pe } from "./cross-circle-fill.BWCKKn0E.js";
@@ -91,7 +91,7 @@ const Ce = {
   },
   emits: ["click"],
   setup(e, { emit: n }) {
-    const i = e, o = n, r = q(), d = oe(r), { t: u } = ye({ messages: Ce }), f = g(() => ({
+    const i = e, o = n, u = q(), c = oe(u), { t: d } = ye({ messages: Ce }), f = g(() => ({
       [`b-loading-button--${i.variant}-${w.LOADING}`]: i.state === w.LOADING && !i.disabled,
       "b-loading-button--loading": i.state === w.LOADING && !i.disabled,
       [`b-loading-button--${i.variant}-${w.SUCCESS}`]: i.state === w.SUCCESS,
@@ -100,10 +100,10 @@ const Ce = {
       () => i.variant === "primary" && !i.inverse || i.variant !== "primary" && i.inverse
     ), a = g(
       () => i.critical && i.state === w.START || i.state === w.FAIL
-    ), s = (c) => {
-      c.stopPropagation(), i.state !== w.LOADING && o("click", c);
+    ), s = (l) => {
+      l.stopPropagation(), i.state !== w.LOADING && o("click", l);
     };
-    return (c, t) => (l(), y(E, {
+    return (l, t) => (r(), y(E, {
       critical: a.value,
       variant: e.variant,
       condensed: e.condensed,
@@ -113,27 +113,27 @@ const Ce = {
       onClickCapture: z(s, ["stop"])
     }, V({
       default: b(() => [
-        R(c.$slots, "default", {}, void 0, !0)
+        R(l.$slots, "default", {}, void 0, !0)
       ]),
       _: 2
     }, [
-      e.state === "start" && p(d)("iconLeft") ? {
+      e.state === "start" && p(c)("iconLeft") ? {
         name: "iconLeft",
         fn: b(() => [
-          R(c.$slots, "iconLeft", {}, void 0, !0)
+          R(l.$slots, "iconLeft", {}, void 0, !0)
         ]),
         key: "0"
       } : e.state !== "start" ? {
         name: "iconLeft",
         fn: b(() => [
           W("span", et, [
-            e.state === "fail" ? (l(), y(p(Pe), {
+            e.state === "fail" ? (r(), y(p(Pe), {
               key: 0,
-              "svg-title": p(u)("failed")
-            }, null, 8, ["svg-title"])) : e.state === "success" ? (l(), y(p(Fe), {
+              "svg-title": p(d)("failed")
+            }, null, 8, ["svg-title"])) : e.state === "success" ? (r(), y(p(Fe), {
               key: 1,
-              "svg-title": p(u)("succeded")
-            }, null, 8, ["svg-title"])) : e.state === "loading" ? (l(), y(p(De), {
+              "svg-title": p(d)("succeded")
+            }, null, 8, ["svg-title"])) : e.state === "loading" ? (r(), y(p(De), {
               key: 2,
               small: "",
               inverse: m.value
@@ -188,26 +188,26 @@ const Ce = {
   },
   emits: ["click", "update:toggled"],
   setup(e, { emit: n }) {
-    const i = e, o = n, r = g(
+    const i = e, o = n, u = g(
       () => i.variant === "tertiary" ? "tertiary-with-background" : i.variant
-    ), d = g(() => ({
+    ), c = g(() => ({
       "b-toggle-button--condensed": i?.condensed,
-      [`b-toggle-button--${r.value}-toggled`]: i.toggled,
+      [`b-toggle-button--${u.value}-toggled`]: i.toggled,
       "b-toggle-button--inverse": i.inverse
-    })), u = (a) => {
+    })), d = (a) => {
       a.stopPropagation(), i?.disabled || (o("click", a), o("update:toggled", !i.toggled));
     }, f = q(), m = (a) => ({ key: a });
-    return (a, s) => (l(), y(E, Y({ class: "b-toggle-button" }, a.$attrs, {
+    return (a, s) => (r(), y(E, Y({ class: "b-toggle-button" }, a.$attrs, {
       "aria-expanded": `${e.toggled}`,
       "aria-pressed": `${e.toggled}`,
       condensed: e.condensed,
-      class: d.value,
+      class: c.value,
       disabled: e.disabled,
       inverse: e.inverse,
-      variant: r.value,
-      onClickCapture: z(u, ["stop"])
+      variant: u.value,
+      onClickCapture: z(d, ["stop"])
     }), V({ _: 2 }, [
-      Z(p(f), (c, t) => ({
+      Z(p(f), (l, t) => ({
         name: t,
         fn: b(() => [
           R(a.$slots, t, Te(Me(m(t))), void 0, !0)
@@ -231,15 +231,15 @@ const Ce = {
     };
   }
 });
-function rt(e, n, i, o, r, d) {
-  const u = S("cross-icon"), f = S("bento-button");
-  return l(), y(f, {
+function rt(e, n, i, o, u, c) {
+  const d = S("cross-icon"), f = S("bento-button");
+  return r(), y(f, {
     class: K(e.conditionalClass),
     variant: "tertiary",
     onClick: n[0] || (n[0] = (m) => e.$emit("click"))
   }, {
     iconLeft: b(() => [
-      O(u, { "svg-title": "dismiss" })
+      O(d, { "svg-title": "dismiss" })
     ]),
     _: 1
   }, 8, ["class"]);
@@ -267,9 +267,9 @@ const ue = /* @__PURE__ */ $(lt, [["render", rt], ["__scopeId", "data-v-424ecdaa
     };
   }
 });
-function dt(e, n, i, o, r, d) {
-  const u = S("bento-typography");
-  return l(), y(u, {
+function dt(e, n, i, o, u, c) {
+  const d = S("bento-typography");
+  return r(), y(d, {
     strongest: e.isStrongest,
     variant: e.titleVariant,
     el: "span"
@@ -326,14 +326,14 @@ const ct = /* @__PURE__ */ $(ut, [["render", dt]]), ft = (e, n, i = {}) => {
   },
   emits: ["dismiss", "placement"],
   setup(e, { emit: n }) {
-    const o = e, r = n, d = q(), u = Ne(), f = g(() => ({
-      id: u.id?.toString(),
-      role: u?.role === null ? void 0 : Ue.POPOVER
-    })), m = M(vt, 2), a = v(u["aria-label"]), { ariaLabel: s, title: c } = we(o), t = Ye({
+    const o = e, u = n, c = q(), d = Ne(), f = g(() => ({
+      id: d.id?.toString(),
+      role: d?.role === null ? void 0 : Ue.POPOVER
+    })), m = M(vt, 2), a = v(d["aria-label"]), { ariaLabel: s, title: l } = we(o), t = Ye({
       ariaLabel: a.value,
       // TODO: take this line away when the aria-label props is removed
       label: s,
-      defaultFallback: c
+      defaultFallback: l
     }), k = M(pt, !1) || M(mt, !1), B = g(() => ({
       "b-popover--small": o.small && !o.large,
       "b-popover--with-divider": !!o.divider,
@@ -343,10 +343,10 @@ const ct = /* @__PURE__ */ $(ut, [["render", dt]]), ft = (e, n, i = {}) => {
       "b-popover--overflow-visible": o.overflowVisible || k
     })), F = g(() => ({
       "b-popover__content--with-title": !!o.title
-    })), j = () => r("dismiss"), A = oe(d);
-    return (_, D) => (l(), y(me, { name: "b-popover__animation" }, {
+    })), j = () => u("dismiss"), A = oe(c);
+    return (_, D) => (r(), y(me, { name: "b-popover__animation" }, {
       default: b(() => [
-        _.open ? (l(), y(p(je), {
+        _.open ? (r(), y(p(je), {
           key: 0,
           id: f.value.id,
           "aria-role": f.value.role,
@@ -364,8 +364,8 @@ const ct = /* @__PURE__ */ $(ut, [["render", dt]]), ft = (e, n, i = {}) => {
           onPlacement: D[0] || (D[0] = (J) => _.$emit("placement", J))
         }, {
           default: b(() => [
-            p(A)("image") ? (l(), C("div", bt, [
-              _.dismissible ? (l(), C("div", yt, [
+            p(A)("image") ? (r(), C("div", bt, [
+              _.dismissible ? (r(), C("div", yt, [
                 O(ue, {
                   "on-image": "",
                   onClick: j
@@ -373,25 +373,25 @@ const ct = /* @__PURE__ */ $(ut, [["render", dt]]), ft = (e, n, i = {}) => {
               ])) : I("", !0),
               R(_.$slots, "image", {}, void 0, !0)
             ])) : I("", !0),
-            p(c) ? (l(), C("div", gt, [
+            p(l) ? (r(), C("div", gt, [
               W("div", ht, [
                 p(A)("headerIcon") ? R(_.$slots, "headerIcon", { key: 0 }, void 0, !0) : I("", !0),
                 O(ct, {
-                  title: p(c),
+                  title: p(l),
                   "is-image-title": !!p(A)("image")
                 }, null, 8, ["title", "is-image-title"])
               ]),
-              _.dismissible && !p(A)("image") ? (l(), C("div", _t, [
+              _.dismissible && !p(A)("image") ? (r(), C("div", _t, [
                 O(ue, { onClick: j })
               ])) : I("", !0)
             ])) : I("", !0),
-            p(A)("default") ? (l(), C("div", {
+            p(A)("default") ? (r(), C("div", {
               key: 2,
               class: K(["b-popover__content", F.value])
             }, [
               R(_.$slots, "default", {}, void 0, !0)
             ], 2)) : I("", !0),
-            _.actions ? (l(), C("div", Ct, [
+            _.actions ? (r(), C("div", Ct, [
               O(en, {
                 actions: _.actions,
                 layout: _.actionsLayout
@@ -478,10 +478,10 @@ const ct = /* @__PURE__ */ $(ut, [["render", dt]]), ft = (e, n, i = {}) => {
     onMutations(e) {
       let n = !1;
       for (let i = 0; i < e.length; i++) {
-        const o = e[i], r = Array.from(o.addedNodes).filter(
-          (d) => !this.nodes.includes(d)
+        const o = e[i], u = Array.from(o.addedNodes).filter(
+          (c) => !this.nodes.includes(c)
         );
-        Array.from(o.removedNodes).includes(this.parent) ? (this.disable(), this.waiting = !this.disabled) : this.waiting && r.length > 0 && (n = !0);
+        Array.from(o.removedNodes).includes(this.parent) ? (this.disable(), this.waiting = !this.disabled) : this.waiting && u.length > 0 && (n = !0);
       }
       n && this.move();
     },
@@ -510,21 +510,21 @@ const ct = /* @__PURE__ */ $(ut, [["render", dt]]), ft = (e, n, i = {}) => {
 }), Et = /* @__PURE__ */ L({
   ...Ot,
   setup(e) {
-    const n = M(ke, ""), i = M(Be, ""), o = M(Ie, ""), r = g(() => {
-      const d = n || i || o;
-      return d ? `#${d}` : "body";
+    const n = M(ke, ""), i = M(Be, ""), o = M(Ie, ""), u = g(() => {
+      const c = n || i || o;
+      return c ? `#${c}` : "body";
     });
-    return (d, u) => p(_e) ? (l(), C("div", {
+    return (c, d) => p(_e) ? (r(), C("div", {
       key: 0,
-      class: K(d.classes)
+      class: K(c.classes)
     }, [
-      R(d.$slots, "default", {}, void 0, !0)
-    ], 2)) : (l(), y(Re, {
+      R(c.$slots, "default", {}, void 0, !0)
+    ], 2)) : (r(), y(Re, {
       key: 1,
-      to: d.to || r.value,
-      disabled: d.disabled
+      to: c.to || u.value,
+      disabled: c.disabled
     }, [
-      R(d.$slots, "default", {}, void 0, !0)
+      R(c.$slots, "default", {}, void 0, !0)
     ], 8, ["to", "disabled"]));
   }
 }), St = /* @__PURE__ */ $(Et, [["__scopeId", "data-v-3f683117"]]);
@@ -534,15 +534,15 @@ const Lt = {
     this.uuid = de.toString(), de += 1;
   }
 }, $t = { key: 0 };
-function Tt(e, n, i, o, r, d) {
-  return l(), C("svg", Y({ role: "img" }, e.$attrs, {
+function Tt(e, n, i, o, u, c) {
+  return r(), C("svg", Y({ 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"] ? (l(), C("title", $t, U(e.$attrs["svg-title"]), 1)) : I("", !0),
+    e.$attrs["svg-title"] ? (r(), C("title", $t, U(e.$attrs["svg-title"]), 1)) : I("", !0),
     n[0] || (n[0] = W("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"
@@ -632,21 +632,21 @@ const Mt = /* @__PURE__ */ $(Lt, [["render", Tt]]), Nt = L({
     const o = g(() => ({
       "b-menu-item--critical": e.critical,
       "b-menu-item--indent": e.indent
-    })), r = g(() => Ze(e.secondaryText, 10));
+    })), u = g(() => Ze(e.secondaryText, 10));
     return {
       // Values
       conditionalClasses: o,
-      computedSecondaryText: r,
+      computedSecondaryText: u,
       // Methods
-      onClick: (u) => {
-        u.stopPropagation(), e.handler(), n(re.CLICK);
+      onClick: (d) => {
+        d.stopPropagation(), e.handler(), n(re.CLICK);
       }
     };
   }
 });
-function wt(e, n, i, o, r, d) {
-  const u = S("bento-typography"), f = S("chevron-right-icon"), m = S("base-button");
-  return l(), y(m, {
+function wt(e, n, i, o, u, c) {
+  const d = S("bento-typography"), f = S("chevron-right-icon"), m = S("base-button");
+  return r(), y(m, {
     class: K(["b-menu-item", e.conditionalClasses]),
     role: "menuitem",
     disabled: e.disabled,
@@ -654,7 +654,7 @@ function wt(e, n, i, o, r, d) {
     onClick: e.onClick
   }, V({
     default: b(() => [
-      O(u, {
+      O(d, {
         el: "span",
         variant: "body",
         stronger: e.isTitle,
@@ -665,7 +665,7 @@ function wt(e, n, i, o, r, d) {
         ]),
         _: 1
       }, 8, ["stronger"]),
-      e.computedSecondaryText ? (l(), y(u, {
+      e.computedSecondaryText ? (r(), y(d, {
         key: 0,
         el: "span",
         variant: "body",
@@ -682,7 +682,7 @@ function wt(e, n, i, o, r, d) {
     e.icon ? {
       name: "iconLeft",
       fn: b(() => [
-        (l(), y(H(e.icon), {
+        (r(), y(H(e.icon), {
           class: "b-menu-item__icon-left",
           "aria-hidden": "true"
         }))
@@ -708,18 +708,18 @@ const Rt = /* @__PURE__ */ Symbol("menu registering injection key"), At = {
   setup(e) {
     const n = v(), i = v({}), o = M(Rt, !1);
     if (o) {
-      const { registerMenuContainerElement: r } = o;
-      r(n), i.value = {
+      const { registerMenuContainerElement: u } = o;
+      u(n), i.value = {
         mouseleave: o?.menuMouseLeave
       };
     }
-    return (r, d) => (l(), C("div", Y({
+    return (u, c) => (r(), C("div", Y({
       ref_key: "menuListContainerRef",
       ref: n,
       class: "b-menu-list-container",
       "data-testid": "menu-list-container"
     }, ne(i.value, !0)), [
-      R(r.$slots, "default", {}, void 0, !0)
+      R(u.$slots, "default", {}, void 0, !0)
     ], 16));
   }
 }), Ee = /* @__PURE__ */ $(Dt, [["__scopeId", "data-v-9ef14d73"]]), se = {
@@ -749,12 +749,12 @@ const Rt = /* @__PURE__ */ Symbol("menu registering injection key"), At = {
   },
   emits: [P.CLOSE, P.BACK],
   setup(e, { emit: n }) {
-    const i = v(null), o = v(0), r = v(e.items.length), d = () => n(P.CLOSE), u = () => n(P.BACK), f = g(() => {
-      const c = e.items?.map((t) => ({
+    const i = v(null), o = v(0), u = v(e.items.length), c = () => n(P.CLOSE), d = () => n(P.BACK), f = g(() => {
+      const l = e.items?.map((t) => ({
         ...t,
         indent: !t.icon,
         isTitle: !1,
-        clickHandler: d
+        clickHandler: c
       }));
       return [
         {
@@ -765,11 +765,11 @@ const Rt = /* @__PURE__ */ Symbol("menu registering injection key"), At = {
           isTitle: !0,
           disabled: !1,
           indent: !1,
-          handler: u,
-          clickHandler: u,
+          handler: d,
+          clickHandler: d,
           addDivider: !0
         },
-        ...c
+        ...l
       ];
     }), m = async () => {
       i.value?.children?.[o.value]?.children?.[0]?.focus();
@@ -778,9 +778,9 @@ const Rt = /* @__PURE__ */ Symbol("menu registering injection key"), At = {
       setTimeout(() => m(), 150);
     });
     const a = () => {
-      o.value > 0 ? (o.value -= 1, f.value[o.value].disabled && a()) : o.value = r.value, m();
+      o.value > 0 ? (o.value -= 1, f.value[o.value].disabled && a()) : o.value = u.value, m();
     }, s = () => {
-      o.value < r.value ? (o.value += 1, f.value[o.value].disabled && s()) : o.value = 0, m();
+      o.value < u.value ? (o.value += 1, f.value[o.value].disabled && s()) : o.value = 0, m();
     };
     return {
       // Enums
@@ -791,16 +791,16 @@ const Rt = /* @__PURE__ */ Symbol("menu registering injection key"), At = {
       ChevronLeftIcon: le,
       computedItems: f,
       // Methods
-      closeMenu: d,
-      onBackButton: u,
+      closeMenu: c,
+      onBackButton: d,
       focusPrevious: a,
       focusNext: s
     };
   }
 });
-function Ft(e, n, i, o, r, d) {
-  const u = S("menu-item"), f = S("bento-divider"), m = S("menu-list-container");
-  return l(), y(me, {
+function Ft(e, n, i, o, u, c) {
+  const d = S("menu-item"), f = S("bento-divider"), m = S("menu-list-container");
+  return r(), y(me, {
     name: "b-sub-menu-item-list__transition",
     appear: ""
   }, {
@@ -817,11 +817,11 @@ function Ft(e, n, i, o, r, d) {
               n[2] || (n[2] = T(z((...a) => e.onBackButton && e.onBackButton(...a), ["stop"]), ["esc"]))
             ]
           }, [
-            (l(!0), C(X, null, Z(e.computedItems, (a, s) => (l(), C("li", {
+            (r(!0), C(X, null, Z(e.computedItems, (a, s) => (r(), C("li", {
               key: `sub-menu-item-list-item-${s}`,
               role: "none"
             }, [
-              O(u, {
+              O(d, {
                 text: a.text,
                 handler: a.handler,
                 "secondary-text": a.secondaryText,
@@ -833,7 +833,7 @@ function Ft(e, n, i, o, r, d) {
                 tabindex: s === e.subMenuFocusedIndex ? "0" : "-1",
                 onClick: a.clickHandler
               }, null, 8, ["text", "handler", "secondary-text", "icon", "is-title", "disabled", "critical", "indent", "tabindex", "onClick"]),
-              a.addDivider ? (l(), y(f, {
+              a.addDivider ? (r(), y(f, {
                 key: 0,
                 class: "b-sub-menu-item-list__divider"
               })) : I("", !0)
@@ -851,30 +851,30 @@ function $e(e) {
   return Math.max(Le, Math.min(e, Se));
 }
 function Kt(e, n, i, o) {
-  const r = v(0), d = v(0), u = (a) => {
+  const u = v(0), c = v(0), d = (a) => {
     if (!a || !a.parentElement)
       return;
-    const s = a.parentElement, c = a.cloneNode(!0);
-    c.style.position = "absolute", c.style.visibility = "hidden", s.appendChild(c), c.style.width = "max-content";
-    const t = c.offsetWidth, k = Math.max(Le, Math.min(t, Se));
-    r.value = k, c.style.width = `${k}px`;
-    const B = c.offsetHeight;
-    d.value = B, s.removeChild(c), d.value = B;
+    const s = a.parentElement, l = a.cloneNode(!0);
+    l.style.position = "absolute", l.style.visibility = "hidden", s.appendChild(l), l.style.width = "max-content";
+    const t = l.offsetWidth, k = Math.max(Le, Math.min(t, Se));
+    u.value = k, l.style.width = `${k}px`;
+    const B = l.offsetHeight;
+    c.value = B, s.removeChild(l), c.value = B;
   };
   pe([n, i], async ([a]) => {
     if (a !== null) {
       await x();
       const s = e.value?.[0]?.$el;
-      s && u(s);
+      s && d(s);
     } else
-      r.value = 0, d.value = 0;
+      u.value = 0, c.value = 0;
   });
   const f = g(() => o?.value ? $e(o.value) : 0);
   return { computedStyle: g(() => {
     const a = {
       width: f.value > 0 ? `${f.value}px` : "max-content"
     };
-    return i.value && (d.value > 0 && (a.height = `${d.value}px`), r.value > 0 && (a.width = `${r.value}px`)), a;
+    return i.value && (c.value > 0 && (a.height = `${c.value}px`), u.value > 0 && (a.width = `${u.value}px`)), a;
   }) };
 }
 const Vt = L({
@@ -919,14 +919,14 @@ const Vt = L({
   },
   emits: [P.CLOSE, "menu-item-click"],
   setup(e, { emit: n, expose: i }) {
-    const o = v(null), r = v(null), d = v(null), u = v(null), f = v(!1), m = v(null), a = v(e.focusLastElement ? e.data.length - 1 : 0), s = v(0), c = v(e.data.length - 1), t = g(() => e.data.some((N) => N.icon)), k = g(() => e.indentItems || t.value ? e.data.map((N) => {
+    const o = v(null), u = v(null), c = v(null), d = v(null), f = v(!1), m = v(null), a = v(e.focusLastElement ? e.data.length - 1 : 0), s = v(0), l = v(e.data.length - 1), t = g(() => e.data.some((N) => N.icon)), k = g(() => e.indentItems || t.value ? e.data.map((N) => {
       let h = !1;
       return N.icon || (h = !0), {
         ...N,
         indent: h
       };
     }) : e.data), B = async () => {
-      await x(), r.value?.children[a.value]?.children[0]?.focus();
+      await x(), u.value?.children[a.value]?.children[0]?.focus();
     }, F = () => n(P.CLOSE), j = (N, h) => {
       if (N.items) {
         m.value = h, f.value = !0;
@@ -934,9 +934,9 @@ const Vt = L({
       }
       m.value = h, f.value = !1, !N.skipClose && e.closeMenuOnItemSelect !== !1 && F(), n("menu-item-click");
     }, A = () => {
-      a.value > 0 ? (a.value -= 1, k.value[a.value].disabled && A()) : a.value = c.value, B();
+      a.value > 0 ? (a.value -= 1, k.value[a.value].disabled && A()) : a.value = l.value, B();
     }, _ = () => {
-      a.value < c.value ? (a.value += 1, k.value[a.value].disabled && _()) : a.value = 0, B();
+      a.value < l.value ? (a.value += 1, k.value[a.value].disabled && _()) : a.value = 0, B();
     }, D = (N, h) => {
       N?.items?.length && (m.value = h, f.value = !0);
     }, J = () => {
@@ -948,16 +948,16 @@ const Vt = L({
       focusItem: B
     });
     const { computedStyle: te } = Kt(
-      u,
+      d,
       m,
       f,
       ve(e, "popoverWidth")
     );
     return {
       // Values
-      menuItemListRef: r,
-      menuItemListWrapperRef: d,
-      subMenuItemListRef: u,
+      menuItemListRef: u,
+      menuItemListWrapperRef: c,
+      subMenuItemListRef: d,
       menuItemRef: o,
       computedData: k,
       computedStyle: te,
@@ -976,9 +976,9 @@ const Vt = L({
     };
   }
 }), Ut = ["onKeydown"];
-function jt(e, n, i, o, r, d) {
-  const u = S("menu-item"), f = S("bento-divider"), m = S("sub-menu-item-list"), a = S("menu-list-container");
-  return l(), y(a, {
+function jt(e, n, i, o, u, c) {
+  const d = S("menu-item"), f = S("bento-divider"), m = S("sub-menu-item-list"), a = S("menu-list-container");
+  return r(), y(a, {
     ref: "menuItemListWrapperRef",
     style: be(e.computedStyle)
   }, {
@@ -994,18 +994,18 @@ function jt(e, n, i, o, r, d) {
           n[4] || (n[4] = T((...s) => e.closeMenu && e.closeMenu(...s), ["tab"]))
         ]
       }, [
-        (l(!0), C(X, null, Z(e.computedData, (s, c) => (l(), C("li", {
-          key: `menu-item-${c}`,
+        (r(!0), C(X, null, Z(e.computedData, (s, l) => (r(), C("li", {
+          key: `menu-item-${l}`,
           ref_for: !0,
           ref: "menuItemRef",
           class: "b-menu-item-list__item",
           role: "none",
           onKeydown: [
-            T((t) => e.focusRight(s, c), ["right"]),
+            T((t) => e.focusRight(s, l), ["right"]),
             n[0] || (n[0] = T((t) => e.focusLeft(), ["left"]))
           ]
         }, [
-          O(u, {
+          O(d, {
             text: s.text,
             handler: s.items?.length ? () => null : s.handler,
             "secondary-text": s.secondaryText,
@@ -1014,16 +1014,16 @@ function jt(e, n, i, o, r, d) {
             disabled: s.disabled,
             critical: s.critical,
             indent: s.indent,
-            tabindex: c === e.subMenuFocusedIndex ? "0" : "-1",
+            tabindex: l === e.subMenuFocusedIndex ? "0" : "-1",
             "aria-haspopup": !!s.items?.length,
-            "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === c,
-            onClick: (t) => e.menuItemClick(s, c)
+            "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === l,
+            onClick: (t) => e.menuItemClick(s, l)
           }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
-          s.addDivider ? (l(), y(f, {
+          s.addDivider ? (r(), y(f, {
             key: 0,
             class: "b-menu-item-list__divider"
           })) : I("", !0),
-          s.items?.length && e.showSubMenu && e.visibleSubMenuIndex === c ? (l(), y(m, {
+          s.items?.length && e.showSubMenu && e.visibleSubMenuIndex === l ? (r(), y(m, {
             key: 1,
             ref_for: !0,
             ref: "subMenuItemListRef",
@@ -1059,7 +1059,7 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
   },
   emits: ["menu-item-click", "click-outside"],
   setup(e, { expose: n, emit: i }) {
-    const o = e, r = i, d = q(), u = oe(d), { t: f } = ye({ messages: se }), m = v(null), a = v(null), s = v(!1), c = v(!1), t = v(null), k = He("menu"), B = M(Yt, v(!1));
+    const o = e, u = i, c = q(), d = oe(c), { t: f } = ye({ messages: se }), m = v(null), a = v(null), s = v(!1), l = v(!1), t = v(null), k = He("menu"), B = M(Yt, v(!1));
     Ae(We, B);
     const F = g(() => ({
       "b-menu--inverse": B.value
@@ -1072,22 +1072,22 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
           ...o.button
         };
     }), _ = () => {
-      s.value = !0, r(P.OPEN);
+      s.value = !0, u(P.OPEN);
     }, D = async (h = o.revertFocusToButton) => {
-      s.value && (s.value = !1, h && (await x(), m.value?.$el?.focus()), r(P.CLOSE));
+      s.value && (s.value = !1, h && (await x(), m.value?.$el?.focus()), u(P.CLOSE));
     }, J = (h) => {
       h.stopPropagation(), s.value ? D() : _();
     }, ee = (h) => {
-      h.preventDefault(), c.value = !1, o.disableArrowDownOpeningMenu || _();
+      h.preventDefault(), l.value = !1, o.disableArrowDownOpeningMenu || _();
     }, te = (h) => {
-      h.preventDefault(), c.value = !0, _();
+      h.preventDefault(), l.value = !0, _();
     }, N = () => {
-      r("menu-item-click");
+      u("menu-item-click");
     };
     return ft(
       t,
       () => {
-        D(), r("click-outside");
+        D(), u("click-outside");
       },
       {
         ...o.closeOnClickOutsideOptions,
@@ -1099,10 +1099,10 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
        */
       closeMenu: D
     }), Q(() => {
-      u("iconRight") && Ve(
+      d("iconRight") && Ve(
         '"bento-menu" no longer supports the "iconRight" slot. The right-aligned icon is now fixed by design.'
       );
-    }), (h, ie) => (l(), C("div", {
+    }), (h, ie) => (r(), C("div", {
       class: K([F.value, "b-menu"]),
       "data-testid": "menu",
       onKeydown: [
@@ -1122,7 +1122,7 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
         inverse: p(B),
         onClick: J
       }), V({ _: 2 }, [
-        !p(u)("default") || p(u)("iconLeft") ? {
+        !p(d)("default") || p(d)("iconLeft") ? {
           name: "iconLeft",
           fn: b(() => [
             R(h.$slots, "iconLeft", {}, () => [
@@ -1133,14 +1133,14 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
           ]),
           key: "0"
         } : void 0,
-        p(u)("default") ? {
+        p(d)("default") ? {
           name: "default",
           fn: b(() => [
             R(h.$slots, "default", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
-        p(u)("default") ? {
+        p(d)("default") ? {
           name: "iconRight",
           fn: b(() => [
             O(p(ze))
@@ -1148,12 +1148,12 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
           key: "2"
         } : void 0
       ]), 1040, ["aria-controls", "toggled", "inverse"]),
-      m.value ? (l(), y(p(St), {
+      m.value ? (r(), y(p(St), {
         key: 0,
         disabled: !h.teleport
       }, {
         default: b(() => [
-          m.value ? (l(), y(Bt, {
+          m.value ? (r(), y(Bt, {
             key: 0,
             id: p(k),
             ref_key: "popoverRef",
@@ -1184,7 +1184,7 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
                 ref: a,
                 "close-menu-on-item-select": h.closeMenuOnItemSelect,
                 data: h.data,
-                "focus-last-element": c.value,
+                "focus-last-element": l.value,
                 "popover-width": h.menuWidth,
                 onClose: D,
                 onMenuItemClick: N
@@ -1201,33 +1201,42 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
   "button actions with menu container injection key"
 ), qt = 242, ce = parseInt(xe, 10), Zt = (e, n, i) => {
   const o = v(0);
-  let r = null;
-  const { buttonActionsWithMenu: d, menu: u, stackButtons: f } = M(Xt, {
+  let u = null;
+  const { buttonActionsWithMenu: c, menu: d, stackButtons: f } = M(Xt, {
     buttonActionsWithMenu: v(null),
     menu: v(null),
     stackButtons: v(!1)
-  }), m = g(() => d.value ?? e.value), a = g(() => u.value ? [...n.value, u.value.$el] : n.value), s = (c) => {
+  }), m = g(() => c.value ?? e.value), a = g(() => d.value ? [...n.value, d.value.$el] : n.value), s = (l) => {
     const t = a.value?.reduce(
       (B, F) => B + F.clientWidth + ce,
       -ce - 1
       // to remove the extra spacing, as if there's 3 buttons, only two will have a gap in between
     ), k = m.value.clientWidth;
-    return c && (o.value = k >= qt && !f.value ? t : 0), o.value > k;
+    return l && (o.value = k >= qt && !f.value ? t : 0), o.value > k;
   };
   return pe(
-    () => i.value,
+    () => i.value?.map((l) => [
+      l.title,
+      l.state,
+      l.variant,
+      l.condensed,
+      l.iconOnly,
+      !!l.icon,
+      !!l.iconLeft,
+      !!l.iconRight,
+      !!l.data
+    ]),
     () => {
       x(() => {
         f.value = s(!0);
       });
-    },
-    { deep: !0 }
+    }
   ), Q(() => {
-    r = Qe(m.value, () => {
+    u = Qe(m.value, () => {
       f.value = s(o.value === 0);
     });
   }), fe(() => {
-    r?.disconnect();
+    u?.disconnect();
   }), f;
 }, Qt = {}, xt = /* @__PURE__ */ L({
   ...Qt,
@@ -1238,16 +1247,16 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
     layout: { default: "buttons-end" }
   },
   setup(e) {
-    const n = e, i = v(null), o = v(null), r = Zt(i, o, ve(n, "actions")), d = g(() => n.actions.slice().reverse()), u = (s) => {
-      const c = n.actions.length - 1;
-      return s === c ? "primary" : "secondary";
+    const n = e, i = v(null), o = v(null), u = Zt(i, o, ve(n, "actions")), c = g(() => n.actions.slice().reverse()), d = (s) => {
+      const l = n.actions.length - 1;
+      return s === l ? "primary" : "secondary";
     }, f = g(() => ({
       [`b-button-actions--${n.layout}`]: !0,
-      "b-button-actions--stacked-buttons": r.value
+      "b-button-actions--stacked-buttons": u.value
     })), m = (s) => s?.event !== void 0 ? {
       click: s.event
     } : {}, a = (s) => s.iconOnly && (s.iconLeft || s.iconRight || s.icon);
-    return (s, c) => (l(), C("div", {
+    return (s, l) => (r(), C("div", {
       ref_key: "buttonActions",
       ref: i,
       class: "b-button-actions"
@@ -1256,14 +1265,14 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
         class: K(["b-button-actions__container-wrapper", f.value]),
         role: "group"
       }, [
-        (l(!0), C(X, null, Z(d.value, (t, k) => (l(), C("div", {
+        (r(!0), C(X, null, Z(c.value, (t, k) => (r(), C("div", {
           key: k,
           ref_for: !0,
           ref_key: "buttons",
           ref: o,
           class: "b-button-actions__button-wrapper"
         }, [
-          t.data ? (l(), y(zt, {
+          t.data ? (r(), y(zt, {
             key: 0,
             ref_for: !0,
             ref: t.elementRef,
@@ -1280,7 +1289,7 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
             t.icon || t.iconLeft ? {
               name: "iconLeft",
               fn: b(() => [
-                (l(), y(H(t.icon || t.iconLeft), {
+                (r(), y(H(t.icon || t.iconLeft), {
                   "svg-title": t.title
                 }, null, 8, ["svg-title"]))
               ]),
@@ -1293,8 +1302,8 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
               ]),
               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"])) : (l(), C(X, { key: 1 }, [
-            t.state ? (l(), y(ot, 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(), C(X, { key: 1 }, [
+            t.state ? (r(), y(ot, Y({
               key: 0,
               ref_for: !0,
               ref: t.elementRef,
@@ -1303,12 +1312,12 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
               disabled: t.disabled,
               inverse: s.inverse,
               state: t.state,
-              variant: t.variant || u(k)
+              variant: t.variant || d(k)
             }, ne(m(t))), V({ _: 2 }, [
               t.icon || t.iconLeft ? {
                 name: "iconLeft",
                 fn: b(() => [
-                  (l(), y(H(t.icon || t.iconLeft), {
+                  (r(), y(H(t.icon || t.iconLeft), {
                     "svg-title": t.title
                   }, null, 8, ["svg-title"]))
                 ]),
@@ -1321,7 +1330,7 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
                 ]),
                 key: "1"
               }
-            ]), 1040, ["condensed", "critical", "disabled", "inverse", "state", "variant"])) : (l(), y(E, Y({
+            ]), 1040, ["condensed", "critical", "disabled", "inverse", "state", "variant"])) : (r(), y(E, Y({
               key: 1,
               ref_for: !0,
               ref: t.elementRef,
@@ -1330,12 +1339,12 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
               disabled: t.disabled,
               inverse: s.inverse,
               link: t.link,
-              variant: t.variant || u(k)
+              variant: t.variant || d(k)
             }, ne(m(t))), V({ _: 2 }, [
               t.icon || t.iconLeft ? {
                 name: "iconLeft",
                 fn: b(() => [
-                  (l(), y(H(t.icon || t.iconLeft), {
+                  (r(), y(H(t.icon || t.iconLeft), {
                     "svg-title": t.title
                   }, null, 8, ["svg-title"]))
                 ]),
@@ -1351,7 +1360,7 @@ const Gt = /* @__PURE__ */ $(Vt, [["render", jt], ["__scopeId", "data-v-7253ab73
               t.iconRight ? {
                 name: "iconRight",
                 fn: b(() => [
-                  (l(), y(H(t.iconRight), {
+                  (r(), y(H(t.iconRight), {
                     "svg-title": t.title
                   }, null, 8, ["svg-title"]))
                 ]),
@@ -1387,4 +1396,4 @@ export {
   pt as m,
   ft as u
 };
-//# sourceMappingURL=button-actions.CxTxPprd.js.map
+//# sourceMappingURL=button-actions.CWmTl4cF.js.map