Отображение данных

Лента событий

Хронология: что произошло и когда. Точки соединены линией, поэтому лента читается как последовательность, а не как список.

Компонент

Прогон завершён

4 файла изменено

14:36

Индексация

terrain/

14:32

Разметка

<div class="inst-timeline">
  <div class="inst-timeline-item">
    <span class="inst-timeline-dot" data-tone="ok"></span>
    <div class="inst-timeline-body">
      Прогон завершён
      <div class="inst-timeline-sub">4 файла изменено</div>
    </div>
    <span class="inst-timeline-time">14:36</span>
  </div>
  <div class="inst-timeline-item">
    <span class="inst-timeline-dot" data-tone="running"></span>
    <div class="inst-timeline-body">
      Индексация
      <div class="inst-timeline-sub">terrain/</div>
    </div>
    <span class="inst-timeline-time">14:32</span>
  </div>
</div>

Использование

<ol class="inst-timeline">
  <li class="inst-timeline-item">
    <span class="inst-timeline-dot" data-tone="ok"></span>
    <div class="inst-timeline-body">Прогон завершён
      <div class="inst-timeline-sub">4 файла изменено</div>
    </div>
    <time class="inst-timeline-time" datetime="2026-08-08T14:36">14:36</time>
  </li>
</ol>

Что	Обязательно	Почему
`<ol>` и `<li>`	да	Порядок здесь несёт смысл, и скринридер должен объявить «список из N»
`<time datetime>`	да	«14:36» без даты неоднозначно вне контекста дня
Тон дублируется словом в описании	да	Точка сама по себе ничего не сообщает тому, кто не различает тон
`data-tone`	нет	Без атрибута точка нейтральна

Линия рисуется псевдоэлементом и в озвучивание не попадает — она декоративна.

Когда использовать

Используйте	Возьмите другое
Разнородные события во времени	Однородные записи с колонками — таблица с колонкой времени
Порядок важен и виден	Поток строк одного формата — лог: там колонки и моноширинный набор
Событий десятки	Шаги процесса с известным составом — шаги мастера

Варианты

Точка берёт тот же data-tone, что и весь кит.

Пример

Рядовое событие

Происходит сейчас

Успешно завершено

С замечаниями

Отказ

Разметка

<div class="inst-timeline">
  <div class="inst-timeline-item">
    <span class="inst-timeline-dot"></span>
    <div class="inst-timeline-body">Рядовое событие</div>
  </div>
  <div class="inst-timeline-item">
    <span class="inst-timeline-dot" data-tone="running"></span>
    <div class="inst-timeline-body">Происходит сейчас</div>
  </div>
  <div class="inst-timeline-item">
    <span class="inst-timeline-dot" data-tone="ok"></span>
    <div class="inst-timeline-body">Успешно завершено</div>
  </div>
  <div class="inst-timeline-item">
    <span class="inst-timeline-dot" data-tone="warn"></span>
    <div class="inst-timeline-body">С замечаниями</div>
  </div>
  <div class="inst-timeline-item">
    <span class="inst-timeline-dot" data-tone="error"></span>
    <div class="inst-timeline-body">Отказ</div>
  </div>
</div>

Тон	Когда
без атрибута	Рядовое событие
`data-tone="running"`	Происходит сейчас. Точка пульсирует
`data-tone="ok"`	Успешное завершение
`data-tone="warn"`	С замечаниями
`data-tone="error"`	Отказ

Правила

Так Лента на ol и li

Порядок несёт смысл. Скринридер объявляет «список из N» и номер позиции.

Не так Точка как единственный носитель тона

Отказ обязан быть назван словом в описании события, а не только красной точкой.

Так time с машинным значением

«14:36» без даты неоднозначно вне контекста дня.

Не так Лента для однородного потока

Строки одного формата от процесса — лог: у него колонки и моноширинный набор.

Доступность


Это список	Оберните в `<ol>`, а событие — в `<li>`: порядок здесь несёт смысл, и скринридер должен объявить «список из N»
Время	`<time datetime="…">` с машинным значением. «14:36» без даты неоднозначно вне контекста дня
Не только цвет	Тон точки дублируется словом в описании события. Точка сама по себе ничего не сообщает тому, кто не различает тон
Линия	Рисуется псевдоэлементом и в озвучивание не попадает — это правильно, она декоративна
Уменьшенное движение	Пульсация точки `running` замедляется, а не гаснет

API

Имя	Значение	Что делает
класс
`inst-timeline`	—	Контейнер
`inst-timeline-item`	—	Одно событие
`inst-timeline-dot`	—	Точка на линии
`inst-timeline-body`	—	Описание события
`inst-timeline-sub`	—	Подробность под описанием
`inst-timeline-time`	—	Отметка времени, прижата к концу
атрибут
`data-tone`	—	`neutral` `running` `ok` `warn` `error`
токен
`--size-gutter`	`14px`
`--gap-inline`	`var(--space-4)`
`--row-pad-y`	`var(--space-3)`
`--size-dot`	`6px`
`--size-marker`	`2px`
`--border`	`light-dark(oklch(0 0 0 / 0.12), oklch(1 0 0 / 0.11))`
`--text-sm`	`0.8125rem`
`--text-xs`	`0.75rem`
`--text-muted`	`light-dark(var(--n-8), var(--n-6))`
`--tone-mark`	`var(--text-secondary)`

Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument