@sapudex/web-components 2.4.2 → 2.5.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";
@@ -161,6 +162,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 +183,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 +257,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 +297,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
@@ -417,6 +481,9 @@ class UDExMastheadShell extends UI5Element {
 
   onEnterDOM(): void {
     ResizeHandler.register(this, this._handleResizeBound);
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
   }
 
   onExitDOM(): void {
@@ -513,6 +580,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 +623,7 @@ class UDExMastheadShell extends UI5Element {
       this.setOverflowBody();
     }
 
-    this.fireDecoratorEvent("mobile-menu-open");
+    this.fireMastheadEvent("mobile-menu-open");
   }
 
   handleCloseSearch(e: PointerEvent): void {
@@ -814,7 +885,7 @@ class UDExMastheadShell extends UI5Element {
       this.removeOverflowBody();
     }
 
-    this.fireDecoratorEvent("mobile-menu-close");
+    this.fireMastheadEvent("mobile-menu-close");
   }
 
   get slottedItems(): (MastheadSlottedItem)[] {
@@ -919,7 +990,7 @@ class UDExMastheadShell extends UI5Element {
   }
 
   get isMainMenuVisible(): boolean {
-    return !this.showSearchByDefault && !this._isSearchOpened;
+    return !this.showSearchByDefault && !this._isSearchOpened && !!this.menuItems.length;
   }
 
   get isSearchVisible(): boolean {
@@ -933,6 +1004,11 @@ class UDExMastheadShell extends UI5Element {
   get mainNavigationAriaLabel(): string {
     return UDExMastheadShell.i18nBundle.getText(MAIN_LINKS);
   }
+
+  get mainClass(): string {
+    const coBrandWithoutNavClass = (!!this.coBrandImage && !this.menuItems.length) ? "udex-masthead-shell_co-brand-without-nav" : "";
+    return `udex-masthead-shell ${coBrandWithoutNavClass}`.trim();
+  }
 }
 
 UDExMastheadShell.define();

package/src/SearchableListBase.ts

@@ -324,6 +324,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);

package/src/TagGroup.ts

@@ -223,9 +223,10 @@ class UDExTagGroup extends UI5Element {
   showMoreItems(): void {
     if (this.fireDecoratorEvent("show-more-tags")) {
       const tooltip = this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`)!;
-      if (this._nMoreBtn) {
+      const moreBtn = this._tokenizer.moreLink;
+      if (moreBtn) {
         this._tokenizer.expanded = false;
-        tooltip.opener = this._nMoreBtn;
+        tooltip.opener = moreBtn;
         tooltip.open = true;
       }
     }

package/src/generated/templates/MastheadMobileMenuTemplate.lit.ts

@@ -9,23 +9,23 @@ function block0 (this: MastheadMobileMenu, context: UI5Element, tags: string[],
 function block1 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-mobile-menu__list-search"><slot name="search"></slot></div>`;}
 function block2 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }`;}
 function block3 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-mobile-menu__list-item" role="none">${ item.subItems ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }</li>`;}
-function block4 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" aria-has-popup="true" id="${ifDefined(item._id)}" type="Button" has-border icon-end first-level></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" aria-has-popup="true" id="${ifDefined(item._id)}" type="Button" has-border icon-end first-level></udex-masthead-menu-item>`;}
-function block5 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" target="${ifDefined(item.target)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" target="${ifDefined(item.target)}" has-border></udex-masthead-menu-item>`;}
+function block4 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" aria-has-popup="true" id="${ifDefined(item._id)}" type="Button" first-level-btn first-level has-border icon-end first-level></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" aria-has-popup="true" id="${ifDefined(item._id)}" type="Button" first-level-btn first-level has-border icon-end first-level></udex-masthead-menu-item>`;}
+function block5 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" target="${ifDefined(item.target)}" first-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" target="${ifDefined(item.target)}" first-level has-border></udex-masthead-menu-item>`;}
 function block6 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li class="udex-masthead-mobile-menu__list-item" role="none">${ this._hideExploreSapBtn ? block7.call(this, context, tags, suffix) : block8.call(this, context, tags, suffix) }</li>${ this._clickedItem.href ? block11.call(this, context, tags, suffix) : undefined }${ repeat(this._categories, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block12.call(this, context, tags, suffix, item, index)) }`;}
-function block7 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleExploreBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start is-explore-back></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleExploreBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start is-explore-back></udex-masthead-menu-item>`;}
+function block7 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleExploreBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" is-back has-border icon-start is-explore-back></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleExploreBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" is-back has-border icon-start is-explore-back></udex-masthead-menu-item>`;}
 function block8 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNotMultipleMode ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }`;}
 function block9 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__heading" label="${ifDefined(this._clickedItem.innerText)}" type="Heading" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__heading" label="${ifDefined(this._clickedItem.innerText)}" type="Heading" has-border></udex-masthead-menu-item>`;}
-function block10 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" aria-has-popup="true" type="Button" has-border icon-start is-back-to-nav></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" aria-has-popup="true" type="Button" has-border icon-start is-back-to-nav></udex-masthead-menu-item>`;}
-function block11 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" has-border></udex-masthead-menu-item></li>`;}
+function block10 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" aria-has-popup="true" type="Button" is-back has-border icon-start is-back-to-nav></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" aria-has-popup="true" type="Button" is-back has-border icon-start is-back-to-nav></udex-masthead-menu-item>`;}
+function block11 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" second-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" second-level has-border></udex-masthead-menu-item></li>`;}
 function block12 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.category ? block13.call(this, context, tags, suffix, item, index) : block14.call(this, context, tags, suffix, item, index) }`;}
-function block13 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level has-border icon-end></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level has-border icon-end></udex-masthead-menu-item></li>`;}
+function block13 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level-btn second-level has-border icon-end></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level-btn second-level has-border icon-end></udex-masthead-menu-item></li>`;}
 function block14 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ repeat(item.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block15.call(this, context, tags, suffix, item, index)) }`;}
-function block15 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" has-border></udex-masthead-menu-item></li>`;}
-function block16 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-has-popup="true" has-border icon-start is-back-to-categories></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>${ this._category.url ? block17.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block18.call(this, context, tags, suffix, item, index)) }` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-has-popup="true" has-border icon-start is-back-to-categories></udex-masthead-menu-item></li>${ this._category.url ? block17.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block18.call(this, context, tags, suffix, item, index)) }`;}
-function block17 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" has-border></udex-masthead-menu-item></li>`;}
+function block15 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" second-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" second-level has-border></udex-masthead-menu-item></li>`;}
+function block16 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-has-popup="true" has-border icon-start is-back is-back-to-categories></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>${ this._category.url ? block17.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block18.call(this, context, tags, suffix, item, index)) }` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-has-popup="true" has-border icon-start is-back is-back-to-categories></udex-masthead-menu-item></li>${ this._category.url ? block17.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block18.call(this, context, tags, suffix, item, index)) }`;}
+function block17 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" third-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" third-level has-border></udex-masthead-menu-item></li>`;}
 function block18 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.url ? block19.call(this, context, tags, suffix, item, index) : undefined }`;}
-function block19 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></udex-masthead-menu-item></li>`;}
-function block20 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role-text="button" aria-has-popup="true" type="Button" first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role-text="button" aria-has-popup="true" type="Button" first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></udex-masthead-menu-item>`;}
+function block19 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level has-border></udex-masthead-menu-item></li>`;}
+function block20 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role-text="button" aria-has-popup="true" type="Button" first-level-btn first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role-text="button" aria-has-popup="true" type="Button" first-level-btn first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></udex-masthead-menu-item>`;}
 
 function template(this: MastheadMobileMenu) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/MastheadShellTemplate.lit.ts

@@ -5,25 +5,28 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type MastheadShell from "../../MastheadShell.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header class="udex-masthead-shell" @keydown="${this.handleKeyDown}"><div class="udex-masthead-shell__main-content"><div class="udex-masthead-shell__landing-wrap">${ this.logoUrl ? block1.call(this, context, tags, suffix) : undefined }${ this.siteLabel ? block4.call(this, context, tags, suffix) : undefined }</div>${ this.isMainMenuVisible ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.isSearchVisible ? block9.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-shell__right-menu">${ this.hasMobileMenuButtons ? block11.call(this, context, tags, suffix) : undefined }${ this.hasExploreSAP ? block12.call(this, context, tags, suffix) : undefined }${ this.hasSearch ? block13.call(this, context, tags, suffix) : undefined }${ this.hasCart ? block14.call(this, context, tags, suffix) : undefined }${ this.hasSupport ? block15.call(this, context, tags, suffix) : undefined }${ this.hasProfile ? block16.call(this, context, tags, suffix) : undefined }${ this.hasCountrySelector ? block17.call(this, context, tags, suffix) : undefined }${ this.hasMobileMenuButtons ? block18.call(this, context, tags, suffix) : undefined }</div></header> `;}
+function block0 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header class="${ifDefined(this.mainClass)}" @keydown="${this.handleKeyDown}"><div class="udex-masthead-shell__main-content"><div class="udex-masthead-shell__landing-wrap">${ this.logoUrl ? block1.call(this, context, tags, suffix) : undefined }${ this.siteLabel ? block4.call(this, context, tags, suffix) : undefined }${ this.coBrandImage ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.isMainMenuVisible ? block10.call(this, context, tags, suffix) : undefined }</div>${ this.isSearchVisible ? block12.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-shell__right-menu">${ this.hasMobileMenuButtons ? block14.call(this, context, tags, suffix) : undefined }${ this.hasExploreSAP ? block15.call(this, context, tags, suffix) : undefined }${ this.hasSearch ? block16.call(this, context, tags, suffix) : undefined }${ this.hasCart ? block17.call(this, context, tags, suffix) : undefined }${ this.hasSupport ? block18.call(this, context, tags, suffix) : undefined }${ this.hasProfile ? block19.call(this, context, tags, suffix) : undefined }${ this.hasCountrySelector ? block20.call(this, context, tags, suffix) : undefined }${ this.hasMobileMenuButtons ? block21.call(this, context, tags, suffix) : undefined }</div></header> `;}
 function block1 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.homeUrl ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }`;}
 function block2 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.handleLogoClick}" role="link" href="${ifDefined(this.homeUrl)}" title="${ifDefined(this.logoTitle)}" target="_self" aria-label="${ifDefined(this.homepageAriaLabel)}" class="udex-masthead-shell__logo udex-masthead-shell__logo--link"><img src="${ifDefined(this.logoUrl)}" class="udex-masthead-shell__logo-image" alt="${ifDefined(this.logoAlt)}" /></a>`;}
 function block3 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__logo"><img src="${ifDefined(this.logoUrl)}" class="udex-masthead-shell__logo-image" alt="${ifDefined(this.logoAlt)}" /></div>`;}
 function block4 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.siteLabelUrl ? block5.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) }`;}
-function block5 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.handleSiteLabelClick}" role="link" href="${ifDefined(this.siteLabelUrl)}" target="_self" aria-label="${ifDefined(this.siteLabelAriaLabel)}" class="udex-masthead-shell__site-label udex-masthead-shell__site-label--link">${ifDefined(this.siteLabel)}</a>`;}
+function block5 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.handleSiteLabelClick}" role="link" href="${ifDefined(this.siteLabelUrl)}" title="${ifDefined(this.siteLabelTitle)}" target="_self" aria-label="${ifDefined(this.siteLabelAriaLabel)}" class="udex-masthead-shell__site-label udex-masthead-shell__site-label--link">${ifDefined(this.siteLabel)}</a>`;}
 function block6 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__site-label">${ifDefined(this.siteLabel)}</div>`;}
-function block7 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-shell__nav" aria-label="${ifDefined(this.mainNavigationAriaLabel)}"><ul class="udex-masthead-shell__main-menu" aria-label="${ifDefined(this.mainNavigationAriaLabel)}">${ repeat(this.menuItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block8.call(this, context, tags, suffix, item, index)) }</ul></nav>`;}
-function block8 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-shell__item" @ui5-item-click="${ifDefined(this.setSelectedItem)}"><slot name="${ifDefined(item._individualSlot)}"></slot></li>`;}
-function block9 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__search-container" @ui5-search-keydown="${ifDefined(this.handleSearchKeyDown)}"><slot name="search"></slot></div>${ this._isSearchOpened ? block10.call(this, context, tags, suffix) : undefined }`;}
-function block10 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-shell__btn-holder"><${scopeTag("udex-control-button", tags, suffix)} class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" part="search-close-button" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click="${this.handleCloseSearch}"></${scopeTag("udex-control-button", tags, suffix)}></div>` : html`<div class="udex-masthead-shell__btn-holder"><udex-control-button class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" part="search-close-button" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click="${this.handleCloseSearch}"></udex-control-button></div>`;}
-function block11 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></udex-masthead-item>`;}
-function block12 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__explore" @ui5-item-click="${ifDefined(this.setSelectedItem)}"><slot name="exploreSAP"></slot></div>`;}
-function block13 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon"><${scopeTag("udex-masthead-item", tags, suffix)} class="udex-masthead-shell__search-btn" icon="search" part="search-button" @click="${this.handleSearchClick}" accessible-name="search"></${scopeTag("udex-masthead-item", tags, suffix)}></div>` : html`<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="${this.handleSearchClick}" accessible-name="search"></udex-masthead-item></div>`;}
-function block14 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__cart udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCartClick}"><slot name="cart"></slot></div>`;}
-function block15 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__support udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleSupportClick}"><slot name="support"></slot></div>`;}
-function block16 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__profile udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleProfileClick}"><slot name="profile"></slot></div>`;}
-function block17 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCountrySelectorClick}"><slot name="countrySelector"></slot></div>`;}
-function block18 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></udex-masthead-item>`;}
+function block7 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.coBrandUrl ? block8.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) }`;}
+function block8 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__co-brand"><a class="udex-masthead-shell__co-brand-link" @click="${this.handleCoBrandClick}" href="${ifDefined(this.coBrandUrl)}" title="${ifDefined(this.coBrandTitle)}" aria-label="${ifDefined(this.coBrandAriaLabel)}" target="_self" role="link"><img class="udex-masthead-shell__co-brand-image" src="${ifDefined(this.coBrandImage)}" alt="${ifDefined(this.coBrandAlt)}" /></a></div>`;}
+function block9 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__co-brand"><img class="udex-masthead-shell__co-brand-image" src="${ifDefined(this.coBrandImage)}" alt="${ifDefined(this.coBrandAlt)}" /></div>`;}
+function block10 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-shell__nav" aria-label="${ifDefined(this.mainNavigationAriaLabel)}"><ul class="udex-masthead-shell__main-menu" aria-label="${ifDefined(this.mainNavigationAriaLabel)}">${ repeat(this.menuItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block11.call(this, context, tags, suffix, item, index)) }</ul></nav>`;}
+function block11 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-shell__item" @ui5-item-click="${ifDefined(this.setSelectedItem)}"><slot name="${ifDefined(item._individualSlot)}"></slot></li>`;}
+function block12 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__search-container" @ui5-search-keydown="${ifDefined(this.handleSearchKeyDown)}"><slot name="search"></slot></div>${ this._isSearchOpened ? block13.call(this, context, tags, suffix) : undefined }`;}
+function block13 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-shell__btn-holder"><${scopeTag("udex-control-button", tags, suffix)} class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" part="search-close-button" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click="${this.handleCloseSearch}"></${scopeTag("udex-control-button", tags, suffix)}></div>` : html`<div class="udex-masthead-shell__btn-holder"><udex-control-button class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" part="search-close-button" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click="${this.handleCloseSearch}"></udex-control-button></div>`;}
+function block14 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></udex-masthead-item>`;}
+function block15 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__explore" @ui5-item-click="${ifDefined(this.setSelectedItem)}"><slot name="exploreSAP"></slot></div>`;}
+function block16 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon"><${scopeTag("udex-masthead-item", tags, suffix)} class="udex-masthead-shell__search-btn" icon="search" part="search-button" @click="${this.handleSearchClick}" accessible-name="search"></${scopeTag("udex-masthead-item", tags, suffix)}></div>` : html`<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="${this.handleSearchClick}" accessible-name="search"></udex-masthead-item></div>`;}
+function block17 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__cart udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCartClick}"><slot name="cart"></slot></div>`;}
+function block18 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__support udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleSupportClick}"><slot name="support"></slot></div>`;}
+function block19 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__profile udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleProfileClick}"><slot name="profile"></slot></div>`;}
+function block20 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCountrySelectorClick}"><slot name="countrySelector"></slot></div>`;}
+function block21 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></udex-masthead-item>`;}
 
 function template(this: MastheadShell) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/themes/MastheadItem.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-masthead-item-background: none;--udex-masthead-item-border: none;--udex-masthead-item-padding: 1.35rem;--udex-masthead-item-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-masthead-item-line-height: var(--udexTypographyEyebrowLineHeight, 1.1);--udex-masthead-item-color: var(--udexColorGrey9, #223548);--udex-masthead-item-font-family: var(--sapFontFamily);--udex-masthead-item-color-hover: var(--udexColorBlue8, #0057D2);--udex-masthead-item-color-active: var(--udexColorBlue9, #0040B0);--udex-masthead-item-border-color: var(--udexColorBlue8, #0057D2);--udex-masthead-item-country-border-color-hover: var(--udexColorBlue8, #0057D2);--udex-masthead-item-border-radius: var(--udexRadiusXXS) var(--udexRadiusXXS) 0 0;--udex-masthead-item-border-width: .188rem;--udex-masthead-item-align-content: center;--udex-masthead-item-justify-content: center;--udex-masthead-item-display: inline-flex;--udex-masthead-item-icon-size: 1.125rem;--udex-masthead-item-icon-container-size: 2rem;--udex-masthead-item-outline-border-color: var(--udexColorBlue10, #002A86);--udex-masthead-item-dropdown-box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-item-dropdown-position-left: -55px;--udex-masthead-item-dropdown-position-right: -55px;--udex-masthead-item-dropdown-mobile-min-width: 360px;--udex-masthead-item-dropdown-select-box-min-width: 397px;--udex-masthead-item-dropdown-position: absolute;--udex-masthead-item-dropdown-mobile-height: var(--udex-masthead-shell-mobile-menu-height, 100%);--udex-masthead-item-dropdown-box-shadow-mobile: none;--udex-masthead-item-dropdown-zindex: 100;--udex-masthead-item-button-icon-size: 32px;display:var(--udex-masthead-item-display);align-items:var(--udex-masthead-item-align-content);justify-content:var(--udex-masthead-item-justify-content);position:relative;font-family:var(--udex-masthead-item-font-family);font-size:var(--udex-masthead-item-font-size);line-height:var(--udex-masthead-item-line-height)}.udex-masthead-item__dropdown{position:absolute;top:100%;left:var(--udex-masthead-item-dropdown-position-left);z-index:var(--udex-masthead-item-dropdown-zindex);box-shadow:var(--udex-masthead-item-dropdown-box-shadow)}.udex-masthead-item__button--support+.udex-masthead-item__dropdown,.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,.udex-masthead-item__button--profile+.udex-masthead-item__dropdown{top:46px;left:auto;right:0}.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,.udex-masthead-item__button--profile+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-mobile-min-width)}.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-select-box-min-width)}.udex-masthead-item__image-wrap{position:relative;display:flex}:host([desktop]) .udex-masthead-item__button--country-selector:hover .udex-masthead-item__image-wrap:after{content:"";position:absolute;inset:0;border:1px solid var(--udex-masthead-item-country-border-color-hover);border-radius:50%;box-sizing:border-box}.udex-masthead-item__button--explore+.udex-masthead-item__dropdown{top:60px;inset-inline-start:0;box-sizing:border-box;inline-size:100%}:host([slot="exploreSAP"]){position:inherit}.udex-masthead-item__dropdown-holder{position:relative}.udex-masthead-item{font-size:inherit;line-height:inherit;font-family:inherit;color:var(--udex-masthead-item-color);background:var(--udex-masthead-item-background);border:var(--udex-masthead-item-border);padding:var(--udex-masthead-item-padding) 0;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative}.udex-masthead-item__button--icon{display:flex;align-items:center;justify-content:center;width:var(--udex-masthead-item-button-icon-size);height:var(--udex-masthead-item-button-icon-size)}.udex-masthead-item.udex-masthead-item__button--profile,.udex-masthead-item.udex-masthead-item__button--icon{padding:0}.udex-masthead-item:focus{outline:none}.udex-masthead-item__text{display:flex;align-items:center}:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__text,:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__image,:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon,.udex-masthead-item:focus-visible .udex-masthead-item__text,.udex-masthead-item:focus-visible .udex-masthead-item__icon{outline:var(--udexRadiusXXS) solid var(--udex-masthead-item-outline-border-color);outline-offset:2px;border-radius:var(--udexRadiusXXS)}:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__image,:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon,.udex-masthead-item:focus .udex-masthead-item__image,.udex-masthead-item:focus .udex-masthead-item__icon{outline-offset:6px}.udex-masthead-item__button--profile .udex-masthead-item__text{display:inline-block}.udex-masthead-item.udex-masthead-item__button--profile:focus .udex-masthead-item__text{border-radius:50%}.udex-masthead-item__dropdown-icon{margin-inline-start:var(--udexSpacer4)}:host(:hover) .udex-masthead-item,:host(:hover) .udex-masthead-item__image,:host(:hover) .udex-masthead-item__icon,:host(:hover) .udex-masthead-item__dropdown-icon{color:var(--udex-masthead-item-color-hover)}:host(:active) .udex-masthead-item,:host([selected]) .udex-masthead-item,:host(:active) .udex-masthead-item-icon,:host([selected]) .udex-masthead-item-icon,:host(:active) .udex-masthead-item__dropdown-icon,:host([selected]) .udex-masthead-item__dropdown-icon{color:var(--udex-masthead-item-color-active)}:host(:active) .udex-masthead-item__dropdown-icon,:host([selected]) .udex-masthead-item__dropdown-icon{transform:rotate(180deg)}:host(:active):not([hide-active-border]) .udex-masthead-item:after,:host([selected]:not([hide-active-border])) .udex-masthead-item:after{content:"";position:absolute;bottom:0;left:0;right:0;height:var(--udex-masthead-item-border-width);background-color:var(--udex-masthead-item-border-color);border-radius:var(--udex-masthead-item-border-radius)}:host(:active) .udex-masthead-item.udex-masthead-item__button--icon:after,:host([selected]) .udex-masthead-item.udex-masthead-item__button--icon:after,:host(:active) .udex-masthead-item.udex-masthead-item__button--profile:after,:host([selected]) .udex-masthead-item.udex-masthead-item__button--profile:after{bottom:-14px;left:0;right:0}:host([selected]) .udex-masthead-item__image,:host(:active) .udex-masthead-item__image,:host([selected]) .udex-masthead-item__icon,:host(:active) .udex-masthead-item__icon{color:var(--udex-masthead-item-color-active)}.udex-masthead-item__image,.udex-masthead-item__icon{width:var(--udex-masthead-item-icon-size);height:var(--udex-masthead-item-icon-size);color:var(--udex-masthead-item-color)}.udex-masthead-item__avatar-container{display:flex;align-items:center;justify-content:center;width:auto;height:auto}:host(:dir(rtl)) .udex-masthead-item__dropdown{right:var(--udex-masthead-item-dropdown-position-right);left:auto}:host(:dir(rtl)) .udex-masthead-item__button--support+.udex-masthead-item__dropdown,:host(:dir(rtl)) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,:host(:dir(rtl)) .udex-masthead-item__button--explore+.udex-masthead-item__dropdown,:host(:dir(rtl)) .udex-masthead-item__button--profile+.udex-masthead-item__dropdown{left:0;right:auto}:host([slot="exploreSAP"]) ::slotted([slot="dropdown"]){--udex-masthead-menu-padding-desktop: 32px var(--udexSpacer72);--udex-masthead-menu-column-width: auto;--udex-masthead-menu-grid-template-columns: repeat(4, calc(25% - var(--udex-masthead-menu-column_gap)*3/4))}:host([slot="countrySelector"]) ::slotted([slot="dropdown"]),:host([slot="profile"]) ::slotted([slot="dropdown"]){width:100%;display:flex;flex-direction:column}:host([slot="countrySelector"][_is-mobile-mode]) ::slotted([slot="dropdown"]),:host([slot="profile"][_is-mobile-mode]) ::slotted([slot="dropdown"]){display:initial}:host([_is-mobile-mode]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,:host([part="menu-open-btn"]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-mobile-min-width)}:host([_is-mobile-mode]) .udex-masthead-item__dropdown,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown{position:var(--udex-masthead-item-dropdown-position);height:var(--udex-masthead-item-dropdown-mobile-height);width:var(--udex-masthead-item-dropdown-mobile-min-width);top:60px;right:0;left:auto}:host([_is-mobile-mode]) .udex-masthead-item__dropdown-holder,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown-holder{height:100%;box-shadow:none;overflow:auto}:host([_is-mobile-mode]) .udex-masthead-item__dropdown:after,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown:after{box-shadow:var(--udex-masthead-shell-dropdown-shadow);pointer-events:none;content:"";position:absolute;inset:-60px 0 0}:host([_is-mobile-mode]),:host([part="menu-open-btn"]){position:initial}.udex-masthead-hidden-text{display:none}@media (max-width: 1279px){:host{position:initial}:host([slot="countrySelector"]) ::slotted([slot="dropdown"]),:host([slot="profile"]) ::slotted([slot="dropdown"]){display:initial}.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-mobile-min-width)}.udex-masthead-item__button--support+.udex-masthead-item__dropdown,.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,.udex-masthead-item__button--profile+.udex-masthead-item__dropdown,.udex-masthead-item__dropdown{top:60px}:host(:dir(rtl)) .udex-masthead-item__dropdown{left:0;right:auto}.udex-masthead-item__dropdown{position:var(--udex-masthead-item-dropdown-position);height:var(--udex-masthead-item-dropdown-mobile-height);width:var(--udex-masthead-item-dropdown-mobile-min-width);box-shadow:var(--udex-masthead-item-dropdown-box-shadow-mobile);top:60px}.udex-masthead-item__dropdown-holder{height:100%;overflow:auto}.udex-masthead-item__dropdown:after{box-shadow:var(--udex-masthead-shell-dropdown-shadow);pointer-events:none;content:"";position:absolute;inset:-60px 0 0}}@media (max-width: 979px){:host([_is-mobile-mode]) .udex-masthead-item__dropdown,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown,.udex-masthead-item__dropdown{width:100%}}
+export default `:host{--udex-masthead-item-background: none;--udex-masthead-item-border: none;--udex-masthead-item-padding: 1.35rem;--udex-masthead-item-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-masthead-item-line-height: var(--udexTypographyEyebrowLineHeight, 1.1);--udex-masthead-item-color: var(--udexColorGrey9, #223548);--udex-masthead-item-font-family: var(--sapFontFamily);--udex-masthead-item-color-hover: var(--udexColorBlue8, #0057D2);--udex-masthead-item-color-active: var(--udexColorBlue9, #0040B0);--udex-masthead-item-border-color: var(--udexColorBlue8, #0057D2);--udex-masthead-item-country-border-color-hover: var(--udexColorBlue8, #0057D2);--udex-masthead-item-border-radius: var(--udexRadiusXXS) var(--udexRadiusXXS) 0 0;--udex-masthead-item-border-width: .188rem;--udex-masthead-item-align-content: center;--udex-masthead-item-justify-content: center;--udex-masthead-item-display: inline-flex;--udex-masthead-item-icon-size: 1.125rem;--udex-masthead-item-icon-container-size: 2rem;--udex-masthead-item-outline-border-color: var(--udexColorBlue10, #002A86);--udex-masthead-item-dropdown-box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-item-dropdown-position-left: -55px;--udex-masthead-item-dropdown-position-right: -55px;--udex-masthead-item-dropdown-mobile-min-width: 360px;--udex-masthead-item-dropdown-select-box-min-width: 397px;--udex-masthead-item-dropdown-position: absolute;--udex-masthead-item-dropdown-mobile-height: var(--udex-masthead-shell-mobile-menu-height, 100%);--udex-masthead-item-dropdown-box-shadow-mobile: none;--udex-masthead-item-dropdown-zindex: 100;--udex-masthead-item-button-icon-size: 32px;display:var(--udex-masthead-item-display);align-items:var(--udex-masthead-item-align-content);justify-content:var(--udex-masthead-item-justify-content);position:relative;font-family:var(--udex-masthead-item-font-family);font-size:var(--udex-masthead-item-font-size);line-height:var(--udex-masthead-item-line-height)}.udex-masthead-item__dropdown{position:absolute;top:100%;left:var(--udex-masthead-item-dropdown-position-left);z-index:var(--udex-masthead-item-dropdown-zindex);box-shadow:var(--udex-masthead-item-dropdown-box-shadow)}.udex-masthead-item__button--support+.udex-masthead-item__dropdown,.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,.udex-masthead-item__button--profile+.udex-masthead-item__dropdown{top:46px;left:auto;right:0}.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,.udex-masthead-item__button--profile+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-mobile-min-width)}.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-select-box-min-width)}.udex-masthead-item__image-wrap{position:relative;display:flex}:host([desktop]) .udex-masthead-item__button--country-selector:hover .udex-masthead-item__image-wrap:after{content:"";position:absolute;inset:0;border:1px solid var(--udex-masthead-item-country-border-color-hover);border-radius:50%;box-sizing:border-box}.udex-masthead-item__button--explore+.udex-masthead-item__dropdown{top:60px;inset-inline-start:0;box-sizing:border-box;inline-size:100%}:host([slot="exploreSAP"]){position:inherit}.udex-masthead-item__dropdown-holder{position:relative}.udex-masthead-item{font-size:inherit;line-height:inherit;font-family:inherit;color:var(--udex-masthead-item-color);background:var(--udex-masthead-item-background);border:var(--udex-masthead-item-border);padding:var(--udex-masthead-item-padding) 0;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative}.udex-masthead-item__button--icon{display:flex;align-items:center;justify-content:center;width:var(--udex-masthead-item-button-icon-size);height:var(--udex-masthead-item-button-icon-size)}.udex-masthead-item.udex-masthead-item__button--profile,.udex-masthead-item.udex-masthead-item__button--icon{padding:0}.udex-masthead-item:focus{outline:none}.udex-masthead-item__text{display:flex;align-items:center}:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__text,:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__image,:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon,.udex-masthead-item:focus-visible .udex-masthead-item__image,.udex-masthead-item:focus-visible .udex-masthead-item__text,.udex-masthead-item:focus-visible .udex-masthead-item__icon{outline:var(--udexRadiusXXS) solid var(--udex-masthead-item-outline-border-color);outline-offset:2px;border-radius:var(--udexRadiusXXS)}:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__image,:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon,.udex-masthead-item:focus .udex-masthead-item__image,.udex-masthead-item:focus .udex-masthead-item__icon{outline-offset:6px}.udex-masthead-item__button--profile .udex-masthead-item__text{display:inline-block}.udex-masthead-item.udex-masthead-item__button--profile:focus .udex-masthead-item__text{border-radius:50%}.udex-masthead-item__dropdown-icon{margin-inline-start:var(--udexSpacer4)}:host(:hover) .udex-masthead-item,:host(:hover) .udex-masthead-item__image,:host(:hover) .udex-masthead-item__icon,:host(:hover) .udex-masthead-item__dropdown-icon{color:var(--udex-masthead-item-color-hover)}:host(:active) .udex-masthead-item,:host([selected]) .udex-masthead-item,:host(:active) .udex-masthead-item-icon,:host([selected]) .udex-masthead-item-icon,:host(:active) .udex-masthead-item__dropdown-icon,:host([selected]) .udex-masthead-item__dropdown-icon{color:var(--udex-masthead-item-color-active)}:host(:active) .udex-masthead-item__dropdown-icon,:host([selected]) .udex-masthead-item__dropdown-icon{transform:rotate(180deg)}:host(:active):not([hide-active-border]) .udex-masthead-item:after,:host([selected]:not([hide-active-border])) .udex-masthead-item:after{content:"";position:absolute;bottom:0;left:0;right:0;height:var(--udex-masthead-item-border-width);background-color:var(--udex-masthead-item-border-color);border-radius:var(--udex-masthead-item-border-radius)}:host(:active) .udex-masthead-item.udex-masthead-item__button--icon:after,:host([selected]) .udex-masthead-item.udex-masthead-item__button--icon:after,:host(:active) .udex-masthead-item.udex-masthead-item__button--profile:after,:host([selected]) .udex-masthead-item.udex-masthead-item__button--profile:after{bottom:-14px;left:0;right:0}:host([selected]) .udex-masthead-item__image,:host(:active) .udex-masthead-item__image,:host([selected]) .udex-masthead-item__icon,:host(:active) .udex-masthead-item__icon{color:var(--udex-masthead-item-color-active)}.udex-masthead-item__image,.udex-masthead-item__icon{width:var(--udex-masthead-item-icon-size);height:var(--udex-masthead-item-icon-size);color:var(--udex-masthead-item-color)}.udex-masthead-item__avatar-container{display:flex;align-items:center;justify-content:center;width:auto;height:auto}:host(:dir(rtl)) .udex-masthead-item__dropdown{right:var(--udex-masthead-item-dropdown-position-right);left:auto}:host(:dir(rtl)) .udex-masthead-item__button--support+.udex-masthead-item__dropdown,:host(:dir(rtl)) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,:host(:dir(rtl)) .udex-masthead-item__button--explore+.udex-masthead-item__dropdown,:host(:dir(rtl)) .udex-masthead-item__button--profile+.udex-masthead-item__dropdown{left:0;right:auto}:host([slot="exploreSAP"]) ::slotted([slot="dropdown"]){--udex-masthead-menu-padding-desktop: 32px var(--udexSpacer72);--udex-masthead-menu-column-width: auto;--udex-masthead-menu-grid-template-columns: repeat(4, calc(25% - var(--udex-masthead-menu-column_gap)*3/4))}:host([slot="countrySelector"]) ::slotted([slot="dropdown"]),:host([slot="profile"]) ::slotted([slot="dropdown"]){width:100%;display:flex;flex-direction:column}:host([slot="countrySelector"][_is-mobile-mode]) ::slotted([slot="dropdown"]),:host([slot="profile"][_is-mobile-mode]) ::slotted([slot="dropdown"]){display:initial}:host([_is-mobile-mode]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,:host([part="menu-open-btn"]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-mobile-min-width)}:host([_is-mobile-mode]) .udex-masthead-item__dropdown,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown{position:var(--udex-masthead-item-dropdown-position);height:var(--udex-masthead-item-dropdown-mobile-height);width:var(--udex-masthead-item-dropdown-mobile-min-width);top:60px;right:0;left:auto}:host([_is-mobile-mode]) .udex-masthead-item__dropdown-holder,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown-holder{height:100%;box-shadow:none;overflow:auto}:host([_is-mobile-mode]) .udex-masthead-item__dropdown:after,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown:after{box-shadow:var(--udex-masthead-shell-dropdown-shadow);pointer-events:none;content:"";position:absolute;inset:-60px 0 0}:host([_is-mobile-mode]),:host([part="menu-open-btn"]){position:initial}.udex-masthead-hidden-text{display:none}@media (max-width: 1279px){:host{position:initial}:host([slot="countrySelector"]) ::slotted([slot="dropdown"]),:host([slot="profile"]) ::slotted([slot="dropdown"]){display:initial}.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-mobile-min-width)}.udex-masthead-item__button--support+.udex-masthead-item__dropdown,.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,.udex-masthead-item__button--profile+.udex-masthead-item__dropdown,.udex-masthead-item__dropdown{top:60px}:host(:dir(rtl)) .udex-masthead-item__dropdown{left:0;right:auto}.udex-masthead-item__dropdown{position:var(--udex-masthead-item-dropdown-position);height:var(--udex-masthead-item-dropdown-mobile-height);width:var(--udex-masthead-item-dropdown-mobile-min-width);box-shadow:var(--udex-masthead-item-dropdown-box-shadow-mobile);top:60px}.udex-masthead-item__dropdown-holder{height:100%;overflow:auto}.udex-masthead-item__dropdown:after{box-shadow:var(--udex-masthead-shell-dropdown-shadow);pointer-events:none;content:"";position:absolute;inset:-60px 0 0}}@media (max-width: 979px){:host([_is-mobile-mode]) .udex-masthead-item__dropdown,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown,.udex-masthead-item__dropdown{width:100%}}
 `

package/src/generated/themes/MastheadShell.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-masthead-shell-height: 60px;--udex-masthead-shell-background: var(--udexColorGrey1, #F5F6F7);--udex-masthead-shell-dropdown-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-shell-site-label-font-size: var(--udexTypographyNavigationRegularXLFontSize, 16px);--udex-masthead-shell-site-label-line-height: 24px;--udex-masthead-shell-site-label-font-weight: var(--udexTypographyFontWeightBold, 700);--udex-masthead-shell-site-label-text-decoration: none;--udex-masthead-shell-site-label-color: var(--udexColorGrey8, #354A5F);--udex-masthead-shell-site-label-color-hover: var(--udexColorBlue7, #0070F2);--udex-masthead-shell-item-gap: var(--udexSpacer24);--udex-masthead-shell-item-icon-gap: var(--udexSpacer8);--udex-grid-gutter: 3rem;--udex-grid-margin-m: 4.5rem;--udex-grid-margin-l: 4.5rem;--udex-grid-margin-xl: 5.25rem;--udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);--udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);--udex-masthead-shell-search-container-width-xl: calc(8 * var(--udex-column-width-xl) + 7 * var(--udex-grid-gutter));--udex-masthead-shell-close-button-divider-color: var(--udexCoreDividerLight, #D5DADD);--udex-masthead-shell-z-index: 10;--udex-masthead-shell-container-xl-max-width: 1432px;--udex-masthead-shell-container-l-max-width: 1456px;--udex-masthead-mobile-menu-buttons-width: 360px;--udex-masthead-right-menu-padding: var(--udexSpacer64);--udex-masthead-shell-explore-margin: var(--udexSpacer12);--udex-masthead-shell-mobile-menu-height: 100%}:host{position:relative;display:block;width:100%;container-type:inline-size;background:var(--udex-masthead-shell-background);z-index:var(--udex-masthead-shell-z-index)}:host([sticky-position]){position:sticky;top:0}:host([show-search-by-default]) .udex-masthead-shell__right-menu,:host([show-search-by-default]) .udex-masthead-shell__main-content,:host([_is-search-opened]) .udex-masthead-shell__main-content{width:30%}:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([_is-search-opened]) .udex-masthead-shell__search-container{width:40%}.udex-masthead-shell__search-container{background:var(--udex-masthead-shell-background)}.udex-masthead-shell__btn-holder{display:flex;justify-content:flex-end;width:30%}.udex-masthead-shell__close-search-btn{--udex-control-button-small-height: 32px;--udex-control-button-small-width: 32px;--udex-control-button-small-icon-size: 18px}.udex-masthead-shell{display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 var(--udexSpacer84);max-width:var(--udex-masthead-shell-container-xl-max-width);margin:0 auto;height:var(--udex-masthead-shell-height)}.udex-masthead-shell__logo{margin-inline-end:var(--udexSpacer16);width:64px}.udex-masthead-shell__logo-image{width:100%}.udex-masthead-shell__logo--link{cursor:pointer;display:flex}.udex-masthead-shell__logo--link:focus,.udex-masthead-shell__logo--link:focus-visible,.udex-masthead-shell__site-label--link:focus,.udex-masthead-shell__site-label--link:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);outline-offset:var(--udexSpacer2);border-radius:var(--udexRadiusXXS)}.udex-masthead-shell__site-label{font-family:var(--sapFontFamily);font-size:var(--udex-masthead-shell-site-label-font-size);line-height:var(--udex-masthead-shell-site-label-line-height);color:var(--udex-masthead-shell-site-label-color);font-weight:var(--udex-masthead-shell-site-label-font-weight);text-decoration:var(--udex-masthead-shell-site-label-text-decoration);margin-inline-end:var(--udexSpacer24);white-space:nowrap}.udex-masthead-shell__site-label--link:hover{color:var(--udex-masthead-shell-site-label-color-hover)}.udex-masthead-shell__main-content{display:grid;grid:"logo siteLabel mainMenu " / auto auto 1fr;align-items:center;box-sizing:border-box}.udex-masthead-shell__main-menu{display:flex;align-items:center;gap:var(--udex-masthead-shell-item-gap);max-width:100%;margin:0;padding:0;list-style:none}.udex-masthead-shell__landing-wrap{display:flex;align-items:center}.udex-masthead-shell__right-menu{display:flex;align-items:center;justify-content:flex-end;gap:var(--udex-masthead-shell-item-icon-gap);padding-inline-start:var(--udex-masthead-right-menu-padding);box-sizing:border-box}.udex-masthead-shell__explore{white-space:nowrap;margin-inline-end:var(--udex-masthead-shell-explore-margin)}.udex-masthead-shell__item_icon{display:flex;align-items:center}.udex-masthead-shell__item{margin-inline-end:var(--udexSpacer4)}.udex-masthead-shell__menu-btn{height:18px;order:1}.udex-masthead-shell__close-btn{position:relative;margin-inline-start:var(--udexSpacer12);order:2}.udex-masthead-shell__close-btn:before{content:"";position:absolute;left:-12px;top:0;bottom:0;height:32px;border-radius:var(--udexRadiusXXS);width:1px;background:var(--udex-masthead-shell-close-button-divider-color)}:dir(rtl) .udex-masthead-shell__close-btn:before{left:auto;right:-12px}:dir(rtl) .udex-masthead-mobile-wrap{right:auto;left:0}.udex-masthead-shell__close-btn:hover{color:var(--udex-masthead-shell-site-label-color-hover)}:host([show-search-by-default]) .udex-masthead-shell__search-icon,:host([_is-search-opened]) .udex-masthead-shell__right-menu,:host([_is-mobile-mode]) .udex-masthead-shell__item_icon,:host([_is-mobile-mode]) .udex-masthead-shell__explore,:host([_is-mobile-mode]) .udex-masthead-shell__nav,.udex-masthead-shell__close-btn,.udex-masthead-shell__menu-btn{display:none}:host([_is-mobile-mode]) .udex-masthead-shell__menu-btn,:host([_is-mobile-menu-open]) .udex-masthead-shell__country-selector,:host([_is-mobile-menu-open]) .udex-masthead-shell__cart,:host([_is-mobile-menu-open]) .udex-masthead-shell__profile,:host([_is-mobile-mode][_is-mobile-menu-open]) .udex-masthead-shell__close-btn{display:flex}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{width:var(--udex-masthead-mobile-menu-buttons-width);background:var(--udex-masthead-shell-background);padding-inline-end:var(--udexSpacer84);padding-inline-start:var(--udexSpacer32);gap:var(--udexSpacer12);position:absolute;top:0;bottom:0;right:0;z-index:1}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl){right:auto;left:0}@media (max-width: 1599px){.udex-masthead-shell{padding-left:var(--udexSpacer72);padding-right:var(--udexSpacer72);max-width:var(--udex-masthead-shell-container-l-max-width)}.udex-masthead-shell__search-container{right:var(--udexSpacer72)}.udex-masthead-shell__search-container:dir(rtl){left:var(--udexSpacer72);right:auto}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer72)}}@media (max-width: 1279px){:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu{width:var(--udex-masthead-mobile-menu-buttons-width)}:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([show-search-by-default]) .udex-masthead-shell__main-content,:host([show-search-by-default]) .udex-masthead-shell__right-menu{width:auto}:host([show-search-by-default]) .udex-masthead-shell__search-container{flex:auto}:host([show-search-by-default]) .udex-masthead-shell__site-label{margin:0}:host([show-search-by-default]) .udex-masthead-shell__main-content{padding-inline-end:var(--udexSpacer32)}.udex-masthead-shell__item_icon,.udex-masthead-shell__explore,.udex-masthead-shell__nav{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__close-btn,.udex-masthead-shell__menu-btn{display:flex}.udex-masthead-shell__right-menu{padding-inline-start:var(--udexSpacer32);gap:var(--udexSpacer12)}}@media (max-width: 979px){:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu{width:100%}:host([_is-search-opened][show-search-by-default]) .udex-masthead-shell__search-container,:host([show-search-by-default]) .udex-masthead-shell__search-icon{display:block}:host([_is-search-opened]) .udex-masthead-shell__right-menu,:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__search-icon,:host([_is-mobile-menu-open]) .udex-masthead-shell__site-label,:host([_is-mobile-menu-open]) .udex-masthead-shell__logo{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer48);width:auto;left:0}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl){right:0}.udex-masthead-shell{padding:0 var(--udexSpacer48)}.udex-masthead-shell__btn-holder{padding-inline-start:var(--udexSpacer32);width:auto}}@media (max-width: 639px){:host([_is-search-opened]) .udex-masthead-shell__main-content{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer24)}.udex-masthead-shell{padding:0 var(--udexSpacer24)}.udex-masthead-shell__btn-holder{padding-inline-start:var(--udexSpacer8)}}
+export default `:host{--udex-masthead-shell-logo-width: 64px;--udex-masthead-shell-co-brand-width: 135px;--udex-masthead-shell-height: 60px;--udex-masthead-shell-background: var(--udexColorGrey1, #F5F6F7);--udex-masthead-shell-dropdown-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-shell-site-label-font-size: var(--udexTypographyNavigationRegularXLFontSize, 16px);--udex-masthead-shell-site-label-line-height: 24px;--udex-masthead-shell-site-label-font-weight: var(--udexTypographyFontWeightBold, 700);--udex-masthead-shell-site-label-text-decoration: none;--udex-masthead-shell-site-label-color: var(--udexColorGrey8, #354A5F);--udex-masthead-shell-site-label-color-hover: var(--udexColorBlue7, #0070F2);--udex-masthead-shell-item-gap: var(--udexSpacer24);--udex-masthead-shell-item-icon-gap: var(--udexSpacer8);--udex-grid-gutter: 3rem;--udex-grid-margin-m: 4.5rem;--udex-grid-margin-l: 4.5rem;--udex-grid-margin-xl: 5.25rem;--udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);--udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);--udex-masthead-shell-search-container-width-xl: calc(8 * var(--udex-column-width-xl) + 7 * var(--udex-grid-gutter));--udex-masthead-shell-close-button-divider-color: var(--udexCoreDividerLight, #D5DADD);--udex-masthead-shell-z-index: 10;--udex-masthead-shell-container-xl-max-width: 1432px;--udex-masthead-shell-container-l-max-width: 1456px;--udex-masthead-mobile-menu-buttons-width: 360px;--udex-masthead-right-menu-padding: var(--udexSpacer64);--udex-masthead-shell-explore-margin: var(--udexSpacer12);--udex-masthead-shell-mobile-menu-height: 100%}:host{position:relative;display:block;width:100%;container-type:inline-size;background:var(--udex-masthead-shell-background);z-index:var(--udex-masthead-shell-z-index)}:host([sticky-position]){position:sticky;top:0}:host([show-search-by-default]) .udex-masthead-shell__right-menu,:host([show-search-by-default]) .udex-masthead-shell__main-content,:host([_is-search-opened]) .udex-masthead-shell__main-content{width:30%}:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([_is-search-opened]) .udex-masthead-shell__search-container{width:40%}.udex-masthead-shell__search-container{background:var(--udex-masthead-shell-background)}.udex-masthead-shell__btn-holder{display:flex;justify-content:flex-end;width:30%}.udex-masthead-shell__close-search-btn{--udex-control-button-small-height: 32px;--udex-control-button-small-width: 32px;--udex-control-button-small-icon-size: 18px}.udex-masthead-shell{display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 var(--udexSpacer84);max-width:var(--udex-masthead-shell-container-xl-max-width);margin:0 auto;height:var(--udex-masthead-shell-height)}.udex-masthead-shell__logo{margin-inline-end:var(--udexSpacer16);width:var(--udex-masthead-shell-logo-width)}.udex-masthead-shell__co-brand{width:var(--udex-masthead-shell-co-brand-width);margin-inline-end:var(--udexSpacer24);padding-inline-start:var(--udexSpacer16);border-inline-start:1px solid var(--udexCoreDividerLight, #D5DADD)}.udex-masthead-shell__co-brand,.udex-masthead-shell__co-brand-link{display:flex}.udex-masthead-shell__co-brand-image,.udex-masthead-shell__logo-image{width:100%}.udex-masthead-shell__logo--link{cursor:pointer;display:flex}.udex-masthead-shell__co-brand-link:focus,.udex-masthead-shell__co-brand-link:focus-visible,.udex-masthead-shell__logo--link:focus,.udex-masthead-shell__site-label--link:focus{outline:none}:host([desktop]) .udex-masthead-shell__site-label--link:focus,:host([desktop]) .udex-masthead-shell__logo--link:focus,.udex-masthead-shell__logo--link:focus-visible,.udex-masthead-shell__site-label--link:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);outline-offset:var(--udexSpacer2);border-radius:var(--udexRadiusXXS)}.udex-masthead-shell__site-label{font-family:var(--sapFontFamily);font-size:var(--udex-masthead-shell-site-label-font-size);line-height:var(--udex-masthead-shell-site-label-line-height);color:var(--udex-masthead-shell-site-label-color);font-weight:var(--udex-masthead-shell-site-label-font-weight);text-decoration:var(--udex-masthead-shell-site-label-text-decoration);margin-inline-end:var(--udexSpacer24);white-space:nowrap}.udex-masthead-shell__site-label--link:hover{color:var(--udex-masthead-shell-site-label-color-hover)}.udex-masthead-shell__main-content{display:flex;align-items:center;box-sizing:border-box}.udex-masthead-shell__main-menu{display:flex;align-items:center;gap:var(--udex-masthead-shell-item-gap);max-width:100%;margin:0;padding:0;list-style:none}.udex-masthead-shell__landing-wrap{display:flex;align-items:center}.udex-masthead-shell__right-menu{display:flex;align-items:center;justify-content:flex-end;gap:var(--udex-masthead-shell-item-icon-gap);padding-inline-start:var(--udex-masthead-right-menu-padding);box-sizing:border-box}.udex-masthead-shell__explore{white-space:nowrap;margin-inline-end:var(--udex-masthead-shell-explore-margin)}.udex-masthead-shell__item_icon{display:flex;align-items:center}.udex-masthead-shell__item{margin-inline-end:var(--udexSpacer4)}.udex-masthead-shell__menu-btn{height:18px;order:1}.udex-masthead-shell__close-btn{position:relative;margin-inline-start:var(--udexSpacer12);order:2}.udex-masthead-shell__close-btn:before{content:"";position:absolute;left:-12px;top:0;bottom:0;height:32px;border-radius:var(--udexRadiusXXS);width:1px;background:var(--udex-masthead-shell-close-button-divider-color)}:dir(rtl) .udex-masthead-shell__close-btn:before{left:auto;right:-12px}:dir(rtl) .udex-masthead-mobile-wrap{right:auto;left:0}.udex-masthead-shell__close-btn:hover{color:var(--udex-masthead-shell-site-label-color-hover)}:host([show-search-by-default]) .udex-masthead-shell__search-icon,:host([_is-search-opened]) .udex-masthead-shell__right-menu,:host([_is-mobile-mode]) .udex-masthead-shell__item_icon,:host([_is-mobile-mode]) .udex-masthead-shell__explore,:host([_is-mobile-mode]) .udex-masthead-shell__nav,.udex-masthead-shell__right-menu:empty,.udex-masthead-shell__close-btn,.udex-masthead-shell__menu-btn{display:none}:host([_is-mobile-mode]) .udex-masthead-shell__menu-btn,:host([_is-mobile-menu-open]) .udex-masthead-shell__country-selector,:host([_is-mobile-menu-open]) .udex-masthead-shell__cart,:host([_is-mobile-menu-open]) .udex-masthead-shell__profile,:host([_is-mobile-mode][_is-mobile-menu-open]) .udex-masthead-shell__close-btn{display:flex}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{width:var(--udex-masthead-mobile-menu-buttons-width);background:var(--udex-masthead-shell-background);padding-inline-end:var(--udexSpacer84);padding-inline-start:var(--udexSpacer32);gap:var(--udexSpacer12);position:absolute;top:0;bottom:0;right:0;z-index:1}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl){right:auto;left:0}.udex-masthead-shell_co-brand-without-nav .udex-masthead-shell__main-content,.udex-masthead-shell_co-brand-without-nav .udex-masthead-shell__landing-wrap{flex:auto}.udex-masthead-shell_co-brand-without-nav .udex-masthead-shell__co-brand{border:none;margin-inline-start:auto;margin-inline-end:0;padding:0}@media (max-width: 1599px){.udex-masthead-shell{padding-left:var(--udexSpacer72);padding-right:var(--udexSpacer72);max-width:var(--udex-masthead-shell-container-l-max-width)}.udex-masthead-shell__search-container{right:var(--udexSpacer72)}.udex-masthead-shell__search-container:dir(rtl){left:var(--udexSpacer72);right:auto}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer72)}}@media (max-width: 1279px){:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu{width:var(--udex-masthead-mobile-menu-buttons-width)}:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([show-search-by-default]) .udex-masthead-shell__main-content,:host([show-search-by-default]) .udex-masthead-shell__right-menu{width:auto}:host([show-search-by-default]) .udex-masthead-shell__search-container{flex:auto}:host([show-search-by-default]) .udex-masthead-shell__site-label{margin:0}:host([show-search-by-default]) .udex-masthead-shell__main-content{padding-inline-end:var(--udexSpacer32)}.udex-masthead-shell__item_icon,.udex-masthead-shell__explore,.udex-masthead-shell__nav{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__close-btn,.udex-masthead-shell__menu-btn{display:flex}.udex-masthead-shell__right-menu{padding-inline-start:var(--udexSpacer32);gap:var(--udexSpacer12)}}@media (max-width: 979px){:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu{width:100%}:host([_is-search-opened][show-search-by-default]) .udex-masthead-shell__search-container,:host([show-search-by-default]) .udex-masthead-shell__search-icon{display:block}:host([_is-search-opened]) .udex-masthead-shell__right-menu,:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__search-icon,:host([_is-mobile-menu-open]) .udex-masthead-shell__site-label,:host([_is-mobile-menu-open]) .udex-masthead-shell__logo{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer48);width:auto;left:0}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl){right:0}.udex-masthead-shell{padding:0 var(--udexSpacer48)}.udex-masthead-shell__btn-holder{padding-inline-start:var(--udexSpacer32);width:auto}}@media (max-width: 639px){:host([_is-search-opened]) .udex-masthead-shell__main-content{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer24)}.udex-masthead-shell{padding:0 var(--udexSpacer24)}.udex-masthead-shell__btn-holder{padding-inline-start:var(--udexSpacer8)}}
 `

package/src/generated/themes/RatingIndicator.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v2-4-2_rating_indicator_component_spacing);cursor:pointer}:host([disabled]){opacity:var(--udex_rating_indicator_disabled_opacity);cursor:initial;outline:none}:host([readonly]){cursor:initial}:host([disabled]) .udex-rating-indicator__item-unsel,:host([readonly]) .udex-rating-indicator__item-unsel{width:var(--udex_rating_indicator_readonly_item_width);height:var(--udex_rating_indicator_readonly_item_height);padding-inline:0}:host([disabled]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_disabled-unrated_color)}:host([readonly]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_read-only-unrated_color)}:host([_focused]){outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:.25rem}[ui5-icon]{display:flex;text-shadow:var(--sapContent_TextShadow)}.udex-rating-indicator{font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 16px);padding:0;outline:none;position:relative;display:inline-flex;gap:12px;align-items:center}.udex-rating-indicator__total{color:var(--udexColorGrey6);line-height:24px}.udex-rating-indicator__list{list-style-type:none;display:flex;align-items:center;margin:0;padding:0}.udex-rating-indicator__item{position:relative;width:var(--udex_rating_indicator_item_width);height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_items_gap)}.udex-rating-indicator__item [ui5-icon]{width:100%;height:100%;color:inherit;user-select:none}.udex-rating-indicator__item.udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_color)}.udex-rating-indicator__item.udex-rating-indicator__item-sel,.udex-rating-indicator__item.udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_color)}.udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{position:absolute;inset-inline-start:50%;color:var(--udex-rating_indicator_rated_color)}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-sel,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__half-icon,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_hover_color)}:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover{opacity:1}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_hover_color)}.udex-rating-indicator__half-icon-wrapper{width:100%;height:100%;position:absolute;inset-inline-start:-50%;top:0;z-index:32;overflow:hidden}.udex-rating-indicator--mobile .udex-rating-indicator__half-icon-wrapper{top:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator--mobile .udex-rating-indicator__item{padding:var(--udex_rating_indicator_mobile_item_padding)}:host([readonly]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel,:host([disabled]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel{padding-left:var(--udex_rating_indicator_mobile_item_padding);padding-right:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_mobile_items_gap)}
+export default `:host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v2-5-0_rating_indicator_component_spacing);cursor:pointer}:host([disabled]){opacity:var(--udex_rating_indicator_disabled_opacity);cursor:initial;outline:none}:host([readonly]){cursor:initial}:host([disabled]) .udex-rating-indicator__item-unsel,:host([readonly]) .udex-rating-indicator__item-unsel{width:var(--udex_rating_indicator_readonly_item_width);height:var(--udex_rating_indicator_readonly_item_height);padding-inline:0}:host([disabled]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_disabled-unrated_color)}:host([readonly]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_read-only-unrated_color)}:host([_focused]){outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:.25rem}[ui5-icon]{display:flex;text-shadow:var(--sapContent_TextShadow)}.udex-rating-indicator{font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 16px);padding:0;outline:none;position:relative;display:inline-flex;gap:12px;align-items:center}.udex-rating-indicator__total{color:var(--udexColorGrey6);line-height:24px}.udex-rating-indicator__list{list-style-type:none;display:flex;align-items:center;margin:0;padding:0}.udex-rating-indicator__item{position:relative;width:var(--udex_rating_indicator_item_width);height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_items_gap)}.udex-rating-indicator__item [ui5-icon]{width:100%;height:100%;color:inherit;user-select:none}.udex-rating-indicator__item.udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_color)}.udex-rating-indicator__item.udex-rating-indicator__item-sel,.udex-rating-indicator__item.udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_color)}.udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{position:absolute;inset-inline-start:50%;color:var(--udex-rating_indicator_rated_color)}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-sel,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__half-icon,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_hover_color)}:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover{opacity:1}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_hover_color)}.udex-rating-indicator__half-icon-wrapper{width:100%;height:100%;position:absolute;inset-inline-start:-50%;top:0;z-index:32;overflow:hidden}.udex-rating-indicator--mobile .udex-rating-indicator__half-icon-wrapper{top:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator--mobile .udex-rating-indicator__item{padding:var(--udex_rating_indicator_mobile_item_padding)}:host([readonly]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel,:host([disabled]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel{padding-left:var(--udex_rating_indicator_mobile_item_padding);padding-right:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_mobile_items_gap)}
 `

package/src/generated/themes/Slider.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-4-2_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}
+export default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-5-0_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}
 `