@sapudex/web-components 0.199.3 → 0.225.0

package/src/Pagination.ts

@@ -279,7 +279,7 @@ class UDExPagination extends UI5Element {
   }
 
   static async onDefine() {
-    UDExPagination.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExPagination.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   setActive(element: HTMLElement): void {
@@ -304,7 +304,6 @@ class UDExPagination extends UI5Element {
 
     this.currentPageIndex = currentPage + 1;
     this._pageFocusedManually = false;
-    this._pages = this.setupPagesData();
 
     this.emitChangeEvent();
   }
@@ -317,7 +316,6 @@ class UDExPagination extends UI5Element {
     }
     this.currentPageIndex -= 1;
     this._pageFocusedManually = false;
-    this._pages = this.setupPagesData();
 
     this.emitChangeEvent();
   }
@@ -364,13 +362,12 @@ class UDExPagination extends UI5Element {
 
     this._pages = this.setupPagesData();
 
-    if (this.currentPageIndex > this._lastPageIndex || this._lastPageIndex - this.currentPageIndex <= this.pageOffset) {
-      this._visiblePages = this.shiftVisiblePages();
-    }
-
     if (this.currentPageIndex < this._firstPageIndex || this.currentPageIndex - this._firstPageIndex <= this.pageOffset) {
       this._visiblePages = this.shiftVisiblePages(true);
+      return;
     }
+
+    this._visiblePages = this.shiftVisiblePages();
   }
 
   setupPagesData(): Page[] {
@@ -425,7 +422,6 @@ class UDExPagination extends UI5Element {
     if (element.getAttribute("active") !== null) {
       return;
     }
-
     this.setActive(element);
     this.emitChangeEvent();
   }

package/src/PasswordField.hbs

@@ -1,7 +1,8 @@
 <udex-text-field
-    type={{type}}
+    type="{{type}}"
     value="{{value}}"
     label="{{passwordLabel}}"
+    autocomplete="{{autocomplete}}"
     ?disabled="{{disabled}}"
     ?readonly="{{readonly}}"
     ?displayonly="{{displayonly}}"
@@ -12,6 +13,6 @@
     accessible-name-ref="{{accessibleNameRef}}"
     accessible-icon-name="{{showButtonTooltip}}"
     show-button-tooltip="{{showButtonTooltip}}"
-    @ui5-click-icon="{{handleShowPassword}}"
+    @click-icon="{{handleShowPassword}}"
     icon="{{iconButton}}"
 ></udex-text-field>

package/src/PasswordField.ts

@@ -7,9 +7,18 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExTextField from "./TextField.js";
 import ValueState from "./types/common.js";
-
+import "@ui5/webcomponents-icons/dist/hide.js";
+import "@ui5/webcomponents-icons/dist/show.js";
 import PasswordFieldTemplate from "./generated/templates/PasswordFieldTemplate.lit.js";
 
+// Styles
+import PasswordFieldCss from "./generated/themes/PasswordField.css";
+
+export enum PasswordFieldAutoComplete {
+  On = "on",
+  Off = "off",
+}
+
 export enum InputType {
   Password = "password",
   Text = "text",
@@ -30,7 +39,7 @@ export enum IconType {
  * For the <code>udex-password-field</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/UDExPasswordField.js";</code>
+ * <code>import "@sapudex/web-components/dist/UDExPasswordField.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -40,6 +49,7 @@ export enum IconType {
 @customElement({
   tag: "udex-password-field",
   renderer: litRender,
+  styles: PasswordFieldCss,
   template: PasswordFieldTemplate,
   dependencies: [UDExTextField],
 })
@@ -54,6 +64,14 @@ class UDExPasswordField extends UI5Element {
   @property({ type: String, noAttribute: true, defaultValue: InputType.Password })
     type!: InputType;
 
+  /**
+   * Defines the behaviour of autocomplete.
+   *
+   * @public
+   */
+  @property({ type: String, defaultValue: PasswordFieldAutoComplete.Off })
+    autocomplete!: `${PasswordFieldAutoComplete}`;
+
   /**
    * Defines whether the component is in disabled state.
    * <br><br>
@@ -194,7 +212,7 @@ class UDExPasswordField extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExPasswordField.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExPasswordField.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   handleShowPassword(): void {

package/src/PhoneNumberField.hbs

@@ -67,7 +67,7 @@
                 <div class="udex-phone-number-field__button-content">
                     <img
                         class="udex-phone-number-field__flag"
-                        aria-label={{selectedCountryName}}
+                        aria-label="{{selectedCountryName}}"
                         style="{{selectedFlagBackgroundPosition}}">
                 </div>
             </udex-button>
@@ -97,6 +97,7 @@
             @blur="{{handleBlur}}"
             @keydown="{{handleKeyDown}}"
             @keyup="{{handleKeyUp}}"
+            tabindex="{{inputTabIndex}}"
         >
     </div>
 </div>

package/src/PhoneNumberField.ts

@@ -291,7 +291,7 @@ class UDExPhoneNumberField extends UI5Element {
   _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
-    UDExPhoneNumberField.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExPhoneNumberField.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get countrySelectorAriaLabel() {
@@ -387,7 +387,7 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   handleFocus() {
-    this.active = true;
+    this.active = !this.displayonly;
     if (this.countryIso.length === 0) {
       this.phoneFormat = initialPlaceholder;
     }
@@ -521,6 +521,10 @@ class UDExPhoneNumberField extends UI5Element {
     )!;
   }
 
+  get inputTabIndex(): number | undefined {
+    return this.displayonly || this.disabled ? -1 : undefined;
+  }
+
   get selectedPhonePrefix(): string {
     if (!this.countryIso) {
       return "";

package/src/ProgressBar.ts

@@ -16,7 +16,7 @@ import ProgressBarCss from "./generated/themes/ProgressBar.css.js";
  * For the <code>udex-progress-bar</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/ProgressBar.js";</code>
+ * <code>import "@sapudex/web-components/dist/ProgressBar.js";</code>
  *
  * @constructor
  * @extends ProgressIndicator

package/src/RadioButton.ts

@@ -19,7 +19,7 @@ import RadioButtonCss from "./generated/themes/RadioButton.css.js";
  * For the <code>udex-radio-button</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/RadioButton.js";</code>
+ * <code>import "@sapudex/web-components/dist/RadioButton.js";</code>
  *
  * @constructor
  * @extends RadioButton

package/src/RangeSlider.ts

@@ -19,7 +19,7 @@ import SliderCss from "./generated/themes/Slider.css.js";
  * For the <code>udex-range-slider</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/RangeSlider.js";</code>
+ * <code>import "@sapudex/web-components/dist/RangeSlider.js";</code>
  *
  * @constructor
  * @extends RangeSlider

package/src/RatingBar.ts

@@ -22,7 +22,7 @@ import RatingBarCss from "./generated/themes/RatingBar.css.js";
  * For the <code>udex-rating-bar</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/RatingBar.js";</code>
+ * <code>import "@sapudex/web-components/dist/RatingBar.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -72,7 +72,7 @@ class UDExRatingBar extends UI5Element {
   _maxPercentage: number = 100;
 
   static async onDefine() {
-    UDExRatingBar.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExRatingBar.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onBeforeRendering(): void {

package/src/RatingIndicator.ts

@@ -23,7 +23,7 @@ export enum DisplayType {
  *
  * ### ES6 Module Import
  *
- * `import @udex/web-components/dist/RatingIndicator.js";`
+ * `import @sapudex/web-components/dist/RatingIndicator.js";`
  * @constructor
  * @extends RatingIndicator
  * @public

package/src/Review.ts

@@ -28,7 +28,7 @@ import ReviewCss from "./generated/themes/Review.css.js";
  * For the <code>udex-review</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Review.js";</code>
+ * <code>import "@sapudex/web-components/dist/Review.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -94,7 +94,7 @@ class UDExReview extends UI5Element {
   _maxRatingBars: number = 5;
 
   static async onDefine() {
-    UDExReview.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExReview.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get reviewsText(): string {

package/src/ReviewItem.ts

@@ -26,7 +26,7 @@ import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
  * For the <code>udex-review-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/ReviewItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/ReviewItem.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -146,7 +146,7 @@ class UDExReviewItem extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExReviewItem.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExReviewItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {

package/src/Search.hbs

@@ -5,6 +5,7 @@
                 type="button"
                 role="combobox"
                 aria-expanded="{{_prefixDropdownExpanded}}"
+                aria-label="{{labelPrefix}}"
                 aria-haspopup="true"
                 aria-controls="udex-search-prefix"
                 class="udex-search__prefix-button"
@@ -27,6 +28,7 @@
     <form role="search" class="udex-search__container {{focusClasses}} {{isNotEmptyClass}}">
         {{#if labelAnimationDisabled}}
             <input
+                role="searchbox"
                 id="search-input"
                 type="search"
                 name="search"
@@ -34,8 +36,9 @@
                 autocomplete="off"
                 aria-autocomplete="list"
                 aria-haspopup="{{getAriaHasPopup}}"
-                aria-label="Search"
-                placeholder="{{label}}"
+                aria-label="{{accInfo.ariaLabel}}"
+                aria-describedby="search-description"
+                placeholder="{{effectivePlaceholder}}"
                 .value="{{value}}"
                 @input="{{handleSearchChange}}"
                 @keydown="{{handleKeyDown}}"
@@ -51,6 +54,7 @@
                 </label>
             {{/if}}
             <input
+                role="searchbox"
                 id="search-input"
                 type="search"
                 name="search"
@@ -58,6 +62,7 @@
                 autocomplete="off"
                 aria-autocomplete="list"
                 aria-label="{{accInfo.ariaLabel}}"
+                aria-describedby="search-description"
                 aria-haspopup="{{getAriaHasPopup}}"
                 .value="{{value}}"
                 @input="{{handleSearchChange}}"
@@ -68,8 +73,11 @@
                 @click="{{handleInputClick}}"
             />
         {{/if}}
+        {{#if accInfo.ariaDescription}}
+            <span role="status" id="search-description" class="hidden" aria-hidden="true">{{accInfo.ariaDescription}}</span>
+        {{/if}}
         <div class="udex-search__icons">
-            {{#if isShowResetButton}}
+            {{#if isShowHomeResetButton}}
                 <ui5-button
                     id="reset-button"
                     class="udex-search__button udex-search__reset-button"
@@ -85,6 +93,19 @@
                     </ui5-icon>
                 </ui5-button>
             {{/if}}
+            {{#if isShowResetButton}}
+                <udex-control-button
+                    id="reset-button"
+                    class="udex-search__reset-button"
+                    design="Default"
+                    tooltip="{{tooltipInfo.tooltipResetButton}}"
+                    icon="decline"
+                    size="Large"
+                    accessible-name="{{accInfo.accessibleNameResetIcon}}"
+                    @click="{{onReset}}"
+                    @keydown="{{handleKeyDownReset}}">
+                </udex-control-button>
+            {{/if}}
             {{#if isVoiceButton}}
                 <ui5-button
                     id="voice-button"
@@ -95,23 +116,34 @@
                     @click="{{onVoice}}"
                 ></ui5-button>
             {{/if}}
-            {{#if showSubmitButton}}
-                {{#if nonInteractiveSubmitButton}}
-                    <ui5-icon
-                        class="udex-search__icon"
-                        accessible-name="{{accInfo.accessibleNameSearchIcon}}"
-                        name="search">
-                    </ui5-icon>
-                {{else}}
-                    <ui5-button
-                        id="submit-button"
-                        class="udex-search__button udex-search__submit-button {{searchButtonActiveClass}}"
-                        design="Default"
-                        icon="search"
-                        tooltip="{{tooltipInfo.tooltipSubmitButton}}"
-                        @click="{{onSubmit}}"
-                    ></ui5-button>
-                {{/if}}
+            {{#if showNonInteractiveButton}}
+              <ui5-icon
+                  class="udex-search__icon"
+                  aria-hidden="true"
+                  accessible-name="{{accInfo.accessibleNameSearchIcon}}"
+                  name="search">
+              </ui5-icon>
+            {{/if}}
+            {{#if showSubmitHomeButton}}
+              <ui5-button
+                  id="submit-button"
+                  class="udex-search__button udex-search__submit-button {{searchButtonActiveClass}}"
+                  design="Default"
+                  icon="search"
+                  tooltip="{{tooltipInfo.tooltipSubmitButton}}"
+                  @click="{{onSubmit}}"
+              ></ui5-button>
+            {{/if}}
+            {{#if showSubmitStandardButton}}
+              <udex-control-button
+                  id="submit-button"
+                  class="udex-search__submit-button"
+                  size="Large"
+                  design="Default"
+                  icon="search"
+                  tooltip="{{tooltipInfo.tooltipSubmitButton}}"
+                  @click="{{onSubmit}}"
+              ></udex-control-button>
             {{/if}}
         </div>
     </form>

package/src/Search.ts

@@ -19,9 +19,11 @@ import {
   isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import List from "./List.js";
+import ControlButton from "./ControlButton.js";
 import ListItemBase from "./ListItemBase.js";
-import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/microphone.js";
@@ -36,7 +38,8 @@ import {
   ACCESSIBLE_NAME_SEARCH_ICON,
   TOOLTIP_RESET_BUTTON,
   TOOLTIP_VOICE_BUTTON,
-  TOOLTIP_SUBMIT_BUTTON,
+  LISTENING,
+  OF,
 } from "./generated/i18n/i18n-defaults.js";
 import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
 
@@ -81,6 +84,7 @@ export type SuggestionList = {
   title: string,
   hasCustomIcon: boolean,
   id: string
+  suggestionDescription: string;
 }
 
 export enum Mode {
@@ -101,7 +105,7 @@ export type PopoverPlacement = "Bottom" | "Top";
  * For the <code>udex-search</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Search.js";</code>
+ * <code>import "@sapudex/web-components/dist/Search.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -118,7 +122,7 @@ export type PopoverPlacement = "Bottom" | "Top";
   staticAreaTemplate: SearchSuggestionsTemplate,
   get dependencies() {
     const Suggestion = getFeature<typeof SearchInputSuggestion>("SearchInputSuggestion");
-    return ([Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies, List] : [List]);
+    return ([ControlButton, Button, Icon, List, Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies] : []);
   },
 })
 
@@ -515,7 +519,7 @@ class UDExSearch extends UI5Element {
   }
 
   static async onDefine(): Promise<void> {
-    UDExSearch.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExSearch.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onEnterDOM(): void {
@@ -681,6 +685,7 @@ class UDExSearch extends UI5Element {
         icon: itemWithCustomIcon ? item.icon : SearchIcon,
         hasCustomIcon: itemWithCustomIcon,
         id: `${idName}-${index}`,
+        suggestionDescription: `${label}, ${idName} ${index + 1} ${UDExSearch.i18nBundle.getText(OF)} ${suggestedList.length}`,
       };
     });
   }
@@ -692,6 +697,7 @@ 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>");
   }
@@ -875,7 +881,7 @@ class UDExSearch extends UI5Element {
     if (Suggestion) {
       this.Suggestion = new Suggestion(this);
     } else {
-      throw new Error("You have to import '@udex/webcomponents/dist/features/SearchSuggestionsPopover.js' module to use udex-search suggestions");
+      throw new Error("You have to import '@sapudex/webcomponents/dist/features/SearchSuggestionsPopover.js' module to use udex-search suggestions");
     }
   }
 
@@ -1092,6 +1098,10 @@ class UDExSearch extends UI5Element {
     }
   }
 
+  get effectivePlaceholder() {
+    return !this.voiceActiveClass ? this.label : `${UDExSearch.i18nBundle.getText(LISTENING)}...`;
+  }
+
   onSpeechStart(): void {
     this.speechRecognition.onstart = () => {
       this.voiceActiveClass = this._voiceActiveClassName;
@@ -1146,7 +1156,11 @@ class UDExSearch extends UI5Element {
   }
 
   get isShowResetButton(): boolean {
-    return this.showResetButton && !!this.value.length;
+    return this.showResetButton && !!this.value.length && this.mode === Mode.Standard;
+  }
+
+  get isShowHomeResetButton(): boolean {
+    return this.showResetButton && !!this.value.length && this.mode === Mode.HomeSearch;
   }
 
   get noResultMessage(): string {
@@ -1212,7 +1226,7 @@ class UDExSearch extends UI5Element {
   }
 
   get searchClasses(): string {
-    return `${this.classWithPrefix}  ${this.rootClasses}`;
+    return `${this.classWithPrefix}  ${this.rootClasses} udex-search-mode-${this.mode.toLowerCase().replace(" ", "-")}`.trim();
   }
 
   get prefixWrapperClasses(): string {
@@ -1251,28 +1265,45 @@ class UDExSearch extends UI5Element {
   }
 
   get isVoiceButton(): boolean {
-    return this.showVoiceButton && this.isNotMozillaFirefox && this.isNotMozillaFirefoxIOS;
+    return this.showVoiceButton && this.isNotMozillaFirefox && this.isNotMozillaFirefoxIOS && this.mode === Mode.HomeSearch;
   }
 
   get accInfo() {
     return {
       "ariaLabel": this.accessibleName || undefined,
+      "ariaDescription": this.open ? this.suggestionsDescription : undefined,
       "accessibleNameResetIcon": this.accessibleNameResetIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_RESET_ICON) as string,
       "accessibleNameSearchIcon": this.accessibleNameSearchIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON) as string,
     };
   }
 
+  get suggestionsDescription(): string {
+    return this.hasPopoverContent ? `${this.suggestedList.length} ${this._suggestionLabel}, ${this.recommendedList.length} ${this._recommendLabel}` : `${this.noResultText}`;
+  }
+
   get tooltipInfo() {
     return {
       "tooltipResetButton": this.tooltipResetButton || UDExSearch.i18nBundle.getText(TOOLTIP_RESET_BUTTON) as string,
       "tooltipVoiceButton": this.tooltipVoiceButton || UDExSearch.i18nBundle.getText(TOOLTIP_VOICE_BUTTON) as string,
-      "tooltipSubmitButton": this.tooltipSubmitButton || UDExSearch.i18nBundle.getText(TOOLTIP_SUBMIT_BUTTON) as string,
+      "tooltipSubmitButton": this.tooltipSubmitButton || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON) as string,
     };
   }
 
   get suggestionsAccessibleName(): string {
     return UDExSearch.i18nBundle.getText(AVAILABLE_VALUES) as string;
   }
+
+  get showNonInteractiveButton(): boolean {
+    return this.showSubmitButton && this.nonInteractiveSubmitButton;
+  }
+
+  get showSubmitStandardButton(): boolean {
+    return this.showSubmitButton && !this.nonInteractiveSubmitButton && this.mode === Mode.Standard;
+  }
+
+  get showSubmitHomeButton(): boolean {
+    return this.showSubmitButton && !this.nonInteractiveSubmitButton && this.mode === Mode.HomeSearch;
+  }
 }
 
 UDExSearch.define();

package/src/SearchSuggestions.hbs

@@ -30,6 +30,7 @@
                                 icon="{{icon}}"
                                 type="Button"
                                 design="Default"
+                                accessible-name="{{suggestionDescription}}"
                                 class="udex-search-suggestions__item-button"
                                 title="{{title}}"
                                 tabindex="-1"
@@ -61,6 +62,7 @@
                                     design="Default"
                                     class="udex-search-suggestions__item-button"
                                     title="{{title}}"
+                                    accessible-name="{{suggestionDescription}}"
                                     tabindex="-1"
                                     role="option"
                                     @click="{{handleSelectItem}}">
@@ -72,6 +74,7 @@
                                     type="Button"
                                     design="Default"
                                     class="udex-search-suggestions__item-button"
+                                    accessible-name="{{suggestionDescription}}"
                                     title="{{title}}"
                                     tabindex="-1"
                                     role="option"

package/src/SearchableListBase.hbs

@@ -11,6 +11,13 @@
 {{/if}}
 {{#if isListEmpty}}
     <div class="udex-no-result"><span>{{getNoResultText}}&lrm;</span></div>
+{{else if busy}}
+    <ui5-busy-indicator
+        class="udex-busy-indicator"
+        size="Medium"
+        delay="{{busyDelay}}"
+        active>
+    </ui5-busy-indicator>
 {{else}}
     <udex-list
         id="udex-list"

package/src/SearchableListBase.ts

@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import {
   isDown, isUp,
 } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -82,6 +83,24 @@ import { NO_MATCHES_FOUND } from "./generated/i18n/i18n-defaults.js";
 })
 
 class UDExSearchableListBase extends UI5Element {
+  /**
+   * Defines if the component would display a loading indicator.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    busy?: boolean;
+
+  /**
+   * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
+   *
+   * @default 1000
+   * @public
+   */
+  @property({ type: Number, defaultValue: 1000, validator: Integer })
+    busyDelay?: number;
+
   /**
    * Defines the "no result" text of the component.
    *
@@ -136,6 +155,15 @@ class UDExSearchableListBase extends UI5Element {
   @slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
     items!: Array<UDExListItemBase | UDExListGroupHeaderBase>;
 
+  /**
+   * Defines the default accessible role for the list componnet.
+   *
+   * @default "list"
+   * @public
+   */
+  @property({ type: String, defaultValue: "list" })
+    defaultAccessibleRole!: string;
+
   @property({ type: Object })
     _filteredItems!: Array<ProcessedItem>;
 
@@ -477,11 +505,11 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get accessibleRoleForList(): string {
-    return this._filteredItems.some(element => element.isGroup) ? "group" : "list";
+    return this._filteredItems.some(element => element.isGroup) ? "group" : this.defaultAccessibleRole;
   }
 
   static async onDefine(): Promise<void> {
-    UDExSearchableListBase.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExSearchableListBase.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 }
 

package/src/SecondaryNavigation.hbs

@@ -59,6 +59,7 @@
     </div>
     <udex-secondary-navigation-item
         @keydown="{{handleKeyDown}}"
+        _max-height="{{maxDropdownHeight}}"
         class="udex-secondary-navigation__mobile-nav"
         role="button"
         aria-label="{{mobileMenuOpenerAriaLabel}}"