{
  "tag": "ed-tree-item",
  "kind": "component",
  "summary": "A tree item serves as a hierarchical node that lives inside a [tree](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tree).",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tree-item/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tree-item/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-checkbox",
    "ed-icon",
    "ed-progress-ring"
  ],
  "use": [
    "One node in a hierarchy, such as an account group or department, that the user can select and expand to see its children",
    "A branch whose children load only when opened, such as the accounts below a large account group",
    "A node with an icon, a short description and a trailing action, so users tell folder from file and act on it directly"
  ],
  "notFor": [
    {
      "when": "An entry in the product navigation",
      "instead": "a [Side Menu Item](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu-item)"
    },
    {
      "when": "Used outside a tree as a standalone list row",
      "instead": "a [List Item](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/list-item)"
    }
  ],
  "rules": [],
  "api": {
    "attributes": [
      {
        "name": "selected",
        "property": "selected",
        "type": "boolean",
        "default": "false",
        "description": "Draws the tree item in a selected state."
      },
      {
        "name": "lazy",
        "property": "lazy",
        "type": "boolean",
        "default": "false",
        "description": "Enables lazy loading behavior."
      },
      {
        "name": "expanded",
        "property": "expanded",
        "type": "boolean",
        "default": "false",
        "description": "Expands the item."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "default": "false",
        "description": "Disables the item."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "getChildrenItems",
        "parameters": [
          {
            "name": "{ includeDisabled = true }",
            "type": "{ includeDisabled?: boolean }"
          }
        ],
        "returns": "EdTreeItem[]",
        "description": "Gets all the nested tree items in this node."
      },
      {
        "name": "isExpandableItem",
        "static": true,
        "parameters": [
          {
            "name": "node",
            "type": "Node"
          }
        ],
        "returns": "node is EdExpandableItem",
        "description": "Determines whether a node is an expandable item — replaces brittle `role=`/tag sniffing."
      }
    ],
    "events": [
      {
        "name": "ed-expand",
        "react": "onEdExpand",
        "description": "Emitted before the tree item expands. Cancelable; calling `preventDefault()` keeps it collapsed — useful when a lazy load fails."
      },
      {
        "name": "ed-after-expand",
        "react": "onEdAfterExpand",
        "description": "Emitted after the tree item expands and all animations are complete."
      },
      {
        "name": "ed-collapse",
        "react": "onEdCollapse",
        "description": "Emitted before the tree item collapses. Cancelable; calling `preventDefault()` keeps it expanded."
      },
      {
        "name": "ed-after-collapse",
        "react": "onEdAfterCollapse",
        "description": "Emitted after the tree item collapses and all animations are complete."
      },
      {
        "name": "ed-lazy-change",
        "react": "onEdLazyChange",
        "description": "Emitted when the tree item's lazy state changes."
      },
      {
        "name": "ed-lazy-load",
        "react": "onEdLazyLoad",
        "description": "Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The default slot."
      },
      {
        "name": "start",
        "description": "Content placed before the label, e.g. an icon."
      },
      {
        "name": "end",
        "description": "Content placed after the label, e.g. an action button or badge."
      },
      {
        "name": "description",
        "description": "Secondary text rendered below the label. Stays at default styling regardless of selection state (does not adopt the active or path-highlight color/weight)."
      },
      {
        "name": "expand-icon",
        "description": "The icon to show when the tree item is expanded."
      },
      {
        "name": "collapse-icon",
        "description": "The icon to show when the tree item is collapsed."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-show-duration",
        "default": "var(--ed-transition-normal)",
        "description": "The animation duration when expanding tree items."
      },
      {
        "name": "--ed-hide-duration",
        "default": "var(--ed-transition-normal)",
        "description": "The animation duration when collapsing tree items."
      },
      {
        "name": "--ed-tree-item-background",
        "default": "var(--ed-color-surface-default)",
        "description": "The background color the tree item sits on. Hover and active states are mixed on top of this value, so override it when placing the tree on a non-default surface (e.g. a raised panel or card) to keep hover/active feedback coherent."
      }
    ],
    "parts": [
      {
        "name": "base",
        "description": "The component's base wrapper."
      },
      {
        "name": "item-wrapper",
        "description": "The row as a whole: the indentation and the item side by side."
      },
      {
        "name": "item",
        "description": "The tree item's container. This element wraps everything except slotted tree item children."
      },
      {
        "name": "indentation",
        "description": "The tree item's indentation container."
      },
      {
        "name": "expand-button",
        "description": "The container that wraps the tree item's expand button and spinner."
      },
      {
        "name": "spinner",
        "description": "The spinner that shows when a lazy tree item is in the loading state."
      },
      {
        "name": "spinner__base",
        "description": "The spinner's base part."
      },
      {
        "name": "start",
        "description": "The container for the `start` slot, rendered before the label."
      },
      {
        "name": "text",
        "description": "The vertical container that wraps the label and the description."
      },
      {
        "name": "label",
        "description": "The tree item's label."
      },
      {
        "name": "description",
        "description": "The container for the `description` slot, rendered below the label."
      },
      {
        "name": "end",
        "description": "The container for the `end` slot, rendered after the label."
      },
      {
        "name": "children",
        "description": "The container that wraps the tree item's nested children."
      },
      {
        "name": "checkbox",
        "description": "The checkbox that shows when using multiselect."
      },
      {
        "name": "checkbox__base",
        "description": "The checkbox's exported `base` part."
      },
      {
        "name": "checkbox__control",
        "description": "The checkbox's exported `control` part."
      },
      {
        "name": "checkbox__checked-icon",
        "description": "The checkbox's exported `checked-icon` part."
      },
      {
        "name": "checkbox__indeterminate-icon",
        "description": "The checkbox's exported `indeterminate-icon` part."
      },
      {
        "name": "checkbox__label",
        "description": "The checkbox's exported `label` part."
      }
    ],
    "states": [
      {
        "name": "disabled",
        "description": "Applied when the tree item is disabled."
      },
      {
        "name": "expanded",
        "description": "Applied when the tree item is expanded."
      },
      {
        "name": "indeterminate",
        "description": "Applied when the selection is indeterminate."
      },
      {
        "name": "selected",
        "description": "Applied when the tree item is selected."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/tree-item/tree-item.js';",
  "react": {
    "component": "EdTreeItem",
    "import": "import EdTreeItem from '@eurodata/eurodata-ui/dist/react/tree-item/index.js';"
  }
}