@sapudex/web-components 2.26.0 → 2.27.0

package/cypress/support/component-imports.src.ts

@@ -52,6 +52,8 @@ import UDExSocialMediaButton from "../../src/SocialMediaButton.js";
 import UDExStatusBadge from "../../src/StatusBadge.js";
 import UDExStatusMessage from "../../src/StatusMessage.js";
 import UDExSwitch from "../../src/Switch.js";
+import UDExTab from "../../src/Tab.js";
+import UDExTabNavigation from "../../src/TabNavigation.js";
 import UDExTable from "../../src/Table.js";
 import UDExTableCell from "../../src/TableCell.js";
 import UDExTableGroupRow from "../../src/TableGroupRow.js";
@@ -125,6 +127,8 @@ export {
   UDExStatusBadge,
   UDExStatusMessage,
   UDExSwitch,
+  UDExTab,
+  UDExTabNavigation,
   UDExTable,
   UDExTableCell,
   UDExTableGroupRow,

package/dist/Tab.d.ts

@@ -10,14 +10,18 @@ export interface ITab extends UI5Element {
     selected?: boolean;
     numberBadge?: string;
     text?: string;
+    bodyText?: string;
     showAttentionBadge?: boolean;
     accessibleName?: string;
     href?: string;
     content?: Array<Node>;
+    link?: Array<HTMLElement>;
     hasIcon: boolean;
+    isMobile: boolean;
     isOnSelectedTab: boolean;
     hasNotIcon: boolean;
     hasNotHref: boolean;
+    hasLinkSlot: boolean;
     selectedClass: string;
     tabNavigation: any;
     _individualSlot: string;
@@ -25,6 +29,8 @@ export interface ITab extends UI5Element {
     _slotName: string;
     _selected?: boolean;
     _tabIndex: string;
+    _isMobile: boolean;
+    _isVertical: boolean;
     _iconWithoutBackground: boolean;
     _posinset?: number;
     _setsize?: number;
@@ -65,6 +71,13 @@ declare class UDExTab extends UI5Element implements ITab {
      * @public
      */
     text: string;
+    /**
+     * Defines the body text (supplementary description) of the tab.
+     * Optional text to provide additional context or explanation.
+     *
+     * @public
+     */
+    bodyText?: string;
     /**
      * Accessible name for tab.
      *
@@ -123,6 +136,26 @@ declare class UDExTab extends UI5Element implements ITab {
      * @default false
      */
     _tabIndex: string;
+    /**
+     * Defines if the viewport is mobile size.
+     *
+     * @private
+     * @default false
+     */
+    _isMobile: boolean;
+    /**
+     * Defines if the tab navigation is in vertical orientation.
+     *
+     * @private
+     * @default false
+     */
+    _isVertical: boolean;
+    /**
+     * Defines the width of the tab.
+     *
+     * @private
+     */
+    _width?: string;
     /**
      * Defines the background color of the component.
      *
@@ -137,6 +170,14 @@ declare class UDExTab extends UI5Element implements ITab {
      * @public
      */
     content: Array<Node>;
+    /**
+     * Defines the link(s) to be displayed in the tab header (vertical orientation only).
+     * Use this slot to add one or more udex-link elements to the tab button.
+     *
+     * @slot link
+     * @public
+     */
+    link: Array<HTMLElement>;
     static i18nBundle: I18nBundle;
     getElementInHeader?: () => ITab | null;
     _individualSlot: string;
@@ -146,8 +187,23 @@ declare class UDExTab extends UI5Element implements ITab {
     get hasIcon(): boolean;
     get classWithIcon(): string;
     get buttonClassWithIcon(): string;
+    get isMobile(): boolean;
+    get isMobileVertical(): boolean;
     get hasNotIcon(): boolean;
     get hasNotHref(): boolean;
+    get hasBodyText(): boolean;
+    /**
+     * Returns true if aria-describedby should point to bodyText.
+     * Only applies to selected tabs with bodyText in vertical orientation.
+     */
+    get ariaDescribedByBodyText(): boolean;
+    get hasLinkSlot(): boolean;
+    /**
+     * Returns the HTML content of the link slot elements.
+     * This is used to render the links in the TabHeader template.
+     */
+    get linkSlotHtml(): string;
+    get hasBodyTextOrLink(): boolean;
     get effectiveSelected(): boolean;
     get selectedClass(): string;
     get classWithIconWithoutBackground(): string;
@@ -155,6 +211,7 @@ declare class UDExTab extends UI5Element implements ITab {
     get ariaLabelledBy(): string;
     get accessibleNameText(): string;
     get linkTabIndex(): string;
+    get widthStyle(): string;
     get tabNavigation(): object;
     get tabInOverflow(): object;
     static get headerTemplate(): typeof TabHeaderTemplate;

package/dist/Tab.js

@@ -50,6 +50,20 @@ let UDExTab = UDExTab_1 = class UDExTab extends UI5Element {
          * @public
          */
         this.target = UDExTarget._self;
+        /**
+         * Defines if the viewport is mobile size.
+         *
+         * @private
+         * @default false
+         */
+        this._isMobile = false;
+        /**
+         * Defines if the tab navigation is in vertical orientation.
+         *
+         * @private
+         * @default false
+         */
+        this._isVertical = false;
     }
     getTabInHeaderDomRef() {
         if (this.getElementInHeader) {
@@ -72,12 +86,44 @@ let UDExTab = UDExTab_1 = class UDExTab extends UI5Element {
     get buttonClassWithIcon() {
         return this.hasIcon ? " udex-tab-navigation__button-tab--icon" : "";
     }
+    get isMobile() {
+        return this._isMobile;
+    }
+    get isMobileVertical() {
+        return this._isMobile && this._isVertical;
+    }
     get hasNotIcon() {
         return !this.icon && this.showAttentionBadge;
     }
     get hasNotHref() {
         return !this.href;
     }
+    get hasBodyText() {
+        return !!this.bodyText;
+    }
+    /**
+     * Returns true if aria-describedby should point to bodyText.
+     * Only applies to selected tabs with bodyText in vertical orientation.
+     */
+    get ariaDescribedByBodyText() {
+        return this.effectiveSelected && this.hasBodyText && this._isVertical;
+    }
+    get hasLinkSlot() {
+        return this.link && this.link.length > 0;
+    }
+    /**
+     * Returns the HTML content of the link slot elements.
+     * This is used to render the links in the TabHeader template.
+     */
+    get linkSlotHtml() {
+        if (!this.link || this.link.length === 0) {
+            return "";
+        }
+        return this.link.map(l => l.outerHTML).join("");
+    }
+    get hasBodyTextOrLink() {
+        return this._isVertical && (this.hasBodyText || this.hasLinkSlot);
+    }
     get effectiveSelected() {
         return this.selected || this._selected;
     }
@@ -106,6 +152,12 @@ let UDExTab = UDExTab_1 = class UDExTab extends UI5Element {
     get linkTabIndex() {
         return this.href && this.effectiveSelected ? "1" : "-1";
     }
+    get widthStyle() {
+        if (this._width && this._width !== "auto") {
+            return `width: ${this._width};`;
+        }
+        return "";
+    }
     get tabNavigation() {
         return executeTemplate(UDExTab_1.headerTemplate, this);
     }
@@ -125,6 +177,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UDExTab.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], UDExTab.prototype, "bodyText", void 0);
 __decorate([
     property({ type: String })
 ], UDExTab.prototype, "accessibleName", void 0);
@@ -152,12 +207,24 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UDExTab.prototype, "_tabIndex", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExTab.prototype, "_isMobile", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExTab.prototype, "_isVertical", void 0);
+__decorate([
+    property({ type: String, noAttribute: true })
+], UDExTab.prototype, "_width", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExTab.prototype, "_iconWithoutBackground", void 0);
 __decorate([
     slot({ type: Node, "default": true })
 ], UDExTab.prototype, "content", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExTab.prototype, "link", void 0);
 __decorate([
     i18n("@sapudex/web-components")
 ], UDExTab, "i18nBundle", void 0);

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 TabNavigation from \"./TabNavigation.js\";\nimport UDExBadge from \"./Badge.js\";\nimport { UDExTarget } from \"./types/common.js\";\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 i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ATTENTION_BADGE } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport TabInOverflowCss from \"./generated/themes/TabInOverflow.css.js\";\nimport translate from \"./utils/translate.js\";\n\nexport interface 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  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 \"@sapudex/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()\n    target: `${UDExTarget}` = UDExTarget._self;\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  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\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  get isOnSelectedTab(): boolean {\n    return this._realTab === this;\n  }\n\n  get _effectiveSlotName(): string {\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 effectiveSelected(): boolean {\n    return this.selected || this._selected;\n  }\n\n  get selectedClass(): string {\n    return this.effectiveSelected ? \"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 _slotName(): string {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get ariaLabelledBy(): string {\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(): string {\n    return this.accessibleName || (this.showAttentionBadge ? `, ${translate(UDExTab, ATTENTION_BADGE)}` : \"\");\n  }\n\n  get linkTabIndex(): string {\n    return this.href && this.effectiveSelected ? \"1\" : \"-1\";\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  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;\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 TabNavigation from \"./TabNavigation.js\";\nimport UDExBadge from \"./Badge.js\";\nimport { UDExTarget } from \"./types/common.js\";\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 i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ATTENTION_BADGE } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport TabInOverflowCss from \"./generated/themes/TabInOverflow.css.js\";\nimport translate from \"./utils/translate.js\";\n\nexport interface ITab extends UI5Element {\n  getTabInHeaderDomRef: () => ITab | null;\n  disabled?: boolean;\n  icon?: string;\n  selected?: boolean;\n  numberBadge?: string;\n  text?: string;\n  bodyText?: string;\n  showAttentionBadge?: boolean;\n  accessibleName?: string;\n  href?: string;\n  content?: Array<Node>;\n  link?: Array<HTMLElement>;\n  hasIcon: boolean;\n  isMobile: boolean;\n  isOnSelectedTab: boolean;\n  hasNotIcon: boolean;\n  hasNotHref: boolean;\n  hasLinkSlot: boolean;\n  selectedClass: string;\n  tabNavigation: any;\n  _individualSlot: string;\n  _effectiveSlotName: string;\n  _slotName: string;\n  _selected?: boolean;\n  _tabIndex: string;\n  _isMobile: boolean;\n  _isVertical: boolean;\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 \"@sapudex/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  /**\n   * Defines the body text (supplementary description) of the tab.\n   * Optional text to provide additional context or explanation.\n   *\n   * @public\n   */\n  @property({ type: String })\n    bodyText?: string;\n\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()\n    target: `${UDExTarget}` = UDExTarget._self;\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 if the viewport is mobile size.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isMobile: boolean = false;\n\n  /**\n   * Defines if the tab navigation is in vertical orientation.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isVertical: boolean = false;\n\n  /**\n   * Defines the width of the tab.\n   *\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    _width?: 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  /**\n   * Defines the link(s) to be displayed in the tab header (vertical orientation only).\n   * Use this slot to add one or more udex-link elements to the tab button.\n   *\n   * @slot link\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    link!: Array<HTMLElement>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\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  get isOnSelectedTab(): boolean {\n    return this._realTab === this;\n  }\n\n  get _effectiveSlotName(): string {\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 isMobile(): boolean {\n    return this._isMobile;\n  }\n\n  get isMobileVertical(): boolean {\n    return this._isMobile && this._isVertical;\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 hasBodyText(): boolean {\n    return !!this.bodyText;\n  }\n\n  /**\n   * Returns true if aria-describedby should point to bodyText.\n   * Only applies to selected tabs with bodyText in vertical orientation.\n   */\n  get ariaDescribedByBodyText(): boolean {\n    return this.effectiveSelected && this.hasBodyText && this._isVertical;\n  }\n\n  get hasLinkSlot(): boolean {\n    return this.link && this.link.length > 0;\n  }\n\n  /**\n   * Returns the HTML content of the link slot elements.\n   * This is used to render the links in the TabHeader template.\n   */\n  get linkSlotHtml(): string {\n    if (!this.link || this.link.length === 0) {\n      return \"\";\n    }\n    return this.link.map(l => l.outerHTML).join(\"\");\n  }\n\n  get hasBodyTextOrLink(): boolean {\n    return this._isVertical && (this.hasBodyText || this.hasLinkSlot);\n  }\n\n  get effectiveSelected(): boolean {\n    return this.selected || this._selected;\n  }\n\n  get selectedClass(): string {\n    return this.effectiveSelected ? \"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 _slotName(): string {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get ariaLabelledBy(): string {\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(): string {\n    return this.accessibleName || (this.showAttentionBadge ? `, ${translate(UDExTab, ATTENTION_BADGE)}` : \"\");\n  }\n\n  get linkTabIndex(): string {\n    return this.href && this.effectiveSelected ? \"1\" : \"-1\";\n  }\n\n  get widthStyle(): string {\n    if (this._width && this._width !== \"auto\") {\n      return `width: ${this._width};`;\n    }\n    return \"\";\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  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;\n"]}

package/dist/TabNavigation.d.ts

@@ -5,6 +5,7 @@ import type { ITab } from "./Tab.js";
 import type Tab from "./Tab.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import TabNavigationPopoverTemplate from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
 export declare enum UDExSizeMoreButton {
     Small = "Small",
@@ -14,6 +15,10 @@ export declare enum Mode {
     Light = "Light",
     Dark = "Dark"
 }
+export declare enum UDExTabNavigationOrientation {
+    Horizontal = "Horizontal",
+    Vertical = "Vertical"
+}
 type UDExTabNavigationClickDetail = {
     currentPage: number;
 };
@@ -58,6 +63,13 @@ declare class UDExTabNavigation extends UI5Element {
      * @default "Light"
      */
     mode: `${Mode}`;
+    /**
+     * Defines the orientation of the tab navigation.
+     *
+     * @public
+     * @default "Horizontal"
+     */
+    orientation: `${UDExTabNavigationOrientation}`;
     /**
      * Defines the background color of the component.
      *
@@ -93,6 +105,7 @@ declare class UDExTabNavigation extends UI5Element {
     items: Array<ITab>;
     static i18nBundle: I18nBundle;
     _handleResizeBound: () => void;
+    _handleWindowResizeBound: () => void;
     _popover?: Popover;
     _visibleTabs?: Array<ITab | HTMLElement>;
     _isExpanded: boolean;
@@ -102,6 +115,7 @@ declare class UDExTabNavigation extends UI5Element {
     onAfterRendering(): void;
     onEnterDOM(): void;
     onExitDOM(): void;
+    _handleWindowResize(): void;
     _handleResize(): void;
     emitClickEvent(pageIndex: number): void;
     onBeforeRendering(): void;
@@ -150,11 +164,13 @@ declare class UDExTabNavigation extends UI5Element {
     handleClosePopover(): 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;
+    handleRightArrow(e: KeyboardEvent): void;
+    handleUpArrow(e: KeyboardEvent): void;
+    handleDownArrow(e: KeyboardEvent): void;
+    onFocusPreviousItem(target: HTMLElement): void;
+    onFocusNextItem(target: HTMLElement): void;
     handleHomeKey(e: KeyboardEvent): void;
     handleEndKey(e: KeyboardEvent): void;
     onEndKey(): void;
@@ -177,10 +193,16 @@ declare class UDExTabNavigation extends UI5Element {
     handleHome(e: KeyboardEvent): void;
     handleEnd(e: KeyboardEvent): void;
     getResponsePopover(): Popover;
+    get isHorizontal(): boolean;
+    get isVertical(): boolean;
+    get ariaOrientationValue(): string;
+    get isDesktop(): boolean;
     get moreButtonText(): string;
     static registerStaticAreaTabStyles(styles: StyleData): void;
     static get tabNavigationPopoverTemplate(): typeof TabNavigationPopoverTemplate;
     get tabNavigationPopover(): object;
+    applyTabWidthToVerticalTabs(): void;
+    updateMobileState(): void;
 }
 export default UDExTabNavigation;
 export type { UDExTabNavigationClickDetail, UDExTabContainerTabSelectEventDetail };

package/dist/TabNavigation.js

@@ -20,6 +20,9 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import UDExButton from "./Button.js";
 // Templates
 import TabNavigationTemplate from "./generated/templates/TabNavigationTemplate.lit.js";
 import TabNavigationPopoverTemplate from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
@@ -38,6 +41,11 @@ export var Mode;
     Mode["Light"] = "Light";
     Mode["Dark"] = "Dark";
 })(Mode || (Mode = {}));
+export var UDExTabNavigationOrientation;
+(function (UDExTabNavigationOrientation) {
+    UDExTabNavigationOrientation["Horizontal"] = "Horizontal";
+    UDExTabNavigationOrientation["Vertical"] = "Vertical";
+})(UDExTabNavigationOrientation || (UDExTabNavigationOrientation = {}));
 /**
  * @class
  *
@@ -73,11 +81,19 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
          * @default "Light"
          */
         this.mode = Mode.Light;
+        /**
+         * Defines the orientation of the tab navigation.
+         *
+         * @public
+         * @default "Horizontal"
+         */
+        this.orientation = UDExTabNavigationOrientation.Horizontal;
         this.tabWidth = "auto";
         this._isExpanded = false;
         this._maxTitleLength = 25;
         this._maxTitleLengthInSecondLines = this._maxTitleLength * 2;
         this._handleResizeBound = this._handleResize.bind(this);
+        this._handleWindowResizeBound = this._handleWindowResize.bind(this);
     }
     onAfterRendering() {
         if (this.items.length) {
@@ -89,19 +105,26 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
             console.warn("You have to add the 'udex-tab' as a default slot to the udex-tab-navigation.");
         }
         this.initOutsideClick();
+        this.applyTabWidthToVerticalTabs();
     }
     onEnterDOM() {
         ResizeHandler.register(this.getHeader(), this._handleResizeBound);
+        window.addEventListener("resize", this._handleWindowResizeBound);
         if (isDesktop()) {
             this.setAttribute("desktop", "");
         }
     }
     onExitDOM() {
         ResizeHandler.deregister(this.getHeader(), this._handleResizeBound);
+        window.removeEventListener("resize", this._handleWindowResizeBound);
+    }
+    _handleWindowResize() {
+        this.updateMobileState();
     }
     _handleResize() {
         this.handleClosePopover();
         this._width = this.offsetWidth;
+        this.updateMobileState();
     }
     emitClickEvent(pageIndex) {
         this.fireDecoratorEvent("click", { currentPage: pageIndex });
@@ -109,6 +132,7 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     onBeforeRendering() {
         this.updateOverflowItems();
         this.setSelectedTab();
+        this.updateMobileState();
     }
     setSelectedTab() {
         if (!this.items.length) {
@@ -130,6 +154,7 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
         this._selectedTab._selected = Boolean(selectedTabs.length ? selectedTabs.length : this.items[0]);
     }
     setRealTabToItems() {
+        const isMobile = BreakpointUtils.isAtMost("S");
         this.items.forEach((tab, index, arr) => {
             tab._iconWithoutBackground = this.iconWithoutBackground;
             tab._posinset = index + 1;
@@ -137,6 +162,8 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
             tab._contentId = this.getContentId(index);
             tab._realTab = this._selectedTab;
             tab._width = this.tabWidth;
+            tab._isMobile = isMobile;
+            tab._isVertical = this.isVertical;
         });
     }
     getContentId(index) {
@@ -187,7 +214,7 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     }
     getTab(el) {
         while (el) {
-            if (el.localName === "button" && el.getAttribute("role") === "tab") {
+            if (el.getAttribute("role") === "tab") {
                 return el;
             }
             el = el.parentElement;
@@ -205,12 +232,16 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
         this.fireDecoratorEvent("tab-select", { tab: this._selectedTab, tabIndex: selectedTabIndex });
     }
     setItemsInHeader() {
+        const itemsDomRefs = this.items.map(item => item.getTabInHeaderDomRef());
+        // Skip overflow logic for vertical tabs - show all tabs
+        if (this.isVertical) {
+            return;
+        }
         const tabHeader = this.getTabHeader();
         let allItemsWidth = 0;
         if (!this._selectedTab) {
             return;
         }
-        const itemsDomRefs = this.items.map(item => item.getTabInHeaderDomRef());
         this.getMoreButton()?.setAttribute("hidden", "");
         this.removeHiddenAttributeInAllTabs(itemsDomRefs);
         allItemsWidth += this.getTotalItemsWidth(itemsDomRefs);
@@ -430,40 +461,61 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
         }
     }
     handleKeyDown(e) {
-        this.handleRightArrow(e);
-        this.handleLeftArrow(e);
+        if (this.isHorizontal) {
+            this.handleRightArrow(e);
+            this.handleLeftArrow(e);
+        }
+        else {
+            this.handleDownArrow(e);
+            this.handleUpArrow(e);
+        }
         this.handleHomeKey(e);
         this.handleEndKey(e);
     }
+    getTabIndexById(id) {
+        return this._visibleTabs.findIndex(tab => tab.id === id);
+    }
+    handleLeftArrow(e) {
+        if (isLeft(e)) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.onFocusPreviousItem(e.target);
+        }
+    }
     handleRightArrow(e) {
         if (isRight(e)) {
             e.preventDefault();
             e.stopPropagation();
-            this.onFocusRightItem(e.target);
+            // For horizontal tabs, right arrow always moves focus to the next tab
+            this.onFocusNextItem(e.target);
         }
     }
-    onFocusRightItem(target) {
-        const previousSelectedIndex = this.getTabIndexById(target.id);
-        const lastIndex = this._visibleTabs.length;
-        const nextSelectIndex = previousSelectedIndex + 1 < lastIndex ? previousSelectedIndex + 1 : 0;
-        this._visibleTabs[nextSelectIndex].focus();
-    }
-    getTabIndexById(id) {
-        return this._visibleTabs.findIndex(tab => tab.id === id);
+    handleUpArrow(e) {
+        if (isUp(e)) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.onFocusPreviousItem(e.target);
+        }
     }
-    handleLeftArrow(e) {
-        if (isLeft(e)) {
+    handleDownArrow(e) {
+        if (isDown(e)) {
             e.preventDefault();
             e.stopPropagation();
-            this.onFocusLeftItem(e.target);
+            this.onFocusNextItem(e.target);
         }
     }
-    onFocusLeftItem(target) {
+    onFocusPreviousItem(target) {
         const previousSelectedIndex = this.getTabIndexById(target.id);
         const lastIndex = this._visibleTabs.length - 1;
         const previousSelectIndex = previousSelectedIndex - 1 < 0 ? lastIndex : previousSelectedIndex - 1;
         this._visibleTabs[previousSelectIndex].focus();
     }
+    onFocusNextItem(target) {
+        const previousSelectedIndex = this.getTabIndexById(target.id);
+        const lastIndex = this._visibleTabs.length;
+        const nextSelectIndex = previousSelectedIndex + 1 < lastIndex ? previousSelectedIndex + 1 : 0;
+        this._visibleTabs[nextSelectIndex].focus();
+    }
     handleHomeKey(e) {
         if (isHome(e)) {
             e.preventDefault();
@@ -606,6 +658,18 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     getResponsePopover() {
         return this.shadowRoot.querySelector("[ui5-popover]");
     }
+    get isHorizontal() {
+        return this.orientation === UDExTabNavigationOrientation.Horizontal;
+    }
+    get isVertical() {
+        return this.orientation === UDExTabNavigationOrientation.Vertical;
+    }
+    get ariaOrientationValue() {
+        return this.isVertical ? "vertical" : "horizontal";
+    }
+    get isDesktop() {
+        return isDesktop();
+    }
     get moreButtonText() {
         return translate(UDExTabNavigation_1, MORE);
     }
@@ -618,6 +682,17 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     get tabNavigationPopover() {
         return executeTemplate(UDExTabNavigation_1.tabNavigationPopoverTemplate, this);
     }
+    applyTabWidthToVerticalTabs() {
+        if (this.isVertical && this.tabWidth && this.tabWidth !== "auto") {
+            this.style.setProperty("--udex-tab-header-width", this.tabWidth);
+        }
+    }
+    updateMobileState() {
+        const isMobile = BreakpointUtils.isAtMost("S");
+        this.items.forEach(tab => {
+            tab._isMobile = isMobile;
+        });
+    }
 };
 __decorate([
     property()
@@ -625,6 +700,9 @@ __decorate([
 __decorate([
     property()
 ], UDExTabNavigation.prototype, "mode", void 0);
+__decorate([
+    property()
+], UDExTabNavigation.prototype, "orientation", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExTabNavigation.prototype, "iconWithoutBackground", void 0);
@@ -657,7 +735,7 @@ UDExTabNavigation = UDExTabNavigation_1 = __decorate([
         renderer: litRender,
         styles: [TabNavigationCss, TabInOverflowCss],
         template: TabNavigationTemplate,
-        dependencies: [Popover, Icon],
+        dependencies: [Popover, Icon, UDExButton],
     })
     /**
      * Fires when the tab was clicked.