feat(ui5-shellbar): enhance responsive behaviour for custom branding

[NakataCode]

Summary

⚠️ This is a POC.

The ShellBar previously hid the product identifier regardless of available space. Customers (e.g. Bayer) need the identifier visible as long as possible. This POC replaces that approach with a fully space-aware overflow loop that progressively hides branding elements only when there is no other option.

Overflow order

Actions (rightmost first) → content items → search button → branding stacks (3500) → branding identifier (4000) → branding logo (5000).

The logo is always the last element hidden.

Stacked mode (new)

When a long product identifier (natural width) causes overflow, a new virtual branding-stacked hidable item (priority 3500) triggers column layout — logo on top, title below — before the identifier is moved to overflow. Stacking is driven by toggleAttribute("_stacked") on the branding host element (non-reactive) from inside the overflow loop. A synchronous layout flush (offsetWidth read) forces the browser to reflect the new width before the overflow loop continues measuring.

Branding in overflow popover (new)

When the identifier or logo is hidden, a branding entry appears at the top of the overflow popover (order: -1, always first). It renders only the hidden parts — logo as <img>, identifier as text following it. Clicking fires brandingEl._fireClick() and closes the popover. The aria-label is "<title> Home", falling back for logo-only branding.

Title wrapping

-webkit-line-clamp: 2 replaces white-space: nowrap + text-overflow: ellipsis, allowing the title to wrap to two lines before stacking kicks in. Font changed from --_ui5_shellbar_menu_button_title_font_size to --sapFontHeader6Size per the spec token.

Content slot priority (new)

• data-hide-order="N": explicit numeric priority — these hide first. Items without it default to reverse insertion order (last added hides first).
• data-never-hide: item is never removed from the DOM but is still reported in hiddenItemsIds and fires hide events, so products can show a compact alternative via an event handler.

Branding DOM position

The branding area div was previously rendered outside the overflow container, making it invisible to the overflow loop's offsetWidth measurement. It is now the first child inside .ui5-shellbar-overflow-inner, so hiding the identifier or logo actually reduces overflowInner.offsetWidth.

Actions alignment

justify-content: end removed from the inner overflow container. margin-inline-end: auto added to the branding element to push actions to the right while keeping branding left-aligned as a natural flex child.

Removed

• _isSBreakPoint property on ShellBarBranding and the sync code in ShellBar.onAfterRendering that set it.
• ResizeObserver-based _updateStackedState / _observeTitleSize / onEnterDOM / onExitDOM / onAfterRendering from ShellBarBranding. Stacking is now fully controlled externally by the overflow loop via non-reactive host attributes (_stacked, _identifier-hidden, _logo-hidden, _measure-title-hidden, _measure-logo-hidden).

Test page

Added ShellBarBranding.html with 12 spec scenarios covering: basic branding, branding + actions, long title stacking, content items, full cascade, badge behaviour, overflow popover, logo-only, and profile/product-switch always-visible cases. Includes a scenario reference table.

No Cypress tests written — this is a POC branch

[sap-ui5-webcomponents-release]

🚀 Deployed on https://pr-14015--ui5-webcomponents-preview.netlify.app