Tree View

Initial expanded branches (uncontrolled).

Initial selection (uncontrolled).

Keys that cannot be selected or focused.

Bindable expanded branches.

Bindable keyboard cursor (read-only — drive it via keyboard / pointer).

Bindable current selection / checked keys.

The color family the highlight active state paints in (`activeEmphasis="highlight"`), independent of `tone` — e.g. a primary current row in a neutral list. Ignored at other levels.

The container surface preset: `"default"` is the raised, padded card-like surface; `"subtle"` is flush (transparent, no padding, no shadow). It only sets surface defaults — pass any Panel prop (`background`, `padding`, `radius`, `shadow`, `border`, …) alongside it to override that axis. In the card frame those defaults style the Card; `"subtle"` renders bare unless `card` is an object.

Surface background from the Panel scale (`surface.peak` → `surface.ground`, or `transparent`).

Border color at rest: `none`, `default`, `bold`, `muted`, or `accent`. The 1px line is always reserved when a border can appear, so changing it never shifts layout.

Border color while the surface is `active` — the explicit form of the ring `activeEmphasis` would otherwise pick. It holds through hover, so a `borderInteract` color can't steal it. `inherit` keeps whatever `activeEmphasis` chose; `none` clears it.

Border color on hover and press: `none`, `default`, `bold`, `muted`, or `accent`. Composes with `border`, e.g. a muted line at rest that turns bold on hover.

The Card the tree renders in: its surface (`background`, `border`, `contentBackground` for an inset panel…) plus header/footer content (`heading`, `subheading`, `leading`, `trailing`, `footer`). A rendered heading labels the tree (`aria-labelledby`) unless `aria-label` / `aria-labelledby` is given. `appearance="default"` always renders a Card — with no `card` props it looks like the old raised container, and the tree-level surface props (`background`, `shadow`, `radius`, `border`, `tone`, `emphasis`, `translucent`) become the card's defaults. `appearance="subtle"` renders bare unless `card` is an object. `false` opts out: the `role="tree"` list is the root Panel, exactly the pre-card DOM.

The Panel emphasis ramp of the container surface. Passing `"default"` or `"subtle"` is a **deprecated** alias for {@link TreeViewBaseProps.appearance} and is mapped to it.

What hover and press paint on an interactive surface: `surface` steps the resting surface ramp; `highlight` paints the tone's highlight (`neutral.highlight` on a neutral surface) and its next step while pressed. An active surface keeps its own hover steps.

Elevation shadow applied to the surface.

Whether to draw the per-depth connecting guide rails.

Visual size variant — controls font size, row height, and indent width.

Color tone: a semantic tone (`neutral`, `primary`, `success`, `warning`, `danger`, `inherit`) or a color family such as `teal`. A family carries no status meaning.

Frosted glass: the chosen `background` step at /35 with a large backdrop blur, so content behind the panel shows through. A transparent background stays transparent.

Inner padding from the spacing scale.

Corner radius from the radii scale (`full` for fully rounded). `inner` computes a concentric corner from the parent panel's radius minus its padding; `inherit` mirrors the parent's corner exactly, for a child that sits flush with its edge.

Corner radius for the bottom-left and bottom-right corners.

Corner radius for the top-left and bottom-left corners.

Corner radius for the top-right and bottom-right corners.

Corner radius for the top-left and top-right corners.

Keep (or drop) the always-1px transparent border the panel reserves so a border appearing or changing never shifts layout. Computed automatically — it's reserved when a resting `border` is visible, or when `interactive` / `borderInteract` / `active` can change the border at runtime. Set `false` only on a panel that must not occupy that 1px (e.g. a borderless housing frame that would otherwise add 2px around a set).

Opt this panel into the baseline rhythm: bakes `data-rhythm` on the root, so the whole subtree becomes a rhythm scope. The panel's padding turns into whole raster lines (minus its border) and text inside can quantise its own leading through the preset's `rhythm` pattern. A `<Grid rhythm>` (or any `[data-rhythm]`) ancestor makes the subtree rhythmic without this prop — the prop is how a panel opts ITSELF in, and how it takes the line-based padding.

Mark this as the chosen one in a set (a current nav item, a checked option, a selected card). Where `interactive` says it *can* be clicked, `active` says it *is* the current choice. Use `activeEmphasis` to control how loud the state is. Combined with `interactive`, hover and press restart their stepping from the active baseline rather than falling back to the unchosen ramp. The four values differ only in what drives the state: `true` by the prop (via `data-panel-active`), `"checked"` by a wrapped native input (`:has(input:checked)` — zero JS, nothing to re-render), `"current"` by an existing `aria-current` on the panel, and `"current-within"` by an `aria-current` on a direct child (a split nav row whose link carries it).

How loud the `active` state is. Defaults to the panel's own `emphasis`, so the chosen state lands on the same ramp as the resting look — this prop is the override for when the active item should be louder (or quieter) than the panel itself. `"primary"` fills with the tone accent ramp and flips text to the contrast scale (~150 RGB units of separation — the option that reads at a glance in a dense list). `"secondary"` tints the tone surface ramp and `"tertiary"` the neutral ramp; both promote text to `bold` and lift the border to the default line, but move the surface only ~7–18 units.

HTML element to render the `role="tree"` list as (the root in the bare frame, the Card's content child in the card frame).

Place the keyboard cursor on the first node on mount.

Whether to render a checkbox at the start of every row.

Enable interactive (hover / focus / press) affordances and states.

The tree's data — a nested array of nodes. A node is `{ id, label?, children?, disabled?, badge?, leading?, trailing? }`; nesting `children` builds the hierarchy.

Fires when a node is activated (click / Enter).

Fires whenever the set of expanded branches changes.

Fires whenever the selection changes.

Serialize the panel's resolved surface inputs into a `data-panel-config` attribute on the root, enabling runtime surface changes via `updatePanelElement()` (and, for inheritors like Card, `updateCard()`) without a framework runtime — the primary consumer is Astro / vanilla JS, where props don't re-render. Reactive frameworks (Svelte/React/Vue) don't need this: their prop changes re-run the connect already.

How a checkbox toggle propagates: `"cascade"` (parent ⇄ descendants, with indeterminate parents) or `"independent"` (each node alone).

How clicks / Enter / Space resolve into a selection. `"none"` activates without persisting selection.

Trailing action controls (sibling of the toggle, outside it).

Leading action controls (sibling of the toggle, outside it).

Leading decoration per node (icon / Stamp). Receives the rendered item.

Trailing decoration per node, before any actions.

Bindable element reference for the `role="tree"` list (a `<ul>` unless `as` says otherwise) — the root in the bare frame, the card's content child in the card frame.

Per-slot escape hatch to inject Panda styles or HTML attributes into any slot of the component.

Extra HTML attributes spread onto the root `tree` element.