GrDrawer

side — right (по умолчанию), left, top, bottom. Ось решает всё остальное: боковая панель растянута по вертикали и берёт из шкалы ширину, верхняя и нижняя растянуты по горизонтали и берут высоту. Выезжает панель со своей стороны.

Произвольный размер задаётся по той же оси: width — для left/right, height — для top/bottom. Проп не своей оси не применяется и ругается в dev-сборке: молча проигнорированный width у нижней панели выглядит как баг компонента, а не как ошибка вызова.

<!-- bottom-sheet: высота из шкалы -->
<GrDrawer v-model="open" side="bottom" size="sm" title="Фильтры" />

<!-- своя высота -->
<GrDrawer v-model="open" side="bottom" :height="320" />

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

:modal="false" снимает всё это. Панель остаётся поверх страницы, но страница продолжает работать: она скроллится, кликается и принимает Tab, потому что корень слоя пропускает клики сквозь себя (pointer-events: none), а кликабельна только сама панель. Это режим для фильтров над таблицей и подобных панелей, с которыми работают параллельно основному экрану.

Что остаётся в немодальном режиме: место в общем стеке слоёв (Esc закрывает верхний слой), возврат фокуса на триггер и role="dialog" — но уже без aria-modal. Подложки нет, поэтому closeOnBackdrop в этом режиме ни на что не влияет.

<GrDrawer v-model="open" :modal="false" side="right" title="Фильтры">
  …
</GrDrawer>

Drawer живёт на --gr-z-modal — том же слое, что GrModal. Раньше это был литерал z-50, ниже всей шкалы: панель dropdown или select (1000) рисовалась поверх выехавшего drawer’а, а его бэкдроп её не перекрывал.

Внутри слоя высоту уточняет стек: drawer, открытый поверх окна, получает calc(var(--gr-z-modal) + глубина) и рисуется выше него независимо от того, в каком порядке компоненты смонтированы (../z-index.md).

Подложка — токен --gr-overlay-bg, общий с GrModal: в тёмной теме она плотнее, иначе панель не отделяется от фона. Раньше здесь стоял bg-black/40 — единственный оверлей-фон, не следовавший за темой.

Пропы совпадают с GrDialog намеренно: showHeader, showCloseButton, headerConfig/bodyConfig/footerConfig (paddingX, paddingY, bordered). Потребитель не должен переучиваться при переходе между двумя оверлеями одной библиотеки.

Хедер рендерится, только когда есть что показать — заголовок или кнопка закрытия. Пустой title считается отсутствующим: раньше на его месте появлялось слово «Drawer».

Слот #header подменяет шапку целиком — вместе с кнопкой закрытия, которую в этом случае рисует потребитель. Слот получает title и close:

<GrDrawer v-model="open" title="Фильтры">
  <template #header="{ title, close }">
    <GrInput v-model="query" :placeholder="title" />
    <GrButton variant="ghost" @click="close">Готово</GrButton>
  </template>
</GrDrawer>

Имя слоя есть всегда и всегда осмысленное: заголовок связывается через aria-labelledby, а когда шапки нет (showHeader: false) или она подменена слотом — тот же заголовок рендерится скрытым (sr-only). Обобщённое имя из i18n остаётся страховкой только для панели вовсе без заголовка: слой без имени — нарушение aria-dialog-name.

Тело панели скроллится и потому попадает в таб-порядок (tabindex="0"): длинный текст без единого фокусируемого элемента иначе не прокрутить с клавиатуры (axe: scrollable-region-focusable).

<GrDrawer
  v-model="open"
  title="Фильтры"
  :header-config="{ paddingX: 'px-8' }"
  :body-config="{ paddingY: 'py-4' }"
>
  …
  <template #footer>…</template>
</GrDrawer>

size — шкала оверлеев (sm…full), а не контролов; глобальный <GrConfigProvider size="…"> её не трогает, канал один — точечный componentDefaults (size, side). Значение читается по оси панели: ширина у боковых, высота у верхней и нижней. width/height задают произвольный размер и отменяют размерный класс.

<GrConfigProvider :component-defaults="{ GrDrawer: { size: 'lg', side: 'left' } }">
  <GrDrawer v-model="open" :width="640" />
</GrConfigProvider>

closeOnBackdrop и closeOnEsc управляют «мягкими» способами закрытия; persistent запрещает оба на время операции, которую нельзя бросить на полпути. Кнопка закрытия при этом остаётся: панель без единого выхода — ловушка.

@opened/@closed срабатывают по окончании анимации — туда вешается дозагрузка контента и возврат состояния. initialFocus задаёт элемент, получающий фокус при открытии (по умолчанию — сама панель).

Императивно: close() (минуя persistent) и focus() — вернуть фокус на панель, если операция увела его наружу.