@sapudex/web-components 0.114.2 → 0.127.6

package/dist/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../src/Tab.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport I18nBundle, { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport TabNavigation from \"./TabNavigation.js\";\nimport UDExBadge from \"./Badge.js\";\n\nimport TabTemplate from \"./generated/templates/TabTemplate.lit.js\";\nimport TabHeaderTemplate from \"./generated/templates/TabHeaderTemplate.lit.js\";\nimport TabInOverflowTemplate from \"./generated/templates/TabInOverflowTemplate.lit.js\";\nimport { ATTENTION_BADGE } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport TabInOverflowCss from \"./generated/themes/TabInOverflow.css.js\";\n\nexport enum Target {\n  _blank = \"_blank\",\n  _parent = \"_parent\",\n  _self = \"_self\",\n  _top = \"_top\",\n}\n\ninterface ITab extends UI5Element {\n  getTabInHeaderDomRef: () => ITab | null;\n  disabled?: boolean;\n  icon?: string;\n  selected?: boolean;\n  numberBadge?: string;\n  text?: string;\n  showAttentionBadge?: boolean;\n  accessibleName?: string;\n  href?: string;\n  content?: Array<Node>;\n  hasIcon: boolean;\n  isOnSelectedTab: boolean;\n  hasNotIcon: boolean;\n  hasNotHref: boolean;\n  isSelected: boolean;\n  selectedClass: string;\n  tabNavigation: any;\n  _individualSlot: string;\n  _effectiveSlotName: string;\n  _slotName: string;\n  _selected?: boolean;\n  _tabIndex: string;\n  _iconWithoutBackground: boolean;\n  _posinset?: number;\n  _setsize?: number;\n  _contentId?: string;\n  getElementInHeader?: () => ITab | null;\n  _realTab?: UDExTab;\n  _width?: string;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-tab</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @udex/web-components/dist/Tab.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-tab\n * @public\n */\n@customElement({\n  tag: \"udex-tab\",\n  renderer: litRender,\n  template: TabTemplate,\n  dependencies: [UDExBadge],\n})\n\nclass UDExTab extends UI5Element implements ITab {\n  /**\n   * Defines the Badge at the end of the Tab item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    numberBadge?: string;\n\n  /**\n   * Defines the text of tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    text!: string;\n  /**\n   * Accessible name for tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    accessibleName!: string;\n\n  /**\n   * Defines the selected tab.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    selected!: boolean;\n\n  /**\n   * Defines the displaying attention badge.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    showAttentionBadge!: boolean;\n\n  /**\n   * Defines the icon in the tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    icon!: string;\n\n  /**\n   * Defines the href of the tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    href!: string;\n\n  /**\n   * Define the target of the tab\n   *\n   * @public\n   */\n  @property({ type: Target, defaultValue: Target._self })\n    target!: `${Target}`;\n\n  /**\n   * Defines the tab.\n   *\n   * @private\n   */\n  @property({ type: Object })\n    _realTab!: UDExTab;\n\n  /**\n   * Defines the selected tab for private use.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean })\n    _selected!: boolean;\n\n  /**\n   * Defines the tabindex of the tab.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: String })\n    _tabIndex!: string;\n\n  /**\n   * Defines the background color of the component.\n   *\n   * @private\n   * @default false\n  */\n  @property({ type: Boolean })\n    _iconWithoutBackground!: boolean;\n\n  /**\n   * Defines the content of the tab.\n   *\n   * @slot content\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  getElementInHeader?: () => ITab | null;\n  _individualSlot!: string;\n\n  getTabInHeaderDomRef(): ITab | null {\n    if (this.getElementInHeader) {\n      return this.getElementInHeader();\n    }\n\n    return null;\n  }\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExTab.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  get isOnSelectedTab(): boolean {\n    return this._realTab === this;\n  }\n\n  get _effectiveSlotName() {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get hasIcon(): boolean {\n    return !!this.icon;\n  }\n\n  get classWithIcon(): string {\n    return this.hasIcon ? \"udex-tab-navigation__button-text--icon\" : \"\";\n  }\n\n  get buttonClassWithIcon(): string {\n    return this.hasIcon ? \" udex-tab-navigation__button-tab--icon\" : \"\";\n  }\n\n  get hasNotIcon(): boolean {\n    return !this.icon && this.showAttentionBadge;\n  }\n\n  get hasNotHref(): boolean {\n    return !this.href;\n  }\n\n  get isSelected() {\n    return this.selected || this._selected;\n  }\n\n  get selectedClass(): string {\n    return this.isSelected ? \"udex-tab-navigation__button-tab--active\" : \"\";\n  }\n\n  get classWithIconWithoutBackground(): string {\n    return this.hasIcon && !this._iconWithoutBackground ? \" udex-tab-navigation__button-tab--icon-tab\" : \"\";\n  }\n\n  get tabNavigation() {\n    return executeTemplate(UDExTab.headerTemplate, this);\n  }\n\n  get tabInOverflow() {\n    return executeTemplate(UDExTab.overflowTemplate, this);\n  }\n\n  get _slotName() {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get effectiveSelected() {\n    return this.selected || this._selected;\n  }\n\n  get ariaLabelledBy() {\n    const labels = [];\n\n    if (this.text) {\n      labels.push(`${this.__id!}-text`);\n    }\n\n    if (this.icon) {\n      labels.push(`${this.__id!}-icon`);\n    }\n\n    return labels.join(\" \");\n  }\n\n  get accessibleNameText() {\n    return this.accessibleName || (this.showAttentionBadge ? `, Attention badge ${UDExTab.i18nBundle.getText(ATTENTION_BADGE)}` : \"\");\n  }\n\n  static get headerTemplate() {\n    return TabHeaderTemplate;\n  }\n\n  static get overflowTemplate() {\n    return TabInOverflowTemplate;\n  }\n}\n\nUDExTab.define();\n\nTabNavigation.registerStaticAreaTabStyles(TabInOverflowCss);\n\nexport default UDExTab;\nexport { ITab };\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../src/Tab.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport I18nBundle, { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport TabNavigation from \"./TabNavigation.js\";\nimport UDExBadge from \"./Badge.js\";\n\nimport TabTemplate from \"./generated/templates/TabTemplate.lit.js\";\nimport TabHeaderTemplate from \"./generated/templates/TabHeaderTemplate.lit.js\";\nimport TabInOverflowTemplate from \"./generated/templates/TabInOverflowTemplate.lit.js\";\nimport { ATTENTION_BADGE } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport TabInOverflowCss from \"./generated/themes/TabInOverflow.css.js\";\n\nexport enum Target {\n  _blank = \"_blank\",\n  _parent = \"_parent\",\n  _self = \"_self\",\n  _top = \"_top\",\n}\n\ninterface ITab extends UI5Element {\n  getTabInHeaderDomRef: () => ITab | null;\n  disabled?: boolean;\n  icon?: string;\n  selected?: boolean;\n  numberBadge?: string;\n  text?: string;\n  showAttentionBadge?: boolean;\n  accessibleName?: string;\n  href?: string;\n  content?: Array<Node>;\n  hasIcon: boolean;\n  isOnSelectedTab: boolean;\n  hasNotIcon: boolean;\n  hasNotHref: boolean;\n  isSelected: boolean;\n  selectedClass: string;\n  tabNavigation: any;\n  _individualSlot: string;\n  _effectiveSlotName: string;\n  _slotName: string;\n  _selected?: boolean;\n  _tabIndex: string;\n  _contentTabIndex: string;\n  _iconWithoutBackground: boolean;\n  _posinset?: number;\n  _setsize?: number;\n  _contentId?: string;\n  getElementInHeader?: () => ITab | null;\n  _realTab?: UDExTab;\n  _width?: string;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-tab</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @udex/web-components/dist/Tab.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-tab\n * @public\n */\n@customElement({\n  tag: \"udex-tab\",\n  renderer: litRender,\n  template: TabTemplate,\n  dependencies: [UDExBadge],\n})\n\nclass UDExTab extends UI5Element implements ITab {\n  /**\n   * Defines the Badge at the end of the Tab item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    numberBadge?: string;\n\n  /**\n   * Defines the text of tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    text!: string;\n  /**\n   * Accessible name for tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    accessibleName!: string;\n\n  /**\n   * Defines the selected tab.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    selected!: boolean;\n\n  /**\n   * Defines the displaying attention badge.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    showAttentionBadge!: boolean;\n\n  /**\n   * Defines the icon in the tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    icon!: string;\n\n  /**\n   * Defines the href of the tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    href!: string;\n\n  /**\n   * Define the target of the tab\n   *\n   * @public\n   */\n  @property({ type: Target, defaultValue: Target._self })\n    target!: `${Target}`;\n\n  /**\n   * Defines the tab.\n   *\n   * @private\n   */\n  @property({ type: Object })\n    _realTab!: UDExTab;\n\n  /**\n   * Defines the selected tab for private use.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean })\n    _selected!: boolean;\n\n  /**\n   * Defines the tabindex of the tab.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: String })\n    _tabIndex!: string;\n\n  /**\n   * Defines the tabindex of the tab content.\n   *\n   * @private\n   * @default -1\n   */\n  @property({ type: String })\n    _contentTabIndex!: string;\n\n  /**\n   * Defines the background color of the component.\n   *\n   * @private\n   * @default false\n  */\n  @property({ type: Boolean })\n    _iconWithoutBackground!: boolean;\n\n  /**\n   * Defines the content of the tab.\n   *\n   * @slot content\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  getElementInHeader?: () => ITab | null;\n  _individualSlot!: string;\n\n  getTabInHeaderDomRef(): ITab | null {\n    if (this.getElementInHeader) {\n      return this.getElementInHeader();\n    }\n\n    return null;\n  }\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExTab.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  get isOnSelectedTab(): boolean {\n    return this._realTab === this;\n  }\n\n  get _effectiveSlotName() {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get hasIcon(): boolean {\n    return !!this.icon;\n  }\n\n  get classWithIcon(): string {\n    return this.hasIcon ? \"udex-tab-navigation__button-text--icon\" : \"\";\n  }\n\n  get buttonClassWithIcon(): string {\n    return this.hasIcon ? \" udex-tab-navigation__button-tab--icon\" : \"\";\n  }\n\n  get hasNotIcon(): boolean {\n    return !this.icon && this.showAttentionBadge;\n  }\n\n  get hasNotHref(): boolean {\n    return !this.href;\n  }\n\n  get isSelected() {\n    return this.selected || this._selected;\n  }\n\n  get selectedClass(): string {\n    return this.isSelected ? \"udex-tab-navigation__button-tab--active\" : \"\";\n  }\n\n  get classWithIconWithoutBackground(): string {\n    return this.hasIcon && !this._iconWithoutBackground ? \" udex-tab-navigation__button-tab--icon-tab\" : \"\";\n  }\n\n  get tabNavigation() {\n    return executeTemplate(UDExTab.headerTemplate, this);\n  }\n\n  get tabInOverflow() {\n    return executeTemplate(UDExTab.overflowTemplate, this);\n  }\n\n  get _slotName() {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get effectiveSelected() {\n    return this.selected || this._selected;\n  }\n\n  get ariaLabelledBy() {\n    const labels = [];\n\n    if (this.text) {\n      labels.push(`${this.__id!}-text`);\n    }\n\n    if (this.icon) {\n      labels.push(`${this.__id!}-icon`);\n    }\n\n    return labels.join(\" \");\n  }\n\n  get accessibleNameText() {\n    return this.accessibleName || (this.showAttentionBadge ? `, ${UDExTab.i18nBundle.getText(ATTENTION_BADGE)}` : \"\");\n  }\n\n  static get headerTemplate() {\n    return TabHeaderTemplate;\n  }\n\n  static get overflowTemplate() {\n    return TabInOverflowTemplate;\n  }\n}\n\nUDExTab.define();\n\nTabNavigation.registerStaticAreaTabStyles(TabInOverflowCss);\n\nexport default UDExTab;\nexport { ITab };\n"]}

package/dist/TabNavigation.d.ts

@@ -4,6 +4,7 @@ import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import Tab, { ITab } from "./Tab.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import TabNavigationPopoverTemplate from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
 export declare enum SizeMoreButton {
     Small = "Small",
     Medium = "Medium"
@@ -96,6 +97,9 @@ declare class UDExTabNavigation extends UI5Element {
     resetSelectedTabs(): void;
     setCurrentSelectedTab(): void;
     setRealTabToItems(): void;
+    getContentId(index: number): string;
+    getContentTabIndex(tab: ITab): string;
+    getAllCustomTags(tab: ITab, prefix: string): Element[];
     setElementInHeader(): void;
     onAfterRendering(): void;
     initOutsideClick(): void;
@@ -129,46 +133,42 @@ declare class UDExTabNavigation extends UI5Element {
     onItemSelect(selectedId: string): void;
     getMoreButton(): HTMLElement;
     getHeader(): HTMLElement;
-    handleMoreButton(): Promise<void>;
+    handleMoreButton(): void;
     updateOverflowItems(): void;
     handleTogglePopover(): void;
     handleClosePopover(): void;
-    handleOpenPopover(): Promise<void>;
+    handleOpenPopover(): void;
     handleKeyDown(e: KeyboardEvent): void;
     handleRightArrow(e: KeyboardEvent): void;
     onFocusRightItem(target: HTMLElement): void;
     getTabIndexById(id: string): number;
     handleLeftArrow(e: KeyboardEvent): void;
     onFocusLeftItem(target: HTMLElement): void;
-    handleTabNext(e: KeyboardEvent): void;
-    onTabNext(e: KeyboardEvent, previousSelectedIndex: number): void;
-    handleTabPrevious(e: KeyboardEvent): void;
-    onTabPrevious(e: KeyboardEvent, previousSelectedIndex: number): void;
     handleHomeKey(e: KeyboardEvent): void;
     handleEndKey(e: KeyboardEvent): void;
     onEndKey(): void;
-    handleFocusMoreButton(e: KeyboardEvent): Promise<void>;
-    handleUpMoreButton(e: KeyboardEvent): Promise<void>;
-    onFocusLastItemPopover(): Promise<void>;
-    handleTabPreviouMoreButton(e: KeyboardEvent): void;
+    handleFocusMoreButton(e: KeyboardEvent): void;
     handleHomeKeyMoreButton(e: KeyboardEvent): void;
-    handleEnterKeyMoreButton(e: KeyboardEvent): Promise<void>;
-    onOpenPopover(): void;
-    handleDownMoreButton(e: KeyboardEvent): Promise<void>;
-    onFocusFirstItemPopover(): Promise<void>;
+    handleEnterKeyMoreButton(e: KeyboardEvent): void;
+    handleDownMoreButton(e: KeyboardEvent): void;
+    onFocusFirstItemPopover(): void;
     handleFocusPopover(e: KeyboardEvent): void;
+    handleTab(e: KeyboardEvent): void;
     handleUp(e: KeyboardEvent): void;
-    onPreviousItemInPopover(target: HTMLElement): Promise<void>;
-    getItemsFromPopover(): Promise<HTMLElement[]>;
+    onPreviousItemInPopover(target: HTMLElement): void;
+    onNextItemInPopover(target: HTMLElement): void;
+    resetTabIndexItem(item: HTMLElement): void;
+    getItemsFromPopover(): Array<HTMLElement>;
     getPopoverTabIndexById(popoverItems: Array<HTMLElement>, id: string): number;
     handleDown(e: KeyboardEvent): void;
-    onNextItemInPopover(target: HTMLElement): Promise<void>;
     handleEnterOrSpace(e: KeyboardEvent): void;
     handleEscape(e: KeyboardEvent): void;
-    handleHome(e: KeyboardEvent): Promise<void>;
-    handleEnd(e: KeyboardEvent): Promise<void>;
-    getResponsePopover(): Promise<ResponsivePopover>;
+    handleHome(e: KeyboardEvent): void;
+    handleEnd(e: KeyboardEvent): void;
+    getResponsePopover(): ResponsivePopover;
     get moreButtonText(): string;
     static registerStaticAreaTabStyles(styles: StyleData): void;
+    static get tabNavigationPopoverTemplate(): typeof TabNavigationPopoverTemplate;
+    get tabNavigationPopover(): object;
 }
 export default UDExTabNavigation;

package/dist/TabNavigation.js

@@ -14,17 +14,19 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import { isUp, isDown, isRight, isLeft, isEnter, isSpace, isEscape, isTabNext, isTabPrevious, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isUp, isDown, isRight, isLeft, isEnter, isSpace, isEscape, isHome, isEnd, isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import TabNavigationTemplate from "./generated/templates/TabNavigationTemplate.lit.js";
-import TabNavigationPopover from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
+import TabNavigationPopoverTemplate from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
 // Styles
 import TabNavigationCss from "./generated/themes/TabNavigation.css.js";
+import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
 const staticAreaTabStyles = [];
 export var SizeMoreButton;
 (function (SizeMoreButton) {
@@ -81,6 +83,7 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
         this.fireEvent("click", { currentPage: pageIndex });
     }
     onBeforeRendering() {
+        this.updateOverflowItems();
         this.setSelectedTab();
     }
     setSelectedTab() {
@@ -103,16 +106,33 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
         this._selectedTab._selected = Boolean(selectedTabs.length ? selectedTabs.length : this.items[0]);
     }
     setRealTabToItems() {
-        const contentId = this.__id;
         this.items.forEach((tab, index, arr) => {
             tab._iconWithoutBackground = this.iconWithoutBackground;
             tab._posinset = index + 1;
             tab._setsize = arr.length;
-            tab._contentId = `udex-${contentId}-content`;
+            tab._contentId = this.getContentId(index);
             tab._realTab = this._selectedTab;
             tab._width = this.tabWidth;
+            tab._contentTabIndex = this.getContentTabIndex(tab);
         });
     }
+    getContentId(index) {
+        return `udex-${index + 1}-content`;
+    }
+    getContentTabIndex(tab) {
+        if (tab.selected) {
+            const focusableSelectors = ["a[href]", "button", "textarea", "input", "select", "details", "[tabindex]:not([tabindex='-1']"];
+            const focusableElementsUDExTag = this.getAllCustomTags(tab, "udex");
+            const focusableElementsCustomTag = this.getAllCustomTags(tab, "ui5").concat(focusableElementsUDExTag);
+            const focusableElements = Array.from(tab.querySelectorAll(focusableSelectors.join(","))).concat(focusableElementsCustomTag);
+            return focusableElements.length ? "-1" : "0";
+        }
+        return "-1";
+    }
+    getAllCustomTags(tab, prefix) {
+        const allElements = tab.querySelectorAll("*");
+        return Array.from(allElements).filter(element => element.tagName.toLowerCase().startsWith(prefix.toLowerCase()));
+    }
     setElementInHeader() {
         this.items.forEach(item => {
             item.getElementInHeader = () => this.getDomRef().querySelector(`[id="${item.__id}"]`);
@@ -361,8 +381,8 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     getHeader() {
         return this.shadowRoot.querySelector(`#${this.__id}-header`);
     }
-    async handleMoreButton() {
-        this._responsivePopover = await this.getResponsePopover();
+    handleMoreButton() {
+        this._responsivePopover = this.getResponsePopover();
         this.updateOverflowItems();
         this.handleTogglePopover();
     }
@@ -387,9 +407,9 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
             this._isExpanded = false;
         }
     }
-    async handleOpenPopover() {
+    handleOpenPopover() {
         if (!this._responsivePopover?.opened) {
-            await this._responsivePopover.showAt(this.getMoreButton());
+            this._responsivePopover.showAt(this.getMoreButton());
             this.getMoreButton().classList.add("udex-tab-navigation__button-more--toggled");
             this._isExpanded = true;
         }
@@ -397,8 +417,6 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     handleKeyDown(e) {
         this.handleRightArrow(e);
         this.handleLeftArrow(e);
-        this.handleTabNext(e);
-        this.handleTabPrevious(e);
         this.handleHomeKey(e);
         this.handleEndKey(e);
     }
@@ -431,40 +449,15 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
         const previousSelectIndex = previousSelectedIndex - 1 < 0 ? lastIndex : previousSelectedIndex - 1;
         this._visibleTabs[previousSelectIndex].focus();
     }
-    handleTabNext(e) {
-        if (isTabNext(e)) {
-            const previousSelectedIndex = this.getTabIndexById(e.target.id);
-            this.onTabNext(e, previousSelectedIndex);
-        }
-    }
-    onTabNext(e, previousSelectedIndex) {
-        const isMoreButton = this._visibleTabs[this._visibleTabs.length - 1] === this.getMoreButton();
-        const nextSelectIndex = previousSelectedIndex + 1;
-        if (nextSelectIndex < this._visibleTabs.length || (isMoreButton && nextSelectIndex < this._visibleTabs.length)) {
-            e.preventDefault();
-            this._visibleTabs[nextSelectIndex].focus();
-        }
-    }
-    handleTabPrevious(e) {
-        if (isTabPrevious(e)) {
-            const previousSelectedIndex = this.getTabIndexById(e.target.id);
-            this.onTabPrevious(e, previousSelectedIndex);
-        }
-    }
-    onTabPrevious(e, previousSelectedIndex) {
-        const previousSelectIndex = previousSelectedIndex - 1;
-        if (previousSelectIndex >= 0) {
-            e.preventDefault();
-            this._visibleTabs[previousSelectIndex].focus();
-        }
-    }
     handleHomeKey(e) {
         if (isHome(e)) {
+            e.preventDefault();
             this._visibleTabs[0].focus();
         }
     }
     handleEndKey(e) {
         if (isEnd(e)) {
+            e.preventDefault();
             this.onEndKey();
         }
     }
@@ -477,38 +470,11 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
             this._visibleTabs[lastVisibleTab].focus();
         }
     }
-    async handleFocusMoreButton(e) {
-        await this.handleUpMoreButton(e);
-        await this.handleDownMoreButton(e);
-        this.handleTabPreviouMoreButton(e);
+    handleFocusMoreButton(e) {
+        this.handleDownMoreButton(e);
         this.handleHomeKeyMoreButton(e);
         this.handleEnterKeyMoreButton(e);
     }
-    async handleUpMoreButton(e) {
-        if (isUp(e)) {
-            e.preventDefault();
-            e.stopPropagation();
-            this._responsivePopover = await this.getResponsePopover();
-            await this.handleOpenPopover();
-            this.updateOverflowItems();
-            this.onFocusLastItemPopover();
-        }
-    }
-    async onFocusLastItemPopover() {
-        if (this._responsivePopover?.opened) {
-            const popoverItems = await this.getItemsFromPopover();
-            const lastOverflowTabIndex = popoverItems.length - 1;
-            popoverItems[lastOverflowTabIndex].focus();
-        }
-    }
-    handleTabPreviouMoreButton(e) {
-        if (isTabPrevious(e)) {
-            e.preventDefault();
-            e.stopPropagation();
-            const lastVisibleTab = this._visibleTabs.length - 2;
-            this._visibleTabs[lastVisibleTab].focus();
-        }
-    }
     handleHomeKeyMoreButton(e) {
         if (isHome(e)) {
             e.preventDefault();
@@ -516,31 +482,27 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
             this._visibleTabs[0].focus();
         }
     }
-    async handleEnterKeyMoreButton(e) {
+    handleEnterKeyMoreButton(e) {
         if (isEnter(e)) {
             e.preventDefault();
-            this._responsivePopover = await this.getResponsePopover();
+            this._responsivePopover = this.getResponsePopover();
             this.updateOverflowItems();
             this.handleOpenPopover();
         }
     }
-    onOpenPopover() {
-        if (!this._responsivePopover?.opened) {
-            this.handleMoreButton();
-        }
-    }
-    async handleDownMoreButton(e) {
+    handleDownMoreButton(e) {
         if (isDown(e) || isEnter(e)) {
-            this._responsivePopover = await this.getResponsePopover();
-            await this.handleOpenPopover();
+            this._responsivePopover = this.getResponsePopover();
+            this.handleOpenPopover();
             this.updateOverflowItems();
-            this.onFocusFirstItemPopover();
         }
     }
-    async onFocusFirstItemPopover() {
+    onFocusFirstItemPopover() {
         if (this._responsivePopover?.opened) {
-            const popoverItems = await this.getItemsFromPopover();
-            popoverItems[0].focus();
+            const popoverItems = this.getItemsFromPopover();
+            const firstPopoverItem = popoverItems[0];
+            firstPopoverItem.setAttribute("tabindex", "0");
+            firstPopoverItem.focus();
         }
     }
     handleFocusPopover(e) {
@@ -551,20 +513,41 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
         this.handleEscape(e);
         this.handleHome(e);
         this.handleEnd(e);
+        this.handleTab(e);
+    }
+    handleTab(e) {
+        if (isTabNext(e) || isTabPrevious(e)) {
+            this.handleClosePopover();
+        }
     }
     handleUp(e) {
         if (isUp(e)) {
             this.onPreviousItemInPopover(e.target);
         }
     }
-    async onPreviousItemInPopover(target) {
-        const popoverItems = await this.getItemsFromPopover();
+    onPreviousItemInPopover(target) {
+        const popoverItems = this.getItemsFromPopover();
         const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
         const previousSelectIndex = currentSelectedTabIndex - 1 < 0 ? popoverItems.length - 1 : currentSelectedTabIndex - 1;
-        popoverItems[previousSelectIndex].focus();
+        const prevItem = popoverItems[previousSelectIndex];
+        this.resetTabIndexItem(popoverItems[currentSelectedTabIndex]);
+        prevItem.setAttribute("tabIndex", "0");
+        prevItem.focus();
+    }
+    onNextItemInPopover(target) {
+        const popoverItems = this.getItemsFromPopover();
+        const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
+        const nextSelectIndex = currentSelectedTabIndex + 1 > popoverItems.length - 1 ? 0 : currentSelectedTabIndex + 1;
+        const nextItem = popoverItems[nextSelectIndex];
+        this.resetTabIndexItem(popoverItems[currentSelectedTabIndex]);
+        nextItem.setAttribute("tabIndex", "0");
+        nextItem.focus();
+    }
+    resetTabIndexItem(item) {
+        item.setAttribute("tabIndex", "-1");
     }
-    async getItemsFromPopover() {
-        const responsivePopover = await this.getResponsePopover();
+    getItemsFromPopover() {
+        const responsivePopover = this.getResponsePopover();
         const [contentFromPopover] = responsivePopover.content;
         return Array.from(contentFromPopover.children);
     }
@@ -576,12 +559,6 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
             this.onNextItemInPopover(e.target);
         }
     }
-    async onNextItemInPopover(target) {
-        const popoverItems = await this.getItemsFromPopover();
-        const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
-        const nextSelectIndex = currentSelectedTabIndex + 1 > popoverItems.length - 1 ? 0 : currentSelectedTabIndex + 1;
-        popoverItems[nextSelectIndex].focus();
-    }
     handleEnterOrSpace(e) {
         if (isEnter(e) || isSpace(e)) {
             e.preventDefault();
@@ -596,23 +573,23 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
             this._visibleTabs[this._visibleTabs.length - 1].focus();
         }
     }
-    async handleHome(e) {
+    handleHome(e) {
         if (isHome(e)) {
             e.preventDefault();
-            const popoverItems = await this.getItemsFromPopover();
+            const popoverItems = this.getItemsFromPopover();
             popoverItems[0].focus();
         }
     }
-    async handleEnd(e) {
+    handleEnd(e) {
         if (isEnd(e)) {
             e.preventDefault();
-            const popoverItems = await this.getItemsFromPopover();
+            e.stopPropagation();
+            const popoverItems = this.getItemsFromPopover();
             popoverItems[popoverItems.length - 1].focus();
         }
     }
-    async getResponsePopover() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        return staticAreaItem.querySelector(`#${this.__id}-overflow-popover`);
+    getResponsePopover() {
+        return this.shadowRoot.querySelector("[ui5-popover]");
     }
     get moreButtonText() {
         return UDExTabNavigation_1.i18nBundle.getText(MORE);
@@ -620,6 +597,12 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     static registerStaticAreaTabStyles(styles) {
         staticAreaTabStyles.push(styles);
     }
+    static get tabNavigationPopoverTemplate() {
+        return TabNavigationPopoverTemplate;
+    }
+    get tabNavigationPopover() {
+        return executeTemplate(UDExTabNavigation_1.tabNavigationPopoverTemplate, this);
+    }
 };
 __decorate([
     property({ type: SizeMoreButton, defaultValue: "Small" })
@@ -654,10 +637,8 @@ UDExTabNavigation = UDExTabNavigation_1 = __decorate([
     customElement({
         tag: "udex-tab-navigation",
         renderer: litRender,
-        styles: TabNavigationCss,
+        styles: [TabNavigationCss, TabInOverflowCss],
         template: TabNavigationTemplate,
-        staticAreaTemplate: TabNavigationPopover,
-        staticAreaStyles: [staticAreaTabStyles],
         dependencies: [ResponsivePopover],
     })
     /**