@sapudex/web-components 0.199.3 → 0.224.0

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}}"

package/src/SecondaryNavigation.ts

@@ -40,7 +40,7 @@ export type ItemClickDetail = {
  * For the <code>udex-secondary-navigation</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SecondaryNavigation.js";</code>
+ * <code>import "@sapudex/web-components/dist/SecondaryNavigation.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -127,6 +127,13 @@ class UDExSecondaryNavigation extends UI5Element {
    */
   @property()
     titleHref!: string;
+  /**
+   * Defines the height of the dropdown opened on mobile screen.
+   *
+   * @public
+   */
+  @property({ type: String })
+    maxDropdownHeight!: string;
 
   @property({ type: Boolean, noAttribute: true })
     _selectedMore!: boolean;
@@ -152,7 +159,7 @@ class UDExSecondaryNavigation extends UI5Element {
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {
-    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {

package/src/SecondaryNavigationItem.hbs

@@ -5,6 +5,7 @@
         ?active="{{isActive}}"
         href="{{path}}"
         target="{{target}}"
+        aria-current="{{ariaCurrent}}"
         @keydown="{{handleItemLinkKeyDown}}"
         @click="{{fireNavItemClickEvent}}">
         {{itemLabel}}
@@ -54,7 +55,7 @@
                             .nestedItems="{{this.items}}"
                             path="{{this.path}}"
                             target="{{this.target}}"
-                            ?is-active="{{this.active}}">
+                            ?active="{{this.active}}">
                         </udex-secondary-navigation-sub-item>
                     </li>
                 {{/each}}

package/src/SecondaryNavigationItem.ts

@@ -16,6 +16,8 @@ import {
   isHome,
   isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
+import parseRelativeUnits, { RelativeValue } from "./utils/parseRelativeUnits.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -38,7 +40,7 @@ export const menuItemRole: string = "menuitem";
  * For the <code>udex-secondary-navigation-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SecondaryNavigationItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/SecondaryNavigationItem.js";</code>
  *
  * @constructor
  * @extends UDExSecondaryNavigationItemBase
@@ -48,7 +50,7 @@ export const menuItemRole: string = "menuitem";
 @customElement({
   tag: "udex-secondary-navigation-item",
   renderer: litRender,
-  styles: SecondaryNavigationItemCss,
+  styles: [SecondaryNavigationItemCss, getEffectiveScrollbarStyle()],
   template: SecondaryNavigationItemTemplate,
   dependencies: [UI5Icon, UDExSecondaryNavigationSubItem],
 })
@@ -131,6 +133,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   @property({ validator: Integer })
     _navItemsLength!: number;
 
+  /**
+   * Defines the height of the dropdown opened on mobile screen.
+   *
+   * @private
+   */
+  @property({ type: String })
+    _maxHeight!: RelativeValue;
+
   /**
    * Defines processed items.
    *
@@ -153,6 +163,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this.onFirstSubItemFocus();
       this._shouldFocusFirstSubItem = false;
     }
+
+    if (this._isMobileView && this.isOpen) {
+      this.setDropdownHeight();
+    }
   }
 
   onBeforeRendering() : void {
@@ -337,16 +351,36 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._processedItems = this.subItems;
   }
 
+  setDropdownHeight(): void {
+    if (!this._maxHeight || this._dropdownMaxHeightExceeds || !this.heightSatisfiesType) {
+      const secondaryNavigationMobileTrigger = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!;
+      const maxDropdownHeight = window.innerHeight - secondaryNavigationMobileTrigger.clientHeight;
+      this.style.setProperty("--udex-secondary-navigation-item-dropdown-max-height", `${maxDropdownHeight}px`);
+      return;
+    }
+
+    this.style.setProperty("--udex-secondary-navigation-item-dropdown-max-height", `${this._maxHeight}`);
+  }
+
+  get _dropdownMaxHeightExceeds(): boolean {
+    const normalizedHeight = parseRelativeUnits(this._maxHeight, this.dropdown);
+    const secondaryNavigationMobileTriggerHeight = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!.clientHeight;
+    return normalizedHeight >= window.innerHeight - secondaryNavigationMobileTriggerHeight;
+  }
+
+  get heightSatisfiesType(): boolean {
+    return /vh|vw|%|em|rem|px/.test(this._maxHeight);
+  }
+
   setDropdownHorizontalAlign(): void {
-    const dropdown = this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown");
-    const { right, left } = dropdown!.getBoundingClientRect();
+    const { right, left } = this.dropdown.getBoundingClientRect();
 
     if (right > window.innerWidth) {
-      dropdown?.setAttribute("data-horizontal-align", "right");
+      this.dropdown.setAttribute("data-horizontal-align", "right");
     }
 
     if (left < 0) {
-      dropdown?.setAttribute("data-horizontal-align", "left");
+      this.dropdown.setAttribute("data-horizontal-align", "left");
     }
   }
 
@@ -373,6 +407,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._shouldFocusFirstSubItem = true;
   }
 
+  get dropdown(): HTMLElement {
+    return this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown")!;
+  }
+
   get isLastItem(): boolean {
     return this._navItemsLength === this.index;
   }

package/src/SecondaryNavigationItemBase.ts

@@ -142,6 +142,10 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
   get isMobile(): boolean {
     return BreakpointUtils.isAtMost("S");
   }
+
+  get ariaCurrent(): string | null {
+    return this.active ? "page" : null;
+  }
 }
 
 export default UDExSecondaryNavigationItemBase;

package/src/SecondaryNavigationSubItem.hbs

@@ -22,7 +22,8 @@
             aria-haspopup="{{hasItems}}"
             ?sub-active="{{isSubItemActive}}"
             aria-label="{{label}}"
-            ?active="{{isActive}}"
+            ?active="{{active}}"
+            aria-current="{{ariaCurrent}}"
             class="udex-secondary-navigation__dropdown-item">
             {{itemLabel}}
             {{#if hasItems}}
@@ -39,7 +40,8 @@
             role="menuitem"
             href="{{path}}"
             target="{{target}}"
-            ?active="{{isActive}}"
+            ?active="{{active}}"
+            aria-current="{{ariaCurrent}}"
             class="udex-secondary-navigation__dropdown-item">
             {{itemLabel}}
         </a>