@ui5/webcomponents 2.0.0-rc.5 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.0.0-rc.5",
+  "version": "2.0.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -29,6 +29,8 @@
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "test:suite-1": "wc-dev test-suite-1",
     "test:suite-2": "wc-dev test-suite-2",
+    "test:cypress": "nps test-cy-ci",
+    "test:cypress:open": "nps test-cy-open",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "tsc -b"
   },
@@ -48,16 +50,16 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.0.0-rc.5",
-    "@ui5/webcomponents-icons": "2.0.0-rc.5",
-    "@ui5/webcomponents-icons-business-suite": "2.0.0-rc.5",
-    "@ui5/webcomponents-icons-tnt": "2.0.0-rc.5",
-    "@ui5/webcomponents-localization": "2.0.0-rc.5",
-    "@ui5/webcomponents-theming": "2.0.0-rc.5"
+    "@ui5/webcomponents-base": "2.0.0",
+    "@ui5/webcomponents-icons": "2.0.0",
+    "@ui5/webcomponents-icons-business-suite": "2.0.0",
+    "@ui5/webcomponents-icons-tnt": "2.0.0",
+    "@ui5/webcomponents-localization": "2.0.0",
+    "@ui5/webcomponents-theming": "2.0.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.0.0-rc.5",
+    "@ui5/webcomponents-tools": "2.0.0",
     "chromedriver": "^125.0.0"
   },
-  "gitHead": "791653e253faae4847f026d022d0ddcd47a96666"
+  "gitHead": "2960694d66c4b62d4240e3d45e1401dd94f61aec"
 }

package/src/Avatar.hbs

@@ -8,7 +8,7 @@
 	role="{{_role}}"
 	aria-haspopup="{{_ariaHasPopup}}"
 	aria-label="{{accessibleNameText}}"
-	fallback-icon="{{_fallbackIcon}}"
+	fallback-icon="{{fallbackIcon}}"
 >
 	{{#if hasImage}}
 		<slot></slot>

package/src/Calendar.hbs

@@ -51,25 +51,9 @@
 			@ui5-navigate="{{onNavigate}}"
 		></ui5-yearpicker>
 	</div>
-
-	{{! Positioned above the content due to flex-direction:column-reverse, but physically here for tab order to work}}
-	<ui5-calendar-header
-			id="{{_id}}-head"
-			.primaryCalendarType="{{_primaryCalendarType}}"
-			.secondaryCalendarType="{{_secondaryCalendarType}}"
-			.buttonTextForSecondaryCalendarType="{{secondaryCalendarTypeButtonText}}"
-			timestamp="{{_timestamp}}"
-			.isPrevButtonDisabled="{{_previousButtonDisabled}}"
-			.isNextButtonDisabled="{{_nextButtonDisabled}}"
-			.isMonthButtonHidden="{{_isHeaderMonthButtonHidden}}"
-			._monthButtonText="{{_headerMonthButtonText}}"
-			._yearButtonText="{{_headerYearButtonText}}"
-			._yearButtonTextSecType="{{_headerYearButtonTextSecType}}"
-			@ui5-previous-press="{{onHeaderPreviousPress}}"
-			@ui5-next-press="{{onHeaderNextPress}}"
-			@ui5-show-month-view="{{onHeaderShowMonthPress}}"
-			@ui5-show-year-view="{{onHeaderShowYearPress}}"
-	></ui5-calendar-header>
+	<div class="ui5-calheader">
+		{{>include "./CalendarHeader.hbs"}}
+	</div>
 </div>
 
 <div

package/src/CalendarHeader.hbs

@@ -4,7 +4,7 @@
 		class="{{classes.prevButton}}"
 		role="button"
 		@mousedown={{onPrevButtonClick}}
-		title="{{_prevButtonText}}"
+		title="{{headerPreviousButtonText}}"
 	>
 		<ui5-icon class="ui5-calheader-arrowicon" name="slim-arrow-left"></ui5-icon>
 	</div>
@@ -13,32 +13,32 @@
 		<div
 			data-ui5-cal-header-btn-month
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
-			?hidden="{{isMonthButtonHidden}}"
+			?hidden="{{_isHeaderMonthButtonHidden}}"
 			tabindex="0"
 			role="button"
 			aria-label="{{accInfo.ariaLabelMonthButton}}"
-			@click={{onMonthButtonClick}}
+			@click={{onHeaderShowMonthPress}}
 			@keydown={{onMonthButtonKeyDown}}
 			@keyup={{onMonthButtonKeyUp}}
 		>
-			<span>{{_monthButtonText}}</span>
+			<span>{{_headerMonthButtonText}}</span>
 			{{#if hasSecondaryCalendarType}}
-				<span class="ui5-calheader-btn-sectext">{{_secondMonthButtonText}}</span>
+				<span class="ui5-calheader-btn-sectext">{{secondMonthButtonText}}</span>
 			{{/if}}
 		</div>
 		<div
 			data-ui5-cal-header-btn-year
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
-			?hidden="{{isYearButtonHidden}}"
+			?hidden="{{_isHeaderYearButtonHidden}}"
 			tabindex="0"
 			role="button"
-			@click={{onYearButtonClick}}
+			@click={{onHeaderShowYearPress}}
 			@keydown={{onYearButtonKeyDown}}
 			@keyup={{onYearButtonKeyUp}}
 		>
-			<span>{{_yearButtonText}}</span>
+			<span>{{_headerYearButtonText}}</span>
 			{{#if hasSecondaryCalendarType}}
-				<span class="ui5-calheader-btn-sectext">{{_yearButtonTextSecType}}</span>
+				<span class="ui5-calheader-btn-sectext">{{_headerYearButtonTextSecType}}</span>
 			{{/if}}
 		</div>
 	</div>
@@ -48,7 +48,7 @@
 		class="{{classes.nextButton}}"
 		role="button"
 		@mousedown={{onNextButtonClick}}
-		title={{_nextButtonText}}
+		title={{headerNextButtonText}}
 	>
 		<ui5-icon class="ui5-calheader-arrowicon" name="slim-arrow-right"></ui5-icon>
 	</div>

package/src/Carousel.hbs

@@ -18,6 +18,7 @@
 					role="option"
 					aria-posinset="{{posinset}}"
 					aria-setsize="{{setsize}}"
+					aria-selected = "{{selected}}"
 					part="item"
 				>
 					<slot name="{{this.item._individualSlot}}" tabindex="{{this.tabIndex}}"></slot>

package/src/ComboBoxPopover.hbs

@@ -1,12 +1,19 @@
 <ui5-responsive-popover
 	class="{{classes.popover}}"
+	tabindex="-1"
 	hide-arrow
+	prevent-focus-restore
+	prevent-initial-focus
 	placement="Bottom"
 	horizontal-align="Start"
-	prevent-initial-focus
 	style="{{styles.suggestionsPopover}}"
+	@ui5-before-open="{{_beforeOpenPopover}}"
 	@ui5-open={{_afterOpenPopover}}
 	@ui5-close={{_afterClosePopover}}
+	@keydown={{_handlePopoverKeydown}}
+	@focusout={{_handlePopoverFocusout}}
+	.open={{open}}
+	.opener={{this}}
 >
 	<ui5-busy-indicator
 		?active={{loading}}
@@ -29,13 +36,14 @@
 
 			<div class="row">
 				<ui5-input
-					.value="{{value}}"
+					@keydown="{{_handleMobileKeydown}}"
 					@ui5-input="{{_handleMobileInput}}"
 					@ui5-change="{{_inputChange}}"
 					placeholder="{{placeholder}}"
 					value-state="{{valueState}}"
 					?show-clear-icon="{{showClearIcon}}"
 					?no-typeahead="{{noTypeahead}}"
+					.open={{openOnMobile}}
 				>
 					{{#each _filteredItems}}
 						<ui5-suggestion-item text="{{this.text}}" additional-text="{{this.additionalText}}"></ui5-suggestion-item>
@@ -47,16 +55,16 @@
 		{{#if hasValueStateText}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
+					{{> valueStateMessage}}
 			</div>
 		{{/if}}
 	{{/if}}
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateText}}
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} tabindex="0" style="{{styles.suggestionPopoverHeader}}">
+			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} style="{{styles.suggestionPopoverHeader}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
+					{{> valueStateMessage}}
 			</div>
 		{{/if}}
 	{{/unless}}
@@ -73,11 +81,11 @@
 		{{#each _filteredItems}}
 			{{#if isGroupItem}}
 				{{#if _isVisible}}
-					<ui5-li-group header-text="{{ this.text }}" ?focused={{ this.focused }}>
+					<ui5-li-group header-text="{{this.headerText}}" ?focused={{this.focused}}>
 						{{#each this.items}}
 							{{#if _isVisible}}
-								{{> listItem}}		
-							{{/if}}			
+								{{> listItem}}
+							{{/if}}
 						{{/each}}
 					</ui5-li-group>
 				{{/if}}
@@ -104,13 +112,18 @@
 		prevent-initial-focus
 		prevent-focus-restore
 		hide-arrow
+		tabindex="-1"
 		class="ui5-valuestatemessage-popover"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 		placement="Bottom"
+		.opener="{{this}}"
+		.open="{{valueStateOpen}}"
+		@ui5-close="{{_handleValueStatePopoverAfterClose}}"
+		@focusout={{_handleValueStatePopoverFocusout}}
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-			{{> valueStateMessage}}
+				{{> valueStateMessage}}
 		</div>
 	</ui5-popover>
 {{/if}}
@@ -132,7 +145,6 @@
 			wrapping-type="Normal"
 			additional-text={{this.additionalText}}
 			group-name={{this.groupName}}
-			._tabIndex={{itemTabIndex}}
 			.mappedItem={{this}}
 			?selected={{this.selected}}
 			?focused={{this.focused}}

package/src/DatePickerPopover.hbs

@@ -5,6 +5,7 @@
 	allow-target-overlap
 	placement="Bottom"
 	horizontal-align="Start"
+	accessible-name="{{pickerAccessibleName}}"
 	hide-arrow
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"

package/src/InputPopover.hbs

@@ -109,30 +109,9 @@
 		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-group-header data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-group-header>
-			{{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}}"
-					data-ui5-key="{{key}}"
-				>
-					{{{ this.text }}}
-					{{#if this.description}}
-						<span slot="richDescription">{{{ this.description }}}</span>
-					{{/if}}
-				</ui5-li-suggestion-item>
-			{{/if}}
-		{{/each}}
+		<slot></slot>
 	</ui5-list>
 {{/inline}}

package/src/Link.hbs

@@ -15,8 +15,29 @@
 	@click={{_onclick}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}>
-	<slot></slot>
+
+	{{#if icon}}
+		<ui5-icon
+			class="ui5-link-icon"
+			name="{{icon}}"
+			mode="Decorative"
+			part="icon">
+		</ui5-icon>
+	{{/if}}
+
+	<span class="ui5-link-text">
+		<slot></slot>
+	</span>
 	{{#if hasLinkType}}
 		<span class="ui5-hidden-text">{{linkTypeText}}</span>
 	{{/if}}
+
+	{{#if endIcon}}
+		<ui5-icon
+			class="ui5-link-end-icon"
+			name="{{endIcon}}"
+			mode="Decorative"
+			part="endIcon"
+		></ui5-icon>
+	{{/if}}
 </a>

package/src/{StandardListItem.hbs → ListItemStandard.hbs}

@@ -24,16 +24,10 @@
 {{/inline}}
 
 {{#*inline "imageBegin"}}
-	{{#if hasImageContent}}
-		<div class="ui5-li-imgContent" >
-			<slot name="imageContent"></slot>
+	{{#if hasImage}}
+		<div class="ui5-li-image" >
+			<slot name="image"></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}}
 

package/src/MenuSeparator.hbs

@@ -0,0 +1,6 @@
+<ui5-li-custom
+	class="{{classes.main}}"
+	role="separator"
+	disabled
+>
+</ui5-li-custom>

package/src/MessageStrip.hbs

@@ -4,7 +4,7 @@
 	aria-labelledby="{{_id}}"
 >
 
-	{{#unless hideIcon}}
+	{{#unless shouldHideIcon}}
 		<div
 		class="ui5-message-strip-icon-wrapper"
 		aria-hidden="true"

package/src/MultiComboBox.hbs

@@ -22,9 +22,24 @@
 		@paste={{_handlePaste}}
 		@keydown="{{_onTokenizerKeydown}}"
 		?expanded="{{_tokenizerExpanded}}"
+		?open = "{{tokenizerOpen}}"
 	>
 		{{#each items}}
-			{{#if this.selected}}
+			{{#if isGroupItem}}
+				{{#each this.items}}
+					{{#if selected}}
+						<ui5-token
+							?readonly="{{../readonly}}"
+							class="ui5-multi-combobox-token"
+							data-ui5-id="{{this._id}}"
+							part="token-{{@index}}"
+							text="{{this.text}}"
+						>
+					{{/if}}
+				{{/each}}
+			{{else}}
+					{{#if selected}}
+
 				<ui5-token
 					?readonly="{{../readonly}}"
 					class="ui5-multi-combobox-token"
@@ -33,6 +48,8 @@
 					text="{{this.text}}"
 				>
 				</ui5-token>
+					{{/if}}
+
 			{{/if}}
 		{{/each}}
 	</ui5-tokenizer>

package/src/MultiComboBoxPopover.hbs

@@ -6,9 +6,13 @@
 	prevent-initial-focus
 	style="{{styles.suggestionsPopover}}"
 	@ui5-selection-change={{_listSelectionChange}}
-	@ui5-close={{_afterClosePicker}}
+	@ui5-close={{_afterClose}}
 	@ui5-before-open={{_beforeOpen}}
-	@ui5-open={{_afterOpenPicker}}
+	@ui5-before-close={{_beforeClose}}
+	@ui5-open={{_afterOpen}}
+	@focusout={{_onPopoverFocusOut}}
+	.open={{_open}}
+	.opener={{this}}
 >
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
@@ -25,7 +29,7 @@
 			<div class="row">
 				<ui5-input
 					@ui5-input="{{_handleMobileInput}}"
-					@ui5-change="{{_mobileInputChange}}"
+					@keydown="{{_onMobileInputKeydown}}"
 					placeholder="{{placeholder}}"
 					value-state="{{_dialogInputValueState}}"
 					?show-clear-icon="{{showClearIcon}}"
@@ -68,20 +72,32 @@
 	{{/unless}}
 
 	{{#if filterSelected}}
-		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list">
+		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox">
 			{{#each selectedItems}}
 				{{#if isGroupItem}}
-					<ui5-li-group-header data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-group-header>
+					<ui5-li-group header-text="{{this.headerText}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
+						{{#each this.items}}
+							{{#if _isVisible}}
+								{{> listItem}}
+							{{/if}}
+						{{/each}}
+					</ui5-li-group>
 				{{else}}
 					{{> listItem}}
 				{{/if}}
 			{{/each}}
 		</ui5-list>
 	{{else}}
-		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list">
+		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox">
 			{{#each _filteredItems}}
 				{{#if isGroupItem}}
-					<ui5-li-group-header data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-group-header>
+					<ui5-li-group header-text="{{this.headerText}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
+						{{#each this.items}}
+							{{#if _isVisible}}
+								{{> listItem}}
+							{{/if}}
+						{{/each}}
+					</ui5-li-group>
 				{{else}}
 					{{> listItem}}
 				{{/if}}
@@ -109,6 +125,8 @@
 		placement="Bottom"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 		tabindex="-1"
+		.open="{{valueStateOpen}}"
+		.opener="{{this}}"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
@@ -136,6 +154,7 @@
 		data-ui5-token-id="{{this._id}}"
 		data-ui5-stable="{{this.stableDomRef}}"
 		@keydown="{{../_onItemKeydown}}"
+		accessible-role="Option"
 	>
 		{{this.text}}
 	</ui5-li>

package/src/SuggestionItem.hbs

@@ -0,0 +1,14 @@
+{{>include "./ListItemBase.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div part="content" id="content" class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title">
+				{{{markupText}}}
+			</span>
+			{{#if additionalText}}
+				<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+			{{/if}}
+		</div>
+	</div>
+{{/inline}}

package/src/SuggestionItemCustom.hbs

@@ -0,0 +1,5 @@
+{{>include "./ListItemBase.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<slot></slot>
+{{/inline}}

package/src/SuggestionItemGroup.hbs

@@ -0,0 +1 @@
+{{>include "./ListItemGroup.hbs"}}

package/src/SuggestionListItem.hbs

@@ -1,4 +1,4 @@
-{{>include "./StandardListItem.hbs"}}
+{{>include "./ListItemStandard.hbs"}}
 
 {{#*inline "listItemContent"}}
 	<div class="ui5-li-text-wrapper">

package/src/TabContainer.hbs

@@ -86,9 +86,9 @@
 		<div
 			class="ui5-tc__contentItem"
 			id="ui5-tc-content"
-			?hidden="{{this._selectedTab.effectiveHidden}}"
+			?hidden="{{this._selectedTab?.effectiveHidden}}"
 			role="tabpanel"
-			aria-labelledby="{{this._selectedTab._id}}"
+			aria-labelledby="{{this._selectedTab?._id}}"
 		>
 			{{#each items}}
 				<slot name="{{this._effectiveSlotName}}"></slot>

package/src/Table.hbs

@@ -0,0 +1,53 @@
+<div id="before" role="none" tabindex="0" ui5-table-dummy-focus-area></div>
+
+<div id="table" role="grid"
+    style="{{styles.table}}"
+    aria-label="{{_ariaLabel}}"
+    aria-multiselectable="{{_ariaMultiSelectable}}"
+>
+    <slot name="headerRow"></slot>
+    <slot></slot>
+    {{#unless rows.length}}
+        <ui5-table-row id="nodata-row">
+            <ui5-table-cell id="nodata-cell" excluded-from-navigation>
+            {{#if nodata.length}}
+                <slot name="nodata"></slot>
+            {{else}}
+                {{_effectiveNoDataText}}
+            {{/if}}
+            </ui5-table-cell>
+        </ui5-table-row>
+    {{/unless}}
+
+    {{#if _shouldRenderGrowing}}
+        <div id="footer" role="rowgroup">
+            {{> growingRow}}
+        </div>
+    {{/if}}
+
+    {{> tableEndRow}}
+</div>
+
+{{#if loading}}
+    <ui5-busy-indicator id="loading" delay="{{loadingDelay}}" active data-sap-focus-ref></ui5-busy-indicator>
+{{/if}}
+
+<div id="after" role="none" tabindex="0" ui5-table-dummy-focus-area></div>
+
+{{#*inline "growingRow"}}
+    <ui5-table-row id="growing-row" ui5-growing-row>
+        <ui5-table-cell id="growing-cell">
+            <!-- The growing button is a div filling the cell -->
+            <!-- It has a growing text at the top and a growingSubText at the bottom -->
+            <slot name="{{_growing._individualSlot}}"></slot>
+        </ui5-table-cell>
+    </ui5-table-row>
+{{/inline}}
+
+{{#*inline "tableEndRow"}}
+    <div aria-hidden="true" id="table-end-row">
+        <div id="table-end-cell">
+            <div id="table-end" aria-hidden="true" tabindex="-1"></div>
+        </div>
+    </div>
+{{/inline}}

package/src/TableCell.hbs

@@ -0,0 +1,11 @@
+{{#if _popin}}
+	{{#if _popinHeader}}
+		<div class="popin-header-colon">
+			{{_popinHeader}}
+			<span class="popin-colon">{{_i18nPopinColon}}</span>
+		</div>
+	{{/if}}
+	<slot></slot>
+{{else}}
+	<slot></slot>
+{{/if}}

package/src/TableGrowing.hbs

@@ -0,0 +1,19 @@
+{{#if _hasGrowingButton}}
+	<div
+		id="growing-button"
+		tabindex="-1"
+		?active="{{_activeState}}"
+		@click="{{loadMore}}"
+		@keydown="{{_onKeydown}}"
+		@keyup="{{_onKeyup}}"
+		@focusout="{{_onFocusout}}"
+		role="button"
+		aria-labelledby="growing-text growing-subtext"
+		aria-describedby="growing-description">
+		<span id="growing-text">{{_growingButtonText}}</span>
+		{{#if growingSubText}}
+			<span id="growing-subtext">{{growingSubText}}</span>
+		{{/if}}
+		<span id="growing-description" style="display: none;" aria-hidden="true">{{_growingButtonDescription}}</span>
+	</div>
+{{/if}}

package/src/TableHeaderCell.hbs

@@ -0,0 +1 @@
+<slot></slot>

package/src/TableHeaderRow.hbs

@@ -0,0 +1,23 @@
+{{#if _hasRowSelector}}
+    <ui5-table-header-cell id="selection-cell"
+        aria-selected="{{_isSelected}}"
+        aria-label="{{_i18nSelection}}"
+        ui5-table-selection-component
+    >
+    {{#if _isMultiSelect}}
+        <ui5-checkbox id="selection-component" tabindex="-1"
+            ?checked="{{_isSelected}}"
+            accessible-name="{{_i18nRowSelector}}"
+            @ui5-change="{{_informSelectionChange}}"
+        ></ui5-checkbox>
+    {{/if}}
+    </ui5-table-header-cell>
+{{/if}}
+
+{{#each _visibleCells}}
+	<slot name="{{_individualSlot}}"></slot>
+{{/each}}
+
+{{#if _popinCells.length}}
+    <ui5-table-header-cell id="popin-cell" aria-label="{{_i18nRowPopin}}" excluded-from-navigation></ui5-table-cell>
+{{/if}}