## Numbered item
The numbered wrapper for a repeatable composite item — a grey card with a muted number chip, a "<Label> N" header, a hover delete, and a body slot (SETTINGS-43).
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-numbered-item> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, settings.
Props:
- variant: contained | plain, default contained. contained = grey card (composite items); plain = no fill (single-field items only)
- n: number, default —. The item's number, shown in the chip and the header
- label: string, default —. Header noun — rendered as "<Label> N"
- deletable: boolean, default false. Show the hover delete; omit / false hides it entirely
- candelete: boolean, default true. false disables the delete (at the minimum item count) without hiding it
- collapsible: boolean, default false. Show a header caret that collapses the body in place (the QuestionList case)
- delete: CustomEvent<{n}>, default —. Composed event when the delete is pressed; read e.detail.n
- toggle: CustomEvent<{collapsed}>, default —. Composed event when the collapse caret is toggled; read e.detail.collapsed
Tokens: bg-container-secondary, bg-container-disabled, bg-hover, text-default, text-secondary, text-disabled, icon-muted, color-error, radius-lg, radius-sm, radius-pill.
Use when: Numbered item (a repeatable COMPOSITE item — more than one field, or a nested option list (a Question, a Card, a Round)); Option row (a flat list of single values — not wrapped in a numbered card); Plain variant (a single-field repeatable item that does not warrant a grey card).