{
  "_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-foundation.v1.json",
  "apiVersion": "1.0.0",
  "name": "TreeGrid",
  "description": "A tree grid displays hierarchical tabular data with expandable rows.",
  "structure": {
    "name": "root",
    "restrict": [
      "table"
    ],
    "description": "Tree grid table",
    "attributes": {
      "static": {
        "role": "treegrid"
      }
    },
    "children": [
      {
        "name": "thead",
        "restrict": [
          "thead"
        ],
        "description": "Table header",
        "slot": {
          "name": "header"
        },
        "children": [
          {
            "name": "headerRow",
            "restrict": [
              "tr"
            ],
            "description": "Header row",
            "children": [
              {
                "name": "headerCell",
                "restrict": [
                  "th"
                ],
                "description": "Header cell (column header)",
                "children": [
                  {
                    "name": "headerCellAssistiveLabel",
                    "restrict": [
                      "span",
                      "div"
                    ],
                    "description": "Visually hidden label identifying the column or selection group"
                  },
                  {
                    "name": "headerCellAction",
                    "restrict": [
                      "div",
                      "a"
                    ],
                    "description": "Header action wrapper (sort link or select-all form)",
                    "children": [
                      {
                        "name": "headerCellActionAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Assistive prefix text for the action (e.g. 'Sort by:')"
                      },
                      {
                        "name": "headerCellActionLabelWrapper",
                        "restrict": [
                          "div"
                        ],
                        "description": "Wrapper aligning the action label with its trailing icon"
                      },
                      {
                        "name": "headerCellActionLabel",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visible column header label"
                      },
                      {
                        "name": "headerCellSortIconContainer",
                        "restrict": [
                          "span"
                        ],
                        "description": "Container for the sort indicator icon"
                      },
                      {
                        "name": "headerCellSortIcon",
                        "restrict": [
                          "svg"
                        ],
                        "description": "Sort indicator SVG"
                      },
                      {
                        "name": "headerCellSortIconUse",
                        "restrict": [
                          "use"
                        ],
                        "description": "Sort indicator SVG sprite reference"
                      },
                      {
                        "name": "headerSelectAllCheckbox",
                        "restrict": [
                          "div"
                        ],
                        "description": "Select-all checkbox wrapper inside the header action"
                      },
                      {
                        "name": "headerSelectAllInput",
                        "restrict": [
                          "input"
                        ],
                        "description": "Select-all checkbox input"
                      },
                      {
                        "name": "headerSelectAllLabel",
                        "restrict": [
                          "label"
                        ],
                        "description": "Select-all checkbox label"
                      },
                      {
                        "name": "headerSelectAllFaux",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visual checkbox surface for the select-all control"
                      },
                      {
                        "name": "headerSelectAllLabelText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually hidden text describing the select-all action"
                      }
                    ]
                  },
                  {
                    "name": "headerCellActionsMenuButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Trailing button that opens the column actions menu"
                  },
                  {
                    "name": "headerCellActionsMenuIcon",
                    "restrict": [
                      "svg"
                    ],
                    "description": "Icon inside the column actions menu button"
                  },
                  {
                    "name": "headerCellActionsMenuIconUse",
                    "restrict": [
                      "use"
                    ],
                    "description": "Sprite reference for the column actions menu icon"
                  },
                  {
                    "name": "headerCellActionsMenuAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visually hidden description of the column actions menu button"
                  },
                  {
                    "name": "headerCellResizer",
                    "restrict": [
                      "div"
                    ],
                    "description": "Column resizer wrapper"
                  },
                  {
                    "name": "headerCellResizerInput",
                    "restrict": [
                      "input"
                    ],
                    "description": "Resize handle input (range) controlling column width"
                  },
                  {
                    "name": "headerCellResizerHandle",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visible drag handle for the column resizer"
                  },
                  {
                    "name": "headerCellResizerDivider",
                    "restrict": [
                      "span"
                    ],
                    "description": "Divider line rendered inside the resize handle"
                  },
                  {
                    "name": "headerCellLabel",
                    "restrict": [
                      "div"
                    ],
                    "description": "Plain (non-actionable) header label, used in headless variants and actions column"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "tbody",
        "restrict": [
          "tbody"
        ],
        "description": "Table body with tree rows",
        "slot": {
          "name": "default"
        },
        "children": [
          {
            "name": "row",
            "restrict": [
              "tr"
            ],
            "description": "Data row in the tree grid",
            "children": [
              {
                "name": "selectCell",
                "restrict": [
                  "td"
                ],
                "description": "Leading cell containing the per-row selection checkbox"
              },
              {
                "name": "selectCheckbox",
                "restrict": [
                  "div"
                ],
                "description": "Per-row selection checkbox wrapper"
              },
              {
                "name": "selectCheckboxInput",
                "restrict": [
                  "input"
                ],
                "description": "Per-row selection checkbox input"
              },
              {
                "name": "selectCheckboxLabel",
                "restrict": [
                  "label"
                ],
                "description": "Per-row selection checkbox label"
              },
              {
                "name": "selectCheckboxFaux",
                "restrict": [
                  "span"
                ],
                "description": "Visual checkbox surface for the per-row selection control"
              },
              {
                "name": "selectCheckboxLabelText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden text for the per-row selection label"
              },
              {
                "name": "treeItemCell",
                "restrict": [
                  "th"
                ],
                "description": "Initializes a slds tree item"
              },
              {
                "name": "treeItemToggle",
                "restrict": [
                  "button"
                ],
                "description": "Button that expands or collapses the row's children"
              },
              {
                "name": "treeItemToggleIcon",
                "restrict": [
                  "svg"
                ],
                "description": "Chevron icon for the expand/collapse button"
              },
              {
                "name": "treeItemToggleIconUse",
                "restrict": [
                  "use"
                ],
                "description": "Sprite reference for the expand/collapse icon"
              },
              {
                "name": "treeItemToggleAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden description of the expand/collapse button"
              },
              {
                "name": "treeItemLabel",
                "restrict": [
                  "div"
                ],
                "description": "Wrapper around the primary cell label (truncates overflow)"
              },
              {
                "name": "treeItemLabelLink",
                "restrict": [
                  "a"
                ],
                "description": "Optional link rendered inside the primary cell label"
              },
              {
                "name": "cell",
                "restrict": [
                  "td"
                ],
                "description": "Standard data cell"
              },
              {
                "name": "cellInner",
                "restrict": [
                  "div"
                ],
                "description": "Wrapper around cell content (truncates overflow)"
              },
              {
                "name": "cellLink",
                "restrict": [
                  "a"
                ],
                "description": "Optional link rendered inside a data cell"
              },
              {
                "name": "rowActionsCell",
                "restrict": [
                  "td"
                ],
                "description": "Trailing cell hosting the per-row actions menu"
              },
              {
                "name": "rowActionsButton",
                "restrict": [
                  "button"
                ],
                "description": "Button that opens the per-row actions menu"
              },
              {
                "name": "rowActionsIcon",
                "restrict": [
                  "svg"
                ],
                "description": "Icon inside the per-row actions button"
              },
              {
                "name": "rowActionsIconUse",
                "restrict": [
                  "use"
                ],
                "description": "Sprite reference for the per-row actions icon"
              },
              {
                "name": "rowActionsAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden description of the per-row actions button"
              }
            ]
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "expandedRow",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether the row is expanded"
    },
    {
      "name": "rowSelected",
      "type": "boolean",
      "aria": "aria-selected",
      "description": "Whether the row is selected"
    },
    {
      "name": "rowLevel",
      "type": "enum",
      "aria": "aria-level",
      "description": "Depth of the row in the tree hierarchy (1-based)",
      "options": []
    },
    {
      "name": "rowPosition",
      "type": "enum",
      "aria": "aria-posinset",
      "description": "Position of the row within its sibling set",
      "options": []
    },
    {
      "name": "rowSetSize",
      "type": "enum",
      "aria": "aria-setsize",
      "description": "Total number of siblings in the row's set",
      "options": []
    },
    {
      "name": "multiSelectable",
      "type": "boolean",
      "aria": "aria-multiselectable",
      "description": "Whether the grid permits multiple row selection"
    },
    {
      "name": "columnSort",
      "type": "enum",
      "aria": "aria-sort",
      "description": "Sort direction for a sortable column header ('none', 'ascending', 'descending', 'other')",
      "options": []
    },
    {
      "name": "hasPopup",
      "type": "enum",
      "aria": "aria-haspopup",
      "description": "Indicates the button opens a popup (e.g. menu)",
      "options": []
    },
    {
      "name": "decorative",
      "type": "boolean",
      "aria": "aria-hidden",
      "description": "Hides decorative SVGs from assistive technologies"
    },
    {
      "name": "labelledBy",
      "type": "enum",
      "aria": "aria-labelledby",
      "description": "References the id(s) of the element(s) that label the input",
      "options": []
    },
    {
      "name": "label",
      "type": "enum",
      "aria": "aria-label",
      "description": "Accessible label for the grid or for an unlabelled control",
      "options": []
    },
    {
      "name": "cellLabel",
      "type": "enum",
      "description": "Column label echoed on a cell, used as a fallback header in responsive layouts",
      "options": []
    },
    {
      "name": "rowHovered",
      "type": "boolean",
      "description": "Whether the component is in the rowHovered state"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "treegrid-role",
        "description": "Table must have role='treegrid'"
      },
      {
        "id": "grid-label",
        "description": "Table must have an accessible name via aria-label or aria-labelledby"
      },
      {
        "id": "aria-level",
        "description": "Rows must have aria-level indicating depth in the hierarchy"
      },
      {
        "id": "aria-posinset-setsize",
        "description": "Rows must declare their aria-posinset and aria-setsize relative to their sibling set"
      },
      {
        "id": "aria-expanded",
        "description": "Expandable rows must have aria-expanded; leaf rows omit the attribute"
      },
      {
        "id": "aria-selected",
        "description": "Selectable rows must reflect their selection state via aria-selected"
      },
      {
        "id": "aria-multiselectable",
        "description": "When multi-select is enabled, the table must declare aria-multiselectable='true'"
      },
      {
        "id": "gridcell-role",
        "description": "Data cells must declare role='gridcell'"
      },
      {
        "id": "sort-state",
        "description": "Sortable column headers must reflect their current state via aria-sort"
      },
      {
        "id": "popup-button",
        "description": "Buttons that open menus must declare aria-haspopup='true'"
      },
      {
        "id": "decorative-icons",
        "description": "Decorative SVG icons must declare aria-hidden='true'"
      },
      {
        "id": "control-labels",
        "description": "Per-row checkboxes must reference an accessible label via aria-labelledby"
      }
    ]
  }
}