@ui5/webcomponents-fiori 1.9.3 → 1.10.1

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>.
@@ -115,6 +115,17 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines, if the Search Field would be displayed when there is a valid <code>searchField</code> slot.
+		 * <br><b>Note:</b> By default the Search Field is not displayed.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		showSearchField: {
+			type: Boolean,
+		},
+
 		/**
 		 * An object of strings that defines additional accessibility roles for further customization.
 		 *
@@ -141,22 +152,47 @@ const metadata = {
 		 * @public
 		 * @since 1.1.0
 		 */
-		 accessibilityTexts: {
+		accessibilityTexts: {
 			type: Object,
 		},
 
 		/**
-		 * @private
+		 * 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
 		 */
-		breakpointSize: {
-			type: String,
+
+		accessibilityAttributes: {
+			type: Object,
 		},
 
 		/**
 		 * @private
 		 */
-		showSearchField: {
-			type: Boolean,
+		breakpointSize: {
+			type: String,
 		},
 
 		/**
@@ -201,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
 		 */
@@ -224,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
@@ -236,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
@@ -251,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
@@ -263,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
 		 */
@@ -276,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
 		 */
@@ -284,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
@@ -304,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
 		 */
@@ -318,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
@@ -332,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
@@ -346,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
@@ -361,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
@@ -416,10 +452,10 @@ 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
+ * @appenddocs sap.ui.webc.fiori.ShellBarItem
  * @public
  * @since 0.8.0
  */
@@ -488,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);
 				}
 			},
 		};
@@ -525,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() {
@@ -533,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() {
@@ -719,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() {
@@ -1172,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

@@ -1,4 +1,4 @@
-<div class="ui5-sn-root">
+<div class="ui5-sn-root" role="navigation">
 	{{> header }}
 
 	{{#if items.length}}
@@ -6,6 +6,7 @@
 			id="ui5-sn-items-tree"
 			class="ui5-sn-items-tree"
 			mode="None"
+			.accessibleRoleDescription="{{ariaRoleDescNavigationList}}"
 			?_minimal="{{collapsed}}"
 			_toggle-button-end
 			@ui5-item-click="{{handleTreeItemClick}}"
@@ -19,6 +20,9 @@
 					?has-children="{{this.item.items.length}}"
 					?expanded="{{this.item.expanded}}"
 					?selected="{{this.selected}}"
+					.ariaHaspopup="{{this.item._ariaHasPopup}}"
+					.accessibleRoleDescription="{{../ariaRoleDescNavigationListItem}}"
+					._fixed="{{this.item._fixed}}"
 				>
 					{{#unless ../collapsed}}
 						{{#each this.item.items}}
@@ -28,6 +32,7 @@
 								title="{{this._tooltip}}"
 								icon="{{this.icon}}"
 								?selected="{{this.selected}}"
+								.accessibleRoleDescription="{{../ariaRoleDescNavigationListItem}}"
 							>
 							</ui5-tree-item>
 						{{/each}}
@@ -50,6 +55,7 @@
 				?_minimal="{{collapsed}}"
 				_toggle-button-end
 				@ui5-item-click="{{handleTreeItemClick}}"
+				.accessibleRoleDescription="{{ariaRoleDescNavigationList}}"
 			>
 				{{#each _fixedItems}}
 					<ui5-tree-item
@@ -60,6 +66,8 @@
 						?has-children="{{this.item.items.length}}"
 						?expanded="{{this.item.expanded}}"
 						?selected="{{this.selected}}"
+						.ariaHaspopup="{{this.item._ariaHasPopup}}"
+						.accessibleRoleDescription="{{../ariaRoleDescNavigationListItem}}"
 					>
 						{{#unless ../collapsed}}
 							{{#each this.item.items}}
@@ -68,6 +76,7 @@
 									text="{{this.text}}"
 									title="{{this._tooltip}}"
 									?selected="{{this.selected}}"
+									.accessibleRoleDescription="{{../ariaRoleDescNavigationListItem}}"
 								>
 								</ui5-tree-item>
 							{{/each}}

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,11 +148,11 @@ 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
+ * @appenddocs sap.ui.webc.fiori.SideNavigationItem sap.ui.webc.fiori.SideNavigationSubItem
  * @public
  */
 class SideNavigation extends UI5Element {

package/src/SideNavigationItem.js

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js";
 
 /**
  * @public
@@ -6,7 +7,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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.
 		 *
@@ -79,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
 		 */
@@ -114,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() {
@@ -129,6 +142,10 @@ class SideNavigationItem extends UI5Element {
 	get _tooltip() {
 		return this.title || this.text;
 	}
+
+	get _ariaHasPopup() {
+		return (this.parentNode.collapsed && this.items.length) ? HasPopup.Tree : undefined;
+	}
 }
 
 SideNavigationItem.define();

package/src/SideNavigationItemPopoverContent.hbs

@@ -5,22 +5,29 @@
 	aria-modal="true"
 	@ui5-after-open="{{_onAfterOpen}}"
 >
-	<ui5-list
-		mode="None"
-		@ui5-item-click="{{handleListItemClick}}"
+	<span id="{{_id}}-sideNavigationPopoverText" class="ui5-hidden-text">{{accSideNavigationPopoverHiddenText}}</span>
+
+	<ui5-side-navigation 
+		class="ui5-side-navigation-in-popover"
+		@ui5-selection-change="{{handlePopoverItemClick}}"
 	>
-		<ui5-li
+		<ui5-side-navigation-item
 			title="{{_popoverContent.mainItem._tooltip}}"
-			?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}}"
+				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;