@adyen/bento-vue2 1.26.0 → 1.27.0

package/dist/tabs.js

@@ -1,11 +1,11 @@
-import { defineComponent as m, toRefs as E, ref as b, provide as u, computed as w, inject as T, onUnmounted as A, watch as N, nextTick as B } from "vue";
-import { E as k, T as I, a as y } from "./chunks/tabs.keys.358742f2.js";
-import { n as g } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as R } from "./chunks/index.dd30e538.js";
-import { g as D } from "./chunks/unique-id.a2a2b458.js";
-import { F as S } from "./chunks/fixed-scroller.4eb9a9ac.js";
-import "./assets/index43.css";
-const K = m({
+import { defineComponent as I, toRefs as w, ref as b, provide as p, computed as A, inject as m, onUnmounted as N, watch as B, nextTick as k } from "vue";
+import { E as R, T as y, a as g } from "./chunks/tabs.keys.358742f2.js";
+import { n as h } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as D } from "./chunks/index.e29a6907.js";
+import { g as S } from "./chunks/unique-id.a2a2b458.js";
+import { F as K } from "./chunks/fixed-scroller.82ef6187.js";
+import "./assets/index22.css";
+const F = I({
   props: {
     /**
      * Title of the tab
@@ -29,40 +29,40 @@ const K = m({
       default: !1
     }
   },
-  setup(n) {
-    const { disabled: e, withNotificationIndicator: t } = E(n), l = b();
-    u(k, (s) => {
-      l.value = s;
+  setup(a) {
+    const { disabled: e, withNotificationIndicator: t } = w(a), l = b();
+    p(R, (T) => {
+      l.value = T;
     });
-    const d = w(() => l.value ?? n.title), _ = T(I), r = T(y), { id: v, unregisterTab: p } = _({ disabled: e, title: d, withNotificationIndicator: t });
-    return A(() => p()), { activeTabId: r, id: v, computedTitle: d };
+    const r = A(() => l.value ?? a.title), _ = m(y), c = m(g), { id: u, unregisterTab: v } = _({ disabled: e, title: r, withNotificationIndicator: t });
+    return N(() => v()), { activeTabId: c, id: u, computedTitle: r };
   }
 });
-var F = function() {
+var L = function() {
   var e = this, t = e._self._c;
   return e._self._setupProxy, t("div", { directives: [{ name: "show", rawName: "v-show", value: e.activeTabId === e.id, expression: "activeTabId === id" }], staticClass: "b-tab", attrs: { id: `${e.id}-tabpanel`, role: "tabpanel", "aria-labelledby": e.id } }, [e.activeTabId === e.id ? [e._t("default")] : e._e()], 2);
-}, L = [], O = /* @__PURE__ */ g(
-  K,
+}, O = [], X = /* @__PURE__ */ h(
   F,
   L,
+  O,
   !1,
   null,
   "7e802d0d",
   null,
   null
 );
-const H = O.exports, h = (n, e) => {
-  const t = n === 0 ? e.length - 1 : n - 1;
-  return e[t].disabled ? h(t, e) : t;
-}, x = (n, e) => {
-  const t = n === e.length - 1 ? 0 : n + 1;
+const M = X.exports, x = (a, e) => {
+  const t = a === 0 ? e.length - 1 : a - 1;
   return e[t].disabled ? x(t, e) : t;
+}, C = (a, e) => {
+  const t = a === e.length - 1 ? 0 : a + 1;
+  return e[t].disabled ? C(t, e) : t;
 };
-var f = /* @__PURE__ */ ((n) => (n.ACTIVE_TAB_INDEX = "update:active-tab-index", n))(f || {});
-const X = m({
+var f = /* @__PURE__ */ ((a) => (a.ACTIVE_TAB_INDEX = "update:active-tab-index", a))(f || {});
+const Y = I({
   components: {
-    BentoTypography: R,
-    FixedScroller: S
+    BentoTypography: D,
+    FixedScroller: K
   },
   props: {
     /**
@@ -71,73 +71,74 @@ const X = m({
     activeTabIndex: { type: Number, default: 0 }
   },
   emits: [f.ACTIVE_TAB_INDEX],
-  setup(n, { emit: e }) {
-    const t = b([]), l = b(null), a = b("");
-    u(y, a);
-    const d = (s) => () => {
+  setup(a, { emit: e }) {
+    const t = b([]), l = b(null), i = b(), r = b("");
+    p(g, r);
+    const _ = (n) => () => {
       var o;
-      t.value = (o = t.value) == null ? void 0 : o.filter(({ id: i }) => i !== s);
+      t.value = (o = t.value) == null ? void 0 : o.filter(({ id: s }) => s !== n);
     };
-    u(I, ({ title: s, disabled: o, withNotificationIndicator: i }) => {
-      const c = D("b-tab");
-      return t.value.push({ disabled: o, id: c, title: s, withNotificationIndicator: i }), { id: c, unregisterTab: d(c) };
+    p(y, ({ title: n, disabled: o, withNotificationIndicator: s }) => {
+      const d = S("b-tab");
+      return t.value.push({ disabled: o, id: d, title: n, withNotificationIndicator: s }), { id: d, unregisterTab: _(d) };
     });
-    const r = (s) => {
-      if (s.code === "ArrowLeft" || s.code === "ArrowRight") {
-        const o = t.value.find((c) => document.activeElement.id === c.id);
-        let i = t.value.indexOf(o);
-        s.code === "ArrowLeft" ? i = h(i, t.value) : s.code === "ArrowRight" && (i = x(i, t.value)), l.value.children[i].focus();
+    const u = (n) => {
+      if (n.code === "ArrowLeft" || n.code === "ArrowRight") {
+        const o = t.value.find((d) => document.activeElement.id === d.id);
+        let s = t.value.indexOf(o);
+        n.code === "ArrowLeft" ? s = x(s, t.value) : n.code === "ArrowRight" && (s = C(s, t.value)), l.value.children[s].focus();
       }
     };
-    return N(
-      [() => n.activeTabIndex, t],
-      ([s, o]) => {
-        B(() => {
-          var c;
-          const i = o[s];
-          a.value = i && !i.disabled ? i.id : (c = t.value.find(({ disabled: C }) => !C)) == null ? void 0 : c.id;
+    return B(
+      [() => a.activeTabIndex, t],
+      ([n, o]) => {
+        k(() => {
+          var d;
+          const s = o[n];
+          r.value = s && !s.disabled ? s.id : (d = t.value.find(({ disabled: E }) => !E)) == null ? void 0 : d.id;
         });
       },
       { immediate: !0 }
     ), {
       tabs: t,
       tablist: l,
-      activeTabId: a,
-      onKeydownTabsNavigation: r,
-      handleTabChange: (s) => {
-        a.value = s;
-        const o = t.value.findIndex(({ id: i }) => i === a.value);
+      tablistwrapper: i,
+      activeTabId: r,
+      onKeydownTabsNavigation: u,
+      handleTabChange: (n) => {
+        r.value = n;
+        const o = t.value.findIndex(({ id: s }) => s === r.value);
         e(f.ACTIVE_TAB_INDEX, o);
       },
-      isDisabled: (s) => s ? "disabled" : !1
+      isDisabled: (n) => n ? "disabled" : !1
     };
   }
 });
-var Y = function() {
+var P = function() {
   var e = this, t = e._self._c;
-  return e._self._setupProxy, t("div", { staticClass: "b-tabs" }, [t("fixed-scroller", { staticClass: "b-tabs__tab-list-wrapper", attrs: { condensed: "", "extra-padding-top": 5 } }, [t("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: e.onKeydownTabsNavigation } }, e._l(e.tabs, function({ disabled: l, id: a, title: d, withNotificationIndicator: _ }) {
-    return t("button", { key: a, staticClass: "b-tabs__tab", class: {
-      "b-tabs__tab--active": e.activeTabId === a,
+  return e._self._setupProxy, t("div", { staticClass: "b-tabs" }, [t("fixed-scroller", { ref: "tablistwrapper", staticClass: "b-tabs__tab-list-wrapper", attrs: { condensed: "", "extra-padding-top": 5 } }, [t("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: e.onKeydownTabsNavigation } }, e._l(e.tabs, function({ disabled: l, id: i, title: r, withNotificationIndicator: _ }) {
+    return t("button", { key: i, staticClass: "b-tabs__tab", class: {
+      "b-tabs__tab--active": e.activeTabId === i,
       "b-tabs__tab--disabled": l
-    }, attrs: { id: a, role: "tab", type: "button", "aria-controls": `${a}-tabpanel`, "aria-selected": e.activeTabId === a ? "true" : "false", tabindex: e.activeTabId === a && !l.value ? null : -1, disabled: e.isDisabled(l) }, on: { click: function(r) {
-      return e.handleTabChange(a);
-    }, keydown: function(r) {
-      return !r.type.indexOf("key") && e._k(r.keyCode, "enter", 13, r.key, "Enter") && e._k(r.keyCode, "space", 32, r.key, [" ", "Spacebar"]) ? null : e.handleTabChange(a);
-    } } }, [t("span", { staticClass: "b-tabs__tab-text" }, [t("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(d) + " ")]), _ ? t("span", { staticClass: "b-tabs__tab-notification-dot", attrs: { "aria-hidden": "true" } }) : e._e()], 1), t("span", { directives: [{ name: "show", rawName: "v-show", value: e.activeTabId === a, expression: "activeTabId === id" }], staticClass: "b-tabs__tab-underline", attrs: { "aria-hidden": "true" } })]);
+    }, attrs: { id: i, role: "tab", type: "button", "aria-controls": `${i}-tabpanel`, "aria-selected": e.activeTabId === i ? "true" : "false", tabindex: e.activeTabId === i && !l.value ? null : -1, disabled: e.isDisabled(l) }, on: { click: function(c) {
+      return e.handleTabChange(i);
+    }, keydown: function(c) {
+      return !c.type.indexOf("key") && e._k(c.keyCode, "enter", 13, c.key, "Enter") && e._k(c.keyCode, "space", 32, c.key, [" ", "Spacebar"]) ? null : e.handleTabChange(i);
+    } } }, [t("span", { staticClass: "b-tabs__tab-text" }, [t("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(r) + " ")]), _ ? t("span", { staticClass: "b-tabs__tab-notification-dot", attrs: { "aria-hidden": "true" } }) : e._e()], 1), t("span", { directives: [{ name: "show", rawName: "v-show", value: e.activeTabId === i, expression: "activeTabId === id" }], staticClass: "b-tabs__tab-underline", attrs: { "aria-hidden": "true" } })]);
   }), 0)]), e._t("default")], 2);
-}, P = [], $ = /* @__PURE__ */ g(
-  X,
+}, $ = [], G = /* @__PURE__ */ h(
   Y,
   P,
+  $,
   !1,
   null,
-  "7c9f829f",
+  "7fc977e3",
   null,
   null
 );
-const M = $.exports;
+const Q = G.exports;
 export {
-  H as BentoTab,
-  M as BentoTabs
+  M as BentoTab,
+  Q as BentoTabs
 };
 //# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../src/components/tabs/components/tab.vue","../src/components/tabs/tabs.utils.ts","../src/components/tabs/tabs.types.ts","../src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" class=\"b-tab\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <template v-if=\"activeTabId === id\">\n            <slot />\n        </template>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, provide, ref, toRefs } from 'vue';\n    import {\n        EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY,\n        TABS_ACTIVE_TAB_ID_KEY,\n        TABS_REGISTER_TAB_INJECTION_KEY,\n    } from '../tabs.keys';\n    import { BentoTabsRegisterTab } from '../tabs.types';\n    import { BentoTabProvidedTitle } from './tab.types';\n\n    export default defineComponent({\n        props: {\n            /**\n             * Title of the tab\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Determines whether the tab is disabled\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays the tab with a notification indicator\n             */\n            withNotificationIndicator: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            // External title injection\n            const { disabled, withNotificationIndicator } = toRefs(props);\n            const componentTitle = ref();\n            const setTitle: BentoTabProvidedTitle = (value: string) => {\n                componentTitle.value = value;\n            };\n            provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle);\n\n            const computedTitle = computed(() => (componentTitle.value ?? props.title) as string);\n\n            const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY);\n            const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY);\n\n            const { id, unregisterTab } = registerTab({ disabled, title: computedTitle, withNotificationIndicator });\n\n            onUnmounted(() => unregisterTab());\n\n            return { activeTabId, id, computedTitle };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tab.scss\" />\n","import { BentoTab } from './components/tab.types';\n\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","import type { Ref } from 'vue';\n\nexport type BentoTabsRegisterTab = (props: {\n    disabled: Ref<boolean>;\n    title: Ref<string>;\n    withNotificationIndicator: Ref<boolean>;\n}) => { id: string; unregisterTab: () => void };\n\nexport enum BentoTabsEvent {\n    ACTIVE_TAB_INDEX = 'update:active-tab-index',\n}\n","<template>\n    <div class=\"b-tabs\">\n        <fixed-scroller condensed :extra-padding-top=\"5\" class=\"b-tabs__tab-list-wrapper\">\n            <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n                <button\n                    v-for=\"{ disabled, id, title, withNotificationIndicator } in tabs\"\n                    :id=\"id\"\n                    :key=\"id\"\n                    role=\"tab\"\n                    type=\"button\"\n                    class=\"b-tabs__tab\"\n                    :class=\"{\n                        'b-tabs__tab--active': activeTabId === id,\n                        'b-tabs__tab--disabled': disabled,\n                    }\"\n                    :aria-controls=\"`${id}-tabpanel`\"\n                    :aria-selected=\"activeTabId === id ? 'true' : 'false'\"\n                    :tabindex=\"activeTabId === id && !disabled.value ? null : -1\"\n                    :disabled=\"isDisabled(disabled)\"\n                    @click=\"handleTabChange(id)\"\n                    @keydown.enter.space=\"handleTabChange(id)\"\n                >\n                    <span class=\"b-tabs__tab-text\">\n                        <bento-typography class=\"b-tabs__tab-title\" el=\"span\" variant=\"body\" stronger>\n                            {{ title }}\n                        </bento-typography>\n                        <span\n                            v-if=\"withNotificationIndicator\"\n                            class=\"b-tabs__tab-notification-dot\"\n                            aria-hidden=\"true\"\n                        ></span>\n                    </span>\n                    <span v-show=\"activeTabId === id\" class=\"b-tabs__tab-underline\" aria-hidden=\"true\"></span>\n                </button>\n            </div>\n        </fixed-scroller>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, nextTick, provide, ref, Ref, watch } from 'vue';\n\n    // components\n    import { BentoTypography } from '@/components/typography';\n    import { FixedScroller } from '@/internal';\n\n    // utils\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getNextTabIndex, getPreviousTabIndex } from './tabs.utils';\n\n    // types\n    import { BentoTab } from './components/tab.types';\n    import { BentoTabsEvent, BentoTabsRegisterTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Tabs are used to navigate between different, but related content views within a page.\n     * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n     *\n     * @example\n     * import { BentoTabs, BentoTab } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTabs, BentoTab },\n     *     template: `\n     *         <bento-tabs v-bind=\"$props\">\n     *             <bento-tab title=\"Maria Ahlefeldt\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *             <bento-tab title=\"Carl Andersen\">\n     *                 (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.\n     *             </bento-tab>\n     *             <bento-tab title=\"Karl Truffel\">\n     *                 (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel.\n     *             </bento-tab>\n     *             <bento-tab title=\"Maria Ahlefeldt\" :disabled=\"true\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *         </bento-tabs>\n     *     `\n     * };\n     */\n\n    // component\n    export default defineComponent({\n        components: {\n            BentoTypography,\n            FixedScroller,\n        },\n        props: {\n            /**\n             * Sets the active tab by its index (0 being the first tab item).\n             */\n            activeTabIndex: { type: Number, default: 0 },\n        },\n        emits: [BentoTabsEvent.ACTIVE_TAB_INDEX],\n        setup(props, { emit }) {\n            const tabs: Ref<BentoTab[]> = ref([]);\n            const tablist = ref(null);\n            const activeTabId = ref('');\n\n            provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId);\n\n            // unregister tab if removed / destroyed\n            const unregisterTab = (tabIdToRemove: string) => () => {\n                tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove);\n            };\n\n            // register tab\n            const registerTab: BentoTabsRegisterTab = ({ title, disabled, withNotificationIndicator }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ disabled, id, title, withNotificationIndicator });\n\n                // return values to the Tab component\n                return { id, unregisterTab: unregisterTab(id) };\n            };\n\n            // provide activeTab and registerTab to tab items\n            provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab);\n\n            // keyboard navigation\n            const onKeydownTabsNavigation = (e: KeyboardEvent) => {\n                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n                    // find tab that is focussed\n                    const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id);\n                    let activeTabIndex = tabs.value.indexOf(activeTab);\n\n                    // conditionally increase or decrease the\n                    if (e.code === 'ArrowLeft') {\n                        activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value);\n                    } else if (e.code === 'ArrowRight') {\n                        activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value);\n                    }\n\n                    // focus new active tab\n                    tablist.value.children[activeTabIndex].focus();\n                }\n            };\n\n            watch(\n                [() => props.activeTabIndex, tabs],\n                ([index, currentTabs]) => {\n                    nextTick(() => {\n                        const tab = currentTabs[index];\n                        activeTabId.value =\n                            tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id;\n                    });\n                },\n                { immediate: true }\n            );\n\n            const handleTabChange = (tabId: string) => {\n                activeTabId.value = tabId;\n                const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value);\n                emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex);\n            };\n\n            const isDisabled = (isDisabledTab: Ref<boolean>): Booleanish =>\n                (isDisabledTab ? 'disabled' : false) as Booleanish;\n\n            return {\n                tabs,\n                tablist,\n                activeTabId,\n                onKeydownTabsNavigation,\n                handleTabChange,\n                isDisabled,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n"],"names":["_sfc_main$1","defineComponent","props","disabled","withNotificationIndicator","toRefs","componentTitle","ref","provide","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY","value","computedTitle","computed","registerTab","inject","TABS_REGISTER_TAB_INJECTION_KEY","activeTabId","TABS_ACTIVE_TAB_ID_KEY","id","unregisterTab","onUnmounted","getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","getNextTabIndex","BentoTabsEvent","BentoTabsEvent2","_sfc_main","BentoTypography","FixedScroller","emit","tabs","tablist","tabIdToRemove","_a","title","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","tabId","activeIndex","isDisabledTab"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../src/components/tabs/components/tab.vue","../src/components/tabs/tabs.utils.ts","../src/components/tabs/tabs.types.ts","../src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" class=\"b-tab\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <template v-if=\"activeTabId === id\">\n            <slot />\n        </template>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, provide, ref, toRefs } from 'vue';\n    import {\n        EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY,\n        TABS_ACTIVE_TAB_ID_KEY,\n        TABS_REGISTER_TAB_INJECTION_KEY,\n    } from '../tabs.keys';\n    import { BentoTabsRegisterTab } from '../tabs.types';\n    import { BentoTabProvidedTitle } from './tab.types';\n\n    export default defineComponent({\n        props: {\n            /**\n             * Title of the tab\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Determines whether the tab is disabled\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays the tab with a notification indicator\n             */\n            withNotificationIndicator: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            // External title injection\n            const { disabled, withNotificationIndicator } = toRefs(props);\n            const componentTitle = ref();\n            const setTitle: BentoTabProvidedTitle = (value: string) => {\n                componentTitle.value = value;\n            };\n            provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle);\n\n            const computedTitle = computed(() => (componentTitle.value ?? props.title) as string);\n\n            const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY);\n            const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY);\n\n            const { id, unregisterTab } = registerTab({ disabled, title: computedTitle, withNotificationIndicator });\n\n            onUnmounted(() => unregisterTab());\n\n            return { activeTabId, id, computedTitle };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tab.scss\" />\n","import { BentoTab } from './components/tab.types';\n\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","import type { Ref } from 'vue';\n\nexport type BentoTabsRegisterTab = (props: {\n    disabled: Ref<boolean>;\n    title: Ref<string>;\n    withNotificationIndicator: Ref<boolean>;\n}) => { id: string; unregisterTab: () => void };\n\nexport enum BentoTabsEvent {\n    ACTIVE_TAB_INDEX = 'update:active-tab-index',\n}\n","<template>\n    <div class=\"b-tabs\">\n        <fixed-scroller ref=\"tablistwrapper\" condensed :extra-padding-top=\"5\" class=\"b-tabs__tab-list-wrapper\">\n            <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n                <button\n                    v-for=\"{ disabled, id, title, withNotificationIndicator } in tabs\"\n                    :id=\"id\"\n                    :key=\"id\"\n                    role=\"tab\"\n                    type=\"button\"\n                    class=\"b-tabs__tab\"\n                    :class=\"{\n                        'b-tabs__tab--active': activeTabId === id,\n                        'b-tabs__tab--disabled': disabled,\n                    }\"\n                    :aria-controls=\"`${id}-tabpanel`\"\n                    :aria-selected=\"activeTabId === id ? 'true' : 'false'\"\n                    :tabindex=\"activeTabId === id && !disabled.value ? null : -1\"\n                    :disabled=\"isDisabled(disabled)\"\n                    @click=\"handleTabChange(id)\"\n                    @keydown.enter.space=\"handleTabChange(id)\"\n                >\n                    <span class=\"b-tabs__tab-text\">\n                        <bento-typography class=\"b-tabs__tab-title\" el=\"span\" variant=\"body\" stronger>\n                            {{ title }}\n                        </bento-typography>\n                        <span\n                            v-if=\"withNotificationIndicator\"\n                            class=\"b-tabs__tab-notification-dot\"\n                            aria-hidden=\"true\"\n                        ></span>\n                    </span>\n                    <span v-show=\"activeTabId === id\" class=\"b-tabs__tab-underline\" aria-hidden=\"true\"></span>\n                </button>\n            </div>\n        </fixed-scroller>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, nextTick, provide, ref, Ref, watch } from 'vue';\n\n    // components\n    import { BentoTypography } from '@/components/typography';\n    import { FixedScroller } from '@/internal';\n\n    // utils\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getNextTabIndex, getPreviousTabIndex } from './tabs.utils';\n\n    // types\n    import { BentoTab } from './components/tab.types';\n    import { BentoTabsEvent, BentoTabsRegisterTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Tabs are used to navigate between different, but related content views within a page.\n     * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n     *\n     * @example\n     * import { BentoTabs, BentoTab } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTabs, BentoTab },\n     *     template: `\n     *         <bento-tabs v-bind=\"$props\">\n     *             <bento-tab title=\"Maria Ahlefeldt\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *             <bento-tab title=\"Carl Andersen\">\n     *                 (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.\n     *             </bento-tab>\n     *             <bento-tab title=\"Karl Truffel\">\n     *                 (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel.\n     *             </bento-tab>\n     *             <bento-tab title=\"Maria Ahlefeldt\" :disabled=\"true\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *         </bento-tabs>\n     *     `\n     * };\n     */\n\n    // component\n    export default defineComponent({\n        components: {\n            BentoTypography,\n            FixedScroller,\n        },\n        props: {\n            /**\n             * Sets the active tab by its index (0 being the first tab item).\n             */\n            activeTabIndex: { type: Number, default: 0 },\n        },\n        emits: [BentoTabsEvent.ACTIVE_TAB_INDEX],\n        setup(props, { emit }) {\n            const tabs: Ref<BentoTab[]> = ref([]);\n            const tablist = ref(null);\n            const tablistwrapper = ref<InstanceType<typeof FixedScroller>>();\n            const activeTabId = ref('');\n\n            provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId);\n\n            // unregister tab if removed / destroyed\n            const unregisterTab = (tabIdToRemove: string) => () => {\n                tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove);\n            };\n\n            // register tab\n            const registerTab: BentoTabsRegisterTab = ({ title, disabled, withNotificationIndicator }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ disabled, id, title, withNotificationIndicator });\n\n                // return values to the Tab component\n                return { id, unregisterTab: unregisterTab(id) };\n            };\n\n            // provide activeTab and registerTab to tab items\n            provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab);\n\n            // keyboard navigation\n            const onKeydownTabsNavigation = (e: KeyboardEvent) => {\n                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n                    // find tab that is focussed\n                    const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id);\n                    let activeTabIndex = tabs.value.indexOf(activeTab);\n\n                    // conditionally increase or decrease the\n                    if (e.code === 'ArrowLeft') {\n                        activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value);\n                    } else if (e.code === 'ArrowRight') {\n                        activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value);\n                    }\n\n                    // focus new active tab\n                    tablist.value.children[activeTabIndex].focus();\n                }\n            };\n\n            watch(\n                [() => props.activeTabIndex, tabs],\n                ([index, currentTabs]) => {\n                    nextTick(() => {\n                        const tab = currentTabs[index];\n                        activeTabId.value =\n                            tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id;\n                    });\n                },\n                { immediate: true }\n            );\n\n            const handleTabChange = (tabId: string) => {\n                activeTabId.value = tabId;\n                const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value);\n                emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex);\n            };\n\n            const isDisabled = (isDisabledTab: Ref<boolean>): Booleanish =>\n                (isDisabledTab ? 'disabled' : false) as Booleanish;\n\n            return {\n                tabs,\n                tablist,\n                tablistwrapper,\n                activeTabId,\n                onKeydownTabsNavigation,\n                handleTabChange,\n                isDisabled,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n"],"names":["_sfc_main$1","defineComponent","props","disabled","withNotificationIndicator","toRefs","componentTitle","ref","provide","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY","value","computedTitle","computed","registerTab","inject","TABS_REGISTER_TAB_INJECTION_KEY","activeTabId","TABS_ACTIVE_TAB_ID_KEY","id","unregisterTab","onUnmounted","getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","getNextTabIndex","BentoTabsEvent","BentoTabsEvent2","_sfc_main","BentoTypography","FixedScroller","emit","tabs","tablist","tablistwrapper","tabIdToRemove","_a","title","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","tabId","activeIndex","isDisabledTab"],"mappings":"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"}

package/dist/tag.js

@@ -1,10 +1,10 @@
 import { defineComponent as c, computed as o } from "vue";
-import { B as d } from "./chunks/index.dd30e538.js";
+import { B as d } from "./chunks/index.e29a6907.js";
 import { u as m } from "./chunks/aria-label.ac9651a5.js";
 import { g as s } from "./chunks/get-slot-text.99c3d860.js";
-import { b as _ } from "./chunks/tooltip.58ef3f4a.js";
+import { b as _ } from "./chunks/tooltip.efddb5f3.js";
 import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index36.css";
+import "./assets/index14.css";
 var r = /* @__PURE__ */ ((t) => (t.GREY = "grey", t.BLUE = "blue", t.GREEN = "green", t.ORANGE = "orange", t.RED = "red", t.WHITE = "white", t))(r || {});
 const p = c({
   name: "bento-tag",

package/dist/textarea.js

@@ -1,14 +1,14 @@
 import { defineComponent as K, useAttrs as Q, toRefs as O, ref as d, toRef as X, computed as n, watch as L, nextTick as ee, onMounted as te, onUnmounted as ae } from "vue";
-import { a as le } from "./chunks/button.9d6435ae.js";
-import { B as re } from "./chunks/index.dd30e538.js";
+import { a as le } from "./chunks/button.cb90b55c.js";
+import { B as re } from "./chunks/index.e29a6907.js";
 import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { g as se } from "./chunks/unique-id.a2a2b458.js";
 import { o as F } from "./chunks/resize.a041304d.js";
 import { u as oe } from "./chunks/aria-label.ac9651a5.js";
 import { u as ne } from "./chunks/i18n.eb5b985b.js";
 import { u as ie } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { E as ue, F as ce } from "./chunks/error-message.31ec12b7.js";
-import "./assets/index30.css";
+import { E as ue, F as ce } from "./chunks/error-message.bdcc1020.js";
+import "./assets/index41.css";
 let H = 0;
 const de = {
   beforeCreate() {

package/dist/timeline.js

@@ -1,19 +1,19 @@
 import { defineComponent as Y, computed as r, ref as N, toRefs as Z, provide as A, inject as D, onUnmounted as G } from "vue";
-import { a as z } from "./chunks/button.9d6435ae.js";
+import { a as z } from "./chunks/button.cb90b55c.js";
 import { BentoTextarea as Q } from "./textarea.js";
 import { u as H } from "./chunks/i18n.eb5b985b.js";
-import { B as X } from "./chunks/button-actions.81db18e8.js";
+import { B as X } from "./chunks/button-actions.87e589e3.js";
 import { n as x } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as ee } from "./chunks/index.b21197ca.js";
-import { B as te } from "./chunks/index.317fca12.js";
+import { B as ee } from "./chunks/index.614a5138.js";
+import { B as te } from "./chunks/index.bd1d28d0.js";
 import { BentoTag as ie } from "./tag.js";
-import { B as ae, d as se } from "./chunks/index.dd30e538.js";
-import { B as ne, a as oe, S as re } from "./chunks/index.aaf965f8.js";
+import { B as ae, d as se } from "./chunks/index.e29a6907.js";
+import { B as ne, a as oe, S as re } from "./chunks/index.3c69be27.js";
 import { g as le } from "./chunks/unique-id.a2a2b458.js";
 import { u as me } from "./chunks/use-has-slot.fbeb19ec.js";
 import { r as ce, e as de, t as w, g as k } from "./chunks/index.f55fdc32.js";
 import { c as ue, a as _e } from "./chunks/index.86453263.js";
-import "./assets/index31.css";
+import "./assets/index42.css";
 var F = 1e3 * 60, M = 60 * 24, U = M * 30, j = M * 365;
 function B(t, e) {
   var i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};

package/dist/toast.js

@@ -2,11 +2,11 @@ import { defineComponent as $, ref as c, computed as d, watch as k, onMounted as
 import "./chunks/index.4c062058.js";
 import { C as L } from "./chunks/cross-small.e851e0de.js";
 import { u as P } from "./chunks/i18n.eb5b985b.js";
-import { a as N } from "./chunks/button.9d6435ae.js";
-import { B as U } from "./chunks/index.dd30e538.js";
+import { a as N } from "./chunks/button.cb90b55c.js";
+import { B as U } from "./chunks/index.e29a6907.js";
 import { n as B } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { u as O } from "./chunks/use-bento-toast-controller.c3277f73.js";
-import "./assets/index32.css";
+import { u as O } from "./chunks/use-bento-toast-controller.5dac1f3c.js";
+import "./assets/index43.css";
 const M = {
   "en-US": {
     dismiss: "Dismiss"

package/dist/toggle.js

@@ -1,13 +1,13 @@
 import { defineComponent as k, ref as p, computed as u, toRefs as I, watch as A } from "vue";
 import { C as B } from "./chunks/checkmark-small.520f01b1.js";
-import { B as L } from "./chunks/index.dd30e538.js";
+import { B as L } from "./chunks/index.e29a6907.js";
 import { g as E } from "./chunks/unique-id.a2a2b458.js";
 import { u as F } from "./chunks/use-default-slot-validator.b9bff4c6.js";
 import { u as R } from "./chunks/use-has-slot.fbeb19ec.js";
 import { g } from "./chunks/get-slot-text.99c3d860.js";
 import { u as x } from "./chunks/aria-label.ac9651a5.js";
 import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index33.css";
+import "./assets/index48.css";
 var f = /* @__PURE__ */ ((t) => (t.LABEL_FIRST = "label-first", t))(f || {}), d = /* @__PURE__ */ ((t) => (t.BEFORE = "before", t.AFTER = "after", t))(d || {});
 const D = k({
   name: "bento-toggle",

package/dist/tutorial.js

@@ -1,16 +1,16 @@
-import { defineComponent as g, ref as d, computed as n, isRef as F, watch as I, nextTick as P } from "vue";
-import { B as $ } from "./chunks/index.1ea85d4a.js";
-import { B as S, a as k } from "./chunks/index.15b088b9.js";
-import { B as w } from "./chunks/index.dd30e538.js";
-import { BentoImage as A } from "./image.js";
-import { u as N } from "./chunks/i18n.eb5b985b.js";
+import { defineComponent as h, ref as d, computed as n, isRef as I, watch as g, nextTick as P } from "vue";
+import { B as $ } from "./chunks/index.a48e7f99.js";
+import { B as T, a as k } from "./chunks/index.0a30d358.js";
+import { B as w } from "./chunks/index.e29a6907.js";
+import { BentoImage as N } from "./image.js";
+import { u as A } from "./chunks/i18n.eb5b985b.js";
 import { R as D } from "./chunks/refresh.71a03998.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { a as T, h as j, o as L } from "./chunks/index.671768a1.js";
-import { B as M } from "./chunks/button-actions.81db18e8.js";
-import "./assets/index34.css";
+import { a as b, h as j, o as L } from "./chunks/index.c8621e8e.js";
+import { B as M } from "./chunks/button-actions.87e589e3.js";
+import "./assets/index45.css";
 var B;
-const V = /* @__PURE__ */ g({
+const V = /* @__PURE__ */ h({
   __name: "tutorial-indicator",
   props: {
     /**
@@ -18,7 +18,7 @@ const V = /* @__PURE__ */ g({
      * The indicator will position itself around the target element.
      */
     targetElement: {
-      type: (B = T.props) == null ? void 0 : B.targetElement.type,
+      type: (B = b.props) == null ? void 0 : B.targetElement.type,
       required: !0
     }
   },
@@ -30,8 +30,8 @@ const V = /* @__PURE__ */ g({
     });
     function s(l) {
       try {
-        const r = parseFloat(getComputedStyle(l).getPropertyValue("border-radius"));
-        return Number.isNaN(r) ? "" : `${r + 2 * 2}px`;
+        const i = parseFloat(getComputedStyle(l).getPropertyValue("border-radius"));
+        return Number.isNaN(i) ? "" : `${i + 2 * 2}px`;
       } catch {
         return "";
       }
@@ -44,13 +44,13 @@ const V = /* @__PURE__ */ g({
       }),
       {
         name: "updateIndicatorSize",
-        fn: ({ x: l, y: r, elements: u }) => {
-          const p = u.reference;
-          return e.value.width = `${p.offsetWidth + 4 * 2}px`, e.value.height = `${p.offsetHeight + 4 * 2}px`, e.value.borderRadius = s(p), { x: l, y: r };
+        fn: ({ x: l, y: i, elements: r }) => {
+          const p = r.reference;
+          return e.value.width = `${p.offsetWidth + 4 * 2}px`, e.value.height = `${p.offsetHeight + 4 * 2}px`, e.value.borderRadius = s(p), { x: l, y: i };
         }
       }
     ];
-    return { __sfc: !0, BORDER_OFFSET: 2, computedStyles: e, getBorderRadius: s, middleware: o, PopperContainer: T };
+    return { __sfc: !0, BORDER_OFFSET: 2, computedStyles: e, getBorderRadius: s, middleware: o, PopperContainer: b };
   }
 });
 var q = function() {
@@ -67,10 +67,10 @@ var q = function() {
   null
 );
 const z = Z.exports;
-let b = 0;
+let x = 0;
 const H = {
   beforeCreate() {
-    this.uuid = b.toString(), b += 1;
+    this.uuid = x.toString(), x += 1;
   }
 };
 var U = function() {
@@ -98,7 +98,7 @@ const G = X.exports, J = {
   }
 }, Q = {
   i18n: { messages: J }
-}, Y = /* @__PURE__ */ g({
+}, Y = /* @__PURE__ */ h({
   ...Q,
   __name: "tutorial-popover",
   props: {
@@ -135,8 +135,8 @@ const G = X.exports, J = {
      */
     position: {
       type: String,
-      default: S.BOTTOM_START,
-      validator: (a) => Object.values(S).includes(a)
+      default: T.BOTTOM_START,
+      validator: (a) => Object.values(T).includes(a)
     },
     /**
      * Options to control the scroll into view behavior.
@@ -190,25 +190,25 @@ const G = X.exports, J = {
   },
   emits: ["next", "finish", "restart"],
   setup(a, { emit: t }) {
-    const e = a, s = { behavior: "smooth" }, { t: o } = N(), l = n(() => ({
+    const e = a, s = { behavior: "smooth" }, { t: o } = A(), l = n(() => ({
       title: o("skipTour"),
       event: () => t("finish")
-    })), r = n(() => ({
+    })), i = n(() => ({
       title: o("startTour"),
       event: () => t("next")
-    })), u = n(() => ({
+    })), r = n(() => ({
       title: o("next"),
       event: () => t("next")
     })), p = n(() => ({
       title: o("finish"),
       event: () => t("finish")
-    })), h = n(() => ({
+    })), y = n(() => ({
       title: o("ok"),
       event: () => t("finish")
-    })), y = d(!1), C = d(!1), v = n(() => {
-      var i;
-      return F(e.targetElement) ? ((i = e.targetElement.value) == null ? void 0 : i.$el) || e.targetElement.value : e.targetElement.$el || e.targetElement;
-    }), _ = n(() => e.step === 0), m = n(() => e.step === e.totalSteps), E = n(() => !_.value), x = n(() => [
+    })), C = d(!1), O = d(!1), v = n(() => {
+      var u;
+      return I(e.targetElement) ? ((u = e.targetElement.value) == null ? void 0 : u.$el) || e.targetElement.value : e.targetElement.$el || e.targetElement;
+    }), _ = n(() => e.step === 0), m = n(() => e.step === e.totalSteps), E = n(() => !_.value), R = n(() => [
       {
         text: o("restartTour"),
         handler: () => t("restart"),
@@ -221,22 +221,22 @@ const G = X.exports, J = {
           icon: G
         }
       ]
-    ]), R = n(() => {
-      let i;
-      _.value ? i = e.single ? h.value : r.value : m.value ? i = p.value : i = u.value;
-      const c = [i];
+    ]), F = n(() => {
+      let u;
+      _.value ? u = e.single ? y.value : i.value : m.value ? u = p.value : u = r.value;
+      const c = [u];
       return _.value && !e.single ? c.push(l.value) : e.action && c.push(e.action), c;
     });
-    return I(
+    return g(
       () => e.active,
-      async (i) => {
-        var c, O;
-        i && ((c = v.value) != null && c.scrollIntoView) && ((O = v.value) == null || O.scrollIntoView(
+      async (u) => {
+        var c, S;
+        u && ((c = v.value) != null && c.scrollIntoView) && ((S = v.value) == null || S.scrollIntoView(
           e.scrollOptions != null ? e.scrollOptions : s
-        ), await P()), y.value = i, C.value = i;
+        ), await P()), C.value = u, O.value = u;
       },
       { immediate: !0 }
-    ), { __sfc: !0, DEFAULT_SCROLL_OPTIONS: s, props: e, t: o, emit: t, ACTION_SKIP: l, ACTION_START: r, ACTION_NEXT: u, ACTION_FINISH: p, ACTION_OK: h, isPopoverOpen: y, isIndicatorVisible: C, targetElement: v, isFirstStep: _, isLastStep: m, showSteps: E, menuData: x, computedActions: R, BentoMenu: $, BentoPopover: k, BentoTypography: w, BentoButtonActions: M, BentoImage: A, TutorialIndicator: z };
+    ), { __sfc: !0, DEFAULT_SCROLL_OPTIONS: s, props: e, t: o, emit: t, ACTION_SKIP: l, ACTION_START: i, ACTION_NEXT: r, ACTION_FINISH: p, ACTION_OK: y, isPopoverOpen: C, isIndicatorVisible: O, targetElement: v, isFirstStep: _, isLastStep: m, showSteps: E, menuData: R, computedActions: F, BentoMenu: $, BentoPopover: k, BentoTypography: w, BentoButtonActions: M, BentoImage: N, TutorialIndicator: z };
   }
 });
 var tt = function() {
@@ -256,10 +256,17 @@ var tt = function() {
   null,
   null
 );
-const ot = st.exports, rt = {}, nt = /* @__PURE__ */ g({
+const ot = st.exports, rt = {}, nt = /* @__PURE__ */ h({
   ...rt,
   __name: "tutorial",
   props: {
+    /**
+     * The current step index. If provided, will start the tutorial in that step.
+     */
+    index: {
+      type: Number,
+      default: null
+    },
     /**
      * The steps configuration for the tutorial.
      *
@@ -279,35 +286,43 @@ const ot = st.exports, rt = {}, nt = /* @__PURE__ */ g({
       default: null
     }
   },
-  setup(a) {
-    const t = a, e = d(0), s = n(() => t.steps.length - 1), o = n(() => s.value === 0);
-    function l(r, u) {
+  emits: ["update:index"],
+  setup(a, { emit: t }) {
+    const e = a, s = d(e.index || 0), o = n(() => e.steps.length - 1), l = n(() => o.value === 0);
+    function i(r, p) {
       return {
         // Visual
         targetElement: r.target,
         image: r.image,
         title: r.title,
-        step: u,
-        totalSteps: s.value,
+        step: p,
+        totalSteps: o.value,
         action: r.action,
-        scrollOptions: t.scrollOptions,
+        scrollOptions: e.scrollOptions,
         // Config
-        active: u === e.value,
-        single: o.value,
+        active: p === s.value,
+        single: l.value,
         position: r.position
       };
     }
-    return { __sfc: !0, props: t, currentStep: e, totalSteps: s, isSingleTutorial: o, getPopoverProps: l, TutorialPopover: ot };
+    return g(s, (r) => {
+      t("update:index", r);
+    }), g(
+      () => e.index,
+      (r) => {
+        r >= -1 && r <= o.value && (s.value = r);
+      }
+    ), { __sfc: !0, props: e, emit: t, currentStep: s, totalSteps: o, isSingleTutorial: l, getPopoverProps: i, TutorialPopover: ot };
   }
 });
 var at = function() {
   var t = this, e = t._self._c, s = t._self._setupProxy;
   return e("div", { staticClass: "b-tutorial" }, t._l(t.steps, function(o, l) {
-    return e(s.TutorialPopover, t._b({ key: o.title, on: { finish: function(r) {
+    return e(s.TutorialPopover, t._b({ key: o.title, on: { finish: function(i) {
       s.currentStep = -1;
-    }, next: function(r) {
+    }, next: function(i) {
       s.currentStep += 1;
-    }, restart: function(r) {
+    }, restart: function(i) {
       s.currentStep = 0;
     } } }, "tutorial-popover", s.getPopoverProps(o, l), !1), [t._v(" " + t._s(o.description) + " ")]);
   }), 1);