# DescriptionList Key/value display (D70): a `

` of term/value pairs, the body `detail-drawer` has always described and never had a component for. No `size` prop — this is type, and the type scale is already expressed by --psi-text-*. Consumers restyle via the token family, not a prop. ## Props | Prop | Type | Default | Required | Description | |---|---|---|---|---| | `children` | `ReactNode` | — | no | One DescriptionItem per field. | | `layout` | `"stacked" \| "inline"` | stacked | no | `stacked` puts the term above its value; `inline` puts them in a two-column grid, which is what a detail drawer wants. | | `gap` | `8 \| 12 \| 16` | 12 | no | Gap between pairs, in px. | | `ref` | `Ref` | — | no | Forwarded ref to the root element. | | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. | ## Theming Override `--psi-description-list-*` custom properties at any scope. ## Rules - One accent per visual group; everything else neutral or ghost. - danger only for actions with real consequences. - Sizes are px numbers (24|32|40|48), never S/M/L. - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}. - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming. - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono). - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows. - Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination ("Rows per page" visible, so Field). - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.