@sapudex/web-components 2.1.1 → 2.2.0

package/src/SecondaryNavigationItem.ts

@@ -157,9 +157,20 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Object })
     _processedItems: Array<NavItem> = [];
 
+  /**
+   * Defines if item is mobile menu opener.
+   *
+   * @private
+   * @default false
+   */
+  @property({ type: Boolean })
+    _isMobileMenuOpener!: boolean;
+
   _dropdownHistory: Array<Array<NavItem>> = [];
   _shouldFocusFirstSubItem!: boolean;
   _subTitle!: string | undefined;
+  _shouldResetTabIndex!: boolean;
+  _shouldSetTabIndex!: boolean;
 
   onAfterRendering(): void {
     if (this.isLastItem && this.isOpen && !this._isMobileView) {
@@ -174,6 +185,16 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (this._isMobileView && this.isOpen) {
       this.setDropdownHeight();
     }
+
+    if (this._shouldSetTabIndex) {
+      this._tabIndex = "0";
+      this._shouldSetTabIndex = false;
+    }
+
+    if (this._shouldResetTabIndex) {
+      this._tabIndex = "-1";
+      this._shouldResetTabIndex = false;
+    }
   }
 
   onBeforeRendering() : void {
@@ -202,6 +223,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (this.hasNestedItems) {
       this.setDropdownItems();
       this.isOpen = !this.isOpen;
+      this._shouldResetTabIndex = true;
       this.onShouldFocusFirstSubItem();
     }
 
@@ -210,6 +232,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 
   closeDropdown(): void {
     this.isOpen = false;
+    this._shouldSetTabIndex = true;
   }
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
@@ -425,6 +448,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     return this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown")!;
   }
 
+  get menuOpenerTabIndex(): string {
+    if (this._isMobileMenuOpener) {
+      return "0";
+    }
+
+    return this._tabIndex;
+  }
+
   get isLastItem(): boolean {
     return this._navItemsLength === this.index;
   }

package/src/SecondaryNavigationItemBase.ts

@@ -94,6 +94,9 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
   @property({ type: Boolean })
     _isMobileView!: boolean;
 
+  @property({ type: String })
+    _tabIndex: string = "-1";
+
   _handleResizeBound: ResizeObserverCallback;
 
   constructor() {

package/src/SecondaryNavigationSubItem.ts

@@ -89,9 +89,6 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Object })
     nestedItems: Array<NavItem> = [];
 
-  @property({ type: String })
-    _tabIndex: string = "-1";
-
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 

package/src/SegmentedButton.ts

@@ -9,7 +9,7 @@ import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsSco
 import SegmentedButtonSelectionMode from "@ui5/webcomponents/dist/types/SegmentedButtonSelectionMode.js";
 import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
 import UDExSegmentedButtonItem from "./SegmentedButtonItem.js";
-import { UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 
 /**
  * @class

package/src/SegmentedButtonItem.ts

@@ -5,7 +5,7 @@ import SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js"
 // Styles
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import SegmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js";
-import { UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 
 /**
  * @class
@@ -44,7 +44,7 @@ class UDExSegmentedButtonItem extends SegmentedButtonItem {
    *
    * @private
    */
-  @property()
+  @property({ type: Boolean })
     hasIcon: boolean = false;
 
   constructor() {

package/src/StatusBadge.ts

@@ -23,7 +23,6 @@ import StatusBadgeTemplate from "./generated/templates/StatusBadgeTemplate.lit.j
 
 // Styles
 import StatusBadgeCss from "./generated/themes/StatusBadge.css.js";
-import type UDExProgressBarValueState from "./types/ProgressBar.js";
 
 export enum IconMapping {
   Success = "sys-enter-2",
@@ -41,7 +40,13 @@ export enum BadgeSize {
   XL = "XL",
 }
 
-export type UDExStatusBadgeValueState = `${Exclude<UDExProgressBarValueState, "None">}` | "Edit";
+export enum UDExStatusBadgeValueState {
+  Warning = "Warning",
+  Error = "Error",
+  Success = "Success",
+  Information = "Information",
+  Edit = "Edit"
+}
 
 /**
  * @class
@@ -75,7 +80,7 @@ class UDExStatusBadge extends UI5Element {
    * @public
    */
   @property()
-    valueState: UDExStatusBadgeValueState = "Information";
+    valueState: `${UDExStatusBadgeValueState}` = UDExStatusBadgeValueState.Information;
 
   /**
    * Defines predefined size of the component.

package/src/StepInput.ts

@@ -28,7 +28,7 @@ import StepInputTemplate from "./StepInputTemplate.js";
 
 // Styles
 import StepInputCss from "./generated/themes/StepInput.css.js";
-import type { UDExControlButtonDesign } from "./types/Button.js";
+import type UDExControlButtonDesign from "./types/ControlButtonDesign.js";
 import type { UDExTextFieldKeydownEventDetail } from "./TextField.js";
 
 // Spin variables
@@ -37,11 +37,11 @@ const ACCELERATION = 0.8;
 const MIN_WAIT_TIMEOUT = 50; // milliseconds
 const INITIAL_SPEED = 120; // milliseconds
 
-type UDExStepInputValueChangeEventDetail = {
+export type UDExStepInputValueChangeEventDetail = {
   value: number,
 }
 
-type UDExStepInputValueStateChangeEventDetail = {
+export type UDExStepInputValueStateChangeEventDetail = {
   valueState: `${UDExValueState}`,
   valid: boolean
 }

package/src/TableCellBase.ts

@@ -4,7 +4,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import type TableCellHorizontalAlign from "./types/Table.js";
+import type UDExTableCellHorizontalAlign from "./types/Table.js";
 
 // Styles
 import TableCellBaseCss from "./generated/themes/TableCellBase.css.js";
@@ -32,7 +32,7 @@ abstract class UDExTableCellBase extends UI5Element {
    * @public
    */
   @property()
-    horizontalAlign?: `${TableCellHorizontalAlign}`;
+    horizontalAlign?: `${UDExTableCellHorizontalAlign}`;
 
   /**
    * Defines the content of the component.

package/src/Tag.ts

@@ -8,7 +8,7 @@ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delega
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import IconPlacement from "./types/IconPlacement.js";
+import UDExIconPlacement from "./types/IconPlacement.js";
 
 import TagTemplate from "./generated/templates/TagTemplate.lit.js";
 
@@ -133,7 +133,7 @@ class UDExTag extends UI5Element {
   * @public
   */
   @property()
-    iconPlacement : `${IconPlacement}` = IconPlacement.End;
+    iconPlacement : `${UDExIconPlacement}` = UDExIconPlacement.End;
 
   /**
    * Defines if tag is in readnly state
@@ -283,11 +283,11 @@ class UDExTag extends UI5Element {
   }
 
   get startIcon(): boolean {
-    return this.hasIcon && this.iconPlacement === IconPlacement.Start;
+    return this.hasIcon && this.iconPlacement === UDExIconPlacement.Start;
   }
 
   get endIcon(): boolean {
-    return this.hasIcon && this.iconPlacement === IconPlacement.End;
+    return this.hasIcon && this.iconPlacement === UDExIconPlacement.End;
   }
 
   get _tabIndex(): number {

package/src/TextArea.ts

@@ -22,7 +22,7 @@ import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 
 import UDExStatusMessage from "./StatusMessage.js";
-import ValueState from "./types/common.js";
+import UDExValueState from "./types/common.js";
 import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
 
 // Styles
@@ -129,7 +129,7 @@ class UDExTextArea extends UI5Element {
    * @public
    */
   @property()
-    valueState: `${ValueState}` = ValueState.Standard;
+    valueState: UDExValueState = UDExValueState.Standard;
 
   /**
    * Defines whether the component is required.
@@ -314,19 +314,19 @@ class UDExTextArea extends UI5Element {
   };
 
   get ariaInvalid(): string | null {
-    return this.valueState === ValueState.Error ? "true" : null;
+    return this.valueState === UDExValueState.Error ? "true" : null;
   }
 
   get hasValueState(): boolean {
-    return this.valueState === ValueState.Error || this.valueState === ValueState.Warning || this.valueState === ValueState.Success;
+    return this.valueState === UDExValueState.Error || this.valueState === UDExValueState.Warning || this.valueState === UDExValueState.Success;
   }
 
   get valueStateTypeMappings() {
     return {
-      [ValueState.Success]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
-      [ValueState.Standard]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),
-      [ValueState.Error]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-      [ValueState.Warning]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+      [UDExValueState.Success]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+      [UDExValueState.Standard]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),
+      [UDExValueState.Error]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+      [UDExValueState.Warning]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
     };
   }
 
@@ -335,7 +335,7 @@ class UDExTextArea extends UI5Element {
       return;
     }
 
-    if (this.valueState === ValueState.Standard) {
+    if (this.valueState === UDExValueState.Standard) {
       return;
     }
 

package/src/TextField.ts

@@ -15,7 +15,7 @@ import {
   READ_ONLY,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExControlButton from "./ControlButton.js";
-import ValueState from "./types/common.js";
+import UDExValueState from "./types/common.js";
 import UDExStatusMessage from "./StatusMessage.js";
 
 // Template
@@ -195,7 +195,7 @@ class UDExTextField extends UI5Element {
    * @public
    */
   @property()
-    valueState: `${ValueState}` = ValueState.Standard;
+    valueState: `${UDExValueState}` = UDExValueState.Standard;
 
   /**
    * Defines supporting text under the input field.
@@ -342,11 +342,11 @@ class UDExTextField extends UI5Element {
   }
 
   get hasValueState(): boolean {
-    return this.valueState !== ValueState.Standard;
+    return this.valueState !== UDExValueState.Standard;
   }
 
   get valueStateText(): string | undefined {
-    return this.valueState !== ValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;
+    return this.valueState !== UDExValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;
   }
 
   get readOnlyStateText(): string {
@@ -371,7 +371,7 @@ class UDExTextField extends UI5Element {
 
   get accInfo(): AccInfo {
     return {
-      "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
+      "ariaInvalid": this.valueState === UDExValueState.Error ? "true" : undefined,
       "ariaDescribedBy": this.ariaDescribedBy ? this.ariaDescribedBy : this.ariaDescribedById || undefined,
       "ariaLabelledBy": this.accessibleNameRef || undefined,
       "ariaLabel": this.accessibleName || undefined,

package/src/Toast.ts

@@ -62,7 +62,7 @@ class UDExToast extends Toast {
   * @public
   * @default false
   */
-  @property()
+  @property({ type: Boolean })
     showCloseIcon!: boolean;
 
   /**

package/src/Upload.ts

@@ -13,7 +13,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { UPLOAD_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
 import UDExButton from "./Button.js";
-import { UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 import UDExList from "./List.js";
 import UDExUploadItem from "./UploadItem.js";
 import UploadTemplate from "./generated/templates/UploadTemplate.lit.js";

package/src/UploadItem.ts

@@ -17,12 +17,12 @@ import UDExListItem from "./ListItem.js";
 import UDExProgressBar from "./ProgressBar.js";
 import UDExLink from "./Link.js";
 import UDExButton from "./Button.js";
-import { UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 import UploadItemTemplate from "./generated/templates/UploadItemTemplate.lit.js";
 
 // Styles
 import UploadItemCss from "./generated/themes/UploadItem.css.js";
-import FileUploadState from "./types/FileUploadState.js";
+import UDExFileUploadState from "./types/FileUploadState.js";
 
 const BreakpointSizeS: number = 979;
 const BreakpointSizeM: number = 1279;
@@ -97,7 +97,7 @@ class UDExUploadItem extends UDExListItem {
    * @public
    */
   @property()
-    uploadState: `${FileUploadState}` = FileUploadState.Uploaded;
+    uploadState: `${UDExFileUploadState}` = UDExFileUploadState.Uploaded;
 
   /**
    * Slot for information about the uploaded file.
@@ -178,7 +178,7 @@ class UDExUploadItem extends UDExListItem {
   _handleResize() {
     this._buttonSize = window.innerWidth <= BreakpointSizeS ? UDExButtonSize.Medium : UDExButtonSize.Large;
     this._breakpointL = window.innerWidth > BreakpointSizeM;
-    this._breakpointM = !this._breakpointL ? true : !this._breakpointL && this.uploadState === FileUploadState.Uploaded;
+    this._breakpointM = !this._breakpointL ? true : !this._breakpointL && this.uploadState === UDExFileUploadState.Uploaded;
   }
 
   get fileLinkComponent(): UDExLink {
@@ -190,11 +190,11 @@ class UDExUploadItem extends UDExListItem {
   }
 
   get showUploadProgress(): boolean {
-    return this.uploadState === FileUploadState.Error || this.uploadState === FileUploadState.Uploading;
+    return this.uploadState === UDExFileUploadState.Error || this.uploadState === UDExFileUploadState.Uploading;
   }
 
   get uploadProgressState(): ValueState {
-    if (this.uploadState === FileUploadState.Uploading) {
+    if (this.uploadState === UDExFileUploadState.Uploading) {
       return ValueState.Information;
     }
 
@@ -202,7 +202,7 @@ class UDExUploadItem extends UDExListItem {
   }
 
   get uploadStatus(): string {
-    if (this.uploadState === FileUploadState.Uploading) {
+    if (this.uploadState === UDExFileUploadState.Uploading) {
       return `${UDExUploadItem.i18nBundle.getText(UPLOADING_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;
     }
 
@@ -210,11 +210,11 @@ class UDExUploadItem extends UDExListItem {
   }
 
   get fileInteractive(): boolean {
-    return this.uploadState === FileUploadState.Uploaded;
+    return this.uploadState === UDExFileUploadState.Uploaded;
   }
 
   get additionalInfoClasses(): string {
-    return `udex-upload-item__info ${this.uploadState === FileUploadState.Error ? "udex-upload-item__error" : ""}`;
+    return `udex-upload-item__info ${this.uploadState === UDExFileUploadState.Error ? "udex-upload-item__error" : ""}`;
   }
 
   get uploadItemClasses(): string {

package/src/generated/json-imports/Themes-node.ts

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+const loadThemeProperties = async (themeName) => {
+	switch (themeName) {
+		case "sap_fiori_3": return (await import(/* webpackChunkName: "sapudex-web-components-sap-fiori_3-parameters-bundle" */"../assets/themes/sap_fiori_3/parameters-bundle.css.json", {with: { type: 'json'}})).default;
+		case "sap_horizon": return (await import(/* webpackChunkName: "sapudex-web-components-sap-horizon-parameters-bundle" */"../assets/themes/sap_horizon/parameters-bundle.css.json", {with: { type: 'json'}})).default;
+		default: throw "unknown theme"
+	}
+};
+
+const loadAndCheck = async (themeName) => {
+	const data = await loadThemeProperties(themeName);
+	if (typeof data === "string" && data.endsWith(".json")) {
+		throw new Error(`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the "Assets" documentation for more information.`);
+	}
+	return data;
+};
+
+["sap_fiori_3", "sap_horizon"]
+  .forEach(themeName => registerThemePropertiesLoader("@sapudex/web-components", themeName, loadAndCheck));

package/src/generated/json-imports/i18n-node.ts

@@ -0,0 +1,85 @@
+// @ts-nocheck
+import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+
+const importMessageBundle = async (localeId) => {
+	switch (localeId) {
+				case "ar": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-ar" */ "../assets/i18n/messagebundle_ar.json", {with: { type: 'json'}})).default;
+		case "bg": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-bg" */ "../assets/i18n/messagebundle_bg.json", {with: { type: 'json'}})).default;
+		case "cs": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-cs" */ "../assets/i18n/messagebundle_cs.json", {with: { type: 'json'}})).default;
+		case "da": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-da" */ "../assets/i18n/messagebundle_da.json", {with: { type: 'json'}})).default;
+		case "de": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-de" */ "../assets/i18n/messagebundle_de.json", {with: { type: 'json'}})).default;
+		case "el": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-el" */ "../assets/i18n/messagebundle_el.json", {with: { type: 'json'}})).default;
+		case "en": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-en" */ "../assets/i18n/messagebundle_en.json", {with: { type: 'json'}})).default;
+		case "es": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-es" */ "../assets/i18n/messagebundle_es.json", {with: { type: 'json'}})).default;
+		case "et": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-et" */ "../assets/i18n/messagebundle_et.json", {with: { type: 'json'}})).default;
+		case "fi": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-fi" */ "../assets/i18n/messagebundle_fi.json", {with: { type: 'json'}})).default;
+		case "fr": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-fr" */ "../assets/i18n/messagebundle_fr.json", {with: { type: 'json'}})).default;
+		case "hr": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-hr" */ "../assets/i18n/messagebundle_hr.json", {with: { type: 'json'}})).default;
+		case "hu": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-hu" */ "../assets/i18n/messagebundle_hu.json", {with: { type: 'json'}})).default;
+		case "it": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-it" */ "../assets/i18n/messagebundle_it.json", {with: { type: 'json'}})).default;
+		case "iw": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-iw" */ "../assets/i18n/messagebundle_iw.json", {with: { type: 'json'}})).default;
+		case "ko": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-ko" */ "../assets/i18n/messagebundle_ko.json", {with: { type: 'json'}})).default;
+		case "lt": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-lt" */ "../assets/i18n/messagebundle_lt.json", {with: { type: 'json'}})).default;
+		case "lv": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-lv" */ "../assets/i18n/messagebundle_lv.json", {with: { type: 'json'}})).default;
+		case "nl": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-nl" */ "../assets/i18n/messagebundle_nl.json", {with: { type: 'json'}})).default;
+		case "no": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-no" */ "../assets/i18n/messagebundle_no.json", {with: { type: 'json'}})).default;
+		case "pl": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-pl" */ "../assets/i18n/messagebundle_pl.json", {with: { type: 'json'}})).default;
+		case "pt": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-pt" */ "../assets/i18n/messagebundle_pt.json", {with: { type: 'json'}})).default;
+		case "ro": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-ro" */ "../assets/i18n/messagebundle_ro.json", {with: { type: 'json'}})).default;
+		case "ru": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-ru" */ "../assets/i18n/messagebundle_ru.json", {with: { type: 'json'}})).default;
+		case "sk": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-sk" */ "../assets/i18n/messagebundle_sk.json", {with: { type: 'json'}})).default;
+		case "sl": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-sl" */ "../assets/i18n/messagebundle_sl.json", {with: { type: 'json'}})).default;
+		case "sr": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-sr" */ "../assets/i18n/messagebundle_sr.json", {with: { type: 'json'}})).default;
+		case "sv": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-sv" */ "../assets/i18n/messagebundle_sv.json", {with: { type: 'json'}})).default;
+		case "tr": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-tr" */ "../assets/i18n/messagebundle_tr.json", {with: { type: 'json'}})).default;
+		case "uk": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-uk" */ "../assets/i18n/messagebundle_uk.json", {with: { type: 'json'}})).default;
+		case "zh_CN": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-zh_CN" */ "../assets/i18n/messagebundle_zh_CN.json", {with: { type: 'json'}})).default;
+		case "zh_TW": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-zh_TW" */ "../assets/i18n/messagebundle_zh_TW.json", {with: { type: 'json'}})).default;
+		default: throw "unknown locale"
+	}
+}
+
+const importAndCheck = async (localeId) => {
+	const data = await importMessageBundle(localeId);
+	if (typeof data === "string" && data.endsWith(".json")) {
+		throw new Error(`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the "Assets" documentation for more information.`);
+	}
+	return data;
+}
+
+const localeIds = ["ar",
+	"bg",
+	"cs",
+	"da",
+	"de",
+	"el",
+	"en",
+	"es",
+	"et",
+	"fi",
+	"fr",
+	"hr",
+	"hu",
+	"it",
+	"iw",
+	"ko",
+	"lt",
+	"lv",
+	"nl",
+	"no",
+	"pl",
+	"pt",
+	"ro",
+	"ru",
+	"sk",
+	"sl",
+	"sr",
+	"sv",
+	"tr",
+	"uk",
+	"zh_CN",
+	"zh_TW",];
+
+localeIds.forEach(localeId => {
+	registerI18nLoader("@sapudex/web-components", localeId, importAndCheck);
+});

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

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 type BreadcrumbsPopover = any;
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("udex-dropdown", tags, suffix)}>` : html`<udex-dropdown id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></udex-dropdown>`;}
+function block0 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}" @close="${this._afterDropdownClose}" @open="${this._afterDropdownOpen}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("udex-dropdown", tags, suffix)}>` : html`<udex-dropdown id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}" @close="${this._afterDropdownClose}" @open="${this._afterDropdownOpen}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></udex-dropdown>`;}
 function block1 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.icon ? block2.call(this, context, tags, suffix, item, index) : block3.call(this, context, tags, suffix, item, index) }`;}
 function block2 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-link", tags, suffix)} index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--with-icon udex-breadcrumbs__item--hidden udex-breadcrumbs__item--${index}" icon="${ifDefined(item.icon)}" accessible-name="${ifDefined(item.textContent)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</${scopeTag("udex-link", tags, suffix)}>` : html`<udex-link index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--with-icon udex-breadcrumbs__item--hidden udex-breadcrumbs__item--${index}" icon="${ifDefined(item.icon)}" accessible-name="${ifDefined(item.textContent)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</udex-link>`;}
 function block3 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item._isCurrentPageItem ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }`;}

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

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type Breadcrumbs from "../../Breadcrumbs.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper"><button id="udex-${ifDefined(this._id)}-breadcrumbs__opener" @click="${this._toggleDropdown}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" aria-haspopup="true"><${scopeTag("ui5-icon", tags, suffix)} name="slim-arrow-down" mode="Decorative" title="${ifDefined(this._dropdownArrowAccessibleNameText)}"></${scopeTag("ui5-icon", tags, suffix)}></button></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav><${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("udex-dropdown", tags, suffix)}>` : html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper"><button id="udex-${ifDefined(this._id)}-breadcrumbs__opener" @click="${this._toggleDropdown}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" aria-haspopup="true"><ui5-icon name="slim-arrow-down" mode="Decorative" title="${ifDefined(this._dropdownArrowAccessibleNameText)}"></ui5-icon></button></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav><udex-dropdown id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></udex-dropdown>`;}
+function block0 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper"><${scopeTag("udex-link", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__opener" @click="${this._toggleDropdown}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" icon="slim-arrow-down" icon-placement="Start" aria-haspopup="true"></${scopeTag("udex-link", tags, suffix)}></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav><${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}" @close="${this._afterDropdownClose}" @open="${this._afterDropdownOpen}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("udex-dropdown", tags, suffix)}>` : html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper"><udex-link id="udex-${ifDefined(this._id)}-breadcrumbs__opener" @click="${this._toggleDropdown}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" icon="slim-arrow-down" icon-placement="Start" aria-haspopup="true"></udex-link></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav><udex-dropdown id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}" @close="${this._afterDropdownClose}" @open="${this._afterDropdownOpen}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></udex-dropdown>`;}
 function block1 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-breadcrumbs__link-wrapper ui5-breadcrumbs-link-wrapper" id="${ifDefined(item._id)}-link-wrapper">${ !item._isCurrentPageItem ? block2.call(this, context, tags, suffix, item, index) : undefined }</li>`;}
 function block2 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<span class="udex-breadcrumbs__separator" aria-hidden="true"></span><${scopeTag("udex-link", tags, suffix)} @ui5-click="${ifDefined(this._onLinkPress)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--visible" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" id="${ifDefined(item._id)}-link" accessible-name="${ifDefined(item._accessibleNameText)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.innerText)}</${scopeTag("udex-link", tags, suffix)}>` : html`<span class="udex-breadcrumbs__separator" aria-hidden="true"></span><udex-link @ui5-click="${ifDefined(this._onLinkPress)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--visible" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" id="${ifDefined(item._id)}-link" accessible-name="${ifDefined(item._accessibleNameText)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.innerText)}</udex-link>`;}
 function block3 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.icon ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }`;}

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

@@ -5,16 +5,16 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type Search from "../../Search.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-search__root ${ifDefined(this.searchClasses)}">${ this.isShowSearchHomePrefix ? block1.call(this, context, tags, suffix) : undefined }<form role="search" class="udex-search__container ${ifDefined(this.focusClasses)}${ifDefined(this.isNotEmptyClass)}">${ this.labelAnimationDisabled ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }${ this.accInfo.ariaDescription ? block5.call(this, context, tags, suffix) : undefined }<div class="udex-search__icons">${ this.isShowHomeResetButton ? block6.call(this, context, tags, suffix) : undefined }${ this.isShowResetButton ? block7.call(this, context, tags, suffix) : undefined }${ this.isVoiceButton ? block8.call(this, context, tags, suffix) : undefined }${ this.showNonInteractiveButton ? block9.call(this, context, tags, suffix) : undefined }${ this.showSubmitHomeButton ? block10.call(this, context, tags, suffix) : undefined }${ this.showSubmitStandardButton ? block11.call(this, context, tags, suffix) : undefined }</div></form></div><${scopeTag("ui5-popover", tags, suffix)} class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow prevent-initial-focus placement="Bottom" horizontal-align="End" style="${styleMap(this.popoverStyles)}" id="${ifDefined(this.getSuggestionsPopoverId)}" aria-orientation="vertical" accessible-role="Dialog" @keydown="${this.handleKeyPressSuggestionList}" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.showNoResultMessage ? block12.call(this, context, tags, suffix) : block13.call(this, context, tags, suffix) }</${scopeTag("ui5-popover", tags, suffix)}>` : html`<div class="udex-search__root ${ifDefined(this.searchClasses)}">${ this.isShowSearchHomePrefix ? block1.call(this, context, tags, suffix) : undefined }<form role="search" class="udex-search__container ${ifDefined(this.focusClasses)}${ifDefined(this.isNotEmptyClass)}">${ this.labelAnimationDisabled ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }${ this.accInfo.ariaDescription ? block5.call(this, context, tags, suffix) : undefined }<div class="udex-search__icons">${ this.isShowHomeResetButton ? block6.call(this, context, tags, suffix) : undefined }${ this.isShowResetButton ? block7.call(this, context, tags, suffix) : undefined }${ this.isVoiceButton ? block8.call(this, context, tags, suffix) : undefined }${ this.showNonInteractiveButton ? block9.call(this, context, tags, suffix) : undefined }${ this.showSubmitHomeButton ? block10.call(this, context, tags, suffix) : undefined }${ this.showSubmitStandardButton ? block11.call(this, context, tags, suffix) : undefined }</div></form></div><ui5-popover class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow prevent-initial-focus placement="Bottom" horizontal-align="End" style="${styleMap(this.popoverStyles)}" id="${ifDefined(this.getSuggestionsPopoverId)}" aria-orientation="vertical" accessible-role="Dialog" @keydown="${this.handleKeyPressSuggestionList}" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.showNoResultMessage ? block12.call(this, context, tags, suffix) : block13.call(this, context, tags, suffix) }</ui5-popover>`;}
+function block0 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-search__root ${ifDefined(this.searchClasses)}">${ this.isShowSearchHomePrefix ? block1.call(this, context, tags, suffix) : undefined }<form role="search" class="udex-search__container ${ifDefined(this.focusClasses)}${ifDefined(this.isNotEmptyClass)}">${ this.labelAnimationDisabled ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }${ this.open ? block5.call(this, context, tags, suffix) : undefined }<div class="udex-search__icons">${ this.isShowHomeResetButton ? block6.call(this, context, tags, suffix) : undefined }${ this.isShowResetButton ? block7.call(this, context, tags, suffix) : undefined }${ this.isVoiceButton ? block8.call(this, context, tags, suffix) : undefined }${ this.showNonInteractiveButton ? block9.call(this, context, tags, suffix) : undefined }${ this.showSubmitHomeButton ? block10.call(this, context, tags, suffix) : undefined }${ this.showSubmitStandardButton ? block11.call(this, context, tags, suffix) : undefined }</div></form></div><${scopeTag("ui5-popover", tags, suffix)} class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow prevent-initial-focus placement="Bottom" horizontal-align="End" style="${styleMap(this.popoverStyles)}" id="${ifDefined(this.getSuggestionsPopoverId)}" aria-orientation="vertical" accessible-role="Dialog" @keydown="${this.handleKeyPressSuggestionList}" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.showNoResultMessage ? block12.call(this, context, tags, suffix) : block13.call(this, context, tags, suffix) }</${scopeTag("ui5-popover", tags, suffix)}>` : html`<div class="udex-search__root ${ifDefined(this.searchClasses)}">${ this.isShowSearchHomePrefix ? block1.call(this, context, tags, suffix) : undefined }<form role="search" class="udex-search__container ${ifDefined(this.focusClasses)}${ifDefined(this.isNotEmptyClass)}">${ this.labelAnimationDisabled ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }${ this.open ? block5.call(this, context, tags, suffix) : undefined }<div class="udex-search__icons">${ this.isShowHomeResetButton ? block6.call(this, context, tags, suffix) : undefined }${ this.isShowResetButton ? block7.call(this, context, tags, suffix) : undefined }${ this.isVoiceButton ? block8.call(this, context, tags, suffix) : undefined }${ this.showNonInteractiveButton ? block9.call(this, context, tags, suffix) : undefined }${ this.showSubmitHomeButton ? block10.call(this, context, tags, suffix) : undefined }${ this.showSubmitStandardButton ? block11.call(this, context, tags, suffix) : undefined }</div></form></div><ui5-popover class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow prevent-initial-focus placement="Bottom" horizontal-align="End" style="${styleMap(this.popoverStyles)}" id="${ifDefined(this.getSuggestionsPopoverId)}" aria-orientation="vertical" accessible-role="Dialog" @keydown="${this.handleKeyPressSuggestionList}" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.showNoResultMessage ? block12.call(this, context, tags, suffix) : block13.call(this, context, tags, suffix) }</ui5-popover>`;}
 function block1 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-search__prefix ${ifDefined(this.prefixWrapperClasses)}"><button type="button" role="combobox" aria-expanded="${ifDefined(this._prefixDropdownExpanded)}" aria-label="${ifDefined(this.labelPrefix)}" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><${scopeTag("ui5-icon", tags, suffix)} class="udex-search__prefix-icon" name="slim-arrow-down" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}></button><${scopeTag("ui5-popover", tags, suffix)} id="udex-search-prefix" class="${ifDefined(this.prefixPopoverClasses)}" hide-arrow placement="Bottom" horizontal-align="Start" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></${scopeTag("ui5-popover", tags, suffix)}></div>` : html`<div class="udex-search__prefix ${ifDefined(this.prefixWrapperClasses)}"><button type="button" role="combobox" aria-expanded="${ifDefined(this._prefixDropdownExpanded)}" aria-label="${ifDefined(this.labelPrefix)}" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon></button><ui5-popover id="udex-search-prefix" class="${ifDefined(this.prefixPopoverClasses)}" hide-arrow placement="Bottom" horizontal-align="Start" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></ui5-popover></div>`;}
 function block2 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<input role="searchbox" id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" aria-autocomplete="list" aria-haspopup="${ifDefined(this.getAriaHasPopup)}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-describedby="search-description" placeholder="${ifDefined(this.effectivePlaceholder)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
 function block3 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.label ? block4.call(this, context, tags, suffix) : undefined }<input role="searchbox" id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" aria-autocomplete="list" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-describedby="search-description" aria-haspopup="${ifDefined(this.getAriaHasPopup)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
 function block4 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label for="search-input" class="${ifDefined(this.labelClasses)}">${ifDefined(this.label)}</label>`;}
-function block5 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span role="status" id="search-description" class="hidden" aria-hidden="true">${ifDefined(this.accInfo.ariaDescription)}</span>`;}
+function block5 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span aria-live="polite" aria-atomic="true" id="search-description" class="hidden" aria-hidden="true">${ifDefined(this.suggestionsDescription)}</span>`;}
 function block6 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} id="reset-button" class="udex-search__button udex-search__reset-button" size="Small" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"><${scopeTag("ui5-icon", tags, suffix)} class="udex-search__button-icon" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" accessible-role="presentation" name="decline"></${scopeTag("ui5-icon", tags, suffix)}></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button id="reset-button" class="udex-search__button udex-search__reset-button" size="Small" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"><ui5-icon class="udex-search__button-icon" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" accessible-role="presentation" name="decline"></ui5-icon></udex-button>`;}
 function block7 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} id="reset-button" class="udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" icon="decline" size="Large" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button id="reset-button" class="udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" icon="decline" size="Large" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></udex-control-button>`;}
 function block8 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" size="Small" icon="microphone" tooltip="${ifDefined(this.tooltipInfo.tooltipVoiceButton)}" @click="${this.onVoice}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" size="Small" icon="microphone" tooltip="${ifDefined(this.tooltipInfo.tooltipVoiceButton)}" @click="${this.onVoice}"></udex-button>`;}
-function block9 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-search__icon" aria-hidden="true" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" name="search"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-search__icon" aria-hidden="true" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" name="search"></ui5-icon>`;}
+function block9 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-search__icon" aria-hidden="true" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" show-tooltip name="search"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-search__icon" aria-hidden="true" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" show-tooltip name="search"></ui5-icon>`;}
 function block10 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" size="Small" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" size="Small" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></udex-button>`;}
 function block11 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} id="submit-button" class="udex-search__submit-button" size="Large" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button id="submit-button" class="udex-search__submit-button" size="Large" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></udex-control-button>`;}
 function block12 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-search-suggestions__message">${ifDefined(this.noResultMessage)}</span>`;}