@sapudex/web-components 2.4.2 → 2.6.0

package/src/MastheadShell.ts

@@ -13,6 +13,7 @@ import {
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/search.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
@@ -23,9 +24,9 @@ import type UDExSearch from "./Search.js";
 import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
 import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import type UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
-import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
@@ -45,6 +46,17 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
   analyticsName: AnalyticsName,
 }
 
+export enum UDExMastheadVariable {
+  mobileMenuHeight = "--udex-masthead-shell-mobile-menu-height",
+  itemButtonIconSize = "--udex-masthead-item-button-icon-size",
+  itemArrowIconSize = "--udex-masthead-item-arrow-icon-size",
+  rightMenuPadding = "--udex-masthead-right-menu-padding",
+  exploreMargin = "--udex-masthead-shell-explore-margin",
+  itemIconGap = "--udex-masthead-shell-item-icon-gap",
+  mastheadHeight = "--udex-masthead-shell-height",
+  itemGap = "--udex-masthead-shell-item-gap",
+}
+
 /**
  * @class
  *
@@ -161,6 +173,13 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  */
 @event("site-label-click", { bubbles: true })
 
+/**
+ * Fired event when the user clicks the co-brand.
+ *
+ * @public
+ */
+@event("co-brand-click", { bubbles: true })
+
 class UDExMastheadShell extends UI5Element {
   eventDetails!: {
     "mobile-menu-open": UDExMastheadShellAnalyticsNameEventDetail,
@@ -175,6 +194,7 @@ class UDExMastheadShell extends UI5Element {
     "search-close-click": UDExMastheadShellBaseEventDetail,
     "logo-click": UDExMastheadShellBaseEventDetail,
     "site-label-click": UDExMastheadShellBaseEventDetail,
+    "co-brand-click": UDExMastheadShellBaseEventDetail,
   };
   /**
    * Slot for country selector item.
@@ -248,17 +268,17 @@ class UDExMastheadShell extends UI5Element {
    * @default undefined
    * @public
    */
-  @property({ type: String })
+  @property()
     homeUrl?: string;
 
   /**
    * Defines URL for site label. It will be used as a link on a logo and a site label
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    siteLabelUrl: string = "";
+  @property()
+    siteLabelUrl?: string;
 
   /**
    * Defines overflow style for the body after clicking mobile menu opener button
@@ -288,66 +308,121 @@ class UDExMastheadShell extends UI5Element {
     stickyPosition!: boolean;
 
   /**
-   * Defines the Logo image URL
+   * Defines the co-brand image
    *
-   * @default ""
+   * @default undefined
+   * @public
+   */
+  @property()
+    coBrandImage?: string;
+
+  /**
+   * Defines an alt text for the co-brand image
+   *
+   * @default undefined
    * @public
    */
   @property({ type: String })
-    logoUrl: string = "";
+    coBrandAlt?: string;
+
+  /**
+   * Defines the co-brand URL
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    coBrandUrl?: string;
+
+  /**
+   * Defines the default tooltip title for co-brand
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    coBrandTitle?: string;
+
+  /**
+   * Defines an aria label for the co-brand link
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    coBrandAriaLabel?: string;
+
+  /**
+   * Defines the Logo image URL
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    logoUrl?: string;
 
   /**
    * Defines the Logo default title
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    logoTitle: string = "";
+  @property()
+    logoTitle?: string;
+
+  /**
+   * Defines the default tooltip title for site label
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    siteLabelTitle?: string;
 
   /**
    * Defines a site label. It will be displayed next to a logo.
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    siteLabel: string = "";
+  @property()
+    siteLabel?: string;
 
   /**
    * Defines an alt text for logo
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    logoAlt: string = "";
+  @property()
+    logoAlt?: string;
 
   /**
    * Defines an accessible name for close icon for the search bar
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    closeButtonAccessibleName: string = "";
+  @property()
+    closeButtonAccessibleName?: string;
+
   /**
    * Defines an aria label for the homepage link
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    homepageAriaLabel: string = "";
+  @property()
+    homepageAriaLabel?: string;
 
   /**
    * Defines an aria label for the site label
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    siteLabelAriaLabel: string = "";
+  @property()
+    siteLabelAriaLabel?: string;
 
   /**
    * Defines if the search container is opened
@@ -389,6 +464,7 @@ class UDExMastheadShell extends UI5Element {
   _handleResizeBound: ResizeObserverCallback;
   _rootHolder!: HTMLElement | null | undefined;
   _shouldHandleResize!: boolean;
+  _isVisible!: boolean;
 
   constructor() {
     super();
@@ -413,10 +489,15 @@ class UDExMastheadShell extends UI5Element {
     if (this._closeBtnClicked) {
       this.focusSearchBtn();
     }
+
+    this.updateVisibility();
   }
 
   onEnterDOM(): void {
     ResizeHandler.register(this, this._handleResizeBound);
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
   }
 
   onExitDOM(): void {
@@ -459,6 +540,8 @@ class UDExMastheadShell extends UI5Element {
       } else {
         this.removeMobileMode();
       }
+
+      this._isVisible = true;
     }
   }
 
@@ -513,6 +596,10 @@ class UDExMastheadShell extends UI5Element {
     this.fireMastheadEvent("site-label-click", e);
   }
 
+  handleCoBrandClick(e: PointerEvent): void {
+    this.fireMastheadEvent("co-brand-click", e);
+  }
+
   handleSearchClick(e: PointerEvent): void {
     e.stopPropagation();
     this.fireMastheadEvent("search-click", e);
@@ -552,7 +639,7 @@ class UDExMastheadShell extends UI5Element {
       this.setOverflowBody();
     }
 
-    this.fireDecoratorEvent("mobile-menu-open");
+    this.fireMastheadEvent("mobile-menu-open");
   }
 
   handleCloseSearch(e: PointerEvent): void {
@@ -650,26 +737,40 @@ class UDExMastheadShell extends UI5Element {
     const itemsIcon = [...this.shadowRoot!.querySelectorAll<HTMLDivElement>(".udex-masthead-shell__item_icon")];
     const itemIconWidths = itemsIcon.length * this.getItemIconWidth();
     const itemIconGaps = itemsIcon.length * this.getItemIconGap();
-    const exploreSAPWidth = this.hasExploreSAP ? this.getItemWidth(this.exploreSAP[0]) : 0;
+    const exploreItem = this.exploreSAP[0];
+    const exploreItemIconWidth = exploreItem.hasArrowDown ? this.getItemArrowIconWidth() : 0;
+    const exploreSAPWidth = this.hasExploreSAP ? this.getItemWidth(exploreItem) : 0;
     const rightMenuGaps = this.getRightMenuGap() + this.getExploreSapBtnGap() + itemIconGaps;
-    return exploreSAPWidth + itemIconWidths + rightMenuGaps;
+    return exploreSAPWidth + exploreItemIconWidth + itemIconWidths + rightMenuGaps;
   }
 
-  getItemIconWidth(): number {
+  getItemIconSize(cssVariableName: string): number {
     const item = this.querySelector("[udex-masthead-item]");
 
-    if (!item) { return 0; }
+    if (!item) {
+      return 0;
+    }
 
     const style = window.getComputedStyle(item);
-    const itemIconWidthVar = style.getPropertyValue("--udex-masthead-item-button-icon-size");
-    return parseInt(itemIconWidthVar);
+    const iconSizeVar = style.getPropertyValue(cssVariableName);
+    return parseInt(iconSizeVar);
+  }
+
+  getItemIconWidth(): number {
+    return this.getItemIconSize(UDExMastheadVariable.itemButtonIconSize);
+  }
+
+  getItemArrowIconWidth(): number {
+    return this.getItemIconSize(UDExMastheadVariable.itemArrowIconSize);
   }
 
   getMainMenuWidth(): number {
     const mainItems = this.getSlottedNodes("menuItems");
-    const gapItemVar = this.getRootVar("--udex-masthead-shell-item-gap");
+    const gapItemVar = this.getRootVar(UDExMastheadVariable.itemGap);
     return mainItems.reduce((accumulatedWidth, item, index) => {
-      return accumulatedWidth + this.getItemWidth(item as UDExMastheadItem) + (index && parseInt(gapItemVar));
+      const mainItem = item as UDExMastheadItem;
+      const arrowIconWidth = mainItem.hasArrowDown ? this.getItemArrowIconWidth() : 0;
+      return accumulatedWidth + this.getItemWidth(mainItem) + (index && parseInt(gapItemVar) + arrowIconWidth);
     }, 0);
   }
 
@@ -689,17 +790,17 @@ class UDExMastheadShell extends UI5Element {
   }
 
   getItemIconGap(): number {
-    const gapIconItemVar = this.getRootVar("--udex-masthead-shell-item-icon-gap");
+    const gapIconItemVar = this.getRootVar(UDExMastheadVariable.itemIconGap);
     return parseInt(gapIconItemVar);
   }
 
   getExploreSapBtnGap(): number {
-    const exploreSapBtnGapVar = this.getRootVar("--udex-masthead-shell-explore-margin");
+    const exploreSapBtnGapVar = this.getRootVar(UDExMastheadVariable.exploreMargin);
     return this.hasExploreSAP ? parseInt(exploreSapBtnGapVar) : 0;
   }
 
   getRightMenuGap(): number {
-    const rightMenuGapVar = this.getRootVar("--udex-masthead-right-menu-padding");
+    const rightMenuGapVar = this.getRootVar(UDExMastheadVariable.rightMenuPadding);
     return parseInt(rightMenuGapVar);
   }
 
@@ -732,9 +833,9 @@ class UDExMastheadShell extends UI5Element {
   }
 
   setMobileMenuHeight(): void {
-    const mastheadHeight = parseInt(window.getComputedStyle(this).getPropertyValue("--udex-masthead-shell-height"));
+    const mastheadHeight = parseInt(window.getComputedStyle(this).getPropertyValue(UDExMastheadVariable.mastheadHeight));
     const mobileMenuHeight = `${window.innerHeight - mastheadHeight}px`;
-    this.style.setProperty("--udex-masthead-shell-mobile-menu-height", mobileMenuHeight);
+    this.style.setProperty(UDExMastheadVariable.mobileMenuHeight, mobileMenuHeight);
   }
 
   removeMobileMode(): void {
@@ -744,6 +845,10 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
+  updateVisibility(): void {
+    this.style.opacity = this.isVisible ? "1" : "0";
+  }
+
   fireMastheadEvent(eventName: keyof this["eventDetails"], e?: PointerEvent): void {
     const eventDetails = {
       analyticsName: AnalyticsName.Header,
@@ -814,7 +919,7 @@ class UDExMastheadShell extends UI5Element {
       this.removeOverflowBody();
     }
 
-    this.fireDecoratorEvent("mobile-menu-close");
+    this.fireMastheadEvent("mobile-menu-close");
   }
 
   get slottedItems(): (MastheadSlottedItem)[] {
@@ -919,20 +1024,40 @@ class UDExMastheadShell extends UI5Element {
   }
 
   get isMainMenuVisible(): boolean {
-    return !this.showSearchByDefault && !this._isSearchOpened;
+    return !this.showSearchByDefault && !this._isSearchOpened && !!this.menuItems.length;
   }
 
   get isSearchVisible(): boolean {
     return this.showSearchByDefault || this._isSearchOpened;
   }
 
+  get isVisible(): boolean {
+    return this.isMobileMenuMode || !this.menuItems.length || this._isVisible;
+  }
+
   get shouldHandleMobileView(): boolean {
-    return !this.isAtMostBreakpointSizeM && !this.showSearchByDefault;
+    return !this.isAtMostBreakpointSizeM && this.isMainMenuVisible;
   }
 
   get mainNavigationAriaLabel(): string {
     return UDExMastheadShell.i18nBundle.getText(MAIN_LINKS);
   }
+
+  get isSimpleExploreMode(): boolean {
+    return !this.hasSearch && !this.hasProfile && !this.hasCart && !this.hasSupport && !this.hasCountrySelector;
+  }
+
+  get rightMenuClass(): string {
+    const root = "udex-masthead-shell__right-menu";
+    const simpleExploreClass = this.isSimpleExploreMode ? `${root}_simple-explore` : "";
+    return `${root} ${simpleExploreClass}`.trim();
+  }
+
+  get mainClass(): string {
+    const root = "udex-masthead-shell";
+    const coBrandWithoutNavClass = (!!this.coBrandImage && !this.menuItems.length) ? `${root}_co-brand-without-nav` : "";
+    return `${root} ${coBrandWithoutNavClass}`.trim();
+  }
 }
 
 UDExMastheadShell.define();

package/src/Modal.ts

@@ -5,10 +5,10 @@ import Dialog from "@ui5/webcomponents/dist/Dialog.js";
 import Popup from "@ui5/webcomponents/dist/Popup.js";
 
 // Styles
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import PopupsCommonCss from "@ui5/webcomponents/dist/generated/themes/PopupsCommon.css.js";
 import dialogCSS from "@ui5/webcomponents/dist/generated/themes/Dialog.css.js";
 import ModalCss from "./generated/themes/Modal.css.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 export enum UDExModalType {
   default = "default",
@@ -32,10 +32,10 @@ export enum UDExModalType {
   renderer: jsxRenderer,
   styles: [
     Popup.styles,
-    getEffectiveScrollbarStyle(),
     PopupsCommonCss,
     dialogCSS,
     ModalCss,
+    getEffectiveScrollbarStyle(),
   ],
 })
 class UDExModal extends Dialog {

package/src/Search.hbs

@@ -18,7 +18,7 @@
                 class="{{prefixPopoverClasses}}"
                 hide-arrow
                 placement="Bottom"
-	            horizontal-align="Start"
+	              horizontal-align="Start"
                 style="{{prefixPopoverStyles}}"
                 @after-close="{{handleAfterClosePrefixPopover}}">
                 <slot></slot>

package/src/Search.ts

@@ -19,7 +19,6 @@ 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";
@@ -45,13 +44,15 @@ import {
   OF,
 } from "./generated/i18n/i18n-defaults.js";
 import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
+import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
+import UDExButton from "./Button.js";
 
 import SearchTemplate from "./generated/templates/SearchTemplate.lit.js";
 
 // Styles
 import SearchCss from "./generated/themes/Search.css.js";
 import SearchSuggestionsCss from "./generated/themes/SearchSuggestions.css.js";
-import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 const SearchIcon: string = "sap-icon://search";
 
@@ -129,11 +130,11 @@ export type UDExSearchKeydownEventDetail = {
 @customElement({
   tag: "udex-search",
   renderer: litRender,
-  styles: [SearchCss, SearchSuggestionsCss],
+  styles: [SearchCss, SearchSuggestionsCss, getEffectiveScrollbarStyle()],
   template: SearchTemplate,
   get dependencies() {
     const Suggestion = getFeature<typeof SearchInputSuggestion>("SearchInputSuggestion");
-    return ([ControlButton, Button, Icon, List, Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies] : []);
+    return ([ControlButton, UDExButton, Icon, List, Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies] : []);
   },
 })
 

package/src/SearchableListBase.hbs

@@ -8,13 +8,19 @@
         non-interactive-submit-button
         show-submit-button>
     </udex-search>
+    <span
+        aria-live="polite"
+        aria-atomic="true"
+        class="hidden">
+        {{_accSearchResultInfo}}
+    </span>
 {{/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"
+        size="M"
         delay="{{busyDelay}}"
         active>
     </ui5-busy-indicator>

package/src/SearchableListBase.ts

@@ -4,18 +4,17 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import {
-  isDown, isUp,
-} from "@ui5/webcomponents-base/dist/Keys.js";
+import type Popover from "@ui5/webcomponents/dist/Popover.js";
+import { isDown, isUp } from "@ui5/webcomponents-base/dist/Keys.js";
 import { cleanLabel } from "./utils/listItemLabelUtils.js";
-import type Search from "./Search.js";
+import type UDExSearch from "./Search.js";
 import type UDExListItemBase from "./ListItemBase.js";
 import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import { UDExListMode } from "./types/List.js";
 import type UDExFilterMenuItem from "./FilterMenuItem.js";
 import type { UDExProcessedItem } from "./types/SearchableListBase.js";
-import { SHOW_SEARCH_AFTER_COUNT } from "./types/SearchableListBase.js";
-import { NO_MATCHES_FOUND } from "./generated/i18n/i18n-defaults.js";
+import { SHOW_SEARCH_AFTER_COUNT, UDExPopoverPart } from "./types/SearchableListBase.js";
+import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
 
 export type UDExItemFromList = UDExListItemBase | UDExListGroupHeaderBase | null | undefined;
 
@@ -88,6 +87,22 @@ export type UDExSearchableListBaseEvents = {
 
 class UDExSearchableListBase extends UI5Element {
   eventDetails!: UDExSearchableListBaseEvents;
+  /**
+   * Allows control over the height.
+   * @public
+   */
+  @property({ type: String })
+    height?: string;
+
+  /**
+   * Defines if page scrolling should be prevented within the list of items.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    preventPageScroll = false;
+
   /**
    * Defines if the component would display a loading indicator.
    *
@@ -185,6 +200,7 @@ class UDExSearchableListBase extends UI5Element {
   static i18nBundle: I18nBundle;
 
   _shouldFilterItems?: boolean;
+  _accSearchResultInfo?: string;
 
   constructor() {
     super();
@@ -280,6 +296,8 @@ class UDExSearchableListBase extends UI5Element {
     const searchValue: string = e.detail.value;
     this._shouldFilterItems = true;
     this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
+    const items = this.getFlattenItemsArray(this._filteredItems);
+    this._accSearchResultInfo = items.length ? `${items.length} ${this.resultReturnedText}` : this.noMatchesFoundText;
     this.fireDecoratorEvent("change-search", { value: searchValue });
   }
 
@@ -324,6 +342,10 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   checkAndUpdateLabel(item: UDExListItemBase | UDExListGroupHeaderBase, str: string): boolean {
+    if (!item.label) {
+      console.warn("A label property is required for the item");
+      return false;
+    }
     const cleanedLabel = cleanLabel(item.label);
     if (this.isIncludes(cleanedLabel, str)) {
       item.label = this.addSearchTermTag(cleanedLabel, str);
@@ -436,12 +458,28 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
+  getFlattenItemsArray(array: Array<UDExProcessedItem>): (UDExProcessedItem | UDExListItemBase)[] {
+    return array.flatMap(item => {
+      if (item.isGroup) {
+        return [
+          item,
+          ...item.groupItems.filter(groupItem => !groupItem.disabled),
+        ];
+      }
+      return item.item.disabled ? [] : [item.item];
+    });
+  }
+
   getCurrentIndex(item: Element): number {
     return this.getDomListItems().indexOf(item);
   }
 
-  getSearch(): Search {
-    return this.shadowRoot!.querySelector<Search>("[udex-search]")!;
+  getSearch(): UDExSearch {
+    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
+  }
+
+  getPopover(): Popover {
+    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
   getDomListItems(): Element[] {
@@ -476,9 +514,31 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
+  getPopoverPart(part: UDExPopoverPart): HTMLElement {
+    return this.getPopover().shadowRoot!.querySelector<HTMLElement>(`[part=${part}]`)!;
+  }
+
+  _managePopupListeners(part: UDExPopoverPart, action: "addEventListener" | "removeEventListener"): void {
+    const element = this.getPopoverPart(part);
+    element?.[action]("wheel", ((e: WheelEvent) => e.preventDefault()) as EventListener);
+  }
+
+  _setContentHeight(): void {
+    const content = this.getPopoverPart(UDExPopoverPart.Content);
+    content.style.maxHeight = this.height || "";
+  }
+
   get getNoResultText(): string {
     const hasTextProperty = this.noResultText !== undefined && this.noResultText.length > 0;
-    return hasTextProperty ? this.noResultText : UDExSearchableListBase.i18nBundle.getText(NO_MATCHES_FOUND);
+    return hasTextProperty ? this.noResultText : this.noMatchesFoundText;
+  }
+
+  get noMatchesFoundText(): string {
+    return UDExSearchableListBase.i18nBundle.getText(NO_MATCHES_FOUND);
+  }
+
+  get resultReturnedText(): string {
+    return UDExSearchableListBase.i18nBundle.getText(RESULT_RETURNED);
   }
 
   get isListEmpty(): boolean {

package/src/SecondaryNavigation.ts

@@ -64,7 +64,7 @@ type UDExSecondaryNavigationHeadingClickEventDetail = {
 @customElement({
   tag: "udex-secondary-navigation",
   renderer: litRender,
-  styles: SecondaryNavigationCss,
+  styles: [SecondaryNavigationCss],
   template: SecondaryNavigationTemplate,
   dependencies: [UDExSecondaryNavigationItem],
 })

package/src/SecondaryNavigationItem.ts

@@ -15,7 +15,6 @@ import {
   isHome,
   isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import type { RelativeValue } from "./utils/parseRelativeUnits.js";
 import parseRelativeUnits from "./utils/parseRelativeUnits.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
@@ -63,7 +62,7 @@ export type UDExSecondaryNavigationItemSubItemClickEventDetail = {
 @customElement({
   tag: "udex-secondary-navigation-item",
   renderer: litRender,
-  styles: [SecondaryNavigationItemCss, getEffectiveScrollbarStyle()],
+  styles: [SecondaryNavigationItemCss],
   template: SecondaryNavigationItemTemplate,
   dependencies: [UI5Icon, UDExSecondaryNavigationSubItem],
 })