GrTimeline

Разнородную ленту пишут пунктами: GrTimelineItem подряд. Однородный набор отдают пропом — и только тогда лента знает состав данных, то есть может их сгруппировать:

<GrTimeline :items="events" item-key="id" group-by="day">
  <template #group="{ group, items }">{{ group }} · {{ items.length }}</template>
  <template #item="{ item }">
    <GrTimelineItem :time="item.at" :title="item.title" :tone="item.tone" />
  </template>
</GrTimeline>

groupBy только режет набор на группы: порядок событий и порядок групп остаются такими, какими пришли. Ни сортировки, ни разбора дат внутри нет — иначе компонент получил бы таймзоны и локальные форматы, которых у библиотеки нет. Что считать днём, решает приложение: строкой в поле или функцией.

Плоская лента — <ol>: события упорядочены во времени, и диктор обязан это объявить. Группа — <section> с заголовком <h3> (уровень задаётся groupHeadingLevel) и своим <ol> внутри. Заголовок дня не делается пунктом списка: <li> с датой попал бы в набор событий и был бы объявлен одним из них.

Ось и маркеры декоративны (aria-hidden) — смысл несёт текст события. Тон маркера ничего не сообщает сверх написанного словами: цвет здесь усиливает, а не заменяет.

Метка времени — <time>; с datetime она ещё и машиночитаема.

orientation="horizontal" разворачивает ось слева направо, события становятся колонками, а лента — скроллером (и получает tabindex="0": скроллящийся блок обязан быть достижим с клавиатуры). Вертикальные раскладки в ней не применяются — у горизонтальной оси нет ни колонки времени, ни сторон, — и в DEV компонент об этом предупреждает.

alternate на узком экране схлопывается в одностороннюю: двухсторонняя лента в 320px нечитаема, и оставлять это потребителю значило бы оставить ему баг.

time в узкой колонке ведёт себя иначе: колонка времени остаётся на всех ширинах — ради неё раскладку и берут, — а сжимается колонка содержимого. Её ширину задаёт хук --gr-timeline-time-width (по умолчанию 5.5rem), и в совсем тесном месте её имеет смысл убавить.

Усечение длинного текста — дело потребителя: поставьте truncate (или свой text-overflow) на заголовок. Лента для этого сжиматься умеет: её гибкие треки объявлены minmax(0, 1fr), а не голым 1fr. Разница неочевидна и стоит пояснения: 1fr — это minmax(auto, 1fr), минимум такого трека равен min-content содержимого, и при white-space: nowrap от truncate это полная ширина строки. Трек раздавался бы под текст, усекать было бы нечего, а строка выносила бы себя за край — то есть truncate не срабатывал бы по построению.

Сторона пункта в alternate — это nth-child, обрыв оси на последнем событии — last-child. Пункт не знает своего индекса и знать не должен: регистрация детей в контексте на onMounted дала бы порядок, зависящий от порядка монтирования, и разъезжалась бы на v-if посреди ленты.

Отсюда же форма разметки: <li> рисует сам GrTimelineItem — в обоих режимах, в data-режиме он стоит внутри слота #item. Ось — отрезок у каждого пункта, а не одна длинная линия: соседние отрезки смыкаются сами, и мерить высоту списка не приходится.

tone красит точку ролью тона, variant="outlined" делает её полой, слот #marker заменяет точку чем угодно — иконкой статуса, аватаром автора, номером шага.

pending — событие ещё не произошло: точка полая, а ось идёт пунктиром начиная с участка, ведущего к ней, — то есть пунктирны и он, и собственный отрезок пункта. Пунктир начинается именно с ведущего, а не с последующего: незавершённое событие обычно последнее, и его собственного отрезка не видно вовсе — пунктир оказался бы невидим ровно в самом частом случае.

empty не задан — лента решает сама: в data-режиме по длине items, в слот-режиме по тому, есть ли в слоте осмысленные узлы. Проверка не сводится к «слот не пуст»: v-for по пустому массиву оставляет фрагмент без узлов, а v-if — комментарий, и ни то ни другое пунктом ленты не является. Без этого лента с v-for по пустым данным рисовала бы ось из ничего вместо объяснения.

Проп перебивает автоопределение в обе стороны — он нужен там, где «пусто» решает сервер, а не разметка. Текст меняется emptyText, вид целиком — слотом #empty.

loading показывает loadingRows строк-заглушек (по умолчанию три) на GrSkeleton, а не спиннер поверх пустоты: заглушки держат высоту, и появление данных не сдвигает страницу.

• своей клавиатуры нет — лента показывает, а не выбирает; интерактив внутрь кладёт потребитель, и таб-порядок его;
• пункт не кликается сам — кликабельная строка собирается вложенным GrLink/GrButton, как и в GrList;
• виртуализации нет — useVirtualList рассчитан на однородную высоту строки, а события разнородны; тысяча событий в интерфейсе — это пагинация, а не окно;
• анимации появления нет — движение требует своей ветки prefers-reduced-motion, а ценность здесь декоративная;
• это не GrSteps — горизонтальная лента похожа на степпер, но шагами не является: ни aria-current, ни навигации, ни валидации по шагам.