@openui5/sap.ui.webc.main 1.97.1 → 1.99.1

package/src/sap/ui/webc/main/thirdparty/Table.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/types/NavigationMode', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/util/debounce', 'sap/ui/webc/common/thirdparty/base/util/isElementInView', './types/TableGrowingMode', './BusyIndicator', './types/TableMode', './generated/i18n/i18n-defaults', './generated/templates/TableTemplate.lit', './generated/themes/Table.css'], function (UI5Element, litRender, ResizeHandler, ItemNavigation, Integer, NavigationMode, Device, Keys, i18nBundle, debounce, isElementInView, TableGrowingMode, BusyIndicator, TableMode, i18nDefaults, TableTemplate_lit, Table_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/types/NavigationMode', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/util/TabbableElements', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/util/debounce', 'sap/ui/webc/common/thirdparty/base/util/isElementInView', './types/TableGrowingMode', './BusyIndicator', './types/TableMode', './CheckBox', './generated/i18n/i18n-defaults', './generated/templates/TableTemplate.lit', './generated/themes/Table.css'], function (UI5Element, litRender, ResizeHandler, ItemNavigation, Integer, NavigationMode, Device, Keys, TabbableElements, i18nBundle, debounce, isElementInView, TableGrowingMode, BusyIndicator, TableMode, CheckBox, i18nDefaults, TableTemplate_lit, Table_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -15,11 +15,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 	const metadata = {
 		tag: "ui5-table",
 		managedSlots: true,
+		fastNavigation: true,
 		slots:  {
 			"default": {
 				propertyName: "rows",
 				type: HTMLElement,
 				individualSlots: true,
+				invalidateOnChildChange: true,
 			},
 			columns: {
 				type: HTMLElement,
@@ -115,7 +117,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return TableTemplate_lit;
 		}
 		static get dependencies() {
-			return [BusyIndicator];
+			return [BusyIndicator, CheckBox];
 		}
 		static async onDefine() {
 			Table.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
@@ -130,16 +132,19 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				navigationMode: NavigationMode__default.Vertical,
 				affectedPropertiesNames: ["_columnHeader"],
 				getItemsCallback: () => [this._columnHeader, ...this.rows],
+				skipItemsSize: 20,
 			});
 			this.fnOnRowFocused = this.onRowFocused.bind(this);
 			this._handleResize = this.popinContent.bind(this);
 			this.tableEndObserved = false;
 			this.addEventListener("ui5-selection-requested", this._handleSelect.bind(this));
+			this._prevNestedElementIndex = 0;
 		}
 		onBeforeRendering() {
 			const columnSettings = this.getColumnPropagationSettings();
 			const columnSettingsString = JSON.stringify(columnSettings);
 			const rowsCount = this.rows.length;
+			const selectedRows = this.selectedRows;
 			this.rows.forEach((row, index) => {
 				if (row._columnsInfoString !== columnSettingsString) {
 					row._columnsInfo = columnSettings;
@@ -152,11 +157,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				row.mode = this.mode;
 			});
 			this.visibleColumns = this.columns.filter((column, index) => {
-				column.sticky = this.stickyColumnHeader;
 				return !this._hiddenColumns[index];
 			});
 			this._noDataDisplayed = !this.rows.length && !this.hideNoData;
 			this.visibleColumnsCount = this.visibleColumns.length;
+			this._allRowsSelected = selectedRows.length === this.rows.length;
+			this._previousFocusedRow = this._previousFocusedRow || this.rows[0] || null;
 		}
 		onAfterRendering() {
 			if (this.growsOnScroll) {
@@ -169,6 +175,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				this.growingIntersectionObserver = this.getIntersectionObserver();
 			}
 			ResizeHandler__default.register(this.getDomRef(), this._handleResize);
+			this._itemNavigation.setCurrentItem(this.rows.length ? this.rows[0] : this._columnHeader);
+			this.rows.forEach((row, index) => {
+				row._tabbableElements = TabbableElements.getTabbableElements(row);
+				if (index > 0) {
+					row._tabbableElements.forEach(el => el.setAttribute("tabindex", "-1"));
+				}
+			});
 		}
 		onExitDOM() {
 			ResizeHandler__default.deregister(this.getDomRef(), this._handleResize);
@@ -178,6 +191,135 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				this.tableEndObserved = false;
 			}
 		}
+		_onkeydown(event) {
+			if (Keys.isCtrlA(event)) {
+				event.preventDefault();
+				this.isMultiSelect && this._selectAll(event);
+				return;
+			}
+			const isAltUp = Keys.isUpAlt(event);
+			if (isAltUp || Keys.isDownAlt(event)) {
+				return this._handleArrowAlt(isAltUp, event.target);
+			}
+			if ((Keys.isUpShift(event) || Keys.isDownShift(event)) && this.isMultiSelect) {
+				this._handleArrowNav(event);
+			}
+			if (Keys.isHomeCtrl(event)) {
+				event.preventDefault();
+				this._itemNavigation._handleHome(event);
+				this._itemNavigation._applyTabIndex();
+				this._itemNavigation._focusCurrentItem();
+			}
+			if (Keys.isEndCtrl(event)) {
+				event.preventDefault();
+				this._itemNavigation._handleEnd(event);
+				this._itemNavigation._applyTabIndex();
+				this._itemNavigation._focusCurrentItem();
+			}
+			if ((Keys.isHomeShift(event) || Keys.isEndShift(event)) && this.isMultiSelect) {
+				this._handleHomeEndSelection(event);
+			}
+		}
+		_handleArrowNav(event) {
+			const isRowFocused = this.currentElement.localName === "tr";
+			if (!isRowFocused) {
+				return;
+			}
+			const previouslySelectedRows = this.selectedRows;
+			const currentItem = this.currentItem;
+			const currentItemIdx = this.currentItemIdx;
+			const prevItemIdx = currentItemIdx - 1;
+			const nextItemIdx = currentItemIdx + 1;
+			const prevItem = this.rows[prevItemIdx];
+			const nextItem = this.rows[nextItemIdx];
+			const wasSelected = currentItem.selected;
+			if ((Keys.isUpShift(event) && !prevItem) || (Keys.isDownShift(event) && !nextItem)) {
+				return;
+			}
+			if (Keys.isUpShift(event)) {
+				currentItem.selected = currentItem.selected && !prevItem.selected;
+				prevItem.selected = currentItem.selected || (wasSelected && !currentItem.selected);
+				prevItem.focus();
+			}
+			if (Keys.isDownShift(event)) {
+				currentItem.selected = currentItem.selected && !nextItem.selected;
+				nextItem.selected = currentItem.selected || (wasSelected && !currentItem.selected);
+				nextItem.focus();
+			}
+			const selectedRows = this.selectedRows;
+			this.fireEvent("selection-change", {
+				selectedRows,
+				previouslySelectedRows,
+			});
+		}
+		_handleHomeEndSelection(event) {
+			const isRowFocused = this.currentElement.localName === "tr";
+			if (!isRowFocused) {
+				return;
+			}
+			const rows = this.rows;
+			const previouslySelectedRows = this.selectedRows;
+			const currentItemIdx = this.currentItemIdx;
+			if (Keys.isHomeShift(event)) {
+				rows.slice(0, currentItemIdx + 1).forEach(item => {
+					item.selected = true;
+				});
+				rows[0].focus();
+			}
+			if (Keys.isEndShift(event)) {
+				rows.slice(currentItemIdx).forEach(item => {
+					item.selected = true;
+				});
+				rows[rows.length - 1].focus();
+			}
+			const selectedRows = this.selectedRows;
+			this.fireEvent("selection-change", {
+				selectedRows,
+				previouslySelectedRows,
+			});
+		}
+		_handleArrowAlt(shouldMoveUp, focusedElement) {
+			const focusedElementType = this.getFocusedElementType(focusedElement);
+			const moreButton = this.getMoreButton();
+			if (shouldMoveUp) {
+				switch (focusedElementType) {
+				case "tableRow":
+					this._previousFocusedRow = focusedElement;
+					return this._onColumnHeaderClick();
+				case "columnHeader":
+					return moreButton ? moreButton.focus() : this._previousFocusedRow.focus();
+				case "moreButton":
+					return this._previousFocusedRow ? this._previousFocusedRow.focus() : this._onColumnHeaderClick();
+				}
+			} else {
+				switch (focusedElementType) {
+				case "tableRow":
+					this._previousFocusedRow = focusedElement;
+					return moreButton ? moreButton.focus() : this._onColumnHeaderClick();
+				case "columnHeader":
+					if (this._previousFocusedRow) {
+						return this._previousFocusedRow.focus();
+					}
+					if (moreButton) {
+						return moreButton.focus();
+					}
+					return;
+				case "moreButton":
+					return this._onColumnHeaderClick();
+				}
+			}
+		}
+		getFocusedElementType(element) {
+			if (element === this.getColumnHeader()) {
+				return "columnHeader";
+			}
+			if (element === this.getMoreButton()) {
+				return "moreButton";
+			}
+			if (this.rows.includes(element)) {
+				return "tableRow";
+			}
+		}
 		onRowFocused(event) {
 			this._itemNavigation.setCurrentItem(event.target);
 		}
@@ -185,6 +327,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this.getColumnHeader().focus();
 			this._itemNavigation.setCurrentItem(this._columnHeader);
 		}
+		_onColumnHeaderKeydown(event) {
+			if (Keys.isSpace(event)) {
+				event.preventDefault();
+				this.isMultiSelect && this._selectAll();
+			}
+		}
 		_onLoadMoreKeydown(event) {
 			if (Keys.isSpace(event)) {
 				event.preventDefault();
@@ -253,7 +401,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this[`_handle${this.mode}`](event);
 		}
 		_selectAll(event) {
-			const bAllSelected = event.target.checked;
+			const bAllSelected = !this._allRowsSelected;
 			const previouslySelectedRows = this.rows.filter(row => row.selected);
 			this._allRowsSelected = bAllSelected;
 			this.rows.forEach(row => {
@@ -278,6 +426,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		getColumnHeader() {
 			return this.getDomRef() && this.getDomRef().querySelector(`#${this._id}-columnHeader`);
 		}
+		getMoreButton() {
+			return this.growsWithButton && this.getDomRef() && this.getDomRef().querySelector(`#${this._id}-growingButton`);
+		}
 		handleResize(event) {
 			this.checkTableInViewport();
 			this.popinContent(event);
@@ -340,9 +491,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		get styles() {
 			return {
-				table: {
-					height: "48px",
-				},
 				busy: {
 					position: this.busyIndPosition,
 				},
@@ -391,6 +539,15 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		get selectedRows() {
 			return this.rows.filter(row => row.selected);
 		}
+		get currentItemIdx() {
+			return this.rows.indexOf(this.currentItem);
+		}
+		get currentItem() {
+			return this.getRootNode().activeElement;
+		}
+		get currentElement() {
+			return this._itemNavigation._getCurrentItem();
+		}
 	}
 	Table.define();
 

package/src/sap/ui/webc/main/thirdparty/TableColumn.js

@@ -30,9 +30,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			last: {
 				type: Boolean,
 			},
-			sticky: {
-				type: Boolean,
-			},
 		},
 	};
 	class TableColumn extends UI5Element__default {

package/src/sap/ui/webc/main/thirdparty/TableGroupRow.js

@@ -77,6 +77,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			this._colSpan = this.visibleColCount();
 		}
+		_onfocusin(event) {
+			this.parentElement._itemNavigation.setCurrentItem(this);
+		}
 		static async onDefine() {
 			TableGroupRow.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}

package/src/sap/ui/webc/main/thirdparty/TableRow.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', './types/TableMode', './types/TableRowType', './generated/templates/TableRowTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/TableRow.css'], function (UI5Element, Keys, i18nBundle, litRender, TableMode, TableRowType, TableRowTemplate_lit, i18nDefaults, TableRow_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/Keys', './types/TableMode', './types/TableRowType', './generated/templates/TableRowTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/TableRow.css'], function (UI5Element, i18nBundle, litRender, Keys, TableMode, TableRowType, TableRowTemplate_lit, i18nDefaults, TableRow_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -46,6 +46,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				defaultValue: "",
 				noAttribute: true,
 			},
+			_tabbableElements: {
+				type: Object,
+				multiple: true,
+			},
+			_tabMarked: {
+				type: Boolean,
+			},
 		},
 		events:  {
 			"row-click": {},
@@ -75,6 +82,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			const itemSelectable = isSingleSelect || this.isMultiSelect;
 			const isRowFocused = this._getActiveElementTagName() === "ui5-table-row";
 			const checkboxPressed = event.target.classList.contains("ui5-multi-select-checkbox");
+			if (Keys.isTabNext(event) || Keys.isTabPrevious(event)) {
+				this._tabMarked = true;
+			}
+			if (Keys.isTabNext(event) || Keys.isTabPrevious(event)) {
+				this._tabMarked = true;
+			}
 			if (Keys.isSpace(event) && event.target.tagName.toLowerCase() === "tr") {
 				event.preventDefault();
 			}
@@ -89,6 +102,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					}
 				}
 			}
+			if (Keys.isF7(event)) {
+				event.preventDefault();
+				this._handleF7(event.target);
+			}
 		}
 		_onkeyup(event) {
 			if (Keys.isSpace(event) || Keys.isEnter(event)) {
@@ -101,14 +118,21 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		_ontouchend() {
 			this.deactivate();
 		}
-		_onfocusout() {
+		_onfocusout(event) {
 			this.deactivate();
+			if (!this._tabMarked) {
+				this._tabbableElements.forEach(el => el.setAttribute("tabindex", -1));
+			} else {
+				this._tabMarked = false;
+			}
 		}
 		_onfocusin(event, forceSelfFocus = false) {
+			const tableRowRoot = this.shadowRoot.querySelector(".ui5-table-row-root");
 			if (forceSelfFocus || this._getActiveElementTagName() === "ui5-table-cell") {
-				this.shadowRoot.querySelector(".ui5-table-row-root").focus();
+				tableRowRoot.focus();
 				this.activate();
 			}
+			this._tabbableElements.forEach(el => el.setAttribute("tabindex", 0));
 			this.fireEvent("_focused", event);
 		}
 		_onrowclick(event) {
@@ -132,6 +156,31 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		_handleSelection() {
 			this.fireEvent("selection-requested", { row: this });
 		}
+		_handleF7(activeElement) {
+			const elements = this._tabbableElements;
+			if (!elements.length) {
+				return;
+			}
+			const table = this.parentElement;
+			const tableRowRoot = this.shadowRoot.querySelector(".ui5-table-row-root");
+			const prevFocusedIdx = table._prevNestedElementIndex;
+			if (activeElement === tableRowRoot) {
+				const lastFocusedElement = elements[prevFocusedIdx];
+				if (lastFocusedElement) {
+					lastFocusedElement.focus();
+				} else {
+					elements[0].focus();
+				}
+				return;
+			}
+			const shadowRoot = activeElement.shadowRoot;
+			const target = shadowRoot ? shadowRoot.activeElement : activeElement;
+			const targetIndex = elements.indexOf(target);
+			if (targetIndex > -1) {
+				table._prevNestedElementIndex = targetIndex;
+				tableRowRoot.focus();
+			}
+		}
 		_getActiveElementTagName() {
 			return this.getRootNode().activeElement.localName.toLocaleLowerCase();
 		}
@@ -147,7 +196,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		get shouldPopin() {
 			return this._columnsInfo.filter(el => {
-				return el.demandPopin;
+				return el.demandPopin || !el.visible;
 			}).length;
 		}
 		get allColumnsPoppedIn() {

package/src/sap/ui/webc/main/thirdparty/TextArea.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/types/ValueState', './Popover', './generated/templates/TextAreaTemplate.lit', './generated/templates/TextAreaPopoverTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/TextArea.css', './generated/themes/ValueStateMessage.css'], function (UI5Element, litRender, ResizeHandler, Integer, AriaLabelHelper, i18nBundle, FeaturesRegistry, Device, Keys, ValueState, Popover, TextAreaTemplate_lit, TextAreaPopoverTemplate_lit, i18nDefaults, TextArea_css, ValueStateMessage_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/types/ValueState', './Popover', './generated/templates/TextAreaTemplate.lit', './generated/templates/TextAreaPopoverTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/TextArea.css', './generated/themes/ValueStateMessage.css', './generated/themes/BrowserScrollbar.css'], function (UI5Element, litRender, ResizeHandler, Integer, AriaLabelHelper, i18nBundle, FeaturesRegistry, Device, Keys, ValueState, Popover, TextAreaTemplate_lit, TextAreaPopoverTemplate_lit, i18nDefaults, TextArea_css, ValueStateMessage_css, BrowserScrollbar_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -96,7 +96,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return metadata;
 		}
 		static get styles() {
-			return TextArea_css;
+			return [BrowserScrollbar_css, TextArea_css];
 		}
 		static get render() {
 			return litRender__default;
@@ -256,13 +256,14 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		get styles() {
 			const lineHeight = 1.4 * 16;
+			const mainHeight = (this.rows * lineHeight) + (this.showExceededText ? 32 : 0);
 			return {
 				mirror: {
 					"max-height": this._maxHeight,
 				},
 				main: {
 					width: "100%",
-					height: (this.rows && !this.growing) ? `${this.rows * lineHeight}px` : "100%",
+					height: (this.rows && !this.growing) ? `${mainHeight}px` : "100%",
 				},
 				focusDiv: {
 					"height": (this.showExceededText ? "calc(100% - 26px)" : "100%"),
@@ -305,7 +306,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return !this._firstRendering && this._openValueStateMsgPopover && this.displayValueStateMessagePopover;
 		}
 		get displayValueStateMessagePopover() {
-			return this.hasCustomValueState || this.hasValueState || this.exceeding;
+			return !this.readonly && (this.hasCustomValueState || this.hasValueState || this.exceeding);
 		}
 		get hasCustomValueState() {
 			return !!this.valueStateMessage.length && this.hasValueState;
@@ -322,6 +323,18 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			return this.valueStateTextMappings()[this.valueState];
 		}
+		get _valueStatePopoverHorizontalAlign() {
+			return this.effectiveDir !== "rtl" ? "Left" : "Right";
+		}
+		get _valueStateMessageIcon() {
+			const iconPerValueState = {
+				Error: "error",
+				Warning: "alert",
+				Success: "sys-enter-2",
+				Information: "information",
+			};
+			return this.valueState !== ValueState__default.None ? iconPerValueState[this.valueState] : "";
+		}
 		valueStateTextMappings() {
 			return {
 				"Information": TextArea.i18nBundle.getText(i18nDefaults.VALUE_STATE_INFORMATION),

package/src/sap/ui/webc/main/thirdparty/ToggleButton.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/isLegacyBrowser', 'sap/ui/webc/common/thirdparty/base/Keys', './Button', './generated/templates/ToggleButtonTemplate.lit', './generated/themes/ToggleButton.css', './generated/themes/ToggleButton.ie11.css'], function (isLegacyBrowser, Keys, Button, ToggleButtonTemplate_lit, ToggleButton_css, ToggleButton_ie11_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/isLegacyBrowser', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/Device', './Button', './generated/templates/ToggleButtonTemplate.lit', './generated/themes/ToggleButton.css', './generated/themes/ToggleButton.ie11.css'], function (isLegacyBrowser, Keys, Device, Button, ToggleButtonTemplate_lit, ToggleButton_css, ToggleButton_ie11_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -25,6 +25,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/isLegacyBrowser', 'sap/ui/web
 		}
 		_onclick() {
 			this.pressed = !this.pressed;
+			if (Device.isSafari()) {
+				this.getDomRef().focus();
+			}
 		}
 		_onkeyup(event) {
 			if (Keys.isSpaceShift(event)) {

package/src/sap/ui/webc/main/thirdparty/Token.js

@@ -14,6 +14,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			readonly: { type: Boolean },
 			overflows: { type: Boolean },
 			selected: { type: Boolean },
+			focused: { type: Boolean },
 			_tabIndex: { type: String, defaultValue: "-1", noAttribute: true },
 		},
 		slots:  {
@@ -47,6 +48,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		_handleSelect() {
 			this.selected = !this.selected;
 			this.fireEvent("select");
+		}
+		_focusin() {
+			this.focused = true;
+		}
+		_focusout() {
+			this.focused = !this.focused;
 		}
 		 _delete() {
 			this.fireEvent("delete");
@@ -70,7 +77,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return Token.i18nBundle.getText(i18nDefaults.TOKEN_ARIA_DELETABLE);
 		}
 		get iconURI() {
-			return Theme.getTheme() === "sap_fiori_3" ? "decline" : "sys-cancel";
+			if (Theme.getTheme().includes("sap_belize")) {
+				return "sys-cancel";
+			}
+			return "decline";
 		}
 		static get dependencies() {
 			return [Icon];

package/src/sap/ui/webc/main/thirdparty/Tokenizer.js

@@ -147,8 +147,71 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		_onkeydown(event) {
 			if (Keys.isSpace(event)) {
 				event.preventDefault();
-				this._handleTokenSelection(event);
+				return this._handleTokenSelection(event, false);
 			}
+			this._handleItemNavigation(event, this.tokens);
+		}
+		_handleItemNavigation(event, tokens) {
+			const isCtrl = !!(event.metaKey || event.ctrlKey);
+			if (Keys.isLeftCtrl(event) || Keys.isRightCtrl(event)) {
+				event.preventDefault();
+				return this._handleArrowCtrl(event.target, tokens, Keys.isRightCtrl(event));
+			}
+			if (Keys.isLeftCtrl(event)) {
+				event.preventDefault();
+				return this._handleArrowCtrl(event.target, tokens, false);
+			}
+			if (Keys.isLeftShift(event) || Keys.isRightShift(event) || Keys.isLeftShiftCtrl(event) || Keys.isRightShiftCtrl(event)) {
+				event.preventDefault();
+				return this._handleArrowShift(event.target, tokens, (Keys.isRightShift(event) || Keys.isRightShiftCtrl(event)));
+			}
+			if (Keys.isHome(event) || Keys.isEnd(event)) {
+				return this._handleHome(tokens, Keys.isEnd(event));
+			}
+			if (isCtrl && event.key.toLowerCase() === "a") {
+				event.preventDefault();
+				return this._toggleTokenSelection(tokens);
+			}
+		}
+		_handleHome(tokens, endKeyPressed) {
+			if (!tokens || !tokens.length) {
+				return -1;
+			}
+			const index = endKeyPressed ? tokens.length - 1 : 0;
+			tokens[index].focus();
+			this._itemNav.setCurrentItem(tokens[index]);
+		}
+		_calcNextTokenIndex(focusedToken, tokens, backwards) {
+			if (!tokens.length) {
+				return -1;
+			}
+			const focusedTokenIndex = tokens.indexOf(focusedToken);
+			let nextIndex = backwards ? (focusedTokenIndex + 1) : (focusedTokenIndex - 1);
+			if (nextIndex >= tokens.length) {
+				nextIndex = tokens.length - 1;
+			}
+			if (nextIndex < 0) {
+				nextIndex = 0;
+			}
+			return nextIndex;
+		}
+		_handleArrowCtrl(focusedToken, tokens, backwards) {
+			const nextIndex = this._calcNextTokenIndex(focusedToken, tokens, backwards);
+			if (nextIndex === -1) {
+				return;
+			}
+			tokens[nextIndex].focus();
+			this._itemNav.setCurrentItem(tokens[nextIndex]);
+		}
+		_handleArrowShift(focusedToken, tokens, backwards) {
+			const nextIndex = this._calcNextTokenIndex(focusedToken, tokens, backwards);
+			if (nextIndex === -1) {
+				return;
+			}
+			focusedToken.selected = true;
+			tokens[nextIndex].selected = true;
+			tokens[nextIndex].focus();
+			this._itemNav.setCurrentItem(tokens[nextIndex]);
 		}
 		_click(event) {
 			this._handleTokenSelection(event);
@@ -156,15 +219,37 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		_onmousedown(event) {
 			this._itemNav.setCurrentItem(event.target);
 		}
-		_handleTokenSelection(event) {
-			if (event.target.localName === "ui5-token") {
-				this._tokens.forEach(token => {
+		_toggleTokenSelection(tokens) {
+			if (!tokens || !tokens.length) {
+				return;
+			}
+			const tokensAreSelected = tokens.every(token => token.selected);
+			tokens.forEach(token => { token.selected = !tokensAreSelected; });
+		}
+		_handleTokenSelection(event, deselectAll = true) {
+			if (event.target.hasAttribute("ui5-token")) {
+				const deselectTokens = deselectAll ? this._tokens : [event.target];
+				deselectTokens.forEach(token => {
 					if (token !== event.target) {
 						token.selected = false;
 					}
 				});
 			}
 		}
+		_fillClipboard(shortcutName, tokens) {
+			const tokensTexts = tokens.filter(token => token.selected).map(token => token.text).join("\r\n");
+			const cutToClipboard = event => {
+				if (event.clipboardData) {
+					event.clipboardData.setData("text/plain", tokensTexts);
+				} else {
+					event.originalEvent.clipboardData.setData("text/plain", tokensTexts);
+				}
+				event.preventDefault();
+			};
+			document.addEventListener(shortcutName, cutToClipboard);
+			document.execCommand(shortcutName);
+			document.removeEventListener(shortcutName, cutToClipboard);
+		}
 		scrollToStart() {
 			this.contentDom.scrollLeft = 0;
 		}
@@ -191,13 +276,16 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			if (!this.contentDom) {
 				return [];
 			}
+			this._getTokens().forEach(token => {
+				token.overflows = false;
+			});
 			return this._getTokens().filter(token => {
 				const isRTL = this.effectiveDir === "rtl";
 				const elementEnd = isRTL ? "left" : "right";
 				const parentRect = this.contentDom.getBoundingClientRect();
 				const tokenRect = token.getBoundingClientRect();
-				const tokenEnd = tokenRect[elementEnd];
-				const parentEnd = parentRect[elementEnd];
+				const tokenEnd = parseInt(tokenRect[elementEnd]);
+				const parentEnd = parseInt(parentRect[elementEnd]);
 				token.overflows = isRTL ? ((tokenEnd < parentEnd) && !this.expanded) : ((tokenEnd > parentEnd) && !this.expanded);
 				return token.overflows;
 			});

package/src/sap/ui/webc/main/thirdparty/TreeItem.js

@@ -14,6 +14,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			expanded: {
 				type: Boolean,
 			},
+			indeterminate: {
+				type: Boolean,
+			},
 			hasChildren: {
 				type: Boolean,
 			},