COMPONENTS

Drawer / inspector

One drawer class turns a native popover into a viewport-edge inspector. Use semantic children and inherited data attributes for details, filters or settings.

Usage

Markup: .drawer[popover=auto] > header, section, footer

Behaviour: Non-modal native popover. Outside-click/Escape dismissal; ordinary Tab navigation. No focus trap, body-scroll lock or JavaScript.

Use an aside.drawer with popover=auto and a unique id. Native button popovertarget opens it; popovertargetaction=hide closes it. Label the panel with aria-labelledby and give its heading a unique id.
Direct header, section and footer children identify the regions. No drawer-header, drawer-body or drawer-footer classes are needed. The panel scrolls as a whole, keeping all content reachable at small heights and zoom.
Default width is 28rem, bounded by the viewport, on the logical end edge. Customise with inherited CSS variables --re-drawer-width, --re-drawer-start and --re-drawer-end. No component-specific data attributes are required.
Theme, palette, density, shape, depth, border and optional materials inherit from the actual DOM parent. Opening in the top layer does not move that DOM boundary. Keep drawers inside .reva for scoped builds. Existing optional motion styles apply; data-motion=none and reduced-motion preferences suppress entrance motion.
This is a non-modal overlay, not a permanent split-pane layout: no focus trap, page inertness or scroll lock. Outside-click and Escape dismiss it natively. Ordinary links and form actions do not close it automatically; the browser restores focus according to native popover behavior. Native popover support is required.
Load tokens, base and reva.drawers.css for modular use, or the complete/components/scoped builds. Optional glass and veil modules already style popover surfaces. Forced colours retain boundaries; print hides drawers.
Application code or the server supplies details, filter results and saved settings. The component does not fetch, filter or save records.

Component API and styling module · Inherited appearance settings

Project inspector

One structural class and inherited appearance. Open, close, click outside or press Escape.

<section>
  <button type="button" popovertarget="drawer-end">Open project inspector</button>
  <aside class="drawer" id="drawer-end" popover="auto" aria-labelledby="drawer-end-title">
    <header><h2 id="drawer-end-title">Project inspector</h2><button type="button" popovertarget="drawer-end" popovertargetaction="hide" autofocus>Close</button></header>
    <section><p>Review the project without leaving this page.</p><dl><dt>Owner</dt><dd>Alex Morgan</dd><dt>Status</dt><dd>In progress</dd></dl><label>Completion <progress value="72" max="100">72%</progress></label></section>
    <footer><button type="button" popovertarget="drawer-end" popovertargetaction="hide">Done</button></footer>
  </aside>
</section>

Filter drawer

One structural class and inherited appearance. Open, close, click outside or press Escape.

<section style="--re-drawer-start: 0; --re-drawer-end: auto; --re-drawer-width: 20rem">
  <button type="button" popovertarget="drawer-start">Open filter drawer</button>
  <aside class="drawer" id="drawer-start" popover="auto" aria-labelledby="drawer-start-title">
    <header><h2 id="drawer-start-title">Filter drawer</h2><button type="button" popovertarget="drawer-start" popovertargetaction="hide" autofocus>Close</button></header>
    <section><fieldset><legend>Project status</legend><label><input type="checkbox" checked> In progress</label><label><input type="checkbox"> Complete</label></fieldset><p>A backend supplies and applies the filter values.</p></section>
    <footer><button type="button" popovertarget="drawer-start" popovertargetaction="hide">Done</button></footer>
  </aside>
</section>