GrInputTag

Крестики чипов живут по roving tabindex: в таб-порядке ровно одна кнопка, остальные достижимы стрелками. До этого двадцать тегов давали двадцать одну остановку Tab — набор было невозможно проскочить.

Имя кнопки называет свой тег («Удалить тег vue»), а не безликое «Удалить тег»: на двадцати одинаковых кнопках выбрать нужную иначе нельзя.

Набор чипов объявлен списком (role="list" / listitem), поэтому диктор сообщает количество тегов. Контейнер списка — display: contents: роль нужна для семантики, раскладку он не трогает, чипы переносятся в одном потоке с полем.

editable открывает правку двойным кликом по тегу или F2 с клавиатуры. До неё чип либо существовал, либо удалялся целиком: опечатка в design-system-tokens-v2 стоила полного перенабора.

F2, а не Enter. Фокусируемый узел у чипа один — кнопка снятия, и Enter на ней уже означает «удалить» нативной активацией кнопки. Отсюда же зависимость: без tagClosable в правку с клавиатуры не войти вовсе, и в dev об этом предупреждает консоль.

Уход фокуса сохраняет. Это осознанное расхождение с addOnBlur (тот по умолчанию false): он решает, становится ли недонабранное новое тегом, и там отбросить безопасно — до этого не было ничего. Правка же начинается с существующего значения, и тихо вернуть набранное — как раз тот исход, который удивит. Отказаться есть чем: Escape.

Пустое значение по Enter снимает тег, по уходу фокуса — нет. Удаление остаётся явным действием: «стёр текст и отвлёкся» не должно стоить тега.

beforeAdd проверяет и правку. Проп назван про добавление, но правило у тега одно, и второй предикат разошёлся бы с первым; отказ возвращает прежнее значение и объявляется живым регионом. Разделителей в правке нет: одна правка — один тег, иначе запятая молча превращала бы плитку в три.

max правку не ограничивает — набор от неё не растёт.

Внутри GrModal и других слоёв Escape отменяет правку, а окно не закрывает: сессия правки регистрируется в общем стеке слоёв.

max больше не блокирует поле. Раньше на пределе инпут получал disabled: он выпадал из таб-порядка и переставал принимать Backspace — единственный способ убрать тег с клавиатуры. Теперь поле остаётся живым, лишние теги просто не добавляются, а исчерпание предела объявляется живым регионом.

Добавление и удаление тега тоже объявляются: без этого изменение набора для незрячего пользователя выглядело как «ничего не произошло». Все четыре объявления уходят в общий живой регион пакета — announcer.md, своего role="status" у компонента больше нет.

<GrInputTag
  v-model="emails"
  :before-add="tag => /.+@.+\..+/.test(tag)"
  @reject="showError"
/>

beforeAdd может быть асинхронным (проверка на сервере) — на время проверки поднимается спиннер и aria-busy. Второй Enter отменяет предыдущую проверку: результат устаревшей не дописывается. Отклонённый тег уходит в событие reject, чтобы потребитель мог объяснить причину.

clearable добавляет кнопку «снести все» (видна, только когда есть теги и поле редактируемо) и событие clear. loading — тот же спиннер, что поднимает асинхронный beforeAdd, но под ручным управлением.

focus(), blur(), clear() через ref компонента.

state="success" и "warning" показывают иконку и скрытую подпись, которая уезжает в aria-describedby контрола: цвет рамки как единственный носитель смысла — это WCAG 1.4.1, а ARIA-эквивалента aria-invalid у этих двух состояний нет. danger иконки не получает — его смысл уже несут aria-invalid и текст ошибки от GrFormField, — и признак гаснет, как только контрол объявлен невалидным.

size читается из GrConfigProvider (глобальный size или точечный componentDefaults), туда же вынесен clearable. Заблокированное поле гасится фоном --gr-muted с текстом --gr-muted-fg, а не прозрачностью: opacity разбавляет выверенные на AA токены. Крестик чипа наследует цвет тона бейджа в полную силу — гасить его прозрачностью нельзя, на тёмном чипе контраст проваливается.

Слоты кладут в оболочку иконку, единицу или метку; ширина ограничивается шестью пропами (prefixMinWidth/prefixMaxWidth/prefixFixed и то же для суффикса). Общий контракт контролов — form-controls.md.

Слот рисует содержимое чипа: подпись, значок, счётчик. Сам чип (GrChip), его тон и кнопка снятия остаются за компонентом — свой чип с крестиком внутри слота дал бы чип в чипе и два крестика. remove в пропах слота — для своих действий внутри подписи, а не для второй кнопки снятия.

<template>
  <GrInputTag v-model="emails">
    <template #tag="{ tag }">
      <span class="font-500">{{ tag.split('@')[0] }}</span>
      <span class="text-[var(--gr-muted-fg)]">@{{ tag.split('@')[1] }}</span>
    </template>
  </GrInputTag>
</template>

Проп name рендерит input[type="hidden"] на каждый тег — стандартная сериализация набора повторяющимся ключом; пустой набор не отправляет ничего.