@ui5/webcomponents-fiori 0.0.0-e0658a650 → 0.0.0-e55c2cec6

package/src/ShellBar.js

@@ -46,7 +46,7 @@ const metadata = {
 	tag: "ui5-shellbar",
 	languageAware: true,
 	fastNavigation: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.ShellBar.prototype */ {
 
 		/**
 		 * Defines the <code>primaryTitle</code>.
@@ -152,7 +152,39 @@ const metadata = {
 		 * @public
 		 * @since 1.1.0
 		 */
-		 accessibilityTexts: {
+		accessibilityTexts: {
+			type: Object,
+		},
+
+		/**
+		 * An object of strings that defines several additional accessibility attribute values
+		 * for customization depending on the use case.
+		 *
+		 * It supports the following fields:
+		 *
+		 * <ul>
+		 * 		<li><code>expanded</code>: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
+		 *			<ul>
+		 *				<li><code>true</code></li>
+		 *				<li><code>false</code></li>
+		 *			</ul>
+		 * 		</li>
+		 * 		<li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the anchor element. Accepts the following string values:
+		 * 			<ul>
+		 *				<li><code>Dialog</code></li>
+		 *				<li><code>Grid</code></li>
+		 *				<li><code>ListBox</code></li>
+		 *				<li><code>Menu</code></li>
+		 *				<li><code>Tree</code></li>
+		 * 			</ul>
+		 * 		</li>
+		 * </ul>
+		 * @type {object}
+		 * @public
+		 * @since 1.10.0
+		 */
+
+		accessibilityAttributes: {
 			type: Object,
 		},
 
@@ -205,14 +237,14 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.ShellBar.prototype */ {
 		/**
 		 * Defines the <code>ui5-shellbar</code> aditional items.
 		 * <br><br>
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-shellbar-item>&lt;/ui5-shellbar-item>.
 		 *
-		 * @type {sap.ui.webcomponents.fiori.IShellBarItem[]}
+		 * @type {sap.ui.webc.fiori.IShellBarItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -228,7 +260,7 @@ const metadata = {
 		 *
 		 * Note: We recommend not using the <code>size</code> attribute of <code>ui5-avatar</code> because
 		 * it should have specific size by design in the context of <code>ui5-shellbar</code> profile.
-		 * @type {sap.ui.webcomponents.main.IAvatar}
+		 * @type {sap.ui.webc.main.IAvatar}
 		 * @slot
 		 * @since 1.0.0-rc.6
 		 * @public
@@ -240,7 +272,7 @@ const metadata = {
 		/**
 		 * Defines the logo of the <code>ui5-shellbar</code>.
 		 * For example, you can use <code>ui5-avatar</code> or <code>img</code> elements as logo.
-		 * @type {sap.ui.webcomponents.main.IAvatar}
+		 * @type {sap.ui.webc.main.IAvatar}
 		 * @slot
 		 * @since 1.0.0-rc.8
 		 * @public
@@ -255,7 +287,7 @@ const metadata = {
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors.
 		 *
-		 * @type {sap.ui.webcomponents.main.IListItem[]}
+		 * @type {sap.ui.webc.main.IListItem[]}
 		 * @slot
 		 * @since 0.10
 		 * @public
@@ -267,7 +299,7 @@ const metadata = {
 		/**
 		 * Defines the <code>ui5-input</code>, that will be used as a search field.
 		 *
-		 * @type {sap.ui.webcomponents.main.IInput}
+		 * @type {sap.ui.webc.main.IInput}
 		 * @slot
 		 * @public
 		 */
@@ -280,7 +312,7 @@ const metadata = {
 		 * We encourage this slot to be used for a back or home button.
 		 * It gets overstyled to match ShellBar's styling.
 		 *
-		 * @type {sap.ui.webcomponents.main.IButton}
+		 * @type {sap.ui.webc.main.IButton}
 		 * @slot
 		 * @public
 		 */
@@ -288,13 +320,13 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.ShellBar.prototype */ {
 		/**
 		 *
 		 * Fired, when the notification icon is activated.
 		 *
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#notifications-click
+		 * @event sap.ui.webc.fiori.ShellBar#notifications-click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
@@ -308,7 +340,7 @@ const metadata = {
 		/**
 		 * Fired, when the profile slot is present.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#profile-click
+		 * @event sap.ui.webc.fiori.ShellBar#profile-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
@@ -322,7 +354,7 @@ const metadata = {
 		 * Fired, when the product switch icon is activated.
 		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#product-switch-click
+		 * @event sap.ui.webc.fiori.ShellBar#product-switch-click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
@@ -336,7 +368,7 @@ const metadata = {
 		/**
 		 * Fired, when the logo is activated.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#logo-click
+		 * @event sap.ui.webc.fiori.ShellBar#logo-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
@@ -350,7 +382,7 @@ const metadata = {
 		/**
 		 * Fired, when the co pilot is activated.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#co-pilot-click
+		 * @event sap.ui.webc.fiori.ShellBar#co-pilot-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
@@ -365,7 +397,7 @@ const metadata = {
 		 * Fired, when a menu item is activated
 		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#menu-item-click
+		 * @event sap.ui.webc.fiori.ShellBar#menu-item-click
 		 * @param {HTMLElement} item DOM ref of the activated list item
 		 * @since 0.10
 		 * @public
@@ -420,8 +452,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ShellBar
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.ShellBar
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-shellbar
  * @appenddocs ShellBarItem
  * @public
@@ -492,7 +524,7 @@ class ShellBar extends UI5Element {
 
 				if (this.hasMenuItems) {
 					const menuPopover = await this._getMenuPopover();
-					menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
+					menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"), true);
 				}
 			},
 		};
@@ -529,6 +561,9 @@ class ShellBar extends UI5Element {
 
 	_menuPopoverBeforeOpen() {
 		this._menuPopoverExpanded = true;
+		if (this.menuPopover.content && this.menuPopover.content.length) {
+			this.menuPopover.content[0].focusFirstItem();
+		}
 	}
 
 	_menuPopoverAfterClose() {
@@ -537,6 +572,9 @@ class ShellBar extends UI5Element {
 
 	_overflowPopoverBeforeOpen() {
 		this._overflowPopoverExpanded = true;
+		if (this.overflowPopover.content && this.overflowPopover.content.length) {
+			this.overflowPopover.content[0].focusFirstItem();
+		}
 	}
 
 	_overflowPopoverAfterClose() {
@@ -723,7 +761,7 @@ class ShellBar extends UI5Element {
 	async _toggleActionPopover() {
 		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
 		const overflowPopover = await this._getOverflowPopover();
-		overflowPopover.showAt(overflowButton);
+		overflowPopover.showAt(overflowButton, true);
 	}
 
 	onEnterDOM() {
@@ -1176,29 +1214,64 @@ class ShellBar extends UI5Element {
 		return {
 			notifications: {
 				"title": this._notificationsText,
+				"accessibilityAttributes": {
+					hasPopup: this._notificationsHasPopup,
+				},
 			},
 			profile: {
 				"title": this._profileText,
+				"accessibilityAttributes": {
+					hasPopup: this._profileHasPopup,
+				},
 			},
 			products: {
 				"title": this._productsText,
+				"accessibilityAttributes": {
+					hasPopup: this._productsHasPopup,
+				},
 			},
 			search: {
 				"title": this._searchText,
 				"accessibilityAttributes": {
+					hasPopup: this._searchHasPopup,
 					expanded: this.showSearchField,
 				},
 			},
 			overflow: {
 				"title": this._overflowText,
 				"accessibilityAttributes": {
-					hasPopup: HasPopup.Menu,
+					hasPopup: this._overflowHasPopup,
 					expanded: this._overflowPopoverExpanded,
 				},
 			},
 		};
 	}
 
+	get _notificationsHasPopup() {
+		const notificationsAccAttributes = this.accessibilityAttributes.notifications;
+		return notificationsAccAttributes ? notificationsAccAttributes.ariaHasPopup : null;
+	}
+
+	get _profileHasPopup() {
+		const profileAccAttributes = this.accessibilityAttributes.profile;
+		return profileAccAttributes ? profileAccAttributes.ariaHasPopup : null;
+	}
+
+	get _productsHasPopup() {
+		const productsAccAttributes = this.accessibilityAttributes.product;
+		return productsAccAttributes ? productsAccAttributes.ariaHasPopup : null;
+	}
+
+	get _searchHasPopup() {
+		const searcAccAttributes = this.accessibilityAttributes.search;
+		return searcAccAttributes ? searcAccAttributes.ariaHasPopup : null;
+	}
+
+	get _overflowHasPopup() {
+		const overflowAccAttributes = this.accessibilityAttributes.overflow;
+		return overflowAccAttributes ? overflowAccAttributes.ariaHasPopup : HasPopup.Menu;
+	}
+
 	get accLogoRole() {
 		return this.accessibilityRoles.logoRole || "button";
 	}

package/src/ShellBarItem.js

@@ -6,7 +6,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
  */
 const metadata = {
 	tag: "ui5-shellbar-item",
-	properties: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.ShellBarItem.prototype */ {
 		/**
 		 * Defines the name of the item's icon.
 		 * @type {string}
@@ -39,11 +39,11 @@ const metadata = {
 		},
 	},
 
-	events: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.ShellBarItem.prototype */ {
 		/**
 		 * Fired, when the item is pressed.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBarItem#click
+		 * @event sap.ui.webc.fiori.ShellBarItem#click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef DOM ref of the clicked element
 		 * @public
@@ -66,10 +66,10 @@ const metadata = {
  * <code>import "@ui5/webcomponents-fiori/dist/ShellBarItem";</code>
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ShellBarItem
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.ShellBarItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-shellbar-item
- * @implements sap.ui.webcomponents.fiori.IShellBarItem
+ * @implements sap.ui.webc.fiori.IShellBarItem
  * @public
  */
 class ShellBarItem extends UI5Element {

package/src/SideNavigation.hbs

@@ -22,6 +22,7 @@
 					?selected="{{this.selected}}"
 					.ariaHaspopup="{{this.item._ariaHasPopup}}"
 					.accessibleRoleDescription="{{../ariaRoleDescNavigationListItem}}"
+					._fixed="{{this.item._fixed}}"
 				>
 					{{#unless ../collapsed}}
 						{{#each this.item.items}}

package/src/SideNavigation.js

@@ -27,7 +27,7 @@ const metadata = {
 	tag: "ui5-side-navigation",
 	managedSlots: true,
 	fastNavigation: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.SideNavigation.prototype */ {
 		/**
 		 * Defines whether the <code>ui5-side-navigation</code> is expanded or collapsed.
 		 *
@@ -46,14 +46,14 @@ const metadata = {
 			type: Object,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.SideNavigation.prototype */ {
 		/**
 		 * Defines the main items of the <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component
 		 * for the top-level items, and the <code>ui5-side-navigation-sub-item</code> component for second-level items, nested
 		 * inside the items.
 		 *
 		 * @public
-		 * @type {sap.ui.webcomponents.fiori.ISideNavigationItem[]}
+		 * @type {sap.ui.webc.fiori.ISideNavigationItem[]}
 		 * @slot items
 		 */
 		"default": {
@@ -84,7 +84,7 @@ const metadata = {
 		 * <b>Note:</b> In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items)
 		 *
 		 * @public
-		 * @type {sap.ui.webcomponents.fiori.ISideNavigationItem[]}
+		 * @type {sap.ui.webc.fiori.ISideNavigationItem[]}
 		 * @slot
 		 */
 		fixedItems: {
@@ -92,11 +92,11 @@ const metadata = {
 			invalidateOnChildChange: true,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.SideNavigation.prototype */ {
 		/**
 		 * Fired when the selection has changed via user interaction
 		 *
-		 * @event sap.ui.webcomponents.fiori.SideNavigation#selection-change
+		 * @event sap.ui.webc.fiori.SideNavigation#selection-change
 		 * @param {HTMLElement} item the clicked item.
 		 * @allowPreventDefault
 		 * @public
@@ -148,8 +148,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.SideNavigation
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.SideNavigation
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-side-navigation
  * @since 1.0.0-rc.8
  * @appenddocs SideNavigationItem SideNavigationSubItem
@@ -221,20 +221,23 @@ class SideNavigation extends UI5Element {
 		this._popoverContent = {
 			mainItem: item,
 			mainItemSelected: item.selected && !item.items.some(subItem => subItem.selected),
+			// add one as the first item is the main item
+			selectedSubItemIndex: item.items.findIndex(subItem => subItem.selected) + 1,
 			subItems: item.items,
 		};
 	}
 
-	get accSideNavigationPopoverHiddenText() {
-		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT);
-	}
-
-	get ariaRoleDescPopoverNavigationList() {
-		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_COLLAPSED_LIST_ARIA_ROLE_DESC);
+	async _onAfterOpen() {
+		// as the tree/list inside the popover is never destroyed,
+		// item navigation index should be managed, because items are
+		// dynamically recreated and tabIndexes are not updated
+		const tree = await this.getPickerTree();
+		const index = this._popoverContent.selectedSubItemIndex;
+		tree.focusItemByIndex(index);
 	}
 
-	get ariaRoleDescPopoverNavigationListItem() {
-		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC);
+	get accSideNavigationPopoverHiddenText() {
+		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT);
 	}
 
 	get ariaRoleDescNavigationList() {
@@ -268,7 +271,7 @@ class SideNavigation extends UI5Element {
 		}
 	}
 
-	handleListItemClick(event) {
+	handlePopoverItemClick(event) {
 		const listItem = event.detail.item;
 		const item = listItem.associatedItem;
 
@@ -290,11 +293,17 @@ class SideNavigation extends UI5Element {
 		responsivePopover.showAt(opener);
 	}
 
-	async closePicker(opener) {
+	async closePicker() {
 		const responsivePopover = await this.getPicker();
 		responsivePopover.close();
 	}
 
+	async getPickerTree() {
+		const picker = await this.getPicker();
+		const sideNav = picker.querySelector("[ui5-side-navigation]");
+		return sideNav._itemsTree;
+	}
+
 	get hasHeader() {
 		return !!this.header.length;
 	}

package/src/SideNavigationItem.js

@@ -7,7 +7,7 @@ import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js";
 const metadata = {
 	tag: "ui5-side-navigation-item",
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.SideNavigationItem.prototype */ {
 		/**
 		 * Defines the text of the item.
 		 *
@@ -80,16 +80,28 @@ const metadata = {
 		 title: {
 			type: String,
 		},
+
+		/**
+		 * Defines if the item should be collapsible or not.
+		 * It is true, for example, for the items inside the Popover of the Side Navigation
+		 * @private
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.10.0
+		 */
+		 _fixed: {
+			type: Boolean,
+		},
 	},
 
-	events: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.SideNavigationItem.prototype */ {
 	},
 
-	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.SideNavigationItem.prototype */ {
 		/**
 		 * If you wish to nest menus, you can pass inner menu items to the default slot.
 		 *
-		 * @type {sap.ui.webcomponents.fiori.ISideNavigationSubItem[]}
+		 * @type {sap.ui.webc.fiori.ISideNavigationSubItem[]}
 		 * @public
 		 * @slot items
 		 */
@@ -115,12 +127,12 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.SideNavigationItem
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.SideNavigationItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-side-navigation-item
  * @public
  * @since 1.0.0-rc.8
- * @implements sap.ui.webcomponents.fiori.ISideNavigationItem
+ * @implements sap.ui.webc.fiori.ISideNavigationItem
  */
 class SideNavigationItem extends UI5Element {
 	static get metadata() {

package/src/SideNavigationItemPopoverContent.hbs

@@ -3,35 +3,31 @@
 	class="ui5-side-navigation-popover"
 	aria-labelledby="{{_id}}-sideNavigationPopoverText"
 	aria-modal="true"
+	@ui5-after-open="{{_onAfterOpen}}"
 >
 	<span id="{{_id}}-sideNavigationPopoverText" class="ui5-hidden-text">{{accSideNavigationPopoverHiddenText}}</span>
 
-	<ui5-list
-		mode="None"
-		.ariaRoleDescription="{{ariaRoleDescPopoverNavigationList}}"
-		accessible-role="tree"
-		@ui5-item-click="{{handleListItemClick}}"
+	<ui5-side-navigation 
+		class="ui5-side-navigation-in-popover"
+		@ui5-selection-change="{{handlePopoverItemClick}}"
 	>
-		<ui5-li
+		<ui5-side-navigation-item
 			title="{{_popoverContent.mainItem._tooltip}}"
-			accessible-role="treeitem"
-			_level="1"
-			aria-selected="{{this.selected}}"
-			.ariaRoleDescription="{{ariaRoleDescPopoverNavigationListItem}}"
-			?selected="{{_popoverContent.mainItemSelected}}"
+			text="{{_popoverContent.mainItem.text}}"
+			expanded="true"
+			_fixed="true"
+			?selected="{{_popoverContent.mainItem.selected}}"
 			.associatedItem="{{_popoverContent.mainItem}}"
-		>{{_popoverContent.mainItem.text}}</ui5-li>
+		>
 
 		{{#each _popoverContent.subItems}}
-			<ui5-li
+			<ui5-side-navigation-sub-item
 				title="{{this._tooltip}}"
-				accessible-role="treeitem"
-				_level="2"
-				aria-selected="{{this.selected}}"
-				.ariaRoleDescription="{{ariaRoleDescPopoverNavigationListItem}}"
+				text="{{this.text}}"
 				?selected="{{this.selected}}"
 				.associatedItem="{{this}}"
-			>{{this.text}}</ui5-li>
+			></ui5-side-navigation-sub-item>
 		{{/each}}
-	</ui5-list>
+		</ui5-side-navigation-item>
+	</ui5-side-navigation>
 </ui5-responsive-popover>

package/src/SideNavigationSubItem.js

@@ -5,7 +5,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  */
 const metadata = {
 	tag: "ui5-side-navigation-sub-item",
-	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.SideNavigationSubItem.prototype */ {
 		/**
 		 * Defines the text of the item.
 		 *
@@ -55,7 +55,7 @@ const metadata = {
 		},
 	},
 
-	events: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.SideNavigationSubItem.prototype */ {
 	},
 };
 
@@ -72,12 +72,12 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.SideNavigationSubItem
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.SideNavigationSubItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-side-navigation-sub-item
  * @public
  * @since 1.0.0-rc.8
- * @implements sap.ui.webcomponents.fiori.ISideNavigationSubItem
+ * @implements sap.ui.webc.fiori.ISideNavigationSubItem
  */
 class SideNavigationSubItem extends UI5Element {
 	static get metadata() {

package/src/SortItem.ts

@@ -0,0 +1,54 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-sort-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents-fiori/dist/SortItem.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.SortItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @since 1.0.0-rc.16
+ * @tagname ui5-sort-item
+ * @implements sap.ui.webc.fiori.ISortItem
+ * @public
+ */
+@customElement("ui5-sort-item")
+class SortItem extends UI5Element {
+	/**
+	 * Defines the text of the component.
+	 *
+	 * @name sap.ui.webc.fiori.SortItem.prototype.text
+	 * @type {string}
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	text!: string;
+
+	/**
+	 * Defines if the component is selected.
+	 *
+	 * @name sap.ui.webc.fiori.SortItem.prototype.selected
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	selected!: boolean;
+}
+
+SortItem.define();
+
+export default SortItem;