@sapudex/web-components 2.49.0 → 2.51.0

package/dist/vscode.html-custom-data.json

@@ -1464,7 +1464,7 @@
     },
     {
       "name": "udex-hero-banner",
-      "description": "\n\n\n---\n\n\n\n\n### **Slots:**\n - **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.\n- **content** - Slot for primary content.\n- **mediaContent** - Slot for image or video content.",
+      "description": "\n\n\n---\n\n\n\n\n### **Slots:**\n - **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.\n- **breadcrumbs** - Slot for breadcrumbs.\n- **content** - Slot for primary content.\n- **mediaContent** - Slot for image or video content.",
       "attributes": [
         {
           "name": "background-color",
@@ -2891,11 +2891,22 @@
           "name": "design",
           "description": "Defines the component type.",
           "values": [
+            { "name": "Neutral" },
             { "name": "Negative" },
             { "name": "Information" },
             { "name": "Positive" },
             { "name": "Warning" },
-            { "name": "Action" }
+            { "name": "Action" },
+            { "name": "GreyLight" },
+            { "name": "GreyDark" },
+            { "name": "RedLight" },
+            { "name": "RedDark" },
+            { "name": "MangoLight" },
+            { "name": "MangoDark" },
+            { "name": "GreenLight" },
+            { "name": "GreenDark" },
+            { "name": "... 9 more ..." },
+            { "name": "RaspberryDark" }
           ]
         },
         {
@@ -2920,7 +2931,7 @@
         },
         {
           "name": "status-type",
-          "description": "Defines the component Status Type.",
+          "description": "Defines the component Status Type.\n\n`Text` value is DEPRECATED! Use `Icon` instead.",
           "values": [{ "name": "Text" }, { "name": "None" }, { "name": "Icon" }]
         },
         {
@@ -4614,7 +4625,7 @@
           "values": []
         },
         {
-          "name": "ud-exsize-more-button",
+          "name": "size-more-button",
           "description": "Defines the size of the \"More\" button.",
           "values": [{ "name": "Medium" }, { "name": "Small" }]
         },
@@ -5387,7 +5398,7 @@
     },
     {
       "name": "udex-wizard",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-wizard</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Wizard.js\";</code>\n\n\n---\n\n\n",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-wizard</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Wizard.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **step-change** - Fired when the step is changed by user interaction.",
       "attributes": [
         {
           "name": "accessible-name",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.49.0",
+  "version": "2.51.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3350,7 +3350,7 @@
         },
         {
           "name": "udex-hero-banner",
-          "description": "\n---\n\n\n### **Slots:**\n - **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.\n- **content** - Slot for primary content.\n- **mediaContent** - Slot for image or video content.",
+          "description": "\n---\n\n\n### **Slots:**\n - **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.\n- **breadcrumbs** - Slot for breadcrumbs.\n- **content** - Slot for primary content.\n- **mediaContent** - Slot for image or video content.",
           "doc-url": "",
           "attributes": [
             {
@@ -3398,6 +3398,7 @@
               "name": "backgroundPicture",
               "description": "Slot background picture override."
             },
+            { "name": "breadcrumbs", "description": "Slot for breadcrumbs." },
             { "name": "content", "description": "Slot for primary content." },
             {
               "name": "mediaContent",
@@ -6296,7 +6297,7 @@
               "name": "design",
               "description": "Defines the component type.",
               "value": {
-                "type": "\"Negative\" | \"Information\" | \"Positive\" | \"Warning\" | \"Action\""
+                "type": "\"Neutral\" | \"Negative\" | \"Information\" | \"Positive\" | \"Warning\" | \"Action\" | \"GreyLight\" | \"GreyDark\" | \"RedLight\" | \"RedDark\" | \"MangoLight\" | \"MangoDark\" | \"GreenLight\" | \"GreenDark\" | ... 9 more ... | \"RaspberryDark\""
               }
             },
             {
@@ -6321,7 +6322,7 @@
             },
             {
               "name": "status-type",
-              "description": "Defines the component Status Type.",
+              "description": "Defines the component Status Type.\n\n`Text` value is DEPRECATED! Use `Icon` instead.",
               "value": { "type": "\"Text\" | \"None\" | \"Icon\"" }
             },
             {
@@ -6353,7 +6354,7 @@
                 "name": "design",
                 "description": "Defines the component type.",
                 "value": {
-                  "type": "\"Negative\" | \"Information\" | \"Positive\" | \"Warning\" | \"Action\""
+                  "type": "\"Neutral\" | \"Negative\" | \"Information\" | \"Positive\" | \"Warning\" | \"Action\" | \"GreyLight\" | \"GreyDark\" | \"RedLight\" | \"RedDark\" | \"MangoLight\" | \"MangoDark\" | \"GreenLight\" | \"GreenDark\" | ... 9 more ... | \"RaspberryDark\""
                 }
               },
               {
@@ -6378,7 +6379,7 @@
               },
               {
                 "name": "status-type",
-                "description": "Defines the component Status Type.",
+                "description": "Defines the component Status Type.\n\n`Text` value is DEPRECATED! Use `Icon` instead.",
                 "value": { "type": "\"Text\" | \"None\" | \"Icon\"" }
               },
               {
@@ -9779,7 +9780,7 @@
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "ud-exsize-more-button",
+              "name": "size-more-button",
               "description": "Defines the size of the \"More\" button.",
               "value": {
                 "type": "\"Medium\" | \"Small\"",
@@ -9850,7 +9851,7 @@
                 "value": { "type": "boolean" }
               },
               {
-                "name": "ud-exsize-more-button",
+                "name": "size-more-button",
                 "description": "Defines the size of the \"More\" button.",
                 "value": { "type": "\"Medium\" | \"Small\"" }
               },
@@ -11518,7 +11519,7 @@
         },
         {
           "name": "udex-wizard",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-wizard</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Wizard.js\";</code>\n---\n",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-wizard</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Wizard.js\";</code>\n---\n\n\n### **Events:**\n - **step-change** - Fired when the step is changed by user interaction.",
           "doc-url": "",
           "attributes": [
             {
@@ -11532,7 +11533,12 @@
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "step-change",
+              "description": "Fired when the step is changed by user interaction."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -11546,7 +11552,12 @@
                 "value": { "type": "boolean" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "step-change",
+                "description": "Fired when the step is changed by user interaction."
+              }
+            ]
           }
         },
         {

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.49.0",
+  "version": "2.51.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -37,19 +37,19 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.2",
-    "@ui5/webcomponents": "2.23.3",
-    "@ui5/webcomponents-base": "2.23.3",
-    "@ui5/webcomponents-fiori": "2.23.3",
-    "@ui5/webcomponents-icons": "2.23.3",
-    "@ui5/webcomponents-localization": "2.23.3",
-    "@ui5/webcomponents-theming": "2.23.2",
+    "@ui5/webcomponents": "2.25.0",
+    "@ui5/webcomponents-base": "2.25.0",
+    "@ui5/webcomponents-fiori": "2.25.0",
+    "@ui5/webcomponents-icons": "2.25.0",
+    "@ui5/webcomponents-localization": "2.25.0",
+    "@ui5/webcomponents-theming": "2.25.0",
     "@vimeo/player": "^2.24.0",
     "video.js": "^8.23.6"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.5",
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
-    "@ui5/webcomponents-tools": "2.23.3",
+    "@ui5/webcomponents-tools": "2.25.0",
     "chromedriver": "149.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/HeroBanner.ts

@@ -1,11 +1,13 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import HeroBannerTemplate from "./HeroBannerTemplate.js";
+import type UDExBreadcrumbs from "./Breadcrumbs.js";
 
 // Styles
 import HeroBannerCss from "./generated/themes/HeroBanner.css.js";
@@ -105,8 +107,8 @@ class UDExHeroBanner extends UI5Element {
    * @slot
    * @public
    */
-  @slot()
-    content?: Array<HTMLElement>;
+  @slot({ type: HTMLElement })
+    content!: Slot<HTMLElement>;
 
   /**
    * Slot for image or video content.
@@ -114,8 +116,8 @@ class UDExHeroBanner extends UI5Element {
    * @slot
    * @public
    */
-  @slot()
-    mediaContent?: Array<HTMLElement>;
+  @slot({ type: HTMLElement })
+    mediaContent!: Slot<HTMLElement>;
 
   /**
    * Slot for any additional content.
@@ -123,8 +125,8 @@ class UDExHeroBanner extends UI5Element {
    * @slot
    * @public
    */
-  @slot()
-    additionalContent?: Array<HTMLElement>;
+  @slot({ type: HTMLElement })
+    additionalContent!: Slot<HTMLElement>;
 
   /**
    * Slot background picture override.
@@ -132,15 +134,63 @@ class UDExHeroBanner extends UI5Element {
    * @slot
    * @public
    */
-  @slot()
-    backgroundPicture?: Array<HTMLElement>;
+  @slot({ type: HTMLElement })
+    backgroundPicture!: Slot<HTMLElement>;
+
+  /**
+   * Slot for breadcrumbs.
+   *
+   * @slot breadcrumbs
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    breadcrumbs!: Slot<UDExBreadcrumbs>;
+
+  onEnterDOM() {
+    if (this.backgroundVideo) {
+      if (this.backgroundColor) {
+        this.style.setProperty("--udexHeroBannerBackgroundVideoColor", `${this.wrapperBackgroundColor}`);
+      }
+      this._video?.addEventListener("play", () => {
+        this._calculateMediaButtonState();
+      });
+    }
+  }
+
+  _toggleMediaButton(): void {
+    if (this._video?.paused) {
+      this._video?.play();
+    } else {
+      this._video?.pause();
+    }
+    this._calculateMediaButtonState();
+  }
+
+  _calculateMediaButtonState() {
+    this._isVideoRunning = this._video ? !this._video.paused : false;
+  }
+
+  _isHTMLDivElement = (element: HTMLElement): element is HTMLDivElement => {
+    return element.tagName === "DIV";
+  };
+
+  _handleKeydown(event: KeyboardEvent): void {
+    const target = <HTMLElement>event.target;
+    if (this._isHTMLDivElement(target) && isSpace(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      this._toggleMediaButton();
+    }
+  }
 
   get hasBackgroundImage(): boolean {
     return !!this.backgroundImage;
   }
+
   get hasBackgroundVideo(): boolean {
     return !!this.backgroundVideo;
   }
+
   get wrapperBackgroundColor(): string {
     return this.backgroundColor ? this.backgroundColor : "transparent";
   }
@@ -179,44 +229,8 @@ class UDExHeroBanner extends UI5Element {
   get _video() {
     return this.shadowRoot?.querySelector<HTMLVideoElement>("video");
   }
-
-  _toggleMediaButton(): void {
-    if (this._video?.paused) {
-      this._video?.play();
-    } else {
-      this._video?.pause();
-    }
-    this._calculateMediaButtonState();
-  }
-
-  _calculateMediaButtonState() {
-    this._isVideoRunning = this._video ? !this._video.paused : false;
-  }
-
-  _isHTMLDivElement = (element: HTMLElement): element is HTMLDivElement => {
-    return element.tagName === "DIV";
-  };
-
-  _handleKeydown(event: KeyboardEvent): void {
-    const target = <HTMLElement>event.target;
-    if (this._isHTMLDivElement(target) && isSpace(event)) {
-      event.preventDefault();
-      event.stopPropagation();
-      this._toggleMediaButton();
-    }
-  }
-
-  onEnterDOM() {
-    if (this.backgroundVideo) {
-      if (this.backgroundColor) {
-        this.style.setProperty("--udexHeroBannerBackgroundVideoColor", `${this.wrapperBackgroundColor}`);
-      }
-      this._video?.addEventListener("play", () => {
-        this._calculateMediaButtonState();
-      });
-    }
-  }
 }
+
 UDExHeroBanner.define();
 
 export default UDExHeroBanner;

package/src/HeroBannerTemplate.tsx

@@ -43,25 +43,32 @@ export default function HeroBannerTemplate(this: HeroBanner) {
                 alt={this.backgroundImageLabel}/>
             </picture>
           )}
-          <div className={`${rootClass}__content-container`}>
-            <slot
-              id={`${rootClass}__content`}
-              name="content"
-              part="content">
-            </slot>
+          <>
             <slot
-              id={`${rootClass}__additionalContent`}
-              name="additionalContent"
-              part="additionalContent">
+              id={`${rootClass}__breadcrumbs`}
+              name="breadcrumbs"
+              part="breadcrumbs">
             </slot>
-          </div>
-          <button
-            className={`${rootClass}__media-button`}
-            aria-label="Play / Pause button"
-            role="button"
-            onClick={this._toggleMediaButton}>
-            <UI5Icon name={btnIcon}></UI5Icon>
-          </button>
+            <div className={`${rootClass}__content-container`}>
+              <slot
+                id={`${rootClass}__content`}
+                name="content"
+                part="content">
+              </slot>
+              <slot
+                id={`${rootClass}__additionalContent`}
+                name="additionalContent"
+                part="additionalContent">
+              </slot>
+            </div>
+            <button
+              className={`${rootClass}__media-button`}
+              aria-label="Play / Pause button"
+              role="button"
+              onClick={this._toggleMediaButton}>
+              <UI5Icon name={btnIcon}></UI5Icon>
+            </button>
+          </>
         </div>
       ) : (
         <div className={`${rootClass}__container`}>
@@ -79,11 +86,17 @@ export default function HeroBannerTemplate(this: HeroBanner) {
             </picture>
           ) : null}
           <div className={`${rootClass}__content-container`}>
-            <slot
-              id={`${rootClass}__content`}
-              name="content"
-              part="content">
-            </slot>
+            <div id={`${rootClass}__content`}>
+              <slot
+                id={`${rootClass}__breadcrumbs`}
+                name="breadcrumbs"
+                part="breadcrumbs">
+              </slot>
+              <slot
+                name="content"
+                part="content">
+              </slot>
+            </div>
             {this.hasAdditionalContent && (
               <slot
                 id={`${rootClass}__additionalContent`}

package/src/MessageStrip.ts

@@ -46,11 +46,13 @@ class UDExMessageStrip extends MessageStrip {
    */
   @property()
   /** @ts-expect-error */
-    design!: `${UDExMessageStripDesign}` = UDExMessageStripDesign.Action;
+    design!: `${UDExMessageStripDesign}` = UDExMessageStripDesign.Neutral;
 
   /**
    * Defines the component Status Type.
    *
+   * `Text` value is DEPRECATED! Use `Icon` instead.
+   *
    * @public
    */
   @property()
@@ -127,7 +129,7 @@ class UDExMessageStrip extends MessageStrip {
   static i18nBundle: I18nBundle;
 
   onBeforeRendering() {
-    if (this.isDesignActionOrIsNotIconType) {
+    if (this.isNotIconStatusType || (this.isDecorativeDesign && this.icon.length === 0)) {
       this.hideIcon = true;
     }
   }
@@ -143,11 +145,38 @@ class UDExMessageStrip extends MessageStrip {
       [UDExMessageStripDesign.Negative]: this.statusErrorText || this.getTranslation(MESSAGE_STRIP_ERROR),
       [UDExMessageStripDesign.Warning]: this.statusWarningText || this.getTranslation(MESSAGE_STRIP_WARNING),
       [UDExMessageStripDesign.Action]: this.getTranslation(MESSAGE_STRIP_ACTION),
+      [UDExMessageStripDesign.Neutral]: this.getTranslation(MESSAGE_STRIP_ACTION),
     };
   }
 
   isDesignAction(): boolean {
-    return this.design === UDExMessageStripDesign.Action;
+    return this.design === UDExMessageStripDesign.Action || this.design === UDExMessageStripDesign.Neutral;
+  }
+
+  get isDecorativeDesign(): boolean {
+    const decorativeDesigns: string[] = [
+      UDExMessageStripDesign.Action,
+      UDExMessageStripDesign.Neutral,
+      UDExMessageStripDesign.GreyLight,
+      UDExMessageStripDesign.GreyDark,
+      UDExMessageStripDesign.RedLight,
+      UDExMessageStripDesign.RedDark,
+      UDExMessageStripDesign.MangoLight,
+      UDExMessageStripDesign.MangoDark,
+      UDExMessageStripDesign.GreenLight,
+      UDExMessageStripDesign.GreenDark,
+      UDExMessageStripDesign.TealLight,
+      UDExMessageStripDesign.TealDark,
+      UDExMessageStripDesign.BlueLight,
+      UDExMessageStripDesign.BlueDark,
+      UDExMessageStripDesign.IndigoLight,
+      UDExMessageStripDesign.IndigoDark,
+      UDExMessageStripDesign.PinkLight,
+      UDExMessageStripDesign.PinkDark,
+      UDExMessageStripDesign.RaspberryLight,
+      UDExMessageStripDesign.RaspberryDark,
+    ];
+    return decorativeDesigns.includes(this.design);
   }
 
   get isDesignWarning(): boolean {
@@ -159,19 +188,21 @@ class UDExMessageStrip extends MessageStrip {
   }
 
   get shouldHideIcon(): boolean {
-    if (this.isDesignActionOrIsNotIconType) {
+    if (this.isDecorativeDesign) {
+      return this.icon.length === 0;
+    }
+    if (this.isNotIconStatusType) {
       return this.hideIcon || this.icon.length === 0;
     }
-
     return this.hideIcon;
   }
 
   get hideTextStatus(): boolean {
-    return this.statusType !== UDExMessageStripStatusType.Text || this.isDesignAction();
+    return this.statusType !== UDExMessageStripStatusType.Text || this.isDecorativeDesign;
   }
 
   get textStatus(): string | undefined {
-    if (this.design !== UDExMessageStripDesign.Action) {
+    if (!this.isDecorativeDesign) {
       return this.textStatusTypeMapping()[this.design];
     }
   }
@@ -189,11 +220,12 @@ class UDExMessageStrip extends MessageStrip {
   }
 
   get isDesignActionOrIsNotIconType(): boolean {
-    return this.isDesignAction() || this.isNotIconStatusType;
+    return this.isDecorativeDesign || this.isNotIconStatusType;
   }
 
   get hiddenText(): string {
-    return `${this.textStatusTypeMapping()[this.design]} ${this.hideCloseButton ? "" : this._closableText}`;
+    const statusText = this.isDecorativeDesign ? (this.textStatusTypeMapping()[this.design] ?? "") : this.textStatusTypeMapping()[this.design];
+    return `${statusText} ${this.hideCloseButton ? "" : this._closableText}`.trim();
   }
 }
 

package/src/Modal.ts

@@ -49,6 +49,14 @@ class UDExModal extends Dialog {
   */
   @property()
     type: `${UDExModalType}` = UDExModalType.default;
+
+  onAfterRendering() {
+    const content = this.shadowRoot?.querySelector<HTMLElement>(".ui5-popup-content");
+    if (content) {
+      const gutterWidth = content.offsetWidth - content.clientWidth;
+      this.style.setProperty("--udex-modal-scrollbar-width", `${gutterWidth}px`);
+    }
+  }
 }
 
 UDExModal.define();

package/src/TabNavigation.hbs

@@ -43,7 +43,7 @@
         <udex-button
             class="udex-tab-navigation__button-more"
             design="Tertiary"
-            size="Medium"
+            size="{{sizeMoreButton}}"
             end-icon="navigation-down-arrow"
             @click="{{handleMoreButton}}"
             @keydown="{{handleFocusMoreButton}}"

package/src/TabNavigation.ts

@@ -125,7 +125,7 @@ class UDExTabNavigation extends UI5Element {
    * @default "Small"
   */
   @property()
-    UDExsizeMoreButton: `${UDExSizeMoreButton}` = "Small";
+    sizeMoreButton: `${UDExSizeMoreButton}` = "Small";
 
   /**
    * Defines the mode of the component.
@@ -715,6 +715,7 @@ class UDExTabNavigation extends UI5Element {
     this.setVisibleTabs();
     this.setTabsIndex(selectedTabIndex);
     this.emitClickEvent(selectedTabIndex + 1);
+    this.fireDecoratorEvent("tab-select", { tab: this._selectedTab, tabIndex: selectedTabIndex });
   }
 
   getMoreButton(): HTMLElement {

package/src/Wizard.ts

@@ -1,7 +1,9 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Wizard from "@ui5/webcomponents-fiori/dist/Wizard.js";
+import type { WizardStepChangeEventDetail } from "@ui5/webcomponents-fiori/dist/Wizard.js";
 import WizardContentLayout from "@ui5/webcomponents-fiori/dist/types/WizardContentLayout.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import WizardTemplate from "./WizardTemplate.js";
@@ -67,8 +69,19 @@ export type StepInfo = {
   template: WizardTemplate,
   styles: [UI5Wizard.styles, WizardCss],
 })
-
+/**
+ * Fired when the step is changed by user interaction.
+ *
+ * @public
+ * @param {WizardStepChangeEventDetail} step - The new step.
+ * @param {WizardStepChangeEventDetail} previousStep - The previous step.
+ * @param {boolean} withScroll - Indicates if the change of the step was triggered by scrolling.
+ */
+@event("step-change", { bubbles: true })
 class UDExWizard extends UI5Wizard {
+  eventDetails!: {
+    "step-change": WizardStepChangeEventDetail;
+  };
   @slot({
     "default": true,
     type: HTMLElement,
@@ -259,3 +272,4 @@ class UDExWizard extends UI5Wizard {
 UDExWizard.define();
 
 export default UDExWizard;
+export type { WizardStepChangeEventDetail };

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

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type TabNavigation from "../../TabNavigation.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}">${ this.showPlayButton ? block1.call(this, context, tags, suffix) : undefined }<div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" aria-orientation="${ifDefined(this.ariaOrientationValue)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div><${scopeTag("udex-button", tags, suffix)} class="udex-tab-navigation__button-more" design="Tertiary" size="Medium" end-icon="navigation-down-arrow" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" hidden>${ifDefined(this.moreButtonText)}</${scopeTag("udex-button", tags, suffix)}>${ this._overflowItems.length ? block5.call(this, context, tags, suffix) : undefined }${ this.showFooterSlot ? block6.call(this, context, tags, suffix) : undefined }</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block7.call(this, context, tags, suffix, item, index)) }</div></div>` : html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}">${ this.showPlayButton ? block1.call(this, context, tags, suffix) : undefined }<div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" aria-orientation="${ifDefined(this.ariaOrientationValue)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div><udex-button class="udex-tab-navigation__button-more" design="Tertiary" size="Medium" end-icon="navigation-down-arrow" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" hidden>${ifDefined(this.moreButtonText)}</udex-button>${ this._overflowItems.length ? block5.call(this, context, tags, suffix) : undefined }${ this.showFooterSlot ? block6.call(this, context, tags, suffix) : undefined }</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block7.call(this, context, tags, suffix, item, index)) }</div></div>`;}
+function block0 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}">${ this.showPlayButton ? block1.call(this, context, tags, suffix) : undefined }<div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" aria-orientation="${ifDefined(this.ariaOrientationValue)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div><${scopeTag("udex-button", tags, suffix)} class="udex-tab-navigation__button-more" design="Tertiary" size="${ifDefined(this.sizeMoreButton)}" end-icon="navigation-down-arrow" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" hidden>${ifDefined(this.moreButtonText)}</${scopeTag("udex-button", tags, suffix)}>${ this._overflowItems.length ? block5.call(this, context, tags, suffix) : undefined }${ this.showFooterSlot ? block6.call(this, context, tags, suffix) : undefined }</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block7.call(this, context, tags, suffix, item, index)) }</div></div>` : html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}">${ this.showPlayButton ? block1.call(this, context, tags, suffix) : undefined }<div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" aria-orientation="${ifDefined(this.ariaOrientationValue)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div><udex-button class="udex-tab-navigation__button-more" design="Tertiary" size="${ifDefined(this.sizeMoreButton)}" end-icon="navigation-down-arrow" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" hidden>${ifDefined(this.moreButtonText)}</udex-button>${ this._overflowItems.length ? block5.call(this, context, tags, suffix) : undefined }${ this.showFooterSlot ? block6.call(this, context, tags, suffix) : undefined }</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block7.call(this, context, tags, suffix, item, index)) }</div></div>`;}
 function block1 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} class="udex-tab-navigation__play-button" design="Tertiary" size="Large" icon="${ifDefined(this.playBtnIcon)}" tooltip="${ifDefined(this.playBtnTooltipText)}" @click="${this.onPlayButtonClick}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button class="udex-tab-navigation__play-button" design="Tertiary" size="Large" icon="${ifDefined(this.playBtnIcon)}" tooltip="${ifDefined(this.playBtnTooltipText)}" @click="${this.onPlayButtonClick}"></udex-button>`;}
 function block2 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ifDefined(item.tabNavigation)}${ item.isMobileVertical ? block3.call(this, context, tags, suffix, item, index) : undefined }`;}
 function block3 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.selected ? block4.call(this, context, tags, suffix, item, index) : undefined }`;}