Навигация

Шаги мастера

Последовательность этапов процесса с отметкой, где он сейчас. Состояние несёт слово под подписью — цвета полосы мало.

Компонент

Источникготово
Правилаготово
Проверкасейчас
Запускдальше

Разметка

<ol class="inst-stepper">
  <li class="inst-stepper-item" data-state="done">
    <span class="inst-stepper-name">Источник</span><span class="inst-stepper-note">готово</span></li>
  <li class="inst-stepper-item" data-state="done">
    <span class="inst-stepper-name">Правила</span><span class="inst-stepper-note">готово</span></li>
  <li class="inst-stepper-item" data-state="current">
    <span class="inst-stepper-name">Проверка</span><span class="inst-stepper-note">сейчас</span></li>
  <li class="inst-stepper-item" data-state="todo">
    <span class="inst-stepper-name">Запуск</span><span class="inst-stepper-note">дальше</span></li>
</ol>

Контракт

Что	Обязательно	Почему
`<ol>` с `<li>`	да	Шаги упорядочены, и порядок — весь смысл компонента
`data-state` на каждом шаге, включая `todo`	да	Отсутствие атрибута неотличимо от опечатки в нём
`inst-stepper-note` со словом состояния	да	Цвет полосы не имеет права быть единственным носителем

Доступность


Порядок	`<ol>` сообщает номер шага и их общее число без подписей вида «3 из 5»
Цвет не единственный носитель	Состояние ходит словом (`inst-stepper-note`) и полосой
Контраст	Название — `--text-secondary` (4.5:1), слово состояния — `--text-muted`; это данные, а не декорация, и `--text-faint` им не положен
Полоса	`--accent-mark` держит 3:1 против дорожки `--track` — это метка, а не текст
Кегль	Слово состояния — `--text-xs`, ниже 11px кегль не опускается
Печать	Шаги печатаются: слово состояния читается на бумаге, где полоса могла бы слиться

Устройство

Подпись состояния

inst-stepper-note — не украшение и не подзаголовок. Это второй носитель состояния: «готово», «сейчас», «дальше» читаются и на распечатке, и тем, кто не различает оттенок полосы. Строка с датой или счётчиком в этом слоте состояние не сообщает и его не заменяет.

Раскладка

Полоса переносится сама: у элемента flex: 1 1 10rem, и на узком экране шаги встают в несколько рядов без единого медиазапроса. Полоса состояния — это ::before шириной во весь элемент, поэтому она не расходится с подписью при любом числе шагов.

Состояния

data-state — фаза жизни, словарь у компонента свой и закрытый:

Пример

Пройденготово
Текущийсейчас
Предстоящийдальше

Разметка

<ol class="inst-stepper">
  <li class="inst-stepper-item" data-state="done">
    <span class="inst-stepper-name">Пройден</span><span class="inst-stepper-note">готово</span></li>
  <li class="inst-stepper-item" data-state="current">
    <span class="inst-stepper-name">Текущий</span><span class="inst-stepper-note">сейчас</span></li>
  <li class="inst-stepper-item" data-state="todo">
    <span class="inst-stepper-name">Предстоящий</span><span class="inst-stepper-note">дальше</span></li>
</ol>

Значение	Значит	Что рисует
`todo`	Ещё не начат. База	Полоса `--track`, подпись `--text-secondary`
`current`	Идёт сейчас	Полоса `--accent-mark`, подпись `--text-primary` и `--weight-medium`
`done`	Завершён	Полоса `--accent-mark`, подпись `--text-secondary`

Базовое значение todo пишется в разметке, хотя правил под него нет: data-state="todo" читается, а его отсутствие — нет, и опечатка выглядела бы как база.

Пройденный и текущий шаг делят один цвет полосы намеренно: различает их inst-stepper-note — «готово» против «сейчас» — и начертание подписи. Второго акцентного тона в библиотеке нет.

API

Классы
Имя	Что делает
класс
`inst-stepper`	Список шагов. Ставится на `<ol>`
`inst-stepper-item`	Шаг. Носитель `data-state`
`inst-stepper-name`	Название шага
`inst-stepper-note`	Слово состояния под названием

Атрибуты
Имя	Значение	Что делает
атрибут
`data-state`	—	`todo` `current` `done`. Закрыт, база — `todo`

Токены
Имя	Значение	Откуда
токен
`--gap-inline`	`var(--space-4)`	база +14: плотность · масштаб
`--space-2`	`4px`	одно на все ячейки
`--space-4`	`8px`	одно на все ячейки
`--text-sm`	`0.875rem`	база +4: масштаб
`--text-xs`	`0.78125rem`	база +4: масштаб
`--weight-medium`	`600`	одно на все ячейки
`--size-marker`	`2px`	база +4: масштаб
`--radius-full`	`999px`	одно на все ячейки
`--track`	`light-dark(oklch(0 0 0 / 0.10), oklch(1 0 0 / 0.16))`	одно на все ячейки
`--accent-mark`	`light-dark(var(--a-4), var(--a-3))`	одно на все ячейки
`--text-primary`	`light-dark(var(--n-12), var(--n-1))`	одно на все ячейки
`--text-secondary`	`light-dark(var(--n-9), var(--n-5))`	одно на все ячейки
`--text-muted`	`light-dark(var(--n-8), var(--n-6))`	одно на все ячейки

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