@adyen/bento-vue2 1.60.0 → 1.60.1

package/dist/chunks/fixed-scroller.D0a6q8_i.js

@@ -0,0 +1,106 @@
+import { ref as n, onMounted as R, computed as f, defineComponent as L } from "vue";
+import { B as x } from "./button.BuD-IsW5.js";
+import { u as C } from "./i18n.BQkEbtPM.js";
+import { C as b, a as y } from "./chevron-left.DOMTgGel.js";
+import { o as m } from "./resize.Bqks3WUm.js";
+import { n as W } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/fixed-scroller.css";
+const w = 1, g = 40, F = ({
+  contentRef: d,
+  containerRef: e,
+  leftButtonRef: o,
+  rightButtonRef: t
+}) => {
+  const r = n(0), l = n(0), u = n(0), a = n(0);
+  R(() => {
+    m(e.value, () => {
+      e.value && (a.value = e.value.offsetWidth, l.value = 0, r.value = 0);
+    }), m(d.value, () => {
+      var s;
+      u.value = (s = d.value) == null ? void 0 : s.scrollWidth;
+    });
+  });
+  const _ = f(() => {
+    var c, h;
+    const s = (c = o.value) != null && c.scrollWidth ? o.value.scrollWidth + g : 0, p = (h = t.value) != null && h.scrollWidth ? t.value.scrollWidth + g : 0;
+    return s + p;
+  }), i = f(() => Math.ceil(u.value / a.value) ?? 0), v = f(() => {
+    const s = new Array(i.value).fill(0);
+    return s.forEach((p, c) => {
+      if (c === 0)
+        return;
+      if (c === i.value - 1) {
+        s[s.length - 1] = -(u.value - a.value + w);
+        return;
+      }
+      const h = s[c - 1];
+      s[c] = -(a.value + Math.abs(h) - _.value);
+    }), s;
+  }), S = f(() => l.value !== 0), B = f(
+    () => r.value >= -(u.value - a.value - 1)
+  );
+  return {
+    offset: r,
+    shouldShowLeftButton: S,
+    shouldShowRightButton: B,
+    // Methods
+    scrollLeft: () => {
+      l.value !== 0 && (l.value -= 1, r.value = v.value[l.value]);
+    },
+    scrollRight: () => {
+      l.value !== i.value - 1 && (l.value += 1, r.value = v.value[l.value]);
+    }
+  };
+}, I = {
+  "en-US": {
+    scrollLeft: "Scroll left",
+    scrollRight: "Scroll right"
+  }
+}, O = {
+  i18n: { messages: I }
+}, k = /* @__PURE__ */ L({
+  ...O,
+  __name: "fixed-scroller",
+  props: {
+    /**
+     * Applies the condensed style to the buttons
+     */
+    condensed: { type: Boolean, default: !1 },
+    /**
+     * Padding to be applied to the top of the scroller container
+     */
+    extraPaddingTop: { type: Number, default: 0 }
+  },
+  setup(d) {
+    const { t: e } = C(), o = n(null), t = n(null), r = n(null), l = n(null), { offset: u, shouldShowLeftButton: a, shouldShowRightButton: _, scrollLeft: i, scrollRight: v } = F({
+      contentRef: o,
+      containerRef: t,
+      leftButtonRef: r,
+      rightButtonRef: l
+    });
+    return { __sfc: !0, t: e, contentRef: o, fixedScrollerRef: t, leftButtonRef: r, rightButtonRef: l, offset: u, shouldShowLeftButton: a, shouldShowRightButton: _, scrollLeft: i, scrollRight: v, BentoButton: x, ChevronLeftIcon: y, ChevronRightIcon: b };
+  }
+});
+var E = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o("div", { ref: "fixedScrollerRef", staticClass: "b-fixed-scroller" }, [o("div", { staticClass: "b-fixed-scroller__container" }, [o("div", { ref: "contentRef", staticClass: "b-fixed-scroller__content", style: {
+    transform: `translateX(${t.offset}px)`,
+    paddingTop: t.shouldShowLeftButton || t.shouldShowRightButton ? `${e.extraPaddingTop}px` : null
+  } }, [e._t("default")], 2)]), t.shouldShowLeftButton ? o("div", { ref: "leftButtonRef", staticClass: "b-fixed-scroller__left" }, [o(t.BentoButton, { attrs: { variant: "secondary", "aria-label": t.t("scrollLeft"), condensed: e.condensed }, on: { click: t.scrollLeft }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [o(t.ChevronLeftIcon, { attrs: { "svg-title": "checked", "aria-hidden": "true" } })];
+  }, proxy: !0 }], null, !1, 1728943899) })], 1) : e._e(), t.shouldShowRightButton ? o("div", { ref: "rightButtonRef", staticClass: "b-fixed-scroller__right" }, [o(t.BentoButton, { attrs: { variant: "secondary", "aria-label": t.t("scrollRight"), condensed: e.condensed }, on: { click: t.scrollRight }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [o(t.ChevronRightIcon, { attrs: { "svg-title": "checked", "aria-hidden": "true" } })];
+  }, proxy: !0 }], null, !1, 29940896) })], 1) : e._e()]);
+}, T = [], P = /* @__PURE__ */ W(
+  k,
+  E,
+  T,
+  !1,
+  null,
+  "0a2c2ec6"
+);
+const U = P.exports;
+export {
+  U as F
+};
+//# sourceMappingURL=fixed-scroller.D0a6q8_i.js.map

package/dist/chunks/fixed-scroller.D0a6q8_i.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-scroller.D0a6q8_i.js","sources":["../../src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { observeSizeOfElement } from '@/utils/ts/resize';\nimport { computed, onMounted, ref } from 'vue';\nimport type { Ref, UnwrapRef } from 'vue';\n\n// Adding an offset of \"1\" so that the border can be shown within the boundaries\nconst OVERFLOW_CLIP_OFFSET = 1;\n// Add the gradient offset to the calculations\nconst GRADIENT_OFFSET = 40;\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    containerRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    leftButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    rightButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param props - All the necessary references to calculate the scroll\n * @param props.containerRef - Reference to the container, this defines the visible space width\n * @param props.contentRef - Reference to the content itself, this defines the total content width\n * @param props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns response - Values used in the view to show the buttons and to change the view right or left\n * @returns response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns response.scrollLeft - Used to shift the view to the left\n * @returns response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = ref(0);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = ref(0);\n\n    onMounted(() => {\n        observeSizeOfElement(containerRef.value, () => {\n            if (containerRef.value) {\n                // Set new width when resized\n                visibleSpaceWidth.value = containerRef.value.offsetWidth;\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n\n        observeSizeOfElement(contentRef.value, () => {\n            totalContentWidth.value = contentRef.value?.scrollWidth;\n        });\n    });\n\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth\n            ? leftButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth\n            ? rightButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value -\n                    visibleSpaceWidth.value +\n                    OVERFLOW_CLIP_OFFSET\n                );\n\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\">\n            <div\n                ref=\"contentRef\"\n                class=\"b-fixed-scroller__content\"\n                :style=\"{\n                    transform: `translateX(${offset}px)`,\n                    paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null,\n                }\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n\n        <div v-if=\"shouldShowLeftButton\" ref=\"leftButtonRef\" class=\"b-fixed-scroller__left\">\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" :condensed=\"condensed\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div v-if=\"shouldShowRightButton\" ref=\"rightButtonRef\" class=\"b-fixed-scroller__right\">\n            <bento-button\n                variant=\"secondary\"\n                :aria-label=\"t('scrollRight')\"\n                :condensed=\"condensed\"\n                @click=\"scrollRight\"\n            >\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    defineProps({\n        /**\n         * Applies the condensed style to the buttons\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        extraPaddingTop: { type: Number, default: 0 },\n    });\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, scrollLeft, scrollRight } = useFixedScroller({\n        contentRef,\n        containerRef: fixedScrollerRef,\n        leftButtonRef,\n        rightButtonRef,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["OVERFLOW_CLIP_OFFSET","GRADIENT_OFFSET","useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","visibleSpaceWidth","onMounted","observeSizeOfElement","_a","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","_b","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight"],"mappings":";;;;;;;AAKA,MAAAA,IAAA,GAEAC,IAAA,IAkCOC,IAAA,CAAA;AAAA,EAA0B,YAAAC;AAAA,EAC7B,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAEJ,MAAA;AACI,QAAAC,IAAAC,EAAA,CAAA,GACAC,IAAAD,EAAA,CAAA,GAGAE,IAAAF,EAAA,CAAA,GAEAG,IAAAH,EAAA,CAAA;AAEA,EAAAI,EAAA,MAAA;AACI,IAAAC,EAAAT,EAAA,OAAA,MAAA;AACI,MAAAA,EAAA,UAEIO,EAAA,QAAAP,EAAA,MAAA,aAEAK,EAAA,QAAA,GACAF,EAAA,QAAA;AAAA,IACJ,CAAA,GAGJM,EAAAV,EAAA,OAAA,MAAA;;AACI,MAAAO,EAAA,SAAAI,IAAAX,EAAA,UAAA,gBAAAW,EAAA;AAAA,IAA4C,CAAA;AAAA,EAC/C,CAAA;AAKL,QAAAC,IAAAC,EAAA,MAAA;;AACI,UAAAC,KAAAH,IAAAT,EAAA,UAAA,QAAAS,EAAA,cAAAT,EAAA,MAAA,cAAAJ,IAAA,GAGAiB,KAAAC,IAAAb,EAAA,UAAA,QAAAa,EAAA,cAAAb,EAAA,MAAA,cAAAL,IAAA;AAIA,WAAAgB,IAAAC;AAAA,EAAyB,CAAA,GAI7BE,IAAAJ,EAAA,MAAA,KAAA,KAAAN,EAAA,QAAAC,EAAA,KAAA,KAAA,CAAA,GAIAU,IAAAL,EAAA,MAAA;AACI,UAAAM,IAAA,IAAA,MAAAF,EAAA,KAAA,EAAA,KAAA,CAAA;AAEA,WAAAE,EAAA,QAAA,CAAAC,GAAAC,MAAA;AAEI,UAAAA,MAAA;AACI;AAIJ,UAAAA,MAAAJ,EAAA,QAAA,GAAA;AACI,QAAAE,EAAAA,EAAA,SAAA,CAAA,IAAA,EAAAZ,EAAA,QAAAC,EAAA,QAAAX;AAMA;AAAA,MAAA;AAIJ,YAAAyB,IAAAH,EAAAE,IAAA,CAAA;AACA,MAAAF,EAAAE,CAAA,IAAA,EAAAb,EAAA,QAAA,KAAA,IAAAc,CAAA,IAAAV,EAAA;AAAA,IAAkG,CAAA,GAGtGO;AAAA,EAAO,CAAA,GAIXI,IAAAV,EAAA,MAAAP,EAAA,UAAA,CAAA,GAEAkB,IAAAX;AAAA,IAA8B,MAAAT,EAAA,SAAA,EAAAG,EAAA,QAAAC,EAAA,QAAA;AAAA,EACkD;AA6BhF,SAAA;AAAA,IAAO,QAAAJ;AAAA,IACH,sBAAAmB;AAAA,IACA,uBAAAC;AAAA;AAAA,IACA,YA1BJ,MAAA;AAEI,MAAAlB,EAAA,UAAA,MAIAA,EAAA,SAAA,GACAF,EAAA,QAAAc,EAAA,MAAAZ,EAAA,KAAA;AAAA,IAAkD;AAAA,IAsBlD,aAhBJ,MAAA;AAEI,MAAAA,EAAA,UAAAW,EAAA,QAAA,MAIAX,EAAA,SAAA,GACAF,EAAA,QAAAc,EAAA,MAAAZ,EAAA,KAAA;AAAA,IAAkD;AAAA,EAUlD;AAER;;;;;GClEImB,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;AA9CA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEA5B,IAAAK,EAAA,IAAA,GACAwB,IAAAxB,EAAA,IAAA,GACAH,IAAAG,EAAA,IAAA,GACAF,IAAAE,EAAA,IAAA,GAaA,EAAA,QAAAD,GAAA,sBAAAmB,GAAA,uBAAAC,GAAA,YAAAM,GAAA,aAAAC,EAAA,IAAAhC,EAAA;AAAA,MAA0G,YAAAC;AAAA,MACtG,cAAA6B;AAAA,MACc,eAAA3B;AAAA,MACd,gBAAAC;AAAA,IACA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/focus-trap.C-wIQqpO.js

@@ -0,0 +1,499 @@
+import { ref as W, onUnmounted as ne, isRef as oe, defineComponent as ae } from "vue";
+import { u as ie } from "./use-has-slot.C9lQZ6nz.js";
+import { h as ue } from "./index.BdrLbvtJ.js";
+import { n as se } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/focus-trap.css";
+var R = "data-focus-lock", ce = "data-focus-lock-disabled", fe = "data-no-focus-lock", le = "data-autofocus-inside", de = "data-no-autofocus", b = function(e) {
+  for (var t = Array(e.length), r = 0; r < e.length; ++r)
+    t[r] = e[r];
+  return t;
+}, I = function(e) {
+  return Array.isArray(e) ? e : [e];
+}, ve = function(e) {
+  if (e.nodeType !== Node.ELEMENT_NODE)
+    return !1;
+  var t = window.getComputedStyle(e, null);
+  return !t || !t.getPropertyValue ? !1 : t.getPropertyValue("display") === "none" || t.getPropertyValue("visibility") === "hidden";
+}, V = function(e) {
+  return e.parentNode && e.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    e.parentNode.host
+  ) : e.parentNode;
+}, G = function(e) {
+  return e === document || e && e.nodeType === Node.DOCUMENT_NODE;
+}, me = function(e, t) {
+  return !e || G(e) || !ve(e) && t(V(e));
+}, q = function(e, t) {
+  var r = e.get(t);
+  if (r !== void 0)
+    return r;
+  var n = me(t, q.bind(void 0, e));
+  return e.set(t, n), n;
+}, be = function(e, t) {
+  return e && !G(e) ? ge(e) ? t(V(e)) : !1 : !0;
+}, K = function(e, t) {
+  var r = e.get(t);
+  if (r !== void 0)
+    return r;
+  var n = be(t, K.bind(void 0, e));
+  return e.set(t, n), n;
+}, z = function(e) {
+  return e.dataset;
+}, pe = function(e) {
+  return e.tagName === "BUTTON";
+}, $ = function(e) {
+  return e.tagName === "INPUT";
+}, j = function(e) {
+  return $(e) && e.type === "radio";
+}, he = function(e) {
+  return !(($(e) || pe(e)) && (e.type === "hidden" || e.disabled));
+}, ge = function(e) {
+  var t = e.getAttribute(de);
+  return ![!0, "true", ""].includes(t);
+}, T = function(e) {
+  var t;
+  return !!(e && (!((t = z(e)) === null || t === void 0) && t.focusGuard));
+}, g = function(e) {
+  return !T(e);
+}, Oe = function(e) {
+  return !!e;
+}, Ee = function(e, t) {
+  var r = e.tabIndex - t.tabIndex, n = e.index - t.index;
+  if (r) {
+    if (!e.tabIndex)
+      return 1;
+    if (!t.tabIndex)
+      return -1;
+  }
+  return r || n;
+}, Z = function(e, t, r) {
+  return b(e).map(function(n, o) {
+    return {
+      node: n,
+      index: o,
+      tabIndex: r && n.tabIndex === -1 ? (n.dataset || {}).focusGuard ? 0 : -1 : n.tabIndex
+    };
+  }).filter(function(n) {
+    return !t || n.tabIndex >= 0;
+  }).sort(Ee);
+}, Ae = [
+  "button:enabled",
+  "select:enabled",
+  "textarea:enabled",
+  "input:enabled",
+  // elements with explicit roles will also use explicit tabindex
+  // '[role="button"]',
+  "a[href]",
+  "area[href]",
+  "summary",
+  "iframe",
+  "object",
+  "embed",
+  "audio[controls]",
+  "video[controls]",
+  "[tabindex]",
+  "[contenteditable]",
+  "[autofocus]"
+], C = Ae.join(","), Ne = "".concat(C, ", [data-focus-guard]"), Y = function(e, t) {
+  var r;
+  return b(((r = e.shadowRoot) === null || r === void 0 ? void 0 : r.children) || e.children).reduce(function(n, o) {
+    return n.concat(o.matches(t ? Ne : C) ? [o] : [], Y(o));
+  }, []);
+}, P = function(e, t) {
+  return e.reduce(function(r, n) {
+    return r.concat(
+      // add all tabbables inside and within shadow DOMs in DOM order
+      Y(n, t),
+      // add if node is tabbable itself
+      n.parentNode ? b(n.parentNode.querySelectorAll(C)).filter(function(o) {
+        return o === n;
+      }) : []
+    );
+  }, []);
+}, xe = function(e) {
+  var t = e.querySelectorAll("[".concat(le, "]"));
+  return b(t).map(function(r) {
+    return P([r]);
+  }).reduce(function(r, n) {
+    return r.concat(n);
+  }, []);
+}, S = function(e, t) {
+  return b(e).filter(function(r) {
+    return q(t, r);
+  }).filter(function(r) {
+    return he(r);
+  });
+}, U = function(e, t) {
+  return t === void 0 && (t = /* @__PURE__ */ new Map()), b(e).filter(function(r) {
+    return K(t, r);
+  });
+}, F = function(e, t, r) {
+  return Z(S(P(e, r), t), !0, r);
+}, B = function(e, t) {
+  return Z(S(P(e), t), !1);
+}, ye = function(e, t) {
+  return S(xe(e), t);
+}, p = function(e, t) {
+  return (e.shadowRoot ? p(e.shadowRoot, t) : e.contains(t)) || Array.from(e.children).some(function(r) {
+    return p(r, t);
+  });
+}, we = function(e) {
+  for (var t = /* @__PURE__ */ new Set(), r = e.length, n = 0; n < r; n += 1)
+    for (var o = n + 1; o < r; o += 1) {
+      var i = e[n].compareDocumentPosition(e[o]);
+      (i & Node.DOCUMENT_POSITION_CONTAINED_BY) > 0 && t.add(o), (i & Node.DOCUMENT_POSITION_CONTAINS) > 0 && t.add(n);
+    }
+  return e.filter(function(a, u) {
+    return !t.has(u);
+  });
+}, J = function(e) {
+  return e.parentNode ? J(e.parentNode) : e;
+}, D = function(e) {
+  var t = I(e);
+  return t.filter(Boolean).reduce(function(r, n) {
+    var o = n.getAttribute(R);
+    return r.push.apply(r, o ? we(b(J(n).querySelectorAll("[".concat(R, '="').concat(o, '"]:not([').concat(ce, '="disabled"])')))) : [n]), r;
+  }, []);
+}, Q = function(e) {
+  return e.activeElement ? e.activeElement.shadowRoot ? Q(e.activeElement.shadowRoot) : e.activeElement : void 0;
+}, L = function() {
+  return document.activeElement ? document.activeElement.shadowRoot ? Q(document.activeElement.shadowRoot) : document.activeElement : void 0;
+}, Ie = function(e) {
+  return e === document.activeElement;
+}, Fe = function(e) {
+  return !!b(e.querySelectorAll("iframe")).some(function(t) {
+    return Ie(t);
+  });
+}, _e = function(e) {
+  var t = document && L();
+  return !t || t.dataset && t.dataset.focusGuard ? !1 : D(e).some(function(r) {
+    return p(r, t) || Fe(r);
+  });
+}, Te = function() {
+  var e = document && L();
+  return e ? b(document.querySelectorAll("[".concat(fe, "]"))).some(function(t) {
+    return p(t, e);
+  }) : !1;
+}, Ce = function(e, t) {
+  return t.filter(j).filter(function(r) {
+    return r.name === e.name;
+  }).filter(function(r) {
+    return r.checked;
+  })[0] || e;
+}, k = function(e, t) {
+  return j(e) && e.name ? Ce(e, t) : e;
+}, Pe = function(e) {
+  var t = /* @__PURE__ */ new Set();
+  return e.forEach(function(r) {
+    return t.add(k(r, e));
+  }), e.filter(function(r) {
+    return t.has(r);
+  });
+}, M = function(e) {
+  return e[0] && e.length > 1 ? k(e[0], e) : e[0];
+}, H = function(e, t) {
+  return e.length > 1 ? e.indexOf(k(e[t], e)) : t;
+}, X = "NEW_FOCUS", Se = function(e, t, r, n) {
+  var o = e.length, i = e[0], a = e[o - 1], u = T(r);
+  if (!(r && e.indexOf(r) >= 0)) {
+    var s = r !== void 0 ? t.indexOf(r) : -1, f = n ? t.indexOf(n) : s, l = n ? e.indexOf(n) : -1, c = s - f, m = t.indexOf(i), d = t.indexOf(a), v = Pe(t), O = r !== void 0 ? v.indexOf(r) : -1, E = O - (n ? v.indexOf(n) : s), A = H(e, 0), N = H(e, o - 1);
+    if (s === -1 || l === -1)
+      return X;
+    if (!c && l >= 0)
+      return l;
+    if (s <= m && u && Math.abs(c) > 1)
+      return N;
+    if (s >= d && u && Math.abs(c) > 1)
+      return A;
+    if (c && Math.abs(E) > 1)
+      return l;
+    if (s <= m)
+      return N;
+    if (s > d)
+      return A;
+    if (c)
+      return Math.abs(c) > 1 ? l : (o + l + c) % o;
+  }
+}, _ = function(e, t) {
+  return t === void 0 && (t = []), t.push(e), e.parentNode && _(e.parentNode.host || e.parentNode, t), t;
+}, x = function(e, t) {
+  for (var r = _(e), n = _(t), o = 0; o < r.length; o += 1) {
+    var i = r[o];
+    if (n.indexOf(i) >= 0)
+      return i;
+  }
+  return !1;
+}, ee = function(e, t, r) {
+  var n = I(e), o = I(t), i = n[0], a = !1;
+  return o.filter(Boolean).forEach(function(u) {
+    a = x(a || u, u) || a, r.filter(Boolean).forEach(function(s) {
+      var f = x(i, s);
+      f && (!a || p(f, a) ? a = f : a = x(f, a));
+    });
+  }), a;
+}, De = function(e, t) {
+  return e.reduce(function(r, n) {
+    return r.concat(ye(n, t));
+  }, []);
+}, Le = function(e) {
+  return function(t) {
+    var r;
+    return t.autofocus || !!(!((r = z(t)) === null || r === void 0) && r.autofocus) || e.indexOf(t) >= 0;
+  };
+}, ke = function(e, t) {
+  var r = /* @__PURE__ */ new Map();
+  return t.forEach(function(n) {
+    return r.set(n.node, n);
+  }), e.map(function(n) {
+    return r.get(n);
+  }).filter(Oe);
+}, Re = function(e, t) {
+  var r = document && L(), n = D(e).filter(g), o = ee(r || e, e, n), i = /* @__PURE__ */ new Map(), a = B(n, i), u = F(n, i).filter(function(d) {
+    var v = d.node;
+    return g(v);
+  });
+  if (!(!u[0] && (u = a, !u[0]))) {
+    var s = B([o], i).map(function(d) {
+      var v = d.node;
+      return v;
+    }), f = ke(s, u), l = f.map(function(d) {
+      var v = d.node;
+      return v;
+    }), c = Se(l, s, r, t);
+    if (c === X) {
+      var m = U(a.map(function(d) {
+        var v = d.node;
+        return v;
+      })).filter(Le(De(n, i)));
+      return {
+        node: m && m.length ? M(m) : M(U(l))
+      };
+    }
+    return c === void 0 ? c : f[c];
+  }
+}, Ue = function(e) {
+  var t = D(e).filter(g), r = ee(e, e, t), n = /* @__PURE__ */ new Map(), o = F([r], n, !0), i = F(t, n).filter(function(a) {
+    var u = a.node;
+    return g(u);
+  }).map(function(a) {
+    var u = a.node;
+    return u;
+  });
+  return o.map(function(a) {
+    var u = a.node, s = a.index;
+    return {
+      node: u,
+      index: s,
+      lockItem: i.indexOf(u) >= 0,
+      guard: T(u)
+    };
+  });
+}, Be = Ue, Me = function(e, t) {
+  "focus" in e && e.focus(t), "contentWindow" in e && e.contentWindow && e.contentWindow.focus();
+}, y = 0, w = !1, He = function(e, t, r) {
+  r === void 0 && (r = {});
+  var n = Re(e, t);
+  if (!w && n) {
+    if (y > 2) {
+      console.error("FocusLock: focus-fighting detected. Only one focus management system could be active. See https://github.com/theKashey/focus-lock/#focus-fighting"), w = !0, setTimeout(function() {
+        w = !1;
+      }, 1);
+      return;
+    }
+    y++, Me(n.node, r.focusOptions), y--;
+  }
+}, h = /* @__PURE__ */ ((e) => (e.VERTICAL = "vertical", e.HORIZONTAL = "horizontal", e))(h || {}), te = /* @__PURE__ */ ((e) => (e.ARROW_UP = "arrowup", e.ARROW_DOWN = "arrowdown", e))(te || {}), re = /* @__PURE__ */ ((e) => (e.ARROW_LEFT = "arrowleft", e.ARROW_RIGHT = "arrowright", e))(re || {});
+const We = (e) => requestAnimationFrame(e), Ve = (e, t) => {
+  const r = t.findIndex((n) => n.node === e);
+  return r === -1 ? 0 : r;
+}, Ge = (e, t) => {
+  var i;
+  const r = document.activeElement, n = Be(t), o = Ve(r, n) + e;
+  return ((i = n[o]) == null ? void 0 : i.node) || r;
+}, qe = (e, t) => {
+  const r = e.key.toLowerCase();
+  return {
+    isArrowNext: r === t[0],
+    isArrowPrev: r === t[1]
+  };
+}, Ke = {
+  behavior: "smooth",
+  block: "center",
+  inline: "center"
+}, ze = (e) => {
+  const t = W(null), { stop: r } = ue(
+    e,
+    (o) => {
+      let i = !1;
+      for (const a of o)
+        if (a.type === "childList" && a.addedNodes.length) {
+          const u = Array.from(a.addedNodes).find((s) => s instanceof HTMLElement ? s.getAttribute("aria-expanded") === "true" : !1);
+          u && (t.value = u, i = !0);
+          break;
+        } else if (a.type === "attributes" && a.oldValue === "false") {
+          t.value = o[0].target, i = !0;
+          break;
+        }
+      i !== !0 && setTimeout(() => t.value = null);
+    },
+    {
+      attributeFilter: ["aria-expanded"],
+      attributeOldValue: !0,
+      childList: !0,
+      // check for added/removed nodes i.e. teleport
+      subtree: !0
+      // check all descendents
+    }
+  ), n = (o) => {
+    const i = ["listbox", "tooltip", "menu"], a = ["combobox"], u = [
+      // input with autocomplete should only close the autocomplete dropdown when ESCAPE is pressed
+      // some autocomplete picks up "name=username" without the autocomplete attribute
+      "INPUT"
+    ];
+    for (const s of o.composedPath()) {
+      if (!(s instanceof HTMLElement))
+        return;
+      const f = s, l = f.tagName, c = f.getAttribute("role"), m = l === "DIALOG", d = i.includes(c), v = a.includes(c), O = u.includes(l), E = oe(e) ? e.value === f : e === f;
+      if (m || E)
+        return;
+      if (v && t.value || (d || O) || !m && c === "dialog") {
+        o.stopPropagation(), o.preventDefault();
+        return;
+      }
+    }
+  };
+  return ne(() => {
+    r();
+  }), { handleKeydownEscape: n };
+}, $e = ae({
+  name: "bento-focus-trap",
+  props: {
+    /**
+     * Enables / Disables arrow navigation as well can determine the type of arrow navigation.
+     * The types of arrow navigation are horizontal and vertical.
+     */
+    arrowNavigation: {
+      type: String,
+      default: void 0,
+      validator: (e) => Object.values(h).includes(
+        e
+      )
+    },
+    /**
+     * Enables / disables the focus trap.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup() {
+    const e = W(null), { handleKeydownEscape: t } = ze(e);
+    return { root: e, handleKeydownEscape: t };
+  },
+  data: () => ({
+    lastFocusedElement: null
+  }),
+  computed: {
+    isHorizontalArrowNavigation() {
+      return this.arrowNavigation === h.HORIZONTAL;
+    },
+    isVerticalArrowNavigation() {
+      return this.arrowNavigation === h.VERTICAL;
+    },
+    arrowOrder() {
+      return this.isVerticalArrowNavigation ? Object.values(te) : Object.values(re);
+    }
+  },
+  watch: {
+    /**
+     * If the disabled prop changes, then enable / disable the focus trap.
+     */
+    disabled() {
+      this.disabled ? this.disable() : this.setFocusInside();
+    }
+  },
+  mounted() {
+    this.disabled || this.setFocusInside();
+  },
+  beforeUnmount() {
+    this.disabled || this.disable();
+  },
+  methods: {
+    /**
+     * Set focus back inside the element area, giving the last focus element
+     * `focus-lock` can determine the next interable element to focus on.
+     */
+    async setFocusInside() {
+      (document.activeElement === document.body || Te() || !this.lastFocusedElement) && (_e(this.$refs.root) || He(this.$refs.root, this.lastFocusedElement, {
+        focusOptions: { preventScroll: !0 }
+      }), this.lastFocusedElement = document.activeElement);
+    },
+    /**
+     * On blur, trap the focus inside!
+     */
+    onBlur() {
+      this.disabled || We(this.setFocusInside);
+    },
+    /**
+     * If the no arrow navigation is enabled
+     * or if the currently focus element is a textarea or an input then prevent navigation.
+     */
+    shouldPreventNavigation() {
+      if (!this.isVerticalArrowNavigation && !this.isHorizontalArrowNavigation)
+        return !1;
+      const e = document.activeElement.tagName.toLowerCase();
+      return (this.isVerticalArrowNavigation ? ["textarea", "select"] : ["input", "textarea"]).includes(e);
+    },
+    /**
+     * When an arrow key is pressed then navigate to the next focusable element.
+     * If trap is disabled or is content editable then prevent arrow navigation.
+     *
+     * @param event on keyboard press event
+     */
+    onKeyDown(e) {
+      if (this.disabled || document.activeElement.isContentEditable || this.shouldPreventNavigation())
+        return;
+      const { isArrowNext: t, isArrowPrev: r } = qe(e, this.arrowOrder);
+      if (r || t) {
+        e.preventDefault(), e.stopPropagation();
+        const n = Ge(r ? 1 : -1, this.$el);
+        if (n.focus(), "scrollIntoView" in n) {
+          const o = "scrollBehavior" in document.documentElement.style ? Ke : !1;
+          n.scrollIntoView(o);
+        }
+      }
+    },
+    /**
+     * If focus trap is disabled then return focus to last focus element, parent node or simply the document body.
+     */
+    disable() {
+      const e = this.lastFocusedElement || this.$el.parentNode || document.body;
+      e && e.focus();
+    },
+    useHasSlot: ie
+  }
+});
+var je = function() {
+  var t = this, r = t._self._c;
+  return t._self._setupProxy, t.useHasSlot(t.$slots)("default") ? r("div", t._g({ ref: "root", staticClass: "b-focus-trap", attrs: { "data-testid": "focus-trap", tabindex: "-1" }, on: { focusout: t.onBlur, keydown: function(n) {
+    return !n.type.indexOf("key") && t._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : t.handleKeydownEscape.apply(null, arguments);
+  } } }, t.arrowNavigation ? { keydown: t.onKeyDown } : {}), [t._t("default")], 2) : t._e();
+}, Ze = [], Ye = /* @__PURE__ */ se(
+  $e,
+  je,
+  Ze,
+  !1,
+  null,
+  "0da3b03d"
+);
+const rt = Ye.exports;
+export {
+  rt as B,
+  L as a,
+  Be as b,
+  _e as f,
+  Ge as g,
+  He as s
+};
+//# sourceMappingURL=focus-trap.C-wIQqpO.js.map