GrTabs

variant читается из GrConfigProvider (componentDefaults.GrTabs.variant) — вид задаётся один раз на приложение.

Высота вкладки повторяет шкалу GrButton — 28 / 32 / 40 / 44 px для xs / sm / md / lg: вкладки часто стоят с кнопкой в один ряд, и разница в несколько пикселей там читается как ошибка вёрстки. Совпадение закреплено гейтом src/__tests__/componentSize.test.ts, потому что однажды оно уже разъехалось молча.

Отсюда же следствие: size="lg" даёт 44px — размер, которого требуют WCAG 2.5.5 и Apple HIG для цели под палец.

Поле icon у вкладки — иконка слева от подписи; она декоративна (aria-hidden), имя вкладке даёт текст. Иконка задаётся Vue-компонентом либо классом иконки (i-lucide-* — правило для него заводит приложение: фабрике движка или провайдером, иначе — Vue-компонент; см. «Иконки»).

Слот #tab заменяет содержимое целиком и получает { tab, active, disabled }:

<GrTabs v-model="tab" :tabs="tabs">
  <template #tab="{ tab, active }">
    <GrAvatar :src="tab.avatar" size="xs" />
    <span :class="active ? 'font-700' : ''">{{ tab.label }}</span>
  </template>
</GrTabs>

<GrTabs v-model="tab" :tabs="tabs" closable @close="close" />

closable включает закрытие для всего ряда; closable: false у отдельной вкладки его снимает (закреплённая вкладка среди закрываемых), а closable: true у вкладки включает её одну, когда пропа ряда нет. Отключённая вкладка не закрывается ничем: aria-disabled — это про всё взаимодействие, а закрытие тоже взаимодействие.

Крестик — не кнопка. role="tab" объявляет своих потомков презентационными, поэтому вложенная <button> теряется у скринридера (axe: nested-interactive). Крестик — aria-hidden-<span>, а клик по нему разбирает обработчик самой вкладки: интерактивный элемент в ряду по-прежнему один. С клавиатуры закрытие — Delete или Backspace на вкладке под фокусом; о том, что клавиша работает, сообщает aria-keyshortcuts="Delete" на закрываемых вкладках. Закрывается именно та, на которой стоит фокус, а не выбранная: при activation-mode="manual" они законно расходятся.

Список остаётся у потребителя. Компонент эмитит только close(value) и не трогает ни tabs, ни modelValue: закрытие может не состояться («сохранить изменения?»), и вкладка успела бы переключиться зря.

function close(value: string) {
  const index = tabs.value.findIndex(tab => tab.value === value)
  tabs.value.splice(index, 1)

  if (current.value === value)
    current.value = tabs.value[index]?.value ?? tabs.value[index - 1]?.value ?? ''
}

Фокус после закрытия компонент возвращает сам — но только когда список действительно укоротился и только если закрытая вкладка держала фокус. Иначе клавиатурное закрытие роняло бы фокус в <body> вместе с исчезнувшей кнопкой.

Слот #tab крестик не отнимает: он живёт снаружи слота, поэтому своя разметка вкладки не теряет закрытие.

Когда tabs пуст, role="tablist" не рендерится вовсе — на его месте блок с текстом из локали (gr.tabs.empty). Роль обязана владеть потомками tab, и текстовый узел внутри неё — нарушение aria-required-children, а не пустое состояние. Блок держит высоту вкладки, чтобы соседние блоки не прыгали, когда закрыли последнюю.

<GrTabs v-model="tab" :tabs="tabs" empty-text="Нет открытых файлов" />

emptyText перекрывает текст локали, слот #empty — оба.

Горизонтальный ряд прокручивается, а не переносится строкой: перенос ломает ряд и уводит вкладки под панель. Полоса прокрутки скрыта — ряд ведут стрелки, а активная вкладка сама подтягивается в видимую часть, в том числе когда её выбрали снаружи.

Продолжение за краем выдаёт затухание: гаснет тот край, за которым ещё есть вкладки — в начале ряда правый, в конце левый, в середине оба. Влезает целиком — не гаснет вовсе. Без этого признака вкладки за краем оставались достижимыми, но узнать, что они там есть, было нечем.

Затухание сделано маской, а не градиентом-подложкой, и это следствие того, что фон полосы у вариантов разный: pills несёт свой непрозрачный --gr-muted, а line прозрачна и лежит на фоне родителя, которого компонент не знает. Градиенту неоткуда взять цвет подложки для line; маска гасит содержимое независимо от того, что под ним.

Ширина затухания — хук --gr-tabs-scroll-fade (по умолчанию 1.5rem). Тем же значением задан scroll-padding ряда: вкладка, подтянутая в видимую часть, не встаёт под затухание, и кольцо фокуса остаётся читаемым.

Вертикальный ряд не прокручивается — он растёт вниз, — и затухания не имеет.

Отдельный tabindex контейнеру не нужен: вкладки внутри достижимы стрелками, и фокус прокручивает ряд за собой — правило «скроллящийся блок достижим с клавиатуры» выполняется через них, а не через остановку таб-порядка на самом tablist.

<GrTabs v-model="tab" :tabs="tabs" activation-mode="manual" />

automatic (по умолчанию) — стрелка сразу переключает вкладку: выбор следует за фокусом, как требует APG. manual — стрелка двигает только фокус, выбор подтверждается Enter или Space. Второй режим нужен вкладкам с тяжёлой загрузкой: перебор стрелками иначе тянет каждую панель.

orientation="vertical" разворачивает список в колонку, объявляет aria-orientation и переводит навигацию на ↑/↓ вместо ←/→.

В колонке содержимое вкладки выровнено к началу: значки стоят ровной линией, подпись занимает остаток, бейдж и крестик — у конца. Вертикаль — это колонка разделов настроек, и по центру она читалась меню из кнопок. В ряду вкладки по-прежнему центрированы.

Нативный disabled убирал вкладку и из таб-порядка, и из объявления скринридером — пользователь не узнавал о её существовании. APG для tablist рекомендует обратное: вкладка остаётся достижимой и объявленной, а недоступность выражает aria-disabled. Выбор она при этом не принимает и пропускается стрелками.

idBase задаёт схему id: вкладка получает <idBase>-tab-<value> и aria-controls="<idBase>-panel-<value>". Тот же idBase передаётся в GrTabPanels — иначе связка aria-controls ↔ aria-labelledby не сойдётся (в dev-сборке панель об этом предупредит).

Массив ссылок на кнопки чистится, когда Vue отдаёт null для исчезнувшего узла, и обрезается по длине списка вкладок. Без этого в нём оставались отсоединённые от DOM кнопки, и focus() по сократившемуся списку молча проваливался в <body>.