DataList

DataList — список свойств сущности парами «подпись → значение»: панель деталей задачи, карточка профиля, сводка проекта.

Подпись — всегда текст, значением может быть что угодно: строка, Badge, Date, EntityLabel, кнопка. Компонент отвечает только за раскладку и кегль — внешний вид значения ведёт сам вложенный компонент.

Подписи всех строк выстраиваются в общую колонку по самой длинной из них: колонки объявлены на DataList.Root, а строки подхватывают их через subgrid. Поэтому ширину колонки задавать не нужно, но и строки из разных списков между собой не выравниваются — один блок свойств должен быть одним DataList.Root.

В отличие от Cell это не список сущностей, по которым переходят: ни подложки, ни ховера, ни выбора — только данные. Разметка семантическая (dl / dt / dd), так что пары читаются скринридером как пары.

Значение — не обязательно текст: в DataList.Value кладётся готовый компонент ДС. Несколько элементов подряд (метки, аватары) выстраиваются в ряд с общим зазором и переносятся по ширине, а не выезжают за колонку.

Размер задаётся на DataList.Root и управляет кеглем, зазорами и высотой строки. Ступень наследуется вложенными компонентами — аватар и бейдж в значении едут за списком, пока им не задали свой size. xs и sm — плотная панель свойств сбоку, md — базовый, lg и xl — сводка на всю ширину страницы.

Длинное значение переносится по строкам, а подпись остаётся на первой из них — строки выравниваются по верху, а не по центру. Колонка подписей ужимается вслед за контейнером: в узкой панели переносится и она.

Основной сценарий — блок свойств в Panel сбоку от содержимого. Размер sm держит панель плотной, а подписи узкой колонкой оставляют место значениям.

Строка списка — пара подписи и значения. Занимает обе колонки и наследует их у DataList.Root, поэтому подпись попадает в ту же колонку, что и у соседних строк.

Подпись строки (dt) — только текст, приглушённым цветом.

Значение строки (dd): текст или готовый компонент. Несколько элементов подряд встают в ряд с общим зазором.