{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "Trees",
  "description": "A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed.",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Tree container",
    "children": [
      {
        "name": "heading",
        "restrict": [
          "h4"
        ],
        "description": "Initializes a slds tree group header",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "heading"
        },
        "attributes": {
          "static": {
            "class": "slds-tree__group-header"
          }
        }
      },
      {
        "name": "list",
        "restrict": [
          "ul"
        ],
        "description": "Initializes a slds tree",
        "attributes": {
          "static": {
            "role": "tree",
            "class": "slds-tree"
          },
          "bound": {
            "aria-labelledby": {
              "prop": "headingId"
            }
          }
        },
        "children": [
          {
            "name": "item",
            "restrict": [
              "li"
            ],
            "description": "Tree item",
            "repeats": true,
            "attributes": {
              "static": {
                "role": "treeitem"
              },
              "bound": {
                "aria-level": {
                  "prop": "level"
                },
                "aria-expanded": {
                  "prop": "isExpanded"
                },
                "aria-selected": {
                  "prop": "isSelected"
                },
                "aria-disabled": {
                  "prop": "isDisabled"
                },
                "aria-label": {
                  "prop": "itemLabel"
                }
              }
            },
            "children": [
              {
                "name": "itemWrapper",
                "restrict": [
                  "div"
                ],
                "description": "Initializes a slds tree item",
                "children": [
                  {
                    "name": "expandButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Expand/collapse toggle button. Always rendered; hidden visually for leaf items.",
                    "attributes": {
                      "static": {
                        "aria-hidden": "true",
                        "tabindex": "-1",
                        "class": "slds-button slds-button_icon slds-m-right_x-small"
                      },
                      "bound": {
                        "title": {
                          "prop": "expandTitle"
                        }
                      }
                    },
                    "children": [
                      {
                        "name": "expandIcon",
                        "description": "Chevron icon graphic for the expand button",
                        "component": "PrimitiveIcon",
                        "attributes": {
                          "static": {
                            "class": "slds-button__icon slds-button__icon_small"
                          }
                        },
                        "children": [
                          {
                            "name": "expandIconUse"
                          }
                        ]
                      },
                      {
                        "name": "expandAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Assistive-only label describing the expand action",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ],
                    "modifiers": [
                      {
                        "name": "hidden",
                        "attribute": "class",
                        "value": "slds-hidden",
                        "description": "Visually hides the expand control for leaf items"
                      }
                    ]
                  },
                  {
                    "name": "flexiTruncate",
                    "restrict": [
                      "span"
                    ],
                    "description": "Flex wrapper allowing the label and meta text to truncate",
                    "children": [
                      {
                        "name": "label",
                        "restrict": [
                          "span"
                        ],
                        "description": "The label text of a tree item or tree branch",
                        "slot": {
                          "name": "itemLabel"
                        },
                        "attributes": {
                          "static": {
                            "class": "slds-tree__item-label slds-truncate"
                          }
                        }
                      },
                      {
                        "name": "metaText",
                        "restrict": [
                          "span"
                        ],
                        "description": "The meta text or secondary text of a tree item",
                        "renderWhen": "slotFilled",
                        "slot": {
                          "name": "metaText"
                        },
                        "children": [
                          {
                            "name": "metaPrefix",
                            "restrict": [
                              "span"
                            ],
                            "description": "Assistive-only separator (e.g., ':') announced before meta text",
                            "attributes": {
                              "static": {
                                "class": "slds-assistive-text"
                              }
                            }
                          }
                        ],
                        "attributes": {
                          "static": {
                            "class": "slds-tree__item-meta slds-truncate"
                          }
                        }
                      }
                    ],
                    "attributes": {
                      "static": {
                        "class": "slds-has-flexi-truncate"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-tree__item"
                  }
                }
              },
              {
                "name": "children",
                "restrict": [
                  "ul"
                ],
                "description": "Child items",
                "attributes": {
                  "static": {
                    "role": "group"
                  }
                },
                "slot": {
                  "name": "children"
                }
              }
            ]
          }
        ]
      }
    ],
    "attributes": {
      "static": {
        "class": "slds-tree_container"
      }
    }
  },
  "states": [
    {
      "name": "expanded",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether a branch is expanded"
    },
    {
      "name": "selected",
      "type": "boolean",
      "aria": "aria-selected",
      "description": "Whether an item is selected"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether a tree item is disabled"
    },
    {
      "name": "hovered",
      "type": "boolean",
      "description": "Whether a tree item is being hovered"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "tree-role",
        "description": "Tree must have role='tree' with treeitem children"
      },
      {
        "id": "aria-expanded",
        "description": "Expandable items must have aria-expanded"
      },
      {
        "id": "keyboard-navigation",
        "description": "Arrow keys should navigate between items and expand/collapse branches"
      },
      {
        "id": "aria-level",
        "description": "Items should have aria-level indicating depth"
      },
      {
        "id": "aria-disabled",
        "description": "Disabled items must communicate state via aria-disabled"
      }
    ]
  },
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2016-03-01",
      "genReady": false,
      "lbc": "lightning-tree"
    }
  },
  "cssSource": "./trees.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "selected",
      "class": "slds-is-selected"
    },
    {
      "state": "expanded",
      "class": "slds-is-expanded"
    },
    {
      "state": "hovered",
      "class": "slds-is-hovered"
    }
  ]
}