@adyen/bento-vue2 1.59.0 → 1.60.0

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

@@ -1,106 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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.DKT1Fe6X.js

@@ -1,499 +0,0 @@
-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 { g as ue } from "./index.oJzeCMPe.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.DKT1Fe6X.js.map