@sapudex/web-components 0.147.0 → 0.173.0

package/src/SearchableListBase.ts

@@ -2,8 +2,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import {
+  isDown, isUp,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import { cleanLabel } from "./utils/listItemLabelUtils.js";
 import Search from "./Search.js";
 import UDExListItemBase from "./ListItemBase.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
@@ -277,7 +281,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   checkAndUpdateLabel(item: UDExListItemBase | UDExListGroupHeaderBase, str: string): boolean {
-    const cleanedLabel = this.cleanLabel(item.label);
+    const cleanedLabel = cleanLabel(item.label);
     if (this.isIncludes(cleanedLabel, str)) {
       item.label = this.addSearchTermTag(cleanedLabel, str);
       return true;
@@ -285,10 +289,6 @@ class UDExSearchableListBase extends UI5Element {
     return false;
   }
 
-  cleanLabel(str: string): string {
-    return str.replace(/<\/?b[^>]*>/g, "");
-  }
-
   addSearchTermTag(text: string, str: string): string {
     return text.replace(new RegExp(`(${str})`, "i"), "<b>$&</b>");
   }
@@ -314,6 +314,15 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
+  handleKeyDown(e: KeyboardEvent) {
+    if (isUp(e)) {
+      this.handlePreviousItemFocus(e);
+    }
+    if (isDown(e)) {
+      this.handleNextListItemFocus(e);
+    }
+  }
+
   getSlottedItems(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<UDExListItemBase | UDExListGroupHeaderBase> {
     const arr: Array<UDExListItemBase | UDExListGroupHeaderBase> = [];
     items.forEach(item => {
@@ -354,10 +363,44 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
+  // moves focus to next list item
+  handlePreviousItemFocus(e: KeyboardEvent) {
+    const item = e.target as HTMLElement;
+    const listItems = this.getDomListItems();
+    const currentSelectIndex = this.getCurrentIndex(item);
+    const previousSelectIndex = currentSelectIndex - 1;
+    if (currentSelectIndex > 0) {
+      e.preventDefault();
+      (listItems[previousSelectIndex] as HTMLElement).focus();
+    }
+  }
+
+  // moves focus to previous list item
+  handleNextListItemFocus(e: KeyboardEvent) {
+    const item = e.target as HTMLElement;
+    const listItems = this.getDomListItems();
+    const lastItemIndex = listItems.length - 1;
+    const currentSelectIndex = this.getCurrentIndex(item);
+    const nextSelectIndex = currentSelectIndex + 1;
+    if (nextSelectIndex <= lastItemIndex) {
+      e.preventDefault();
+      (listItems[nextSelectIndex] as HTMLElement).focus();
+    }
+  }
+
+  getCurrentIndex(item: Element): number {
+    return this.getDomListItems().indexOf(item);
+  }
+
   getSearch(): Search {
     return this.shadowRoot!.querySelector<Search>("udex-search")!;
   }
 
+  getDomListItems(): Element[] {
+    const elementList = this.shadowRoot!.querySelector("udex-list") as HTMLElement;
+    return elementList ? Array.from(elementList.querySelectorAll("udex-list-item")) : [];
+  }
+
   setItemsModeAndControl(items: Array<UDExFilterMenuItem>) {
     items.forEach(item => {
       item.mode = this.mode;
@@ -429,6 +472,14 @@ class UDExSearchableListBase extends UI5Element {
     return items.length > SHOW_SEARCH_AFTER_COUNT && !this.modeRadioGroup;
   }
 
+  get roleForGroupList(): string {
+    return this._filteredItems.some(element => element.isGroup) ? "group" : "none";
+  }
+
+  get accessibleRoleForList(): string {
+    return this._filteredItems.some(element => element.isGroup) ? "group" : "list";
+  }
+
   static async onDefine(): Promise<void> {
     UDExSearchableListBase.i18nBundle = await getI18nBundle("@udex/web-components");
   }

package/src/SecondaryNavigation.hbs

@@ -58,6 +58,7 @@
         </div>
     </div>
     <udex-secondary-navigation-item
+        @keydown="{{handleKeyDown}}"
         class="udex-secondary-navigation__mobile-nav"
         role="button"
         aria-label="{{mobileMenuOpenerAriaLabel}}"

package/src/SecondaryNavigation.ts

@@ -8,18 +8,14 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import {
-  isLeft,
-  isRight,
-  isEscape,
+  isEscape, isLeft, isRight, isDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
-
 import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
-
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
 
@@ -229,30 +225,41 @@ class UDExSecondaryNavigation extends UI5Element {
 
   handleKeyDown(e: KeyboardEvent): void {
     e.stopPropagation();
+    const item = e.target as UDExSecondaryNavigationItem;
+
     if (isLeft(e)) {
-      this.focusPrevNavItem(e);
+      return this.focusPrevNavItem(e);
     }
     if (isRight(e)) {
-      this.focusNextNavItem(e);
+      return this.focusNextNavItem(e);
+    }
+    if (isEscape(e) && item.hasNestedItems) {
+      return item.closeDropdown();
     }
-    if (isEscape(e)) {
-      (e.target as UDExSecondaryNavigationItem).closeDropdown();
+    if (isDown(e) && item.hasNestedItems) {
+      item.openDropdown();
     }
   }
 
   focusPrevNavItem(e: KeyboardEvent): void {
     const item = e.target as UDExSecondaryNavigationItem;
     const currentSelectedIndex = this.getCurrentIndex(item);
-    const lastItemIndex = this.domNavItems.length - 1;
-    const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
-    this.domNavItems[previousSelectIndex]?.focus();
+    const previousSelectIndex = currentSelectedIndex - 1;
+    if (currentSelectedIndex > 0) {
+      e.preventDefault();
+      this.domNavItems[previousSelectIndex]?.focus();
+    }
   }
 
   focusNextNavItem(e: KeyboardEvent): void {
     const item = e.target as UDExSecondaryNavigationItem;
     const currentSelectedIndex = this.getCurrentIndex(item);
-    const nextSelectIndex = currentSelectedIndex + 1 > this.domNavItems.length - 1 ? 0 : currentSelectedIndex + 1;
-    this.domNavItems[nextSelectIndex].focus();
+    const lastItemIndex = this.domNavItems.length - 1;
+    const nextSelectIndex = currentSelectedIndex + 1;
+    if (nextSelectIndex < lastItemIndex) {
+      e.preventDefault();
+      this.domNavItems[nextSelectIndex].focus();
+    }
   }
 
   getItemWidth(item: NavItem): number {
@@ -369,7 +376,7 @@ class UDExSecondaryNavigation extends UI5Element {
     document.addEventListener("mousedown", this.outsideClickListener);
   }
 
-  outsideClickListener = (e: MouseEvent): void => {
+  outsideClickListener = (e: Event): void => {
     if (this.isMobileScreen && e.target !== this) {
       this.closeMobileDropdown();
       return;
@@ -384,7 +391,7 @@ class UDExSecondaryNavigation extends UI5Element {
     this.mobileNav?.closeDropdown();
   }
 
-  handleDesktopDropdown(e: MouseEvent): void {
+  handleDesktopDropdown(e: Event): void {
     const isClickedNavItem = e.composedPath().includes(this._clickedNavItem);
     if (!isClickedNavItem && this._clickedNavItem) {
       this._clickedNavItem.closeDropdown();

package/src/SecondaryNavigationItem.hbs

@@ -6,19 +6,20 @@
         href="{{path}}"
         target="{{target}}"
         @keydown="{{handleItemLinkKeyDown}}"
-        @click="{{onItemClick}}">
+        @click="{{fireNavItemClickEvent}}">
         {{itemLabel}}
     </a>
 {{else}}
     <button
         class="udex-secondary-navigation__item"
         role="{{itemRole}}"
+        tabindex="0"
         ?active="{{isActive}}"
         aria-haspopup="{{hasNestedItems}}"
         aria-expanded="{{isOpen}}"
         aria-label="{{ariaLabel}}"
-        @keydown="{{handleItemButtonKeyDown}}"
-        @click="{{onItemClick}}">
+        @keydown="{{handleItemEnterOrSpaceKeys}}"
+        @click="{{openDropdown}}">
         <span class="udex-secondary-navigation__item-text-wrap">
             {{itemLabel}}
             {{#if _subTitle}}
@@ -37,10 +38,10 @@
     </button>
     {{#if isOpen}}
         <div
-            class="udex-secondary-navigation__dropdown"
-            @keydown="{{handleSubItemKeyDown}}">
+            class="udex-secondary-navigation__dropdown">
             <ul role="menu"
-                class="udex-secondary-navigation__dropdown-list">
+                class="udex-secondary-navigation__dropdown-list"
+                @keydown="{{handleSubItemKeyDown}}">
                 {{#each _processedItems}}
                     <li role="none">
                         <udex-secondary-navigation-sub-item
@@ -58,7 +59,9 @@
                     </li>
                 {{/each}}
             </ul>
-            <slot></slot>
+            <div @keydown="{{handleButtonsEscKey}}">
+                <slot></slot>
+            </div>
         </div>
     {{/if}}
 {{/if}}

package/src/SecondaryNavigationItem.ts

@@ -14,7 +14,7 @@ import {
   isSpace,
   isEnter,
   isHome,
-  isEnd,
+  isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
@@ -159,18 +159,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._subTitle = this.subActiveItemTitle || this._subTitle;
   }
 
-  onItemClick(): void {
-    if (this.hasNestedItems) {
-      this.setDropdownItems();
-      this.toggleDropdown();
-    }
-
-    this.fireEvent("nav-item-click", {
-      item: this,
-      index: this.index,
-    });
-  }
-
   onSubItemClick(e: Event): void {
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const clickedItem = this._processedItems[index];
@@ -178,6 +166,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (clickedItem.items) {
       this.setDropdownHistory();
       this.setNestedItems(clickedItem);
+      this.onShouldFocusFirstSubItem();
     }
 
     this.fireEvent("sub-item-click", {
@@ -190,8 +179,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this.setPrevNestedItems();
   }
 
-  toggleDropdown(): void {
-    this.isOpen = !this.isOpen;
+  openDropdown(): void {
+    if (this.hasNestedItems) {
+      this.setDropdownItems();
+      this.isOpen = !this.isOpen;
+      this.onShouldFocusFirstSubItem();
+    }
+
+    this.fireNavItemClickEvent();
   }
 
   closeDropdown(): void {
@@ -200,12 +195,11 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
     if (isEnter(e) || isSpace(e)) {
-      e.preventDefault();
-      this.onItemClick();
+      this.openDropdown();
     }
   }
 
-  handleItemButtonKeyDown(e: KeyboardEvent): void {
+  handleItemEnterOrSpaceKeys(e: KeyboardEvent): void {
     if (isEnter(e) || isSpace(e)) {
       this.onShouldFocusFirstSubItem();
     }
@@ -242,23 +236,41 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       e.preventDefault();
       this.handleEnterAndSpace(e);
     }
+    if (isTabPrevious(e) && this._isMobileView) {
+      this.closeDropdown();
+    }
+    if ((isTabPrevious(e) || isTabNext(e)) && !this._isMobileView) {
+      this.closeDropdown();
+    }
+  }
+
+  handleButtonsEscKey(e: KeyboardEvent): void {
+    if (isEscape(e) && this._isMobileView) {
+      this.handleEscapeKey();
+    }
   }
 
   handleUpArrow(e: KeyboardEvent): void {
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const lastIndex = this.domNavItems.length - 1;
-    const previousIndex = index - 1 < 0 ? lastIndex : index - 1;
-    if (!(lastIndex === previousIndex)) {
-      this.domNavItems[previousIndex].focus();
-    }
+    const previousSelectIndex = index - 1 < 0 ? lastIndex : index - 1;
+    const previousItem = this.domNavItems[previousSelectIndex];
+    const currentItem = this.domNavItems[index];
+
+    this.unsetTabIndex(currentItem);
+    this.setTabIndex(previousItem);
+    previousItem.focus();
   }
 
   handleDownArrow(e: KeyboardEvent): void {
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const nextIndex = index + 1 > this.domNavItems.length - 1 ? 0 : index + 1;
-    if (!(nextIndex === 0)) {
-      this.domNavItems[nextIndex].focus();
-    }
+    const nextItem = this.domNavItems[nextIndex];
+    const currentItem = this.domNavItems[index];
+
+    this.unsetTabIndex(currentItem);
+    this.setTabIndex(nextItem);
+    nextItem.focus();
   }
 
   handleLeftArrow(e: KeyboardEvent): void {
@@ -270,10 +282,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   }
 
   handleRightArrow(e: KeyboardEvent): void {
-    const { hasItems, isBack } = e.target as UDExSecondaryNavigationSubItem;
+    const { hasItems, isBack, index } = e.target as UDExSecondaryNavigationSubItem;
     if (hasItems && !isBack) {
       this.onSubItemClick(e);
-      this.onShouldFocusFirstSubItem();
+      this.unsetTabIndex(this.domNavItems[index]);
     }
   }
 
@@ -300,6 +312,13 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this.focus();
   }
 
+  fireNavItemClickEvent(): void {
+    this.fireEvent("nav-item-click", {
+      item: this,
+      index: this.index,
+    });
+  }
+
   setDropdownHistory(): void {
     this._dropdownHistory.push(this._processedItems);
   }
@@ -331,8 +350,19 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     }
   }
 
+  setTabIndex(item: UDExSecondaryNavigationSubItem): void {
+    item._tabIndex = "0";
+  }
+
+  unsetTabIndex(item: UDExSecondaryNavigationSubItem): void {
+    item._tabIndex = "-1";
+  }
+
   onFirstSubItemFocus(): void {
-    this.domNavItems[0].focus();
+    const firstSubItem = this.domNavItems[0];
+
+    firstSubItem.focus();
+    this.setTabIndex(firstSubItem);
   }
 
   onLastSubItemFocus(): void {

package/src/SecondaryNavigationSubItem.hbs

@@ -1,5 +1,6 @@
 {{#if isBack}}
     <button
+        tabindex="{{_tabIndex}}"
         @click="{{onBackItemClick}}"
         role="menuitem"
         aria-label="{{backButtonAriaLabel}}"
@@ -15,6 +16,7 @@
 {{else}}
     {{#if isButton}}
         <button
+            tabindex="{{_tabIndex}}"
             @click="{{onItemClick}}"
             role="menuitem"
             aria-haspopup="{{hasItems}}"
@@ -32,6 +34,7 @@
         </button>
     {{else}}
         <a
+            tabindex="{{_tabIndex}}"
             @click="{{onItemClick}}"
             role="menuitem"
             href="{{path}}"

package/src/SecondaryNavigationSubItem.ts

@@ -88,6 +88,9 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Object, multiple: true })
     nestedItems!: Array<NavItem>;
 
+  @property({ type: String, defaultValue: "-1" })
+    _tabIndex!: string;
+
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {

package/src/SegmentedButton.ts

@@ -72,7 +72,7 @@ class UDExSegmentedButton extends SegmentedButton {
     this.style.setProperty(getScopedVarName("--udex-segmented-button-items-count"), `${items.length}`);
   }
 
-  _onmousedown(e: MouseEvent) {
+  _onmousedown(e: Event) {
     const eventTarget = e.target as SegmentedButtonItem;
     const isTargetSegmentedButtonItem = eventTarget.hasAttribute("udex-segmented-button-item");
 
@@ -83,7 +83,7 @@ class UDExSegmentedButton extends SegmentedButton {
     }
   }
 
-  _selectItem(e: MouseEvent | KeyboardEvent) {
+  _selectItem(e: Event | KeyboardEvent) {
     // Method to be update with @ui5/webcomponents v.2.0 , due to ToggleButton dependency change (pressed -> selected)
     const target = e.target as SegmentedButtonItem;
     const isTargetSegmentedButtonItem = target.hasAttribute("udex-segmented-button-item");

package/src/SelectBox.ts

@@ -482,7 +482,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("click", (e: MouseEvent) => {
+    document.addEventListener("click", (e: Event) => {
       if (this._tokenizer?.tokens.length > 0 && e.target !== this) {
         this._tokenizer.expanded = false;
       }

package/src/SideNavigationGroup.ts

@@ -26,7 +26,6 @@ import SideNavigationGroupCss from "./generated/themes/SideNavigationGroup.css.j
   tag: "udex-side-navigation-group",
   renderer: litRender,
   styles: [SideNavigationGroup.styles, SideNavigationGroupCss],
-  dependencies: [],
 })
 
 class UDExSideNavigationGroup extends SideNavigationGroup {}

package/src/SideNavigationItem.ts

@@ -26,7 +26,6 @@ import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js"
   tag: "udex-side-navigation-item",
   renderer: litRender,
   styles: [SideNavigationItem.styles, SideNavigationItemCss],
-  dependencies: [],
 })
 
 class UDExSideNavigationItem extends SideNavigationItem {

package/src/SideNavigationSubItem.ts

@@ -26,7 +26,6 @@ import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.c
   tag: "udex-side-navigation-sub-item",
   renderer: litRender,
   styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],
-  dependencies: [],
 })
 
 class UDExSideNavigationSubItem extends SideNavigationSubItem {}

package/src/Slider.ts

@@ -28,7 +28,6 @@ import SliderCss from "./generated/themes/Slider.css.js";
   tag: "udex-slider",
   renderer: litRender,
   styles: [SliderBase.styles, SliderCss],
-  dependencies: [],
 })
 class UDExSlider extends Slider {
   onEnterDOM(): void {

package/src/StepInput.hbs

@@ -20,21 +20,6 @@
         step="{{step}}"
     ></udex-text-field>
     {{#unless displayonly}}
-        <udex-control-button
-            class="udex-step-input__button udex-step-input__button_inc"
-            title="{{incIconTitle}}"
-            accessible-name="{{incIconTitle}}"
-            icon="add"
-            size="Large"
-            design="{{valueState}}"
-            @click="{{_incValue}}"
-            @mousedown="{{_incSpin}}"
-            @mouseup="{{_resetSpin}}"
-            @mouseout="{{_resetSpinOut}}"
-            ?disabled="{{_incIconInactive}}"
-            ?active="{{incIconActive}}"
-            ?readonly="{{readonly}}"
-        ></udex-control-button>
         <udex-control-button
             class="udex-step-input__button udex-step-input__button_dec"
             title="{{decIconTitle}}"
@@ -50,5 +35,20 @@
             ?active="{{decIconActive}}"
             ?readonly="{{readonly}}"
         ></udex-control-button>
+        <udex-control-button
+            class="udex-step-input__button udex-step-input__button_inc"
+            title="{{incIconTitle}}"
+            accessible-name="{{incIconTitle}}"
+            icon="add"
+            size="Large"
+            design="{{valueState}}"
+            @click="{{_incValue}}"
+            @mousedown="{{_incSpin}}"
+            @mouseup="{{_resetSpin}}"
+            @mouseout="{{_resetSpinOut}}"
+            ?disabled="{{_incIconInactive}}"
+            ?active="{{incIconActive}}"
+            ?readonly="{{readonly}}"
+        ></udex-control-button>
     {{/unless}}
-</div>
+</div>

package/src/TabNavigation.ts

@@ -261,12 +261,12 @@ class UDExTabNavigation extends UI5Element {
   onAfterRendering(): void {
     if (this.items.length) {
       this.setItemsInHeader();
-      this.initOutsideClick();
       this.setVisibleTabs();
       this.applyTabIndex();
     } else {
-      throw new Error("You have to add the 'udex-tab' as a default slot to the udex-tab-navigation.");
+      console.warn("You have to add the 'udex-tab' as a default slot to the udex-tab-navigation.");
     }
+    this.initOutsideClick();
   }
 
   initOutsideClick() {

package/src/Tag.ts

@@ -11,6 +11,7 @@ import TagTemplate from "./generated/templates/TagTemplate.lit.js";
 
 // Styles
 import TagCss from "./generated/themes/Tag.css";
+import IconPlacement from "./types/IconPlacement.js";
 
 export enum TagType {
     Text = "Text",
@@ -19,11 +20,6 @@ export enum TagType {
     Grey = "Grey"
 }
 
-export enum IconPlacement {
-    Start = "Start",
-    End = "End"
-}
-
 export enum TagSize {
   Small = "Small",
   Medium = "Medium"

package/src/Tile.ts

@@ -35,7 +35,7 @@ type AnchorNode = HTMLAnchorElement | undefined | null;
  */
 @event("click", {
   detail: {
-    originalEvent: { type: MouseEvent },
+    originalEvent: { type: Event },
   },
 })
 class UDExTile extends UI5Element {
@@ -126,7 +126,7 @@ class UDExTile extends UI5Element {
     }
   }
 
-  _onclick(e: MouseEvent) {
+  _onclick(e: Event) {
     e.stopImmediatePropagation();
 
     if (this.interactive) {

package/src/Toast.ts

@@ -2,12 +2,13 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Toast from "@ui5/webcomponents/dist/Toast.js";
-import "@ui5/webcomponents/dist/Icon.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
-import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import UDExButton from "./Button.js";
 
 import ToastTemplate from "./generated/templates/ToastTemplate.lit.js";
 
@@ -43,7 +44,7 @@ export enum ToastValueState {
   renderer: litRender,
   styles: [Toast.styles, ToastCss],
   template: ToastTemplate,
-  dependencies: [Toast],
+  dependencies: [Icon, UDExButton],
 })
 
 /**

package/src/Wizard.hbs

@@ -3,6 +3,7 @@
   aria-label="{{ariaLabelText}}"
   role="region"
   ?indeterminate="{{indeterminate}}"
+  part="ui5-wiz-root"
 >
 	<nav class="ui5-wiz-nav" part="navigator" aria-label="{{navAriaLabelText}}" tabindex="-1">
 		<div class="ui5-wiz-nav-list" role="list" aria-label="{{listAriaLabelText}}" aria-describedby="wiz-nav-descr" aria-controls="{{_id}}-wiz-content">

package/src/Wizard.ts

@@ -49,7 +49,7 @@ const RESPONSIVE_BREAKPOINTS: ResponsiveBreakpoints = {
   renderer: litRender,
   template: WizardTemplate,
   styles: [wizardCss, WizardCss],
-  dependencies: [Wizard, UDExWizardTab, UDExWizardStep],
+  dependencies: [...Wizard.dependencies, UDExWizardTab, UDExWizardStep],
 })
 
 class UDExWizard extends Wizard {

package/src/WizardTab.ts

@@ -37,7 +37,6 @@ export enum WindowSize {
   tag: "udex-wizard-tab",
   renderer: litRender,
   styles: [wizardTabCss, WizardTabCss],
-  dependencies: [UI5WizardTab],
 })
 class UDExWizardTab extends UI5WizardTab {
   /**