Sheet 1.2.2

<velin-sheet> is a bottom sheet dialog with focus trap and scroll lock. In 1.2.0, open/close uses focus-manager for background inert and body overflow locking. Deutsch: Sheet De

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Mobile-friendly action panels, settings, or pickers that slide up from the bottom.
When you want a dialog that stays docked to the block-end edge (with safe-area padding).

When not

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

Example

Sheet body content.

<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>

Accessibility

Sheet panel: role="dialog", aria-modal="true", aria-labelledby on the title.
Title comes from title or fallback label (both escaped).
Close control: aria-label="Close" (part="close").
On open: setBackgroundInert(this), focus first focusable; Tab trap; Escape closes.
Overlay click closes. On close / disconnect: clearBackgroundInert(this) + focus restore.
close() dispatches bubbling velin-close.

Dark, responsive, motion, RTL

Dark / themes: surface, overlay, and 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

Attributes

Attribute	Type	Description
`open`	Boolean	Observed — presence opens the sheet
`title`	String	Header title (preferred)
`label`	String	Fallback title when `title` is empty

Methods, events, parts

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

CSS variables

Variable	Description
`--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 & pitfalls

Provide 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

Load the components bundle once, then use the custom element:

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