= {
+ [ShellBarV2Actions.Search]: 0,
+ [ShellBarV2Actions.Notifications]: 1,
+ [ShellBarV2Actions.Assistant]: 2,
+ };
+
+ const hiddenActions = actions.filter(action => hiddenItemsIds.includes(action.id));
+ hiddenActions.forEach(action => {
+ result.push({
+ type: "action",
+ id: action.id,
+ data: action,
+ order: actionOrder[action.id] ?? 0,
+ });
+ });
+
+ return result.sort((a, b) => a.order - b.order);
+ }
+}
+
+export default ShellBarV2Overflow;
+export type {
+ ShellBarV2HidableItem,
+ ShellBarV2OverflowParams,
+ ShellBarV2OverflowResult,
+ ShellBarV2OverflowItem,
+};
diff --git a/packages/fiori/src/shellbarv2/ShellBarSearch.ts b/packages/fiori/src/shellbarv2/ShellBarSearch.ts
new file mode 100644
index 000000000000..2ae29bb62eb3
--- /dev/null
+++ b/packages/fiori/src/shellbarv2/ShellBarSearch.ts
@@ -0,0 +1,184 @@
+import { isPhone } from "@ui5/webcomponents-base";
+import type { IShellBarSearchField } from "../ShellBarV2.js";
+import type { IShellBarSearchController } from "./IShellBarSearchController.js";
+
+interface ShellBarV2SearchConstructorParams {
+ getOverflowed: () => boolean;
+ getSearchState: () => boolean;
+ setSearchState: (expanded: boolean) => void;
+ getSearchField: () => IShellBarSearchField | null;
+ getCSSVariable: (variable: string) => string;
+}
+
+/**
+ * Search controller for self-collapsible search (ui5-shellbar-search).
+ * Handles search fields with collapsed/open properties and ui5-open/close/search events.
+ */
+class ShellBarV2Search implements IShellBarSearchController {
+ static CSS_VARIABLE = "--_ui5_shellbar_search_field_width";
+ static FALLBACK_WIDTH = 400;
+
+ private onSearchBound = this.onSearch.bind(this);
+ private onSearchOpenBound = this.onSearchOpen.bind(this);
+ private onSearchCloseBound = this.onSearchClose.bind(this);
+
+ private getOverflowed: () => boolean;
+ private getSearchField: () => IShellBarSearchField | null;
+ private getSearchState: () => boolean;
+ private setSearchState: (expanded: boolean) => void;
+ private getCSSVariable: (variable: string) => string;
+ private initialRender = true;
+
+ constructor({
+ getOverflowed,
+ setSearchState,
+ getSearchField,
+ getSearchState,
+ getCSSVariable,
+ }: ShellBarV2SearchConstructorParams) {
+ this.getOverflowed = getOverflowed;
+ this.getCSSVariable = getCSSVariable;
+ this.getSearchField = getSearchField;
+ this.getSearchState = getSearchState;
+ this.setSearchState = setSearchState;
+ }
+
+ subscribe(searchField: HTMLElement | null = this.getSearchField()) {
+ if (!searchField) {
+ return;
+ }
+ searchField.addEventListener("ui5-open", this.onSearchOpenBound);
+ searchField.addEventListener("ui5-close", this.onSearchCloseBound);
+ searchField.addEventListener("ui5-search", this.onSearchBound);
+ }
+
+ unsubscribe(searchField: HTMLElement | null = this.getSearchField()) {
+ if (!searchField) {
+ return;
+ }
+ searchField.removeEventListener("ui5-open", this.onSearchOpenBound);
+ searchField.removeEventListener("ui5-close", this.onSearchCloseBound);
+ searchField.removeEventListener("ui5-search", this.onSearchBound);
+ }
+
+ /**
+ * Auto-collapse/restore search field based on available space.
+ * Delegates decision logic to SearchController.
+ */
+ autoManageSearchState(hiddenItems: number, availableSpace: number) {
+ if (!this.hasSearchField) {
+ return;
+ }
+
+ // Get search field min width from CSS variable
+ const searchFieldWidth = this.getSearchFieldWidth();
+
+ const searchHasFocus = document.activeElement === this.getSearchField();
+ const searchHasValue = !!this.getSearchField()?.value;
+
+ // On initial load, allow search to collapse even if it would trigger full-screen mode.
+ // This prevents search from showing in full-screen when page loads on small screens.
+ // After initial render, prevent collapse in full-screen mode during resize.
+ const inFullScreen = !this.initialRender && this.shouldShowFullScreen();
+ const preventCollapse = searchHasFocus || searchHasValue || inFullScreen;
+
+ if (hiddenItems > 0 && !preventCollapse) {
+ this.setSearchState(false);
+ } else if (availableSpace + this.getSearchButtonSize() > searchFieldWidth) {
+ this.setSearchState(true);
+ }
+
+ this.initialRender = false;
+ }
+
+ /**
+ * Applies the show-search-field state to the search field.
+ */
+ syncShowSearchFieldState() {
+ const search = this.getSearchField();
+ if (!search) {
+ return;
+ }
+ if (isPhone()) {
+ search.open = this.getSearchState();
+ } else {
+ search.collapsed = !this.getSearchState();
+ }
+ }
+
+ /**
+ * Determines if full-screen search should be shown.
+ * Full-screen search activates when overflow happens AND search is visible.
+ */
+ shouldShowFullScreen(): boolean {
+ return this.getOverflowed() && this.getSearchState();
+ }
+
+ private onSearchOpen(e: Event) {
+ if (e.target !== this.getSearchField()) {
+ this.unsubscribe(e.target as HTMLElement);
+ return;
+ }
+ if (isPhone()) {
+ this.setSearchState(true);
+ }
+ }
+
+ private onSearchClose(e: Event) {
+ if (e.target !== this.getSearchField()) {
+ this.unsubscribe(e.target as HTMLElement);
+ return;
+ }
+ if (isPhone()) {
+ this.setSearchState(false);
+ }
+ }
+
+ private onSearch(e: Event) {
+ if (e.target !== this.getSearchField()) {
+ this.unsubscribe(e.target as HTMLElement);
+ return;
+ }
+
+ // On mobile or if has value, don't toggle
+ if (isPhone() || (this.getSearchField()?.value && this.getSearchState())) {
+ return;
+ }
+
+ this.setSearchState(!this.getSearchState());
+ }
+
+ /**
+ * Gets the minimum width needed for search field from CSS variable.
+ */
+ private getSearchFieldWidth(): number {
+ const width = this.getCSSVariable(ShellBarV2Search.CSS_VARIABLE);
+ if (!width) {
+ return ShellBarV2Search.FALLBACK_WIDTH;
+ }
+ // Convert rem to px
+ if (width.endsWith("rem")) {
+ const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+ return parseFloat(width) * fontSize;
+ }
+ return parseFloat(width);
+ }
+
+ get hasSearchField() {
+ return !!this.getSearchField();
+ }
+
+ /**
+ * Gets the size of the search button.
+ * If the search field is visible, the size is 0.
+ * Otherwise, it is the width of the search field (just a button in collapsed state).
+ */
+ private getSearchButtonSize(): number {
+ return this.getSearchState() ? 0 : this.getSearchField()?.getBoundingClientRect().width || 0;
+ }
+}
+
+export default ShellBarV2Search;
+export type {
+ ShellBarV2SearchConstructorParams,
+};
diff --git a/packages/fiori/src/shellbarv2/ShellBarSearchLegacy.ts b/packages/fiori/src/shellbarv2/ShellBarSearchLegacy.ts
new file mode 100644
index 000000000000..d19ababa8fbb
--- /dev/null
+++ b/packages/fiori/src/shellbarv2/ShellBarSearchLegacy.ts
@@ -0,0 +1,163 @@
+import type { IShellBarSearchController } from "./IShellBarSearchController.js";
+
+interface ShellBarV2SearchLegacyConstructorParams {
+ getOverflowed: () => boolean;
+ getSearchState: () => boolean;
+ setSearchState: (expanded: boolean) => void;
+ getSearchField: () => HTMLElement | null;
+ getCSSVariable: (variable: string) => string;
+ getDisableSearchCollapse: () => boolean;
+}
+
+/**
+ * Search controller for legacy search fields (ui5-input, custom div).
+ * Handles search fields that don't have collapsed/open properties.
+ * Supports disableSearchCollapse for preventing auto-collapse.
+ */
+class ShellBarV2SearchLegacy implements IShellBarSearchController {
+ static CSS_VARIABLE = "--_ui5_shellbar_search_field_width";
+ static FALLBACK_WIDTH = 400;
+
+ private getOverflowed: () => boolean;
+ private getSearchField: () => HTMLElement | null;
+ private getSearchState: () => boolean;
+ private setSearchState: (expanded: boolean) => void;
+ private getCSSVariable: (variable: string) => string;
+ private getDisableSearchCollapse: () => boolean;
+ private initialRender = true;
+
+ constructor({
+ getOverflowed,
+ setSearchState,
+ getSearchField,
+ getSearchState,
+ getCSSVariable,
+ getDisableSearchCollapse,
+ }: ShellBarV2SearchLegacyConstructorParams) {
+ this.getOverflowed = getOverflowed;
+ this.getCSSVariable = getCSSVariable;
+ this.getSearchField = getSearchField;
+ this.getSearchState = getSearchState;
+ this.setSearchState = setSearchState;
+ this.getDisableSearchCollapse = getDisableSearchCollapse;
+ }
+
+ /**
+ * No-op for legacy search - legacy fields don't emit ui5-open/close/search events.
+ */
+ subscribe(): void {
+ // No events to subscribe to for legacy search fields
+ }
+
+ /**
+ * No-op for legacy search - no event listeners to clean up.
+ */
+ unsubscribe(): void {
+ // No events to unsubscribe from
+ }
+
+ /**
+ * Auto-collapse/restore search field based on available space.
+ * Respects disableSearchCollapse flag, focus state, and field value.
+ */
+ autoManageSearchState(hiddenItems: number, availableSpace: number): void {
+ if (!this.hasSearchField) {
+ return;
+ }
+
+ // Check if auto-collapse is disabled
+ if (this.getDisableSearchCollapse()) {
+ return;
+ }
+
+ const searchFieldWidth = this.getSearchFieldWidth();
+
+ // Check focus and value to prevent collapse
+ const searchField = this.getSearchField();
+ const searchHasFocus = searchField?.contains(document.activeElement) || false;
+ const searchHasValue = this.hasValue(searchField);
+
+ // On initial load, allow search to collapse even if it would trigger full-screen mode.
+ // This prevents search from showing in full-screen when page loads on small screens.
+ // After initial render, prevent collapse in full-screen mode during resize.
+ const inFullScreen = !this.initialRender && this.shouldShowFullScreen();
+ const preventCollapse = searchHasFocus || searchHasValue || inFullScreen;
+
+ if (hiddenItems > 0 && !preventCollapse) {
+ this.setSearchState(false);
+ } else if (availableSpace + this.getSearchButtonSize() > searchFieldWidth) {
+ this.setSearchState(true);
+ }
+
+ this.initialRender = false;
+ }
+
+ /**
+ * No-op for legacy search - legacy fields don't have collapsed/open properties.
+ */
+ syncShowSearchFieldState(): void {
+ // Legacy search fields don't have collapsed/open properties to sync
+ }
+
+ /**
+ * Determines if full-screen search should be shown.
+ * Full-screen search activates when overflow happens AND search is visible.
+ */
+ shouldShowFullScreen(): boolean {
+ return this.getOverflowed() && this.getSearchState();
+ }
+
+ /**
+ * Get value from various field types.
+ * Supports ui5-input (value property) and custom div (nested input element).
+ */
+ private hasValue(searchField: HTMLElement | null): boolean {
+ if (!searchField) {
+ return false;
+ }
+
+ // ui5-input or similar components with value property
+ if ("value" in searchField) {
+ return !!(searchField as any).value;
+ }
+
+ // Custom div - find input inside
+ const input = searchField.querySelector("input");
+ return input ? !!input.value : false;
+ }
+
+ /**
+ * Get minimum width needed for search field from CSS variable.
+ */
+ private getSearchFieldWidth(): number {
+ const width = this.getCSSVariable(ShellBarV2SearchLegacy.CSS_VARIABLE);
+ if (!width) {
+ return ShellBarV2SearchLegacy.FALLBACK_WIDTH;
+ }
+
+ // Convert rem to px
+ if (width.endsWith("rem")) {
+ const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+ return parseFloat(width) * fontSize;
+ }
+
+ return parseFloat(width);
+ }
+
+ private get hasSearchField(): boolean {
+ return !!this.getSearchField();
+ }
+
+ /**
+ * Get search button size for overflow calculation.
+ * Returns 0 if search is expanded, otherwise returns button width.
+ */
+ private getSearchButtonSize(): number {
+ return this.getSearchState() ? 0 : this.getSearchField()?.getBoundingClientRect().width || 0;
+ }
+}
+
+export default ShellBarV2SearchLegacy;
+export type {
+ ShellBarV2SearchLegacyConstructorParams,
+};
diff --git a/packages/fiori/src/shellbarv2/templates/ShellBarLegacyTemplate.tsx b/packages/fiori/src/shellbarv2/templates/ShellBarLegacyTemplate.tsx
new file mode 100644
index 000000000000..efd5931c3847
--- /dev/null
+++ b/packages/fiori/src/shellbarv2/templates/ShellBarLegacyTemplate.tsx
@@ -0,0 +1,190 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import type ShellBarV2 from "../../ShellBarV2.js";
+
+function ShellBarV2LegacyBrandingArea(this: ShellBarV2) {
+ const legacy = this.legacyAdaptor;
+ if (!legacy) {
+ return null;
+ }
+
+ return (
+ <>
+ {legacy.hasMenuItems && ShellBarV2InteractiveMenuButton.call(this)}
+ {legacy.hasMenuItems && ShellBarV2LegacySecondaryTitle.call(this)}
+ {!legacy.hasMenuItems && ShellBarV2LegacyTitleArea.call(this)}
+
+ {/* Menu Popover (legacy) */}
+ {ShellBarV2MenuPopover.call(this)}
+
+ );
+}
+
+function ShellBarV2LegacyTitleArea(this: ShellBarV2) {
+ const legacy = this.legacyAdaptor;
+ if (!legacy) {
+ return null;
+ }
+
+ return (
+ <>
+ {!!(legacy.isSBreakPoint && legacy.hasLogo) && ShellBarV2SingleLogo.call(this)}
+ {!legacy.isSBreakPoint && (legacy.hasLogo || legacy.primaryTitle) && (
+ <>
+ {ShellBarV2CombinedLogo.call(this)}
+ {legacy.hasSecondaryTitle && legacy.hasPrimaryTitle && ShellBarV2LegacySecondaryTitle.call(this)}
+
+ )}
+
+ );
+}
+
+/**
+ * Renders interactive menu button for non-S breakpoints.
+ * Shows primaryTitle with arrow, opens menu popover.
+ */
+function ShellBarV2InteractiveMenuButton(this: ShellBarV2) {
+ const legacy = this.legacyAdaptor;
+ if (!legacy) {
+ return null;
+ }
+
+ return (
+ <>
+ {!legacy.showLogoInMenuButton && legacy.hasLogo && ShellBarV2SingleLogo.call(this)}
+ {legacy.showTitleInMenuButton && {legacy.primaryTitle}
}
+ {legacy.showMenuButton && (
+
+ )}
+
+ );
+}
+
+/**
+ * Renders single logo on S breakpoint when no menu items.
+ * Used on S breakpoint when no menu items and no branding slot.
+ */
+function ShellBarV2SingleLogo(this: ShellBarV2) {
+ const legacy = this.legacyAdaptor;
+ if (!legacy) {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+}
+
+function ShellBarV2CombinedLogo(this: ShellBarV2) {
+ const legacy = this.legacyAdaptor;
+ if (!legacy) {
+ return null;
+ }
+
+ return (
+
+ {legacy.hasLogo && (
+
+
+
+ )}
+
+ {legacy.primaryTitle && (
+
+ {legacy.primaryTitle}
+
+ )}
+
+
+ {this.secondaryTitle}
+
+ );
+}
+
+/**
+ * Renders the menu popover.
+ * Contains the list of menu items.
+ */
+function ShellBarV2MenuPopover(this: ShellBarV2) {
+ const legacy = this.legacyAdaptor;
+ if (!legacy || !legacy.hasMenuItems) {
+ return null;
+ }
+
+ return (
+
+ );
+}
+
+export {
+ ShellBarV2SingleLogo,
+ ShellBarV2MenuPopover,
+ ShellBarV2LegacyTitleArea,
+ ShellBarV2LegacyBrandingArea,
+ ShellBarV2LegacySecondaryTitle,
+ ShellBarV2InteractiveMenuButton,
+};
diff --git a/packages/fiori/src/shellbarv2/templates/ShellBarSearchLegacyTemplate.tsx b/packages/fiori/src/shellbarv2/templates/ShellBarSearchLegacyTemplate.tsx
new file mode 100644
index 000000000000..d6e5312c4a59
--- /dev/null
+++ b/packages/fiori/src/shellbarv2/templates/ShellBarSearchLegacyTemplate.tsx
@@ -0,0 +1,61 @@
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import type ShellBarV2 from "../../ShellBarV2.js";
+
+function ShellBarV2SearchField(this: ShellBarV2) {
+ return (
+ // .ui5-shellbar-search-field-area is used to measure the width of
+ // the search field. It must be present even if the search is in full-width mode.
+
+ {this.showSearchField && !this.showFullWidthSearch && (
+
+
+
+ )}
+
+ {!this.showFullWidthSearch && (
+
+ )}
+
+ );
+}
+
+function ShellBarV2SearchFieldFullWidth(this: ShellBarV2) {
+ return (
+
+ );
+}
+
+export {
+ ShellBarV2SearchField,
+ ShellBarV2SearchFieldFullWidth,
+};
diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css
index caac5c89735f..8b1431ad6df2 100644
--- a/packages/fiori/src/themes/NavigationLayout.css
+++ b/packages/fiori/src/themes/NavigationLayout.css
@@ -59,6 +59,7 @@
transform: translateX(100%);
}
-:host([has-side-navigation]) ::slotted([ui5-shellbar][slot="header"]) {
+:host([has-side-navigation]) ::slotted([ui5-shellbar][slot="header"]),
+:host([has-side-navigation]) ::slotted([ui5-shellbar-v2][slot="header"]) {
padding-inline: 0.875rem 1rem;
}
diff --git a/packages/fiori/src/themes/ShellBarV2.css b/packages/fiori/src/themes/ShellBarV2.css
new file mode 100644
index 000000000000..f45de2c2256b
--- /dev/null
+++ b/packages/fiori/src/themes/ShellBarV2.css
@@ -0,0 +1,353 @@
+@import "./InvisibleTextStyles.css";
+@import "./ShellBarV2SearchLegacy.css";
+
+/* ============================================================================
+ HOST & CSS VARIABLES
+ ============================================================================ */
+
+:host(:not([hidden])) {
+ display: inline-block;
+ width: 100%;
+ max-width: 100%;
+ background: var(--sapShellColor);
+ box-sizing: border-box;
+
+ /* CSS variable overrides for ui5-button */
+ --_ui5_button_base_height: var(--sapElement_Height);
+ --_ui5_button_base_padding: 0.5625rem;
+ --_ui5_button_base_min_width: 2.25rem;
+ --_ui5-button-badge-diameter: 0.75rem;
+
+ /* ShellBar-specific variables */
+ --_ui5-shellbar_separator-color: var(--sapGroup_ContentBorderColor);
+ --_ui5-shellbar-separator-height: 2rem;
+ --_ui5_shellbar_search_field_width: 25rem;
+
+ --ui5_shellbar_gap: 0.5rem;
+}
+
+/* ============================================================================
+ ROOT CONTAINER
+ ============================================================================ */
+
+.ui5-shellbar-root {
+ display: flex;
+ align-items: center;
+ height: var(--_ui5_shellbar_root_height);
+ box-shadow: inset 0 -0.0625rem var(--sapShell_BorderColor);
+ position: relative;
+ font-size: var(--sapFontSize);
+ font-weight: normal;
+}
+
+/* ============================================================================
+ SLOTTED BUTTONS (General Styles) Assistant and Start Button slots
+ ============================================================================ */
+
+::slotted([ui5-button]:not([slot^="content"])),
+::slotted([ui5-toggle-button]:not([slot^="content"])) {
+ height: 2.25rem;
+ width: 2.25rem;
+ padding: 0;
+ border: 0.0625rem solid var(--sapButton_Lite_BorderColor);
+ background: var(--sapButton_Lite_Background);
+ color: var(--sapShell_TextColor);
+ box-sizing: border-box;
+ cursor: pointer;
+ border-radius: var(--_ui5_shellbar_button_border_radius);
+ font-weight: bold;
+}
+
+/* Button States - Hover */
+::slotted([ui5-button]:not([slot^="content"]):hover),
+::slotted([ui5-toggle-button]:not([slot^="content"]):hover) {
+ background: var(--sapShell_Hover_Background);
+ border-color: var(--sapButton_Lite_Hover_BorderColor);
+ color: var(--sapShell_TextColor);
+}
+
+/* Button States - Active */
+::slotted([ui5-button]:not([slot^="content"])[active]),
+::slotted([ui5-toggle-button]:not([slot^="content"])[active]) {
+ background: var(--sapShell_Active_Background);
+ border-color: var(--sapButton_Lite_Active_BorderColor);
+ color: var(--_ui5_shellbar_button_active_color);
+}
+
+/* Button States - Focus */
+::slotted([ui5-button]:not([slot^="content"])),
+::slotted([ui5-toggle-button]:not([slot^="content"])) {
+ --_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border);
+}
+
+/* ============================================================================
+ ACTION BUTTONS (Items & Internal Actions)
+ ============================================================================ */
+
+.ui5-shellbar-action-button {
+ color: var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-action-button:hover {
+ color: var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-action-button[active] {
+ color: var(--_ui5_shellbar_button_active_color);
+}
+
+::slotted([ui5-toggle-button][slot="assistant"]) {
+ color: var(--sapShell_TextColor);
+}
+
+::slotted([ui5-toggle-button][slot="assistant"]:hover) {
+ color: var(--sapShell_TextColor);
+}
+
+::slotted([ui5-toggle-button][slot="assistant"][active]) {
+ color: var(--_ui5_shellbar_button_active_color);
+}
+
+/* ============================================================================
+ START AREA (Start Button, Branding)
+ ============================================================================ */
+
+.ui5-shellbar-start-button {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+}
+
+.ui5-shellbar-branding-area {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+}
+
+/* ============================================================================
+ OVERFLOW CONTAINER
+ ============================================================================ */
+
+.ui5-shellbar-overflow-container {
+ /* makes the container grow on the left side thus preventing search from flickering */
+ flex-direction: row-reverse;
+ height: 100%;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ min-width: 0;
+ overflow: hidden;
+ position: relative;
+}
+
+.ui5-shellbar-overflow-container-inner {
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ flex-shrink: 0;
+ min-width: 100%;
+}
+
+/* ============================================================================
+ SEARCH AREA
+ ============================================================================ */
+
+.ui5-shellbar-search-field-area {
+ flex: 0 1 auto;
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+ /* goes to the most right when no content is present */
+}
+
+:host([show-search-field]) ::slotted([slot="searchField"]),
+/* Search field displays in full mode if there's not enough space in bar.
+Once in full screen mode the search field is rendered in another DOM.
+To account for correct measurements in overflow, we should keep the min width
+of the search field container in the bar even when the search is in full mode. */
+:host([show-full-width-search]) .ui5-shellbar-search-field-area {
+ min-width: var(--_ui5_shellbar_search_field_width);
+}
+
+/* ============================================================================
+ CONTENT AREA (Items, Spacer, Separator)
+ ============================================================================ */
+
+.ui5-shellbar-content-area {
+ flex-grow: 1;
+ display: flex;
+ align-items: center;
+}
+
+.ui5-shellbar-content-item {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+}
+
+.ui5-shellbar-spacer {
+ flex-grow: 1;
+ height: 1px;
+ flex-basis: 1rem;
+ flex-shrink: 1;
+}
+
+.ui5-shellbar-separator {
+ flex-grow: 0;
+ flex-shrink: 0;
+ height: var(--_ui5-shellbar-separator-height);
+ width: 1px;
+ background-color: var(--_ui5-shellbar_separator-color);
+}
+
+/* ============================================================================
+ CUSTOM ITEMS
+ ============================================================================ */
+
+.ui5-shellbar-custom-item {
+ /* having width here is important to ensure item can be measured even when it is in overflow */
+ width: 2.25rem;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+}
+
+.ui5-shellbar-custom-item.ui5-shellbar-hidden {
+ display: none;
+}
+
+
+/* ============================================================================
+ ACTION BUTTONS (Notifications, Assistant, Profile)
+ ============================================================================ */
+
+.ui5-shellbar-action-button {
+ white-space: initial;
+ overflow: initial;
+ text-overflow: initial;
+ line-height: inherit;
+ letter-spacing: inherit;
+ word-spacing: inherit;
+ width: 2.25rem;
+ box-sizing: border-box;
+}
+
+.ui5-shellbar-image-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 2.25rem;
+ height: 2.25rem;
+ min-width: auto;
+ box-sizing: border-box;
+ --_ui5_button_focused_border_radius: var(--_ui5_shellbar_image_button_border_radius);
+ border-radius: var(--_ui5_shellbar_image_button_border_radius);
+}
+
+.ui5-shellbar-assistant-button {
+ display: flex;
+ align-items: center;
+}
+
+::slotted([ui5-toggle-button][slot="assistant"]) {
+ margin-inline-start: 0;
+}
+
+::slotted([ui5-toggle-button][slot="assistant"][pressed]),
+::slotted([ui5-toggle-button][slot="assistant"][pressed]:hover:not([active])) {
+ color: var(--sapShell_Assistant_ForegroundColor);
+}
+
+slot[name="profile"] {
+ min-width: 0;
+}
+
+::slotted([ui5-avatar][slot="profile"]) {
+ display: block;
+ width: 2rem;
+ height: 2rem;
+ min-width: 0;
+ min-height: 2rem;
+ font-size: var(--_ui5_avatar_fontsize_XS);
+ font-weight: normal;
+}
+
+/* ============================================================================
+ FULL-SCREEN SEARCH OVERLAY
+ ============================================================================ */
+
+.ui5-shellbar-search-full-width-wrapper {
+ position: absolute;
+ bottom: 0.0625rem;
+ left: 0;
+ background: var(--sapShellColor);
+ height: 100%;
+ width: 100%;
+ z-index: 1001;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 0 1rem;
+}
+
+.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
+ height: 2.25rem;
+ width: 100%;
+ flex: 1;
+}
+
+.ui5-shellbar-search-full-width-wrapper ::slotted([ui5-shellbar-search]) {
+ max-width: unset;
+ width: 100%;
+}
+
+/* ============================================================================
+ BREAKPOINTS
+ ============================================================================ */
+
+/* Responsive padding per breakpoint */
+:host([breakpoint-size="S"]) {
+ padding: 0 1rem;
+}
+
+:host([breakpoint-size="M"]) {
+ padding: 0 2rem;
+}
+
+:host([breakpoint-size="L"]) {
+ padding: 0 2rem;
+}
+
+:host([breakpoint-size="XL"]) {
+ padding: 0 3rem;
+}
+
+:host([breakpoint-size="XXL"]) {
+ padding: 0 3rem;
+}
+
+/* Search overlay padding per breakpoint */
+:host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
+ padding: 0 1rem;
+}
+
+:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
+ padding: 0 2rem;
+}
+
+/* ============================================================================
+ Utilities (Keep these at the end of the file to avoid specificity issues)
+ ============================================================================ */
+
+.ui5-shellbar-gap-start {
+ margin-inline-start: var(--ui5_shellbar_gap);
+}
+
+.ui5-shellbar-gap-end {
+ margin-inline-end: var(--ui5_shellbar_gap);
+}
+
+.ui5-shellbar-hidden {
+ display: none !important;
+}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/ShellBarV2Item.css b/packages/fiori/src/themes/ShellBarV2Item.css
new file mode 100644
index 000000000000..eb14a6694e4d
--- /dev/null
+++ b/packages/fiori/src/themes/ShellBarV2Item.css
@@ -0,0 +1,42 @@
+/* ============================================================================
+ ACTION BUTTON STYLING
+ ============================================================================ */
+
+.ui5-shellbar-action-button {
+ width: 2.25rem;
+ color: var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-action-button:hover {
+ color: var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-action-button[active] {
+ color: var(--_ui5_shellbar_button_active_color);
+}
+
+[ui5-li]:after {
+ position: relative;
+ width: fit-content;
+ height: 1rem;
+ min-width: 1rem;
+ background: var(--sapContent_BadgeBackground);
+ border: var(--_ui5_shellbar_button_badge_border);
+ color: var(--sapContent_BadgeTextColor);
+ bottom: calc(100% + 0.0625rem);
+ left: 1.25rem;
+ padding: 0 0.3125rem;
+ border-radius: 0.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: var(--sapFontSmallSize);
+ font-family: var(--sapFontFamily);
+ z-index: 2;
+ box-sizing: border-box;
+ pointer-events: none;
+}
+
+[ui5-li][data-count]:after {
+ content: attr(data-count);
+}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/ShellBarV2Legacy.css b/packages/fiori/src/themes/ShellBarV2Legacy.css
new file mode 100644
index 000000000000..5445e9003e76
--- /dev/null
+++ b/packages/fiori/src/themes/ShellBarV2Legacy.css
@@ -0,0 +1,174 @@
+/* Legacy Features CSS - Logo, Titles, Menu */
+
+/* Logo */
+.ui5-shellbar-logo {
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.ui5-shellbar-logo-area,
+.ui5-shellbar-legacy-branding {
+ 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: 0.125rem;
+}
+
+.ui5-shellbar-logo:focus,
+.ui5-shellbar-logo-area:focus {
+ outline: var(--_ui5_shellbar_logo_outline);
+ outline-offset: calc(-1 * var(--sapContent_FocusWidth));
+ border-radius: var(--_ui5_shellbar_logo_border_radius);
+}
+
+.ui5-shellbar-overflow-container > .ui5-shellbar-logo:hover,
+.ui5-shellbar-logo-area:hover {
+ box-shadow: var(--_ui5_shellbar_button_box_shadow);
+ border-radius: var(--_ui5_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);
+}
+
+::slotted([slot="logo"]) {
+ max-height: 2rem;
+}
+
+::slotted([slot="logo"]):active {
+ pointer-events: none;
+}
+
+/* Title Area */
+.ui5-shellbar-headings {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 100%;
+ overflow: hidden;
+ margin-inline-start: 0.25rem;
+}
+
+.ui5-shellbar-primary-title,
+.ui5-shellbar-menu-button-title,
+.ui5-shellbar-title {
+ display: inline-block;
+ font-family: var(--sapFontSemiboldDuplexFamily);
+ margin: 0;
+ font-size: var(--_ui5_shellbar_menu_button_title_font_size);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--sapShell_SubBrand_TextColor);
+}
+
+.ui5-shellbar-secondary-title {
+ display: inline-block;
+ font-size: var(--sapFontSmallSize);
+ color: var(--sapShell_TextColor);
+ font-weight: normal;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ text-align: start;
+}
+
+/* Menu Button */
+.ui5-shellbar-menu-button {
+ white-space: nowrap;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ padding: 0.25rem 0.5rem;
+ cursor: text;
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ user-select: text;
+ margin-inline-start: 0.5rem;
+ height: 2.25rem;
+ border: 0.0625rem solid var(--sapButton_Lite_BorderColor);
+ background: var(--sapButton_Lite_Background);
+ outline-color: var(--_ui5_shellbar_logo_outline_color);
+ color: var(--sapShell_TextColor);
+ box-sizing: border-box;
+ border-radius: var(--_ui5_shellbar_button_border_radius);
+ position: relative;
+ font-weight: bold;
+}
+
+.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_shellbar_button_border);
+ color: var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover {
+ background: var(--sapShell_Hover_Background);
+ border-color: var(--sapButton_Lite_Hover_BorderColor);
+ color: var(--sapShell_TextColor);
+ box-shadow: var(--_ui5_shellbar_button_box_shadow);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active {
+ background: var(--sapShell_Active_Background);
+ border-color: var(--sapButton_Lite_Active_BorderColor);
+ color: var(--_ui5_shellbar_button_active_color);
+ box-shadow: var(--_ui5_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);
+}
+
+: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_shellbar_logo_outline);
+ outline-offset: var(--_ui5_shellbar_outline_offset);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner {
+ border: none;
+}
+
+.ui5-shellbar-menu-button .ui5-shellbar-logo:hover {
+ box-shadow: none;
+}
+
+.ui5-shellbar-menu-button-arrow {
+ display: inline-block;
+ font-family: var(--sapFontSemiboldDuplexFamily);
+ margin: 0;
+ font-size: var(--_ui5_shellbar_menu_button_title_font_size);
+ color: var(--sapShell_SubBrand_TextColor);
+}
+
+.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
+ margin-inline-start: 0.375rem;
+}
+
+:host(:not([primary-title])) .ui5-shellbar-menu-button {
+ min-width: 2.25rem;
+ justify-content: center;
+}
+
+:host(:not([with-logo])) .ui5-shellbar-menu-button {
+ margin-inline-start: 0;
+}
+
+:host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
+ margin-inline-start: 0;
+}
+
diff --git a/packages/fiori/src/themes/ShellBarV2SearchLegacy.css b/packages/fiori/src/themes/ShellBarV2SearchLegacy.css
new file mode 100644
index 000000000000..b94c45f0f629
--- /dev/null
+++ b/packages/fiori/src/themes/ShellBarV2SearchLegacy.css
@@ -0,0 +1,44 @@
+/* Legacy Search Styles - ONLY for ui5-input and custom div search fields */
+
+/* CSS variable overrides for ui5-input component */
+:host {
+ --_ui5_input_placeholder_color: var(--sapShell_InteractiveTextColor);
+ --_ui5_input_border_radius: var(--_ui5_shellbar_input_border_radius);
+ --_ui5_input_focus_border_radius: var(--_ui5_shellbar_input_focus_border_radius);
+ --_ui5_input_background_color: var(--_ui5_shellbar_input_background_color);
+ --_ui5_input_focus_outline_color: var(--_ui5_shellbar_input_focus_outline_color);
+ --_ui5_input_margin_top_bottom: 0;
+}
+
+/* ui5-input specific styles */
+::slotted([ui5-input]) {
+ background: var(--_ui5_shellbar_search_field_background);
+ border: var(--_ui5_shellbar_search_field_border);
+ box-shadow: var(--_ui5_shellbar_search_field_box_shadow);
+ color: var(--_ui5_shellbar_search_field_color);
+ height: 2.25rem;
+ width: 100%;
+ min-width: var(--_ui5_shellbar_search_field_width);
+}
+
+/* ui5-input breakpoint adjustments */
+: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;
+}
+
+/* ui5-input hover */
+::slotted([ui5-input]:hover) {
+ background: var(--_ui5_shellbar_search_field_background_hover);
+ box-shadow: var(--_ui5_shellbar_search_field_box_shadow_hover);
+}
+
+/* ui5-input focus */
+::slotted([ui5-input][focused]) {
+ outline: var(--_ui5_shellbar_search_field_outline_focused);
+}
+
diff --git a/packages/fiori/test/pages/ShellBarV2.html b/packages/fiori/test/pages/ShellBarV2.html
new file mode 100644
index 000000000000..cdb170d3f912
--- /dev/null
+++ b/packages/fiori/test/pages/ShellBarV2.html
@@ -0,0 +1,148 @@
+
+
+
+
+
+ Shell Bar V2 MVP Test
+
+
+
+
+
+
+
+ ShellBarV2 MVP Test
+ Testing modular architecture with Actions feature.
+
+ Full Features (with All Actions + Overflow)
+
+
+
+ 
+ My Application
+
+
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+ Action 5
+
+
+
+
+
+ Resize window to see overflow in action. Items hide based on data-hide-order. Profile and Product Switch never hide.
+ Keyboard navigation: Use Arrow Left/Right to navigate between items. Home/End to jump to first/last item.
+ Full-screen search: When overflow happens and search is visible, full-screen search overlay appears. Click Cancel to close.
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/fiori/test/pages/ShellBarV2_SearchTypes.html b/packages/fiori/test/pages/ShellBarV2_SearchTypes.html
new file mode 100644
index 000000000000..074fc45867d0
--- /dev/null
+++ b/packages/fiori/test/pages/ShellBarV2_SearchTypes.html
@@ -0,0 +1,319 @@
+
+
+
+
+ ShellBarV2 - Search Types Demo
+
+
+
+
+
+
+
+
+ ShellBarV2 - Search Types Demonstration
+ This page demonstrates all 3 supported search field types and legacy properties.
+
+
+
+
1. Self-Collapsible Search (ui5-shellbar-search) ✅
+
+ Type: ui5-shellbar-search
+ Features: Auto-expands/collapses, search suggestions, scopes
+ Properties: collapsed, open (managed by component)
+ Controller: ShellBarV2Search
+
+
+
+ Self-Collapsible Search
+
+
+
+
+
+
+ Reports
+ Analytics
+
+
+
Click the search icon to toggle. Supports auto-collapse when space is tight (except when focused or has value).
+
+
2. ui5-input (Legacy) ✅
+
+ Type: ui5-input
+ Features: Basic input field, shows search button
+ Properties: hideSearchButton, disableSearchCollapse supported
+ Controller: ShellBarSearchLegacy
+
+
+
+ ui5-input Search
+
+
+ Search for products, customers, or orders
+
+ Products
+ Customers
+ Orders
+
+
+
Separate search button appears. Auto-collapse works based on focus and value.
+
+
3. Custom DIV with Input (Legacy) ✅
+
+ Type: Custom HTML (div with input)
+ Features: Full control over markup, shows search button
+ Properties: hideSearchButton, disableSearchCollapse supported
+ Controller: ShellBarSearchLegacy
+
+
+
+ Custom Search
+
+
+
+
+
+ Dashboard
+ Settings
+
+
+
Custom HTML allows full control. Search button provided by ShellBar. Custom close button included.
+
+
4. ui5-input with disableSearchCollapse
+
+ Type: ui5-input
+ Properties: disableSearchCollapse=true
+ Behavior: Search field always stays expanded, never auto-collapses
+
+
+
+ Always Expanded
+
+
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+ Action 5
+
+
+
Resize window - search stays expanded even when items overflow.
+
+
5. Custom DIV with hideSearchButton
+
+ Type: Custom div
+ Properties: hideSearchButton=true
+ Behavior: No search button shown, field always visible
+
+
+
+ No Search Button
+
+
+
+
+ Home
+ About
+
+
+
Search button hidden. Field is always visible (useful when managing state externally).
+
+
6. With Overflow + Auto-Collapse
+
+ Type: ui5-input
+ Behavior: Search auto-collapses when content overflows (unless focused/has value)
+
+
+
+ Overflow Demo
+
+
+ Reports
+ Analytics
+ Dashboard
+ Settings
+ Help
+
+ Export
+ Import
+ Print
+
+
+
Resize window to see auto-collapse. Type something or focus the field to prevent collapse.
+
ShellBar v1 vs ShellBarV2 Comparison
+
+
+
+
+ Theme:
+
+ Horizon (Morning)
+ Horizon Dark (Evening)
+ Horizon High Contrast Black
+ Horizon High Contrast White
+ Fiori 3 (Quartz Light)
+ Fiori 3 Dark (Quartz Dark)
+ Fiori 3 High Contrast Black
+ Fiori 3 High Contrast White
+
+
+
+
+
+ Notifications:
+
+
+
+
+ Product Switch:
+
+
+
+
+ Profile:
+
+
+
+
+ Assistant:
+
+
+
+
+ Start Button:
+
+
+
+
+ Notifications Count:
+
+
+
+
+
+
Search
+
+
+ Search Field:
+
+
+
+ Search Type:
+
+ ui5-input
+ ui5-shellbar-search
+
+
+
+
+
+
+
+
Content Items (Overflow Test)
+
+
+ Content Items:
+
+
+
+ Show Spacer:
+
+
+
+
+
+
+
+
Custom Items
+
+
+ Custom Items:
+
+
+
+ More Items:
+
+
+
+
+
+
+
+
Branding
+
+
+ Branding Mode:
+
+ Branding Slot (New)
+ Logo + Primary Title (Legacy)
+
+
+
+ Show Secondary Title:
+
+
+
+ Menu Items:
+
+ (requires Legacy mode)
+
+
+
+
+ How to use: Toggle switches to enable/disable features. Both ShellBars update simultaneously for easy comparison.
+
Tip: Resize window to test overflow behavior with content items. Check console for event logs.
+
Themes: Switch between all 8 available themes (Horizon and Fiori 3 families, including dark and high contrast variants).
+
Branding Mode: Switch between new Branding Slot and legacy Logo + Primary Title modes. Menu items only available in legacy mode.
+
+
+
+
+
+
+ Product Title
+
+
+
+
+ Action 1
+ Tag
+ Action 3
+ End 1
+ End 2
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Product Title
+
+
+
+
+ Action 1
+ Tag
+ Action 3
+ End 1
+ End 2
+
+
+
+
+
+
+
+
+
+
+