UI widgets

Lightbox

A gallery of one-up and two-up rows that opens into a routed overlay. Every piece carries an address — ?item=meridian — so a view can be linked, shared and reopened. Three presets: a plain routed overlay, a click-to-zoom that grows out of the thumbnail you pressed, and a filmstrip with a thumbnail rail.

The overlay is a real dialog: role="dialog" with aria-modal, focus moved in and handed back to the thumbnail on close, arrows to walk the set, Esc to leave, and a scroll lock that compensates for the scrollbar so the page behind never jumps. Drag down or pinch to dismiss on touch. Press H to hide the control panel.

02

Deep links

Opening a piece rewrites the address; closing puts it back. Reload with a piece in the address and the overlay opens on it. A page opened straight off disk has an opaque origin and the browser refuses the History API there, so the engine falls back to a hash and reports which route mode it is in — no silent failure.

03

Dialog audit

Measured on the page, not asserted in a README. Open a piece and this block records where focus was, where it went, where it came back to, whether the background locked, and how many pixels the page behind shifted while it did.

What the engine wires up
  • Focus lands on the close control; Tab cycles inside the dialog only.
  • Every body child except the dialog gets inert and aria-hidden.
  • Scroll locks on <html>; the scrollbar width is added back as padding.
  • Fixed furniture marked data-scroll-lock-pad is padded too — the panel is.
  • walk the set, Home and End jump to the ends.
  • The counter and caption sit in a polite live region, so a change is announced.
  • Reduced motion: no FLIP, no slide, no fade — the overlay is simply there, then not.