Sheet 1.2.0

<velin-sheet> is a bottom sheet dialog with focus trap and scroll lock. In 1.2.0, nutzt Öffnen/Schließen focus-manager für Hintergrund-inert und Body-Overflow-Locking. English: Sheet

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

Wann verwenden

Mobile-freundliche Aktionspanels, Einstellungen oder Picker, die von unten herein gleiten.
Wenn du einen Dialog möchtest, der an der Block-End-Kante angedockt bleibt (mit Safe-Area-Padding).

Wann nicht

Side navigation — use Drawer with side="start"|"end".
Centered multi-section forms — use Modal.
Imperative alert/confirm — use Dialog.

Beispiel

Sheet-Inhalt.

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

<velin-sheet id="sheet" title="Settings">
  <p>Content</p>
</velin-sheet>

Barrierefreiheit

Sheet-Panel: role="dialog", aria-modal="true", aria-labelledby on the title.
Titel kommt aus title or fallback label (both escaped).
Schließen-Control: aria-label="Close" (part="close").
Beim Öffnen: setBackgroundInert(this), erstes fokussierbares Element fokussieren; Tab-Trap; Escape schließt.
Overlay-Klick schließt. Beim Schließen / Disconnect: clearBackgroundInert(this) + Fokus-Wiederherstellung.
close() dispatches bubbling velin-close.

Dark, Responsive, Motion, RTL

Dark / themes: Surface-, Overlay- und Border-Tokens.
Responsive: full inline width; max-block-size: min(85vh, 32rem); padding-block-end: env(safe-area-inset-bottom).
Motion: transitions disabled under prefers-reduced-motion: reduce.
RTL: uses logical inset-inline; sheet remains block-end anchored.

API

Attribute

Attribut	Typ	Beschreibung
`open`	Boolean	Observed — presence opens the sheet
`title`	String	Header title (preferred)
`label`	String	Fallback title when `title` is empty

Methods, events, parts

API	Beschreibung
`open()` / `close()`	Toggle; `close()` fires `velin-close`
`velin-close`	Bubbling close event
Parts	`overlay`, `sheet`, `header`, `body`, `close`
Default slot	Sheet body

CSS-Variablen

Variable	Beschreibung
`--velin-color-overlay`	Backdrop
`--velin-color-surface-bright`	Sheet background
`--velin-radius-lg`	Top corner radius
`--velin-shadow-xl`	Sheet shadow
`--velin-z-overlay` / `--velin-z-modal`	Backdrop / sheet stacking

Best Practices & Fallstricke

Stelle title (or label) so the dialog has an accessible name.
Prefer open()/close() over inventing swipe-to-dismiss — the component does not implement drag gestures.
Let focus-manager own inert + scroll lock; do not double-lock overflow on body.

Drawer — multi-side off-canvas
Modal — centered overlay
Dialog — promise alert/confirm/prompt

Import

Lade das Komponenten-Bundle einmal und nutze dann das Custom Element:

<script src="../../dist/velinstyle-components.iife.js"></script>
<velin-sheet title="Settings">…</velin-sheet>