@adyen/bento-vue3 1.62.0 → 1.63.0

package/dist/chunks/menu.CCDxWQPw.js

@@ -0,0 +1,679 @@
+import { createElementBlock as L, openBlock as p, mergeProps as X, createCommentVNode as w, createElementVNode as P, toDisplayString as V, defineComponent as W, computed as E, resolveComponent as B, createBlock as S, normalizeClass as Q, createSlots as ee, withCtx as I, createVNode as $, createTextVNode as j, resolveDynamicComponent as re, ref as c, inject as te, toHandlers as ce, renderSlot as G, onMounted as ne, Transition as de, withKeys as g, withModifiers as U, Fragment as oe, renderList as se, watch as me, nextTick as q, normalizeStyle as le, useSlots as fe, provide as pe, unref as h } from "vue";
+import { B as ie, D as ve } from "./divider.qUOSAbU6.js";
+import { a as be, B as ye } from "./popover.maCMPyz8.js";
+import { u as Ce } from "./use-click-outside.BnhTgpSt.js";
+import { u as he } from "./use-has-slot.B7eQSabc.js";
+import { g as _e } from "./generate-uid.NJ8tVoha.js";
+import { u as Ie } from "./i18n.B6g5VX0q.js";
+import { B as ge, p as ke } from "./typography.DN5eC5ch.js";
+import { C as Me } from "./chevron-down.DCQ6ZLaq.js";
+/* empty css              */
+import { _ as R } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as Be } from "./toggle-button.NQwrfSr1.js";
+import { B as Se } from "./teleport.CfGWjxe2.js";
+import { a as $e, C as z } from "./chevron-right.Brdj0WlO.js";
+import { a as J, B as Ee } from "./base-button.DdNFlbgH.js";
+import { t as Le } from "./truncate.BfIl_-71.js";
+import "../assets/menu.css";
+const Te = Symbol("menu inverse style injection key");
+let Z = 0;
+const we = {
+  beforeCreate() {
+    this.uuid = Z.toString(), Z += 1;
+  }
+}, Oe = { key: 0 };
+function Ne(e, o, v, s, d, b) {
+  return p(), L("svg", X({ 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"] ? (p(), L("title", Oe, V(e.$attrs["svg-title"]), 1)) : w("", !0),
+    o[0] || (o[0] = P("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"
+    }, null, -1)),
+    o[1] || (o[1] = P("path", {
+      fill: "#001222",
+      d: "M8 15C8.29667 15 8.58668 14.912 8.83335 14.7472C9.08003 14.5824 9.27229 14.3481 9.38582 14.074C9.49935 13.7999 9.52906 13.4983 9.47118 13.2074C9.4133 12.9164 9.27044 12.6491 9.06066 12.4393C8.85088 12.2296 8.58361 12.0867 8.29264 12.0288C8.00167 11.9709 7.70006 12.0007 7.42598 12.1142C7.15189 12.2277 6.91762 12.42 6.7528 12.6666C6.58797 12.9133 6.5 13.2033 6.5 13.5C6.5 13.8978 6.65803 14.2794 6.93934 14.5607C7.22064 14.842 7.60218 15 8 15Z"
+    }, null, -1)),
+    o[2] || (o[2] = P("path", {
+      fill: "#001222",
+      d: "M8.83335 9.24721C8.58668 9.41203 8.29667 9.5 8 9.5C7.60218 9.5 7.22064 9.34197 6.93934 9.06066C6.65803 8.77936 6.5 8.39783 6.5 8C6.5 7.70333 6.58797 7.41332 6.7528 7.16665C6.91762 6.91997 7.15189 6.72771 7.42598 6.61418C7.70006 6.50065 8.00167 6.47094 8.29264 6.52882C8.58361 6.5867 8.85088 6.72956 9.06066 6.93934C9.27044 7.14912 9.4133 7.41639 9.47118 7.70737C9.52906 7.99834 9.49935 8.29994 9.38582 8.57403C9.27229 8.84811 9.08003 9.08238 8.83335 9.24721Z"
+    }, null, -1))
+  ], 16);
+}
+const Re = /* @__PURE__ */ R(we, [["render", Ne]]), De = W({
+  name: "menu-item",
+  components: { BaseButton: Ee, BentoTypography: ge, ChevronRightIcon: $e },
+  props: {
+    /**
+     * menu-item text that gets displayed as the main label
+     */
+    text: {
+      type: String,
+      required: !0
+    },
+    /**
+     * menu-item action that gets executed when the MeniItem is clicked
+     */
+    handler: {
+      type: Function,
+      required: !0
+    },
+    /**
+     * menu-item text that gets displayed as the secondary label
+     */
+    secondaryText: {
+      type: String,
+      default: null
+    },
+    /**
+     * Optional chevron icon displayed to the right of the menu-item
+     */
+    chevron: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Optional icon displayed to the left of the menu-item
+     */
+    icon: {
+      // Types for Vue2 (Object) and Vue3 (Function)
+      // TODO: Remove Object when fully migrated to Vue3
+      type: [Object, Function],
+      default: null
+    },
+    /**
+     * Disables menu-item button functionality
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays an indent variant od the menu-item
+     */
+    indent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays menu-item button as critical
+     */
+    critical: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Renders the text in a bold variant
+     */
+    isTitle: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [J.CLICK],
+  setup(e, { emit: o }) {
+    const s = E(() => ({
+      "b-menu-item--critical": e.critical,
+      "b-menu-item--indent": e.indent
+    })), d = E(() => Le(e.secondaryText, 10));
+    return {
+      // Values
+      conditionalClasses: s,
+      computedSecondaryText: d,
+      // Methods
+      onClick: (i) => {
+        i.stopPropagation(), e.handler(), o(J.CLICK);
+      }
+    };
+  }
+});
+function Pe(e, o, v, s, d, b) {
+  const i = B("bento-typography"), a = B("chevron-right-icon"), u = B("base-button");
+  return p(), S(u, {
+    class: Q(["b-menu-item", e.conditionalClasses]),
+    role: "menuitem",
+    disabled: e.disabled,
+    tabindex: "-1",
+    onClick: e.onClick
+  }, ee({
+    default: I(() => [
+      $(i, {
+        el: "span",
+        variant: "body",
+        stronger: e.isTitle,
+        class: "b-menu-item__primary-text"
+      }, {
+        default: I(() => [
+          j(V(e.text), 1)
+        ]),
+        _: 1
+      }, 8, ["stronger"]),
+      e.computedSecondaryText ? (p(), S(i, {
+        key: 0,
+        el: "span",
+        variant: "body",
+        class: "b-menu-item__secondary-text"
+      }, {
+        default: I(() => [
+          j(V(e.computedSecondaryText), 1)
+        ]),
+        _: 1
+      })) : w("", !0)
+    ]),
+    _: 2
+  }, [
+    e.icon ? {
+      name: "iconLeft",
+      fn: I(() => [
+        (p(), S(re(e.icon), {
+          class: "b-menu-item__icon-left",
+          "aria-hidden": "true"
+        }))
+      ]),
+      key: "0"
+    } : void 0,
+    e.chevron ? {
+      name: "iconRight",
+      fn: I(() => [
+        $(a, { "aria-hidden": "true" })
+      ]),
+      key: "1"
+    } : void 0
+  ]), 1032, ["class", "disabled", "onClick"]);
+}
+const ue = /* @__PURE__ */ R(De, [["render", Pe], ["__scopeId", "data-v-4cecac65"]]);
+var M = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(M || {});
+const We = Symbol("menu registering injection key"), Ke = {
+  name: "bento-menu-list-container"
+}, Ae = /* @__PURE__ */ W({
+  ...Ke,
+  setup(e) {
+    const o = c(), v = c({}), s = te(
+      We,
+      !1
+    );
+    if (s) {
+      const { registerMenuContainerElement: d } = s;
+      d(o), v.value = {
+        mouseleave: s == null ? void 0 : s.menuMouseLeave
+      };
+    }
+    return (d, b) => (p(), L("div", X({
+      ref_key: "menuListContainerRef",
+      ref: o,
+      class: "b-menu-list-container",
+      "data-testid": "menu-list-container"
+    }, ce(v.value, !0)), [
+      G(d.$slots, "default", {}, void 0, !0)
+    ], 16));
+  }
+}), ae = /* @__PURE__ */ R(Ae, [["__scopeId", "data-v-02a3ca45"]]), Y = {
+  "en-US": {
+    backButton: "Go back",
+    menuButton: "Open menu"
+  }
+}, xe = W({
+  i18n: { messages: Y },
+  name: "sub-menu-item-list",
+  components: { BentoDivider: ie, MenuItem: ue, MenuListContainer: ae },
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: [M.CLOSE, M.BACK],
+  setup(e, { emit: o }) {
+    const v = c(null), s = c(0), d = c(e.items.length), b = () => o(M.CLOSE), i = () => o(M.BACK), a = E(() => {
+      var m;
+      const l = (m = e.items) == null ? void 0 : m.map((f) => ({
+        ...f,
+        indent: !f.icon,
+        isTitle: !1,
+        clickHandler: b
+      }));
+      return [
+        {
+          text: e.title,
+          secondaryText: null,
+          critical: !1,
+          icon: z,
+          isTitle: !0,
+          disabled: !1,
+          indent: !1,
+          handler: i,
+          clickHandler: i,
+          addDivider: !0
+        },
+        ...l
+      ];
+    }), u = async () => {
+      var l, m, f, y, k;
+      (k = (y = (f = (m = (l = v.value) == null ? void 0 : l.children) == null ? void 0 : m[s.value]) == null ? void 0 : f.children) == null ? void 0 : y[0]) == null || k.focus();
+    };
+    ne(async () => {
+      setTimeout(() => u(), 150);
+    });
+    const n = () => {
+      s.value > 0 ? (s.value -= 1, a.value[s.value].disabled && n()) : s.value = d.value, u();
+    }, t = () => {
+      s.value < d.value ? (s.value += 1, a.value[s.value].disabled && t()) : s.value = 0, u();
+    };
+    return {
+      // Enums
+      BentoMenuEvent: M,
+      // Values
+      subMenuItemListRefLocal: v,
+      subMenuFocusedIndex: s,
+      ChevronLeftIcon: z,
+      computedItems: a,
+      // Methods
+      closeMenu: b,
+      onBackButton: i,
+      focusPrevious: n,
+      focusNext: t
+    };
+  }
+});
+function He(e, o, v, s, d, b) {
+  const i = B("menu-item"), a = B("bento-divider"), u = B("menu-list-container");
+  return p(), S(de, {
+    name: "b-sub-menu-item-list__transition",
+    appear: ""
+  }, {
+    default: I(() => [
+      $(u, { class: "b-sub-menu-item-list" }, {
+        default: I(() => [
+          P("ul", {
+            ref: "subMenuItemListRefLocal",
+            role: "menu",
+            class: "b-sub-menu-item-list__list",
+            onKeydown: [
+              o[0] || (o[0] = g(U((...n) => e.focusNext && e.focusNext(...n), ["stop"]), ["down"])),
+              o[1] || (o[1] = g(U((...n) => e.focusPrevious && e.focusPrevious(...n), ["stop"]), ["up"])),
+              o[2] || (o[2] = g(U((...n) => e.onBackButton && e.onBackButton(...n), ["stop"]), ["esc"]))
+            ]
+          }, [
+            (p(!0), L(oe, null, se(e.computedItems, (n, t) => (p(), L("li", {
+              key: `sub-menu-item-list-item-${t}`,
+              role: "none"
+            }, [
+              $(i, {
+                text: n.text,
+                handler: n.handler,
+                "secondary-text": n.secondaryText,
+                icon: n.icon,
+                "is-title": n.isTitle,
+                disabled: n.disabled,
+                critical: n.critical,
+                indent: n.indent,
+                tabindex: t === e.subMenuFocusedIndex ? "0" : "-1",
+                onClick: n.clickHandler
+              }, null, 8, ["text", "handler", "secondary-text", "icon", "is-title", "disabled", "critical", "indent", "tabindex", "onClick"]),
+              n.addDivider ? (p(), S(a, {
+                key: 0,
+                class: "b-sub-menu-item-list__divider"
+              })) : w("", !0)
+            ]))), 128))
+          ], 544)
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const Fe = /* @__PURE__ */ R(xe, [["render", He], ["__scopeId", "data-v-621db243"]]);
+function Ue(e, o, v) {
+  const b = c(0), i = c(0), a = (n) => {
+    if (!n || !n.parentElement)
+      return;
+    const t = n.parentElement, l = n.cloneNode(!0);
+    l.style.position = "absolute", l.style.visibility = "hidden", t.appendChild(l), l.style.width = "max-content";
+    const m = l.offsetWidth, f = Math.max(150, Math.min(m, 350));
+    b.value = f, l.style.width = `${f}px`;
+    const y = l.offsetHeight;
+    i.value = y, t.removeChild(l), i.value = y;
+  };
+  return me([o, v], async ([n]) => {
+    var t, l;
+    if (n !== null) {
+      await q();
+      const m = (l = (t = e.value) == null ? void 0 : t[0]) == null ? void 0 : l.$el;
+      m && a(m);
+    } else
+      b.value = 0, i.value = 0;
+  }), { computedStyle: E(() => {
+    const n = { width: "max-content" };
+    return v.value && (i.value > 0 && (n.height = `${i.value}px`), b.value > 0 && (n.width = `${b.value}px`)), n;
+  }) };
+}
+const Ve = W({
+  name: "menu-item-list",
+  components: { BentoDivider: ie, MenuItem: ue, MenuListContainer: ae, SubMenuItemList: Fe },
+  props: {
+    /**
+     * The data to be displayed in the list
+     */
+    data: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Displays the menu-items of the list in the indent variant. Only applies to elements that don't have an icon to their left.
+     */
+    indentItems: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If set to true, focuses the last item on the list instead of the first. Used for accessibility purposes when the menu is opened with the 'up' arrow key.
+     */
+    focusLastElement: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If set to true, closes the menu when an item is clicked.
+     */
+    closeMenuOnItemSelect: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: [M.CLOSE, "menu-item-click"],
+  setup(e, { emit: o, expose: v }) {
+    const s = c(null), d = c(null), b = c(null), i = c(null), a = c(!1), u = c(null), n = c(e.focusLastElement ? e.data.length - 1 : 0), t = c(0), l = c(e.data.length - 1), m = E(() => e.data.some((C) => C.icon)), f = E(() => e.indentItems || m.value ? e.data.map((C) => {
+      let _ = !1;
+      return C.icon || (_ = !0), {
+        ...C,
+        indent: _
+      };
+    }) : e.data), y = async () => {
+      var C, _, r;
+      await q(), (r = (_ = (C = d.value) == null ? void 0 : C.children[n.value]) == null ? void 0 : _.children[0]) == null || r.focus();
+    }, k = () => o(M.CLOSE), O = (C, _) => {
+      if (C.items) {
+        u.value = _, a.value = !0;
+        return;
+      }
+      u.value = _, a.value = !1, !C.skipClose && e.closeMenuOnItemSelect !== !1 && k(), o("menu-item-click");
+    }, K = () => {
+      n.value > 0 ? (n.value -= 1, f.value[n.value].disabled && K()) : n.value = l.value, y();
+    }, N = () => {
+      n.value < l.value ? (n.value += 1, f.value[n.value].disabled && N()) : n.value = 0, y();
+    }, T = (C, _) => {
+      var r;
+      (r = C == null ? void 0 : C.items) != null && r.length && (u.value = _, a.value = !0);
+    }, A = () => {
+      u.value && a.value && (u.value = null, a.value = !1);
+    }, x = () => {
+      a.value = !1, u.value = null, y();
+    };
+    v({
+      focusItem: y
+    });
+    const { computedStyle: H } = Ue(i, u, a);
+    return {
+      // Values
+      menuItemListRef: d,
+      menuItemListWrapperRef: b,
+      subMenuItemListRef: i,
+      menuItemRef: s,
+      computedData: f,
+      computedStyle: H,
+      focusedIndex: n,
+      subMenuFocusedIndex: t,
+      showSubMenu: a,
+      visibleSubMenuIndex: u,
+      // Methods
+      menuItemClick: O,
+      closeMenu: k,
+      focusPrevious: K,
+      focusNext: N,
+      focusRight: T,
+      focusLeft: A,
+      onBackButton: x
+    };
+  }
+}), Ge = ["onKeydown"];
+function Xe(e, o, v, s, d, b) {
+  const i = B("menu-item"), a = B("bento-divider"), u = B("sub-menu-item-list"), n = B("menu-list-container");
+  return p(), S(n, {
+    ref: "menuItemListWrapperRef",
+    style: le(e.computedStyle)
+  }, {
+    default: I(() => [
+      P("ul", {
+        ref: "menuItemListRef",
+        class: "b-menu-item-list",
+        role: "menu",
+        onKeydown: [
+          o[1] || (o[1] = g((...t) => e.focusNext && e.focusNext(...t), ["down"])),
+          o[2] || (o[2] = g((...t) => e.focusPrevious && e.focusPrevious(...t), ["up"])),
+          o[3] || (o[3] = g((...t) => e.closeMenu && e.closeMenu(...t), ["esc"])),
+          o[4] || (o[4] = g((...t) => e.closeMenu && e.closeMenu(...t), ["tab"]))
+        ]
+      }, [
+        (p(!0), L(oe, null, se(e.computedData, (t, l) => {
+          var m, f, y, k;
+          return p(), L("li", {
+            key: `menu-item-${l}`,
+            ref_for: !0,
+            ref: "menuItemRef",
+            class: "b-menu-item-list__item",
+            role: "none",
+            onKeydown: [
+              g((O) => e.focusRight(t, l), ["right"]),
+              o[0] || (o[0] = g((O) => e.focusLeft(), ["left"]))
+            ]
+          }, [
+            $(i, {
+              text: t.text,
+              handler: (m = t.items) != null && m.length ? () => null : t.handler,
+              "secondary-text": t.secondaryText,
+              icon: t.icon,
+              chevron: !!((f = t.items) != null && f.length),
+              disabled: t.disabled,
+              critical: t.critical,
+              indent: t.indent,
+              tabindex: l === e.subMenuFocusedIndex ? "0" : "-1",
+              "aria-haspopup": !!((y = t.items) != null && y.length),
+              "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === l,
+              onClick: (O) => e.menuItemClick(t, l)
+            }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
+            t.addDivider ? (p(), S(a, {
+              key: 0,
+              class: "b-menu-item-list__divider"
+            })) : w("", !0),
+            (k = t.items) != null && k.length && e.showSubMenu && e.visibleSubMenuIndex === l ? (p(), S(u, {
+              key: 1,
+              ref_for: !0,
+              ref: "subMenuItemListRef",
+              items: t.items,
+              title: t.text,
+              onBack: e.onBackButton,
+              onClose: e.closeMenu
+            }, null, 8, ["items", "title", "onBack", "onClose"])) : w("", !0)
+          ], 40, Ge);
+        }), 128))
+      ], 544)
+    ]),
+    _: 1
+  }, 8, ["style"]);
+}
+const qe = /* @__PURE__ */ R(Ve, [["render", Xe], ["__scopeId", "data-v-999aa4e9"]]), Ye = {
+  i18n: { messages: Y },
+  name: "bento-menu"
+}, je = /* @__PURE__ */ W({
+  ...Ye,
+  props: {
+    button: { default: () => ({
+      variant: "secondary"
+    }) },
+    closeMenuOnItemSelect: { type: Boolean, default: !0 },
+    data: {},
+    disableArrowDownOpeningMenu: { type: Boolean, default: !1 },
+    menuPosition: { default: be.BOTTOM_START },
+    menuFixedPositioning: { type: Boolean, default: !1 },
+    menuWidth: { default: null },
+    revertFocusToButton: { type: Boolean, default: !0 },
+    teleport: { type: Boolean, default: !1 },
+    closeOnClickOutsideOptions: { default: void 0 }
+  },
+  emits: ["menu-item-click", "click-outside"],
+  setup(e, { expose: o, emit: v }) {
+    var _;
+    const s = e, d = v, b = fe(), i = he(b), { t: a } = Ie({ messages: Y }), u = c(null), n = c(null), t = c(!1), l = c(!1), m = c(null), f = _e("menu"), y = te(Te, c(!1));
+    pe(ve, y);
+    const k = E(() => ({
+      "b-menu--inverse": y.value
+    })), O = E(() => s.menuWidth ? { width: `${s.menuWidth}px` } : null), K = E(() => {
+      if (s != null && s.button)
+        return {
+          variant: "secondary",
+          ...s.button
+        };
+    }), N = () => {
+      t.value = !0, d(M.OPEN);
+    }, T = async (r = s.revertFocusToButton) => {
+      var D, F;
+      t.value && (t.value = !1, r && (await q(), (F = (D = u.value) == null ? void 0 : D.$el) == null || F.focus()), d(M.CLOSE));
+    }, A = (r) => {
+      r.stopPropagation(), t.value ? T() : N();
+    }, x = (r) => {
+      r.preventDefault(), l.value = !1, s.disableArrowDownOpeningMenu || N();
+    }, H = (r) => {
+      r.preventDefault(), l.value = !0, N();
+    }, C = () => {
+      d("menu-item-click");
+    };
+    return Ce(
+      m,
+      () => {
+        T(), d("click-outside");
+      },
+      {
+        ...s.closeOnClickOutsideOptions,
+        ignore: [u, ...((_ = s.closeOnClickOutsideOptions) == null ? void 0 : _.ignore) ?? []]
+      }
+    ), o({
+      /**
+       * Control to enable programmatic closing of the menu
+       */
+      closeMenu: T
+    }), ne(() => {
+      i("iconRight") && ke(
+        '"bento-menu" no longer supports the "iconRight" slot. The right-aligned icon is now fixed by design.'
+      );
+    }), (r, D) => (p(), L("div", {
+      class: Q([k.value, "b-menu"]),
+      "data-testid": "menu",
+      onKeydown: [
+        g(x, ["down"]),
+        g(H, ["up"]),
+        D[0] || (D[0] = g((F) => T(), ["esc"]))
+      ]
+    }, [
+      $(h(Be), X({
+        ref_key: "menuButtonRef",
+        ref: u,
+        "aria-haspopup": "true"
+      }, K.value, {
+        "aria-controls": t.value ? h(f) : null,
+        toggled: t.value,
+        inverse: h(y),
+        onClick: A
+      }), ee({ _: 2 }, [
+        !h(i)("default") || h(i)("iconLeft") ? {
+          name: "iconLeft",
+          fn: I(() => [
+            G(r.$slots, "iconLeft", {}, () => [
+              $(h(Re), {
+                title: h(a)("menuButton")
+              }, null, 8, ["title"])
+            ], !0)
+          ]),
+          key: "0"
+        } : void 0,
+        h(i)("default") ? {
+          name: "default",
+          fn: I(() => [
+            G(r.$slots, "default", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        h(i)("default") ? {
+          name: "iconRight",
+          fn: I(() => [
+            $(h(Me))
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1040, ["aria-controls", "toggled", "inverse"]),
+      u.value ? (p(), S(h(Se), {
+        key: 0,
+        disabled: !r.teleport
+      }, {
+        default: I(() => [
+          u.value ? (p(), S(h(ye), {
+            key: 0,
+            id: h(f),
+            ref_key: "popoverRef",
+            ref: m,
+            role: null,
+            open: t.value,
+            class: "b-menu__popover",
+            style: le(O.value),
+            "target-element": u.value,
+            position: r.menuPosition,
+            "fixed-positioning": r.menuFixedPositioning,
+            "fallback-position": [
+              "bottom-start",
+              "bottom-end",
+              "top-start",
+              "top-end",
+              "right-start",
+              "right-end",
+              "left-start",
+              "left-end"
+            ],
+            teleport: r.teleport,
+            "without-space": ""
+          }, {
+            default: I(() => [
+              $(h(qe), {
+                ref_key: "menuItemListRef",
+                ref: n,
+                "close-menu-on-item-select": r.closeMenuOnItemSelect,
+                data: r.data,
+                "focus-last-element": l.value,
+                onClose: T,
+                onMenuItemClick: C
+              }, null, 8, ["close-menu-on-item-select", "data", "focus-last-element"])
+            ]),
+            _: 1
+          }, 8, ["id", "open", "style", "target-element", "position", "fixed-positioning", "teleport"])) : w("", !0)
+        ]),
+        _: 1
+      }, 8, ["disabled"])) : w("", !0)
+    ], 34));
+  }
+}), mt = /* @__PURE__ */ R(je, [["__scopeId", "data-v-dbf5b2bb"]]);
+export {
+  mt as B,
+  We as D,
+  Te as M,
+  Re as O,
+  M as a
+};
+//# sourceMappingURL=menu.CCDxWQPw.js.map