{
  "element": "nve-tree",
  "entrypoint": "@nvidia-elements/core/tree/tree.examples.json",
  "items": [
    {
      "id": "tree",
      "name": "Default",
      "template": "<nve-tree behavior-expand>\n  <nve-tree-node expanded>\n    node 1\n    <nve-tree-node>node 1-1</nve-tree-node>\n    <nve-tree-node>node 1-2</nve-tree-node>\n    <nve-tree-node>\n      node 1-3\n      <nve-tree-node>node 1-3-1</nve-tree-node>\n      <nve-tree-node>node 1-3-2</nve-tree-node>\n      <nve-tree-node>node 1-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 2\n    <nve-tree-node>node 2-1</nve-tree-node>\n    <nve-tree-node>node 2-2</nve-tree-node>\n    <nve-tree-node>node 2-3</nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 3\n    <nve-tree-node>node 3-1</nve-tree-node>\n    <nve-tree-node>node 3-2</nve-tree-node>\n    <nve-tree-node>\n      node 3-3\n      <nve-tree-node>node 3-3-1</nve-tree-node>\n      <nve-tree-node>node 3-3-2</nve-tree-node>\n      <nve-tree-node>node 3-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n</nve-tree>\n",
      "summary": "Basic tree component with expandable nodes, providing hierarchical data display and navigation for structured content organization.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "tree-border",
      "name": "Border",
      "template": "<nve-tree behavior-expand border>\n  <nve-tree-node expanded>\n    node 1\n    <nve-tree-node>node 1-1</nve-tree-node>\n    <nve-tree-node>node 1-2</nve-tree-node>\n    <nve-tree-node>\n      node 1-3\n      <nve-tree-node>node 1-3-1</nve-tree-node>\n      <nve-tree-node>node 1-3-2</nve-tree-node>\n      <nve-tree-node>node 1-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 2\n    <nve-tree-node>node 2-1</nve-tree-node>\n    <nve-tree-node>node 2-2</nve-tree-node>\n    <nve-tree-node>node 2-3</nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 3\n    <nve-tree-node>node 3-1</nve-tree-node>\n    <nve-tree-node>node 3-2</nve-tree-node>\n    <nve-tree-node>\n      node 3-3\n      <nve-tree-node>node 3-3-1</nve-tree-node>\n      <nve-tree-node>node 3-3-2</nve-tree-node>\n      <nve-tree-node>node 3-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n</nve-tree>\n",
      "summary": "Tree with border styling for enhanced visual separation and container definition, improving content structure perception.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "tree-selectable",
      "name": "Selectable",
      "template": "<nve-tree selectable=\"single\" behavior-expand behavior-select border>\n  <nve-tree-node expanded>\n    node 1\n    <nve-tree-node selected>node 1-1</nve-tree-node>\n    <nve-tree-node>node 1-2</nve-tree-node>\n    <nve-tree-node>\n      node 1-3\n      <nve-tree-node>node 1-3-1</nve-tree-node>\n      <nve-tree-node>node 1-3-2</nve-tree-node>\n      <nve-tree-node>node 1-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 2\n    <nve-tree-node>node 2-1</nve-tree-node>\n    <nve-tree-node>node 2-2</nve-tree-node>\n    <nve-tree-node>node 2-3</nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 3\n    <nve-tree-node>node 3-1</nve-tree-node>\n    <nve-tree-node>node 3-2</nve-tree-node>\n    <nve-tree-node>\n      node 3-3\n      <nve-tree-node>node 3-3-1</nve-tree-node>\n      <nve-tree-node>node 3-3-2</nve-tree-node>\n      <nve-tree-node>node 3-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n</nve-tree>\n",
      "summary": "Single-selection tree for choosing one item from hierarchical options, enabling focused navigation and content selection.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "tree-selectable-multiple",
      "name": "SelectableMultiple",
      "template": "<nve-tree selectable=\"multi\" behavior-expand behavior-select border>\n  <nve-tree-node expanded>\n    node 1\n    <nve-tree-node>node 1-1</nve-tree-node>\n    <nve-tree-node selected>node 1-2</nve-tree-node>\n    <nve-tree-node expanded>\n      node 1-3\n      <nve-tree-node>node 1-3-1</nve-tree-node>\n      <nve-tree-node>node 1-3-2</nve-tree-node>\n      <nve-tree-node>node 1-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 2\n    <nve-tree-node>node 2-1</nve-tree-node>\n    <nve-tree-node>node 2-2</nve-tree-node>\n    <nve-tree-node>node 2-3</nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 3\n    <nve-tree-node>node 3-1</nve-tree-node>\n    <nve-tree-node>node 3-2</nve-tree-node>\n    <nve-tree-node>\n      node 3-3\n      <nve-tree-node>node 3-3-1</nve-tree-node>\n      <nve-tree-node>node 3-3-2</nve-tree-node>\n      <nve-tree-node>node 3-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n</nve-tree>\n",
      "summary": "Multi-selection tree for choosing many items from hierarchical options, enabling bulk operations and comprehensive content management.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "tree-select-event",
      "name": "SelectEvent",
      "template": "<div nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:md\">\n    <nve-tree id=\"select-event-tree\" selectable=\"single\" behavior-expand behavior-select border>\n      <nve-tree-node expanded>\n        Documents\n        <nve-tree-node>Annual Report.pdf</nve-tree-node>\n        <nve-tree-node>Budget.xlsx</nve-tree-node>\n        <nve-tree-node expanded>\n          Projects\n          <nve-tree-node>Project Alpha</nve-tree-node>\n          <nve-tree-node>Project Beta</nve-tree-node>\n          <nve-tree-node>Project Gamma</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        Images\n        <nve-tree-node>photo-001.jpg</nve-tree-node>\n        <nve-tree-node>photo-002.jpg</nve-tree-node>\n        <nve-tree-node>screenshot.png</nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n    <div nve-layout=\"column gap:sm\">\n      <p nve-text=\"body sm\"><strong>Selected:</strong> <span id=\"selected-node\">None</span></p>\n      <p nve-text=\"body sm\"><strong>History:</strong></p>\n      <ul id=\"selection-history\" nve-text=\"body sm\">\n        <li>No selections yet</li>\n      </ul>\n    </div>\n  </div>\n</div>\n<script type=\"module\">\n  const tree = document.querySelector(\"#select-event-tree\");\n  const selectedDisplay = document.querySelector(\"#selected-node\");\n  const historyList = document.querySelector(\"#selection-history\");\n  const history = [];\n  tree.addEventListener(\"select\", (e) => {\n    const node = e.detail;\n    const nodeText = node.textContent?.trim().split(\"\\n\")[0] ?? \"Unknown\";\n    selectedDisplay.textContent = nodeText;\n    history.push(nodeText);\n    if (history.length > 5) history.shift();\n    historyList.innerHTML = history.map((item) => \"<li>\" + item + \"</li>\").join(\"\");\n  });\n</script>\n",
      "summary": "Interactive selection handling using the select event, with callbacks for node selection changes.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "tree-highlight",
      "name": "Highlight",
      "template": "<nve-tree behavior-expand border>\n  <nve-tree-node expanded>\n    node 1\n    <nve-tree-node highlighted>node 1-1</nve-tree-node>\n    <nve-tree-node>node 1-2</nve-tree-node>\n    <nve-tree-node expanded>\n      node 1-3\n      <nve-tree-node highlighted>node 1-3-1</nve-tree-node>\n      <nve-tree-node highlighted>node 1-3-2</nve-tree-node>\n      <nve-tree-node>node 1-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 2\n    <nve-tree-node>node 2-1</nve-tree-node>\n    <nve-tree-node>node 2-2</nve-tree-node>\n    <nve-tree-node>node 2-3</nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 3\n    <nve-tree-node>node 3-1</nve-tree-node>\n    <nve-tree-node>node 3-2</nve-tree-node>\n    <nve-tree-node>\n      node 3-3\n      <nve-tree-node>node 3-3-1</nve-tree-node>\n      <nve-tree-node>node 3-3-2</nve-tree-node>\n      <nve-tree-node>node 3-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n</nve-tree>\n",
      "summary": "Tree with highlighted nodes for emphasizing specific items, providing visual focus and search result signal in hierarchical data.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "tree-links",
      "name": "Links",
      "template": "<nve-tree behavior-expand>\n  <nve-tree-node><a href=\"#\">Documentation</a></nve-tree-node>\n  <nve-tree-node><a href=\"#\">Support</a></nve-tree-node>\n  <nve-tree-node expanded>\n    Elements\n    <nve-tree-node><a href=\"#\">Alert</a></nve-tree-node>\n    <nve-tree-node><a href=\"#\">Badge</a></nve-tree-node>\n    <nve-tree-node><a href=\"#\">Dialog</a></nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    Frameworks\n    <nve-tree-node><a href=\"#\">Angular</a></nve-tree-node>\n    <nve-tree-node><a href=\"#\">React</a></nve-tree-node>\n    <nve-tree-node><a href=\"#\">Vue</a></nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    Languages\n    <nve-tree-node><a href=\"#\">JavaScript</a></nve-tree-node>\n    <nve-tree-node><a href=\"#\">HTML</a></nve-tree-node>\n    <nve-tree-node><a href=\"#\">CSS</a></nve-tree-node>\n  </nve-tree-node>\n</nve-tree>\n",
      "summary": "Tree with navigation links for hierarchical menu systems, enabling structured site navigation and content discovery.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "tree-async",
      "name": "Async",
      "template": "<nve-tree border>\n  <nve-tree-node expanded>\n    node 1\n    <nve-tree-node>node 1-1</nve-tree-node>\n    <nve-tree-node>node 1-2</nve-tree-node>\n    <nve-tree-node expanded>\n      node 1-3\n      <nve-tree-node>\n        <div nve-layout=\"row gap:xs\"><nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring> loading</div>\n      </nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 2\n    <nve-tree-node>node 2-1</nve-tree-node>\n    <nve-tree-node>node 2-2</nve-tree-node>\n    <nve-tree-node>node 2-3</nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 3\n    <nve-tree-node>node 3-1</nve-tree-node>\n    <nve-tree-node>node 3-2</nve-tree-node>\n    <nve-tree-node>\n      node 3-3\n      <nve-tree-node>node 3-3-1</nve-tree-node>\n      <nve-tree-node>node 3-3-2</nve-tree-node>\n      <nve-tree-node>node 3-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n</nve-tree>\n",
      "summary": "Tree with loading states for asynchronous data, including progress indicators and dynamic content loading in hierarchical structures.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "tree-node-content",
      "name": "NodeContent",
      "template": "<nve-tree selectable=\"multi\" border behavior-expand behavior-select>\n  <nve-tree-node expanded>\n    text content\n    <nve-tree-node>\n      <a href=\".\" nve-text=\"link\">node link</a>\n    </nve-tree-node>\n    <nve-tree-node> inline content <nve-dot status=\"success\" size=\"sm\"></nve-dot> </nve-tree-node>\n    <nve-tree-node>\n      <div nve-text=\"body sm muted\" nve-layout=\"pad-bottom:xs\">block</div>\n      <p nve-text=\"body sm\">content</p>\n    </nve-tree-node>\n    <nve-tree-node>\n      long form content\n      <div slot=\"content\" nve-layout=\"column gap:sm\">\n        <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n        <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n        <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n      </div>\n    </nve-tree-node>\n    <nve-tree-node>\n      interactive content\n      <div slot=\"content\" nve-layout=\"column gap:sm\">\n        <p nve-text=\"body sm\">This is some longer content in a tree node.</p>\n        <nve-button>hello there</nve-button>\n      </div>\n    </nve-tree-node>\n    <nve-tree-node>\n      input control\n      <div slot=\"content\" nve-layout=\"column gap:sm\">\n        <nve-input>\n          <label>label</label>\n          <input type=\"text\" />\n        </nve-input>\n        <nve-input>\n          <label>label</label>\n          <input type=\"text\" />\n        </nve-input>\n      </div>\n    </nve-tree-node>\n    <nve-tree-node>\n      node content checkbox group\n      <nve-checkbox-group slot=\"content\">\n        <label>label</label>\n        <nve-checkbox>\n          <label>checkbox 1</label>\n          <input type=\"checkbox\" checked />\n        </nve-checkbox>\n        <nve-checkbox>\n          <label>checkbox 2</label>\n          <input type=\"checkbox\" />\n        </nve-checkbox>\n        <nve-checkbox>\n          <label>checkbox 3</label>\n          <input type=\"checkbox\" />\n        </nve-checkbox>\n      </nve-checkbox-group>\n    </nve-tree-node>\n    <nve-tree-node>\n      node content radio group\n      <nve-radio-group slot=\"content\">\n        <label>label</label>\n        <nve-radio>\n          <label>radio 1</label>\n          <input type=\"radio\" checked />\n        </nve-radio>\n        <nve-radio>\n          <label>radio 2</label>\n          <input type=\"radio\" />\n        </nve-radio>\n        <nve-radio>\n          <label>radio 3</label>\n          <input type=\"radio\" />\n        </nve-radio>\n      </nve-radio-group>\n    </nve-tree-node>\n  </nve-tree-node>\n</nve-tree>\n",
      "summary": "Tree with rich node content including forms, controls, and interactive elements, enabling complex data management within hierarchical structures.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "tree-dynamic-tree",
      "name": "DynamicTree",
      "template": "<test-dynamic-tree></test-dynamic-tree>\n",
      "summary": "Dynamic tree with programmatic node creation and management, for scalable hierarchical data handling with large datasets.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "tree-overflow",
      "name": "Overflow",
      "template": "<div style=\"width: 300px; height: 500px; overflow: auto; outline: 1px solid #ccc; padding: 12px\">\n  <nve-tree border behavior-expand>\n    <nve-tree-node expanded>\n      node 1\n      <nve-tree-node>node 1-1</nve-tree-node>\n      <nve-tree-node>node 1-2</nve-tree-node>\n      <nve-tree-node expanded>\n        node 1-3\n        <nve-tree-node>node 1-3-1</nve-tree-node>\n        <nve-tree-node>node 1-3-2</nve-tree-node>\n        <nve-tree-node expanded>\n          node 1-3-3\n          <nve-tree-node>node 1-3-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-3-2</nve-tree-node>\n          <nve-tree-node expanded>\n            node 1-3-3-3\n            <nve-tree-node>node 1-3-3-3-1</nve-tree-node>\n            <nve-tree-node>node 1-3-3-3-2</nve-tree-node>\n            <nve-tree-node expanded>\n              node 1-3-3-3-3\n              <nve-tree-node>node 1-3-3-3-3-1</nve-tree-node>\n              <nve-tree-node>node 1-3-3-3-3-2</nve-tree-node>\n              <nve-tree-node expanded>\n                node 1-3-3-3-3-3\n                <nve-tree-node>node 1-3-3-3-3-3-1</nve-tree-node>\n                <nve-tree-node>node 1-3-3-3-3-3-2</nve-tree-node>\n                <nve-tree-node expanded>\n                  node 1-3-3-3-3-3-3\n                  <nve-tree-node>node 1-3-3-3-3-3-3-1</nve-tree-node>\n                  <nve-tree-node>node 1-3-3-3-3-3-3-2</nve-tree-node>\n                  <nve-tree-node expanded>\n                    node 1-3-3-3-3-3-3-3\n                    <nve-tree-node>node 1-3-3-3-3-3-3-3-1</nve-tree-node>\n                    <nve-tree-node>node 1-3-3-3-3-3-3-3-2</nve-tree-node>\n                    <nve-tree-node expanded>\n                      node 1-3-3-3-3-3-3-3-3\n                      <nve-tree-node>node 1-3-3-3-3-3-3-3-3-1</nve-tree-node>\n                      <nve-tree-node>node 1-3-3-3-3-3-3-3-3-2</nve-tree-node>\n                      <nve-tree-node>node 1-3-3-3-3-3-3-3-3-3</nve-tree-node>\n                    </nve-tree-node>\n                  </nve-tree-node>\n                </nve-tree-node>\n              </nve-tree-node>\n            </nve-tree-node>\n          </nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree-node>\n    <nve-tree-node expanded>\n      node 2\n      <nve-tree-node>node 2-1</nve-tree-node>\n      <nve-tree-node>node 2-2</nve-tree-node>\n      <nve-tree-node>node 2-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree>\n</div>\n",
      "summary": "Tree with scrollable container for handling deep hierarchies and large datasets, ensuring optimal space usage and navigation.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "tree-bulk-creation",
      "name": "BulkCreation",
      "template": "<nve-tree>\n  <nve-tree-node id=\"root\" expandable>Test</nve-tree-node>\n</nve-tree>\n<script type=\"module\">\n  const rootEl = document.querySelector(\"nve-tree-node#root\");\n  rootEl.addEventListener(\"open\", () => {\n    const fragment = document.createDocumentFragment();\n    for (let i = 0; i < 400; i++) {\n      rootEl.expanded = true;\n      const childEl = document.createElement(\"nve-tree-node\");\n      childEl.innerText = \"Child \" + i;\n      fragment.append(childEl);\n    }\n    rootEl.append(fragment);\n  });\n  rootEl.addEventListener(\"close\", () => {\n    rootEl.expanded = false;\n    rootEl.replaceChildren(document.createTextNode(\"Test\"));\n  });\n</script>\n",
      "summary": "Tree with bulk node creation for performance testing, verifying efficient handling of large numbers of nodes and dynamic expansion.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case",
        "performance"
      ]
    },
    {
      "id": "tree-audit",
      "name": "Audit",
      "template": "<div>\n  <nve-tree-node>node</nve-tree-node>\n</div>\n",
      "summary": "Examples of invalid tree usage patterns for testing and documentation purposes, showing what not to do when implementing trees.",
      "description": "",
      "composition": false,
      "tags": [
        "anti-pattern"
      ]
    }
  ]
}