@sapudex/web-components 2.5.0 → 2.7.0

package/src/MastheadCountrySelector.ts

@@ -4,6 +4,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import {
@@ -15,6 +17,7 @@ import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCount
 import AnalyticsName from "./types/AnalyticsName.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExMastheadShell from "./MastheadShell.js";
+import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
@@ -193,7 +196,12 @@ class UDExMastheadCountrySelector extends UI5Element {
   _activeCountries!: Array<Country>;
   _shouldFocusBackBtn!: boolean;
   _shouldFocusRegionByIndex!: boolean;
+  _accSearchResultInfo?: string;
   _activeRegionIndex!: number;
+  _mastheadShell!: UDExMastheadShell;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
 
   constructor() {
     super();
@@ -201,6 +209,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   onAfterRendering(): void {
+    this._mastheadShell = this.mastheadShell;
     this.handleFocusItem();
     this.setTabIndexForItems();
     this.handleDirection();
@@ -222,6 +231,13 @@ class UDExMastheadCountrySelector extends UI5Element {
     this.fireEventRegionItemClick(e);
   }
 
+  handleCountryClick(e: CustomEvent): void {
+    this.fireEventCountryItemClick(e);
+    if (this._mastheadShell && this.isMobile) {
+      this.closeMenu();
+    }
+  }
+
   handleKeyDown(e: KeyboardEvent): void {
     const item = e.target as UDExMastheadMenuItem;
 
@@ -291,6 +307,10 @@ class UDExMastheadCountrySelector extends UI5Element {
       this.setActiveCountries(this._activeRegion.countries.filter(country => country.displayTitle.toLowerCase().includes(searchTerm)));
     }
 
+    this._accSearchResultInfo = this._activeCountries.length
+      ? `${this._activeCountries.length} ${this.resultReturnedText}`
+      : this.noMatchesFoundText;
+
     this._shouldFocusBackBtn = false;
     this.fireDecoratorEvent("country-selector-search", {
       value: e.detail.value,
@@ -468,6 +488,19 @@ class UDExMastheadCountrySelector extends UI5Element {
     });
   }
 
+  closeMenu():void {
+    this._mastheadShell.closeMobileMenu();
+    this._mastheadShell.mobileBtn?.focus();
+  }
+
+  get noMatchesFoundText(): string {
+    return UDExMastheadCountrySelector.i18nBundle.getText(NO_MATCHES_FOUND);
+  }
+
+  get resultReturnedText(): string {
+    return UDExMastheadCountrySelector.i18nBundle.getText(RESULT_RETURNED);
+  }
+
   get items(): Array<UDExMastheadMenuItem> {
     const items = this.shadowRoot?.querySelectorAll<UDExMastheadMenuItem>(".udex-masthead-country-selector__item");
     return items ? Array.from(items) : [];

package/src/MastheadMenu.hbs

@@ -42,7 +42,9 @@
         category="{{this.category}}">
         {{#each this.items}}
             <li>
-                {{#if this.url}}
+                {{#if this.isDivider}}
+                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                {{else}}
                     <udex-masthead-menu-item
                         part="menu-item"
                         exportparts="menu-item"
@@ -53,8 +55,6 @@
                         label="{{this.title}}"
                         exportparts="badge">
                     </udex-masthead-menu-item>
-                {{else}}
-                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
                 {{/if}}
             </li>
         {{/each}}

package/src/MastheadMenu.ts

@@ -24,6 +24,7 @@ export type Item = {
   title: string;
   url: string;
   externalLink: boolean;
+  isDivider?: boolean;
 };
 
 export type SubMenuLinkItem = {
@@ -178,10 +179,16 @@ class UDExMastheadMenu extends UI5Element {
   get itemsList(): Array<MenuItem> {
     let id = 1;
     const parsedItems: Array<MenuItem> = parseArrayFromString(this.subItems);
+
     return parsedItems.map((mainItem: MenuItem) => {
-      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((category: SubMenuLinkItem) => {
-        category.categoryId = `${id++}`;
-        return category;
+      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((subMenu: SubMenuLinkItem) => {
+        subMenu.categoryId = `${id++}`;
+        subMenu.items = subMenu.items.map((item: Item) => ({
+          ...item,
+          ...(item.title === "-" && { isDivider: true }),
+        }));
+
+        return subMenu;
       });
 
       return mainItem;

package/src/MastheadMobileMenu.hbs

@@ -102,8 +102,7 @@
                     first-level-btn
                     first-level
                     has-border
-                    icon-end
-                    first-level>
+                    icon-end>
                 </udex-masthead-menu-item>
             {{else}}
                 <udex-masthead-menu-item
@@ -139,7 +138,6 @@
                 <udex-masthead-menu-item
                     part="menu-item"
                     @click="{{../handleMenuCategoryClick}}"
-                    url="{{this.url}}"
                     id="{{@index}}"
                     label="{{this.category}}"
                     aria-has-popup="true"

package/src/MastheadMobileMenu.ts

@@ -15,10 +15,14 @@ import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
+import type UDExMastheadShell from "./MastheadShell.js";
 
 // Styles
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
 
+const INDEX_OFFSET_WITH_OVERVIEW = 2;
+const INDEX_OFFSET_WITHOUT_OVERVIEW = 1;
+
 type UDExMastheadMobileMenuItemClickEventDetail = {
   originalEvent: PointerEvent | KeyboardEvent,
   item: UDExMastheadMenuItem,
@@ -130,8 +134,10 @@ class UDExMastheadMobileMenu extends UI5Element {
   _shouldFocusExploreBtn!: boolean;
   _focusedItemIndex!: number;
   _navItem?: UDExMastheadMenuItem;
+  _mastheadShell!: UDExMastheadShell;
 
   onAfterRendering() {
+    this._mastheadShell = this.mastheadShell;
     this.handleMenuMode();
     this.setTabIndexForItems();
     this.handleFocusItem();
@@ -171,7 +177,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   handleBackToCategories(e: PointerEvent) {
     e.stopPropagation();
     this.showCategories();
-    this.setFocusItemByIndex(this._category.index + 1);
+    this.setFocusItemByIndex(this._category.index);
     this.fireMobileItemEvent(e);
   }
 
@@ -280,7 +286,7 @@ class UDExMastheadMobileMenu extends UI5Element {
 
     if (target.hasAttribute("is-back-to-categories")) {
       this.showCategories();
-      this.setFocusItemByIndex(this._category.index + 1);
+      this.setFocusItemByIndex(this._category.index);
       this.fireMobileItemEvent(e);
     }
 
@@ -400,8 +406,9 @@ class UDExMastheadMobileMenu extends UI5Element {
 
   openCategoryItems(e: Event) {
     const item = e.target as UDExMastheadMenuItem;
+    const indexOffset = this._clickedItem.href ? INDEX_OFFSET_WITH_OVERVIEW : INDEX_OFFSET_WITHOUT_OVERVIEW;
     const index = Number(item.getAttribute("id"));
-    this._category = { ...this._categories[index], index };
+    this._category = { ...this._categories[index], index: index + indexOffset };
     this._showCategories = false;
     this._showCategoryItems = true;
   }
@@ -432,6 +439,10 @@ class UDExMastheadMobileMenu extends UI5Element {
     };
 
     this.fireDecoratorEvent("item-click", eventDetail);
+
+    if (item.url && this._mastheadShell) {
+      this.closeMenu();
+    }
   }
 
   fireExploreSapMobileButton(e: PointerEvent | KeyboardEvent) {
@@ -526,6 +537,15 @@ class UDExMastheadMobileMenu extends UI5Element {
     return analyticsPath;
   }
 
+  closeMenu():void {
+    this._mastheadShell.closeMobileMenu();
+    this._mastheadShell.mobileBtn?.focus();
+  }
+
+  get mastheadShell(): UDExMastheadShell {
+    return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
+  }
+
   get exploreBtnMenu(): UDExMastheadMenuItem {
     return this.shadowRoot!.querySelector<UDExMastheadMenuItem>(".udex-masthead-mobile-menu__explore-btn")!;
   }

package/src/MastheadProfileMenu.ts

@@ -12,6 +12,7 @@ import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMe
 import type UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import type UDExMastheadShell from "./MastheadShell.js";
 
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
@@ -120,7 +121,27 @@ class UDExMastheadProfileMenu extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
+  _mastheadShell!: UDExMastheadShell;
+
+  onAfterRendering(): void {
+    this._mastheadShell = this.mastheadShell;
+  }
+
   handleUserLogoutItemClick(e: PointerEvent): void {
+    this.fireLogoutItemClick(e);
+    if (this.shouldCloseMenu) {
+      this.closeMenu();
+    }
+  }
+
+  handleProfileMenuItemClick(e: CustomEvent): void {
+    this.fireMenuItemClick(e);
+    if (this.shouldCloseMenu) {
+      this.closeMenu();
+    }
+  }
+
+  fireLogoutItemClick(e: PointerEvent): void {
     const item = e.target as UDExMastheadMenuItem;
 
     this.fireDecoratorEvent("logout", {
@@ -131,7 +152,7 @@ class UDExMastheadProfileMenu extends UI5Element {
     });
   }
 
-  handleProfileMenuItemClick(e: CustomEvent): void {
+  fireMenuItemClick(e: CustomEvent): void {
     const { item, originalEvent } = e.detail;
 
     this.fireDecoratorEvent("profile-item-click", {
@@ -142,6 +163,15 @@ class UDExMastheadProfileMenu extends UI5Element {
     });
   }
 
+  closeMenu():void {
+    this._mastheadShell.closeMobileMenu();
+    this._mastheadShell.mobileBtn?.focus();
+  }
+
+  get shouldCloseMenu(): boolean {
+    return this._mastheadShell && this._mastheadShell.isMobileMenuMode;
+  }
+
   get linksList(): string {
     return this.links ? JSON.stringify([{
       subMenuLinkItems: JSON.parse(this.links),
@@ -163,6 +193,10 @@ class UDExMastheadProfileMenu extends UI5Element {
   get logoutText(): string {
     return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);
   }
+
+  get mastheadShell(): UDExMastheadShell {
+    return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
+  }
 }
 
 UDExMastheadProfileMenu.define();

package/src/MastheadShell.hbs

@@ -52,7 +52,7 @@
         {{/if}}
     {{/if}}
 
-    <div class="udex-masthead-shell__right-menu">
+    <div class="{{rightMenuClass}}">
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item
                 @ui5-item-click="{{handleOpenMobileMenu}}"
@@ -72,47 +72,47 @@
             </div>
         {{/if}}
         {{#if hasSearch}}
-            <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
-                <udex-masthead-item
+          <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
+            <udex-masthead-item
                     class="udex-masthead-shell__search-btn"
                     icon="search"
                     part="search-button"
                     @click="{{handleSearchClick}}"
                     accessible-name="search">
-                </udex-masthead-item>
-            </div>
+            </udex-masthead-item>
+          </div>
         {{/if}}
         {{#if hasCart}}
-            <div
-                class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleCartClick}}">
-                <slot name="cart"></slot>
-            </div>
+          <div
+                  class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
+                  @ui5-item-click="{{setSelectedItem}}"
+                  @click="{{handleCartClick}}">
+            <slot name="cart"></slot>
+          </div>
         {{/if}}
         {{#if hasSupport}}
-            <div
-                class="udex-masthead-shell__support udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleSupportClick}}">
-                <slot name="support"></slot>
-            </div>
+          <div
+                  class="udex-masthead-shell__support udex-masthead-shell__item_icon"
+                  @ui5-item-click="{{setSelectedItem}}"
+                  @click="{{handleSupportClick}}">
+            <slot name="support"></slot>
+          </div>
         {{/if}}
         {{#if hasProfile}}
-            <div
-                class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleProfileClick}}">
-                <slot name="profile"></slot>
-            </div>
+          <div
+                  class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
+                  @ui5-item-click="{{setSelectedItem}}"
+                  @click="{{handleProfileClick}}">
+            <slot name="profile"></slot>
+          </div>
         {{/if}}
         {{#if hasCountrySelector}}
-            <div
-                class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleCountrySelectorClick}}">
-                <slot name="countrySelector"></slot>
-            </div>
+          <div
+                  class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
+                  @ui5-item-click="{{setSelectedItem}}"
+                  @click="{{handleCountrySelectorClick}}">
+            <slot name="countrySelector"></slot>
+          </div>
         {{/if}}
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item

package/src/MastheadShell.ts

@@ -46,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
  *
@@ -453,6 +464,7 @@ class UDExMastheadShell extends UI5Element {
   _handleResizeBound: ResizeObserverCallback;
   _rootHolder!: HTMLElement | null | undefined;
   _shouldHandleResize!: boolean;
+  _isVisible!: boolean;
 
   constructor() {
     super();
@@ -477,6 +489,8 @@ class UDExMastheadShell extends UI5Element {
     if (this._closeBtnClicked) {
       this.focusSearchBtn();
     }
+
+    this.updateVisibility();
   }
 
   onEnterDOM(): void {
@@ -526,6 +540,8 @@ class UDExMastheadShell extends UI5Element {
       } else {
         this.removeMobileMode();
       }
+
+      this._isVisible = true;
     }
   }
 
@@ -721,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);
   }
 
@@ -760,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);
   }
 
@@ -803,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 {
@@ -815,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,
@@ -997,17 +1031,32 @@ class UDExMastheadShell extends UI5Element {
     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 coBrandWithoutNavClass = (!!this.coBrandImage && !this.menuItems.length) ? "udex-masthead-shell_co-brand-without-nav" : "";
-    return `udex-masthead-shell ${coBrandWithoutNavClass}`.trim();
+    const root = "udex-masthead-shell";
+    const coBrandWithoutNavClass = (!!this.coBrandImage && !this.menuItems.length) ? `${root}_co-brand-without-nav` : "";
+    return `${root} ${coBrandWithoutNavClass}`.trim();
   }
 }
 

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>