List Item — Figma Assembly Rules

Status: active Figma assembly contract.

Scope

Use the published List Item master for reusable list rows. It owns row anatomy, size, alignment, optional text and icon properties, slots, separator, and clickable/disabled visual states. A screen owns its list data, selection model, and the behavior of any projected control.

Source evidence

Published master component set 18149:157253, key 0ae6158a858fcdf6b617bace023f91cfb3f117e2.
Mini-spec 18172:21820: states, slots, icons, subtitles, alignment, separator, large-data behavior, and dark-mode token usage.

Required assembly

Rule ID: list-item.published — use a List Item instance; do not reproduce its row shell with a local frame.
Select L, M, or S, top or center alignment, clickable state, disabled state, and bottom separator through the component properties. The Angular contract uses start for the Figma top alignment.
Enable only needed subtitle, icon, and slot properties. The master supports top, start, bottom, and end content; no empty slot wrapper is part of the visible anatomy.
Side and title icons are optional Icon instances. component.icon is an optional dependency because a List Item remains valid without any icon.
The slot contents are intentionally not dependencies: a screen may project a control or local content according to its own composition contract.
Rule ID: list-item.interactive-owner — for interactive controls in a slot, use a non-clickable List Item. A clickable row is the sole interactive owner of its surface.

Token and state rules

Default fill uses bg/level 1 base; clickable hover uses bg/level 1; and clickable pressed uses bg/dropdown active.
Use text/icon primary for primary title, text/icon secondary for supporting text and icons, and stroke/secondary for the optional bottom separator.
Preserve size-specific typography and icon sizing. Text truncates instead of stretching side anatomy; semantic tokens provide dark-mode adaptation.

Verification checklist

The instance resolves to component key 0ae6158a858fcdf6b617bace023f91cfb3f117e2.
Size, alignment, icon, subtitle, slot, separator, clickable, and disabled properties match the intended composition.
The row does not contain both a clickable surface and a focusable projected control.
The visible default, hover, pressed, and disabled treatments resolve to the documented semantic tokens without local color overrides.