@sapudex/web-components 2.53.0 → 2.54.0

package/src/ListItem.ts

@@ -1,6 +1,6 @@
 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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -28,7 +28,7 @@ import ListItemTemplate from "./generated/templates/ListItemTemplate.lit.js";
 
 // Styles
 import ListItemCss from "./generated/themes/ListItem.css.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 
 const listItemClass: string = "udex-list__item";
 const listItemRole: string = "option";
@@ -215,7 +215,7 @@ class UDExListItem extends UDExListItemBase {
    * @public
    */
   @slot({ type: UDExButton })
-    firstIcon!: Array<UDExButton>;
+    firstIcon!: Slot<UDExButton>;
 
   /**
    * Slot for second icon.
@@ -224,7 +224,7 @@ class UDExListItem extends UDExListItemBase {
    * @public
    */
   @slot({ type: UDExButton })
-    secondIcon!: Array<UDExButton>;
+    secondIcon!: Slot<UDExButton>;
 
   /**
   * Defines the role attribute of component

package/src/MastheadItem.ts

@@ -1,8 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot, ChangeInfo } 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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
@@ -299,7 +299,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @slot({ type: HTMLElement })
-    dropdown?: Array<HTMLElement>;
+    dropdown!: Slot<HTMLElement>;
 
   /**
    * Slot for any content
@@ -308,7 +308,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @slot({ type: HTMLElement, "default": true })
-    content?: DefaultSlot<HTMLElement>;
+    content!: DefaultSlot<HTMLElement>;
 
   /**
    * Defines the prevents the item from losing focus.

package/src/MastheadMobileMenu.ts

@@ -1,9 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot } 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -106,7 +106,7 @@ class UDExMastheadMobileMenu extends UI5Element {
    * @public
    */
   @slot({ type: Node })
-    search!: Array<Node>;
+    search!: Slot<Node>;
 
   /**
    * List of the menu items
@@ -124,7 +124,7 @@ class UDExMastheadMobileMenu extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    exploreSapMobileButton?: UDExMastheadItem;
+    exploreSapMobileButton!: Slot<UDExMastheadItem>;
 
   @property({ type: Boolean })
     _showCategories!: boolean;

package/src/MastheadProfileMenu.ts

@@ -1,7 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } 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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -215,7 +216,7 @@ class UDExMastheadProfileMenu extends UI5Element {
    * @public
    */
   @slot({ type: Node, "default": false })
-    message!: Array<Node>;
+    message!: Slot<Node>;
 
   /**
    * Slot for logout button.
@@ -223,7 +224,7 @@ class UDExMastheadProfileMenu extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    logoutButton!: Array<Node>;
+    logoutButton!: Slot<Node>;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;

package/src/MastheadShell.ts

@@ -1,9 +1,9 @@
 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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import type { DefaultSlot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -259,7 +259,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: Node })
-    countrySelector!: Array<UDExMastheadItem>;
+    countrySelector!: Slot<UDExMastheadItem>;
 
   /**
    * Slot for mobile menu
@@ -267,7 +267,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    mobileMenu!: Array<Node>;
+    mobileMenu!: Slot<Node>;
 
   /**
    * Slot for main menu items.
@@ -285,7 +285,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: Node })
-    search!: Array<Node>;
+    search!: Slot<Node>;
 
   /**
    * Slot for 'Explore SAP' menu
@@ -293,7 +293,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    exploreSAP!: Array<UDExMastheadItem>;
+    exploreSAP!: Slot<UDExMastheadItem>;
 
   /**
    * Slot for cart menu
@@ -301,7 +301,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    cart!: Array<UDExMastheadItem>;
+    cart!: Slot<UDExMastheadItem>;
 
   /**
    * Slot for joule menu
@@ -309,7 +309,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    joule!: Array<UDExMastheadItem>;
+    joule!: Slot<UDExMastheadItem>;
 
   /**
    * Slot for avatar
@@ -317,7 +317,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    profile!: Array<UDExMastheadItem>;
+    profile!: Slot<UDExMastheadItem>;
 
   /**
    * Slot for support
@@ -325,7 +325,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    support!: Array<UDExMastheadItem>;
+    support!: Slot<UDExMastheadItem>;
 
   /**
    * Defines URL to homepage. It will be used as a link on a logo and a site label

package/src/MediaPlayer.ts

@@ -5,7 +5,7 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import type { VimeoPlayer } from "./MediaPlayerVimeo.js";
 import mapLangFile from "./mediaPlayerLanguageMapping.js";
 import type UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
@@ -264,7 +264,7 @@ class UDExMediaPlayer extends UI5Element {
   video50!: boolean;
   video75!: boolean;
   videoCompleted!: boolean;
-  videoStart!: boolean;
+  _embedVideoStartFired = false;
   videoReady!: boolean;
   videoProgress!: number;
   private _pendingPlugins: Array<{ name: string; plugin: (...args: any[]) => any }> = [];
@@ -611,15 +611,16 @@ class UDExMediaPlayer extends UI5Element {
   }
 
   handleEmbedVideoPlaying = (embedEvent: CustomEvent) => {
-    if (!this.videoStart) {
+    if (!this._embedVideoStartFired) {
       this.fireDecoratorEvent("videoStart");
-      this.videoStart = true;
+      this._embedVideoStartFired = true;
     }
     const playedTime = Math.round(embedEvent.detail.percentPlayed as number);
     this.calculateVideoProgress(playedTime);
   };
 
   handleEmbedVideoEnded() {
+    this._embedVideoStartFired = false;
     this.fireDecoratorEvent("videoComplete");
   }
 

package/src/MediaPlayerVimeo.ts

@@ -39,6 +39,13 @@ type UDExMediaPlayerVimeoPlayingEventDetail = {
   styles: [MediaPlayerCss],
   template: MediaPlayerVimeoTemplate,
 })
+/**
+ * Fires when video starts playing for the first time or is replayed after ending
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("videoStart", { bubbles: true })
 /**
  * Fires when video is ready
  *
@@ -70,6 +77,7 @@ type UDExMediaPlayerVimeoPlayingEventDetail = {
 @event("playing", { bubbles: true })
 class UDExMediaPlayerVimeo extends UI5Element {
   eventDetails!: {
+    "videoStart": void,
     "ready": void,
     "ended": void,
     "pause": void,
@@ -128,6 +136,25 @@ class UDExMediaPlayerVimeo extends UI5Element {
     fluidMode!: boolean;
 
   player!: Player;
+  private _hasStarted = false;
+  private _replayPending = false;
+
+  _onVimeoPlay = () => {
+    if (!this._hasStarted || this._replayPending) {
+      this.fireDecoratorEvent("videoStart");
+      this._hasStarted = true;
+      this._replayPending = false;
+    }
+  };
+
+  _onVimeoPause = () => {
+    this.fireDecoratorEvent("pause");
+  };
+
+  _onVimeoEnded = () => {
+    this._replayPending = true;
+    this.fireDecoratorEvent("ended");
+  };
 
   setupPlayer = () => {
     const iframe = this.shadowRoot?.querySelector("iframe");
@@ -136,17 +163,15 @@ class UDExMediaPlayerVimeo extends UI5Element {
     }
     this.player = new Player(iframe);
 
+    this.player.on("play", this._onVimeoPlay);
+
     this.player.on("timeupdate", e => {
       this.fireDecoratorEvent("playing", { percentPlayed: e.percent * 100 });
     });
 
-    this.player.on("pause", () => {
-      this.fireDecoratorEvent("pause");
-    });
+    this.player.on("pause", this._onVimeoPause);
 
-    this.player.on("ended", () => {
-      this.fireDecoratorEvent("ended");
-    });
+    this.player.on("ended", this._onVimeoEnded);
 
     this.player.on("loaded", () => {
       this.fireDecoratorEvent("ready");

package/src/MediaPlayerYoutube.ts

@@ -1,3 +1,4 @@
+/// <reference types="youtube" />
 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";
@@ -61,6 +62,13 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
   styles: [MediaPlayerCss, MediaPlayerYoutubeCss],
   template: MediaPlayerYoutubeTemplate,
 })
+/**
+ * Fires when video starts playing for the first time or is replayed after ending
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("videoStart", { bubbles: true })
 /**
  * Fires when video is ready
  *
@@ -94,6 +102,7 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
 @event("playing", { bubbles: true })
 class UDExMediaPlayerYoutube extends UI5Element {
   eventDetails!: {
+    "videoStart": void,
     "ready": void,
     "ended": UDExMediaPlayerYoutubeBaseEventDetails,
     "pause": UDExMediaPlayerYoutubeBaseEventDetails,
@@ -147,6 +156,8 @@ class UDExMediaPlayerYoutube extends UI5Element {
   private youtubePlayer!: YT.Player;
   private checkInterval?: number;
   private videoDuration: number = 0;
+  private _hasStarted = false;
+  private _replayPending = false;
 
   get videoId(): string {
     if (!this.source) {
@@ -221,16 +232,24 @@ class UDExMediaPlayerYoutube extends UI5Element {
     const { data } = ytevent;
     const { PLAYING, PAUSED, ENDED } = window.YT.PlayerState;
 
-    if (data === PLAYING && !this.checkInterval) {
-      this.checkInterval = window.setInterval(() => {
-        this.checkVideoProgress();
-      }, CHECK_INTERVAL_TIME);
-    } else if (data !== PLAYING && this.checkInterval) {
+    if (data === PLAYING) {
+      if (!this._hasStarted || this._replayPending) {
+        this.fireDecoratorEvent("videoStart");
+        this._hasStarted = true;
+        this._replayPending = false;
+      }
+      if (!this.checkInterval) {
+        this.checkInterval = window.setInterval(() => {
+          this.checkVideoProgress();
+        }, CHECK_INTERVAL_TIME);
+      }
+    } else if (this.checkInterval) {
       clearInterval(this.checkInterval);
       this.checkInterval = undefined;
     }
 
     if (data === ENDED) {
+      this._replayPending = true;
       this.fireDecoratorEvent("ended", { ytevent });
     }
 

package/src/MessageStrip.ts

@@ -1,6 +1,7 @@
 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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import MessageStrip from "@ui5/webcomponents/dist/MessageStrip.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -123,7 +124,7 @@ class UDExMessageStrip extends MessageStrip {
    * @slot
    * @public
    */
-  @slot({ type: Node }) default!: Node;
+  @slot({ type: Node }) default!: Slot<Node>;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;

package/src/Modal.ts

@@ -38,6 +38,7 @@ export enum UDExModalType {
     getEffectiveScrollbarStyle(),
   ],
 })
+
 class UDExModal extends Dialog {
   /**
   * Defines modal display type
@@ -51,12 +52,26 @@ class UDExModal extends Dialog {
     type: `${UDExModalType}` = UDExModalType.default;
 
   onAfterRendering() {
-    const content = this.shadowRoot?.querySelector<HTMLElement>(".ui5-popup-content");
+    super.onAfterRendering();
+    const content = this._getPopupContent();
+
     if (content) {
-      const gutterWidth = content.offsetWidth - content.clientWidth;
-      this.style.setProperty("--udex-modal-scrollbar-width", `${gutterWidth}px`);
+      this._setScrollbarWidth(content);
     }
   }
+
+  _setScrollbarWidth(content: HTMLElement) {
+    const scrollbarWidth = content.offsetWidth - content.clientWidth;
+
+    this.style.setProperty(
+      "--udex-modal-scrollbar-width",
+      `${scrollbarWidth}px`,
+    );
+  }
+
+  _getPopupContent(): HTMLElement | null {
+    return this.shadowRoot?.querySelector<HTMLElement>(".ui5-popup-content") ?? null;
+  }
 }
 
 UDExModal.define();

package/src/PromoTile.ts

@@ -1,8 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot } 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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -80,7 +80,7 @@ class UDExPromoTile extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    pictogram?: Array<HTMLElement>;
+    pictogram!: Slot<HTMLElement>;
 
   /**
    * Allows control over setting the CSS gradient.

package/src/Quote.ts

@@ -1,8 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot } 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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import QuoteTemplate from "./QuoteTemplate.js";
 
@@ -59,7 +59,7 @@ class UDExQuote extends UI5Element {
     * @public
   */
   @slot()
-    link!: Array<HTMLElement>;
+    link!: Slot<HTMLElement>;
 
   /**
     * Defines author's name and company
@@ -68,7 +68,7 @@ class UDExQuote extends UI5Element {
     * @slot
   */
   @slot()
-    author!: Array<HTMLElement>;
+    author!: Slot<HTMLElement>;
 
   /**
     * Defines image near quote text
@@ -77,7 +77,7 @@ class UDExQuote extends UI5Element {
     * @slot
   */
   @slot()
-    image!: Array<HTMLElement>;
+    image!: Slot<HTMLElement>;
 
   /**
     * Defines image (Avatar or company logo) size

package/src/Review.ts

@@ -1,8 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot } 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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -66,7 +66,7 @@ class UDExReview extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    reviewButton!: UDExButton;
+    reviewButton!: Slot<UDExButton>;
 
   /**
    * Slot for the default text when there are no reviews or rating.
@@ -75,7 +75,7 @@ class UDExReview extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    defaultText!: HTMLElement;
+    defaultText!: Slot<HTMLElement>;
 
   /**
    * Slot for rating bars.

package/src/ReviewItem.ts

@@ -1,8 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } 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 jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -104,7 +105,7 @@ class UDExReviewItem extends UI5Element {
    * @slot
    */
   @slot()
-    author!: Array<HTMLElement>;
+    author!: Slot<HTMLElement>;
 
   /**
    * Defines the date of the review.
@@ -113,7 +114,7 @@ class UDExReviewItem extends UI5Element {
    * @slot
    */
   @slot()
-    date!: Array<HTMLElement>;
+    date!: Slot<HTMLElement>;
 
   /**
    * Slot for custom content.
@@ -121,7 +122,7 @@ class UDExReviewItem extends UI5Element {
    * @slot
    */
   @slot()
-    content?: Array<HTMLElement>;
+    content!: Slot<HTMLElement>;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;

package/src/Search.ts

@@ -1,7 +1,7 @@
 import type { DefaultSlot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";

package/src/SearchableListBase.ts

@@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { cleanLabel } from "./utils/listItemLabelUtils.js";
 import { UDExListMode, UDExListStyleType } from "./types/List.js";
@@ -531,6 +531,11 @@ class UDExSearchableListBase extends UI5Element {
       const item = this.items[i];
 
       if (item.isGroup) {
+        if (item._id === itemId) {
+          menuItem = item;
+          break;
+        }
+
         const groupItems = (item as UDExListGroupHeaderBase).getItems();
         menuItem = groupItems.find(({ _id }) => _id === itemId);
 

package/src/SecondaryNavigation.ts

@@ -1,9 +1,9 @@
-import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ChangeInfo, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -145,7 +145,7 @@ class UDExSecondaryNavigation extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    breadcrumbs!: Array<HTMLElement>;
+    breadcrumbs!: Slot<HTMLElement>;
 
   /**
    * Slot for action buttons.
@@ -154,7 +154,7 @@ class UDExSecondaryNavigation extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    buttons!: Array<HTMLElement>;
+    buttons!: Slot<HTMLElement>;
 
   /**
    * Defines the heading of the component.

package/src/SecondaryNavigationItem.ts

@@ -1,6 +1,7 @@
 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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
@@ -109,7 +110,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
    * @public
    */
   @slot({ type: HTMLElement })
-    buttons!: Array<HTMLElement>;
+    buttons!: Slot<HTMLElement>;
 
   /**
    * List of the sub items

package/src/SelectBase.ts

@@ -1222,7 +1222,7 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   get listboxRole(): AriaHasPopup {
-    return this._listBoxRole;
+    return this.isTreeStructure ? "tree" : this._listBoxRole;
   }
 
   get listAriaControlsId(): string {

package/src/SelectBoxGroupHeader.ts

@@ -1,6 +1,6 @@
 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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import UDExSelectBoxItem from "./SelectBoxItem.js";