# Approval gate

A bounded action proposal that requires a human decision before execution.

**Install:** `tokens.css`, `approval-gate.css`, and `button.css` for actions.

**Parts:** `__header` (`__eyebrow`, `__title`, optional `__aside` with `__shortcut` and/or host status chrome), `__action`, optional `__rationale` (`__rationale-label`, `__rationale-body`), `__footer` actions.

**States:** `waiting`, `success`, `error`, and `cancelled`. **No-JS:** exact action text, rationale, and native buttons remain visible. **Accessibility:** use a labelled section, explicit action copy, and text labels. **Security:** bind approval to an immutable action ID and exact serialized tool arguments; the component never executes the action. **`__shortcut`** is a static keyboard hint only; bind live gate state to host chrome such as `status-tag`, never mutate the shortcut text. A countdown is host chrome only and must never imply silent approval. **JavaScript:** host-owned decision handling.