@nvidia-elements/core 2.20.0 → 2.20.2

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

@@ -1 +1 @@
-{"version":3,"file":"tree.examples.js","names":[],"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 Invoke commands from tree node titles to control another tree without event handlers. Click a title or press Enter on its header to open or close the target node.\n */\nexport const InvokerCommands = {\n  render: () => html`\n    <nve-tree>\n      <nve-tree-node command=\"--open\" commandfor=\"tree-command-details\">Show details</nve-tree-node>\n      <nve-tree-node command=\"--close\" commandfor=\"tree-command-details\">Hide details</nve-tree-node>\n    </nve-tree>\n    <nve-tree>\n      <nve-tree-node id=\"tree-command-details\">\n        Details\n        <nve-tree-node>Model configuration</nve-tree-node>\n        <nve-tree-node>Training results</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 prefix and suffix content for each node, enabling flexible content organization and visual hierarchy.\n * @tags test-case\n */\nexport const PrefixSuffix = {\n  render: () => html`\n<nve-tree behavior-expand behavior-select selectable=\"single\" aria-label=\"Robot workspace files\">\n  <nve-tree-node expanded>\n    <nve-icon name=\"folder\" slot=\"prefix\"></nve-icon> src\n    <nve-tree-node expanded>\n      <nve-icon name=\"folder\" slot=\"prefix\"></nve-icon> navigation\n      <nve-tree-node selected><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> controller.py <nve-dot status=\"accent\" size=\"sm\" slot=\"suffix\"></nve-dot></nve-tree-node>\n      <nve-tree-node><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> planner.py</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          <nve-icon name=\"code\" slot=\"prefix\"></nve-icon>\n          <a href=\".\" nve-text=\"link\">node link</a>\n          <nve-dot status=\"accent\" size=\"sm\" slot=\"suffix\"></nve-dot>\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 Tree with a max width, ensuring the tree does not exceed the specified width.\n * @tags test-case\n */\nexport const MaxWidth = {\n  render: () => html`\n<nve-tree style=\"max-width: 500px; outline: 1px dashed red;\">\n  <nve-tree-node style=\"outline: 1px dashed blue;\">\n    <p nve-text=\"label truncate\">1234567890_1234567890_1234567890_1234567890_1234567890_1234567890_1234567890_1234567890_1234567890_1234567890</p>\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/* eslint-disable @nvidia-elements/lint/no-invalid-parent-elements -- Intentional invalid parent for audit documentation. */\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/* eslint-enable @nvidia-elements/lint/no-invalid-parent-elements */\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);\n"],"mappings":";AAGA,IAAA,IAAe"}
+{"version":3,"file":"tree.examples.js","names":["tree_examples_default"],"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 Invoke commands from tree node titles to control another tree without event handlers. Click a title or press Enter on its header to open or close the target node.\n */\nexport const InvokerCommands = {\n  render: () => html`\n    <nve-tree>\n      <nve-tree-node command=\"--open\" commandfor=\"tree-command-details\">Show details</nve-tree-node>\n      <nve-tree-node command=\"--close\" commandfor=\"tree-command-details\">Hide details</nve-tree-node>\n    </nve-tree>\n    <nve-tree>\n      <nve-tree-node id=\"tree-command-details\">\n        Details\n        <nve-tree-node>Model configuration</nve-tree-node>\n        <nve-tree-node>Training results</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 prefix and suffix content for each node, enabling flexible content organization and visual hierarchy.\n * @tags test-case\n */\nexport const PrefixSuffix = {\n  render: () => html`\n<nve-tree behavior-expand behavior-select selectable=\"single\" aria-label=\"Robot workspace files\">\n  <nve-tree-node expanded>\n    <nve-icon name=\"folder\" slot=\"prefix\"></nve-icon> src\n    <nve-tree-node expanded>\n      <nve-icon name=\"folder\" slot=\"prefix\"></nve-icon> navigation\n      <nve-tree-node selected><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> controller.py <nve-dot status=\"accent\" size=\"sm\" slot=\"suffix\"></nve-dot></nve-tree-node>\n      <nve-tree-node><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> planner.py</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          <nve-icon name=\"code\" slot=\"prefix\"></nve-icon>\n          <a href=\".\" nve-text=\"link\">node link</a>\n          <nve-dot status=\"accent\" size=\"sm\" slot=\"suffix\"></nve-dot>\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 Tree with a max width, ensuring the tree does not exceed the specified width.\n * @tags test-case\n */\nexport const MaxWidth = {\n  render: () => html`\n<nve-tree style=\"max-width: 500px; outline: 1px dashed red;\">\n  <nve-tree-node style=\"outline: 1px dashed blue;\">\n    <p nve-text=\"label truncate\">1234567890_1234567890_1234567890_1234567890_1234567890_1234567890_1234567890_1234567890_1234567890_1234567890</p>\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/* eslint-disable @nvidia-elements/lint/no-invalid-parent-elements -- Intentional invalid parent for audit documentation. */\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/* eslint-enable @nvidia-elements/lint/no-invalid-parent-elements */\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);\n"],"mappings":";AAGA,IAAAA,IAAe"}

package/dist/tree/tree.global.js

@@ -1,6 +1,5 @@
-//#region src/tree/tree.global.css?inline
+// src/tree/tree.global.css?inline
 var e = "nve-tree-node:not(:has(>[slot=content]))::part(_content){display:none!important}nve-tree-node:not(:has(>[slot=prefix]))::part(_prefix){display:none!important}nve-tree-node:not(:has(>[slot=suffix]))::part(_suffix){display:none!important}nve-tree-node:not(:has(>[slot=nodes]))::part(_nodes){height:0}nve-tree-node:has(>[slot=nodes]):not([expanded])::part(_nodes){height:0}nve-tree-node>nve-tree-node:state(is-expandable){margin-inline-start:calc(-1 * var(--nve-ref-size-400));width:calc(100% + var(--nve-ref-size-400))}nve-tree-node>nve-tree-node:state(is-expandable):state(selectable-multi){margin-inline-start:calc(-1 * var(--nve-ref-size-500));width:calc(100% + var(--nve-ref-size-500))}nve-tree-node:has(nve-tree-node:state(is-expandable))::part(_nodes){padding-inline-start:var(--nve-ref-size-400)}nve-tree:has(>nve-tree-node:state(is-expandable))>nve-tree-node:not(:state(is-expandable))::part(_node){padding-inline-start:var(--nve-ref-size-400)}nve-tree:has(>nve-tree-node:state(is-expandable):state(selectable-multi))>nve-tree-node:not(:state(is-expandable)):state(selectable-multi)::part(_node){padding-inline-start:var(--nve-ref-size-500)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tree.global.js.map

package/dist/tree/tree.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.global.js","names":[],"sources":["../../src/tree/tree.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-tree-node:not(:has(> [slot='content']))::part(_content) {\n  display: none !important;\n}\n\nnve-tree-node:not(:has(> [slot='prefix']))::part(_prefix) {\n  display: none !important;\n}\n\nnve-tree-node:not(:has(> [slot='suffix']))::part(_suffix) {\n  display: none !important;\n}\n\nnve-tree-node:not(:has(> [slot='nodes']))::part(_nodes) {\n  height: 0;\n}\n\nnve-tree-node:has(> [slot='nodes']):not([expanded])::part(_nodes) {\n  height: 0;\n}\n\nnve-tree-node > nve-tree-node:state(is-expandable) {\n  margin-inline-start: calc(-1 * var(--nve-ref-size-400));\n  width: calc(100% + var(--nve-ref-size-400));\n}\n\nnve-tree-node > nve-tree-node:state(is-expandable):state(selectable-multi) {\n  margin-inline-start: calc(-1 * var(--nve-ref-size-500));\n  width: calc(100% + var(--nve-ref-size-500));\n}\n\nnve-tree-node:has(nve-tree-node:state(is-expandable))::part(_nodes) {\n  padding-inline-start: var(--nve-ref-size-400);\n}\n\nnve-tree:has(> nve-tree-node:state(is-expandable)) > nve-tree-node:not(:state(is-expandable))::part(_node) {\n  padding-inline-start: var(--nve-ref-size-400);\n}\n\nnve-tree:has(> nve-tree-node:state(is-expandable):state(selectable-multi))\n  > nve-tree-node:not(:state(is-expandable)):state(selectable-multi)::part(_node) {\n  padding-inline-start: var(--nve-ref-size-500);\n}\n"],"mappings":""}
+{"version":3,"file":"tree.global.js","names":["tree_global_default"],"sources":["../../src/tree/tree.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-tree-node:not(:has(> [slot='content']))::part(_content) {\n  display: none !important;\n}\n\nnve-tree-node:not(:has(> [slot='prefix']))::part(_prefix) {\n  display: none !important;\n}\n\nnve-tree-node:not(:has(> [slot='suffix']))::part(_suffix) {\n  display: none !important;\n}\n\nnve-tree-node:not(:has(> [slot='nodes']))::part(_nodes) {\n  height: 0;\n}\n\nnve-tree-node:has(> [slot='nodes']):not([expanded])::part(_nodes) {\n  height: 0;\n}\n\nnve-tree-node > nve-tree-node:state(is-expandable) {\n  margin-inline-start: calc(-1 * var(--nve-ref-size-400));\n  width: calc(100% + var(--nve-ref-size-400));\n}\n\nnve-tree-node > nve-tree-node:state(is-expandable):state(selectable-multi) {\n  margin-inline-start: calc(-1 * var(--nve-ref-size-500));\n  width: calc(100% + var(--nve-ref-size-500));\n}\n\nnve-tree-node:has(nve-tree-node:state(is-expandable))::part(_nodes) {\n  padding-inline-start: var(--nve-ref-size-400);\n}\n\nnve-tree:has(> nve-tree-node:state(is-expandable)) > nve-tree-node:not(:state(is-expandable))::part(_node) {\n  padding-inline-start: var(--nve-ref-size-400);\n}\n\nnve-tree:has(> nve-tree-node:state(is-expandable):state(selectable-multi))\n  > nve-tree-node:not(:state(is-expandable)):state(selectable-multi)::part(_node) {\n  padding-inline-start: var(--nve-ref-size-500);\n}\n"],"mappings":""}

package/dist/tree/tree.js

@@ -1,6 +1,5 @@
-//#region src/tree/tree.css?inline
+// src/tree/tree.css?inline
 var e = ":host{--max-width: 100%;display:block;min-width:0}:host([border]){--node-border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted)}[internal-host]{max-width:var(--max-width);min-width:0}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tree.js.map

package/dist/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","names":[],"sources":["../../src/tree/tree.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  --max-width: 100%;\n  display: block;\n  min-width: 0;\n}\n\n:host([border]) {\n  --node-border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n}\n\n[internal-host] {\n  max-width: var(--max-width);\n  min-width: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"tree.js","names":["tree_default"],"sources":["../../src/tree/tree.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  --max-width: 100%;\n  display: block;\n  min-width: 0;\n}\n\n:host([border]) {\n  --node-border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n}\n\n[internal-host] {\n  max-width: var(--max-width);\n  min-width: 0;\n}\n"],"mappings":""}

package/dist/tree/tree2.js

@@ -4,14 +4,14 @@ import { appendRootNodeStyle as n } from "../internal/utils/dom.js";
 import { keyNavigationList as r } from "../internal/controllers/keynav-list.controller.js";
 import { attachInternals as i } from "../internal/utils/a11y.js";
 import { useStyles as a } from "../internal/styles/index.js";
-import o from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import o from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { updateNodeSelection as s } from "./utils.js";
 import { TreeNode as c } from "./tree-node2.js";
 import l from "./tree.js";
 import u from "./tree.global.js";
 import { LitElement as d, html as f } from "lit";
 import { property as p } from "lit/decorators/property.js";
-//#region src/tree/tree.ts
+// src/tree/tree.ts
 var m = class extends d {
 	constructor(...e) {
 		super(...e), this.behaviorExpand = !1, this.behaviorSelect = !1, this.border = !1, this.#e = [];
@@ -22,7 +22,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-tree",
-			version: "2.20.0",
+			version: "2.20.2",
 			children: ["nve-tree-node"]
 		};
 	}
@@ -75,7 +75,6 @@ o([p({ type: String })], m.prototype, "selectable", void 0), o([p({
 	type: Boolean,
 	reflect: !0
 })], m.prototype, "border", void 0), m = o([e(), r()], m);
-//#endregion
 export { m as Tree };
 
 //# sourceMappingURL=tree2.js.map

package/dist/tree/tree2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree2.js","names":[],"sources":["../../src/tree/tree.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 { property } from 'lit/decorators/property.js';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  appendRootNodeStyle,\n  attachInternals,\n  audit,\n  keyNavigationList,\n  onChildListMutation,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { updateNodeSelection } from './utils.js';\nimport { TreeNode } from './tree-node.js';\nimport styles from './tree.css?inline';\nimport globalStyles from './tree.global.css?inline';\n\n/**\n * @element nve-tree\n * @description A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n * @documentation https://nvidia.github.io/elements/docs/elements/tree/\n * @since 1.2.0\n * @entrypoint \\@nvidia-elements/core/tree\n * @slot - tree nodes\n * @cssprop --max-width\n * @cssprop --node-border - Border style for tree node depth indicator\n * @event open - Dispatched from a child nve-tree-node when opened.\n * @event close - Dispatched from a child nve-tree-node when closed.\n * @event select - Dispatched from a child nve-tree-node when its selection state changes.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/treeview/\n *\n */\n@audit()\n@keyNavigationList<Tree>()\nexport class Tree extends LitElement {\n  /**\n   * Determines whether all nodes can be in a selected state. Nodes can be in a single or multi select state.\n   */\n  @property({ type: String }) selectable: 'single' | 'multi';\n\n  /**\n   * Determines whether the tree nodes should handle auto-expanding behavior.\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  /**\n   * Determines whether the tree nodes should handle auto-select behavior.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  /**\n   * Determines if the node depth border renders.\n   */\n  @property({ type: Boolean, reflect: true }) border = false;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tree',\n    version: '0.0.0',\n    children: ['nve-tree-node']\n  };\n\n  _internals: ElementInternals;\n\n  /** Returns the tree nodes in document order. */\n  get nodes() {\n    return Array.from(this.querySelectorAll<TreeNode>(TreeNode.metadata.tag));\n  }\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.openNodes\n        .map(node => node.shadowRoot!.querySelector('[part=\"_node-header\"]'))\n        .filter((el): el is HTMLElement => el !== null),\n      layout: 'vertical'\n    };\n  }\n\n  /** @private */\n  get openNodes(): TreeNode[] {\n    return this.nodes.filter(\n      node => node.expanded || (node.parentNode as TreeNode).expanded || (node.parentNode as Tree) === this\n    );\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"nodes\"></slot>\n      </div>\n    `;\n  }\n\n  #observers: MutationObserver[] = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'tree';\n\n    this.#observers.push(\n      onChildListMutation(\n        this,\n        () => {\n          this.#syncNodes();\n        },\n        { subtree: true }\n      )\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(o => o.disconnect());\n  }\n\n  async updated(props: PropertyValues<this>) {\n    super.updated(props);\n    await this.updateComplete;\n    this.#syncNodes();\n  }\n\n  #syncNodes() {\n    this.#syncNodeOptions();\n    this.#syncNodeSelections();\n  }\n\n  #syncNodeOptions() {\n    this.nodes.forEach(node => {\n      node.selectable = this.selectable;\n      node.behaviorExpand = this.behaviorExpand;\n      node.behaviorSelect = this.behaviorSelect;\n    });\n  }\n\n  #syncNodeSelections() {\n    if (this.behaviorSelect && this.selectable === 'multi') {\n      this.nodes.forEach(node => updateNodeSelection(node));\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAqCO,IAAM,IAAN,cAAmB,EAAW;;EA6DF,aApD2C,KAAA,iBAAA,IAKA,KAAA,iBAAA,IAKvB,KAAA,SAAA,IA0CpB,KAAA,KAAA,CAAC;;;EAxClB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAe;EAC5B;;CAKA,IAAI,QAAQ;EACV,OAAO,MAAM,KAAK,KAAK,iBAA2B,EAAS,SAAS,GAAG,CAAC;CAC1E;CAGA,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAK,UACT,KAAI,MAAQ,EAAK,WAAY,cAAc,yBAAuB,CAAC,CAAC,CACpE,QAAQ,MAA0B,MAAO,IAAI;GAChD,QAAQ;EACV;CACF;CAGA,IAAI,YAAwB;EAC1B,OAAO,KAAK,MAAM,QAChB,MAAQ,EAAK,YAAa,EAAK,WAAwB,YAAa,EAAK,eAAwB,IACnG;CACF;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA;CAEA,oBAAoB;EAMlB,AALA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAW,OAAO,QAEvB,KAAK,GAAW,KACd,EACE,YACM;GACJ,KAAK,GAAW;EAClB,GACA,EAAE,SAAS,GAAK,CAClB,CACF;CACF;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,GAAW,SAAQ,MAAK,EAAE,WAAW,CAAC;CAC7C;CAEA,MAAM,QAAQ,GAA6B;EAGzC,AAFA,MAAM,QAAQ,CAAK,GACnB,MAAM,KAAK,gBACX,KAAK,GAAW;CAClB;CAEA,KAAa;EAEX,AADA,KAAK,GAAiB,GACtB,KAAK,GAAoB;CAC3B;CAEA,KAAmB;EACjB,KAAK,MAAM,SAAQ,MAAQ;GAGzB,AAFA,EAAK,aAAa,KAAK,YACvB,EAAK,iBAAiB,KAAK,gBAC3B,EAAK,iBAAiB,KAAK;EAC7B,CAAC;CACH;CAEA,KAAsB;EACpB,AAAI,KAAK,kBAAkB,KAAK,eAAe,WAC7C,KAAK,MAAM,SAAQ,MAAQ,EAAoB,CAAI,CAAC;CAExD;AACF;AAzGG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAKzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAKxD,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAKxD,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GArB3C,IAAA,EAAA,CAAA,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"tree2.js","names":["styles","globalStyles","_decorate","__decorate","tree_default","tree_global_default","Tree","LitElement","_args","#observers","useStyles","TreeNode","node","el","attachInternals","appendRootNodeStyle","onChildListMutation","#syncNodes","o","props","#syncNodeOptions","#syncNodeSelections","updateNodeSelection","property","audit","keyNavigationList"],"sources":["../../src/tree/tree.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 { property } from 'lit/decorators/property.js';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  appendRootNodeStyle,\n  attachInternals,\n  audit,\n  keyNavigationList,\n  onChildListMutation,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { updateNodeSelection } from './utils.js';\nimport { TreeNode } from './tree-node.js';\nimport styles from './tree.css?inline';\nimport globalStyles from './tree.global.css?inline';\n\n/**\n * @element nve-tree\n * @description A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n * @documentation https://nvidia.github.io/elements/docs/elements/tree/\n * @since 1.2.0\n * @entrypoint \\@nvidia-elements/core/tree\n * @slot - tree nodes\n * @cssprop --max-width\n * @cssprop --node-border - Border style for tree node depth indicator\n * @event open - Dispatched from a child nve-tree-node when opened.\n * @event close - Dispatched from a child nve-tree-node when closed.\n * @event select - Dispatched from a child nve-tree-node when its selection state changes.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/treeview/\n *\n */\n@audit()\n@keyNavigationList<Tree>()\nexport class Tree extends LitElement {\n  /**\n   * Determines whether all nodes can be in a selected state. Nodes can be in a single or multi select state.\n   */\n  @property({ type: String }) selectable: 'single' | 'multi';\n\n  /**\n   * Determines whether the tree nodes should handle auto-expanding behavior.\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  /**\n   * Determines whether the tree nodes should handle auto-select behavior.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  /**\n   * Determines if the node depth border renders.\n   */\n  @property({ type: Boolean, reflect: true }) border = false;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tree',\n    version: '0.0.0',\n    children: ['nve-tree-node']\n  };\n\n  _internals: ElementInternals;\n\n  /** Returns the tree nodes in document order. */\n  get nodes() {\n    return Array.from(this.querySelectorAll<TreeNode>(TreeNode.metadata.tag));\n  }\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.openNodes\n        .map(node => node.shadowRoot!.querySelector('[part=\"_node-header\"]'))\n        .filter((el): el is HTMLElement => el !== null),\n      layout: 'vertical'\n    };\n  }\n\n  /** @private */\n  get openNodes(): TreeNode[] {\n    return this.nodes.filter(\n      node => node.expanded || (node.parentNode as TreeNode).expanded || (node.parentNode as Tree) === this\n    );\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"nodes\"></slot>\n      </div>\n    `;\n  }\n\n  #observers: MutationObserver[] = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'tree';\n\n    this.#observers.push(\n      onChildListMutation(\n        this,\n        () => {\n          this.#syncNodes();\n        },\n        { subtree: true }\n      )\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(o => o.disconnect());\n  }\n\n  async updated(props: PropertyValues<this>) {\n    super.updated(props);\n    await this.updateComplete;\n    this.#syncNodes();\n  }\n\n  #syncNodes() {\n    this.#syncNodeOptions();\n    this.#syncNodeSelections();\n  }\n\n  #syncNodeOptions() {\n    this.nodes.forEach(node => {\n      node.selectable = this.selectable;\n      node.behaviorExpand = this.behaviorExpand;\n      node.behaviorSelect = this.behaviorSelect;\n    });\n  }\n\n  #syncNodeSelections() {\n    if (this.behaviorSelect && this.selectable === 'multi') {\n      this.nodes.forEach(node => updateNodeSelection(node));\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAqCO,IAAMM,IAAN,cAAmBC,EAAW;;EA6DF,A,aApD2C,KAAA,iBAAA,IAKA,KAAA,iBAAA,IAKvB,KAAA,SAAA,IA0CpB,KAAAE,KAAA,CAAC;;;EAxClB,KAAA,SAAAC,EAAU,CAACV,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAe;EAC5B;;CAKA,IAAI,QAAQ;EACV,OAAO,MAAM,KAAK,KAAK,iBAA2BW,EAAS,SAAS,GAAG,CAAC;CAC1E;CAGA,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAK,UACT,KAAI,MAAQC,EAAK,WAAY,cAAc,yBAAuB,CAAC,CAAC,CACpE,QAAQ,MAA0BC,MAAO,IAAI;GAChD,QAAQ;EACV;CACF;CAGA,IAAI,YAAwB;EAC1B,OAAO,KAAK,MAAM,QAChB,MAAQD,EAAK,YAAaA,EAAK,WAAwB,YAAaA,EAAK,eAAwB,IACnG;CACF;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA;CAEA,oBAAoB;EAMlB,AALA,MAAM,kBAAkB,GACxBE,EAAgB,IAAI,GACpBC,EAAoB,MAAMd,CAAY,GACtC,KAAK,WAAW,OAAO,QAEvB,KAAKQ,GAAW,KACdO,EACE,YACM;GACJ,KAAKC,GAAW;EAClB,GACA,EAAE,SAAS,GAAK,CAClB,CACF;CACF;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAKR,GAAW,SAAQ,MAAKS,EAAE,WAAW,CAAC;CAC7C;CAEA,MAAM,QAAQ,GAA6B;EAGzC,AAFA,MAAM,QAAQC,CAAK,GACnB,MAAM,KAAK,gBACX,KAAKF,GAAW;CAClB;CAEA,KAAa;EAEX,AADA,KAAKG,GAAiB,GACtB,KAAKC,GAAoB;CAC3B;CAEA,KAAmB;EACjB,KAAK,MAAM,SAAQ,MAAQ;GAGzB,AAFA,EAAK,aAAa,KAAK,YACvB,EAAK,iBAAiB,KAAK,gBAC3B,EAAK,iBAAiB,KAAK;EAC7B,CAAC;CACH;CAEA,KAAsB;EACpB,AAAI,KAAK,kBAAkB,KAAK,eAAe,WAC7C,KAAK,MAAM,SAAQ,MAAQC,EAAoBV,CAAI,CAAC;CAExD;AACF;AAzGGV,EAAA,CAAAqB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAjB,EAAA,WAAA,cAAA,KAAA,CAAA,GAKzBJ,EAAA,CAAAqB,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAAjB,EAAA,WAAA,kBAAA,KAAA,CAAA,GAKxDJ,EAAA,CAAAqB,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAAjB,EAAA,WAAA,kBAAA,KAAA,CAAA,GAKxDJ,EAAA,CAAAqB,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAjB,EAAA,WAAA,UAAA,KAAA,CAAA,GArB3C,IAAAJ,EAAA,CAAAsB,EAAM,GACNC,EAAwB,CAAA,GAAAnB,CAAA"}

package/dist/tree/utils.js

@@ -1,9 +1,8 @@
-//#region src/tree/utils.ts
+// src/tree/utils.ts
 function e(t) {
 	let n = t.nodes;
 	n.length && (n.every((e) => e.selected) ? (t.selected = !0, t.indeterminate = !1) : n.some((e) => e.selected) ? t.indeterminate = !0 : n.every((e) => !e.selected) && (t.selected = !1, t.indeterminate = !1)), n.forEach((t) => e(t));
 }
-//#endregion
 export { e as updateNodeSelection };
 
 //# sourceMappingURL=utils.js.map

package/dist/tree/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../src/tree/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\ninterface SelectableNode {\n  selected: boolean;\n  indeterminate: boolean;\n  nodes: { selected: boolean; indeterminate: boolean }[];\n}\n\nexport function updateNodeSelection(node: SelectableNode) {\n  const nodes = node.nodes;\n\n  if (nodes.length) {\n    if (nodes.every(n => n.selected)) {\n      node.selected = true;\n      node.indeterminate = false;\n    } else if (nodes.some(n => n.selected)) {\n      node.indeterminate = true;\n    } else if (nodes.every(n => !n.selected)) {\n      node.selected = false;\n      node.indeterminate = false;\n    }\n  }\n\n  nodes.forEach(n => updateNodeSelection(n as SelectableNode));\n}\n"],"mappings":";AASA,SAAgB,EAAoB,GAAsB;CACxD,IAAM,IAAQ,EAAK;CAcnB,AAZI,EAAM,WACJ,EAAM,OAAM,MAAK,EAAE,QAAQ,KAC7B,EAAK,WAAW,IAChB,EAAK,gBAAgB,MACZ,EAAM,MAAK,MAAK,EAAE,QAAQ,IACnC,EAAK,gBAAgB,KACZ,EAAM,OAAM,MAAK,CAAC,EAAE,QAAQ,MACrC,EAAK,WAAW,IAChB,EAAK,gBAAgB,MAIzB,EAAM,SAAQ,MAAK,EAAoB,CAAmB,CAAC;AAC7D"}
+{"version":3,"file":"utils.js","names":["updateNodeSelection","nodes","node","n"],"sources":["../../src/tree/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\ninterface SelectableNode {\n  selected: boolean;\n  indeterminate: boolean;\n  nodes: { selected: boolean; indeterminate: boolean }[];\n}\n\nexport function updateNodeSelection(node: SelectableNode) {\n  const nodes = node.nodes;\n\n  if (nodes.length) {\n    if (nodes.every(n => n.selected)) {\n      node.selected = true;\n      node.indeterminate = false;\n    } else if (nodes.some(n => n.selected)) {\n      node.indeterminate = true;\n    } else if (nodes.every(n => !n.selected)) {\n      node.selected = false;\n      node.indeterminate = false;\n    }\n  }\n\n  nodes.forEach(n => updateNodeSelection(n as SelectableNode));\n}\n"],"mappings":";AASA,SAAgBA,EAAoB,GAAsB;CACxD,IAAMC,IAAQC,EAAK;CAcnB,AAZID,EAAM,WACJA,EAAM,OAAM,MAAKE,EAAE,QAAQ,KAC7B,EAAK,WAAW,IAChB,EAAK,gBAAgB,MACZF,EAAM,MAAK,MAAKE,EAAE,QAAQ,IACnC,EAAK,gBAAgB,KACZF,EAAM,OAAM,MAAK,CAACE,EAAE,QAAQ,MACrC,EAAK,WAAW,IAChB,EAAK,gBAAgB,MAIzBF,EAAM,SAAQ,MAAKD,EAAoBG,CAAmB,CAAC;AAC7D"}

package/dist/week/define.js

@@ -4,6 +4,5 @@ import { ControlGroup as n } from "../forms/control-group/control-group2.js";
 import { Week as r } from "./week2.js";
 import { define as i } from "@nvidia-elements/foundations/internal/define";
 i(r), i(t), i(n), i(e);
-//#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/foundations/internal/define';\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,CAAI,GACX,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Week","Control","ControlGroup","ControlMessage"],"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/foundations/internal/define';\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":";;;;;AAOAA,EAAOC,CAAI,GACXD,EAAOE,CAAO,GACdF,EAAOG,CAAY,GACnBH,EAAOI,CAAc"}

package/dist/week/index.js

@@ -1,2 +1 @@
-import { Week as e } from "./week2.js";
-export { e as Week };
+export { Week } from "./week2.js";

package/dist/week/week.examples.js

@@ -1,6 +1,5 @@
-//#region src/week/week.examples.ts
+// src/week/week.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=week.examples.js.map

package/dist/week/week.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"week.examples.js","names":[],"sources":["../../src/week/week.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/week/define.js';\n\nexport default {\n  title: 'Elements/Week',\n  component: 'nve-week',\n};\n\n/**\n * @summary Basic week picker input for selecting specific weeks in a year for scheduling and planning.\n */\nexport const Default = {\n  render: () => html`\n<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n</nve-week>\n`\n};\n\n/**\n * @summary Week picker with datalist providing suggested week options for quick selection from predefined weeks.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-W25\"></option>\n    <option value=\"2018-W26\"></option>\n    <option value=\"2018-W27\"></option>\n  </datalist>\n</nve-week>\n  `\n}\n\n/**\n * @summary Week pickers with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-week>\n    <label>label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week>\n    <label>disabled</label>\n    <input type=\"week\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week>\n    <label>success</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-week>\n\n  <nve-week>\n    <label>error</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-week>\n</div>`\n};\n\n/**\n * @summary Week pickers with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-week layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"week\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-week>\n\n  <nve-week layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-week>\n</div>`\n};\n\n/**\n * @summary Use CSS export parts for advanced theming of nested shadow root elements.\n * @tags test-case\n */\nexport const ExportParts = {\n  render: () => html`\n<style>\n  nve-week::part(icon-button) {\n    --background: red;\n  }\n\n  nve-week::part(icon-button-icon) {\n    --color: blue;\n  }\n</style>\n<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n</nve-week>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"week.examples.js","names":["week_examples_default"],"sources":["../../src/week/week.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/week/define.js';\n\nexport default {\n  title: 'Elements/Week',\n  component: 'nve-week',\n};\n\n/**\n * @summary Basic week picker input for selecting specific weeks in a year for scheduling and planning.\n */\nexport const Default = {\n  render: () => html`\n<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n</nve-week>\n`\n};\n\n/**\n * @summary Week picker with datalist providing suggested week options for quick selection from predefined weeks.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-W25\"></option>\n    <option value=\"2018-W26\"></option>\n    <option value=\"2018-W27\"></option>\n  </datalist>\n</nve-week>\n  `\n}\n\n/**\n * @summary Week pickers with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-week>\n    <label>label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week>\n    <label>disabled</label>\n    <input type=\"week\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week>\n    <label>success</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-week>\n\n  <nve-week>\n    <label>error</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-week>\n</div>`\n};\n\n/**\n * @summary Week pickers with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-week layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"week\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-week>\n\n  <nve-week layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-week>\n</div>`\n};\n\n/**\n * @summary Use CSS export parts for advanced theming of nested shadow root elements.\n * @tags test-case\n */\nexport const ExportParts = {\n  render: () => html`\n<style>\n  nve-week::part(icon-button) {\n    --background: red;\n  }\n\n  nve-week::part(icon-button-icon) {\n    --color: blue;\n  }\n</style>\n<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n</nve-week>\n`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/week/week.js

@@ -1,6 +1,5 @@
-//#region src/week/week.css?inline
+// src/week/week.css?inline
 var e = ":host{width:100%}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=week.js.map

package/dist/week/week.js.map

@@ -1 +1 @@
-{"version":3,"file":"week.js","names":[],"sources":["../../src/week/week.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  width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"week.js","names":["week_default"],"sources":["../../src/week/week.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  width: 100%;\n}\n"],"mappings":""}

package/dist/week/week2.js

@@ -1,13 +1,13 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Control as r } from "../forms/control/control2.js";
 import { IconButton as i } from "../icon-button/icon-button2.js";
 import { inputStyles as a } from "../input/input2.js";
 import o from "./week.js";
 import { html as s } from "lit";
 import { property as c } from "lit/decorators/property.js";
-//#region src/week/week.ts
+// src/week/week.ts
 var l = { expand: "expand" }, u = class extends r {
 	get i18nDefaults() {
 		return l;
@@ -22,7 +22,7 @@ var l = { expand: "expand" }, u = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-week",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -36,7 +36,6 @@ n([c({
 	type: String,
 	reflect: !0
 })], u.prototype, "container", void 0), u = n([e()], u);
-//#endregion
 export { u as Week };
 
 //# sourceMappingURL=week2.js.map

package/dist/week/week2.js.map

@@ -1 +1 @@
-{"version":3,"file":"week2.js","names":[],"sources":["../../src/week/week.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './week.css?inline';\n\nconst i18nDefaults = {\n  expand: 'expand'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-week\n * @description A week picker is a control that enables users to choose a week value.\n * @documentation https://nvidia.github.io/elements/docs/elements/week/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/week\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The calendar icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week\n */\n@scopedRegistry()\nexport class Week extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return i18nDefaults;\n  }\n\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-week',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button exportparts=\"icon:icon-button-icon\" part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"calendar\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAM,IAAe,EACnB,QAAQ,SACV,GAmBa,IAAN,cAAmB,EAAoC;CAC5D,IAAuB,eAA6B;EAClD,OAAO;CACT;;EAQgB,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,uFAAsF,KAAK,KAAK,OAAO,oDAAkD,KAAK,WAAW;CACtL;AACF;AAhBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAV1C,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"week2.js","names":["styles","_decorate","__decorate","week_default","i18nDefaults","Week","Control","useStyles","inputStyles","IconButton","property","scopedRegistry"],"sources":["../../src/week/week.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './week.css?inline';\n\nconst i18nDefaults = {\n  expand: 'expand'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-week\n * @description A week picker is a control that enables users to choose a week value.\n * @documentation https://nvidia.github.io/elements/docs/elements/week/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/week\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The calendar icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week\n */\n@scopedRegistry()\nexport class Week extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return i18nDefaults;\n  }\n\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-week',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button exportparts=\"icon:icon-button-icon\" part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"calendar\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAMI,IAAe,EACnB,QAAQ,SACV,GAmBaC,IAAN,cAAmBC,EAAoC;CAC5D,IAAuB,eAA6B;EAClD,OAAOF;CACT;;EAQgB,KAAA,SAAAG,EAAU;GAAC,GAAGD,EAAQ;GAAQE;GAAaR;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBS,EAAW,SAAS,MAAMA,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,uFAAsF,KAAK,KAAK,OAAO,oDAAkD,KAAK,WAAW;CACtL;AACF;AAhBGR,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,aAAA,KAAA,CAAA,GAV1C,IAAAJ,EAAA,CAAAU,EAAe,CAAA,GAAAN,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "2.20.0",
+  "version": "2.20.2",
   "release": {
     "extends": "../../release.config.js"
   },
@@ -47,7 +47,6 @@
   ],
   "sideEffects": [
     "./dist/polyfills/index.js",
-    "./dist/polyfills/custom-state-set.js",
     "./dist/test/index.js",
     "./dist/bundles/*.js",
     "./src/**/define.ts",
@@ -77,10 +76,6 @@
       "types": "./dist/polyfills/index.d.ts",
       "default": "./dist/polyfills/index.js"
     },
-    "./polyfills/custom-state-set.js": {
-      "types": "./dist/polyfills/custom-state-set.d.ts",
-      "default": "./dist/polyfills/custom-state-set.js"
-    },
     "./bundles/*": {
       "default": "./dist/bundles/*"
     },
@@ -1012,7 +1007,7 @@
   },
   "dependencies": {
     "@nvidia-elements/foundations": "^1.1.0",
-    "@nvidia-elements/forms": "^2.0.10",
+    "@nvidia-elements/forms": "^2.0.11",
     "lit": "^3.3.3",
     "lit-html": "^3.3.3"
   },
@@ -1035,23 +1030,23 @@
     "@nvidia-elements/lint": "2.9.1",
     "@nvidia-elements/styles": "^2.1.3",
     "@typescript/lib-dom": "npm:@types/web@0.0.312",
-    "@vitest/browser": "5.0.0",
-    "@vitest/browser-playwright": "5.0.0",
-    "@vitest/coverage-istanbul": "5.0.0",
-    "axe-core": "4.11.0",
+    "@vitest/browser": "5.0.5",
+    "@vitest/browser-playwright": "5.0.5",
+    "@vitest/coverage-istanbul": "5.0.5",
+    "axe-core": "4.14.0",
     "eslint": "10.13.0",
     "lit": "3.3.3",
     "lit-analyzer": "2.0.3",
     "lit-html": "3.3.3",
-    "publint": "0.3.24",
-    "stylelint": "17.14.1",
+    "publint": "0.3.25",
+    "stylelint": "17.16.0",
     "stylelint-config-standard": "40.0.0",
     "svgo": "4.1.0",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
     "typescript-7": "npm:typescript@7.0.2",
-    "vite": "8.2.2",
-    "vitest": "5.0.0"
+    "vite": "8.3.5",
+    "vitest": "5.0.5"
   },
   "wireit": {
     "ci": {

package/dist/polyfills/custom-state-set.d.ts

@@ -1,17 +0,0 @@
-declare const SUPPORTS_CUSTOM_STATES: boolean;
-/**
- * CustomStateSet Polyfill for :state() syntax downleveled to legacy :--state syntax (Chromium < v123)
- * https://html.spec.whatwg.org/multipage/custom-elements.html#exposing-custom-element-states
- *
- * https://bugzilla.mozilla.org/show_bug.cgi?id=1588763
- */
-declare class CustomStateSetPolyfill extends Set {
-    private _stateSet;
-    private _element;
-    constructor(stateSet: CustomStateSet, element: HTMLElement);
-    add(state: string): this;
-    delete(state: string): boolean;
-    clear(): void;
-}
-declare function customStateSetPolyfill(): void;
-declare function replaceToLegacyState(value: string): string;

package/dist/polyfills/custom-state-set.js

@@ -1,49 +0,0 @@
-//#region src/polyfills/custom-state-set.ts
-var e = CSS.supports("selector(:state(test))"), t = class extends Set {
-	constructor(e, t) {
-		super(), this._stateSet = e, this._element = t;
-	}
-	add(e) {
-		super.add(e);
-		try {
-			this._stateSet?.add(e.replace("--", ""));
-		} catch {
-			this._element.setAttribute(`state--${e.replace("--", "")}`, "");
-		}
-		return this;
-	}
-	delete(e) {
-		super.delete(e);
-		try {
-			this._stateSet?.delete(e);
-		} catch {
-			this._element.removeAttribute(`state--${e.replace("--", "")}`);
-		}
-		return !0;
-	}
-	clear() {
-		for (let e of this) this.delete(e);
-	}
-};
-n();
-function n() {
-	let e = HTMLElement.prototype.attachInternals;
-	Object.defineProperty(HTMLElement.prototype, "attachInternals", { value: function(...n) {
-		let r = e.call(this);
-		return Object.defineProperty(r, "states", { value: new t(r.states, this) }), r;
-	} });
-	let n = Element.prototype.matches;
-	Object.defineProperty(Element.prototype, "matches", { value: function(e) {
-		return n.call(this, r(e));
-	} });
-	let i = CSSStyleSheet.prototype.replaceSync;
-	Object.defineProperty(CSSStyleSheet.prototype, "replaceSync", { value: function(e) {
-		i.call(this, r(e));
-	} });
-}
-function r(t) {
-	return e ? t.replace(/:--([^\)]+)/g, ":state($1)") : t.replace(/:--([^\)]+)/g, "[state--$1]").replace(/:state\(([^\)]+)\)/g, "[state--$1]");
-}
-//#endregion
-
-//# sourceMappingURL=custom-state-set.js.map

package/dist/polyfills/custom-state-set.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"custom-state-set.js","names":[],"sources":["../../src/polyfills/custom-state-set.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nconst SUPPORTS_CUSTOM_STATES = CSS.supports('selector(:state(test))');\n\n/**\n * CustomStateSet Polyfill for :state() syntax downleveled to legacy :--state syntax (Chromium < v123)\n * https://html.spec.whatwg.org/multipage/custom-elements.html#exposing-custom-element-states\n *\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1588763\n */\n\nclass CustomStateSetPolyfill extends Set {\n  // not using native private fields due to terser bug\n  private _stateSet: CustomStateSet; // eslint-disable-line no-restricted-syntax\n  private _element: HTMLElement; // eslint-disable-line no-restricted-syntax\n\n  constructor(stateSet: CustomStateSet, element: HTMLElement) {\n    super();\n    this._stateSet = stateSet;\n    this._element = element;\n  }\n\n  add(state: string) {\n    super.add(state);\n    try {\n      this._stateSet?.add(state.replace('--', ''));\n      // try latest syntax :state()\n    } catch {\n      // else fallback to legacy syntax [state--*]\n      this._element.setAttribute(`state--${state.replace('--', '')}`, '');\n    }\n    return this;\n  }\n\n  delete(state: string) {\n    super.delete(state);\n    try {\n      this._stateSet?.delete(state);\n    } catch {\n      this._element.removeAttribute(`state--${state.replace('--', '')}`);\n    }\n    return true;\n  }\n\n  clear() {\n    for (const state of this) this.delete(state);\n  }\n}\n\ncustomStateSetPolyfill();\n\nfunction customStateSetPolyfill() {\n  const attachInternals = HTMLElement.prototype.attachInternals;\n  Object.defineProperty(HTMLElement.prototype, 'attachInternals', {\n    value: function (..._args: unknown[]) {\n      const internals = attachInternals.call(this) as unknown as ElementInternals;\n      Object.defineProperty(internals, 'states', { value: new CustomStateSetPolyfill(internals.states, this) });\n      return internals;\n    }\n  });\n\n  const matches = Element.prototype.matches;\n  Object.defineProperty(Element.prototype, 'matches', {\n    value: function (text: string) {\n      return matches.call(this, replaceToLegacyState(text));\n    }\n  });\n\n  const replaceSync = CSSStyleSheet.prototype.replaceSync;\n  Object.defineProperty(CSSStyleSheet.prototype, 'replaceSync', {\n    value: function (text: string) {\n      replaceSync.call(this, replaceToLegacyState(text));\n    }\n  });\n}\n\nfunction replaceToLegacyState(value: string) {\n  // if the browser does not support :state(*) selectors replace any CSS state selectors with attribute fallbacks [state-*]\n  if (!SUPPORTS_CUSTOM_STATES) {\n    return value.replace(/:--([^\\)]+)/g, '[state--$1]').replace(/:state\\(([^\\)]+)\\)/g, '[state--$1]');\n  } else {\n    return value.replace(/:--([^\\)]+)/g, ':state($1)');\n  }\n}\n"],"mappings":";AAGA,IAAM,IAAyB,IAAI,SAAS,wBAAwB,GAS9D,IAAN,cAAqC,IAAI;CAKvC,YAAY,GAA0B,GAAsB;EAG1D,AAFA,MAAM,GACN,KAAK,YAAY,GACjB,KAAK,WAAW;CAClB;CAEA,IAAI,GAAe;EACjB,MAAM,IAAI,CAAK;EACf,IAAI;GACF,KAAK,WAAW,IAAI,EAAM,QAAQ,MAAM,EAAE,CAAC;EAE7C,QAAQ;GAEN,KAAK,SAAS,aAAa,UAAU,EAAM,QAAQ,MAAM,EAAE,KAAK,EAAE;EACpE;EACA,OAAO;CACT;CAEA,OAAO,GAAe;EACpB,MAAM,OAAO,CAAK;EAClB,IAAI;GACF,KAAK,WAAW,OAAO,CAAK;EAC9B,QAAQ;GACN,KAAK,SAAS,gBAAgB,UAAU,EAAM,QAAQ,MAAM,EAAE,GAAG;EACnE;EACA,OAAO;CACT;CAEA,QAAQ;EACN,KAAK,IAAM,KAAS,MAAM,KAAK,OAAO,CAAK;CAC7C;AACF;AAEA,EAAuB;AAEvB,SAAS,IAAyB;CAChC,IAAM,IAAkB,YAAY,UAAU;CAC9C,OAAO,eAAe,YAAY,WAAW,mBAAmB,EAC9D,OAAO,SAAU,GAAG,GAAkB;EACpC,IAAM,IAAY,EAAgB,KAAK,IAAI;EAE3C,OADA,OAAO,eAAe,GAAW,UAAU,EAAE,OAAO,IAAI,EAAuB,EAAU,QAAQ,IAAI,EAAE,CAAC,GACjG;CACT,EACF,CAAC;CAED,IAAM,IAAU,QAAQ,UAAU;CAClC,OAAO,eAAe,QAAQ,WAAW,WAAW,EAClD,OAAO,SAAU,GAAc;EAC7B,OAAO,EAAQ,KAAK,MAAM,EAAqB,CAAI,CAAC;CACtD,EACF,CAAC;CAED,IAAM,IAAc,cAAc,UAAU;CAC5C,OAAO,eAAe,cAAc,WAAW,eAAe,EAC5D,OAAO,SAAU,GAAc;EAC7B,EAAY,KAAK,MAAM,EAAqB,CAAI,CAAC;CACnD,EACF,CAAC;AACH;AAEA,SAAS,EAAqB,GAAe;CAGzC,OADG,IAGI,EAAM,QAAQ,gBAAgB,YAAY,IAF1C,EAAM,QAAQ,gBAAgB,aAAa,CAAC,CAAC,QAAQ,uBAAuB,aAAa;AAIpG"}