Public attributes and slots
required label, expanded-values, selected-values, selection (none/single/multiple), loading-label (Loading), disabled and silent expandedValues/selectedValues; recursive cem-tree-item payloads require unique token value and label and accept expandable, disabled and loading. Class, hidden and dir use native host behavior. Boolean attributes use presence, including empty and false-valued attributes.
| Attribute | Contract |
|---|---|
| separate-toggle | Presence separates chevron disclosure from row activation, including native Enter/Space. Existing mode is unchanged when omitted. |
| data-cem-spacing | normal uses baseline spacing; sparse increases inherited row and group gaps. This spacing profile is distinct from condensed row density. |
| data-cem-density | super-compact selects the condensed Studio tree profile on every input device: 1lh rows with zero coupling minima and no extra vertical padding. |
| activate-branches | Legacy opt-in branch activation combined with row disclosure. |
label | Visible disclosure/tab/workflow label or the default accessible name; a non-empty string. |
aria-label | Optional accessible-name override on the native semantic owner. Omit to use label. |
expanded-values | Whitespace-separated branch values; empty by default. User toggles update expansion. |
selected-values | Whitespace-separated application-owned selected values; activation emits an intent event. |
selection | none (default), single or multiple; exposes the corresponding selection semantics. |
disabled | Presence makes the relevant native owners unavailable, including disabled="false". |
loading-label | Text announced for loading branches; defaults to Loading. |
class | Optional consumer styling classes on the host; public internal hooks use part. |
hidden | Native host visibility; present removes the component from layout and keyboard navigation. |
dir | Native text direction: ltr or rtl, inherited when omitted. |
Up/Down, Home/End and typeahead move focus. Right/Left open, close or traverse parent/child relationships. Enter/Space toggles a branch or emits leaf activation; application selection remains unchanged.
Five themes × normal, sparse and condensed
Compare the same enabled and disabled trees in each mode. Studio uses Condensed (data-cem-density="super-compact"); normal rows keep the standard coupling minimum.