@nvidia-elements/core 0.0.9 → 0.0.11

package/dist/toggletip/toggletip.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/toggletip/toggletip.examples.json",
   "items": [
     {
-      "id": "core-toggletip_default",
+      "id": "toggletip",
       "name": "Default",
       "template": "<nve-toggletip id=\"toggletip\">hello there</nve-toggletip>\n<nve-button popovertarget=\"toggletip\">button</nve-button>\n",
       "summary": "Basic toggletip requiring click to open and close. Unlike tooltips that appear on hover, use toggletips for interactive content, extra details, or when users need time to read or interact with the popover content.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-toggletip_visual",
+      "id": "toggletip-visual",
       "name": "Visual",
       "template": "<nve-toggletip anchor=\"toggletip-btn\">hello there</nve-toggletip>\n<nve-button id=\"toggletip-btn\">button</nve-button>\n",
       "summary": "Visual example using anchor attribute for explicit trigger-target relationship and consistent toggletip implementation across your application.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-toggletip_content",
+      "id": "toggletip-content",
       "name": "Content",
       "template": "<nve-toggletip anchor=\"btn\">\n  <nve-toggletip-header>\n    <h3 nve-text=\"heading sm\">Toggletip Header</h3>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <p nve-text=\"body\">Toggletip Footer</p>\n  </nve-toggletip-footer>\n</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n",
       "summary": "Toggletip with complete structure including header, content, and footer sections. Perfect for rich interactive content like quick forms, action menus, or detailed explanations that gain from organized layout.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-toggletip_content-with-footer",
+      "id": "toggletip-content-with-footer",
       "name": "ContentWithFooter",
       "template": "<nve-toggletip anchor=\"btn\">\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <p nve-text=\"body\">Toggletip Footer</p>\n  </nve-toggletip-footer>\n</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n",
       "summary": "Toggletip with footer for action buttons or supplementary links. Use when toggletip content needs follow-up actions, navigation, or extra context links without requiring a header section.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-toggletip_content-with-header",
+      "id": "toggletip-content-with-header",
       "name": "ContentWithHeader",
       "template": "<nve-toggletip anchor=\"btn\">\n  <nve-toggletip-header>\n    <h3 nve-text=\"heading sm\">Toggletip Header</h3>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n",
       "summary": "Toggletip with header for titled content sections. Use when toggletip information benefits from a clear title or heading to establish context, improving content scannability and understanding.",
@@ -52,7 +52,7 @@
       ]
     },
     {
-      "id": "core-toggletip_events",
+      "id": "toggletip-events",
       "name": "Events",
       "template": "<nve-toggletip id=\"toggletip\">hello there</nve-toggletip>\n<nve-button popovertarget=\"toggletip\">button</nve-button>\n<script type=\"module\">\n  const toggletip = document.querySelector(\"nve-toggletip\");\n  toggletip.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  toggletip.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  toggletip.addEventListener(\"close\", () => console.log(\"close\"));\n  toggletip.addEventListener(\"open\", () => console.log(\"open\"));\n</script>\n",
       "summary": "Event handling for toggletip lifecycle events. Useful for adding custom behavior when toggletip state changes.",
@@ -61,7 +61,7 @@
       "tags": []
     },
     {
-      "id": "core-toggletip_closable",
+      "id": "toggletip-closable",
       "name": "Closable",
       "template": "<nve-toggletip anchor=\"btn\" closable>\n  <nve-toggletip-header>Toggletip Header</nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>Toggletip Footer</nve-toggletip-footer>\n</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n",
       "summary": "Closable toggletip with explicit close button for user control. Use when content is complex enough that users may want to dismiss it independently of clicking outside, providing clear exit paths for longer-form content.",
@@ -72,7 +72,7 @@
       ]
     },
     {
-      "id": "core-toggletip_alert-group",
+      "id": "toggletip-alert-group",
       "name": "AlertGroup",
       "template": "<nve-toggletip id=\"toggletip-alert-group\">\n  <nve-toggletip-header>\n    <nve-alert-group status=\"danger\" container=\"full\" prominence=\"emphasis\">\n      <nve-alert>Workflow Failed</nve-alert>\n    </nve-alert-group>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <nve-button style=\"width: 100%\">Retry Workflow</nve-button>\n  </nve-toggletip-footer>\n</nve-toggletip>\n<nve-button popovertarget=\"toggletip-alert-group\">button</nve-button>\n",
       "summary": "Toggletip with alert header for error states or critical messaging. Perfect for displaying error details with recovery actions, combining status communication with actionable next steps in a compact format.",
@@ -83,7 +83,7 @@
       ]
     },
     {
-      "id": "core-toggletip_position",
+      "id": "toggletip-position",
       "name": "Position",
       "template": "<nve-toggletip anchor=\"btn\" position=\"top\">top</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"right\">right</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"bottom\">bottom</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"left\">left</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n",
       "summary": "Toggletip positioning options relative to trigger element. Choose position based on available screen space and content type, ensuring toggletips remain visible and don't extend beyond viewport boundaries.",
@@ -94,7 +94,7 @@
       ]
     },
     {
-      "id": "core-toggletip_alignment",
+      "id": "toggletip-alignment",
       "name": "Alignment",
       "template": "<nve-toggletip anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"top\">top center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"right\">right center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"bottom\">bottom center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"left\">left center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-toggletip>\n<nve-card id=\"card\" style=\"width: 400px; height: 200px\"></nve-card>\n",
       "summary": "Precise toggletip alignment combined with positioning for optimal placement control. Use alignment to fine-tune toggletip placement relative to trigger edges, improving visual flow and reducing content overlap in dense layouts.",
@@ -105,7 +105,7 @@
       ]
     },
     {
-      "id": "core-toggletip_cross-shadow-root-anchor-position",
+      "id": "toggletip-cross-shadow-root-anchor-position",
       "name": "CrossShadowRootAnchorPosition",
       "template": "<nve-button popovertarget=\"root-toggletip\">document root anchor</nve-button>\n<nve-toggletip id=\"root-toggletip\">document root toggletip</nve-toggletip>\n<demo-shadow-root style=\"visibility: visible !important\">\n  <template shadowrootmode=\"open\">\n    <nve-toggletip id=\"cross-root-toggletip\" hidden>cross root toggletip</nve-toggletip>\n    <slot></slot>\n  </template>\n</demo-shadow-root>\n<nve-button popovertarget=\"cross-root-toggletip\">cross root anchor</nve-button>\n",
       "summary": "Toggletip anchored to elements across shadow DOM boundaries.",
@@ -116,7 +116,7 @@
       ]
     },
     {
-      "id": "core-toggletip_legacy-behavior-trigger",
+      "id": "toggletip-legacy-behavior-trigger",
       "name": "LegacyBehaviorTrigger",
       "template": "<nve-toggletip behavior-trigger anchor=\"action-btn\" trigger=\"action-btn\" hidden>hello there</nve-toggletip>\n<nve-button id=\"action-btn\">button</nve-button>\n",
       "summary": "Legacy behavior-trigger pattern for automatic toggletip lifecycle management. Deprecated approach with manual trigger attributes, prefer modern popovertarget API for simpler and more maintainable toggletip implementation.",

package/dist/toggletip/toggletip2.js

@@ -24,7 +24,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip",
-			version: "0.0.9"
+			version: "0.0.11"
 		};
 	}
 	static {

package/dist/toolbar/toolbar.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/toolbar/toolbar.examples.json",
   "items": [
     {
-      "id": "core-toolbar_default",
+      "id": "toolbar",
       "name": "Default",
       "template": "<nve-toolbar>\n  <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n  <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n  <nve-icon-button icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n</nve-toolbar>\n",
       "summary": "Basic toolbar with action buttons and a settings icon in the suffix slot.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-toolbar_container-flat",
+      "id": "toolbar-container-flat",
       "name": "ContainerFlat",
       "template": "<nve-toolbar container=\"flat\">\n  <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n  <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n  <nve-icon-button container=\"flat\" icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n</nve-toolbar>\n",
       "summary": "Toolbar with flat container styling for a more subtle appearance.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-toolbar_container-inset",
+      "id": "toolbar-container-inset",
       "name": "ContainerInset",
       "template": "<nve-toolbar container=\"inset\" style=\"--width: 300px\">\n  <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n  <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n  <nve-icon-button icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n</nve-toolbar>\n",
       "summary": "Toolbar with inset container styling and constrained width for contained layouts.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-toolbar_container-full",
+      "id": "toolbar-container-full",
       "name": "ContainerFull",
       "template": "<nve-toolbar container=\"full\">\n  <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n  <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n  <nve-icon-button container=\"flat\" icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n</nve-toolbar>\n",
       "summary": "Toolbar with full container styling that spans the entire width.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-toolbar_groups",
+      "id": "toolbar-groups",
       "name": "Groups",
       "template": "<nve-toolbar>\n  <nve-select fit-text>\n    <select aria-label=\"element type\">\n      <option value=\"1\">Heading 1</option>\n      <option value=\"2\">Heading 2</option>\n      <option value=\"p\">Paragraph</option>\n    </select>\n    <div slot=\"option-1\">\n      <span nve-text=\"heading\">Heading 1</span>\n    </div>\n    <div slot=\"option-2\">\n      <span nve-text=\"heading sm\">Heading 2</span>\n    </div>\n    <div slot=\"option-3\">\n      <span nve-text=\"body sm\">Paragraph</span>\n    </div>\n  </nve-select>\n  <nve-divider></nve-divider>\n  <nve-button-group>\n    <nve-icon-button pressed icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n    <nve-icon-button icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n    <nve-icon-button icon-name=\"bars-4\"></nve-icon-button>\n  </nve-button-group>\n  <nve-divider></nve-divider>\n  <nve-button-group>\n    <nve-icon-button icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n    <nve-icon-button icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n    <nve-icon-button icon-name=\"strikethrough\" size=\"sm\"></nve-icon-button>\n  </nve-button-group>\n  <nve-divider></nve-divider>\n  <nve-button-group>\n    <nve-icon-button icon-name=\"code\"></nve-icon-button>\n    <nve-icon-button icon-name=\"fork\"></nve-icon-button>\n    <nve-icon-button icon-name=\"merge\"></nve-icon-button>\n  </nve-button-group>\n  <nve-button slot=\"suffix\" container=\"flat\">Save</nve-button>\n</nve-toolbar>\n",
       "summary": "Complex toolbar with grouped controls including select dropdowns, button groups, and dividers for text editing scenarios.",
@@ -48,7 +48,7 @@
       "tags": []
     },
     {
-      "id": "core-toolbar_vertical",
+      "id": "toolbar-vertical",
       "name": "Vertical",
       "template": "<nve-toolbar orientation=\"vertical\">\n  <nve-button-group>\n    <nve-icon-button pressed icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n    <nve-icon-button icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n    <nve-icon-button icon-name=\"bars-4\"></nve-icon-button>\n  </nve-button-group>\n  <nve-divider></nve-divider>\n  <nve-button-group>\n    <nve-icon-button icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n    <nve-icon-button icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n    <nve-icon-button icon-name=\"strikethrough\"></nve-icon-button>\n  </nve-button-group>\n</nve-toolbar>\n",
       "summary": "Vertical toolbar orientation with button groups and dividers for sidebar layouts.",
@@ -57,7 +57,7 @@
       "tags": []
     },
     {
-      "id": "core-toolbar_status",
+      "id": "toolbar-status",
       "name": "Status",
       "template": "<div nve-layout=\"column gap:lg align:horizontal-stretch full\">\n  <nve-toolbar status=\"accent\">\n    <nve-icon-button icon-name=\"cancel\" slot=\"prefix\"></nve-icon-button>\n    <p nve-text=\"body\">123 selected</p>\n    <nve-button slot=\"suffix\">delete</nve-button>\n    <nve-icon-button icon-name=\"more-actions\" slot=\"suffix\"></nve-icon-button>\n  </nve-toolbar>\n  <nve-toolbar>\n    <nve-icon-button icon-name=\"cancel\" slot=\"prefix\"></nve-icon-button>\n    <p nve-text=\"body\">123 selected</p>\n    <nve-button slot=\"suffix\">delete</nve-button>\n    <nve-icon-button icon-name=\"more-actions\" slot=\"suffix\"></nve-icon-button>\n  </nve-toolbar>\n</div>\n",
       "summary": "Toolbar with status styling showing selection state with accent status and default status variants for bulk actions.",
@@ -66,7 +66,7 @@
       "tags": []
     },
     {
-      "id": "core-toolbar_container",
+      "id": "toolbar-container",
       "name": "Container",
       "template": "<div nve-layout=\"column gap:lg\">\n  <nve-toolbar>\n    <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n    <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n    <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n    <nve-copy-button></nve-copy-button>\n    <nve-switch prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"switch\" />\n    </nve-switch>\n    <nve-checkbox prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n    </nve-checkbox>\n    <nve-input>\n      <input aria-label=\"input\" />\n    </nve-input>\n  </nve-toolbar>\n  <nve-toolbar container=\"flat\">\n    <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n    <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n    <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n    <nve-copy-button></nve-copy-button>\n    <nve-switch prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"switch\" />\n    </nve-switch>\n    <nve-checkbox prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n    </nve-checkbox>\n    <nve-input>\n      <input aria-label=\"input\" />\n    </nve-input>\n  </nve-toolbar>\n  <nve-toolbar container=\"inset\">\n    <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n    <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n    <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n    <nve-copy-button></nve-copy-button>\n    <nve-switch prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"switch\" />\n    </nve-switch>\n    <nve-checkbox prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n    </nve-checkbox>\n    <nve-input>\n      <input aria-label=\"input\" />\n    </nve-input>\n  </nve-toolbar>\n</div>\n",
       "summary": "Example of toolbar containers and their different appearances with varying prominence levels.",

package/dist/toolbar/toolbar2.js

@@ -21,7 +21,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-toolbar",
-			version: "0.0.9"
+			version: "0.0.11"
 		};
 	}
 	static {

package/dist/tooltip/tooltip.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/tooltip/tooltip.examples.json",
   "items": [
     {
-      "id": "core-tooltip_default",
+      "id": "tooltip",
       "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.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-tooltip_visual",
+      "id": "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.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-tooltip_position",
+      "id": "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.",
@@ -34,7 +34,7 @@
       ]
     },
     {
-      "id": "core-tooltip_alignment",
+      "id": "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.",
@@ -45,7 +45,7 @@
       ]
     },
     {
-      "id": "core-tooltip_events",
+      "id": "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.",
@@ -54,7 +54,7 @@
       "tags": []
     },
     {
-      "id": "core-tooltip_content",
+      "id": "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.",
@@ -63,7 +63,7 @@
       "tags": []
     },
     {
-      "id": "core-tooltip_dynamic-trigger",
+      "id": "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.",
@@ -72,7 +72,7 @@
       "tags": []
     },
     {
-      "id": "core-tooltip_hint",
+      "id": "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.",
@@ -81,7 +81,7 @@
       "tags": []
     },
     {
-      "id": "core-tooltip_status",
+      "id": "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.",
@@ -90,7 +90,7 @@
       "tags": []
     },
     {
-      "id": "core-tooltip_wrap",
+      "id": "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.",
@@ -101,7 +101,7 @@
       ]
     },
     {
-      "id": "core-tooltip_async-trigger",
+      "id": "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.",
@@ -112,7 +112,7 @@
       ]
     },
     {
-      "id": "core-tooltip_position-strategy-absolute",
+      "id": "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.",
@@ -123,7 +123,7 @@
       ]
     },
     {
-      "id": "core-tooltip_scroll-container",
+      "id": "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.",
@@ -134,7 +134,7 @@
       ]
     },
     {
-      "id": "core-tooltip_dynamic-anchor-position",
+      "id": "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.",
@@ -146,7 +146,7 @@
       ]
     },
     {
-      "id": "core-tooltip_legacy-dynamic-trigger",
+      "id": "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.",
@@ -158,7 +158,7 @@
       ]
     },
     {
-      "id": "core-tooltip_legacy-trigger",
+      "id": "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.",
@@ -170,7 +170,7 @@
       ]
     },
     {
-      "id": "core-tooltip_legacy-behavior-trigger",
+      "id": "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.",
@@ -182,7 +182,7 @@
       ]
     },
     {
-      "id": "core-tooltip_legacy-open-delay",
+      "id": "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.",
@@ -194,7 +194,7 @@
       ]
     },
     {
-      "id": "core-tooltip_nested-dynamic",
+      "id": "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.",
@@ -205,7 +205,7 @@
       ]
     },
     {
-      "id": "core-tooltip_interest-invokers",
+      "id": "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.",
@@ -216,7 +216,7 @@
       ]
     },
     {
-      "id": "core-tooltip_open-delay",
+      "id": "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.",
@@ -228,7 +228,7 @@
       ]
     },
     {
-      "id": "core-tooltip_legacy-popover-target",
+      "id": "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.",

package/dist/tooltip/tooltip2.js

@@ -19,7 +19,7 @@ var d = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-tooltip",
-			version: "0.0.9"
+			version: "0.0.11"
 		};
 	}
 	render() {

package/dist/tree/tree-node2.js

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

package/dist/tree/tree.examples.json

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

package/dist/tree/tree2.js

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