diff --git a/.eslintrc b/.eslintrc
index 2ad5e540..8f755f8c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -76,6 +76,7 @@
             "ignoreJSX": "all"
         }],
         "react/jsx-indent-props": [2, 4],
+        "react/jsx-no-bind": "off",
         "react/jsx-indent": [2, 4],
 
         // airbnb-overrides
diff --git a/config/jest/setup-tests.ts b/config/jest/setup-tests.ts
index 3af4335b..e495609f 100644
--- a/config/jest/setup-tests.ts
+++ b/config/jest/setup-tests.ts
@@ -1,5 +1,9 @@
 import '@testing-library/jest-dom'
 
+// Makeup-js uses these methods, but they are not implemented in jsdom
+Element.prototype.scrollIntoView = jest.fn();
+Element.prototype.scroll = jest.fn();
+
 if (typeof window.URL.createObjectURL === 'undefined') {
   Object.defineProperty(window.URL, 'createObjectURL', { value: () => {} });
 }
diff --git a/package.json b/package.json
index cd9e1e24..aa053c45 100644
--- a/package.json
+++ b/package.json
@@ -128,9 +128,12 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "makeup-expander": "^0.10.1",
+    "makeup-active-descendant": "^0.7.3",
+    "makeup-expander": "^0.11.3",
     "makeup-keyboard-trap": "^0.4.1",
+    "makeup-prevent-scroll-keys": "^0.3.2",
     "makeup-screenreader-trap": "^0.4.1",
+    "makeup-typeahead": "^0.3.2",
     "react-remove-scroll": "^2.2.0"
   },
   "devDependencies": {
diff --git a/src/ebay-listbox-button/__tests__/index.spec.tsx b/src/ebay-listbox-button/__tests__/index.spec.tsx
index 8e9bce8a..5369299f 100644
--- a/src/ebay-listbox-button/__tests__/index.spec.tsx
+++ b/src/ebay-listbox-button/__tests__/index.spec.tsx
@@ -1,5 +1,8 @@
+/// <reference types="@testing-library/jest-dom" />
+
 import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { eventOfType } from '../../common/event-utils/__tests__/helpers'
 import { EbayListboxButton, EbayListboxButtonOption } from '..'
 
@@ -20,7 +23,7 @@ describe('<EbayListboxButton>', () => {
                 </>
             )
             const buttonElement = screen.getByRole('button')
-            const expandBtnTextId = screen.getByText('Option 2').id
+            const expandBtnTextId = screen.getAllByText('Option 2')[0].id
 
             return { buttonElement, expandBtnTextId }
         }
@@ -115,7 +118,7 @@ describe('<EbayListboxButton>', () => {
 
         describe('when the button is clicked', () => {
             beforeEach(async () => {
-                await fireEvent.click(screen.getByRole('button'))
+                await userEvent.click(screen.getByRole('button'))
             })
             it('then it has expanded the listbox', () => {
                 expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', `true`)
@@ -130,12 +133,12 @@ describe('<EbayListboxButton>', () => {
             })
             describe('when the button is clicked again', () => {
                 beforeEach(async () => {
-                    await fireEvent.click(screen.getByRole('button'))
+                    await userEvent.click(screen.getByRole('button'))
                 })
                 it('then it has collapsed the listbox', () => {
                     expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', `false`)
                 })
-                xit('focus should move to button', () => {
+                it('focus should move to button', () => {
                     const button = screen.getByRole('button')
                     jest.runAllTimers()
                     expect(button).toHaveFocus()
@@ -154,10 +157,14 @@ describe('<EbayListboxButton>', () => {
                     <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
                 </EbayListboxButton>
             )
-            fireEvent.click(screen.getByRole('button'))
+            act(() => {
+                userEvent.click(screen.getByRole('button'))
+            })
+            
             const index = 0
-            fireEvent.mouseDown(screen.getAllByRole('option')[index])
-            fireEvent.click(screen.getAllByRole('option')[index])
+            act(() => {
+                userEvent.click(screen.getAllByRole('option')[index])
+            })
 
             expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index, selected: ['AA'], wasClicked: true })
         })
@@ -171,18 +178,24 @@ describe('<EbayListboxButton>', () => {
                     <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
                 </EbayListboxButton>
             )
-            fireEvent.click(screen.getByRole('button'))
 
-            fireEvent.mouseDown(screen.getAllByRole('option')[0])
-            fireEvent.click(screen.getAllByRole('option')[0])
+            act(() => {
+                userEvent.click(screen.getByRole('button'))
+                userEvent.click(screen.getAllByRole('option')[0])
+            })
+            
             expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index: 0, selected: ['AA'], wasClicked: true })
 
-            fireEvent.mouseDown(screen.getAllByRole('option')[1])
-            fireEvent.click(screen.getAllByRole('option')[1])
+            act(() => {
+                userEvent.click(screen.getAllByRole('option')[1])
+            })
+            
             expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index: 1, selected: ['BB'], wasClicked: true })
 
-            fireEvent.mouseDown(screen.getAllByRole('option')[2])
-            fireEvent.click(screen.getAllByRole('option')[2])
+            act(() => {
+                userEvent.click(screen.getAllByRole('option')[2])
+            })
+            
             expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index: 2, selected: ['CC'], wasClicked: true })
         })
     })
@@ -196,7 +209,10 @@ describe('<EbayListboxButton>', () => {
                     <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
                 </EbayListboxButton>
             )
-            fireEvent.click(screen.getByRole('button'))
+
+            act(() => {
+                userEvent.click(screen.getByRole('button'))
+            })
 
             expect(spy).toHaveBeenCalledWith()
         })
@@ -212,8 +228,11 @@ describe('<EbayListboxButton>', () => {
                 </EbayListboxButton>
             )
             const button = screen.getByRole('button')
-            fireEvent.click(button)
-            fireEvent.click(button)
+
+            act(() => {
+                userEvent.click(button)
+                userEvent.click(button)
+            })
 
             expect(spy).toHaveBeenCalledWith()
         })
diff --git a/src/ebay-listbox-button/__tests__/index.stories.tsx b/src/ebay-listbox-button/__tests__/index.stories.tsx
index 73eec4e1..8898a1eb 100644
--- a/src/ebay-listbox-button/__tests__/index.stories.tsx
+++ b/src/ebay-listbox-button/__tests__/index.stories.tsx
@@ -13,9 +13,9 @@ export const Default = () => (
     <>
         <EbayListboxButton
             value="BB"
-            onChange={(e: ChangeEvent, props: ChangeEventProps) => action('onChange')(e, props)}
-            onCollapse={() => action('onCollapse')()}
-            onExpand={() => action('onExpand')()}
+            onChange={action('onChange')}
+            onCollapse={action('onCollapse')}
+            onExpand={action('onExpand')}
         >
             <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
             <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
@@ -37,7 +37,7 @@ export const PreselectedIndex = () => (
 export const DefaultNoSelectedOption = () => (
     <>
         <EbayListboxButton
-            onChange={(e: ChangeEvent, props: ChangeEventProps) => action('onChange')(e, props)}
+            onChange={(e: ChangeEvent, props?: ChangeEventProps) => action('onChange')(e, props)}
         >
             <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
             <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
@@ -143,7 +143,7 @@ export const TooManyOptions = () => (
             <EbayListboxButtonOption value="VV">Option 22</EbayListboxButtonOption>
             <EbayListboxButtonOption value="YY">Option 23</EbayListboxButtonOption>
             <EbayListboxButtonOption value="XX">Option 24</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="YY">Option 25</EbayListboxButtonOption>
+            <EbayListboxButtonOption value="WW">Option 25</EbayListboxButtonOption>
             <EbayListboxButtonOption value="ZZ">Option 26</EbayListboxButtonOption>
             <EbayListboxButtonOption value="11">Option 27</EbayListboxButtonOption>
             <EbayListboxButtonOption value="22">Option 28</EbayListboxButtonOption>
@@ -157,7 +157,7 @@ export const TooManyOptions = () => (
             <EbayListboxButtonOption value="100">Option 36</EbayListboxButtonOption>
             <EbayListboxButtonOption value="101">Option 37</EbayListboxButtonOption>
             <EbayListboxButtonOption value="102">Option 38</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="102">Option 39</EbayListboxButtonOption>
+            <EbayListboxButtonOption value="103">Option 39</EbayListboxButtonOption>
         </EbayListboxButton>
     </>
 )
diff --git a/src/ebay-listbox-button/__tests__/render.spec.tsx b/src/ebay-listbox-button/__tests__/render.spec.tsx
index ff4388d3..f808471b 100644
--- a/src/ebay-listbox-button/__tests__/render.spec.tsx
+++ b/src/ebay-listbox-button/__tests__/render.spec.tsx
@@ -1,3 +1,5 @@
+/// <reference types="@testing-library/jest-dom" />
+
 import React from 'react'
 import { render, within } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
@@ -19,7 +21,7 @@ describe('ebay-listbox-button rendering', () => {
     it('renders default listbox button correctly', () => {
         const { container } = render(<Default />)
 
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
+        const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
         const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
         expect(button).toHaveClass('btn btn--form')
         expect(button).toHaveAttribute('aria-expanded', 'false')
@@ -27,7 +29,7 @@ describe('ebay-listbox-button rendering', () => {
         expect(button).toHaveAttribute('type', 'button')
         expect(button.querySelector('svg')).toMatchSnapshot()
 
-        const select = listboxButton.querySelector('select')
+        const select = listboxButton.querySelector('select') as HTMLElement
         expect(select).toHaveClass('listbox-button__native')
         expect(select).toHaveAttribute('hidden', '')
 
@@ -40,7 +42,7 @@ describe('ebay-listbox-button rendering', () => {
     it('renders preselected index correctly', () => {
         const { container } = render(<PreselectedIndex />)
 
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
+        const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
         const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
         expect(button).toHaveClass('btn btn--form')
         expect(button).toHaveAttribute('aria-expanded', 'false')
@@ -52,7 +54,7 @@ describe('ebay-listbox-button rendering', () => {
     it('renders default listbox button without selected option correctly', () => {
         const { container } = render(<DefaultNoSelectedOption />)
 
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
+        const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
         const button = within(listboxButton).getByRole('button', { name: '-' })
         expect(button).toHaveClass('btn btn--form')
         expect(button).toHaveAttribute('aria-expanded', 'false')
@@ -64,7 +66,7 @@ describe('ebay-listbox-button rendering', () => {
     it('renders borderless listbox button correctly', () => {
         const { container } = render(<Borderless />)
 
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
+        const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
         const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
         expect(button).toHaveClass('btn btn--borderless')
         expect(button).toHaveAttribute('aria-expanded', 'false')
@@ -76,7 +78,7 @@ describe('ebay-listbox-button rendering', () => {
     it('renders fluid listbox button correctly', () => {
         const { container } = render(<Fluid />)
 
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
+        const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
         expect(listboxButton).toHaveClass('listbox-button--fluid')
         const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
         expect(button).toHaveClass('btn btn--form')
@@ -89,11 +91,10 @@ describe('ebay-listbox-button rendering', () => {
     it('renders disabled state correctly', () => {
         const { container } = render(<DisabledState />)
 
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
+        const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
         const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
         expect(button).toHaveClass('btn btn--form')
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).toHaveAttribute('aria-haspopup', 'listbox')
+
         expect(button).toHaveAttribute('type', 'button')
         expect(button).toHaveAttribute('disabled')
         expect(button.querySelector('svg')).toMatchSnapshot()
@@ -102,7 +103,7 @@ describe('ebay-listbox-button rendering', () => {
     it('renders invalid state correctly', () => {
         const { container } = render(<InvalidState />)
 
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
+        const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
         const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
         expect(button).toHaveClass('btn btn--form')
         expect(button).toHaveAttribute('aria-expanded', 'false')
@@ -115,7 +116,7 @@ describe('ebay-listbox-button rendering', () => {
     it('renders prefix label correctly', () => {
         const { container } = render(<PrefixLabel />)
 
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
+        const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
         const button = within(listboxButton).getByRole('button', { name: 'Selected: Option 2' })
         expect(button).toHaveClass('btn btn--form')
         expect(button).toHaveAttribute('aria-expanded', 'false')
@@ -127,7 +128,7 @@ describe('ebay-listbox-button rendering', () => {
     it('renders floating label correctly', () => {
         const { container } = render(<FloatingLabel />)
 
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
+        const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
         const button = within(listboxButton).getByRole('button')
         expect(button).toHaveClass('btn btn--form')
         expect(button).toHaveAttribute('aria-expanded', 'false')
diff --git a/src/ebay-listbox-button/index.ts b/src/ebay-listbox-button/index.ts
index 79c10b05..679fd414 100644
--- a/src/ebay-listbox-button/index.ts
+++ b/src/ebay-listbox-button/index.ts
@@ -1,2 +1 @@
-export { default as EbayListboxButton } from './listbox-button'
-export { default as EbayListboxButtonOption } from './listbox-button-option'
+export * from './listbox-button'
diff --git a/src/ebay-listbox-button/listbox-button-option.tsx b/src/ebay-listbox-button/listbox-button-option.tsx
deleted file mode 100644
index 814c2244..00000000
--- a/src/ebay-listbox-button/listbox-button-option.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { ComponentProps, FC, MouseEvent, RefObject } from 'react'
-import classNames from 'classnames'
-import { EbayIcon } from '../ebay-icon'
-
-type EbayListboxButtonOptionProps = ComponentProps<'input'> & {
-    selected?: boolean;
-    index?: number;
-    onClick?: (event: MouseEvent<HTMLDivElement>, value: any, index: number) => void;
-    innerRef?: RefObject<HTMLDivElement>;
-};
-
-const ListboxOption: FC<EbayListboxButtonOptionProps> = ({
-    value,
-    children,
-    selected,
-    onClick,
-    index,
-    innerRef,
-    className,
-    id,
-    ...rest
-}) => {
-    const wrapperClassName = classNames(`listbox-button__option`, className,
-        { 'listbox-button__option--active': selected })
-    return (
-        <div
-            {...rest}
-            className={wrapperClassName}
-            role="option"
-            id={id || `listbox_btn_${value}_${index}`}
-            aria-selected={selected}
-            ref={innerRef}
-            onClick={(e) => {onClick(e, value, index)}}
-        >
-            <span className="listbox-button__value">{children}</span>
-            <EbayIcon name="tick16" />
-        </div>)
-}
-
-export default ListboxOption
diff --git a/src/ebay-listbox-button/listbox-button.tsx b/src/ebay-listbox-button/listbox-button.tsx
index 188fbc6f..fe3d265b 100644
--- a/src/ebay-listbox-button/listbox-button.tsx
+++ b/src/ebay-listbox-button/listbox-button.tsx
@@ -1,12 +1,68 @@
 import React, {
-    Children, cloneElement, useEffect, useRef, useState,
-    ComponentProps, FC, KeyboardEvent, ReactElement, useCallback
+    ChangeEvent,
+    ComponentProps,
+    FC,
+    ReactElement,
+    useEffect,
+    useRef,
+    useState
 } from 'react'
+import Expander from 'makeup-expander'
+import * as scrollKeyPreventer from 'makeup-prevent-scroll-keys'
 import classNames from 'classnames'
+import { EbayListboxOption } from '../ebay-listbox/listbox-option'
+import { filterByType } from '../utils'
 import { EbayIcon } from '../ebay-icon'
-import { EbayChangeEventHandler, Key } from '../common/event-utils/types'
-import { filterByType } from '../common/component-utils'
-import EbayListboxButtonOption from './listbox-button-option'
+import { EbayListbox, EbayListboxProps } from '../ebay-listbox/'
+import { EbayChangeEventHandler } from '../events'
+import { EbayButtonProps } from '../ebay-button'
+
+const RenderText: FC<{
+    alwaysDisplay?: boolean,
+    icon?: ReactElement,
+    labelId?: string,
+    text?: string,
+    unselectedText?: string,
+    postfixLabel?: string
+}> = ({
+    alwaysDisplay,
+    icon,
+    labelId,
+    text,
+    unselectedText,
+    postfixLabel
+}) => {
+    if (icon) {
+        return (
+            <span id={labelId} className="btn__text">
+                {icon}
+            </span>
+        )
+    }
+
+    if (text || alwaysDisplay) {
+        const displayText = text || unselectedText
+        return (
+            <span id={labelId} className="btn__text">
+                {displayText}
+                {postfixLabel && <span className="btn__postfix-label">{postfixLabel}</span>}
+            </span>
+        )
+    }
+}
+
+
+function getSelectedValueIndex({ selected, value, options }) {
+    if (selected !== undefined) {
+        return selected
+    }
+
+    if (value !== undefined) {
+        return options.findIndex(option => option.props.value === value)
+    }
+
+    return options.findIndex(option => option.props.selected)
+}
 
 export type ChangeEventProps = {
     index: number;
@@ -14,7 +70,7 @@ export type ChangeEventProps = {
     wasClicked: boolean;
 }
 
-export type EbayListboxButtonProps = Omit<ComponentProps<'input'>, 'onChange'> & {
+export type EbayListboxButtonProps = Omit<ComponentProps<'button'>, 'onChange'> & {
     selected?: number;
     borderless?: boolean;
     fluid?: boolean;
@@ -23,298 +79,211 @@ export type EbayListboxButtonProps = Omit<ComponentProps<'input'>, 'onChange'> &
     prefixLabel?: string;
     floatingLabel?: string;
     unselectedText?: string;
-    onChange?: EbayChangeEventHandler<HTMLButtonElement, ChangeEventProps>;
+    a11yIconPrefixText?: string;
+    collapseOnSelect?: boolean;
+    hasError?: boolean;
+    listSelection?: EbayListboxProps['listSelection'];
+    postfixLabel?: string;
+    split?: EbayButtonProps['split'];
+    truncate?: EbayButtonProps['truncate'];
+    variant?: 'form';
+    onChange?: EbayChangeEventHandler<HTMLSpanElement, ChangeEventProps>;
     onCollapse?: () => void;
     onExpand?: () => void;
 }
 
-const ListboxButton: FC<EbayListboxButtonProps> = ({
-    children,
-    name,
-    value,
-    selected,
+export const EbayListboxButtonOption = EbayListboxOption
+
+export const EbayListboxButton: FC<EbayListboxButtonProps> = ({
+    'aria-invalid': invalid,
+    a11yIconPrefixText,
     borderless,
-    fluid,
+    children,
     className,
+    collapseOnSelect,
+    disabled,
+    floatingLabel,
+    fluid,
+    hasError,
+    listSelection,
     maxHeight,
+    name,
+    postfixLabel,
     prefixId,
     prefixLabel,
-    floatingLabel,
+    selected,
+    split,
+    truncate,
     unselectedText = '-',
+    value,
+    variant,
     onChange = () => {},
-    onCollapse = () => {},
     onExpand = () => {},
+    onCollapse = () => {},
     ...rest
 }) => {
-    const optionsContainerRef = useRef<HTMLDivElement>(null)
-    const optionsParentContainerRef = useRef<HTMLDivElement>()
-    const optionsByIndexRef = useRef(new Map())
+    const containerRef = useRef<HTMLDivElement & HTMLSpanElement>()
     const buttonRef = useRef<HTMLButtonElement>()
-
-    const listBoxButtonOptions = filterByType(children, EbayListboxButtonOption)
-    if (!listBoxButtonOptions.length) {
-        throw new Error(`EbayListboxButton: Please use a
-        EbayListboxButtonOption that defines the options of the listbox`)
-    }
-    const getInitialSelectedOption = (): { option: any, index: number } => {
-        const selectedIndex = selected !== undefined ? selected : listBoxButtonOptions.findIndex(({ props }) =>
-            value !== undefined && props.value === value)
-        const index = selectedIndex > -1 || floatingLabel ? selectedIndex : undefined
-        return {
-            option: listBoxButtonOptions[index],
-            index
-        }
-    }
-
-    // Get the default Selected value and set it in the state
-    const {
-        option: selectedOptionFromValue,
-        index: initialSelectedOptionIndex
-    } = getInitialSelectedOption()
-    // Update the selected option to the state
-    const [selectedOption, setSelectedOption] = useState(selectedOptionFromValue)
-    const [selectedIndex, setSelectedIndex] = useState(initialSelectedOptionIndex)
-    // Update the expanded status to the state
-    const [expanded, setExpanded] = useState<boolean|undefined>()
-    // Additional flag to avoid multiple re-render when users tries to open and close
-    const [optionsOpened, setOptionsOpened] = useState(false)
-    const [wasClicked, setWasClicked] = useState<boolean>()
+    const expanderRef = useRef<Expander>()
+    const options = filterByType(children, EbayListboxOption)
+    const [selectedIndex, setSelectedIndex] = useState(getSelectedValueIndex({ selected, value, options }))
+    const selectedOption = options[selectedIndex]
+    const selectedText = selectedOption && (selectedOption.props.text || selectedOption.props.children)
+    const selectedIcon = selectedOption && selectedOption.props.icon
+    const a11ySelectedIconText =
+        selectedIcon && selectedText
+    const labelId = prefixId && 'expand-btn-text'
 
     useEffect(() => {
-        setSelectedOption(selectedOptionFromValue)
-    }, [value])
+        setSelectedIndex(getSelectedValueIndex({ selected, value, options }))
+    }, [value, selected])
 
-    const childrenArray = Children.toArray(children) as ReactElement[]
-    const getSelectedValueByIndex = (index: number) => childrenArray[index].props.value
-    const getIndexByValue = useCallback((selectedValue) =>
-        childrenArray.findIndex(({ props }) => props.value === selectedValue), [childrenArray])
-    const getSelectedOption = (currentIndex: number) => optionsByIndexRef.current.get(currentIndex)
-    const setActiveDescendant = (index: number) => {
-        const optionsContainerEle = optionsContainerRef.current
-        optionsContainerEle?.setAttribute(`aria-activedescendant`, getSelectedOption(index).id)
-    }
+    useEffect(() => {
+        function handleExpand() {
+            containerRef.current?.querySelector('.listbox-button__listbox')?.scroll()
+            onExpand()
+        }
 
-    const collapseListbox = () => {
-        setExpanded(false)
-        onCollapse()
-    }
+        function handleCollapse() {
+            requestAnimationFrame(() => {
+                buttonRef.current?.focus()
+            })
+            onCollapse()
+        }
 
-    const expandListbox = () => {
-        setExpanded(true)
-        onExpand()
-    }
+        if (options.length && !disabled) {
+            expanderRef.current = new Expander(containerRef.current, {
+                alwaysDoFocusManagement: true,
+                autoCollapse: true,
+                expandOnClick: true,
+                simulateSpacebarClick: true,
+                contentSelector: '.listbox-button__listbox',
+                hostSelector: '.listbox-button__control',
+                expandedClass: 'listbox-button--expanded',
+                focusManagement: 'content'
+            })
 
-    const toggleListbox = () => {
-        if (expanded) {
-            collapseListbox()
-        } else {
-            expandListbox()
+            containerRef.current.addEventListener('expander-expand', handleExpand)
+            containerRef.current.addEventListener('expander-collapse', handleCollapse)
         }
-    }
 
-    const onOptionsSelect = (e, index) => {
-        // OnSelect set the selectedValue to the state and expanded to false to close the list box
-        setSelectedOption(childrenArray[index])
-        setSelectedIndex(index)
-        collapseListbox()
-        setActiveDescendant(index)
-        buttonRef.current.focus()
-        onChange(e, { index, selected: [getSelectedValueByIndex(index)], wasClicked })
-        setWasClicked(false)
-    }
+        scrollKeyPreventer.add(buttonRef.current)
 
-    const reset = () => {
-        collapseListbox()
-        setSelectedOption(childrenArray[initialSelectedOptionIndex])
-    }
-
-    const makeOptionActive = (index: number) => {
-        const optionEle = optionsContainerRef.current.children[index]
-        optionEle.setAttribute(`aria-selected`, 'true')
-        optionEle.classList.add(`listbox-button__option--active`)
-    }
+        return () => {
+            if (expanderRef.current) {
+                expanderRef.current.destroy()
+                expanderRef.current = undefined
+            }
 
-    const makeOptionInActive = (index: number) => {
-        const optionEle = optionsContainerRef.current.children[index]
-        optionEle.setAttribute(`aria-selected`, 'false')
-        optionEle.classList.remove(`listbox-button__option--active`)
-    }
+            if (containerRef.current) {
+                containerRef.current.removeEventListener('expander-expand', handleExpand)
+                containerRef.current.removeEventListener('expander-collapse', handleCollapse)
+            }
 
-    // Followed the implementation from W3
-    // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
-    const scrollOptions = (index: number) => {
-        const listboxOptionsContainerNode = optionsParentContainerRef.current
-        const currentTarget = getSelectedOption(index)
-        if (listboxOptionsContainerNode.scrollHeight > listboxOptionsContainerNode.clientHeight) {
-            const scrollBottom = listboxOptionsContainerNode.clientHeight + listboxOptionsContainerNode.scrollTop
-            const elementBottom = currentTarget.offsetTop + currentTarget.offsetHeight
-            if (elementBottom > scrollBottom) {
-                listboxOptionsContainerNode.scrollTop = elementBottom - listboxOptionsContainerNode.clientHeight
-            } else if (currentTarget.offsetTop < listboxOptionsContainerNode.scrollTop) {
-                listboxOptionsContainerNode.scrollTop = currentTarget.offsetTop
+            if (buttonRef.current) {
+                scrollKeyPreventer.remove(buttonRef.current)
             }
         }
-    }
+    }, [disabled])
 
-    const makeSelections = (updatedIndex) => {
-        makeOptionActive(selectedIndex === undefined || updatedIndex === -1 ? 0 : updatedIndex)
-        makeOptionInActive(selectedIndex === undefined || selectedIndex === -1 ? 0 : selectedIndex)
-        scrollOptions(updatedIndex)
-        setActiveDescendant(updatedIndex)
-        setSelectedIndex(updatedIndex)
-        setSelectedOption(childrenArray[updatedIndex])
-    }
-
-    const focusOptionsContainer = (focusOptions?: FocusOptions) =>
-        setTimeout(() => optionsContainerRef?.current?.focus(focusOptions), 0)
-    const onButtonClick = () => {
-        toggleListbox()
-        setOptionsOpened(true)
-        focusOptionsContainer({ preventScroll: true })
-    }
-    const onButtonKeyup = (e: KeyboardEvent<HTMLButtonElement>) => {
-        switch (e.key as Key) {
-            case 'Escape':
-                collapseListbox()
-                break
-            case 'Enter':
-                focusOptionsContainer()
-                break
-            default:
-                break
-        }
-    }
-    const onOptionContainerKeydown = (e: KeyboardEvent): void => {
-        switch (e.key as Key) {
-            case ' ':
-            case 'PageUp':
-            case 'PageDown':
-            case 'Home':
-            case 'End':
-                e.preventDefault()
-                break
-            case 'Down':
-            case 'ArrowDown':
-                e.preventDefault()
-                if (selectedIndex !== listBoxButtonOptions.length - 1) {
-                    makeSelections(selectedIndex < listBoxButtonOptions.length - 1 ? selectedIndex + 1 : 0)
-                }
-                break
-            case 'Up':
-            case 'ArrowUp':
-                e.preventDefault()
-                if (selectedIndex !== 0) {
-                    makeSelections(selectedIndex > 0 ? selectedIndex - 1 : listBoxButtonOptions.length - 1)
-                }
-                break
-            case 'Enter':
-                collapseListbox()
-                setTimeout(() => setSelectedOption(childrenArray[selectedIndex]))
-                setTimeout(() => buttonRef.current.focus(), 0)
-                onChange(e as any, {
-                    index: selectedIndex,
-                    selected: [getSelectedValueByIndex(selectedIndex)],
-                    wasClicked
-                })
-                break
-            case 'Esc':
-            case 'Escape':
-                reset()
-                break
-            default:
-                break
+    function handleListboxChange(event: ChangeEvent<HTMLSpanElement>, data: ChangeEventProps) {
+        if (collapseOnSelect !== false) {
+            expanderRef.current.expanded = false
         }
-    }
 
-    // We want to mimic the select box behavior, so we take the onSelect that passed
-    // at the parent level and use it for the OnClick on the list box since it is a fake dropdown
-    const updateListBoxButtonOptions = listBoxButtonOptions
-        .map((child, index) => cloneElement(child, {
-            index,
-            key: index,
-            selected: selectedOption && child.props.value === selectedOption.props.value,
-            onClick: (e) => onOptionsSelect(e, index),
-            innerRef: optionNode => !optionNode
-                ? optionsByIndexRef.current.delete(index)
-                : optionsByIndexRef.current.set(index, optionNode)
-        }))
-    const wrapperClassName = classNames('listbox-button', className, { 'listbox-button--fluid': fluid })
-    const buttonClassName = classNames('btn', {
-        'btn--form': !borderless,
-        'btn--borderless': borderless,
-        'btn--floating-label': floatingLabel && selectedOption
-    })
-    const expandBtnTextId = prefixId && 'expand-btn-text'
+        setSelectedIndex(data.index)
+        onChange(event, data)
+    }
 
+    function handleListboxEscape() {
+        expanderRef.current.expanded = false
+    }
 
-    const buttonLabel = (
-        <>
-            {floatingLabel && <span className="btn__floating-label">{floatingLabel}</span>}
-            {prefixLabel && <span className="btn__label">{prefixLabel}</span>}
-            <span className="btn__text" id={expandBtnTextId}>
-                {selectedOption?.props.children || unselectedText}
-            </span>
-        </>
-    )
+    const Container = truncate && !fluid ? 'div' : 'span'
 
     return (
-        <span className={wrapperClassName}>
+        <Container
+            ref={containerRef}
+            className={classNames('listbox-button', className, {
+                'listbox-button--fluid': fluid,
+                'listbox-button--form': variant === 'form',
+                'listbox-button--error': invalid || hasError
+            })}>
             <button
                 {...rest}
+                disabled={disabled}
+                ref={buttonRef}
+                className={classNames('listbox-button__control', 'btn', {
+                    [`btn--split-${split}`]: split,
+                    'btn--borderless': borderless,
+                    'btn--form': !borderless,
+                    'btn--truncated': truncate,
+                    'btn--floating-label': floatingLabel
+                })}
+                aria-label={a11ySelectedIconText && `${a11yIconPrefixText}: ${a11ySelectedIconText}`}
+                value={selectedText}
                 type="button"
-                className={buttonClassName}
-                aria-expanded={!!expanded}
                 aria-haspopup="listbox"
-                aria-labelledby={prefixId && `${prefixId} ${expandBtnTextId}`}
-                onClick={onButtonClick}
-                // https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue
-                onMouseDown={(e) => e.preventDefault()}
-                onKeyUp={onButtonKeyup}
-                ref={buttonRef}
-            >
+                aria-labelledby={labelId && `${prefixId} ${labelId}`}
+                aria-invalid={invalid || hasError}>
                 <span className="btn__cell">
-                    {buttonLabel}
+                    {floatingLabel ? (
+                        <>
+                            <span className={classNames(
+                                'btn__floating-label',
+                                'btn__floating-label--animate',
+                                !selectedText && 'btn__floating-label--inline'
+                            )}>
+                                {floatingLabel}
+                            </span>
+                            <RenderText
+                                icon={selectedIcon}
+                                labelId={labelId}
+                                text={selectedText}
+                                unselectedText={unselectedText}
+                                postfixLabel={postfixLabel} />
+                        </>
+                    ) : (
+                        <>
+                            {prefixLabel ? (
+                                <span className="btn__label">
+                                    {prefixLabel}
+                                </span>
+                            ) : null}
+
+                            <RenderText
+                                alwaysDisplay
+                                icon={selectedIcon}
+                                labelId={labelId}
+                                text={selectedText}
+                                unselectedText={unselectedText}
+                                postfixLabel={postfixLabel} />
+                        </>
+                    )}
+
                     <EbayIcon name="chevronDown12" />
                 </span>
             </button>
-            {(expanded || optionsOpened) &&
-                <div
-                    className="listbox-button__listbox"
-                    ref={optionsParentContainerRef}
-                    style={{ maxHeight: maxHeight }}>
-                    <div
-                        className="listbox-button__options"
-                        role="listbox"
-                        tabIndex={expanded ? 0 : -1}
-                        ref={optionsContainerRef}
-                        onKeyDown={(e) => onOptionContainerKeydown(e)}
-                        // adding onMouseDown preventDefault b/c on IE the onClick event is not being fired on each
-                        // option https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue
-                        onMouseDown={(e) => {
-                            e.preventDefault()
-                            setWasClicked(true)
-                        }}
-                        onBlur={() => {
-                            collapseListbox()
-                            setTimeout(() => buttonRef.current.focus(), 0)
-                        }}
-                    >
-                        {updateListBoxButtonOptions}
-                    </div>
-                </div>}
-            <select
-                hidden
-                className="listbox-button__native"
+            {/* Both classes "listbox-button__listbox" and "listbox-button__options" is for backward compatibility */}
+            <EbayListbox
+                className="listbox-button__listbox listbox-button__options"
+                selectClassName="listbox-button__native"
+                activeClassName="listbox-button__option--active"
+                tabIndex={-1}
+                listSelection={listSelection}
                 name={name}
-                onChange={(e) => onOptionsSelect(e, getIndexByValue(e.target.value))}
-                value={selectedOption ? selectedOption?.props.value : ''}>
-                {
-                    updateListBoxButtonOptions.map((option, i) =>
-                        <option value={option.props.value} key={i} />)
-                }
-            </select>
-        </span>
+                maxHeight={maxHeight}
+                onChange={handleListboxChange}
+                onEscape={handleListboxEscape}
+            >
+                {options.map((option, index) => (
+                    <EbayListboxOption
+                        {...option.props}
+                        key={option.props.value || index}
+                        selected={index === selectedIndex}
+                        className={classNames('listbox-button__option', option.props.className)} />
+                ))}
+            </EbayListbox>
+        </Container>
     )
 }
-
-export default ListboxButton
diff --git a/src/ebay-listbox/README.md b/src/ebay-listbox/README.md
new file mode 100644
index 00000000..56205400
--- /dev/null
+++ b/src/ebay-listbox/README.md
@@ -0,0 +1,100 @@
+# EbayListbox
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/building-blocks-ebay-listbox--docs)
+
+## Import JS
+
+```jsx harmony
+import {
+    EbayListbox,
+    EbayListboxOption,
+    EbayListboxOptionDescription,
+} from "@ebay/ui-core-react/ebay-listbox";
+```
+
+## Import following styles from SKIN
+
+```js
+import "@ebay/skin/listbox";
+```
+
+## Import styles using SCSS/CSS
+
+```js
+import "@ebay/skin/listbox.css";
+```
+
+## Usage
+
+```jsx
+<EbayListbox>
+    <EbayListboxOption value="AA" text="Option 1" />
+    <EbayListboxOption value="BB" text="Option 2" />
+    <EbayListboxOption value="CC" text="Option 3" />
+</EbayListbox>
+```
+
+## Attributes
+
+### EbayListbox
+
+| Name                     | Type    | Required | Description                                                                                             |
+| ------------------------ | ------- | -------- | ------------------------------------------------------------------------------------------------------- |
+| `name`                   | string  | No       | Used for the name attribute of the native `<select>`.                                                   |
+| `disabled`               | boolean | No       | Set to true if the field is disabled.                                                                   |
+| `listSelection`          | string  | No       | If `manual`, the user will need to press enter to select an item using the keyboard. Otherwise, `auto` will automatically select as the user presses up/down. |
+| `typeaheadTimeoutLength` | number  | No       | Timeout length to pass to typeahead.                                                                    |
+| `maxHeight`              | string  | No       | Example: 100px, 200px, 10rem.                                                                           |
+
+### EbayListboxOption
+
+| Name       | Type         | Required | Description                        |
+| ---------- | ------------ | -------- | ---------------------------------- |
+| `icon`     | ReactElement | No       | An optional icon to display alongside the option text. |
+| `text`     | string       | No       | The text to display for the option. |
+| `value`    | string       | Yes      | The value of the option.            |
+| `disabled` | boolean      | No       | Set to true if the option is disabled. |
+| `selected` | boolean      | No       | Set to true if the option is selected by default. |
+
+## Callbacks
+
+| Name       | Type     | Required | Description                    | Data                                                                         |
+| ---------- | -------- | -------- | ------------------------------ | ---------------------------------------------------------------------------- |
+| `onChange` | Function | No       | triggered on change            | `(ChangeEvent, { index: number, selected: string[] , wasClicked: boolean })` |
+| `onEscape` | Function | No       | triggered on typing Escape key | `()`                                                                         |
+
+## Examples
+
+### Default
+
+```jsx
+<EbayListbox>
+    <EbayListboxOption value="AA" text="Option 1" />
+    <EbayListboxOption value="BB" text="Option 2" />
+    <EbayListboxOption value="CC" text="Option 3" />
+</EbayListbox>
+```
+
+### With Description
+
+```jsx
+<EbayListbox>
+    <EbayListboxOption value="AA" text="Option 1">
+        <EbayListboxOptionDescription>
+            Option 1 extra info
+        </EbayListboxOptionDescription>
+    </EbayListboxOption>
+    <EbayListboxOption value="BB" text="Option 2">
+        <EbayListboxOptionDescription>
+            Option 2 extra info
+        </EbayListboxOptionDescription>
+    </EbayListboxOption>
+    <EbayListboxOption value="CC" text="Option 3">
+        <EbayListboxOptionDescription>
+            Option 3 extra info
+        </EbayListboxOptionDescription>
+    </EbayListboxOption>
+</EbayListbox>
+```
\ No newline at end of file
diff --git a/src/ebay-listbox/__tests__/index.stories.tsx b/src/ebay-listbox/__tests__/index.stories.tsx
new file mode 100644
index 00000000..a5c83ec8
--- /dev/null
+++ b/src/ebay-listbox/__tests__/index.stories.tsx
@@ -0,0 +1,54 @@
+import React, { ChangeEvent } from 'react'
+import { action } from '@storybook/addon-actions'
+
+import { EbayListbox, EbayListboxOption, EbayListboxOptionDescription } from '../index'
+
+export default {
+    title: 'building blocks/ebay-listbox'
+}
+
+export const Default = () => (
+    <EbayListbox>
+        <EbayListboxOption value="AA" text="Option 1"/>
+        <EbayListboxOption value="BB" text="Option 2" />
+        <EbayListboxOption value="CC" text="Option 3" />
+    </EbayListbox>
+)
+
+export const WithDescription = () => (
+    <EbayListbox>
+        <EbayListboxOption value="AA" text="Option 1">
+            <EbayListboxOptionDescription>Option 1 extra info</EbayListboxOptionDescription>
+        </EbayListboxOption>
+        <EbayListboxOption value="BB" text="Option 2">
+            <EbayListboxOptionDescription>Option 2 extra info</EbayListboxOptionDescription>
+        </EbayListboxOption>
+        <EbayListboxOption value="CC" text="Option 3">
+            <EbayListboxOptionDescription>Option 3 extra info</EbayListboxOptionDescription>
+        </EbayListboxOption>
+    </EbayListbox>
+)
+
+export const withDisabled = () => (
+    <EbayListbox>
+        <EbayListboxOption value="AA" text="Option 1"/>
+        <EbayListboxOption value="BB" text="Option 2" disabled />
+        <EbayListboxOption value="CC" text="Option 3" />
+    </EbayListbox>
+)
+
+export const withManyOptions = () => (
+    <EbayListbox name="formFieldName">
+        {Array.from({ length: 20 }, (_, i) => (
+            <EbayListboxOption key={i} value={i.toString()} text={`Option ${i + 1}`} />
+        ))}
+    </EbayListbox>
+)
+
+export const withActions = () => (
+    <EbayListbox name="formFieldName" onChange={action('onChange')} onEscape={action('onEscape')}>
+        <EbayListboxOption value="AA" text="Option 1"/>
+        <EbayListboxOption value="BB" text="Option 2" />
+        <EbayListboxOption value="CC" text="Option 3" />
+    </EbayListbox>
+)
\ No newline at end of file
diff --git a/src/ebay-listbox/index.ts b/src/ebay-listbox/index.ts
new file mode 100644
index 00000000..2ec16775
--- /dev/null
+++ b/src/ebay-listbox/index.ts
@@ -0,0 +1,3 @@
+export * from './listbox'
+export * from './listbox-option'
+export * from './listbox-option-description'
diff --git a/src/ebay-listbox/listbox-option-description.tsx b/src/ebay-listbox/listbox-option-description.tsx
new file mode 100644
index 00000000..72a92777
--- /dev/null
+++ b/src/ebay-listbox/listbox-option-description.tsx
@@ -0,0 +1,7 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+export type EbayListboxOptionDescriptionProps = ComponentProps<'div'>;
+
+export const EbayListboxOptionDescription: FC<EbayListboxOptionDescriptionProps> = ({ children, className, ...rest }) =>
+    <div className={classNames('listbox__description', className)} {...rest}>{children}</div>
diff --git a/src/ebay-listbox/listbox-option.tsx b/src/ebay-listbox/listbox-option.tsx
new file mode 100644
index 00000000..ee86b773
--- /dev/null
+++ b/src/ebay-listbox/listbox-option.tsx
@@ -0,0 +1,51 @@
+import React, { ComponentProps, FC, ReactElement } from 'react'
+import classNames from 'classnames'
+import { filterByType } from '../utils'
+import { EbayIcon } from '../ebay-icon'
+import { EbayListboxOptionDescription } from './listbox-option-description'
+
+export type EbayListboxOptionProps = ComponentProps<'div'> & {
+    icon?: ReactElement;
+    text?: string;
+    value: string;
+    disabled?: boolean;
+    selected?: boolean;
+};
+
+export const EbayListboxOption: FC<EbayListboxOptionProps> = ({
+    className,
+    icon,
+    text,
+    children,
+    disabled,
+    tabIndex,
+    selected,
+    ...rest
+}) => {
+    const description = filterByType(children, EbayListboxOptionDescription)
+    const displayText = text || (!description?.length ? children : '')
+
+    return (
+        <div
+            {...rest}
+            tabIndex={disabled ? -1 : tabIndex}
+            className={classNames('listbox__option', className)}
+            aria-disabled={disabled}
+            aria-selected={selected}
+            role="option">
+            {icon ? (
+                <span className="listbox__value">
+                    {icon}
+                    {displayText ? <span>{displayText}</span> : null}
+                    {description?.length ? description : null}
+                </span>
+            ) : (
+                <>
+                    <span className="listbox__value">{displayText}</span>
+                    {description?.length ? description : null}
+                </>
+            )}
+            <EbayIcon name="tick16" />
+        </div>
+    )
+}
diff --git a/src/ebay-listbox/listbox.tsx b/src/ebay-listbox/listbox.tsx
new file mode 100644
index 00000000..1bc411ed
--- /dev/null
+++ b/src/ebay-listbox/listbox.tsx
@@ -0,0 +1,219 @@
+import React, { ChangeEvent, cloneElement, FC, KeyboardEvent, useEffect } from 'react'
+import { createLinear } from 'makeup-active-descendant'
+import typeahead from 'makeup-typeahead'
+import classNames from 'classnames'
+import { ComponentProps, ReactNode, useRef, useState } from 'react'
+import { filterByType } from '../utils'
+import { scroll } from '../utils/scroll'
+import { EbayListboxOption } from './listbox-option'
+import { EbayChangeEventHandler } from '../events'
+
+const TYPEAHEAD_TIMEOUT_LENGTH = 1300
+
+export type ChangeEventProps = {
+    index: number;
+    selected: string[];
+    wasClicked: boolean;
+}
+
+export type EbayListboxProps = Omit<ComponentProps<'div'>, 'onChange'> & {
+    name?: string;
+    disabled?: boolean;
+    children: ReactNode;
+    listSelection?: 'auto' | 'manual';
+    typeaheadTimeoutLength?: number;
+    maxHeight?: string | number;
+    selectClassName?: string;
+    activeClassName?: string;
+    onChange?: EbayChangeEventHandler<HTMLSpanElement, ChangeEventProps>;
+    onEscape?: () => void
+};
+
+export const EbayListbox: FC<EbayListboxProps> = ({
+    name,
+    className,
+    disabled,
+    children,
+    tabIndex = 0,
+    listSelection,
+    maxHeight,
+    typeaheadTimeoutLength,
+    selectClassName,
+    activeClassName,
+    onChange = () => {},
+    onEscape = () => {},
+    ...rest
+}) => {
+    const options = filterByType(children, EbayListboxOption)
+    const selectedOptionComponentIndex = options.findIndex(option => option.props.selected)
+
+    const [selectedIndex, setSelectedIndex] = useState(
+        options.findIndex(option => option.props.selected)
+    )
+
+    useEffect(() => {
+        if (selectedOptionComponentIndex !== selectedIndex) {
+            setSelectedIndex(selectedOptionComponentIndex)
+        }
+    }, [selectedOptionComponentIndex])
+
+    const containerRef = useRef<HTMLDivElement>()
+    const activeDescendantRef = useRef<ReturnType<typeof createLinear>>()
+    const typeaheadRef = useRef<ReturnType<typeof typeahead>>()
+    const wasClickedRef = useRef(false)
+
+    function handleChange(event: CustomEvent | Event | KeyboardEvent, nextSelectedIndex: number, wasClicked: boolean) {
+        if (nextSelectedIndex === selectedIndex) {
+            return
+        }
+
+        const option = options[nextSelectedIndex]
+
+        if (option.props.disabled) {
+            return
+        }
+
+        setSelectedIndex(nextSelectedIndex)
+        onChange(event as unknown as ChangeEvent<HTMLSpanElement>, {
+            index: nextSelectedIndex,
+            selected: [options[nextSelectedIndex].props.value],
+            wasClicked
+        })
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+        switch (event.code) {
+            case 'Esc':
+            case 'Escape':
+                onEscape()
+                break
+            case 'Space':
+            case 'Enter':
+                handleChange(event, activeDescendantRef.current.index, false)
+                break
+            default:
+                return
+        }
+
+        const itemIndex = typeaheadRef.current.getIndex(
+            containerRef.current.children,
+            event.key,
+            typeaheadTimeoutLength || TYPEAHEAD_TIMEOUT_LENGTH
+        )
+
+        if (itemIndex !== -1) {
+            activeDescendantRef.current.index = itemIndex
+            const selectedOption = containerRef.current.querySelectorAll('[role=option]')[itemIndex] as HTMLElement
+            containerRef.current.scrollTop =
+                selectedOption.offsetTop -
+                containerRef.current.offsetHeight / 2
+        }
+    }
+
+    function handleMouseDown() {
+        wasClickedRef.current = true
+    }
+
+    useEffect(() => {
+        const handleListboxChange = (event: CustomEvent) => {
+            const nextSelectedIndex = parseInt(event.detail.toIndex, 10)
+            const el = containerRef.current
+                ? containerRef.current.querySelectorAll('[role=option]')[selectedIndex] as HTMLElement
+                : null
+
+            const wasClicked = wasClickedRef.current
+
+            scroll(el)
+
+            if (wasClickedRef.current) {
+                wasClickedRef.current = false
+            }
+
+            handleChange(event, nextSelectedIndex, wasClicked)
+        }
+
+        if (options.length && !disabled) {
+            const container = containerRef.current
+            const optionsContainer = containerRef.current
+
+            activeDescendantRef.current = createLinear(
+                container,
+                optionsContainer,
+                optionsContainer,
+                '.listbox__option[role=option]',
+                {
+                    activeDescendantClassName: activeClassName || 'listbox__option--active',
+                    autoInit: selectedIndex,
+                    autoReset: null,
+                    autoScroll: listSelection !== 'auto'
+                }
+            )
+
+            typeaheadRef.current = typeahead()
+        }
+
+
+        if (listSelection === 'auto') {
+            containerRef.current.addEventListener('activeDescendantChange', handleListboxChange)
+        }
+
+        return () => {
+            if (activeDescendantRef.current) {
+                activeDescendantRef.current.reset()
+                activeDescendantRef.current.destroy()
+                activeDescendantRef.current = undefined
+            }
+
+            if (typeaheadRef.current) {
+                typeaheadRef.current.destroy()
+                typeaheadRef.current = undefined
+            }
+
+
+            if (containerRef.current) {
+                containerRef.current.removeEventListener('activeDescendantChange', handleListboxChange)
+            }
+        }
+    }, [selectedIndex, disabled, listSelection])
+
+    return (
+        <>
+            <div
+                {...rest}
+                tabIndex={tabIndex}
+                ref={containerRef}
+                role="listbox"
+                onKeyDown={listSelection !== 'auto' ? handleKeyDown : undefined}
+                className={classNames('listbox__options', className)}
+                style={{ maxHeight }}>
+                {options.map((option, index) =>
+                    cloneElement(option, {
+                        key: option.props.value || index,
+                        ...option.props,
+                        onMouseDown: listSelection === 'auto' ? handleMouseDown : undefined,
+                        onClick: (event: MouseEvent) => {
+                            if (listSelection !== 'auto') {
+                                handleChange(event, index, true)
+                            }
+                        },
+                        selected: index === selectedIndex
+                    })
+                )}
+            </div>
+
+            <select
+                hidden
+                className={classNames('listbox__native', selectClassName)}
+                name={name}
+                value={options[selectedIndex]?.props.value}
+                onChange={/* NO-OP, this is to hide React warnings */ () => {}}>
+                {options.map((option, index) => (
+                    <option
+                        key={index}
+                        value={option.props.value}
+                        disabled={option.props.disabled} />
+                ))}
+            </select>
+        </>
+    )
+}
diff --git a/src/utils/scroll.ts b/src/utils/scroll.ts
new file mode 100644
index 00000000..d1a590a2
--- /dev/null
+++ b/src/utils/scroll.ts
@@ -0,0 +1,15 @@
+export function scroll(el?: HTMLElement): void {
+    if (!el) {
+        return
+    }
+
+    const parentEl = el.parentElement
+    const offsetBottom = el.offsetTop + el.offsetHeight
+    const scrollBottom = parentEl.scrollTop + parentEl.offsetHeight
+
+    if (el.offsetTop < parentEl.scrollTop) {
+        parentEl.scrollTop = el.offsetTop
+    } else if (offsetBottom > scrollBottom) {
+        parentEl.scrollTop = offsetBottom - parentEl.offsetHeight
+    }
+}
diff --git a/vite.config.mjs b/vite.config.mjs
index 6ce89ec9..a4113af2 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -44,7 +44,10 @@ export default defineConfig({
             formats: ["cjs"],
         },
         rollupOptions: {
-            plugins: [nodeExternals(), typescript()],
+            plugins: [nodeExternals({
+                // Makeup packages are not properly bundled with ESM, so we exclude them from the external list.
+                exclude: [/^makeup-/]
+            }), typescript()],
         },
     },
 });
diff --git a/yarn.lock b/yarn.lock
index 78f5fcb0..ed5f2fff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8167,27 +8167,45 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
-makeup-exit-emitter@~0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/makeup-exit-emitter/-/makeup-exit-emitter-0.4.1.tgz#99a6db81c44a7465658b89d5f4e9324d21755190"
-  integrity sha512-KZJRxx/eiGxMs0qHOw5lbNQn+BOv0GZb/sKQ02vNRFuqAGS2KGXQH+lWYZDrwwDKvexgln/kE+8xf1mjArpDgw==
+makeup-active-descendant@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/makeup-active-descendant/-/makeup-active-descendant-0.7.3.tgz#6f55b2240b1b3710c39d05135a3aec6fe479c19e"
+  integrity sha512-2mj2sRYU9FjqqjaKa9KzeMHn9iIw29ly6POjymJGuPblvp9P7STJfJrfNg/BFJ2jL6vTm7Zadr3itC1qgYxBgQ==
   dependencies:
-    makeup-next-id "~0.4.0"
+    makeup-navigation-emitter "^0.7.2"
+    makeup-next-id "^0.5.2"
 
-makeup-expander@^0.10.1:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/makeup-expander/-/makeup-expander-0.10.1.tgz#5ba44f8a142625a885dde2bab1d6177b4d07672a"
-  integrity sha512-auGubmGHsxRTOSvraLBwSYvSouzOlMNR6aXpE5GHi29p0z/IoMCH+Pb8IAXUPSv3ABXSh0bdSjaCrNIH0VNAVw==
+makeup-exit-emitter@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/makeup-exit-emitter/-/makeup-exit-emitter-0.5.2.tgz#0647fda95166c49a89833bf5f82bba45cdf3f764"
+  integrity sha512-fyol56GWzoyTLuxWhF7RJ7pnMyB/5w83mwNth0Kfexd9rtLe8RxC/sSNAeia1RbNGSlZACOxKKOpG0L56nRUyQ==
   dependencies:
-    makeup-exit-emitter "~0.4.0"
-    makeup-focusables "~0.3.0"
-    makeup-next-id "~0.4.0"
+    makeup-next-id "^0.5.2"
+
+makeup-expander@^0.11.3:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/makeup-expander/-/makeup-expander-0.11.3.tgz#857ba10fb6be2872842298a52e1a5e5c861c381a"
+  integrity sha512-1pWnF4v855UfpBzraAAElfHw84WNL4OGuZAZBzqH1tB0fFZ4Z/3fSk3vMzhL7QT6LFC/1ygli9mGeZl1PYXlag==
+  dependencies:
+    makeup-exit-emitter "^0.5.2"
+    makeup-focusables "^0.4.3"
+    makeup-next-id "^0.5.2"
+
+makeup-focusables@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/makeup-focusables/-/makeup-focusables-0.4.3.tgz#3e92964ea136e962a2f841de34b507d15e088f51"
+  integrity sha512-00od3RjRDRlyzKNMkZKyfEUY7USfnn0JJJAKWpt7RinzA+v1Yjd0LIMPwTBqsPOcpcquQaRRwDjGolEjZyFq+w==
 
 makeup-focusables@~0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/makeup-focusables/-/makeup-focusables-0.3.1.tgz#60a6917094b6b79e1f29e48369d1560052f625c8"
   integrity sha512-SHL/VBBA6aqTGGay6/6rQvZjlAKmp/VASL46bHdEUfDxWhALzV3xquctr3C3WxdlnFwd4qxbIS3nv1Um9MSJhw==
 
+makeup-key-emitter@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/makeup-key-emitter/-/makeup-key-emitter-0.4.2.tgz#1edc5f9890d90c38d7f4b41968f90540a7854bc7"
+  integrity sha512-8xB/0qwMfSvtxGRB1rx74DIqd+dgqMFbSosOS9DK5FkbXYeGSU8TA5rIsmyZDSnlDdCA6UZKg1Hfajl7EvI5SQ==
+
 makeup-keyboard-trap@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/makeup-keyboard-trap/-/makeup-keyboard-trap-0.4.1.tgz#0eca55dfbc4ddeff3742e3ffea9f54cef14f8d4a"
@@ -8195,16 +8213,34 @@ makeup-keyboard-trap@^0.4.1:
   dependencies:
     makeup-focusables "~0.3.0"
 
-makeup-next-id@~0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/makeup-next-id/-/makeup-next-id-0.4.1.tgz#7530470175360e836af66c6d421349abf612738c"
-  integrity sha512-5s1caaRFSkvAu6Vhh1ZGkMyycf6bwEfZWwd0qEXzJj2P1aF+8baLo5sPZlMnfSao/SeUD6le0J8CaOzlt4KZSA==
+makeup-navigation-emitter@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/makeup-navigation-emitter/-/makeup-navigation-emitter-0.7.2.tgz#036f87f5e738c1961b72775f96eebb7ed19a2515"
+  integrity sha512-E6Ooao2DGd3/trPSsWcYQPgSLS/ZrsnqEskfn62xZkhJve9BF7eP4kcm0LbHerzAJUoecmcjokwu5Huu/5PnGQ==
+  dependencies:
+    makeup-exit-emitter "^0.5.2"
+    makeup-key-emitter "^0.4.2"
+
+makeup-next-id@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/makeup-next-id/-/makeup-next-id-0.5.2.tgz#683a335f22462b791e47f500d10de486d4f01adb"
+  integrity sha512-4uHgSbHcAfGURj3ob/Zvw8bKEsZgbFYxwV6sIP3CerPxVqyHD+ORaCEG8zgu+l+2+/N+CiCBIgZGFuXfE+sBug==
+
+makeup-prevent-scroll-keys@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/makeup-prevent-scroll-keys/-/makeup-prevent-scroll-keys-0.3.2.tgz#23bddc0a281e32fdab4574595eeefea5fd972994"
+  integrity sha512-8LgXafS2L5aLA3TFzWMO5XAWNV9flKZdkg9xM59MXrgIRFO3yc0PVhX5gyMY4xallnjLAgJaGC4z6vKa5cnnHg==
 
 makeup-screenreader-trap@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/makeup-screenreader-trap/-/makeup-screenreader-trap-0.4.1.tgz#6ef87b33735a609be5444c0562a1834bf45dc39b"
   integrity sha512-64x5elJZlImluq2DFmHZnW4YEt6jvRZGnI4mD37RFVDpE7I2S3DvLrCp1WvaX7j0DNpzZHP7pv4ZM5ru7CJ0Bw==
 
+makeup-typeahead@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/makeup-typeahead/-/makeup-typeahead-0.3.2.tgz#c9597fd8f5c61256f83c169ae711858732753b63"
+  integrity sha512-5wkLzlkNG9W7OJjhpTHD33YF9aDQzbPCeIezm2ftejNI5W7lAvib2y0yQ1vW2qMehYXZThilM7mryzjRqY8lFQ==
+
 map-or-similar@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
@@ -9953,16 +9989,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@4.2.3, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3, string-width@^5.0.1, string-width@^5.1.2:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@4.2.3, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3, string-width@^5.0.1, string-width@^5.1.2:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10042,7 +10069,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10056,13 +10083,6 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -10898,7 +10918,8 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10916,15 +10937,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"