@sapudex/web-components 2.60.0 → 2.62.0

package/src/SideNavigationItem.ts

@@ -1,6 +1,10 @@
 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";
+import SideNavigationItemTemplate from "./SideNavigationItemTemplate.js";
 
 // Styles
 import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
@@ -26,10 +30,83 @@ import { isDesktop } from "@ui5/webcomponents-base";
 @customElement({
   tag: "udex-side-navigation-item",
   renderer: jsxRenderer,
+  template: SideNavigationItemTemplate,
   styles: [SideNavigationItem.styles, SideNavigationItemCss],
 })
 
 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/SideNavigationItemTemplate.tsx

@@ -0,0 +1,97 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import navRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
+import type UDExSideNavigationItem from "./SideNavigationItem.js";
+
+export default function SideNavigationItemTemplate(this: UDExSideNavigationItem) {
+  if (this.sideNavCollapsed) {
+    return ItemTemplate.call(this);
+  }
+
+  return (
+    <li id={this._id} class="ui5-sn-list-li" role="none">
+      {ItemTemplate.call(this)}
+    </li>
+  );
+}
+
+function ItemTemplate(this: UDExSideNavigationItem) {
+  const EffectiveTag = this._effectiveTag;
+
+  return (
+    <>
+      <EffectiveTag
+        id={this._id}
+        data-sap-focus-ref
+        class={`ui5-sn-item ui5-sn-item-level1 ${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}
+        title={this._tooltip}
+        aria-disabled={this.effectiveDisabled}
+        href={this._href}
+        target={this._target}
+        aria-haspopup={this._ariaHasPopup}
+        onFocusOut={this._onfocusout}
+        onMouseEnter={this._onmouseenter}
+        onMouseLeave={this._onmouseleave}
+        aria-checked={this._ariaChecked}
+        aria-owns={this._groupId}
+        aria-label={this._ariaLabel}
+        aria-expanded={this._expanded}
+        aria-labelledby={this._textId}
+        aria-describedby={this._describedBy}>
+        {this.sideNavCollapsed ? (
+          <Icon class="ui5-sn-item-icon" name={this.icon} />
+        ) : (
+          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.sideNavCollapsed ? (
+          !!this.items.length && (
+            <div class="ui5-sn-item-toggle-icon-wrap">
+              <Icon class="ui5-sn-item-toggle-icon" name={navRightArrow} />
+            </div>
+          )
+        ) : (
+          !!this.items.length && (
+            <div class="ui5-sn-item-toggle-icon-wrap">
+              <Icon
+                class="ui5-sn-item-toggle-icon"
+                name={navRightArrow}
+                accessibleName={this._arrowTooltip}
+                showTooltip={true}
+                onClick={this._onToggleClick}
+              />
+            </div>
+          )
+        )}
+        {this.isExternalLink && (
+          <Icon class="ui5-sn-item-external-link-icon" name={arrowRight} />
+        )}
+      </EffectiveTag>
+      {!this.sideNavCollapsed && !!this.items.length && (
+        <ul
+          id={this._groupId}
+          class="ui5-sn-item-ul"
+          aria-label={this.accessibleName || this.text}
+          role="group">
+          <slot />
+        </ul>
+      )}
+      {this._selectableItemDescriptionText && (
+        <span id={this._selectableItemDescriptionId} class="ui5-hidden-text">{this._selectableItemDescriptionText}</span>
+      )}
+    </>
+  );
+}

package/src/SideNavigationMobile.ts

@@ -12,7 +12,6 @@ import type UDExSideNavigationGroup from "./SideNavigationGroup.js";
 
 // Styles
 import SideNavigationMobileCss from "./generated/themes/SideNavigationMobile.css.js";
-import SideNavigationMobileDropdownCss from "./generated/themes/SideNavigationMobileDropdown.css.js";
 
 export type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;
 
@@ -37,7 +36,7 @@ export type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem |
   tag: "udex-side-navigation-mobile",
   renderer: jsxRenderer,
   template: SideNavigationMobileTemplate,
-  styles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],
+  styles: [SideNavigationMobileCss],
 })
 
 class UDExSideNavigationMobile extends UI5Element {

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,9 +1,20 @@
 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";
+import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
 
 /**
  * @class
@@ -25,10 +36,116 @@ import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.c
 @customElement({
   tag: "udex-side-navigation-sub-item",
   renderer: jsxRenderer,
-  styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],
+  template: SideNavigationSubItemTemplate,
+  styles: [SideNavigationSubItem.styles, SideNavigationItemCss, 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,57 @@
+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 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 && (
+          <div class="ui5-sn-item-toggle-icon-wrap">
+            <Icon
+              class="ui5-sn-item-toggle-icon"
+              name={navRightArrow}
+              onClick={(e: Event) => this._onToggleClick(e)}
+            />
+          </div>
+        )}
+        {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;
   }

package/src/TagGroup.ts

@@ -188,6 +188,7 @@ class UDExTagGroup extends UI5Element {
   _nMoreBtn!: HTMLElement | null;
   _resizeHandler: () => void;
   _keydownCaptureHandler: (e: KeyboardEvent) => void;
+  _observedTokenizer?: Tokenizer;
 
   constructor() {
     super();
@@ -204,10 +205,18 @@ class UDExTagGroup extends UI5Element {
     ResizeHandler.deregister(this, this._resizeHandler);
     this.removeEventListener("keydown", this._keydownCaptureHandler, true);
     this._nMoreBtn?.removeEventListener("keydown", this._nMoreKeyDownHandler);
+    this._observedTokenizer?.detachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);
+    this._observedTokenizer = undefined;
   }
 
   onAfterRendering(): void {
     this._tokenizer = this.tokenizer;
+    if (this._observedTokenizer !== this._tokenizer) {
+      this._observedTokenizer?.detachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);
+      this._observedTokenizer = this._tokenizer;
+      this._observedTokenizer.attachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);
+    }
+    this._syncTokenizerAriaAfterRendering();
     const prevMoreBtn = this._nMoreBtn;
     this._nMoreBtn = this._tokenizer.moreLink || null;
 
@@ -231,6 +240,29 @@ class UDExTagGroup extends UI5Element {
     }
   }
 
+  /** @private UI5 exposes an empty listbox when all tokens have overflowed. */
+  _syncTokenizerAriaAfterRendering = (): void => {
+    const tokenizer = this._observedTokenizer;
+    renderFinished().then(() => {
+      if (!this.isConnected || !tokenizer || this._observedTokenizer !== tokenizer) {
+        return;
+      }
+      const list = tokenizer.shadowRoot?.querySelector<HTMLElement>(".ui5-tokenizer--list");
+      if (!list) {
+        return;
+      }
+      const hasVisibleTokens = tokenizer._tokens.some(token => !token.overflows);
+      // Do not hide the tokenizer: its sibling "n more" button must stay
+      // accessible. Only the list with no exposed options is presentational.
+      list.setAttribute("role", hasVisibleTokens ? "listbox" : "presentation");
+      if (hasVisibleTokens) {
+        list.setAttribute("aria-label", tokenizer.tokenizerLabel);
+      } else {
+        ["aria-label", "aria-description", "aria-disabled", "aria-readonly"].forEach(attribute => list.removeAttribute(attribute));
+      }
+    });
+  };
+
   _nMoreKeyDownHandler = (e: KeyboardEvent) => {
     if (isSpace(e) || isEnter(e)) {
       this.showMoreItems();

package/src/TagGroupTemplate.tsx

@@ -53,7 +53,7 @@ function tag(this: UDExTagGroup, rootClass: string, item: any, index: number) {
         key={index}
         accessibleRole="option"
         class={`${rootClass}__tag`}
-        data-id={`${item.id}`}
+        data-id={item.getAttribute("data-id") ?? item.id}
         part={`token-${index}`}
         read-only={this.isReadOrDisplayOnly}
         id={`${this._id}-tag-group-tag`}

package/src/UploadItem.ts

@@ -16,15 +16,13 @@ import type UDExLink from "./Link.js";
 import UDExButtonSize from "./types/ButtonSize.js";
 import UploadItemTemplate from "./UploadItemTemplate.js";
 import translate from "./utils/translate.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 // Styles
 import UploadItemCss from "./generated/themes/UploadItem.css.js";
 import UDExFileUploadState from "./types/FileUploadState.js";
 import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 
-const BreakpointSizeS: number = 979;
-const BreakpointSizeM: number = 1279;
-
 /**
  * @class
  *
@@ -182,8 +180,8 @@ class UDExUploadItem extends UDExListItem {
   }
 
   _handleResize() {
-    this._buttonSize = window.innerWidth <= BreakpointSizeS ? UDExButtonSize.Medium : UDExButtonSize.Large;
-    this._breakpointL = window.innerWidth > BreakpointSizeM;
+    this._buttonSize = BreakpointUtils.isAtMost("S") ? UDExButtonSize.Medium : UDExButtonSize.Large;
+    this._breakpointL = BreakpointUtils.isAtLeast("L");
     this._breakpointM = !this._breakpointL ? true : !this._breakpointL && this.uploadState === UDExFileUploadState.Uploaded;
   }