Tree Nuevo

El componente hp-tree implementa el patrón WAI-ARIA TreeView para visualizar datos jerárquicos con nodos expandibles, selección simple o múltiple y navegación completa por teclado.

Demostración

Sin estilos (solo base.css)

Así se ve hp-tree usando únicamente @headless-primitives/utils/base.css. La expansión de nodos, navegación por teclado y selección funcionan completamente.

Item 1 Hijo 1.1Item 2

Con estilos personalizados

📁 src 📁 components 📄 button.ts📄 dialog.ts📄 utils.ts📄 README.md📄 package.json

index.html

<hp-tree>
  <hp-tree-item value="src">
    📁 src
    <hp-tree-group>
      <hp-tree-item value="index">📄 index.ts</hp-tree-item>
      <hp-tree-item value="utils">📄 utils.ts</hp-tree-item>
    </hp-tree-group>
  </hp-tree-item>
  <hp-tree-item value="readme">📄 README.md</hp-tree-item>
</hp-tree>

style.css

hp-tree-group {
  display: block;
  padding-left: 1.25rem;
}
hp-tree-group[aria-hidden="true"] {
  display: none;
}
hp-tree-item {
  display: block;
  padding: 4px 8px;
  cursor: pointer;
}
hp-tree-item[aria-selected="true"] {
  background: #eff6ff;
  color: #3b82f6;
}
hp-tree-item:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

Instalación

pnpm

pnpm add @headless-primitives/tree

npm

npm install @headless-primitives/tree

yarn

yarn add @headless-primitives/tree

bun

bun add @headless-primitives/tree

Features

• ⌨️ Flechas para navegar y expandir/colapsar, Home, End, Enter/Space.
• ♿️ role="tree", role="treeitem", aria-expanded, aria-selected automáticos.
• 🎨 Sin estilos visuales (Headless).
• 🔀 Selección simple o múltiple (multi-select).
• 🌳 Anidamiento ilimitado con hp-tree-group.

Anatomía

<hp-tree>
  <hp-tree-item value="parent">
    Parent
    <hp-tree-group>
      <hp-tree-item value="child-1">Child 1</hp-tree-item>
      <hp-tree-item value="child-2">Child 2</hp-tree-item>
    </hp-tree-group>
  </hp-tree-item>
  <hp-tree-item value="leaf">Leaf Item</hp-tree-item>
</hp-tree>

API Reference

hp-tree

Contenedor raíz del árbol.

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
selected	string	""	Valor(es) seleccionado(s). En multi-select, separados por coma.
multi-select	boolean	false	Habilita selección múltiple.

Métodos

Método	Descripción
getSelectedValues()	Retorna un Set<string> con los valores seleccionados.

Eventos

Evento	Detalle	Descripción
hp-select	{ value, item, selectedValues? }	Cuando se selecciona un item.

Atributos ARIA gestionados automáticamente

• role="tree" — Asignado si no se especifica.
• aria-multiselectable — Presente cuando multi-select es true.

hp-tree-item

Nodo del árbol (hoja o padre expandible).

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
value	string	""	Identificador único del nodo.
disabled	boolean	false	Deshabilita el nodo.
selected	boolean	false	Estado de selección.
expanded	boolean	false	Estado de expansión (solo si tiene hp-tree-group).

Métodos

Método	Descripción
isExpandable()	true si tiene un hp-tree-group hijo.
getGroup()	Retorna el hp-tree-group hijo.
getParentItem()	Retorna el hp-tree-item padre.

Eventos

Evento	Detalle	Descripción
hp-expand	{ value, item }	Cuando el nodo se expande.
hp-collapse	{ value, item }	Cuando el nodo se colapsa.

Atributos ARIA gestionados automáticamente

• role="treeitem" — Asignado si no se especifica.
• aria-expanded — Presente solo en nodos expandibles.
• aria-selected — "true" | "false".
• aria-disabled — Sincronizado con disabled.
• data-state — "open" | "closed" | "leaf".
• tabindex — Roving: 0 para seleccionado, -1 para los demás.

hp-tree-group

Contenedor de nodos hijos (sub-tree). Renderizado por el nodo padre.

Atributos ARIA gestionados automáticamente

• role="group" — Siempre presente.

Accesibilidad

Adhiere al patrón WAI-ARIA APG para TreeView.

Navegación por teclado

Tecla	Acción
ArrowDown	Mueve al siguiente nodo visible.
ArrowUp	Mueve al nodo visible anterior.
ArrowRight	Expande (cerrado) o mueve al primer hijo (abierto).
ArrowLeft	Colapsa (abierto) o mueve al nodo padre (cerrado/hoja).
Home	Mueve al primer nodo.
End	Mueve al último nodo visible.
Enter / Space	Selecciona y/o expande/colapsa.