@nvidia-elements/core 2.23.4 → 2.23.6

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

@@ -1 +1 @@
-{"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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"}
+{"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  audit,\n  getFlattenedFocusableItems,\n  hostAttr,\n  isFocusable,\n  stateExpanded,\n  stateHighlighted,\n  stateSelected,\n  typeAnchor,\n  typeSSR\n} from '@nvidia-elements/core/internal';\nimport { scopedRegistry } from '@nvidia-elements/foundations/internal/decorators';\nimport { attachInternals } from '@nvidia-elements/foundations/internal/a11y';\nimport { useStyles } from '@nvidia-elements/foundations/internal/styles';\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAMI,IAAe,EACnB,QAAQ,SACV,GA2CaC,IAAN,cAAuBC,EAAW;;EAkL3B,A,aAhL0B,KAAA,UAAA,IAGiC,KAAA,aAAA,MAGC,KAAA,oBAAA,MAKjB,KAAA,WAAA,IAKA,KAAA,WAAA,IAKb,KAAA,aAAA,IAUC,KAAA,cAAA,IAEH,KAAAE,KAAA,IAAIC,EAAqB,MAAML,CAAY,GAKhD,KAAA,OAAA,KAAKI,GAAgB,MAGrC,KAAA,OAAA,SAYM,KAAA,gBAAA,IAGC,KAAA,iBAAA,IAGA,KAAA,iBAAA,IAEE,KAAAE,KAAA,IAAIC,EAAyB,IAAI,GAEjC,KAAAC,KAAA,IAAIC,EAAyB,IAAI,GAEpC,KAAAC,KAAA,IAAIC,EAAsB,MAAM,EAAE,QAAQ,CAAC,EAAE,CAAC,GA2FzD,KAAAC,MAAA,MAAqB;GACjC,IAAMC,IAAiB,KAAK,cAAc,EAAE,SAAS,SAC/CC,IAAiB,KAAKC,OAAkB,EAAE,SAAS,eAAe,EAAE,SAAS;GAEnF,AAAI,EAAE,WAAW,SAASF,KAAkBC,MAC1C,EAAE,eAAe;EAErB,GAaY,KAAAE,MAAA,MAAqB;GAU/B,AATA,KAAKC,GAAoB,CAAC,GACtB,KAAKF,MAAiB,EAAE,SAAS,eAAe,EAAE,WAAW,QAC/D,KAAK,MAAM,GAGT,KAAKA,MAAiB,EAAE,SAAS,gBAAgB,EAAE,WAAW,QAChE,KAAK,KAAK,GAGR,EAAE,SAAS,WAAW,EAAE,WAAW,QAAQ,KAAK,cAClD,KAAKG,GAAiB;EAE1B;;CA5JA;CAUA,IAAIC,KAAQ;EACV,OAAO,KAAK,QAAc,UAAU;CACtC;CAgBA;CAEA;CAEA;CAEA,IAAIJ,KAAgB;EAClB,OAAO,KAAK,cAAc,KAAK,YAAY,CAAC,CAAC,KAAK,OAAO;CAC3D;;EAEkB,KAAA,WAAA;GAChB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,YAAY,eAAe;EACvC;;;EAE4B,KAAA,qBAAA;IACzBK,EAAW,SAAS,MAAMA;IAC1BC,EAAK,SAAS,MAAMA;IACpBC,EAAS,SAAS,MAAMA;EAC3B;;;EAEgB,KAAA,SAAAC,EAAU,CAAC3B,CAAM,CAAC;;CAKlC,SAAS;EACP,OAAO,CAAI,mCACwB,KAAK4B,GAAY,sBAG5C,KAAKT,KACD,CAAI,uFAC6E,KAAKU,GAAc,yHACvD,KAAK,WAAW,SAAS,QAAQ,6CAE9EC,EACL,GAEC,KAAK,eAAe,UAChB,CAAI,yEAE2B,KAAKC,GAAsB,cAAY,KAAK,SAAS,oBAAkB,KAAK,cAAc,gBAAc,KAAK,KAAK,OAAO,mCAExJD,EACL,wEAEkC,KAAKE,GAAiB;CAWjE;CAEA,oBAAoB;EAMlB,AALA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,YACvB,KAAK,iBAAiB,WAAW,KAAKjB,EAAU,GAChD,KAAK,iBAAiB,SAAS,KAAKI,EAAQ,GAC5C,KAAKQ,GAAY;CACnB;CAEA,uBAAuB;EAGrB,AAFA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,WAAW,KAAKZ,EAAU,GACnD,KAAK,oBAAoB,SAAS,KAAKI,EAAQ;CACjD;CAGA,OAAO;EACL,KAAKV,GAA0B,KAAK;CACtC;CAGA,QAAQ;EACN,KAAKA,GAA0B,MAAM;CACvC;CAEA,KAAc;EAEZ,AADA,KAAK,cAAc,GACnB,KAAKwB,GAAuB;CAC9B;CAEA,KAAyB;EACvB,KAAKf,KAAgB,KAAK,WAAW,OAAO,IAAI,eAAe,IAAI,KAAK,WAAW,OAAO,OAAO,eAAe;CAClH;CAEA;CASA,GAAoB,GAAkB;EACpC,IAAI,EAAE,SAAS,WAAW,EAAE,oBAAoB,EAAE,QAChD;EAEF,IAAMgB,IAAS,EAAE,aAAa,CAAC,CAAC;EAEhC,CAAIA,MADW,KAAK,YAAY,cAAc,yBAAuB,KAC5CA,MAAW,SAClC,KAAKrB,GAAuB,OAAO;CAEvC;CAEA;CAeA,GAAiB,GAAU;EACzB,IAAMsB,IAAuBC,EAA2B,EAAE,aAA4B,CAAC,CAAC;EAKxF,AAJI,KAAKlB,MAAiB,CAAC,KAAK,cAAc,CAACiB,KAC7C,KAAKP,GAAc,GAGjB,KAAK,eAAe,CAACO,KAAyB,EAAE,OAAuB,cAAc,QACvF,KAAKd,GAAiB;EAGxB,IAAMgB,IAAO,EAAE,aAAa;EAI5B,AAAI,CAHyBA,EAC1B,MAAM,GAAGA,EAAK,QAAQ,EAAE,aAA4B,CAAC,CAAC,CACtD,MAAK,MAAUC,aAAkB,WAAWC,EAAYD,CAAM,CAC5D,KAAwB,CAAC,EAAE,oBAC9B,KAAKzB,GAAuB,OAAO;CAEvC;CAEA,KAAgB;EACd,KAAKJ,GAA0B,OAAO;CACxC;CAEA,KAAmB;EAKjB,AAJI,KAAK,eAAe,YACtB,KAAK+B,GAAuB,GAG1B,KAAK,eAAe,WACtB,KAAKV,GAAsB;CAE/B;CAEA,KAAyB;EAEvB,AADA,KAAKnB,GAA0B,OAAO,GAClC,KAAK,kBACP,KAAKW,GAAO,MAAM,QAAO,MAAKmB,MAAM,IAAI,CAAC,CAAC,SAAQ,MAAM,EAAE,WAAW,EAAM;CAE/E;CAEA,KAAwB;EAGtB,AAFA,KAAK9B,GAA0B,OAAO,GAElC,KAAK,mBACP,KAAK,MAAM,SAAQ,MAAK;GAEtB,AADA,EAAE,WAAW,KAAK,UAClB,EAAE,gBAAgB;EACpB,CAAC,GACD,KAAKW,GAAO,MAAM,SAAQ,MAAQoB,EAAoBC,CAAI,CAAC;CAE/D;AACF;AAlPG3C,EAAA,CAAA4C,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAxC,EAAA,WAAA,WAAA,KAAA,CAAA,GAGzBJ,EAAA,CAAA4C,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAxC,EAAA,WAAA,cAAA,KAAA,CAAA,GAGxCJ,EAAA,CAAA4C,EAAS,EAAE,WAAW,GAAM,CAAC,CAAA,GAAAxC,EAAA,WAAA,qBAAA,KAAA,CAAA,GAK7BJ,EAAA,CAAA4C,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAxC,EAAA,WAAA,YAAA,KAAA,CAAA,GAKzCJ,EAAA,CAAA4C,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAxC,EAAA,WAAA,YAAA,KAAA,CAAA,GAKzCJ,EAAA,CAAA4C,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAxC,EAAA,WAAA,cAAA,KAAA,CAAA,GAK1BJ,EAAA,CAAA4C,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAxC,EAAA,WAAA,cAAA,KAAA,CAAA,GAKzBJ,EAAA,CAAA4C,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAxC,EAAA,WAAA,eAAA,KAAA,CAAA,GAO1BJ,EAAA,CAAA4C,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAxC,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzBJ,EAAA,CAAA6C,EAAS,CAAA,GAAAzC,EAAA,WAAA,QAAA,KAAA,CAAA,GASTJ,EAAA,CAAA8C,EAAsB,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA1C,EAAA,WAAA,SAAA,KAAA,CAAA,GAGvCJ,EAAA,CAAA+C,EAAM,CAAA,GAAA3C,EAAA,WAAA,iBAAA,KAAA,CAAA,GAGNJ,EAAA,CAAA+C,EAAM,CAAA,GAAA3C,EAAA,WAAA,kBAAA,KAAA,CAAA,GAGNJ,EAAA,CAAA+C,EAAM,CAAA,GAAA3C,EAAA,WAAA,kBAAA,KAAA,CAAA,G;CApER4C,EAAM;CACNC,EAAQ,EAAE,KAAK,GAAM,CAAC;CACtBC,EAAW;CACXC,EAAc;CACdC,EAAc;CACdC,EAAe;CACfC,EAAiB"}

package/dist/tree/tree2.js

@@ -2,32 +2,32 @@ import { audit as e } from "../internal/controllers/audit.controller.js";
 import { onChildListMutation as t } from "../internal/utils/events.js";
 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.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";
+import i from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import { updateNodeSelection as a } from "./utils.js";
+import { TreeNode as o } from "./tree-node2.js";
+import s from "./tree.js";
+import c from "./tree.global.js";
+import { attachInternals as l } from "@nvidia-elements/foundations/internal/a11y";
+import { LitElement as u, html as d } from "lit";
+import { property as f } from "lit/decorators/property.js";
+import { useStyles as p } from "@nvidia-elements/foundations/internal/styles";
 // src/tree/tree.ts
-var m = class extends d {
+var m = class extends u {
 	constructor(...e) {
 		super(...e), this.behaviorExpand = !1, this.behaviorSelect = !1, this.border = !1, this.#e = [];
 	}
 	static {
-		this.styles = a([l]);
+		this.styles = p([s]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-tree",
-			version: "2.23.4",
+			version: "2.23.6",
 			children: ["nve-tree-node"]
 		};
 	}
 	get nodes() {
-		return Array.from(this.querySelectorAll(c.metadata.tag));
+		return Array.from(this.querySelectorAll(o.metadata.tag));
 	}
 	get keynavListConfig() {
 		return {
@@ -39,11 +39,11 @@ var m = class extends d {
 		return this.nodes.filter((e) => e.expanded || e.parentNode.expanded || e.parentNode === this);
 	}
 	render() {
-		return f`<div internal-host><slot name="nodes"></slot></div>`;
+		return d`<div internal-host><slot name="nodes"></slot></div>`;
 	}
 	#e;
 	connectedCallback() {
-		super.connectedCallback(), i(this), n(this, u), this._internals.role = "tree", this.#e.push(t(this, () => {
+		super.connectedCallback(), l(this), n(this, c), this._internals.role = "tree", this.#e.push(t(this, () => {
 			this.#t();
 		}, { subtree: !0 }));
 	}
@@ -62,19 +62,19 @@ var m = class extends d {
 		});
 	}
 	#r() {
-		this.behaviorSelect && this.selectable === "multi" && this.nodes.forEach((e) => s(e));
+		this.behaviorSelect && this.selectable === "multi" && this.nodes.forEach((e) => a(e));
 	}
 };
-o([p({ type: String })], m.prototype, "selectable", void 0), o([p({
+i([f({ type: String })], m.prototype, "selectable", void 0), i([f({
 	type: Boolean,
 	attribute: "behavior-expand"
-})], m.prototype, "behaviorExpand", void 0), o([p({
+})], m.prototype, "behaviorExpand", void 0), i([f({
 	type: Boolean,
 	attribute: "behavior-select"
-})], m.prototype, "behaviorSelect", void 0), o([p({
+})], m.prototype, "behaviorSelect", void 0), i([f({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "border", void 0), m = o([e(), r()], m);
+})], m.prototype, "border", void 0), m = i([e(), r()], m);
 export { m as Tree };
 
 //# sourceMappingURL=tree2.js.map

package/dist/tree/tree2.js.map

@@ -1 +1 @@
-{"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"}
+{"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 { appendRootNodeStyle, audit, keyNavigationList, onChildListMutation } from '@nvidia-elements/core/internal';\nimport { attachInternals } from '@nvidia-elements/foundations/internal/a11y';\nimport { useStyles } from '@nvidia-elements/foundations/internal/styles';\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":";;;;;;;;;;;;;;AAgCO,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/week/week2.js

@@ -1,41 +1,41 @@
-import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
-import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
-import { IconButton as r } from "../icon-button/icon-button2.js";
-import { Control as i } from "../forms/control/control2.js";
-import { inputStyles as a } from "../input/input2.js";
-import o from "./week.js";
-import { html as s } from "lit";
-import { property as c } from "lit/decorators/property.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import { IconButton as t } from "../icon-button/icon-button2.js";
+import { Control as n } from "../forms/control/control2.js";
+import { inputStyles as r } from "../input/input2.js";
+import i from "./week.js";
+import { html as a } from "lit";
+import { property as o } from "lit/decorators/property.js";
+import { scopedRegistry as s } from "@nvidia-elements/foundations/internal/decorators";
+import { useStyles as c } from "@nvidia-elements/foundations/internal/styles";
 // src/week/week.ts
-var l = { expand: "expand" }, u = class extends i {
+var l = { expand: "expand" }, u = class extends n {
 	get i18nDefaults() {
 		return l;
 	}
 	static {
-		this.styles = t([
-			...i.styles,
-			a,
-			o
+		this.styles = c([
+			...n.styles,
+			r,
+			i
 		]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-week",
-			version: "2.23.4"
+			version: "2.23.6"
 		};
 	}
 	static {
-		this.elementDefinitions = { [r.metadata.tag]: r };
+		this.elementDefinitions = { [t.metadata.tag]: t };
 	}
 	get suffixContent() {
-		return s`<nve-icon-button exportparts="icon:icon-button-icon" part="icon-button" .ariaLabel="${this.i18n.expand}" icon-name="calendar" container="inline" @click="${this.showPicker}"></nve-icon-button>`;
+		return a`<nve-icon-button exportparts="icon:icon-button-icon" part="icon-button" .ariaLabel="${this.i18n.expand}" icon-name="calendar" container="inline" @click="${this.showPicker}"></nve-icon-button>`;
 	}
 };
-n([c({
+e([o({
 	type: String,
 	reflect: !0
-})], u.prototype, "container", void 0), u = n([e()], u);
+})], u.prototype, "container", void 0), u = e([s()], u);
 export { u as Week };
 
 //# sourceMappingURL=week2.js.map

package/dist/week/week2.js.map

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

package/dist/workspace/controllers/workspace-composition.controller.d.ts

@@ -1,10 +1,10 @@
 import type { ReactiveControllerHost } from 'lit';
+import { WorkspacePanel } from '../panel/panel.js';
 import type { WorkspaceDragPreview } from '../utils/interaction/drag-preview.utils.js';
 import type { WorkspaceLayout } from '../utils/model/layout.utils.js';
 import type { WorkspacePresentedGroup } from '../utils/presentation/groups.utils.js';
 import type { WorkspaceMeasurements } from '../utils/presentation/measurements.utils.js';
 import type { WorkspacePanelHeader } from '../panel-header/panel-header.js';
-import type { WorkspacePanel } from '../panel/panel.js';
 export interface WorkspacePanelTransitionTargets {
     element: WorkspacePanel;
     header: ReturnType<WorkspacePanelHeader['_getTransitionTargets']> | undefined;
@@ -23,6 +23,7 @@ interface WorkspaceCompositionDelegate {
     readonly getLayout: () => WorkspaceLayout | undefined;
     readonly getPreview: () => WorkspaceDragPreview | undefined;
     readonly scrollChanged: () => void;
+    readonly contentChanged: (kind: 'panels' | 'chrome') => void;
 }
 interface WorkspaceCompositionPresentation {
     groups: WorkspacePresentedGroup[];
@@ -42,6 +43,8 @@ export declare class WorkspaceCompositionController {
     #private;
     constructor(host: HTMLElement & ReactiveControllerHost, delegate: WorkspaceCompositionDelegate);
     hostDisconnected(): void;
+    startObserving(): void;
+    stopObserving(): void;
     captureFocus(): void;
     applyPresentation(input: WorkspaceCompositionPresentation): void;
     sync(): void;

package/dist/workspace/controllers/workspace-composition.controller.js

@@ -1,40 +1,66 @@
 import { getActiveElement as e } from "../../internal/utils/focus.js";
-import { focusWorkspacePanel as t, getPanelLabel as n } from "../utils/presentation/composition.utils.js";
-import { getAllocatedTabWidth as r, getTabStripIdentity as i } from "../utils/presentation/groups.utils.js";
+import { matchesElementName as t } from "../../internal/utils/dom.js";
+import { WorkspacePanel as n } from "../panel/panel2.js";
+import { focusWorkspacePanel as r, getPanelLabel as i, isWorkspaceCompositionMutation as a } from "../utils/presentation/composition.utils.js";
+import { createTabStripIdentityResolver as o, getAllocatedTabWidth as s } from "../utils/presentation/groups.utils.js";
 // src/workspace/controllers/workspace-composition.controller.ts
-var a = class {
+var c = class {
 	#e;
 	#t;
 	#n;
+	#r;
+	#i;
 	constructor(e, t) {
 		this.#e = e, this.#t = t, e.addController(this);
 	}
 	hostDisconnected() {
-		this.#n = void 0;
+		this.#n = void 0, this.#r = void 0;
+	}
+	startObserving() {
+		this.#i = new MutationObserver((e) => this.#a(e)), this.#i.observe(this.#e, {
+			childList: !0,
+			characterData: !0,
+			attributes: !0,
+			subtree: !0,
+			attributeFilter: [
+				"id",
+				"min-width",
+				"min-height",
+				"slot"
+			]
+		});
+	}
+	stopObserving() {
+		this.#i?.disconnect(), this.#i = void 0;
+	}
+	#a(e) {
+		let r = e.some((e) => e.type === "childList" && e.target === this.#e || e.type === "attributes" && t(e.target, n) && e.target.parentElement === this.#e), i = e.some((e) => e.type === "attributes" && e.target === this.#e || a(this.#e, e));
+		(r || i) && this.#t.contentChanged(r ? "panels" : "chrome");
 	}
 	captureFocus() {
-		this.#n = this.#t.getPreview() ? void 0 : l(this.#e);
+		this.#n = this.#t.getPreview() ? void 0 : f(this.#e);
 	}
 	applyPresentation(e) {
 		let t = e.groups.map((t) => ({
 			group: t,
 			scrollLeft: e.scroll(t)
 		}));
-		for (let { group: n, scrollLeft: r } of t) o(e, n, r);
+		for (let { group: n, scrollLeft: r } of t) l(e, n, r);
 		let n = new Set(e.groups.flatMap((e) => e.panels));
 		this.#t.getPanels().forEach((t) => {
 			t._present(n.has(t) && !e.source.includes(t.id));
 		});
 	}
 	sync() {
+		this.#r?.root !== (this.#t.getLayout()?.root ?? null) && (this.#r = void 0);
 		let e = this.#t.getPanels(), t = this.#t.getGroups(), n = this.#t.getPreview();
-		s(e, t.map((e) => ({
+		u(e, t.map((e) => ({
 			group: e,
 			strip: this.findTabStrip(e)
-		}))), c(this.#e, t, {
+		}))), d(this.#e, t, {
 			panels: e,
 			carried: (e) => n?.source.includes(e) ?? !1
-		}), n || u(this.#e, t, this.#n), this.#n = void 0;
+		}), n || p(this.#e, t, this.#n), this.#n = void 0;
 	}
 	getTransitionTargets() {
 		let e = /* @__PURE__ */ new Map();
@@ -50,12 +76,16 @@ var a = class {
 		for (let e of this.#e.shadowRoot?.querySelectorAll("[data-boundary]") ?? []) e.parentElement && t.set(e.dataset.boundary, e.parentElement);
 		return {
 			panels: e,
-			groups: f(this.#e),
+			groups: h(this.#e),
 			gutters: t
 		};
 	}
 	getGroupIdentity(e) {
-		return i(this.#t.getLayout()?.root ?? null, e.panels.map((e) => e.id), this.#t.getPreview()?.source ?? []);
+		let t = this.#t.getLayout()?.root ?? null;
+		return this.#r && this.#r.root === t || (this.#r = {
+			root: t,
+			resolve: o(t)
+		}), this.#r.resolve(e.panels.map((e) => e.id), this.#t.getPreview()?.source ?? []);
 	}
 	findTabStrip(e) {
 		return this.#e.shadowRoot?.querySelector(`[data-group="${CSS.escape(this.getGroupIdentity(e))}"]`);
@@ -71,31 +101,31 @@ var a = class {
 		this.#t.getPanels().find((t) => t.id === e)?.querySelector(":scope > nve-workspace-panel-header")?._hover(t);
 	}
 };
-function o(e, t, n) {
-	let { headerHeight: i, actionWidth: a } = e.measurements, o = r(t, e.measurements), s = e.measurements.groupActionWidth ?? 0, c = (e.measurements.panels?.[t.active]?.suffixWidth ?? 0) + s;
-	t.panels.forEach((r, l) => {
-		if (e.source.includes(r.id)) return;
-		e.container && r.getAttribute("container") !== e.container ? r.setAttribute("container", e.container) : e.container || r.removeAttribute("container"), r.setAttribute("role", t.tabbed ? "tabpanel" : "group"), r.setAttribute("aria-hidden", String(t.active !== r.id));
+function l(e, t, n) {
+	let { headerHeight: r, actionWidth: i } = e.measurements, a = s(t, e.measurements), o = e.measurements.groupActionWidth ?? 0, c = (e.measurements.panels?.[t.active]?.suffixWidth ?? 0) + o;
+	t.panels.forEach((s, l) => {
+		if (e.source.includes(s.id)) return;
+		e.container && s.getAttribute("container") !== e.container ? s.setAttribute("container", e.container) : e.container || s.removeAttribute("container"), s.setAttribute("role", t.tabbed ? "tabpanel" : "group"), s.setAttribute("aria-hidden", String(t.active !== s.id));
 		let u = t.rect;
-		Object.assign(r.style, {
+		Object.assign(s.style, {
 			left: `${u.x}px`,
 			top: `${u.y}px`,
 			width: `${u.width}px`,
 			height: `${u.height}px`
-		}), r.style.setProperty("--_workspace-border-right", e.measurements.gap === 0 && u.x + u.width < e.extent.width - 1e-6 ? "none" : "var(--border)"), r.style.setProperty("--_workspace-border-bottom", e.measurements.gap === 0 && u.y + u.height < e.extent.height - 1e-6 ? "none" : "var(--border)"), r._configure({
-			selected: t.active === r.id,
-			offset: t.gripWidth + l * o,
+		}), s.style.setProperty("--_workspace-border-right", e.measurements.gap === 0 && u.x + u.width < e.extent.width - 1e-6 ? "none" : "var(--border)"), s.style.setProperty("--_workspace-border-bottom", e.measurements.gap === 0 && u.y + u.height < e.extent.height - 1e-6 ? "none" : "var(--border)"), s._configure({
+			selected: t.active === s.id,
+			offset: t.gripWidth + l * a,
 			scrollLeft: n,
 			animate: e.animate,
-			tabWidth: Math.max(0, o - a * Number(e.closable)),
-			headerHeight: i,
-			suffixEnd: s,
+			tabWidth: Math.max(0, a - i * Number(e.closable)),
+			headerHeight: r,
+			suffixEnd: o,
 			clipLeft: t.gripWidth,
 			clipWidth: Math.max(0, u.width - t.gripWidth - c)
 		});
 	});
 }
-function s(e, t) {
+function u(e, t) {
 	let n = /* @__PURE__ */ new Map();
 	for (let { group: e, strip: r } of t) {
 		if (!r || e.panels.length < 2) continue;
@@ -110,16 +140,16 @@ function s(e, t) {
 		t.querySelector(":scope > nve-workspace-panel-header")?._bindScroll(e?.source, e?.extent ?? 0);
 	}
 }
-function c(e, t, r) {
-	r.panels.forEach((e) => {
+function d(e, t, n) {
+	n.panels.forEach((e) => {
 		e.hasAttribute("aria-labelledby") && e.removeAttribute("aria-labelledby");
-	}), t.forEach((t) => t.panels.forEach((i) => {
-		if (r.carried(i.id)) return;
-		let a = e.shadowRoot?.querySelector(`[data-panel="${CSS.escape(i.id)}"]`), o = n(r.panels, i.id);
-		i.setAttribute("aria-label", o), t.tabbed && a?.localName === "nve-tabs-item" && (a.ariaControlsElements = [i], a.setAttribute("aria-label", o));
+	}), t.forEach((t) => t.panels.forEach((r) => {
+		if (n.carried(r.id)) return;
+		let a = e.shadowRoot?.querySelector(`[data-panel="${CSS.escape(r.id)}"]`), o = i(r);
+		r.setAttribute("aria-label", o), t.tabbed && a?.localName === "nve-tabs-item" && (a.ariaControlsElements = [r], a.setAttribute("aria-label", o));
 	}));
 }
-function l(e) {
+function f(e) {
 	let t = e.shadowRoot?.activeElement;
 	if (!t || !(t instanceof HTMLElement) || !t.closest(".tabs")) return;
 	let n = t.dataset.panel ?? t.dataset.close ?? t.dataset.dragGroup;
@@ -130,17 +160,17 @@ function l(e) {
 		members: [...t.closest(".tabs")?.querySelectorAll("[data-panel]") ?? []].map((e) => e.dataset.panel)
 	};
 }
-function u(e, n, r) {
-	if (!r || !d(e, r)) return;
-	let i = n.find((e) => e.panels.some((e) => e.id === r.id)) ?? n.find((e) => e.panels.some((e) => r.members.includes(e.id)));
+function p(e, t, n) {
+	if (!n || !m(e, n)) return;
+	let i = t.find((e) => e.panels.some((e) => e.id === n.id)) ?? t.find((e) => e.panels.some((e) => n.members.includes(e.id)));
 	if (!i) return;
-	let a = i.panels.some((e) => e.id === r.id) ? r.id : i.active, o = r.close && a === r.id ? e.shadowRoot?.querySelector(`[data-close="${CSS.escape(a)}"]`) : void 0;
-	o ? o.focus({ preventScroll: !0 }) : t(e, {
+	let a = i.panels.some((e) => e.id === n.id) ? n.id : i.active, o = n.close && a === n.id ? e.shadowRoot?.querySelector(`[data-close="${CSS.escape(a)}"]`) : void 0;
+	o ? o.focus({ preventScroll: !0 }) : r(e, {
 		id: a,
 		preserveScroll: !0
 	});
 }
-function d(t, n) {
+function m(t, n) {
 	if (n.element.isConnected && !n.element.closest("[inert]")) return !1;
 	let r = e(t.ownerDocument);
 	return !r || [
@@ -149,7 +179,7 @@ function d(t, n) {
 		n.element
 	].some((e) => e === r) ? !0 : !(r.isConnected && !r.closest("[inert]"));
 }
-function f(e) {
+function h(e) {
 	let t = [];
 	for (let n of e.shadowRoot?.querySelectorAll(".group-chrome") ?? []) {
 		let e = /* @__PURE__ */ new Map();
@@ -164,6 +194,6 @@ function f(e) {
 	}
 	return t;
 }
-export { a as WorkspaceCompositionController };
+export { c as WorkspaceCompositionController };
 
 //# sourceMappingURL=workspace-composition.controller.js.map