Lightbox os-005

Also known as: Modal, Dialog, Detail overlay

Show full detail for one item as a focused overlay above the page.

Example

two-pane (default)

Variants

two-pane

single-pane

How it works

A backdrop covers the page and centers a dialog box. Close on: clicking the × button, clicking the backdrop itself (not the dialog), or pressing Escape (bound globally while a lightbox is open). Body scroll is locked while open (overflow: hidden) and restored on close. The two-pane variant splits the dialog into a primary content pane (scrollable, e.g. documentation text) and a secondary "aside" pane with a distinct background (e.g. an embedded preview iframe); the single-pane variant drops the aside entirely for content with nothing to preview. Marked up as role="dialog" with aria-modal="true" and an aria-label naming the item shown.

Known gap: focus is not currently trapped inside the dialog or returned to the trigger element on close — Tab can escape into the page behind the backdrop. Worth fixing in a future pass if this is used somewhere focus order matters more than it has so far.

Relationships

None — standalone component. Commonly triggered from a card grid or chip list to show one item's full detail.

Parameters

Name	Type	Default	Description
`variant`	string	`two-pane`	`two-pane` \| `single-pane` (adds `og-lightbox-body--single`, omits the aside pane)
`title`	string	—	Dialog heading text
`meta`	string	—	Optional parenthetical next to the title (e.g. an internal name/id)
`badge`	string	—	Optional small uppercase kind/category label in the header
`onClose`	function	—	Called on close-button click, backdrop click, or Escape

Tokens

--overlay-backdrop --z-modal --color-white --color-black --color-accent --color-text-secondary --color-text-muted --color-bg-secondary --color-border --text-xs --text-sm --text-lg --text-xl --weight-regular --weight-bold --leading-snug --tracking-caps --radius-sm --radius-md --radius-lg --spacing-1 --spacing-2 --spacing-4 --spacing-6

Provenance

Variant	Proven in	Live at	Date
`two-pane`	OS-009-Mission-Dashboard (AIOS Skill Centre portal)	skill-centres portal (Tailscale-only)	2026-07-04
`single-pane`	OS-009-Mission-Dashboard (related-skills & playbook detail views)	skill-centres portal (Tailscale-only)	2026-07-04

Live behind Tailscale, not publicly reachable — provenance is the shipped source (OS-009-Mission-Dashboard/app/portal.js + portal.css), not a public URL.

Code

os-005 · Source: packages/og-lightbox.css ▾

<div class="og-lightbox-backdrop">
  <div class="og-lightbox" role="dialog" aria-modal="true" aria-label="…">
    <header class="og-lightbox-header">
      <span class="og-lightbox-badge">skill</span>
      <h3 class="og-lightbox-title">Title <span class="og-lightbox-meta">(name)</span></h3>
      <button class="og-lightbox-close" aria-label="Close">&times;</button>
    </header>
    <div class="og-lightbox-body">
      <section class="og-lightbox-pane">…</section>
      <section class="og-lightbox-pane og-lightbox-pane--aside">…</section>
    </div>
  </div>
</div>