@ui5/webcomponents 0.0.0-fb61e9889 → 0.0.0-fca1107e7

package/src/DateTimePickerPopover.hbs

@@ -4,7 +4,7 @@
 {{#*inline "header"}}
 	{{#if phone}}
 		<div class="ui5-dt-picker-header">
-			<ui5-segmented-button style="width: 8rem">
+			<ui5-segmented-button class="ui5-dt-picker-toggle-button">
 				<ui5-toggle-button key="Date" ?pressed="{{showDateView}}" @click="{{_dateTimeSwitchChange}}">{{btnDateLabel}}</ui5-toggle-button>
 				<ui5-toggle-button key="Time" ?pressed="{{showTimeView}}" @click="{{_dateTimeSwitchChange}}">{{btnTimeLabel}}</ui5-toggle-button>
 			</ui5-segmented-button>
@@ -18,14 +18,15 @@
 			class="ui5-dt-cal {{classes.dateTimeView}}"
 			id="{{_id}}-calendar"
 			primary-calendar-type="{{_primaryCalendarType}}"
+			secondary-calendar-type="{{secondaryCalendarType}}"
 			format-pattern="{{_formatPattern}}"
 			timestamp="{{_calendarTimestamp}}"
 			.selectionMode="{{_calendarSelectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			@ui5-selected-dates-change="{{onSelectedDatesChange}}"
-			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
-			@ui5-show-year-press="{{onHeaderShowYearPress}}"
+			@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-view="{{onHeaderShowYearPress}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"
 			._currentPicker="{{_calendarCurrentPicker}}"
 		>
@@ -38,20 +39,21 @@
 			<span class="ui5-dt-picker-separator"></span>
 		{{/unless}}
 
-		<ui5-time-selection
+		{{#if showTimeView}}
+			<ui5-time-selection-clocks
 				id="{{_id}}-time-sel"
 				class="ui5-dt-time {{classes.dateTimeView}}"
-				value="{{_timeSelectionValue}}"
 				format-pattern="{{_formatPattern}}"
-				._currentSlider="{{_currentTimeSlider}}"
+				value="{{_timeSelectionValue}}"
 				@ui5-change="{{onTimeSelectionChange}}"
-				@ui5-slider-change="{{onTimeSliderChange}}"
-		></ui5-time-selection>
+				._calendarType="{{_primaryCalendarType}}"
+			></ui5-time-selection-clocks>
+		{{/if}}
 	</div>
 {{/inline}}
 
 {{#*inline "footer"}}
-	<div slot="footer" class="ui5-dt-picker-footer">
+	<div slot="footer" class="ui5-dt-picker-footer {{classes.footer}}">
 		<ui5-button
 			id="ok"
 			class="ui5-dt-picker-action"

package/src/DayPicker.hbs

@@ -1,5 +1,5 @@
 <div
-	class="ui5-dp-root"
+	class="{{this.classes.root}}"
 	style="{{styles.wrapper}}"
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
@@ -23,10 +23,11 @@
 		</div>
 		{{#each _weeks}}
 			{{#if this.length}}
-				<div style="display: flex;" role="row">
+				<div class="ui5-dp-weeks-row" role="row">
 					{{#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/Dialog.hbs

@@ -2,31 +2,52 @@
 
 {{#*inline "beforeContent"}}
 	{{#if _displayHeader }}
-		<header
-			class="ui5-popup-header-root"
-			id="ui5-popup-header"
-			tabindex="{{_headerTabIndex}}"
-			@keydown="{{_onDragOrResizeKeyDown}}"
-			@mousedown="{{_onDragMouseDown}}">
-			{{#if header.length }}
-				<slot name="header"></slot>
-			{{else}}
-				<h2 id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</h2>
-			{{/if}}
+		<header>
+			<div
+				class="ui5-popup-header-root"
+				id="ui5-popup-header"
+				role="group"
+				aria-describedby={{effectiveAriaDescribedBy}}
+				aria-roledescription={{ariaRoleDescriptionHeaderText}}
+				tabindex="{{_headerTabIndex}}"
+				@keydown="{{_onDragOrResizeKeyDown}}"
+				@mousedown="{{_onDragMouseDown}}"
+				part="header"
+				state="{{this.state}}">
+				{{#if hasValueState}}
+				<ui5-icon class="ui5-dialog-value-state-icon" name="{{_dialogStateIcon}}"></ui5-icon>
+				{{/if}}
+				{{#if header.length }}
+					<slot name="header"></slot>
+				{{else}}
+					<h1 id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</h1>
+				{{/if}}
+
+				{{#if resizable}}
+					{{#if draggable}}
+					<span id="{{_id}}-descr" aria-hidden="true" class="ui5-hidden-text">{{ariaDescribedByHeaderTextDraggableAndResizable}}</span>
+					{{else}}
+					<span id="{{_id}}-descr" aria-hidden="true" class="ui5-hidden-text">{{ariaDescribedByHeaderTextResizable}}</span>
+					{{/if}}
+				{{else}}
+					{{#if draggable}}
+						<span id="{{_id}}-descr" aria-hidden="true" class="ui5-hidden-text">{{ariaDescribedByHeaderTextDraggable}}</span>
+					{{/if}}
+				{{/if}}
+			</div>
 		</header>
 	{{/if}}
 {{/inline}}
 
 {{#*inline "afterContent"}}
 	{{#if footer.length }}
-		<footer class="ui5-popup-footer-root">
+		<footer class="ui5-popup-footer-root" part="footer">
 			<slot name="footer"></slot>
 		</footer>
 	{{/if}}
-	{{#if resizable}}
+	{{#if _showResizeHandle }}
 		<ui5-icon
 			name="resize-corner"
-			dir="{{effectiveDir}}"
 			class="ui5-popup-resize-handle"
 			@mousedown="{{_onResizeMouseDown}}">
 		</ui5-icon>

package/src/DropIndicator.hbs

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

package/src/FileUploader.hbs

@@ -7,6 +7,8 @@
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@click="{{_onclick}}"
+	@dragover="{{_ondrag}}"
+	@drop="{{_ondrop}}"
 >
 	<div class="ui5-file-uploader-mask">
 		{{#unless hideInput}}

package/src/FileUploaderPopover.hbs

@@ -2,13 +2,15 @@
 	skip-registry-update
 	_disable-initial-focus
 	prevent-focus-restore
-	no-padding
 	hide-arrow
 	class="ui5-valuestatemessage-popover"
 	placement-type="Bottom"
 	horizontal-align="Left"
 >
 	<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+		{{#if _valueStateMessageInputIcon}}
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+		{{/if}}
 		{{> valueStateMessage}}
 	</div>
 </ui5-popover>

package/src/GroupHeaderListItem.hbs

@@ -1,5 +1,6 @@
-<li
-	tabindex="{{_tabIndex}}"
+<ul
+	part="native-li"
+	tabindex="{{forcedTabIndex}}"
 	class="ui5-ghli-root {{classes.main}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
@@ -7,9 +8,8 @@
 	aria-label="{{ariaLabelText}}"
 	aria-roledescription="{{groupHeaderText}}"
 	role="group"
-	style="list-style-type: none;"
 >
 	<div id="{{_id}}-content" class="ui5-li-content">
 		<span class="ui5-ghli-title"><slot></slot></span>
 	</div>
-</li>
+</ul>

package/src/Icon.hbs

@@ -1,8 +1,9 @@
 <svg
 	class="ui5-icon-root"
-	tabindex="{{tabIndex}}"
+	part="root"
+	tabindex="{{_tabIndex}}"
 	dir="{{_dir}}"
-	viewBox="0 0 512 512"
+	viewBox="{{viewBox}}"
 	role="{{effectiveAccessibleRole}}"
 	focusable="false"
 	preserveAspectRatio="xMidYMid meet"
@@ -13,13 +14,18 @@
 	@focusout={{_onfocusout}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
-	@click={{_onclick}}
 >
 	{{#if hasIconTooltip}}
 		<title id="{{_id}}-tooltip">{{effectiveAccessibleName}}</title>
 	{{/if}}
 
 	<g role="presentation">
-		<path d="{{pathData}}"/>
+		{{#if customSvg}}
+			{{customSvg}}
+		{{/if}}
+
+		{{#each pathData}}
+			<path d="{{this}}"></path>
+		{{/each}}
 	</g>
 </svg>

package/src/Input.hbs

@@ -1,5 +1,5 @@
 <div
-	class="ui5-input-root"
+	class="ui5-input-root ui5-input-focusable-element"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 >
@@ -14,12 +14,12 @@
 			?inner-input-with-icon="{{icon.length}}"
 			?disabled="{{disabled}}"
 			?readonly="{{_readonly}}"
-			.value="{{value}}"
+			.value="{{_innerValue}}"
 			placeholder="{{_placeholder}}"
 			maxlength="{{maxlength}}"
 			role="{{accInfo.input.role}}"
 			aria-controls="{{accInfo.input.ariaControls}}"
-			?aria-invalid="{{accInfo.input.ariaInvalid}}"
+			aria-invalid="{{accInfo.input.ariaInvalid}}"
 			aria-haspopup="{{accInfo.input.ariaHasPopup}}"
 			aria-describedby="{{accInfo.input.ariaDescribedBy}}"
 			aria-roledescription="{{accInfo.input.ariaRoledescription}}"
@@ -39,6 +39,12 @@
 			max="{{nativeInputAttributes.max}}"
 		/>
 
+		{{#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>
+		{{/if}}
+
 		{{#if icon.length}}
 			<div class="ui5-input-icon-root">
 				<slot name="icon"></slot>

package/src/InputPopover.hbs

@@ -1,5 +1,6 @@
 {{#if showSuggestions}}
 	<ui5-responsive-popover
+		class="{{classes.popover}}"
 		hide-arrow
 		_disable-initial-focus
 		placement-type="Bottom"
@@ -22,29 +23,31 @@
 				</ui5-button>
 			</div>
 			<div class="row">
-				<div class="input-root-phone">
-					<input
+				<div class="input-root-phone native-input-wrapper">
+					<ui5-input
 						class="ui5-input-inner-phone"
 						type="{{inputType}}"
 						.value="{{value}}"
-						inner-input
+						?show-clear-icon={{showClearIcon}}
 						placeholder="{{placeholder}}"
-						@input="{{_handleInput}}"
-						@change="{{_handleChange}}"
-					/>
+						@ui5-input="{{_handleInput}}"
+						@ui5-change="{{_handleChange}}"
+					></ui5-input>
 				</div>
 			</div>
-			{{#if hasValueStateMessage}}
-				<div class="row {{classes.popoverValueState}}" style="{{styles.suggestionPopoverHeader}}">
-					{{> valueStateMessage}}
-				</div>
-			{{/if}}
 		</div>
+		{{#if hasValueStateMessage}}
+			<div class="{{classes.popoverValueState}}" style="{{styles.suggestionPopoverHeader}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+					{{> valueStateMessage}}
+			</div>
+		{{/if}}
 	{{/if}}
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateMessage}}
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.suggestionPopoverHeader}}>
+			<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}}
 			</div>
 		{{/if}}
@@ -67,13 +70,13 @@
 			skip-registry-update
 			_disable-initial-focus
 			prevent-focus-restore
-			no-padding
 			hide-arrow
 			class="ui5-valuestatemessage-popover"
 			placement-type="Bottom"
-			horizontal-align="Left"
+			horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 		>
 			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		</ui5-popover>
@@ -90,18 +93,18 @@
 {{/inline}}
 
 {{#*inline "suggestionsList"}}
-	<ui5-list separators="{{suggestionSeparators}}">
-		{{#each suggestionsTexts}}
+	<ui5-list separators="{{suggestionSeparators}}" @mousedown="{{onItemMouseDown}}" mode="SingleSelect">
+		{{#each suggestionObjects}}
 			{{#if groupItem}}
 				<ui5-li-groupheader data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-groupheader>
 			{{else}}
 				<ui5-li-suggestion-item
+					wrapping-type="Normal"
 					image="{{this.image}}"
 					icon="{{this.icon}}"
 					additional-text="{{this.additionalText}}"
 					type="{{this.type}}"
 					additional-text-state="{{this.additionalTextState}}"
-					@ui5-_item-press="{{ fnOnSuggestionItemPress }}"
 					data-ui5-key="{{key}}"
 				>
 					{{{ this.text }}}

package/src/Label.hbs

@@ -1,13 +1,14 @@
 <label
-		class="ui5-label-root"
-		dir="{{effectiveDir}}"
-		@click={{_onclick}}
-		for="{{for}}"
+	class="ui5-label-root"
+	@click={{_onclick}}
+	>
+	<span class="ui5-label-text-wrapper">
+		<bdi id="{{_id}}-bdi"><slot></slot></bdi>
+	</span>
+	<span 
+		aria-hidden="true" 
+		class="ui5-label-required-colon"
+		data-colon="{{_colonSymbol}}"
 	>
-	<span class="{{classes.textWrapper}}">
-		<bdi id="{{_id}}-bdi">
-			<slot></slot>
-		</bdi>
 	</span>
-	<span class="ui5-label-required-colon"></span>
 </label>

package/src/Link.hbs

@@ -4,10 +4,12 @@
 	href="{{parsedRef}}"
 	target="{{target}}"
 	rel="{{_rel}}"
-	tabindex="{{tabIndex}}"
+	tabindex="{{effectiveTabIndex}}"
+	title="{{title}}"
 	?disabled="{{disabled}}"
 	aria-label="{{ariaLabelText}}"
-	aria-haspopup="{{ariaHaspopup}}"
+	aria-haspopup="{{_hasPopup}}"
+	aria-expanded="{{accessibilityAttributes.expanded}}"
 	@focusin={{_onfocusin}}
 	@focusout={{_onfocusout}}
 	@click={{_onclick}}

package/src/List.hbs

@@ -1,10 +1,23 @@
 <div
-	class="ui5-list-root"
+	class="{{classes.root}}"
 	@focusin="{{_onfocusin}}"
 	@keydown="{{_onkeydown}}"
+	@dragenter="{{_ondragenter}}"
+	@dragover="{{_ondragover}}"
+	@drop="{{_ondrop}}"
+	@dragleave="{{_ondragleave}}"
+	@ui5-_press={{onItemPress}}
+	@ui5-close={{onItemClose}}
+	@ui5-toggle={{onItemToggle}}
+	@ui5-_request-tabindex-change={{onItemTabIndexChange}}
+	@ui5-_focused={{onItemFocused}}
+	@ui5-_forward-after={{onForwardAfter}}
+	@ui5-_forward-before={{onForwardBefore}}
+	@ui5-_selection-requested={{onSelectionRequested}}
+	@ui5-_focus-requested={{onFocusRequested}}
 >
 	<div class="ui5-list-scroll-container">
-		<!-- header -->
+		{{! header}}
 		{{#if header.length}}
 			<slot name="header" />
 		{{/if}}
@@ -15,7 +28,7 @@
 		{{/if}}
 
 		{{#if hasData}}
-			<div id="{{_id}}-before" tabindex="0" class="ui5-list-focusarea"></div>
+			<div id="{{_id}}-before" tabindex="0" role="none" class="ui5-list-focusarea"></div>
 		{{/if}}
 
 		<span id="{{_id}}-modeLabel" class="ui5-hidden-text">{{ariaLabelModeText}}</span>
@@ -23,13 +36,14 @@
 		<ul id="{{_id}}-listUl"
 			class="ui5-list-ul"
 			role="{{accessibleRole}}"
-			aria-label="{{ariaLabelТxt}}"
+			aria-label="{{ariaLabelTxt}}"
 			aria-labelledby="{{ariaLabelledBy}}"
+			aria-roledescription="{{accessibleRoleDescription}}"
 		>
 			<slot></slot>
 
 			{{#if showNoDataText}}
-				<li id="{{_id}}-nodata" class="ui5-list-nodata" tabindex="{{noDataTabIndex}}" style="list-style-type: none;">
+				<li id="{{_id}}-nodata" class="ui5-list-nodata">
 					<div id="{{_id}}-nodata-text" class="ui5-list-nodata-text">
 						{{noDataText}}
 					</div>
@@ -48,7 +62,7 @@
 		{{/if}}
 
 		{{#if hasData}}
-			<div id="{{_id}}-after" tabindex="0" class="ui5-list-focusarea"></div>
+			<div id="{{_id}}-after" tabindex="0" role="none" class="ui5-list-focusarea"></div>
 		{{/if}}
 
 		<span tabindex="-1" aria-hidden="true" class="ui5-list-end-marker"></span>
@@ -60,20 +74,26 @@
 				delay="{{busyDelay}}"
 				active
 				size="Medium"
-				class="ui5-list-busy-ind" 
+				class="ui5-list-busy-ind"
 				style="{{styles.busyInd}}"
 				data-sap-focus-ref
 			></ui5-busy-indicator>
 		</div>
 	{{/if}}
+
+	<ui5-drop-indicator
+		orientation="Horizontal"
+		.ownerReference="{{this}}"
+	></ui5-drop-indicator>
 </div>
 
 
 {{#*inline "moreRow"}}
 	<div growing-button>
-		<div 
+		<div
 			tabindex="0"
 			role="button"
+			id="{{_id}}-growing-btn"
 			aria-labelledby="{{_id}}-growingButton-text"
 			?active="{{_loadMoreActive}}"
 			@click="{{_onLoadMoreClick}}"
@@ -86,4 +106,4 @@
 			<span id="{{_id}}-growingButton-text" growing-button-text>{{_growingButtonText}}</span>
 		</div>
 	</div>
-{{/inline}}
+{{/inline}}

package/src/ListItem.hbs

@@ -1,7 +1,8 @@
 <li
-	tabindex="{{tabIndex}}"
+	part="native-li"
+	data-sap-focus-ref
+	tabindex="{{_effectiveTabIndex}}"
 	class="{{classes.main}}"
-	dir="{{effectiveDir}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@keyup="{{_onkeyup}}"
@@ -11,16 +12,23 @@
 	@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="{{_id}}-invisibleText {{_id}}-content"
-	aria-disabled="{{ariaDisabled}}"
-	style="list-style-type: none;"
+	aria-labelledby="{{_accessibleNameRef}}"
+	aria-disabled="{{_ariaDisabled}}"
+	aria-selected="{{_accInfo.ariaSelected}}"
+	aria-checked="{{_accInfo.ariaChecked}}"
+	aria-owns="{{_accInfo.ariaOwns}}"
 >
 		{{> listItemPreContent}}
 
@@ -28,7 +36,11 @@
 			{{> selectionElement}}
 		{{/if}}
 
-		<div id="{{_id}}-content" class="ui5-li-content">
+		{{#if _hasHighlightColor}}
+			<div class="ui5-li-highlight"></div>
+		{{/if}}
+
+		<div part="content" id="{{_id}}-content" class="ui5-li-content">
 			{{> imageBegin}}
 			{{> iconBegin}}
 			{{> listItemContent}}
@@ -38,6 +50,7 @@
 		{{#if typeDetail}}
 			<div class="ui5-li-detailbtn">
 				<ui5-button
+					part="detail-button"
 					design="Transparent"
 					icon="edit"
 					@click="{{onDetailClick}}"
@@ -45,6 +58,15 @@
 			</div>
 		{{/if}}
 
+		{{#if typeNavigation}}
+			<ui5-icon name ="slim-arrow-right"></ui5-icon>
+		{{/if}}
+
+		{{#if navigated}}
+			<div class="ui5-li-navigated"></div>
+		{{/if}}
+
+
 		{{#if placeSelectionElementAfter}}
 			{{> selectionElement}}
 		{{/if}}
@@ -53,6 +75,7 @@
 		<span id="{{_id}}-invisibleText-describedby" class="ui5-hidden-text">{{_accInfo.ariaSelectedText}}</span>
 </li>
 
+
 {{#*inline "listItemPreContent"}}{{/inline}}
 {{#*inline "listItemContent"}}{{/inline}}
 {{#*inline "imageBegin"}}{{/inline}}
@@ -62,6 +85,7 @@
 {{#*inline "selectionElement"}}
 	{{#if modeSingleSelect}}
 		<ui5-radio-button
+				part="radio"
 				?disabled="{{isInactive}}"
 				accessible-name="{{_accInfo.ariaLabelRadioButton}}"
 				tabindex="-1"
@@ -74,19 +98,25 @@
 
 	{{#if modeMultiSelect}}
 		<ui5-checkbox
+				part="checkbox"
 				?disabled="{{isInactive}}"
+				?indeterminate={{indeterminate}}
 				tabindex="-1"
 				id="{{_id}}-multiSelectionElement"
 				class="ui5-li-multisel-cb"
 				?checked="{{selected}}"
-				aria-label="{{_accInfo.ariaLabel}}"
+				accessible-name="{{_accInfo.ariaLabel}}"
 				@click="{{onMultiSelectionComponentPress}}">
 		</ui5-checkbox>
 	{{/if}}
 
 	{{#if renderDeleteButton}}
 		<div class="ui5-li-deletebtn">
+			{{#if hasDeleteButtonSlot}}
+				<slot name="deleteButton"></slot>
+			{{else}}
 			<ui5-button
+				part="delete-button"
 				tabindex="-1"
 				data-sap-no-tab-ref
 				id="{{_id}}-deleteSelectionElement"
@@ -94,8 +124,9 @@
 				icon="decline"
 				?disabled="{{disableDeleteButton}}"
 				@click="{{onDelete}}"
-				title="{{deleteText}}"
+				tooltip="{{deleteText}}"
 			></ui5-button>
+			{{/if}}
 		</div>
 	{{/if}}