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

package/src/SplitButton.hbs

@@ -12,8 +12,7 @@
 	<ui5-button
 		class="ui5-split-text-button"
 		design="{{design}}"
-		dir={{effectiveDir}}
-		icon="{{_textButtonIcon}}"
+		icon="{{icon}}"
 		tabindex="-1"
 		?disabled="{{disabled}}"
 		?active="{{_textButtonActive}}"
@@ -21,36 +20,27 @@
 		@touchstart={{_textButtonPress}}
 		@mousedown={{_textButtonPress}}
 		@mouseup={{_textButtonRelease}}
-		@focusin={{_textButtonFocusIn}}
+		@focusin={{_onInnerButtonFocusIn}}
 		@focusout={{_onFocusOut}}
 	>
 		{{#if isTextButton}}
 			<slot></slot>
 		{{/if}}
 	</ui5-button>
-
-	<div
-		class="ui5-split-arrow-button-wrapper"
-		dir={{effectiveDir}}
+	<ui5-button
+		class="ui5-split-arrow-button"
+		design="{{design}}"
+		icon="slim-arrow-down"
+		tabindex="-1"
+		?disabled="{{disabled}}"
+		?active="{{effectiveActiveArrowButton}}"
+		@click="{{_handleArrowButtonAction}}"
+		@mousedown={{_arrowButtonPress}}
+		@mouseup={{_arrowButtonRelease}}
+		@focusin={{_onInnerButtonFocusIn}}
+		@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
 	>
-		<ui5-button
-			class="ui5-split-arrow-button"
-			design="{{design}}"
-			icon="slim-arrow-down"
-			tabindex="-1"
-			?disabled="{{disabled}}"
-			?active="{{effectiveActiveArrowButton}}"
-			aria-expanded="{{accessibilityInfo.ariaExpanded}}"
-			aria-haspopup="{{accessibilityInfo.ariaHaspopup}}"
-			@click="{{_handleArrowButtonAction}}"
-			@mousedown={{_arrowButtonPress}}
-			@mouseup={{_arrowButtonRelease}}
-			@focusin={{_setTabIndexValue}}
-			@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
-		>
-		</ui5-button>
-	</div>
-
+	</ui5-button>
 	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accessibilityInfo.description}} {{accessibilityInfo.keyboardHint}} {{accessibleName}}</span>
 	<span id="{{_id}}-invisibleTextDefault" class="ui5-hidden-text">{{textButtonAccText}}</span>
 

package/src/StandardListItem.hbs

@@ -39,12 +39,12 @@
 
 {{#*inline "iconBegin"}}
 	{{#if displayIconBegin}}
-		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
+		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" mode="Decorative"></ui5-icon>
 	{{/if}}
 {{/inline}}
 
 {{#*inline "iconEnd"}}
 	{{#if displayIconEnd}}
-		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
+		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" mode="Decorative"></ui5-icon>
 	{{/if}}
 {{/inline}}

package/src/StepInput.hbs

@@ -35,7 +35,7 @@
 			class="ui5-step-input-input"
 			placeholder="{{placeholder}}"
 			type="{{type}}"
-			value="{{_valuePrecisioned}}"
+			value="{{_displayValue}}"
 			?disabled="{{disabled}}"
 			?required="{{required}}"
 			?readonly="{{readonly}}"
@@ -76,6 +76,4 @@
 		></ui5-icon>
 	</div>
 	{{/unless}}
-	<slot name="formSupport"></slot>
-
 </div>

package/src/Switch.hbs

@@ -9,7 +9,6 @@
 	@keyup="{{_onkeyup}}"
 	@keydown="{{_onkeydown}}"
 	tabindex="{{effectiveTabIndex}}"
-	dir="{{effectiveDir}}"
 	title="{{tooltip}}"
 >
 	<div class="ui5-switch-inner">
@@ -27,7 +26,7 @@
 						<span class="ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon" part="text-on">
 							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-on" ></ui5-icon>
 						</span>
-						<span class="ui5-switch-text ui5-switch-text--off switch-no-label-icon" part="text-off">
+						<span class="ui5-switch-text ui5-switch-text--off ui5-switch-no-label-icon" part="text-off">
 							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-off" ></ui5-icon>
 						</span>
 					{{else}}
@@ -48,5 +47,4 @@
 	</div>
 
 	<input type='checkbox' ?checked="{{checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
-	<slot name="formSupport"></slot>
 </div>

package/src/TabContainer.hbs

@@ -6,6 +6,11 @@
 		class="{{classes.header}}"
 		id="{{_id}}-header"
 		@focusin="{{_onHeaderFocusin}}"
+		@dragstart="{{_onDragStart}}"
+		@dragenter="{{_onHeaderDragEnter}}"
+		@dragover="{{_onHeaderDragOver}}"
+		@drop="{{_onHeaderDrop}}"
+		@dragleave="{{_onHeaderDragLeave}}"
 		part="tabstrip"
 	>
 		<div
@@ -22,7 +27,7 @@
 					data-ui5-stable="overflow-start"
 					tabindex="-1"
 					tooltip="{{overflowMenuTitle}}"
-					aria-haspopup="menu"
+					.accessibilityAttributes="{{overflowBtnAccessibilityAttributes}}"
 					icon-end>{{this._startOverflowText}}</ui5-button>
 			{{/if}}
 		</div>
@@ -55,17 +60,22 @@
 					data-ui5-stable="overflow-end"
 					tabindex="-1"
 					tooltip="{{overflowMenuTitle}}"
-					aria-haspopup="menu"
+					.accessibilityAttributes="{{overflowBtnAccessibilityAttributes}}"
 					icon-end>{{this._endOverflowText}}</ui5-button>
 			{{/if}}
 		</div>
+
+		<ui5-drop-indicator
+			orientation="Vertical"
+			.ownerReference="{{this}}"
+		></ui5-drop-indicator>
 	</div>
 
 	{{#unless tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/unless}}
 
-	{{#if hasSubTabs}}
+	{{#if hasItems}}
 		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
 	{{/if}}
 
@@ -86,3 +96,5 @@
 		</div>
 	</div>
 {{/inline}}
+
+{{>include "./TabContainerPopover.hbs"}}

package/src/TabContainerPopover.hbs

@@ -1,21 +1,28 @@
 <ui5-responsive-popover
 	id="{{_id}}-overflowMenu"
-	horizontal-align="Right"
-	placement-type="Bottom"
+	horizontal-align="End"
+	placement="Bottom"
 	content-only-on-desktop
 	hide-arrow
 	_hide-header
 	class="ui5-tab-container-responsive-popover"
+	@dragstart="{{_onDragStart}}"
 >
-	<ui5-list mode="SingleSelect" separators="None" @ui5-item-click="{{_onOverflowListItemClick}}">
-		{{#each _overflowItems}}
+	<ui5-list
+		selection-mode="Single"
+		separators="None"
+		@ui5-item-click="{{_onOverflowListItemClick}}"
+		@ui5-move-over="{{_onPopoverListMoveOver}}"
+		@ui5-move="{{_onPopoverListMove}}"
+	>
+		{{#each _popoverItemsFlat}}
 			{{overflowPresentation}}
 		{{/each}}
 	</ui5-list>
 	<div slot="footer" class="ui5-responsive-popover-footer">
 		<ui5-button
 			design="Transparent"
-			@click="{{_closeRespPopover}}"
+			@click="{{_closePopover}}"
 		>{{popoverCancelButtonText}}</ui5-button>
 	</div>
 </ui5-responsive-popover>

package/src/TabInOverflow.hbs

@@ -1,11 +1,12 @@
 <ui5-li-custom
 	id="{{this._id}}-li"
 	class="{{this.overflowClasses}}"
+	style="{{this._forcedStyleInOverflow}}"
 	type="{{this.overflowState}}"
 	aria-disabled="{{this.effectiveDisabled}}"
 	aria-selected="{{this.effectiveSelected}}"
-	._realTab="{{this}}"
-	style="{{this._style}}"
+	?movable="{{this.movable}}"
+	.realTabReference="{{this}}"
 >
 	<div class="ui5-tab-overflow-itemContent-wrapper">
 		<div class="ui5-tab-overflow-itemContent">
@@ -27,6 +28,3 @@
 		</div>
 	</div>
 </ui5-li-custom>
-{{#each subTabs}}
-	{{overflowPresentation}}
-{{/each}}

package/src/TabInStrip.hbs

@@ -4,14 +4,17 @@
 	role="tab"
 	aria-roledescription="{{_roleDescription}}"
 	aria-haspopup="{{_ariaHasPopup}}"
-	aria-posinset="{{this._posinset}}"
-	aria-setsize="{{this._setsize}}"
+	aria-posinset="{{this._forcedPosinset}}"
+	aria-setsize="{{this._forcedSetsize}}"
 	aria-controls="ui5-tc-content"
 	aria-selected="{{this.effectiveSelected}}"
 	aria-disabled="{{this.effectiveDisabled}}"
-	?disabled="{{this.effectiveDisabled}}"
 	aria-labelledby="{{this.ariaLabelledBy}}"
-	._realTab="{{this}}"
+	?disabled="{{this.effectiveDisabled}}"
+	draggable="{{this.movable}}"
+	@dragstart="{{this._ondragstart}}"
+	@dragend="{{this._ondragend}}"
+	.realTabReference="{{this}}"
 >
 	{{#if this.icon}}
 		<div class="ui5-tab-strip-item-icon-outer">
@@ -56,7 +59,7 @@
 				tabindex="-1"
 				?disabled="{{disabled}}"
 				tooltip="{{expandButtonTitle}}"
-				aria-haspopup="Menu">
+				.accessibilityAttributes="{{expandBtnAccessibilityAttributes}}">
 			</ui5-button>
 		</div>
 	{{/if}}

package/src/TabSeparatorInOverflow.hbs

@@ -3,6 +3,7 @@
 	role="separator"
 	class="{{classes.root}}"
 	disabled
-	style="{{this._style}}"
+	style="{{this._forcedStyleInOverflow}}"
+	.realTabReference="{{this}}"
 >
 </ui5-li-custom>

package/src/TabSeparatorInStrip.hbs

@@ -2,4 +2,5 @@
 	id="{{this._id}}"
 	role="separator"
 	class="{{classes.root}}"
+	.realTabReference="{{this}}"
 ></div>

package/src/{Badge.hbs → Tag.hbs}

@@ -1,5 +1,5 @@
 {{#if interactive}}
-	<button class="ui5-badge-root"
+	<button class="ui5-tag-root"
 			title="{{_title}}"
 			aria-roledescription="{{_roleDescription}}"
 			aria-description="{{_valueState}}"
@@ -8,7 +8,7 @@
 		{{> content}}
 	</button>
 {{else}}
-	<div class="ui5-badge-root"
+	<div class="ui5-tag-root"
 		 title="{{_title}}">
 		{{> content}}
 	</div>
@@ -17,11 +17,11 @@
 {{#*inline "content"}}
 	<slot name="icon"></slot>
 	{{#if this._semanticIconName}}
-		<ui5-icon class="ui5-badge-semantic-icon" name="{{_semanticIconName}}"></ui5-icon>
+		<ui5-icon class="ui5-tag-semantic-icon" name="{{_semanticIconName}}"></ui5-icon>
 	{{/if}}
-	<span class="ui5-hidden-text">{{badgeDescription}}</span>
+	<span class="ui5-hidden-text">{{tagDescription}}</span>
 	{{#if hasText}}
-		<span class="ui5-badge-text"><bdi><slot></slot></bdi></span>
+		<span class="ui5-tag-text"><bdi><slot></slot></bdi></span>
 	{{/if}}
 {{/inline}}
 

package/src/TextArea.hbs

@@ -30,6 +30,8 @@
 			@change="{{_onchange}}"
 			@keyup="{{_onkeyup}}"
 			@keydown="{{_onkeydown}}"
+			@select="{{_onselect}}"
+			@scroll="{{_onscroll}}"
 			data-sap-focus-ref
 			part="textarea">
 		</textarea>
@@ -44,8 +46,8 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
 	{{/if}}
-
-	<slot name="formSupport"></slot>
 </div>
 
 {{#*inline "afterTextarea"}}{{/inline}}
+
+{{>include "./TextAreaPopover.hbs"}}

package/src/TextAreaPopover.hbs

@@ -3,10 +3,10 @@
 		skip-registry-update
 		prevent-focus-restore
 		hide-arrow
-		_disable-initial-focus
+		prevent-initial-focus
 		class="ui5-valuestatemessage-popover"
 		style="{{styles.valueStateMsgPopover}}"
-		placement-type="Bottom"
+		placement="Bottom"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="ui5-valuestatemessage-root {{classes.valueStateMsg}}">

package/src/TimePicker.hbs

@@ -41,3 +41,5 @@
 	{{/unless}}
 	</ui5-input>
 </div>
+
+{{>include "./TimePickerPopover.hbs"}}

package/src/TimePickerPopover.hbs

@@ -1,13 +1,13 @@
 <ui5-responsive-popover
 	id="{{_id}}-responsive-popover"
 	class="ui5-time-picker-popover"
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	allow-target-overlap
 	_hide-header
 	hide-arrow
-	@ui5-after-open="{{onResponsivePopoverAfterOpen}}"
-	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
+	@ui5-open="{{onResponsivePopoverAfterOpen}}"
+	@ui5-close="{{onResponsivePopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"
 	@keydown="{{_onkeydown}}"
 >
@@ -20,7 +20,7 @@
 		@close-picker="{{submitPickers}}"
 	></ui5-time-selection-clocks>
 
-	<div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
+	<div slot="footer" class="ui5-time-picker-footer">
 		<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
 		<ui5-button id="close" design="Transparent" @click="{{closePicker}}">{{cancelButtonLabel}}</ui5-button>
 	</div>
@@ -30,13 +30,13 @@
 <ui5-popover
 	id="{{_id}}-popover"
 	class="ui5-time-picker-inputs-popover"
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	allow-target-overlap
 	_hide-header
 	hide-arrow
-	@ui5-after-open="{{onInputsPopoverAfterOpen}}"
-	@ui5-after-close="{{onInputsPopoverAfterClose}}"
+	@ui5-open="{{onInputsPopoverAfterOpen}}"
+	@ui5-close="{{onInputsPopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"
 	@keydown="{{_onkeydown}}"
 >
@@ -50,7 +50,7 @@
 		></ui5-time-selection-inputs>
 	</div>
 
-	<div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
+	<div slot="footer" class="ui5-time-picker-footer">
 		<ui5-button id="submitInputs" design="Emphasized" @click="{{submitInputsPopover}}">{{submitButtonLabel}}</ui5-button>
 		<ui5-button id="closeInputs" design="Transparent" @click="{{closeInputsPopover}}">{{cancelButtonLabel}}</ui5-button>
 	</div>

package/src/TimeSelectionClocks.hbs

@@ -5,6 +5,7 @@
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 	@focusin={{_clocksFocusIn}}
+	@focusout={{_clocksFocusOut}}
 	format-pattern="{{formatPattern}}"
 >
 	<div
@@ -16,13 +17,14 @@
 		{{/if}}
 		<ui5-toggle-spin-button
 			id="{{../_id}}_button_{{this.entity}}"
+			data-sap-clock="{{this.entity}}"
 			.valueMin="{{this.attributes.min}}"
 			.valueMax="{{this.attributes.max}}"
 			.valueNow="{{this.value}}"
 			.valueText="{{this.textValue}}"
 			.accessibleName="{{this.label}}"
 			.pressed="{{this.active}}"
-			?focused="{{this.active}}"
+			?focused="{{this.focused}}"
 			@focusin="{{../_buttonFocusIn}}"
 		>{{this.stringValue}}</ui5-toggle-spin-button>
 	{{/each}}
@@ -31,10 +33,12 @@
 		<ui5-segmented-button
 			id="{{_id}}_AmPm"
 			@click={{_periodChange}}
+			@focusin={{_amPmFocusIn}}
+			@focusout={{_amPmFocusOut}}
 		>
 		{{#each _periods}}
     		<ui5-segmented-button-item
-				?pressed={{this.pressed}}
+				?selected={{this.selected}}
 			>
 			{{this.label}}
 			</ui5-segmented-button-item>

package/src/TimeSelectionInputs.hbs

@@ -31,7 +31,7 @@
 		>
 		{{#each _periods}}
     		<ui5-segmented-button-item
-				?pressed={{this.pressed}}
+				?selected={{this.selected}}
 			>
 			{{this.label}}
 			</ui5-segmented-button-item>

package/src/Toast.hbs

@@ -1,14 +1,6 @@
 {{#if domRendered}}
-	<div class="ui5-toast-root"
-		role="alert"
-		style="{{styles.root}}"
-		tabindex="{{_tabindex}}"
-		@focusin="{{_onfocusin}}"
-		@focusout="{{_onfocusout}}"
-		@keydown="{{_onkeydown}}"
-		@mouseover="{{_onmouseover}}"
-		@mouseleave="{{_onmouseleave}}"
-		@transitionend="{{_ontransitionend}}">
+	<div class="ui5-toast-root" role="alert" tabindex="{{_tabindex}}"
+	>
 		<bdi>
 			<slot></slot>
 		</bdi>

package/src/ToggleSpinButton.hbs

@@ -6,5 +6,4 @@
 	aria-valuemax="{{valueMax}}"
 	aria-valuenow="{{valueNow}}"
 	aria-valuetext="{{valueText}}"
-	role="spinbutton"
 {{/inline}}

package/src/Token.hbs

@@ -1,11 +1,12 @@
 <div
-	tabindex="{{_tabIndex}}"
+	tabindex="{{forcedTabIndex}}"
 	@click="{{_handleSelect}}"
 	@focusin="{{_focusin}}"
 	@focusout="{{_focusout}}"
 	@keydown="{{_keydown}}"
 	class="ui5-token--wrapper"
 	role="option"
+	aria-description="{{ariaDescription}}"
 	aria-selected="{{selected}}"
 >
 	<span class="ui5-token--text">{{this.text}}</span>
@@ -18,7 +19,8 @@
 				<slot name="closeIcon" @click="{{_delete}}"></slot>
 			{{else}}
 				<ui5-icon
-					name="{{iconURI}}"
+					name="decline"
+					mode="Decorative"
 					accessible-name="{{tokenDeletableText}}"
 					show-tooltip
 					@click="{{_delete}}"

package/src/Tokenizer.hbs

@@ -1,15 +1,18 @@
-<div class="{{classes.wrapper}}">
-	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{tokenizerLabel}}</span>
-
+<div class="ui5-tokenizer-root">
 	<div
-		class="{{classes.content}}"
+		class="ui5-tokenizer--content"
 		@ui5-delete="{{_delete}}"
 		@click="{{_click}}"
 		@mousedown="{{_onmousedown}}"
 		@keydown="{{_onkeydown}}"
+		@focusout="{{_onfocusout}}"
+		@focusin="{{_onfocusin}}"
 		@ui5-select="{{onTokenSelect}}"
 		role="listbox"
-		aria-labelledby="{{_id}}-hiddenText"
+		aria-label="{{tokenizerLabel}}"
+		aria-description="{{tokenizerAriaDescription}}"
+		aria-disabled="{{_ariaDisabled}}"
+		aria-readonly="{{_ariaReadonly}}"
 	>
 		{{#each tokens}}
 			<slot name="{{this._individualSlot}}"></slot>
@@ -18,9 +21,13 @@
 
 	{{#if showNMore}}
 		<span
-			@click="{{_openMorePopoverAndFireEvent}}"
+			role="button"
+			aria-haspopup="dialog"
+			@click="{{_handleNMoreClick}}"
 			class="ui5-tokenizer-more-text"
 			part="n-more-text"
 		>{{_nMoreText}}</span>
 	{{/if}}
-</div>
+</div>
+
+{{>include "./TokenizerPopover.hbs"}}

package/src/TokenizerPopover.hbs

@@ -1,52 +1,35 @@
 <ui5-responsive-popover
 	tokenizer-popover="true"
+	?open="{{open}}"
+	.opener="{{morePopoverOpener}}"
 	style={{styles.popover}}
-	class={{classes.popover}}
-	?content-only-on-desktop="{{noValueStatePopover}}"
-	hide-arrow
-	placement-type="Bottom"
-	horizontal-align="Left"
-	@before-close={{handleBeforeClose}}
-	@before-open="{{handleBeforeOpen}}"
+	content-only-on-desktop
+	prevent-focus-restore
+	?hide-arrow="{{hidePopoverArrow}}"
+	placement="Bottom"
+	horizontal-align="Start"
+	@ui5-before-close="{{handleBeforeClose}}"
+	@ui5-close="{{handleAfterClose}}"
+	@ui5-before-open="{{handleBeforeOpen}}"
 >
-	{{#unless _isPhone}}
-		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
-			{{#unless noValueStatePopover}}
-				<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
-					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-					{{#each valueStateMessageText}}
-						{{this}}
-					{{/each}}
-				</div>
-			{{/unless}}
-		</div>
-	{{/unless}}
-
 	{{#if _isPhone}}
-		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
-			<div class="row" style="{{styles.popoverHeaderTitle}}">
-				<ui5-title level="H5" class="ui5-responsive-popover-header-text">{{morePopoverTitle}}</ui5-title>
-				<ui5-button
-					class="ui5-responsive-popover-close-btn"
-					icon="decline"
-					design="Transparent"
-					@click="{{closeMorePopover}}"
+		<div slot="header" class="ui5-responsive-popover-header">
+			<div class="row">
+				<ui5-title
+					level="H5"
+					wrapping-type="None"
+					class="ui5-responsive-popover-header-text"
 				>
-				</ui5-button>
+					{{morePopoverTitle}}
+				</ui5-title>
 			</div>
 		</div>
-		{{#unless noValueStatePopover}}
-			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
-				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{#each valueStateMessageText}}
-					{{this}}
-				{{/each}}
-			</div>
-		{{/unless}}
 	{{/if}}
 	<ui5-list
 		class="ui5-tokenizer-list"
-		mode="Delete"
+		selection-mode={{_nMoreListMode}}
+		separators="None"
+		@keydown="{{_onPopoverListKeydown}}"
 		@ui5-item-delete={{itemDelete}}
 	>
 		{{#each _tokens}}
@@ -61,10 +44,14 @@
 	{{#if _isPhone}}
 		<div slot="footer" class="ui5-responsive-popover-footer">
 			<ui5-button
-				id="ui5-tokenizer-dialog-confirm-btn"
 				design="Emphasized"
-				@click="{{closeMorePopover}}"
+				data-ui5-tokenizer-dialog-ok-button
+				@click="{{handleDialogButtonPress}}"
 			>OK</ui5-button>
+			<ui5-button
+				design="Transparent"
+				@click="{{handleDialogButtonPress}}"
+			>Cancel</ui5-button>
 		</div>
 	{{/if}}
 </ui5-responsive-popover>

package/src/Toolbar.hbs

@@ -17,4 +17,6 @@
 		accessible-name="{{accInfo.overflowButton.accessibleName}}"
 		.accessibilityAttributes={{accInfo.overflowButton.accessibilityAttributes}}
 	></ui5-button>
-</div>
+</div>
+
+{{>include "./ToolbarPopover.hbs"}}

package/src/ToolbarPopover.hbs

@@ -1,9 +1,9 @@
 <ui5-popover
 	class="ui5-overflow-popover"
-	placement-type="Bottom"
-	horizontal-align="Right"
-	@ui5-after-close="{{onOverflowPopoverClosed}}"
-	@ui5-after-open="{{onOverflowPopoverOpened}}"
+	placement="Bottom"
+	horizontal-align="End"
+	@ui5-close="{{onOverflowPopoverClosed}}"
+	@ui5-open="{{onOverflowPopoverOpened}}"
 	hide-arrow
 >
 	<div class="ui5-overflow-list {{classes.overflow}}">