@sapudex/web-components 0.199.3 → 0.225.0

package/src/SecondaryNavigation.ts

@@ -40,7 +40,7 @@ export type ItemClickDetail = {
  * For the <code>udex-secondary-navigation</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SecondaryNavigation.js";</code>
+ * <code>import "@sapudex/web-components/dist/SecondaryNavigation.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -127,6 +127,13 @@ class UDExSecondaryNavigation extends UI5Element {
    */
   @property()
     titleHref!: string;
+  /**
+   * Defines the height of the dropdown opened on mobile screen.
+   *
+   * @public
+   */
+  @property({ type: String })
+    maxDropdownHeight!: string;
 
   @property({ type: Boolean, noAttribute: true })
     _selectedMore!: boolean;
@@ -152,7 +159,7 @@ class UDExSecondaryNavigation extends UI5Element {
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {
-    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {

package/src/SecondaryNavigationItem.hbs

@@ -5,6 +5,7 @@
         ?active="{{isActive}}"
         href="{{path}}"
         target="{{target}}"
+        aria-current="{{ariaCurrent}}"
         @keydown="{{handleItemLinkKeyDown}}"
         @click="{{fireNavItemClickEvent}}">
         {{itemLabel}}
@@ -54,7 +55,7 @@
                             .nestedItems="{{this.items}}"
                             path="{{this.path}}"
                             target="{{this.target}}"
-                            ?is-active="{{this.active}}">
+                            ?active="{{this.active}}">
                         </udex-secondary-navigation-sub-item>
                     </li>
                 {{/each}}

package/src/SecondaryNavigationItem.ts

@@ -16,6 +16,8 @@ import {
   isHome,
   isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
+import parseRelativeUnits, { RelativeValue } from "./utils/parseRelativeUnits.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -38,7 +40,7 @@ export const menuItemRole: string = "menuitem";
  * For the <code>udex-secondary-navigation-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SecondaryNavigationItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/SecondaryNavigationItem.js";</code>
  *
  * @constructor
  * @extends UDExSecondaryNavigationItemBase
@@ -48,7 +50,7 @@ export const menuItemRole: string = "menuitem";
 @customElement({
   tag: "udex-secondary-navigation-item",
   renderer: litRender,
-  styles: SecondaryNavigationItemCss,
+  styles: [SecondaryNavigationItemCss, getEffectiveScrollbarStyle()],
   template: SecondaryNavigationItemTemplate,
   dependencies: [UI5Icon, UDExSecondaryNavigationSubItem],
 })
@@ -131,6 +133,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   @property({ validator: Integer })
     _navItemsLength!: number;
 
+  /**
+   * Defines the height of the dropdown opened on mobile screen.
+   *
+   * @private
+   */
+  @property({ type: String })
+    _maxHeight!: RelativeValue;
+
   /**
    * Defines processed items.
    *
@@ -153,6 +163,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this.onFirstSubItemFocus();
       this._shouldFocusFirstSubItem = false;
     }
+
+    if (this._isMobileView && this.isOpen) {
+      this.setDropdownHeight();
+    }
   }
 
   onBeforeRendering() : void {
@@ -337,16 +351,36 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._processedItems = this.subItems;
   }
 
+  setDropdownHeight(): void {
+    if (!this._maxHeight || this._dropdownMaxHeightExceeds || !this.heightSatisfiesType) {
+      const secondaryNavigationMobileTrigger = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!;
+      const maxDropdownHeight = window.innerHeight - secondaryNavigationMobileTrigger.clientHeight;
+      this.style.setProperty("--udex-secondary-navigation-item-dropdown-max-height", `${maxDropdownHeight}px`);
+      return;
+    }
+
+    this.style.setProperty("--udex-secondary-navigation-item-dropdown-max-height", `${this._maxHeight}`);
+  }
+
+  get _dropdownMaxHeightExceeds(): boolean {
+    const normalizedHeight = parseRelativeUnits(this._maxHeight, this.dropdown);
+    const secondaryNavigationMobileTriggerHeight = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!.clientHeight;
+    return normalizedHeight >= window.innerHeight - secondaryNavigationMobileTriggerHeight;
+  }
+
+  get heightSatisfiesType(): boolean {
+    return /vh|vw|%|em|rem|px/.test(this._maxHeight);
+  }
+
   setDropdownHorizontalAlign(): void {
-    const dropdown = this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown");
-    const { right, left } = dropdown!.getBoundingClientRect();
+    const { right, left } = this.dropdown.getBoundingClientRect();
 
     if (right > window.innerWidth) {
-      dropdown?.setAttribute("data-horizontal-align", "right");
+      this.dropdown.setAttribute("data-horizontal-align", "right");
     }
 
     if (left < 0) {
-      dropdown?.setAttribute("data-horizontal-align", "left");
+      this.dropdown.setAttribute("data-horizontal-align", "left");
     }
   }
 
@@ -373,6 +407,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._shouldFocusFirstSubItem = true;
   }
 
+  get dropdown(): HTMLElement {
+    return this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown")!;
+  }
+
   get isLastItem(): boolean {
     return this._navItemsLength === this.index;
   }

package/src/SecondaryNavigationItemBase.ts

@@ -142,6 +142,10 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
   get isMobile(): boolean {
     return BreakpointUtils.isAtMost("S");
   }
+
+  get ariaCurrent(): string | null {
+    return this.active ? "page" : null;
+  }
 }
 
 export default UDExSecondaryNavigationItemBase;

package/src/SecondaryNavigationSubItem.hbs

@@ -22,7 +22,8 @@
             aria-haspopup="{{hasItems}}"
             ?sub-active="{{isSubItemActive}}"
             aria-label="{{label}}"
-            ?active="{{isActive}}"
+            ?active="{{active}}"
+            aria-current="{{ariaCurrent}}"
             class="udex-secondary-navigation__dropdown-item">
             {{itemLabel}}
             {{#if hasItems}}
@@ -39,7 +40,8 @@
             role="menuitem"
             href="{{path}}"
             target="{{target}}"
-            ?active="{{isActive}}"
+            ?active="{{active}}"
+            aria-current="{{ariaCurrent}}"
             class="udex-secondary-navigation__dropdown-item">
             {{itemLabel}}
         </a>

package/src/SecondaryNavigationSubItem.ts

@@ -25,7 +25,7 @@ import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigatio
  * For the <code>udex-secondary-navigation-sub-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SecondaryNavigationSubItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/SecondaryNavigationSubItem.js";</code>
  *
  * @constructor
  * @extends UDExSecondaryNavigationItemBase
@@ -61,15 +61,6 @@ import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigatio
 @event("back-item-click")
 
 class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
-  /**
-   * Defines active item.
-   *
-   * @public
-   * @default false
-   */
-  @property({ type: Boolean })
-    isActive!: boolean;
-
   /**
    * Defines back item.
    *
@@ -94,7 +85,7 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {
-    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onItemClick(): void {

package/src/SegmentedButton.ts

@@ -37,10 +37,10 @@ export enum SegmentedButtonSelectionMode {
  * For the <code>udex-segmented-button</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SegmentedButton.js";</code>
+ * <code>import "@sapudex/web-components/dist/SegmentedButton.js";</code>
  *
  * @constructor
- * @extends UI5Element
+ * @extends SegmentedButton
  * @public
  */
 @customElement({

package/src/SegmentedButtonItem.ts

@@ -18,7 +18,7 @@ import UDExButtonSize from "./types/ButtonSize.js";
  * For the <code>udex-segmented-button-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SegmentedButtonItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/SegmentedButtonItem.js";</code>
  *
  * @constructor
  * @extends SegmentedButtonItem

package/src/SelectBox.hbs

@@ -22,18 +22,18 @@
                 aria-expanded="{{tokenizerExpanded}}"
                 aria-activedescendant>
                 {{#if label}}
-                    <span class="{{labelClass}}">
+                    <span id="{{this._id}}-single-label" class="{{labelClass}}">
                     {{label}}
-                        {{#if required}}
-                            *
-                        {{/if}}
+                    {{#if required}}
+                        *
+                    {{/if}}
                 </span>
                 {{/if}}
                 {{#if showSingleSelectedOption}}
                     <div class="udex-text-field__text-holder">
-                    <span class="udex-text-field__single-label">
-                        {{{_singleSelectedOption}}}
-                    </span>
+                        <span class="udex-text-field__single-label">
+                            {{{_singleSelectedOption}}}
+                        </span>
                     </div>
                 {{/if}}
                 {{#if showMultiSelectedOptions}}
@@ -59,17 +59,22 @@
                     </udex-tag-group>
                 {{/if}}
                 {{#if showTrigger}}
-                    <udex-control-button
-                        .accessibilityAttributes="{{accessibilityAttributes}}"
+                    <button
+                        role="combobox"
+                        aria-labelledby="{{this._id}}-single-label"
+                        aria-expanded="{{accessibilityAttributes.expanded}}"
+                        aria-controls="{{accessibilityAttributes.controls}}"
+                        aria-haspopup="{{accessibilityAttributes.hasPopup}}"
+                        aria-label="{{accessibilityAttributes.ariaLabel}}"
                         class="udex-text-field__trigger"
-                        size="Large"
-                        icon="navigation-down-arrow"
                         tabindex="{{triggerTabIndex}}"
-                        accessible-name="{{iconAccessibleNameText}}"
                         @keydown="{{handleKeyDownTrigger}}"
-                        @click="{{getHandleMultiSelectOpen}}"
-                        _is-combobox-role>
-                    </udex-control-button>
+                        @click="{{getHandleMultiSelectOpen}}">
+                            <ui5-icon
+                                name="navigation-down-arrow"
+                                accessible-name="{{iconAccessibleNameText}}">
+                            </ui5-icon>
+                    </button>
                 {{/if}}
             </div>
         </div>

package/src/SelectBox.ts

@@ -35,7 +35,8 @@ import UDExTag from "./Tag.js";
 import { PlacementType } from "./Tooltip.js";
 import UDExButton from "./Button.js";
 import ValueState from "./types/common.js";
-
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { SELECT_OPTIONS } from "./generated/i18n/i18n-defaults.js";
 import SelectBoxTemplate from "./generated/templates/SelectBoxTemplate.lit.js";
 import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit";
@@ -45,7 +46,6 @@ import SelectBoxCss from "./generated/themes/SelectBox.css.js";
 import TextFieldCss from "./generated/themes/TextField.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
 import UDExStatusMessage from "./StatusMessage.js";
-import UDExControlButton from "./ControlButton.js";
 import UDExTagGroup from "./TagGroup.js";
 
 export type SelectBoxAccessibilityAttributes = {
@@ -65,7 +65,7 @@ export type SelectBoxAccessibilityAttributes = {
  * For the <code>udex-select-box</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/UDExSelectBox.js";</code>
+ * <code>import "@sapudex/web-components/dist/UDExSelectBox.js";</code>
  *
  * @constructor
  * @extends UDExSearchableListBase
@@ -91,7 +91,6 @@ export type SelectBoxAccessibilityAttributes = {
     Token,
     Icon,
     UDExStatusMessage,
-    UDExControlButton,
     Popover,
     UDExTagGroup,
   ],
@@ -695,7 +694,9 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   get iconAccessibleNameText(): string {
-    return UDExSelectBox.i18nBundle.getText(SELECT_OPTIONS);
+    const selectOptionsText = UDExSelectBox.i18nBundle.getText(SELECT_OPTIONS);
+    const iconAccessibleNameTextSingleMode = this._singleSelectedOption || selectOptionsText;
+    return this.modeMultiSelect ? selectOptionsText : iconAccessibleNameTextSingleMode;
   }
 
   get additionalClassName(): string {
@@ -703,6 +704,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   get searchableList() {
+    this.defaultAccessibleRole = "listbox";
     return executeTemplate(UDExSelectBox.searchableListBaseTemplate, this);
   }
 
@@ -715,7 +717,7 @@ class UDExSelectBox extends UDExSearchableListBase {
 
   get accessibilityAttributes(): SelectBoxAccessibilityAttributes {
     return {
-      expanded: this._open,
+      expanded: `${this._open}`,
       controls: this.popoverId,
       hasPopup: this.listboxRole,
       ariaLabel: this.iconAccessibleNameText,

package/src/SelectBoxGroupHeader.ts

@@ -16,7 +16,7 @@ import UDExSelectBoxItem from "./SelectBoxItem.js";
  * For the <code>udex-select-box-group-header</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SelectBoxGroupHeader.js";</code>
+ * <code>import "@sapudex/web-components/dist/SelectBoxGroupHeader.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/SelectBoxItem.ts

@@ -14,7 +14,7 @@ import UDExListItemBase from "./ListItemBase.js";
  * For the <code>udex-select-box-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SelectBoxItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/SelectBoxItem.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/SelectBoxSelectAll.ts

@@ -12,7 +12,7 @@ import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
  * For the <code>udex-select-box-select-all</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SelectBoxSelectAll.js";</code>
+ * <code>import "@sapudex/web-components/dist/SelectBoxSelectAll.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/SideNavigation.ts

@@ -20,7 +20,7 @@ import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
  * For the <code>udex-side-navigation</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SideNavigation.js";</code>
+ * <code>import "@sapudex/web-components/dist/SideNavigation.js";</code>
  *
  * @constructor
  * @extends SideNavigation

package/src/SideNavigationGroup.ts

@@ -16,7 +16,7 @@ import SideNavigationGroupCss from "./generated/themes/SideNavigationGroup.css.j
  * For the <code>udex-side-navigation-group</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SideNavigationGroup.js";</code>
+ * <code>import "@sapudex/web-components/dist/SideNavigationGroup.js";</code>
  *
  * @constructor
  * @extends SideNavigationGroup

package/src/SideNavigationItem.ts

@@ -16,7 +16,7 @@ import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js"
  * For the <code>udex-side-navigation-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SideNavigationItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/SideNavigationItem.js";</code>
  *
  * @constructor
  * @extends SideNavigationItem

package/src/SideNavigationMobile.ts

@@ -31,7 +31,7 @@ type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;
  * For the <code>udex-side-navigation-mobile</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SideNavigation.js";</code>
+ * <code>import "@sapudex/web-components/dist/SideNavigation.js";</code>
  *
  * @constructor
  * @extends UI5Element

package/src/SideNavigationSubItem.ts

@@ -16,7 +16,7 @@ import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.c
  * For the <code>udex-side-navigation-sub-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SideNavigationSubItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/SideNavigationSubItem.js";</code>
  *
  * @constructor
  * @extends SideNavigationSubItem

package/src/Slider.ts

@@ -18,7 +18,7 @@ import SliderCss from "./generated/themes/Slider.css.js";
  * For the <code>udex-slider</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Slider.js";</code>
+ * <code>import "@sapudex/web-components/dist/Slider.js";</code>
  *
  * @constructor
  * @extends Slider

package/src/StatusBadge.ts

@@ -50,7 +50,7 @@ export enum BadgeSize {
  * For the <code>udex-status-badge</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/StatusBadge.js";</code>
+ * <code>import "@sapudex/web-components/dist/StatusBadge.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -94,7 +94,7 @@ class UDExStatusBadge extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExStatusBadge.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExStatusBadge.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get iconFieldName(): string {

package/src/StatusMessage.ts

@@ -30,7 +30,7 @@ export enum IconMapping {
  * For the <code>udex-status-message</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/StatusMessage.js";</code>
+ * <code>import "@sapudex/web-components/dist/StatusMessage.js";</code>
  *
  * @constructor
  * @extends UI5Element

package/src/StepInput.hbs

@@ -1,5 +1,4 @@
 <div class="udex-step-input__root"
-    @keydown="{{_onkeydown}}"
 >
     <udex-text-field
         type="{{type}}"
@@ -10,6 +9,7 @@
         aria-labelledby="{{accessibleNameRef}}"
         @focusin="{{_onInputFocusIn}}"
         @focusout="{{_onInputFocusOut}}"
+        @ui5-keydown="{{_onkeydown}}"
         ?disabled="{{disabled}}"
         ?readonly="{{readonly}}"
         ?required="{{required}}"

package/src/StepInput.ts

@@ -56,7 +56,7 @@ export type StepInputValueStateChangeEventDetail = {
  * For the <code>udex-step-input</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/StepInput.js";</code>
+ * <code>import "@sapudex/web-components/dist/StepInput.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -260,15 +260,12 @@ class UDExStepInput extends UI5Element {
 
   static i18nBundle: I18nBundle;
 
-  _keyDownHandlerBound: (e: KeyboardEvent) => void;
-
   static async onDefine() {
-    UDExStepInput.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExStepInput.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {
     super();
-    this._keyDownHandlerBound = this._onkeydown.bind(this);
   }
 
   get decIconTitle() {
@@ -349,7 +346,7 @@ class UDExStepInput extends UI5Element {
     const valid = !((this.min !== undefined && this.value < this.min) || (this.max !== undefined && this.value > this.max));
     const previousValueState = this.valueState;
 
-    this.valueState = valid ? ValueState.Standard : ValueState.Error;
+    this.valueState = valid ? this._initialValueState! : ValueState.Error;
 
     const eventPrevented = !this.fireEvent<StepInputValueStateChangeEventDetail>("value-state-change", { valueState: this.valueState, valid }, true);
 
@@ -437,34 +434,36 @@ class UDExStepInput extends UI5Element {
     }
   }
 
-  _onkeydown(e: KeyboardEvent) {
+  _onkeydown(e: CustomEvent<KeyboardEvent>) {
+    const { detail: keyboardEvent } = e;
+
     let preventDefault = true;
     if (this.disabled || this.readonly) {
       return;
     }
 
-    if (isEnter(e)) {
+    if (isEnter(keyboardEvent)) {
       this._onInputChange();
       return;
     }
 
-    if (isUp(e)) {
+    if (isUp(keyboardEvent)) {
       // step up
       this._modifyValue(this.step);
-    } else if (isDown(e)) {
+    } else if (isDown(keyboardEvent)) {
       // step down
       this._modifyValue(-this.step);
-    } else if (isEscape(e)) {
+    } else if (isEscape(keyboardEvent)) {
       // return previous value
       this.value = this._previousValue;
       this.input.value = this.value.toFixed(this.valuePrecision);
-    } else if (this.max !== undefined && (isPageUpShift(e) || isUpShiftCtrl(e))) {
+    } else if (this.max !== undefined && (isPageUpShift(keyboardEvent) || isUpShiftCtrl(keyboardEvent))) {
       // step to max
       this._modifyValue(this.max - this.value, true);
-    } else if (this.min !== undefined && (isPageDownShift(e) || isDownShiftCtrl(e))) {
+    } else if (this.min !== undefined && (isPageDownShift(keyboardEvent) || isDownShiftCtrl(keyboardEvent))) {
       // step to min
       this._modifyValue(this.min - this.value, true);
-    } else if (!isUpCtrl(e) && !isDownCtrl(e) && !isUpShift(e) && !isDownShift(e)) {
+    } else if (!isUpCtrl(keyboardEvent) && !isDownCtrl(keyboardEvent) && !isUpShift(keyboardEvent) && !isDownShift(keyboardEvent)) {
       preventDefault = false;
     }
     if (preventDefault) {
@@ -566,12 +565,6 @@ class UDExStepInput extends UI5Element {
     this.value = this._initialValue;
 
     this._previousValue = this.value;
-
-    this.input.addEventListener("keydown", this._keyDownHandlerBound);
-  }
-
-  onExitDOM(): void {
-    this.input.removeEventListener("keydown", this._keyDownHandlerBound);
   }
 }
 

package/src/Switch.ts

@@ -33,7 +33,7 @@ export enum SwitchColor {
  * For the <code>udex-switch</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Switch.js";</code>
+ * <code>import "@sapudex/web-components/dist/Switch.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/Tab.ts

@@ -58,7 +58,7 @@ interface ITab extends UI5Element {
  * For the <code>udex-tab</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Tab.js";</code>
+ * <code>import "@sapudex/web-components/dist/Tab.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -197,7 +197,7 @@ class UDExTab extends UI5Element implements ITab {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExTab.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExTab.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get isOnSelectedTab(): boolean {

package/src/TabNavigation.ts

@@ -59,7 +59,7 @@ export enum Mode {
  * For the <code>udex-tab-navigation</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/TabNavigation.js";</code>
+ * <code>import "@sapudex/web-components/dist/TabNavigation.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -171,7 +171,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   static async onDefine(): Promise<void> {
-    UDExTabNavigation.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExTabNavigation.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onEnterDOM(): void {