@ui5/webcomponents 1.24.0-rc.4 → 2.0.0-rc.0

package/package-scripts.cjs

@@ -3,7 +3,6 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
 const options = {
 	port: 8080,
 	portStep: 2,
-	typescript: true,
 	noWatchTS: true,
 	dev: true,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.24.0-rc.4",
+  "version": "2.0.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -48,16 +48,16 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.24.0-rc.4",
-    "@ui5/webcomponents-icons": "1.24.0-rc.4",
-    "@ui5/webcomponents-icons-business-suite": "1.24.0-rc.4",
-    "@ui5/webcomponents-icons-tnt": "1.24.0-rc.4",
-    "@ui5/webcomponents-localization": "1.24.0-rc.4",
-    "@ui5/webcomponents-theming": "1.24.0-rc.4"
+    "@ui5/webcomponents-base": "2.0.0-rc.0",
+    "@ui5/webcomponents-icons": "2.0.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.0.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.0.0-rc.0",
+    "@ui5/webcomponents-localization": "2.0.0-rc.0",
+    "@ui5/webcomponents-theming": "2.0.0-rc.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.24.0-rc.4",
+    "@ui5/webcomponents-tools": "2.0.0-rc.0",
     "chromedriver": "^122.0.6"
   },
-  "gitHead": "58608f25543f7ec7287f673a607f867d457d9850"
+  "gitHead": "f07f56dbe228e7d6d5acedeac5284b131acf551a"
 }

package/src/Bar.hbs

@@ -0,0 +1,16 @@
+<div
+	class="{{classes.root}}"
+	aria-label="{{accInfo.label}}"
+	role="toolbar"
+	part="bar"
+>
+	<div class="ui5-bar-content-container ui5-bar-startcontent-container">
+		<slot name="startContent"></slot>
+	</div>
+	<div class="ui5-bar-content-container ui5-bar-midcontent-container">
+		<slot></slot>
+	</div>
+	<div class="ui5-bar-content-container ui5-bar-endcontent-container">
+		<slot name="endContent"></slot>
+	</div>
+</div>

package/src/Breadcrumbs.hbs

@@ -34,4 +34,6 @@
 		</li>
 		{{/each}}
 	</ol>
-</nav>
+</nav>
+
+{{>include "./BreadcrumbsPopover.hbs"}}

package/src/BreadcrumbsPopover.hbs

@@ -2,11 +2,11 @@
 	class="ui5-breadcrumbs-popover"
 	hide-arrow
 	content-only-on-desktop
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	_hide-header
 	@keydown="{{_onkeydown}}">
-	<ui5-list mode="SingleSelect"
+	<ui5-list selection-mode="Single"
 		separators="None"
 		@ui5-selection-change="{{_onOverflowListItemSelect}}">
 

package/src/CardHeader.hbs

@@ -33,9 +33,9 @@
 					>{{titleText}}</div>
 				{{/if}}
 
-				{{#if status}}
-					<div class="ui5-card-header-status">
-						<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
+				{{#if additionalText}}
+					<div class="ui5-card-header-additionalText">
+						<span id="{{_id}}-additionalText" part="additional-text" dir="auto">{{additionalText}}</span>
 					</div>
 				{{/if}}
 

package/src/Carousel.hbs

@@ -2,6 +2,7 @@
 	class="ui5-carousel-root ui5-carousel-background-{{_backgroundDesign}}"
 	tabindex="0"
 	role="listbox"
+	aria-label="{{ariaLabelTxt}}"
 	aria-activedescendant="{{ariaActiveDescendant}}"
 	@focusin="{{_onfocusin}}"
 	@keydown={{_onkeydown}}

package/src/ColorPalette.hbs

@@ -6,15 +6,15 @@
 >
 	{{#if this.showDefaultColor}}
 		<div class="ui5-cp-default-color-button-wrapper">
-			<ui5-button 
+			<ui5-button
 				class="ui5-cp-default-color-button"
-				design="Transparent" 
+				design="Transparent"
 				@click={{_onDefaultColorClick}}
 				@keydown={{_onDefaultColorKeyDown}}>{{colorPaletteDefaultColorText}}</ui5-button>
 			<div class="ui5-cp-separator"></div>
 		</div>
 	{{/if}}
-	<div class="ui5-cp-item-container" 
+	<div class="ui5-cp-item-container"
 		role="region"
 		aria-label="{{colorContainerLabel}}"
 		@keydown="{{_onColorContainerKeyDown}}"
@@ -50,3 +50,5 @@
 		</div>
 	{{/if}}
 </div>
+
+{{>include "./ColorPaletteDialog.hbs"}}

package/src/ColorPaletteDialog.hbs

@@ -1,3 +1,4 @@
+{{#if _showMoreColors}}
 <ui5-dialog
     header-text="{{moreColorsFeature.colorPaletteDialogTitle}}"
 >
@@ -16,3 +17,4 @@
         >{{moreColorsFeature.colorPaletteCancelButton}}</ui5-button>
     </div>
 </ui5-dialog>
+{{/if}}

package/src/ColorPalettePopover.hbs

@@ -1,7 +1,7 @@
 <ui5-responsive-popover
 	hide-arrow
 	content-only-on-desktop
-	placement-type="Bottom"
+	placement="Bottom"
 	?open="{{_open}}"
 	.opener="{{opener}}"
 	@ui5-after-close="{{onAfterClose}}"

package/src/ColorPicker.hbs

@@ -66,7 +66,7 @@
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
                 accessible-name="{{redInputLabel}}"
-                value="{{_color.r}}"
+                value="{{_value.r}}"
             ></ui5-input>
             <ui5-label>R</ui5-label>
         </div>
@@ -76,7 +76,7 @@
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
                 accessible-name="{{greenInputLabel}}"
-                value="{{_color.g}}"
+                value="{{_value.g}}"
             ></ui5-input>
             <ui5-label>G</ui5-label>
         </div>
@@ -86,7 +86,7 @@
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
                 accessible-name="{{blueInputLabel}}"
-                value="{{_color.b}}"
+                value="{{_value.b}}"
             ></ui5-input>
             <ui5-label>B</ui5-label>
         </div>

package/src/ComboBox.hbs

@@ -49,3 +49,5 @@
 		></ui5-icon>
 	{{/unless}}
 </div>
+
+{{>include "./ComboBoxPopover.hbs"}}

package/src/ComboBoxPopover.hbs

@@ -1,15 +1,14 @@
 <ui5-responsive-popover
 	class="{{classes.popover}}"
 	hide-arrow
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	style="{{styles.suggestionsPopover}}"
 	@ui5-after-open={{_afterOpenPopover}}
 	@ui5-after-close={{_afterClosePopover}}
 >
 	<ui5-busy-indicator
 		?active={{loading}}
-		size="Medium"
 		class="ui5-combobox-busy"
 	>
 	</ui5-busy-indicator>
@@ -43,7 +42,7 @@
 				</ui5-input>
 			</div>
 		</div>
-		
+
 		{{#if hasValueStateText}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
@@ -67,7 +66,7 @@
 		@ui5-item-click={{_selectItem}}
 		@ui5-item-focused={{_onItemFocus}}
 		@mousedown={{_itemMousedown}}
-		mode="SingleSelect"
+		selection-mode="Single"
 	>
 		{{#each _filteredItems}}
 			{{#if isGroupItem}}
@@ -97,7 +96,7 @@
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
-		placement-type="Bottom"
+		placement="Bottom"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>

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,45 @@
+<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>

package/src/DatePickerPopover.hbs

@@ -1,8 +1,8 @@
 <ui5-responsive-popover
 	id="{{_id}}-responsive-popover"
 	allow-target-overlap
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	hide-arrow
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
@@ -44,7 +44,7 @@
 		.selectionMode="{{_calendarSelectionMode}}"
 		.minDate="{{minDate}}"
 		.maxDate="{{maxDate}}"
-		@ui5-selected-dates-change="{{onSelectedDatesChange}}"
+		@ui5-selection-change="{{onSelectedDatesChange}}"
 		@ui5-show-month-press="{{onHeaderShowMonthPress}}"
 		@ui5-show-year-press="{{onHeaderShowYearPress}}"
 		?hide-week-numbers="{{hideWeekNumbers}}"

package/src/DateTimePicker.hbs

@@ -0,0 +1,2 @@
+{{>include "./DatePickerInput.hbs"}}
+{{>include "./DateTimePickerPopover.hbs"}}

package/src/DateTimePickerPopover.hbs

@@ -24,7 +24,7 @@
 			.selectionMode="{{_calendarSelectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
-			@ui5-selected-dates-change="{{onSelectedDatesChange}}"
+			@ui5-selection-change="{{onSelectedDatesChange}}"
 			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
 			@ui5-show-year-press="{{onHeaderShowYearPress}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"

package/src/FileUploader.hbs

@@ -1,4 +1,3 @@
-
 <div class="ui5-file-uploader-root"
 	@mouseover="{{_onmouseover}}"
 	@mouseout="{{_onmouseout}}"
@@ -38,3 +37,5 @@
 		</slot>
 	{{/if}}
 </div>
+
+{{>include "./FileUploaderPopover.hbs"}}

package/src/FileUploaderPopover.hbs

@@ -4,8 +4,8 @@
 	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/Input.hbs

@@ -77,4 +77,6 @@
 
 
 {{#*inline "preContent"}}{{/inline}}
-{{#*inline "postContent"}}{{/inline}}
+{{#*inline "postContent"}}{{/inline}}
+
+{{>include "./InputPopover.hbs"}}

package/src/InputPopover.hbs

@@ -3,8 +3,8 @@
 		class="{{classes.popover}}"
 		hide-arrow
 		_disable-initial-focus
-		placement-type="Bottom"
-		horizontal-align="Left"
+		placement="Bottom"
+		horizontal-align="Start"
 		style="{{styles.suggestionsPopover}}"
 		@ui5-after-open="{{_afterOpenPopover}}"
 		@ui5-after-close="{{_afterClosePopover}}"
@@ -72,7 +72,7 @@
 			prevent-focus-restore
 			hide-arrow
 			class="ui5-valuestatemessage-popover"
-			placement-type="Bottom"
+			placement="Bottom"
 			horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 		>
 			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
@@ -93,7 +93,7 @@
 {{/inline}}
 
 {{#*inline "suggestionsList"}}
-	<ui5-list separators="{{suggestionSeparators}}" @mousedown="{{onItemMouseDown}}" mode="SingleSelect">
+	<ui5-list separators="{{suggestionSeparators}}" @mousedown="{{onItemMouseDown}}" selection-mode="Single">
 		{{#each suggestionObjects}}
 			{{#if groupItem}}
 				<ui5-li-groupheader data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-groupheader>

package/src/List.hbs

@@ -68,14 +68,13 @@
 		<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>

package/src/ListItem.hbs

@@ -96,7 +96,7 @@
 		</ui5-radio-button>
 	{{/if}}
 
-	{{#if modeMultiSelect}}
+	{{#if modeMultiple}}
 		<ui5-checkbox
 				part="checkbox"
 				?disabled="{{isInactive}}"

package/src/Menu.hbs

@@ -1,8 +1,8 @@
 <ui5-responsive-popover
 	id="{{_id}}-menu-rp"
 	class="ui5-menu-rp"
-	horizontal-align="Left"
-	placement-type={{placementType}}
+	horizontal-align="Start"
+	placement={{placement}}
 	vertical-align={{verticalAlign}}
 	hide-arrow
 	allow-target-overlap
@@ -49,7 +49,7 @@
 	{{#if _currentItems.length}}
 		<ui5-list
 			id="{{_id}}-menu-list"
-			mode="None"
+			selection-mode="None"
 			?busy="{{busy}}"
 			busy-delay="{{busyDelay}}"
 			separators="None"

package/src/MultiComboBox.hbs

@@ -84,3 +84,5 @@
 		></ui5-icon>
 	{{/unless}}
 </div>
+
+{{>include "./MultiComboBoxPopover.hbs"}}

package/src/MultiComboBoxPopover.hbs

@@ -1,6 +1,6 @@
 <ui5-responsive-popover
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	class="{{classes.popover}}"
 	hide-arrow
 	_disable-initial-focus
@@ -68,7 +68,7 @@
 	{{/unless}}
 
 	{{#if filterSelected}}
-		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list">
 			{{#each selectedItems}}
 				{{#if isGroupItem}}
 					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
@@ -78,7 +78,7 @@
 			{{/each}}
 		</ui5-list>
 	{{else}}
-		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list">
 			{{#each _filteredItems}}
 				{{#if isGroupItem}}
 					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
@@ -106,8 +106,9 @@
 		prevent-focus-restore
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
-		placement-type="Bottom"
+		placement="Bottom"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
+		tabindex="-1"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>

package/src/NavigationMenu.hbs

@@ -49,7 +49,7 @@
 		<ui5-list
 			accessible-role="tree"
 			id="{{_id}}-menu-list"
-			mode="None"
+			selection-mode="None"
 			?busy="{{busy}}"
 			busy-delay="{{busyDelay}}"
 			separators="None"

package/src/Popup.hbs

@@ -1,4 +1,5 @@
 <section
+	root-element
 	style="{{styles.root}}"
 	class="{{classes.root}}"
 	role="{{_role}}"
@@ -30,4 +31,4 @@
 
 {{#*inline "afterContent"}}{{/inline}}
 
-
+{{>include "./PopupBlockLayer.hbs"}}

package/src/PopupBlockLayer.hbs

@@ -1,7 +1,5 @@
 <div class="ui5-block-layer"
-    ?hidden={{_blockLayerHidden}}
-    tabindex="0"
-    style="{{styles.blockLayer}}"
+	popover="manual"
 	@keydown="{{_preventBlockLayerFocus}}"
-    @mousedown="{{_preventBlockLayerFocus}}">
+	@mousedown="{{_preventBlockLayerFocus}}">
 </div>

package/src/ProgressIndicator.hbs

@@ -4,7 +4,6 @@
      aria-valuenow="{{validatedValue}}"
      aria-valuemax="100"
      aria-valuetext="{{valueStateText}}"
-     aria-disabled="{{_ariaDisabled}}"
      aria-label="{{accessibleName}}"
 >
     <div class="ui5-progress-indicator-bar" part="bar" style="{{styles.bar}}">

package/src/ResponsivePopover.hbs

@@ -1,5 +1,6 @@
 {{#if _isPhone}}
 	<ui5-dialog
+		root-element
 		accessible-name={{accessibleName}}
 		accessible-name-ref={{accessibleNameRef}}
 		accessible-role={{accessibleRole}}

package/src/Select.hbs

@@ -48,3 +48,5 @@
 	{{/if}}
 	<slot name="formSupport"></slot>
 </div>
+
+{{>include "./SelectPopover.hbs"}}

package/src/SelectMenu.hbs

@@ -1,7 +1,7 @@
 <ui5-responsive-popover
 	class="ui5-select-menu"
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	@ui5-after-open="{{_onAfterOpen}}"
 	@ui5-after-close="{{_onAfterClose}}"
 	@ui5-before-open="{{_onBeforeOpen}}"
@@ -37,8 +37,8 @@
 				{{/if}}
 		{{/unless}}
 
-		<ui5-list 
-			mode="SingleSelect"
+		<ui5-list
+			selection-mode="Single"
 			separators="None"
 			@ui5-item-click="{{_onOptionClick}}">
 					<slot></slot>

package/src/SelectPopover.hbs

@@ -2,9 +2,9 @@
 	<ui5-responsive-popover
 		hide-arrow
 		_disable-initial-focus
-		placement-type="Bottom"
+		placement="Bottom"
 		class="ui5-select-popover {{classes.popover}}"
-		horizontal-align="Left"
+		horizontal-align="Start"
 		@ui5-after-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
 		@ui5-after-close="{{_afterClose}}"
@@ -40,7 +40,7 @@
 		{{/unless}}
 
 		<ui5-list
-			mode="SingleSelectAuto"
+			selection-mode="SingleAuto"
 			separators="None"
 			@mousedown="{{_itemMousedown}}"
 			@ui5-item-click="{{_handleItemPress}}"
@@ -70,8 +70,8 @@
 		prevent-focus-restore
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
-		placement-type="Bottom"
-		horizontal-align="Left"
+		placement="Bottom"
+		horizontal-align="Start"
 	>
 		<div class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>

package/src/TabContainer.hbs

@@ -6,7 +6,7 @@
 		class="{{classes.header}}"
 		id="{{_id}}-header"
 		@focusin="{{_onHeaderFocusin}}"
-		@dragstart="{{_onHeaderDragStart}}"
+		@dragstart="{{_onDragStart}}"
 		@dragenter="{{_onHeaderDragEnter}}"
 		@dragover="{{_onHeaderDragOver}}"
 		@drop="{{_onHeaderDrop}}"
@@ -75,7 +75,7 @@
 		{{> contentArea}}
 	{{/unless}}
 
-	{{#if hasSubTabs}}
+	{{#if hasItems}}
 		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
 	{{/if}}
 
@@ -96,3 +96,5 @@
 		</div>
 	</div>
 {{/inline}}
+
+{{>include "./TabContainerPopover.hbs"}}