@nvidia-elements/core 0.0.2 → 0.0.4

package/dist/tree/tree.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.examples.js","names":["#getNodeList","#open","#close"],"sources":["../../src/tree/tree.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport '@nvidia-elements/core/tree/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Tree',\n  component: 'nve-tree',\n};\n\n/**\n * @summary Basic tree component with expandable nodes, providing hierarchical data display and navigation for structured content organization.\n */\nexport const Default = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Tree with border styling for enhanced visual separation and container definition, improving content structure perception.\n */\nexport const Border = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Single-selection tree for choosing one item from hierarchical options, enabling focused navigation and content selection.\n */\nexport const Selectable = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Multi-selection tree for choosing many items from hierarchical options, enabling bulk operations and comprehensive content management.\n */\nexport const SelectableMultiple = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Interactive selection handling using the select event, with callbacks for node selection changes.\n * @tags test-case\n */\nexport const SelectEvent = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Tree with highlighted nodes for emphasizing specific items, providing visual focus and search result signal in hierarchical data.\n */\nexport const Highlight = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Tree with navigation links for hierarchical menu systems, enabling structured site navigation and content discovery.\n */\nexport const Links = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Tree with loading states for asynchronous data, including progress indicators and dynamic content loading in hierarchical structures.\n */\nexport const Async = {\n  render: () => html`\n    <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\">\n              <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring> loading\n            </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  `\n};\n\n/**\n * @summary Tree with rich node content including forms, controls, and interactive elements, enabling complex data management within hierarchical structures.\n */\nexport const NodeContent = {\n  render: () => html`\n    <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>\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\n            <nve-checkbox>\n              <label>checkbox 2</label>\n              <input type=\"checkbox\" />\n            </nve-checkbox>\n\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\n            <nve-radio>\n              <label>radio 2</label>\n              <input type=\"radio\" />\n            </nve-radio>\n\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  `\n};\n\n/**\n * @summary Dynamic tree with programmatic node creation and management, for scalable hierarchical data handling with large datasets.\n * @tags test-case\n */\nexport const DynamicTree = {\n  render: () => html`<test-dynamic-tree></test-dynamic-tree>`\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Tree integrated in vertical navigation drawer, providing structured sidebar navigation for application layouts and content organization.\n */\nexport const VerticalNav = {\n  render: () => html`\n  <nve-drawer inline size=\"sm\" position=\"left\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading\">Navigation</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <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    </nve-drawer-content>\n  </nve-drawer>\n  `\n};\n\n/**\n * @summary Tree with scrollable container for handling deep hierarchies and large datasets, ensuring optimal space usage and navigation.\n * @tags test-case\n */\nexport const Overflow = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Tree with bulk node creation for performance testing, verifying efficient handling of large numbers of nodes and dynamic expansion.\n * @tags test-case performance\n */\nexport const BulkCreation = {\n  render: () => html`\n    <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\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\n    rootEl.addEventListener('close', () => {\n      rootEl.expanded = false;\n      rootEl.replaceChildren(document.createTextNode('Test'));\n    });\n  </script>\n  `\n};\n\n/**\n * @summary Examples of invalid tree usage patterns for testing and documentation purposes, showing what not to do when implementing trees.\n * @tags anti-pattern\n */\nexport const Audit = {\n  render: () => html`\n    <div>\n      <nve-tree-node>node</nve-tree-node>\n    </div>\n  `\n};\n\nexport class TestDynamicTree extends LitElement {\n  @state() nodes = createTree();\n\n  render() {\n    return html`\n    <p nve-text=\"body\">total nodes: 10,000</p>\n    <nve-tree border expandable>\n      ${this.nodes.map(node => this.#getNodeList(node))}\n    </nve-tree>`;\n  }\n\n  #getNodeList(node) {\n    return html`<nve-tree-node .expandable=${node.nodes.length} .expanded=${node.expanded} @open=${e => this.#open(e, node)} @close=${e => this.#close(e, node)}>\n      ${node.label} node\n      ${node.expanded ? node.nodes.map(n => html`${this.#getNodeList(n)}`) : nothing}\n    </nve-tree-node>`\n  }\n\n  #open(e, node) {\n    e.stopPropagation();\n    node.expanded = true;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n\n  #close(e, node) {\n    e.stopPropagation();\n    node.expanded = false;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n}\n\n/** generates a tree with 10 nodes with 4 layers */\nfunction createTree() {\n  return createNodeList(10).map(i => {\n    i.nodes = createNodeList(10);\n    i.nodes.forEach(j => {\n      j.nodes = createNodeList(10);\n      j.nodes.forEach(k => {\n        k.nodes = createNodeList(10);\n      })\n    })\n    return i;\n  });\n}\n\nfunction createNodeList(nodes: number) {\n  return new Array(nodes).fill('').map((_, i) => ({ label: `${i}`, expanded: false, nodes: [] }));\n}\n\ncustomElements.get('test-dynamic-tree') || customElements.define('test-dynamic-tree', TestDynamicTree);"],"mappings":";AAGA,IAAA,IAAe"}
+{"version":3,"file":"tree.examples.js","names":["#getNodeList","#open","#close"],"sources":["../../src/tree/tree.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport '@nvidia-elements/core/tree/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Tree',\n  component: 'nve-tree',\n};\n\n/**\n * @summary Basic tree component with expandable nodes, providing hierarchical data display and navigation for structured content organization.\n */\nexport const Default = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Tree with border styling for enhanced visual separation and container definition, improving content structure perception.\n */\nexport const Border = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Single-selection tree for choosing one item from hierarchical options, enabling focused navigation and content selection.\n */\nexport const Selectable = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Multi-selection tree for choosing many items from hierarchical options, enabling bulk operations and comprehensive content management.\n */\nexport const SelectableMultiple = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Interactive selection handling using the select event, with callbacks for node selection changes.\n * @tags test-case\n */\nexport const SelectEvent = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Tree with highlighted nodes for emphasizing specific items, providing visual focus and search result signal in hierarchical data.\n */\nexport const Highlight = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Tree with navigation links for hierarchical menu systems, enabling structured site navigation and content discovery.\n */\nexport const Links = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Tree with loading states for asynchronous data, including progress indicators and dynamic content loading in hierarchical structures.\n */\nexport const Async = {\n  render: () => html`\n    <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\">\n              <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring> loading\n            </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  `\n};\n\n/**\n * @summary Tree with rich node content including forms, controls, and interactive elements, enabling complex data management within hierarchical structures.\n */\nexport const NodeContent = {\n  render: () => html`\n    <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>\n          inline content <nve-dot status=\"success\" size=\"sm\"></nve-dot>\n        </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\n            <nve-checkbox>\n              <label>checkbox 2</label>\n              <input type=\"checkbox\" />\n            </nve-checkbox>\n\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\n            <nve-radio>\n              <label>radio 2</label>\n              <input type=\"radio\" />\n            </nve-radio>\n\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  `\n};\n\n/**\n * @summary Dynamic tree with programmatic node creation and management, for scalable hierarchical data handling with large datasets.\n * @tags test-case\n */\nexport const DynamicTree = {\n  render: () => html`<test-dynamic-tree></test-dynamic-tree>`\n};\n\n/**\n * @summary Tree with scrollable container for handling deep hierarchies and large datasets, ensuring optimal space usage and navigation.\n * @tags test-case\n */\nexport const Overflow = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Tree with bulk node creation for performance testing, verifying efficient handling of large numbers of nodes and dynamic expansion.\n * @tags test-case performance\n */\nexport const BulkCreation = {\n  render: () => html`\n    <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\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\n    rootEl.addEventListener('close', () => {\n      rootEl.expanded = false;\n      rootEl.replaceChildren(document.createTextNode('Test'));\n    });\n  </script>\n  `\n};\n\n/**\n * @summary Examples of invalid tree usage patterns for testing and documentation purposes, showing what not to do when implementing trees.\n * @tags anti-pattern\n */\nexport const Audit = {\n  render: () => html`\n    <div>\n      <nve-tree-node>node</nve-tree-node>\n    </div>\n  `\n};\n\nexport class TestDynamicTree extends LitElement {\n  @state() nodes = createTree();\n\n  render() {\n    return html`\n    <p nve-text=\"body\">total nodes: 10,000</p>\n    <nve-tree border expandable>\n      ${this.nodes.map(node => this.#getNodeList(node))}\n    </nve-tree>`;\n  }\n\n  #getNodeList(node) {\n    return html`<nve-tree-node .expandable=${node.nodes.length} .expanded=${node.expanded} @open=${e => this.#open(e, node)} @close=${e => this.#close(e, node)}>\n      ${node.label} node\n      ${node.expanded ? node.nodes.map(n => html`${this.#getNodeList(n)}`) : nothing}\n    </nve-tree-node>`\n  }\n\n  #open(e, node) {\n    e.stopPropagation();\n    node.expanded = true;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n\n  #close(e, node) {\n    e.stopPropagation();\n    node.expanded = false;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n}\n\n/** generates a tree with 10 nodes with 4 layers */\nfunction createTree() {\n  return createNodeList(10).map(i => {\n    i.nodes = createNodeList(10);\n    i.nodes.forEach(j => {\n      j.nodes = createNodeList(10);\n      j.nodes.forEach(k => {\n        k.nodes = createNodeList(10);\n      })\n    })\n    return i;\n  });\n}\n\nfunction createNodeList(nodes: number) {\n  return new Array(nodes).fill('').map((_, i) => ({ label: `${i}`, expanded: false, nodes: [] }));\n}\n\ncustomElements.get('test-dynamic-tree') || customElements.define('test-dynamic-tree', TestDynamicTree);"],"mappings":";AAGA,IAAA,IAAe"}

package/dist/tree/tree.examples.json

@@ -79,7 +79,7 @@
     {
       "id": "core-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>\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",
+      "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,
@@ -96,15 +96,6 @@
         "test-case"
       ]
     },
-    {
-      "id": "core-tree_vertical-nav",
-      "name": "VerticalNav",
-      "template": "<nve-drawer inline size=\"sm\" position=\"left\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Navigation</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <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  </nve-drawer-content>\n</nve-drawer>\n",
-      "summary": "Tree integrated in vertical navigation drawer, providing structured sidebar navigation for application layouts and content organization.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
     {
       "id": "core-tree_overflow",
       "name": "Overflow",

package/dist/tree/tree2.js

@@ -1,7 +1,7 @@
 import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
 import { attachInternals as t } from "../internal/utils/a11y.js";
 import { onChildListMutation as n } from "../internal/utils/events.js";
-import { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { audit as i } from "../internal/controllers/audit.controller.js";
 import { keyNavigationList as a } from "../internal/controllers/keynav-list.controller.js";
 import { useStyles as o } from "../internal/styles/index.js";
@@ -22,7 +22,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-tree",
-			version: "0.0.2",
+			version: "0.0.4",
 			children: ["nve-tree-node"]
 		};
 	}

package/dist/week/define.js

@@ -1,7 +1,9 @@
 import { define as e } from "../internal/utils/dom.js";
-import { Week as t } from "./week2.js";
-//#region src/week/define.ts
-e(t);
+import { ControlMessage as t } from "../forms/control-message/control-message2.js";
+import { Control as n } from "../forms/control/control2.js";
+import { ControlGroup as r } from "../forms/control-group/control-group2.js";
+import { Week as i } from "./week2.js";
+e(i), e(n), e(r), e(t);
 //#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/week/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/week/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Week } from '@nvidia-elements/core/week';\nimport '@nvidia-elements/core/forms/define.js';\n\ndefine(Week);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-week': Week;\n  }\n}\n"],"mappings":";;;AAOA,EAAO,EAAK"}
+{"version":3,"file":"define.js","names":[],"sources":["../../src/week/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Week } from '@nvidia-elements/core/week';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Week);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-week': Week;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,EAAK,EACZ,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

package/dist/week/week2.js

@@ -1,4 +1,4 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
 import { useStyles as n } from "../internal/styles/index.js";
 import { Control as r } from "../forms/control/control2.js";
@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-week",
-			version: "0.0.2"
+			version: "0.0.4"
 		};
 	}
 	static {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "release": {
     "extends": "../../release.config.js"
   },
@@ -28,6 +28,7 @@
   "files": [
     "README.md",
     "CHANGELOG.md",
+    "NOTICE.md",
     "package.json",
     "postinstall.mjs",
     "dist/**/*"
@@ -47,7 +48,6 @@
     "./data.html.json": "./dist/data.html.json",
     "./data.snippets.json": "./dist/data.snippets.json",
     "./*.examples.json": "./dist/*.examples.json",
-    "./css/*": "./dist/css/*",
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
@@ -56,7 +56,6 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./index.css": "./dist/index.css",
     "./polyfills": {
       "types": "./dist/polyfills/index.d.ts",
       "default": "./dist/polyfills/index.js"
@@ -102,18 +101,6 @@
       "types": "./dist/alert/define.d.ts",
       "default": "./dist/alert/define.js"
     },
-    "./app-header": {
-      "types": "./dist/app-header/index.d.ts",
-      "default": "./dist/app-header/index.js"
-    },
-    "./app-header/index.js": {
-      "types": "./dist/app-header/index.d.ts",
-      "default": "./dist/app-header/index.js"
-    },
-    "./app-header/define.js": {
-      "types": "./dist/app-header/define.d.ts",
-      "default": "./dist/app-header/define.js"
-    },
     "./avatar": {
       "types": "./dist/avatar/index.d.ts",
       "default": "./dist/avatar/index.js"
@@ -366,6 +353,30 @@
       "types": "./dist/file/define.d.ts",
       "default": "./dist/file/define.js"
     },
+    "./format-datetime": {
+      "types": "./dist/format-datetime/index.d.ts",
+      "default": "./dist/format-datetime/index.js"
+    },
+    "./format-datetime/index.js": {
+      "types": "./dist/format-datetime/index.d.ts",
+      "default": "./dist/format-datetime/index.js"
+    },
+    "./format-datetime/define.js": {
+      "types": "./dist/format-datetime/define.d.ts",
+      "default": "./dist/format-datetime/define.js"
+    },
+    "./format-relative-time": {
+      "types": "./dist/format-relative-time/index.d.ts",
+      "default": "./dist/format-relative-time/index.js"
+    },
+    "./format-relative-time/index.js": {
+      "types": "./dist/format-relative-time/index.d.ts",
+      "default": "./dist/format-relative-time/index.js"
+    },
+    "./format-relative-time/define.js": {
+      "types": "./dist/format-relative-time/define.d.ts",
+      "default": "./dist/format-relative-time/define.js"
+    },
     "./forms": {
       "types": "./dist/forms/index.d.ts",
       "default": "./dist/forms/index.js"
@@ -430,18 +441,6 @@
       "types": "./dist/input/define.d.ts",
       "default": "./dist/input/define.js"
     },
-    "./json-viewer": {
-      "types": "./dist/json-viewer/index.d.ts",
-      "default": "./dist/json-viewer/index.js"
-    },
-    "./json-viewer/index.js": {
-      "types": "./dist/json-viewer/index.d.ts",
-      "default": "./dist/json-viewer/index.js"
-    },
-    "./json-viewer/define.js": {
-      "types": "./dist/json-viewer/define.d.ts",
-      "default": "./dist/json-viewer/define.js"
-    },
     "./logo": {
       "types": "./dist/logo/index.d.ts",
       "default": "./dist/logo/index.js"
@@ -913,40 +912,42 @@
   "dependencies": {
     "lit": "^3.3.2",
     "lit-html": "^3.3.2",
-    "@nvidia-elements/forms": "^0.0.2"
+    "@nvidia-elements/forms": "^0.0.4"
   },
   "peerDependencies": {
-    "@nvidia-elements/themes": "^0.0.3"
+    "@nvidia-elements/themes": "^0.0.5"
   },
   "optionalDependencies": {
     "@lit-labs/scoped-registry-mixin": "^1.0.4",
-    "@webcomponents/scoped-custom-element-registry": "^0.0.9",
+    "@webcomponents/scoped-custom-element-registry": "^0.0.10",
     "construct-style-sheets-polyfill": "^3.1.0",
     "element-internals-polyfill": "^3.0.2",
     "formdata-polyfill": "^4.0.10"
   },
   "devDependencies": {
-    "@eslint/js": "9.39.2",
-    "@lit-labs/virtualizer": "^2.1.1",
+    "@eslint/js": "10.0.1",
+    "@lit-labs/virtualizer": "2.1.1",
     "@typescript/lib-dom": "npm:@types/web@0.0.312",
-    "@vitest/browser": "4.1.0",
-    "@vitest/coverage-istanbul": "4.1.0",
+    "@vitest/browser": "4.1.4",
+    "@vitest/coverage-istanbul": "4.1.4",
     "axe-core": "4.11.0",
-    "eslint": "9.39.2",
+    "eslint": "10.2.0",
+    "lit": "3.3.2",
     "lit-analyzer": "2.0.3",
-    "publint": "0.3.15",
-    "stylelint": "17.4.0",
+    "lit-html": "3.3.2",
+    "publint": "0.3.18",
+    "stylelint": "17.6.0",
     "stylelint-config-standard": "40.0.0",
     "svgo": "4.0.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.2",
-    "vite": "8.0.0",
-    "vitest": "4.1.0",
+    "vite": "8.0.6",
+    "vitest": "4.1.4",
     "@internals/eslint": "0.0.0",
     "@internals/testing": "0.0.0",
     "@internals/vite": "0.0.0",
-    "@nvidia-elements/lint": "0.0.1",
-    "@nvidia-elements/styles": "^0.0.2"
+    "@nvidia-elements/lint": "0.0.3",
+    "@nvidia-elements/styles": "^0.0.4"
   },
   "wireit": {
     "ci": {
@@ -1230,6 +1231,7 @@
   "publishConfig": {
     "provenance": true
   },
+  "license": "Apache-2.0",
   "scripts": {
     "postinstall": "node postinstall.mjs || exit 0",
     "ci": "wireit",

package/dist/app-header/app-header.d.ts

@@ -1,39 +0,0 @@
-import { PropertyValues, LitElement } from 'lit';
-import { Logo } from '../logo';
-/**
- * @deprecated use `nve-page-header` instead
- * @element nve-app-header
- * @description An element that appears across the top of all pages containing the application name and primary navigation.
- * @since 0.11.0
- * @slot - Use the default slot in `logo` to create an app logo badge within the app header. Include a `<span>` element inside `app-header` to change the default application title.
- * @slot title
- * @slot nav-items - For `button` and `icon-button` elements used for navigation behavior. Use the `active` attribute to show the current page.
- * @slot nav-actions - For `icon-button` elements. Places them in the supplemental actions section of the app header.
- * @cssprop --background
- * @cssprop --padding
- * @cssprop --border-bottom
- * @cssprop --color
- * @cssprop --font-weight
- * @cssprop --text-decoration
- * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
- * @responsive false
- */
-export declare class AppHeader extends LitElement {
-    #private;
-    static styles: import('lit').CSSResult[];
-    static readonly metadata: {
-        tag: string;
-        version: string;
-    };
-    static elementDefinitions: {
-        [Logo.metadata.tag]: typeof Logo;
-    };
-    private navItems;
-    private navActions;
-    private slottedElements;
-    render(): import('lit-html').TemplateResult<1>;
-    /** @private */
-    _internals: ElementInternals;
-    connectedCallback(): void;
-    updated(props: PropertyValues<this>): void;
-}

package/dist/app-header/app-header.js

@@ -1,6 +0,0 @@
-//#region src/app-header/app-header.css?inline
-var e = ":host{--background: var(--nve-sys-layer-shell-background);--padding: var(--nve-ref-space-xs) var(--nve-ref-space-lg);--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);contain:initial;width:100%}[internal-host]{background:var(--background);padding:var(--padding);border-bottom:var(--border-bottom);display:flex;flex-direction:row;place-items:center flex-start;justify-content:space-between}[app-branding]{display:flex;flex-direction:row;place-items:center;justify-content:center;gap:var(--nve-ref-space-xs);margin:0;min-height:0}::slotted([slot=\"title\"]),slot[name=title] h2{font-family:var(--nve-ref-font-family)!important;font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-semibold)!important;color:var(--nve-sys-text-muted-color)!important;white-space:initial;margin:0}slot{display:flex;flex-direction:row;place-items:flex-start;margin:0;min-height:0}slot[name=nav-items]{margin:0 auto 0 var(--nve-ref-space-xxl);gap:var(--nve-ref-space-xxs)}slot[name=nav-actions]{align-items:center}::slotted(nve-button[slot=\"nav-items\"]){--color: var(--nve-sys-text-muted-color);--font-weight: var(--nve-ref-font-weight-medium)}::slotted(nve-button[slot=\"nav-items\"][selected]){--color: var(--nve-sys-text-emphasis-color);--text-decoration: none;--nve-sys-interaction-state-ratio-active: 0;--font-weight: var(--nve-ref-font-weight-semibold)}::slotted(nve-icon-button[slot=\"nav-items\"][selected]){--color: var(--nve-sys-text-emphasis-color)}::slotted(nve-button[slot=\"nav-items\"]:hover),::slotted(nve-button[slot=\"nav-items\"]:focus){--text-decoration: underline}::slotted(nve-icon-button[interaction=\"emphasis\"]),::slotted(nve-icon-button[interaction=\"emphasize\"]){margin-inline-start:var(--nve-ref-space-lg)}";
-//#endregion
-export { e as default };
-
-//# sourceMappingURL=app-header.js.map

package/dist/app-header/app-header.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-header.js","names":[],"sources":["../../src/app-header/app-header.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--nve-sys-layer-shell-background);\n  --padding: var(--nve-ref-space-xs) var(--nve-ref-space-lg);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  contain: initial;\n  width: 100%;\n}\n\n[internal-host] {\n  background: var(--background);\n  padding: var(--padding);\n  border-bottom: var(--border-bottom);\n  display: flex;\n  flex-direction: row;\n  place-items: center flex-start;\n  justify-content: space-between;\n}\n\n[app-branding] {\n  display: flex;\n  flex-direction: row;\n  place-items: center;\n  justify-content: center;\n  gap: var(--nve-ref-space-xs);\n  margin: 0;\n  min-height: 0;\n}\n\n::slotted([slot='title']),\nslot[name='title'] h2 {\n  font-family: var(--nve-ref-font-family) !important;\n  font-size: var(--nve-ref-font-size-200) !important;\n  font-weight: var(--nve-ref-font-weight-semibold) !important;\n  color: var(--nve-sys-text-muted-color) !important;\n  white-space: initial;\n  margin: 0;\n}\n\nslot {\n  display: flex;\n  flex-direction: row;\n  place-items: flex-start;\n  margin: 0;\n  min-height: 0;\n}\n\nslot[name='nav-items'] {\n  margin: 0 auto 0 var(--nve-ref-space-xxl);\n  gap: var(--nve-ref-space-xxs);\n}\n\nslot[name='nav-actions'] {\n  align-items: center;\n}\n\n::slotted(nve-button[slot='nav-items']),\n::slotted(nve-button[slot='nav-items']) {\n  --color: var(--nve-sys-text-muted-color);\n  --font-weight: var(--nve-ref-font-weight-medium);\n}\n\n::slotted(nve-button[slot='nav-items'][selected]),\n::slotted(nve-button[slot='nav-items'][selected]) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --text-decoration: none;\n  --nve-sys-interaction-state-ratio-active: 0;\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n::slotted(nve-icon-button[slot='nav-items'][selected]),\n::slotted(nve-icon-button[slot='nav-items'][selected]) {\n  --color: var(--nve-sys-text-emphasis-color);\n}\n\n::slotted(nve-button[slot='nav-items']:hover),\n::slotted(nve-button[slot='nav-items']:focus),\n::slotted(nve-button[slot='nav-items']:hover),\n::slotted(nve-button[slot='nav-items']:focus) {\n  --text-decoration: underline;\n}\n\n::slotted(nve-icon-button[interaction='emphasis']),\n::slotted(nve-icon-button[interaction='emphasize']), /* deprecated */\n::slotted(nve-icon-button[interaction='emphasis']) {\n  margin-inline-start: var(--nve-ref-space-lg);\n}\n"],"mappings":""}

package/dist/app-header/app-header2.js

@@ -1,54 +0,0 @@
-import { matchesElementName as e } from "../internal/utils/dom.js";
-import { attachInternals as t } from "../internal/utils/a11y.js";
-import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
-import { scopedRegistry as r } from "../internal/decorators/scoped-registry.js";
-import { useStyles as i } from "../internal/styles/index.js";
-import { Logo as a } from "../logo/logo2.js";
-import o from "./app-header.js";
-import { LitElement as s, html as c } from "lit";
-import { queryAssignedElements as l } from "lit/decorators/query-assigned-elements.js";
-//#region src/app-header/app-header.ts
-var u = class extends s {
-	static {
-		this.styles = i([o]);
-	}
-	static {
-		this.metadata = {
-			tag: "nve-app-header",
-			version: "0.0.2"
-		};
-	}
-	static {
-		this.elementDefinitions = { [a.metadata.tag]: a };
-	}
-	get #e() {
-		return this.slottedElements.find((t) => e(t, a));
-	}
-	render() {
-		return c`<div internal-host><div app-branding><slot @slotchange="${this.#t}"><nve-logo part="logo" size="sm" aria-label="NVIDIA"></nve-logo></slot><slot name="title"><h2>NVIDIA</h2></slot></div><slot name="nav-items" @slotchange="${this.#n}"></slot><slot name="nav-actions" @slotchange="${this.#n}"></slot></div>`;
-	}
-	connectedCallback() {
-		super.connectedCallback(), t(this), this._internals.role = "navigation";
-	}
-	updated(e) {
-		super.updated(e), this.#t(), this.#n();
-	}
-	#t() {
-		let e = this.#e;
-		e && !e.hasAttribute("size") && e.setAttribute("size", "sm");
-	}
-	#n() {
-		this.navActions?.filter((e) => e.getAttribute("interaction") === "emphasis")?.forEach((e) => e.size = "sm"), [...this.navItems, ...this.navActions].filter((e) => !e.hasAttribute("container") && !e.hasAttribute("interaction")).forEach((e) => e.container = "flat");
-	}
-};
-n([l({
-	slot: "nav-items",
-	flatten: !0
-})], u.prototype, "navItems", void 0), n([l({
-	slot: "nav-actions",
-	flatten: !0
-})], u.prototype, "navActions", void 0), n([l()], u.prototype, "slottedElements", void 0), u = n([r()], u);
-//#endregion
-export { u as AppHeader };
-
-//# sourceMappingURL=app-header2.js.map

package/dist/app-header/app-header2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-header2.js","names":["#slottedLogo","#sizeLogo","#updateItems"],"sources":["../../src/app-header/app-header.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { useStyles, attachInternals, matchesElementName, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { Logo } from '@nvidia-elements/core/logo';\nimport type { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { Button } from '@nvidia-elements/core/button';\nimport styles from './app-header.css?inline';\n\n/* eslint-disable @nvidia-elements/lint/no-unstyled-typography */\n\n/**\n * @deprecated use `nve-page-header` instead\n * @element nve-app-header\n * @description An element that appears across the top of all pages containing the application name and primary navigation.\n * @since 0.11.0\n * @slot - Use the default slot in `logo` to create an app logo badge within the app header. Include a `<span>` element inside `app-header` to change the default application title.\n * @slot title\n * @slot nav-items - For `button` and `icon-button` elements used for navigation behavior. Use the `active` attribute to show the current page.\n * @slot nav-actions - For `icon-button` elements. Places them in the supplemental actions section of the app header.\n * @cssprop --background\n * @cssprop --padding\n * @cssprop --border-bottom\n * @cssprop --color\n * @cssprop --font-weight\n * @cssprop --text-decoration\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav\n * @responsive false\n */\n@scopedRegistry()\nexport class AppHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-app-header',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Logo.metadata.tag]: Logo\n  };\n\n  @queryAssignedElements({ slot: 'nav-items', flatten: true }) private navItems!: Button[];\n\n  @queryAssignedElements({ slot: 'nav-actions', flatten: true }) private navActions!: IconButton[];\n\n  @queryAssignedElements() private slottedElements!: HTMLElement[];\n\n  get #slottedLogo() {\n    return this.slottedElements.find(i => matchesElementName(i, Logo)) as Logo;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <div app-branding>\n          <slot @slotchange=${this.#sizeLogo}><nve-logo part=\"logo\" size=\"sm\" aria-label=\"NVIDIA\"></nve-logo></slot>\n          <slot name=\"title\">\n            <h2>NVIDIA</h2>\n          </slot>\n        </div>\n        <slot name=\"nav-items\" @slotchange=${this.#updateItems}></slot>\n        <slot name=\"nav-actions\" @slotchange=${this.#updateItems}></slot>\n      </div>\n    `;\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'navigation';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#sizeLogo();\n    this.#updateItems();\n  }\n\n  #sizeLogo() {\n    const logo = this.#slottedLogo;\n    if (logo && !logo.hasAttribute('size')) {\n      logo.setAttribute('size', 'sm');\n    }\n  }\n\n  #updateItems() {\n    this.navActions?.filter(i => i.getAttribute('interaction') === 'emphasis')?.forEach(item => (item.size = 'sm'));\n    [...this.navItems, ...this.navActions]\n      .filter(i => !i.hasAttribute('container') && !i.hasAttribute('interaction'))\n      .forEach(item => (item.container = 'flat'));\n  }\n}\n"],"mappings":";;;;;;;;;;AAiCO,IAAA,IAAA,cAAwB,EAAW;;gBACxB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAK,SAAS,MAAM,GACtB;;CAQD,KAAA,IAAmB;AACjB,SAAO,KAAK,gBAAgB,MAAK,MAAK,EAAmB,GAAG,EAAK,CAAC;;CAGpE,SAAS;AACP,SAAO,CAAI,2DAGe,MAAA,EAAe,6JAKA,MAAA,EAAkB,iDAChB,MAAA,EAAkB;;CAQ/D,oBAA0B;AAGxB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;CAGzB,QAAQ,GAA6B;AAGnC,EAFA,MAAM,QAAQ,EAAM,EACpB,MAAA,GAAgB,EAChB,MAAA,GAAmB;;CAGrB,KAAY;EACV,IAAM,IAAO,MAAA;AACb,EAAI,KAAQ,CAAC,EAAK,aAAa,OAAO,IACpC,EAAK,aAAa,QAAQ,KAAK;;CAInC,KAAe;AAEb,EADA,KAAK,YAAY,QAAO,MAAK,EAAE,aAAa,cAAc,KAAK,WAAW,EAAE,SAAQ,MAAS,EAAK,OAAO,KAAM,EAC/G,CAAC,GAAG,KAAK,UAAU,GAAG,KAAK,WAAW,CACnC,QAAO,MAAK,CAAC,EAAE,aAAa,YAAY,IAAI,CAAC,EAAE,aAAa,cAAc,CAAC,CAC3E,SAAQ,MAAS,EAAK,YAAY,OAAQ;;;GAnD9C,EAAsB;CAAE,MAAM;CAAa,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAE3D,EAAsB;CAAE,MAAM;CAAe,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAE7D,GAAuB,CAAA,EAAA,EAAA,WAAA,mBAAA,KAAA,EAAA,SAjBzB,GAAgB,CAAA,EAAA,EAAA"}

package/dist/app-header/define.d.ts

@@ -1,6 +0,0 @@
-import { AppHeader } from '.';
-declare global {
-    interface HTMLElementTagNameMap {
-        'nve-app-header': AppHeader;
-    }
-}

package/dist/app-header/define.js

@@ -1,7 +0,0 @@
-import { define as e } from "../internal/utils/dom.js";
-import { AppHeader as t } from "./app-header2.js";
-//#region src/app-header/define.ts
-e(t);
-//#endregion
-
-//# sourceMappingURL=define.js.map

package/dist/app-header/define.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/app-header/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { AppHeader } from '@nvidia-elements/core/app-header';\n\ndefine(AppHeader);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-app-header': AppHeader;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAU"}

package/dist/app-header/index.d.ts

@@ -1 +0,0 @@
-export * from './app-header.js';

package/dist/app-header/index.js

@@ -1,2 +0,0 @@
-import { AppHeader as e } from "./app-header2.js";
-export { e as AppHeader };

package/dist/bundles/audit-logs.js

@@ -1,50 +0,0 @@
-import { t as e } from "./rolldown-runtime.js";
-//#region src/internal/utils/strings.ts
-function t(e) {
-	let t = new Map([
-		[1024 ** 4, "TB"],
-		[1024 ** 3, "GB"],
-		[1024 ** 2, "MB"],
-		[1024 ** 1, "KB"],
-		[1, "B"]
-	]);
-	for (let [n, r] of t.entries()) if (e >= n) return `${(e / n).toFixed(2)} ${r}`;
-	return "0";
-}
-var n = "", r = /* @__PURE__ */ e({
-	DOCS_LOG_URL: () => i,
-	getDuplicatePackageGlobalVersionWarning: () => d,
-	getDuplicatePackageVersionWarning: () => u,
-	getEsmHostedWarning: () => f,
-	getExcessiveInstanceLimitWarning: () => a,
-	getIdMatchNotFoundWarning: () => c,
-	getInvalidParentWarning: () => s,
-	getInvalidSlottedChildrenWarning: () => o,
-	getSSRMismatchWarning: () => l
-}), i = `${n}docs/api-design/logs/`;
-function a(e, t) {
-	return `Excessive rendering of ${e} ${t} were detected in DOM. Recycle/reuse elements when possible to improve application performance. ${i}#excessive-instance-limit`;
-}
-function o(e, t) {
-	return `Invalid slotted elements detected in ${e}. Allowed: ${t.join(", ")}. ${i}#invalid-slotted-children`;
-}
-function s(e, t) {
-	return `Element ${e} can only be used as a direct child of ${t}. ${i}#invalid-parent`;
-}
-function c(e) {
-	return `Provided id "${e}" not found in DOM. ${i}#id-match-not-found`;
-}
-function l(e) {
-	return `${e} rendered on the client with mismatched SSR content. ${i}#ssr-mismatch`;
-}
-function u(e, t) {
-	return `@nve: Element ${e} version ${t} already defined, please check for duplicate package versions. ${i}#duplicate-package-version`;
-}
-function d() {
-	return `@nve: Multiple versions of Elements loaded, please check for duplicate package versions. ${i}#duplicate-package-version`;
-}
-function f() {
-	return "@nve: Using esm.sh is not supported for production use.";
-}
-//#endregion
-export { l as a, c as i, d as n, t as o, f as r, r as t };