@nvidia-elements/core 2.11.2 → 2.12.1

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.11.2"
+			version: "2.12.1"
 		};
 	}
 	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.11.2"
+			version: "2.12.1"
 		};
 	}
 	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.11.2"
+			version: "2.12.1"
 		};
 	}
 	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.11.2",
+			version: "2.12.1",
 			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.11.2",
+			version: "2.12.1",
 			children: ["nve-tree-node"]
 		};
 	}

package/dist/viewport/viewport-gridlines.d.ts

@@ -1,12 +1,14 @@
 import { LitElement, nothing, type PropertyValues } from 'lit';
 /**
  * @element nve-viewport-gridlines
- * @description Renders origin-stable, zoom-adaptive gridlines behind viewport content.
+ * @description Renders origin-stable, zoom-adaptive gridline patterns behind viewport content.
  * @documentation https://nvidia.github.io/elements/docs/elements/viewport/
  * @since 0.0.0
  * @entrypoint \@nvidia-elements/core/viewport
- * @cssprop --color - Sets the gridline stroke color.
+ * @cssprop --color - Sets the gridline pattern color.
  * @cssprop --line-width - Sets the approximate stroke width in CSS pixels.
+ * @cssprop --dot-radius - Sets the approximate dot radius in CSS pixels.
+ * @cssprop --cross-size - Sets the approximate full width and height of each cross in CSS pixels.
  */
 export declare class ViewportGridlines extends LitElement {
     #private;
@@ -19,6 +21,8 @@ export declare class ViewportGridlines extends LitElement {
     slot: string;
     /** @private */
     protected accessibilityHidden: string;
+    /** Grid pattern to render. */
+    pattern: 'lines' | 'dots' | 'crosses';
     /** Smallest gridline interval in content-space units. */
     get step(): number;
     set step(value: number);

package/dist/viewport/viewport-gridlines.js

@@ -1,5 +1,5 @@
 //#region src/viewport/viewport-gridlines.css?inline
-var e = ":host{--_scale: 1;--color: var(--nve-ref-border-color-muted);--line-width: 1px;position:absolute;inset:0;contain:none;pointer-events:none;user-select:none}svg{position:absolute;overflow:visible;pointer-events:none}path{fill:none;stroke:var(--color);stroke-width:calc(var(--line-width) / var(--_scale))}";
+var e = ":host{--color: var(--nve-ref-border-color-muted);--line-width: var(--nve-ref-border-width-sm);--dot-radius: var(--nve-ref-size-50);--cross-size: var(--nve-ref-size-200);--_scale: 1;position:absolute;inset:0;contain:none;pointer-events:none;user-select:none}svg{position:absolute;overflow:visible;pointer-events:none}path{fill:none;stroke:var(--color);stroke-width:calc(var(--line-width) / var(--_scale))}circle{fill:var(--color);r:calc(var(--dot-radius) / var(--_scale))}.cross{fill:var(--color)}.cross-horizontal{x:calc(var(--cross-size) / var(--_scale) / -2);y:calc(var(--line-width) / var(--_scale) / -2);width:calc(var(--cross-size) / var(--_scale));height:calc(var(--line-width) / var(--_scale))}.cross-vertical{x:calc(var(--line-width) / var(--_scale) / -2);y:calc(var(--cross-size) / var(--_scale) / -2);width:calc(var(--line-width) / var(--_scale));height:calc(var(--cross-size) / var(--_scale))}";
 //#endregion
 export { e as default };
 

package/dist/viewport/viewport-gridlines.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewport-gridlines.js","names":[],"sources":["../../src/viewport/viewport-gridlines.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --_scale: 1;\n  --color: var(--nve-ref-border-color-muted);\n  --line-width: 1px;\n\n  position: absolute;\n  inset: 0;\n  contain: none;\n  pointer-events: none;\n  user-select: none;\n}\n\nsvg {\n  position: absolute;\n  overflow: visible;\n  pointer-events: none;\n}\n\npath {\n  fill: none;\n  stroke: var(--color);\n  stroke-width: calc(var(--line-width) / var(--_scale));\n}\n"],"mappings":""}
+{"version":3,"file":"viewport-gridlines.js","names":[],"sources":["../../src/viewport/viewport-gridlines.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-ref-border-color-muted);\n  --line-width: var(--nve-ref-border-width-sm);\n  --dot-radius: var(--nve-ref-size-50);\n  --cross-size: var(--nve-ref-size-200);\n\n  --_scale: 1;\n\n  position: absolute;\n  inset: 0;\n  contain: none;\n  pointer-events: none;\n  user-select: none;\n}\n\nsvg {\n  position: absolute;\n  overflow: visible;\n  pointer-events: none;\n}\n\npath {\n  fill: none;\n  stroke: var(--color);\n  stroke-width: calc(var(--line-width) / var(--_scale));\n}\n\ncircle {\n  fill: var(--color);\n  r: calc(var(--dot-radius) / var(--_scale));\n}\n\n.cross {\n  fill: var(--color);\n}\n\n.cross-horizontal {\n  x: calc(var(--cross-size) / var(--_scale) / -2);\n  y: calc(var(--line-width) / var(--_scale) / -2);\n  width: calc(var(--cross-size) / var(--_scale));\n  height: calc(var(--line-width) / var(--_scale));\n}\n\n.cross-vertical {\n  x: calc(var(--line-width) / var(--_scale) / -2);\n  y: calc(var(--cross-size) / var(--_scale) / -2);\n  width: calc(var(--line-width) / var(--_scale));\n  height: calc(var(--cross-size) / var(--_scale));\n}\n"],"mappings":""}

package/dist/viewport/viewport-gridlines2.js

@@ -5,17 +5,17 @@ import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js
 import { Viewport as a } from "./viewport2.js";
 import o from "./viewport-gridlines.js";
 import { createGridlineCoverage as s, gridlineCoverageNeedsUpdate as c, selectGridlineInterval as l } from "./viewport-gridlines.utils.js";
-import { LitElement as u, html as d, nothing as f } from "lit";
-import { property as p } from "lit/decorators/property.js";
-import { styleMap as m } from "lit/directives/style-map.js";
+import { LitElement as u, html as d, nothing as f, svg as p } from "lit";
+import { property as m } from "lit/decorators/property.js";
+import { styleMap as h } from "lit/directives/style-map.js";
 //#region src/viewport/viewport-gridlines.ts
-var h = 10, g = 64, _ = class extends u {
+var g = 10, _ = 64, v = class extends u {
 	constructor(...e) {
-		super(...e), this.slot = "background", this.accessibilityHidden = "true", this.#e = h, this.#t = 0, this.#n = 0, this.#r = g, this.#s = () => {
+		super(...e), this.slot = "background", this.accessibilityHidden = "true", this.#e = g, this.#t = 0, this.#n = 0, this.#r = _, this.pattern = "lines", this.#c = () => {
 			let e = this.#i;
-			e && (this.style.setProperty("--_scale", `${e.scale}`), this.#l());
-		}, this.#c = () => {
-			this.#l({ forceCoverage: !0 });
+			e && (this.style.setProperty("--_scale", `${e.scale}`), this.#u());
+		}, this.#l = () => {
+			this.#u({ forceCoverage: !0 });
 		};
 	}
 	static {
@@ -24,7 +24,7 @@ var h = 10, g = 64, _ = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-viewport-gridlines",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 	#e;
@@ -38,7 +38,7 @@ var h = 10, g = 64, _ = class extends u {
 		return this.#e;
 	}
 	set step(e) {
-		let t = r(e, h);
+		let t = r(e, g);
 		if (t === this.#e) return;
 		let n = this.#e;
 		this.#e = t, this.requestUpdate("step", n);
@@ -65,7 +65,7 @@ var h = 10, g = 64, _ = class extends u {
 		return this.#r;
 	}
 	set targetSpacing(e) {
-		let t = r(e, g);
+		let t = r(e, _);
 		if (t === this.#r) return;
 		let n = this.#r;
 		this.#r = t, this.requestUpdate("targetSpacing", n);
@@ -73,16 +73,16 @@ var h = 10, g = 64, _ = class extends u {
 	connectedCallback() {
 		super.connectedCallback();
 		let e = this.parentElement;
-		e instanceof a && (this.#i = e, this.style.setProperty("--_scale", `${e.scale}`), this.#i.addEventListener("viewportchange", this.#s), typeof ResizeObserver < "u" && (this.#a = new ResizeObserver(this.#c), this.#a.observe(e)), this.#u({
+		e instanceof a && (this.#i = e, this.style.setProperty("--_scale", `${e.scale}`), this.#i.addEventListener("viewportchange", this.#c), typeof ResizeObserver < "u" && (this.#a = new ResizeObserver(this.#l), this.#a.observe(e)), this.#d({
 			forceCoverage: !0,
 			resetInterval: !0
 		}));
 	}
 	disconnectedCallback() {
-		this.#i && this.#i.removeEventListener("viewportchange", this.#s), this.#a?.disconnect(), this.#a = void 0, this.#i = void 0, this.#o = void 0, super.disconnectedCallback();
+		this.#i && this.#i.removeEventListener("viewportchange", this.#c), this.#a?.disconnect(), this.#a = void 0, this.#i = void 0, this.#o = void 0, super.disconnectedCallback();
 	}
 	willUpdate(e) {
-		super.willUpdate(e), (e.has("step") || e.has("targetSpacing")) && this.#u({
+		super.willUpdate(e), (e.has("step") || e.has("targetSpacing")) && this.#d({
 			forceCoverage: !0,
 			resetInterval: !0
 		});
@@ -90,15 +90,22 @@ var h = 10, g = 64, _ = class extends u {
 	render() {
 		let e = this.#o;
 		if (!e) return f;
-		let { coverage: t, interval: n } = e;
-		return d`<svg internal-host aria-hidden="true" focusable="false" preserveAspectRatio="none" style="${m(y(t))}" viewBox="${t.x} ${t.y} ${t.width} ${t.height}"><defs><pattern data-gridline-pattern id="gridlines" x="${this.#t}" y="${this.#n}" width="${n}" height="${n}" patternUnits="userSpaceOnUse"><path d="M ${n} 0 H 0 V ${n}"></path></pattern></defs><rect x="${t.x}" y="${t.y}" width="${t.width}" height="${t.height}" fill="url(#gridlines)"></rect></svg>`;
+		let { coverage: t, interval: n } = e, r = this.pattern === "dots" || this.pattern === "crosses";
+		return d`<svg internal-host aria-hidden="true" focusable="false" preserveAspectRatio="none" style="${h(b(t))}" viewBox="${t.x} ${t.y} ${t.width} ${t.height}"><defs><pattern data-gridline-pattern id="gridlines" x="${this.#t - (r ? n / 2 : 0)}" y="${this.#n - (r ? n / 2 : 0)}" width="${n}" height="${n}" patternUnits="userSpaceOnUse">${this.#s(n)}</pattern></defs><rect x="${t.x}" y="${t.y}" width="${t.width}" height="${t.height}" fill="url(#gridlines)"></rect></svg>`;
 	}
-	#s;
-	#c;
-	#l(e = {}) {
-		this.#u(e) && this.requestUpdate();
+	#s(e) {
+		switch (this.pattern) {
+			case "dots": return p`<circle cx="${e / 2}" cy="${e / 2}" r="2"></circle>`;
+			case "crosses": return p`<g transform="translate(${e / 2} ${e / 2})"><clipPath id="cross-clip"><rect class="cross-horizontal"></rect><rect class="cross-vertical"></rect></clipPath><rect class="cross" x="${-e / 2}" y="${-e / 2}" width="${e}" height="${e}" clip-path="url(#cross-clip)"></rect></g>`;
+			default: return p`<path d="M ${e} 0 H 0 V ${e}"></path>`;
+		}
 	}
+	#c;
+	#l;
 	#u(e = {}) {
+		this.#d(e) && this.requestUpdate();
+	}
+	#d(e = {}) {
 		let t = this.#i;
 		if (!t) return !1;
 		let n = t.getVisibleRect();
@@ -108,7 +115,7 @@ var h = 10, g = 64, _ = class extends u {
 			scale: t.scale,
 			step: this.#e,
 			targetSpacing: this.#r
-		}), i = v({
+		}), i = y({
 			forceCoverage: e.forceCoverage === !0,
 			interval: r,
 			previous: this.#o,
@@ -117,30 +124,33 @@ var h = 10, g = 64, _ = class extends u {
 		return i ? (this.#o = i, !0) : !1;
 	}
 };
-i([e()], _.prototype, "slot", void 0), i([e({ attribute: "aria-hidden" })], _.prototype, "accessibilityHidden", void 0), i([p({
+i([e()], v.prototype, "slot", void 0), i([e({ attribute: "aria-hidden" })], v.prototype, "accessibilityHidden", void 0), i([m({
+	type: String,
+	reflect: !0
+})], v.prototype, "pattern", void 0), i([m({
 	type: Number,
 	reflect: !0
-})], _.prototype, "step", null), i([p({
+})], v.prototype, "step", null), i([m({
 	type: Number,
 	attribute: "origin-x",
 	reflect: !0
-})], _.prototype, "originX", null), i([p({
+})], v.prototype, "originX", null), i([m({
 	type: Number,
 	attribute: "origin-y",
 	reflect: !0
-})], _.prototype, "originY", null), i([p({
+})], v.prototype, "originY", null), i([m({
 	type: Number,
 	attribute: "target-spacing",
 	reflect: !0
-})], _.prototype, "targetSpacing", null);
-function v({ forceCoverage: e, interval: t, previous: n, visible: r }) {
+})], v.prototype, "targetSpacing", null);
+function y({ forceCoverage: e, interval: t, previous: n, visible: r }) {
 	let i = e || c(n?.coverage, r), a = t !== n?.interval;
 	if (!(!i && !a)) return {
 		coverage: i || !n ? s(r) : n.coverage,
 		interval: t
 	};
 }
-function y(e) {
+function b(e) {
 	return {
 		height: `${e.height}px`,
 		left: `${e.x}px`,
@@ -149,6 +159,6 @@ function y(e) {
 	};
 }
 //#endregion
-export { _ as ViewportGridlines };
+export { v as ViewportGridlines };
 
 //# sourceMappingURL=viewport-gridlines2.js.map

package/dist/viewport/viewport-gridlines2.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewport-gridlines2.js","names":[],"sources":["../../src/viewport/viewport-gridlines.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { finiteOr, hostAttr, positiveFiniteOr, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './viewport-gridlines.css?inline';\nimport {\n  createGridlineCoverage,\n  gridlineCoverageNeedsUpdate,\n  selectGridlineInterval\n} from './viewport-gridlines.utils.js';\nimport { Viewport } from './viewport.js';\nimport type { ViewportRect } from './viewport.types.js';\n\nconst DEFAULT_STEP = 10;\nconst DEFAULT_TARGET_SPACING = 64;\n\ninterface GridlineProjection {\n  readonly coverage: ViewportRect;\n  readonly interval: number;\n}\n\ninterface ProjectionSyncOptions {\n  readonly forceCoverage?: boolean;\n  readonly resetInterval?: boolean;\n}\n\n/**\n * @element nve-viewport-gridlines\n * @description Renders origin-stable, zoom-adaptive gridlines behind viewport content.\n * @documentation https://nvidia.github.io/elements/docs/elements/viewport/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/viewport\n * @cssprop --color - Sets the gridline stroke color.\n * @cssprop --line-width - Sets the approximate stroke width in CSS pixels.\n */\nexport class ViewportGridlines extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-viewport-gridlines',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  @hostAttr() slot = 'background';\n\n  /** @private */\n  @hostAttr({ attribute: 'aria-hidden' }) protected accessibilityHidden = 'true';\n\n  #step = DEFAULT_STEP;\n  #originX = 0;\n  #originY = 0;\n  #targetSpacing = DEFAULT_TARGET_SPACING;\n  #viewport?: Viewport;\n  #resizeObserver?: ResizeObserver;\n  #projection?: GridlineProjection;\n\n  /** Smallest gridline interval in content-space units. */\n  @property({ type: Number, reflect: true })\n  get step(): number {\n    return this.#step;\n  }\n\n  set step(value: number) {\n    const next = positiveFiniteOr(value, DEFAULT_STEP);\n    if (next === this.#step) return;\n    const previous = this.#step;\n    this.#step = next;\n    this.requestUpdate('step', previous);\n  }\n\n  /** Content-space x coordinate of the grid origin. */\n  @property({ type: Number, attribute: 'origin-x', reflect: true })\n  get originX(): number {\n    return this.#originX;\n  }\n\n  set originX(value: number) {\n    const next = finiteOr(value, 0);\n    if (next === this.#originX) return;\n    const previous = this.#originX;\n    this.#originX = next;\n    this.requestUpdate('originX', previous);\n  }\n\n  /** Content-space y coordinate of the grid origin. */\n  @property({ type: Number, attribute: 'origin-y', reflect: true })\n  get originY(): number {\n    return this.#originY;\n  }\n\n  set originY(value: number) {\n    const next = finiteOr(value, 0);\n    if (next === this.#originY) return;\n    const previous = this.#originY;\n    this.#originY = next;\n    this.requestUpdate('originY', previous);\n  }\n\n  /** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */\n  @property({ type: Number, attribute: 'target-spacing', reflect: true })\n  get targetSpacing(): number {\n    return this.#targetSpacing;\n  }\n\n  set targetSpacing(value: number) {\n    const next = positiveFiniteOr(value, DEFAULT_TARGET_SPACING);\n    if (next === this.#targetSpacing) return;\n    const previous = this.#targetSpacing;\n    this.#targetSpacing = next;\n    this.requestUpdate('targetSpacing', previous);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    const viewport = this.parentElement;\n    if (!(viewport instanceof Viewport)) return;\n    this.#viewport = viewport;\n    this.style.setProperty('--_scale', `${viewport.scale}`);\n    this.#viewport.addEventListener('viewportchange', this.#handleViewportChange);\n    if (typeof ResizeObserver !== 'undefined') {\n      this.#resizeObserver = new ResizeObserver(this.#handleViewportResize);\n      this.#resizeObserver.observe(viewport);\n    }\n    this.#updateProjection({ forceCoverage: true, resetInterval: true });\n  }\n\n  disconnectedCallback(): void {\n    if (this.#viewport) {\n      this.#viewport.removeEventListener('viewportchange', this.#handleViewportChange);\n    }\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = undefined;\n    this.#viewport = undefined;\n    this.#projection = undefined;\n    super.disconnectedCallback();\n  }\n\n  protected willUpdate(changed: PropertyValues<this>): void {\n    super.willUpdate(changed);\n    if (changed.has('step') || changed.has('targetSpacing')) {\n      this.#updateProjection({ forceCoverage: true, resetInterval: true });\n    }\n  }\n\n  render() {\n    const projection = this.#projection;\n    if (!projection) return nothing;\n    const { coverage, interval } = projection;\n    return html`\n      <svg\n        internal-host\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        preserveAspectRatio=\"none\"\n        style=${styleMap(coverageStyles(coverage))}\n        viewBox=\"${coverage.x} ${coverage.y} ${coverage.width} ${coverage.height}\"\n      >\n        <defs>\n          <pattern\n            data-gridline-pattern\n            id=\"gridlines\"\n            x=${this.#originX}\n            y=${this.#originY}\n            width=${interval}\n            height=${interval}\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <path d=\"M ${interval} 0 H 0 V ${interval}\"></path>\n          </pattern>\n        </defs>\n        <rect\n          x=${coverage.x}\n          y=${coverage.y}\n          width=${coverage.width}\n          height=${coverage.height}\n          fill=\"url(#gridlines)\"\n        ></rect>\n      </svg>\n    `;\n  }\n\n  #handleViewportChange = (): void => {\n    const viewport = this.#viewport;\n    if (!viewport) return;\n    this.style.setProperty('--_scale', `${viewport.scale}`);\n    this.#requestProjectionUpdate();\n  };\n\n  #handleViewportResize = (): void => {\n    this.#requestProjectionUpdate({ forceCoverage: true });\n  };\n\n  #requestProjectionUpdate(options: ProjectionSyncOptions = {}): void {\n    if (this.#updateProjection(options)) this.requestUpdate();\n  }\n\n  #updateProjection(options: ProjectionSyncOptions = {}): boolean {\n    const viewport = this.#viewport;\n    if (!viewport) return false;\n    const visible = viewport.getVisibleRect();\n    if (visible.width <= 0 || visible.height <= 0) return false;\n    const interval = selectGridlineInterval({\n      current: options.resetInterval ? undefined : this.#projection?.interval,\n      scale: viewport.scale,\n      step: this.#step,\n      targetSpacing: this.#targetSpacing\n    });\n    const projection = nextProjection({\n      forceCoverage: options.forceCoverage === true,\n      interval,\n      previous: this.#projection,\n      visible\n    });\n    if (!projection) return false;\n    this.#projection = projection;\n    return true;\n  }\n}\n\nfunction nextProjection({\n  forceCoverage,\n  interval,\n  previous,\n  visible\n}: {\n  forceCoverage: boolean;\n  interval: number;\n  previous?: GridlineProjection;\n  visible: ViewportRect;\n}): GridlineProjection | undefined {\n  const coverageChanged = forceCoverage || gridlineCoverageNeedsUpdate(previous?.coverage, visible);\n  const intervalChanged = interval !== previous?.interval;\n  if (!coverageChanged && !intervalChanged) return undefined;\n  const coverage = coverageChanged || !previous ? createGridlineCoverage(visible) : previous.coverage;\n  return { coverage, interval };\n}\n\nfunction coverageStyles(coverage: ViewportRect): Record<string, string> {\n  return {\n    height: `${coverage.height}px`,\n    left: `${coverage.x}px`,\n    top: `${coverage.y}px`,\n    width: `${coverage.width}px`\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"viewport-gridlines2.js","names":[],"sources":["../../src/viewport/viewport-gridlines.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing, svg, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { finiteOr, hostAttr, positiveFiniteOr, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './viewport-gridlines.css?inline';\nimport {\n  createGridlineCoverage,\n  gridlineCoverageNeedsUpdate,\n  selectGridlineInterval\n} from './viewport-gridlines.utils.js';\nimport { Viewport } from './viewport.js';\nimport type { ViewportRect } from './viewport.types.js';\n\nconst DEFAULT_STEP = 10;\nconst DEFAULT_TARGET_SPACING = 64;\n\ninterface GridlineProjection {\n  readonly coverage: ViewportRect;\n  readonly interval: number;\n}\n\ninterface ProjectionSyncOptions {\n  readonly forceCoverage?: boolean;\n  readonly resetInterval?: boolean;\n}\n\n/**\n * @element nve-viewport-gridlines\n * @description Renders origin-stable, zoom-adaptive gridline patterns behind viewport content.\n * @documentation https://nvidia.github.io/elements/docs/elements/viewport/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/viewport\n * @cssprop --color - Sets the gridline pattern color.\n * @cssprop --line-width - Sets the approximate stroke width in CSS pixels.\n * @cssprop --dot-radius - Sets the approximate dot radius in CSS pixels.\n * @cssprop --cross-size - Sets the approximate full width and height of each cross in CSS pixels.\n */\nexport class ViewportGridlines extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-viewport-gridlines',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  @hostAttr() slot = 'background';\n\n  /** @private */\n  @hostAttr({ attribute: 'aria-hidden' }) protected accessibilityHidden = 'true';\n\n  #step = DEFAULT_STEP;\n  #originX = 0;\n  #originY = 0;\n  #targetSpacing = DEFAULT_TARGET_SPACING;\n  #viewport?: Viewport;\n  #resizeObserver?: ResizeObserver;\n  #projection?: GridlineProjection;\n\n  /** Grid pattern to render. */\n  @property({ type: String, reflect: true }) pattern: 'lines' | 'dots' | 'crosses' = 'lines';\n\n  /** Smallest gridline interval in content-space units. */\n  @property({ type: Number, reflect: true })\n  get step(): number {\n    return this.#step;\n  }\n\n  set step(value: number) {\n    const next = positiveFiniteOr(value, DEFAULT_STEP);\n    if (next === this.#step) return;\n    const previous = this.#step;\n    this.#step = next;\n    this.requestUpdate('step', previous);\n  }\n\n  /** Content-space x coordinate of the grid origin. */\n  @property({ type: Number, attribute: 'origin-x', reflect: true })\n  get originX(): number {\n    return this.#originX;\n  }\n\n  set originX(value: number) {\n    const next = finiteOr(value, 0);\n    if (next === this.#originX) return;\n    const previous = this.#originX;\n    this.#originX = next;\n    this.requestUpdate('originX', previous);\n  }\n\n  /** Content-space y coordinate of the grid origin. */\n  @property({ type: Number, attribute: 'origin-y', reflect: true })\n  get originY(): number {\n    return this.#originY;\n  }\n\n  set originY(value: number) {\n    const next = finiteOr(value, 0);\n    if (next === this.#originY) return;\n    const previous = this.#originY;\n    this.#originY = next;\n    this.requestUpdate('originY', previous);\n  }\n\n  /** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */\n  @property({ type: Number, attribute: 'target-spacing', reflect: true })\n  get targetSpacing(): number {\n    return this.#targetSpacing;\n  }\n\n  set targetSpacing(value: number) {\n    const next = positiveFiniteOr(value, DEFAULT_TARGET_SPACING);\n    if (next === this.#targetSpacing) return;\n    const previous = this.#targetSpacing;\n    this.#targetSpacing = next;\n    this.requestUpdate('targetSpacing', previous);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    const viewport = this.parentElement;\n    if (!(viewport instanceof Viewport)) return;\n    this.#viewport = viewport;\n    this.style.setProperty('--_scale', `${viewport.scale}`);\n    this.#viewport.addEventListener('viewportchange', this.#handleViewportChange);\n    if (typeof ResizeObserver !== 'undefined') {\n      this.#resizeObserver = new ResizeObserver(this.#handleViewportResize);\n      this.#resizeObserver.observe(viewport);\n    }\n    this.#updateProjection({ forceCoverage: true, resetInterval: true });\n  }\n\n  disconnectedCallback(): void {\n    if (this.#viewport) {\n      this.#viewport.removeEventListener('viewportchange', this.#handleViewportChange);\n    }\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = undefined;\n    this.#viewport = undefined;\n    this.#projection = undefined;\n    super.disconnectedCallback();\n  }\n\n  protected willUpdate(changed: PropertyValues<this>): void {\n    super.willUpdate(changed);\n    if (changed.has('step') || changed.has('targetSpacing')) {\n      this.#updateProjection({ forceCoverage: true, resetInterval: true });\n    }\n  }\n\n  render() {\n    const projection = this.#projection;\n    if (!projection) return nothing;\n    const { coverage, interval } = projection;\n    const centered = this.pattern === 'dots' || this.pattern === 'crosses';\n    return html`\n      <svg\n        internal-host\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        preserveAspectRatio=\"none\"\n        style=${styleMap(coverageStyles(coverage))}\n        viewBox=\"${coverage.x} ${coverage.y} ${coverage.width} ${coverage.height}\"\n      >\n        <defs>\n          <pattern\n            data-gridline-pattern\n            id=\"gridlines\"\n            x=${this.#originX - (centered ? interval / 2 : 0)}\n            y=${this.#originY - (centered ? interval / 2 : 0)}\n            width=${interval}\n            height=${interval}\n            patternUnits=\"userSpaceOnUse\"\n          >\n            ${this.#renderPattern(interval)}\n          </pattern>\n        </defs>\n        <rect\n          x=${coverage.x}\n          y=${coverage.y}\n          width=${coverage.width}\n          height=${coverage.height}\n          fill=\"url(#gridlines)\"\n        ></rect>\n      </svg>\n    `;\n  }\n\n  #renderPattern(interval: number) {\n    switch (this.pattern) {\n      case 'dots':\n        return svg`<circle cx=${interval / 2} cy=${interval / 2} r=\"2\"></circle>`;\n      case 'crosses':\n        return svg`\n          <g transform=\"translate(${interval / 2} ${interval / 2})\">\n            <clipPath id=\"cross-clip\">\n              <rect class=\"cross-horizontal\"></rect>\n              <rect class=\"cross-vertical\"></rect>\n            </clipPath>\n            <rect\n              class=\"cross\"\n              x=${-interval / 2}\n              y=${-interval / 2}\n              width=${interval}\n              height=${interval}\n              clip-path=\"url(#cross-clip)\"\n            ></rect>\n          </g>\n        `;\n      case 'lines':\n      default:\n        return svg`<path d=\"M ${interval} 0 H 0 V ${interval}\"></path>`;\n    }\n  }\n\n  #handleViewportChange = (): void => {\n    const viewport = this.#viewport;\n    if (!viewport) return;\n    this.style.setProperty('--_scale', `${viewport.scale}`);\n    this.#requestProjectionUpdate();\n  };\n\n  #handleViewportResize = (): void => {\n    this.#requestProjectionUpdate({ forceCoverage: true });\n  };\n\n  #requestProjectionUpdate(options: ProjectionSyncOptions = {}): void {\n    if (this.#updateProjection(options)) this.requestUpdate();\n  }\n\n  #updateProjection(options: ProjectionSyncOptions = {}): boolean {\n    const viewport = this.#viewport;\n    if (!viewport) return false;\n    const visible = viewport.getVisibleRect();\n    if (visible.width <= 0 || visible.height <= 0) return false;\n    const interval = selectGridlineInterval({\n      current: options.resetInterval ? undefined : this.#projection?.interval,\n      scale: viewport.scale,\n      step: this.#step,\n      targetSpacing: this.#targetSpacing\n    });\n    const projection = nextProjection({\n      forceCoverage: options.forceCoverage === true,\n      interval,\n      previous: this.#projection,\n      visible\n    });\n    if (!projection) return false;\n    this.#projection = projection;\n    return true;\n  }\n}\n\nfunction nextProjection({\n  forceCoverage,\n  interval,\n  previous,\n  visible\n}: {\n  forceCoverage: boolean;\n  interval: number;\n  previous?: GridlineProjection;\n  visible: ViewportRect;\n}): GridlineProjection | undefined {\n  const coverageChanged = forceCoverage || gridlineCoverageNeedsUpdate(previous?.coverage, visible);\n  const intervalChanged = interval !== previous?.interval;\n  if (!coverageChanged && !intervalChanged) return undefined;\n  const coverage = coverageChanged || !previous ? createGridlineCoverage(visible) : previous.coverage;\n  return { coverage, interval };\n}\n\nfunction coverageStyles(coverage: ViewportRect): Record<string, string> {\n  return {\n    height: `${coverage.height}px`,\n    left: `${coverage.x}px`,\n    top: `${coverage.y}px`,\n    width: `${coverage.width}px`\n  };\n}\n"],"mappings":"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"}

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.11.2"
+			version: "2.12.1"
 		};
 	}
 	#e;