GrDrawer

side is right (the default), left, top, bottom. The axis decides everything else: a side panel is stretched vertically and takes its width from the scale, the top and the bottom ones are stretched horizontally and take their height. The panel slides in from its own side.

An arbitrary size is set along the same axis: width for left/right, height for top/bottom. A prop of the wrong axis does not apply and complains in a dev build: a silently ignored width on a bottom panel looks like a bug in the component rather than an error in the call.

<!-- a bottom sheet: the height comes from the scale -->
<GrDrawer v-model="open" side="bottom" size="sm" title="Filters" />

<!-- a height of your own -->
<GrDrawer v-model="open" side="bottom" :height="320" />

By default the panel is modal: a backdrop, a lock on page scrolling, inert for everything else and a focus trap — Tab walks in a ring inside.

:modal="false" removes all of that. The panel stays on top of the page, but the page keeps working: it scrolls, it is clickable and it accepts Tab, because the root of the layer passes clicks through itself (pointer-events: none), and only the panel itself is clickable. This is the mode for filters above a table and similar panels that are worked with in parallel with the main screen.

What remains in the non-modal mode: a place in the shared layer stack (Esc closes the top layer), the return of focus to the trigger and role="dialog" — but without aria-modal now. There is no backdrop, so closeOnBackdrop affects nothing in this mode.

<GrDrawer v-model="open" :modal="false" side="right" title="Filters">
  …
</GrDrawer>

A drawer lives on --gr-z-modal — the same layer as GrModal. That used to be the literal z-50, below the whole scale: the panel of a dropdown or a select (1000) was drawn on top of the opened drawer, and its backdrop did not cover it.

Inside the layer the height is refined by the stack: a drawer opened on top of a window gets calc(var(--gr-z-modal) + depth) and is drawn above it regardless of the order in which the components were mounted (../z-index.md).

The backdrop is the --gr-overlay-bg token, shared with GrModal: in the dark theme it is denser, otherwise the panel does not separate from the background. There used to be a bg-black/40 here — the only overlay background that did not follow the theme.

The props coincide with GrDialog on purpose: showHeader, showCloseButton, headerConfig/bodyConfig/footerConfig (paddingX, paddingY, bordered). The consumer must not have to relearn when moving between two overlays of the same library.

The header renders only when there is something to show — a heading or a close button. An empty title counts as absent: the word “Drawer” used to appear in its place.

The #header slot replaces the header as a whole — together with the close button, which in that case is drawn by the consumer. The slot receives title and close:

<GrDrawer v-model="open" title="Filters">
  <template #header="{ title, close }">
    <GrInput v-model="query" :placeholder="title" />
    <GrButton variant="ghost" @click="close">Done</GrButton>
  </template>
</GrDrawer>

The layer always has a name and always a meaningful one: the heading is linked through aria-labelledby, and when there is no header (showHeader: false) or it has been replaced by a slot, the same heading is rendered hidden (sr-only). The generic name from i18n remains a safety net only for a panel with no heading at all: a layer without a name is a violation of aria-dialog-name.

The body of the panel scrolls and therefore enters the tab order (tabindex="0"): otherwise a long text without a single focusable element cannot be scrolled from the keyboard (axe: scrollable-region-focusable).

<GrDrawer
  v-model="open"
  title="Filters"
  :header-config="{ paddingX: 'px-8' }"
  :body-config="{ paddingY: 'py-4' }"
>
  …
  <template #footer>…</template>
</GrDrawer>

size is the overlay scale (sm…full), not the control one; a global <GrConfigProvider size="…"> does not touch it, and the only channel is a pointed componentDefaults (size, side). The value is read along the axis of the panel: the width for the side ones, the height for the top and the bottom. width/height set an arbitrary size and cancel the size class.

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

closeOnBackdrop and closeOnEsc govern the “soft” ways of closing; persistent forbids both for the duration of an operation that must not be abandoned halfway. The close button stays in the process: a panel with no way out is a trap.

@opened/@closed fire when the animation ends — that is where the loading of extra content and the resetting of state are hung. initialFocus sets the element that gets the focus on opening (by default the panel itself).

Imperatively: close() (bypassing persistent) and focus() — to return the focus to the panel if an operation has taken it outside.