@sapui5/sap.ushell 1.135.0 → 1.136.1

package/src/main/js/sap/ushell/thirdparty/ShellBar.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdparty/webcomponents', 'sap/ushell/thirdparty/webcomponents-fiori', 'sap/ushell/thirdparty/Icons', 'sap/ushell/thirdparty/event-strict', 'sap/ushell/thirdparty/parameters-bundle.css25', 'sap/ushell/thirdparty/MenuItem', 'sap/ushell/thirdparty/i18n-defaults'], (function (webcomponentsBase, webcomponents, webcomponentsFiori, Icons, eventStrict, parametersBundle_css, MenuItem, i18nDefaults) { 'use strict';
+sap.ui.define(['require', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdparty/webcomponents', 'sap/ushell/thirdparty/webcomponents-fiori', 'sap/ushell/thirdparty/Icons', 'sap/ushell/thirdparty/event-strict', 'sap/ushell/thirdparty/i18n-defaults', 'sap/ushell/thirdparty/toLowercaseEnumValue', 'sap/ushell/thirdparty/ListItemTemplate', 'sap/ushell/thirdparty/Icon', 'sap/ushell/thirdparty/overflow', 'sap/ushell/thirdparty/List', 'sap/ushell/thirdparty/Button2', 'sap/ushell/thirdparty/Menu', 'sap/ushell/thirdparty/information', 'sap/ushell/thirdparty/parameters-bundle.css', 'sap/ushell/thirdparty/i18n-defaults2', 'sap/ushell/thirdparty/BusyIndicator', 'sap/ushell/thirdparty/Label', 'sap/ushell/thirdparty/MenuItem2', 'sap/ushell/thirdparty/ListItemCustom'], (function (require, webcomponentsBase, webcomponents, webcomponentsFiori, Icons, eventStrict, i18nDefaults, toLowercaseEnumValue, ListItemTemplate, Icon, overflow, List, Button, Menu, information, parametersBundle_css, i18nDefaults$1, BusyIndicator, Label, MenuItem, ListItemCustom) { 'use strict';
 
     const predefinedHooks = {
         imageBegin,
@@ -8,33 +8,75 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
     };
     function ListItemStandardTemplate(hooks) {
         const currentHooks = { ...predefinedHooks, ...hooks };
-        return parametersBundle_css.ListItemTemplate.call(this, currentHooks);
+        return ListItemTemplate.ListItemTemplate.call(this, currentHooks);
     }
     function listItemContent() {
-        return parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [parametersBundle_css.jsxs("div", { class: "ui5-li-text-wrapper", children: [parametersBundle_css.jsx("span", { part: "title", class: "ui5-li-title", children: parametersBundle_css.jsx("slot", {}) }), this.description && (parametersBundle_css.jsxs("div", { class: "ui5-li-description-info-wrapper", children: [parametersBundle_css.jsx("span", { part: "description", class: "ui5-li-desc", children: this.description }), this.additionalText && (parametersBundle_css.jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText }))] })), !this.typeActive && parametersBundle_css.jsx("span", { class: "ui5-hidden-text", children: this.type })] }), !this.description && this.additionalText && (parametersBundle_css.jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText }))] });
+        return i18nDefaults.jsxs(i18nDefaults.Fragment, { children: [i18nDefaults.jsxs("div", { class: "ui5-li-text-wrapper", children: [renderTitle.call(this), renderDescription.call(this), !this.typeActive && i18nDefaults.jsx("span", { class: "ui5-hidden-text", children: this.type })] }), !this.description && renderAdditionalText.call(this)] });
+    }
+    function renderTitle() {
+        if (this.wrappingType === overflow.WrappingType.Normal) {
+            return this.expandableTextTemplate?.call(this, {
+                className: "ui5-li-title",
+                text: this._textContent,
+                maxCharacters: this._maxCharacters,
+                part: "title",
+            });
+        }
+        return (i18nDefaults.jsx("span", { part: "title", class: "ui5-li-title", children: this.text ? this.text : i18nDefaults.jsx("slot", {}) }));
+    }
+    function renderDescription() {
+        if (!this.description) {
+            return null;
+        }
+        if (this.wrappingType === overflow.WrappingType.Normal) {
+            return (i18nDefaults.jsxs("div", { class: "ui5-li-description-info-wrapper", children: [this.expandableTextTemplate?.call(this, {
+                        className: "ui5-li-desc",
+                        text: this.description,
+                        maxCharacters: this._maxCharacters,
+                        part: "description",
+                    }), renderAdditionalText.call(this)] }));
+        }
+        return (i18nDefaults.jsxs("div", { class: "ui5-li-description-info-wrapper", children: [i18nDefaults.jsx("span", { part: "description", class: "ui5-li-desc", children: this.description }), renderAdditionalText.call(this)] }));
+    }
+    function renderAdditionalText() {
+        if (!this.additionalText) {
+            return null;
+        }
+        return i18nDefaults.jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText });
     }
     function imageBegin() {
         if (this.hasImage) {
-            return parametersBundle_css.jsx("div", { class: "ui5-li-image", children: parametersBundle_css.jsx("slot", { name: "image" }) });
+            return i18nDefaults.jsx("div", { class: "ui5-li-image", children: i18nDefaults.jsx("slot", { name: "image" }) });
         }
     }
     function iconBegin() {
         if (this.displayIconBegin) {
-            return parametersBundle_css.jsx(parametersBundle_css.Icon, { part: "icon", name: this.icon, class: "ui5-li-icon", mode: "Decorative" });
+            return i18nDefaults.jsx(Icon.Icon, { part: "icon", name: this.icon, class: "ui5-li-icon", mode: "Decorative" });
         }
     }
     function iconEnd() {
         if (this.displayIconEnd) {
-            return parametersBundle_css.jsx(parametersBundle_css.Icon, { part: "icon", name: this.icon, class: "ui5-li-icon", mode: "Decorative" });
+            return i18nDefaults.jsx(Icon.Icon, { part: "icon", name: this.icon, class: "ui5-li-icon", mode: "Decorative" });
         }
     }
 
-    var __decorate$3 = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     };
+    var ListItemStandard_1;
+    /**
+     * Maximum number of characters to display for small screens (Size S)
+     * @private
+     */
+    const MAX_CHARACTERS_SIZE_S = 100;
+    /**
+     * Maximum number of characters to display for medium and larger screens (Size M and above)
+     * @private
+     */
+    const MAX_CHARACTERS_SIZE_M = 300;
     /**
      * @class
      * The `ui5-li` represents the simplest type of item for a `ui5-list`.
@@ -55,12 +97,14 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
      * @csspart checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode
      * @slot {Node[]} default - Defines the text of the component.
      *
-     * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+     * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. <br/>
+     * **Note:** Deprecated since version `2.10.0`. Use the `text` property instead. <br/>
+     * Only use the default slot if you need to apply custom text formatting with HTML elements (like `<b>`, `<i>`, etc.).
      * @constructor
      * @extends ListItem
      * @public
      */
-    let ListItemStandard = class ListItemStandard extends parametersBundle_css.ListItem {
+    let ListItemStandard = ListItemStandard_1 = class ListItemStandard extends ListItemTemplate.ListItem {
         constructor() {
             super(...arguments);
             /**
@@ -87,12 +131,21 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
              */
             this.movable = false;
             /**
-             * Defines if the text of the component should wrap, they truncate by default.
+             * Defines if the text of the component should wrap when it's too long.
+             * When set to "Normal", the content (title, description) will be wrapped
+             * using the `ui5-expandable-text` component.<br/>
+             *
+             * The text can wrap up to 100 characters on small screens (size S) and
+             * up to 300 characters on larger screens (size M and above). When text exceeds
+             * these limits, it truncates with an ellipsis followed by a text expansion trigger.
+             *
+             * Available options are:
+             * - `None` (default) - The text will truncate with an ellipsis.
+             * - `Normal` - The text will wrap (without truncation).
              *
-             * **Note:** this property takes affect only if text node is provided to default slot of the component
              * @default "None"
-             * @private
-             * @since 1.5.0
+             * @public
+             * @since 2.10.0
              */
             this.wrappingType = "None";
             /**
@@ -104,8 +157,37 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         }
         onBeforeRendering() {
             super.onBeforeRendering();
-            this.hasTitle = !!this.textContent;
+            this.hasTitle = !!(this.text || this.textContent);
             this._hasImage = this.hasImage;
+            // Only load ExpandableText if "Normal" wrapping is used
+            if (this.wrappingType === "Normal") {
+                // If feature is already loaded (preloaded by the user via importing ListItemStandardExpandableText.js), the template is already available
+                if (ListItemStandard_1.ExpandableTextTemplate) {
+                    this.expandableTextTemplate = ListItemStandard_1.ExpandableTextTemplate;
+                    // If feature is not preloaded, load the template dynamically
+                }
+                else {
+                    new Promise(function (resolve, reject) { require(['sap/ushell/thirdparty/_dynamics/ListItemStandardExpandableTextTemplate'], resolve, reject); }).then(module => {
+                        this.expandableTextTemplate = module.default;
+                    });
+                }
+            }
+        }
+        /**
+         * Returns the content text, either from text property or from the default slot
+         * @private
+         */
+        get _textContent() {
+            return this.text || this.textContent || "";
+        }
+        /**
+         * Determines the maximum characters to display based on the current media range.
+         * - Size S: 100 characters
+         * - Size M and larger: 300 characters
+         * @private
+         */
+        get _maxCharacters() {
+            return this.mediaRange === "S" ? MAX_CHARACTERS_SIZE_S : MAX_CHARACTERS_SIZE_M;
         }
         get displayIconBegin() {
             return !!(this.icon && !this.iconEnd);
@@ -117,516 +199,110 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             return !!this.image.length;
         }
     };
-    __decorate$3([
+    __decorate$1([
+        webcomponentsBase.s()
+    ], ListItemStandard.prototype, "text", void 0);
+    __decorate$1([
         webcomponentsBase.s()
     ], ListItemStandard.prototype, "description", void 0);
-    __decorate$3([
+    __decorate$1([
         webcomponentsBase.s()
     ], ListItemStandard.prototype, "icon", void 0);
-    __decorate$3([
+    __decorate$1([
         webcomponentsBase.s({ type: Boolean })
     ], ListItemStandard.prototype, "iconEnd", void 0);
-    __decorate$3([
+    __decorate$1([
         webcomponentsBase.s()
     ], ListItemStandard.prototype, "additionalText", void 0);
-    __decorate$3([
+    __decorate$1([
         webcomponentsBase.s()
     ], ListItemStandard.prototype, "additionalTextState", void 0);
-    __decorate$3([
+    __decorate$1([
         webcomponentsBase.s({ type: Boolean })
     ], ListItemStandard.prototype, "movable", void 0);
-    __decorate$3([
+    __decorate$1([
         webcomponentsBase.s()
     ], ListItemStandard.prototype, "accessibleName", void 0);
-    __decorate$3([
+    __decorate$1([
         webcomponentsBase.s()
     ], ListItemStandard.prototype, "wrappingType", void 0);
-    __decorate$3([
+    __decorate$1([
         webcomponentsBase.s({ type: Boolean })
     ], ListItemStandard.prototype, "hasTitle", void 0);
-    __decorate$3([
+    __decorate$1([
         webcomponentsBase.s({ type: Boolean })
     ], ListItemStandard.prototype, "_hasImage", void 0);
-    __decorate$3([
+    __decorate$1([
+        webcomponentsBase.s({ noAttribute: true })
+    ], ListItemStandard.prototype, "expandableTextTemplate", void 0);
+    __decorate$1([
         webcomponentsBase.d()
     ], ListItemStandard.prototype, "image", void 0);
-    ListItemStandard = __decorate$3([
+    ListItemStandard = ListItemStandard_1 = __decorate$1([
         webcomponentsBase.m({
             tag: "ui5-li",
-            renderer: parametersBundle_css.d,
+            renderer: i18nDefaults.d,
             template: ListItemStandardTemplate,
         })
     ], ListItemStandard);
     ListItemStandard.define();
     var ListItemStandard$1 = ListItemStandard;
 
-    function MenuSeparatorTemplate() {
-        return (parametersBundle_css.jsx(i18nDefaults.ListItemCustom, { class: "ui5-menu-separator", _forcedAccessibleRole: "separator", disabled: true }));
-    }
-
-    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
-    Icons.p("@ui5/webcomponents", "sap_horizon", async () => parametersBundle_css.defaultTheme$1);
-    var menuSeparatorCss = `:host{border-top:.0625rem solid var(--sapGroup_ContentBorderColor);min-height:.125rem}.ui5-menu-separator{border:inherit;min-height:inherit;background:inherit;opacity:1}
-`;
-
-    var __decorate$2 = (this && this.__decorate) || function (decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    /**
-     * @class
-     * The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.
-     * @constructor
-     * @extends ListItemBase
-     * @implements {IMenuItem}
-     * @public
-     * @since 2.0.0
-     */
-    let MenuSeparator = class MenuSeparator extends parametersBundle_css.ListItemBase {
-        get isSeparator() {
-            return true;
-        }
-        get classes() {
-            return {
-                main: {
-                    "ui5-menu-separator": true,
-                },
-            };
-        }
-        /**
-         * @override
-         */
-        get _focusable() {
-            return false;
-        }
-        /**
-         * @override
-         */
-        get _pressable() {
-            return false;
-        }
-    };
-    MenuSeparator = __decorate$2([
-        webcomponentsBase.m({
-            tag: "ui5-menu-separator",
-            renderer: parametersBundle_css.d,
-            styles: [menuSeparatorCss],
-            template: MenuSeparatorTemplate,
-        })
-    ], MenuSeparator);
-    MenuSeparator.define();
-
-    function MenuTemplate() {
-        return (parametersBundle_css.jsxs(parametersBundle_css.ResponsivePopover, { id: `${this._id}-menu-rp`, class: "ui5-menu-rp", placement: "Bottom", verticalAlign: "Bottom", opener: this.opener, open: this.open, preventInitialFocus: true, hideArrow: true, allowTargetOverlap: true, accessibleName: this.acessibleNameText, onBeforeOpen: this._beforePopoverOpen, onOpen: this._afterPopoverOpen, onBeforeClose: this._beforePopoverClose, onClose: this._afterPopoverClose, children: [this.isPhone &&
-                    parametersBundle_css.jsxs("div", { slot: "header", class: "ui5-menu-dialog-header", children: [parametersBundle_css.jsx("div", { class: "ui5-menu-dialog-title", children: parametersBundle_css.jsx("h1", { children: this.headerText }) }), parametersBundle_css.jsx(parametersBundle_css.Button, { icon: parametersBundle_css.declineIcon, design: "Transparent", "aria-label": this.labelClose, onClick: this._close })] }), parametersBundle_css.jsx("div", { id: `${this._id}-menu-main`, children: this.items.length ?
-                        (parametersBundle_css.jsx(parametersBundle_css.List, { id: `${this._id}- menu-list`, selectionMode: "None", loading: this.loading, loadingDelay: this.loadingDelay, separators: "None", accessibleRole: "Menu", onItemClick: this._itemClick, onMouseOver: this._itemMouseOver, onKeyDown: this._itemKeyDown, "onui5-close-menu": this._close, children: parametersBundle_css.jsx("slot", {}) }))
-                        : this.loading && (parametersBundle_css.jsx(parametersBundle_css.BusyIndicator, { id: `${this._id}-menu-busy-indicator`, delay: this.loadingDelay, class: "ui5-menu-busy-indicator", active: true })) })] }));
-    }
-
-    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
-    Icons.p("@ui5/webcomponents", "sap_horizon", async () => parametersBundle_css.defaultTheme$1);
-    var menuCss = `:host{line-height:initial}::slotted([ui5-menu-item]){line-height:inherit}.ui5-menu-rp[ui5-responsive-popover]::part(header),.ui5-menu-rp[ui5-responsive-popover]::part(content),.ui5-menu-rp[ui5-responsive-popover]::part(footer){padding:0}.ui5-menu-rp[ui5-responsive-popover]{box-shadow:var(--sapContent_Shadow1);border-radius:var(--_ui5-v2-9-0_menu_popover_border_radius)}.ui5-menu-busy-indicator{width:100%}.ui5-menu-dialog-header{display:flex;height:var(--_ui5-v2-9-0-responsive_popover_header_height);align-items:center;justify-content:space-between;padding:0px 1rem;width:100%;overflow:hidden}.ui5-menu-dialog-title{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:calc(100% - 6.5rem);padding-right:1rem;font-family:var(--sapFontHeaderFamily)}.ui5-menu-dialog-title>h1{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sapFontHeader5Size)}.ui5-menu-back-button{margin-right:1rem}
-`;
-
-    var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    var Menu_1;
-    const MENU_OPEN_DELAY = 300;
-    /**
-     * @class
-     *
-     * ### Overview
-     *
-     * `ui5-menu` component represents a hierarchical menu structure.
-     *
-     * ### Structure
-     *
-     * The `ui5-menu` can hold two types of entities:
-     *
-     * - `ui5-menu-item` components
-     * - `ui5-menu-separator` - used to separate menu items with a line
-     *
-     * An arbitrary hierarchy structure can be represented by recursively nesting menu items.
-     *
-     * ### Keyboard Handling
-     *
-     * The `ui5-menu` provides advanced keyboard handling.
-     * The user can use the following keyboard shortcuts in order to navigate trough the tree:
-     *
-     * - `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.
-     * - `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested
-     * in the currently clicked menu item.
-     * - `Arrow Left` or `Escape` - Closes the currently opened sub-menu.
-     *
-     * when there is `endContent` :
-     * - `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself
-     * - `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items
-     *
-     * Note: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.
-     *
-     * ### ES6 Module Import
-     *
-     * `import "@ui5/webcomponents/dist/Menu.js";`
-     * @constructor
-     * @extends UI5Element
-     * @since 1.3.0
-     * @public
-     */
-    let Menu = Menu_1 = class Menu extends webcomponentsBase.b {
-        constructor() {
-            super(...arguments);
-            /**
-             * Indicates if the menu is open
-             * @public
-             * @default false
-             * @since 1.10.0
-             */
-            this.open = false;
-            /**
-             * Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.
-             * @default false
-             * @public
-             * @since 1.13.0
-             */
-            this.loading = false;
-            /**
-             * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover..
-             * @default 1000
-             * @public
-             * @since 1.13.0
-             */
-            this.loadingDelay = 1000;
-        }
-        get isRtl() {
-            return this.effectiveDir === "rtl";
-        }
-        get labelClose() {
-            return Menu_1.i18nBundle.getText(parametersBundle_css.MENU_CLOSE_BUTTON_ARIA_LABEL);
-        }
-        get isPhone() {
-            return Icons.d();
-        }
-        get _popover() {
-            return this.shadowRoot.querySelector("[ui5-responsive-popover]");
-        }
-        get _menuItems() {
-            return this.items.filter((item) => !item.isSeparator);
-        }
-        get acessibleNameText() {
-            return Menu_1.i18nBundle.getText(parametersBundle_css.MENU_POPOVER_ACCESSIBLE_NAME);
-        }
-        onBeforeRendering() {
-            const siblingsWithIcon = this._menuItems.some(menuItem => !!menuItem.icon);
-            this._menuItems.forEach(item => {
-                item._siblingsWithIcon = siblingsWithIcon;
-            });
-        }
-        _close() {
-            this.open = false;
-        }
-        _openItemSubMenu(item) {
-            clearTimeout(this._timeout);
-            if (!item._popover || item._popover.open) {
-                return;
-            }
-            this.fireDecoratorEvent("before-open", {
-                item,
-            });
-            item._popover.opener = item;
-            item._popover.open = true;
-            item.selected = true;
-        }
-        _closeItemSubMenu(item) {
-            if (item && item._popover) {
-                const openedSibling = item._menuItems.find(menuItem => menuItem._popover && menuItem._popover.open);
-                if (openedSibling) {
-                    this._closeItemSubMenu(openedSibling);
-                }
-                item._popover.open = false;
-                item.selected = false;
-            }
-        }
-        _itemMouseOver(e) {
-            if (Icons.f$2()) {
-                // respect mouseover only on desktop
-                const item = e.target;
-                if (this._isInstanceOfMenuItem(item)) {
-                    item.focus();
-                    // Opens submenu with 300ms delay
-                    this._startOpenTimeout(item);
-                }
-            }
-        }
-        async focus(focusOptions) {
-            await Icons.f$1();
-            const firstMenuItem = this._menuItems[0];
-            if (firstMenuItem) {
-                return firstMenuItem.focus(focusOptions);
-            }
-            return super.focus(focusOptions);
-        }
-        _startOpenTimeout(item) {
-            clearTimeout(this._timeout);
-            this._timeout = setTimeout(() => {
-                const opener = item.parentElement;
-                const openedSibling = opener && opener._menuItems.find(menuItem => menuItem._popover && menuItem._popover.open);
-                if (openedSibling) {
-                    this._closeItemSubMenu(openedSibling);
-                }
-                this._openItemSubMenu(item);
-            }, MENU_OPEN_DELAY);
-        }
-        _itemClick(e) {
-            const item = e.detail.item;
-            if (!item._popover) {
-                const prevented = !this.fireDecoratorEvent("item-click", {
-                    "item": item,
-                    "text": item.text || "",
-                });
-                if (!prevented && this._popover) {
-                    item.fireDecoratorEvent("close-menu");
-                }
-            }
-            else {
-                this._openItemSubMenu(item);
-            }
-        }
-        _itemKeyDown(e) {
-            const isTabNextPrevious = webcomponentsBase.B(e) || webcomponentsBase.m$1(e);
-            const item = e.target;
-            const parentElement = item.parentElement;
-            const shouldItemNavigation = webcomponentsBase.D(e) || webcomponentsBase.P(e);
-            const shouldOpenMenu = this.isRtl ? webcomponentsBase.K(e) : webcomponentsBase.c(e);
-            const shouldCloseMenu = !shouldItemNavigation && !shouldOpenMenu && this._isInstanceOfMenuItem(parentElement);
-            if (this._isInstanceOfMenuItem(item)) {
-                if (webcomponentsBase.b$1(e) || isTabNextPrevious) {
-                    e.preventDefault();
-                }
-                if (webcomponentsBase.c(e) || webcomponentsBase.K(e)) {
-                    item._navigateToEndContent(webcomponentsBase.K(e));
-                }
-                if (shouldOpenMenu) {
-                    this._openItemSubMenu(item);
-                }
-                else if ((shouldCloseMenu || isTabNextPrevious) && parentElement._popover) {
-                    parentElement._popover.open = false;
-                    parentElement.selected = false;
-                    parentElement._popover.focusOpener();
-                }
-            }
-            else if (webcomponentsBase.D(e)) {
-                this._navigateOutOfEndContent(parentElement);
-            }
-            else if (webcomponentsBase.P(e)) {
-                this._navigateOutOfEndContent(parentElement, true);
-            }
-        }
-        _navigateOutOfEndContent(menuItem, isDownwards) {
-            const opener = menuItem?.parentElement;
-            const currentIndex = opener._menuItems.indexOf(menuItem);
-            const nextItem = isDownwards ? opener._menuItems[currentIndex + 1] : opener._menuItems[currentIndex - 1];
-            const itemToFocus = nextItem || opener._menuItems[currentIndex];
-            itemToFocus.focus();
-        }
-        _beforePopoverOpen(e) {
-            const prevented = !this.fireDecoratorEvent("before-open", {});
-            if (prevented) {
-                this.open = false;
-                e.preventDefault();
-            }
-        }
-        _afterPopoverOpen() {
-            this._menuItems[0]?.focus();
-            this.fireDecoratorEvent("open");
-        }
-        _beforePopoverClose(e) {
-            const prevented = !this.fireDecoratorEvent("before-close", { escPressed: e.detail.escPressed });
-            if (prevented) {
-                this.open = true;
-                e.preventDefault();
-            }
-        }
-        _afterPopoverClose() {
-            this.open = false;
-            this.fireDecoratorEvent("close");
-        }
-        _isInstanceOfMenuItem(object) {
-            return "isMenuItem" in object;
-        }
-    };
-    __decorate$1([
-        webcomponentsBase.s()
-    ], Menu.prototype, "headerText", void 0);
-    __decorate$1([
-        webcomponentsBase.s({ type: Boolean })
-    ], Menu.prototype, "open", void 0);
-    __decorate$1([
-        webcomponentsBase.s({ type: Boolean })
-    ], Menu.prototype, "loading", void 0);
-    __decorate$1([
-        webcomponentsBase.s({ type: Number })
-    ], Menu.prototype, "loadingDelay", void 0);
-    __decorate$1([
-        webcomponentsBase.s({ converter: parametersBundle_css.e })
-    ], Menu.prototype, "opener", void 0);
-    __decorate$1([
-        webcomponentsBase.d({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
-    ], Menu.prototype, "items", void 0);
-    __decorate$1([
-        parametersBundle_css.i("@ui5/webcomponents")
-    ], Menu, "i18nBundle", void 0);
-    Menu = Menu_1 = __decorate$1([
-        webcomponentsBase.m({
-            tag: "ui5-menu",
-            renderer: parametersBundle_css.d,
-            styles: menuCss,
-            template: MenuTemplate,
-        })
-        /**
-         * Fired when an item is being clicked.
-         *
-         * **Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.
-         * @param { HTMLElement } item The currently clicked menu item.
-         * @param { string } text The text of the currently clicked menu item.
-         * @public
-         */
-        ,
-        eventStrict.l("item-click", {
-            cancelable: true,
-        })
-        /**
-         * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.
-         *
-         * **Note:** Since 1.14.0 the event is also fired before a sub-menu opens.
-         * @public
-         * @since 1.10.0
-         * @param { HTMLElement } item The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening.
-         */
-        ,
-        eventStrict.l("before-open", {
-            bubbles: true,
-            cancelable: true,
-        })
-        /**
-         * Fired after the menu is opened.
-         * @public
-         * @since 1.10.0
-         */
-        ,
-        eventStrict.l("open", {
-            bubbles: true,
-        })
-        /**
-         * Fired when the menu is being closed.
-         * @private
-         */
-        ,
-        eventStrict.l("close-menu", {
-            bubbles: true,
-        })
-        /**
-         * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.
-         * @public
-         * @param {boolean} escPressed Indicates that `ESC` key has triggered the event.
-         * @since 1.10.0
-         */
-        ,
-        eventStrict.l("before-close", {
-            bubbles: true,
-            cancelable: true,
-        })
-        /**
-         * Fired after the menu is closed.
-         * @public
-         * @since 1.10.0
-         */
-        ,
-        eventStrict.l("close")
-    ], Menu);
-    Menu.define();
-    var Menu$1 = Menu;
-
-    const name$b = "search";
-    const pathData$b = "M470 426q10 9 10 22.5T470 471q-9 9-22 9t-23-9L308 353q-45 31-100 31-36 0-68-13.5T84 333t-38-56-14-69q0-36 14-68t38-56 56-38 68-14 68 14 56 38 38 56 14 68q0 28-8.5 53T353 308zm-262-74q30 0 56-11t45.5-30.5 31-46T352 208t-11.5-56-31-45.5-45.5-31T208 64t-56.5 11.5-46 31T75 152t-11 56 11 56.5 30.5 46 46 30.5 56.5 11z";
-    const ltr$b = true;
-    const accData$3 = parametersBundle_css.ICON_SEARCH;
-    const collection$b = "SAP-icons-v4";
-    const packageName$b = "@ui5/webcomponents-icons";
-
-    Icons.f(name$b, { pathData: pathData$b, ltr: ltr$b, accData: accData$3, collection: collection$b, packageName: packageName$b });
-
-    const name$a = "search";
-    const pathData$a = "M473 436q7 7 7 18t-7.5 18.5T454 480q-10 0-18-8l-95-95q-51 39-117 39-40 0-75-15t-61-41-41-61-15-75 15-75 41-61 61-41 75-15 75 15 61 41 41 61 15 75q0 64-39 117zM83 224q0 30 11 55.5t30 44.5 44.5 30 55.5 11 55.5-11 44.5-30 30-44.5 11-55.5-11-55.5-30-44.5-44.5-30T224 83t-55.5 11-44.5 30-30 44.5T83 224z";
-    const ltr$a = true;
-    const accData$2 = parametersBundle_css.ICON_SEARCH;
-    const collection$a = "SAP-icons-v5";
-    const packageName$a = "@ui5/webcomponents-icons";
-
-    Icons.f(name$a, { pathData: pathData$a, ltr: ltr$a, accData: accData$2, collection: collection$a, packageName: packageName$a });
-
-    var search = "search";
-
-    const name$9 = "da";
-    const pathData$9 = "M36 163l220 305 221-306-89-130H137zm220 349q-8 0-13-7L3 172q-3-5-3-10t3-9L117 6q5-6 12-6h267q9 0 13 7l100 146q3 4 3 9t-3 10L269 505q-5 7-13 7zm120-326q-26 9-39.5 22.5T315 248q-3 8-11 8t-11-8q-8-26-21.5-39.5T232 186q-8-2-8-10t8-11q26-9 39.5-22.5T293 103q3-7 11-7t11 7q8 26 21.5 39.5T376 165q8 3 8 11 0 3-1.5 6t-6.5 4z";
+    const name$9 = "search";
+    const pathData$9 = "M470 426q10 9 10 22.5T470 471q-9 9-22 9t-23-9L308 353q-45 31-100 31-36 0-68-13.5T84 333t-38-56-14-69q0-36 14-68t38-56 56-38 68-14 68 14 56 38 38 56 14 68q0 28-8.5 53T353 308zm-262-74q30 0 56-11t45.5-30.5 31-46T352 208t-11.5-56-31-45.5-45.5-31T208 64t-56.5 11.5-46 31T75 152t-11 56 11 56.5 30.5 46 46 30.5 56.5 11z";
     const ltr$9 = true;
+    const accData$1 = information.ICON_SEARCH;
     const collection$9 = "SAP-icons-v4";
     const packageName$9 = "@ui5/webcomponents-icons";
 
-    Icons.f(name$9, { pathData: pathData$9, ltr: ltr$9, collection: collection$9, packageName: packageName$9 });
+    Icons.f(name$9, { pathData: pathData$9, ltr: ltr$9, accData: accData$1, collection: collection$9, packageName: packageName$9 });
 
-    const name$8 = "da";
-    const pathData$8 = "M256.499 511.002q-12.975 0-20.959-10.979L5.988 180.647q-11.976-14.97 0-29.941L114.776 9.98Q122.76 0 134.736 0h255.502q14.97 0 20.959 10.979l95.813 140.725q9.98 14.97 0 28.943L277.458 500.023q-7.984 10.979-20.959 10.979zM57.887 166.674l198.612 275.462 198.612-276.46-77.848-114.775H147.712zm318.378 19.961q-25.95 7.985-39.423 21.459t-22.456 39.423q-1.996 7.984-9.98 7.984t-10.98-7.984q-8.982-25.95-22.455-39.423t-39.423-21.459q-7.985-2.994-7.985-10.978t7.985-10.979q25.95-7.984 39.423-21.957t22.456-39.922q2.994-7.984 10.978-7.984t9.981 7.984q8.982 25.95 22.456 39.922t39.423 21.957q7.985 2.995 7.985 10.979t-7.985 10.978z";
+    const name$8 = "search";
+    const pathData$8 = "M473 436q7 7 7 18t-7.5 18.5T454 480q-10 0-18-8l-95-95q-51 39-117 39-40 0-75-15t-61-41-41-61-15-75 15-75 41-61 61-41 75-15 75 15 61 41 41 61 15 75q0 64-39 117zM83 224q0 30 11 55.5t30 44.5 44.5 30 55.5 11 55.5-11 44.5-30 30-44.5 11-55.5-11-55.5-30-44.5-44.5-30T224 83t-55.5 11-44.5 30-30 44.5T83 224z";
     const ltr$8 = true;
+    const accData = information.ICON_SEARCH;
     const collection$8 = "SAP-icons-v5";
     const packageName$8 = "@ui5/webcomponents-icons";
 
-    Icons.f(name$8, { pathData: pathData$8, ltr: ltr$8, collection: collection$8, packageName: packageName$8 });
+    Icons.f(name$8, { pathData: pathData$8, ltr: ltr$8, accData, collection: collection$8, packageName: packageName$8 });
 
-    var da = "da";
+    var search = "search";
 
-    const name$7 = "bell";
-    const pathData$7 = "M32 416q0-7 15-21t31-40.5 25.5-67.5-1.5-101q-5-29 3-54.5t25-45 42-33T225 35q0-15 7-25t24-10q14 0 22.5 9t8.5 26q26 5 50 18t41 33 24.5 45.5T404 186q-12 60-1.5 101t27.5 67.5 33.5 40.5 16.5 21q0 14-9 23t-23 9H320q0 26-19 45t-45 19-45-19-19-45H64q-14 0-23-9t-9-23zm39 0h369q-10-11-25.5-30.5t-28-48.5-18-68 4.5-89q5-25-2.5-44T354 106q-19-23-42-32.5T256 64q-32 0-57.5 9.5T154 106q-10 11-18 30t-3 44q9 50 4 89t-16 68-25.5 48.5T71 416z";
-    const ltr$7 = false;
+    const name$7 = "da";
+    const pathData$7 = "M36 163l220 305 221-306-89-130H137zm220 349q-8 0-13-7L3 172q-3-5-3-10t3-9L117 6q5-6 12-6h267q9 0 13 7l100 146q3 4 3 9t-3 10L269 505q-5 7-13 7zm120-326q-26 9-39.5 22.5T315 248q-3 8-11 8t-11-8q-8-26-21.5-39.5T232 186q-8-2-8-10t8-11q26-9 39.5-22.5T293 103q3-7 11-7t11 7q8 26 21.5 39.5T376 165q8 3 8 11 0 3-1.5 6t-6.5 4z";
+    const ltr$7 = true;
     const collection$7 = "SAP-icons-v4";
     const packageName$7 = "@ui5/webcomponents-icons";
 
     Icons.f(name$7, { pathData: pathData$7, ltr: ltr$7, collection: collection$7, packageName: packageName$7 });
 
-    const name$6 = "bell";
-    const pathData$6 = "M475 374q5 7 5 16 0 11-7 18.5t-18 7.5H334q-5 27-27 45.5T256 480t-51-18.5-27-45.5H58q-11 0-18.5-7.5T32 390q0-10 6-16 1-1 8-9.5T61 341t14.5-35.5T82 260v-20q0-100 45-154t129-54 129.5 54T431 240v20q0 25 6.5 45.5T452 341t15 23.5 8 9.5zm-69-9q-11-20-19-46.5t-8-58.5v-20q0-32-5.5-60t-20-50-38-34.5T256 83t-59.5 12.5-38 34.5-20 50-5.5 60v20q0 32-8 58.5T106 365h300z";
-    const ltr$6 = false;
+    const name$6 = "da";
+    const pathData$6 = "M256.499 511.002q-12.975 0-20.959-10.979L5.988 180.647q-11.976-14.97 0-29.941L114.776 9.98Q122.76 0 134.736 0h255.502q14.97 0 20.959 10.979l95.813 140.725q9.98 14.97 0 28.943L277.458 500.023q-7.984 10.979-20.959 10.979zM57.887 166.674l198.612 275.462 198.612-276.46-77.848-114.775H147.712zm318.378 19.961q-25.95 7.985-39.423 21.459t-22.456 39.423q-1.996 7.984-9.98 7.984t-10.98-7.984q-8.982-25.95-22.455-39.423t-39.423-21.459q-7.985-2.994-7.985-10.978t7.985-10.979q25.95-7.984 39.423-21.957t22.456-39.922q2.994-7.984 10.978-7.984t9.981 7.984q8.982 25.95 22.456 39.922t39.423 21.957q7.985 2.995 7.985 10.979t-7.985 10.978z";
+    const ltr$6 = true;
     const collection$6 = "SAP-icons-v5";
     const packageName$6 = "@ui5/webcomponents-icons";
 
     Icons.f(name$6, { pathData: pathData$6, ltr: ltr$6, collection: collection$6, packageName: packageName$6 });
 
-    var bell = "bell";
+    var da = "da";
 
-    const name$5 = "overflow";
-    const pathData$5 = "M448 192q26 0 45 19t19 45-19 45-45 19-45-19-19-45 19-45 45-19zm0 96q14 0 23-9t9-23-9-23-23-9-23 9-9 23 9 23 23 9zm-192-96q26 0 45 19t19 45-19 45-45 19-45-19-19-45 19-45 45-19zm0 96q14 0 23-9t9-23-9-23-23-9-23 9-9 23 9 23 23 9zM64 192q26 0 45 19t19 45-19 45-45 19-45-19-19-45 19-45 45-19zm0 96q14 0 23-9t9-23-9-23-23-9-23 9-9 23 9 23 23 9z";
+    const name$5 = "bell";
+    const pathData$5 = "M32 416q0-7 15-21t31-40.5 25.5-67.5-1.5-101q-5-29 3-54.5t25-45 42-33T225 35q0-15 7-25t24-10q14 0 22.5 9t8.5 26q26 5 50 18t41 33 24.5 45.5T404 186q-12 60-1.5 101t27.5 67.5 33.5 40.5 16.5 21q0 14-9 23t-23 9H320q0 26-19 45t-45 19-45-19-19-45H64q-14 0-23-9t-9-23zm39 0h369q-10-11-25.5-30.5t-28-48.5-18-68 4.5-89q5-25-2.5-44T354 106q-19-23-42-32.5T256 64q-32 0-57.5 9.5T154 106q-10 11-18 30t-3 44q9 50 4 89t-16 68-25.5 48.5T71 416z";
     const ltr$5 = false;
-    const accData$1 = parametersBundle_css.ICON_OVERFLOW;
     const collection$5 = "SAP-icons-v4";
     const packageName$5 = "@ui5/webcomponents-icons";
 
-    Icons.f(name$5, { pathData: pathData$5, ltr: ltr$5, accData: accData$1, collection: collection$5, packageName: packageName$5 });
+    Icons.f(name$5, { pathData: pathData$5, ltr: ltr$5, collection: collection$5, packageName: packageName$5 });
 
-    const name$4 = "overflow";
-    const pathData$4 = "M64 192q26 0 45 19t19 45-19 45-45 19-45-19-19-45 19-45 45-19zm192 0q26 0 45 19t19 45-19 45-45 19-45-19-19-45 19-45 45-19zm192 0q26 0 45 19t19 45-19 45-45 19-45-19-19-45 19-45 45-19z";
+    const name$4 = "bell";
+    const pathData$4 = "M475 374q5 7 5 16 0 11-7 18.5t-18 7.5H334q-5 27-27 45.5T256 480t-51-18.5-27-45.5H58q-11 0-18.5-7.5T32 390q0-10 6-16 1-1 8-9.5T61 341t14.5-35.5T82 260v-20q0-100 45-154t129-54 129.5 54T431 240v20q0 25 6.5 45.5T452 341t15 23.5 8 9.5zm-69-9q-11-20-19-46.5t-8-58.5v-20q0-32-5.5-60t-20-50-38-34.5T256 83t-59.5 12.5-38 34.5-20 50-5.5 60v20q0 32-8 58.5T106 365h300z";
     const ltr$4 = false;
-    const accData = parametersBundle_css.ICON_OVERFLOW;
     const collection$4 = "SAP-icons-v5";
     const packageName$4 = "@ui5/webcomponents-icons";
 
-    Icons.f(name$4, { pathData: pathData$4, ltr: ltr$4, accData, collection: collection$4, packageName: packageName$4 });
+    Icons.f(name$4, { pathData: pathData$4, ltr: ltr$4, collection: collection$4, packageName: packageName$4 });
 
-    var overflow = "overflow";
+    var bell = "bell";
 
     const name$3 = "grid";
     const pathData$3 = "M394 362h55q14 0 22.5 9t8.5 23v54q0 14-8.5 23t-22.5 9h-55q-14 0-22.5-9t-8.5-23v-54q0-14 8.5-23t22.5-9zM228 197h55q14 0 22.5 9t8.5 23v54q0 13-9 22.5t-22 9.5h-55q-13 0-22-9.5t-9-22.5v-54q0-14 8.5-23t22.5-9zm135-79V64q0-14 8.5-23t22.5-9h55q14 0 22.5 9t8.5 23v54q0 13-9 22.5t-22 9.5h-55q-13 0-22-9.5t-9-22.5zm31 79h55q14 0 22.5 9t8.5 23v54q0 13-9 22.5t-22 9.5h-55q-13 0-22-9.5t-9-22.5v-54q0-14 8.5-23t22.5-9zM63 32h55q14 0 22.5 9t8.5 23v54q0 13-9 22.5t-22 9.5H63q-13 0-22-9.5T32 118V64q0-14 8.5-23T63 32zM32 229q0-14 8.5-23t22.5-9h55q14 0 22.5 9t8.5 23v54q0 13-9 22.5t-22 9.5H63q-13 0-22-9.5T32 283v-54zm31 133h55q14 0 22.5 9t8.5 23v54q0 13-9 22.5t-22 9.5H63q-13 0-22-9.5T32 448v-54q0-14 8.5-23t22.5-9zM228 32h55q14 0 22.5 9t8.5 23v54q0 13-9 22.5t-22 9.5h-55q-13 0-22-9.5t-9-22.5V64q0-14 8.5-23t22.5-9zm-31 362q0-14 8.5-23t22.5-9h55q14 0 22.5 9t8.5 23v54q0 13-9 22.5t-22 9.5h-55q-13 0-22-9.5t-9-22.5v-54z";
@@ -649,7 +325,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
     function n(e,o){let t=null,l=null;return function(...u){if(l){t=u;return}e(...u),l=setTimeout(()=>{t&&(e(...t),t=null),l=null;},o);}}
 
     function PopoversTemplate() {
-        return (parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [parametersBundle_css.jsx(parametersBundle_css.Popover, { class: "ui5-shellbar-menu-popover", hideArrow: true, placement: "Bottom", preventInitialFocus: true, onBeforeOpen: this._menuPopoverBeforeOpen, onClose: this._menuPopoverAfterClose, children: parametersBundle_css.jsx(parametersBundle_css.List, { separators: "None", selectionMode: "Single", onItemClick: this._menuItemPress, children: parametersBundle_css.jsx("slot", { name: "menuItems" }) }) }), parametersBundle_css.jsx(parametersBundle_css.Popover, { class: "ui5-shellbar-overflow-popover", placement: "Bottom", preventInitialFocus: true, horizontalAlign: this.popoverHorizontalAlign, hideArrow: true, onBeforeOpen: this._overflowPopoverBeforeOpen, onClose: this._overflowPopoverAfterClose, children: parametersBundle_css.jsx(parametersBundle_css.List, { separators: "None", onItemClick: this._handleActionListClick, children: this._hiddenIcons.map((icon, index) => (parametersBundle_css.jsx(ListItemStandard$1, { "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, accessibilityAttributes: this.accInfo.search.accessibilityAttributes, children: icon.text }, index))) }) })] }));
+        return (i18nDefaults.jsxs(i18nDefaults.Fragment, { children: [i18nDefaults.jsx(ListItemTemplate.Popover, { class: "ui5-shellbar-menu-popover", hideArrow: true, placement: "Bottom", preventInitialFocus: true, onBeforeOpen: this._menuPopoverBeforeOpen, onClose: this._menuPopoverAfterClose, children: i18nDefaults.jsx(List.List, { separators: "None", selectionMode: "Single", onItemClick: this._menuItemPress, children: i18nDefaults.jsx("slot", { name: "menuItems" }) }) }), i18nDefaults.jsx(ListItemTemplate.Popover, { class: "ui5-shellbar-overflow-popover", placement: "Bottom", preventInitialFocus: true, horizontalAlign: this.popoverHorizontalAlign, hideArrow: true, onBeforeOpen: this._overflowPopoverBeforeOpen, onClose: this._overflowPopoverAfterClose, children: i18nDefaults.jsx(List.List, { separators: "None", onItemClick: this._handleActionListClick, children: this._hiddenIcons.map((icon, index) => (i18nDefaults.jsx(ListItemStandard$1, { "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, accessibilityAttributes: this.accInfo.search.accessibilityAttributes, children: icon.text }, index))) }) })] }));
     }
 
     const name$1 = "slim-arrow-down";
@@ -671,66 +347,66 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
     var slimArrowDown = "slim-arrow-down";
 
     function ShellBarTemplate() {
-        return (parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [parametersBundle_css.jsxs("header", { class: this.classes.wrapper, "aria-label": this._shellbarText, onKeyDown: this._onKeyDown, part: "root", children: [parametersBundle_css.jsxs("div", { class: "ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left", children: [this.startButton.length > 0 && parametersBundle_css.jsx("slot", { name: "startButton" }), this.hasMenuItems && (parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [!this.showLogoInMenuButton && this.hasLogo && singleLogo.call(this), this.showTitleInMenuButton && parametersBundle_css.jsx("h1", { class: "ui5-hidden-text", children: this.primaryTitle }), this.showMenuButton && (parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [parametersBundle_css.jsxs("button", { class: {
+        return (i18nDefaults.jsxs(i18nDefaults.Fragment, { children: [i18nDefaults.jsxs("header", { class: this.classes.wrapper, "aria-label": this._shellbarText, onKeyDown: this._onKeyDown, part: "root", children: [i18nDefaults.jsxs("div", { class: "ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left", children: [this.startButton.length > 0 && i18nDefaults.jsx("slot", { name: "startButton" }), this.hasMenuItems && (i18nDefaults.jsxs(i18nDefaults.Fragment, { children: [!this.showLogoInMenuButton && this.hasLogo && singleLogo.call(this), this.showTitleInMenuButton && i18nDefaults.jsx("h1", { class: "ui5-hidden-text", children: this.primaryTitle }), this.showMenuButton && (i18nDefaults.jsxs(i18nDefaults.Fragment, { children: [i18nDefaults.jsxs("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, children: [this.showLogoInMenuButton && (parametersBundle_css.jsx("span", { class: "ui5-shellbar-logo", "aria-label": this._logoText, title: this._logoText, children: parametersBundle_css.jsx("slot", { name: "logo" }) })), this.showTitleInMenuButton && (parametersBundle_css.jsx("div", { class: "ui5-shellbar-menu-button-title", children: this.primaryTitle })), parametersBundle_css.jsx(parametersBundle_css.Icon, { class: "ui5-shellbar-menu-button-arrow", name: slimArrowDown })] }), this.secondaryTitle && !this.isSBreakPoint && (parametersBundle_css.jsx("div", { style: { display: "block" }, class: "ui5-shellbar-secondary-title", "data-ui5-stable": "secondary-title", children: this.secondaryTitle }))] }))] })), !this.hasMenuItems && (parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [this.isSBreakPoint && this.hasLogo && singleLogo.call(this), !this.isSBreakPoint && (parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [combinedLogo.call(this), this.secondaryTitle && this.primaryTitle && (parametersBundle_css.jsx("h2", { class: "ui5-shellbar-secondary-title", "data-ui5-stable": "secondary-title", children: this.secondaryTitle }))] }))] }))] }), this.hasMidContent && (parametersBundle_css.jsx("div", { class: "ui5-shellbar-overflow-container ui5-shellbar-mid-content", children: parametersBundle_css.jsx("slot", { name: "midContent" }) })), parametersBundle_css.jsx("div", { class: "ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right", children: parametersBundle_css.jsxs("div", { class: "ui5-shellbar-overflow-container-right-inner", children: [this.hasContentItems && (parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [this.showStartSeparator && (parametersBundle_css.jsx("div", { class: {
+                                                    }, onClick: this._headerPress, "aria-haspopup": "menu", "aria-expanded": this._menuPopoverExpanded, "aria-label": this._brandingText, "data-ui5-stable": "menu", tabIndex: 0, children: [this.showLogoInMenuButton && (i18nDefaults.jsx("span", { class: "ui5-shellbar-logo", "aria-label": this._logoText, title: this._logoText, children: i18nDefaults.jsx("slot", { name: "logo" }) })), this.showTitleInMenuButton && (i18nDefaults.jsx("div", { class: "ui5-shellbar-menu-button-title", children: this.primaryTitle })), i18nDefaults.jsx(Icon.Icon, { class: "ui5-shellbar-menu-button-arrow", name: slimArrowDown })] }), this.secondaryTitle && !this.isSBreakPoint && (i18nDefaults.jsx("div", { style: { display: "block" }, class: "ui5-shellbar-secondary-title", "data-ui5-stable": "secondary-title", children: this.secondaryTitle }))] }))] })), !this.hasMenuItems && (i18nDefaults.jsxs(i18nDefaults.Fragment, { children: [this.isSBreakPoint && this.hasLogo && singleLogo.call(this), !this.isSBreakPoint && (i18nDefaults.jsxs(i18nDefaults.Fragment, { children: [combinedLogo.call(this), this.secondaryTitle && this.primaryTitle && (i18nDefaults.jsx("h2", { class: "ui5-shellbar-secondary-title", "data-ui5-stable": "secondary-title", children: this.secondaryTitle }))] }))] }))] }), this.hasMidContent && (i18nDefaults.jsx("div", { class: "ui5-shellbar-overflow-container ui5-shellbar-mid-content", children: i18nDefaults.jsx("slot", { name: "midContent" }) })), i18nDefaults.jsx("div", { class: "ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right", children: i18nDefaults.jsxs("div", { class: "ui5-shellbar-overflow-container-right-inner", children: [this.hasContentItems && (i18nDefaults.jsxs("div", { class: "ui5-shellbar-content-items", role: this._contentItemsRole, "aria-label": this._contentItemsText, children: [this.showStartSeparator && (i18nDefaults.jsx("div", { class: {
                                                     "ui5-shellbar-separator": true,
                                                     "ui5-shellbar-separator-start": true,
                                                 } })), this.startContent.map(item => {
                                                 const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
-                                                return (parametersBundle_css.jsxs("div", { id: item._individualSlot, class: itemInfo?.classes, children: [this.shouldIncludeSeparator(itemInfo, this.startContentInfoSorted) && (
+                                                return (i18nDefaults.jsxs("div", { id: item._individualSlot, class: itemInfo?.classes, children: [this.shouldIncludeSeparator(itemInfo, this.startContentInfoSorted) && (
                                                         // never displayed, only "packed" with last item that was hidden, used for measurement purposes
-                                                        parametersBundle_css.jsx("div", { class: {
+                                                        i18nDefaults.jsx("div", { class: {
                                                                 "ui5-shellbar-separator": true,
                                                                 "ui5-shellbar-separator-start": true,
-                                                            } })), parametersBundle_css.jsx("slot", { name: item._individualSlot })] }, item._individualSlot));
-                                            }), parametersBundle_css.jsx("div", { class: "ui5-shellbar-spacer" }), this.endContent.map(item => {
+                                                            } })), i18nDefaults.jsx("slot", { name: item._individualSlot })] }, item._individualSlot));
+                                            }), i18nDefaults.jsx("div", { class: "ui5-shellbar-spacer" }), this.endContent.map(item => {
                                                 const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
-                                                return (parametersBundle_css.jsxs("div", { id: item._individualSlot, class: itemInfo?.classes, children: [parametersBundle_css.jsx("slot", { name: item._individualSlot }), this.shouldIncludeSeparator(itemInfo, this.endContentInfoSorted) && (
+                                                return (i18nDefaults.jsxs("div", { id: item._individualSlot, class: itemInfo?.classes, children: [i18nDefaults.jsx("slot", { name: item._individualSlot }), this.shouldIncludeSeparator(itemInfo, this.endContentInfoSorted) && (
                                                         // never displayed, only "packed" with last item that was hidden, used for measurement purposes
-                                                        parametersBundle_css.jsx("div", { class: {
+                                                        i18nDefaults.jsx("div", { class: {
                                                                 "ui5-shellbar-separator": true,
                                                                 "ui5-shellbar-separator-end": true,
                                                             } }))] }, item._individualSlot));
-                                            }), this.showEndSeparator && (parametersBundle_css.jsx("div", { class: {
+                                            }), this.showEndSeparator && (i18nDefaults.jsx("div", { class: {
                                                     "ui5-shellbar-separator": true,
                                                     "ui5-shellbar-separator-end": true,
-                                                } }))] })), !this.hasContentItems && parametersBundle_css.jsx("div", { class: "ui5-shellbar-spacer" }), parametersBundle_css.jsxs("div", { class: "ui5-shellbar-overflow-container-right-child", role: this._rightChildRole, children: [this.hasSearchField && (parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [this.showFullWidthSearch && (parametersBundle_css.jsxs("div", { class: "ui5-shellbar-search-full-width-wrapper", style: this.styles.searchField, children: [parametersBundle_css.jsx("div", { class: "ui5-shellbar-search-full-field", children: parametersBundle_css.jsx("slot", { name: "searchField" }) }), parametersBundle_css.jsx(parametersBundle_css.Button, { onClick: this._handleCancelButtonPress, class: "ui5-shellbar-button ui5-shellbar-cancel-button", "data-ui5-stable": "cancel-search", children: this._cancelBtnText })] })), parametersBundle_css.jsx("div", { class: "ui5-shellbar-search-field", style: this.styles.searchField, children: parametersBundle_css.jsx("slot", { name: "searchField" }) }), parametersBundle_css.jsx(parametersBundle_css.Button, { id: `${this._id}-item-1`, class: {
+                                                } }))] })), !this.hasContentItems && i18nDefaults.jsx("div", { class: "ui5-shellbar-spacer" }), i18nDefaults.jsxs("div", { class: "ui5-shellbar-overflow-container-right-child", role: this._rightChildRole, children: [this.hasSearchField && (i18nDefaults.jsxs(i18nDefaults.Fragment, { children: [this.showFullWidthSearch && (i18nDefaults.jsxs("div", { class: "ui5-shellbar-search-full-width-wrapper", style: this.styles.searchField, children: [i18nDefaults.jsx("div", { class: "ui5-shellbar-search-full-field", children: i18nDefaults.jsx("slot", { name: "searchField" }) }), i18nDefaults.jsx(Button.Button, { onClick: this._handleCancelButtonPress, class: "ui5-shellbar-button ui5-shellbar-cancel-button", "data-ui5-stable": "cancel-search", children: this._cancelBtnText })] })), i18nDefaults.jsx("div", { id: this.hasSelfCollapsibleSearch ? `${this._id}-item-1` : undefined, class: this.classes.searchField, style: this.styles.searchField, children: i18nDefaults.jsx("slot", { name: "searchField" }) }), !(this.hasSelfCollapsibleSearch || this.hideSearchButton) && (i18nDefaults.jsx(Button.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.showSearchField, accessibilityAttributes: this.accInfo.search.accessibilityAttributes })] })), this.hasAssistant && (parametersBundle_css.jsx("div", { id: `${this._id}-assistant`, class: this.classes.assistant, children: parametersBundle_css.jsx("slot", { name: "assistant" }) })), this.showNotifications && (parametersBundle_css.jsx(parametersBundle_css.Button, { id: `${this._id}-item-2`, class: {
+                                                        }, 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.showSearchField, accessibilityAttributes: this.accInfo.search.accessibilityAttributes }))] })), this.hasAssistant && (i18nDefaults.jsx("div", { id: `${this._id}-assistant`, class: this.classes.assistant, children: i18nDefaults.jsx("slot", { name: "assistant" }) })), this.showNotifications && (i18nDefaults.jsx(Button.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 => (parametersBundle_css.jsx(parametersBundle_css.Button, { 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, accessibilityAttributes: item.accessibilityAttributes, accessibleName: item.accessibleName }, item.id)))] })] }) }), parametersBundle_css.jsx(parametersBundle_css.Button, { id: `${this._id}-item-5`, class: {
+                                                }, 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 => (i18nDefaults.jsx(Button.Button, { 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, accessibilityAttributes: item.accessibilityAttributes, accessibleName: item.accessibleName }, item.id)))] })] }) }), i18nDefaults.jsx(Button.Button, { id: `${this._id}-item-5`, class: {
                                 "ui5-shellbar-button": true,
                                 "ui5-shellbar-overflow-button": true,
                                 "ui5-shellbar-items-for-arrow-nav": 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 && (parametersBundle_css.jsx(parametersBundle_css.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" }))] }), PopoversTemplate.call(this)] }));
+                            }, 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 && (i18nDefaults.jsx(Button.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" }))] }), PopoversTemplate.call(this)] }));
     }
     function profileButton() {
-        return (parametersBundle_css.jsx(parametersBundle_css.Button, { "data-profile-btn": true, 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", children: parametersBundle_css.jsx("slot", { name: "profile" }) }));
+        return (i18nDefaults.jsx(Button.Button, { "data-profile-btn": true, 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", children: i18nDefaults.jsx("slot", { name: "profile" }) }));
     }
     function singleLogo() {
-        return (parametersBundle_css.jsx("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", children: parametersBundle_css.jsx("slot", { name: "logo" }) }));
+        return (i18nDefaults.jsx("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", children: i18nDefaults.jsx("slot", { name: "logo" }) }));
     }
     function combinedLogo() {
-        return (parametersBundle_css.jsxs("div", { role: this.accLogoRole, class: "ui5-shellbar-logo-area", onClick: this._logoPress, tabIndex: 0, onKeyDown: this._logoKeydown, onKeyUp: this._logoKeyup, "aria-label": this._logoAreaText, children: [this.hasLogo && (parametersBundle_css.jsx("span", { class: "ui5-shellbar-logo", title: this._logoText, onClick: this._logoPress, onKeyDown: this._logoKeydown, onKeyUp: this._logoKeyup, "data-ui5-stable": "logo", children: parametersBundle_css.jsx("slot", { name: "logo" }) })), parametersBundle_css.jsx("div", { class: "ui5-shellbar-headings", children: this.primaryTitle && (parametersBundle_css.jsx("h1", { class: "ui5-shellbar-title", children: parametersBundle_css.jsx("bdi", { children: this.primaryTitle }) })) })] }));
+        return (i18nDefaults.jsxs("div", { role: this.accLogoRole, class: "ui5-shellbar-logo-area", onClick: this._logoPress, tabIndex: 0, onKeyDown: this._logoKeydown, onKeyUp: this._logoKeyup, "aria-label": this.accessibilityAttributes.branding?.name || this._logoAreaText, children: [this.hasLogo && (i18nDefaults.jsx("span", { class: "ui5-shellbar-logo", title: this._logoText, onClick: this._logoPress, onKeyDown: this._logoKeydown, onKeyUp: this._logoKeyup, "data-ui5-stable": "logo", children: i18nDefaults.jsx("slot", { name: "logo" }) })), i18nDefaults.jsx("div", { class: "ui5-shellbar-headings", children: this.primaryTitle && (i18nDefaults.jsx("h1", { class: "ui5-shellbar-title", children: i18nDefaults.jsx("bdi", { children: this.primaryTitle }) })) })] }));
     }
 
-    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
+    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => i18nDefaults.defaultThemeBase);
     Icons.p("@ui5/webcomponents-fiori", "sap_horizon", async () => parametersBundle_css.defaultTheme);
-    var shellBarStyles = `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host(:not([hidden])){display:inline-block;width:100%;max-width:100%;background:var(--sapShellColor);box-sizing:border-box}:host{--_ui5-v2-9-0_input_placeholder_color: var(--sapShell_InteractiveTextColor);--_ui5-v2-9-0_input_border_radius: var(--_ui5-v2-9-0_shellbar_input_border_radius);--_ui5-v2-9-0_input_focus_border_radius: var(--_ui5-v2-9-0_shellbar_input_focus_border_radius);--_ui5-v2-9-0_input_background_color: var(--_ui5-v2-9-0_shellbar_input_background_color);--_ui5-v2-9-0_input_focus_outline_color: var(--_ui5-v2-9-0_shellbar_input_focus_outline_color);--_ui5-v2-9-0_input_margin_top_bottom: 0;box-shadow:inset 0 -.0625rem 0 0 var(--sapPageHeader_BorderColor)}.ui5-shellbar-root{position:relative;display:flex;justify-content:space-between;align-items:center;height:var(--_ui5-v2-9-0_shellbar_root_height);font-family:"72override",var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;box-sizing:border-box}.ui5-shellbar-menu-button,.ui5-shellbar-button,.ui5-shellbar-image-button,::slotted([ui5-toggle-button]:not([slot^="content"])),::slotted([ui5-button]:not([slot^="content"])){height:2.25rem;padding:0;margin-inline-start:var(--_ui5-v2-9-0-shellbar-overflow-button-margin);border:.0625rem solid var(--sapButton_Lite_BorderColor);background:var(--sapButton_Lite_Background);outline-color:var(--_ui5-v2-9-0_shellbar_logo_outline_color);color:var(--sapShell_TextColor);box-sizing:border-box;cursor:pointer;border-radius:var(--_ui5-v2-9-0_shellbar_button_border_radius);position:relative;font-weight:700;white-space:initial;overflow:initial;text-overflow:initial;line-height:inherit;letter-spacing:inherit;word-spacing:inherit}::slotted([ui5-toggle-button][slot="assistant"]){margin-inline-start:0}.ui5-shellbar-assistant-button{margin-inline-start:var(--_ui5-v2-9-0-shellbar-overflow-button-margin)}::slotted([ui5-button][slot="startButton"]){margin-inline-start:0}::slotted([ui5-toggle-button]:hover),::slotted([ui5-button]:hover),.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,.ui5-shellbar-button:hover,.ui5-shellbar-image-button:hover,::slotted([ui5-button][slot="midContent"]:hover){background:var(--sapShell_Hover_Background);border-color:var(--sapButton_Lite_Hover_BorderColor);color:var(--sapShell_TextColor)}::slotted([ui5-toggle-button][slot="assistant"][pressed]),::slotted([ui5-toggle-button][slot="assistant"][pressed]:hover:not([active])){color:var(--sapShell_Assistant_ForegroundColor)}::slotted([ui5-toggle-button][active]),::slotted([ui5-button][active]),.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,.ui5-shellbar-button[active],.ui5-shellbar-image-button:active{background:var(--sapShell_Active_Background);border-color:var(--sapButton_Lite_Active_BorderColor);color:var(--_ui5-v2-9-0_shellbar_button_active_color)}:host([desktop]) .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus,.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus-visible{outline:var(--_ui5-v2-9-0_shellbar_logo_outline);outline-offset:var(--_ui5-v2-9-0_shellbar_outline_offset)}slot[name=profile]{min-width:0}::slotted([ui5-avatar][slot="profile"]){display:block;width:2rem;height:2rem;min-width:0;min-height:2rem;pointer-events:none}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner{border:none}.ui5-shellbar-menu-button-arrow,.ui5-shellbar-menu-button-title,.ui5-shellbar-title{display:inline-block;font-family:var(--sapFontSemiboldFamily);margin:0;font-size:var(--_ui5-v2-9-0_shellbar_menu_button_title_font_size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sapShell_SubBrand_TextColor)}:host(:not([primary-title])) .ui5-shellbar-menu-button{min-width:2.25rem;justify-content:center}.ui5-shellbar-secondary-title{display:inline-block;font-size:var(--sapFontSmallSize);color:var(--sapShell_TextColor);font-weight:400;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;text-align:start}.ui5-shellbar-headings{display:flex;flex-direction:column;justify-content:center;height:100%;overflow:hidden;margin-left:.25rem}.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow{margin-inline-start:.375rem}.ui5-shellbar-overflow-container{display:flex;justify-content:center;align-items:center;height:100%;overflow:hidden}.ui5-shellbar-overflow-container-middle{align-self:flex-start;height:var(--_ui5-v2-9-0_shellbar_overflow_container_middle_height);width:0;flex-shrink:0}.ui5-shellbar-mid-content{height:var(--_ui5-v2-9-0_shellbar_overflow_container_middle_height)}:host([breakpoint-size="S"]) .ui5-shellbar-menu-button{margin-inline-start:0}:host([breakpoint-size="S"]){padding:0 1rem}:host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper{padding:0 1rem}:host([breakpoint-size="M"]){padding:0 2rem}:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper{padding:0 2rem}:host([breakpoint-size="L"]){padding:0 2rem}:host([breakpoint-size="XL"]){padding:0 3rem}:host([breakpoint-size="XXL"]){padding:0 3rem}.ui5-shellbar-logo{overflow:hidden;cursor:pointer;max-height:2rem;max-width:3.75rem}.ui5-shellbar-logo-area{overflow:hidden;display:flex;align-items:center;padding:.25rem .5rem .25rem .25rem;box-sizing:border-box;cursor:pointer;background:var(--sapButton_Lite_Background);border:1px solid var(--sapButton_Lite_BorderColor);color:var(--sapShell_TextColor);margin-inline-start:.125rem}.ui5-shellbar-logo:focus,.ui5-shellbar-logo-area:focus{outline:var(--_ui5-v2-9-0_shellbar_logo_outline);border-radius:var(--_ui5-v2-9-0_shellbar_logo_border_radius)}.ui5-shellbar-overflow-container>.ui5-shellbar-logo:hover,.ui5-shellbar-logo-area:hover{box-shadow:var(--_ui5-v2-9-0_shellbar_button_box_shadow);border-radius:var(--_ui5-v2-9-0_shellbar_logo_border_radius)}.ui5-shellbar-logo-area:active:focus{background:var(--sapShell_Active_Background);border:1px solid var(--sapButton_Lite_Active_BorderColor);color:var(--sapShell_Active_TextColor)}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover{box-shadow:var(--_ui5-v2-9-0_shellbar_button_box_shadow)}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active{box-shadow:var(--_ui5-v2-9-0_shellbar_button_box_shadow_active)}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow,.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-title{color:var(--sapShell_Active_TextColor)}.ui5-shellbar-menu-button .ui5-shellbar-logo:hover{box-shadow:none}.ui5-shellbar-button{width:2.5rem;box-sizing:border-box}.ui5-shellbar-button,::slotted([ui5-button][slot="startButton"]){--_ui5-v2-9-0_button_focused_border: var(--_ui5-v2-9-0_shellbar_button_focused_border)}.ui5-shellbar-search-button{--_ui5-v2-9-0_button_focused_border_radius: var(--_ui5-v2-9-0_shellbar_search_button_border_radius);--_ui5-v2-9-0_shellbar_button_border_radius: var(--_ui5-v2-9-0_shellbar_search_button_border_radius);height:var(--_ui5-v2-9-0_shellbar_search_button_size);width:var(--_ui5-v2-9-0_shellbar_search_button_size);min-width:var(--_ui5-v2-9-0_shellbar_search_button_size)}.ui5-shellbar-image-button{display:flex;justify-content:center;align-items:center;min-width:auto;height:2.5rem;--_ui5-v2-9-0_button_focused_border_radius: var(--_ui5-v2-9-0_shellbar_image_button_border_radius);border-radius:var(--_ui5-v2-9-0_shellbar_image_button_border_radius)}.ui5-shellbar-overflow-container-left{padding:0;justify-content:flex-start;max-width:75%;flex-shrink:0}.ui5-shellbar-overflow-container-left>:nth-child(n){margin-inline-end:.5rem}.ui5-shellbar-menu-button{white-space:nowrap;overflow:hidden;display:flex;align-items:center;padding:.25rem .5rem;cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;background:var(--sapButton_Lite_Background);border:var(--_ui5-v2-9-0_shellbar_button_border);color:var(--sapShell_TextColor)}:host(:not([with-logo])) .ui5-shellbar-menu-button{margin-inline-start:0}.ui5-shellbar-overflow-container-right{flex-grow:1;justify-content:flex-end}.ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child{display:flex;justify-content:flex-end;height:inherit;align-items:center}.ui5-shellbar-overflow-container-right-inner{display:flex;justify-content:flex-end;align-items:center;flex-grow:1;min-width:max-content}.ui5-shellbar-spacer{flex-grow:1;height:1px;flex-basis:1rem;flex-shrink:1}.ui5-shellbar-separator{flex-grow:0;flex-shrink:0;height:1rem;width:1px;background-color:var(--sapToolbar_SeparatorColor)}.ui5-shellbar-separator-end{margin-inline-start:.5rem}.ui5-shellbar-overflow-container-right-child .ui5-shellbar-button[data-count]:has(+.ui5-shellbar-overflow-button):before{inset-inline-end:var(--_ui5-v2-9-0-shellbar-notification-btn-count-offset)}:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right{padding-inline-start:0}::slotted([hidden]){visibility:hidden;order:-1;position:absolute}.ui5-shellbar-content-item{display:flex;align-items:center;flex-shrink:0;padding-inline-start:var(--_ui5-v2-9-0-shellbar-content-margin-start)}:host(:not([notifications-count])) .ui5-shellbar-bell-button{position:relative}:host([notifications-count]:not([notifications-count=""])) .ui5-shellbar-bell-button:before,.ui5-shellbar-button[data-count]:before{position:absolute;width:auto;height:1rem;min-width:1rem;background:var(--sapContent_BadgeBackground);border:var(--_ui5-v2-9-0_shellbar_button_badge_border);color:var(--sapContent_BadgeTextColor);top:-.25rem;right:-.25rem;padding:0 .3125rem;border-radius:.5rem;display:flex;justify-content:center;align-items:center;font-size:var(--sapFontSmallSize);font-family:"72override",var(--sapFontFamily);z-index:2;box-sizing:border-box}:host([notifications-count]:not([notifications-count=""])) .ui5-shellbar-bell-button:before{content:attr(data-ui5-notifications-count);inset-inline-end:var(--_ui5-v2-9-0-shellbar-notification-btn-count-offset)}.ui5-shellbar-button[data-count]:before{content:attr(data-count)}.ui5-shellbar-button[data-count=" "]:before{height:.75rem;min-width:.75rem}.ui5-shellbar-menu-button{margin-inline-start:.5rem}.ui5-shellbar-search-field{padding-inline-start:var(--_ui5-v2-9-0-shellbar-content-margin-start);min-width:var(--_ui5-v2-9-0_shellbar_search_field_width);align-items:center;flex-grow:1;margin-inline-start:.5rem}.ui5-shellbar-overflow-container-right-child>:first-child,.ui5-shellbar-search-field:first-child+.ui5-shellbar-button:not(.ui5-shellbar-search-button){margin-inline-start:0}.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field{height:2.25rem;width:100%}.ui5-shellbar-search-full-width-wrapper{position:absolute;top:0;left:0;background:var(--sapShellColor);height:100%;width:100%;z-index:100;display:flex;align-items:center;box-sizing:border-box}.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-button{width:auto}::slotted([ui5-input]){background:var(--_ui5-v2-9-0_shellbar_search_field_background);border:var(--_ui5-v2-9-0_shellbar_search_field_border);box-shadow:var(--_ui5-v2-9-0_shellbar_search_field_box_shadow);color:var(--_ui5-v2-9-0_shellbar_search_field_color);height:2.25rem;width:100%;min-width:var(--_ui5-v2-9-0_shellbar_search_field_width)}:host([breakpoint-size="M"]) ::slotted([ui5-input]),:host([breakpoint-size="S"]) ::slotted([ui5-input]){min-width:1rem}:host([breakpoint-size="M"][show-search-field]) .ui5-shellbar-overflow-container-right-child{flex-grow:1}::slotted([ui5-input]:hover){background:var(--_ui5-v2-9-0_shellbar_search_field_background_hover);box-shadow:var(--_ui5-v2-9-0_shellbar_search_field_box_shadow_hover)}::slotted([ui5-input][focused]){outline:var(--_ui5-v2-9-0_shellbar_search_field_outline_focused)}::slotted([slot="logo"]){max-height:2rem;max-width:3.75rem;pointer-events:none}.ui5-shellbar-co-pilot-placeholder{width:2.75rem;height:2.75rem}.ui5-shellbar-coPilot-pressed,.ui5-shellbar-coPilot-pressed:hover{color:var(--sapShell_Assistant_ForegroundColor)}::slotted([ui5-button][slot="startButton"]){margin-inline:0 .5rem;justify-content:center;align-items:center}::slotted([ui5-button][data-profile-btn]){width:auto}::slotted(.ui5-shellbar-hidden-button),.ui5-shellbar-hidden-button,.ui5-shellbar-invisible-button{visibility:hidden;order:-1;opacity:0;min-width:0;width:0;margin:0;padding:0;padding-inline-start:0;border:0;margin-inline-start:0}
+    var shellBarStyles = `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host(:not([hidden])){display:inline-block;width:100%;max-width:100%;background:var(--sapShellColor);box-sizing:border-box}:host{--_ui5-v2-10-0-rc-2_input_placeholder_color: var(--sapShell_InteractiveTextColor);--_ui5-v2-10-0-rc-2_input_border_radius: var(--_ui5-v2-10-0-rc-2_shellbar_input_border_radius);--_ui5-v2-10-0-rc-2_input_focus_border_radius: var(--_ui5-v2-10-0-rc-2_shellbar_input_focus_border_radius);--_ui5-v2-10-0-rc-2_input_background_color: var(--_ui5-v2-10-0-rc-2_shellbar_input_background_color);--_ui5-v2-10-0-rc-2_input_focus_outline_color: var(--_ui5-v2-10-0-rc-2_shellbar_input_focus_outline_color);--_ui5-v2-10-0-rc-2_input_margin_top_bottom: 0;box-shadow:inset 0 -.0625rem 0 0 var(--sapPageHeader_BorderColor)}.ui5-shellbar-root{position:relative;display:flex;justify-content:space-between;align-items:center;height:var(--_ui5-v2-10-0-rc-2_shellbar_root_height);font-family:"72override",var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;box-sizing:border-box}.ui5-shellbar-menu-button,.ui5-shellbar-button,.ui5-shellbar-image-button,::slotted([ui5-toggle-button]:not([slot^="content"])),::slotted([ui5-button]:not([slot^="content"])){height:2.25rem;padding:0;margin-inline-start:var(--_ui5-v2-10-0-rc-2-shellbar-overflow-button-margin);border:.0625rem solid var(--sapButton_Lite_BorderColor);background:var(--sapButton_Lite_Background);outline-color:var(--_ui5-v2-10-0-rc-2_shellbar_logo_outline_color);color:var(--sapShell_TextColor);box-sizing:border-box;cursor:pointer;border-radius:var(--_ui5-v2-10-0-rc-2_shellbar_button_border_radius);position:relative;font-weight:700;white-space:initial;overflow:initial;text-overflow:initial;line-height:inherit;letter-spacing:inherit;word-spacing:inherit}::slotted([ui5-toggle-button][slot="assistant"]){margin-inline-start:0}.ui5-shellbar-assistant-button{margin-inline-start:var(--_ui5-v2-10-0-rc-2-shellbar-overflow-button-margin)}::slotted([ui5-button][slot="startButton"]){margin-inline-start:0}::slotted([ui5-toggle-button]:hover),::slotted([ui5-button]:hover),.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,.ui5-shellbar-button:hover,.ui5-shellbar-image-button:hover,::slotted([ui5-button][slot="midContent"]:hover){background:var(--sapShell_Hover_Background);border-color:var(--sapButton_Lite_Hover_BorderColor);color:var(--sapShell_TextColor)}::slotted([ui5-toggle-button][slot="assistant"][pressed]),::slotted([ui5-toggle-button][slot="assistant"][pressed]:hover:not([active])){color:var(--sapShell_Assistant_ForegroundColor)}::slotted([ui5-toggle-button][active]),::slotted([ui5-button][active]),.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,.ui5-shellbar-button[active],.ui5-shellbar-image-button:active{background:var(--sapShell_Active_Background);border-color:var(--sapButton_Lite_Active_BorderColor);color:var(--_ui5-v2-10-0-rc-2_shellbar_button_active_color)}:host([desktop]) .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus,.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus-visible{outline:var(--_ui5-v2-10-0-rc-2_shellbar_logo_outline);outline-offset:var(--_ui5-v2-10-0-rc-2_shellbar_outline_offset)}slot[name=profile]{min-width:0}::slotted([ui5-avatar][slot="profile"]){display:block;width:2rem;height:2rem;min-width:0;min-height:2rem;pointer-events:none}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner{border:none}.ui5-shellbar-menu-button-arrow,.ui5-shellbar-menu-button-title,.ui5-shellbar-title{display:inline-block;font-family:var(--sapFontSemiboldFamily);margin:0;font-size:var(--_ui5-v2-10-0-rc-2_shellbar_menu_button_title_font_size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sapShell_SubBrand_TextColor)}:host(:not([primary-title])) .ui5-shellbar-menu-button{min-width:2.25rem;justify-content:center}.ui5-shellbar-secondary-title{display:inline-block;font-size:var(--sapFontSmallSize);color:var(--sapShell_TextColor);font-weight:400;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;text-align:start}.ui5-shellbar-headings{display:flex;flex-direction:column;justify-content:center;height:100%;overflow:hidden;margin-left:.25rem}.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow{margin-inline-start:.375rem}.ui5-shellbar-overflow-container{display:flex;justify-content:center;align-items:center;height:100%;overflow:hidden}.ui5-shellbar-overflow-container-middle{align-self:flex-start;height:var(--_ui5-v2-10-0-rc-2_shellbar_overflow_container_middle_height);width:0;flex-shrink:0}.ui5-shellbar-mid-content{height:var(--_ui5-v2-10-0-rc-2_shellbar_overflow_container_middle_height)}:host([breakpoint-size="S"]) .ui5-shellbar-menu-button{margin-inline-start:0}:host([breakpoint-size="S"]){padding:0 1rem}:host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper{padding:0 1rem}:host([breakpoint-size="M"]){padding:0 2rem}:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper{padding:0 2rem}:host([breakpoint-size="L"]){padding:0 2rem}:host([breakpoint-size="XL"]){padding:0 3rem}:host([breakpoint-size="XXL"]){padding:0 3rem}.ui5-shellbar-logo{overflow:hidden;cursor:pointer;max-height:2rem;max-width:3.75rem}.ui5-shellbar-logo-area{overflow:hidden;display:flex;align-items:center;padding:.25rem .5rem .25rem .25rem;box-sizing:border-box;cursor:pointer;background:var(--sapButton_Lite_Background);border:1px solid var(--sapButton_Lite_BorderColor);color:var(--sapShell_TextColor);margin-inline-start:.125rem}.ui5-shellbar-logo:focus,.ui5-shellbar-logo-area:focus{outline:var(--_ui5-v2-10-0-rc-2_shellbar_logo_outline);border-radius:var(--_ui5-v2-10-0-rc-2_shellbar_logo_border_radius)}.ui5-shellbar-overflow-container>.ui5-shellbar-logo:hover,.ui5-shellbar-logo-area:hover{box-shadow:var(--_ui5-v2-10-0-rc-2_shellbar_button_box_shadow);border-radius:var(--_ui5-v2-10-0-rc-2_shellbar_logo_border_radius)}.ui5-shellbar-logo-area:active:focus{background:var(--sapShell_Active_Background);border:1px solid var(--sapButton_Lite_Active_BorderColor);color:var(--sapShell_Active_TextColor)}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover{box-shadow:var(--_ui5-v2-10-0-rc-2_shellbar_button_box_shadow)}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active{box-shadow:var(--_ui5-v2-10-0-rc-2_shellbar_button_box_shadow_active)}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow,.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-title{color:var(--sapShell_Active_TextColor)}.ui5-shellbar-menu-button .ui5-shellbar-logo:hover{box-shadow:none}.ui5-shellbar-button{width:2.5rem;box-sizing:border-box}.ui5-shellbar-button,::slotted([ui5-button][slot="startButton"]){--_ui5-v2-10-0-rc-2_button_focused_border: var(--_ui5-v2-10-0-rc-2_shellbar_button_focused_border)}.ui5-shellbar-search-button{--_ui5-v2-10-0-rc-2_button_focused_border_radius: var(--_ui5-v2-10-0-rc-2_shellbar_search_button_border_radius);--_ui5-v2-10-0-rc-2_shellbar_button_border_radius: var(--_ui5-v2-10-0-rc-2_shellbar_search_button_border_radius);height:var(--_ui5-v2-10-0-rc-2_shellbar_search_button_size);width:var(--_ui5-v2-10-0-rc-2_shellbar_search_button_size);min-width:var(--_ui5-v2-10-0-rc-2_shellbar_search_button_size)}.ui5-shellbar-image-button{display:flex;justify-content:center;align-items:center;min-width:auto;height:2.5rem;--_ui5-v2-10-0-rc-2_button_focused_border_radius: var(--_ui5-v2-10-0-rc-2_shellbar_image_button_border_radius);border-radius:var(--_ui5-v2-10-0-rc-2_shellbar_image_button_border_radius)}.ui5-shellbar-overflow-container-left{padding:0;justify-content:flex-start;max-width:75%;flex-shrink:0}.ui5-shellbar-overflow-container-left>:nth-child(n){margin-inline-end:.5rem}.ui5-shellbar-menu-button{white-space:nowrap;overflow:hidden;display:flex;align-items:center;padding:.25rem .5rem;cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;background:var(--sapButton_Lite_Background);border:var(--_ui5-v2-10-0-rc-2_shellbar_button_border);color:var(--sapShell_TextColor)}:host(:not([with-logo])) .ui5-shellbar-menu-button{margin-inline-start:0}.ui5-shellbar-overflow-container-right{flex-grow:1;justify-content:flex-end}.ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child{display:flex;justify-content:flex-end;height:inherit;align-items:center}.ui5-shellbar-overflow-container-right-inner{display:flex;flex-grow:1}.ui5-shellbar-content-items{display:flex;justify-content:center;align-items:center;flex-grow:1;min-width:max-content}.ui5-shellbar-spacer{flex-grow:1;height:1px;flex-basis:1rem;flex-shrink:1}.ui5-shellbar-separator{flex-grow:0;flex-shrink:0;height:1rem;width:1px;background-color:var(--sapToolbar_SeparatorColor)}.ui5-shellbar-separator-end{margin-inline-start:.5rem}.ui5-shellbar-overflow-container-right-child .ui5-shellbar-button[data-count]:has(+.ui5-shellbar-overflow-button):before{inset-inline-end:var(--_ui5-v2-10-0-rc-2-shellbar-notification-btn-count-offset)}:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right{padding-inline-start:0}::slotted([hidden]){visibility:hidden;order:-1;position:absolute}.ui5-shellbar-content-item{display:flex;align-items:center;flex-shrink:0;padding-inline-start:var(--_ui5-v2-10-0-rc-2-shellbar-content-margin-start)}:host(:not([notifications-count])) .ui5-shellbar-bell-button{position:relative}:host([notifications-count]:not([notifications-count=""])) .ui5-shellbar-bell-button:before,.ui5-shellbar-button[data-count]:before{position:absolute;width:auto;height:1rem;min-width:1rem;background:var(--sapContent_BadgeBackground);border:var(--_ui5-v2-10-0-rc-2_shellbar_button_badge_border);color:var(--sapContent_BadgeTextColor);top:-.25rem;right:-.25rem;padding:0 .3125rem;border-radius:.5rem;display:flex;justify-content:center;align-items:center;font-size:var(--sapFontSmallSize);font-family:"72override",var(--sapFontFamily);z-index:2;box-sizing:border-box}:host([notifications-count]:not([notifications-count=""])) .ui5-shellbar-bell-button:before{content:attr(data-ui5-notifications-count);inset-inline-end:var(--_ui5-v2-10-0-rc-2-shellbar-notification-btn-count-offset)}.ui5-shellbar-button[data-count]:before{content:attr(data-count)}.ui5-shellbar-button[data-count=" "]:before{height:.75rem;min-width:.75rem}.ui5-shellbar-menu-button{margin-inline-start:.5rem}.ui5-shellbar-search-field{padding-inline-start:var(--_ui5-v2-10-0-rc-2-shellbar-content-margin-start);min-width:var(--_ui5-v2-10-0-rc-2_shellbar_search_field_width);align-items:center;flex-grow:1;margin-inline-start:.5rem}.ui5-shellbar-overflow-container-right-child>:first-child,.ui5-shellbar-search-field:first-child+.ui5-shellbar-button:not(.ui5-shellbar-search-button){margin-inline-start:0}.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field{height:2.25rem;width:100%}.ui5-shellbar-search-full-width-wrapper{position:absolute;top:0;left:0;background:var(--sapShellColor);height:100%;width:100%;z-index:100;display:flex;align-items:center;box-sizing:border-box}.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-button{width:auto}::slotted([ui5-input]){background:var(--_ui5-v2-10-0-rc-2_shellbar_search_field_background);border:var(--_ui5-v2-10-0-rc-2_shellbar_search_field_border);box-shadow:var(--_ui5-v2-10-0-rc-2_shellbar_search_field_box_shadow);color:var(--_ui5-v2-10-0-rc-2_shellbar_search_field_color);height:2.25rem;width:100%;min-width:var(--_ui5-v2-10-0-rc-2_shellbar_search_field_width)}:host([breakpoint-size="M"]) ::slotted([ui5-input]),:host([breakpoint-size="S"]) ::slotted([ui5-input]){min-width:1rem}:host([breakpoint-size="M"][show-search-field]) .ui5-shellbar-overflow-container-right-child{flex-grow:1}::slotted([ui5-input]:hover){background:var(--_ui5-v2-10-0-rc-2_shellbar_search_field_background_hover);box-shadow:var(--_ui5-v2-10-0-rc-2_shellbar_search_field_box_shadow_hover)}::slotted([ui5-input][focused]){outline:var(--_ui5-v2-10-0-rc-2_shellbar_search_field_outline_focused)}::slotted([slot="logo"]){max-height:2rem;max-width:3.75rem;pointer-events:none}.ui5-shellbar-co-pilot-placeholder{width:2.75rem;height:2.75rem}.ui5-shellbar-coPilot-pressed,.ui5-shellbar-coPilot-pressed:hover{color:var(--sapShell_Assistant_ForegroundColor)}::slotted([ui5-button][slot="startButton"]){margin-inline:0 .5rem;justify-content:center;align-items:center}::slotted([ui5-button][data-profile-btn]){width:auto}::slotted(.ui5-shellbar-hidden-button),.ui5-shellbar-hidden-button,.ui5-shellbar-invisible-button{visibility:hidden;order:-1;opacity:0;min-width:0;width:0;margin:0;padding:0;padding-inline-start:0;border:0;margin-inline-start:0}
 `;
 
-    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
+    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => i18nDefaults.defaultThemeBase);
     Icons.p("@ui5/webcomponents-fiori", "sap_horizon", async () => parametersBundle_css.defaultTheme);
-    var ShellBarPopoverCss = `.ui5-shellbar-menu-popover::part(content),.ui5-shellbar-overflow-popover::part(content){padding:0}.ui5-shellbar-overflow-popover [ui5-li]::part(icon){color:var(--sapList_TextColor)}.ui5-shellbar-overflow-popover [ui5-li]::part(title){font-size:var(--sapFontSize)}.ui5-shellbar-overflow-popover [ui5-li]:after{position:relative;width:fit-content;height:1rem;min-width:1rem;background:var(--sapContent_BadgeBackground);border:var(--_ui5-v2-9-0_shellbar_button_badge_border);color:var(--sapContent_BadgeTextColor);bottom:calc(100% + .0625rem);left:1.25rem;padding:0 .3125rem;border-radius:.5rem;display:flex;justify-content:center;align-items:center;font-size:var(--sapFontSmallSize);font-family:"72override",var(--sapFontFamily);z-index:2;box-sizing:border-box;pointer-events:none}.ui5-shellbar-overflow-popover [ui5-li][data-count]:after{content:attr(data-count)}
+    var ShellBarPopoverCss = `.ui5-shellbar-menu-popover::part(content),.ui5-shellbar-overflow-popover::part(content){padding:0}.ui5-shellbar-overflow-popover [ui5-li]::part(icon){color:var(--sapList_TextColor)}.ui5-shellbar-overflow-popover [ui5-li]::part(title){font-size:var(--sapFontSize)}.ui5-shellbar-overflow-popover [ui5-li]:after{position:relative;width:fit-content;height:1rem;min-width:1rem;background:var(--sapContent_BadgeBackground);border:var(--_ui5-v2-10-0-rc-2_shellbar_button_badge_border);color:var(--sapContent_BadgeTextColor);bottom:calc(100% + .0625rem);left:1.25rem;padding:0 .3125rem;border-radius:.5rem;display:flex;justify-content:center;align-items:center;font-size:var(--sapFontSmallSize);font-family:"72override",var(--sapFontFamily);z-index:2;box-sizing:border-box;pointer-events:none}.ui5-shellbar-overflow-popover [ui5-li][data-count]:after{content:attr(data-count)}
 `;
 
     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -797,25 +473,33 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         constructor() {
             super();
             /**
-             * Defines, if the notification icon would be displayed.
+             * Defines the visibility state of the search button.
+             *
+             * **Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.
              * @default false
              * @public
              */
-            this.showNotifications = false;
+            this.hideSearchButton = false;
             /**
-             * Defines, if the product switch icon would be displayed.
+             * Disables the automatic search field expansion/collapse when the available space is not enough.
+             *
+             * **Note:** The `disableAutoSearchField` property is in an experimental state and is a subject to change.
              * @default false
              * @public
              */
-            this.showProductSwitch = false;
+            this.disableAutoSearchField = false;
             /**
-             * Defines, if the Search Field would be displayed when there is a valid `searchField` slot.
-             *
-             * **Note:** By default the Search Field is not displayed.
+             * Defines, if the notification icon would be displayed.
+             * @default false
+             * @public
+             */
+            this.showNotifications = false;
+            /**
+             * Defines, if the product switch icon would be displayed.
              * @default false
              * @public
              */
-            this.showSearchField = false;
+            this.showProductSwitch = false;
             /**
              * Defines additional accessibility attributes on different areas of the component.
              *
@@ -828,6 +512,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
              * - **product** - `product.expanded` and `product.hasPopup`.
              * - **search** - `search.hasPopup`.
              * - **overflow** - `overflow.expanded` and `overflow.hasPopup`.
+             * - **branding** - `branding.name`.
              *
              * The accessibility attributes support the following values:
              *
@@ -867,6 +552,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             this._lastOffsetWidth = 0;
             this._observableContent = [];
             this._autoRestoreSearchField = false;
+            this._showSearchField = false;
             this._hiddenIcons = [];
             this._isInitialRendering = true;
             this._overflowNotifications = null;
@@ -898,15 +584,15 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             const spacerWidth = this.shadowRoot.querySelector(".ui5-shellbar-spacer") ? this.shadowRoot.querySelector(".ui5-shellbar-spacer").getBoundingClientRect().width : 0;
             const searchFieldWidth = this.domCalculatedValues("--_ui5_shellbar_search_field_width");
             if (this.showFullWidthSearch) {
-                this.showSearchField = false;
+                this.setSearchState(true);
                 return;
             }
             if ((spacerWidth <= searchFieldWidth && this.contentItemsHidden.length !== 0) && this.showSearchField) {
-                this.showSearchField = false;
+                this.setSearchState(false);
                 this._autoRestoreSearchField = true;
             }
             else if (spacerWidth > searchFieldWidth && this._autoRestoreSearchField) {
-                this.showSearchField = true;
+                this.setSearchState(true);
                 this._autoRestoreSearchField = false;
             }
         }
@@ -1020,12 +706,9 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         _calculateCSSREMValue(styleSet, propertyName) {
             return Number(styleSet.getPropertyValue(propertyName).replace("rem", "")) * parseInt(getComputedStyle(document.body).getPropertyValue("font-size"));
         }
-        _parsePxValue(styleSet, propertyName) {
-            return Number(styleSet.getPropertyValue(propertyName).replace("px", ""));
-        }
         domCalculatedValues(cssVar) {
             const shellbarComputerStyle = getComputedStyle(this.getDomRef());
-            return this._calculateCSSREMValue(shellbarComputerStyle, Icons.d$1(cssVar)); // px
+            return this._calculateCSSREMValue(shellbarComputerStyle, Icons.d(cssVar)); // px
         }
         onBeforeRendering() {
             this.withLogo = this.hasLogo;
@@ -1039,6 +722,34 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             });
             this._observeContentItems();
         }
+        /**
+         * Defines, if the Search Field would be displayed when there is a valid `searchField` slot.
+         *
+         * **Note:** By default the Search Field is not displayed.
+         * @default false
+         * @public
+         */
+        set showSearchField(value) {
+            if (isSelfCollapsibleSearch(this.search)) {
+                this.search.collapsed = !value;
+            }
+            this._showSearchField = value;
+        }
+        get showSearchField() {
+            if (isSelfCollapsibleSearch(this.search)) {
+                return !this.search.collapsed;
+            }
+            return this._showSearchField;
+        }
+        /**
+         * Use this method to change the state of the search filed according to internal logic.
+         * An event is fired to notify the change.
+         */
+        async setSearchState(expanded) {
+            this.showSearchField = expanded;
+            await Icons.f$3();
+            this.fireDecoratorEvent("search-field-toggle", { expanded });
+        }
         onAfterRendering() {
             this._lastOffsetWidth = this.offsetWidth;
             this._overflowActions();
@@ -1046,7 +757,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         }
         async onInitialRendering() {
             if (this._isInitialRendering) {
-                await Icons.f$1();
+                await Icons.f$3();
                 if (this.autoSearchField) {
                     this._updateSearchFieldState();
                 }
@@ -1119,7 +830,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             this._updateItemsInfo(itemsInfo);
             this._updateContentInfo(contentInfo);
             this._updateOverflowNotifications();
-            this.showFullWidthSearch = this.overflowed;
+            this.showFullWidthSearch = this.overflowed && this.showSearchField;
         }
         _toggleActionPopover() {
             const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
@@ -1128,15 +839,15 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             overflowPopover.open = true;
         }
         onEnterDOM() {
-            webcomponentsBase.f$1.register(this, this._handleResize);
-            if (Icons.f$2()) {
+            webcomponentsBase.f.register(this, this._handleResize);
+            if (Icons.f$1()) {
                 this.setAttribute("desktop", "");
             }
         }
         onExitDOM() {
             this.contentItemsObserver.disconnect();
             this._observableContent = [];
-            webcomponentsBase.f$1.deregister(this, this._handleResize);
+            webcomponentsBase.f.deregister(this, this._handleResize);
         }
         _handleSearchIconPress() {
             const searchButtonRef = this.shadowRoot.querySelector(".ui5-shellbar-search-button");
@@ -1147,7 +858,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             if (defaultPrevented) {
                 return;
             }
-            this.showSearchField = !this.showSearchField;
+            this.setSearchState(!this.showSearchField);
             if (!this.showSearchField) {
                 return;
             }
@@ -1168,7 +879,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
                 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 Icons.f$1();
+                await Icons.f$3();
             }
             this._defaultItemPressPrevented = false;
         }
@@ -1198,7 +909,8 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             });
         }
         _handleCancelButtonPress() {
-            this.showSearchField = false;
+            this.showFullWidthSearch = false;
+            this.setSearchState(false);
         }
         _handleProductSwitchPress(e) {
             const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch"), target = e.target;
@@ -1251,6 +963,16 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         get productSwitchDomRef() {
             return this.shadowRoot.querySelector(`*[data-ui5-stable="product-switch"]`);
         }
+        /**
+         * Returns the `search` icon DOM ref.
+         * @returns The search icon DOM ref
+         * @public
+         * @since 2.10.0
+         */
+        async getSearchButtonDomRef() {
+            await Icons.f$3();
+            return this.shadowRoot.querySelector(`*[data-ui5-stable="toggle-search"]`);
+        }
         _getContentInfo() {
             return [
                 ...this.contentItemsSorted.map(item => {
@@ -1289,7 +1011,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
                 {
                     icon: bell,
                     title: this._notificationsText,
-                    text: ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_NOTIFICATIONS_NO_COUNT),
+                    text: ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_NOTIFICATIONS_NO_COUNT),
                     count: this.notificationsCount,
                     classes: `${this.showNotifications ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-bell-button ui5-shellbar-button`,
                     id: `${this._id}-item-${2}`,
@@ -1324,7 +1046,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
                     };
                 }),
                 {
-                    icon: overflow,
+                    icon: overflow.overflow,
                     text: "Overflow",
                     classes: "ui5-shellbar-hidden-button ui5-shellbar-no-overflow-button ui5-shellbar-overflow-button ui5-shellbar-button",
                     id: `${this.id}-item-${5}`,
@@ -1437,8 +1159,12 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         }
         get autoSearchField() {
             const onFocus = document.activeElement === this.searchField[0];
-            const isEmpty = this.searchField[0]?.value.length === 0;
-            return (this.showSearchField || this._autoRestoreSearchField) && !onFocus && isEmpty;
+            const hasValue = this.searchField[0]?.value?.length > 0;
+            const disableAutoSearchField = this.disableAutoSearchField || onFocus || hasValue;
+            if (disableAutoSearchField) {
+                return false;
+            }
+            return this.showSearchField || this._autoRestoreSearchField;
         }
         get startContentInfoSorted() {
             return this._contentInfo
@@ -1479,6 +1205,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
                 },
                 search: {
                     "ui5-shellbar-hidden-button": this.isIconHidden("search"),
+                    "ui5-shellbar-search-toggle": true,
                 },
                 overflow: {
                     "ui5-shellbar-hidden-button": this._hiddenIcons.length === 0,
@@ -1487,13 +1214,19 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
                     "ui5-shellbar-hidden-button": this.isIconHidden("assistant"),
                     "ui5-shellbar-assistant-button": true,
                 },
+                searchField: {
+                    "ui5-shellbar-search-field": this.showSearchField,
+                    "ui5-shellbar-search-toggle": isSelfCollapsibleSearch(this.search),
+                    "ui5-shellbar-hidden-button": !this.showSearchField,
+                },
             };
         }
         get styles() {
+            const styles = {
+                "display": this.showSearchField ? "flex" : "none",
+            };
             return {
-                searchField: {
-                    "display": this.showSearchField ? "flex" : "none",
-                },
+                searchField: isSelfCollapsibleSearch(this.search) ? {} : styles,
             };
         }
         get customItemsInfo() {
@@ -1530,36 +1263,38 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             return this.menuItems.length > 0;
         }
         get imageBtnText() {
-            return parametersBundle_css.A(this);
+            return toLowercaseEnumValue.A(this);
         }
         get _shellbarText() {
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_LABEL);
+            return ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_LABEL);
         }
         get _logoText() {
-            return this.accessibilityAttributes.logo?.name || ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_LOGO);
+            return this.accessibilityAttributes.logo?.name || ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_LOGO);
         }
         get _notificationsText() {
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_NOTIFICATIONS, this.notificationsCount || 0);
+            return ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_NOTIFICATIONS, this.notificationsCount || 0);
         }
         get _cancelBtnText() {
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_CANCEL);
+            return ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_CANCEL);
         }
         get _logoAreaText() {
             const primaryTitle = this.primaryTitle ?? "";
             const secondaryTitle = this.secondaryTitle ?? "";
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_LOGO_AREA, primaryTitle, secondaryTitle);
+            return ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_LOGO_AREA, primaryTitle, secondaryTitle);
         }
         get _contentItemsText() {
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_ADDITIONAL_CONTEXT);
+            return this._enableContentAreaAccessibility ? ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_ADDITIONAL_CONTEXT) : undefined;
         }
         get _searchFieldDescription() {
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_SEARCHFIELD_DESCRIPTION);
+            return ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_SEARCHFIELD_DESCRIPTION);
         }
         get _contentItemsRole() {
-            if (this.contentItems.length === 1) {
-                return;
+            if (this._enableContentAreaAccessibility) {
+                return "group";
             }
-            return "group";
+        }
+        get _enableContentAreaAccessibility() {
+            return this.contentItems.length > 1;
         }
         get contentItems() {
             return [...this.startContent, ...this.endContent];
@@ -1591,28 +1326,28 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             return "toolbar";
         }
         get _searchFieldText() {
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_SEARCH_FIELD);
+            return ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_SEARCH_FIELD);
         }
         get _searchBtnOpen() {
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_SEARCH_BTN_OPEN);
+            return ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_SEARCH_BTN_OPEN);
         }
         get _productSwitchBtnText() {
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_PRODUCT_SWITCH_BTN);
-        }
-        get isSearchFieldVisible() {
-            return this.searchField[0]?.offsetWidth || 0;
+            return ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_PRODUCT_SWITCH_BTN);
         }
         get _profileText() {
-            return this.accessibilityAttributes.profile?.name || ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_PROFILE);
+            return this.accessibilityAttributes.profile?.name || ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_PROFILE);
         }
         get _productsText() {
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_PRODUCTS);
+            return ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_PRODUCTS);
         }
         get _searchText() {
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_SEARCH);
+            return ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_SEARCH);
         }
         get _overflowText() {
-            return ShellBar_1.i18nBundle.getText(i18nDefaults.SHELLBAR_OVERFLOW);
+            return ShellBar_1.i18nBundle.getText(i18nDefaults$1.SHELLBAR_OVERFLOW);
+        }
+        get _brandingText() {
+            return this.accessibilityAttributes.branding?.name || this.primaryTitle;
         }
         get hasContentItems() {
             return this.contentItems.length > 0;
@@ -1620,7 +1355,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         get hidableDomElements() {
             const items = Array.from(this.shadowRoot.querySelectorAll(".ui5-shellbar-button:not(.ui5-shellbar-search-button):not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-cancel-button):not(.ui5-shellbar-no-overflow-button)"));
             const assistant = this.shadowRoot.querySelector(".ui5-shellbar-assistant-button");
-            const searchButton = this.shadowRoot.querySelector(".ui5-shellbar-search-button");
+            const searchToggle = this.shadowRoot.querySelector(".ui5-shellbar-search-toggle");
             const contentItems = this.contentItemsWrappersSorted;
             const firstContentItem = contentItems.pop();
             const prioritizeContent = this.showSearchField && this.hasSearchField;
@@ -1645,7 +1380,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
                     ...items.toReversed(),
                     assistant,
                     ...contentItems,
-                    searchButton,
+                    searchToggle,
                     firstContentItem,
                 ];
             }
@@ -1705,6 +1440,12 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
                         expanded: overflowExpanded === undefined ? this._overflowPopoverExpanded : overflowExpanded,
                     },
                 },
+                branding: {
+                    "title": this._brandingText,
+                    "accessibilityAttributes": {
+                        name: this.accessibilityAttributes.branding?.name,
+                    },
+                },
             };
         }
         get accLogoRole() {
@@ -1713,7 +1454,19 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         get isSBreakPoint() {
             return this.breakpointSize === "S";
         }
+        get hasSelfCollapsibleSearch() {
+            return isSelfCollapsibleSearch(this.search);
+        }
+        get search() {
+            return this.searchField.length ? this.searchField[0] : null;
+        }
     };
+    __decorate([
+        webcomponentsBase.s({ type: Boolean })
+    ], ShellBar.prototype, "hideSearchButton", void 0);
+    __decorate([
+        webcomponentsBase.s({ type: Boolean })
+    ], ShellBar.prototype, "disableAutoSearchField", void 0);
     __decorate([
         webcomponentsBase.s()
     ], ShellBar.prototype, "primaryTitle", void 0);
@@ -1729,9 +1482,6 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
     __decorate([
         webcomponentsBase.s({ type: Boolean })
     ], ShellBar.prototype, "showProductSwitch", void 0);
-    __decorate([
-        webcomponentsBase.s({ type: Boolean })
-    ], ShellBar.prototype, "showSearchField", void 0);
     __decorate([
         webcomponentsBase.s({ type: Object })
     ], ShellBar.prototype, "accessibilityAttributes", void 0);
@@ -1772,7 +1522,10 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         webcomponentsBase.d()
     ], ShellBar.prototype, "menuItems", void 0);
     __decorate([
-        webcomponentsBase.d()
+        webcomponentsBase.d({
+            type: HTMLElement,
+            invalidateOnChildChange: true,
+        })
     ], ShellBar.prototype, "searchField", void 0);
     __decorate([
         webcomponentsBase.d()
@@ -1784,23 +1537,26 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         webcomponentsBase.d({ type: HTMLElement, individualSlots: true })
     ], ShellBar.prototype, "content", void 0);
     __decorate([
-        parametersBundle_css.i("@ui5/webcomponents-fiori")
+        webcomponentsBase.s({ type: Boolean })
+    ], ShellBar.prototype, "showSearchField", null);
+    __decorate([
+        i18nDefaults.i("@ui5/webcomponents-fiori")
     ], ShellBar, "i18nBundle", void 0);
     ShellBar = ShellBar_1 = __decorate([
         webcomponentsBase.m({
             tag: "ui5-shellbar",
             fastNavigation: true,
             languageAware: true,
-            renderer: parametersBundle_css.d,
+            renderer: i18nDefaults.d,
             template: ShellBarTemplate,
             styles: [shellBarStyles, ShellBarPopoverCss],
             dependencies: [
-                parametersBundle_css.Button,
-                parametersBundle_css.Icon,
-                parametersBundle_css.List,
-                parametersBundle_css.Popover,
+                Button.Button,
+                Icon.Icon,
+                List.List,
+                ListItemTemplate.Popover,
                 ListItemStandard$1,
-                Menu$1,
+                Menu,
             ],
         })
         /**
@@ -1871,6 +1627,16 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             cancelable: true,
             bubbles: true,
         })
+        /**
+         * Fired, when the search field is expanded or collapsed.
+         * @since 2.10.0
+         * @param {Boolean} expanded whether the search field is expanded
+         * @public
+         */
+        ,
+        eventStrict.l("search-field-toggle", {
+            bubbles: true,
+        })
         /**
          * Fired, when an item from the content slot is hidden or shown.
          * **Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.
@@ -1884,6 +1650,12 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             bubbles: true,
         })
     ], ShellBar);
+    const isSelfCollapsibleSearch = (searchField) => {
+        if (searchField) {
+            return "collapsed" in searchField;
+        }
+        return false;
+    };
     ShellBar.define();
     var ShellBar$1 = ShellBar;