diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index 933c3a6f584..d42dd202082 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -1,9 +1,10 @@
 import type React from 'react'
-import {forwardRef} from 'react'
+import {forwardRef, useContext} from 'react'
 import {Button, IconButton} from '../Button'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
+import {ActionListContainerContext} from './ActionListContainerContext'
 
 type ElementProps =
   | {
@@ -30,6 +31,17 @@ export type ActionListTrailingActionProps = ElementProps & {
 
 export const TrailingAction = forwardRef(
   ({as = 'button', icon, label, href = null, className, style, loading, ...props}, forwardedRef) => {
+    // Use context from ActionList
+    const {selectionVariant} = useContext(ActionListContainerContext)
+    // TODO: Rename
+    const withinMenu = selectionVariant === 'single' || selectionVariant === 'multiple'
+
+    if (withinMenu) {
+      console.log(
+        'Warning: ActionList.TrailingAction should not be used within selectable ActionLists. Please remove it to avoid unexpected behavior.',
+      )
+    }
+
     return (
       <span className={clsx(className, classes.TrailingAction)} style={style}>
         {icon ? (
@@ -38,13 +50,15 @@ export const TrailingAction = forwardRef(
             aria-label={label}
             icon={icon}
             variant="invisible"
-            tooltipDirection="w"
+            tooltipDirection="e"
             href={href}
             loading={loading}
             data-loading={Boolean(loading)}
             // @ts-expect-error StyledButton wants both Anchor and Button refs
             ref={forwardedRef}
             className={classes.TrailingActionButton}
+            aria-hidden={!withinMenu ? 'true' : undefined}
+            tabIndex={!withinMenu ? -1 : undefined}
             {...props}
           />
         ) : (
@@ -57,6 +71,7 @@ export const TrailingAction = forwardRef(
             data-loading={Boolean(loading)}
             ref={forwardedRef}
             className={classes.TrailingActionButton}
+            aria-hidden={withinMenu ? 'true' : undefined}
             {...props}
           >
             {label}
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index c0cd18f64ef..9a5918738a6 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -225,7 +225,9 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   })
   useFocusTrap({containerRef: overlayRef, disabled: !open || !position, ...focusTrapSettings})
 
-  const showXIcon = onClose && variant.narrow === 'fullscreen' && displayCloseButton
+  const showXIcon =
+    (onClose && variant.narrow === 'fullscreen' && displayCloseButton) || (onClose && displayCloseButton)
+
   const XButtonAriaLabelledBy = closeButtonProps['aria-labelledby']
   const XButtonAriaLabel = closeButtonProps['aria-label']
 
diff --git a/packages/react/src/Combobox/Combobox.module.css b/packages/react/src/Combobox/Combobox.module.css
new file mode 100644
index 00000000000..1505aa39780
--- /dev/null
+++ b/packages/react/src/Combobox/Combobox.module.css
@@ -0,0 +1,4 @@
+.TextInput {
+    margin: var(--base-size-8) var(--base-size-8) 0;
+    width: calc(100% - var(--base-size-16));
+}
\ No newline at end of file
diff --git a/packages/react/src/Combobox/Combobox.stories.tsx b/packages/react/src/Combobox/Combobox.stories.tsx
new file mode 100644
index 00000000000..d0943c9854b
--- /dev/null
+++ b/packages/react/src/Combobox/Combobox.stories.tsx
@@ -0,0 +1,52 @@
+import type {Meta, StoryFn} from '@storybook/react-vite'
+import type {ComponentProps} from '../utils/types'
+import {Combobox} from '.'
+
+export default {
+  title: 'Components/Combobox',
+  component: Combobox,
+} as Meta<ComponentProps<typeof Combobox>>
+
+const options = [
+  {label: 'Apple', id: '1'},
+  {label: 'Banana', id: '2'},
+  {label: 'Cherry', id: '3'},
+  {label: 'Date', id: '4'},
+  {label: 'Elderberry', id: '5'},
+  {label: 'Fig', id: '6'},
+  {label: 'Grape', id: '7'},
+]
+
+export const Playground: StoryFn<ComponentProps<typeof Combobox>> = args => <Combobox options={options} {...args} />
+
+Playground.argTypes = {
+  options: {
+    control: 'object',
+  },
+}
+
+export const Default = () => {
+  return <Combobox label="Choose a fruit" options={options} />
+}
+
+const groupedOptions = [
+  {label: 'Apple', id: '1', group: 'Fruits'},
+  {label: 'Banana', id: '2', group: 'Fruits'},
+  {label: 'Carrot', id: '3', group: 'Vegetables'},
+  {label: 'Broccoli', id: '4', group: 'Vegetables'},
+]
+
+export const WithGroups = () => {
+  return <Combobox label="Choose an item" options={groupedOptions} />
+}
+
+const optionsWithSelected = [
+  {label: 'Apple', id: '1'},
+  {label: 'Banana', id: '2', selected: true},
+  {label: 'Cherry', id: '3'},
+  {label: 'Date', id: '4'},
+]
+
+export const WithSelection = () => {
+  return <Combobox label="Choose a fruit" options={optionsWithSelected} />
+}
diff --git a/packages/react/src/Combobox/Combobox.test.tsx b/packages/react/src/Combobox/Combobox.test.tsx
new file mode 100644
index 00000000000..db720b929dc
--- /dev/null
+++ b/packages/react/src/Combobox/Combobox.test.tsx
@@ -0,0 +1,68 @@
+import {describe, expect, it} from 'vitest'
+import {render} from '@testing-library/react'
+import {Combobox} from '../Combobox'
+
+describe('Combobox', () => {
+  it('should support `className` on the root element', () => {
+    const Element = () => <Combobox className={'test-class-name'} />
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+  })
+
+  it('renders with label', () => {
+    const {getByText} = render(<Combobox label="Test Label" />)
+    expect(getByText('Test Label')).toBeInTheDocument()
+  })
+
+  it('renders Combobox.Input with correct role', () => {
+    const {container} = render(<Combobox.Input />)
+    const input = container.querySelector('input')
+    expect(input).toHaveAttribute('role', 'combobox')
+    expect(input).toHaveAttribute('aria-autocomplete', 'list')
+  })
+
+  it('renders Combobox.List with correct role', () => {
+    const {container} = render(
+      <Combobox.List>
+        <Combobox.Option>Option 1</Combobox.Option>
+      </Combobox.List>,
+    )
+    const list = container.querySelector('ul')
+    expect(list).toHaveAttribute('role', 'listbox')
+  })
+
+  it('renders Combobox.Option with correct role', () => {
+    const {getByRole} = render(<Combobox.Option>Test Option</Combobox.Option>)
+    expect(getByRole('option')).toBeInTheDocument()
+    expect(getByRole('option')).toHaveTextContent('Test Option')
+  })
+
+  it('renders selected option with aria-selected', () => {
+    const {getByRole} = render(<Combobox.Option selected>Selected Option</Combobox.Option>)
+    expect(getByRole('option')).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('renders complete combobox structure', () => {
+    const {container, getByPlaceholderText} = render(
+      <Combobox label="Test">
+        <Combobox.Input placeholder="Search..." />
+        <Combobox.List>
+          <Combobox.Option>Option 1</Combobox.Option>
+          <Combobox.Option>Option 2</Combobox.Option>
+        </Combobox.List>
+      </Combobox>,
+    )
+    expect(getByPlaceholderText('Search...')).toBeInTheDocument()
+    expect(container.querySelectorAll('[role="option"]')).toHaveLength(2)
+  })
+
+  it('renders grouped options', () => {
+    const {getByText} = render(
+      <Combobox.List>
+        <Combobox.Group groupLabel="Group 1">
+          <Combobox.Option>Option 1</Combobox.Option>
+        </Combobox.Group>
+      </Combobox.List>,
+    )
+    expect(getByText('Group 1')).toBeInTheDocument()
+  })
+})
diff --git a/packages/react/src/Combobox/Combobox.tsx b/packages/react/src/Combobox/Combobox.tsx
new file mode 100644
index 00000000000..65a663e9974
--- /dev/null
+++ b/packages/react/src/Combobox/Combobox.tsx
@@ -0,0 +1,333 @@
+import {clsx} from 'clsx'
+import classes from '../ActionList/ActionList.module.css'
+import styles from '../FilteredActionList/FilteredActionList.module.css'
+import selectPanelStyles from '../SelectPanel/SelectPanel.module.css'
+import React, {useRef} from 'react'
+import {MappedActionListItem} from '../FilteredActionList/components/MappedActionListItem'
+import {AnchoredOverlay, type AnchoredOverlayProps} from '../AnchoredOverlay'
+import TextInput from '../TextInput'
+import styles2 from './Combobox.module.css'
+import Heading from '../Heading'
+import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
+import {scrollIntoView} from '@primer/behaviors'
+import {useProvidedRefOrCreate} from '../hooks'
+
+type renderAnchor = <T extends Omit<React.HTMLAttributes<HTMLElement>, 'aria-label' | 'aria-labelledby'>>(
+  props: T,
+) => JSX.Element | null
+
+export type ComboboxRootProps = {
+  children?: React.ReactNode
+  /** Defines the keyboard navigation mode for the Combobox */
+  focusMode?: 'roving' | 'active-descendant'
+  /** A function that renders the anchor element for the Combobox */
+  renderAnchor?: renderAnchor | null
+
+  anchoredOverlayProps?: Omit<AnchoredOverlayProps, 'open' | 'renderAnchor' | 'onClose' | 'focusZoneSettings'>
+
+  open?: boolean // TODO: DRY fix
+  anchorId?: string // TODO: DRY fix
+  side?: AnchoredOverlayProps['side'] // TODO: DRY fix
+  anchorRef?: React.RefObject<HTMLElement> // TODO: DRY fix
+  width?: AnchoredOverlayProps['width'] // TODO: DRY fix
+  anchorOffset?: number // TODO: DRY fix
+}
+
+export type ComboboxOverlayProps = {
+  /** The content of the Combobox */
+  children: React.ReactNode
+  /** A function that renders the anchor element for the Combobox */
+  renderAnchor?: renderAnchor | null
+  /** Whether the Combobox is open */
+  open?: boolean
+
+  anchoredOverlayProps?: Omit<AnchoredOverlayProps, 'open' | 'renderAnchor' | 'onClose' | 'focusZoneSettings'>
+  anchorRef?: React.RefObject<HTMLElement> // todo: adjust
+  listboxRef?: React.RefObject<HTMLUListElement> // todo: adjust
+}
+
+export const ComboboxContext = React.createContext<{
+  isSubmenu?: boolean
+  focusMode?: 'roving' | 'active-descendant'
+}>({isSubmenu: false, focusMode: 'active-descendant'})
+
+export const ComboboxRoot = ({children, focusMode: _focusMode, ...rest}: ComboboxRootProps) => {
+  return (
+    <ComboboxContext.Provider value={{isSubmenu: false, focusMode: _focusMode}}>
+      <Combobox {...rest}>{children}</Combobox>
+    </ComboboxContext.Provider>
+  )
+}
+
+type ComboboxOptions = {
+  label: string
+  id: string
+  group?: string
+  selected?: boolean
+}
+
+type ComboboxProps = {
+  children?: React.ReactNode
+  options?: ComboboxOptions[]
+  label?: string
+}
+
+export const Combobox = ({children, options, ...rest}: ComboboxProps) => {
+  const listboxRef = useRef<HTMLUListElement>(null)
+
+  // TODO: Add support for groups - let's use Listbox
+  // TODO: Add label prop
+
+  return (
+    <ComboboxOverlay {...rest} listboxRef={listboxRef}>
+      {children ? (
+        children
+      ) : (
+        <ComboboxList ref={listboxRef}>
+          {options?.map(option => <ComboboxOption key={option.id}>{option.label}</ComboboxOption>)}
+        </ComboboxList>
+      )}
+    </ComboboxOverlay>
+  )
+}
+
+const ComboboxOverlay = ({
+  children,
+  open,
+  renderAnchor,
+  anchorRef,
+  listboxRef,
+  anchoredOverlayProps,
+  ...rest
+}: ComboboxOverlayProps) => {
+  // TODO: Add conditional logic for focusMode prop
+  const {focusMode} = React.useContext(ComboboxContext)
+  const [comboboxOpen, setComboboxOpen] = React.useState(false)
+  const inputTrigger = React.useRef<HTMLInputElement>(null)
+
+  const renderComboboxAnchor: AnchoredOverlayProps['renderAnchor'] = props => {
+    if (renderAnchor === null || !renderAnchor) {
+      return (
+        <ComboboxInput
+          {...props}
+          className={clsx(styles2.TextInput)}
+          ref={inputTrigger}
+          onFocus={() => setComboboxOpen(true)}
+        />
+      )
+    }
+
+    const anchor = renderAnchor(props)
+    if (React.isValidElement(anchor)) {
+      return anchor
+    }
+
+    // Fallback to default input
+    return (
+      <ComboboxInput
+        {...props}
+        className={clsx(styles2.TextInput)}
+        ref={inputTrigger}
+        onFocus={() => setComboboxOpen(true)}
+      />
+    )
+  }
+
+  const activeDescendantRef = React.useRef<HTMLElement | null>(null)
+  const menuScrollMargins = {startMargin: 0, endMargin: 8}
+
+  const focusZoneSettings =
+    focusMode === 'active-descendant' && listboxRef
+      ? {
+          containerRef: listboxRef,
+          bindKeys: FocusKeys.ArrowVertical | FocusKeys.PageUpDown,
+          focusOutBehavior: 'wrap' as const,
+          focusableElementFilter: (element: HTMLElement) => {
+            return !(element instanceof HTMLInputElement) && !element.hasAttribute('aria-hidden')
+          },
+          activeDescendantFocus: inputTrigger,
+          onActiveDescendantChanged: (
+            current: HTMLElement | undefined,
+            previous: HTMLElement | undefined,
+            directlyActivated: boolean,
+          ) => {
+            activeDescendantRef.current = current ?? null
+
+            if (current && listboxRef.current && directlyActivated) {
+              scrollIntoView(current, listboxRef.current, menuScrollMargins)
+            }
+          },
+          focusInStrategy: 'previous' as const,
+        }
+      : {
+          focusableElementFilter: (element: HTMLElement) => {
+            return (
+              !element.hasAttribute('aria-hidden') &&
+              !(element instanceof HTMLInputElement) &&
+              !(element instanceof HTMLButtonElement)
+            )
+          },
+          focusOutBehavior: 'wrap' as const,
+        }
+
+  return (
+    <AnchoredOverlay
+      open={open !== undefined ? open : comboboxOpen}
+      onOpen={() => setComboboxOpen(true)}
+      renderAnchor={renderAnchor === null ? null : renderComboboxAnchor}
+      anchorRef={renderAnchor === null ? anchorRef || inputTrigger : inputTrigger}
+      // focusTrapSettings={{disabled: focusMode === 'active-descendant' && !renderAnchor ? true : false}}
+      width="medium"
+      focusZoneSettings={focusZoneSettings}
+      onClose={() => {
+        if (renderAnchor) setComboboxOpen(false)
+      }}
+      displayCloseButton={false}
+      {...anchoredOverlayProps}
+      {...rest}
+    >
+      {children}
+    </AnchoredOverlay>
+  )
+}
+
+type ComboboxInputProps = {
+  className?: string
+  placeholder?: string
+  onFocus?: React.FocusEventHandler<HTMLInputElement>
+  value?: string
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  listboxRef?: React.RefObject<HTMLUListElement>
+}
+
+export const ComboboxInput = React.forwardRef<HTMLInputElement, ComboboxInputProps>(function ComboboxInput(
+  {className, placeholder = 'Search...', onFocus, value, onChange, listboxRef, ...rest},
+  ref,
+) {
+  const inputRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
+
+  const activeDescendantRef = React.useRef<HTMLElement>()
+  const scrollContainerRef = listboxRef
+  const menuScrollMargins = {startMargin: 0, endMargin: 8}
+
+  const {focusMode} = React.useContext(ComboboxContext)
+
+  // We only want to use the focus zone if a external listboxRef is provided and -
+  // the focusMode is set to "active-descendant"
+  useFocusZone(
+    listboxRef && focusMode === 'active-descendant'
+      ? {
+          containerRef: listboxRef,
+          bindKeys: FocusKeys.ArrowVertical | FocusKeys.PageUpDown,
+          focusOutBehavior: 'wrap',
+          focusableElementFilter: element => {
+            return !(element instanceof HTMLInputElement) && !element.hasAttribute('aria-hidden')
+          },
+          activeDescendantFocus: inputRef,
+          onActiveDescendantChanged: (current, previous, directlyActivated) => {
+            activeDescendantRef.current = current
+
+            if (current && scrollContainerRef?.current && directlyActivated) {
+              scrollIntoView(current, scrollContainerRef.current, menuScrollMargins)
+            }
+          },
+          focusInStrategy: 'previous',
+        }
+      : undefined,
+    [],
+  )
+
+  return (
+    <TextInput
+      type="text"
+      role="combobox"
+      aria-autocomplete="list"
+      aria-expanded="false"
+      className={clsx(className, styles2.TextInput)}
+      placeholder={placeholder}
+      onFocus={onFocus}
+      ref={inputRef}
+      value={value}
+      onChange={onChange}
+      {...rest}
+    />
+  )
+})
+
+type ComboboxListProps = {
+  className?: string
+  children?: React.ReactNode
+} & React.ComponentPropsWithoutRef<'ul'>
+
+export const ComboboxList = React.forwardRef<HTMLUListElement, ComboboxListProps>(function ComboboxList(
+  {className, children, ...rest},
+  ref,
+) {
+  return (
+    <ul role="listbox" ref={ref} className={clsx(classes.ActionList, className)} data-variant="inset" {...rest}>
+      {children}
+    </ul>
+  )
+})
+
+type ComboboxOptionProps = {
+  className?: string
+  children?: React.ReactNode
+  selected?: boolean
+} & React.ComponentPropsWithoutRef<typeof MappedActionListItem>
+
+export const ComboboxOption = React.forwardRef<HTMLLIElement, ComboboxOptionProps>(function ComboboxOption(
+  {className, children = 'Combobox Option', selected, ...rest},
+  _ref,
+) {
+  return (
+    <MappedActionListItem
+      role="option"
+      aria-selected={selected}
+      className={clsx(styles.ActionListItem, className)}
+      {...rest}
+    >
+      {children}
+    </MappedActionListItem>
+  )
+})
+
+type ComboboxGroupProps = {
+  className?: string
+  children: React.ReactNode
+  groupLabel?: string
+} & React.ComponentPropsWithoutRef<'div'>
+
+export const ComboboxGroup = React.forwardRef<HTMLDivElement, ComboboxGroupProps>(function ComboboxGroup(
+  {className, children, groupLabel, ...rest},
+  ref,
+) {
+  return (
+    <div ref={ref} className={clsx(classes.ActionListGroup, className)} {...rest}>
+      {groupLabel && <div>{groupLabel}</div>}
+      {children}
+    </div>
+  )
+})
+
+type ComboboxTitleProps = {
+  className?: string
+  title: React.ReactNode
+  subtitle?: React.ReactNode
+}
+
+export const ComboboxTitle = ({className, title, subtitle, ...rest}: ComboboxTitleProps) => {
+  return (
+    <div className={className} {...rest}>
+      {/* TODO: adjust spread/classname */}
+      <div className={selectPanelStyles.Header}>
+        <div>
+          <Heading as="h1" className={selectPanelStyles.Title}>
+            {title}
+          </Heading>
+          {subtitle ? <div className={selectPanelStyles.Subtitle}>{subtitle}</div> : null}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/react/src/Combobox/index.ts b/packages/react/src/Combobox/index.ts
new file mode 100644
index 00000000000..c2ed68a36b3
--- /dev/null
+++ b/packages/react/src/Combobox/index.ts
@@ -0,0 +1,23 @@
+import {
+  ComboboxRoot,
+  ComboboxList,
+  ComboboxOption,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxTitle,
+  Combobox as ComboboxComponent,
+} from './Combobox'
+
+export const Combobox = Object.assign(ComboboxComponent, {
+  Root: ComboboxRoot,
+  /** List container for combobox options */
+  List: ComboboxList,
+  /** Individual option in the combobox */
+  Option: ComboboxOption,
+  /** Group of related options */
+  Group: ComboboxGroup,
+  /** Input field for the combobox */
+  Input: ComboboxInput,
+  /** Title component for the combobox */
+  Title: ComboboxTitle,
+})
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx
index 6589e9eb983..501606a057d 100644
--- a/packages/react/src/FilteredActionList/FilteredActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx
@@ -1,29 +1,36 @@
-import type {ScrollIntoViewOptions} from '@primer/behaviors'
+/** Behaviors */
 import {scrollIntoView, FocusKeys} from '@primer/behaviors'
-import type {KeyboardEventHandler, JSX} from 'react'
-import type React from 'react'
-import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
-import type {TextInputProps} from '../TextInput'
+
+/** Styles */
+import {clsx} from 'clsx'
+import classes from './FilteredActionList.module.css'
+
+/** Components / Context */
 import TextInput from '../TextInput'
-import {ActionList, type ActionListProps} from '../ActionList'
-import type {GroupedListProps, ListPropsBase, ItemInput, RenderItemFn} from './'
+import {ActionList} from '../ActionList'
+import {VisuallyHidden} from '../VisuallyHidden'
+import {FilteredActionListLoadingTypes, FilteredActionListBodyLoader} from './FilteredActionListLoaders'
+import {ActionListContainerContext} from '../ActionList/ActionListContainerContext'
+import Checkbox from '../Checkbox'
+
+/** React */
+import {useCallback, useEffect, useRef, useState} from 'react'
+
+/** Hooks */
+import {useAnnouncements} from './useAnnouncements'
 import {useFocusZone} from '../hooks/useFocusZone'
 import {useId} from '../hooks/useId'
 import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import useScrollFlash from '../hooks/useScrollFlash'
-import {VisuallyHidden} from '../VisuallyHidden'
-import type {FilteredActionListLoadingType} from './FilteredActionListLoaders'
-import {FilteredActionListLoadingTypes, FilteredActionListBodyLoader} from './FilteredActionListLoaders'
-import classes from './FilteredActionList.module.css'
-import Checkbox from '../Checkbox'
-import {ActionListContainerContext} from '../ActionList/ActionListContainerContext'
-import {isValidElementType} from 'react-is'
-import {useAnnouncements} from './useAnnouncements'
-import {clsx} from 'clsx'
 
-const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
+/** Types */
+import type {ScrollIntoViewOptions} from '@primer/behaviors'
+import type {KeyboardEventHandler, JSX} from 'react'
+import type {FilteredActionListProps} from './types'
+import {MappedActionListItem} from './components/MappedActionListItem'
 
+const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 export interface FilteredActionListProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
   loading?: boolean
   loadingType?: FilteredActionListLoadingType
@@ -244,8 +251,7 @@ export function FilteredActionList({
               scrollIntoView(current, scrollContainerRef.current, menuScrollMargins)
             }
           },
-          focusInStrategy: setInitialFocus ? 'initial' : 'previous',
-          ignoreHoverEvents: disableSelectOnHover,
+          focusInStrategy: 'previous',
         }
       : undefined,
     [listContainerElement, usingRovingTabindex],
@@ -439,61 +445,5 @@ export function FilteredActionList({
     </div>
   )
 }
-const MappedActionListItem = forwardRef<HTMLLIElement, ItemInput & {renderItem?: RenderItemFn}>((item, ref) => {
-  // keep backward compatibility for renderItem
-  // escape hatch for custom Item rendering
-  if (typeof item.renderItem === 'function') return item.renderItem(item)
-
-  const {
-    id,
-    description,
-    descriptionVariant,
-    text,
-    trailingVisual: TrailingVisual,
-    leadingVisual: LeadingVisual,
-    trailingText,
-    trailingIcon: TrailingIcon,
-    onAction,
-    children,
-    ...rest
-  } = item
-
-  return (
-    <ActionList.Item
-      role="option"
-      // @ts-ignore - for now
-      onSelect={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
-        if (typeof onAction === 'function')
-          onAction(item, e as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>)
-      }}
-      data-id={id}
-      ref={ref}
-      {...rest}
-    >
-      {LeadingVisual ? (
-        <ActionList.LeadingVisual>
-          <LeadingVisual />
-        </ActionList.LeadingVisual>
-      ) : null}
-      {children}
-      {text}
-      {description ? <ActionList.Description variant={descriptionVariant}>{description}</ActionList.Description> : null}
-      {TrailingVisual ? (
-        <ActionList.TrailingVisual>
-          {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? (
-            <TrailingVisual />
-          ) : (
-            TrailingVisual
-          )}
-        </ActionList.TrailingVisual>
-      ) : TrailingIcon || trailingText ? (
-        <ActionList.TrailingVisual>
-          {trailingText}
-          {TrailingIcon && <TrailingIcon />}
-        </ActionList.TrailingVisual>
-      ) : null}
-    </ActionList.Item>
-  )
-})
 
 FilteredActionList.displayName = 'FilteredActionList'
diff --git a/packages/react/src/FilteredActionList/components/MappedActionListItem.tsx b/packages/react/src/FilteredActionList/components/MappedActionListItem.tsx
new file mode 100644
index 00000000000..fea081c2d14
--- /dev/null
+++ b/packages/react/src/FilteredActionList/components/MappedActionListItem.tsx
@@ -0,0 +1,59 @@
+import {isValidElementType} from 'react-is'
+import {ActionList} from '../../ActionList'
+import type {ItemInput, RenderItemFn} from '../types'
+
+export function MappedActionListItem(item: ItemInput & {renderItem?: RenderItemFn}) {
+  // keep backward compatibility for renderItem
+  // escape hatch for custom Item rendering
+  if (typeof item.renderItem === 'function') return item.renderItem(item)
+
+  const {
+    id,
+    description,
+    descriptionVariant,
+    text,
+    trailingVisual: TrailingVisual,
+    leadingVisual: LeadingVisual,
+    trailingText,
+    trailingIcon: TrailingIcon,
+    onAction,
+    children,
+    ...rest
+  } = item
+
+  return (
+    <ActionList.Item
+      role="option"
+      // @ts-ignore - for now
+      onSelect={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
+        if (typeof onAction === 'function')
+          onAction(item, e as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>)
+      }}
+      data-id={id}
+      {...rest}
+    >
+      {LeadingVisual ? (
+        <ActionList.LeadingVisual>
+          <LeadingVisual />
+        </ActionList.LeadingVisual>
+      ) : null}
+      {children}
+      {text}
+      {description ? <ActionList.Description variant={descriptionVariant}>{description}</ActionList.Description> : null}
+      {TrailingVisual ? (
+        <ActionList.TrailingVisual>
+          {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? (
+            <TrailingVisual />
+          ) : (
+            TrailingVisual
+          )}
+        </ActionList.TrailingVisual>
+      ) : TrailingIcon || trailingText ? (
+        <ActionList.TrailingVisual>
+          {trailingText}
+          {TrailingIcon && <TrailingIcon />}
+        </ActionList.TrailingVisual>
+      ) : null}
+    </ActionList.Item>
+  )
+}
diff --git a/packages/react/src/FilteredActionList/types.ts b/packages/react/src/FilteredActionList/types.ts
index 7ae5343d46b..6c1a23def04 100644
--- a/packages/react/src/FilteredActionList/types.ts
+++ b/packages/react/src/FilteredActionList/types.ts
@@ -1,8 +1,10 @@
 import type {Key} from 'react'
 import type {Merge} from '../utils/polymorphic'
 import type {Group} from '../ActionList/Group'
-import type {ActionListGroupProps} from '../deprecated'
+import type {ActionListGroupProps, ActionListProps} from '../deprecated'
 import type {AriaRole} from '../utils/types'
+import type {FilteredActionListLoadingType} from './FilteredActionListLoaders'
+import type {TextInputProps} from '../TextInput'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type RenderItemFn = (props: FilteredActionListItemProps) => React.ReactElement<any>
@@ -186,3 +188,61 @@ export interface ListPropsBase {
    */
   showItemDividers?: boolean
 }
+
+export interface FilteredActionListProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
+  loading?: boolean
+  loadingType?: FilteredActionListLoadingType
+  placeholderText?: string
+  filterValue?: string
+  onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement> | null) => void
+  onListContainerRefChanged?: (ref: HTMLElement | null) => void
+  onInputRefChanged?: (ref: React.RefObject<HTMLInputElement>) => void
+  /**
+   * A ref assigned to the scrollable container wrapping the ActionList
+   */
+  scrollContainerRef?: React.Ref<HTMLDivElement | null>
+  textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
+  inputRef?: React.RefObject<HTMLInputElement>
+  message?: React.ReactNode
+  messageText?: {
+    title: string
+    description: string
+  }
+  className?: string
+  announcementsEnabled?: boolean
+  fullScreenOnNarrow?: boolean
+  onSelectAllChange?: (checked: boolean) => void
+  /**
+   * Additional props to pass to the underlying ActionList component.
+   */
+  actionListProps?: Partial<ActionListProps>
+  /**
+   * Determines how keyboard focus behaves when navigating beyond the first or last item in the list.
+   *
+   * - `'stop'`: Focus will stop at the first or last item; further navigation in that direction will not move focus.
+   * - `'wrap'`: Focus will wrap around to the opposite end of the list when navigating past the boundaries (e.g., pressing Down on the last item moves focus to the first).
+   *
+   *  @default 'wrap'
+   */
+  focusOutBehavior?: 'stop' | 'wrap'
+  /**
+   * Private API for use internally only. Adds the ability to switch between
+   * `active-descendant` and roving tabindex.
+   *
+   * By default, FilteredActionList uses `aria-activedescendant` to manage focus.
+   *
+   * Roving tabindex is an alternative focus management method that moves
+   * focus to the list items themselves instead of keeping focus on the input.
+   *
+   * Improper usage can lead to inaccessible experiences, so this prop should be used with caution.
+   *
+   * For usage, refer to the documentation:
+   *
+   * WAI-ARIA `aria-activedescendant`: https://www.w3.org/TR/wai-aria-1.2/#aria-activedescendant
+   *
+   * Roving Tabindex: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
+   *
+   * @default 'active-descendant'
+   */
+  _PrivateFocusManagement?: 'roving-tabindex' | 'active-descendant'
+}
diff --git a/packages/react/src/FilteredActionList/utils.ts b/packages/react/src/FilteredActionList/utils.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/react/src/Listbox/Listbox.module.css b/packages/react/src/Listbox/Listbox.module.css
new file mode 100644
index 00000000000..9bf4d770c4b
--- /dev/null
+++ b/packages/react/src/Listbox/Listbox.module.css
@@ -0,0 +1,4 @@
+.Container {
+  height: 100%;
+  overflow: auto;
+}
\ No newline at end of file
diff --git a/packages/react/src/Listbox/Listbox.stories.module.css b/packages/react/src/Listbox/Listbox.stories.module.css
new file mode 100644
index 00000000000..3a1278bc1cf
--- /dev/null
+++ b/packages/react/src/Listbox/Listbox.stories.module.css
@@ -0,0 +1,6 @@
+.Wrapper {
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    max-height: inherit;
+}
\ No newline at end of file
diff --git a/packages/react/src/Listbox/Listbox.stories.tsx b/packages/react/src/Listbox/Listbox.stories.tsx
new file mode 100644
index 00000000000..0d13c6691eb
--- /dev/null
+++ b/packages/react/src/Listbox/Listbox.stories.tsx
@@ -0,0 +1,309 @@
+import type {Meta, StoryFn} from '@storybook/react-vite'
+import type {ComponentProps} from '../utils/types'
+import {Listbox} from '.'
+import {AnchoredOverlay} from '../AnchoredOverlay'
+import {Button} from '../Button'
+import {FilteredActionList} from '../FilteredActionList'
+import {Combobox} from '../Combobox'
+import React from 'react'
+import {
+  BookIcon,
+  FileCodeIcon,
+  FileDirectoryIcon,
+  FileIcon,
+  FileZipIcon,
+  GitBranchIcon,
+  GitCommitIcon,
+  GitCompareIcon,
+  HeadingIcon,
+  InfoIcon,
+  ListOrderedIcon,
+  ListUnorderedIcon,
+  MarkdownIcon,
+  PencilIcon,
+} from '@primer/octicons-react'
+import {ParagraphIcon} from '@storybook/icons'
+import {ActionList} from '../ActionList'
+import styles from './Listbox.stories.module.css'
+
+export default {
+  title: 'Components/Listbox',
+  component: Listbox,
+} as Meta<ComponentProps<typeof Listbox>>
+
+export const Playground: StoryFn<ComponentProps<typeof Listbox>> = args => <Listbox {...args} />
+
+Playground.argTypes = {
+  ref: {
+    control: false,
+    table: {
+      disable: true,
+    },
+  },
+}
+
+const items = [
+  {text: 'enhancement', id: 1},
+  {text: 'bug', id: 2},
+  {text: 'good first issue', id: 3},
+  {text: 'design', id: 4},
+  {text: 'blocker', id: 5},
+  {text: 'backend', id: 6},
+  {text: 'frontend', id: 7},
+]
+
+export const Default = () => {
+  return (
+    <div>
+      <AnchoredOverlay open={true} renderAnchor={props => <Button {...props}>Open Overlay</Button>}>
+        <FilteredActionList items={items} onFilterChange={() => {}} />
+        <div>
+          <Button variant="primary">Submit</Button>
+        </div>
+      </AnchoredOverlay>
+    </div>
+  )
+}
+
+export const CustomText = () => <Listbox>Custom text content</Listbox>
+
+export const ListboxExample = () => (
+  <Listbox>
+    <Listbox.Item>Item 1</Listbox.Item>
+    <Listbox.Item>Item 2</Listbox.Item>
+    <Listbox.Item>Item 3</Listbox.Item>
+  </Listbox>
+)
+
+export const ListboxInOverlay = () => {
+  const [submenuOpen, setSubmenuOpen] = React.useState(false)
+  const [informationSubmenuOpen, setInformationSubmenuOpen] = React.useState(false)
+  const listboxRef = React.useRef<HTMLUListElement>(null)
+  const trailingRef = React.useRef<HTMLButtonElement>(null)
+  const trailingRef2 = React.useRef<HTMLButtonElement>(null)
+
+  // TODO:
+  // * Ensure that aria-activedescendant is being set on ComboboxInput when navigating options [Done]
+  // * Ensure that AnchoredOverlay is replaced by Combobox.Root [Done]
+  // * Ensure that Combobox.Title is linked to Listbox/Input in terms of accessible name/description
+  // * Ensure that roving tabindex works correctly with Combobox.Input and Listbox options
+
+  return (
+    <div>
+      <Combobox.Root
+        renderAnchor={props => {
+          return <Button {...props}>Open Custom Panel</Button>
+        }}
+        focusMode="roving"
+        anchoredOverlayProps={{
+          height: 'large',
+        }}
+      >
+        <div className={styles.Wrapper}>
+          <Combobox.Root
+            open={informationSubmenuOpen}
+            anchorId="informationSubMenu"
+            anchorRef={trailingRef2}
+            side="outside-right"
+            renderAnchor={null}
+            width="medium"
+            focusMode="roving"
+            anchoredOverlayProps={{
+              overlayProps: {
+                onClickOutside: () => {
+                  setInformationSubmenuOpen(false)
+                },
+                onEscape: () => {
+                  setInformationSubmenuOpen(false)
+                },
+              },
+            }}
+          >
+            <Combobox.Title title="File type / Choose a file type" subtitle="Supported file types" />
+            <Listbox>
+              <Listbox.Item leadingVisual={BookIcon}>Sub Item 1</Listbox.Item>
+              <Listbox.Item leadingVisual={HeadingIcon}>Sub Item 2</Listbox.Item>
+              <Listbox.Item leadingVisual={FileIcon}>Sub Item 3</Listbox.Item>
+            </Listbox>
+          </Combobox.Root>
+          <Combobox.Title title="Choose an option" subtitle="Options are filtered as you type" />
+          <Combobox.Input listboxRef={listboxRef} />
+          <Listbox ref={listboxRef}>
+            <Listbox.Group groupLabel="Group 1">
+              <Listbox.Item leadingVisual={GitBranchIcon}>
+                Overlay Item 1
+                <ActionList.TrailingAction
+                  label="Additional Information"
+                  icon={InfoIcon}
+                  onClick={() => {
+                    setInformationSubmenuOpen(!informationSubmenuOpen)
+                  }}
+                  ref={trailingRef2}
+                />
+              </Listbox.Item>
+              <Listbox.Item
+                leadingVisual={GitCommitIcon}
+                description="Some description for Overlay Item 2"
+                descriptionVariant="block"
+              >
+                Overlay Item 2
+              </Listbox.Item>
+              <Listbox.Item leadingVisual={GitCompareIcon}>Overlay Item 3</Listbox.Item>
+            </Listbox.Group>
+            <Listbox.Group groupLabel="Group 2">
+              <Listbox.Item leadingVisual={PencilIcon}>Overlay Item 4</Listbox.Item>
+              <Listbox.Item leadingVisual={MarkdownIcon}>Overlay Item 5</Listbox.Item>
+              <Listbox.Item leadingVisual={HeadingIcon}>Overlay Item 6</Listbox.Item>
+            </Listbox.Group>
+            <Listbox.Group groupLabel="Group 3">
+              <Listbox.Item leadingVisual={ListUnorderedIcon}>Overlay Item 7</Listbox.Item>
+              <Listbox.Item leadingVisual={ListOrderedIcon}>Overlay Item 8</Listbox.Item>
+              <Listbox.Item leadingVisual={ParagraphIcon}>Overlay Item 9</Listbox.Item>
+            </Listbox.Group>
+            <Listbox.Group groupLabel="Group 4">
+              <Listbox.Item leadingVisual={FileDirectoryIcon}>
+                Overlay Item 1
+                <ActionList.TrailingAction
+                  ref={trailingRef}
+                  label="Some action 1"
+                  icon={InfoIcon}
+                  onClick={() => {
+                    setSubmenuOpen(!submenuOpen)
+                  }}
+                />
+              </Listbox.Item>
+            </Listbox.Group>
+          </Listbox>
+        </div>
+      </Combobox.Root>
+      <AnchoredOverlay
+        open={submenuOpen}
+        anchorId="testing"
+        anchorRef={trailingRef}
+        side="outside-right"
+        renderAnchor={null}
+        width="medium"
+        anchorOffset={10}
+        overlayProps={{
+          onClickOutside: () => {
+            setSubmenuOpen(false)
+          },
+          onEscape: () => {
+            setSubmenuOpen(false)
+          },
+        }}
+      >
+        <Combobox.Title title="File type / Choose a file type" subtitle="Supported file types" />
+        <Listbox>
+          <Listbox.Item leadingVisual={FileIcon}>Sub Item 1</Listbox.Item>
+          <Listbox.Item leadingVisual={FileZipIcon}>Sub Item 2</Listbox.Item>
+          <Listbox.Item leadingVisual={FileCodeIcon}>Sub Item 3</Listbox.Item>
+        </Listbox>
+      </AnchoredOverlay>
+    </div>
+  )
+}
+
+export const ListboxInOverlayFilter = () => {
+  const [submenuOpen, setSubmenuOpen] = React.useState(false)
+  const [filterValue, setFilterValue] = React.useState('') // Add filter state
+  const listboxRef = React.useRef<HTMLUListElement>(null)
+  const trailingRef = React.useRef<HTMLButtonElement>(null)
+
+  // Define your items array
+  const allItems = [
+    {
+      id: 1,
+      text: 'Branch Item 1',
+      icon: GitBranchIcon,
+      group: 'Group 1',
+      trailingAction: {
+        label: 'Trailing Action',
+        icon: InfoIcon,
+        onClick: () => {
+          setSubmenuOpen(prev => !prev)
+        },
+      },
+    },
+    {id: 2, text: 'Commit Item 2', icon: GitCommitIcon, group: 'Group 1'},
+    {id: 3, text: 'Compare Item 3', icon: GitCompareIcon, group: 'Group 1'},
+    {id: 4, text: 'Write Item 4', icon: PencilIcon, group: 'Group 2'},
+    {id: 5, text: 'Markdown Item 5', icon: MarkdownIcon, group: 'Group 2'},
+    {id: 6, text: 'Heading Item 6', icon: HeadingIcon, group: 'Group 2'},
+    {id: 7, text: 'Unordered Item 7', icon: ListUnorderedIcon, group: 'Group 3'},
+    {id: 8, text: 'Ordered Item 8', icon: ListOrderedIcon, group: 'Group 3'},
+    {id: 9, text: 'Paragraph Item 9', icon: ParagraphIcon, group: 'Group 3'},
+  ]
+
+  // Filter items based on input - matches pattern from SelectPanel
+  const filteredItems = allItems.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()))
+
+  // Group filtered items
+  const groupedItems = filteredItems.reduce(
+    (acc, item) => {
+      if (!acc[item.group]) acc[item.group] = []
+      acc[item.group].push(item)
+      return acc
+    },
+    {} as Record<string, typeof allItems>,
+  )
+
+  return (
+    <div>
+      <Combobox.Root
+        renderAnchor={props => <Button {...props}>Open Custom Panel</Button>}
+        focusMode="active-descendant"
+      >
+        <div className={styles.Wrapper}>
+          <Combobox.Title title="Choose an option" subtitle="Options are filtered as you type" />
+          <Combobox.Input
+            listboxRef={listboxRef}
+            value={filterValue}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}
+          />
+          <Listbox ref={listboxRef}>
+            {Object.entries(groupedItems).map(([groupLabel, items]) => (
+              <Listbox.Group key={groupLabel} groupLabel={groupLabel}>
+                {items.map(item => (
+                  <Listbox.Item key={item.id} leadingVisual={item.icon}>
+                    {item.text}
+                    {item.trailingAction && (
+                      <ActionList.TrailingAction
+                        label={item.trailingAction.label}
+                        icon={item.trailingAction.icon}
+                        onClick={item.trailingAction.onClick}
+                        ref={item.id === 1 ? trailingRef : undefined}
+                      />
+                    )}
+                  </Listbox.Item>
+                ))}
+              </Listbox.Group>
+            ))}
+            {filteredItems.length === 0 && (
+              <div style={{padding: '16px', textAlign: 'center', color: 'var(--fgColor-muted)'}}>
+                No results found for: {filterValue}
+              </div>
+            )}
+          </Listbox>
+        </div>
+      </Combobox.Root>
+
+      <AnchoredOverlay
+        open={submenuOpen}
+        anchorId="testing"
+        anchorRef={trailingRef}
+        side="outside-right"
+        renderAnchor={null}
+        width="medium"
+        anchorOffset={10}
+      >
+        <Combobox.Title title="File type / Choose a file type" subtitle="Supported file types" />
+        <Listbox>
+          <Listbox.Item leadingVisual={FileIcon}>Sub Item 1</Listbox.Item>
+          <Listbox.Item leadingVisual={FileZipIcon}>Sub Item 2</Listbox.Item>
+          <Listbox.Item leadingVisual={FileCodeIcon}>Sub Item 3</Listbox.Item>
+        </Listbox>
+      </AnchoredOverlay>
+    </div>
+  )
+}
diff --git a/packages/react/src/Listbox/Listbox.test.tsx b/packages/react/src/Listbox/Listbox.test.tsx
new file mode 100644
index 00000000000..339e7dba1a7
--- /dev/null
+++ b/packages/react/src/Listbox/Listbox.test.tsx
@@ -0,0 +1,30 @@
+import {describe, expect, it} from 'vitest'
+import {render} from '@testing-library/react'
+import Listbox from '.'
+
+describe('Listbox', () => {
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <Listbox className={'test-class-name'} />
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+  })
+
+  it('renders default text content', () => {
+    const rendered = render(<Listbox />)
+    expect(rendered.container.textContent).toEqual('Listbox Component')
+  })
+
+  it('renders custom children', () => {
+    const {getByText} = render(<Listbox>Custom content</Listbox>)
+    expect(getByText('Custom content')).toBeInTheDocument()
+  })
+
+  it('renders as a div by default', () => {
+    const {container} = render(<Listbox />)
+    expect(container.firstChild?.nodeName).toBe('DIV')
+  })
+
+  it('can render as a different element', () => {
+    const {container} = render(<Listbox as="section" />)
+    expect(container.firstChild?.nodeName).toBe('SECTION')
+  })
+})
diff --git a/packages/react/src/Listbox/Listbox.tsx b/packages/react/src/Listbox/Listbox.tsx
new file mode 100644
index 00000000000..b2792db7a03
--- /dev/null
+++ b/packages/react/src/Listbox/Listbox.tsx
@@ -0,0 +1,63 @@
+import {clsx} from 'clsx'
+import classes from '../ActionList/ActionList.module.css'
+import styles from '../FilteredActionList/FilteredActionList.module.css'
+import styles2 from './Listbox.module.css'
+import React from 'react'
+import {MappedActionListItem} from '../FilteredActionList/components/MappedActionListItem'
+import {ActionList} from '../ActionList'
+import {ListContext} from '../ActionList/shared'
+
+export type ListboxProps = {
+  children?: React.ReactNode
+  /** Defines the keyboard navigation mode for the Listbox */
+  focusMode?: 'roving' | 'active-descendant'
+}
+
+export const List = React.forwardRef<HTMLUListElement, ListboxProps & {className?: string}>(function Listbox(
+  {className, children, focusMode, ...rest},
+  ref,
+) {
+  // TODO: Add conditional logic for focusMode prop
+
+  return (
+    <ListContext.Provider
+      value={{
+        selectionVariant: 'single',
+      }}
+    >
+      <div className={styles2.Container}>
+        <ul role="listbox" ref={ref} className={clsx(classes.ActionList, className)} data-variant="inset" {...rest}>
+          {children}
+        </ul>
+      </div>
+    </ListContext.Provider>
+  )
+})
+
+type ListItemProps = {
+  className?: string
+  children?: React.ReactNode
+} & React.ComponentPropsWithoutRef<typeof MappedActionListItem>
+
+export const ListItem = ({className, children = 'List Item', ...rest}: ListItemProps) => {
+  return (
+    <MappedActionListItem className={clsx(styles.ActionListItem, className)} {...rest}>
+      {children}
+    </MappedActionListItem>
+  )
+}
+
+type ListGroupProps = {
+  children: React.ReactNode
+  groupLabel: string
+  className?: string // TODO: modify
+}
+
+export const ListGroup = ({children = 'List Group', groupLabel, className, ...rest}: ListGroupProps) => {
+  return (
+    <ActionList.Group className={clsx(classes.ActionListGroup, className)} {...rest}>
+      <ActionList.GroupHeading as="h2">{groupLabel}</ActionList.GroupHeading>
+      {children}
+    </ActionList.Group>
+  )
+}
diff --git a/packages/react/src/Listbox/index.ts b/packages/react/src/Listbox/index.ts
new file mode 100644
index 00000000000..913fe7da76e
--- /dev/null
+++ b/packages/react/src/Listbox/index.ts
@@ -0,0 +1,7 @@
+import {List, ListItem, ListGroup} from './Listbox'
+
+export const Listbox = Object.assign(List, {
+  /** Collects related `Items` in a `List`. */
+  Item: ListItem,
+  Group: ListGroup,
+})
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index a705ea647a0..c51267e0c14 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -1,5 +1,5 @@
 import {SearchIcon, TriangleDownIcon, XIcon, type IconProps} from '@primer/octicons-react'
-import React, {useCallback, useEffect, useMemo, useRef, useState, type KeyboardEventHandler, type JSX} from 'react'
+import React, {useCallback, useEffect, useMemo, useRef, useState, type JSX} from 'react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import type {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay'
@@ -20,17 +20,17 @@ import useSafeTimeout from '../hooks/useSafeTimeout'
 import type {FilteredActionListLoadingType} from '../FilteredActionList/FilteredActionListLoaders'
 import {FilteredActionListLoadingTypes} from '../FilteredActionList/FilteredActionListLoaders'
 import {useFeatureFlag} from '../FeatureFlags'
-import {announce, announceFromElement} from '@primer/live-region-element'
+import {announceFromElement} from '@primer/live-region-element'
 import classes from './SelectPanel.module.css'
 import {clsx} from 'clsx'
 import {debounce} from '@github/mini-throttle'
 import {useResponsiveValue} from '../hooks/useResponsiveValue'
 import type {ButtonProps, LinkButtonProps} from '../Button/types'
 import {Banner} from '../Banner'
-import {isAlphabetKey} from '../hooks/useMnemonics'
+import {announceLoading, preventBubbling} from './utils/utils'
+import type {InitialLoadingType, SelectPanelMultiSelection, SelectPanelSingleSelection} from './types'
 
 // we add a delay so that it does not interrupt default screen reader announcement and queues after it
-const SHORT_DELAY_MS = 500
 const LONG_DELAY_MS = 1000
 const EMPTY_MESSAGE = {
   title: 'No items available',
@@ -43,32 +43,6 @@ const DefaultEmptyMessage = (
   </SelectPanelMessage>
 )
 
-async function announceText(text: string, delayMs = SHORT_DELAY_MS) {
-  const liveRegion = document.querySelector('live-region')
-
-  liveRegion?.clear() // clear previous announcements
-
-  await announce(text, {
-    delayMs,
-    from: liveRegion ? liveRegion : undefined, // announce will create a liveRegion if it doesn't find one
-  })
-}
-
-async function announceLoading() {
-  await announceText('Loading.')
-}
-
-interface SelectPanelSingleSelection {
-  selected: ItemInput | undefined
-  onSelectedChange: (selected: ItemInput | undefined) => void
-}
-
-interface SelectPanelMultiSelection {
-  selected: ItemInput[]
-  onSelectedChange: (selected: ItemInput[]) => void
-}
-
-export type InitialLoadingType = 'spinner' | 'skeleton'
 export type SelectPanelSecondaryAction =
   | React.ReactElement<typeof SecondaryButton>
   | React.ReactElement<typeof SecondaryLink>
@@ -550,6 +524,7 @@ function Panel({
     [selected, intermediateSelected, isSingleSelectModal],
   )
 
+  // [Hook]
   const itemsToRender = useMemo(() => {
     return items
       .map(item => {
@@ -648,10 +623,12 @@ function Panel({
     resetSort()
   }
 
+  // [Variable]
   const focusTrapSettings = {
     initialFocusRef: inputRef || undefined,
   }
 
+  // [Hook]
   const extendedTextInputProps: Partial<TextInputProps> = useMemo(() => {
     return {
       className: classes.TextInput,
@@ -662,6 +639,7 @@ function Panel({
     }
   }, [inputLabel, textInputProps])
 
+  // [Function] returns JSX
   const loadingType = (): FilteredActionListLoadingType => {
     if (dataLoadedOnce) {
       return FilteredActionListLoadingTypes.input
@@ -674,6 +652,7 @@ function Panel({
     }
   }
 
+  // [Function] returns JSX
   function getMessage() {
     if (items.length === 0 && !message) {
       return DefaultEmptyMessage
@@ -688,12 +667,14 @@ function Panel({
 
   // We add permanent save and cancel buttons on:
   // - modals
+  // [Variable]
   const showPermanentCancelSaveButtons = variant === 'modal'
 
   // The next two could be collapsed, left them separate for readability
 
   // We add a responsive save and cancel button on:
   // - anchored panels with multi select if there is onCancel
+  // [Variable]
   const showResponsiveCancelSaveButtons =
     variant !== 'modal' && usingFullScreenOnNarrow && isMultiSelectVariant(selected) && onCancel !== undefined
 
@@ -701,10 +682,12 @@ function Panel({
   // - anchored panel with multi select if there is no onCancel.
   // This variant should disappear in the future, once onCancel is required,
   // but for now we need to support it so there is a user friendly way to close the panel.
+  // [Variable]
   const showResponsiveSaveAndCloseButton =
     variant !== 'modal' && usingFullScreenOnNarrow && isMultiSelectVariant(selected) && onCancel === undefined
 
   // If there is any element in the footer, we render it.
+  // [Variable]
   const renderFooter =
     secondaryAction !== undefined ||
     showPermanentCancelSaveButtons ||
@@ -713,6 +696,7 @@ function Panel({
 
   // If there's any permanent elements in the footer, we show it always.
   // The save button is only shown on small screens.
+  // [Variable]
   const displayFooter =
     secondaryAction !== undefined || showPermanentCancelSaveButtons
       ? 'always'
@@ -720,6 +704,7 @@ function Panel({
         ? 'only-small'
         : undefined
 
+  // [Variable]
   const stretchSecondaryAction =
     showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons
       ? 'only-big'
@@ -727,6 +712,7 @@ function Panel({
         ? 'never'
         : 'always'
 
+  // [Variable]
   const stretchSaveButton = showResponsiveSaveAndCloseButton && secondaryAction === undefined ? 'only-small' : 'never'
 
   /*
@@ -740,35 +726,15 @@ function Panel({
    * The dual approach handles different responsive behaviors: AnchoredOverlay manages
    * close functionality for narrow fullscreen, while SelectPanel handles modal close on desktop.
    */
+  // [Variable]
   const showXCloseIcon = (onCancel !== undefined || !isMultiSelectVariant(selected)) && usingFullScreenOnNarrow
 
+  // [Hook]
   const currentResponsiveVariant = useResponsiveValue(
     usingFullScreenOnNarrow ? {regular: 'anchored', narrow: 'fullscreen'} : undefined,
     'anchored',
   )
 
-  const preventBubbling =
-    (customOnKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined) =>
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      // skip if a TextInput has focus
-      customOnKeyDown?.(event)
-
-      const activeElement = document.activeElement as HTMLElement
-      if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') return
-
-      // skip if used with modifier to preserve shortcuts like ⌘ + F
-      const hasModifier = event.ctrlKey || event.altKey || event.metaKey
-      if (hasModifier) return
-
-      // skip if it's not the forward slash or an alphabet key
-      if (event.key !== '/' && !isAlphabetKey(event.nativeEvent as KeyboardEvent)) {
-        return
-      }
-
-      // if this is a typeahead event, don't propagate outside of menu
-      event.stopPropagation()
-    }
-
   return (
     <>
       <AnchoredOverlay
diff --git a/packages/react/src/SelectPanel/types.ts b/packages/react/src/SelectPanel/types.ts
new file mode 100644
index 00000000000..b537b2bef47
--- /dev/null
+++ b/packages/react/src/SelectPanel/types.ts
@@ -0,0 +1,16 @@
+import type {ItemInput} from '../FilteredActionList'
+
+export interface SelectPanelSingleSelection {
+  selected: ItemInput | undefined
+  onSelectedChange: (selected: ItemInput | undefined) => void
+}
+
+export interface SelectPanelMultiSelection {
+  selected: ItemInput[]
+  onSelectedChange: (selected: ItemInput[]) => void
+}
+
+export type InitialLoadingType = 'spinner' | 'skeleton'
+export type SelectPanelSecondaryAction =
+  | React.ReactElement<typeof SecondaryButton>
+  | React.ReactElement<typeof SecondaryLink>
diff --git a/packages/react/src/SelectPanel/utils/utils.ts b/packages/react/src/SelectPanel/utils/utils.ts
new file mode 100644
index 00000000000..33c03208d73
--- /dev/null
+++ b/packages/react/src/SelectPanel/utils/utils.ts
@@ -0,0 +1,42 @@
+import type {KeyboardEventHandler} from 'react'
+import {isAlphabetKey} from '../../hooks/useMnemonics'
+import {announce} from '@primer/live-region-element'
+
+const SHORT_DELAY_MS = 500
+
+export const preventBubbling =
+  (customOnKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined) =>
+  (event: React.KeyboardEvent<HTMLDivElement>) => {
+    // skip if a TextInput has focus
+    customOnKeyDown?.(event)
+
+    const activeElement = document.activeElement as HTMLElement
+    if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') return
+
+    // skip if used with modifier to preserve shortcuts like ⌘ + F
+    const hasModifier = event.ctrlKey || event.altKey || event.metaKey
+    if (hasModifier) return
+
+    // skip if it's not the forward slash or an alphabet key
+    if (event.key !== '/' && !isAlphabetKey(event.nativeEvent as KeyboardEvent)) {
+      return
+    }
+
+    // if this is a typeahead event, don't propagate outside of menu
+    event.stopPropagation()
+  }
+
+export async function announceText(text: string, delayMs = SHORT_DELAY_MS) {
+  const liveRegion = document.querySelector('live-region')
+
+  liveRegion?.clear() // clear previous announcements
+
+  await announce(text, {
+    delayMs,
+    from: liveRegion ? liveRegion : undefined, // announce will create a liveRegion if it doesn't find one
+  })
+}
+
+export async function announceLoading() {
+  await announceText('Loading.')
+}