@ui5/webcomponents-fiori 2.19.2 → 2.20.0-rc.1

package/dist/ShellBar.js

@@ -6,41 +6,61 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var ShellBar_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { isSpace, isEnter, isLeft, isRight, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
-import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
-import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
-import List from "@ui5/webcomponents/dist/List.js";
-import Popover from "@ui5/webcomponents/dist/Popover.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
+import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import throttle from "@ui5/webcomponents-base/dist/util/throttle.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ButtonBadge from "@ui5/webcomponents/dist/ButtonBadge.js";
-import Menu from "@ui5/webcomponents/dist/Menu.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import { isDesktop, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import search from "@ui5/webcomponents-icons/dist/search.js";
-import da from "@ui5/webcomponents-icons/dist/da.js";
-import bell from "@ui5/webcomponents-icons/dist/bell.js";
-import overflow from "@ui5/webcomponents-icons/dist/overflow.js";
-import grid from "@ui5/webcomponents-icons/dist/grid.js";
-import throttle from "@ui5/webcomponents-base/dist/util/throttle.js";
-import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
-// Templates
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import Menu from "@ui5/webcomponents/dist/Menu.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import searchIcon from "@ui5/webcomponents-icons/dist/search.js";
+import bellIcon from "@ui5/webcomponents-icons/dist/bell.js";
+import gridIcon from "@ui5/webcomponents-icons/dist/grid.js";
+import daIcon from "@ui5/webcomponents-icons/dist/da.js";
+import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js";
 import ShellBarTemplate from "./ShellBarTemplate.js";
-// Styles
 import shellBarStyles from "./generated/themes/ShellBar.css.js";
 import ShellBarPopoverCss from "./generated/themes/ShellBarPopover.css.js";
-import { SHELLBAR_LABEL, SHELLBAR_LOGO, SHELLBAR_NOTIFICATIONS, SHELLBAR_NOTIFICATIONS_NO_COUNT, SHELLBAR_CANCEL, SHELLBAR_PROFILE, SHELLBAR_PRODUCTS, SHELLBAR_SEARCH, SHELLBAR_SEARCH_FIELD, SHELLBAR_OVERFLOW, SHELLBAR_LOGO_AREA, SHELLBAR_ADDITIONAL_CONTEXT, SHELLBAR_SEARCHFIELD_DESCRIPTION, SHELLBAR_SEARCH_BTN_OPEN, SHELLBAR_PRODUCT_SWITCH_BTN, SHELLBAR_IMAGE_BTN, } from "./generated/i18n/i18n-defaults.js";
-const RESIZE_THROTTLE_RATE = 200; // ms
+import shellBarLegacyStyles from "./generated/themes/ShellBarLegacy.css.js";
+import ShellBarLegacy from "./shellbar/ShellBarLegacy.js";
+import ShellBarSearch from "./shellbar/ShellBarSearch.js";
+import ShellBarSearchLegacy from "./shellbar/ShellBarSearchLegacy.js";
+import ShellBarOverflow from "./shellbar/ShellBarOverflow.js";
+import ShellBarAccessibility from "./shellbar/ShellBarAccessibility.js";
+import ShellBarItemNavigation from "./shellbar/ShellBarItemNavigation.js";
+import ShellBarItem from "./ShellBarItem.js";
+import ShellBarSpacer from "./ShellBarSpacer.js";
+import { SHELLBAR_LABEL, SHELLBAR_NOTIFICATIONS, SHELLBAR_NOTIFICATIONS_NO_COUNT, SHELLBAR_PROFILE, SHELLBAR_PRODUCTS, SHELLBAR_SEARCH, SHELLBAR_ASSISTANT, SHELLBAR_OVERFLOW, SHELLBAR_ADDITIONAL_CONTEXT, } from "./generated/i18n/i18n-defaults.js";
 // actions always visible in lean mode, order is important
-const PREDEFINED_PLACE_ACTIONS = ["feedback", "sys-help"];
+const PREDEFINED_PLACE_ITEMS = ["feedback", "sys-help"];
+const ShellBarActions = {
+    Search: "search",
+    Profile: "profile",
+    Overflow: "overflow",
+    Assistant: "assistant",
+    ProductSwitch: "products",
+    Notifications: "notifications",
+};
+const ShellBarActionsSelectors = {
+    Search: ".ui5-shellbar-search-toggle",
+    Profile: ".ui5-shellbar-image-button",
+    Overflow: ".ui5-shellbar-overflow-button",
+    Assistant: ".ui5-shellbar-assistant-button",
+    ProductSwitch: ".ui5-shellbar-button-product-switch",
+    Notifications: ".ui5-shellbar-bell-button",
+};
 /**
  * @class
  * ### Overview
@@ -74,42 +94,8 @@ const PREDEFINED_PLACE_ACTIONS = ["feedback", "sys-help"];
  * @since 0.8.0
  */
 let ShellBar = ShellBar_1 = class ShellBar extends UI5Element {
-    static get FIORI_3_BREAKPOINTS() {
-        return [
-            599,
-            1023,
-            1439,
-            1919,
-            10000,
-        ];
-    }
-    static get FIORI_3_BREAKPOINTS_MAP() {
-        return {
-            "599": "S",
-            "1023": "M",
-            "1439": "L",
-            "1919": "XL",
-            "10000": "XXL",
-        };
-    }
     constructor() {
-        super();
-        /**
-         * 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.hideSearchButton = false;
-        /**
-         * Disables the automatic search field expansion/collapse when the available space is not enough.
-         *
-         * **Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.
-         * @default false
-         * @public
-         */
-        this.disableSearchCollapse = false;
+        super(...arguments);
         /**
          * Defines, if the notification icon would be displayed.
          * @default false
@@ -170,465 +156,473 @@ let ShellBar = ShellBar_1 = class ShellBar extends UI5Element {
          */
         this.breakpointSize = "S";
         /**
+         * Actions computed from controllers.
+         * @private
+         */
+        this.actions = [];
+        /**
+         * Show overflow button when items are hidden.
+         * @private
+         */
+        this.showOverflowButton = false;
+        /**
+         * Open state of the overflow popover.
+         * @private
+         */
+        this.overflowPopoverOpen = false;
+        /**
+         * IDs of items currently hidden due to overflow.
+         * Used to trigger rerender for conditional rendering.
+         * @private
+         */
+        this.hiddenItemsIds = [];
+        /**
+         * Show full-screen search overlay.
          * @private
          */
-        this.withLogo = false;
-        this._itemsInfo = [];
-        this._contentInfo = [];
-        this._menuPopoverExpanded = false;
-        this._overflowPopoverExpanded = false;
         this.showFullWidthSearch = false;
-        this._cachedHiddenContent = [];
-        this._lastOffsetWidth = 0;
-        this._observableContent = [];
-        this._autoRestoreSearchField = false;
-        this._onSearchOpenBound = this._onSearchOpen.bind(this);
-        this._onSearchCloseBound = this._onSearchClose.bind(this);
-        this._onSearchBound = this._onSearch.bind(this);
-        this._hiddenIcons = [];
-        this._isInitialRendering = true;
-        this._overflowNotifications = null;
-        // marks if preventDefault() is called in item's press handler
-        this._defaultItemPressPrevented = false;
-        this.contentItemsObserver = new MutationObserver(() => {
-            this._handleActionsOverflow();
-        });
-        this._headerPress = () => {
-            if (this.hasMenuItems) {
-                const menuPopover = this._getMenuPopover();
-                menuPopover.opener = this.shadowRoot.querySelector(".ui5-shellbar-menu-button");
-                menuPopover.open = true;
-            }
+        this.RESIZE_THROTTLE_RATE = 100; // ms
+        this.handleResizeBound = throttle(this.handleResize.bind(this), this.RESIZE_THROTTLE_RATE);
+        this.breakpoints = [599, 1023, 1439, 1919, 10000];
+        this.breakpointMap = {
+            599: "S",
+            1023: "M",
+            1439: "L",
+            1919: "XL",
+            10000: "XXL",
         };
-        this._handleResize = throttle(() => {
-            this.menuPopover = this._getMenuPopover();
-            this.overflowPopover = this._getOverflowPopover();
-            this.overflowPopover.open = false;
-            if (this._lastOffsetWidth !== this.offsetWidth) {
-                this._overflowActions();
-                if (this.autoSearchField) {
-                    this._updateSearchFieldState();
-                }
-            }
-        }, RESIZE_THROTTLE_RATE);
-    }
-    _onSearchOpen(e) {
-        if (e.target !== this.search) {
-            this._detachSearchFieldListeners(e.target);
-            return;
-        }
-        if (isPhone()) {
-            this.setSearchState(true);
-        }
-    }
-    _onSearchClose(e) {
-        if (e.target !== this.search) {
-            this._detachSearchFieldListeners(e.target);
-            return;
-        }
-        if (isPhone()) {
-            this.setSearchState(false);
-        }
-    }
-    _onSearch(e) {
-        if (e.target !== this.search) {
-            this._detachSearchFieldListeners(e.target);
-            return;
-        }
-        // Decide when to toggle the search field:
-        // - On mobile, the search opens on its own (we don’t interfere).
-        // - If there’s already a value, onSearch is responsible for triggering the search (we don’t interfere)
-        // - If the field is closed, we must open it regardless.
-        if (isPhone() || (this.search?.value && this.showSearchField)) {
-            return;
-        }
-        this.setSearchState(!this.showSearchField);
-    }
-    _updateSearchFieldState() {
-        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.setSearchState(true);
-            return;
-        }
-        if ((spacerWidth <= searchFieldWidth && this.contentItemsHidden.length !== 0) && this.showSearchField) {
-            this.setSearchState(false);
-            this._autoRestoreSearchField = true;
-        }
-        else if (spacerWidth > searchFieldWidth && this._autoRestoreSearchField) {
-            this.setSearchState(true);
-            this._autoRestoreSearchField = false;
-        }
-    }
-    _onKeyDown(e) {
-        if (!isLeft(e) && !isRight(e) && !isHome(e) && !isEnd(e)) {
-            return;
-        }
-        const domRef = this.getDomRef();
-        if (!domRef) {
-            // If the component is not rendered yet, we should not handle the keydown event
-            return;
-        }
-        const activeElement = getActiveElement();
-        if (!activeElement) {
-            return;
-        }
-        // Check if the active elements should "steal" the navigation
-        if (this._allowChildNavigation(activeElement, e)) {
-            return;
-        }
-        const items = getTabbableElements(domRef).filter(el => this._isVisible(el));
-        const currentIndex = items.findIndex(el => el === activeElement);
-        // Only handle arrow navigation if the focus is on a ShellBar item
-        if (currentIndex !== -1) {
-            e.preventDefault();
-            // Focus navigation based on the key pressed
-            if (isLeft(e)) {
-                this._focusPreviousItem(items, currentIndex);
-            }
-            else if (isRight(e)) {
-                this._focusNextItem(items, currentIndex);
-            }
-            else if (isHome(e)) {
-                // Move focus to the first ShellBar item
-                items[0]?.focus();
-            }
-            else if (isEnd(e)) {
-                // Move focus to the last ShellBar item
-                items[items.length - 1]?.focus();
-            }
-        }
-    }
-    _allowChildNavigation(activeElement, e) {
-        if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") {
-            return this._allowInputNavigation(activeElement, e);
-        }
-        return false; // Default to false for other elements
-    }
-    _allowInputNavigation(inputElement, e) {
-        const cursorPosition = inputElement.selectionStart || 0;
-        const textLength = inputElement.value.length;
-        // Allow internal navigation if cursor is not at the boundaries
-        if ((isLeft(e) && cursorPosition > 0)
-            || (isRight(e) && cursorPosition < textLength)) {
-            return true;
-        }
-        // Let ShellBar handle navigation if at boundaries
-        return false;
-    }
-    _focusNextItem(items, currentIndex) {
-        if (currentIndex < items.length - 1) {
-            (items[currentIndex + 1]).focus(); // Focus the next element
-        }
-    }
-    _focusPreviousItem(items, currentIndex) {
-        if (currentIndex > 0) {
-            (items[currentIndex - 1]).focus(); // Focus the previous element
-        }
+        this.itemNavigation = new ShellBarItemNavigation({
+            getDomRef: () => this.getDomRef() || null,
+        });
+        this.overflow = new ShellBarOverflow();
+        this.accessibility = new ShellBarAccessibility();
+        this._searchAdaptor = new ShellBarSearch(this.getSearchDeps());
+        this._searchAdaptorLegacy = new ShellBarSearchLegacy({
+            ...this.getSearchDeps(),
+            getDisableSearchCollapse: () => this.disableSearchCollapse,
+        });
+        /* =================== Legacy Members =================== */
+        /**
+         * 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.hideSearchButton = false;
+        /**
+         * Disables the automatic search field expansion/collapse when the available space is not enough.
+         *
+         * **Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.
+         * @default false
+         * @public
+         */
+        this.disableSearchCollapse = false;
+        /**
+         * Open state of the menu popover (legacy).
+         * @private
+         */
+        this.menuPopoverOpen = false;
     }
-    _isVisible(element) {
-        const style = getComputedStyle(element);
-        return style.display !== "none" && style.visibility !== "hidden" && element.offsetWidth > 0 && element.offsetHeight > 0;
+    /* =================== Lifecycle Methods =================== */
+    onEnterDOM() {
+        ResizeHandler.register(this, this.handleResizeBound);
+        this.searchAdaptor?.subscribe();
     }
-    _getRightChildItems() {
-        return [
-            ...this.searchField,
-            ...this.shadowRoot.querySelectorAll(".ui5-shellbar-search-item-for-arrow-nav"),
-            ...this.assistant,
-            ...this.shadowRoot.querySelectorAll(".ui5-shellbar-items-for-arrow-nav"),
-        ];
+    onExitDOM() {
+        ResizeHandler.deregister(this, this.handleResizeBound);
+        this.searchAdaptor?.unsubscribe();
     }
-    _menuItemPress(e) {
-        const shouldContinue = this.fireDecoratorEvent("menu-item-click", {
-            item: e.detail.item,
-        });
-        if (shouldContinue) {
-            this.menuPopover.open = false;
+    onBeforeRendering() {
+        if (!this.legacyAdaptor) {
+            this.initLegacyController();
         }
-    }
-    _logoPress() {
-        this.fireDecoratorEvent("logo-click", {
-            targetRef: this.shadowRoot.querySelector(".ui5-shellbar-logo"),
+        // Sync branding breakpoint state
+        this.branding.forEach(brandingEl => {
+            brandingEl._isSBreakPoint = this.isSBreakPoint;
         });
+        this.buildActions();
+        this.searchAdaptor?.syncShowSearchFieldState();
+        // subscribe to search adaptor for cases when search is added dynamically
+        this.searchAdaptor?.unsubscribe();
+        this.searchAdaptor?.subscribe();
     }
-    _menuPopoverBeforeOpen() {
-        this._menuPopoverExpanded = true;
-        if (this.menuPopover.content && this.menuPopover.content.length) {
-            this.menuPopover.content[0].focusFirstItem();
-        }
-    }
-    _menuPopoverAfterClose() {
-        this._menuPopoverExpanded = false;
+    onAfterRendering() {
+        this.updateBreakpoint();
+        this.updateOverflow();
     }
-    _overflowPopoverBeforeOpen() {
-        this._overflowPopoverExpanded = true;
-        if (this.overflowPopover.content && this.overflowPopover.content.length) {
-            this.overflowPopover.content[0].focusFirstItem();
-        }
+    /* =================== Actions Management =================== */
+    buildActions() {
+        this.actions = [
+            {
+                id: ShellBarActions.Search,
+                icon: searchIcon,
+                enabled: this.enabledFeatures.search,
+                selector: ShellBarActionsSelectors.Search,
+                isProtected: false,
+                stableDomRef: "toggle-search",
+            },
+            {
+                id: ShellBarActions.Assistant,
+                icon: daIcon,
+                enabled: this.enabledFeatures.assistant,
+                selector: ShellBarActionsSelectors.Assistant,
+                isProtected: false,
+            },
+            {
+                id: ShellBarActions.Notifications,
+                icon: bellIcon,
+                count: this.notificationsCount,
+                enabled: this.enabledFeatures.notifications,
+                selector: ShellBarActionsSelectors.Notifications,
+                isProtected: false,
+                stableDomRef: "notifications",
+            },
+            {
+                id: ShellBarActions.Overflow,
+                icon: overflowIcon,
+                enabled: this.enabledFeatures.overflow,
+                selector: ShellBarActionsSelectors.Overflow,
+                isProtected: true,
+                stableDomRef: "overflow",
+            },
+            {
+                id: ShellBarActions.Profile,
+                enabled: this.enabledFeatures.profile,
+                selector: ShellBarActionsSelectors.Profile,
+                isProtected: true,
+                stableDomRef: "profile",
+            },
+            {
+                id: ShellBarActions.ProductSwitch,
+                icon: gridIcon,
+                enabled: this.enabledFeatures.productSwitch,
+                selector: ShellBarActionsSelectors.ProductSwitch,
+                isProtected: true,
+                stableDomRef: "product-switch",
+            },
+        ].filter(action => action.enabled);
+    }
+    getAction(actionId) {
+        return this.actions.find(action => action.id === actionId);
+    }
+    getActionOverflowText(actionId) {
+        const texts = {
+            [ShellBarActions.Search]: this.texts.search,
+            [ShellBarActions.Profile]: this.texts.profile,
+            [ShellBarActions.Overflow]: this.texts.overflow,
+            [ShellBarActions.Assistant]: this.texts.assistant,
+            [ShellBarActions.ProductSwitch]: this.texts.products,
+            [ShellBarActions.Notifications]: this.texts.notificationsNoCount,
+        };
+        return texts[actionId] || actionId;
     }
-    _overflowPopoverAfterClose() {
-        this._overflowPopoverExpanded = false;
+    /* =================== Breakpoint Management =================== */
+    get isSBreakPoint() {
+        return this.breakpointSize === "S";
     }
-    _logoKeyup(e) {
-        if (isSpace(e)) {
-            this._logoPress();
+    updateBreakpoint() {
+        const width = this.getBoundingClientRect().width;
+        const bp = this.breakpoints.find(b => width <= b) || 10000;
+        const breakpoint = this.breakpointMap[bp];
+        if (this.breakpointSize !== breakpoint) {
+            this.breakpointSize = breakpoint;
         }
     }
-    _logoKeydown(e) {
-        if (isSpace(e)) {
-            e.preventDefault();
+    /* =================== Overflow Management =================== */
+    updateOverflow() {
+        if (!this.overflow) {
             return;
         }
-        if (isEnter(e)) {
-            this._logoPress();
-        }
-    }
-    _calculateCSSREMValue(styleSet, propertyName) {
-        return Number(styleSet.getPropertyValue(propertyName).replace("rem", "")) * parseInt(getComputedStyle(document.body).getPropertyValue("font-size"));
-    }
-    domCalculatedValues(cssVar) {
-        const shellbarComputerStyle = getComputedStyle(this.getDomRef());
-        return this._calculateCSSREMValue(shellbarComputerStyle, cssVar); // px
-    }
-    onBeforeRendering() {
-        this.withLogo = this.hasLogo;
-        this._hiddenIcons = this._itemsInfo.filter(info => {
-            const isHidden = (info.classes.indexOf("ui5-shellbar-hidden-button") !== -1);
-            const isSet = info.classes.indexOf("ui5-shellbar-invisible-button") === -1;
-            const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
-            const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
-            const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile);
-            return isHidden && isSet && !shouldStayOnScreen;
+        const result = this.overflow.updateOverflow({
+            actions: this.actions,
+            content: this.sortContent(this.content),
+            customItems: this.sortItems(this.items),
+            hiddenItemsIds: this.hiddenItemsIds,
+            showSearchField: this.enabledFeatures.search && this.showSearchField,
+            overflowOuter: this.overflowOuter,
+            overflowInner: this.overflowInner,
+            setVisible: (selector, visible) => {
+                const element = this.shadowRoot.querySelector(selector);
+                if (element) {
+                    element.classList[visible ? "remove" : "add"]("ui5-shellbar-hidden");
+                }
+            },
         });
-        this._observeContentItems();
-        // search field shouldn't be expanded initially in full width mode
-        if (this.showFullWidthSearch && this._isInitialRendering) {
-            this.setSearchState(false);
-            this._autoRestoreSearchField = true;
-        }
-        if (isSelfCollapsibleSearch(this.search)) {
-            if (isPhone()) {
-                this.search.open = this.showSearchField;
+        this.handleUpdateOverflowResult(result);
+        return result.hiddenItemsIds;
+    }
+    handleUpdateOverflowResult(result) {
+        const { hiddenItemsIds, showOverflowButton } = result;
+        // Update items overflow state
+        this.items.forEach(item => {
+            item.inOverflow = hiddenItemsIds.includes(item._id);
+            if (item.inOverflow) {
+                // clear the hidden class to ensure the item is visible in the overflow popover
+                item.classList.remove("ui5-shellbar-hidden");
             }
-            else {
-                this.search.collapsed = !this.showSearchField;
-            }
-            this._detachSearchFieldListeners(this.search);
-            this._attachSearchFieldListeners(this.search);
+        });
+        if (!arraysAreEqual(this.hiddenItemsIds, hiddenItemsIds)) {
+            this.handleContentVisibilityChanged(this.hiddenItemsIds, hiddenItemsIds);
+            this.hiddenItemsIds = hiddenItemsIds;
+            this.showOverflowButton = showOverflowButton;
+        }
+        this.showFullWidthSearch = this.searchAdaptor?.shouldShowFullScreen() || false;
+    }
+    handleContentVisibilityChanged(oldHiddenItemsIds, newHiddenItemsIds) {
+        const filterContentIds = (ids) => ids.filter(id => this.content.some(item => item._individualSlot === id));
+        const oldHiddenContentIds = filterContentIds(oldHiddenItemsIds);
+        const newHiddenContentIds = filterContentIds(newHiddenItemsIds);
+        if (!arraysAreEqual(oldHiddenContentIds, newHiddenContentIds)) {
+            this.fireDecoratorEvent("content-item-visibility-change", {
+                items: newHiddenContentIds.map(id => this.content.find(item => item._individualSlot === id)),
+            });
         }
     }
-    /**
-     * 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) {
-        if (expanded === this.showSearchField) {
-            return;
-        }
-        this.showSearchField = expanded;
-        await renderFinished();
-        this.fireDecoratorEvent("search-field-toggle", { expanded });
+    handleResize() {
+        this.overflowPopoverOpen = false;
+        this.updateBreakpoint();
+        const hiddenItemsIds = this.updateOverflow() ?? [];
+        const spacerWidth = this.spacer?.getBoundingClientRect().width || 0;
+        this.searchAdaptor?.autoManageSearchState(hiddenItemsIds.length, spacerWidth);
     }
-    onAfterRendering() {
-        this._lastOffsetWidth = this.offsetWidth;
-        this._overflowActions();
-        this.onInitialRendering();
+    isHidden(itemId) {
+        return this.hiddenItemsIds.includes(itemId);
     }
-    async onInitialRendering() {
-        if (this._isInitialRendering) {
-            await renderFinished();
-            if (this.autoSearchField) {
-                this._updateSearchFieldState();
-            }
-        }
-        this._isInitialRendering = false;
+    handleOverflowClick() {
+        this.overflowPopoverOpen = !this.overflowPopoverOpen;
+    }
+    onPopoverClose() {
+        this.overflowPopoverOpen = false;
     }
     /**
-     * Closes the overflow area.
-     * Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event
+     * Closes the overflow popover.
      * @public
      */
     closeOverflow() {
-        if (this.overflowPopover) {
-            this.overflowPopover.open = false;
-        }
+        this.overflowPopoverOpen = false;
     }
-    _handleBarBreakpoints() {
-        const width = this.getBoundingClientRect().width;
-        const breakpoints = ShellBar_1.FIORI_3_BREAKPOINTS;
-        const size = breakpoints.find(bp1 => width <= bp1) || ShellBar_1.FIORI_3_BREAKPOINTS[ShellBar_1.FIORI_3_BREAKPOINTS.length - 1];
-        const mappedSize = ShellBar_1.FIORI_3_BREAKPOINTS_MAP[size];
-        if (this.breakpointSize !== mappedSize) {
-            this.breakpointSize = mappedSize;
+    handleOverflowItemClick(e) {
+        const target = e.target;
+        const actionId = target.getAttribute("data-action-id");
+        let prevented = e.defaultPrevented; // for custom actions
+        if (actionId === ShellBarActions.Notifications) {
+            prevented = this.handleNotificationsClick();
+        }
+        else if (actionId === ShellBarActions.Search) {
+            prevented = this.handleSearchButtonClick();
+        }
+        if (!prevented) {
+            this.overflowPopoverOpen = false;
         }
-        this.branding.forEach(brandingEl => {
-            brandingEl._isSBreakPoint = this.isSBreakPoint;
-        });
-    }
-    _hideItems(items) {
-        items.forEach(item => {
-            if (item.classes.indexOf("ui5-shellbar-no-overflow-button") === -1) {
-                item.classes = `${item.classes} ui5-shellbar-hidden-button`;
-            }
-        });
-        return items;
     }
-    _resetItemsVisibility(items) {
-        items.forEach(item => {
-            item.classList.remove("ui5-shellbar-hidden-button");
+    get overflowItems() {
+        return this.overflow.getOverflowItems({
+            actions: this.actions,
+            customItems: this.sortItems(this.items),
+            hiddenItemsIds: this.hiddenItemsIds,
         });
     }
-    _handleActionsOverflow() {
-        const inner = this.overflowInner;
-        const wrapper = this.overflowWrapper;
-        const hidableDomElements = this.hidableDomElements;
-        const hiddenItems = [];
-        let lastHiddenIndex = 0;
-        this._resetItemsVisibility(hidableDomElements);
-        for (let i = 0; i < hidableDomElements.length; i++) {
-            if (inner?.offsetWidth === wrapper?.offsetWidth) {
-                lastHiddenIndex = i;
-                break;
-            }
-            const item = hidableDomElements[i];
-            hiddenItems.push(item.id);
-            item.classList.add("ui5-shellbar-hidden-button");
+    /**
+     * Returns badge text for overflow button.
+     * Shows count if only one item with count is overflowed, otherwise shows attention dot.
+     */
+    get overflowBadge() {
+        const itemsWithCount = this.overflowItems.filter(item => item.data.count);
+        if (itemsWithCount.length === 1) {
+            return itemsWithCount[0].data.count;
         }
-        if (hiddenItems.length === 1 && !this.showSearchField) {
-            const nextItemToHide = hidableDomElements[++lastHiddenIndex];
-            if (nextItemToHide) {
-                hiddenItems.push(nextItemToHide.id);
-            }
+        if (itemsWithCount.length > 1) {
+            return " "; // Attention dot
         }
-        const itemsInfo = this._getItemsInfo().filter(item => item.show && item.classes.indexOf("ui5-shellbar-no-overflow-button") === -1);
-        const contentInfo = this._getContentInfo().sort((a, b) => a.hideOrder - b.hideOrder);
-        const itemsToHide = [...itemsInfo, ...contentInfo].filter(item => hiddenItems.includes(item.id));
-        this._hideItems(itemsToHide);
-        return { itemsInfo, contentInfo };
+        return undefined;
     }
-    _overflowActions() {
-        this._handleBarBreakpoints();
-        const { itemsInfo, contentInfo } = this._handleActionsOverflow();
-        this._updateItemsInfo(itemsInfo);
-        this._updateContentInfo(contentInfo);
-        this._updateOverflowNotifications();
-        this.showFullWidthSearch = this.overflowed && this.showSearchField;
-    }
-    _toggleActionPopover() {
-        const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-        const overflowPopover = this._getOverflowPopover();
-        overflowPopover.opener = overflowButton;
-        overflowPopover.open = true;
+    /* =================== Search Management =================== */
+    get search() {
+        return this.searchField.length ? this.searchField[0] : null;
     }
-    onEnterDOM() {
-        ResizeHandler.register(this, this._handleResize);
-        if (isDesktop()) {
-            this.setAttribute("desktop", "");
+    get isSelfCollapsibleSearch() {
+        const searchField = this.search;
+        if (searchField) {
+            return "collapsed" in searchField && "open" in searchField;
         }
-        this._attachSearchFieldListeners(this.search);
-    }
-    onExitDOM() {
-        this.contentItemsObserver.disconnect();
-        this._observableContent = [];
-        ResizeHandler.deregister(this, this._handleResize);
-        this._detachSearchFieldListeners(this.search);
+        return false;
     }
-    _attachSearchFieldListeners(searchField) {
-        if (!searchField) {
-            return;
-        }
-        searchField.addEventListener("ui5-open", this._onSearchOpenBound);
-        searchField.addEventListener("ui5-close", this._onSearchCloseBound);
-        searchField.addEventListener("ui5-search", this._onSearchBound);
+    getSearchDeps() {
+        return {
+            getSearchField: () => this.search,
+            getSearchState: () => this.enabledFeatures.search && this.showSearchField,
+            getCSSVariable: (cssVar) => this.getCSSVariable(cssVar),
+            setSearchState: (expanded) => this.setSearchState(expanded),
+            getOverflowed: () => this.overflow.isOverflowing(this.overflowOuter, this.overflowInner),
+        };
     }
-    _detachSearchFieldListeners(searchField) {
-        if (!searchField) {
-            return;
+    get searchAdaptor() {
+        if (this.isSelfCollapsibleSearch) {
+            return this._searchAdaptor;
         }
-        searchField.removeEventListener("ui5-open", this._onSearchOpenBound);
-        searchField.removeEventListener("ui5-close", this._onSearchCloseBound);
-        searchField.removeEventListener("ui5-search", this._onSearchBound);
+        return this._searchAdaptorLegacy;
     }
-    _handleSearchIconPress() {
-        const searchButtonRef = this.shadowRoot.querySelector(".ui5-shellbar-search-button");
+    handleSearchButtonClick() {
+        const searchButton = this.shadowRoot.querySelector(".ui5-shellbar-search-button");
         const defaultPrevented = !this.fireDecoratorEvent("search-button-click", {
-            targetRef: searchButtonRef,
+            targetRef: searchButton,
             searchFieldVisible: this.showSearchField,
         });
         if (defaultPrevented) {
-            return;
+            return defaultPrevented;
         }
         this.setSearchState(!this.showSearchField);
         if (!this.showSearchField) {
-            return;
+            return defaultPrevented;
         }
         const input = this.searchField[0];
-        // update the state immediately
         if (input) {
             input.focused = true;
-        }
-        // move the focus later
-        setTimeout(() => {
-            if (input) {
+            setTimeout(() => {
                 input.focus();
-            }
-        }, 100);
+            }, 100);
+        }
+        return defaultPrevented;
     }
-    async _handleActionListClick() {
-        if (!this._defaultItemPressPrevented) {
-            this.closeOverflow();
-            // wait for DOM to be updated when ui5-popover is closed, otherwise if Enter key is hold
-            // there will be no visual indication that this has happened
-            await renderFinished();
+    async setSearchState(expanded) {
+        if (expanded === this.showSearchField) {
+            return;
         }
-        this._defaultItemPressPrevented = false;
+        this.showSearchField = expanded;
+        await renderFinished();
+        this.fireDecoratorEvent("search-field-toggle", { expanded });
     }
-    _handleCustomActionPress(e) {
-        const target = e.target;
-        const refItemId = target.getAttribute("data-ui5-external-action-item-id");
-        if (refItemId) {
-            const shellbarItem = this.items.find(item => {
-                return item._id === refItemId;
+    handleCancelButtonClick() {
+        const cancelBtn = this.shadowRoot.querySelector(".ui5-shellbar-cancel-button");
+        if (!cancelBtn) {
+            return;
+        }
+        const clearDefaultPrevented = !this.fireDecoratorEvent("search-field-clear", {
+            targetRef: cancelBtn,
+        });
+        this.showFullWidthSearch = false;
+        this.setSearchState(false);
+        if (!clearDefaultPrevented && this.search) {
+            this.search.value = "";
+        }
+    }
+    /* =================== Legacy Features Management =================== */
+    initLegacyController() {
+        if (this.hasLegacyFeatures) {
+            this.legacyAdaptor = new ShellBarLegacy({
+                component: this,
+                getShadowRoot: () => this.shadowRoot,
             });
-            const prevented = shellbarItem.fireClickEvent(e);
-            this._defaultItemPressPrevented = prevented;
         }
     }
-    _handleOverflowPress() {
-        this._toggleActionPopover();
+    get hasLegacyFeatures() {
+        return this.logo.length > 0
+            || !!this.primaryTitle
+            || !!this.secondaryTitle
+            || this.menuItems.length > 0;
     }
-    _handleNotificationsPress(e) {
-        const notificationIconRef = this.shadowRoot.querySelector(".ui5-shellbar-bell-button"), target = e.target;
-        this._defaultItemPressPrevented = !this.fireDecoratorEvent("notifications-click", {
-            targetRef: notificationIconRef.classList.contains("ui5-shellbar-hidden-button") ? target : notificationIconRef,
-        });
+    /* =================== Keyboard Navigation =================== */
+    _onKeyDown(e) {
+        this.itemNavigation.handleKeyDown(e);
+    }
+    /* =================== Content Management =================== */
+    get startContent() {
+        return this.splitContent(this.content).start;
     }
-    _handleProfilePress() {
-        this.fireDecoratorEvent("profile-click", {
-            targetRef: this.shadowRoot.querySelector(".ui5-shellbar-image-button"),
+    get endContent() {
+        return this.splitContent(this.content).end;
+    }
+    get separatorConfig() {
+        const { start, end } = this.splitContent(this.content);
+        return {
+            showStartSeparator: start.some(item => !this.hiddenItemsIds.includes(item._individualSlot)),
+            showEndSeparator: end.some(item => !this.hiddenItemsIds.includes(item._individualSlot)),
+        };
+    }
+    splitContent(content) {
+        const spacerIndex = content.findIndex(child => child.hasAttribute("ui5-shellbar-spacer"));
+        if (spacerIndex === -1) {
+            return { start: [...content], end: [] };
+        }
+        return {
+            start: content.slice(0, spacerIndex),
+            end: content.slice(spacerIndex + 1),
+        };
+    }
+    sortContent(content) {
+        // reverse so items on the right are hidden first
+        // then sort by hide order to apply custom preferences
+        return content.toReversed().toSorted((a, b) => {
+            const aOrder = parseInt(a.getAttribute("data-hide-order") || "0");
+            const bOrder = parseInt(b.getAttribute("data-hide-order") || "0");
+            return aOrder - bOrder;
         });
     }
-    _handleCancelButtonPress() {
-        const cancelButtonRef = this.shadowRoot.querySelector(".ui5-shellbar-cancel-button");
-        const clearDefaultPrevented = !this.fireDecoratorEvent("search-field-clear", {
-            targetRef: cancelButtonRef,
+    /*
+     * Determines whether a separator should be packed with an item.
+     * Separators are packed with the last item that is hidden to account for
+     * the space they occupy when next overflow calculation occurs.
+     */
+    getPackedSeparatorInfo(item, isStartGroup) {
+        const group = isStartGroup ? this.startContent : this.endContent;
+        const sorted = this.sortContent(group);
+        const isHidden = this.hiddenItemsIds.includes(item._individualSlot);
+        const isLastItem = sorted.at(-1) === item;
+        return { shouldPack: isHidden && isLastItem };
+    }
+    /* =================== Items Management =================== */
+    sortItems(items) {
+        return items.toSorted((a, b) => {
+            const aIndex = PREDEFINED_PLACE_ITEMS.indexOf(a.icon || "");
+            const bIndex = PREDEFINED_PLACE_ITEMS.indexOf(b.icon || "");
+            return aIndex - bIndex;
         });
-        this.showFullWidthSearch = false;
-        this.setSearchState(false);
-        if (!clearDefaultPrevented) {
-            this._clearSearchFieldValue();
-        }
     }
-    _handleProductSwitchPress(e) {
-        const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch"), target = e.target;
-        this._defaultItemPressPrevented = !this.fireDecoratorEvent("product-switch-click", {
-            targetRef: buttonRef.classList.contains("ui5-shellbar-hidden-button") ? target : buttonRef,
+    /* =================== Accessibility =================== */
+    get actionsAccessibilityInfo() {
+        return this.accessibility.getActionsAccessibilityAttributes(this.texts, {
+            overflowPopoverOpen: this.overflowPopoverOpen,
+            accessibilityAttributes: this.accessibilityAttributes,
         });
     }
-    _clearSearchFieldValue() {
-        if (this.search) {
-            this.search.value = "";
-        }
+    get actionsRole() {
+        const visibleCount = this.actions.filter(a => !this.hiddenItemsIds.includes(a.id)).length;
+        return this.accessibility.getActionsRole(visibleCount);
+    }
+    get contentRole() {
+        const visibleItemsCount = this.content.filter(item => !this.hiddenItemsIds.includes(item._individualSlot)).length;
+        return this.accessibility.getContentRole(visibleItemsCount);
+    }
+    /* =================== Common Members =================== */
+    get enabledFeatures() {
+        return {
+            search: this.searchField.length > 0,
+            profile: this.profile.length > 0,
+            content: this.content.length > 0,
+            branding: this.branding.length > 0,
+            overflow: this.showOverflowButton,
+            assistant: this.assistant.length > 0,
+            startButton: this.startButton.length > 0,
+            notifications: this.showNotifications,
+            productSwitch: this.showProductSwitch,
+        };
+    }
+    get texts() {
+        return {
+            search: ShellBar_1.i18nBundle.getText(SHELLBAR_SEARCH),
+            profile: ShellBar_1.i18nBundle.getText(SHELLBAR_PROFILE),
+            shellbar: ShellBar_1.i18nBundle.getText(SHELLBAR_LABEL),
+            products: ShellBar_1.i18nBundle.getText(SHELLBAR_PRODUCTS),
+            overflow: ShellBar_1.i18nBundle.getText(SHELLBAR_OVERFLOW),
+            assistant: ShellBar_1.i18nBundle.getText(SHELLBAR_ASSISTANT),
+            notifications: ShellBar_1.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationsCount || 0),
+            notificationsNoCount: ShellBar_1.i18nBundle.getText(SHELLBAR_NOTIFICATIONS_NO_COUNT),
+            contentItems: this.content.length > 1 ? ShellBar_1.i18nBundle.getText(SHELLBAR_ADDITIONAL_CONTEXT) : undefined,
+        };
+    }
+    get popoverHorizontalAlign() {
+        return this.effectiveDir === "rtl" ? "Start" : "End";
     }
     /**
      * Returns the `logo` DOM ref.
@@ -676,514 +670,51 @@ let ShellBar = ShellBar_1 = class ShellBar extends UI5Element {
         return this.shadowRoot.querySelector(`*[data-ui5-stable="product-switch"]`);
     }
     /**
-     * Returns the `search` icon DOM ref.
-     * @returns The search icon DOM ref
+     * Returns the search button DOM reference.
      * @public
-     * @since 2.10.0
      */
     async getSearchButtonDomRef() {
         await renderFinished();
         return this.shadowRoot.querySelector(`*[data-ui5-stable="toggle-search"]`);
     }
-    _getContentInfo() {
-        return [
-            ...this.contentItemsSorted.map(item => {
-                return {
-                    hideOrder: parseInt(item.getAttribute("data-hide-order") || "0"),
-                    id: item.slot,
-                    classes: "ui5-shellbar-content-item",
-                    show: false,
-                };
-            }),
-        ];
-    }
-    /**
-     * Returns all items that will be placed in the right of the bar as icons / dom elements.
-     */
-    _getItemsInfo() {
-        const items = [
-            {
-                icon: search,
-                text: this._searchText,
-                classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
-                id: `${this._id}-item-${1}`,
-                press: this._handleSearchIconPress.bind(this),
-                show: !!this.searchField.length,
-                tooltip: this._searchText,
-            },
-            {
-                icon: da,
-                text: "Assistant",
-                classes: `${this.assistant.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-assistant-button`,
-                id: `${this._id}-assistant`,
-                show: !!this.assistant.length,
-                press: () => { },
-                tooltip: this.assistant.length ? (this.assistant[0].getAttribute("text") || this.assistant[0].getAttribute("title") || undefined) : undefined,
-            },
-            {
-                icon: bell,
-                title: this._notificationsText,
-                text: ShellBar_1.i18nBundle.getText(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}`,
-                show: this.showNotifications,
-                press: this._handleNotificationsPress.bind(this),
-                tooltip: this._notificationsText,
-            },
-            // sort feedback and help to always be last
-            ...this.items.sort((a, b) => {
-                const aIndex = PREDEFINED_PLACE_ACTIONS.indexOf(a.icon || "");
-                const bIndex = PREDEFINED_PLACE_ACTIONS.indexOf(b.icon || "");
-                return aIndex - bIndex;
-            }).map((item) => {
-                item._getRealDomRef = () => this.shadowRoot.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
-                // check if included for lean mode
-                const show = !!item.icon || false;
-                return {
-                    icon: item.icon,
-                    id: item._id,
-                    count: item.count || undefined,
-                    refItemid: item._id,
-                    text: item.text,
-                    classes: "ui5-shellbar-custom-item ui5-shellbar-button",
-                    show,
-                    press: this._handleCustomActionPress.bind(this),
-                    custom: true,
-                    title: item.title,
-                    stableDomRef: item.stableDomRef,
-                    tooltip: item.title || item.text,
-                    accessibilityAttributes: item.accessibilityAttributes,
-                };
-            }),
-            {
-                icon: 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}`,
-                press: this._handleOverflowPress.bind(this),
-                show: true,
-                tooltip: this._overflowText,
-            },
-            {
-                text: "Person",
-                classes: `${this.hasProfile ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-no-overflow-button ui5-shellbar-image-button ui5-shellbar-button`,
-                profile: true,
-                id: `${this._id}-item-${3}`,
-                show: this.hasProfile,
-                press: this._handleProfilePress.bind(this),
-                tooltip: this._profileText,
-            },
-            {
-                icon: grid,
-                text: this._productsText,
-                classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-no-overflow-button ui5-shellbar-button ui5-shellbar-image-button ui5-shellbar-button-product-switch`,
-                id: `${this._id}-item-${4}`,
-                show: this.showProductSwitch,
-                press: this._handleProductSwitchPress.bind(this),
-                tooltip: this._productsText,
-            },
-        ];
-        return items;
-    }
-    _updateItemsInfo(newItemsInfo) {
-        const isDifferent = JSON.stringify(this._itemsInfo) !== JSON.stringify(newItemsInfo);
-        if (isDifferent) {
-            this._itemsInfo = newItemsInfo;
-        }
-    }
-    _updateContentInfo(newContentInfo) {
-        const isDifferent = JSON.stringify(this._contentInfo) !== JSON.stringify(newContentInfo);
-        if (isDifferent) {
-            this._contentInfo = newContentInfo;
-            this._fireContentItemVisibilityChangeEvent();
-        }
-    }
-    _fireContentItemVisibilityChangeEvent() {
-        const hiddenByClass = this._contentInfo
-            .filter(item => item.classes.indexOf("ui5-shellbar-hidden-button") !== -1)
-            .map(item => item.id);
-        this.fireDecoratorEvent("content-item-visibility-change", {
-            items: this.contentItems.filter(item => hiddenByClass.includes(item.slot)),
-        });
-    }
-    _updateOverflowNotifications() {
-        const notificationsArr = [];
-        let overflowNotifications = null;
-        this._itemsInfo.forEach(item => {
-            if (item.count && item.classes.includes("ui5-shellbar-hidden-button")) {
-                notificationsArr.push(item.count);
-            }
-        });
-        if (notificationsArr.length === 1) {
-            overflowNotifications = notificationsArr[0];
-        }
-        else if (notificationsArr.length > 1) {
-            overflowNotifications = " ";
-        }
-        this._overflowNotifications = overflowNotifications;
-    }
-    _observeContentItems() {
-        if (this.hasMatchingContent) {
-            return;
-        }
-        this.contentItems.forEach(item => {
-            if (!this._observableContent.includes(item)) {
-                this.contentItemsObserver.observe(item, {
-                    characterData: false,
-                    childList: false,
-                    subtree: false,
-                    attributes: true,
-                    attributeFilter: ["data-hide-order"],
-                });
-            }
-        });
-        this._observableContent = this.contentItems;
-    }
-    _getOverflowPopover() {
-        return this.shadowRoot.querySelector(".ui5-shellbar-overflow-popover");
-    }
-    _getMenuPopover() {
-        return this.shadowRoot.querySelector(".ui5-shellbar-menu-popover");
-    }
-    isIconHidden(name) {
-        const itemInfo = this._itemsInfo.find(item => item.icon === name);
-        if (!itemInfo) {
-            return false;
-        }
-        return itemInfo.classes.indexOf("ui5-shellbar-hidden-button") !== -1;
-    }
-    get hasMatchingContent() {
-        if (this._observableContent.length !== this.contentItems.length) {
-            return false;
-        }
-        const observableContentSet = new WeakSet(this._observableContent);
-        return this.contentItems.every(item => observableContentSet.has(item));
-    }
-    get contentItemsSorted() {
-        return this.contentItems.toReversed().sort((a, b) => {
-            return parseInt(a.getAttribute("data-hide-order") || "0") - parseInt(b.getAttribute("data-hide-order") || "0");
-        });
-    }
-    get contentItemsWrappersSorted() {
-        return this.contentItemsSorted.map(item => this.shadowRoot.querySelector(`#${item.slot}`)).filter(item => item !== null);
-    }
-    get autoSearchField() {
-        const onFocus = document.activeElement === this.searchField[0];
-        const hasValue = this.searchField[0]?.value?.length > 0;
-        const disableSearchCollapse = this.disableSearchCollapse || onFocus || hasValue;
-        if (disableSearchCollapse) {
-            return false;
-        }
-        return this.showSearchField || this._autoRestoreSearchField;
-    }
-    get startContentInfoSorted() {
-        return this._contentInfo
-            .filter(item => this.startContent.find(contentItem => contentItem.slot === item.id))
-            .sort((a, b) => a.hideOrder - b.hideOrder);
-    }
-    get endContentInfoSorted() {
-        return this._contentInfo
-            .filter(item => this.endContent.find(contentItem => contentItem.slot === item.id))
-            .sort((a, b) => a.hideOrder - b.hideOrder);
+    _fireClickEvent(eventName, domRef) {
+        return domRef ? !this.fireDecoratorEvent(eventName, { targetRef: domRef }) : false;
     }
-    get showStartSeparator() {
-        return this.startContentInfoSorted.some(item => !item.classes.includes("ui5-shellbar-hidden-button"));
+    handleNotificationsClick() {
+        return this._fireClickEvent("notifications-click", this.notificationsDomRef);
     }
-    get showEndSeparator() {
-        return this.endContentInfoSorted.some(item => !item.classes.includes("ui5-shellbar-hidden-button"));
+    handleProfileClick() {
+        return this._fireClickEvent("profile-click", this.profileDomRef);
     }
-    shouldIncludeSeparator(itemInfo, contentInfo) {
-        // once the last item from the start/end content was hidden, the
-        // separator is "packed" with it in order to account for any next measurements
-        if (!itemInfo) {
-            return false;
-        }
-        const lastVisibleItem = contentInfo.at(-1);
-        return lastVisibleItem?.id === itemInfo.id && itemInfo.classes.indexOf("ui5-shellbar-hidden-button") > -1;
+    handleProductSwitchClick() {
+        return this._fireClickEvent("product-switch-click", this.productSwitchDomRef);
     }
-    get classes() {
-        return {
-            wrapper: {
-                "ui5-shellbar-root": true,
-                "ui5-shellbar-with-searchfield": this.hasSearchField,
-            },
-            button: {
-                "ui5-shellbar-menu-button--interactive": this.hasMenuItems,
-            },
-            notification: {
-                "ui5-shellbar-hidden-button": this.isIconHidden("bell"),
-            },
-            search: {
-                "ui5-shellbar-hidden-button": this.isIconHidden("search"),
-                "ui5-shellbar-search-toggle": true,
-            },
-            overflow: {
-                "ui5-shellbar-hidden-button": this._hiddenIcons.length === 0,
-            },
-            assistant: {
-                "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: isSelfCollapsibleSearch(this.search) ? {} : styles,
-        };
-    }
-    get customItemsInfo() {
-        return this._itemsInfo.filter(itemInfo => !!itemInfo.custom);
-    }
-    get hasLogo() {
-        return !!this.logo.length;
-    }
-    get showLogoInMenuButton() {
-        return this.hasLogo && (this.breakpointSize === "S");
-    }
-    get showTitleInMenuButton() {
-        return this.primaryTitle && !(this.showLogoInMenuButton);
-    }
-    get showMenuButton() {
-        return this.primaryTitle || this.showLogoInMenuButton;
-    }
-    get hasAssistant() {
-        return !!this.assistant.length;
-    }
-    get hasBranding() {
-        return !!this.branding.length;
-    }
-    get hasSearchField() {
-        return !!this.searchField.length;
-    }
-    get hasMidContent() {
-        return !!this.midContent.length;
-    }
-    get hasProfile() {
-        return !!this.profile.length;
-    }
-    get hasMenuItems() {
-        return this.menuItems.length > 0;
-    }
-    get imageBtnText() {
-        return getEffectiveAriaLabelText(this) || ShellBar_1.i18nBundle.getText(SHELLBAR_IMAGE_BTN);
-    }
-    get _shellbarText() {
-        return ShellBar_1.i18nBundle.getText(SHELLBAR_LABEL);
-    }
-    get _logoText() {
-        return this.accessibilityAttributes.logo?.name || ShellBar_1.i18nBundle.getText(SHELLBAR_LOGO);
-    }
-    get _notificationsText() {
-        return ShellBar_1.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationsCount || 0);
-    }
-    get _cancelBtnText() {
-        return ShellBar_1.i18nBundle.getText(SHELLBAR_CANCEL);
-    }
-    get _logoAreaText() {
-        const primaryTitle = this.primaryTitle ?? "";
-        const secondaryTitle = this.secondaryTitle ?? "";
-        return ShellBar_1.i18nBundle.getText(SHELLBAR_LOGO_AREA, primaryTitle, secondaryTitle);
-    }
-    get _contentItemsText() {
-        return this._enableContentAreaAccessibility ? ShellBar_1.i18nBundle.getText(SHELLBAR_ADDITIONAL_CONTEXT) : undefined;
-    }
-    get _searchFieldDescription() {
-        return ShellBar_1.i18nBundle.getText(SHELLBAR_SEARCHFIELD_DESCRIPTION);
-    }
-    get _contentItemsRole() {
-        if (this._enableContentAreaAccessibility) {
-            return "group";
-        }
-    }
-    get _enableContentAreaAccessibility() {
-        return this.contentItems.length > 1;
-    }
-    get contentItems() {
-        return [...this.startContent, ...this.endContent];
-    }
-    get startContent() {
-        // all items before the first spacer
-        const spacerIndex = this.content.findIndex(child => child.hasAttribute("ui5-shellbar-spacer"));
-        if (spacerIndex === -1) {
-            return this.content;
-        }
-        return this.content.slice(0, spacerIndex);
-    }
-    get endContent() {
-        // all items after the first spacer
-        const spacerIndex = this.content.findIndex(child => child.hasAttribute("ui5-shellbar-spacer"));
-        if (spacerIndex === -1) {
-            return [];
-        }
-        return this.content.slice(spacerIndex + 1);
-    }
-    get _rightChildRole() {
-        const items = this._getRightChildItems();
-        const visibleItems = items.filter(item => {
-            return this._isVisible(item);
-        });
-        if (visibleItems.length === 1) {
-            return;
-        }
-        return "toolbar";
-    }
-    get _searchFieldText() {
-        return ShellBar_1.i18nBundle.getText(SHELLBAR_SEARCH_FIELD);
-    }
-    get _searchBtnOpen() {
-        return ShellBar_1.i18nBundle.getText(SHELLBAR_SEARCH_BTN_OPEN);
-    }
-    get _productSwitchBtnText() {
-        return ShellBar_1.i18nBundle.getText(SHELLBAR_PRODUCT_SWITCH_BTN);
-    }
-    get _profileText() {
-        return this.accessibilityAttributes.profile?.name || ShellBar_1.i18nBundle.getText(SHELLBAR_PROFILE);
-    }
-    get _productsText() {
-        return ShellBar_1.i18nBundle.getText(SHELLBAR_PRODUCTS);
-    }
-    get _searchText() {
-        return ShellBar_1.i18nBundle.getText(SHELLBAR_SEARCH);
-    }
-    get _overflowText() {
-        return ShellBar_1.i18nBundle.getText(SHELLBAR_OVERFLOW);
-    }
-    get _brandingText() {
-        return this.accessibilityAttributes.branding?.name || this.primaryTitle;
-    }
-    get hasContentItems() {
-        return this.contentItems.length > 0;
-    }
-    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 searchToggle = this.shadowRoot.querySelector(".ui5-shellbar-search-toggle");
-        const contentItems = this.contentItemsWrappersSorted;
-        const firstContentItem = contentItems.pop();
-        const prioritizeContent = this.showSearchField && this.hasSearchField;
-        // order here is important for the responsive behavior, the items will be
-        // measured and hidden in the order they are returned until no overlap is detected
-        let itemsToHide = [];
-        if (prioritizeContent) {
-            // search field was toggled, the content items should make space for it
-            const overflowItems = [...items, assistant];
-            const visibleItems = overflowItems.filter(item => item && !item.classList.contains("ui5-shellbar-hidden-button"));
-            const hiddenItems = overflowItems.filter(item => item && item.classList.contains("ui5-shellbar-hidden-button"));
-            itemsToHide = [
-                ...hiddenItems,
-                ...contentItems,
-                firstContentItem,
-                ...visibleItems,
-            ];
-        }
-        else {
-            // search field is close, actions should go to the overflow first
-            itemsToHide = [
-                ...items.toReversed(),
-                assistant,
-                ...contentItems,
-                searchToggle,
-                firstContentItem,
-            ];
-        }
-        return itemsToHide.filter(Boolean);
-    }
-    get contentItemsHidden() {
-        return this.contentItemsWrappersSorted.filter(item => item.classList.contains("ui5-shellbar-hidden-button"));
-    }
-    get overflowWrapper() {
-        return this.shadowRoot.querySelector(".ui5-shellbar-overflow-container-right");
-    }
-    get overflowInner() {
-        return this.shadowRoot.querySelector(".ui5-shellbar-overflow-container-right-inner");
-    }
-    get overflowed() {
-        const wrapper = this.overflowWrapper;
-        const inner = this.overflowInner;
-        if (!wrapper || !inner) {
-            return false;
-        }
-        return inner.offsetWidth > wrapper.offsetWidth;
-    }
-    get accInfo() {
-        const overflowExpanded = this.accessibilityAttributes.overflow?.expanded;
-        return {
-            notifications: {
-                "title": this._notificationsText,
-                "accessibilityAttributes": {
-                    expanded: this.accessibilityAttributes.notifications?.expanded,
-                    hasPopup: this.accessibilityAttributes.notifications?.hasPopup,
-                },
-            },
-            profile: {
-                "title": this._profileText,
-                "accessibilityAttributes": {
-                    hasPopup: this.accessibilityAttributes.profile?.hasPopup,
-                    expanded: this.accessibilityAttributes.profile?.expanded,
-                },
-            },
-            products: {
-                "title": this._productsText,
-                "accessibilityAttributes": {
-                    hasPopup: this.accessibilityAttributes.product?.hasPopup,
-                    expanded: this.accessibilityAttributes.product?.expanded,
-                },
-            },
-            search: {
-                "title": this._searchText,
-                "accessibilityAttributes": {
-                    hasPopup: this.accessibilityAttributes.search?.hasPopup,
-                },
-            },
-            overflow: {
-                "title": this._overflowText,
-                "accessibilityAttributes": {
-                    hasPopup: this.accessibilityAttributes.overflow?.hasPopup || "menu",
-                    expanded: overflowExpanded === undefined ? this._overflowPopoverExpanded : overflowExpanded,
-                },
-            },
-            branding: {
-                "title": this._brandingText,
-                "accessibilityAttributes": {
-                    name: this.accessibilityAttributes.branding?.name,
-                },
-            },
-        };
-    }
-    get accLogoRole() {
-        return this.accessibilityAttributes.logo?.role || "link";
-    }
-    get isSBreakPoint() {
-        return this.breakpointSize === "S";
-    }
-    get hasSelfCollapsibleSearch() {
-        return isSelfCollapsibleSearch(this.search);
-    }
-    get search() {
-        return this.searchField.length ? this.searchField[0] : null;
+    getCSSVariable(cssVar) {
+        const styleSet = getComputedStyle(this.getDomRef());
+        return styleSet.getPropertyValue(getScopedVarName(cssVar));
     }
 };
 __decorate([
-    property({ type: Boolean })
-], ShellBar.prototype, "hideSearchButton", void 0);
+    slot()
+], ShellBar.prototype, "startButton", void 0);
 __decorate([
-    property({ type: Boolean })
-], ShellBar.prototype, "disableSearchCollapse", void 0);
+    slot()
+], ShellBar.prototype, "branding", void 0);
 __decorate([
-    property()
-], ShellBar.prototype, "primaryTitle", void 0);
+    slot({ type: HTMLElement, individualSlots: true })
+], ShellBar.prototype, "content", void 0);
 __decorate([
-    property()
-], ShellBar.prototype, "secondaryTitle", void 0);
+    slot({ type: HTMLElement })
+], ShellBar.prototype, "searchField", void 0);
+__decorate([
+    slot()
+], ShellBar.prototype, "assistant", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true, individualSlots: true })
+], ShellBar.prototype, "items", void 0);
+__decorate([
+    slot()
+], ShellBar.prototype, "profile", void 0);
 __decorate([
     property()
 ], ShellBar.prototype, "notificationsCount", void 0);
@@ -1202,36 +733,42 @@ __decorate([
 __decorate([
     property()
 ], ShellBar.prototype, "breakpointSize", void 0);
+__decorate([
+    property({ type: Object })
+], ShellBar.prototype, "actions", void 0);
 __decorate([
     property({ type: Boolean })
-], ShellBar.prototype, "withLogo", void 0);
+], ShellBar.prototype, "showOverflowButton", void 0);
 __decorate([
-    property({ type: Object })
-], ShellBar.prototype, "_itemsInfo", void 0);
+    property({ type: Boolean })
+], ShellBar.prototype, "overflowPopoverOpen", void 0);
 __decorate([
     property({ type: Object })
-], ShellBar.prototype, "_contentInfo", void 0);
+], ShellBar.prototype, "hiddenItemsIds", void 0);
 __decorate([
-    property({ type: Boolean, noAttribute: true })
-], ShellBar.prototype, "_menuPopoverExpanded", void 0);
+    property({ type: Boolean })
+], ShellBar.prototype, "showFullWidthSearch", void 0);
 __decorate([
-    property({ type: Boolean, noAttribute: true })
-], ShellBar.prototype, "_overflowPopoverExpanded", void 0);
+    query(".ui5-shellbar-spacer")
+], ShellBar.prototype, "spacer", void 0);
 __decorate([
-    property({ type: Boolean, noAttribute: true })
-], ShellBar.prototype, "showFullWidthSearch", void 0);
+    query(".ui5-shellbar-overflow-container")
+], ShellBar.prototype, "overflowOuter", void 0);
 __decorate([
-    slot()
-], ShellBar.prototype, "assistant", void 0);
+    query(".ui5-shellbar-overflow-container-inner")
+], ShellBar.prototype, "overflowInner", void 0);
 __decorate([
-    slot()
-], ShellBar.prototype, "branding", void 0);
+    property({ type: Boolean })
+], ShellBar.prototype, "hideSearchButton", void 0);
 __decorate([
-    slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
-], ShellBar.prototype, "items", void 0);
+    property({ type: Boolean })
+], ShellBar.prototype, "disableSearchCollapse", void 0);
 __decorate([
-    slot()
-], ShellBar.prototype, "profile", void 0);
+    property()
+], ShellBar.prototype, "primaryTitle", void 0);
+__decorate([
+    property()
+], ShellBar.prototype, "secondaryTitle", void 0);
 __decorate([
     slot()
 ], ShellBar.prototype, "logo", void 0);
@@ -1239,39 +776,33 @@ __decorate([
     slot()
 ], ShellBar.prototype, "menuItems", void 0);
 __decorate([
-    slot({
-        type: HTMLElement,
-        invalidateOnChildChange: true,
-    })
-], ShellBar.prototype, "searchField", void 0);
-__decorate([
-    slot()
-], ShellBar.prototype, "startButton", void 0);
+    property({ type: Boolean })
+], ShellBar.prototype, "menuPopoverOpen", void 0);
 __decorate([
     slot()
 ], ShellBar.prototype, "midContent", void 0);
-__decorate([
-    slot({ type: HTMLElement, individualSlots: true })
-], ShellBar.prototype, "content", void 0);
 __decorate([
     i18n("@ui5/webcomponents-fiori")
 ], ShellBar, "i18nBundle", void 0);
 ShellBar = ShellBar_1 = __decorate([
     customElement({
         tag: "ui5-shellbar",
-        fastNavigation: true,
-        languageAware: true,
+        styles: [shellBarStyles, shellBarLegacyStyles, ShellBarPopoverCss],
         renderer: jsxRenderer,
         template: ShellBarTemplate,
-        styles: [shellBarStyles, ShellBarPopoverCss],
+        fastNavigation: true,
+        languageAware: true,
         dependencies: [
-            Button,
             Icon,
             List,
+            Button,
+            ButtonBadge,
             Popover,
+            ShellBarSpacer,
+            ShellBarItem,
             ListItemStandard,
+            // legacy dependencies
             Menu,
-            ButtonBadge,
         ],
     })
     /**
@@ -1379,12 +910,7 @@ ShellBar = ShellBar_1 = __decorate([
         bubbles: true,
     })
 ], ShellBar);
-const isSelfCollapsibleSearch = (searchField) => {
-    if (searchField) {
-        return "collapsed" in searchField && "open" in searchField;
-    }
-    return false;
-};
 ShellBar.define();
 export default ShellBar;
+export { ShellBarActions, ShellBarActionsSelectors, };
 //# sourceMappingURL=ShellBar.js.map