@nvidia-elements/core 0.0.1 → 0.0.2

package/dist/tooltip/tooltip.examples.json

@@ -0,0 +1,243 @@
+{
+  "element": "nve-tooltip",
+  "entrypoint": "@nvidia-elements/core/tooltip/tooltip.examples.json",
+  "items": [
+    {
+      "id": "core-tooltip_default",
+      "name": "Default",
+      "template": "<nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n<nve-button interestfor=\"tooltip\">button</nve-button>\n",
+      "summary": "Basic tooltip triggered by popovertarget attribute. Use for providing brief, contextual information on hover or focus without cluttering the interface.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tooltip_visual",
+      "name": "Visual",
+      "template": "<nve-tooltip anchor=\"btn\">hello there</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n",
+      "summary": "Tooltip using anchor attribute to reference the trigger element. Use when you need to explicitly connect tooltips to their triggers by ID for better control over relationships.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_position",
+      "name": "Position",
+      "template": "<nve-tooltip anchor=\"btn\" position=\"top\">top</nve-tooltip>\n<nve-tooltip anchor=\"btn\" position=\"right\">right</nve-tooltip>\n<nve-tooltip anchor=\"btn\" position=\"bottom\">bottom</nve-tooltip>\n<nve-tooltip anchor=\"btn\" position=\"left\">left</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n",
+      "summary": "Tooltip positioning options for optimal placement relative to trigger elements. Use different positions based on available screen space and content layout to ensure tooltips remain visible and don't obscure important content.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_alignment",
+      "name": "Alignment",
+      "template": "<nve-tooltip anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"top\">top center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"right\">right center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"bottom\">bottom center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"left\">left center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-tooltip>\n<nve-card id=\"card\" style=\"width: 400px; height: 200px\"></nve-card>\n",
+      "summary": "Fine-grained tooltip alignment combined with positioning for precise placement control. Use to align tooltips to specific edges of trigger elements, improving visual hierarchy and reducing overlap with other UI elements.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_events",
+      "name": "Events",
+      "template": "<nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n<nve-button interestfor=\"tooltip\">button</nve-button>\n<script type=\"module\">\n  const tooltip = document.querySelector(\"nve-tooltip\");\n  tooltip.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  tooltip.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  tooltip.addEventListener(\"close\", () => console.log(\"close\"));\n  tooltip.addEventListener(\"open\", () => console.log(\"open\"));\n</script>\n",
+      "summary": "Event handling for tooltip lifecycle events. Useful for adding custom behavior when tooltip state changes.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tooltip_content",
+      "name": "Content",
+      "template": "<nve-tooltip anchor=\"btn\" position=\"bottom\">\n  <h3 nve-text=\"label\">Title</h3>\n  <p nve-text=\"body\">some text content</p>\n</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n",
+      "summary": "Tooltip with structured content including title and body text. Use for tooltips that need hierarchical information, but keep content brief to maintain tooltip's lightweight nature.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tooltip_dynamic-trigger",
+      "name": "DynamicTrigger",
+      "template": "<nve-tooltip id=\"dynamic-popover\"></nve-tooltip>\n<div nve-layout=\"row gap:sm align:center\">\n  <nve-button interestfor=\"dynamic-popover\">one</nve-button>\n  <nve-button interestfor=\"dynamic-popover\">two</nve-button>\n  <nve-button interestfor=\"dynamic-popover\">three</nve-button>\n</div>\n<script type=\"module\">\n  document.querySelector(\"#dynamic-popover\").addEventListener(\"toggle\", (e) => {\n    if (e.newState === \"open\") {\n      e.target.textContent = \"tooltip \" + e.source.textContent;\n    }\n  });\n</script>\n",
+      "summary": "Single tooltip shared across many triggers with dynamic content updates. Use to reduce DOM nodes and improve performance when many similar elements need contextual help, updating tooltip content based on which trigger activated it.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tooltip_hint",
+      "name": "Hint",
+      "template": "<div nve-layout=\"row gap:xs align:vertical-center\">\n  <h2 nve-text=\"heading sm\">Preview</h2>\n  <nve-icon-button container=\"flat\" icon-name=\"information-circle-stroke\" interestfor=\"hint\"></nve-icon-button>\n  <nve-tooltip id=\"hint\" position=\"right\">Preview in progress CI tasks for the active host</nve-tooltip>\n</div>\n",
+      "summary": "Tooltip as a hint icon pattern for providing contextual help next to labels or headings. Perfect for explaining features or terminology without cluttering the main interface, allowing users to discover information on demand.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tooltip_status",
+      "name": "Status",
+      "template": "<div nve-layout=\"row align:center\" style=\"height: 250px\">\n  <nve-tooltip anchor=\"btn\">default status</nve-tooltip>\n  <nve-tooltip anchor=\"btn\" position=\"bottom\" status=\"muted\">muted status</nve-tooltip>\n  <nve-button id=\"btn\">button</nve-button>\n</div>\n",
+      "summary": "Tooltip with muted status variant for subtle, low-emphasis contextual information. Use muted tooltips when the information is supplementary and shouldn't draw attention away from primary content.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tooltip_wrap",
+      "name": "Wrap",
+      "template": "<nve-tooltip anchor=\"btn\" style=\"--width: 200px\">\n  Tooltips provide contextual help for interface elements. Keep content brief and descriptive to help users understand\n  available actions.\n</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n",
+      "summary": "Tooltip with constrained width for controlled text wrapping. Use when tooltip content is longer than a single line, but prefer keeping tooltips brief for better scannability and user experience.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_async-trigger",
+      "name": "AsyncTrigger",
+      "template": "\n<div id=\"async-trigger-demo\">\n  <nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n  <template><nve-button interestfor=\"tooltip\">button</nve-button></template>\n</div>\n<script type=\"module\">\n  import '@nvidia-elements/core/button/define.js';\n  import '@nvidia-elements/core/tooltip/define.js';\n  const template = document.querySelector('#async-trigger-demo template');\n  const instance = template.content.cloneNode(true);\n  setTimeout(() => {\n    document.querySelector('#async-trigger-demo').appendChild(instance);\n  }, 1000);\n</script>\n  ",
+      "summary": "Tooltip anchoring to a dynamically created anchor element.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_position-strategy-absolute",
+      "name": "PositionStrategyAbsolute",
+      "template": "<nve-button interestfor=\"tooltip\">button</nve-button>\n<nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n",
+      "summary": "Tooltip with absolute positioning strategy for precise placement in complex layouts. Use when default fixed positioning causes issues with scrolling containers or nested positioning contexts.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_scroll-container",
+      "name": "ScrollContainer",
+      "template": "<style>\n  #scroll-container {\n    display: flex;\n    flex-direction: column;\n    height: 300px;\n    width: 200px;\n    overflow-y: auto;\n    border: 1px solid #ccc;\n    margin: 20vh;\n    & > button {\n      min-height: 50px;\n      width: 100%;\n    }\n  }\n</style>\n<section id=\"scroll-container\">\n  <button interestfor=\"tooltip\">1</button>\n  <button interestfor=\"tooltip\">2</button>\n  <button interestfor=\"tooltip\">3</button>\n  <button interestfor=\"tooltip\">4</button>\n  <button interestfor=\"tooltip\">5</button>\n  <button interestfor=\"tooltip\">6</button>\n  <button interestfor=\"tooltip\">7</button>\n  <button interestfor=\"tooltip\">8</button>\n  <button interestfor=\"tooltip\">9</button>\n  <button interestfor=\"tooltip\">10</button>\n</section>\n<nve-tooltip id=\"tooltip\" position=\"left\">hello there</nve-tooltip>\n",
+      "summary": "Tooltip behavior within scrollable containers with automatic repositioning. Tooltips maintain visibility and proper positioning even when anchor elements scroll, ensuring consistent user experience in scrollable interfaces.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_dynamic-anchor-position",
+      "name": "DynamicAnchorPosition",
+      "template": "<dynamic-anchor-position-demo></dynamic-anchor-position-demo>\n",
+      "summary": "Tooltip that follows a dynamically positioned anchor element. Real-time tooltip repositioning as the anchor moves, useful for cursor-following tooltips or drag-and-drop interfaces.",
+      "description": "",
+      "deprecated": true,
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_legacy-dynamic-trigger",
+      "name": "LegacyDynamicTrigger",
+      "template": "<div id=\"dynamic-trigger-demo\" nve-layout=\"row align:center\" style=\"height: 250px\">\n  <nve-tooltip behavior-trigger hidden>hello there</nve-tooltip>\n  <div nve-layout=\"row gap:xl\">\n    <nve-button>button</nve-button>\n    <nve-button>button</nve-button>\n    <nve-button>button</nve-button>\n  </div>\n  <script type=\"module\">\n    const tooltip = document.querySelector(\"#dynamic-trigger-demo nve-tooltip\");\n    document.querySelector(\"#dynamic-trigger-demo\").addEventListener(\"mouseover\", (e) => {\n      if (e.target.tagName === \"NVE-BUTTON\") {\n        tooltip.anchor = e.target;\n        tooltip.trigger = e.target;\n      }\n    });\n  </script>\n</div>\n",
+      "summary": "Legacy pattern for dynamic tooltip triggers using behavior-trigger attribute. Programmatic anchor and trigger reassignment for backward compatibility with older implementations.",
+      "description": "",
+      "deprecated": true,
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_legacy-trigger",
+      "name": "LegacyTrigger",
+      "template": "<div nve-layout=\"row align:center\" style=\"height: 250px\">\n  <nve-tooltip anchor=\"action-btn\" trigger=\"action-btn\" hidden>hello there</nve-tooltip>\n  <nve-button id=\"action-btn\">button</nve-button>\n  <script type=\"module\">\n    const tooltip = document.querySelector('nve-tooltip[anchor=\"action-btn\"]');\n    tooltip.addEventListener(\"close\", () => (tooltip.hidden = true));\n    tooltip.addEventListener(\"open\", () => (tooltip.hidden = false));\n  </script>\n</div>\n",
+      "summary": "Legacy trigger pattern with manual event handling and hidden attribute management. Older implementation approach for backward compatibility; prefer using popovertarget for new implementations.",
+      "description": "",
+      "deprecated": true,
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_legacy-behavior-trigger",
+      "name": "LegacyBehaviorTrigger",
+      "template": "<nve-tooltip behavior-trigger anchor=\"action-btn\" trigger=\"action-btn\" hidden>hello there</nve-tooltip>\n<nve-button id=\"action-btn\">button</nve-button>\n",
+      "summary": "Legacy behavior-trigger pattern for automatic tooltip lifecycle management. Deprecated approach that auto-manages visibility, prefer modern popovertarget API for new implementations.",
+      "description": "",
+      "deprecated": true,
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_legacy-open-delay",
+      "name": "LegacyOpenDelay",
+      "template": "<nve-tooltip behavior-trigger anchor=\"delay-tooltip-1\" trigger=\"delay-tooltip-1\" open-delay=\"500\" hidden\n  >delayed tooltip</nve-tooltip\n>\n<nve-button id=\"delay-tooltip-1\">button</nve-button>\n<nve-tooltip behavior-trigger anchor=\"delay-tooltip-2\" trigger=\"delay-tooltip-2\" open-delay=\"500\" hidden\n  >delayed tooltip</nve-tooltip\n>\n<nve-button id=\"delay-tooltip-2\">button</nve-button>\n<nve-tooltip behavior-trigger anchor=\"delay-tooltip-3\" trigger=\"delay-tooltip-3\" open-delay=\"500\" hidden\n  >delayed tooltip</nve-tooltip\n>\n<nve-button id=\"delay-tooltip-3\">button</nve-button>\n",
+      "summary": "Legacy implementation combining behavior-trigger with open-delay for many tooltips. Older pattern for delayed tooltip appearance; prefer modern popovertarget with open-delay attribute.",
+      "description": "",
+      "deprecated": true,
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_nested-dynamic",
+      "name": "NestedDynamic",
+      "template": "<nve-button popovertarget=\"dialog\">open</nve-button>\n<nve-dialog id=\"dialog\" size=\"lg\" modal closable>\n  <nve-button interestfor=\"tooltip\">button</nve-button>\n  <section>\n    <button interestfor=\"tooltip\">button</button>\n  </section>\n</nve-dialog>\n<nve-tooltip id=\"tooltip\">test</nve-tooltip>\n",
+      "summary": "Tooltip functionality within modal dialogs with many triggers. Ensures tooltips work correctly in layered UI contexts, maintaining proper stacking order and interaction behavior within modal overlays.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_interest-invokers",
+      "name": "InterestInvokers",
+      "template": "<section nve-layout=\"row gap:md align:center\">\n  <button popovertarget=\"dropdown\" interestfor=\"tooltip\">open</button>\n  <nve-button popovertarget=\"dropdown\" interestfor=\"tooltip\">open</nve-button>\n  <nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n  <nve-tooltip id=\"tooltip\">tooltip content</nve-tooltip>\n  <div id=\"div\">static</div>\n  <nve-tooltip trigger=\"div\" hidden>static</nve-tooltip>\n</section>\n",
+      "summary": "Tooltip functionality using interest invokers to control tooltip visibility on hover and focus.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_open-delay",
+      "name": "OpenDelay",
+      "template": "<nve-tooltip id=\"delay-tooltip\" open-delay=\"500\">delayed tooltip</nve-tooltip>\n<nve-button interestfor=\"delay-tooltip\">button</nve-button>\n",
+      "summary": "Tooltip with delayed appearance to reduce visual noise during quick mouse movements. Use open-delay for better user experience when tooltips are dense, preventing tooltips from flashing during cursor transitions.",
+      "description": "",
+      "deprecated": true,
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tooltip_legacy-popover-target",
+      "name": "LegacyPopoverTarget",
+      "template": "<nve-button popovertarget=\"tooltip\">open</nve-button>\n<nve-tooltip id=\"tooltip\">tooltip content</nve-tooltip>\n",
+      "summary": "Legacy behavior that allowed tooltip triggering via popovertarget attribute instead of interestfor attribute with hover events.",
+      "description": "",
+      "deprecated": true,
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/tooltip/tooltip.js

@@ -0,0 +1,6 @@
+//#region src/tooltip/tooltip.css?inline
+var e = ":host{--nve-sys-layer-popover-arrow-padding: 6px;--nve-sys-layer-popover-arrow-offset: 2px;--nve-sys-layer-popover-offset: 2px;--nve-sys-interaction-color: var(--color);--border-radius: var(--nve-ref-border-radius-sm);--border: 0;--background: var(--nve-sys-layer-popover-background);--color: var(--nve-sys-layer-popover-color);--padding: var(--nve-ref-size-200) var(--nve-ref-size-300);--box-shadow: var(--nve-ref-shadow-500);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-regular);--arrow-transform: translate(0, -2px) rotate(-45deg);--width: max-content;--height: initial;box-shadow:var(--box-shadow)}:host([status=\"muted\"]){--background: var(--nve-sys-layer-overlay-background);--color: var(--nve-sys-layer-overlay-color)}[internal-host]{padding:var(--padding);border-radius:var(--border-radius);background:var(--background);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);width:var(--width);height:var(--height);border:var(--border);white-space:initial}[internal-host]:has(nve-icon-button){padding-inline-end:var(--nve-ref-size-800)}.arrow{width:var(--nve-ref-size-300);height:var(--nve-ref-size-300);background:var(--background);transform:var(--arrow-transform);border-radius:var(--nve-ref-size-50);position:absolute}nve-icon-button{--color: inherit;position:absolute;inset-block-start:var(--nve-ref-size-50);inset-inline-end:var(--nve-ref-size-50)}::slotted([nve-text]){color:inherit!important}:host([position*=\"top\"]){--arrow-transform: translate(0, -2px) rotate(-45deg)}:host([position*=\"right\"]){--arrow-transform: translate(2px, 0) rotate(45deg)}:host([position*=\"bottom\"]){--arrow-transform: translate(0, 2px) rotate(45deg)}:host([position*=\"left\"]){--arrow-transform: translate(-2px, 0) rotate(45deg)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/tooltip/tooltip.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  --nve-sys-layer-popover-arrow-padding: 6px;\n  --nve-sys-layer-popover-arrow-offset: 2px;\n  --nve-sys-layer-popover-offset: 2px;\n  --nve-sys-interaction-color: var(--color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --border: 0;\n  --background: var(--nve-sys-layer-popover-background);\n  --color: var(--nve-sys-layer-popover-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n  --box-shadow: var(--nve-ref-shadow-500);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n  --width: max-content;\n  --height: initial;\n  box-shadow: var(--box-shadow);\n}\n\n:host([status='muted']) {\n  --background: var(--nve-sys-layer-overlay-background);\n  --color: var(--nve-sys-layer-overlay-color);\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  width: var(--width);\n  height: var(--height);\n  border: var(--border);\n  white-space: initial;\n}\n\n[internal-host]:has(nve-icon-button) {\n  padding-inline-end: var(--nve-ref-size-800);\n}\n\n.arrow {\n  width: var(--nve-ref-size-300);\n  height: var(--nve-ref-size-300);\n  background: var(--background);\n  transform: var(--arrow-transform);\n  border-radius: var(--nve-ref-size-50);\n  position: absolute;\n}\n\nnve-icon-button {\n  --color: inherit;\n  position: absolute;\n  inset-block-start: var(--nve-ref-size-50);\n  inset-inline-end: var(--nve-ref-size-50);\n}\n\n::slotted([nve-text]),\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([position*='top']) {\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n}\n\n:host([position*='right']) {\n  --arrow-transform: translate(2px, 0) rotate(45deg);\n}\n\n:host([position*='bottom']) {\n  --arrow-transform: translate(0, 2px) rotate(45deg);\n}\n\n:host([position*='left']) {\n  --arrow-transform: translate(-2px, 0) rotate(45deg);\n}\n"],"mappings":""}

package/dist/tooltip/tooltip2.js

@@ -0,0 +1,52 @@
+import { attachInternals as e } from "../internal/utils/a11y.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { audit as n } from "../internal/controllers/audit.controller.js";
+import { TypeNativePopoverController as r } from "../internal/controllers/type-native-popover.controller.js";
+import { useStyles as i } from "../internal/styles/index.js";
+import { popoverStyles as a } from "../internal/styles/popover2.js";
+import o from "./tooltip.js";
+import { LitElement as s, html as c } from "lit";
+import { property as l } from "lit/decorators/property.js";
+import { query as u } from "lit/decorators/query.js";
+//#region src/tooltip/tooltip.ts
+var d = class extends s {
+	constructor(...e) {
+		super(...e), this.position = "top", this.popoverType = "hint", this.typeNativePopoverController = new r(this);
+	}
+	static {
+		this.styles = i([a, o]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-tooltip",
+			version: "0.0.2"
+		};
+	}
+	render() {
+		return c`<div internal-host><slot></slot></div><div part="arrow" class="arrow"></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this), this._internals.role = "tooltip";
+	}
+};
+t([l({ type: String })], d.prototype, "anchor", void 0), t([l({ type: String })], d.prototype, "trigger", void 0), t([l({
+	type: String,
+	reflect: !0
+})], d.prototype, "position", void 0), t([l({
+	type: String,
+	reflect: !0
+})], d.prototype, "alignment", void 0), t([l({
+	type: Boolean,
+	reflect: !0,
+	attribute: "behavior-trigger"
+})], d.prototype, "behaviorTrigger", void 0), t([l({
+	type: String,
+	reflect: !0
+})], d.prototype, "status", void 0), t([l({
+	type: Number,
+	attribute: "open-delay"
+})], d.prototype, "openDelay", void 0), t([u(".arrow")], d.prototype, "popoverArrow", void 0), d = t([n({ excessiveInstanceLimit: 50 })], d);
+//#endregion
+export { d as Tooltip };
+
+//# sourceMappingURL=tooltip2.js.map

package/dist/tooltip/tooltip2.js.map

@@ -0,0 +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. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\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 - default content slot\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  @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":";;;;;;;;;;;AA2CO,IAAA,IAAA,cAAsB,EAAW;;+BAwBiC,0BA0BnC,2CAEI,IAAI,EAAqC,KAAK;;;gBAnDtE,EAAU,CAAC,GAAe,EAAO,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;GACV;;CAoDD,SAAS;AACP,SAAO,CAAI;;CAQb,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;;GA1DxB,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAO1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,KAK1B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAMzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAoB,CAAC,CAAA,EAAA,EAAA,WAAA,mBAAA,KAAA,EAAA,KAKzE,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAEnD,EAAM,SAAS,CAAA,EAAA,EAAA,WAAA,gBAAA,KAAA,EAAA,SAhDjB,EAAM,EAAE,wBAAA,IAAwB,CAAC,CAAA,EAAA,EAAA"}

package/dist/tree/define.d.ts

@@ -0,0 +1,7 @@
+import { Tree, TreeNode } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-tree': Tree;
+        'nve-tree-node': TreeNode;
+    }
+}

package/dist/tree/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { TreeNode as t } from "./tree-node2.js";
+import { Tree as n } from "./tree2.js";
+e(n), e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/tree/define.js.map

@@ -0,0 +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/core/internal';\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,EAAK,EACZ,EAAO,EAAS"}

package/dist/tree/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tree.js';
+export * from './tree-node.js';

package/dist/tree/index.js

@@ -0,0 +1,3 @@
+import { TreeNode as e } from "./tree-node2.js";
+import { Tree as t } from "./tree2.js";
+export { t as Tree, e as TreeNode };

package/dist/tree/tree-node.d.ts

@@ -0,0 +1,91 @@
+import { LitElement } from 'lit';
+import { IconButton } from '../icon-button';
+import { Icon } from '../icon';
+import { Checkbox } from '../checkbox';
+/**
+ * @element nve-tree-node
+ * @description A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.
+ * @since 1.2.0
+ * @entrypoint \@nvidia-elements/core/tree
+ * @event open - Dispatched when the node opens.
+ * @event close - Dispatched when the node closes.
+ * @event select - Dispatched when the node selection state changes.
+ * @command --select - use to select the node
+ * @command --deselect - use to deselect the node
+ * @command --toggle-select - use to toggle the node selection state
+ * @command --open - use to open the node
+ * @command --close - use to close the node
+ * @command --toggle - use to toggle open / closed state of the node
+ * @slot - Use default slot for basic text content or nested <nve-tree-node> elements.
+ * @slot content - Use for extended long form content containing interactive elements or form inputs.
+ * @cssprop --color
+ * @cssprop --border-radius
+ * @cssprop --font-size
+ * @cssprop --min-height
+ * @cssprop --text-wrap
+ * @cssprop --font-weight
+ * @cssprop --width
+
+ * @csspart icon-button - The icon button element
+ * @csspart icon - The icon element
+ * @csspart checkbox - The checkbox element
+
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+ *
+ */
+export declare class TreeNode extends LitElement {
+    #private;
+    /**
+     * Determines if node is in an expanded state.
+     */
+    expanded: boolean;
+    /**
+     * Determines whether if node is in a selected state.
+     */
+    selected: boolean;
+    /**
+     * Determines whether a node can be expandable. Expandable by default if slotted nodes exist.
+     */
+    expandable: boolean;
+    /**
+     * Determines whether a node can be in a selected state. Nodes can be in a single or multi select state.
+     */
+    selectable: 'single' | 'multi';
+    /**
+     * Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI.
+     */
+    highlighted: boolean;
+    /**
+     * Updates internal string values for internationalization.
+     */
+    i18n: Partial<import('../internal').I18nStrings & {
+        __set: boolean;
+    }>;
+    /** @private */
+    slot: string;
+    /**
+     * Returns list of child nodes
+     */
+    readonly nodes: TreeNode[];
+    indeterminate: boolean;
+    behaviorExpand: boolean;
+    behaviorSelect: boolean;
+    static metadata: {
+        tag: string;
+        version: string;
+        parents: string[];
+    };
+    static elementDefinitions: {
+        [IconButton.metadata.tag]: typeof IconButton;
+        [Icon.metadata.tag]: typeof Icon;
+        [Checkbox.metadata.tag]: typeof Checkbox;
+    };
+    static styles: import('lit').CSSResult[];
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    /** opens and sets the expanded state automatically if behaviorExpand is true */
+    open(): void;
+    /** closes and sets the expanded state automatically if behaviorExpand is true */
+    close(): void;
+}

package/dist/tree/tree-node.js

@@ -0,0 +1,6 @@
+//#region 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{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-100);min-height:var(--min-height);width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--nve-ref-space-xxs)}[part=_node-header]{display:flex;flex-direction:column;width:100%;position:relative;min-width:fit-content}: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}::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

@@ -0,0 +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  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-100);\n  min-height: var(--min-height);\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--nve-ref-space-xxs);\n}\n\n[part='_node-header'] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  position: relative;\n  min-width: fit-content;\n}\n\n:host(:focus-visible) [part='_node-header'],\n::slotted(a:focus-visible)::after {\n  outline: Highlight solid 2px !important;\n  outline: 5px auto -webkit-focus-ring-color !important;\n}\n\n[name='content'] {\n  padding: var(--nve-ref-size-200);\n  display: block;\n}\n\n[part='_nodes'] {\n  width: 100%;\n  position: relative;\n  display: block;\n  padding-inline-start: var(--nve-ref-size-200);\n  overflow: hidden;\n  transition: height var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([expanded]) [part='_nodes'] {\n  /* fallback for browsers that do not support intrinsic sizing keywords with calc-size() */\n  height: auto;\n\n  /* https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_to_and_from_intrinsic_sizing_keywords_with_calc-size */\n  height: calc-size(max-content, size);\n}\n\n[part='_nodes']::before {\n  border-inline-start: var(--node-border);\n  inset-inline-start: var(--nve-ref-size-150);\n  inset-block: 0;\n  display: block;\n  content: '';\n  position: absolute;\n}\n\nnve-icon-button {\n  --width: var(--nve-ref-size-400);\n  outline: 0 !important;\n}\n\nnve-icon[name='caret'] {\n  transition: transform var(--nve-ref-animation-duration-150) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\nnve-checkbox {\n  margin-inline-start: var(--nve-ref-space-xxs);\n  margin-block-start: var(--nve-ref-space-xs);\n  align-self: start;\n}\n\ninput {\n  outline: 0 !important;\n}\n\n::slotted(a) {\n  text-decoration: none !important;\n  color: var(--color) !important;\n  outline: 0;\n}\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

@@ -0,0 +1,116 @@
+import { getFlattenedFocusableItems as e } from "../internal/utils/dom.js";
+import { attachInternals as t } from "../internal/utils/a11y.js";
+import { stateExpanded as n } from "../internal/controllers/state-expanded.controller.js";
+import { stateSelected as r } from "../internal/controllers/state-selected.controller.js";
+import { typeAnchor as i } from "../internal/controllers/type-anchor.controller.js";
+import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { audit as o } from "../internal/controllers/audit.controller.js";
+import { I18nController as s } from "../internal/controllers/i18n.controller.js";
+import { stateHighlighted as c } from "../internal/controllers/state-highlighted.controller.js";
+import { TypeExpandableController as l } from "../internal/controllers/type-expandable.controller.js";
+import { TypeSelectableController as u } from "../internal/controllers/type-selectable.controller.js";
+import { typeSSR as d } from "../internal/controllers/type-ssr.controller.js";
+import { hostAttr as f } from "../internal/decorators/host-attr.js";
+import { scopedRegistry as p } from "../internal/decorators/scoped-registry.js";
+import { useStyles as m } from "../internal/styles/index.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";
+import { Checkbox as v } from "../checkbox/checkbox2.js";
+import y from "./tree-node.js";
+import { LitElement as b, html as x, nothing as S } from "lit";
+import { property as C } from "lit/decorators/property.js";
+import { state as w } from "lit/decorators/state.js";
+import { queryAssignedElements as T } from "lit/decorators/query-assigned-elements.js";
+//#region src/tree/tree-node.ts
+var E = class extends b {
+	constructor(...e) {
+		super(...e), this.expanded = !1, this.selected = !1, this.expandable = !1, this.highlighted = !1, this.i18n = this.#e.i18n, this.slot = "nodes", this.indeterminate = !1, this.behaviorExpand = !1, this.behaviorSelect = !1;
+	}
+	#e = new s(this);
+	get #t() {
+		return this.closest("nve-tree");
+	}
+	#n = new l(this);
+	#r = new u(this);
+	get #i() {
+		return this.expandable || this.expanded || !!this.nodes?.length;
+	}
+	static {
+		this.metadata = {
+			tag: "nve-tree-node",
+			version: "0.0.2",
+			parents: ["nve-tree", "nve-tree-node"]
+		};
+	}
+	static {
+		this.elementDefinitions = {
+			[g.metadata.tag]: g,
+			[h.metadata.tag]: h,
+			[v.metadata.tag]: v
+		};
+	}
+	static {
+		this.styles = m([y]);
+	}
+	render() {
+		return x`<div internal-host @slotchange="${this.#a}"><div part="_node">${this.#i ? x`<nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" @pointerup="${this.#l}" role="presentation" tabindex="-1" size="sm" container="inline" nofocus><nve-icon part="icon" name="caret" direction="${this.expanded ? "down" : "right"}" size="sm"></nve-icon></nve-icon-button>` : S} ${this.selectable === "multi" ? x`<nve-checkbox part="checkbox" nofocus><input type="checkbox" @change="${this.#f}" .checked="${this.selected}" .indeterminate="${this.indeterminate}" .ariaLabel="${this.i18n.expand}" tabindex="-1"></nve-checkbox>` : S}<div tabindex="0" part="_node-header"><slot tabindex="0" class="node-title" @click="${this.#c}"></slot><slot name="content" part="_content"></slot></div></div><div role="group" part="_nodes"><slot name="nodes"></slot></div></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), t(this), this._internals.role = "treeitem", this.#s(), this.#a();
+	}
+	open() {
+		this.#n.open();
+	}
+	close() {
+		this.#n.close();
+	}
+	#a() {
+		this.requestUpdate(), this.#o();
+	}
+	#o() {
+		this.#i ? this._internals.states.add("is-expandable") : this._internals.states.delete("is-expandable");
+	}
+	#s() {
+		this.addEventListener("keyup", (e) => {
+			this.#i && e.code === "ArrowLeft" && e.target === this && this.close(), this.#i && e.code === "ArrowRight" && e.target === this && this.open(), e.code === "Space" && e.target === this && this.selectable && (e.preventDefault(), this.#u());
+		});
+	}
+	#c(t) {
+		let n = e(t.currentTarget).length;
+		this.#i && !this.selectable && !n && this.#l(), this.selectable && (!n || t.target.localName === "a") && this.#u();
+	}
+	#l() {
+		this.#n.toggle();
+	}
+	#u() {
+		this.selectable === "single" && this.#d(), this.selectable === "multi" && this.#f();
+	}
+	#d() {
+		this.#r.toggle(), this.behaviorSelect && this.#t.nodes.filter((e) => e !== this).forEach((e) => e.selected = !1);
+	}
+	#f() {
+		this.#r.toggle(), this.behaviorSelect && (this.nodes.forEach((e) => {
+			e.selected = this.selected, e.indeterminate = !1;
+		}), this.#t.nodes.forEach((e) => _(e)));
+	}
+};
+a([C({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "expanded", void 0), a([C({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "selected", void 0), a([C({ type: Boolean })], E.prototype, "expandable", void 0), a([C({ type: String })], E.prototype, "selectable", void 0), a([C({ type: Boolean })], E.prototype, "highlighted", void 0), a([C({ type: Object })], E.prototype, "i18n", void 0), a([f()], E.prototype, "slot", void 0), a([T({ slot: "nodes" })], E.prototype, "nodes", void 0), a([w()], E.prototype, "indeterminate", void 0), a([w()], E.prototype, "behaviorExpand", void 0), a([w()], E.prototype, "behaviorSelect", void 0), E = a([
+	o(),
+	d({ log: !1 }),
+	i(),
+	r(),
+	n(),
+	p(),
+	c()
+], E);
+//#endregion
+export { E as TreeNode };
+
+//# sourceMappingURL=tree-node2.js.map