Repository: SAP/ui5-webcomponents
Pull request #11428: feat(ui5-search-field): introduce advanced filtering
Author: login: StefanDimitrov04
Labels: name: released
Created: 2025-04-28T19:11:31Z | Merged: 2025-05-23T07:53:16Z

JIRA: BGSOFUIRILA-4036


Diff:
diff --git a/packages/fiori/cypress/specs/SearchField.cy.tsx b/packages/fiori/cypress/specs/SearchField.cy.tsx
index b1398b77f721..345f1bd01f2c 100644
--- a/packages/fiori/cypress/specs/SearchField.cy.tsx
+++ b/packages/fiori/cypress/specs/SearchField.cy.tsx
@@ -1,3 +1,4 @@
+import Button from "@ui5/webcomponents/dist/Button.js";
 import SearchField from "../../src/SearchField.js";
 import SearchScope from "../../src/SearchScope.js";
 import {
@@ -405,4 +406,44 @@ describe("SearchField general interaction", () => {
 				.should("have.been.calledOnce");
 		});
 	});
+
+	describe("SearchField - Advanced filter and Scope Slot Rendering", () => {
+		it("renders the advanced filter slot content when only advanced filtering is provided", () => {
+			cy.mount(
+				<SearchField value="test">
+					<Button slot="advancedFilter" icon="filter"></Button>
+				</SearchField>
+			);
+
+			cy.get("ui5-search-field").as("searchField");
+
+			cy.get("@searchField")
+				.shadow()
+				.find('slot[name="advancedFilter"]')
+				.should("exist");
+		});
+
+		it("renders the scope selector and omits advanced fliter slot when both are provided", () => {
+			cy.mount(
+				<SearchField>
+					<Button slot="advancedFilter" icon="filter"></Button>
+					<SearchScope text="All" slot="scopes"></SearchScope>
+					<SearchScope text="Apps" selected slot="scopes"></SearchScope>
+				</SearchField>
+			);
+
+			cy.get("ui5-search-field")
+				.as("searchField");
+
+			cy.get("@searchField")
+				.shadow()
+				.find("ui5-select")
+				.should("exist");
+
+			cy.get("@searchField")
+				.shadow()
+				.find('slot[name="advancedFilter"]')
+				.should("not.exist");
+		});
+	});
 });
diff --git a/packages/fiori/src/SearchField.ts b/packages/fiori/src/SearchField.ts
index eb80edb98c18..afc6bd8e142a 100644
--- a/packages/fiori/src/SearchField.ts
+++ b/packages/fiori/src/SearchField.ts
@@ -6,6 +6,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import SearchFieldTemplate from "./SearchFieldTemplate.js";
 import SearchFieldCss from "./generated/themes/SearchField.css.js";
+import type Button from "@ui5/webcomponents/dist/Button.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { IOption, SelectChangeEventDetail } from "@ui5/webcomponents/dist/Select.js";
 
@@ -158,6 +159,15 @@ class SearchField extends UI5Element {
 	@slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })
 	scopes!: Array<ISearchScope>;
 
+	/**
+	 * Defines the advanced filter slot, used to display an additional filtering button.
+	 * This slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.
+	 * @public
+	 * @since 2.11.0
+	 */
+	@slot()
+	advancedFilter!: Array<Button>;
+
 	/**
 	 * @private
 	 */
diff --git a/packages/fiori/src/SearchFieldTemplate.tsx b/packages/fiori/src/SearchFieldTemplate.tsx
index 5f0be6805098..9e4d6f9f9f15 100644
--- a/packages/fiori/src/SearchFieldTemplate.tsx
+++ b/packages/fiori/src/SearchFieldTemplate.tsx
@@ -23,25 +23,32 @@ export default function SearchFieldTemplate(this: SearchField) {
 		) : (
 			<div class="ui5-search-field-root" role="search" onFocusOut={this._onFocusOutSearch}>
 				<div class="ui5-search-field-content">
-					{!!this.scopes.length &&
+					{this.scopes?.length ? (
 						<>
 							<Select
 								onChange={this._handleScopeChange}
 								class="sapUiSizeCompact ui5-search-field-select"
 								accessibleName={this._translations.scope}
 								tooltip={this._translations.scope}>
-								{this.scopes.map(scopeOption => {
-									return <Option
+								{this.scopes.map(scopeOption => (
+									<Option
 										selected={scopeOption.selected}
 										data-ui5-stable={scopeOption.stableDomRef}
 										ref={this.captureRef.bind(scopeOption)}
-									>{scopeOption.text}</Option>;
-								},
-								this)}
+									>{scopeOption.text}
+									</Option>
+								))}
 							</Select>
 							<div class="ui5-search-field-separator"></div>
 						</>
-					}
+					) : this.advancedFilter ? (
+						<>
+							<div class="ui5-advanced-wrapper" style="display: contents">
+								<slot name="advancedFilter"></slot>
+							</div>
+							<div class="ui5-search-field-separator"></div>
+						</>
+					) : null}
 
 					<input
 						class="ui5-search-field-inner-input"
diff --git a/packages/fiori/src/themes/SearchField.css b/packages/fiori/src/themes/SearchField.css
index 14d1b154aec6..8bfe9d140c34 100644
--- a/packages/fiori/src/themes/SearchField.css
+++ b/packages/fiori/src/themes/SearchField.css
@@ -97,6 +97,34 @@
 	background-color: var(--sapShellColor);
 }
 
+.ui5-advanced-wrapper {
+	--_ui5_button_focused_border_radius: var(--_ui5_search_advanced_button_border_radius);
+}
+
+/* advanced filter slot */
+::slotted([slot="advancedFilter"]) {
+	min-width: var(--_ui5_search_icon_size);
+	height: var(--_ui5_search_icon_size);
+	border: var(--_ui5_search_advanced_button_border);
+	border-radius: var(--_ui5_search_advanced_button_border_radius);
+	color: var(--sapShell_InteractiveTextColor);
+	outline: none;
+	background: var(--_ui5-search-advanced_button_background_color);
+	box-sizing: border-box;
+	margin-inline-end: 0.1875rem;
+	margin-inline-start: 0.25rem;
+}
+
+::slotted([slot="advancedFilter"]:focus-within) {
+	background-color: var(--ui5_search_advanced_button_background_active);
+	border: var(--_ui5_search_advanced_button_border);
+}
+
+::slotted([slot="advancedFilter"]:hover) {
+	background-color: var(--sapShell_Hover_Background);
+	border: var(--_ui5_seach_advanced_button_border_hover);
+}
+
 /* input */
 .ui5-search-field-inner-input {
 	font-size: var(--sapFontSize);
diff --git a/packages/fiori/src/themes/base/SearchField-parameters.css b/packages/fiori/src/themes/base/SearchField-parameters.css
index 80a78959fbbc..b0ad06aeb3cd 100644
--- a/packages/fiori/src/themes/base/SearchField-parameters.css
+++ b/packages/fiori/src/themes/base/SearchField-parameters.css
@@ -2,6 +2,7 @@
 	--_ui5_search_icon_border_radius: 1.125rem;
 	--_ui5_search_input_border_radius: 1.125rem;
 	--_ui5-search-border: none;
+	--_ui5-search-icon-border: none;
 	--_ui5-search-wrapper-background: var(--sapShell_InteractiveBackground);
 	--_ui5_search_separator_background: var(--sapShell_InteractiveBorderColor);
 	--_ui5-search-wrapper-hover-background: var(--sapField_Hover_BackgroundStyle);
@@ -12,6 +13,11 @@
 	--_ui5-search-elements-background: inherit;
 	--_ui5_search_wrapper_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
 	--_ui5_search_input_outline: none;
+	--_ui5_search_advanced_button_border_radius: 1.125rem;
+	--_ui5_seach_advanced_button_border_hover: 1px solid var(--sapButton_Hover_BorderColor);
+	--_ui5_search_advanced_button_border: none;
+	--_ui5-search-advanced_button_background_color: inherit;
+	--ui5_search_advanced_button_background_active: inherit;
 	--_ui5_search_icon_size: 1.75rem;
 	--_ui5_search_icon_padding: 0.375rem;
 	--_ui5_search_icon_hover_padding: 0.3125rem;
@@ -19,7 +25,6 @@
 	--_ui5_search_input_end_padding: 0;
 	--_ui5-search-input-start-padding: 0.5rem;
 	--_ui5-search-select-height: 1.625rem;
-	--_ui5-search-icon-border: none;
 	--_ui5-search-loading-overlay-background: var(--sapBackgroundColor);
 	--_ui5-search-loading-overlay-transparency: 0.72;
 }
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css
index 21bd54a11dcf..44ec2f7c5a7f 100644
--- a/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css
+++ b/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css
@@ -14,6 +14,10 @@
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
 	--_ui5_search_wrapper_outline: none;
 	--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
+	--_ui5_search_advanced_button_border_radius: 0.375rem;
+	--_ui5_seach_advanced_button_border_hover: 1px solid var(--sapButton_Hover_BorderColor);
+	--_ui5-search-advanced_button_background_color: var(--sapShell_InteractiveBackground);
+	--ui5_search_advanced_button_background_active: var(--sapShell_InteractiveBackground);
 	--_ui5_search_icon_size: 2.25rem;
 	--_ui5_search_icon_padding: 0.625rem;
 	--_ui5_search_icon_hover_padding: 0.5625rem;
diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css
index 21bd54a11dcf..021790862c27 100644
--- a/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css
+++ b/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css
@@ -14,6 +14,9 @@
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
 	--_ui5_search_wrapper_outline: none;
 	--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
+	--_ui5_search_advanced_button_border_radius: 0.375rem;
+	--_ui5-search-advanced_button_background_color: var(--sapShell_InteractiveBackground);
+	--ui5_search_advanced_button_background_active: var(--sapShell_InteractiveBackground);
 	--_ui5_search_icon_size: 2.25rem;
 	--_ui5_search_icon_padding: 0.625rem;
 	--_ui5_search_icon_hover_padding: 0.5625rem;
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css
index ad32eb960d7b..2529546b12b4 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css
@@ -14,6 +14,10 @@
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
 	--_ui5_search_wrapper_outline: none;
 	--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
+	--_ui5_search_advanced_button_border_radius: 0.375rem;
+	--_ui5-search-advanced_button_background_color: var(--sapShell_InteractiveBackground);
+	--_ui5_search_advanced_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
+	--ui5_search_advanced_button_background_active: var(--sapShell_Hover_Background);
 	--_ui5_search_icon_size: 2.25rem;
 	--_ui5_search_icon_padding: 0.5625rem;
 	--_ui5_search_icon_hover_padding: 0.5625rem;
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css
index ad32eb960d7b..1caf0ecd3619 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css
@@ -14,6 +14,9 @@
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
 	--_ui5_search_wrapper_outline: none;
 	--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
+	--_ui5_search_advanced_button_border_radius: 0.375rem;
+	--_ui5_search_advanced_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
+	--ui5_search_advanced_button_background_active: var(--sapShell_Hover_Background);
 	--_ui5_search_icon_size: 2.25rem;
 	--_ui5_search_icon_padding: 0.5625rem;
 	--_ui5_search_icon_hover_padding: 0.5625rem;
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css
index 4c6765422eb6..9ddc346534b9 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css
@@ -14,6 +14,9 @@
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
 	--_ui5_search_wrapper_outline: none;
 	--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
+	--_ui5_search_advanced_button_border_radius: 0.375rem;
+	--_ui5_search_advanced_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
+	--ui5_search_advanced_button_background_active: var(--sapShell_Hover_Background);
 	--_ui5_search_icon_size: 2.25rem;
 	--_ui5_search_icon_padding: 0.5625rem;
 	--_ui5_search_icon_hover_padding: 0.5625rem;
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css
index 4c6765422eb6..9ddc346534b9 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css
@@ -14,6 +14,9 @@
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
 	--_ui5_search_wrapper_outline: none;
 	--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
+	--_ui5_search_advanced_button_border_radius: 0.375rem;
+	--_ui5_search_advanced_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
+	--ui5_search_advanced_button_background_active: var(--sapShell_Hover_Background);
 	--_ui5_search_icon_size: 2.25rem;
 	--_ui5_search_icon_padding: 0.5625rem;
 	--_ui5_search_icon_hover_padding: 0.5625rem;
diff --git a/packages/fiori/test/pages/SearchField.html b/packages/fiori/test/pages/SearchField.html
index 3b8f50a4331e..ed7573820681 100644
--- a/packages/fiori/test/pages/SearchField.html
+++ b/packages/fiori/test/pages/SearchField.html
@@ -38,6 +38,10 @@
 			<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
 		</ui5-search-field>
 	</div>
+	<ui5-label>Advanced filtering search</ui5-label>
+	<ui5-search-field>
+			<ui5-button slot="advancedFilter" icon="filter"></ui5-button>
+	</ui5-search-field>
 	<div class="container" style="padding-top: 1rem; display: flex; flex-direction: column;">
 		<ui5-label>Collapsed search</ui5-label>
 		<div class="container" style="border: 1px solid black; display: flex; padding: 4px; justify-content: flex-end;">
diff --git a/packages/website/docs/_components_pages/fiori/Search/Search.mdx b/packages/website/docs/_components_pages/fiori/Search/Search.mdx
index 1617ec270d85..d086c7dc8cba 100644
--- a/packages/website/docs/_components_pages/fiori/Search/Search.mdx
+++ b/packages/website/docs/_components_pages/fiori/Search/Search.mdx
@@ -4,6 +4,7 @@ sidebar_class_name: newComponentBadge
 
 import Basic from "../../../_samples/fiori/Search/Basic/Basic.md";
 import Advanced from "../../../_samples/fiori/Search/Advanced/Advanced.md";
+import AdvancedFilter from "../../../_samples/fiori/Search/AdvancedFilter/AdvancedFilter.md"
 
 <%COMPONENT_OVERVIEW%>
 
@@ -17,6 +18,10 @@ A Search component with enabled scope and items and filtering by scope.
 ## More Samples
 
 ### Filtering
-The examples shows Search Message Area, Search Action, filtering per user input, typeahead and highlighting suggestions per user input.
+The examples show the search message area, the search action, filtering per user input, typeahead and highlighting suggestions per user input.
 
-<Advanced />
\ No newline at end of file
+<Advanced />
+
+### Advanced Filtering Button
+This example shows how to use a custom advanced filtering button via the `advancedFilter` slot.
+<AdvancedFilter />
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/Search/AdvancedFilter/AdvancedFilter.md b/packages/website/docs/_samples/fiori/Search/AdvancedFilter/AdvancedFilter.md
new file mode 100644
index 000000000000..66ccdc236d97
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/Search/AdvancedFilter/AdvancedFilter.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/Search/AdvancedFilter/main.js b/packages/website/docs/_samples/fiori/Search/AdvancedFilter/main.js
new file mode 100644
index 000000000000..c0e57797b24e
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/Search/AdvancedFilter/main.js
@@ -0,0 +1,9 @@
+import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents/dist/Toast.js";
+import "@ui5/webcomponents-fiori/dist/Search.js";
+import "@ui5/webcomponents-icons/dist/filter.js";
+
+const toast = document.getElementById("advancedFilterToast");
+document.getElementById("advancedButton").addEventListener("click", () => {
+    toast.open = true;
+});
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/Search/AdvancedFilter/sample.html b/packages/website/docs/_samples/fiori/Search/AdvancedFilter/sample.html
new file mode 100644
index 000000000000..38a32ad190ae
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/Search/AdvancedFilter/sample.html
@@ -0,0 +1,22 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor); height: 350px">
+	<!-- playground-fold-end -->
+	<ui5-search id="advancedFiltering" placeholder="Start typing ...">
+		<ui5-button id="advancedButton" slot="advancedFilter" icon="sap-icon://filter"></ui5-button>
+	</ui5-search>
+	<ui5-toast id="advancedFilterToast" placement="BottomCenter">Search refined using advanced filters</ui5-toast>
+	<!-- playground-fold -->
+	<script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
\ No newline at end of file


Reviews:
user: login: elenastoyanovaa
body: Add a sample in the playground as well.
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T07:35:12Z
user: login: elenastoyanovaa
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T10:04:27Z
user: login: elenastoyanovaa
body: <img width="75" alt="Screenshot 2025-05-14 at 17 04 25" src="https://github.com/user-attachments/assets/56ea34b0-3797-4e9c-b912-584c17dfefec" />
fiori 3 on focus, not looking good
<img width="67" alt="Screenshot 2025-05-14 at 17 05 49" src="https://github.com/user-attachments/assets/6128d7db-b456-49a5-9ed9-925b7a7f529e" />
fiori 3 on hover not looking good

See collapsed search in Search.html for reference for fiori 3

state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T14:09:20Z
user: login: elenastoyanovaa
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T04:35:49Z
user: login: LilyanaOviPe
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T07:13:38Z

Review comments:
diff_hunk: @@ -158,6 +158,13 @@ class SearchField extends UI5Element {
 	@slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })
 	scopes!: Array<ISearchScope>;
 
+	/**
+ 	* Defines the slot for advanced filtering.
+ 	* @public
path: packages/fiori/src/SearchField.ts
user: login: elenastoyanovaa
body: It should be an Array<IButton> like in other components and state in the documentation that they should use a ui5-button, for example this is the documentation for the Delete Button in the List Item, but you can check other compoennts as well

```
	/**
	 * Defines the delete button, displayed in "Delete" mode.
	 * **Note:** While the slot allows custom buttons, to match
	 * design guidelines, please use the `ui5-button` component.
	 * **Note:** When the slot is not present, a built-in delete button will be displayed.
	 * @since 1.9.0
	 * @public
	*/
	@slot()
	deleteButton!: Array<IButton>;
```

and a since tag as well and add UA to review the change
created_at: 2025-05-13T07:31:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,7 +1,9 @@
 :root {
 	--_ui5_search_icon_border_radius: 1.125rem;
+	--_ui5_button_focused_border_radius: 1.125rem;
path: packages/fiori/src/themes/base/SearchField-parameters.css
user: login: elenastoyanovaa
body: Don't overwrite other component css vars (we do it only when we have no choice). Instead create ui5 search button specific var and use it in your css.
created_at: 2025-05-13T07:34:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -19,6 +19,7 @@ import {
 	SEARCH_FIELD_CLEAR_ICON,
 	SEARCH_FIELD_SEARCH_ICON,
 } from "./generated/i18n/i18n-defaults.js";
+import type Button from "@ui5/webcomponents/dist/Button.js";
path: packages/fiori/src/SearchField.ts
user: login: elenastoyanovaa
body: move it to the other types imports for consistency
created_at: 2025-05-14T10:02:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -159,11 +160,16 @@ class SearchField extends UI5Element {
 	scopes!: Array<ISearchScope>;
 
 	/**
- 	* Defines the slot for advanced filtering.
- 	* @public
- 	*/
+	 * Defines the advanced filter slot, used to display an additional filtering button.
+	 * This slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.
+	 *
+	 * **Note:** If no content is provided in this slot, the advanced filtering button will not be rendered.
path: packages/fiori/src/SearchField.ts
user: login: elenastoyanovaa
body: the last note could be removed
created_at: 2025-05-14T10:03:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -15,6 +14,7 @@
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
 	--_ui5_search_wrapper_outline: none;
 	--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
+	--_ui5_search_advanced_button_border_radius: 0.375rem;
path: packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css
user: login: elenastoyanovaa
body: did you check fiori 3, is it okay there?
created_at: 2025-05-14T10:04:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -19,4 +20,8 @@ A Search component with enabled scope and items and filtering by scope.
 ### Filtering
 The examples shows Search Message Area, Search Action, filtering per user input, typeahead and highlighting suggestions per user input.
path: packages/website/docs/_components_pages/fiori/Search/Search.mdx
user: login: LilyanaOviPe
body: Since there are several examples, it should be 'The examples show'. Also, I don't think we need to capitalize any of them. I'd suggest: The examples show the search message area, the search action, filtering per user input, typeahead and highlighting suggestions per user input.
created_at: 2025-05-23T06:56:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -38,6 +38,10 @@
 			<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
 		</ui5-search-field>
 	</div>
+	<ui5-label>advanced filtering search</ui5-label>
path: packages/fiori/test/pages/SearchField.html
user: login: LilyanaOviPe
body: Advanced filtering search
created_at: 2025-05-23T07:04:45Z
author_association: CONTRIBUTOR

PR comments:
user: login: nnaydenow
created_at: 2025-04-29T11:26:54Z
body: Button's border radius could be changed using `_ui5_button_focused_border_radius` var as it is used in other components.
author_association: CONTRIBUTOR
user: login: elenastoyanovaa
created_at: 2025-05-13T07:35:53Z
body: Add JIRA ID in the PR.
author_association: CONTRIBUTOR
user: login: elenastoyanovaa
created_at: 2025-05-15T08:36:39Z
body: Regular focus: 
<img width="230" alt="Screenshot 2025-05-15 at 11 32 06" src="https://github.com/user-attachments/assets/92f20d85-e6d4-4c72-998e-4ffa3c091820" />
Focused hover:
<img width="214" alt="Screenshot 2025-05-15 at 11 32 18" src="https://github.com/user-attachments/assets/f681b9c9-2da3-4035-ab36-498667f9b674" />

Compared to collapsed search on focus:
<img width="308" alt="Screenshot 2025-05-15 at 11 33 05" src="https://github.com/user-attachments/assets/8419e6bb-2ad3-47ae-b433-14c4ffdd7b18" />
focused collapsed search on hover:
<img width="223" alt="Screenshot 2025-05-15 at 11 33 09" src="https://github.com/user-attachments/assets/13b0e4ab-f3bf-408c-810b-2ff625610338" />

author_association: CONTRIBUTOR
user: login: ui5-webcomponents-bot
created_at: 2025-05-29T08:19:47Z
body: :tada: This PR is included in version v2.11.0-rc.3 :tada:

The release is available on [v2.11.0-rc.3](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0-rc.3)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR