@openui5/sap.ui.webc.main 1.98.0 → 1.99.0

package/src/sap/ui/webc/main/thirdparty/TabContainer.js

@@ -1,24 +1,23 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/delegate/ScrollEnablement', 'sap/ui/webc/common/thirdparty/base/animations/slideDown', 'sap/ui/webc/common/thirdparty/base/animations/slideUp', 'sap/ui/webc/common/thirdparty/base/types/AnimationMode', 'sap/ui/webc/common/thirdparty/base/config/AnimationMode', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/MediaRange', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-up', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-down', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-left', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-right', './generated/i18n/i18n-defaults', './Button', './Icon', './List', './ResponsivePopover', './types/TabContainerTabsPlacement', './generated/templates/TabContainerTemplate.lit', './generated/templates/TabContainerPopoverTemplate.lit', './generated/themes/TabContainer.css', './generated/themes/ResponsivePopoverCommon.css', './types/TabLayout'], function (UI5Element, litRender, ResizeHandler, ScrollEnablement, slideDown, slideUp, AnimationMode$1, AnimationMode, ItemNavigation, Keys, MediaRange, i18nBundle, slimArrowUp, slimArrowDown, slimArrowLeft, slimArrowRight, i18nDefaults, Button, Icon, List, ResponsivePopover, TabContainerTabsPlacement, TabContainerTemplate_lit, TabContainerPopoverTemplate_lit, TabContainer_css, ResponsivePopoverCommon_css, TabLayout) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/thirdparty/base/animations/slideDown', 'sap/ui/webc/common/thirdparty/base/animations/slideUp', 'sap/ui/webc/common/thirdparty/base/types/AnimationMode', 'sap/ui/webc/common/thirdparty/base/config/AnimationMode', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/MediaRange', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-up', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-down', './generated/i18n/i18n-defaults', './Button', './Icon', './List', './ResponsivePopover', './types/TabContainerTabsPlacement', './generated/templates/TabContainerTemplate.lit', './generated/templates/TabContainerPopoverTemplate.lit', './generated/themes/TabContainer.css', './generated/themes/ResponsivePopoverCommon.css', './types/TabLayout', './types/TabsOverflowMode'], function (UI5Element, litRender, ResizeHandler, Render, slideDown, slideUp, AnimationMode$1, AnimationMode, ItemNavigation, Keys, MediaRange, i18nBundle, slimArrowUp, slimArrowDown, i18nDefaults, Button, Icon, List, ResponsivePopover, TabContainerTabsPlacement, TabContainerTemplate_lit, TabContainerPopoverTemplate_lit, TabContainer_css, ResponsivePopoverCommon_css, TabLayout, TabsOverflowMode) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
 	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
 	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
-	var ScrollEnablement__default = /*#__PURE__*/_interopDefaultLegacy(ScrollEnablement);
 	var slideDown__default = /*#__PURE__*/_interopDefaultLegacy(slideDown);
 	var slideUp__default = /*#__PURE__*/_interopDefaultLegacy(slideUp);
 	var AnimationMode__default = /*#__PURE__*/_interopDefaultLegacy(AnimationMode$1);
 	var ItemNavigation__default = /*#__PURE__*/_interopDefaultLegacy(ItemNavigation);
 	var MediaRange__default = /*#__PURE__*/_interopDefaultLegacy(MediaRange);
 
-	const SCROLL_STEP = 128;
 	const tabStyles = [];
 	const staticAreaTabStyles = [];
 	const metadata = {
 		tag: "ui5-tabcontainer",
 		languageAware: true,
 		managedSlots: true,
+		fastNavigation: true,
 		slots:  {
 			"default": {
 				propertyName: "items",
@@ -32,6 +31,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			overflowButton: {
 				type: HTMLElement,
 			},
+			startOverflowButton: {
+				type: HTMLElement,
+			},
 		},
 		properties:  {
 			fixed: {
@@ -51,31 +53,40 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				type: String,
 				defaultValue: TabLayout.Standard,
 			},
+			tabsOverflowMode: {
+				type: TabsOverflowMode,
+				defaultValue: TabsOverflowMode.End,
+			},
 			mediaRange: {
 				type: String,
 			},
 			_selectedTab: {
 				type: Object,
 			},
-			_scrollable: {
+			_animationRunning: {
 				type: Boolean,
 				noAttribute: true,
 			},
-			_scrollableBack: {
+			_contentCollapsed: {
 				type: Boolean,
 				noAttribute: true,
 			},
-			_scrollableForward: {
-				type: Boolean,
+			_startOverflowText: {
+				type: String,
 				noAttribute: true,
 			},
-			_animationRunning: {
-				type: Boolean,
+			_endOverflowText: {
+				type: String,
 				noAttribute: true,
+				defaultValue: "More",
 			},
-			_contentCollapsed: {
-				type: Boolean,
-				noAttribute: true,
+			_startOverflowItems: {
+				type: Object,
+				multiple: true,
+			},
+			_endOverflowItems: {
+				type: Object,
+				multiple: true,
 			},
 		},
 		events:  {
@@ -115,13 +126,21 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		constructor() {
 			super();
 			this._handleResize = this._handleResize.bind(this);
-			this._scrollEnablement = new ScrollEnablement__default(this);
-			this._scrollEnablement.attachEvent("scroll", this._updateScrolling.bind(this));
 			this._itemNavigation = new ItemNavigation__default(this, {
-				getItemsCallback: () => this._getTabs(),
+				getItemsCallback: () => this._getFocusableTabs(),
 			});
 		}
 		onBeforeRendering() {
+			const tabs = this._getTabs();
+			if (tabs.length) {
+				const selectedTabs = tabs.filter(tab => tab.selected);
+				if (selectedTabs.length) {
+					this._selectedTab = selectedTabs[0];
+				} else {
+					this._selectedTab = tabs[0];
+					this._selectedTab._selected = true;
+				}
+			}
 			this.items.filter(item => !item.isSeparator).forEach((item, index, arr) => {
 				item._isInline = this.tabLayout === TabLayout.Inline;
 				item._mixedMode = this.mixedMode;
@@ -136,10 +155,11 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			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.`);
+			}
 		}
 		onAfterRendering() {
-			this._scrollEnablement.scrollContainer = this._getHeaderScrollContainer();
-			this._updateScrolling();
 			this.items.forEach(item => {
 				item._getTabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`);
 			});
@@ -150,30 +170,14 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		onExitDOM() {
 			ResizeHandler__default.deregister(this._getHeader(), this._handleResize);
 		}
-		_onTablistFocusin(event) {
-			const target = event.target;
-			if (!this._scrollable || !target.classList.contains("ui5-tab-strip-item")) {
-				return;
-			}
-			const headerScrollContainer = this._getHeaderScrollContainer();
-			const leftArrowWidth = this.shadowRoot.querySelector(".ui5-tc__headerArrowLeft").offsetWidth;
-			const rightArrowWidth = this.shadowRoot.querySelector(".ui5-tc__headerArrowRight").offsetWidth;
-			if (this._scrollableBack && (target.offsetLeft - leftArrowWidth < headerScrollContainer.scrollLeft)) {
-				this._scrollEnablement.move(target.offsetLeft - leftArrowWidth - headerScrollContainer.scrollLeft, 0, true);
-				this._updateScrolling();
-			} else if (this._scrollableForward && (target.offsetLeft + target.offsetWidth > headerScrollContainer.scrollLeft + headerScrollContainer.offsetWidth - rightArrowWidth)) {
-				this._scrollEnablement.move(target.offsetLeft + target.offsetWidth - headerScrollContainer.scrollLeft - headerScrollContainer.offsetWidth + rightArrowWidth, 0, true);
-				this._updateScrolling();
-			}
-		}
-		_onHeaderClick(event) {
+		_onTabStripClick(event) {
 			const tab = getTab(event.target);
 			if (!tab) {
 				return;
 			}
 			this._onHeaderItemSelect(tab);
 		}
-		_onHeaderKeyDown(event) {
+		_onTabStripKeyDown(event) {
 			const tab = getTab(event.target);
 			if (!tab) {
 				return;
@@ -185,7 +189,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				event.preventDefault();
 			}
 		}
-		_onHeaderKeyUp(event) {
+		_onTabStripKeyUp(event) {
 			const tab = getTab(event.target);
 			if (!tab) {
 				return;
@@ -197,26 +201,31 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		_onHeaderItemSelect(tab) {
 			if (!tab.hasAttribute("disabled")) {
 				this._onItemSelect(tab);
+				if (!this.isModeStartAndEnd) {
+					this._setItemsForStrip();
+				}
 			}
 		}
-		_onOverflowListItemSelect(event) {
-			this._onItemSelect(event.detail.item);
+		_onOverflowListItemClick(event) {
+			event.preventDefault();
+			const { item } = event.detail;
+			this._onItemSelect(item);
 			this.responsivePopover.close();
-			this.shadowRoot.querySelector(`#${event.detail.item.id}`).focus();
+			this._setItemsForStrip();
+			this.shadowRoot.querySelector(`#${item.id}`).focus();
 		}
 		_onItemSelect(target) {
 			const selectedIndex = findIndex(this.items, item => item._id === target.id);
 			const selectedTabIndex = findIndex(this._getTabs(), item => item._id === target.id);
 			const selectedTab = this.items[selectedIndex];
-			this.items.forEach((item, index) => {
-				if (!item.isSeparator) {
+			this.items
+				.forEach((item, index) => {
 					const selected = selectedIndex === index;
 					item.selected = selected;
-					if (selected) {
-						this._itemNavigation.setCurrentItem(item);
+					if (item._selected) {
+						item._selected = false;
 					}
-				}
-			}, this);
+				});
 			if (this.fixed) {
 				this.selectTab(selectedTab, selectedTabIndex);
 				return;
@@ -264,42 +273,272 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		slideContentUp(element) {
 			return slideUp__default({ element }).promise();
 		}
-		async _onOverflowButtonClick(event) {
-			const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > [ui5-button]");
-			if (event.target !== button) {
+		async _onOverflowClick(event) {
+			if (event.target.classList.contains("ui5-tc__overflow")) {
 				return;
 			}
+			const overflow = event.currentTarget;
+			const isEndOverflow = overflow.classList.contains("ui5-tc__overflow--end");
+			const isStartOverflow = overflow.classList.contains("ui5-tc__overflow--start");
+			const items = [];
+			const overflowAttr = isEndOverflow ? "end-overflow" : "start-overflow";
+			this._startOverflowItems = [];
+			this._endOverflowItems = [];
+			this.items.forEach(item => {
+				if (item.getTabInStripDomRef() && item.getTabInStripDomRef().hasAttribute(overflowAttr)) {
+					items.push(item);
+				}
+			});
+			let button;
+			if (isEndOverflow) {
+				button = this.overflowButton[0] || overflow.querySelector("[ui5-button]");
+				this._endOverflowItems = items;
+			}
+			if (isStartOverflow) {
+				button = this.startOverflowButton[0] || overflow.querySelector("[ui5-button]");
+				this._startOverflowItems = items;
+			}
 			this.responsivePopover = await this._respPopover();
 			if (this.responsivePopover.opened) {
 				this.responsivePopover.close();
 			} else {
+				this.responsivePopover.initialFocus = this.responsivePopover.content[0].items.filter(item => item.classList.contains("ui5-tab-overflow-item"))[0].id;
 				this.responsivePopover.showAt(button);
 			}
 		}
-		_onHeaderBackArrowClick() {
-			this._scrollEnablement.move(-SCROLL_STEP, 0).promise()
-				.then(_ => this._updateScrolling());
-		}
-		_onHeaderForwardArrowClick() {
-			this._scrollEnablement.move(SCROLL_STEP, 0).promise()
-				.then(_ => this._updateScrolling());
+		async _onOverflowKeyDown(event) {
+			const isEndOverflow = event.currentTarget.classList.contains("ui5-tc__overflow--end");
+			const isStartOverflow = event.currentTarget.classList.contains("ui5-tc__overflow--start");
+			switch (true) {
+			case Keys.isDown(event):
+			case isStartOverflow && Keys.isLeft(event):
+			case isEndOverflow && Keys.isRight(event):
+				await this._onOverflowClick(event);
+			}
 		}
-		_handleResize() {
-			this._updateScrolling();
+		async _handleResize() {
+			if (this.responsivePopover && this.responsivePopover.opened) {
+				this.responsivePopover.close();
+			}
 			this._updateMediaRange();
+			await Render.renderFinished();
+			this._setItemsForStrip();
+		}
+		_setItemsForStrip() {
+			const tabStrip = this._getTabStrip();
+			let allItemsWidth = 0;
+			if (!this._selectedTab) {
+				return;
+			}
+			const itemsDomRefs = this.items.map(item => item.getTabInStripDomRef());
+			this._getStartOverflow().setAttribute("hidden", "");
+			this._getEndOverflow().setAttribute("hidden", "");
+			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) {
+				this._closeRespPopover();
+				return;
+			}
+			if (this.isModeStartAndEnd) {
+				this._updateStartAndEndOverflow(itemsDomRefs);
+				this._updateOverflowCounters();
+			} else {
+				this._updateEndOverflow(itemsDomRefs);
+			}
+			this._itemNavigation._init();
+			this._itemNavigation.setCurrentItem(this._selectedTab);
+		}
+		_updateEndOverflow(itemsDomRefs) {
+			this._getEndOverflow().removeAttribute("hidden");
+			const selectedTabDomRef = this._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;
+		}
+		_updateStartAndEndOverflow(itemsDomRefs) {
+			let containerWidth = this._getTabStrip().offsetWidth;
+			const selectedTabDomRef = this._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;
+			if (!hasStartOverflow) {
+				this._getEndOverflow().removeAttribute("hidden");
+				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;
+			}
+			if (!hasEndOverflow) {
+				this._getStartOverflow().removeAttribute("hidden");
+				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;
+			}
+			this._getStartOverflow().removeAttribute("hidden");
+			this._getEndOverflow().removeAttribute("hidden");
+			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", "");
+			}
+		}
+		_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 (!hasStartOverflow) {
+				this._getEndOverflow().removeAttribute("hidden");
+				containerWidth = this._getTabStrip().offsetWidth;
+				hasStartOverflow = containerWidth < leftItemsWidth + selectedItemIndexAndWidth.width;
+				this._getEndOverflow().setAttribute("hidden", "");
+			}
+			return hasStartOverflow;
+		}
+		_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 (!hasEndOverflow) {
+				this._getStartOverflow().removeAttribute("hidden");
+				containerWidth = this._getTabStrip().offsetWidth;
+				hasEndOverflow = containerWidth < rightItemsWidth + selectedItemIndexAndWidth.width;
+				this._getStartOverflow().setAttribute("hidden", "");
+			}
+			return hasEndOverflow;
+		}
+		_getItemWidth(itemDomRef) {
+			const styles = window.getComputedStyle(itemDomRef);
+			const margins = Number.parseInt(styles.marginLeft) + Number.parseInt(styles.marginRight);
+			return itemDomRef.offsetWidth + margins;
+		}
+		_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 (selectedSeparator) {
+				itemsDomRefs.splice(index - 1, 1);
+				index--;
+			}
+			return {
+				index,
+				width,
+			};
+		}
+		_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;
+			}
+			return lastVisible;
+		}
+		_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;
+			}
+			const prevItem = itemsDomRefs[index - 1];
+			if (prevItem && prevItem.isSeparator) {
+				lastVisibleIndex -= 1;
+			}
+			return lastVisibleIndex;
+		}
+		get isModeStartAndEnd() {
+			return this.tabsOverflowMode === TabsOverflowMode.StartAndEnd;
+		}
+		_updateOverflowCounters() {
+			let startOverflowItemsCount = 0;
+			let endOverflowItemsCount = 0;
+			this._getTabs()
+				.map(tab => tab.getTabInStripDomRef())
+				.forEach(tab => {
+					if (tab.hasAttribute("start-overflow")) {
+						startOverflowItemsCount++;
+					}
+					if (tab.hasAttribute("end-overflow")) {
+						endOverflowItemsCount++;
+					}
+				});
+			this._startOverflowText = `+${startOverflowItemsCount}`;
+			this._endOverflowText = `+${endOverflowItemsCount}`;
 		}
 		async _closeRespPopover() {
 			this.responsivePopover = await this._respPopover();
 			this.responsivePopover.close();
 		}
-		_updateScrolling() {
-			const headerScrollContainer = this._getHeaderScrollContainer();
-			this._scrollable = headerScrollContainer.offsetWidth < headerScrollContainer.scrollWidth;
-			this._scrollableBack = headerScrollContainer.scrollLeft > 0;
-			this._scrollableForward = Math.ceil(headerScrollContainer.scrollLeft) < headerScrollContainer.scrollWidth - headerScrollContainer.offsetWidth;
-			if (!this._scrollable) {
-				this._closeRespPopover();
+		_getFocusableTabs() {
+			if (!this.getDomRef()) {
+				return [];
 			}
+			const focusableTabs = [];
+			if (!this._getStartOverflow().hasAttribute("hidden")) {
+				focusableTabs.push(this._getStartOverflow().querySelector("[ui5-button]"));
+			}
+			this._getTabs().forEach(tab => {
+				if (tab.getTabInStripDomRef() && !tab.getTabInStripDomRef().hasAttribute("hidden")) {
+					focusableTabs.push(tab);
+				}
+			});
+			if (!this._getEndOverflow().hasAttribute("hidden")) {
+				focusableTabs.push(this._getEndOverflow().querySelector("[ui5-button]"));
+			}
+			return focusableTabs;
 		}
 		_updateMediaRange() {
 			this.mediaRange = MediaRange__default.getCurrentRange(MediaRange__default.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
@@ -310,50 +549,36 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		_getTabs() {
 			return this.items.filter(item => !item.isSeparator);
 		}
-		_getHeaderScrollContainer() {
-			return this.shadowRoot.querySelector(`#${this._id}-headerScrollContainer`);
+		_getTabStrip() {
+			return this.shadowRoot.querySelector(`#${this._id}-tabStrip`);
+		}
+		_getStartOverflow() {
+			return this.shadowRoot.querySelector(".ui5-tc__overflow--start");
+		}
+		_getEndOverflow() {
+			return this.shadowRoot.querySelector(".ui5-tc__overflow--end");
 		}
 		async _respPopover() {
 			const staticAreaItem = await this.getStaticAreaItemDomRef();
 			return staticAreaItem.querySelector(`#${this._id}-overflowMenu`);
 		}
-		get shouldShowOverflow() {
-			return this.showOverflow && this._scrollable;
-		}
 		get classes() {
 			return {
 				root: {
 					"ui5-tc-root": true,
 					"ui5-tc--textOnly": this.textOnly,
-					"ui5-tc--withAdditonalText": this.withAdditonalText,
+					"ui5-tc--withAdditionalText": this.withAdditionalText,
 					"ui5-tc--standardTabLayout": this.standardTabLayout,
 				},
 				header: {
 					"ui5-tc__header": true,
-					"ui5-tc__header--scrollable": this._scrollable,
 				},
-				headerInnerContainer: {
-					"ui5-tc__headerInnerContainer": true,
-				},
-				headerScrollContainer: {
-					"ui-tc__headerScrollContainer": true,
-				},
-				headerList: {
-					"ui5-tc__headerList": true,
+				tabStrip: {
+					"ui5-tc__tabStrip": 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,
-				},
 				content: {
 					"ui5-tc__content": true,
 					"ui5-tc__content--collapsed": this._contentCollapsed,
@@ -366,7 +591,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		get textOnly() {
 			return this.items.every(item => !item.icon);
 		}
-		get withAdditonalText() {
+		get withAdditionalText() {
 			return this.items.some(item => !!item.additionalText);
 		}
 		get standardTabLayout() {
@@ -387,6 +612,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		get overflowMenuIcon() {
 			return this.tabsAtTheBottom ? "slim-arrow-up" : "slim-arrow-down";
 		}
+		get overflowButtonText() {
+			return TabContainer.i18nBundle.getText(i18nDefaults.TABCONTAINER_END_OVERFLOW);
+		}
 		get animate() {
 			return AnimationMode.getAnimationMode() !== AnimationMode__default.None;
 		}
@@ -402,10 +630,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			TabContainer.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 	}
-	const isTabLi = el => el.localName === "li" && el.getAttribute("role") === "tab";
+	const isTabDiv = el => el.localName === "div" && el.getAttribute("role") === "tab";
 	const getTab = el => {
 		while (el) {
-			if (isTabLi(el)) {
+			if (isTabDiv(el)) {
 				return el;
 			}
 			el = el.parentElement;

package/src/sap/ui/webc/main/thirdparty/TabSeparator.js

@@ -1,9 +1,10 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', './generated/templates/TabSeparatorTemplate.lit'], function (UI5Element, litRender, TabSeparatorTemplate_lit) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/renderer/executeTemplate', './TabContainer', './generated/templates/TabSeparatorInStripTemplate.lit', './generated/templates/TabSeparatorInOverflowTemplate.lit', './generated/themes/TabSeparatorInStrip.css', './generated/themes/TabSeparatorInOverflow.css'], function (UI5Element, litRender, executeTemplate, TabContainer, TabSeparatorInStripTemplate_lit, TabSeparatorInOverflowTemplate_lit, TabSeparatorInStrip_css, TabSeparatorInOverflow_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
 	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+	var executeTemplate__default = /*#__PURE__*/_interopDefaultLegacy(executeTemplate);
 
 	const metadata = {
 		tag: "ui5-tab-separator",
@@ -15,14 +16,36 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		static get render() {
 			return litRender__default;
 		}
-		static get template() {
-			return TabSeparatorTemplate_lit;
+		static get stripTemplate() {
+			return TabSeparatorInStripTemplate_lit;
+		}
+		static get overflowTemplate() {
+			return TabSeparatorInOverflowTemplate_lit;
+		}
+		get classes() {
+			return {
+				"ui5-tc__separator": true,
+			};
 		}
 		get isSeparator() {
 			return true;
 		}
+		getTabInStripDomRef() {
+			return this._getTabInStripDomRef;
+		}
+		get stableDomRef() {
+			return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+		}
+		get stripPresentation() {
+			return executeTemplate__default(this.constructor.stripTemplate, this);
+		}
+		get overflowPresentation() {
+			return executeTemplate__default(this.constructor.overflowTemplate, this);
+		}
 	}
 	TabSeparator.define();
+	TabContainer.registerTabStyles(TabSeparatorInStrip_css);
+	TabContainer.registerStaticAreaTabStyles(TabSeparatorInOverflow_css);
 
 	return TabSeparator;