@adyen/bento-vue3 1.11.0 → 1.12.0

package/dist/tabs.js

@@ -1,10 +1,10 @@
-import { defineComponent as w, toRefs as S, ref as v, provide as m, computed as k, inject as I, onUnmounted as L, withDirectives as N, openBlock as u, createElementBlock as p, renderSlot as A, vShow as C, watch as V, nextTick as X, resolveComponent as g, createVNode as y, withCtx as E, createElementVNode as f, Fragment as Y, renderList as F, normalizeClass as O, withKeys as G, createTextVNode as J, toDisplayString as U, createCommentVNode as j } from "vue";
-import { E as q, T as $, a as B } from "./chunks/tabs.keys.358742f2.js";
-import { _ as K } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as z } from "./chunks/index.09f7f1b5.js";
+import { defineComponent as w, toRefs as x, ref as v, provide as m, computed as L, inject as h, onUnmounted as V, withDirectives as N, openBlock as _, createElementBlock as p, renderSlot as A, createCommentVNode as C, vShow as $, watch as X, nextTick as Y, resolveComponent as g, createVNode as y, withCtx as E, createElementVNode as f, Fragment as F, renderList as O, normalizeClass as G, withKeys as J, createTextVNode as U, toDisplayString as j } from "vue";
+import { E as q, T as B, a as K } from "./chunks/tabs.keys.358742f2.js";
+import { _ as D } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { B as z } from "./chunks/index.fcfca776.js";
 import { g as P } from "./chunks/unique-id.a2a2b458.js";
-import { F as H } from "./chunks/fixed-scroller.ebfb2f80.js";
-import "./assets/index40.css";
+import { F as H } from "./chunks/fixed-scroller.708a4c4e.js";
+import "./assets/index3.css";
 const M = w({
   props: {
     /**
@@ -30,33 +30,33 @@ const M = w({
     }
   },
   setup(e) {
-    const { disabled: o, withNotificationIndicator: t } = S(e), c = v();
+    const { disabled: o, withNotificationIndicator: t } = x(e), c = v();
     m(q, (a) => {
       c.value = a;
     });
-    const b = k(() => c.value ?? e.title), T = I($), _ = I(B), { id: d, unregisterTab: s } = T({ disabled: o, title: b, withNotificationIndicator: t });
-    return L(() => s()), { activeTabId: _, id: d, computedTitle: b };
+    const b = L(() => c.value ?? e.title), T = h(B), u = h(K), { id: d, unregisterTab: s } = T({ disabled: o, title: b, withNotificationIndicator: t });
+    return V(() => s()), { activeTabId: u, id: d, computedTitle: b };
   }
 }), Q = ["id", "aria-labelledby"];
 function W(e, o, t, c, r, b) {
-  return N((u(), p("div", {
+  return N((_(), p("div", {
     id: `${e.id}-tabpanel`,
     role: "tabpanel",
     "aria-labelledby": e.id
   }, [
-    A(e.$slots, "default")
+    e.activeTabId === e.id ? A(e.$slots, "default", { key: 0 }) : C("", !0)
   ], 8, Q)), [
-    [C, e.activeTabId === e.id]
+    [$, e.activeTabId === e.id]
   ]);
 }
-const _e = /* @__PURE__ */ K(M, [["render", W]]), x = (e, o) => {
+const ue = /* @__PURE__ */ D(M, [["render", W]]), R = (e, o) => {
   const t = e === 0 ? o.length - 1 : e - 1;
-  return o[t].disabled ? x(t, o) : t;
-}, D = (e, o) => {
+  return o[t].disabled ? R(t, o) : t;
+}, S = (e, o) => {
   const t = e === o.length - 1 ? 0 : e + 1;
-  return o[t].disabled ? D(t, o) : t;
+  return o[t].disabled ? S(t, o) : t;
 };
-var h = /* @__PURE__ */ ((e) => (e.ACTIVE_TAB_INDEX = "update:active-tab-index", e))(h || {});
+var I = /* @__PURE__ */ ((e) => (e.ACTIVE_TAB_INDEX = "update:active-tab-index", e))(I || {});
 const Z = w({
   components: {
     BentoTypography: z,
@@ -68,32 +68,32 @@ const Z = w({
      */
     activeTabIndex: { type: Number, default: 0 }
   },
-  emits: [h.ACTIVE_TAB_INDEX],
+  emits: [I.ACTIVE_TAB_INDEX],
   setup(e, { emit: o }) {
     const t = v([]), c = v(null), r = v("");
-    m(B, r);
+    m(K, r);
     const b = (a) => () => {
       var i;
       t.value = (i = t.value) == null ? void 0 : i.filter(({ id: n }) => n !== a);
     };
-    m($, ({ title: a, disabled: i, withNotificationIndicator: n }) => {
+    m(B, ({ title: a, disabled: i, withNotificationIndicator: n }) => {
       const l = P("b-tab");
       return t.value.push({ disabled: i, id: l, title: a, withNotificationIndicator: n }), { id: l, unregisterTab: b(l) };
     });
-    const _ = (a) => {
+    const u = (a) => {
       if (a.code === "ArrowLeft" || a.code === "ArrowRight") {
         const i = t.value.find((l) => document.activeElement.id === l.id);
         let n = t.value.indexOf(i);
-        a.code === "ArrowLeft" ? n = x(n, t.value) : a.code === "ArrowRight" && (n = D(n, t.value)), c.value.children[n].focus();
+        a.code === "ArrowLeft" ? n = R(n, t.value) : a.code === "ArrowRight" && (n = S(n, t.value)), c.value.children[n].focus();
       }
     };
-    return V(
+    return X(
       [() => e.activeTabIndex, t],
       ([a, i]) => {
-        X(() => {
+        Y(() => {
           var l;
           const n = i[a];
-          r.value = n && !n.disabled ? n.id : (l = t.value.find(({ disabled: R }) => !R)) == null ? void 0 : l.id;
+          r.value = n && !n.disabled ? n.id : (l = t.value.find(({ disabled: k }) => !k)) == null ? void 0 : l.id;
         });
       },
       { immediate: !0 }
@@ -101,11 +101,11 @@ const Z = w({
       tabs: t,
       tablist: c,
       activeTabId: r,
-      onKeydownTabsNavigation: _,
+      onKeydownTabsNavigation: u,
       handleTabChange: (a) => {
         r.value = a;
         const i = t.value.findIndex(({ id: n }) => n === r.value);
-        o(h.ACTIVE_TAB_INDEX, i);
+        o(I.ACTIVE_TAB_INDEX, i);
       },
       isDisabled: (a) => a ? "disabled" : !1
     };
@@ -120,9 +120,9 @@ const ee = { class: "b-tabs" }, te = ["id", "aria-controls", "aria-selected", "t
   "aria-hidden": "true"
 };
 function se(e, o, t, c, r, b) {
-  const T = g("bento-typography"), _ = g("fixed-scroller");
-  return u(), p("div", ee, [
-    y(_, {
+  const T = g("bento-typography"), u = g("fixed-scroller");
+  return _(), p("div", ee, [
+    y(u, {
       condensed: "",
       "extra-padding-top": 5,
       class: "b-tabs__tab-list-wrapper"
@@ -134,12 +134,12 @@ function se(e, o, t, c, r, b) {
           role: "tablist",
           onKeydown: o[0] || (o[0] = (...d) => e.onKeydownTabsNavigation && e.onKeydownTabsNavigation(...d))
         }, [
-          (u(!0), p(Y, null, F(e.tabs, ({ disabled: d, id: s, title: a, withNotificationIndicator: i }) => (u(), p("button", {
+          (_(!0), p(F, null, O(e.tabs, ({ disabled: d, id: s, title: a, withNotificationIndicator: i }) => (_(), p("button", {
             id: s,
             key: s,
             role: "tab",
             type: "button",
-            class: O(["b-tabs__tab", {
+            class: G(["b-tabs__tab", {
               "b-tabs__tab--active": e.activeTabId === s,
               "b-tabs__tab--disabled": d
             }]),
@@ -148,7 +148,7 @@ function se(e, o, t, c, r, b) {
             tabindex: e.activeTabId === s && !d.value ? null : -1,
             disabled: e.isDisabled(d),
             onClick: (n) => e.handleTabChange(s),
-            onKeydown: G((n) => e.handleTabChange(s), ["enter", "space"])
+            onKeydown: J((n) => e.handleTabChange(s), ["enter", "space"])
           }, [
             f("span", ae, [
               y(T, {
@@ -158,14 +158,14 @@ function se(e, o, t, c, r, b) {
                 stronger: ""
               }, {
                 default: E(() => [
-                  J(U(a), 1)
+                  U(j(a), 1)
                 ]),
                 _: 2
               }, 1024),
-              i ? (u(), p("span", ne)) : j("", !0)
+              i ? (_(), p("span", ne)) : C("", !0)
             ]),
             N(f("span", oe, null, 512), [
-              [C, e.activeTabId === s]
+              [$, e.activeTabId === s]
             ])
           ], 42, te))), 128))
         ], 544)
@@ -175,9 +175,9 @@ function se(e, o, t, c, r, b) {
     A(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const ue = /* @__PURE__ */ K(Z, [["render", se], ["__scopeId", "data-v-b9c3ac7b"]]);
+const _e = /* @__PURE__ */ D(Z, [["render", se], ["__scopeId", "data-v-b9c3ac7b"]]);
 export {
-  _e as BentoTab,
-  ue as BentoTabs
+  ue as BentoTab,
+  _e as BentoTabs
 };
 //# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../vue2/src/components/tabs/components/tab.vue","../../vue2/src/components/tabs/tabs.utils.ts","../../vue2/src/components/tabs/tabs.types.ts","../../vue2/src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <slot></slot>\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","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","_ctx","renderSlot","_hoisted_1$1","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","createVNode","_component_fixed_scroller","createElementVNode","_cache","args","openBlock","createElementBlock","Fragment","renderList","normalizeClass","$event","withKeys","_component_bento_typography","_hoisted_4","createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../vue2/src/components/tabs/components/tab.vue","../../vue2/src/components/tabs/tabs.utils.ts","../../vue2/src/components/tabs/tabs.types.ts","../../vue2/src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" 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","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","_ctx","renderSlot","createCommentVNode","_hoisted_1$1","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","createVNode","_component_fixed_scroller","createElementVNode","_cache","args","openBlock","createElementBlock","Fragment","renderList","normalizeClass","$event","withKeys","_component_bento_typography","_hoisted_4"],"mappings":"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"}

package/dist/tag.js

@@ -1,10 +1,10 @@
 import { defineComponent as d, computed as o, resolveComponent as p, resolveDirective as m, withDirectives as _, openBlock as b, createElementBlock as v, normalizeClass as f, createVNode as g, withCtx as h, createTextVNode as y, toDisplayString as E } from "vue";
-import { B as C } from "./chunks/index.09f7f1b5.js";
-import { b as S } from "./chunks/tooltip.785993dd.js";
+import { B as C } from "./chunks/index.fcfca776.js";
+import { b as S } from "./chunks/tooltip.d366f95d.js";
 import { u as x } from "./chunks/aria-label.ac9651a5.js";
 import { g as c } from "./chunks/get-slot-text.bead058f.js";
 import { _ as $ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index38.css";
+import "./assets/index5.css";
 var n = /* @__PURE__ */ ((e) => (e.GREY = "grey", e.BLUE = "blue", e.GREEN = "green", e.ORANGE = "orange", e.RED = "red", e.WHITE = "white", e))(n || {});
 const w = d({
   name: "bento-tag",

package/dist/textarea.js

@@ -1,14 +1,14 @@
 import { openBlock as o, createElementBlock as x, mergeProps as de, toDisplayString as O, createCommentVNode as c, createElementVNode as L, defineComponent as be, useAttrs as fe, toRefs as U, ref as b, toRef as pe, computed as r, watch as k, nextTick as ve, onMounted as me, normalizeClass as g, unref as t, normalizeStyle as W, createBlock as m, withCtx as _, createTextVNode as K, createVNode as B, withKeys as N } from "vue";
-import { a as he } from "./chunks/button.623a46d2.js";
-import { B as w } from "./chunks/index.09f7f1b5.js";
+import { a as he } from "./chunks/button.7ce49c43.js";
+import { B as w } from "./chunks/index.fcfca776.js";
 import { _ as Y } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import { g as ye } from "./chunks/unique-id.a2a2b458.js";
 import { o as V } from "./chunks/resize.a041304d.js";
 import { u as ge } from "./chunks/aria-label.ac9651a5.js";
 import { u as _e } from "./chunks/i18n.6c402773.js";
 import { u as Le } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { F as xe, E as z } from "./chunks/field-label.b681234d.js";
-import "./assets/index42.css";
+import { F as xe, E as z } from "./chunks/field-label.894140ec.js";
+import "./assets/index9.css";
 let q = 0;
 const Ce = {
   beforeCreate() {

package/dist/timeline.js

@@ -1,19 +1,19 @@
 import { defineComponent as ie, computed as d, ref as D, toRefs as _e, provide as q, resolveComponent as N, openBlock as i, createElementBlock as f, createBlock as S, withCtx as y, createTextVNode as T, toDisplayString as I, createCommentVNode as _, createVNode as w, createElementVNode as b, renderSlot as ne, mergeProps as z, inject as J, onUnmounted as fe, normalizeClass as P, Fragment as Y, renderList as pe, pushScopeId as ve, popScopeId as he } from "vue";
-import { a as oe } from "./chunks/button.623a46d2.js";
+import { a as oe } from "./chunks/button.7ce49c43.js";
 import { BentoTextarea as be } from "./textarea.js";
 import { u as ae } from "./chunks/i18n.6c402773.js";
 import { BentoButtonActions as ge } from "./button.js";
 import { _ as H } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as ye } from "./chunks/index.45d00aad.js";
+import { B as ye } from "./chunks/index.3ec651d0.js";
 import { BentoLink as Ie } from "./link.js";
 import { BentoTag as Ne } from "./tag.js";
-import { B as Ee, d as Te } from "./chunks/index.09f7f1b5.js";
-import { B as we, a as Se, S as Ce } from "./chunks/index.0a8ddfaa.js";
+import { B as Ee, d as Te } from "./chunks/index.fcfca776.js";
+import { B as we, a as Se, S as Ce } from "./chunks/index.46b7b1d3.js";
 import { g as Me } from "./chunks/unique-id.a2a2b458.js";
 import { u as ke } from "./chunks/use-has-slot.4d98bf29.js";
 import { r as Le, e as Ae, t as B, g as W } from "./chunks/index.f55fdc32.js";
 import { c as Oe, a as $e } from "./chunks/index.86453263.js";
-import "./assets/index41.css";
+import "./assets/index47.css";
 var Z = 1e3 * 60, j = 60 * 24, G = j * 30, Q = j * 365;
 function X(e, p) {
   var o = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};

package/dist/toast.js

@@ -1,11 +1,11 @@
 import { defineComponent as C, resolveComponent as _, openBlock as u, createElementBlock as d, createElementVNode as b, createVNode as l, withCtx as p, createTextVNode as T, toDisplayString as y, createBlock as D, createCommentVNode as S, ref as k, computed as v, onMounted as H, watch as N, normalizeStyle as $, TransitionGroup as E, Fragment as O, renderList as V, normalizeClass as A } from "vue";
 import { u as q } from "./chunks/toastController.0b01d2e8.js";
 import { C as z, I as L } from "./chunks/info-filled.e591599f.js";
-import { a as P } from "./chunks/button.623a46d2.js";
-import { B as U } from "./chunks/index.09f7f1b5.js";
+import { a as P } from "./chunks/button.7ce49c43.js";
+import { B as U } from "./chunks/index.fcfca776.js";
 import { u as j } from "./chunks/use-has-slot.4d98bf29.js";
 import { _ as w } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index43.css";
+import "./assets/index6.css";
 const F = {
   "en-US": {
     dismiss: "Dismiss"

package/dist/toggle.js

@@ -1,13 +1,13 @@
 import { defineComponent as $, ref as y, computed as p, toRefs as V, watch as D, resolveComponent as _, openBlock as n, createElementBlock as k, normalizeClass as T, withDirectives as w, createElementVNode as b, vModelCheckbox as O, createBlock as g, createCommentVNode as i, withCtx as h, renderSlot as v } from "vue";
 import { C as N } from "./chunks/checkmark-small.c79220d9.js";
-import { B as U } from "./chunks/index.09f7f1b5.js";
+import { B as U } from "./chunks/index.fcfca776.js";
 import { g as j } from "./chunks/unique-id.a2a2b458.js";
 import { u as z } from "./chunks/use-default-slot-validator.1169c221.js";
 import { u as H } from "./chunks/use-has-slot.4d98bf29.js";
 import { g as m } from "./chunks/get-slot-text.bead058f.js";
 import { u as M } from "./chunks/aria-label.ac9651a5.js";
 import { _ as P } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index19.css";
+import "./assets/index7.css";
 var C = /* @__PURE__ */ ((e) => (e.LABEL_FIRST = "label-first", e))(C || {}), d = /* @__PURE__ */ ((e) => (e.BEFORE = "before", e.AFTER = "after", e))(d || {});
 const q = $({
   name: "bento-toggle",

package/dist/tutorial.js

@@ -1,14 +1,14 @@
 import { defineComponent as x, ref as O, openBlock as u, createBlock as S, unref as o, withCtx as f, createElementVNode as c, normalizeStyle as j, createElementBlock as b, mergeProps as R, toDisplayString as E, createCommentVNode as y, computed as r, isRef as q, watch as L, nextTick as Z, createVNode as h, withKeys as z, createSlots as H, createTextVNode as I, renderSlot as U, pushScopeId as W, popScopeId as X, Fragment as G, renderList as J } from "vue";
-import { B as Q } from "./chunks/index.cf561336.js";
-import { B as F, a as Y } from "./chunks/index.03605cb0.js";
-import { B } from "./chunks/index.09f7f1b5.js";
+import { B as Q } from "./chunks/index.762f7ec9.js";
+import { B as F, a as Y } from "./chunks/index.a25e53b8.js";
+import { B } from "./chunks/index.fcfca776.js";
 import { BentoImage as tt } from "./image.js";
 import { u as et } from "./chunks/i18n.6c402773.js";
 import { R as ot } from "./chunks/refresh.bd60f6a8.js";
 import { _ as k } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { a as N, h as at, o as st } from "./chunks/index.a4a6e52f.js";
+import { a as N, h as at, o as st } from "./chunks/index.9ae856b3.js";
 import { BentoButtonActions as nt } from "./button.js";
-import "./assets/index21.css";
+import "./assets/index8.css";
 var A;
 const it = /* @__PURE__ */ x({
   __name: "tutorial-indicator",

package/dist/typography.js

@@ -1,4 +1,4 @@
-import { B as p, c as e, b as r, a as y } from "./chunks/index.09f7f1b5.js";
+import { B as p, c as e, b as r, a as y } from "./chunks/index.fcfca776.js";
 export {
   p as BentoTypography,
   e as BentoTypographyElement,

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue3",
-    "version": "1.11.0",
+    "version": "1.12.0",
     "description": "Adyen Bento Vue 3 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -52,7 +52,7 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "1.11.0",
+        "@adyen/bento-design-tokens": "1.12.0",
         "@adyen/ui-assets-icons-16": "4.1.0",
         "@adyen/ui-assets-payment-method-icons": "6.1.0",
         "@codemirror/commands": "6.3.3",

package/dist/@types/packages/vue2/src/components/dropdown/composables/useDisplayValue.d.ts

@@ -1,2 +0,0 @@
-import { UseDisplayValue } from './useDisplayValue.types';
-export declare const useDisplayValue: UseDisplayValue;

package/dist/@types/packages/vue2/src/components/dropdown/composables/useDropdownSearchFilter.d.ts

@@ -1,3 +0,0 @@
-import { Ref } from "../../../../../vue3/node_modules/vue";
-import { BentoSearchBarItem } from "../../search-bar/search-bar.types";
-export declare function useDropdownSearchFilter<T extends BentoSearchBarItem>(searchTerm: Ref<string>, data: Ref<T[]>): import("../../../../../vue3/node_modules/vue").ComputedRef<T[]>;