@sapudex/web-components 2.60.0 → 2.61.0

package/src/Carousel.ts

@@ -219,6 +219,7 @@ class UDExCarousel extends UI5Element {
   _autoplayMinTimeBetweenToggle = 250;
   _autoplayManualStop = false;
   _resizeHandler: ResizeObserverCallback;
+  _resizeRafHandle: number | null = null;
 
   constructor() {
     super();
@@ -238,6 +239,11 @@ class UDExCarousel extends UI5Element {
   onExitDOM(): void {
     ResizeHandler.deregister(this, this._resizeHandler);
 
+    if (this._resizeRafHandle !== null) {
+      cancelAnimationFrame(this._resizeRafHandle);
+      this._resizeRafHandle = null;
+    }
+
     if (this._autoplayInterval) {
       clearInterval(this._autoplayInterval);
     }
@@ -248,7 +254,17 @@ class UDExCarousel extends UI5Element {
   }
 
   _onResize(): void {
-    this._hasManyPages = this._carousel?.hasManyPages ?? false;
+    if (this._resizeRafHandle !== null) {
+      cancelAnimationFrame(this._resizeRafHandle);
+    }
+    // Defer until after the inner UI5 carousel has processed its own resize
+    // (outer element's ResizeObserver fires before inner element's, so the inner
+    // carousel's effectiveItemsPerPage and _currentPageIndex are still stale here)
+    this._resizeRafHandle = requestAnimationFrame(() => {
+      this._resizeRafHandle = null;
+      this._hasManyPages = this._carousel?.hasManyPages ?? false;
+      this._calculateDisabledButtonsState();
+    });
   }
 
   _autoplayLoop = () => {

package/src/Pagination.ts

@@ -18,6 +18,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import translate from "./utils/translate.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 // Template
 import PaginationTemplate from "./PaginationTemplate.js";
@@ -149,8 +150,6 @@ class UDExPagination extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static readonly AUTO_DISPLAY_BREAKPOINT = 980;
-
   _pages: Page[];
   _visiblePages: Page[];
 
@@ -200,7 +199,7 @@ class UDExPagination extends UI5Element {
   }
 
   get _displayType(): `${UDExDisplayType}` {
-    return window.innerWidth > UDExPagination.AUTO_DISPLAY_BREAKPOINT
+    return BreakpointUtils.isAbove("M")
       ? UDExDisplayType.desktop
       : UDExDisplayType.mobile;
   }

package/src/SearchableListBaseTemplate.tsx

@@ -179,7 +179,6 @@ function renderListItem(
   const effectiveRole = accessibleRole ?? (role !== "none" ? role : undefined) ?? "option";
   const hostRole = activeDescendantMode ? (effectiveRole as AriaRole) : (role as AriaRole);
   const hostAriaAttrs = activeDescendantMode ? {
-    "aria-label": "test",
     // option role (listbox): always aria-selected; treeitem + MultiSelect: aria-checked only
     "aria-selected": (effectiveRole !== "treeitem" || !modeMultiSelect) ? (item.selected ? "true" : "false") as string : undefined,
     "aria-checked": (effectiveRole === "treeitem" && !!modeMultiSelect) ? (item.indeterminate ? "mixed" : (item.selected ? "true" : "false")) as string : undefined,

package/src/SecondaryNavigation.ts

@@ -21,6 +21,7 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import translate from "./utils/translate.js";
+import type { RelativeValue } from "./utils/parseRelativeUnits.js";
 
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
@@ -180,7 +181,7 @@ class UDExSecondaryNavigation extends UI5Element {
    * @public
    */
   @property({ type: String })
-    maxDropdownHeight!: string;
+    maxDropdownHeight!: RelativeValue;
 
   @property({ type: Boolean, noAttribute: true })
     _selectedMore!: boolean;

package/src/SecondaryNavigationItem.ts

@@ -32,6 +32,11 @@ type UDExSecondaryNavigationItemSubItemClickEventDetail = {
   originalEvent: PointerEvent | KeyboardEvent
 }
 
+const DROPDOWN_MAX_HEIGHT_VAR = {
+  desktop: "--udex-secondary-navigation-item-dropdown-desktop-max-height",
+  mobile: "--udex-secondary-navigation-item-dropdown-mobile-max-height",
+} as const;
+
 /**
  * @class
  *
@@ -394,24 +399,27 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   setDesktopDropdownMaxHeight(): void {
     const { top } = this.dropdown.getBoundingClientRect();
     const maxHeight = window.innerHeight - top - DESKTOP_DROPDOWN_BOTTOM_GAP;
-    this.style.setProperty("--udex-secondary-navigation-item-dropdown-desktop-max-height", `${maxHeight}px`);
+    this.style.setProperty(DROPDOWN_MAX_HEIGHT_VAR.desktop, `${maxHeight}px`);
   }
 
   setMobileDropdownMaxHeight(): void {
     if (!this._maxHeight || this._dropdownMaxHeightExceeds || !this.heightSatisfiesType) {
-      const secondaryNavigationMobileTrigger = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!;
-      const maxDropdownHeight = window.innerHeight - secondaryNavigationMobileTrigger.clientHeight;
-      this.style.setProperty("--udex-secondary-navigation-item-dropdown-mobile-max-height", `${maxDropdownHeight}px`);
+      const { clientHeight } = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!;
+      const { top } = this.getBoundingClientRect();
+      const maxDropdownHeight = window.innerHeight - top - clientHeight;
+
+      this.style.setProperty(DROPDOWN_MAX_HEIGHT_VAR.mobile, `${maxDropdownHeight}px`);
       return;
     }
 
-    this.style.setProperty("--udex-secondary-navigation-item-dropdown-mobile-max-height", `${this._maxHeight}`);
+    this.style.setProperty(DROPDOWN_MAX_HEIGHT_VAR.mobile, `${this._maxHeight}`);
   }
 
   get _dropdownMaxHeightExceeds(): boolean {
     const normalizedHeight = parseRelativeUnits(this._maxHeight, this.dropdown);
+    const { top } = this.getBoundingClientRect();
     const secondaryNavigationMobileTriggerHeight = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!.clientHeight;
-    return normalizedHeight >= window.innerHeight - secondaryNavigationMobileTriggerHeight;
+    return normalizedHeight >= window.innerHeight - top - secondaryNavigationMobileTriggerHeight;
   }
 
   get heightSatisfiesType(): boolean {

package/src/SecondaryNavigationTemplate.tsx

@@ -41,7 +41,7 @@ export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigatio
                   subItems={item.items ?? []}
                   onui5-sub-item-click={this.handleSubItemClick}
                   onui5-nav-item-click={this.handleItemClick}
-                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                  _navItemsLength={this.visibleItems.length}>
                 </UDExSecondaryNavigationItem>
               </li>
             ))}
@@ -53,7 +53,7 @@ export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigatio
                   onui5-nav-item-click={this.handleItemClick}
                   label={this.moreButtonText}
                   subItems={this._overflowItems}
-                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                  _navItemsLength={this.visibleItems.length}>
                 </UDExSecondaryNavigationItem>
               </li>
             )}
@@ -75,10 +75,8 @@ export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigatio
         onui5-sub-item-click={this.handleSubItemClick}
         onKeyDown={this.handleKeyDown}
         subItems={this.parsedItems}
-        {...{
-          "_is-mobile-menu-opener": "",
-          "_max-height": this.maxDropdownHeight
-        }}>
+        _maxHeight={this.maxDropdownHeight}
+        _is-mobile-menu-opener={true}>
         {this.hasMobileButtonsSlot && (
           <div className="udex-secondary-navigation__buttons" onClick={this.handleMobileButtonsClick}>
             <slot name="buttons"></slot>

package/src/SelectBase.ts

@@ -720,7 +720,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     }
 
     // Sync _selectedOption display for the first item (used when popover just opened via click).
-    if (!this._activeDescendantItem && hasItems) {
+    if (popoverOpened && !this._activeDescendantItem && hasItems) {
       this._selectedOption = items[firstIndex].label;
     }
   }

package/src/SideNavigation.ts

@@ -6,6 +6,16 @@ import SideNavigation from "@ui5/webcomponents-fiori/dist/SideNavigation.js";
 // Styles
 import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
 
+export enum UDExSideNavigationVariant {
+  Full = "Full",
+  Content = "Content",
+}
+
+export enum UDExSideNavigationPlacement {
+  Left = "Left",
+  Right = "Right",
+}
+
 /**
  * @class
  *
@@ -38,6 +48,31 @@ class UDExSideNavigation extends SideNavigation {
    */
   @property({ type: Boolean })
     isFixedInPlace!: boolean;
+
+  /**
+   * Defines the variant of the component.
+   *
+   * @default "Full"
+   * @public
+   */
+  @property()
+    variant: `${UDExSideNavigationVariant}` = UDExSideNavigationVariant.Full;
+
+  /**
+   * Defines which side the navigation panel is on.
+   *
+   * @default "Left"
+   * @public
+   */
+  @property()
+    placement: `${UDExSideNavigationPlacement}` = UDExSideNavigationPlacement.Left;
+
+  onBeforeRendering() {
+    super.onBeforeRendering();
+    this.querySelectorAll("[udex-side-navigation-item], [udex-side-navigation-sub-item]").forEach(item => {
+      item.setAttribute("variant", this.variant);
+    });
+  }
 }
 
 UDExSideNavigation.define();

package/src/SideNavigationItem.ts

@@ -1,6 +1,9 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import SideNavigationItem from "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
+import type SideNavigationItemBase from "@ui5/webcomponents-fiori/dist/SideNavigationItemBase.js";
+import type SideNavigationSelectableItemBase from "@ui5/webcomponents-fiori/dist/SideNavigationSelectableItemBase.js";
+import type UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
 
 // Styles
 import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
@@ -30,6 +33,78 @@ import { isDesktop } from "@ui5/webcomponents-base";
 })
 
 class UDExSideNavigationItem extends SideNavigationItem {
+  get _selected() {
+    if (this.sideNavCollapsed) {
+      return this.selected || this.items.some(item => item.selected);
+    }
+    return this.selected;
+  }
+
+  get focusableItems(): Array<SideNavigationItemBase> {
+    // Recurse one level into expanded level-2 sub-items so their level-3 children join
+    // the Side Navigation's keyboard focus set (UI5's base getter is flat). Only one level
+    // of recursion is needed because the component supports at most three nesting levels.
+    if (!this.sideNavCollapsed && this.expanded) {
+      return [this, ...this.items.reduce((result, item) => {
+        return result.concat((item as UDExSideNavigationSubItem).focusableItems || [item]);
+      }, new Array<SideNavigationItemBase>())];
+    }
+    return super.focusableItems;
+  }
+
+  get selectableItems(): Array<SideNavigationSelectableItemBase> {
+    // Recurse one level into level-2 sub-items so their level-3 children are part of the
+    // Side Navigation's selection registry (UI5's base getter is flat). Without this the
+    // selection sweep in SideNavigation._selectItem never reaches level 3, so selecting a
+    // level-3 item would not deselect items at other levels, and vice versa.
+    return this.items.reduce((result, item) => {
+      return result.concat((item as UDExSideNavigationSubItem).selectableItems || [item]);
+    }, new Array<SideNavigationSelectableItemBase>(this));
+  }
+
+  get allItems(): Array<SideNavigationItemBase> {
+    // Recurse one level into level-2 sub-items so level-3 children are enumerated by
+    // SideNavigation._getAllItems. That loop wires `sideNavigation` (and collapsed state)
+    // onto every item; without this, level-3 items never get `sideNavigation` set and
+    // their click handler cannot reach SideNavigation._handleItemClick to fire selection-change.
+    return this.items.reduce((result, item) => {
+      return result.concat((item as UDExSideNavigationSubItem).allItems || [item]);
+    }, new Array<SideNavigationItemBase>(this));
+  }
+
+  _initialExpandDone = false;
+
+  onBeforeRendering() {
+    super.onBeforeRendering();
+    // Open the group once on initial render if it contains a selected child, so the
+    // selection is visible. Do not re-apply on later renders — that would prevent the
+    // user from collapsing a group while one of its children stays selected.
+    if (!this._initialExpandDone) {
+      this._initialExpandDone = true;
+      if (!this.sideNavCollapsed && !this.expanded && this.items.some(item => item.selected)) {
+        this.expanded = true;
+      }
+    }
+  }
+
+  _onclick(e: MouseEvent) {
+    // A grouping item (one with sub-items) toggles expand/collapse on click and
+    // never navigates — a parent with children must not have an href. Only leaf
+    // items navigate, so they fall through to the base handler.
+    if (this.hasSubItems && !this.sideNavCollapsed) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.expanded = !this.expanded;
+      return;
+    }
+    super._onclick(e);
+  }
+
+  _onToggleClick(e: CustomEvent) {
+    e.preventDefault();
+    super._onToggleClick(e);
+  }
+
   onEnterDOM() {
     this.setAttribute("id", this._id);
 

package/src/SideNavigationMobileTemplate.tsx

@@ -51,7 +51,8 @@ export default function SideNavigationMobileTemplate(this: UDExSideNavigationMob
         }}>
         <UDExSideNavigation
           ref={this._setNavItems}
-          onSelectionChange={this._handleSelectionChanged as any}>
+          onSelectionChange={this._handleSelectionChanged as any}
+          {...{ "in-mobile": "" }}>
         </UDExSideNavigation>
       </UDExDropdown>
     </>

package/src/SideNavigationSubItem.ts

@@ -1,6 +1,16 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import {
+  isLeft,
+  isRight,
+  isMinus,
+  isPlus,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
+import SideNavigationSubItemTemplate from "./SideNavigationSubItemTemplate.js";
 
 // Styles
 import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.css.js";
@@ -25,10 +35,116 @@ import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.c
 @customElement({
   tag: "udex-side-navigation-sub-item",
   renderer: jsxRenderer,
+  template: SideNavigationSubItemTemplate,
   styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],
+  dependencies: [UDExSideNavigationSubItem],
 })
 
-class UDExSideNavigationSubItem extends SideNavigationSubItem {}
+class UDExSideNavigationSubItem extends SideNavigationSubItem {
+  /**
+   * Defines whether the sub-item is expanded (shows level-3 children).
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    expanded = false;
+
+  /**
+   * Defines the level-3 sub-items slotted inside this sub-item.
+   * @public
+   */
+  @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
+    subItems!: DefaultSlot<UDExSideNavigationSubItem>;
+
+  get hasSubItems() {
+    return this.subItems.length > 0;
+  }
+
+  get focusableItems(): Array<UDExSideNavigationSubItem> {
+    if (this.hasSubItems && this.expanded) {
+      return [this, ...this.subItems];
+    }
+    return [this];
+  }
+
+  get selectableItems(): Array<UDExSideNavigationSubItem> {
+    // Expose this level-2 sub-item plus its level-3 children so the Side Navigation's
+    // selection registry (built by UDExSideNavigationItem.selectableItems) reaches level 3.
+    return this.hasSubItems ? [this, ...this.subItems] : [this];
+  }
+
+  get allItems(): Array<UDExSideNavigationSubItem> {
+    // Expose this sub-item plus its level-3 children so SideNavigation._getAllItems wires
+    // `sideNavigation` and collapsed state onto level-3 items. Without it, a level-3 leaf's
+    // click handler has no `sideNavigation` reference and cannot fire selection-change.
+    return this.hasSubItems ? [this, ...this.subItems] : [this];
+  }
+
+  onBeforeRendering() {
+    super.onBeforeRendering();
+    this.subItems.forEach(subItem => {
+      if (!subItem.hasAttribute("nested")) { subItem.setAttribute("nested", ""); }
+    });
+  }
+
+  get _subGroupId(): string | undefined {
+    return this.hasSubItems ? `${this._id}-group` : undefined;
+  }
+
+  get _subExpanded(): boolean | undefined {
+    return this.hasSubItems ? this.expanded : undefined;
+  }
+
+  _onToggleClick(e: Event) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.expanded = !this.expanded;
+  }
+
+  _onkeydown(e: KeyboardEvent) {
+    if (this.hasSubItems && !this.sideNavCollapsed) {
+      const isRTL = this.effectiveDir === "rtl";
+      if (isLeft(e)) {
+        e.preventDefault();
+        this.expanded = isRTL;
+        return;
+      }
+      if (isRight(e)) {
+        e.preventDefault();
+        this.expanded = !isRTL;
+        return;
+      }
+      if (isMinus(e)) {
+        e.preventDefault();
+        this.expanded = false;
+        return;
+      }
+      if (isPlus(e)) {
+        e.preventDefault();
+        this.expanded = true;
+        return;
+      }
+    }
+    // Level-3 leaves fall through to the base, which activates on Enter and fires
+    // selection-change — the same behaviour as level-1 and level-2 leaves.
+    super._onkeydown(e);
+  }
+
+  _onclick(e: MouseEvent) {
+    // A group sub-item (one with sub-items) toggles expand/collapse and never navigates —
+    // a parent with children must not have an href. A leaf (including a level-3 leaf) falls
+    // through to the base handler, which fires selection-change and navigates via its href,
+    // exactly like level-1 and level-2 leaves.
+    if (this.hasSubItems) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.expanded = !this.expanded;
+    } else {
+      super._onclick(e);
+    }
+  }
+}
 
 UDExSideNavigationSubItem.define();
 

package/src/SideNavigationSubItemTemplate.tsx

@@ -0,0 +1,56 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
+import navRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import navDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import type UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
+
+export default function SideNavigationSubItemTemplate(this: UDExSideNavigationSubItem) {
+  const EffectiveTag = this._effectiveTag;
+  return (
+    <li id={this._id} class="ui5-sn-list-li" role="none">
+      <EffectiveTag
+        id={this._id}
+        data-sap-focus-ref
+        class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}
+        role={this.ariaRole}
+        onKeyDown={this._onkeydown}
+        onKeyUp={this._onkeyup}
+        onClick={this._onclick}
+        onFocusIn={this._onfocusin}
+        tabIndex={this.effectiveTabIndex}
+        aria-current={this._ariaCurrent}
+        aria-selected={this._ariaSelected}
+        aria-label={this.accessibleName || undefined}
+        title={this._tooltip}
+        aria-disabled={this.effectiveDisabled}
+        href={this._href}
+        target={this._target}
+        aria-haspopup={this._ariaHasPopup}
+        aria-describedby={this._describedBy}
+        aria-expanded={this._subExpanded}
+        aria-owns={this._subGroupId}
+      >
+        {this.icon && <Icon class="ui5-sn-item-icon" name={this.icon} />}
+        <div class="ui5-sn-item-text" id={this._textId}>{this.text}</div>
+        {this.hasTag && (
+          <div id={this._tagId} class="ui5-sn-item-tag-slot">
+            <slot name="tag" />
+          </div>
+        )}
+        {this.hasSubItems && (
+          <Icon
+            class="ui5-sn-item-toggle-icon"
+            name={this.expanded ? navDownArrow : navRightArrow}
+            onClick={(e: Event) => this._onToggleClick(e)}
+          />
+        )}
+        {this.isExternalLink && <Icon class="ui5-sn-item-external-link-icon" name={arrowRight} />}
+      </EffectiveTag>
+      {this.hasSubItems && (
+        <ul id={this._subGroupId} class="ui5-sn-item-ul" role="group">
+          <slot />
+        </ul>
+      )}
+    </li>
+  );
+}

package/src/Table.ts

@@ -15,11 +15,10 @@ import { TABLE_NO_DATA_FOUND } from "./generated/i18n/i18n-defaults.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import TableTemplate from "./TableTemplate.js";
-
+import translate from "./utils/translate.js";
 // Styles
 import TableCss from "./generated/themes/Table.css.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
-import translate from "./utils/translate.js";
 
 export type TableBaseRow = UDExTableHeaderRow | UDExTableRow;
 

package/src/TableCell.ts

@@ -3,6 +3,7 @@ import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UDExTableCellBase from "./TableCellBase.js";
 import TableCellTemplate from "./TableCellTemplate.js";
+import { UDExTableCellVerticalAlign } from "./types/Table.js";
 
 // Styles
 import TableCellCss from "./generated/themes/TableCell.css.js";
@@ -50,18 +51,14 @@ class UDExTableCell extends UDExTableCellBase {
   @property({ type: Boolean })
     _highlighted?: boolean;
 
-  onBeforeRendering() {
-    super.onBeforeRendering();
-    this.setJustifyContent();
-  }
-
-  setJustifyContent(): void {
-    if (this.horizontalAlign) {
-      this.style.justifyContent = this.horizontalAlign;
-    } else {
-      this.style.justifyContent = `var(--horizontal-align-${(this)._individualSlot})`;
-    }
-  }
+  /**
+   * Determines the vertical alignment of the cell content.
+   *
+   * @default "Center"
+   * @public
+   */
+  @property()
+    verticalAlign: `${UDExTableCellVerticalAlign}` = UDExTableCellVerticalAlign.Center;
 }
 
 UDExTableCell.define();

package/src/TableCellBase.ts

@@ -4,7 +4,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import type UDExTableCellHorizontalAlign from "./types/Table.js";
+import type { UDExTableCellHorizontalAlign } from "./types/Table.js";
 
 // Styles
 import TableCellBaseCss from "./generated/themes/TableCellBase.css.js";
@@ -62,6 +62,15 @@ abstract class UDExTableCellBase extends UI5Element {
 
   onBeforeRendering() {
     this.setAttribute("role", this.ariaRole);
+    this.setJustifyContent();
+  }
+
+  setJustifyContent(): void {
+    if (this.horizontalAlign) {
+      this.style.justifyContent = this.horizontalAlign;
+    } else {
+      this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
+    }
   }
 }
 

package/src/TableHeaderCell.ts

@@ -61,11 +61,6 @@ class UDExTableHeaderCell extends UDExTableCellBase {
 
   protected ariaRole: string = "columnheader";
 
-  onBeforeRendering() {
-    super.onBeforeRendering();
-    this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
-  }
-
   get _hasIcons(): boolean {
     return this.iconStart.length > 0 || this.iconEnd.length > 0;
   }

package/src/TableRow.ts

@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UDExTableRowBase from "./TableRowBase.js";
 import type UDExTableCell from "./TableCell.js";
 import TableRowTemplate from "./TableRowTemplate.js";
+import { UDExTableCellVerticalAlign } from "./types/Table.js";
 
 /**
  * @class
@@ -48,10 +49,21 @@ class UDExTableRow extends UDExTableRowBase {
   @property({ type: Boolean })
     highlighted?: boolean;
 
+  /**
+   * Determines the vertical alignment of all cells in the row.
+   * Applies to every cell that does not define its own verticalAlign.
+   *
+   * @default "Center"
+   * @public
+   */
+  @property()
+    verticalAlign: `${UDExTableCellVerticalAlign}` = UDExTableCellVerticalAlign.Center;
+
   onBeforeRendering(): void {
     if (this.highlighted) {
       this._setHighlightToCells();
     }
+    this._setVerticalAlignToCells();
   }
 
   _setHighlightToCells(): void {
@@ -60,6 +72,14 @@ class UDExTableRow extends UDExTableRowBase {
     });
   }
 
+  _setVerticalAlignToCells(): void {
+    this.cellsInRow.forEach(cell => {
+      if (cell.verticalAlign === UDExTableCellVerticalAlign.Center) {
+        cell.verticalAlign = this.verticalAlign;
+      }
+    });
+  }
+
   get isGroup(): boolean {
     return false;
   }