# combobox

Autocomplete input with single/multi-select, client-side filtering, and keyboard navigation.

## Markup

```html
<div data-c42-combobox>
  <input data-c42-combobox-input placeholder="Search..." />
  <ul data-c42-combobox-list>
    <li data-c42-combobox-option data-value="apple">Apple</li>
    <li data-c42-combobox-option data-value="banana">Banana</li>
    <li data-c42-combobox-option data-value="cherry">Cherry</li>
  </ul>
</div>
```

## Options

```ts
import { Combobox } from '@42/core/combobox';

new Combobox(root, {
  multiple: false,            // allow multi-select
  filter: true,               // filter options as user types
  defaultValue: null,         // string | string[] | null
});
```

## Events

| Event | Detail |
|-------|--------|
| `combobox:change` | `{ values: string[] }` |
| `combobox:open` | — |
| `combobox:close` | — |

## Behaviour

- Typing in the input filters options by text content match.
- Arrow keys navigate options, Enter selects, Escape closes.
- `data-active` is set on the focused option (for styling).
- `data-selected="true"` is set on selected options.
- In single mode, selecting closes the list and fills the input.
- In multiple mode, selecting toggles the option; input stays open for further selection.
- Hidden options (filtered out) get `hidden` attribute.

## Keyboard

| Key | Action |
|-----|--------|
| ↓ / ↑ | Navigate options |
| Enter | Select active option |
| Escape | Close list |
| Backspace (empty input, multiple) | Remove last selected value |