@nvidia-elements/core 2.15.1 → 2.15.3

package/dist/tree/tree-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.js","names":[],"sources":["../../src/tree/tree-node.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  --color: var(--nve-sys-interaction-color);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --min-height: var(--nve-ref-size-800);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --text-wrap: nowrap;\n  width: 100%;\n  cursor: default;\n}\n\n[internal-host] {\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  text-wrap: var(--text-wrap);\n  display: flex;\n  align-content: center;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\nslot {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\nslot[name='nodes'] {\n  padding-inline-start: var(--nve-ref-size-500);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n}\n\nslot:not(:has-slotted) {\n  display: none !important;\n}\n\n[part='_node'] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.node-title {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--nve-ref-space-xs);\n  border-radius: var(--border-radius);\n  border-inline-start: var(--nve-ref-border-width-md) solid transparent;\n  margin-inline-start: var(--nve-ref-space-xxxs);\n  padding: var(--nve-ref-size-200) var(--nve-ref-size-200) var(--nve-ref-size-200) var(--nve-ref-size-100);\n  min-height: var(--min-height);\n  width: 100%;\n\n  & slot {\n    width: fit-content;\n  }\n\n  & slot:not([name]) {\n    width: 100%;\n    display: block;\n    position: relative;\n  }\n}\n\n[part='_node-header'] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  position: relative;\n  min-width: fit-content;\n}\n\n:host(:focus-visible) [part='_node-header'],\n::slotted(a:focus-visible)::after {\n  outline: Highlight solid 2px !important;\n  outline: 5px auto -webkit-focus-ring-color !important;\n}\n\n[name='content'] {\n  padding: var(--nve-ref-size-200);\n  display: block;\n}\n\n[part='_nodes'] {\n  width: 100%;\n  position: relative;\n  display: block;\n  padding-inline-start: var(--nve-ref-size-200);\n  overflow: hidden;\n  transition: height var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([expanded]) [part='_nodes'] {\n  /* fallback for browsers that do not support intrinsic sizing keywords with calc-size() */\n  height: auto;\n\n  /* https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_to_and_from_intrinsic_sizing_keywords_with_calc-size */\n  height: calc-size(max-content, size);\n}\n\n[part='_nodes']::before {\n  border-inline-start: var(--node-border);\n  inset-inline-start: var(--nve-ref-size-150);\n  inset-block: 0;\n  display: block;\n  content: '';\n  position: absolute;\n}\n\nnve-icon-button {\n  --width: var(--nve-ref-size-400);\n  outline: 0 !important;\n}\n\nnve-icon[name='caret'] {\n  transition: transform var(--nve-ref-animation-duration-150) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\nnve-checkbox {\n  margin-inline-start: var(--nve-ref-space-xxs);\n  margin-block-start: var(--nve-ref-space-xs);\n  align-self: start;\n}\n\ninput {\n  outline: 0 !important;\n}\n\n::slotted(a) {\n  text-decoration: none !important;\n  color: var(--color) !important;\n  outline: 0;\n  vertical-align: middle;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n\n:host(:state(selected):state(selectable-single)) .node-title {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\n:host(:state(selected):state(selectable-single)) .node-title::after {\n  width: var(--nve-ref-border-width-md);\n  border-radius: var(--nve-ref-border-radius-full);\n  background: var(--nve-sys-accent-secondary-background);\n  content: '';\n  display: block;\n  position: absolute;\n  height: 80%;\n  inset-block-start: 10%;\n  inset-inline-start: calc(var(--nve-ref-size-50) * -1);\n}\n\n:host(:state(selectable-single)) .node-title {\n  cursor: pointer;\n}\n\n:host(:state(selectable-multi)) {\n  nve-icon-button {\n    --width: var(--nve-ref-size-500);\n  }\n\n  slot[name='nodes'] {\n    padding-inline-start: var(--nve-ref-size-700);\n  }\n\n  [role='group']::before {\n    inset-inline-start: var(--nve-ref-size-200);\n  }\n}\n\n:host(:state(highlighted)) {\n  --border-radius: 0;\n\n  .node-title {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n  }\n}\n\n.node-title {\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n      )\n      0 0\n  ) !important;\n\n  &:hover {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"tree-node.js","names":[],"sources":["../../src/tree/tree-node.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  --color: var(--nve-sys-interaction-color);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --min-height: var(--nve-ref-size-800);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --text-wrap: nowrap;\n  width: 100%;\n  cursor: default;\n}\n\n[internal-host] {\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  text-wrap: var(--text-wrap);\n  display: flex;\n  align-content: center;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\nslot {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\nslot[name='nodes'] {\n  padding-inline-start: var(--nve-ref-size-500);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n}\n\nslot:not(:has-slotted) {\n  display: none !important;\n}\n\n[part='_node'] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.node-title {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--nve-ref-space-xs);\n  border-radius: var(--border-radius);\n  border-inline-start: var(--nve-ref-border-width-md) solid transparent;\n  margin-inline-start: var(--nve-ref-space-xxxs);\n  padding: var(--nve-ref-size-200) var(--nve-ref-size-200) var(--nve-ref-size-200) var(--nve-ref-size-100);\n  min-height: var(--min-height);\n\n  & slot {\n    width: fit-content;\n    flex-shrink: 0;\n  }\n\n  & slot:not([name]) {\n    width: 100%;\n    min-width: 0;\n    flex-shrink: 1;\n    display: block;\n    position: relative;\n  }\n}\n\n[part='_node-header'] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  position: relative;\n  min-width: 0;\n}\n\n:host(:focus-visible) [part='_node-header'],\n::slotted(a:focus-visible)::after {\n  outline: Highlight solid 2px !important;\n  outline: 5px auto -webkit-focus-ring-color !important;\n}\n\n[name='content'] {\n  padding: var(--nve-ref-size-200);\n  display: block;\n}\n\n[part='_nodes'] {\n  width: 100%;\n  position: relative;\n  display: block;\n  padding-inline-start: var(--nve-ref-size-200);\n  overflow: hidden;\n  transition: height var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([expanded]) [part='_nodes'] {\n  /* fallback for browsers that do not support intrinsic sizing keywords with calc-size() */\n  height: auto;\n\n  /* https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_to_and_from_intrinsic_sizing_keywords_with_calc-size */\n  height: calc-size(max-content, size);\n}\n\n[part='_nodes']::before {\n  border-inline-start: var(--node-border);\n  inset-inline-start: var(--nve-ref-size-150);\n  inset-block: 0;\n  display: block;\n  content: '';\n  position: absolute;\n}\n\nnve-icon-button {\n  --width: var(--nve-ref-size-400);\n  outline: 0 !important;\n}\n\nnve-icon[name='caret'] {\n  transition: transform var(--nve-ref-animation-duration-150) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\nnve-checkbox {\n  margin-inline-start: var(--nve-ref-space-xxs);\n  margin-block-start: var(--nve-ref-space-xs);\n  align-self: start;\n}\n\ninput {\n  outline: 0 !important;\n}\n\n::slotted(a) {\n  text-decoration: none !important;\n  color: var(--color) !important;\n  outline: 0;\n  vertical-align: middle;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n\n:host(:state(selected):state(selectable-single)) .node-title {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\n:host(:state(selected):state(selectable-single)) .node-title::after {\n  width: var(--nve-ref-border-width-md);\n  border-radius: var(--nve-ref-border-radius-full);\n  background: var(--nve-sys-accent-secondary-background);\n  content: '';\n  display: block;\n  position: absolute;\n  height: 80%;\n  inset-block-start: 10%;\n  inset-inline-start: calc(var(--nve-ref-size-50) * -1);\n}\n\n:host(:state(selectable-single)) .node-title {\n  cursor: pointer;\n}\n\n:host(:state(selectable-multi)) {\n  nve-icon-button {\n    --width: var(--nve-ref-size-500);\n  }\n\n  slot[name='nodes'] {\n    padding-inline-start: var(--nve-ref-size-700);\n  }\n\n  [role='group']::before {\n    inset-inline-start: var(--nve-ref-size-200);\n  }\n}\n\n:host(:state(highlighted)) {\n  --border-radius: 0;\n\n  .node-title {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n  }\n}\n\n.node-title {\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n      )\n      0 0\n  ) !important;\n\n  &:hover {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n  }\n}\n"],"mappings":""}

package/dist/tree/tree-node2.js

@@ -44,7 +44,7 @@ var E = class extends b {
 	static {
 		this.metadata = {
 			tag: "nve-tree-node",
-			version: "2.15.1",
+			version: "2.15.3",
 			parents: ["nve-tree", "nve-tree-node"]
 		};
 	}

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 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 Dynamic tree with programmatic node creation and management, for scalable hierarchical data handling with large datasets.\n * @tags test-case\n */\nexport const DynamicTree = {\n  render: () => html`<test-dynamic-tree></test-dynamic-tree>`\n};\n\n/**\n * @summary Tree with scrollable container for handling deep hierarchies and large datasets, ensuring optimal space usage and navigation.\n * @tags test-case\n */\nexport const Overflow = {\n  render: () => html`\n    <div style=\"width: 300px; height: 500px; overflow: auto; outline: 1px solid #ccc; padding: 12px\">\n      <nve-tree border behavior-expand>\n        <nve-tree-node expanded>\n          node 1\n          <nve-tree-node>node 1-1</nve-tree-node>\n          <nve-tree-node>node 1-2</nve-tree-node>\n          <nve-tree-node expanded>\n            node 1-3\n            <nve-tree-node>node 1-3-1</nve-tree-node>\n            <nve-tree-node>node 1-3-2</nve-tree-node>\n            <nve-tree-node expanded>\n              node 1-3-3\n              <nve-tree-node>node 1-3-3-1</nve-tree-node>\n              <nve-tree-node>node 1-3-3-2</nve-tree-node>\n              <nve-tree-node expanded>\n                node 1-3-3-3\n                <nve-tree-node>node 1-3-3-3-1</nve-tree-node>\n                <nve-tree-node>node 1-3-3-3-2</nve-tree-node>\n                <nve-tree-node expanded>\n                  node 1-3-3-3-3\n                  <nve-tree-node>node 1-3-3-3-3-1</nve-tree-node>\n                  <nve-tree-node>node 1-3-3-3-3-2</nve-tree-node>\n                  <nve-tree-node expanded>\n                    node 1-3-3-3-3-3\n                    <nve-tree-node>node 1-3-3-3-3-3-1</nve-tree-node>\n                    <nve-tree-node>node 1-3-3-3-3-3-2</nve-tree-node>\n                    <nve-tree-node expanded>\n                      node 1-3-3-3-3-3-3\n                      <nve-tree-node>node 1-3-3-3-3-3-3-1</nve-tree-node>\n                      <nve-tree-node>node 1-3-3-3-3-3-3-2</nve-tree-node>\n                      <nve-tree-node expanded>\n                        node 1-3-3-3-3-3-3-3\n                        <nve-tree-node>node 1-3-3-3-3-3-3-3-1</nve-tree-node>\n                        <nve-tree-node>node 1-3-3-3-3-3-3-3-2</nve-tree-node>\n                        <nve-tree-node expanded>\n                          node 1-3-3-3-3-3-3-3-3\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-1</nve-tree-node>\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-2</nve-tree-node>\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-3</nve-tree-node>\n                        </nve-tree-node>\n                      </nve-tree-node>\n                    </nve-tree-node>\n                  </nve-tree-node>\n                </nve-tree-node>\n              </nve-tree-node>\n            </nve-tree-node>\n          </nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node expanded>\n          node 2\n          <nve-tree-node>node 2-1</nve-tree-node>\n          <nve-tree-node>node 2-2</nve-tree-node>\n          <nve-tree-node>node 2-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree>\n    </div>\n  `\n};\n\n/**\n * @summary Tree with bulk node creation for performance testing, verifying efficient handling of large numbers of nodes and dynamic expansion.\n * @tags test-case performance\n */\nexport const BulkCreation = {\n  render: () => html`\n    <nve-tree>\n      <nve-tree-node id=\"root\" expandable>Test</nve-tree-node>\n    </nve-tree>\n    <script type=\"module\">\n    const rootEl = document.querySelector('nve-tree-node#root');\n\n    rootEl.addEventListener('open', () => {\n      const fragment = document.createDocumentFragment();\n      for (let i = 0; i < 400; i++) {\n        rootEl.expanded = true;\n        const childEl = document.createElement('nve-tree-node');\n        childEl.innerText = 'Child ' + i;\n        fragment.append(childEl);\n      }\n      rootEl.append(fragment);\n    });\n\n    rootEl.addEventListener('close', () => {\n      rootEl.expanded = false;\n      rootEl.replaceChildren(document.createTextNode('Test'));\n    });\n  </script>\n  `\n};\n\n/**\n * @summary Examples of invalid tree usage patterns for testing and documentation purposes, showing what not to do when implementing trees.\n * @tags anti-pattern\n */\nexport const Audit = {\n  render: () => html`\n    <div>\n      <nve-tree-node>node</nve-tree-node>\n    </div>\n  `\n};\n\nexport class TestDynamicTree extends LitElement {\n  @state() nodes = createTree();\n\n  render() {\n    return html`\n    <p nve-text=\"body\">total nodes: 10,000</p>\n    <nve-tree border expandable>\n      ${this.nodes.map(node => this.#getNodeList(node))}\n    </nve-tree>`;\n  }\n\n  #getNodeList(node) {\n    return html`<nve-tree-node .expandable=${node.nodes.length} .expanded=${node.expanded} @open=${e => this.#open(e, node)} @close=${e => this.#close(e, node)}>\n      ${node.label} node\n      ${node.expanded ? node.nodes.map(n => html`${this.#getNodeList(n)}`) : nothing}\n    </nve-tree-node>`\n  }\n\n  #open(e, node) {\n    e.stopPropagation();\n    node.expanded = true;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n\n  #close(e, node) {\n    e.stopPropagation();\n    node.expanded = false;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n}\n\n/** generates a tree with 10 nodes with 4 layers */\nfunction createTree() {\n  return createNodeList(10).map(i => {\n    i.nodes = createNodeList(10);\n    i.nodes.forEach(j => {\n      j.nodes = createNodeList(10);\n      j.nodes.forEach(k => {\n        k.nodes = createNodeList(10);\n      })\n    })\n    return i;\n  });\n}\n\nfunction createNodeList(nodes: number) {\n  return new Array(nodes).fill('').map((_, i) => ({ label: `${i}`, expanded: false, nodes: [] }));\n}\n\ncustomElements.get('test-dynamic-tree') || customElements.define('test-dynamic-tree', TestDynamicTree);"],"mappings":";AAGA,IAAA,IAAe"}
+{"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 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/**\n * @summary Examples of invalid tree usage patterns for testing and documentation purposes, showing what not to do when implementing trees.\n * @tags anti-pattern\n */\nexport const Audit = {\n  render: () => html`\n    <div>\n      <nve-tree-node>node</nve-tree-node>\n    </div>\n  `\n};\n\nexport class TestDynamicTree extends LitElement {\n  @state() nodes = createTree();\n\n  render() {\n    return html`\n    <p nve-text=\"body\">total nodes: 10,000</p>\n    <nve-tree border expandable>\n      ${this.nodes.map(node => this.#getNodeList(node))}\n    </nve-tree>`;\n  }\n\n  #getNodeList(node) {\n    return html`<nve-tree-node .expandable=${node.nodes.length} .expanded=${node.expanded} @open=${e => this.#open(e, node)} @close=${e => this.#close(e, node)}>\n      ${node.label} node\n      ${node.expanded ? node.nodes.map(n => html`${this.#getNodeList(n)}`) : nothing}\n    </nve-tree-node>`\n  }\n\n  #open(e, node) {\n    e.stopPropagation();\n    node.expanded = true;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n\n  #close(e, node) {\n    e.stopPropagation();\n    node.expanded = false;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n}\n\n/** generates a tree with 10 nodes with 4 layers */\nfunction createTree() {\n  return createNodeList(10).map(i => {\n    i.nodes = createNodeList(10);\n    i.nodes.forEach(j => {\n      j.nodes = createNodeList(10);\n      j.nodes.forEach(k => {\n        k.nodes = createNodeList(10);\n      })\n    })\n    return i;\n  });\n}\n\nfunction createNodeList(nodes: number) {\n  return new Array(nodes).fill('').map((_, i) => ({ label: `${i}`, expanded: false, nodes: [] }));\n}\n\ncustomElements.get('test-dynamic-tree') || customElements.define('test-dynamic-tree', TestDynamicTree);"],"mappings":";AAGA,IAAA,IAAe"}

package/dist/tree/tree.examples.json

@@ -96,6 +96,17 @@
       "composition": true,
       "tags": []
     },
+    {
+      "id": "tree-max-width",
+      "name": "MaxWidth",
+      "template": "<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",
+      "summary": "Tree with a max width, ensuring the tree does not exceed the specified width.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
     {
       "id": "tree-dynamic-tree",
       "name": "DynamicTree",

package/dist/tree/tree.js

@@ -1,5 +1,5 @@
 //#region src/tree/tree.css?inline
-var e = ":host{--max-width: 100%;display:block;min-width:fit-content}: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:fit-content}";
+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 };
 

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: fit-content;\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: fit-content;\n}\n"],"mappings":""}
+{"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":""}

package/dist/tree/tree2.js

@@ -22,7 +22,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-tree",
-			version: "2.15.1",
+			version: "2.15.3",
 			children: ["nve-tree-node"]
 		};
 	}

package/dist/week/week2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-week",
-			version: "2.15.1"
+			version: "2.15.3"
 		};
 	}
 	static {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "2.15.1",
+  "version": "2.15.3",
   "release": {
     "extends": "../../release.config.js"
   },
@@ -934,18 +934,6 @@
       "types": "./dist/tree/define.d.ts",
       "default": "./dist/tree/define.js"
     },
-    "./viewport": {
-      "types": "./dist/viewport/index.d.ts",
-      "default": "./dist/viewport/index.js"
-    },
-    "./viewport/index.js": {
-      "types": "./dist/viewport/index.d.ts",
-      "default": "./dist/viewport/index.js"
-    },
-    "./viewport/define.js": {
-      "types": "./dist/viewport/define.d.ts",
-      "default": "./dist/viewport/define.js"
-    },
     "./week": {
       "types": "./dist/week/index.d.ts",
       "default": "./dist/week/index.js"
@@ -1007,7 +995,7 @@
     "@internals/testing": "0.0.0",
     "@internals/vite": "0.0.0",
     "@lit-labs/virtualizer": "2.1.1",
-    "@nvidia-elements/lint": "2.7.1",
+    "@nvidia-elements/lint": "2.7.2",
     "@nvidia-elements/styles": "^2.1.3",
     "@typescript/lib-dom": "npm:@types/web@0.0.312",
     "@vitest/browser": "5.0.0",

package/dist/viewport/define.d.ts

@@ -1,8 +0,0 @@
-import { Viewport, ViewportGridlines, ViewportMinimap } from '@nvidia-elements/core/viewport';
-declare global {
-    interface HTMLElementTagNameMap {
-        'nve-viewport': Viewport;
-        'nve-viewport-gridlines': ViewportGridlines;
-        'nve-viewport-minimap': ViewportMinimap;
-    }
-}

package/dist/viewport/define.js

@@ -1,8 +0,0 @@
-import { define as e } from "../internal/utils/dom.js";
-import { Viewport as t } from "./viewport2.js";
-import { ViewportGridlines as n } from "./viewport-gridlines2.js";
-import { ViewportMinimap as r } from "./viewport-minimap2.js";
-e(t), e(n), e(r);
-//#endregion
-
-//# sourceMappingURL=define.js.map

package/dist/viewport/define.js.map

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

package/dist/viewport/index.d.ts

@@ -1,4 +0,0 @@
-export * from './viewport.js';
-export * from './viewport-gridlines.js';
-export * from './viewport-minimap.js';
-export type { ViewportAnimationOptions, ViewportDiscretePanDetail, ViewportPanBehavior, ViewportPanDetail, ViewportPanEndDetail, ViewportPanEndReason, ViewportNavigationSource, ViewportPanProposal, ViewportPanUpdateProposal, ViewportPanEndRequest, ViewportPanSession, ViewportZoomProposal, ViewportZoomRequestOptions, ViewportPoint, ViewportPointerPanDetail, ViewportRect, ViewportRevealOptions, ViewportTransform, ViewportWheelPanDetail, ViewportZoomDetail } from './viewport.types.js';

package/dist/viewport/index.js

@@ -1,4 +0,0 @@
-import { Viewport as e } from "./viewport2.js";
-import { ViewportGridlines as t } from "./viewport-gridlines2.js";
-import { ViewportMinimap as n } from "./viewport-minimap2.js";
-export { e as Viewport, t as ViewportGridlines, n as ViewportMinimap };

package/dist/viewport/viewport-animation.controller.d.ts

@@ -1,21 +0,0 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type { ViewportAnimationOptions, ViewportTransform } from './viewport.types.js';
-interface ViewportSize {
-    readonly width: number;
-    readonly height: number;
-}
-export interface ViewportAnimationDelegate {
-    readonly commitTransform: (transform: ViewportTransform) => void;
-    readonly clampScale: (value: number) => number;
-    readonly getTransform: () => ViewportTransform;
-    readonly getViewportSize: () => ViewportSize;
-}
-export declare class ViewportAnimationController implements ReactiveController {
-    #private;
-    constructor(reactiveHost: ReactiveControllerHost, delegate: ViewportAnimationDelegate);
-    get destinationScale(): number | undefined;
-    animateTo(target: Partial<ViewportTransform>, options?: ViewportAnimationOptions): void;
-    cancel(): void;
-    hostDisconnected(): void;
-}
-export {};

package/dist/viewport/viewport-animation.controller.js

@@ -1,93 +0,0 @@
-import { finiteOr as e, nonnegativeFiniteOr as t } from "../internal/utils/numeric.js";
-//#region src/viewport/viewport-animation.controller.ts
-var n = class {
-	#e;
-	#t;
-	constructor(e, t) {
-		this.#e = t, e.addController(this);
-	}
-	get destinationScale() {
-		return this.#t?.target.scale;
-	}
-	animateTo(n, i = {}) {
-		let o = this.#e.getTransform(), l = {
-			x: e(n.x, o.x),
-			y: e(n.y, o.y),
-			scale: this.#e.clampScale(n.scale ?? o.scale)
-		};
-		if (this.cancel(), s(o, l)) return;
-		let u = t(i.duration, r(o.scale, l.scale));
-		if (u === 0 || a()) {
-			this.#e.commitTransform(l);
-			return;
-		}
-		let d = {
-			duration: u,
-			frame: 0,
-			start: o,
-			startCenter: c(o, this.#e.getViewportSize()),
-			target: l
-		};
-		this.#t = d, d.frame = requestAnimationFrame(this.#n);
-	}
-	cancel() {
-		let e = this.#t;
-		e && (cancelAnimationFrame(e.frame), this.#t = void 0);
-	}
-	hostDisconnected() {
-		this.cancel();
-	}
-	#n = (e) => {
-		let t = this.#t;
-		if (!t) return;
-		if (t.startTime === void 0) return this.#r(t, e);
-		let n = Math.min(1, Math.max(0, (e - t.startTime) / t.duration)), r = o(n), a = this.#e.getViewportSize(), s = c(t.target, a), l = 1 / i(1 / t.start.scale, 1 / t.target.scale, r), u = i(t.startCenter.x, s.x, r), d = i(t.startCenter.y, s.y, r);
-		this.#e.commitTransform({
-			scale: l,
-			x: u - a.width / (2 * l),
-			y: d - a.height / (2 * l)
-		}), n >= 1 ? (this.#t = void 0, this.#e.commitTransform(t.target)) : t.frame = requestAnimationFrame(this.#n);
-	};
-	#r(e, t) {
-		e.startTime = t, e.frame = requestAnimationFrame(this.#n);
-	}
-};
-function r(e, t) {
-	return Math.min(400, Math.max(150, 150 + Math.abs(Math.log2(t / e)) * 100));
-}
-function i(e, t, n) {
-	return e + (t - e) * n;
-}
-function a() {
-	return typeof matchMedia == "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function o(e) {
-	let t = e;
-	for (let n = 0; n < 6; n += 1) {
-		let n = l(t, .4, .2) - e, r = u(t, .4, .2);
-		if (Math.abs(r) < 1e-7) break;
-		t = Math.min(1, Math.max(0, t - n / r));
-	}
-	return l(t, 0, 1);
-}
-function s(e, t) {
-	return e.x === t.x && e.y === t.y && e.scale === t.scale;
-}
-function c(e, t) {
-	return {
-		x: e.x + t.width / (2 * e.scale),
-		y: e.y + t.height / (2 * e.scale)
-	};
-}
-function l(e, t, n) {
-	let r = 1 - e;
-	return 3 * r ** 2 * e * t + 3 * r * e ** 2 * n + e ** 3;
-}
-function u(e, t, n) {
-	let r = 1 - e;
-	return 3 * r ** 2 * t + 6 * r * e * (n - t) + 3 * e ** 2 * (1 - n);
-}
-//#endregion
-export { n as ViewportAnimationController };
-
-//# sourceMappingURL=viewport-animation.controller.js.map

package/dist/viewport/viewport-animation.controller.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"viewport-animation.controller.js","names":[],"sources":["../../src/viewport/viewport-animation.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { finiteOr, nonnegativeFiniteOr } from '@nvidia-elements/core/internal';\nimport type { ViewportAnimationOptions, ViewportPoint, ViewportTransform } from './viewport.types.js';\n\ninterface ViewportAnimation {\n  frame: number;\n  readonly start: ViewportTransform;\n  readonly target: ViewportTransform;\n  readonly startCenter: ViewportPoint;\n  startTime?: number;\n  readonly duration: number;\n}\n\ninterface ViewportSize {\n  readonly width: number;\n  readonly height: number;\n}\n\nexport interface ViewportAnimationDelegate {\n  readonly commitTransform: (transform: ViewportTransform) => void;\n  readonly clampScale: (value: number) => number;\n  readonly getTransform: () => ViewportTransform;\n  readonly getViewportSize: () => ViewportSize;\n}\n\nexport class ViewportAnimationController implements ReactiveController {\n  readonly #delegate: ViewportAnimationDelegate;\n  #animation?: ViewportAnimation;\n\n  constructor(reactiveHost: ReactiveControllerHost, delegate: ViewportAnimationDelegate) {\n    this.#delegate = delegate;\n    reactiveHost.addController(this);\n  }\n\n  get destinationScale(): number | undefined {\n    return this.#animation?.target.scale;\n  }\n\n  animateTo(target: Partial<ViewportTransform>, options: ViewportAnimationOptions = {}): void {\n    const start = this.#delegate.getTransform();\n    const next: ViewportTransform = {\n      x: finiteOr(target.x, start.x),\n      y: finiteOr(target.y, start.y),\n      scale: this.#delegate.clampScale(target.scale ?? start.scale)\n    };\n    this.cancel();\n    if (transformsEqual(start, next)) return;\n    const duration = nonnegativeFiniteOr(options.duration, defaultAnimationDuration(start.scale, next.scale));\n    if (duration === 0 || prefersReducedMotion()) {\n      this.#delegate.commitTransform(next);\n      return;\n    }\n    const viewport = this.#delegate.getViewportSize();\n    const animation: ViewportAnimation = {\n      duration,\n      frame: 0,\n      start,\n      startCenter: viewportCenter(start, viewport),\n      target: next\n    };\n    this.#animation = animation;\n    animation.frame = requestAnimationFrame(this.#animateFrame);\n  }\n\n  cancel(): void {\n    const animation = this.#animation;\n    if (!animation) return;\n    cancelAnimationFrame(animation.frame);\n    this.#animation = undefined;\n  }\n\n  hostDisconnected(): void {\n    this.cancel();\n  }\n\n  #animateFrame = (time: number): void => {\n    const animation = this.#animation;\n    if (!animation) return;\n    if (animation.startTime === undefined) return this.#startAnimation(animation, time);\n    const progress = Math.min(1, Math.max(0, (time - animation.startTime) / animation.duration));\n    const eased = standardEasing(progress);\n    const viewport = this.#delegate.getViewportSize();\n    const targetCenter = viewportCenter(animation.target, viewport);\n    const scale = 1 / lerp(1 / animation.start.scale, 1 / animation.target.scale, eased);\n    const centerX = lerp(animation.startCenter.x, targetCenter.x, eased);\n    const centerY = lerp(animation.startCenter.y, targetCenter.y, eased);\n    this.#delegate.commitTransform({\n      scale,\n      x: centerX - viewport.width / (2 * scale),\n      y: centerY - viewport.height / (2 * scale)\n    });\n    if (progress >= 1) {\n      this.#animation = undefined;\n      this.#delegate.commitTransform(animation.target);\n    } else {\n      animation.frame = requestAnimationFrame(this.#animateFrame);\n    }\n  };\n\n  #startAnimation(animation: ViewportAnimation, time: number): void {\n    animation.startTime = time;\n    animation.frame = requestAnimationFrame(this.#animateFrame);\n  }\n}\n\nfunction defaultAnimationDuration(startScale: number, targetScale: number): number {\n  return Math.min(400, Math.max(150, 150 + Math.abs(Math.log2(targetScale / startScale)) * 100));\n}\n\nfunction lerp(start: number, end: number, progress: number): number {\n  return start + (end - start) * progress;\n}\n\nfunction prefersReducedMotion(): boolean {\n  return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\nfunction standardEasing(progress: number): number {\n  let parameter = progress;\n  for (let iteration = 0; iteration < 6; iteration += 1) {\n    const x = cubicBezier(parameter, 0.4, 0.2) - progress;\n    const slope = cubicBezierSlope(parameter, 0.4, 0.2);\n    if (Math.abs(slope) < 1e-7) break;\n    parameter = Math.min(1, Math.max(0, parameter - x / slope));\n  }\n  return cubicBezier(parameter, 0, 1);\n}\n\nfunction transformsEqual(first: ViewportTransform, second: ViewportTransform): boolean {\n  return first.x === second.x && first.y === second.y && first.scale === second.scale;\n}\n\nfunction viewportCenter(transform: ViewportTransform, viewport: ViewportSize): ViewportPoint {\n  return {\n    x: transform.x + viewport.width / (2 * transform.scale),\n    y: transform.y + viewport.height / (2 * transform.scale)\n  };\n}\n\nfunction cubicBezier(parameter: number, firstControl: number, secondControl: number): number {\n  const inverse = 1 - parameter;\n  return 3 * inverse ** 2 * parameter * firstControl + 3 * inverse * parameter ** 2 * secondControl + parameter ** 3;\n}\n\nfunction cubicBezierSlope(parameter: number, firstControl: number, secondControl: number): number {\n  const inverse = 1 - parameter;\n  return (\n    3 * inverse ** 2 * firstControl +\n    6 * inverse * parameter * (secondControl - firstControl) +\n    3 * parameter ** 2 * (1 - secondControl)\n  );\n}\n"],"mappings":"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"}

package/dist/viewport/viewport-autofit.controller.d.ts

@@ -1,18 +0,0 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type { ViewportClientRect } from './viewport-fitting.utils.js';
-interface ViewportAutoFitHost extends ReactiveControllerHost, HTMLElement {
-    readonly autoFit: boolean;
-    readonly hasUpdated: boolean;
-}
-type ApplyInitialFit = (clientRects: readonly ViewportClientRect[]) => void;
-/** Coordinates one initial fit once default-slot children have definitions and measurable layout. */
-export declare class ViewportAutoFitController implements ReactiveController {
-    #private;
-    constructor(host: ViewportAutoFitHost, applyInitialFit: ApplyInitialFit);
-    hostConnected(): void;
-    hostDisconnected(): void;
-    hostUpdated(): void;
-    contentChanged: (event: Event) => void;
-    consume(): void;
-}
-export {};

package/dist/viewport/viewport-autofit.controller.js

@@ -1,105 +0,0 @@
-import { getChildren as e, getCustomElementRegistry as t } from "../internal/utils/dom.js";
-//#region src/viewport/viewport-autofit.controller.ts
-var n = class {
-	#e;
-	#t;
-	#n;
-	#r;
-	#i;
-	#a;
-	#o;
-	constructor(e, t) {
-		this.#r = !1, this.#a = 0, this.contentChanged = (e) => {
-			e.target instanceof HTMLSlotElement && this.#c(e.target);
-		}, this.#t = e, this.#e = t, e.addController(this);
-	}
-	hostConnected() {
-		this.#t.hasUpdated && this.#c();
-	}
-	hostDisconnected() {
-		this.#s();
-	}
-	hostUpdated() {
-		this.#t.autoFit ? this.#c() : this.#s();
-	}
-	consume() {
-		!this.#t.autoFit || this.#r || (this.#r = !0, this.#n = void 0, this.#a += 1, this.#i !== void 0 && cancelAnimationFrame(this.#i), this.#i = void 0, this.#o?.disconnect(), this.#o = void 0);
-	}
-	#s() {
-		this.#a += 1, this.#n = void 0, this.#i !== void 0 && cancelAnimationFrame(this.#i), this.#i = void 0, this.#o?.disconnect(), this.#o = void 0;
-	}
-	#c(t) {
-		if (!this.#t.autoFit || this.#r || this.#n || !this.#t.isConnected) return;
-		let n = (t ? e(t) : Array.from(this.#t.children).filter((e) => !e.slot)).filter((e) => !(e instanceof HTMLElement && e.hidden));
-		this.#n = n;
-		let r = ++this.#a;
-		this.#l(n).then(() => this.#u(r));
-	}
-	async #l(e) {
-		let n = /* @__PURE__ */ new Map();
-		for (let r of e) for (let e of [r, ...r.querySelectorAll(":not(:defined)")]) {
-			if (e.namespaceURI !== "http://www.w3.org/1999/xhtml" || !e.localName.includes("-") || i(e, r)) continue;
-			let a = t(e);
-			if (!a) continue;
-			let o = n.get(a) ?? /* @__PURE__ */ new Set();
-			o.add(e.localName), n.set(a, o);
-		}
-		await Promise.all(Array.from(n, ([e, t]) => Promise.all(Array.from(t, (t) => r(e, t)))));
-	}
-	#u(e) {
-		if (this.#m(e)) {
-			if (typeof ResizeObserver > "u") {
-				queueMicrotask(() => this.#f(e));
-				return;
-			}
-			this.#o?.disconnect(), this.#o = new ResizeObserver(() => this.#d(e)), this.#o.observe(this.#t);
-		}
-	}
-	#d(e) {
-		!this.#m(e) || this.#t.clientWidth <= 0 || this.#t.clientHeight <= 0 || (this.#o?.disconnect(), this.#o = void 0, this.#i = requestAnimationFrame(() => {
-			this.#i = void 0, this.#f(e);
-		}));
-	}
-	#f(e) {
-		if (!this.#m(e) || this.#t.clientWidth <= 0 || this.#t.clientHeight <= 0) return;
-		let t = this.#n;
-		if (!t) return;
-		let n = this.#p(t);
-		this.consume(), n.length && this.#e(n);
-	}
-	#p(e) {
-		let t = new Set(Array.from(this.#t.children).filter((e) => !e.slot)), n = [];
-		for (let r of e) {
-			if (!t.has(r) || r instanceof HTMLElement && r.hidden) continue;
-			let e = r.getBoundingClientRect();
-			e.width > 0 && e.height > 0 && n.push({
-				height: e.height,
-				left: e.left,
-				top: e.top,
-				width: e.width
-			});
-		}
-		return n;
-	}
-	#m(e) {
-		return e === this.#a && this.#t.autoFit && !this.#r && this.#n !== void 0 && this.#t.isConnected;
-	}
-};
-async function r(e, t) {
-	try {
-		await e.whenDefined(t);
-	} catch (e) {
-		if (!(e instanceof DOMException) || e.name !== "SyntaxError") throw e;
-	}
-}
-function i(e, t) {
-	for (let n = e; n; n = n.parentElement) {
-		if (n instanceof HTMLElement && n.hidden) return !0;
-		if (n === t) return !1;
-	}
-	return !1;
-}
-//#endregion
-export { n as ViewportAutoFitController };
-
-//# sourceMappingURL=viewport-autofit.controller.js.map

package/dist/viewport/viewport-autofit.controller.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"viewport-autofit.controller.js","names":[],"sources":["../../src/viewport/viewport-autofit.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { getChildren, getCustomElementRegistry } from '@nvidia-elements/core/internal';\nimport type { ViewportClientRect } from './viewport-fitting.utils.js';\n\ninterface ViewportAutoFitHost extends ReactiveControllerHost, HTMLElement {\n  readonly autoFit: boolean;\n  readonly hasUpdated: boolean;\n}\n\ntype ApplyInitialFit = (clientRects: readonly ViewportClientRect[]) => void;\n\n/** Coordinates one initial fit once default-slot children have definitions and measurable layout. */\nexport class ViewportAutoFitController implements ReactiveController {\n  readonly #applyInitialFit: ApplyInitialFit;\n  readonly #host: ViewportAutoFitHost;\n  #children?: readonly Element[];\n  #consumed = false;\n  #frame?: number;\n  #generation = 0;\n  #observer?: ResizeObserver;\n\n  constructor(host: ViewportAutoFitHost, applyInitialFit: ApplyInitialFit) {\n    this.#host = host;\n    this.#applyInitialFit = applyInitialFit;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    if (this.#host.hasUpdated) this.#start();\n  }\n\n  hostDisconnected(): void {\n    this.#cancelPending();\n  }\n\n  hostUpdated(): void {\n    if (this.#host.autoFit) {\n      this.#start();\n    } else {\n      this.#cancelPending();\n    }\n  }\n\n  contentChanged = (event: Event): void => {\n    if (!(event.target instanceof HTMLSlotElement)) return;\n    this.#start(event.target);\n  };\n\n  consume(): void {\n    if (!this.#host.autoFit || this.#consumed) return;\n    this.#consumed = true;\n    this.#children = undefined;\n    this.#generation += 1;\n    if (this.#frame !== undefined) cancelAnimationFrame(this.#frame);\n    this.#frame = undefined;\n    this.#observer?.disconnect();\n    this.#observer = undefined;\n  }\n\n  #cancelPending(): void {\n    this.#generation += 1;\n    this.#children = undefined;\n    if (this.#frame !== undefined) cancelAnimationFrame(this.#frame);\n    this.#frame = undefined;\n    this.#observer?.disconnect();\n    this.#observer = undefined;\n  }\n\n  #start(slot?: HTMLSlotElement): void {\n    if (!this.#host.autoFit || this.#consumed || this.#children || !this.#host.isConnected) return;\n    const children = (slot ? getChildren(slot) : Array.from(this.#host.children).filter(child => !child.slot)).filter(\n      child => !(child instanceof HTMLElement && child.hidden)\n    );\n    this.#children = children;\n    const generation = ++this.#generation;\n    void this.#waitForDefinitions(children).then(() => this.#waitForLayout(generation));\n  }\n\n  async #waitForDefinitions(children: readonly Element[]): Promise<void> {\n    const definitions = new Map<CustomElementRegistry, Set<string>>();\n    for (const child of children) {\n      for (const element of [child, ...child.querySelectorAll(':not(:defined)')]) {\n        if (\n          element.namespaceURI !== 'http://www.w3.org/1999/xhtml' ||\n          !element.localName.includes('-') ||\n          isExplicitlyHidden(element, child)\n        ) {\n          continue;\n        }\n        const registry = getCustomElementRegistry(element);\n        if (!registry) continue;\n        const names = definitions.get(registry) ?? new Set<string>();\n        names.add(element.localName);\n        definitions.set(registry, names);\n      }\n    }\n    await Promise.all(\n      Array.from(definitions, ([registry, names]) =>\n        Promise.all(Array.from(names, name => whenDefined(registry, name)))\n      )\n    );\n  }\n\n  #waitForLayout(generation: number): void {\n    if (!this.#isCurrent(generation)) return;\n    if (typeof ResizeObserver === 'undefined') {\n      queueMicrotask(() => this.#fit(generation));\n      return;\n    }\n    this.#observer?.disconnect();\n    this.#observer = new ResizeObserver(() => this.#scheduleFit(generation));\n    this.#observer.observe(this.#host);\n  }\n\n  #scheduleFit(generation: number): void {\n    if (!this.#isCurrent(generation) || this.#host.clientWidth <= 0 || this.#host.clientHeight <= 0) return;\n    this.#observer?.disconnect();\n    this.#observer = undefined;\n    this.#frame = requestAnimationFrame(() => {\n      this.#frame = undefined;\n      this.#fit(generation);\n    });\n  }\n\n  #fit(generation: number): void {\n    if (!this.#isCurrent(generation) || this.#host.clientWidth <= 0 || this.#host.clientHeight <= 0) return;\n    const children = this.#children;\n    if (!children) return;\n    const measurableBounds = this.#measurableClientRects(children);\n    this.consume();\n    if (measurableBounds.length) this.#applyInitialFit(measurableBounds);\n  }\n\n  #measurableClientRects(children: readonly Element[]): ViewportClientRect[] {\n    const assigned = new Set(Array.from(this.#host.children).filter(child => !child.slot));\n    const measurableBounds: ViewportClientRect[] = [];\n    for (const child of children) {\n      if (!assigned.has(child) || (child instanceof HTMLElement && child.hidden)) continue;\n      const bounds = child.getBoundingClientRect();\n      if (bounds.width > 0 && bounds.height > 0) {\n        measurableBounds.push({ height: bounds.height, left: bounds.left, top: bounds.top, width: bounds.width });\n      }\n    }\n    return measurableBounds;\n  }\n\n  #isCurrent(generation: number): boolean {\n    return (\n      generation === this.#generation &&\n      this.#host.autoFit &&\n      !this.#consumed &&\n      this.#children !== undefined &&\n      this.#host.isConnected\n    );\n  }\n}\n\nasync function whenDefined(registry: CustomElementRegistry, name: string): Promise<void> {\n  try {\n    await registry.whenDefined(name);\n  } catch (error) {\n    if (!(error instanceof DOMException) || error.name !== 'SyntaxError') throw error;\n  }\n}\n\nfunction isExplicitlyHidden(element: Element, child: Element): boolean {\n  for (let current: Element | null = element; current; current = current.parentElement) {\n    if (current instanceof HTMLElement && current.hidden) return true;\n    if (current === child) return false;\n  }\n  return false;\n}\n"],"mappings":"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"}

package/dist/viewport/viewport-fitting.utils.d.ts

@@ -1,36 +0,0 @@
-import type { ViewportRect, ViewportTransform } from './viewport.types.js';
-export interface ViewportClientRect {
-    readonly height: number;
-    readonly left: number;
-    readonly top: number;
-    readonly width: number;
-}
-interface ViewportClientFrame {
-    readonly left: number;
-    readonly top: number;
-}
-export interface ViewportFitOptions {
-    readonly inset?: number;
-    readonly scale?: number;
-}
-/** Converts measurable client-space rectangles into their single content-space union. */
-export declare function contentBoundsFromClientRects(clientRects: Iterable<ViewportClientRect>, viewportFrame: ViewportClientFrame, transform: ViewportTransform): ViewportRect | undefined;
-/** Calculates the viewport transform that centers or fits a content-space region. */
-export declare function revealTarget(region: {
-    x: number;
-    y: number;
-    width?: number;
-    height?: number;
-}, configuration: {
-    options: ViewportFitOptions;
-    scaleRange: {
-        min: number;
-        max: number;
-    };
-    transform: ViewportTransform;
-    viewport: {
-        width: number;
-        height: number;
-    };
-}): ViewportTransform;
-export {};