@adyen/bento-vue2 1.3.0 → 1.4.0

package/dist/chunks/{index.0cf00b47.js → index.bd734551.js}

@@ -1,43 +1,43 @@
-import { defineComponent as n, inject as i, computed as o } from "vue";
+import { defineComponent as n, inject as i, computed as r } from "vue";
 import { n as a } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { B as c, a as l } from "./button.d0c9527d.js";
-import { BentoInfoIcon as _ } from "../info-icon.js";
-import { B as u, b as r } from "./index.56858f4e.js";
-import { C as p } from "./copy.5a4cbd4d.js";
-import { S as d } from "./search.a8055e95.js";
-import { b as m } from "./tooltip.2aff4fa6.js";
-import "../assets/index29.css";
+import { a as c } from "./button.fb307df3.js";
+import { BentoInfoIcon as l } from "../info-icon.js";
+import { B as _, a as o } from "./index.45295dd3.js";
+import { C as u } from "./copy.ac796536.js";
+import { S as p } from "./search.a8055e95.js";
+import { b as d } from "./tooltip.a47ace87.js";
+import "../assets/index33.css";
 const f = n({
   name: "bento-structured-list"
 });
-var y = function() {
+var m = function() {
   var t = this, e = t._self._c;
   return t._self._setupProxy, e("dl", { staticClass: "b-structured-list" }, [t._t("default")], 2);
-}, v = [], b = /* @__PURE__ */ a(
+}, y = [], b = /* @__PURE__ */ a(
   f,
+  m,
   y,
-  v,
   !1,
   null,
-  "500c9459",
+  "94635ffe",
   null,
   null
 );
-const V = b.exports, h = Symbol("structured list condensed style injection key"), C = {
+const O = b.exports, v = Symbol("structured list condensed style injection key"), h = {
   "en-US": {
     search: "Search"
   }
-}, T = n({
-  i18n: { messages: C },
+}, C = n({
+  i18n: { messages: h },
   name: "bento-structured-list-item",
   components: {
     BentoButton: c,
-    BentoInfoIcon: _,
-    BentoTypography: u,
-    Copy: p,
-    SearchIcon: d
+    BentoInfoIcon: l,
+    BentoTypography: _,
+    Copy: u,
+    SearchIcon: p
   },
-  directives: { BentoTooltipDirective: m },
+  directives: { BentoTooltipDirective: d },
   props: {
     /**
      * Label to display for the value
@@ -76,39 +76,37 @@ const V = b.exports, h = Symbol("structured list condensed style injection key")
     }
   },
   setup() {
-    const s = i(h, !1), t = o(() => ({
+    const s = i(v, !1), t = r(() => ({
       "b-structured-list-item--condensed": s
-    })), e = o(
-      () => s ? r.CAPTION : r.BODY
+    })), e = r(
+      () => s ? o.CAPTION : o.BODY
     );
     return {
       // Values
       conditionalClasses: t,
-      labelTypographyVariant: e,
-      // Types
-      BentoButtonVariant: l
+      labelTypographyVariant: e
     };
   }
 });
-var B = function() {
+var S = function() {
   var t = this, e = t._self._c;
-  return t._self._setupProxy, e("div", { staticClass: "b-structured-list-item", class: t.conditionalClasses }, [e("dt", { staticClass: "b-structured-list-item__label" }, [e("bento-typography", { attrs: { variant: t.labelTypographyVariant } }, [t._v(" " + t._s(t.label) + " ")]), t.labelInfo ? e("bento-info-icon", { staticClass: "b-structured-list-item__icon", attrs: { "tooltip-text": t.labelInfo } }) : t._e()], 1), e("dd", { staticClass: "b-structured-list-item__value" }, [t._t("default"), t.copy ? e("copy", { staticClass: "b-structured-list-item__icon", attrs: { text: t.copy } }) : t._e(), t.search ? e("bento-button", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive:top", value: t.searchTooltip ? t.searchTooltip : t.$t("search"), expression: "searchTooltip ? searchTooltip : $t('search')", arg: "top" }], staticClass: "b-structured-list-item__icon", attrs: { variant: t.BentoButtonVariant.TERTIARY }, on: { click: t.search }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+  return t._self._setupProxy, e("div", { staticClass: "b-structured-list-item", class: t.conditionalClasses }, [e("dt", { staticClass: "b-structured-list-item__label" }, [e("bento-typography", { attrs: { variant: t.labelTypographyVariant } }, [t._v(" " + t._s(t.label) + " ")]), t.labelInfo ? e("bento-info-icon", { staticClass: "b-structured-list-item__icon", attrs: { "tooltip-text": t.labelInfo } }) : t._e()], 1), e("dd", { staticClass: "b-structured-list-item__value" }, [t._t("default"), t.copy ? e("copy", { staticClass: "b-structured-list-item__icon", attrs: { text: t.copy } }) : t._e(), t.search ? e("bento-button", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive:top", value: t.searchTooltip ? t.searchTooltip : t.$t("search"), expression: "searchTooltip ? searchTooltip : $t('search')", arg: "top" }], staticClass: "b-structured-list-item__icon", attrs: { variant: "tertiary" }, on: { click: t.search }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
     return [e("search-icon", { attrs: { "svg-title": t.$t("search") } })];
   }, proxy: !0 }], null, !1, 1678634924) }) : t._e()], 2)]);
-}, S = [], g = /* @__PURE__ */ a(
-  T,
-  B,
+}, T = [], g = /* @__PURE__ */ a(
+  C,
   S,
+  T,
   !1,
   null,
-  "ef6911c9",
+  "b8ef6948",
   null,
   null
 );
-const O = g.exports;
+const R = g.exports;
 export {
-  V as B,
-  h as S,
-  O as a
+  O as B,
+  v as S,
+  R as a
 };
-//# sourceMappingURL=index.0cf00b47.js.map
+//# sourceMappingURL=index.bd734551.js.map

package/dist/chunks/index.bd734551.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.bd734551.js","sources":["../../src/components/structured-list/structured-list.vue","../../src/components/structured-list/structured-list.keys.ts","../../src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" type=\"Klarna\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-structured-list',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\">\n            <bento-typography :variant=\"labelTypographyVariant\">\n                {{ label }}\n            </bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : $t('search')\"\n                class=\"b-structured-list-item__icon\"\n                variant=\"tertiary\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"$t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, PropType } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, BentoTypographyVariant } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Directives\n    import { BentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-structured-list-item',\n        components: {\n            BentoButton,\n            BentoInfoIcon,\n            BentoTypography,\n            Copy,\n            SearchIcon,\n        },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Label to display for the value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text to display in info icon tooltip in the label to display for the value\n             */\n            labelInfo: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Text to copy when the user clicks `Copy` icon\n             */\n            copy: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Function to trigger when user clicks `Search` icon\n             */\n            search: {\n                type: Function as PropType<(event: Event) => void>,\n                default: undefined,\n            },\n            /**\n             * Text to display when the user hovers over `Search` icon\n             */\n            searchTooltip: {\n                type: String,\n                default: undefined,\n            },\n        },\n        setup() {\n            const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n            const conditionalClasses = computed(() => ({\n                'b-structured-list-item--condensed': isCondensed,\n            }));\n\n            const labelTypographyVariant = computed(() =>\n                isCondensed ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY\n            );\n\n            return {\n                // Values\n                conditionalClasses,\n                labelTypographyVariant,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["_sfc_main$1","defineComponent","STRUCTURED_LIST_CONDENSED_INJECTION_KEY","_sfc_main","messages","BentoButton","BentoInfoIcon","BentoTypography","Copy","SearchIcon","BentoTooltipDirective","isCondensed","inject","conditionalClasses","computed","labelTypographyVariant","BentoTypographyVariant"],"mappings":";;;;;;;;;AAgCA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAEA,CAAA;;;;;;;;;;;;;;qBClCaC,IAAA,OAAA,+CAAA;;;;GCqEbC,IAAAF,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAG,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,QAAA;AAEA,UAAAC,IAAAC,EAAAV,GAAA,EAAA,GAEAW,IAAAC,EAAA,OAAA;AAAA,MAAA,qCAAAH;AAAA,IACA,EAAA,GAGAI,IAAAD;AAAA,MAAA,MAAAH,IAAAK,EAAA,UAAAA,EAAA;AAAA,IACA;AAGA,WAAA;AAAA;AAAA,MAAA,oBAAAH;AAAA,MAEA,wBAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{index.133e4da0.js → index.c85a1ab9.js}

@@ -1,13 +1,14 @@
 import { defineComponent as re } from "vue";
-import { n as ne } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import "../assets/index26.css";
-var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-lock", ue = "data-autofocus-inside", ie = "data-no-autofocus", m = function(e) {
+import { u as ne } from "./use-has-slot.6052d56a.js";
+import { n as ae } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import "../assets/index22.css";
+var R = "data-focus-lock", oe = "data-focus-lock-disabled", ue = "data-no-focus-lock", ie = "data-autofocus-inside", ce = "data-no-autofocus", m = function(e) {
   for (var t = Array(e.length), r = 0; r < e.length; ++r)
     t[r] = e[r];
   return t;
 }, E = function(e) {
   return Array.isArray(e) ? e : [e];
-}, ce = function(e) {
+}, se = function(e) {
   if (e.nodeType !== Node.ELEMENT_NODE)
     return !1;
   var t = window.getComputedStyle(e, null);
@@ -19,43 +20,43 @@ var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-
   ) : e.parentNode;
 }, V = function(e) {
   return e === document || e && e.nodeType === Node.DOCUMENT_NODE;
-}, se = function(e, t) {
-  return !e || V(e) || !ce(e) && t(k(e));
+}, fe = function(e, t) {
+  return !e || V(e) || !se(e) && t(k(e));
 }, W = function(e, t) {
   var r = e.get(t);
   if (r !== void 0)
     return r;
-  var n = se(t, W.bind(void 0, e));
+  var n = fe(t, W.bind(void 0, e));
   return e.set(t, n), n;
-}, fe = function(e, t) {
-  return e && !V(e) ? ve(e) ? t(k(e)) : !1 : !0;
-}, G = function(e, t) {
+}, de = function(e, t) {
+  return e && !V(e) ? me(e) ? t(k(e)) : !1 : !0;
+}, H = function(e, t) {
   var r = e.get(t);
   if (r !== void 0)
     return r;
-  var n = fe(t, G.bind(void 0, e));
+  var n = de(t, H.bind(void 0, e));
   return e.set(t, n), n;
-}, H = function(e) {
+}, G = function(e) {
   return e.dataset;
-}, de = function(e) {
+}, le = function(e) {
   return e.tagName === "BUTTON";
 }, q = function(e) {
   return e.tagName === "INPUT";
 }, $ = function(e) {
   return q(e) && e.type === "radio";
-}, le = function(e) {
-  return !((q(e) || de(e)) && (e.type === "hidden" || e.disabled));
 }, ve = function(e) {
-  var t = e.getAttribute(ie);
+  return !((q(e) || le(e)) && (e.type === "hidden" || e.disabled));
+}, me = function(e) {
+  var t = e.getAttribute(ce);
   return ![!0, "true", ""].includes(t);
 }, x = function(e) {
   var t;
-  return !!(e && (!((t = H(e)) === null || t === void 0) && t.focusGuard));
+  return !!(e && (!((t = G(e)) === null || t === void 0) && t.focusGuard));
 }, g = function(e) {
   return !x(e);
-}, me = function(e) {
+}, be = function(e) {
   return !!e;
-}, be = function(e, t) {
+}, he = function(e, t) {
   var r = e.tabIndex - t.tabIndex, n = e.index - t.index;
   if (r) {
     if (!e.tabIndex)
@@ -73,8 +74,8 @@ var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-
     };
   }).filter(function(n) {
     return !t || n.tabIndex >= 0;
-  }).sort(be);
-}, he = [
+  }).sort(he);
+}, pe = [
   "button:enabled",
   "select:enabled",
   "textarea:enabled",
@@ -92,10 +93,10 @@ var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-
   "[tabindex]",
   "[contenteditable]",
   "[autofocus]"
-], w = he.join(","), pe = "".concat(w, ", [data-focus-guard]"), z = function(e, t) {
+], w = pe.join(","), ge = "".concat(w, ", [data-focus-guard]"), z = function(e, t) {
   var r;
   return m(((r = e.shadowRoot) === null || r === void 0 ? void 0 : r.children) || e.children).reduce(function(n, a) {
-    return n.concat(a.matches(t ? pe : w) ? [a] : [], z(a));
+    return n.concat(a.matches(t ? ge : w) ? [a] : [], z(a));
   }, []);
 }, y = function(e, t) {
   return e.reduce(function(r, n) {
@@ -108,8 +109,8 @@ var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-
       }) : []
     );
   }, []);
-}, ge = function(e) {
-  var t = e.querySelectorAll("[".concat(ue, "]"));
+}, Oe = function(e) {
+  var t = e.querySelectorAll("[".concat(ie, "]"));
   return m(t).map(function(r) {
     return y([r]);
   }).reduce(function(r, n) {
@@ -119,23 +120,23 @@ var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-
   return m(e).filter(function(r) {
     return W(t, r);
   }).filter(function(r) {
-    return le(r);
+    return ve(r);
   });
 }, U = function(e, t) {
   return t === void 0 && (t = /* @__PURE__ */ new Map()), m(e).filter(function(r) {
-    return G(t, r);
+    return H(t, r);
   });
 }, _ = function(e, t, r) {
   return K(F(y(e, r), t), !0, r);
 }, B = function(e, t) {
   return K(F(y(e), t), !1);
-}, Oe = function(e, t) {
-  return F(ge(e), t);
+}, Ae = function(e, t) {
+  return F(Oe(e), t);
 }, h = function(e, t) {
   return (e.shadowRoot ? h(e.shadowRoot, t) : e.contains(t)) || Array.from(e.children).some(function(r) {
     return h(r, t);
   });
-}, Ae = function(e) {
+}, Ne = function(e) {
   for (var t = /* @__PURE__ */ new Set(), r = e.length, n = 0; n < r; n += 1)
     for (var a = n + 1; a < r; a += 1) {
       var i = e[n].compareDocumentPosition(e[a]);
@@ -150,37 +151,37 @@ var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-
   var t = E(e);
   return t.filter(Boolean).reduce(function(r, n) {
     var a = n.getAttribute(R);
-    return r.push.apply(r, a ? Ae(m(j(n).querySelectorAll("[".concat(R, '="').concat(a, '"]:not([').concat(ae, '="disabled"])')))) : [n]), r;
+    return r.push.apply(r, a ? Ne(m(j(n).querySelectorAll("[".concat(R, '="').concat(a, '"]:not([').concat(oe, '="disabled"])')))) : [n]), r;
   }, []);
 }, Z = function(e) {
   return e.activeElement ? e.activeElement.shadowRoot ? Z(e.activeElement.shadowRoot) : e.activeElement : void 0;
 }, C = function() {
   return document.activeElement ? document.activeElement.shadowRoot ? Z(document.activeElement.shadowRoot) : document.activeElement : void 0;
-}, Ne = function(e) {
-  return e === document.activeElement;
 }, Ee = function(e) {
+  return e === document.activeElement;
+}, _e = function(e) {
   return !!m(e.querySelectorAll("iframe")).some(function(t) {
-    return Ne(t);
+    return Ee(t);
   });
-}, _e = function(e) {
+}, Ie = function(e) {
   var t = document && C();
   return !t || t.dataset && t.dataset.focusGuard ? !1 : T(e).some(function(r) {
-    return h(r, t) || Ee(r);
+    return h(r, t) || _e(r);
   });
-}, Ie = function() {
+}, xe = function() {
   var e = document && C();
-  return e ? m(document.querySelectorAll("[".concat(oe, "]"))).some(function(t) {
+  return e ? m(document.querySelectorAll("[".concat(ue, "]"))).some(function(t) {
     return h(t, e);
   }) : !1;
-}, xe = function(e, t) {
+}, we = function(e, t) {
   return t.filter($).filter(function(r) {
     return r.name === e.name;
   }).filter(function(r) {
     return r.checked;
   })[0] || e;
 }, S = function(e, t) {
-  return $(e) && e.name ? xe(e, t) : e;
-}, we = function(e) {
+  return $(e) && e.name ? we(e, t) : e;
+}, ye = function(e) {
   var t = /* @__PURE__ */ new Set();
   return e.forEach(function(r) {
     return t.add(S(r, e));
@@ -191,10 +192,10 @@ var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-
   return e[0] && e.length > 1 ? S(e[0], e) : e[0];
 }, M = function(e, t) {
   return e.length > 1 ? e.indexOf(S(e[t], e)) : t;
-}, Y = "NEW_FOCUS", ye = function(e, t, r, n) {
+}, Y = "NEW_FOCUS", Fe = function(e, t, r, n) {
   var a = e.length, i = e[0], o = e[a - 1], u = x(r);
   if (!(r && e.indexOf(r) >= 0)) {
-    var c = r !== void 0 ? t.indexOf(r) : -1, l = n ? t.indexOf(n) : c, v = n ? e.indexOf(n) : -1, s = c - l, b = t.indexOf(i), f = t.indexOf(o), d = we(t), ee = r !== void 0 ? d.indexOf(r) : -1, te = ee - (n ? d.indexOf(n) : c), P = M(e, 0), D = M(e, a - 1);
+    var c = r !== void 0 ? t.indexOf(r) : -1, l = n ? t.indexOf(n) : c, v = n ? e.indexOf(n) : -1, s = c - l, b = t.indexOf(i), f = t.indexOf(o), d = ye(t), ee = r !== void 0 ? d.indexOf(r) : -1, te = ee - (n ? d.indexOf(n) : c), P = M(e, 0), D = M(e, a - 1);
     if (c === -1 || v === -1)
       return Y;
     if (!s && v >= 0)
@@ -229,23 +230,23 @@ var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-
       l && (!o || h(l, o) ? o = l : o = O(l, o));
     });
   }), o;
-}, Fe = function(e, t) {
+}, Te = function(e, t) {
   return e.reduce(function(r, n) {
-    return r.concat(Oe(n, t));
+    return r.concat(Ae(n, t));
   }, []);
-}, Te = function(e) {
+}, Ce = function(e) {
   return function(t) {
     var r;
-    return t.autofocus || !!(!((r = H(t)) === null || r === void 0) && r.autofocus) || e.indexOf(t) >= 0;
+    return t.autofocus || !!(!((r = G(t)) === null || r === void 0) && r.autofocus) || e.indexOf(t) >= 0;
   };
-}, Ce = function(e, t) {
+}, Se = 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(me);
-}, Se = function(e, t) {
+  }).filter(be);
+}, Pe = function(e, t) {
   var r = document && C(), n = T(e).filter(g), a = J(r || e, e, n), i = /* @__PURE__ */ new Map(), o = B(n, i), u = _(n, i).filter(function(f) {
     var d = f.node;
     return g(d);
@@ -254,22 +255,22 @@ var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-
     var c = B([a], i).map(function(f) {
       var d = f.node;
       return d;
-    }), l = Ce(c, u), v = l.map(function(f) {
+    }), l = Se(c, u), v = l.map(function(f) {
       var d = f.node;
       return d;
-    }), s = ye(v, c, r, t);
+    }), s = Fe(v, c, r, t);
     if (s === Y) {
       var b = U(o.map(function(f) {
         var d = f.node;
         return d;
-      })).filter(Te(Fe(n, i)));
+      })).filter(Ce(Te(n, i)));
       return {
         node: b && b.length ? L(b) : L(U(v))
       };
     }
     return s === void 0 ? s : l[s];
   }
-}, Pe = function(e) {
+}, De = function(e) {
   var t = T(e).filter(g), r = J(e, e, t), n = /* @__PURE__ */ new Map(), a = _([r], n, !0), i = _(t, n).filter(function(o) {
     var u = o.node;
     return g(u);
@@ -286,11 +287,11 @@ var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-
       guard: x(u)
     };
   });
-}, De = Pe, Re = function(e, t) {
+}, Re = De, Ue = function(e, t) {
   "focus" in e && e.focus(t), "contentWindow" in e && e.contentWindow && e.contentWindow.focus();
-}, A = 0, N = !1, Ue = function(e, t, r) {
+}, A = 0, N = !1, Be = function(e, t, r) {
   r === void 0 && (r = {});
-  var n = Se(e, t);
+  var n = Pe(e, t);
   if (!N && n) {
     if (A > 2) {
       console.error("FocusLock: focus-fighting detected. Only one focus management system could be active. See https://github.com/theKashey/focus-lock/#focus-fighting"), N = !0, setTimeout(function() {
@@ -298,27 +299,27 @@ var R = "data-focus-lock", ae = "data-focus-lock-disabled", oe = "data-no-focus-
       }, 1);
       return;
     }
-    A++, Re(n.node, r.focusOptions), A--;
+    A++, Ue(n.node, r.focusOptions), A--;
   }
 }, p = /* @__PURE__ */ ((e) => (e.VERTICAL = "vertical", e.HORIZONTAL = "horizontal", e))(p || {}), Q = /* @__PURE__ */ ((e) => (e.ARROW_UP = "arrowup", e.ARROW_DOWN = "arrowdown", e))(Q || {}), X = /* @__PURE__ */ ((e) => (e.ARROW_LEFT = "arrowleft", e.ARROW_RIGHT = "arrowright", e))(X || {});
-const Be = (e) => requestAnimationFrame(e), Le = (e, t) => {
+const Le = (e) => requestAnimationFrame(e), Me = (e, t) => {
   const r = t.findIndex((n) => n.node === e);
   return r === -1 ? 0 : r;
-}, Me = (e, t) => {
+}, ke = (e, t) => {
   var i;
-  const r = document.activeElement, n = De(t), a = Le(r, n) + e;
+  const r = document.activeElement, n = Re(t), a = Me(r, n) + e;
   return ((i = n[a]) == null ? void 0 : i.node) || r;
-}, ke = (e, t) => {
+}, Ve = (e, t) => {
   const r = e.key.toLowerCase();
   return {
     isArrowNext: r === t[0],
     isArrowPrev: r === t[1]
   };
-}, Ve = {
+}, We = {
   behavior: "smooth",
   block: "center",
   inline: "center"
-}, We = re({
+}, He = re({
   name: "bento-focus-trap",
   props: {
     /**
@@ -374,13 +375,13 @@ const Be = (e) => requestAnimationFrame(e), Le = (e, t) => {
      * `focus-lock` can determine the next interable element to focus on.
      */
     async setFocusInside() {
-      (document.activeElement === document.body || Ie() || !this.lastFocusedElement) && (_e(this.$el) || Ue(this.$el, this.lastFocusedElement), this.lastFocusedElement = document.activeElement);
+      (document.activeElement === document.body || xe() || !this.lastFocusedElement) && (Ie(this.$refs.root) || Be(this.$refs.root, this.lastFocusedElement), this.lastFocusedElement = document.activeElement);
     },
     /**
      * On blur, trap the focus inside!
      */
     onBlur() {
-      this.disabled || Be(this.setFocusInside);
+      this.disabled || Le(this.setFocusInside);
     },
     /**
      * If the no arrow navigation is enabled
@@ -401,12 +402,12 @@ const Be = (e) => requestAnimationFrame(e), Le = (e, t) => {
     onKeyDown(e) {
       if (this.disabled || document.activeElement.isContentEditable || this.shouldPreventNavigation())
         return;
-      const { isArrowNext: t, isArrowPrev: r } = ke(e, this.arrowOrder);
+      const { isArrowNext: t, isArrowPrev: r } = Ve(e, this.arrowOrder);
       if (r || t) {
         e.preventDefault(), e.stopPropagation();
-        const n = Me(r ? 1 : -1, this.$el);
+        const n = ke(r ? 1 : -1, this.$el);
         if (n.focus(), "scrollIntoView" in n) {
-          const a = "scrollBehavior" in document.documentElement.style ? Ve : !1;
+          const a = "scrollBehavior" in document.documentElement.style ? We : !1;
           n.scrollIntoView(a);
         }
       }
@@ -417,25 +418,26 @@ const Be = (e) => requestAnimationFrame(e), Le = (e, t) => {
     disable() {
       const e = this.lastFocusedElement || this.$el.parentNode || document.body;
       e && e.focus();
-    }
+    },
+    useHasSlot: ne
   }
 });
 var Ge = function() {
   var t = this, r = t._self._c;
-  return t._self._setupProxy, t.$slots.default ? r("div", t._g({ staticClass: "b-focus-trap", attrs: { "data-testid": "focus-trap", tabindex: "-1" }, on: { focusout: t.onBlur } }, t.arrowNavigation ? { keydown: t.onKeyDown } : {}), [t._t("default")], 2) : t._e();
-}, He = [], qe = /* @__PURE__ */ ne(
-  We,
-  Ge,
+  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 } }, t.arrowNavigation ? { keydown: t.onKeyDown } : {}), [t._t("default")], 2) : t._e();
+}, qe = [], $e = /* @__PURE__ */ ae(
   He,
+  Ge,
+  qe,
   !1,
   null,
-  "1654dbc7",
+  "1dbb775c",
   null,
   null
 );
-const ze = qe.exports;
+const Ze = $e.exports;
 export {
-  ze as B,
-  Me as g
+  Ze as B,
+  ke as g
 };
-//# sourceMappingURL=index.133e4da0.js.map
+//# sourceMappingURL=index.c85a1ab9.js.map