# nested-select

Hierarchical multi-select with groups, tri-state parent checkboxes, search filtering, and floating panel.

## Markup

```html
<div data-c42-nested-select>
  <button data-c42-nested-select-trigger>
    <span data-c42-nested-select-value></span>
  </button>
  <div data-c42-nested-select-panel>
    <input data-c42-nested-select-search placeholder="Search..." />
    <ul data-c42-nested-select-list>
      <li data-c42-nested-select-group>
        <button data-c42-nested-select-parent>Fruits</button>
        <ul>
          <li data-c42-nested-select-option data-value="apple" data-search="apple">Apple</li>
          <li data-c42-nested-select-option data-value="banana" data-search="banana">Banana</li>
        </ul>
      </li>
      <li data-c42-nested-select-group>
        <button data-c42-nested-select-parent>Veggies</button>
        <ul>
          <li data-c42-nested-select-option data-value="carrot" data-search="carrot">Carrot</li>
        </ul>
      </li>
    </ul>
  </div>
</div>
```

### Key attributes on options

| Attribute | Purpose |
|-----------|---------|
| `data-value` | The value emitted in the change event |
| `data-search` | Text used for filtering (lowercase recommended) |

## Options

```ts
import { NestedSelect } from '@42/core/nested-select';

new NestedSelect(root, {
  defaultValue: [],           // initially selected values
  filter: true,               // enable search filtering
  placeholder: 'Select...',
  placement: 'bottom-start',  // floating-ui Placement
  offset: 4,
});
```

## Events

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

## Behaviour

- Clicking a parent toggles all its children.
- Parent state is derived: `checked` (all selected), `partial` (some), `unchecked` (none).
- `data-state="checked|partial"` is set on `[data-c42-nested-select-parent]`.
- `data-selected="true"` is set on selected options.
- Search filters by `data-search` attribute; groups with no visible options are hidden.
- Escape closes the panel.
- The value label shows the count of selected items.