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

package/dist/ShellBar.js

@@ -5,21 +5,24 @@ import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/icons/search.js";
-import "@ui5/webcomponents-icons/dist/icons/bell.js";
-import "@ui5/webcomponents-icons/dist/icons/overflow.js";
-import "@ui5/webcomponents-icons/dist/icons/grid.js";
+import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/search.js";
+import "@ui5/webcomponents-icons/dist/bell.js";
+import "@ui5/webcomponents-icons/dist/overflow.js";
+import "@ui5/webcomponents-icons/dist/grid.js";
 
 import {
 	SHELLBAR_LABEL,
 	SHELLBAR_LOGO,
 	SHELLBAR_COPILOT,
 	SHELLBAR_NOTIFICATIONS,
+	SHELLBAR_CANCEL,
 	SHELLBAR_PROFILE,
 	SHELLBAR_PRODUCTS,
 	SHELLBAR_SEARCH,
@@ -32,6 +35,9 @@ import ShellBarPopoverTemplate from "./generated/templates/ShellBarPopoverTempla
 
 // Styles
 import styles from "./generated/themes/ShellBar.css.js";
+import ShellBarPopoverCss from "./generated/themes/ShellBarPopover.css.js";
+
+const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
 
 /**
  * @public
@@ -39,6 +45,7 @@ import styles from "./generated/themes/ShellBar.css.js";
 const metadata = {
 	tag: "ui5-shellbar",
 	languageAware: true,
+	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
 
 		/**
@@ -66,13 +73,13 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>notificationCount</code>,
+		 * Defines the <code>notificationsCount</code>,
 		 * displayed in the notification icon top-right corner.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 */
-		notificationCount: {
+		notificationsCount: {
 			type: String,
 		},
 
@@ -109,17 +116,51 @@ const metadata = {
 		},
 
 		/**
-		 * @private
+		 * 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
 		 */
-		breakpointSize: {
-			type: String,
+		showSearchField: {
+			type: Boolean,
+		},
+
+		/**
+		 * An object of strings that defines additional accessibility roles for further customization.
+		 *
+		 * It supports the following fields:
+		 *  - <code>logoRole</code>: the accessibility role for the <code>logo</code>
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.6.0
+		 */
+		accessibilityRoles: {
+			type: Object,
+		},
+
+		/**
+		 * An object of strings that defines several additional accessibility texts
+		 * for even further customization.
+		 *
+		 * It supports the following fields:
+		 * - <code>profileButtonTitle</code>: defines the tooltip for the profile button
+		 * - <code>logoTitle</code>: defines the tooltip for the logo
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.1.0
+		 */
+		 accessibilityTexts: {
+			type: Object,
 		},
 
 		/**
 		 * @private
 		 */
-		showSearchField: {
-			type: Boolean,
+		breakpointSize: {
+			type: String,
 		},
 
 		/**
@@ -140,14 +181,6 @@ const metadata = {
 			type: Object,
 		},
 
-		_actionList: {
-			type: Object,
-		},
-
-		_searchField: {
-			type: Object,
-		},
-
 		_header: {
 			type: Object,
 		},
@@ -156,6 +189,7 @@ const metadata = {
 			type: String,
 			multiple: true,
 		},
+
 		_menuPopoverExpanded: {
 			type: Boolean,
 			noAttribute: true,
@@ -164,6 +198,11 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
+
+		_fullWidthSearch: {
+			type: Boolean,
+			noAttribute: true,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
@@ -173,19 +212,23 @@ const metadata = {
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-shellbar-item>&lt;/ui5-shellbar-item>.
 		 *
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.fiori.IShellBarItem[]}
+		 * @slot items
 		 * @public
 		 */
 		"default": {
 			propertyName: "items",
 			type: HTMLElement,
+			invalidateOnChildChange: true,
 		},
 
 		/**
 		 * You can pass <code>ui5-avatar</code> to set the profile image/icon.
 		 * If no profile slot is set - profile will be excluded from actions.
-		 * @type {HTMLElement}
+		 *
+		 * 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}
 		 * @slot
 		 * @since 1.0.0-rc.6
 		 * @public
@@ -197,7 +240,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 {HTMLElement}
+		 * @type {sap.ui.webcomponents.main.IAvatar}
 		 * @slot
 		 * @since 1.0.0-rc.8
 		 * @public
@@ -212,7 +255,7 @@ const metadata = {
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.IListItem[]}
 		 * @slot
 		 * @since 0.10
 		 * @public
@@ -224,7 +267,7 @@ const metadata = {
 		/**
 		 * Defines the <code>ui5-input</code>, that will be used as a search field.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.IInput}
 		 * @slot
 		 * @public
 		 */
@@ -237,7 +280,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 {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.IButton}
 		 * @slot
 		 * @public
 		 */
@@ -252,6 +295,7 @@ const metadata = {
 		 *
 		 *
 		 * @event sap.ui.webcomponents.fiori.ShellBar#notifications-click
+		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
@@ -276,9 +320,10 @@ const metadata = {
 
 		/**
 		 * Fired, when the product switch icon is activated.
-		 * <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
+		 * <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
+		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
@@ -318,10 +363,10 @@ const metadata = {
 
 		/**
 		 * Fired, when a menu item is activated
-		 * <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
+		 * <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
-		 * @param {HTMLElement} item dom ref of the activated list item
+		 * @param {HTMLElement} item DOM ref of the activated list item
 		 * @since 0.10
 		 * @public
 		 */
@@ -340,6 +385,36 @@ const metadata = {
  * The <code>ui5-shellbar</code> is meant to serve as an application header
  * and includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.
  * <br><br>
+ *
+ * <h3>Stable DOM Refs</h3>
+ *
+ * You can use the following stable DOM refs for the <code>ui5-shellbar</code>:
+ * <ul>
+ * <li>logo</li>
+ * <li>copilot</li>
+ * <li>notifications</li>
+ * <li>overflow</li>
+ * <li>profile</li>
+ * <li>product-switch</li>
+ * </ul>
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-shellbar</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>root - Used to style the outermost wrapper of the <code>ui5-shellbar</code></li>
+ * </ul>
+ *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents-fiori/dist/ShellBar";</code>
  *
@@ -357,10 +432,6 @@ class ShellBar extends UI5Element {
 		return metadata;
 	}
 
-	static get styles() {
-		return styles;
-	}
-
 	static get render() {
 		return litRender;
 	}
@@ -373,9 +444,17 @@ class ShellBar extends UI5Element {
 		return ShellBarPopoverTemplate;
 	}
 
+	static get styles() {
+		return styles;
+	}
+
+	static get staticAreaStyles() {
+		return [ShellBarPopoverCss];
+	}
+
 	static get FIORI_3_BREAKPOINTS() {
 		return [
-			559,
+			599,
 			1023,
 			1439,
 			1919,
@@ -385,7 +464,7 @@ class ShellBar extends UI5Element {
 
 	static get FIORI_3_BREAKPOINTS_MAP() {
 		return {
-			"559": "S",
+			"599": "S",
 			"1023": "M",
 			"1439": "L",
 			"1919": "XL",
@@ -403,16 +482,6 @@ class ShellBar extends UI5Element {
 		// marks if preventDefault() is called in item's press handler
 		this._defaultItemPressPrevented = false;
 
-		this._actionList = {
-			itemPress: event => {
-				if (!this._defaultItemPressPrevented) {
-					this.overflowPopover.close();
-				}
-
-				this._defaultItemPressPrevented = false;
-			},
-		};
-
 		this.menuItemsObserver = new MutationObserver(() => {
 			this._updateClonedMenuItems();
 		});
@@ -422,29 +491,33 @@ class ShellBar extends UI5Element {
 				this._updateClonedMenuItems();
 
 				if (this.hasMenuItems) {
-					this.updateStaticAreaItemContentDensity();
 					const menuPopover = await this._getMenuPopover();
-					menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
+					menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
 				}
 			},
 		};
 
-		this._searchField = {
-			left: 0,
-		};
-
 		this._handleResize = async event => {
-			await this._getResponsivePopover();
-			this.overflowPopover.close();
-			this._overflowActions();
+			this._debounce(async () => {
+				await this._getResponsivePopover();
+				this.overflowPopover.close();
+				this._overflowActions();
+			}, HANDLE_RESIZE_DEBOUNCE_RATE);
 		};
+	}
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
+	_debounce(fn, delay) {
+		clearTimeout(this._debounceInterval);
+		this._debounceInterval = setTimeout(() => {
+			this._debounceInterval = null;
+			fn();
+		}, delay);
 	}
 
 	_menuItemPress(event) {
+		this.menuPopover.close();
 		this.fireEvent("menu-item-click", {
-			item: event.detail.item,
+			item: event.detail.selectedItems[0],
 		}, true);
 	}
 
@@ -527,8 +600,10 @@ class ShellBar extends UI5Element {
 			const isHidden = (info.classes.indexOf("ui5-shellbar-hidden-button") !== -1);
 			const isSet = info.classes.indexOf("ui5-shellbar-invisible-button") === -1;
 			const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
+			const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
+			const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile);
 
-			return isHidden && isSet && !isOverflowIcon;
+			return isHidden && isSet && !shouldStayOnScreen;
 		});
 
 		this._observeMenuItems();
@@ -536,6 +611,8 @@ class ShellBar extends UI5Element {
 
 	onAfterRendering() {
 		this._overflowActions();
+
+		this._fullWidthSearch = this._showFullWidthSearch;
 	}
 
 	/**
@@ -571,10 +648,13 @@ class ShellBar extends UI5Element {
 			const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
 			const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile);
 
-			return Object.assign({}, info, {
+			return {
+				...info,
 				classes: `${info.classes} ${shouldStayOnScreen ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-button`,
-				style: `order: ${shouldStayOnScreen ? 1 : -1}`,
-			});
+				styles: {
+					order: shouldStayOnScreen ? 1 : -1,
+				},
+			};
 		});
 
 		this._updateItemsInfo(newItems);
@@ -582,10 +662,16 @@ class ShellBar extends UI5Element {
 
 	_handleActionsOverflow() {
 		const rightContainerRect = this.shadowRoot.querySelector(".ui5-shellbar-overflow-container-right").getBoundingClientRect();
-		const icons = this.shadowRoot.querySelectorAll(".ui5-shellbar-button:not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-invisible-button)");
+		let overflowSelector = ".ui5-shellbar-button:not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-invisible-button)";
+
+		if (this.showSearchField) {
+			overflowSelector += ",.ui5-shellbar-search-field";
+		}
+
+		const elementsToOverflow = this.shadowRoot.querySelectorAll(overflowSelector);
 		const isRTL = this.effectiveDir === "rtl";
 
-		let overflowCount = [].filter.call(icons, icon => {
+		let overflowCount = [].filter.call(elementsToOverflow, icon => {
 			const iconRect = icon.getBoundingClientRect();
 
 			if (isRTL) {
@@ -597,7 +683,7 @@ class ShellBar extends UI5Element {
 
 		overflowCount = overflowCount.length;
 
-		const items = this._getAllItems(!!overflowCount);
+		const items = this._getAllItems(!!overflowCount).filter(item => item.show);
 
 		const itemsByPriority = items.sort((item1, item2) => {
 			if (item1.priority > item2.priority) {
@@ -614,7 +700,9 @@ class ShellBar extends UI5Element {
 		for (let i = 0; i < itemsByPriority.length; i++) {
 			if (i < overflowCount) {
 				itemsByPriority[i].classes = `${itemsByPriority[i].classes} ui5-shellbar-hidden-button`;
-				itemsByPriority[i].style = `order: -1`;
+				itemsByPriority[i].styles = {
+					order: -1,
+				};
 			}
 		}
 
@@ -632,10 +720,10 @@ class ShellBar extends UI5Element {
 		this._updateItemsInfo(newItems);
 	}
 
-	_toggleActionPopover() {
+	async _toggleActionPopover() {
 		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-		this.updateStaticAreaItemContentDensity();
-		this.overflowPopover.openBy(overflowButton);
+		const overflowPopover = await this._getOverflowPopover();
+		overflowPopover.showAt(overflowButton);
 	}
 
 	onEnterDOM() {
@@ -645,6 +733,8 @@ class ShellBar extends UI5Element {
 	onExitDOM() {
 		this.menuItemsObserver.disconnect();
 		ResizeHandler.deregister(this, this._handleResize);
+		clearTimeout(this._debounceInterval);
+		this._debounceInterval = null;
 	}
 
 	_handleSearchIconPress(event) {
@@ -654,26 +744,7 @@ class ShellBar extends UI5Element {
 			return;
 		}
 
-		const searchField = this.shadowRoot.querySelector(`#${this._id}-searchfield-wrapper`);
-		const triggeredByOverflow = event.target.tagName.toLowerCase() === "ui5-li";
-		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-		const overflowButtonRect = overflowButton.getBoundingClientRect();
-		const isRTL = this.effectiveDir === "rtl";
-		let right = "";
-
-		if (isRTL) {
-			right = `${(triggeredByOverflow ? overflowButton.offsetLeft : event.target.offsetLeft) + overflowButtonRect.width}px`;
-		} else {
-			right = `calc(100% - ${triggeredByOverflow ? overflowButton.offsetLeft : event.target.offsetLeft}px)`;
-		}
-
-		this._searchField = Object.assign({}, this._searchField, {
-			"right": right,
-		});
-
-
-		const inputSlot = searchField.children[0];
-		const input = inputSlot && inputSlot.assignedNodes()[0];
+		const input = this.searchField[0];
 
 		// update the state immediately
 		if (input) {
@@ -688,15 +759,26 @@ class ShellBar extends UI5Element {
 		}, 100);
 	}
 
+	async _handleActionListClick(event) {
+		if (!this._defaultItemPressPrevented) {
+			this.closeOverflow();
+			// wait for DOM to be updated when ui5-popover is closed, otherwise if Enter key is hold
+			// there will be no visual indication that this has happened
+			await renderFinished();
+		}
+
+		this._defaultItemPressPrevented = false;
+	}
+
 	_handleCustomActionPress(event) {
 		const refItemId = event.target.getAttribute("data-ui5-external-action-item-id");
 
 		if (refItemId) {
 			const shellbarItem = this.items.find(item => {
-				return item.shadowRoot.querySelector(`#${refItemId}`);
+				return item._id === refItemId;
 			});
 
-			const prevented = !shellbarItem.fireEvent("item-click", { targetRef: event.target }, true);
+			const prevented = !shellbarItem.fireEvent("click", { targetRef: event.target }, true);
 
 			this._defaultItemPressPrevented = prevented;
 		}
@@ -720,6 +802,10 @@ class ShellBar extends UI5Element {
 		});
 	}
 
+	_handleCancelButtonPress() {
+		this.showSearchField = false;
+	}
+
 	_handleProductSwitchPress(event) {
 		const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch");
 
@@ -728,9 +814,75 @@ class ShellBar extends UI5Element {
 		}, true);
 	}
 
+	/**
+	 * Returns the <code>logo</code> DOM ref.
+	 * @type {HTMLElement}
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get logoDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="logo"]`);
+	}
+
+	/**
+	 * Returns the <code>copilot</code> DOM ref.
+	 * @type {HTMLElement}
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get copilotDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="copilot"]`);
+	}
+
+	/**
+	 * Returns the <code>notifications</code> icon DOM ref.
+	 * @type {HTMLElement}
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get notificationsDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="notifications"]`);
+	}
+
+	/**
+	 * Returns the <code>overflow</code> icon DOM ref.
+	 * @type {HTMLElement}
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get overflowDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="overflow"]`);
+	}
+
+	/**
+	 * Returns the <code>profile</code> icon DOM ref.
+	 * @type {HTMLElement}
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get profileDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="profile"]`);
+	}
+
+	/**
+	 * Returns the <code>product-switch</code> icon DOM ref.
+	 * @type {HTMLElement}
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get productSwitchDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="product-switch"]`);
+	}
+
 	/**
 	 * Returns all items that will be placed in the right of the bar as icons / dom elements.
-	 * @param {Boolean} showOverflowButton Determines if overflow button should be visible (not overflowing)
+	 * @param {boolean} showOverflowButton Determines if overflow button should be visible (not overflowing)
 	 */
 	_getAllItems(showOverflowButton) {
 		let domOrder = -1;
@@ -742,11 +894,15 @@ class ShellBar extends UI5Element {
 				classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
 				priority: 4,
 				domOrder: this.searchField.length ? (++domOrder) : -1,
-				style: `order: ${this.searchField.length ? 1 : -10}`,
+				styles: {
+					order: this.searchField.length ? 1 : -10,
+				},
 				id: `${this._id}-item-${1}`,
 				press: this._handleSearchIconPress.bind(this),
+				show: !!this.searchField.length,
 			},
 			...this.items.map((item, index) => {
+				item._getRealDomRef = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 				return {
 					icon: item.icon,
 					id: item._id,
@@ -756,11 +912,14 @@ class ShellBar extends UI5Element {
 					classes: "ui5-shellbar-custom-item ui5-shellbar-button",
 					priority: 1,
 					domOrder: (++domOrder),
-					style: `order: ${2}`,
+					styles: {
+						order: 2,
+					},
 					show: true,
 					press: this._handleCustomActionPress.bind(this),
 					custom: true,
 					title: item.title,
+					stableDomRef: item.stableDomRef,
 				};
 			}),
 			{
@@ -768,7 +927,9 @@ class ShellBar extends UI5Element {
 				text: "Notifications",
 				classes: `${this.showNotifications ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-bell-button ui5-shellbar-button`,
 				priority: 3,
-				style: `order: ${this.showNotifications ? 3 : -10}`,
+				styles: {
+					order: this.showNotifications ? 3 : -10,
+				},
 				id: `${this._id}-item-${2}`,
 				show: this.showNotifications,
 				domOrder: this.showNotifications ? (++domOrder) : -1,
@@ -780,7 +941,9 @@ class ShellBar extends UI5Element {
 				classes: `${showOverflowButton ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button ui5-shellbar-button`,
 				priority: 5,
 				order: 4,
-				style: `order: ${showOverflowButton ? 4 : -1}`,
+				styles: {
+					order: showOverflowButton ? 4 : -1,
+				},
 				domOrder: showOverflowButton ? (++domOrder) : -1,
 				id: `${this.id}-item-${5}`,
 				press: this._handleOverflowPress.bind(this),
@@ -790,7 +953,9 @@ class ShellBar extends UI5Element {
 				text: "Person",
 				classes: `${this.hasProfile ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-image-button ui5-shellbar-button`,
 				priority: 4,
-				style: `order: ${this.hasProfile ? 5 : -10};`,
+				styles: {
+					order: this.hasProfile ? 5 : -10,
+				},
 				profile: true,
 				id: `${this._id}-item-${3}`,
 				domOrder: this.hasProfile ? (++domOrder) : -1,
@@ -802,7 +967,9 @@ class ShellBar extends UI5Element {
 				text: "Product Switch",
 				classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-button ui5-shellbar-button-product-switch`,
 				priority: 2,
-				style: `order: ${this.showProductSwitch ? 6 : -10}`,
+				styles: {
+					order: this.showProductSwitch ? 6 : -10,
+				},
 				id: `${this._id}-item-${4}`,
 				show: this.showProductSwitch,
 				domOrder: this.showProductSwitch ? (++domOrder) : -1,
@@ -849,6 +1016,11 @@ class ShellBar extends UI5Element {
 		this.menuPopover = staticAreaItem.querySelector(".ui5-shellbar-menu-popover");
 	}
 
+	async _getOverflowPopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector(".ui5-shellbar-overflow-popover");
+	}
+
 	async _getMenuPopover() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector(".ui5-shellbar-menu-popover");
@@ -893,10 +1065,6 @@ class ShellBar extends UI5Element {
 
 	get styles() {
 		return {
-			searchField: {
-				[this.effectiveDir === "rtl" ? "left" : "right"]: this._searchField.right,
-				"top": `${parseInt(this._searchField.top)}px`,
-			},
 			items: {
 				notification: {
 					"order": this.isIconHidden("bell") ? "-1" : "3",
@@ -911,31 +1079,38 @@ class ShellBar extends UI5Element {
 					"order": this.isIconHidden("grid") ? "-1" : "6",
 				},
 			},
+			searchField: {
+				"display": this.correctSearchFieldStyles,
+			},
 		};
 	}
 
-	get customItemsInfo() {
-		return this._itemsInfo.filter(itemInfo => !!itemInfo.custom);
+	get correctSearchFieldStyles() {
+		if (this.showSearchField) {
+			return "flex";
+		}
+
+		return "none";
 	}
 
-	get nonFocusableLogo() {
-		return this.breakpointSize === "S" && this.hasMenuItems;
+	get customItemsInfo() {
+		return this._itemsInfo.filter(itemInfo => !!itemInfo.custom);
 	}
 
-	get hasFocusableLogo() {
-		return this.hasLogo && !this.nonFocusableLogo;
+	get hasLogo() {
+		return !!this.logo.length;
 	}
 
-	get hasNonFocusableLogo() {
-		return this.hasLogo && this.nonFocusableLogo;
+	get showLogoInMenuButton() {
+		return this.hasLogo && this.breakpointSize === "S";
 	}
 
-	get hasLogo() {
-		return !!this.logo.length;
+	get showTitleInMenuButton() {
+		return this.primaryTitle && !(this.showLogoInMenuButton);
 	}
 
-	get showArrowDown() {
-		return this.primaryTitle || this.hasInteractvieLogo;
+	get showMenuButton() {
+		return this.primaryTitle || this.showLogoInMenuButton;
 	}
 
 	get popoverHorizontalAlign() {
@@ -954,48 +1129,47 @@ class ShellBar extends UI5Element {
 		return this.menuItems.length > 0;
 	}
 
-	get menuBtnHasPopup() {
-		return this.hasMenuItems ? true : undefined;
+	get _shellbarText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_LABEL);
 	}
 
-	get menuBtnTabindex() {
-		return this.hasMenuItems ? "0" : "-1";
+	get _logoText() {
+		return this.accessibilityTexts.logoTitle || ShellBar.i18nBundle.getText(SHELLBAR_LOGO);
 	}
 
-	get menuPopoverExpanded() {
-		return this.hasMenuItems ? this._menuPopoverExpanded : undefined;
+	get _copilotText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_COPILOT);
 	}
 
-	get _shellbarText() {
-		return this.i18nBundle.getText(SHELLBAR_LABEL);
+	get _notificationsText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationsCount);
 	}
 
-	get _logoText() {
-		return this.i18nBundle.getText(SHELLBAR_LOGO);
+	get _cancelBtnText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_CANCEL);
 	}
 
-	get _copilotText() {
-		return this.i18nBundle.getText(SHELLBAR_COPILOT);
-	}
+	get _showFullWidthSearch() {
+		const size = this._handleBarBreakpoints();
+		const searchBtnHidden = !!this.shadowRoot.querySelector(".ui5-shellbar-search-button.ui5-shellbar-hidden-button");
 
-	get _notificationsText() {
-		return this.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationCount);
+		return ((size === "S") || searchBtnHidden);
 	}
 
 	get _profileText() {
-		return this.i18nBundle.getText(SHELLBAR_PROFILE);
+		return this.accessibilityTexts.profileButtonTitle || ShellBar.i18nBundle.getText(SHELLBAR_PROFILE);
 	}
 
 	get _productsText() {
-		return this.i18nBundle.getText(SHELLBAR_PRODUCTS);
+		return ShellBar.i18nBundle.getText(SHELLBAR_PRODUCTS);
 	}
 
 	get _searchText() {
-		return this.i18nBundle.getText(SHELLBAR_SEARCH);
+		return ShellBar.i18nBundle.getText(SHELLBAR_SEARCH);
 	}
 
 	get _overflowText() {
-		return this.i18nBundle.getText(SHELLBAR_OVERFLOW);
+		return ShellBar.i18nBundle.getText(SHELLBAR_OVERFLOW);
 	}
 
 	get accInfo() {
@@ -1010,25 +1184,36 @@ class ShellBar extends UI5Element {
 				"title": this._productsText,
 			},
 			search: {
-				"ariaExpanded": this.showSearchField,
 				"title": this._searchText,
+				"accessibilityAttributes": {
+					expanded: this.showSearchField,
+				},
 			},
 			overflow: {
 				"title": this._overflowText,
-				"ariaHaspopup": true,
-				"ariaExpanded": this._overflowPopoverExpanded,
+				"accessibilityAttributes": {
+					hasPopup: HasPopup.Menu,
+					expanded: this._overflowPopoverExpanded,
+				},
 			},
 		};
 	}
 
+	get accLogoRole() {
+		return this.accessibilityRoles.logoRole || "button";
+	}
+
+	static get dependencies() {
+		return [
+			Button,
+			List,
+			Popover,
+			StandardListItem,
+		];
+	}
+
 	static async onDefine() {
-		await Promise.all([
-			fetchI18nBundle("@ui5/webcomponents-fiori"),
-			Button.define(),
-			List.define(),
-			Popover.define(),
-			StandardListItem.define(),
-		]);
+		ShellBar.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
 	}
 }