chore: replace native input with pf-text-input

Author: ArathyKumar

elements/pf-search-input/pf-search-input.css

@@ -242,14 +242,11 @@
   border: none;
   text-align: left;
   border-radius: 0;
-  flex: 1 0 auto;
 }
 
 #toggle-input {
   justify-content: space-between;
-  padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem);
-	padding-left: 2.5rem;
-	width: 90%;
+	min-width: calc(100% - 33px);
 	box-sizing: border-box;
 	max-height: 2.25rem;
 }
@@ -277,7 +274,7 @@
 
 	pf-icon {
 		position: relative;
-		top: 3px;
+		top: 5px;
 	}
 }
 
@@ -377,4 +374,16 @@ div.visually-hidden {
 ::slotted(pf-option[selected]) {
 	--_pf-option-svg-display: none;
 	--_pf-option-selected-background-color: var(--pf-global--BackgroundColor--100, #fff);
+}
+
+pf-text-input {
+	--pf-c-form-control--LineHeight: 36px;
+	--pf-c-form-control--PaddingTop: 0px;
+	--pf-c-form-control--PaddingBottom: 0px;
+	--pf-c-form-control--PaddingLeft: 2.5rem;
+	--pf-c-form-control--BorderWidth: 0px;
+	--pf-c-form-control--Width: 100%;
+
+	border: none;
+	box-sizing: border-box;
 }

elements/pf-search-input/pf-search-input.ts

@@ -15,10 +15,10 @@ import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating
 
 import { arraysAreEquivalent } from '@patternfly/pfe-core/functions/arraysAreEquivalent.js';
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
-
-import styles from './pf-search-input.css';
 import { PfOption } from '../pf-select/pf-option.js';
 import { bound } from '@patternfly/pfe-core/decorators.js';
+import '@patternfly/elements/pf-text-input/pf-text-input.js';
+import styles from './pf-search-input.css';
 
 export class PfSearchChangeEvent extends Event {
   constructor() {
@@ -186,11 +186,13 @@ export class PfSearchInput extends LitElement {
           <div class="search-icon">
             <pf-icon size="md" icon="search" set="fas">search</pf-icon>
           </div>
-          <input 
+          <pf-text-input 
+            icon="search" 
+            accessible-label="search" 
             id="toggle-input"
             ?disabled="${disabled}"
-            placeholder="${placeholder || this.#buttonLabel}"
-          >
+            placeholder="${placeholder || this.#buttonLabel}">
+          </pf-text-input>
           <pf-button 
             @click="${this.#OnClose}" 
             ?hidden="${this.#hideCloseButton()}"