Inspector
A right-side (optionally left) property editing panel: tab strip + collapsible sections + label/control rows. Design-tool sidebar semantics (role="complementary") — distinct from oas-sidebar (a navigation menu): the inspector is contextual property editing.
Basic usage
The container hosts slot="tabs" (tab strip) and the default slot (sections); oas-inspector-tabs takes its items via the JSON declarative channel, value is attribute-as-state; sections use oas-inspector-section, property rows use oas-inspector-row.
Tab strip + sections + property rows
Tab strip (oas-inspector-tabs)
Click or arrow keys to switch (roving tabindex + Home/End, mirrored in RTL); dispatches oas-change (detail { value }); value is attribute-as-state (the component reflects it on switch — hosts may coordinate by listening).
Tab switch feedback
Click a tab or use arrow keys; watch the oas-change feedback.
Collapsible sections (oas-inspector-section)
collapsible enables folding (aria-expanded kept in sync); open is attribute-as-state (click toggles and reflects); default-open expands initially; clicking dispatches oas-toggle (detail { name, open }); slot="extra" holds end-of-header actions (decoupled from the fold click).
Fold toggle feedback
Click section headers to fold/unfold; watch the oas-toggle feedback (name + open).
Row forms: key-value / control / mixed / row reset
oas-inspector-row has two forms: with no default-slot content it is a key-value row (value in tabular numerals); with slotted content it is a control row (50/50 split, form controls provided by the host); mixed shows the multi-selection mixed state (built-in copy); reset shows a row-level reset button that dispatches oas-row-reset.
All row forms
Striping and top alignment (striped / align-top)
striped adds a zebra background (value goes through --oas-inspector-row-striped-bg, falling back to the theme-aware --oas-color-bg-hover); align-top aligns the label with the top of the control, for rows with tall controls (e.g. multiline text).
striped + align-top
Empty state (empty)
The empty boolean attribute switches to the no-selection state: the default slot hides and slot="empty" shows (built-in copy "No selection" by default).
No-selection empty state
Density (density), panel side (side) and RTL
density="compact" tightens row height / spacing (24px row tier, delivered to children via tokens); side="left" switches the divider-direction semantic hook (positioning stays with the host layout); with dir="rtl" on the container the component mirrors automatically.
default / compact / side=left comparison
API
oas-inspector
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
active-tab | Current tab (paired with oas-inspector-tabs; attribute-as-state) | — | — |
density | Density tier: default (row height 28px) / compact (row height 24px, tightened spacing, delivered to children via tokens); invalid values fall back to default with a one-time warning | string | default |
empty | No-selection state: the default slot hides and the empty slot (built-in "No selection" copy by default) shows | boolean | — |
label | Accessible name (falls back to the i18n "Inspector" default) | string | — |
side | Panel side: right (default) / left (divider-direction semantic hook only; positioning is decided by host layout); invalid values fall back to right with a one-time warning | string | right |
Slots
| Name | Description |
|---|---|
| default | Sections / content area (oas-inspector-section etc.) |
empty | No-selection content (overrides the built-in copy) |
footer | Bottom area |
header | Top area |
tabs | Tab strip channel (oas-inspector-tabs) |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-inspector-bg | color-mix(in srgb, var(--oas-color-text-primary) 3%, var(--oas-color-bg)) |
--oas-inspector-gap | var(--oas-space-2) |
--oas-inspector-width | 280px |