@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/src/DatePickerInput.hbs

@@ -0,0 +1,43 @@
+<div
+        class="ui5-date-picker-root"
+        style="{{styles.main}}"
+>
+    {{! INPUT}}
+    <ui5-input
+            id="{{_id}}-inner"
+            class="ui5-date-picker-input"
+            placeholder="{{_placeholder}}"
+            type="{{type}}"
+            value="{{value}}"
+            ?disabled="{{disabled}}"
+            ?required="{{required}}"
+            ?readonly="{{readonly}}"
+            value-state="{{valueState}}"
+            data-sap-focus-ref
+            ._inputAccInfo ="{{accInfo}}"
+            @ui5-change="{{_onInputChange}}"
+            @ui5-input="{{_onInputInput}}"
+            @ui5-submit="{{_onInputSubmit}}"
+            @keydown="{{_onkeydown}}"
+    >
+
+        {{#if valueStateMessage.length}}
+            <slot name="valueStateMessage" slot="valueStateMessage"></slot>
+        {{/if}}
+
+        {{#unless readonly}}
+            <ui5-icon
+                    id="{{_id}}-value-help"
+                    slot="icon"
+                    name="{{openIconName}}"
+                    tabindex="-1"
+                    accessible-name="{{openIconTitle}}"
+                    mode={{_iconMode}}
+                    show-tooltip
+                    @click="{{_togglePicker}}"
+                    input-icon
+                    ?pressed="{{open}}"
+            ></ui5-icon>
+        {{/unless}}
+    </ui5-input>
+</div>

package/src/DatePickerPopover.hbs

@@ -1,12 +1,15 @@
 <ui5-responsive-popover
 	id="{{_id}}-responsive-popover"
+	.opener={{this}}
+	?open="{{open}}"
 	allow-target-overlap
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	hide-arrow
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
-	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
+	@ui5-close="{{onResponsivePopoverAfterClose}}"
+	@ui5-before-open="{{onResponsivePopoverBeforeOpen}}"
 >
 	{{#if showHeader}}
 		{{> header}}
@@ -27,7 +30,7 @@
 				class="ui5-responsive-popover-close-btn"
 				icon="decline"
 				design="Transparent"
-				@click="{{closePicker}}"
+				@click="{{_togglePicker}}"
 			>
 			</ui5-button>
 		</div>
@@ -44,9 +47,9 @@
 		.selectionMode="{{_calendarSelectionMode}}"
 		.minDate="{{minDate}}"
 		.maxDate="{{maxDate}}"
-		@ui5-selected-dates-change="{{onSelectedDatesChange}}"
-		@ui5-show-month-press="{{onHeaderShowMonthPress}}"
-		@ui5-show-year-press="{{onHeaderShowYearPress}}"
+		@ui5-selection-change="{{onSelectedDatesChange}}"
+		@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+		@ui5-show-year-view="{{onHeaderShowYearPress}}"
 		?hide-week-numbers="{{hideWeekNumbers}}"
 		._currentPicker="{{_calendarCurrentPicker}}"
 		._pickersMode="{{_calendarPickersMode}}"

package/src/DateRangePicker.hbs

@@ -0,0 +1,23 @@
+{{>include "./DatePickerInput.hbs"}}
+{{>include "./DatePickerPopover.hbs"}}
+
+{{#*inline "content"}}
+	<ui5-calendar
+		id="{{_id}}-calendar"
+		primary-calendar-type="{{_primaryCalendarType}}"
+		secondary-calendar-type="{{secondaryCalendarType}}"
+		format-pattern="{{_formatPattern}}"
+		timestamp="{{_calendarTimestamp}}"
+		.selectionMode="{{_calendarSelectionMode}}"
+		.minDate="{{minDate}}"
+		.maxDate="{{maxDate}}"
+		@ui5-selection-change="{{onSelectedDatesChange}}"
+		@ui5-show-month-press="{{onHeaderShowMonthPress}}"
+		@ui5-show-year-press="{{onHeaderShowYearPress}}"
+		?hide-week-numbers="{{hideWeekNumbers}}"
+		._currentPicker="{{_calendarCurrentPicker}}"
+		._pickersMode="{{_calendarPickersMode}}"
+	>
+		<ui5-date-range start-value="{{startValue}}" end-value="{{endValue}}"></ui5-date-range>
+	</ui5-calendar>
+{{/inline}}

package/src/DateTimePicker.hbs

@@ -0,0 +1,2 @@
+{{>include "./DatePickerInput.hbs"}}
+{{>include "./DateTimePickerPopover.hbs"}}

package/src/DateTimePickerPopover.hbs

@@ -24,9 +24,9 @@
 			.selectionMode="{{_calendarSelectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
-			@ui5-selected-dates-change="{{onSelectedDatesChange}}"
-			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
-			@ui5-show-year-press="{{onHeaderShowYearPress}}"
+			@ui5-selection-change="{{onSelectedDatesChange}}"
+			@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-view="{{onHeaderShowYearPress}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"
 			._currentPicker="{{_calendarCurrentPicker}}"
 		>
@@ -40,16 +40,14 @@
 		{{/unless}}
 
 		{{#if showTimeView}}
-			<ui5-time-selection
-					id="{{_id}}-time-sel"
-					class="ui5-dt-time {{classes.dateTimeView}}"
-					value="{{_timeSelectionValue}}"
-					format-pattern="{{_formatPattern}}"
-					._currentSlider="{{_currentTimeSlider}}"
-					._calendarType="{{_primaryCalendarType}}"
-					@ui5-change="{{onTimeSelectionChange}}"
-					@ui5-slider-change="{{onTimeSliderChange}}"
-			></ui5-time-selection>
+			<ui5-time-selection-clocks
+				id="{{_id}}-time-sel"
+				class="ui5-dt-time {{classes.dateTimeView}}"
+				format-pattern="{{_formatPattern}}"
+				value="{{_timeSelectionValue}}"
+				@ui5-change="{{onTimeSelectionChange}}"
+				._calendarType="{{_primaryCalendarType}}"
+			></ui5-time-selection-clocks>
 		{{/if}}
 	</div>
 {{/inline}}

package/src/DayPicker.hbs

@@ -27,6 +27,7 @@
 					{{#each this}}
 						{{#if this.timestamp}}
 							<div
+								?special-day="{{this.type}}"
 								tabindex="{{this._tabIndex}}"
 								?data-sap-focus-ref="{{this.focusRef}}"
 								data-sap-timestamp="{{this.timestamp}}"
@@ -46,6 +47,9 @@
 											{{this.secondDay}}
 										</span>
 									{{/if}}
+									{{#if this.type}}
+										<div class="ui5-dp-specialday {{this.type}}"></div>
+									{{/if}}
 							</div>
 						{{else}}
 							{{#unless this.isHidden}}

package/src/DropIndicator.hbs

@@ -0,0 +1 @@
+<div class="{{classes.root}}"></div>

package/src/FileUploader.hbs

@@ -1,4 +1,3 @@
-
 <div class="ui5-file-uploader-root"
 	@mouseover="{{_onmouseover}}"
 	@mouseout="{{_onmouseout}}"
@@ -7,6 +6,8 @@
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@click="{{_onclick}}"
+	@dragover="{{_ondrag}}"
+	@drop="{{_ondrop}}"
 >
 	<div class="ui5-file-uploader-mask">
 		{{#unless hideInput}}
@@ -21,20 +22,16 @@
 		{{/unless}}
 		<slot></slot>
 	</div>
-	{{#if _keepInputInShadowDOM}}
-		<input
-			type="file"
-			title="{{titleText}}"
-			accept="{{accept}}"
-			?multiple="{{multiple}}"
-			?disabled="{{disabled}}"
-			@change="{{_onChange}}"
-			aria-hidden="true"
-			tabindex="-1"
-		>
-	{{else}}
-		<slot name="formSupport">
-			{{!-- input for forms will be placed here on IE, Edge and Firefox --}}
-		</slot>
-	{{/if}}
+	<input
+		type="file"
+		title="{{titleText}}"
+		accept="{{accept}}"
+		?multiple="{{multiple}}"
+		?disabled="{{disabled}}"
+		@change="{{_onChange}}"
+		aria-hidden="true"
+		tabindex="-1"
+	>
 </div>
+
+{{>include "./FileUploaderPopover.hbs"}}

package/src/FileUploaderPopover.hbs

@@ -1,11 +1,11 @@
 <ui5-popover
 	skip-registry-update
-	_disable-initial-focus
+	prevent-initial-focus
 	prevent-focus-restore
 	hide-arrow
 	class="ui5-valuestatemessage-popover"
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 >
 	<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 		{{#if _valueStateMessageInputIcon}}

package/src/Icon.hbs

@@ -10,8 +10,6 @@
 	aria-label="{{effectiveAccessibleName}}"
 	aria-hidden={{effectiveAriaHidden}}
 	xmlns="http://www.w3.org/2000/svg"
-	@focusin={{_onfocusin}}
-	@focusout={{_onfocusout}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 >

package/src/Input.hbs

@@ -6,7 +6,8 @@
 	<div class="ui5-input-content">
 		{{> preContent}}
 
-		<input id="{{_id}}-inner"
+		<input 
+			id="inner"
 			class="ui5-input-inner"
 			style="{{styles.innerInput}}"
 			type="{{inputType}}"
@@ -39,7 +40,7 @@
 			max="{{nativeInputAttributes.max}}"
 		/>
 
-		{{#if effectiveShowClearIcon}}
+		{{#if _effectiveShowClearIcon}}
 			<div @click={{_clear}} @mousedown={{_iconMouseDown}} class="ui5-input-clear-icon-wrapper" input-icon tabindex="-1">
 				<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
 			</div>
@@ -58,23 +59,23 @@
 		{{> postContent }}
 
 		{{#if showSuggestions}}
-			<span id="{{_id}}-suggestionsText" class="ui5-hidden-text">{{suggestionsText}}</span>
-			<span id="{{_id}}-selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
-			<span id="{{_id}}-suggestionsCount" class="ui5-hidden-text" aria-live="polite">{{availableSuggestionsCount}}</span>
+			<span id="suggestionsText" class="ui5-hidden-text">{{suggestionsText}}</span>
+			<span id="selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
+			<span id="suggestionsCount" class="ui5-hidden-text" aria-live="polite">{{availableSuggestionsCount}}</span>
 		{{/if}}
 
 		{{#if accInfo.input.ariaDescription}}
-			<span id="{{_id}}-descr" class="ui5-hidden-text">{{accInfo.input.ariaDescription}}</span>
+			<span id="descr" class="ui5-hidden-text">{{accInfo.input.ariaDescription}}</span>
 		{{/if}}
 
 		{{#if hasValueState}}
-			<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
+			<span id="valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
 		{{/if}}
 	</div>
-
-	<slot name="formSupport"></slot>
 </div>
 
 
 {{#*inline "preContent"}}{{/inline}}
-{{#*inline "postContent"}}{{/inline}}
+{{#*inline "postContent"}}{{/inline}}
+
+{{>include "./InputPopover.hbs"}}

package/src/InputPopover.hbs

@@ -2,13 +2,17 @@
 	<ui5-responsive-popover
 		class="{{classes.popover}}"
 		hide-arrow
-		_disable-initial-focus
-		placement-type="Bottom"
-		horizontal-align="Left"
+		prevent-focus-restore
+		prevent-initial-focus
+		placement="Bottom"
+		horizontal-align="Start"
+		tabindex="-1"
 		style="{{styles.suggestionsPopover}}"
-		@ui5-after-open="{{_afterOpenPopover}}"
-		@ui5-after-close="{{_afterClosePopover}}"
+		@ui5-open="{{_afterOpenPicker}}"
+		@ui5-close="{{_afterClosePicker}}"
 		@ui5-scroll="{{_scroll}}"
+		.open={{open}}
+		.opener={{this}}
 	>
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header">
@@ -18,7 +22,7 @@
 					class="ui5-responsive-popover-close-btn"
 					icon="decline"
 					design="Transparent"
-					@click="{{_closeRespPopover}}"
+					@click="{{_closePicker}}"
 				>
 				</ui5-button>
 			</div>
@@ -39,7 +43,9 @@
 		{{#if hasValueStateMessage}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.suggestionPopoverHeader}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+				{{#if open}}
 					{{> valueStateMessage}}
+				{{/if}}
 			</div>
 		{{/if}}
 	{{/if}}
@@ -48,7 +54,9 @@
 		{{#if hasValueStateMessage}}
 			<div slot="header" ?focused={{_isValueStateFocused}} class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.suggestionPopoverHeader}}>
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
+				{{#if open}}
+					{{> valueStateMessage}}
+				{{/if}}
 			</div>
 		{{/if}}
 	{{/unless}}
@@ -59,7 +67,7 @@
 			<div slot="footer" class="ui5-responsive-popover-footer">
 				<ui5-button
 					design="Transparent"
-					@click="{{_closeRespPopover}}"
+					@click="{{_closePicker}}"
 				>OK</ui5-button>
 			</div>
 		{{/if}}
@@ -68,16 +76,22 @@
 {{#if hasValueStateMessage}}
 		<ui5-popover
 			skip-registry-update
-			_disable-initial-focus
+			prevent-initial-focus
 			prevent-focus-restore
 			hide-arrow
 			class="ui5-valuestatemessage-popover"
-			placement-type="Bottom"
+			placement="Bottom"
+			tabindex="-1"
 			horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
+			.opener={{this}}
+			.open={{valueStateOpen}}
+			@ui5-close="{{_handleValueStatePopoverAfterClose}}"
 		>
 			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
+				{{#if valueStateOpen}}
+					{{> valueStateMessage}}
+				{{/if}}
 			</div>
 		</ui5-popover>
 {{/if}}
@@ -86,17 +100,23 @@
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{/if}}
 {{/inline}}
 
 {{#*inline "suggestionsList"}}
-	<ui5-list separators="{{suggestionSeparators}}" @mousedown="{{onItemMouseDown}}" mode="SingleSelect">
+	<ui5-list
+		separators="{{suggestionSeparators}}"
+		selection-mode="Single"
+		@mousedown="{{onItemMouseDown}}"
+		@mouseover="{{_handleItemMouseOver}}"
+		@mouseout="{{_handleItemMouseOut}}"
+		@ui5-item-click="{{_handleSuggestionItemPress}}"
+		@ui5-selection-change="{{_handleSelectionChange}}"
+	>
 		{{#each suggestionObjects}}
 			{{#if groupItem}}
-				<ui5-li-groupheader data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-groupheader>
+				<ui5-li-group-header data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-group-header>
 			{{else}}
 				<ui5-li-suggestion-item
 					wrapping-type="Normal"

package/src/Link.hbs

@@ -5,10 +5,10 @@
 	target="{{target}}"
 	rel="{{_rel}}"
 	tabindex="{{effectiveTabIndex}}"
-	title="{{title}}"
+	title="{{tooltip}}"
 	?disabled="{{disabled}}"
 	aria-label="{{ariaLabelText}}"
-	aria-haspopup="{{accessibilityAttributes.hasPopup}}"
+	aria-haspopup="{{_hasPopup}}"
 	aria-expanded="{{accessibilityAttributes.expanded}}"
 	@focusin={{_onfocusin}}
 	@focusout={{_onfocusout}}

package/src/List.hbs

@@ -2,6 +2,10 @@
 	class="{{classes.root}}"
 	@focusin="{{_onfocusin}}"
 	@keydown="{{_onkeydown}}"
+	@dragenter="{{_ondragenter}}"
+	@dragover="{{_ondragover}}"
+	@drop="{{_ondrop}}"
+	@dragleave="{{_ondragleave}}"
 	@ui5-_press={{onItemPress}}
 	@ui5-close={{onItemClose}}
 	@ui5-toggle={{onItemToggle}}
@@ -31,10 +35,9 @@
 
 		<ul id="{{_id}}-listUl"
 			class="ui5-list-ul"
-			role="{{accessibleRole}}"
+			role="{{listAccessibleRole}}"
 			aria-label="{{ariaLabelTxt}}"
 			aria-labelledby="{{ariaLabelledBy}}"
-			aria-roledescription="{{accessibleRoleDescription}}"
 		>
 			<slot></slot>
 
@@ -64,18 +67,22 @@
 		<span tabindex="-1" aria-hidden="true" class="ui5-list-end-marker"></span>
 	</div>
 
-	{{#if busy}}
-		<div class="ui5-list-busy-row">
+	{{#if loading}}
+		<div class="ui5-list-loading-row">
 			<ui5-busy-indicator
-				delay="{{busyDelay}}"
+				delay="{{loadingDelay}}"
 				active
-				size="Medium"
-				class="ui5-list-busy-ind"
-				style="{{styles.busyInd}}"
+				class="ui5-list-loading-ind"
+				style="{{styles.loadingInd}}"
 				data-sap-focus-ref
 			></ui5-busy-indicator>
 		</div>
 	{{/if}}
+
+	<ui5-drop-indicator
+		orientation="Horizontal"
+		.ownerReference="{{this}}"
+	></ui5-drop-indicator>
 </div>
 
 
@@ -84,7 +91,7 @@
 		<div
 			tabindex="0"
 			role="button"
-			id="{{_id}}-growing-btn" 
+			id="{{_id}}-growing-btn"
 			aria-labelledby="{{_id}}-growingButton-text"
 			?active="{{_loadMoreActive}}"
 			@click="{{_onLoadMoreClick}}"

package/src/ListItem.hbs

@@ -12,13 +12,15 @@
 	@touchstart="{{_ontouchstart}}"
 	@touchend="{{_ontouchend}}"
 	@click="{{_onclick}}"
+	draggable="{{movable}}"
+	@dragstart="{{_ondragstart}}"
+	@dragend="{{_ondragend}}"
 	role="{{_accInfo.role}}"
 	aria-expanded="{{_accInfo.ariaExpanded}}"
-	title="{{title}}"
+	title="{{_accInfo.tooltip}}"
 	aria-level="{{_accInfo.ariaLevel}}"
 	aria-haspopup="{{_accInfo.ariaHaspopup}}"
 	aria-posinset="{{_accInfo.posinset}}"
-	aria-roledescription="{{accessibleRoleDescription}}"
 	aria-setsize="{{_accInfo.setsize}}"
 	aria-describedby="{{_id}}-invisibleText-describedby"
 	aria-labelledby="{{_accessibleNameRef}}"
@@ -33,6 +35,10 @@
 			{{> selectionElement}}
 		{{/if}}
 
+		{{#if _hasHighlightColor}}
+			<div class="ui5-li-highlight"></div>
+		{{/if}}
+
 		<div part="content" id="{{_id}}-content" class="ui5-li-content">
 			{{> imageBegin}}
 			{{> iconBegin}}
@@ -89,7 +95,7 @@
 		</ui5-radio-button>
 	{{/if}}
 
-	{{#if modeMultiSelect}}
+	{{#if modeMultiple}}
 		<ui5-checkbox
 				part="checkbox"
 				?disabled="{{isInactive}}"

package/src/ListItemGroup.hbs

@@ -0,0 +1,12 @@
+  <ul class="ui5-group-li-root" role="group">
+    {{#if hasHeader}}
+      <ui5-li-group-header part="header">
+          {{#if hasFormattedHeader}}
+            <slot name="header"></slot>
+          {{else}}
+            {{headerText}}
+          {{/if}}
+      </ui5-li-group-header>
+    {{/if}}
+    <slot></slot>
+  </ul>

package/src/{GroupHeaderListItem.hbs → ListItemGroupHeader.hbs}

@@ -1,6 +1,6 @@
 <ul
 	part="native-li"
-	tabindex="{{_tabIndex}}"
+	tabindex="{{forcedTabIndex}}"
 	class="ui5-ghli-root {{classes.main}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"

package/src/Menu.hbs

@@ -1,16 +1,16 @@
 <ui5-responsive-popover
 	id="{{_id}}-menu-rp"
 	class="ui5-menu-rp"
-	horizontal-align="Left"
-	placement-type={{placementType}}
+	horizontal-align="Start"
+	placement={{placement}}
 	vertical-align={{verticalAlign}}
 	hide-arrow
 	allow-target-overlap
 	?sub-menu={{_isSubMenu}}
 	@ui5-before-open={{_beforePopoverOpen}}
-	@ui5-after-open={{_afterPopoverOpen}}
+	@ui5-open={{_afterPopoverOpen}}
 	@ui5-before-close={{_beforePopoverClose}}
-	@ui5-after-close={{_afterPopoverClose}}
+	@ui5-close={{_afterPopoverClose}}
 >
 {{#if isPhone}}
 	<div
@@ -22,7 +22,7 @@
 			icon="nav-back"
 			class="ui5-menu-back-button"
 			design="Transparent"
-			aria-label="{{labelBack}}"
+			accessible-name="{{labelBack}}"
 			@click={{_navigateBack}}
 		>
 		</ui5-button>
@@ -37,8 +37,8 @@
 		<ui5-button
 			icon="decline"
 			design="Transparent"
-			aria-label="{{labelClose}}"
-			@click={{close}}
+			accessible-name="{{labelClose}}"
+			@click={{_closeAll}}
 		>
 		</ui5-button>
 	</div>
@@ -49,24 +49,25 @@
 	{{#if _currentItems.length}}
 		<ui5-list
 			id="{{_id}}-menu-list"
-			mode="None"
-			?busy="{{busy}}"
-			busy-delay="{{busyDelay}}"
+			selection-mode="None"
+			?loading="{{loading}}"
+			loading-delay="{{loadingDelay}}"
 			separators="None"
-			accessible-role="menu"
+			accessible-role="Menu"
 			@ui5-item-click={{_itemClick}}
-			@mouseover="{{_busyMouseOver}}"
+			@mouseover="{{_loadingMouseOver}}"
 		>
 		{{#each _currentItems}}
-			<ui5-li
+			<ui5-menu-li
 				.associatedItem="{{this.item}}"
 				class="ui5-menu-item"
 				id="{{../_id}}-menu-item-{{@index}}"
 				.icon="{{this.item.icon}}"
 				accessible-name={{this.item.ariaLabelledByText}}
-				accessible-role="menuitem"
+				accessible-role="MenuItem"
 				.additionalText="{{this.item._additionalText}}"
-				._ariaHasPopup={{this.ariaHasPopup}}
+				tooltip="{{this.item.tooltip}}"
+				selected="{{this.item.subMenuOpened}}"
 				?disabled={{this.item.disabled}}
 				?starts-section={{this.item.startsSection}}
 				?selected={{this.item.subMenuOpened}}
@@ -74,42 +75,17 @@
 				@mouseover={{../_itemMouseOver}}
 				@mouseout={{../_itemMouseOut}}
 				@keydown={{../_itemKeyDown}}
+				@_focused={{../_onfocusin}}
 			>
-				<div class="ui5-menu-item-text">
-				{{#if this.item.hasDummyIcon}}
-					<div
-						class="ui5-menu-item-dummy-icon"
-					>
-					</div>
-				{{/if}}
-				{{this.item.text}}
-				{{#if this.item.hasSubmenu}}
-					<div
-						class="ui5-menu-item-submenu-icon"
-					>
-						<ui5-icon
-							part="subicon"
-							name="slim-arrow-right"
-							class="ui5-menu-item-icon-end"
-						>
-						</ui5-icon>
-					</div>
-				{{else if this.item._siblingsWithChildren}}
-					<div
-						class="ui5-menu-item-no-icon-end"
-					>
-					</div>
-				{{/if}}
-				</div>
-			</ui5-li>
+			</ui5-menu-li>
 		{{/each}}
 		</ui5-list>
-	{{else if busy}}
+	{{else if loading}}
 		<ui5-busy-indicator
 			id="{{_id}}-menu-busy-indicator"
-			delay="{{busyDelay}}"
+			delay="{{loadingDelay}}"
 			class="ui5-menu-busy-indicator"
-			@mouseover="{{_busyMouseOver}}"
+			@mouseover="{{_loadingMouseOver}}"
 			active>
 		</ui5-busy-indicator>
 	{{/if}}