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

package/src/themes/ShellBar.css

@@ -1,4 +1,9 @@
 @import "./InvisibleTextStyles.css";
+@import "./ShellBarSearchLegacy.css";
+
+/* ============================================================================
+   HOST & CSS VARIABLES
+   ============================================================================ */
 
 :host(:not([hidden])) {
 	display: inline-block;
@@ -6,376 +11,180 @@
 	max-width: 100%;
 	background: var(--sapShellColor);
 	box-sizing: border-box;
-}
-
-:host {
-	box-shadow: inset 0 -0.0625rem 0 0 var(--sapPageHeader_BorderColor);
-}
+	box-shadow: inset 0 -.0625rem 0 0 var(--sapPageHeader_BorderColor);
 
-::slotted([ui5-input]) {
-	--_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;
-}
-
-::slotted([ui5-button]),
-[ui5-button],
-::slotted([ui5-toggle-button]),
-[ui5-toggle-button] {
-	/* Overwrite the default button styles to fulfill no "compact" mode of ui5-shellbar */
-	--_ui5_button_base_min_width: 2.25rem;
-	--_ui5_button_base_padding: 0.5625rem;
+	/* 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 {
-	position: relative;
 	display: flex;
-	justify-content: space-between;
 	align-items: center;
 	height: var(--_ui5_shellbar_root_height);
-	font-family: var(--sapFontFamily);
+	position: relative;
 	font-size: var(--sapFontSize);
 	font-weight: normal;
-	box-sizing: border-box;
 }
 
-.ui5-shellbar-menu-button,
-.ui5-shellbar-button,
-.ui5-shellbar-image-button,
-::slotted([ui5-toggle-button]:not([slot^="content"])),
-::slotted([ui5-button]:not([slot^="content"])) {
+/* ============================================================================
+   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;
-	margin-inline-start: var(--_ui5-shellbar-overflow-button-margin);
 	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;
-	cursor: pointer;
 	border-radius: var(--_ui5_shellbar_button_border_radius);
-	position: relative;
 	font-weight: bold;
-	white-space: initial;
-	overflow: initial;
-	text-overflow: initial;
-	line-height: inherit;
-	letter-spacing: inherit;
-	word-spacing: inherit;
-}
-
-::slotted([ui5-toggle-button][slot="assistant"]) {
-	margin-inline-start: 0;
-}
-
-.ui5-shellbar-assistant-button {
-	margin-inline-start: var(--_ui5-shellbar-overflow-button-margin);
-}
-
-::slotted([ui5-button][slot="startButton"]) {
-	margin-inline-start: 0;
 }
 
-::slotted([ui5-toggle-button]:hover),
-::slotted([ui5-button]:hover),
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
-.ui5-shellbar-button:hover,
-.ui5-shellbar-image-button:hover,
-::slotted([ui5-button][slot="midContent"]:hover) {
+/* Button States - Hover */
+::slotted([ui5-button]:not([slot^="content"]):not([disabled]):hover),
+::slotted([ui5-toggle-button]:not([slot^="content"]):not([disabled]):hover) {
 	background: var(--sapShell_Hover_Background);
 	border-color: var(--sapButton_Lite_Hover_BorderColor);
 	color: var(--sapShell_TextColor);
 }
 
-::slotted([ui5-toggle-button][slot="assistant"][pressed]),
-::slotted([ui5-toggle-button][slot="assistant"][pressed]:hover:not([active])) {
-	color: var(--sapShell_Assistant_ForegroundColor);
-}
-
-::slotted([ui5-toggle-button][active]),
-::slotted([ui5-button][active]),
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,
-.ui5-shellbar-button[active],
-.ui5-shellbar-image-button:active {
+/* Button States - Active */
+::slotted([ui5-button]:not([slot^="content"]):not([disabled])[active]),
+::slotted([ui5-toggle-button]:not([slot^="content"]):not([disabled])[active]) {
 	background: var(--sapShell_Active_Background);
 	border-color: var(--sapButton_Lite_Active_BorderColor);
 	color: var(--_ui5_shellbar_button_active_color);
 }
 
-:host([desktop]) .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus,
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus-visible {
-	outline: var(--_ui5_shellbar_logo_outline);
-	outline-offset: var(--_ui5_shellbar_outline_offset);
+/* 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);
 }
 
-slot[name="profile"] {
-	min-width: 0;
-}
+/* ============================================================================
+   ACTION BUTTONS (Items & Internal Actions)
+   ============================================================================ */
 
-::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;
+.ui5-shellbar-action-button {
+	color: var(--sapShell_TextColor);
 }
 
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner {
-	border: none;
+.ui5-shellbar-action-button:hover {
+	color: var(--sapShell_TextColor);
 }
 
-.ui5-shellbar-menu-button-arrow,
-.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-action-button[active] {
+	color: var(--_ui5_shellbar_button_active_color);
 }
 
-:host(:not([primary-title])) .ui5-shellbar-menu-button {
-	min-width: 2.25rem;
-	justify-content: center;
+::slotted([ui5-toggle-button][slot="assistant"]) {
+	color: var(--sapShell_TextColor);
 }
 
-.ui5-shellbar-secondary-title {
-	display: inline-block;
-	font-size: var(--sapFontSmallSize);
+::slotted([ui5-toggle-button][slot="assistant"]:hover) {
 	color: var(--sapShell_TextColor);
-	font-weight: normal;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	margin: 0;
-	text-align: start;
 }
 
-.ui5-shellbar-headings {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	height: 100%;
-	overflow: hidden;
-	margin-inline-start: 0.25rem;
+::slotted([ui5-toggle-button][slot="assistant"][active]) {
+	color: var(--_ui5_shellbar_button_active_color);
 }
 
-.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
-	margin-inline-start: 0.375rem;
-}
+/* ============================================================================
+   START AREA (Start Button, Branding)
+   ============================================================================ */
 
-.ui5-shellbar-overflow-container {
+.ui5-shellbar-start-button {
+	flex-shrink: 0;
 	display: flex;
-	justify-content: center;
 	align-items: center;
-	height: 100%;
-	overflow: hidden;
 }
 
-.ui5-shellbar-overflow-container-middle {
-	align-self: flex-start;
-	height: var(--_ui5_shellbar_overflow_container_middle_height);
-	width: 0;
+.ui5-shellbar-branding-area {
 	flex-shrink: 0;
-}
-
-.ui5-shellbar-mid-content {
-	height: var(--_ui5_shellbar_overflow_container_middle_height);
-}
-
-
-:host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
-	margin-inline-start: 0;
-}
-
-:host([breakpoint-size="S"]) {
-	padding: 0 1rem;
-}
-
-:host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
-	padding: 0 1rem;
-}
-
-:host([breakpoint-size="M"]) {
-	padding: 0 2rem;
-}
-
-:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
-	padding: 0 2rem;
-}
-
-:host([breakpoint-size="L"]) {
-	padding: 0 2rem;
-}
-
-:host([breakpoint-size="XL"]) {
-	padding: 0 3rem;
-}
-
-:host([breakpoint-size="XXL"]) {
-	padding: 0 3rem;
-}
-
-.ui5-shellbar-logo {
-	overflow: hidden;
-	cursor: pointer;
-}
-
-.ui5-shellbar-logo-area {
-	overflow: hidden;
 	display: flex;
 	align-items: center;
-	padding: .25rem .5rem .25rem .25rem;
-	box-sizing: border-box;
-	cursor: pointer;
-	background: var(--sapButton_Lite_Background);
-	border: 1px solid var(--sapButton_Lite_BorderColor);
-	color: var(--sapShell_TextColor);
-	/* fix cutting of the focus outline */
-	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);
-}
+/* ============================================================================
+   OVERFLOW CONTAINER
+   ============================================================================ */
 
-.ui5-shellbar-logo-area:active:focus {
-	background: var(--sapShell_Active_Background);
-	border: 1px solid var(--sapButton_Lite_Active_BorderColor);
-	color: var(--sapShell_Active_TextColor);
-}
-
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover {
-	box-shadow: var(--_ui5_shellbar_button_box_shadow);
-}
-
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active {
-	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);
-}
-
-.ui5-shellbar-menu-button .ui5-shellbar-logo:hover {
-	box-shadow: none;
-}
-
-.ui5-shellbar-button {
-	width: 2.5rem;
-	box-sizing: border-box;
-}
-
-.ui5-shellbar-button,
-::slotted([ui5-button][slot="startButton"]) {
-	--_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border);
-}
-
-.ui5-shellbar-cancel-button {
-	color: var(--_ui5-shellbar_cancel-button-color);
-}
-
-.ui5-shellbar-cancel-button:hover {
-	color: var(--_ui5-shellbar_cancel-button-color);
-}
-
-.ui5-shellbar-image-button {
+.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;
-	justify-content: center;
 	align-items: center;
-	min-width: auto;
-	height: 2.5rem;
-	--_ui5_button_focused_border_radius: var(--_ui5_shellbar_image_button_border_radius);
-	border-radius: var(--_ui5_shellbar_image_button_border_radius);
+	min-width: 0;
+	overflow: hidden;
+	position: relative;
 }
 
-.ui5-shellbar-overflow-container-left {
-	padding: 0;
-	justify-content: flex-start;
-	max-width: 75%;
+.ui5-shellbar-overflow-container-inner {
+	display: flex;
+	align-items: center;
+	justify-content: end;
 	flex-shrink: 0;
+	min-width: 100%;
 }
 
-.ui5-shellbar-overflow-container-left> :nth-child(n) {
-	margin-inline-end: 0.5rem;
-}
-
-/* :host([breakpoint-size="XXL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-left {
-	flex-basis: 50%;
-	max-width: calc(50% - 18.25rem);
-} */
+/* ============================================================================
+   SEARCH AREA
+   ============================================================================ */
 
-.ui5-shellbar-menu-button {
-	white-space: nowrap;
-	overflow: hidden;
+.ui5-shellbar-search-field-area {
+	flex: 0 1 auto;
+	min-width: 0;
 	display: flex;
 	align-items: center;
-	padding: 0.25rem 0.5rem;
-	cursor: text;
-	-webkit-user-select: text;
-	-moz-user-select: text;
-	user-select: text;
-}
-
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive {
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-	cursor: pointer;
-	background: var(--sapButton_Lite_Background);
-	border: var(--_ui5_shellbar_button_border);
-	color: var(--sapShell_TextColor);
+	margin-left: auto;
+	/* goes to the most right when no content is present */
+}
+
+/* this width is only applied when not in full screen mode as 
+in full screen the search fills the available space */
+:host([show-search-field]:not([show-full-width-search])) ::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);
 }
 
-:host(:not([with-logo])) .ui5-shellbar-menu-button {
-	margin-inline-start: 0;
-}
+/* ============================================================================
+   CONTENT AREA (Items, Spacer, Separator)
+   ============================================================================ */
 
-.ui5-shellbar-overflow-container-right {
+.ui5-shellbar-content-area {
 	flex-grow: 1;
-	justify-content: flex-end;
-}
-
-.ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
 	display: flex;
-	justify-content: flex-end;
-	height: inherit;
 	align-items: center;
 }
 
-.ui5-shellbar-overflow-container-right-inner {
-	display: flex;
-	flex-grow: 1;
-}
-
-.ui5-shellbar-content-items {
+.ui5-shellbar-content-item {
+	flex-shrink: 0;
 	display: flex;
-	justify-content: center;
 	align-items: center;
-	flex-grow: 1;
-	/* max-content prevents the container from overflowing
-	which is needed for the responsive logic */
-	min-width: max-content;
 }
 
 .ui5-shellbar-spacer {
@@ -393,55 +202,82 @@ slot[name="profile"] {
 	background-color: var(--_ui5-shellbar_separator-color);
 }
 
-.ui5-shellbar-separator-end {
-	margin-inline-start: 0.5rem;
+/* ============================================================================
+   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;
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
-	padding-inline-start: 0;
+.ui5-shellbar-custom-item.ui5-shellbar-hidden {
+	display: none;
 }
 
-::slotted([hidden]) {
-	visibility: hidden;
-	order: -1;
-	position: absolute;
+
+/* ============================================================================
+   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;
+	height: 2.25rem;
+	box-sizing: border-box;
 }
 
-.ui5-shellbar-content-item {
+.ui5-shellbar-image-button {
 	display: flex;
+	justify-content: center;
 	align-items: center;
-	flex-shrink: 0;
-	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
+	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-overflow-container-right-child .ui5-shellbar-bell-button [slot="badge"] {
-	inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
+.ui5-shellbar-assistant-button {
+	display: flex;
+	align-items: center;
 }
 
-.ui5-shellbar-overflow-container-right-child .ui5-shellbar-custom-item [slot="badge"] {
-	inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
+::slotted([ui5-toggle-button][slot="assistant"]) {
+	margin-inline-start: 0;
 }
 
-.ui5-shellbar-menu-button {
-	margin-inline-start: 0.5rem;
+::slotted([ui5-toggle-button][slot="assistant"][pressed]),
+::slotted([ui5-toggle-button][slot="assistant"][pressed]:hover:not([active])) {
+	color: var(--sapShell_Assistant_ForegroundColor);
 }
 
-.ui5-shellbar-search-field {
-	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
-	min-width: var(--_ui5_shellbar_search_field_width);
-	align-items: center;
-	flex-grow: 1;
-	margin-inline-start: 0.5rem;
+slot[name="profile"] {
+	min-width: 0;
 }
 
-.ui5-shellbar-overflow-container-right-child> :first-child {
-	margin-inline-start: 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;
 }
 
-.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
-	height: 2.25rem;
-	width: 100%;
-}
+/* ============================================================================
+   FULL-SCREEN SEARCH OVERLAY
+   ============================================================================ */
 
 .ui5-shellbar-search-full-width-wrapper {
 	position: absolute;
@@ -454,85 +290,66 @@ slot[name="profile"] {
 	display: flex;
 	align-items: center;
 	box-sizing: border-box;
+	padding: 0 1rem;
 }
 
-.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-button {
-	width: auto;
+.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;
-}
-
-::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);
 }
 
-:host([breakpoint-size="M"]) ::slotted([ui5-input]),
-:host([breakpoint-size="S"]) ::slotted([ui5-input]) {
-	min-width: 1rem;
-}
+/* ============================================================================
+   BREAKPOINTS
+   ============================================================================ */
 
-:host([breakpoint-size="M"][show-search-field]) .ui5-shellbar-overflow-container-right-child {
-	flex-grow: 1;
+/* Responsive padding per breakpoint */
+:host([breakpoint-size="S"]) {
+	padding: 0 1rem;
 }
 
-::slotted([ui5-input]:hover) {
-	background: var(--_ui5_shellbar_search_field_background_hover);
-	box-shadow: var(--_ui5_shellbar_search_field_box_shadow_hover);
+:host([breakpoint-size="M"]) {
+	padding: 0 2rem;
 }
 
-::slotted([ui5-input][focused]) {
-	outline: var(--_ui5_shellbar_search_field_outline_focused);
+:host([breakpoint-size="L"]) {
+	padding: 0 2rem;
 }
 
-::slotted([slot="logo"]) {
-	max-height: 2rem;
-	vertical-align: middle;
+:host([breakpoint-size="XL"]) {
+	padding: 0 3rem;
 }
 
-::slotted([slot="logo"]):active {
-	pointer-events: none;
+:host([breakpoint-size="XXL"]) {
+	padding: 0 3rem;
 }
 
-.ui5-shellbar-co-pilot-placeholder {
-	width: 2.75rem;
-	height: 2.75rem;
+/* Search overlay padding per breakpoint */
+:host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
+	padding: 0 1rem;
 }
 
-.ui5-shellbar-coPilot-pressed,
-.ui5-shellbar-coPilot-pressed:hover {
-	color: var(--sapShell_Assistant_ForegroundColor);
+:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
+	padding: 0 2rem;
 }
 
-::slotted([ui5-button][slot="startButton"]) {
-	margin-inline: 0 0.5rem;
-	justify-content: center;
-	align-items: center;
+/* ============================================================================
+   Utilities (Keep these at the end of the file to avoid specificity issues)
+   ============================================================================ */
+
+.ui5-shellbar-gap-start {
+	margin-inline-start: var(--ui5_shellbar_gap);
 }
 
-::slotted([ui5-button][data-profile-btn]) {
-	width: auto;
+.ui5-shellbar-gap-end {
+	margin-inline-end: var(--ui5_shellbar_gap);
 }
 
-/* if class contains ui5-shellbar-hidden-button */
-::slotted(.ui5-shellbar-hidden-button),
-.ui5-shellbar-hidden-button,
-.ui5-shellbar-invisible-button {
-	visibility: hidden;
-	order: -1;
-	opacity: 0;
-	min-width: 0;
-	width: 0;
-	margin: 0;
-	padding: 0;
-	padding-inline-start: 0;
-	border: 0;
-	margin-inline-start: 0;
+.ui5-shellbar-hidden {
+	display: none !important;
 }