diff --git a/src/components/sbb-autocomplete/index.ts b/src/components/sbb-autocomplete/index.ts
new file mode 100644
index 0000000000..4cb64fc98a
--- /dev/null
+++ b/src/components/sbb-autocomplete/index.ts
@@ -0,0 +1 @@
+export * from './sbb-autocomplete';
diff --git a/src/components/sbb-autocomplete/sbb-autocomplete.e2e.ts b/src/components/sbb-autocomplete/sbb-autocomplete.e2e.ts
index 9ca3ec1eb3..43d91b828a 100644
--- a/src/components/sbb-autocomplete/sbb-autocomplete.e2e.ts
+++ b/src/components/sbb-autocomplete/sbb-autocomplete.e2e.ts
@@ -1,17 +1,22 @@
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
-import events from './sbb-autocomplete.events';
-import optionEvents from '../sbb-option/sbb-option.events';
-import { waitForCondition } from '../../global/testing';
+import { events } from './sbb-autocomplete';
+import { events as optionEvents } from '../sbb-option';
+import { waitForCondition, waitForLitRender } from '../../global/testing';
+import { assert, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { sendKeys, sendMouse } from '@web/test-runner-commands';
+import { EventSpy } from '../../global/testing/event-spy';
+import { SbbAutocomplete } from './sbb-autocomplete';
+import { SbbFormField } from '../sbb-form-field';
+import '../sbb-option';
 
 describe('sbb-autocomplete', () => {
-  let element: E2EElement, formField: E2EElement, input: E2EElement, page: E2EPage;
+  let element: SbbAutocomplete, formField: SbbFormField, input: HTMLInputElement;
 
   beforeEach(async () => {
-    page = await newE2EPage();
-    await page.setContent(`
+    formField = await fixture(html`
       <sbb-form-field>
         <input />
-        <sbb-autocomplete id="myAutocomplete">
+        <sbb-autocomplete id="myAutocomplete" style="--sbb-options-panel-animation-duration: 0.01s">
           <sbb-option id="option-1" value="1">1</sbb-option>
           <sbb-option id="option-2" value="2">2</sbb-option>
           <sbb-option id="option-3" value="3">3</sbb-option>
@@ -19,172 +24,157 @@ describe('sbb-autocomplete', () => {
       </sbb-form-field>
       <button>Use this for backdrop click</button>
     `);
-
-    formField = await page.find('sbb-form-field');
-    input = await page.find('input');
-    element = await page.find('sbb-autocomplete');
+    input = formField.querySelector('input');
+    element = formField.querySelector('sbb-autocomplete');
   });
 
   it('renders and sets the correct attributes', () => {
-    expect(formField).toHaveClass('hydrated');
-    expect(element).toHaveClass('hydrated');
-
-    expect(element).not.toHaveAttribute('autocomplete-origin-borderless');
-
-    expect(input).toEqualAttribute('autocomplete', 'off');
-    expect(input).toEqualAttribute('role', 'combobox');
-    expect(input).toEqualAttribute('aria-autocomplete', 'list');
-    expect(input).toEqualAttribute('aria-haspopup', 'listbox');
-    expect(input).toEqualAttribute('aria-controls', 'myAutocomplete');
-    expect(input).toEqualAttribute('aria-owns', 'myAutocomplete');
-    expect(input).toEqualAttribute('aria-expanded', 'false');
+    assert.instanceOf(formField, SbbFormField);
+    assert.instanceOf(element, SbbAutocomplete);
+
+    expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+
+    expect(input).to.have.attribute('autocomplete', 'off');
+    expect(input).to.have.attribute('role', 'combobox');
+    expect(input).to.have.attribute('aria-autocomplete', 'list');
+    expect(input).to.have.attribute('aria-haspopup', 'listbox');
+    expect(input).to.have.attribute('aria-controls', 'myAutocomplete');
+    expect(input).to.have.attribute('aria-owns', 'myAutocomplete');
+    expect(input).to.have.attribute('aria-expanded', 'false');
   });
 
   it('opens and closes with mouse and keyboard', async () => {
-    const willOpenEventSpy = await page.spyOnEvent(events.willOpen);
-    const didOpenEventSpy = await page.spyOnEvent(events.didOpen);
-    const willCloseEventSpy = await page.spyOnEvent(events.willClose);
-    const didCloseEventSpy = await page.spyOnEvent(events.didClose);
+    const willOpenEventSpy = new EventSpy(events.willOpen);
+    const didOpenEventSpy = new EventSpy(events.didOpen);
+    const willCloseEventSpy = new EventSpy(events.willClose);
+    const didCloseEventSpy = new EventSpy(events.didClose);
 
-    await input.focus();
-    await page.waitForChanges();
+    input.click();
     await waitForCondition(() => willOpenEventSpy.events.length === 1);
-    expect(willOpenEventSpy).toHaveReceivedEventTimes(1);
-    await page.waitForChanges();
+    expect(willOpenEventSpy.count).to.be.equal(1);
+
     await waitForCondition(() => didOpenEventSpy.events.length === 1);
-    expect(didOpenEventSpy).toHaveReceivedEventTimes(1);
-    expect(input.getAttribute('aria-expanded')).toEqual('true');
+    expect(didOpenEventSpy.count).to.be.equal(1);
+    expect(input).to.have.attribute('aria-expanded', 'true');
 
-    await element.press('Escape');
-    await page.waitForChanges();
+    await sendKeys({ press: 'Escape' });
     await waitForCondition(() => willCloseEventSpy.events.length === 1);
-    expect(willCloseEventSpy).toHaveReceivedEventTimes(1);
-    await page.waitForChanges();
+    expect(willCloseEventSpy.count).to.be.equal(1);
     await waitForCondition(() => didCloseEventSpy.events.length === 1);
-    expect(didCloseEventSpy).toHaveReceivedEventTimes(1);
-    expect(input.getAttribute('aria-expanded')).toEqual('false');
+    expect(didCloseEventSpy.count).to.be.equal(1);
+    expect(input).to.have.attribute('aria-expanded', 'false');
 
-    await element.press('ArrowDown');
-    await page.waitForChanges();
+    await sendKeys({ press: 'ArrowDown' });
     await waitForCondition(() => willOpenEventSpy.events.length === 2);
-    expect(willOpenEventSpy).toHaveReceivedEventTimes(2);
-    await page.waitForChanges();
+    expect(willOpenEventSpy.count).to.be.equal(2);
     await waitForCondition(() => didOpenEventSpy.events.length === 2);
-    expect(didOpenEventSpy).toHaveReceivedEventTimes(2);
-    expect(input.getAttribute('aria-expanded')).toEqual('true');
+    expect(didOpenEventSpy.count).to.be.equal(2);
+    expect(input).to.have.attribute('aria-expanded', 'true');
 
-    await element.press('Tab');
-    await page.waitForChanges();
+    await sendKeys({ press: 'Tab' });
     await waitForCondition(() => willCloseEventSpy.events.length === 2);
-    expect(willCloseEventSpy).toHaveReceivedEventTimes(2);
-    await page.waitForChanges();
+    expect(willCloseEventSpy.count).to.be.equal(2);
     await waitForCondition(() => didCloseEventSpy.events.length === 2);
-    expect(didCloseEventSpy).toHaveReceivedEventTimes(2);
-    expect(input.getAttribute('aria-expanded')).toEqual('false');
+    expect(didCloseEventSpy.count).to.be.equal(2);
+    expect(input).to.have.attribute('aria-expanded', 'false');
 
-    await input.click();
-    await page.waitForChanges();
+    input.click();
     await waitForCondition(() => willOpenEventSpy.events.length === 3);
-    expect(willOpenEventSpy).toHaveReceivedEventTimes(3);
-    await page.waitForChanges();
+    expect(willOpenEventSpy.count).to.be.equal(3);
     await waitForCondition(() => didOpenEventSpy.events.length === 3);
-    expect(didOpenEventSpy).toHaveReceivedEventTimes(3);
-    expect(input.getAttribute('aria-expanded')).toEqual('true');
+    expect(didOpenEventSpy.count).to.be.equal(3);
+    expect(input).to.have.attribute('aria-expanded', 'true');
+
+    // Simulate backdrop click
+    sendMouse({ type: 'click', position: [formField.offsetWidth + 25, 25] });
 
-    const button = await page.find('button');
-    await button.click();
     await waitForCondition(() => willCloseEventSpy.events.length === 3);
-    expect(willCloseEventSpy).toHaveReceivedEventTimes(3);
-    await page.waitForChanges();
+    expect(willCloseEventSpy.count).to.be.equal(3);
     await waitForCondition(() => didCloseEventSpy.events.length === 3);
-    expect(didCloseEventSpy).toHaveReceivedEventTimes(3);
-    expect(input.getAttribute('aria-expanded')).toEqual('false');
+    expect(didCloseEventSpy.count).to.be.equal(3);
+    expect(input).to.have.attribute('aria-expanded', 'false');
   });
 
   it('select by mouse', async () => {
-    const willOpenEventSpy = await page.spyOnEvent(events.willOpen);
-    const didOpenEventSpy = await page.spyOnEvent(events.didOpen);
-    const optionSelectedEventSpy = await page.spyOnEvent(optionEvents.optionSelected);
+    const willOpenEventSpy = new EventSpy(events.willOpen);
+    const didOpenEventSpy = new EventSpy(events.didOpen);
+    const optionSelectedEventSpy = new EventSpy(optionEvents.optionSelected);
 
-    await input.focus();
-    await page.waitForChanges();
+    input.focus();
     await waitForCondition(() => willOpenEventSpy.events.length === 1);
-    expect(willOpenEventSpy).toHaveReceivedEventTimes(1);
-    await page.waitForChanges();
+    expect(willOpenEventSpy.count).to.be.equal(1);
     await waitForCondition(() => didOpenEventSpy.events.length === 1);
-    expect(didOpenEventSpy).toHaveReceivedEventTimes(1);
+    expect(didOpenEventSpy.count).to.be.equal(1);
 
-    await element.press('ArrowDown');
-    await element.press('ArrowDown');
-    await page.waitForChanges();
-    await element.press('Enter');
-    await page.waitForChanges();
+    await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ press: 'Enter' });
+    await waitForLitRender(element);
 
-    expect(optionSelectedEventSpy).toHaveReceivedEventTimes(1);
-    expect(optionSelectedEventSpy.firstEvent.target.id).toBe('option-2');
+    expect(optionSelectedEventSpy.count).to.be.equal(1);
+    expect(optionSelectedEventSpy.firstEvent.target).to.have.property('id', 'option-2');
   });
 
   it('opens and select with keyboard', async () => {
-    const didOpenEventSpy = await page.spyOnEvent(events.didOpen);
-    const didCloseEventSpy = await page.spyOnEvent(events.didClose);
-    const optionSelectedEventSpy = await page.spyOnEvent(optionEvents.optionSelected);
-    await input.focus();
-    await page.waitForChanges();
+    const didOpenEventSpy = new EventSpy(events.didOpen);
+    const didCloseEventSpy = new EventSpy(events.didClose);
+    const optionSelectedEventSpy = new EventSpy(optionEvents.optionSelected);
+    const optOne = element.querySelector('#option-1');
+    const optTwo = element.querySelector('#option-2');
+    input.focus();
+
     await waitForCondition(() => didOpenEventSpy.events.length === 1);
-    expect(didOpenEventSpy).toHaveReceivedEventTimes(1);
-
-    await element.press('ArrowDown');
-    await page.waitForChanges();
-    await element.press('ArrowDown');
-    await page.waitForChanges();
-    const optOne = await page.find('sbb-autocomplete > sbb-option#option-1');
-    expect(await optOne.getProperty('active')).toEqual(false);
-    expect(await optOne.getProperty('selected')).toEqual(false);
-    const optTwo = await page.find('sbb-autocomplete > sbb-option#option-2');
-    expect(await optTwo.getProperty('active')).toEqual(true);
-    expect(await optTwo.getProperty('selected')).toEqual(false);
-    expect(input.getAttribute('aria-activedescendant')).toEqual('option-2');
-
-    await element.press('Enter');
-    await page.waitForChanges();
+    expect(didOpenEventSpy.count).to.be.equal(1);
+
+    await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ press: 'ArrowDown' });
+    await waitForLitRender(element);
+    expect(optOne).not.to.have.attribute('active');
+    expect(optOne).not.to.have.attribute('selected');
+    expect(optTwo).to.have.attribute('active');
+    expect(optTwo).not.to.have.attribute('selected');
+    expect(input).to.have.attribute('aria-activedescendant', 'option-2');
+
+    await sendKeys({ press: 'Enter' });
     await waitForCondition(() => didCloseEventSpy.events.length === 1);
-    expect(await optTwo.getProperty('active')).toEqual(false);
-    expect(await optTwo.getProperty('selected')).toEqual(true);
-    expect(didCloseEventSpy).toHaveReceivedEventTimes(1);
-    expect(optionSelectedEventSpy).toHaveReceivedEventTimes(1);
-    expect(input.getAttribute('aria-expanded')).toEqual('false');
-    expect(input).not.toHaveAttribute('aria-activedescendant');
+    expect(didCloseEventSpy.count).to.be.equal(1);
+
+    expect(optTwo).not.to.have.attribute('active');
+    expect(optTwo).to.have.attribute('selected');
+    expect(optionSelectedEventSpy.count).to.be.equal(1);
+    expect(input).to.have.attribute('aria-expanded', 'false');
+    expect(input).not.to.have.attribute('aria-activedescendant');
   });
 
   it('should stay closed when disabled', async () => {
-    await page.$eval('input', (e) => e.setAttribute('disabled', 'true'));
+    input.setAttribute('disabled', '');
 
-    await input.focus();
-    await page.waitForChanges();
-    expect(input.getAttribute('aria-expanded')).toEqual('false');
+    input.focus();
+    await waitForLitRender(element);
+    expect(input).to.have.attribute('aria-expanded', 'false');
 
-    await input.click();
-    await page.waitForChanges();
-    expect(input.getAttribute('aria-expanded')).toEqual('false');
+    input.click();
+    await waitForLitRender(element);
+    expect(input).to.have.attribute('aria-expanded', 'false');
 
-    await element.press('ArrowDown');
-    await page.waitForChanges();
-    expect(input.getAttribute('aria-expanded')).toEqual('false');
+    await sendKeys({ press: 'ArrowDown' });
+    await waitForLitRender(element);
+    expect(input).to.have.attribute('aria-expanded', 'false');
   });
 
   it('should stay closed when readonly', async () => {
-    await page.$eval('input', (e) => e.setAttribute('readonly', 'true'));
+    input.setAttribute('readonly', '');
 
-    await input.focus();
-    await page.waitForChanges();
-    expect(input.getAttribute('aria-expanded')).toEqual('false');
+    input.focus();
+    await waitForLitRender(element);
+    expect(input).to.have.attribute('aria-expanded', 'false');
 
-    await input.click();
-    await page.waitForChanges();
-    expect(input.getAttribute('aria-expanded')).toEqual('false');
+    input.click();
+    await waitForLitRender(element);
+    expect(input).to.have.attribute('aria-expanded', 'false');
 
-    await element.press('ArrowDown');
-    await page.waitForChanges();
-    expect(input.getAttribute('aria-expanded')).toEqual('false');
+    await sendKeys({ press: 'ArrowDown' });
+    await waitForLitRender(element);
+    expect(input).to.have.attribute('aria-expanded', 'false');
   });
 });
diff --git a/src/components/sbb-autocomplete/sbb-autocomplete.events.ts b/src/components/sbb-autocomplete/sbb-autocomplete.events.ts
deleted file mode 100644
index cf7d67d8ae..0000000000
--- a/src/components/sbb-autocomplete/sbb-autocomplete.events.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * This file is autogenerated by the event-sync plugin.
- * See stencil.config.ts in the root directory.
- */
-export default {
-  didClose: 'did-close',
-  didOpen: 'did-open',
-  willClose: 'will-close',
-  willOpen: 'will-open',
-};
diff --git a/src/components/sbb-autocomplete/sbb-autocomplete.spec.ts b/src/components/sbb-autocomplete/sbb-autocomplete.spec.ts
index 5aa731ec78..206ee57cfa 100644
--- a/src/components/sbb-autocomplete/sbb-autocomplete.spec.ts
+++ b/src/components/sbb-autocomplete/sbb-autocomplete.spec.ts
@@ -1,109 +1,111 @@
-import { SbbAutocomplete } from './sbb-autocomplete';
-import { newSpecPage } from '@stencil/core/testing';
-import { SbbFormField } from '../sbb-form-field/sbb-form-field';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import '../sbb-form-field';
+import '../sbb-option';
+import './sbb-autocomplete';
+import { isSafari } from '../../global/dom';
 
 describe('sbb-autocomplete', () => {
   it('renders standalone', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbAutocomplete],
-      html: `
-        <div id="autocomplete-origin"></div>
-        <input id="autocomplete-trigger" />
-        <sbb-autocomplete origin="autocomplete-origin" trigger="autocomplete-trigger">
-          <sbb-option value="1">1</sbb-option>
-          <sbb-option value="2">2</sbb-option>
-        </sbb-autocomplete>
-      `,
-    });
-
-    expect(root).toEqualHtml(`
-      <sbb-autocomplete data-state="closed" origin="autocomplete-origin" trigger="autocomplete-trigger" dir="ltr">
-        <mock:shadow-root>
-          <div class="sbb-autocomplete__gap-fix"></div>
-          <div class="sbb-autocomplete__container">
-            <div class="sbb-autocomplete__gap-fix">
-              <div class="sbb-gap-fix-wrapper">
-                <div class="sbb-gap-fix-corner" id="left"></div>
-              </div>
-              <div class="sbb-gap-fix-wrapper">
-                <div class="sbb-gap-fix-corner" id="right"></div>
-              </div>
-            </div>
-            <div class="sbb-autocomplete__panel">
-              <div class="sbb-autocomplete__wrapper">
-                <div class="sbb-autocomplete__options" role="listbox" id="sbb-autocomplete-1">
-                  <slot></slot>
-                </div>
-              </div>
-            </div>
-          </div>
-        </mock:shadow-root>
+    await fixture(html`
+      <div id="origin"></div>
+      <input id="trigger" />
+      <sbb-autocomplete origin="origin" trigger="trigger">
         <sbb-option value="1">1</sbb-option>
         <sbb-option value="2">2</sbb-option>
       </sbb-autocomplete>
     `);
-  });
+    const elem = document.querySelector('sbb-autocomplete');
+    const listboxAttr = 'id="sbb-autocomplete-1" role="listbox"';
 
-  it('renders in form field', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbAutocomplete, SbbFormField],
-      html: `
-        <sbb-form-field>
-          <input />
-          <sbb-autocomplete>
-            <sbb-option value="1">1</sbb-option>
-            <sbb-option value="2">2</sbb-option>
-          </sbb-autocomplete>
-        </sbb-form-field>
-      `,
-    });
-
-    expect(root).toEqualHtml(`
-      <sbb-form-field error-space="none" size="m" width="default">
-        <mock:shadow-root>
-          <div class="sbb-form-field__space-wrapper">
-            <div class="sbb-form-field__wrapper" id="overlay-anchor">
-              <slot name="prefix"></slot>
-              <div class="sbb-form-field__input-container">
-                <div class="sbb-form-field__input">
-                  <slot></slot>
-                </div>
-              </div>
-              <slot name="suffix"></slot>
-            </div>
-            <div class="sbb-form-field__error">
-              <slot name="error"></slot>
-            </div>
+    expect(elem).dom.to.be.equal(`
+      <sbb-autocomplete data-state="closed" origin="origin" trigger="trigger" 
+        dir="ltr" ${isSafari() ? listboxAttr : ''}>
+        <sbb-option value="1" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-1" role="option">1</sbb-option>
+        <sbb-option value="2" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-2" role="option">2</sbb-option>
+      </sbb-autocomplete>
+    `);
+    expect(elem).shadowDom.to.be.equal(`
+      <div class="sbb-autocomplete__gap-fix"></div>
+      <div class="sbb-autocomplete__container">
+        <div class="sbb-autocomplete__gap-fix">
+          <div class="sbb-gap-fix-wrapper">
+            <div class="sbb-gap-fix-corner" id="left"></div>
           </div>
-        </mock:shadow-root>
-        <input
-          aria-autocomplete="list" aria-controls="sbb-autocomplete-2" aria-expanded="false" aria-haspopup="listbox"
-          aria-owns="sbb-autocomplete-2" autocomplete="off" role="combobox">
-        <sbb-autocomplete data-state="closed" dir="ltr">
-          <mock:shadow-root>
-            <div class="sbb-autocomplete__gap-fix"></div>
-            <div class="sbb-autocomplete__container">
-              <div class="sbb-autocomplete__gap-fix">
-                <div class="sbb-gap-fix-wrapper">
-                  <div class="sbb-gap-fix-corner" id="left"></div>
-                </div>
-                <div class="sbb-gap-fix-wrapper">
-                  <div class="sbb-gap-fix-corner" id="right"></div>
-                </div>
-              </div>
-              <div class="sbb-autocomplete__panel">
-                <div class="sbb-autocomplete__wrapper">
-                  <div class="sbb-autocomplete__options" id="sbb-autocomplete-2" role="listbox">
-                    <slot></slot>
-                  </div>
-                </div>
-              </div>
+          <div class="sbb-gap-fix-wrapper">
+            <div class="sbb-gap-fix-corner" id="right"></div>
+          </div>
+        </div>
+        <div class="sbb-autocomplete__panel">
+          <div class="sbb-autocomplete__wrapper">
+            <div class="sbb-autocomplete__options" ${!isSafari() ? listboxAttr : ''}>
+              <slot></slot>
             </div>
-          </mock:shadow-root>
+          </div>
+        </div>
+      </div>
+    `);
+  });
+
+  it('renders in form field', async () => {
+    const root = await fixture(html`
+      <sbb-form-field>
+        <input />
+        <sbb-autocomplete>
           <sbb-option value="1">1</sbb-option>
           <sbb-option value="2">2</sbb-option>
         </sbb-autocomplete>
       </sbb-form-field>
     `);
+    const elem = root.querySelector('sbb-autocomplete');
+    const listboxAttr = 'id="sbb-autocomplete-4" role="listbox"';
+
+    expect(root).dom.to.be.equal(`
+      <sbb-form-field error-space="none" size="m" width="default" data-input-empty data-input-type="input">
+        <input
+          aria-autocomplete="list" aria-controls="sbb-autocomplete-4" aria-expanded="false" aria-haspopup="listbox"
+          aria-owns="sbb-autocomplete-4" autocomplete="off" role="combobox">
+        <sbb-autocomplete data-state="closed" dir="ltr" ${isSafari() ? listboxAttr : ''}>
+          <sbb-option value="1" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-7" role="option">1</sbb-option>
+          <sbb-option value="2" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-8" role="option">2</sbb-option>
+        </sbb-autocomplete>
+      </sbb-form-field>
+    `);
+    expect(root).shadowDom.to.equal(`
+      <div class="sbb-form-field__space-wrapper">
+        <div class="sbb-form-field__wrapper" id="overlay-anchor">
+          <slot name="prefix"></slot>
+          <div class="sbb-form-field__input-container">
+            <div class="sbb-form-field__input">
+              <slot></slot>
+            </div>
+          </div>
+          <slot name="suffix"></slot>
+        </div>
+        <div class="sbb-form-field__error">
+          <slot name="error"></slot>
+        </div>
+      </div>
+    `);
+    expect(elem).shadowDom.to.equal(`
+      <div class="sbb-autocomplete__gap-fix"></div>
+      <div class="sbb-autocomplete__container">
+        <div class="sbb-autocomplete__gap-fix">
+          <div class="sbb-gap-fix-wrapper">
+            <div class="sbb-gap-fix-corner" id="left"></div>
+          </div>
+          <div class="sbb-gap-fix-wrapper">
+            <div class="sbb-gap-fix-corner" id="right"></div>
+          </div>
+        </div>
+        <div class="sbb-autocomplete__panel">
+          <div class="sbb-autocomplete__wrapper">
+            <div class="sbb-autocomplete__options" ${!isSafari() ? listboxAttr : ''}>
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
   });
 });
diff --git a/src/components/sbb-autocomplete/sbb-autocomplete.stories.tsx b/src/components/sbb-autocomplete/sbb-autocomplete.stories.tsx
index 01a073360a..9a8ff572e3 100644
--- a/src/components/sbb-autocomplete/sbb-autocomplete.stories.tsx
+++ b/src/components/sbb-autocomplete/sbb-autocomplete.stories.tsx
@@ -1,15 +1,24 @@
 /** @jsx h */
 import { h, JSX } from 'jsx-dom';
-import events from './sbb-autocomplete.events';
-import optionEvents from '../sbb-option/sbb-option.events';
+import { events } from './sbb-autocomplete';
+import { events as optionEvents } from '../sbb-option';
 import readme from './readme.md?raw';
 import { userEvent, within } from '@storybook/testing-library';
 import { waitForComponentsReady } from '../../global/testing/wait-for-components-ready';
 import isChromatic from 'chromatic';
 import { waitForStablePosition } from '../../global/testing/wait-for-stable-position';
-import type { Meta, StoryObj, ArgTypes, Args, Decorator, StoryContext } from '@storybook/html';
+import type {
+  Meta,
+  StoryObj,
+  ArgTypes,
+  Args,
+  Decorator,
+  StoryContext,
+} from '@storybook/web-components';
 import type { InputType } from '@storybook/types';
 import { withActions } from '@storybook/addon-actions/decorator';
+import '../sbb-form-field';
+import './sbb-autocomplete';
 
 const wrapperStyle = (context: StoryContext): Record<string, string> => ({
   'background-color': context.args.negative
diff --git a/src/components/sbb-autocomplete/sbb-autocomplete.tsx b/src/components/sbb-autocomplete/sbb-autocomplete.tsx
index 6fe9788230..8b40a8178d 100644
--- a/src/components/sbb-autocomplete/sbb-autocomplete.tsx
+++ b/src/components/sbb-autocomplete/sbb-autocomplete.tsx
@@ -1,18 +1,3 @@
-import {
-  Component,
-  ComponentInterface,
-  Element,
-  Event,
-  EventEmitter,
-  h,
-  Host,
-  JSX,
-  Listen,
-  Method,
-  Prop,
-  State,
-  Watch,
-} from '@stencil/core';
 import {
   isEventOnElement,
   overlayGapFixCorners,
@@ -29,76 +14,68 @@ import {
   toggleDatasetEntry,
 } from '../../global/dom';
 import { assignId, getNextElementIndex } from '../../global/a11y';
+import { CSSResult, html, LitElement, nothing, TemplateResult, PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { setAttribute } from '../../global/dom';
+import { ref } from 'lit/directives/ref.js';
+import { ConnectedAbortController, EventEmitter } from '../../global/eventing';
+import { SbbOption } from '../sbb-option';
+import Style from './sbb-autocomplete.scss?lit&inline';
 
 let nextId = 0;
 
+export const events = {
+  willOpen: 'will-open',
+  didOpen: 'did-open',
+  willClose: 'will-close',
+  didClose: 'did-close',
+};
+
 /**
  * @slot unnamed - Use this slot to project options.
  */
-@Component({
-  shadow: true,
-  styleUrl: 'sbb-autocomplete.scss',
-  tag: 'sbb-autocomplete',
-})
-export class SbbAutocomplete implements ComponentInterface {
+@customElement('sbb-autocomplete')
+export class SbbAutocomplete extends LitElement {
+  public static override styles: CSSResult = Style;
+
   /**
    * The element where the autocomplete will attach; accepts both an element's id or an HTMLElement.
    * If not set, will search for the first 'sbb-form-field' ancestor.
    */
-  @Prop() public origin: string | HTMLElement;
+  @property() public origin: string | HTMLElement;
 
   /**
    * The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement.
    * By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element.
    * If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor.
    */
-  @Prop() public trigger: string | HTMLInputElement;
+  @property() public trigger: string | HTMLInputElement;
 
   /** Whether the animation is disabled. */
-  @Prop({ reflect: true }) public disableAnimation = false;
+  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
+  public disableAnimation = false;
 
   /** Whether the icon space is preserved when no icon is set. */
-  @Prop({ reflect: true }) public preserveIconSpace: boolean;
+  @property({ attribute: 'preserve-icon-space', reflect: true, type: Boolean })
+  public preserveIconSpace: boolean;
 
   /** Negative coloring variant flag. */
-  @Prop({ reflect: true, mutable: true }) public negative = false;
+  @property({ reflect: true, type: Boolean }) public negative = false;
 
   /** The state of the autocomplete. */
-  @State() private _state: SbbOverlayState = 'closed';
+  @state() private _state: SbbOverlayState = 'closed';
 
   /** Emits whenever the autocomplete starts the opening transition. */
-  @Event({
-    bubbles: true,
-    composed: true,
-    eventName: 'will-open',
-  })
-  public willOpen: EventEmitter<void>;
+  private _willOpen: EventEmitter = new EventEmitter(this, events.willOpen);
 
   /** Emits whenever the autocomplete is opened. */
-  @Event({
-    bubbles: true,
-    composed: true,
-    eventName: 'did-open',
-  })
-  public didOpen: EventEmitter<void>;
+  private _didOpen: EventEmitter = new EventEmitter(this, events.didOpen);
 
   /** Emits whenever the autocomplete begins the closing transition. */
-  @Event({
-    bubbles: true,
-    composed: true,
-    eventName: 'will-close',
-  })
-  public willClose: EventEmitter<void>;
+  private _willClose: EventEmitter = new EventEmitter(this, events.willClose);
 
   /** Emits whenever the autocomplete is closed. */
-  @Event({
-    bubbles: true,
-    composed: true,
-    eventName: 'did-close',
-  })
-  public didClose: EventEmitter<void>;
-
-  @Element() private _element!: HTMLElement;
+  private _didClose: EventEmitter = new EventEmitter(this, events.didClose);
 
   private _overlay: HTMLElement;
   private _optionContainer: HTMLElement;
@@ -110,6 +87,7 @@ export class SbbAutocomplete implements ComponentInterface {
   private _activeItemIndex = -1;
   private _didLoad = false;
   private _isPointerDownEventOnMenu: boolean;
+  private _abort = new ConnectedAbortController(this);
 
   /**
    * On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
@@ -122,13 +100,12 @@ export class SbbAutocomplete implements ComponentInterface {
     return this._triggerElement && isValidAttribute(this._triggerElement, 'readonly');
   }
 
-  private get _options(): HTMLSbbOptionElement[] {
-    return Array.from(this._element.querySelectorAll('sbb-option')) as HTMLSbbOptionElement[];
+  private get _options(): SbbOption[] {
+    return Array.from(this.querySelectorAll('sbb-option'));
   }
 
   /** Opens the autocomplete. */
-  @Method()
-  public async open(): Promise<void> {
+  public open(): void {
     if (
       this._state !== 'closed' ||
       !this._overlay ||
@@ -139,25 +116,23 @@ export class SbbAutocomplete implements ComponentInterface {
     }
 
     this._state = 'opening';
-    this.willOpen.emit();
+    this._willOpen.emit();
     this._setOverlayPosition();
   }
 
   /** Closes the autocomplete. */
-  @Method()
-  public async close(): Promise<void> {
+  public close(): void {
     if (this._state !== 'opened') {
       return;
     }
 
     this._state = 'closing';
-    this.willClose.emit();
+    this._willClose.emit();
     this._openPanelEventsController.abort();
   }
 
   /** Removes trigger click listener on trigger change. */
-  @Watch('origin')
-  public resetOriginClickListener(
+  private _resetOriginClickListener(
     newValue: string | HTMLElement,
     oldValue: string | HTMLElement,
   ): void {
@@ -167,8 +142,7 @@ export class SbbAutocomplete implements ComponentInterface {
   }
 
   /** Removes trigger click listener on trigger change. */
-  @Watch('trigger')
-  public resetTriggerClickListener(
+  private _resetTriggerClickListener(
     newValue: string | HTMLElement,
     oldValue: string | HTMLElement,
   ): void {
@@ -178,9 +152,8 @@ export class SbbAutocomplete implements ComponentInterface {
   }
 
   /** When an option is selected, update the input value and close the autocomplete. */
-  @Listen('option-selection-change')
-  public async onOptionSelected(event: CustomEvent): Promise<void> {
-    const target: HTMLSbbOptionElement = event.target as HTMLSbbOptionElement;
+  private _onOptionSelected(event: CustomEvent): void {
+    const target = event.target as SbbOption;
     if (!target.selected) {
       return;
     }
@@ -197,50 +170,67 @@ export class SbbAutocomplete implements ComponentInterface {
     this._triggerElement.dispatchEvent(new window.Event('change', { bubbles: true }));
     this._triggerElement.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
 
-    await this.close();
+    this.close();
   }
 
-  @Listen('click')
-  public async onOptionClick(event): Promise<void> {
+  private _onOptionClick(event): void {
     if (event.target?.tagName !== 'SBB-OPTION' || event.target.disabled) {
       return;
     }
-    await this.close();
-  }
-
-  public componentDidLoad(): void {
-    this._componentSetup();
-    this._didLoad = true;
+    this.close();
   }
 
-  public connectedCallback(): void {
-    const formField =
-      this._element.closest('sbb-form-field') ?? this._element.closest('[data-form-field]');
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    const signal = this._abort.signal;
+    const formField = this.closest('sbb-form-field') ?? this.closest('[data-form-field]');
 
     if (formField) {
       this.negative = isValidAttribute(formField, 'negative');
     }
-    this._syncNegative();
 
     if (this._didLoad) {
       this._componentSetup();
     }
+    this._syncNegative();
+
+    this.addEventListener(
+      'option-selection-change',
+      (e: CustomEvent) => this._onOptionSelected(e),
+      { signal },
+    );
+    this.addEventListener('click', (e) => this._onOptionClick(e), { signal });
+  }
+
+  public override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('origin')) {
+      this._resetOriginClickListener(this.origin, changedProperties.get('origin'));
+    }
+    if (changedProperties.has('trigger')) {
+      this._resetTriggerClickListener(this.trigger, changedProperties.get('trigger'));
+    }
+    if (changedProperties.has('negative')) {
+      this._syncNegative();
+    }
+  }
+
+  protected override firstUpdated(): void {
+    this._componentSetup();
+    this._didLoad = true;
   }
 
-  @Watch('negative')
   private _syncNegative(): void {
-    this._element
-      .querySelectorAll('sbb-divider')
-      .forEach((element) =>
-        this.negative ? element.setAttribute('negative', '') : element.removeAttribute('negative'),
-      );
+    this.querySelectorAll('sbb-divider').forEach((element) =>
+      setAttribute(element, 'negative', this.negative),
+    );
 
-    this._element
-      .querySelectorAll('sbb-option, sbb-optgroup')
-      .forEach((element: HTMLElement) => toggleDatasetEntry(element, 'negative', this.negative));
+    this.querySelectorAll('sbb-option, sbb-optgroup').forEach((element: HTMLElement) =>
+      toggleDatasetEntry(element, 'negative', this.negative),
+    );
   }
 
-  public disconnectedCallback(): void {
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
     this._triggerEventsController?.abort();
     this._openPanelEventsController?.abort();
   }
@@ -261,7 +251,7 @@ export class SbbAutocomplete implements ComponentInterface {
     let result: HTMLElement;
 
     if (!this.origin) {
-      result = this._element.closest('sbb-form-field')?.shadowRoot.querySelector('#overlay-anchor');
+      result = this.closest('sbb-form-field')?.shadowRoot.querySelector('#overlay-anchor');
     } else {
       result = findReferencedElement(this.origin);
     }
@@ -281,7 +271,7 @@ export class SbbAutocomplete implements ComponentInterface {
    */
   private _getTriggerElement(): HTMLInputElement {
     if (!this.trigger) {
-      return this._element.closest('sbb-form-field')?.querySelector('input') as HTMLInputElement;
+      return this.closest('sbb-form-field')?.querySelector('input') as HTMLInputElement;
     }
 
     const result = findReferencedElement<HTMLInputElement>(this.trigger);
@@ -303,9 +293,9 @@ export class SbbAutocomplete implements ComponentInterface {
     this._originElement = anchorElem;
 
     toggleDatasetEntry(
-      this._element,
+      this,
       'optionPanelOriginBorderless',
-      this._element.closest('sbb-form-field')?.hasAttribute('borderless'),
+      this.closest('sbb-form-field')?.hasAttribute('borderless'),
     );
   }
 
@@ -335,8 +325,8 @@ export class SbbAutocomplete implements ComponentInterface {
     });
     this._triggerElement.addEventListener(
       'input',
-      async (event) => {
-        await this.open();
+      (event) => {
+        this.open();
         this._highlightOptions((event.target as HTMLInputElement).value);
       },
       { signal: this._triggerEventsController.signal },
@@ -350,7 +340,7 @@ export class SbbAutocomplete implements ComponentInterface {
 
   // Set overlay position, width and max height
   private _setOverlayPosition(): void {
-    setOverlayPosition(this._overlay, this._originElement, this._optionContainer, this._element);
+    setOverlayPosition(this._overlay, this._originElement, this._optionContainer, this);
   }
 
   /** On open/close animation end.
@@ -369,7 +359,7 @@ export class SbbAutocomplete implements ComponentInterface {
     this._state = 'opened';
     this._attachOpenPanelEvents();
     this._triggerElement?.setAttribute('aria-expanded', 'true');
-    this.didOpen.emit();
+    this._didOpen.emit();
   }
 
   private _onCloseAnimationEnd(): void {
@@ -377,7 +367,7 @@ export class SbbAutocomplete implements ComponentInterface {
     this._triggerElement?.setAttribute('aria-expanded', 'false');
     this._resetActiveElement();
     this._optionContainer.scrollTop = 0;
-    this.didClose.emit();
+    this._didClose.emit();
   }
 
   private _attachOpenPanelEvents(): void {
@@ -417,17 +407,17 @@ export class SbbAutocomplete implements ComponentInterface {
   };
 
   // If the click is outside the autocomplete, closes the panel.
-  private _closeOnBackdropClick = async (event: PointerEvent): Promise<void> => {
+  private _closeOnBackdropClick = (event: PointerEvent): void => {
     if (
       !this._isPointerDownEventOnMenu &&
       !isEventOnElement(this._overlay, event) &&
       !isEventOnElement(this._originElement, event)
     ) {
-      await this.close();
+      this.close();
     }
   };
 
-  private async _closedPanelKeyboardInteraction(event: KeyboardEvent): Promise<void> {
+  private _closedPanelKeyboardInteraction(event: KeyboardEvent): void {
     if (this._state !== 'closed') {
       return;
     }
@@ -436,12 +426,12 @@ export class SbbAutocomplete implements ComponentInterface {
       case 'Enter':
       case 'ArrowDown':
       case 'ArrowUp':
-        await this.open();
+        this.open();
         break;
     }
   }
 
-  private async _openedPanelKeyboardInteraction(event: KeyboardEvent): Promise<void> {
+  private _openedPanelKeyboardInteraction(event: KeyboardEvent): void {
     if (this._state !== 'opened') {
       return;
     }
@@ -449,11 +439,11 @@ export class SbbAutocomplete implements ComponentInterface {
     switch (event.key) {
       case 'Escape':
       case 'Tab':
-        await this.close();
+        this.close();
         break;
 
       case 'Enter':
-        await this._selectByKeyboard();
+        this._selectByKeyboard();
         break;
 
       case 'ArrowDown':
@@ -463,11 +453,11 @@ export class SbbAutocomplete implements ComponentInterface {
     }
   }
 
-  private async _selectByKeyboard(): Promise<void> {
+  private _selectByKeyboard(): void {
     const activeOption = this._options[this._activeItemIndex];
 
     if (activeOption) {
-      await activeOption.setSelectedViaUserInteraction(true);
+      activeOption.setSelectedViaUserInteraction(true);
     }
   }
 
@@ -508,43 +498,48 @@ export class SbbAutocomplete implements ComponentInterface {
   }
 
   private _setTriggerAttributes(element: HTMLInputElement): void {
-    setAriaComboBoxAttributes(element, this._element.id || this._overlayId, false);
+    setAriaComboBoxAttributes(element, this.id || this._overlayId, false);
   }
 
   private _removeTriggerAttributes(element: HTMLInputElement): void {
     removeAriaComboBoxAttributes(element);
   }
 
-  public render(): JSX.Element {
-    return (
-      <Host
-        data-state={this._state}
-        role={this._ariaRoleOnHost ? 'listbox' : null}
-        ref={this._ariaRoleOnHost && assignId(() => this._overlayId)}
-        dir={getDocumentWritingMode()}
-      >
-        <div class="sbb-autocomplete__gap-fix"></div>
-        <div class="sbb-autocomplete__container">
-          <div class="sbb-autocomplete__gap-fix">{overlayGapFixCorners()}</div>
-          <div
-            onAnimationEnd={(event: AnimationEvent) => this._onAnimationEnd(event)}
-            class="sbb-autocomplete__panel"
-            data-open={this._state === 'opened' || this._state === 'opening'}
-            ref={(overlayRef) => (this._overlay = overlayRef)}
-          >
-            <div class="sbb-autocomplete__wrapper">
-              <div
-                class="sbb-autocomplete__options"
-                ref={(containerRef) => (this._optionContainer = containerRef)}
-                role={!this._ariaRoleOnHost ? 'listbox' : null}
-                id={!this._ariaRoleOnHost ? this._overlayId : null}
-              >
-                <slot />
-              </div>
+  protected override render(): TemplateResult {
+    setAttribute(this, 'data-state', this._state);
+    setAttribute(this, 'role', this._ariaRoleOnHost ? 'listbox' : null);
+    setAttribute(this, 'dir', getDocumentWritingMode());
+    this._ariaRoleOnHost && assignId(() => this._overlayId)(this);
+
+    return html`
+      <div class="sbb-autocomplete__gap-fix"></div>
+      <div class="sbb-autocomplete__container">
+        <div class="sbb-autocomplete__gap-fix">${overlayGapFixCorners()}</div>
+        <div
+          @animationend=${this._onAnimationEnd}
+          class="sbb-autocomplete__panel"
+          ?data-open=${this._state === 'opened' || this._state === 'opening'}
+          ${ref((overlayRef) => (this._overlay = overlayRef as HTMLElement))}
+        >
+          <div class="sbb-autocomplete__wrapper">
+            <div
+              class="sbb-autocomplete__options"
+              ${ref((containerRef) => (this._optionContainer = containerRef as HTMLElement))}
+              role=${!this._ariaRoleOnHost ? 'listbox' : nothing}
+              id=${!this._ariaRoleOnHost ? this._overlayId : nothing}
+            >
+              <slot></slot>
             </div>
           </div>
         </div>
-      </Host>
-    );
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-autocomplete': SbbAutocomplete;
   }
 }
diff --git a/src/components/sbb-button/sbb-button.spec.ts b/src/components/sbb-button/sbb-button.spec.ts
index c3f97f8d23..8a0df21ad1 100644
--- a/src/components/sbb-button/sbb-button.spec.ts
+++ b/src/components/sbb-button/sbb-button.spec.ts
@@ -1,5 +1,6 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+import '../sbb-form-field';
 import './sbb-button';
 
 describe('sbb-button', () => {
@@ -172,7 +173,7 @@ describe('sbb-button', () => {
         <sbb-button slot="suffix" icon-name="cross-small" />
       </sbb-form-field>`,
     );
-
-    expect(root.querySelector('sbb-button')).to.have.attribute('data-icon-small');
+    const button = root.querySelector('sbb-button');
+    expect(button).to.have.attribute('data-icon-small');
   });
 });
diff --git a/src/components/sbb-form-field/sbb-form-field.e2e.ts b/src/components/sbb-form-field/sbb-form-field.e2e.ts
index 0b9945a04b..694dd7aa6c 100644
--- a/src/components/sbb-form-field/sbb-form-field.e2e.ts
+++ b/src/components/sbb-form-field/sbb-form-field.e2e.ts
@@ -1,8 +1,10 @@
-import { aTimeout, assert, expect, fixture, nextFrame } from '@open-wc/testing';
+import { assert, expect, fixture, nextFrame } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 import { sendKeys } from '@web/test-runner-commands';
-import { waitForLitRender } from '../../global/testing';
+import { waitForCondition, waitForLitRender } from '../../global/testing';
 import { SbbFormField } from './sbb-form-field';
+import { SbbSelect } from '../sbb-select';
+import { SbbOption } from '../sbb-option';
 
 describe('sbb-form-field', () => {
   describe('with input', () => {
@@ -131,10 +133,9 @@ describe('sbb-form-field', () => {
     });
   });
 
-  // TODO-Migr: Unskip this when sbb-select is migrated
-  describe.skip('with sbb-select', () => {
+  describe('with sbb-select', () => {
     let element: SbbFormField;
-    let select: any; // TODO-Migr: Change to SbbSelect
+    let select: SbbSelect;
 
     beforeEach(async () => {
       element = await fixture(html`
@@ -145,6 +146,12 @@ describe('sbb-form-field', () => {
       select = document.querySelector('sbb-select');
     });
 
+    it('renders', async () => {
+      const option = select.querySelector('sbb-option');
+      assert.instanceOf(select, SbbSelect);
+      assert.instanceOf(option, SbbOption);
+    });
+
     it('should react to focus state', async () => {
       expect(element).not.to.have.attribute('data-input-focused');
 
@@ -165,7 +172,7 @@ describe('sbb-form-field', () => {
       label.click();
       await waitForLitRender(element);
 
-      expect(select).to.have.attribute('data-state', 'opened');
+      expect(select).to.have.attribute('data-state', 'opening');
     });
 
     it('should focus select on form field click readonly', async () => {
@@ -225,8 +232,7 @@ describe('sbb-form-field', () => {
       expect(element).not.to.have.attribute('data-input-empty');
     });
 
-    // TODO-Migr: Unskip this when sbb-select is migrated
-    it.skip('should read sbb-select empty state', async () => {
+    it('should read sbb-select empty state', async () => {
       const element: SbbFormField = await fixture(html`
         <sbb-form-field floating-label>
           <sbb-select value="0">
@@ -239,9 +245,8 @@ describe('sbb-form-field', () => {
       expect(element).to.have.attribute('data-input-empty');
     });
 
-    // TODO-Migr: Unskip this when sbb-select is migrated
-    it.skip('should not read sbb-select empty state', async () => {
-      const element: SbbFormField = await fixture(html`
+    it('should not read sbb-select empty state', async () => {
+      const element = await fixture(html`
         <sbb-form-field floating-label>
           <sbb-select>
             <sbb-option value="" selected>Empty Value</sbb-option>
@@ -253,8 +258,7 @@ describe('sbb-form-field', () => {
       expect(element).not.to.have.attribute('data-input-empty');
     });
 
-    // TODO-Migr: Unskip this when sbb-select is migrated
-    it.skip('should update floating label after clearing', async () => {
+    it('should update floating label after clearing', async () => {
       const element: SbbFormField = await fixture(
         html` <sbb-form-field floating-label>
           <sbb-select>
@@ -263,35 +267,30 @@ describe('sbb-form-field', () => {
         </sbb-form-field>`,
       );
 
-      // TODO-Migr: Remove as any
-      (document.querySelector('sbb-select') as any).value = '';
+      document.querySelector('sbb-select').value = '';
       await waitForLitRender(element);
 
       expect(element).to.have.attribute('data-input-empty');
     });
 
     it('should update floating label when resetting form', async () => {
-      await fixture(html`
+      const form = (await fixture(html`
         <form>
           <sbb-form-field floating-label>
             <input />
           </sbb-form-field>
         </form>
-      `);
-      const element = document.querySelector('sbb-form-field');
-      document.querySelector('input').focus();
+      `)) as HTMLFormElement;
+      const element = form.querySelector('sbb-form-field');
+      form.querySelector('input').focus();
       await sendKeys({ type: 'test' });
       await waitForLitRender(element);
       expect(element).not.to.have.attribute('data-input-empty');
 
-      document.querySelector('form').reset();
-      await waitForLitRender(element);
+      form.reset();
 
       // This is necessary to await for the reset event to be propagated
-      // In general, 'element.updateComplete' should suffice. Unless the changes
-      // do not trigger a rendering of the component
-      await aTimeout(0);
-
+      await waitForCondition(() => element.hasAttribute('data-input-empty'));
       expect(element).to.have.attribute('data-input-empty');
     });
 
diff --git a/src/components/sbb-form-field/sbb-form-field.spec.ts b/src/components/sbb-form-field/sbb-form-field.spec.ts
index 048fa85d81..e236f89fe2 100644
--- a/src/components/sbb-form-field/sbb-form-field.spec.ts
+++ b/src/components/sbb-form-field/sbb-form-field.spec.ts
@@ -123,8 +123,7 @@ describe('sbb-form-field', () => {
     `);
   });
 
-  // TODO-Migr: Unskip when the 'sbb-form-error' is migrated
-  it.skip('renders readonly input with error', async () => {
+  it('renders readonly input with error', async () => {
     const root = await fixture(html`
       <sbb-form-field label="Fill input">
         <input
@@ -139,12 +138,12 @@ describe('sbb-form-field', () => {
     `);
 
     expect(root).dom.to.be.equal(`
-      <sbb-form-field error-space="none" size="m" label="Fill input" width="default">
+      <sbb-form-field error-space="none" size="m" label="Fill input" width="default" data-has-error>
         <label data-creator="SBB-FORM-FIELD" slot="label">
           Fill input
         </label>
         <input aria-describedby="error" class="input" placeholder="This is an input" readonly="" slot="input">
-        <sbb-form-error id="error">
+        <sbb-form-error id="error" role="status" slot="error">
           You can't change this value.
         </sbb-form-error>
       </sbb-form-field>
diff --git a/src/components/sbb-form-field/sbb-form-field.tsx b/src/components/sbb-form-field/sbb-form-field.tsx
index 1edc5ffd2c..e35d9c394a 100644
--- a/src/components/sbb-form-field/sbb-form-field.tsx
+++ b/src/components/sbb-form-field/sbb-form-field.tsx
@@ -13,7 +13,7 @@ import { SbbInputModality, sbbInputModalityDetector } from '../../global/a11y';
 import { CSSResult, html, LitElement, nothing, TemplateResult, PropertyValues } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import Style from './sbb-form-field.scss?lit&inline';
-//import { SbbSelect } from '../sbb-select'; TODO-Migr: Uncomment when the sbb-select has been migrated
+import { SbbSelect } from '../sbb-select';
 import '../sbb-icon';
 
 let nextId = 0;
@@ -371,8 +371,7 @@ export class SbbFormField extends LitElement {
     } else if (this._input instanceof HTMLSelectElement) {
       return this._input.selectedOptions?.item(0)?.label?.trim() === '';
     } else if (this._input.tagName === 'SBB-SELECT') {
-      // TODO-Migr: change the 'any' to SbbSelect
-      return (this._input as any).getDisplayValue()?.trim() === '';
+      return (this._input as SbbSelect).getDisplayValue()?.trim() === '';
     } else {
       return this._isInputValueEmpty();
     }
diff --git a/src/components/sbb-navigation-section/sbb-navigation-section.tsx b/src/components/sbb-navigation-section/sbb-navigation-section.tsx
index 18a071fdf9..ed932116a1 100644
--- a/src/components/sbb-navigation-section/sbb-navigation-section.tsx
+++ b/src/components/sbb-navigation-section/sbb-navigation-section.tsx
@@ -190,7 +190,7 @@ export class SbbNavigationSection extends LitElement {
       this._state = 'opened';
       this._attachWindowEvents();
       this._setNavigationInert();
-      this._timeout = setTimeout(() => this._setNavigationSectionFocus());
+      this._timeoutController = setTimeout(() => this._setNavigationSectionFocus());
     } else if (event.animationName === 'close' && this._state === 'closing') {
       this._state = 'closed';
       this._navigationSectionContainerElement.scrollTo(0, 0);
diff --git a/src/components/sbb-navigation/sbb-navigation.e2e.ts b/src/components/sbb-navigation/sbb-navigation.e2e.ts
index f22f060427..1dc12ce293 100644
--- a/src/components/sbb-navigation/sbb-navigation.e2e.ts
+++ b/src/components/sbb-navigation/sbb-navigation.e2e.ts
@@ -227,12 +227,11 @@ describe('sbb-navigation', () => {
     expect(secondSectionDialog).not.to.have.attribute('open');
 
     secondAction.click();
-    console.log('second click');
 
     await waitForCondition(() => secondSection.getAttribute('data-state') === 'opened');
     expect(firstSection.getAttribute('data-state')).not.to.be.equal('opened');
     expect(secondSectionDialog).to.have.attribute('open');
-    await aTimeout(1000);
+    await aTimeout(250);
   });
 
   it('closes the navigation and the section on close button click', async () => {
diff --git a/src/components/sbb-optgroup/index.ts b/src/components/sbb-optgroup/index.ts
new file mode 100644
index 0000000000..171f423b88
--- /dev/null
+++ b/src/components/sbb-optgroup/index.ts
@@ -0,0 +1 @@
+export * from './sbb-optgroup';
diff --git a/src/components/sbb-optgroup/sbb-optgroup.e2e.ts b/src/components/sbb-optgroup/sbb-optgroup.e2e.ts
index 4f85042f0e..d5c032ce10 100644
--- a/src/components/sbb-optgroup/sbb-optgroup.e2e.ts
+++ b/src/components/sbb-optgroup/sbb-optgroup.e2e.ts
@@ -1,61 +1,74 @@
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
+import { assert, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { SbbOptGroup } from './sbb-optgroup';
+import { SbbOption } from '../sbb-option';
+import { waitForLitRender } from '../../global/testing';
+import '../sbb-option';
 
 describe('sbb-optgroup', () => {
-  let element: E2EElement, page: E2EPage;
+  let element: SbbOptGroup;
 
   beforeEach(async () => {
-    page = await newE2EPage();
-    await page.setContent(`
+    element = await fixture(html`
       <sbb-optgroup label="Group 1">
         <sbb-option id="option-1" value="option-1">Label 1</sbb-option>
         <sbb-option id="option-2" disabled value="option-2">Label 2</sbb-option>
         <sbb-option id="option-3" value="option-3">Label 3</sbb-option>
       </sbb-optgroup>
     `);
-    element = await page.find('sbb-optgroup');
   });
 
   it('renders', async () => {
-    expect(element).toHaveClass('hydrated');
+    assert.instanceOf(element, SbbOptGroup);
   });
 
   it('disabled status is inherited', async () => {
-    element.setAttribute('disabled', 'true');
-    await page.waitForChanges();
-    expect(element).toEqualAttribute('disabled', 'true');
-    const optionOne = await page.find('sbb-optgroup > sbb-option#option-1');
-    expect(optionOne.getAttribute('data-group-disabled')).not.toBeNull();
-    const optionTwo = await page.find('sbb-optgroup > sbb-option#option-2');
-    expect(optionTwo.getAttribute('data-group-disabled')).not.toBeNull();
-    expect(optionTwo.getAttribute('disabled')).not.toBeNull();
-    const optionThree = await page.find('sbb-optgroup > sbb-option#option-3');
-    expect(optionThree.getAttribute('data-group-disabled')).not.toBeNull();
+    const optionOne = document.querySelector('sbb-optgroup > sbb-option#option-1');
+    const optionTwo = document.querySelector('sbb-optgroup > sbb-option#option-2');
+    const optionThree = document.querySelector('sbb-optgroup > sbb-option#option-3');
+    element.setAttribute('disabled', '');
+    await waitForLitRender(element);
+
+    expect(element).to.have.attribute('disabled');
+    expect(optionOne).to.have.attribute('data-group-disabled');
+    expect(optionTwo).to.have.attribute('data-group-disabled');
+    expect(optionTwo).to.have.attribute('disabled');
+    expect(optionThree).to.have.attribute('data-group-disabled');
+
     element.removeAttribute('disabled');
-    await page.waitForChanges();
-    expect(optionTwo.getAttribute('data-group-disabled')).toBeNull();
-    expect(optionTwo.getAttribute('disabled')).not.toBeNull();
+    await waitForLitRender(element);
+    expect(optionTwo).not.to.have.attribute('data-group-disabled');
+    expect(optionTwo).to.have.attribute('disabled');
   });
 
   it('disabled status prevents changes', async () => {
-    const optionOne = await page.find('sbb-optgroup > sbb-option#option-1');
-    const optionTwo = await page.find('sbb-optgroup > sbb-option#option-2');
-    const optionThree = await page.find('sbb-optgroup > sbb-option#option-3');
+    const optionOne: SbbOption = document.querySelector('sbb-optgroup > sbb-option#option-1');
+    const optionTwo: SbbOption = document.querySelector('sbb-optgroup > sbb-option#option-2');
+    const optionThree: SbbOption = document.querySelector('sbb-optgroup > sbb-option#option-3');
     const options = [optionOne, optionTwo, optionThree];
-    options.forEach((opt: E2EElement) => expect(opt).toEqualAttribute('selected', null));
-    element.setAttribute('disabled', 'true');
-    await page.waitForChanges();
-    expect(element).toEqualAttribute('disabled', 'true');
-    for (const check of options) {
-      await check.click();
-      expect(check).toEqualAttribute('selected', null);
+
+    options.forEach((opt) => expect(opt).not.to.have.attribute('selected'));
+
+    element.setAttribute('disabled', '');
+    await waitForLitRender(element);
+    expect(element).to.have.attribute('disabled');
+
+    // clicks should have no effect since the group is disabled
+    for (const opt of options) {
+      opt.click();
+      await waitForLitRender(opt);
+      expect(opt).not.to.have.attribute('selected');
     }
+
     element.removeAttribute('disabled');
-    await page.waitForChanges();
-    for (const check of options) {
-      await check.click();
+    await waitForLitRender(element);
+    for (const opt of options) {
+      opt.click();
+      await waitForLitRender(opt);
     }
-    expect(optionOne).toEqualAttribute('selected', '');
-    expect(optionTwo).toEqualAttribute('selected', null);
-    expect(optionThree).toEqualAttribute('selected', '');
+
+    expect(optionOne).to.have.attribute('selected');
+    expect(optionTwo).not.to.have.attribute('selected');
+    expect(optionThree).to.have.attribute('selected');
   });
 });
diff --git a/src/components/sbb-optgroup/sbb-optgroup.spec.ts b/src/components/sbb-optgroup/sbb-optgroup.spec.ts
index fb150f1608..0a5ddbaf53 100644
--- a/src/components/sbb-optgroup/sbb-optgroup.spec.ts
+++ b/src/components/sbb-optgroup/sbb-optgroup.spec.ts
@@ -1,68 +1,77 @@
-import { SbbOptGroup } from './sbb-optgroup';
-import { newSpecPage } from '@stencil/core/testing';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import '../sbb-autocomplete';
+import '../sbb-option';
+import './sbb-optgroup';
+import { isSafari } from '../../global/dom';
 
 describe('sbb-optgroup', () => {
   describe('autocomplete', function () {
     it('renders', async () => {
-      const { root } = await newSpecPage({
-        components: [SbbOptGroup],
-        html: `
-          <sbb-autocomplete>
+      const root = (
+        await fixture(html`
+          <sbb-autocomplete origin="anchor">
             <sbb-optgroup label="Label">
               <sbb-option value="1">1</sbb-option>
               <sbb-option value="2">2</sbb-option>
             </sbb-optgroup>
           </sbb-autocomplete>
-          `,
-      });
+          <div id="anchor"></div>
+        `)
+      ).querySelector('sbb-optgroup');
+      const groupRoleAttr = 'aria-disabled="false" aria-label="Label" role="group"';
 
-      expect(root).toEqualHtml(`
-        <sbb-optgroup aria-disabled="false" aria-label="Label" data-variant="autocomplete" label="Label" role="group">
-          <mock:shadow-root>
-            <div class="sbb-optgroup__divider">
-              <sbb-divider></sbb-divider>
-            </div>
-            <div class="sbb-optgroup__label" aria-hidden="true">
-              <div class="sbb-optgroup__icon-space"></div>
-              <span>Label</span>
-            </div>
-            <slot></slot>
-          </mock:shadow-root>
-          <sbb-option value="1">1</sbb-option>
-          <sbb-option value="2">2</sbb-option>
+      expect(root).dom.to.be.equal(`
+        <sbb-optgroup data-variant="autocomplete" label="Label" ${!isSafari() ? groupRoleAttr : ''}>
+          <sbb-option value="1" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-1" role="option">1</sbb-option>
+          <sbb-option value="2" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-2" role="option">2</sbb-option>
         </sbb-optgroup>
       `);
+      expect(root).shadowDom.to.be.equal(`
+        <div class="sbb-optgroup__divider">
+          <sbb-divider aria-orientation="horizontal" orientation="horizontal" role="separator"></sbb-divider>
+        </div>
+        <div class="sbb-optgroup__label" aria-hidden="true">
+          <div class="sbb-optgroup__icon-space"></div>
+          <span>Label</span>
+        </div>
+        <slot></slot>
+      `);
     });
 
     it('renders disabled', async () => {
-      const { root } = await newSpecPage({
-        components: [SbbOptGroup],
-        html: `
-          <sbb-autocomplete>
+      const root = (
+        await fixture(html`
+          <sbb-autocomplete origin="anchor">
             <sbb-optgroup label="Label" disabled="true">
               <sbb-option value="1">1</sbb-option>
               <sbb-option value="2">2</sbb-option>
             </sbb-optgroup>
           </sbb-autocomplete>
-        `,
-      });
+          <div id="anchor"></div>
+        `)
+      ).querySelector('sbb-optgroup');
+      const groupRoleAttr = 'aria-disabled="true" aria-label="Label" role="group"';
 
-      expect(root).toEqualHtml(`
-        <sbb-optgroup disabled="true" aria-disabled="true" aria-label="Label" data-variant="autocomplete" label="Label" role="group">
-          <mock:shadow-root>
-            <div class="sbb-optgroup__divider">
-              <sbb-divider></sbb-divider>
-            </div>
-            <div class="sbb-optgroup__label" aria-hidden="true">
-              <div class="sbb-optgroup__icon-space"></div>
-              <span>Label</span>
-            </div>
-            <slot></slot>
-          </mock:shadow-root>
-          <sbb-option value="1">1</sbb-option>
-          <sbb-option value="2">2</sbb-option>
+      expect(root).dom.to.be.equal(`
+        <sbb-optgroup disabled="true" data-variant="autocomplete" label="Label" ${
+          !isSafari() ? groupRoleAttr : ''
+        }>
+          <sbb-option value="1" data-group-disabled aria-disabled="true" aria-selected="false" data-variant="autocomplete" id="sbb-option-7" role="option">1</sbb-option>
+          <sbb-option value="2" data-group-disabled aria-disabled="true" aria-selected="false" data-variant="autocomplete" id="sbb-option-8" role="option">2</sbb-option>
         </sbb-optgroup>
       `);
+
+      expect(root).shadowDom.to.be.equal(`
+        <div class="sbb-optgroup__divider">
+          <sbb-divider aria-orientation="horizontal" orientation="horizontal" role="separator"></sbb-divider>
+        </div>
+        <div class="sbb-optgroup__label" aria-hidden="true">
+          <div class="sbb-optgroup__icon-space"></div>
+          <span>Label</span>
+        </div>
+        <slot></slot>
+      `);
     });
   });
 });
diff --git a/src/components/sbb-optgroup/sbb-optgroup.stories.tsx b/src/components/sbb-optgroup/sbb-optgroup.stories.tsx
index eb8068581a..8a6d638fe9 100644
--- a/src/components/sbb-optgroup/sbb-optgroup.stories.tsx
+++ b/src/components/sbb-optgroup/sbb-optgroup.stories.tsx
@@ -1,9 +1,14 @@
 /** @jsx h */
 import { Fragment, h, JSX } from 'jsx-dom';
 import readme from './readme.md?raw';
-import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/html';
+import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
 import type { InputType } from '@storybook/types';
-import { StoryContext } from '@storybook/html';
+import { StoryContext } from '@storybook/web-components';
+import '../sbb-form-field';
+import '../sbb-autocomplete';
+import '../sbb-select';
+import '../sbb-option';
+import './sbb-optgroup';
 
 const wrapperStyle = (context: StoryContext): Record<string, string> => ({
   'background-color': context.args.negative
diff --git a/src/components/sbb-optgroup/sbb-optgroup.tsx b/src/components/sbb-optgroup/sbb-optgroup.tsx
index 9cb3c8684d..a825b76c91 100644
--- a/src/components/sbb-optgroup/sbb-optgroup.tsx
+++ b/src/components/sbb-optgroup/sbb-optgroup.tsx
@@ -1,36 +1,26 @@
-import {
-  Component,
-  ComponentInterface,
-  Element,
-  h,
-  Host,
-  JSX,
-  Prop,
-  State,
-  Watch,
-} from '@stencil/core';
-import { SbbOptionVariant } from '../sbb-option/sbb-option.custom';
 import { isSafari, isValidAttribute, toggleDatasetEntry } from '../../global/dom';
 import { AgnosticMutationObserver } from '../../global/observers';
+import { CSSResult, html, LitElement, TemplateResult, PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { setAttribute } from '../../global/dom';
+import { SbbOption, SbbOptionVariant } from '../sbb-option';
+import Style from './sbb-optgroup.scss?lit&inline';
+import '../sbb-divider';
 
 /**
  * @slot unnamed - Used to display options.
  */
-@Component({
-  shadow: true,
-  styleUrl: 'sbb-optgroup.scss',
-  tag: 'sbb-optgroup',
-})
-export class SbbOptGroup implements ComponentInterface {
+@customElement('sbb-optgroup')
+export class SbbOptGroup extends LitElement {
+  public static override styles: CSSResult = Style;
+
   /** Option group label. */
-  @Prop() public label: string;
+  @property() public label: string;
 
   /** Whether the group is disabled. */
-  @Prop() public disabled = false;
-
-  @Element() private _element: HTMLElement;
+  @property({ type: Boolean }) public disabled = false;
 
-  @State() private _negative = false;
+  @state() private _negative = false;
 
   private _negativeObserver = new AgnosticMutationObserver(() => this._onNegativeChange());
 
@@ -44,60 +34,60 @@ export class SbbOptGroup implements ComponentInterface {
   private _inertAriaGroups = isSafari();
 
   private get _isMultiple(): boolean {
-    return (
-      this._variant === 'select' && this._element.closest('sbb-select')?.hasAttribute('multiple')
-    );
+    return this._variant === 'select' && this.closest('sbb-select')?.hasAttribute('multiple');
   }
 
-  @Watch('disabled')
-  public updateDisabled(): void {
-    this._proxyDisabledToOptions();
+  private get _options(): SbbOption[] {
+    return Array.from(this.querySelectorAll('sbb-option')) as SbbOption[];
   }
 
-  @Watch('label')
-  public proxyGroupLabelToOptions(): void {
-    if (!this._inertAriaGroups) {
-      return;
-    }
-
-    for (const option of this._options) {
-      option.setGroupLabel(this.label);
-    }
-  }
-
-  public connectedCallback(): void {
+  public override connectedCallback(): void {
+    super.connectedCallback();
     this._negativeObserver?.disconnect();
-    this._negative = !!this._element.closest(
-      // :is() selector not possible due to test environment
-      `sbb-autocomplete[negative]:not([negative='false']),sbb-select[negative]:not([negative='false']),sbb-form-field[negative]:not([negative='false'])`,
+    this._negative = !!this.closest(
+      `:is(sbb-autocomplete, sbb-select, sbb-form-field)[negative]:not([negative='false']`,
     );
-    toggleDatasetEntry(this._element, 'negative', this._negative);
+    toggleDatasetEntry(this, 'negative', this._negative);
 
-    this._negativeObserver.observe(this._element, {
+    this._negativeObserver.observe(this, {
       attributes: true,
       attributeFilter: ['data-negative'],
     });
 
     this._setVariantByContext();
-    this.proxyGroupLabelToOptions();
+    this._proxyGroupLabelToOptions();
   }
 
-  public disconnectedCallback(): void {
-    this._negativeObserver?.disconnect();
+  public override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('disabled')) {
+      this._proxyDisabledToOptions();
+    }
+    if (changedProperties.has('label')) {
+      this._proxyGroupLabelToOptions();
+    }
   }
 
-  private get _options(): HTMLSbbOptionElement[] {
-    return Array.from(this._element.querySelectorAll('sbb-option')) as HTMLSbbOptionElement[];
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._negativeObserver?.disconnect();
   }
 
   private _setVariantByContext(): void {
-    if (this._element.closest('sbb-autocomplete')) {
+    if (this.closest('sbb-autocomplete')) {
       this._variant = 'autocomplete';
-    } else if (this._element.closest('sbb-select')) {
+    } else if (this.closest('sbb-select')) {
       this._variant = 'select';
     }
   }
 
+  private _proxyGroupLabelToOptions(): void {
+    if (!this._inertAriaGroups) {
+      return;
+    }
+
+    this._options.forEach((opt) => opt.setGroupLabel(this.label));
+  }
+
   private _proxyDisabledToOptions(): void {
     for (const option of this._options) {
       toggleDatasetEntry(option, 'groupDisabled', this.disabled);
@@ -105,27 +95,32 @@ export class SbbOptGroup implements ComponentInterface {
   }
 
   private _onNegativeChange(): void {
-    this._negative = isValidAttribute(this._element, 'data-negative');
+    this._negative = isValidAttribute(this, 'data-negative');
   }
 
-  public render(): JSX.Element {
-    return (
-      <Host
-        role={!this._inertAriaGroups ? 'group' : null}
-        data-variant={this._variant}
-        data-multiple={this._isMultiple}
-        aria-label={!this._inertAriaGroups && this.label}
-        aria-disabled={!this._inertAriaGroups && this.disabled.toString()}
-      >
-        <div class="sbb-optgroup__divider">
-          <sbb-divider negative={this._negative}></sbb-divider>
-        </div>
-        <div class="sbb-optgroup__label" aria-hidden="true">
-          <div class="sbb-optgroup__icon-space" />
-          <span>{this.label}</span>
-        </div>
-        <slot onSlotchange={() => this._proxyDisabledToOptions()} />
-      </Host>
-    );
+  protected override render(): TemplateResult {
+    setAttribute(this, 'role', !this._inertAriaGroups ? 'group' : null);
+    setAttribute(this, 'data-variant', this._variant);
+    setAttribute(this, 'data-multiple', this._isMultiple);
+    setAttribute(this, 'aria-label', !this._inertAriaGroups && this.label);
+    setAttribute(this, 'aria-disabled', !this._inertAriaGroups && this.disabled.toString());
+
+    return html`
+      <div class="sbb-optgroup__divider">
+        <sbb-divider ?negative=${this._negative}></sbb-divider>
+      </div>
+      <div class="sbb-optgroup__label" aria-hidden="true">
+        <div class="sbb-optgroup__icon-space"></div>
+        <span>${this.label}</span>
+      </div>
+      <slot @slotchange=${this._proxyDisabledToOptions}></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-optgroup': SbbOptGroup;
   }
 }
diff --git a/src/components/sbb-option/index.ts b/src/components/sbb-option/index.ts
new file mode 100644
index 0000000000..e5743ba26c
--- /dev/null
+++ b/src/components/sbb-option/index.ts
@@ -0,0 +1 @@
+export * from './sbb-option';
diff --git a/src/components/sbb-option/sbb-option.custom.d.ts b/src/components/sbb-option/sbb-option.custom.d.ts
deleted file mode 100644
index 12ddd6d25d..0000000000
--- a/src/components/sbb-option/sbb-option.custom.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type SbbOptionVariant = 'autocomplete' | 'select';
diff --git a/src/components/sbb-option/sbb-option.e2e.ts b/src/components/sbb-option/sbb-option.e2e.ts
index 5d57f7d187..5d3084af73 100644
--- a/src/components/sbb-option/sbb-option.e2e.ts
+++ b/src/components/sbb-option/sbb-option.e2e.ts
@@ -1,15 +1,21 @@
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
-import events from './sbb-option.events';
+import { assert, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { sendKeys } from '@web/test-runner-commands';
+import { EventSpy } from '../../global/testing/event-spy';
+import { waitForLitRender } from '../../global/testing';
+import { SbbOption, events } from './sbb-option';
+import { SbbFormField } from '../sbb-form-field';
+import '../sbb-autocomplete';
+import '../sbb-form-field';
 
 describe('sbb-option', () => {
   describe('autocomplete', () => {
-    let element: E2EElement, page: E2EPage;
+    let element: SbbFormField;
 
     beforeEach(async () => {
-      page = await newE2EPage();
-      await page.setContent(`
+      element = await fixture(html`
         <sbb-form-field>
-          <input/>
+          <input />
           <sbb-autocomplete>
             <sbb-option id="option-1" value="1">Option 1</sbb-option>
             <sbb-option id="option-2" value="2">Option 2</sbb-option>
@@ -17,32 +23,37 @@ describe('sbb-option', () => {
           </sbb-autocomplete>
         </sbb-form-field>
       `);
-      element = await page.find('sbb-autocomplete');
     });
 
     it('renders', async () => {
-      expect(element).toHaveClass('hydrated');
+      const option = element.querySelector('sbb-option');
+      assert.instanceOf(option, SbbOption);
     });
 
     it('set selected and emits on click', async () => {
-      const optionOne = await page.find('sbb-autocomplete > sbb-option#option-1');
-      expect(optionOne).not.toBeNull();
-      const selectionChangeSpy = await page.spyOnEvent(events.selectionChange);
-      optionOne.triggerEvent('click');
-      await page.waitForChanges();
-      expect(await optionOne.getProperty('selected')).toEqual(true);
-      expect(selectionChangeSpy).toHaveReceivedEventTimes(1);
+      const selectionChangeSpy = new EventSpy(events.selectionChange);
+      const optionOne = element.querySelector('sbb-option');
+
+      optionOne.dispatchEvent(new CustomEvent('click'));
+      await waitForLitRender(element);
+
+      expect(optionOne.selected).to.be.equal(true);
+      expect(selectionChangeSpy.count).to.be.equal(1);
     });
 
     it('highlight on input', async () => {
-      const input = await page.find('sbb-form-field > input');
-      expect(input).not.toBeNull();
-      await input.focus();
-      await input.press('1');
-      const optionOne = await page.find(
-        'sbb-autocomplete > sbb-option#option-1 >>> .sbb-option__label',
-      );
-      expect(optionOne).toEqualHtml(`
+      const input = element.querySelector('input');
+      const autocomplete = element.querySelector('sbb-autocomplete');
+      const options = element.querySelectorAll('sbb-option');
+      const optionOneLabel = options[0].shadowRoot.querySelector('.sbb-option__label');
+      const optionTwoLabel = options[1].shadowRoot.querySelector('.sbb-option__label');
+      const optionThreeLabel = options[2].shadowRoot.querySelector('.sbb-option__label');
+
+      input.focus();
+      await sendKeys({ press: '1' });
+      await waitForLitRender(autocomplete);
+
+      expect(optionOneLabel).dom.to.be.equal(`
         <span class="sbb-option__label">
           <slot></slot>
           <span class="sbb-option__label--highlight">Option</span>
@@ -50,19 +61,13 @@ describe('sbb-option', () => {
           <span class="sbb-option__label--highlight"></span>
         </span>
       `);
-      const optionTwo = await page.find(
-        'sbb-autocomplete > sbb-option#option-2 >>> .sbb-option__label',
-      );
-      expect(optionTwo).toEqualHtml(`
+      expect(optionTwoLabel).dom.to.be.equal(`
         <span class="sbb-option__label">
           <slot></slot>
           Option 2
         </span>
       `);
-      const optionThree = await page.find(
-        'sbb-autocomplete > sbb-option#option-3 >>> .sbb-option__label',
-      );
-      expect(optionThree).toEqualHtml(`
+      expect(optionThreeLabel).dom.to.be.equal(`
         <span class="sbb-option__label">
           <slot></slot>
           Option 3
diff --git a/src/components/sbb-option/sbb-option.events.ts b/src/components/sbb-option/sbb-option.events.ts
deleted file mode 100644
index f3dc4c6dd6..0000000000
--- a/src/components/sbb-option/sbb-option.events.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * This file is autogenerated by the event-sync plugin.
- * See stencil.config.ts in the root directory.
- */
-export default {
-  optionSelected: 'option-selected',
-  selectionChange: 'option-selection-change',
-};
diff --git a/src/components/sbb-option/sbb-option.spec.ts b/src/components/sbb-option/sbb-option.spec.ts
index 5111b83f1c..ba689f2995 100644
--- a/src/components/sbb-option/sbb-option.spec.ts
+++ b/src/components/sbb-option/sbb-option.spec.ts
@@ -1,64 +1,68 @@
-import { SbbOption } from './sbb-option';
-import { newSpecPage } from '@stencil/core/testing';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import '../sbb-autocomplete';
+import './sbb-option';
 
 describe('sbb-option', () => {
   describe('autocomplete', () => {
     it('renders selected and active', async () => {
-      const { root } = await newSpecPage({
-        components: [SbbOption],
-        html: `
-          <sbb-autocomplete>
-            <sbb-option value="1" selected="true" active="true">Option 1</sbb-option>
+      const root = (
+        await fixture(html`
+          <sbb-autocomplete origin="anchor">
+            <sbb-option value="1" selected active>Option 1</sbb-option>
           </sbb-autocomplete>
-        `,
-      });
+          <div id="anchor"></div>
+        `)
+      ).querySelector('sbb-option');
 
-      expect(root).toEqualHtml(`
+      expect(root).dom.to.be.equal(`
         <sbb-option selected="" active="" aria-disabled="false" aria-selected="true" data-variant="autocomplete" id="sbb-option-1" role="option" value="1">
-          <mock:shadow-root>
-            <div class="sbb-option__container">
-              <div class="sbb-option">
-                <span class="sbb-option__icon sbb-option__icon--empty">
-                  <slot name="icon"></slot>
-                </span>
-                <span class="sbb-option__label">
-                  <slot></slot>
-                </span>
-              </div>
-            </div>
-          </mock:shadow-root>
           Option 1
         </sbb-option>
       `);
+      expect(root).shadowDom.to.be.equal(`
+        <div class="sbb-option__container">
+          <div class="sbb-option">
+            <span class="sbb-option__icon sbb-option__icon--empty">
+              <slot name="icon"></slot>
+            </span>
+            <span class="sbb-option__label">
+              <slot></slot>
+              Option 1
+            </span>
+          </div>
+        </div>
+      `);
     });
 
     it('renders disabled', async () => {
-      const { root } = await newSpecPage({
-        components: [SbbOption],
-        html: `
-          <sbb-autocomplete>
-            <sbb-option value="1" disabled="true">Option 1</sbb-option>
+      const root = (
+        await fixture(html`
+          <sbb-autocomplete origin="anchor">
+            <sbb-option value="1" disabled>Option 1</sbb-option>
           </sbb-autocomplete>
-        `,
-      });
+          <div id="anchor"></div>
+        `)
+      ).querySelector('sbb-option');
 
-      expect(root).toEqualHtml(`
-        <sbb-option disabled="true" aria-disabled="true" aria-selected="false" data-variant="autocomplete" id="sbb-option-2" role="option" value="1">
-          <mock:shadow-root>
-            <div class="sbb-option__container">
-              <div class="sbb-option">
-                <span class="sbb-option__icon sbb-option__icon--empty">
-                  <slot name="icon"></slot>
-                </span>
-                <span class="sbb-option__label">
-                  <slot></slot>
-                </span>
-              </div>
-            </div>
-          </mock:shadow-root>
+      expect(root).dom.to.be.equal(`
+        <sbb-option disabled aria-disabled="true" aria-selected="false" data-variant="autocomplete" id="sbb-option-4" role="option" value="1">
           Option 1
         </sbb-option>
       `);
+      expect(root).shadowDom.to.be.equal(`
+        <div class="sbb-option__container">
+          <div class="sbb-option">
+            <span class="sbb-option__icon sbb-option__icon--empty">
+              <slot name="icon"></slot>
+            </span>
+            <span class="sbb-option__label">
+              <slot></slot>
+              Option 1
+            </span>
+          </div>
+        </div>
+      `);
     });
   });
 });
diff --git a/src/components/sbb-option/sbb-option.stories.tsx b/src/components/sbb-option/sbb-option.stories.tsx
index f5e64a267f..76834f2d65 100644
--- a/src/components/sbb-option/sbb-option.stories.tsx
+++ b/src/components/sbb-option/sbb-option.stories.tsx
@@ -1,10 +1,14 @@
 /** @jsx h */
 import { Fragment, h, JSX } from 'jsx-dom';
 import readme from './readme.md?raw';
-import events from './sbb-option.events';
-import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/html';
+import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
 import type { InputType } from '@storybook/types';
-import { StoryContext } from '@storybook/html';
+import { StoryContext } from '@storybook/web-components';
+import { events } from './sbb-option';
+import '../sbb-form-field';
+import '../sbb-select';
+import '../sbb-autocomplete';
+import './sbb-option';
 
 const wrapperStyle = (context: StoryContext): Record<string, string> => ({
   'background-color': context.args.negative
diff --git a/src/components/sbb-option/sbb-option.tsx b/src/components/sbb-option/sbb-option.tsx
index 6678344eaf..39c27f64d8 100644
--- a/src/components/sbb-option/sbb-option.tsx
+++ b/src/components/sbb-option/sbb-option.tsx
@@ -1,26 +1,19 @@
-import {
-  Component,
-  ComponentInterface,
-  Element,
-  Event,
-  EventEmitter,
-  h,
-  Host,
-  JSX,
-  Listen,
-  Method,
-  Prop,
-  State,
-} from '@stencil/core';
 import { assignId } from '../../global/a11y';
 import { isSafari, isValidAttribute, isAndroid, toggleDatasetEntry } from '../../global/dom';
 import {
   createNamedSlotState,
   HandlerRepository,
   namedSlotChangeHandlerAspect,
+  EventEmitter,
+  ConnectedAbortController,
 } from '../../global/eventing';
 import { AgnosticMutationObserver } from '../../global/observers';
-import { SbbOptionVariant } from './sbb-option.custom';
+import { CSSResult, html, LitElement, nothing, TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { setAttribute } from '../../global/dom';
+import { classMap } from 'lit/directives/class-map.js';
+import Style from './sbb-option.scss?lit&inline';
+import '../sbb-visual-checkbox';
 
 let nextId = 0;
 
@@ -29,78 +22,68 @@ const optionObserverConfig: MutationObserverInit = {
   attributeFilter: ['data-group-disabled', 'data-negative'],
 };
 
+export const events = {
+  selectionChange: 'option-selection-change',
+  optionSelected: 'option-selected',
+};
+
 /**
  * @slot unnamed - Use this to provide the option label.
  * @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used.
  */
-@Component({
-  shadow: true,
-  styleUrl: 'sbb-option.scss',
-  tag: 'sbb-option',
-})
-export class SbbOption implements ComponentInterface {
+export type SbbOptionVariant = 'autocomplete' | 'select';
+
+@customElement('sbb-option')
+export class SbbOption extends LitElement {
+  public static override styles: CSSResult = Style;
+
   /** Value of the option. */
-  @Prop() public value?: string;
+  @property() public value?: string;
 
   /**
    * The icon name we want to use, choose from the small icon variants
    * from the ui-icons category from here
    * https://icons.app.sbb.ch.
    */
-  @Prop() public iconName?: string;
+  @property({ attribute: 'icon-name' }) public iconName?: string;
 
   /** Whether the option is currently active. */
-  @Prop({ reflect: true }) public active?: boolean;
+  @property({ reflect: true, type: Boolean }) public active?: boolean;
 
   /** Whether the option is selected. */
-  @Prop({ mutable: true, reflect: true }) public selected = false;
-
-  @State() private _negative = false;
-
-  /** Whether the component must be set disabled due disabled attribute on sbb-checkbox-group. */
-  @State() private _disabledFromGroup = false;
+  @property({ reflect: true, type: Boolean }) public selected = false;
 
-  /** Whether the option is disabled. TBI: missing disabled style, will be implemented with the select component. */
-  @Prop() public disabled?: boolean;
+  /** Whether the option is disabled. */
+  @property({ type: Boolean }) public disabled?: boolean;
 
   /** Emits when the option selection status changes. */
-  @Event({
-    bubbles: true,
-    composed: true,
-    eventName: 'option-selection-change',
-  })
-  public selectionChange: EventEmitter;
+  private _selectionChange: EventEmitter = new EventEmitter(this, events.selectionChange);
 
   /** Emits when an option was selected by user. */
-  @Event({
-    bubbles: true,
-    composed: true,
-    eventName: 'option-selected',
-  })
-  public optionSelected: EventEmitter;
+  private _optionSelected: EventEmitter = new EventEmitter(this, events.optionSelected);
+
+  /** Wheter to apply the negative styling */
+  @state() private _negative = false;
+
+  /** Whether the component must be set disabled due disabled attribute on sbb-checkbox-group. */
+  @state() private _disabledFromGroup = false;
 
   /** State of listed named slots, by indicating whether any element for a named slot is defined. */
-  @State() private _namedSlots = createNamedSlotState('icon');
+  @state() private _namedSlots = createNamedSlotState('icon');
 
-  @State() private _label: string;
+  @state() private _label: string;
 
   /** The portion of the highlighted label. */
-  @State() private _highlightString: string;
+  @state() private _highlightString: string;
 
   /** Disable the highlight of the label. */
-  @State() private _disableLabelHighlight: boolean;
+  @state() private _disableLabelHighlight: boolean;
 
-  @State() private _groupLabel: string;
-
-  @Element() private _element!: HTMLSbbOptionElement;
-
-  private _handlerRepository = new HandlerRepository(
-    this._element,
-    namedSlotChangeHandlerAspect((m) => (this._namedSlots = m(this._namedSlots))),
-  );
+  @state() private _groupLabel: string;
 
   private _optionId = `sbb-option-${++nextId}`;
   private _variant: SbbOptionVariant;
+  private _abort = new ConnectedAbortController(this);
 
   /**
    * On Safari, the groups labels are not read by VoiceOver.
@@ -109,6 +92,16 @@ export class SbbOption implements ComponentInterface {
    */
   private _inertAriaGroups = isSafari();
 
+  private _handlerRepository = new HandlerRepository(
+    this,
+    namedSlotChangeHandlerAspect((m) => (this._namedSlots = m(this._namedSlots))),
+  );
+
+  /** MutationObserver on data attributes. */
+  private _optionAttributeObserver = new AgnosticMutationObserver((mutationsList) =>
+    this._onOptionAttributesChange(mutationsList),
+  );
+
   private get _isAutocomplete(): boolean {
     return this._variant === 'autocomplete';
   }
@@ -116,21 +109,15 @@ export class SbbOption implements ComponentInterface {
     return this._variant === 'select';
   }
   private get _isMultiple(): boolean {
-    return this._element.closest('sbb-select')?.hasAttribute('multiple');
+    return this.closest('sbb-select')?.hasAttribute('multiple');
   }
 
-  /** MutationObserver on data attributes. */
-  private _optionAttributeObserver = new AgnosticMutationObserver((mutationsList) =>
-    this._onOptionAttributesChange(mutationsList),
-  );
-
   /**
    * Highlight the label of the option
    * @param value the highlighted portion of the label
    * @internal
    */
-  @Method()
-  public async highlight(value: string): Promise<void> {
+  public highlight(value: string): void {
     this._highlightString = value;
   }
 
@@ -138,25 +125,22 @@ export class SbbOption implements ComponentInterface {
    * Set the option group label (used for a11y)
    * @param value the label of the option group
    */
-  @Method()
-  public async setGroupLabel(value: string): Promise<void> {
+  public setGroupLabel(value: string): void {
     this._groupLabel = value;
   }
 
   /**
    * @internal
    */
-  @Method()
-  public async setSelectedViaUserInteraction(selected: boolean): Promise<void> {
+  public setSelectedViaUserInteraction(selected: boolean): void {
     this.selected = selected;
-    this.selectionChange.emit();
+    this._selectionChange.emit();
     if (this.selected) {
-      this.optionSelected.emit();
+      this._optionSelected.emit();
     }
   }
 
-  @Listen('click', { passive: true })
-  public async selectByClick(event): Promise<void> {
+  private _selectByClick(event): void {
     if (this.disabled || this._disabledFromGroup) {
       event.stopPropagation();
       return;
@@ -164,41 +148,46 @@ export class SbbOption implements ComponentInterface {
 
     if (this._isMultiple) {
       event.stopPropagation();
-      await this.setSelectedViaUserInteraction(!this.selected);
+      this.setSelectedViaUserInteraction(!this.selected);
     } else {
-      await this.setSelectedViaUserInteraction(true);
+      this.setSelectedViaUserInteraction(true);
     }
   }
 
-  public connectedCallback(): void {
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    const signal = this._abort.signal;
     this._handlerRepository.connect();
-    const parentGroup = this._element.closest('sbb-optgroup');
+    const parentGroup = this.closest('sbb-optgroup');
     if (parentGroup) {
       this._disabledFromGroup = isValidAttribute(parentGroup, 'disabled');
     }
-    this._optionAttributeObserver.observe(this._element, optionObserverConfig);
+    this._optionAttributeObserver.observe(this, optionObserverConfig);
 
-    this._negative = !!this._element.closest(
+    this._negative = !!this.closest(
       // :is() selector not possible due to test environment
       `sbb-autocomplete[negative]:not([negative='false']),sbb-select[negative]:not([negative='false']),sbb-form-field[negative]:not([negative='false'])`,
     );
-    toggleDatasetEntry(this._element, 'negative', this._negative);
+    toggleDatasetEntry(this, 'negative', this._negative);
 
     this._setVariantByContext();
+
+    this.addEventListener('click', (e) => this._selectByClick(e), { signal, passive: true });
   }
 
-  public disconnectedCallback(): void {
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
     this._handlerRepository.disconnect();
     this._optionAttributeObserver.disconnect();
   }
 
   private _setVariantByContext(): void {
-    if (this._element.closest('sbb-autocomplete')) {
+    if (this.closest('sbb-autocomplete')) {
       this._variant = 'autocomplete';
       return;
     }
 
-    if (this._element.closest('sbb-select')) {
+    if (this.closest('sbb-select')) {
       this._variant = 'select';
     }
   }
@@ -207,9 +196,9 @@ export class SbbOption implements ComponentInterface {
   private _onOptionAttributesChange(mutationsList: MutationRecord[]): void {
     for (const mutation of mutationsList) {
       if (mutation.attributeName === 'data-group-disabled') {
-        this._disabledFromGroup = isValidAttribute(this._element, 'data-group-disabled');
+        this._disabledFromGroup = isValidAttribute(this, 'data-group-disabled');
       } else if (mutation.attributeName === 'data-negative') {
-        this._negative = isValidAttribute(this._element, 'data-negative');
+        this._negative = isValidAttribute(this, 'data-negative');
       }
     }
   }
@@ -231,15 +220,15 @@ export class SbbOption implements ComponentInterface {
     this._label = labelNode.wholeText;
   }
 
-  private _getHighlightedLabel(): JSX.Element {
+  private _getHighlightedLabel(): TemplateResult {
     if (!this._highlightString || !this._highlightString.trim()) {
-      return this._label;
+      return html`${this._label}`;
     }
 
     const matchIndex = this._label.toLowerCase().indexOf(this._highlightString.toLowerCase());
 
     if (matchIndex === -1) {
-      return this._label;
+      return html`${this._label}`;
     }
 
     const prefix = this._label.substring(0, matchIndex);
@@ -249,71 +238,77 @@ export class SbbOption implements ComponentInterface {
     );
     const postfix = this._label.substring(matchIndex + this._highlightString.length);
 
-    return [
-      <span class="sbb-option__label--highlight">{prefix}</span>,
-      <span>{highlighted}</span>,
-      <span class="sbb-option__label--highlight">{postfix}</span>,
-    ];
+    return html`
+      <span class="sbb-option__label--highlight">${prefix}</span><span>${highlighted}</span
+      ><span class="sbb-option__label--highlight">${postfix}</span>
+    `;
   }
 
-  public render(): JSX.Element {
+  protected override render(): TemplateResult {
     const isMultiple = this._isMultiple;
-    return (
-      <Host
-        role="option"
-        tabindex={isAndroid() && !this.disabled && 0}
-        data-variant={this._variant}
-        data-multiple={isMultiple}
-        data-disable-highlight={this._disableLabelHighlight}
-        ref={assignId(() => this._optionId)}
-        /* eslint-disable jsx-a11y/aria-proptypes */
-        aria-selected={`${this.selected}`}
-        aria-disabled={`${this.disabled || this._disabledFromGroup}`}
-        /* eslint-enable jsx-a11y/aria-proptypes */
-      >
-        <div class="sbb-option__container">
-          <div class="sbb-option">
-            {/* Icon */}
-            {!isMultiple && (
-              <span
-                class={{
+    setAttribute(this, 'role', 'option');
+    setAttribute(this, 'tabindex', isAndroid() && !this.disabled && 0);
+    setAttribute(this, 'data-variant', this._variant);
+    setAttribute(this, 'data-multiple', isMultiple);
+    setAttribute(this, 'data-disable-highlight', this._disableLabelHighlight);
+    setAttribute(this, 'aria-selected', `${this.selected}`);
+    setAttribute(this, 'aria-disabled', `${this.disabled || this._disabledFromGroup}`);
+    assignId(() => this._optionId)(this);
+
+    return html`
+      <div class="sbb-option__container">
+        <div class="sbb-option">
+          <!-- Icon -->
+          ${!isMultiple
+            ? html` <span
+                class=${classMap({
                   'sbb-option__icon': true,
                   'sbb-option__icon--empty': !this._namedSlots.icon && !this.iconName,
-                }}
+                })}
               >
-                <slot name="icon">{this.iconName && <sbb-icon name={this.iconName} />}</slot>
-              </span>
-            )}
-
-            {/* Checkbox */}
-            {isMultiple && (
-              <sbb-visual-checkbox
-                checked={this.selected}
-                disabled={this.disabled || this._disabledFromGroup}
-                negative={this._negative}
-              ></sbb-visual-checkbox>
-            )}
-
-            {/* Label */}
-            <span class="sbb-option__label">
-              <slot onSlotchange={(event) => this._setupHighlightHandler(event)} />
-
-              {/* Search highlight */}
-              {this._isAutocomplete &&
-                this._label &&
-                !this._disableLabelHighlight &&
-                this._getHighlightedLabel()}
-
-              {this._inertAriaGroups && this._groupLabel && (
-                <span class="sbb-option__group-label--visually-hidden"> ({this._groupLabel})</span>
-              )}
-            </span>
-
-            {/* Selected tick */}
-            {this._isSelect && !isMultiple && this.selected && <sbb-icon name="tick-small" />}
-          </div>
+                <slot name="icon">
+                  ${this.iconName ? html`<sbb-icon name=${this.iconName} />` : nothing}
+                </slot>
+              </span>`
+            : nothing}
+
+          <!-- Checkbox -->
+          ${isMultiple
+            ? html` <sbb-visual-checkbox
+                ?checked=${this.selected}
+                ?disabled=${this.disabled || this._disabledFromGroup}
+                ?negative=${this._negative}
+              ></sbb-visual-checkbox>`
+            : nothing}
+
+          <!-- Label -->
+          <span class="sbb-option__label">
+            <slot @slotchange=${this._setupHighlightHandler}></slot>
+
+            <!-- Search highlight -->
+            ${this._isAutocomplete && this._label && !this._disableLabelHighlight
+              ? this._getHighlightedLabel()
+              : nothing}
+            ${this._inertAriaGroups && this._groupLabel
+              ? html` <span class="sbb-option__group-label--visually-hidden">
+                  (${this._groupLabel})</span
+                >`
+              : nothing}
+          </span>
+
+          <!-- Selected tick -->
+          ${this._isSelect && !isMultiple && this.selected
+            ? html`<sbb-icon name="tick-small"></sbb-icon>`
+            : nothing}
         </div>
-      </Host>
-    );
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-option': SbbOption;
   }
 }
diff --git a/src/components/sbb-select/index.ts b/src/components/sbb-select/index.ts
new file mode 100644
index 0000000000..618f8ad275
--- /dev/null
+++ b/src/components/sbb-select/index.ts
@@ -0,0 +1 @@
+export * from './sbb-select';
diff --git a/src/components/sbb-select/sbb-select.custom.d.ts b/src/components/sbb-select/sbb-select.custom.d.ts
deleted file mode 100644
index af67fe4e6b..0000000000
--- a/src/components/sbb-select/sbb-select.custom.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface SelectChange {
-  type: 'value';
-  value: string | string[];
-}
diff --git a/src/components/sbb-select/sbb-select.e2e.ts b/src/components/sbb-select/sbb-select.e2e.ts
index 2c78e22fb1..86cbd85902 100644
--- a/src/components/sbb-select/sbb-select.e2e.ts
+++ b/src/components/sbb-select/sbb-select.e2e.ts
@@ -1,23 +1,24 @@
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
-import events from './sbb-select.events';
-import optionEvents from '../sbb-option/sbb-option.events';
-import { waitForCondition } from '../../global/testing';
+import { SbbOption, events as optionEvents } from '../sbb-option';
+import { waitForCondition, waitForLitRender } from '../../global/testing';
+import { aTimeout, assert, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { sendKeys } from '@web/test-runner-commands';
+import { EventSpy } from '../../global/testing/event-spy';
+import { events, SbbSelect } from './sbb-select';
 
 describe('sbb-select', () => {
-  let element: E2EElement,
-    focusableElement: E2EElement,
-    firstOption: E2EElement,
-    secondOption: E2EElement,
-    thirdOption: E2EElement,
-    displayValue: E2EElement,
-    comboBoxElement: E2EElement,
-    page: E2EPage;
+  let element: SbbSelect,
+    focusableElement: HTMLElement,
+    firstOption: SbbOption,
+    secondOption: SbbOption,
+    thirdOption: SbbOption,
+    displayValue: HTMLElement,
+    comboBoxElement: HTMLElement;
 
   beforeEach(async () => {
-    page = await newE2EPage();
-    await page.setContent(`
+    await fixture(html`
       <div id="parent">
-        <sbb-select placeholder='Placeholder'>
+        <sbb-select placeholder="Placeholder" disable-animation>
           <sbb-option id="option-1" value="1">First</sbb-option>
           <sbb-option id="option-2" value="2">Second</sbb-option>
           <sbb-option id="option-3" value="3">Third</sbb-option>
@@ -25,125 +26,118 @@ describe('sbb-select', () => {
       </div>
     `);
 
-    element = await page.find('sbb-select');
-    comboBoxElement = await page.find('[role="combobox"]');
+    element = document.querySelector('sbb-select');
+    comboBoxElement = document.querySelector('[role="combobox"]');
     focusableElement = comboBoxElement;
-    firstOption = await page.find('sbb-select > sbb-option#option-1');
-    secondOption = await page.find('sbb-select > sbb-option#option-2');
-    thirdOption = await page.find('sbb-select > sbb-option#option-3');
-    displayValue = await page.find('sbb-select >>> .sbb-select__trigger');
-    await page.waitForChanges();
+    firstOption = element.querySelector('#option-1');
+    secondOption = element.querySelector('#option-2');
+    thirdOption = element.querySelector('#option-3');
+    displayValue = element.shadowRoot.querySelector('.sbb-select__trigger');
   });
 
   it('renders', async () => {
-    expect(element).toHaveClass('hydrated');
+    assert.instanceOf(element, SbbSelect);
+    assert.instanceOf(firstOption, SbbOption);
   });
 
   it('opens and closes the dialog', async () => {
-    const willOpen = await page.spyOnEvent(events.willOpen);
-    const didOpen = await page.spyOnEvent(events.didOpen);
-    const willClose = await page.spyOnEvent(events.willClose);
-    const didClose = await page.spyOnEvent(events.didClose);
-    await element.triggerEvent('click');
-    await page.waitForChanges();
+    const willOpen = new EventSpy(events.willOpen);
+    const didOpen = new EventSpy(events.didOpen);
+    const willClose = new EventSpy(events.willClose);
+    const didClose = new EventSpy(events.didClose);
+    element.dispatchEvent(new CustomEvent('click'));
+    await waitForLitRender(element);
     await waitForCondition(() => willOpen.events.length === 1);
-
-    expect(willOpen).toHaveReceivedEventTimes(1);
-    await page.waitForChanges();
+    expect(willOpen.count).to.be.equal(1);
     await waitForCondition(() => didOpen.events.length === 1);
 
-    expect(didOpen).toHaveReceivedEventTimes(1);
-    await page.waitForChanges();
+    expect(didOpen.count).to.be.equal(1);
+    await waitForLitRender(element);
 
-    expect(comboBoxElement).toEqualAttribute('aria-expanded', 'true');
+    expect(comboBoxElement).to.have.attribute('aria-expanded', 'true');
 
-    await element.triggerEvent('click');
-    await page.waitForChanges();
+    element.dispatchEvent(new CustomEvent('click'));
+    await waitForLitRender(element);
     await waitForCondition(() => willClose.events.length === 1);
-
-    expect(willClose).toHaveReceivedEventTimes(1);
-    await page.waitForChanges();
+    expect(willClose.count).to.be.equal(1);
     await waitForCondition(() => didClose.events.length === 1);
 
-    expect(didClose).toHaveReceivedEventTimes(1);
-    await page.waitForChanges();
+    expect(didClose.count).to.be.equal(1);
+    await waitForLitRender(element);
 
-    expect(comboBoxElement).toEqualAttribute('aria-expanded', 'false');
+    expect(comboBoxElement).to.have.attribute('aria-expanded', 'false');
   });
 
   it('displays placeholder if no value is set and there is no selected element', async () => {
-    expect(await element.getProperty('value')).toBeUndefined();
-    const placeholder = await page.find('sbb-select >>> .sbb-select__trigger--placeholder');
-    expect(placeholder).not.toBeNull();
-    expect(placeholder.textContent).toEqualText('Placeholder');
+    expect(element.value).to.be.undefined;
+    const placeholder = element.shadowRoot.querySelector('.sbb-select__trigger--placeholder');
+    expect(placeholder).not.to.be.null;
+    expect(placeholder).to.have.trimmed.text('Placeholder');
   });
 
   it("displays value if it's set, or placeholder if value doesn't match available options", async () => {
-    expect(displayValue.textContent).toEqualText('Placeholder');
-
-    element.setProperty('value', '1');
-    await page.waitForChanges();
-    expect(displayValue).toEqualText('First');
-    expect(firstOption).toHaveAttribute('selected');
-    expect(secondOption).not.toHaveAttribute('selected');
-    expect(thirdOption).not.toHaveAttribute('selected');
-
-    element.setProperty('value', '000000000');
-    await page.waitForChanges();
-    expect(displayValue).toEqualText('Placeholder');
-    expect(firstOption).not.toHaveAttribute('selected');
-    expect(secondOption).not.toHaveAttribute('selected');
-    expect(thirdOption).not.toHaveAttribute('selected');
+    expect(displayValue).to.have.trimmed.text('Placeholder');
+
+    element.value = '1';
+    await waitForLitRender(element);
+    expect(displayValue).to.have.trimmed.text('First');
+    expect(firstOption).to.have.attribute('selected');
+    expect(secondOption).not.to.have.attribute('selected');
+    expect(thirdOption).not.to.have.attribute('selected');
+
+    element.value = '000000000';
+    await waitForLitRender(element);
+    expect(displayValue).to.have.trimmed.text('Placeholder');
+    expect(firstOption).not.to.have.attribute('selected');
+    expect(secondOption).not.to.have.attribute('selected');
+    expect(thirdOption).not.to.have.attribute('selected');
   });
 
   it("displays joined string if both multiple and value props are set, or placeholder if value doesn't match available options", async () => {
-    expect(displayValue.textContent).toEqualText('Placeholder');
-    element.setAttribute('multiple', true);
-
-    element.setProperty('value', ['1', '3']);
-    await page.waitForChanges();
-    expect(displayValue).toEqualText('First, Third');
-    expect(firstOption).toHaveAttribute('selected');
-    expect(secondOption).not.toHaveAttribute('selected');
-    expect(thirdOption).toHaveAttribute('selected');
-
-    element.setProperty('value', '000000000');
-    await page.waitForChanges();
-    expect(displayValue).toEqualText('Placeholder');
-    expect(firstOption).not.toHaveAttribute('selected');
-    expect(secondOption).not.toHaveAttribute('selected');
-    expect(thirdOption).not.toHaveAttribute('selected');
+    expect(displayValue).to.have.trimmed.text('Placeholder');
+    element.setAttribute('multiple', '');
+
+    element.value = ['1', '3'];
+    await waitForLitRender(element);
+    expect(displayValue).to.have.trimmed.text('First, Third');
+    expect(firstOption).to.have.attribute('selected');
+    expect(secondOption).not.to.have.attribute('selected');
+    expect(thirdOption).to.have.attribute('selected');
+
+    element.value = '000000000';
+    await waitForLitRender(element);
+    expect(displayValue).to.have.trimmed.text('Placeholder');
+    expect(firstOption).not.to.have.attribute('selected');
+    expect(secondOption).not.to.have.attribute('selected');
+    expect(thirdOption).not.to.have.attribute('selected');
   });
 
   it("displays value if it's set with 'wrong' selected attributes on sbb-options", async () => {
-    page = await newE2EPage();
-    await page.setContent(`
+    const root = await fixture(html`
       <div id="parent">
-        <sbb-select value='2'>
+        <sbb-select value="2">
           <sbb-option id="option-1" value="1" selected>First</sbb-option>
           <sbb-option id="option-2" value="2">Second</sbb-option>
           <sbb-option id="option-3" value="3" selected>Third</sbb-option>
         </sbb-select>
       </div>
     `);
-    element = await page.find('sbb-select');
-    await page.waitForChanges();
-
-    const displayValue = await page.find('sbb-select >>> .sbb-select__trigger');
-    const firstOption = await page.find('sbb-select > sbb-option#option-1');
-    const secondOption = await page.find('sbb-select > sbb-option#option-2');
-    const thirdOption = await page.find('sbb-select > sbb-option#option-3');
-
-    expect(await element.getProperty('value')).toEqual('2');
-    expect(displayValue).toEqualText('Second');
-    expect(firstOption).not.toHaveAttribute('selected');
-    expect(secondOption).toHaveAttribute('selected');
-    expect(thirdOption).not.toHaveAttribute('selected');
+    element = root.querySelector('sbb-select');
+
+    const displayValue = element.shadowRoot.querySelector('.sbb-select__trigger');
+    const firstOption = element.querySelector('#option-1');
+    const secondOption = element.querySelector('#option-2');
+    const thirdOption = element.querySelector('#option-3');
+
+    expect(element.value).to.be.equal('2');
+    expect(displayValue).to.have.trimmed.text('Second');
+    expect(firstOption).not.to.have.attribute('selected');
+    expect(secondOption).to.have.attribute('selected');
+    expect(thirdOption).not.to.have.attribute('selected');
   });
 
   it('display selected sbb-option if no value is set, then handles selection', async () => {
-    page = await newE2EPage();
-    await page.setContent(`
+    const root = await fixture(html`
       <div id="parent">
         <sbb-select>
           <sbb-option id="option-1" value="1" selected>First</sbb-option>
@@ -152,202 +146,211 @@ describe('sbb-select', () => {
         </sbb-select>
       </div>
     `);
-    element = await page.find('sbb-select');
-    comboBoxElement = await page.find('[role="combobox"]');
+    element = root.querySelector('sbb-select');
+    comboBoxElement = root.querySelector('[role="combobox"]');
     focusableElement = comboBoxElement;
-    await page.waitForChanges();
+    await waitForLitRender(element);
+
+    const displayValue = element.shadowRoot.querySelector('.sbb-select__trigger');
+    expect(displayValue).to.have.trimmed.text('First');
+    expect(element.value).to.be.equal('1');
 
-    const displayValue = await page.find('sbb-select >>> .sbb-select__trigger');
-    expect(displayValue).toEqualText('First');
-    expect(await element.getProperty('value')).toEqual('1');
+    const willOpen = new EventSpy(events.willOpen);
+    const didOpen = new EventSpy(events.didOpen);
+    element.click();
 
-    const willOpen = await page.spyOnEvent(events.willOpen);
-    const didOpen = await page.spyOnEvent(events.didOpen);
-    await element.triggerEvent('click');
-    await page.waitForChanges();
     await waitForCondition(() => willOpen.events.length === 1);
-    expect(willOpen).toHaveReceivedEventTimes(1);
-    await page.waitForChanges();
+    expect(willOpen.count).to.be.equal(1);
     await waitForCondition(() => didOpen.events.length === 1);
 
-    expect(didOpen).toHaveReceivedEventTimes(1);
-    const firstOption = await page.find('sbb-select > sbb-option#option-1');
-    expect(firstOption).not.toHaveAttribute('active');
-    expect(firstOption).toHaveAttribute('selected');
-    const secondOption = await page.find('sbb-select > sbb-option#option-2');
-    expect(secondOption).not.toHaveAttribute('active');
-    expect(secondOption).not.toHaveAttribute('selected');
-
-    const selectionChange = await page.spyOnEvent(optionEvents.selectionChange);
-    const optionSelected = await page.spyOnEvent(optionEvents.optionSelected);
-    const willClose = await page.spyOnEvent(events.willClose);
-    const didClose = await page.spyOnEvent(events.didClose);
-    await secondOption.triggerEvent('click');
-    await page.waitForChanges();
+    expect(didOpen.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    firstOption = element.querySelector('#option-1');
+    expect(firstOption).not.to.have.attribute('active');
+    expect(firstOption).to.have.attribute('selected');
+    secondOption = element.querySelector('#option-2');
+    expect(secondOption).not.to.have.attribute('active');
+    expect(secondOption).not.to.have.attribute('selected');
+
+    const selectionChange = new EventSpy(optionEvents.selectionChange);
+    const optionSelected = new EventSpy(optionEvents.optionSelected);
+    const willClose = new EventSpy(events.willClose);
+    const didClose = new EventSpy(events.didClose);
+
+    secondOption.click();
+    await waitForLitRender(element);
 
     // Event received, panel is closed
-    expect(selectionChange).toHaveReceivedEventTimes(1);
-    expect(optionSelected).toHaveReceivedEventTimes(1);
+    expect(selectionChange.count).to.be.equal(1);
+    expect(optionSelected.count).to.be.equal(1);
 
-    await page.waitForChanges();
     await waitForCondition(() => willClose.events.length === 1);
-    expect(willClose).toHaveReceivedEventTimes(1);
-    await page.waitForChanges();
+    expect(willClose.count).to.be.equal(1);
     await waitForCondition(() => didClose.events.length === 1);
-    expect(didClose).toHaveReceivedEventTimes(1);
-    expect(await element.getProperty('value')).toEqual('2');
-    expect(comboBoxElement).toEqualAttribute('aria-expanded', 'false');
+    expect(didClose.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    expect(element.value).to.be.equal('2');
+    expect(comboBoxElement).to.have.attribute('aria-expanded', 'false');
   });
 
   it('handles selection in multiple', async () => {
-    element.setAttribute('multiple', 'true');
-    await page.waitForChanges();
+    element.setAttribute('multiple', '');
+    await waitForLitRender(element);
+
+    const willOpen = new EventSpy(events.willOpen);
+    const didOpen = new EventSpy(events.didOpen);
+    element.dispatchEvent(new CustomEvent('click'));
 
-    const willOpen = await page.spyOnEvent(events.willOpen);
-    const didOpen = await page.spyOnEvent(events.didOpen);
-    await element.triggerEvent('click');
-    await page.waitForChanges();
     await waitForCondition(() => willOpen.events.length === 1);
-    expect(willOpen).toHaveReceivedEventTimes(1);
-    await page.waitForChanges();
+    expect(willOpen.count).to.be.equal(1);
     await waitForCondition(() => didOpen.events.length === 1);
-    expect(didOpen).toHaveReceivedEventTimes(1);
-
-    const firstOption = await page.find('sbb-select > sbb-option#option-1');
-    expect(firstOption).not.toHaveAttribute('active');
-    expect(firstOption).not.toHaveAttribute('selected');
-    const secondOption = await page.find('sbb-select > sbb-option#option-2');
-    expect(secondOption).not.toHaveAttribute('active');
-    expect(secondOption).not.toHaveAttribute('selected');
-
-    const selectionChange = await page.spyOnEvent(optionEvents.selectionChange);
-    await firstOption.triggerEvent('click');
-    await page.waitForChanges();
-    expect(selectionChange).toHaveReceivedEventTimes(1);
-    expect(await element.getProperty('value')).toEqual(['1']);
-    expect(displayValue).toEqualText('First');
-
-    await secondOption.triggerEvent('click');
-    await page.waitForChanges();
-    expect(selectionChange).toHaveReceivedEventTimes(2);
-    expect(await element.getProperty('value')).toEqual(['1', '2']);
-    expect(displayValue).toEqualText('First, Second');
-
-    await firstOption.triggerEvent('click');
-    await page.waitForChanges();
-    expect(await element.getProperty('value')).toEqual(['2']);
-    await secondOption.triggerEvent('click');
-    await page.waitForChanges();
-    expect(await element.getProperty('value')).toEqual([]);
-    expect(displayValue).toEqualText('Placeholder');
+    expect(didOpen.count).to.be.equal(1);
+    await waitForLitRender(element);
+    expect(firstOption).not.to.have.attribute('active');
+    expect(firstOption).not.to.have.attribute('selected');
+    expect(secondOption).not.to.have.attribute('active');
+    expect(secondOption).not.to.have.attribute('selected');
+
+    const selectionChange = new EventSpy(optionEvents.selectionChange);
+    firstOption.dispatchEvent(new CustomEvent('click'));
+    await waitForLitRender(element);
+    expect(selectionChange.count).to.be.equal(1);
+    expect(element.value).to.be.eql(['1']);
+    expect(displayValue).to.have.trimmed.text('First');
+
+    secondOption.dispatchEvent(new CustomEvent('click'));
+    await waitForLitRender(element);
+    expect(selectionChange.count).to.be.equal(2);
+    expect(element.value).to.be.eql(['1', '2']);
+    expect(displayValue).to.have.trimmed.text('First, Second');
+
+    firstOption.dispatchEvent(new CustomEvent('click'));
+    await waitForLitRender(element);
+    expect(element.value).to.be.eql(['2']);
+    secondOption.dispatchEvent(new CustomEvent('click'));
+    await waitForLitRender(element);
+    expect(element.value).to.be.eql([]);
+    expect(displayValue).to.have.trimmed.text('Placeholder');
     // Panel is still open
-    expect(comboBoxElement).toEqualAttribute('aria-expanded', 'true');
+    expect(comboBoxElement).to.have.attribute('aria-expanded', 'true');
   });
 
   it('handles keypress on host', async () => {
-    const didOpen = await page.spyOnEvent(events.didOpen);
-    const didClose = await page.spyOnEvent(events.didClose);
+    const didOpen = new EventSpy(events.didOpen);
+    const didClose = new EventSpy(events.didClose);
 
-    await focusableElement.press('Enter');
-    await page.waitForChanges();
+    focusableElement.focus();
+    await sendKeys({ press: 'Enter' });
+    await waitForLitRender(element);
     await waitForCondition(() => didOpen.events.length === 1);
-    expect(didOpen).toHaveReceivedEventTimes(1);
+    expect(didOpen.count).to.be.equal(1);
 
-    await focusableElement.press('Escape');
-    await page.waitForChanges();
+    focusableElement.focus();
+    await sendKeys({ press: 'Escape' });
+    await waitForLitRender(element);
     await waitForCondition(() => didClose.events.length === 1);
-    expect(didClose).toHaveReceivedEventTimes(1);
+    expect(didClose.count).to.be.equal(1);
 
-    await focusableElement.press('ArrowDown');
-    await page.waitForChanges();
+    focusableElement.focus();
+    await sendKeys({ press: 'ArrowDown' });
     await waitForCondition(() => didOpen.events.length === 2);
-    expect(didOpen).toHaveReceivedEventTimes(2);
+    expect(didOpen.count).to.be.equal(2);
 
-    await focusableElement.press('Tab');
-    await page.waitForChanges();
+    focusableElement.focus();
+    await sendKeys({ press: 'Tab' });
     await waitForCondition(() => didClose.events.length === 2);
-    expect(didClose).toHaveReceivedEventTimes(2);
-
-    await focusableElement.press('F', { delay: 2000 });
-    await page.waitForChanges();
-    expect(didOpen).toHaveReceivedEventTimes(2);
-    expect(didClose).toHaveReceivedEventTimes(2);
-    expect(await page.find('sbb-select >>> .sbb-select__trigger')).toEqualText('First');
-
-    await focusableElement.press('S', { delay: 2000 });
-    await page.waitForChanges();
-    expect(didOpen).toHaveReceivedEventTimes(2);
-    expect(didClose).toHaveReceivedEventTimes(2);
-    expect(await page.find('sbb-select >>> .sbb-select__trigger')).toEqualText('Second');
+    expect(didClose.count).to.be.equal(2);
+
+    focusableElement.focus();
+    await sendKeys({ press: 'F' });
+    await waitForLitRender(element);
+    expect(didOpen.count).to.be.equal(2);
+    expect(didClose.count).to.be.equal(2);
+    expect(displayValue).to.have.trimmed.text('First');
+
+    await aTimeout(1100); // wait for the reset of _searchString timeout
+
+    focusableElement.focus();
+    await sendKeys({ press: 'S' });
+    await waitForLitRender(element);
+    expect(didOpen.count).to.be.equal(2);
+    expect(didClose.count).to.be.equal(2);
+    expect(displayValue).to.have.trimmed.text('Second');
   });
 
   it('handles keyboard selection', async () => {
-    const didOpen = await page.spyOnEvent(events.didOpen);
-    await focusableElement.press(' ');
-    await page.waitForChanges();
+    const didOpen = new EventSpy(events.didOpen);
+    focusableElement.focus();
+    await sendKeys({ press: ' ' });
     await waitForCondition(() => didOpen.events.length === 1);
-    expect(didOpen).toHaveReceivedEventTimes(1);
-
-    const firstOption = await page.find('sbb-select > sbb-option#option-1');
-    expect(firstOption).not.toHaveAttribute('active');
-    expect(firstOption).not.toHaveAttribute('selected');
-    await focusableElement.press('ArrowDown');
-    expect(firstOption).toHaveAttribute('active');
-    expect(firstOption).toHaveAttribute('selected');
-    expect(await element.getProperty('value')).toEqual('1');
-    expect(displayValue).toEqualText('First');
-    expect(comboBoxElement).toEqualAttribute('aria-expanded', 'true');
-
-    const thirdOption = await page.find('sbb-select > sbb-option#option-3');
-    await focusableElement.press('T', { delay: 2000 });
-    await page.waitForChanges();
-    expect(didOpen).toHaveReceivedEventTimes(1);
-    expect(displayValue).toEqualText('Third');
-    expect(thirdOption).toHaveAttribute('active');
-    expect(thirdOption).toHaveAttribute('selected');
-    expect(await element.getProperty('value')).toEqual('3');
-
-    const secondOption = await page.find('sbb-select > sbb-option#option-2');
-    await focusableElement.press('S', { delay: 2000 });
-    await page.waitForChanges();
-    expect(didOpen).toHaveReceivedEventTimes(1);
-    expect(displayValue).toEqualText('Second');
-    expect(secondOption).toHaveAttribute('active');
-    expect(secondOption).toHaveAttribute('selected');
-    expect(await element.getProperty('value')).toEqual('2');
+    expect(didOpen.count).to.be.equal(1);
+    expect(firstOption).not.to.have.attribute('active');
+    expect(firstOption).not.to.have.attribute('selected');
+
+    focusableElement.focus();
+    await sendKeys({ press: 'ArrowDown' });
+    expect(firstOption).to.have.attribute('active');
+    expect(firstOption).to.have.attribute('selected');
+    expect(element.value).to.be.equal('1');
+    expect(displayValue).to.have.trimmed.text('First');
+    expect(comboBoxElement).to.have.attribute('aria-expanded', 'true');
+
+    focusableElement.focus();
+    await sendKeys({ press: 'T' });
+    await waitForLitRender(element);
+    expect(didOpen.count).to.be.equal(1);
+    expect(displayValue).to.have.trimmed.text('Third');
+    expect(thirdOption).to.have.attribute('active');
+    expect(thirdOption).to.have.attribute('selected');
+    expect(element.value).to.be.equal('3');
+
+    await aTimeout(1100); // wait for the reset of _searchString timeout
+
+    focusableElement.focus();
+    await sendKeys({ press: 'S' });
+    await waitForLitRender(element);
+    expect(didOpen.count).to.be.equal(1);
+    expect(displayValue).to.have.trimmed.text('Second');
+    expect(secondOption).to.have.attribute('active');
+    expect(secondOption).to.have.attribute('selected');
+    expect(element.value).to.be.equal('2');
   });
 
   it('handles keyboard selection in multiple', async () => {
-    element.setAttribute('multiple', 'true');
-    await page.waitForChanges();
+    element.setAttribute('multiple', '');
+    await waitForLitRender(element);
 
-    const didOpen = await page.spyOnEvent(events.didOpen);
-    const didClose = await page.spyOnEvent(events.didClose);
-    await focusableElement.press('ArrowUp');
-    await page.waitForChanges();
+    const didOpen = new EventSpy(events.didOpen);
+    const didClose = new EventSpy(events.didClose);
+    focusableElement.focus();
+    await sendKeys({ press: 'ArrowUp' });
     await waitForCondition(() => didOpen.events.length === 1);
-    expect(didOpen).toHaveReceivedEventTimes(1);
-
-    const secondOption = await page.find('sbb-select > sbb-option#option-2');
-    expect(secondOption).not.toHaveAttribute('active');
-    expect(secondOption).not.toHaveAttribute('selected');
-    await focusableElement.press('ArrowDown');
-    await focusableElement.press('ArrowDown');
-    await focusableElement.press('Enter');
-    expect(secondOption).toHaveAttribute('active');
-    expect(secondOption).toHaveAttribute('selected');
-    expect(await element.getProperty('value')).toEqual(['2']);
-    expect(displayValue).toEqualText('Second');
-    await focusableElement.press('Escape');
-    await page.waitForChanges();
+    expect(didOpen.count).to.be.equal(1);
+
+    expect(secondOption).not.to.have.attribute('active');
+    expect(secondOption).not.to.have.attribute('selected');
+    focusableElement.focus();
+    await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ press: 'Enter' });
+    expect(secondOption).to.have.attribute('active');
+    expect(secondOption).to.have.attribute('selected');
+    expect(element.value).to.be.eql(['2']);
+    expect(displayValue).to.have.trimmed.text('Second');
+
+    await sendKeys({ press: 'Escape' });
     await waitForCondition(() => didClose.events.length === 1);
-    expect(didClose).toHaveReceivedEventTimes(1);
-
-    await element.press('ArrowDown');
-    await page.waitForChanges();
-    expect(didOpen).toHaveReceivedEventTimes(2);
-    expect(secondOption).not.toHaveAttribute('active');
-    expect(secondOption).toHaveAttribute('selected');
-    expect(comboBoxElement).toEqualAttribute('aria-expanded', 'true');
+    expect(didClose.count).to.be.equal(1);
+
+    element.focus();
+    await sendKeys({ press: 'ArrowDown' });
+    await waitForLitRender(element);
+    await waitForCondition(() => didOpen.events.length === 2);
+    expect(didOpen.count).to.be.equal(2);
+    expect(secondOption).not.to.have.attribute('active');
+    expect(secondOption).to.have.attribute('selected');
+    expect(comboBoxElement).to.have.attribute('aria-expanded', 'true');
   });
 });
diff --git a/src/components/sbb-select/sbb-select.events.ts b/src/components/sbb-select/sbb-select.events.ts
deleted file mode 100644
index 656a569dda..0000000000
--- a/src/components/sbb-select/sbb-select.events.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * This file is autogenerated by the event-sync plugin.
- * See stencil.config.ts in the root directory.
- */
-export default {
-  change: 'change',
-  didChange: 'didChange',
-  didClose: 'did-close',
-  didOpen: 'did-open',
-  input: 'input',
-  stateChange: 'state-change',
-  willClose: 'will-close',
-  willOpen: 'will-open',
-};
diff --git a/src/components/sbb-select/sbb-select.spec.ts b/src/components/sbb-select/sbb-select.spec.ts
index 83cdc38ab3..0f728296e8 100644
--- a/src/components/sbb-select/sbb-select.spec.ts
+++ b/src/components/sbb-select/sbb-select.spec.ts
@@ -1,24 +1,23 @@
-import { SbbSelect } from './sbb-select';
-import { newSpecPage } from '@stencil/core/testing';
-import { SbbOption } from '../sbb-option/sbb-option';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import '../sbb-option';
+import './sbb-select';
+import { isSafari } from '../../global/dom';
 
-// NOTE: it needs to load also the SbbOption component, otherwise the value is not correctly read as a component's attribute.
 describe('sbb-select', () => {
   it('renders', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbSelect, SbbOption],
-      html: `
-        <sbb-select>
-          <sbb-option value="1">Option 1</sbb-option>
-          <sbb-option value="2">Option 2</sbb-option>
-          <sbb-option value="3">Option 3</sbb-option>
-        </sbb-select>
-      `,
-    });
+    const root = await fixture(html`
+      <sbb-select>
+        <sbb-option value="1">Option 1</sbb-option>
+        <sbb-option value="2">Option 2</sbb-option>
+        <sbb-option value="3">Option 3</sbb-option>
+      </sbb-select>
+    `);
+    const listboxAttr = 'id="sbb-select-1" role="listbox"';
 
-    expect(root.shadowRoot.host).toEqualAttribute('dir', 'ltr');
-    expect(root.shadowRoot.host).toEqualAttribute('data-state', 'closed');
-    expect(root.shadowRoot).toEqualHtml(`
+    expect(root.shadowRoot.host).to.have.attribute('dir', 'ltr');
+    expect(root.shadowRoot.host).to.have.attribute('data-state', 'closed');
+    expect(root).shadowDom.to.be.equal(`
       <div class="sbb-select__trigger" aria-hidden="true">
         <span class="sbb-select__trigger--placeholder"></span>
       </div>
@@ -34,7 +33,7 @@ describe('sbb-select', () => {
         </div>
         <div class="sbb-select__panel">
           <div class="sbb-select__wrapper">
-            <div id="sbb-select-1" class="sbb-select__options" role="listbox">
+            <div class="sbb-select__options" ${!isSafari() ? listboxAttr : ''}>
               <slot></slot>
             </div>
           </div>
@@ -44,22 +43,20 @@ describe('sbb-select', () => {
   });
 
   it('renders multiple', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbSelect, SbbOption],
-      html: `
-        <sbb-select multiple>
-          <sbb-option value="1">Option 1</sbb-option>
-          <sbb-option value="2">Option 2</sbb-option>
-          <sbb-option value="3">Option 3</sbb-option>
-        </sbb-select>
-      `,
-    });
+    const root = await fixture(html`
+      <sbb-select multiple>
+        <sbb-option value="1">Option 1</sbb-option>
+        <sbb-option value="2">Option 2</sbb-option>
+        <sbb-option value="3">Option 3</sbb-option>
+      </sbb-select>
+    `);
+    const listboxAttr = 'id="sbb-select-2" role="listbox"';
 
-    expect(root.shadowRoot.host).toEqualAttribute('dir', 'ltr');
-    expect(root.shadowRoot.host).toEqualAttribute('data-state', 'closed');
-    expect(root.shadowRoot.host).toHaveAttribute('data-multiple');
-    expect(root.shadowRoot.host).toHaveAttribute('multiple');
-    expect(root.shadowRoot).toEqualHtml(`
+    expect(root.shadowRoot.host).to.have.attribute('dir', 'ltr');
+    expect(root.shadowRoot.host).to.have.attribute('data-state', 'closed');
+    expect(root.shadowRoot.host).to.have.attribute('data-multiple');
+    expect(root.shadowRoot.host).to.have.attribute('multiple');
+    expect(root).shadowDom.to.be.equal(`
       <div class="sbb-select__trigger" aria-hidden="true">
         <span class="sbb-select__trigger--placeholder"></span>
       </div>
@@ -75,7 +72,9 @@ describe('sbb-select', () => {
         </div>
         <div class="sbb-select__panel">
           <div class="sbb-select__wrapper">
-            <div id="sbb-select-2" class="sbb-select__options" role="listbox" aria-multiselectable="">
+            <div class="sbb-select__options" aria-multiselectable="" ${
+              !isSafari() ? listboxAttr : ''
+            }>
               <slot></slot>
             </div>
           </div>
diff --git a/src/components/sbb-select/sbb-select.stories.tsx b/src/components/sbb-select/sbb-select.stories.tsx
index c82153d6fd..872e2eb6fb 100644
--- a/src/components/sbb-select/sbb-select.stories.tsx
+++ b/src/components/sbb-select/sbb-select.stories.tsx
@@ -1,16 +1,26 @@
 /** @jsx h */
 import { Fragment, h, JSX } from 'jsx-dom';
-import events from './sbb-select.events';
-import optionEvents from '../sbb-option/sbb-option.events';
+import { events } from './sbb-select';
+import { events as optionEvents } from '../sbb-option';
 import readme from './readme.md?raw';
 import { userEvent, within } from '@storybook/testing-library';
 import { waitForComponentsReady } from '../../global/testing/wait-for-components-ready';
 import isChromatic from 'chromatic/isChromatic';
 import { waitForStablePosition } from '../../global/testing/wait-for-stable-position';
-import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/html';
+import type {
+  Meta,
+  StoryObj,
+  ArgTypes,
+  Args,
+  Decorator,
+  StoryContext,
+} from '@storybook/web-components';
 import type { InputType } from '@storybook/types';
 import { withActions } from '@storybook/addon-actions/decorator';
-import { StoryContext } from '@storybook/html';
+import '../sbb-form-field';
+import '../sbb-optgroup';
+import '../sbb-option';
+import './sbb-select';
 
 const wrapperStyle = (context: StoryContext): Record<string, string> => ({
   'background-color': context.args.negative
diff --git a/src/components/sbb-select/sbb-select.tsx b/src/components/sbb-select/sbb-select.tsx
index eb523d7396..994b95fa7a 100644
--- a/src/components/sbb-select/sbb-select.tsx
+++ b/src/components/sbb-select/sbb-select.tsx
@@ -1,19 +1,3 @@
-import {
-  Component,
-  ComponentInterface,
-  Element,
-  Event,
-  EventEmitter,
-  h,
-  Host,
-  JSX,
-  Listen,
-  Method,
-  Prop,
-  State,
-  Watch,
-} from '@stencil/core';
-import { SbbOverlayState } from '../../components';
 import { getNextElementIndex, assignId } from '../../global/a11y';
 import {
   isSafari,
@@ -21,96 +5,102 @@ import {
   toggleDatasetEntry,
   getDocumentWritingMode,
 } from '../../global/dom';
-import { setOverlayPosition, isEventOnElement, overlayGapFixCorners } from '../../global/overlay';
-import { SelectChange } from './sbb-select.custom';
+import {
+  setOverlayPosition,
+  isEventOnElement,
+  overlayGapFixCorners,
+  SbbOverlayState,
+} from '../../global/overlay';
+import { CSSResult, html, LitElement, nothing, TemplateResult, PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ref } from 'lit/directives/ref.js';
+import { SbbOption } from '../sbb-option';
+import { setAttribute } from '../../global/dom';
+import { ConnectedAbortController, EventEmitter } from '../../global/eventing';
+import { SbbOptGroup } from '../sbb-optgroup';
+import Style from './sbb-select.scss?lit&inline';
 
 let nextId = 0;
 
+export interface SelectChange {
+  type: 'value';
+  value: string | string[];
+}
+
+export const events = {
+  didChange: 'did-change',
+  change: 'change',
+  input: 'input',
+  stateChange: 'state-change',
+  willOpen: 'will-open',
+  didOpen: 'did-open',
+  willClose: 'will-close',
+  didClose: 'did-close',
+};
+
 /**
  * @slot unnamed - Use this slot to project options.
  */
-@Component({
-  shadow: true,
-  styleUrl: 'sbb-select.scss',
-  tag: 'sbb-select',
-})
-export class SbbSelect implements ComponentInterface {
+@customElement('sbb-select')
+export class SbbSelect extends LitElement {
+  public static override styles: CSSResult = Style;
+
   /** The value of the select component. If `multiple` is true, it's an array. */
-  @Prop({ mutable: true }) public value: string | string[];
+  @property() public value: string | string[];
 
   /** The placeholder used if no value has been selected. */
-  @Prop() public placeholder: string;
+  @property() public placeholder: string;
 
   /** Whether the select allows for multiple selection. */
-  @Prop() public multiple = false;
+  @property({ type: Boolean }) public multiple = false;
 
   /** Whether the select is required. */
-  @Prop() public required = false;
+  @property({ type: Boolean }) public required = false;
 
   /** Whether the select is disabled. */
-  @Prop() public disabled = false;
+  @property({ type: Boolean }) public disabled = false;
 
   /** Whether the select is readonly. */
-  @Prop() public readonly = false;
+  @property({ type: Boolean }) public readonly = false;
 
   /** Negative coloring variant flag. */
-  @Prop({ reflect: true, mutable: true }) public negative = false;
+  @property({ reflect: true, type: Boolean }) public negative = false;
 
   /** Whether the animation is disabled. */
-  @Prop({ reflect: true }) public disableAnimation = false;
-
-  @Element() private _element: HTMLElement;
+  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
+  public disableAnimation = false;
 
   /** The state of the select. */
-  @State() private _state: SbbOverlayState = 'closed';
+  @state() private _state: SbbOverlayState = 'closed';
 
   /** The value displayed by the component. */
-  @State() private _displayValue: string;
+  @state() private _displayValue: string;
 
   /**
    * @deprecated only used for React. Will probably be removed once React 19 is available.
    */
-  @Event({ bubbles: true, cancelable: true }) public didChange: EventEmitter;
+  private _didChange: EventEmitter = new EventEmitter(this, events.didChange);
 
-  @Event({ bubbles: true }) public change: EventEmitter;
+  private _change: EventEmitter = new EventEmitter(this, events.change);
 
-  @Event({ bubbles: true, composed: true }) public input: EventEmitter;
+  private _input: EventEmitter = new EventEmitter(this, events.input);
 
   /** @internal */
-  @Event({ bubbles: true, eventName: 'state-change' })
-  public stateChange: EventEmitter<SelectChange>;
+  private _stateChange: EventEmitter<SelectChange> = new EventEmitter(this, events.stateChange, {
+    composed: false,
+  });
 
   /** Emits whenever the select starts the opening transition. */
-  @Event({
-    bubbles: true,
-    composed: true,
-    eventName: 'will-open',
-  })
-  public willOpen: EventEmitter<void>;
+  private _willOpen: EventEmitter<void> = new EventEmitter(this, events.willOpen);
 
   /** Emits whenever the select is opened. */
-  @Event({
-    bubbles: true,
-    composed: true,
-    eventName: 'did-open',
-  })
-  public didOpen: EventEmitter<void>;
+  private _didOpen: EventEmitter<void> = new EventEmitter(this, events.didOpen);
 
   /** Emits whenever the select begins the closing transition. */
-  @Event({
-    bubbles: true,
-    composed: true,
-    eventName: 'will-close',
-  })
-  public willClose: EventEmitter<void>;
+  private _willClose: EventEmitter<void> = new EventEmitter(this, events.willClose);
 
   /** Emits whenever the select is closed. */
-  @Event({
-    bubbles: true,
-    composed: true,
-    eventName: 'did-close',
-  })
-  public didClose: EventEmitter<void>;
+  private _didClose: EventEmitter<void> = new EventEmitter(this, events.didClose);
 
   private _overlay: HTMLElement;
   private _optionContainer: HTMLElement;
@@ -123,6 +113,7 @@ export class SbbSelect implements ComponentInterface {
   private _searchString = '';
   private _didLoad = false;
   private _isPointerDownEventOnMenu: boolean;
+  private _abort = new ConnectedAbortController(this);
 
   /**
    * On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
@@ -131,48 +122,47 @@ export class SbbSelect implements ComponentInterface {
   private _ariaRoleOnHost = isSafari();
 
   /** Gets all the HTMLSbbOptionElement projected in the select. */
-  private get _options(): HTMLSbbOptionElement[] {
-    return Array.from(this._element.querySelectorAll('sbb-option')) as HTMLSbbOptionElement[];
+  private get _options(): SbbOption[] {
+    return Array.from(this.querySelectorAll('sbb-option'));
   }
 
-  private get _filteredOptions(): HTMLSbbOptionElement[] {
+  private get _filteredOptions(): SbbOption[] {
     return this._options.filter(
-      (opt: HTMLSbbOptionElement) =>
+      (opt: SbbOption) =>
         !isValidAttribute(opt, 'disabled') && !isValidAttribute(opt, 'data-group-disabled'),
     );
   }
 
   /** Opens the selection panel. */
-  @Method() public async open(): Promise<void> {
+  public open(): void {
     if (this._state !== 'closed' || !this._overlay || this._options.length === 0) {
       return;
     }
 
     this._state = 'opening';
-    this.willOpen.emit();
+    this._willOpen.emit();
     this._setOverlayPosition();
   }
 
   /** Closes the selection panel. */
-  @Method() public async close(): Promise<void> {
+  public close(): void {
     if (this._state !== 'opened') {
       return;
     }
 
     this._state = 'closing';
-    this.willClose.emit();
+    this._willClose.emit();
     this._openPanelEventsController.abort();
   }
 
   /** Gets the current displayed value. */
-  @Method() public async getDisplayValue(): Promise<string> {
+  public getDisplayValue(): string {
     return !this._displayValue ? '' : this._displayValue;
   }
 
   /** Listens to option changes. */
-  @Listen('option-selection-change')
-  public onOptionChanged(event: CustomEvent): void {
-    const target: HTMLSbbOptionElement = event.target as HTMLSbbOptionElement;
+  private _onOptionChanged(event: Event): void {
+    const target = event.target as SbbOption;
     if (target.selected) {
       this._onOptionSelected(target);
     } else {
@@ -180,20 +170,18 @@ export class SbbSelect implements ComponentInterface {
     }
   }
 
-  @Listen('click')
-  public async onOptionClick(event): Promise<void> {
+  private _onOptionClick(event): void {
     if (event.target?.tagName !== 'SBB-OPTION' || event.target.disabled) {
       return;
     }
 
     if (!this.multiple) {
-      await this.close();
+      this.close();
     }
   }
 
   /** Sets the _displayValue by checking the internal sbb-options and setting the correct `selected` value on them. */
-  @Watch('value')
-  public onValueChanged(newValue: string | string[]): void {
+  private _onValueChanged(newValue: string | string[]): void {
     if (!Array.isArray(newValue)) {
       const optionElement = this._filteredOptions.find((e) => e.value === newValue);
       if (optionElement) {
@@ -213,21 +201,22 @@ export class SbbSelect implements ComponentInterface {
       selectedOptionElements.forEach((e) => (e.selected = true));
       this._displayValue = selectedOptionElements.map((e) => e.textContent).join(', ') || null;
     }
-    this.stateChange.emit({ type: 'value', value: newValue });
+    this._stateChange.emit({ type: 'value', value: newValue });
   }
 
-  public componentDidLoad(): void {
+  protected override firstUpdated(): void {
     this._setupOrigin();
     this._setupTrigger();
 
     // Override the default focus behavior
-    this._element.focus = () => this._triggerElement.focus();
+    this.focus = () => this._triggerElement.focus();
     this._didLoad = true;
   }
 
-  public connectedCallback(): void {
-    const formField =
-      this._element.closest('sbb-form-field') ?? this._element.closest('[data-form-field]');
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    const signal = this._abort.signal;
+    const formField = this.closest('sbb-form-field') ?? this.closest('[data-form-field]');
 
     if (formField) {
       this.negative = isValidAttribute(formField, 'negative');
@@ -239,36 +228,45 @@ export class SbbSelect implements ComponentInterface {
       this._setupTrigger();
     }
     if (this.value) {
-      this.onValueChanged(this.value);
+      this._onValueChanged(this.value);
+    }
+
+    this.addEventListener('option-selection-change', (e) => this._onOptionChanged(e), { signal });
+    this.addEventListener('click', (e) => this._onOptionClick(e), { signal });
+    this.addEventListener('click', () => this._toggleOpening(), { signal });
+  }
+
+  public override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('value')) {
+      this._onValueChanged(this.value);
+    }
+    if (changedProperties.has('negative')) {
+      this._syncNegative();
     }
   }
 
-  public disconnectedCallback(): void {
-    this._element.prepend(this._triggerElement); // Take back the trigger element previously moved to the light DOM
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.prepend(this._triggerElement); // Take back the trigger element previously moved to the light DOM
     this._openPanelEventsController?.abort();
   }
 
-  @Watch('negative')
   private _syncNegative(): void {
-    this._element
-      .querySelectorAll('sbb-divider')
-      .forEach((element) =>
-        this.negative ? element.setAttribute('negative', '') : element.removeAttribute('negative'),
-      );
+    this.querySelectorAll('sbb-divider').forEach((element) => (element.negative = this.negative));
 
-    this._element
-      .querySelectorAll('sbb-option, sbb-optgroup')
-      .forEach((element: HTMLElement) => toggleDatasetEntry(element, 'negative', this.negative));
+    this.querySelectorAll('sbb-option, sbb-optgroup').forEach((element: SbbOption | SbbOptGroup) =>
+      toggleDatasetEntry(element, 'negative', this.negative),
+    );
   }
 
   /** Sets the originElement; if the component is used in a sbb-form-field uses it, otherwise uses the parentElement. */
   private _setupOrigin(): void {
-    const formField = this._element.closest('sbb-form-field');
+    const formField = this.closest('sbb-form-field');
     this._originElement =
-      formField?.shadowRoot.querySelector('#overlay-anchor') || this._element.parentElement;
+      formField?.shadowRoot.querySelector('#overlay-anchor') || this.parentElement;
     if (this._originElement) {
       toggleDatasetEntry(
-        this._element,
+        this,
         'optionPanelOriginBorderless',
         formField?.hasAttribute('borderless'),
       );
@@ -281,17 +279,17 @@ export class SbbSelect implements ComponentInterface {
    */
   private _setupTrigger(): void {
     // Move the trigger before the sbb-select
-    this._element.parentElement.insertBefore(this._triggerElement, this._element);
+    this.parentElement.insertBefore(this._triggerElement, this);
 
     // Set the invisible trigger element dimension to match the parent (needed for screen readers)
-    const containerElement = this._element.closest('sbb-form-field') ?? this._element;
+    const containerElement = this.closest('sbb-form-field') ?? this;
     this._triggerElement.style.top = '0px';
     this._triggerElement.style.height = `${containerElement.offsetHeight}px`;
     this._triggerElement.style.width = `${containerElement.offsetWidth}px`;
   }
 
   private _setOverlayPosition(): void {
-    setOverlayPosition(this._overlay, this._originElement, this._optionContainer, this._element);
+    setOverlayPosition(this._overlay, this._originElement, this._optionContainer, this);
   }
 
   // In rare cases it can be that the animationEnd event is triggered twice.
@@ -309,7 +307,7 @@ export class SbbSelect implements ComponentInterface {
     this._attachOpenPanelEvents();
     this._triggerElement.setAttribute('aria-expanded', 'true');
 
-    this.didOpen.emit();
+    this._didOpen.emit();
   }
 
   private _onCloseAnimationEnd(): void {
@@ -317,11 +315,11 @@ export class SbbSelect implements ComponentInterface {
     this._triggerElement.setAttribute('aria-expanded', 'false');
     this._resetActiveElement();
     this._optionContainer.scrollTop = 0;
-    this.didClose.emit();
+    this._didClose.emit();
   }
 
   /** When an option is selected, updates the displayValue; it also closes the select if not `multiple`. */
-  private _onOptionSelected(optionSelectionChange: HTMLSbbOptionElement): void {
+  private _onOptionSelected(optionSelectionChange: SbbOption): void {
     if (!this.multiple) {
       this._filteredOptions
         .filter((option) => option.id !== optionSelectionChange.id)
@@ -335,21 +333,21 @@ export class SbbSelect implements ComponentInterface {
       }
     }
 
-    this.input.emit();
-    this.change.emit();
-    this.didChange.emit();
+    this._input.emit();
+    this._change.emit();
+    this._didChange.emit();
   }
 
   /** When an option is unselected in `multiple`, removes it from value and updates displayValue. */
-  private _onOptionDeselected(optionSelectionChange: HTMLSbbOptionElement): void {
+  private _onOptionDeselected(optionSelectionChange: SbbOption): void {
     if (this.multiple) {
       this.value = (this.value as string[]).filter(
         (el: string) => el !== optionSelectionChange.value,
       );
 
-      this.input.emit();
-      this.change.emit();
-      this.didChange.emit();
+      this._input.emit();
+      this._change.emit();
+      this._didChange.emit();
     }
   }
 
@@ -467,13 +465,13 @@ export class SbbSelect implements ComponentInterface {
 
     // Reorder the _filteredOption array to have the last selected element at the bottom.
     const indexForSlice: number = this._activeItemIndex + 1;
-    const filteredOptionsSorted: HTMLSbbOptionElement[] = [
+    const filteredOptionsSorted: SbbOption[] = [
       ...this._filteredOptions.slice(indexForSlice),
       ...this._filteredOptions.slice(0, indexForSlice),
     ];
 
-    const match: HTMLSbbOptionElement = filteredOptionsSorted.find(
-      (option: HTMLSbbOptionElement) =>
+    const match: SbbOption = filteredOptionsSorted.find(
+      (option: SbbOption) =>
         option.textContent.toLowerCase().indexOf(this._searchString.toLowerCase()) === 0,
     );
     if (match) {
@@ -485,8 +483,8 @@ export class SbbSelect implements ComponentInterface {
     ) {
       // If no exact match has been found but the string to search is made by the same repeated letter,
       // go to the first element, if exists, that matches the letter.
-      const firstMatch: HTMLSbbOptionElement = filteredOptionsSorted.find(
-        (option: HTMLSbbOptionElement) =>
+      const firstMatch: SbbOption = filteredOptionsSorted.find(
+        (option: SbbOption) =>
           option.textContent.toLowerCase().indexOf(this._searchString[0].toLowerCase()) === 0,
       );
       if (firstMatch) {
@@ -500,7 +498,7 @@ export class SbbSelect implements ComponentInterface {
   }
 
   private async _selectByKeyboard(): Promise<void> {
-    const activeOption: HTMLSbbOptionElement = this._filteredOptions[this._activeItemIndex];
+    const activeOption: SbbOption = this._filteredOptions[this._activeItemIndex];
 
     if (this.multiple) {
       await activeOption.setSelectedViaUserInteraction(!activeOption.selected);
@@ -526,8 +524,8 @@ export class SbbSelect implements ComponentInterface {
   }
 
   private _setActiveElement(
-    nextActiveOption: HTMLSbbOptionElement,
-    lastActiveOption: HTMLSbbOptionElement = null,
+    nextActiveOption: SbbOption,
+    lastActiveOption: SbbOption = null,
     setActiveDescendant = true,
   ): void {
     nextActiveOption.active = true;
@@ -544,8 +542,8 @@ export class SbbSelect implements ComponentInterface {
   }
 
   private async _setSelectedElement(
-    nextActiveOption: HTMLSbbOptionElement,
-    lastActiveOption: HTMLSbbOptionElement,
+    nextActiveOption: SbbOption,
+    lastActiveOption: SbbOption,
   ): Promise<void> {
     await nextActiveOption.setSelectedViaUserInteraction(true);
 
@@ -605,11 +603,11 @@ export class SbbSelect implements ComponentInterface {
 
     switch (this._state) {
       case 'opened': {
-        await this.close();
+        this.close();
         break;
       }
       case 'closed': {
-        await this.open();
+        this.open();
         break;
       }
       default:
@@ -617,68 +615,68 @@ export class SbbSelect implements ComponentInterface {
     }
   }
 
-  public render(): JSX.Element {
-    return (
-      <Host
-        data-state={this._state}
-        data-multiple={this.multiple}
-        role={this._ariaRoleOnHost ? 'listbox' : null}
-        ref={this._ariaRoleOnHost && assignId(() => this._overlayId)}
-        onClick={() => this._toggleOpening()}
-        dir={getDocumentWritingMode()}
+  protected override render(): TemplateResult {
+    setAttribute(this, 'data-state', this._state);
+    setAttribute(this, 'data-multiple', this.multiple);
+    setAttribute(this, 'role', this._ariaRoleOnHost ? 'listbox' : null);
+    setAttribute(this, 'dir', getDocumentWritingMode());
+    this._ariaRoleOnHost && assignId(() => this._overlayId)(this);
+
+    return html`
+      <!-- This element is visually hidden and will be appended to the light DOM to allow screen
+      readers to work properly -->
+      <div
+        class="sbb-screen-reader-only sbb-select-invisible-trigger"
+        tabindex=${this.disabled ? nothing : '0'}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded="false"
+        aria-required=${this.required.toString()}
+        aria-controls=${this._overlayId}
+        aria-owns=${this._overlayId}
+        ${ref((ref) => (this._triggerElement = ref as HTMLElement))}
+        @keydown=${this._onKeyDown}
+        @click=${this._toggleOpening}
       >
-        {/* This element is visually hidden and will be appended to the light DOM to allow screen readers to work properly */}
+        ${this._displayValue ? html`${this._displayValue}` : html`<span>${this.placeholder}</span>`}
+      </div>
+
+      <!-- Visually display the value -->
+      <div class="sbb-select__trigger" aria-hidden="true">
+        ${this._displayValue
+          ? html`${this._displayValue}`
+          : html`<span class="sbb-select__trigger--placeholder">${this.placeholder}</span>`}
+      </div>
+
+      <div class="sbb-select__gap-fix"></div>
+      <div class="sbb-select__container">
+        <div class="sbb-select__gap-fix">${overlayGapFixCorners()}</div>
         <div
-          class="sbb-screen-reader-only sbb-select-invisible-trigger"
-          tabindex={this.disabled ? null : '0'}
-          role="combobox"
-          aria-haspopup="listbox"
-          aria-expanded="false"
-          aria-required={this.required.toString()}
-          aria-controls={this._overlayId}
-          aria-owns={this._overlayId}
-          ref={(ref) => (this._triggerElement = ref)}
-          onKeyDown={(event) => this._onKeyDown(event)}
-          onClick={() => this._toggleOpening()}
+          @animationend=${this._onAnimationEnd}
+          class="sbb-select__panel"
+          ?data-open=${this._state === 'opened' || this._state === 'opening'}
+          ${ref((dialogRef) => (this._overlay = dialogRef as HTMLElement))}
         >
-          {this._displayValue ?? <span>{this.placeholder}</span>}
-        </div>
-
-        {/* Visually display the value */}
-        <div class="sbb-select__trigger" aria-hidden="true">
-          {this._displayValue ?? (
-            <span class="sbb-select__trigger--placeholder">{this.placeholder}</span>
-          )}
-        </div>
-
-        <div class="sbb-select__gap-fix"></div>
-        <div class="sbb-select__container">
-          <div class="sbb-select__gap-fix">{overlayGapFixCorners()}</div>
-          <div
-            onAnimationEnd={(event: AnimationEvent) => this._onAnimationEnd(event)}
-            class="sbb-select__panel"
-            data-open={this._state === 'opened' || this._state === 'opening'}
-            ref={(dialogRef) => (this._overlay = dialogRef)}
-          >
-            <div class="sbb-select__wrapper">
-              <div
-                id={!this._ariaRoleOnHost ? this._overlayId : null}
-                class="sbb-select__options"
-                role={!this._ariaRoleOnHost ? 'listbox' : null}
-                aria-multiselectable={this.multiple}
-                ref={(containerRef) => (this._optionContainer = containerRef)}
-              >
-                <slot
-                  onSlotchange={(): void => {
-                    this._syncNegative();
-                    this._setValueFromSelectedOption();
-                  }}
-                ></slot>
-              </div>
+          <div class="sbb-select__wrapper">
+            <div
+              id=${!this._ariaRoleOnHost ? this._overlayId : nothing}
+              class="sbb-select__options"
+              role=${!this._ariaRoleOnHost ? 'listbox' : nothing}
+              ?aria-multiselectable=${this.multiple}
+              ${ref((containerRef) => (this._optionContainer = containerRef as HTMLElement))}
+            >
+              <slot @slotchange=${this._setValueFromSelectedOption}></slot>
             </div>
           </div>
         </div>
-      </Host>
-    );
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-select': SbbSelect;
   }
 }
diff --git a/src/components/sbb-toast/sbb-toast.tsx b/src/components/sbb-toast/sbb-toast.tsx
index e7918eb338..bc6d321118 100644
--- a/src/components/sbb-toast/sbb-toast.tsx
+++ b/src/components/sbb-toast/sbb-toast.tsx
@@ -16,6 +16,8 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { setAttribute } from '../../global/dom';
 import Style from './sbb-toast.scss?lit&inline';
 import { SbbOverlayState } from '../../global/overlay';
+import { SbbButton } from '../sbb-button';
+import { SbbLink } from '../sbb-link';
 import '../sbb-link';
 import '../sbb-button';
 
@@ -203,8 +205,7 @@ export class SbbToast extends LitElement {
     // Force the visual state on slotted buttons
     slotNodes
       .filter((el) => el.nodeName === 'SBB-BUTTON')
-      .forEach((btn: any) => {
-        // TODO-Migr: use SbbButton once the button is migrated
+      .forEach((btn: SbbButton) => {
         btn.variant = 'transparent';
         btn.negative = true;
         btn.size = 'm';
@@ -213,8 +214,7 @@ export class SbbToast extends LitElement {
     // Force the visual state on slotted links
     slotNodes
       .filter((el) => el.nodeName === 'SBB-LINK')
-      .forEach((link: any) => {
-        // TODO-Migr: use SbbLink once the button is migrated
+      .forEach((link: SbbLink) => {
         link.variant = 'inline';
         link.negative = true;
       });
diff --git a/src/components/sbb-toggle/sbb-toggle.spec.ts b/src/components/sbb-toggle/sbb-toggle.spec.ts
index f8ffec6024..ec3ffc2572 100644
--- a/src/components/sbb-toggle/sbb-toggle.spec.ts
+++ b/src/components/sbb-toggle/sbb-toggle.spec.ts
@@ -37,7 +37,6 @@ describe('sbb-toggle', () => {
       `);
       option = page.querySelectorAll('sbb-toggle-option')[1];
 
-      await waitForLitRender(option);
       await waitForLitRender(page);
 
       expect(option).to.have.attribute('checked');
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index 64f27e424a..4a41d3f43e 100644
--- a/web-test-runner.config.js
+++ b/web-test-runner.config.js
@@ -8,7 +8,7 @@ import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 import * as sass from 'sass';
 
-const isCIEnvironment = !!process.env.CI;
+const isCIEnvironment = !!process.env.CI || process.argv.includes('--ci');
 const isDebugMode = process.argv.includes('--debug');
 
 const globalCss = sass.compile('./src/global/styles/global.scss', { loadPaths: ['.'] });