@ui5/webcomponents 1.9.0 → 1.9.2

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.9.1](https://github.com/SAP/ui5-webcomponents/compare/v1.9.0...v1.9.1) (2022-11-10)
+
+**Note:** Version bump only for package @ui5/webcomponents
+
+
+
+
+
+# [1.9.0](https://github.com/SAP/ui5-webcomponents/compare/v1.8.0...v1.9.0) (2022-10-31)
+
+
+### Bug Fixes
+
+* **form support:** remove additional fields from ACC tree ([#5922](https://github.com/SAP/ui5-webcomponents/issues/5922)) ([fed99ed](https://github.com/SAP/ui5-webcomponents/commit/fed99ed5a51730aa2fd4cf016f68a17b6f770154)), closes [#5917](https://github.com/SAP/ui5-webcomponents/issues/5917)
+* make static are items recognizable to openui5 dialogs ([#5888](https://github.com/SAP/ui5-webcomponents/issues/5888)) ([efaa1d6](https://github.com/SAP/ui5-webcomponents/commit/efaa1d6e60f965ef0f8479adcd823e1bf5396992)), closes [#5634](https://github.com/SAP/ui5-webcomponents/issues/5634)
+* **ui5-combobox:** announce additional text of selected item ([#5943](https://github.com/SAP/ui5-webcomponents/issues/5943)) ([4c1ca7d](https://github.com/SAP/ui5-webcomponents/commit/4c1ca7db79b8c26b621d45bf4e3a788b24315cb3))
+* **ui5-icon:** visualize the icons properly in Safari ([#5871](https://github.com/SAP/ui5-webcomponents/issues/5871)) ([3f255d9](https://github.com/SAP/ui5-webcomponents/commit/3f255d9410f1c583a58db5d6c2c4a7232c929995))
+* **ui5-input:** type composition characters correctly ([#5869](https://github.com/SAP/ui5-webcomponents/issues/5869)) ([5f61d11](https://github.com/SAP/ui5-webcomponents/commit/5f61d1190e4d592ad69a256b8890840869d5cfb7))
+* **ui5-label:** improve "for" attribute accessibility reading ([#5872](https://github.com/SAP/ui5-webcomponents/issues/5872)) ([b9ffaa6](https://github.com/SAP/ui5-webcomponents/commit/b9ffaa6f0353e9e8136019978299548021555643))
+* **ui5-li:** apply proper border radius to avatar with image ([#5942](https://github.com/SAP/ui5-webcomponents/issues/5942)) ([f200a76](https://github.com/SAP/ui5-webcomponents/commit/f200a76ef667f867cdd4d323aba0d1e0eb00f53d))
+* **ui5-listitem:** prevent default event action when fire custom press event ([#5928](https://github.com/SAP/ui5-webcomponents/issues/5928)) ([ed1efcc](https://github.com/SAP/ui5-webcomponents/commit/ed1efccc2190512dbafbaffd76f88471c0f3467e))
+* **ui5-multi-input:** import value help icon ([#5972](https://github.com/SAP/ui5-webcomponents/issues/5972)) ([b36be95](https://github.com/SAP/ui5-webcomponents/commit/b36be95bf05036fb390039928f77885efb79f9ad))
+* **ui5-radio-button:** improve acc ([#5880](https://github.com/SAP/ui5-webcomponents/issues/5880)) ([6616897](https://github.com/SAP/ui5-webcomponents/commit/66168972b54c6d20801be5ced4bb6ca04506ad75))
+* **ui5-tabcontainer:** translate semantic design aria description ([#5883](https://github.com/SAP/ui5-webcomponents/issues/5883)) ([f256d0b](https://github.com/SAP/ui5-webcomponents/commit/f256d0b2f36d9a085e1e0b2843c3f10a63800fc2))
+* **ui5-table-row:** refactor navigated property ([#5976](https://github.com/SAP/ui5-webcomponents/issues/5976)) ([ba264af](https://github.com/SAP/ui5-webcomponents/commit/ba264afb386f256ccaecd4a056acb95429fb58c3))
+* **ui5-table:** announce whether a row is selected or not ([#5930](https://github.com/SAP/ui5-webcomponents/issues/5930)) ([4d34fe9](https://github.com/SAP/ui5-webcomponents/commit/4d34fe9eb9a343634774292b2eac7c12d5876b30))
+* **ui5-table:** enable focus navigation in popin content ([#5900](https://github.com/SAP/ui5-webcomponents/issues/5900)) ([9fd81e2](https://github.com/SAP/ui5-webcomponents/commit/9fd81e2097e5099c04567961e9df97049fb8e6cc))
+* **ui5-table:** remove role row as it is redundant ([#5939](https://github.com/SAP/ui5-webcomponents/issues/5939)) ([a7fe699](https://github.com/SAP/ui5-webcomponents/commit/a7fe6994505986245571a5d28f070e4990e3b4a2))
+* **ui5-time-picker:** enable text spacing ([#5940](https://github.com/SAP/ui5-webcomponents/issues/5940)) ([da7ae70](https://github.com/SAP/ui5-webcomponents/commit/da7ae70b6a672d3dac3defa0387fe910bd9594f7)), closes [#5792](https://github.com/SAP/ui5-webcomponents/issues/5792)
+
+
+### Features
+
+* **framework:** generate custom elements manifest ([#5964](https://github.com/SAP/ui5-webcomponents/issues/5964)) ([0d62770](https://github.com/SAP/ui5-webcomponents/commit/0d62770cace54fd9aef73d9632dd06d8a83680e9))
+* **ui5-avatar:** support of 3 letters is enabled ([#5870](https://github.com/SAP/ui5-webcomponents/issues/5870)) ([43338e1](https://github.com/SAP/ui5-webcomponents/commit/43338e1dba3053f4af273de78e86f5c36b7aa2a3))
+* **ui5-li:** introduce deleteButton slot ([#5971](https://github.com/SAP/ui5-webcomponents/issues/5971)) ([ca40efd](https://github.com/SAP/ui5-webcomponents/commit/ca40efdd1465903a2dc0d50f31f5213a34dbe7a1)), closes [#5826](https://github.com/SAP/ui5-webcomponents/issues/5826)
+* **ui5-link:** make acceessibleRole property public ([#5879](https://github.com/SAP/ui5-webcomponents/issues/5879)) ([6ce8b2d](https://github.com/SAP/ui5-webcomponents/commit/6ce8b2dee9cbf0ccbe2d310a241f02c173d85cd9)), closes [#5686](https://github.com/SAP/ui5-webcomponents/issues/5686)
+* **ui5-radiobutton:** add "required" property ([#5937](https://github.com/SAP/ui5-webcomponents/issues/5937)) ([621b87a](https://github.com/SAP/ui5-webcomponents/commit/621b87a4f62a41ee603255b2982efb6d34782da3))
+* **ui5-switch:** provide tooltip property ([#5954](https://github.com/SAP/ui5-webcomponents/issues/5954)) ([5b5db73](https://github.com/SAP/ui5-webcomponents/commit/5b5db734e1e3ff475867b5e8d243b146163ee14e)), closes [#5552](https://github.com/SAP/ui5-webcomponents/issues/5552)
+* **ui5-table-row:** added navigated property ([#5946](https://github.com/SAP/ui5-webcomponents/issues/5946)) ([3c2a8a3](https://github.com/SAP/ui5-webcomponents/commit/3c2a8a3079f7d5598c281b294e184ae960db7470))
+
+
+
+
+
 # [1.8.0](https://github.com/SAP/ui5-webcomponents/compare/v1.7.1...v1.8.0) (2022-10-03)
 
 

package/dist/List.js

@@ -535,7 +535,7 @@ class List extends UI5Element {
 	}
 
 	get hasData() {
-		return this.getSlottedNodes("items").length !== 0;
+		return this.getItems().length !== 0;
 	}
 
 	get showNoDataText() {
@@ -644,7 +644,7 @@ class List extends UI5Element {
 	}
 
 	prepareListItems() {
-		const slottedItems = this.getSlottedNodes("items");
+		const slottedItems = this.getItems();
 
 		slottedItems.forEach((item, key) => {
 			const isLastChild = key === slottedItems.length - 1;
@@ -746,11 +746,15 @@ class List extends UI5Element {
 	}
 
 	getSelectedItems() {
-		return this.getSlottedNodes("items").filter(item => item.selected);
+		return this.getItems().filter(item => item.selected);
 	}
 
 	getEnabledItems() {
-		return this.getSlottedNodes("items").filter(item => !item.disabled);
+		return this.getItems().filter(item => !item.disabled);
+	}
+
+	getItems() {
+		return this.getSlottedNodes("items");
 	}
 
 	_onkeydown(event) {
@@ -1053,7 +1057,7 @@ class List extends UI5Element {
 	}
 
 	getFirstItem(filter) {
-		const slottedItems = this.getSlottedNodes("items");
+		const slottedItems = this.getItems();
 		let firstItem = null;
 
 		if (!filter) {

package/dist/ListItemBase.js

@@ -138,7 +138,7 @@ class ListItemBase extends UI5Element {
 	* [TAB] is performed onto the last tabbale content item.
 	*/
 	shouldForwardTabAfter(target) {
-		const aContent = getTabbableElements(this.getDomRef());
+		const aContent = getTabbableElements(this.getFocusDomRef());
 
 		if (target.getFocusDomRef) {
 			target = target.getFocusDomRef();
@@ -151,7 +151,7 @@ class ListItemBase extends UI5Element {
 	* Determines if the current list item is target of [SHIFT+TAB].
 	*/
 	shouldForwardTabBefore(target) {
-		return this.getDomRef() === target;
+		return this.getFocusDomRef() === target;
 	}
 
 	get classes() {

package/dist/TabContainer.js

@@ -32,6 +32,7 @@ import List from "./List.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js";
 import SemanticColor from "./types/SemanticColor.js";
+import TabContainerBackgroundDesign from "./types/TabContainerBackgroundDesign.js";
 
 // Templates
 import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js";
@@ -191,7 +192,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the overflow mode of the tab strip. If you have a large number of tabs, only the tabs that can fit on screen will be visible.
+		 * Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.
 		 * All other tabs that can 't fit on the screen are available in an overflow tab "More".
 		 *
 		 * <br><br>
@@ -226,6 +227,32 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Sets the background color of the Tab Container's header as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
+		 *
+		 * @type {sap.ui.webcomponents.main.types.TabContainerBackgroundDesign.prototype}
+		 * @defaultvalue "Solid"
+		 * @since 1.10.0
+		 * @public
+		 */
+		headerBackgroundDesign: {
+			type: TabContainerBackgroundDesign,
+			defaultValue: TabContainerBackgroundDesign.Solid,
+		},
+
+		/**
+		 * Sets the background color of the Tab Container's content as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
+		 *
+		 * @type {sap.ui.webcomponents.main.types.TabContainerBackgroundDesign.prototype}
+		 * @defaultvalue "Solid"
+		 * @since 1.10.0
+		 * @public
+		 */
+		contentBackgroundDesign: {
+			type: TabContainerBackgroundDesign,
+			defaultValue: TabContainerBackgroundDesign.Solid,
+		},
+
 		_selectedTab: {
 			type: Object,
 		},

package/dist/Table.js

@@ -1068,8 +1068,10 @@ class Table extends UI5Element {
 			this.columns[visibleColumnsIndexes[visibleColumnsIndexes.length - 1]].last = true;
 		}
 
+		const hiddenColumnsChange = (this._hiddenColumns.length !== hiddenColumns.length) || this._hiddenColumns.some((column, index) => column !== hiddenColumns[index]);
+
 		// invalidate only if hidden columns count has changed
-		if (this._hiddenColumns.length !== hiddenColumns.length) {
+		if (hiddenColumnsChange) {
 			this._hiddenColumns = hiddenColumns;
 			if (hiddenColumns.length) {
 				this.fireEvent("popin-change", {

package/dist/TextArea.js

@@ -181,7 +181,6 @@ const metadata = {
 		/**
 		 * Enables the component to automatically grow and shrink dynamically with its content.
 		 * <br><br>
-		 * <b>Note:</b> If set to <code>true</code>, the CSS <code>height</code> property is ignored.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -411,12 +410,7 @@ class TextArea extends UI5Element {
 		this._mirrorText = this._tokenizeText(this.value);
 
 		this.exceeding = this._exceededTextProps.leftCharactersCount < 0;
-
-		if (this.growingMaxLines) {
-			// this should be complex calc between line height and paddings - TODO: make it stable
-			this._maxHeight = `${this.growingMaxLines * 1.4 * 14 + 9}px`;
-		}
-
+		this._setCSSParams();
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this);
@@ -426,6 +420,14 @@ class TextArea extends UI5Element {
 	}
 
 	onAfterRendering() {
+		const nativeTextArea = this.getInputDomRef();
+
+		if (this.rows === 1) {
+			nativeTextArea.setAttribute("rows", 1);
+		} else {
+			nativeTextArea.removeAttribute("rows");
+		}
+
 		this.toggleValueStateMessage(this.openValueStateMsgPopover);
 		this._firstRendering = false;
 	}
@@ -490,6 +492,11 @@ class TextArea extends UI5Element {
 		}
 	}
 
+	_setCSSParams() {
+		this.style.setProperty("--_textarea_rows", this.rows || "2");
+		this.style.setProperty("--_textarea_growing_max_lines", this.growingMaxLines);
+	}
+
 	toggleValueStateMessage(toggle) {
 		if (toggle) {
 			this.openPopover();
@@ -500,7 +507,7 @@ class TextArea extends UI5Element {
 
 	async openPopover() {
 		this.popover = await this._getPopover();
-		this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-inner"));
+		this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-root .ui5-textarea-wrapper"));
 	}
 
 	async closePopover() {
@@ -575,21 +582,7 @@ class TextArea extends UI5Element {
 	}
 
 	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) ? `${mainHeight}px` : "100%",
-			},
-			focusDiv: {
-				"height": (this.showExceededText ? "calc(100% - 26px)" : "100%"),
-				"max-height": (this._maxHeight),
-			},
 			valueStateMsgPopover: {
 				"max-width": `${this._width}px`,
 			},

package/dist/Tree.js

@@ -2,8 +2,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import TreeItem from "./TreeItem.js";
-import List from "./List.js";
-import TreeListItem from "./TreeListItem.js";
+import TreeItemCustom from "./TreeItemCustom.js";
+import TreeList from "./TreeList.js";
 import ListMode from "./types/ListMode.js";
 
 // Template
@@ -332,15 +332,14 @@ class Tree extends UI5Element {
 
 	static get dependencies() {
 		return [
-			List,
-			TreeListItem,
+			TreeList,
 			TreeItem,
+			TreeItemCustom,
 		];
 	}
 
 	onBeforeRendering() {
-		this._listItems = [];
-		buildTree(this, 1, this._listItems);
+		this._prepareTreeItems();
 	}
 
 	get list() {
@@ -356,28 +355,25 @@ class Tree extends UI5Element {
 	}
 
 	_onListItemStepIn(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		if (treeItem.items.length > 0) {
 			const firstChild = treeItem.items[0];
-			const firstChildListItem = this.list.getSlottedNodes("items").find(li => li.treeItem === firstChild);
+			const firstChildListItem = this._getListItemForTreeItem(firstChild);
 			firstChildListItem && this.list.focusItem(firstChildListItem);
 		}
 	}
 
 	_onListItemStepOut(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		if (treeItem.parentElement !== this) {
 			const parent = treeItem.parentElement;
-			const parentListItem = this.list.getSlottedNodes("items").find(li => li.treeItem === parent);
+			const parentListItem = this._getListItemForTreeItem(parent);
 			parentListItem && this.list.focusItem(parentListItem);
 		}
 	}
 
 	_onListItemToggle(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		const defaultPrevented = !this.fireEvent("item-toggle", { item: treeItem }, true);
 		if (!defaultPrevented) {
 			treeItem.toggle();
@@ -385,8 +381,7 @@ class Tree extends UI5Element {
 	}
 
 	_onListItemClick(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 
 		if (!this.fireEvent("item-click", { item: treeItem }, true)) {
 			event.preventDefault();
@@ -394,27 +389,30 @@ class Tree extends UI5Element {
 	}
 
 	_onListItemDelete(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		this.fireEvent("item-delete", { item: treeItem });
 	}
 
 	_onListItemMouseOver(event) {
-		const treeItem = event.target.treeItem;
+		const target = event.target;
 
-		this.fireEvent("item-mouseover", { item: treeItem });
+		if (target.isTreeItem) {
+			this.fireEvent("item-mouseover", { item: target });
+		}
 	}
 
 	_onListItemMouseOut(event) {
-		const treeItem = event.target.treeItem;
+		const target = event.target;
 
-		this.fireEvent("item-mouseout", { item: treeItem });
+		if (target.isTreeItem) {
+			this.fireEvent("item-mouseout", { item: target });
+		}
 	}
 
 	_onListSelectionChange(event) {
-		const previouslySelectedItems = event.detail.previouslySelectedItems.map(item => item.treeItem);
-		const selectedItems = event.detail.selectedItems.map(item => item.treeItem);
-		const targetItem = event.detail.targetItem.treeItem;
+		const previouslySelectedItems = event.detail.previouslySelectedItems;
+		const selectedItems = event.detail.selectedItems;
+		const targetItem = event.detail.targetItem;
 
 		previouslySelectedItems.forEach(item => {
 			item.selected = false;
@@ -430,6 +428,21 @@ class Tree extends UI5Element {
 		});
 	}
 
+	_prepareTreeItems() {
+		// set level to tree items
+		this.walk((item, level, index) => {
+			const parent = item.parentNode;
+			const ariaSetSize = (parent && parent.children.length) || this.items.length;
+
+			item.setAttribute("level", level);
+
+			item._toggleButtonEnd = this._toggleButtonEnd;
+			item._minimal = this._minimal;
+			item._setsize = ariaSetSize;
+			item._posinset = index + 1;
+		});
+	}
+
 	/**
 	 * Returns the corresponding list item for a given tree item
 	 *
@@ -437,14 +450,33 @@ class Tree extends UI5Element {
 	 * @protected
 	 */
 	_getListItemForTreeItem(item) {
-		return this.list.items.find(listItem => listItem.treeItem === item);
+		return this.getItems().find(listItem => listItem === item);
+	}
+
+	/**
+	 * Returns the a flat array of all tree items
+	 * @protected
+	 * @returns {Array}
+	 */
+	getItems() {
+		return this.list.getItems();
+	}
+
+	/**
+	 * Focus a tree item by its index in the flat array of all tree items
+	 * @protected
+	 * @param index
+	 */
+	focusItemByIndex(index) {
+		const item = this.getItems()[index];
+		item && this.list.focusItem(item);
 	}
 
 	/**
 	 * Perform Depth-First-Search walk on the tree and run a callback on each node
 	 *
 	 * @public
-	 * @param {function} callback function to execute on each node of the tree with 2 arguments: the node and the level
+	 * @param {function} callback function to execute on each node of the tree with 3 arguments: the node, the level and the index
 	 */
 	walk(callback) {
 		walkTree(this, 1, callback);
@@ -452,30 +484,14 @@ class Tree extends UI5Element {
 }
 
 const walkTree = (el, level, callback) => {
-	el.items.forEach(item => {
-		callback(item, level);
+	el.items.forEach((item, index) => {
+		callback(item, level, index);
 		if (item.items.length > 0) {
 			walkTree(item, level + 1, callback);
 		}
 	});
 };
 
-const buildTree = (el, level, result) => {
-	el.items.forEach((item, index) => {
-		const listItem = {
-			treeItem: item,
-			size: el.items.length,
-			posinset: index + 1,
-			level,
-		};
-
-		result.push(listItem);
-		if (item.expanded && item.items.length > 0) {
-			buildTree(item, level + 1, result);
-		}
-	});
-};
-
 Tree.define();
 
 export default Tree;

package/dist/TreeItem.js

@@ -1,12 +1,17 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import TreeItemBase from "./TreeItemBase.js";
+// Template
+import TreeItemTemplate from "./generated/templates/TreeItemTemplate.lit.js";
+
+// Styles
+import treeItemCss from "./generated/themes/TreeItem.css.js";
 
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-tree-item",
-	properties: /** @lends sap.ui.webcomponents.main.TreeItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TreeItem.prototype */ {
 
 		/**
 		 * Defines the text of the tree item.
@@ -19,76 +24,6 @@ const metadata = {
 			type: String,
 		},
 
-		/**
-		 * Defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		expanded: {
-			type: Boolean,
-		},
-		/**
-		* Defines whether the selection of a tree node is displayed as partially selected.
-		* <br><br>
-		* <b>Note:</b> The indeterminate state can be set only programmatically and can’t be achieved by user
-		* interaction, meaning that the resulting visual state depends on the values of the <code>indeterminate</code>
-		* and <code>selected</code> properties:
-		* <ul>
-		* <li> If a tree node has both <code>selected</code> and <code>indeterminate</code> set to <code>true</code>, it is displayed as partially selected.
-		* <li> If a tree node has <code>selected</code> set to <code>true</code> and <code>indeterminate</code> set to <code>false</code>, it is displayed as selected.
-		* <li> If a tree node has <code>selected</code> set to <code>false</code>, it is displayed as not selected regardless of the value of the <code>indeterminate</code> property.
-		* </ul>
-		* <br>
-		* <b>Note:</b> This property takes effect only when the <code>ui5-tree</code> is in <code>MultiSelect</code> mode.
-		* @type {boolean}
-		* @defaultvalue false
-		* @public
-		* @since 1.1.0
-		*/
-		indeterminate: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.
-		 * <br>
-		 * <i>Note:</i> This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.
-		 * Set this to <code>true</code> for nodes you intend to load lazily, when the user clicks the expand button.
-		 * It is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		hasChildren: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the tree node is selected by the user. Only has effect if the <code>ui5-tree</code> is in one of the
-		 * following modes: in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code>.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		selected: {
-			type: Boolean,
-		},
-
-		/**
-		 * If set, an icon will be displayed before the text, representing the tree item.
-		 *
-		 * @public
-		 * @type {string}
-		 * @defaultValue ""
-		 */
-		icon: {
-			type: String,
-		},
-
 		/**
 		 * Defines the <code>additionalText</code>, displayed in the end of the tree item.
 		 * @type {string}
@@ -103,7 +38,7 @@ const metadata = {
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
 		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
-		 * @type {sap.ui.webcomponents.base.types.ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -112,87 +47,55 @@ const metadata = {
 			type: ValueState,
 			defaultValue: ValueState.None,
 		},
-
-		/**
-		 * Defines the accessible name of the component.
-		 *
-		 * @type {string}
-		 * @defaultvalue: ""
-		 * @public
-		 * @since 1.8.0
-		 */
-		accessibleName: {
-			type: String,
-		},
-
-		/**
-		 * Defines the tooltip of the component.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.15
-		 */
-		title: {
-			type: String,
-		},
-	},
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.TreeItem.prototype */ {
-
-		/**
-		 * Defines the items of this component.
-		 *
-		 * @type {sap.ui.webcomponents.main.ITreeItem[]}
-		 * @slot items
-		 * @public
-		 */
-		"default": {
-			propertyName: "items",
-			type: HTMLElement,
-			invalidateOnChildChange: true,
-		},
 	},
 };
 
 /**
  * @class
- *
  * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-tree-item</code> represents a node in a tree structure, shown as a <code>ui5-list</code>.
+ * <br>
  * This is the item to use inside a <code>ui5-tree</code>.
  * You can represent an arbitrary tree structure by recursively nesting tree items.
  *
- * <h3>Usage</h3>
- * <code>ui5-tree-item</code> is an abstract element, representing a node in a <code>ui5-tree</code>. The tree itself is rendered as a list,
- * and each <code>ui5-tree-item</code> is represented by a list item(<code>ui5-li-tree</code>) in that list. Therefore, you should only use
- * <code>ui5-tree-item</code> directly in your apps. The <code>ui5-li-tree</code> list item is internal for the list, and not intended for public use.
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-tree-item</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title - Used to style the title of the tree list item</li>
+ * <li>additionalText - Used to style the additionalText of the tree list item</li>
+ * <li>icon - Used to style the icon of the tree list item</li>
+ * </ul>
  *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents/dist/TreeItem.js";</code>
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TreeItem
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.TreeItem
+ * @extends sap.ui.webc.main.TreeItemBase
  * @tagname ui5-tree-item
  * @public
- * @implements sap.ui.webcomponents.main.ITreeItem
+ * @implements sap.ui.webc.main.ITreeItem
  * @since 1.0.0-rc.8
  */
-class TreeItem extends UI5Element {
-	static get metadata() {
-		return metadata;
+class TreeItem extends TreeItemBase {
+	static get template() {
+		return TreeItemTemplate;
 	}
 
-	get requiresToggleButton() {
-		return this.hasChildren || this.items.length > 0;
+	static get styles() {
+		return [...super.styles, treeItemCss];
+	}
+
+	static get metadata() {
+		return metadata;
 	}
 
-	/**
-	 * Call this method to manually switch the <code>expanded</code> state of a tree item.
-	 * @public
-	 */
-	toggle() {
-		this.expanded = !this.expanded;
+	get _showTitle() {
+		return this.text.length && !this._minimal;
 	}
 }