@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/src/DatePicker.hbs

@@ -1,45 +1,2 @@
-<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
-				slot="icon"
-				name="{{openIconName}}"
-				tabindex="-1"
-				accessible-name="{{openIconTitle}}"
-				accessible-role="button"
-				aria-hidden="{{_ariaHidden}}"
-				show-tooltip
-				@click="{{togglePicker}}"
-				input-icon
-				?pressed="{{_isPickerOpen}}"
-			></ui5-icon>
-		{{/unless}}
-	</ui5-input>
-
-	<slot name="formSupport"></slot>
-</div>
+{{>include "./DatePickerInput.hbs"}}
+{{>include "./DatePickerPopover.hbs"}}

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}}"
+                    class="inputIcon"
+                    ?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-view="{{onHeaderShowMonthPress}}"
+		@ui5-show-year-view="{{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/Form.hbs

@@ -0,0 +1,37 @@
+<div class="ui5-form-root" role="form" aria-labelledby="{{ariaLabelledByID}}">
+	{{#if hasHeader}}
+		<div class="ui5-form-header" part="header">
+			{{#if hasCustomHeader}}
+				<slot name="header"></slot>
+			{{else}}
+				<ui5-title id="{{_id}}-header-text" level="H4">{{ headerText }}</ui5-title>
+			{{/if}}
+		</div>
+	{{/if}}
+
+	<div class="ui5-form-layout" part="layout">
+			{{#if this.hasGroupItems}}
+					{{#each groupItemsInfo}}
+						<div class="ui5-form-column {{this.classes}}" part="column">
+							<div class="ui5-form-group">
+								{{#if this.groupItem.headerText}}
+									<div class="ui5-form-group-heading">
+										<ui5-title level="H6">{{ this.groupItem.headerText }}</ui5-title>
+									</div>
+								{{/if}}
+
+								<div class="ui5-form-group-layout">
+									<slot name="{{this.groupItem._individualSlot}}"></slot>
+								</div>
+							</div>
+						</div>
+					{{/each}}
+			{{else}}
+				{{#each itemsInfo}}
+					<div class="ui5-form-item {{this.classes}}">
+						<slot name="{{this.item._individualSlot}}"></slot>
+					</div>
+				{{/each}}
+			{{/if}}
+	</div>
+</div>

package/src/FormItem.hbs

@@ -0,0 +1,14 @@
+<div class="ui5-form-item-root">
+	<div class="ui5-form-item-layout" part="layout">
+		<div class="ui5-form-item-label" part="label">
+			<slot name="labelContent"></slot>
+		</div>
+		<div class="ui5-form-item-content" part="content">
+			{{#each content}}
+				<div class="ui5-form-item-content-child">
+					<slot name="{{this._individualSlot}}"></slot>
+				</div>
+			{{/each}}
+		</div>
+	</div>
+</div>

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,8 +40,8 @@
 			max="{{nativeInputAttributes.max}}"
 		/>
 
-		{{#if effectiveShowClearIcon}}
-			<div @click={{_clear}} @mousedown={{_iconMouseDown}} class="ui5-input-clear-icon-wrapper" input-icon tabindex="-1">
+		{{#if _effectiveShowClearIcon}}
+			<div @click={{_clear}} @mousedown={{_iconMouseDown}} class="ui5-input-clear-icon-wrapper inputIcon" tabindex="-1">
 				<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
 			</div>
 		{{/if}}
@@ -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/ListItemBase.hbs

@@ -0,0 +1,22 @@
+<li
+	part="native-li"
+	data-sap-focus-ref
+	tabindex="{{_effectiveTabIndex}}"
+	class="{{classes.main}}"
+	@focusin="{{_onfocusin}}"
+	@focusout="{{_onfocusout}}"
+	@keyup="{{_onkeyup}}"
+	@keydown="{{_onkeydown}}"
+	draggable="{{movable}}"
+	@click="{{_onclick}}"
+>
+	{{> listItemContent}}
+</li>
+
+{{#*inline "listItemContent"}}
+	<div part="content" id="{{_id}}-content" class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title"><slot></slot></span>
+		</div>
+	</div>
+{{/inline}}

package/src/ListItemGroup.hbs

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