# List Item — Figma Assembly Rules

<!-- figma-assembly.v2
{ "schemaVersion":"figma-assembly.v2", "id":"component.list-item", "level":"molecule", "kind":"published", "aliases":["🚛 List Item","List Item","wbl-list-item"], "uxSpec":"specs/ux/components/molecules/wbl-list-item.md", "inventoryTarget":"list-item", "componentKeys":["0ae6158a858fcdf6b617bace023f91cfb3f117e2"], "dependencies":[], "optionalDependencies":["component.icon"], "coveredBy":[] }
-->

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.