CngxExpandable

Passive expand/collapse contract for elements whose open state is driven from the outside - typically a CngxTreeController or any component that manages a shared expansion set. Mirrors aria-expanded and (optionally) aria-controls into the host; carries no interaction of its own.

Use CngxDisclosure instead for self-triggering expanders (FAQ, accordion headings). The distinction is deliberate: a tree-item row is a selection target, not a toggle - clicks, Enter, and Space belong to the selection flow, while expand/collapse is wired to ArrowLeft/Right via a sibling nav directive or to a dedicated twisty button.

<div role="tree" aria-label="Files">
  <div
    role="treeitem"
    aria-level="1"
    cngxExpandable
    [cngxExpandableOpen]="ctrl.isExpanded(id)()"
    [controls]="childrenId"
  >
    <button
      type="button"
      tabindex="-1"
      (click)="ctrl.toggle(id)"
    >▸</button>
    <span>{{ label }}</span>
  </div>
  <div [id]="childrenId" [hidden]="!ctrl.isExpanded(id)()">…</div>
</div>