{
  "tag": "ed-tree",
  "kind": "component",
  "summary": "Trees allow you to display a hierarchical list of selectable [tree items](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tree-item). Items with children can be expanded and collapsed as desired by the user.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tree/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tree/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-tree-item"
  ],
  "use": [
    "Browsing and selecting items in a genuine parent-child hierarchy — nested categories, folder structures, or records that contain other records — where users expand only the branches they care about",
    "A hierarchy that is meaningful in itself: users need to see and understand where an item sits within its parent",
    "Browsing a chart of accounts, an organization structure or a folder tree and expanding only the branches of interest",
    "Selecting several nodes of a hierarchy with checkboxes, such as the departments to include in a report",
    "Loading the children of a branch only when the user opens it, because the full hierarchy is too large to fetch at once"
  ],
  "notFor": [
    {
      "when": "A flat, non-hierarchical set of items",
      "instead": "a plain list"
    },
    {
      "when": "Comparing records field-by-field or scanning tabular data across columns",
      "instead": "a [Data Grid](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/data-grid) or a plain `<table>`"
    },
    {
      "when": "The product's primary navigation skeleton",
      "instead": "a [Side Menu](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu)"
    }
  ],
  "rules": [
    {
      "id": "tree/shallow-depth",
      "rule": "Keep the visible hierarchy shallow — two levels, three at most. Never nest beyond three levels; reconsider the underlying structure rather than nesting deeper.",
      "why": "Deep trees add cognitive load and cause horizontal overflow: they force users to remember where they are, push nested items far to the right, and risk cutting off labels.",
      "check": "error"
    },
    {
      "id": "tree/expand-relevant",
      "rule": "Start with the branches that lead to relevant content already expanded, so users are not forced to dig for what matters."
    },
    {
      "id": "tree/expand-all-control",
      "rule": "Pair the expand/collapse affordance with a clearly labeled \"Expand all / Collapse all\" control on large trees.",
      "why": "The small chevrons alone are easily overlooked."
    },
    {
      "id": "tree/type-icon",
      "rule": "Place an icon before the label to signal a node's type (folder vs. file), always alongside the text label, never instead of it.",
      "check": "error"
    },
    {
      "id": "tree/multi-select",
      "rule": "Use checkbox multi-selection when users pick several items at once. Don't sync the parent checkbox yourself — the tree reflects its children's combined state on it.",
      "check": "warning"
    },
    {
      "id": "tree/row-action-labels",
      "rule": "Name the object in any per-row action label — especially destructive ones — e.g. \"Delete folder 'Invoices'\", never a generic label such as \"Delete\" or \"Edit\" without naming the object it acts on.",
      "check": "warning"
    },
    {
      "id": "tree/icon-only-row-actions",
      "rule": "Give an icon-only row action a tooltip and a screen-reader label, as [Button](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button)'s `button/text-label` requires for row actions in a tree.",
      "check": "error"
    },
    {
      "id": "tree/nested-controls-own-keys",
      "rule": "Don't add your own key handling to keep the tree off <kbd>Enter</kbd> and <kbd>Space</kbd> on a focusable element you put inside an item — a link, a button — the tree does it: the element owns those keys while it has focus, and the tree acts on them only when the item itself is focused, so the two do not compete.",
      "check": "warning"
    },
    {
      "id": "tree/lazy-load",
      "rule": "Load a branch's contents on demand when they are expensive to fetch. Don't add a loading indicator of your own — the item shows its spinner until they arrive.",
      "check": "warning"
    },
    {
      "id": "tree/no-right-click-only",
      "rule": "Offer right-click shortcuts only in addition to visible controls — never hide the only path to an action behind a right-click menu."
    },
    {
      "id": "tree/preserve-expanded",
      "rule": "Never collapse branches the user opened deeper down when they toggle an ancestor — preserve their expanded state."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "selection",
        "property": "selection",
        "type": "'single' | 'multiple' | 'leaf'",
        "default": "'single'",
        "description": "The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple\ndisplays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected,\nwhile parent nodes only expand and collapse."
      },
      {
        "name": "hide-indent-guides",
        "property": "hideIndentGuides",
        "type": "boolean",
        "default": "false",
        "description": "Hides the vertical guide lines between nested items. By default the guides are shown."
      },
      {
        "name": "chevron-placement",
        "property": "chevronPlacement",
        "type": "'start' | 'end'",
        "default": "'start'",
        "description": "Where to render the expand/collapse chevron — at the row's start (default) or end."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [],
    "events": [
      {
        "name": "ed-selection-change",
        "react": "onEdSelectionChange",
        "type": "{ selection: EdTreeItem[] }",
        "description": "Emitted when a tree item is selected or deselected."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The default slot."
      },
      {
        "name": "expand-icon",
        "description": "The icon to show when the tree item is expanded. Works best with `<ed-icon>`."
      },
      {
        "name": "collapse-icon",
        "description": "The icon to show when the tree item is collapsed. Works best with `<ed-icon>`."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-tree-width",
        "default": "15.625rem",
        "description": "The width of the tree."
      },
      {
        "name": "--ed-tree-indent-size",
        "description": "The size of the indentation for nested items. Derived from indent-guide geometry so the highlight stays flush against the guide regardless of font-size; override only when the indent column needs to grow or shrink visibly (and accept that the highlight will then float)."
      },
      {
        "name": "--ed-tree-indent-guide-color",
        "default": "var(--ed-color-border)",
        "description": "The color of the indentation line."
      },
      {
        "name": "--ed-tree-indent-guide-active-color",
        "default": "var(--ed-color-brand-fill-normal)",
        "description": "The color of the indentation line segment next to a selected item."
      },
      {
        "name": "--ed-tree-indent-guide-offset",
        "default": "0",
        "description": "Reserved for vertical offset of the indent guide; currently unused with per-item rendering and kept for future use."
      },
      {
        "name": "--ed-tree-indent-guide-style",
        "default": "solid",
        "description": "The style of the indentation line, e.g. solid, dotted, dashed."
      },
      {
        "name": "--ed-tree-indent-guide-width",
        "default": "var(--ed-border-width-2)",
        "description": "The width of the indentation line. Set to 0 (or use the `hide-indent-guides` attribute) to hide the guides entirely."
      }
    ],
    "parts": [
      {
        "name": "base",
        "description": "The component's base wrapper."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/tree/tree.js';",
  "react": {
    "component": "EdTree",
    "import": "import EdTree from '@eurodata/eurodata-ui/dist/react/tree/index.js';"
  }
}