@sapudex/web-components 2.43.0 → 2.45.0

package/src/FilterMenu.ts

@@ -331,6 +331,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   _popover!: Popover;
   _breakpointSizeXS = 640;
   _initialState: Array<initialItemState> = [];
+  _list!: UDExList;
 
   onEnterDOM(): void {
     if (isDesktop()) {
@@ -346,6 +347,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this._search = this.getSearch();
     this._popover = this.getPopover();
     this._trigger = this.getTriggerButton();
+    this._list = this.getList();
   }
 
   handleSelectAll(e:CustomEvent): void {
@@ -477,9 +479,30 @@ class UDExFilterMenu extends UDExSearchableListBase {
     if (this._popover.offsetWidth + popoverLeftOffset < this._breakpointSizeXS) {
       this.style.setProperty("--udex-filter-menu-popover-left-offset", `${this._popover.style.left}`);
     }
+    if (this.modeMultiSelect) {
+      this._focusFirstInteractiveElement();
+    }
+    if (this.modeSingleSelect && !this._search) {
+      this.activeItem?.focus();
+    }
+    this._handleDropdownScroll();
     this.fireDecoratorEvent("after-open");
   }
 
+  _focusFirstInteractiveElement(): void {
+    if (this.showSearch && this._search) {
+      this._focusSearchInput();
+      return;
+    }
+
+    this.focusFirstItem();
+  }
+
+  _focusSearchInput(): void {
+    const input = this._search.shadowRoot?.querySelector("[id='search-input']") as HTMLInputElement;
+    input.focus();
+  }
+
   _getInitialState(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<initialItemState> {
     return items.flatMap(item => {
       if (item.isGroup) {

package/src/ListItemBase.ts

@@ -254,7 +254,7 @@ class UDExListItemBase extends UI5Element {
     if (!this.collapsible) {
       return;
     }
-    this.contentElement = this.shadowRoot?.querySelector(".udex-list__group-list__content") || this.nextElementSibling as HTMLElement;
+    this.contentElement = this.shadowRoot?.querySelector<HTMLElement>(".udex-list__group-list__content");
     if (this.contentElement) {
       ResizeHandler.register(this.contentElement, this._resizeHandler);
       this.setContentHeight();
@@ -272,7 +272,7 @@ class UDExListItemBase extends UI5Element {
   }
 
   _onResize(): void {
-    if (this.contentElement && this.collapsible) {
+    if (this.contentElement && this.collapsible && this.contentElement.scrollHeight > 0) {
       this.setContentHeight();
     }
   }

package/src/MastheadItem.ts

@@ -1,5 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 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.js";
@@ -15,16 +15,17 @@ import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
-import type UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/world.js";
+import type UDExAvatar from "./Avatar.js";
 import type UDExMastheadShell from "./MastheadShell.js";
+import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+import type UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
-import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import translate from "./utils/translate.js";
 
 // Styles
@@ -363,6 +364,12 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     this.handleOutsideClick();
   }
 
+  onInvalidation({ name, newValue }: ChangeInfo): void {
+    if (name === "selected" && !newValue && this.isMobile) {
+      this.dropdownScrollToTop();
+    }
+  }
+
   handleOutsideClick(): void {
     document.addEventListener("click", (e: Event) => {
       const target = e.target as HTMLElement;
@@ -496,6 +503,16 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     });
   }
 
+  dropdownScrollToTop(): void {
+    if (this.isMobileMenuOpenBtn) {
+      const menu = this.getSlottedNodes<UDExMastheadMobileMenu>("dropdown")[0];
+      menu.mobileMenuScrollToTop();
+    } else {
+      const dropdown = this.getDomElement(".udex-masthead-item__dropdown-holder");
+      dropdown?.scrollTo({ top: 0 });
+    }
+  }
+
   setDropdownInsetStart(): void {
     const dropdown = this.dropdownHolder;
     if (dropdown) {
@@ -648,6 +665,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.hasDropdownSlot && this.selected;
   }
 
+  get isMobileMenuOpenBtn(): boolean {
+    return this.hasAttribute("_is-menu-open-btn");
+  }
+
   get hasDropdownSlot(): boolean {
     return !!this.getSlottedNodes("dropdown").length;
   }

package/src/MastheadMobileMenu.ts

@@ -377,6 +377,12 @@ class UDExMastheadMobileMenu extends UI5Element {
     });
   }
 
+  mobileMenuScrollToTop(): void {
+    this.shadowRoot
+      ?.querySelector<HTMLElement>(".udex-masthead-mobile-menu__nav-holder")
+      ?.scrollTo({ top: 0 });
+  }
+
   setFocusItemByIndex(index: number) {
     this._shouldFocusItemByIndex = true;
     this._focusedItemIndex = index;

package/src/MastheadProfileMenu.hbs

@@ -9,33 +9,33 @@
 </div>
 
 {{#*inline "account-profile"}}
-  <div class="udex-masthead-profile-menu__header">
-    {{#if userData}}
-      <udex-avatar
-        aria-hidden="true"
-        size="L"
-        initials="{{userData.avatarInitials}}"
-        fallback-icon="{{userData.fallbackIcon}}">
-        {{#if userData.avatarUrl}}
-          <img src="{{userData.avatarUrl}}" alt="avatar"/>
-        {{/if}}
-      </udex-avatar>
-      <div>
-        <p class="udex-profile-menu__account-name">{{userData.name}}</p>
-        <p class="udex-profile-menu__account-email">{{userData.email}}</p>
-        {{#if hasIdentities}}
-          <udex-button
-            @click="{{handleSwitcherClick}}"
-            class="udex-masthead-profile-menu__btn-switcher"
-            size="Large"
-            end-icon="slim-arrow-right"
-            design="Invisible">
-            {{switcherAccountText}}
-          </udex-button>
-        {{/if}}
+    {{#if hasUserData}}
+      <div class="udex-masthead-profile-menu__header">
+          <udex-avatar
+            aria-hidden="true"
+            size="L"
+            initials="{{userData.avatarInitials}}"
+            fallback-icon="{{userData.fallbackIcon}}">
+            {{#if userData.avatarUrl}}
+              <img src="{{userData.avatarUrl}}" alt="avatar"/>
+            {{/if}}
+          </udex-avatar>
+          <div>
+            <p class="udex-profile-menu__account-name">{{userData.name}}</p>
+            <p class="udex-profile-menu__account-email">{{userData.email}}</p>
+            {{#if hasIdentities}}
+              <udex-button
+                @click="{{handleSwitcherClick}}"
+                class="udex-masthead-profile-menu__btn-switcher"
+                size="Large"
+                end-icon="slim-arrow-right"
+                design="Invisible">
+                {{switcherAccountText}}
+              </udex-button>
+            {{/if}}
+          </div>
       </div>
     {{/if}}
-  </div>
   {{#if messageAvailable}}
     <div class="udex-masthead-profile-menu__message">
       <slot name="message"></slot>

package/src/MastheadProfileMenu.ts

@@ -425,26 +425,10 @@ class UDExMastheadProfileMenu extends UI5Element {
     }
   }
 
-  get scrollBottomIdentitiesList(): number {
-    return this.calculateScrollBottom(this.identitiesHTMLElement);
-  }
-
-  get scrollBottomProfileMenu(): number {
-    return this.calculateScrollBottom(this.profileMenuHTMLElement);
-  }
-
   calculateScrollBottom(element: HTMLElement): number {
     return element.scrollHeight - element.scrollTop - element.clientHeight;
   }
 
-  get profileMenuHTMLElement(): HTMLElement {
-    return this.getElementByClassName(this._profileMenuLinksClassName);
-  }
-
-  get identitiesHTMLElement(): HTMLElement {
-    return this.getElementByClassName(this._identitiesListClassName);
-  }
-
   getElementByClassName(className: string): HTMLElement {
     return this.shadowRoot?.querySelector<HTMLElement>(`.${className}`) as HTMLElement;
   }
@@ -464,6 +448,22 @@ class UDExMastheadProfileMenu extends UI5Element {
     }
   }
 
+  get scrollBottomIdentitiesList(): number {
+    return this.calculateScrollBottom(this.identitiesHTMLElement);
+  }
+
+  get scrollBottomProfileMenu(): number {
+    return this.calculateScrollBottom(this.profileMenuHTMLElement);
+  }
+
+  get profileMenuHTMLElement(): HTMLElement {
+    return this.getElementByClassName(this._profileMenuLinksClassName);
+  }
+
+  get identitiesHTMLElement(): HTMLElement {
+    return this.getElementByClassName(this._identitiesListClassName);
+  }
+
   get linksList(): string {
     return this.links ? JSON.stringify([{
       subMenuLinkItems: JSON.parse(this.links),
@@ -478,6 +478,10 @@ class UDExMastheadProfileMenu extends UI5Element {
     return parseArrayFromString(this.loggedInUser) as UserData;
   }
 
+  get hasUserData(): boolean {
+    return typeof this.userData === "object" && this.userData !== null && !Array.isArray(this.userData);
+  }
+
   get identitiesList(): Array<ExtendedUserIdentity> {
     return parseArrayFromString<ExtendedUserIdentity>(this.identities).map((identity: UserIdentity) => ({
       ...identity,

package/src/MastheadShell.hbs

@@ -100,7 +100,7 @@
             <div
                 class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
                 @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleProfileClick}}">
+                @click-default="{{handleProfileClick}}">
                 <slot name="profile"></slot>
             </div>
         {{/if}}
@@ -119,7 +119,8 @@
                 accessible-role="button"
                 icon="menu2"
                 part="menu-open-btn"
-                accessible-name="menu">
+                accessible-name="menu"
+                _is-menu-open-btn>
                 <slot slot="dropdown" name="mobileMenu"></slot>
             </udex-masthead-item>
             <udex-masthead-item

package/src/MastheadShell.ts

@@ -546,6 +546,7 @@ class UDExMastheadShell extends UI5Element {
   _desktopSearch!: UDExSearch | null | undefined;
   _mobileMenu!: UDExMastheadMobileMenu | null | undefined;
   _handleResizeBound: ResizeObserverCallback;
+  _handleWindowResizeBound: () => void;
   _rootHolder!: HTMLElement | null | undefined;
   _shouldHandleResize!: boolean;
   _isVisible!: boolean;
@@ -553,6 +554,7 @@ class UDExMastheadShell extends UI5Element {
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
+    this._handleWindowResizeBound = this._handleWindowResize.bind(this);
   }
 
   onBeforeRendering() {
@@ -582,6 +584,7 @@ class UDExMastheadShell extends UI5Element {
 
   onEnterDOM(): void {
     ResizeHandler.register(this, this._handleResizeBound);
+    window.addEventListener("resize", this._handleWindowResizeBound);
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
@@ -589,6 +592,13 @@ class UDExMastheadShell extends UI5Element {
 
   onExitDOM(): void {
     ResizeHandler.deregister(this, this._handleResizeBound);
+    window.removeEventListener("resize", this._handleWindowResizeBound);
+  }
+
+  _handleWindowResize(): void {
+    if (this.isMobileMenuMode) {
+      this.setMobileMenuHeight();
+    }
   }
 
   onInvalidation({ name }: ChangeInfo): void {
@@ -996,9 +1006,8 @@ class UDExMastheadShell extends UI5Element {
     }
 
     (this.mobileBtn as UDExMastheadItem).selected = false;
+    this.mobileMenuReset();
     this._isMobileMenuOpen = false;
-    this._mobileMenu?.showFirstLevelMenu();
-    this._mobileMenu?.resetSearch();
 
     if (this.bodyOverflow) {
       this.removeOverflowBody();

package/src/SearchableListBase.ts

@@ -549,6 +549,43 @@ class UDExSearchableListBase extends UI5Element {
     this._fireIconClickEvent("second-icon-click", e);
   }
 
+  _dropdownScrollToTop() {
+    this.getPopoverPart(UDExPopoverPart.Content)?.scrollTo({ top: 0 });
+  }
+
+  _dropdownScrollToSelectedItem() {
+    const content = this.getPopoverPart(UDExPopoverPart.Content);
+    const activeItem = this.activeItem;
+    if (!content || !activeItem) { return; }
+    const itemRect = activeItem.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    content.scrollTop += itemRect.top - contentRect.top + itemRect.height / 2 - content.clientHeight / 2;
+  }
+
+  _handleDropdownScroll() {
+    if (this.modeMultiSelect) {
+      this._dropdownScrollToTop();
+    }
+    if (this.modeSingleSelect) {
+      this._dropdownScrollToSelectedItem();
+    }
+  }
+
+  focusFirstItem(): void {
+    const list = this.getList();
+    const items = list.getKeyboardNavigationItems();
+    if (!items.length) { return; }
+    const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
+    const firstItem = items[firstIndex];
+    list.setTabIndexByIndex(items, firstIndex);
+
+    if (firstItem.isGroup) {
+      list.focusHeader(firstItem);
+    } else {
+      firstItem.focus();
+    }
+  }
+
   private _fireIconClickEvent(eventName: "first-icon-click" | "second-icon-click", e: CustomEvent): void {
     const item = e.detail.item as UDExListItemBase;
     const id = this.getDataTokenId(item);
@@ -595,10 +632,6 @@ class UDExSearchableListBase extends UI5Element {
     return item.getAttribute("data-token-id") as string;
   }
 
-  get _validItems(): Array<UDExListItemBase | UDExListGroupHeaderBase> {
-    return this.items.filter(item => !(item instanceof HTMLElement) || "isGroup" in item);
-  }
-
   getProcessedItems(): Array<UDExProcessedItem> {
     return this._validItems.map(item => {
       const isGroup = item.isGroup;
@@ -636,6 +669,14 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
+  get activeItem(): UDExListItem | undefined {
+    return this.getDomListItems().find(({ selected }) => selected);
+  }
+
+  get _validItems(): Array<UDExListItemBase | UDExListGroupHeaderBase> {
+    return this.items.filter(item => !(item instanceof HTMLElement) || "isGroup" in item);
+  }
+
   get getNoResultText(): string {
     const hasTextProperty = this.noResultText !== undefined && this.noResultText.length > 0;
     return hasTextProperty ? this.noResultText : this.noMatchesFoundText;

package/src/SelectBase.ts

@@ -452,6 +452,9 @@ class UDExSelectBase extends UDExSearchableListBase {
       return;
     }
 
+    const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
+    const firstItem = items[firstIndex];
+
     if (isEscAndPopoverOpened) {
       return this.closeDropdown();
     }
@@ -459,7 +462,8 @@ class UDExSelectBase extends UDExSearchableListBase {
     if (isDownAndPopoverClosed) {
       e.preventDefault();
       this.openDropdown();
-      this.focusFirstItem(items);
+      this.focusFirstItem();
+      this._selectedOption = firstItem.label;
       if (this.showImageFlags) {
         this.handleImagePosition(items, 0);
       }
@@ -471,20 +475,8 @@ class UDExSelectBase extends UDExSearchableListBase {
       if (this.showImageFlags) {
         this.handleImagePosition(items, 0);
       }
-      return this.focusFirstItem(items);
-    }
-  }
-
-  focusFirstItem(items: UDExListItemBase[]): void {
-    const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
-    const firstItem = items[firstIndex];
-    this._list.setTabIndexByIndex(items, firstIndex);
-    this._selectedOption = firstItem.label;
-
-    if (firstItem.isGroup) {
-      this._list.focusHeader(firstItem);
-    } else {
-      firstItem.focus();
+      this._selectedOption = firstItem.label;
+      return this.focusFirstItem();
     }
   }
 
@@ -509,14 +501,29 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   handleDropdownBeforeClose() {
-    this.fireDecoratorEvent("before-close");
+    this._handleDropdownScroll();
+    this.fireEventDropdownBeforeOClose();
   }
 
   dropdownBeforeOpen() {
     if (this.height) {
       this._setContentHeight();
     }
+    this.fireEventDropdownBeforeOpen();
+  }
+
+  handleDropdownOpen() {
+    if (!this.activeItem) {
+      this._dropdownScrollToTop();
+    }
+    this.fireEventDropdownOpen();
+  }
+
+  fireEventDropdownBeforeOClose() {
+    this.fireDecoratorEvent("before-close");
+  }
 
+  fireEventDropdownBeforeOpen() {
     this.fireDecoratorEvent("before-open");
   }
 

package/src/SelectBoxTemplate.tsx

@@ -24,7 +24,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
             {this.label && (
               <>
                 <label for="search-input" class={this.labelClass}>
-                  {this.label}{this.required && "*"}
+                  {this.label}{this.required && " * "}
                 </label>
                 <span class="hidden" id={`${this._id}-aria-describedby`}>{this.ariaDescribedbyText}</span>
               </>
@@ -83,7 +83,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
                 onHeaderPress: this.handleHeaderPress,
               } as any)}
               onBeforeOpen={this.handleDropdownBeforeOpen}
-              onOpen={this.fireEventDropdownOpen}
+              onOpen={this.handleDropdownOpen}
               onBeforeClose={this.handleDropdownBeforeClose}
               onClose={this.handleDropdownClose}
               class="udex-select-box__dropdown"

package/src/TagGroup.ts

@@ -3,7 +3,10 @@ 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 customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import { isEnter, isSpace, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import {
+  isEnter, isSpace, isEscape, isTabNext, isTabPrevious,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
@@ -143,6 +146,16 @@ class UDExTagGroup extends UI5Element {
   @property()
     tooltipPlacement: `${Placement}` = Placement.Bottom;
 
+  /**
+   * Defines the accessible name for the "Show More" tooltip, announced by screen readers
+   * when the tooltip containing hidden tags is opened.
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    tooltipAccessibleName?: string;
+
   /**
    * Determines whether there are hidden tags in the component.
    *
@@ -173,28 +186,37 @@ class UDExTagGroup extends UI5Element {
   _tokenizer!: Tokenizer;
   _nMoreBtn!: HTMLElement | null;
   _resizeHandler: () => void;
+  _keydownCaptureHandler: (e: KeyboardEvent) => void;
 
   constructor() {
     super();
     this._resizeHandler = this._onResize.bind(this);
+    this._keydownCaptureHandler = this._onKeydownCapture.bind(this);
   }
 
   onEnterDOM(): void {
     ResizeHandler.register(this, this._resizeHandler);
+    this.addEventListener("keydown", this._keydownCaptureHandler, true);
   }
 
   onExitDOM(): void {
     ResizeHandler.deregister(this, this._resizeHandler);
-    this._nMoreBtn?.removeEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
+    this.removeEventListener("keydown", this._keydownCaptureHandler, true);
+    this._nMoreBtn?.removeEventListener("keydown", this._nMoreKeyDownHandler);
   }
 
   onAfterRendering(): void {
     this._tokenizer = this.tokenizer;
+    const prevMoreBtn = this._nMoreBtn;
     this._nMoreBtn = this._tokenizer.moreLink || null;
 
-    if (!this.readonly && !this.disabled && this._nMoreBtn && !this._nMoreBtn.hasAttribute("tabindex")) {
+    if (prevMoreBtn && prevMoreBtn !== this._nMoreBtn) {
+      prevMoreBtn.removeEventListener("keydown", this._nMoreKeyDownHandler);
+    }
+
+    if (!this.disabled && this._nMoreBtn && this._nMoreBtn !== prevMoreBtn) {
       this._nMoreBtn.setAttribute("tabindex", "0");
-      this._nMoreBtn.addEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
+      this._nMoreBtn.addEventListener("keydown", this._nMoreKeyDownHandler);
     }
 
     if (!this.displayonly && this._skipMoreButtonFocus && this._nMoreBtn) {
@@ -208,10 +230,42 @@ class UDExTagGroup extends UI5Element {
     }
   }
 
-  _nMoreKeyDownHandler(e: Event) {
-    if (isSpace(e as KeyboardEvent) || isEnter(e as KeyboardEvent)) {
+  _nMoreKeyDownHandler = (e: KeyboardEvent) => {
+    if (isSpace(e) || isEnter(e)) {
       this.showMoreItems();
     }
+  };
+
+  _onKeydownCapture(e: KeyboardEvent): void {
+    if (!this._isHiddenTags) {
+      return;
+    }
+
+    if (isTabNext(e) && e.composedPath().includes(this._lastVisibleTag as EventTarget)) {
+      e.preventDefault();
+      this._nMoreBtn?.focus();
+      return;
+    }
+
+    if (isTabPrevious(e) && !this.isReadOrDisplayOnly) {
+      const active = getActiveElement();
+      const moreLink = this._tokenizer.moreLink;
+      if (active === moreLink) {
+        e.preventDefault();
+        const focusDomRef = this._lastVisibleTag?.getFocusDomRef();
+        focusDomRef?.focus();
+      }
+    }
+  }
+
+  handleTagFocusin(e: FocusEvent): void {
+    // Only block the Tokenizer's _onfocusin (which sets expanded=true and destroys
+    // the "n more" span) when there are actually hidden tags. When all tags are
+    // visible, let focusin propagate normally so consumers like SelectBox can use
+    // the expanded state for arrow-key navigation between tags.
+    if (this._isHiddenTags) {
+      e.stopPropagation();
+    }
   }
 
   _onResize(): void {
@@ -260,6 +314,15 @@ class UDExTagGroup extends UI5Element {
     return this._tokenizer?.overflownTokens || [];
   }
 
+  get _lastVisibleTag(): UDExTag | null {
+    const tokens = this._tokenizer?._tokens;
+    if (!tokens?.length) {
+      return null;
+    }
+    const visibleCount = tokens.length - (this._tokenizer._nMoreCount ?? 0);
+    return (tokens[visibleCount - 1] as unknown as UDExTag) ?? null;
+  }
+
   get isReadOrDisplayOnly(): boolean {
     return this.readonly || this.displayonly;
   }

package/src/TagGroupTemplate.tsx

@@ -29,6 +29,7 @@ export default function TagTemplate(this: UDExTagGroup) {
             <UDExTooltip
               id={`${this._id}-tag-group-tooltip`}
               placement={this.tooltipPlacement}
+              accessible-name={this.tooltipAccessibleName}
               onKeyDown={this.handleShowMoreButtonKeydown}>
               <div
                 role="group"
@@ -65,6 +66,7 @@ function tag(this: UDExTagGroup, rootClass: string, item: any, index: number) {
         accessible-name={item.accessibleName}
         non-selectable={item.nonSelectable}
         data-overflows={item.overflows}
+        onFocusIn={this.handleTagFocusin}
         onKeyDown={this.handleTagKeyDown}
         onSelectionChange={this.handleTagClick}
         onIconClick={this.tagIconClickHandler}

package/src/TextField.ts

@@ -264,6 +264,15 @@ class UDExTextField extends UI5Element {
   @property({ type: Boolean })
     iconActive!: boolean;
 
+  /**
+   * Defines the placeholder text of the input field.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    placeholder: string = "";
+
   /**
    * Defines the behaviour of autocomplete.
    * @default "off"

package/src/TextFieldTemplate.tsx

@@ -25,6 +25,7 @@ export default function TextFieldTemplate(this: TextField) {
           required={this.required}
           aria-required={this.required}
           aria-readonly={this.isInputReadonly}
+          placeholder={this.active || !this.label ? this.placeholder : undefined}
           autocomplete={this.autocomplete}
           role={this.inputRole as AriaRole}
           name={this.name}