chore: styles updated

Author: ArathyKumar

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

@@ -13,8 +13,7 @@
 }
 
 :host(:focus) #outer,
-:host(:hover) #outer,
-#outer.selected {
+:host(:hover) #outer{
   background-color: #e0e0e0;
 }
 
@@ -37,25 +36,15 @@
 }
 
 input[type="checkbox"] {
-  margin-inline-end: 1em;
-  display: var(--_pf-option-checkboxes-display, none);
-  pointer-events: none;
-  flex: 0 0 auto;
+  display: none;
 }
 
 span {
   flex: 1 1 auto;
 }
 
 svg {
-  font-size: var(--pf-c-select__menu-item-icon--FontSize, var(--pf-global--icon--FontSize--sm, 0.675rem));
-  color: var(--_svg-color, var(--pf-theme--color--accent, #0066cc));
-  width: 1em;
-  height: 1em;
-  margin-inline-start: 1em;
-  text-align: right;
-  flex: 0 0 auto;
-  display: var(--_pf-option-svg-display, block);
+  display: none;
 }
 
 #description {

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

@@ -211,13 +211,13 @@
 
 #toggle {
   background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
+	/* align-items: center; */
 }
 
 #toggle,
 /* #toggle-button, */
 #toggle-input {
   display: flex;
-  align-items: center;
   font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
   font-size: var(--pf-global--FontSize--md, 16px);
   font-weight: var(--pf-global--FontWeight--normal, 400);
@@ -228,11 +228,18 @@
   border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
   border-bottom-color: var(--pf-theme--color--text, #151515);
   justify-content: space-between;
+	/* &:focus{
+		border-radius: 4px;
+		border-bottom: 2px solid #06c;
+	} */
 }
 
 .expanded #toggle {
-  border-bottom-width: 2px;
-  border-bottom-color: var(--pf-theme--color--accent, #0066cc);
+	border-top-left-radius: 4px;
+	border-bottom-left-radius: 4px;
+	border-bottom: 2px solid #06c;
+  /* border-bottom-width: 2px;
+  border-bottom-color: var(--pf-theme--color--accent, #0066cc); */
 }
 
 .disabled #toggle {
@@ -249,6 +256,12 @@
   text-align: left;
   border-radius: 0;
   flex: 1 0 auto;
+	outline: none;
+	&:focus{
+		border: 2px solid #06c;
+		/* border-bottom: none; */
+		border-radius: 4px;
+	}
 }
 
 #toggle-input {
@@ -275,14 +288,18 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	border-radius: 0px;
+}
+
+#close-button svg{
 	position: relative;
 	top: 3px;
 }
 
 
 #toggle-button:focus:before {
-  border-bottom-color: var(--pf-c-search-input__toggle--focus--before--BorderBottomColor);
-  border-bottom-width: var(--pf-c-search-input__toggle--focus--before--BorderBottomWidth);
+  /* border-bottom-color: var(--pf-c-search-input__toggle--focus--before--BorderBottomColor);
+  border-bottom-width: var(--pf-c-search-input__toggle--focus--before--BorderBottomWidth); */
 }
 
 /* #outer.typeahead #toggle-button {
@@ -370,4 +387,10 @@ div.search-icon{
   transform: translateY(-50%);
   display: flex;
   align-items: center;
-}
+}
+
+.expanded #close-button{
+	/* border-bottom-width: 2px;
+  border-bottom-color: var(--pf-theme--color--accent, #0066cc); */
+}
+

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

@@ -76,7 +76,7 @@ export class PfSearchInput extends LitElement {
 
   @query('#toggle-input') private _toggleInput?: HTMLInputElement;
 
-  @query('#toggle-button') private _toggleButton?: PfButton;
+  @query('#toggle-button') private _toggleButton?: HTMLDivElement;
 
   @query('#listbox') private _listbox?: HTMLElement;
 
@@ -174,7 +174,6 @@ export class PfSearchInput extends LitElement {
             ?disabled="${disabled}"
             placeholder="${placeholder || this.#buttonLabel}"
           >
-          <button style="width: 0px; height: 0px; padding: 0px; visibility: hidden;" id="toggle-button"></button>
           <pf-button 
             @click="${this.#OnClose}" 
             ?hidden="${(!expanded && this._toggleInput?.value.trim() === "")}" 
@@ -193,6 +192,7 @@ export class PfSearchInput extends LitElement {
               </path>
             </svg>
           </pf-button>
+          <div style="width: 0px; height: 0px; padding: 0px; visibility: hidden;" id="toggle-button"></div>
         </div>
         <div 
           id="listbox-container"