@nvidia-elements/core 2.20.1 → 2.20.3

package/dist/tooltip/tooltip2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip2.js","names":[],"sources":["../../src/tooltip/tooltip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport styles from './tooltip.css?inline';\n\n/**\n * @element nve-tooltip\n * @description A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.\n * @documentation https://nvidia.github.io/elements/docs/elements/tooltip/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/tooltip\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the tooltip opens.\n * @event close - Dispatched when the tooltip closes.\n * @slot - Noninteractive text or other descriptive content shown in the tooltip.\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --arrow-transform\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border\n * @csspart arrow\n * @cssprop --animation-duration - Duration of tooltip open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@audit({ excessiveInstanceLimit })\nexport class Tooltip extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tooltip',\n    version: '0.0.0'\n  };\n\n  /**\n   * (optional) By default the popover automatically anchors itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * visual treatment to represent a ongoing task or support status\n   */\n  @property({ type: String, reflect: true }) status: 'muted';\n\n  /**\n   * @deprecated Use interest-delay-start css property instead\n   */\n  @property({ type: Number, attribute: 'open-delay' }) openDelay: number;\n\n  /** @private */\n  @query('.arrow') popoverArrow: HTMLElement;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'hint';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Tooltip>(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /* eslint-disable local/no-invalid-css-parts */\n  render() {\n    return html`\n    <div internal-host>\n      <slot></slot>\n    </div>\n    <div part=\"arrow\" class=\"arrow\"></div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'tooltip';\n  }\n}\n"],"mappings":";;;;;;;;;;;AA4CO,IAAM,IAAN,cAAsB,EAAW;;EAqDE,aA7B+B,KAAA,WAAA,OA2BnC,KAAA,cAAA,QAEI,KAAA,8BAAA,IAAI,EAAqC,IAAI;;;EApDrE,KAAA,SAAA,EAAU,CAAC,GAAe,CAAM,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAqDA,SAAS;EACP,OAAO,CAAI;CAMb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;AA7DG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAOzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAKzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAKxE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGlD,EAAA,CAAA,EAAM,QAAQ,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAjDhB,IAAA,EAAA,CAAA,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA"}
+{"version":3,"file":"tooltip2.js","names":["styles","_decorate","__decorate","tooltip_default","Tooltip","LitElement","_args","TypeNativePopoverController","useStyles","popoverStyles","attachInternals","property","query","audit"],"sources":["../../src/tooltip/tooltip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport styles from './tooltip.css?inline';\n\n/**\n * @element nve-tooltip\n * @description A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.\n * @documentation https://nvidia.github.io/elements/docs/elements/tooltip/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/tooltip\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the tooltip opens.\n * @event close - Dispatched when the tooltip closes.\n * @slot - Noninteractive text or other descriptive content shown in the tooltip.\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --arrow-transform\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border\n * @csspart arrow\n * @cssprop --animation-duration - Duration of tooltip open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@audit({ excessiveInstanceLimit })\nexport class Tooltip extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tooltip',\n    version: '0.0.0'\n  };\n\n  /**\n   * (optional) By default the popover automatically anchors itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * visual treatment to represent a ongoing task or support status\n   */\n  @property({ type: String, reflect: true }) status: 'muted';\n\n  /**\n   * @deprecated Use interest-delay-start css property instead\n   */\n  @property({ type: Number, attribute: 'open-delay' }) openDelay: number;\n\n  /** @private */\n  @query('.arrow') popoverArrow: HTMLElement;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'hint';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Tooltip>(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /* eslint-disable local/no-invalid-css-parts */\n  render() {\n    return html`\n    <div internal-host>\n      <slot></slot>\n    </div>\n    <div part=\"arrow\" class=\"arrow\"></div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'tooltip';\n  }\n}\n"],"mappings":";;;;;;;;;;;AA4CO,IAAMI,IAAN,cAAsBC,EAAW;;EAqDE,A,aA7B+B,KAAA,WAAA,OA2BnC,KAAA,cAAA,QAEI,KAAA,8BAAA,IAAIE,EAAqC,IAAI;;;EApDrE,KAAA,SAAAC,EAAU,CAACC,GAAeT,CAAM,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAqDA,SAAS;EACP,OAAO,CAAI;CAMb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBU,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;AA7DGT,EAAA,CAAAU,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAP,EAAA,WAAA,UAAA,KAAA,CAAA,GAOzBH,EAAA,CAAAU,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAP,EAAA,WAAA,WAAA,KAAA,CAAA,GAKzBH,EAAA,CAAAU,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,YAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAU,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,aAAA,KAAA,CAAA,GAMxCH,EAAA,CAAAU,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAAP,EAAA,WAAA,mBAAA,KAAA,CAAA,GAKxEH,EAAA,CAAAU,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,UAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAU,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAAP,EAAA,WAAA,aAAA,KAAA,CAAA,GAGlDH,EAAA,CAAAW,EAAM,QAAQ,CAAA,GAAAR,EAAA,WAAA,gBAAA,KAAA,CAAA,GAjDhB,IAAAH,EAAA,CAAAY,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAAT,CAAA"}

package/dist/tree/define.js

@@ -2,6 +2,5 @@ import { TreeNode as e } from "./tree-node2.js";
 import { Tree as t } from "./tree2.js";
 import { define as n } from "@nvidia-elements/foundations/internal/define";
 n(t), n(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/tree/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/tree/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Tree, TreeNode } from '@nvidia-elements/core/tree';\n\ndefine(Tree);\ndefine(TreeNode);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tree': Tree;\n    'nve-tree-node': TreeNode;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAI,GACX,EAAO,CAAQ"}
+{"version":3,"file":"define.js","names":["define","Tree","TreeNode"],"sources":["../../src/tree/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Tree, TreeNode } from '@nvidia-elements/core/tree';\n\ndefine(Tree);\ndefine(TreeNode);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tree': Tree;\n    'nve-tree-node': TreeNode;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAI,GACXD,EAAOE,CAAQ"}

package/dist/tree/tree-node.js

@@ -1,6 +1,5 @@
-//#region src/tree/tree-node.css?inline
+// src/tree/tree-node.css?inline
 var e = ":host{--color: var(--nve-sys-interaction-color);--border-radius: var(--nve-ref-border-radius-xs);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-regular);--min-height: var(--nve-ref-size-800);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--text-wrap: nowrap;width:100%;cursor:default}[internal-host]{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);text-wrap:var(--text-wrap);display:flex;align-content:center;flex-wrap:wrap;width:100%}slot{display:flex;flex-direction:column;width:100%}slot[name=nodes]{padding-inline-start:var(--nve-ref-size-500);display:flex;flex-direction:column;align-items:start}slot:not(:has-slotted){display:none!important}[part=_node]{display:flex;align-items:center;width:100%}.node-title{display:flex;flex-direction:row;align-items:center;gap:var(--nve-ref-space-xs);border-radius:var(--border-radius);border-inline-start:var(--nve-ref-border-width-md) solid transparent;margin-inline-start:var(--nve-ref-space-xxxs);padding:var(--nve-ref-size-200) var(--nve-ref-size-200) var(--nve-ref-size-200) var(--nve-ref-size-100);min-height:var(--min-height);position:relative;& slot{width:fit-content;flex-shrink:0}& slot:not([name]){width:100%;min-width:0;flex-shrink:1;display:block}}[part=_node-header]{display:flex;flex-direction:column;width:100%;position:relative;min-width:0}:host(:focus-visible) [part=_node-header],::slotted(a:focus-visible):after{outline:Highlight solid 2px!important;outline:5px auto -webkit-focus-ring-color!important}[name=content]{padding:var(--nve-ref-size-200);display:block}[part=_nodes]{width:100%;position:relative;display:block;padding-inline-start:var(--nve-ref-size-200);overflow:hidden;transition:height var(--nve-ref-animation-duration-200) cubic-bezier(.4,0,.2,1)}:host([expanded]) [part=_nodes]{height:auto;height:calc-size(max-content,size)}[part=_nodes]:before{border-inline-start:var(--node-border);inset-inline-start:var(--nve-ref-size-150);inset-block:0;display:block;content:\"\";position:absolute}nve-icon-button{--width: var(--nve-ref-size-400);outline:0!important}nve-icon[name=caret]{transition:transform var(--nve-ref-animation-duration-150) cubic-bezier(.4,0,.2,1)}nve-checkbox{margin-inline-start:var(--nve-ref-space-xxs);margin-block-start:var(--nve-ref-space-xs);align-self:start}input{outline:0!important}::slotted(a){text-decoration:none!important;color:var(--color)!important;outline:0;vertical-align:middle}::slotted(a):after{display:block;content:\" \";inset:0;position:absolute}:host(:state(selected):state(selectable-single)) .node-title{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}:host(:state(selected):state(selectable-single)) .node-title:after{width:var(--nve-ref-border-width-md);border-radius:var(--nve-ref-border-radius-full);background:var(--nve-sys-accent-secondary-background);content:\"\";display:block;position:absolute;height:80%;inset-block-start:10%;inset-inline-start:calc(var(--nve-ref-size-50) * -1)}:host(:state(selectable-single)) .node-title{cursor:pointer}:host(:state(selectable-multi)){nve-icon-button{--width: var(--nve-ref-size-500)}slot[name=nodes]{padding-inline-start:var(--nve-ref-size-700)}[role=group]:before{inset-inline-start:var(--nve-ref-size-200)}}:host(:state(highlighted)){--border-radius: 0;.node-title{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}}.node-title{background-image:linear-gradient(color-mix(in oklab,var(--nve-sys-interaction-state-base) 100%,var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)) 0 0)!important;&:hover{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tree-node.js.map

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  position: relative;\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  }\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":""}
+{"version":3,"file":"tree-node.js","names":["tree_node_default"],"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  position: relative;\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  }\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

@@ -12,7 +12,7 @@ import { typeSSR as u } from "../internal/controllers/type-ssr.controller.js";
 import { hostAttr as d } from "../internal/decorators/host-attr.js";
 import { scopedRegistry as f } from "../internal/decorators/scoped-registry.js";
 import { useStyles as p } from "../internal/styles/index.js";
-import m from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import m from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as h } from "../icon/icon2.js";
 import { IconButton as g } from "../icon-button/icon-button2.js";
 import { updateNodeSelection as _ } from "./utils.js";
@@ -24,7 +24,7 @@ import { I18nController as w } from "@nvidia-elements/foundations/internal/i18n"
 import { state as T } from "lit/decorators/state.js";
 import { queryAssignedElements as E } from "lit/decorators/query-assigned-elements.js";
 import { TypeCommandController as D } from "@nvidia-elements/forms/internal";
-//#region src/tree/tree-node.ts
+// src/tree/tree-node.ts
 var O = { expand: "expand" }, k = class extends b {
 	constructor(...e) {
 		super(...e), this.command = "", this.commandfor = null, this.commandForElement = null, this.expanded = !1, this.selected = !1, this.expandable = !1, this.highlighted = !1, this.#e = new w(this, O), this.i18n = this.#e.i18n, this.slot = "nodes", this.indeterminate = !1, this.behaviorExpand = !1, this.behaviorSelect = !1, this.#n = new c(this), this.#r = new l(this), this.#i = new D(this, { events: [] }), this.#c = (e) => {
@@ -47,7 +47,7 @@ var O = { expand: "expand" }, k = class extends b {
 	static {
 		this.metadata = {
 			tag: "nve-tree-node",
-			version: "2.20.1",
+			version: "2.20.3",
 			parents: ["nve-tree", "nve-tree-node"]
 		};
 	}
@@ -128,7 +128,6 @@ m([C({ type: String })], k.prototype, "command", void 0), m([C({
 	f(),
 	a()
 ], k);
-//#endregion
 export { k as TreeNode };
 
 //# sourceMappingURL=tree-node2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tree-node2.js","names":[],"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  TypeExpandableController,\n  TypeSelectableController,\n  attachInternals,\n  audit,\n  getFlattenedFocusableItems,\n  hostAttr,\n  isFocusable,\n  scopedRegistry,\n  stateExpanded,\n  stateHighlighted,\n  stateSelected,\n  typeAnchor,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport { TypeCommandController } from '@nvidia-elements/forms/internal';\nimport type { Tree } from './tree.js';\nimport styles from './tree-node.css?inline';\nimport { updateNodeSelection } from './utils.js';\n\nconst i18nDefaults = {\n  expand: 'expand'\n} satisfies I18nDefaults;\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 * @documentation https://nvidia.github.io/elements/docs/elements/tree/\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 prefix - Use for prefix content before the node title.\n * @slot suffix - Use for suffix content after the node title.\n * @slot content - Use only 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  /** Command to invoke on a node title click or Enter on its header. */\n  @property({ type: String }) command = '';\n\n  /** ID of the element that receives the command. */\n  @property({ type: String, reflect: true }) commandfor: string | null = null;\n\n  /** Direct command target, taking precedence over commandfor. */\n  @property({ attribute: false }) commandForElement: HTMLElement | null = null;\n\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, i18nDefaults);\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 the slotted child tree 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  #typeCommandController = new TypeCommandController(this, { events: [] });\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            <div class=\"node-title\" @click=${this.#nodeHeaderClick}>\n              <slot name=\"prefix\" part=\"_prefix\"></slot>\n              <slot></slot>\n              <slot name=\"suffix\" part=\"_suffix\"></slot>\n            </div>\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.addEventListener('keydown', this.#onKeydown);\n    this.addEventListener('keyup', this.#onKeyup);\n    this.#nodeUpdate();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.#onKeydown);\n    this.removeEventListener('keyup', this.#onKeyup);\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  #onKeydown = (e: KeyboardEvent) => {\n    const isSelectionKey = this.selectable && e.code === 'Space';\n    const isExpansionKey = this.#isExpandable && (e.code === 'ArrowLeft' || e.code === 'ArrowRight');\n\n    if (e.target === this && (isSelectionKey || isExpansionKey)) {\n      e.preventDefault();\n    }\n  };\n\n  #invokeFromKeyboard(e: KeyboardEvent) {\n    if (e.code !== 'Enter' || e.defaultPrevented || e.repeat) {\n      return;\n    }\n    const origin = e.composedPath()[0];\n    const header = this.shadowRoot?.querySelector('[part=\"_node-header\"]');\n    if (origin === header || origin === this) {\n      this.#typeCommandController.invoke();\n    }\n  }\n\n  #onKeyup = (e: KeyboardEvent) => {\n    this.#invokeFromKeyboard(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      this.#toggleSelection();\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    const path = e.composedPath();\n    const hasInteractiveTarget = path\n      .slice(0, path.indexOf(e.currentTarget as HTMLElement))\n      .some(target => target instanceof Element && isFocusable(target));\n    if (!hasInteractiveTarget && !e.defaultPrevented) {\n      this.#typeCommandController.invoke();\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":"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"}
+{"version":3,"file":"tree-node2.js","names":["styles","_decorate","__decorate","tree_node_default","i18nDefaults","TreeNode","LitElement","_args","#i18nController","I18nController","#typeExpandableController","TypeExpandableController","#typeSelectableController","TypeSelectableController","#typeCommandController","TypeCommandController","#onKeydown","isSelectionKey","isExpansionKey","#isExpandable","#onKeyup","#invokeFromKeyboard","#toggleSelection","#tree","IconButton","Icon","Checkbox","useStyles","#nodeUpdate","#toggleExpand","nothing","#toggleMultiSelection","#nodeHeaderClick","attachInternals","#toggleExpandableState","origin","hasFocusableElements","getFlattenedFocusableItems","path","target","isFocusable","#toggleSingleSelection","n","updateNodeSelection","node","property","hostAttr","queryAssignedElements","state","audit","typeSSR","typeAnchor","stateSelected","stateExpanded","scopedRegistry","stateHighlighted"],"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  TypeExpandableController,\n  TypeSelectableController,\n  attachInternals,\n  audit,\n  getFlattenedFocusableItems,\n  hostAttr,\n  isFocusable,\n  scopedRegistry,\n  stateExpanded,\n  stateHighlighted,\n  stateSelected,\n  typeAnchor,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport { TypeCommandController } from '@nvidia-elements/forms/internal';\nimport type { Tree } from './tree.js';\nimport styles from './tree-node.css?inline';\nimport { updateNodeSelection } from './utils.js';\n\nconst i18nDefaults = {\n  expand: 'expand'\n} satisfies I18nDefaults;\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 * @documentation https://nvidia.github.io/elements/docs/elements/tree/\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 prefix - Use for prefix content before the node title.\n * @slot suffix - Use for suffix content after the node title.\n * @slot content - Use only 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  /** Command to invoke on a node title click or Enter on its header. */\n  @property({ type: String }) command = '';\n\n  /** ID of the element that receives the command. */\n  @property({ type: String, reflect: true }) commandfor: string | null = null;\n\n  /** Direct command target, taking precedence over commandfor. */\n  @property({ attribute: false }) commandForElement: HTMLElement | null = null;\n\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, i18nDefaults);\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 the slotted child tree 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  #typeCommandController = new TypeCommandController(this, { events: [] });\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            <div class=\"node-title\" @click=${this.#nodeHeaderClick}>\n              <slot name=\"prefix\" part=\"_prefix\"></slot>\n              <slot></slot>\n              <slot name=\"suffix\" part=\"_suffix\"></slot>\n            </div>\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.addEventListener('keydown', this.#onKeydown);\n    this.addEventListener('keyup', this.#onKeyup);\n    this.#nodeUpdate();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.#onKeydown);\n    this.removeEventListener('keyup', this.#onKeyup);\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  #onKeydown = (e: KeyboardEvent) => {\n    const isSelectionKey = this.selectable && e.code === 'Space';\n    const isExpansionKey = this.#isExpandable && (e.code === 'ArrowLeft' || e.code === 'ArrowRight');\n\n    if (e.target === this && (isSelectionKey || isExpansionKey)) {\n      e.preventDefault();\n    }\n  };\n\n  #invokeFromKeyboard(e: KeyboardEvent) {\n    if (e.code !== 'Enter' || e.defaultPrevented || e.repeat) {\n      return;\n    }\n    const origin = e.composedPath()[0];\n    const header = this.shadowRoot?.querySelector('[part=\"_node-header\"]');\n    if (origin === header || origin === this) {\n      this.#typeCommandController.invoke();\n    }\n  }\n\n  #onKeyup = (e: KeyboardEvent) => {\n    this.#invokeFromKeyboard(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      this.#toggleSelection();\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    const path = e.composedPath();\n    const hasInteractiveTarget = path\n      .slice(0, path.indexOf(e.currentTarget as HTMLElement))\n      .some(target => target instanceof Element && isFocusable(target));\n    if (!hasInteractiveTarget && !e.defaultPrevented) {\n      this.#typeCommandController.invoke();\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":"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"}

package/dist/tree/tree.examples.js

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

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

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

package/dist/tree/tree.global.js

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

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

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

package/dist/tree/tree.js

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

package/dist/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","names":[],"sources":["../../src/tree/tree.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --max-width: 100%;\n  display: block;\n  min-width: 0;\n}\n\n:host([border]) {\n  --node-border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n}\n\n[internal-host] {\n  max-width: var(--max-width);\n  min-width: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"tree.js","names":["tree_default"],"sources":["../../src/tree/tree.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --max-width: 100%;\n  display: block;\n  min-width: 0;\n}\n\n:host([border]) {\n  --node-border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n}\n\n[internal-host] {\n  max-width: var(--max-width);\n  min-width: 0;\n}\n"],"mappings":""}

package/dist/tree/tree2.js

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

package/dist/tree/tree2.js.map

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

package/dist/tree/utils.js

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

package/dist/tree/utils.js.map

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

package/dist/week/define.js

@@ -4,6 +4,5 @@ import { ControlGroup as n } from "../forms/control-group/control-group2.js";
 import { Week as r } from "./week2.js";
 import { define as i } from "@nvidia-elements/foundations/internal/define";
 i(r), i(t), i(n), i(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/week/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/week/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Week } from '@nvidia-elements/core/week';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Week);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-week': Week;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,CAAI,GACX,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Week","Control","ControlGroup","ControlMessage"],"sources":["../../src/week/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Week } from '@nvidia-elements/core/week';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Week);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-week': Week;\n  }\n}\n"],"mappings":";;;;;AAOAA,EAAOC,CAAI,GACXD,EAAOE,CAAO,GACdF,EAAOG,CAAY,GACnBH,EAAOI,CAAc"}

package/dist/week/index.js

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

package/dist/week/week.examples.js

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

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

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

package/dist/week/week.js

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

package/dist/week/week.js.map

@@ -1 +1 @@
-{"version":3,"file":"week.js","names":[],"sources":["../../src/week/week.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"week.js","names":["week_default"],"sources":["../../src/week/week.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n}\n"],"mappings":""}