@nvidia-elements/core 0.0.1 → 0.0.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node2.js","names":["#i18nController","#tree","#isExpandable","#nodeUpdate","#toggleExpand","#toggleMultiSelection","#nodeHeaderClick","#setupKeyNavInteractions","#typeExpandableController","#toggleExpandableState","#toggleSelection","#toggleSingleSelection","#typeSelectableController"],"sources":["../../src/tree/tree-node.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n  I18nController,\n  TypeExpandableController,\n  TypeSelectableController,\n  attachInternals,\n  audit,\n  getFlattenedFocusableItems,\n  hostAttr,\n  scopedRegistry,\n  stateExpanded,\n  stateHighlighted,\n  stateSelected,\n  typeAnchor,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport type { Tree } from './tree.js';\nimport styles from './tree-node.css?inline';\nimport { updateNodeSelection } from './utils.js';\n\n/**\n * @element nve-tree-node\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 * @since 1.2.0\n * @entrypoint \\@nvidia-elements/core/tree\n * @event open - Dispatched when the node opens.\n * @event close - Dispatched when the node closes.\n * @event select - Dispatched when the node selection state changes.\n * @command --select - use to select the node\n * @command --deselect - use to deselect the node\n * @command --toggle-select - use to toggle the node selection state\n * @command --open - use to open the node\n * @command --close - use to close the node\n * @command --toggle - use to toggle open / closed state of the node\n * @slot - Use default slot for basic text content or nested <nve-tree-node> elements.\n * @slot content - Use for extended long form content containing interactive elements or form inputs.\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --font-size\n * @cssprop --min-height\n * @cssprop --text-wrap\n * @cssprop --font-weight\n * @cssprop --width\n\n * @csspart icon-button - The icon button element\n * @csspart icon - The icon element\n * @csspart checkbox - The checkbox element\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/treeview/\n *\n */\n@audit()\n@typeSSR({ log: false }) // warning about ssr mismatch disabled as tree node will never be a 1:1 match in ssr due to performance constraints and slot complexity\n@typeAnchor()\n@stateSelected()\n@stateExpanded()\n@scopedRegistry()\n@stateHighlighted()\nexport class TreeNode extends LitElement {\n  /**\n   * Determines if node is in an expanded state.\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Determines whether if node is in a selected state.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /**\n   * Determines whether a node can be expandable. Expandable by default if slotted nodes exist.\n   */\n  @property({ type: Boolean }) expandable = false;\n\n  /**\n   * Determines whether a node 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 the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI.\n   */\n  @property({ type: Boolean }) highlighted = false;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  @hostAttr() slot = 'nodes';\n\n  get #tree() {\n    return this.closest<Tree>('nve-tree');\n  }\n\n  /**\n   * Returns list of child nodes\n   */\n  @queryAssignedElements({ slot: 'nodes' }) readonly nodes!: TreeNode[];\n\n  /* @private */\n  @state() indeterminate = false;\n\n  /* @private */\n  @state() behaviorExpand = false;\n\n  /* @private */\n  @state() behaviorSelect = false;\n\n  #typeExpandableController = new TypeExpandableController(this);\n\n  #typeSelectableController = new TypeSelectableController(this);\n\n  get #isExpandable() {\n    return this.expandable || this.expanded || !!this.nodes?.length;\n  }\n\n  static metadata = {\n    tag: 'nve-tree-node',\n    version: '0.0.0',\n    parents: ['nve-tree', 'nve-tree-node']\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Icon.metadata.tag]: Icon,\n    [Checkbox.metadata.tag]: Checkbox\n  };\n\n  static styles = useStyles([styles]);\n\n  declare _internals: ElementInternals;\n\n  /* eslint-disable @nvidia-elements/lint/no-missing-control-label */\n  render() {\n    return html`\n      <div internal-host @slotchange=${this.#nodeUpdate}>\n        <div part=\"_node\">\n          ${\n            this.#isExpandable\n              ? html`\n            <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @pointerup=${this.#toggleExpand} role=\"presentation\" tabindex=\"-1\" size=\"sm\" container=\"inline\" nofocus>\n              <nve-icon part=\"icon\" name=\"caret\" direction=${this.expanded ? 'down' : 'right'} size=\"sm\"></nve-icon>\n            </nve-icon-button>`\n              : nothing\n          }\n          ${\n            this.selectable === 'multi'\n              ? html`\n            <nve-checkbox part=\"checkbox\" nofocus>\n              <input type=\"checkbox\" @change=${this.#toggleMultiSelection} .checked=${this.selected} .indeterminate=${this.indeterminate} .ariaLabel=${this.i18n.expand} tabindex=\"-1\" />\n            </nve-checkbox>`\n              : nothing\n          }\n          <div tabindex=\"0\" part=\"_node-header\">\n            <slot tabindex=\"0\" class=\"node-title\" @click=${this.#nodeHeaderClick}></slot>\n            <slot name=\"content\" part=\"_content\"></slot>\n          </div>\n        </div>\n        <div role=\"group\" part=\"_nodes\"><slot name=\"nodes\"></slot></div>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'treeitem';\n    this.#setupKeyNavInteractions();\n    this.#nodeUpdate();\n  }\n\n  /** opens and sets the expanded state automatically if behaviorExpand is true */\n  open() {\n    this.#typeExpandableController.open();\n  }\n\n  /** closes and sets the expanded state automatically if behaviorExpand is true */\n  close() {\n    this.#typeExpandableController.close();\n  }\n\n  #nodeUpdate() {\n    this.requestUpdate();\n    this.#toggleExpandableState();\n  }\n\n  #toggleExpandableState() {\n    this.#isExpandable ? this._internals.states.add('is-expandable') : this._internals.states.delete('is-expandable');\n  }\n\n  #setupKeyNavInteractions() {\n    this.addEventListener('keyup', e => {\n      if (this.#isExpandable && e.code === 'ArrowLeft' && e.target === this) {\n        this.close();\n      }\n\n      if (this.#isExpandable && e.code === 'ArrowRight' && e.target === this) {\n        this.open();\n      }\n\n      if (e.code === 'Space' && e.target === this && this.selectable) {\n        e.preventDefault();\n        this.#toggleSelection();\n      }\n    });\n  }\n\n  #nodeHeaderClick(e: Event) {\n    const hasFocusableElements = getFlattenedFocusableItems(e.currentTarget as HTMLElement).length;\n    if (this.#isExpandable && !this.selectable && !hasFocusableElements) {\n      this.#toggleExpand();\n    }\n\n    if (this.selectable && (!hasFocusableElements || (e.target as HTMLElement).localName === 'a')) {\n      this.#toggleSelection();\n    }\n  }\n\n  #toggleExpand() {\n    this.#typeExpandableController.toggle();\n  }\n\n  #toggleSelection() {\n    if (this.selectable === 'single') {\n      this.#toggleSingleSelection();\n    }\n\n    if (this.selectable === 'multi') {\n      this.#toggleMultiSelection();\n    }\n  }\n\n  #toggleSingleSelection() {\n    this.#typeSelectableController.toggle();\n    if (this.behaviorSelect) {\n      this.#tree!.nodes.filter(n => n !== this).forEach(n => (n.selected = false));\n    }\n  }\n\n  #toggleMultiSelection() {\n    this.#typeSelectableController.toggle();\n\n    if (this.behaviorSelect) {\n      this.nodes.forEach(n => {\n        n.selected = this.selected;\n        n.indeterminate = false;\n      });\n      this.#tree!.nodes.forEach(node => updateNodeSelection(node));\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoEO,IAAA,IAAA,cAAuB,EAAW;;+BAIgB,oBAKA,sBAKb,uBAUC,gBAOR,MAAA,EAAqB,kBAGrC,8BAYM,0BAGC,0BAGA;;CA1B1B,KAAwC,IAAI,EAAqB,KAAK;CAUtE,KAAA,IAAY;AACV,SAAO,KAAK,QAAc,WAAW;;CAiBvC,KAA4B,IAAI,EAAyB,KAAK;CAE9D,KAA4B,IAAI,EAAyB,KAAK;CAE9D,KAAA,IAAoB;AAClB,SAAO,KAAK,cAAc,KAAK,YAAY,CAAC,CAAC,KAAK,OAAO;;;kBAGzC;GAChB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,YAAY,gBAAA;GACvB;;;4BAE2B;IACzB,EAAW,SAAS,MAAM;IAC1B,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;GAC1B;;;gBAEe,EAAU,CAAC,EAAO,CAAC;;CAKnC,SAAS;AACP,SAAO,CAAI,mCACwB,MAAA,EAAiB,sBAG5C,MAAA,IACI,CAAI,uFAC6E,MAAA,EAAmB,yHACvD,KAAK,WAAW,SAAS,QAAQ,6CAE9E,EACL,GAEC,KAAK,eAAe,UAChB,CAAI,yEAE2B,MAAA,EAA2B,cAAY,KAAK,SAAS,oBAAkB,KAAK,cAAc,gBAAc,KAAK,KAAK,OAAO,mCAExJ,EACL,sFAEgD,MAAA,EAAsB;;CAS/E,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,YACvB,MAAA,GAA+B,EAC/B,MAAA,GAAkB;;CAIpB,OAAO;AACL,QAAA,EAA+B,MAAM;;CAIvC,QAAQ;AACN,QAAA,EAA+B,OAAO;;CAGxC,KAAc;AAEZ,EADA,KAAK,eAAe,EACpB,MAAA,GAA6B;;CAG/B,KAAyB;AACvB,QAAA,IAAqB,KAAK,WAAW,OAAO,IAAI,gBAAgB,GAAG,KAAK,WAAW,OAAO,OAAO,gBAAgB;;CAGnH,KAA2B;AACzB,OAAK,iBAAiB,UAAS,MAAK;AASlC,GARI,MAAA,KAAsB,EAAE,SAAS,eAAe,EAAE,WAAW,QAC/D,KAAK,OAAO,EAGV,MAAA,KAAsB,EAAE,SAAS,gBAAgB,EAAE,WAAW,QAChE,KAAK,MAAM,EAGT,EAAE,SAAS,WAAW,EAAE,WAAW,QAAQ,KAAK,eAClD,EAAE,gBAAgB,EAClB,MAAA,GAAuB;IAEzB;;CAGJ,GAAiB,GAAU;EACzB,IAAM,IAAuB,EAA2B,EAAE,cAA6B,CAAC;AAKxF,EAJI,MAAA,KAAsB,CAAC,KAAK,cAAc,CAAC,KAC7C,MAAA,GAAoB,EAGlB,KAAK,eAAe,CAAC,KAAyB,EAAE,OAAuB,cAAc,QACvF,MAAA,GAAuB;;CAI3B,KAAgB;AACd,QAAA,EAA+B,QAAQ;;CAGzC,KAAmB;AAKjB,EAJI,KAAK,eAAe,YACtB,MAAA,GAA6B,EAG3B,KAAK,eAAe,WACtB,MAAA,GAA4B;;CAIhC,KAAyB;AAEvB,EADA,MAAA,EAA+B,QAAQ,EACnC,KAAK,kBACP,MAAA,EAAY,MAAM,QAAO,MAAK,MAAM,KAAK,CAAC,SAAQ,MAAM,EAAE,WAAW,GAAO;;CAIhF,KAAwB;AAGtB,EAFA,MAAA,EAA+B,QAAQ,EAEnC,KAAK,mBACP,KAAK,MAAM,SAAQ,MAAK;AAEtB,GADA,EAAE,WAAW,KAAK,UAClB,EAAE,gBAAgB;IAClB,EACF,MAAA,EAAY,MAAM,SAAQ,MAAQ,EAAoB,EAAK,CAAC;;;GA7L/D,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK1C,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK1C,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAK3B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAO3B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAG1B,GAAU,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KASV,EAAsB,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAGxC,GAAO,CAAA,EAAA,EAAA,WAAA,iBAAA,KAAA,EAAA,KAGP,GAAO,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAGP,GAAO,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA;CA3DT,GAAO;CACP,EAAQ,EAAE,KAAK,IAAO,CAAC;CACvB,GAAY;CACZ,GAAe;CACf,GAAe;CACf,GAAgB;CAChB,GAAA"}

package/dist/tree/tree.d.ts

@@ -0,0 +1,52 @@
+import { PropertyValues, LitElement } from 'lit';
+import { KeynavListConfig } from '../internal';
+import { TreeNode } from './tree-node.js';
+/**
+ * @element nve-tree
+ * @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.
+ * @since 1.2.0
+ * @entrypoint \@nvidia-elements/core/tree
+ * @slot - tree nodes
+ * @cssprop --max-width
+ * @cssprop --node-border - Border style for tree node depth indicator
+ * @event open - Dispatched from a child nve-tree-node when opened.
+ * @event close - Dispatched from a child nve-tree-node when closed.
+ * @event select - Dispatched from a child nve-tree-node when its selection state changes.
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+ *
+ */
+export declare class Tree extends LitElement {
+    #private;
+    /**
+     * Determines whether all nodes can be in a selected state. Nodes can be in a single or multi select state.
+     */
+    selectable: 'single' | 'multi';
+    /**
+     * Determines whether the tree nodes should handle auto-expanding behavior.
+     */
+    behaviorExpand: boolean;
+    /**
+     * Determines whether the tree nodes should handle auto-select behavior.
+     */
+    behaviorSelect: boolean;
+    /**
+     * Determines if the node depth border renders.
+     */
+    border: boolean;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        children: string[];
+    };
+    _internals: ElementInternals;
+    get nodes(): TreeNode[];
+    /** @private */
+    get keynavListConfig(): KeynavListConfig;
+    /** @private */
+    get openNodes(): TreeNode[];
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(props: PropertyValues<this>): Promise<void>;
+}

package/dist/tree/tree.examples.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.examples.js","names":["#getNodeList","#open","#close"],"sources":["../../src/tree/tree.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport '@nvidia-elements/core/tree/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Tree',\n  component: 'nve-tree',\n};\n\n/**\n * @summary Basic tree component with expandable nodes, providing hierarchical data display and navigation for structured content organization.\n */\nexport const Default = {\n  render: () => html`\n    <nve-tree behavior-expand>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Tree with border styling for enhanced visual separation and container definition, improving content structure perception.\n */\nexport const Border = {\n  render: () => html`\n    <nve-tree behavior-expand border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Single-selection tree for choosing one item from hierarchical options, enabling focused navigation and content selection.\n */\nexport const Selectable = {\n  render: () => html`\n    <nve-tree selectable=\"single\" behavior-expand behavior-select border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node selected>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Multi-selection tree for choosing many items from hierarchical options, enabling bulk operations and comprehensive content management.\n */\nexport const SelectableMultiple = {\n  render: () => html`\n    <nve-tree selectable=\"multi\" behavior-expand behavior-select border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node selected>node 1-2</nve-tree-node>\n        <nve-tree-node expanded>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Interactive selection handling using the select event, with callbacks for node selection changes.\n * @tags test-case\n */\nexport const SelectEvent = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md\">\n        <nve-tree id=\"select-event-tree\" selectable=\"single\" behavior-expand behavior-select border>\n          <nve-tree-node expanded>\n            Documents\n            <nve-tree-node>Annual Report.pdf</nve-tree-node>\n            <nve-tree-node>Budget.xlsx</nve-tree-node>\n            <nve-tree-node expanded>\n              Projects\n              <nve-tree-node>Project Alpha</nve-tree-node>\n              <nve-tree-node>Project Beta</nve-tree-node>\n              <nve-tree-node>Project Gamma</nve-tree-node>\n            </nve-tree-node>\n          </nve-tree-node>\n          <nve-tree-node>\n            Images\n            <nve-tree-node>photo-001.jpg</nve-tree-node>\n            <nve-tree-node>photo-002.jpg</nve-tree-node>\n            <nve-tree-node>screenshot.png</nve-tree-node>\n          </nve-tree-node>\n        </nve-tree>\n        <div nve-layout=\"column gap:sm\">\n          <p nve-text=\"body sm\"><strong>Selected:</strong> <span id=\"selected-node\">None</span></p>\n          <p nve-text=\"body sm\"><strong>History:</strong></p>\n          <ul id=\"selection-history\" nve-text=\"body sm\">\n            <li>No selections yet</li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <script type=\"module\">\n      const tree = document.querySelector('#select-event-tree');\n      const selectedDisplay = document.querySelector('#selected-node');\n      const historyList = document.querySelector('#selection-history');\n      const history = [];\n      tree.addEventListener('select', (e) => {\n        const node = e.detail;\n        const nodeText = node.textContent?.trim().split('\\\\n')[0] ?? 'Unknown';\n        selectedDisplay.textContent = nodeText;\n        history.push(nodeText);\n        if (history.length > 5) history.shift();\n        historyList.innerHTML = history.map(item => '<li>' + item + '</li>').join('');\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Tree with highlighted nodes for emphasizing specific items, providing visual focus and search result signal in hierarchical data.\n */\nexport const Highlight = {\n  render: () => html`\n    <nve-tree behavior-expand border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node highlighted>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node expanded>\n          node 1-3\n          <nve-tree-node highlighted>node 1-3-1</nve-tree-node>\n          <nve-tree-node highlighted>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Tree with navigation links for hierarchical menu systems, enabling structured site navigation and content discovery.\n */\nexport const Links = {\n  render: () => html`\n    <nve-tree behavior-expand>\n      <nve-tree-node><a href=\"#\">Documentation</a></nve-tree-node>\n      <nve-tree-node><a href=\"#\">Support</a></nve-tree-node>\n      <nve-tree-node expanded>\n        Elements\n        <nve-tree-node><a href=\"#\">Alert</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">Badge</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">Dialog</a></nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        Frameworks\n        <nve-tree-node><a href=\"#\">Angular</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">React</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">Vue</a></nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        Languages\n        <nve-tree-node><a href=\"#\">JavaScript</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">HTML</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">CSS</a></nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Tree with loading states for asynchronous data, including progress indicators and dynamic content loading in hierarchical structures.\n */\nexport const Async = {\n  render: () => html`\n    <nve-tree border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node expanded>\n          node 1-3\n          <nve-tree-node>\n            <div nve-layout=\"row gap:xs\">\n              <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring> loading\n            </div>\n          </nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Tree with rich node content including forms, controls, and interactive elements, enabling complex data management within hierarchical structures.\n */\nexport const NodeContent = {\n  render: () => html`\n    <nve-tree selectable=\"multi\" border behavior-expand behavior-select>\n      <nve-tree-node expanded>\n        text content\n        <nve-tree-node>\n          <a href=\"#\" nve-text=\"link\">node link</a>\n        </nve-tree-node>\n        <nve-tree-node>\n          long form content\n          <div slot=\"content\" nve-layout=\"column gap:sm\">\n            <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n            <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n            <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n          </div>\n        </nve-tree-node>\n        <nve-tree-node>\n          interactive content\n          <div slot=\"content\" nve-layout=\"column gap:sm\">\n            <p nve-text=\"body sm\">This is some longer content in a tree node.</p>\n            <nve-button>hello there</nve-button>\n          </div>\n        </nve-tree-node>\n        <nve-tree-node>\n          input control\n          <div slot=\"content\" nve-layout=\"column gap:sm\">\n            <nve-input>\n              <label>label</label>\n              <input type=\"text\" />\n            </nve-input>\n            <nve-input>\n              <label>label</label>\n              <input type=\"text\" />\n            </nve-input>\n          </div>\n        </nve-tree-node>\n        <nve-tree-node>\n          node content checkbox group\n          <nve-checkbox-group slot=\"content\">\n            <label>label</label>\n            <nve-checkbox>\n              <label>checkbox 1</label>\n              <input type=\"checkbox\" checked />\n            </nve-checkbox>\n\n            <nve-checkbox>\n              <label>checkbox 2</label>\n              <input type=\"checkbox\" />\n            </nve-checkbox>\n\n            <nve-checkbox>\n              <label>checkbox 3</label>\n              <input type=\"checkbox\" />\n            </nve-checkbox>\n          </nve-checkbox-group>\n        </nve-tree-node>\n        <nve-tree-node>\n          node content radio group\n          <nve-radio-group slot=\"content\">\n            <label>label</label>\n            <nve-radio>\n              <label>radio 1</label>\n              <input type=\"radio\" checked />\n            </nve-radio>\n\n            <nve-radio>\n              <label>radio 2</label>\n              <input type=\"radio\" />\n            </nve-radio>\n\n            <nve-radio>\n              <label>radio 3</label>\n              <input type=\"radio\" />\n            </nve-radio>\n          </nve-radio-group>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Dynamic tree with programmatic node creation and management, for scalable hierarchical data handling with large datasets.\n * @tags test-case\n */\nexport const DynamicTree = {\n  render: () => html`<test-dynamic-tree></test-dynamic-tree>`\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Tree integrated in vertical navigation drawer, providing structured sidebar navigation for application layouts and content organization.\n */\nexport const VerticalNav = {\n  render: () => html`\n  <nve-drawer inline size=\"sm\" position=\"left\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading\">Navigation</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <nve-tree behavior-expand>\n        <nve-tree-node><a href=\"#\">Documentation</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">Support</a></nve-tree-node>\n        <nve-tree-node expanded>\n          Elements\n          <nve-tree-node><a href=\"#\">Alert</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">Badge</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">Dialog</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node>\n          Frameworks\n          <nve-tree-node><a href=\"#\">Angular</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">React</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">Vue</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node>\n          Languages\n          <nve-tree-node><a href=\"#\">JavaScript</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">HTML</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">CSS</a></nve-tree-node>\n        </nve-tree-node>\n      </nve-tree>\n    </nve-drawer-content>\n  </nve-drawer>\n  `\n};\n\n/**\n * @summary Tree with scrollable container for handling deep hierarchies and large datasets, ensuring optimal space usage and navigation.\n * @tags test-case\n */\nexport const Overflow = {\n  render: () => html`\n    <div style=\"width: 300px; height: 500px; overflow: auto; outline: 1px solid #ccc; padding: 12px\">\n      <nve-tree border behavior-expand>\n        <nve-tree-node expanded>\n          node 1\n          <nve-tree-node>node 1-1</nve-tree-node>\n          <nve-tree-node>node 1-2</nve-tree-node>\n          <nve-tree-node expanded>\n            node 1-3\n            <nve-tree-node>node 1-3-1</nve-tree-node>\n            <nve-tree-node>node 1-3-2</nve-tree-node>\n            <nve-tree-node expanded>\n              node 1-3-3\n              <nve-tree-node>node 1-3-3-1</nve-tree-node>\n              <nve-tree-node>node 1-3-3-2</nve-tree-node>\n              <nve-tree-node expanded>\n                node 1-3-3-3\n                <nve-tree-node>node 1-3-3-3-1</nve-tree-node>\n                <nve-tree-node>node 1-3-3-3-2</nve-tree-node>\n                <nve-tree-node expanded>\n                  node 1-3-3-3-3\n                  <nve-tree-node>node 1-3-3-3-3-1</nve-tree-node>\n                  <nve-tree-node>node 1-3-3-3-3-2</nve-tree-node>\n                  <nve-tree-node expanded>\n                    node 1-3-3-3-3-3\n                    <nve-tree-node>node 1-3-3-3-3-3-1</nve-tree-node>\n                    <nve-tree-node>node 1-3-3-3-3-3-2</nve-tree-node>\n                    <nve-tree-node expanded>\n                      node 1-3-3-3-3-3-3\n                      <nve-tree-node>node 1-3-3-3-3-3-3-1</nve-tree-node>\n                      <nve-tree-node>node 1-3-3-3-3-3-3-2</nve-tree-node>\n                      <nve-tree-node expanded>\n                        node 1-3-3-3-3-3-3-3\n                        <nve-tree-node>node 1-3-3-3-3-3-3-3-1</nve-tree-node>\n                        <nve-tree-node>node 1-3-3-3-3-3-3-3-2</nve-tree-node>\n                        <nve-tree-node expanded>\n                          node 1-3-3-3-3-3-3-3-3\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-1</nve-tree-node>\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-2</nve-tree-node>\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-3</nve-tree-node>\n                        </nve-tree-node>\n                      </nve-tree-node>\n                    </nve-tree-node>\n                  </nve-tree-node>\n                </nve-tree-node>\n              </nve-tree-node>\n            </nve-tree-node>\n          </nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node expanded>\n          node 2\n          <nve-tree-node>node 2-1</nve-tree-node>\n          <nve-tree-node>node 2-2</nve-tree-node>\n          <nve-tree-node>node 2-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree>\n    </div>\n  `\n};\n\n/**\n * @summary Tree with bulk node creation for performance testing, verifying efficient handling of large numbers of nodes and dynamic expansion.\n * @tags test-case performance\n */\nexport const BulkCreation = {\n  render: () => html`\n    <nve-tree>\n      <nve-tree-node id=\"root\" expandable>Test</nve-tree-node>\n    </nve-tree>\n    <script type=\"module\">\n    const rootEl = document.querySelector('nve-tree-node#root');\n\n    rootEl.addEventListener('open', () => {\n      const fragment = document.createDocumentFragment();\n      for (let i = 0; i < 400; i++) {\n        rootEl.expanded = true;\n        const childEl = document.createElement('nve-tree-node');\n        childEl.innerText = 'Child ' + i;\n        fragment.append(childEl);\n      }\n      rootEl.append(fragment);\n    });\n\n    rootEl.addEventListener('close', () => {\n      rootEl.expanded = false;\n      rootEl.replaceChildren(document.createTextNode('Test'));\n    });\n  </script>\n  `\n};\n\n/**\n * @summary Examples of invalid tree usage patterns for testing and documentation purposes, showing what not to do when implementing trees.\n * @tags anti-pattern\n */\nexport const Audit = {\n  render: () => html`\n    <div>\n      <nve-tree-node>node</nve-tree-node>\n    </div>\n  `\n};\n\nexport class TestDynamicTree extends LitElement {\n  @state() nodes = createTree();\n\n  render() {\n    return html`\n    <p nve-text=\"body\">total nodes: 10,000</p>\n    <nve-tree border expandable>\n      ${this.nodes.map(node => this.#getNodeList(node))}\n    </nve-tree>`;\n  }\n\n  #getNodeList(node) {\n    return html`<nve-tree-node .expandable=${node.nodes.length} .expanded=${node.expanded} @open=${e => this.#open(e, node)} @close=${e => this.#close(e, node)}>\n      ${node.label} node\n      ${node.expanded ? node.nodes.map(n => html`${this.#getNodeList(n)}`) : nothing}\n    </nve-tree-node>`\n  }\n\n  #open(e, node) {\n    e.stopPropagation();\n    node.expanded = true;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n\n  #close(e, node) {\n    e.stopPropagation();\n    node.expanded = false;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n}\n\n/** generates a tree with 10 nodes with 4 layers */\nfunction createTree() {\n  return createNodeList(10).map(i => {\n    i.nodes = createNodeList(10);\n    i.nodes.forEach(j => {\n      j.nodes = createNodeList(10);\n      j.nodes.forEach(k => {\n        k.nodes = createNodeList(10);\n      })\n    })\n    return i;\n  });\n}\n\nfunction createNodeList(nodes: number) {\n  return new Array(nodes).fill('').map((_, i) => ({ label: `${i}`, expanded: false, nodes: [] }));\n}\n\ncustomElements.get('test-dynamic-tree') || customElements.define('test-dynamic-tree', TestDynamicTree);"],"mappings":";AAGA,IAAA,IAAe"}

package/dist/tree/tree.examples.json

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

package/dist/tree/tree.global.js

@@ -0,0 +1,6 @@
+//#region 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=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)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tree.global.js.map

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

@@ -0,0 +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='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"],"mappings":""}

package/dist/tree/tree.js

@@ -0,0 +1,6 @@
+//#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}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tree.js.map

package/dist/tree/tree.js.map

@@ -0,0 +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":""}

package/dist/tree/tree2.js

@@ -0,0 +1,81 @@
+import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
+import { attachInternals as t } from "../internal/utils/a11y.js";
+import { onChildListMutation as n } from "../internal/utils/events.js";
+import { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as i } from "../internal/controllers/audit.controller.js";
+import { keyNavigationList as a } from "../internal/controllers/keynav-list.controller.js";
+import { useStyles as o } from "../internal/styles/index.js";
+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
+var m = class extends d {
+	constructor(...e) {
+		super(...e), this.behaviorExpand = !1, this.behaviorSelect = !1, this.border = !1;
+	}
+	static {
+		this.styles = o([l]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-tree",
+			version: "0.0.3",
+			children: ["nve-tree-node"]
+		};
+	}
+	get nodes() {
+		return Array.from(this.querySelectorAll(c.metadata.tag));
+	}
+	get keynavListConfig() {
+		return {
+			items: this.openNodes.map((e) => e.shadowRoot.querySelector("[part=\"_node-header\"]")).filter((e) => e !== null),
+			layout: "vertical"
+		};
+	}
+	get openNodes() {
+		return this.nodes.filter((e) => e.expanded || e.parentNode.expanded || e.parentNode === this);
+	}
+	render() {
+		return f`<div internal-host><slot name="nodes"></slot></div>`;
+	}
+	#e = [];
+	connectedCallback() {
+		super.connectedCallback(), t(this), e(this, u), this._internals.role = "tree", this.#e.push(n(this, () => {
+			this.#t();
+		}, { subtree: !0 }));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#e.forEach((e) => e.disconnect());
+	}
+	async updated(e) {
+		super.updated(e), await this.updateComplete, this.#t();
+	}
+	#t() {
+		this.#n(), this.#r();
+	}
+	#n() {
+		this.nodes.forEach((e) => {
+			e.selectable = this.selectable, e.behaviorExpand = this.behaviorExpand, e.behaviorSelect = this.behaviorSelect;
+		});
+	}
+	#r() {
+		this.behaviorSelect && this.selectable === "multi" && this.nodes.forEach((e) => s(e));
+	}
+};
+r([p({ type: String })], m.prototype, "selectable", void 0), r([p({
+	type: Boolean,
+	attribute: "behavior-expand"
+})], m.prototype, "behaviorExpand", void 0), r([p({
+	type: Boolean,
+	attribute: "behavior-select"
+})], m.prototype, "behaviorSelect", void 0), r([p({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "border", void 0), m = r([i(), a()], m);
+//#endregion
+export { m as Tree };
+
+//# sourceMappingURL=tree2.js.map

package/dist/tree/tree2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree2.js","names":["#observers","#syncNodes","#syncNodeOptions","#syncNodeSelections"],"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 * @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  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":";;;;;;;;;;;;;;AAoCO,IAAA,IAAA,cAAmB,EAAW;;qCASyC,0BAKA,kBAKvB;;;gBAErC,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,gBAAA;GACZ;;CAID,IAAI,QAAQ;AACV,SAAO,MAAM,KAAK,KAAK,iBAA2B,EAAS,SAAS,IAAI,CAAC;;CAI3E,IAAI,mBAAqC;AACvC,SAAO;GACL,OAAO,KAAK,UACT,KAAI,MAAQ,EAAK,WAAY,cAAc,0BAAwB,CAAC,CACpE,QAAQ,MAA0B,MAAO,KAAK;GACjD,QAAQ;GACT;;CAIH,IAAI,YAAwB;AAC1B,SAAO,KAAK,MAAM,QAChB,MAAQ,EAAK,YAAa,EAAK,WAAwB,YAAa,EAAK,eAAwB,KAClG;;CAGH,SAAS;AACP,SAAO,CAAI;;CAOb,KAAiC,EAAE;CAEnC,oBAAoB;AAMlB,EALA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,EAAoB,MAAM,EAAa,EACvC,KAAK,WAAW,OAAO,QAEvB,MAAA,EAAgB,KACd,EACE,YACM;AACJ,SAAA,GAAiB;KAEnB,EAAE,SAAS,IAAM,CAClB,CACF;;CAGH,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,MAAA,EAAgB,SAAQ,MAAK,EAAE,YAAY,CAAC;;CAG9C,MAAM,QAAQ,GAA6B;AAGzC,EAFA,MAAM,QAAQ,EAAM,EACpB,MAAM,KAAK,gBACX,MAAA,GAAiB;;CAGnB,KAAa;AAEX,EADA,MAAA,GAAuB,EACvB,MAAA,GAA0B;;CAG5B,KAAmB;AACjB,OAAK,MAAM,SAAQ,MAAQ;AAGzB,GAFA,EAAK,aAAa,KAAK,YACvB,EAAK,iBAAiB,KAAK,gBAC3B,EAAK,iBAAiB,KAAK;IAC3B;;CAGJ,KAAsB;AACpB,EAAI,KAAK,kBAAkB,KAAK,eAAe,WAC7C,KAAK,MAAM,SAAQ,MAAQ,EAAoB,EAAK,CAAC;;;GArGxD,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAK1B,EAAS;CAAE,MAAM;CAAS,WAAW;CAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAKzD,EAAS;CAAE,MAAM;CAAS,WAAW;CAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAKzD,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,SArB5C,GAAO,EACP,GAAyB,CAAA,EAAA,EAAA"}

package/dist/tree/utils.d.ts

@@ -0,0 +1,10 @@
+interface SelectableNode {
+    selected: boolean;
+    indeterminate: boolean;
+    nodes: {
+        selected: boolean;
+        indeterminate: boolean;
+    }[];
+}
+export declare function updateNodeSelection(node: SelectableNode): void;
+export {};

package/dist/tree/utils.js

@@ -0,0 +1,9 @@
+//#region 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

@@ -0,0 +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(node => node.selected)) {\n      node.selected = true;\n      node.indeterminate = false;\n    } else if (nodes.some(node => node.selected)) {\n      node.indeterminate = true;\n    } else if (nodes.every(node => !node.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;AAcnB,CAZI,EAAM,WACJ,EAAM,OAAM,MAAQ,EAAK,SAAS,IACpC,EAAK,WAAW,IAChB,EAAK,gBAAgB,MACZ,EAAM,MAAK,MAAQ,EAAK,SAAS,GAC1C,EAAK,gBAAgB,KACZ,EAAM,OAAM,MAAQ,CAAC,EAAK,SAAS,KAC5C,EAAK,WAAW,IAChB,EAAK,gBAAgB,MAIzB,EAAM,SAAQ,MAAK,EAAoB,EAAoB,CAAC"}

package/dist/week/define.d.ts

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

package/dist/week/define.js

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

package/dist/week/define.js.map

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

package/dist/week/index.d.ts

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

package/dist/week/index.js

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

package/dist/week/week.d.ts

@@ -0,0 +1,34 @@
+import { ContainerElement } from '../internal';
+import { Control } from '../forms';
+import { IconButton } from '../icon-button';
+/**
+ * @element nve-week
+ * @description A week picker is a control that enables users to choose a week value.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/week
+ * @cssprop --padding
+ * @cssprop --font-size
+ * @cssprop --height
+ * @cssprop --background
+ * @cssprop --border-radius
+ * @cssprop --border
+ * @cssprop --cursor
+ * @csspart icon-button - The calendar icon button element
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week
+ */
+export declare class Week extends Control implements ContainerElement {
+    /**
+     * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
+     * Use when embedding within another container such as a toolbar.
+     */
+    container?: 'flat';
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [IconButton.metadata.tag]: typeof IconButton;
+    };
+    protected get suffixContent(): import('lit-html').TemplateResult<1>;
+}

package/dist/week/week.examples.js

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

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

@@ -0,0 +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"}