Tree

<rhx-tree aria-label="File explorer">
    <rhx-tree-item rhx-label="Documents" rhx-expanded>
        <rhx-tree-item>README.md</rhx-tree-item>
        <rhx-tree-item>LICENSE</rhx-tree-item>
        <rhx-tree-item rhx-label="Reports">
            <rhx-tree-item>Q1 Report.pdf</rhx-tree-item>
            <rhx-tree-item>Q2 Report.pdf</rhx-tree-item>
        </rhx-tree-item>
    </rhx-tree-item>
    <rhx-tree-item rhx-label="Images">
        <rhx-tree-item>logo.png</rhx-tree-item>
        <rhx-tree-item>banner.jpg</rhx-tree-item>
    </rhx-tree-item>
</rhx-tree>

<rhx-tree rhx-selection="multiple" aria-label="Multi-select tree">
    <rhx-tree-item>Apple</rhx-tree-item>
    <rhx-tree-item>Banana</rhx-tree-item>
    <rhx-tree-item>Cherry</rhx-tree-item>
    <rhx-tree-item rhx-label="Citrus">
        <rhx-tree-item>Orange</rhx-tree-item>
        <rhx-tree-item>Lemon</rhx-tree-item>
        <rhx-tree-item>Grapefruit</rhx-tree-item>
    </rhx-tree-item>
</rhx-tree>

<rhx-tree rhx-selection="leaf" aria-label="Leaf selection tree">
    <rhx-tree-item rhx-label="Frontend" rhx-expanded>
        <rhx-tree-item>React</rhx-tree-item>
        <rhx-tree-item>Vue</rhx-tree-item>
        <rhx-tree-item>Angular</rhx-tree-item>
    </rhx-tree-item>
    <rhx-tree-item rhx-label="Backend">
        <rhx-tree-item>ASP.NET Core</rhx-tree-item>
        <rhx-tree-item>Express</rhx-tree-item>
    </rhx-tree-item>
</rhx-tree>

<rhx-tree aria-label="States example">
    <rhx-tree-item rhx-label="Available" rhx-expanded>
        <rhx-tree-item rhx-selected>Selected item</rhx-tree-item>
        <rhx-tree-item>Normal item</rhx-tree-item>
    </rhx-tree-item>
    <rhx-tree-item rhx-label="Locked" rhx-disabled>
        <rhx-tree-item>Cannot interact</rhx-tree-item>
    </rhx-tree-item>
</rhx-tree>

<rhx-tree aria-label="Lazy-loaded tree">
    <rhx-tree-item rhx-label="Lazy Folder"
                   rhx-lazy
                   hx-get="/Docs/Components/Tree?handler=TreeChildren&folder=root"
                   hx-target="find .rhx-tree__children"
                   hx-swap="innerHTML"
                   hx-trigger="toggle once">
    </rhx-tree-item>
    <rhx-tree-item>Static leaf item</rhx-tree-item>
</rhx-tree>