# `PhiaUi.Components.Tree`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/tree.ex#L1)

Tree component for displaying hierarchical data with expandable/collapsible nodes.

Uses native HTML `<details>/<summary>` for zero-JavaScript expand/collapse.
The browser handles toggle natively — no Phoenix hooks required.

## Sub-components

| Function      | Element    | Purpose                                          |
|---------------|------------|--------------------------------------------------|
| `tree/1`      | `ul`       | Root container with `role="tree"`               |
| `tree_item/1` | `li`       | Leaf node or expandable branch                  |

## Example

    <.tree id="file-tree">
      <.tree_item label="src" expandable={true} expanded={true}>
        <.tree_item label="components" expandable={true}>
          <.tree_item label="button.ex" on_click="open_file" value="button.ex" />
        </.tree_item>
        <.tree_item label="app.ex" value="app.ex" />
      </.tree_item>
      <.tree_item label="mix.exs" value="mix.exs" />
    </.tree>

## Expandable Items

Pass `expandable={true}` to render a branch node using `<details>/<summary>`.
The `expanded` attribute controls the initial open/closed state server-side.

    <.tree_item label="src" expandable={true} expanded={true}>
      <.tree_item label="app.ex" />
    </.tree_item>

## Leaf Items

Leaf nodes can fire Phoenix events via `on_click` and pass a `value`:

    <.tree_item label="button.ex" on_click="open_file" value="button.ex" />

## Indentation

CSS handles indentation via `<ul role="group" class="ml-4">` nesting —
no `level` prop needed.

## Accessibility

- Root `<ul>` uses `role="tree"`
- Each `<li>` uses `role="treeitem"`
- Expandable items use `aria-expanded` to reflect open/closed state
- Nested item groups use `role="group"`
- Chevron SVG is presentational (no ARIA label needed)

# `tree`

Renders the tree root container.

The root element is a `<ul>` with `role="tree"` for ARIA semantics.

## Attributes

* `id` (`:string`) (required) - Unique ID for the root tree element.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. Extra HTML attributes forwarded to the root `<ul>`.
## Slots

* `inner_block` (required) - `tree_item/1` sub-components.

# `tree_item`

Renders a tree item — either a leaf node or an expandable branch.

**Leaf nodes** render a simple `<li>` with a clickable row. When `on_click`
is provided, the row fires a Phoenix event with `phx-value-value={@value}`.

**Branch nodes** (when `expandable={true}`) use `<details>/<summary>` for
zero-JavaScript expand/collapse. The `expanded` attribute sets the initial
state. Nested items are rendered inside `<ul role="group" class="ml-4">`.

## Attributes

* `label` (`:string`) (required) - Display text for the tree item.
* `expandable` (`:boolean`) - When true, renders a branch node using `<details>/<summary>`. Defaults to `false`.
* `expanded` (`:boolean`) - Initial open/closed state for expandable items (server-side). Defaults to `false`.
* `on_click` (`:string`) - Phoenix event name to fire when a leaf item is clicked. Defaults to `nil`.
* `value` (`:string`) - Value passed as `phx-value-value` on click events. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
## Slots

* `inner_block` - Nested `tree_item/1` components for expandable branches.

---

*Consult [api-reference.md](api-reference.md) for complete listing*