Раскладка
Строка состояния
Полоса у нижнего края с группами по краям: ветка и ошибки слева, режим и кодировка справа. Здесь стоят показания, а не контролы, — их читают, хотя нажать почти каждое можно.
Полоса — это контекст, а не словарь: она задаёт кегль, цвет и размер
значка, а всё, что стоит внутри, их наследует. <span> — показание, которое
только читают, <button> или <a> — то, которое отвечает,
inst-btn--xs — контрол. Все три без
собственного класса.
Разметка
<div class="inst-statusbar">
<button class="inst-btn inst-btn--xs inst-btn--ghost" type="button">master</button>
<span data-tone="error">
<svg class="inst-icon" aria-hidden="true"><use href="#i-close"/></svg>2 ошибки</span>
<span data-tone="warn">7 замечаний</span>
<span class="inst-cluster-spacer"></span>
<span>Стр. 1, кол. 1</span>
<span>UTF-8</span>
<button class="inst-btn inst-btn--xs inst-btn--ghost" type="button">Go</button>
</div>
Контракт
Показание, которое нельзя нажать, остаётся <span>. Нажимаемое — настоящая
кнопка или ссылка: отзыв на наведение появляется только у них, и это не
оформление, а честность.
| Что | Обязательно | Почему |
|---|---|---|
<span> для нечитаемого, <button> для нажимаемого |
да | Ховер объявлен только у кнопки и ссылки. Полоса из одинаковых <div> врёт о том, что отзовётся |
aria-hidden на значке рядом с числом |
да | Иначе «2» читается вместе с содержимым SVG |
| Слово или значок вместе с тоном | да | Цвет как единственный носитель запрещён: красная «2» сама по себе не сообщает, что это ошибки |
| Одна строка | да | Полоса, ушедшая в две строки, съедает низ экрана у инструмента, ради которого экран открыт |
Доступность
| Роль | Обычный контейнер. role="status" ставится только на то показание, которое меняется само и о котором нужно объявить, — вся полоса такой роли не получает, иначе каждое движение курсора зачитывается |
| Цель нажатия | --control-h-xs плюс зазор между соседями. Проверяется cmd/targets |
| Тон | data-tone даёт цвет, но носителем остаётся знак или слово рядом |
| Контраст | --text-secondary на --surface-sunken, выше 4.5:1 в пяти темах. Кегль --text-2xs — это и есть пол шкалы, ниже него размера нет |
| Порядок обхода | Совпадает с порядком в разметке: левая группа, потом правая |
API
| Имя | Что делает |
|---|---|
| класс | |
inst-statusbar | Полоса у нижнего края. Высота в одну строку. Показания она оформляет сама: <span>, <a> или <button> внутри становится показанием, и запоминать класс не нужно |
inst-cluster-spacer | Всё после него уходит к дальнему краю. Группу держит собственный зазор полосы, поэтому своего ей не нужно |
| Имя | Значение | Что делает |
|---|---|---|
| атрибут | ||
data-tone | ok · warn · error · running · neutral | Тон показания. Берёт --tone-ink |
| Имя | Значение | Откуда |
|---|---|---|
| переменная | ||
--icon-sizeСтавится на показание и наследуется значку | --size-icon-sm | задаёт приложение |
| токен | ||
--control-h-xsОбласть показания. Форма при этом не толстеет | 20px | база +14: плотность · масштаб |
--text-2xsКегль полосы | 11px | база +4: масштаб |
--size-icon-smЗначок полосы. Обычные 18 против кегля 11 перевешивают показание | 14px | база +4: масштаб |
--surface-sunken | light-dark(var(--n-2), var(--n-14)) | база +1: тема |
--border-subtle | light-dark(oklch(0 0 0 / 0.07), oklch(1 0 0 / 0.06)) | одно на все ячейки |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument