From 17b13615b1c85998ca55f2b3853aeea9c80d9f29 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Sun, 23 Feb 2025 23:31:06 +0530
Subject: [PATCH 01/85] chore: pf-search-input component created

---
 elements/package.json                         |   1 +
 elements/pf-search-input/README.md            |  11 ++
 .../pf-search-input/demo/pf-search-input.html |  12 ++
 .../pf-search-input/docs/pf-search-input.md   |  17 ++
 elements/pf-search-input/pf-search-input.css  |   3 +
 elements/pf-search-input/pf-search-input.ts   | 157 ++++++++++++++++++
 .../test/pf-search-input.e2e.ts               |  25 +++
 .../test/pf-search-input.spec.ts              |  21 +++
 8 files changed, 247 insertions(+)
 create mode 100644 elements/pf-search-input/README.md
 create mode 100644 elements/pf-search-input/demo/pf-search-input.html
 create mode 100644 elements/pf-search-input/docs/pf-search-input.md
 create mode 100644 elements/pf-search-input/pf-search-input.css
 create mode 100644 elements/pf-search-input/pf-search-input.ts
 create mode 100644 elements/pf-search-input/test/pf-search-input.e2e.ts
 create mode 100644 elements/pf-search-input/test/pf-search-input.spec.ts

diff --git a/elements/package.json b/elements/package.json
index 4b159d1d9c..3538d376d0 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -45,6 +45,7 @@
     "./pf-progress-stepper/pf-progress-step.js": "./pf-progress-stepper/pf-progress-step.js",
     "./pf-progress-stepper/pf-progress-stepper.js": "./pf-progress-stepper/pf-progress-stepper.js",
     "./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js",
+    "./pf-search-input/pf-search-input.js": "./pf-search-input/pf-search-input.js",
     "./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
     "./pf-switch/pf-switch.js": "./pf-switch/pf-switch.js",
     "./pf-table/pf-table.js": "./pf-table/pf-table.js",
diff --git a/elements/pf-search-input/README.md b/elements/pf-search-input/README.md
new file mode 100644
index 0000000000..f7e06c1c24
--- /dev/null
+++ b/elements/pf-search-input/README.md
@@ -0,0 +1,11 @@
+# Search Input
+Add a description of the component here.
+
+## Usage
+Describe how best to use this web component along with best practices.
+
+```html
+<pf-search-input>
+
+</pf-search-input>
+```
diff --git a/elements/pf-search-input/demo/pf-search-input.html b/elements/pf-search-input/demo/pf-search-input.html
new file mode 100644
index 0000000000..68136eb3cb
--- /dev/null
+++ b/elements/pf-search-input/demo/pf-search-input.html
@@ -0,0 +1,12 @@
+<pf-search-input></pf-search-input>
+
+<script type="module">
+  import '@patternfly/elements/pf-search-input/pf-search-input.js';
+</script>
+
+<style>
+pf-search-input {
+  /* insert demo styles */
+}
+</style>
+
diff --git a/elements/pf-search-input/docs/pf-search-input.md b/elements/pf-search-input/docs/pf-search-input.md
new file mode 100644
index 0000000000..1945440caa
--- /dev/null
+++ b/elements/pf-search-input/docs/pf-search-input.md
@@ -0,0 +1,17 @@
+{% renderOverview %}
+  <pf-search-input></pf-search-input>
+{% endrenderOverview %}
+
+{% band header="Usage" %}{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
new file mode 100644
index 0000000000..5d4e87f30f
--- /dev/null
+++ b/elements/pf-search-input/pf-search-input.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
new file mode 100644
index 0000000000..794217b6f1
--- /dev/null
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -0,0 +1,157 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { ComboboxController } from '@patternfly/pfe-core/controllers/combobox-controller.js';
+import { query } from 'lit/decorators/query.js';
+import { property } from 'lit/decorators/property.js';
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
+import {
+  FloatingDOMController,
+  type Placement,
+} from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import '@patternfly/elements/pf-text-input/pf-text-input.js';
+
+import styles from './pf-search-input.css';
+
+/**
+ * Search Input
+ * @slot - Place element content here
+ */
+@customElement('pf-search-input')
+export class PfSearchInput extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  @property({ type: Boolean, reflect: true }) expanded = false;
+  @property({ reflect: true }) position: Placement = 'bottom';
+  @property({ attribute: 'enable-flip', type: Boolean }) enableFlip = false;
+
+  @query('#listbox') listbox!: HTMLElement;
+  @query('#button') button!: HTMLButtonElement;
+  @query('#combobox') combobox!: HTMLInputElement;
+  @query('#placeholder') placeholder!: HTMLOptionElement;
+  @query('#listbox-container') private _listboxContainer?: HTMLElement;
+
+
+  #float = new FloatingDOMController(this, { content: () => this._listboxContainer });
+
+
+  static template: TemplateResult<1> = html`
+    <pf-text-input-autocomplete></pf-text-input-autocomplete>`;
+
+  controller: ComboboxController<HTMLOptionElement> = ComboboxController.of(this, {
+    multi: false,
+    getItems: () => this.options,
+    isItem: item => item instanceof HTMLOptionElement,
+    getFallbackLabel: () => 'options',
+    getListboxElement: () => this.listbox ?? null,
+    getToggleButton: () => this.button ?? null,
+    getComboboxInput: () => this.combobox ?? null,
+    isExpanded: () => this.expanded,
+    requestShowListbox: () => void (this.expanded ||= true),
+    requestHideListbox: () => void (this.expanded &&= false),
+    setItemActive: (item, active) => item.classList.toggle('active', active),
+    setItemSelected: (item, selected) => item.selected = selected,
+  });
+
+
+  /** List of options */
+  get options(): HTMLOptionElement[] {
+    return [
+      ...new Set([
+        this.placeholder,
+        ...this.querySelectorAll('option'),
+        ...this.renderRoot.querySelectorAll('option'),
+      ]),
+    ].filter(x => !!x);
+  }
+
+  get selected(): HTMLOptionElement[] {
+    return this.options.filter(x => x.selected);
+  }
+
+  get activeOption(): HTMLOptionElement | undefined {
+    return this.options.find(x => x.classList.contains('active'));
+  }
+
+
+  render(): TemplateResult<1> {
+    return html`
+      <input id="combobox">
+      <button id="button">Show Options</button>
+      <div id="listbox" ?hidden="${!this.expanded}">
+        <option id="placeholder" aria-disabled="true">Select an Option</option>
+        <option>1</option>
+        <option>2</option>
+        <option>31</option>
+        <option>41</option>
+        <option>52</option>
+        <option>63</option>
+        <option>74</option>
+        <option>8</option>
+        <option>9</option>
+        <option>10</option>
+      </div>
+    `;
+  }
+
+  @observes('expanded')
+  private async expandedChanged(old: boolean, expanded: boolean) {
+    if (this.dispatchEvent(new Event(this.expanded ? 'close' : 'open'))) {
+      if (expanded) {
+        this.#doExpand();
+      } else {
+        this.#doCollapse();
+      }
+    }
+  }
+
+  async #doExpand() {
+    try {
+      await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  async #doCollapse() {
+    try {
+      await this.#float.hide();
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Opens the dropdown
+   */
+  async show(): Promise<void> {
+    this.expanded = true;
+    await this.updateComplete;
+  }
+
+  /**
+   * Closes listbox
+   */
+  async hide(): Promise<void> {
+    this.expanded = false;
+    await this.updateComplete;
+  }
+
+  /**
+   * toggles popup based on current state
+   */
+  async toggle(): Promise<void> {
+    if (this.expanded) {
+      await this.hide();
+    } else {
+      await this.show();
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-search-input': PfSearchInput;
+  }
+}
diff --git a/elements/pf-search-input/test/pf-search-input.e2e.ts b/elements/pf-search-input/test/pf-search-input.e2e.ts
new file mode 100644
index 0000000000..b1d9dbb21a
--- /dev/null
+++ b/elements/pf-search-input/test/pf-search-input.e2e.ts
@@ -0,0 +1,25 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
+
+const tagName = 'pf-search-input';
+
+test.describe(tagName, () => {
+  test('snapshot', async ({ page }) => {
+    const componentPage = new PfeDemoPage(page, tagName);
+    await componentPage.navigate();
+    await componentPage.snapshot();
+  });
+
+  test('ssr', async ({ browser }) => {
+    const fixture = new SSRPage({
+      tagName,
+      browser,
+      demoDir: new URL('../demo/', import.meta.url),
+      importSpecifiers: [
+        `@patternfly/elements/${tagName}/${tagName}.js`,
+      ],
+    });
+    await fixture.snapshots();
+  });
+});
diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
new file mode 100644
index 0000000000..02aa8097cc
--- /dev/null
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -0,0 +1,21 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfSearchInput } from '@patternfly/elements/pf-search-input/pf-search-input.js';
+
+describe('<pf-search-input>', function() {
+  describe('simply instantiating', function() {
+    let element: PfSearchInput;
+    it('imperatively instantiates', function() {
+      expect(document.createElement('pf-search-input')).to.be.an.instanceof(PfSearchInput);
+    });
+
+    it('should upgrade', async function() {
+      element = await createFixture<PfSearchInput>(html`<pf-search-input></pf-search-input>`);
+      const klass = customElements.get('pf-search-input');
+      expect(element)
+          .to.be.an.instanceOf(klass)
+          .and
+          .to.be.an.instanceOf(PfSearchInput);
+    });
+  });
+});

From 03d0269fc5dec4ed598990e32c44dcd446c2bd09 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 24 Feb 2025 00:42:37 +0530
Subject: [PATCH 02/85] chore: search input updated

---
 .../demo/pf-search-input-autocomplete.html    | 12 +++
 elements/pf-search-input/pf-search-input.ts   | 76 ++++++++++++++-----
 2 files changed, 68 insertions(+), 20 deletions(-)
 create mode 100644 elements/pf-search-input/demo/pf-search-input-autocomplete.html

diff --git a/elements/pf-search-input/demo/pf-search-input-autocomplete.html b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
new file mode 100644
index 0000000000..68136eb3cb
--- /dev/null
+++ b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
@@ -0,0 +1,12 @@
+<pf-search-input></pf-search-input>
+
+<script type="module">
+  import '@patternfly/elements/pf-search-input/pf-search-input.js';
+</script>
+
+<style>
+pf-search-input {
+  /* insert demo styles */
+}
+</style>
+
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 794217b6f1..a337de0c6f 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -9,7 +9,8 @@ import {
   type Placement,
 } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 import '@patternfly/elements/pf-text-input/pf-text-input.js';
-
+import { arraysAreEquivalent } from '@patternfly/pfe-core/functions/arraysAreEquivalent.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
 import styles from './pf-search-input.css';
 
 /**
@@ -34,16 +35,16 @@ export class PfSearchInput extends LitElement {
   #float = new FloatingDOMController(this, { content: () => this._listboxContainer });
 
 
-  static template: TemplateResult<1> = html`
-    <pf-text-input-autocomplete></pf-text-input-autocomplete>`;
+  // static template: TemplateResult<1> = html`
+  //   <pf-text-input-autocomplete></pf-text-input-autocomplete>`;
 
-  controller: ComboboxController<HTMLOptionElement> = ComboboxController.of(this, {
+  #combobox: ComboboxController<HTMLOptionElement> = ComboboxController.of(this, {
     multi: false,
     getItems: () => this.options,
     isItem: item => item instanceof HTMLOptionElement,
     getFallbackLabel: () => 'options',
     getListboxElement: () => this.listbox ?? null,
-    getToggleButton: () => this.button ?? null,
+    getToggleButton: () => this.combobox ?? null,
     getComboboxInput: () => this.combobox ?? null,
     isExpanded: () => this.expanded,
     requestShowListbox: () => void (this.expanded ||= true),
@@ -52,6 +53,15 @@ export class PfSearchInput extends LitElement {
     setItemSelected: (item, selected) => item.selected = selected,
   });
 
+  /**
+   * Single select option value for single select menus,
+   * or array of select option values for multi select.
+   */
+  @property({ hasChanged: (a, b) => !arraysAreEquivalent(a, b) })
+  set selected(selected: any) {
+    const list = Array.isArray(selected) ? selected : [selected];
+    this.#combobox.selected = list;
+  }
 
   /** List of options */
   get options(): HTMLOptionElement[] {
@@ -72,23 +82,49 @@ export class PfSearchInput extends LitElement {
     return this.options.find(x => x.classList.contains('active'));
   }
 
-
+  //<input id="combobox">
   render(): TemplateResult<1> {
     return html`
-      <input id="combobox">
-      <button id="button">Show Options</button>
-      <div id="listbox" ?hidden="${!this.expanded}">
-        <option id="placeholder" aria-disabled="true">Select an Option</option>
-        <option>1</option>
-        <option>2</option>
-        <option>31</option>
-        <option>41</option>
-        <option>52</option>
-        <option>63</option>
-        <option>74</option>
-        <option>8</option>
-        <option>9</option>
-        <option>10</option>
+      <pf-text-input id="combobox" type="text" placeholder="Placeholder"></pf-text-input> 
+        <pf-button disabled plain label="Close">
+          <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
+            <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 
+            0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 
+            189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 
+            0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 
+            356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 
+            12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 
+            44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
+            </path>
+        </svg>
+      </pf-button>
+      <pf-button disabled plain label="Search">
+        <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
+          <path d="M256.233,5.756c-71.07,15.793-141.44,
+          87.863-155.834,159.233c-11.495,57.076,0.3,111.153,
+          27.688,154.335L6.339,441.172c-8.596,8.596-8.596,
+          22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,
+          8.596,30.987,0L192.26,383.796c43.282,
+          27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,
+          159.632-155.934C540.212,104.314,407.968-27.93,256.233,
+          5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944
+          S171.969,281.239,171.969,208.37S231.043,76.426,303.913,
+          76.426S435.857,135.501,435.857,208.37z">
+          </path>
+        </svg>
+      </pf-button>
+      <div id="listbox-container">
+        <div id="listbox" ?hidden="${!this.expanded}">
+          <option id="placeholder" aria-disabled="true">Select an Option</option>
+          <optgroup label="Swedish Cars">
+            <option value="volvo">Volvo</option>
+            <option value="saab">Saab</option>
+          </optgroup>
+          <optgroup label="German Cars">
+            <option value="mercedes">Mercedes</option>
+            <option value="audi">Audi</option>
+          </optgroup>
+        </div>
       </div>
     `;
   }

From d567bf5fce6f01f1bf31f86f0bcc9929177824ef Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Wed, 19 Mar 2025 19:21:42 +0530
Subject: [PATCH 03/85] chore: search input option added

---
 elements/package.json                         |   1 +
 .../pf-search-input/demo/pf-search-input.html |   7 +-
 .../pf-search-input-option.css                |   3 +
 .../pf-search-input/pf-search-input-option.ts | 115 ++++++++++++++++++
 elements/pf-search-input/pf-search-input.ts   | 109 ++++++++++++-----
 5 files changed, 205 insertions(+), 30 deletions(-)
 create mode 100644 elements/pf-search-input/pf-search-input-option.css
 create mode 100644 elements/pf-search-input/pf-search-input-option.ts

diff --git a/elements/package.json b/elements/package.json
index 3538d376d0..62a7846663 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -46,6 +46,7 @@
     "./pf-progress-stepper/pf-progress-stepper.js": "./pf-progress-stepper/pf-progress-stepper.js",
     "./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js",
     "./pf-search-input/pf-search-input.js": "./pf-search-input/pf-search-input.js",
+    "./pf-search-input/pf-search-input-option.js":"./pf-search-input/pf-search-input-option.js",
     "./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
     "./pf-switch/pf-switch.js": "./pf-switch/pf-switch.js",
     "./pf-table/pf-table.js": "./pf-table/pf-table.js",
diff --git a/elements/pf-search-input/demo/pf-search-input.html b/elements/pf-search-input/demo/pf-search-input.html
index 68136eb3cb..d88a8eed2e 100644
--- a/elements/pf-search-input/demo/pf-search-input.html
+++ b/elements/pf-search-input/demo/pf-search-input.html
@@ -1,4 +1,9 @@
-<pf-search-input></pf-search-input>
+<pf-search-input>
+  <pf-search-input-option value="New Jersey">New Jersey</pf-search-input-option>
+  <pf-search-input-option value="New York">New York</pf-search-input-option>
+  <pf-search-input-option value="New Mexico">New Mexico</pf-search-input-option>
+  <pf-search-input-option value="North Carolina">North Carolina</pf-search-input-option>
+</pf-search-input>
 
 <script type="module">
   import '@patternfly/elements/pf-search-input/pf-search-input.js';
diff --git a/elements/pf-search-input/pf-search-input-option.css b/elements/pf-search-input/pf-search-input-option.css
new file mode 100644
index 0000000000..5d4e87f30f
--- /dev/null
+++ b/elements/pf-search-input/pf-search-input-option.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/elements/pf-search-input/pf-search-input-option.ts b/elements/pf-search-input/pf-search-input-option.ts
new file mode 100644
index 0000000000..041ff25653
--- /dev/null
+++ b/elements/pf-search-input/pf-search-input-option.ts
@@ -0,0 +1,115 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
+import { property } from 'lit/decorators/property.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
+import styles from './pf-search-input-option.css';
+
+/**
+ * Search Input Pf Search Input Option
+ * @slot - Place element content here
+ */
+@customElement('pf-search-input-option')
+export class PfSearchInputOption extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+    /** form value for this option */
+    @property({ reflect: true })
+    get value() {
+      return (this.#value ?? this.textContent ?? '').trim();
+    }
+  
+    set value(v: string) {
+      this.#value = v;
+    }
+  
+    /** whether option is selected */
+    @property({ type: Boolean, reflect: true }) selected = false;
+  
+    /** whether option is active descendant */
+    @property({ type: Boolean, reflect: true }) active = false;
+
+    @queryAssignedNodes({ slot: '', flatten: true })
+    private _slottedText!: Node[];
+  
+    /**
+     * this option's position relative to the other options
+     */
+    set posInSet(posInSet: number | null) {
+      this.#internals.ariaPosInSet = `${Math.max(0, posInSet ?? 0)}`;
+    }
+  
+    get posInSet() {
+      const parsed = parseInt(this.#internals.ariaPosInSet ?? '0');
+      return Number.isNaN(parsed) ? null : parsed;
+    }
+  
+    /**
+     * total number of options
+     */
+    set setSize(setSize: number | null) {
+      this.#internals.ariaSetSize = `${Math.max(0, setSize ?? 0)}`;
+    }
+  
+    get setSize() {
+      try {
+        const int = parseInt(this.#internals.ariaSetSize ?? '0');
+        if (Number.isNaN(int)) {
+          return 0;
+        } else {
+          return int;
+        }
+      } catch {
+        return 0;
+      }
+    }
+  
+    #value?: string;
+  
+    #internals = InternalsController.of(this, { role: 'option' });
+  
+
+  render(): TemplateResult<1> {
+    const { active, selected } = this;
+    return html`
+      <div id="outer" class="${classMap({ active, selected })}">
+        <input type="checkbox"
+               inert
+               role="presentation"
+               tabindex="-1"
+               ?checked="${this.selected}">
+        <slot name="icon"></slot>
+        <span>
+          <slot name="create"></slot>
+          <slot>${this.value}</slot>
+        </span>
+        <svg ?hidden="${!this.selected}"
+             viewBox="0 0 512 512"
+             fill="currentColor"
+             aria-hidden="true">
+          <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
+        </svg>
+      </div>
+    `;
+  }
+
+  @observes('selected')
+  private selectedChanged() {
+    this.#internals.ariaSelected = String(!!this.selected);
+  }
+
+  /**
+   * text content within option (used for filtering)
+   */
+  get optionText(): string {
+    return this._slottedText.map(node => node.textContent).join('').trim();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-search-input-option': PfSearchInputOption;
+  }
+}
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index a337de0c6f..67085ca109 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -1,18 +1,29 @@
-import { LitElement, html, type TemplateResult } from 'lit';
+import { LitElement, html, isServer, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { ComboboxController } from '@patternfly/pfe-core/controllers/combobox-controller.js';
 import { query } from 'lit/decorators/query.js';
 import { property } from 'lit/decorators/property.js';
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import {
   FloatingDOMController,
   type Placement,
 } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import '@patternfly/elements/pf-text-input/pf-text-input.js';
 import { arraysAreEquivalent } from '@patternfly/pfe-core/functions/arraysAreEquivalent.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
+import { PfSearchInputOption } from './pf-search-input-option.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './pf-search-input.css';
 
+export class PfSelectChangeEvent extends Event {
+  constructor() {
+    super('change', { bubbles: true });
+  }
+}
+
 /**
  * Search Input
  * @slot - Place element content here
@@ -24,24 +35,33 @@ export class PfSearchInput extends LitElement {
   @property({ type: Boolean, reflect: true }) expanded = false;
   @property({ reflect: true }) position: Placement = 'bottom';
   @property({ attribute: 'enable-flip', type: Boolean }) enableFlip = false;
-
+   /** Current form value */
+   @property() value?: string;
+   @property() variant: 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti' = 'single';
   @query('#listbox') listbox!: HTMLElement;
   @query('#button') button!: HTMLButtonElement;
   @query('#combobox') combobox!: HTMLInputElement;
-  @query('#placeholder') placeholder!: HTMLOptionElement;
+  @query('#placeholder') placeholder!: PfSearchInputOption;
   @query('#listbox-container') private _listboxContainer?: HTMLElement;
 
+  #isNotPlaceholderOption = (option: PfSearchInputOption) => option !== this.placeholder;
+
 
   #float = new FloatingDOMController(this, { content: () => this._listboxContainer });
 
+  #internals = InternalsController.of(this);
+
+  #slots = new SlotController(this, null, 'placeholder');
+
+
 
   // static template: TemplateResult<1> = html`
   //   <pf-text-input-autocomplete></pf-text-input-autocomplete>`;
 
-  #combobox: ComboboxController<HTMLOptionElement> = ComboboxController.of(this, {
-    multi: false,
+  #combobox = ComboboxController.of(this, {
+    multi: this.variant === 'typeaheadmulti' || this.variant === 'checkbox',
     getItems: () => this.options,
-    isItem: item => item instanceof HTMLOptionElement,
+    isItem: item => item instanceof PfSearchInputOption,
     getFallbackLabel: () => 'options',
     getListboxElement: () => this.listbox ?? null,
     getToggleButton: () => this.combobox ?? null,
@@ -51,6 +71,7 @@ export class PfSearchInput extends LitElement {
     requestHideListbox: () => void (this.expanded &&= false),
     setItemActive: (item, active) => item.classList.toggle('active', active),
     setItemSelected: (item, selected) => item.selected = selected,
+    setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden)
   });
 
   /**
@@ -63,27 +84,39 @@ export class PfSearchInput extends LitElement {
     this.#combobox.selected = list;
   }
 
+
+
   /** List of options */
-  get options(): HTMLOptionElement[] {
-    return [
-      ...new Set([
+  get options(): PfSearchInputOption[] {
+    if (isServer) {
+      return []; // TODO: expose a DOM property to allow setting options in SSR scenarios
+    } else {
+      return [
         this.placeholder,
-        ...this.querySelectorAll('option'),
-        ...this.renderRoot.querySelectorAll('option'),
-      ]),
-    ].filter(x => !!x);
+        ...Array.from(this.querySelectorAll('pf-search-input-option')),
+      ].filter((x): x is PfSearchInputOption => !!x && !x.hidden);
+    }
   }
 
-  get selected(): HTMLOptionElement[] {
-    return this.options.filter(x => x.selected);
+  get selected(): PfSearchInputOption[] {
+    return this.#combobox.selected;
   }
 
-  get activeOption(): HTMLOptionElement | undefined {
-    return this.options.find(x => x.classList.contains('active'));
-  }
+  // get activeOption(): HTMLOptionElement | undefined {
+  //   return this.options.find(x => x.classList.contains('active'));
+  // }
 
   //<input id="combobox">
   render(): TemplateResult<1> {
+
+    const { expanded, placeholder, variant } = this;
+    const { anchor = 'bottom', alignment = 'start', styles = {} } = this.#float;
+    const { height, width } = this.getBoundingClientRect?.() || {};
+    const placeholderIsInert = !placeholder && this.#slots.isEmpty('placeholder');
+    const hasSelection = !!(Array.isArray(this.selected) ? this.selected.length : this.selected);
+    const typeahead = variant.startsWith('typeahead');
+   const hideLightDomItems = typeahead && !ComboboxController.supportsCrossRootActiveDescendant;
+
     return html`
       <pf-text-input id="combobox" type="text" placeholder="Placeholder"></pf-text-input> 
         <pf-button disabled plain label="Close">
@@ -113,22 +146,34 @@ export class PfSearchInput extends LitElement {
           </path>
         </svg>
       </pf-button>
-      <div id="listbox-container">
-        <div id="listbox" ?hidden="${!this.expanded}">
-          <option id="placeholder" aria-disabled="true">Select an Option</option>
-          <optgroup label="Swedish Cars">
-            <option value="volvo">Volvo</option>
-            <option value="saab">Saab</option>
-          </optgroup>
-          <optgroup label="German Cars">
-            <option value="mercedes">Mercedes</option>
-            <option value="audi">Audi</option>
-          </optgroup>
+      <div id="listbox-container"  ?hidden="${!expanded}"
+             style="${styleMap({
+               marginTop: `${height || 0}px`,
+               width: width ? `${width}px` : 'auto',
+             })}">
+        <div id="listbox">
+             <pf-search-input-option id="placeholder"
+                       disabled
+                       ?inert="${placeholderIsInert}"
+                       aria-hidden="${ifDefined(placeholderIsInert ? undefined : String(!!hasSelection))}"
+                       ?hidden="${!placeholder && this.#slots.isEmpty('placeholder')}"
+            ><slot name="placeholder">${placeholder ?? ''}</slot></pf-search-input-option>
+            ${this.#combobox.renderItemsToShadowRoot()}
+            <slot ?hidden="${hideLightDomItems}"></slot>
         </div>
       </div>
     `;
   }
 
+  @observes('selected')
+  private async selectedChanged(_: PfSearchInputOption[], selected: PfSearchInputOption[]) {
+    this.value = selected.map(x => x.value).join();
+    await this.updateComplete;
+    this.hide();
+   // this._toggleButton?.focus();
+    
+  }
+
   @observes('expanded')
   private async expandedChanged(old: boolean, expanded: boolean) {
     if (this.dispatchEvent(new Event(this.expanded ? 'close' : 'open'))) {
@@ -184,6 +229,12 @@ export class PfSearchInput extends LitElement {
       await this.show();
     }
   }
+
+  @observes('value')
+  private valueChanged() {
+   // this.#internals.setFormValue(this.value ?? '');
+    this.dispatchEvent(new PfSelectChangeEvent());
+  }
 }
 
 declare global {

From 36875aab0269f21fb0fc87e12031935503e5449e Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 20 Mar 2025 13:25:25 +0530
Subject: [PATCH 04/85] chore: pf-search input created

---
 .../demo/pf-search-input-autocomplete.html    |   9 +-
 .../pf-search-input/demo/pf-search-input.html |  14 +-
 .../pf-search-input-option.css                |  70 ++++
 .../pf-search-input/pf-search-input-option.ts | 124 +++---
 elements/pf-search-input/pf-search-input.css  | 376 ++++++++++++++++++
 elements/pf-search-input/pf-search-input.ts   | 306 ++++++++++----
 6 files changed, 760 insertions(+), 139 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input-autocomplete.html b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
index 68136eb3cb..46f2b9c7e5 100644
--- a/elements/pf-search-input/demo/pf-search-input-autocomplete.html
+++ b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
@@ -1,4 +1,11 @@
-<pf-search-input></pf-search-input>
+<pf-search-input variant="typeahead"
+             placeholder="Select a state">
+    <pf-search-input-option value="Alabama"> Alabama </pf-search-input-option>
+    <pf-search-input-option value="New Jersey"> New Jersey </pf-search-input-option>
+    <pf-search-input-option value="New York"> New York </pf-search-input-option>
+    <pf-search-input-option value="New Mexico"> New Mexico </pf-search-input-option>
+    <pf-search-input-option value="North Carolina"> North Carolina </pf-search-input-option>
+  </pf-search-input>
 
 <script type="module">
   import '@patternfly/elements/pf-search-input/pf-search-input.js';
diff --git a/elements/pf-search-input/demo/pf-search-input.html b/elements/pf-search-input/demo/pf-search-input.html
index d88a8eed2e..88c2e63f65 100644
--- a/elements/pf-search-input/demo/pf-search-input.html
+++ b/elements/pf-search-input/demo/pf-search-input.html
@@ -1,8 +1,12 @@
-<pf-search-input>
-  <pf-search-input-option value="New Jersey">New Jersey</pf-search-input-option>
-  <pf-search-input-option value="New York">New York</pf-search-input-option>
-  <pf-search-input-option value="New Mexico">New Mexico</pf-search-input-option>
-  <pf-search-input-option value="North Carolina">North Carolina</pf-search-input-option>
+<pf-search-input placeholder="Select a title"
+             accessible-label="Title">
+    <pf-search-input-option>Mr</pf-search-input-option>
+    <pf-search-input-option>Miss</pf-search-input-option>
+    <pf-search-input-option>Mrs</pf-search-input-option>
+    <pf-search-input-option>Ms</pf-search-input-option>
+    <hr>
+    <pf-search-input-option>Dr</pf-search-input-option>
+    <pf-search-input-option>Other</pf-option>
 </pf-search-input>
 
 <script type="module">
diff --git a/elements/pf-search-input/pf-search-input-option.css b/elements/pf-search-input/pf-search-input-option.css
index 5d4e87f30f..a8c488e628 100644
--- a/elements/pf-search-input/pf-search-input-option.css
+++ b/elements/pf-search-input/pf-search-input-option.css
@@ -1,3 +1,73 @@
 :host {
   display: block;
 }
+
+:host([hidden]),
+*[hidden] {
+  display: none !important;
+}
+
+:host([disabled]) {
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+}
+
+:host(:focus) #outer,
+:host(:hover) #outer,
+#outer.selected {
+  background-color: #e0e0e0;
+}
+
+#outer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--pf-global--spacer--sm, 0.5rem) var(--pf-global--spacer--md, 1rem);
+  min-height: calc(44px - 2 * var(--pf-global--spacer--sm, 0.5rem));
+  min-width: calc(44px - 2 * var(--pf-global--spacer--md, 1rem));
+}
+
+#outer.active {
+  background-color: var(--_active-descendant-color, var(--pf-theme--color--surface--lighter, #f0f0f0));
+}
+
+:host([disabled]) #outer {
+  color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+}
+
+input[type="checkbox"] {
+  margin-inline-end: 1em;
+  display: var(--_pf-option-checkboxes-display, none);
+  pointer-events: none;
+  flex: 0 0 auto;
+}
+
+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);
+}
+
+#description {
+  display: block;
+  flex: 1 0 100%;
+}
+
+slot[name="description"] {
+  font-size: var(--pf-global--FontSize--xs, 0.75rem);
+  color: var(--pf-global--Color--dark-200, #6a6e73);
+}
+
+::slotted([slot="icon"]) {
+  margin-inline-end: 0.5em;
+}
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input-option.ts b/elements/pf-search-input/pf-search-input-option.ts
index 041ff25653..57a6d2ad24 100644
--- a/elements/pf-search-input/pf-search-input-option.ts
+++ b/elements/pf-search-input/pf-search-input-option.ts
@@ -3,7 +3,9 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
+
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 import styles from './pf-search-input-option.css';
 
@@ -15,71 +17,77 @@ import styles from './pf-search-input-option.css';
 export class PfSearchInputOption extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];
 
-    /** form value for this option */
-    @property({ reflect: true })
-    get value() {
-      return (this.#value ?? this.textContent ?? '').trim();
-    }
-  
-    set value(v: string) {
-      this.#value = v;
-    }
-  
-    /** whether option is selected */
-    @property({ type: Boolean, reflect: true }) selected = false;
-  
-    /** whether option is active descendant */
-    @property({ type: Boolean, reflect: true }) active = false;
-
-    @queryAssignedNodes({ slot: '', flatten: true })
-    private _slottedText!: Node[];
-  
-    /**
-     * this option's position relative to the other options
-     */
-    set posInSet(posInSet: number | null) {
-      this.#internals.ariaPosInSet = `${Math.max(0, posInSet ?? 0)}`;
-    }
-  
-    get posInSet() {
-      const parsed = parseInt(this.#internals.ariaPosInSet ?? '0');
-      return Number.isNaN(parsed) ? null : parsed;
-    }
-  
-    /**
-     * total number of options
-     */
-    set setSize(setSize: number | null) {
-      this.#internals.ariaSetSize = `${Math.max(0, setSize ?? 0)}`;
-    }
-  
-    get setSize() {
-      try {
-        const int = parseInt(this.#internals.ariaSetSize ?? '0');
-        if (Number.isNaN(int)) {
-          return 0;
-        } else {
-          return int;
-        }
-      } catch {
+   /** whether option is disabled */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** form value for this option */
+  @property({ reflect: true })
+  get value() {
+    return (this.#value ?? this.textContent ?? '').trim();
+  }
+
+  set value(v: string) {
+    this.#value = v;
+  }
+
+  /** whether option is selected */
+  @property({ type: Boolean, reflect: true }) selected = false;
+
+  /** whether option is active descendant */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  /** Optional option description; overridden by description slot. */
+  @property() description = '';
+
+  @queryAssignedNodes({ slot: '', flatten: true })
+  private _slottedText!: Node[];
+
+  /**
+   * this option's position relative to the other options
+   */
+  set posInSet(posInSet: number | null) {
+    this.#internals.ariaPosInSet = `${Math.max(0, posInSet ?? 0)}`;
+  }
+
+  get posInSet() {
+    const parsed = parseInt(this.#internals.ariaPosInSet ?? '0');
+    return Number.isNaN(parsed) ? null : parsed;
+  }
+
+  /**
+   * total number of options
+   */
+  set setSize(setSize: number | null) {
+    this.#internals.ariaSetSize = `${Math.max(0, setSize ?? 0)}`;
+  }
+
+  get setSize() {
+    try {
+      const int = parseInt(this.#internals.ariaSetSize ?? '0');
+      if (Number.isNaN(int)) {
         return 0;
+      } else {
+        return int;
       }
+    } catch {
+      return 0;
     }
-  
-    #value?: string;
-  
-    #internals = InternalsController.of(this, { role: 'option' });
-  
+  }
+
+  #value?: string;
+
+  #internals = InternalsController.of(this, { role: 'option' });
 
   render(): TemplateResult<1> {
-    const { active, selected } = this;
+    const { disabled, active, selected } = this;
     return html`
-      <div id="outer" class="${classMap({ active, selected })}">
+      <div id="outer" class="${classMap({ active, disabled, selected })}">
         <input type="checkbox"
                inert
                role="presentation"
                tabindex="-1"
-               ?checked="${this.selected}">
+               ?checked="${this.selected}"
+               ?disabled="${this.disabled}">
         <slot name="icon"></slot>
         <span>
           <slot name="create"></slot>
@@ -91,6 +99,7 @@ export class PfSearchInputOption extends LitElement {
              aria-hidden="true">
           <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
         </svg>
+        <slot id="description" name="description">${this.description ?? ''}</slot>
       </div>
     `;
   }
@@ -100,6 +109,11 @@ export class PfSearchInputOption extends LitElement {
     this.#internals.ariaSelected = String(!!this.selected);
   }
 
+  @observes('disabled')
+  private disabledChanged() {
+    this.#internals.ariaDisabled = String(!!this.disabled);
+  }
+
   /**
    * text content within option (used for filtering)
    */
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 5d4e87f30f..fac2bf294c 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -1,3 +1,379 @@
 :host {
+  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);
+	color: var(--pf-global--Color--100, #151515);
+  --_pf-option-checkboxes-display: none;
+  --_pf-option-svg-display: block;
+	--pf-c-select__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+	--pf-c-select__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+	--pf-c-select__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle--MinWidth: var(--pf-global--target-size--MinWidth, 44px);
+	--pf-c-select__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-select__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-select__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	--pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	--pf-c-select__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-select__toggle--before--BorderWidth: initial;
+	--pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+	--pf-c-select__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-select__toggle--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-select__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-select__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-select__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+	--pf-c-select__toggle--m-plain--before--BorderColor: transparent;
+	--pf-c-select__toggle--m-placeholder--Color: transparent;
+	--pf-c-select--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-select__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
+	--pf-c-select__toggle-wrapper--c-chip-group--MarginTop: 0.3125rem;
+	--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom: 0.3125rem;
+	--pf-c-select__toggle-typeahead--FlexBasis: 10em;
+	--pf-c-select__toggle-typeahead--BackgroundColor: transparent;
+	--pf-c-select__toggle-typeahead--BorderTop: var(--pf-global--BorderWidth--sm, 1px) solid transparent;
+	--pf-c-select__toggle-typeahead--BorderRight: none;
+	--pf-c-select__toggle-typeahead--BorderLeft: none;
+	--pf-c-select__toggle-typeahead--MinWidth: 7.5rem;
+	--pf-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--md));
+	--pf-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-select__toggle-badge--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-select__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__toggle-arrow--MarginLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__toggle-arrow--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
+	--pf-c-select--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle-button--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
+	--pf-c-select__menu--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+	--pf-c-select__menu--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));
+	--pf-c-select__menu--ZIndex: var(--pf-global--ZIndex--sm, 200);
+	--pf-c-select__menu--Width: auto;
+	--pf-c-select__menu--MinWidth: 100%;
+	--pf-c-select__menu--m-top--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));
+	--pf-c-select__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-item--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-item--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-item--m-selected--PaddingRight: var(--pf-global--spacer--2xl, 3rem);
+	--pf-c-select__menu-item--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-item--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-item--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-select__menu-item--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-select__menu-item--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	--pf-c-select__menu-item--Color: var(--pf-global--Color--dark-100, #151515);
+	--pf-c-select__menu-item--disabled--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-select__menu-item--Width: 100%;
+	--pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
+	--pf-c-select__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
+	--pf-c-select__menu-item--disabled--BackgroundColor: transparent;
+	--pf-c-select__menu-item--m-link--Width: auto;
+	--pf-c-select__menu-item--m-link--hover--BackgroundColor: transparent;
+	--pf-c-select__menu-item--m-link--focus--BackgroundColor: transparent;
+	--pf-c-select__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select__menu-item--m-action--hover--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__menu-item--m-action--focus--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);
+	--pf-c-select__menu-item--m-action--Width: auto;
+	--pf-c-select__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+	--pf-c-select__menu-item--m-action--hover--BackgroundColor: transparent;
+	--pf-c-select__menu-item--m-action--focus--BackgroundColor: transparent;
+	--pf-c-select__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select__menu-item--m-favorite-action--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400, #f0ab00);
+	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500, #c58c00);
+	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500, #c58c00);
+	--pf-c-select__menu-item--m-load--Color: var(--pf-global--link--Color, #06c);
+	--pf-c-select__menu-item-icon--Color: var(--pf-global--active-color--100, #06c);
+	--pf-c-select__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+	--pf-c-select__menu-item-icon--Right: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-item-icon--Top: 50%;
+	--pf-c-select__menu-item-icon--TranslateY: -50%;
+	--pf-c-select__menu-item-action-icon--MinHeight: calc(var(--pf-c-select__menu-item--FontSize) * var(--pf-c-select__menu-item--LineHeight));
+	--pf-c-select__menu-item--match--FontWeight: var(--pf-global--FontWeight--bold, 700);
+	--pf-c-select__menu-search--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-search--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	--pf-c-select__menu-search--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-search--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
+	--pf-c-select__menu-group--menu-group--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-group-title--PaddingTop: var(--pf-c-select__menu-item--PaddingTop);
+	--pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	--pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
+	--pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
+	--pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+	--pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	--pf-c-select__menu-item-count--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select__menu-item--disabled__menu-item-count--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-select__menu-item-description--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+	--pf-c-select__menu-item-description--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select__menu-item-description--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	--pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
+	--pf-c-select__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	--pf-c-select__menu-footer--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-footer--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-footer--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-footer--MarginBottom: calc(var(--pf-global--spacer--sm, 0.5rem) * -1);
+	--pf-c-select-menu--c-divider--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);
+}
+
+:host, #outer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host([hidden]),
+*[hidden] {
+  display: none !important;
+}
+
+:host([disabled]) {
+  pointer-events: none !important;
+}
+
+#outer.disabled {
+  color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+}
+
+#outer {
+  position: relative;
+}
+
+/* TODO(bennyp): see if we can get rid of this wrapping node, for perf reasons */
+#listbox-container {
+  display: inline-flex;
+  border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
+  position: absolute;
+  background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
+  opacity: 0;
+  --_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important
+}
+
+#outer.expanded #listbox-container {
+  opacity: 1;
+  z-index: 9999 !important;
+}
+
+#listbox {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+}
+
+#listbox slot.disabled {
+  color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
+  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  pointer-events: none;
+  cursor: not-allowed;;
+  --_active-descendant-color: transparent;
+  --_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
+}
+
+
+#toggle {
+  background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
+}
+
+#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);
+  line-height: 1.6;
+}
+
+#toggle {
+  border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
+  border-bottom-color: var(--pf-theme--color--text, #151515);
+  justify-content: space-between;
+}
+
+.expanded #toggle {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--pf-theme--color--accent, #0066cc);
+}
+
+.disabled #toggle {
+  color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+}
+
+#toggle-input,
+#toggle-button {
+  background: transparent;
+  border: none;
+  text-align: left;
+  border-radius: 0;
+  flex: 1 0 auto;
+  min-height: 44px;
+  min-width: 44px;
+}
+
+#toggle-input {
+  justify-content: space-between;
+  padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem);
+}
+
+.disabled #toggle-input {
+  pointer-events: none;
+}
+
+#toggle-button {
+  color: currentColor;
+  background-color: transparent;
+  justify-content: flex-end;
+  padding: var(--pf-global--spacer--sm, 0.5rem);
+}
+
+#toggle-button:focus:before {
+  border-bottom-color: var(--pf-c-select__toggle--focus--before--BorderBottomColor);
+  border-bottom-width: var(--pf-c-select__toggle--focus--before--BorderBottomWidth);
+}
+
+#outer.typeahead #toggle-button {
+  flex: 0 0 auto;
+}
+
+#toggle-badge {
+  flex: 1 0 auto;
+  margin-inline-start: 0.25em;
+}
+
+#toggle-text {
+  flex: 1 1 auto;
+}
+
+#toggle-text.badge {
+  flex: 0 1 auto;
+}
+
+pf-badge {
+  padding: 0;
+}
+
+#toggle svg {
+  width: 1em;
+  height: 1em;
+  flex: 0 0 auto;
+  margin-inline-start: 1em;
+}
+
+#description {
   display: block;
 }
+
+#listbox.checkboxes {
+  --_pf-option-checkboxes-display: inline;
+  --_pf-option-svg-display: none;
+}
+
+::slotted(pf-option-group + hr) {
+  display: none !important;
+}
+
+::slotted(hr:has(+ pf-option-group)) {
+  display: none !important;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  block-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
+}
+
+::slotted(hr) {
+  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
+  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
+  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
+  --pf-c-divider--after--FlexBasis: 100%;
+  --pf-c-divider--after--Inset: 0%;
+  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
+  --pf-c-divider--m-horizontal--Display: flex;
+  --pf-c-divider--m-horizontal--FlexDirection: row;
+  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
+  --pf-c-divider--m-horizontal--after--Width: auto;
+  --pf-c-divider--m-vertical--Display: inline-flex;
+  --pf-c-divider--m-vertical--FlexDirection: column;
+  --pf-c-divider--m-vertical--after--Height: auto;
+  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
+  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
+  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+  display: var(--pf-c-divider--Display, flex);
+	flex-direction: var(--pf-c-divider--FlexDirection);
+	border: 0;
+  width: 100%;
+  margin-top: var(--pf-c-select-menu--c-divider--MarginTop);
+  margin-bottom: var(--pf-c-select-menu--c-divider--MarginBottom);
+}
+
+::slotted(hr)::after {
+  content: '';
+  width: var(--pf-c-divider--after--Width, 100%) !important;
+  height: var(--pf-c-divider--after--Height, 1px);
+  background-color: var(--pf-c-divider--after--BackgroundColor);
+  flex: 1 0 100%;
+}
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 67085ca109..7b70511872 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -1,21 +1,24 @@
-import { LitElement, html, isServer, type TemplateResult } from 'lit';
+import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import type { TemplateResult } from 'lit';
+
+import { LitElement, html, isServer } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
-import { ComboboxController } from '@patternfly/pfe-core/controllers/combobox-controller.js';
-import { query } from 'lit/decorators/query.js';
 import { property } from 'lit/decorators/property.js';
-import { observes } from '@patternfly/pfe-core/decorators/observes.js';
+import { query } from 'lit/decorators/query.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import {
-  FloatingDOMController,
-  type Placement,
-} from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { ComboboxController } from '@patternfly/pfe-core/controllers/combobox-controller.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
-import '@patternfly/elements/pf-text-input/pf-text-input.js';
+import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+
 import { arraysAreEquivalent } from '@patternfly/pfe-core/functions/arraysAreEquivalent.js';
-import '@patternfly/elements/pf-icon/pf-icon.js';
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
+
 import { PfSearchInputOption } from './pf-search-input-option.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './pf-search-input.css';
 
 export class PfSelectChangeEvent extends Event {
@@ -32,46 +35,94 @@ export class PfSelectChangeEvent extends Event {
 export class PfSearchInput extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];
 
+  static readonly formAssociated = true;
+
+  static override readonly shadowRootOptions: ShadowRootInit = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  /** Variant of rendered Select */
+  @property() variant: 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti' = 'single';
+
+  /** Accessible label for the select */
+  @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
+
+  /** Accessible label for chip group used to describe chips */
+  @property({
+    attribute: 'accessible-current-selections-label',
+  }) accessibleCurrentSelectionsLabel = 'Current selections';
+
+  /** Multi listbox button text */
+  @property({ attribute: 'items-selected-text' }) itemsSelectedText = 'items selected';
+
+  /** Whether the select is disabled */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Whether the select listbox is expanded */
   @property({ type: Boolean, reflect: true }) expanded = false;
-  @property({ reflect: true }) position: Placement = 'bottom';
+
+  /**
+   * Enable to flip listbox when it reaches boundary
+   */
   @property({ attribute: 'enable-flip', type: Boolean }) enableFlip = false;
-   /** Current form value */
-   @property() value?: string;
-   @property() variant: 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti' = 'single';
-  @query('#listbox') listbox!: HTMLElement;
-  @query('#button') button!: HTMLButtonElement;
-  @query('#combobox') combobox!: HTMLInputElement;
-  @query('#placeholder') placeholder!: PfSearchInputOption;
-  @query('#listbox-container') private _listboxContainer?: HTMLElement;
 
-  #isNotPlaceholderOption = (option: PfSearchInputOption) => option !== this.placeholder;
+  /** Current form value */
+  @property() value?: string;
 
+  /** Placeholder entry. Overridden by the `placeholder` slot */
+  @property() placeholder?: string;
 
-  #float = new FloatingDOMController(this, { content: () => this._listboxContainer });
+  /**
+   * Indicates initial popover position.
+   * There are 6 options: `bottom`, `top`, `top-start`, `top-end`, `bottom-start`, `bottom-end`.
+   * Default is `bottom`.
+   */
+  @property({ reflect: true }) position: Placement = 'bottom';
 
-  #internals = InternalsController.of(this);
+  /** Flag indicating if selection badge should be hidden for checkbox variant,default false */
+  @property({
+    attribute: 'checkbox-selection-badge-hidden',
+    type: Boolean,
+  }) checkboxSelectionBadgeHidden = false;
 
-  #slots = new SlotController(this, null, 'placeholder');
+  //@query('pf-chip-group') private _chipGroup?: PfChipGroup;
+
+  @query('#toggle-input') private _toggleInput?: HTMLInputElement;
+
+  @query('#toggle-button') private _toggleButton?: HTMLButtonElement;
 
+  @query('#listbox') private _listbox?: HTMLElement;
 
+  @query('#listbox-container') private _listboxContainer?: HTMLElement;
+
+  @query('#placeholder') private _placeholder?: PfSearchInputOption;
 
-  // static template: TemplateResult<1> = html`
-  //   <pf-text-input-autocomplete></pf-text-input-autocomplete>`;
+  #isNotPlaceholderOption = (option: PfSearchInputOption) => option !== this._placeholder;
+
+  #internals = InternalsController.of(this);
+
+  #float = new FloatingDOMController(this, { content: () => this._listboxContainer });
+
+  #slots = new SlotController(this, null, 'placeholder');
 
   #combobox = ComboboxController.of(this, {
     multi: this.variant === 'typeaheadmulti' || this.variant === 'checkbox',
     getItems: () => this.options,
-    isItem: item => item instanceof PfSearchInputOption,
-    getFallbackLabel: () => 'options',
-    getListboxElement: () => this.listbox ?? null,
-    getToggleButton: () => this.combobox ?? null,
-    getComboboxInput: () => this.combobox ?? null,
+    getFallbackLabel: () => this.accessibleLabel
+                         || this.#internals.computedLabelText
+                         || this.placeholder
+                         || this.#slots.getSlotted('placeholder').map(x => x.textContent).join(''),
+    getListboxElement: () => this._listbox ?? null,
+    getToggleButton: () => this._toggleButton ?? null,
+    getComboboxInput: () => this._toggleInput ?? null,
     isExpanded: () => this.expanded,
     requestShowListbox: () => void (this.expanded ||= true),
     requestHideListbox: () => void (this.expanded &&= false),
-    setItemActive: (item, active) => item.classList.toggle('active', active),
+    setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden),
+    isItem: item => item instanceof PfSearchInputOption,
+    setItemActive: (item, active) => item.active = active,
     setItemSelected: (item, selected) => item.selected = selected,
-    setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden)
   });
 
   /**
@@ -79,12 +130,14 @@ export class PfSearchInput extends LitElement {
    * or array of select option values for multi select.
    */
   @property({ hasChanged: (a, b) => !arraysAreEquivalent(a, b) })
-  set selected(selected: any) {
+  set selected(selected: PfSearchInputOption | PfSearchInputOption[]) {
     const list = Array.isArray(selected) ? selected : [selected];
     this.#combobox.selected = list;
   }
 
-
+  get selected(): PfSearchInputOption[] {
+    return this.#combobox.selected;
+  }
 
   /** List of options */
   get options(): PfSearchInputOption[] {
@@ -92,46 +145,53 @@ export class PfSearchInput extends LitElement {
       return []; // TODO: expose a DOM property to allow setting options in SSR scenarios
     } else {
       return [
-        this.placeholder,
+        this._placeholder,
         ...Array.from(this.querySelectorAll('pf-search-input-option')),
       ].filter((x): x is PfSearchInputOption => !!x && !x.hidden);
     }
   }
 
-  get selected(): PfSearchInputOption[] {
-    return this.#combobox.selected;
+  /** Whether select has badge for number of selected items */
+  get #hasBadge() {
+    // NOTE: revisit this in v5
+    return this.variant === 'checkbox' && !this.checkboxSelectionBadgeHidden;
   }
 
-  // get activeOption(): HTMLOptionElement | undefined {
-  //   return this.options.find(x => x.classList.contains('active'));
-  // }
-
-  //<input id="combobox">
-  render(): TemplateResult<1> {
+  get #buttonLabel(): string {
+    const { selected } = this.#combobox;
+    switch (this.variant) {
+      case 'typeaheadmulti':
+        return `${selected?.length ?? 0} ${this.itemsSelectedText}`;
+      case 'checkbox':
+        return this.#computePlaceholderText()
+          || 'Options';
+      default:
+        return (selected ? this.value : '')
+          || this.#computePlaceholderText()
+          || 'Select a value';
+    }
+  }
 
-    const { expanded, placeholder, variant } = this;
+  override render(): TemplateResult<1> {
+    const { disabled, expanded, variant, placeholder } = this;
     const { anchor = 'bottom', alignment = 'start', styles = {} } = this.#float;
     const { height, width } = this.getBoundingClientRect?.() || {};
-    const placeholderIsInert = !placeholder && this.#slots.isEmpty('placeholder');
-    const hasSelection = !!(Array.isArray(this.selected) ? this.selected.length : this.selected);
+    const hasBadge = this.#hasBadge;
+    const selectedOptions = this.#combobox.selected ?? [];
     const typeahead = variant.startsWith('typeahead');
-   const hideLightDomItems = typeahead && !ComboboxController.supportsCrossRootActiveDescendant;
+    const checkboxes = variant === 'checkbox';
+    const badge = hasBadge && 'badge';
+    const hasSelection = !!(Array.isArray(this.selected) ? this.selected.length : this.selected);
+    const hideLightDomItems = typeahead && !ComboboxController.supportsCrossRootActiveDescendant;
+    const placeholderIsInert = !placeholder && this.#slots.isEmpty('placeholder');
 
     return html`
-      <pf-text-input id="combobox" type="text" placeholder="Placeholder"></pf-text-input> 
-        <pf-button disabled plain label="Close">
-          <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
-            <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 
-            0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 
-            189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 
-            0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 
-            356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 
-            12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 
-            44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
-            </path>
-        </svg>
-      </pf-button>
-      <pf-button disabled plain label="Search">
+      <div id="outer"
+           style="${styleMap(styles)}"
+           class="${classMap({ disabled, typeahead, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}">
+        <div id="toggle">
+          ${!typeahead ? '' : html`
+          <pf-button disabled plain label="Search">
         <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
           <path d="M256.233,5.756c-71.07,15.793-141.44,
           87.863-155.834,159.233c-11.495,57.076,0.3,111.153,
@@ -146,13 +206,40 @@ export class PfSearchInput extends LitElement {
           </path>
         </svg>
       </pf-button>
-      <div id="listbox-container"  ?hidden="${!expanded}"
+          <input id="toggle-input"
+                 ?hidden="${!typeahead}"
+                 ?disabled="${disabled}"
+                 placeholder="${placeholder || this.#buttonLabel}">`}
+          <button id="toggle-button">
+            <span id="button-text" style="display: contents;">
+              <span id="toggle-text"
+                    class="${classMap({ 'visually-hidden': !!typeahead, badge })}">${this.#buttonLabel}</span>${!hasBadge ? '' : html`
+              <span id="toggle-badge">
+                <pf-badge number="${selectedOptions.length}">${selectedOptions.length}</pf-badge>
+              </span>`}
+            </span>
+          </button>
+            <pf-button disabled plain label="Close">
+            <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
+              <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 
+              0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 
+              189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 
+              0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 
+              356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 
+              12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 
+              44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
+              </path>
+          </svg>
+        </pf-button>
+        </div>
+        <div id="listbox-container"
+             ?hidden="${!expanded}"
              style="${styleMap({
                marginTop: `${height || 0}px`,
                width: width ? `${width}px` : 'auto',
              })}">
-        <div id="listbox">
-             <pf-search-input-option id="placeholder"
+          <div id="listbox" class="${classMap({ checkboxes })}">
+            <pf-search-input-option id="placeholder"
                        disabled
                        ?inert="${placeholderIsInert}"
                        aria-hidden="${ifDefined(placeholderIsInert ? undefined : String(!!hasSelection))}"
@@ -160,18 +247,15 @@ export class PfSearchInput extends LitElement {
             ><slot name="placeholder">${placeholder ?? ''}</slot></pf-search-input-option>
             ${this.#combobox.renderItemsToShadowRoot()}
             <slot ?hidden="${hideLightDomItems}"></slot>
+          </div>
         </div>
       </div>
     `;
   }
 
-  @observes('selected')
-  private async selectedChanged(_: PfSearchInputOption[], selected: PfSearchInputOption[]) {
-    this.value = selected.map(x => x.value).join();
-    await this.updateComplete;
-    this.hide();
-   // this._toggleButton?.focus();
-    
+  @observes('disabled')
+  private disabledChanged() {
+    this.#combobox.disabled = this.disabled;
   }
 
   @observes('expanded')
@@ -185,6 +269,53 @@ export class PfSearchInput extends LitElement {
     }
   }
 
+  @observes('selected')
+  private async selectedChanged(_: PfSearchInputOption[], selected: PfSearchInputOption[]) {
+    this.value = selected.map(x => x.value).join();
+    await this.updateComplete;
+    switch (this.variant) {
+      case 'single':
+        this.hide();
+        this._toggleButton?.focus();
+        break;
+      case 'typeahead':
+        this._toggleInput!.value = this.value;
+    }
+  }
+
+  @observes('variant')
+  private async variantChanged() {
+    this.#combobox.hostDisconnected();
+    this.#combobox.multi = this.variant === 'typeaheadmulti' || this.variant === 'checkbox';
+    this.#combobox.hostConnected();
+    if (this.variant === 'checkbox') {
+      import('@patternfly/elements/pf-badge/pf-badge.js');
+    }
+  }
+
+  @observes('value')
+  private valueChanged() {
+    this.#internals.setFormValue(this.value ?? '');
+    this.dispatchEvent(new PfSelectChangeEvent());
+  }
+
+  @observes('variant')
+  @observes('value')
+  private focusChips(): void {
+    // whether select has removable chips for selected items
+    // NOTE: revisit this in v5
+    // reset input if chip has been added
+    // const hasChips = this.variant === 'typeaheadmulti';
+    // if (hasChips && this._toggleInput?.value) {
+    //   // const chip =
+    //   //   this.shadowRoot?.querySelector(`pf-chip#chip-${this._toggleInput?.value}`) as PfChip;
+    //   // if (chip && this._chipGroup) {
+    //   //   this._chipGroup.focusOnChip(chip);
+    //   //   this._toggleInput.value = '';
+    //   // }
+    // }
+  }
+
   async #doExpand() {
     try {
       await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
@@ -203,6 +334,31 @@ export class PfSearchInput extends LitElement {
     }
   }
 
+  /**
+   * handles chip's remove button clicking
+   * @param event remove event
+   * @param opt pf-option
+   */
+  // #onChipRemove(opt: PfOption, event: Event) {
+  //   if (event instanceof PfChipRemoveEvent) {
+  //     opt.selected = false;
+  //     this._toggleInput?.focus();
+  //   }
+  // }
+
+  #computePlaceholderText() {
+    return this.placeholder
+      || this.querySelector?.<HTMLSlotElement>('[slot=placeholder]')
+          ?.assignedNodes()
+          ?.reduce((acc, node) => `${acc}${node.textContent}`, '')
+          ?.trim()
+      || this.#combobox.items
+          .filter(this.#isNotPlaceholderOption)
+          .at(0)
+          ?.value
+      || '';
+  }
+
   /**
    * Opens the dropdown
    */
@@ -229,12 +385,6 @@ export class PfSearchInput extends LitElement {
       await this.show();
     }
   }
-
-  @observes('value')
-  private valueChanged() {
-   // this.#internals.setFormValue(this.value ?? '');
-    this.dispatchEvent(new PfSelectChangeEvent());
-  }
 }
 
 declare global {

From 4e69215f2785a4eb86f75a44514941126573de8b Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 25 Mar 2025 00:02:35 +0530
Subject: [PATCH 05/85] chore: code cleanup

---
 .../demo/pf-search-input-autocomplete.html    |   2 +-
 elements/pf-search-input/pf-search-input.css  |  10 ++
 elements/pf-search-input/pf-search-input.ts   | 151 ++++--------------
 3 files changed, 38 insertions(+), 125 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input-autocomplete.html b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
index 46f2b9c7e5..ff7453a503 100644
--- a/elements/pf-search-input/demo/pf-search-input-autocomplete.html
+++ b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
@@ -1,5 +1,5 @@
 <pf-search-input variant="typeahead"
-             placeholder="Select a state">
+             placeholder="Search">
     <pf-search-input-option value="Alabama"> Alabama </pf-search-input-option>
     <pf-search-input-option value="New Jersey"> New Jersey </pf-search-input-option>
     <pf-search-input-option value="New York"> New York </pf-search-input-option>
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index fac2bf294c..3f542d9ec3 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -265,6 +265,7 @@
 #toggle-input {
   justify-content: space-between;
   padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem);
+	padding-left: 40px;
 }
 
 .disabled #toggle-input {
@@ -377,3 +378,12 @@ pf-badge {
   background-color: var(--pf-c-divider--after--BackgroundColor);
   flex: 1 0 100%;
 }
+
+div.search-icon{
+	position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 7b70511872..02812d472e 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -5,10 +5,8 @@ import { LitElement, html, isServer } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
-import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { ComboboxController } from '@patternfly/pfe-core/controllers/combobox-controller.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
@@ -20,6 +18,7 @@ import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 
 import { PfSearchInputOption } from './pf-search-input-option.js';
 import styles from './pf-search-input.css';
+import type { PfButton } from '../pf-button/pf-button.js';
 
 export class PfSelectChangeEvent extends Event {
   constructor() {
@@ -42,16 +41,10 @@ export class PfSearchInput extends LitElement {
     delegatesFocus: true,
   };
 
-  /** Variant of rendered Select */
-  @property() variant: 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti' = 'single';
 
   /** Accessible label for the select */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
-  /** Accessible label for chip group used to describe chips */
-  @property({
-    attribute: 'accessible-current-selections-label',
-  }) accessibleCurrentSelectionsLabel = 'Current selections';
 
   /** Multi listbox button text */
   @property({ attribute: 'items-selected-text' }) itemsSelectedText = 'items selected';
@@ -80,17 +73,10 @@ export class PfSearchInput extends LitElement {
    */
   @property({ reflect: true }) position: Placement = 'bottom';
 
-  /** Flag indicating if selection badge should be hidden for checkbox variant,default false */
-  @property({
-    attribute: 'checkbox-selection-badge-hidden',
-    type: Boolean,
-  }) checkboxSelectionBadgeHidden = false;
-
-  //@query('pf-chip-group') private _chipGroup?: PfChipGroup;
 
   @query('#toggle-input') private _toggleInput?: HTMLInputElement;
 
-  @query('#toggle-button') private _toggleButton?: HTMLButtonElement;
+  @query('#toggle-button') private _toggleButton?: PfButton;
 
   @query('#listbox') private _listbox?: HTMLElement;
 
@@ -107,7 +93,6 @@ export class PfSearchInput extends LitElement {
   #slots = new SlotController(this, null, 'placeholder');
 
   #combobox = ComboboxController.of(this, {
-    multi: this.variant === 'typeaheadmulti' || this.variant === 'checkbox',
     getItems: () => this.options,
     getFallbackLabel: () => this.accessibleLabel
                          || this.#internals.computedLabelText
@@ -151,75 +136,42 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  /** Whether select has badge for number of selected items */
-  get #hasBadge() {
-    // NOTE: revisit this in v5
-    return this.variant === 'checkbox' && !this.checkboxSelectionBadgeHidden;
-  }
-
   get #buttonLabel(): string {
     const { selected } = this.#combobox;
-    switch (this.variant) {
-      case 'typeaheadmulti':
-        return `${selected?.length ?? 0} ${this.itemsSelectedText}`;
-      case 'checkbox':
-        return this.#computePlaceholderText()
-          || 'Options';
-      default:
-        return (selected ? this.value : '')
-          || this.#computePlaceholderText()
-          || 'Select a value';
-    }
+    return `${selected?.length ?? 0} ${this.itemsSelectedText}`;
   }
 
   override render(): TemplateResult<1> {
-    const { disabled, expanded, variant, placeholder } = this;
+    const { disabled, expanded, placeholder } = this;
     const { anchor = 'bottom', alignment = 'start', styles = {} } = this.#float;
     const { height, width } = this.getBoundingClientRect?.() || {};
-    const hasBadge = this.#hasBadge;
-    const selectedOptions = this.#combobox.selected ?? [];
-    const typeahead = variant.startsWith('typeahead');
-    const checkboxes = variant === 'checkbox';
-    const badge = hasBadge && 'badge';
-    const hasSelection = !!(Array.isArray(this.selected) ? this.selected.length : this.selected);
-    const hideLightDomItems = typeahead && !ComboboxController.supportsCrossRootActiveDescendant;
-    const placeholderIsInert = !placeholder && this.#slots.isEmpty('placeholder');
+    const hideLightDomItems =  !ComboboxController.supportsCrossRootActiveDescendant;
 
     return html`
       <div id="outer"
            style="${styleMap(styles)}"
-           class="${classMap({ disabled, typeahead, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}">
+           class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}">
         <div id="toggle">
-          ${!typeahead ? '' : html`
-          <pf-button disabled plain label="Search">
-        <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
-          <path d="M256.233,5.756c-71.07,15.793-141.44,
-          87.863-155.834,159.233c-11.495,57.076,0.3,111.153,
-          27.688,154.335L6.339,441.172c-8.596,8.596-8.596,
-          22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,
-          8.596,30.987,0L192.26,383.796c43.282,
-          27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,
-          159.632-155.934C540.212,104.314,407.968-27.93,256.233,
-          5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944
-          S171.969,281.239,171.969,208.37S231.043,76.426,303.913,
-          76.426S435.857,135.501,435.857,208.37z">
-          </path>
-        </svg>
-      </pf-button>
+          <div class="search-icon">
+            <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
+              <path d="M256.233,5.756c-71.07,15.793-141.44,
+              87.863-155.834,159.233c-11.495,57.076,0.3,111.153,
+              27.688,154.335L6.339,441.172c-8.596,8.596-8.596,
+              22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,
+              8.596,30.987,0L192.26,383.796c43.282,
+              27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,
+              159.632-155.934C540.212,104.314,407.968-27.93,256.233,
+              5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944
+              S171.969,281.239,171.969,208.37S231.043,76.426,303.913,
+              76.426S435.857,135.501,435.857,208.37z">
+              </path>
+            </svg>
+          </div>
           <input id="toggle-input"
-                 ?hidden="${!typeahead}"
                  ?disabled="${disabled}"
-                 placeholder="${placeholder || this.#buttonLabel}">`}
-          <button id="toggle-button">
-            <span id="button-text" style="display: contents;">
-              <span id="toggle-text"
-                    class="${classMap({ 'visually-hidden': !!typeahead, badge })}">${this.#buttonLabel}</span>${!hasBadge ? '' : html`
-              <span id="toggle-badge">
-                <pf-badge number="${selectedOptions.length}">${selectedOptions.length}</pf-badge>
-              </span>`}
-            </span>
-          </button>
-            <pf-button disabled plain label="Close">
+                 placeholder="${placeholder || this.#buttonLabel}">
+          
+            <pf-button id="toggle-button" plain label="Close">
             <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
               <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 
               0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 
@@ -238,13 +190,8 @@ export class PfSearchInput extends LitElement {
                marginTop: `${height || 0}px`,
                width: width ? `${width}px` : 'auto',
              })}">
-          <div id="listbox" class="${classMap({ checkboxes })}">
-            <pf-search-input-option id="placeholder"
-                       disabled
-                       ?inert="${placeholderIsInert}"
-                       aria-hidden="${ifDefined(placeholderIsInert ? undefined : String(!!hasSelection))}"
-                       ?hidden="${!placeholder && this.#slots.isEmpty('placeholder')}"
-            ><slot name="placeholder">${placeholder ?? ''}</slot></pf-search-input-option>
+          <div id="listbox">
+            
             ${this.#combobox.renderItemsToShadowRoot()}
             <slot ?hidden="${hideLightDomItems}"></slot>
           </div>
@@ -273,25 +220,9 @@ export class PfSearchInput extends LitElement {
   private async selectedChanged(_: PfSearchInputOption[], selected: PfSearchInputOption[]) {
     this.value = selected.map(x => x.value).join();
     await this.updateComplete;
-    switch (this.variant) {
-      case 'single':
-        this.hide();
-        this._toggleButton?.focus();
-        break;
-      case 'typeahead':
-        this._toggleInput!.value = this.value;
-    }
+    this._toggleInput!.value = this.value;
   }
 
-  @observes('variant')
-  private async variantChanged() {
-    this.#combobox.hostDisconnected();
-    this.#combobox.multi = this.variant === 'typeaheadmulti' || this.variant === 'checkbox';
-    this.#combobox.hostConnected();
-    if (this.variant === 'checkbox') {
-      import('@patternfly/elements/pf-badge/pf-badge.js');
-    }
-  }
 
   @observes('value')
   private valueChanged() {
@@ -299,22 +230,6 @@ export class PfSearchInput extends LitElement {
     this.dispatchEvent(new PfSelectChangeEvent());
   }
 
-  @observes('variant')
-  @observes('value')
-  private focusChips(): void {
-    // whether select has removable chips for selected items
-    // NOTE: revisit this in v5
-    // reset input if chip has been added
-    // const hasChips = this.variant === 'typeaheadmulti';
-    // if (hasChips && this._toggleInput?.value) {
-    //   // const chip =
-    //   //   this.shadowRoot?.querySelector(`pf-chip#chip-${this._toggleInput?.value}`) as PfChip;
-    //   // if (chip && this._chipGroup) {
-    //   //   this._chipGroup.focusOnChip(chip);
-    //   //   this._toggleInput.value = '';
-    //   // }
-    // }
-  }
 
   async #doExpand() {
     try {
@@ -334,18 +249,6 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  /**
-   * handles chip's remove button clicking
-   * @param event remove event
-   * @param opt pf-option
-   */
-  // #onChipRemove(opt: PfOption, event: Event) {
-  //   if (event instanceof PfChipRemoveEvent) {
-  //     opt.selected = false;
-  //     this._toggleInput?.focus();
-  //   }
-  // }
-
   #computePlaceholderText() {
     return this.placeholder
       || this.querySelector?.<HTMLSlotElement>('[slot=placeholder]')

From 34900a4508b1f448f931d671aa0f56b6891832a9 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 25 Mar 2025 00:20:45 +0530
Subject: [PATCH 06/85] chore: search autocomplete style added

---
 .../demo/pf-search-input-autocomplete.html    | 10 +++---
 elements/pf-search-input/pf-search-input.css  | 31 ++++++++++---------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input-autocomplete.html b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
index ff7453a503..ba8c18aee7 100644
--- a/elements/pf-search-input/demo/pf-search-input-autocomplete.html
+++ b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
@@ -1,19 +1,21 @@
-<pf-search-input variant="typeahead"
-             placeholder="Search">
+<div class="container">
+  <h1>Search with autocomplete</h1>
+  <pf-search-input placeholder="Search">
     <pf-search-input-option value="Alabama"> Alabama </pf-search-input-option>
     <pf-search-input-option value="New Jersey"> New Jersey </pf-search-input-option>
     <pf-search-input-option value="New York"> New York </pf-search-input-option>
     <pf-search-input-option value="New Mexico"> New Mexico </pf-search-input-option>
     <pf-search-input-option value="North Carolina"> North Carolina </pf-search-input-option>
   </pf-search-input>
+</div>
 
 <script type="module">
   import '@patternfly/elements/pf-search-input/pf-search-input.js';
 </script>
 
 <style>
-pf-search-input {
-  /* insert demo styles */
+.container{
+  padding: 40px;
 }
 </style>
 
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 3f542d9ec3..869b4e40ce 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -258,14 +258,15 @@
   text-align: left;
   border-radius: 0;
   flex: 1 0 auto;
-  min-height: 44px;
-  min-width: 44px;
 }
 
 #toggle-input {
   justify-content: space-between;
   padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem);
 	padding-left: 40px;
+	width: 90%;
+	box-sizing: border-box;
+	max-height: 36px;
 }
 
 .disabled #toggle-input {
@@ -277,8 +278,17 @@
   background-color: transparent;
   justify-content: flex-end;
   padding: var(--pf-global--spacer--sm, 0.5rem);
+	max-height: 36px;
+	max-width: 36px;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	top: 3px;
 }
 
+
 #toggle-button:focus:before {
   border-bottom-color: var(--pf-c-select__toggle--focus--before--BorderBottomColor);
   border-bottom-width: var(--pf-c-select__toggle--focus--before--BorderBottomWidth);
@@ -305,13 +315,6 @@ pf-badge {
   padding: 0;
 }
 
-#toggle svg {
-  width: 1em;
-  height: 1em;
-  flex: 0 0 auto;
-  margin-inline-start: 1em;
-}
-
 #description {
   display: block;
 }
@@ -381,9 +384,9 @@ pf-badge {
 
 div.search-icon{
 	position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
+  top: 50%;
+  left: 1rem;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
 }
\ No newline at end of file

From a332552157721afb7dbd38df6a79e38f15ee5b93 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 27 Mar 2025 01:51:23 +0530
Subject: [PATCH 07/85] chore: close button functionality implemented

---
 elements/pf-search-input/pf-search-input.css | 13 ++---
 elements/pf-search-input/pf-search-input.ts  | 53 +++++++++++++-------
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 869b4e40ce..6880c10275 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -224,7 +224,7 @@
 }
 
 #toggle,
-#toggle-button,
+/* #toggle-button, */
 #toggle-input {
   display: flex;
   align-items: center;
@@ -251,8 +251,9 @@
   border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
 }
 
-#toggle-input,
-#toggle-button {
+
+/* #toggle-button, */
+#toggle-input {
   background: transparent;
   border: none;
   text-align: left;
@@ -273,7 +274,7 @@
   pointer-events: none;
 }
 
-#toggle-button {
+#close-button {
   color: currentColor;
   background-color: transparent;
   justify-content: flex-end;
@@ -294,9 +295,9 @@
   border-bottom-width: var(--pf-c-select__toggle--focus--before--BorderBottomWidth);
 }
 
-#outer.typeahead #toggle-button {
+/* #outer.typeahead #toggle-button {
   flex: 0 0 auto;
-}
+} */
 
 #toggle-badge {
   flex: 1 0 auto;
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 02812d472e..cadf0aefb3 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -148,9 +148,11 @@ export class PfSearchInput extends LitElement {
     const hideLightDomItems =  !ComboboxController.supportsCrossRootActiveDescendant;
 
     return html`
-      <div id="outer"
-           style="${styleMap(styles)}"
-           class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}">
+      <div 
+        id="outer"
+        style="${styleMap(styles)}"
+        class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}"
+      >
         <div id="toggle">
           <div class="search-icon">
             <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
@@ -167,11 +169,19 @@ export class PfSearchInput extends LitElement {
               </path>
             </svg>
           </div>
-          <input id="toggle-input"
-                 ?disabled="${disabled}"
-                 placeholder="${placeholder || this.#buttonLabel}">
-          
-            <pf-button id="toggle-button" plain label="Close">
+          <input 
+            id="toggle-input"
+            ?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() === "")}" 
+            id="close-button"  
+            plain 
+            label="Close"
+          >
             <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
               <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 
               0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 
@@ -181,17 +191,18 @@ export class PfSearchInput extends LitElement {
               12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 
               44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
               </path>
-          </svg>
-        </pf-button>
+            </svg>
+          </pf-button>
         </div>
-        <div id="listbox-container"
-             ?hidden="${!expanded}"
-             style="${styleMap({
-               marginTop: `${height || 0}px`,
-               width: width ? `${width}px` : 'auto',
-             })}">
+        <div 
+          id="listbox-container"
+          ?hidden="${!expanded}"
+          style="${styleMap({
+            marginTop: `${height || 0}px`,
+            width: width ? `${width}px` : 'auto',
+          })}"
+        >
           <div id="listbox">
-            
             ${this.#combobox.renderItemsToShadowRoot()}
             <slot ?hidden="${hideLightDomItems}"></slot>
           </div>
@@ -288,6 +299,14 @@ export class PfSearchInput extends LitElement {
       await this.show();
     }
   }
+
+  async #OnClose(){
+    if (this.expanded) {
+      await this.hide();
+    }
+    this.value = "";
+    this._toggleInput!.value = this.value;
+  }
 }
 
 declare global {

From e8f5bfba08d77c503a59ee4914087180d4cc3b99 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 27 Mar 2025 02:15:40 +0530
Subject: [PATCH 08/85] chore: CSS variables updated

---
 elements/pf-search-input/pf-search-input.css | 322 +++++++++----------
 1 file changed, 151 insertions(+), 171 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 6880c10275..0808249b6c 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -5,162 +5,152 @@
 	color: var(--pf-global--Color--100, #151515);
   --_pf-option-checkboxes-display: none;
   --_pf-option-svg-display: block;
-	--pf-c-select__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
-	--pf-c-select__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
-	--pf-c-select__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__toggle--MinWidth: var(--pf-global--target-size--MinWidth, 44px);
-	--pf-c-select__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
-	--pf-c-select__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
-	--pf-c-select__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
-	--pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
-	--pf-c-select__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
-	--pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
-	--pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
-	--pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
-	--pf-c-select__toggle--before--BorderWidth: initial;
-	--pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
-	--pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
-	--pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
-	--pf-c-select__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
-	--pf-c-select__toggle--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
-	--pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
-	--pf-c-select__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
-	--pf-c-select__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
-	--pf-c-select__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
-	--pf-c-select__toggle--m-plain--before--BorderColor: transparent;
-	--pf-c-select__toggle--m-placeholder--Color: transparent;
-	--pf-c-select--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-select--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-select--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-select--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-select--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-select--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-select--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-select--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-select--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-select--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-select--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-select--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-select--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-select__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
-	--pf-c-select__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
-	--pf-c-select__toggle-wrapper--c-chip-group--MarginTop: 0.3125rem;
-	--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom: 0.3125rem;
-	--pf-c-select__toggle-typeahead--FlexBasis: 10em;
-	--pf-c-select__toggle-typeahead--BackgroundColor: transparent;
-	--pf-c-select__toggle-typeahead--BorderTop: var(--pf-global--BorderWidth--sm, 1px) solid transparent;
-	--pf-c-select__toggle-typeahead--BorderRight: none;
-	--pf-c-select__toggle-typeahead--BorderLeft: none;
-	--pf-c-select__toggle-typeahead--MinWidth: 7.5rem;
-	--pf-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--md));
-	--pf-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200, #6a6e73);
-	--pf-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
-	--pf-c-select__toggle-badge--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
-	--pf-c-select__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-select__toggle-arrow--MarginLeft: var(--pf-global--spacer--md, 1rem);
-	--pf-c-select__toggle-arrow--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
-	--pf-c-select--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-select--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-select__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);
-	--pf-c-select__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__toggle-button--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
-	--pf-c-select__menu--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
-	--pf-c-select__menu--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__menu--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));
-	--pf-c-select__menu--ZIndex: var(--pf-global--ZIndex--sm, 200);
-	--pf-c-select__menu--Width: auto;
-	--pf-c-select__menu--MinWidth: 100%;
-	--pf-c-select__menu--m-top--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));
-	--pf-c-select__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__menu-item--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__menu-item--PaddingRight: var(--pf-global--spacer--md, 1rem);
-	--pf-c-select__menu-item--m-selected--PaddingRight: var(--pf-global--spacer--2xl, 3rem);
-	--pf-c-select__menu-item--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__menu-item--PaddingLeft: var(--pf-global--spacer--md, 1rem);
-	--pf-c-select__menu-item--FontSize: var(--pf-global--FontSize--md, 1rem);
-	--pf-c-select__menu-item--FontWeight: var(--pf-global--FontWeight--normal, 400);
-	--pf-c-select__menu-item--LineHeight: var(--pf-global--LineHeight--md, 1.5);
-	--pf-c-select__menu-item--Color: var(--pf-global--Color--dark-100, #151515);
-	--pf-c-select__menu-item--disabled--Color: var(--pf-global--Color--dark-200, #6a6e73);
-	--pf-c-select__menu-item--Width: 100%;
-	--pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
-	--pf-c-select__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
-	--pf-c-select__menu-item--disabled--BackgroundColor: transparent;
-	--pf-c-select__menu-item--m-link--Width: auto;
-	--pf-c-select__menu-item--m-link--hover--BackgroundColor: transparent;
-	--pf-c-select__menu-item--m-link--focus--BackgroundColor: transparent;
-	--pf-c-select__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-select__menu-item--m-action--hover--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-select__menu-item--m-action--focus--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-select__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);
-	--pf-c-select__menu-item--m-action--Width: auto;
-	--pf-c-select__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
-	--pf-c-select__menu-item--m-action--hover--BackgroundColor: transparent;
-	--pf-c-select__menu-item--m-action--focus--BackgroundColor: transparent;
-	--pf-c-select__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-select__menu-item--m-favorite-action--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400, #f0ab00);
-	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500, #c58c00);
-	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500, #c58c00);
-	--pf-c-select__menu-item--m-load--Color: var(--pf-global--link--Color, #06c);
-	--pf-c-select__menu-item-icon--Color: var(--pf-global--active-color--100, #06c);
-	--pf-c-select__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
-	--pf-c-select__menu-item-icon--Right: var(--pf-global--spacer--md, 1rem);
-	--pf-c-select__menu-item-icon--Top: 50%;
-	--pf-c-select__menu-item-icon--TranslateY: -50%;
-	--pf-c-select__menu-item-action-icon--MinHeight: calc(var(--pf-c-select__menu-item--FontSize) * var(--pf-c-select__menu-item--LineHeight));
-	--pf-c-select__menu-item--match--FontWeight: var(--pf-global--FontWeight--bold, 700);
-	--pf-c-select__menu-search--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__menu-search--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
-	--pf-c-select__menu-search--PaddingBottom: var(--pf-global--spacer--md, 1rem);
-	--pf-c-select__menu-search--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
-	--pf-c-select__menu-group--menu-group--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__menu-group-title--PaddingTop: var(--pf-c-select__menu-item--PaddingTop);
-	--pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
-	--pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
-	--pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
-	--pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
-	--pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
-	--pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200, #6a6e73);
-	--pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md, 1rem);
-	--pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
-	--pf-c-select__menu-item-count--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-select__menu-item--disabled__menu-item-count--Color: var(--pf-global--Color--dark-200, #6a6e73);
-	--pf-c-select__menu-item-description--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
-	--pf-c-select__menu-item-description--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-select__menu-item-description--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
-	--pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
-	--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
-	--pf-c-select__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
-	--pf-c-select__menu-footer--PaddingTop: var(--pf-global--spacer--md, 1rem);
-	--pf-c-select__menu-footer--PaddingRight: var(--pf-global--spacer--md, 1rem);
-	--pf-c-select__menu-footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);
-	--pf-c-select__menu-footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);
-	--pf-c-select__menu-footer--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select__menu-footer--MarginBottom: calc(var(--pf-global--spacer--sm, 0.5rem) * -1);
-	--pf-c-select-menu--c-divider--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-select-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+	--pf-c-search-input__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+	--pf-c-search-input__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__toggle--MinWidth: var(--pf-global--target-size--MinWidth, 44px);
+	--pf-c-search-input__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-search-input__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-search-input__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	--pf-c-search-input__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	--pf-c-search-input__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-search-input__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-search-input__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-search-input__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-search-input__toggle--before--BorderWidth: initial;
+	--pf-c-search-input__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-search-input__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-search-input__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+	--pf-c-search-input__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-search-input__toggle--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-search-input__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-search-input__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-search-input__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-search-input__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-search-input__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-search-input__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-search-input__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-search-input__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+	--pf-c-search-input__toggle--m-plain--before--BorderColor: transparent;
+	--pf-c-search-input__toggle--m-placeholder--Color: transparent;
+	--pf-c-search-input--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-search-input--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-search-input--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-search-input--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-search-input--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-search-input--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-search-input--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-search-input--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-search-input--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-search-input--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-search-input--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-search-input--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-search-input--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-search-input--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-search-input--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-search-input--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-search-input--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-search-input--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-search-input--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-search-input--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-search-input--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-search-input__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-search-input__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
+	--pf-c-search-input__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-search-input__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-search-input__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-search-input__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-search-input__toggle-arrow--MarginLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-search-input__toggle-arrow--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
+	--pf-c-search-input--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-search-input--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-search-input__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__toggle-button--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-search-input__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
+	--pf-c-search-input__menu--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+	--pf-c-search-input__menu--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__menu--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));
+	--pf-c-search-input__menu--ZIndex: var(--pf-global--ZIndex--sm, 200);
+	--pf-c-search-input__menu--Width: auto;
+	--pf-c-search-input__menu--MinWidth: 100%;
+	--pf-c-search-input__menu--m-top--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));
+	--pf-c-search-input__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__menu-item--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__menu-item--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-search-input__menu-item--m-selected--PaddingRight: var(--pf-global--spacer--2xl, 3rem);
+	--pf-c-search-input__menu-item--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__menu-item--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-search-input__menu-item--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-search-input__menu-item--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-search-input__menu-item--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	--pf-c-search-input__menu-item--Color: var(--pf-global--Color--dark-100, #151515);
+	--pf-c-search-input__menu-item--disabled--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-search-input__menu-item--Width: 100%;
+	--pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
+	--pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
+	--pf-c-search-input__menu-item--disabled--BackgroundColor: transparent;
+	--pf-c-search-input__menu-item--m-link--Width: auto;
+	--pf-c-search-input__menu-item--m-link--hover--BackgroundColor: transparent;
+	--pf-c-search-input__menu-item--m-link--focus--BackgroundColor: transparent;
+	--pf-c-search-input__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-search-input__menu-item--m-action--hover--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-search-input__menu-item--m-action--focus--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-search-input__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);
+	--pf-c-search-input__menu-item--m-action--Width: auto;
+	--pf-c-search-input__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+	--pf-c-search-input__menu-item--m-action--hover--BackgroundColor: transparent;
+	--pf-c-search-input__menu-item--m-action--focus--BackgroundColor: transparent;
+	--pf-c-search-input__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-search-input__menu-item--m-favorite-action--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-search-input__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-search-input__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-search-input__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400, #f0ab00);
+	--pf-c-search-input__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500, #c58c00);
+	--pf-c-search-input__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500, #c58c00);
+	--pf-c-search-input__menu-item--m-load--Color: var(--pf-global--link--Color, #06c);
+	--pf-c-search-input__menu-item-icon--Color: var(--pf-global--active-color--100, #06c);
+	--pf-c-search-input__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+	--pf-c-search-input__menu-item-icon--Right: var(--pf-global--spacer--md, 1rem);
+	--pf-c-search-input__menu-item-icon--Top: 50%;
+	--pf-c-search-input__menu-item-icon--TranslateY: -50%;
+	--pf-c-search-input__menu-item-action-icon--MinHeight: calc(var(--pf-c-search-input__menu-item--FontSize) * var(--pf-c-search-input__menu-item--LineHeight));
+	--pf-c-search-input__menu-item--match--FontWeight: var(--pf-global--FontWeight--bold, 700);
+	--pf-c-search-input__menu-search--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__menu-search--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
+	--pf-c-search-input__menu-search--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--pf-c-search-input__menu-search--PaddingLeft: var(--pf-c-search-input__menu-item--PaddingLeft);
+	--pf-c-search-input__menu-group--menu-group--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__menu-group-title--PaddingTop: var(--pf-c-search-input__menu-item--PaddingTop);
+	--pf-c-search-input__menu-group-title--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
+	--pf-c-search-input__menu-group-title--PaddingBottom: var(--pf-c-search-input__menu-item--PaddingBottom);
+	--pf-c-search-input__menu-group-title--PaddingLeft: var(--pf-c-search-input__menu-item--PaddingLeft);
+	--pf-c-search-input__menu-group-title--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+	--pf-c-search-input__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-search-input__menu-group-title--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-search-input__menu-item-count--MarginLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-search-input__menu-item-count--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	--pf-c-search-input__menu-item-count--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-search-input__menu-item--disabled__menu-item-count--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-search-input__menu-item-description--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+	--pf-c-search-input__menu-item-description--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-search-input__menu-item-description--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
+	--pf-c-search-input__menu-item-main--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
+	--pf-c-search-input__menu-item--m-selected__menu-item-main--PaddingRight: var(--pf-c-search-input__menu-item--m-selected--PaddingRight);
+	--pf-c-search-input__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	--pf-c-search-input__menu-footer--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	--pf-c-search-input__menu-footer--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-search-input__menu-footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--pf-c-search-input__menu-footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-search-input__menu-footer--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input__menu-footer--MarginBottom: calc(var(--pf-global--spacer--sm, 0.5rem) * -1);
+	--pf-c-search-input-menu--c-divider--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-search-input-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);
 }
 
 :host, #outer {
@@ -291,30 +281,20 @@
 
 
 #toggle-button:focus:before {
-  border-bottom-color: var(--pf-c-select__toggle--focus--before--BorderBottomColor);
-  border-bottom-width: var(--pf-c-select__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 {
   flex: 0 0 auto;
 } */
 
-#toggle-badge {
-  flex: 1 0 auto;
-  margin-inline-start: 0.25em;
-}
+
 
 #toggle-text {
   flex: 1 1 auto;
 }
 
-#toggle-text.badge {
-  flex: 0 1 auto;
-}
-
-pf-badge {
-  padding: 0;
-}
 
 #description {
   display: block;
@@ -371,8 +351,8 @@ pf-badge {
 	flex-direction: var(--pf-c-divider--FlexDirection);
 	border: 0;
   width: 100%;
-  margin-top: var(--pf-c-select-menu--c-divider--MarginTop);
-  margin-bottom: var(--pf-c-select-menu--c-divider--MarginBottom);
+  margin-top: var(--pf-c-search-input-menu--c-divider--MarginTop);
+  margin-bottom: var(--pf-c-search-input-menu--c-divider--MarginBottom);
 }
 
 ::slotted(hr)::after {

From 657370384410424bd2bcf21904140ce88ec88109 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Wed, 2 Apr 2025 18:16:30 +0530
Subject: [PATCH 09/85] chore: styles updated

---
 .../pf-search-input-option.css                | 17 ++-------
 elements/pf-search-input/pf-search-input.css  | 35 +++++++++++++++----
 elements/pf-search-input/pf-search-input.ts   |  4 +--
 3 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input-option.css b/elements/pf-search-input/pf-search-input-option.css
index a8c488e628..da9f4600c3 100644
--- a/elements/pf-search-input/pf-search-input-option.css
+++ b/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,10 +36,7 @@
 }
 
 input[type="checkbox"] {
-  margin-inline-end: 1em;
-  display: var(--_pf-option-checkboxes-display, none);
-  pointer-events: none;
-  flex: 0 0 auto;
+  display: none;
 }
 
 span {
@@ -48,14 +44,7 @@ span {
 }
 
 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 {
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 0808249b6c..98f7d3455c 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/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;
-}
\ No newline at end of file
+}
+
+.expanded #close-button{
+	/* border-bottom-width: 2px;
+  border-bottom-color: var(--pf-theme--color--accent, #0066cc); */
+}
+
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index cadf0aefb3..108f7bf1c9 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/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"

From a8a4b358907fcc0348c38127c0f131db2ba286fe Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 3 Apr 2025 14:21:55 +0530
Subject: [PATCH 10/85] chore: outside click implementation

---
 .../pf-search-input-option.css                |  2 +-
 elements/pf-search-input/pf-search-input.ts   | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/elements/pf-search-input/pf-search-input-option.css b/elements/pf-search-input/pf-search-input-option.css
index da9f4600c3..cdca0e954d 100644
--- a/elements/pf-search-input/pf-search-input-option.css
+++ b/elements/pf-search-input/pf-search-input-option.css
@@ -13,7 +13,7 @@
 }
 
 :host(:focus) #outer,
-:host(:hover) #outer{
+:host(:hover) #outer {
   background-color: #e0e0e0;
 }
 
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 108f7bf1c9..b167b22a0c 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -19,6 +19,7 @@ import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 import { PfSearchInputOption } from './pf-search-input-option.js';
 import styles from './pf-search-input.css';
 import type { PfButton } from '../pf-button/pf-button.js';
+import { bound } from '@patternfly/pfe-core/decorators.js';
 
 export class PfSelectChangeEvent extends Event {
   constructor() {
@@ -84,6 +85,8 @@ export class PfSearchInput extends LitElement {
 
   @query('#placeholder') private _placeholder?: PfSearchInputOption;
 
+  @query('#outer') private _searchInputContainer!: HTMLElement;
+
   #isNotPlaceholderOption = (option: PfSearchInputOption) => option !== this._placeholder;
 
   #internals = InternalsController.of(this);
@@ -110,6 +113,29 @@ export class PfSearchInput extends LitElement {
     setItemSelected: (item, selected) => item.selected = selected,
   });
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    document.addEventListener('click', this._onOutsideClick);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this._onOutsideClick);
+  }
+
+
+  // Function to handle the closing of popover and month select popup on outside click
+  @bound private _onOutsideClick(event: MouseEvent) {
+    const path = event.composedPath();
+    if (!path.includes(this._searchInputContainer)) {
+      if (this.expanded) {
+        this.expanded = false;
+      } else {
+        //this._popover.hide();
+      }
+    }
+  }
+
   /**
    * Single select option value for single select menus,
    * or array of select option values for multi select.

From a4491fd375b3acaf9dd062b463cced90ef87fde9 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 3 Apr 2025 16:47:41 +0530
Subject: [PATCH 11/85] chore: added pf-option instead of
 pf-search-input-option

---
 .../demo/pf-search-input-autocomplete.html    | 10 +++++-----
 elements/pf-search-input/pf-search-input.css  |  1 -
 elements/pf-search-input/pf-search-input.ts   | 19 ++++++++++---------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input-autocomplete.html b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
index ba8c18aee7..3ff7577ec9 100644
--- a/elements/pf-search-input/demo/pf-search-input-autocomplete.html
+++ b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
@@ -1,11 +1,11 @@
 <div class="container">
   <h1>Search with autocomplete</h1>
   <pf-search-input placeholder="Search">
-    <pf-search-input-option value="Alabama"> Alabama </pf-search-input-option>
-    <pf-search-input-option value="New Jersey"> New Jersey </pf-search-input-option>
-    <pf-search-input-option value="New York"> New York </pf-search-input-option>
-    <pf-search-input-option value="New Mexico"> New Mexico </pf-search-input-option>
-    <pf-search-input-option value="North Carolina"> North Carolina </pf-search-input-option>
+    <pf-option value="Alabama"> Alabama </pf-option>
+    <pf-option value="New Jersey"> New Jersey </pf-option>
+    <pf-option value="New York"> New York </pf-option>
+    <pf-option value="New Mexico"> New Mexico </pf-option>
+    <pf-option value="North Carolina"> North Carolina </pf-option>
   </pf-search-input>
 </div>
 
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 98f7d3455c..cbaaba5b9c 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -393,4 +393,3 @@ div.search-icon{
 	/* border-bottom-width: 2px;
   border-bottom-color: var(--pf-theme--color--accent, #0066cc); */
 }
-
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index b167b22a0c..87d2df228c 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -19,6 +19,7 @@ import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 import { PfSearchInputOption } from './pf-search-input-option.js';
 import styles from './pf-search-input.css';
 import type { PfButton } from '../pf-button/pf-button.js';
+import { PfOption } from '../pf-select/pf-option.js';
 import { bound } from '@patternfly/pfe-core/decorators.js';
 
 export class PfSelectChangeEvent extends Event {
@@ -83,11 +84,11 @@ export class PfSearchInput extends LitElement {
 
   @query('#listbox-container') private _listboxContainer?: HTMLElement;
 
-  @query('#placeholder') private _placeholder?: PfSearchInputOption;
+  @query('#placeholder') private _placeholder?: PfOption;
 
   @query('#outer') private _searchInputContainer!: HTMLElement;
 
-  #isNotPlaceholderOption = (option: PfSearchInputOption) => option !== this._placeholder;
+  #isNotPlaceholderOption = (option: PfOption) => option !== this._placeholder;
 
   #internals = InternalsController.of(this);
 
@@ -108,7 +109,7 @@ export class PfSearchInput extends LitElement {
     requestShowListbox: () => void (this.expanded ||= true),
     requestHideListbox: () => void (this.expanded &&= false),
     setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden),
-    isItem: item => item instanceof PfSearchInputOption,
+    isItem: item => item instanceof PfOption,
     setItemActive: (item, active) => item.active = active,
     setItemSelected: (item, selected) => item.selected = selected,
   });
@@ -141,24 +142,24 @@ export class PfSearchInput extends LitElement {
    * or array of select option values for multi select.
    */
   @property({ hasChanged: (a, b) => !arraysAreEquivalent(a, b) })
-  set selected(selected: PfSearchInputOption | PfSearchInputOption[]) {
+  set selected(selected: PfOption | PfOption[]) {
     const list = Array.isArray(selected) ? selected : [selected];
     this.#combobox.selected = list;
   }
 
-  get selected(): PfSearchInputOption[] {
+  get selected(): PfOption[] {
     return this.#combobox.selected;
   }
 
   /** List of options */
-  get options(): PfSearchInputOption[] {
+  get options(): PfOption[] {
     if (isServer) {
       return []; // TODO: expose a DOM property to allow setting options in SSR scenarios
     } else {
       return [
         this._placeholder,
-        ...Array.from(this.querySelectorAll('pf-search-input-option')),
-      ].filter((x): x is PfSearchInputOption => !!x && !x.hidden);
+        ...Array.from(this.querySelectorAll('pf-option')),
+      ].filter((x): x is PfOption => !!x && !x.hidden);
     }
   }
 
@@ -254,7 +255,7 @@ export class PfSearchInput extends LitElement {
   }
 
   @observes('selected')
-  private async selectedChanged(_: PfSearchInputOption[], selected: PfSearchInputOption[]) {
+  private async selectedChanged(_: PfOption[], selected: PfOption[]) {
     this.value = selected.map(x => x.value).join();
     await this.updateComplete;
     this._toggleInput!.value = this.value;

From 6eaa40c7dee555fc2b043cc3e65e217950cd52e3 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 3 Apr 2025 17:18:26 +0530
Subject: [PATCH 12/85] chore: style issues resolved

---
 elements/pf-search-input/pf-search-input.css | 77 ++++++--------------
 1 file changed, 22 insertions(+), 55 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index cbaaba5b9c..dab6599b4d 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -179,11 +179,11 @@
 /* TODO(bennyp): see if we can get rid of this wrapping node, for perf reasons */
 #listbox-container {
   display: inline-flex;
-  border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
   position: absolute;
   background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
   opacity: 0;
-  --_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important
+  --_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+	box-shadow: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06);
 }
 
 #outer.expanded #listbox-container {
@@ -208,14 +208,11 @@
   --_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
 }
 
-
 #toggle {
   background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
-	/* align-items: center; */
 }
 
 #toggle,
-/* #toggle-button, */
 #toggle-input {
   display: flex;
   font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
@@ -228,18 +225,6 @@
   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-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 {
@@ -256,21 +241,15 @@
   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 {
   justify-content: space-between;
   padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem);
-	padding-left: 40px;
+	padding-left: 2.5rem;
 	width: 90%;
 	box-sizing: border-box;
-	max-height: 36px;
+	max-height: 2.25rem;
 }
 
 .disabled #toggle-input {
@@ -282,8 +261,8 @@
   background-color: transparent;
   justify-content: flex-end;
   padding: var(--pf-global--spacer--sm, 0.5rem);
-	max-height: 36px;
-	max-width: 36px;
+	max-height: 2.25rem;
+	max-width: 2.25rem;
 	box-sizing: border-box;
 	display: flex;
 	align-items: center;
@@ -291,23 +270,11 @@
 	border-radius: 0px;
 }
 
-#close-button svg{
+#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); */
-}
-
-/* #outer.typeahead #toggle-button {
-  flex: 0 0 auto;
-} */
-
-
-
 #toggle-text {
   flex: 1 1 auto;
 }
@@ -318,18 +285,10 @@
 }
 
 #listbox.checkboxes {
-  --_pf-option-checkboxes-display: inline;
+  --_pf-option-checkboxes-display: none;
   --_pf-option-svg-display: none;
 }
 
-::slotted(pf-option-group + hr) {
-  display: none !important;
-}
-
-::slotted(hr:has(+ pf-option-group)) {
-  display: none !important;
-}
-
 .visually-hidden {
   border: 0;
   clip: rect(0, 0, 0, 0);
@@ -380,16 +339,24 @@
   flex: 1 0 100%;
 }
 
-div.search-icon{
+div.search-icon {
 	position: absolute;
   top: 50%;
-  left: 1rem;
+  left: var(--pf-global--spacer--md, 1rem);
   transform: translateY(-50%);
   display: flex;
   align-items: center;
 }
 
-.expanded #close-button{
-	/* border-bottom-width: 2px;
-  border-bottom-color: var(--pf-theme--color--accent, #0066cc); */
-}
+#outer:focus-within {
+	#toggle {
+		border-top-left-radius:  var(--pf-global--spacer--sm, 0.5rem);
+		border-bottom-left-radius:  var(--pf-global--spacer--sm, 0.5rem);
+		border-bottom: var(--pf-global--spacer--xs, 0.25rem) solid transparent;
+	}
+	#close-button {
+		border-bottom-width: var(--pf-global--spacer--xs, 0.125rem);
+		border-bottom-color: var(--pf-theme--color--accent, #0066cc);
+		box-sizing: border-box;
+	}
+}
\ No newline at end of file

From fe4c0ef6bfd95f9871bfc322135be76c8d9ae6ff Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 3 Apr 2025 17:30:14 +0530
Subject: [PATCH 13/85] chore: style issues resolved

---
 elements/pf-search-input/demo/pf-search-input.html | 12 ++++++------
 elements/pf-search-input/pf-search-input.css       | 11 +++--------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input.html b/elements/pf-search-input/demo/pf-search-input.html
index 88c2e63f65..4f45de098a 100644
--- a/elements/pf-search-input/demo/pf-search-input.html
+++ b/elements/pf-search-input/demo/pf-search-input.html
@@ -1,12 +1,12 @@
 <pf-search-input placeholder="Select a title"
              accessible-label="Title">
-    <pf-search-input-option>Mr</pf-search-input-option>
-    <pf-search-input-option>Miss</pf-search-input-option>
-    <pf-search-input-option>Mrs</pf-search-input-option>
-    <pf-search-input-option>Ms</pf-search-input-option>
+    <pf-option>Mr</pf-option>
+    <pf-option>Miss</pf-option>
+    <pf-option>Mrs</pf-option>
+    <pf-option>Ms</pf-option>
     <hr>
-    <pf-search-input-option>Dr</pf-search-input-option>
-    <pf-search-input-option>Other</pf-option>
+    <pf-option>Dr</pf-option>
+    <pf-option>Other</pf-option>
 </pf-search-input>
 
 <script type="module">
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index dab6599b4d..622c76e2f8 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -268,6 +268,7 @@
 	align-items: center;
 	justify-content: center;
 	border-radius: 0px;
+	position: relative;
 }
 
 #close-button svg {
@@ -350,13 +351,7 @@ div.search-icon {
 
 #outer:focus-within {
 	#toggle {
-		border-top-left-radius:  var(--pf-global--spacer--sm, 0.5rem);
-		border-bottom-left-radius:  var(--pf-global--spacer--sm, 0.5rem);
-		border-bottom: var(--pf-global--spacer--xs, 0.25rem) solid transparent;
-	}
-	#close-button {
-		border-bottom-width: var(--pf-global--spacer--xs, 0.125rem);
-		border-bottom-color: var(--pf-theme--color--accent, #0066cc);
-		box-sizing: border-box;
+		border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc);
+		box-sizing: content-box;
 	}
 }
\ No newline at end of file

From 901990f0afd5928a75a1fa052faa46de1d5b8bf9 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 3 Apr 2025 18:12:51 +0530
Subject: [PATCH 14/85] chore: code cleanup

---
 elements/package.json                       |  1 -
 elements/pf-search-input/pf-search-input.ts | 10 +---------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/elements/package.json b/elements/package.json
index 62a7846663..3538d376d0 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -46,7 +46,6 @@
     "./pf-progress-stepper/pf-progress-stepper.js": "./pf-progress-stepper/pf-progress-stepper.js",
     "./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js",
     "./pf-search-input/pf-search-input.js": "./pf-search-input/pf-search-input.js",
-    "./pf-search-input/pf-search-input-option.js":"./pf-search-input/pf-search-input-option.js",
     "./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
     "./pf-switch/pf-switch.js": "./pf-switch/pf-switch.js",
     "./pf-table/pf-table.js": "./pf-table/pf-table.js",
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 87d2df228c..4d6ec43677 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -16,9 +16,7 @@ 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 { PfSearchInputOption } from './pf-search-input-option.js';
 import styles from './pf-search-input.css';
-import type { PfButton } from '../pf-button/pf-button.js';
 import { PfOption } from '../pf-select/pf-option.js';
 import { bound } from '@patternfly/pfe-core/decorators.js';
 
@@ -43,11 +41,9 @@ export class PfSearchInput extends LitElement {
     delegatesFocus: true,
   };
 
-
   /** Accessible label for the select */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
-
   /** Multi listbox button text */
   @property({ attribute: 'items-selected-text' }) itemsSelectedText = 'items selected';
 
@@ -75,7 +71,6 @@ export class PfSearchInput extends LitElement {
    */
   @property({ reflect: true }) position: Placement = 'bottom';
 
-
   @query('#toggle-input') private _toggleInput?: HTMLInputElement;
 
   @query('#toggle-button') private _toggleButton?: HTMLDivElement;
@@ -124,15 +119,12 @@ export class PfSearchInput extends LitElement {
     document.removeEventListener('click', this._onOutsideClick);
   }
 
-
-  // Function to handle the closing of popover and month select popup on outside click
+  // Function to handle the closing of popover 
   @bound private _onOutsideClick(event: MouseEvent) {
     const path = event.composedPath();
     if (!path.includes(this._searchInputContainer)) {
       if (this.expanded) {
         this.expanded = false;
-      } else {
-        //this._popover.hide();
       }
     }
   }

From 95431ac4b22a6cd7855534a8ba56552da316c933 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 3 Apr 2025 18:13:23 +0530
Subject: [PATCH 15/85] chore: code cleanup

---
 .../pf-search-input-option.css                |  62 ---------
 .../pf-search-input/pf-search-input-option.ts | 129 ------------------
 2 files changed, 191 deletions(-)
 delete mode 100644 elements/pf-search-input/pf-search-input-option.css
 delete mode 100644 elements/pf-search-input/pf-search-input-option.ts

diff --git a/elements/pf-search-input/pf-search-input-option.css b/elements/pf-search-input/pf-search-input-option.css
deleted file mode 100644
index cdca0e954d..0000000000
--- a/elements/pf-search-input/pf-search-input-option.css
+++ /dev/null
@@ -1,62 +0,0 @@
-:host {
-  display: block;
-}
-
-:host([hidden]),
-*[hidden] {
-  display: none !important;
-}
-
-:host([disabled]) {
-  pointer-events: none !important;
-  cursor: not-allowed !important;
-}
-
-:host(:focus) #outer,
-:host(:hover) #outer {
-  background-color: #e0e0e0;
-}
-
-#outer {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-  padding: var(--pf-global--spacer--sm, 0.5rem) var(--pf-global--spacer--md, 1rem);
-  min-height: calc(44px - 2 * var(--pf-global--spacer--sm, 0.5rem));
-  min-width: calc(44px - 2 * var(--pf-global--spacer--md, 1rem));
-}
-
-#outer.active {
-  background-color: var(--_active-descendant-color, var(--pf-theme--color--surface--lighter, #f0f0f0));
-}
-
-:host([disabled]) #outer {
-  color: var(--pf-global--Color--dark-200, #6a6e73) !important;
-}
-
-input[type="checkbox"] {
-  display: none;
-}
-
-span {
-  flex: 1 1 auto;
-}
-
-svg {
-  display: none;
-}
-
-#description {
-  display: block;
-  flex: 1 0 100%;
-}
-
-slot[name="description"] {
-  font-size: var(--pf-global--FontSize--xs, 0.75rem);
-  color: var(--pf-global--Color--dark-200, #6a6e73);
-}
-
-::slotted([slot="icon"]) {
-  margin-inline-end: 0.5em;
-}
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input-option.ts b/elements/pf-search-input/pf-search-input-option.ts
deleted file mode 100644
index 57a6d2ad24..0000000000
--- a/elements/pf-search-input/pf-search-input-option.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
-import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
-import { property } from 'lit/decorators/property.js';
-import { classMap } from 'lit/directives/class-map.js';
-
-import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
-
-import { observes } from '@patternfly/pfe-core/decorators/observes.js';
-import styles from './pf-search-input-option.css';
-
-/**
- * Search Input Pf Search Input Option
- * @slot - Place element content here
- */
-@customElement('pf-search-input-option')
-export class PfSearchInputOption extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [styles];
-
-   /** whether option is disabled */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** form value for this option */
-  @property({ reflect: true })
-  get value() {
-    return (this.#value ?? this.textContent ?? '').trim();
-  }
-
-  set value(v: string) {
-    this.#value = v;
-  }
-
-  /** whether option is selected */
-  @property({ type: Boolean, reflect: true }) selected = false;
-
-  /** whether option is active descendant */
-  @property({ type: Boolean, reflect: true }) active = false;
-
-  /** Optional option description; overridden by description slot. */
-  @property() description = '';
-
-  @queryAssignedNodes({ slot: '', flatten: true })
-  private _slottedText!: Node[];
-
-  /**
-   * this option's position relative to the other options
-   */
-  set posInSet(posInSet: number | null) {
-    this.#internals.ariaPosInSet = `${Math.max(0, posInSet ?? 0)}`;
-  }
-
-  get posInSet() {
-    const parsed = parseInt(this.#internals.ariaPosInSet ?? '0');
-    return Number.isNaN(parsed) ? null : parsed;
-  }
-
-  /**
-   * total number of options
-   */
-  set setSize(setSize: number | null) {
-    this.#internals.ariaSetSize = `${Math.max(0, setSize ?? 0)}`;
-  }
-
-  get setSize() {
-    try {
-      const int = parseInt(this.#internals.ariaSetSize ?? '0');
-      if (Number.isNaN(int)) {
-        return 0;
-      } else {
-        return int;
-      }
-    } catch {
-      return 0;
-    }
-  }
-
-  #value?: string;
-
-  #internals = InternalsController.of(this, { role: 'option' });
-
-  render(): TemplateResult<1> {
-    const { disabled, active, selected } = this;
-    return html`
-      <div id="outer" class="${classMap({ active, disabled, selected })}">
-        <input type="checkbox"
-               inert
-               role="presentation"
-               tabindex="-1"
-               ?checked="${this.selected}"
-               ?disabled="${this.disabled}">
-        <slot name="icon"></slot>
-        <span>
-          <slot name="create"></slot>
-          <slot>${this.value}</slot>
-        </span>
-        <svg ?hidden="${!this.selected}"
-             viewBox="0 0 512 512"
-             fill="currentColor"
-             aria-hidden="true">
-          <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
-        </svg>
-        <slot id="description" name="description">${this.description ?? ''}</slot>
-      </div>
-    `;
-  }
-
-  @observes('selected')
-  private selectedChanged() {
-    this.#internals.ariaSelected = String(!!this.selected);
-  }
-
-  @observes('disabled')
-  private disabledChanged() {
-    this.#internals.ariaDisabled = String(!!this.disabled);
-  }
-
-  /**
-   * text content within option (used for filtering)
-   */
-  get optionText(): string {
-    return this._slottedText.map(node => node.textContent).join('').trim();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'pf-search-input-option': PfSearchInputOption;
-  }
-}

From 0d919c0560395b085cb00424f6fb67e8b9932e9c Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 3 Apr 2025 18:25:38 +0530
Subject: [PATCH 16/85] chore: search icon fix

---
 elements/pf-search-input/pf-search-input.ts | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 4d6ec43677..773362f452 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -174,19 +174,11 @@ export class PfSearchInput extends LitElement {
       >
         <div id="toggle">
           <div class="search-icon">
-            <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
-              <path d="M256.233,5.756c-71.07,15.793-141.44,
-              87.863-155.834,159.233c-11.495,57.076,0.3,111.153,
-              27.688,154.335L6.339,441.172c-8.596,8.596-8.596,
-              22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,
-              8.596,30.987,0L192.26,383.796c43.282,
-              27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,
-              159.632-155.934C540.212,104.314,407.968-27.93,256.233,
-              5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944
-              S171.969,281.239,171.969,208.37S231.043,76.426,303.913,
-              76.426S435.857,135.501,435.857,208.37z">
-              </path>
-            </svg>
+            <svg class="pf-v5-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" 
+            role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 
+            44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 
+            6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 
+            0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
           </div>
           <input 
             id="toggle-input"

From 8d6991ed7354a1657c0dfca197fc71b606b3d4fb Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 15 Apr 2025 17:55:07 +0530
Subject: [PATCH 17/85] chore: Limit number of autocomplete options shown to
 the user

---
 .../controllers/combobox-controller.ts        |  40 +++++--
 .../demo/pf-search-input-autocomplete.html    |  17 ++-
 elements/pf-search-input/pf-search-input.ts   | 111 ++++++++++++++++++
 3 files changed, 158 insertions(+), 10 deletions(-)

diff --git a/core/pfe-core/controllers/combobox-controller.ts b/core/pfe-core/controllers/combobox-controller.ts
index a15669032d..0a477da32e 100644
--- a/core/pfe-core/controllers/combobox-controller.ts
+++ b/core/pfe-core/controllers/combobox-controller.ts
@@ -525,19 +525,41 @@ export class ComboboxController<
   }
 
   #filterItems() {
-    if (this.#input) {
-      let value: string;
-      for (const item of this.items) {
-        const hidden =
-          !!this.options.isExpanded()
-            && !!(value = this.options.getComboboxValue(this.#input))
-            && this.options.isItemFiltered?.(item, value)
-            || false;
-        this.options.setItemHidden(item, hidden);
+    if (!this.#input) return;
+  
+    const value = this.options.getComboboxValue(this.#input);
+    let filteredOption = 0;
+  
+    for (const item of this.items) {
+      const isExpanded = this.options.isExpanded?.() ?? false;
+      const matchesFilter = this.options.isItemFiltered?.(item, value) ?? false;
+  
+      // Increment the filtered option list count by 1 to limit the no of options shown
+      if (!isExpanded || !matchesFilter) {
+        filteredOption++;
       }
+  
+      // Determine if the item should be hidden
+      const hidden = (isExpanded && matchesFilter) || filteredOption > 5;
+      this.options.setItemHidden(item, hidden);
     }
   }
 
+  // Commented the actual function for filter and will be uncommenting this
+  // #filterItems() {
+  //   if (this.#input) {
+  //     let value: string;
+  //     for (const item of this.items) {
+  //       const hidden =
+  //         !!this.options.isExpanded()
+  //           && !!(value = this.options.getComboboxValue(this.#input))
+  //           && this.options.isItemFiltered?.(item, value)
+  //           || false;
+  //       this.options.setItemHidden(item, hidden);
+  //     }
+  //   }
+  // }
+
   #onClickButton = () => {
     if (!this.options.isExpanded()) {
       this.#show();
diff --git a/elements/pf-search-input/demo/pf-search-input-autocomplete.html b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
index 3ff7577ec9..39466fe4fc 100644
--- a/elements/pf-search-input/demo/pf-search-input-autocomplete.html
+++ b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
@@ -1,11 +1,26 @@
 <div class="container">
   <h1>Search with autocomplete</h1>
   <pf-search-input placeholder="Search">
-    <pf-option value="Alabama"> Alabama </pf-option>
+    <!-- <pf-option value="Alabama"> Alabama </pf-option>
     <pf-option value="New Jersey"> New Jersey </pf-option>
     <pf-option value="New York"> New York </pf-option>
     <pf-option value="New Mexico"> New Mexico </pf-option>
     <pf-option value="North Carolina"> North Carolina </pf-option>
+    <pf-option value="Alabama1"> Alabama 1 </pf-option>
+    <pf-option value="New Jersey1"> New Jersey 1 </pf-option>
+    <pf-option value="New York1"> New York 1 </pf-option>
+    <pf-option value="New Mexico1"> New Mexico  1</pf-option>
+    <pf-option value="North Carolina1"> North Carolina 1</pf-option>
+    <pf-option value="Alabama2"> Alabama 2 </pf-option>
+    <pf-option value="New Jersey2"> New Jersey 2 </pf-option>
+    <pf-option value="New York2"> New York 2 </pf-option>
+    <pf-option value="New Mexico2"> New Mexico 2 </pf-option>
+    <pf-option value="North Carolina2"> North Carolina 2 </pf-option>
+    <pf-option value="Alabama3"> Alabama 3 </pf-option>
+    <pf-option value="New Jersey3"> New Jersey 3 </pf-option>
+    <pf-option value="New York3"> New York 3 </pf-option>
+    <pf-option value="New Mexico3"> New Mexico 3 </pf-option>
+    <pf-option value="North Carolina3"> North Carolina 3 </pf-option> -->
   </pf-search-input>
 </div>
 
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 773362f452..35ff628668 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -41,6 +41,104 @@ export class PfSearchInput extends LitElement {
     delegatesFocus: true,
   };
 
+  optionDetails: {
+    text: string;
+    value: string;
+  }[] = [
+    {
+      "text": "London",
+      "value": "london"
+    },
+    {
+      "text": "Paris",
+      "value": "paris"
+    },
+    {
+      "text": "Tokyo",
+      "value": "tokyo"
+    },
+    {
+      "text": "New York",
+      "value": "york"
+    },
+    {
+      "text": "Rome",
+      "value": "rome"
+    },
+    {
+      "text": "Sydney",
+      "value": "sydney"
+    },
+    {
+      "text": "Beijing",
+      "value": "beijing"
+    },
+    {
+      "text": "Dubai",
+      "value": "dubai"
+    },
+    {
+      "text": "Rio de Janeiro",
+      "value": "de"
+    },
+    {
+      "text": "Barcelona",
+      "value": "barcelona"
+    },
+    {
+      "text": "Istanbul",
+      "value": "istanbul"
+    },
+    {
+      "text": "Cairo",
+      "value": "cairo"
+    },
+    {
+      "text": "Havana",
+      "value": "havana"
+    },
+    {
+      "text": "Machu Picchu",
+      "value": "picchu"
+    },
+    {
+      "text": "The Great Barrier Reef",
+      "value": "great"
+    },
+    {
+      "text": "The Grand Canyon",
+      "value": "grand"
+    },
+    {
+      "text": "The Amazon Rainforest",
+      "value": "amazon"
+    },
+    {
+      "text": "The Great Barrier Reef1",
+      "value": "great1"
+    },
+    {
+      "text": "The Grand Canyon1",
+      "value": "grand1"
+    },
+    {
+      "text": "The Amazon Rainforest1",
+      "value": "amazon1"
+    },
+    {
+      "text": "The Maldives",
+      "value": "maldives"
+    },
+    {
+      "text": "Iceland",
+      "value": "iceland"
+    },
+    {
+      "text": "Bora Bora",
+      "value": "bora"
+    }
+  ]
+
   /** Accessible label for the select */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
@@ -112,6 +210,7 @@ export class PfSearchInput extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
     document.addEventListener('click', this._onOutsideClick);
+    this.addOptions(this.optionDetails);
   }
 
   disconnectedCallback(): void {
@@ -318,6 +417,18 @@ export class PfSearchInput extends LitElement {
     this.value = "";
     this._toggleInput!.value = this.value;
   }
+
+  addOptions(optionData: {
+    text: string;
+    value: string;
+  }[]): void {
+    const options: PfOption[] = optionData.map(optionDetail => {
+      const option: PfOption = document.createElement('pf-option');
+      option.textContent = `${optionDetail.text}`;
+      return option;
+    })
+    this.append(...options);
+  }
 }
 
 declare global {

From 6cf6705d9782488e5c5cf34c5d9bd59fc5bcd09d Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 15 Apr 2025 18:13:50 +0530
Subject: [PATCH 18/85] chore: selected suggestion styling removed

---
 elements/pf-search-input/pf-search-input.ts | 3 +++
 elements/pf-select/pf-option.css            | 8 ++++++++
 2 files changed, 11 insertions(+)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 35ff628668..1741657816 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -416,6 +416,7 @@ export class PfSearchInput extends LitElement {
     }
     this.value = "";
     this._toggleInput!.value = this.value;
+    this.#combobox.selected = [];
   }
 
   addOptions(optionData: {
@@ -425,6 +426,8 @@ export class PfSearchInput extends LitElement {
     const options: PfOption[] = optionData.map(optionDetail => {
       const option: PfOption = document.createElement('pf-option');
       option.textContent = `${optionDetail.text}`;
+      option.value = `${optionDetail.text}`;
+      option.setAttribute('suggestion', '');
       return option;
     })
     this.append(...options);
diff --git a/elements/pf-select/pf-option.css b/elements/pf-select/pf-option.css
index 93063af5d8..52a3e021d4 100644
--- a/elements/pf-select/pf-option.css
+++ b/elements/pf-select/pf-option.css
@@ -72,3 +72,11 @@ slot[name="description"] {
   margin-inline-end: 0.5em;
 }
 
+:host([suggestion]) {
+  #outer.selected {
+    background-color: transparent;
+  }  
+  svg {
+    display: none;
+  }
+}
\ No newline at end of file

From 3e1e8cdcacc10d28bca6b8b96529e6103b3c7cbe Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 15 Apr 2025 18:31:54 +0530
Subject: [PATCH 19/85] fix: resolved style issues

---
 elements/pf-search-input/pf-search-input.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 622c76e2f8..432da7f58d 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -351,7 +351,13 @@ div.search-icon {
 
 #outer:focus-within {
 	#toggle {
+		border-bottom: none;
+		border-bottom-left-radius: 4px;
+		#toggle-input {
+			border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc); 
+		}
+	}
+	#close-button {
 		border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc);
-		box-sizing: content-box;
 	}
 }
\ No newline at end of file

From 22f4e9afcd3cf305b27da4b36339b1b5b5e7e4e4 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 12 May 2025 01:15:36 +0530
Subject: [PATCH 20/85] chore: resolved lint errors

---
 .../controllers/combobox-controller.ts        |   8 +-
 elements/pf-search-input/pf-search-input.ts   | 224 +++++++++---------
 eslint.config.js                              |  10 +-
 3 files changed, 124 insertions(+), 118 deletions(-)

diff --git a/core/pfe-core/controllers/combobox-controller.ts b/core/pfe-core/controllers/combobox-controller.ts
index 0a477da32e..b42e5462b5 100644
--- a/core/pfe-core/controllers/combobox-controller.ts
+++ b/core/pfe-core/controllers/combobox-controller.ts
@@ -525,20 +525,18 @@ export class ComboboxController<
   }
 
   #filterItems() {
-    if (!this.#input) return;
-  
+    if (!this.#input) {
+      return;
+    }
     const value = this.options.getComboboxValue(this.#input);
     let filteredOption = 0;
-  
     for (const item of this.items) {
       const isExpanded = this.options.isExpanded?.() ?? false;
       const matchesFilter = this.options.isItemFiltered?.(item, value) ?? false;
-  
       // Increment the filtered option list count by 1 to limit the no of options shown
       if (!isExpanded || !matchesFilter) {
         filteredOption++;
       }
-  
       // Determine if the item should be hidden
       const hidden = (isExpanded && matchesFilter) || filteredOption > 5;
       this.options.setItemHidden(item, hidden);
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 1741657816..9ee8dbabe2 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -45,99 +45,99 @@ export class PfSearchInput extends LitElement {
     text: string;
     value: string;
   }[] = [
-    {
-      "text": "London",
-      "value": "london"
-    },
-    {
-      "text": "Paris",
-      "value": "paris"
-    },
-    {
-      "text": "Tokyo",
-      "value": "tokyo"
-    },
-    {
-      "text": "New York",
-      "value": "york"
-    },
-    {
-      "text": "Rome",
-      "value": "rome"
-    },
-    {
-      "text": "Sydney",
-      "value": "sydney"
-    },
-    {
-      "text": "Beijing",
-      "value": "beijing"
-    },
-    {
-      "text": "Dubai",
-      "value": "dubai"
-    },
-    {
-      "text": "Rio de Janeiro",
-      "value": "de"
-    },
-    {
-      "text": "Barcelona",
-      "value": "barcelona"
-    },
-    {
-      "text": "Istanbul",
-      "value": "istanbul"
-    },
-    {
-      "text": "Cairo",
-      "value": "cairo"
-    },
-    {
-      "text": "Havana",
-      "value": "havana"
-    },
-    {
-      "text": "Machu Picchu",
-      "value": "picchu"
-    },
-    {
-      "text": "The Great Barrier Reef",
-      "value": "great"
-    },
-    {
-      "text": "The Grand Canyon",
-      "value": "grand"
-    },
-    {
-      "text": "The Amazon Rainforest",
-      "value": "amazon"
-    },
-    {
-      "text": "The Great Barrier Reef1",
-      "value": "great1"
-    },
-    {
-      "text": "The Grand Canyon1",
-      "value": "grand1"
-    },
-    {
-      "text": "The Amazon Rainforest1",
-      "value": "amazon1"
-    },
-    {
-      "text": "The Maldives",
-      "value": "maldives"
-    },
-    {
-      "text": "Iceland",
-      "value": "iceland"
-    },
-    {
-      "text": "Bora Bora",
-      "value": "bora"
-    }
-  ]
+      {
+        'text': 'London',
+        'value': 'london',
+      },
+      {
+        'text': 'Paris',
+        'value': 'paris',
+      },
+      {
+        'text': 'Tokyo',
+        'value': 'tokyo',
+      },
+      {
+        'text': 'New York',
+        'value': 'york',
+      },
+      {
+        'text': 'Rome',
+        'value': 'rome',
+      },
+      {
+        'text': 'Sydney',
+        'value': 'sydney',
+      },
+      {
+        'text': 'Beijing',
+        'value': 'beijing',
+      },
+      {
+        'text': 'Dubai',
+        'value': 'dubai',
+      },
+      {
+        'text': 'Rio de Janeiro',
+        'value': 'de',
+      },
+      {
+        'text': 'Barcelona',
+        'value': 'barcelona',
+      },
+      {
+        'text': 'Istanbul',
+        'value': 'istanbul',
+      },
+      {
+        'text': 'Cairo',
+        'value': 'cairo',
+      },
+      {
+        'text': 'Havana',
+        'value': 'havana',
+      },
+      {
+        'text': 'Machu Picchu',
+        'value': 'picchu',
+      },
+      {
+        'text': 'The Great Barrier Reef',
+        'value': 'great',
+      },
+      {
+        'text': 'The Grand Canyon',
+        'value': 'grand',
+      },
+      {
+        'text': 'The Amazon Rainforest',
+        'value': 'amazon',
+      },
+      {
+        'text': 'The Great Barrier Reef1',
+        'value': 'great1',
+      },
+      {
+        'text': 'The Grand Canyon1',
+        'value': 'grand1',
+      },
+      {
+        'text': 'The Amazon Rainforest1',
+        'value': 'amazon1',
+      },
+      {
+        'text': 'The Maldives',
+        'value': 'maldives',
+      },
+      {
+        'text': 'Iceland',
+        'value': 'iceland',
+      },
+      {
+        'text': 'Bora Bora',
+        'value': 'bora',
+      },
+    ];
 
   /** Accessible label for the select */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
@@ -181,7 +181,7 @@ export class PfSearchInput extends LitElement {
 
   @query('#outer') private _searchInputContainer!: HTMLElement;
 
-  #isNotPlaceholderOption = (option: PfOption) => option !== this._placeholder;
+  // #isNotPlaceholderOption = (option: PfOption) => option !== this._placeholder;
 
   #internals = InternalsController.of(this);
 
@@ -218,7 +218,7 @@ export class PfSearchInput extends LitElement {
     document.removeEventListener('click', this._onOutsideClick);
   }
 
-  // Function to handle the closing of popover 
+  // Function to handle the closing of popover
   @bound private _onOutsideClick(event: MouseEvent) {
     const path = event.composedPath();
     if (!path.includes(this._searchInputContainer)) {
@@ -263,7 +263,7 @@ export class PfSearchInput extends LitElement {
     const { disabled, expanded, placeholder } = this;
     const { anchor = 'bottom', alignment = 'start', styles = {} } = this.#float;
     const { height, width } = this.getBoundingClientRect?.() || {};
-    const hideLightDomItems =  !ComboboxController.supportsCrossRootActiveDescendant;
+    const hideLightDomItems = !ComboboxController.supportsCrossRootActiveDescendant;
 
     return html`
       <div 
@@ -286,7 +286,7 @@ export class PfSearchInput extends LitElement {
           >
           <pf-button 
             @click="${this.#OnClose}" 
-            ?hidden="${(!expanded && this._toggleInput?.value.trim() === "")}" 
+            ?hidden="${(!expanded && this._toggleInput?.value.trim() === '')}" 
             id="close-button"  
             plain 
             label="Close"
@@ -370,18 +370,18 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  #computePlaceholderText() {
-    return this.placeholder
-      || this.querySelector?.<HTMLSlotElement>('[slot=placeholder]')
-          ?.assignedNodes()
-          ?.reduce((acc, node) => `${acc}${node.textContent}`, '')
-          ?.trim()
-      || this.#combobox.items
-          .filter(this.#isNotPlaceholderOption)
-          .at(0)
-          ?.value
-      || '';
-  }
+  // #computePlaceholderText() {
+  //   return this.placeholder
+  //     || this.querySelector?.<HTMLSlotElement>('[slot=placeholder]')
+  //         ?.assignedNodes()
+  //         ?.reduce((acc, node) => `${acc}${node.textContent}`, '')
+  //         ?.trim()
+  //     || this.#combobox.items
+  //         .filter(this.#isNotPlaceholderOption)
+  //         .at(0)
+  //         ?.value
+  //     || '';
+  // }
 
   /**
    * Opens the dropdown
@@ -410,11 +410,11 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  async #OnClose(){
+  async #OnClose() {
     if (this.expanded) {
       await this.hide();
     }
-    this.value = "";
+    this.value = '';
     this._toggleInput!.value = this.value;
     this.#combobox.selected = [];
   }
@@ -429,7 +429,7 @@ export class PfSearchInput extends LitElement {
       option.value = `${optionDetail.text}`;
       option.setAttribute('suggestion', '');
       return option;
-    })
+    });
     this.append(...options);
   }
 }
diff --git a/eslint.config.js b/eslint.config.js
index 97dfd76c46..612c023c44 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -6,9 +6,17 @@ import pfePlugin from '@patternfly/eslint-plugin-elements';
 
 import { includeIgnoreFile } from '@eslint/compat';
 
+import { fileURLToPath } from 'url';
+import path from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const gitignorePath = path.resolve(__dirname, '.gitignore');
+
+
 export default tseslint.config(
   ...pfe,
-  includeIgnoreFile(new URL('.gitignore', import.meta.url).pathname),
+  includeIgnoreFile(gitignorePath),
   {
     name: 'local/ignores',
     ignores: [

From eb70f391bc7c29542374a316491bf69d8cce7b16 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 22 May 2025 12:58:36 +0530
Subject: [PATCH 21/85] chore: reverted combobox controller changes

---
 .../controllers/combobox-controller.ts        | 38 +++++--------------
 elements/pf-search-input/pf-search-input.css  |  2 +
 2 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/core/pfe-core/controllers/combobox-controller.ts b/core/pfe-core/controllers/combobox-controller.ts
index b42e5462b5..a15669032d 100644
--- a/core/pfe-core/controllers/combobox-controller.ts
+++ b/core/pfe-core/controllers/combobox-controller.ts
@@ -525,39 +525,19 @@ export class ComboboxController<
   }
 
   #filterItems() {
-    if (!this.#input) {
-      return;
-    }
-    const value = this.options.getComboboxValue(this.#input);
-    let filteredOption = 0;
-    for (const item of this.items) {
-      const isExpanded = this.options.isExpanded?.() ?? false;
-      const matchesFilter = this.options.isItemFiltered?.(item, value) ?? false;
-      // Increment the filtered option list count by 1 to limit the no of options shown
-      if (!isExpanded || !matchesFilter) {
-        filteredOption++;
+    if (this.#input) {
+      let value: string;
+      for (const item of this.items) {
+        const hidden =
+          !!this.options.isExpanded()
+            && !!(value = this.options.getComboboxValue(this.#input))
+            && this.options.isItemFiltered?.(item, value)
+            || false;
+        this.options.setItemHidden(item, hidden);
       }
-      // Determine if the item should be hidden
-      const hidden = (isExpanded && matchesFilter) || filteredOption > 5;
-      this.options.setItemHidden(item, hidden);
     }
   }
 
-  // Commented the actual function for filter and will be uncommenting this
-  // #filterItems() {
-  //   if (this.#input) {
-  //     let value: string;
-  //     for (const item of this.items) {
-  //       const hidden =
-  //         !!this.options.isExpanded()
-  //           && !!(value = this.options.getComboboxValue(this.#input))
-  //           && this.options.isItemFiltered?.(item, value)
-  //           || false;
-  //       this.options.setItemHidden(item, hidden);
-  //     }
-  //   }
-  // }
-
   #onClickButton = () => {
     if (!this.options.isExpanded()) {
       this.#show();
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 432da7f58d..13fea1b63b 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -189,6 +189,8 @@
 #outer.expanded #listbox-container {
   opacity: 1;
   z-index: 9999 !important;
+	max-height: 220px;
+	overflow: hidden;
 }
 
 #listbox {

From 5a9de0ebcf35d80b601f7ac8088c250ecd1c605a Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 22 May 2025 16:18:52 +0530
Subject: [PATCH 22/85] chore: added static initialization block for outside
 click

---
 elements/pf-search-input/pf-search-input.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 9ee8dbabe2..56fd9f4c2d 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -33,14 +33,14 @@ export class PfSelectChangeEvent extends Event {
 @customElement('pf-search-input')
 export class PfSearchInput extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];
-
   static readonly formAssociated = true;
-
   static override readonly shadowRootOptions: ShadowRootInit = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
   };
 
+  static instances: Set<PfSearchInput> = new Set<PfSearchInput>();
+
   optionDetails: {
     text: string;
     value: string;
@@ -207,15 +207,23 @@ export class PfSearchInput extends LitElement {
     setItemSelected: (item, selected) => item.selected = selected,
   });
 
+  static {
+    document.addEventListener('click', event => {
+      for (const instance of PfSearchInput.instances) {
+        instance._onOutsideClick(event);
+      }
+    });
+  }
+
   connectedCallback(): void {
     super.connectedCallback();
-    document.addEventListener('click', this._onOutsideClick);
+    PfSearchInput.instances.add(this);
     this.addOptions(this.optionDetails);
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
-    document.removeEventListener('click', this._onOutsideClick);
+    PfSearchInput.instances.delete(this);
   }
 
   // Function to handle the closing of popover

From f180d02bb0ec66b19e409003122c70e931dfd793 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 22 May 2025 16:26:57 +0530
Subject: [PATCH 23/85] chore: fix SSR issues

---
 elements/pf-search-input/pf-search-input.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 56fd9f4c2d..9c7a4eb2e3 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -208,11 +208,13 @@ export class PfSearchInput extends LitElement {
   });
 
   static {
-    document.addEventListener('click', event => {
-      for (const instance of PfSearchInput.instances) {
-        instance._onOutsideClick(event);
-      }
-    });
+    if (!isServer) {
+      document.addEventListener('click', event => {
+        for (const instance of PfSearchInput.instances) {
+          instance._onOutsideClick(event);
+        }
+      });
+    }
   }
 
   connectedCallback(): void {

From 32e1afaa8d21d896446979b2bcf9897693ed1024 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 22 May 2025 17:23:07 +0530
Subject: [PATCH 24/85] chore: removed mock data

---
 .../demo/pf-search-input-autocomplete.html    |   4 +-
 elements/pf-search-input/pf-search-input.ts   | 113 ------------------
 2 files changed, 2 insertions(+), 115 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input-autocomplete.html b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
index 39466fe4fc..712a57b958 100644
--- a/elements/pf-search-input/demo/pf-search-input-autocomplete.html
+++ b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
@@ -1,7 +1,7 @@
 <div class="container">
   <h1>Search with autocomplete</h1>
   <pf-search-input placeholder="Search">
-    <!-- <pf-option value="Alabama"> Alabama </pf-option>
+    <pf-option value="Alabama"> Alabama </pf-option>
     <pf-option value="New Jersey"> New Jersey </pf-option>
     <pf-option value="New York"> New York </pf-option>
     <pf-option value="New Mexico"> New Mexico </pf-option>
@@ -20,7 +20,7 @@ <h1>Search with autocomplete</h1>
     <pf-option value="New Jersey3"> New Jersey 3 </pf-option>
     <pf-option value="New York3"> New York 3 </pf-option>
     <pf-option value="New Mexico3"> New Mexico 3 </pf-option>
-    <pf-option value="North Carolina3"> North Carolina 3 </pf-option> -->
+    <pf-option value="North Carolina3"> North Carolina 3 </pf-option>
   </pf-search-input>
 </div>
 
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 9c7a4eb2e3..3a049a3fb7 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -41,104 +41,6 @@ export class PfSearchInput extends LitElement {
 
   static instances: Set<PfSearchInput> = new Set<PfSearchInput>();
 
-  optionDetails: {
-    text: string;
-    value: string;
-  }[] = [
-      {
-        'text': 'London',
-        'value': 'london',
-      },
-      {
-        'text': 'Paris',
-        'value': 'paris',
-      },
-      {
-        'text': 'Tokyo',
-        'value': 'tokyo',
-      },
-      {
-        'text': 'New York',
-        'value': 'york',
-      },
-      {
-        'text': 'Rome',
-        'value': 'rome',
-      },
-      {
-        'text': 'Sydney',
-        'value': 'sydney',
-      },
-      {
-        'text': 'Beijing',
-        'value': 'beijing',
-      },
-      {
-        'text': 'Dubai',
-        'value': 'dubai',
-      },
-      {
-        'text': 'Rio de Janeiro',
-        'value': 'de',
-      },
-      {
-        'text': 'Barcelona',
-        'value': 'barcelona',
-      },
-      {
-        'text': 'Istanbul',
-        'value': 'istanbul',
-      },
-      {
-        'text': 'Cairo',
-        'value': 'cairo',
-      },
-      {
-        'text': 'Havana',
-        'value': 'havana',
-      },
-      {
-        'text': 'Machu Picchu',
-        'value': 'picchu',
-      },
-      {
-        'text': 'The Great Barrier Reef',
-        'value': 'great',
-      },
-      {
-        'text': 'The Grand Canyon',
-        'value': 'grand',
-      },
-      {
-        'text': 'The Amazon Rainforest',
-        'value': 'amazon',
-      },
-      {
-        'text': 'The Great Barrier Reef1',
-        'value': 'great1',
-      },
-      {
-        'text': 'The Grand Canyon1',
-        'value': 'grand1',
-      },
-      {
-        'text': 'The Amazon Rainforest1',
-        'value': 'amazon1',
-      },
-      {
-        'text': 'The Maldives',
-        'value': 'maldives',
-      },
-      {
-        'text': 'Iceland',
-        'value': 'iceland',
-      },
-      {
-        'text': 'Bora Bora',
-        'value': 'bora',
-      },
-    ];
-
   /** Accessible label for the select */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
@@ -220,7 +122,6 @@ export class PfSearchInput extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
     PfSearchInput.instances.add(this);
-    this.addOptions(this.optionDetails);
   }
 
   disconnectedCallback(): void {
@@ -428,20 +329,6 @@ export class PfSearchInput extends LitElement {
     this._toggleInput!.value = this.value;
     this.#combobox.selected = [];
   }
-
-  addOptions(optionData: {
-    text: string;
-    value: string;
-  }[]): void {
-    const options: PfOption[] = optionData.map(optionDetail => {
-      const option: PfOption = document.createElement('pf-option');
-      option.textContent = `${optionDetail.text}`;
-      option.value = `${optionDetail.text}`;
-      option.setAttribute('suggestion', '');
-      return option;
-    });
-    this.append(...options);
-  }
 }
 
 declare global {

From 913b68155702617e16573ddf24229961c851015b Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 22 May 2025 17:44:31 +0530
Subject: [PATCH 25/85] chore: hide close button

---
 elements/pf-search-input/pf-search-input.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 3a049a3fb7..d66471ff27 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -197,7 +197,7 @@ export class PfSearchInput extends LitElement {
           >
           <pf-button 
             @click="${this.#OnClose}" 
-            ?hidden="${(!expanded && this._toggleInput?.value.trim() === '')}" 
+            ?hidden="${this.#hideCloseButton()}" 
             id="close-button"  
             plain 
             label="Close"
@@ -329,6 +329,13 @@ export class PfSearchInput extends LitElement {
     this._toggleInput!.value = this.value;
     this.#combobox.selected = [];
   }
+
+  #hideCloseButton() {
+    if (!isServer) {
+      return !this.expanded && this._toggleInput?.value.trim() === ''; // SSR or server-side environment: don't hide the element
+    }
+    return false;
+  }
 }
 
 declare global {

From 88a0a57d97d45dba85f659c87a2fd619918cb53a Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 22 May 2025 19:14:10 +0530
Subject: [PATCH 26/85] chore: inline styles removed

---
 elements/pf-search-input/pf-search-input.css | 7 +++++++
 elements/pf-search-input/pf-search-input.ts  | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 13fea1b63b..a3bf45ddab 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -362,4 +362,11 @@ div.search-icon {
 	#close-button {
 		border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc);
 	}
+}
+
+div.visually-hidden {
+  width: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
 }
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index d66471ff27..185cbacfb5 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -213,7 +213,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 class="visually-hidden" id="toggle-button"></div>
         </div>
         <div 
           id="listbox-container"

From 9136ae37d51a914759bf44d26833dc46f6e89b0f Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 22 May 2025 20:08:36 +0530
Subject: [PATCH 27/85] chore: replaced svg with pf-icon

---
 elements/pf-search-input/pf-search-input.css | 15 +++++++++------
 elements/pf-search-input/pf-search-input.ts  | 17 ++---------------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index a3bf45ddab..ff6a5a2d51 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -259,10 +259,13 @@
 }
 
 #close-button {
+	--pf-c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+
   color: currentColor;
   background-color: transparent;
-  justify-content: flex-end;
-  padding: var(--pf-global--spacer--sm, 0.5rem);
 	max-height: 2.25rem;
 	max-width: 2.25rem;
 	box-sizing: border-box;
@@ -271,11 +274,11 @@
 	justify-content: center;
 	border-radius: 0px;
 	position: relative;
-}
 
-#close-button svg {
-	position: relative;
-	top: 3px;
+	pf-icon {
+		position: relative;
+		top: 3px;
+	}
 }
 
 #toggle-text {
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 185cbacfb5..4b70ebc0f4 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -184,11 +184,7 @@ export class PfSearchInput extends LitElement {
       >
         <div id="toggle">
           <div class="search-icon">
-            <svg class="pf-v5-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" 
-            role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 
-            44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 
-            6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 
-            0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
+            <pf-icon size="md" icon="search" set="fas">search</pf-icon>
           </div>
           <input 
             id="toggle-input"
@@ -202,16 +198,7 @@ export class PfSearchInput extends LitElement {
             plain 
             label="Close"
           >
-            <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
-              <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 
-              0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 
-              189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 
-              0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 
-              356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 
-              12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 
-              44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
-              </path>
-            </svg>
+            <pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
           </pf-button>
           <div class="visually-hidden" id="toggle-button"></div>
         </div>

From a413c2ae77041e223a2d35c15207df033c2d42a9 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Fri, 23 May 2025 00:20:58 +0530
Subject: [PATCH 28/85] chore: pf-option selected background color variable
 added

---
 elements/pf-search-input/pf-search-input.css | 5 +++++
 elements/pf-select/pf-option.css             | 2 +-
 elements/pf-select/pf-select.css             | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index ff6a5a2d51..13902ccb08 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -372,4 +372,9 @@ div.visually-hidden {
   height: 0;
   padding: 0;
   visibility: hidden;
+}
+
+::slotted(pf-option[selected]) {
+	--_pf-option-svg-display: none;
+	--_pf-option-selected-background-color: var(--pf-global--BackgroundColor--100, #fff);
 }
\ No newline at end of file
diff --git a/elements/pf-select/pf-option.css b/elements/pf-select/pf-option.css
index 52a3e021d4..2206aaab67 100644
--- a/elements/pf-select/pf-option.css
+++ b/elements/pf-select/pf-option.css
@@ -15,7 +15,7 @@
 :host(:focus) #outer,
 :host(:hover) #outer,
 #outer.selected {
-  background-color: #e0e0e0;
+  background-color: var(--_pf-option-selected-background-color, var(--rh-color-gray-20, #e0e0e0));
 }
 
 #outer {
diff --git a/elements/pf-select/pf-select.css b/elements/pf-select/pf-select.css
index fac2bf294c..2101395f6f 100644
--- a/elements/pf-select/pf-select.css
+++ b/elements/pf-select/pf-select.css
@@ -5,6 +5,7 @@
 	color: var(--pf-global--Color--100, #151515);
   --_pf-option-checkboxes-display: none;
   --_pf-option-svg-display: block;
+	--_pf-option-selected-background-color: var(--rh-color-gray-20, #e0e0e0);
 	--pf-c-select__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
 	--pf-c-select__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
 	--pf-c-select__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);

From c9a62d387d2f409334ccf2b747ec565df1d376ee Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Fri, 23 May 2025 00:26:23 +0530
Subject: [PATCH 29/85] chore: removed unnecessary style

---
 elements/pf-search-input/demo/pf-search-input.html | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input.html b/elements/pf-search-input/demo/pf-search-input.html
index 4f45de098a..420fa0b74a 100644
--- a/elements/pf-search-input/demo/pf-search-input.html
+++ b/elements/pf-search-input/demo/pf-search-input.html
@@ -12,10 +12,3 @@
 <script type="module">
   import '@patternfly/elements/pf-search-input/pf-search-input.js';
 </script>
-
-<style>
-pf-search-input {
-  /* insert demo styles */
-}
-</style>
-

From 84c19bd19c13f0a0f20e46c0e0bcf232ac6276c8 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Wed, 4 Jun 2025 18:15:55 +0530
Subject: [PATCH 30/85] feat(search-input): add pf-search-input element

---
 elements/pf-search-input/pf-search-input.ts | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 4b70ebc0f4..bcbd665c1f 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -268,19 +268,6 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  // #computePlaceholderText() {
-  //   return this.placeholder
-  //     || this.querySelector?.<HTMLSlotElement>('[slot=placeholder]')
-  //         ?.assignedNodes()
-  //         ?.reduce((acc, node) => `${acc}${node.textContent}`, '')
-  //         ?.trim()
-  //     || this.#combobox.items
-  //         .filter(this.#isNotPlaceholderOption)
-  //         .at(0)
-  //         ?.value
-  //     || '';
-  // }
-
   /**
    * Opens the dropdown
    */

From 616475b9f764d6e4cc1e8f4de68de7de9de2f387 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 5 Jun 2025 17:43:44 +0530
Subject: [PATCH 31/85] chore: search change event updated

---
 .../demo/pf-search-input-autocomplete.html            | 11 ++++++++++-
 elements/pf-search-input/pf-search-input.ts           |  4 ++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input-autocomplete.html b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
index 712a57b958..034e1e9221 100644
--- a/elements/pf-search-input/demo/pf-search-input-autocomplete.html
+++ b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
@@ -1,6 +1,6 @@
 <div class="container">
   <h1>Search with autocomplete</h1>
-  <pf-search-input placeholder="Search">
+  <pf-search-input id="search-input" placeholder="Search">
     <pf-option value="Alabama"> Alabama </pf-option>
     <pf-option value="New Jersey"> New Jersey </pf-option>
     <pf-option value="New York"> New York </pf-option>
@@ -26,6 +26,15 @@ <h1>Search with autocomplete</h1>
 
 <script type="module">
   import '@patternfly/elements/pf-search-input/pf-search-input.js';
+
+  const searchInput = document.getElementById('search-input');
+
+  searchInput.addEventListener('change', (event) => {
+    /* eslint-disable no-console */
+    console.log('Selected:', event.target.value);
+    /* eslint-disable no-console */
+  });
+</script
 </script>
 
 <style>
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index bcbd665c1f..bf4d08a74d 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -20,7 +20,7 @@ import styles from './pf-search-input.css';
 import { PfOption } from '../pf-select/pf-option.js';
 import { bound } from '@patternfly/pfe-core/decorators.js';
 
-export class PfSelectChangeEvent extends Event {
+export class PfSearchChangeEvent extends Event {
   constructor() {
     super('change', { bubbles: true });
   }
@@ -246,7 +246,7 @@ export class PfSearchInput extends LitElement {
   @observes('value')
   private valueChanged() {
     this.#internals.setFormValue(this.value ?? '');
-    this.dispatchEvent(new PfSelectChangeEvent());
+    this.dispatchEvent(new PfSearchChangeEvent());
   }
 
 

From d0fc1a7806e624182ed58273e4470c546f06bc98 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 5 Jun 2025 19:58:15 +0530
Subject: [PATCH 32/85] chore: replace native input with pf-text-input

---
 elements/pf-search-input/pf-search-input.css | 19 ++++++++++++++-----
 elements/pf-search-input/pf-search-input.ts  | 12 +++++++-----
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 13902ccb08..2a1cf43a42 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index bf4d08a74d..8f2e37874c 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/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()}" 

From 621b4425d3a5c189c896d2483fdadbcd9b674a92 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 5 Jun 2025 20:09:22 +0530
Subject: [PATCH 33/85] chore: added search functionality on enter and space
 key press

---
 elements/pf-search-input/pf-search-input.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 8f2e37874c..b52ec36ab1 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -191,6 +191,7 @@ export class PfSearchInput extends LitElement {
             accessible-label="search" 
             id="toggle-input"
             ?disabled="${disabled}"
+            @keydown=${this.#onSearchInput}
             placeholder="${placeholder || this.#buttonLabel}">
           </pf-text-input>
           <pf-button 
@@ -312,6 +313,14 @@ export class PfSearchInput extends LitElement {
     }
     return false;
   }
+
+  #onSearchInput(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      this.value = this._toggleInput?.value;
+      this.#internals.setFormValue(this.value ?? '');
+      this.dispatchEvent(new PfSearchChangeEvent());
+    }
+  }
 }
 
 declare global {

From 83b65d6cf89ec3126a534dcc559457435c812c34 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 5 Jun 2025 20:14:59 +0530
Subject: [PATCH 34/85] chore: screenshot updated

---
 elements/pf-search-input/docs/screenshot.png | Bin 0 -> 13859 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 elements/pf-search-input/docs/screenshot.png

diff --git a/elements/pf-search-input/docs/screenshot.png b/elements/pf-search-input/docs/screenshot.png
new file mode 100644
index 0000000000000000000000000000000000000000..7586a53f125edd7ea74f1c27aff1354c27aefa10
GIT binary patch
literal 13859
zcmd^mbyStzzb7r7D%~k6NOw2V!l6S#x<fh@kZuqpq@+Vq1OzGR4rxKUOB!ZByzejO
z-udIMb!V+vGvnec&f)BOc6>ka-M&*%lEFeJL5G8b!;+JgRD*+qcL6VER21+R<h9~4
z@WIGZLPAAOLV`-g$^Mn4jTsyqQ><-_A}gZm{osX>qG*QH`y1c0ze}re2I**`Wrxf8
zg!lJV=f_#j^+klH8yZoMh*07AianKVHxQ?zvw5N&X3EVu`Gvf?qlwQWvypFY)){9A
zSA~e95$+IqMnO4JCP@=Udqc?C8bT#*0pkp(H|3LhbT)CZJljfp>?V5r*<g?`Wa7J5
zNHovEl3c-xz3-f5zv<J+;~?>o6idVmqRK{Fj@Ga3<P2C+-c(wz&$TKx54Gvdh12Pp
z8L+MR=q0Ws$uz9Jn}Uxzlm2i8r3lA7ebN`}rs`sX5HC9%DH{BSElgEmH0q|DxNwZF
z5-pfKWy(K_%%(^wrp<`zxnK|iCnk;j6KV#}F#X&4m*XZ)qTWdv=$b;Vl)OGD(*nf?
zhB!WJ==Hx9*b+1QJ;};zgr9twg&}xL4J;(V`H84BuU$2@dz_<Mc*C)LP_BPzob~fc
z&l5~J%uGw}m7*dXGkA{*2OnYyhXmfigBJ;S!NDQM1;gC~zwyCKG7I4!-@?0OA^!6{
zR2NR{g@l|O`2E7f$;`~o*}~pM7@r3ZG&NzVuH~YosK9SxZ_D!1)ZW;P#og8cssbnI
z&JW(&nz_8Ba<{dybLMv!qPZ)<58gw6W~HIJE8=1;M5CpsLM37EWJbl!@{HvfjW9YD
z6_ucq=_`IUN$J0<gHJ*<7A`Ih{H(06U%zH~&B0>tWX{UQ$H&L|jGdL8{V6E%)Y-$%
z<)!;mJ7?Oz8u>>%l4i~(PL>WXmiBg3P`fXU?Ok1jXlS60{`v2(ahkbX{;MZD=f58d
zJRmFd4J#YVGuD5$4XO%4f8|%PbT_lnmbA15(*ybtX6NG-yet2ozWG;=|5j7$Uo|;+
z*#EuezkTx`Yic-~IZ4>tf-YTz|FtrISN``e|E?&=3O)J1&BR~ReD_x{&%)?}tp8jy
zVf1q*j$1f5c78cYF?DzNopiKD#g&`eZ(V|~SXjH&^?z&r&?07k%q~eSmH*@Z$9;~3
z-(f$zH%P+iRORZ~=_Ec%oNh87to7hhJFiyVZXL}oROxtSHVsw`8eDGIOssh{)z(aK
z_$>?`cx0UTWcVn37)1Rpia-Z`7Tpnu$?V~=sNnIzj|vjg`jyz-`()g#tgoh2mMCa3
zaA+z+=NxzCS*S(DUU!R*U_zy{vX0FCk!1am^u+xGcjE$biJ=xn#nuMlpi1>`;E?C&
z5#=~Q30eQZfy}!u9MIs=8=j-Yy#gg-;E>Zr5buV8k8s~58I!L6u5WaHKNP4^3q2SQ
z3$bjf7&O-VE;pD^CI9EBDnt70F`PkA-(bMRe-HS_eJlZAUU#|tC+E>NSGy7WIP+3L
zyfakrdw8MY1cfiY_#fN85Wo4P&T@XxMY$3!awDsWo5-vYW_9W4cB`lw>d~v|_Kr2c
zuYt3OwzpHZB?oDVy}g@pnL<4~BLj75d6|AX(C!kQ{IPSWM{&d3mB`&w`J}$%!`w9-
z;u!|`I{bQHTCw24Y1Uru4=NM^uS2e)brrEJlXo`Jc`y(<1b-7f3qX>kLO`m}dNV*}
zG51ciCaUPWo7kkVb6FqxiF4~foIfp^Mfz~VvMlY$kmU@r5SEXLDm2$r0qS5uJ|R4;
ziUU(1`h*}WtLt#R!XBEu7<7dD$LcM{FsNXt8A2_kZbbEgZk=6X-GZ;KM);)+g@+`C
z@7c?fRv|=aW!w|}O_204_{t{y&B=KzhNxOYz_|R88f9D90_Q)Q^_q5>U!5I%ww>WV
z{~fO!*WZhIw@BOwQTrby3S9klkpr)1?7zLI+$tg~cD44^kJ5ztMwMFp<RcOy&%XR3
zuB-2Z5)T{eI<9%Ks6-#4&kC-~R?%##NP7KeZBRA@mq@@jd+}%^ERotPf-{}fG@nQ|
z)I+R}{c~A+=|O$S58by0m*a>>$X?C9*A1LjW3r0qh$xsbm%Cq;eS$HGX*A39&|q&I
z!N6Fk{59$fJS3`v-ZgN|r;0r6kM<A?QPvB|MI!e=!6qxHVm53zkLim%AZ0W=-JKh0
z@_J3bxj(t!JSfC&K0tOPsmQMJ>^<0T0Z2UwH{sP56Jy(7G#c@U&mtO`2#Tp!d8AI{
zXBsYQF<!L>BAcxZq{nfXE43CiS&bKc_PzEb7WS^!SNv=MR>_4S3t7K>;N-#F=Xu)9
zfwTdA?4RC!<wG?w)-Q1^-^Ci~_cJE4s_V1`V<o203O!GHqE>68{l)v-sbD*T5gy+G
zEkLvqyOurLm90yqy)jGI&meAQyBeLp*(PCHr9g%H8;w@sLcL=fYZMN6^j$h!rp@Ud
zl>>gEq%ttuuy5{*?+72u=5A;Rdhd9e+4slK`gBGR$M=4Bx!WDu2yA;2A<rbTPB!%n
z#nj8c9~8q?r_jzfsC9AN?F~8^s-gbuBWsZc0zDScqJNQcodw&ZCYInnx}yw*KFhQ8
zL1;4=(c?0$>NM7*Y!ye<B}L|W$)NK4TRLLXuWEIhbd-&rXe2*JJLbLm>3{+{R>nhR
zScUzXFfJ>fsMbPUAriaC8_FT96<}Q#=Jr*~XH}=~go{sgFqNzLf(s!ah{Nm8b_<hm
zJcuHpaLr7)Z%JN>m6QgS?zvLvIbsXJ2D1g^hfW6Z+Gm&-`6)D?&V%|IUAjky8DJG>
zkg9nlrVu;y;w!@%2Fgc`cSy{=pO2WEf7<nMiZ8lpIh=OmjxVr7{qoS6ZYkM=4GLD7
zqP(eyV#;>o>2ZRvhJ%9xwL&#|>x7-tD7}xL-h>&%wsDyVU8KZ)?vnsf^C?32J3fnC
zI%Urn&ZSw1B@a)IgZuu-ftW=_f@FLXE;a1m!hILQut0>eBa)iF3!f<PAhcor=g?M*
z(QtFPazcuhs|ZE9TKpmY9M`UiPU8xv8Raiyg?ggg+k&)h<~zxgU+11`v(E^Jv{Suu
zdj}rY4gvQl*6-F&nnSqo1>ZM1y4(dC{BP3jtL0}%9hNhM;YOGd7n1=PBUbw?2lP`H
z*Lhi;Y;mBX7Zlv&#PgXp74g3zSlwn%%iqg6@ye!QS@(o}Ht^$hSIuVufiz6Sq)%u5
z5<aH`jO-7Ae_Ebf-qpxfA^wPGJIf_0=Fji9j~a(RUQ=G3k{;>|op6~Bb23Pdtr$OW
zJjN&&JiGE-#d*)46@hnT$TfLBGWGf)*ydF5A_!W~>@IFz|K!-C{&r>|Xi+&ax%chX
zV8aj`?u1L^gCXH`JDE(HTJgFtPD!%CI=eaiD+UQ@GvV*k1Xxd&q21t<NRoXo3)0WN
zF~?}g<20zL*c$gBDK>G03OPK1FUGdAtsYGYMQy0bsju_h-WJ?qfI_JjgVFeR(e&z^
z1w1^LIkq{E9jDgBzapS~OVL{$${o|#S7LPo{1Z{qIY$$J+?AnKsg$OAM2?x4Zdpm)
zA6P~@NnU60MSRl5ogNwxe3N+HW;VHa*-vSOA=kI{Is*2QYeILy_MK>T&9kLIJFb?2
z_dlMC+^<dqv;Q6`yEFvv!LcYjj<?%tOvNO0rf?|&M6ocvvCAih@@Qz*TltBfu(<G~
zh(o=Dldgaf)FJi#0(u<U^@81!W}Q)wyO9}CXK@V`g}Y5tu!&8QPo`sePaHHtIN_g+
zie&Y2(V0$LQelYp=c5TJs42P_PXHKW942VcJcY_3)S`Rl8a#E|o}zxNS%!(`aD8#|
z*?yrpW@A{E*JVBCiD9!KiDD%dC>??unt+l&rl*T6l$S2cvJi-jk?XuR@Y!NGJ4-tR
zi<Dt&q7)<bVd)RsnOeDM3Zd+AvKeY<$|aG=sMi}NuP;vtOWqJeC%_*GpTHp^tIld%
zo*7nB0Bhy3o0YXeGr2n*%SdFj>+jjk;@)$Z_w3GnH5<v5^KA>}v~FQ-e=qEFhX?YB
z%=B{&uJJ-%e+r%uvKk~XYZUz$NEhg*G3ktmb=#SKKWILfq2V#InQYkPSyOcSXU0DH
zQ--I!@a>gz71k`L^@PHr(&p%=XetnQtdVR_H^-l!kow4c!6M~OS&93M#f>r@9BAls
zk{Bl9eO953V-LnQD+4eR`<VWDQbKn;WAE9)@--5lgO+p@*&_l5g_zDr(%uMSj^87B
z&qo?PoPU1v`}TVvUH5Qpkd>6jPQ8OF27{30zD)@QpOa*V?LxCYl`rm?10uJhfZH}x
zN7#e-j&Q=_=GPk|Qm_)Om$36*)^9(u#Da2-S_7>{>(uh(H_sPagAQBoQT_lpoq#KG
ze6lL9R-5=(Q)xW%^Taa%XJ*a^OC6=djS!lU!b>oX+{Y9<CiW8;dwsO3nE4C+K)=az
z{Pp>v*~0nJn$IVtbom!^4Gx1DLOy5fLxnFG4bKl(G)O~>Rda&vr>iZQf8xp+eiVP}
z-T96nUH_!mX{Dz*0P$WCuZj3Rm(7&Q+}?CeuerkgO^^9T4`#ddp^w7Vv8hH1=tcVa
zDA%Jq8}-SCzCS~J*Zl>XyiO;gH+7mkT{90*mIyylsu|CW6~53AiI7uxAmDji;Azm{
zQdkxY$V31Wo<E8>#>aO<(iU{p_^D_+5ia|u8oZ{p-#0H~Whn4I*n#a4c0pUxur-|+
z_=53*!jjK<HQ}jlZGlaV^<<Lca_6H{6s4{fuA>%298^8JL6O_W68*2Ri$6QX#R|jY
zo0B|}>QR&;EcGPuLE03KTIZR(j^gNqEG0{otVURKUtcF{8hA*3F)Y$3W;od#e^I-H
z(`V%s_qo({Yl7WsjL8gRH~EP+%@?PYxO~MlowQ%zxcg(E@k$RxzVB<#WHl6CQ4TR0
zFE?C>=!#@JDl`xMc*1JkmLB_5mpc*mQ5>1x$)U6b*|_8b@-BKk$DiG~V#&H!{i)3M
ziz2*c&THwf<&&OhU&Sqcf27|~9X9IYueIQFI`>NW7~ZGzH$JnGINLmh>3ETb)i=1b
z*3KgRlNXa|3AQOr6n<BZuI*J);Sbrp{@4T*%gj&|>30Gw<<0b`MJAuJ9xtK~CY8Q8
z*;?a4*C>W*4B~RPJy=f8rvz;133$2(XGxU@?;Z$TZSJ#4j5$74&3-drXHdBmoPtgC
zOw_>VM1y1AJ&#@UG*r^#tfR6hnCcVv{YPq&4Q@L{VJ{^J5&RZg;N{-gGL1F+c%8f#
zcwP2E*heSB=g-eEw}5kil4P<is%hB)-XWO8+1%un8-<AN)gWSwe3ZCXQzYcJonkZB
zpkb?`Ggu)p#A7?13;Txa{Dwg>wSd<q9|Z$ESYo9~R}t3aaE=T{b8Cag(JT542Wunx
zlD1Gh+63KuEY#KEi6R5T%XH5R9CoI;xZsU6u&9HrQCJ9&s?*hGHpdEc81C2Sl5kpN
z^}Mx;KY#)(^<wA)epmx6IlMEI%Nn-g*=jXM!l3k_05%(R4+r)=l(U{c#_-;bT4fl|
z)j0110<BDzpyEnx=FZjNi&T+z68IZ$?;XRhdblBS$Uf2(p&|&dseod$VqH{wY}@H-
zJhGgz=GURTQ36)Ua`HB9Y)T(0S`84JU-p8KyoiP1IAx|7UdUv3-7**+T^av)vfNPf
zaYyx7X42>NNf2u^C=mvWKIIwc|LJ?r(L-6*0qeSF5X&kPMHUA_U`uYypu=+3t;f+S
zRw^UkOhsi_|J>P``!~hqti(IOe~92d+UZMr%m~8cW{}i}6N2tw@=9@>Nh8tGPjcT&
zX$zf@(eKML|5SKxDO~067|*Cov1O8dnQPN_{s)AL;!&0}YGVj~QQ&1Rhnm<V3#;(E
zo<>&f_FN;L;sW;Q{~ER4^X+c>%d1f}vgP(da+?U9Q_P#bRsjGVbwDqEwJ|-od`Set
zXrr7z3!#0KKq&xZ2WlV*G43TY!~$s&4@6_yvQjbFC3-+L?tT}`lLM<W4|L_}YW=7c
zXo(PN$w9>uAN0rrv}qIHZgnca)VGjYBvVh71k<Sq<l_J1&9~qMHk))|YkzSvlfBxS
zEKl~i{PR{JTK#+Zw;Sf(WY**yndsmW{OhaLG<)%U#^j+geF5zXBQd9+DM}Cxc!$a>
zK1A)1F7P@DoG5yBI6NRq;=%DpRtz`&ZCf|TkRu%#mm%aOFD@>gT_kdS{9=3%s7iYI
z=a%h2JTqB7${cY^i3T(81ED*K*X_;q%FsuN3%1S44}8u&36Ea<1}ZTTN91a#{JP3~
zum_;o6LJB!1QIT*v%G^l#+5AwY0e^z$Awyz*~ja{5_Yrocv#$GGX)yON!9iX22BsH
z0C2yeD4DG?>&;*4mz{@90MYwUpye>@q2n+gNC3gQH&-tH3YWT{WD)znL=f=K%3NEl
zNIk^QSHKA>Z1+0b|5fxO>8Wml0P1y5JY#g&<@s7>9-u)^AnF!2NJkJ+1K~HS_ycf-
z-@`JLiLBqQ)T|~-3U~V@d$DE}aD<Ly+Pk`RjXj><%`P;);gdM}=RLo><IRAa_6;Pn
zc!>1+`x~^8dPkG@Y$m~a4K8x2JoYS?r+dk>U!0%cT%DUOcSaTwwfp`0{x&djoK_~P
zpnhkjuJ>14$hax47Ei{}YX4&bMx_L0;d4pA5U3rHe_>_6Yzt<-Yz?}X2iDPPwU3zV
z9Fsy&t0qJa(MPPsb#K0@C_^j=r5l3U#*<9T(fq;&nP`fq!20;iZ~zn&pkjD{ift*%
zh8mCND~=aket(Pc4l|Gm@S^8v{BIs+-`rg8Jr6)Y{yq14LF1ehgiRzeoZG84k(JHy
z;+}LwRhg+qk18u#=hePVzA2G{I<wxSks51F`dM6k@_jdlN&VN|jUGn{KP0x3S@erw
zS1E8M@Z$3&+8keQZ!Y^SrY<^3?U^beo;FsjIjFFV1yScWG>b%HbtL}drzcyJihiy@
z$o8A=$p5UhO~WMTSNB=mZ3$-3qeTUH4=W?BhdJ=0lo6K{P-mb5d63BOx><0Ud*iWF
zGpWw5^wa435Ih0mJnCoD?(CdghhN_jZoL*`JH2+lboJ%fFCu(5t*{zrF6-mEZvbLX
z9DU5ApJZ%tt!qc`g}RejGY>xj1){S#S#ICCEKPY{3@c4-@921M>7Z>iiVx@!dfa18
zmH=zy$FDvpJ<=@u(4v9JgF5?k-<pwd(Nl~`t0Kz~robKG>tosyMrqlNe0+4gF?u+v
zEFuTd+}?pZd9H#)_Go>b5B8N8XTID}<lDy*oth%g&M@Aw12I%<Kz7XrKJfKm1wzma
zh@xh8l=VA&`m0UFendSwtsRIq9?u}oqf|I`<;Lm}Ju~t*I{NdL&>$v_#~z)5<xV`w
zM)}j~vrHFIO9abS8h7+XO1Dcy%+%UGCg*oiDc&>bit3&y)g3=~*dlgAy#UN6*Yjjk
zzE8DQE}nrI`{tk;36*X74UXSrnSRgs(X8`eH~H&XYGuI#$<G?g{RjjP+9~5FmO8@Y
zpSJzw8lj2}#!v@kUP|KVPLyaTZb^x3JyyyR9dc|yGM}vUK%?Y8+{)5th8;|#MQdGu
zqO(YjYTjg@TD)2cXB{gf9=in=6mwl4pu2tDh}^9^1W(p4z>xB|Wehzx@+1vS(P2@L
z4K&YyYkro0>!K9WiqKI?c~)@{Pz-moBzo&ar1(Z3>6+i;Fn3epS*F|6gHPFufH5b`
zbTo*ihAs8U1Hdpsn8Ikg^;yT6Ek84AeRVB4BG`2{)W$|KwD??kFa{v(u}y|8AW`n2
z{<L~56eKvQpqePcOW?$XL`ETlJtIq13!F(4Yr!c}NLZn!!66ITxIB@Cid9Pa2U6%R
zxBeBprT|jC%rOyziiJJ}Vr+^8=T9(n5Wh2sis6uwW8ArXHh940n{cn-0S(aMa>Jv0
zPOWRjK*fy1LEE*RK}~n!sseyun{-#;T`^tIb|n|Z_FpGR5p>JV|Bw#SU{f@rV$r1s
zMv#n=rLqCtRt#5CK?kk<A^gm33-S#w`<(|A<A04*FJ70)rVGYL6;J@2M;T-eQm8NZ
zOVHPjdEdjkHkd(Qs;zy}(1#XZ0J)dMRmgV_g$@R*{;UcQ`cRPxFx|J)=C61Uykd$6
zeKv2P$Jk~R75i^?BZGQTrvLRf<?We_ER~_(b<Os|HxW}$Isz8`209>T?^hEu&o+9z
zSdl9l{MZv5woqrEd3C+#mkf~XZO?aiFu-U6hc{V%XTL&5>g)~A&z7TuuqV^(n;)fd
z+oGpF-1zb0lTx=oJYp`W;q?1QY}R<Wc9rxBF}tbk(6Ivzgo_@RJ9R4{%>TM?P7E5v
z!37O&Ii4-tUK{cO<>;$$x^;DaL~ue)O)Ylwr|uhln6h>IbJiw0C{EExh2_>TCqZ)U
z5quZw1%a|4_347&H=XnEd9m~GkB{GC5cX`0e!6Y|N8ll!!=k_7?bVU*fu#?CtF-&9
z27;yI6@q{Zh5rK*At4GjES(NKZ9hqcJb>`pY7o3Ay!XX6Cd)Io=e}y11>iLLUSE9n
zI<>3%A+Xn&qsPR*1jfj$tmb<TM2H*!AhY3YsfLsWW7qjyIf5^z^Iq3W2XG>1K#r<s
zs`!GloUcr_`+hCMOQ}rni*b^~MZB``BOt`py-+K<NSe=ANms%GBP-C#7?1Vuot+zc
zA4ow;rrL5;dbRI8tx+4qdzBEP@LU$V&|Ujd*w}5SIYq><$x;Ek?*S@0*PzLh-S^5J
z*rT5XFSo0l_7}yv6CWr4?oZR?wx2Hv6I)CIXu{1GO)ikX1pN6#zedyUxB!i`LEsxC
zQ3!ed00sq8JQ4x}n$4oy-uztOCwpvie!89Mns}hY3xtLKOqs|Jy~IIaNcX$FTsWNk
zcB3J*H&rPCcs~=E!UO=zk4cC8$f+jWF@D6+haZ-nZj8!s+szhiOJ@L7DwZqKsx)S|
zpBHQ;9jJF)PFUaKha4dXLa>w#2HLg2-T-VT7YX<AWDA^X@Q>z$PEspZbk$5g=ltJ;
znTGRTdqRm#O6mNoj~;}sj~8nu3dm&Ywe}F&B9&bs&R7j+zYY8T#(#hJ>z+ISfblRb
zDXp7UQV9S#eeX~nuT2{I>3^|R`oK&5de$*SAyZf%h{o&-w1B<YFI74ox<zdEGLa<o
zKo_gWBTn1QH-7QHIbYkvf_oo>-P+Z2`zwSJMnIy}-J<xW`z<)3fXiL^JixBRF+Kq&
zp?I7hR!z+Diqor1|B=A!-DBO3wI8t(RAZ>P^^acUGo2zSb&2BkCO&2a#?OmlixL+@
z_g~0W11dZ}tIU(<o4ksb-)I!6#{x%%NenxQve~tfeEk9Mq24!NeY0yoD)N9%KOB<4
zL4!>@q^lRGi0u#}6=M*<DNQXZ(y_1%^ab8fk%{=~#oUW1`6wMp0vYce^o4ae*2MFW
zq74C=j5&bO>c7}q@tVOj%7L}*cb{E%p5A|~+fn9yei#SDTq0pwF>dW%^Q983+@N%p
z#H=Sl6#-3zr~NZP65o?xPxp(BPl*@>5+T?{m~VKsz)A+s0<j(FtA)rA2+m!q>hzBD
z?kpeuS?fH$3ZZxfXZx1oa*Ip9M6!$lgsZ2x4!K!~BCwwha)6tR*>h6;Ms;|pUJUDJ
zRTL3jhlnCKry~ur>q>93@@~Txi^o=J-PnWXwFIP+hOaIg*{~~zoHyvv!WRXpOchqO
z&8k{Q%O${y=}ojJcWe4HZQZkH+aKh0OhEb>oTRrp-CHgSuRsvOJ#G>WK-i3gx2ND=
z+(EuXOO1_MgDggJB(h}*oM2Ml)oiJ7=Gc)9T!9am0rg85!ryK#ij9Ks(!wV=wri}$
z<4Sew<X3tU6H{`$gHW*4$@HETq5;;aS$vcWJJD)wGZb;(H*#G<@d+68IsDyS^hn`J
zdGke)e8?H?P1T@qJQy^Sg{FfJiWfqPzwg<vdjZea-kWEr5@4V&_9{;a2JhXhW%|KB
znF51=c`BkK4FM91m#DnPZ=*Cmjjv>fz_Z*ZGqahlE{sxxM167mll>ZSLZmx>rDVB%
zp%M>g<yLg{zkIbj`^BoGY#E_^{kf4p2Gf48q=Wt9c0IPkMwZ=&hSpaM2(X{H2KA!*
z9n`2ET~Xv3BzkP2q#!+`UZTY|TtvYggr-!HWq_n0nbL<_;ZZU=%mCY#ZOg^$L(vGm
z1xU!7D*E9d^G12ig(yF({v>G9*L$(6Bj1qeRGdgLuL1SqZTY4|-$)f@0C~s^qBocg
zf|UCc97>l)qdW<bvLV*8mqTq<Z{7lMQ&WV~3C-znI9j@86h8B_xXx`Dp+m3N8H%q+
zgCs4TkwAb2hNtmuzz)M_2wK6903Z-MSv~xBY=Rto7=`CggTVX$rf;Th7}xi^lJ8vJ
zmT)AcOkr}3sxRWv%y!(;5EuFbXw6Jl5*IkXF{0{#PvnH9MFQ;~<L?9b#GgvD{yQS0
z0SHRL(kqj@siFiHfsc(g2gFt+69M@ts{cs@eVCH*545Ayolt;UR;33F=fBqt;1f~g
z0;b?NP(La${ATcHXNHhns1)tn^`A8LLNzI1(~-h7zTMt@&5C}JuMi82k>}ptje1|*
zo|ZJI=`vO9RlEfDk`oYWW3Y}ZFeo-9NU0mOB5Z(&{6wdkiD>``w(bVkt-$;|ZhY~}
zaZST+5Ec5fLj?d?IP(_fV4>&v0d&#cbD#}!^}o7p`p(un9!{A=%SDoKnF6c!Q6Yn(
z2g2nI(4pO=_KnnxN*`ojG(7>6fa`Uq#dZIo#fOu&fb;o8S>(F<gOC?@{|R`I8Fr%<
zIFEx4LNh?(KRd4})%4r~jZN=&a|M~!=gZL|BeP0Y%tV6j6<OCHdgSL59RWtl>+iqg
zw@9OgsZ(P`e-DQu0U#{X>2nCoHEN!o0On=b8BNIwLPzqXftTXa(o&xr<kDyQ{CTf)
z0)V3}BDzzt*5)VD4hLAe`e=U>*ne{QX#+T|{fkZhZ2ugowtVpgj5e{LOuMQxRSF1i
z28R_On`BnRE<o;<5twSK=PD0<ozI$GTQ;u?KV_($lX6+n8Ty{*DapI|>@}UL&+6JY
ztuU_g)4r*3*%-M{ZN9m%CT25!GghMg0&TY?05P$YAMxUJJtw+|JNDiwDwIfoFqOh{
zom!(zv)n-L;-Zo;pm_@p8zedsn|&^e4l9U--N+ZML()(-PUl`{8neIZBRW5sG<1Ck
zNk`*10F%fYfqDA~SZJ`vhV`uCZ&h=oyMZ;5Xu+ymtAJ)6f=zA;-2PXwV5m|kSR{1F
z7!TDS-+;+No5jP`KpJB+>BKBl`535;A`a9Tk9MPb<*eI`tyMNJ;D7J!np)dOv&0a)
z0VCn!|1Go`;EqixtcSJ@h*K^|dgL$MfCPkm0oWD=7g)nhPAg%2+O0Jl))P;}gcYPy
zyaSPQmv_YOIrz`v9s+wtWpkpm*n7KPrp5G~;>OqA253!l>U|Hp8Q(Ez=u?)1ZM-4d
zqSc@Oh>ni#%x<n>g`@q)>*Y?Y1;AK*I)k(K0C#K#L^-d}PJarQn^KtHWpk`sv)S8Y
z9Azm2OL_sYKJ~*`S{d)R=noD{b!z0zH8o9WhcrR<n*)2r>vY#vcq`5Cddsj#aC5j7
zSLi{V&!rpr3X~NH<4`J1ahxEnHmlbuQ7vq^-T0KLehplibmlsj4Yd=S&`RyWE=s?W
zr4pYea9N-nC{+g5xl>BtGqFSt2HH$Ewp3UDpo2~mVG}_h3AVSUYl?{p-4WATiA?$-
zX_X4ciK~OE*nUfRmuz@<YaNRnrSoyi!ydRb#;D1QE*Rp#d~l7^QCxyAHnFz&`8jV9
zr&fnY<1wtnqCali2k7#C!PoO1pLEUvZgoaf&CmMXURx22ktB~@0|GymhA>aEsK)<#
z_d}1}mFU@nuYfoAt=Tu9O9KaGt*-T5(_6+&Z#BRyEmoiJGQ8fMef99{0_2QJv^HcL
zpDtEobLXw~r<ottW+07tcmRqiD*{nx69$e)5T!UD{q?Y-K{W>64g+b6fi9yalbk>-
zH_(*^t%QIDv!2-jTkwm&a9c7KH4p5MTCObKu<%)K&-WxF7V_g>Ev%H?)Z9(fq<n4a
zes=;q1@9CpDD460g-Y3bqZJ|<kTh(D%n4CgG3@Dz$u5u)EjT5JZ|=VY)&ak~eq~__
z@IU?%2@*m?<q{v`)b8UL3S1rWrW0(V(hX#p)Px(=J0<veUmS02HVQ>4E(w3x-*3a|
zUF}cnxJdH%CEaDHal-j97FW!w#m}JV;04ZB9+VZRG?A%6BYncU3_x`x85}MlqWr(z
zi!tderLN9LO4*|B!a#?yc@JB0-2%U}2ur5qSv)%MvsJnwwgf2Ttcwqw27{JPhM-4Z
ze}6C*Y0sVPdB)q%?zXK(Uq4mR!RO*L-LW5E{AbawwN5@B!y&Te<fxBhu;2yzg5Pb^
z^s^2t67vOGyq?6zpU#ZM+mjP2jJqsp0sRY@qK&C;=#cfJ{@w~p)2@1j#mvHs7DOA$
zyAhZu7{$1BmR0$F(_FQJ|JQDdybDl~n{P0hxr&Z9ip!A7-sLicf?a@dH49~9WZ)zF
z<t^tLYWRbqnqPiz<#Q?d?I@1ib?^2t`CCDBWo&lpux&PZNkS>L{d}XbO+*m^Qvo5t
zJ*A4p`#nK8!t0s_lLUQ=xuY&~u(S%omo^l|Joi4hz$;gW<7z1-L)?(c2etiWGS^eZ
zoca@!?Rj+JeT=p)j7s@(f8Uo?c*QGYC?#>fLYkMO1ZWua7?m^B5$xvPU~Us~+fk>$
zMBI!rj0QV*zbu+e5+**&FnV{5f$mX(XGDfZ$KZcEIJNfu*8EBSe(Npe7NcX~zKPz`
z^<O40<sgP53sIg1;GbA_^^n}T2G;=ccPUMDfJ?H72ONZGOwN8lcpO9k;9qv7JOr@g
z4qYUpMO5Sf!F5&{<OFWm^524pL;)_No&FFVRRArY0vqP5UxXz!U=cEaHwm#1amE7@
z{Qq(Di>P7?l_nu2dSBRo$NY=Rke~tZi31@+CZ{m8?jZB_N(LCocn6-^VD3a+&_Ggv
z@QD`H-)RBlJPw<wXWDgk`a{(gQg$=7ik`>oc%`c}BLiQY*K&b>p;lw10bB(`$xTyw
z2qt6z+bKIZ-dixNz<(8r831&)ETHXq%9+Bkg)ub%_j4ZuZR`mg)Li3^FsldN!18u^
zyPDJ){@^jgUgJ>|Na9XBWf;cB-{*u1<}1861#kpe74JDM;})`j$&ZhZZwlhbNP#Nt
zBaNa2m#qm!Kp1j9>ovNo7O5A~0IA9u4jcsO=^ATu;Y=Yf*os`Sp)W||7R`f{gnowS
z=A-kgqrrY|hf!cc2MC}&HvJ8bZDiIC@Ei(#bM~0(UbdlB>8aJWc8boZ>=&0es~v>k
zP;zhm0>&DoU8IKsnt|EC?r~^JEaKakNp%mq_eU(P+5g(#*JKF>2-yp+2WYUN{s#6s
zGHEf$JE%I&)Y%h;QX+B9`YX-?;)xDx4JTxU`RtA4g)giwgB$}5kYsVd#wb!;0Q8`6
z4dfzw?ooPE^(H-iA&xnGdhT8HSnemROph<|o>}Qj07M9Bpb5LkRVW`lgGwYGn{R}g
zy$5JSGq8a#Ff~K>K(J{B8KTR9Op!eS*G=`*&55_*#??lfObC$B=RL`+<<p{ifNOe#
zbij-5VA%`w2h6`Yls>F)7a0QQ^bZypuSy3oL0~yxvYWnuMGBi_s|*6p`@#`O=#!6;
zV@M`yDm$C(>zQ`ST}@Yqy~4*5_kM58eXa9Vp9I}sM)2T%<Gqf-pUGEBFS>ZCU|ci>
zgx~lP;4Q9P@5*Em5uvd91OLBr3&6B5WqA9GTi)W>yJi_<Fasd_@RZpQI00sWH}^CJ
zjIufO3+}fdA`o^T4T`Wrt{Wh7sjm6IJOAfv0A&A#YXGl)#I#m3KAO>~vwI3MWNNjG
zzJP~8_P-?%ur+tSM12h8OQduwTmc3D;>HCP2JX}VTY`uq(=(W;^Dc2<ZrYoqD5MEI
zk9TBxk9qxU|Kmk~SK3=xN<U{k*3v;1>7jMC)2{>;eVvXCVbK!cWY}>~Uib@}IH5gw
z_L0aQ=QBuN)EN5r8<~ukT@-F9_HZlQ2T8hm{-vMUQW)=n1=up4V~aD+vJ9f=2j!O7
zKx|0+<F{eOuU~NvsMCs0VQNM+;9N0+9F7_|?*aD2q?uZk)|4EQ<jt%2^zuj#Up%%8
z-2hJLZ=hJXMk6(uon5146G9BhimgzctR!M-q{hx2654`UkZu66-fZMu0+(nuASWRc
z1PjQ+T={99Da8q?|6Vj+s~4OOPrz-j|I=3hTKb1nT8NbqSZM!w1Aro^M7xT45(Bn1
z@yu~avSx__NFjXb+}81cD}IaQFpb7v<(-8oEf+4tdXfEVY}`C!lULLesQYWn*0<9u
zfxHUL>l}xoS9tq>aO-ty8{Y1(4&^J7wzA3Zc!h*6*XOvs&u!-hIdU}8ZLUSqS}0R8
zPlX$zKT(|$wlslr)p$lE@Wtu+!nH<C;rX@Yqj2AJK@YVP>irT=oy~Ex!4G^nSHE;@
zT)h_`oC8yu8rW?(3h3vUJlGeRJofWh9&uGzq{UOSk<rnoGo08u#I#`9ZK(ZuY`5#g
z{2bg7DW5ErWXf`Hhd%JEM?p*#R>Zd>mrH!Ck|nCv{Yppv=sj{onxMy_7A3(PqZ#Qy
z-C(AOVY*vo2AsS)8ZAI>J*k#qVHeFv$u|+Lj?b4%zB=8u2(?3wE;&M(!ACE1qTA~G
zUA&G~_egUlgn~qz_oDzDmjbkBA=SR}C4xLNd;F~4j{oh+eqCg8LuK<jJEa^yv=(KW
zdEJ0qa{BIO<%XDlU<Sq5Plh||K$OZj(9Wl(rRipB$Q&jIIS5fyS+37iD0eo!+mZBN
z<N8Ge-eoOhTQWsCtJ!Eat<!ys5Hg0(Er=GQBa}e}I$QyyYHXBISpiSt;f2~zrDfI)
zsznMvy<fn?*Ys;eJve(VU9ThJM%3|_tD}RI<vJ04Q!H7(G$>D_cyFsID*QKBc3@Q0
z$F`J2s_FVok?W+Gn5+y(DU!hEqLAB5My(HA>8DU%F$PG1XrH4-r$d@8ciJ?%w!Gc`
z2rUIh4Ok(TWMflz$&lu~)ivDVjB|y&6@PN1>J062T*vESor2Mw^`M%8P_%}cHeAbM
z>iS8_Ty3dYPx~FBJ+L!msV300T$QaqJalg2pY(8P@U3mD<;39UCuHhrXnQ96RR=f3
zyg2J#QdOJi#N9->;SYI+ST8cFjFnywt&})gHYrzS=?dVM1i|p?!uWbrhf0s3dy|Wj
z2(USf`^QFuZqr0~Vltmfmu$Fj(<e9hqnoEKiT=8fX@Nh~02*uZow!B=cNZ<2q$P(+
z(?w;dryANO%!^}m_exj(y6UJzn{|SHJ#qT6%x(IiIqH_*Ag**)VoT9+RdY7lmJd>@
z>4UpP;XtYm&5^h;Fmz=^%yjjpE5m!>;=+_-bT1qukq2M85*uQpp$`L85XhehYw6Kl
z5<7}bren}A$tp7|-f?6QB_*jIRVpz*jpLqXSZ|2GZ?6~#U2`wT3r&i#F2h^6KmK6L
zx*BU_=kP8QXh4e_yHLB%Wl^1cm!gXWF4aSsw>~t$z6*E;IBA=IC(Yg9!oex1<YnF_
zfOg><uq7!_I3M0+^0dG;m*@`FmzfYZrosdc*t4ukRH#@x4alfHi9){ww_8Bg5v1fo
i;3K8(iakWT@@rj96`PI{-Gu%(kerl~WSO{8;Qs(hUoY(d

literal 0
HcmV?d00001


From a0ca681ce71f78009ed7df571154e077d2df1284 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 5 Jun 2025 20:19:10 +0530
Subject: [PATCH 35/85] chore: demo files updated

---
 .../demo/pf-search-input-autocomplete.html    | 45 ----------------
 .../pf-search-input/demo/pf-search-input.html | 51 +++++++++++++++----
 2 files changed, 41 insertions(+), 55 deletions(-)
 delete mode 100644 elements/pf-search-input/demo/pf-search-input-autocomplete.html

diff --git a/elements/pf-search-input/demo/pf-search-input-autocomplete.html b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
deleted file mode 100644
index 034e1e9221..0000000000
--- a/elements/pf-search-input/demo/pf-search-input-autocomplete.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="container">
-  <h1>Search with autocomplete</h1>
-  <pf-search-input id="search-input" placeholder="Search">
-    <pf-option value="Alabama"> Alabama </pf-option>
-    <pf-option value="New Jersey"> New Jersey </pf-option>
-    <pf-option value="New York"> New York </pf-option>
-    <pf-option value="New Mexico"> New Mexico </pf-option>
-    <pf-option value="North Carolina"> North Carolina </pf-option>
-    <pf-option value="Alabama1"> Alabama 1 </pf-option>
-    <pf-option value="New Jersey1"> New Jersey 1 </pf-option>
-    <pf-option value="New York1"> New York 1 </pf-option>
-    <pf-option value="New Mexico1"> New Mexico  1</pf-option>
-    <pf-option value="North Carolina1"> North Carolina 1</pf-option>
-    <pf-option value="Alabama2"> Alabama 2 </pf-option>
-    <pf-option value="New Jersey2"> New Jersey 2 </pf-option>
-    <pf-option value="New York2"> New York 2 </pf-option>
-    <pf-option value="New Mexico2"> New Mexico 2 </pf-option>
-    <pf-option value="North Carolina2"> North Carolina 2 </pf-option>
-    <pf-option value="Alabama3"> Alabama 3 </pf-option>
-    <pf-option value="New Jersey3"> New Jersey 3 </pf-option>
-    <pf-option value="New York3"> New York 3 </pf-option>
-    <pf-option value="New Mexico3"> New Mexico 3 </pf-option>
-    <pf-option value="North Carolina3"> North Carolina 3 </pf-option>
-  </pf-search-input>
-</div>
-
-<script type="module">
-  import '@patternfly/elements/pf-search-input/pf-search-input.js';
-
-  const searchInput = document.getElementById('search-input');
-
-  searchInput.addEventListener('change', (event) => {
-    /* eslint-disable no-console */
-    console.log('Selected:', event.target.value);
-    /* eslint-disable no-console */
-  });
-</script
-</script>
-
-<style>
-.container{
-  padding: 40px;
-}
-</style>
-
diff --git a/elements/pf-search-input/demo/pf-search-input.html b/elements/pf-search-input/demo/pf-search-input.html
index 420fa0b74a..034e1e9221 100644
--- a/elements/pf-search-input/demo/pf-search-input.html
+++ b/elements/pf-search-input/demo/pf-search-input.html
@@ -1,14 +1,45 @@
-<pf-search-input placeholder="Select a title"
-             accessible-label="Title">
-    <pf-option>Mr</pf-option>
-    <pf-option>Miss</pf-option>
-    <pf-option>Mrs</pf-option>
-    <pf-option>Ms</pf-option>
-    <hr>
-    <pf-option>Dr</pf-option>
-    <pf-option>Other</pf-option>
-</pf-search-input>
+<div class="container">
+  <h1>Search with autocomplete</h1>
+  <pf-search-input id="search-input" placeholder="Search">
+    <pf-option value="Alabama"> Alabama </pf-option>
+    <pf-option value="New Jersey"> New Jersey </pf-option>
+    <pf-option value="New York"> New York </pf-option>
+    <pf-option value="New Mexico"> New Mexico </pf-option>
+    <pf-option value="North Carolina"> North Carolina </pf-option>
+    <pf-option value="Alabama1"> Alabama 1 </pf-option>
+    <pf-option value="New Jersey1"> New Jersey 1 </pf-option>
+    <pf-option value="New York1"> New York 1 </pf-option>
+    <pf-option value="New Mexico1"> New Mexico  1</pf-option>
+    <pf-option value="North Carolina1"> North Carolina 1</pf-option>
+    <pf-option value="Alabama2"> Alabama 2 </pf-option>
+    <pf-option value="New Jersey2"> New Jersey 2 </pf-option>
+    <pf-option value="New York2"> New York 2 </pf-option>
+    <pf-option value="New Mexico2"> New Mexico 2 </pf-option>
+    <pf-option value="North Carolina2"> North Carolina 2 </pf-option>
+    <pf-option value="Alabama3"> Alabama 3 </pf-option>
+    <pf-option value="New Jersey3"> New Jersey 3 </pf-option>
+    <pf-option value="New York3"> New York 3 </pf-option>
+    <pf-option value="New Mexico3"> New Mexico 3 </pf-option>
+    <pf-option value="North Carolina3"> North Carolina 3 </pf-option>
+  </pf-search-input>
+</div>
 
 <script type="module">
   import '@patternfly/elements/pf-search-input/pf-search-input.js';
+
+  const searchInput = document.getElementById('search-input');
+
+  searchInput.addEventListener('change', (event) => {
+    /* eslint-disable no-console */
+    console.log('Selected:', event.target.value);
+    /* eslint-disable no-console */
+  });
+</script
 </script>
+
+<style>
+.container{
+  padding: 40px;
+}
+</style>
+

From 8f5d6f39c17e4e81124c8cc7ded1f9fc2036c24f Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 19 Jun 2025 18:11:28 +0530
Subject: [PATCH 36/85] chore: updated readme

---
 elements/pf-search-input/README.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/elements/pf-search-input/README.md b/elements/pf-search-input/README.md
index f7e06c1c24..3b4180e2ce 100644
--- a/elements/pf-search-input/README.md
+++ b/elements/pf-search-input/README.md
@@ -1,11 +1,15 @@
 # Search Input
-Add a description of the component here.
+A search input lets users type in words to find specific items or information. As they type, it can show matching results to help them quickly find what they are looking for.
 
 ## Usage
-Describe how best to use this web component along with best practices.
+A search input consists of a text field where users can type to find specific content or items. Unlike selects or dropdowns, which offer predefined options, a search input lets users enter their own keywords to filter or locate results. It includes a clear (×) button to easily remove the current input, allowing users to start a new search quickly.
 
 ```html
 <pf-search-input>
-
+  <pf-option value="Alabama"> Alabama </pf-option>
+  <pf-option value="New Jersey"> New Jersey </pf-option>
+  <pf-option value="New York"> New York </pf-option>
+  <pf-option value="New Mexico"> New Mexico </pf-option>
+  <pf-option value="North Carolina"> North Carolina </pf-option>
 </pf-search-input>
 ```

From 011a221e8ec138181d392be7cfa564c76e7b4427 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 30 Jun 2025 14:19:36 +0530
Subject: [PATCH 37/85] chore: removed duplicate style

---
 elements/pf-search-input/pf-search-input.css | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 2a1cf43a42..385e9fb1fc 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -364,13 +364,6 @@ div.search-icon {
 	}
 }
 
-div.visually-hidden {
-  width: 0;
-  height: 0;
-  padding: 0;
-  visibility: hidden;
-}
-
 ::slotted(pf-option[selected]) {
 	--_pf-option-svg-display: none;
 	--_pf-option-selected-background-color: var(--pf-global--BackgroundColor--100, #fff);

From c8ad1ace61a81ad9b004942e92fbce9fdde29784 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 7 Jul 2025 00:24:12 +0530
Subject: [PATCH 38/85] chore: test cases added - draft

---
 elements/pf-search-input/pf-search-input.ts   |    4 +-
 .../test/pf-search-input.spec.ts              | 1114 ++++++++++++++++-
 2 files changed, 1114 insertions(+), 4 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index b52ec36ab1..fb8b2b874a 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -188,7 +188,6 @@ export class PfSearchInput extends LitElement {
           </div>
           <pf-text-input 
             icon="search" 
-            accessible-label="search" 
             id="toggle-input"
             ?disabled="${disabled}"
             @keydown=${this.#onSearchInput}
@@ -203,9 +202,10 @@ export class PfSearchInput extends LitElement {
           >
             <pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
           </pf-button>
-          <div class="visually-hidden" id="toggle-button"></div>
+          <button aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
         </div>
         <div 
+        
           id="listbox-container"
           ?hidden="${!expanded}"
           style="${styleMap({
diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index 02aa8097cc..0e2723b8c2 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -1,6 +1,61 @@
-import { expect, html } from '@open-wc/testing';
+import { aTimeout, expect, html, nextFrame } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { PfSearchInput } from '@patternfly/elements/pf-search-input/pf-search-input.js';
+import { PfSearchInput } from '../pf-search-input.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { sendKeys } from '@web/test-runner-commands';
+import { clickElementAtCenter, clickElementAtOffset } from '@patternfly/pfe-tools/test/utils.js';
+import type { PfOption } from '../../pf-select/pf-option.js';
+
+// async function holdShift() {
+//   await sendKeys({ down: 'Shift' });
+// }
+
+// async function releaseShift() {
+//   await sendKeys({ up: 'Shift' });
+// }
+
+function press(key: string) {
+  return async function() {
+    await sendKeys({ press: key });
+  };
+}
+
+/**
+ * Get the value of the first selected option
+ * @param element pf-select
+ * @returns the value of the selected option, or undefined if none selected
+ */
+function getSelectedOptionValue(element: PfSearchInput): string[] {
+  return Array.from(element.querySelectorAll<PfOption>('[selected]'), x => x.value);
+}
+
+
+// a11yShapshot does not surface the options
+function getVisibleOptionValues(element: PfSearchInput): string[] {
+  return element.options.filter(x => !x.hidden).map(x => x.value);
+}
+
+// a11yShapshot does not surface the options
+function getActiveOption(element: PfSearchInput) {
+  return element.options.find(x => x.active);
+}
+
+/**
+ * NOTE because of the copy-to-shadow-root shtick in ActivedescendantController,
+ * we can't just pick an option (from light dom);
+ * @param element pf-select
+ * @param index item index
+ */
+async function clickItemAtIndex(element: PfSearchInput, index: number) {
+  const itemHeight = 44;
+  await clickElementAtOffset(element, [
+    10,
+    element.offsetHeight + (itemHeight * (index + 1)) - itemHeight / 2,
+  ], {
+    allowOutOfBounds: true,
+  });
+}
+
 
 describe('<pf-search-input>', function() {
   describe('simply instantiating', function() {
@@ -17,5 +72,1060 @@ describe('<pf-search-input>', function() {
           .and
           .to.be.an.instanceOf(PfSearchInput);
     });
+
+    describe('with accessible-label attribute and 3 items', function() {
+      let element: PfSearchInput;
+      const updateComplete = () => element.updateComplete;
+      const focus = () => element.focus;
+
+      beforeEach(async function() {
+        element = await createFixture<PfSearchInput>(html`
+          <pf-search-input accessible-label="label">
+            <pf-option value="1">1</pf-option>
+            <pf-option value="2">2</pf-option>
+            <pf-option value="3">3</pf-option>
+          </pf-search-input>`);
+      });
+
+      it('passes aXe audit', async function() {
+        await expect(element).to.be.accessible();
+      });
+
+      it('labels the combobox with the accessible-label attribuet', async function() {
+        expect(await a11ySnapshot()).to.axContainQuery({
+          role: 'combobox',
+          name: 'label',
+        });
+      });
+
+      it('does not have redundant role', async function() {
+        expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+      });
+
+      it('sets aria-setsize="3" and aria-posinset on items', function() {
+        element.options.forEach((option, i) => {
+          expect(option).to.have.attr('aria-setsize', '3');
+          expect(option).to.have.attr('aria-posinset', `${i + 1}`);
+        });
+      });
+
+      describe('focus()', function() {
+        beforeEach(focus);
+        beforeEach(updateComplete);
+        describe('ArrowDown', async function() {
+          beforeEach(press('ArrowDown'));
+          beforeEach(updateComplete);
+          await aTimeout(30);
+
+          it('labels the listbox with the accessible-label attribute', async function() {
+            const snap = await a11ySnapshot();
+            expect(snap).to.axContainQuery({
+              role: 'listbox',
+              name: 'label',
+            });
+          });
+
+          it('focuses on the first item', async function() {
+            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+          });
+
+          describe('Space', function() {
+            beforeEach(press(' '));
+            beforeEach(updateComplete);
+            // it('selects option 1', function() {
+            //   expect(getSelectedOptionValue(element)).to.deep.equal(['1']);
+            // });
+
+            // it('exposes selection to assistive technology', async function() {
+            //   expect(await a11ySnapshot()).to.axContainQuery({
+            //     role: 'combobox',
+            //     value: '1',
+            //   });
+            // });
+          });
+        });
+      });
+    });
+
+    describe('with 3 items and associated <label> elements', function() {
+      let element: PfSearchInput;
+      const updateComplete = () => element.updateComplete;
+      const focus = () => element.focus;
+
+      beforeEach(async function() {
+        element = await createFixture<PfSearchInput>(html`
+          <pf-search-input id="search">
+            <pf-option value="1">1</pf-option>
+            <pf-option value="2">2</pf-option>
+            <pf-option value="3">3</pf-option>
+          </pf-search-input>
+          <label for="search">label1</label>
+          <label for="search">label2</label>
+          `);
+      });
+
+      it('passes aXe audit', async function() {
+        await expect(element).to.be.accessible();
+      });
+
+      it('does not have redundant role', async function() {
+        expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+      });
+
+      it('labels the combobox with the label elements', async function() {
+        expect(await a11ySnapshot()).to.axContainQuery({
+          role: 'combobox',
+          name: 'label1label2',
+        });
+      });
+
+      it('sets aria-setsize="3" and aria-posinset on items', function() {
+        element.options.forEach((option, i) => {
+          expect(option).to.have.attr('aria-setsize', '3');
+          expect(option).to.have.attr('aria-posinset', `${i + 1}`);
+        });
+      });
+
+      describe('focus()', function() {
+        // beforeEach(() => aTimeout(3000));
+        beforeEach(focus);
+        beforeEach(updateComplete);
+        describe('ArrowDown', async function() {
+          beforeEach(press('ArrowDown'));
+          await aTimeout(30);
+          it('labels the listbox with the label elements', async function() {
+            expect(await a11ySnapshot()).to.axContainQuery({
+              role: 'listbox',
+              name: 'label1label2',
+            });
+          });
+
+          it('focuses on the first item', async function() {
+            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+          });
+
+          describe('Space', function() {
+            beforeEach(press(' '));
+            beforeEach(updateComplete);
+            // it('selects option 1', function() {
+            //   expect(getSelectedOptionValue(element)).to.deep.equal('1');
+            // });
+
+            // it('exposes selection to assistive technology', async function() {
+            //   expect(await a11ySnapshot()).to.axContainQuery({
+            //     role: 'combobox',
+            //     value: '1',
+            //   });
+            // });
+          });
+        });
+      });
+    });
+
+    describe('in a deep shadow root', function() {
+      let element: PfSearchInput;
+      const focus = () => element.focus();
+      const updateComplete = () => element.updateComplete;
+      beforeEach(async function() {
+        const fixture = await createFixture(html`
+        <shadow-root>
+          <template shadowrootmode="open">
+            <shadow-root>
+              <template shadowrootmode="open">
+                <pf-search-input
+                           accessible-label="Search"
+                           placeholder="Search">
+                  <pf-option value="1">1</pf-option>
+                  <pf-option value="2">2</pf-option>
+                  <pf-option value="3">3</pf-option>
+                  <pf-option value="4">4</pf-option>
+                  <pf-option value="5">5</pf-option>
+                  <pf-option value="6">6</pf-option>
+                  <pf-option value="7">7</pf-option>
+                  <pf-option value="8">8</pf-option>
+                </pf-search-input>
+              </template>
+            </shadow-root>
+          </template>
+        </shadow-root>`);
+
+        function attachShadowRoots(root?: Document | ShadowRoot) {
+          root?.querySelectorAll<HTMLTemplateElement>('template[shadowrootmode]').forEach(template => {
+            const mode = template.getAttribute('shadowrootmode') as 'open' | 'closed';
+            const shadowRoot = template.parentElement?.attachShadow?.({ mode });
+            shadowRoot?.appendChild(template.content);
+            template.remove();
+            attachShadowRoots(shadowRoot);
+          });
+        }
+        attachShadowRoots(document);
+
+        const select = fixture.shadowRoot?.firstElementChild?.shadowRoot?.querySelector('pf-search-input');
+        if (select) {
+          element = select;
+          await element?.updateComplete;
+        } else {
+          throw new Error('no element!');
+        }
+      });
+
+      describe('expanding', function() {
+        beforeEach(focus);
+        beforeEach(press('Enter'));
+        describe('ArrowDown', function() {
+          beforeEach(press('ArrowDown'));
+          beforeEach(updateComplete);
+          it('remains expanded', function() {
+            expect(element.expanded).to.be.true;
+          });
+          describe('ArrowDown', function() {
+            beforeEach(press('ArrowDown'));
+            beforeEach(updateComplete);
+            it('remains expanded', function() {
+              expect(element.expanded).to.be.true;
+            });
+            // describe('Space', function() {
+            //   beforeEach(press(' '));
+            //   beforeEach(updateComplete);
+            //   it('closes', function() {
+            //     expect(element.expanded).to.be.false;
+            //   });
+            //   it('sets value', function() {
+            //     expect(element.value).to.equal('2');
+            //   });
+            // });
+          });
+        });
+      });
+    });
+
+    describe('with 8 items', function() {
+      let element: PfSearchInput;
+      const updateComplete = () => element.updateComplete;
+      const focus = () => element.focus();
+
+      beforeEach(async function() {
+        element = await createFixture<PfSearchInput>(html`
+          <pf-search-input>
+            <pf-option value="1">1</pf-option>
+            <pf-option value="2">2</pf-option>
+            <pf-option value="3">3</pf-option>
+            <pf-option value="4">4</pf-option>
+            <pf-option value="5">5</pf-option>
+            <pf-option value="6">6</pf-option>
+            <pf-option value="7">7</pf-option>
+            <pf-option value="8">8</pf-option>
+          </pf-search-input>`);
+      });
+
+      beforeEach(updateComplete);
+      beforeEach(async () => {
+        await aTimeout(1000);
+      });
+
+      // it('does not pass aXe audit', async function() {
+      //   await expect(element).to.not.be.accessible();
+      // });
+
+      it('sets aria-setsize and aria-posinset on items', function() {
+        element.options.forEach((option, i) => {
+          expect(option).to.have.attr('aria-setsize', '8');
+          expect(option).to.have.attr('aria-posinset', `${i + 1}`);
+        });
+      });
+
+      describe('click combobox button', function() {
+        beforeEach(() => clickElementAtCenter(element));
+        beforeEach(updateComplete);
+
+        it('does not pass aXe audit', async function() {
+          await expect(element).to.not.be.accessible();
+        });
+
+        it('expands the listbox', async function() {
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
+        });
+
+        // it('focuses on the first item', async function() {
+        //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+        // });
+
+        describe('Tab', function() {
+          beforeEach(press('Tab'));
+          it('does not focus the combobox button', async function() {
+            expect(await a11ySnapshot()).to.not.have.axTreeFocusedNode;
+          });
+        });
+      });
+
+      describe('focus()', function() {
+        beforeEach(focus);
+        beforeEach(updateComplete);
+
+        // it('focuses on the combobox button', async function() {
+        //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+        // });
+
+        it('does not expand the listbox', async function() {
+          expect(element.expanded).to.be.false;
+          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+        });
+
+        describe('Enter', function() {
+          beforeEach(press('Enter'));
+          beforeEach(updateComplete);
+
+          // Enter will not expand the listbox
+          // it('expands the listbox', async function() {
+          //   expect(element.expanded).to.be.true;
+          //   expect(await a11ySnapshot()).to.axContainRole('listbox');
+          // });
+
+          // it('focuses on the first item', async function() {
+          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+          // });
+        });
+
+        describe('Space', function() {
+          beforeEach(function() {
+            document.body.style.height = '8000px';
+          });
+          afterEach(function() {
+            document.body.style.height = 'initial';
+          });
+
+          beforeEach(press(' '));
+          beforeEach(updateComplete);
+          beforeEach(() => aTimeout(300));
+
+          // it('expands the listbox', async function() {
+          //   expect(await a11ySnapshot()).to.axContainRole('listbox');
+          // });
+
+          // it('focuses on the first item', async function() {
+          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+          // });
+
+          it('does not scroll the screen', function() {
+            expect(window.scrollY).to.equal(0);
+          });
+        });
+
+        describe('Home', function() {
+          beforeEach(press('Home'));
+          beforeEach(updateComplete);
+
+          it('expands the listbox', async function() {
+            expect(await a11ySnapshot()).to.axContainRole('listbox');
+          });
+
+          // it('focuses on option 1', async function() {
+          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+          // });
+        });
+
+        describe('End', function() {
+          beforeEach(press('End'));
+          beforeEach(updateComplete);
+
+          it('expands the listbox', async function() {
+            expect(await a11ySnapshot()).to.axContainRole('listbox');
+          });
+
+          // it('focuses on option 8', async function() {
+          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('8');
+          // });
+        });
+
+        describe('ArrowDown', function() {
+          beforeEach(press('ArrowDown'));
+          beforeEach(updateComplete);
+
+          it('expands the listbox', async function() {
+            expect(element.expanded).to.be.true;
+            expect(await a11ySnapshot()).to.axContainRole('listbox');
+          });
+
+          // it('focuses on the first item', async function() {
+          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+          // });
+
+          describe('ArrowUp', function() {
+            beforeEach(press('ArrowUp'));
+            beforeEach(updateComplete);
+            // Last option will not be selected on arro-up
+            // it('focuses on the last option', async function() {
+            //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('8');
+            // });
+            describe('ArrowDown', function() {
+              beforeEach(press('ArrowDown'));
+              beforeEach(updateComplete);
+              // it('focuses on option 1', async function() {
+              //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+              // });
+            });
+          });
+
+          describe('ArrowDown', function() {
+            beforeEach(press('ArrowDown'));
+            beforeEach(updateComplete);
+
+            // it('focuses on option 2', async function() {
+            //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('2');
+            // });
+
+            describe('ArrowUp', function() {
+              beforeEach(press('ArrowUp'));
+              beforeEach(updateComplete);
+              // it('focuses on option 1', async function() {
+              //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+              // });
+            });
+
+            describe('ArrowDown', async function() {
+              beforeEach(press('ArrowDown'));
+              beforeEach(updateComplete);
+              await aTimeout(30);
+              it('focuses on option 3', async function() {
+                expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('3');
+              });
+
+              describe('Enter', function() {
+                beforeEach(press('Enter'));
+                beforeEach(updateComplete);
+
+                // it('selects option 3', function() {
+                //   expect(getSelectedOptionValue(element)).to.deep.equal([
+                //     '3',
+                //   ]);
+                // });
+
+                // it('exposes selection to assistive technology', async function() {
+                //   expect(await a11ySnapshot()).to.axContainQuery({
+                //     role: 'combobox',
+                //     value: '3',
+                //   });
+                // });
+
+                it('hides the listbox', async function() {
+                  expect(element.expanded).to.be.false;
+                  expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+                });
+
+                describe('ArrowDown', function() {
+                  beforeEach(press('ArrowDown'));
+                  beforeEach(updateComplete);
+
+                  // it('expands the listbox', async function() {
+                  //   expect(element.expanded).to.be.true;
+                  //   expect(await a11ySnapshot()).to.axContainRole('listbox');
+                  // });
+
+                  describe('Home', function() {
+                    beforeEach(press('Home'));
+                    beforeEach(updateComplete);
+
+                    // it('focuses on option 1', async function() {
+                    //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+                    // });
+
+                    describe('Home', function() {
+                      beforeEach(press('Home'));
+                      beforeEach(updateComplete);
+
+                      // it('focuses on option 1', async function() {
+                      //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+                      // });
+                    });
+                  });
+                });
+              });
+            });
+
+            describe('Enter', async function() {
+              beforeEach(press('Enter'));
+              beforeEach(updateComplete);
+              await aTimeout(30);
+
+              it('selects option 2', function() {
+                expect(getSelectedOptionValue(element)).to.deep.equal(['2']);
+              });
+
+              it('exposes selection to assistive technology', async function() {
+                expect(await a11ySnapshot()).to.axContainQuery({
+                  role: 'combobox',
+                  value: '2',
+                });
+              });
+            });
+          });
+
+          describe('Space', function() {
+            beforeEach(press(' '));
+            beforeEach(updateComplete);
+
+            // it('hides the listbox', async function() {
+            //   expect(element.expanded).to.be.false;
+            //   expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+            // });
+
+            // it('focuses the combobox toggle', async function() {
+            //   expect(await a11ySnapshot())
+            //       .axTreeFocusedNode
+            //       .to.have.axRole('combobox');
+            // });
+
+            // it('selects option 1', function() {
+            //   expect(getSelectedOptionValue(element)).to.equal([
+            //     '1',
+            //   ]);
+            // });
+
+            // it('exposes selection to assistive technology', async function() {
+            //   expect(await a11ySnapshot()).to.axContainQuery({
+            //     role: 'combobox',
+            //     value: '1',
+            //   });
+            // });
+          });
+
+          // -- This functionality needs to be implement in search input
+          // describe('Tab', function() {
+          //   beforeEach(press('Tab'));
+          //   beforeEach(nextFrame);
+          //   beforeEach(updateComplete);
+          //   it('hides the listbox', async function() {
+          //     expect(element.expanded).to.be.false;
+          //     expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          //   });
+          //   it('does not focus on the combobox button', async function() {
+          //     expect(await a11ySnapshot()).to.not.have.axTreeFocusedNode;
+          //   });
+          // });
+
+          // -- This functionality needs to be implement in search input
+          // describe('Shift+Tab', function() {
+          //   beforeEach(holdShift);
+          //   beforeEach(press('Tab'));
+          //   beforeEach(releaseShift);
+          //   beforeEach(updateComplete);
+
+          //   it('hides the listbox', async function() {
+          //     expect(element.expanded).to.be.false;
+          //     expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          //   });
+
+          //   it('focuses the button', async function() {
+          //     expect(await a11ySnapshot())
+          //         .axTreeFocusedNode
+          //         .to.have.axRole('combobox');
+          //   });
+          // });
+
+          describe('Escape', function() {
+            beforeEach(press('Escape'));
+            beforeEach(nextFrame);
+            beforeEach(updateComplete);
+
+            it('hides the listbox', async function() {
+              expect(element.expanded).to.be.false;
+              expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+            });
+
+            // it('focuses the button', async function() {
+            //   expect(await a11ySnapshot())
+            //       .axTreeFocusedNode
+            //       .to.have.axRole('combobox');
+            // });
+          });
+        });
+      });
+    });
+
+    describe('text input interaction', function() {
+      let element: PfSearchInput;
+      const label = 'label';
+      // const placeholder = 'placeholder';
+      const updateComplete = () => element.updateComplete;
+      const focus = () => element.focus();
+
+      beforeEach(async function() {
+        element = await createFixture<PfSearchInput>(html`
+          <pf-search-input >
+            <pf-option>Blue</pf-option>
+            <pf-option>Green</pf-option>
+            <pf-option>Magenta</pf-option>
+            <pf-option>Orange</pf-option>
+            <pf-option>Purple</pf-option>
+            <pf-option>Periwinkle</pf-option>
+            <pf-option>Pink</pf-option>
+            <pf-option>Red</pf-option>
+            <pf-option>Yellow</pf-option>
+          </pf-search-input>`);
+      });
+
+      beforeEach(nextFrame);
+
+      it('does not have redundant role', async function() {
+        expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+      });
+
+      // it('labels the combobox input with the first option', async function() {
+      //   expect(await a11ySnapshot()).to.axContainQuery({
+      //     role: 'combobox',
+      //     name: 'Blue',
+      //   });
+      // });
+
+      describe('with an `accessible-label` attribute', function() {
+        beforeEach(function() {
+          element.setAttribute('accessible-label', label);
+        });
+        beforeEach(nextFrame);
+
+        it('passes aXe audit', async function() {
+          await expect(element).to.be.accessible();
+        });
+
+        it('does not have redundant role', async function() {
+          expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+        });
+
+        it('labels the combobox with the label', async function() {
+          expect(await a11ySnapshot()).to.axContainQuery({
+            role: 'combobox',
+            name: label,
+          });
+        });
+
+        // will be removed
+        // it('labels the toggle button with the label', async function() {
+        //   expect(await a11ySnapshot()).to.axContainQuery({
+        //     role: 'button',
+        //     name: label,
+        //   });
+        // });
+
+        describe('show()', function() {
+          beforeEach(() => element.show());
+          it('labels the listbox with the placeholder attribute', async function() {
+            expect(await a11ySnapshot()).to.axContainQuery({
+              role: 'listbox',
+              name: 'label',
+            });
+          });
+        });
+      });
+
+      // describe('with a `placeholder` attribute', function() {
+      //   beforeEach(function() {
+      //     element.setAttribute('placeholder', placeholder);
+      //   });
+      //   beforeEach(nextFrame);
+
+      //   it('passes aXe audit', async function() {
+      //     await expect(element).to.be.accessible();
+      //   });
+
+      //   it('lists the placeholder as first among the options', function() {
+      //     expect(element.options.at(0)).to.have.text(placeholder);
+      //   });
+
+      //   it('does not have redundant role', async function() {
+      //     expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+      //   });
+
+      //   it('labels the combobox with the placeholder', async function() {
+      //     expect(await a11ySnapshot()).to.axContainQuery({
+      //       role: 'combobox',
+      //       name: placeholder,
+      //     });
+      //   });
+
+      //   it('labels the toggle button with the placeholder', async function() {
+      //     expect(await a11ySnapshot()).to.axContainQuery({
+      //       role: 'button',
+      //       name: placeholder,
+      //     });
+      //   });
+
+      //   describe('show()', function() {
+      //     beforeEach(() => element.show());
+      //     it('labels the listbox with the placeholder attribute', async function() {
+      //       expect(await a11ySnapshot()).to.axContainQuery({
+      //         role: 'listbox',
+      //         name: 'placeholder',
+      //       });
+      //     });
+      //   });
+      // });
+
+      // will be removed as there's no toggle button
+      // describe('clicking the toggle button', function() {
+      //   beforeEach(async function() {
+      //     await clickElementAtOffset(element, [-10, -10]);
+      //   });
+
+      //   it('shows the listbox', async function() {
+      //     expect(element.expanded).to.be.true;
+      //     expect(await a11ySnapshot()).to.axContainRole('listbox');
+      //   });
+
+      //   it('focuses the toggle button', async function() {
+      //     expect(element.expanded).to.be.true;
+      //     expect(await a11ySnapshot()).to.axContainQuery({
+      //       focused: true,
+      //       role: 'button',
+      //     });
+      //   });
+      // });
+
+      describe('clicking the combobox input', function() {
+        beforeEach(async function() {
+          await clickElementAtOffset(element, [10, 10]);
+        });
+
+        it('shows the listbox', async function() {
+          expect(element.expanded).to.be.true;
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
+        });
+
+        // it('focuses the combobox', async function() {
+        //   expect(element.expanded).to.be.true;
+        //   expect(await a11ySnapshot()).to.axContainQuery({
+        //     focused: true,
+        //     role: 'combobox',
+        //   });
+        // });
+
+        describe('clicking option 1', function() {
+          beforeEach(async function() {
+            await clickItemAtIndex(element, 0);
+          });
+
+          it('selects option 1', function() {
+            expect(getSelectedOptionValue(element)).to.deep.equal([
+              'Blue',
+            ]);
+          });
+
+          it('closes the listbox', async function() {
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
+        });
+
+        describe('clicking option 2', function() {
+          beforeEach(async function() {
+            await clickItemAtIndex(element, 1);
+          });
+
+          it('selects option 1', function() {
+            expect(getSelectedOptionValue(element)).to.deep.equal([
+              'Green',
+            ]);
+          });
+
+          it('closes the listbox', async function() {
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
+        });
+      });
+
+      describe('focus()', function() {
+        beforeEach(focus);
+        beforeEach(updateComplete);
+
+        // Doubt
+        // it('focuses the combobox input', async function() {
+        //   expect(await a11ySnapshot()).axTreeFocusedNode
+        //       .to.have.axRole('combobox')
+        //       .and
+        //       .to.have.axName('Blue');
+        // });
+
+        describe('"r"', function() {
+          beforeEach(press('r'));
+          beforeEach(updateComplete);
+
+          it('only shows options that start with "r" or "R"', async function() {
+            expect(getVisibleOptionValues(element)).to.deep.equal([
+              'Red',
+            ]);
+          });
+        });
+
+        describe('Space', function() {
+          beforeEach(function() {
+            document.body.style.height = '8000px';
+          });
+          afterEach(function() {
+            document.body.style.height = 'initial';
+          });
+
+          beforeEach(press(' '));
+          beforeEach(updateComplete);
+          beforeEach(() => aTimeout(300));
+
+          it('does not expand the listbox', async function() {
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
+
+          it('does not scroll the screen', function() {
+            expect(window.scrollY).to.equal(0);
+          });
+        });
+
+        describe('ArrowDown', function() {
+          beforeEach(press('ArrowDown'));
+          beforeEach(updateComplete);
+          beforeEach(() => aTimeout(200));
+
+          it('shows the listbox', async function() {
+            expect(element.expanded).to.be.true;
+            expect(await a11ySnapshot()).to.axContainRole('listbox');
+          });
+
+          it('focuses option 1', function() {
+            expect(getActiveOption(element)).to.have.value('Blue');
+          });
+
+          // it('does not move keyboard focus', async function() {
+          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+          // });
+
+          describe('ArrowDown', function() {
+            beforeEach(press('ArrowDown'));
+            beforeEach(updateComplete);
+
+            it('focuses option 2', function() {
+              expect(getActiveOption(element)).to.have.text('Green');
+            });
+
+            describe('Enter', function() {
+              beforeEach(press('Enter'));
+              beforeEach(updateComplete);
+
+              it('selects option 2', function() {
+                expect(getSelectedOptionValue(element)).to.deep.equal([
+                  'Green',
+                ]);
+              });
+
+              it('sets typeahead input to second option value', async function() {
+                expect(await a11ySnapshot())
+                    .axTreeFocusedNode
+                    .to.have.axProperty('value', 'Green');
+              });
+
+              // it('retains focus on combobox input', async function() {
+              //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+              // });
+
+              it('hides the listbox', async function() {
+                expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+              });
+
+              describe('focus()', function() {
+                beforeEach(focus);
+                describe('ArrowDown', function() {
+                  beforeEach(press('ArrowDown'));
+                  beforeEach(updateComplete);
+
+                  it('focuses option 2', function() {
+                    expect(getActiveOption(element)).to.have.text('Green');
+                  });
+
+                  it('only shows option 2', function() {
+                    expect(getVisibleOptionValues(element)).to.deep.equal([
+                      'Green',
+                    ]);
+                  });
+                });
+              });
+            });
+          });
+
+          describe('ArrowUp', function() {
+            beforeEach(press('ArrowUp'));
+            beforeEach(updateComplete);
+
+            it('focuses the last item', async function() {
+              expect(getActiveOption(element)).to.have.value('Yellow');
+            });
+          });
+        });
+
+        describe('"p"', function() {
+          beforeEach(press('p'));
+          beforeEach(updateComplete);
+
+          // it('shows the listbox and maintains focus', async function() {
+          //   expect(await a11ySnapshot())
+          //       .to.axContainRole('listbox')
+          //       .and.axTreeFocusedNode
+          //       .to.have.axRole('combobox')
+          //       .and.to.have.axProperty('value', 'p');
+          // });
+
+          it('only shows listbox items starting with the letter p', function() {
+            expect(getVisibleOptionValues(element)).to.deep.equal([
+              'Purple',
+              'Periwinkle',
+              'Pink',
+            ]);
+          });
+
+          describe('Backspace', function() {
+            beforeEach(press('Backspace'));
+            beforeEach(updateComplete);
+
+            // it('shows the listbox and maintains focus', async function() {
+            //   expect(await a11ySnapshot())
+            //       .to.axContainRole('listbox')
+            //       .and.axTreeFocusedNode
+            //       .to.have.axRole('combobox')
+            //       .and.to.not.have.axProperty('value', 'p');
+            // });
+
+            it('all options are visible', async function() {
+              expect(getVisibleOptionValues(element)).to.deep.equal([
+                'Blue',
+                'Green',
+                'Magenta',
+                'Orange',
+                'Purple',
+                'Periwinkle',
+                'Pink',
+                'Red',
+                'Yellow',
+              ]);
+            });
+          });
+
+          describe('"u"', function() {
+            beforeEach(press('u'));
+            beforeEach(updateComplete);
+
+            it('only shows the option "Purple"', function() {
+              expect(getVisibleOptionValues(element)).to.deep.equal([
+                'Purple',
+              ]);
+            });
+
+            describe('ArrowDown', function() {
+              beforeEach(press('ArrowDown'));
+              beforeEach(updateComplete);
+
+              it('focuses the option "Purple"', function() {
+                expect(getActiveOption(element)).to.have.text('Purple');
+              });
+
+              describe('Enter', function() {
+                beforeEach(press('Enter'));
+                beforeEach(updateComplete);
+
+                it('selects the option "Purple"', function() {
+                  expect(getSelectedOptionValue(element)).to.deep.equal([
+                    'Purple',
+                  ]);
+                });
+
+                describe('Backspace (x5)', function() {
+                  beforeEach(press('Backspace'));
+                  beforeEach(press('Backspace'));
+                  beforeEach(press('Backspace'));
+                  beforeEach(press('Backspace'));
+                  beforeEach(press('Backspace'));
+
+                  it('shows the options starting with "P"', function() {
+                    expect(getVisibleOptionValues(element)).to.deep.equal([
+                      'Purple',
+                      'Periwinkle',
+                      'Pink',
+                    ]);
+                  });
+
+                  describe('Home', function() {
+                    beforeEach(press('Home'));
+
+                    it('retains focus on the option "Purple"', function() {
+                      expect(getActiveOption(element)).to.have.text('Purple');
+                    });
+
+                    // it('moves cursor to start', function() {
+                    //   // WARNING: ties test to DOM structure
+                    //   const input = element.shadowRoot?.querySelector('input');
+                    //   expect(input?.selectionStart).to.equal(0);
+                    // });
+                  });
+                  describe('End', function() {
+                    beforeEach(press('End'));
+
+                    it('retains focus on the option "Purple"', function() {
+                      expect(getActiveOption(element)).to.have.text('Purple');
+                    });
+
+                    // it('moves cursor to start', function() {
+                    //   // WARNING: ties test to DOM structure
+                    //   const input = element.shadowRoot?.querySelector('input');
+                    //   expect(input?.selectionStart).to.equal(1);
+                    // });
+                  });
+                });
+              });
+            });
+          });
+        });
+      });
+
+      describe.skip('setting filter to "*"', function() {
+        beforeEach(function() {
+          // @ts-expect-error: todo: add filter feature
+          element.filter = '*';
+        });
+        beforeEach(updateComplete);
+        it('does not error', async function() {
+          const snapshot = await a11ySnapshot();
+          const [, , listbox] = snapshot.children ?? [];
+          expect(listbox?.children).to.not.be.ok;
+        });
+      });
+
+      describe.skip('custom filtering', function() {
+        beforeEach(function() {
+          // @ts-expect-error: we intend to implement this in the next release
+          element.customFilter = option =>
+            // @ts-expect-error: TODO add filter feature
+            new RegExp(element.filter).test(option.value);
+        });
+
+        beforeEach(focus);
+
+        beforeEach(updateComplete);
+
+        describe('r', function() {
+          beforeEach(press('r'));
+          beforeEach(updateComplete);
+          it('shows options that contain "r"', async function() {
+            expect(getVisibleOptionValues(element)).to.deep.equal([
+              'Green',
+              'Orange',
+              'Purple',
+            ]);
+          });
+        });
+
+        describe('typing "R"', function() {
+          beforeEach(press('R'));
+          beforeEach(nextFrame);
+          beforeEach(updateComplete);
+          it('shows options that start with "r"', async function() {
+            expect(getVisibleOptionValues(element)).to.deep.equal([
+              'Red',
+            ]);
+          });
+        });
+      });
+    });
   });
 });

From a363caa394229c7fd1affedd617c9d843f9bfeac Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 7 Jul 2025 00:31:42 +0530
Subject: [PATCH 39/85] chore: draft spec file added

---
 .../test/pf-search-input.spec.ts              | 62 +++++++++----------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index 0e2723b8c2..e315672660 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -117,17 +117,17 @@ describe('<pf-search-input>', function() {
           beforeEach(updateComplete);
           await aTimeout(30);
 
-          it('labels the listbox with the accessible-label attribute', async function() {
-            const snap = await a11ySnapshot();
-            expect(snap).to.axContainQuery({
-              role: 'listbox',
-              name: 'label',
-            });
-          });
+          // it('labels the listbox with the accessible-label attribute', async function() {
+          //   const snap = await a11ySnapshot();
+          //   expect(snap).to.axContainQuery({
+          //     role: 'listbox',
+          //     name: 'label',
+          //   });
+          // });
 
-          it('focuses on the first item', async function() {
-            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-          });
+          // it('focuses on the first item', async function() {
+          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+          // });
 
           describe('Space', function() {
             beforeEach(press(' '));
@@ -193,16 +193,16 @@ describe('<pf-search-input>', function() {
         describe('ArrowDown', async function() {
           beforeEach(press('ArrowDown'));
           await aTimeout(30);
-          it('labels the listbox with the label elements', async function() {
-            expect(await a11ySnapshot()).to.axContainQuery({
-              role: 'listbox',
-              name: 'label1label2',
-            });
-          });
+          // it('labels the listbox with the label elements', async function() {
+          //   expect(await a11ySnapshot()).to.axContainQuery({
+          //     role: 'listbox',
+          //     name: 'label1label2',
+          //   });
+          // });
 
-          it('focuses on the first item', async function() {
-            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-          });
+          // it('focuses on the first item', async function() {
+          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+          // });
 
           describe('Space', function() {
             beforeEach(press(' '));
@@ -486,9 +486,9 @@ describe('<pf-search-input>', function() {
               beforeEach(press('ArrowDown'));
               beforeEach(updateComplete);
               await aTimeout(30);
-              it('focuses on option 3', async function() {
-                expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('3');
-              });
+              // it('focuses on option 3', async function() {
+              //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('3');
+              // });
 
               describe('Enter', function() {
                 beforeEach(press('Enter'));
@@ -547,16 +547,16 @@ describe('<pf-search-input>', function() {
               beforeEach(updateComplete);
               await aTimeout(30);
 
-              it('selects option 2', function() {
-                expect(getSelectedOptionValue(element)).to.deep.equal(['2']);
-              });
+              // it('selects option 2', function() {
+              //   expect(getSelectedOptionValue(element)).to.deep.equal(['2']);
+              // });
 
-              it('exposes selection to assistive technology', async function() {
-                expect(await a11ySnapshot()).to.axContainQuery({
-                  role: 'combobox',
-                  value: '2',
-                });
-              });
+              // it('exposes selection to assistive technology', async function() {
+              //   expect(await a11ySnapshot()).to.axContainQuery({
+              //     role: 'combobox',
+              //     value: '2',
+              //   });
+              // });
             });
           });
 

From 1ae78636014bcae6b27843c8acf9de92352cc974 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 7 Jul 2025 20:17:21 +0530
Subject: [PATCH 40/85] chore: spec file updated

---
 elements/pf-search-input/pf-search-input.ts   |   4 +-
 .../test/pf-search-input.spec.ts              | 375 ++++--------------
 2 files changed, 76 insertions(+), 303 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index fb8b2b874a..a8f2100f45 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -186,13 +186,11 @@ export class PfSearchInput extends LitElement {
           <div class="search-icon">
             <pf-icon size="md" icon="search" set="fas">search</pf-icon>
           </div>
-          <pf-text-input 
-            icon="search" 
+          <input 
             id="toggle-input"
             ?disabled="${disabled}"
             @keydown=${this.#onSearchInput}
             placeholder="${placeholder || this.#buttonLabel}">
-          </pf-text-input>
           <pf-button 
             @click="${this.#OnClose}" 
             ?hidden="${this.#hideCloseButton()}" 
diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index e315672660..a6abb8627d 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -112,37 +112,36 @@ describe('<pf-search-input>', function() {
       describe('focus()', function() {
         beforeEach(focus);
         beforeEach(updateComplete);
-        describe('ArrowDown', async function() {
+        describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
           beforeEach(updateComplete);
-          await aTimeout(30);
 
-          // it('labels the listbox with the accessible-label attribute', async function() {
-          //   const snap = await a11ySnapshot();
-          //   expect(snap).to.axContainQuery({
-          //     role: 'listbox',
-          //     name: 'label',
-          //   });
-          // });
+          it('labels the listbox with the accessible-label attribute', async function() {
+            const snap = await a11ySnapshot();
+            expect(snap).to.axContainQuery({
+              role: 'combobox',
+              name: 'label',
+            });
+          });
 
-          // it('focuses on the first item', async function() {
+          // it('focuses on the first item', async function() { // This will not work as the focus will still remain on the input
           //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
           // });
 
-          describe('Space', function() {
-            beforeEach(press(' '));
-            beforeEach(updateComplete);
-            // it('selects option 1', function() {
-            //   expect(getSelectedOptionValue(element)).to.deep.equal(['1']);
-            // });
-
-            // it('exposes selection to assistive technology', async function() {
-            //   expect(await a11ySnapshot()).to.axContainQuery({
-            //     role: 'combobox',
-            //     value: '1',
-            //   });
-            // });
-          });
+          // describe('Space', function() { // the space key will be adding <space> in the search input
+          //   beforeEach(press(' '));
+          //   beforeEach(updateComplete);
+          //   // it('selects option 1', function() {
+          //   //   expect(getSelectedOptionValue(element)).to.deep.equal(['1']);
+          //   // });
+
+          //   // it('exposes selection to assistive technology', async function() {
+          //   //   expect(await a11ySnapshot()).to.axContainQuery({
+          //   //     role: 'combobox',
+          //   //     value: '1',
+          //   //   });
+          //   // });
+          // });
         });
       });
     });
@@ -187,36 +186,15 @@ describe('<pf-search-input>', function() {
       });
 
       describe('focus()', function() {
-        // beforeEach(() => aTimeout(3000));
         beforeEach(focus);
         beforeEach(updateComplete);
-        describe('ArrowDown', async function() {
+        describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
-          await aTimeout(30);
-          // it('labels the listbox with the label elements', async function() {
-          //   expect(await a11ySnapshot()).to.axContainQuery({
-          //     role: 'listbox',
-          //     name: 'label1label2',
-          //   });
-          // });
-
-          // it('focuses on the first item', async function() {
-          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-          // });
-
-          describe('Space', function() {
-            beforeEach(press(' '));
-            beforeEach(updateComplete);
-            // it('selects option 1', function() {
-            //   expect(getSelectedOptionValue(element)).to.deep.equal('1');
-            // });
-
-            // it('exposes selection to assistive technology', async function() {
-            //   expect(await a11ySnapshot()).to.axContainQuery({
-            //     role: 'combobox',
-            //     value: '1',
-            //   });
-            // });
+          it('labels the listbox with the label elements', async function() {
+            expect(await a11ySnapshot()).to.axContainQuery({
+              role: 'combobox',
+              name: 'label1label2',
+            });
           });
         });
       });
@@ -284,16 +262,6 @@ describe('<pf-search-input>', function() {
             it('remains expanded', function() {
               expect(element.expanded).to.be.true;
             });
-            // describe('Space', function() {
-            //   beforeEach(press(' '));
-            //   beforeEach(updateComplete);
-            //   it('closes', function() {
-            //     expect(element.expanded).to.be.false;
-            //   });
-            //   it('sets value', function() {
-            //     expect(element.value).to.equal('2');
-            //   });
-            // });
           });
         });
       });
@@ -318,12 +286,7 @@ describe('<pf-search-input>', function() {
           </pf-search-input>`);
       });
 
-      beforeEach(updateComplete);
-      beforeEach(async () => {
-        await aTimeout(1000);
-      });
-
-      // it('does not pass aXe audit', async function() {
+      // it('does not pass aXe audit', async function() { // doubt
       //   await expect(element).to.not.be.accessible();
       // });
 
@@ -346,10 +309,6 @@ describe('<pf-search-input>', function() {
           expect(await a11ySnapshot()).to.axContainRole('listbox');
         });
 
-        // it('focuses on the first item', async function() {
-        //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-        // });
-
         describe('Tab', function() {
           beforeEach(press('Tab'));
           it('does not focus the combobox button', async function() {
@@ -362,30 +321,15 @@ describe('<pf-search-input>', function() {
         beforeEach(focus);
         beforeEach(updateComplete);
 
-        // it('focuses on the combobox button', async function() {
-        //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
-        // });
+        it('focuses on the combobox button', async function() {
+          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+        });
 
         it('does not expand the listbox', async function() {
           expect(element.expanded).to.be.false;
           expect(await a11ySnapshot()).to.not.axContainRole('listbox');
         });
 
-        describe('Enter', function() {
-          beforeEach(press('Enter'));
-          beforeEach(updateComplete);
-
-          // Enter will not expand the listbox
-          // it('expands the listbox', async function() {
-          //   expect(element.expanded).to.be.true;
-          //   expect(await a11ySnapshot()).to.axContainRole('listbox');
-          // });
-
-          // it('focuses on the first item', async function() {
-          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-          // });
-        });
-
         describe('Space', function() {
           beforeEach(function() {
             document.body.style.height = '8000px';
@@ -396,15 +340,6 @@ describe('<pf-search-input>', function() {
 
           beforeEach(press(' '));
           beforeEach(updateComplete);
-          beforeEach(() => aTimeout(300));
-
-          // it('expands the listbox', async function() {
-          //   expect(await a11ySnapshot()).to.axContainRole('listbox');
-          // });
-
-          // it('focuses on the first item', async function() {
-          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-          // });
 
           it('does not scroll the screen', function() {
             expect(window.scrollY).to.equal(0);
@@ -418,10 +353,6 @@ describe('<pf-search-input>', function() {
           it('expands the listbox', async function() {
             expect(await a11ySnapshot()).to.axContainRole('listbox');
           });
-
-          // it('focuses on option 1', async function() {
-          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-          // });
         });
 
         describe('End', function() {
@@ -431,10 +362,6 @@ describe('<pf-search-input>', function() {
           it('expands the listbox', async function() {
             expect(await a11ySnapshot()).to.axContainRole('listbox');
           });
-
-          // it('focuses on option 8', async function() {
-          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('8');
-          // });
         });
 
         describe('ArrowDown', function() {
@@ -446,26 +373,6 @@ describe('<pf-search-input>', function() {
             expect(await a11ySnapshot()).to.axContainRole('listbox');
           });
 
-          // it('focuses on the first item', async function() {
-          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-          // });
-
-          describe('ArrowUp', function() {
-            beforeEach(press('ArrowUp'));
-            beforeEach(updateComplete);
-            // Last option will not be selected on arro-up
-            // it('focuses on the last option', async function() {
-            //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('8');
-            // });
-            describe('ArrowDown', function() {
-              beforeEach(press('ArrowDown'));
-              beforeEach(updateComplete);
-              // it('focuses on option 1', async function() {
-              //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-              // });
-            });
-          });
-
           describe('ArrowDown', function() {
             beforeEach(press('ArrowDown'));
             beforeEach(updateComplete);
@@ -511,82 +418,8 @@ describe('<pf-search-input>', function() {
                   expect(element.expanded).to.be.false;
                   expect(await a11ySnapshot()).to.not.axContainRole('listbox');
                 });
-
-                describe('ArrowDown', function() {
-                  beforeEach(press('ArrowDown'));
-                  beforeEach(updateComplete);
-
-                  // it('expands the listbox', async function() {
-                  //   expect(element.expanded).to.be.true;
-                  //   expect(await a11ySnapshot()).to.axContainRole('listbox');
-                  // });
-
-                  describe('Home', function() {
-                    beforeEach(press('Home'));
-                    beforeEach(updateComplete);
-
-                    // it('focuses on option 1', async function() {
-                    //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-                    // });
-
-                    describe('Home', function() {
-                      beforeEach(press('Home'));
-                      beforeEach(updateComplete);
-
-                      // it('focuses on option 1', async function() {
-                      //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-                      // });
-                    });
-                  });
-                });
               });
             });
-
-            describe('Enter', async function() {
-              beforeEach(press('Enter'));
-              beforeEach(updateComplete);
-              await aTimeout(30);
-
-              // it('selects option 2', function() {
-              //   expect(getSelectedOptionValue(element)).to.deep.equal(['2']);
-              // });
-
-              // it('exposes selection to assistive technology', async function() {
-              //   expect(await a11ySnapshot()).to.axContainQuery({
-              //     role: 'combobox',
-              //     value: '2',
-              //   });
-              // });
-            });
-          });
-
-          describe('Space', function() {
-            beforeEach(press(' '));
-            beforeEach(updateComplete);
-
-            // it('hides the listbox', async function() {
-            //   expect(element.expanded).to.be.false;
-            //   expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-            // });
-
-            // it('focuses the combobox toggle', async function() {
-            //   expect(await a11ySnapshot())
-            //       .axTreeFocusedNode
-            //       .to.have.axRole('combobox');
-            // });
-
-            // it('selects option 1', function() {
-            //   expect(getSelectedOptionValue(element)).to.equal([
-            //     '1',
-            //   ]);
-            // });
-
-            // it('exposes selection to assistive technology', async function() {
-            //   expect(await a11ySnapshot()).to.axContainQuery({
-            //     role: 'combobox',
-            //     value: '1',
-            //   });
-            // });
           });
 
           // -- This functionality needs to be implement in search input
@@ -632,11 +465,11 @@ describe('<pf-search-input>', function() {
               expect(await a11ySnapshot()).to.not.axContainRole('listbox');
             });
 
-            // it('focuses the button', async function() {
-            //   expect(await a11ySnapshot())
-            //       .axTreeFocusedNode
-            //       .to.have.axRole('combobox');
-            // });
+            it('focuses the button', async function() {
+              expect(await a11ySnapshot())
+                  .axTreeFocusedNode
+                  .to.have.axRole('combobox');
+            });
           });
         });
       });
@@ -670,13 +503,6 @@ describe('<pf-search-input>', function() {
         expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
       });
 
-      // it('labels the combobox input with the first option', async function() {
-      //   expect(await a11ySnapshot()).to.axContainQuery({
-      //     role: 'combobox',
-      //     name: 'Blue',
-      //   });
-      // });
-
       describe('with an `accessible-label` attribute', function() {
         beforeEach(function() {
           element.setAttribute('accessible-label', label);
@@ -698,14 +524,6 @@ describe('<pf-search-input>', function() {
           });
         });
 
-        // will be removed
-        // it('labels the toggle button with the label', async function() {
-        //   expect(await a11ySnapshot()).to.axContainQuery({
-        //     role: 'button',
-        //     name: label,
-        //   });
-        // });
-
         describe('show()', function() {
           beforeEach(() => element.show());
           it('labels the listbox with the placeholder attribute', async function() {
@@ -717,49 +535,6 @@ describe('<pf-search-input>', function() {
         });
       });
 
-      // describe('with a `placeholder` attribute', function() {
-      //   beforeEach(function() {
-      //     element.setAttribute('placeholder', placeholder);
-      //   });
-      //   beforeEach(nextFrame);
-
-      //   it('passes aXe audit', async function() {
-      //     await expect(element).to.be.accessible();
-      //   });
-
-      //   it('lists the placeholder as first among the options', function() {
-      //     expect(element.options.at(0)).to.have.text(placeholder);
-      //   });
-
-      //   it('does not have redundant role', async function() {
-      //     expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
-      //   });
-
-      //   it('labels the combobox with the placeholder', async function() {
-      //     expect(await a11ySnapshot()).to.axContainQuery({
-      //       role: 'combobox',
-      //       name: placeholder,
-      //     });
-      //   });
-
-      //   it('labels the toggle button with the placeholder', async function() {
-      //     expect(await a11ySnapshot()).to.axContainQuery({
-      //       role: 'button',
-      //       name: placeholder,
-      //     });
-      //   });
-
-      //   describe('show()', function() {
-      //     beforeEach(() => element.show());
-      //     it('labels the listbox with the placeholder attribute', async function() {
-      //       expect(await a11ySnapshot()).to.axContainQuery({
-      //         role: 'listbox',
-      //         name: 'placeholder',
-      //       });
-      //     });
-      //   });
-      // });
-
       // will be removed as there's no toggle button
       // describe('clicking the toggle button', function() {
       //   beforeEach(async function() {
@@ -790,13 +565,13 @@ describe('<pf-search-input>', function() {
           expect(await a11ySnapshot()).to.axContainRole('listbox');
         });
 
-        // it('focuses the combobox', async function() {
-        //   expect(element.expanded).to.be.true;
-        //   expect(await a11ySnapshot()).to.axContainQuery({
-        //     focused: true,
-        //     role: 'combobox',
-        //   });
-        // });
+        it('focuses the combobox', async function() {
+          expect(element.expanded).to.be.true;
+          expect(await a11ySnapshot()).to.axContainQuery({
+            focused: true,
+            role: 'combobox',
+          });
+        });
 
         describe('clicking option 1', function() {
           beforeEach(async function() {
@@ -889,9 +664,9 @@ describe('<pf-search-input>', function() {
             expect(getActiveOption(element)).to.have.value('Blue');
           });
 
-          // it('does not move keyboard focus', async function() {
-          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
-          // });
+          it('does not move keyboard focus', async function() {
+            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+          });
 
           describe('ArrowDown', function() {
             beforeEach(press('ArrowDown'));
@@ -917,9 +692,9 @@ describe('<pf-search-input>', function() {
                     .to.have.axProperty('value', 'Green');
               });
 
-              // it('retains focus on combobox input', async function() {
-              //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
-              // });
+              it('retains focus on combobox input', async function() {
+                expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+              });
 
               it('hides the listbox', async function() {
                 expect(await a11ySnapshot()).to.not.axContainRole('listbox');
@@ -959,13 +734,13 @@ describe('<pf-search-input>', function() {
           beforeEach(press('p'));
           beforeEach(updateComplete);
 
-          // it('shows the listbox and maintains focus', async function() {
-          //   expect(await a11ySnapshot())
-          //       .to.axContainRole('listbox')
-          //       .and.axTreeFocusedNode
-          //       .to.have.axRole('combobox')
-          //       .and.to.have.axProperty('value', 'p');
-          // });
+          it('shows the listbox and maintains focus', async function() {
+            expect(await a11ySnapshot())
+                .to.axContainRole('listbox')
+                .and.axTreeFocusedNode
+                .to.have.axRole('combobox')
+                .and.to.have.axProperty('value', 'p');
+          });
 
           it('only shows listbox items starting with the letter p', function() {
             expect(getVisibleOptionValues(element)).to.deep.equal([
@@ -979,13 +754,13 @@ describe('<pf-search-input>', function() {
             beforeEach(press('Backspace'));
             beforeEach(updateComplete);
 
-            // it('shows the listbox and maintains focus', async function() {
-            //   expect(await a11ySnapshot())
-            //       .to.axContainRole('listbox')
-            //       .and.axTreeFocusedNode
-            //       .to.have.axRole('combobox')
-            //       .and.to.not.have.axProperty('value', 'p');
-            // });
+            it('shows the listbox and maintains focus', async function() {
+              expect(await a11ySnapshot())
+                  .to.axContainRole('listbox')
+                  .and.axTreeFocusedNode
+                  .to.have.axRole('combobox')
+                  .and.to.not.have.axProperty('value', 'p');
+            });
 
             it('all options are visible', async function() {
               expect(getVisibleOptionValues(element)).to.deep.equal([
@@ -1052,11 +827,11 @@ describe('<pf-search-input>', function() {
                       expect(getActiveOption(element)).to.have.text('Purple');
                     });
 
-                    // it('moves cursor to start', function() {
-                    //   // WARNING: ties test to DOM structure
-                    //   const input = element.shadowRoot?.querySelector('input');
-                    //   expect(input?.selectionStart).to.equal(0);
-                    // });
+                    it('moves cursor to start', function() {
+                      // WARNING: ties test to DOM structure
+                      const input = element.shadowRoot?.querySelector('input');
+                      expect(input?.selectionStart).to.equal(0);
+                    });
                   });
                   describe('End', function() {
                     beforeEach(press('End'));
@@ -1065,11 +840,11 @@ describe('<pf-search-input>', function() {
                       expect(getActiveOption(element)).to.have.text('Purple');
                     });
 
-                    // it('moves cursor to start', function() {
-                    //   // WARNING: ties test to DOM structure
-                    //   const input = element.shadowRoot?.querySelector('input');
-                    //   expect(input?.selectionStart).to.equal(1);
-                    // });
+                    it('moves cursor to start', function() {
+                      // WARNING: ties test to DOM structure
+                      const input = element.shadowRoot?.querySelector('input');
+                      expect(input?.selectionStart).to.equal(1);
+                    });
                   });
                 });
               });

From 4268ecf693a6afc07c61b64f719e637ab5690b78 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 10 Jul 2025 19:47:15 +0530
Subject: [PATCH 41/85] chore: updated test cases

---
 elements/pf-search-input/pf-search-input.ts   |   7 +-
 .../test/pf-search-input.spec.ts              | 181 ++++++------------
 2 files changed, 63 insertions(+), 125 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index a8f2100f45..49a1c26aa0 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -165,11 +165,6 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  get #buttonLabel(): string {
-    const { selected } = this.#combobox;
-    return `${selected?.length ?? 0} ${this.itemsSelectedText}`;
-  }
-
   override render(): TemplateResult<1> {
     const { disabled, expanded, placeholder } = this;
     const { anchor = 'bottom', alignment = 'start', styles = {} } = this.#float;
@@ -190,7 +185,7 @@ export class PfSearchInput extends LitElement {
             id="toggle-input"
             ?disabled="${disabled}"
             @keydown=${this.#onSearchInput}
-            placeholder="${placeholder || this.#buttonLabel}">
+            placeholder="${placeholder}">
           <pf-button 
             @click="${this.#OnClose}" 
             ?hidden="${this.#hideCloseButton()}" 
diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index a6abb8627d..2780801e7d 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -6,14 +6,6 @@ import { sendKeys } from '@web/test-runner-commands';
 import { clickElementAtCenter, clickElementAtOffset } from '@patternfly/pfe-tools/test/utils.js';
 import type { PfOption } from '../../pf-select/pf-option.js';
 
-// async function holdShift() {
-//   await sendKeys({ down: 'Shift' });
-// }
-
-// async function releaseShift() {
-//   await sendKeys({ up: 'Shift' });
-// }
-
 function press(key: string) {
   return async function() {
     await sendKeys({ press: key });
@@ -76,7 +68,6 @@ describe('<pf-search-input>', function() {
     describe('with accessible-label attribute and 3 items', function() {
       let element: PfSearchInput;
       const updateComplete = () => element.updateComplete;
-      const focus = () => element.focus;
 
       beforeEach(async function() {
         element = await createFixture<PfSearchInput>(html`
@@ -110,7 +101,7 @@ describe('<pf-search-input>', function() {
       });
 
       describe('focus()', function() {
-        beforeEach(focus);
+        beforeEach(press('Tab'));
         beforeEach(updateComplete);
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
@@ -119,29 +110,14 @@ describe('<pf-search-input>', function() {
           it('labels the listbox with the accessible-label attribute', async function() {
             const snap = await a11ySnapshot();
             expect(snap).to.axContainQuery({
-              role: 'combobox',
+              role: 'listbox',
               name: 'label',
             });
           });
 
-          // it('focuses on the first item', async function() { // This will not work as the focus will still remain on the input
-          //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-          // });
-
-          // describe('Space', function() { // the space key will be adding <space> in the search input
-          //   beforeEach(press(' '));
-          //   beforeEach(updateComplete);
-          //   // it('selects option 1', function() {
-          //   //   expect(getSelectedOptionValue(element)).to.deep.equal(['1']);
-          //   // });
-
-          //   // it('exposes selection to assistive technology', async function() {
-          //   //   expect(await a11ySnapshot()).to.axContainQuery({
-          //   //     role: 'combobox',
-          //   //     value: '1',
-          //   //   });
-          //   // });
-          // });
+          it('focuses on the first item', async function() {
+            expect(getActiveOption(element)).to.have.value('1');
+          });
         });
       });
     });
@@ -149,7 +125,6 @@ describe('<pf-search-input>', function() {
     describe('with 3 items and associated <label> elements', function() {
       let element: PfSearchInput;
       const updateComplete = () => element.updateComplete;
-      const focus = () => element.focus;
 
       beforeEach(async function() {
         element = await createFixture<PfSearchInput>(html`
@@ -186,13 +161,13 @@ describe('<pf-search-input>', function() {
       });
 
       describe('focus()', function() {
-        beforeEach(focus);
+        beforeEach(press('Tab'));
         beforeEach(updateComplete);
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
           it('labels the listbox with the label elements', async function() {
             expect(await a11ySnapshot()).to.axContainQuery({
-              role: 'combobox',
+              role: 'listbox',
               name: 'label1label2',
             });
           });
@@ -286,9 +261,9 @@ describe('<pf-search-input>', function() {
           </pf-search-input>`);
       });
 
-      // it('does not pass aXe audit', async function() { // doubt
-      //   await expect(element).to.not.be.accessible();
-      // });
+      it('does not pass aXe audit', async function() {
+        await expect(element).to.not.be.accessible();
+      });
 
       it('sets aria-setsize and aria-posinset on items', function() {
         element.options.forEach((option, i) => {
@@ -377,42 +352,41 @@ describe('<pf-search-input>', function() {
             beforeEach(press('ArrowDown'));
             beforeEach(updateComplete);
 
-            // it('focuses on option 2', async function() {
-            //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('2');
-            // });
+            it('focuses on option 2', async function() {
+              expect(getActiveOption(element)).to.have.value('2');
+            });
 
             describe('ArrowUp', function() {
               beforeEach(press('ArrowUp'));
               beforeEach(updateComplete);
-              // it('focuses on option 1', async function() {
-              //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
-              // });
+              it('focuses on option 1', async function() {
+                expect(getActiveOption(element)).to.have.value('1');
+              });
             });
 
             describe('ArrowDown', async function() {
               beforeEach(press('ArrowDown'));
               beforeEach(updateComplete);
-              await aTimeout(30);
-              // it('focuses on option 3', async function() {
-              //   expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('3');
-              // });
+              it('focuses on option 3', async function() {
+                expect(getActiveOption(element)).to.have.value('3');
+              });
 
               describe('Enter', function() {
                 beforeEach(press('Enter'));
                 beforeEach(updateComplete);
 
-                // it('selects option 3', function() {
-                //   expect(getSelectedOptionValue(element)).to.deep.equal([
-                //     '3',
-                //   ]);
-                // });
+                it('selects option 3', function() {
+                  expect(getSelectedOptionValue(element)).to.deep.equal([
+                    '3',
+                  ]);
+                });
 
-                // it('exposes selection to assistive technology', async function() {
-                //   expect(await a11ySnapshot()).to.axContainQuery({
-                //     role: 'combobox',
-                //     value: '3',
-                //   });
-                // });
+                it('exposes selection to assistive technology', async function() {
+                  expect(await a11ySnapshot()).to.axContainQuery({
+                    role: 'combobox',
+                    value: '3',
+                  });
+                });
 
                 it('hides the listbox', async function() {
                   expect(element.expanded).to.be.false;
@@ -422,39 +396,6 @@ describe('<pf-search-input>', function() {
             });
           });
 
-          // -- This functionality needs to be implement in search input
-          // describe('Tab', function() {
-          //   beforeEach(press('Tab'));
-          //   beforeEach(nextFrame);
-          //   beforeEach(updateComplete);
-          //   it('hides the listbox', async function() {
-          //     expect(element.expanded).to.be.false;
-          //     expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-          //   });
-          //   it('does not focus on the combobox button', async function() {
-          //     expect(await a11ySnapshot()).to.not.have.axTreeFocusedNode;
-          //   });
-          // });
-
-          // -- This functionality needs to be implement in search input
-          // describe('Shift+Tab', function() {
-          //   beforeEach(holdShift);
-          //   beforeEach(press('Tab'));
-          //   beforeEach(releaseShift);
-          //   beforeEach(updateComplete);
-
-          //   it('hides the listbox', async function() {
-          //     expect(element.expanded).to.be.false;
-          //     expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-          //   });
-
-          //   it('focuses the button', async function() {
-          //     expect(await a11ySnapshot())
-          //         .axTreeFocusedNode
-          //         .to.have.axRole('combobox');
-          //   });
-          // });
-
           describe('Escape', function() {
             beforeEach(press('Escape'));
             beforeEach(nextFrame);
@@ -478,7 +419,6 @@ describe('<pf-search-input>', function() {
     describe('text input interaction', function() {
       let element: PfSearchInput;
       const label = 'label';
-      // const placeholder = 'placeholder';
       const updateComplete = () => element.updateComplete;
       const focus = () => element.focus();
 
@@ -535,26 +475,6 @@ describe('<pf-search-input>', function() {
         });
       });
 
-      // will be removed as there's no toggle button
-      // describe('clicking the toggle button', function() {
-      //   beforeEach(async function() {
-      //     await clickElementAtOffset(element, [-10, -10]);
-      //   });
-
-      //   it('shows the listbox', async function() {
-      //     expect(element.expanded).to.be.true;
-      //     expect(await a11ySnapshot()).to.axContainRole('listbox');
-      //   });
-
-      //   it('focuses the toggle button', async function() {
-      //     expect(element.expanded).to.be.true;
-      //     expect(await a11ySnapshot()).to.axContainQuery({
-      //       focused: true,
-      //       role: 'button',
-      //     });
-      //   });
-      // });
-
       describe('clicking the combobox input', function() {
         beforeEach(async function() {
           await clickElementAtOffset(element, [10, 10]);
@@ -607,17 +527,9 @@ describe('<pf-search-input>', function() {
       });
 
       describe('focus()', function() {
-        beforeEach(focus);
+        beforeEach(press('Tab'));
         beforeEach(updateComplete);
 
-        // Doubt
-        // it('focuses the combobox input', async function() {
-        //   expect(await a11ySnapshot()).axTreeFocusedNode
-        //       .to.have.axRole('combobox')
-        //       .and
-        //       .to.have.axName('Blue');
-        // });
-
         describe('"r"', function() {
           beforeEach(press('r'));
           beforeEach(updateComplete);
@@ -660,6 +572,15 @@ describe('<pf-search-input>', function() {
             expect(await a11ySnapshot()).to.axContainRole('listbox');
           });
 
+          // Skipping the test case as the role is visible in the accessibility tree,
+          // and since the pf-button uses ElementInternals, the test case is unable to access the role.
+          it.skip('labels the close button with the label', async function() {
+            expect(await a11ySnapshot()).to.axContainQuery({
+              role: 'button',
+              name: 'close',
+            });
+          });
+
           it('focuses option 1', function() {
             expect(getActiveOption(element)).to.have.value('Blue');
           });
@@ -730,6 +651,28 @@ describe('<pf-search-input>', function() {
           });
         });
 
+        describe('clicking the close button', function() {
+          beforeEach(async function() {
+            await clickElementAtOffset(element, [-10, 10]);
+          });
+
+          it('hides the listbox', async function() {
+            expect(element.expanded).not.to.be.true;
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
+
+          it('hides the close button', async function() {
+            expect(await a11ySnapshot()).not.to.axContainQuery({
+              name: 'close',
+              role: 'button',
+            });
+          });
+
+          it('removes the selected option value', async function() {
+            expect(getSelectedOptionValue(element)).to.deep.equal([]);
+          });
+        });
+
         describe('"p"', function() {
           beforeEach(press('p'));
           beforeEach(updateComplete);

From 40ec9df723347a3e058dd976e56101341d2b3897 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 10 Jul 2025 23:13:59 +0530
Subject: [PATCH 42/85] chore: style fix

---
 elements/pf-search-input/pf-search-input.css | 21 +++++++++++++++++---
 elements/pf-search-input/pf-search-input.ts  | 20 ++++++++++---------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 385e9fb1fc..3c47530f85 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -242,13 +242,14 @@
   border: none;
   text-align: left;
   border-radius: 0;
+	padding-left: 3rem; /*Change it to variable*/
 }
 
 #toggle-input {
   justify-content: space-between;
 	min-width: calc(100% - 33px);
 	box-sizing: border-box;
-	max-height: 2.25rem;
+	height: 2.25rem;
 }
 
 .disabled #toggle-input {
@@ -278,6 +279,11 @@
 	}
 }
 
+.close-button-container{
+	height: 2.25rem;
+	width: 2.25rem;
+}
+
 #toggle-text {
   flex: 1 1 auto;
 }
@@ -359,8 +365,17 @@ div.search-icon {
 			border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc); 
 		}
 	}
-	#close-button {
-		border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc);
+	.close-button-container {
+		position: relative;
+		&::after{
+			content: '';
+			width: 2.25rem;
+			height:  var(--pf-global--spacer--xs, 0.125rem);
+			bottom: 0px;
+			left: -3px;
+			background-color: var(--pf-theme--color--accent, #0066cc);
+			position: absolute;
+		}
 	}
 }
 
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 49a1c26aa0..f3257e113d 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -186,15 +186,17 @@ export class PfSearchInput extends LitElement {
             ?disabled="${disabled}"
             @keydown=${this.#onSearchInput}
             placeholder="${placeholder}">
-          <pf-button 
-            @click="${this.#OnClose}" 
-            ?hidden="${this.#hideCloseButton()}" 
-            id="close-button"  
-            plain 
-            label="Close"
-          >
-            <pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
-          </pf-button>
+          <div class="close-button-container">
+            <pf-button 
+              @click="${this.#OnClose}" 
+              ?hidden="${this.#hideCloseButton()}" 
+              id="close-button"  
+              plain 
+              label="Close"
+              >
+              <pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
+            </pf-button>
+          </div>
           <button aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
         </div>
         <div 

From cfc13892f8b25b7391092ae5d2f2cddd677f17ce Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Sat, 12 Jul 2025 00:16:37 +0530
Subject: [PATCH 43/85] chore: submit button variant added

---
 .../demo/pf-search-input-with-submit.html     |  45 ++++++++
 elements/pf-search-input/pf-search-input.css  |  15 ++-
 elements/pf-search-input/pf-search-input.ts   | 100 +++++++++++-------
 3 files changed, 122 insertions(+), 38 deletions(-)
 create mode 100644 elements/pf-search-input/demo/pf-search-input-with-submit.html

diff --git a/elements/pf-search-input/demo/pf-search-input-with-submit.html b/elements/pf-search-input/demo/pf-search-input-with-submit.html
new file mode 100644
index 0000000000..d35cb11ea1
--- /dev/null
+++ b/elements/pf-search-input/demo/pf-search-input-with-submit.html
@@ -0,0 +1,45 @@
+<div class="container">
+  <h1>Search with autocomplete</h1>
+  <pf-search-input variant="advanced" id="search-input" placeholder="Search">
+    <pf-button slot="submit" data-action="search"> Search</pf-button>
+    <pf-option value="Alabama"> Alabama </pf-option>
+    <pf-option value="New Jersey"> New Jersey </pf-option>
+    <pf-option value="New York"> New York </pf-option>
+    <pf-option value="New Mexico"> New Mexico </pf-option>
+    <pf-option value="North Carolina"> North Carolina </pf-option>
+    <pf-option value="Alabama1"> Alabama 1 </pf-option>
+    <pf-option value="New Jersey1"> New Jersey 1 </pf-option>
+    <pf-option value="New York1"> New York 1 </pf-option>
+    <pf-option value="New Mexico1"> New Mexico  1</pf-option>
+    <pf-option value="North Carolina1"> North Carolina 1</pf-option>
+    <pf-option value="Alabama2"> Alabama 2 </pf-option>
+    <pf-option value="New Jersey2"> New Jersey 2 </pf-option>
+    <pf-option value="New York2"> New York 2 </pf-option>
+    <pf-option value="New Mexico2"> New Mexico 2 </pf-option>
+    <pf-option value="North Carolina2"> North Carolina 2 </pf-option>
+    <pf-option value="Alabama3"> Alabama 3 </pf-option>
+    <pf-option value="New Jersey3"> New Jersey 3 </pf-option>
+    <pf-option value="New York3"> New York 3 </pf-option>
+    <pf-option value="New Mexico3"> New Mexico 3 </pf-option>
+    <pf-option value="North Carolina3"> North Carolina 3 </pf-option>
+  </pf-search-input>
+</div>
+
+<script type="module">
+  import '@patternfly/elements/pf-search-input/pf-search-input.js';
+
+  const searchInput = document.getElementById('search-input');
+
+  searchInput.addEventListener('change', (event) => {
+    /* eslint-disable no-console */
+    console.log('Selected:', event.target.value);
+    /* eslint-disable no-console */
+  });
+</script
+</script>
+
+<style>
+.container{
+  padding: 40px;
+}
+</style>
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 3c47530f85..f6544525c7 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -157,6 +157,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
+	width: fit-content;
 }
 
 :host([hidden]),
@@ -176,7 +177,6 @@
   position: relative;
 }
 
-/* TODO(bennyp): see if we can get rid of this wrapping node, for perf reasons */
 #listbox-container {
   display: inline-flex;
   position: absolute;
@@ -394,4 +394,17 @@ pf-text-input {
 
 	border: none;
 	box-sizing: border-box;
+}
+
+.search-input-container {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	position: relative;
+}
+
+.submit-button-container {
+	position: absolute;
+	top: 0;
+  right: -100px;
 }
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index f3257e113d..9114a7e607 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -172,47 +172,52 @@ export class PfSearchInput extends LitElement {
     const hideLightDomItems = !ComboboxController.supportsCrossRootActiveDescendant;
 
     return html`
-      <div 
-        id="outer"
-        style="${styleMap(styles)}"
-        class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}"
-      >
-        <div id="toggle">
-          <div class="search-icon">
-            <pf-icon size="md" icon="search" set="fas">search</pf-icon>
-          </div>
-          <input 
-            id="toggle-input"
-            ?disabled="${disabled}"
-            @keydown=${this.#onSearchInput}
-            placeholder="${placeholder}">
-          <div class="close-button-container">
-            <pf-button 
-              @click="${this.#OnClose}" 
-              ?hidden="${this.#hideCloseButton()}" 
-              id="close-button"  
-              plain 
-              label="Close"
-              >
-              <pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
-            </pf-button>
-          </div>
-          <button aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
-        </div>
+      <div class="search-input-container" @click=${this.#onSubmit} 
+        @keydown=${this.#handleKeyDown}>
         <div 
-        
-          id="listbox-container"
-          ?hidden="${!expanded}"
-          style="${styleMap({
-            marginTop: `${height || 0}px`,
-            width: width ? `${width}px` : 'auto',
-          })}"
+          id="outer"
+          style="${styleMap(styles)}"
+          class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}"
         >
-          <div id="listbox">
-            ${this.#combobox.renderItemsToShadowRoot()}
-            <slot ?hidden="${hideLightDomItems}"></slot>
+          <div id="toggle">
+            <div class="search-icon">
+              <pf-icon size="md" icon="search" set="fas">search</pf-icon>
+            </div>
+            <input 
+              id="toggle-input"
+              ?disabled="${disabled}"
+              @keydown=${this.#onSearchInput}
+              placeholder="${placeholder}">
+            <div class="close-button-container">
+              <pf-button 
+                @click="${this.#OnClose}" 
+                ?hidden="${this.#hideCloseButton()}" 
+                id="close-button"  
+                plain 
+                label="Close"
+                >
+                <pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
+              </pf-button>
+            </div>
+            <button aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
+          </div>
+          <div 
+            id="listbox-container"
+            ?hidden="${!expanded}"
+            style="${styleMap({
+              marginTop: `${height || 0}px`,
+              width: width ? `${width}px` : 'auto',
+            })}"
+          >
+            <div id="listbox">
+              ${this.#combobox.renderItemsToShadowRoot()}
+              <slot ?hidden="${hideLightDomItems}"></slot>
+            </div>
           </div>
         </div>
+        <div class="submit-button-container">
+          <slot name="submit"></slot>
+        </div>
       </div>
     `;
   }
@@ -316,6 +321,27 @@ export class PfSearchInput extends LitElement {
       this.dispatchEvent(new PfSearchChangeEvent());
     }
   }
+
+  #onSubmit(event: MouseEvent | KeyboardEvent) {
+    const path = event.composedPath();
+    const slottedSearchButton = path.find(el =>
+      el instanceof HTMLElement
+      && el.tagName === 'PF-BUTTON'
+      && el.getAttribute('data-action') === 'search'
+    );
+
+    if (slottedSearchButton && this._toggleInput?.value) {
+      this.value = this._toggleInput?.value;
+      this.#internals.setFormValue(this.value ?? '');
+      this.dispatchEvent(new PfSearchChangeEvent());
+    }
+  }
+
+  #handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      this.#onSubmit(e);
+    }
+  }
 }
 
 declare global {

From f9198e57a41e9abfb2374f7a705c4600899da586 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Sat, 12 Jul 2025 00:19:35 +0530
Subject: [PATCH 44/85] chore: code cleanup

---
 .../demo/pf-search-input-with-submit.html     |   8 +-
 .../pf-search-input/demo/pf-search-input.html |  11 +-
 elements/pf-search-input/pf-search-input.css  | 216 +++++++++---------
 elements/pf-search-input/pf-search-input.ts   |   6 +-
 4 files changed, 123 insertions(+), 118 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input-with-submit.html b/elements/pf-search-input/demo/pf-search-input-with-submit.html
index d35cb11ea1..bad39ab083 100644
--- a/elements/pf-search-input/demo/pf-search-input-with-submit.html
+++ b/elements/pf-search-input/demo/pf-search-input-with-submit.html
@@ -10,7 +10,7 @@ <h1>Search with autocomplete</h1>
     <pf-option value="Alabama1"> Alabama 1 </pf-option>
     <pf-option value="New Jersey1"> New Jersey 1 </pf-option>
     <pf-option value="New York1"> New York 1 </pf-option>
-    <pf-option value="New Mexico1"> New Mexico  1</pf-option>
+    <pf-option value="New Mexico1"> New Mexico 1</pf-option>
     <pf-option value="North Carolina1"> North Carolina 1</pf-option>
     <pf-option value="Alabama2"> Alabama 2 </pf-option>
     <pf-option value="New Jersey2"> New Jersey 2 </pf-option>
@@ -39,7 +39,7 @@ <h1>Search with autocomplete</h1>
 </script>
 
 <style>
-.container{
-  padding: 40px;
-}
+  .container {
+    padding: 40px;
+  }
 </style>
\ No newline at end of file
diff --git a/elements/pf-search-input/demo/pf-search-input.html b/elements/pf-search-input/demo/pf-search-input.html
index 034e1e9221..f8842937ab 100644
--- a/elements/pf-search-input/demo/pf-search-input.html
+++ b/elements/pf-search-input/demo/pf-search-input.html
@@ -9,7 +9,7 @@ <h1>Search with autocomplete</h1>
     <pf-option value="Alabama1"> Alabama 1 </pf-option>
     <pf-option value="New Jersey1"> New Jersey 1 </pf-option>
     <pf-option value="New York1"> New York 1 </pf-option>
-    <pf-option value="New Mexico1"> New Mexico  1</pf-option>
+    <pf-option value="New Mexico1"> New Mexico 1</pf-option>
     <pf-option value="North Carolina1"> North Carolina 1</pf-option>
     <pf-option value="Alabama2"> Alabama 2 </pf-option>
     <pf-option value="New Jersey2"> New Jersey 2 </pf-option>
@@ -38,8 +38,7 @@ <h1>Search with autocomplete</h1>
 </script>
 
 <style>
-.container{
-  padding: 40px;
-}
-</style>
-
+  .container {
+    padding: 40px;
+  }
+</style>
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index f6544525c7..a6c6a6c770 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -1,10 +1,10 @@
 :host {
-  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);
+	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);
 	color: var(--pf-global--Color--100, #151515);
-  --_pf-option-checkboxes-display: none;
-  --_pf-option-svg-display: block;
+	--_pf-option-checkboxes-display: none;
+	--_pf-option-svg-display: block;
 	--pf-c-search-input__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
 	--pf-c-search-input__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
 	--pf-c-search-input__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
@@ -153,107 +153,110 @@
 	--pf-c-search-input-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);
 }
 
-:host, #outer {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
+:host,
+#outer {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
 	width: fit-content;
 }
 
 :host([hidden]),
 *[hidden] {
-  display: none !important;
+	display: none !important;
 }
 
 :host([disabled]) {
-  pointer-events: none !important;
+	pointer-events: none !important;
 }
 
 #outer.disabled {
-  color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+	color: var(--pf-global--Color--dark-200, #6a6e73) !important;
 }
 
 #outer {
-  position: relative;
+	position: relative;
 }
 
 #listbox-container {
-  display: inline-flex;
-  position: absolute;
-  background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
-  opacity: 0;
-  --_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+	display: inline-flex;
+	position: absolute;
+	background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
+	opacity: 0;
+	--_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
 	box-shadow: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06);
 }
 
 #outer.expanded #listbox-container {
-  opacity: 1;
-  z-index: 9999 !important;
+	opacity: 1;
+	z-index: 9999 !important;
 	max-height: 220px;
 	overflow: hidden;
 }
 
 #listbox {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	width: 100%;
 }
 
 #listbox slot.disabled {
-  color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
-  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
-  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
-  pointer-events: none;
-  cursor: not-allowed;;
-  --_active-descendant-color: transparent;
-  --_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
+	color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
+	background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+	border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+	pointer-events: none;
+	cursor: not-allowed;
+	;
+	--_active-descendant-color: transparent;
+	--_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
 }
 
 #toggle {
-  background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
+	background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
 }
 
 #toggle,
 #toggle-input {
-  display: flex;
-  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);
-  line-height: 1.6;
+	display: flex;
+	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);
+	line-height: 1.6;
 }
 
 #toggle {
-  border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
-  border-bottom-color: var(--pf-theme--color--text, #151515);
-  justify-content: space-between;
+	border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
+	border-bottom-color: var(--pf-theme--color--text, #151515);
+	justify-content: space-between;
 }
 
 .disabled #toggle {
-  color: var(--pf-global--Color--dark-200, #6a6e73) !important;
-  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
-  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+	color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+	background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+	border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
 }
 
 
 /* #toggle-button, */
 #toggle-input {
-  background: transparent;
-  border: none;
-  text-align: left;
-  border-radius: 0;
-	padding-left: 3rem; /*Change it to variable*/
+	background: transparent;
+	border: none;
+	text-align: left;
+	border-radius: 0;
+	padding-left: 3rem;
+	/*Change it to variable*/
 }
 
 #toggle-input {
-  justify-content: space-between;
+	justify-content: space-between;
 	min-width: calc(100% - 33px);
 	box-sizing: border-box;
 	height: 2.25rem;
 }
 
 .disabled #toggle-input {
-  pointer-events: none;
+	pointer-events: none;
 }
 
 #close-button {
@@ -262,8 +265,8 @@
 	--pf-c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
 	--pf-c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
 
-  color: currentColor;
-  background-color: transparent;
+	color: currentColor;
+	background-color: transparent;
 	max-height: 2.25rem;
 	max-width: 2.25rem;
 	box-sizing: border-box;
@@ -279,98 +282,101 @@
 	}
 }
 
-.close-button-container{
+.close-button-container {
 	height: 2.25rem;
 	width: 2.25rem;
 }
 
 #toggle-text {
-  flex: 1 1 auto;
+	flex: 1 1 auto;
 }
 
 
 #description {
-  display: block;
+	display: block;
 }
 
 #listbox.checkboxes {
-  --_pf-option-checkboxes-display: none;
-  --_pf-option-svg-display: none;
+	--_pf-option-checkboxes-display: none;
+	--_pf-option-svg-display: none;
 }
 
 .visually-hidden {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  block-size: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  inline-size: 1px;
+	border: 0;
+	clip: rect(0, 0, 0, 0);
+	block-size: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	white-space: nowrap;
+	inline-size: 1px;
 }
 
 ::slotted(hr) {
-  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
-  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
-  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
-  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);
-  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
-  --pf-c-divider--after--FlexBasis: 100%;
-  --pf-c-divider--after--Inset: 0%;
-  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
-  --pf-c-divider--m-horizontal--Display: flex;
-  --pf-c-divider--m-horizontal--FlexDirection: row;
-  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
-  --pf-c-divider--m-horizontal--after--Width: auto;
-  --pf-c-divider--m-vertical--Display: inline-flex;
-  --pf-c-divider--m-vertical--FlexDirection: column;
-  --pf-c-divider--m-vertical--after--Height: auto;
-  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
-  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
-  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
-  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
-  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
-  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
-  display: var(--pf-c-divider--Display, flex);
+	--pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
+	--pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
+	--pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	--pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
+	--pf-c-divider--after--FlexBasis: 100%;
+	--pf-c-divider--after--Inset: 0%;
+	--pf-c-divider--m-vertical--after--FlexBasis: 100%;
+	--pf-c-divider--m-horizontal--Display: flex;
+	--pf-c-divider--m-horizontal--FlexDirection: row;
+	--pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
+	--pf-c-divider--m-horizontal--after--Width: auto;
+	--pf-c-divider--m-vertical--Display: inline-flex;
+	--pf-c-divider--m-vertical--FlexDirection: column;
+	--pf-c-divider--m-vertical--after--Height: auto;
+	--pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
+	--pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
+	--pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+	--pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+	--pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+	--pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+	display: var(--pf-c-divider--Display, flex);
 	flex-direction: var(--pf-c-divider--FlexDirection);
 	border: 0;
-  width: 100%;
-  margin-top: var(--pf-c-search-input-menu--c-divider--MarginTop);
-  margin-bottom: var(--pf-c-search-input-menu--c-divider--MarginBottom);
+	width: 100%;
+	margin-top: var(--pf-c-search-input-menu--c-divider--MarginTop);
+	margin-bottom: var(--pf-c-search-input-menu--c-divider--MarginBottom);
 }
 
 ::slotted(hr)::after {
-  content: '';
-  width: var(--pf-c-divider--after--Width, 100%) !important;
-  height: var(--pf-c-divider--after--Height, 1px);
-  background-color: var(--pf-c-divider--after--BackgroundColor);
-  flex: 1 0 100%;
+	content: '';
+	width: var(--pf-c-divider--after--Width, 100%) !important;
+	height: var(--pf-c-divider--after--Height, 1px);
+	background-color: var(--pf-c-divider--after--BackgroundColor);
+	flex: 1 0 100%;
 }
 
 div.search-icon {
 	position: absolute;
-  top: 50%;
-  left: var(--pf-global--spacer--md, 1rem);
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
+	top: 50%;
+	left: var(--pf-global--spacer--md, 1rem);
+	transform: translateY(-50%);
+	display: flex;
+	align-items: center;
 }
 
 #outer:focus-within {
 	#toggle {
 		border-bottom: none;
 		border-bottom-left-radius: 4px;
+
 		#toggle-input {
-			border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc); 
+			border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc);
 		}
 	}
+
 	.close-button-container {
 		position: relative;
-		&::after{
+
+		&::after {
 			content: '';
 			width: 2.25rem;
-			height:  var(--pf-global--spacer--xs, 0.125rem);
+			height: var(--pf-global--spacer--xs, 0.125rem);
 			bottom: 0px;
 			left: -3px;
 			background-color: var(--pf-theme--color--accent, #0066cc);
@@ -406,5 +412,5 @@ pf-text-input {
 .submit-button-container {
 	position: absolute;
 	top: 0;
-  right: -100px;
+	right: -100px;
 }
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 9114a7e607..032f6a3f06 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -94,9 +94,9 @@ export class PfSearchInput extends LitElement {
   #combobox = ComboboxController.of(this, {
     getItems: () => this.options,
     getFallbackLabel: () => this.accessibleLabel
-                         || this.#internals.computedLabelText
-                         || this.placeholder
-                         || this.#slots.getSlotted('placeholder').map(x => x.textContent).join(''),
+      || this.#internals.computedLabelText
+      || this.placeholder
+      || this.#slots.getSlotted('placeholder').map(x => x.textContent).join(''),
     getListboxElement: () => this._listbox ?? null,
     getToggleButton: () => this._toggleButton ?? null,
     getComboboxInput: () => this._toggleInput ?? null,

From fc1bcbaa678d33f0c42f0de8e241457de8fa75f9 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 14 Jul 2025 18:23:14 +0530
Subject: [PATCH 45/85] chore: submit button function updated

---
 elements/pf-search-input/pf-search-input.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 032f6a3f06..20711afbe2 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -172,8 +172,7 @@ export class PfSearchInput extends LitElement {
     const hideLightDomItems = !ComboboxController.supportsCrossRootActiveDescendant;
 
     return html`
-      <div class="search-input-container" @click=${this.#onSubmit} 
-        @keydown=${this.#handleKeyDown}>
+      <div class="search-input-container">
         <div 
           id="outer"
           style="${styleMap(styles)}"
@@ -215,7 +214,8 @@ export class PfSearchInput extends LitElement {
             </div>
           </div>
         </div>
-        <div class="submit-button-container">
+        <div @click=${this.#onSubmit} @keydown=${this.#handleKeyDown} 
+          class="submit-button-container">
           <slot name="submit"></slot>
         </div>
       </div>

From 83faa650c1f960486db7a141be0a9a21a938ae22 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 15 Jul 2025 17:35:39 +0530
Subject: [PATCH 46/85] chore: search input with submit button variant added

---
 .../demo/pf-search-input-with-submit.html     |  70 ++++++-----
 elements/pf-search-input/pf-search-input.css  |  25 ----
 elements/pf-search-input/pf-search-input.ts   | 110 +++++++-----------
 3 files changed, 86 insertions(+), 119 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input-with-submit.html b/elements/pf-search-input/demo/pf-search-input-with-submit.html
index bad39ab083..3e9d7ce954 100644
--- a/elements/pf-search-input/demo/pf-search-input-with-submit.html
+++ b/elements/pf-search-input/demo/pf-search-input-with-submit.html
@@ -1,29 +1,32 @@
-<div class="container">
+<form class="container">
   <h1>Search with autocomplete</h1>
-  <pf-search-input variant="advanced" id="search-input" placeholder="Search">
-    <pf-button slot="submit" data-action="search"> Search</pf-button>
-    <pf-option value="Alabama"> Alabama </pf-option>
-    <pf-option value="New Jersey"> New Jersey </pf-option>
-    <pf-option value="New York"> New York </pf-option>
-    <pf-option value="New Mexico"> New Mexico </pf-option>
-    <pf-option value="North Carolina"> North Carolina </pf-option>
-    <pf-option value="Alabama1"> Alabama 1 </pf-option>
-    <pf-option value="New Jersey1"> New Jersey 1 </pf-option>
-    <pf-option value="New York1"> New York 1 </pf-option>
-    <pf-option value="New Mexico1"> New Mexico 1</pf-option>
-    <pf-option value="North Carolina1"> North Carolina 1</pf-option>
-    <pf-option value="Alabama2"> Alabama 2 </pf-option>
-    <pf-option value="New Jersey2"> New Jersey 2 </pf-option>
-    <pf-option value="New York2"> New York 2 </pf-option>
-    <pf-option value="New Mexico2"> New Mexico 2 </pf-option>
-    <pf-option value="North Carolina2"> North Carolina 2 </pf-option>
-    <pf-option value="Alabama3"> Alabama 3 </pf-option>
-    <pf-option value="New Jersey3"> New Jersey 3 </pf-option>
-    <pf-option value="New York3"> New York 3 </pf-option>
-    <pf-option value="New Mexico3"> New Mexico 3 </pf-option>
-    <pf-option value="North Carolina3"> North Carolina 3 </pf-option>
-  </pf-search-input>
-</div>
+  <div class="search-input-container">
+    <pf-search-input id="search-input" name="search" placeholder="Search">
+      <pf-option value="Alabama"> Alabama </pf-option>
+      <pf-option value="New Jersey"> New Jersey </pf-option>
+      <pf-option value="New York"> New York </pf-option>
+      <pf-option value="New Mexico"> New Mexico </pf-option>
+      <pf-option value="North Carolina"> North Carolina </pf-option>
+      <pf-option value="Alabama1"> Alabama 1 </pf-option>
+      <pf-option value="New Jersey1"> New Jersey 1 </pf-option>
+      <pf-option value="New York1"> New York 1 </pf-option>
+      <pf-option value="New Mexico1"> New Mexico 1</pf-option>
+      <pf-option value="North Carolina1"> North Carolina 1</pf-option>
+      <pf-option value="Alabama2"> Alabama 2 </pf-option>
+      <pf-option value="New Jersey2"> New Jersey 2 </pf-option>
+      <pf-option value="New York2"> New York 2 </pf-option>
+      <pf-option value="New Mexico2"> New Mexico 2 </pf-option>
+      <pf-option value="North Carolina2"> North Carolina 2 </pf-option>
+      <pf-option value="Alabama3"> Alabama 3 </pf-option>
+      <pf-option value="New Jersey3"> New Jersey 3 </pf-option>
+      <pf-option value="New York3"> New York 3 </pf-option>
+      <pf-option value="New Mexico3"> New Mexico 3 </pf-option>
+      <pf-option value="North Carolina3"> North Carolina 3 </pf-option>
+    </pf-search-input>
+    <pf-button> Search</pf-button>
+  </div>
+</form>
+
 
 <script type="module">
   import '@patternfly/elements/pf-search-input/pf-search-input.js';
@@ -35,11 +38,26 @@ <h1>Search with autocomplete</h1>
     console.log('Selected:', event.target.value);
     /* eslint-disable no-console */
   });
-</script
+
+  const form = document.querySelector('form.container');
+  form.addEventListener('submit', (event) =>{
+    event.preventDefault();
+    /* eslint-disable no-console */
+    console.log("Value:", form.elements.search?.value);
+    /* eslint-disable no-console */
+  })
 </script>
 
 <style>
   .container {
     padding: 40px;
+    .search-input-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      #search-input {
+        margin-right: 1rem;
+      }
+    }
   }
 </style>
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index a6c6a6c770..631dfe29e5 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -388,29 +388,4 @@ div.search-icon {
 ::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;
-}
-
-.search-input-container {
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-	position: relative;
-}
-
-.submit-button-container {
-	position: absolute;
-	top: 0;
-	right: -100px;
 }
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 20711afbe2..603b3a67ec 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -17,7 +17,6 @@ import { arraysAreEquivalent } from '@patternfly/pfe-core/functions/arraysAreEqu
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 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 {
@@ -83,8 +82,6 @@ export class PfSearchInput extends LitElement {
 
   @query('#outer') private _searchInputContainer!: HTMLElement;
 
-  // #isNotPlaceholderOption = (option: PfOption) => option !== this._placeholder;
-
   #internals = InternalsController.of(this);
 
   #float = new FloatingDOMController(this, { content: () => this._listboxContainer });
@@ -172,51 +169,46 @@ export class PfSearchInput extends LitElement {
     const hideLightDomItems = !ComboboxController.supportsCrossRootActiveDescendant;
 
     return html`
-      <div class="search-input-container">
-        <div 
-          id="outer"
-          style="${styleMap(styles)}"
-          class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}"
-        >
-          <div id="toggle">
-            <div class="search-icon">
-              <pf-icon size="md" icon="search" set="fas">search</pf-icon>
-            </div>
-            <input 
-              id="toggle-input"
-              ?disabled="${disabled}"
-              @keydown=${this.#onSearchInput}
-              placeholder="${placeholder}">
-            <div class="close-button-container">
-              <pf-button 
-                @click="${this.#OnClose}" 
-                ?hidden="${this.#hideCloseButton()}" 
-                id="close-button"  
-                plain 
-                label="Close"
-                >
-                <pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
-              </pf-button>
-            </div>
-            <button aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
+      <div 
+        id="outer"
+        style="${styleMap(styles)}"
+        class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}"
+      >
+        <div id="toggle">
+          <div class="search-icon">
+            <pf-icon size="md" icon="search" set="fas">search</pf-icon>
           </div>
-          <div 
-            id="listbox-container"
-            ?hidden="${!expanded}"
-            style="${styleMap({
-              marginTop: `${height || 0}px`,
-              width: width ? `${width}px` : 'auto',
-            })}"
+          <input 
+            id="toggle-input"
+            ?disabled="${disabled}"
+            @change=${this.#onChange}
+            @keyup=${this.#onSubmit}
+            placeholder="${placeholder}"
           >
-            <div id="listbox">
-              ${this.#combobox.renderItemsToShadowRoot()}
-              <slot ?hidden="${hideLightDomItems}"></slot>
-            </div>
+          <div class="close-button-container">
+            <pf-button 
+              @click="${this.#OnClose}" 
+              ?hidden="${this.#hideCloseButton()}" 
+              id="close-button"  
+              plain 
+              label="Close"
+            >
+              <pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
+            </pf-button>
           </div>
+          <button aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
         </div>
-        <div @click=${this.#onSubmit} @keydown=${this.#handleKeyDown} 
-          class="submit-button-container">
-          <slot name="submit"></slot>
+        <div 
+          id="listbox-container"
+          ?hidden="${!expanded}"
+          style="${styleMap({
+            marginTop: `${height || 0}px`,
+            width: width ? `${width}px` : 'auto',
+            })}">
+          <div id="listbox">
+            ${this.#combobox.renderItemsToShadowRoot()}
+            <slot ?hidden="${hideLightDomItems}"></slot>
+          </div>
         </div>
       </div>
     `;
@@ -252,7 +244,6 @@ export class PfSearchInput extends LitElement {
     this.dispatchEvent(new PfSearchChangeEvent());
   }
 
-
   async #doExpand() {
     try {
       await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
@@ -314,34 +305,17 @@ export class PfSearchInput extends LitElement {
     return false;
   }
 
-  #onSearchInput(event: KeyboardEvent) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      this.value = this._toggleInput?.value;
-      this.#internals.setFormValue(this.value ?? '');
-      this.dispatchEvent(new PfSearchChangeEvent());
-    }
+  #onChange(event: Event) {
+    this.value = this._toggleInput?.value;
+    this.#internals.setFormValue(this.value ?? '');
+    this.dispatchEvent(new PfSearchChangeEvent());
   }
 
-  #onSubmit(event: MouseEvent | KeyboardEvent) {
-    const path = event.composedPath();
-    const slottedSearchButton = path.find(el =>
-      el instanceof HTMLElement
-      && el.tagName === 'PF-BUTTON'
-      && el.getAttribute('data-action') === 'search'
-    );
-
-    if (slottedSearchButton && this._toggleInput?.value) {
-      this.value = this._toggleInput?.value;
-      this.#internals.setFormValue(this.value ?? '');
+  #onSubmit(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
       this.dispatchEvent(new PfSearchChangeEvent());
     }
   }
-
-  #handleKeyDown(e: KeyboardEvent) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      this.#onSubmit(e);
-    }
-  }
 }
 
 declare global {

From b00c9ad5f2bee1c178acf0cec2abcbd3de020786 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 15 Jul 2025 21:48:10 +0530
Subject: [PATCH 47/85] chore: display listbox only when input is entered in
 the textbox

---
 elements/pf-search-input/pf-search-input.css |  2 --
 elements/pf-search-input/pf-search-input.ts  | 22 ++++++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 631dfe29e5..1af6dc1ba1 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -190,8 +190,6 @@
 #outer.expanded #listbox-container {
 	opacity: 1;
 	z-index: 9999 !important;
-	max-height: 220px;
-	overflow: hidden;
 }
 
 #listbox {
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 603b3a67ec..28265f3513 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -98,7 +98,7 @@ export class PfSearchInput extends LitElement {
     getToggleButton: () => this._toggleButton ?? null,
     getComboboxInput: () => this._toggleInput ?? null,
     isExpanded: () => this.expanded,
-    requestShowListbox: () => void (this.expanded ||= true),
+    requestShowListbox: () => this.#showListbox(),
     requestHideListbox: () => void (this.expanded &&= false),
     setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden),
     isItem: item => item instanceof PfOption,
@@ -181,7 +181,7 @@ export class PfSearchInput extends LitElement {
           <input 
             id="toggle-input"
             ?disabled="${disabled}"
-            @change=${this.#onChange}
+            @input=${this.#onChange}
             @keyup=${this.#onSubmit}
             placeholder="${placeholder}"
           >
@@ -244,6 +244,13 @@ export class PfSearchInput extends LitElement {
     this.dispatchEvent(new PfSearchChangeEvent());
   }
 
+  @observes('value')
+  private collapseOnEmpty() {
+    if (this.value === '') {
+      this.expanded = false;
+    }
+  }
+
   async #doExpand() {
     try {
       await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
@@ -316,6 +323,17 @@ export class PfSearchInput extends LitElement {
       this.dispatchEvent(new PfSearchChangeEvent());
     }
   }
+
+  #delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  async #showListbox() {
+    await this.#delay(10);
+    if (this.value !== '') {
+      this.expanded ||= true;
+    }
+  }
 }
 
 declare global {

From 7a8ac31ea7cd4b56b167c73fa5408d6c3a7497ac Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Sat, 19 Jul 2025 21:54:01 +0530
Subject: [PATCH 48/85] chore: test cases updated

---
 .../test/pf-search-input.spec.ts              | 218 ++++++++++--------
 1 file changed, 121 insertions(+), 97 deletions(-)

diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index 2780801e7d..65f18028ef 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -75,6 +75,12 @@ describe('<pf-search-input>', function() {
             <pf-option value="1">1</pf-option>
             <pf-option value="2">2</pf-option>
             <pf-option value="3">3</pf-option>
+            <pf-option value="11">11</pf-option>
+            <pf-option value="22">22</pf-option>
+            <pf-option value="33">33</pf-option>
+            <pf-option value="111">111</pf-option>
+            <pf-option value="222">222</pf-option>
+            <pf-option value="333">333</pf-option>
           </pf-search-input>`);
       });
 
@@ -95,7 +101,7 @@ describe('<pf-search-input>', function() {
 
       it('sets aria-setsize="3" and aria-posinset on items', function() {
         element.options.forEach((option, i) => {
-          expect(option).to.have.attr('aria-setsize', '3');
+          expect(option).to.have.attr('aria-setsize', '9');
           expect(option).to.have.attr('aria-posinset', `${i + 1}`);
         });
       });
@@ -103,18 +109,22 @@ describe('<pf-search-input>', function() {
       describe('focus()', function() {
         beforeEach(press('Tab'));
         beforeEach(updateComplete);
+        beforeEach(press('1'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
+
+        it('labels the listbox with the accessible-label attribute', async function() {
+          const snap = await a11ySnapshot();
+          expect(snap).to.axContainQuery({
+            role: 'listbox',
+            name: 'label',
+          });
+        });
+
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
           beforeEach(updateComplete);
 
-          it('labels the listbox with the accessible-label attribute', async function() {
-            const snap = await a11ySnapshot();
-            expect(snap).to.axContainQuery({
-              role: 'listbox',
-              name: 'label',
-            });
-          });
-
           it('focuses on the first item', async function() {
             expect(getActiveOption(element)).to.have.value('1');
           });
@@ -163,13 +173,15 @@ describe('<pf-search-input>', function() {
       describe('focus()', function() {
         beforeEach(press('Tab'));
         beforeEach(updateComplete);
-        describe('ArrowDown', function() {
-          beforeEach(press('ArrowDown'));
-          it('labels the listbox with the label elements', async function() {
-            expect(await a11ySnapshot()).to.axContainQuery({
-              role: 'listbox',
-              name: 'label1label2',
-            });
+        beforeEach(press('1'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
+
+        it('labels the listbox with the label elements', async function() {
+          const snap = await a11ySnapshot();
+          expect(snap).to.axContainQuery({
+            role: 'listbox',
+            name: 'label1label2',
           });
         });
       });
@@ -225,6 +237,9 @@ describe('<pf-search-input>', function() {
       describe('expanding', function() {
         beforeEach(focus);
         beforeEach(press('Enter'));
+        beforeEach(press('1'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
           beforeEach(updateComplete);
@@ -251,9 +266,9 @@ describe('<pf-search-input>', function() {
         element = await createFixture<PfSearchInput>(html`
           <pf-search-input>
             <pf-option value="1">1</pf-option>
-            <pf-option value="2">2</pf-option>
-            <pf-option value="3">3</pf-option>
-            <pf-option value="4">4</pf-option>
+            <pf-option value="12">12</pf-option>
+            <pf-option value="13">13</pf-option>
+            <pf-option value="14">14</pf-option>
             <pf-option value="5">5</pf-option>
             <pf-option value="6">6</pf-option>
             <pf-option value="7">7</pf-option>
@@ -275,13 +290,17 @@ describe('<pf-search-input>', function() {
       describe('click combobox button', function() {
         beforeEach(() => clickElementAtCenter(element));
         beforeEach(updateComplete);
+        beforeEach(press('1'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
 
         it('does not pass aXe audit', async function() {
           await expect(element).to.not.be.accessible();
         });
 
         it('expands the listbox', async function() {
-          expect(await a11ySnapshot()).to.axContainRole('listbox');
+          const snap = await a11ySnapshot();
+          expect(snap).to.axContainRole('listbox');
         });
 
         describe('Tab', function() {
@@ -324,6 +343,9 @@ describe('<pf-search-input>', function() {
         describe('Home', function() {
           beforeEach(press('Home'));
           beforeEach(updateComplete);
+          beforeEach(press('1'));
+          beforeEach(() => aTimeout(300));
+          beforeEach(updateComplete);
 
           it('expands the listbox', async function() {
             expect(await a11ySnapshot()).to.axContainRole('listbox');
@@ -333,6 +355,9 @@ describe('<pf-search-input>', function() {
         describe('End', function() {
           beforeEach(press('End'));
           beforeEach(updateComplete);
+          beforeEach(press('1'));
+          beforeEach(() => aTimeout(300));
+          beforeEach(updateComplete);
 
           it('expands the listbox', async function() {
             expect(await a11ySnapshot()).to.axContainRole('listbox');
@@ -340,6 +365,9 @@ describe('<pf-search-input>', function() {
         });
 
         describe('ArrowDown', function() {
+          beforeEach(press('1'));
+          beforeEach(() => aTimeout(300));
+          beforeEach(updateComplete);
           beforeEach(press('ArrowDown'));
           beforeEach(updateComplete);
 
@@ -353,7 +381,7 @@ describe('<pf-search-input>', function() {
             beforeEach(updateComplete);
 
             it('focuses on option 2', async function() {
-              expect(getActiveOption(element)).to.have.value('2');
+              expect(getActiveOption(element)).to.have.value('12');
             });
 
             describe('ArrowUp', function() {
@@ -368,7 +396,7 @@ describe('<pf-search-input>', function() {
               beforeEach(press('ArrowDown'));
               beforeEach(updateComplete);
               it('focuses on option 3', async function() {
-                expect(getActiveOption(element)).to.have.value('3');
+                expect(getActiveOption(element)).to.have.value('13');
               });
 
               describe('Enter', function() {
@@ -377,14 +405,14 @@ describe('<pf-search-input>', function() {
 
                 it('selects option 3', function() {
                   expect(getSelectedOptionValue(element)).to.deep.equal([
-                    '3',
+                    '13',
                   ]);
                 });
 
                 it('exposes selection to assistive technology', async function() {
                   expect(await a11ySnapshot()).to.axContainQuery({
                     role: 'combobox',
-                    value: '3',
+                    value: '13',
                   });
                 });
 
@@ -426,6 +454,9 @@ describe('<pf-search-input>', function() {
         element = await createFixture<PfSearchInput>(html`
           <pf-search-input >
             <pf-option>Blue</pf-option>
+            <pf-option>Black</pf-option>
+            <pf-option>Brown</pf-option>
+            <pf-option>Bronze</pf-option>
             <pf-option>Green</pf-option>
             <pf-option>Magenta</pf-option>
             <pf-option>Orange</pf-option>
@@ -479,49 +510,69 @@ describe('<pf-search-input>', function() {
         beforeEach(async function() {
           await clickElementAtOffset(element, [10, 10]);
         });
+        describe('\'B\'', function() {
+          beforeEach(press('B'));
+          beforeEach(() => aTimeout(300));
+          beforeEach(updateComplete);
 
-        it('shows the listbox', async function() {
-          expect(element.expanded).to.be.true;
-          expect(await a11ySnapshot()).to.axContainRole('listbox');
-        });
-
-        it('focuses the combobox', async function() {
-          expect(element.expanded).to.be.true;
-          expect(await a11ySnapshot()).to.axContainQuery({
-            focused: true,
-            role: 'combobox',
+          it('shows the listbox', async function() {
+            expect(element.expanded).to.be.true;
+            expect(await a11ySnapshot()).to.axContainRole('listbox');
           });
-        });
 
-        describe('clicking option 1', function() {
-          beforeEach(async function() {
-            await clickItemAtIndex(element, 0);
+          it('focuses the combobox', async function() {
+            expect(element.expanded).to.be.true;
+            expect(await a11ySnapshot()).to.axContainQuery({
+              focused: true,
+              role: 'combobox',
+            });
           });
 
-          it('selects option 1', function() {
-            expect(getSelectedOptionValue(element)).to.deep.equal([
-              'Blue',
-            ]);
-          });
+          describe('clicking option 1', function() {
+            beforeEach(async function() {
+              await clickItemAtIndex(element, 0);
+            });
 
-          it('closes the listbox', async function() {
-            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-          });
-        });
+            it('selects option 1', function() {
+              expect(getSelectedOptionValue(element)).to.deep.equal([
+                'Blue',
+              ]);
+            });
 
-        describe('clicking option 2', function() {
-          beforeEach(async function() {
-            await clickItemAtIndex(element, 1);
+            it('closes the listbox', async function() {
+              expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+            });
           });
 
-          it('selects option 1', function() {
-            expect(getSelectedOptionValue(element)).to.deep.equal([
-              'Green',
-            ]);
+          describe('clicking option 2', function() {
+            beforeEach(async function() {
+              await clickItemAtIndex(element, 1);
+            });
+
+            it('selects option 1', function() {
+              expect(getSelectedOptionValue(element)).to.deep.equal([
+                'Black',
+              ]);
+            });
+
+            it('closes the listbox', async function() {
+              expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+            });
           });
+        });
+      });
 
-          it('closes the listbox', async function() {
-            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+      describe('focus()', function() {
+        beforeEach(press('Tab'));
+        beforeEach(updateComplete);
+        beforeEach(press('r'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
+        describe('"r"', function() {
+          it('only shows options that start with "r" or "R"', async function() {
+            expect(getVisibleOptionValues(element)).to.deep.equal([
+              'Red',
+            ]);
           });
         });
       });
@@ -532,8 +583,10 @@ describe('<pf-search-input>', function() {
 
         describe('"r"', function() {
           beforeEach(press('r'));
+          beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
 
+
           it('only shows options that start with "r" or "R"', async function() {
             expect(getVisibleOptionValues(element)).to.deep.equal([
               'Red',
@@ -563,6 +616,8 @@ describe('<pf-search-input>', function() {
         });
 
         describe('ArrowDown', function() {
+          beforeEach(press('B'));
+          beforeEach(updateComplete);
           beforeEach(press('ArrowDown'));
           beforeEach(updateComplete);
           beforeEach(() => aTimeout(200));
@@ -594,7 +649,7 @@ describe('<pf-search-input>', function() {
             beforeEach(updateComplete);
 
             it('focuses option 2', function() {
-              expect(getActiveOption(element)).to.have.text('Green');
+              expect(getActiveOption(element)).to.have.text('Black');
             });
 
             describe('Enter', function() {
@@ -603,14 +658,14 @@ describe('<pf-search-input>', function() {
 
               it('selects option 2', function() {
                 expect(getSelectedOptionValue(element)).to.deep.equal([
-                  'Green',
+                  'Black',
                 ]);
               });
 
               it('sets typeahead input to second option value', async function() {
                 expect(await a11ySnapshot())
                     .axTreeFocusedNode
-                    .to.have.axProperty('value', 'Green');
+                    .to.have.axProperty('value', 'Black');
               });
 
               it('retains focus on combobox input', async function() {
@@ -620,24 +675,6 @@ describe('<pf-search-input>', function() {
               it('hides the listbox', async function() {
                 expect(await a11ySnapshot()).to.not.axContainRole('listbox');
               });
-
-              describe('focus()', function() {
-                beforeEach(focus);
-                describe('ArrowDown', function() {
-                  beforeEach(press('ArrowDown'));
-                  beforeEach(updateComplete);
-
-                  it('focuses option 2', function() {
-                    expect(getActiveOption(element)).to.have.text('Green');
-                  });
-
-                  it('only shows option 2', function() {
-                    expect(getVisibleOptionValues(element)).to.deep.equal([
-                      'Green',
-                    ]);
-                  });
-                });
-              });
             });
           });
 
@@ -645,8 +682,8 @@ describe('<pf-search-input>', function() {
             beforeEach(press('ArrowUp'));
             beforeEach(updateComplete);
 
-            it('focuses the last item', async function() {
-              expect(getActiveOption(element)).to.have.value('Yellow');
+            it('focuses the last filtered item', async function() {
+              expect(getActiveOption(element)).to.have.value('Bronze');
             });
           });
         });
@@ -675,6 +712,7 @@ describe('<pf-search-input>', function() {
 
         describe('"p"', function() {
           beforeEach(press('p'));
+          beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
 
           it('shows the listbox and maintains focus', async function() {
@@ -697,27 +735,11 @@ describe('<pf-search-input>', function() {
             beforeEach(press('Backspace'));
             beforeEach(updateComplete);
 
-            it('shows the listbox and maintains focus', async function() {
+            it('hides the listbox', async function() {
               expect(await a11ySnapshot())
-                  .to.axContainRole('listbox')
-                  .and.axTreeFocusedNode
-                  .to.have.axRole('combobox')
+                  .to.not.axContainRole('listbox')
                   .and.to.not.have.axProperty('value', 'p');
             });
-
-            it('all options are visible', async function() {
-              expect(getVisibleOptionValues(element)).to.deep.equal([
-                'Blue',
-                'Green',
-                'Magenta',
-                'Orange',
-                'Purple',
-                'Periwinkle',
-                'Pink',
-                'Red',
-                'Yellow',
-              ]);
-            });
           });
 
           describe('"u"', function() {
@@ -754,6 +776,8 @@ describe('<pf-search-input>', function() {
                   beforeEach(press('Backspace'));
                   beforeEach(press('Backspace'));
                   beforeEach(press('Backspace'));
+                  beforeEach(() => aTimeout(300));
+                  beforeEach(updateComplete);
 
                   it('shows the options starting with "P"', function() {
                     expect(getVisibleOptionValues(element)).to.deep.equal([

From 8d27b71aab5519f0f36946b311972488d5c1486a Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Sun, 20 Jul 2025 00:10:37 +0530
Subject: [PATCH 49/85] chore: updated documentation

---
 .../demo/pf-search-input-with-submit.html     |  1 -
 .../pf-search-input/demo/pf-search-input.html |  2 -
 .../pf-search-input/docs/pf-search-input.md   | 36 +++++++-
 elements/pf-search-input/pf-search-input.css  | 83 -------------------
 elements/pf-search-input/pf-search-input.ts   | 78 ++++++++++++++++-
 5 files changed, 109 insertions(+), 91 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input-with-submit.html b/elements/pf-search-input/demo/pf-search-input-with-submit.html
index 3e9d7ce954..4282ef9e0f 100644
--- a/elements/pf-search-input/demo/pf-search-input-with-submit.html
+++ b/elements/pf-search-input/demo/pf-search-input-with-submit.html
@@ -1,5 +1,4 @@
 <form class="container">
-  <h1>Search with autocomplete</h1>
   <div class="search-input-container">
     <pf-search-input id="search-input" name="search" placeholder="Search">
       <pf-option value="Alabama"> Alabama </pf-option>
diff --git a/elements/pf-search-input/demo/pf-search-input.html b/elements/pf-search-input/demo/pf-search-input.html
index f8842937ab..bfc54a1ee2 100644
--- a/elements/pf-search-input/demo/pf-search-input.html
+++ b/elements/pf-search-input/demo/pf-search-input.html
@@ -1,5 +1,4 @@
 <div class="container">
-  <h1>Search with autocomplete</h1>
   <pf-search-input id="search-input" placeholder="Search">
     <pf-option value="Alabama"> Alabama </pf-option>
     <pf-option value="New Jersey"> New Jersey </pf-option>
@@ -34,7 +33,6 @@ <h1>Search with autocomplete</h1>
     console.log('Selected:', event.target.value);
     /* eslint-disable no-console */
   });
-</script
 </script>
 
 <style>
diff --git a/elements/pf-search-input/docs/pf-search-input.md b/elements/pf-search-input/docs/pf-search-input.md
index 1945440caa..54b70fdc71 100644
--- a/elements/pf-search-input/docs/pf-search-input.md
+++ b/elements/pf-search-input/docs/pf-search-input.md
@@ -1,8 +1,40 @@
+{% renderInstallation %} {% endrenderInstallation %}
+
+<script type="module">
+import '@patternfly/elements/pf-search-input/pf-search-input.js';
+</script>
+
 {% renderOverview %}
-  <pf-search-input></pf-search-input>
+  <pf-search-input>
+    <pf-option>Blue</pf-option>
+    <pf-option>Black</pf-option>
+    <pf-option>Brown</pf-option>
+    <pf-option>Bronze</pf-option>
+    <pf-option>Green</pf-option>
+    <pf-option>Magenta</pf-option>
+    <pf-option>Orange</pf-option>
+    <pf-option>Purple</pf-option>
+    <pf-option>Periwinkle</pf-option>
+    <pf-option>Pink</pf-option>
+    <pf-option>Red</pf-option>
+    <pf-option>Yellow</pf-option>
+  </pf-search-input>
 {% endrenderOverview %}
 
-{% band header="Usage" %}{% endband %}
+{% band header="Usage" %}
+
+#### Search Input
+
+{% htmlexample %}
+  {% renderFile "./elements/pf-search-input/demo/pf-search-input.html" %}
+{% endhtmlexample %}
+
+#### Search Input Form
+{% htmlexample %}
+  {% renderFile "./elements/pf-search-input/demo/pf-search-input-with-submit.html" %}
+{% endhtmlexample %}
+
+{% endband %}
 
 {% renderSlots %}{% endrenderSlots %}
 
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 1af6dc1ba1..edf11a81e7 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -61,96 +61,13 @@
 	--pf-c-search-input__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
 	--pf-c-search-input__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
 	--pf-c-search-input__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-search-input__toggle-arrow--MarginLeft: var(--pf-global--spacer--md, 1rem);
-	--pf-c-search-input__toggle-arrow--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
 	--pf-c-search-input--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);
 	--pf-c-search-input--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);
 	--pf-c-search-input__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
 	--pf-c-search-input__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);
 	--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
 	--pf-c-search-input__toggle-button--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-search-input__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
-	--pf-c-search-input__menu--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
-	--pf-c-search-input__menu--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__menu--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));
-	--pf-c-search-input__menu--ZIndex: var(--pf-global--ZIndex--sm, 200);
-	--pf-c-search-input__menu--Width: auto;
-	--pf-c-search-input__menu--MinWidth: 100%;
-	--pf-c-search-input__menu--m-top--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));
 	--pf-c-search-input__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__menu-item--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__menu-item--PaddingRight: var(--pf-global--spacer--md, 1rem);
-	--pf-c-search-input__menu-item--m-selected--PaddingRight: var(--pf-global--spacer--2xl, 3rem);
-	--pf-c-search-input__menu-item--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__menu-item--PaddingLeft: var(--pf-global--spacer--md, 1rem);
-	--pf-c-search-input__menu-item--FontSize: var(--pf-global--FontSize--md, 1rem);
-	--pf-c-search-input__menu-item--FontWeight: var(--pf-global--FontWeight--normal, 400);
-	--pf-c-search-input__menu-item--LineHeight: var(--pf-global--LineHeight--md, 1.5);
-	--pf-c-search-input__menu-item--Color: var(--pf-global--Color--dark-100, #151515);
-	--pf-c-search-input__menu-item--disabled--Color: var(--pf-global--Color--dark-200, #6a6e73);
-	--pf-c-search-input__menu-item--Width: 100%;
-	--pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
-	--pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
-	--pf-c-search-input__menu-item--disabled--BackgroundColor: transparent;
-	--pf-c-search-input__menu-item--m-link--Width: auto;
-	--pf-c-search-input__menu-item--m-link--hover--BackgroundColor: transparent;
-	--pf-c-search-input__menu-item--m-link--focus--BackgroundColor: transparent;
-	--pf-c-search-input__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-search-input__menu-item--m-action--hover--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-search-input__menu-item--m-action--focus--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-search-input__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);
-	--pf-c-search-input__menu-item--m-action--Width: auto;
-	--pf-c-search-input__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
-	--pf-c-search-input__menu-item--m-action--hover--BackgroundColor: transparent;
-	--pf-c-search-input__menu-item--m-action--focus--BackgroundColor: transparent;
-	--pf-c-search-input__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-search-input__menu-item--m-favorite-action--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-search-input__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-search-input__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-search-input__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400, #f0ab00);
-	--pf-c-search-input__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500, #c58c00);
-	--pf-c-search-input__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500, #c58c00);
-	--pf-c-search-input__menu-item--m-load--Color: var(--pf-global--link--Color, #06c);
-	--pf-c-search-input__menu-item-icon--Color: var(--pf-global--active-color--100, #06c);
-	--pf-c-search-input__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
-	--pf-c-search-input__menu-item-icon--Right: var(--pf-global--spacer--md, 1rem);
-	--pf-c-search-input__menu-item-icon--Top: 50%;
-	--pf-c-search-input__menu-item-icon--TranslateY: -50%;
-	--pf-c-search-input__menu-item-action-icon--MinHeight: calc(var(--pf-c-search-input__menu-item--FontSize) * var(--pf-c-search-input__menu-item--LineHeight));
-	--pf-c-search-input__menu-item--match--FontWeight: var(--pf-global--FontWeight--bold, 700);
-	--pf-c-search-input__menu-search--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__menu-search--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
-	--pf-c-search-input__menu-search--PaddingBottom: var(--pf-global--spacer--md, 1rem);
-	--pf-c-search-input__menu-search--PaddingLeft: var(--pf-c-search-input__menu-item--PaddingLeft);
-	--pf-c-search-input__menu-group--menu-group--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__menu-group-title--PaddingTop: var(--pf-c-search-input__menu-item--PaddingTop);
-	--pf-c-search-input__menu-group-title--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
-	--pf-c-search-input__menu-group-title--PaddingBottom: var(--pf-c-search-input__menu-item--PaddingBottom);
-	--pf-c-search-input__menu-group-title--PaddingLeft: var(--pf-c-search-input__menu-item--PaddingLeft);
-	--pf-c-search-input__menu-group-title--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
-	--pf-c-search-input__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
-	--pf-c-search-input__menu-group-title--Color: var(--pf-global--Color--dark-200, #6a6e73);
-	--pf-c-search-input__menu-item-count--MarginLeft: var(--pf-global--spacer--md, 1rem);
-	--pf-c-search-input__menu-item-count--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
-	--pf-c-search-input__menu-item-count--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-search-input__menu-item--disabled__menu-item-count--Color: var(--pf-global--Color--dark-200, #6a6e73);
-	--pf-c-search-input__menu-item-description--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
-	--pf-c-search-input__menu-item-description--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-search-input__menu-item-description--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
-	--pf-c-search-input__menu-item-main--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
-	--pf-c-search-input__menu-item--m-selected__menu-item-main--PaddingRight: var(--pf-c-search-input__menu-item--m-selected--PaddingRight);
-	--pf-c-search-input__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
-	--pf-c-search-input__menu-footer--PaddingTop: var(--pf-global--spacer--md, 1rem);
-	--pf-c-search-input__menu-footer--PaddingRight: var(--pf-global--spacer--md, 1rem);
-	--pf-c-search-input__menu-footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);
-	--pf-c-search-input__menu-footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);
-	--pf-c-search-input__menu-footer--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__menu-footer--MarginBottom: calc(var(--pf-global--spacer--sm, 0.5rem) * -1);
-	--pf-c-search-input-menu--c-divider--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);
 }
 
 :host,
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 28265f3513..35768dfb76 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -26,9 +26,81 @@ export class PfSearchChangeEvent extends Event {
 }
 
 /**
- * Search Input
- * @slot - Place element content here
- */
+ * A search input lets users type in words to find specific items or information.
+ * As they type, it can show matching results to help them quickly find what they are looking for.
+ *
+ * A search input consists of a text field where users can type to find specific content or items.
+ * Unlike selects or dropdowns, which offer predefined options, a search input lets users enter
+ * their own keywords to filter or locate results. It includes a clear (×) button to easily
+ * remove the current input, allowing users to start a new search quickly.
+ * @slot - insert `pf-option` and/or `pf-option-groups` here
+ * @slot placeholder - placeholder text for the select. Overrides the `placeholder` attribute.
+ * @fires open - when the menu toggles open
+ * @fires close - when the menu toggles closed
+ * @cssprop [--pf-c-search-input__toggle--PaddingTop=var(--pf-global--spacer--form-element, 0.375rem)]
+ * @cssprop [--pf-c-search-input__toggle--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
+ * @cssprop [--pf-c-search-input__toggle--PaddingBottom=var(--pf-global--spacer--form-element, 0.375rem)]
+ * @cssprop [--pf-c-search-input__toggle--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
+ * @cssprop [--pf-c-search-input__toggle--MinWidth=var(--pf-global--target-size--MinWidth, 44px)]
+ * @cssprop [--pf-c-search-input__toggle--FontSize=var(--pf-global--FontSize--md, 1rem)]
+ * @cssprop [--pf-c-search-input__toggle--FontWeight=var(--pf-global--FontWeight--normal, 400)]
+ * @cssprop [--pf-c-search-input__toggle--LineHeight=var(--pf-global--LineHeight--md, 1.5)]
+ * @cssprop [--pf-c-search-input__toggle--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]
+ * @cssprop [--pf-c-search-input__toggle--before--BorderTopWidth=var(--pf-global--BorderWidth--sm, 1px)]
+ * @cssprop [--pf-c-search-input__toggle--before--BorderRightWidth=var(--pf-global--BorderWidth--sm, 1px)]
+ * @cssprop [--pf-c-search-input__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]
+ * @cssprop [--pf-c-search-input__toggle--before--BorderLeftWidth=var(--pf-global--BorderWidth--sm, 1px)]
+ * @cssprop [--pf-c-search-input__toggle--before--BorderWidth=initial]
+ * @cssprop [--pf-c-search-input__toggle--before--BorderTopColor=var(--pf-global--BorderColor--300, #f0f0f0)]
+ * @cssprop [--pf-c-search-input__toggle--before--BorderRightColor=var(--pf-global--BorderColor--300, #f0f0f0)]
+ * @cssprop [--pf-c-search-input__toggle--before--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)]
+ * @cssprop [--pf-c-search-input__toggle--before--BorderLeftColor=var(--pf-global--BorderColor--300, #f0f0f0)]
+ * @cssprop [--pf-c-search-input__toggle--Color=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-search-input__toggle--hover--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
+ * @cssprop [--pf-c-search-input__toggle--focus--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
+ * @cssprop [--pf-c-search-input__toggle--focus--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
+ * @cssprop [--pf-c-search-input__toggle--active--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
+ * @cssprop [--pf-c-search-input__toggle--active--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
+ * @cssprop [--pf-c-search-input__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
+ * @cssprop [--pf-c-search-input__toggle--m-expanded--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
+ * @cssprop [--pf-c-search-input__toggle--disabled--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)]
+ * @cssprop [--pf-c-search-input__toggle--m-plain--before--BorderColor=transparent]
+ * @cssprop [--pf-c-search-input__toggle--m-placeholder--Color=transparent]
+ * @cssprop [--pf-c-search-input--m-invalid__toggle--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
+ * @cssprop [--pf-c-search-input--m-invalid__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
+ * @cssprop [--pf-c-search-input--m-invalid__toggle--hover--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
+ * @cssprop [--pf-c-search-input--m-invalid__toggle--focus--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
+ * @cssprop [--pf-c-search-input--m-invalid__toggle--active--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
+ * @cssprop [--pf-c-search-input--m-invalid__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
+ * @cssprop [--pf-c-search-input--m-invalid__toggle-status-icon--Color=var(--pf-global--danger-color--100, #c9190b)]
+ * @cssprop [--pf-c-search-input--m-success__toggle--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
+ * @cssprop [--pf-c-search-input--m-success__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
+ * @cssprop [--pf-c-search-input--m-success__toggle--hover--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
+ * @cssprop [--pf-c-search-input--m-success__toggle--focus--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
+ * @cssprop [--pf-c-search-input--m-success__toggle--active--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
+ * @cssprop [--pf-c-search-input--m-success__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
+ * @cssprop [--pf-c-search-input--m-success__toggle-status-icon--Color=var(--pf-global--success-color--100, #3e8635)]
+ * @cssprop [--pf-c-search-input--m-warning__toggle--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
+ * @cssprop [--pf-c-search-input--m-warning__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
+ * @cssprop [--pf-c-search-input--m-warning__toggle--hover--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
+ * @cssprop [--pf-c-search-input--m-warning__toggle--focus--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
+ * @cssprop [--pf-c-search-input--m-warning__toggle--active--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
+ * @cssprop [--pf-c-search-input--m-warning__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
+ * @cssprop [--pf-c-search-input--m-warning__toggle-status-icon--Color=var(--pf-global--warning-color--100, #f0ab00)]
+ * @cssprop [--pf-c-search-input__toggle-wrapper--not-last-child--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-search-input__toggle-wrapper--MaxWidth=calc(100% - var(--pf-global--spacer--lg, 1.5rem))]
+ * @cssprop [--pf-c-search-input__toggle--m-placeholder__toggle-text--Color=var(--pf-global--Color--dark-200, #6a6e73)]
+ * @cssprop [--pf-c-search-input__toggle-icon--toggle-text--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-search-input__toggle-status-icon--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-search-input__toggle-status-icon--Color=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-search-input--m-plain__toggle-arrow--Color=var(--pf-global--Color--200, #6a6e73)]
+ * @cssprop [--pf-c-search-input--m-plain--hover__toggle-arrow--Color=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-search-input__toggle-clear--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
+ * @cssprop [--pf-c-search-input__toggle-clear--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
+ * @cssprop [--pf-c-search-input__toggle-button--Color=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-search-input__list-item--m-loading--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
+ **/
 @customElement('pf-search-input')
 export class PfSearchInput extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];

From dac2e458e146993f5ecce083f7aff5c19a36f603 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 21 Jul 2025 19:54:00 +0530
Subject: [PATCH 50/85] chore: updated arrow-down functionality

---
 elements/pf-search-input/demo/disabled.html   |  34 +++
 elements/pf-search-input/pf-search-input.css  |  22 +-
 elements/pf-search-input/pf-search-input.ts   |  41 +++-
 .../test/pf-search-input.spec.ts              | 214 ++++++++----------
 4 files changed, 179 insertions(+), 132 deletions(-)
 create mode 100644 elements/pf-search-input/demo/disabled.html

diff --git a/elements/pf-search-input/demo/disabled.html b/elements/pf-search-input/demo/disabled.html
new file mode 100644
index 0000000000..14c47ff293
--- /dev/null
+++ b/elements/pf-search-input/demo/disabled.html
@@ -0,0 +1,34 @@
+<form class="container">
+  <div class="search-input-container">
+    <pf-search-input disabled id="search-input" name="search" placeholder="Search">
+      <pf-option>Blue</pf-option>
+      <pf-option>Green</pf-option>
+      <pf-option>Magenta</pf-option>
+      <pf-option>Orange</pf-option>
+      <pf-option>Purple</pf-option>
+      <pf-option>Periwinkle</pf-option>
+      <pf-option>Pink</pf-option>
+      <pf-option>Red</pf-option>
+      <pf-option>Yellow</pf-option>
+    </pf-search-input>
+    <pf-button> Search</pf-button>
+  </div>
+</form>
+
+<script type="module">
+  import '@patternfly/elements/pf-search-input/pf-search-input.js';
+</script>
+
+<style>
+  .container {
+    padding: 40px;
+    .search-input-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      #search-input {
+        margin-right: 1rem;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index edf11a81e7..c2145a932e 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -68,6 +68,11 @@
 	--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
 	--pf-c-search-input__toggle-button--Color: var(--pf-global--Color--100, #151515);
 	--pf-c-search-input__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+
+	/* --pf-c-search-input__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-search-input__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-search-input__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	--pf-c-search-input__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); */
 }
 
 :host,
@@ -83,8 +88,9 @@
 	display: none !important;
 }
 
-:host([disabled]) {
+:host([aria-disabled="true"]) {
 	pointer-events: none !important;
+	cursor: not-allowed !important;
 }
 
 #outer.disabled {
@@ -107,6 +113,8 @@
 #outer.expanded #listbox-container {
 	opacity: 1;
 	z-index: 9999 !important;
+	max-height: 300px;
+	overflow: hidden;
 }
 
 #listbox {
@@ -122,22 +130,22 @@
 	border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
 	pointer-events: none;
 	cursor: not-allowed;
-	;
+	
 	--_active-descendant-color: transparent;
 	--_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
 }
 
 #toggle {
-	background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
+	background-color: var(--pf-c-search-input__toggle--BackgroundColor, #fff) !important;
 }
 
 #toggle,
 #toggle-input {
 	display: flex;
 	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);
-	line-height: 1.6;
+	font-size: var(--pf-c-search-input__toggle--FontSize, 1rem);
+	font-weight: var(	--pf-c-search-input__toggle--FontWeight, 400);
+	line-height: var(--pf-c-search-input__toggle--LineHeight, 1.5);
 }
 
 #toggle {
@@ -160,7 +168,6 @@
 	text-align: left;
 	border-radius: 0;
 	padding-left: 3rem;
-	/*Change it to variable*/
 }
 
 #toggle-input {
@@ -172,6 +179,7 @@
 
 .disabled #toggle-input {
 	pointer-events: none;
+	cursor: not-allowed;
 }
 
 #close-button {
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 35768dfb76..efbd9938d7 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -174,8 +174,8 @@ export class PfSearchInput extends LitElement {
     requestHideListbox: () => void (this.expanded &&= false),
     setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden),
     isItem: item => item instanceof PfOption,
-    setItemActive: (item, active) => item.active = active,
-    setItemSelected: (item, selected) => item.selected = selected,
+    setItemActive: (item, active) => this.#setItemActive(item, active),
+    setItemSelected: (item, selected) => this.#setItemSelected(item, selected),
   });
 
   static {
@@ -252,9 +252,10 @@ export class PfSearchInput extends LitElement {
           </div>
           <input 
             id="toggle-input"
-            ?disabled="${disabled}"
             @input=${this.#onChange}
             @keyup=${this.#onSubmit}
+            @keydown=${this.#onKeyDown}
+            aria-disabled="${disabled}"
             placeholder="${placeholder}"
           >
           <div class="close-button-container">
@@ -316,13 +317,6 @@ export class PfSearchInput extends LitElement {
     this.dispatchEvent(new PfSearchChangeEvent());
   }
 
-  @observes('value')
-  private collapseOnEmpty() {
-    if (this.value === '') {
-      this.expanded = false;
-    }
-  }
-
   async #doExpand() {
     try {
       await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
@@ -396,16 +390,41 @@ export class PfSearchInput extends LitElement {
     }
   }
 
+  #onKeyDown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+    if (target?.getAttribute('aria-disabled') === 'true') {
+      // Allow Tab and Shift+Tab to move focus
+      if (event.key === 'Tab') {
+        return;
+      }
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   #delay(ms: number): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
 
   async #showListbox() {
     await this.#delay(10);
-    if (this.value !== '') {
+    if (!this.disabled) {
       this.expanded ||= true;
     }
   }
+
+  #setItemSelected(item: PfOption, selected: boolean) {
+    item.selected = selected;
+    this.#setItemActive(item, selected);
+  }
+
+  #setItemActive(item: PfOption, active: boolean) {
+    item.active = active;
+    if (this.expanded) {
+      const activeOption = this.querySelector('pf-option[active]');
+      activeOption?.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });
+    }
+  }
 }
 
 declare global {
diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index 65f18028ef..2c07212add 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -75,12 +75,6 @@ describe('<pf-search-input>', function() {
             <pf-option value="1">1</pf-option>
             <pf-option value="2">2</pf-option>
             <pf-option value="3">3</pf-option>
-            <pf-option value="11">11</pf-option>
-            <pf-option value="22">22</pf-option>
-            <pf-option value="33">33</pf-option>
-            <pf-option value="111">111</pf-option>
-            <pf-option value="222">222</pf-option>
-            <pf-option value="333">333</pf-option>
           </pf-search-input>`);
       });
 
@@ -101,7 +95,7 @@ describe('<pf-search-input>', function() {
 
       it('sets aria-setsize="3" and aria-posinset on items', function() {
         element.options.forEach((option, i) => {
-          expect(option).to.have.attr('aria-setsize', '9');
+          expect(option).to.have.attr('aria-setsize', '3');
           expect(option).to.have.attr('aria-posinset', `${i + 1}`);
         });
       });
@@ -109,22 +103,19 @@ describe('<pf-search-input>', function() {
       describe('focus()', function() {
         beforeEach(press('Tab'));
         beforeEach(updateComplete);
-        beforeEach(press('1'));
-        beforeEach(() => aTimeout(300));
-        beforeEach(updateComplete);
-
-        it('labels the listbox with the accessible-label attribute', async function() {
-          const snap = await a11ySnapshot();
-          expect(snap).to.axContainQuery({
-            role: 'listbox',
-            name: 'label',
-          });
-        });
-
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
+          beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
 
+          it('labels the listbox with the accessible-label attribute', async function() {
+            const snap = await a11ySnapshot();
+            expect(snap).to.axContainQuery({
+              role: 'listbox',
+              name: 'label',
+            });
+          });
+
           it('focuses on the first item', async function() {
             expect(getActiveOption(element)).to.have.value('1');
           });
@@ -173,15 +164,15 @@ describe('<pf-search-input>', function() {
       describe('focus()', function() {
         beforeEach(press('Tab'));
         beforeEach(updateComplete);
-        beforeEach(press('1'));
-        beforeEach(() => aTimeout(300));
-        beforeEach(updateComplete);
-
-        it('labels the listbox with the label elements', async function() {
-          const snap = await a11ySnapshot();
-          expect(snap).to.axContainQuery({
-            role: 'listbox',
-            name: 'label1label2',
+        describe('ArrowDown', function() {
+          beforeEach(press('ArrowDown'));
+          beforeEach(() => aTimeout(300));
+          beforeEach(updateComplete);
+          it('labels the listbox with the label elements', async function() {
+            expect(await a11ySnapshot()).to.axContainQuery({
+              role: 'listbox',
+              name: 'label1label2',
+            });
           });
         });
       });
@@ -237,11 +228,9 @@ describe('<pf-search-input>', function() {
       describe('expanding', function() {
         beforeEach(focus);
         beforeEach(press('Enter'));
-        beforeEach(press('1'));
-        beforeEach(() => aTimeout(300));
-        beforeEach(updateComplete);
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
+          beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
           it('remains expanded', function() {
             expect(element.expanded).to.be.true;
@@ -266,9 +255,9 @@ describe('<pf-search-input>', function() {
         element = await createFixture<PfSearchInput>(html`
           <pf-search-input>
             <pf-option value="1">1</pf-option>
-            <pf-option value="12">12</pf-option>
-            <pf-option value="13">13</pf-option>
-            <pf-option value="14">14</pf-option>
+            <pf-option value="2">2</pf-option>
+            <pf-option value="3">3</pf-option>
+            <pf-option value="4">4</pf-option>
             <pf-option value="5">5</pf-option>
             <pf-option value="6">6</pf-option>
             <pf-option value="7">7</pf-option>
@@ -289,8 +278,6 @@ describe('<pf-search-input>', function() {
 
       describe('click combobox button', function() {
         beforeEach(() => clickElementAtCenter(element));
-        beforeEach(updateComplete);
-        beforeEach(press('1'));
         beforeEach(() => aTimeout(300));
         beforeEach(updateComplete);
 
@@ -299,8 +286,7 @@ describe('<pf-search-input>', function() {
         });
 
         it('expands the listbox', async function() {
-          const snap = await a11ySnapshot();
-          expect(snap).to.axContainRole('listbox');
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
         });
 
         describe('Tab', function() {
@@ -342,8 +328,6 @@ describe('<pf-search-input>', function() {
 
         describe('Home', function() {
           beforeEach(press('Home'));
-          beforeEach(updateComplete);
-          beforeEach(press('1'));
           beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
 
@@ -354,8 +338,6 @@ describe('<pf-search-input>', function() {
 
         describe('End', function() {
           beforeEach(press('End'));
-          beforeEach(updateComplete);
-          beforeEach(press('1'));
           beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
 
@@ -365,10 +347,8 @@ describe('<pf-search-input>', function() {
         });
 
         describe('ArrowDown', function() {
-          beforeEach(press('1'));
-          beforeEach(() => aTimeout(300));
-          beforeEach(updateComplete);
           beforeEach(press('ArrowDown'));
+          beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
 
           it('expands the listbox', async function() {
@@ -381,7 +361,7 @@ describe('<pf-search-input>', function() {
             beforeEach(updateComplete);
 
             it('focuses on option 2', async function() {
-              expect(getActiveOption(element)).to.have.value('12');
+              expect(getActiveOption(element)).to.have.value('2');
             });
 
             describe('ArrowUp', function() {
@@ -396,7 +376,7 @@ describe('<pf-search-input>', function() {
               beforeEach(press('ArrowDown'));
               beforeEach(updateComplete);
               it('focuses on option 3', async function() {
-                expect(getActiveOption(element)).to.have.value('13');
+                expect(getActiveOption(element)).to.have.value('3');
               });
 
               describe('Enter', function() {
@@ -405,14 +385,14 @@ describe('<pf-search-input>', function() {
 
                 it('selects option 3', function() {
                   expect(getSelectedOptionValue(element)).to.deep.equal([
-                    '13',
+                    '3',
                   ]);
                 });
 
                 it('exposes selection to assistive technology', async function() {
                   expect(await a11ySnapshot()).to.axContainQuery({
                     role: 'combobox',
-                    value: '13',
+                    value: '3',
                   });
                 });
 
@@ -454,9 +434,6 @@ describe('<pf-search-input>', function() {
         element = await createFixture<PfSearchInput>(html`
           <pf-search-input >
             <pf-option>Blue</pf-option>
-            <pf-option>Black</pf-option>
-            <pf-option>Brown</pf-option>
-            <pf-option>Bronze</pf-option>
             <pf-option>Green</pf-option>
             <pf-option>Magenta</pf-option>
             <pf-option>Orange</pf-option>
@@ -510,70 +487,50 @@ describe('<pf-search-input>', function() {
         beforeEach(async function() {
           await clickElementAtOffset(element, [10, 10]);
         });
-        describe('\'B\'', function() {
-          beforeEach(press('B'));
-          beforeEach(() => aTimeout(300));
-          beforeEach(updateComplete);
+        beforeEach(() => aTimeout(300));
+        it('shows the listbox', async function() {
+          expect(element.expanded).to.be.true;
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
+        });
 
-          it('shows the listbox', async function() {
-            expect(element.expanded).to.be.true;
-            expect(await a11ySnapshot()).to.axContainRole('listbox');
+        it('focuses the combobox', async function() {
+          expect(element.expanded).to.be.true;
+          expect(await a11ySnapshot()).to.axContainQuery({
+            focused: true,
+            role: 'combobox',
           });
+        });
 
-          it('focuses the combobox', async function() {
-            expect(element.expanded).to.be.true;
-            expect(await a11ySnapshot()).to.axContainQuery({
-              focused: true,
-              role: 'combobox',
-            });
+        describe('clicking option 1', function() {
+          beforeEach(async function() {
+            await clickItemAtIndex(element, 0);
           });
 
-          describe('clicking option 1', function() {
-            beforeEach(async function() {
-              await clickItemAtIndex(element, 0);
-            });
-
-            it('selects option 1', function() {
-              expect(getSelectedOptionValue(element)).to.deep.equal([
-                'Blue',
-              ]);
-            });
-
-            it('closes the listbox', async function() {
-              expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-            });
+          it('selects option 1', function() {
+            expect(getSelectedOptionValue(element)).to.deep.equal([
+              'Blue',
+            ]);
           });
 
-          describe('clicking option 2', function() {
-            beforeEach(async function() {
-              await clickItemAtIndex(element, 1);
-            });
-
-            it('selects option 1', function() {
-              expect(getSelectedOptionValue(element)).to.deep.equal([
-                'Black',
-              ]);
-            });
-
-            it('closes the listbox', async function() {
-              expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-            });
+          it('closes the listbox', async function() {
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
           });
         });
-      });
 
-      describe('focus()', function() {
-        beforeEach(press('Tab'));
-        beforeEach(updateComplete);
-        beforeEach(press('r'));
-        beforeEach(() => aTimeout(300));
-        beforeEach(updateComplete);
-        describe('"r"', function() {
-          it('only shows options that start with "r" or "R"', async function() {
-            expect(getVisibleOptionValues(element)).to.deep.equal([
-              'Red',
+        describe('clicking option 2', function() {
+          beforeEach(async function() {
+            await clickItemAtIndex(element, 1);
+          });
+
+          it('selects option 1', function() {
+            expect(getSelectedOptionValue(element)).to.deep.equal([
+              'Green',
             ]);
           });
+
+          it('closes the listbox', async function() {
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
         });
       });
 
@@ -586,7 +543,6 @@ describe('<pf-search-input>', function() {
           beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
 
-
           it('only shows options that start with "r" or "R"', async function() {
             expect(getVisibleOptionValues(element)).to.deep.equal([
               'Red',
@@ -616,8 +572,6 @@ describe('<pf-search-input>', function() {
         });
 
         describe('ArrowDown', function() {
-          beforeEach(press('B'));
-          beforeEach(updateComplete);
           beforeEach(press('ArrowDown'));
           beforeEach(updateComplete);
           beforeEach(() => aTimeout(200));
@@ -649,7 +603,7 @@ describe('<pf-search-input>', function() {
             beforeEach(updateComplete);
 
             it('focuses option 2', function() {
-              expect(getActiveOption(element)).to.have.text('Black');
+              expect(getActiveOption(element)).to.have.text('Green');
             });
 
             describe('Enter', function() {
@@ -658,14 +612,14 @@ describe('<pf-search-input>', function() {
 
               it('selects option 2', function() {
                 expect(getSelectedOptionValue(element)).to.deep.equal([
-                  'Black',
+                  'Green',
                 ]);
               });
 
               it('sets typeahead input to second option value', async function() {
                 expect(await a11ySnapshot())
                     .axTreeFocusedNode
-                    .to.have.axProperty('value', 'Black');
+                    .to.have.axProperty('value', 'Green');
               });
 
               it('retains focus on combobox input', async function() {
@@ -675,6 +629,21 @@ describe('<pf-search-input>', function() {
               it('hides the listbox', async function() {
                 expect(await a11ySnapshot()).to.not.axContainRole('listbox');
               });
+
+              describe('focus()', function() {
+                beforeEach(focus);
+                describe('ArrowDown', function() {
+                  beforeEach(press('ArrowDown'));
+                  beforeEach(() => aTimeout(300));
+                  beforeEach(updateComplete);
+
+                  it('only shows option 2', function() {
+                    expect(getVisibleOptionValues(element)).to.deep.equal([
+                      'Green',
+                    ]);
+                  });
+                });
+              });
             });
           });
 
@@ -682,8 +651,8 @@ describe('<pf-search-input>', function() {
             beforeEach(press('ArrowUp'));
             beforeEach(updateComplete);
 
-            it('focuses the last filtered item', async function() {
-              expect(getActiveOption(element)).to.have.value('Bronze');
+            it('focuses the last item', async function() {
+              expect(getActiveOption(element)).to.have.value('Yellow');
             });
           });
         });
@@ -735,11 +704,27 @@ describe('<pf-search-input>', function() {
             beforeEach(press('Backspace'));
             beforeEach(updateComplete);
 
-            it('hides the listbox', async function() {
+            it('shows the listbox and maintains focus', async function() {
               expect(await a11ySnapshot())
-                  .to.not.axContainRole('listbox')
+                  .to.axContainRole('listbox')
+                  .and.axTreeFocusedNode
+                  .to.have.axRole('combobox')
                   .and.to.not.have.axProperty('value', 'p');
             });
+
+            it('all options are visible', async function() {
+              expect(getVisibleOptionValues(element)).to.deep.equal([
+                'Blue',
+                'Green',
+                'Magenta',
+                'Orange',
+                'Purple',
+                'Periwinkle',
+                'Pink',
+                'Red',
+                'Yellow',
+              ]);
+            });
           });
 
           describe('"u"', function() {
@@ -762,6 +747,7 @@ describe('<pf-search-input>', function() {
 
               describe('Enter', function() {
                 beforeEach(press('Enter'));
+                beforeEach(() => aTimeout(300));
                 beforeEach(updateComplete);
 
                 it('selects the option "Purple"', function() {

From 0333d28ec5ad24287c978063666bb08e68d0854a Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 22 Jul 2025 14:05:10 +0530
Subject: [PATCH 51/85] chore: updated documentation

---
 .../pf-search-input/docs/pf-search-input.md   | 44 +++++++++++++++++++
 elements/pf-search-input/pf-search-input.css  |  6 +--
 elements/pf-search-input/pf-search-input.ts   | 14 +++++-
 3 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/elements/pf-search-input/docs/pf-search-input.md b/elements/pf-search-input/docs/pf-search-input.md
index 54b70fdc71..e31bbc9203 100644
--- a/elements/pf-search-input/docs/pf-search-input.md
+++ b/elements/pf-search-input/docs/pf-search-input.md
@@ -34,8 +34,52 @@ import '@patternfly/elements/pf-search-input/pf-search-input.js';
   {% renderFile "./elements/pf-search-input/demo/pf-search-input-with-submit.html" %}
 {% endhtmlexample %}
 
+#### Disabled
+{% htmlexample %}
+  {% renderFile "./elements/pf-search-input/demo/disabled.html" %}
+{% endhtmlexample %}
+
 {% endband %}
 
+{% band header="Accessibility" %}
+
+The select uses the [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) recommendations from the WAI ARIA [Authoring Best Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg).
+
+When the dropdown is disabled it follows [WAI ARIA focusability recommendations](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols) for composite widget elements, where dropdown items are still focusable even when the dropdown is disabled.
+
+#### Toggle and typeahead input
+
+When focus is on the toggle, the following keyboard interactions apply:
+
+| Key                    | Function                                                                               |
+| ---------------------- | -------------------------------------------------------------------------------------- |
+| <kbd>Down Arrow</kbd>  | Opens the listbox and moves focus to the first listbox item.                           |
+| <kbd>Tab</kbd>         | Moves focus out of element onto the next focusable item and closes listbox.            |
+| <kbd>Shift + Tab</kbd> | Moves focus out of element onto the previous focusable item and closes listbox.        |
+
+#### Listbox options
+
+Listbox options use the [APG's Roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex) recommendation. When focus is on the listbox, the following keyboard interactions apply:
+
+| Key                    | Function                                                                              |
+| ---------------------- | ------------------------------------------------------------------------------------- |
+| <kbd>Enter</kbd>       | Selects the options and closes the listbox.                                           |
+| <kbd>Space</kbd>       | Selects the options and closes the listbox.                                           |
+| <kbd>Tab</kbd>         | Moves focus out of element onto the next focusable options and closes listbox.        |
+| <kbd>Shift + Tab</kbd> | Moves focus to the toggle button and closes listbox.                                  |
+| <kbd>Up Arrow</kbd>    | Moves focus to the previous option, optionally wrapping from the first to the last.   |
+| <kbd>Down Arrow</kbd>  | Moves focus to the next option, optionally wrapping from the last to the first.       |
+| <kbd>Left Arrow</kbd>  | Moves focus to the previous option, optionally wrapping from the first to the last.   |
+| <kbd>Right Arrow</kbd> | Moves focus to the next option, optionally wrapping from the last to the first.       |
+| <kbd>Home</kbd>        | Moves focus to the first option in the current listbox.                               |
+| <kbd>Escape</kbd>      | Close the listbox that contains focus and return focus to the toggle button.          |
+| <kbd>Any letter</kbd>  | Navigates to the next option that starts with the letter.                             |
+
+{% endband %}
+
+
+
+
 {% renderSlots %}{% endrenderSlots %}
 
 {% renderAttributes %}{% endrenderAttributes %}
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index c2145a932e..874b673a22 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -89,12 +89,12 @@
 }
 
 :host([aria-disabled="true"]) {
-	pointer-events: none !important;
-	cursor: not-allowed !important;
+	pointer-events: none;
+	cursor: not-allowed;
 }
 
 #outer.disabled {
-	color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+	color: var(--pf-global--Color--dark-200, #6a6e73);
 }
 
 #outer {
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index efbd9938d7..35133c05de 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -185,6 +185,11 @@ export class PfSearchInput extends LitElement {
           instance._onOutsideClick(event);
         }
       });
+      document.addEventListener('focusout', () => {
+        for (const instance of PfSearchInput.instances) {
+          instance._onFocusOut();
+        }
+      });
     }
   }
 
@@ -198,7 +203,7 @@ export class PfSearchInput extends LitElement {
     PfSearchInput.instances.delete(this);
   }
 
-  // Function to handle the closing of popover
+  // Function to handle the closing of popover on outside click
   @bound private _onOutsideClick(event: MouseEvent) {
     const path = event.composedPath();
     if (!path.includes(this._searchInputContainer)) {
@@ -208,6 +213,13 @@ export class PfSearchInput extends LitElement {
     }
   }
 
+  // Function to handle the closing of popover on focus out
+  @bound private _onFocusOut() {
+    if (this.expanded) {
+      this.expanded = false;
+    }
+  }
+
   /**
    * Single select option value for single select menus,
    * or array of select option values for multi select.

From 1035574f5711deae78a3fe0ce2e546962c56591c Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 22 Jul 2025 15:53:37 +0530
Subject: [PATCH 52/85] chore: variable added for listbox max-height

---
 .../pf-search-input/docs/pf-search-input.md   | 27 +++++++++----------
 elements/pf-search-input/pf-search-input.css  | 19 +++++--------
 elements/pf-search-input/pf-search-input.ts   |  6 ++---
 3 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/elements/pf-search-input/docs/pf-search-input.md b/elements/pf-search-input/docs/pf-search-input.md
index e31bbc9203..91243248a0 100644
--- a/elements/pf-search-input/docs/pf-search-input.md
+++ b/elements/pf-search-input/docs/pf-search-input.md
@@ -77,17 +77,16 @@ Listbox options use the [APG's Roving tabindex](https://www.w3.org/WAI/ARIA/apg/
 
 {% endband %}
 
-
-
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
+{% renderSlots for="pf-search-input", header="Slots on `pf-search-input`" %}{% endrenderSlots %}
+{% renderAttributes for="pf-search-input", header="Attributes on `pf-search-input`" %}{% endrenderAttributes %}
+{% renderMethods for="pf-search-input", header="Methods on `pf-search-input`" %}{% endrenderMethods %}
+{% renderEvents for="pf-search-input", header="Events on `pf-search-input`" %}{% endrenderEvents %}
+{% renderCssCustomProperties for="pf-search-input", header="CSS Custom Properties on `pf-search-input`" %}{% endrenderCssCustomProperties %}
+{% renderCssParts for="pf-search-input", header="CSS Parts on `pf-search-input`" %}{% endrenderCssParts %}
+
+{% renderSlots for="pf-option", header="Slots on `pf-option`" %}{% endrenderSlots %}
+{% renderAttributes for="pf-option", header="Attributes on `pf-option`" %}{% endrenderAttributes %}
+{% renderMethods for="pf-option", header="Methods on `pf-option`" %}{% endrenderMethods %}
+{% renderEvents for="pf-option", header="Events on `pf-option`" %}{% endrenderEvents %}
+{% renderCssCustomProperties for="pf-option", header="CSS Custom Properties on `pf-option`" %}{% endrenderCssCustomProperties %}
+{% renderCssParts for="pf-option", header="CSS Parts on `pf-option`" %}{% endrenderCssParts %}
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 874b673a22..8206fc494c 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -68,11 +68,7 @@
 	--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
 	--pf-c-search-input__toggle-button--Color: var(--pf-global--Color--100, #151515);
 	--pf-c-search-input__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-
-	/* --pf-c-search-input__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
-	--pf-c-search-input__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
-	--pf-c-search-input__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
-	--pf-c-search-input__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); */
+	--pf-c-search-input__menu-content--MaxHeight: 20rem;
 }
 
 :host,
@@ -80,7 +76,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
-	width: fit-content;
+	width: 100%;
 }
 
 :host([hidden]),
@@ -113,7 +109,7 @@
 #outer.expanded #listbox-container {
 	opacity: 1;
 	z-index: 9999 !important;
-	max-height: 300px;
+	max-height: var(--pf-c-search-input__menu-content--MaxHeight, 20rem);
 	overflow: hidden;
 }
 
@@ -158,10 +154,9 @@
 	color: var(--pf-global--Color--dark-200, #6a6e73) !important;
 	background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
 	border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+	caret-color: transparent;
 }
 
-
-/* #toggle-button, */
 #toggle-input {
 	background: transparent;
 	border: none;
@@ -172,7 +167,7 @@
 
 #toggle-input {
 	justify-content: space-between;
-	min-width: calc(100% - 33px);
+	width: 100%;
 	box-sizing: border-box;
 	height: 2.25rem;
 }
@@ -298,10 +293,10 @@ div.search-icon {
 
 		&::after {
 			content: '';
-			width: 2.25rem;
+			width: 36px;
 			height: var(--pf-global--spacer--xs, 0.125rem);
 			bottom: 0px;
-			left: -3px;
+			left: 0px;
 			background-color: var(--pf-theme--color--accent, #0066cc);
 			position: absolute;
 		}
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 35133c05de..90305047dc 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -100,6 +100,7 @@ export class PfSearchChangeEvent extends Event {
  * @cssprop [--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
  * @cssprop [--pf-c-search-input__toggle-button--Color=var(--pf-global--Color--100, #151515)]
  * @cssprop [--pf-c-search-input__list-item--m-loading--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
+ * @cssprop [--pf-c-search-input__menu-content--MaxHeight=20rem;]
  **/
 @customElement('pf-search-input')
 export class PfSearchInput extends LitElement {
@@ -432,9 +433,8 @@ export class PfSearchInput extends LitElement {
 
   #setItemActive(item: PfOption, active: boolean) {
     item.active = active;
-    if (this.expanded) {
-      const activeOption = this.querySelector('pf-option[active]');
-      activeOption?.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });
+    if (this.expanded && active) {
+      item?.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });
     }
   }
 }

From e085a4d92e9e6f5747952cd389256efde98d9b42 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 22 Jul 2025 16:34:36 +0530
Subject: [PATCH 53/85] chore: updated to css logical properties

---
 elements/pf-search-input/pf-search-input.css | 42 ++++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 8206fc494c..36363aa483 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -76,7 +76,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
-	width: 100%;
+	inline-size: 100%;
 }
 
 :host([hidden]),
@@ -109,15 +109,15 @@
 #outer.expanded #listbox-container {
 	opacity: 1;
 	z-index: 9999 !important;
-	max-height: var(--pf-c-search-input__menu-content--MaxHeight, 20rem);
-	overflow: hidden;
+	max-block-size: var(--pf-c-search-input__menu-content--MaxHeight, 20rem);
+	overflow-y: scroll;
 }
 
 #listbox {
 	display: flex;
 	flex-direction: column;
 	position: relative;
-	width: 100%;
+	inline-size: 100%;
 }
 
 #listbox slot.disabled {
@@ -162,14 +162,14 @@
 	border: none;
 	text-align: left;
 	border-radius: 0;
-	padding-left: 3rem;
+	padding-inline-start: 3rem;
 }
 
 #toggle-input {
 	justify-content: space-between;
-	width: 100%;
+	inline-size: 100%;
 	box-sizing: border-box;
-	height: 2.25rem;
+	block-size: 2.25rem;
 }
 
 .disabled #toggle-input {
@@ -185,8 +185,8 @@
 
 	color: currentColor;
 	background-color: transparent;
-	max-height: 2.25rem;
-	max-width: 2.25rem;
+	max-block-size: 2.25rem;
+	max-inline-size: 2.25rem;
 	box-sizing: border-box;
 	display: flex;
 	align-items: center;
@@ -196,13 +196,13 @@
 
 	pf-icon {
 		position: relative;
-		top: 5px;
+		inset-block-start: 5px;
 	}
 }
 
 .close-button-container {
-	height: 2.25rem;
-	width: 2.25rem;
+	block-size: 2.25rem;
+	inline-size: 2.25rem;
 }
 
 #toggle-text {
@@ -256,23 +256,23 @@
 	display: var(--pf-c-divider--Display, flex);
 	flex-direction: var(--pf-c-divider--FlexDirection);
 	border: 0;
-	width: 100%;
+	inline-size: 100%;
 	margin-top: var(--pf-c-search-input-menu--c-divider--MarginTop);
 	margin-bottom: var(--pf-c-search-input-menu--c-divider--MarginBottom);
 }
 
 ::slotted(hr)::after {
 	content: '';
-	width: var(--pf-c-divider--after--Width, 100%) !important;
-	height: var(--pf-c-divider--after--Height, 1px);
+	inline-size: var(--pf-c-divider--after--Width, 100%) !important;
+	block-size: var(--pf-c-divider--after--Height, 1px);
 	background-color: var(--pf-c-divider--after--BackgroundColor);
 	flex: 1 0 100%;
 }
 
 div.search-icon {
 	position: absolute;
-	top: 50%;
-	left: var(--pf-global--spacer--md, 1rem);
+	inset-block-start: 50%;
+	inset-inline-start: var(--pf-global--spacer--md, 1rem);
 	transform: translateY(-50%);
 	display: flex;
 	align-items: center;
@@ -293,10 +293,10 @@ div.search-icon {
 
 		&::after {
 			content: '';
-			width: 36px;
-			height: var(--pf-global--spacer--xs, 0.125rem);
-			bottom: 0px;
-			left: 0px;
+			inline-size: 36px;
+			block-size: var(--pf-global--spacer--xs, 0.125rem);
+			inset-block-end: 0px;
+			inset-inline-start: 0px;
 			background-color: var(--pf-theme--color--accent, #0066cc);
 			position: absolute;
 		}

From 05ab6121bfd63695f4b52d5c547e95ecc64dc761 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 22 Jul 2025 19:18:09 +0530
Subject: [PATCH 54/85] chore: added negative tab index to prevent focus

---
 elements/pf-search-input/pf-search-input.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 90305047dc..d7fd1d9556 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -287,6 +287,7 @@ export class PfSearchInput extends LitElement {
         <div 
           id="listbox-container"
           ?hidden="${!expanded}"
+          tabindex="-1"
           style="${styleMap({
             marginTop: `${height || 0}px`,
             width: width ? `${width}px` : 'auto',

From 3d60e49d6b1a770590989d40c7107db180548e98 Mon Sep 17 00:00:00 2001
From: Arathy Kumar <49025521+ArathyKumar@users.noreply.github.com>
Date: Wed, 23 Jul 2025 12:09:56 +0530
Subject: [PATCH 55/85] Update elements/pf-search-input/docs/pf-search-input.md

Co-authored-by: Adam Johnson <adam.b.johnson1@gmail.com>
---
 elements/pf-search-input/docs/pf-search-input.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pf-search-input/docs/pf-search-input.md b/elements/pf-search-input/docs/pf-search-input.md
index 91243248a0..dc2fb7ffc4 100644
--- a/elements/pf-search-input/docs/pf-search-input.md
+++ b/elements/pf-search-input/docs/pf-search-input.md
@@ -43,7 +43,7 @@ import '@patternfly/elements/pf-search-input/pf-search-input.js';
 
 {% band header="Accessibility" %}
 
-The select uses the [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) recommendations from the WAI ARIA [Authoring Best Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg).
+The search input uses the [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) recommendations from the WAI ARIA [Authoring Best Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg).
 
 When the dropdown is disabled it follows [WAI ARIA focusability recommendations](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols) for composite widget elements, where dropdown items are still focusable even when the dropdown is disabled.
 

From 71425bbb65912cdce4f44fce6218b89fe54a12d7 Mon Sep 17 00:00:00 2001
From: Arathy Kumar <49025521+ArathyKumar@users.noreply.github.com>
Date: Wed, 23 Jul 2025 12:10:23 +0530
Subject: [PATCH 56/85] Update elements/pf-search-input/pf-search-input.ts

Co-authored-by: Adam Johnson <adam.b.johnson1@gmail.com>
---
 elements/pf-search-input/pf-search-input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index d7fd1d9556..12394fd2d0 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -34,7 +34,7 @@ export class PfSearchChangeEvent extends Event {
  * their own keywords to filter or locate results. It includes a clear (×) button to easily
  * remove the current input, allowing users to start a new search quickly.
  * @slot - insert `pf-option` and/or `pf-option-groups` here
- * @slot placeholder - placeholder text for the select. Overrides the `placeholder` attribute.
+ * @slot placeholder - placeholder text for the search input. Overrides the `placeholder` attribute.
  * @fires open - when the menu toggles open
  * @fires close - when the menu toggles closed
  * @cssprop [--pf-c-search-input__toggle--PaddingTop=var(--pf-global--spacer--form-element, 0.375rem)]

From 008164fe1413f5f7c8a405e87a84b99fa4b93b36 Mon Sep 17 00:00:00 2001
From: Arathy Kumar <49025521+ArathyKumar@users.noreply.github.com>
Date: Wed, 23 Jul 2025 12:10:38 +0530
Subject: [PATCH 57/85] Update elements/pf-search-input/pf-search-input.ts

Co-authored-by: Adam Johnson <adam.b.johnson1@gmail.com>
---
 elements/pf-search-input/pf-search-input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 12394fd2d0..82bd5c60c2 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -113,7 +113,7 @@ export class PfSearchInput extends LitElement {
 
   static instances: Set<PfSearchInput> = new Set<PfSearchInput>();
 
-  /** Accessible label for the select */
+  /** Accessible label for the search input */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
   /** Multi listbox button text */

From 0fc1cd13d145757b4ff9cd534268f77d8657d545 Mon Sep 17 00:00:00 2001
From: Arathy Kumar <49025521+ArathyKumar@users.noreply.github.com>
Date: Wed, 23 Jul 2025 12:10:48 +0530
Subject: [PATCH 58/85] Update elements/pf-search-input/pf-search-input.ts

Co-authored-by: Adam Johnson <adam.b.johnson1@gmail.com>
---
 elements/pf-search-input/pf-search-input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 82bd5c60c2..d9a6b5dca7 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -122,7 +122,7 @@ export class PfSearchInput extends LitElement {
   /** Whether the select is disabled */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /** Whether the select listbox is expanded */
+  /** Whether the search input's listbox is expanded */
   @property({ type: Boolean, reflect: true }) expanded = false;
 
   /**

From 485a8d8f3a126739dbe175756f18862ffc4e3e95 Mon Sep 17 00:00:00 2001
From: Arathy Kumar <49025521+ArathyKumar@users.noreply.github.com>
Date: Wed, 23 Jul 2025 12:10:57 +0530
Subject: [PATCH 59/85] Update elements/pf-search-input/pf-search-input.ts

Co-authored-by: Adam Johnson <adam.b.johnson1@gmail.com>
---
 elements/pf-search-input/pf-search-input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index d9a6b5dca7..738665a9f1 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -119,7 +119,7 @@ export class PfSearchInput extends LitElement {
   /** Multi listbox button text */
   @property({ attribute: 'items-selected-text' }) itemsSelectedText = 'items selected';
 
-  /** Whether the select is disabled */
+  /** Whether the search input is disabled */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   /** Whether the search input's listbox is expanded */

From 4ce4511396c01785cb98f26abafd94996edea700 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Wed, 23 Jul 2025 12:29:43 +0530
Subject: [PATCH 60/85] chore: resolved tab indentation issues

---
 elements/pf-search-input/pf-search-input.css | 445 +++++++++----------
 elements/pf-search-input/pf-search-input.ts  |   2 +-
 2 files changed, 223 insertions(+), 224 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index 36363aa483..e32184d64c 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -1,309 +1,308 @@
 :host {
-	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);
-	color: var(--pf-global--Color--100, #151515);
-	--_pf-option-checkboxes-display: none;
-	--_pf-option-svg-display: block;
-	--pf-c-search-input__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
-	--pf-c-search-input__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
-	--pf-c-search-input__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__toggle--MinWidth: var(--pf-global--target-size--MinWidth, 44px);
-	--pf-c-search-input__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
-	--pf-c-search-input__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
-	--pf-c-search-input__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
-	--pf-c-search-input__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
-	--pf-c-search-input__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
-	--pf-c-search-input__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
-	--pf-c-search-input__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
-	--pf-c-search-input__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
-	--pf-c-search-input__toggle--before--BorderWidth: initial;
-	--pf-c-search-input__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
-	--pf-c-search-input__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
-	--pf-c-search-input__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
-	--pf-c-search-input__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
-	--pf-c-search-input__toggle--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-search-input__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
-	--pf-c-search-input__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
-	--pf-c-search-input__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-search-input__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
-	--pf-c-search-input__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-search-input__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
-	--pf-c-search-input__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-search-input__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
-	--pf-c-search-input__toggle--m-plain--before--BorderColor: transparent;
-	--pf-c-search-input__toggle--m-placeholder--Color: transparent;
-	--pf-c-search-input--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-search-input--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-search-input--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-search-input--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-search-input--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-search-input--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-search-input--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
-	--pf-c-search-input--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-search-input--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-search-input--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-search-input--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-search-input--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-search-input--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-search-input--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100, #3e8635);
-	--pf-c-search-input--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-search-input--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
-	--pf-c-search-input--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-search-input--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-search-input--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-search-input--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-search-input--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
-	--pf-c-search-input__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
-	--pf-c-search-input__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
-	--pf-c-search-input__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200, #6a6e73);
-	--pf-c-search-input__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
-	--pf-c-search-input__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
-	--pf-c-search-input__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-search-input--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);
-	--pf-c-search-input--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-search-input__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);
-	--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__toggle-button--Color: var(--pf-global--Color--100, #151515);
-	--pf-c-search-input__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-search-input__menu-content--MaxHeight: 20rem;
+  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);
+  color: var(--pf-global--Color--100, #151515);
+  --_pf-option-checkboxes-display: none;
+  --_pf-option-svg-display: block;
+  --pf-c-search-input__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+  --pf-c-search-input__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-search-input__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+  --pf-c-search-input__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-search-input__toggle--MinWidth: var(--pf-global--target-size--MinWidth, 44px);
+  --pf-c-search-input__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
+  --pf-c-search-input__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  --pf-c-search-input__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+  --pf-c-search-input__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+  --pf-c-search-input__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-search-input__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-search-input__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-search-input__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-search-input__toggle--before--BorderWidth: initial;
+  --pf-c-search-input__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-search-input__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-search-input__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+  --pf-c-search-input__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-search-input__toggle--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-search-input__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-search-input__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-search-input__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-search-input__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-search-input__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+  --pf-c-search-input__toggle--m-plain--before--BorderColor: transparent;
+  --pf-c-search-input__toggle--m-placeholder--Color: transparent;
+  --pf-c-search-input--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-search-input__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
+  --pf-c-search-input__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200, #6a6e73);
+  --pf-c-search-input__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-search-input__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-search-input__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-search-input--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);
+  --pf-c-search-input--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-search-input__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-search-input__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  --pf-c-search-input__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-search-input__toggle-button--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-search-input__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-search-input__menu-content--MaxHeight: 20rem;
 }
 
 :host,
 #outer {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-	inline-size: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  inline-size: 100%;
 }
 
 :host([hidden]),
 *[hidden] {
-	display: none !important;
+  display: none !important;
 }
 
 :host([aria-disabled="true"]) {
-	pointer-events: none;
-	cursor: not-allowed;
+  pointer-events: none;
+  cursor: not-allowed;
 }
 
 #outer.disabled {
-	color: var(--pf-global--Color--dark-200, #6a6e73);
+  color: var(--pf-global--Color--dark-200, #6a6e73);
 }
 
 #outer {
-	position: relative;
+  position: relative;
 }
 
 #listbox-container {
-	display: inline-flex;
-	position: absolute;
-	background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
-	opacity: 0;
-	--_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
-	box-shadow: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06);
+  display: inline-flex;
+  position: absolute;
+  background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
+  opacity: 0;
+  --_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  box-shadow: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06);
 }
 
 #outer.expanded #listbox-container {
-	opacity: 1;
-	z-index: 9999 !important;
-	max-block-size: var(--pf-c-search-input__menu-content--MaxHeight, 20rem);
-	overflow-y: scroll;
+  opacity: 1;
+  z-index: 9999 !important;
+  max-block-size: var(--pf-c-search-input__menu-content--MaxHeight, 20rem);
+  overflow-y: scroll;
 }
 
 #listbox {
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	inline-size: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  inline-size: 100%;
 }
 
 #listbox slot.disabled {
-	color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
-	background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
-	border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
-	pointer-events: none;
-	cursor: not-allowed;
-	
-	--_active-descendant-color: transparent;
-	--_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
+  color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
+  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  pointer-events: none;
+  cursor: not-allowed;
+  
+  --_active-descendant-color: transparent;
+  --_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
 }
 
 #toggle {
-	background-color: var(--pf-c-search-input__toggle--BackgroundColor, #fff) !important;
+  background-color: var(--pf-c-search-input__toggle--BackgroundColor, #fff) !important;
 }
 
 #toggle,
 #toggle-input {
-	display: flex;
-	font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
-	font-size: var(--pf-c-search-input__toggle--FontSize, 1rem);
-	font-weight: var(	--pf-c-search-input__toggle--FontWeight, 400);
-	line-height: var(--pf-c-search-input__toggle--LineHeight, 1.5);
+  display: flex;
+  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
+  font-size: var(--pf-c-search-input__toggle--FontSize, 1rem);
+  font-weight: var(--pf-c-search-input__toggle--FontWeight, 400);
+  line-height: var(--pf-c-search-input__toggle--LineHeight, 1.5);
 }
 
 #toggle {
-	border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
-	border-bottom-color: var(--pf-theme--color--text, #151515);
-	justify-content: space-between;
+  border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
+  border-bottom-color: var(--pf-theme--color--text, #151515);
+  justify-content: space-between;
 }
 
 .disabled #toggle {
-	color: var(--pf-global--Color--dark-200, #6a6e73) !important;
-	background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
-	border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
-	caret-color: transparent;
+  color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  caret-color: transparent;
 }
 
 #toggle-input {
-	background: transparent;
-	border: none;
-	text-align: left;
-	border-radius: 0;
-	padding-inline-start: 3rem;
+  background: transparent;
+  border: none;
+  text-align: left;
+  border-radius: 0;
+  padding-inline-start: 3rem;
 }
 
 #toggle-input {
-	justify-content: space-between;
-	inline-size: 100%;
-	box-sizing: border-box;
-	block-size: 2.25rem;
+  justify-content: space-between;
+  inline-size: 100%;
+  box-sizing: border-box;
+  block-size: 2.25rem;
 }
 
 .disabled #toggle-input {
-	pointer-events: none;
-	cursor: not-allowed;
+  pointer-events: none;
+  cursor: not-allowed;
 }
 
 #close-button {
-	--pf-c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
-	--pf-c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
-	--pf-c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
-
-	color: currentColor;
-	background-color: transparent;
-	max-block-size: 2.25rem;
-	max-inline-size: 2.25rem;
-	box-sizing: border-box;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 0px;
-	position: relative;
-
-	pf-icon {
-		position: relative;
-		inset-block-start: 5px;
-	}
+  --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+
+  color: currentColor;
+  background-color: transparent;
+  max-block-size: 2.25rem;
+  max-inline-size: 2.25rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0px;
+  position: relative;
+
+  pf-icon {
+    position: relative;
+    inset-block-start: 5px;
+  }
 }
 
 .close-button-container {
-	block-size: 2.25rem;
-	inline-size: 2.25rem;
+  block-size: 2.25rem;
+  inline-size: 2.25rem;
 }
 
 #toggle-text {
-	flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
-
 #description {
-	display: block;
+  display: block;
 }
 
 #listbox.checkboxes {
-	--_pf-option-checkboxes-display: none;
-	--_pf-option-svg-display: none;
+  --_pf-option-checkboxes-display: none;
+  --_pf-option-svg-display: none;
 }
 
 .visually-hidden {
-	border: 0;
-	clip: rect(0, 0, 0, 0);
-	block-size: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	white-space: nowrap;
-	inline-size: 1px;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  block-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
 }
 
 ::slotted(hr) {
-	--pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
-	--pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
-	--pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
-	--pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);
-	--pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
-	--pf-c-divider--after--FlexBasis: 100%;
-	--pf-c-divider--after--Inset: 0%;
-	--pf-c-divider--m-vertical--after--FlexBasis: 100%;
-	--pf-c-divider--m-horizontal--Display: flex;
-	--pf-c-divider--m-horizontal--FlexDirection: row;
-	--pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
-	--pf-c-divider--m-horizontal--after--Width: auto;
-	--pf-c-divider--m-vertical--Display: inline-flex;
-	--pf-c-divider--m-vertical--FlexDirection: column;
-	--pf-c-divider--m-vertical--after--Height: auto;
-	--pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
-	--pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
-	--pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
-	--pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
-	--pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
-	--pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
-	display: var(--pf-c-divider--Display, flex);
-	flex-direction: var(--pf-c-divider--FlexDirection);
-	border: 0;
-	inline-size: 100%;
-	margin-top: var(--pf-c-search-input-menu--c-divider--MarginTop);
-	margin-bottom: var(--pf-c-search-input-menu--c-divider--MarginBottom);
+  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
+  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
+  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
+  --pf-c-divider--after--FlexBasis: 100%;
+  --pf-c-divider--after--Inset: 0%;
+  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
+  --pf-c-divider--m-horizontal--Display: flex;
+  --pf-c-divider--m-horizontal--FlexDirection: row;
+  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
+  --pf-c-divider--m-horizontal--after--Width: auto;
+  --pf-c-divider--m-vertical--Display: inline-flex;
+  --pf-c-divider--m-vertical--FlexDirection: column;
+  --pf-c-divider--m-vertical--after--Height: auto;
+  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
+  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
+  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+  display: var(--pf-c-divider--Display, flex);
+  flex-direction: var(--pf-c-divider--FlexDirection);
+  border: 0;
+  inline-size: 100%;
+  margin-top: var(--pf-c-search-input-menu--c-divider--MarginTop);
+  margin-bottom: var(--pf-c-search-input-menu--c-divider--MarginBottom);
 }
 
 ::slotted(hr)::after {
-	content: '';
-	inline-size: var(--pf-c-divider--after--Width, 100%) !important;
-	block-size: var(--pf-c-divider--after--Height, 1px);
-	background-color: var(--pf-c-divider--after--BackgroundColor);
-	flex: 1 0 100%;
+  content: '';
+  inline-size: var(--pf-c-divider--after--Width, 100%) !important;
+  block-size: var(--pf-c-divider--after--Height, 1px);
+  background-color: var(--pf-c-divider--after--BackgroundColor);
+  flex: 1 0 100%;
 }
 
 div.search-icon {
-	position: absolute;
-	inset-block-start: 50%;
-	inset-inline-start: var(--pf-global--spacer--md, 1rem);
-	transform: translateY(-50%);
-	display: flex;
-	align-items: center;
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--pf-global--spacer--md, 1rem);
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
 }
 
 #outer:focus-within {
-	#toggle {
-		border-bottom: none;
-		border-bottom-left-radius: 4px;
-
-		#toggle-input {
-			border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc);
-		}
-	}
-
-	.close-button-container {
-		position: relative;
-
-		&::after {
-			content: '';
-			inline-size: 36px;
-			block-size: var(--pf-global--spacer--xs, 0.125rem);
-			inset-block-end: 0px;
-			inset-inline-start: 0px;
-			background-color: var(--pf-theme--color--accent, #0066cc);
-			position: absolute;
-		}
-	}
+  #toggle {
+    border-bottom: none;
+    border-bottom-left-radius: 4px;
+
+    #toggle-input {
+      border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc);
+    }
+  }
+
+  .close-button-container {
+    position: relative;
+
+    &::after {
+      content: '';
+      inline-size: 36px;
+      block-size: var(--pf-global--spacer--xs, 0.125rem);
+      inset-block-end: 0px;
+      inset-inline-start: 0px;
+      background-color: var(--pf-theme--color--accent, #0066cc);
+      position: absolute;
+    }
+  }
 }
 
 ::slotted(pf-option[selected]) {
-	--_pf-option-svg-display: none;
-	--_pf-option-selected-background-color: var(--pf-global--BackgroundColor--100, #fff);
+  --_pf-option-svg-display: none;
+  --_pf-option-selected-background-color: var(--pf-global--BackgroundColor--100, #fff);
 }
\ No newline at end of file
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index d7fd1d9556..fa3584eee1 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -33,7 +33,7 @@ export class PfSearchChangeEvent extends Event {
  * Unlike selects or dropdowns, which offer predefined options, a search input lets users enter
  * their own keywords to filter or locate results. It includes a clear (×) button to easily
  * remove the current input, allowing users to start a new search quickly.
- * @slot - insert `pf-option` and/or `pf-option-groups` here
+ * @slot - insert `pf-option` here
  * @slot placeholder - placeholder text for the select. Overrides the `placeholder` attribute.
  * @fires open - when the menu toggles open
  * @fires close - when the menu toggles closed

From 831c66fd1df5cc05b756e80574065a75fbaaf750 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Wed, 23 Jul 2025 14:10:19 +0530
Subject: [PATCH 61/85] chore: documentation update

---
 elements/pf-search-input/docs/pf-search-input.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/elements/pf-search-input/docs/pf-search-input.md b/elements/pf-search-input/docs/pf-search-input.md
index dc2fb7ffc4..a56408d544 100644
--- a/elements/pf-search-input/docs/pf-search-input.md
+++ b/elements/pf-search-input/docs/pf-search-input.md
@@ -69,8 +69,8 @@ Listbox options use the [APG's Roving tabindex](https://www.w3.org/WAI/ARIA/apg/
 | <kbd>Shift + Tab</kbd> | Moves focus to the toggle button and closes listbox.                                  |
 | <kbd>Up Arrow</kbd>    | Moves focus to the previous option, optionally wrapping from the first to the last.   |
 | <kbd>Down Arrow</kbd>  | Moves focus to the next option, optionally wrapping from the last to the first.       |
-| <kbd>Left Arrow</kbd>  | Moves focus to the previous option, optionally wrapping from the first to the last.   |
-| <kbd>Right Arrow</kbd> | Moves focus to the next option, optionally wrapping from the last to the first.       |
+| <kbd>Left Arrow</kbd>  | Returns focus to the combobox without closing the popup and moves the input cursor one character to the left. If the input cursor is on the left-most character, the cursor does not move.   |
+| <kbd>Right Arrow</kbd> | Returns focus to the combobox without closing the popup and moves the input cursor one character to the right. If the input cursor is on the right-most character, the cursor does not move.       |
 | <kbd>Home</kbd>        | Moves focus to the first option in the current listbox.                               |
 | <kbd>Escape</kbd>      | Close the listbox that contains focus and return focus to the toggle button.          |
 | <kbd>Any letter</kbd>  | Navigates to the next option that starts with the letter.                             |

From 9c6b207918707ad3b2683cc911b18ee49e5ef721 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Wed, 23 Jul 2025 18:37:53 +0530
Subject: [PATCH 62/85] chore: set selected option function updated

---
 elements/pf-search-input/pf-search-input.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 84ce0fdd05..254b4f1602 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -222,13 +222,11 @@ export class PfSearchInput extends LitElement {
   }
 
   /**
-   * Single select option value for single select menus,
-   * or array of select option values for multi select.
+   * Set selected option
    */
   @property({ hasChanged: (a, b) => !arraysAreEquivalent(a, b) })
-  set selected(selected: PfOption | PfOption[]) {
-    const list = Array.isArray(selected) ? selected : [selected];
-    this.#combobox.selected = list;
+  set selected(selected: PfOption) {
+    this.#combobox.selected = [selected];
   }
 
   get selected(): PfOption[] {

From fe699bf44090f687d55c6ae273e209c6c559ba13 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Wed, 23 Jul 2025 20:43:44 +0530
Subject: [PATCH 63/85] chore: set focus back to toggle input on clicking close
 button

---
 elements/pf-search-input/pf-search-input.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 254b4f1602..03a3c2b97b 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -381,6 +381,7 @@ export class PfSearchInput extends LitElement {
     this.value = '';
     this._toggleInput!.value = this.value;
     this.#combobox.selected = [];
+    this._toggleInput?.focus();
   }
 
   #hideCloseButton() {

From e343b81452f7f4c2fc33afc7c973afeb5d17a9bb Mon Sep 17 00:00:00 2001
From: Arathy Kumar <49025521+ArathyKumar@users.noreply.github.com>
Date: Wed, 23 Jul 2025 20:59:11 +0530
Subject: [PATCH 64/85] Update elements/pf-search-input/docs/pf-search-input.md

Co-authored-by: Adam Johnson <adam.b.johnson1@gmail.com>
---
 elements/pf-search-input/docs/pf-search-input.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/elements/pf-search-input/docs/pf-search-input.md b/elements/pf-search-input/docs/pf-search-input.md
index a56408d544..0f3abb1518 100644
--- a/elements/pf-search-input/docs/pf-search-input.md
+++ b/elements/pf-search-input/docs/pf-search-input.md
@@ -71,8 +71,7 @@ Listbox options use the [APG's Roving tabindex](https://www.w3.org/WAI/ARIA/apg/
 | <kbd>Down Arrow</kbd>  | Moves focus to the next option, optionally wrapping from the last to the first.       |
 | <kbd>Left Arrow</kbd>  | Returns focus to the combobox without closing the popup and moves the input cursor one character to the left. If the input cursor is on the left-most character, the cursor does not move.   |
 | <kbd>Right Arrow</kbd> | Returns focus to the combobox without closing the popup and moves the input cursor one character to the right. If the input cursor is on the right-most character, the cursor does not move.       |
-| <kbd>Home</kbd>        | Moves focus to the first option in the current listbox.                               |
-| <kbd>Escape</kbd>      | Close the listbox that contains focus and return focus to the toggle button.          |
+| <kbd>Escape</kbd>      | Close the listbox that contains focus and return focus to the input.          |
 | <kbd>Any letter</kbd>  | Navigates to the next option that starts with the letter.                             |
 
 {% endband %}

From 27911f36c876944d77d75382c84a64dd8c8021d0 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 24 Jul 2025 13:07:15 +0530
Subject: [PATCH 65/85] chore: added type button for hidden button

---
 elements/pf-search-input/pf-search-input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 03a3c2b97b..2d2df5fa25 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -280,7 +280,7 @@ export class PfSearchInput extends LitElement {
               <pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
             </pf-button>
           </div>
-          <button aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
+          <button type="button" aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
         </div>
         <div 
           id="listbox-container"

From 60e50c97152d2d25512fb8a0b0c4eff83740aed8 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 24 Jul 2025 17:44:13 +0530
Subject: [PATCH 66/85] docs: changeset

---
 .changeset/famous-parts-add.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 .changeset/famous-parts-add.md

diff --git a/.changeset/famous-parts-add.md b/.changeset/famous-parts-add.md
new file mode 100644
index 0000000000..b60aca0be8
--- /dev/null
+++ b/.changeset/famous-parts-add.md
@@ -0,0 +1,20 @@
+---
+"@patternfly/elements": minor
+---
+
+✨ Added `<pf-search-input>`.
+
+A search input consists of a text field where users can type to find specific content or items. Unlike selects or dropdowns, which offer predefined options, a search input lets users enter their own keywords to filter or locate results. It includes a clear (×) button to easily remove the current input, allowing users to start a new search quickly.
+
+Use this when users need to search freely using their own terms — ideal for large or frequently changing sets of content.
+Do not use when the options are limited and known ahead of time — consider a dropdown or select instead
+
+```html
+<pf-search-input>
+  <pf-option value="Alabama"> Alabama </pf-option>
+  <pf-option value="New Jersey"> New Jersey </pf-option>
+  <pf-option value="New York"> New York </pf-option>
+  <pf-option value="New Mexico"> New Mexico </pf-option>
+  <pf-option value="North Carolina"> North Carolina </pf-option>
+</pf-search-input>
+```
\ No newline at end of file

From f90a262ef96bd0e143488a3c7079247bfe645f78 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Fri, 25 Jul 2025 09:11:42 +0300
Subject: [PATCH 67/85] chore: update cem dependency

---
 package-lock.json | 66 +++++++++++++++++++++++------------------------
 package.json      | 10 +++----
 2 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 22c8a4b1c6..b930cc82d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "@lit/react": "^1.0.5",
         "@octokit/core": "^6.1.2",
         "@patternfly/patternfly": "^4.224.5",
-        "@pwrs/cem": "^0.2.3",
+        "@pwrs/cem": "^0.2.14",
         "@rhds/elements": "^1.4.5",
         "@types/koa__router": "^12.0.4",
         "@types/node": "^22.15.32",
@@ -50,10 +50,10 @@
       "optionalDependencies": {
         "@esbuild/darwin-arm64": "^0.23.1",
         "@esbuild/linux-x64": "^0.23.1",
-        "@pwrs/cem-darwin-arm64": "^0.2.3",
-        "@pwrs/cem-darwin-x64": "^0.2.3",
-        "@pwrs/cem-linux-arm64": "^0.2.3",
-        "@pwrs/cem-linux-x64": "^0.2.3",
+        "@pwrs/cem-darwin-arm64": "^0.2.14",
+        "@pwrs/cem-darwin-x64": "^0.2.14",
+        "@pwrs/cem-linux-arm64": "^0.2.14",
+        "@pwrs/cem-linux-x64": "^0.2.14",
         "@rollup/rollup-darwin-arm64": "^4.21.0"
       }
     },
@@ -2908,9 +2908,9 @@
       }
     },
     "node_modules/@pwrs/cem": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem/-/cem-0.2.3.tgz",
-      "integrity": "sha512-EtPwk5uoJX/FtnjcsGa58Pd2vN42pzEA4rq7xYS+4gOpvrjwUrK/e4uQ1wyBkE79iT721mwpZhCfNvT3jdVMvw==",
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem/-/cem-0.2.14.tgz",
+      "integrity": "sha512-Z7AqS0qGZDsNOrVDkJSozaph/8KPrtMsceqzPacGev6Li1iCgXxOEBQdNStbRe/Z8jHWrMJyj9roTzKsRlZmrA==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -2920,18 +2920,18 @@
         "node": ">=22.0.0"
       },
       "optionalDependencies": {
-        "@pwrs/cem-darwin-arm64": "0.2.3",
-        "@pwrs/cem-darwin-x64": "0.2.3",
-        "@pwrs/cem-linux-arm64": "0.2.3",
-        "@pwrs/cem-linux-x64": "0.2.3",
-        "@pwrs/cem-win32-arm64": "0.2.3",
-        "@pwrs/cem-win32-x64": "0.2.3"
+        "@pwrs/cem-darwin-arm64": "0.2.14",
+        "@pwrs/cem-darwin-x64": "0.2.14",
+        "@pwrs/cem-linux-arm64": "0.2.14",
+        "@pwrs/cem-linux-x64": "0.2.14",
+        "@pwrs/cem-win32-arm64": "0.2.14",
+        "@pwrs/cem-win32-x64": "0.2.14"
       }
     },
     "node_modules/@pwrs/cem-darwin-arm64": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-arm64/-/cem-darwin-arm64-0.2.3.tgz",
-      "integrity": "sha512-vEVtA7ULjFA/ErxEIORkgfi7VKYSeULHO/T+Nsx2tfkkS26UYZgsOMtWidEDPgetoN0/pbT22i+ZMCXI+yOHeg==",
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-arm64/-/cem-darwin-arm64-0.2.14.tgz",
+      "integrity": "sha512-5LSa3AZDJ8hRGBKWWQx1jG9AIX4GiXwnejaSb3m9H4QplEM53gCeOtDVi2tUdrWUaWSa4jkCIqbcBLk0ouZzfw==",
       "cpu": [
         "arm64"
       ],
@@ -2945,9 +2945,9 @@
       }
     },
     "node_modules/@pwrs/cem-darwin-x64": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-x64/-/cem-darwin-x64-0.2.3.tgz",
-      "integrity": "sha512-wOJZwOTCNmcUmzianKNnqBt9sei54gil0G3b8w7yvsupUaxhd4qOazgUxpt/g070drNFQ94YvlYd5CMEnY8iTw==",
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-darwin-x64/-/cem-darwin-x64-0.2.14.tgz",
+      "integrity": "sha512-olyVHNNDZ/yFD/+F1pEp0vVwPyDIKskDSSXMOAjN93FbnrlBjCWKRqV46xvegpXlgu5BpK2zayCWzhIrDc6Kgw==",
       "cpu": [
         "x64"
       ],
@@ -2961,9 +2961,9 @@
       }
     },
     "node_modules/@pwrs/cem-linux-arm64": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-arm64/-/cem-linux-arm64-0.2.3.tgz",
-      "integrity": "sha512-mHAcg2sSemq5WSK888PccSlO17P1dScpLYblzOxZVNpyILsIpmLrV8czqBzGVFvSK4S95QmkTBD9ziXTl1O84A==",
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-arm64/-/cem-linux-arm64-0.2.14.tgz",
+      "integrity": "sha512-+NbvjhZh4D59xeZ1lreHn5CVE2Ik1kbpdCLWJOGh7cxR9G264I15FBExqGuD1GFH9dkkt5H0XlIfYQ15mjN83w==",
       "cpu": [
         "arm64"
       ],
@@ -2977,9 +2977,9 @@
       }
     },
     "node_modules/@pwrs/cem-linux-x64": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-x64/-/cem-linux-x64-0.2.3.tgz",
-      "integrity": "sha512-iKC9ZXvMa8/P1obooT1kvwT2I6MyjU6Vj3K4ZXQ5FnbA+OBZq8S4/Y5ydUeWlHyNpgsu+IwRBsAKWKOz4hBXOw==",
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-linux-x64/-/cem-linux-x64-0.2.14.tgz",
+      "integrity": "sha512-5XDRR+nO7xEuR61AB4vp/4k/NBbH4rvTqGg7wiEpempRK4791zODodkzhQswCcfdEZDqD4c4q7FqtQX06bzOyg==",
       "cpu": [
         "x64"
       ],
@@ -2993,9 +2993,9 @@
       }
     },
     "node_modules/@pwrs/cem-win32-arm64": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-arm64/-/cem-win32-arm64-0.2.3.tgz",
-      "integrity": "sha512-s1eTweuInPZyElmpQActA25cJxlmRY0FO1PfCGVBu+RtbygbiML7jujZnKRDbWssdfa+2cw6I9jnrv4isH9Dag==",
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-arm64/-/cem-win32-arm64-0.2.14.tgz",
+      "integrity": "sha512-t80RdOliVBT/rghUJKxEdDJtMnjRZhOcUFY9ET1DEvCcnpUZbXjnSllw53OcpQY5YXCq0GyhLNGBEgkZ1OpjMQ==",
       "cpu": [
         "arm64"
       ],
@@ -3010,9 +3010,9 @@
       }
     },
     "node_modules/@pwrs/cem-win32-x64": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-x64/-/cem-win32-x64-0.2.3.tgz",
-      "integrity": "sha512-HMHZjbxE51hDB43Gww+2QZvCU1o7ZTJjmdIy7rsAA167vxY5J//F8ElaO7I/fH9JRrzSOyPadkEbX0JHyye/zQ==",
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/@pwrs/cem-win32-x64/-/cem-win32-x64-0.2.14.tgz",
+      "integrity": "sha512-dsL7MWn5JcTFSL1sI3O65ou6VP3cMntUc0pESaR0H1hwp9NpcI+It9cUgkjEZRASEZcglMkfUVrop0mDzinTBg==",
       "cpu": [
         "x64"
       ],
@@ -17398,7 +17398,7 @@
     },
     "tools/pfe-tools": {
       "name": "@patternfly/pfe-tools",
-      "version": "5.0.1",
+      "version": "5.0.3",
       "license": "MIT",
       "devDependencies": {
         "@types/dedent": "^0.7.2",
diff --git a/package.json b/package.json
index 657bc129c3..aeaad72049 100644
--- a/package.json
+++ b/package.json
@@ -290,7 +290,7 @@
     "@lit/react": "^1.0.5",
     "@octokit/core": "^6.1.2",
     "@patternfly/patternfly": "^4.224.5",
-    "@pwrs/cem": "^0.2.3",
+    "@pwrs/cem": "^0.2.14",
     "@rhds/elements": "^1.4.5",
     "@types/koa__router": "^12.0.4",
     "@types/node": "^22.15.32",
@@ -316,10 +316,10 @@
   "optionalDependencies": {
     "@esbuild/darwin-arm64": "^0.23.1",
     "@esbuild/linux-x64": "^0.23.1",
-    "@pwrs/cem-darwin-arm64": "^0.2.3",
-    "@pwrs/cem-darwin-x64": "^0.2.3",
-    "@pwrs/cem-linux-arm64": "^0.2.3",
-    "@pwrs/cem-linux-x64": "^0.2.3",
+    "@pwrs/cem-darwin-arm64": "^0.2.14",
+    "@pwrs/cem-darwin-x64": "^0.2.14",
+    "@pwrs/cem-linux-arm64": "^0.2.14",
+    "@pwrs/cem-linux-x64": "^0.2.14",
     "@rollup/rollup-darwin-arm64": "^4.21.0"
   },
   "workspaces": [

From faf70a4eb08fb4f47bc6938e323ade516d72f7ca Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Fri, 25 Jul 2025 09:11:52 +0300
Subject: [PATCH 68/85] style: formatting, docs

---
 elements/pf-search-input/pf-search-input.ts | 165 ++++++--------------
 1 file changed, 50 insertions(+), 115 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 2d2df5fa25..49064ac607 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -19,6 +19,7 @@ import { PfOption } from '../pf-select/pf-option.js';
 import { bound } from '@patternfly/pfe-core/decorators.js';
 import styles from './pf-search-input.css';
 
+/** Fired when a `<pf-search-input>` element's value changes */
 export class PfSearchChangeEvent extends Event {
   constructor() {
     super('change', { bubbles: true });
@@ -33,79 +34,18 @@ export class PfSearchChangeEvent extends Event {
  * Unlike selects or dropdowns, which offer predefined options, a search input lets users enter
  * their own keywords to filter or locate results. It includes a clear (×) button to easily
  * remove the current input, allowing users to start a new search quickly.
- * @slot - insert `pf-option` here
- * @slot placeholder - placeholder text for the search input. Overrides the `placeholder` attribute.
+ *
+ * @summary Allows users to search through a list for specific search terms
+ *
  * @fires open - when the menu toggles open
  * @fires close - when the menu toggles closed
- * @cssprop [--pf-c-search-input__toggle--PaddingTop=var(--pf-global--spacer--form-element, 0.375rem)]
- * @cssprop [--pf-c-search-input__toggle--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-search-input__toggle--PaddingBottom=var(--pf-global--spacer--form-element, 0.375rem)]
- * @cssprop [--pf-c-search-input__toggle--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-search-input__toggle--MinWidth=var(--pf-global--target-size--MinWidth, 44px)]
- * @cssprop [--pf-c-search-input__toggle--FontSize=var(--pf-global--FontSize--md, 1rem)]
- * @cssprop [--pf-c-search-input__toggle--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-search-input__toggle--LineHeight=var(--pf-global--LineHeight--md, 1.5)]
- * @cssprop [--pf-c-search-input__toggle--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]
- * @cssprop [--pf-c-search-input__toggle--before--BorderTopWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-search-input__toggle--before--BorderRightWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-search-input__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-search-input__toggle--before--BorderLeftWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-search-input__toggle--before--BorderWidth=initial]
- * @cssprop [--pf-c-search-input__toggle--before--BorderTopColor=var(--pf-global--BorderColor--300, #f0f0f0)]
- * @cssprop [--pf-c-search-input__toggle--before--BorderRightColor=var(--pf-global--BorderColor--300, #f0f0f0)]
- * @cssprop [--pf-c-search-input__toggle--before--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)]
- * @cssprop [--pf-c-search-input__toggle--before--BorderLeftColor=var(--pf-global--BorderColor--300, #f0f0f0)]
- * @cssprop [--pf-c-search-input__toggle--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-search-input__toggle--hover--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
- * @cssprop [--pf-c-search-input__toggle--focus--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
- * @cssprop [--pf-c-search-input__toggle--focus--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-search-input__toggle--active--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
- * @cssprop [--pf-c-search-input__toggle--active--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-search-input__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
- * @cssprop [--pf-c-search-input__toggle--m-expanded--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-search-input__toggle--disabled--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)]
- * @cssprop [--pf-c-search-input__toggle--m-plain--before--BorderColor=transparent]
- * @cssprop [--pf-c-search-input__toggle--m-placeholder--Color=transparent]
- * @cssprop [--pf-c-search-input--m-invalid__toggle--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-search-input--m-invalid__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-search-input--m-invalid__toggle--hover--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-search-input--m-invalid__toggle--focus--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-search-input--m-invalid__toggle--active--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-search-input--m-invalid__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-search-input--m-invalid__toggle-status-icon--Color=var(--pf-global--danger-color--100, #c9190b)]
- * @cssprop [--pf-c-search-input--m-success__toggle--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-search-input--m-success__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-search-input--m-success__toggle--hover--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-search-input--m-success__toggle--focus--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-search-input--m-success__toggle--active--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-search-input--m-success__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-search-input--m-success__toggle-status-icon--Color=var(--pf-global--success-color--100, #3e8635)]
- * @cssprop [--pf-c-search-input--m-warning__toggle--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-search-input--m-warning__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
- * @cssprop [--pf-c-search-input--m-warning__toggle--hover--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-search-input--m-warning__toggle--focus--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-search-input--m-warning__toggle--active--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-search-input--m-warning__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-search-input--m-warning__toggle-status-icon--Color=var(--pf-global--warning-color--100, #f0ab00)]
- * @cssprop [--pf-c-search-input__toggle-wrapper--not-last-child--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-search-input__toggle-wrapper--MaxWidth=calc(100% - var(--pf-global--spacer--lg, 1.5rem))]
- * @cssprop [--pf-c-search-input__toggle--m-placeholder__toggle-text--Color=var(--pf-global--Color--dark-200, #6a6e73)]
- * @cssprop [--pf-c-search-input__toggle-icon--toggle-text--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-search-input__toggle-status-icon--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-search-input__toggle-status-icon--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-search-input--m-plain__toggle-arrow--Color=var(--pf-global--Color--200, #6a6e73)]
- * @cssprop [--pf-c-search-input--m-plain--hover__toggle-arrow--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-search-input__toggle-clear--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-search-input__toggle-clear--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-search-input__toggle-button--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-search-input__list-item--m-loading--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-search-input__menu-content--MaxHeight=20rem;]
- **/
+ */
 @customElement('pf-search-input')
 export class PfSearchInput extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];
+
   static readonly formAssociated = true;
+
   static override readonly shadowRootOptions: ShadowRootInit = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
@@ -113,6 +53,21 @@ export class PfSearchInput extends LitElement {
 
   static instances: Set<PfSearchInput> = new Set<PfSearchInput>();
 
+  static {
+    if (!isServer) {
+      document.addEventListener('click', event => {
+        for (const instance of PfSearchInput.instances) {
+          instance._onOutsideClick(event);
+        }
+      });
+      document.addEventListener('focusout', () => {
+        for (const instance of PfSearchInput.instances) {
+          instance._onFocusOut();
+        }
+      });
+    }
+  }
+
   /** Accessible label for the search input */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
@@ -179,21 +134,6 @@ export class PfSearchInput extends LitElement {
     setItemSelected: (item, selected) => this.#setItemSelected(item, selected),
   });
 
-  static {
-    if (!isServer) {
-      document.addEventListener('click', event => {
-        for (const instance of PfSearchInput.instances) {
-          instance._onOutsideClick(event);
-        }
-      });
-      document.addEventListener('focusout', () => {
-        for (const instance of PfSearchInput.instances) {
-          instance._onFocusOut();
-        }
-      });
-    }
-  }
-
   connectedCallback(): void {
     super.connectedCallback();
     PfSearchInput.instances.add(this);
@@ -249,50 +189,45 @@ export class PfSearchInput extends LitElement {
     const { disabled, expanded, placeholder } = this;
     const { anchor = 'bottom', alignment = 'start', styles = {} } = this.#float;
     const { height, width } = this.getBoundingClientRect?.() || {};
-    const hideLightDomItems = !ComboboxController.supportsCrossRootActiveDescendant;
 
     return html`
-      <div 
-        id="outer"
-        style="${styleMap(styles)}"
-        class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}"
-      >
+      <div id="outer"
+           style="${styleMap(styles)}"
+           class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}">
         <div id="toggle">
           <div class="search-icon">
             <pf-icon size="md" icon="search" set="fas">search</pf-icon>
           </div>
-          <input 
-            id="toggle-input"
-            @input=${this.#onChange}
-            @keyup=${this.#onSubmit}
-            @keydown=${this.#onKeyDown}
-            aria-disabled="${disabled}"
-            placeholder="${placeholder}"
-          >
+          <input id="toggle-input"
+                 aria-disabled="${disabled}"
+                 placeholder="${placeholder}"
+                 @input="${this.#onChange}"
+                 @keyup="${this.#onSubmit}"
+                 @keydown="${this.#onKeyDown}">
           <div class="close-button-container">
-            <pf-button 
-              @click="${this.#OnClose}" 
-              ?hidden="${this.#hideCloseButton()}" 
-              id="close-button"  
-              plain 
-              label="Close"
-            >
-              <pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
+            <pf-button id="close-button"
+                       plain
+                       label="Close"
+                       ?hidden="${this.#hideCloseButton()}"
+                       @click="${this.#onClose}">
+              <pf-icon size="md"
+                       icon="close"
+                       set="patternfly">close</pf-icon>
             </pf-button>
           </div>
           <button type="button" aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
         </div>
-        <div 
-          id="listbox-container"
-          ?hidden="${!expanded}"
-          tabindex="-1"
-          style="${styleMap({
-            marginTop: `${height || 0}px`,
-            width: width ? `${width}px` : 'auto',
-            })}">
+        <div id="listbox-container"
+             ?hidden="${!expanded}"
+             tabindex="-1"
+             style="${styleMap({
+               marginTop: `${height || 0}px`,
+               width: width ? `${width}px` : 'auto',
+             })}">
           <div id="listbox">
             ${this.#combobox.renderItemsToShadowRoot()}
-            <slot ?hidden="${hideLightDomItems}"></slot>
+            <!-- insert \`<pf-option>\` and/or \`<pf-option-groups>\` here -->
+            <slot ?hidden="${!ComboboxController.supportsCrossRootActiveDescendant}"></slot>
           </div>
         </div>
       </div>
@@ -374,7 +309,7 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  async #OnClose() {
+  async #onClose() {
     if (this.expanded) {
       await this.hide();
     }
@@ -391,7 +326,7 @@ export class PfSearchInput extends LitElement {
     return false;
   }
 
-  #onChange(event: Event) {
+  #onChange() {
     this.value = this._toggleInput?.value;
     this.#internals.setFormValue(this.value ?? '');
     this.dispatchEvent(new PfSearchChangeEvent());

From 46bfb598e47edf82215ad8b7ce4a9635e8857662 Mon Sep 17 00:00:00 2001
From: Arathy Kumar <49025521+ArathyKumar@users.noreply.github.com>
Date: Fri, 25 Jul 2025 15:58:59 +0530
Subject: [PATCH 69/85] Update elements/pf-search-input/pf-search-input.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
---
 elements/pf-search-input/pf-search-input.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 49064ac607..42f2f1c0cc 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -71,9 +71,6 @@ export class PfSearchInput extends LitElement {
   /** Accessible label for the search input */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
-  /** Multi listbox button text */
-  @property({ attribute: 'items-selected-text' }) itemsSelectedText = 'items selected';
-
   /** Whether the search input is disabled */
   @property({ type: Boolean, reflect: true }) disabled = false;
 

From f2c6d5e159b0d32a050a30718c6832c646cf1352 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Fri, 25 Jul 2025 17:26:12 +0530
Subject: [PATCH 70/85] fix: selected property removed

---
 .../pf-search-input/demo/pf-search-input.html | 40 +++++++++----------
 elements/pf-search-input/pf-search-input.ts   | 28 ++++---------
 2 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/elements/pf-search-input/demo/pf-search-input.html b/elements/pf-search-input/demo/pf-search-input.html
index bfc54a1ee2..9a48121cba 100644
--- a/elements/pf-search-input/demo/pf-search-input.html
+++ b/elements/pf-search-input/demo/pf-search-input.html
@@ -1,25 +1,25 @@
 <div class="container">
   <pf-search-input id="search-input" placeholder="Search">
-    <pf-option value="Alabama"> Alabama </pf-option>
-    <pf-option value="New Jersey"> New Jersey </pf-option>
-    <pf-option value="New York"> New York </pf-option>
-    <pf-option value="New Mexico"> New Mexico </pf-option>
-    <pf-option value="North Carolina"> North Carolina </pf-option>
-    <pf-option value="Alabama1"> Alabama 1 </pf-option>
-    <pf-option value="New Jersey1"> New Jersey 1 </pf-option>
-    <pf-option value="New York1"> New York 1 </pf-option>
-    <pf-option value="New Mexico1"> New Mexico 1</pf-option>
-    <pf-option value="North Carolina1"> North Carolina 1</pf-option>
-    <pf-option value="Alabama2"> Alabama 2 </pf-option>
-    <pf-option value="New Jersey2"> New Jersey 2 </pf-option>
-    <pf-option value="New York2"> New York 2 </pf-option>
-    <pf-option value="New Mexico2"> New Mexico 2 </pf-option>
-    <pf-option value="North Carolina2"> North Carolina 2 </pf-option>
-    <pf-option value="Alabama3"> Alabama 3 </pf-option>
-    <pf-option value="New Jersey3"> New Jersey 3 </pf-option>
-    <pf-option value="New York3"> New York 3 </pf-option>
-    <pf-option value="New Mexico3"> New Mexico 3 </pf-option>
-    <pf-option value="North Carolina3"> North Carolina 3 </pf-option>
+    <pf-option>What is Red Hat Enterprise Linux?</pf-option>
+    <pf-option>How does Red Hat OpenShift work?</pf-option>
+    <pf-option>Why use Red Hat Ansible for automation?</pf-option>
+    <pf-option>Where can Red Hat OpenShift be deployed?</pf-option>
+    <pf-option>When should you use Red Hat Enterprise Linux?</pf-option>
+    <pf-option>What is Red Hat Satellite?</pf-option>
+    <pf-option>How does Red Hat integrate with AWS and other clouds?</pf-option>
+    <pf-option>Why choose Red Hat over other Linux vendors?</pf-option>
+    <pf-option>Where can I learn Red Hat technologies?</pf-option>
+    <pf-option>When does support end for RHEL versions?</pf-option>
+    <pf-option>What are Red Hat certifications?</pf-option>
+    <pf-option>How do you secure a RHEL server?</pf-option>
+    <pf-option>Why use OpenShift instead of vanilla Kubernetes?</pf-option>
+    <pf-option>Where is Red Hat headquartered?</pf-option>
+    <pf-option>When should you use Red Hat CoreOS?</pf-option>
+    <pf-option>What is Red Hat Insights?</pf-option>
+    <pf-option>How do you manage Red Hat subscriptions?</pf-option>
+    <pf-option>Why is RHEL considered enterprise-grade?</pf-option>
+    <pf-option>Where can I download RHEL for testing?</pf-option>
+    <pf-option>When was Red Hat founded?</pf-option>
   </pf-search-input>
 </div>
 
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 42f2f1c0cc..fbb433d1a0 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -158,18 +158,6 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  /**
-   * Set selected option
-   */
-  @property({ hasChanged: (a, b) => !arraysAreEquivalent(a, b) })
-  set selected(selected: PfOption) {
-    this.#combobox.selected = [selected];
-  }
-
-  get selected(): PfOption[] {
-    return this.#combobox.selected;
-  }
-
   /** List of options */
   get options(): PfOption[] {
     if (isServer) {
@@ -247,14 +235,6 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  @observes('selected')
-  private async selectedChanged(_: PfOption[], selected: PfOption[]) {
-    this.value = selected.map(x => x.value).join();
-    await this.updateComplete;
-    this._toggleInput!.value = this.value;
-  }
-
-
   @observes('value')
   private valueChanged() {
     this.#internals.setFormValue(this.value ?? '');
@@ -325,6 +305,9 @@ export class PfSearchInput extends LitElement {
 
   #onChange() {
     this.value = this._toggleInput?.value;
+    if (this.value !== this.#combobox.selected[0]?.value) {
+      this.#combobox.selected = [];
+    }
     this.#internals.setFormValue(this.value ?? '');
     this.dispatchEvent(new PfSearchChangeEvent());
   }
@@ -360,7 +343,10 @@ export class PfSearchInput extends LitElement {
 
   #setItemSelected(item: PfOption, selected: boolean) {
     item.selected = selected;
-    this.#setItemActive(item, selected);
+    if (selected) {
+      this.value = item.value;
+      this._toggleInput!.value = this.value;
+    }
   }
 
   #setItemActive(item: PfOption, active: boolean) {

From dcad921d677830238407dc80a7f4c803e5e1616b Mon Sep 17 00:00:00 2001
From: Arathy Kumar <49025521+ArathyKumar@users.noreply.github.com>
Date: Fri, 25 Jul 2025 17:33:39 +0530
Subject: [PATCH 71/85] Update elements/pf-search-input/pf-search-input.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
---
 elements/pf-search-input/pf-search-input.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index fbb433d1a0..278c92475b 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -330,12 +330,8 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  #delay(ms: number): Promise<void> {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-
   async #showListbox() {
-    await this.#delay(10);
+    await new Promise(requestAnimationFrame);
     if (!this.disabled) {
       this.expanded ||= true;
     }

From b034fcf5cf69ba1df3fe54620745449de22c6b2a Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 28 Jul 2025 18:14:18 +0530
Subject: [PATCH 72/85] fix: move focusout handling into ComboboxController

---
 .../controllers/combobox-controller.ts        | 37 ++++++++++++++++
 elements/pf-search-input/pf-search-input.ts   | 43 +------------------
 2 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/core/pfe-core/controllers/combobox-controller.ts b/core/pfe-core/controllers/combobox-controller.ts
index a15669032d..70f34c3fd5 100644
--- a/core/pfe-core/controllers/combobox-controller.ts
+++ b/core/pfe-core/controllers/combobox-controller.ts
@@ -188,6 +188,10 @@ export class ComboboxController<
 
   private static langsRE = new RegExp(ComboboxController.langs.join('|'));
 
+  private static instances = new WeakMap<ReactiveControllerHost, ComboboxController<HTMLElement>>();
+
+  private static hosts = new Set<ReactiveControllerHost>();
+
   static {
     // apply visually-hidden styles
     this.#alertTemplate.innerHTML = `
@@ -205,6 +209,19 @@ export class ComboboxController<
       `;
   }
 
+  // Hide listbox on focusout
+  static {
+    document.addEventListener('focusout', event => {
+      const target = event.target as HTMLElement;
+      for (const host of ComboboxController.hosts) {
+        if (host instanceof Node && host.contains(target)) {
+          const instance = ComboboxController.instances.get(host);
+          instance?._onFocusoutElement();
+        }
+      }
+    });
+  }
+
   private options: RequireProps<ComboboxControllerOptions<Item>,
     | 'isItemDisabled'
     | 'isItem'
@@ -333,6 +350,8 @@ export class ComboboxController<
       isItemDisabled: this.options.isItemDisabled,
       setItemSelected: this.options.setItemSelected,
     });
+    ComboboxController.instances.set(host, this);
+    ComboboxController.hosts.add(host);
   }
 
   async hostConnected(): Promise<void> {
@@ -359,6 +378,24 @@ export class ComboboxController<
     this.#fc?.hostDisconnected();
   }
 
+  disconnect(): void {
+    ComboboxController.instances.delete(this.host);
+    ComboboxController.hosts.delete(this.host);
+  }
+
+  async _onFocusoutElement(): Promise<void> {
+    if (this.#hasTextInput && this.options.isExpanded()) {
+      const root = this.#element?.getRootNode();
+      await new Promise(requestAnimationFrame);
+      if (root instanceof ShadowRoot || root instanceof Document) {
+        const { activeElement } = root;
+        if (!this.#element?.contains(activeElement)) {
+          this.#hide();
+        }
+      }
+    }
+  }
+
   /**
    * Order of operations is important
    */
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 278c92475b..45ad3c8b5c 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -51,23 +51,6 @@ export class PfSearchInput extends LitElement {
     delegatesFocus: true,
   };
 
-  static instances: Set<PfSearchInput> = new Set<PfSearchInput>();
-
-  static {
-    if (!isServer) {
-      document.addEventListener('click', event => {
-        for (const instance of PfSearchInput.instances) {
-          instance._onOutsideClick(event);
-        }
-      });
-      document.addEventListener('focusout', () => {
-        for (const instance of PfSearchInput.instances) {
-          instance._onFocusOut();
-        }
-      });
-    }
-  }
-
   /** Accessible label for the search input */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
@@ -77,11 +60,6 @@ export class PfSearchInput extends LitElement {
   /** Whether the search input's listbox is expanded */
   @property({ type: Boolean, reflect: true }) expanded = false;
 
-  /**
-   * Enable to flip listbox when it reaches boundary
-   */
-  @property({ attribute: 'enable-flip', type: Boolean }) enableFlip = false;
-
   /** Current form value */
   @property() value?: string;
 
@@ -133,29 +111,10 @@ export class PfSearchInput extends LitElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    PfSearchInput.instances.add(this);
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
-    PfSearchInput.instances.delete(this);
-  }
-
-  // Function to handle the closing of popover on outside click
-  @bound private _onOutsideClick(event: MouseEvent) {
-    const path = event.composedPath();
-    if (!path.includes(this._searchInputContainer)) {
-      if (this.expanded) {
-        this.expanded = false;
-      }
-    }
-  }
-
-  // Function to handle the closing of popover on focus out
-  @bound private _onFocusOut() {
-    if (this.expanded) {
-      this.expanded = false;
-    }
   }
 
   /** List of options */
@@ -243,7 +202,7 @@ export class PfSearchInput extends LitElement {
 
   async #doExpand() {
     try {
-      await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
+      await this.#float.show({ placement: this.position || 'bottom', flip: true });
       return true;
     } catch {
       return false;

From 22e9d392d92d1814742d127354f202b43c88b047 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 28 Jul 2025 18:25:15 +0530
Subject: [PATCH 73/85] fix: ssr issue

---
 .../controllers/combobox-controller.ts        | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/core/pfe-core/controllers/combobox-controller.ts b/core/pfe-core/controllers/combobox-controller.ts
index 70f34c3fd5..cfdb749006 100644
--- a/core/pfe-core/controllers/combobox-controller.ts
+++ b/core/pfe-core/controllers/combobox-controller.ts
@@ -1,4 +1,4 @@
-import { nothing, type ReactiveController, type ReactiveControllerHost } from 'lit';
+import { isServer, nothing, type ReactiveController, type ReactiveControllerHost } from 'lit';
 import type { ActivedescendantControllerOptions } from './activedescendant-controller.js';
 import type { RovingTabindexControllerOptions } from './roving-tabindex-controller.js';
 import type { ATFocusController } from './at-focus-controller';
@@ -211,15 +211,17 @@ export class ComboboxController<
 
   // Hide listbox on focusout
   static {
-    document.addEventListener('focusout', event => {
-      const target = event.target as HTMLElement;
-      for (const host of ComboboxController.hosts) {
-        if (host instanceof Node && host.contains(target)) {
-          const instance = ComboboxController.instances.get(host);
-          instance?._onFocusoutElement();
+    if (!isServer) {
+      document.addEventListener('focusout', event => {
+        const target = event.target as HTMLElement;
+        for (const host of ComboboxController.hosts) {
+          if (host instanceof Node && host.contains(target)) {
+            const instance = ComboboxController.instances.get(host);
+            instance?._onFocusoutElement();
+          }
         }
-      }
-    });
+      });
+    }
   }
 
   private options: RequireProps<ComboboxControllerOptions<Item>,

From 175f56be43bbf8fd129ada358fc76f18dd16ef76 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Wed, 30 Jul 2025 16:37:04 +0530
Subject: [PATCH 74/85] chore: extend toggle button to support close
 functionality

---
 .../controllers/combobox-controller.ts        |  5 ---
 .../test/combobox-controller.spec.ts          | 18 +++++------
 elements/pf-search-input/pf-search-input.css  |  2 +-
 elements/pf-search-input/pf-search-input.ts   | 32 +++++++++++--------
 elements/pf-select/pf-select.ts               |  4 +--
 5 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/core/pfe-core/controllers/combobox-controller.ts b/core/pfe-core/controllers/combobox-controller.ts
index cfdb749006..c69e129ea5 100644
--- a/core/pfe-core/controllers/combobox-controller.ts
+++ b/core/pfe-core/controllers/combobox-controller.ts
@@ -368,11 +368,6 @@ export class ComboboxController<
     const expanded = this.options.isExpanded();
     this.#button?.setAttribute('aria-expanded', String(expanded));
     this.#input?.setAttribute('aria-expanded', String(expanded));
-    if (this.#hasTextInput) {
-      this.#button?.setAttribute('tabindex', '-1');
-    } else {
-      this.#button?.removeAttribute('tabindex');
-    }
     this.#initLabels();
   }
 
diff --git a/core/pfe-core/controllers/test/combobox-controller.spec.ts b/core/pfe-core/controllers/test/combobox-controller.spec.ts
index 6bf92712db..1249ab1d34 100644
--- a/core/pfe-core/controllers/test/combobox-controller.spec.ts
+++ b/core/pfe-core/controllers/test/combobox-controller.spec.ts
@@ -108,15 +108,15 @@ abstract class TestCombobox extends ReactiveElement {
         expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
       });
 
-      describe('Tab', function() {
-        beforeEach(press('Tab'));
-        beforeEach(updateComplete);
-        beforeEach(nextFrame);
-
-        it('does not focus the toggle button', async function() {
-          expect(await a11ySnapshot()).to.not.axContainQuery({ focused: true });
-        });
-      });
+      // describe('Tab', function() {
+      //   beforeEach(press('Tab'));
+      //   beforeEach(updateComplete);
+      //   beforeEach(nextFrame);
+
+      //   it('does not focus the toggle button', async function() {
+      //     expect(await a11ySnapshot()).to.not.axContainQuery({ focused: true });
+      //   });
+      // });
 
       describe('ArrowDown', function() {
         beforeEach(press('ArrowDown'));
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
index e32184d64c..0e6bb54862 100644
--- a/elements/pf-search-input/pf-search-input.css
+++ b/elements/pf-search-input/pf-search-input.css
@@ -177,7 +177,7 @@
   cursor: not-allowed;
 }
 
-#close-button {
+.close-button {
   --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
   --pf-c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
   --pf-c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 45ad3c8b5c..0c4d14b867 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -83,14 +83,15 @@ export class PfSearchInput extends LitElement {
 
   @query('#placeholder') private _placeholder?: PfOption;
 
-  @query('#outer') private _searchInputContainer!: HTMLElement;
-
   #internals = InternalsController.of(this);
 
   #float = new FloatingDOMController(this, { content: () => this._listboxContainer });
 
   #slots = new SlotController(this, null, 'placeholder');
 
+  /** True when the user just clicked the close button */
+  #clickedCloseButton = false;
+
   #combobox = ComboboxController.of(this, {
     getItems: () => this.options,
     getFallbackLabel: () => this.accessibleLabel
@@ -100,7 +101,7 @@ export class PfSearchInput extends LitElement {
     getListboxElement: () => this._listbox ?? null,
     getToggleButton: () => this._toggleButton ?? null,
     getComboboxInput: () => this._toggleInput ?? null,
-    isExpanded: () => this.expanded,
+    isExpanded: () => this.#setIsExpanded(),
     requestShowListbox: () => this.#showListbox(),
     requestHideListbox: () => void (this.expanded &&= false),
     setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden),
@@ -149,17 +150,17 @@ export class PfSearchInput extends LitElement {
                  @keyup="${this.#onSubmit}"
                  @keydown="${this.#onKeyDown}">
           <div class="close-button-container">
-            <pf-button id="close-button"
+            <pf-button id="toggle-button"
+                       class="close-button"
                        plain
                        label="Close"
                        ?hidden="${this.#hideCloseButton()}"
-                       @click="${this.#onClose}">
+                       @click="${this.#onClickCloseButton}">
               <pf-icon size="md"
                        icon="close"
                        set="patternfly">close</pf-icon>
             </pf-button>
           </div>
-          <button type="button" aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
         </div>
         <div id="listbox-container"
              ?hidden="${!expanded}"
@@ -245,13 +246,9 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  async #onClose() {
-    if (this.expanded) {
-      await this.hide();
-    }
-    this.value = '';
-    this._toggleInput!.value = this.value;
-    this.#combobox.selected = [];
+  async #onClickCloseButton() {
+    this._toggleInput!.value = '';
+    this.#clickedCloseButton = true;
     this._toggleInput?.focus();
   }
 
@@ -310,6 +307,15 @@ export class PfSearchInput extends LitElement {
       item?.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });
     }
   }
+
+  #setIsExpanded() {
+    if (this.#clickedCloseButton) {
+      this.#clickedCloseButton = false;
+      // prevent the listbox from showing when we only intend to clear the input
+      return true;
+    }
+    return this.expanded;
+  }
 }
 
 declare global {
diff --git a/elements/pf-select/pf-select.ts b/elements/pf-select/pf-select.ts
index f3721a3f22..e32edb14d7 100644
--- a/elements/pf-select/pf-select.ts
+++ b/elements/pf-select/pf-select.ts
@@ -2,7 +2,7 @@ import type { PfChipGroup } from '../pf-chip/pf-chip-group.js';
 import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 import type { TemplateResult } from 'lit';
 
-import { LitElement, html, isServer } from 'lit';
+import { LitElement, html, isServer, nothing } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
@@ -368,7 +368,7 @@ export class PfSelect extends LitElement {
                  ?hidden="${!typeahead}"
                  ?disabled="${disabled}"
                  placeholder="${placeholder || this.#buttonLabel}">`}
-          <button id="toggle-button">
+          <button tabindex=${typeahead ? '-1' : nothing} id="toggle-button">
             <span id="button-text" style="display: contents;">
               <span id="toggle-text"
                     class="${classMap({ 'visually-hidden': !!typeahead, badge })}">${this.#buttonLabel}</span>${!hasBadge ? '' : html`

From 50354c72f086c765bbe32252eb440bf2a36fcfb5 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Thu, 31 Jul 2025 18:44:00 +0530
Subject: [PATCH 75/85] fix: updated this.value state management

---
 elements/pf-search-input/pf-search-input.ts | 25 +++++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index 0c4d14b867..a1481e8db2 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -13,10 +13,8 @@ import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 
-import { arraysAreEquivalent } from '@patternfly/pfe-core/functions/arraysAreEquivalent.js';
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 import { PfOption } from '../pf-select/pf-option.js';
-import { bound } from '@patternfly/pfe-core/decorators.js';
 import styles from './pf-search-input.css';
 
 /** Fired when a `<pf-search-input>` element's value changes */
@@ -248,6 +246,8 @@ export class PfSearchInput extends LitElement {
 
   async #onClickCloseButton() {
     this._toggleInput!.value = '';
+    this.#updateValue(this._toggleInput?.value ?? '');
+    this.#combobox.selected = [];
     this.#clickedCloseButton = true;
     this._toggleInput?.focus();
   }
@@ -260,12 +260,19 @@ export class PfSearchInput extends LitElement {
   }
 
   #onChange() {
-    this.value = this._toggleInput?.value;
+    this.#updateValue(this._toggleInput?.value ?? '');
     if (this.value !== this.#combobox.selected[0]?.value) {
       this.#combobox.selected = [];
     }
-    this.#internals.setFormValue(this.value ?? '');
-    this.dispatchEvent(new PfSearchChangeEvent());
+    // Will remove after review
+    // for (const item of this.#combobox.items){
+    //   if (item.hasAttribute('selected')) {
+    //     if(item.value !== this.value){
+    //       this.#setItemSelected(item, false);
+    //       this.requestUpdate();
+    //     }
+    //   }
+    // }
   }
 
   #onSubmit(event: KeyboardEvent) {
@@ -274,6 +281,10 @@ export class PfSearchInput extends LitElement {
     }
   }
 
+  #updateValue(value: string) {
+    this.value = value;
+  }
+
   #onKeyDown(event: KeyboardEvent) {
     const target = event.target as HTMLElement;
     if (target?.getAttribute('aria-disabled') === 'true') {
@@ -296,8 +307,8 @@ export class PfSearchInput extends LitElement {
   #setItemSelected(item: PfOption, selected: boolean) {
     item.selected = selected;
     if (selected) {
-      this.value = item.value;
-      this._toggleInput!.value = this.value;
+      this._toggleInput!.value = item.value;
+      this.#updateValue(this._toggleInput?.value ?? '');
     }
   }
 

From 4ab93a516ca79f5b4e9e70250951bd6f7c0047c5 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Fri, 1 Aug 2025 17:23:25 +0530
Subject: [PATCH 76/85] chore: added test cases for search input in disabled
 state

---
 .../test/pf-search-input.spec.ts              | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index 2c07212add..5cf38dcdc3 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -855,5 +855,58 @@ describe('<pf-search-input>', function() {
         });
       });
     });
+
+    describe('with `disabled` attribute', function() {
+      let element: PfSearchInput;
+      const updateComplete = () => element.updateComplete;
+      const focus = () => element.focus();
+
+      beforeEach(async function() {
+        element = await createFixture<PfSearchInput>(html`
+          <pf-search-input id="disabled-search" disabled>
+            <pf-option value="1">1</pf-option>
+            <pf-option value="2">2</pf-option>
+            <pf-option value="3">3</pf-option>
+          </pf-search-input>
+          <label for="disabled-search">Disabled</label>`);
+        await updateComplete();
+      });
+
+      it('passes aXe audit', async function() {
+        await expect(element).to.be.accessible();
+      });
+
+      it('is marked as disabled in accessibility tree', async function() {
+        expect(await a11ySnapshot()).to.axContainQuery({
+          role: 'combobox',
+          disabled: true,
+        });
+      });
+
+      describe('focus()', function() {
+        beforeEach(focus);
+        beforeEach(updateComplete);
+        describe('ArrowDown', function() {
+          beforeEach(press('ArrowDown'));
+          beforeEach(updateComplete);
+
+          it('does not open on focus and keyboard interaction', async function() {
+            // Should remain closed
+            expect(element.expanded).to.be.false;
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
+        });
+      });
+
+      describe('clicking the element', function() {
+        beforeEach(async function() {
+          await clickElementAtOffset(element, [10, 10]);
+        });
+        it('cannot be interacted with via click', async function() {
+          expect(element.expanded).to.be.false;
+          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+        });
+      });
+    });
   });
 });

From 9b62b5bc1f7a53ff6da160c8fe01e3624e458fb8 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 4 Aug 2025 16:38:01 +0530
Subject: [PATCH 77/85] chore: test cases added for close button functionality

---
 elements/pf-search-input/pf-search-input.ts   |   7 +-
 .../test/pf-search-input.spec.ts              | 124 ++++++++++++++----
 2 files changed, 107 insertions(+), 24 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index a1481e8db2..f911dbba6c 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -244,7 +244,7 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  async #onClickCloseButton() {
+  #onClickCloseButton() {
     this._toggleInput!.value = '';
     this.#updateValue(this._toggleInput?.value ?? '');
     this.#combobox.selected = [];
@@ -322,7 +322,10 @@ export class PfSearchInput extends LitElement {
   #setIsExpanded() {
     if (this.#clickedCloseButton) {
       this.#clickedCloseButton = false;
-      // prevent the listbox from showing when we only intend to clear the input
+      setTimeout(() =>{
+        this.hide();
+        // prevent the listbox from showing when we only intend to clear the input
+      }, 10);
       return true;
     }
     return this.expanded;
diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index 5cf38dcdc3..5afc48d8d6 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -657,28 +657,6 @@ describe('<pf-search-input>', function() {
           });
         });
 
-        describe('clicking the close button', function() {
-          beforeEach(async function() {
-            await clickElementAtOffset(element, [-10, 10]);
-          });
-
-          it('hides the listbox', async function() {
-            expect(element.expanded).not.to.be.true;
-            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-          });
-
-          it('hides the close button', async function() {
-            expect(await a11ySnapshot()).not.to.axContainQuery({
-              name: 'close',
-              role: 'button',
-            });
-          });
-
-          it('removes the selected option value', async function() {
-            expect(getSelectedOptionValue(element)).to.deep.equal([]);
-          });
-        });
-
         describe('"p"', function() {
           beforeEach(press('p'));
           beforeEach(() => aTimeout(300));
@@ -896,6 +874,22 @@ describe('<pf-search-input>', function() {
             expect(await a11ySnapshot()).to.not.axContainRole('listbox');
           });
         });
+
+        describe('"1" when input is disabled', function() {
+          beforeEach(press('1'));
+          beforeEach(() => aTimeout(300));
+          beforeEach(updateComplete);
+
+          it('does not show any options', async function() {
+            expect(element.expanded).to.be.false;
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
+
+          it('does not add any value to the input', async function() {
+            const input = element.shadowRoot?.querySelector('input');
+            expect(input?.value).to.equal('');
+          });
+        });
       });
 
       describe('clicking the element', function() {
@@ -908,5 +902,91 @@ describe('<pf-search-input>', function() {
         });
       });
     });
+
+    describe('clicking the close button', function() {
+      let element: PfSearchInput;
+      const updateComplete = () => element.updateComplete;
+      const focus = () => element.focus();
+
+      beforeEach(async function() {
+        element = await createFixture<PfSearchInput>(html`
+          <pf-search-input id="disabled-search" disabled>
+            <pf-option value="1">1</pf-option>
+            <pf-option value="2">2</pf-option>
+            <pf-option value="3">3</pf-option>
+          </pf-search-input>
+          <label for="disabled-search">Disabled</label>`);
+        await updateComplete();
+      });
+
+      it('passes aXe audit', async function() {
+        await expect(element).to.be.accessible();
+      });
+
+      describe('clicking the close button when list box is open', function() {
+        beforeEach(async function() {
+          await clickElementAtOffset(element, [-10, 10]);
+        });
+
+        it('hides the listbox', async function() {
+          expect(element.expanded).not.to.be.true;
+          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+        });
+
+        it('hides the close button', async function() {
+          expect(await a11ySnapshot()).not.to.axContainQuery({
+            name: 'close',
+            role: 'button',
+          });
+        });
+
+        it('removes the selected option value', async function() {
+          expect(getSelectedOptionValue(element)).to.deep.equal([]);
+        });
+
+        it('clears the input value', async function() {
+          const input = element.shadowRoot?.querySelector('input');
+          expect(input?.value).to.equal('');
+        });
+      });
+
+      describe('clicking the close button when list box is closed and input has value', function() {
+        describe('focus()', function() {
+          beforeEach(focus);
+          beforeEach(updateComplete);
+          describe(' press "z"', function() {
+            beforeEach(press('z'));
+            beforeEach(() => aTimeout(300));
+            beforeEach(updateComplete);
+
+            it('does not show any options', async function() {
+              expect(element.expanded).to.be.false;
+              expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+            });
+          });
+
+          beforeEach(async function() {
+            await clickElementAtOffset(element, [-10, 10]);
+          });
+
+          it('hides the listbox', async function() {
+            expect(element.expanded).not.to.be.true;
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
+
+          it('hides the close button', async function() {
+            expect(await a11ySnapshot()).not.to.axContainQuery({
+              name: 'close',
+              role: 'button',
+            });
+          });
+
+          it('clears the input value', async function() {
+            const input = element.shadowRoot?.querySelector('input');
+            expect(input?.value).to.equal('');
+          });
+        });
+      });
+    });
   });
 });

From 0b61fc92d24099ff08347925abb3b8252e55ee87 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 4 Aug 2025 18:27:35 +0530
Subject: [PATCH 78/85] chore: test cases added for outside click and on focus
 out

---
 .../test/pf-search-input.spec.ts              | 128 ++++++++++++++++++
 1 file changed, 128 insertions(+)

diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index 5afc48d8d6..e60aa6f052 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -988,5 +988,133 @@ describe('<pf-search-input>', function() {
         });
       });
     });
+
+    describe('Outside click behavior', function() {
+      let element: PfSearchInput;
+      const updateComplete = () => element.updateComplete;
+      const focus = () => element.focus();
+      let outsideElement: HTMLElement;
+
+      beforeEach(async function() {
+        element = await createFixture<PfSearchInput>(html`
+          <pf-search-input>
+            <pf-option value="11">11</pf-option>
+            <pf-option value="12">12</pf-option>
+            <pf-option value="13">13</pf-option>
+            <pf-option value="21">21</pf-option>
+            <pf-option value="22">22</pf-option>
+            <pf-option value="23">23</pf-option>
+          </pf-search-input>
+        `);
+
+        // Create a dummy div to represent an "outside" area
+        outsideElement = document.createElement('div');
+        outsideElement.style.width = '200px';
+        outsideElement.style.height = '200px';
+        document.body.appendChild(outsideElement);
+      });
+
+      describe('focus()', function() {
+        beforeEach(focus);
+        beforeEach(updateComplete);
+
+        describe('"1"', function() {
+          beforeEach(press('1'));
+          beforeEach(() => aTimeout(300));
+          beforeEach(updateComplete);
+
+          it('should open the listbox when focused', function() {
+            expect(element.expanded).to.be.true;
+          });
+
+          it('only shows options that start with "1"', async function() {
+            expect(getVisibleOptionValues(element)).to.deep.equal([
+              '11',
+              '12',
+              '13',
+            ]);
+          });
+
+          describe('click outside the element', function() {
+            // Click outside element
+            beforeEach(() => clickElementAtCenter(outsideElement));
+            beforeEach(() => aTimeout(300));
+            beforeEach(updateComplete);
+
+            it('should close the listbox when clicking outside', async function() {
+              expect(element.expanded).to.be.false;
+            });
+
+            it('should keep the entered value after outside click', async function() {
+              const input = element.shadowRoot?.querySelector('input');
+              expect(input?.value).to.equal('1');
+            });
+          });
+        });
+      });
+    });
+
+    describe('on focus-out behavior', function() {
+      let element: PfSearchInput;
+      const updateComplete = () => element.updateComplete;
+      const focus = () => element.focus();
+
+      beforeEach(async function() {
+        element = await createFixture<PfSearchInput>(html`
+          <pf-search-input>
+            <pf-option value="11">11</pf-option>
+            <pf-option value="12">12</pf-option>
+            <pf-option value="13">13</pf-option>
+            <pf-option value="21">21</pf-option>
+            <pf-option value="22">22</pf-option>
+            <pf-option value="23">23</pf-option>
+          </pf-search-input>
+        `);
+
+        beforeEach(updateComplete);
+      });
+
+      describe('focus()', function() {
+        beforeEach(focus);
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
+
+        describe('"1"', function() {
+          beforeEach(press('1'));
+          beforeEach(() => aTimeout(300));
+          beforeEach(updateComplete);
+
+          it('should open the listbox when focused', function() {
+            expect(element.expanded).to.be.true;
+          });
+
+          it('only shows options that start with "1"', async function() {
+            expect(getVisibleOptionValues(element)).to.deep.equal([
+              '11',
+              '12',
+              '13',
+            ]);
+          });
+
+          describe('move the focus out of the element', function() {
+            beforeEach(press('Tab'));
+            beforeEach(() => aTimeout(300));
+            beforeEach(updateComplete);
+            beforeEach(press('Tab'));
+            beforeEach(() => aTimeout(300));
+            beforeEach(updateComplete);
+
+            it('should close the listbox when focused out', async function() {
+              expect(element.expanded).to.be.false;
+            });
+
+            it('should keep the entered value after focus out', async function() {
+              const input = element.shadowRoot?.querySelector('input');
+              expect(input?.value).to.equal('1');
+            });
+          });
+        });
+      });
+    });
   });
 });

From 6410dece1103f9d8338ab95307fa4fb1cccf0005 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 4 Aug 2025 18:47:06 +0530
Subject: [PATCH 79/85] chore: updated documentation

---
 elements/pf-search-input/docs/pf-search-input.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pf-search-input/docs/pf-search-input.md b/elements/pf-search-input/docs/pf-search-input.md
index 0f3abb1518..5a3bdef385 100644
--- a/elements/pf-search-input/docs/pf-search-input.md
+++ b/elements/pf-search-input/docs/pf-search-input.md
@@ -54,7 +54,7 @@ When focus is on the toggle, the following keyboard interactions apply:
 | Key                    | Function                                                                               |
 | ---------------------- | -------------------------------------------------------------------------------------- |
 | <kbd>Down Arrow</kbd>  | Opens the listbox and moves focus to the first listbox item.                           |
-| <kbd>Tab</kbd>         | Moves focus out of element onto the next focusable item and closes listbox.            |
+| <kbd>Tab</kbd>         | Moves focus to the close button if visible; otherwise, moves to the next focusable element, then closes the listbox.|
 | <kbd>Shift + Tab</kbd> | Moves focus out of element onto the previous focusable item and closes listbox.        |
 
 #### Listbox options

From 3e2d8ed6f87fd96694e7d6c4d7c397c0e5967135 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Mon, 4 Aug 2025 19:14:48 +0530
Subject: [PATCH 80/85] fix: close button functionality

---
 elements/pf-search-input/pf-search-input.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index f911dbba6c..eb81af2924 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -89,6 +89,7 @@ export class PfSearchInput extends LitElement {
 
   /** True when the user just clicked the close button */
   #clickedCloseButton = false;
+  #setExpanded = false;
 
   #combobox = ComboboxController.of(this, {
     getItems: () => this.options,
@@ -299,7 +300,16 @@ export class PfSearchInput extends LitElement {
 
   async #showListbox() {
     await new Promise(requestAnimationFrame);
-    if (!this.disabled) {
+    if (this.disabled) {
+      return;
+    };
+
+    if (this.#setExpanded) {
+      // If expanded is set to true on clicking close button
+      // set expanded to false
+      this.#setExpanded = false;
+      this.expanded = false;
+    } else {
       this.expanded ||= true;
     }
   }
@@ -322,10 +332,7 @@ export class PfSearchInput extends LitElement {
   #setIsExpanded() {
     if (this.#clickedCloseButton) {
       this.#clickedCloseButton = false;
-      setTimeout(() =>{
-        this.hide();
-        // prevent the listbox from showing when we only intend to clear the input
-      }, 10);
+      this.#setExpanded = true;
       return true;
     }
     return this.expanded;

From 4ceabc25de9d514c4d19599c5bb5ada3035a9ffd Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 5 Aug 2025 16:49:55 +0530
Subject: [PATCH 81/85] chore: added test cases for form submission

---
 .../test/pf-search-input.spec.ts              | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)

diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index e60aa6f052..b6386624bb 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -1116,5 +1116,110 @@ describe('<pf-search-input>', function() {
         });
       });
     });
+
+    describe('form submission with pf-search-input', function() {
+      let form: HTMLFormElement;
+      let searchInput: PfSearchInput;
+      const updateComplete = () => searchInput.updateComplete;
+      const focus = () => searchInput.focus();
+      let submittedData: FormData | null;
+
+      beforeEach(async function() {
+        form = await createFixture<HTMLFormElement>(html`
+          <form>
+            <pf-search-input name="search">
+              <pf-option value="Alabama">Alabama</pf-option>
+              <pf-option value="New York">New York</pf-option>
+              <pf-option value="New Jersey">New Jersey</pf-option>
+            </pf-search-input>
+            <button type="submit">Submit</button>
+          </form>
+        `);
+
+        searchInput = form.querySelector('pf-search-input')!;
+        beforeEach(updateComplete);
+
+        form.addEventListener('submit', e => {
+          e.preventDefault();
+          submittedData = new FormData(form);
+        });
+      });
+
+      describe('when a user types and selects an option', function() {
+        describe('focus', function() {
+          beforeEach(focus);
+          beforeEach(() => aTimeout(300));
+          beforeEach(updateComplete);
+          describe('press `New`', function() {
+            beforeEach(updateComplete);
+            beforeEach(() => aTimeout(300));
+            beforeEach(press('N'));
+            beforeEach(() => aTimeout(300));
+            beforeEach(press('e'));
+            beforeEach(() => aTimeout(300));
+            beforeEach(press('w'));
+
+            describe('select the first option starting with `New` and submit the form', function() {
+              beforeEach(updateComplete);
+              beforeEach(() => aTimeout(300));
+              beforeEach(press('ArrowDown'));
+              beforeEach(() => aTimeout(300));
+              beforeEach(press('Enter'));
+              beforeEach(updateComplete);
+
+              it('should select the option', function() {
+                expect(getSelectedOptionValue(searchInput)).to.deep.equal([
+                  'New York',
+                ]);
+              });
+
+              it('should close the dropdown after selection', function() {
+                expect(searchInput.expanded).to.be.false;
+              });
+
+              it('should keep selected value in input after submission', function() {
+                const input = searchInput.shadowRoot?.querySelector('input');
+                expect(input?.value).to.equal('New York');
+              });
+
+              describe('on form submit event', function() {
+                it('should submit the selected value from pf-search-input', async function() {
+                  const event = new SubmitEvent('submit', {
+                    bubbles: true,
+                    cancelable: true,
+                  });
+
+                  form.dispatchEvent(event);
+                  expect(event.defaultPrevented).to.be.true;
+
+                  expect(submittedData).to.not.be.null;
+                  expect(submittedData?.get('search')).to.equal('New York');
+                });
+              });
+
+              describe('on submit button click', function() {
+                it('should submit the selected value', async function() {
+                  form.querySelector('button')?.click();
+                  beforeEach(() => aTimeout(300));
+
+                  expect(submittedData).to.not.be.null;
+                  expect(submittedData?.get('search')).to.equal('New York');
+                });
+              });
+
+              describe('form submit on clicking `enter` key', function() {
+                beforeEach(press('Enter'));
+                beforeEach(updateComplete);
+
+                it('should submit the selected value', function() {
+                  expect(submittedData).to.not.be.null;
+                  expect(submittedData?.get('search')).to.equal('New York');
+                });
+              });
+            });
+          });
+        });
+      });
+    });
   });
 });

From 6c23f3e796d39db152d32060b329beca1b262712 Mon Sep 17 00:00:00 2001
From: ArathyKumar <ask6295@gmail.com>
Date: Tue, 5 Aug 2025 17:01:30 +0530
Subject: [PATCH 82/85] chore: code cleanup

---
 elements/pf-search-input/pf-search-input.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index eb81af2924..ab2e4e4e29 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -265,15 +265,6 @@ export class PfSearchInput extends LitElement {
     if (this.value !== this.#combobox.selected[0]?.value) {
       this.#combobox.selected = [];
     }
-    // Will remove after review
-    // for (const item of this.#combobox.items){
-    //   if (item.hasAttribute('selected')) {
-    //     if(item.value !== this.value){
-    //       this.#setItemSelected(item, false);
-    //       this.requestUpdate();
-    //     }
-    //   }
-    // }
   }
 
   #onSubmit(event: KeyboardEvent) {

From c8fc771d4d5f178ad5ad3c629e5118b017fe2a30 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 6 Aug 2025 15:12:31 +0300
Subject: [PATCH 83/85] fix: reset combobox selected state

---
 elements/pf-search-input/pf-search-input.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
index ab2e4e4e29..46c6e35178 100644
--- a/elements/pf-search-input/pf-search-input.ts
+++ b/elements/pf-search-input/pf-search-input.ts
@@ -248,7 +248,6 @@ export class PfSearchInput extends LitElement {
   #onClickCloseButton() {
     this._toggleInput!.value = '';
     this.#updateValue(this._toggleInput?.value ?? '');
-    this.#combobox.selected = [];
     this.#clickedCloseButton = true;
     this._toggleInput?.focus();
   }
@@ -262,9 +261,6 @@ export class PfSearchInput extends LitElement {
 
   #onChange() {
     this.#updateValue(this._toggleInput?.value ?? '');
-    if (this.value !== this.#combobox.selected[0]?.value) {
-      this.#combobox.selected = [];
-    }
   }
 
   #onSubmit(event: KeyboardEvent) {
@@ -275,6 +271,11 @@ export class PfSearchInput extends LitElement {
 
   #updateValue(value: string) {
     this.value = value;
+    // it's necessary to reset the 'selected' state of combobox
+    // since otherwise, combobox controller will attempt to prevent us from
+    // re-selecting the last-selected item, even though pf-search-input
+    // doesn't have a selected property
+    this.#combobox.selected = [];
   }
 
   #onKeyDown(event: KeyboardEvent) {

From 5bc1ecd2b5525c6e790c559d8a2e0290a88ddca2 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 6 Aug 2025 16:52:17 +0300
Subject: [PATCH 84/85] test(search-input): reorganize suites

---
 .../test/pf-search-input.spec.ts              | 1668 ++++++++---------
 1 file changed, 834 insertions(+), 834 deletions(-)

diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index b6386624bb..0c6a95fab6 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -64,602 +64,623 @@ describe('<pf-search-input>', function() {
           .and
           .to.be.an.instanceOf(PfSearchInput);
     });
+  });
 
-    describe('with accessible-label attribute and 3 items', function() {
-      let element: PfSearchInput;
-      const updateComplete = () => element.updateComplete;
+  describe('with accessible-label attribute and 3 items', function() {
+    let element: PfSearchInput;
+    const updateComplete = () => element.updateComplete;
+
+    beforeEach(async function() {
+      element = await createFixture<PfSearchInput>(html`
+        <pf-search-input accessible-label="label">
+          <pf-option value="1">1</pf-option>
+          <pf-option value="2">2</pf-option>
+          <pf-option value="3">3</pf-option>
+        </pf-search-input>`);
+    });
 
-      beforeEach(async function() {
-        element = await createFixture<PfSearchInput>(html`
-          <pf-search-input accessible-label="label">
-            <pf-option value="1">1</pf-option>
-            <pf-option value="2">2</pf-option>
-            <pf-option value="3">3</pf-option>
-          </pf-search-input>`);
-      });
+    it('passes aXe audit', async function() {
+      await expect(element).to.be.accessible();
+    });
 
-      it('passes aXe audit', async function() {
-        await expect(element).to.be.accessible();
-      });
-
-      it('labels the combobox with the accessible-label attribuet', async function() {
-        expect(await a11ySnapshot()).to.axContainQuery({
-          role: 'combobox',
-          name: 'label',
-        });
+    it('labels the combobox with the accessible-label attribuet', async function() {
+      expect(await a11ySnapshot()).to.axContainQuery({
+        role: 'combobox',
+        name: 'label',
       });
+    });
 
-      it('does not have redundant role', async function() {
-        expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
-      });
+    it('does not have redundant role', async function() {
+      expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+    });
 
-      it('sets aria-setsize="3" and aria-posinset on items', function() {
-        element.options.forEach((option, i) => {
-          expect(option).to.have.attr('aria-setsize', '3');
-          expect(option).to.have.attr('aria-posinset', `${i + 1}`);
-        });
+    it('sets aria-setsize="3" and aria-posinset on items', function() {
+      element.options.forEach((option, i) => {
+        expect(option).to.have.attr('aria-setsize', '3');
+        expect(option).to.have.attr('aria-posinset', `${i + 1}`);
       });
+    });
 
-      describe('focus()', function() {
-        beforeEach(press('Tab'));
+    describe('focus()', function() {
+      beforeEach(press('Tab'));
+      beforeEach(updateComplete);
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
+        beforeEach(() => aTimeout(300));
         beforeEach(updateComplete);
-        describe('ArrowDown', function() {
-          beforeEach(press('ArrowDown'));
-          beforeEach(() => aTimeout(300));
-          beforeEach(updateComplete);
 
-          it('labels the listbox with the accessible-label attribute', async function() {
-            const snap = await a11ySnapshot();
-            expect(snap).to.axContainQuery({
-              role: 'listbox',
-              name: 'label',
-            });
+        it('labels the listbox with the accessible-label attribute', async function() {
+          const snap = await a11ySnapshot();
+          expect(snap).to.axContainQuery({
+            role: 'listbox',
+            name: 'label',
           });
+        });
 
-          it('focuses on the first item', async function() {
-            expect(getActiveOption(element)).to.have.value('1');
-          });
+        it('focuses on the first item', async function() {
+          expect(getActiveOption(element)).to.have.value('1');
         });
       });
     });
+  });
 
-    describe('with 3 items and associated <label> elements', function() {
-      let element: PfSearchInput;
-      const updateComplete = () => element.updateComplete;
-
-      beforeEach(async function() {
-        element = await createFixture<PfSearchInput>(html`
-          <pf-search-input id="search">
-            <pf-option value="1">1</pf-option>
-            <pf-option value="2">2</pf-option>
-            <pf-option value="3">3</pf-option>
-          </pf-search-input>
-          <label for="search">label1</label>
-          <label for="search">label2</label>
-          `);
-      });
+  describe('with 3 items and associated <label> elements', function() {
+    let element: PfSearchInput;
+    const updateComplete = () => element.updateComplete;
+
+    beforeEach(async function() {
+      element = await createFixture<PfSearchInput>(html`
+        <pf-search-input id="search">
+          <pf-option value="1">1</pf-option>
+          <pf-option value="2">2</pf-option>
+          <pf-option value="3">3</pf-option>
+        </pf-search-input>
+        <label for="search">label1</label>
+        <label for="search">label2</label>
+        `);
+    });
 
-      it('passes aXe audit', async function() {
-        await expect(element).to.be.accessible();
-      });
+    it('passes aXe audit', async function() {
+      await expect(element).to.be.accessible();
+    });
 
-      it('does not have redundant role', async function() {
-        expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
-      });
+    it('does not have redundant role', async function() {
+      expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+    });
 
-      it('labels the combobox with the label elements', async function() {
-        expect(await a11ySnapshot()).to.axContainQuery({
-          role: 'combobox',
-          name: 'label1label2',
-        });
+    it('labels the combobox with the label elements', async function() {
+      expect(await a11ySnapshot()).to.axContainQuery({
+        role: 'combobox',
+        name: 'label1label2',
       });
+    });
 
-      it('sets aria-setsize="3" and aria-posinset on items', function() {
-        element.options.forEach((option, i) => {
-          expect(option).to.have.attr('aria-setsize', '3');
-          expect(option).to.have.attr('aria-posinset', `${i + 1}`);
-        });
+    it('sets aria-setsize="3" and aria-posinset on items', function() {
+      element.options.forEach((option, i) => {
+        expect(option).to.have.attr('aria-setsize', '3');
+        expect(option).to.have.attr('aria-posinset', `${i + 1}`);
       });
+    });
 
-      describe('focus()', function() {
-        beforeEach(press('Tab'));
+    describe('focus()', function() {
+      beforeEach(press('Tab'));
+      beforeEach(updateComplete);
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
+        beforeEach(() => aTimeout(300));
         beforeEach(updateComplete);
-        describe('ArrowDown', function() {
-          beforeEach(press('ArrowDown'));
-          beforeEach(() => aTimeout(300));
-          beforeEach(updateComplete);
-          it('labels the listbox with the label elements', async function() {
-            expect(await a11ySnapshot()).to.axContainQuery({
-              role: 'listbox',
-              name: 'label1label2',
-            });
+        it('labels the listbox with the label elements', async function() {
+          expect(await a11ySnapshot()).to.axContainQuery({
+            role: 'listbox',
+            name: 'label1label2',
           });
         });
       });
     });
+  });
 
-    describe('in a deep shadow root', function() {
-      let element: PfSearchInput;
-      const focus = () => element.focus();
-      const updateComplete = () => element.updateComplete;
-      beforeEach(async function() {
-        const fixture = await createFixture(html`
-        <shadow-root>
-          <template shadowrootmode="open">
-            <shadow-root>
-              <template shadowrootmode="open">
-                <pf-search-input
-                           accessible-label="Search"
-                           placeholder="Search">
-                  <pf-option value="1">1</pf-option>
-                  <pf-option value="2">2</pf-option>
-                  <pf-option value="3">3</pf-option>
-                  <pf-option value="4">4</pf-option>
-                  <pf-option value="5">5</pf-option>
-                  <pf-option value="6">6</pf-option>
-                  <pf-option value="7">7</pf-option>
-                  <pf-option value="8">8</pf-option>
-                </pf-search-input>
-              </template>
-            </shadow-root>
-          </template>
-        </shadow-root>`);
-
-        function attachShadowRoots(root?: Document | ShadowRoot) {
-          root?.querySelectorAll<HTMLTemplateElement>('template[shadowrootmode]').forEach(template => {
-            const mode = template.getAttribute('shadowrootmode') as 'open' | 'closed';
-            const shadowRoot = template.parentElement?.attachShadow?.({ mode });
-            shadowRoot?.appendChild(template.content);
-            template.remove();
-            attachShadowRoots(shadowRoot);
-          });
-        }
-        attachShadowRoots(document);
-
-        const select = fixture.shadowRoot?.firstElementChild?.shadowRoot?.querySelector('pf-search-input');
-        if (select) {
-          element = select;
-          await element?.updateComplete;
-        } else {
-          throw new Error('no element!');
-        }
-      });
+  describe('in a deep shadow root', function() {
+    let element: PfSearchInput;
+    const focus = () => element.focus();
+    const updateComplete = () => element.updateComplete;
+    beforeEach(async function() {
+      const fixture = await createFixture(html`
+      <shadow-root>
+        <template shadowrootmode="open">
+          <shadow-root>
+            <template shadowrootmode="open">
+              <pf-search-input
+                         accessible-label="Search"
+                         placeholder="Search">
+                <pf-option value="1">1</pf-option>
+                <pf-option value="2">2</pf-option>
+                <pf-option value="3">3</pf-option>
+                <pf-option value="4">4</pf-option>
+                <pf-option value="5">5</pf-option>
+                <pf-option value="6">6</pf-option>
+                <pf-option value="7">7</pf-option>
+                <pf-option value="8">8</pf-option>
+              </pf-search-input>
+            </template>
+          </shadow-root>
+        </template>
+      </shadow-root>`);
+
+      function attachShadowRoots(root?: Document | ShadowRoot) {
+        root?.querySelectorAll<HTMLTemplateElement>('template[shadowrootmode]').forEach(template => {
+          const mode = template.getAttribute('shadowrootmode') as 'open' | 'closed';
+          const shadowRoot = template.parentElement?.attachShadow?.({ mode });
+          shadowRoot?.appendChild(template.content);
+          template.remove();
+          attachShadowRoots(shadowRoot);
+        });
+      }
+      attachShadowRoots(document);
+
+      const select = fixture.shadowRoot?.firstElementChild?.shadowRoot?.querySelector('pf-search-input');
+      if (select) {
+        element = select;
+        await element?.updateComplete;
+      } else {
+        throw new Error('no element!');
+      }
+    });
 
-      describe('expanding', function() {
-        beforeEach(focus);
-        beforeEach(press('Enter'));
+    describe('expanding', function() {
+      beforeEach(focus);
+      beforeEach(press('Enter'));
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
+        it('remains expanded', function() {
+          expect(element.expanded).to.be.true;
+        });
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
-          beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
           it('remains expanded', function() {
             expect(element.expanded).to.be.true;
           });
-          describe('ArrowDown', function() {
-            beforeEach(press('ArrowDown'));
-            beforeEach(updateComplete);
-            it('remains expanded', function() {
-              expect(element.expanded).to.be.true;
-            });
-          });
         });
       });
     });
+  });
+
+  describe('with 8 items', function() {
+    let element: PfSearchInput;
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus();
+
+    beforeEach(async function() {
+      element = await createFixture<PfSearchInput>(html`
+        <pf-search-input>
+          <pf-option value="1">1</pf-option>
+          <pf-option value="2">2</pf-option>
+          <pf-option value="3">3</pf-option>
+          <pf-option value="4">4</pf-option>
+          <pf-option value="5">5</pf-option>
+          <pf-option value="6">6</pf-option>
+          <pf-option value="7">7</pf-option>
+          <pf-option value="8">8</pf-option>
+        </pf-search-input>`);
+    });
 
-    describe('with 8 items', function() {
-      let element: PfSearchInput;
-      const updateComplete = () => element.updateComplete;
-      const focus = () => element.focus();
+    it('does not pass aXe audit', async function() {
+      await expect(element).to.not.be.accessible();
+    });
 
-      beforeEach(async function() {
-        element = await createFixture<PfSearchInput>(html`
-          <pf-search-input>
-            <pf-option value="1">1</pf-option>
-            <pf-option value="2">2</pf-option>
-            <pf-option value="3">3</pf-option>
-            <pf-option value="4">4</pf-option>
-            <pf-option value="5">5</pf-option>
-            <pf-option value="6">6</pf-option>
-            <pf-option value="7">7</pf-option>
-            <pf-option value="8">8</pf-option>
-          </pf-search-input>`);
+    it('sets aria-setsize and aria-posinset on items', function() {
+      element.options.forEach((option, i) => {
+        expect(option).to.have.attr('aria-setsize', '8');
+        expect(option).to.have.attr('aria-posinset', `${i + 1}`);
       });
+    });
+
+    describe('click combobox button', function() {
+      beforeEach(() => clickElementAtCenter(element));
+      beforeEach(() => aTimeout(300));
+      beforeEach(updateComplete);
 
       it('does not pass aXe audit', async function() {
         await expect(element).to.not.be.accessible();
       });
 
-      it('sets aria-setsize and aria-posinset on items', function() {
-        element.options.forEach((option, i) => {
-          expect(option).to.have.attr('aria-setsize', '8');
-          expect(option).to.have.attr('aria-posinset', `${i + 1}`);
-        });
+      it('expands the listbox', async function() {
+        expect(await a11ySnapshot()).to.axContainRole('listbox');
       });
 
-      describe('click combobox button', function() {
-        beforeEach(() => clickElementAtCenter(element));
-        beforeEach(() => aTimeout(300));
-        beforeEach(updateComplete);
-
-        it('does not pass aXe audit', async function() {
-          await expect(element).to.not.be.accessible();
+      describe('Tab', function() {
+        beforeEach(press('Tab'));
+        it('does not focus the combobox button', async function() {
+          expect(await a11ySnapshot()).to.not.have.axTreeFocusedNode;
         });
+      });
+    });
 
-        it('expands the listbox', async function() {
-          expect(await a11ySnapshot()).to.axContainRole('listbox');
-        });
+    describe('focus()', function() {
+      beforeEach(focus);
+      beforeEach(updateComplete);
 
-        describe('Tab', function() {
-          beforeEach(press('Tab'));
-          it('does not focus the combobox button', async function() {
-            expect(await a11ySnapshot()).to.not.have.axTreeFocusedNode;
-          });
-        });
+      it('focuses on the combobox button', async function() {
+        expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
       });
 
-      describe('focus()', function() {
-        beforeEach(focus);
-        beforeEach(updateComplete);
+      it('does not expand the listbox', async function() {
+        expect(element.expanded).to.be.false;
+        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+      });
 
-        it('focuses on the combobox button', async function() {
-          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+      describe('Space', function() {
+        beforeEach(function() {
+          document.body.style.height = '8000px';
         });
-
-        it('does not expand the listbox', async function() {
-          expect(element.expanded).to.be.false;
-          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+        afterEach(function() {
+          document.body.style.height = 'initial';
         });
 
-        describe('Space', function() {
-          beforeEach(function() {
-            document.body.style.height = '8000px';
-          });
-          afterEach(function() {
-            document.body.style.height = 'initial';
-          });
+        beforeEach(press(' '));
+        beforeEach(updateComplete);
 
-          beforeEach(press(' '));
-          beforeEach(updateComplete);
+        it('does not scroll the screen', function() {
+          expect(window.scrollY).to.equal(0);
+        });
+      });
 
-          it('does not scroll the screen', function() {
-            expect(window.scrollY).to.equal(0);
-          });
+      describe('Home', function() {
+        beforeEach(press('Home'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
+
+        it('expands the listbox', async function() {
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
         });
+      });
 
-        describe('Home', function() {
-          beforeEach(press('Home'));
-          beforeEach(() => aTimeout(300));
-          beforeEach(updateComplete);
+      describe('End', function() {
+        beforeEach(press('End'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
 
-          it('expands the listbox', async function() {
-            expect(await a11ySnapshot()).to.axContainRole('listbox');
-          });
+        it('expands the listbox', async function() {
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
         });
+      });
 
-        describe('End', function() {
-          beforeEach(press('End'));
-          beforeEach(() => aTimeout(300));
-          beforeEach(updateComplete);
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
 
-          it('expands the listbox', async function() {
-            expect(await a11ySnapshot()).to.axContainRole('listbox');
-          });
+        it('expands the listbox', async function() {
+          expect(element.expanded).to.be.true;
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
         });
 
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
-          beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
 
-          it('expands the listbox', async function() {
-            expect(element.expanded).to.be.true;
-            expect(await a11ySnapshot()).to.axContainRole('listbox');
+          it('focuses on option 2', async function() {
+            expect(getActiveOption(element)).to.have.value('2');
           });
 
-          describe('ArrowDown', function() {
-            beforeEach(press('ArrowDown'));
+          describe('ArrowUp', function() {
+            beforeEach(press('ArrowUp'));
             beforeEach(updateComplete);
-
-            it('focuses on option 2', async function() {
-              expect(getActiveOption(element)).to.have.value('2');
+            it('focuses on option 1', async function() {
+              expect(getActiveOption(element)).to.have.value('1');
             });
+          });
 
-            describe('ArrowUp', function() {
-              beforeEach(press('ArrowUp'));
-              beforeEach(updateComplete);
-              it('focuses on option 1', async function() {
-                expect(getActiveOption(element)).to.have.value('1');
-              });
+          describe('ArrowDown', async function() {
+            beforeEach(press('ArrowDown'));
+            beforeEach(updateComplete);
+            it('focuses on option 3', async function() {
+              expect(getActiveOption(element)).to.have.value('3');
             });
 
-            describe('ArrowDown', async function() {
-              beforeEach(press('ArrowDown'));
+            describe('Enter', function() {
+              beforeEach(press('Enter'));
               beforeEach(updateComplete);
-              it('focuses on option 3', async function() {
-                expect(getActiveOption(element)).to.have.value('3');
-              });
 
-              describe('Enter', function() {
-                beforeEach(press('Enter'));
-                beforeEach(updateComplete);
-
-                it('selects option 3', function() {
-                  expect(getSelectedOptionValue(element)).to.deep.equal([
-                    '3',
-                  ]);
-                });
+              it('selects option 3', function() {
+                expect(getSelectedOptionValue(element)).to.deep.equal([
+                  '3',
+                ]);
+              });
 
-                it('exposes selection to assistive technology', async function() {
-                  expect(await a11ySnapshot()).to.axContainQuery({
-                    role: 'combobox',
-                    value: '3',
-                  });
+              it('exposes selection to assistive technology', async function() {
+                expect(await a11ySnapshot()).to.axContainQuery({
+                  role: 'combobox',
+                  value: '3',
                 });
+              });
 
-                it('hides the listbox', async function() {
-                  expect(element.expanded).to.be.false;
-                  expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-                });
+              it('hides the listbox', async function() {
+                expect(element.expanded).to.be.false;
+                expect(await a11ySnapshot()).to.not.axContainRole('listbox');
               });
             });
           });
+        });
 
-          describe('Escape', function() {
-            beforeEach(press('Escape'));
-            beforeEach(nextFrame);
-            beforeEach(updateComplete);
+        describe('Escape', function() {
+          beforeEach(press('Escape'));
+          beforeEach(nextFrame);
+          beforeEach(updateComplete);
 
-            it('hides the listbox', async function() {
-              expect(element.expanded).to.be.false;
-              expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-            });
+          it('hides the listbox', async function() {
+            expect(element.expanded).to.be.false;
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
 
-            it('focuses the button', async function() {
-              expect(await a11ySnapshot())
-                  .axTreeFocusedNode
-                  .to.have.axRole('combobox');
-            });
+          it('focuses the button', async function() {
+            expect(await a11ySnapshot())
+                .axTreeFocusedNode
+                .to.have.axRole('combobox');
           });
         });
       });
     });
+  });
 
-    describe('text input interaction', function() {
-      let element: PfSearchInput;
-      const label = 'label';
-      const updateComplete = () => element.updateComplete;
-      const focus = () => element.focus();
+  describe('text input interaction', function() {
+    let element: PfSearchInput;
+    const label = 'label';
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus();
+
+    beforeEach(async function() {
+      element = await createFixture<PfSearchInput>(html`
+        <pf-search-input >
+          <pf-option>Blue</pf-option>
+          <pf-option>Green</pf-option>
+          <pf-option>Magenta</pf-option>
+          <pf-option>Orange</pf-option>
+          <pf-option>Purple</pf-option>
+          <pf-option>Periwinkle</pf-option>
+          <pf-option>Pink</pf-option>
+          <pf-option>Red</pf-option>
+          <pf-option>Yellow</pf-option>
+        </pf-search-input>`);
+    });
 
-      beforeEach(async function() {
-        element = await createFixture<PfSearchInput>(html`
-          <pf-search-input >
-            <pf-option>Blue</pf-option>
-            <pf-option>Green</pf-option>
-            <pf-option>Magenta</pf-option>
-            <pf-option>Orange</pf-option>
-            <pf-option>Purple</pf-option>
-            <pf-option>Periwinkle</pf-option>
-            <pf-option>Pink</pf-option>
-            <pf-option>Red</pf-option>
-            <pf-option>Yellow</pf-option>
-          </pf-search-input>`);
-      });
+    beforeEach(nextFrame);
+
+    it('does not have redundant role', async function() {
+      expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+    });
 
+    describe('with an `accessible-label` attribute', function() {
+      beforeEach(function() {
+        element.setAttribute('accessible-label', label);
+      });
       beforeEach(nextFrame);
 
+      it('passes aXe audit', async function() {
+        await expect(element).to.be.accessible();
+      });
+
       it('does not have redundant role', async function() {
         expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
       });
 
-      describe('with an `accessible-label` attribute', function() {
-        beforeEach(function() {
-          element.setAttribute('accessible-label', label);
-        });
-        beforeEach(nextFrame);
-
-        it('passes aXe audit', async function() {
-          await expect(element).to.be.accessible();
-        });
-
-        it('does not have redundant role', async function() {
-          expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+      it('labels the combobox with the label', async function() {
+        expect(await a11ySnapshot()).to.axContainQuery({
+          role: 'combobox',
+          name: label,
         });
+      });
 
-        it('labels the combobox with the label', async function() {
+      describe('show()', function() {
+        beforeEach(() => element.show());
+        it('labels the listbox with the placeholder attribute', async function() {
           expect(await a11ySnapshot()).to.axContainQuery({
-            role: 'combobox',
-            name: label,
+            role: 'listbox',
+            name: 'label',
           });
         });
+      });
+    });
 
-        describe('show()', function() {
-          beforeEach(() => element.show());
-          it('labels the listbox with the placeholder attribute', async function() {
-            expect(await a11ySnapshot()).to.axContainQuery({
-              role: 'listbox',
-              name: 'label',
-            });
-          });
+    describe('clicking the combobox input', function() {
+      beforeEach(async function() {
+        await clickElementAtOffset(element, [10, 10]);
+      });
+      beforeEach(() => aTimeout(300));
+      it('shows the listbox', async function() {
+        expect(element.expanded).to.be.true;
+        expect(await a11ySnapshot()).to.axContainRole('listbox');
+      });
+
+      it('focuses the combobox', async function() {
+        expect(element.expanded).to.be.true;
+        expect(await a11ySnapshot()).to.axContainQuery({
+          focused: true,
+          role: 'combobox',
         });
       });
 
-      describe('clicking the combobox input', function() {
+      describe('clicking option 1', function() {
         beforeEach(async function() {
-          await clickElementAtOffset(element, [10, 10]);
+          await clickItemAtIndex(element, 0);
         });
-        beforeEach(() => aTimeout(300));
-        it('shows the listbox', async function() {
-          expect(element.expanded).to.be.true;
-          expect(await a11ySnapshot()).to.axContainRole('listbox');
+
+        it('selects option 1', function() {
+          expect(getSelectedOptionValue(element)).to.deep.equal([
+            'Blue',
+          ]);
         });
 
-        it('focuses the combobox', async function() {
-          expect(element.expanded).to.be.true;
-          expect(await a11ySnapshot()).to.axContainQuery({
-            focused: true,
-            role: 'combobox',
-          });
+        it('closes the listbox', async function() {
+          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
         });
+      });
 
-        describe('clicking option 1', function() {
-          beforeEach(async function() {
-            await clickItemAtIndex(element, 0);
-          });
+      describe('clicking option 2', function() {
+        beforeEach(async function() {
+          await clickItemAtIndex(element, 1);
+        });
 
-          it('selects option 1', function() {
-            expect(getSelectedOptionValue(element)).to.deep.equal([
-              'Blue',
-            ]);
-          });
+        it('selects option 1', function() {
+          expect(getSelectedOptionValue(element)).to.deep.equal([
+            'Green',
+          ]);
+        });
 
-          it('closes the listbox', async function() {
-            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-          });
+        it('closes the listbox', async function() {
+          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
         });
+      });
+    });
 
-        describe('clicking option 2', function() {
-          beforeEach(async function() {
-            await clickItemAtIndex(element, 1);
-          });
+    describe('focus()', function() {
+      beforeEach(press('Tab'));
+      beforeEach(updateComplete);
 
-          it('selects option 1', function() {
-            expect(getSelectedOptionValue(element)).to.deep.equal([
-              'Green',
-            ]);
-          });
+      describe('"r"', function() {
+        beforeEach(press('r'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
 
-          it('closes the listbox', async function() {
-            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-          });
+        it('only shows options that start with "r" or "R"', async function() {
+          expect(getVisibleOptionValues(element)).to.deep.equal([
+            'Red',
+          ]);
         });
       });
 
-      describe('focus()', function() {
-        beforeEach(press('Tab'));
+      describe('Space', function() {
+        beforeEach(function() {
+          document.body.style.height = '8000px';
+        });
+        afterEach(function() {
+          document.body.style.height = 'initial';
+        });
+
+        beforeEach(press(' '));
         beforeEach(updateComplete);
+        beforeEach(() => aTimeout(300));
 
-        describe('"r"', function() {
-          beforeEach(press('r'));
-          beforeEach(() => aTimeout(300));
-          beforeEach(updateComplete);
+        it('does not expand the listbox', async function() {
+          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+        });
 
-          it('only shows options that start with "r" or "R"', async function() {
-            expect(getVisibleOptionValues(element)).to.deep.equal([
-              'Red',
-            ]);
-          });
+        it('does not scroll the screen', function() {
+          expect(window.scrollY).to.equal(0);
         });
+      });
 
-        describe('Space', function() {
-          beforeEach(function() {
-            document.body.style.height = '8000px';
-          });
-          afterEach(function() {
-            document.body.style.height = 'initial';
-          });
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
+        beforeEach(updateComplete);
+        beforeEach(() => aTimeout(200));
 
-          beforeEach(press(' '));
-          beforeEach(updateComplete);
-          beforeEach(() => aTimeout(300));
+        it('shows the listbox', async function() {
+          expect(element.expanded).to.be.true;
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
+        });
 
-          it('does not expand the listbox', async function() {
-            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+        // Skipping the test case as the role is visible in the accessibility tree,
+        // and since the pf-button uses ElementInternals, the test case is unable to access the role.
+        it.skip('labels the close button with the label', async function() {
+          expect(await a11ySnapshot()).to.axContainQuery({
+            role: 'button',
+            name: 'close',
           });
+        });
 
-          it('does not scroll the screen', function() {
-            expect(window.scrollY).to.equal(0);
-          });
+        it('focuses option 1', function() {
+          expect(getActiveOption(element)).to.have.value('Blue');
+        });
+
+        it('does not move keyboard focus', async function() {
+          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
         });
 
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
           beforeEach(updateComplete);
-          beforeEach(() => aTimeout(200));
 
-          it('shows the listbox', async function() {
-            expect(element.expanded).to.be.true;
-            expect(await a11ySnapshot()).to.axContainRole('listbox');
-          });
-
-          // Skipping the test case as the role is visible in the accessibility tree,
-          // and since the pf-button uses ElementInternals, the test case is unable to access the role.
-          it.skip('labels the close button with the label', async function() {
-            expect(await a11ySnapshot()).to.axContainQuery({
-              role: 'button',
-              name: 'close',
-            });
-          });
-
-          it('focuses option 1', function() {
-            expect(getActiveOption(element)).to.have.value('Blue');
-          });
-
-          it('does not move keyboard focus', async function() {
-            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+          it('focuses option 2', function() {
+            expect(getActiveOption(element)).to.have.text('Green');
           });
 
-          describe('ArrowDown', function() {
-            beforeEach(press('ArrowDown'));
+          describe('Enter', function() {
+            beforeEach(press('Enter'));
             beforeEach(updateComplete);
 
-            it('focuses option 2', function() {
-              expect(getActiveOption(element)).to.have.text('Green');
+            it('selects option 2', function() {
+              expect(getSelectedOptionValue(element)).to.deep.equal([
+                'Green',
+              ]);
             });
 
-            describe('Enter', function() {
-              beforeEach(press('Enter'));
-              beforeEach(updateComplete);
-
-              it('selects option 2', function() {
-                expect(getSelectedOptionValue(element)).to.deep.equal([
-                  'Green',
-                ]);
-              });
+            it('sets typeahead input to second option value', async function() {
+              expect(await a11ySnapshot())
+                  .axTreeFocusedNode
+                  .to.have.axProperty('value', 'Green');
+            });
 
-              it('sets typeahead input to second option value', async function() {
-                expect(await a11ySnapshot())
-                    .axTreeFocusedNode
-                    .to.have.axProperty('value', 'Green');
-              });
+            it('retains focus on combobox input', async function() {
+              expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+            });
 
-              it('retains focus on combobox input', async function() {
-                expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
-              });
+            it('hides the listbox', async function() {
+              expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+            });
 
-              it('hides the listbox', async function() {
-                expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-              });
+            describe('focus()', function() {
+              beforeEach(focus);
+              describe('ArrowDown', function() {
+                beforeEach(press('ArrowDown'));
+                beforeEach(() => aTimeout(300));
+                beforeEach(updateComplete);
 
-              describe('focus()', function() {
-                beforeEach(focus);
-                describe('ArrowDown', function() {
-                  beforeEach(press('ArrowDown'));
-                  beforeEach(() => aTimeout(300));
-                  beforeEach(updateComplete);
-
-                  it('only shows option 2', function() {
-                    expect(getVisibleOptionValues(element)).to.deep.equal([
-                      'Green',
-                    ]);
-                  });
+                it('only shows option 2', function() {
+                  expect(getVisibleOptionValues(element)).to.deep.equal([
+                    'Green',
+                  ]);
                 });
               });
             });
           });
+        });
 
-          describe('ArrowUp', function() {
-            beforeEach(press('ArrowUp'));
-            beforeEach(updateComplete);
+        describe('ArrowUp', function() {
+          beforeEach(press('ArrowUp'));
+          beforeEach(updateComplete);
 
-            it('focuses the last item', async function() {
-              expect(getActiveOption(element)).to.have.value('Yellow');
-            });
+          it('focuses the last item', async function() {
+            expect(getActiveOption(element)).to.have.value('Yellow');
           });
         });
+      });
 
-        describe('"p"', function() {
-          beforeEach(press('p'));
-          beforeEach(() => aTimeout(300));
+      describe('"p"', function() {
+        beforeEach(press('p'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
+
+        it('shows the listbox and maintains focus', async function() {
+          expect(await a11ySnapshot())
+              .to.axContainRole('listbox')
+              .and.axTreeFocusedNode
+              .to.have.axRole('combobox')
+              .and.to.have.axProperty('value', 'p');
+        });
+
+        it('only shows listbox items starting with the letter p', function() {
+          expect(getVisibleOptionValues(element)).to.deep.equal([
+            'Purple',
+            'Periwinkle',
+            'Pink',
+          ]);
+        });
+
+        describe('Backspace', function() {
+          beforeEach(press('Backspace'));
           beforeEach(updateComplete);
 
           it('shows the listbox and maintains focus', async function() {
@@ -667,115 +688,94 @@ describe('<pf-search-input>', function() {
                 .to.axContainRole('listbox')
                 .and.axTreeFocusedNode
                 .to.have.axRole('combobox')
-                .and.to.have.axProperty('value', 'p');
+                .and.to.not.have.axProperty('value', 'p');
           });
 
-          it('only shows listbox items starting with the letter p', function() {
+          it('all options are visible', async function() {
             expect(getVisibleOptionValues(element)).to.deep.equal([
+              'Blue',
+              'Green',
+              'Magenta',
+              'Orange',
               'Purple',
               'Periwinkle',
               'Pink',
+              'Red',
+              'Yellow',
             ]);
           });
+        });
 
-          describe('Backspace', function() {
-            beforeEach(press('Backspace'));
-            beforeEach(updateComplete);
-
-            it('shows the listbox and maintains focus', async function() {
-              expect(await a11ySnapshot())
-                  .to.axContainRole('listbox')
-                  .and.axTreeFocusedNode
-                  .to.have.axRole('combobox')
-                  .and.to.not.have.axProperty('value', 'p');
-            });
+        describe('"u"', function() {
+          beforeEach(press('u'));
+          beforeEach(updateComplete);
 
-            it('all options are visible', async function() {
-              expect(getVisibleOptionValues(element)).to.deep.equal([
-                'Blue',
-                'Green',
-                'Magenta',
-                'Orange',
-                'Purple',
-                'Periwinkle',
-                'Pink',
-                'Red',
-                'Yellow',
-              ]);
-            });
+          it('only shows the option "Purple"', function() {
+            expect(getVisibleOptionValues(element)).to.deep.equal([
+              'Purple',
+            ]);
           });
 
-          describe('"u"', function() {
-            beforeEach(press('u'));
+          describe('ArrowDown', function() {
+            beforeEach(press('ArrowDown'));
             beforeEach(updateComplete);
 
-            it('only shows the option "Purple"', function() {
-              expect(getVisibleOptionValues(element)).to.deep.equal([
-                'Purple',
-              ]);
+            it('focuses the option "Purple"', function() {
+              expect(getActiveOption(element)).to.have.text('Purple');
             });
 
-            describe('ArrowDown', function() {
-              beforeEach(press('ArrowDown'));
+            describe('Enter', function() {
+              beforeEach(press('Enter'));
+              beforeEach(() => aTimeout(300));
               beforeEach(updateComplete);
 
-              it('focuses the option "Purple"', function() {
-                expect(getActiveOption(element)).to.have.text('Purple');
+              it('selects the option "Purple"', function() {
+                expect(getSelectedOptionValue(element)).to.deep.equal([
+                  'Purple',
+                ]);
               });
 
-              describe('Enter', function() {
-                beforeEach(press('Enter'));
+              describe('Backspace (x5)', function() {
+                beforeEach(press('Backspace'));
+                beforeEach(press('Backspace'));
+                beforeEach(press('Backspace'));
+                beforeEach(press('Backspace'));
+                beforeEach(press('Backspace'));
                 beforeEach(() => aTimeout(300));
                 beforeEach(updateComplete);
 
-                it('selects the option "Purple"', function() {
-                  expect(getSelectedOptionValue(element)).to.deep.equal([
+                it('shows the options starting with "P"', function() {
+                  expect(getVisibleOptionValues(element)).to.deep.equal([
                     'Purple',
+                    'Periwinkle',
+                    'Pink',
                   ]);
                 });
 
-                describe('Backspace (x5)', function() {
-                  beforeEach(press('Backspace'));
-                  beforeEach(press('Backspace'));
-                  beforeEach(press('Backspace'));
-                  beforeEach(press('Backspace'));
-                  beforeEach(press('Backspace'));
-                  beforeEach(() => aTimeout(300));
-                  beforeEach(updateComplete);
-
-                  it('shows the options starting with "P"', function() {
-                    expect(getVisibleOptionValues(element)).to.deep.equal([
-                      'Purple',
-                      'Periwinkle',
-                      'Pink',
-                    ]);
-                  });
+                describe('Home', function() {
+                  beforeEach(press('Home'));
 
-                  describe('Home', function() {
-                    beforeEach(press('Home'));
+                  it('retains focus on the option "Purple"', function() {
+                    expect(getActiveOption(element)).to.have.text('Purple');
+                  });
 
-                    it('retains focus on the option "Purple"', function() {
-                      expect(getActiveOption(element)).to.have.text('Purple');
-                    });
+                  it('moves cursor to start', function() {
+                    // WARNING: ties test to DOM structure
+                    const input = element.shadowRoot?.querySelector('input');
+                    expect(input?.selectionStart).to.equal(0);
+                  });
+                });
+                describe('End', function() {
+                  beforeEach(press('End'));
 
-                    it('moves cursor to start', function() {
-                      // WARNING: ties test to DOM structure
-                      const input = element.shadowRoot?.querySelector('input');
-                      expect(input?.selectionStart).to.equal(0);
-                    });
+                  it('retains focus on the option "Purple"', function() {
+                    expect(getActiveOption(element)).to.have.text('Purple');
                   });
-                  describe('End', function() {
-                    beforeEach(press('End'));
-
-                    it('retains focus on the option "Purple"', function() {
-                      expect(getActiveOption(element)).to.have.text('Purple');
-                    });
-
-                    it('moves cursor to start', function() {
-                      // WARNING: ties test to DOM structure
-                      const input = element.shadowRoot?.querySelector('input');
-                      expect(input?.selectionStart).to.equal(1);
-                    });
+
+                  it('moves cursor to start', function() {
+                    // WARNING: ties test to DOM structure
+                    const input = element.shadowRoot?.querySelector('input');
+                    expect(input?.selectionStart).to.equal(1);
                   });
                 });
               });
@@ -783,100 +783,180 @@ describe('<pf-search-input>', function() {
           });
         });
       });
+    });
 
-      describe.skip('setting filter to "*"', function() {
-        beforeEach(function() {
-          // @ts-expect-error: todo: add filter feature
-          element.filter = '*';
-        });
+    describe.skip('setting filter to "*"', function() {
+      beforeEach(function() {
+        // @ts-expect-error: todo: add filter feature
+        element.filter = '*';
+      });
+      beforeEach(updateComplete);
+      it('does not error', async function() {
+        const snapshot = await a11ySnapshot();
+        const [, , listbox] = snapshot.children ?? [];
+        expect(listbox?.children).to.not.be.ok;
+      });
+    });
+
+    describe.skip('custom filtering', function() {
+      beforeEach(function() {
+        // @ts-expect-error: we intend to implement this in the next release
+        element.customFilter = option =>
+          // @ts-expect-error: TODO add filter feature
+          new RegExp(element.filter).test(option.value);
+      });
+
+      beforeEach(focus);
+
+      beforeEach(updateComplete);
+
+      describe('r', function() {
+        beforeEach(press('r'));
         beforeEach(updateComplete);
-        it('does not error', async function() {
-          const snapshot = await a11ySnapshot();
-          const [, , listbox] = snapshot.children ?? [];
-          expect(listbox?.children).to.not.be.ok;
+        it('shows options that contain "r"', async function() {
+          expect(getVisibleOptionValues(element)).to.deep.equal([
+            'Green',
+            'Orange',
+            'Purple',
+          ]);
         });
       });
 
-      describe.skip('custom filtering', function() {
-        beforeEach(function() {
-          // @ts-expect-error: we intend to implement this in the next release
-          element.customFilter = option =>
-            // @ts-expect-error: TODO add filter feature
-            new RegExp(element.filter).test(option.value);
+      describe('typing "R"', function() {
+        beforeEach(press('R'));
+        beforeEach(nextFrame);
+        beforeEach(updateComplete);
+        it('shows options that start with "r"', async function() {
+          expect(getVisibleOptionValues(element)).to.deep.equal([
+            'Red',
+          ]);
         });
+      });
+    });
+  });
 
-        beforeEach(focus);
+  describe('with `disabled` attribute', function() {
+    let element: PfSearchInput;
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus();
+
+    beforeEach(async function() {
+      element = await createFixture<PfSearchInput>(html`
+        <pf-search-input id="disabled-search" disabled>
+          <pf-option value="1">1</pf-option>
+          <pf-option value="2">2</pf-option>
+          <pf-option value="3">3</pf-option>
+        </pf-search-input>
+        <label for="disabled-search">Disabled</label>`);
+      await updateComplete();
+    });
 
+    it('passes aXe audit', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('is marked as disabled in accessibility tree', async function() {
+      expect(await a11ySnapshot()).to.axContainQuery({
+        role: 'combobox',
+        disabled: true,
+      });
+    });
+
+    describe('focus()', function() {
+      beforeEach(focus);
+      beforeEach(updateComplete);
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
         beforeEach(updateComplete);
 
-        describe('r', function() {
-          beforeEach(press('r'));
-          beforeEach(updateComplete);
-          it('shows options that contain "r"', async function() {
-            expect(getVisibleOptionValues(element)).to.deep.equal([
-              'Green',
-              'Orange',
-              'Purple',
-            ]);
-          });
+        it('does not open on focus and keyboard interaction', async function() {
+          // Should remain closed
+          expect(element.expanded).to.be.false;
+          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
         });
+      });
 
-        describe('typing "R"', function() {
-          beforeEach(press('R'));
-          beforeEach(nextFrame);
-          beforeEach(updateComplete);
-          it('shows options that start with "r"', async function() {
-            expect(getVisibleOptionValues(element)).to.deep.equal([
-              'Red',
-            ]);
-          });
+      describe('"1" when input is disabled', function() {
+        beforeEach(press('1'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
+
+        it('does not show any options', async function() {
+          expect(element.expanded).to.be.false;
+          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+        });
+
+        it('does not add any value to the input', async function() {
+          const input = element.shadowRoot?.querySelector('input');
+          expect(input?.value).to.equal('');
         });
       });
     });
 
-    describe('with `disabled` attribute', function() {
-      let element: PfSearchInput;
-      const updateComplete = () => element.updateComplete;
-      const focus = () => element.focus();
+    describe('clicking the element', function() {
+      beforeEach(async function() {
+        await clickElementAtOffset(element, [10, 10]);
+      });
+      it('cannot be interacted with via click', async function() {
+        expect(element.expanded).to.be.false;
+        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+      });
+    });
+  });
+
+  describe('clicking the close button', function() {
+    let element: PfSearchInput;
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus();
+
+    beforeEach(async function() {
+      element = await createFixture<PfSearchInput>(html`
+        <pf-search-input id="disabled-search" disabled>
+          <pf-option value="1">1</pf-option>
+          <pf-option value="2">2</pf-option>
+          <pf-option value="3">3</pf-option>
+        </pf-search-input>
+        <label for="disabled-search">Disabled</label>`);
+      await updateComplete();
+    });
+
+    it('passes aXe audit', async function() {
+      await expect(element).to.be.accessible();
+    });
 
+    describe('clicking the close button when list box is open', function() {
       beforeEach(async function() {
-        element = await createFixture<PfSearchInput>(html`
-          <pf-search-input id="disabled-search" disabled>
-            <pf-option value="1">1</pf-option>
-            <pf-option value="2">2</pf-option>
-            <pf-option value="3">3</pf-option>
-          </pf-search-input>
-          <label for="disabled-search">Disabled</label>`);
-        await updateComplete();
+        await clickElementAtOffset(element, [-10, 10]);
       });
 
-      it('passes aXe audit', async function() {
-        await expect(element).to.be.accessible();
+      it('hides the listbox', async function() {
+        expect(element.expanded).not.to.be.true;
+        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
       });
 
-      it('is marked as disabled in accessibility tree', async function() {
-        expect(await a11ySnapshot()).to.axContainQuery({
-          role: 'combobox',
-          disabled: true,
+      it('hides the close button', async function() {
+        expect(await a11ySnapshot()).not.to.axContainQuery({
+          name: 'close',
+          role: 'button',
         });
       });
 
+      it('removes the selected option value', async function() {
+        expect(getSelectedOptionValue(element)).to.deep.equal([]);
+      });
+
+      it('clears the input value', async function() {
+        const input = element.shadowRoot?.querySelector('input');
+        expect(input?.value).to.equal('');
+      });
+    });
+
+    describe('clicking the close button when list box is closed and input has value', function() {
       describe('focus()', function() {
         beforeEach(focus);
         beforeEach(updateComplete);
-        describe('ArrowDown', function() {
-          beforeEach(press('ArrowDown'));
-          beforeEach(updateComplete);
-
-          it('does not open on focus and keyboard interaction', async function() {
-            // Should remain closed
-            expect(element.expanded).to.be.false;
-            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-          });
-        });
-
-        describe('"1" when input is disabled', function() {
-          beforeEach(press('1'));
+        describe(' press "z"', function() {
+          beforeEach(press('z'));
           beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
 
@@ -884,46 +964,8 @@ describe('<pf-search-input>', function() {
             expect(element.expanded).to.be.false;
             expect(await a11ySnapshot()).to.not.axContainRole('listbox');
           });
-
-          it('does not add any value to the input', async function() {
-            const input = element.shadowRoot?.querySelector('input');
-            expect(input?.value).to.equal('');
-          });
-        });
-      });
-
-      describe('clicking the element', function() {
-        beforeEach(async function() {
-          await clickElementAtOffset(element, [10, 10]);
-        });
-        it('cannot be interacted with via click', async function() {
-          expect(element.expanded).to.be.false;
-          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
         });
-      });
-    });
-
-    describe('clicking the close button', function() {
-      let element: PfSearchInput;
-      const updateComplete = () => element.updateComplete;
-      const focus = () => element.focus();
-
-      beforeEach(async function() {
-        element = await createFixture<PfSearchInput>(html`
-          <pf-search-input id="disabled-search" disabled>
-            <pf-option value="1">1</pf-option>
-            <pf-option value="2">2</pf-option>
-            <pf-option value="3">3</pf-option>
-          </pf-search-input>
-          <label for="disabled-search">Disabled</label>`);
-        await updateComplete();
-      });
-
-      it('passes aXe audit', async function() {
-        await expect(element).to.be.accessible();
-      });
 
-      describe('clicking the close button when list box is open', function() {
         beforeEach(async function() {
           await clickElementAtOffset(element, [-10, 10]);
         });
@@ -940,281 +982,239 @@ describe('<pf-search-input>', function() {
           });
         });
 
-        it('removes the selected option value', async function() {
-          expect(getSelectedOptionValue(element)).to.deep.equal([]);
-        });
-
         it('clears the input value', async function() {
           const input = element.shadowRoot?.querySelector('input');
           expect(input?.value).to.equal('');
         });
       });
+    });
+  });
 
-      describe('clicking the close button when list box is closed and input has value', function() {
-        describe('focus()', function() {
-          beforeEach(focus);
-          beforeEach(updateComplete);
-          describe(' press "z"', function() {
-            beforeEach(press('z'));
-            beforeEach(() => aTimeout(300));
-            beforeEach(updateComplete);
+  describe('Outside click behavior', function() {
+    let element: PfSearchInput;
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus();
+    let outsideElement: HTMLElement;
+
+    beforeEach(async function() {
+      element = await createFixture<PfSearchInput>(html`
+        <pf-search-input>
+          <pf-option value="11">11</pf-option>
+          <pf-option value="12">12</pf-option>
+          <pf-option value="13">13</pf-option>
+          <pf-option value="21">21</pf-option>
+          <pf-option value="22">22</pf-option>
+          <pf-option value="23">23</pf-option>
+        </pf-search-input>
+      `);
+
+      // Create a dummy div to represent an "outside" area
+      outsideElement = document.createElement('div');
+      outsideElement.style.width = '200px';
+      outsideElement.style.height = '200px';
+      document.body.appendChild(outsideElement);
+    });
 
-            it('does not show any options', async function() {
-              expect(element.expanded).to.be.false;
-              expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-            });
-          });
+    describe('focus()', function() {
+      beforeEach(focus);
+      beforeEach(updateComplete);
 
-          beforeEach(async function() {
-            await clickElementAtOffset(element, [-10, 10]);
-          });
+      describe('"1"', function() {
+        beforeEach(press('1'));
+        beforeEach(() => aTimeout(300));
+        beforeEach(updateComplete);
 
-          it('hides the listbox', async function() {
-            expect(element.expanded).not.to.be.true;
-            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
-          });
+        it('should open the listbox when focused', function() {
+          expect(element.expanded).to.be.true;
+        });
 
-          it('hides the close button', async function() {
-            expect(await a11ySnapshot()).not.to.axContainQuery({
-              name: 'close',
-              role: 'button',
-            });
+        it('only shows options that start with "1"', async function() {
+          expect(getVisibleOptionValues(element)).to.deep.equal([
+            '11',
+            '12',
+            '13',
+          ]);
+        });
+
+        describe('click outside the element', function() {
+          // Click outside element
+          beforeEach(() => clickElementAtCenter(outsideElement));
+          beforeEach(() => aTimeout(300));
+          beforeEach(updateComplete);
+
+          it('should close the listbox when clicking outside', async function() {
+            expect(element.expanded).to.be.false;
           });
 
-          it('clears the input value', async function() {
+          it('should keep the entered value after outside click', async function() {
             const input = element.shadowRoot?.querySelector('input');
-            expect(input?.value).to.equal('');
+            expect(input?.value).to.equal('1');
           });
         });
       });
     });
+  });
 
-    describe('Outside click behavior', function() {
-      let element: PfSearchInput;
-      const updateComplete = () => element.updateComplete;
-      const focus = () => element.focus();
-      let outsideElement: HTMLElement;
-
-      beforeEach(async function() {
-        element = await createFixture<PfSearchInput>(html`
-          <pf-search-input>
-            <pf-option value="11">11</pf-option>
-            <pf-option value="12">12</pf-option>
-            <pf-option value="13">13</pf-option>
-            <pf-option value="21">21</pf-option>
-            <pf-option value="22">22</pf-option>
-            <pf-option value="23">23</pf-option>
-          </pf-search-input>
-        `);
+  describe('on focus-out behavior', function() {
+    let element: PfSearchInput;
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus();
+
+    beforeEach(async function() {
+      element = await createFixture<PfSearchInput>(html`
+        <pf-search-input>
+          <pf-option value="11">11</pf-option>
+          <pf-option value="12">12</pf-option>
+          <pf-option value="13">13</pf-option>
+          <pf-option value="21">21</pf-option>
+          <pf-option value="22">22</pf-option>
+          <pf-option value="23">23</pf-option>
+        </pf-search-input>
+      `);
+
+      beforeEach(updateComplete);
+    });
 
-        // Create a dummy div to represent an "outside" area
-        outsideElement = document.createElement('div');
-        outsideElement.style.width = '200px';
-        outsideElement.style.height = '200px';
-        document.body.appendChild(outsideElement);
-      });
+    describe('focus()', function() {
+      beforeEach(focus);
+      beforeEach(() => aTimeout(300));
+      beforeEach(updateComplete);
 
-      describe('focus()', function() {
-        beforeEach(focus);
+      describe('"1"', function() {
+        beforeEach(press('1'));
+        beforeEach(() => aTimeout(300));
         beforeEach(updateComplete);
 
-        describe('"1"', function() {
-          beforeEach(press('1'));
+        it('should open the listbox when focused', function() {
+          expect(element.expanded).to.be.true;
+        });
+
+        it('only shows options that start with "1"', async function() {
+          expect(getVisibleOptionValues(element)).to.deep.equal([
+            '11',
+            '12',
+            '13',
+          ]);
+        });
+
+        describe('move the focus out of the element', function() {
+          beforeEach(press('Tab'));
+          beforeEach(() => aTimeout(300));
+          beforeEach(updateComplete);
+          beforeEach(press('Tab'));
           beforeEach(() => aTimeout(300));
           beforeEach(updateComplete);
 
-          it('should open the listbox when focused', function() {
-            expect(element.expanded).to.be.true;
-          });
-
-          it('only shows options that start with "1"', async function() {
-            expect(getVisibleOptionValues(element)).to.deep.equal([
-              '11',
-              '12',
-              '13',
-            ]);
+          it('should close the listbox when focused out', async function() {
+            expect(element.expanded).to.be.false;
           });
 
-          describe('click outside the element', function() {
-            // Click outside element
-            beforeEach(() => clickElementAtCenter(outsideElement));
-            beforeEach(() => aTimeout(300));
-            beforeEach(updateComplete);
-
-            it('should close the listbox when clicking outside', async function() {
-              expect(element.expanded).to.be.false;
-            });
-
-            it('should keep the entered value after outside click', async function() {
-              const input = element.shadowRoot?.querySelector('input');
-              expect(input?.value).to.equal('1');
-            });
+          it('should keep the entered value after focus out', async function() {
+            const input = element.shadowRoot?.querySelector('input');
+            expect(input?.value).to.equal('1');
           });
         });
       });
     });
+  });
 
-    describe('on focus-out behavior', function() {
-      let element: PfSearchInput;
-      const updateComplete = () => element.updateComplete;
-      const focus = () => element.focus();
-
-      beforeEach(async function() {
-        element = await createFixture<PfSearchInput>(html`
-          <pf-search-input>
-            <pf-option value="11">11</pf-option>
-            <pf-option value="12">12</pf-option>
-            <pf-option value="13">13</pf-option>
-            <pf-option value="21">21</pf-option>
-            <pf-option value="22">22</pf-option>
-            <pf-option value="23">23</pf-option>
+  describe('form submission with pf-search-input', function() {
+    let form: HTMLFormElement;
+    let searchInput: PfSearchInput;
+    const updateComplete = () => searchInput.updateComplete;
+    const focus = () => searchInput.focus();
+    let submittedData: FormData | null;
+
+    beforeEach(async function() {
+      form = await createFixture<HTMLFormElement>(html`
+        <form>
+          <pf-search-input name="search">
+            <pf-option value="Alabama">Alabama</pf-option>
+            <pf-option value="New York">New York</pf-option>
+            <pf-option value="New Jersey">New Jersey</pf-option>
           </pf-search-input>
-        `);
+          <button type="submit">Submit</button>
+        </form>
+      `);
 
-        beforeEach(updateComplete);
+      searchInput = form.querySelector('pf-search-input')!;
+      beforeEach(updateComplete);
+
+      form.addEventListener('submit', e => {
+        e.preventDefault();
+        submittedData = new FormData(form);
       });
+    });
 
-      describe('focus()', function() {
+    describe('when a user types and selects an option', function() {
+      describe('focus', function() {
         beforeEach(focus);
         beforeEach(() => aTimeout(300));
         beforeEach(updateComplete);
-
-        describe('"1"', function() {
-          beforeEach(press('1'));
-          beforeEach(() => aTimeout(300));
+        describe('press `New`', function() {
           beforeEach(updateComplete);
+          beforeEach(() => aTimeout(300));
+          beforeEach(press('N'));
+          beforeEach(() => aTimeout(300));
+          beforeEach(press('e'));
+          beforeEach(() => aTimeout(300));
+          beforeEach(press('w'));
 
-          it('should open the listbox when focused', function() {
-            expect(element.expanded).to.be.true;
-          });
-
-          it('only shows options that start with "1"', async function() {
-            expect(getVisibleOptionValues(element)).to.deep.equal([
-              '11',
-              '12',
-              '13',
-            ]);
-          });
-
-          describe('move the focus out of the element', function() {
-            beforeEach(press('Tab'));
-            beforeEach(() => aTimeout(300));
+          describe('select the first option starting with `New` and submit the form', function() {
             beforeEach(updateComplete);
-            beforeEach(press('Tab'));
             beforeEach(() => aTimeout(300));
+            beforeEach(press('ArrowDown'));
+            beforeEach(() => aTimeout(300));
+            beforeEach(press('Enter'));
             beforeEach(updateComplete);
 
-            it('should close the listbox when focused out', async function() {
-              expect(element.expanded).to.be.false;
+            it('should select the option', function() {
+              expect(getSelectedOptionValue(searchInput)).to.deep.equal([
+                'New York',
+              ]);
             });
 
-            it('should keep the entered value after focus out', async function() {
-              const input = element.shadowRoot?.querySelector('input');
-              expect(input?.value).to.equal('1');
+            it('should close the dropdown after selection', function() {
+              expect(searchInput.expanded).to.be.false;
             });
-          });
-        });
-      });
-    });
-
-    describe('form submission with pf-search-input', function() {
-      let form: HTMLFormElement;
-      let searchInput: PfSearchInput;
-      const updateComplete = () => searchInput.updateComplete;
-      const focus = () => searchInput.focus();
-      let submittedData: FormData | null;
-
-      beforeEach(async function() {
-        form = await createFixture<HTMLFormElement>(html`
-          <form>
-            <pf-search-input name="search">
-              <pf-option value="Alabama">Alabama</pf-option>
-              <pf-option value="New York">New York</pf-option>
-              <pf-option value="New Jersey">New Jersey</pf-option>
-            </pf-search-input>
-            <button type="submit">Submit</button>
-          </form>
-        `);
-
-        searchInput = form.querySelector('pf-search-input')!;
-        beforeEach(updateComplete);
-
-        form.addEventListener('submit', e => {
-          e.preventDefault();
-          submittedData = new FormData(form);
-        });
-      });
-
-      describe('when a user types and selects an option', function() {
-        describe('focus', function() {
-          beforeEach(focus);
-          beforeEach(() => aTimeout(300));
-          beforeEach(updateComplete);
-          describe('press `New`', function() {
-            beforeEach(updateComplete);
-            beforeEach(() => aTimeout(300));
-            beforeEach(press('N'));
-            beforeEach(() => aTimeout(300));
-            beforeEach(press('e'));
-            beforeEach(() => aTimeout(300));
-            beforeEach(press('w'));
-
-            describe('select the first option starting with `New` and submit the form', function() {
-              beforeEach(updateComplete);
-              beforeEach(() => aTimeout(300));
-              beforeEach(press('ArrowDown'));
-              beforeEach(() => aTimeout(300));
-              beforeEach(press('Enter'));
-              beforeEach(updateComplete);
-
-              it('should select the option', function() {
-                expect(getSelectedOptionValue(searchInput)).to.deep.equal([
-                  'New York',
-                ]);
-              });
-
-              it('should close the dropdown after selection', function() {
-                expect(searchInput.expanded).to.be.false;
-              });
 
-              it('should keep selected value in input after submission', function() {
-                const input = searchInput.shadowRoot?.querySelector('input');
-                expect(input?.value).to.equal('New York');
-              });
+            it('should keep selected value in input after submission', function() {
+              const input = searchInput.shadowRoot?.querySelector('input');
+              expect(input?.value).to.equal('New York');
+            });
 
-              describe('on form submit event', function() {
-                it('should submit the selected value from pf-search-input', async function() {
-                  const event = new SubmitEvent('submit', {
-                    bubbles: true,
-                    cancelable: true,
-                  });
+            describe('on form submit event', function() {
+              it('should submit the selected value from pf-search-input', async function() {
+                const event = new SubmitEvent('submit', {
+                  bubbles: true,
+                  cancelable: true,
+                });
 
-                  form.dispatchEvent(event);
-                  expect(event.defaultPrevented).to.be.true;
+                form.dispatchEvent(event);
+                expect(event.defaultPrevented).to.be.true;
 
-                  expect(submittedData).to.not.be.null;
-                  expect(submittedData?.get('search')).to.equal('New York');
-                });
+                expect(submittedData).to.not.be.null;
+                expect(submittedData?.get('search')).to.equal('New York');
               });
+            });
 
-              describe('on submit button click', function() {
-                it('should submit the selected value', async function() {
-                  form.querySelector('button')?.click();
-                  beforeEach(() => aTimeout(300));
+            describe('on submit button click', function() {
+              it('should submit the selected value', async function() {
+                form.querySelector('button')?.click();
+                beforeEach(() => aTimeout(300));
 
-                  expect(submittedData).to.not.be.null;
-                  expect(submittedData?.get('search')).to.equal('New York');
-                });
+                expect(submittedData).to.not.be.null;
+                expect(submittedData?.get('search')).to.equal('New York');
               });
+            });
 
-              describe('form submit on clicking `enter` key', function() {
-                beforeEach(press('Enter'));
-                beforeEach(updateComplete);
+            describe('form submit on clicking `enter` key', function() {
+              beforeEach(press('Enter'));
+              beforeEach(updateComplete);
 
-                it('should submit the selected value', function() {
-                  expect(submittedData).to.not.be.null;
-                  expect(submittedData?.get('search')).to.equal('New York');
-                });
+              it('should submit the selected value', function() {
+                expect(submittedData).to.not.be.null;
+                expect(submittedData?.get('search')).to.equal('New York');
               });
             });
           });

From 27c9694d5b2b99fac9fcb8519a64f1ec312de7a7 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 6 Aug 2025 17:00:22 +0300
Subject: [PATCH 85/85] test(search-input): correct test cases

---
 .../test/pf-search-input.spec.ts              | 39 ++++---------------
 1 file changed, 8 insertions(+), 31 deletions(-)

diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-search-input/test/pf-search-input.spec.ts
index 0c6a95fab6..47089be493 100644
--- a/elements/pf-search-input/test/pf-search-input.spec.ts
+++ b/elements/pf-search-input/test/pf-search-input.spec.ts
@@ -4,7 +4,6 @@ import { PfSearchInput } from '../pf-search-input.js';
 import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { clickElementAtCenter, clickElementAtOffset } from '@patternfly/pfe-tools/test/utils.js';
-import type { PfOption } from '../../pf-select/pf-option.js';
 
 function press(key: string) {
   return async function() {
@@ -12,16 +11,6 @@ function press(key: string) {
   };
 }
 
-/**
- * Get the value of the first selected option
- * @param element pf-select
- * @returns the value of the selected option, or undefined if none selected
- */
-function getSelectedOptionValue(element: PfSearchInput): string[] {
-  return Array.from(element.querySelectorAll<PfOption>('[selected]'), x => x.value);
-}
-
-
 // a11yShapshot does not surface the options
 function getVisibleOptionValues(element: PfSearchInput): string[] {
   return element.options.filter(x => !x.hidden).map(x => x.value);
@@ -385,9 +374,7 @@ describe('<pf-search-input>', function() {
               beforeEach(updateComplete);
 
               it('selects option 3', function() {
-                expect(getSelectedOptionValue(element)).to.deep.equal([
-                  '3',
-                ]);
+                expect(element.value).to.equal('3');
               });
 
               it('exposes selection to assistive technology', async function() {
@@ -425,7 +412,7 @@ describe('<pf-search-input>', function() {
     });
   });
 
-  describe('text input interaction', function() {
+  describe('with alphabetically sorted items', function() {
     let element: PfSearchInput;
     const label = 'label';
     const updateComplete = () => element.updateComplete;
@@ -508,9 +495,7 @@ describe('<pf-search-input>', function() {
         });
 
         it('selects option 1', function() {
-          expect(getSelectedOptionValue(element)).to.deep.equal([
-            'Blue',
-          ]);
+          expect(element.value).to.equal('Blue');
         });
 
         it('closes the listbox', async function() {
@@ -524,9 +509,7 @@ describe('<pf-search-input>', function() {
         });
 
         it('selects option 1', function() {
-          expect(getSelectedOptionValue(element)).to.deep.equal([
-            'Green',
-          ]);
+          expect(element.value).to.equal('Green');
         });
 
         it('closes the listbox', async function() {
@@ -612,9 +595,7 @@ describe('<pf-search-input>', function() {
             beforeEach(updateComplete);
 
             it('selects option 2', function() {
-              expect(getSelectedOptionValue(element)).to.deep.equal([
-                'Green',
-              ]);
+              expect(element.value).to.equal('Green');
             });
 
             it('sets typeahead input to second option value', async function() {
@@ -730,9 +711,7 @@ describe('<pf-search-input>', function() {
               beforeEach(updateComplete);
 
               it('selects the option "Purple"', function() {
-                expect(getSelectedOptionValue(element)).to.deep.equal([
-                  'Purple',
-                ]);
+                expect(element.value).to.equal('Purple');
               });
 
               describe('Backspace (x5)', function() {
@@ -942,7 +921,7 @@ describe('<pf-search-input>', function() {
       });
 
       it('removes the selected option value', async function() {
-        expect(getSelectedOptionValue(element)).to.deep.equal([]);
+        expect(element.value).to.be.undefined;
       });
 
       it('clears the input value', async function() {
@@ -1169,9 +1148,7 @@ describe('<pf-search-input>', function() {
             beforeEach(updateComplete);
 
             it('should select the option', function() {
-              expect(getSelectedOptionValue(searchInput)).to.deep.equal([
-                'New York',
-              ]);
+              expect(searchInput.value).to.equal('New York');
             });
 
             it('should close the dropdown after selection', function() {