Tree Item
import "@taprootio/espalier/tree/item";
<esp-tree-item>
A declarative node for a static <esp-tree>.
esp-tree-item is a lightweight, declarative data carrier. Nest
items to describe a static hierarchy; the parent esp-tree parses
these elements into its internal model and renders the whole tree
centrally (a single ARIA tree with one roving tab stop). The item
elements themselves are not rendered visually — this keeps the
keyboard and accessibility model identical whether a tree is built
from slotted items or from the data-driven nodes property.
Each item contributes one web-path segment to the selected node's
path. A node's submitted value is the /-joined path of its segments
(e.g. weddings/2026). Set the standard id attribute when a static
node needs a host-owned stable identity; otherwise the parent tree
derives one for the lifetime of the element instance.
To express a non-selectable grouping node (a header that can be
expanded but not chosen), set selectable="false". To mark a branch
that lazy-loads its children through the tree's loadChildren
callback, add the has-children attribute. Set icon to show an
Espalier sprite icon for the rendered node, and editable to expose
the tree's trailing edit affordance. The action flags (deletable,
movable-up, movable-down, cuttable, and paste-child-target)
expose the parent tree's built-in node action events. Assign arbitrary
host-owned payloads to the data property; there is no data
attribute because attribute values cannot reliably carry object
identity.
Attributes
<esp-tree-item> has the following attributes:
segment
segment has a default value of "".
The web-path segment this branch contributes to a selected node's full path. Required.
label
label has a default value of "".
Optional display label. Falls back to segment when empty.
icon
icon has a default value of "".
Optional icon name from the configured Espalier SVG sprite.
selectable
selectable has a default value of true.
Whether this node can be selected. Set selectable="false"
for grouping-only nodes that can expand but not be chosen.
editable
editable has a default value of false.
Whether this node exposes the tree's edit affordance.
deletable
deletable has a default value of false.
Whether this node exposes the parent tree's delete action.
movable-up
movable-up has a default value of false.
Whether this node exposes the parent tree's move-up action.
movable-down
movable-down has a default value of false.
Whether this node exposes the parent tree's move-down action.
cuttable
cuttable has a default value of false.
Whether this node exposes the parent tree's cut action.
paste-child-target
paste-child-target has a default value of false.
Whether this node exposes the parent tree's paste-as-child action.
has-children
has-children has a default value of false.
Marks a branch whose children are lazy-loaded by the tree's
loadChildren callback on first expand.
intent
intent has a default value of undefined.
The element's intent — its meaning: neutral
(no pin), or success, warning, danger, info — each pinned
to its fixed status family (blue for info), retunable per theme
via intents. On token-emitting controls a non-neutral intent pins the
filled-action pair to that family, derived over the governing
zone's theme; class-styled chrome (badges, callouts, status pills)
opts out of inline emission and renders its treatment from CSS
classes instead. An intent never repaints the surrounding zone,
which is what contexts are for. Removing the attribute restores
the element's own default intent.
context
context has a default value of undefined.
A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.
Methods
<esp-tree-item> has the following methods:
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
CSS Properties
<esp-tree-item> has the following CSS properties:
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).