@sapudex/web-components 0.192.4 → 0.224.0

package/src/SelectBox.hbs

@@ -13,67 +13,68 @@
                 ?disabled="{{disabled}}"
                 ?displayonly="{{displayonly}}"
                 ?readonly="{{readonly}}"
-                role="combobox"
                 aria-label="{{accInfo.ariaLabel}}"
                 aria-labelledby="{{accInfo.ariaLabelledBy}}"
                 aria-readonly="{{isReadOrDisplayOnly}}"
                 aria-disabled="{{disabled}}"
-                aria-haspopup="listbox"
-                aria-controls="udex-select-box__dropdown"
+                aria-haspopup="{{listboxRole}}"
+                aria-controls="{{popoverId}}"
                 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}}
                     <udex-tag-group
-                            class="udex-tag-group"
-                            ?displayonly="{{displayonly}}"
-                            ?readonly="{{readonly}}"
-                            ?disabled="{{disabled}}"
-                            tooltip-placement="{{tooltipPlacement}}"
-                            @ui5-tag-click="{{handleTagPress}}"
-                            @ui5-show-more-tags="{{getHandlerShowMoreItems}}"
-                            @ui5-tag-keydown="{{handleKeyDownTag}}"
-                            ?expanded="{{tokenizerExpanded}}">
+                        class="udex-tag-group"
+                        ?displayonly="{{displayonly}}"
+                        ?readonly="{{readonly}}"
+                        ?disabled="{{disabled}}"
+                        tooltip-placement="{{tooltipPlacement}}"
+                        @ui5-tag-click="{{handleTagPress}}"
+                        @ui5-show-more-tags="{{getHandlerShowMoreItems}}"
+                        @ui5-tag-keydown="{{handleKeyDownTag}}"
+                        ?expanded="{{tokenizerExpanded}}">
                         {{#each selectedItems}}
                             {{#unless this.isGroup}}
                                 <udex-tag
-                                        text="{{this.label}}"
-                                        id="{{this._id}}"
-                                        icon="decline">
+                                    text="{{this.label}}"
+                                    id="{{this._id}}"
+                                    icon="decline">
                                 </udex-tag>
                             {{/unless}}
                         {{/each}}
                     </udex-tag-group>
                 {{/if}}
                 {{#if showTrigger}}
-                    <udex-control-button
-                        tabindex="{{triggerTabIndex}}"
-                        class="udex-text-field__trigger"
+                    <button
                         role="combobox"
-                        size="Large"
-                        icon="navigation-down-arrow"
-                        accessible-name="{{iconAccessibleNameText}}"
-                        aria-label="{{iconAccessibleNameText}}"
-                        aria-haspopup="listbox"
-                        aria-expanded="{{_open}}"
-                        aria-controls="{{accInfo.ariaControls}}"
-                        @click="{{getHandleMultiSelectOpen}}"
-                        aria-activedescendant>
-                    </udex-control-button>
+                        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"
+                        tabindex="{{triggerTabIndex}}"
+                        @keydown="{{handleKeyDownTrigger}}"
+                        @click="{{getHandleMultiSelectOpen}}">
+                            <ui5-icon
+                                name="navigation-down-arrow"
+                                accessible-name="{{iconAccessibleNameText}}">
+                            </ui5-icon>
+                    </button>
                 {{/if}}
             </div>
         </div>
@@ -87,7 +88,7 @@
     </div>
     <ui5-popover
         hide-arrow
-        id="udex-select-box__dropdown"
+        id="{{popoverId}}"
         class="udex-select-box__dropdown"
         ?allow-target-overlap="{{allowTargetOverlap}}"
         @keydown="{{handleKeyDownDropdown}}"

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,9 +46,14 @@ 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 = {
+  controls?: string,
+  expanded?: "true" | "false" | boolean,
+  hasPopup?: string,
+  ariaLabel?: string,
+}
 /**
  * @class
  *
@@ -59,7 +65,7 @@ import UDExTagGroup from "./TagGroup.js";
  * 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
@@ -85,7 +91,6 @@ import UDExTagGroup from "./TagGroup.js";
     Token,
     Icon,
     UDExStatusMessage,
-    UDExControlButton,
     Popover,
     UDExTagGroup,
   ],
@@ -689,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 {
@@ -697,6 +704,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   get searchableList() {
+    this.defaultAccessibleRole = "listbox";
     return executeTemplate(UDExSelectBox.searchableListBaseTemplate, this);
   }
 
@@ -704,10 +712,26 @@ class UDExSelectBox extends UDExSearchableListBase {
     return {
       "ariaLabel": this.accessibleName || this.label || undefined,
       "ariaLabelledBy": this.accessibleNameRef || undefined,
-      "ariaControls": this.shadowRoot?.querySelector("[udex-list]")?.getAttribute("id"),
     };
   }
 
+  get accessibilityAttributes(): SelectBoxAccessibilityAttributes {
+    return {
+      expanded: `${this._open}`,
+      controls: this.popoverId,
+      hasPopup: this.listboxRole,
+      ariaLabel: this.iconAccessibleNameText,
+    };
+  }
+
+  get popoverId(): string {
+    return `${this._id}_udex-select-box__dropdown`;
+  }
+
+  get listboxRole(): string {
+    return "listbox";
+  }
+
   static get searchableListBaseTemplate() {
     return SearchableListBaseTemplate;
   }

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

@@ -7,7 +7,7 @@ import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTempla
 import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import TabNavigation from "./TabNavigation.js";
 import UDExBadge from "./Badge.js";
-
+import { Target } from "./types/common.js";
 import TabTemplate from "./generated/templates/TabTemplate.lit.js";
 import TabHeaderTemplate from "./generated/templates/TabHeaderTemplate.lit.js";
 import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.lit.js";
@@ -16,13 +16,6 @@ import { ATTENTION_BADGE } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
 
-export enum Target {
-  _blank = "_blank",
-  _parent = "_parent",
-  _self = "_self",
-  _top = "_top",
-}
-
 interface ITab extends UI5Element {
   getTabInHeaderDomRef: () => ITab | null;
   disabled?: boolean;
@@ -65,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
@@ -204,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 {

package/src/Table.ts

@@ -40,7 +40,7 @@ type KeyBoardItem = {
  * For the <code>udex-table</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Table.js";</code>
+ * <code>import "@sapudex/web-components/dist/Table.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -175,7 +175,7 @@ class UDExTable extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExTable.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExTable.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onAfterRendering() {

package/src/TableCell.ts

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

package/src/TableGroupRow.ts

@@ -24,7 +24,7 @@ import TableGroupRowCss from "./generated/themes/TableGroupRow.css.js";
  * For the <code>udex-table-group-row</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/TableGroupRow.js";</code>
+ * <code>import "@sapudex/web-components/dist/TableGroupRow.js";</code>
  *
  * @constructor
  * @extends UI5Element

package/src/TableHeaderCell.ts

@@ -18,7 +18,7 @@ import TableHeaderCellCss from "./generated/themes/TableHeaderCell.css.js";
  * For the <code>udex-table-header-cell</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/TableHeaderCell.js";</code>
+ * <code>import "@sapudex/web-components/dist/TableHeaderCell.js";</code>
  *
  * @constructor
  * @extends UDExTableCellBase

package/src/TableHeaderRow.ts

@@ -14,7 +14,7 @@ import TableHeaderRowTemplate from "./generated/templates/TableHeaderRowTemplate
  * For the <code>udex-table-header-row</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/TableHeaderRow.js";</code>
+ * <code>import "@sapudex/web-components/dist/TableHeaderRow.js";</code>
  *
  * @constructor
  * @extends UDExTableRowBase

package/src/TableRow.ts

@@ -15,7 +15,7 @@ import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
  * For the <code>udex-table-row</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/TableRow.js";</code>
+ * <code>import "@sapudex/web-components/dist/TableRow.js";</code>
  *
  * @constructor
  * @extends UDExTableRowBase

package/src/Tag.ts

@@ -4,6 +4,7 @@ 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 Icon from "@ui5/webcomponents/dist/Icon.js";
+import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 
@@ -36,7 +37,7 @@ export enum TagSize {
  * For the <code>udex-tag</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Tag.js";</code>
+ * <code>import "@sapudex/web-components/dist/Tag.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -200,6 +201,13 @@ class UDExTag extends UI5Element {
   @property({ type: Boolean })
     nonSelectable!: boolean;
 
+  _handleResizeBound: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
   onBeforeRendering(): void {
     this.toBeDeleted = false;
   }
@@ -211,6 +219,11 @@ class UDExTag extends UI5Element {
     if (this.accessibleRole !== "button") {
       this.shadowRoot?.firstElementChild?.removeAttribute("aria-pressed");
     }
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
   setSelected(): void {
@@ -235,6 +248,14 @@ class UDExTag extends UI5Element {
     }
   }
 
+  _handleResize() {
+    if (this.isTruncatable) {
+      this.title = this.text;
+    } else {
+      this.removeAttribute("title");
+    }
+  }
+
   _focusin(): void {
     this.focused = true;
   }