@adyen/bento-vue2 1.25.0 → 1.27.0

package/dist/tabs.js

@@ -1,11 +1,11 @@
-import { defineComponent as m, toRefs as C, ref as b, provide as u, computed as w, inject as p, onUnmounted as A, watch as N, nextTick as B } from "vue";
-import { E as k, T as I, a as h } from "./chunks/tabs.keys.358742f2.js";
-import { n as g } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as R } from "./chunks/index.d97166c6.js";
-import { g as D } from "./chunks/unique-id.a2a2b458.js";
-import { F as S } from "./chunks/fixed-scroller.3135f86c.js";
-import "./assets/index23.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(s) {
-    const { disabled: t, withNotificationIndicator: e } = C(s), l = b();
-    u(k, (n) => {
-      l.value = n;
+  setup(a) {
+    const { disabled: e, withNotificationIndicator: t } = w(a), l = b();
+    p(R, (T) => {
+      l.value = T;
     });
-    const d = w(() => l.value ?? s.title), _ = p(I), r = p(h), { id: v, unregisterTab: T } = _({ disabled: t, title: d, withNotificationIndicator: e });
-    return A(() => T()), { 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 t = this, e = t._self._c;
-  return t._self._setupProxy, e("div", { directives: [{ name: "show", rawName: "v-show", value: t.activeTabId === t.id, expression: "activeTabId === id" }], attrs: { id: `${t.id}-tabpanel`, role: "tabpanel", "aria-labelledby": t.id } }, [t.activeTabId === t.id ? [t._t("default")] : t._e()], 2);
-}, L = [], O = /* @__PURE__ */ g(
-  K,
+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);
+}, O = [], X = /* @__PURE__ */ h(
   F,
   L,
+  O,
   !1,
   null,
-  null,
+  "7e802d0d",
   null,
   null
 );
-const H = O.exports, y = (s, t) => {
-  const e = s === 0 ? t.length - 1 : s - 1;
-  return t[e].disabled ? y(e, t) : e;
-}, x = (s, t) => {
-  const e = s === t.length - 1 ? 0 : s + 1;
-  return t[e].disabled ? x(e, t) : e;
+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__ */ ((s) => (s.ACTIVE_TAB_INDEX = "update:active-tab-index", s))(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(s, { emit: t }) {
-    const e = b([]), l = b(null), a = b("");
-    u(h, a);
-    const d = (n) => () => {
+  setup(a, { emit: e }) {
+    const t = b([]), l = b(null), i = b(), r = b("");
+    p(g, r);
+    const _ = (n) => () => {
       var o;
-      e.value = (o = e.value) == null ? void 0 : o.filter(({ id: i }) => i !== n);
+      t.value = (o = t.value) == null ? void 0 : o.filter(({ id: s }) => s !== n);
     };
-    u(I, ({ title: n, disabled: o, withNotificationIndicator: i }) => {
-      const c = D("b-tab");
-      return e.value.push({ disabled: o, id: c, title: n, 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 = (n) => {
+    const u = (n) => {
       if (n.code === "ArrowLeft" || n.code === "ArrowRight") {
-        const o = e.value.find((c) => document.activeElement.id === c.id);
-        let i = e.value.indexOf(o);
-        n.code === "ArrowLeft" ? i = y(i, e.value) : n.code === "ArrowRight" && (i = x(i, e.value)), l.value.children[i].focus();
+        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(
-      [() => s.activeTabIndex, e],
+    return B(
+      [() => a.activeTabIndex, t],
       ([n, o]) => {
-        B(() => {
-          var c;
-          const i = o[n];
-          a.value = i && !i.disabled ? i.id : (c = e.value.find(({ disabled: E }) => !E)) == null ? void 0 : c.id;
+        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: e,
+      tabs: t,
       tablist: l,
-      activeTabId: a,
-      onKeydownTabsNavigation: r,
+      tablistwrapper: i,
+      activeTabId: r,
+      onKeydownTabsNavigation: u,
       handleTabChange: (n) => {
-        a.value = n;
-        const o = e.value.findIndex(({ id: i }) => i === a.value);
-        t(f.ACTIVE_TAB_INDEX, o);
+        r.value = n;
+        const o = t.value.findIndex(({ id: s }) => s === r.value);
+        e(f.ACTIVE_TAB_INDEX, o);
       },
       isDisabled: (n) => n ? "disabled" : !1
     };
   }
 });
-var Y = function() {
-  var t = this, e = t._self._c;
-  return t._self._setupProxy, e("div", { staticClass: "b-tabs" }, [e("fixed-scroller", { staticClass: "b-tabs__tab-list-wrapper", attrs: { condensed: "", "extra-padding-top": 5 } }, [e("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: t.onKeydownTabsNavigation } }, t._l(t.tabs, function({ disabled: l, id: a, title: d, withNotificationIndicator: _ }) {
-    return e("button", { key: a, staticClass: "b-tabs__tab", class: {
-      "b-tabs__tab--active": t.activeTabId === a,
+var P = function() {
+  var e = this, t = e._self._c;
+  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": t.activeTabId === a ? "true" : "false", tabindex: t.activeTabId === a && !l.value ? null : -1, disabled: t.isDisabled(l) }, on: { click: function(r) {
-      return t.handleTabChange(a);
-    }, keydown: function(r) {
-      return !r.type.indexOf("key") && t._k(r.keyCode, "enter", 13, r.key, "Enter") && t._k(r.keyCode, "space", 32, r.key, [" ", "Spacebar"]) ? null : t.handleTabChange(a);
-    } } }, [e("span", { staticClass: "b-tabs__tab-text" }, [e("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: "span", variant: "body", stronger: "" } }, [t._v(" " + t._s(d) + " ")]), _ ? e("span", { staticClass: "b-tabs__tab-notification-dot", attrs: { "aria-hidden": "true" } }) : t._e()], 1), e("span", { directives: [{ name: "show", rawName: "v-show", value: t.activeTabId === a, expression: "activeTabId === id" }], staticClass: "b-tabs__tab-underline", attrs: { "aria-hidden": "true" } })]);
-  }), 0)]), t._t("default")], 2);
-}, P = [], $ = /* @__PURE__ */ g(
-  X,
+    }, 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);
+}, $ = [], 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`\" 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","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.d97166c6.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.e5deb137.js";
+import { b as _ } from "./chunks/tooltip.efddb5f3.js";
 import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index48.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.e5f5638f.js";
-import { B as re } from "./chunks/index.d97166c6.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.db315e68.js";
-import "./assets/index19.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.e5f5638f.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.a03a672f.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.9e40ffeb.js";
-import { B as te } from "./chunks/index.444d221f.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.d97166c6.js";
-import { B as ne, a as oe, S as re } from "./chunks/index.81e509f3.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/index38.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.e5f5638f.js";
-import { B as U } from "./chunks/index.d97166c6.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.8414d283.js";
-import "./assets/index26.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.d97166c6.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/index27.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",