Обратная связь
Сноска
Врезка в поток: поясняет то, рядом с чем стоит. Только полоса у ближнего края и значок — ни заливки, ни рамки, ни места под кнопку.
Разметка
<div class="inst-note" data-tone="warn">Необратимо: восстановление из резервной копии занимает до суток.</div>
<div class="inst-note" data-tone="neutral">Лимит проверяется перед стартом каждого агента, а не по факту.</div>
Контракт
| Что | Обязательно | Почему |
|---|---|---|
aria-live="polite" на контейнере |
да, если сноска появилась в ответ на действие | Роль не ставится автоматически: библиотека не знает, появилась она сейчас или была изначально |
| Текст, называющий суть | да | Тон несёт значок, но смысл несут слова |
data-tone |
нет | Без атрибута значка нет, полоса нейтральная |
У сноски нет частей: заголовка и действий у неё не бывает по определению. Если понадобились — это баннер.
Доступность
| Появление | Сноска, возникшая в ответ на действие, обязана попасть в aria-live="polite". Роль не ставится автоматически: библиотека не знает, появилась она сейчас или была изначально |
| Цвет не единственный носитель | Тон несёт значок и текст. Ради этого значок и появился |
| Контраст | Текст берёт --text-secondary — 4.5:1 в пяти темах |
| Полоса не носитель смысла | Смысл несут значок и слова; полоса только группирует |
| Печать | Печатается: это часть содержимого, а не оформление |
| Режим принудительных цветов | Значок переводится на системный цвет текста и переживает сброс |
Устройство
Углы прямые: у сноски только одна граница — левая, — и скругление на одной стороне выглядит как обрезанный блок.
Значок центрируется по первой строке текста: calc((1lh - var(--size-icon)) / 2). 1lh — реальная высота строки, поэтому формула подстраивается под кегль
и плотность сама. Ручной сдвиг на -1px, который тут был раньше, задирал
значок на 2.1px вверх.
Варианты
Разметка
<div class="inst-note">Без тона: значка нет, полоса нейтральная.</div>
<div class="inst-note" data-tone="neutral">Информация. Синий в библиотеке занят акцентом, поэтому роль info исполняет neutral.</div>
<div class="inst-note" data-tone="running">Идёт прямо сейчас.</div>
<div class="inst-note" data-tone="ok">Проверка пройдена.</div>
<div class="inst-note" data-tone="warn">Прогон завершится, но с замечаниями.</div>
<div class="inst-note" data-tone="error">Валидация путей не прошла.</div>
Тон несёт иконку, а полосы одной мало. Раньше warn и error
отличались друг от друга исключительно цветом — прямое нарушение собственного
закона «цвет не может быть единственным носителем». Набор масок общий с
баннером: одна форма значка на два компонента.
| Тон | Значок |
|---|---|
| без атрибута | Значка нет, полоса --border-strong |
data-tone="neutral" |
«i» в круге |
data-tone="running" |
«i» в круге |
data-tone="ok" |
Галка в круге |
data-tone="warn" |
Треугольник |
data-tone="error" |
Крест в круге |
API
| Имя | Что делает |
|---|---|
| класс | |
inst-note | Всё. У сноски нет частей: заголовка и действий у неё не бывает по определению |
| Имя | Значение | Что делает |
|---|---|---|
| атрибут | ||
data-tone | — | neutral running ok warn error. Закрыт. Без атрибута значок не рисуется |
| Имя | Значение | Откуда |
|---|---|---|
| токен | ||
--size-marker | 2px | база +4: масштаб |
--size-icon | 18px | база +4: масштаб |
--tone-ink | var(--accent-text) | база +2: |
--border-strong | light-dark(oklch(0 0 0 / 0.22), oklch(1 0 0 / 0.20)) | одно на все ячейки |
--pad-panel | var(--space-5) | база +14: плотность · масштаб |
--space-3 | 6px | одно на все ячейки |
--gap-inline | var(--space-4) | база +14: плотность · масштаб |
--text-sm | 0.875rem | база +4: масштаб |
--text-secondary | light-dark(var(--n-9), var(--n-5)) | одно на все ячейки |
--leading-ui | 1.4 | одно на все ячейки |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument