@sapudex/web-components 0.226.0 → 0.226.2

package/src/Breadcrumbs.hbs

@@ -2,19 +2,17 @@
     class="udex-breadcrumbs ui5-breadcrumbs-root"
 	aria-label="{{_accessibleNameText}}">
 	<ol @focusin="{{_onfocusin}}">
-		<li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper">
-			<button
-                @click="{{_toggleDropdown}}"
+        <li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper">
+            <udex-link
+                @ui5-click="{{_toggleDropdown}}"
                 class="udex-breadcrumbs__trigger {{_triggerClass}}"
-				accessible-role="button"
-				aria-label="{{_dropdownArrowAccessibleNameText}}"
-				aria-haspopup="true">
-				<ui5-icon
-            name="slim-arrow-down"
-            title="{{_dropdownArrowAccessibleNameText}}">
-        </ui5-icon>
-			</button>
-		</li>
+                accessible-role="button"
+                aria-label="{{_dropdownArrowAccessibleNameText}}"
+                icon="slim-arrow-down"
+                icon-placement="Start"
+                aria-haspopup="true">
+            </udex-link>
+        </li>
 		{{#each _linksData}}
             <li
                 class="udex-breadcrumbs__link-wrapper ui5-breadcrumbs-link-wrapper"

package/src/Breadcrumbs.ts

@@ -162,6 +162,7 @@ class UDExBreadcrumbs extends UI5Element {
 
   onAfterRendering(): void {
     this._initItemNavigation();
+    this._dropdownArrowLink.forcedTabIndex = "0";
   }
 
   _preprocessItems(): void {
@@ -289,7 +290,7 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   _focusFirstVisibleItem(): void {
-    Array.from(this.shadowRoot!.querySelectorAll<UDExLink>("[udex-link]"))[0].focus();
+    Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(".udex-breadcrumbs__link-wrapper [udex-link]"))[0].focus();
     this._shouldFocusFirstVisibleItem = false;
   }
 
@@ -305,7 +306,7 @@ class UDExBreadcrumbs extends UI5Element {
    * Getter for the list of links corresponding to the abstract breadcrumb items
    */
   get _links(): Array<UDExLink> {
-    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(".udex-breadcrumbs__link-wrapper [ui5-link]"));
+    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(".ui5-breadcrumbs-link-wrapper [udex-link]"));
   }
 
   /**

package/src/Button.hbs

@@ -0,0 +1,50 @@
+<button
+	type="button"
+	class="ui5-button-root"
+	?disabled="{{disabled}}"
+	aria-disabled="{{_ariaDisabled}}"
+	data-sap-focus-ref
+	{{> ariaPressed}}
+	@focusout={{_onfocusout}}
+	@focusin={{_onfocusin}}
+	@click={{_onclick}}
+	@mousedown={{_onmousedown}}
+	@mouseup={{_onmouseup}}
+	@keydown={{_onkeydown}}
+	@keyup={{_onkeyup}}
+	@touchstart="{{_ontouchstart}}"
+	@touchend="{{_ontouchend}}"
+	tabindex={{tabIndexValue}}
+	aria-expanded="{{accessibilityAttributes.expanded}}"
+	aria-controls="{{accessibilityAttributes.controls}}"
+	aria-haspopup="{{_hasPopup}}"
+	aria-label="{{ariaLabelText}}"
+	aria-describedby="{{ariaDescribedbyText}}"
+	title="{{buttonTitle}}"
+	part="button"
+	role="{{buttonAccessibleRole}}"
+>
+<div class="udex-button-content">
+	{{#if icon}}
+		<ui5-icon
+			class="ui5-button-icon"
+			name="{{icon}}"
+			accessible-role="{{iconRole}}"
+			part="icon"
+			?show-tooltip={{showIconTooltip}}
+		></ui5-icon>
+	{{/if}}
+
+	<span id="{{_id}}-content" class="ui5-button-text">
+		<bdi>
+			<slot></slot>
+		</bdi>
+	</span>
+
+	{{#if hasButtonType}}
+		<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">{{buttonTypeText}}</span>
+	{{/if}}
+</div>
+</button>
+
+{{#*inline "ariaPressed"}}{{/inline}}

package/src/Button.ts

@@ -7,6 +7,7 @@ import I18nBundle, { I18nText, getI18nBundle } from "@ui5/webcomponents-base/dis
 import {
   BUTTON_ARIA_ATTENTION, BUTTON_ARIA_DEFAULT, BUTTON_ARIA_EMPHASIZED, BUTTON_ARIA_TRANSPARENT, BUTTON_ARIA_TYPE_NEGATIVE, BUTTON_ARIA_TYPE_POSITIVE, BUTTON_ARIA_TYPE_PRIMARY, BUTTON_ARIA_TYPE_SECONDARY, BUTTON_ARIA_TYPE_TERTIARY, BUTTON_ARIA_TYPE_WARNING, TOGGLED,
 } from "./generated/i18n/i18n-defaults.js";
+import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 
 // Styles
 import ButtonCss from "./generated/themes/Button.css";
@@ -38,6 +39,7 @@ export enum UDExButtonDesign {
   tag: "udex-button",
   renderer: litRender,
   styles: [Button.styles, ButtonCss],
+  template: ButtonTemplate,
 })
 class UDExButton extends Button {
   /**
@@ -60,6 +62,15 @@ class UDExButton extends Button {
   @property({ type: Boolean })
     toggled!: boolean;
 
+  /**
+   * Defines if button has pseudo aria-disabled state
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    _ariaDisabled!: boolean;
+
   /**
    * Defines the component design.
    * @default "Primary"

package/src/FilterMenu.hbs

@@ -36,6 +36,7 @@
     <ui5-popover
         id="{{this._id}}_udex-filter-menu-dropdown"
         hide-arrow
+        accessible-role="{{accessibleRole}}"
         ?allow-target-overlap="{{disableAllowTargetOverlap}}"
         placement-type="{{placementType}}"
         horizontal-align="{{horizontalAlign}}"

package/src/ListItem.ts

@@ -230,16 +230,16 @@ class UDExListItem extends UDExListItemBase {
    * @slot
    * @public
    */
-  @slot()
-    firstIcon!: Array<HTMLElement>;
+  @slot({ type: UDExButton })
+    firstIcon!: Array<UDExButton>;
   /**
    * Slot for second icon.
    *
    * @slot
    * @public
    */
-  @slot()
-    secondIcon!: Array<HTMLElement>;
+  @slot({ type: UDExButton })
+    secondIcon!: Array<UDExButton>;
 
   /**
   * Defines the role attribute of component

package/src/MastheadItem.ts

@@ -564,7 +564,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get isMobile(): boolean {
-    return BreakpointUtils.isBelow("M") || this.mastheadShell?._isMobileMode;
+    return BreakpointUtils.isAtMost("M") || this.mastheadShell?._isMobileMode;
   }
 
   get isTargetBlank(): boolean {

package/src/Pagination.hbs

@@ -4,7 +4,7 @@
         {{#if absoluteNavigation}}
         <li class="udex-pagination__item--first udex-pagination__item">
             <udex-button
-            ?disabled="{{prevButtonDisbled}}"
+            ?_aria-disabled="{{prevButtonDisabled}}"
             accessible-name="{{firstPageAccessibleName}}"
             size="Large"
             icon="close-command-field"
@@ -15,7 +15,7 @@
         {{/if}}
         <li class="udex-pagination__item--prev udex-pagination__item">
             <udex-button
-            ?disabled="{{prevButtonDisbled}}"
+            ?_aria-disabled="{{prevButtonDisabled}}"
             accessible-name="{{previousPageAccessibleName}}"
             tooltip="{{previousBtnTooltip}}"
             size="Large"
@@ -47,7 +47,7 @@
         {{/if}}
         <li class="udex-pagination__item--next udex-pagination__item">
             <udex-button
-            ?disabled="{{nextButtonDisbled}}"
+            ?_aria-disabled="{{nextButtonDisabled}}"
             tooltip="{{nextBtnTooltip}}"
             accessible-name="{{nextPageAccessibleName}}"
             size="Large"
@@ -59,7 +59,7 @@
         {{#if absoluteNavigation}}
             <li class="udex-pagination__item--last udex-pagination__item">
                 <udex-button
-                ?disabled="{{nextButtonDisbled}}"
+                ?_aria-disabled="{{nextButtonDisabled}}"
                 accessible-name="{{lastPageAccessibleName}}"
                 size="Large"
                 icon="open-command-field"

package/src/Pagination.ts

@@ -163,11 +163,11 @@ class UDExPagination extends UI5Element {
     this.setupPages(this.pages);
   }
 
-  get nextButtonDisbled(): boolean {
+  get nextButtonDisabled(): boolean {
     return this.currentPageIndex + 1 === this.pages;
   }
 
-  get prevButtonDisbled(): boolean {
+  get prevButtonDisabled(): boolean {
     return this.currentPageIndex === 0;
   }
 
@@ -234,21 +234,27 @@ class UDExPagination extends UI5Element {
   }
 
   get previousPageAccessibleName(): string {
-    if (this.currentPageIndex === 0) { return UDExPagination.i18nBundle.getText(PREVIOUS_PAGE); }
-    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}. ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
+    const currentPageText = `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}.`;
+    if (this.currentPageIndex === 0) {
+      return `${currentPageText} ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}`;
+    }
+    return `${currentPageText}. ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
   }
 
   get previousBtnTooltip(): string {
-    return !this.prevButtonDisbled ? `${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}` : "";
+    return !this.prevButtonDisabled ? `${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}` : "";
   }
 
   get nextPageAccessibleName(): string {
-    if (this.pages && this.currentPageIndex === (this.pages - 1)) { return UDExPagination.i18nBundle.getText(NEXT_PAGE); }
-    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}. ${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
+    const currentPageText = `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}.`;
+    if (this.pages && this.currentPageIndex === (this.pages - 1)) {
+      return `${currentPageText} ${UDExPagination.i18nBundle.getText(NEXT_PAGE)}`;
+    }
+    return `${currentPageText} ${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
   }
 
   get nextBtnTooltip(): string {
-    return !this.nextButtonDisbled ? `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}` : "";
+    return !this.nextButtonDisabled ? `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}` : "";
   }
 
   get pagination(): Page[] {

package/src/PhoneNumberField.ts

@@ -43,6 +43,10 @@ export enum FieldState {
 }
 
 const initialPlaceholder: string = "+X XXX-XXX-XXXX";
+/**
+ * Maximum number of possible digits based on international standard https://en.wikipedia.org/wiki/E.164
+ */
+const digitsLimit: number = 15;
 
 /**
  * @class
@@ -441,6 +445,15 @@ class UDExPhoneNumberField extends UI5Element {
     this._dropdownExpanded = false;
   }
 
+  calculateMaxLength(prefix: string, mask: string): number {
+    const prefixNonDigitCount = prefix.replace(/[\d]/g, "").length;
+    const maskNonDigitCount = mask.replace(/X/g, "").length;
+
+    const maxLength = digitsLimit + prefixNonDigitCount + maskNonDigitCount;
+
+    return maxLength;
+  }
+
   autoSelectCountry(value: string) {
     const countryToSelect = this.updatedCountriesList.find(country => {
       const valuePhonePrefix = value.substring(0, country.phonePrefix.length);
@@ -453,7 +466,7 @@ class UDExPhoneNumberField extends UI5Element {
     }
 
     if (this.selectedPhonePrefix && this.selectedPlaceholder) {
-      this.maxlength = this.selectedPhonePrefix.length + this.selectedPlaceholder.length;
+      this.maxlength = this.calculateMaxLength(this.selectedPhonePrefix, this.selectedPlaceholder);
     }
   }
 
@@ -469,6 +482,8 @@ class UDExPhoneNumberField extends UI5Element {
       return;
     }
 
+    const maskLength = this.selectedPhonePrefix.length + this.selectedPlaceholder.length;
+
     const mask = this.selectedPhonePrefix + this.selectedPlaceholder;
     const maskSymbols = [" ", "-", "(", ")"];
 
@@ -485,6 +500,10 @@ class UDExPhoneNumberField extends UI5Element {
       return char;
     }).join("");
 
+    if (this.value.length >= maskLength) {
+      return;
+    }
+
     this.value = valueWithMask;
 
     if (this.value.length > this.maxlength) {

package/src/Search.hbs

@@ -73,8 +73,8 @@
                 @click="{{handleInputClick}}"
             />
         {{/if}}
-        {{#if accInfo.ariaDescription}}
-            <span role="status" id="search-description" class="hidden" aria-hidden="true">{{accInfo.ariaDescription}}</span>
+        {{#if open}}
+            <span aria-live="polite" aria-atomic="true" id="search-description" class="hidden" aria-hidden="true">{{suggestionsDescription}}</span>
         {{/if}}
         <div class="udex-search__icons">
             {{#if isShowHomeResetButton}}
@@ -121,6 +121,7 @@
                   class="udex-search__icon"
                   aria-hidden="true"
                   accessible-name="{{accInfo.accessibleNameSearchIcon}}"
+                  show-tooltip
                   name="search">
               </ui5-icon>
             {{/if}}

package/src/Search.ts

@@ -697,7 +697,6 @@ class UDExSearch extends UI5Element {
 
   getTextWithSuggestion(text: string): string {
     const escapedValue = this.escapeRegExp(this.value);
-    console.warn(escapedValue);
     const search = new RegExp(escapedValue, "i");
     return text.replace(search, "<b>$&</b>");
   }
@@ -1278,7 +1277,7 @@ class UDExSearch extends UI5Element {
   }
 
   get suggestionsDescription(): string {
-    return this.hasPopoverContent ? `${this.suggestedList.length} ${this._suggestionLabel}, ${this.recommendedList.length} ${this._recommendLabel}` : `${this.noResultText}`;
+    return !this.showNoResultMessage ? `${this.suggestedList.length} ${this._suggestionLabel}, ${this.recommendedList.length} ${this._recommendLabel}` : `${this.noResultMessage}`;
   }
 
   get tooltipInfo() {

package/src/SecondaryNavigation.hbs

@@ -66,6 +66,7 @@
         label="{{title}}"
         mobile-link-title="{{title}}"
         @ui5-sub-item-click="{{handleSubItemClick}}"
+        _is-mobile-menu-opener
         .subItems="{{this.parsedItems}}">
         {{#if hasMobileButtonsSlot}}
             {{>buttons}}

package/src/SecondaryNavigation.ts

@@ -151,7 +151,8 @@ class UDExSecondaryNavigation extends UI5Element {
     _mobileBtnExpanded = false;
 
   _navItems!: Array<NavItem>;
-  _showMoreButton: boolean;
+  _showMoreButton!: boolean;
+  _shouldFocusFirstItem: boolean = true;
   _rootHolder!: HTMLElement | null | undefined;
   _clickedNavItem!: UDExSecondaryNavigationItem;
   _boundReflowItems: () => void;
@@ -164,7 +165,6 @@ class UDExSecondaryNavigation extends UI5Element {
 
   constructor() {
     super();
-    this._showMoreButton = true;
     this._boundReflowItems = this._handleResize.bind(this);
   }
 
@@ -180,13 +180,6 @@ class UDExSecondaryNavigation extends UI5Element {
     ResizeHandler.deregister(this, this._boundReflowItems);
   }
 
-  _handleResize() {
-    this.reflowItems();
-    if (this._clickedNavItem && this.isDesktopScreen) {
-      this._clickedNavItem.closeDropdown();
-    }
-  }
-
   onInvalidation(changeInfo: ChangeInfo): void {
     if (changeInfo.name === "navItems") {
       this.reflowItems();
@@ -195,6 +188,12 @@ class UDExSecondaryNavigation extends UI5Element {
 
   onAfterRendering(): void {
     this._rootHolder = this.rootHolder;
+    if (!this._overflowItems.length) {
+      this._showMoreButton = true;
+    }
+    if (this._shouldFocusFirstItem && this.isDesktopScreen) {
+      this.domNavItems[0]._tabIndex = "0";
+    }
     this.handleOutsideClick();
   }
 
@@ -202,6 +201,16 @@ class UDExSecondaryNavigation extends UI5Element {
     this._requestRender = !this._requestRender;
   }
 
+  _handleResize() {
+    this.reflowItems();
+    if (this.isDesktopScreen) {
+      this.resetTabIndex();
+    }
+    if (this._clickedNavItem && this.isDesktopScreen) {
+      this._clickedNavItem.closeDropdown();
+    }
+  }
+
   reflowItems(): void {
     const availableWidth = this.rootHolder.offsetWidth - (this.heading?.offsetWidth || 0) - (this.optionalButtons?.offsetWidth || 0);
     const moreButtonWidth = this.getMoreButtonWidth();
@@ -252,9 +261,12 @@ class UDExSecondaryNavigation extends UI5Element {
     const item = e.target as UDExSecondaryNavigationItem;
     const currentSelectedIndex = this.getCurrentIndex(item);
     const previousSelectIndex = currentSelectedIndex - 1;
+    const previousItem = this.domNavItems[previousSelectIndex];
     if (currentSelectedIndex > 0) {
       e.preventDefault();
-      this.domNavItems[previousSelectIndex]?.focus();
+      this.domNavItems[currentSelectedIndex]._tabIndex = "-1";
+      previousItem._tabIndex = "0";
+      previousItem?.focus();
     }
   }
 
@@ -263,9 +275,12 @@ class UDExSecondaryNavigation extends UI5Element {
     const currentSelectedIndex = this.getCurrentIndex(item);
     const lastItemIndex = this.domNavItems.length - 1;
     const nextSelectIndex = currentSelectedIndex + 1;
+    const nextItem = this.domNavItems[nextSelectIndex];
     if (nextSelectIndex < lastItemIndex) {
       e.preventDefault();
-      this.domNavItems[nextSelectIndex].focus();
+      this.domNavItems[currentSelectedIndex]._tabIndex = "-1";
+      nextItem._tabIndex = "0";
+      nextItem.focus();
     }
   }
 
@@ -314,6 +329,8 @@ class UDExSecondaryNavigation extends UI5Element {
     }
 
     this._clickedNavItem = clickedItem;
+    this._shouldFocusFirstItem = false;
+    this.setTabIndexById(_id);
     this.closePrevDropdown(_id);
 
     if (!subItems.length) {
@@ -410,7 +427,7 @@ class UDExSecondaryNavigation extends UI5Element {
 
   closePrevDropdown(clickedItemId: string): void {
     this.domNavItems.forEach(item => {
-      if (clickedItemId !== item._id) {
+      if (item.isOpen && item._id !== clickedItemId) {
         item.closeDropdown();
       }
     });
@@ -420,6 +437,18 @@ class UDExSecondaryNavigation extends UI5Element {
     return string ? JSON.parse(string) as T[] : [];
   }
 
+  resetTabIndex(): void {
+    this.domNavItems.forEach((item, index) => {
+      item._tabIndex = index === 0 ? "0" : "-1";
+    });
+  }
+
+  setTabIndexById(id: string): void {
+    this.domNavItems.forEach(item => {
+      item._tabIndex = id === item._id ? "0" : "-1";
+    });
+  }
+
   get domNavItems(): Array<UDExSecondaryNavigationItem> {
     const items = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationItem>("[udex-secondary-navigation-item]");
     return items ? Array.from(items) : [];

package/src/SecondaryNavigationItem.hbs

@@ -5,6 +5,7 @@
         ?active="{{isActive}}"
         href="{{path}}"
         target="{{target}}"
+        tabindex="{{_tabIndex}}"
         aria-current="{{ariaCurrent}}"
         @keydown="{{handleItemLinkKeyDown}}"
         @click="{{fireNavItemClickEvent}}">
@@ -14,8 +15,8 @@
     <button
         class="udex-secondary-navigation__item"
         role="{{itemRole}}"
-        tabindex="0"
         ?active="{{isActive}}"
+        tabindex="{{menuOpenerTabIndex}}"
         aria-haspopup="{{hasNestedItems}}"
         aria-expanded="{{isOpen}}"
         aria-label="{{ariaLabel}}"

package/src/SecondaryNavigationItem.ts

@@ -150,9 +150,20 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Object })
     _processedItems: Array<NavItem> = [];
 
+  /**
+   * Defines if item is mobile menu opener.
+   *
+   * @private
+   * @default false
+   */
+  @property({ type: Boolean })
+    _isMobileMenuOpener!: boolean;
+
   _dropdownHistory: Array<Array<NavItem>> = [];
   _shouldFocusFirstSubItem!: boolean;
   _subTitle!: string | undefined;
+  _shouldResetTabIndex!: boolean;
+  _shouldSetTabIndex!: boolean;
 
   onAfterRendering(): void {
     if (this.isLastItem && this.isOpen && !this._isMobileView) {
@@ -167,6 +178,16 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (this._isMobileView && this.isOpen) {
       this.setDropdownHeight();
     }
+
+    if (this._shouldSetTabIndex) {
+      this._tabIndex = "0";
+      this._shouldSetTabIndex = false;
+    }
+
+    if (this._shouldResetTabIndex) {
+      this._tabIndex = "-1";
+      this._shouldResetTabIndex = false;
+    }
   }
 
   onBeforeRendering() : void {
@@ -195,6 +216,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (this.hasNestedItems) {
       this.setDropdownItems();
       this.isOpen = !this.isOpen;
+      this._shouldResetTabIndex = true;
       this.onShouldFocusFirstSubItem();
     }
 
@@ -203,6 +225,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 
   closeDropdown(): void {
     this.isOpen = false;
+    this._shouldSetTabIndex = true;
   }
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
@@ -418,6 +441,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     return this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown")!;
   }
 
+  get menuOpenerTabIndex(): string {
+    if (this._isMobileMenuOpener) {
+      return "0";
+    }
+
+    return this._tabIndex;
+  }
+
   get isLastItem(): boolean {
     return this._navItemsLength === this.index;
   }

package/src/SecondaryNavigationItemBase.ts

@@ -94,6 +94,9 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
   @property({ type: Boolean })
     _isMobileView!: boolean;
 
+  @property({ type: String, defaultValue: "-1" })
+    _tabIndex!: string;
+
   _handleResizeBound: ResizeObserverCallback;
 
   constructor() {

package/src/SecondaryNavigationSubItem.ts

@@ -79,9 +79,6 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Object, multiple: true })
     nestedItems!: Array<NavItem>;
 
-  @property({ type: String, defaultValue: "-1" })
-    _tabIndex!: string;
-
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {

package/src/generated/templates/BreadcrumbsTemplate.lit.ts

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Breadcrumbs from "../../Breadcrumbs.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper"><button @click="${this._toggleDropdown}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" aria-haspopup="true"><${scopeTag("ui5-icon", tags, suffix)} name="slim-arrow-down" title="${ifDefined(this._dropdownArrowAccessibleNameText)}"></${scopeTag("ui5-icon", tags, suffix)}></button></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav>` : html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper"><button @click="${this._toggleDropdown}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" aria-haspopup="true"><ui5-icon name="slim-arrow-down" title="${ifDefined(this._dropdownArrowAccessibleNameText)}"></ui5-icon></button></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav>`;}
+function block0 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper"><${scopeTag("udex-link", tags, suffix)} @ui5-click="${ifDefined(this._toggleDropdown)}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" icon="slim-arrow-down" icon-placement="Start" aria-haspopup="true"></${scopeTag("udex-link", tags, suffix)}></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav>` : html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper"><udex-link @ui5-click="${ifDefined(this._toggleDropdown)}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" icon="slim-arrow-down" icon-placement="Start" aria-haspopup="true"></udex-link></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav>`;}
 function block1 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-breadcrumbs__link-wrapper ui5-breadcrumbs-link-wrapper" id="${ifDefined(item._id)}-link-wrapper">${ !item._isCurrentPageItem ? block2.call(this, context, tags, suffix, item, index) : undefined }</li>`;}
 function block2 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<span class="udex-breadcrumbs__separator" aria-hidden="true"></span><${scopeTag("udex-link", tags, suffix)} @ui5-click="${ifDefined(this._onLinkPress)}" class="udex-breadcrumbs__item" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" id="${ifDefined(item._id)}-link" accessible-name="${ifDefined(item._accessibleNameText)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.innerText)}</${scopeTag("udex-link", tags, suffix)}>` : html`<span class="udex-breadcrumbs__separator" aria-hidden="true"></span><udex-link @ui5-click="${ifDefined(this._onLinkPress)}" class="udex-breadcrumbs__item" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" id="${ifDefined(item._id)}-link" accessible-name="${ifDefined(item._accessibleNameText)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.innerText)}</udex-link>`;}
 

package/src/generated/templates/ButtonTemplate.lit.ts

@@ -0,0 +1,12 @@
+/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+	import type Button from "../../Button.js";
+	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
+	
+function block0 (this: Button, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button type="button" class="ui5-button-root" ?disabled="${this.disabled}" aria-disabled="${ifDefined(this._ariaDisabled)}" data-sap-focus-ref  @focusout=${this._onfocusout} @focusin=${this._onfocusin} @click=${this._onclick} @mousedown=${this._onmousedown} @mouseup=${this._onmouseup} @keydown=${this._onkeydown} @keyup=${this._onkeyup} @touchstart="${this._ontouchstart}" @touchend="${this._ontouchend}" tabindex=${ifDefined(this.tabIndexValue)} aria-expanded="${ifDefined(this.accessibilityAttributes.expanded)}" aria-controls="${ifDefined(this.accessibilityAttributes.controls)}" aria-haspopup="${ifDefined(this._hasPopup)}" aria-label="${ifDefined(this.ariaLabelText)}" aria-describedby="${ifDefined(this.ariaDescribedbyText)}" title="${ifDefined(this.buttonTitle)}" part="button" role="${ifDefined(this.buttonAccessibleRole)}"><div class="udex-button-content">${ this.icon ? block1.call(this, context, tags, suffix) : undefined }<span id="${ifDefined(this._id)}-content" class="ui5-button-text"><bdi><slot></slot></bdi></span>${ this.hasButtonType ? block2.call(this, context, tags, suffix) : undefined }</div></button>`;}
+function block1 (this: Button, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="ui5-button-icon" name="${ifDefined(this.icon)}" accessible-role="${ifDefined(this.iconRole)}" part="icon" ?show-tooltip=${this.showIconTooltip}></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="ui5-button-icon" name="${ifDefined(this.icon)}" accessible-role="${ifDefined(this.iconRole)}" part="icon" ?show-tooltip=${this.showIconTooltip}></ui5-icon>`;}
+function block2 (this: Button, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">${ifDefined(this.buttonTypeText)}</span>`;}
+
+
+export default block0;