diff --git a/.changeset/combobox.md b/.changeset/combobox.md
new file mode 100644
index 0000000..67b01c8
--- /dev/null
+++ b/.changeset/combobox.md
@@ -0,0 +1,46 @@
+---
+'@dunky.dev/combobox': minor
+'@dunky.dev/react-combobox': minor
+---
+
+Add the Combobox primitive — an editable combobox with list autocomplete
+following the WAI-ARIA APG pattern, shipped as an agnostic core
+(`@dunky.dev/combobox`) plus a React binding (`@dunky.dev/react-combobox`).
+
+DOM focus stays in the input the whole time (`aria-activedescendant` tracks
+the highlighted suggestion), items register themselves from the render tree,
+and the machine owns navigation, highlighting, and selection. Filtering is
+the consumer's: render the Items that match the input text — the machine
+navigates whatever is rendered, keeping arrow-key order aligned with the
+rendered order even as filtering unmounts, remounts, or re-sorts items in
+place. Value, input
+text, and open state are each controlled or uncontrolled; every change is
+reported through `onValueChange` / `onInputValueChange` / `onOpenChange` /
+`onHighlightChange`. The open listbox joins the shared overlay layer stack,
+so Escape and outside interactions dismiss one layer at a time across
+primitives.
+
+```tsx
+import { useState } from 'react'
+import { Combobox } from '@dunky.dev/react-combobox'
+
+const fruits = ['Apple', 'Banana', 'Cherry']
+
+function App() {
+  const [query, setQuery] = useState('')
+  const matches = fruits.filter(fruit => fruit.toLowerCase().includes(query.toLowerCase()))
+  return (
+    <Combobox inputValue={query} onInputValueChange={setQuery} onValueChange={console.log}>
+      <Combobox.Input aria-label='Fruit' />
+      <Combobox.Trigger aria-label='Show fruits'>▾</Combobox.Trigger>
+      <Combobox.Listbox>
+        {matches.map(fruit => (
+          <Combobox.Item key={fruit} value={fruit.toLowerCase()} label={fruit}>
+            {fruit} <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
+          </Combobox.Item>
+        ))}
+      </Combobox.Listbox>
+    </Combobox>
+  )
+}
+```
diff --git a/packages/core/combobox/README.md b/packages/core/combobox/README.md
new file mode 100644
index 0000000..57d95be
--- /dev/null
+++ b/packages/core/combobox/README.md
@@ -0,0 +1,32 @@
+# @dunky.dev/combobox
+
+The framework-agnostic combobox interaction, modeled as a state machine on
+`@dunky.dev/state-machine`. Pure logic — no substrate, no framework. Consumers
+pair it with a substrate driver rather than driving the machine directly.
+
+The behavior contract — scenarios, guarantees, driver obligations — lives in
+[SPEC.md](./SPEC.md).
+
+## Install
+
+```sh
+npm install @dunky.dev/combobox
+```
+
+## Usage
+
+```ts
+import { machine, connector } from '@dunky.dev/state-machine'
+import { comboboxMachine, comboboxConnect } from '@dunky.dev/combobox'
+
+// `id` is substrate-minted (SSR-safe); the connect derives the per-part ids.
+const service = machine(comboboxMachine({ ...options, id: 'my-combobox' }))
+connector(service, comboboxConnect, options) // wires the consumer callbacks
+service.start()
+
+// The substrate reports the rendered suggestions; the machine navigates them.
+service.send({ type: 'item.register', item: { value: 'apple', label: 'Apple', disabled: false } })
+service.send({ type: 'input', value: 'ap' }) // typing opens the list
+service.send({ type: 'highlight.next' })
+service.send({ type: 'select' }) // commits: value 'apple', input text 'Apple'
+```
diff --git a/packages/core/combobox/SPEC.md b/packages/core/combobox/SPEC.md
new file mode 100644
index 0000000..bdb6272
--- /dev/null
+++ b/packages/core/combobox/SPEC.md
@@ -0,0 +1,195 @@
+# SPEC / Combobox
+
+## Reference
+
+- **W3C pattern**: [APG Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/),
+  the editable variant with list autocomplete and manual selection, over the
+  normative
+  [WAI-ARIA 1.2 `combobox` / `listbox` / `option`](https://www.w3.org/TR/wai-aria-1.2/#combobox)
+  definitions.
+- **State machine**: built on `@dunky.dev/state-machine`.
+- **Prior art**: API shape modeled on the Ark and Base UI comboboxes (Radix
+  has none).
+- **Layering**: dismissal routing follows the shared overlay layer stack —
+  see `@dunky.dev/dom-layer-stack`.
+
+## Overview
+
+A combobox is a text input paired with a listbox of suggestions: the user
+types freely, the list narrows to what matches, and picking a suggestion
+commits it as the value. It is the home for search-and-pick interactions —
+choosing a country, assigning a user, jumping to a file — where the option
+set is too large to scan and the user knows (part of) what they're looking
+for. The input text and the committed value are two different things: text is
+free, the value only ever comes from a suggestion.
+
+## Anatomy
+
+```
+<Combobox>              — root; owns value + input text + open state, renders
+  |                       nothing of its own
+  |_ <Input>            — the text field; DOM focus lives here the whole time
+  |_ <Trigger>          — optional disclosure button; not in the tab order
+  |_ <Listbox>          — the popup list of suggestions
+     |_ <Item>             — one suggestion; registers itself with the machine
+        |_ <ItemIndicator> — the "this one is chosen" mark, rendered only
+                             inside the selected item
+```
+
+## Behavior
+
+Using the combobox is a walkthrough of intent, not a prop list:
+
+- The **root** owns three pieces of state, each exposed controlled and
+  uncontrolled: the value (which suggestion is chosen), the input text, and
+  the open state. Every change to any of them — whatever caused it — is
+  reported back through its callback so a controlled consumer stays in sync.
+- **Typing** updates the input text, opens the list, and clears the highlight
+  (the suggestion set is about to change). Filtering is the consumer's
+  responsibility: they decide which Items to render from the input text — the
+  machine never filters, it navigates whatever is rendered.
+- **Arrow keys** open the list when it is closed — ArrowDown starting the
+  highlight from the selected suggestion (when rendered and enabled) else the
+  first enabled one, ArrowUp from the selection else the last. While open they
+  move the highlight across enabled suggestions: disabled ones are skipped,
+  and the `loop` option decides whether the ends wrap around. Moving the
+  pointer over an enabled suggestion moves the highlight there too — keyboard
+  and pointer drive the same highlight.
+- **Selecting** — Enter on the highlighted suggestion, or pressing one —
+  commits: the value becomes the item's value, the input text becomes its
+  label, and the list closes. Enter with nothing highlighted just closes.
+  Free-typed text never commits itself: the value only ever comes from an
+  item.
+- The **trigger** is an optional disclosure button that toggles the list. It
+  is not a tab stop — the input is the one place keyboard focus lives.
+- **Escape** closes without selecting; so does any interaction outside the
+  combobox — a press, or focus moving out (Tab included). The consumer can
+  veto a single occurrence of either from its handler.
+- **Items** are not configuration: each suggestion registers itself with the
+  machine (value, label, disabled) when it appears, re-registers when its
+  label, disabled state, or rendered position changes, and unregisters when
+  it goes away — so the suggestion list always mirrors what is actually
+  rendered, keystroke by keystroke. A disabled item is skipped by navigation,
+  cannot be highlighted, and pressing it does nothing.
+- A **disabled** combobox never opens, by any input.
+
+The combobox participates in the shared overlay layer stack
+(`@dunky.dev/dom-layer-stack`) while open: a combobox opened from within
+another overlay — a dialog, a popover — stacks on top of it, Escape unwinds
+one layer per press, and an interaction inside a nested layer never counts as
+outside the one beneath. Being registered is also what keeps the open listbox
+reachable when it floats above a modal layer.
+
+## States
+
+| State    | Behavior                                                                                                                                                          |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `closed` | Only the input (and trigger) are interactive. Open intents — typing, arrow keys, trigger press, imperative open — move to `open` unless the combobox is disabled. |
+| `open`   | The listbox shows and a highlight tracks the active suggestion. Navigation moves the highlight; selection commits and closes; dismissal closes without selecting. |
+
+### Highlight
+
+The highlight exists only while open, and unlike a select it is optional —
+the resting state while the user types is "nothing highlighted". It is seeded
+by the arrow key that opens the list, moved by navigation and pointer, cleared
+by typing, and cleared on every close. The highlighted suggestion
+unregistering (filtered out from under the highlight) clears it, as does
+re-registering as disabled.
+
+### Input text
+
+The input text is free-form and belongs to the user until a selection
+commits: typing and controlled updates are the only things that change it
+besides selection (which replaces it with the chosen item's label). Closing
+without selecting — Escape, outside interaction — leaves the text exactly as
+typed; syncing a controlled value from outside doesn't touch it either.
+
+## Accessibility
+
+Per the APG editable combobox with list autocomplete:
+
+- **Roles**: the input is a `combobox` with `aria-autocomplete="list"`,
+  `aria-expanded`, and `aria-controls` naming the listbox. The popup is a
+  `listbox`; every item is an `option` carrying `aria-selected`, and
+  `aria-disabled` when disabled. The trigger carries
+  `aria-haspopup="listbox"` and mirrors `aria-expanded`.
+- **Focus**: DOM focus stays in the input the whole time — the listbox is
+  never focused. While open, `aria-activedescendant` on the input names the
+  highlighted option's id, and is absent while nothing is highlighted. No
+  focus moves on open/close means closing never needs a focus restore.
+- **Keyboard** (on the input, since focus never leaves it):
+
+  | Key                 | Closed                                             | Open                                         |
+  | ------------------- | -------------------------------------------------- | -------------------------------------------- |
+  | Printable / editing | edits the text, opens the list                     | edits the text, clears the highlight         |
+  | ArrowDown           | opens, highlights the selection else first enabled | moves the highlight down (wraps when `loop`) |
+  | ArrowUp             | opens, highlights the selection else last enabled  | moves the highlight up (wraps when `loop`)   |
+  | Enter               | — (native: submits the form)                       | selects the highlighted suggestion, closes   |
+  | Escape              | —                                                  | closes without selecting                     |
+  | Home / End          | native caret movement                              | native caret movement — never the highlight  |
+  | Tab                 | moves focus on                                     | focus out is an outside interaction — closes |
+
+- **Disabled**: a disabled combobox exposes `aria-disabled`; whether the
+  input also refuses text entry is the substrate's native concern.
+- **Hidden while closed**: the listbox stays rendered (suggestions keep their
+  registration and ids stable) but is removed from the accessibility tree.
+
+## Constraints
+
+- The value only ever comes from a registered, enabled item — free-typed
+  input text never becomes the value.
+- A disabled item can never be selected or highlighted, by any input.
+- `aria-activedescendant` only ever references an option that is rendered and
+  highlighted; it is absent while closed or while nothing is highlighted.
+- Item values must be unique within one combobox and contain no whitespace —
+  option ids are derived from them.
+- Navigation order always matches the rendered order of the suggestions, even
+  as the consumer's filtering unmounts and remounts items between keystrokes —
+  or a keyed re-sort moves them in place without unmounting anything.
+- Every value, input-text, open, and highlight change is reported: whatever
+  its cause, the matching callback fires — value, then input text, then
+  highlight, then open within one interaction.
+- The machine never filters: which suggestions exist is decided entirely by
+  what the consumer renders.
+- Out of scope for v0, on purpose: multiple selection; committing free-typed
+  values (the input text is free, the value is not); inline autocomplete
+  (`aria-autocomplete` is always `list`); virtualization; a positioning
+  engine or portal part (the consumer positions the popup — `data-state` is
+  the styling hook); scrolling the highlighted option into view; a Label part
+  (label the input via `aria-label`/`aria-labelledby` or a native `<label>`);
+  IME composition guarding (Enter and the arrow keys reach the machine as
+  regular keys while a composition session is active — needs an `isComposing`
+  flag in the shared bindings vocabulary before it can land here).
+
+## Internals
+
+- **The highlight lives in the machine.** Navigation, pointer moves, disabled
+  skipping, and loop wrapping resolve inside the machine, so every substrate
+  inherits the same model instead of re-implementing it.
+- **Items are machine context, kept fresh by lifecycle events — and
+  registration carries the item's rendered position.** Where a suggestion
+  sits among its siblings is a host fact only the substrate can observe:
+  consumer filtering unmounts and remounts items, and a keyed re-sort moves
+  them without unmounting, so append-order would drift from the rendered
+  order. The substrate re-reports the position as the render changes; folding
+  it into the navigation order — moving a registered item whose reported
+  position changed, ignoring a report that changes nothing — is the
+  machine's, like every other decision that reads the registry.
+- **A press inside the combobox never steals focus.** The item, the listbox
+  surface between items, and the trigger all cancel the pointer-down default,
+  so DOM focus stays in the input through any press and the activedescendant
+  model holds.
+- **Callback order is a reaction-order contract.** `onValueChange`,
+  `onInputValueChange`, `onHighlightChange`, and `onOpenChange` are connect
+  reactions registered in that order — within one interaction they always
+  fire value, then input text, then highlight, then open.
+- **Dismissal is detected by the substrate, decided by the machine.** The
+  combobox has no backdrop, so outside interaction is document-level
+  substrate work (`@dunky.dev/dom-interact-outside`, with the input and
+  trigger excused as the anchor), and Escape is a document-level listener
+  gated to the topmost layer. Both report intents — the consumer's veto
+  handler fires first, then `interact.outside` / `escape` is sent — and the
+  machine owns what dismissal does, never a binding.
+- **Selection is one transition.** Committing writes the value and the input
+  text and closes in a single `select` transition, so the callbacks of one
+  selection fire once each, in the contract order.
diff --git a/packages/core/combobox/package.json b/packages/core/combobox/package.json
new file mode 100644
index 0000000..c06eb15
--- /dev/null
+++ b/packages/core/combobox/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@dunky.dev/combobox",
+  "version": "0.0.0",
+  "description": "Framework-agnostic combobox interaction, modeled as a state machine.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dunky-dev/ui.git",
+    "directory": "packages/core/combobox"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "publishConfig": {
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      }
+    },
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown"
+  },
+  "dependencies": {
+    "@dunky.dev/state-machine": "^0.1.0",
+    "@dunky.dev/state-machine-bindings": "^0.1.0"
+  }
+}
diff --git a/packages/core/combobox/src/connect.ts b/packages/core/combobox/src/connect.ts
new file mode 100644
index 0000000..9dbda20
--- /dev/null
+++ b/packages/core/combobox/src/connect.ts
@@ -0,0 +1,225 @@
+import { makeReaction, type Connect } from '@dunky.dev/state-machine'
+import type {
+  AttrBindings,
+  EventBindings,
+  KeyboardPayload,
+  PointerPayload,
+} from '@dunky.dev/state-machine-bindings'
+import type {
+  ComboboxContext,
+  ComboboxIds,
+  ComboboxItemStateName,
+  ComboboxMachineEvent,
+  ComboboxOptions,
+  ComboboxStateName,
+} from './types'
+
+// The bindings a part carries, drawn from the shared agnostic vocabulary; the
+// index signature keeps parts assignable to the loose shape each substrate's
+// normalize() accepts. The data attributes are the styling/animation hooks:
+// `data-state` everywhere, plus presence hooks (`data-highlighted`,
+// `data-disabled`) rendered as empty strings.
+export type ComboboxPartBindings = EventBindings &
+  AttrBindings & {
+    'data-state'?: ComboboxStateName | ComboboxItemStateName
+    'data-highlighted'?: ''
+    'data-disabled'?: ''
+  } & Record<string, unknown>
+
+// The cross-part ids all derive from the one base id, so the input's
+// aria-controls, the listbox's id, and the item ids named by
+// aria-activedescendant always agree.
+function comboboxIds(id: string): ComboboxIds {
+  return { input: `${id}-input`, listbox: `${id}-listbox` }
+}
+
+// Item values are constrained (unique, no whitespace — see SPEC) exactly so
+// this derivation yields valid, stable ids.
+function itemId(id: string, value: string): string {
+  return `${id}-item-${value}`
+}
+
+/** What a substrate item hands back to `parts.item` to get its bindings. */
+export interface ComboboxItemBindingProps {
+  value: string
+  disabled?: boolean
+}
+
+/** The view-facing surface a driver reads from the running combobox machine. */
+export interface ComboboxApi {
+  open: boolean
+  value: string | null
+  inputValue: string
+  highlightedValue: string | null
+  disabled: boolean
+  ids: ComboboxIds
+  setOpen: (open: boolean) => void
+  /**
+   * Report a detected outside interaction. A combobox has no backdrop to catch
+   * presses, so detection is substrate work; this is where the intent enters —
+   * the consumer's veto handler fires first, then the machine gates dismissal.
+   */
+  onInteractOutside: (event?: PointerPayload) => void
+  parts: {
+    input: ComboboxPartBindings
+    trigger: ComboboxPartBindings
+    listbox: ComboboxPartBindings
+    item: (props: ComboboxItemBindingProps) => ComboboxPartBindings
+    itemIndicator: ComboboxPartBindings
+  }
+}
+
+export const comboboxConnect: Connect<
+  ComboboxStateName,
+  ComboboxContext,
+  ComboboxMachineEvent,
+  ComboboxOptions,
+  ComboboxApi
+> = ({ state, context, props, send }) => {
+  const open = state === 'open'
+  const dataState: ComboboxStateName = open ? 'open' : 'closed'
+  const ids = comboboxIds(context.id)
+  const highlightedValue = context.highlightedValue
+
+  // The keyboard model lives here — DOM focus stays in the input, so every
+  // key arrives through this one handler and every substrate inherits the
+  // same mapping. Arrow keys cancel the substrate default (caret move, page
+  // scroll); Enter only while open (no form submit mid-interaction); Home/End
+  // keep their native caret behavior; Escape is a document-level layer
+  // concern, not the input's.
+  const onInputKeyDown = (event?: KeyboardPayload): void => {
+    if (event?.key === undefined) return
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault?.()
+        send({ type: 'highlight.next' })
+        return
+      case 'ArrowUp':
+        event.preventDefault?.()
+        send({ type: 'highlight.prev' })
+        return
+      case 'Enter':
+        if (!open) return
+        event.preventDefault?.()
+        send({ type: 'select' })
+        return
+    }
+  }
+
+  return {
+    open,
+    value: context.value,
+    inputValue: context.inputValue,
+    highlightedValue,
+    disabled: context.disabled,
+    ids,
+    setOpen(next) {
+      if (open === next) return
+      send({ type: next ? 'open' : 'close' })
+    },
+    // An outside interaction is an intent, not a close command: the consumer
+    // may veto it; whether it dismisses is decided in the machine.
+    onInteractOutside(event) {
+      props.onInteractOutside?.(event)
+      if (event?.defaultPrevented !== true) send({ type: 'interact.outside' })
+    },
+    parts: {
+      input: {
+        id: ids.input,
+        role: 'combobox',
+        autoComplete: 'list',
+        expanded: open,
+        // Always present: the listbox stays rendered while closed.
+        controls: ids.listbox,
+        // Announced here; enforcing text entry is the substrate's native concern.
+        disabled: context.disabled || undefined,
+        activeDescendant:
+          open && highlightedValue !== null ? itemId(context.id, highlightedValue) : undefined,
+        'data-state': dataState,
+        'data-disabled': context.disabled ? '' : undefined,
+        onValueChange: event => {
+          if (typeof event?.value === 'string') send({ type: 'input', value: event.value })
+        },
+        onKeyDown: onInputKeyDown,
+      },
+      trigger: {
+        hasPopup: 'listbox',
+        expanded: open,
+        controls: ids.listbox,
+        disabled: context.disabled || undefined,
+        // Not a tab stop: the input is the one place keyboard focus lives.
+        focusable: false,
+        'data-state': dataState,
+        'data-disabled': context.disabled ? '' : undefined,
+        onPress: () => send({ type: 'toggle' }),
+        // Pressing the trigger must not blur the input, even transiently — it
+        // is a caret on the input's popup, not a focus target.
+        onPointerDown: event => event?.preventDefault?.(),
+      },
+      listbox: {
+        id: ids.listbox,
+        role: 'listbox',
+        // Out of the accessibility tree while closed; the substrate hides it
+        // visually.
+        hidden: open ? undefined : true,
+        'data-state': dataState,
+        // A press on the surface itself — padding, gaps between options —
+        // must not move DOM focus out of the input: the whole interaction
+        // lives on the activedescendant model.
+        onPointerDown: event => event?.preventDefault?.(),
+      },
+      item: itemProps => {
+        const selected = context.value === itemProps.value
+        const disabled = itemProps.disabled === true
+        return {
+          id: itemId(context.id, itemProps.value),
+          role: 'option',
+          selected,
+          disabled: disabled || undefined,
+          'data-state': selected ? 'selected' : 'unselected',
+          'data-highlighted': highlightedValue === itemProps.value ? '' : undefined,
+          'data-disabled': disabled ? '' : undefined,
+          onPress: () => send({ type: 'select', value: itemProps.value }),
+          onPointerMove: () => send({ type: 'highlight.set', value: itemProps.value }),
+          // A press must not steal DOM focus from the input — the whole
+          // interaction lives on the activedescendant model.
+          onPointerDown: event => event?.preventDefault?.(),
+        }
+      },
+      // Selection is announced via aria-selected on the option; the visual
+      // mark is decoration.
+      itemIndicator: {
+        hidden: true,
+      },
+    },
+  }
+}
+
+const reaction = makeReaction<
+  ComboboxStateName,
+  ComboboxContext,
+  ComboboxMachineEvent,
+  ComboboxOptions
+>()
+
+// One reaction per consumer callback. Reactions fire in registration order within
+// a single setContext — that order is the callback-order contract: value, then
+// input text, then highlight, then open. See SPEC.md.
+comboboxConnect.reactions = [
+  reaction(
+    m => m.context.value,
+    (value, props) => props.onValueChange?.(value),
+  ),
+  reaction(
+    m => m.context.inputValue,
+    (value, props) => props.onInputValueChange?.(value),
+  ),
+  reaction(
+    m => m.context.highlightedValue,
+    (value, props) => props.onHighlightChange?.(value),
+  ),
+  reaction(
+    m => m.matches('open'),
+    (open, props) => props.onOpenChange?.(open),
+  ),
+]
diff --git a/packages/core/combobox/src/index.ts b/packages/core/combobox/src/index.ts
new file mode 100644
index 0000000..8dd1270
--- /dev/null
+++ b/packages/core/combobox/src/index.ts
@@ -0,0 +1,18 @@
+export { comboboxMachine, type ComboboxMachine } from './machine'
+export {
+  comboboxConnect,
+  type ComboboxApi,
+  type ComboboxItemBindingProps,
+  type ComboboxPartBindings,
+} from './connect'
+export type {
+  ComboboxCallbacks,
+  ComboboxContext,
+  ComboboxIds,
+  ComboboxItem,
+  ComboboxItemStateName,
+  ComboboxMachineEvent,
+  ComboboxOptions,
+  ComboboxStateName,
+} from './types'
+export type { KeyboardPayload, PointerPayload } from '@dunky.dev/state-machine-bindings'
diff --git a/packages/core/combobox/src/machine.ts b/packages/core/combobox/src/machine.ts
new file mode 100644
index 0000000..24c1d72
--- /dev/null
+++ b/packages/core/combobox/src/machine.ts
@@ -0,0 +1,261 @@
+import {
+  setup,
+  type Action,
+  type Guard,
+  type Machine,
+  type TransitionConfig,
+} from '@dunky.dev/state-machine'
+import type {
+  ComboboxContext,
+  ComboboxItem,
+  ComboboxMachineEvent,
+  ComboboxOptions,
+  ComboboxStateName,
+} from './types'
+
+/** The running combobox machine — what a substrate holds and sends events to. */
+export type ComboboxMachine = Machine<ComboboxStateName, ComboboxContext, ComboboxMachineEvent>
+
+type ComboboxAction = Action<ComboboxContext, ComboboxMachineEvent>
+type ComboboxGuard = Guard<ComboboxContext, ComboboxMachineEvent>
+
+function indexOfValue(items: ComboboxItem[], value: string): number {
+  for (let i = 0; i < items.length; i++) if (items[i].value === value) return i
+  return -1
+}
+
+/** First enabled suggestion scanning from `start` in `step` direction; null if none. */
+function enabledValueFrom(items: ComboboxItem[], start: number, step: 1 | -1): string | null {
+  for (let i = start; i >= 0 && i < items.length; i += step) {
+    if (!items[i].disabled) return items[i].value
+  }
+  return null
+}
+
+/** One highlight step from the current value; null means "no move". */
+function stepHighlight(
+  items: ComboboxItem[],
+  fromValue: string | null,
+  step: 1 | -1,
+  loop: boolean,
+): string | null {
+  const count = items.length
+  if (count === 0) return null
+  const from = fromValue === null ? -1 : indexOfValue(items, fromValue)
+  // No current highlight: start from the end the movement comes from.
+  if (from === -1) {
+    return step === 1 ? enabledValueFrom(items, 0, 1) : enabledValueFrom(items, count - 1, -1)
+  }
+  if (!loop) return enabledValueFrom(items, from + step, step)
+  for (let taken = 1; taken <= count; taken++) {
+    const index = (((from + step * taken) % count) + count) % count
+    if (!items[index].disabled) return items[index].value
+  }
+  return null
+}
+
+/** The highlight an arrow-key open starts from: the enabled selection, else
+ * the first (ArrowDown) / last (ArrowUp) enabled suggestion. */
+function openingHighlight(
+  items: ComboboxItem[],
+  value: string | null,
+  step: 1 | -1,
+): string | null {
+  if (value !== null) {
+    const index = indexOfValue(items, value)
+    if (index !== -1 && !items[index].disabled) return value
+  }
+  return step === 1 ? enabledValueFrom(items, 0, 1) : enabledValueFrom(items, items.length - 1, -1)
+}
+
+const canOpen: ComboboxGuard = ({ context }) => !context.disabled
+
+// A `select` targeting an unregistered or disabled suggestion — named
+// explicitly (item press) or resolved from the highlight (Enter) — must not
+// commit OR close: pressing a disabled suggestion does nothing. No target at
+// all still falls through — closing without selecting is legal.
+const selectsUnavailableItem: ComboboxGuard = ({ context, event }) => {
+  if (event.type !== 'select') return false
+  const value = event.value !== undefined ? event.value : context.highlightedValue
+  if (value === null) return false
+  const index = indexOfValue(context.items, value)
+  return index === -1 || context.items[index].disabled
+}
+
+const canHighlightTarget: ComboboxGuard = ({ context, event }) => {
+  if (event.type !== 'highlight.set') return false
+  const index = indexOfValue(context.items, event.value)
+  return index !== -1 && !context.items[index].disabled
+}
+
+// Typing invalidates the highlight: the consumer is about to re-filter the
+// suggestions, so the old highlight points at a stale set.
+const setInputValue: ComboboxAction = ({ event, setContext }) => {
+  if (event.type !== 'input') return
+  setContext({ inputValue: event.value, highlightedValue: null })
+}
+
+const clearHighlight: ComboboxAction = ({ setContext }) => {
+  setContext({ highlightedValue: null })
+}
+
+// Commits the explicit value (item press) or the highlighted one (Enter) in
+// one write: the value and the input text move together, so their callbacks
+// fire once each. With neither, the transition just closes.
+const applySelection: ComboboxAction = ({ event, context, setContext }) => {
+  const value =
+    event.type === 'select' && event.value !== undefined ? event.value : context.highlightedValue
+  if (value === null) return
+  const index = indexOfValue(context.items, value)
+  if (index === -1) return
+  setContext({ value, inputValue: context.items[index].label })
+}
+
+const highlightNext: ComboboxAction = ({ context, setContext }) => {
+  const next = stepHighlight(context.items, context.highlightedValue, 1, context.loop)
+  if (next !== null) setContext({ highlightedValue: next })
+}
+
+const highlightPrevious: ComboboxAction = ({ context, setContext }) => {
+  const previous = stepHighlight(context.items, context.highlightedValue, -1, context.loop)
+  if (previous !== null) setContext({ highlightedValue: previous })
+}
+
+const highlightOnOpenNext: ComboboxAction = ({ context, setContext }) => {
+  setContext({ highlightedValue: openingHighlight(context.items, context.value, 1) })
+}
+
+const highlightOnOpenPrevious: ComboboxAction = ({ context, setContext }) => {
+  setContext({ highlightedValue: openingHighlight(context.items, context.value, -1) })
+}
+
+const setHighlight: ComboboxAction = ({ event, setContext }) => {
+  if (event.type !== 'highlight.set') return
+  setContext({ highlightedValue: event.value })
+}
+
+// Registration keeps the context list mirroring the rendered suggestions: a
+// new value joins at its reported rendered position (append as the fallback);
+// a known one updates in place and moves when its reported position changed —
+// a keyed re-sort reorders the rendered list without unmounting anything. The
+// substrate re-reports after every render, so a report that changes nothing
+// must be ignored — that idempotence is what keeps the report loop-free. An
+// update that disables the highlighted suggestion forfeits the highlight,
+// like unregistering it does.
+const registerItem: ComboboxAction = ({ event, context, setContext }) => {
+  if (event.type !== 'item.register') return
+  const item = event.item
+  const reported = event.index
+  const existing = indexOfValue(context.items, item.value)
+
+  if (existing === -1) {
+    const items = context.items.slice()
+    if (reported === undefined || reported < 0 || reported > items.length) items.push(item)
+    else items.splice(reported, 0, item)
+    setContext({ items })
+    return
+  }
+
+  const current = context.items[existing]
+  const moved =
+    reported !== undefined &&
+    reported !== existing &&
+    reported >= 0 &&
+    reported < context.items.length
+  const changed = current.label !== item.label || current.disabled !== item.disabled
+  if (!moved && !changed) return
+
+  const items = context.items.slice()
+  items.splice(existing, 1)
+  items.splice(moved ? reported : existing, 0, item)
+  const patch: Partial<ComboboxContext> = { items }
+  if (item.disabled && context.highlightedValue === item.value) patch.highlightedValue = null
+  setContext(patch)
+}
+
+const unregisterItem: ComboboxAction = ({ event, context, setContext }) => {
+  if (event.type !== 'item.unregister') return
+  const index = indexOfValue(context.items, event.value)
+  if (index === -1) return
+  const items = context.items.slice()
+  items.splice(index, 1)
+  const patch: Partial<ComboboxContext> = { items }
+  if (context.highlightedValue === event.value) patch.highlightedValue = null
+  setContext(patch)
+}
+
+const setValue: ComboboxAction = ({ event, setContext }) => {
+  if (event.type !== 'value.set') return
+  setContext({ value: event.value })
+}
+
+const syncInputValue: ComboboxAction = ({ event, setContext }) => {
+  if (event.type !== 'inputValue.set') return
+  setContext({ inputValue: event.value })
+}
+
+const setDisabled: ComboboxAction = ({ event, setContext }) => {
+  if (event.type !== 'disabled.set') return
+  setContext({ disabled: event.disabled })
+}
+
+export function comboboxMachine(
+  options: ComboboxOptions,
+): TransitionConfig<ComboboxStateName, ComboboxContext, ComboboxMachineEvent> {
+  // Annotated so createMachine infers Context as ComboboxContext, not the
+  // narrowed literal.
+  const context: ComboboxContext = {
+    disabled: options.disabled ?? false,
+    loop: options.loop ?? false,
+    // The substrate supplies a unique id; `combobox` is only a bare fallback.
+    id: options.id ?? 'combobox',
+    value: options.value !== undefined ? options.value : (options.defaultValue ?? null),
+    inputValue:
+      options.inputValue !== undefined ? options.inputValue : (options.defaultInputValue ?? ''),
+    highlightedValue: null,
+    items: [],
+  }
+
+  return setup.as<ComboboxContext, ComboboxMachineEvent>().createMachine({
+    initial: (options.open ?? options.defaultOpen) === true ? 'open' : 'closed',
+    context,
+    // Top-level: registration and controlled sync work from any state.
+    on: {
+      'item.register': { actions: registerItem },
+      'item.unregister': { actions: unregisterItem },
+      'value.set': { actions: setValue },
+      'inputValue.set': { actions: syncInputValue },
+      'disabled.set': { actions: setDisabled },
+    },
+    states: {
+      closed: {
+        on: {
+          open: { target: 'open', guard: canOpen },
+          toggle: { target: 'open', guard: canOpen },
+          // Typing opens: the user is asking for suggestions.
+          input: { target: 'open', guard: canOpen, actions: setInputValue },
+          // The arrow keys open with a seeded highlight: the selection when it
+          // is rendered and enabled, else the first / last enabled suggestion.
+          'highlight.next': { target: 'open', guard: canOpen, actions: highlightOnOpenNext },
+          'highlight.prev': { target: 'open', guard: canOpen, actions: highlightOnOpenPrevious },
+        },
+      },
+      open: {
+        on: {
+          close: { target: 'closed', actions: clearHighlight },
+          toggle: { target: 'closed', actions: clearHighlight },
+          escape: { target: 'closed', actions: clearHighlight },
+          'interact.outside': { target: 'closed', actions: clearHighlight },
+          input: { actions: setInputValue },
+          select: [
+            { guard: selectsUnavailableItem }, // swallow: a disabled suggestion does nothing
+            { target: 'closed', actions: [applySelection, clearHighlight] },
+          ],
+          'highlight.next': { actions: highlightNext },
+          'highlight.prev': { actions: highlightPrevious },
+          'highlight.set': { guard: canHighlightTarget, actions: setHighlight },
+        },
+      },
+    },
+  })
+}
diff --git a/packages/core/combobox/src/types.ts b/packages/core/combobox/src/types.ts
new file mode 100644
index 0000000..321a3a0
--- /dev/null
+++ b/packages/core/combobox/src/types.ts
@@ -0,0 +1,107 @@
+// Public + machine-facing types for the framework-agnostic combobox primitive.
+// The state machine is substrate-free: all event reading lives in a
+// per-substrate driver.
+import type { KeyboardPayload, PointerPayload } from '@dunky.dev/state-machine-bindings'
+
+export type ComboboxStateName = 'closed' | 'open'
+
+/** The per-item `data-state` values (the root states style via open/closed). */
+export type ComboboxItemStateName = 'selected' | 'unselected'
+
+/** One registered suggestion: what a substrate reports from its item lifecycle. */
+export interface ComboboxItem {
+  value: string
+  /** The text committed to the input when this item is selected. */
+  label: string
+  disabled: boolean
+}
+
+/**
+ * The cross-part ids, derived from the one `id` on context: the input's
+ * aria-controls names the listbox, and aria-activedescendant names item ids
+ * derived from the same base — the connect wires both sides.
+ */
+export interface ComboboxIds {
+  input: string
+  listbox: string
+}
+
+export interface ComboboxContext {
+  disabled: boolean
+  loop: boolean
+  // The base id (substrate-minted, SSR-safe); the connect derives the per-part
+  // ids from it.
+  id: string
+  value: string | null
+  inputValue: string
+  // The active suggestion while open; always null while closed, and optional
+  // while open — the resting state while typing is "nothing highlighted".
+  highlightedValue: string | null
+  // The rendered suggestions, in rendered order: registrations carry their
+  // position so the order survives filter-driven unmounts and remounts, and
+  // in-place reorders of the rendered list.
+  items: ComboboxItem[]
+}
+
+export type ComboboxMachineEvent =
+  | { type: 'open' }
+  | { type: 'close' }
+  | { type: 'toggle' }
+  // Dismissal intents are distinct from `close` so vetoes route per cause.
+  | { type: 'escape' }
+  | { type: 'interact.outside' }
+  // The user edited the input text.
+  | { type: 'input'; value: string }
+  // `select` without a value commits the highlighted suggestion.
+  | { type: 'select'; value?: string }
+  | { type: 'highlight.next' }
+  | { type: 'highlight.prev' }
+  | { type: 'highlight.set'; value: string }
+  // `index` is the item's position among the rendered suggestions — a host
+  // fact the substrate reports so navigation order matches the rendered order.
+  | { type: 'item.register'; item: ComboboxItem; index?: number }
+  | { type: 'item.unregister'; value: string }
+  | { type: 'value.set'; value: string | null }
+  | { type: 'inputValue.set'; value: string }
+  | { type: 'disabled.set'; disabled: boolean }
+
+export interface ComboboxCallbacks {
+  /** Fired on every value change with the new value. */
+  onValueChange?: (value: string | null) => void
+  /** Fired on every input-text change with the new text. */
+  onInputValueChange?: (value: string) => void
+  /** Fired on every highlight move with the highlighted value (null for none). */
+  onHighlightChange?: (value: string | null) => void
+  /** Fired on every open/close transition with the new value. */
+  onOpenChange?: (open: boolean) => void
+  /** Fired before an Escape dismissal; `preventDefault()` vetoes it. */
+  onEscapeKeyDown?: (event: KeyboardPayload) => void
+  /** Fired before an outside-interaction dismissal; `preventDefault()` vetoes it. */
+  onInteractOutside?: (event?: PointerPayload) => void
+}
+
+/**
+ * The agnostic combobox options — the behavior a consumer configures. A
+ * substrate's props extend this with its own concerns (e.g. `children`).
+ */
+export interface ComboboxOptions extends ComboboxCallbacks {
+  /** Base id for the combobox's parts; the substrate supplies a unique,
+   * SSR-safe one. The per-part and per-item ids are derived from it. */
+  id?: string
+  /** Controlled value; every change is reported through `onValueChange`. */
+  value?: string | null
+  /** Initial value for the uncontrolled combobox. */
+  defaultValue?: string
+  /** Controlled input text; every change is reported through `onInputValueChange`. */
+  inputValue?: string
+  /** Initial input text for the uncontrolled combobox. @default '' */
+  defaultInputValue?: string
+  /** Controlled open state; every open/close intent is reported through `onOpenChange`. */
+  open?: boolean
+  /** Initial open state for the uncontrolled combobox. @default false */
+  defaultOpen?: boolean
+  /** Disables the whole combobox: the listbox can't open. @default false */
+  disabled?: boolean
+  /** Whether arrow-key navigation wraps around the ends. @default false */
+  loop?: boolean
+}
diff --git a/packages/core/combobox/tests/machine.test.ts b/packages/core/combobox/tests/machine.test.ts
new file mode 100644
index 0000000..d7e1a9c
--- /dev/null
+++ b/packages/core/combobox/tests/machine.test.ts
@@ -0,0 +1,522 @@
+// The agnostic core of the Combobox — machine + connect, no DOM, no framework.
+import { describe, expect, it, vi } from 'vitest'
+import { connector, machine, type Connector, type Machine } from '@dunky.dev/state-machine'
+import { comboboxMachine, comboboxConnect } from '@dunky.dev/combobox'
+import type {
+  ComboboxApi,
+  ComboboxContext,
+  ComboboxIds,
+  ComboboxItem,
+  ComboboxMachineEvent,
+  ComboboxOptions,
+  ComboboxStateName,
+  KeyboardPayload,
+  PointerPayload,
+} from '@dunky.dev/combobox'
+
+// The per-part ids the connect derives from a base id of `cb`.
+const ids: ComboboxIds = { input: 'cb-input', listbox: 'cb-listbox' }
+const itemId = (value: string): string => `cb-item-${value}`
+
+// The default suggestion list: `cherry` is the one disabled item.
+const fruits: ComboboxItem[] = [
+  { value: 'apple', label: 'Apple', disabled: false },
+  { value: 'banana', label: 'Banana', disabled: false },
+  { value: 'blueberry', label: 'Blueberry', disabled: false },
+  { value: 'cherry', label: 'Cherry', disabled: true },
+  { value: 'date', label: 'Date', disabled: false },
+]
+
+interface Harness {
+  service: Machine<ComboboxStateName, ComboboxContext, ComboboxMachineEvent>
+  connection: Connector<ComboboxStateName, ComboboxContext, ComboboxApi, ComboboxOptions>
+}
+
+const build = (options: ComboboxOptions = {}, items: ComboboxItem[] = fruits): Harness => {
+  const service = machine(comboboxMachine({ id: 'cb', ...options }))
+  const connection = connector(service, comboboxConnect, options)
+  service.start()
+  for (const item of items) service.send({ type: 'item.register', item })
+  return { service, connection }
+}
+
+const buildOpen = (options: ComboboxOptions = {}, items: ComboboxItem[] = fruits): Harness => {
+  const harness = build(options, items)
+  harness.service.send({ type: 'open' })
+  return harness
+}
+
+const keydown = (key: string): KeyboardPayload => ({
+  key,
+  defaultPrevented: false,
+  preventDefault() {
+    this.defaultPrevented = true
+  },
+})
+
+const pointer = (): PointerPayload => ({
+  defaultPrevented: false,
+  preventDefault() {
+    this.defaultPrevented = true
+  },
+})
+
+describe('combobox machine — open/close', () => {
+  it('starts closed by default', () => {
+    const { service } = build()
+    expect(service.state).toBe('closed')
+  })
+
+  it('starts open when defaultOpen', () => {
+    const { service } = build({ defaultOpen: true })
+    expect(service.state).toBe('open')
+  })
+
+  it('starts open when controlled open=true', () => {
+    const { service } = build({ open: true })
+    expect(service.state).toBe('open')
+  })
+
+  it('toggle flips closed -> open -> closed', () => {
+    const { service } = build()
+    service.send({ type: 'toggle' })
+    expect(service.state).toBe('open')
+    service.send({ type: 'toggle' })
+    expect(service.state).toBe('closed')
+  })
+
+  it('escape closes without selecting', () => {
+    const { service } = buildOpen({ defaultInputValue: 'app' })
+    service.send({ type: 'highlight.next' })
+    service.send({ type: 'escape' })
+    expect(service.state).toBe('closed')
+    expect(service.context.value).toBeNull()
+    expect(service.context.inputValue).toBe('app') // the typed text survives
+  })
+
+  it('interact.outside closes without selecting', () => {
+    const { service } = buildOpen()
+    service.send({ type: 'interact.outside' })
+    expect(service.state).toBe('closed')
+    expect(service.context.value).toBeNull()
+  })
+
+  it('never opens while disabled, by any intent', () => {
+    const { service } = build({ disabled: true })
+    service.send({ type: 'open' })
+    service.send({ type: 'toggle' })
+    service.send({ type: 'input', value: 'a' })
+    service.send({ type: 'highlight.next' })
+    expect(service.state).toBe('closed')
+  })
+})
+
+describe('combobox machine — input text', () => {
+  it('typing updates the input text and opens the list', () => {
+    const { service } = build()
+    service.send({ type: 'input', value: 'ba' })
+    expect(service.state).toBe('open')
+    expect(service.context.inputValue).toBe('ba')
+  })
+
+  it('typing while open clears the highlight', () => {
+    const { service } = buildOpen()
+    service.send({ type: 'highlight.next' })
+    expect(service.context.highlightedValue).toBe('apple')
+
+    service.send({ type: 'input', value: 'b' })
+    expect(service.context.highlightedValue).toBeNull()
+    expect(service.state).toBe('open')
+  })
+
+  it('seeds the input text from defaultInputValue', () => {
+    const { service } = build({ defaultInputValue: 'ch' })
+    expect(service.context.inputValue).toBe('ch')
+  })
+
+  it('inputValue.set syncs the controlled text without opening', () => {
+    const { service } = build()
+    service.send({ type: 'inputValue.set', value: 'external' })
+    expect(service.context.inputValue).toBe('external')
+    expect(service.state).toBe('closed')
+  })
+})
+
+describe('combobox machine — highlight', () => {
+  it('ArrowDown-open seeds the first enabled item when nothing is selected', () => {
+    const { service } = build(undefined, [
+      { value: 'cherry', label: 'Cherry', disabled: true },
+      ...fruits.slice(0, 2),
+    ])
+    service.send({ type: 'highlight.next' })
+    expect(service.state).toBe('open')
+    expect(service.context.highlightedValue).toBe('apple') // leading disabled skipped
+  })
+
+  it('ArrowDown-open seeds the selected item when it is rendered and enabled', () => {
+    const { service } = build({ defaultValue: 'banana' })
+    service.send({ type: 'highlight.next' })
+    expect(service.context.highlightedValue).toBe('banana')
+  })
+
+  it('ArrowDown-open falls back to the first enabled item when the selection is unavailable', () => {
+    const disabledSelection = build({ defaultValue: 'cherry' }) // cherry is disabled
+    disabledSelection.service.send({ type: 'highlight.next' })
+    expect(disabledSelection.service.context.highlightedValue).toBe('apple')
+
+    const filteredOutSelection = build({ defaultValue: 'mango' }) // never registered
+    filteredOutSelection.service.send({ type: 'highlight.next' })
+    expect(filteredOutSelection.service.context.highlightedValue).toBe('apple')
+  })
+
+  it('ArrowUp-open seeds the last enabled item when nothing is selected', () => {
+    const { service } = build()
+    service.send({ type: 'highlight.prev' })
+    expect(service.state).toBe('open')
+    expect(service.context.highlightedValue).toBe('date')
+  })
+
+  it('steps across enabled items, skipping disabled ones', () => {
+    const { service } = buildOpen()
+    service.send({ type: 'highlight.next' })
+    service.send({ type: 'highlight.next' })
+    service.send({ type: 'highlight.next' })
+    expect(service.context.highlightedValue).toBe('blueberry')
+    service.send({ type: 'highlight.next' })
+    expect(service.context.highlightedValue).toBe('date') // cherry (disabled) skipped
+
+    service.send({ type: 'highlight.prev' })
+    expect(service.context.highlightedValue).toBe('blueberry')
+  })
+
+  it('stops at the ends without loop', () => {
+    const { service } = buildOpen()
+    service.send({ type: 'highlight.prev' }) // no highlight: starts from the last
+    expect(service.context.highlightedValue).toBe('date')
+    service.send({ type: 'highlight.next' })
+    expect(service.context.highlightedValue).toBe('date')
+  })
+
+  it('wraps around the ends with loop', () => {
+    const { service } = buildOpen({ loop: true })
+    service.send({ type: 'highlight.prev' })
+    expect(service.context.highlightedValue).toBe('date')
+    service.send({ type: 'highlight.next' })
+    expect(service.context.highlightedValue).toBe('apple')
+  })
+
+  it('highlight.set moves to an enabled item and ignores a disabled one', () => {
+    const { service } = buildOpen()
+    service.send({ type: 'highlight.set', value: 'banana' })
+    expect(service.context.highlightedValue).toBe('banana')
+
+    service.send({ type: 'highlight.set', value: 'cherry' })
+    expect(service.context.highlightedValue).toBe('banana')
+  })
+
+  it('clears the highlight when the highlighted item unregisters', () => {
+    const { service } = buildOpen()
+    service.send({ type: 'highlight.set', value: 'banana' })
+    service.send({ type: 'item.unregister', value: 'banana' })
+    expect(service.context.highlightedValue).toBeNull()
+  })
+
+  it('clears the highlight when the highlighted item re-registers disabled', () => {
+    const { service } = buildOpen()
+    service.send({ type: 'highlight.set', value: 'banana' })
+    service.send({
+      type: 'item.register',
+      item: { value: 'banana', label: 'Banana', disabled: true },
+    })
+    expect(service.context.highlightedValue).toBeNull()
+  })
+
+  it('clears the highlight on close', () => {
+    const { service } = buildOpen()
+    service.send({ type: 'highlight.next' })
+    service.send({ type: 'close' })
+    expect(service.context.highlightedValue).toBeNull()
+  })
+})
+
+describe('combobox machine — selection', () => {
+  it('select commits the highlighted item: value, label as input text, closed', () => {
+    const { service } = buildOpen()
+    service.send({ type: 'highlight.next' })
+    service.send({ type: 'select' })
+    expect(service.state).toBe('closed')
+    expect(service.context.value).toBe('apple')
+    expect(service.context.inputValue).toBe('Apple')
+    expect(service.context.highlightedValue).toBeNull()
+  })
+
+  it('select with an explicit value commits that item (item press)', () => {
+    const { service } = buildOpen()
+    service.send({ type: 'select', value: 'banana' })
+    expect(service.state).toBe('closed')
+    expect(service.context.value).toBe('banana')
+    expect(service.context.inputValue).toBe('Banana')
+  })
+
+  it('select with nothing highlighted closes without committing', () => {
+    const { service } = buildOpen({ defaultInputValue: 'free text' })
+    service.send({ type: 'select' })
+    expect(service.state).toBe('closed')
+    expect(service.context.value).toBeNull()
+    expect(service.context.inputValue).toBe('free text')
+  })
+
+  it('select targeting a disabled item does nothing', () => {
+    const { service } = buildOpen()
+    service.send({ type: 'select', value: 'cherry' })
+    expect(service.state).toBe('open')
+    expect(service.context.value).toBeNull()
+  })
+
+  it('value.set syncs the controlled value without touching the input text', () => {
+    const { service } = build({ defaultInputValue: 'typed' })
+    service.send({ type: 'value.set', value: 'banana' })
+    expect(service.context.value).toBe('banana')
+    expect(service.context.inputValue).toBe('typed')
+
+    service.send({ type: 'value.set', value: null })
+    expect(service.context.value).toBeNull()
+  })
+})
+
+describe('combobox machine — item registration', () => {
+  it('registers items in send order and unregisters by value', () => {
+    const { service } = build(undefined, fruits.slice(0, 2))
+    expect(service.context.items.map(item => item.value)).toEqual(['apple', 'banana'])
+
+    service.send({ type: 'item.unregister', value: 'apple' })
+    expect(service.context.items.map(item => item.value)).toEqual(['banana'])
+  })
+
+  it('inserts a registration at its rendered position (remount after filtering)', () => {
+    const { service } = build(undefined, fruits.slice(0, 3))
+    service.send({ type: 'item.unregister', value: 'banana' })
+
+    // banana remounts between apple and blueberry — the substrate reports
+    // index 1, its position among the rendered options.
+    service.send({ type: 'item.register', item: fruits[1], index: 1 })
+    expect(service.context.items.map(item => item.value)).toEqual(['apple', 'banana', 'blueberry'])
+  })
+
+  it('re-registering updates in place, keeping the item position', () => {
+    const { service } = build(undefined, fruits.slice(0, 3))
+    service.send({
+      type: 'item.register',
+      item: { value: 'banana', label: 'Ripe banana', disabled: true },
+      index: 1, // its rendered position didn't change — only its data
+    })
+    expect(service.context.items.map(item => item.value)).toEqual(['apple', 'banana', 'blueberry'])
+    expect(service.context.items[1]).toEqual({
+      value: 'banana',
+      label: 'Ripe banana',
+      disabled: true,
+    })
+  })
+
+  it('re-registering at a new reported position moves the item (in-place reorder)', () => {
+    const { service } = build(undefined, fruits.slice(0, 3))
+
+    // The consumer re-sorted the rendered list without unmounting anything:
+    // blueberry now renders first, and its registration reports that.
+    service.send({ type: 'item.register', item: fruits[2], index: 0 })
+    expect(service.context.items.map(item => item.value)).toEqual(['blueberry', 'apple', 'banana'])
+  })
+})
+
+describe('combobox connect — logical bindings', () => {
+  it('input carries the combobox role and list-autocomplete wiring', () => {
+    const { service, connection } = build()
+    const input = connection.snapshot.parts.input
+    expect(input.id).toBe(ids.input)
+    expect(input.role).toBe('combobox')
+    expect(input.autoComplete).toBe('list')
+    expect(input.expanded).toBe(false)
+    expect(input.controls).toBe(ids.listbox)
+    expect(input['data-state']).toBe('closed')
+
+    service.send({ type: 'open' })
+    expect(connection.snapshot.parts.input.expanded).toBe(true)
+  })
+
+  it('typing through the input binding drives the machine', () => {
+    const { service, connection } = build()
+    connection.snapshot.parts.input.onValueChange?.({ value: 'ba' })
+    expect(service.state).toBe('open')
+    expect(service.context.inputValue).toBe('ba')
+  })
+
+  it('activeDescendant names the highlighted option, only while one exists', () => {
+    const { service, connection } = buildOpen()
+    expect(connection.snapshot.parts.input.activeDescendant).toBeUndefined()
+
+    service.send({ type: 'highlight.set', value: 'banana' })
+    expect(connection.snapshot.parts.input.activeDescendant).toBe(itemId('banana'))
+
+    service.send({ type: 'close' })
+    expect(connection.snapshot.parts.input.activeDescendant).toBeUndefined()
+  })
+
+  it('arrow keys on the input drive the highlight and cancel the default', () => {
+    const { service, connection } = build()
+    const down = keydown('ArrowDown')
+    connection.snapshot.parts.input.onKeyDown?.(down)
+    expect(down.defaultPrevented).toBe(true)
+    expect(service.state).toBe('open')
+    expect(service.context.highlightedValue).toBe('apple')
+
+    const up = keydown('ArrowUp')
+    connection.snapshot.parts.input.onKeyDown?.(up)
+    expect(service.context.highlightedValue).toBe('apple') // start stays put
+  })
+
+  it('Enter selects only while open; closed Enter keeps its native default', () => {
+    const { service, connection } = buildOpen()
+    service.send({ type: 'highlight.set', value: 'banana' })
+    const enter = keydown('Enter')
+    connection.snapshot.parts.input.onKeyDown?.(enter)
+    expect(enter.defaultPrevented).toBe(true) // no form submit mid-interaction
+    expect(service.context.value).toBe('banana')
+
+    const closedEnter = keydown('Enter')
+    connection.snapshot.parts.input.onKeyDown?.(closedEnter)
+    expect(closedEnter.defaultPrevented).toBe(false)
+  })
+
+  it('Home/End keep their native caret behavior', () => {
+    const { service, connection } = buildOpen()
+    const home = keydown('Home')
+    connection.snapshot.parts.input.onKeyDown?.(home)
+    expect(home.defaultPrevented).toBe(false)
+    expect(service.context.highlightedValue).toBeNull()
+  })
+
+  it('trigger carries the popup relationship, out of the tab order, and toggles', () => {
+    const { service, connection } = build()
+    const trigger = connection.snapshot.parts.trigger
+    expect(trigger.hasPopup).toBe('listbox')
+    expect(trigger.expanded).toBe(false)
+    expect(trigger.controls).toBe(ids.listbox)
+    expect(trigger.focusable).toBe(false) // tabIndex -1: the input is the tab stop
+
+    trigger.onPress?.()
+    expect(service.state).toBe('open')
+    connection.snapshot.parts.trigger.onPress?.()
+    expect(service.state).toBe('closed')
+  })
+
+  it('listbox is a hidden listbox while closed', () => {
+    const { service, connection } = build()
+    const listbox = connection.snapshot.parts.listbox
+    expect(listbox.id).toBe(ids.listbox)
+    expect(listbox.role).toBe('listbox')
+    expect(listbox.hidden).toBe(true)
+    expect(listbox['data-state']).toBe('closed')
+
+    service.send({ type: 'open' })
+    expect(connection.snapshot.parts.listbox.hidden).toBeUndefined()
+    expect(connection.snapshot.parts.listbox['data-state']).toBe('open')
+  })
+
+  it('item carries identity, selection, and the styling hooks', () => {
+    const { service, connection } = buildOpen({ defaultValue: 'banana' })
+    service.send({ type: 'highlight.set', value: 'banana' })
+
+    const banana = connection.snapshot.parts.item({ value: 'banana' })
+    expect(banana.id).toBe(itemId('banana'))
+    expect(banana.role).toBe('option')
+    expect(banana.selected).toBe(true)
+    expect(banana['data-state']).toBe('selected')
+    expect(banana['data-highlighted']).toBe('')
+
+    const cherry = connection.snapshot.parts.item({ value: 'cherry', disabled: true })
+    expect(cherry.selected).toBe(false)
+    expect(cherry['data-state']).toBe('unselected')
+    expect(cherry.disabled).toBe(true)
+    expect(cherry['data-disabled']).toBe('')
+    expect(cherry['data-highlighted']).toBeUndefined()
+  })
+
+  it('item press selects; pointer move highlights; pointer down keeps input focus', () => {
+    const { service, connection } = buildOpen()
+    const item = connection.snapshot.parts.item({ value: 'banana' })
+
+    item.onPointerMove?.()
+    expect(service.context.highlightedValue).toBe('banana')
+
+    const press = pointer()
+    item.onPointerDown?.(press)
+    expect(press.defaultPrevented).toBe(true) // the press must not steal DOM focus
+
+    item.onPress?.()
+    expect(service.context.value).toBe('banana')
+    expect(service.state).toBe('closed')
+  })
+
+  it('presses on the listbox surface and the trigger cancel the focus-stealing default', () => {
+    const { connection } = buildOpen()
+
+    const surfacePress = pointer()
+    connection.snapshot.parts.listbox.onPointerDown?.(surfacePress)
+    expect(surfacePress.defaultPrevented).toBe(true)
+
+    const triggerPress = pointer()
+    connection.snapshot.parts.trigger.onPointerDown?.(triggerPress)
+    expect(triggerPress.defaultPrevented).toBe(true)
+  })
+
+  it('itemIndicator is decoration, hidden from assistive tech', () => {
+    const { connection } = build()
+    expect(connection.snapshot.parts.itemIndicator.hidden).toBe(true)
+  })
+
+  it('setOpen drives both directions; onInteractOutside honors the veto', () => {
+    const onInteractOutside = vi.fn((event?: PointerPayload) => event?.preventDefault?.())
+    const { service, connection } = build({ onInteractOutside })
+
+    connection.snapshot.setOpen(true)
+    expect(service.state).toBe('open')
+
+    connection.snapshot.onInteractOutside(pointer())
+    expect(onInteractOutside).toHaveBeenCalledTimes(1)
+    expect(service.state).toBe('open') // vetoed
+
+    connection.snapshot.setOpen(false)
+    expect(service.state).toBe('closed')
+  })
+})
+
+describe('combobox connect — reactions', () => {
+  it('reports every change through its callback, none on subscribe', () => {
+    const onInputValueChange = vi.fn()
+    const onHighlightChange = vi.fn()
+    const { service } = build({ onInputValueChange, onHighlightChange })
+    expect(onInputValueChange).not.toHaveBeenCalled()
+    expect(onHighlightChange).not.toHaveBeenCalled()
+
+    service.send({ type: 'input', value: 'b' })
+    expect(onInputValueChange).toHaveBeenLastCalledWith('b')
+
+    service.send({ type: 'highlight.next' })
+    expect(onHighlightChange).toHaveBeenLastCalledWith('apple')
+  })
+
+  it('one selection fires value, input text, highlight, open — in that order', () => {
+    const order: string[] = []
+    const { service } = buildOpen({
+      onValueChange: () => order.push('value'),
+      onInputValueChange: () => order.push('input'),
+      onHighlightChange: value => order.push(`highlight:${value}`),
+      onOpenChange: open => order.push(`open:${open}`),
+    })
+    service.send({ type: 'highlight.set', value: 'banana' })
+    order.length = 0
+
+    service.send({ type: 'select' })
+    expect(order).toEqual(['value', 'input', 'highlight:null', 'open:false'])
+  })
+})
diff --git a/packages/react/combobox/README.md b/packages/react/combobox/README.md
new file mode 100644
index 0000000..2200069
--- /dev/null
+++ b/packages/react/combobox/README.md
@@ -0,0 +1,45 @@
+# @dunky.dev/react-combobox
+
+React binding for [`@dunky.dev/combobox`](../../core/combobox): a compound
+component — `Combobox` plus its parts — that drives the framework-free
+combobox machine. The root owns the machine; parts translate the core's
+logical bindings into DOM attributes and handlers, and wire the DOM-only
+concerns (outside-interaction detection, Escape routing, the overlay layer
+stack).
+
+Behavior contract: [`../../core/combobox/SPEC.md`](../../core/combobox/SPEC.md).
+React-specific surface: [SPEC.md](./SPEC.md).
+
+## Install
+
+```sh
+npm install @dunky.dev/react-combobox
+```
+
+## Usage
+
+```tsx
+import { useState } from 'react'
+import { Combobox } from '@dunky.dev/react-combobox'
+
+const fruits = ['Apple', 'Banana', 'Cherry']
+
+function FruitPicker() {
+  // Filtering is the consumer's: render the Items that match the input text.
+  const [query, setQuery] = useState('')
+  const matches = fruits.filter(fruit => fruit.toLowerCase().includes(query.toLowerCase()))
+  return (
+    <Combobox inputValue={query} onInputValueChange={setQuery} onValueChange={console.log}>
+      <Combobox.Input aria-label='Fruit' />
+      <Combobox.Trigger aria-label='Show fruits'>▾</Combobox.Trigger>
+      <Combobox.Listbox>
+        {matches.map(fruit => (
+          <Combobox.Item key={fruit} value={fruit.toLowerCase()} label={fruit}>
+            {fruit} <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
+          </Combobox.Item>
+        ))}
+      </Combobox.Listbox>
+    </Combobox>
+  )
+}
+```
diff --git a/packages/react/combobox/SPEC.md b/packages/react/combobox/SPEC.md
new file mode 100644
index 0000000..bb809e1
--- /dev/null
+++ b/packages/react/combobox/SPEC.md
@@ -0,0 +1,141 @@
+# SPEC / React / Combobox
+
+The React implementation of the [core spec](../../core/combobox/SPEC.md).
+
+## Docs
+
+🔗 [`dunky.dev/ui/components/combobox`](https://dunky.dev/ui/components/combobox).
+
+## Install
+
+```sh
+npm install @dunky.dev/react-combobox
+```
+
+## Usage
+
+```tsx
+import { useState } from 'react'
+import { Combobox } from '@dunky.dev/react-combobox'
+
+const fruits = ['Apple', 'Banana', 'Cherry']
+
+function FruitPicker() {
+  // Filtering is the consumer's: render the Items that match the input text.
+  const [query, setQuery] = useState('')
+  const matches = fruits.filter(fruit => fruit.toLowerCase().includes(query.toLowerCase()))
+  return (
+    <Combobox inputValue={query} onInputValueChange={setQuery}>
+      <Combobox.Input aria-label='Fruit' />
+      <Combobox.Trigger aria-label='Show fruits'>v</Combobox.Trigger>
+      <Combobox.Listbox>
+        {matches.map(fruit => (
+          <Combobox.Item key={fruit} value={fruit.toLowerCase()} label={fruit}>
+            {fruit} <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
+          </Combobox.Item>
+        ))}
+      </Combobox.Listbox>
+    </Combobox>
+  )
+}
+```
+
+React-specific notes on top of the core contract:
+
+- **`Input`** renders a controlled `<input>` whose text the machine owns —
+  edits flow back as machine events. A disabled combobox renders the native
+  `disabled` attribute (on top of `aria-disabled`) so the text really is
+  uneditable.
+- **`Trigger`** renders with `tabIndex={-1}` and hands focus to the input on
+  press, per the APG editable-combobox pattern — the input is the one tab
+  stop.
+- **`Listbox`** stays mounted while closed — hidden with the native `hidden`
+  attribute and removed from the accessibility tree — so items keep their
+  registration and ids stable. While open it registers with the shared
+  overlay layer stack. There is no portal or positioning: the consumer
+  positions the popup relative to the input; `data-state` (`open` /
+  `closed`) is the styling and animation hook.
+- **`Item`** registers itself with the machine — reporting its position among
+  the rendered options after every render, so navigation order survives
+  filter-driven unmounts and remounts as well as keyed re-sorts that move
+  items in place — and unregisters on unmount, per the core items contract.
+  Its display label defaults to its string children; pass `label` when the
+  children aren't plain text.
+- Everything ships headless — parts carry behavior, ARIA wiring, and data
+  attributes (`data-state`, `data-highlighted`, `data-disabled`); styling is
+  the consumer's.
+
+## API
+
+### `Combobox`
+
+The root: owns value + input text + open state, renders no DOM. Accepts the
+core `ComboboxOptions`.
+
+| Prop                 | Type                              | Default        | Description                                                               |
+| -------------------- | --------------------------------- | -------------- | ------------------------------------------------------------------------- |
+| `value`              | `string \| null`                  | —              | Controlled value; every change is reported via `onValueChange`.           |
+| `defaultValue`       | `string`                          | —              | Initial value for the uncontrolled combobox.                              |
+| `inputValue`         | `string`                          | —              | Controlled input text; every change is reported via `onInputValueChange`. |
+| `defaultInputValue`  | `string`                          | `''`           | Initial input text for the uncontrolled combobox.                         |
+| `open`               | `boolean`                         | —              | Controlled open state.                                                    |
+| `defaultOpen`        | `boolean`                         | `false`        | Initial open state for the uncontrolled combobox.                         |
+| `disabled`           | `boolean`                         | `false`        | Disables the whole combobox; the listbox can't open.                      |
+| `loop`               | `boolean`                         | `false`        | Whether arrow-key navigation wraps around the ends.                       |
+| `onValueChange`      | `(value: string \| null) => void` | —              | Fired on every value change with the new value.                           |
+| `onInputValueChange` | `(value: string) => void`         | —              | Fired on every input-text change with the new text.                       |
+| `onOpenChange`       | `(open: boolean) => void`         | —              | Fired on every open/close transition with the new value.                  |
+| `onHighlightChange`  | `(value: string \| null) => void` | —              | Fired on every highlight move with the highlighted value.                 |
+| `onEscapeKeyDown`    | `(event) => void`                 | —              | Fired before an Escape dismissal; `preventDefault()` vetoes.              |
+| `onInteractOutside`  | `(event?) => void`                | —              | Fired before an outside-interaction dismissal; `preventDefault()` vetoes. |
+| `id`                 | `string`                          | auto (`useId`) | Base id for the parts; per-part ids are derived from it.                  |
+| `children`           | `ReactNode`                       | —              | The combobox's parts.                                                     |
+
+### `Combobox.Input`
+
+The text field (`role="combobox"`); DOM focus lives here the whole time. The
+text is machine-owned — pass `inputValue`/`onInputValueChange` on the root to
+control it, not `value` here.
+
+| Prop       | Type                      | Default | Description                          |
+| ---------- | ------------------------- | ------- | ------------------------------------ |
+| `...props` | `ComponentProps<'input'>` | —       | Forwarded to the rendered `<input>`. |
+
+### `Combobox.Trigger`
+
+The optional disclosure button: toggles the list, keeps out of the tab order,
+and hands focus to the input on press.
+
+| Prop       | Type                       | Default | Description                           |
+| ---------- | -------------------------- | ------- | ------------------------------------- |
+| `...props` | `ComponentProps<'button'>` | —       | Forwarded to the rendered `<button>`. |
+
+### `Combobox.Listbox`
+
+The popup list (`role="listbox"`); always mounted, hidden while closed.
+
+| Prop       | Type                    | Default | Description                        |
+| ---------- | ----------------------- | ------- | ---------------------------------- |
+| `...props` | `ComponentProps<'div'>` | —       | Forwarded to the rendered `<div>`. |
+
+### `Combobox.Item`
+
+One suggestion (`role="option"`). Registers itself with the machine; carries
+`data-state` (`selected` / `unselected`), `data-highlighted`, and
+`data-disabled`.
+
+| Prop       | Type                    | Default                           | Description                                            |
+| ---------- | ----------------------- | --------------------------------- | ------------------------------------------------------ |
+| `value`    | `string`                | —                                 | The suggestion's value. Required, unique per combobox. |
+| `disabled` | `boolean`               | `false`                           | Disables this suggestion: skipped and unselectable.    |
+| `label`    | `string`                | string children, else the `value` | The text committed to the input on selection.          |
+| `...props` | `ComponentProps<'div'>` | —                                 | Forwarded to the rendered `<div>`.                     |
+
+### `Combobox.ItemIndicator`
+
+The selection mark; renders only inside the selected item, hidden from
+assistive tech (the selection is announced via `aria-selected`).
+
+| Prop       | Type                     | Default | Description                         |
+| ---------- | ------------------------ | ------- | ----------------------------------- |
+| `...props` | `ComponentProps<'span'>` | —       | Forwarded to the rendered `<span>`. |
diff --git a/packages/react/combobox/package.json b/packages/react/combobox/package.json
new file mode 100644
index 0000000..db034cd
--- /dev/null
+++ b/packages/react/combobox/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@dunky.dev/react-combobox",
+  "version": "0.0.0",
+  "description": "React binding for @dunky.dev/combobox.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dunky-dev/ui.git",
+    "directory": "packages/react/combobox"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "publishConfig": {
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      }
+    },
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown"
+  },
+  "dependencies": {
+    "@dunky.dev/combobox": "workspace:^",
+    "@dunky.dev/dom-layer-stack": "workspace:^",
+    "@dunky.dev/react-state-machine": "^0.1.0",
+    "@dunky.dev/react-use-interact-outside": "workspace:^",
+    "@dunky.dev/react-use-layer-stack": "workspace:^"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}
diff --git a/packages/react/combobox/src/combobox.tsx b/packages/react/combobox/src/combobox.tsx
new file mode 100644
index 0000000..fe50a00
--- /dev/null
+++ b/packages/react/combobox/src/combobox.tsx
@@ -0,0 +1,245 @@
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  type ComponentPropsWithoutRef,
+  type ForwardRefExoticComponent,
+  type MouseEvent,
+  type ReactNode,
+  type RefAttributes,
+} from 'react'
+import { isTopmostLayer, layerContainsTarget, registerLayer } from '@dunky.dev/dom-layer-stack'
+import { useInteractOutside } from '@dunky.dev/react-use-interact-outside'
+import { LayerDepthContext, useLayerDepth } from '@dunky.dev/react-use-layer-stack'
+import type { ComboboxOptions, PointerPayload } from '@dunky.dev/combobox'
+
+import { mergeProps, normalize } from '@dunky.dev/react-state-machine'
+import {
+  ComboboxContext,
+  ComboboxItemContext,
+  useComboboxContext,
+  useComboboxItemContext,
+} from './context'
+import { documentIndex } from './utils/document-index'
+import { useCombobox } from './use-combobox'
+
+// Explicit so the exports satisfy --isolatedDeclarations (a bare forwardRef
+// call gives the variable no annotatable type).
+type PartComponent<Props, Element> = ForwardRefExoticComponent<Props & RefAttributes<Element>>
+
+// =============================================================================
+// <Combobox> — root, owns the machine and renders no DOM
+// =============================================================================
+
+export interface ComboboxProps extends ComboboxOptions {
+  children?: ReactNode
+}
+
+export const Combobox: ((props: ComboboxProps) => ReactNode) & Parts = ({
+  children,
+  ...options
+}) => {
+  const depth = useLayerDepth() + 1
+  const value = useCombobox(options)
+  return (
+    <LayerDepthContext.Provider value={depth}>
+      <ComboboxContext.Provider value={value}>{children}</ComboboxContext.Provider>
+    </LayerDepthContext.Provider>
+  )
+}
+
+// =============================================================================
+// <Combobox.Input> — the text field; DOM focus lives here the whole time
+// =============================================================================
+
+export interface ComboboxInputProps extends ComponentPropsWithoutRef<'input'> {}
+
+export const Input: PartComponent<ComboboxInputProps, HTMLInputElement> = forwardRef<
+  HTMLInputElement,
+  ComboboxInputProps
+>((props, forwardedRef) => {
+  const { api, inputRef } = useComboboxContext()
+  useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement)
+
+  const bindings: Record<string, unknown> = {
+    ...normalize(api.parts.input),
+    // Machine-owned text: the input renders context, edits flow back as events.
+    value: api.inputValue,
+  }
+  // On top of the core's aria-disabled: the native attribute is what actually
+  // refuses text entry. Only set when true so a consumer prop isn't stomped.
+  if (api.disabled) bindings.disabled = true
+
+  const merged = mergeProps(props as Record<string, unknown>, bindings)
+  return <input {...merged} ref={inputRef} />
+})
+
+// =============================================================================
+// <Combobox.Trigger> — the optional disclosure button, not in the tab order
+// =============================================================================
+
+export interface ComboboxTriggerProps extends ComponentPropsWithoutRef<'button'> {}
+
+export const Trigger: PartComponent<ComboboxTriggerProps, HTMLButtonElement> = forwardRef<
+  HTMLButtonElement,
+  ComboboxTriggerProps
+>((props, forwardedRef) => {
+  const { api, inputRef, triggerRef } = useComboboxContext()
+  useImperativeHandle(forwardedRef, () => triggerRef.current as HTMLButtonElement)
+  const { onClick, ...bindings } = normalize(api.parts.trigger) as {
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void
+  } & Record<string, unknown>
+
+  const merged = mergeProps(
+    { type: 'button' as const, ...props },
+    {
+      ...bindings,
+      // The trigger toggles and hands focus (back) to the input — it is a caret
+      // on the input's popup, not a tab stop of its own (APG editable combobox).
+      onClick: (event: MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        inputRef.current?.focus()
+      },
+    },
+  )
+
+  return <button {...merged} ref={triggerRef} />
+})
+
+// =============================================================================
+// <Combobox.Listbox> — the popup list; stays mounted while closed so items
+// keep their registration and ids stable
+// =============================================================================
+
+export interface ComboboxListboxProps extends ComponentPropsWithoutRef<'div'> {}
+
+export const Listbox: PartComponent<ComboboxListboxProps, HTMLDivElement> = forwardRef<
+  HTMLDivElement,
+  ComboboxListboxProps
+>((props, forwardedRef) => {
+  const { api, machine, inputRef, triggerRef, listboxRef } = useComboboxContext()
+  const depth = useLayerDepth()
+  useImperativeHandle(forwardedRef, () => listboxRef.current as HTMLDivElement)
+
+  // The listbox stays mounted while closed, so the open flag — not mount — is
+  // the layer's lifecycle edge. No focus work interleaves with registration:
+  // DOM focus never leaves the input, so opening moves nothing and closing
+  // never needs a restore.
+  const open = api.open
+  useEffect(() => {
+    const listbox = listboxRef.current
+    if (!open || listbox === null) return
+    return registerLayer({ id: machine.context.id, depth, element: listbox, modal: false })
+  }, [open, machine, depth, listboxRef])
+
+  useInteractOutside(listboxRef, {
+    // Only the topmost layer of a stack answers an outside interaction. The
+    // result is an intent: the api fires the consumer's veto handler, then the
+    // machine gates dismissal.
+    onInteractOutside: event => {
+      if (!machine.matches('open') || !isTopmostLayer(machine.context.id)) return
+      // The native event doubles as the payload — its `defaultPrevented` stays
+      // live after the consumer's preventDefault() (a copy would go stale).
+      api.onInteractOutside(event as PointerPayload)
+    },
+    // Nested layers are not outside; neither are the input and trigger — an
+    // anchor press must reach the machine once (no dismiss-then-reopen).
+    ignore: target =>
+      layerContainsTarget(machine.context.id, target) ||
+      inputRef.current?.contains(target) === true ||
+      triggerRef.current?.contains(target) === true,
+  })
+
+  const merged = mergeProps(props as Record<string, unknown>, {
+    ...normalize(api.parts.listbox),
+    // The core binding hides it from assistive tech; the native attribute
+    // hides it visually.
+    hidden: api.open ? undefined : true,
+  })
+  return <div {...merged} ref={listboxRef} />
+})
+
+// =============================================================================
+// <Combobox.Item> — one suggestion; registers itself with the machine
+// =============================================================================
+
+export interface ComboboxItemProps extends ComponentPropsWithoutRef<'div'> {
+  /** The suggestion's value. Required, unique per combobox. */
+  value: string
+  /** Disables this suggestion: skipped by navigation, not selectable. @default false */
+  disabled?: boolean
+  /** The text committed to the input on selection. Defaults to the item's
+   * string children, else the value. */
+  label?: string
+}
+
+export const Item: PartComponent<ComboboxItemProps, HTMLDivElement> = forwardRef<
+  HTMLDivElement,
+  ComboboxItemProps
+>(({ value, disabled = false, label, ...props }, forwardedRef) => {
+  const { api, machine, listboxRef } = useComboboxContext()
+  const itemRef = useRef<HTMLDivElement>(null)
+  useImperativeHandle(forwardedRef, () => itemRef.current as HTMLDivElement)
+  const itemLabel = label ?? (typeof props.children === 'string' ? props.children : value)
+
+  // Registration reports the item's data and its position among the rendered
+  // options. The position is a host fact with no prop to depend on — consumer
+  // filtering unmounts and remounts items, and a keyed re-sort moves DOM
+  // nodes without changing any prop — so the report re-runs after every
+  // commit; the machine ignores a report that changes nothing. Only unmount
+  // or a value change unregisters.
+  useEffect(() => {
+    machine.send({
+      type: 'item.register',
+      item: { value, label: itemLabel, disabled },
+      index: documentIndex(listboxRef.current, itemRef.current),
+    })
+  })
+
+  useEffect(() => () => machine.send({ type: 'item.unregister', value }), [machine, value])
+
+  const merged = mergeProps(
+    props as Record<string, unknown>,
+    normalize(api.parts.item({ value, disabled })),
+  )
+  return (
+    <ComboboxItemContext.Provider value={value}>
+      <div {...merged} ref={itemRef} />
+    </ComboboxItemContext.Provider>
+  )
+})
+
+// =============================================================================
+// <Combobox.ItemIndicator> — the selection mark; only the selected item shows it
+// =============================================================================
+
+export interface ComboboxItemIndicatorProps extends ComponentPropsWithoutRef<'span'> {}
+
+export const ItemIndicator: PartComponent<ComboboxItemIndicatorProps, HTMLSpanElement> = forwardRef<
+  HTMLSpanElement,
+  ComboboxItemIndicatorProps
+>((props, forwardedRef) => {
+  const { api } = useComboboxContext()
+  const itemValue = useComboboxItemContext()
+  if (api.value !== itemValue) return null
+  const merged = mergeProps(props as Record<string, unknown>, normalize(api.parts.itemIndicator))
+  return <span {...merged} ref={forwardedRef} />
+})
+
+// Parts
+// -----------------------------------------------------------------------------
+
+export interface Parts {
+  Input: typeof Input
+  Trigger: typeof Trigger
+  Listbox: typeof Listbox
+  Item: typeof Item
+  ItemIndicator: typeof ItemIndicator
+}
+
+Combobox.Input = Input
+Combobox.Trigger = Trigger
+Combobox.Listbox = Listbox
+Combobox.Item = Item
+Combobox.ItemIndicator = ItemIndicator
diff --git a/packages/react/combobox/src/context.ts b/packages/react/combobox/src/context.ts
new file mode 100644
index 0000000..a9e65a3
--- /dev/null
+++ b/packages/react/combobox/src/context.ts
@@ -0,0 +1,43 @@
+import { createContext, useContext, type Context, type RefObject } from 'react'
+import type { ComboboxApi, ComboboxMachine } from '@dunky.dev/combobox'
+
+export interface ComboboxContextValue {
+  api: ComboboxApi
+  machine: ComboboxMachine
+  // The anchor elements, so the Listbox's outside detection can excuse them:
+  // a press on the input or the trigger must reach the machine exactly once —
+  // never as an outside interaction (no dismiss-then-reopen). The trigger also
+  // hands focus to the input through inputRef.
+  inputRef: RefObject<HTMLInputElement | null>
+  triggerRef: RefObject<HTMLButtonElement | null>
+  // The listbox element, so each Item can report its position among the
+  // rendered options when it registers.
+  listboxRef: RefObject<HTMLDivElement | null>
+}
+
+export const ComboboxContext: Context<ComboboxContextValue | undefined> = createContext<
+  ComboboxContextValue | undefined
+>(undefined)
+
+export const useComboboxContext = (): ComboboxContextValue => {
+  const context = useContext(ComboboxContext)
+  if (context === undefined) {
+    throw new Error('Combobox parts must be rendered within a <Combobox> root')
+  }
+  return context
+}
+
+// The owning item's value, so ItemIndicator knows which suggestion it
+// decorates without a prop. Kept internal — parts reason through the root
+// context.
+export const ComboboxItemContext: Context<string | undefined> = createContext<string | undefined>(
+  undefined,
+)
+
+export const useComboboxItemContext = (): string => {
+  const value = useContext(ComboboxItemContext)
+  if (value === undefined) {
+    throw new Error('Combobox item parts must be rendered within a <Combobox.Item>')
+  }
+  return value
+}
diff --git a/packages/react/combobox/src/effects.ts b/packages/react/combobox/src/effects.ts
new file mode 100644
index 0000000..aa95ae5
--- /dev/null
+++ b/packages/react/combobox/src/effects.ts
@@ -0,0 +1,78 @@
+import { isTopmostLayer } from '@dunky.dev/dom-layer-stack'
+import type { ComponentEffect } from '@dunky.dev/react-state-machine'
+import type { ComboboxMachine, ComboboxOptions } from '@dunky.dev/combobox'
+
+// Substrate effects: prop-driven or document-level work the machine can't own.
+// useMachine runs one useEffect per entry, keyed on the listed prop deps.
+type ComboboxEffect = ComponentEffect<ComboboxMachine, ComboboxOptions>
+
+// Controlled open: follow the `open` prop in both directions.
+const syncControlledOpen: ComboboxEffect = [
+  (machine, props) => {
+    if (props.open === undefined) return
+    if (props.open !== machine.matches('open')) {
+      machine.send({ type: props.open ? 'open' : 'close' })
+    }
+  },
+  ['open'],
+]
+
+// Controlled value: follow the `value` prop in both directions (null included).
+const syncControlledValue: ComboboxEffect = [
+  (machine, props) => {
+    if (props.value === undefined) return
+    if (props.value !== machine.context.value) {
+      machine.send({ type: 'value.set', value: props.value })
+    }
+  },
+  ['value'],
+]
+
+// Controlled input text: follow the `inputValue` prop.
+const syncControlledInputValue: ComboboxEffect = [
+  (machine, props) => {
+    if (props.inputValue === undefined) return
+    if (props.inputValue !== machine.context.inputValue) {
+      machine.send({ type: 'inputValue.set', value: props.inputValue })
+    }
+  },
+  ['inputValue'],
+]
+
+// `disabled` gates transitions at runtime (the open guard), so it must live in
+// context and re-sync when the prop changes — the machine never reads props.
+const syncDisabled: ComboboxEffect = [
+  (machine, props) => {
+    const disabled = props.disabled ?? false
+    if (machine.context.disabled !== disabled) {
+      machine.send({ type: 'disabled.set', disabled })
+    }
+  },
+  ['disabled'],
+]
+
+// Escape is a document-level concern, not a part's — it must work wherever
+// focus is.
+const trackEscape: ComboboxEffect = [
+  (machine, props) => {
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key !== 'Escape' || !machine.matches('open')) return
+      // Only the topmost layer answers Escape — a nested stack closes one
+      // layer at a time.
+      if (!isTopmostLayer(machine.context.id)) return
+      props.onEscapeKeyDown?.(event)
+      if (!event.defaultPrevented) machine.send({ type: 'escape' })
+    }
+    document.addEventListener('keydown', onKeyDown, true)
+    return () => document.removeEventListener('keydown', onKeyDown, true)
+  },
+  ['onEscapeKeyDown'],
+]
+
+export const comboboxEffects: ComboboxEffect[] = [
+  syncControlledOpen,
+  syncControlledValue,
+  syncControlledInputValue,
+  syncDisabled,
+  trackEscape,
+]
diff --git a/packages/react/combobox/src/index.ts b/packages/react/combobox/src/index.ts
new file mode 100644
index 0000000..03a050f
--- /dev/null
+++ b/packages/react/combobox/src/index.ts
@@ -0,0 +1,15 @@
+export {
+  Combobox,
+  type ComboboxProps,
+  type ComboboxInputProps,
+  type ComboboxTriggerProps,
+  type ComboboxListboxProps,
+  type ComboboxItemProps,
+  type ComboboxItemIndicatorProps,
+} from './combobox'
+export type {
+  ComboboxCallbacks,
+  ComboboxOptions,
+  KeyboardPayload,
+  PointerPayload,
+} from '@dunky.dev/combobox'
diff --git a/packages/react/combobox/src/use-combobox.ts b/packages/react/combobox/src/use-combobox.ts
new file mode 100644
index 0000000..1a61f82
--- /dev/null
+++ b/packages/react/combobox/src/use-combobox.ts
@@ -0,0 +1,19 @@
+import { useId, useRef } from 'react'
+import { useMachine } from '@dunky.dev/react-state-machine'
+import { comboboxMachine, comboboxConnect } from '@dunky.dev/combobox'
+import type { ComboboxOptions } from '@dunky.dev/combobox'
+
+import type { ComboboxContextValue } from './context'
+import { comboboxEffects } from './effects'
+
+export function useCombobox(options: ComboboxOptions): ComboboxContextValue {
+  const id = useId()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const listboxRef = useRef<HTMLDivElement>(null)
+  const { api, machine } = useMachine(comboboxMachine, comboboxConnect, comboboxEffects, {
+    id,
+    ...options,
+  })
+  return { api, machine, inputRef, triggerRef, listboxRef }
+}
diff --git a/packages/react/combobox/src/utils/document-index.ts b/packages/react/combobox/src/utils/document-index.ts
new file mode 100644
index 0000000..f58bfce
--- /dev/null
+++ b/packages/react/combobox/src/utils/document-index.ts
@@ -0,0 +1,19 @@
+/**
+ * The element's position among the rendered options of `listbox`, or
+ * undefined when either side isn't rendered (the machine appends then).
+ * Registration reports this so the machine's navigation order matches the
+ * rendered order even when the consumer's filtering unmounts and remounts
+ * items — a remounted item registers back at its rendered position, not at
+ * the end — or when a keyed re-sort moves the rendered nodes in place.
+ */
+export function documentIndex(
+  listbox: HTMLElement | null,
+  element: HTMLElement | null,
+): number | undefined {
+  if (listbox === null || element === null) return undefined
+  const options = listbox.querySelectorAll('[role="option"]')
+  for (let i = 0; i < options.length; i++) {
+    if (options[i] === element) return i
+  }
+  return undefined
+}
diff --git a/packages/react/combobox/stories/combobox.stories.tsx b/packages/react/combobox/stories/combobox.stories.tsx
new file mode 100644
index 0000000..96f1f40
--- /dev/null
+++ b/packages/react/combobox/stories/combobox.stories.tsx
@@ -0,0 +1,160 @@
+import { useState, type CSSProperties } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Combobox, type ComboboxProps } from '@dunky.dev/react-combobox'
+
+const meta: Meta<typeof Combobox> = {
+  title: 'Primitives/Combobox',
+  component: Combobox,
+}
+
+export default meta
+type StoryType = StoryObj<typeof Combobox>
+
+// The primitive ships headless — the story is the consumer, so it brings the
+// styles. The data attributes on every part are the real styling hooks; the
+// interaction-driven ones (highlight, disabled, selected) need selectors, so
+// the story ships a tiny stylesheet.
+const anchor: CSSProperties = {
+  position: 'relative',
+  display: 'inline-flex',
+  gap: 4,
+  alignItems: 'center',
+}
+const inputStyle: CSSProperties = {
+  padding: '8px 10px',
+  border: '1px solid #ccc',
+  borderRadius: 6,
+  font: 'inherit',
+  width: 220,
+}
+const triggerStyle: CSSProperties = {
+  border: 'none',
+  background: 'transparent',
+  cursor: 'pointer',
+  padding: 4,
+}
+// No positioning engine on purpose: the consumer anchors the popup — here an
+// absolutely-positioned list under a relative wrapper.
+const listboxStyle: CSSProperties = {
+  position: 'absolute',
+  top: '100%',
+  insetInlineStart: 0,
+  marginTop: 4,
+  width: 220,
+  maxHeight: 240,
+  overflow: 'auto',
+  padding: 4,
+  background: 'white',
+  border: '1px solid #ccc',
+  borderRadius: 6,
+  boxShadow: '0 8px 24px rgba(0, 0, 0, 0.16)',
+}
+const itemStyle: CSSProperties = {
+  padding: '6px 8px',
+  borderRadius: 4,
+  cursor: 'default',
+  display: 'flex',
+  justifyContent: 'space-between',
+}
+const sheet = `
+  [data-dunky-combobox-item][data-highlighted] { background: #e0ecff; }
+  [data-dunky-combobox-item][data-disabled] { color: #b3b3b3; }
+  [data-dunky-combobox-item][data-state='selected'] { font-weight: 600; }
+`
+
+const fruits = [
+  'Apple',
+  'Apricot',
+  'Banana',
+  'Blueberry',
+  'Cherry',
+  'Date',
+  'Grape',
+  'Mango',
+  'Peach',
+  'Pear',
+]
+
+const Item = ({ fruit, disabled = false }: { fruit: string; disabled?: boolean }) => (
+  <Combobox.Item
+    value={fruit.toLowerCase()}
+    label={fruit}
+    disabled={disabled}
+    data-dunky-combobox-item=''
+    style={itemStyle}
+  >
+    {fruit} <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
+  </Combobox.Item>
+)
+
+interface FilteredComboboxProps extends ComboboxProps {
+  disabledFruits?: string[]
+  defaultQuery?: string
+}
+
+// The canonical wiring: filtering is the consumer's — mirror the input text
+// into state and render only the matching items.
+const FilteredCombobox = ({
+  disabledFruits = [],
+  defaultQuery = '',
+  ...options
+}: FilteredComboboxProps) => {
+  const [query, setQuery] = useState(defaultQuery)
+  const matches = fruits.filter(fruit => fruit.toLowerCase().includes(query.toLowerCase()))
+  return (
+    <Combobox inputValue={query} onInputValueChange={setQuery} {...options}>
+      <style>{sheet}</style>
+      <div style={anchor}>
+        <Combobox.Input aria-label='Fruit' placeholder='Search fruits…' style={inputStyle} />
+        <Combobox.Trigger aria-label='Show fruits' style={triggerStyle}>
+          ▾
+        </Combobox.Trigger>
+        <Combobox.Listbox style={listboxStyle}>
+          {matches.map(fruit => (
+            <Item key={fruit} fruit={fruit} disabled={disabledFruits.includes(fruit)} />
+          ))}
+        </Combobox.Listbox>
+      </div>
+    </Combobox>
+  )
+}
+
+export const standard: StoryType = {
+  render: () => <FilteredCombobox />,
+}
+
+export const loop: StoryType = {
+  render: () => <FilteredCombobox loop />,
+}
+
+export const disabledItems: StoryType = {
+  render: () => <FilteredCombobox disabledFruits={['Banana', 'Date']} />,
+}
+
+export const preselected: StoryType = {
+  render: () => <FilteredCombobox defaultValue='cherry' defaultQuery='Cherry' />,
+}
+
+export const disabled: StoryType = {
+  render: () => <FilteredCombobox disabled />,
+}
+
+// Value and open state driven from outside; every internal intent is still
+// reported, so the controls stay in sync.
+const ControlledCombobox = () => {
+  const [value, setValue] = useState<string | null>(null)
+  const [open, setOpen] = useState(false)
+  return (
+    <div style={{ display: 'grid', gap: 12, justifyItems: 'start' }}>
+      <FilteredCombobox value={value} onValueChange={setValue} open={open} onOpenChange={setOpen} />
+      <button type='button' onClick={() => setOpen(current => !current)}>
+        {open ? 'Close' : 'Open'} the list
+      </button>
+      <output>value: {value ?? '—'}</output>
+    </div>
+  )
+}
+
+export const controlled: StoryType = {
+  render: () => <ControlledCombobox />,
+}
diff --git a/packages/react/combobox/tests/combobox.test.tsx b/packages/react/combobox/tests/combobox.test.tsx
new file mode 100644
index 0000000..390a13f
--- /dev/null
+++ b/packages/react/combobox/tests/combobox.test.tsx
@@ -0,0 +1,459 @@
+// @vitest-environment jsdom
+// The React edge of the Combobox — behavior only; the machine's own contract
+// is covered in @dunky.dev/combobox's tests.
+import { StrictMode, useState } from 'react'
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { registerLayer } from '@dunky.dev/dom-layer-stack'
+import { Combobox, type ComboboxProps } from '@dunky.dev/react-combobox'
+
+const DefaultCombobox = (props: ComboboxProps) => (
+  <Combobox {...props}>
+    <Combobox.Input aria-label='Fruit' />
+    <Combobox.Trigger aria-label='Show fruits'>v</Combobox.Trigger>
+    <Combobox.Listbox>
+      <Combobox.Item value='apple'>Apple</Combobox.Item>
+      <Combobox.Item value='banana'>Banana</Combobox.Item>
+      <Combobox.Item value='cherry' disabled>
+        Cherry
+      </Combobox.Item>
+      <Combobox.Item value='date'>Date</Combobox.Item>
+    </Combobox.Listbox>
+  </Combobox>
+)
+
+const fruits = ['Apple', 'Banana', 'Cherry']
+
+// The consumer owns filtering: the canonical wiring mirrors the input text
+// into state and renders only the matching items.
+const FilterCombobox = (props: ComboboxProps) => {
+  const [query, setQuery] = useState('')
+  return (
+    <Combobox {...props} inputValue={query} onInputValueChange={setQuery}>
+      <Combobox.Input aria-label='Fruit' />
+      <Combobox.Listbox>
+        {fruits
+          .filter(fruit => fruit.toLowerCase().includes(query.toLowerCase()))
+          .map(fruit => (
+            <Combobox.Item key={fruit} value={fruit.toLowerCase()}>
+              {fruit}
+            </Combobox.Item>
+          ))}
+      </Combobox.Listbox>
+    </Combobox>
+  )
+}
+
+// A keyed re-sort: the stable keys make React move the rendered nodes in
+// place — no item unmounts, no prop changes.
+const ReorderCombobox = () => {
+  const [reversed, setReversed] = useState(false)
+  const options = reversed ? [...fruits].reverse() : fruits
+  return (
+    <>
+      <button type='button' onClick={() => setReversed(true)}>
+        Reverse
+      </button>
+      <Combobox>
+        <Combobox.Input aria-label='Fruit' />
+        <Combobox.Listbox>
+          {options.map(fruit => (
+            <Combobox.Item key={fruit} value={fruit.toLowerCase()}>
+              {fruit}
+            </Combobox.Item>
+          ))}
+        </Combobox.Listbox>
+      </Combobox>
+    </>
+  )
+}
+
+const input = (): HTMLInputElement => screen.getByRole('combobox')
+
+const typeText = (value: string): void => {
+  fireEvent.change(input(), { target: { value } })
+}
+
+const pressKey = (key: string): void => {
+  fireEvent.keyDown(input(), { key })
+}
+
+const pressEscape = (): void => {
+  fireEvent.keyDown(document.body, { key: 'Escape' })
+}
+
+// The listbox stays mounted (hidden) while closed, so resolve it through the
+// wiring rather than a role query.
+const listbox = (): HTMLElement =>
+  document.getElementById(input().getAttribute('aria-controls') as string) as HTMLElement
+
+// RTL auto-cleanup needs vitest globals; this repo runs with globals: false.
+afterEach(cleanup)
+
+describe('Combobox', () => {
+  describe('aria wiring', () => {
+    it('wires the input as a list-autocomplete combobox over the listbox', () => {
+      render(<DefaultCombobox />)
+      const combobox = input()
+      expect(combobox.tagName).toBe('INPUT')
+      expect(combobox.getAttribute('aria-autocomplete')).toBe('list')
+      expect(combobox.getAttribute('aria-expanded')).toBe('false')
+
+      expect(listbox().getAttribute('role')).toBe('listbox')
+      expect(listbox().hasAttribute('hidden')).toBe(true)
+      expect(listbox().getAttribute('data-state')).toBe('closed')
+
+      typeText('a')
+      expect(combobox.getAttribute('aria-expanded')).toBe('true')
+      expect(listbox().hasAttribute('hidden')).toBe(false)
+      expect(listbox().getAttribute('data-state')).toBe('open')
+    })
+
+    it('keeps the trigger out of the tab order, carrying the popup relationship', () => {
+      render(<DefaultCombobox />)
+      const trigger = screen.getByLabelText('Show fruits')
+      expect(trigger.tabIndex).toBe(-1)
+      expect(trigger.getAttribute('aria-haspopup')).toBe('listbox')
+      expect(trigger.getAttribute('aria-expanded')).toBe('false')
+    })
+  })
+
+  describe('open / close', () => {
+    it('renders open when defaultOpen', () => {
+      render(<DefaultCombobox defaultOpen />)
+      expect(screen.queryByRole('listbox')).not.toBeNull()
+    })
+
+    it('fires onOpenChange with the new value on open and close', () => {
+      const onOpenChange = vi.fn()
+      render(<DefaultCombobox onOpenChange={onOpenChange} />)
+
+      typeText('a')
+      expect(onOpenChange).toHaveBeenLastCalledWith(true)
+
+      pressEscape()
+      expect(onOpenChange).toHaveBeenLastCalledWith(false)
+    })
+
+    it('trigger press toggles the list and hands focus to the input', () => {
+      render(<DefaultCombobox />)
+      const trigger = screen.getByLabelText('Show fruits')
+
+      act(() => trigger.click())
+      expect(screen.queryByRole('listbox')).not.toBeNull()
+      expect(document.activeElement).toBe(input())
+
+      // A real press is pointerdown (outside-detection territory) then click:
+      // the trigger is excused as the anchor, so one press closes in one
+      // motion — no dismiss-then-reopen flicker.
+      fireEvent.pointerDown(trigger)
+      fireEvent.click(trigger)
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('does not open when disabled', () => {
+      render(<DefaultCombobox disabled />)
+      expect(input().disabled).toBe(true)
+      expect(input().getAttribute('aria-disabled')).toBe('true')
+
+      act(() => screen.getByLabelText('Show fruits').click())
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+  })
+
+  describe('keyboard', () => {
+    it('ArrowDown opens and highlights the first option', () => {
+      render(<DefaultCombobox />)
+      pressKey('ArrowDown')
+
+      const apple = screen.getByRole('option', { name: 'Apple' })
+      expect(input().getAttribute('aria-activedescendant')).toBe(apple.id)
+      expect(apple.hasAttribute('data-highlighted')).toBe(true)
+    })
+
+    it('Enter commits the highlighted option: label in the input, list closed', () => {
+      const onValueChange = vi.fn()
+      render(<DefaultCombobox onValueChange={onValueChange} />)
+
+      pressKey('ArrowDown')
+      pressKey('ArrowDown')
+      pressKey('Enter')
+
+      expect(onValueChange).toHaveBeenLastCalledWith('banana')
+      expect(input().value).toBe('Banana')
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(input().hasAttribute('aria-activedescendant')).toBe(false)
+    })
+
+    it('Escape closes without selecting, keeping the typed text', () => {
+      const onValueChange = vi.fn()
+      render(<DefaultCombobox onValueChange={onValueChange} />)
+
+      typeText('ban')
+      pressEscape()
+
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(input().value).toBe('ban')
+      expect(onValueChange).not.toHaveBeenCalled()
+    })
+
+    it('stays open when onEscapeKeyDown prevents default', () => {
+      const onEscapeKeyDown = vi.fn(event => event.preventDefault())
+      render(<DefaultCombobox defaultOpen onEscapeKeyDown={onEscapeKeyDown} />)
+
+      pressEscape()
+      expect(onEscapeKeyDown).toHaveBeenCalledTimes(1)
+      expect(screen.queryByRole('listbox')).not.toBeNull()
+    })
+  })
+
+  describe('pointer', () => {
+    it('moving the pointer over an option highlights it', () => {
+      render(<DefaultCombobox defaultOpen />)
+      const banana = screen.getByRole('option', { name: 'Banana' })
+
+      fireEvent.pointerMove(banana)
+      expect(input().getAttribute('aria-activedescendant')).toBe(banana.id)
+      expect(banana.hasAttribute('data-highlighted')).toBe(true)
+    })
+
+    it('pressing an option selects it without stealing focus from the input', () => {
+      render(<DefaultCombobox defaultOpen />)
+      act(() => input().focus())
+      const banana = screen.getByRole('option', { name: 'Banana' })
+
+      // The option cancels the pointerdown default — the focus move.
+      expect(fireEvent.pointerDown(banana)).toBe(false)
+      fireEvent.click(banana)
+
+      expect(input().value).toBe('Banana')
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(document.activeElement).toBe(input())
+    })
+
+    it('pressing a disabled option does nothing', () => {
+      render(<DefaultCombobox defaultOpen />)
+      fireEvent.click(screen.getByRole('option', { name: 'Cherry' }))
+      expect(screen.queryByRole('listbox')).not.toBeNull()
+      expect(input().value).toBe('')
+    })
+
+    it('pressing the listbox surface between options keeps focus in the input', () => {
+      render(<DefaultCombobox defaultOpen />)
+      act(() => input().focus())
+
+      // The surface cancels the pointerdown default — the focus move to body.
+      expect(fireEvent.pointerDown(listbox())).toBe(false)
+      expect(document.activeElement).toBe(input())
+      expect(screen.queryByRole('listbox')).not.toBeNull()
+    })
+  })
+
+  describe('outside interaction', () => {
+    it('closes on a press outside the combobox', () => {
+      render(<DefaultCombobox defaultOpen />)
+      fireEvent.pointerDown(document.body)
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('a press on the input is the anchor, not outside', () => {
+      render(<DefaultCombobox defaultOpen />)
+      fireEvent.pointerDown(input())
+      expect(screen.queryByRole('listbox')).not.toBeNull()
+    })
+
+    it('closes when focus moves outside', () => {
+      render(
+        <>
+          <DefaultCombobox defaultOpen />
+          <button type='button'>Elsewhere</button>
+        </>,
+      )
+      act(() => screen.getByText('Elsewhere').focus())
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('stays open when onInteractOutside prevents default', () => {
+      const onInteractOutside = vi.fn(event => event?.preventDefault())
+      render(<DefaultCombobox defaultOpen onInteractOutside={onInteractOutside} />)
+
+      fireEvent.pointerDown(document.body)
+      expect(onInteractOutside).toHaveBeenCalledTimes(1)
+      expect(screen.queryByRole('listbox')).not.toBeNull()
+    })
+  })
+
+  describe('layering', () => {
+    // A combobox can't nest itself, so a stub layer registered deeper on the
+    // shared stack stands in for an overlay opened from within the listbox
+    // (the open combobox sits at depth 1).
+    const stackStubLayer = () => {
+      const element = document.createElement('div')
+      document.body.append(element)
+      const unregister = registerLayer({ id: 'stub-layer', depth: 2, element, modal: false })
+      return {
+        element,
+        remove: () => {
+          unregister()
+          element.remove()
+        },
+      }
+    }
+
+    it('Escape routes to the topmost layer only, one layer per press', () => {
+      render(<DefaultCombobox defaultOpen />)
+      const stub = stackStubLayer()
+
+      pressEscape()
+      expect(screen.queryByRole('listbox')).not.toBeNull()
+
+      stub.remove()
+      pressEscape()
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('outside presses route to the topmost layer; a nested layer is never outside', () => {
+      render(<DefaultCombobox defaultOpen />)
+      const stub = stackStubLayer()
+
+      // Inside the nested layer: not outside the combobox beneath it.
+      fireEvent.pointerDown(stub.element)
+      expect(screen.queryByRole('listbox')).not.toBeNull()
+
+      // Outside everything: only the topmost layer answers.
+      fireEvent.pointerDown(document.body)
+      expect(screen.queryByRole('listbox')).not.toBeNull()
+
+      stub.remove()
+      fireEvent.pointerDown(document.body)
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+  })
+
+  describe('controlled', () => {
+    it('follows the open prop in both directions', () => {
+      const { rerender } = render(<DefaultCombobox open={false} />)
+      expect(screen.queryByRole('listbox')).toBeNull()
+
+      rerender(<DefaultCombobox open />)
+      expect(screen.queryByRole('listbox')).not.toBeNull()
+
+      rerender(<DefaultCombobox open={false} />)
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('follows the inputValue prop and reports typing through onInputValueChange', () => {
+      const onInputValueChange = vi.fn()
+      const { rerender } = render(
+        <DefaultCombobox inputValue='Ap' onInputValueChange={onInputValueChange} />,
+      )
+      expect(input().value).toBe('Ap')
+
+      typeText('App')
+      expect(onInputValueChange).toHaveBeenLastCalledWith('App')
+
+      rerender(<DefaultCombobox inputValue='Apple' onInputValueChange={onInputValueChange} />)
+      expect(input().value).toBe('Apple')
+    })
+
+    it('marks the controlled value as selected', () => {
+      render(<DefaultCombobox value='banana' defaultOpen />)
+      const banana = screen.getByRole('option', { name: 'Banana' })
+      expect(banana.getAttribute('aria-selected')).toBe('true')
+      expect(banana.getAttribute('data-state')).toBe('selected')
+      expect(screen.getByRole('option', { name: 'Apple' }).getAttribute('data-state')).toBe(
+        'unselected',
+      )
+    })
+
+    it('follows the value prop in both directions', () => {
+      const banana = () => screen.getByRole('option', { name: 'Banana' })
+      const { rerender } = render(<DefaultCombobox value={null} defaultOpen />)
+      expect(banana().getAttribute('aria-selected')).toBe('false')
+
+      rerender(<DefaultCombobox value='banana' defaultOpen />)
+      expect(banana().getAttribute('aria-selected')).toBe('true')
+
+      rerender(<DefaultCombobox value={null} defaultOpen />)
+      expect(banana().getAttribute('aria-selected')).toBe('false')
+    })
+
+    it('re-syncs disabled when the prop changes', () => {
+      const { rerender } = render(<DefaultCombobox />)
+      rerender(<DefaultCombobox disabled />)
+      expect(input().disabled).toBe(true)
+
+      rerender(<DefaultCombobox />)
+      expect(input().disabled).toBe(false)
+    })
+  })
+
+  describe('consumer filtering', () => {
+    it('keeps navigation in rendered order after items unmount and remount', () => {
+      render(<FilterCombobox />)
+      typeText('ch') // the consumer's filtering narrows to the one match…
+      expect(screen.getAllByRole('option').map(option => option.textContent)).toEqual(['Cherry'])
+      typeText('') // …then Apple and Banana remount around it
+      expect(screen.getAllByRole('option')).toHaveLength(3)
+
+      pressKey('ArrowDown')
+      const apple = screen.getByRole('option', { name: 'Apple' })
+      expect(input().getAttribute('aria-activedescendant')).toBe(apple.id)
+    })
+
+    it('keeps navigation in rendered order after a keyed re-sort moves items in place', () => {
+      render(<ReorderCombobox />)
+      act(() => screen.getByText('Reverse').click())
+
+      pressKey('ArrowDown')
+      const cherry = screen.getByRole('option', { name: 'Cherry' })
+      expect(input().getAttribute('aria-activedescendant')).toBe(cherry.id)
+
+      pressKey('ArrowDown')
+      const banana = screen.getByRole('option', { name: 'Banana' })
+      expect(input().getAttribute('aria-activedescendant')).toBe(banana.id)
+    })
+
+    it('selecting writes the label back through the controlled text', () => {
+      render(<FilterCombobox />)
+      typeText('ban')
+      pressKey('ArrowDown')
+      pressKey('Enter')
+      expect(input().value).toBe('Banana')
+    })
+  })
+
+  describe('items', () => {
+    it('renders the indicator only inside the selected item, hidden from AT', () => {
+      render(
+        <Combobox defaultValue='banana' defaultOpen>
+          <Combobox.Input aria-label='Fruit' />
+          <Combobox.Listbox>
+            <Combobox.Item value='apple'>
+              Apple <Combobox.ItemIndicator data-testid='indicator-apple'>✓</Combobox.ItemIndicator>
+            </Combobox.Item>
+            <Combobox.Item value='banana'>
+              Banana{' '}
+              <Combobox.ItemIndicator data-testid='indicator-banana'>✓</Combobox.ItemIndicator>
+            </Combobox.Item>
+          </Combobox.Listbox>
+        </Combobox>,
+      )
+      expect(screen.queryByTestId('indicator-apple')).toBeNull()
+      const indicator = screen.getByTestId('indicator-banana')
+      expect(indicator.getAttribute('aria-hidden')).toBe('true')
+    })
+
+    it('works under StrictMode without duplicate callbacks', () => {
+      const onValueChange = vi.fn()
+      render(
+        <StrictMode>
+          <DefaultCombobox defaultOpen onValueChange={onValueChange} />
+        </StrictMode>,
+      )
+      fireEvent.click(screen.getByRole('option', { name: 'Apple' }))
+      expect(onValueChange).toHaveBeenCalledTimes(1)
+      expect(onValueChange).toHaveBeenCalledWith('apple')
+    })
+  })
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b487891..1c30a56 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,15 @@ importers:
 
   packages/core: {}
 
+  packages/core/combobox:
+    dependencies:
+      '@dunky.dev/state-machine':
+        specifier: ^0.1.0
+        version: 0.1.0
+      '@dunky.dev/state-machine-bindings':
+        specifier: ^0.1.0
+        version: 0.1.0
+
   packages/core/dialog:
     dependencies:
       '@dunky.dev/state-machine':
@@ -91,6 +100,40 @@ importers:
         specifier: ^8.1.4
         version: 8.1.4(@types/node@22.19.21)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0)
 
+  packages/react/combobox:
+    dependencies:
+      '@dunky.dev/combobox':
+        specifier: workspace:^
+        version: link:../../core/combobox
+      '@dunky.dev/dom-layer-stack':
+        specifier: workspace:^
+        version: link:../../dom/utils/layer-stack
+      '@dunky.dev/react-state-machine':
+        specifier: ^0.1.0
+        version: 0.1.0(react@19.2.7)
+      '@dunky.dev/react-use-interact-outside':
+        specifier: workspace:^
+        version: link:../hooks/use-interact-outside
+      '@dunky.dev/react-use-layer-stack':
+        specifier: workspace:^
+        version: link:../hooks/use-layer-stack
+    devDependencies:
+      '@testing-library/react':
+        specifier: ^16.1.0
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@types/react':
+        specifier: ^19.2.15
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      react:
+        specifier: ^19.2.6
+        version: 19.2.7
+      react-dom:
+        specifier: ^19.2.6
+        version: 19.2.7(react@19.2.7)
+
   packages/react/dialog:
     dependencies:
       '@dunky.dev/dialog':
diff --git a/tsconfig.json b/tsconfig.json
index c3956bf..f80da52 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,8 @@
     "skipLibCheck": true,
     "strict": true,
     "paths": {
+      "@dunky.dev/combobox": ["./packages/core/combobox/src"],
+      "@dunky.dev/react-combobox": ["./packages/react/combobox/src"],
       "@dunky.dev/dialog": ["./packages/core/dialog/src"],
       "@dunky.dev/react-dialog": ["./packages/react/dialog/src"],
       "@dunky.dev/dom-focus-trap": ["./packages/dom/utils/focus-trap/src"],
diff --git a/tsdown.config.ts b/tsdown.config.ts
index 1e327f2..860b934 100644
--- a/tsdown.config.ts
+++ b/tsdown.config.ts
@@ -12,11 +12,13 @@ export default defineConfig({
   // real primitive replaces it. tsdown errors on an empty list, so this is never [].
   workspace: [
     'packages/core',
+    'packages/core/combobox',
     'packages/core/dialog',
     'packages/dom/utils/focus-trap',
     'packages/dom/utils/interact-outside',
     'packages/dom/utils/layer-stack',
     'packages/dom/utils/scroll-lock',
+    'packages/react/combobox',
     'packages/react/dialog',
     'packages/react/hooks/use-focus-trap',
     'packages/react/hooks/use-interact-outside',