HyTreeItem

A single row inside an hy-tree. Renders a chevron, an optional leading icon slot, the label (or default slot), an optional trailing slot, and a hidden-by-default children slot that unhides when expanded is true.

Items are focus-managed by the parent tree via roving tabindex — call setTabIndex(0) to mark the item as the tab target, and focus() to move keyboard focus. The host element carries role="treeitem" and reflects aria-expanded, aria-selected, aria-disabled.

Click zones depend on the parent tree's expand-on policy (forwarded onto each item). The chevron always toggles expansion and stops propagation. The row's click does one of three things, layered:

1. Non-selectable rows with children always expand on row click — their row has no rival action, so the chevron-only fallback would leave the row dead.
2. With expand-on='row' (and the row is selectable + has children), the row click both selects AND expands.
3. Otherwise ('chevron' default, or 'double-click'), the row click just selects; expansion goes through the chevron or dblclick.

Level, aria-level, aria-posinset, and aria-setsize are written by the parent hy-tree during its DOM walk — don't set them manually on an item. The item detects whether it has children by observing its own children slot; it does not read across the DOM.

Events

• tree-item-click - { value, item, originalEvent } — bubbles to parent tree.
• expand - { value, item } — bubbles to parent tree.
• collapse - { value, item } — bubbles to parent tree.

Slots

• default - Label content when the label prop is empty.
• leading - Leading icon or avatar.
• trailing - Trailing content (value preview, copy button, badge).
• children - Nested hy-tree-item elements.
• expand-icon - Override the default chevron icon.

Methods

setTabIndex()

Sets tabindex on the focusable row element AND mirrors the tab-stop state to the host's reflected [active] attribute so the focus trap (and CSS) can see which item is the current tab stop. Called by the parent tree's roving-tabindex controller.

focus()

Imperative focus — delegates to the row element.

toggleExpand()

Toggle expansion. No-op if the item has no children or is disabled.