@ui5/webcomponents 0.0.0-cf069fb29 → 0.0.0-cf50976ce

package/src/TabContainerPopover.hbs

@@ -8,20 +8,14 @@
 	class="ui5-tab-container-responsive-popover"
 >
 	<ui5-list mode="SingleSelect" separators="None" @ui5-item-click="{{_onOverflowListItemClick}}">
-		{{#if _endOverflowItems.length}}
-			{{#each _endOverflowItems}}
-				{{this.overflowPresentation}}
-			{{/each}}
-		{{else}}
-			{{#each _startOverflowItems}}
-				{{this.overflowPresentation}}
-			{{/each}}
-		{{/if}}
+		{{#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,21 +1,30 @@
 <ui5-li-custom
-	id="{{this._id}}"
+	id="{{this._id}}-li"
 	class="{{this.overflowClasses}}"
 	type="{{this.overflowState}}"
-	?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}}
+	<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}}
 
-		{{this.text}}
+			{{#if this.icon}}
+				<ui5-icon name="{{this.icon}}"></ui5-icon>
+			{{/if}}
+			{{this.text}}
 
-		{{#if this.additionalText}}
-			({{this.additionalText}})
-		{{/if}}
+			{{#if this.additionalText}}
+				({{this.additionalText}})
+			{{/if}}
+		</div>
 	</div>
 </ui5-li-custom>
+{{#each subTabs}}
+	{{overflowPresentation}}
+{{/each}}

package/src/TabInStrip.hbs

@@ -1,15 +1,16 @@
 <div id="{{this._id}}"
 	class="{{this.stripClasses}}"
-	tabindex="{{this._tabIndex}}"
+	tabindex="-1"
 	role="tab"
 	aria-posinset="{{this._posinset}}"
 	aria-setsize="{{this._setsize}}"
-	aria-controls="ui5-tc-contentItem-{{this._posinset}}"
+	aria-controls="ui5-tc-content"
 	aria-selected="{{this.effectiveSelected}}"
 	aria-disabled="{{this.effectiveDisabled}}"
 	?disabled="{{this.effectiveDisabled}}"
 	aria-labelledby="{{this.ariaLabelledBy}}"
 	data-ui5-stable="{{this.stableDomRef}}"
+	._realTab="{{this}}"
 >
 	{{#if this.icon}}
 		<div class="ui5-tab-strip-item-icon-outer">
@@ -24,12 +25,32 @@
 
 		{{#if this.text}}
 			<span class="ui5-tab-strip-itemText" id="{{this._id}}-text">
-				<span class="{{this.headerSemanticIconClasses}}"></span>
+				{{#if this.semanticIconName}}
+					<ui5-icon class="{{semanticIconClasses}}" name="{{semanticIconName}}"></ui5-icon>
+				{{/if}}
+
 				{{this.displayText}}
+			{{#if this.isSingleClickArea}}
+			<span class="ui5-tab-single-click-icon">
+				<ui5-icon name="slim-arrow-down"></ui5-icon>
+			</span>
+			{{/if}}
 			</span>
 		{{/if}}
 	</div>
-</div>
+
+	{{#if this.requiresExpandButton}}
+		<div class="ui5-tab-expand-button" @click="{{_onTabExpandButtonClick}}">
+			<ui5-button
+				.tab={{this}}
+				icon="slim-arrow-down"
+				design="Transparent"
+				tabindex="-1"
+				?disabled="{{disabled}}"
+				aria-haspopup="true">
+			</ui5-button>
+		</div>
+	{{/if}}
 
 {{#*inline additionalText}}
 	{{#if this.additionalText}}

package/src/TabSeparator.js

@@ -58,8 +58,15 @@ class TabSeparator extends UI5Element {
 		return true;
 	}
 
+	/**
+	 * Returns the DOM reference of the separator that is placed in the header.
+	 * <b>Note:</b> Tabs and separators, placed in the <code>subTabs</code> slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return <code>null</code>.
+	 *
+	 * @function
+	 * @public
+	 */
 	getTabInStripDomRef() {
-		return this._getTabInStripDomRef;
+		return this._getElementInStrip();
 	}
 
 	get stableDomRef() {

package/src/TabSeparatorInOverflow.hbs

@@ -4,5 +4,6 @@
 	role="separator"
 	class="{{classes}}"
 	disabled
+	style="{{this._style}}"
 >
 </ui5-li-custom>

package/src/Table.hbs

@@ -1,19 +1,33 @@
-<div class="ui5-table-root">
+<div class="ui5-table-root" @focusin="{{_onfocusin}}">
+	<div id="{{_id}}-before" tabindex="0" class="ui5-table-focusarea"></div>
+
 	{{#if busy}}
 		{{> busyRow}}
 	{{/if}}
 
-	<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
+	<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table" aria-label="{{tableAriaLabelText}}">
 		<thead>
-			<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" aria-label="{{ariaLabelText}}" tabindex="{{_columnHeader._tabIndex}}" @click="{{_onColumnHeaderClick}}">
+			<tr
+				id="{{_columnHeader.id}}"
+				role="row"
+				class="ui5-table-header-row"
+				aria-label="{{ariaLabelText}}"
+				tabindex="{{_columnHeader._tabIndex}}"
+				@click="{{_onColumnHeaderClick}}"
+				@focusin="{{_onColumnHeaderFocused}}"
+				@keydown="{{_onColumnHeaderKeydown}}"
+			>
 				{{#if isMultiSelect}}
 					<th class="ui5-table-select-all-column" role="presentation" aria-hidden="true">
-						<ui5-checkbox class="ui5-table-select-all-checkbox"
-							?checked="{{_allRowsSelected}}"
-							@ui5-change="{{_selectAll}}"
-							aria-label="{{ariaLabelSelectAllText}}"
-						>
-						</ui5-checkbox>
+						{{#if rows.length}}
+							<ui5-checkbox class="ui5-table-select-all-checkbox"
+								?checked="{{_allRowsSelected}}"
+								@ui5-change="{{_selectAll}}"
+								aria-label="{{ariaLabelSelectAllText}}"
+								tabindex="-1"
+							>
+							</ui5-checkbox>
+						{{/if}}
 					</th>
 				{{/if}}
 
@@ -50,6 +64,8 @@
 			{{/if}}
 		</tbody>
 	</table>
+
+	<div id="{{_id}}-after" tabindex="0" class="ui5-table-focusarea"></div>
 </div>
 
 {{#*inline "moreRow"}}
@@ -57,6 +73,7 @@
 	<td colspan="{{visibleColumnsCount}}">
 		<div growing-button>
 			<div
+				id="{{_id}}-growingButton"
 				tabindex="0"
 				role="button"
 				aria-labelledby="{{loadMoreAriaLabelledBy}}"