@ui5/webcomponents 1.5.0 → 1.7.1

package/dist/DateRangePicker.js

@@ -294,8 +294,14 @@ class DateRangePicker extends DatePicker {
 		const valuesArray = [];
 		const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);
 
-		valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
-		valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
+		// if format successfully parse the value, the value contains only single date
+		if (this.getFormat().parse(value)) {
+			valuesArray[0] = partsArray.join(this._effectiveDelimiter);
+			valuesArray[1] = "";
+		} else {
+			valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
+			valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
+		}
 
 		return valuesArray;
 	}

package/dist/DateTimePicker.js

@@ -101,7 +101,7 @@ const metadata = {
  * <li>typing in the input field</li>
  * </ul>
  *
- * Programatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
+ * Programmatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
  *
  * <h3>Formatting</h3>
  *

package/dist/Dialog.js

@@ -4,9 +4,14 @@ import {
 	isUp, isDown, isLeft, isRight,
 	isUpShift, isDownShift, isLeftShift, isRightShift,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Popup from "./Popup.js";
-import "@ui5/webcomponents-icons/dist/resize-corner.js";
 import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/resize-corner.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/information.js";
 
 // Template
 import DialogTemplate from "./generated/templates/DialogTemplate.lit.js";
@@ -20,6 +25,15 @@ import dialogCSS from "./generated/themes/Dialog.css.js";
  */
 const STEP_SIZE = 16;
 
+/**
+ * Defines the icons corresponding to the dialog's state.
+ */
+const ICON_PER_STATE = {
+	[ValueState.Error]: "error",
+	[ValueState.Warning]: "alert",
+	[ValueState.Success]: "sys-enter-2",
+	[ValueState.Information]: "information",
+};
 /**
  * @public
  */
@@ -123,6 +137,20 @@ const metadata = {
 		onDesktop: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines the state of the <code>Dialog</code>.
+		 * <br>
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
+		 * @type {ValueState}
+		 * @defaultvalue "None"
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		state: {
+			type: ValueState,
+			defaultValue: ValueState.None,
+		},
 	},
 };
 
@@ -286,6 +314,18 @@ class Dialog extends Popup {
 		return minHeight;
 	}
 
+	get hasValueState() {
+		return this.state !== ValueState.None;
+	}
+
+	get _dialogStateIcon() {
+		return ICON_PER_STATE[this.state];
+	}
+
+	get _role() {
+		return (this.state === ValueState.Error || this.state === ValueState.Warning) ? "alertdialog" : "dialog";
+	}
+
 	_show() {
 		super._show();
 		this._center();

package/dist/Icon.js

@@ -35,9 +35,9 @@ const metadata = {
 		 * <br>
 		 *
 		 * To browse all available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Icons</ui5-link>,
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">SAP Fiori Tools</ui5-link> and
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Business Suite</ui5-link> collections.
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Icons</ui5-link>,
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">SAP Fiori Tools</ui5-link> and
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Business Suite</ui5-link> collections.
 		 * <br>
 		 *
 		 * Example:
@@ -107,7 +107,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria hidden state of the component.
+		 * Defines the ARIA hidden state of the component.
 		 * Note: If the role is presentation the default value of aria-hidden will be true.
 		 * @private
 		 * @since 1.0.0-rc.15
@@ -121,7 +121,7 @@ const metadata = {
 		 */
 		pathData: {
 			type: String,
-			noAttribute: true,
+			multiple: true,
 		},
 
 		/**
@@ -186,15 +186,15 @@ const metadata = {
  * <ul>
  * <li>
  * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons" class="api-table-content-cell-link">@ui5/webcomponents-icons</ui5-link> represents the "SAP-icons" collection and includes the following
- * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons" class="api-table-content-cell-link">icons</ui5-link>.
+ * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons" class="api-table-content-cell-link">icons</ui5-link>.
  * </li>
  * <li>
  * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt" class="api-table-content-cell-link">@ui5/webcomponents-icons-tnt</ui5-link> represents the "tnt" collection and includes the following
- * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">icons</ui5-link>.
+ * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">icons</ui5-link>.
  * </li>
  * <li>
  * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite" class="api-table-content-cell-link">@ui5/webcomponents-icons-icons-business-suite</ui5-link> represents the "business-suite" collection and includes the following
- * <ui5-link target="_blank" href="https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols" class="api-table-content-cell-link">icons</ui5-link>.
+ * <ui5-link target="_blank" href="https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols" class="api-table-content-cell-link">icons</ui5-link>.
  * </li>
  * </ul>
  *
@@ -373,7 +373,7 @@ class Icon extends UI5Element {
 
 		// in case a new valid name is set, show the icon
 		this.invalid = false;
-		this.pathData = iconData.pathData;
+		this.pathData = Array.isArray(iconData.pathData) ? iconData.pathData : [iconData.pathData];
 		this.accData = iconData.accData;
 		this.ltr = iconData.ltr;
 		this.packageName = iconData.packageName;

package/dist/Input.js

@@ -46,6 +46,10 @@ import {
 	VALUE_STATE_INFORMATION,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS,
 	INPUT_SUGGESTIONS_TITLE,
 	INPUT_SUGGESTIONS_ONE_HIT,
@@ -331,7 +335,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public
@@ -599,9 +603,6 @@ class Input extends UI5Element {
 		// Indicates if the user selection has been canceled with [ESC].
 		this.suggestionSelectionCanceled = false;
 
-		// Indicates if the change event has already been fired
-		this._changeFiredValue = null;
-
 		// tracks the value between focus in and focus out to detect that change event should be fired.
 		this.previousValue = undefined;
 
@@ -767,6 +768,12 @@ class Input extends UI5Element {
 	}
 
 	_onkeyup(event) {
+		// The native Delete event does not update the value property "on time".
+		// So, the (native) change event is always fired with the old value
+		if (isDelete(event)) {
+			this.value = event.target.value;
+		}
+
 		this._keyDown = false;
 		this._backspaceKeyDown = false;
 	}
@@ -819,7 +826,6 @@ class Input extends UI5Element {
 		}
 
 		if (!itemPressed) {
-			this.fireEventByAction(this.ACTION_ENTER, event);
 			this.lastConfirmedValue = this.value;
 
 			if (this.FormSupport) {
@@ -866,6 +872,8 @@ class Input extends UI5Element {
 		const innerInput = this.getInputDOMRefSync();
 		const isAutoCompleted = innerInput.selectionEnd - innerInput.selectionStart > 0;
 
+		this.isTyping = false;
+
 		if (!isOpen) {
 			this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
 			return;
@@ -961,8 +969,8 @@ class Input extends UI5Element {
 			return;
 		}
 
-		if (this._changeFiredValue !== this.getInputDOMRefSync().value) {
-			this._changeFiredValue = this.getInputDOMRefSync().value;
+		if (this.previousValue !== this.getInputDOMRefSync().value) {
+			this.previousValue = this.getInputDOMRefSync().value;
 			this.fireEvent(this.EVENT_CHANGE);
 		}
 	}
@@ -990,7 +998,7 @@ class Input extends UI5Element {
 	_handleInput(event) {
 		const inputDomRef = this.getInputDOMRefSync();
 		const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
-		const eventType = event.inputType || event.detail.inputType;
+		const eventType = event.inputType || (event.detail && event.detail.inputType);
 
 		this._shouldAutocomplete = eventType !== "deleteContentBackward" && !this.noTypeahead;
 		this.suggestionSelectionCanceled = false;
@@ -1112,7 +1120,6 @@ class Input extends UI5Element {
 			this.focused = false;
 		}
 
-		this.isTyping = false;
 		this.openOnMobile = false;
 		this.open = false;
 		this._forceOpen = false;
@@ -1178,9 +1185,11 @@ class Input extends UI5Element {
 			return;
 		}
 
+		const innerInput = this.getInputDOMRefSync();
+		const value = this.valueBeforeAutoComplete || this.value;
 		const itemText = item.text || item.textContent; // keep textContent for compatibility
 		const fireInput = keyboardUsed
-			? this.valueBeforeItemSelection !== itemText : this.valueBeforeAutoComplete !== itemText;
+			? this.valueBeforeItemSelection !== itemText : value !== itemText;
 
 		this.hasSuggestionItemSelected = true;
 
@@ -1191,6 +1200,7 @@ class Input extends UI5Element {
 			this.getInputDOMRefSync().value = itemText;
 			this.fireEvent(this.EVENT_INPUT);
 			this._handleChange();
+			innerInput.setSelectionRange(this.value.length, this.value.length);
 		}
 
 		this.valueBeforeItemPreview = "";
@@ -1376,6 +1386,15 @@ class Input extends UI5Element {
 
 	onClose() {}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": Input.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": Input.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": Input.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": Input.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	valueStateTextMappings() {
 		return {
 			"Success": Input.i18nBundle.getText(VALUE_STATE_SUCCESS),
@@ -1449,15 +1468,15 @@ class Input extends UI5Element {
 	}
 
 	get ariaValueStateHiddenText() {
-		if (!this.hasValueStateMessage) {
+		if (!this.hasValueState) {
 			return;
 		}
 
 		if (this.shouldDisplayDefaultValueStateMessage) {
-			return this.valueStateText;
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateText}`;
 		}
 
-		return this.valueStateMessageText.map(el => el.textContent).join(" ");
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
 	}
 
 	get itemSelectionAnnounce() {

package/dist/Label.js

@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.js";
 import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import WrappingType from "./types/WrappingType.js";
 
@@ -145,8 +144,7 @@ class Label extends UI5Element {
 			return;
 		}
 
-		const ownerNode = findNodeOwner(this);
-		const elementToFocus = ownerNode.querySelector(`#${this.for}`);
+		const elementToFocus = this.getRootNode().querySelector(`#${this.for}`);
 		if (elementToFocus) {
 			elementToFocus.focus();
 		}

package/dist/Link.js

@@ -103,7 +103,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -349,6 +349,7 @@ class Link extends UI5Element {
 			shiftKey,
 		} = event;
 
+		event.stopImmediatePropagation();
 		event.isMarked = "link";
 
 		const executeEvent = this.fireEvent("click", {
@@ -373,7 +374,7 @@ class Link extends UI5Element {
 	}
 
 	_onkeydown(event) {
-		if (isEnter(event)) {
+		if (isEnter(event) && !this.href) {
 			this._onclick(event);
 		} else if (isSpace(event)) {
 			event.preventDefault();
@@ -393,6 +394,7 @@ class Link extends UI5Element {
 		if (this.href && !event.defaultPrevented) {
 			const customEvent = new MouseEvent("click");
 
+			customEvent.stopImmediatePropagation();
 			this.getDomRef().dispatchEvent(customEvent);
 		}
 	}

package/dist/List.js

@@ -13,6 +13,7 @@ import {
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
@@ -343,6 +344,7 @@ const metadata = {
 			detail: {
 				selectedItems: { type: Array },
 				previouslySelectedItems: { type: Array },
+				targetItem: { type: HTMLElement }, // protected, holds the event target item
 				selectionComponentPressed: { type: Boolean }, // protected, indicates if the user used the selection components to change the selection
 			},
 		},
@@ -624,6 +626,15 @@ class List extends UI5Element {
 		};
 	}
 
+	get classes() {
+		return {
+			root: {
+				"ui5-list-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
+		};
+	}
+
 	initItemNavigation() {
 		this._itemNavigation = new ItemNavigation(this, {
 			skipItemsSize: PAGE_UP_DOWN_SIZE, // PAGE_UP and PAGE_DOWN will skip trough 10 items
@@ -692,6 +703,7 @@ class List extends UI5Element {
 				selectedItems: this.getSelectedItems(),
 				previouslySelectedItems,
 				selectionComponentPressed: event.detail.selectionComponentPressed,
+				targetItem: event.detail.item,
 				key: event.detail.key,
 			});
 		}
@@ -888,6 +900,8 @@ class List extends UI5Element {
 	onItemFocused(event) {
 		const target = event.target;
 
+		event.stopPropagation();
+
 		this._itemNavigation.setCurrentItem(target);
 		this.fireEvent("item-focused", { item: target });
 
@@ -937,7 +951,7 @@ class List extends UI5Element {
 	onForwardBefore(event) {
 		this.setPreviouslyFocusedItem(event.target);
 		this.focusBeforeElement();
-		event.stopImmediatePropagation();
+		event.stopPropagation();
 	}
 
 	onForwardAfter(event) {
@@ -949,6 +963,8 @@ class List extends UI5Element {
 			this.focusGrowingButton();
 			event.preventDefault();
 		}
+
+		event.stopPropagation();
 	}
 
 	focusBeforeElement() {

package/dist/Menu.js

@@ -118,6 +118,8 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.Menu.prototype */ {
 		/**
 		 * Defines the items of this component.
+		 * <br><br>
+		 * <b>Note:</b> Use <code>ui5-menu-item</code> for the intended design.
 		 *
 		 * @type {sap.ui.webcomponents.main.IMenuItem[]}
 		 * @slot items
@@ -178,7 +180,7 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/Menu.js";</code>
+ * <code>import "@ui5/webcomponents/dist/Menu.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -395,11 +397,11 @@ class Menu extends UI5Element {
 	}
 
 	_prepareSubMenuDesktopTablet(item, opener, actionId) {
-		if (actionId !== this._subMenuOpenerId || item.hasChildren) {
+		if (actionId !== this._subMenuOpenerId || (item && item.hasChildren)) {
 			// close opened sub-menu if there is any opened
 			this._closeItemSubMenu(this._openedSubMenuItem, true);
 		}
-		if (item.hasChildren) {
+		if (item && item.hasChildren) {
 			// create new sub-menu
 			this._createSubMenu(item, actionId);
 			this._openItemSubMenu(item, opener, actionId);
@@ -432,7 +434,7 @@ class Menu extends UI5Element {
 			// respect mouseover only on desktop
 			const item = event.target.associatedItem;
 
-			if (item.hasChildren && item._subMenu) {
+			if (item && item.hasChildren && item._subMenu) {
 				// try to close the sub-menu
 				item._preventSubMenuClose = false;
 				this._closeItemSubMenu(item);

package/dist/MenuItem.js

@@ -22,7 +22,7 @@ const metadata = {
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 <b>* Example:</b>
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -56,7 +56,19 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates if the any of the element siblings have children items.
+		 * Defines the accessible ARIA name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.7.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Indicates whether any of the element siblings have children items.
 		 * @type {boolean}
 		 * @private
 		 */
@@ -66,7 +78,7 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates if the any of the element siblings have icon.
+		 * Indicates whether any of the element siblings have icon.
 		 * @type {boolean}
 		 * @private
 		 */
@@ -125,10 +137,9 @@ const metadata = {
  * and each <code>ui5-menu-item</code> is represented by a list item (<code>ui5-li</code>) in that list. Therefore, you should only use
  * <code>ui5-menu-item</code> directly in your apps. The <code>ui5-li</code> list item is internal for the list, and not intended for public use.
  *
- * For the <code>ui5-menu-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/MenuItem.js";</code>
+ * <code>import "@ui5/webcomponents/dist/MenuItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -155,6 +166,10 @@ class MenuItem extends UI5Element {
 	get subMenuOpened() {
 		return !!Object.keys(this._subMenu).length;
 	}
+
+	get ariaLabelledByText() {
+		return `${this.text} ${this.accessibleName}`.trim();
+	}
 }
 
 MenuItem.define();

package/dist/MessageStrip.js

@@ -94,7 +94,7 @@ const metadata = {
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {sap.ui.webcomponents.main.IIcon}
 		 * @slot

package/dist/MonthPicker.js

@@ -1,4 +1,6 @@
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
+import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import {
 	isEnter,
@@ -19,6 +21,7 @@ import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import CalendarPart from "./CalendarPart.js";
 import MonthPickerTemplate from "./generated/templates/MonthPickerTemplate.lit.js";
 import styles from "./generated/themes/MonthPicker.css.js";
+
 /**
  * @public
  */
@@ -131,6 +134,7 @@ class MonthPicker extends CalendarPart {
 				selected: isSelected,
 				ariaSelected: isSelected ? "true" : "false",
 				name: monthsNames[i],
+				nameInSecType: this.secondaryCalendarType && this._getDisplayedSecondaryMonthText(timestamp).text,
 				disabled: isDisabled,
 				classes: "ui5-mp-item",
 			};
@@ -155,6 +159,11 @@ class MonthPicker extends CalendarPart {
 		this._months = months;
 	}
 
+	_getDisplayedSecondaryMonthText(timestamp) {
+		const monthsName = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp);
+		return convertMonthNumbersToMonthNames(monthsName.firstDate.getMonth(), monthsName.lastDate.getMonth(), this.secondaryCalendarType);
+	}
+
 	onAfterRendering() {
 		if (!this._hidden) {
 			this.focus();