@sapudex/web-components 2.58.0 → 2.59.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.58.0",
+  "version": "2.59.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -9801,6 +9801,11 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/TabNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Fires when the tab was clicked.\n- **tab-select** - Fired when a tab is selected.\n\n### **Slots:**\n - **default** - Defines the tabs and content.\n- **footer** - Defines optional content rendered below the tab list in Vertical orientation.\nUse to place a button or any action element beneath the tabs.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the tab list.\n\nWhen set, screen readers announce this text as the name of the tab group\n(e.g. \"Profile navigation\") as focus enters the tabs. When empty, the tab\nlist is exposed by its role only, with no accessible name.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "auto-play",
               "description": "Enables automatic tab switching for Vertical orientation.",
@@ -9878,6 +9883,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the tab list.\n\nWhen set, screen readers announce this text as the name of the tab group\n(e.g. \"Profile navigation\") as focus enters the tabs. When empty, the tab\nlist is exposed by its role only, with no accessible name.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "auto-play",
                 "description": "Enables automatic tab switching for Vertical orientation.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.58.0",
+  "version": "2.59.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -37,19 +37,19 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.2",
-    "@ui5/webcomponents": "2.25.0",
-    "@ui5/webcomponents-base": "2.25.0",
-    "@ui5/webcomponents-fiori": "2.25.0",
-    "@ui5/webcomponents-icons": "2.25.0",
-    "@ui5/webcomponents-localization": "2.25.0",
-    "@ui5/webcomponents-theming": "2.25.0",
+    "@ui5/webcomponents": "2.27.0",
+    "@ui5/webcomponents-base": "2.27.0",
+    "@ui5/webcomponents-fiori": "2.27.0",
+    "@ui5/webcomponents-icons": "2.27.0",
+    "@ui5/webcomponents-localization": "2.27.0",
+    "@ui5/webcomponents-theming": "2.27.0",
     "@vimeo/player": "^2.24.0",
     "video.js": "^8.23.6"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.5",
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
-    "@ui5/webcomponents-tools": "2.25.0",
+    "@ui5/webcomponents-tools": "2.27.0",
     "chromedriver": "149.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/RatingIndicatorTemplate.tsx

@@ -25,7 +25,6 @@ export default function RatingIndicatorTemplate(this: UDExRatingIndicator) {
       aria-description={this._ariaDescription}
       tabindex={this.effectiveTabIndex}
       onFocusIn={this._onfocusin}
-      onFocusOut={this._onfocusout}
       onClick={this._onclick}
       onKeyDown={this._onkeydown}
       title={this.ratingTooltip}

package/src/SecondaryNavigation.ts

@@ -4,7 +4,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -16,7 +16,7 @@ import type UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
-import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
+import SecondaryNavigationTemplate from "./SecondaryNavigationTemplate.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
@@ -71,7 +71,7 @@ type UDExSecondaryNavigationMobileMenuOpenerClickEventDetail = {
  */
 @customElement({
   tag: "udex-secondary-navigation",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SecondaryNavigationCss],
   template: SecondaryNavigationTemplate,
   dependencies: [UDExSecondaryNavigationItem],

package/src/SecondaryNavigationItem.ts

@@ -3,8 +3,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import {
   isEscape, isEnter, isSpace, isLeft, isRight, isUp, isDown, isHome, isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -13,9 +12,8 @@ import parseRelativeUnits from "./utils/parseRelativeUnits.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import type { NavItem } from "./SecondaryNavigationItemBase.js";
 import UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 
-import SecondaryNavigationItemTemplate from "./generated/templates/SecondaryNavigationItemTemplate.lit.js";
+import SecondaryNavigationItemTemplate from "./SecondaryNavigationItemTemplate.js";
 
 // Styles
 import SecondaryNavigationItemCss from "./generated/themes/SecondaryNavigationItem.css.js";
@@ -54,10 +52,10 @@ type UDExSecondaryNavigationItemSubItemClickEventDetail = {
  */
 @customElement({
   tag: "udex-secondary-navigation-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SecondaryNavigationItemCss],
   template: SecondaryNavigationItemTemplate,
-  dependencies: [UI5Icon, UDExSecondaryNavigationSubItem],
+  dependencies: [UDExSecondaryNavigationSubItem],
 })
 
 /**

package/src/SecondaryNavigationItemBase.ts

@@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { UDExTarget } from "./types/common.js";
@@ -30,7 +30,7 @@ export type NavItem = {
  * @public
  */
 @customElement({
-  renderer: litRender,
+  renderer: jsxRenderer,
 })
 
 class UDExSecondaryNavigationItemBase extends UI5Element {

package/src/SecondaryNavigationItemTemplate.tsx

@@ -0,0 +1,80 @@
+import type UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
+import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import slimArrowDownIcon from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+
+export default function SecondaryNavigationItemTemplate(this: UDExSecondaryNavigationItem) {
+  if (this.isLink) {
+    return (
+      <a
+        className="udex-secondary-navigation__item"
+        tabindex={0}
+        href={this.path}
+        target={this.target}
+        aria-current={(this.ariaCurrent || undefined) as "page" | undefined}
+        onKeyDown={this.handleItemLinkKeyDown}
+        onClick={this.fireNavItemClickEvent as any}
+        {...{ "active": this.isActive || undefined }}>
+        {this.itemLabel}
+      </a>
+    );
+  }
+
+  return (
+    <>
+      <button
+        className="udex-secondary-navigation__item"
+        tabindex={0}
+        aria-haspopup={this.hasNestedItems}
+        aria-expanded={this.isOpen}
+        aria-label={this.ariaLabel || undefined}
+        onKeyDown={this.handleItemEnterOrSpaceKeys}
+        onClick={this.openDropdown as any}
+        {...{ "active": this.isActive || undefined }}>
+        <span className="udex-secondary-navigation__item-text-wrap">
+          {this.itemLabel}
+          {this._subTitle && (
+            <span className="udex-secondary-navigation__item-sub-title">
+              {this._subTitle}
+            </span>
+          )}
+          {this.hasNestedItems && (
+            <UI5Icon
+              class="udex-secondary-navigation__item-icon"
+              name={slimArrowDownIcon}
+              mode={IconMode.Decorative}>
+            </UI5Icon>
+          )}
+        </span>
+      </button>
+      {this.isOpen && (
+        <div className="udex-secondary-navigation__dropdown">
+          <ul
+            className="udex-secondary-navigation__dropdown-list"
+            onKeyDown={this.handleSubItemKeyDown}>
+            {this._processedItems.map((item, index) => (
+              <li>
+                <UDExSecondaryNavigationSubItem
+                  index={index}
+                  onui5-sub-item-click={this.handleSubItemClick}
+                  onui5-back-item-click={this.onBackClick}
+                  is-back={item.isBack || undefined}
+                  label={item.title}
+                  mobile-link-title={item.mobileLinkTitle}
+                  nestedItems={item.items ?? []}
+                  path={item.path}
+                  target={item.target}
+                  active={item.active}>
+                </UDExSecondaryNavigationSubItem>
+              </li>
+            ))}
+          </ul>
+          <div onKeyDown={this.handleButtonsEscKey}>
+            <slot></slot>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/SecondaryNavigationSubItem.ts

@@ -1,16 +1,13 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import type { NavItem } from "./SecondaryNavigationItemBase.js";
 import UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { BACK_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import SecondaryNavigationSubItemTemplate from "./generated/templates/SecondaryNavigationSubItemTemplate.lit.js";
+import SecondaryNavigationSubItemTemplate from "./SecondaryNavigationSubItemTemplate.js";
 import translate from "./utils/translate.js";
 
 // Styles
@@ -45,10 +42,9 @@ type UDExSecondaryNavigationSubItemBackClickEventDetail = {
  */
 @customElement({
   tag: "udex-secondary-navigation-sub-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: SecondaryNavigationSubItemCss,
   template: SecondaryNavigationSubItemTemplate,
-  dependencies: [UI5Icon],
 })
 
 /**

package/src/SecondaryNavigationSubItemTemplate.tsx

@@ -0,0 +1,63 @@
+import type UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import slimArrowLeftIcon from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+export default function SecondaryNavigationSubItemTemplate(this: UDExSecondaryNavigationSubItem) {
+  if (this.isBack) {
+    return (
+      <button
+        className="udex-secondary-navigation__dropdown-item"
+        onClick={this.onBackItemClick as any}
+        aria-label={this.backButtonAriaLabel}
+        tabindex={0}
+        {...{ "is-back": "" }}>
+        <UI5Icon
+          class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back"
+          name={slimArrowLeftIcon}
+          mode={IconMode.Decorative}>
+        </UI5Icon>
+        {this.itemLabel}
+      </button>
+    );
+  }
+
+  if (this.isButton) {
+    return (
+      <button
+        onClick={this.onItemClick as any}
+        aria-haspopup={this.hasItems || undefined}
+        {...{
+          "sub-active": this.isSubItemActive || undefined,
+          "active": this.active || undefined,
+        }}
+        aria-label={this.label || undefined}
+        tabindex={0}
+        aria-current={(this.ariaCurrent || undefined) as "page" | undefined}
+        className="udex-secondary-navigation__dropdown-item">
+        {this.itemLabel}
+        {this.hasItems && (
+          <UI5Icon
+            class="udex-secondary-navigation__dropdown-icon"
+            name={slimArrowRightIcon}
+            mode={IconMode.Decorative}>
+          </UI5Icon>
+        )}
+      </button>
+    );
+  }
+
+  return (
+    <a
+      className="udex-secondary-navigation__dropdown-item"
+      onClick={this.onItemClick as any}
+      href={this.path}
+      target={this.target}
+      tabindex={0}
+      aria-current={(this.ariaCurrent || undefined) as "page" | undefined}
+      {...{ "active": this.active || undefined }}>
+      {this.itemLabel}
+    </a>
+  );
+}

package/src/SecondaryNavigationTemplate.tsx

@@ -0,0 +1,90 @@
+import type UDExSecondaryNavigation from "./SecondaryNavigation.js";
+import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
+
+export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigation) {
+  return (
+    <div className={this.rootClass}>
+      {this.hasBreadcrumbsSlot && (
+        <div className="udex-secondary-navigation__breadcrumbs">
+          <slot name="breadcrumbs"></slot>
+        </div>
+      )}
+      <div className="udex-secondary-navigation__holder">
+        {this.heading.length > 0 && (
+          <div className="udex-secondary-navigation__heading">
+            {this.headingHref.length > 0 ? (
+              <a
+                className="udex-secondary-navigation__title"
+                tabindex={0}
+                onClick={this.handleHeadingClick as any}
+                href={this.headingHref}>
+                {this.heading}
+              </a>
+            ) : (
+              <span className="udex-secondary-navigation__title">{this.heading}</span>
+            )}
+          </div>
+        )}
+        <nav className="udex-secondary-navigation__wrap">
+          <ul
+            className="udex-secondary-navigation__list"
+            onKeyDown={this.handleKeyDown}>
+            {this.visibleItems.map((item, index) => (
+              <li className="udex-secondary-navigation__list-item">
+                <UDExSecondaryNavigationItem
+                  index={index}
+                  active={item.active}
+                  path={item.path}
+                  label={item.title}
+                  mobile-link-title={item.mobileLinkTitle}
+                  target={item.target}
+                  subItems={item.items ?? []}
+                  onui5-sub-item-click={this.handleSubItemClick}
+                  onui5-nav-item-click={this.handleItemClick}
+                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                </UDExSecondaryNavigationItem>
+              </li>
+            ))}
+            {this._showMoreButton && (
+              <li className="udex-secondary-navigation__list-item">
+                <UDExSecondaryNavigationItem
+                  index={this.visibleItems.length}
+                  onui5-sub-item-click={this.handleSubItemClick}
+                  onui5-nav-item-click={this.handleItemClick}
+                  label={this.moreButtonText}
+                  subItems={this._overflowItems}
+                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                </UDExSecondaryNavigationItem>
+              </li>
+            )}
+          </ul>
+          {this.hasDesktopButtonsSlot && (
+            <div className="udex-secondary-navigation__buttons">
+              <slot name="buttons"></slot>
+            </div>
+          )}
+        </nav>
+      </div>
+      <UDExSecondaryNavigationItem
+        class="udex-secondary-navigation__mobile-nav"
+        role="button"
+        aria-label={this.mobileMenuOpenerAriaLabel}
+        label={this.heading}
+        mobile-link-title={this.title}
+        onui5-nav-item-click={this.handleMobileMenuOpenerClick}
+        onui5-sub-item-click={this.handleSubItemClick}
+        onKeyDown={this.handleKeyDown}
+        subItems={this.parsedItems}
+        {...{
+          "_is-mobile-menu-opener": "",
+          "_max-height": this.maxDropdownHeight
+        }}>
+        {this.hasMobileButtonsSlot && (
+          <div className="udex-secondary-navigation__buttons" onClick={this.handleMobileButtonsClick}>
+            <slot name="buttons"></slot>
+          </div>
+        )}
+      </UDExSecondaryNavigationItem>
+    </div>
+  );
+}

package/src/SideNavigationMobile.ts

@@ -3,13 +3,9 @@ import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import UDExSideNavigation from "./SideNavigation.js";
-import UDExDropdown from "./Dropdown.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-
-import SideNavigationMobileTemplate from "./generated/templates/SideNavigationMobileTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import SideNavigationMobileTemplate from "./SideNavigationMobileTemplate.js";
+import type UDExDropdown from "./Dropdown.js";
 import type UDExSideNavigationItem from "./SideNavigationItem.js";
 import type UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
 import type UDExSideNavigationGroup from "./SideNavigationGroup.js";
@@ -39,10 +35,9 @@ export type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem |
  */
 @customElement({
   tag: "udex-side-navigation-mobile",
-  renderer: litRender,
+  renderer: jsxRenderer,
   template: SideNavigationMobileTemplate,
   styles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],
-  dependencies: [UDExSideNavigation, UDExDropdown, Icon],
 })
 
 class UDExSideNavigationMobile extends UI5Element {
@@ -86,23 +81,35 @@ class UDExSideNavigationMobile extends UI5Element {
     _selectedItem!: SelectedItem;
 
   _navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;
-  _initialized = false;
   _dropdown!: UDExDropdown;
 
   onBeforeRendering() {
-    if (!this._initialized) {
-      const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("navItems");
-      const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("fixedItems");
-      this._navItems = items.concat(fixedItems);
+    const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("navItems");
+    const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("fixedItems");
+    const allItems = items.concat(fixedItems);
+    if (allItems.length > 0) {
+      this._navItems = allItems;
+    }
+    if (!this._selectedItem && this._navItems?.length) {
       this._selectedItem = this.getSelectedItem() || null;
     }
-    this._initialized = true;
   }
 
   onAfterRendering() {
     this._dropdown = this._getResponsePopover();
   }
 
+  _setNavItems = (sideNavigation: HTMLElement | null) => {
+    if (!sideNavigation) {
+      return;
+    }
+    this._navItems?.forEach(item => {
+      if (item.parentElement !== sideNavigation) {
+        sideNavigation.appendChild(item);
+      }
+    });
+  };
+
   _getResponsePopover(): UDExDropdown {
     return this.shadowRoot!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;
   }
@@ -133,9 +140,9 @@ class UDExSideNavigationMobile extends UI5Element {
 
   getSelectedItem(): UDExSideNavigationItem | UDExSideNavigationSubItem | undefined {
     const items = this._navItems.reduce((result, item) => {
-      return (result).concat(item.allItems as UDExSideNavigationSubItem[]);
+      return (result).concat((item.allItems as UDExSideNavigationSubItem[]) || []);
     }, new Array<UDExSideNavigationItem | UDExSideNavigationSubItem>());
-    return items.find(item => item._selected);
+    return items.find(item => item?._selected);
   }
 }
 

package/src/SideNavigationMobileTemplate.tsx

@@ -0,0 +1,59 @@
+import type UDExSideNavigationMobile from "./SideNavigationMobile.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExDropdown from "./Dropdown.js";
+import UDExSideNavigation from "./SideNavigation.js";
+import { PopoverActualHorizontalAlign, PopoverActualPlacement } from "@ui5/webcomponents/Popover.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+
+export default function SideNavigationMobileTemplate(this: UDExSideNavigationMobile) {
+  return (
+    <>
+      <div
+        id={`udex-${this._id}-side-navigation-mobile__opener`}
+        class="udex-side-navigation-mobile__trigger"
+        aria-haspopup="true"
+        tabindex={0}
+        onKeyDown={this.handleKeydown}
+        onClick={this.handleTriggerClick}
+        accessible-role="button"
+        {...{
+          "active": this._dropdownOpened || undefined,
+        }}>
+        <div class="udex-side-navigation-mobile__selected-item">
+          {this._selectedItem ? (
+            <>
+              {this._selectedItem.icon ? (
+                <Icon
+                  class="udex-side-navigation-mobile__selected-item-icon"
+                  name={this._selectedItem.icon}>
+                </Icon>
+              ) : undefined}
+              <span>{this._selectedItem.text}</span>
+            </>
+          ) : undefined}
+        </div>
+        <Icon
+          class="udex-side-navigation-mobile__trigger-toggle-icon"
+          name={slimArrowDown}>
+        </Icon>
+      </div>
+      <UDExDropdown
+        id={`udex-${this._id}-side-navigation-mobile__popover`}
+        class="udex-side-navigation-mobile__popover"
+        placement={PopoverActualPlacement.Bottom}
+        onOpen={this._afterDropdownOpen}
+        onClose={this._afterDropdownClose}
+        horizontalAlign={PopoverActualHorizontalAlign.Stretch}
+        height="none"
+        {...{
+          "opener": `udex-${this._id}-side-navigation-mobile__opener`,
+          "disable-target-overlap": "true",
+        }}>
+        <UDExSideNavigation
+          ref={this._setNavItems}
+          onSelectionChange={this._handleSelectionChanged as any}>
+        </UDExSideNavigation>
+      </UDExDropdown>
+    </>
+  );
+}

package/src/TabNavigation.ts

@@ -218,6 +218,19 @@ class UDExTabNavigation extends UI5Element {
   @property({ type: String })
     tabWidth: string = "auto";
 
+  /**
+   * Defines the accessible name of the tab list.
+   *
+   * When set, screen readers announce this text as the name of the tab group
+   * (e.g. "Profile navigation") as focus enters the tabs. When empty, the tab
+   * list is exposed by its role only, with no accessible name.
+   *
+   * @public
+   * @default ""
+   */
+  @property()
+    accessibleName: string = "";
+
   /**
    * Defines selected tab.
    *
@@ -1039,6 +1052,10 @@ class UDExTabNavigation extends UI5Element {
     return this.isVertical ? "vertical" : "horizontal";
   }
 
+  get tablistAriaLabel(): string | undefined {
+    return this.accessibleName || undefined;
+  }
+
   get isDesktop(): boolean {
     return isDesktop();
   }

package/src/TabNavigationTemplate.tsx

@@ -27,7 +27,7 @@ export default function TabNavigationTemplate(this: UDExTabNavigation) {
           id={`${this._id}-header-tabs`}
           className="udex-tab-navigation__header-tabs"
           role="tablist"
-          aria-labelledby={`tablist-${this._id}`}
+          aria-label={this.tablistAriaLabel}
           aria-orientation={this.ariaOrientationValue as "horizontal" | "vertical"}
           part="tab-navigation-header-tabs"
           onClick={this.onTabClick}

package/src/TagGroup.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import {
@@ -301,13 +302,23 @@ class UDExTagGroup extends UI5Element {
     this.fireDecoratorEvent("tag-keydown", { originalEvent: e });
   }
 
-  showMoreItems(): void {
+  async showMoreItems(): Promise<void> {
     if (this.fireDecoratorEvent("show-more-tags")) {
       const moreBtn = this._tokenizer.moreLink;
       if (moreBtn) {
         this._tokenizer.expanded = false;
-        this.tooltip.opener = moreBtn;
-        this.tooltip.open = true;
+        // The tooltip is only rendered while `_isHiddenTags` is true (see the
+        // template). Depending on resize timing (changed in @ui5/webcomponents
+        // 2.27) the flag can still be false when the "n more" button is clicked,
+        // so the presence of `moreBtn` is the authoritative signal that there
+        // are hidden tags. Set the flag and wait for the tooltip to render
+        // before opening it, otherwise `this.tooltip` is null.
+        this._isHiddenTags = true;
+        await renderFinished();
+        if (this.tooltip) {
+          this.tooltip.opener = moreBtn;
+          this.tooltip.open = true;
+        }
       }
     }
   }
@@ -333,8 +344,8 @@ class UDExTagGroup extends UI5Element {
     return this.shadowRoot!.querySelector<Tokenizer>(`#${this._id}-tag-group-tokenizer`)!;
   }
 
-  get tooltip(): UDExTooltip {
-    return this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`)!;
+  get tooltip(): UDExTooltip | null {
+    return this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`);
   }
 }