GrCarousel

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

Теперь на границе кольца крайний кадр временно переезжает на противоположный конец, лента доезжает до него как до обычного соседа, и уже после перехода позиция снимается без анимации. Клона тут нет и быть не может: кадры приходят слотом, а копия чужого узла унесла бы с собой его состояние и ссылки.

Модель обновляется сразу, не дожидаясь конца перехода: modelValue про то, какой кадр показан, а не про то, доехала ли лента.

<GrCarousel orientation="vertical" class="h-56">
  <GrCarouselSlide label="Ноябрь">…</GrCarouselSlide>
</GrCarousel>

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

Стрелки переезжают на ось движения, поперечная прокрутка страницы остаётся за страницей (touch-action), а полоса переключателей остаётся горизонтальной: она про выбор кадра, а не про направление ленты.

<GrCarousel virtual :virtual-overscan="1">
  <GrCarouselSlide label="Кадр">…</GrCarouselSlide>
</GrCarousel>

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

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

Разметка кадра у каждого своя: у галереи это <img>, у онбординга — заголовок, абзац и кнопка, у ленты отзывов — карточка. Массив данных заставил бы либо render-функцию, либо шаблон-проп на каждый вид кадра, поэтому кадр — это GrCarouselSlide с произвольным содержимым внутри.

Следствие, о котором стоит знать: состав ленты компонент узнаёт от самих кадров, при монтировании. На сервере полоса переключателей выходит пустой и заполняется следующим тактом на клиенте — первый клиентский рендер повторяет серверный, и гидрация цела.

Корень — role="group" (или region при landmark) с aria-roledescription="carousel". Имени по умолчанию нет намеренно: aria-roledescription именем не считается, а подставленное «карусель» диктор прочитал бы дважды подряд. Поэтому ariaLabel или ariaLabelledby обязательны, и без них компонент предупреждает в dev.

Роль кадра зависит от наличия переключателя, и только от него: с полосой кадр — tabpanel, привязанный к своей вкладке, без полосы — group с именем «N из M». Вид переключателя на роли не сказывается: точки и миниатюры — один и тот же tablist в двух шкурках, иначе косметический проп переписывал бы контракт доступности.

Кадр, который сейчас не показан, помечен inert. Это не полировка: кадры лежат в одном ряду и обрезаются по вьюпорту, поэтому без него Tab уезжает в невидимый кадр, а браузер прокручивает к нему контейнер и разъезжается с лентой.

Лента не фокусируется и скроллером не является — сдвиг делает трансформ, а не прокрутка. Кольцо стрелок живёт у полосы переключателей: ←/→ ходят по кадрам, Home/End — к краям, полоса держит одну остановку Tab. При activationMode="manual" стрелка двигает только фокус, а кадр подтверждает Enter или Space.

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

Курсор над лентой, идущий жест и вкладка в фоне ставят отсчёт на паузу: остаток сохраняется, и по возвращении лента досчитывает его, а не начинает интервал заново. Фокус, вошедший внутрь, показ останавливает и сам его не возобновляет — иначе кадр уехал бы из-под пальца, пока пользователь читает ссылку внутри него.

Кнопка паузы рисуется всегда, когда задан autoplay, и спрятать её нечем: APG запрещает движущуюся карусель без механизма остановки.

Под prefers-reduced-motion показ не стартует, но кнопка остаётся и предлагает запустить его — «уменьшить движение» не значит «отнять возможность». Глобальный кламп здесь не помогает: он гасит CSS, а отсчёт ведёт таймер, и лента продолжала бы ехать у того, кто просил её этого не делать.

Жест начинается только там, где под указателем нет ссылки, кнопки или поля: интерактив внутри кадра остаётся интерактивом. Дальше жест обязан превысить порог — больший из 60 px и 15 % ширины ленты — и идти горизонтальнее, чем вертикально, иначе это прокрутка страницы, и карусель её не перехватывает. Вертикальная прокрутка страницы остаётся браузеру: лента гасит только горизонталь.

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

С одним кадром стрелки, точки и миниатюры не рисуются вовсе, а не рисуются выключенными: выключенный орган управления сообщает, что идти есть куда. Пустая лента — это v-if на стороне потребителя: кадры пишет он, и подставлять за него текст «ничего нет» компонент не станет.

По убыванию силы: слот #thumbnail у кадра, затем его проп thumbnail с URL, затем номер кадра в плитке того же размера. Третий вариант держит ритм полосы, когда картинки нет вовсе; если миниатюру не дал ни один кадр при indicators="thumbnails", компонент предупреждает в dev.

Первую <img> внутри кадра компонент не ищет: обход разметки не работает на сервере, ломается на кадрах без картинок и прячет контракт от читателя.

Слоты #prev и #next заменяют содержимое кнопки, а не саму кнопку: имя, aria-disabled и поведение на краю остаются за компонентом. Иначе своя стрелка приносила бы с собой и обязанность повторить весь контракт — а его чаще всего не повторяют.

Тон текущего переключателя берётся из общей шкалы пакета (tone), а не из своего набора цветов. Точечная перекраска — по-прежнему через --gr-carousel-dot-active: проп задаёт роль, хук задаёт значение. У neutral насыщенного цвета нет, и текущая точка (и рамка текущей миниатюры) у него цвета основного текста, --gr-fg, — как нейтральный счётчик GrBadgeWrap. Серый поверхности тут не годится: им нарисованы неактивные точки.

Текущая точка несёт два признака: заливку и обвод вокруг неё. Одной заливки мало — при диаметре в восемь пикселей она отличала точку только оттенком, и на приглушённом тоне разница почти пропадала. Обвод добавляет форму, то есть работает и там, где цвет не различают.

Прокрутка к текущей миниатюре считается арифметикой и присваивается scrollLeft самой полосы. scrollIntoView здесь не годится: он двигает всех предков, включая документ, — и карусель, уехавшая под сгиб, на каждом шаге автопрокрутки утаскивала бы страницу обратно к себе.

• виртуализации нет — все кадры лежат в DOM. Лента на сотни тяжёлых кадров требует своего решения на стороне потребителя;
• бесконечной ленты клонированием нет — loop перематывает индекс, поэтому на переходе с последнего кадра на первый лента едет назад, а не продолжает движение;
• вертикальной ориентации нет;
• стрелки лежат поверх кадра — они рассчитаны на снимок, где перекрыть нечего. Кадр с текстом обязан развести содержимое с ними полями по краям (кнопка 36 px плюс отступ 8 px с каждой стороны), иначе первые буквы строки уходят под кнопку. Вынести стрелки за пределы ленты компонент не умеет;
• высоту задаёт самый высокий кадр — кадры лежат в одном ряду. Постоянная высота, если она нужна, задаётся содержимым кадра.