## List
A vertical list of uniform rows — avatar + title/description meta and trailing actions, with size, bordered and split options.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-list> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- items: JSON array, default []. Structured rows: { title, description?, avatar? (icon name), actions?:[{ key, icon, danger?, label? }] }
- (children): slot, default —. Free-form fallback — each light-DOM child renders as one plain row (used when `items` is empty)
- size: 'small' | 'default' | 'large', default default. Row vertical padding scale (8 · 12 · 16)
- bordered: boolean, default false. Draw the outer container border
- split: boolean, default true. Row dividers; set split="false" to remove them
- list-title: string, default —. Renders an optional header row
- footer: string, default —. Renders an optional footer row
- loading: boolean, default false. Show shimmer skeleton rows in place of content
- action: CustomEvent, default —. Composed event on a trailing action click, detail { key, index }
Tokens: bg-container, border, split, radius-lg, radius-sm, radius-xs, radius-pill, text-default, text-secondary, text-tertiary, bg-hover, bg-accent, color-primary, color-error, border-focus, font-product.
Use when: List (many uniform rows of the same shape (recent items, participants, feeds)); Table (multi-column records that need sorting or alignment); Card (one titled group of mixed content).