@ui5/webcomponents 0.0.0-e463d2345 → 0.0.0-e55c2cec6

package/dist/TabContainer.js

@@ -1,56 +1,114 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js";
+import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-down.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-right.js";
-import { TABCONTAINER_PREVIOUS_ICON_ACC_NAME, TABCONTAINER_NEXT_ICON_ACC_NAME, TABCONTAINER_OVERFLOW_MENU_TITLE } from "./generated/i18n/i18n-defaults.js";
-import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js";
-import TabContainerPopoverTemplate from "./generated/templates/TabContainerPopoverTemplate.lit.js";
+import {
+	isSpace,
+	isEnter,
+	isDown,
+	isRight,
+	isLeft,
+	isUp,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import {
+	TABCONTAINER_PREVIOUS_ICON_ACC_NAME,
+	TABCONTAINER_NEXT_ICON_ACC_NAME,
+	TABCONTAINER_OVERFLOW_MENU_TITLE,
+	TABCONTAINER_END_OVERFLOW,
+	TABCONTAINER_POPOVER_CANCEL_BUTTON,
+} from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
-import CustomListItem from "./CustomListItem.js";
 import Icon from "./Icon.js";
 import List from "./List.js";
-import Popover from "./Popover.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js";
 import SemanticColor from "./types/SemanticColor.js";
+import TabContainerBackgroundDesign from "./types/TabContainerBackgroundDesign.js";
+
+// Templates
+import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js";
+import TabContainerPopoverTemplate from "./generated/templates/TabContainerPopoverTemplate.lit.js";
 
 // Styles
 import tabContainerCss from "./generated/themes/TabContainer.css.js";
+import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
+import TabLayout from "./types/TabLayout.js";
+import TabsOverflowMode from "./types/TabsOverflowMode.js";
+
+const tabStyles = [];
+const staticAreaTabStyles = [];
 
-const SCROLL_STEP = 128;
+const PAGE_UP_DOWN_SIZE = 5;
 
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-tabcontainer",
-	slots: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
+	languageAware: true,
+	managedSlots: true,
+	fastNavigation: true,
+	slots: /** @lends sap.ui.webc.main.TabContainer.prototype */ {
 		/**
 		 * Defines the tabs.
-		 * <br><b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design.
+		 * <br><br>
+		 * <b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webc.main.ITab[]}
 		 * @public
-		 * @slot
+		 * @slot items
 		 */
 		"default": {
 			propertyName: "items",
 			type: HTMLElement,
 			individualSlots: true,
-			listenFor: { include: ["*"] },
+			invalidateOnChildChange: {
+				properties: true,
+				slots: false,
+			},
+		},
+
+		/**
+		 * Defines the button which will open the overflow menu. If nothing is provided to this slot,
+		 * the default button will be used.
+		 *
+		 * @type {sap.ui.webc.main.IButton}
+		 * @public
+		 * @slot
+		 * @since 1.0.0-rc.9
+		 */
+		overflowButton: {
+			type: HTMLElement,
+		},
+
+		/**
+		 * Defines the button which will open the start overflow menu if available. If nothing is provided to this slot,
+		 * the default button will be used.
+		 *
+		 * @type {sap.ui.webc.main.IButton}
+		 * @public
+		 * @slot
+		 * @since 1.1.0
+		 */
+		startOverflowButton: {
+			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TabContainer.prototype */ {
 		/**
-		 * Determines whether the tabs are in a fixed state that is not
+		 * Defines whether the tabs are in a fixed state that is not
 		 * expandable/collapsible by user interaction.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
 		 */
@@ -59,9 +117,9 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the tab content is collapsed.
+		 * Defines whether the tab content is collapsed.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
 		 */
@@ -70,53 +128,178 @@ const metadata = {
 		},
 
 		/**
-		 * Specifies if the overflow select list is displayed.
+		 * Defines the placement of the tab strip relative to the actual tabs' content.
 		 * <br><br>
-		 * The overflow select list represents a list, where all tab filters are displayed
-		 * so that it's easier for the user to select a specific tab filter.
+		 * <b>Note:</b> By default the tab strip is displayed above the tabs' content area and this is the recommended
+		 * layout for most scenarios. Set to <code>Bottom</code> only when the component is at the
+		 * bottom of the page and you want the tab strip to act as a menu.
 		 *
-		 * @type {Boolean}
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Top</code></li>
+		 * <li><code>Bottom</code></li>
+		 * </ul>
+		 *
+		 * @type {sap.ui.webc.main.types.TabContainerTabsPlacement}
+		 * @defaultvalue "Top"
+		 * @since 1.0.0-rc.7
+		 * @private
+		 */
+		tabsPlacement: {
+			type: TabContainerTabsPlacement,
+			defaultValue: TabContainerTabsPlacement.Top,
+		},
+
+		/**
+		 * Defines whether the overflow select list is displayed.
+		 * <br><br>
+		 * The overflow select list represents a list, where all tabs are displayed
+		 * so that it's easier for the user to select a specific tab.
+		 *
+		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
+		 * @deprecated Since the introduction of TabsOverflowMode, overflows will always be visible if there is not enough space for all tabs,
+		 * all hidden tabs are moved to a select list in the respective overflows and are accessible via the <code>overflowButton</code> and / or <code>startOverflowButton</code> slots.
 		 */
 		showOverflow: {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the alignment of the content and the <code>additionalText</code> of a tab.
+		 *
+		 * <br><br>
+		 * <b>Note:</b>
+		 * The content and the <code>additionalText</code> would be displayed vertically by defualt,
+		 * but when set to <code>Inline</code>, they would be displayed horizontally.
+		 *
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Standard</code></li>
+		 * <li><code>Inline</code></li>
+		 * </ul>
+		 *
+		 * @type {sap.ui.webc.main.types.TabLayout}
+		 * @defaultvalue "Standard"
+		 * @public
+		 */
+		tabLayout: {
+			type: String,
+			defaultValue: TabLayout.Standard,
+		},
+
+		/**
+		 * Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.
+		 * All other tabs that can 't fit on the screen are available in an overflow tab "More".
+		 *
+		 * <br><br>
+		 * <b>Note:</b>
+		 * Only one overflow at the end would be displayed by default,
+		 * but when set to <code>StartAndEnd</code>, there will be two overflows on both ends, and tab order will not change on tab selection.
+		 *
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>End</code></li>
+		 * <li><code>StartAndEnd</code></li>
+		 * </ul>
+		 *
+		 * @type {sap.ui.webc.main.types.TabsOverflowMode}
+		 * @defaultvalue "End"
+		 * @since 1.1.0
+		 * @public
+		 */
+		tabsOverflowMode: {
+			type: TabsOverflowMode,
+			defaultValue: TabsOverflowMode.End,
+		},
+
+		/**
+		 * Defines the current media query size.
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		mediaRange: {
+			type: String,
+		},
+
+		/**
+		 * Sets the background color of the Tab Container's header as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
+		 *
+		 * @type {sap.ui.webc.main.types.TabContainerBackgroundDesign}
+		 * @defaultvalue "Solid"
+		 * @since 1.10.0
+		 * @public
+		 */
+		headerBackgroundDesign: {
+			type: TabContainerBackgroundDesign,
+			defaultValue: TabContainerBackgroundDesign.Solid,
+		},
+
+		/**
+		 * Sets the background color of the Tab Container's content as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
+		 *
+		 * @type {sap.ui.webc.main.types.TabContainerBackgroundDesign}
+		 * @defaultvalue "Solid"
+		 * @since 1.10.0
+		 * @public
+		 */
+		contentBackgroundDesign: {
+			type: TabContainerBackgroundDesign,
+			defaultValue: TabContainerBackgroundDesign.Solid,
+		},
+
 		_selectedTab: {
 			type: Object,
 		},
 
-		_scrollable: {
+		_animationRunning: {
 			type: Boolean,
 			noAttribute: true,
 		},
 
-		_scrollableBack: {
+		_contentCollapsed: {
 			type: Boolean,
 			noAttribute: true,
 		},
 
-		_scrollableForward: {
-			type: Boolean,
+		_startOverflowText: {
+			type: String,
 			noAttribute: true,
+			defaultValue: "0",
 		},
-		_textOnly: {
-			type: Boolean,
+
+		_endOverflowText: {
+			type: String,
 			noAttribute: true,
+			defaultValue: "More",
 		},
 
+		_overflowItems: {
+			type: Object,
+			multiple: true,
+		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
+	events: /** @lends sap.ui.webc.main.TabContainer.prototype */ {
+
 		/**
-		 * Fired when an item is selected.
+		 * Fired when a tab is selected.
 		 *
-		 * @event
-		 * @param {HTMLElement} item The selected <code>item</code>.
+		 * @event sap.ui.webc.main.TabContainer#tab-select
+		 * @param {HTMLElement} tab The selected <code>tab</code>.
+		 * @param {Integer} tabIndex The selected <code>tab</code> index in the flattened array of all tabs and their subTabs, provided by the <code>allItems</code> getter.
 		 * @public
+		 * @allowPreventDefault
 		 */
-		itemSelect: {
-			item: { type: HTMLElement },
+		"tab-select": {
+			detail: {
+				tab: { type: HTMLElement },
+				tabIndex: { type: Number },
+			},
 		},
 	},
 };
@@ -135,10 +318,32 @@ const metadata = {
  * The <code>ui5-tabcontainer</code> can hold two types of entities:
  * <ul>
  * <li><code>ui5-tab</code> - contains all the information on an item (text and icon)</li>
- * <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li>
+ * <li><code>ui5-tab-separator</code> - used to separate tabs with a line</li>
+ * </ul>
+ *
+ * <h3>Hierarchies</h3>
+ * Multiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations
+ * to indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split
+ * to allow the user to display the content or alternatively to expand / collapse the list of sub tabs.
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-tabcontainer</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>content - Used to style the content of the component</li>
  * </ul>
  *
- * <h3>ES6 import</h3>
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
+ * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/TabContainer";</code>
  * <br>
@@ -148,8 +353,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TabContainer
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.TabContainer
+ * @extends sap.ui.webc.base.UI5Element
  * @appenddocs Tab TabSeparator
  * @tagname ui5-tabcontainer
  * @public
@@ -160,7 +365,11 @@ class TabContainer extends UI5Element {
 	}
 
 	static get styles() {
-		return tabContainerCss;
+		return [tabStyles, tabContainerCss];
+	}
+
+	static get staticAreaStyles() {
+		return [ResponsivePopoverCommonCss, staticAreaTabStyles];
 	}
 
 	static get render() {
@@ -175,386 +384,907 @@ class TabContainer extends UI5Element {
 		return TabContainerPopoverTemplate;
 	}
 
+	static registerTabStyles(styles) {
+		tabStyles.push(styles);
+	}
+
+	static registerStaticAreaTabStyles(styles) {
+		staticAreaTabStyles.push(styles);
+	}
+
 	constructor() {
 		super();
 
-		this._handleHeaderResize = this._handleHeaderResize.bind(this);
-
-		// Init ScrollEnablement
-		this._scrollEnablement = new ScrollEnablement(this);
-		this._scrollEnablement.attachEvent("scroll", this._updateScrolling.bind(this));
+		this._handleResize = this._handleResize.bind(this);
 
 		// Init ItemNavigation
-		this._initItemNavigation();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => this._getFocusableRefs(),
+			skipItemsSize: PAGE_UP_DOWN_SIZE,
+		});
 	}
 
 	onBeforeRendering() {
-		const hasSelected = this.items.some(item => item.selected);
-		this._textOnly = this.items.every(item => !item.icon);
+		this._allItemsAndSubItems = this._getAllSubItems(this.items);
+		if (!this._allItemsAndSubItems.length) {
+			return;
+		}
 
-		this.items.forEach(item => {
-			item._getTabContainerHeaderItemCallback = _ => {
-				return this.getDomRef().querySelector(`#${item._id}`);
-			};
+		// update selected tab
+		const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
+		if (selectedTabs.length) {
+			this._selectedTab._selected = false;
+			this._selectedTab = selectedTabs[0];
+		} else {
+			this._selectedTab = this._allItemsAndSubItems[0];
+			this._selectedTab._selected = true;
+		}
+
+		this._setItemsPrivateProperties(this.items);
+
+		if (!this._animationRunning) {
+			this._contentCollapsed = this.collapsed;
+		}
+
+		if (this.showOverflow) {
+			console.warn(`The "show-overflow" property is deprecated and will be removed in a future release.`); // eslint-disable-line
+		}
+	}
+
+	onAfterRendering() {
+		if (!this.items.length) {
+			return;
+		}
+
+		this._setItemsForStrip();
+
+		if (!this.shadowRoot.contains(document.activeElement)) {
+			const focusStart = this._getRootTab(this._selectedTab);
+			this._itemNavigation.setCurrentItem(focusStart);
+		}
+	}
+
+	onEnterDOM() {
+		ResizeHandler.register(this._getHeader(), this._handleResize);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this._getHeader(), this._handleResize);
+	}
+
+	async _handleResize() {
+		if (this.responsivePopover && this.responsivePopover.opened) {
+			this.responsivePopover.close();
+		}
+		this._updateMediaRange();
+
+		await renderFinished(); // await the tab container to have rendered its representation of tabs
+		this._setItemsForStrip();
+	}
+
+	_updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
+	_setItemsPrivateProperties(items) {
+		// set real dom ref to all items, then return only the tabs for further processing
+		const allTabs = items.filter(item => {
+			item._getElementInStrip = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
+			return !item.isSeparator;
+		});
+
+		allTabs.forEach((tab, index, arr) => {
+			tab._isInline = this.tabLayout === TabLayout.Inline;
+			tab._mixedMode = this.mixedMode;
+			tab._posinset = index + 1;
+			tab._setsize = arr.length;
+			tab._realTab = this._selectedTab;
+			tab._isTopLevelTab = items.some(i => i === tab);
+			walk(items, _tab => {
+				_tab._realTab = tab._realTab;
+			});
 		});
-		if (this.items.length && !hasSelected) {
-			this.items[0].selected = true;
+	}
+
+	_onHeaderFocusin(event) {
+		let target = event.target;
+
+		const tab = getTab(target);
+		if (tab) {
+			target = tab._realTab;
 		}
 
-		this.calculateRenderItems();
+		this._itemNavigation.setCurrentItem(target);
 	}
 
-	calculateRenderItems() {
-		this.renderItems = this.items.map((item, index) => {
-			const isSeparator = item.isSeparator;
+	async _onTabStripClick(event) {
+		const tab = getTab(event.target);
+		if (!tab || tab._realTab.disabled) {
+			return;
+		}
+
+		event.stopPropagation();
+		event.preventDefault();
+		if (event.target.hasAttribute("ui5-button")) {
+			this._onTabExpandButtonClick(event);
+			return;
+		}
+
+		if (!tab._realTab._hasOwnContent && tab._realTab.tabs.length) {
+			this._overflowItems = tab._realTab.subTabs;
+			this._addStyleIndent(this._overflowItems);
 
-			if (isSeparator) {
-				return { isSeparator, _tabIndex: item._tabIndex, _id: item._id };
+			this.responsivePopover = await this._respPopover();
+			if (this.responsivePopover.opened) {
+				this.responsivePopover.close();
+			} else {
+				this._setPopoverInitialFocus();
 			}
 
-			return {
-				item,
-				isMixedModeTab: !item.icon && this.mixedMode,
-				isTextOnlyTab: !item.icon && !this.mixedMode,
-				isIconTab: item.icon,
-				position: index + 1,
-				disabled: item.disabled || undefined,
-				selected: item.selected || false,
-				hidden: !item.selected,
-				ariaLabelledBy: calculateAriaLabelledBy(item),
-				contentItemClasses: calculateContentItemClasses(item),
-				headerItemClasses: calculateHeaderItemClasses(item, this.mixedMode),
-				headerItemContentClasses: calculateHeaderItemContentClasses(item),
-				headerItemIconClasses: calculateHeaderItemIconClasses(item),
-				headerItemSemanticIconClasses: calculateHeaderItemSemanticIconClasses(item),
-				headerItemTextClasses: calculateHeaderItemTextClasses(item),
-				headerItemAdditionalTextClasses: calculateHeaderItemAdditionalTextClasses(item),
-				overflowItemClasses: calculateOverflowItemClasses(item),
-				overflowItemContentClasses: calculateOverflowItemContentClasses(item),
-				overflowItemState: calculateOverflowItemState(item),
-			};
-		}, this);
+			this.responsivePopover.showAt(tab._realTab.getTabInStripDomRef());
+			return;
+		}
+		this._onHeaderItemSelect(tab);
 	}
 
-	onAfterRendering() {
-		this._scrollEnablement.scrollContainer = this._getHeaderScrollContainer();
-		this._updateScrolling();
+	async _onTabExpandButtonClick(event) {
+		event.stopPropagation();
+		event.preventDefault();
+		let button = event.target;
+		let tabInstance = button.tab;
+
+		if (tabInstance) {
+			tabInstance.focus({ focusVisible: true });
+		}
+
+		if ((event.type === "keydown") && !event.target._realTab.isSingleClickArea) {
+			button = event.target.querySelectorAll(".ui5-tab-expand-button")[0];
+			tabInstance = event.target._realTab;
+		}
+
+		// if clicked between the expand button and the tab
+		if (!tabInstance) {
+			this._onHeaderItemSelect(button.parentElement);
+			return;
+		}
+
+		this._overflowItems = tabInstance.subTabs;
+		this._addStyleIndent(this._overflowItems);
+
+		this.responsivePopover = await this._respPopover();
+		if (this.responsivePopover.isOpen()) {
+			this.responsivePopover.close();
+		} else {
+			this._setPopoverInitialFocus();
+		}
+		this.responsivePopover.showAt(button);
 	}
 
-	onEnterDOM() {
-		ResizeHandler.register(this._getHeader(), this._handleHeaderResize);
+	async _setPopoverInitialFocus() {
+		const selectedTabInOverflow = this._getSelectedTabInOverflow();
+		const tab = selectedTabInOverflow || this._getFirstFocusableItemInOverflow();
+
+		this.responsivePopover.initialFocus = `${tab._realTab._id}-li`;
 	}
 
-	onExitDOM() {
-		ResizeHandler.deregister(this._getHeader(), this._handleHeaderResize);
+	_getSelectedTabInOverflow() {
+		return this.responsivePopover.content[0].items.find(item => (item._realTab && item._realTab.selected));
 	}
 
-	_onHeaderItemKeyDown(event) {
+	_getFirstFocusableItemInOverflow() {
+		return this.responsivePopover.content[0].items.find(item => item.classList.contains("ui5-tab-overflow-item"));
+	}
+
+	_onTabStripKeyDown(event) {
+		const tab = getTab(event.target);
+		if (!tab || tab._realTab.disabled) {
+			return;
+		}
+
 		if (isEnter(event)) {
-			this._onHeaderItemSelect(event);
+			if (tab._realTab.isSingleClickArea) {
+				this._onTabStripClick(event);
+			} else {
+				this._onHeaderItemSelect(tab);
+			}
 		}
 
-		// Prevent Scrolling
 		if (isSpace(event)) {
-			event.preventDefault();
+			event.preventDefault(); // prevent scrolling
 		}
-	}
 
-	_onHeaderItemKeyUp(event) {
-		if (isSpace(event)) {
-			this._onHeaderItemSelect(event);
+		if (isDown(event) || isUp(event)) {
+			if (tab._realTab.requiresExpandButton) {
+				this._onTabExpandButtonClick(event);
+			}
+			if (tab._realTab.isSingleClickArea) {
+				this._onTabStripClick(event);
+			}
 		}
 	}
 
-	_initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this);
-		this._itemNavigation.getItemsCallback = () => this._getTabs();
-	}
+	_onTabStripKeyUp(event) {
+		const tab = getTab(event.target);
+		if (!tab || tab._realTab.disabled) {
+			return;
+		}
 
-	_onHeaderItemSelect(event) {
-		if (!event.target.hasAttribute("disabled")) {
-			this._onItemSelect(event.target);
+		if (isSpace(event)) {
+			event.preventDefault();
+			if (tab._realTab.isSingleClickArea) {
+				this._onTabStripClick(event);
+			} else {
+				this._onHeaderItemSelect(tab);
+			}
 		}
 	}
 
-	_onOverflowListItemSelect(event) {
-		this._onItemSelect(event.detail.item);
-		this.popover.close();
-		this.shadowRoot.querySelector(`#${event.detail.item.id}`).focus();
+	_onHeaderItemSelect(tab) {
+		if (!tab.hasAttribute("disabled")) {
+			this._onItemSelect(tab.id);
+		}
 	}
 
-	_onItemSelect(target) {
-		const selectedIndex = findIndex(this.items, item => item._id === target.id);
-		const selectedTabIndex = findIndex(this._getTabs(), item => item._id === target.id);
-		const currentSelectedTab = this.items[selectedIndex];
+	async _onOverflowListItemClick(event) {
+		event.preventDefault(); // cancel the item selection
+
+		this._onItemSelect(event.detail.item.id.slice(0, -3)); // strip "-li" from end of id
+
+		this.responsivePopover.close();
+		await renderFinished();
+
+		const selectedTopLevel = this._getRootTab(this._selectedTab);
+		selectedTopLevel.getTabInStripDomRef().focus({ focusVisible: true });
+	}
 
-		// update selected items
-		this.items.forEach((item, index) => {
-			if (!item.isSeparator) {
-				const selected = selectedIndex === index;
-				item.selected = selected;
+	/**
+	 * Returns all slotted tabs and their subTabs in a flattened array.
+	 * The order of tabs is depth-first. For example, given the following slotted elements:
+	 * <code>
+	 * 	<ui5-tabcontainer>
+	 * 		<ui5-tab id="First">
+	 * 			...
+	 * 			<ui5-tab slot="subTabs" id="Nested">...</ui5-tab>
+	 * 		</ui5-tab>
+	 * 		<ui5-tab id="Second">...</ui5-tab>
+	 * 		<ui5-tab-separator id="sep"></ui5-tab-separator>
+	 * 		<ui5-tab id="Third">...</ui5-tab>
+	 * 	</ui5-tabcontainer>
+	 * </code>
+	 * Calling <code>allItems</code> on this TabContainer will return the instances in the following order:
+	 * <code>[ ui5-tab#First, ui5-tab#Nested, ui5-tab#Second, ui5-tab-separator#sep, ui5-tab#Third ]</code>
+	 * @public
+	 * @readonly
+	 *
+	 * @returns {sap.ui.webc.main.ITab[]}
+	 */
+	get allItems() {
+		return this._getAllSubItems(this.items);
+	}
 
-				if (selected) {
-					this._itemNavigation.current = selectedTabIndex;
+	_getAllSubItems(items, result = [], level = 1) {
+		items.forEach(item => {
+			if (item.hasAttribute("ui5-tab") || item.hasAttribute("ui5-tab-separator")) {
+				item._level = level;
+				result.push(item);
+				if (item.subTabs) {
+					this._getAllSubItems(item.subTabs, result, level + 1);
 				}
 			}
-		}, this);
+		});
+		return result;
+	}
 
-		// update collapsed state
-		if (!this.fixed) {
-			if (currentSelectedTab === this._selectedTab) {
-				this.collapsed = !this.collapsed;
-			} else {
-				this.collapsed = false;
-			}
+	_onItemSelect(selectedTabId) {
+		const previousTab = this._selectedTab;
+		const selectedTabIndex = this._allItemsAndSubItems.findIndex(item => item.__id === selectedTabId);
+		const selectedTab = this._allItemsAndSubItems[selectedTabIndex];
+
+		const selectionSuccessful = this.selectTab(selectedTab, selectedTabIndex);
+		if (!selectionSuccessful) {
+			return;
 		}
 
-		// select the tab
-		this._selectedTab = currentSelectedTab;
-		this.fireEvent("itemSelect", {
-			item: currentSelectedTab,
+		// update selected property on all items
+		this._allItemsAndSubItems.forEach((item, index) => {
+			const selected = selectedTabIndex === index;
+			item.selected = selected;
+
+			if (item._selected) {
+				item._selected = false;
+			}
 		});
+
+		if (this.fixed) {
+			return;
+		}
+
+		if (!this.animate) {
+			this.toggle(selectedTab, previousTab);
+		} else {
+			this.toggleAnimated(selectedTab, previousTab);
+		}
+	}
+
+	async toggleAnimated(selectedTab, previousTab) {
+		const content = this.shadowRoot.querySelector(".ui5-tc__content");
+		let animationPromise = null;
+
+		this._animationRunning = true;
+
+		if (selectedTab === previousTab) {
+			// click on already selected tab - animate both directions
+			this.collapsed = !this.collapsed;
+			animationPromise = this.collapsed ? this.slideContentUp(content) : this.slideContentDown(content);
+		} else {
+			// click on new tab - animate if the content is currently collapsed
+			animationPromise = this.collapsed ? this.slideContentDown(content) : Promise.resolve();
+			this.collapsed = false;
+		}
+
+		await animationPromise;
+		this._contentCollapsed = this.collapsed;
+		this._animationRunning = false;
+	}
+
+	toggle(selectedTab, previousTab) {
+		if (selectedTab === previousTab) {
+			this.collapsed = !this.collapsed;
+		} else {
+			this.collapsed = false;
+		}
 	}
 
-	_onOverflowButtonClick(event) {
-		this.popover = this.getStaticAreaItemDomRef().querySelector("ui5-popover");
-		this.popover.openBy(event.target);
+	/**
+	 * Fires the <code>tab-select</code> event and changes the internal reference for the currently selected tab.
+	 * If the event is prevented, the current tab is not changed.
+	 * @private
+	 *
+	 * @param {object} selectedTab selected tab instance
+	 * @param {number} selectedTabIndex selected tab index for an array containing all tabs and sub tabs. <b>Note:</b> Use the method <code>allTabs</code> to get this array.
+	 * @returns {boolean} true if the tab selection is successful, false if it was prevented
+	 */
+	selectTab(selectedTab, selectedTabIndex) {
+		if (!this.fireEvent("tab-select", { tab: selectedTab, tabIndex: selectedTabIndex }, true)) {
+			return false;
+		}
+
+		// select the tab
+		this._selectedTab = selectedTab;
+		return true;
 	}
 
-	_onHeaderBackArrowClick() {
-		this._scrollEnablement.move(-SCROLL_STEP, 0).promise()
-			.then(_ => this._updateScrolling());
+	slideContentDown(element) {
+		return slideDown(element).promise();
 	}
 
-	_onHeaderForwardArrowClick() {
-		this._scrollEnablement.move(SCROLL_STEP, 0).promise()
-			.then(_ => this._updateScrolling());
+	slideContentUp(element) {
+		return slideUp(element).promise();
 	}
 
-	_handleHeaderResize() {
-		this._updateScrolling();
+	async _onOverflowClick(event) {
+		if (event.target.classList.contains("ui5-tc__overflow")) {
+			// the empty area in the overflow was clicked
+			return;
+		}
+
+		const overflow = event.currentTarget;
+		const isEndOverflow = overflow.classList.contains("ui5-tc__overflow--end");
+		const isStartOverflow = overflow.classList.contains("ui5-tc__overflow--start");
+		const overflowAttr = isEndOverflow ? "end-overflow" : "start-overflow";
+
+		this._overflowItems = this.items.filter(item => {
+			const stripRef = item.getTabInStripDomRef();
+
+			return stripRef && stripRef.hasAttribute(overflowAttr);
+		});
+
+		this._addStyleIndent(this._overflowItems);
+
+		let opener;
+		if (isEndOverflow) {
+			opener = this.overflowButton[0] || this._getEndOverflowBtnDOM();
+		}
+
+		if (isStartOverflow) {
+			opener = this.startOverflowButton[0] || this._getStartOverflowBtnDOM();
+		}
+
+		this.responsivePopover = await this._respPopover();
+		if (this.responsivePopover.opened) {
+			this.responsivePopover.close();
+		} else {
+			this._setPopoverInitialFocus();
+			this.responsivePopover.showAt(opener);
+		}
 	}
 
-	_updateScrolling() {
-		const headerScrollContainer = this._getHeaderScrollContainer();
+	_addStyleIndent(tabs) {
+		const extraIndent = this._getAllSubItems(tabs)
+			.filter(tab => !tab.isSeparator)
+			.some(tab => tab.design !== SemanticColor.Default && tab.design !== SemanticColor.Neutral);
+
+		walk(tabs, tab => {
+			let level = tab._level - 1;
+
+			if (tab.isSeparator) {
+				level += 1;
+			}
 
-		this._scrollable = headerScrollContainer.offsetWidth < headerScrollContainer.scrollWidth;
-		this._scrollableBack = headerScrollContainer.scrollLeft > 0;
-		this._scrollableForward = Math.ceil(headerScrollContainer.scrollLeft) < headerScrollContainer.scrollWidth - headerScrollContainer.offsetWidth;
+			tab._style = {
+				"--_ui5-tab-indentation-level": level,
+				"--_ui5-tab-extra-indent": extraIndent ? 1 : null,
+			};
+		});
 	}
 
-	_getHeader() {
-		return this.shadowRoot.querySelector(`#${this._id}-header`);
+	async _onOverflowKeyDown(event) {
+		const overflow = event.currentTarget;
+		const isEndOverflow = overflow.classList.contains("ui5-tc__overflow--end");
+		const isStartOverflow = overflow.classList.contains("ui5-tc__overflow--start");
+
+		if (isDown(event) || (isStartOverflow && isLeft(event)) || (isEndOverflow && isRight(event))) {
+			event.stopPropagation();
+			event.preventDefault();
+			await this._onOverflowClick(event);
+		}
 	}
 
-	_getTabs() {
-		return this.items.filter(item => !item.isSeparator);
+	_setItemsForStrip() {
+		const tabStrip = this._getTabStrip();
+		let allItemsWidth = 0;
+
+		if (!this._selectedTab) {
+			return;
+		}
+
+		const itemsDomRefs = this.items.map(item => item.getTabInStripDomRef());
+
+		// make sure the overflows are hidden
+		this._getStartOverflow().setAttribute("hidden", "");
+		this._getEndOverflow().setAttribute("hidden", "");
+
+		// show all tabs
+		for (let i = 0; i < itemsDomRefs.length; i++) {
+			itemsDomRefs[i].removeAttribute("hidden");
+			itemsDomRefs[i].removeAttribute("start-overflow");
+			itemsDomRefs[i].removeAttribute("end-overflow");
+		}
+
+		itemsDomRefs.forEach(item => {
+			allItemsWidth += this._getItemWidth(item);
+		});
+
+		const hasOverflow = tabStrip.offsetWidth < allItemsWidth;
+		if (!hasOverflow) {
+			return;
+		}
+
+		if (this.isModeStartAndEnd) {
+			this._updateStartAndEndOverflow(itemsDomRefs);
+			this._updateOverflowCounters();
+		} else {
+			this._updateEndOverflow(itemsDomRefs);
+		}
 	}
 
-	_getHeaderScrollContainer() {
-		return this.shadowRoot.querySelector(`#${this._id}-headerScrollContainer`);
+	_getRootTab(tab) {
+		while (tab.hasAttribute("ui5-tab")) {
+			if (tab.parentElement.hasAttribute("ui5-tabcontainer")) {
+				break;
+			}
+			tab = tab.parentElement;
+		}
+		return tab;
 	}
 
-	get classes() {
-		return {
-			root: {
-				"ui5-tc-root": true,
-				"ui5-tc--textOnly": this._textOnly,
-			},
-			header: {
-				"ui5-tc__header": true,
-				"ui5-tc__header--scrollable": this._scrollable,
-			},
-			headerScrollContainer: {
-				"ui-tc__headerScrollContainer": true,
-			},
-			headerList: {
-				"ui5-tc__headerList": true,
-			},
-			separator: {
-				"ui5-tc__separator": true,
-			},
-			headerBackArrow: {
-				"ui5-tc__headerArrow": true,
-				"ui5-tc__headerArrowLeft": true,
-				"ui5-tc__headerArrow--visible": this._scrollableBack,
-			},
-			headerForwardArrow: {
-				"ui5-tc__headerArrow": true,
-				"ui5-tc__headerArrowRight": true,
-				"ui5-tc__headerArrow--visible": this._scrollableForward,
-			},
-			overflowButton: {
-				"ui-tc__overflowButton": true,
-				"ui-tc__overflowButton--visible": this._scrollable,
-			},
-			content: {
-				"ui5-tc__content": true,
-				"ui5-tc__content--collapsed": this.collapsed,
-			},
-		};
+	_updateEndOverflow(itemsDomRefs) {
+		// show end overflow
+		this._getEndOverflow().removeAttribute("hidden");
+		const selectedTab = this._getRootTab(this._selectedTab);
+		const selectedTabDomRef = selectedTab.getTabInStripDomRef();
+		const containerWidth = this._getTabStrip().offsetWidth;
+
+		const selectedItemIndexAndWidth = this._getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef);
+		const lastVisibleTabIndex = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width);
+
+		for (let i = lastVisibleTabIndex + 1; i < itemsDomRefs.length; i++) {
+			itemsDomRefs[i].setAttribute("hidden", "");
+			itemsDomRefs[i].setAttribute("end-overflow", "");
+		}
+
+		this._endOverflowText = this.overflowButtonText;
 	}
 
-	get mixedMode() {
-		return this.items.some(item => item.icon) && this.items.some(item => item.text);
+	_updateStartAndEndOverflow(itemsDomRefs) {
+		let containerWidth = this._getTabStrip().offsetWidth;
+		const selectedTab = this._getRootTab(this._selectedTab);
+		const selectedTabDomRef = selectedTab.getTabInStripDomRef();
+		const selectedItemIndexAndWidth = this._getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef);
+		const hasStartOverflow = this._hasStartOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth);
+		const hasEndOverflow = this._hasEndOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth);
+		let firstVisible;
+		let lastVisible;
+
+		// has "end", but no "start" overflow
+		if (!hasStartOverflow) {
+			// show "end" overflow
+			this._getEndOverflow().removeAttribute("hidden");
+			// width is changed
+			containerWidth = this._getTabStrip().offsetWidth;
+
+			lastVisible = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width);
+
+			for (let i = lastVisible + 1; i < itemsDomRefs.length; i++) {
+				itemsDomRefs[i].setAttribute("hidden", "");
+				itemsDomRefs[i].setAttribute("end-overflow", "");
+			}
+
+			return;
+		}
+
+		// has "start", but no "end" overflow
+		if (!hasEndOverflow) {
+			// show "start" overflow
+			this._getStartOverflow().removeAttribute("hidden");
+			// width is changed
+			containerWidth = this._getTabStrip().offsetWidth;
+
+			firstVisible = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width);
+
+			for (let i = firstVisible - 1; i >= 0; i--) {
+				itemsDomRefs[i].setAttribute("hidden", "");
+				itemsDomRefs[i].setAttribute("start-overflow", "");
+			}
+
+			return;
+		}
+
+		// show "start" overflow
+		this._getStartOverflow().removeAttribute("hidden");
+		// show "end" overflow
+		this._getEndOverflow().removeAttribute("hidden");
+		// width is changed
+		containerWidth = this._getTabStrip().offsetWidth;
+
+		firstVisible = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, selectedItemIndexAndWidth.index - 1);
+		lastVisible = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, firstVisible);
+
+		for (let i = firstVisible - 1; i >= 0; i--) {
+			itemsDomRefs[i].setAttribute("hidden", "");
+			itemsDomRefs[i].setAttribute("start-overflow", "");
+		}
+
+		for (let i = lastVisible + 1; i < itemsDomRefs.length; i++) {
+			itemsDomRefs[i].setAttribute("hidden", "");
+			itemsDomRefs[i].setAttribute("end-overflow", "");
+		}
 	}
 
-	get previousIconACCName() {
-		return this.i18nBundle.getText(TABCONTAINER_PREVIOUS_ICON_ACC_NAME);
+	_hasStartOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth) {
+		if (selectedItemIndexAndWidth.index === 0) {
+			return false;
+		}
+
+		let leftItemsWidth = 0;
+
+		for (let i = selectedItemIndexAndWidth.index - 1; i >= 0; i--) {
+			leftItemsWidth += this._getItemWidth(itemsDomRefs[i]);
+		}
+
+		let hasStartOverflow = containerWidth < leftItemsWidth + selectedItemIndexAndWidth.width;
+
+		// if there is no "start" overflow, it has "end" overflow
+		// check it again with the "end" overflow
+		if (!hasStartOverflow) {
+			this._getEndOverflow().removeAttribute("hidden");
+			containerWidth = this._getTabStrip().offsetWidth;
+			hasStartOverflow = containerWidth < leftItemsWidth + selectedItemIndexAndWidth.width;
+			this._getEndOverflow().setAttribute("hidden", "");
+		}
+
+		return hasStartOverflow;
 	}
 
-	get nextIconACCName() {
-		return this.i18nBundle.getText(TABCONTAINER_NEXT_ICON_ACC_NAME);
+	_hasEndOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth) {
+		if (selectedItemIndexAndWidth.index >= itemsDomRefs.length) {
+			return false;
+		}
+
+		let rightItemsWidth = 0;
+
+		for (let i = selectedItemIndexAndWidth.index; i < itemsDomRefs.length; i++) {
+			rightItemsWidth += this._getItemWidth(itemsDomRefs[i]);
+		}
+
+		let hasEndOverflow = containerWidth < rightItemsWidth + selectedItemIndexAndWidth.width;
+
+		// if there is no "end" overflow, it has "start" overflow
+		// check it again with the "start" overflow
+		if (!hasEndOverflow) {
+			this._getStartOverflow().removeAttribute("hidden");
+			containerWidth = this._getTabStrip().offsetWidth;
+			hasEndOverflow = containerWidth < rightItemsWidth + selectedItemIndexAndWidth.width;
+			this._getStartOverflow().setAttribute("hidden", "");
+		}
+
+		return hasEndOverflow;
 	}
 
-	get overflowMenuTitle() {
-		return this.i18nBundle.getText(TABCONTAINER_OVERFLOW_MENU_TITLE);
+	_getItemWidth(itemDomRef) {
+		const styles = window.getComputedStyle(itemDomRef);
+		const margins = Number.parseInt(styles.marginLeft) + Number.parseInt(styles.marginRight);
+
+		return itemDomRef.offsetWidth + margins;
 	}
 
-	get rtl() {
-		return getRTL() ? "rtl" : undefined;
+	_getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef) {
+		let index = itemsDomRefs.indexOf(selectedTabDomRef);
+		let width = selectedTabDomRef.offsetWidth;
+		let selectedSeparator;
+
+		if (itemsDomRefs[index - 1] && itemsDomRefs[index - 1].isSeparator) {
+			selectedSeparator = itemsDomRefs[index - 1];
+			width += this._getItemWidth(selectedSeparator);
+		}
+
+		itemsDomRefs.splice(index, 1);
+
+		// if previous item is a separator - remove it
+		if (selectedSeparator) {
+			itemsDomRefs.splice(index - 1, 1);
+			index--;
+		}
+
+		return {
+			index,
+			width,
+		};
 	}
 
-	static async define(...params) {
-		await Promise.all([
-			Button.define(),
-			CustomListItem.define(),
-			Icon.define(),
-			List.define(),
-			Popover.define(),
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
+	_findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemWidth, startIndex) {
+		if (startIndex === undefined) {
+			startIndex = itemsDomRefs.length - 1;
+		}
+
+		let lastVisible = startIndex + 1;
+
+		for (let index = startIndex; index >= 0; index--) {
+			const itemWidth = this._getItemWidth(itemsDomRefs[index]);
+
+			if (containerWidth < selectedItemWidth + itemWidth) {
+				break;
+			}
+
+			selectedItemWidth += itemWidth;
+			lastVisible = index;
+		}
 
-		super.define(...params);
+		return lastVisible;
 	}
-}
 
-const findIndex = (arr, predicate) => {
-	for (let i = 0; i < arr.length; i++) {
-		const result = predicate(arr[i]);
+	_findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemWidth, startIndex) {
+		startIndex = startIndex || 0;
+
+		let lastVisibleIndex = startIndex - 1;
+		let index = startIndex;
+
+		for (; index < itemsDomRefs.length; index++) {
+			const itemWidth = this._getItemWidth(itemsDomRefs[index]);
+
+			if (containerWidth < selectedItemWidth + itemWidth) {
+				break;
+			}
+
+			selectedItemWidth += itemWidth;
+			lastVisibleIndex = index;
+		}
 
-		if (result) {
-			return i;
+		// if prev item is separator - hide it
+		const prevItem = itemsDomRefs[index - 1];
+		if (prevItem && prevItem.isSeparator) {
+			lastVisibleIndex -= 1;
 		}
+
+		return lastVisibleIndex;
 	}
 
-	return -1;
-};
+	get isModeStartAndEnd() {
+		return this.tabsOverflowMode === TabsOverflowMode.StartAndEnd;
+	}
+
+	_updateOverflowCounters() {
+		let startOverflowItemsCount = 0;
+		let endOverflowItemsCount = 0;
 
-/* CSS classes calculation helpers */
+		this._getTabs()
+			.map(tab => tab.getTabInStripDomRef())
+			.forEach(tab => {
+				if (tab.hasAttribute("start-overflow")) {
+					startOverflowItemsCount++;
+				}
 
-const calculateAriaLabelledBy = item => {
-	const labels = [];
+				if (tab.hasAttribute("end-overflow")) {
+					endOverflowItemsCount++;
+				}
+			});
 
-	if (item.text) {
-		labels.push(`${item._id}-text`);
+		this._startOverflowText = `+${startOverflowItemsCount}`;
+		this._endOverflowText = `+${endOverflowItemsCount}`;
 	}
 
-	if (item.additionalText) {
-		labels.push(`${item._id}-additionalText`);
+	_getFocusableRefs() {
+		if (!this.getDomRef()) {
+			return [];
+		}
+
+		const focusableRefs = [];
+
+		if (!this._getStartOverflow().hasAttribute("hidden")) {
+			focusableRefs.push(this.startOverflowButton[0] || this._getStartOverflowBtnDOM());
+		}
+
+		this._getTabs().forEach(tab => {
+			const ref = tab.getTabInStripDomRef();
+			const focusable = ref && !ref.hasAttribute("hidden");
+
+			if (focusable) {
+				focusableRefs.push(tab);
+			}
+		});
+
+		if (!this._getEndOverflow().hasAttribute("hidden")) {
+			focusableRefs.push(this.overflowButton[0] || this._getEndOverflowBtnDOM());
+		}
+
+		return focusableRefs;
 	}
 
-	if (item.icon) {
-		labels.push(`${item._id}-icon`);
+	_getHeader() {
+		return this.shadowRoot.querySelector(`#${this._id}-header`);
 	}
 
-	return labels.join(" ");
-};
+	_getTabs() {
+		return this.items.filter(item => !item.isSeparator);
+	}
 
-const calculateHeaderItemClasses = (item, mixedMode) => {
-	const classes = ["ui5-tc__headerItem"];
+	_getTabStrip() {
+		return this.shadowRoot.querySelector(`#${this._id}-tabStrip`);
+	}
 
-	if (item.selected) {
-		classes.push("ui5-tc__headerItem--selected");
+	_getStartOverflow() {
+		return this.shadowRoot.querySelector(".ui5-tc__overflow--start");
 	}
 
-	if (item.disabled) {
-		classes.push("ui5-tc__headerItem--disabled");
+	_getEndOverflow() {
+		return this.shadowRoot.querySelector(".ui5-tc__overflow--end");
 	}
 
-	if (!item.icon && !mixedMode) {
-		classes.push("ui5-tc__headerItem--textOnly");
+	_getStartOverflowBtnDOM() {
+		return this._getStartOverflow().querySelector("[ui5-button]");
 	}
 
-	if (item.icon) {
-		classes.push("ui5-tc__headerItem--withIcon");
+	_getEndOverflowBtnDOM() {
+		return this._getEndOverflow().querySelector("[ui5-button]");
 	}
 
-	if (!item.icon && mixedMode) {
-		classes.push("ui5-tc__headerItem--mixedMode");
+	async _respPopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector(`#${this._id}-overflowMenu`);
 	}
 
-	if (item.semanticColor !== SemanticColor.Default) {
-		classes.push(`ui5-tc__headerItem--${item.semanticColor.toLowerCase()}`);
+	async _closeRespPopover() {
+		this.responsivePopover = await this._respPopover();
+		this.responsivePopover.close();
 	}
 
-	return classes.join(" ");
-};
+	get classes() {
+		return {
+			root: {
+				"ui5-tc-root": true,
+				"ui5-tc--textOnly": this.textOnly,
+				"ui5-tc--withAdditionalText": this.withAdditionalText,
+				"ui5-tc--standardTabLayout": this.standardTabLayout,
+			},
+			header: {
+				"ui5-tc__header": true,
+			},
+			tabStrip: {
+				"ui5-tc__tabStrip": true,
+			},
+			separator: {
+				"ui5-tc__separator": true,
+			},
+			content: {
+				"ui5-tc__content": true,
+				"ui5-tc__content--collapsed": this._contentCollapsed,
+			},
+		};
+	}
 
-const calculateHeaderItemContentClasses = item => {
-	const classes = ["ui5-tc__headerItemContent"];
+	get mixedMode() {
+		return this.items.some(item => item.icon) && this.items.some(item => item.text);
+	}
 
-	return classes.join(" ");
-};
+	get textOnly() {
+		return this.items.every(item => !item.icon);
+	}
 
-const calculateHeaderItemIconClasses = item => {
-	const classes = ["ui5-tc-headerItemIcon"];
+	get withAdditionalText() {
+		return this.items.some(item => !!item.additionalText);
+	}
 
-	return classes.join(" ");
-};
+	get standardTabLayout() {
+		return this.tabLayout === TabLayout.Standard;
+	}
 
-const calculateHeaderItemSemanticIconClasses = item => {
-	const classes = ["ui5-tc-headerItemSemanticIcon"];
+	get previousIconACCName() {
+		return TabContainer.i18nBundle.getText(TABCONTAINER_PREVIOUS_ICON_ACC_NAME);
+	}
 
-	if (item.semanticColor !== SemanticColor.Default) {
-		classes.push(`ui5-tc-headerItemSemanticIcon--${item.semanticColor.toLowerCase()}`);
+	get nextIconACCName() {
+		return TabContainer.i18nBundle.getText(TABCONTAINER_NEXT_ICON_ACC_NAME);
 	}
 
-	return classes.join(" ");
-};
+	get overflowMenuTitle() {
+		return TabContainer.i18nBundle.getText(TABCONTAINER_OVERFLOW_MENU_TITLE);
+	}
 
-const calculateHeaderItemTextClasses = item => {
-	const classes = ["ui5-tc__headerItemText"];
+	get tabsAtTheBottom() {
+		return this.tabsPlacement === TabContainerTabsPlacement.Bottom;
+	}
 
-	return classes.join(" ");
-};
+	get overflowMenuIcon() {
+		return this.tabsAtTheBottom ? "slim-arrow-up" : "slim-arrow-down";
+	}
 
-const calculateHeaderItemAdditionalTextClasses = item => {
-	const classes = ["ui5-tc__headerItemAdditionalText"];
+	get overflowButtonText() {
+		return TabContainer.i18nBundle.getText(TABCONTAINER_END_OVERFLOW);
+	}
 
-	return classes.join(" ");
-};
+	get popoverCancelButtonText() {
+		return TabContainer.i18nBundle.getText(TABCONTAINER_POPOVER_CANCEL_BUTTON);
+	}
 
-const calculateOverflowItemClasses = item => {
-	const classes = ["ui5-tc__overflowItem"];
+	get animate() {
+		return getAnimationMode() !== AnimationMode.None;
+	}
 
-	if (item.semanticColor !== SemanticColor.Default) {
-		classes.push(`ui5-tc__overflowItem--${item.semanticColor.toLowerCase()}`);
+	static get dependencies() {
+		return [
+			Button,
+			Icon,
+			List,
+			ResponsivePopover,
+		];
 	}
 
-	if (item.disabled) {
-		classes.push("ui5-tc__overflowItem--disabled");
+	static async onDefine() {
+		TabContainer.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
+}
 
-	return classes.join(" ");
-};
+const isTabDiv = el => el.localName === "div" && el.getAttribute("role") === "tab";
 
-const calculateOverflowItemContentClasses = item => {
-	const classes = ["ui5-tc__overflowItemContent"];
+const getTab = el => {
+	while (el) {
+		if (isTabDiv(el)) {
+			return el;
+		}
 
-	return classes.join(" ");
-};
+		el = el.parentElement;
+	}
 
-const calculateOverflowItemState = item => {
-	return item.disabled ? "Inactive" : "Active";
+	return false;
 };
 
-const calculateContentItemClasses = item => {
-	const classes = ["ui5-tc__contentItem"];
-
-	return classes.join(" ");
+const walk = (tabs, callback) => {
+	[...tabs].forEach(tab => {
+		callback(tab);
+		if (tab.subTabs) {
+			walk(tab.subTabs, callback);
+		}
+	});
 };
 
 TabContainer.define();