Drawers (off-canvas)

Open the drawer — in its own document

An iframe, so the drawer takes over nothing but itself. .bo-offcanvas is a real <dialog>: opened inline it renders in the page's top layer and covers the documentation around it, which makes the one control you want to study the thing hiding everything else. In its own document the drawer still gets a real top layer, a real backdrop and real Esc handling — the platform behaviour is the point — but scoped to the frame.

Start-side drawer — navigation on a narrow shell

Markup

<button class="bo-btn bo-btn--secondary"
        data-dialog-trigger="drawer-nav" aria-label="Open navigation">☰ Menu</button>

<dialog class="bo-offcanvas" id="drawer-nav" data-state="closed"
        aria-labelledby="drawer-title">
  <div class="bo-offcanvas__header">
    <span id="drawer-title" class="bo-navbar__brand">busy-office</span>
    <form method="dialog">
      <button class="bo-btn bo-btn--ghost bo-btn--icon" aria-label="Close">✕</button>
    </form>
  </div>
  <nav class="bo-sidebar-nav" aria-label="Main">…same markup as the sidebar…</nav>
</dialog>
<!-- Opens via initDialogs() — same wiring as any dialog: backdrop, Esc,
     focus-return and Tab loop are all inherited. -->

End-side drawer — filters & detail panels

--end slides the drawer in from the end edge — the home for filter panels and record previews (start side stays the navigation convention). Same dialog wiring, mirrored slide animation, RTL-aware.

Which side, and when

• Start side — navigation, because that is where the sidebar lives; a drawer that replaces the rail should come from where the rail was.
• --end — filters, detail previews, anything that supplements the screen you are on rather than taking you elsewhere.
• Both mirror correctly under dir="rtl": "start" and "end" are logical, not left and right.

Quick reference generated

State attributes: data-state

API generated from CSS

• It is a <dialog>: initDialogs() wires it exactly like any other — backdrop, Esc, focus-return and the Tab loop are inherited, not reimplemented.
• Give it an accessible name with aria-labelledby pointing at the header title.
• A drawer is modal: while it is open the page behind is inert. For a panel that must stay open alongside the content, use a layout column, not a drawer.

Maturity generated

Introduced

v0.3.0

CSS floor

Chrome/Edge 117 · Firefox 129 · Safari 17.5

Alignment scored

2026-08-21

Assistive-tech evidence

None recorded

Pin this component's first release with npm i @busy-office/ui@0.3.0. The floor is derived from this component's stylesheet alone — set by @starting-style — so it sits at or below the whole framework's Chrome/Edge 119 · Firefox 129 · Safari 17.5. No assistive-technology runtime result is recorded for any component: it needs a human listening to VoiceOver and NVDA on owner hardware; no gate in this repo can simulate announcement behaviour. What automation covers instead is test:axe across every page at 1440 and 390, and check:forced-colors — see accessibility.

Design-system alignment generated

100% (18/18) — how closely this component follows the design language. Each rule is scored 0-3 against a checkable citation; rules that don't apply leave the denominator. Scored 2026-08-21.