@ui5/webcomponents-fiori 2.26.0-rc.0 → 2.26.0

package/src/themes/SearchField.css

@@ -8,6 +8,7 @@
 
 :host(:not([collapsed])),
 .ui5-shellbar-search-field-wrapper {
+	width: var(--search_width);
 	min-width: 18rem;
 	max-width: 36rem;
 	margin: 0;
@@ -44,6 +45,11 @@
 	background-color: var(--_ui5-search-wrapper-hover-background-color);
 }
 
+:host(:not([collapsed]):focus-within),
+.ui5-shellbar-search-field-wrapper:focus-within {
+	background-color: var(--_ui5-search-wrapper-active-background-color);
+}
+
 :host([focused-inner-input]) .ui5-search-field-root {
 	outline: var(--_ui5_search_wrapper_outline);
 	border-radius: var(--_ui5_search_input_border_radius);
@@ -76,8 +82,11 @@
 /* scope select */
 [ui5-select] {
 	outline: none;
-	margin: var(--_ui5_search_input_scope_margin);
-	max-width: 10rem;
+	margin: var(--_ui5-search-scope-spacing);
+	width: fit-content;
+	min-width: auto;
+	max-width: 18rem;
+	flex: 0 1 auto;
 	border-radius: var(--_ui5_search_input_border_radius);
 	border: var(--_ui5-search-border);
 	box-shadow: none;
@@ -290,6 +299,11 @@
 	--_ui5_input_focus_border_radius: var(--_ui5_search_input_border_radius);
 }
 
+.ui5-search-field-select::part(label) {
+	padding: 0 .25rem 0 .5rem;
+}
+
+
 .ui5-search-field-select::part(icon-wrapper) {
 	border-radius: var(--_ui5_search_input_border_radius);
 	height: 100%;
@@ -298,4 +312,50 @@
 .ui5-search-field-inner-input::selection {
 	background: var(--sapSelectedColor);
 	color: var(--sapContent_ContrastTextColor);
-}
+}
+
+/* Mobile scope selector button */
+.ui5-search-field-scope-button {
+	min-width: 2rem;
+	width: 2rem;
+	height: var(--_ui5-search-select-height);
+	margin: var(--_ui5-search-scope-spacing);
+	border-radius: var(--_ui5_search_input_border_radius);
+	border: var(--_ui5-search-border);
+	box-shadow: none;
+	background: var(--_ui5-search-elements-background);
+	color: var(--sapShell_InteractiveTextColor);
+}
+
+.ui5-search-field-scope-button::part(button)::before,
+.ui5-search-field-scope-button::part(button)::after {
+	display: none;
+}
+
+.ui5-search-field-scope-button:hover {
+	box-shadow: var(--_ui5-search_input_scope_hover_shadow);
+	background-color: var(--sapShell_Hover_Background);
+}
+
+.ui5-search-field-scope-button:focus-within {
+	box-shadow: var(--_ui5-search_input_scope_active_shadow);
+	background: var(--sapShell_Active_Background);
+	color: var(--sapShell_Active_TextColor);
+}
+
+/* Scope popover on mobile */
+.ui5-search-field-scope-popover {
+	min-width: 12rem;
+}
+
+.ui5-search-field-scope-popover::part(content) {
+	padding: 0;
+}
+
+.ui5-search-field-scope-popover [ui5-list] {
+	border: none;
+}
+
+.ui5-search-field-scope-popover [ui5-li-standard][selected] {
+	background-color: var(--sapList_SelectionBackgroundColor);
+}

package/src/themes/ShellBarLegacy.css

@@ -42,7 +42,9 @@
 }
 
 ::slotted([slot="logo"]) {
-	max-height: 2rem;
+	max-height: 1.875rem;
+	padding-block: 0.0625rem;
+	padding-inline: 0.25rem;
 }
 
 ::slotted([slot="logo"]):active {

package/src/themes/base/SearchField-parameters.css

@@ -6,7 +6,8 @@
 	--_ui5-search-wrapper-background: var(--sapShell_InteractiveBackground);
 	--_ui5_search_separator_background: var(--sapShell_InteractiveBorderColor);
 	--_ui5-search-wrapper-hover-background: var(--sapField_Hover_BackgroundStyle);
-	--_ui5-search-wrapper-hover-background-color: var(--sapField_Hover_Background);
+	--_ui5-search-wrapper-hover-background-color: none;
+	--_ui5-search-wrapper-active-background-color: none;
 	--_ui5-search-elements-hover-background: none;
 	--_ui5-search-elements-active-background: none;
 	--_ui5_search_input_scope_margin: 0 0.125rem 0 .5rem;
@@ -31,4 +32,5 @@
 	--_ui5-search-loading-overlay-background: var(--sapBackgroundColor);
 	--_ui5-search-loading-overlay-transparency: 0.72;
 	--_ui5-search-field-text-color: var(--sapField_TextColor);
+	--_ui5-search-scope-spacing: 0 0.25rem;
 }

package/src/themes/sap_fiori_3/SearchField-parameters.css

@@ -7,7 +7,6 @@
 	--_ui5-search-wrapper-background: var(--sapShellColor);
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
-	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
 	--_ui5-search_input_scope_hover_shadow: none;
 	--_ui5-search_input_scope_active_shadow: none;

package/src/themes/sap_fiori_3_dark/SearchField-parameters.css

@@ -7,7 +7,6 @@
 	--_ui5-search-wrapper-background: var(--sapShellColor);
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
-	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
 	--_ui5-search_input_scope_hover_shadow: none;
 	--_ui5-search_input_scope_active_shadow: none;

package/src/themes/sap_fiori_3_hcb/SearchField-parameters.css

@@ -7,7 +7,6 @@
 	--_ui5-search-wrapper-background: var(--sapShellColor);
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
-	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
 	--_ui5-search_input_scope_hover_shadow: none;
 	--_ui5-search_input_scope_active_shadow: none;

package/src/themes/sap_fiori_3_hcw/SearchField-parameters.css

@@ -7,7 +7,6 @@
 	--_ui5-search-wrapper-background: var(--sapShellColor);
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
-	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
 	--_ui5-search_input_scope_hover_shadow: none;
 	--_ui5-search_input_scope_active_shadow: none;

package/src/themes/sap_horizon/SearchField-parameters.css

@@ -0,0 +1,6 @@
+@import "../base/SearchField-parameters.css";
+
+:host {
+	--_ui5-search-wrapper-hover-background-color: var(--sapShell_Hover_Background);
+	--_ui5-search-wrapper-active-background-color: var(--sapShell_Active_Background);
+}

package/src/themes/sap_horizon/parameters-bundle.css

@@ -18,8 +18,7 @@
 @import "./FlexibleColumnLayout-parameters.css";
 @import "./MediaGallery-parameters.css";
 @import "../base/DynamicPage-parameters.css";
-@import "../base/SearchField-parameters.css";
-@import "../base/Search-parameters.css";
+@import "./SearchField-parameters.css";
 @import "../base/Search-parameters.css";
 @import "./DynamicPageTitle-parameters.css";
 @import "../base/DynamicPageHeader-parameters.css";

package/src/themes/sap_horizon_dark/SearchField-parameters.css

@@ -0,0 +1,6 @@
+@import "../base/SearchField-parameters.css";
+
+:host {
+	--_ui5-search-wrapper-hover-background-color: var(--sapShell_Hover_Background);
+	--_ui5-search-wrapper-active-background-color: var(--sapShell_Active_Background);
+}

package/src/themes/sap_horizon_dark/parameters-bundle.css

@@ -8,7 +8,7 @@
 @import "./ProductSwitchItem-parameters.css";
 @import "../base/ShellBar-parameters.css";
 @import "./ShellBar-parameters.css";
-@import "../base/SearchField-parameters.css";
+@import "./SearchField-parameters.css";
 @import "../base/Search-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./SideNavigation-parameters.css";

package/src/themes/sap_horizon_hcb/SearchField-parameters.css

@@ -7,7 +7,6 @@
 	--_ui5-search-wrapper-background: none;
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
-	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
 	--_ui5-search_input_scope_hover_shadow: none;
 	--_ui5-search_input_scope_active_shadow: none;

package/src/themes/sap_horizon_hcw/SearchField-parameters.css

@@ -7,7 +7,6 @@
 	--_ui5-search-wrapper-background: none;
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
-	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
 	--_ui5-search_input_scope_hover_shadow: none;
 	--_ui5-search_input_scope_active_shadow: none;