GrSteps

Корень — <nav> со списком <ol>, и ролей на пунктах нет вовсе. role="tab" здесь неприменим: tablist без tabpanel — сломанный паттерн, а панель шага никакой роли не несёт, это обычная разметка приложения.

Отсюда и клавиатура: каждый доступный шаг — своя остановка Tab, стрелки не задействованы. Правило «составной виджет — одна остановка» относится к виджетам, выбирающим значение (GrTabs, GrSegmented); шаги ближе к GrBreadcrumbs и GrBottomNav, где каждый пункт табируется отдельно. Практическое соображение то же: будущие шаги недоступны, и кольцо стрелок ходило бы в основном по выключенному.

Три состояния дают три разные разметки:

Панели у мастера нет и не будет. У вкладок она оправдана role="tabpanel" и связкой aria-labelledby, а здесь содержимое шага — обычный v-if в разметке потребителя, и отдельный компонент добавил бы вторую сущность с синхронизируемым idBase ради нуля семантики.

<GrSteps v-model="step" :steps="steps" />

<GrForm v-if="step === 'delivery'" :model="form" :rules="rules">
…
</GrForm>

<GrForm v-else-if="step === 'payment'" :model="form" :rules="rules">
…
</GrForm>

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

async function validateStep(from: string, to: string): Promise<boolean> {
  // Назад пускаем всегда: правка заполненного не должна упираться в валидацию.
  if (stepIndex(to) < stepIndex(from))
    return true
  return formRef.value!.validate()
}

Через гейт идут клик по шагу, next(), back() и goTo() — всё, что инициирует сам компонент. Прямая смена v-model снаружи через него не идёт: это уже решение приложения, и перехватывать его было бы враньём.

Три статуса выводятся из позиции: до текущего — complete, текущий — current, после — upcoming. Четвёртый, error, вывести неоткуда: ошибка живёт в форме, а не в порядке шагов. Ставьте его сами, когда шаг пройден, но не сошёлся, — иначе мастер не умеет сказать «на втором шаге остались ошибки».

Шаг с ошибкой не считается краем пройденного: при linear дальше него не пустит.

Назад можно всегда — вернуться и поправить заполненное это правка, а не обход правила. Вперёд — не дальше первого непройденного, но уже пройденные шаги впереди остаются достижимыми: пометьте их status: 'complete', и пользователь сможет прыгнуть обратно на тот шаг, откуда вернулся, не проходя всё заново.

Семь шагов не помещаются в боковую панель и не помещаются на телефон. variant="compact" показывает подпись текущего шага, счётчик и полосу вместо ленты. Полоса декоративна (aria-hidden): то же самое уже сказано текстом рядом и скрытым живым регионом, а второй progressbar в дереве заставил бы диктора прочитать прогресс дважды.

#label заполняет только текстовый блок шага: подпись, описание и своё рядом с ними — оценку времени, бейдж. Маркер (номер, галочка, иконка) и визуально скрытое состояние словом («— has errors», «— complete») остаются за компонентом.

<template>
  <GrSteps v-model="step" :steps="steps" orientation="vertical">
    <template #label="{ step: item }">
      <span>{{ item.label }}</span>
      <small class="text-[var(--gr-muted-fg)]">{{ item.estimate }}</small>
    </template>
  </GrSteps>
</template>

#step заменяет пункт целиком — и маркер, и состояние. Тогда их выводит слот: класс маркера по статусу приходит пропом markerClass, состояние словом — stateText, и его обязательно печатать визуально скрытым. Без него пройденный шаг и шаг с ошибкой звучат одинаково: цвет маркера диктору недоступен.

• своих кнопок «Назад» и «Далее» у компонента нет. Их ставит приложение из GrButton и зовёт next()/back() через ref: у мастера они живут в подвале, вместе с «Отменить» и «Сохранить черновик», и рисовать их внутри индикатора значило бы диктовать раскладку страницы;
• компонент не хранит данные шагов — модель формы целиком ваша;
• горизонтальная лента не прокручивается. Много шагов в узком месте — это variant="compact", а не скроллер, из которого половина этапов не видна.