Tree

Hierarchical tree view with expandable nodes.

Usage

<w-tree label="File browser">
  <w-slot item name="folder1" expandable>
    <div>
      <span>Documents</span>
      <w-slot item name="file1"><div>Report.pdf</div></w-slot>
      <w-slot item name="file2"><div>Notes.txt</div></w-slot>
    </div>
  </w-slot>
  <w-slot item name="folder2" expandable>
    <div>
      <span>Images</span>
      <w-slot item name="img1"><div>Photo.jpg</div></w-slot>
    </div>
  </w-slot>
</w-tree>

Props

Prop	Type	Default	Description
value	string	""	Selected item name
expanded	string	""	Comma-separated expanded item names
label	string	""	Accessible label

Slots

Slot	Element	Description
item	Container	Tree item (use name, optionally expandable)

Events

Event	Detail	Description
change	{ value }	Selection changed
expand	{ item, expanded }	Item expanded/collapsed

Keyboard

Key	Action
ArrowDown	Next visible item
ArrowUp	Previous visible item
ArrowRight	Expand or move to first child
ArrowLeft	Collapse or move to parent
Home	First item
End	Last visible item
Enter / Space	Select item

Styling

w-tree w-slot[item] > * {
  /* every tree item */
}

/* Expanded folder */
w-tree w-slot[item] > *[aria-expanded="true"] {
  /* open */
}

/* Selected item */
w-tree w-slot[item] > *[aria-selected="true"] {
  background: #eef2ff;
}

/* Indent by depth — aria-level is set automatically */
w-tree w-slot[item] > *[aria-level="2"] {
  padding-left: 1rem;
}
w-tree w-slot[item] > *[aria-level="3"] {
  padding-left: 2rem;
}

Selector	Targets
w-tree w-slot[item] > *[aria-selected="true"]	Selected item
w-tree w-slot[item] > *[aria-expanded="true"]	Expanded folder
w-tree w-slot[item] > *[aria-level="N"]	Items at depth N

Accessibility

• Container has role="tree"
• Items have role="treeitem" with aria-level
• Expandable items have aria-expanded
• aria-selected for selection state