Node Properties styling

The panel owns its internal inspector rhythm, form spacing, port list, and empty state. Applications should style the host for layout and set CSS custom properties for product color, border, focus, and density decisions.

Panel layout

Use tng-flow-node-properties as a block-level sidebar, drawer body, split-pane details panel, or bottom inspector. The host should own width, height, and external borders; the component fills that box and scrolls its inner content when fields, data, or ports exceed the available space.

tng-flow-node-properties.agent-inspector {
  display: block;
  min-width: 20rem;
  max-width: 28rem;
  height: 100%;
  border-left: 1px solid var(--tng-flow-execution-border-color);
}

@media (max-width: 56rem) {
  tng-flow-node-properties.agent-inspector {
    min-width: 0;
    max-width: none;
    height: min(60vh, 34rem);
    border-left: 0;
    border-top: 1px solid var(--tng-flow-execution-border-color);
  }
}

Theme tokens

The built-in fields resolve through the same execution inspector tokens used by Flow Workbench, so the panel can sit beside the graph without a second visual system. Override these properties on the host when a specific inspector needs different surface, text, border, focus, or density treatment.

tng-flow-node-properties.agent-inspector {
  --tng-flow-execution-surface: var(--tng-semantic-background-surface);
  --tng-flow-execution-muted-background: var(--tng-semantic-background-muted);
  --tng-flow-execution-color: var(--tng-semantic-foreground-default);
  --tng-flow-execution-muted-color: var(--tng-semantic-foreground-muted);
  --tng-flow-execution-border-color: var(--tng-semantic-border-default);
  --tng-flow-execution-focus-color: var(--tng-semantic-focus-ring);
  --tng-flow-execution-inspector-padding: 1rem;
}

Data template styling

Projected ng-template[tngFlowNodePropertiesData] content is rendered inside the panel's Data section. Keep template styles scoped to your application classes, preserve the provided readonly state, and call the template request functions instead of mutating node data directly.

<tng-flow-node-properties
  class="agent-inspector"
  [definition]="definition()"
  [inspectedNodeId]="inspectedNodeId()"
  (nodeChangeRequested)="applyNodeChanges($event)"
>
  <ng-template
    tngFlowNodePropertiesData
    let-data
    let-node="node"
    let-readonly="readonly"
    let-requestDataChange="requestDataChange"
  >
    <label class="agent-inspector__field">
      <span>Owner</span>
      <input
        [value]="data?.owner ?? ''"
        [readOnly]="readonly"
        (input)="requestDataChange({ owner: $any($event.target).value })"
      />
    </label>
    <small>{{ node.type }} node</small>
  </ng-template>
</tng-flow-node-properties>

Readonly state

Use readonly for historical runs, locked workflows, and permission-limited users. The host receives data-readonly, text inputs become read-only, toggles become disabled, and change requests are suppressed. Keep the same layout in both modes so switching between edit and review states does not move the user's focus.

Accessibility baseline

Built-in fields keep visible labels, native form controls, keyboard focus outlines, and forced-colors border fallbacks. Custom data templates should follow the same pattern: use semantic labels, avoid color-only state, and keep controls reachable in the panel's scroll area.