@nvidia-elements/core 2.12.0 → 2.12.2

package/dist/toggletip/toggletip.examples.json

@@ -25,7 +25,7 @@
     {
       "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",
+      "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\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.",
       "description": "",
       "composition": false,
@@ -34,7 +34,7 @@
     {
       "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",
+      "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\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.",
       "description": "",
       "composition": false,
@@ -43,7 +43,7 @@
     {
       "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",
+      "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\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.",
       "description": "",
       "composition": false,
@@ -96,7 +96,7 @@
     {
       "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",
+      "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\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\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\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\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.",
       "description": "",
       "composition": false,
@@ -107,7 +107,7 @@
     {
       "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",
+      "template": "<nve-button popovertarget=\"root-toggletip\">document root anchor</nve-button>\n<nve-toggletip id=\"root-toggletip\">document root toggletip</nve-toggletip>\n\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.",
       "description": "",
       "composition": false,

package/dist/toggletip/toggletip2.js

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

package/dist/toolbar/toolbar.examples.json

@@ -41,7 +41,7 @@
     {
       "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",
+      "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\n  <nve-divider></nve-divider>\n\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\n  <nve-divider></nve-divider>\n\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\n  <nve-divider></nve-divider>\n\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\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.",
       "description": "",
       "composition": true,
@@ -50,7 +50,7 @@
     {
       "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",
+      "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\n  <nve-divider></nve-divider>\n\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.",
       "description": "",
       "composition": true,
@@ -59,7 +59,7 @@
     {
       "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",
+      "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\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.",
       "description": "",
       "composition": true,
@@ -68,7 +68,7 @@
     {
       "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",
+      "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\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\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.",
       "description": "",
       "composition": true,

package/dist/toolbar/toolbar2.js

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

package/dist/tooltip/tooltip.examples.json

@@ -36,7 +36,7 @@
     {
       "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",
+      "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\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\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\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\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,
@@ -65,7 +65,7 @@
     {
       "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",
+      "template": "<nve-tooltip id=\"dynamic-popover\"></nve-tooltip>\n\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\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,
@@ -103,7 +103,7 @@
     {
       "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  ",
+      "template": "<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,
@@ -125,7 +125,7 @@
     {
       "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",
+      "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\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,
@@ -184,7 +184,7 @@
     {
       "id": "tooltip-legacy-open-delay",
       "name": "LegacyOpenDelay",
-      "template": "<nve-tooltip behavior-trigger anchor=\"delay-tooltip-1\" trigger=\"delay-tooltip-1\" open-delay=\"500\" hidden>delayed tooltip</nve-tooltip>\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>delayed tooltip</nve-tooltip>\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>delayed tooltip</nve-tooltip>\n<nve-button id=\"delay-tooltip-3\">button</nve-button>\n",
+      "template": "<nve-tooltip behavior-trigger anchor=\"delay-tooltip-1\" trigger=\"delay-tooltip-1\" open-delay=\"500\" hidden>delayed tooltip</nve-tooltip>\n<nve-button id=\"delay-tooltip-1\">button</nve-button>\n\n<nve-tooltip behavior-trigger anchor=\"delay-tooltip-2\" trigger=\"delay-tooltip-2\" open-delay=\"500\" hidden>delayed tooltip</nve-tooltip>\n<nve-button id=\"delay-tooltip-2\">button</nve-button>\n\n<nve-tooltip behavior-trigger anchor=\"delay-tooltip-3\" trigger=\"delay-tooltip-3\" open-delay=\"500\" hidden>delayed tooltip</nve-tooltip>\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,
@@ -216,7 +216,7 @@
     {
       "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",
+      "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\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,

package/dist/tooltip/tooltip2.js

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

package/dist/tree/tree-node2.js

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

package/dist/tree/tree.examples.json

@@ -79,7 +79,7 @@
     {
       "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",
+      "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\n        <nve-checkbox>\n          <label>checkbox 2</label>\n          <input type=\"checkbox\" />\n        </nve-checkbox>\n\n        <nve-checkbox>\n          <label>checkbox 3</label>\n          <input type=\"checkbox\" />\n        </nve-checkbox>\n      </nve-checkbox-group>\n    </nve-tree-node>\n    <nve-tree-node>\n      node content radio group\n      <nve-radio-group slot=\"content\">\n        <label>label</label>\n        <nve-radio>\n          <label>radio 1</label>\n          <input type=\"radio\" checked />\n        </nve-radio>\n\n        <nve-radio>\n          <label>radio 2</label>\n          <input type=\"radio\" />\n        </nve-radio>\n\n        <nve-radio>\n          <label>radio 3</label>\n          <input type=\"radio\" />\n        </nve-radio>\n      </nve-radio-group>\n    </nve-tree-node>\n  </nve-tree-node>\n</nve-tree>\n",
       "summary": "Tree with rich node content including forms, controls, and interactive elements, enabling complex data management within hierarchical structures.",
       "description": "",
       "composition": true,
@@ -110,7 +110,7 @@
     {
       "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",
+      "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\n  rootEl.addEventListener(\"open\", () => {\n    const fragment = document.createDocumentFragment();\n    for (let i = 0; i < 400; i++) {\n      rootEl.expanded = true;\n      const childEl = document.createElement(\"nve-tree-node\");\n      childEl.innerText = \"Child \" + i;\n      fragment.append(childEl);\n    }\n    rootEl.append(fragment);\n  });\n\n  rootEl.addEventListener(\"close\", () => {\n    rootEl.expanded = false;\n    rootEl.replaceChildren(document.createTextNode(\"Test\"));\n  });\n</script>\n",
       "summary": "Tree with bulk node creation for performance testing, verifying efficient handling of large numbers of nodes and dynamic expansion.",
       "description": "",
       "composition": false,

package/dist/tree/tree2.js

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

package/dist/viewport/viewport-gridlines2.js

@@ -24,7 +24,7 @@ var g = 10, _ = 64, v = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-viewport-gridlines",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	#e;

package/dist/viewport/viewport-minimap2.js

@@ -18,7 +18,7 @@ var _ = 3, v = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-viewport-minimap",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	#e;

package/dist/viewport/viewport.examples.json

@@ -5,7 +5,7 @@
     {
       "id": "viewport",
       "name": "Default",
-      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>\n",
+      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>\n",
       "summary": "Auto-fit a bounded SVG with direct pan and zoom; the minimap represents its single content root as one rectangle.",
       "description": "",
       "composition": false,
@@ -14,7 +14,7 @@
     {
       "id": "viewport-minimap",
       "name": "Minimap",
-      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n  <nve-viewport-minimap>\n    <svg slot=\"preview\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n      <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n      <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n      <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    </svg>\n  </nve-viewport-minimap>\n</nve-viewport>\n",
+      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n\n  <nve-viewport-minimap>\n    <svg slot=\"preview\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n      <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n      <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n      <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    </svg>\n  </nve-viewport-minimap>\n</nve-viewport>\n",
       "summary": "Provide custom minimap content to replace the default bounding boxes with a simplified representation of the viewport content.",
       "description": "",
       "composition": false,
@@ -23,7 +23,7 @@
     {
       "id": "viewport-interactive-content",
       "name": "InteractiveContent",
-      "template": "<nve-viewport x=\"-20\" y=\"-20\" scale=\"0.9\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines step=\"20\" target-spacing=\"72\"></nve-viewport-gridlines>\n  <nve-card style=\"position: absolute; left: 280px; top: 110px; width: 300px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Viewport content</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <nve-input>\n        <label>Label</label>\n        <input value=\"Editable value\" />\n      </nve-input>\n    </nve-card-content>\n  </nve-card>\n</nve-viewport>\n",
+      "template": "<nve-viewport x=\"-20\" y=\"-20\" scale=\"0.9\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines step=\"20\" target-spacing=\"72\"></nve-viewport-gridlines>\n\n  <nve-card style=\"position: absolute; left: 280px; top: 110px; width: 300px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Viewport content</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <nve-input>\n        <label>Label</label>\n        <input value=\"Editable value\" />\n      </nve-input>\n    </nve-card-content>\n  </nve-card>\n</nve-viewport>\n",
       "summary": "Place native and Elements controls inside a viewport without losing their standard interactions.",
       "description": "",
       "composition": true,
@@ -32,7 +32,7 @@
     {
       "id": "viewport-pan-with-space",
       "name": "PanWithSpace",
-      "template": "<style>\n  #viewport-space-pan-card {\n    cursor: var(--drag-cursor, auto);\n  }\n  #viewport-space-pan-card:hover {\n    --drag-cursor: grab;\n  }\n  #viewport-space-pan-card[data-dragging] {\n    --background: var(--nve-sys-layer-overlay-background);\n    --box-shadow: var(--nve-ref-shadow-300);\n    --drag-cursor: grabbing;\n  }\n</style>\n<div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n  <nve-alert-group status=\"accent\">\n    <nve-alert>\n      <p nve-text=\"body sm medium\">Pan the viewport with <kbd nve-text=\"code\">Space</kbd>, or using the middle mouse button.</p>\n    </nve-alert>\n  </nve-alert-group>\n  <nve-viewport id=\"viewport-space-pan-demo\" behavior-pan=\"space\" behavior-zoom style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines step=\"20\"></nve-viewport-gridlines>\n    <nve-card id=\"viewport-space-pan-card\" data-draggable-card data-card-drag-handle style=\"position: absolute; left: 290px; top: 120px; width: 300px\">\n      <nve-card-header>\n        <h2 nve-text=\"heading sm bold\">Drag this card</h2>\n      </nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body relaxed\" nve-layout=\"pad:md\" style=\"text-align: center\">Application-defined dragging remains independent in this mode.</p>\n      </nve-card-content>\n    </nve-card>\n  </nve-viewport>\n</div>\n<script type=\"module\">\n  const viewport = document.querySelector(\"#viewport-space-pan-demo\");\n  const handles = viewport.querySelectorAll(\"[data-card-drag-handle]\");\n  handles.forEach((handle) => {\n    const card = handle.closest(\"[data-draggable-card]\");\n    let pointerId;\n    let startClientX;\n    let startClientY;\n    let startLeft;\n    let startTop;\n    const finishDrag = (event) => {\n      if (event.pointerId !== pointerId) return;\n      pointerId = undefined;\n      card.removeAttribute(\"data-dragging\");\n    };\n    handle.addEventListener(\"pointerdown\", (event) => {\n      if ((event.pointerType !== \"mouse\" && event.pointerType !== \"pen\") || event.button !== 0 || event.defaultPrevented) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      pointerId = event.pointerId;\n      startClientX = event.clientX;\n      startClientY = event.clientY;\n      startLeft = Number.parseFloat(card.style.left);\n      startTop = Number.parseFloat(card.style.top);\n      card.setAttribute(\"data-dragging\", \"\");\n      handle.setPointerCapture(pointerId);\n    });\n    handle.addEventListener(\"pointermove\", (event) => {\n      if (event.pointerId !== pointerId) return;\n      card.style.left = startLeft + (event.clientX - startClientX) / viewport.scale + \"px\";\n      card.style.top = startTop + (event.clientY - startClientY) / viewport.scale + \"px\";\n      event.preventDefault();\n    });\n    handle.addEventListener(\"pointerup\", finishDrag);\n    handle.addEventListener(\"pointercancel\", finishDrag);\n    handle.addEventListener(\"lostpointercapture\", finishDrag);\n  });\n</script>\n",
+      "template": "<style>\n  #viewport-space-pan-card {\n    cursor: var(--drag-cursor, auto);\n  }\n\n  #viewport-space-pan-card:hover {\n    --drag-cursor: grab;\n  }\n\n  #viewport-space-pan-card[data-dragging] {\n    --background: var(--nve-sys-layer-overlay-background);\n    --box-shadow: var(--nve-ref-shadow-300);\n    --drag-cursor: grabbing;\n  }\n</style>\n\n<div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n  <nve-alert-group status=\"accent\">\n    <nve-alert>\n      <p nve-text=\"body sm medium\">Pan the viewport with <kbd nve-text=\"code\">Space</kbd>, or using the middle mouse button.</p>\n    </nve-alert>\n  </nve-alert-group>\n\n  <nve-viewport id=\"viewport-space-pan-demo\" behavior-pan=\"space\" behavior-zoom style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines step=\"20\"></nve-viewport-gridlines>\n\n    <nve-card id=\"viewport-space-pan-card\" data-draggable-card data-card-drag-handle style=\"position: absolute; left: 290px; top: 120px; width: 300px\">\n      <nve-card-header>\n        <h2 nve-text=\"heading sm bold\">Drag this card</h2>\n      </nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body relaxed\" nve-layout=\"pad:md\" style=\"text-align: center\">Application-defined dragging remains independent in this mode.</p>\n      </nve-card-content>\n    </nve-card>\n  </nve-viewport>\n</div>\n\n<script type=\"module\">\n  const viewport = document.querySelector(\"#viewport-space-pan-demo\");\n  const handles = viewport.querySelectorAll(\"[data-card-drag-handle]\");\n\n  handles.forEach((handle) => {\n    const card = handle.closest(\"[data-draggable-card]\");\n    let pointerId;\n    let startClientX;\n    let startClientY;\n    let startLeft;\n    let startTop;\n\n    const finishDrag = (event) => {\n      if (event.pointerId !== pointerId) return;\n      pointerId = undefined;\n      card.removeAttribute(\"data-dragging\");\n    };\n\n    handle.addEventListener(\"pointerdown\", (event) => {\n      if ((event.pointerType !== \"mouse\" && event.pointerType !== \"pen\") || event.button !== 0 || event.defaultPrevented) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      pointerId = event.pointerId;\n      startClientX = event.clientX;\n      startClientY = event.clientY;\n      startLeft = Number.parseFloat(card.style.left);\n      startTop = Number.parseFloat(card.style.top);\n      card.setAttribute(\"data-dragging\", \"\");\n      handle.setPointerCapture(pointerId);\n    });\n\n    handle.addEventListener(\"pointermove\", (event) => {\n      if (event.pointerId !== pointerId) return;\n\n      card.style.left = startLeft + (event.clientX - startClientX) / viewport.scale + \"px\";\n      card.style.top = startTop + (event.clientY - startClientY) / viewport.scale + \"px\";\n      event.preventDefault();\n    });\n\n    handle.addEventListener(\"pointerup\", finishDrag);\n    handle.addEventListener(\"pointercancel\", finishDrag);\n    handle.addEventListener(\"lostpointercapture\", finishDrag);\n  });\n</script>\n",
       "summary": "Configure panning to require Space when application content needs to handle its own drag interactions.",
       "description": "",
       "composition": true,
@@ -41,7 +41,7 @@
     {
       "id": "viewport-commands",
       "name": "Commands",
-      "template": "<div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n  <nve-toolbar aria-label=\"Viewport navigation controls\">\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-left\" aria-label=\"Pan left\">←</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-up\" aria-label=\"Pan up\">↑</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-down\" aria-label=\"Pan down\">↓</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-right\" aria-label=\"Pan right\">→</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-out\" aria-label=\"Zoom out\">−</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-reset\">100%</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-in\" aria-label=\"Zoom in\">+</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-to-fit\">Fit</nve-button>\n  </nve-toolbar>\n  <nve-viewport id=\"viewport-command-demo\" autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines></nve-viewport-gridlines>\n    <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n      <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n      <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n      <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n      <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n    </svg>\n  </nve-viewport>\n</div>\n",
+      "template": "<div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n  <nve-toolbar aria-label=\"Viewport navigation controls\">\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-left\" aria-label=\"Pan left\">←</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-up\" aria-label=\"Pan up\">↑</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-down\" aria-label=\"Pan down\">↓</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-right\" aria-label=\"Pan right\">→</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-out\" aria-label=\"Zoom out\">−</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-reset\">100%</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-in\" aria-label=\"Zoom in\">+</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-to-fit\">Fit</nve-button>\n  </nve-toolbar>\n\n  <nve-viewport id=\"viewport-command-demo\" autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines></nve-viewport-gridlines>\n\n    <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n      <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n      <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n      <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n      <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n    </svg>\n  </nve-viewport>\n</div>\n",
       "summary": "Use external controls with `commandfor` to invoke viewport pan, zoom, reset, and fit commands.",
       "description": "",
       "composition": true,
@@ -50,7 +50,7 @@
     {
       "id": "viewport-programmatic-navigation",
       "name": "ProgrammaticNavigation",
-      "template": "<div nve-layout=\"column gap:sm align:horizontal-stretch\" style=\"height: 420px\">\n  <div nve-layout=\"row align:center\">\n    <nve-button-group container=\"rounded\" behavior-select=\"single\" aria-label=\"Navigate to workflow region\">\n      <nve-button data-viewport-region=\"viewport-region-ingest\">Ingest</nve-button>\n      <nve-button data-viewport-region=\"viewport-region-train\">Train</nve-button>\n      <nve-button data-viewport-region=\"viewport-region-deploy\">Deploy</nve-button>\n    </nve-button-group>\n  </div>\n  <nve-viewport id=\"viewport-reveal-demo\" autofit fit-inset=\"24\" style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines step=\"40\"></nve-viewport-gridlines>\n    <svg aria-hidden=\"true\" width=\"500\" height=\"320\" viewBox=\"0 0 500 320\" style=\"position: absolute; left: 380px; top: 144px\">\n      <path d=\"M 0 0 C 50 0 50 160 100 160 M 400 160 C 450 160 450 320 500 320\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"4\"></path>\n    </svg>\n    <nve-card id=\"viewport-region-ingest\" style=\"position: absolute; left: 80px; top: 80px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Ingest</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Validate and prepare the dataset.</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card id=\"viewport-region-train\" style=\"position: absolute; left: 480px; top: 240px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Train</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Run and compare model experiments.</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card id=\"viewport-region-deploy\" style=\"position: absolute; left: 880px; top: 400px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Deploy</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Promote the selected model.</p>\n      </nve-card-content>\n    </nve-card>\n  </nve-viewport>\n</div>\n<script type=\"module\">\n  const viewport = document.querySelector(\"#viewport-reveal-demo\");\n  const buttons = Array.from(document.querySelectorAll(\"[data-viewport-region]\"));\n  const framing = 80;\n  buttons.forEach((button) => {\n    button.addEventListener(\"click\", () => {\n      const region = viewport.querySelector(\"#\" + button.dataset.viewportRegion);\n      viewport.reveal(\n        {\n          x: region.offsetLeft - framing,\n          y: region.offsetTop - framing,\n          width: region.offsetWidth + framing * 2,\n          height: region.offsetHeight + framing * 2,\n        },\n        { animated: true, duration: 500 },\n      );\n    });\n  });\n</script>\n",
+      "template": "<div nve-layout=\"column gap:sm align:horizontal-stretch\" style=\"height: 420px\">\n  <div nve-layout=\"row align:center\">\n    <nve-button-group container=\"rounded\" behavior-select=\"single\" aria-label=\"Navigate to workflow region\">\n      <nve-button data-viewport-region=\"viewport-region-ingest\">Ingest</nve-button>\n      <nve-button data-viewport-region=\"viewport-region-train\">Train</nve-button>\n      <nve-button data-viewport-region=\"viewport-region-deploy\">Deploy</nve-button>\n    </nve-button-group>\n  </div>\n\n  <nve-viewport id=\"viewport-reveal-demo\" autofit fit-inset=\"24\" style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines step=\"40\"></nve-viewport-gridlines>\n\n    <svg aria-hidden=\"true\" width=\"500\" height=\"320\" viewBox=\"0 0 500 320\" style=\"position: absolute; left: 380px; top: 144px\">\n      <path d=\"M 0 0 C 50 0 50 160 100 160 M 400 160 C 450 160 450 320 500 320\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"4\"></path>\n    </svg>\n\n    <nve-card id=\"viewport-region-ingest\" style=\"position: absolute; left: 80px; top: 80px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Ingest</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Validate and prepare the dataset.</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card id=\"viewport-region-train\" style=\"position: absolute; left: 480px; top: 240px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Train</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Run and compare model experiments.</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card id=\"viewport-region-deploy\" style=\"position: absolute; left: 880px; top: 400px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Deploy</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Promote the selected model.</p>\n      </nve-card-content>\n    </nve-card>\n  </nve-viewport>\n</div>\n\n<script type=\"module\">\n  const viewport = document.querySelector(\"#viewport-reveal-demo\");\n  const buttons = Array.from(document.querySelectorAll(\"[data-viewport-region]\"));\n  const framing = 80;\n\n  buttons.forEach((button) => {\n    button.addEventListener(\"click\", () => {\n      const region = viewport.querySelector(\"#\" + button.dataset.viewportRegion);\n      viewport.reveal(\n        {\n          x: region.offsetLeft - framing,\n          y: region.offsetTop - framing,\n          width: region.offsetWidth + framing * 2,\n          height: region.offsetHeight + framing * 2,\n        },\n        { animated: true, duration: 500 },\n      );\n    });\n  });\n</script>\n",
       "summary": "Viewport navigation helpers let application logic animate specific content regions into view.",
       "description": "",
       "composition": true,
@@ -59,7 +59,7 @@
     {
       "id": "viewport-dots",
       "name": "Dots",
-      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines pattern=\"dots\"></nve-viewport-gridlines>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n</nve-viewport>\n",
+      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines pattern=\"dots\"></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n</nve-viewport>\n",
       "summary": "Optionally configure viewport grid lines to use dots instead of lines.",
       "description": "",
       "composition": false,
@@ -68,7 +68,7 @@
     {
       "id": "viewport-crosses",
       "name": "Crosses",
-      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines pattern=\"crosses\"></nve-viewport-gridlines>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n</nve-viewport>\n",
+      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines pattern=\"crosses\"></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n</nve-viewport>\n",
       "summary": "Use crosses as spatial reference points to help users judge positions while keeping the content between them unobstructed.",
       "description": "",
       "composition": false,
@@ -77,7 +77,7 @@
     {
       "id": "viewport-background",
       "name": "Background",
-      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <svg slot=\"background\" aria-hidden=\"true\" width=\"20480\" height=\"20480\" viewBox=\"-10240 -10240 20480 20480\" style=\"position: absolute; left: -10240px; top: -10240px\">\n    <defs>\n      <pattern id=\"viewport-background-triangles\" width=\"200\" height=\"200\" patternUnits=\"userSpaceOnUse\">\n        <path d=\"M 0 0 H 200 V 200 M 0 0 L 200 200 M 0 200 L 200 0\" fill=\"none\" stroke=\"var(--nve-ref-border-color-muted)\" stroke-width=\"1.5\" vector-effect=\"non-scaling-stroke\"></path>\n      </pattern>\n    </defs>\n    <rect x=\"-10240\" y=\"-10240\" width=\"20480\" height=\"20480\" fill=\"url(#viewport-background-triangles)\"></rect>\n  </svg>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n</nve-viewport>\n",
+      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <svg slot=\"background\" aria-hidden=\"true\" width=\"20480\" height=\"20480\" viewBox=\"-10240 -10240 20480 20480\" style=\"position: absolute; left: -10240px; top: -10240px\">\n    <defs>\n      <pattern id=\"viewport-background-triangles\" width=\"200\" height=\"200\" patternUnits=\"userSpaceOnUse\">\n        <path d=\"M 0 0 H 200 V 200 M 0 0 L 200 200 M 0 200 L 200 0\" fill=\"none\" stroke=\"var(--nve-ref-border-color-muted)\" stroke-width=\"1.5\" vector-effect=\"non-scaling-stroke\"></path>\n      </pattern>\n    </defs>\n    <rect x=\"-10240\" y=\"-10240\" width=\"20480\" height=\"20480\" fill=\"url(#viewport-background-triangles)\"></rect>\n  </svg>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n</nve-viewport>\n",
       "summary": "Place custom content in the background slot to provide a spatial reference without affecting content fitting.",
       "description": "",
       "composition": false,

package/dist/viewport/viewport2.js

@@ -40,7 +40,7 @@ var x = .05, S = 20, C = 5, w = [
 	static {
 		this.metadata = {
 			tag: "nve-viewport",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	#e;

package/dist/week/week.examples.json

@@ -23,7 +23,7 @@
     {
       "id": "week-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-week>\n    <label>label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-week>\n    <label>disabled</label>\n    <input type=\"week\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-week>\n    <label>success</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-week>\n  <nve-week>\n    <label>error</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-week>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-week>\n    <label>label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week>\n    <label>disabled</label>\n    <input type=\"week\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week>\n    <label>success</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-week>\n\n  <nve-week>\n    <label>error</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-week>\n</div>\n",
       "summary": "Week pickers with vertical layout including validation states for disabled, success, and error.",
       "description": "",
       "composition": false,
@@ -34,7 +34,7 @@
     {
       "id": "week-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-week layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-week layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"week\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-week layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-week>\n  <nve-week layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-week>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-week layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"week\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-week layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-week>\n\n  <nve-week layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-week>\n</div>\n",
       "summary": "Week pickers with horizontal layout showing validation states for inline forms and compact layouts.",
       "description": "",
       "composition": false,
@@ -45,7 +45,7 @@
     {
       "id": "week-export-parts",
       "name": "ExportParts",
-      "template": "<style>\n  nve-week::part(icon-button) {\n    --background: red;\n  }\n  nve-week::part(icon-button-icon) {\n    --color: blue;\n  }\n</style>\n<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n</nve-week>\n",
+      "template": "<style>\n  nve-week::part(icon-button) {\n    --background: red;\n  }\n\n  nve-week::part(icon-button-icon) {\n    --color: blue;\n  }\n</style>\n<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n</nve-week>\n",
       "summary": "Use CSS export parts for advanced theming of nested shadow root elements.",
       "description": "",
       "composition": false,

package/dist/week/week2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-week",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	static {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "2.12.0",
+  "version": "2.12.2",
   "release": {
     "extends": "../../release.config.js"
   },
@@ -1108,6 +1108,7 @@
       ],
       "output": [
         "src/icon/icons.ts",
+        "src/internal/types/icons.ts",
         "src/icon/server.ts"
       ]
     },