@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/tabs/tabs.js

@@ -6,405 +6,246 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { iconChevronLeftSmall, iconChevronRightSmall, } from "@siemens/ix-icons/icons";
-import { h, Host, } from "@stencil/core";
+import { iconMoreMenu } from "@siemens/ix-icons/icons";
+import { h, Host, Mixin, readTask, } from "@stencil/core";
+import { makeRef } from "../utils/make-ref";
+import { emitEvent } from "../utils/event";
+import { hasKeyboardMode } from "../utils/internal/mixins/setup.mixin";
+import { DefaultMixins } from "../utils/internal/component";
+import { InheritAriaAttributesMixin } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
 import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
-const TAB_MANAGED_CLASSES = {
-    SELECTED: 'selected',
-    DISABLED: 'disabled',
-    SMALL_TAB: 'small-tab',
-    ICON: 'icon',
-    STRETCHED: 'stretched',
-    BOTTOM: 'bottom',
-    TOP: 'top',
-    CIRCLE: 'circle',
-    HYDRATED: 'hydrated',
-};
-const MANAGED_CLASSES_SET = new Set(Object.values(TAB_MANAGED_CLASSES));
-export class Tabs {
+export class Tabs extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
-        /**
-         * Set tab items to small size
-         */
-        this.small = false;
-        /**
-         * Set rounded tabs
-         */
-        this.rounded = false;
-        /**
-         * Set default selected tab by index
-         */
-        this.selected = 0;
-        /**
-         * Set layout width style
-         */
-        this.layout = 'auto';
-        /**
-         * Set placement style
-         */
-        this.placement = 'bottom';
-        /**
-         * ARIA label for the chevron left icon button
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelChevronLeftIconButton = 'Scroll tabs left';
-        /**
-         * ARIA label for the chevron right icon button
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelChevronRightIconButton = 'Scroll tabs right';
-        this.totalItems = 0;
-        this.currentScrollAmount = 0;
-        this.scrollAmount = 100;
-        this.scrollActionAmount = 0;
-        this.showArrowPrevious = false;
-        this.showArrowNext = false;
-        this.windowStartSize = window.innerWidth;
-        this.ARROW_WIDTH = 32;
-        /** Movement in px beyond which we treat as drag (not tap). */
-        this.TAP_THRESHOLD_PX = 10;
-        this.updateScheduled = false;
-        this.clickAction = {
-            isClick: true,
-        };
-        this.isDragging = false;
-    }
-    onWindowResize() {
-        this.totalItems = 0;
-        this.totalItems = this.getTabs().length;
-        if (this.windowStartSize === 0)
-            return (this.windowStartSize = window.innerWidth);
-        this.move(this.windowStartSize - window.innerWidth);
-        this.windowStartSize = window.innerWidth;
-    }
-    getTabs() {
+        super();
+    }
+    hostElement;
+    /**
+     * Set tab items to small size
+     */
+    small = false;
+    /**
+     * Set rounded tabs
+     */
+    rounded = false;
+    /**
+     * Set layout width style
+     */
+    layout = 'auto';
+    /**
+     * Set placement style
+     */
+    placement = 'bottom';
+    /**
+     * Aria label for the overflow menu button.
+     *
+     * @since 5.0.0
+     */
+    ariaLabelMoreTabs = 'Show all tabs';
+    /**
+     * Active tab key.
+     *
+     * @since 5.0.0
+     */
+    activeTabKey;
+    /**
+     * Keyboard interaction behavior:
+     * automatic:  A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.
+     * manual: A tabs widget where users activate a tab and display its panel by pressing Space or Enter.
+     *
+     * @since 5.0.0
+     */
+    keyboardNavigation = 'automatic';
+    /**
+     * Tab selection event. Event detail contains the new active tab key.
+     *
+     * @since 5.0.0
+     */
+    tabChange;
+    /**
+     * Tab close event. Event detail contains the closed tab key.
+     *
+     * @since 5.0.0
+     */
+    tabClose;
+    isTabsOverflow = false;
+    overflowMenuItems = [];
+    resizeObserver;
+    itemsObserver;
+    tabsContainerRef = makeRef();
+    tabsRef = makeRef();
+    get tabs() {
         return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));
     }
-    getTab(tabIndex) {
-        return this.getTabs()[tabIndex];
-    }
-    getTabsWrapper() {
-        var _a;
-        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items-content');
-    }
-    getTabsContainer() {
-        var _a;
-        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-items');
-    }
-    initResizeObserver() {
-        const parentElement = this.hostElement.parentElement;
-        if (!parentElement)
-            return;
-        this.resizeObserver = new ResizeObserver(() => {
-            this.renderArrows();
-        });
-        this.resizeObserver.observe(parentElement);
-    }
-    observeSlotChanges() {
-        var _a;
-        (_a = this.classObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.classObserver = new MutationObserver(() => {
-            this.scheduleTabUpdate();
+    componentDidLoad() {
+        this.itemsObserver = new MutationObserver(() => {
+            this.onComponentChildrenChange();
+            // Compute the overflow after DOM has been updated with the new tabs, otherwise the measurement would be wrong
+            requestAnimationFrameNoNgZone(() => this.onComponentResize());
         });
-        this.classObserver.observe(this.hostElement, {
+        this.itemsObserver.observe(this.hostElement, {
             childList: true,
             subtree: true,
             attributes: true,
-            attributeFilter: ['class'],
+            characterData: true,
         });
+        this.resizeObserver = new ResizeObserver(() => this.onComponentResize());
+        this.resizeObserver.observe(this.hostElement);
+        this.onComponentResize();
     }
-    scheduleTabUpdate() {
-        if (this.updateScheduled)
-            return;
-        this.updateScheduled = true;
-        requestAnimationFrame(() => {
-            this.updateTabAttributes();
-            this.updateScheduled = false;
-        });
-    }
-    setTabAttributes(element, index) {
-        const isSelected = index === this.selected;
-        const isDisabled = element.disabled;
-        if (this.small)
-            element.setAttribute('small', 'true');
-        if (this.rounded)
-            element.setAttribute('rounded', 'true');
-        element.setAttribute('layout', this.layout);
-        element.setAttribute('selected', isSelected.toString());
-        element.setAttribute('placement', this.placement);
-        element.toggleAttribute('disabled', isDisabled);
-        this.applyRequiredClasses(element, isSelected, isDisabled);
+    componentWillLoad() {
+        this.onComponentChildrenChange();
+        if (this.activeTabKey) {
+            this.setTabActive(this.activeTabKey);
+        }
     }
-    applyRequiredClasses(element, isSelected, isDisabled) {
-        const requiredClasses = new Set(this.buildRequiredClasses(isSelected, isDisabled));
-        const { classList } = element;
-        for (const cls of requiredClasses) {
-            classList.add(cls);
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
         }
-        for (const managedClass of MANAGED_CLASSES_SET) {
-            if (!requiredClasses.has(managedClass)) {
-                classList.remove(managedClass);
-            }
+        if (this.itemsObserver) {
+            this.itemsObserver.disconnect();
         }
     }
-    buildRequiredClasses(isSelected, isDisabled) {
-        const classConditions = {
-            [TAB_MANAGED_CLASSES.HYDRATED]: true,
-            [TAB_MANAGED_CLASSES.SELECTED]: isSelected,
-            [TAB_MANAGED_CLASSES.DISABLED]: isDisabled,
-            [TAB_MANAGED_CLASSES.SMALL_TAB]: this.small,
-            [TAB_MANAGED_CLASSES.STRETCHED]: this.layout === 'stretched',
-            [TAB_MANAGED_CLASSES.BOTTOM]: this.placement === 'bottom',
-            [TAB_MANAGED_CLASSES.TOP]: this.placement === 'top',
-            [TAB_MANAGED_CLASSES.CIRCLE]: this.rounded,
-        };
-        return Object.entries(classConditions)
-            .filter(([, condition]) => condition)
-            .map(([className]) => className);
-    }
-    ensureSelectedIndex() {
-        if (this.totalItems === 0) {
-            console.warn('ix-tabs: No tabs available for selection');
-            this.selected = -1;
+    onActiveTabChange(tabKey, oldTabKey) {
+        const activeTab = this.tabs.find((tab) => tab.selected);
+        if (activeTab?.tabKey === tabKey) {
             return;
         }
-        if (this.selected < this.totalItems) {
+        this.emitTabChangeEvent(tabKey, oldTabKey);
+    }
+    setTabActive(tabKey) {
+        const tabs = this.tabs;
+        if (tabKey === undefined) {
+            tabs.forEach((tab) => (tab.selected = false));
+            this.onComponentChildrenChange();
+            this.activeTabKey = undefined;
             return;
         }
-        const originalIndex = this.selected;
-        const previousIndex = originalIndex - 1;
-        if (previousIndex >= 0 && previousIndex < this.totalItems) {
-            this.updateSelected(previousIndex);
+        const newTab = tabs.find((tab) => tab.tabKey === tabKey);
+        if (!newTab) {
             return;
         }
-        if (this.totalItems > 0) {
-            this.updateSelected(0);
-        }
-    }
-    updateSelected(index) {
-        this.selected = index;
-        this.selectedChange.emit(index);
-    }
-    updateTabAttributes() {
-        const tabs = this.getTabs();
-        this.totalItems = tabs.length;
-        this.ensureSelectedIndex();
-        for (const [index, element] of tabs.entries()) {
-            this.setTabAttributes(element, index);
+        if (newTab.disabled) {
+            return;
         }
-        const overflow = this.showArrows();
-        tabs.forEach((el) => {
-            el.style.touchAction = overflow ? 'none' : '';
+        tabs.forEach((tab) => (tab.selected = false));
+        newTab.selected = true;
+        this.onComponentChildrenChange();
+        this.activeTabKey = newTab.tabKey;
+        newTab.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'center',
         });
-        this.renderArrows();
-    }
-    showArrows() {
-        try {
-            const tabWrapper = this.getTabsWrapper();
-            return (tabWrapper &&
-                tabWrapper.scrollWidth >
-                    Math.ceil(tabWrapper.getBoundingClientRect().width) &&
-                this.layout === 'auto');
-        }
-        catch (_a) {
-            return false;
-        }
-    }
-    showPreviousArrow() {
-        try {
-            return this.showArrows() === true && this.scrollActionAmount < 0;
-        }
-        catch (_a) {
-            return false;
-        }
-    }
-    showNextArrow() {
-        try {
-            const tabWrapper = this.getTabsWrapper();
-            if (!tabWrapper) {
-                return false;
-            }
-            const tabWrapperRect = tabWrapper.getBoundingClientRect();
-            return (this.showArrows() === true &&
-                this.scrollActionAmount >
-                    (tabWrapper.scrollWidth - tabWrapperRect.width) * -1);
-        }
-        catch (_a) {
-            return false;
+        return this.activeTabKey;
+    }
+    onComponentChildrenChange() {
+        const tabItems = this.tabs;
+        tabItems.forEach((tab) => {
+            const propertiesToInherit = {
+                layout: this.layout,
+                small: this.small,
+                rounded: this.rounded,
+                placement: this.placement,
+                iconOnly: tabItems.every((t) => !t.label && !!t.icon),
+            };
+            Object.assign(tab, propertiesToInherit);
+        });
+        this.overflowMenuItems = Array.from(tabItems).map((item) => ({
+            tabKey: item.tabKey,
+            label: item.label || item.textContent || '',
+            icon: item.icon,
+            disabled: item.disabled,
+        }));
+        const isTabSelected = tabItems.some((tab) => tab.selected);
+        if (!isTabSelected && tabItems.length > 0 && hasKeyboardMode()) {
+            tabItems[0].focus();
+            this.emitTabChangeEvent(tabItems[0].tabKey);
         }
     }
-    move(amount, click = false) {
-        const tabsWrapper = this.getTabsWrapper();
-        if (!tabsWrapper) {
+    onComponentResize() {
+        const tabContainer = this.tabsRef.current;
+        if (!tabContainer) {
             return;
         }
-        const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;
-        const maxScrollWidth = -this.currentScrollAmount +
-            tabsWrapperVisibleWidth -
-            tabsWrapper.scrollWidth;
-        amount = amount < maxScrollWidth ? maxScrollWidth : amount;
-        amount += this.currentScrollAmount;
-        amount = Math.min(amount, 0);
-        const styles = [
-            `transform: translateX(${amount}px);`,
-            click ? 'transition: all ease-in-out 400ms;' : '',
-        ].join('');
-        tabsWrapper.setAttribute('style', styles);
-        if (click)
-            this.currentScrollAmount = this.scrollActionAmount = amount;
-        else
-            this.scrollActionAmount = amount;
+        readTask(() => {
+            const isOverflowing = tabContainer.scrollWidth > tabContainer.clientWidth;
+            this.isTabsOverflow = isOverflowing;
+        });
     }
-    onSelectedChange(newValue) {
-        if (!this.showArrows())
-            return;
-        const tab = this.getTab(newValue);
-        const container = this.getTabsContainer();
-        if (!tab || !container)
+    onTabClick(event) {
+        if (event.defaultPrevented) {
             return;
-        const containerRect = container.getBoundingClientRect();
-        const tabRect = tab.getBoundingClientRect();
-        const tabLeftRelative = tabRect.left - containerRect.left;
-        const tabRightRelative = tabLeftRelative + tabRect.width;
-        if (tabLeftRelative < this.ARROW_WIDTH) {
-            this.move(-tabLeftRelative + this.ARROW_WIDTH, true);
-        }
-        else if (tabRightRelative > containerRect.width - this.ARROW_WIDTH) {
-            this.move(containerRect.width - tabRightRelative - this.ARROW_WIDTH, true);
         }
-    }
-    setSelected(index) {
-        this.selected = index;
-    }
-    clickTab(index) {
-        // Don't select if it was a drag
-        if (!this.clickAction.isClick) {
+        if (event.detail.tabKey === undefined) {
             return;
         }
-        const { defaultPrevented } = this.selectedChange.emit(index);
-        if (defaultPrevented) {
+        this.emitTabChangeEvent(event.detail.tabKey);
+    }
+    emitTabChangeEvent(tabKey, oldTabKey = this.activeTabKey) {
+        emitEvent(() => {
+            const newKey = this.setTabActive(tabKey);
+            return {
+                new: newKey,
+                old: oldTabKey,
+            };
+        }, this.tabChange, (oldKey) => this.setTabActive(oldKey));
+    }
+    onTabsNavigate(event) {
+        if (event.target instanceof HTMLElement &&
+            event.target.getAttribute('role') === 'tablist') {
             return;
         }
-        this.setSelected(index);
-    }
-    dragStart(element, event) {
-        if (!this.showArrows())
-            return;
-        if (event.button > 0)
-            return;
-        if (this.isDragging)
-            return;
-        event.preventDefault();
-        this.isDragging = true;
-        this.clickAction.isClick = true;
-        element.setPointerCapture(event.pointerId);
-        const pointerdownPositionX = event.clientX;
-        const initialScrollAmount = this.currentScrollAmount;
-        const move = (event) => this.dragMove(event, pointerdownPositionX);
-        const cleanupPointerListeners = () => {
-            element.removeEventListener('pointermove', move, false);
-            element.removeEventListener('pointerup', pointerUp, false);
-            element.removeEventListener('pointercancel', pointerCancel, false);
-        };
-        const pointerUp = () => {
-            cleanupPointerListeners();
-            this.isDragging = false;
-            this.dragStop();
-            if (this.clickAction.isClick) {
-                const tabs = this.getTabs();
-                const index = tabs.indexOf(element);
-                if (index >= 0 && !element.disabled) {
-                    this.clickTab(index);
-                }
+        const tabs = this.tabs.filter((tab) => !tab.disabled);
+        let currentIndex = tabs.findIndex((tab) => tab.selected);
+        if (this.keyboardNavigation === 'manual') {
+            currentIndex = tabs.findIndex((tab) => tab === document.activeElement);
+        }
+        const activeTab = (tab) => {
+            tab.focus();
+            if (this.keyboardNavigation === 'automatic') {
+                this.emitTabChangeEvent(tab.tabKey);
             }
         };
-        const pointerCancel = () => {
-            cleanupPointerListeners();
-            this.isDragging = false;
-            this.scrollActionAmount = initialScrollAmount;
-            const tabsWrapper = this.getTabsWrapper();
-            if (tabsWrapper) {
-                tabsWrapper.setAttribute('style', `transform: translateX(${initialScrollAmount}px);`);
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            if (currentIndex === -1) {
+                return;
             }
-            this.clickAction.isClick = true;
-        };
-        element.addEventListener('pointerup', pointerUp);
-        element.addEventListener('pointercancel', pointerCancel);
-        element.addEventListener('pointermove', move, false);
-    }
-    dragMove(event, pointerdownX) {
-        const delta = event.clientX - pointerdownX;
-        if (Math.abs(delta) > this.TAP_THRESHOLD_PX) {
-            this.clickAction.isClick = false;
+            const indexOffset = event.key === 'ArrowRight' ? 1 : -1;
+            const nextIndex = (currentIndex + indexOffset + tabs.length) % tabs.length;
+            const nextTab = tabs[nextIndex];
+            activeTab(nextTab);
         }
-        this.move(delta);
-    }
-    dragStop() {
-        if (this.clickAction.isClick) {
-            return;
-        }
-        this.currentScrollAmount = this.scrollActionAmount;
-    }
-    componentWillLoad() {
-        this.initResizeObserver();
-    }
-    componentDidRender() {
-        this.updateTabAttributes();
-    }
-    componentWillRender() {
-        this.renderArrows();
-    }
-    renderArrows() {
-        requestAnimationFrameNoNgZone(() => {
-            this.showArrowNext = this.showNextArrow();
-            this.showArrowPrevious = this.showPreviousArrow();
-        });
-    }
-    componentDidLoad() {
-        const tabs = this.getTabs();
-        tabs.forEach((element) => {
-            element.addEventListener('pointerdown', (event) => this.dragStart(element, event));
-        });
-        const wrapper = this.getTabsWrapper();
-        if (wrapper) {
-            wrapper.addEventListener('touchstart', (e) => {
-                if (this.showArrows()) {
-                    e.preventDefault();
-                }
-            }, { passive: false });
+        if (event.key === 'Home') {
+            event.preventDefault();
+            activeTab(tabs[0]);
         }
-        this.observeSlotChanges();
-    }
-    disconnectedCallback() {
-        var _a, _b;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.classObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    }
-    onTabClick(event) {
-        if (event.defaultPrevented) {
-            return;
+        if (event.key === 'End') {
+            event.preventDefault();
+            activeTab(tabs[tabs.length - 1]);
         }
-        const target = event.target;
-        const tabs = this.getTabs();
-        tabs.forEach((tab, index) => {
-            if (!tab.disabled && tab === target) {
-                this.clickTab(index);
-            }
-        });
     }
     render() {
-        return (h(Host, { key: '4d60486e9ae8c9b154df97446534697a6b8a52d6' }, this.showArrowPrevious && (h("button", { key: '358885efeb578914036d4475377e0e8695937f13', class: "arrow", onClick: () => this.move(this.scrollAmount, true), "aria-label": this.ariaLabelChevronLeftIconButton }, h("ix-icon", { key: 'd434ddb5acb03c058af167b7590bdc1018166e58', name: iconChevronLeftSmall, "aria-hidden": "true" }))), h("div", { key: '24bc36c48fb9fd1cb2e3181dae47402fe5335bd0', class: {
-                'tab-items': true,
-                'overflow-shadow': true,
-                'shadow-left': this.showArrowPrevious,
-                'shadow-right': this.showArrowNext,
-                'shadow-both': this.showArrowNext && this.showArrowPrevious,
-            } }, h("div", { key: 'a647c41bbd347379a9e7621705024f3182c08827', class: "items-content", role: "tablist" }, h("slot", { key: '92436d5e8b7a867de8e37b68a55600e590de63eb' }))), this.showArrowNext && (h("button", { key: '27a519f552b7950cd8b57985110fec983ca675bc', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true), "aria-label": this.ariaLabelChevronRightIconButton }, h("ix-icon", { key: '8c5e55420b51983b85d221708f691f407c8ecbb8', name: iconChevronRightSmall, "aria-hidden": "true" })))));
+        return (h(Host, { key: '2e8b5f9f4d3658bd219e6ca5d5a829d16f0c1977', onTabClick: (event) => this.onTabClick(event), class: {
+                small: this.small,
+            } }, h("div", { key: '8e45e2d46485c6e3147b2237f6109d63cd02758c', ref: this.tabsContainerRef, class: {
+                'tabs-container': true,
+                top: this.placement === 'top',
+                bottom: this.placement === 'bottom',
+            } }, h("div", { key: '69b6177b0c8c7c20d039a434866f93135e168155', class: {
+                'overflow-shadow-container': true,
+                'overflow-shadow': this.isTabsOverflow,
+            } }, h("div", { key: '97d6ccbe5e623cbedf6be21de05005599b9a2bcd', role: "tablist", ...this.inheritAriaAttributes, ref: this.tabsRef, class: {
+                tabs: true,
+                'tabs-stretched': this.layout === 'stretched',
+            }, tabIndex: this.isTabsOverflow ? 0 : -1, onKeyDown: (event) => this.onTabsNavigate(event) }, h("slot", { key: '2ceb8d8dc886c9784e244172750192297f077360' }))), this.isTabsOverflow && this.layout !== 'stretched' && (h("ix-dropdown-button", { key: 'a7041a35c2dcac4f86eefbfbae5ac36ba9c45436', ariaLabel: this.ariaLabelMoreTabs, icon: iconMoreMenu, class: {
+                'tabs-context-menu': true,
+            }, variant: "subtle-tertiary" }, this.overflowMenuItems.map((item) => (h("ix-dropdown-item", { key: item.tabKey, checked: item.tabKey === this.activeTabKey, icon: item.icon, label: item.label, disabled: item.disabled, onClick: () => (this.activeTabKey = item.tabKey) }))))))));
     }
     static get is() { return "ix-tabs"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["tabs.scss"]
@@ -457,26 +298,6 @@ export class Tabs {
                 "attribute": "rounded",
                 "defaultValue": "false"
             },
-            "selected": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set default selected tab by index"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selected",
-                "defaultValue": "0"
-            },
             "layout": {
                 "type": "string",
                 "mutable": false,
@@ -517,7 +338,7 @@ export class Tabs {
                 "attribute": "placement",
                 "defaultValue": "'bottom'"
             },
-            "ariaLabelChevronLeftIconButton": {
+            "ariaLabelMoreTabs": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -530,22 +351,44 @@ export class Tabs {
                 "docs": {
                     "tags": [{
                             "name": "since",
-                            "text": "3.2.0"
+                            "text": "5.0.0"
                         }],
-                    "text": "ARIA label for the chevron left icon button"
+                    "text": "Aria label for the overflow menu button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "aria-label-chevron-left-icon-button",
-                "defaultValue": "'Scroll tabs left'"
+                "attribute": "aria-label-more-tabs",
+                "defaultValue": "'Show all tabs'"
             },
-            "ariaLabelChevronRightIconButton": {
+            "activeTabKey": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Active tab key."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active-tab-key"
+            },
+            "keyboardNavigation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'automatic' | 'manual'",
+                    "resolved": "\"automatic\" | \"manual\"",
                     "references": {}
                 },
                 "required": false,
@@ -553,42 +396,59 @@ export class Tabs {
                 "docs": {
                     "tags": [{
                             "name": "since",
-                            "text": "3.2.0"
+                            "text": "5.0.0"
                         }],
-                    "text": "ARIA label for the chevron right icon button"
+                    "text": "Keyboard interaction behavior:\nautomatic:  A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.\nmanual: A tabs widget where users activate a tab and display its panel by pressing Space or Enter."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "aria-label-chevron-right-icon-button",
-                "defaultValue": "'Scroll tabs right'"
+                "attribute": "keyboard-navigation",
+                "defaultValue": "'automatic'"
             }
         };
     }
     static get states() {
         return {
-            "totalItems": {},
-            "currentScrollAmount": {},
-            "scrollAmount": {},
-            "scrollActionAmount": {},
-            "showArrowPrevious": {},
-            "showArrowNext": {}
+            "isTabsOverflow": {},
+            "overflowMenuItems": {}
         };
     }
     static get events() {
         return [{
-                "method": "selectedChange",
-                "name": "selectedChange",
+                "method": "tabChange",
+                "name": "tabChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Tab selection event. Event detail is the zero-based tab index. Fires when\nthe user selects a tab, or when the tab list changes and the selected index\nis adjusted. Not emitted when `selected` is set from outside."
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Tab selection event. Event detail contains the new active tab key."
+                },
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                }
+            }, {
+                "method": "tabClose",
+                "name": "tabClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Tab close event. Event detail contains the closed tab key."
                 },
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
                     "references": {}
                 }
             }];
@@ -596,23 +456,8 @@ export class Tabs {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
-                "propName": "selected",
-                "methodName": "onSelectedChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "resize",
-                "method": "onWindowResize",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "tabClick",
-                "method": "onTabClick",
-                "target": undefined,
-                "capture": false,
-                "passive": false
+                "propName": "activeTabKey",
+                "methodName": "onActiveTabChange"
             }];
     }
 }