overlaystexulinot agent-emittableapp
Sheet
sheet
Edge-anchored modal panel (drawer-like sheet).
Live examples
Start edge
Start edge
Loading demo…
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
size | enum (sm, md, lg, xl) | no | "md" | — |
side | enum (top, right, bottom, left, start, end, center) | no | "start" | — |
modal | boolean | no | true | false: a non-modal panel (no focus trap, inert or scroll lock) |
dismissOutside | boolean | no | false | Non-modal only: close on a press or focus outside (never on the trigger) |
closeOnEscape | boolean | no | false | Non-modal only: close on Escape anywhere, not just from inside |
class | string | no | — | — |
children | slot | no | — | — |
Keyboard
| Key | Action |
|---|---|
Escape | Focus trapped while open; Escape dismisses. |
Accessibility
- Focus trapped while open; Escape dismisses.
Evidence for sheet
Latest committed gates for sheet (as of 2026-10-23). Static snapshot — not live CI.
Behavior
checkedscenario sheet
Rows in tests/behavior/scenarios/sheet.spec.ts, held to the WAI-ARIA APG pattern, run on Chromium, WebKit and the Pixel 7.
Size (gzip)
@texuli/primitives/sheet · budget 16.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Mobile filters, detail rails, edge panels
Don’t use when
Prefer another component
- Centered modal forms (use dialog)