GitHub

Record detail

A single record opened to full view: identity and status in the header, facts and relationships up front, history and files behind tabs, and edits in an esa-side-dialog so the reading surface stays read-only.

When to use: When a user clicks through from a list to one item — a permit, a requirement, a site — and needs its full state on one screen, with editing close at hand but out of the reading flow.

Composed from esa-badgeesa-buttonesa-icon-buttonesa-tab-layoutesa-pillesa-side-dialogesa-chip-groupesa-date-pickeresa-textarea

The specimen is one invented record — a stormwater discharge permit in review. The header answers what is this and where does it stand; the tabs hold everything deeper. Click Edit to open the live side-panel editor.

Stormwater Discharge Permit — Mare Island Shipyard

In review

CA0038776 · San Francisco Bay RWQCB · Next action due Jul 10, 2026

Permit ID
CA0038776
Program
NPDES — Industrial Stormwater
Agency
San Francisco Bay RWQCB
Facility
Mare Island Shipyard, Vallejo, CA
Responsible party
Maria Chen — Environmental Lead
Submitted
May 2, 2026
Review due
Jul 10, 2026
Expires
Jun 30, 2031

Related records

Status changes and comments land here, newest first.

Monitoring reports, the signed NOI, and other attachments land here.
Status

Composition notes

  • Status is a badge, not a border. The record's state lives in an esa-badge beside the title — never a colored left edge on the card. The editor renders the same state as the chip group's active value.
  • The facts grid is page CSS. A <dl> on an auto-fill grid — key-value layout is composition glue, not a component. Only the values reach for legos when they need color.
  • Tabs hold the long tail. Overview carries what most visits need; Activity and Documents sit behind esa-tab-layout with count badges, so depth never pushes the header off screen.
  • The side dialog is the editor's home. The detail surface stays read-only; esa-side-dialog brings the form legos plus focus trap, Esc-to-close, and focus restore for free.
  • Related items are rows that link. The anchor navigates; the esa-pill only labels the row's type — don't make pills the click target.