@ui5/webcomponents-fiori 2.9.0-rc.0 → 2.9.0-rc.2

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.9.0-rc.0",
+  "version": "2.9.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1155,6 +1155,128 @@
             ]
           }
         },
+        {
+          "name": "ui5-search",
+          "description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Expand/Collapse button - when there is no search term, the search button behaves as an expand/collapse button for the `ui5-search` component\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/fiori/dist/Search.js\";`\n---\n\n\n### **Events:**\n - **popup-action-press** - Fired when load more button is pressed.\n- **open** - Fired when the popup is opened.\n- **close** - Fired when the popup is closed.\n\n### **Slots:**\n - **default** - Defines the Search suggestion items.\n- **illustration** - Defines the illustrated message to be shown in the popup.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "popup-mode",
+              "description": "Defines the visualisation mode of the search component.",
+              "value": {
+                "type": "\"List\" | \"Illustration\" | \"Loading\"",
+                "default": "\"List\""
+              }
+            },
+            {
+              "name": "no-typeahead",
+              "description": "Defines whether the value will be autcompleted to match an item.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "header-text",
+              "description": "Defines the header text to be placed in the search suggestions popup.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "subheader-text",
+              "description": "Defines the subheader text to be placed in the search suggestions popup.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "show-popup-action",
+              "description": "Defines whether the popup footer action button is shown.\nNote: The footer action button is displayed only when the `popupMode` is set to `List`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "popup-action-text",
+              "description": "Defines the popup footer action button text.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "open",
+              "description": "Indicates whether the items picker is open.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the Search suggestion items."
+            },
+            {
+              "name": "illustration",
+              "description": "Defines the illustrated message to be shown in the popup."
+            }
+          ],
+          "events": [
+            {
+              "name": "popup-action-press",
+              "description": "Fired when load more button is pressed."
+            },
+            {
+              "name": "open",
+              "description": "Fired when the popup is opened."
+            },
+            {
+              "name": "close",
+              "description": "Fired when the popup is closed."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "popup-mode",
+                "description": "Defines the visualisation mode of the search component.",
+                "value": { "type": "\"List\" | \"Illustration\" | \"Loading\"" }
+              },
+              {
+                "name": "no-typeahead",
+                "description": "Defines whether the value will be autcompleted to match an item.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "header-text",
+                "description": "Defines the header text to be placed in the search suggestions popup.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "subheader-text",
+                "description": "Defines the subheader text to be placed in the search suggestions popup.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "show-popup-action",
+                "description": "Defines whether the popup footer action button is shown.\nNote: The footer action button is displayed only when the `popupMode` is set to `List`.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "popup-action-text",
+                "description": "Defines the popup footer action button text.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "open",
+                "description": "Indicates whether the items picker is open.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "popup-action-press",
+                "description": "Fired when load more button is pressed."
+              },
+              {
+                "name": "open",
+                "description": "Fired when the popup is opened."
+              },
+              {
+                "name": "close",
+                "description": "Fired when the popup is closed."
+              }
+            ]
+          }
+        },
         {
           "name": "ui5-search-field-scope-option",
           "description": "The `ui5-search-scope-option` represents the options for the scope in `ui5-search`.\n---\n",
@@ -1178,6 +1300,77 @@
             "events": []
           }
         },
+        {
+          "name": "ui5-search-item",
+          "description": "### Overview\n\nA `ui5-search-item` is a list item, used for displaying search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/fiori/dist/SearchItem.js\";`\n---\n\n\n### **Events:**\n - **delete** - Fired when delete button is pressed.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "heading-text",
+              "description": "Defines the heading text of the search item.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "icon",
+              "description": "Defines the icon name of the search item.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "selected",
+              "description": "Defines whether the search item is selected.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "scope-name",
+              "description": "Defines the scope of the search item",
+              "value": { "type": "string | undefined", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "delete",
+              "description": "Fired when delete button is pressed."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "heading-text",
+                "description": "Defines the heading text of the search item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "icon",
+                "description": "Defines the icon name of the search item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "selected",
+                "description": "Defines whether the search item is selected.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "scope-name",
+                "description": "Defines the scope of the search item",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "delete",
+                "description": "Fired when delete button is pressed."
+              }
+            ]
+          }
+        },
+        {
+          "name": "ui5-search-item-group",
+          "description": "The `ui5-search-item-group` is type of suggestion item,\nthat can be used to split the `ui5-search-item` suggestions into groups.\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "ui5-shellbar",
           "description": "### Overview\n\nThe `ui5-shellbar` is meant to serve as an application header\nand includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.\n\n### Stable DOM Refs\n\nYou can use the following stable DOM refs for the `ui5-shellbar`:\n\n- logo\n- notifications\n- overflow\n- profile\n- product-switch\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBar.js\";`\n---\n\n\n### **Events:**\n - **notifications-click** - Fired, when the notification icon is activated.\n- **profile-click** - Fired, when the profile slot is present.\n- **product-switch-click** - Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **logo-click** - Fired, when the logo is activated.\n- **menu-item-click** - Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **search-button-click** - Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.\n- **content-item-visibility-change** - Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.\n\n### **Methods:**\n - **closeOverflow(): _void_** - Closes the overflow area.\nUseful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event\n\n### **Slots:**\n - **assistant** - Defines the assistant slot.\n- **default** - Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`.\n- **profile** - You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.\n- **logo** - Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.\n- **menuItems** - Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the  `<ui5-li></ui5-li>` and its ancestors.\n- **searchField** - Defines the `ui5-input`, that will be used as a search field.\n- **startButton** - Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling.\n- **content** - Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-shellbar`",
@@ -1425,6 +1618,14 @@
               "name": "count",
               "description": "Defines the count displayed in the top-right corner.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.",
+              "value": {
+                "type": "ShellBarItemAccessibilityAttributes",
+                "default": "{}"
+              }
             }
           ],
           "events": [
@@ -1449,6 +1650,11 @@
                 "name": "count",
                 "description": "Defines the count displayed in the top-right corner.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.",
+                "value": { "type": "ShellBarItemAccessibilityAttributes" }
               }
             ],
             "events": [
@@ -1476,6 +1682,19 @@
               "name": "collapsed",
               "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "design",
+              "description": "Defines whether the control should have container styling or not.\n**Note** In order to achieve the best user experience, it is recommended to use \"Plain\" value if SideNavigation is placed inside a responsive popover.",
+              "value": {
+                "type": "\"Decorated\" | \"Plain\"",
+                "default": "\"Decorated\""
+              }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -1504,6 +1723,16 @@
                 "name": "collapsed",
                 "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "design",
+                "description": "Defines whether the control should have container styling or not.\n**Note** In order to achieve the best user experience, it is recommended to use \"Plain\" value if SideNavigation is placed inside a responsive popover.",
+                "value": { "type": "\"Decorated\" | \"Plain\"" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -2539,6 +2768,11 @@
               "name": "selected",
               "description": "Defines if the user is selected.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading",
+              "description": "Indicates whether a loading indicator should be shown.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
@@ -2573,6 +2807,11 @@
                 "name": "selected",
                 "description": "Defines if the user is selected.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "loading",
+                "description": "Indicates whether a loading indicator should be shown.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.9.0-rc.0",
+  "version": "2.9.0-rc.2",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -54,17 +54,17 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.9.0-rc.0",
-    "@ui5/webcomponents-base": "2.9.0-rc.0",
-    "@ui5/webcomponents-icons": "2.9.0-rc.0",
-    "@ui5/webcomponents-theming": "2.9.0-rc.0",
+    "@ui5/webcomponents": "2.9.0-rc.2",
+    "@ui5/webcomponents-base": "2.9.0-rc.2",
+    "@ui5/webcomponents-icons": "2.9.0-rc.2",
+    "@ui5/webcomponents-theming": "2.9.0-rc.2",
     "@zxing/library": "^0.21.3"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.9.0-rc.0",
+    "@ui5/webcomponents-tools": "2.9.0-rc.2",
     "chromedriver": "^133.0.0",
     "lit": "^2.0.0"
   },
-  "gitHead": "7b5afeeb1f94c3ad54b2e79ac79d0d9e36f0cb7d"
+  "gitHead": "17eb194560a6db21bab9da6eb69b599ac504fd78"
 }

package/src/NavigationMenuItemTemplate.tsx

@@ -1,24 +1,17 @@
 import type NavigationMenuItem from "./NavigationMenuItem.js";
 import MenuItemTemplate from "@ui5/webcomponents/dist/MenuItemTemplate.js";
-import type { MenuItemHooks } from "@ui5/webcomponents/dist/MenuItemTemplate.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import arrowRightIcon from "@ui5/webcomponents-icons/dist/arrow-right.js";
-import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
-import navBackIcon from "@ui5/webcomponents-icons/dist/nav-back.js";
-import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
-import Button from "@ui5/webcomponents/dist/Button.js";
-import List from "@ui5/webcomponents/dist/List.js";
-import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import type { ListItemHooks } from "@ui5/webcomponents/dist/ListItemTemplate.js";
 
-const predefinedHooks: Partial<MenuItemHooks> = {
+const predefinedHooks: Partial<ListItemHooks> = {
 	listItemContent,
 	iconBegin,
 	iconEnd,
-	listItemPostContent: () => { },
 };
 
-export default function NavigationMenuItemTemplate(this: NavigationMenuItem, hooks?: Partial<MenuItemHooks>) {
+export default function NavigationMenuItemTemplate(this: NavigationMenuItem, hooks?: Partial<ListItemHooks>) {
 	const currentHooks = { ...predefinedHooks, ...hooks, };
 
 	return <>
@@ -33,8 +26,6 @@ export default function NavigationMenuItemTemplate(this: NavigationMenuItem, hoo
 				</a>
 			) : MenuItemTemplate.call(this, currentHooks)
 		}
-
-		{listItemPostContent.call(this)}
 	</>;
 }
 
@@ -71,74 +62,3 @@ function iconEnd(this: NavigationMenuItem) {
 		/>;
 	}
 }
-
-function listItemPostContent(this: NavigationMenuItem) {
-	return this.hasSubmenu && <ResponsivePopover
-		id={`${this._id}-navigation-menu-rp`}
-		class="ui5-menu-rp ui5-navigation-menu ui5-menu-rp-sub-menu"
-		verticalAlign="Center"
-		preventInitialFocus
-		preventFocusRestore
-		accessibleNameRef={`${this._id}-navigationMenuPopoverText`}
-		onBeforeOpen={this._beforePopoverOpen}
-		onOpen={this._afterPopoverOpen}
-		onBeforeClose={this._beforePopoverClose}
-		onClose={this._afterPopoverClose}
-	>
-		<span id={`${this._id}-navigationMenuPopoverText`} class="ui5-hidden-text">{this.accSideNavigationPopoverHiddenText}</span>
-
-		{this.isPhone && (
-			<div slot="header" class="ui5-menu-dialog-header">
-				{this.isSubMenuOpen && (
-					<Button
-						icon={navBackIcon}
-						class="ui5-menu-back-button"
-						design="Transparent"
-						aria-label={this.labelBack}
-						onClick={this._close}
-					/>
-				)}
-
-				<div class="ui5-menu-dialog-title">
-					<div>
-						{this.menuHeaderTextPhone}
-					</div>
-				</div>
-
-				<Button
-					icon={declineIcon}
-					design="Transparent"
-					aria-label={this.labelClose}
-					onClick={this._closeAll}
-				/>
-			</div>
-		)}
-
-		<div id={`${this._id}-menu-main`} class="ui5-navigation-menu-main">
-			{this.items.length ? (
-				<List
-					accessibleRole="Tree"
-					id={`${this.id}-menu-list`}
-					selectionMode="None"
-					loading={this.loading}
-					loadingDelay={this.loadingDelay}
-					separators="None"
-					// handles event from slotted children
-					onui5-close-menu={this._close}
-				>
-					<slot></slot>
-				</List>
-			) : (
-				this.loading && (
-					<BusyIndicator
-						id={`${this._id}-menu-busy-indicator`}
-						delay={this.loadingDelay}
-						class="ui5-menu-busy-indicator"
-						active={true}
-					/>
-				)
-			)}
-		</div>
-
-	</ResponsivePopover >;
-}

package/src/SearchFieldTemplate.tsx

@@ -11,7 +11,7 @@ import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
 export default function SearchFieldTemplate(this: SearchField) {
 	return (
 		this.expanded ? (
-			<div class="ui5-search-field-root" role="search">
+			<div class="ui5-search-field-root" role="search" onFocusOut={this._onFocusOutSearch}>
 				<div class="ui5-search-field-content">
 					{this.mode === SearchMode.Scoped &&
 						<>

package/src/SearchItemTemplate.tsx

@@ -0,0 +1,45 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type SearchItem from "./SearchItem.js";
+import Tag from "@ui5/webcomponents/dist/Tag.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import TagDesign from "@ui5/webcomponents/dist/types/TagDesign.js";
+
+export default function SearchFieldTemplate(this: SearchItem) {
+	return (
+		<li
+			part="native-li"
+			class="ui5-li-root ui5-li--focusable"
+			data-sap-focus-ref
+			draggable={this.movable}
+			tabindex={this._effectiveTabIndex}
+			onFocusIn={this._onfocusin}
+			onFocusOut={this._onfocusout}
+			onKeyUp={this._onkeyup}
+			onKeyDown={this._onkeydown}
+			onClick={this._onclick}
+		>
+			<div part="content" class="ui5-search-item-content">
+				<div class="ui5-search-item-begin-content">
+					{this.icon &&
+						<Icon class="ui5-search-item-icon" name={this.icon}></Icon>
+					}
+
+					{this.scopeName &&
+						<Tag design={TagDesign.Set2} colorScheme="10">
+							{this.scopeName}
+						</Tag>
+					}
+
+					<div class="ui5-search-item-titles-container">
+						<span part="title" class="ui5-search-item-heading" dangerouslySetInnerHTML={{ __html: this._markupText }}></span>
+					</div>
+					{this.selected &&
+						<Button class="ui5-search-item-selected-delete" design={ButtonDesign.Transparent} icon={decline} onClick={this._onDeleteButtonClick}></Button>
+					}
+				</div>
+			</div>
+		</li >
+	);
+}

package/src/SearchPopoverTemplate.tsx

@@ -0,0 +1,68 @@
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import type Search from "./Search.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import Text from "@ui5/webcomponents/dist/Text.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import Title from "@ui5/webcomponents/dist/Title.js";
+import ListSeparator from "@ui5/webcomponents/dist/types/ListSeparator.js";
+import TitleLevel from "@ui5/webcomponents/dist/types/TitleLevel.js";
+import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
+import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+
+export default function SearchPopoverTemplate(this: Search) {
+	return (
+		<ResponsivePopover
+			hideArrow={true}
+			preventFocusRestore={true}
+			preventInitialFocus={true}
+			placement={PopoverPlacement.Bottom}
+			horizontalAlign={PopoverHorizontalAlign.Start}
+			open={this.open}
+			opener={this}
+			onOpen={this._handleOpen}
+			onClose={this._handleClose}
+			class="ui5-search-popover"
+		>
+
+			{this._showIllustration ?
+				<slot name="illustration"></slot>
+				: (
+					this._showLoading ?
+						<BusyIndicator class="ui5-search-popover-loading-bi" active></BusyIndicator>
+						: (
+							<>
+								{this._showHeader &&
+									(<header slot="header" class="ui5-search-popover-header">
+										<Title size={TitleLevel.H6}>{this.headerText}</Title>
+										<Text class="ui5-search-popover-subheader"><i>{this.subheaderText}</i></Text>
+									</header>)
+								}
+
+								<main>
+									<List
+										class="ui5-search-list"
+										separators={ListSeparator.None}
+										onKeyDown={this._onItemKeydown}
+										onItemClick={this._onItemClick}>
+										<slot></slot>
+									</List>
+								</main>
+
+								{this._showFooter &&
+									<Button
+										slot="footer"
+										design={ButtonDesign.Transparent}
+										class="ui5-search-footer-button"
+										onKeyDown={this._onFooterButtonKeyDown}
+										onClick={this._onFooterButtonClick}>
+										{this.popupActionText}
+									</Button>
+								}
+							</>
+						)
+				)}
+		</ResponsivePopover>
+	);
+}

package/src/SearchTemplate.tsx

@@ -0,0 +1,12 @@
+import type Search from "./Search.js";
+import SearchFieldTemplate from "./SearchFieldTemplate.js";
+import SearchPopoverTemplate from "./SearchPopoverTemplate.js";
+
+export default function SearchTemplate(this: Search) {
+	return (
+		<>
+			{ SearchFieldTemplate.call(this) }
+			{ SearchPopoverTemplate.call(this) }
+		</>
+	);
+}

package/src/ShellBarPopoverTemplate.tsx

@@ -36,6 +36,7 @@ export default function PopoversTemplate(this: ShellBar) {
 							type="Active"
 							onui5-_press={icon.press}
 							tooltip={icon.tooltip}
+							accessibilityAttributes={this.accInfo.search.accessibilityAttributes}
 						>
 							{icon.text}
 						</ListItemStandard>

package/src/ShellBarTemplate.tsx

@@ -76,17 +76,18 @@ export default function ShellBarTemplate(this: ShellBar) {
 					<div class="ui5-shellbar-overflow-container-right-inner">
 						{this.hasContentItems && (
 							<>
-								{this.showStartSeparatorInWrapper && (
+								{this.showStartSeparator && (
 									<div class={{
 										"ui5-shellbar-separator": true,
 										"ui5-shellbar-separator-start": true,
 									}}></div>
 								)}
-								{this.startContent.map((item, index) => {
+								{this.startContent.map(item => {
 									const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
 									return (
 										<div key={item._individualSlot} id={item._individualSlot} class={itemInfo?.classes}>
-											{!this.showStartSeparatorInWrapper && index === 0 && (
+											{this.shouldIncludeSeparator(itemInfo, this.startContentInfoSorted) && (
+												// never displayed, only "packed" with last item that was hidden, used for measurement purposes
 												<div class={{
 													"ui5-shellbar-separator": true,
 													"ui5-shellbar-separator-start": true,
@@ -97,12 +98,13 @@ export default function ShellBarTemplate(this: ShellBar) {
 									);
 								})}
 								<div class="ui5-shellbar-spacer"></div>
-								{this.endContent.map((item, index) => {
+								{this.endContent.map(item => {
 									const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
 									return (
 										<div key={item._individualSlot} id={item._individualSlot} class={itemInfo?.classes}>
 											<slot name={item._individualSlot}></slot>
-											{!this.showEndSeparatorInWrapper && index === this.endContent.length - 1 && (
+											{this.shouldIncludeSeparator(itemInfo, this.endContentInfoSorted) && (
+												// never displayed, only "packed" with last item that was hidden, used for measurement purposes
 												<div class={{
 													"ui5-shellbar-separator": true,
 													"ui5-shellbar-separator-end": true,
@@ -111,7 +113,7 @@ export default function ShellBarTemplate(this: ShellBar) {
 										</div>
 									);
 								})}
-								{this.showEndSeparatorInWrapper && (
+								{this.showEndSeparator && (
 									<div class={{
 										"ui5-shellbar-separator": true,
 										"ui5-shellbar-separator-end": true,
@@ -194,6 +196,7 @@ export default function ShellBarTemplate(this: ShellBar) {
 									data-ui5-external-action-item-id={item.refItemid}
 									data-ui5-stable={item.stableDomRef}
 									onClick={item.press}
+									accessibilityAttributes={item.accessibilityAttributes}
 								/>
 							))}
 						</div>

package/src/SideNavigationTemplate.tsx

@@ -10,6 +10,7 @@ export default function SideNavigationTemplate(this: SideNavigation) {
 			"ui5-sn-collapsed": this.collapsed,
 		}}
 		role={this._rootRole}
+		aria-label={this.accessibleName}
 		>
 			{header.call(this)}