# POS — Select modal

Terminal select modal, built **1:1 from `select-modal-spec.md`** and composed from the design-system
**Select item (CheckItem)** pattern. Inter · radius **8px** · all colours/space/type bound to design tokens.

## Modes (one component, toggled in the demo toolbar)
- **Multi-select** — checkbox + a leading **Select all** row (empty / indeterminate / checked).
- **Single-select** — radio (one at a time; tap the selected radio again to clear).
- Each mode **with / without description** (title `Text 500` 14/500 + sub `Text placeholder` 13/400).
- Two sizes: **S = 500px**, **M = 600px**.

## Anatomy
1. **Navbar** 44px — bg `--secondary-500` (#35325E), title Inter 20/500 white, close 24px `rgba(255,255,255,.70)`.
2. **Search** — pad 16/16/6/16, input 10/12 gap 12, placeholder “Axtar” (`--text-placeholder`), search icon 24/#999.
3. **Item list** — pad 12/16 gap 8; item bg always white, border `--grey-300` → `--primary-500` when selected, pad 12, 24px control leading.
4. **Footer** — pad 16 gap 12; **Reset change** (outline, shown when ≥1 selected) + primary `--primary-500` **Apply** / **Save change ✓**.

## State matrix (§6)
| State | Control | Header (multi) | Footer primary |
|---|---|---|---|
| empty | all off | Select all (off) | Apply |
| partial | some on | indeterminate | Reset change + Apply |
| all / selected | all on | checked | Reset change + Save change ✓ |

## Tokens
`--secondary-500` navbar · `--primary-500` accent/fill · `--grey-300` item border · `--grey-400` control stroke ·
`--text-disabled` disabled · `--text-500` title · `--text-placeholder` sub/placeholder · `--radius-md` 8px.
SVG control shapes (checkbox/radio/reset/close/search/save-check) kept **verbatim** from the spec; fills/strokes mapped to tokens.