On this page

Data & status

Tree released

A tree the reader walks with the keyboard: branches that open, leaves that get chosen.

Source

Import@pacit/components/tree
Selectorspct-tree, pct-tree-item

Implements the W3C ARIA APG Tree View pattern ↗

README.md

src

app.ts

theme.ts

Selected: src/app.ts

import { Component, signal } from '@angular/core';
import { PctTree, PctTreeItem } from '@pacit/components/tree';

/** One tabstop, arrows do the walking — a file picker in eight declarative lines. */
@Component({
  selector: 'demo-tree',
  imports: [PctTree, PctTreeItem],
  styles: ':host { display: block; inline-size: min(100%, 20rem); }',
  template: `
    <pct-tree ariaLabel="Project files" [(selected)]="chosen">
      <pct-tree-item value="README.md">README.md</pct-tree-item>
      <pct-tree-item value="src" [expanded]="true">
        src
        <pct-tree-item value="src/app.ts">app.ts</pct-tree-item>
        <pct-tree-item value="src/theme.ts">theme.ts</pct-tree-item>
      </pct-tree-item>
    </pct-tree>
    <p>Selected: {{ chosen() ?? 'nothing yet' }}</p>
  `,
})
export class TreeDemo {
  readonly chosen = signal<string | null>('src/app.ts');
}

tree.demo.ts — the same file runs here and is highlighted under Code

Start here

Usage

One import per component, and the shortest possible use — the package itself is installed once, on the start page.

Import this component

import { PctTree, PctTreeItem } from '@pacit/components/tree';

Exported	What it is
`PctTree`component`pct-tree`	A tree: a hierarchy the user walks — a file explorer, a nested outline.
`PctTreeItem`component`pct-tree-item`	One node: `role="treeitem"`, its own text as the label, and any nested `pct-tree-item` elements pulled into the branch's `role="group"` — the consumer writes the tree as the tree, and the two-slot projection does the sorting.

<pct-tree ariaLabel="Files" [(selected)]="chosen">
  <pct-tree-item value="src" [expanded]="true">
    src
    <pct-tree-item value="src/app.ts">app.ts</pct-tree-item>
  </pct-tree-item>
</pct-tree>

Examples

Every state, running

Each example is the component itself, not a screenshot. Open the code under any of them.

A deep branch, opened

Every pct-tree-item can hold more items; expanded opens a branch from the start, and selected is a two-way value — set it, and the tree shows the way to that node.

apps

docs

src

sandbox

libs

Selected: apps/docs/src

API

What it reads, and what it writes back

Read from the source at build time — the types, the defaults and the lines of documentation are the library's own.

A tree: a hierarchy the user walks — a file explorer, a nested outline.

Inputs

Name	Type	What it does
`selected`two-waydefault `null`	`string \| null`	The chosen item's `value` — the one thing the tree owns (the pagination's ownership at a hierarchy). A model, because both directions are ordinary: the application preselects, and Enter, Space or a click writes back. `null` is "nothing chosen".
`ariaLabel`default `''`	`string`	The accessible name of the tree. Optional, the chips' reasoning: a library default would have to guess what hierarchy this is, and two trees on one page are told apart here.

Outputs

None of its own. The native events — (click), (focus), the form's submit — are the platform's, and two-way models above carry the rest.

What it writes on the element

The hooks a stylesheet or a test can hold. Stable by contract — the parts inventory gate fails the build when one disappears.

Attribute	Bound to	Note
`class`	`pct-tree`
`role`	`tree`
`aria-label`	`ariaLabel() \|\| null`

Styling

Parts to select, tokens to override

Two ways in, both stable. No class names to depend on.

Parts

In a test, PctTreeHarness, PctTreeItemHarness from @pacit/components/testing read a part by the name below and a state by its attribute — the harness gate holds the names to the package.

Part	Selector	What it is
`arrow`	`[data-pct-part="arrow"]`	the toggle that expands a branch
`label`	`[data-pct-part="label"]`	a node's text, the row that is selected

Tokens

Every value the component reads, with the light and the dark default. Override a token at any scope and it cascades like any custom property.

Token	Styles
`--pct-tree-arrow-fg{pct.text-muted}`#334155 · #e2e8f0	Text colour of the arrow.
`--pct-tree-arrow-size`12px	Size of the arrow.
`--pct-tree-gap{pct.space.2}`4px	Gap between nodes.
`--pct-tree-indent{pct.space.5}`16px	Indent of the tree per level.
`--pct-tree-label-bg-hover{pct.surface-100}`#f1f5f9 · #1e293b	Background of the label on hover.
`--pct-tree-label-bg-selected{pct.primary}`#2563eb · #60a5fa	Background of the label when selected.
`--pct-tree-label-fg-selected{pct.on-primary}`#ffffff · #0f172a	Text colour of the label when selected.
`--pct-tree-label-padding-x{pct.space.3}`8px	Horizontal padding of the label.
`--pct-tree-label-padding-y{pct.space.2}`4px	Vertical padding of the label.
`--pct-tree-label-radius{pct.radius.md}`8px	Corner radius of the label.
`--pct-tree-label-target-min{pct.target.min}`24px	Touch-target floor of the label.

Theming

A brand override in a few declarations. Scope it to a theme attribute, a page or one container — the component never notices.

[data-theme='brand'] {
  --pct-tree-label-bg-selected: #0f766e;
  --pct-tree-label-fg-selected: #ffffff;
  --pct-tree-arrow-fg: #0f766e;
}

README.md

src

app.ts

theme.ts

Selected: src/app.ts

Accessibility

Measured, not assumed

Pattern: Tree View — (0056) one tab stop, a roving focus, treeitems in groups, aria-expanded on branches and aria-selected on the chosen row. Named in the class JSDoc.

Keyboard

key	effect	test
`Tab` / `Shift+Tab`	enters at the roving item / leaves the whole tree	`apps/sandbox-e2e/src/tree.spec.ts` — "one tab stop"
`ArrowDown` / `ArrowUp`	next / previous visible row	`tree.spec.ts` — "the arrows walk visible rows" (and unit, `tree.spec.ts` in the lib)
`ArrowRight` (LTR)	opens a closed branch; steps into an open one	the same case; the RTL swap: `apps/sandbox-e2e/src/rtl.spec.ts`
`ArrowLeft` (LTR)	closes an open branch; otherwise climbs	the same two cases
`Home` / `End`	first / last visible row	`tree.spec.ts` — both readings
`Enter` / `Space`	chooses the row under focus	`tree.spec.ts` — "Enter chooses"; Space in the unit suite

Evidence

What the repository holds for this component

Read at build time from the tracked snapshots, not typed here.

93.28%mutation score111 of 119 mutants killed

7 × 3e2e cases × enginesplus the shared audits: axe, forced colors, preferences, size, hydration

4colour pairs measuredlight and dark, at every token build

2visual baselinesChromium, the sandbox's own pictures

21elements in the preview10 listeners · 1 render to settle · 5359 µs in jsdom, held exactly but for the clock

Known limitations

The walk is the library's third private movement machinery (the select's list, the menu's walk, now this). lesson-21 said "before the second"; the extraction into core now has three consumers waiting, recorded against the plan's behaviour-layer item.
No typeahead. It arrives WITH that extraction, not as a fourth private copy.
Single-select only. aria-multiselectable is an announcement model of its own; a decision of its own the day a real application asks.
No async loading. aria-busy on a loading branch is 0037 at a hierarchy — its own future record.
No drag, no virtualization. Application machinery; the second would need a window of its own, as the select's (0038) and the data table's (0098) each are.

pacit

Usage

Every state, running

A deep branch, opened

What it reads, and what it writes back

Inputs

Outputs

What it writes on the element

Parts to select, tokens to override

Parts

Tokens

Theming

Measured, not assumed

Keyboard

What is measured, and what is not yet

What the repository holds for this component

Known limitations