11.03 · Diagrams / cn-domain-tree

<cn-domain-tree>

Vertical apex-and-branches layout for one-to-many domain maps. Wraps an apex hex and a row of branch hexes with the kit's standard connectors. Multi-trunk diagrams stack two or more elements.

Single trunk · the canonical case

conduction.nl

connext

[product]

apps

<cn-domain-tree>
  <cn-hex slot="apex" size="xl">conduction.nl</cn-hex>
  <cn-hex size="lg">connext</cn-hex>
  <cn-hex size="lg">[product]</cn-hex>
  <cn-hex size="lg" color="orange">apps</cn-hex>
</cn-domain-tree>

Compact · sub-trunks with tighter spacing

commonground.nu

[client]

<cn-domain-tree compact>
  <cn-hex slot="apex" size="lg" color="commonground">commonground.nu</cn-hex>
  <cn-hex size="md" color="commonground" variant="outline">[client]</cn-hex>
</cn-domain-tree>

Multi-trunk · stack two trees + share a legend

conduction.nl

connext

[product]

apps

commonground.nu

[client]

Conduction · cobalt Click-here accent Common Ground · yellow

<!-- Two trees stacked share a legend on the lower one -->
<cn-domain-tree>
  <cn-hex slot="apex" size="xl">conduction.nl</cn-hex>
  <cn-hex size="lg">connext</cn-hex>
  ...
</cn-domain-tree>
<cn-domain-tree compact>
  <cn-hex slot="apex" ...>commonground.nu</cn-hex>
  ...
  <span slot="legend">...</span>
</cn-domain-tree>

API · slots

Slot	Purpose
`apex`	The trunk hex. Required. Centred above the connector. Typically a `<cn-hex size="xl">` or `size="lg"`.
`(default)`	Branch hexes. Rendered in a centred horizontal row below the connector. Pass any number; they wrap on narrow viewports.
`legend`	Optional legend chips at the bottom. Each chip is a child element with its own dot/swatch + label.

API · attributes

Attribute	Values	Default	Purpose
`compact`	boolean (presence)	absent	Tighter vertical spacing. Use for sub-trunks (e.g. `commonground.nu` below the main conduction.nl tree).
`tone`	`cobalt` · `dim`	`cobalt`	Connector line shade. `tone="dim"` uses cobalt-100 instead of cobalt-200; useful when the apex is a light family.

Why we built it this way

Pattern · trunk and branches

Layout component, content stays with the caller

cn-domain-tree owns only the structure: apex above, connector, branches below, optional legend. The hexes themselves stay <cn-hex> elements, fully styled by the caller. No prop forwarding, no JSON config, no DSL.

Slots over props. The apex is a slot, branches are the default slot, legend is a slot. Any HTML works inside any slot — including future <cn-hex-prism> apexes when those make sense.
One trunk per element. Multi-trunk diagrams (conduction.nl + commonground.nu) stack two cn-domain-tree elements vertically. This keeps the API tiny and the layout predictable.
Compact attribute, not a custom variant. compact reduces vertical padding and connector height. Use it on sub-trunks so the visual hierarchy tracks the topology.
Connectors are styled by tone, not by colour name. tone="dim" works whether the apex is cobalt, commonground-yellow, or any future family. The component does not encode brand decisions.
Legend slot collects multiple items. Slot legend accepts any number of children — the component just lays them out horizontally below the tree with a divider above.