@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/TabContainer.js

@@ -7,50 +7,41 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var TabContainer_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.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 Integer from "@ui5/webcomponents-base/dist/types/Integer.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, isDown, isRight, isLeft, isUp, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop, } from "@ui5/webcomponents-base/dist/Device.js";
+import { isSpace, isEnter, isDown, isRight, isLeft, isUp, isCtrl, } 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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
-import findClosestPosition from "@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js";
+import { findClosestPosition, findClosestPositionsByKey, isMovingKey } from "@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js";
 import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
 import DragRegistry from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js";
+import handleDragOver from "@ui5/webcomponents-base/dist/util/dragAndDrop/handleDragOver.js";
+import handleDrop from "@ui5/webcomponents-base/dist/util/dragAndDrop/handleDrop.js";
 import longDragOverHandler from "@ui5/webcomponents-base/dist/util/dragAndDrop/longDragOverHandler.js";
 import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 import { TABCONTAINER_PREVIOUS_ICON_ACC_NAME, TABCONTAINER_NEXT_ICON_ACC_NAME, TABCONTAINER_OVERFLOW_MENU_TITLE, TABCONTAINER_END_OVERFLOW, TABCONTAINER_POPOVER_CANCEL_BUTTON, TABCONTAINER_SUBTABS_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
-import Button from "./Button.js";
-import Icon from "./Icon.js";
-import List from "./List.js";
-import DropIndicator from "./DropIndicator.js";
-import CustomListItem from "./CustomListItem.js";
-import ResponsivePopover from "./ResponsivePopover.js";
 import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js";
 import SemanticColor from "./types/SemanticColor.js";
-import TabContainerBackgroundDesign from "./types/TabContainerBackgroundDesign.js";
 import TabLayout from "./types/TabLayout.js";
-import TabsOverflowMode from "./types/TabsOverflowMode.js";
+import OverflowMode from "./types/OverflowMode.js";
 // Templates
-import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js";
-import TabContainerPopoverTemplate from "./generated/templates/TabContainerPopoverTemplate.lit.js";
+import TabContainerTemplate from "./TabContainerTemplate.js";
 // Styles
 import tabContainerCss from "./generated/themes/TabContainer.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 const tabStyles = [];
-const staticAreaTabStyles = [];
 const PAGE_UP_DOWN_SIZE = 5;
 /**
  * @class
@@ -97,11 +88,77 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     static registerTabStyles(styles) {
         tabStyles.push(styles);
     }
-    static registerStaticAreaTabStyles(styles) {
-        staticAreaTabStyles.push(styles);
-    }
     constructor() {
         super();
+        /**
+         * Defines whether the tab content is collapsed.
+         * @default false
+         * @public
+         */
+        this.collapsed = false;
+        /**
+         * Defines the alignment of the content and the `additionalText` of a tab.
+         *
+         * **Note:**
+         * The content and the `additionalText` would be displayed vertically by default,
+         * but when set to `Inline`, they would be displayed horizontally.
+         * @default "Standard"
+         * @public
+         */
+        this.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".
+         *
+         * **Note:**
+         * Only one overflow at the end would be displayed by default,
+         * but when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.
+         * @default "End"
+         * @since 1.1.0
+         * @public
+         */
+        this.overflowMode = "End";
+        /**
+         * Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`.
+         * @default "Solid"
+         * @since 1.10.0
+         * @public
+         */
+        this.headerBackgroundDesign = "Solid";
+        /**
+         * Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.
+         * @default "Solid"
+         * @since 1.10.0
+         * @public
+         */
+        this.contentBackgroundDesign = "Solid";
+        /**
+         * Defines the placement of the tab strip relative to the actual tabs' content.
+         *
+         * **Note:** By default the tab strip is displayed above the tabs' content area and this is the recommended
+         * layout for most scenarios. Set to `Bottom` only when the component is at the
+         * bottom of the page and you want the tab strip to act as a menu.
+         * @default "Top"
+         * @since 1.0.0-rc.7
+         * @private
+         */
+        this.tabsPlacement = "Top";
+        /**
+         * Defines if automatic tab selection is deactivated.
+         *
+         * **Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.
+         * Setting this property to `true` allows preventing this behavior.
+         * @default false
+         * @public
+         * @since 2.9.0
+         */
+        this.noAutoSelection = false;
+        this._animationRunning = false;
+        this._contentCollapsed = false;
+        this._startOverflowText = "0";
+        this._endOverflowText = "More";
+        this._popoverItemsFlat = [];
+        this._itemsFlat = [];
         this._hasScheduledPopoverOpen = false;
         this._handleResizeBound = this._handleResize.bind(this);
         // Init ItemNavigation
@@ -116,22 +173,25 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             return;
         }
         // update selected tab
-        const selectedTabs = this._itemsFlat.filter(tab => tab.selected);
-        if (selectedTabs.length) {
-            this._selectedTab.forcedSelected = false;
-            this._selectedTab = selectedTabs[0];
+        const selectedTab = this._itemsFlat.find((tab) => !tab.isSeparator && tab.selected);
+        if (selectedTab) {
+            this._selectedTab = selectedTab;
         }
-        else {
+        else if (!this.noAutoSelection) {
             this._selectedTab = this._itemsFlat[0];
-            this._selectedTab.forcedSelected = true;
         }
-        this._setItemsPrivateProperties(this.items);
+        else {
+            this._selectedTab = undefined;
+        }
+        walk(this.items, item => {
+            if (!item.isSeparator) {
+                item._selectedTabReference = this._selectedTab;
+            }
+        });
+        this._sendStripPresentationInfos(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) {
@@ -140,10 +200,12 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         this._setItemsForStrip();
         if (!this.shadowRoot.contains(document.activeElement)) {
             const focusStart = this._getRootTab(this._selectedTab);
-            this._itemNavigation.setCurrentItem(focusStart);
+            if (focusStart) {
+                this._itemNavigation.setCurrentItem(focusStart);
+            }
         }
-        if (this.responsivePopover?.opened) {
-            const popoverItems = this._getPopoverItemsFor(this._getPopoverOwner(this.responsivePopover._opener));
+        if (this.responsivePopover?.open) {
+            const popoverItems = this._getPopoverItemsFor(this._getPopoverOwner(this.responsivePopover.opener));
             if (popoverItems.length) {
                 this._setPopoverItems(popoverItems);
             }
@@ -156,19 +218,18 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         ResizeHandler.register(this._getHeader(), this._handleResizeBound);
         DragRegistry.subscribe(this);
         this._setDraggedElement = DragRegistry.addSelfManagedArea(this);
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
     }
     onExitDOM() {
         ResizeHandler.deregister(this._getHeader(), this._handleResizeBound);
         DragRegistry.unsubscribe(this);
         DragRegistry.removeSelfManagedArea(this);
         this._setDraggedElement = undefined;
-        if (this.staticAreaItem && this._setDraggedElementInStaticArea) {
-            DragRegistry.removeSelfManagedArea(this.staticAreaItem);
-            this._setDraggedElementInStaticArea = undefined;
-        }
     }
     _handleResize() {
-        if (this.responsivePopover && this.responsivePopover.opened) {
+        if (this.responsivePopover && this.responsivePopover.open) {
             this._closePopover();
         }
         // invalidate
@@ -178,33 +239,34 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     _updateMediaRange(width) {
         this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, width);
     }
-    _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(`[id="${item._id}"]`);
-            return !item.isSeparator;
-        });
-        allTabs.forEach((tab, index, arr) => {
-            tab.isInline = this.tabLayout === TabLayout.Inline;
-            tab.forcedMixedMode = this.mixedMode;
-            tab.forcedPosinset = index + 1;
-            tab.forcedSetsize = arr.length;
-            tab.isTopLevelTab = items.some(i => i === tab);
-        });
-        walk(items, item => {
+    _sendStripPresentationInfos(items) {
+        const setsize = this._getTabs().length;
+        let posinset = 1;
+        items.forEach(item => {
+            let info = {
+                getElementInStrip: () => this.getDomRef().querySelector(`[id="${item._id}"]`),
+            };
             if (!item.isSeparator) {
-                item._selectedTabReference = this._selectedTab;
+                info = {
+                    ...info,
+                    isInline: this.tabLayout === TabLayout.Inline,
+                    mixedMode: this.mixedMode,
+                    posinset,
+                    setsize,
+                    isTopLevelTab: items.some(i => i === item),
+                };
+                posinset++;
             }
+            item.receiveStripInfo(info);
         });
-        this._setIndentLevels(items);
     }
     _onHeaderFocusin(e) {
-        const tab = getTab(e.target);
+        const tab = getTabInStrip(e.target);
         if (tab) {
             this._itemNavigation.setCurrentItem(tab.realTabReference);
         }
     }
-    _onHeaderDragStart(e) {
+    _onDragStart(e) {
         if (!e.dataTransfer || !(e.target instanceof HTMLElement)) {
             return;
         }
@@ -230,32 +292,16 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         }
         else if (closestPosition) {
             const dropTarget = closestPosition.element.realTabReference;
-            let placements = closestPosition.placements;
             if (dropTarget === draggedElement) {
-                placements = placements.filter(placement => placement !== MovePlacement.On);
+                closestPosition.placements = closestPosition.placements.filter(placement => placement !== MovePlacement.On);
             }
-            const acceptedPlacement = placements.find(placement => {
-                const dragOverPrevented = !this.fireEvent("move-over", {
-                    source: {
-                        element: draggedElement,
-                    },
-                    destination: {
-                        element: dropTarget,
-                        placement,
-                    },
-                }, true);
-                if (dragOverPrevented) {
-                    e.preventDefault();
-                    this.dropIndicatorDOM.targetReference = closestPosition.element;
-                    this.dropIndicatorDOM.placement = placement;
-                    return true;
-                }
-                return false;
-            });
-            if (acceptedPlacement === MovePlacement.On && closestPosition.element.realTabReference.subTabs.length) {
+            const { targetReference, placement } = handleDragOver(e, this, closestPosition, dropTarget);
+            this.dropIndicatorDOM.targetReference = targetReference;
+            this.dropIndicatorDOM.placement = placement;
+            if (placement === MovePlacement.On && closestPosition.element.realTabReference.items.length) {
                 popoverTarget = closestPosition.element;
             }
-            else if (!acceptedPlacement) {
+            else if (!placement) {
                 this.dropIndicatorDOM.targetReference = null;
             }
         }
@@ -267,19 +313,56 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         }
     }
     _onHeaderDrop(e) {
-        e.preventDefault();
-        const draggedElement = DragRegistry.getDraggedElement();
-        this.fireEvent("move", {
-            source: {
-                element: draggedElement,
-            },
-            destination: {
-                element: this.dropIndicatorDOM.targetReference.realTabReference,
-                placement: this.dropIndicatorDOM.placement,
-            },
-        });
+        if (e.target === this._getStartOverflowBtnDOM() || e.target === this._getEndOverflowBtnDOM()) {
+            return;
+        }
+        handleDrop(e, this, this.dropIndicatorDOM.targetReference.realTabReference, this.dropIndicatorDOM.placement);
         this.dropIndicatorDOM.targetReference = null;
-        draggedElement.focus();
+    }
+    _moveHeaderItem(tab, e) {
+        if (!tab.movable) {
+            return;
+        }
+        const headerItems = this.items.map(item => item.getDomRefInStrip())
+            .filter((item) => !item?.hasAttribute("hidden"));
+        let positions = findClosestPositionsByKey(headerItems, tab.getDomRefInStrip(), e);
+        positions = positions.map(({ element, placement }) => {
+            while (element && element.realTabReference.hasAttribute("ui5-tab-separator") && placement === MovePlacement.Before) {
+                element = headerItems.at(headerItems.indexOf(element) - 1);
+                placement = MovePlacement.After;
+            }
+            while (element && element.realTabReference.hasAttribute("ui5-tab-separator") && placement === MovePlacement.After) {
+                element = headerItems.at(headerItems.indexOf(element) + 1);
+                placement = MovePlacement.Before;
+            }
+            return {
+                element,
+                placement,
+            };
+        });
+        const acceptedPosition = positions.find(({ element, placement }) => {
+            return !this.fireDecoratorEvent("move-over", {
+                source: {
+                    element: tab,
+                },
+                destination: {
+                    element: element.realTabReference,
+                    placement,
+                },
+            });
+        });
+        if (acceptedPosition) {
+            this.fireDecoratorEvent("move", {
+                source: {
+                    element: tab,
+                },
+                destination: {
+                    element: acceptedPosition.element.realTabReference,
+                    placement: acceptedPosition.placement,
+                },
+            });
+            tab.focus();
+        }
     }
     _onHeaderDragLeave(e) {
         if (e.relatedTarget instanceof Node && this.shadowRoot.contains(e.relatedTarget)) {
@@ -288,21 +371,40 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         this.dropIndicatorDOM.targetReference = null;
     }
     _onPopoverListMoveOver(e) {
-        const { destination } = e.detail;
+        const { destination, source } = e.detail;
         const draggedElement = DragRegistry.getDraggedElement();
-        const dropTarget = destination.element.realTabReference;
-        if (destination.placement === MovePlacement.On && (dropTarget.isSeparator || draggedElement === dropTarget)) {
+        let destinationElement = destination.element.realTabReference;
+        // workaround to simulate tree behavior
+        if (e.detail.originalEvent instanceof KeyboardEvent) {
+            const realTabReference = source.element.realTabReference;
+            const siblings = this._findSiblings(realTabReference);
+            let items = siblings;
+            if (this.items.includes(realTabReference)) {
+                items = siblings.filter(sibling => {
+                    return e.target.items.some(el => el.realTabReference === sibling);
+                });
+            }
+            const nextPosition = findClosestPositionsByKey(items, realTabReference, e.detail.originalEvent);
+            destinationElement = nextPosition[0]?.element;
+        }
+        if (!destinationElement) {
+            return;
+        }
+        if (destination.placement === MovePlacement.On && (destinationElement.hasAttribute("ui5-tab-separator") || draggedElement === destinationElement)) {
+            return;
+        }
+        if (draggedElement !== destinationElement && draggedElement.contains(destinationElement)) {
             return;
         }
-        const placementAccepted = !this.fireEvent("move-over", {
+        const placementAccepted = !this.fireDecoratorEvent("move-over", {
             source: {
                 element: draggedElement,
             },
             destination: {
-                element: dropTarget,
+                element: destinationElement,
                 placement: destination.placement,
             },
-        }, true);
+        });
         if (placementAccepted) {
             e.preventDefault();
         }
@@ -311,23 +413,45 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         }
     }
     _onPopoverListMove(e) {
-        const { destination } = e.detail;
+        const { destination, source } = e.detail;
         const draggedElement = DragRegistry.getDraggedElement();
+        let destinationElement = destination.element.realTabReference;
+        // Workaround to simulate tree behavior
+        if (e.detail.originalEvent instanceof KeyboardEvent) {
+            const realTabReference = source.element.realTabReference;
+            const siblings = this._findSiblings(realTabReference);
+            let items = siblings;
+            if (this.items.includes(realTabReference)) {
+                items = siblings.filter(sibling => {
+                    return e.target.items.some(el => el.realTabReference === sibling);
+                });
+            }
+            const nextPosition = findClosestPositionsByKey(items, realTabReference, e.detail.originalEvent);
+            destinationElement = nextPosition[0]?.element;
+        }
+        if (!destinationElement) {
+            return;
+        }
         e.preventDefault();
-        this.fireEvent("move", {
+        this.fireDecoratorEvent("move", {
             source: {
                 element: draggedElement,
             },
             destination: {
-                element: destination.element.realTabReference,
+                element: destinationElement,
                 placement: destination.placement,
             },
-        }, true);
+        });
         this.dropIndicatorDOM.targetReference = null;
         draggedElement.focus();
     }
+    _onPopoverListKeyDown(e) {
+        if (isCtrl(e)) {
+            this._setDraggedElement(e.target.realTabReference);
+        }
+    }
     async _onTabStripClick(e) {
-        const tab = getTab(e.target);
+        const tab = getTabInStrip(e.target);
         if (!tab || tab.realTabReference.disabled) {
             return;
         }
@@ -351,15 +475,14 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             tabInstance = e.target;
         }
         else {
-            tabInstance = e.target.tab;
+            tabInstance = getTabInStrip(e.target);
         }
-        let opener = e.target;
         if (tabInstance) {
             tabInstance.focus();
         }
+        let opener = e.target;
         if (e.type === "keydown" && !e.target.realTabReference.isSingleClickArea) {
             opener = e.target.querySelector(".ui5-tab-expand-button [ui5-button]");
-            tabInstance = e.target.realTabReference;
         }
         // if clicked between the expand button and the tab
         if (!tabInstance) {
@@ -381,9 +504,23 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     _getFirstFocusableItemInOverflow() {
         return this.responsivePopover.content[0].items.find(item => item.classList.contains("ui5-tab-overflow-item"));
     }
+    _findTabInOverflow(realTab) {
+        if (!this.responsivePopover.open) {
+            return undefined;
+        }
+        return this.responsivePopover.content[0].items.find(item => item.realTabReference === realTab);
+    }
     _onTabStripKeyDown(e) {
-        const tab = getTab(e.target);
-        if (!tab || tab.realTabReference.disabled) {
+        const tab = getTabInStrip(e.target);
+        if (!tab) {
+            return;
+        }
+        if (isCtrl(e) && tab.realTabReference.movable && isMovingKey(e.key)) {
+            this._moveHeaderItem(tab.realTabReference, e);
+            e.preventDefault();
+            return;
+        }
+        if (tab.realTabReference.disabled) {
             return;
         }
         if (isEnter(e)) {
@@ -407,7 +544,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         }
     }
     _onTabStripKeyUp(e) {
-        const tab = getTab(e.target);
+        const tab = getTabInStrip(e.target);
         if (!tab || tab.realTabReference.disabled) {
             return;
         }
@@ -432,7 +569,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         this._closePopover();
         await renderFinished();
         const selectedTopLevel = this._getRootTab(this._selectedTab);
-        selectedTopLevel.getTabInStripDomRef().focus();
+        selectedTopLevel?.getDomRefInStrip().focus();
     }
     /**
      * Returns all slotted tabs and their subTabs in a flattened array.
@@ -444,16 +581,6 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     get allItems() {
         return this._flatten(this.items);
     }
-    _setIndentLevels(items, level = 1) {
-        items.forEach(item => {
-            if (item.hasAttribute("ui5-tab") || item.hasAttribute("ui5-tab-separator")) {
-                item.forcedLevel = level;
-                if (item.subTabs) {
-                    this._setIndentLevels(item.subTabs, level + 1);
-                }
-            }
-        });
-    }
     _flatten(items) {
         const result = [];
         walk(items, item => {
@@ -464,7 +591,6 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         return result;
     }
     _onItemSelect(selectedTabId) {
-        const previousTab = this._selectedTab;
         const selectedTabIndex = this._itemsFlat.findIndex(item => item.__id === selectedTabId);
         const selectedTab = this._itemsFlat[selectedTabIndex];
         const selectionSuccessful = this.selectTab(selectedTab, selectedTabIndex);
@@ -472,48 +598,11 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             return;
         }
         // update selected property on all items
-        this._itemsFlat.forEach((item, index) => {
-            const selected = selectedTabIndex === index;
-            item.selected = selected;
-            if (item.forcedSelected) {
-                item.forcedSelected = false;
+        this._itemsFlat.forEach(item => {
+            if (!item.isSeparator) {
+                item.selected = item === selectedTab;
             }
         });
-        if (this.fixed) {
-            return;
-        }
-        if (!this.shouldAnimate) {
-            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;
-        }
     }
     /**
      * Fires the `tab-select` event and changes the internal reference for the currently selected tab.
@@ -524,7 +613,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
      * @returns 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)) {
+        if (!this.fireDecoratorEvent("tab-select", { tab: selectedTab, tabIndex: selectedTabIndex })) {
             return false;
         }
         // select the tab
@@ -553,19 +642,20 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         }
         await this._togglePopover(opener, true);
     }
-    _addStyleIndent(itemsFlat) {
-        const extraIndent = itemsFlat
-            .filter(tab => !tab.isSeparator)
+    _sendOverflowPresentationInfos(items) {
+        const semanticIcons = items
+            .filter((item) => !item.isSeparator)
             .some(tab => tab.design !== SemanticColor.Default && tab.design !== SemanticColor.Neutral);
-        itemsFlat.forEach(item => {
-            let level = item.forcedLevel - 1;
-            if (item.isSeparator) {
-                level += 1;
-            }
-            item.forcedStyle = {
-                [getScopedVarName("--_ui5-tab-indentation-level")]: level,
-                [getScopedVarName("--_ui5-tab-extra-indent")]: extraIndent ? 1 : null,
-            };
+        walk(items, (item, level) => {
+            item.receiveOverflowInfo({
+                getElementInOverflow: () => {
+                    return this._findTabInOverflow(item);
+                },
+                style: {
+                    [getScopedVarName("--_ui5-tab-indentation-level")]: level,
+                    [getScopedVarName("--_ui5-tab-level-has-icon")]: semanticIcons ? "1" : "0",
+                },
+            });
         });
     }
     async _onOverflowKeyDown(e) {
@@ -581,10 +671,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     _setItemsForStrip() {
         const tabStrip = this._getTabStrip();
         let allItemsWidth = 0;
-        if (!this._selectedTab) {
-            return;
-        }
-        const itemsDomRefs = this.items.map(item => item.getTabInStripDomRef());
+        const itemsDomRefs = this.items.map(item => item.getDomRefInStrip());
         // make sure the overflows are hidden
         this._getStartOverflow().setAttribute("hidden", "");
         this._getEndOverflow().setAttribute("hidden", "");
@@ -610,11 +697,11 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         }
     }
     _getRootTab(tab) {
-        while (tab.hasAttribute("ui5-tab")) {
-            if (tab.parentElement.hasAttribute("ui5-tabcontainer")) {
+        while (tab?.hasAttribute("ui5-tab")) {
+            if (tab.parentElement?.hasAttribute("ui5-tabcontainer")) {
                 break;
             }
-            tab = tab.parentElement;
+            tab = (tab.parentElement ?? undefined);
         }
         return tab;
     }
@@ -622,7 +709,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         // show end overflow
         this._getEndOverflow().removeAttribute("hidden");
         const selectedTab = this._getRootTab(this._selectedTab);
-        const selectedTabDomRef = selectedTab.getTabInStripDomRef();
+        const selectedTabDomRef = selectedTab?.getDomRefInStrip();
         const containerWidth = this._getTabStrip().offsetWidth;
         const selectedItemIndexAndWidth = this._getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef);
         const lastVisibleTabIndex = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width);
@@ -635,7 +722,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     _updateStartAndEndOverflow(itemsDomRefs) {
         let containerWidth = this._getTabStrip().offsetWidth;
         const selectedTab = this._getRootTab(this._selectedTab);
-        const selectedTabDomRef = selectedTab.getTabInStripDomRef();
+        const selectedTabDomRef = selectedTab?.getDomRefInStrip();
         const selectedItemIndexAndWidth = this._getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef);
         const hasStartOverflow = this._hasStartOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth);
         const hasEndOverflow = this._hasEndOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth);
@@ -728,10 +815,16 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         return itemDomRef.offsetWidth + margins;
     }
     _getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef) {
+        if (!selectedTabDomRef) {
+            return {
+                index: 0,
+                width: 0,
+            };
+        }
         let index = itemsDomRefs.indexOf(selectedTabDomRef);
         let width = selectedTabDomRef.offsetWidth;
         let selectedSeparator;
-        if (itemsDomRefs[index - 1] && itemsDomRefs[index - 1].isSeparator) {
+        if (itemsDomRefs[index - 1] && itemsDomRefs[index - 1].realTabReference.isSeparator) {
             selectedSeparator = itemsDomRefs[index - 1];
             width += this._getItemWidth(selectedSeparator);
         }
@@ -774,19 +867,19 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         }
         // if prev item is separator - hide it
         const prevItem = itemsDomRefs[index - 1];
-        if (prevItem && prevItem.isSeparator) {
+        if (prevItem && prevItem.realTabReference.isSeparator) {
             lastVisibleIndex -= 1;
         }
         return lastVisibleIndex;
     }
     get isModeStartAndEnd() {
-        return this.tabsOverflowMode === TabsOverflowMode.StartAndEnd;
+        return this.overflowMode === OverflowMode.StartAndEnd;
     }
     _updateOverflowCounters() {
         let startOverflowItemsCount = 0;
         let endOverflowItemsCount = 0;
         this._getTabs()
-            .map(tab => tab.getTabInStripDomRef())
+            .map(tab => tab.getDomRefInStrip())
             .forEach(tab => {
             if (tab.hasAttribute("start-overflow")) {
                 startOverflowItemsCount++;
@@ -807,7 +900,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             focusableRefs.push(this.startOverflowButton[0] || this._getStartOverflowBtnDOM());
         }
         this._getTabs().forEach(tab => {
-            const ref = tab.getTabInStripDomRef();
+            const ref = tab.getDomRefInStrip();
             const focusable = ref && !ref.hasAttribute("hidden");
             if (focusable) {
                 focusableRefs.push(tab);
@@ -831,39 +924,33 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         if (opener === this._getEndOverflowBtnDOM() || opener.slot === "overflowButton") {
             return "end-overflow";
         }
-        if (opener instanceof Button) {
-            return opener.tab;
-        }
-        return opener;
+        return getTabInStrip(opener);
     }
     _getPopoverItemsFor(targetOwner) {
         if (targetOwner === "start-overflow") {
             return this.items.filter(item => {
-                const stripRef = item.getTabInStripDomRef();
+                const stripRef = item.getDomRefInStrip();
                 return stripRef && stripRef.hasAttribute("start-overflow");
             });
         }
         if (targetOwner === "end-overflow") {
             return this.items.filter(item => {
-                const stripRef = item.getTabInStripDomRef();
+                const stripRef = item.getDomRefInStrip();
                 return stripRef && stripRef.hasAttribute("end-overflow");
             });
         }
-        if (isTabInStrip(targetOwner)) {
-            return targetOwner.realTabReference.subTabs;
-        }
-        return targetOwner.subTabs;
+        return targetOwner.realTabReference.items;
     }
     _setPopoverItems(items) {
+        this._sendOverflowPresentationInfos(items);
         const newItemsFlat = this._flatten(items);
         if (!arraysAreEqual(this._popoverItemsFlat, newItemsFlat)) {
             this._popoverItemsFlat = newItemsFlat;
-            this._addStyleIndent(this._popoverItemsFlat);
         }
     }
     async _togglePopover(opener, setInitialFocus = false) {
         this.responsivePopover = await this._respPopover();
-        if (this.responsivePopover.isOpen()) {
+        if (this.responsivePopover.open) {
             this._closePopover();
         }
         else {
@@ -878,13 +965,15 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             this._setPopoverInitialFocus();
         }
         if (this._hasScheduledPopoverOpen) {
-            await this.responsivePopover.showAt(opener, preventInitialFocus);
+            this.responsivePopover.preventInitialFocus = preventInitialFocus;
+            this.responsivePopover.opener = opener;
+            this.responsivePopover.open = true;
         }
     }
-    get hasSubTabs() {
+    get hasItems() {
         const tabs = this._getTabs();
         for (let i = 0; i < tabs.length; i++) {
-            if (tabs[i].subTabs.length > 0) {
+            if (tabs[i].items.length > 0) {
                 return true;
             }
         }
@@ -906,53 +995,36 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         return this._getEndOverflow().querySelector("[ui5-button]");
     }
     async _respPopover() {
-        const staticAreaItemDomRef = await this.getStaticAreaItemDomRef();
-        if (!this._setDraggedElementInStaticArea) {
-            this._setDraggedElementInStaticArea = DragRegistry.addSelfManagedArea(this.staticAreaItem);
-            staticAreaItemDomRef.addEventListener("dragstart", e => {
-                this._setDraggedElementInStaticArea(e.target.realTabReference);
-            });
-        }
-        return staticAreaItemDomRef.querySelector(`#${this._id}-overflowMenu`);
+        await renderFinished();
+        return this.shadowRoot.querySelector(`#${this._id}-overflowMenu`);
     }
     _closePopover() {
         this._hasScheduledPopoverOpen = false;
-        this.responsivePopover?.close();
+        if (this.responsivePopover) {
+            this.responsivePopover.open = false;
+        }
     }
     get dropIndicatorDOM() {
         return this.shadowRoot.querySelector("[ui5-drop-indicator]");
     }
-    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,
-            },
-        };
+    _findSiblings(tab) {
+        let parent;
+        walk(this.items, item => {
+            if (item.items && item.items.includes(tab)) {
+                parent = item;
+            }
+        });
+        return (parent ?? this).items;
     }
     get mixedMode() {
-        return this.items.some(item => item.icon) && this.items.some(item => item.text);
+        const tabs = this._getTabs();
+        return tabs.some(item => item.icon) && tabs.some(item => item.text);
     }
     get textOnly() {
-        return this.items.every(item => !item.icon);
+        return this._getTabs().every(item => !item.icon);
     }
     get withAdditionalText() {
-        return this.items.some(item => !!item.additionalText);
+        return this._getTabs().some(item => !!item.additionalText);
     }
     get standardTabLayout() {
         return this.tabLayout === TabLayout.Standard;
@@ -981,40 +1053,36 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     get accInvisibleText() {
         return TabContainer_1.i18nBundle.getText(TABCONTAINER_SUBTABS_DESCRIPTION);
     }
-    get tablistAriaDescribedById() {
-        return this.hasSubTabs ? `${this._id}-invisibleText` : undefined;
-    }
-    get shouldAnimate() {
-        return getAnimationMode() !== AnimationMode.None;
+    get overflowBtnAccessibilityAttributes() {
+        return {
+            hasPopup: "menu",
+        };
     }
-    static async onDefine() {
-        TabContainer_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    get tablistAriaDescribedById() {
+        return this.hasItems ? `${this._id}-invisibleText` : undefined;
     }
 };
-__decorate([
-    property({ type: Boolean })
-], TabContainer.prototype, "fixed", void 0);
 __decorate([
     property({ type: Boolean })
 ], TabContainer.prototype, "collapsed", void 0);
 __decorate([
-    property({ type: Boolean })
-], TabContainer.prototype, "showOverflow", void 0);
-__decorate([
-    property({ type: TabLayout, defaultValue: TabLayout.Standard })
+    property()
 ], TabContainer.prototype, "tabLayout", void 0);
 __decorate([
-    property({ type: TabsOverflowMode, defaultValue: TabsOverflowMode.End })
-], TabContainer.prototype, "tabsOverflowMode", void 0);
+    property()
+], TabContainer.prototype, "overflowMode", void 0);
 __decorate([
-    property({ type: TabContainerBackgroundDesign, defaultValue: TabContainerBackgroundDesign.Solid })
+    property()
 ], TabContainer.prototype, "headerBackgroundDesign", void 0);
 __decorate([
-    property({ type: TabContainerBackgroundDesign, defaultValue: TabContainerBackgroundDesign.Solid })
+    property()
 ], TabContainer.prototype, "contentBackgroundDesign", void 0);
 __decorate([
-    property({ type: TabContainerTabsPlacement, defaultValue: TabContainerTabsPlacement.Top })
+    property()
 ], TabContainer.prototype, "tabsPlacement", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabContainer.prototype, "noAutoSelection", void 0);
 __decorate([
     property()
 ], TabContainer.prototype, "mediaRange", void 0);
@@ -1028,16 +1096,16 @@ __decorate([
     property({ type: Boolean, noAttribute: true })
 ], TabContainer.prototype, "_contentCollapsed", void 0);
 __decorate([
-    property({ noAttribute: true, defaultValue: "0" })
+    property({ noAttribute: true })
 ], TabContainer.prototype, "_startOverflowText", void 0);
 __decorate([
-    property({ noAttribute: true, defaultValue: "More" })
+    property({ noAttribute: true })
 ], TabContainer.prototype, "_endOverflowText", void 0);
 __decorate([
-    property({ type: Object, multiple: true })
+    property({ type: Array })
 ], TabContainer.prototype, "_popoverItemsFlat", void 0);
 __decorate([
-    property({ validator: Integer, noAttribute: true })
+    property({ type: Number, noAttribute: true })
 ], TabContainer.prototype, "_width", void 0);
 __decorate([
     slot({
@@ -1059,48 +1127,63 @@ __decorate([
 __decorate([
     longDragOverHandler("[data-ui5-stable=overflow-start],[data-ui5-stable=overflow-end],[role=tab]")
 ], TabContainer.prototype, "_onHeaderDragOver", null);
+__decorate([
+    i18n("@ui5/webcomponents")
+], TabContainer, "i18nBundle", void 0);
 TabContainer = TabContainer_1 = __decorate([
     customElement({
         tag: "ui5-tabcontainer",
         languageAware: true,
         fastNavigation: true,
-        styles: [tabStyles, tabContainerCss],
-        staticAreaStyles: [ResponsivePopoverCommonCss, staticAreaTabStyles],
-        renderer: litRender,
-        template: TabContainerTemplate,
-        staticAreaTemplate: TabContainerPopoverTemplate,
-        dependencies: [
-            Button,
-            Icon,
-            List,
-            ResponsivePopover,
-            DropIndicator,
-            CustomListItem,
+        styles: [
+            tabStyles,
+            tabContainerCss,
+            ResponsivePopoverCommonCss,
         ],
+        renderer: jsxRenderer,
+        template: TabContainerTemplate,
     })
     /**
      * Fired when a tab is selected.
-     * @param {ITab} tab The selected `tab`.
+     * @param {Tab} tab The selected `tab`.
      * @param {Integer} tabIndex The selected `tab` index in the flattened array of all tabs and their subTabs, provided by the `allItems` getter.
      * @public
-     * @allowPreventDefault
+     * @since 2.0.0
      */
     ,
     event("tab-select", {
-        detail: {
-            /**
-             * @public
-             */
-            tab: { type: HTMLElement },
-            /**
-             * @public
-             */
-            tabIndex: { type: Number },
-        },
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * Fired when element is being moved over the tab container.
+     *
+     * If the new position is valid, prevent the default action of the event using `preventDefault()`.
+     * @param {object} source Contains information about the moved element under `element` property.
+     * @param {object} destination Contains information about the destination of the moved element. Has `element` and `placement` properties.
+     * @public
+     * @since 2.0.0
+     */
+    ,
+    event("move-over", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * Fired when element is moved to the tab container.
+     *
+     * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
+     * @param {object} source Contains information about the moved element under `element` property.
+     * @param {object} destination Contains information about the destination of the moved element. Has `element` and `placement` properties.
+     * @public
+     */
+    ,
+    event("move", {
+        bubbles: true,
     })
 ], TabContainer);
 const isTabInStrip = (el) => el.localName === "div" && el.getAttribute("role") === "tab";
-const getTab = (el) => {
+const getTabInStrip = (el) => {
     while (el) {
         if (isTabInStrip(el)) {
             return el;
@@ -1109,14 +1192,17 @@ const getTab = (el) => {
     }
     return false;
 };
-const walk = (tabs, callback) => {
-    [...tabs].forEach(tab => {
-        callback(tab);
-        if (tab.subTabs) {
-            walk(tab.subTabs, callback);
+const _walk = (items, callback, level) => {
+    [...items].forEach(item => {
+        callback(item, level);
+        if (item.hasAttribute("ui5-tab") && item.items) {
+            _walk(item.items, callback, level + 1);
         }
     });
 };
+const walk = (items, callback) => {
+    _walk(items, callback, 0);
+};
 TabContainer.define();
 export default TabContainer;
 //# sourceMappingURL=TabContainer.js.map