Drawer

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<button class="tui-key" data-drawer-open="filters">Filters</button>

<dialog class="tui-drawer" id="filters" data-edge="right" aria-labelledby="filters-t">
  <div class="tui-drawer__handle" aria-hidden="true"></div>
  <header class="tui-drawer__head">
    <h2 class="tui-drawer__title" id="filters-t">Filters</h2>
    <button class="tui-key tui-key--icon tui-key--flat" data-drawer-close aria-label="Close filters">…</button>
  </header>
  <div class="tui-drawer__body tui-scroll-area">…</div>
  <footer class="tui-drawer__foot">
    <button class="tui-key tui-key--flat" data-drawer-close>Clear</button>
    <button class="tui-key tui-key--primary" data-drawer-close>Show 42 results</button>
  </footer>
</dialog>

import { openDrawer, closeDrawer } from '/kit/kit.mjs';

// data-drawer-open and data-drawer-close need no code. To do it yourself:
openDrawer(document.getElementById('filters'));   // showModal()
closeDrawer(drawer, 'applied');                    // close(returnValue)

drawer.addEventListener('close', () => {
  if (drawer.returnValue === 'applied') refresh();
});

Needs kit.css and kit.mjs. How to install the kit.

• A native modal <dialog>: focus moves in, is held inside, and returns to the key that opened it; everything behind it is inert.
• Name it with aria-labelledby pointing at its title. Every drawer has a visible close key with an aria-label; the grip and the scrim are conveniences.
• Escape closes it. A drawer that holds unsaved work uses data-lock so a stray click does not lose it, and says why on screen.
• The page behind stops scrolling while it is open, so a wheel or a swipe over the drawer never moves what is under it.
• The slide is a transform and a fade of the scrim; with reduced motion the drawer simply appears and disappears.
• Drawers do not open other drawers: a second layer of modal is a page.

The browser’s dialog does the hard parts: the top layer, the backdrop, the inert page, the focus trap and the return of focus. The plate is the kit’s face, bolted to an edge (its corners are square where it meets the frame and round where it faces the page) and its shadow falls toward the page. The grip is a slot cut into the inner edge with two ribs standing in it. Sliding is a transform with @starting-style, and allow-discrete keeps the plate on screen until it has left; where that is not understood it simply appears. drawer.mjs adds the triggers, the scrim click and the drag on the grip, which follows the pointer and closes past a third of the way or on a quick flick.