Schublade 1.2.0

<velin-drawer> slides an off-canvas panel from any side with overlay, Fokus trap, and scroll lock. In 1.2.0, lifecycle uses Fokus-manager for background inert + overflow locking. English: Drawer

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Grundlage wo entsprechend angegeben.

Wann verwenden

Navigation, filters, or secondary panels that should not cover the full viewport as a centered modal.
When edge placement matters (start / end / top / bottom).

Wann nicht verwenden

Centered forms or confirmations — use Modal or Dialog.
Mobile action sheets that should hug the bottom only — prefer Sheet.

Einfaches Beispiel

Drawer-Inhalt kommt hier hinein.

<velin-drawer title="Navigation" id="myDrawer">
  <p>Drawer content goes here.</p>
</velin-drawer>

<button type="button" class="velin-btn velin-btn--primary"
        onclick="document.getElementById('myDrawer').open()">
  Open Drawer
</button>

Vier Seiten

Use side: start (Standard), end, top, or bottom. Positioning uses logical inset properties so start/end flip in RTL.

<velin-drawer side="start" title="Menu">…</velin-drawer>
<velin-drawer side="end" title="Filters">…</velin-drawer>
<velin-drawer side="top" title="Banner">…</velin-drawer>
<velin-drawer side="bottom" title="Actions">…</velin-drawer>

Barrierefreiheit

Panel: role="dialog", aria-modal="true", aria-labelledby on the title.
Schließen-Button: aria-label="Schließen" (part="close").
Beim Öffnen: Fokus-manager saves Fokus, applies sibling inert, locks body scroll; focuses first focusable in the shadow tree.
Tab trap + Escape → close(); overlay click closes.
Beim Schließen / Disconnect: clearBackgroundInert(this) and Fokus restore.
close() dispatches bubbling velin-close.

Dark Mode, Responsivität, Bewegung, RTL

Dark Mode / Themes: --velin-color-surface-bright, overlay, and border tokens.
Responsiv: side drawers use min(20rem, 85vw); top/bottom use min(50vh, 24rem).
Bewegung: overlay/panel transitions off under prefers-reduced-motion: reduce.
RTL: prefer side="start"|"end" over left/right so panels mirror correctly.

API

Attribut

Attribut	Typ	Beschreibung
`open`	Boolean	Observed — presence opens the drawer
`side`	String	`start` \| `end` \| `top` \| `bottom`
`title`	String	Header title (escaped) + labelling

Methoden, events, parts

API	Beschreibung
`open()` / `close()`	Toggle visibility; `close()` fires `velin-close`
`velin-close`	Bubbling-Close-Event
Parts	`overlay`, `drawer`, `header`, `body`, `close`
Standard slot	Drawer-Body

CSS-Variablen

Variable	Beschreibung
`--velin-color-overlay`	Backdrop
`--velin-color-surface-bright`	Panel-Hintergrund
`--velin-shadow-xl`	Panel-Schatten
`--velin-z-overlay`	Backdrop z-index (400)
`--velin-z-modal`	Panel z-index (500)

Best practices & pitfalls

Always set a meaningful title for aria-labelledby.
Use logical side values; physical left/right attributes are not supported.
Do not set document.body.style.overflow yourself — Fokus-manager owns scroll lock (ADR 0013).
Removing an open drawer from the DOM clears its inert layer via disconnectedCallback.

Sheet — bottom-only sheet
Modal — centered dialog
Navigationsleiste — primary navigation