@sapudex/web-components 2.1.1 → 2.3.0

package/src/Pagination.ts

@@ -16,6 +16,7 @@ import {
   PREVIOUS_PAGE,
   NEXT_PAGE,
   CURRENT_PAGE,
+  DISABLED,
 } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import "@ui5/webcomponents/dist/Icon.js";
@@ -46,7 +47,7 @@ export enum UDExDisplayType {
   mobile = "mobile"
 }
 
-type UDExPaginationChangeEventDetail = {
+export type UDExPaginationChangeEventDetail = {
   currentPage: number,
 }
 
@@ -124,6 +125,22 @@ class UDExPagination extends UI5Element {
   @property({ type: String })
     _direction?: string;
 
+  /**
+   * Defines if the previous button is in pseudo-disabled.
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _nextButtonPseudoDisabled!: boolean;
+
+  /**
+   * Defines if the previous button is in pseudo-disabled.
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _prevButtonPseudoDisabled!: boolean;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -159,7 +176,7 @@ class UDExPagination extends UI5Element {
     this.setupPages(this.pages);
   }
 
-  get nextButtonDisbled(): boolean {
+  get nextButtonDisabled(): boolean {
     return this.currentPageIndex + 1 === this.pages;
   }
 
@@ -230,8 +247,12 @@ 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._prevButtonPseudoDisabled || this.prevButtonDisabled) {
+      const effectiveDisabledText = this._prevButtonPseudoDisabled ? `${UDExPagination.i18nBundle.getText(DISABLED)}` : "";
+      return `${currentPageText} ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)} ${effectiveDisabledText}`;
+    }
+    return `${currentPageText} ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
   }
 
   get previousBtnTooltip(): string {
@@ -239,12 +260,16 @@ class UDExPagination extends UI5Element {
   }
 
   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._nextButtonPseudoDisabled || this.nextButtonDisabled) {
+      const effectiveDisabledText = this._nextButtonPseudoDisabled ? `${UDExPagination.i18nBundle.getText(DISABLED)}` : "";
+      return `${currentPageText} ${UDExPagination.i18nBundle.getText(NEXT_PAGE)} ${effectiveDisabledText}`;
+    }
+    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[] {
@@ -297,46 +322,38 @@ class UDExPagination extends UI5Element {
     this.currentPageIndex = currentPage + 1;
     this._pageFocusedManually = false;
 
+    this._nextButtonPseudoDisabled = this.currentPageIndex === (this.pages - 1);
+
     this.emitChangeEvent();
   }
 
-  setPrevPage(e: Event): void {
-    e.preventDefault();
-    const currentPage = this.currentPageIndex ?? 1;
-    if (this.pages && currentPage <= 0) {
-      return;
-    }
-    this.currentPageIndex -= 1;
-    this._pageFocusedManually = false;
-
-    this.emitChangeEvent();
+  get effectiveNextButtonDisabled(): boolean {
+    return !this._nextButtonPseudoDisabled && this.nextButtonDisabled;
   }
 
-  setFirstPage(e: Event): void {
-    e.preventDefault();
-    const currentPage = this.currentPageIndex ?? 1;
-    if (currentPage === 0) {
-      return;
-    }
+  get effectivePrevButtonDisabled(): boolean {
+    return !this._prevButtonPseudoDisabled && this.prevButtonDisabled;
+  }
 
-    this._firstPageIndex = 0;
-    this._lastPageIndex = this.displayNumber;
+  handlePrevFocusOut(): void {
+    this._prevButtonPseudoDisabled = false;
+  }
 
-    this.currentPageIndex = 0;
-    this.emitChangeEvent();
+  handleNextFocusOut(): void {
+    this._nextButtonPseudoDisabled = false;
   }
 
-  setLastPage(e: Event): void {
+  setPrevPage(e: Event): void {
     e.preventDefault();
     const currentPage = this.currentPageIndex ?? 1;
-    if (!this.pages || currentPage >= this.pages - 1) {
+    if (this.pages && currentPage <= 0) {
       return;
     }
+    this.currentPageIndex -= 1;
+    this._pageFocusedManually = false;
 
-    this._firstPageIndex = this.pages - this.displayNumber;
-    this._lastPageIndex = this.pages;
+    this._prevButtonPseudoDisabled = this.currentPageIndex === 0;
 
-    this.currentPageIndex = this._lastPageIndex - 1;
     this.emitChangeEvent();
   }
 

package/src/PhoneNumberField.hbs

@@ -64,7 +64,7 @@
                     <img
                         class="udex-phone-number-field__flag"
                         aria-label="{{selectedCountryName}}"
-                        style="{{selectedFlagBackgroundPosition}}">
+                        style="background-position-x: {{selectedFlagBackgroundPosition.x}}; background-position-y: {{selectedFlagBackgroundPosition.y}}">
                 </div>
             </udex-button>
         {{/unless}}

package/src/PhoneNumberField.ts

@@ -24,7 +24,6 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 
 import PhoneNumberFieldTemplate from "./generated/templates/PhoneNumberFieldTemplate.lit.js";
-import type UDExValueState from "./types/common.js";
 
 // Styles
 import PhoneNumberFieldCss from "./generated/themes/PhoneNumberField.css.js";
@@ -39,7 +38,16 @@ export enum UDExOpenButtonIcon {
   iconDown = "slim-arrow-down",
 }
 
-export type UDExPhoneNumberFieldValueState = Exclude<UDExValueState, "Warning">
+export enum UDExPhoneNumberFieldValueState {
+  Standard = "Standard",
+  Error = "Error",
+  Success = "Success",
+}
+
+export type BackgroundPosition = {
+  x?: string,
+  y?: string,
+};
 
 const initialPlaceholder: string = "+X XXX-XXX-XXXX";
 /**
@@ -101,7 +109,7 @@ class UDExPhoneNumberField extends UI5Element {
    * @public
    */
   @property()
-    valueState: `${UDExPhoneNumberFieldValueState}` = "Standard";
+    valueState: `${UDExPhoneNumberFieldValueState}` = UDExPhoneNumberFieldValueState.Standard;
 
   /**
    * Defines supporting text under the input field.
@@ -561,7 +569,7 @@ class UDExPhoneNumberField extends UI5Element {
       || this.updatedCountriesList[0]?.countryName;
   }
 
-  get selectedFlagBackgroundPosition() {
+  get selectedFlagBackgroundPosition(): BackgroundPosition {
     if (!this.countryIso) {
       return {};
     }
@@ -572,7 +580,7 @@ class UDExPhoneNumberField extends UI5Element {
       return {};
     }
 
-    return { "backgroundPosition": `${selectedCountry.flagX} ${selectedCountry.flagY}` };
+    return { x: selectedCountry?.flagX, y: selectedCountry?.flagY };
   }
 
   get ariaInvalid(): string | null {

package/src/ProgressBar.ts

@@ -7,7 +7,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   VALUE_STATE_ERROR, VALUE_STATE_SUCCESS, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION,
 } from "./generated/i18n/i18n-defaults.js";
-import ProgressBarValueState from "./types/ProgressBar.js";
+import UDExProgressBarValueState from "./types/ProgressBar.js";
 
 // Styles
 import ProgressBarCss from "./generated/themes/ProgressBar.css.js";
@@ -47,17 +47,17 @@ class UDExProgressBar extends ProgressIndicator {
    */
   @property()
   /** @ts-expect-error */
-    valueState!: `${ProgressBarValueState}` = ProgressBarValueState.None;
+    valueState!: `${UDExProgressBarValueState}` = UDExProgressBarValueState.None;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
   valueStateTextMappings(): Record<string, string> {
     return {
-      [ProgressBarValueState.Error]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_ERROR),
-      [ProgressBarValueState.Warning]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_WARNING),
-      [ProgressBarValueState.Success]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_SUCCESS),
-      [ProgressBarValueState.Information]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_INFORMATION),
+      [UDExProgressBarValueState.Error]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_ERROR),
+      [UDExProgressBarValueState.Warning]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_WARNING),
+      [UDExProgressBarValueState.Success]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_SUCCESS),
+      [UDExProgressBarValueState.Information]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_INFORMATION),
     };
   }
 }

package/src/RadioButton.ts

@@ -7,7 +7,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import RadioButton from "@ui5/webcomponents/dist/RadioButton.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import RadioButtonValueState from "./types/RadioButton.js";
+import UDExRadioButtonValueState from "./types/RadioButton.js";
 
 // Styles
 import RadioButtonCss from "./generated/themes/RadioButton.css.js";
@@ -53,7 +53,7 @@ class UDExRadioButton extends RadioButton {
    */
   @property()
   /** @ts-expect-error */
-    valueState!: `${RadioButtonValueState}` = RadioButtonValueState.None;
+    valueState!: `${UDExRadioButtonValueState}` = UDExRadioButtonValueState.None;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
@@ -65,13 +65,13 @@ class UDExRadioButton extends RadioButton {
 
   get valueStateText(): string {
     switch (this.valueState) {
-    case RadioButtonValueState.Error:
+    case UDExRadioButtonValueState.Error:
       return RadioButton.i18nBundle.getText(VALUE_STATE_ERROR);
-    case RadioButtonValueState.Success:
+    case UDExRadioButtonValueState.Success:
       return RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS);
-    case RadioButtonValueState.Information:
+    case UDExRadioButtonValueState.Information:
       return RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION);
-    case RadioButtonValueState.Warning:
+    case UDExRadioButtonValueState.Warning:
       return RadioButton.i18nBundle.getText(VALUE_STATE_WARNING);
     default:
       return "";

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}}
@@ -123,6 +123,7 @@
                   class="udex-search__icon"
                   aria-hidden="true"
                   accessible-name="{{accInfo.accessibleNameSearchIcon}}"
+                  show-tooltip
                   name="search">
               </ui5-icon>
             {{/if}}

package/src/Search.ts

@@ -710,7 +710,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>");
   }
@@ -1285,14 +1284,13 @@ class UDExSearch extends UI5Element {
   get accInfo() {
     return {
       "ariaLabel": this.accessibleName || undefined,
-      "ariaDescription": this.open ? this.suggestionsDescription : undefined,
       "accessibleNameResetIcon": this.accessibleNameResetIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_RESET_ICON),
       "accessibleNameSearchIcon": this.accessibleNameSearchIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON),
     };
   }
 
   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/SearchableListBase.ts

@@ -97,6 +97,15 @@ class UDExSearchableListBase extends UI5Element {
   @property({ type: Boolean })
     busy?: boolean;
 
+  /**
+   * Defines if the search input is visible.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    showSearchInput!: boolean;
+
   /**
    * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
    *
@@ -502,8 +511,15 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get showSearch(): boolean {
-    const items = this.getSlottedItems(this.items).filter(({ isGroup }) => !isGroup);
-    return items.length > SHOW_SEARCH_AFTER_COUNT && !this.modeRadioGroup;
+    return this.showSearchInput || (this.isSearchActive && !this.modeRadioGroup);
+  }
+
+  get isSearchActive(): boolean {
+    return this.nonGroupItems.length > SHOW_SEARCH_AFTER_COUNT;
+  }
+
+  get nonGroupItems(): Array<UDExListItemBase> {
+    return this.getSlottedItems(this.items).filter(item => !item.isGroup);
   }
 
   get roleForGroupList(): string {

package/src/SecondaryNavigation.hbs

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

package/src/SecondaryNavigation.ts

@@ -145,7 +145,8 @@ class UDExSecondaryNavigation extends UI5Element {
     _mobileBtnExpanded = false;
 
   _navItems!: Array<NavItem>;
-  _showMoreButton: boolean;
+  _showMoreButton: boolean = true;
+  _shouldFocusFirstItem: boolean = true;
   _rootHolder!: HTMLElement | null | undefined;
   _clickedNavItem!: UDExSecondaryNavigationItem;
   _boundReflowItems: () => void;
@@ -155,7 +156,6 @@ class UDExSecondaryNavigation extends UI5Element {
 
   constructor() {
     super();
-    this._showMoreButton = true;
     this._boundReflowItems = this._handleResize.bind(this);
   }
 
@@ -171,13 +171,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();
@@ -186,6 +179,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();
   }
 
@@ -193,6 +192,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.headingHolder?.offsetWidth || 0) - (this.optionalButtons?.offsetWidth || 0);
     const moreButtonWidth = this.getMoreButtonWidth();
@@ -243,9 +252,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();
     }
   }
 
@@ -254,9 +266,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();
     }
   }
 
@@ -305,6 +320,8 @@ class UDExSecondaryNavigation extends UI5Element {
     }
 
     this._clickedNavItem = clickedItem;
+    this._shouldFocusFirstItem = false;
+    this.setTabIndexById(_id);
     this.closePrevDropdown(_id);
 
     if (!subItems.length) {
@@ -401,7 +418,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();
       }
     });
@@ -411,6 +428,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,7 +15,7 @@
     <button
         class="udex-secondary-navigation__item"
         role="{{itemRole}}"
-        tabindex="0"
+        tabindex="{{menuOpenerTabIndex}}"
         ?active="{{isActive}}"
         aria-haspopup="{{hasNestedItems}}"
         aria-expanded="{{isOpen}}"

package/src/SecondaryNavigationItem.ts

@@ -157,9 +157,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) {
@@ -174,6 +185,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 {
@@ -202,6 +223,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (this.hasNestedItems) {
       this.setDropdownItems();
       this.isOpen = !this.isOpen;
+      this._shouldResetTabIndex = true;
       this.onShouldFocusFirstSubItem();
     }
 
@@ -210,6 +232,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 
   closeDropdown(): void {
     this.isOpen = false;
+    this._shouldSetTabIndex = true;
   }
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
@@ -425,6 +448,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 })
+    _tabIndex: string = "-1";
+
   _handleResizeBound: ResizeObserverCallback;
 
   constructor() {

package/src/SecondaryNavigationSubItem.ts

@@ -89,9 +89,6 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Object })
     nestedItems: Array<NavItem> = [];
 
-  @property({ type: String })
-    _tabIndex: string = "-1";
-
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 

package/src/SegmentedButton.ts

@@ -9,7 +9,7 @@ import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsSco
 import SegmentedButtonSelectionMode from "@ui5/webcomponents/dist/types/SegmentedButtonSelectionMode.js";
 import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
 import UDExSegmentedButtonItem from "./SegmentedButtonItem.js";
-import { UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 
 /**
  * @class

package/src/SegmentedButtonItem.ts

@@ -5,7 +5,7 @@ import SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js"
 // Styles
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import SegmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js";
-import { UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 
 /**
  * @class
@@ -44,7 +44,7 @@ class UDExSegmentedButtonItem extends SegmentedButtonItem {
    *
    * @private
    */
-  @property()
+  @property({ type: Boolean })
     hasIcon: boolean = false;
 
   constructor() {

package/src/StatusBadge.ts

@@ -23,7 +23,6 @@ import StatusBadgeTemplate from "./generated/templates/StatusBadgeTemplate.lit.j
 
 // Styles
 import StatusBadgeCss from "./generated/themes/StatusBadge.css.js";
-import type UDExProgressBarValueState from "./types/ProgressBar.js";
 
 export enum IconMapping {
   Success = "sys-enter-2",
@@ -41,7 +40,13 @@ export enum BadgeSize {
   XL = "XL",
 }
 
-export type UDExStatusBadgeValueState = `${Exclude<UDExProgressBarValueState, "None">}` | "Edit";
+export enum UDExStatusBadgeValueState {
+  Warning = "Warning",
+  Error = "Error",
+  Success = "Success",
+  Information = "Information",
+  Edit = "Edit"
+}
 
 /**
  * @class
@@ -75,7 +80,7 @@ class UDExStatusBadge extends UI5Element {
    * @public
    */
   @property()
-    valueState: UDExStatusBadgeValueState = "Information";
+    valueState: `${UDExStatusBadgeValueState}` = UDExStatusBadgeValueState.Information;
 
   /**
    * Defines predefined size of the component.