@ui5/webcomponents 0.0.0-db2be6526 → 0.0.0-db622d8a8

package/src/ResponsivePopover.hbs

@@ -1,19 +1,22 @@
 {{#if _isPhone}}
 	<ui5-dialog
-		?with-padding={{withPadding}}
+		accessible-name={{accessibleName}}
+		accessible-name-ref={{accessibleNameRef}}
+		accessible-role={{accessibleRole}}
 		stretch
 		_disable-initial-focus
-		@ui5-before-open="{{_propagateDialogEvent}}"
-		@ui5-after-open="{{_afterDialogOpen}}"
+		@ui5-before-open="{{_beforeDialogOpen}}"
+		@ui5-after-open="{{_propagateDialogEvent}}"
 		@ui5-before-close="{{_propagateDialogEvent}}"
 		@ui5-after-close="{{_afterDialogClose}}"
+		exportparts="content, header, footer"
 	>
 		{{!-- forward slot header to inner dialog slot header --}}
 		{{#unless _hideHeader}}
 			{{#if header.length}}
 				<slot slot="header" name="header"></slot>
 			{{else}}
-				<header class="{{classes.header}}">
+				<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>
 					{{/if}}
@@ -26,7 +29,7 @@
 						>
 						</ui5-button>
 					{{/unless}}
-				</header>
+				</div>
 			{{/if}}
 		{{/unless}}
 

package/src/SegmentedButton.hbs

@@ -1,14 +1,15 @@
 <ul
 	@click="{{_onclick}}"
+	@mousedown="{{_onmousedown}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmented-button-root"
 	role="listbox"
-	dir="{{effectiveDir}}"
 	aria-multiselectable="true"
 	aria-describedby="{{_id}}-invisibleText"
 	aria-roledescription={{ariaDescription}}
+	aria-label={{accessibleName}}
 >
 	<slot></slot>
 

package/src/SegmentedButtonItem.hbs

@@ -8,7 +8,6 @@
 		aria-disabled="{{disabled}}"
 		data-sap-focus-ref
 	{{> ariaPressed}}
-		dir="{{effectiveDir}}"
 		@focusout={{_onfocusout}}
 		@focusin={{_onfocusin}}
 		@click={{_onclick}}
@@ -20,7 +19,7 @@
 		@touchend="{{_ontouchend}}"
 		tabindex={{tabIndexValue}}
 		aria-label="{{ariaLabelText}}"
-		title="{{accInfo.title}}"
+		title="{{tooltip}}"
 >
 	{{#if icon}}
 		<ui5-icon

package/src/Select.hbs

@@ -1,6 +1,5 @@
 <div
-	class="ui5-select-root"
-	dir="{{effectiveDir}}"
+	class="ui5-select-root ui5-input-focusable-element"
 	id="{{_id}}-select"
 	@click="{{_onclick}}"
 >
@@ -9,12 +8,11 @@
 			aria-hidden="true"
 			class="ui5-select-option-icon"
 			name="{{selectedOptionIcon}}"
-			dir="{{effectiveDir}}"
 		></ui5-icon>
 	{{/if}}
 	<div class="ui5-select-label-root"
 		data-sap-focus-ref
-		tabindex="{{tabIndex}}"
+		tabindex="{{_effectiveTabIndex}}"
 		role="combobox"
 		aria-haspopup="listbox"
 		aria-label="{{ariaLabelText}}"
@@ -22,6 +20,7 @@
 		aria-disabled="{{isDisabled}}"
 		aria-required="{{required}}"
 		aria-expanded="{{_isPickerOpen}}"
+		aria-roledescription="{{_ariaRoleDescription}}"
 		@keydown="{{_onkeydown}}"
 		@keypress="{{_handleKeyboardNavigation}}"
 		@keyup="{{_onkeyup}}"
@@ -35,7 +34,6 @@
 		name="slim-arrow-down"
 		input-icon
 		?pressed="{{_iconPressed}}"
-		dir="{{effectiveDir}}"
 	></ui5-icon>
 
 	{{#if hasValueState}}

package/src/SelectPopover.hbs

@@ -3,14 +3,16 @@
 		hide-arrow
 		_disable-initial-focus
 		placement-type="Bottom"
-		horizontal-align="Stretch"
+		class="ui5-select-popover {{classes.popover}}"
+		horizontal-align="Left"
 		@ui5-after-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
 		@ui5-after-close="{{_afterClose}}"
 		@keydown="{{_onkeydown}}"
+		style={{styles.responsivePopover}}
 	>
 		{{#if _isPhone}}
-			<div slot="header" class="ui5-responsive-popover-header">
+			<div class="ui5-responsive-popover-header">
 				<div class="row">
 					<span>{{_headerTitleText}}</span>
 					<ui5-button
@@ -30,7 +32,8 @@
 		{{/if}}
 		{{#unless _isPhone}}
 			{{#if hasValueStateText}}
-				<div slot="header" class="ui5-select-value-state-popover-padding {{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+				<div class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 					{{> valueStateMessage}}
 				</div>
 			{{/if}}
@@ -40,7 +43,7 @@
 			mode="SingleSelectAuto"
 			separators="None"
 			@mousedown="{{_itemMousedown}}"
-			@ui5-item-press="{{_handleItemPress}}"
+			@ui5-item-click="{{_handleItemPress}}"
 		>
 			{{#each _syncedOptions}}
 				<ui5-li
@@ -48,6 +51,8 @@
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
 					?focused="{{this._focused}}"
+					title="{{this.title}}"
+					additional-text="{{this.additionalText}}"
 					?aria-selected="{{this.selected}}"
 					data-ui5-stable="{{this.stableDomRef}}"
 				>
@@ -63,13 +68,13 @@
 		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}}">
+		<div class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>

package/src/Slider.hbs

@@ -22,21 +22,21 @@
 		@focusout="{{_onfocusout}}"
 		@focusin="{{_onfocusin}}"
 		role="slider"
-		tabindex="{{tabIndex}}"
+		tabindex="{{_tabIndex}}"
 		aria-orientation="horizontal"
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{value}}"
-		aria-labelledby="{{_id}}-sliderDesc"
+		aria-labelledby="{{_ariaLabelledByHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 		data-sap-focus-ref
 		part="handle"
 	>
-	<ui5-icon name="source-code" slider-icon></ui5-icon>
+			<ui5-icon name="direction-arrows" part="icon-slider" slider-icon></ui5-icon>
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
 				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>
 			</div>
 		{{/if}}
 	</div>
-{{/inline}}
+{{/inline}}

package/src/SliderBase.hbs

@@ -1,19 +1,27 @@
 <div
-	class="ui5-slider-root"
+	class="ui5-slider-root {{classes.root}}"
 	@mousedown="{{_onmousedown}}"
 	@touchstart="{{_ontouchstart}}"
 	@mouseover="{{_onmouseover}}"
 	@mouseout="{{_onmouseout}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
-	dir="{{effectiveDir}}"
+	part="root-container"
 >
 	{{> handlesAriaText}}
 
 	<div class="ui5-slider-inner">
 		{{#if step}}
 			{{#if showTickmarks}}
-				<div class="ui5-slider-tickmarks" style="{{styles.tickmarks}}"></div>
+				<ul class="ui5-slider-tickmarks">
+					{{#each tickmarksObject}}
+						{{#if this}}
+							<li class="ui5-slider-tickmark ui5-slider-tickmark-in-range"></li>
+						{{else}}
+							<li class="ui5-slider-tickmark"></li>
+						{{/if}}
+					{{/each}}
+				</ul>
 				{{#if labelInterval}}
 					<ul class="ui5-slider-labels {{classes.labelContainer}}" style="{{styles.labelContainer}}">
 						{{#each _labels}}
@@ -29,6 +37,7 @@
 		{{> handles}}
 	</div>
 
+	<span id="{{_id}}-accName" class="ui5-hidden-text">{{accessibleName}}</span>
 	<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
 </div>
 

package/src/SplitButton.hbs

@@ -0,0 +1,55 @@
+<div
+	class="ui5-split-button-root"
+	role="group"
+	tabindex={{_tabIndex}}
+	aria-labelledby="{{_id}}-invisibleTextDefault {{_id}}-invisibleText"
+	@focusout={{_onFocusOut}}
+	@focusin={{_onFocusIn}}
+	@keydown={{_onKeyDown}}
+	@keyup={{_onKeyUp}}
+>
+
+	<ui5-button
+		class="ui5-split-text-button"
+		design="{{design}}"
+		dir={{effectiveDir}}
+		icon="{{_textButtonIcon}}"
+		tabindex="-1"
+		?disabled="{{disabled}}"
+		?active="{{_textButtonActive}}"
+		@click="{{_fireClick}}"
+		@touchstart={{_textButtonPress}}
+		@mousedown={{_textButtonPress}}
+		@mouseup={{_textButtonRelease}}
+		@focusin={{_setTabIndexValue}}
+		@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="{{_arrowButtonActive}}"
+			aria-expanded="{{accessibilityInfo.ariaExpanded}}"
+			aria-haspopup="{{accessibilityInfo.ariaHaspopup}}"
+			@click="{{_fireArrowClick}}"
+			@focusin={{_setTabIndexValue}}
+			@focusout={{_onFocusOut}}
+		>
+		</ui5-button>
+	</div>
+
+	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accessibilityInfo.description}} {{accessibilityInfo.keyboardHint}} {{accessibleName}}</span>
+	<span id="{{_id}}-invisibleTextDefault" class="ui5-hidden-text">{{textButtonAccText}}</span>
+
+</div>

package/src/StandardListItem.hbs

@@ -24,21 +24,27 @@
 {{/inline}}
 
 {{#*inline "imageBegin"}}
-	{{#if displayImage}}
-		<ui5-avatar shape="Square" class="ui5-li-img">
-			<img src="{{image}}" class="ui5-li-img-inner" />
-		</ui5-avatar>
+	{{#if hasImageContent}}
+		<div class="ui5-li-imgContent" >
+			<slot name="imageContent"></slot>
+		</div>
+	{{else}}
+		{{#if displayImage}}
+			<ui5-avatar shape="Square" class="ui5-li-img">
+				<img src="{{image}}" class="ui5-li-img-inner" />
+			</ui5-avatar>
+		{{/if}}
 	{{/if}}
 {{/inline}}
 
 {{#*inline "iconBegin"}}
 	{{#if displayIconBegin}}
-		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon"></ui5-icon>
+		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
 	{{/if}}
 {{/inline}}
 
 {{#*inline "iconEnd"}}
 	{{#if displayIconEnd}}
-		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon"></ui5-icon>
+		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
 	{{/if}}
 {{/inline}}

package/src/StepInput.hbs

@@ -5,11 +5,13 @@
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 >
-	<!-- Decrement Icon -->
+	{{! Decrement Icon}}
+	{{#unless readonly}}
 	<div
 		class="ui5-step-icon ui5-step-dec"
 		title="{{decIconTitle}}"
 	>
+
 		<ui5-icon
 			id="{{_id}}-dec"
 			name="{{decIconName}}"
@@ -25,8 +27,9 @@
 			?clickable="{{_decIconClickable}}"
 		></ui5-icon>
 	</div>
+	{{/unless}}
 
-	<!-- INPUT -->
+	{{! INPUT}}
 	<ui5-input
 			id="{{_id}}-inner"
 			class="ui5-step-input-input"
@@ -51,7 +54,8 @@
 
 	</ui5-input>
 
-	<!-- Increment Icon -->
+	{{! Increment Icon}}
+	{{#unless readonly}}
 	<div
 		class="ui5-step-icon ui5-step-inc"
 		title="{{incIconTitle}}"
@@ -71,7 +75,7 @@
 			?clickable="{{_incIconClickable}}"
 		></ui5-icon>
 	</div>
-
+	{{/unless}}
 	<slot name="formSupport"></slot>
 
 </div>

package/src/Switch.hbs

@@ -1,31 +1,42 @@
 <div
 	class="ui5-switch-root {{classes.main}}"
-	role="checkbox"
+	role="switch"
+	aria-label="{{ariaLabelText}}"
 	aria-checked="{{checked}}"
-	aria-disabled="{{ariaDisabled}}"
-	aria-labelledby="{{_id}}-hiddenText"
+	aria-disabled="{{effectiveAriaDisabled}}"
 	@click="{{_onclick}}"
 	@keyup="{{_onkeyup}}"
 	@keydown="{{_onkeydown}}"
-	tabindex="{{tabIndex}}"
+	tabindex="{{effectiveTabIndex}}"
 	dir="{{effectiveDir}}"
+	title="{{tooltip}}"
 >
 	<div class="ui5-switch-inner">
 		<div class="ui5-switch-track" part="slider">
 			<div class="ui5-switch-slider">
 				{{#if graphical}}
 					<span class="ui5-switch-text ui5-switch-text--on">
-						<ui5-icon name="accept" dir="ltr" class="ui5-switch-icon-on"></ui5-icon>
+						<ui5-icon name="accept" class="ui5-switch-icon-on"></ui5-icon>
 					</span>
 					<span class="ui5-switch-text ui5-switch-text--off">
 						<ui5-icon name="decline" class="ui5-switch-icon-off"></ui5-icon>
 					</span>
 				{{else}}
-					<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
-					<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{#if hasNoLabel}}
+						<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">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-off" ></ui5-icon>
+						</span>
+					{{else}}
+						<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
+						<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{/if}}
 				{{/if}}
 
 				<span class="ui5-switch-handle" part="handle">
+					{{!-- this icon is used in the sap_horizon_exp theme --}}
 					<ui5-icon
 						name="{{sapNextIcon}}"
 						class="ui5-switch-handle-icon"
@@ -36,5 +47,4 @@
 	</div>
 
 	<input type='checkbox' ?checked="{{checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
-	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{hiddenText}}</span>
 </div>

package/src/Tab.hbs

@@ -1,3 +1,9 @@
-<div id="{{_id}}" class="ui5-tab-root">
-	<slot></slot>
+<div id="{{_id}}"
+	class="ui5-tab-root"
+	data-ui5-stable="{{this.stableDomRef}}">
+	<slot name="{{this._defaultSlotName}}"></slot>
+
+	{{#each tabs}}
+	<slot name="{{this._effectiveSlotName}}"></slot>
+	{{/each}}
 </div>

package/src/TabContainer.hbs

@@ -1,88 +1,87 @@
-<div
-	class="{{classes.root}}"
-	dir="{{effectiveDir}}"
->
+<div class="{{classes.root}}">
 	{{#if tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/if}}
+	<div
+		class="{{classes.header}}"
+		id="{{_id}}-header"
+		@focusin="{{_onHeaderFocusin}}"
+	>
+		<div
+			class="ui5-tc__overflow ui5-tc__overflow--start"
+			@click="{{_onOverflowClick}}"
+			@keydown="{{_onOverflowKeyDown}}"
+			hidden
+		>
+			{{#if startOverflowButton.length}}
+				<slot name="startOverflowButton"></slot>
+			{{else}}
+				<ui5-button
+					icon="{{overflowMenuIcon}}"
+					data-ui5-stable="overflow-start"
+					tabindex="-1"
+					tooltip="{{overflowMenuTitle}}"
+					aria-haspopup="menu"
+					icon-end>{{this._startOverflowText}}</ui5-button>
+			{{/if}}
+		</div>
 
-	<div class="{{classes.header}}" id="{{_id}}-header">
-		<div class="{{classes.headerInnerContainer}}">
-			<div class="{{classes.headerBackArrow}}">
-				<ui5-button @click="{{_onHeaderBackArrowClick}}"
-							icon="slim-arrow-left"
-							design="Transparent"
-							tabindex="-1"
-							title="{{previousIconACCName}}"></ui5-button>
-			</div>
-			<!-- tab items -->
-			<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
-				<ul
-					role="tablist"
-					@focusin={{_onTablistFocusin}}
-					class="{{classes.headerList}}"
-					@click="{{_onHeaderClick}}"
-					@keydown="{{_onHeaderKeyDown}}"
-					@keyup="{{_onHeaderKeyUp}}"
-				>
-					{{#each items}}
-						{{#unless this.isSeparator}}
-							{{this.stripPresentation}}
-						{{/unless}}
-						{{#if this.isSeparator}}
-							<li id="{{this._id}}" role="separator" class="{{../classes.separator}}"></li>
-						{{/if}}
-					{{/each}}
-				</ul>
-			</div>
-			<div class="{{classes.headerForwardArrow}}">
-			<ui5-button @click="{{_onHeaderForwardArrowClick}}"
-						icon="slim-arrow-right"
-						design="Transparent"
-						tabindex="-1"
-						title="{{nextIconACCName}}"></ui5-button>
+		<div
+			id="{{_id}}-tabStrip"
+			class="{{classes.tabStrip}}"
+			role="tablist"
+			aria-describedby="{{tablistAriaDescribedById}}"
+			@click="{{_onTabStripClick}}"
+			@keydown="{{_onTabStripKeyDown}}"
+			@keyup="{{_onTabStripKeyUp}}"
+		>
+			{{#each items}}
+				{{this.stripPresentation}}
+			{{/each}}
 		</div>
+
+		<div
+			class="ui5-tc__overflow ui5-tc__overflow--end"
+			@click="{{_onOverflowClick}}"
+			@keydown="{{_onOverflowKeyDown}}"
+			hidden
+		>
+			{{#if overflowButton.length}}
+				<slot name="overflowButton"></slot>
+			{{else}}
+				<ui5-button
+					icon="{{overflowMenuIcon}}"
+					data-ui5-stable="overflow-end"
+					tabindex="-1"
+					tooltip="{{overflowMenuTitle}}"
+					aria-haspopup="menu"
+					icon-end>{{this._endOverflowText}}</ui5-button>
+			{{/if}}
 		</div>
-		<!-- overflow button -->
-		{{#if shouldShowOverflow}}
-			<div
-				class="ui-tc__overflowButton"
-				@click="{{_onOverflowButtonClick}}"
-			>
-				{{#if overflowButton.length}}
-					<slot name="overflowButton"></slot>
-				{{else}}
-					<ui5-button
-						icon="{{overflowMenuIcon}}"
-						design="Transparent"
-						tabindex="-1"
-						title="{{overflowMenuTitle}}"
-						aria-haspopup="true"></ui5-button>
-				{{/if}}
-			</div>
-		{{/if}}
 	</div>
 
 	{{#unless tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/unless}}
 
+	{{#if hasSubTabs}}
+		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
+	{{/if}}
+
 </div>
 
 {{#*inline "contentArea"}}
-	<div class="{{classes.content}}">
-		{{#each items}}
-			{{#unless this.isSeparator}}
-				<div
-					class="ui5-tc__contentItem"
-					id="ui5-tc-contentItem-{{this._posinset}}"
-					?hidden="{{this.effectiveHidden}}"
-					role="tabpanel"
-					aria-labelledby="{{this._id}}"
-				>
-					<slot name="{{this._individualSlot}}"></slot>
-				</div>
-			{{/unless}}
-		{{/each}}
+	<div class="{{classes.content}}" part="content">
+		<div
+			class="ui5-tc__contentItem"
+			id="ui5-tc-content"
+			?hidden="{{this._selectedTab.effectiveHidden}}"
+			role="tabpanel"
+			aria-labelledby="{{this._selectedTab._id}}"
+		>
+			{{#each items}}
+				<slot name="{{this._effectiveSlotName}}"></slot>
+			{{/each}}
+		</div>
 	</div>
 {{/inline}}

package/src/TabContainerPopover.hbs

@@ -3,21 +3,19 @@
 	horizontal-align="Right"
 	placement-type="Bottom"
 	content-only-on-desktop
-	with-padding
 	hide-arrow
 	_hide-header
+	class="ui5-tab-container-responsive-popover"
 >
-	<ui5-list @ui5-item-press="{{_onOverflowListItemSelect}}">
-		{{#each items}}
-			{{#unless this.isSeparator}}
-				{{this.overflowPresentation}}
-			{{/unless}}
+	<ui5-list mode="SingleSelect" separators="None" @ui5-item-click="{{_onOverflowListItemClick}}">
+		{{#each _overflowItems}}
+			{{overflowPresentation}}
 		{{/each}}
 	</ui5-list>
 	<div slot="footer" class="ui5-responsive-popover-footer">
 		<ui5-button
 			design="Transparent"
 			@click="{{_closeRespPopover}}"
-		>Cancel</ui5-button>
+		>{{popoverCancelButtonText}}</ui5-button>
 	</div>
-</ui5-responsive-popover>
+</ui5-responsive-popover>

package/src/TabInOverflow.hbs

@@ -1,22 +1,32 @@
 <ui5-li-custom
-	id="{{this._id}}"
+	id="{{this._id}}-li"
 	class="{{this.overflowClasses}}"
 	type="{{this.overflowState}}"
-	?selected="{{this.effectiveSelected}}"
-	?disabled="{{this.effectiveDisabled}}"
 	aria-disabled="{{this.effectiveDisabled}}"
 	aria-selected="{{this.effectiveSelected}}"
-	aria-labelledby="{{this.ariaLabelledBy}}"
+	._realTab="{{this}}"
+	style="{{this._style}}"
 >
-	<div class="ui5-tab-overflow-itemContent">
-		{{#if this.icon}}
-			<ui5-icon name="{{this.icon}}"></ui5-icon>
-		{{/if}}
-
-		{{this.text}}
-
-		{{#if this.additionalText}}
-			({{this.additionalText}})
-		{{/if}}
+	<div class="ui5-tab-overflow-itemContent-wrapper">
+		<div class="ui5-tab-overflow-itemContent">
+			{{#if this.semanticIconName}}
+				<ui5-icon class="{{this.semanticIconClasses}}" name="{{this.semanticIconName}}"></ui5-icon>
+			{{/if}}
+			{{#if this.icon}}
+				<ui5-icon name="{{this.icon}}"></ui5-icon>
+			{{/if}}
+			{{this.text}}
+			{{#if this.additionalText}}
+				({{this.additionalText}})
+			{{/if}}
+			{{#if this._designDescription}}
+				<div id="{{this._id}}-designDescription" class="ui5-hidden-text">
+					{{this._designDescription}}
+				</div>
+			{{/if}}
+		</div>
 	</div>
 </ui5-li-custom>
+{{#each subTabs}}
+	{{overflowPresentation}}
+{{/each}}