From 61eeaec56b29b4d916618c399180eccac80cfe41 Mon Sep 17 00:00:00 2001
From: metart43 <artem.metelskyi@ft.com>
Date: Tue, 13 Aug 2024 16:53:58 +0100
Subject: [PATCH 01/11] backstage: run linter on `_search.scss`

---
 .../o-header/src/scss/features/_search.scss   | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/components/o-header/src/scss/features/_search.scss b/components/o-header/src/scss/features/_search.scss
index 44ae3e55f1..636cbb72b5 100644
--- a/components/o-header/src/scss/features/_search.scss
+++ b/components/o-header/src/scss/features/_search.scss
@@ -6,7 +6,7 @@
 		padding-bottom: $_o-header-padding-y;
 		text-align: center;
 
-		&[aria-hidden="false"] {
+		&[aria-hidden='false'] {
 			display: block;
 		}
 	}
@@ -47,19 +47,25 @@
 	}
 
 	.o-header__search-submit {
-		@include oButtonsContent($opts: (
-			'type': 'primary',
-			'icon-only': true,
-			'icon': 'search',
-			'size': 'big'
-		));
+		@include oButtonsContent(
+			$opts: (
+				'type': 'primary',
+				'icon-only': true,
+				'icon': 'search',
+				'size': 'big',
+			)
+		);
 		margin-left: $_o-header-padding-x;
 		padding-left: 40px;
 		background-position: inherit;
 	}
 
 	.o-header__search-close {
-		@include oIconsContent('cross', _oHeaderGet('search-close'), $size: $_o-header-icon-size-large);
+		@include oIconsContent(
+			'cross',
+			_oHeaderGet('search-close'),
+			$size: $_o-header-icon-size-large
+		);
 		border: 0;
 		margin-left: $_o-header-padding-x;
 		vertical-align: middle;

From 8fd4797883382edde85343eee3bb09478f4509a9 Mon Sep 17 00:00:00 2001
From: metart43 <artem.metelskyi@ft.com>
Date: Tue, 13 Aug 2024 17:00:29 +0100
Subject: [PATCH 02/11] backstage: run linter on `_variables.scss`

---
 components/o-header/src/scss/_variables.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/o-header/src/scss/_variables.scss b/components/o-header/src/scss/_variables.scss
index 8294ac9c20..a24254fc66 100644
--- a/components/o-header/src/scss/_variables.scss
+++ b/components/o-header/src/scss/_variables.scss
@@ -29,4 +29,5 @@ $_o-header-icon-size-large: 40;
 $_o-header-icon-size: 25;
 $_o-header-icon-size-small: 15;
 
-$_o-header-features: 'top', 'subnav', 'search', 'nav', 'anon', 'drawer', 'megamenu', 'sticky', 'simple', 'transparent';
+$_o-header-features: 'top', 'subnav', 'search', 'nav', 'anon', 'drawer',
+	'megamenu', 'sticky', 'simple', 'transparent';

From 838a3f98c90e6ab7cc70df2f4c4340dafbea80b5 Mon Sep 17 00:00:00 2001
From: metart43 <artem.metelskyi@ft.com>
Date: Tue, 13 Aug 2024 18:41:07 +0100
Subject: [PATCH 03/11] feat!: (o-header) Rework search & close buttons

---
 components/o-header/src/scss/_variables.scss  |  2 +-
 .../o-header/src/scss/features/_search.scss   | 29 ++++++++-----------
 components/o-header/src/tsx/search.tsx        |  8 +++--
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/components/o-header/src/scss/_variables.scss b/components/o-header/src/scss/_variables.scss
index a24254fc66..f8f2e1b8ba 100644
--- a/components/o-header/src/scss/_variables.scss
+++ b/components/o-header/src/scss/_variables.scss
@@ -2,7 +2,7 @@ $o-header-is-silent: true !default;
 
 $_o-header-column-item-margin-s: 10px;
 $_o-header-column-item-margin-l: 20px;
-$_o-header-padding-x: 14px;
+$_o-header-padding-x: 12px;
 $_o-header-padding-y: 8px;
 $_o-header-buttons-theme: 'mono';
 $_o-header-mega-padding-x: 24px;
diff --git a/components/o-header/src/scss/features/_search.scss b/components/o-header/src/scss/features/_search.scss
index 636cbb72b5..b88dbbf4fa 100644
--- a/components/o-header/src/scss/features/_search.scss
+++ b/components/o-header/src/scss/features/_search.scss
@@ -46,36 +46,31 @@
 		}
 	}
 
+	.o-header__search-icon {
+		@include oIconsContent($icon-name: 'search', $size: 40, $color: white);
+	}
+
 	.o-header__search-submit {
 		@include oButtonsContent(
 			$opts: (
 				'type': 'primary',
-				'icon-only': true,
-				'icon': 'search',
 				'size': 'big',
 			)
 		);
+		display: flex;
+		gap: 10px;
+		align-items: center;
 		margin-left: $_o-header-padding-x;
-		padding-left: 40px;
+		padding: 0px oSpacingByName('s6') 0px oSpacingByName('s4');
 		background-position: inherit;
 	}
 
 	.o-header__search-close {
-		@include oIconsContent(
-			'cross',
-			_oHeaderGet('search-close'),
-			$size: $_o-header-icon-size-large
-		);
+		@include oTypographySans($scale: 1);
+		text-decoration: underline;
+		background: none;
+		padding: 0;
 		border: 0;
 		margin-left: $_o-header-padding-x;
-		vertical-align: middle;
-		// Match the search button's hover/focus state.
-		&:hover {
-			opacity: 0.75;
-		}
-
-		@include oGridRespondTo($until: 'M') {
-			display: none;
-		}
 	}
 }
diff --git a/components/o-header/src/tsx/search.tsx b/components/o-header/src/tsx/search.tsx
index 09f9d1f38b..78bddfd204 100644
--- a/components/o-header/src/tsx/search.tsx
+++ b/components/o-header/src/tsx/search.tsx
@@ -16,6 +16,7 @@ export function Search() {
 						aria-controls="o-header-search-js"
 						title="Close search bar">
 						<span className="o-header__visually-hidden">Close search bar</span>
+						<span>Close</span>
 					</button>
 				</SearchForm>
 			</div>
@@ -53,9 +54,9 @@ function SearchForm(props) {
 				</span>
 				<span className="o-forms-input o-forms-input--text o-forms-input--suffix">
 					<input
-						id={`o-header-search-term`}
+						id="o-header-search-term"
 						name="q"
-						type="text"
+						type="search"
 						autoComplete="off"
 						autoCorrect="off"
 						autoCapitalize="off"
@@ -63,7 +64,8 @@ function SearchForm(props) {
 						placeholder="Search for stories, topics or securities"
 					/>
 					<button className="o-header__search-submit" type="submit">
-						Search
+						<span aria-hidden="true" className="o-header__search-icon"></span>
+						<span>Search</span>
 					</button>
 					{props.children}
 				</span>

From cbc2c576c1bf436340bc1a2f4175ce55bd1405b0 Mon Sep 17 00:00:00 2001
From: metart43 <artem.metelskyi@ft.com>
Date: Wed, 14 Aug 2024 11:18:19 +0100
Subject: [PATCH 04/11] feat: (o-header) Align the search bar width and color
 according to the new look

---
 components/o-header/src/scss/_variables.scss  |  1 +
 .../o-header/src/scss/features/_search.scss   | 36 ++++++++++++-------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/components/o-header/src/scss/_variables.scss b/components/o-header/src/scss/_variables.scss
index f8f2e1b8ba..7560ca0f7c 100644
--- a/components/o-header/src/scss/_variables.scss
+++ b/components/o-header/src/scss/_variables.scss
@@ -8,6 +8,7 @@ $_o-header-buttons-theme: 'mono';
 $_o-header-mega-padding-x: 24px;
 $_o-header-mega-padding-y: 18px;
 $_o-header-mega-z-index: 1;
+$_o-header-z-index: 1;
 $_o-header-drawer-z-index: 100;
 $_o-header-drawer-width: 320px;
 $_o-header-drawer-divide-height: 40px;
diff --git a/components/o-header/src/scss/features/_search.scss b/components/o-header/src/scss/features/_search.scss
index b88dbbf4fa..3d941621a4 100644
--- a/components/o-header/src/scss/features/_search.scss
+++ b/components/o-header/src/scss/features/_search.scss
@@ -1,10 +1,18 @@
 @mixin _oHeaderSearch() {
 	.o-header__search {
-		padding-left: 0;
-		padding-right: 0;
-		padding-top: 0;
+		background-color: oColorsByName('white-60');
+		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+		position: absolute;
+		z-index: $_o-header-z-index;
+		width: 100%;
 		padding-bottom: $_o-header-padding-y;
-		text-align: center;
+
+		.o-header__container {
+			max-width: 840px;
+			display: flex;
+			flex-direction: column;
+			margin: 0 auto;
+		}
 
 		&[aria-hidden='false'] {
 			display: block;
@@ -15,14 +23,6 @@
 		display: none;
 	}
 
-	.o-header__search-form {
-		display: flex;
-		align-items: center;
-		margin: 0 auto;
-		max-width: 640px;
-		position: relative;
-	}
-
 	.o-header__search-term {
 		@include oTypographySans($scale: -1);
 		box-sizing: border-box;
@@ -48,6 +48,10 @@
 
 	.o-header__search-icon {
 		@include oIconsContent($icon-name: 'search', $size: 40, $color: white);
+
+		@include oGridRespondTo($until: 'S') {
+			display: none;
+		}
 	}
 
 	.o-header__search-submit {
@@ -63,6 +67,10 @@
 		margin-left: $_o-header-padding-x;
 		padding: 0px oSpacingByName('s6') 0px oSpacingByName('s4');
 		background-position: inherit;
+
+		@include oGridRespondTo($until: 'S') {
+			padding: 0px oSpacingByName('s4');
+		}
 	}
 
 	.o-header__search-close {
@@ -72,5 +80,9 @@
 		padding: 0;
 		border: 0;
 		margin-left: $_o-header-padding-x;
+
+		@include oGridRespondTo($until: 'S') {
+			display: none;
+		}
 	}
 }

From ef7eeb2be28ab1dd38d525469979cf52b8cf0795 Mon Sep 17 00:00:00 2001
From: metart43 <artem.metelskyi@ft.com>
Date: Wed, 14 Aug 2024 11:42:08 +0100
Subject: [PATCH 05/11] fix: (o-header) Fix a11ty issues where `aria-controls`
 atrributes were referencing incorect IDs

---
 components/o-header/src/tsx/search.tsx | 12 ++++++++----
 components/o-header/src/tsx/sticky.tsx | 21 ++++++++++++++-------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/components/o-header/src/tsx/search.tsx b/components/o-header/src/tsx/search.tsx
index 78bddfd204..ba838048c0 100644
--- a/components/o-header/src/tsx/search.tsx
+++ b/components/o-header/src/tsx/search.tsx
@@ -2,9 +2,11 @@
 // 	<!-- Pick only one of the two <div> if you don't need to support both core and enhanced -->
 
 export function Search() {
+	const searchDivId = 'o-header-search';
+
 	return (
 		<div
-			id="o-header-search"
+			id={searchDivId}
 			className="o-header__row o-header__search"
 			role="search"
 			data-o-header-search>
@@ -13,7 +15,7 @@ export function Search() {
 					<button
 						className="o-header__search-close o--if-js"
 						type="button"
-						aria-controls="o-header-search-js"
+						aria-controls={searchDivId}
 						title="Close search bar">
 						<span className="o-header__visually-hidden">Close search bar</span>
 						<span>Close</span>
@@ -38,6 +40,8 @@ export function CoreSearch() {
 }
 
 function SearchForm(props) {
+	const searchFieldId = 'o-header-search-term';
+
 	return (
 		<form
 			className="o-header__search-form"
@@ -45,7 +49,7 @@ function SearchForm(props) {
 			role="search"
 			aria-label="Site search">
 			<label
-				htmlFor="o-header-search-term-js"
+				htmlFor={searchFieldId}
 				className="o-header__search-term o-forms-field o-forms-field--optional">
 				<span className="o-forms-title o-header__visually-hidden">
 					<span className="o-forms-title__main">
@@ -54,7 +58,7 @@ function SearchForm(props) {
 				</span>
 				<span className="o-forms-input o-forms-input--text o-forms-input--suffix">
 					<input
-						id="o-header-search-term"
+						id={searchFieldId}
 						name="q"
 						type="search"
 						autoComplete="off"
diff --git a/components/o-header/src/tsx/sticky.tsx b/components/o-header/src/tsx/sticky.tsx
index d3a5dc27e7..0a0f12258a 100644
--- a/components/o-header/src/tsx/sticky.tsx
+++ b/components/o-header/src/tsx/sticky.tsx
@@ -78,9 +78,12 @@ const Navigation = ({navBarItems}: {navBarItems: TNavMenuItem[]}) => (
 );
 
 const StickySearch = () => {
+	const stickySearchDivId = 'o-header-search-sticky';
+	const inputFieldId = 'o-header-search-term-js';
+
 	return (
 		<div
-			id="o-header-search-sticky"
+			id={stickySearchDivId}
 			className="o-header__row o-header__search o--if-js"
 			role="search"
 			data-o-header-search>
@@ -91,7 +94,7 @@ const StickySearch = () => {
 					role="search"
 					aria-label="Site search">
 					<label
-						htmlFor="o-header-search-term-js"
+						htmlFor={inputFieldId}
 						className="o-header__search-term o-forms-field o-forms-field--optional">
 						<span className="o-forms-title o-header__visually-hidden">
 							<span className="o-forms-title__main">
@@ -100,22 +103,26 @@ const StickySearch = () => {
 						</span>
 						<span className="o-forms-input o-forms-input--text o-forms-input--suffix">
 							<input
-								id="o-header-search-term-js"
+								id={inputFieldId}
 								name="q"
-								type="text"
+								type="search"
 								placeholder="Search for stories, topics or securities"
 							/>
 							<button className="o-header__search-submit" type="submit">
-								Search
+								<span
+									aria-hidden="true"
+									className="o-header__search-icon"></span>
+								<span>Search</span>
 							</button>
 							<button
-								className="o-header__search-close"
+								className="o-header__search-close o--if-js"
 								type="button"
-								aria-controls="o-header-search-sticky"
+								aria-controls={stickySearchDivId}
 								title="Close search bar">
 								<span className="o-header__visually-hidden">
 									Close search bar
 								</span>
+								<span>Close</span>
 							</button>
 						</span>
 					</label>

From 138182c07f81c6fd064488cd4401076ee729e419 Mon Sep 17 00:00:00 2001
From: metart43 <artem.metelskyi@ft.com>
Date: Wed, 14 Aug 2024 12:23:12 +0100
Subject: [PATCH 06/11] feat: (o-header) Hide drawer search for tables &
 display search icon

---
 components/o-header/src/scss/features/_drawer.scss | 2 +-
 components/o-header/src/scss/features/_top.scss    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/o-header/src/scss/features/_drawer.scss b/components/o-header/src/scss/features/_drawer.scss
index 57b15b7a3e..a4cbc68fa3 100644
--- a/components/o-header/src/scss/features/_drawer.scss
+++ b/components/o-header/src/scss/features/_drawer.scss
@@ -140,7 +140,7 @@
 	.o-header__drawer-search {
 		padding: 0px $_o-header-drawer-padding-x;
 
-		@include oGridRespondTo('oHeaderL') {
+		@include oGridRespondTo('M') {
 			display: none;
 		}
 
diff --git a/components/o-header/src/scss/features/_top.scss b/components/o-header/src/scss/features/_top.scss
index 779e2c73a4..b1cb5d70e4 100644
--- a/components/o-header/src/scss/features/_top.scss
+++ b/components/o-header/src/scss/features/_top.scss
@@ -125,7 +125,7 @@
 
 		// when used in tandem with the menu toggle, hide this on smaller screen sizes
 		.o-header__top-icon-link--menu + & {
-			@include oGridRespondTo($until: 'L') {
+			@include oGridRespondTo($until: 'M') {
 				display: none;
 			}
 		}

From 07254c83f7cf1e50528b48f4f83e6cc3a62f9ea1 Mon Sep 17 00:00:00 2001
From: metart43 <artem.metelskyi@ft.com>
Date: Thu, 15 Aug 2024 15:12:17 +0100
Subject: [PATCH 07/11] feat!: (o-header) Add `type="search" to the input field
 inside the drawer

---
 components/o-header/src/tsx/drawer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/o-header/src/tsx/drawer.tsx b/components/o-header/src/tsx/drawer.tsx
index 03fce3195d..55912b8226 100644
--- a/components/o-header/src/tsx/drawer.tsx
+++ b/components/o-header/src/tsx/drawer.tsx
@@ -82,7 +82,7 @@ function DrawerSearch() {
 					<span className="o-forms-input o-forms-input--text o-forms-input--suffix">
 						<input
 							id="o-header-drawer-search-term"
-							type="text"
+							type="search"
 							autoComplete="off"
 							autoCorrect="off"
 							autoCapitalize="off"

From dda1e037d5dfc35163fa08a24b8c9248d40123fa Mon Sep 17 00:00:00 2001
From: metart43 <artem.metelskyi@ft.com>
Date: Tue, 20 Aug 2024 10:03:54 +0100
Subject: [PATCH 08/11] fix: (o-header) tweak the icon size to make sure the
 container is `40px` tall

---
 components/o-header/src/scss/features/_search.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/o-header/src/scss/features/_search.scss b/components/o-header/src/scss/features/_search.scss
index 3d941621a4..2555691318 100644
--- a/components/o-header/src/scss/features/_search.scss
+++ b/components/o-header/src/scss/features/_search.scss
@@ -47,7 +47,7 @@
 	}
 
 	.o-header__search-icon {
-		@include oIconsContent($icon-name: 'search', $size: 40, $color: white);
+		@include oIconsContent($icon-name: 'search', $size: 38, $color: white);
 
 		@include oGridRespondTo($until: 'S') {
 			display: none;

From 2bb450ea9a40769e52b43467657cc609d2c973f2 Mon Sep 17 00:00:00 2001
From: metart43 <artem.metelskyi@ft.com>
Date: Tue, 20 Aug 2024 11:19:46 +0100
Subject: [PATCH 09/11] backstage: add the `o-header` migration guide

---
 components/o-header/MIGRATION.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/components/o-header/MIGRATION.md b/components/o-header/MIGRATION.md
index f81c161651..b0af92616f 100644
--- a/components/o-header/MIGRATION.md
+++ b/components/o-header/MIGRATION.md
@@ -1,5 +1,23 @@
 # Migration Guide
 
+## Migrating from v13 to v14
+
+`o-header v14` includes important markup changes to the search bar. Please review the changelog carefully:
+
+1. **Search Input Field Updates**:
+
+   - As of this writing, the search input field appears in three places:
+     1. `<drawer />` (o-header/src/tsx/drawer.tsx)
+     2. `<sticky />` (o-header/src/tsx/sticky.tsx)
+     3. `<search />` (o-header/src/tsx/search.tsx)
+   - All input tags have had their `type` attributes changed from `type="text"` to `type="search"`. This update benefits screen reader users and ensures the input field has the correct semantic type.
+   - This may be a breaking change if you are migrating to `v14`, especially if you use the `type` attribute to query the input field element. Please check that your selectors work as intended.
+
+2. **UI Changes**:
+   - The `X` button has been replaced with a text button labeled `Close`.
+   - The wrapper containing the search bar now overlays the content underneath it.
+   - There are minor changes to the UI, such as adjustments to the form width and bar height, but these should not affect functionality.
+
 ## Migrating from v12 to v13
 
 o-header v13 includes markup changes to the drawer. This updates the edition switcher; moves the close button to align with where the hamburger icon would be when closed; and updates the search bar both in the drawer and on desktop. To migrate:

From 3ac0b5921226066d586bcfb1744e4bbd3f0420d7 Mon Sep 17 00:00:00 2001
From: metart43 <artem.metelskyi@ft.com>
Date: Wed, 21 Aug 2024 12:26:02 +0100
Subject: [PATCH 10/11] backstage: update the migration guide

---
 components/o-header/MIGRATION.md | 69 ++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/components/o-header/MIGRATION.md b/components/o-header/MIGRATION.md
index b0af92616f..5f075e38a3 100644
--- a/components/o-header/MIGRATION.md
+++ b/components/o-header/MIGRATION.md
@@ -14,10 +14,79 @@
    - This may be a breaking change if you are migrating to `v14`, especially if you use the `type` attribute to query the input field element. Please check that your selectors work as intended.
 
 2. **UI Changes**:
+
    - The `X` button has been replaced with a text button labeled `Close`.
    - The wrapper containing the search bar now overlays the content underneath it.
    - There are minor changes to the UI, such as adjustments to the form width and bar height, but these should not affect functionality.
 
+### 3. Markup Changes
+
+- **Search Button:**
+
+  - The search icon is now its own `span` tag rather than being added in SCSS through `@include oButtonsContent`.
+
+  ```diff
+  - <button class="o-header__search-submit" type="submit">Search</button>
+  + <button class="o-header__search-submit" type="submit">
+  +   <span aria-hidden="true" class="o-header__search-icon"></span>
+  +   <span>Search</span>
+  + </button>
+  ```
+
+- **Close Button:**
+
+  - The Close button is no longer an icon and has a text `<span>` label "Close".
+
+  ```diff
+  - <button
+  -   class="o-header__search-close o--if-js"
+  -   type="button"
+  -   aria-controls="o-header-search-js"
+  -   title="Close search bar"
+  - >
+  -   <span class="o-header__visually-hidden">Close search bar</span>
+  - </button>
+  + <button
+  +   class="o-header__search-close o--if-js"
+  +   type="button"
+  +   aria-controls="o-header-search"
+  +   title="Close search bar"
+  +   data-o-toggle--js="true"
+  +   aria-expanded="true"
+  + >
+  +   <span class="o-header__visually-hidden">Close search bar</span>
+  +   <span>Close</span>
+  + </button>
+  ```
+
+- **Input Fields:**
+
+  - All input fields have had their `type` attributes changed from `text` to `search`. The difference
+    between the three input fields (sticky, drawer, and search containers) is in their `id` attributes. _Check if `id` is correct before copying._
+
+  ```diff
+  - <input
+  -   id="o-header-search-term"
+  -   name="q"
+  -   type="text"
+  -   autocomplete="off"
+  -   autocorrect="off"
+  -   autocapitalize="none"
+  -   spellcheck="false"
+  -   placeholder="Search for stories, topics or securities"
+  - />
+  + <input
+  +   id="o-header-search-term"
+  +   name="q"
+  +   type="search"
+  +   autocomplete="off"
+  +   autocorrect="off"
+  +   autocapitalize="none"
+  +   spellcheck="false"
+  +   placeholder="Search for stories, topics, or securities"
+  + />
+  ```
+
 ## Migrating from v12 to v13
 
 o-header v13 includes markup changes to the drawer. This updates the edition switcher; moves the close button to align with where the hamburger icon would be when closed; and updates the search bar both in the drawer and on desktop. To migrate:

From 8a1618939d5c76af88c09906e247cbf0094a8957 Mon Sep 17 00:00:00 2001
From: metart43 <artem.metelskyi@ft.com>
Date: Wed, 21 Aug 2024 12:36:49 +0100
Subject: [PATCH 11/11] backstage: remove `###`

---
 components/o-header/MIGRATION.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/o-header/MIGRATION.md b/components/o-header/MIGRATION.md
index 5f075e38a3..bbd6bb34be 100644
--- a/components/o-header/MIGRATION.md
+++ b/components/o-header/MIGRATION.md
@@ -19,7 +19,7 @@
    - The wrapper containing the search bar now overlays the content underneath it.
    - There are minor changes to the UI, such as adjustments to the form width and bar height, but these should not affect functionality.
 
-### 3. Markup Changes
+3. Markup Changes
 
 - **Search Button:**