Inspector Panel
The right-rail detail/settings content pattern (workspace-modules S4) — a panel that describes or edits whatever the main view has selected. Two mounts: in-flow inside the shell's aside.lb-shell__panel (nonmodal complementary landmark — the default, because it keeps the canvas usable for reference and copy-paste) or overlay inside .lb-sheet--right for transient tasks. Consumed here: Button and Icon Button · Badge · Radio · Segmented · Sheet. Mounts in the App Shell aside or over the Library view.
a11y (built in): the panel is heading-structured (__title is an <h3>, each __section-title an <h4>) and every icon-only control — back, close, per-row copy — carries an aria-label; .lb-choice is a <label> wrapped round a native radio, so its title and description both land in the accessible name. Segmented rows come from LB.Segmented: role=radiogroup/role=radio, roving tabindex, ←/→ to move and Home/End to jump. In-flow it mounts in aside.lb-shell__panel[aria-label] — a nonmodal complementary landmark; the panel ships no JS of its own, so moving focus in on open and back to the launcher on close stays the consumer's job.
A · Detail — media inspector
The media-detail flavor: hero, engagement stats, primary CTA, copy-able metadata sections.
Track
Old School
Styles
Lyrics
Workspace
Agent settings
Confirm before generating
Image defaults
Usage
Pure CSS — mount .lb-inspector inside aside.lb-shell__panel[aria-label] (in-flow, nonmodal — the default) or inside .lb-sheet--right (transient overlay). Anatomy: __head (optional back icon-btn · __titles with __label+__title · close icon-btn) → __body (scrolls: __hero, badges/stats, CTA, __sections of __rows with copy icon-btns) → __foot (pinned actions). The .lb-choice row (radio + title + description) is the settings-form pattern — pair with segmented defaults and a Save foot for settings panels.