@adyen/bento-vue3 1.44.0 → 1.45.0

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

@@ -0,0 +1,147 @@
+import { ref as n, onMounted as E, computed as v, defineComponent as F, createElementBlock as S, openBlock as b, createElementVNode as y, createCommentVNode as B, normalizeStyle as O, unref as e, renderSlot as I, createVNode as p, withCtx as R } from "vue";
+import { B as L } from "./button.Cneb6rPP.js";
+import { u as T } from "./i18n.WMYWtwxB.js";
+import { C as V, a as N } from "./chevron-left.CYEK2UTr.js";
+import { o as C } from "./resize.Bqks3WUm.js";
+import { _ as A } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/fixed-scroller.css";
+const M = 1, W = 40, P = ({
+  contentRef: a,
+  containerRef: c,
+  leftButtonRef: u,
+  rightButtonRef: d
+}) => {
+  const o = n(0), t = n(0), i = n(0), r = n(0);
+  E(() => {
+    C(c.value, () => {
+      c.value && (r.value = c.value.offsetWidth, t.value = 0, o.value = 0);
+    }), C(a.value, () => {
+      var l;
+      i.value = (l = a.value) == null ? void 0 : l.scrollWidth;
+    });
+  });
+  const h = v(() => {
+    var s, m;
+    const l = (s = u.value) != null && s.scrollWidth ? u.value.scrollWidth + W : 0, x = (m = d.value) != null && m.scrollWidth ? d.value.scrollWidth + W : 0;
+    return l + x;
+  }), f = v(() => Math.ceil(i.value / r.value) ?? 0), _ = v(() => {
+    const l = new Array(f.value).fill(0);
+    return l.forEach((x, s) => {
+      if (s === 0)
+        return;
+      if (s === f.value - 1) {
+        l[l.length - 1] = -(i.value - r.value + M);
+        return;
+      }
+      const m = l[s - 1];
+      l[s] = -(r.value + Math.abs(m) - h.value);
+    }), l;
+  }), g = v(() => t.value !== 0), k = v(
+    () => o.value >= -(i.value - r.value - 1)
+  );
+  return {
+    offset: o,
+    shouldShowLeftButton: g,
+    shouldShowRightButton: k,
+    // Methods
+    scrollLeft: () => {
+      t.value !== 0 && (t.value -= 1, o.value = _.value[t.value]);
+    },
+    scrollRight: () => {
+      t.value !== f.value - 1 && (t.value += 1, o.value = _.value[t.value]);
+    }
+  };
+}, w = {
+  "en-US": {
+    scrollLeft: "Scroll left",
+    scrollRight: "Scroll right"
+  }
+}, $ = { class: "b-fixed-scroller__container" }, z = {
+  i18n: { messages: w }
+}, D = /* @__PURE__ */ F({
+  ...z,
+  __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(a) {
+    const { t: c } = T({ messages: w }), u = n(null), d = n(null), o = n(null), t = n(null), { offset: i, shouldShowLeftButton: r, shouldShowRightButton: h, scrollLeft: f, scrollRight: _ } = P({
+      contentRef: u,
+      containerRef: d,
+      leftButtonRef: o,
+      rightButtonRef: t
+    });
+    return (g, k) => (b(), S("div", {
+      ref_key: "fixedScrollerRef",
+      ref: d,
+      class: "b-fixed-scroller"
+    }, [
+      y("div", $, [
+        y("div", {
+          ref_key: "contentRef",
+          ref: u,
+          class: "b-fixed-scroller__content",
+          style: O({
+            transform: `translateX(${e(i)}px)`,
+            paddingTop: e(r) || e(h) ? `${a.extraPaddingTop}px` : null
+          })
+        }, [
+          I(g.$slots, "default", {}, void 0, !0)
+        ], 4)
+      ]),
+      e(r) ? (b(), S("div", {
+        key: 0,
+        ref_key: "leftButtonRef",
+        ref: o,
+        class: "b-fixed-scroller__left"
+      }, [
+        p(e(L), {
+          variant: "secondary",
+          "aria-label": e(c)("scrollLeft"),
+          condensed: a.condensed,
+          onClick: e(f)
+        }, {
+          iconLeft: R(() => [
+            p(e(V), {
+              "svg-title": "checked",
+              "aria-hidden": "true"
+            })
+          ]),
+          _: 1
+        }, 8, ["aria-label", "condensed", "onClick"])
+      ], 512)) : B("", !0),
+      e(h) ? (b(), S("div", {
+        key: 1,
+        ref_key: "rightButtonRef",
+        ref: t,
+        class: "b-fixed-scroller__right"
+      }, [
+        p(e(L), {
+          variant: "secondary",
+          "aria-label": e(c)("scrollRight"),
+          condensed: a.condensed,
+          onClick: e(_)
+        }, {
+          iconLeft: R(() => [
+            p(e(N), {
+              "svg-title": "checked",
+              "aria-hidden": "true"
+            })
+          ]),
+          _: 1
+        }, 8, ["aria-label", "condensed", "onClick"])
+      ], 512)) : B("", !0)
+    ], 512));
+  }
+}), Q = /* @__PURE__ */ A(D, [["__scopeId", "data-v-b24aa613"]]);
+export {
+  Q as F
+};
+//# sourceMappingURL=fixed-scroller.XaGPUsUO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-scroller.XaGPUsUO.js","sources":["../../../vue2/src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../../vue2/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;;;;;iDClEImB,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;AA9CA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEA1B,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.CnKbO3b1.js

@@ -0,0 +1,496 @@
+import { ref as W, onUnmounted as ne, isRef as oe, defineComponent as ae, createElementBlock as ie, createCommentVNode as ue, openBlock as se, mergeProps as ce, toHandlers as fe, withKeys as de, renderSlot as le } from "vue";
+import { u as ve } from "./use-has-slot.B7eQSabc.js";
+import { f as me } from "./index.BMkVmbZj.js";
+import { _ as be } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/focus-trap.css";
+var U = "data-focus-lock", pe = "data-focus-lock-disabled", he = "data-no-focus-lock", ge = "data-autofocus-inside", Oe = "data-no-autofocus", b = function(e) {
+  for (var t = Array(e.length), r = 0; r < e.length; ++r)
+    t[r] = e[r];
+  return t;
+}, x = function(e) {
+  return Array.isArray(e) ? e : [e];
+}, Ee = 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;
+}, Ae = function(e, t) {
+  return !e || G(e) || !Ee(e) && t(V(e));
+}, K = function(e, t) {
+  var r = e.get(t);
+  if (r !== void 0)
+    return r;
+  var n = Ae(t, K.bind(void 0, e));
+  return e.set(t, n), n;
+}, Ne = function(e, t) {
+  return e && !G(e) ? Ie(e) ? t(V(e)) : !1 : !0;
+}, $ = function(e, t) {
+  var r = e.get(t);
+  if (r !== void 0)
+    return r;
+  var n = Ne(t, $.bind(void 0, e));
+  return e.set(t, n), n;
+}, q = function(e) {
+  return e.dataset;
+}, we = function(e) {
+  return e.tagName === "BUTTON";
+}, j = function(e) {
+  return e.tagName === "INPUT";
+}, z = function(e) {
+  return j(e) && e.type === "radio";
+}, ye = function(e) {
+  return !((j(e) || we(e)) && (e.type === "hidden" || e.disabled));
+}, Ie = function(e) {
+  var t = e.getAttribute(Oe);
+  return ![!0, "true", ""].includes(t);
+}, S = function(e) {
+  var t;
+  return !!(e && (!((t = q(e)) === null || t === void 0) && t.focusGuard));
+}, g = function(e) {
+  return !S(e);
+}, xe = function(e) {
+  return !!e;
+}, Fe = 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(Fe);
+}, Te = [
+  "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 = Te.join(","), Se = "".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 ? Se : 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;
+      }) : []
+    );
+  }, []);
+}, Ce = function(e) {
+  var t = e.querySelectorAll("[".concat(ge, "]"));
+  return b(t).map(function(r) {
+    return P([r]);
+  }).reduce(function(r, n) {
+    return r.concat(n);
+  }, []);
+}, D = function(e, t) {
+  return b(e).filter(function(r) {
+    return K(t, r);
+  }).filter(function(r) {
+    return ye(r);
+  });
+}, R = function(e, t) {
+  return t === void 0 && (t = /* @__PURE__ */ new Map()), b(e).filter(function(r) {
+    return $(t, r);
+  });
+}, F = function(e, t, r) {
+  return Z(D(P(e, r), t), !0, r);
+}, k = function(e, t) {
+  return Z(D(P(e), t), !1);
+}, Pe = function(e, t) {
+  return D(Ce(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);
+  });
+}, De = 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;
+}, L = function(e) {
+  var t = x(e);
+  return t.filter(Boolean).reduce(function(r, n) {
+    var o = n.getAttribute(U);
+    return r.push.apply(r, o ? De(b(J(n).querySelectorAll("[".concat(U, '="').concat(o, '"]:not([').concat(pe, '="disabled"])')))) : [n]), r;
+  }, []);
+}, Q = function(e) {
+  return e.activeElement ? e.activeElement.shadowRoot ? Q(e.activeElement.shadowRoot) : e.activeElement : void 0;
+}, _ = function() {
+  return document.activeElement ? document.activeElement.shadowRoot ? Q(document.activeElement.shadowRoot) : document.activeElement : void 0;
+}, Le = function(e) {
+  return e === document.activeElement;
+}, _e = function(e) {
+  return !!b(e.querySelectorAll("iframe")).some(function(t) {
+    return Le(t);
+  });
+}, Be = function(e) {
+  var t = document && _();
+  return !t || t.dataset && t.dataset.focusGuard ? !1 : L(e).some(function(r) {
+    return p(r, t) || _e(r);
+  });
+}, Ue = function() {
+  var e = document && _();
+  return e ? b(document.querySelectorAll("[".concat(he, "]"))).some(function(t) {
+    return p(t, e);
+  }) : !1;
+}, Re = function(e, t) {
+  return t.filter(z).filter(function(r) {
+    return r.name === e.name;
+  }).filter(function(r) {
+    return r.checked;
+  })[0] || e;
+}, B = function(e, t) {
+  return z(e) && e.name ? Re(e, t) : e;
+}, ke = function(e) {
+  var t = /* @__PURE__ */ new Set();
+  return e.forEach(function(r) {
+    return t.add(B(r, e));
+  }), e.filter(function(r) {
+    return t.has(r);
+  });
+}, M = function(e) {
+  return e[0] && e.length > 1 ? B(e[0], e) : e[0];
+}, H = function(e, t) {
+  return e.length > 1 ? e.indexOf(B(e[t], e)) : t;
+}, X = "NEW_FOCUS", Me = function(e, t, r, n) {
+  var o = e.length, i = e[0], a = e[o - 1], u = S(r);
+  if (!(r && e.indexOf(r) >= 0)) {
+    var s = r !== void 0 ? t.indexOf(r) : -1, f = n ? t.indexOf(n) : s, d = n ? e.indexOf(n) : -1, c = s - f, m = t.indexOf(i), l = t.indexOf(a), v = ke(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 || d === -1)
+      return X;
+    if (!c && d >= 0)
+      return d;
+    if (s <= m && u && Math.abs(c) > 1)
+      return N;
+    if (s >= l && u && Math.abs(c) > 1)
+      return A;
+    if (c && Math.abs(E) > 1)
+      return d;
+    if (s <= m)
+      return N;
+    if (s > l)
+      return A;
+    if (c)
+      return Math.abs(c) > 1 ? d : (o + d + c) % o;
+  }
+}, T = function(e, t) {
+  return t === void 0 && (t = []), t.push(e), e.parentNode && T(e.parentNode.host || e.parentNode, t), t;
+}, w = function(e, t) {
+  for (var r = T(e), n = T(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 = x(e), o = x(t), i = n[0], a = !1;
+  return o.filter(Boolean).forEach(function(u) {
+    a = w(a || u, u) || a, r.filter(Boolean).forEach(function(s) {
+      var f = w(i, s);
+      f && (!a || p(f, a) ? a = f : a = w(f, a));
+    });
+  }), a;
+}, He = function(e, t) {
+  return e.reduce(function(r, n) {
+    return r.concat(Pe(n, t));
+  }, []);
+}, We = function(e) {
+  return function(t) {
+    var r;
+    return t.autofocus || !!(!((r = q(t)) === null || r === void 0) && r.autofocus) || e.indexOf(t) >= 0;
+  };
+}, Ve = 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(xe);
+}, Ge = function(e, t) {
+  var r = document && _(), n = L(e).filter(g), o = ee(r || e, e, n), i = /* @__PURE__ */ new Map(), a = k(n, i), u = F(n, i).filter(function(l) {
+    var v = l.node;
+    return g(v);
+  });
+  if (!(!u[0] && (u = a, !u[0]))) {
+    var s = k([o], i).map(function(l) {
+      var v = l.node;
+      return v;
+    }), f = Ve(s, u), d = f.map(function(l) {
+      var v = l.node;
+      return v;
+    }), c = Me(d, s, r, t);
+    if (c === X) {
+      var m = R(a.map(function(l) {
+        var v = l.node;
+        return v;
+      })).filter(We(He(n, i)));
+      return {
+        node: m && m.length ? M(m) : M(R(d))
+      };
+    }
+    return c === void 0 ? c : f[c];
+  }
+}, Ke = function(e) {
+  var t = L(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: S(u)
+    };
+  });
+}, $e = Ke, qe = function(e, t) {
+  "focus" in e && e.focus(t), "contentWindow" in e && e.contentWindow && e.contentWindow.focus();
+}, y = 0, I = !1, je = function(e, t, r) {
+  r === void 0 && (r = {});
+  var n = Ge(e, t);
+  if (!I && 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"), I = !0, setTimeout(function() {
+        I = !1;
+      }, 1);
+      return;
+    }
+    y++, qe(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 ze = (e) => requestAnimationFrame(e), Ze = (e, t) => {
+  const r = t.findIndex((n) => n.node === e);
+  return r === -1 ? 0 : r;
+}, Ye = (e, t) => {
+  var i;
+  const r = document.activeElement, n = $e(t), o = Ze(r, n) + e;
+  return ((i = n[o]) == null ? void 0 : i.node) || r;
+}, Je = (e, t) => {
+  const r = e.key.toLowerCase();
+  return {
+    isArrowNext: r === t[0],
+    isArrowPrev: r === t[1]
+  };
+}, Qe = {
+  behavior: "smooth",
+  block: "center",
+  inline: "center"
+}, Xe = (e) => {
+  const t = W(null), { stop: r } = me(
+    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, d = f.tagName, c = f.getAttribute("role"), m = d === "DIALOG", l = i.includes(c), v = a.includes(c), O = u.includes(d), E = oe(e) ? e.value === f : e === f;
+      if (m || E)
+        return;
+      if (v && t.value || (l || O) || !m && c === "dialog") {
+        o.stopPropagation(), o.preventDefault();
+        return;
+      }
+    }
+  };
+  return ne(() => {
+    r();
+  }), { handleKeydownEscape: n };
+}, et = 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
+    }
+  },
+  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 || Ue() || !this.lastFocusedElement) && (Be(this.$refs.root) || je(this.$refs.root, this.lastFocusedElement, {
+        focusOptions: { preventScroll: !0 }
+      }), this.lastFocusedElement = document.activeElement);
+    },
+    /**
+     * On blur, trap the focus inside!
+     */
+    onBlur() {
+      this.disabled || ze(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 } = Je(e, this.arrowOrder);
+      if (r || t) {
+        e.preventDefault(), e.stopPropagation();
+        const n = Ye(r ? 1 : -1, this.$el);
+        if (n.focus(), "scrollIntoView" in n) {
+          const o = "scrollBehavior" in document.documentElement.style ? Qe : !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: ve
+  },
+  setup() {
+    const e = W(null), { handleKeydownEscape: t } = Xe(e);
+    return { root: e, handleKeydownEscape: t };
+  }
+});
+function tt(e, t, r, n, o, i) {
+  return e.useHasSlot(e.$slots)("default") ? (se(), ie("div", ce({
+    key: 0,
+    ref: "root",
+    class: "b-focus-trap",
+    "data-testid": "focus-trap",
+    tabindex: "-1"
+  }, fe(e.arrowNavigation ? { keydown: e.onKeyDown } : {}, !0), {
+    onFocusout: t[0] || (t[0] = (...a) => e.onBlur && e.onBlur(...a)),
+    onKeydown: t[1] || (t[1] = de((...a) => e.handleKeydownEscape && e.handleKeydownEscape(...a), ["esc"]))
+  }), [
+    le(e.$slots, "default", {}, void 0, !0)
+  ], 16)) : ue("", !0);
+}
+const ut = /* @__PURE__ */ be(et, [["render", tt], ["__scopeId", "data-v-f430864b"]]);
+export {
+  ut as B,
+  Ye as g
+};
+//# sourceMappingURL=focus-trap.CnKbO3b1.js.map