GrBottomNav

Активный пункт объявлен aria-current="page" и отличается тремя признаками сразу: подложкой, весом подписи и цветом. Одного цвета мало — он не виден при монохромном зрении и не существует для диктора (WCAG 1.4.1).

Лендмарк всегда назван: без имени <nav> панели неотличим от основной навигации страницы. Дефолт берётся из локали (gr.bottomNav.label), ariaLabel его перебивает.

role="tab" компонент не использует: нижняя навигация переключает страницы, а не панели внутри одного экрана, а tablist без tabpanel — сломанный паттерн.

Число рисуется декоративно, а рядом идёт визуально скрытая подпись: голое «12» диктору ничего не сообщает. Числовое значение озвучивается через локаль (gr.bottomNav.badge), строковое читается как есть, badgeLabel перебивает оба.

<GrBottomNav v-model="section" :as="RouterLink" :items="items" />

Корневой тег пункта выбирается так: as (когда у пункта есть to) → <a href> → <button>. Ссылка даёт правый клик, «открыть в новой вкладке» и предзагрузку — всё то, чего у кнопки нет. disabled делает корень <span>: недостижимый раздел не должен оставаться в порядке Tab.

GrLink внутрь не импортируется намеренно: зависимость притащила бы потребителю его CSS ради одного тега.

<GrBottomNav v-model="section" :items="items" hide-above="none" position="static" />

• hideAbove (sm по умолчанию, а также md, lg, none) — брейкпоинт, с которого панель скрывается. none нужен киоску и PWA, где нижняя навигация постоянна;
• position (fixed по умолчанию, static) — static вынимает панель из фиксированного слоя и кладёт обычным блоком в поток: так её можно встроить в макет.

В режиме fixed слой — --gr-z-bottom-nav (850): самый низкий в шкале, поэтому открытая выпадашка, тултип или модалка панель перекрывают. Подробности — ../z-index.md.

Нижний отступ учитывает env(safe-area-inset-bottom) — на телефоне с жестовой полосой подписи не уезжают под неё.

disabled гасит пункт токеном --gr-disabled-fg, а не прозрачностью: opacity разбавляет выверенные на AA цвета текста.

<GrBottomNav v-model="section" :items="items" size="lg" />

<GrConfigProvider size="sm">
…
</GrConfigProvider>

Ступень тянет три вещи сразу:

Чего ступень не трогает — размер самого пункта: min-width и min-height остаются 44px на любой ступени. Тач-таргет мельче 44×44 — это провал WCAG 2.5.5, и «сделать панель компактнее» не повод в него провалиться. Практическое следствие: xs ужимает полосу за счёт воздуха вокруг содержимого, а не за счёт области, в которую целится палец.

Значение приходит по общему правилу: локальный проп → componentDefaults → глобальный size провайдера → md (см. ../sizes.md).

Иконка, подпись и счётчик покрывают не всё: в мессенджере на месте иконки профиля стоит аватар. Слот item отдаёт содержимое пункта целиком:

<GrBottomNav v-model="section" :items="items">
  <template #item="{ item, active, disabled, badgeLabel }">
    <GrAvatar v-if="item.value === 'me'" :size="24" alt="Ann Lee" />
    <span v-else :class="item.icon" class="block h-5 w-5" aria-hidden="true" />
    <span class="truncate leading-none">{{ item.label }}</span>
  </template>
</GrBottomNav>

Слот меняет содержимое, а не поведение: выбор тега (button / a / компонент из as), aria-current, aria-disabled и обработка клика остаются за компонентом. Поэтому кастомный пункт не может случайно перестать быть навигацией.

Забирая разметку, вы забираете и озвучку счётчика: визуально скрытая подпись рисуется вместе с бейджем. Готовая строка приходит слотом (badgeLabel) — её достаточно положить в sr-only, локаль и badgeLabel пункта уже учтены.