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

package/src/MenuListItem.hbs

@@ -0,0 +1,35 @@
+{{>include "./ListItem.hbs"}}
+
+{{#*inline "listItemContent"}}
+	{{#if text}}
+		<div class="ui5-menu-item-text">{{text}}</div>
+	{{/if}}
+	{{#if _additionalText}}
+		<span part="additional-text" class="ui5-li-additional-text">{{_additionalText}}</span>
+	{{/if}}
+{{/inline}}
+
+{{#*inline "iconBegin"}}
+	{{#if _siblingsWithIcon}}
+		{{#if hasIcon}}
+			<ui5-icon class="ui5-li-icon" name="{{icon}}"></ui5-icon>
+		{{else}}
+			<div class="ui5-menu-item-dummy-icon"></div>
+		{{/if}}
+	{{/if}}
+{{/inline}}
+
+{{#*inline "iconEnd"}}
+	{{#if 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>
+	{{/if}}
+{{/inline}}

package/src/MessageStrip.hbs

@@ -1,7 +1,6 @@
 <div class="{{classes.root}}"
 	id="{{_id}}"
 	role="note"
-	aria-live="assertive"
 	aria-labelledby="{{_id}}"
 >
 

package/src/MonthPicker.hbs

@@ -33,4 +33,4 @@
 
 		</div>
 	{{/each}}
-</div>
+</div>

package/src/MultiComboBox.hbs

@@ -7,12 +7,12 @@
 	{{/if}}
 
 	<ui5-tokenizer slot="_beginContent"
-		show-more
 		prevent-popover-open
+		hide-popover-arrow
 		class="ui5-multi-combobox-tokenizer"
 		?disabled="{{disabled}}"
 		@ui5-show-more-items-press="{{_showFilteredItems}}"
-		.morePopoverOpener={{morePopoverOpener}}
+		.opener={{morePopoverOpener}}
 		.popoverMinWidth={{_inputWidth}}
 		@ui5-token-delete="{{_tokenDelete}}"
 		@ui5-before-more-popover-open="{{handleBeforeTokenizerPopoverOpen}}"
@@ -52,7 +52,7 @@
 		@focusout={{inputFocusOut}}
 		@paste={{_handlePaste}}
 		role="combobox"
-		aria-haspopup="listbox"
+		aria-haspopup="dialog"
 		aria-expanded="{{open}}"
 		aria-autocomplete="both"
 		aria-describedby="{{ariaDescribedByText}}"
@@ -61,6 +61,12 @@
 		data-sap-focus-ref
 	/>
 
+	{{#if _effectiveShowClearIcon}}
+		<div @click={{_clear}} class="ui5-input-clear-icon-wrapper" input-icon tabindex="-1" @mousedown={{_iconMouseDown}}>
+			<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
+		</div>
+	{{/if}}
+
 	{{#if icon}}
 		<slot name="icon"></slot>
 	{{/if}}
@@ -78,3 +84,5 @@
 		></ui5-icon>
 	{{/unless}}
 </div>
+
+{{>include "./MultiComboBoxPopover.hbs"}}

package/src/MultiComboBoxPopover.hbs

@@ -1,14 +1,14 @@
 <ui5-responsive-popover
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	class="{{classes.popover}}"
 	hide-arrow
-	_disable-initial-focus
+	prevent-initial-focus
 	style="{{styles.suggestionsPopover}}"
 	@ui5-selection-change={{_listSelectionChange}}
-	@ui5-after-close={{_afterClosePicker}}
+	@ui5-close={{_afterClosePicker}}
 	@ui5-before-open={{_beforeOpen}}
-	@ui5-after-open={{_afterOpenPicker}}
+	@ui5-open={{_afterOpenPicker}}
 >
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
@@ -23,29 +23,26 @@
 				</ui5-button>
 			</div>
 			<div class="row">
-				<div
-					slot="header"
-					class="input-root-phone"
-					value-state="{{valueState}}"
+				<ui5-input
+					@ui5-input="{{_handleMobileInput}}"
+					@ui5-change="{{_mobileInputChange}}"
+					placeholder="{{placeholder}}"
+					value-state="{{_dialogInputValueState}}"
+					?show-clear-icon="{{showClearIcon}}"
+					?no-typeahead="{{noTypeahead}}"
 				>
-					<input
-						.value="{{value}}"
-						inner-input
-						placeholder="{{placeholder}}"
-						value-state="{{valueState}}"
-						@input="{{_inputLiveChange}}"
-						@change={{_inputChange}}
-						@keydown={{_onkeydown}}
-						aria-autocomplete="both"
-						/>
-				</div>
+					{{#each _filteredItems}}
+						<ui5-suggestion-item text="{{this.text}}" additional-text="{{this.additionalText}}"></ui5-suggestion-item>
+					{{/each}}
+				</ui5-input>
 				<ui5-toggle-button
 						slot="header"
 						class="ui5-multi-combobox-toggle-button"
 						icon="multiselect-all"
 						design="Transparent"
 						?pressed={{_showAllItemsButtonPressed}}
-						@click="{{filterSelectedItems}}">
+						@click="{{filterSelectedItems}}"
+						accessible-name="{{_showSelectedButtonAccessibleNameText}}">
 				</ui5-toggle-button>
 			</div>
 		</div>
@@ -55,32 +52,36 @@
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
+
+		{{> selectAllWrapper}}
 	{{/if}}
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateMessage}}
-			<div slot="header" @keydown="{{_onValueStateKeydown}}" tabindex="0" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
+			<div slot="header" @keydown="{{_onListHeaderKeydown}}" tabindex="0" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
+
+		{{> selectAllWrapper}}
 	{{/unless}}
 
 	{{#if filterSelected}}
-		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list">
 			{{#each selectedItems}}
 				{{#if isGroupItem}}
-					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
+					<ui5-li-group-header data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-group-header>
 				{{else}}
 					{{> listItem}}
 				{{/if}}
 			{{/each}}
 		</ui5-list>
 	{{else}}
-		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list">
 			{{#each _filteredItems}}
 				{{#if isGroupItem}}
-					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
+					<ui5-li-group-header data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-group-header>
 				{{else}}
 					{{> listItem}}
 				{{/if}}
@@ -101,12 +102,13 @@
 {{#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"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
+		tabindex="-1"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
@@ -138,3 +140,11 @@
 		{{this.text}}
 	</ui5-li>
 {{/inline}}
+
+{{#*inline "selectAllWrapper"}}
+	{{#if showSelectAll}}
+		<div class="ui5-mcb-select-all-header" @keydown="{{_onListHeaderKeydown}}" tabindex="0">
+			<ui5-checkbox ?checked={{_allSelected}} class="ui5-mcb-select-all-checkbox" text="{{selectAllCheckboxLabel}}" @ui5-change="{{_handleSelectAllCheckboxClick}}"></ui5-checkbox>
+		</div>
+	{{/if}}
+{{/inline}}

package/src/MultiInput.hbs

@@ -1,29 +1,18 @@
 {{>include "./Input.hbs"}}
 
 {{#*inline "preContent"}}
-	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
+	<span id="hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 	<ui5-tokenizer
 		class="ui5-multi-input-tokenizer"
-		.morePopoverOpener={{morePopoverOpener}}
+		.opener={{morePopoverOpener}}
 		.popoverMinWidth={{_inputWidth}}
-		.valueState={{valueState}}
-		?expanded="{{expandedTokenizer}}"
-		show-more
+		hide-popover-arrow
+		?expanded="{{tokenizerExpanded}}"
 		@keydown="{{_onTokenizerKeydown}}"
-		@ui5-show-more-items-press={{showMorePress}}
 		@ui5-token-delete={{tokenDelete}}
 		@focusout="{{_tokenizerFocusOut}}"
 	>
 		<slot name="tokens"></slot>
-		<div slot="valueStateMessage">
-			{{#if shouldDisplayDefaultValueStateMessage}}
-				{{valueStateText}}
-			{{else}}
-				{{#each valueStateMessageText}}
-					{{this}}
-				{{/each}}
-			{{/if}}
-		</div>
 	</ui5-tokenizer>
 {{/inline}}
 

package/src/NavigationMenu.hbs

@@ -0,0 +1,151 @@
+<ui5-responsive-popover
+	id="{{_id}}-navigation-menu-rp"
+	class="ui5-menu-rp ui5-navigation-menu"
+	vertical-align="Center"
+	?sub-menu={{_isSubMenu}}
+	@ui5-before-open={{_beforePopoverOpen}}
+	@ui5-open={{_afterPopoverOpen}}
+	@ui5-before-close={{_beforePopoverClose}}
+	@ui5-close={{_afterPopoverClose}}
+    accessible-name-ref="{{_id}}-navigationMenuPopoverText"
+>
+<span id="{{_id}}-navigationMenuPopoverText" class="ui5-hidden-text">{{accSideNavigationPopoverHiddenText}}</span>
+{{#if isPhone}}
+	<div
+		slot="header"
+		class="ui5-menu-dialog-header"
+	>
+	{{#if isSubMenuOpened}}
+		<ui5-button
+			icon="nav-back"
+			class="ui5-menu-back-button"
+			design="Transparent"
+			accessible-name="{{labelBack}}"
+			@click={{_navigateBack}}
+		>
+		</ui5-button>
+	{{/if}}
+		<div
+			class="ui5-menu-dialog-title"
+		>
+			<div>
+				{{menuHeaderTextPhone}}
+			</div>
+		</div>
+		<ui5-button
+			icon="decline"
+			design="Transparent"
+			accessible-name="{{labelClose}}"
+			@click={{close}}
+		>
+		</ui5-button>
+	</div>
+{{/if}}
+	<div
+		id="{{_id}}-menu-main"
+        class="ui5-navigation-menu-main"
+	>
+	{{#if _currentItems.length}}
+		<ui5-list
+			accessible-role="Tree"
+			id="{{_id}}-menu-list"
+			selection-mode="None"
+			?loading="{{loading}}"
+			loading-delay="{{loadingDelay}}"
+			separators="None"
+			@ui5-item-click={{_itemClick}}
+			@mouseover="{{_loadingMouseOver}}"
+		>
+		{{#each _currentItems}}
+			{{#if this.item.href}}
+				<ui5-li
+					.associatedItem="{{this.item}}"
+					id="{{../_id}}-menu-item-{{@index}}"
+					.icon="{{this.item.icon}}"
+					accessible-name={{this.item.ariaLabelledByText}}
+					accessible-role="None"
+					.additionalText="{{this.item._additionalText}}"
+					.ariaHasPopup={{this.ariaHasPopup}}
+					?disabled={{this.item.disabled}}
+					?starts-section={{this.item.startsSection}}
+					?selected={{this.item.subMenuOpened}}
+					?is-phone={{../isPhone}}
+					@mouseover={{../_itemMouseOver}}
+					@mouseout={{../_itemMouseOut}}
+					@keydown={{../_itemKeyDown}}
+					class="ui5-menu-item ui5-navigation-menu-item">
+						<a role="treeitem"
+						   href="{{this.item.href}}"
+						   target="{{this.item.target}}">
+							{{#if this.item.hasDummyIcon}}
+								<div class="ui5-menu-item-dummy-icon"></div>
+							{{/if}}
+							{{this.item.text}}
+						 	{{#if this.item.hasSubmenu}}
+								<ui5-icon
+									part="icon"
+									name="slim-arrow-right"
+									class="ui5-menu-item-icon-end"
+								></ui5-icon>
+							{{else if this.item._siblingsWithChildren}}
+								<div class="ui5-menu-item-no-icon-end"></div>
+							{{/if}}
+							{{#if this.item.isExternalLink}}
+								<ui5-icon class="ui5-sn-item-external-link-icon"
+										  name="arrow-right"
+								></ui5-icon>
+							{{/if}}
+						</a>
+					</ui5-li>
+				{{else}}
+				<ui5-li
+					.associatedItem="{{this.item}}"
+					class="ui5-menu-item ui5-navigation-menu-item"
+					id="{{../_id}}-menu-item-{{@index}}"
+					.icon="{{this.item.icon}}"
+					accessible-name={{this.item.ariaLabelledByText}}
+					accessible-role="TreeItem"
+					.additionalText="{{this.item._additionalText}}"
+					.ariaHasPopup={{this.ariaHasPopup}}
+					?disabled={{this.item.disabled}}
+					?starts-section={{this.item.startsSection}}
+					?selected={{this.item.subMenuOpened}}
+					?is-phone={{../isPhone}}
+					@mouseover={{../_itemMouseOver}}
+					@mouseout={{../_itemMouseOut}}
+					@keydown={{../_itemKeyDown}}
+				>
+				{{#if this.item.hasDummyIcon}}
+					<div class="ui5-menu-item-dummy-icon"></div>
+				{{/if}}
+				{{this.item.text}}
+				{{#if this.item.hasSubmenu}}
+					<ui5-icon
+						part="icon"
+						name="slim-arrow-right"
+						class="ui5-menu-item-icon-end"
+					>
+					</ui5-icon>
+				{{else if this.item._siblingsWithChildren}}
+					<div class="ui5-menu-item-no-icon-end"></div>
+				{{/if}}
+				</ui5-li>
+			{{/if}}
+		{{/each}}
+		</ui5-list>
+	{{else if loading}}
+		<ui5-busy-indicator
+			id="{{_id}}-menu-busy-indicator"
+			delay="{{loadingDelay}}"
+			class="ui5-menu-busy-indicator"
+			@mouseover="{{_loadingMouseOver}}"
+			active>
+		</ui5-busy-indicator>
+	{{/if}}
+	</div>
+</ui5-responsive-popover>
+
+<div
+	class="ui5-menu-submenus"
+>
+</div>

package/src/Popup.hbs

@@ -1,4 +1,7 @@
+{{>include "./PopupBlockLayer.hbs"}}
+
 <section
+	root-element
 	style="{{styles.root}}"
 	class="{{classes.root}}"
 	role="{{_role}}"
@@ -28,6 +31,4 @@
 
 {{#*inline "beforeContent"}}{{/inline}}
 
-{{#*inline "afterContent"}}{{/inline}}
-
-
+{{#*inline "afterContent"}}{{/inline}}

package/src/PopupBlockLayer.hbs

@@ -1,7 +1,4 @@
 <div class="ui5-block-layer"
-    ?hidden={{_blockLayerHidden}}
-    tabindex="0"
-    style="{{styles.blockLayer}}"
 	@keydown="{{_preventBlockLayerFocus}}"
-    @mousedown="{{_preventBlockLayerFocus}}">
+	@mousedown="{{_preventBlockLayerFocus}}">
 </div>

package/src/ProgressIndicator.hbs

@@ -4,15 +4,14 @@
      aria-valuenow="{{validatedValue}}"
      aria-valuemax="100"
      aria-valuetext="{{valueStateText}}"
-     aria-disabled="{{_ariaDisabled}}"
      aria-label="{{accessibleName}}"
 >
-    <div class="ui5-progress-indicator-bar" style="{{styles.bar}}">
+    <div class="ui5-progress-indicator-bar" part="bar" style="{{styles.bar}}">
         {{#unless showValueInRemainingBar}}
            {{> valueLabel}}
         {{/unless}}
     </div>
-    <div class="ui5-progress-indicator-remaining-bar">
+    <div class="ui5-progress-indicator-remaining-bar" part="remaining-bar">
         {{#if showValueInRemainingBar}}
            {{> valueLabel}}
         {{/if}}

package/src/RadioButton.hbs

@@ -14,8 +14,8 @@
 >
 	<div class='ui5-radio-inner {{classes.inner}}'>
 		<svg class="ui5-radio-svg" focusable="false" aria-hidden="true">
-			<circle class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
-			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" />
+			<circle part="outer-ring" class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
+			<circle part="inner-ring" class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 		</svg>
 		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{effectiveAriaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>
@@ -27,5 +27,4 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
-	<slot name="formSupport"></slot>
 </div>

package/src/ResponsivePopover.hbs

@@ -1,14 +1,16 @@
 {{#if _isPhone}}
 	<ui5-dialog
+		root-element
 		accessible-name={{accessibleName}}
 		accessible-name-ref={{accessibleNameRef}}
 		accessible-role={{accessibleRole}}
 		stretch
-		_disable-initial-focus
+		?prevent-initial-focus="{{preventInitialFocus}}"
+		initial-focus="{{initialFocus}}"
 		@ui5-before-open="{{_beforeDialogOpen}}"
-		@ui5-after-open="{{_propagateDialogEvent}}"
+		@ui5-open="{{_propagateDialogEvent}}"
 		@ui5-before-close="{{_propagateDialogEvent}}"
-		@ui5-after-close="{{_afterDialogClose}}"
+		@ui5-close="{{_afterDialogClose}}"
 		exportparts="content, header, footer"
 	>
 		{{!-- forward slot header to inner dialog slot header --}}
@@ -18,14 +20,20 @@
 			{{else}}
 				<div class="{{classes.header}}" slot="header">
 					{{#if headerText }}
-						<ui5-title level="H2" class="ui5-popup-header-text ui5-responsive-popover-header-text">{{headerText}}</ui5-title>
+						<ui5-title
+							level="H2"
+							wrapping-type="None"
+							class="ui5-popup-header-text ui5-responsive-popover-header-text"
+						>
+							{{headerText}}
+						</ui5-title>
 					{{/if}}
 					{{#unless _hideCloseButton}}
 						<ui5-button
 							icon="decline"
 							design="Transparent"
-							aria-label="{{_closeDialogAriaLabel}}"
-							@click="{{close}}"
+							accessible-name="{{_closeDialogAriaLabel}}"
+							@click="{{closePopup}}"
 						>
 						</ui5-button>
 					{{/unless}}

package/src/SegmentedButtonItem.hbs

@@ -3,39 +3,29 @@
 		aria-roledescription="{{ariaDescription}}"
 		aria-posinset="{{posInSet}}"
 		aria-setsize="{{sizeOfSet}}"
-		aria-selected="{{pressed}}"
-		class="ui5-button-root"
+		aria-selected="{{selected}}"
+		class="ui5-segmented-button-item-root"
 		aria-disabled="{{disabled}}"
 		data-sap-focus-ref
-	{{> ariaPressed}}
-		@focusout={{_onfocusout}}
-		@focusin={{_onfocusin}}
 		@click={{_onclick}}
-		@mousedown={{_onmousedown}}
-		@mouseup={{_onmouseup}}
-		@keydown={{_onkeydown}}
 		@keyup={{_onkeyup}}
-		@touchstart="{{_ontouchstart}}"
-		@touchend="{{_ontouchend}}"
 		tabindex={{tabIndexValue}}
 		aria-label="{{ariaLabelText}}"
 		title="{{tooltip}}"
 >
 	{{#if icon}}
 		<ui5-icon
-			class="ui5-button-icon"
+			class="ui5-segmented-button-item-icon"
 			name="{{icon}}"
 			part="icon"
-			?show-tooltip={{showIconTooltip}}
+			?show-tooltip={{isIconOnly}}
 		></ui5-icon>
 	{{/if}}
 
-	<span id="{{_id}}-content" class="ui5-button-text">
+	<span id="{{_id}}-content" class="ui5-segmented-button-item-text">
 		<bdi>
 			<slot></slot>
 		</bdi>
 	</span>
 
 </li>
-
-{{#*inline "ariaPressed"}}{{/inline}}

package/src/Select.hbs

@@ -5,7 +5,7 @@
 >
 	{{#if selectedOptionIcon}}
 		<ui5-icon
-			aria-hidden="true"
+			mode="Decorative"
 			class="ui5-select-option-icon"
 			name="{{selectedOptionIcon}}"
 		></ui5-icon>
@@ -46,5 +46,6 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
-	<slot name="formSupport"></slot>
 </div>
+
+{{>include "./SelectPopover.hbs"}}

package/src/SelectMenu.hbs

@@ -1,12 +1,12 @@
 <ui5-responsive-popover
 	class="ui5-select-menu"
-	placement-type="Bottom"
-	horizontal-align="Left"
-	@ui5-after-open="{{_onAfterOpen}}"
-	@ui5-after-close="{{_onAfterClose}}"
+	placement="Bottom"
+	horizontal-align="Start"
+	@ui5-open="{{_onAfterOpen}}"
+	@ui5-close="{{_onAfterClose}}"
 	@ui5-before-open="{{_onBeforeOpen}}"
 	hide-arrow
-	_disable-initial-focus
+	prevent-initial-focus
 	style={{styles.responsivePopover}}
 	>
 		{{#if _isPhone}}
@@ -37,8 +37,8 @@
 				{{/if}}
 		{{/unless}}
 
-		<ui5-list 
-			mode="SingleSelect"
+		<ui5-list
+			selection-mode="Single"
 			separators="None"
 			@ui5-item-click="{{_onOptionClick}}">
 					<slot></slot>

package/src/SelectPopover.hbs

@@ -1,13 +1,13 @@
 {{#if options}}
 	<ui5-responsive-popover
 		hide-arrow
-		_disable-initial-focus
-		placement-type="Bottom"
+		prevent-initial-focus
+		placement="Bottom"
 		class="ui5-select-popover {{classes.popover}}"
-		horizontal-align="Left"
-		@ui5-after-open="{{_afterOpen}}"
+		horizontal-align="Start"
+		@ui5-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
-		@ui5-after-close="{{_afterClose}}"
+		@ui5-close="{{_afterClose}}"
 		@keydown="{{_onkeydown}}"
 		style={{styles.responsivePopover}}
 	>
@@ -40,7 +40,7 @@
 		{{/unless}}
 
 		<ui5-list
-			mode="SingleSelectAuto"
+			selection-mode="SingleAuto"
 			separators="None"
 			@mousedown="{{_itemMousedown}}"
 			@ui5-item-click="{{_handleItemPress}}"
@@ -51,7 +51,7 @@
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
 					?focused="{{this._focused}}"
-					title="{{this.title}}"
+					tooltip="{{this.tooltip}}"
 					additional-text="{{this.additionalText}}"
 					?aria-selected="{{this.selected}}"
 					data-ui5-stable="{{this.stableDomRef}}"
@@ -66,12 +66,12 @@
 {{#if shouldOpenValueStateMessagePopover}}
 	<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 class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>