@ui5/webcomponents-fiori 2.7.0-rc.0 → 2.7.0-rc.1

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.7.0-rc.0",
+  "version": "2.7.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -405,7 +405,7 @@
               "name": "layout",
               "description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.",
               "value": {
-                "type": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"MidColumnFullScreen\" | \"EndColumnFullScreen\"",
+                "type": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS...",
                 "default": "\"OneColumn\""
               }
             },
@@ -471,7 +471,7 @@
                 "name": "layout",
                 "description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.",
                 "value": {
-                  "type": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"MidColumnFullScreen\" | \"EndColumnFullScreen\""
+                  "type": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS..."
                 }
               },
               {
@@ -1157,7 +1157,7 @@
         },
         {
           "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\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 the primary title.\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 back or home button.\nIt gets overstyled to match ShellBar's styling.\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `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 startContent or endContent slots 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 additional content area.\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`",
           "doc-url": "",
           "attributes": [
             {
@@ -1243,7 +1243,7 @@
             },
             {
               "name": "menuItems",
-              "description": "Defines the items displayed in menu after a click on the primary title.\n\n**Note:** You can use the  `<ui5-li></ui5-li>` and its ancestors."
+              "description": "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."
             },
             {
               "name": "searchField",
@@ -1251,7 +1251,11 @@
             },
             {
               "name": "startButton",
-              "description": "Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a back or home button.\nIt gets overstyled to match ShellBar's styling."
+              "description": "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."
+            },
+            {
+              "name": "content",
+              "description": "Define the items displayed in the additional content area.\n**Note:** The `content` slot is in an experimental state and is a subject to change."
             }
           ],
           "events": [
@@ -1278,6 +1282,10 @@
             {
               "name": "search-button-click",
               "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`."
+            },
+            {
+              "name": "content-item-visibility-change",
+              "description": "Fired, when an item from the startContent or endContent slots is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change."
             }
           ],
           "js": {
@@ -1367,6 +1375,10 @@
               {
                 "name": "search-button-click",
                 "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`."
+              },
+              {
+                "name": "content-item-visibility-change",
+                "description": "Fired, when an item from the startContent or endContent slots is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change."
               }
             ]
           }
@@ -1424,6 +1436,14 @@
             ]
           }
         },
+        {
+          "name": "ui5-shellbar-spacer",
+          "description": "### Overview\nThe `ui5-shellbar-spacer` is an element, used for visual separation between the two content parts of the `ui5-shellbar`.\n**Note:** The `ui5-shellbar-spacer` component is in an experimental state and is a subject to change.\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "ui5-side-navigation",
           "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user’s current work context\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is intended for use within an `ui5-navigation-layout` component.\nWhile it can function independently, it is recommended to use it with\nthe `ui5-navigation-layout` for optimal user experience.\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\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)\n---\n\n\n### **Events:**\n - **selection-change** - Fired when the selection has changed via user interaction\n\n### **Slots:**\n - **default** - Defines the main items of the component.\n- **fixedItems** - Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n- **header** - Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;",
@@ -1885,6 +1905,14 @@
               "name": "subtitle-text",
               "description": "Defines the subtitle text of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "state",
+              "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.",
+              "value": {
+                "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -1925,6 +1953,13 @@
                 "name": "subtitle-text",
                 "description": "Defines the subtitle text of the component.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "state",
+                "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.",
+                "value": {
+                  "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
+                }
               }
             ],
             "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.7.0-rc.0",
+  "version": "2.7.0-rc.1",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -53,16 +53,16 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.7.0-rc.0",
-    "@ui5/webcomponents-base": "2.7.0-rc.0",
-    "@ui5/webcomponents-icons": "2.7.0-rc.0",
-    "@ui5/webcomponents-theming": "2.7.0-rc.0",
+    "@ui5/webcomponents": "2.7.0-rc.1",
+    "@ui5/webcomponents-base": "2.7.0-rc.1",
+    "@ui5/webcomponents-icons": "2.7.0-rc.1",
+    "@ui5/webcomponents-theming": "2.7.0-rc.1",
     "@zxing/library": "^0.21.3"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.7.0-rc.0",
+    "@ui5/webcomponents-tools": "2.7.0-rc.1",
     "chromedriver": "^131.0.0",
     "lit": "^2.0.0"
   },
-  "gitHead": "bae15996685c58d21d6bf20ce7fa8ed10e4728c7"
+  "gitHead": "2f90ed3982de20cc411a1cda852ee98709b15e33"
 }

package/src/FlexibleColumnLayoutTemplate.tsx

@@ -2,6 +2,7 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/InitialConfiguration.js";
 import verticalGrip from "@ui5/webcomponents-icons/dist/vertical-grip.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
 import type FlexibleColumnLayout from "./FlexibleColumnLayout.js";
 
 export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout) {
@@ -31,9 +32,10 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 				tabindex={this.startSeparatorTabIndex}
 				onMouseDown={this.onSeparatorPress}
 				onTouchStart={this.onSeparatorPress}
-				onKeyDown={this._onkeydown}
-				onKeyUp={this._onkeyup}
+				onKeyDown={this._onSeparatorKeydown}
+				onKeyUp={this._onSeparatorKeyUp}
 			>
+				{ this.showStartSeparatorArrow && arrowStart.call(this) }
 				{ gripStart.call(this) }
 			</div>
 
@@ -59,8 +61,8 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 				tabindex={this.endSeparatorTabIndex}
 				onMouseDown={this.onSeparatorPress}
 				onTouchStart={this.onSeparatorPress}
-				onKeyDown={this._onkeydown}
-				onKeyUp={this._onkeyup}
+				onKeyDown={this._onSeparatorKeydown}
+				onKeyUp={this._onSeparatorKeyUp}
 			>
 				{ gripEnd.call(this) }
 			</div>
@@ -82,6 +84,18 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 	);
 }
 
+function arrowStart(this: FlexibleColumnLayout) {
+	return (
+		<Button
+			icon={this.startArrowDirection === "backward" ? "slim-arrow-left" : "slim-arrow-right"}
+			design="Transparent"
+			onClick={this.switchLayoutOnArrowPress}
+			onKeyDown={this._onArrowKeydown}
+			class="ui5-fcl-arrow ui5-fcl-arrow--start"
+		/>
+	);
+}
+
 function gripStart(this: FlexibleColumnLayout) {
 	return (
 		<Icon

package/src/ShellBarPopoverTemplate.tsx

@@ -0,0 +1,47 @@
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import type ShellBar from "./ShellBar.js";
+
+export default function PopoversTemplate(this: ShellBar) {
+	return (
+		<>
+			<Popover class="ui5-shellbar-menu-popover"
+				hideArrow={true}
+				placement="Bottom"
+				preventInitialFocus={true}
+				onBeforeOpen={this._menuPopoverBeforeOpen}
+				onClose={this._menuPopoverAfterClose}
+			>
+				<List separators="None" selectionMode="Single" onSelectionChange={this._menuItemPress}>
+					<slot name="menuItems"></slot>
+				</List>
+			</Popover>
+
+			<Popover class="ui5-shellbar-overflow-popover"
+				placement="Bottom"
+				preventInitialFocus={true}
+				horizontalAlign={this.popoverHorizontalAlign}
+				hideArrow={true}
+				onBeforeOpen={this._overflowPopoverBeforeOpen}
+				onClose={this._overflowPopoverAfterClose}
+			>
+				<List separators="None" onItemClick={this._handleActionListClick}>
+					{this._hiddenIcons.map((icon, index) => (
+						<ListItemStandard
+							key={index}
+							data-count={icon.count}
+							data-ui5-external-action-item-id={icon.refItemid}
+							icon={icon.icon ? icon.icon : ""}
+							type="Active"
+							onui5-_press={icon.press}
+							tooltip={icon.tooltip}
+						>
+							{icon.text}
+						</ListItemStandard>
+					))}
+				</List>
+			</Popover>
+		</>
+	);
+}

package/src/ShellBarTemplate.tsx

@@ -0,0 +1,276 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import type ShellBar from "./ShellBar.js";
+import ShellBarPopoverTemplate from "./ShellBarPopoverTemplate.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+
+export default function ShellBarTemplate(this: ShellBar) {
+	return (
+		<>
+			<header
+				class={this.classes.wrapper}
+				aria-label={this._shellbarText}
+				onKeyDown={this._onKeyDown}
+				part="root">
+				<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">
+					{this.startButton.length > 0 && <slot name="startButton"></slot>}
+
+					{this.hasMenuItems && (
+						<>
+							{!this.showLogoInMenuButton && this.hasLogo && singleLogo.call(this)}
+							{this.showTitleInMenuButton && <h1 class="ui5-hidden-text">{this.primaryTitle}</h1>}
+							{this.showMenuButton && (
+								<>
+									<button
+										class={{
+											"ui5-shellbar-menu-button": true,
+											...this.classes.button,
+										}}
+										onClick={this._headerPress}
+										aria-haspopup="menu"
+										aria-expanded={this._menuPopoverExpanded}
+										data-ui5-stable="menu"
+										tabIndex={0}>
+										{this.showLogoInMenuButton && (
+											<span class="ui5-shellbar-logo" aria-label={this._logoText} title={this._logoText}>
+												<slot name="logo"></slot>
+											</span>
+										)}
+										{this.showTitleInMenuButton && (
+											<div class="ui5-shellbar-menu-button-title">{this.primaryTitle}</div>
+										)}
+										<Icon class="ui5-shellbar-menu-button-arrow" name={slimArrowDown} />
+									</button>
+									{this.secondaryTitle && !this.isSBreakPoint && (
+										<div style={{ display: "block" }} class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">
+											{this.secondaryTitle}
+										</div>
+									)}
+								</>
+							)}
+						</>
+					)}
+
+					{!this.hasMenuItems && (
+						<>
+							{this.isSBreakPoint && this.hasLogo && singleLogo.call(this)}
+							{!this.isSBreakPoint && (
+								<>
+									{combinedLogo.call(this)}
+									{this.secondaryTitle && this.primaryTitle && (
+										<h2 class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">
+											{this.secondaryTitle}
+										</h2>
+									)}
+								</>
+							)}
+						</>
+					)}
+				</div>
+				{this.hasMidContent && (
+					<div class="ui5-shellbar-overflow-container ui5-shellbar-mid-content">
+						<slot name="midContent"></slot>
+					</div>
+				)}
+				<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
+					{this.hasAdditionalContext && (
+						<>
+							<div style={this.styles.additionalContext.start.separator} class="ui5-shellbar-separator ui5-shellbar-separator-start"></div>
+							<div class="ui5-shellbar-overflow-container-additional-content" aria-label={this._additionalContextText} role={this._additionalContextRole}>
+								{this.startContent.map(item => (
+									<div key={item._individualSlot} id={item._individualSlot} class="ui5-shellbar-additional-content-item">
+										<slot name={item._individualSlot}></slot>
+									</div>
+								))}
+								<div class="ui5-shellbar-spacer"></div>
+								{this.endContent.map(item => (
+									<div key={item._individualSlot} id={item._individualSlot} class="ui5-shellbar-additional-content-item">
+										<slot name={item._individualSlot}></slot>
+									</div>
+								))}
+							</div>
+							<div style={this.styles.additionalContext.end.separator} class="ui5-shellbar-separator ui5-shellbar-separator-end"></div>
+						</>
+					)}
+					{!this.hasAdditionalContext && <div class="ui5-shellbar-spacer"></div>}
+					<div class="ui5-shellbar-overflow-container-right-child" role={this._rightChildRole}>
+						{this.hasSearchField && (
+							<>
+								{this._showFullWidthSearch && (
+									<div class="ui5-shellbar-search-full-width-wrapper" style={this.styles.searchField}>
+										<div class="ui5-shellbar-search-full-field">
+											<slot name="searchField"></slot>
+										</div>
+										<Button
+											onClick={this._handleCancelButtonPress}
+											class="ui5-shellbar-button ui5-shellbar-cancel-button"
+											data-ui5-stable="cancel-search">
+											{this._cancelBtnText}
+										</Button>
+									</div>
+								)}
+								<div class="ui5-shellbar-search-field" style={this.styles.searchField}>
+									{!this._showFullWidthSearch && <slot name="searchField"></slot>}
+								</div>
+								<Button
+									id={`${this._id}-item-1`}
+									class={{
+										"ui5-shellbar-button": true,
+										"ui5-shellbar-search-button": true,
+										"ui5-shellbar-search-item-for-arrow-nav": true,
+										...this.classes.search,
+									}}
+									icon="sap-icon://search"
+									data-ui5-text="Search"
+									data-ui5-notifications-count={this.notificationsCount}
+									data-ui5-stable="toggle-search"
+									onClick={this._handleSearchIconPress}
+									tooltip={this._searchBtnOpen}
+									aria-label={this._searchBtnOpen}
+									aria-expanded={this._searchFieldExpanded}
+									accessibilityAttributes={this.accInfo.search.accessibilityAttributes}
+								/>
+							</>
+						)}
+						{this.hasAssistant && (
+							<div id="assistant" class={this.classes.assistant}>
+								<slot name="assistant"></slot>
+							</div>
+						)}
+						{this.showNotifications && (
+							<Button
+								id={`${this._id}-item-2`}
+								class={{
+									"ui5-shellbar-button": true,
+									"ui5-shellbar-bell-button": true,
+									"ui5-shellbar-items-for-arrow-nav": true,
+									...this.classes.notification,
+								}}
+								icon="sap-icon://bell"
+								data-ui5-text="Notifications"
+								data-ui5-notifications-count={this.notificationsCount}
+								onClick={this._handleNotificationsPress}
+								tooltip={this._notificationsText}
+								accessibilityAttributes={this.accInfo.notifications.accessibilityAttributes}
+								data-ui5-stable="notifications"
+							/>
+						)}
+						{this.customItemsInfo.map(item => (
+							<Button
+								key={item.id}
+								id={item.id}
+								class={`${item.classes} ui5-shellbar-items-for-arrow-nav`}
+								icon={item.icon}
+								tooltip={item.tooltip}
+								data-count={item.count}
+								data-ui5-notifications-count={this.notificationsCount}
+								data-ui5-external-action-item-id={item.refItemid}
+								data-ui5-stable={item.stableDomRef}
+								onClick={item.press}
+							/>
+						))}
+						<Button
+							id={`${this._id}-item-5`}
+							class={{
+								"ui5-shellbar-no-overflow-button": true, // always visible
+								"ui5-shellbar-button": true,
+								"ui5-shellbar-overflow-button": true,
+								...this.classes.overflow,
+							}}
+							icon="sap-icon://overflow"
+							data-count={this._overflowNotifications}
+							onClick={this._handleOverflowPress}
+							tooltip={this._overflowText}
+							accessibilityAttributes={this.accInfo.overflow.accessibilityAttributes}
+							data-ui5-stable="overflow"
+						/>
+						{this.hasProfile && profileButton.call(this)}
+						{this.showProductSwitch && (
+							<Button
+								id={`${this._id}-item-4`}
+								class={`ui5-shellbar-no-overflow-button ui5-shellbar-button ui5-shellbar-button-product-switch ui5-shellbar-items-for-arrow-nav`}
+								icon="sap-icon://grid"
+								data-ui5-text="Product Switch"
+								onClick={this._handleProductSwitchPress}
+								tooltip={this._productsText}
+								aria-label={this._productSwitchBtnText}
+								aria-haspopup="dialog"
+								aria-expanded={this.accInfo.products.accessibilityAttributes.expanded}
+								accessibilityAttributes={this.accInfo.products.accessibilityAttributes}
+								data-ui5-stable="product-switch"
+							/>
+						)}
+					</div>
+				</div>
+			</header>
+			{ShellBarPopoverTemplate.call(this)}
+		</>
+	);
+}
+
+function profileButton(this: ShellBar) {
+	return (
+		<Button
+			data-profile-btn
+			id={`${this._id}-item-3`}
+			onClick={this._handleProfilePress}
+			tooltip={this._profileText}
+			class="ui5-shellbar-button ui5-shellbar-image-button ui5-shellbar-no-overflow-button ui5-shellbar-items-for-arrow-nav"
+			aria-label={this.imageBtnText}
+			aria-haspopup="dialog"
+			accessibilityAttributes={this.accInfo.profile.accessibilityAttributes}
+			data-ui5-stable="profile"
+		>
+			<slot name="profile"></slot>
+		</Button>
+	);
+}
+
+function singleLogo(this: ShellBar) {
+	return (
+		<span
+			role={this.accLogoRole}
+			class="ui5-shellbar-logo"
+			aria-label={this._logoText}
+			title={this._logoText}
+			onClick={this._logoPress}
+			onKeyDown={this._logoKeydown}
+			onKeyUp={this._logoKeyup}
+			tabIndex={0}
+			data-ui5-stable="logo">
+			<slot name="logo"></slot>
+		</span>
+	);
+}
+
+function combinedLogo(this: ShellBar) {
+	return (
+		<div
+			role={this.accLogoRole}
+			class="ui5-shellbar-logo-area"
+			onClick={this._logoPress}
+			tabIndex={0}
+			onKeyDown={this._logoKeydown}
+			onKeyUp={this._logoKeyup}
+			aria-label={this._logoAreaText}>
+			{this.hasLogo && (
+				<span
+					class="ui5-shellbar-logo"
+					title={this._logoText}
+					onClick={this._logoPress}
+					onKeyDown={this._logoKeydown}
+					onKeyUp={this._logoKeyup}
+					data-ui5-stable="logo">
+					<slot name="logo"></slot>
+				</span>
+			)}
+			<div class="ui5-shellbar-headings">
+				{this.primaryTitle && (
+					<h1 class="ui5-shellbar-title">
+						<bdi>{this.primaryTitle}</bdi>
+					</h1>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/TimelineGroupItemTemplate.tsx

@@ -1,5 +1,10 @@
 import type TimelineGroupItem from "./TimelineGroupItem.js";
+import TimelineLayout from "./types/TimelineLayout.js";
 import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+import slimArrowleft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import slimArrowup from "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 
 export default function TimelineGroupItemTemplate(this: TimelineGroupItem) {
 	return (
@@ -15,7 +20,7 @@ export default function TimelineGroupItemTemplate(this: TimelineGroupItem) {
 
 				<ToggleButton
 					class="ui5-tlgi-btn"
-					icon={this._groupItemIcon}
+					icon={getEffectiveGroupIcon.call(this, this.layout, this.collapsed)}
 					pressed={this.collapsed}
 					onClick={this.onGroupItemClick}
 				>
@@ -32,3 +37,11 @@ export default function TimelineGroupItemTemplate(this: TimelineGroupItem) {
 		</div>
 	);
 }
+
+function getEffectiveGroupIcon(layout: `${TimelineLayout}`, collapsed: boolean): string {
+	if (layout === TimelineLayout.Vertical) {
+		return collapsed ? slimArrowleft : slimArrowDown;
+	}
+
+	return collapsed ? slimArrowup : slimArrowRight;
+}

package/src/TimelineItemTemplate.tsx

@@ -16,7 +16,7 @@ export default function TimelineItemTemplate(this: TimelineItem) {
 				<div class="ui5-tli-icon-outer">
 					{
 						this.icon ?
-							<Icon class="ui5-tli-icon" name={this.icon}/>
+							<Icon class="ui5-tli-icon" name={this.icon} mode="Decorative"/>
 							:
 							<div class="ui5-tli-dummy-icon-container"></div>
 					}
@@ -28,6 +28,7 @@ export default function TimelineItemTemplate(this: TimelineItem) {
 					data-sap-focus-ref
 					class="ui5-tli-bubble"
 					tabindex={parseInt(this.forcedTabIndex)}
+					aria-description={this.timelineItemStateText}
 				>
 					<div class="ui5-tli-title">
 						{ this.name && name.call(this) }

package/src/i18n/messagebundle.properties

@@ -98,6 +98,12 @@ NOTIFICATION_LIST_GROUP_EXPANDED=Expanded
 #XACT: ARIA announcement for timeline label
 TIMELINE_ARIA_LABEL=Timeline
 
+#XACT: ARIA announcement for the TimelineItem state
+TIMELINE_ITEM_INFORMATION_STATE_TEXT=Information State
+TIMELINE_ITEM_POSITIVE_STATE_TEXT=Positive State
+TIMELINE_ITEM_NEGATIVE_STATE_TEXT=Negative State
+TIMELINE_ITEM_CRITICAL_STATE_TEXT=Critical State
+
 #XBUT: Button text for cancel button in the UploadCollectionItem
 UPLOADCOLLECTIONITEM_CANCELBUTTON_TEXT=Cancel
 
@@ -143,21 +149,43 @@ SHELLBAR_LABEL = Shell Bar
 #XACT: ARIA announcement for the logo button
 SHELLBAR_LOGO = Logo
 
+#XACT: ARIA announcement for the logo area
+SHELLBAR_LOGO_AREA = SAP {0} {1} Home
+
+#XACT: ARIA announcement for the main navigation button
+SHELLBAR_ADDITIONAL_CONTEXT = Additional Info
+
+#XACT: ARIA description announcement for the search field
+SHELLBAR_SEARCHFIELD_DESCRIPTION = Search results will be shown main area
+
 #XACT: ARIA announcement for the notifications button
 SHELLBAR_NOTIFICATIONS = {0} Notifications
 
+#XACT: ARIA predefined text for the notifications without the notifications count
+SHELLBAR_NOTIFICATIONS_NO_COUNT = Notifications
+
 #XACT: ARIA announcement for the profile button
 SHELLBAR_PROFILE = Profile
 
 #XACT: ARIA announcement for the products button
 SHELLBAR_PRODUCTS = Products
 
+#XACT: ARIA announcement for the ProductSwitch button
+SHELLBAR_PRODUCT_SWITCH_BTN = Product Switcher
+
 #XACT: ARIA announcement of ProductSwitch container
 PRODUCT_SWITCH_CONTAINER_LABEL=Products
 
 #XACT: ARIA announcement for the search button
 SHELLBAR_SEARCH = Search
 
+#XACT: ARIA announcement for the search field
+SHELLBAR_SEARCH_FIELD = Search Field
+
+#XACT: ARIA announcement for the search button
+SHELLBAR_SEARCH_BTN_OPEN = Open Search
+
+
 #XACT: ARIA announcement for the more button
 SHELLBAR_OVERFLOW = More
 

package/src/i18n/messagebundle_ar.properties

@@ -271,6 +271,8 @@ IM_TITLE_SURVEY=رأيك مهم
 
 IM_SUBTITLE_SURVEY=نريد أن نسمع رأيك حول برنامج SAP. شاركنا بتعليقاتك من خلال المشاركة في استطلاع الرأي القصير.
 
+DSC_MAIN_ARIA_LABEL=المحتوى الرئيسي
+
 DSC_SIDE_ARIA_LABEL=محتوى جانبي
 
 SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT=تنقل

package/src/i18n/messagebundle_bg.properties

@@ -271,6 +271,8 @@ IM_TITLE_SURVEY=Вашето мнение е важно за нас
 
 IM_SUBTITLE_SURVEY=Мнението ви за софтуера на SAP е важно за нас. Споделете го, като попълните кратката ни анкета.
 
+DSC_MAIN_ARIA_LABEL=Основно съдържание
+
 DSC_SIDE_ARIA_LABEL=Допълнително съдържание
 
 SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT=Навигация