diff --git a/.changeset/late-ravens-smoke.md b/.changeset/late-ravens-smoke.md
deleted file mode 100644
index 34c2c7931..000000000
--- a/.changeset/late-ravens-smoke.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@qwik-ui/headless': patch
----
-
-fix: select validates correctly with modular forms
diff --git a/.changeset/twenty-spoons-fail.md b/.changeset/twenty-spoons-fail.md
new file mode 100644
index 000000000..de92b2cae
--- /dev/null
+++ b/.changeset/twenty-spoons-fail.md
@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+Chromium 109-113 did not properly support the popover but reported that they did. This led to the polyfill not activating which caused our E2E tests to break. We are dropping down to Chromium 108 to validate the polyfill as users of Chrome would see it before the popover API was supported.
diff --git a/apps/website/src/routes/docs/headless/select/examples/description.tsx b/apps/website/src/routes/docs/headless/select/examples/description.tsx
new file mode 100644
index 000000000..4f4061c9c
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/select/examples/description.tsx
@@ -0,0 +1,33 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Select } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
+
+  return (
+    <Select.Root class="select">
+      <Select.Label>Logged in users</Select.Label>
+      <Select.Trigger class="select-trigger">
+        <Select.DisplayValue placeholder="Select an option" />
+      </Select.Trigger>
+      <Select.Description>Select a user to see their profile</Select.Description>
+      <Select.Popover class="select-popover">
+        <Select.Listbox class="select-listbox">
+          {users.map((user) => (
+            <Select.Item class="select-item" key={user}>
+              <Select.ItemLabel>{user}</Select.ItemLabel>
+              <Select.ItemIndicator>
+                <LuCheck />
+              </Select.ItemIndicator>
+            </Select.Item>
+          ))}
+        </Select.Listbox>
+      </Select.Popover>
+    </Select.Root>
+  );
+});
+
+// internal
+import styles from '../snippets/select.css?inline';
+import { LuCheck } from '@qwikest/icons/lucide';
diff --git a/apps/website/src/routes/docs/headless/select/examples/validation.tsx b/apps/website/src/routes/docs/headless/select/examples/validation.tsx
index 865c4b57f..fd51df1b0 100644
--- a/apps/website/src/routes/docs/headless/select/examples/validation.tsx
+++ b/apps/website/src/routes/docs/headless/select/examples/validation.tsx
@@ -34,7 +34,11 @@ export default component$(() => {
               <Select.Trigger class="select-trigger">
                 <Select.DisplayValue placeholder="Select an option" />
               </Select.Trigger>
-              {field.error && <div style={{ color: '#D2122E' }}>{field.error}</div>}
+              {field.error && (
+                <Select.ErrorMessage style={{ color: '#D2122E' }}>
+                  {field.error}
+                </Select.ErrorMessage>
+              )}
               <Select.Popover class="select-popover">
                 <Select.Listbox class="select-listbox">
                   {users.map((user) => (
diff --git a/apps/website/src/routes/docs/headless/select/index.mdx b/apps/website/src/routes/docs/headless/select/index.mdx
index 212ae3b6e..031b58968 100644
--- a/apps/website/src/routes/docs/headless/select/index.mdx
+++ b/apps/website/src/routes/docs/headless/select/index.mdx
@@ -175,7 +175,15 @@ The native select element is created when a form name has been given to `<Select
 
 <Showcase name="validation" />
 
-Above is an example of submitting a multi-select form.
+The `<Select.ErrorMessage />` component is used to display errors when the select is invalid.
+
+To style based on the invalid state, use the `data-invalid` data attribute.
+
+### Descriptions
+
+Provide more information to assistive technologies by adding a description to the select.
+
+<Showcase name="description" />
 
 ## Component state
 
diff --git a/apps/website/src/routes/docs/headless/select/snippets/select.css b/apps/website/src/routes/docs/headless/select/snippets/select.css
index 582740d8a..bd124480e 100644
--- a/apps/website/src/routes/docs/headless/select/snippets/select.css
+++ b/apps/website/src/routes/docs/headless/select/snippets/select.css
@@ -10,19 +10,28 @@
   width: 100%;
   height: 100%;
   border: 2px dotted hsla(var(--primary) / 1);
-  border-radius: calc(var (--border-radius) / 2);
   min-height: 44px;
   max-width: var(--select-width);
   padding-block: 0.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 0.25rem;
 }
 
 .select-trigger:hover {
   background-color: hsla(var(--primary) / 0.08);
 }
 
+.select-trigger:focus-visible {
+  outline: 2px solid hsla(var(--primary) / 1);
+  outline-offset: 2px;
+}
+
+.select-trigger[data-invalid] {
+  border: 2px dotted #d2122e;
+}
+
 .select-popover {
   width: 100%;
   max-width: var(--select-width);
@@ -33,7 +42,6 @@
   background-color: hsl(var(--background));
   padding: 0.5rem;
   border: 2px dotted hsla(var(--foreground) / 0.6);
-  border-radius: calc(var(--border-radius) / 2);
   max-width: var(--select-width);
   color: hsl(var(--foreground));
 }
@@ -87,7 +95,6 @@
 [data-highlighted] {
   background-color: hsla(var(--primary) / 0.08);
   outline: 2px dotted hsla(var(--primary) / 1);
-  border-radius: calc(var(--border-radius) / 2);
 }
 
 [data-disabled] {
diff --git a/package.json b/package.json
index 467bdcc1f..48db63cf0 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "test.headless": "nx component-test headless --skip-nx-cache",
     "test.visual.headless": "nx visual-test headless",
     "test.pw.headless": "nx e2e headless",
-    "test.pw.headless-chrome-113": "nx e2e-chrome-113 headless",
+    "test.pw.headless-chrome-108": "nx e2e-chrome-108 headless",
     "test.pw.headless.ci": "nx e2e headless",
     "test.headless.ci": "nx component-test-ci headless",
     "test.utils": "nx test utils"
diff --git a/packages/kit-headless/CHANGELOG.md b/packages/kit-headless/CHANGELOG.md
index a1bae1abe..52acfb150 100644
--- a/packages/kit-headless/CHANGELOG.md
+++ b/packages/kit-headless/CHANGELOG.md
@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.4.4
+
+### Patch Changes
+
+- ✨ new Select.ErrorMessage component (by [@thejackshelton](https://github.com/thejackshelton) in [#825](https://github.com/qwikifiers/qwik-ui/pull/825))
+
+  feat: data-invalid attribute to style when the select is invalid
+
+  feat: new Select.Description component
+
+## 0.4.3
+
+### Patch Changes
+
+- 🐞🩹 select validates correctly with modular forms (by [@thejackshelton](https://github.com/thejackshelton) in [#814](https://github.com/qwikifiers/qwik-ui/pull/814))
+
+- refactor: improved select focus navigation (by [@thejackshelton](https://github.com/thejackshelton) in [#822](https://github.com/qwikifiers/qwik-ui/pull/822))
+
+- 🐞🩹 select can now be reactively disabled (by [@thejackshelton](https://github.com/thejackshelton) in [#823](https://github.com/qwikifiers/qwik-ui/pull/823))
+
 ## 0.4.2
 
 ### Patch Changes
diff --git a/packages/kit-headless/package.json b/packages/kit-headless/package.json
index 81fe8e6b3..8cb78618f 100644
--- a/packages/kit-headless/package.json
+++ b/packages/kit-headless/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qwik-ui/headless",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Qwik UI headless components library",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
   "types": "./index.d.ts",
   "type": "module",
   "scripts": {
-    "setup.chrome.113": "npx tsx ./scripts/prepare-chrome-113.ts"
+    "setup.chrome.108": "npx tsx ./scripts/prepare-chrome-browser.ts"
   },
   "exports": {
     ".": {
diff --git a/packages/kit-headless/playwright.config.ts b/packages/kit-headless/playwright.config.ts
index 33a67eafd..9a03acc7d 100644
--- a/packages/kit-headless/playwright.config.ts
+++ b/packages/kit-headless/playwright.config.ts
@@ -18,16 +18,16 @@ let binaryPath;
 switch (currentPlatform) {
   case 'darwin':
     binaryPath =
-      './browsers/chrome/113/chrome-darwin/Chromium.app/Contents/MacOS/Chromium';
+      './browsers/chrome/108/chrome-darwin/Chromium.app/Contents/MacOS/Chromium';
     break;
   case 'win32':
-    binaryPath = './browsers/chrome/113/chrome-win32/chrome.exe';
+    binaryPath = './browsers/chrome/108/chrome-win32/chrome.exe';
     break;
   case 'linux':
-    binaryPath = './browsers/chrome/113/chrome-linux/chrome';
+    binaryPath = './browsers/chrome/108/chrome-linux/chrome';
     break;
   default:
-    throw new Error('Cannot install Chrome 13 on unknown platform');
+    throw new Error('Cannot install Chrome 108 on unknown platform');
 }
 
 /**
@@ -65,7 +65,7 @@ export default defineConfig({
     },
 
     {
-      name: 'popover-chrome-113',
+      name: 'popover-chrome-108',
       use: {
         launchOptions: {
           executablePath: path.resolve(dirName, binaryPath),
diff --git a/packages/kit-headless/project.json b/packages/kit-headless/project.json
index fa35ad86e..86b370168 100644
--- a/packages/kit-headless/project.json
+++ b/packages/kit-headless/project.json
@@ -55,19 +55,19 @@
         "project": ["logic"]
       }
     },
-    "setup-chrome-113": {
+    "setup-chrome-108": {
       "executor": "nx:run-script",
       "options": {
-        "script": "setup.chrome.113"
+        "script": "setup.chrome.108"
       }
     },
-    "e2e-chrome-113": {
+    "e2e-chrome-108": {
       "executor": "@nx/playwright:playwright",
       "outputs": ["{workspaceRoot}/dist/.playwright/packages/kit-headless"],
-      "dependsOn": ["setup-chrome-113"],
+      "dependsOn": ["setup-chrome-108"],
       "options": {
         "config": "packages/kit-headless/playwright.config.ts",
-        "project": ["popover-chrome-113"]
+        "project": ["popover-chrome-108"]
       }
     },
     "visual-test": {
diff --git a/packages/kit-headless/scripts/prepare-chrome-113.ts b/packages/kit-headless/scripts/prepare-chrome-browser.ts
similarity index 86%
rename from packages/kit-headless/scripts/prepare-chrome-113.ts
rename to packages/kit-headless/scripts/prepare-chrome-browser.ts
index 0160776e5..ef6040254 100644
--- a/packages/kit-headless/scripts/prepare-chrome-113.ts
+++ b/packages/kit-headless/scripts/prepare-chrome-browser.ts
@@ -12,16 +12,16 @@ function printProgress(progress: number) {
 }
 
 async function prepareChrome113() {
-  const path = `browsers/chrome/113/chrome-${os.platform()}`;
+  const path = `browsers/chrome/108/chrome-${os.platform()}`;
 
   if (fs.existsSync(path)) {
-    console.log('Chrome 113 already exists. Skipping unzip ⏩');
+    console.log('Chrome 108 already exists. Skipping unzip ⏩');
   } else {
     console.log('Creating directory to save the browser 🌐');
     fs.mkdirSync(path, { recursive: true });
 
     const downloadResponse = await fetch(
-      `https://github.com/qwikifiers/qwik-ui-polyfill-browsers/raw/main/chrome/113/chrome-${os.platform()}.zip`,
+      `https://github.com/qwikifiers/qwik-ui-polyfill-browsers/raw/main/chrome/108/chrome-${os.platform()}.zip`,
     );
 
     const contentLength = downloadResponse.headers.get('content-length');
@@ -33,7 +33,7 @@ async function prepareChrome113() {
         async start(controller) {
           if (!downloadResponse.body) {
             throw new Error(
-              'Invalid response received when trying to download Chrome 113',
+              'Invalid response received when trying to download Chrome 108',
             );
           }
 
@@ -53,7 +53,7 @@ async function prepareChrome113() {
 
     await decompress(
       Buffer.from(await res.arrayBuffer()),
-      `browsers/chrome/113/chrome-${os.platform()}`,
+      `browsers/chrome/108/chrome-${os.platform()}`,
       { strip: 1 },
     );
   }
diff --git a/packages/kit-headless/src/components/accordion/accordion-root.tsx b/packages/kit-headless/src/components/accordion/accordion-root.tsx
index 63c48cfb5..32345e4f7 100644
--- a/packages/kit-headless/src/components/accordion/accordion-root.tsx
+++ b/packages/kit-headless/src/components/accordion/accordion-root.tsx
@@ -19,9 +19,12 @@ export const HAccordionRootImpl = component$((props: AccordionRootProps) => {
     disabled,
     collapsible = true,
     animated,
+    itemsMap,
     ...rest
   } = props;
 
+  itemsMap;
+
   const selectedIndexSig = useSignal<number>(initialIndex ?? -1);
   const triggerRefsArray = useSignal<Array<Signal>>([]);
   const isAnimatedSig = useSignal<boolean>(animated === true);
diff --git a/packages/kit-headless/src/components/combobox/combobox.test.ts-snapshots/closed-combobox-visual-win32.png b/packages/kit-headless/src/components/combobox/combobox.test.ts-snapshots/closed-combobox-visual-win32.png
new file mode 100644
index 000000000..eb456d989
Binary files /dev/null and b/packages/kit-headless/src/components/combobox/combobox.test.ts-snapshots/closed-combobox-visual-win32.png differ
diff --git a/packages/kit-headless/src/components/modal/modal.test.ts-snapshots/closed-modal-visual-win32.png b/packages/kit-headless/src/components/modal/modal.test.ts-snapshots/closed-modal-visual-win32.png
new file mode 100644
index 000000000..0d6d9fff7
Binary files /dev/null and b/packages/kit-headless/src/components/modal/modal.test.ts-snapshots/closed-modal-visual-win32.png differ
diff --git a/packages/kit-headless/src/components/modal/modal.test.ts-snapshots/opened-modal-visual-win32.png b/packages/kit-headless/src/components/modal/modal.test.ts-snapshots/opened-modal-visual-win32.png
new file mode 100644
index 000000000..0d6d9fff7
Binary files /dev/null and b/packages/kit-headless/src/components/modal/modal.test.ts-snapshots/opened-modal-visual-win32.png differ
diff --git a/packages/kit-headless/src/components/popover/popover-trigger.tsx b/packages/kit-headless/src/components/popover/popover-trigger.tsx
index da2173699..d2f874888 100644
--- a/packages/kit-headless/src/components/popover/popover-trigger.tsx
+++ b/packages/kit-headless/src/components/popover/popover-trigger.tsx
@@ -23,7 +23,10 @@ export const HPopoverTrigger = component$<PopoverTriggerProps>(
     } = usePopover(context.compId);
 
     const handleClick$ = $(async () => {
-      if (context.hover) return;
+      if (context.hover && !isSupportedSig.value) {
+        await showPopover();
+        return;
+      }
 
       if (isSupportedSig.value) return;
 
diff --git a/packages/kit-headless/src/components/popover/popover.driver.ts b/packages/kit-headless/src/components/popover/popover.driver.ts
index 080b3eeca..925804b58 100644
--- a/packages/kit-headless/src/components/popover/popover.driver.ts
+++ b/packages/kit-headless/src/components/popover/popover.driver.ts
@@ -9,6 +9,10 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
     return rootLocator.locator('[popover]');
   };
 
+  const getPopoverByTextContent = (popoverContent: string) => {
+    return rootLocator.locator('.popover-panel').getByText(popoverContent);
+  };
+
   const getTrigger = () => {
     return rootLocator.locator('[popovertarget]');
   };
@@ -16,7 +20,11 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
   const openPopover = async (key: PopoverOpenKeys | 'click', index?: number) => {
     const action = key === 'click' ? 'click' : 'press';
     const trigger = index !== undefined ? getTrigger().nth(index) : getTrigger();
-    const popover = index !== undefined ? getPopover().nth(index) : getPopover();
+
+    const popover =
+      index !== undefined
+        ? getPopoverByTextContent(`Popover ${index + 1}`)
+        : getPopover();
 
     if (action === 'click') {
       await trigger.click({ position: { x: 1, y: 1 } }); // Modified line
@@ -26,6 +34,8 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
 
     // Needed because Playwright doesn't wait for the listbox to be visible
     await expect(popover).toBeVisible();
+
+    return { trigger, popover };
   };
 
   const getAllPopovers = () => {
@@ -49,5 +59,6 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
     getAllTriggers,
     openPopover,
     getProgrammaticButtonTrigger,
+    getPopoverByTextContent,
   };
 }
diff --git a/packages/kit-headless/src/components/popover/popover.test.ts b/packages/kit-headless/src/components/popover/popover.test.ts
index b32c45300..536c4b16d 100644
--- a/packages/kit-headless/src/components/popover/popover.test.ts
+++ b/packages/kit-headless/src/components/popover/popover.test.ts
@@ -37,11 +37,11 @@ test.describe('Mouse Behavior', () => {
         THEN the popover should close`, async ({ page }) => {
     const { driver: d } = await setup(page, 'basic');
 
-    await d.openPopover('click');
+    const { popover } = await d.openPopover('click');
 
     await page.mouse.click(0, 0);
 
-    await expect(d.getPopover()).toBeHidden();
+    await expect(popover).toBeHidden();
   });
 
   test(`GIVEN a pair of popovers in auto mode
@@ -52,11 +52,8 @@ test.describe('Mouse Behavior', () => {
   }) => {
     const { driver: d } = await setup(page, 'auto');
 
-    const firstPopover = d.getPopover().nth(0);
-    const secondPopover = d.getPopover().nth(1);
-
-    await d.openPopover('click', 0);
-    await d.openPopover('click', 1);
+    const { popover: firstPopover } = await d.openPopover('click', 0);
+    const { popover: secondPopover } = await d.openPopover('click', 1);
 
     await expect(firstPopover).toBeHidden();
     await expect(secondPopover).toBeVisible();
@@ -72,7 +69,7 @@ test.describe('Mouse Behavior', () => {
 
     await page.mouse.click(0, 0);
 
-    await expect(d.getPopover().nth(0)).toBeVisible();
+    await expect(d.getPopoverByTextContent('Popover 1')).toBeVisible();
   });
 
   test(`GIVEN a pair of manual popovers
@@ -81,8 +78,11 @@ test.describe('Mouse Behavior', () => {
         THEN then both popovers should be opened`, async ({ page }) => {
     const { driver: d } = await setup(page, 'manual');
 
-    await d.openPopover('click', 0);
-    await d.openPopover('click', 1);
+    const { popover: firstPopover } = await d.openPopover('click', 0);
+    const { popover: secondPopover } = await d.openPopover('click', 1);
+
+    await expect(firstPopover).toBeVisible();
+    await expect(secondPopover).toBeVisible();
   });
 
   test(`GIVEN a pair of manual opened popovers
@@ -91,13 +91,14 @@ test.describe('Mouse Behavior', () => {
         THEN both popovers should be closed`, async ({ page }) => {
     const { driver: d } = await setup(page, 'manual');
 
-    const firstPopover = d.getPopover().nth(0);
-    const secondPopover = d.getPopover().nth(1);
-    const firstTrigger = d.getTrigger().nth(0);
-    const secondTrigger = d.getTrigger().nth(1);
-
-    await d.openPopover('click', 0);
-    await d.openPopover('click', 1);
+    const { popover: firstPopover, trigger: firstTrigger } = await d.openPopover(
+      'click',
+      0,
+    );
+    const { popover: secondPopover, trigger: secondTrigger } = await d.openPopover(
+      'click',
+      1,
+    );
 
     // Explicitly specifying click positions due to default behavior targeting the element's center,
     // which is obscured by the popover in this scenario.
@@ -152,31 +153,46 @@ test.describe('Mouse Behavior', () => {
     expect(gutterSpace).toBe(40);
   });
 
-  // test(`GIVEN a combobox with a flip configured
-  // WHEN scrolling the page
-  // THEN the popover flip to the opposite end once space runs out`, async ({ page }) => {
-  //   const { driver: d } = await setup(page, 'flip');
+  test(`GIVEN a combobox with a flip configured
+        WHEN scrolling the page
+        THEN the popover flip to the opposite end once space runs out`, async ({
+    page,
+  }) => {
+    const { driver: d } = await setup(page, 'flip');
 
-  //   const popover = d.getPopover();
-  //   const trigger = d.getTrigger();
+    const popover = d.getPopover();
+    const trigger = d.getTrigger();
 
-  //   // Introduce artificial spacing
-  //   await trigger.evaluate((element) => (element.style.top = '800px'));
+    async function calculateYDiff() {
+      const popoverBoundingBox = await popover.boundingBox();
+      const triggerBoundingBox = await trigger.boundingBox();
 
-  //   await trigger.click();
+      console.log(triggerBoundingBox, popoverBoundingBox);
 
-  //   await expect(popover).toBeVisible();
+      return (popoverBoundingBox?.y ?? 0) - (triggerBoundingBox?.y ?? 0);
+    }
 
-  //   const popoverBoundingBox = await popover.boundingBox();
-  //   const triggerBoundingBox = await trigger.boundingBox();
+    // Introduce artificial spacing
+    await trigger.evaluate((element) => (element.style.marginTop = '2000px'));
+    await trigger.evaluate((element) => (element.style.marginBottom = '1000px'));
 
-  //   console.log(triggerBoundingBox, popoverBoundingBox);
+    await trigger.click();
 
-  //   const triggerBottomAbsolutePosition =
-  //     (triggerBoundingBox?.y ?? 0) + (triggerBoundingBox?.height ?? 0);
+    // Should be below the trigger
+    await expect(popover).toBeVisible();
 
-  //   expect((popoverBoundingBox?.y ?? 0) - triggerBottomAbsolutePosition).toBe(24);
-  // });
+    let yDiff = await calculateYDiff();
+
+    expect(yDiff).toBeGreaterThan(0);
+
+    await page.evaluate(() => window.scrollBy(0, -400));
+
+    await page.waitForTimeout(1000);
+
+    // Should be above the trigger
+    yDiff = await calculateYDiff();
+    expect(yDiff).toBeLessThan(0);
+  });
 });
 
 test.describe('Keyboard Behavior', () => {
@@ -245,13 +261,7 @@ test.describe('Keyboard Behavior', () => {
     THEN the first popover should close and the second one appear`, async ({ page }) => {
       const { driver: d } = await setup(page, 'auto');
 
-      const firstPopover = d.getPopover().nth(0);
-      const secondPopover = d.getPopover().nth(1);
-
-      await expect(firstPopover).toBeHidden();
-      await expect(secondPopover).toBeHidden();
-
-      await d.openPopover('Enter', 0);
+      const { popover: firstPopover } = await d.openPopover('Enter', 0);
       await d.openPopover('Enter', 1);
 
       await expect(firstPopover).toBeHidden();
@@ -264,13 +274,14 @@ test.describe('Keyboard Behavior', () => {
         THEN then both popovers should be closed`, async ({ page }) => {
     const { driver: d } = await setup(page, 'manual');
 
-    const firstPopover = d.getPopover().nth(0);
-    const secondPopover = d.getPopover().nth(1);
-    const firstTrigger = d.getTrigger().nth(0);
-    const secondTrigger = d.getTrigger().nth(1);
-
-    await d.openPopover('Enter', 0);
-    await d.openPopover('Enter', 1);
+    const { popover: firstPopover, trigger: firstTrigger } = await d.openPopover(
+      'click',
+      0,
+    );
+    const { popover: secondPopover, trigger: secondTrigger } = await d.openPopover(
+      'click',
+      1,
+    );
 
     await secondTrigger.press('Enter');
     await expect(secondPopover).toBeHidden();
@@ -319,12 +330,15 @@ test.describe('Keyboard Behavior', () => {
     const popover = d.getPopover();
     const trigger = d.getTrigger();
 
+    await trigger.focus();
+    await expect(trigger).toBeFocused();
+
     await trigger.press('Enter');
 
     await expect(popover).toBeVisible();
 
-    const popoverBoundingBox = await popover.boundingBox();
     const triggerBoundingBox = await trigger.boundingBox();
+    const popoverBoundingBox = await popover.boundingBox();
 
     expect(popoverBoundingBox?.x).toBeGreaterThan(
       (triggerBoundingBox?.x ?? Number.MAX_VALUE) +
@@ -332,43 +346,3 @@ test.describe('Keyboard Behavior', () => {
     );
   });
 });
-
-test.describe('Programmatic', () => {
-  // test(`GIVEN a programmatic popover
-  //       WHEN the showPopover function is called
-  //       THEN the popover should be open`, async ({ page }) => {
-  //   const { driver: d } = await setup(page, 'show');
-  //   await expect(d.getPopover()).toBeHidden();
-  //   const programmaticTrigger = page.getByRole('button', { name: 'show popover' });
-  //   await programmaticTrigger.click();
-  //   await expect(d.getPopover()).toBeVisible();
-  // });
-  // test(`GIVEN an open programmatic popover
-  // WHEN the hidePopover function is called
-  // THEN the popover should be hidden`, async ({ page }) => {
-  //   const { driver: d } = await setup(page, 'hide');
-  //   const programmaticTrigger = page.getByRole('button', { name: 'hide popover' });
-  //   // initial open
-  //   await d.openPopover('click');
-  //   await programmaticTrigger.click({ position: { x: 0, y: 0 } });
-  //   await expect(d.getPopover()).toBeHidden();
-  // });
-  // test(`GIVEN a programmatic popover
-  //       WHEN the togglePopover function is called
-  //       THEN the popover should be open`, async ({ page }) => {
-  //   const { driver: d } = await setup(page, 'toggle');
-  //   const programmaticTrigger = page.getByRole('button', { name: 'toggle popover' });
-  //   await programmaticTrigger.click();
-  //   await expect(d.getPopover()).toBeVisible();
-  // });
-  // test(`GIVEN an open programmatic popover
-  // WHEN the togglePopover function is called
-  // THEN the popover should be closed`, async ({ page }) => {
-  //   const { driver: d } = await setup(page, 'toggle');
-  //   const programmaticTrigger = page.getByRole('button', { name: 'toggle popover' });
-  //   await programmaticTrigger.click();
-  //   await expect(d.getPopover()).toBeVisible();
-  //   await programmaticTrigger.click();
-  //   await expect(d.getPopover()).toBeHidden();
-  // });
-});
diff --git a/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/closed-popover-popover-chrome-108-win32.png b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/closed-popover-popover-chrome-108-win32.png
new file mode 100644
index 000000000..5d32d0f08
Binary files /dev/null and b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/closed-popover-popover-chrome-108-win32.png differ
diff --git a/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/closed-popover-popover-chrome-113-win32.png b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/closed-popover-popover-chrome-113-win32.png
new file mode 100644
index 000000000..5d32d0f08
Binary files /dev/null and b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/closed-popover-popover-chrome-113-win32.png differ
diff --git a/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/closed-popover-visual-win32.png b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/closed-popover-visual-win32.png
new file mode 100644
index 000000000..c64e14694
Binary files /dev/null and b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/closed-popover-visual-win32.png differ
diff --git a/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/opened-popover-popover-chrome-108-win32.png b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/opened-popover-popover-chrome-108-win32.png
new file mode 100644
index 000000000..5d32d0f08
Binary files /dev/null and b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/opened-popover-popover-chrome-108-win32.png differ
diff --git a/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/opened-popover-popover-chrome-113-win32.png b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/opened-popover-popover-chrome-113-win32.png
new file mode 100644
index 000000000..5d32d0f08
Binary files /dev/null and b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/opened-popover-popover-chrome-113-win32.png differ
diff --git a/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/opened-popover-visual-win32.png b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/opened-popover-visual-win32.png
new file mode 100644
index 000000000..b3c32b61b
Binary files /dev/null and b/packages/kit-headless/src/components/popover/popover.test.ts-snapshots/opened-popover-visual-win32.png differ
diff --git a/packages/kit-headless/src/components/select/hidden-select.tsx b/packages/kit-headless/src/components/select/hidden-select.tsx
index e82b2e81b..56dd6625c 100644
--- a/packages/kit-headless/src/components/select/hidden-select.tsx
+++ b/packages/kit-headless/src/components/select/hidden-select.tsx
@@ -41,10 +41,14 @@ export const HHiddenNativeSelect = component$(
                 // @ts-expect-error modular forms ref function
                 ref?.(element);
               }}
+              onFocus$={() => {
+                // override modular forms focus event
+                return;
+              }}
               multiple={context.multiple}
               tabIndex={-1}
               autocomplete={autoComplete}
-              disabled={context.disabled}
+              disabled={context.isDisabledSig.value ? true : undefined}
               required={context.required}
               name={context.name}
               // height is determined by its children
diff --git a/packages/kit-headless/src/components/select/index.ts b/packages/kit-headless/src/components/select/index.ts
index d410a7532..a64a3b95d 100644
--- a/packages/kit-headless/src/components/select/index.ts
+++ b/packages/kit-headless/src/components/select/index.ts
@@ -1,7 +1,7 @@
 export { HSelectRoot as Root } from './select-inline';
 export { HSelectLabel as Label } from './select-label';
 export { HSelectTrigger as Trigger } from './select-trigger';
-export { HSelectDisplayText as DisplayValue } from './select-display-text';
+export { HSelectDisplayValue as DisplayValue } from './select-display-value';
 export { HSelectPopover as Popover } from './select-popover';
 export { HSelectListbox as Listbox } from './select-listbox';
 export { HSelectGroup as Group } from './select-group';
@@ -9,4 +9,6 @@ export { HSelectGroupLabel as GroupLabel } from './select-group-label';
 export { HSelectItem as Item } from './select-item';
 export { HSelectItemLabel as ItemLabel } from './select-item-label';
 export { HSelectItemIndicator as ItemIndicator } from './select-item-indicator';
+export { HSelectDescription as Description } from './select-description';
 export { HHiddenNativeSelect as HiddenNativeSelect } from './hidden-select';
+export { HSelectErrorMessage as ErrorMessage } from './select-error-message';
diff --git a/packages/kit-headless/src/components/select/select-context.ts b/packages/kit-headless/src/components/select/select-context.ts
index 2e79fdd43..a4187c50b 100644
--- a/packages/kit-headless/src/components/select/select-context.ts
+++ b/packages/kit-headless/src/components/select/select-context.ts
@@ -14,6 +14,7 @@ export type SelectContext = {
   listboxRef: Signal<HTMLUListElement | undefined>;
   groupRef: Signal<HTMLDivElement | undefined>;
   labelRef: Signal<HTMLDivElement | undefined>;
+  highlightedItemRef: Signal<HTMLLIElement | undefined>;
 
   // core state
   itemsMapSig: Readonly<Signal<TItemsMap>>;
@@ -21,6 +22,7 @@ export type SelectContext = {
   highlightedIndexSig: Signal<number | null>;
   currDisplayValueSig: Signal<string | string[] | undefined>;
   isListboxOpenSig: Signal<boolean>;
+  isDisabledSig: Signal<boolean>;
   localId: string;
 
   // user configurable
@@ -38,10 +40,7 @@ export type SelectContext = {
    */
   required?: boolean;
 
-  /**
-   * If `true`, prevents the user from interacting with the select.
-   */
-  disabled?: boolean;
+  isInvalidSig?: Signal<boolean>;
 };
 
 export const groupContextId = createContextId<GroupContext>('Select-Group');
diff --git a/packages/kit-headless/src/components/select/select-description.tsx b/packages/kit-headless/src/components/select/select-description.tsx
index 490d1165d..c125a0a6c 100644
--- a/packages/kit-headless/src/components/select/select-description.tsx
+++ b/packages/kit-headless/src/components/select/select-description.tsx
@@ -8,7 +8,11 @@ export const HSelectDescription = component$((props: SelectDescriptionProps) =>
   const descriptionId = `${context.localId}-description`;
 
   return (
-    <div id={descriptionId} data-disabled={context.disabled ? '' : undefined} {...props}>
+    <div
+      id={descriptionId}
+      data-disabled={context.isDisabledSig.value ? '' : undefined}
+      {...props}
+    >
       <Slot />
     </div>
   );
diff --git a/packages/kit-headless/src/components/select/select-display-text.tsx b/packages/kit-headless/src/components/select/select-display-value.tsx
similarity index 93%
rename from packages/kit-headless/src/components/select/select-display-text.tsx
rename to packages/kit-headless/src/components/select/select-display-value.tsx
index f4048eb99..465c75fdd 100644
--- a/packages/kit-headless/src/components/select/select-display-text.tsx
+++ b/packages/kit-headless/src/components/select/select-display-value.tsx
@@ -15,7 +15,7 @@ type SelectValueProps = PropsOf<'span'> & {
   placeholder?: string;
 };
 
-export const HSelectDisplayText = component$((props: SelectValueProps) => {
+export const HSelectDisplayValue = component$((props: SelectValueProps) => {
   const { placeholder, ...rest } = props;
   const context = useContext(SelectContextId);
   const valueId = `${context.localId}-value`;
diff --git a/packages/kit-headless/src/components/select/select-error-message.tsx b/packages/kit-headless/src/components/select/select-error-message.tsx
new file mode 100644
index 000000000..e7d8c9cf6
--- /dev/null
+++ b/packages/kit-headless/src/components/select/select-error-message.tsx
@@ -0,0 +1,13 @@
+import { PropsOf, Slot, component$, useContext } from '@builder.io/qwik';
+import SelectContextId from './select-context';
+
+export const HSelectErrorMessage = component$((props: PropsOf<'div'>) => {
+  const context = useContext(SelectContextId);
+  const errorMessageId = `${context.localId}-error-message`;
+
+  return (
+    <div role="alert" id={errorMessageId} {...props}>
+      <Slot />
+    </div>
+  );
+});
diff --git a/packages/kit-headless/src/components/select/select-inline.tsx b/packages/kit-headless/src/components/select/select-inline.tsx
index 3583c1b8b..a30ca94e1 100644
--- a/packages/kit-headless/src/components/select/select-inline.tsx
+++ b/packages/kit-headless/src/components/select/select-inline.tsx
@@ -3,11 +3,13 @@ import { HSelectImpl, type SelectProps } from './select-root';
 import { HSelectItem as InternalSelectItem } from './select-item';
 import { HSelectLabel as InternalSelectLabel } from './select-label';
 import { HSelectItemLabel as InternalSelectItemLabel } from './select-item-label';
+import { HSelectErrorMessage as InternalSelectErrorMessage } from './select-error-message';
 
 type InlineCompProps = {
   selectLabelComponent?: typeof InternalSelectLabel;
   selectItemComponent?: typeof InternalSelectItem;
   selectItemLabelComponent?: typeof InternalSelectItemLabel;
+  selectErrorMessageComponent?: typeof InternalSelectErrorMessage;
 };
 
 /*
@@ -22,6 +24,7 @@ export const HSelectRoot: Component<SelectProps & InlineCompProps> = (
     selectLabelComponent: UserLabel,
     selectItemComponent: UserItem,
     selectItemLabelComponent: UserItemLabel,
+    selectErrorMessageComponent: UserErrorMessage,
     ...rest
   } = props;
 
@@ -31,6 +34,7 @@ export const HSelectRoot: Component<SelectProps & InlineCompProps> = (
   const SelectLabel = UserLabel ?? InternalSelectLabel;
   const SelectItem = UserItem ?? InternalSelectItem;
   const SelectItemLabel = UserItemLabel ?? InternalSelectItemLabel;
+  const SelectErrorMessage = UserErrorMessage ?? InternalSelectErrorMessage;
 
   // source of truth
   const itemsMap = new Map();
@@ -40,6 +44,7 @@ export const HSelectRoot: Component<SelectProps & InlineCompProps> = (
 
   let valuePropIndex = null;
   let isLabelNeeded = false;
+  let isInvalid = false;
 
   const childrenToProcess = (
     Array.isArray(myChildren) ? [...myChildren] : [myChildren]
@@ -119,6 +124,12 @@ export const HSelectRoot: Component<SelectProps & InlineCompProps> = (
         break;
       }
 
+      case SelectErrorMessage: {
+        // when the component is present in the JSX, it's invalid
+        isInvalid = true;
+        break;
+      }
+
       default: {
         if (child) {
           const anyChildren = Array.isArray(child.children)
@@ -138,6 +149,7 @@ export const HSelectRoot: Component<SelectProps & InlineCompProps> = (
       _label={isLabelNeeded}
       _valuePropIndex={valuePropIndex}
       _itemsMap={itemsMap}
+      invalid={isInvalid}
     >
       {props.children}
     </HSelectImpl>
diff --git a/packages/kit-headless/src/components/select/select-item.tsx b/packages/kit-headless/src/components/select/select-item.tsx
index 5889da954..f61449337 100644
--- a/packages/kit-headless/src/components/select/select-item.tsx
+++ b/packages/kit-headless/src/components/select/select-item.tsx
@@ -8,6 +8,9 @@ import {
   useTask$,
   type PropsOf,
   useContextProvider,
+  sync$,
+  useOnWindow,
+  QRL,
 } from '@builder.io/qwik';
 import { isServer, isBrowser } from '@builder.io/qwik/build';
 import SelectContextId, {
@@ -34,8 +37,18 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
   const itemRef = useSignal<HTMLLIElement>();
   const localIndexSig = useSignal<number | null>(null);
   const itemId = `${context.localId}-${_index}`;
+  const typeaheadFnSig = useSignal<QRL<(key: string) => Promise<void>>>();
 
-  const { selectionManager$ } = useSelect();
+  const { selectionManager$, getNextEnabledItemIndex$, getPrevEnabledItemIndex$ } =
+    useSelect();
+
+  // we're getting the same function instance from the trigger, without needing to restructure context
+  useOnWindow(
+    'typeaheadFn',
+    $((e: CustomEvent) => {
+      typeaheadFnSig.value = e.detail;
+    }),
+  );
 
   const isSelectedSig = useComputed$(() => {
     const index = _index ?? null;
@@ -43,19 +56,31 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
   });
 
   const isHighlightedSig = useComputed$(() => {
-    return !disabled && context.highlightedIndexSig.value === _index;
+    if (disabled) return;
+
+    if (context.highlightedIndexSig.value === _index) {
+      itemRef.value?.focus();
+      return true;
+    } else {
+      return false;
+    }
   });
 
-  useTask$(function getIndexTask() {
+  useTask$(async function getIndexTask() {
     if (_index === undefined)
       throw Error('Qwik UI: Select component item cannot find its proper index.');
 
     localIndexSig.value = _index;
   });
 
-  useTask$(function scrollableTask({ track, cleanup }) {
+  useTask$(async function navigationTask({ track, cleanup }) {
     track(() => context.highlightedIndexSig.value);
 
+    // update the context with the highlighted item ref
+    if (localIndexSig.value === context.highlightedIndexSig.value) {
+      context.highlightedItemRef = itemRef;
+    }
+
     if (isServer) return;
 
     let observer: IntersectionObserver;
@@ -109,6 +134,101 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
     isSelectedSig,
   };
 
+  const handleKeyDownSync$ = sync$((e: KeyboardEvent) => {
+    const keys = [
+      'ArrowUp',
+      'ArrowDown',
+      'ArrowRight',
+      'ArrowLeft',
+      'Home',
+      'End',
+      'PageDown',
+      'PageUp',
+      'Enter',
+      ' ',
+    ];
+    if (keys.includes(e.key)) {
+      e.preventDefault();
+    }
+  });
+
+  const handleKeyDown$ = $(async (e: KeyboardEvent) => {
+    typeaheadFnSig.value?.(e.key);
+
+    switch (e.key) {
+      case 'ArrowDown':
+        if (context.isListboxOpenSig.value) {
+          context.highlightedIndexSig.value = await getNextEnabledItemIndex$(
+            context.highlightedIndexSig.value!,
+          );
+          if (context.multiple && e.shiftKey) {
+            await selectionManager$(context.highlightedIndexSig.value, 'toggle');
+          }
+        }
+        break;
+
+      case 'ArrowUp':
+        if (context.isListboxOpenSig.value) {
+          context.highlightedIndexSig.value = await getPrevEnabledItemIndex$(
+            context.highlightedIndexSig.value!,
+          );
+          if (context.multiple && e.shiftKey) {
+            await selectionManager$(context.highlightedIndexSig.value, 'toggle');
+          }
+        }
+        break;
+
+      case 'Home':
+        if (context.isListboxOpenSig.value) {
+          context.highlightedIndexSig.value = await getNextEnabledItemIndex$(-1);
+        }
+        break;
+
+      case 'End':
+        if (context.isListboxOpenSig.value) {
+          const lastEnabledOptionIndex = await getPrevEnabledItemIndex$(
+            context.itemsMapSig.value.size,
+          );
+          context.highlightedIndexSig.value = lastEnabledOptionIndex;
+        }
+        break;
+
+      case 'Escape':
+        context.triggerRef.value?.focus();
+        context.isListboxOpenSig.value = false;
+        break;
+
+      case 'Tab':
+        context.isListboxOpenSig.value = false;
+        break;
+
+      case 'Enter':
+      case ' ':
+        if (context.isListboxOpenSig.value) {
+          const action = context.multiple ? 'toggle' : 'add';
+          await selectionManager$(context.highlightedIndexSig.value, action);
+
+          if (!context.multiple) {
+            context.triggerRef.value?.focus();
+          }
+        }
+        context.isListboxOpenSig.value = context.multiple
+          ? true
+          : !context.isListboxOpenSig.value;
+        break;
+
+      case 'a':
+        if (e.ctrlKey && context.multiple) {
+          for (const [index, item] of context.itemsMapSig.value) {
+            if (!item.disabled) {
+              await selectionManager$(index, 'add');
+            }
+          }
+        }
+        break;
+    }
+  });
+
   useContextProvider(selectItemContextId, selectContext);
 
   return (
@@ -116,6 +236,7 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
       {...rest}
       id={itemId}
       onClick$={[handleClick$, props.onClick$]}
+      onKeyDown$={[handleKeyDownSync$, handleKeyDown$, props.onKeyDown$]}
       onPointerOver$={[handlePointerOver$, props.onPointerOver$]}
       ref={itemRef}
       tabIndex={-1}
diff --git a/packages/kit-headless/src/components/select/select-label.tsx b/packages/kit-headless/src/components/select/select-label.tsx
index 05f419746..103de50fa 100644
--- a/packages/kit-headless/src/components/select/select-label.tsx
+++ b/packages/kit-headless/src/components/select/select-label.tsx
@@ -6,7 +6,7 @@ export const HSelectLabel = component$((props: PropsOf<'div'>) => {
   const labelId = `${context.localId}-label`;
 
   const handleClick$ = $(() => {
-    if (context.disabled) return;
+    if (context.isDisabledSig.value) return;
 
     context.triggerRef.value?.focus();
   });
@@ -17,7 +17,7 @@ export const HSelectLabel = component$((props: PropsOf<'div'>) => {
 
   return (
     <div
-      data-disabled={context.disabled ? '' : undefined}
+      data-disabled={context.isDisabledSig.value ? '' : undefined}
       ref={context.labelRef}
       id={labelId}
       onClick$={[handleClick$, props.onClick$]}
diff --git a/packages/kit-headless/src/components/select/select-listbox.tsx b/packages/kit-headless/src/components/select/select-listbox.tsx
index 3f339c6eb..571d3e165 100644
--- a/packages/kit-headless/src/components/select/select-listbox.tsx
+++ b/packages/kit-headless/src/components/select/select-listbox.tsx
@@ -67,6 +67,7 @@ export const HSelectListbox = component$<SelectListboxProps>((props) => {
       ref={context.listboxRef}
       data-open={context.isListboxOpenSig.value ? '' : undefined}
       data-closed={!context.isListboxOpenSig.value ? '' : undefined}
+      data-invalid={context.isInvalidSig?.value ? '' : undefined}
     >
       <Slot />
     </ul>
diff --git a/packages/kit-headless/src/components/select/select-popover.tsx b/packages/kit-headless/src/components/select/select-popover.tsx
index 6005f125c..3f4ec6ab2 100644
--- a/packages/kit-headless/src/components/select/select-popover.tsx
+++ b/packages/kit-headless/src/components/select/select-popover.tsx
@@ -51,6 +51,7 @@ export const HSelectPopover = component$<PropsOf<typeof HPopoverRoot>>((props) =
       <HPopoverPanel
         data-open={context.isListboxOpenSig.value ? '' : undefined}
         data-closed={!context.isListboxOpenSig.value ? '' : undefined}
+        data-invalid={context.isInvalidSig?.value ? '' : undefined}
         {...rest}
       >
         <Slot />
diff --git a/packages/kit-headless/src/components/select/select-root.tsx b/packages/kit-headless/src/components/select/select-root.tsx
index cd8d43efb..1b0e27899 100644
--- a/packages/kit-headless/src/components/select/select-root.tsx
+++ b/packages/kit-headless/src/components/select/select-root.tsx
@@ -105,6 +105,8 @@ export type SelectProps<M extends boolean = boolean> = Omit<
    * If `true`, allows multiple selections.
    */
   multiple?: M;
+
+  invalid?: boolean;
 } & TMultiValue &
   TStringOrArray;
 
@@ -123,9 +125,12 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
       name,
       required,
       disabled,
+      invalid,
       ...rest
     } = props;
 
+    invalid;
+
     // refs
     const rootRef = useSignal<HTMLDivElement>();
     const triggerRef = useSignal<HTMLButtonElement>();
@@ -161,6 +166,20 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
     const currDisplayValueSig = useSignal<string | string[]>();
 
     const initialLoadSig = useSignal<boolean>(true);
+    const highlightedItemRef = useSignal<HTMLLIElement>();
+    const isDisabledSig = useSignal<boolean>(disabled ?? false);
+    const isInvalidSig = useSignal<boolean>(props.invalid ?? false);
+
+    useTask$(({ track }) => {
+      /**
+       * We want the component to be invalid based on the presence of the     Select.ErrorMessage component. If passed through context as just a prop that won't work.
+       *
+       * my guess here, is props.invalid is a store under the hood, so it can track changes to the property, but when destructured, it's just a
+       *
+       * So we update a signal here so that the context can track it.
+       */
+      isInvalidSig.value = track(() => props.invalid ?? false);
+    });
 
     const context: SelectContext = {
       itemsMapSig,
@@ -170,6 +189,7 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
       listboxRef,
       labelRef,
       groupRef,
+      highlightedItemRef,
       localId,
       highlightedIndexSig,
       selectedIndexSetSig,
@@ -179,7 +199,8 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
       multiple,
       name,
       required,
-      disabled,
+      isDisabledSig,
+      isInvalidSig,
     };
 
     useContextProvider(SelectContextId, context);
@@ -279,7 +300,7 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
     });
 
     useTask$(({ track }) => {
-      context.disabled = track(() => disabled);
+      isDisabledSig.value = track(() => disabled ?? false);
     });
 
     return (
@@ -288,7 +309,9 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
         ref={rootRef}
         data-open={context.isListboxOpenSig.value ? '' : undefined}
         data-closed={!context.isListboxOpenSig.value ? '' : undefined}
-        data-disabled={context.disabled ? '' : undefined}
+        data-disabled={isDisabledSig.value ? '' : undefined}
+        data-invalid={context.isInvalidSig?.value ? '' : undefined}
+        aria-invalid={context.isInvalidSig?.value}
         aria-controls={listboxId}
         aria-expanded={context.isListboxOpenSig.value}
         aria-haspopup="listbox"
diff --git a/packages/kit-headless/src/components/select/select-trigger.tsx b/packages/kit-headless/src/components/select/select-trigger.tsx
index b4a870a6d..52ffb5f79 100644
--- a/packages/kit-headless/src/components/select/select-trigger.tsx
+++ b/packages/kit-headless/src/components/select/select-trigger.tsx
@@ -1,4 +1,12 @@
-import { $, Slot, component$, sync$, useContext, type PropsOf } from '@builder.io/qwik';
+import {
+  $,
+  Slot,
+  component$,
+  sync$,
+  useContext,
+  useSignal,
+  type PropsOf,
+} from '@builder.io/qwik';
 import SelectContextId from './select-context';
 import { useSelect, useTypeahead } from './use-select';
 
@@ -9,7 +17,9 @@ export const HSelectTrigger = component$<SelectTriggerProps>((props) => {
     useSelect();
   const labelId = `${context.localId}-label`;
   const descriptionId = `${context.localId}-description`;
-
+  const errorMessageId = `${context.localId}-error-message`;
+  const triggerId = `${context.localId}-trigger`;
+  const initialKeyDownSig = useSignal(true);
   const { typeahead$ } = useTypeahead();
 
   const handleClickSync$ = sync$((e: MouseEvent) => {
@@ -42,66 +52,23 @@ export const HSelectTrigger = component$<SelectTriggerProps>((props) => {
   const handleKeyDown$ = $(async (e: KeyboardEvent) => {
     if (!context.itemsMapSig.value) return;
 
-    typeahead$(e.key);
+    if (!context.isListboxOpenSig.value) {
+      typeahead$(e.key);
+    }
 
     switch (e.key) {
-      case 'Enter':
-      case ' ':
-        if (context.isListboxOpenSig.value) {
-          const action = context.multiple ? 'toggle' : 'add';
-          await selectionManager$(context.highlightedIndexSig.value, action);
-        }
-        context.isListboxOpenSig.value = context.multiple
-          ? true
-          : !context.isListboxOpenSig.value;
+      case 'Tab':
+      case 'Escape':
+        context.isListboxOpenSig.value = false;
         break;
 
       case 'ArrowDown':
-        if (context.isListboxOpenSig.value) {
-          context.highlightedIndexSig.value = await getNextEnabledItemIndex$(
-            context.highlightedIndexSig.value!,
-          );
-          if (context.multiple && e.shiftKey) {
-            await selectionManager$(context.highlightedIndexSig.value, 'toggle');
-          }
-        } else {
-          context.isListboxOpenSig.value = true;
-        }
-        break;
-
       case 'ArrowUp':
-        if (context.isListboxOpenSig.value) {
-          context.highlightedIndexSig.value = await getPrevEnabledItemIndex$(
-            context.highlightedIndexSig.value!,
-          );
-          if (context.multiple && e.shiftKey) {
-            await selectionManager$(context.highlightedIndexSig.value, 'toggle');
-          }
-        } else {
+        if (!context.isListboxOpenSig.value) {
           context.isListboxOpenSig.value = true;
         }
         break;
 
-      case 'Home':
-        if (context.isListboxOpenSig.value) {
-          context.highlightedIndexSig.value = await getNextEnabledItemIndex$(-1);
-        }
-        break;
-
-      case 'End':
-        if (context.isListboxOpenSig.value) {
-          const lastEnabledOptionIndex = await getPrevEnabledItemIndex$(
-            context.itemsMapSig.value.size,
-          );
-          context.highlightedIndexSig.value = lastEnabledOptionIndex;
-        }
-        break;
-
-      case 'Tab':
-      case 'Escape':
-        context.isListboxOpenSig.value = false;
-        break;
-
       case 'ArrowRight':
         if (!context.multiple) {
           const currentIndex = context.highlightedIndexSig.value ?? -1;
@@ -121,38 +88,45 @@ export const HSelectTrigger = component$<SelectTriggerProps>((props) => {
         }
         break;
 
-      case 'a':
-        if (e.ctrlKey && context.multiple) {
-          for (const [index, item] of context.itemsMapSig.value) {
-            if (!item.disabled) {
-              await selectionManager$(index, 'add');
-            }
-          }
-        }
+      case 'Enter':
+      case ' ':
+        context.isListboxOpenSig.value = context.multiple
+          ? true
+          : !context.isListboxOpenSig.value;
         break;
     }
 
     /** When initially opening the listbox, we want to grab the first enabled option index */
     if (context.highlightedIndexSig.value === null) {
       context.highlightedIndexSig.value = await getNextEnabledItemIndex$(-1);
-      return;
     }
+
+    // Wait for the popover code to be executed
+    while (context.highlightedItemRef.value !== document.activeElement) {
+      await new Promise((resolve) => setTimeout(resolve, 5));
+      context.highlightedItemRef.value?.focus();
+    }
+
+    if (!initialKeyDownSig.value) return;
+    document.dispatchEvent(new CustomEvent('typeaheadFn', { detail: typeahead$ }));
   });
 
   return (
     <button
       {...props}
-      id={`${context.localId}-trigger`}
+      id={triggerId}
       ref={context.triggerRef}
       onClick$={[handleClickSync$, handleClick$, props.onClick$]}
       onKeyDown$={[handleKeyDownSync$, handleKeyDown$, props.onKeyDown$]}
       data-open={context.isListboxOpenSig.value ? '' : undefined}
       data-closed={!context.isListboxOpenSig.value ? '' : undefined}
-      data-disabled={context.disabled ? '' : undefined}
+      data-disabled={context.isDisabledSig.value ? '' : undefined}
+      data-invalid={context.isInvalidSig?.value ? '' : undefined}
       aria-expanded={context.isListboxOpenSig.value}
       aria-labelledby={labelId}
-      aria-describedby={descriptionId}
-      disabled={context.disabled}
+      aria-describedby={`${descriptionId} 
+      ${errorMessageId}`}
+      disabled={context.isDisabledSig.value ? true : undefined}
       preventdefault:blur
     >
       <Slot />
diff --git a/packages/kit-headless/src/components/select/select.driver.ts b/packages/kit-headless/src/components/select/select.driver.ts
index ac5a3f912..99cb1e152 100644
--- a/packages/kit-headless/src/components/select/select.driver.ts
+++ b/packages/kit-headless/src/components/select/select.driver.ts
@@ -35,6 +35,10 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
     return getTrigger().locator('[data-value]');
   };
 
+  const getHighlightedItem = () => {
+    return getRoot().locator('[data-highlighted]');
+  };
+
   const openListbox = async (key: OpenKeys | 'click') => {
     await getTrigger().focus();
 
@@ -59,5 +63,6 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
     getItemAt,
     getValueElement,
     openListbox,
+    getHighlightedItem,
   };
 }
diff --git a/packages/kit-headless/src/components/select/select.test.ts b/packages/kit-headless/src/components/select/select.test.ts
index aea49f463..5c7850682 100644
--- a/packages/kit-headless/src/components/select/select.test.ts
+++ b/packages/kit-headless/src/components/select/select.test.ts
@@ -7,17 +7,8 @@ async function setup(page: Page, exampleName: string) {
 
   const driver = createTestDriver(page.getByRole('combobox'));
 
-  const { getRoot, getListbox, getTrigger, getItemAt, getValueElement, openListbox } =
-    driver;
-
   return {
     driver,
-    getRoot,
-    getListbox,
-    getTrigger,
-    getItemAt,
-    getValueElement,
-    openListbox,
   };
 }
 
@@ -101,17 +92,6 @@ test.describe('Mouse Behavior', () => {
     await expect(d.getValueElement()).toHaveText(expectedValue);
   });
 
-  // if we want to add focusing the trigger on blur
-  // test(`GIVEN a basic select
-  //       WHEN the listbox is open and the blur event is triggered
-  //       THEN focus should go back to the trigger`, async ({ page }) => {
-  //   const { getTrigger, openListbox } = await setup(page, 'hero');
-
-  //   await openListbox('click');
-  //   await getTrigger().blur();
-  //   await expect(getTrigger()).toBeFocused();
-  // });
-
   test(`GIVEN an open hero select
         WHEN clicking on the group label
         THEN the listbox should remain open`, async ({ page }) => {
@@ -221,146 +201,113 @@ test.describe('Keyboard Behavior', () => {
         WHEN pressing the down arrow key
         THEN the listbox should be opened
         AND the first option should have data-highlighted`, async ({ page }) => {
-      const {
-        getTrigger,
-        getListbox,
-        getItemAt: getOptionAt,
-      } = await setup(page, 'hero');
+      const { driver: d } = await setup(page, 'hero');
 
-      await getTrigger().focus();
-      await getTrigger().press('ArrowDown');
-      await expect(getListbox()).toBeVisible();
+      await d.getTrigger().focus();
+      await d.getTrigger().press('ArrowDown');
+      await expect(d.getListbox()).toBeVisible();
 
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
     });
 
     test(`GIVEN a hero select
         WHEN pressing the enter key
         THEN open up the listbox
         AND the first option should have data-highlighted`, async ({ page }) => {
-      const {
-        getTrigger,
-        getListbox,
-        getItemAt: getOptionAt,
-      } = await setup(page, 'hero');
+      const { driver: d } = await setup(page, 'hero');
 
-      await getTrigger().focus();
-      await getTrigger().press('Enter');
-      await expect(getListbox()).toBeVisible();
+      await d.getTrigger().focus();
+      await d.getTrigger().press('Enter');
+      await expect(d.getListbox()).toBeVisible();
 
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
     });
 
     test(`GIVEN a hero select
         WHEN pressing the space key
         THEN open up the listbox
         AND the first option should have data-highlighted`, async ({ page }) => {
-      const {
-        getTrigger,
-        getListbox,
-        getItemAt: getOptionAt,
-      } = await setup(page, 'hero');
+      const { driver: d } = await setup(page, 'hero');
 
-      await getTrigger().focus();
-      await getTrigger().press('Space');
-      await expect(getListbox()).toBeVisible();
+      await d.getTrigger().focus();
+      await d.getTrigger().press('Space');
+      await expect(d.getListbox()).toBeVisible();
 
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
     });
 
     test(`GIVEN a hero select
         WHEN pressing the up arrow
         THEN open up the listbox
         AND the first option should have data-highlighted`, async ({ page }) => {
-      const {
-        getTrigger,
-        getListbox,
-        getItemAt: getOptionAt,
-      } = await setup(page, 'hero');
+      const { driver: d } = await setup(page, 'hero');
 
-      await getTrigger().focus();
-      await getTrigger().press('ArrowUp');
-      await expect(getListbox()).toBeVisible();
+      await d.getTrigger().focus();
+      await d.getTrigger().press('ArrowUp');
+      await expect(d.getListbox()).toBeVisible();
 
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
     });
 
     test(`GIVEN an open hero select
         WHEN pressing the end key
         THEN the last option should have data-highlighted`, async ({ page }) => {
-      const {
-        getTrigger,
-        getItemAt: getOptionAt,
-        openListbox,
-      } = await setup(page, 'hero');
+      const { driver: d } = await setup(page, 'hero');
 
-      await openListbox('click');
+      await d.openListbox('Enter');
 
-      await getTrigger().focus();
-      await getTrigger().press('End');
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
+      await d.getHighlightedItem().press('End');
 
-      await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
+      await expect(d.getItemAt('last')).toHaveAttribute('data-highlighted');
     });
 
     test(`GIVEN an open hero select
         WHEN pressing the home key after the end key
         THEN the first option should have data-highlighted`, async ({ page }) => {
-      const {
-        getTrigger,
-        getItemAt: getOptionAt,
-        openListbox,
-      } = await setup(page, 'hero');
+      const { driver: d } = await setup(page, 'hero');
 
-      await openListbox('click');
+      await d.openListbox('Enter');
 
       // to last index
-      await getTrigger().focus();
-      await getTrigger().press('End');
-
-      await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
+      await d.getHighlightedItem().press('End');
+      await expect(d.getItemAt('last')).toHaveAttribute('data-highlighted');
 
       // to first index
-      await getTrigger().press('Home');
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+      await d.getHighlightedItem().press('Home');
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
     });
 
     test(`GIVEN an open hero select
   WHEN the first option is highlighted and the down arrow key is pressed
   THEN the second option should have data-highlighted`, async ({ page }) => {
-      const {
-        getTrigger,
-        getItemAt: getOptionAt,
-        openListbox,
-      } = await setup(page, 'hero');
+      const { driver: d } = await setup(page, 'hero');
 
-      await openListbox('Enter');
+      await d.openListbox('Enter');
 
       // first index highlighted
 
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+      await expect(d.getHighlightedItem()).toHaveAttribute('data-highlighted');
 
-      await getTrigger().focus();
-      await getTrigger().press('ArrowDown');
-      await expect(getOptionAt(1)).toHaveAttribute('data-highlighted');
+      await d.getHighlightedItem().focus();
+      await d.getHighlightedItem().press('ArrowDown');
+      await expect(d.getItemAt(1)).toHaveAttribute('data-highlighted');
     });
 
     test(`GIVEN an open hero select
   WHEN the third option is highlighted and the up arrow key is pressed
   THEN the second option should have data-highlighted`, async ({ page }) => {
-      const {
-        getTrigger,
-        getItemAt: getOptionAt,
-        openListbox,
-      } = await setup(page, 'hero');
+      const { driver: d } = await setup(page, 'hero');
 
-      await openListbox('Enter');
+      await d.openListbox('Enter');
 
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
-      await getTrigger().press('ArrowDown');
-      await getTrigger().press('ArrowDown');
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
+      await d.getHighlightedItem().press('ArrowDown');
+      await d.getHighlightedItem().press('ArrowDown');
+      1;
 
-      await getTrigger().press('ArrowUp');
-      await expect(getOptionAt(1)).toHaveAttribute('data-highlighted');
+      await d.getHighlightedItem().press('ArrowUp');
+      await expect(d.getItemAt(1)).toHaveAttribute('data-highlighted');
     });
 
     test(`GIVEN a hero select with a chosen option
@@ -368,88 +315,67 @@ test.describe('Keyboard Behavior', () => {
           THEN the data-highlighted option should not change on re-open`, async ({
       page,
     }) => {
-      const {
-        getTrigger,
-        getListbox,
-        getItemAt: getOptionAt,
-        openListbox,
-      } = await setup(page, 'hero');
+      const { driver: d } = await setup(page, 'hero');
 
-      await openListbox('Enter');
+      await d.openListbox('Enter');
 
       // second option highlighted
+      await d.getHighlightedItem().press('ArrowDown');
+      await expect(d.getItemAt(1)).toHaveAttribute('data-highlighted');
+      await d.getHighlightedItem().press('Enter');
+      await expect(d.getListbox()).toBeHidden();
 
-      await getTrigger().press('ArrowDown');
-      await expect(getOptionAt(1)).toHaveAttribute('data-highlighted');
-      await getTrigger().press('Enter');
-      await expect(getListbox()).toBeHidden();
-
-      await getTrigger().press('ArrowDown');
-      await expect(getOptionAt(1)).toHaveAttribute('data-highlighted');
+      await d.getHighlightedItem().press('ArrowDown');
+      await expect(d.getItemAt(1)).toHaveAttribute('data-highlighted');
     });
   });
 
   test.describe('selecting options', () => {
-    test(`GIVEN an opened hero select with the first option highlighted
+    test(`GIVEN an opened select with the first option highlighted
           WHEN the Enter key is pressed
           THEN the listbox should be closed and aria-expanded should be false`, async ({
       page,
     }) => {
-      const {
-        getTrigger,
-        getListbox,
-        getItemAt: getOptionAt,
-        openListbox,
-      } = await setup(page, 'hero');
-
-      await openListbox('Enter');
-
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
-      await getTrigger().press('Enter');
-      await expect(getListbox()).toBeHidden();
-      await expect(getTrigger()).toHaveAttribute('aria-expanded', 'false');
+      const { driver: d } = await setup(page, 'hero');
+
+      await d.openListbox('Enter');
+
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
+      await d.getHighlightedItem().press('Enter');
+      await expect(d.getListbox()).toBeHidden();
+      await expect(d.getTrigger()).toHaveAttribute('aria-expanded', 'false');
     });
 
-    test(`GIVEN an open hero select
+    test(`GIVEN an open select
           WHEN an option has data-highlighted
           AND the Enter key is pressed
           THEN option value should be the selected value
           AND should have an aria-selected of true`, async ({ page }) => {
-      const {
-        getTrigger,
-        getItemAt: getOptionAt,
-        getValueElement,
-        openListbox,
-      } = await setup(page, 'hero');
-
-      await openListbox('Enter');
-
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
-      const expectedValue = await getOptionAt(0).textContent();
-      await getTrigger().press('Enter');
-      await expect(getValueElement()).toHaveText(expectedValue!);
+      const { driver: d } = await setup(page, 'hero');
+
+      await d.openListbox('Enter');
+
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
+      const expectedValue = await d.getItemAt(0).textContent();
+      await d.getHighlightedItem().press('Enter');
+      await expect(d.getValueElement()).toHaveText(expectedValue!);
     });
 
-    test(`GIVEN an open hero select
+    test(`GIVEN an open select
           WHEN an option has data-highlighted
           AND the Space key is pressed
           THEN the listbox should be closed and aria-expanded false`, async ({
       page,
     }) => {
-      const {
-        getTrigger,
-        getListbox,
-        getItemAt: getOptionAt,
-        openListbox,
-      } = await setup(page, 'hero');
+      const { driver: d } = await setup(page, 'hero');
 
-      await openListbox('Space');
+      await d.openListbox('Space');
 
       // second option highlighted
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
-      await getTrigger().press('Space');
-      await expect(getListbox()).toBeHidden();
-      await expect(getTrigger()).toHaveAttribute('aria-expanded', 'false');
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
+      await d.getHighlightedItem().press('Space');
+      await expect(d.getListbox()).toBeHidden();
+      await expect(d.getTrigger()).toHaveAttribute('aria-expanded', 'false');
     });
 
     test(`GIVEN an open hero select
@@ -457,19 +383,25 @@ test.describe('Keyboard Behavior', () => {
           AND the Space key is pressed
           THEN option value should be the selected value
           AND should have an aria-selected of true`, async ({ page }) => {
-      const {
-        getTrigger,
-        getItemAt: getOptionAt,
-        getValueElement,
-        openListbox,
-      } = await setup(page, 'hero');
-
-      await openListbox('Space');
-
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
-      const expectedValue = await getOptionAt(0).textContent();
-      await getTrigger().press('Space');
-      await expect(getValueElement()).toHaveText(expectedValue!);
+      const { driver: d } = await setup(page, 'hero');
+
+      await d.openListbox('Space');
+
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
+      const expectedValue = await d.getItemAt(0).textContent();
+      await d.getItemAt(0).press('Space');
+      await expect(d.getValueElement()).toHaveText(expectedValue!);
+    });
+
+    test(`GIVEN an open select
+          WHEN an option is selected
+          THEN focus should go back to the trigger`, async ({ page }) => {
+      const { driver: d } = await setup(page, 'hero');
+
+      await d.openListbox('Space');
+
+      await d.getHighlightedItem().press('Enter');
+      await expect(d.getTrigger()).toBeFocused();
     });
 
     test(`GIVEN no selected item and a placeholder
@@ -477,19 +409,15 @@ test.describe('Keyboard Behavior', () => {
           THEN the first enabled option should be selected and have aria-selected`, async ({
       page,
     }) => {
-      const {
-        getTrigger,
-        getItemAt: getOptionAt,
-        getValueElement,
-      } = await setup(page, 'hero');
-
-      const firstItemValue = await getOptionAt(0).textContent();
-      await getTrigger().focus();
-      await getTrigger().press('ArrowRight');
-
-      expect(getValueElement()).toHaveText(firstItemValue!);
-      await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+      const { driver: d } = await setup(page, 'hero');
+
+      const firstItemValue = await d.getItemAt(0).textContent();
+      await d.getTrigger().focus();
+      await d.getTrigger().press('ArrowRight');
+
+      expect(d.getValueElement()).toHaveText(firstItemValue!);
+      await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'true');
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
     });
 
     test(`GIVEN no selected item and a placeholder
@@ -516,23 +444,19 @@ test.describe('Keyboard Behavior', () => {
           THEN the first item should be selected and have aria-selected & data-highlighted`, async ({
       page,
     }) => {
-      const {
-        getTrigger,
-        getItemAt: getOptionAt,
-        getValueElement,
-      } = await setup(page, 'hero');
+      const { driver: d } = await setup(page, 'hero');
 
       // get initial selected value
       // const firstItemValue = await getOptionAt(0).textContent();
-      await getTrigger().focus();
-      await getTrigger().press('ArrowRight');
-      await expect(getValueElement()).toHaveText('Tim');
-      await getTrigger().press('ArrowRight');
-
-      await getTrigger().press('ArrowLeft');
-      await expect(getValueElement()).toHaveText('Tim');
-      await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
-      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+      await d.getTrigger().focus();
+      await d.getTrigger().press('ArrowRight');
+      await expect(d.getValueElement()).toHaveText('Tim');
+      await d.getTrigger().press('ArrowRight');
+
+      await d.getTrigger().press('ArrowLeft');
+      await expect(d.getValueElement()).toHaveText('Tim');
+      await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'true');
+      await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
     });
   });
 
@@ -542,10 +466,10 @@ test.describe('Keyboard Behavior', () => {
           THEN the first option starting with the letter "j" should have data-highlighted`, async ({
       page,
     }) => {
-      const { getRoot, getTrigger, openListbox } = await setup(page, 'typeahead');
-      await openListbox('ArrowDown');
-      await getTrigger().pressSequentially('j');
-      const highlightedOpt = getRoot().locator('[data-highlighted]');
+      const { driver: d } = await setup(page, 'typeahead');
+      await d.openListbox('ArrowDown');
+      await d.getItemAt(0).press('j');
+      const highlightedOpt = d.getRoot().locator('[data-highlighted]');
       await expect(highlightedOpt).toContainText('j', { ignoreCase: true });
     });
 
@@ -554,11 +478,11 @@ test.describe('Keyboard Behavior', () => {
           THEN the second option starting with the letter "j" should have data-highlighted`, async ({
       page,
     }) => {
-      const { getRoot, getTrigger, openListbox } = await setup(page, 'typeahead');
-      await openListbox('ArrowDown');
-      await getTrigger().pressSequentially('jj', { delay: 1250 });
-      const highlightedOpt = getRoot().locator('[data-highlighted]');
-      await expect(highlightedOpt).toContainText('jessie', { ignoreCase: true });
+      const { driver: d } = await setup(page, 'typeahead');
+      await d.openListbox('ArrowDown');
+
+      await d.getHighlightedItem().pressSequentially('jj', { delay: 1250 });
+      await expect(d.getHighlightedItem()).toContainText('jessie', { ignoreCase: true });
     });
 
     test(`GIVEN an open select with a typeahead support
@@ -566,11 +490,10 @@ test.describe('Keyboard Behavior', () => {
           THEN the first option starting with the letter "t" should have data-highlighted`, async ({
       page,
     }) => {
-      const { getRoot, getTrigger, openListbox } = await setup(page, 'typeahead');
-      await openListbox('ArrowDown');
-      await getTrigger().pressSequentially('jjt', { delay: 1250 });
-      const highlightedOpt = getRoot().locator('[data-highlighted]');
-      await expect(highlightedOpt).toContainText('tim', { ignoreCase: true });
+      const { driver: d } = await setup(page, 'typeahead');
+      await d.openListbox('ArrowDown');
+      await d.getHighlightedItem().pressSequentially('jjt', { delay: 1250 });
+      await expect(d.getHighlightedItem()).toContainText('tim', { ignoreCase: true });
     });
 
     test(`GIVEN an open select with typeahead support and multiple characters
@@ -579,22 +502,20 @@ test.describe('Keyboard Behavior', () => {
           THEN the first option starting with "je" should have data-highlighted`, async ({
       page,
     }) => {
-      const { getRoot, getTrigger, openListbox } = await setup(page, 'typeahead');
-      await openListbox('ArrowDown');
-      await getTrigger().pressSequentially('a', { delay: 1500 });
-      await getTrigger().pressSequentially('je', { delay: 100 });
-      const highlightedOpt = getRoot().locator('[data-highlighted]');
-      await expect(highlightedOpt).toContainText('jessie', { ignoreCase: true });
+      const { driver: d } = await setup(page, 'typeahead');
+      await d.openListbox('ArrowDown');
+      await d.getHighlightedItem().pressSequentially('a', { delay: 1500 });
+      await d.getHighlightedItem().pressSequentially('je', { delay: 100 });
+      await expect(d.getHighlightedItem()).toContainText('jessie', { ignoreCase: true });
     });
 
     test(`GIVEN an open select with typeahead support and multiple characters
           WHEN the user types in a letter that does not match any option
           THEN the data-highlighted value should not change.`, async ({ page }) => {
-      const { getRoot, getTrigger, openListbox } = await setup(page, 'typeahead');
-      await openListbox('ArrowDown');
-      await getTrigger().pressSequentially('am', { delay: 1250 });
-      const highlightedOpt = getRoot().locator('[data-highlighted]');
-      await expect(highlightedOpt).toContainText('abby', { ignoreCase: true });
+      const { driver: d } = await setup(page, 'typeahead');
+      await d.openListbox('ArrowDown');
+      await d.getHighlightedItem().pressSequentially('am', { delay: 1250 });
+      await expect(d.getHighlightedItem()).toContainText('abby', { ignoreCase: true });
     });
 
     test(`GIVEN an open select with typeahead support and repeated characters
@@ -602,44 +523,41 @@ test.describe('Keyboard Behavior', () => {
           THEN the data-highlighted value should cycle through the options`, async ({
       page,
     }) => {
-      const { getRoot, getTrigger, openListbox } = await setup(page, 'typeahead');
-      await openListbox('ArrowDown');
-      await getTrigger().pressSequentially('jjj', { delay: 1250 });
-      const highlightedOpt = getRoot().locator('[data-highlighted]');
-      await expect(highlightedOpt).toContainText('jim', { ignoreCase: true });
+      const { driver: d } = await setup(page, 'typeahead');
+      await d.openListbox('ArrowDown');
+      await d.getHighlightedItem().pressSequentially('jjj', { delay: 1250 });
+      await expect(d.getHighlightedItem()).toContainText('jim', { ignoreCase: true });
     });
 
     test(`GIVEN an open select with typeahead support and grouped options
           WHEN the user types a letter matching an option in one group
           AND the user types a letter matching an option in another group
           THEN the data-highlighted value should switch groups`, async ({ page }) => {
-      const { getRoot, getTrigger, openListbox } = await setup(page, 'group');
-      await openListbox('ArrowDown');
-      await getTrigger().press('j');
-      const highlightedOpt = getRoot().locator('[data-highlighted]');
-      await expect(highlightedOpt).toContainText('Jim', { ignoreCase: true });
-      await getTrigger().press('d');
-      await expect(highlightedOpt).toContainText('dog', { ignoreCase: true });
+      const { driver: d } = await setup(page, 'group');
+      await d.openListbox('ArrowDown');
+      await d.getHighlightedItem().press('j');
+      await expect(d.getHighlightedItem()).toContainText('Jim', { ignoreCase: true });
+      await d.getHighlightedItem().press('d');
+      await expect(d.getHighlightedItem()).toContainText('dog', { ignoreCase: true });
     });
 
     test(`GIVEN a closed select with typeahead support
           WHEN the user types a letter matching an option
           THEN the display value should first matching option`, async ({ page }) => {
-      const { getTrigger } = await setup(page, 'hero');
-      await getTrigger().focus();
-      await getTrigger().press('j');
-      await expect(getTrigger()).toHaveText('Jim');
+      const { driver: d } = await setup(page, 'hero');
+      await d.getTrigger().press('j');
+      await expect(d.getTrigger()).toHaveText('Jim');
     });
 
     test(`GIVEN a closed select with typeahead support
           WHEN the user types a letter matching an option
           THEN the first matching option should be selected`, async ({ page }) => {
       // ideally want to refactor this so that even if the test example is changed, the test will still pass, getting it more programmatically.
-      const { getRoot, getTrigger } = await setup(page, 'hero');
-      await getTrigger().focus();
+      const { driver: d } = await setup(page, 'hero');
+      await d.getTrigger().focus();
       const char = 'j';
-      await getTrigger().press(char);
-      const firstJOption = getRoot().locator('li', { hasText: char }).nth(0);
+      await d.getTrigger().press(char);
+      const firstJOption = d.getRoot().locator('li', { hasText: char }).nth(0);
       await expect(firstJOption).toHaveAttribute('aria-selected', 'true');
       await expect(firstJOption).toHaveAttribute('data-highlighted');
     });
@@ -651,95 +569,69 @@ test.describe('Keyboard Behavior', () => {
           AND the last option is data-highlighted
           WHEN the down key is pressed
           THEN data-highlighted should stay on the last option`, async ({ page }) => {
-        const {
-          getTrigger,
-          getItemAt: getOptionAt,
-          openListbox,
-        } = await setup(page, 'hero');
+        const { driver: d } = await setup(page, 'hero');
 
         // initially last option is highlighted
-        await openListbox('Enter');
-        const trigger = getTrigger();
-        await trigger.focus();
-        await trigger.press('End');
-
-        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
+        await d.openListbox('Enter');
+        await d.getItemAt(0).press('End');
 
-        await trigger.focus();
-        await trigger.press('ArrowDown');
-        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
+        await d.getItemAt('last').press('ArrowDown');
+        await expect(d.getItemAt('last')).toHaveAttribute('data-highlighted');
       });
 
       test(`GIVEN an open basic select
           AND the first option is data-highlighted
           WHEN the up arrow key is pressed
           THEN data-highlighted should stay on the first option`, async ({ page }) => {
-        const {
-          getTrigger,
-          getItemAt: getOptionAt,
-          openListbox,
-        } = await setup(page, 'hero');
-
-        await openListbox('Enter');
-        const option = getOptionAt(0);
-        await expect(option).toHaveAttribute('data-highlighted');
-        await getTrigger().focus();
-        await getTrigger().press('ArrowUp');
-        await expect(option).toHaveAttribute('data-highlighted');
+        const { driver: d } = await setup(page, 'hero');
+
+        await d.openListbox('Enter');
+        const firstItem = d.getItemAt(0);
+        await expect(firstItem).toHaveAttribute('data-highlighted');
+        await firstItem.press('ArrowUp');
+        await expect(firstItem).toHaveAttribute('data-highlighted');
       });
 
       test(`GIVEN a closed basic select
           AND the last option is selected
           WHEN the right arrow key is pressed
           THEN it should stay on the last option`, async ({ page }) => {
-        const {
-          getTrigger,
-          getItemAt: getOptionAt,
-          getListbox,
-          openListbox,
-        } = await setup(page, 'hero');
+        const { driver: d } = await setup(page, 'hero');
 
         // initially last option is highlighted & listbox closed
-        await openListbox('Enter');
-        await getTrigger().focus();
-        await getTrigger().press('End');
-
-        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
-        await getTrigger().press('Enter');
-        await expect(getOptionAt('last')).toHaveAttribute('aria-selected', 'true');
-        await expect(getListbox()).toBeHidden();
-
-        await getTrigger().focus();
-        await getTrigger().press('ArrowRight');
-        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
-        await expect(getOptionAt('last')).toHaveAttribute('aria-selected', 'true');
+        await d.openListbox('Enter');
+        await d.getItemAt(0).press('End');
+
+        const lastItem = d.getItemAt('last');
+        await expect(lastItem).toHaveAttribute('data-highlighted');
+        await lastItem.press('Enter');
+        await expect(lastItem).toHaveAttribute('aria-selected', 'true');
+        await expect(d.getListbox()).toBeHidden();
+
+        await d.getTrigger().press('ArrowRight');
+        await expect(lastItem).toHaveAttribute('data-highlighted');
+        await expect(lastItem).toHaveAttribute('aria-selected', 'true');
       });
 
       test(`GIVEN a closed basic select
           AND the first option is selected
           WHEN the left arrow key is pressed
           THEN it should stay on the first option`, async ({ page }) => {
-        const {
-          getTrigger,
-          getItemAt: getOptionAt,
-          getListbox,
-          openListbox,
-        } = await setup(page, 'hero');
+        const { driver: d } = await setup(page, 'hero');
 
         // initially first option is highlighted & listbox closed
-        await openListbox('Enter');
-        await expect(getListbox()).toBeVisible();
-        await getTrigger().focus();
-        await getTrigger().press('Enter');
-
-        await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
-        await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
-        await expect(getListbox()).toBeHidden();
-
-        await getTrigger().focus();
-        await getTrigger().press('ArrowLeft');
-        await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
-        await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+        await d.openListbox('Enter');
+        await expect(d.getListbox()).toBeVisible();
+        await d.getItemAt(0).press('Enter');
+
+        await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
+        await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'true');
+        await expect(d.getListbox()).toBeHidden();
+
+        await d.getTrigger().focus();
+        await d.getTrigger().press('ArrowLeft');
+        await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
+        await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'true');
       });
     });
 
@@ -748,94 +640,71 @@ test.describe('Keyboard Behavior', () => {
             AND the last option is data-highlighted
             WHEN the down arrow key is pressed
             THEN the first option should have data-highlighted`, async ({ page }) => {
-        const {
-          getTrigger,
-          getItemAt: getOptionAt,
-          openListbox,
-        } = await setup(page, 'loop');
+        const { driver: d } = await setup(page, 'loop');
 
         // initially last option is highlighted
-        await openListbox('Enter');
-        await getTrigger().focus();
-        await getTrigger().press('End');
+        await d.openListbox('Enter');
+        await d.getHighlightedItem().press('End');
 
-        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
+        await expect(d.getItemAt('last')).toHaveAttribute('data-highlighted');
 
-        await getTrigger().focus();
-        await getTrigger().press('ArrowDown');
-        await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+        await d.getHighlightedItem().press('ArrowDown');
+        await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
       });
 
       test(`GIVEN an open select with loop enabled
             AND the first option is data-highlighted
             WHEN the up arrow key is pressed
             THEN the last option should have data-highlighted`, async ({ page }) => {
-        const {
-          getTrigger,
-          getItemAt: getOptionAt,
-          openListbox,
-        } = await setup(page, 'loop');
+        const { driver: d } = await setup(page, 'loop');
 
         // initially last option is highlighted
-        await openListbox('Enter');
-        await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+        await d.openListbox('Enter');
+        await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
 
-        await getTrigger().focus();
-        await getTrigger().press('ArrowUp');
-        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
+        await d.getHighlightedItem().press('ArrowUp');
+        await expect(d.getItemAt('last')).toHaveAttribute('data-highlighted');
       });
 
       test(`GIVEN a closed select with loop enabled
             AND the last option is selected
             WHEN the right arrow key is pressed
             THEN it should loop to the first option`, async ({ page }) => {
-        const {
-          getTrigger,
-          getItemAt: getOptionAt,
-          openListbox,
-          getListbox,
-        } = await setup(page, 'loop');
+        const { driver: d } = await setup(page, 'loop');
 
         // initially last option is highlighted
-        await openListbox('Enter');
-        await getTrigger().focus();
-        await getTrigger().press('End');
-        await getTrigger().press('Enter');
+        await d.openListbox('Enter');
+        await d.getHighlightedItem().press('End');
+        await d.getHighlightedItem().press('Enter');
 
-        await expect(getListbox()).toBeHidden();
+        await expect(d.getListbox()).toBeHidden();
 
-        await expect(getOptionAt('last')).toHaveAttribute('aria-selected', 'true');
+        await expect(d.getItemAt('last')).toHaveAttribute('aria-selected', 'true');
 
-        await getTrigger().focus();
-        await getTrigger().press('ArrowRight');
-        await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
-        await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+        await d.getTrigger().focus();
+        await d.getTrigger().press('ArrowRight');
+        await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
+        await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'true');
       });
 
       test(`GIVEN a closed select with loop enabled
             AND the first option is selected
             WHEN the right arrow key is pressed
             THEN it should loop to the first option`, async ({ page }) => {
-        const {
-          getTrigger,
-          getItemAt: getOptionAt,
-          openListbox,
-          getListbox,
-        } = await setup(page, 'loop');
+        const { driver: d } = await setup(page, 'loop');
 
         // initially select first option
-        await openListbox('Enter');
-        await getTrigger().focus();
-        await getTrigger().press('Enter');
+        await d.openListbox('Enter');
+        await d.getHighlightedItem().press('Enter');
 
-        await expect(getListbox()).toBeHidden();
+        await expect(d.getListbox()).toBeHidden();
 
-        await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+        await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'true');
 
-        await getTrigger().focus();
-        await getTrigger().press('ArrowLeft');
-        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
-        await expect(getOptionAt('last')).toHaveAttribute('aria-selected', 'true');
+        await d.getTrigger().focus();
+        await d.getTrigger().press('ArrowLeft');
+        await expect(d.getItemAt('last')).toHaveAttribute('data-highlighted');
+        await expect(d.getItemAt('last')).toHaveAttribute('aria-selected', 'true');
       });
     });
   });
@@ -844,18 +713,13 @@ test.describe('Keyboard Behavior', () => {
         AND the last option is not visible
         WHEN the end key is pressed
         THEN the last option should be visible`, async ({ page }) => {
-    const {
-      getTrigger,
-      getItemAt: getOptionAt,
-      openListbox,
-    } = await setup(page, 'scrollable');
+    const { driver: d } = await setup(page, 'scrollable');
 
-    await openListbox('Enter');
+    await d.openListbox('Enter');
 
-    await getTrigger().focus();
-    await getTrigger().press('End');
+    await d.getHighlightedItem().press('End');
 
-    await expect(getOptionAt('last')).toBeInViewport();
+    await expect(d.getItemAt('last')).toBeInViewport();
   });
 });
 
@@ -863,60 +727,32 @@ test.describe('Disabled', () => {
   test(`GIVEN an open disabled select with the first option disabled
         WHEN clicking the disabled option
         It should have aria-disabled`, async ({ page }) => {
-    const {
-      getTrigger,
-      getItemAt: getOptionAt,
-      openListbox,
-    } = await setup(page, 'disabled');
+    const { driver: d } = await setup(page, 'disabled');
 
-    await openListbox('Enter');
-
-    await getTrigger().focus();
-    await getTrigger().press('ArrowDown');
-    await expect(getOptionAt(0)).toBeDisabled();
+    await d.openListbox('Enter');
+    await d.getHighlightedItem().press('ArrowDown');
+    await expect(d.getItemAt(0)).toBeDisabled();
   });
 
-  // causing false positives?
-  // test(`GIVEN an open disabled select with the first option disabled
-  //       WHEN clicking the disabled option
-  //       THEN the listbox should stay open`, async ({ page }) => {
-  //   const { getListbox, getOptionAt, openListbox } = await setup(
-  //     page,
-  //     'disabled',
-  //   );
-
-  //   await openListbox('Enter');
-
-  //   const options = await getOptionAt();
-  //   // eslint-disable-next-line playwright/no-force-option
-  //   await options[0].click({ force: true });
-  //   await expect(getListbox()).toBeVisible();
-  // });
-
   test(`GIVEN an open disabled select
         WHEN first option is disabled
         THEN the second option should have data-highlighted`, async ({ page }) => {
-    const { getItemAt: getOptionAt, openListbox } = await setup(page, 'disabled');
+    const { driver: d } = await setup(page, 'disabled');
 
-    await openListbox('ArrowDown');
+    await d.openListbox('ArrowDown');
 
-    await expect(getOptionAt(1)).toHaveAttribute('data-highlighted');
+    await expect(d.getItemAt(1)).toHaveAttribute('data-highlighted');
   });
 
   test(`GIVEN an open disabled select
         WHEN the last option is disabled and the end key is pressed
         THEN the second last index should have data-highlighted`, async ({ page }) => {
-    const {
-      driver,
-      getTrigger,
-      getItemAt: getOptionAt,
-      openListbox,
-    } = await setup(page, 'disabled');
-
-    await openListbox('ArrowDown');
-    await getTrigger().press('End');
-    const length = await driver.getItemsLength();
-    const lastEnabledOption = await getOptionAt(length - 2);
+    const { driver: d } = await setup(page, 'disabled');
+
+    await d.openListbox('ArrowDown');
+    await d.getHighlightedItem().press('End');
+    const length = await d.getItemsLength();
+    const lastEnabledOption = d.getItemAt(length - 2);
     await expect(lastEnabledOption).toHaveAttribute('data-highlighted');
   });
 
@@ -924,36 +760,28 @@ test.describe('Disabled', () => {
         WHEN the second option is highlighted and the down arrow key is pressed
         AND the first and third options are disabled
         THEN the fourth option should be highlighted`, async ({ page }) => {
-    const {
-      getTrigger,
-      getItemAt: getOptionAt,
-      openListbox,
-    } = await setup(page, 'disabled');
-
-    await openListbox('ArrowDown');
-    await expect(getOptionAt(1)).toHaveAttribute('data-highlighted');
-    await getTrigger().press('ArrowDown');
-    await expect(getOptionAt(3)).toHaveAttribute('data-highlighted');
+    const { driver: d } = await setup(page, 'disabled');
+
+    await d.openListbox('ArrowDown');
+    await expect(d.getItemAt(1)).toHaveAttribute('data-highlighted');
+    await d.getHighlightedItem().press('ArrowDown');
+    await expect(d.getItemAt(3)).toHaveAttribute('data-highlighted');
   });
 
   test(`GIVEN an open disabled select
         WHEN the fourth is highlighted and the up key is pressed
         AND the first and third options are disabled
         THEN the second option should be highlighted`, async ({ page }) => {
-    const {
-      getTrigger,
-      getItemAt: getOptionAt,
-      openListbox,
-    } = await setup(page, 'disabled');
+    const { driver: d } = await setup(page, 'disabled');
 
     // initially the fourh option is highlighted
-    await openListbox('ArrowDown');
-    const secondOption = await getOptionAt(1);
+    await d.openListbox('ArrowDown');
+    const secondOption = await d.getItemAt(1);
     await expect(secondOption).toHaveAttribute('data-highlighted');
-    await getTrigger().press('ArrowDown');
-    await expect(getOptionAt(3)).toHaveAttribute('data-highlighted');
+    await d.getHighlightedItem().press('ArrowDown');
+    await expect(d.getItemAt(3)).toHaveAttribute('data-highlighted');
 
-    await getTrigger().press('ArrowUp');
+    await d.getHighlightedItem().press('ArrowUp');
     await expect(secondOption).toHaveAttribute('data-highlighted');
   });
 });
@@ -964,9 +792,9 @@ test.describe('Props', () => {
         THEN the placeholder should be presented instead of a selected value`, async ({
     page,
   }) => {
-    const { getValueElement } = await setup(page, 'hero');
+    const { driver: d } = await setup(page, 'hero');
 
-    await expect(getValueElement()).toHaveText('Select an option');
+    await expect(d.getValueElement()).toHaveText('Select an option');
   });
 
   test(`GIVEN a select with an onChange$ prop
@@ -974,17 +802,13 @@ test.describe('Props', () => {
         THEN the placeholder should be presented instead of a selected value`, async ({
     page,
   }) => {
-    const {
-      openListbox,
-      getItemAt: getOptionAt,
-      getRoot,
-    } = await setup(page, 'change-value');
+    const { driver: d } = await setup(page, 'change-value');
 
-    await openListbox('click');
+    await d.openListbox('click');
 
-    await getOptionAt(3).click();
+    await d.getItemAt(3).click();
 
-    const sibling = getRoot().locator('+ p');
+    const sibling = d.getRoot().locator('+ p');
     await expect(sibling).toHaveText('You have changed 1 times');
   });
 
@@ -993,11 +817,11 @@ test.describe('Props', () => {
         THEN the placeholder should be presented instead of a selected value`, async ({
     page,
   }) => {
-    const { getRoot, openListbox } = await setup(page, 'open-change');
+    const { driver: d } = await setup(page, 'open-change');
 
-    await openListbox('click');
+    await d.openListbox('click');
 
-    const sibling = getRoot().locator('+ p');
+    const sibling = d.getRoot().locator('+ p');
     await expect(sibling).toHaveText('The listbox opened and closed 1 time(s)');
   });
 
@@ -1023,13 +847,13 @@ test.describe('Props', () => {
           THEN the selected value should be the data passed to the bind:value prop
           AND should should have data-highlighted
           AND aria-selected set to true`, async ({ page }) => {
-      const { getValueElement, getItemAt: getOptionAt } = await setup(page, 'controlled');
+      const { driver: d } = await setup(page, 'controlled');
 
-      const expectedValue = await getOptionAt(1).textContent();
+      const expectedValue = await d.getItemAt(1).textContent();
 
-      await expect(getValueElement()).toContainText(expectedValue!);
-      await expect(getOptionAt(1)).toHaveAttribute('data-highlighted');
-      await expect(getOptionAt(1)).toHaveAttribute('aria-selected', 'true');
+      await expect(d.getValueElement()).toContainText(expectedValue!);
+      await expect(d.getItemAt(1)).toHaveAttribute('data-highlighted');
+      await expect(d.getItemAt(1)).toHaveAttribute('aria-selected', 'true');
     });
 
     test(`GIVEN a controlled closed select with a bind:open prop on the root component
@@ -1049,14 +873,13 @@ test.describe('Props', () => {
     test(`GIVEN a select with distinct display and option values
           WHEN the 2nd option is selected
           THEN the selected value matches the 2nd option's value`, async ({ page }) => {
-      const { openListbox, getTrigger } = await setup(page, 'item-value');
+      const { driver: d } = await setup(page, 'item-value');
 
-      await openListbox('Enter');
+      await d.openListbox('Enter');
 
       await expect(page.locator('p')).toContainText('The selected value is: null');
-      await getTrigger().focus();
-      await getTrigger().press('ArrowDown');
-      await getTrigger().press('Enter');
+      await d.getHighlightedItem().press('ArrowDown');
+      await d.getHighlightedItem().press('Enter');
 
       await expect(page.locator('p')).toContainText('The selected value is: 1');
     });
@@ -1064,12 +887,12 @@ test.describe('Props', () => {
     test(`GIVEN a select with distinct display and option values
           WHEN a controlled value is set to the 5th option
           THEN the selected value matches the 5th option's value`, async ({ page }) => {
-      const { getTrigger } = await setup(page, 'controlled-value');
+      const { driver: d } = await setup(page, 'controlled-value');
 
-      await expect(getTrigger()).toHaveText('Ryan');
+      await expect(d.getTrigger()).toHaveText('Ryan');
       await page.getByRole('button', { name: 'Change to Abby' }).click();
 
-      await expect(getTrigger()).toHaveText(`Abby`);
+      await expect(d.getTrigger()).toHaveText(`Abby`);
     });
 
     test(`GIVEN a select with distinct display and option values
@@ -1098,7 +921,7 @@ test.describe('Props', () => {
 /** TODO: add docs telling people how to add an aria-label to the root component. (accessible name) */
 test.describe('A11y', () => {
   test('Axe Validation Test', async ({ page }) => {
-    const { openListbox } = await setup(page, 'hero');
+    const { driver: d } = await setup(page, 'hero');
 
     const initialResults = await new AxeBuilder({ page })
       .include('[role="combobox"]')
@@ -1106,7 +929,7 @@ test.describe('A11y', () => {
 
     expect(initialResults.violations).toEqual([]);
 
-    await openListbox('click');
+    await d.openListbox('click');
 
     const afterClickResults = await new AxeBuilder({ page })
       .include('[role="combobox"]')
@@ -1119,11 +942,11 @@ test.describe('A11y', () => {
         WHEN the user adds a new group
         THEN the group should have an aria-labelledby attribute
         AND its associated label`, async ({ page }) => {
-    const { getRoot, openListbox } = await setup(page, 'group');
-    await openListbox('ArrowDown');
-    const labelId = await getRoot().getByRole('listitem').first().getAttribute('id');
+    const { driver: d } = await setup(page, 'group');
+    await d.openListbox('ArrowDown');
+    const labelId = await d.getRoot().getByRole('listitem').first().getAttribute('id');
 
-    await expect(getRoot().getByRole('group').first()).toHaveAttribute(
+    await expect(d.getRoot().getByRole('group').first()).toHaveAttribute(
       'aria-labelledby',
       labelId!,
     );
@@ -1134,31 +957,27 @@ test.describe('A11y', () => {
         THEN aria-activedescendent should be the id of the second option`, async ({
     page,
   }) => {
-    const {
-      getTrigger,
-      getRoot,
-      openListbox,
-      getItemAt: getOptionAt,
-    } = await setup(page, 'hero');
-    await openListbox('ArrowDown');
-    await getTrigger().focus();
-    await getTrigger().press('ArrowDown');
-
-    const secondOptionId = await getOptionAt(1).getAttribute('id');
-
-    await expect(getRoot()).toHaveAttribute('aria-activedescendant', `${secondOptionId}`);
+    const { driver: d } = await setup(page, 'hero');
+    await d.openListbox('ArrowDown');
+    await d.getHighlightedItem().press('ArrowDown');
+
+    const secondOptionId = await d.getItemAt(1).getAttribute('id');
+
+    await expect(d.getRoot()).toHaveAttribute(
+      'aria-activedescendant',
+      `${secondOptionId}`,
+    );
   });
 
   test(`GIVEN an open hero select with aria-activedescendent
         WHEN the listbox is closed
         THEN aria-activedescendent should be an empty string`, async ({ page }) => {
-    const { getTrigger, getRoot, openListbox, getListbox } = await setup(page, 'hero');
-    await openListbox('ArrowDown');
-    await getTrigger().focus();
-    await getTrigger().press('Enter');
-    await expect(getListbox()).toBeHidden();
+    const { driver: d } = await setup(page, 'hero');
+    await d.openListbox('ArrowDown');
+    await d.getHighlightedItem().press('Enter');
+    await expect(d.getListbox()).toBeHidden();
 
-    await expect(getRoot()).toHaveAttribute('aria-activedescendant', '');
+    await expect(d.getRoot()).toHaveAttribute('aria-activedescendant', '');
   });
 
   test(`GIVEN a hero select with aria-controls
@@ -1166,11 +985,11 @@ test.describe('A11y', () => {
         THEN the root's aria-controls should be equal to the ID of the listbox`, async ({
     page,
   }) => {
-    const { getRoot, getListbox, openListbox } = await setup(page, 'hero');
-    await openListbox('Enter');
-    const listboxId = await getListbox().getAttribute('id');
+    const { driver: d } = await setup(page, 'hero');
+    await d.openListbox('Enter');
+    const listboxId = await d.getListbox().getAttribute('id');
 
-    await expect(getRoot()).toHaveAttribute('aria-controls', `${listboxId}`);
+    await expect(d.getRoot()).toHaveAttribute('aria-controls', `${listboxId}`);
   });
 });
 
@@ -1236,9 +1055,9 @@ test.describe('Multiple Selection', () => {
       }) => {
         const { driver: d } = await setup(page, 'multiple');
         await d.openListbox('Enter');
-        await d.getTrigger().press(key);
+        await d.getHighlightedItem().press(key);
         await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'true');
-        await d.getTrigger().press(key);
+        await d.getHighlightedItem().press(key);
         await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'false');
       });
     }
@@ -1251,7 +1070,7 @@ test.describe('Multiple Selection', () => {
       await d.openListbox('click');
       await d.getItemAt(0).click();
       await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'true');
-      await d.getTrigger().press('Escape');
+      await d.getHighlightedItem().press('Escape');
       await expect(d.getListbox()).toBeHidden();
     });
 
@@ -1261,8 +1080,8 @@ test.describe('Multiple Selection', () => {
       page,
     }) => {
       const { driver: d } = await setup(page, 'multiple');
-      await d.openListbox('click');
-      await d.getTrigger().press('Shift+ArrowDown');
+      await d.openListbox('Enter');
+      await d.getHighlightedItem().press('Shift+ArrowDown');
       await expect(d.getItemAt(1)).toHaveAttribute('data-highlighted');
       await expect(d.getItemAt(1)).toHaveAttribute('aria-selected', 'true');
     });
@@ -1275,25 +1094,12 @@ test.describe('Multiple Selection', () => {
       const { driver: d } = await setup(page, 'multiple');
       // initial setup
       await d.openListbox('Enter');
-      await d.getTrigger().press('ArrowDown');
+      await d.getHighlightedItem().press('ArrowDown');
       await expect(d.getItemAt(1)).toHaveAttribute('data-highlighted');
 
-      await d.getTrigger().press('Shift+ArrowUp');
+      await d.getHighlightedItem().press('Shift+ArrowUp');
       await expect(d.getItemAt(0)).toHaveAttribute('data-highlighted');
       await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'true');
     });
-
-    // test(`GIVEN a multi select
-    //       WHEN hitting the ctrl + a key
-    //       THEN select all options`, async ({ page }) => {
-    //   const { driver: d } = await setup(page, 'multiple');
-    //   // initial setup
-    //   await d.openListbox('Enter');
-    //   await d.getTrigger().press('Control+A');
-
-    //   for (let i = 0; i < (await d.getOptionsLength()); i++) {
-    //     await expect(d.getOptionAt(i)).toHaveAttribute('aria-selected', 'true');
-    //   }
-    // });
   });
 });
diff --git a/packages/kit-styled/package.json b/packages/kit-styled/package.json
index adcb02f8d..9340521b3 100644
--- a/packages/kit-styled/package.json
+++ b/packages/kit-styled/package.json
@@ -23,7 +23,7 @@
     "@builder.io/qwik": "^1.1.0"
   },
   "devDependencies": {
-    "@qwik-ui/headless": "0.4.2",
+    "@qwik-ui/headless": "0.4.4",
     "@qwik-ui/utils": "0.2.1"
   }
 }
diff --git a/packages/kit-styled/src/components/input/input.tsx b/packages/kit-styled/src/components/input/input.tsx
index 95580a72f..61f2bdd1f 100644
--- a/packages/kit-styled/src/components/input/input.tsx
+++ b/packages/kit-styled/src/components/input/input.tsx
@@ -23,6 +23,7 @@ export const Input = component$<InputProps>(
             props.class,
           )}
           id={inputId}
+          name={name}
         />
         {error && (
           <div id={`${inputId}-error`} class="text-destructive mt-1 text-sm">
diff --git a/packages/kit-styled/src/components/select/select.tsx b/packages/kit-styled/src/components/select/select.tsx
index 206677205..2c73686a9 100644
--- a/packages/kit-styled/src/components/select/select.tsx
+++ b/packages/kit-styled/src/components/select/select.tsx
@@ -9,6 +9,7 @@ const Root = (props: PropsOf<typeof HeadlessSelect.Root>) => (
     selectItemComponent={Item}
     selectItemLabelComponent={ItemLabel}
     selectLabelComponent={Label}
+    selectErrorMessageComponent={ErrorMessage}
   />
 );
 
@@ -82,6 +83,8 @@ const Group = HeadlessSelect.Group;
 
 const GroupLabel = HeadlessSelect.GroupLabel;
 
+const ErrorMessage = HeadlessSelect.ErrorMessage;
+
 const Item = component$<PropsOf<typeof HeadlessSelect.Item>>(({ ...props }) => {
   return (
     <HeadlessSelect.Item
@@ -129,4 +132,5 @@ export const Select = {
   Item,
   ItemIndicator,
   ItemLabel,
+  ErrorMessage,
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9cfc13520..b5d7fbc9c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -386,7 +386,7 @@ importers:
         version: 1.5.5(@types/node@20.12.12)(sass@1.77.4)(undici@5.28.4)
     devDependencies:
       '@qwik-ui/headless':
-        specifier: 0.4.2
+        specifier: 0.4.4
         version: link:../kit-headless
       '@qwik-ui/utils':
         specifier: 0.2.1