@nvidia-elements/core 2.8.0 → 2.9.0

package/dist/button/button.examples.json

@@ -79,7 +79,7 @@
     {
       "id": "button-invoker-command",
       "name": "InvokerCommand",
-      "template": "<nve-icon\n  id=\"rotation-target\"\n  name=\"sparkles\"\n  aria-label=\"sparkles icon\"\n  style=\"inline-size: 100px; block-size: 100px\"\n></nve-icon>\n<section>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-left\">Rotate left</nve-button>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-right\">Rotate right</nve-button>\n  <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n</section>\n<nve-toggletip id=\"popover\">popover</nve-toggletip>\n<script type=\"module\">\n  const target = document.getElementById(\"rotation-target\");\n  target.addEventListener(\"command\", (event) => {\n    if (event.command === \"--rotate-left\") {\n      target.style.rotate = \"-90deg\";\n    } else if (event.command === \"--rotate-right\") {\n      target.style.rotate = \"90deg\";\n    }\n  });\n</script>\n",
+      "template": "<nve-icon id=\"rotation-target\" name=\"sparkles\" aria-label=\"sparkles icon\" style=\"inline-size: 100px; block-size: 100px\"></nve-icon>\n<section>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-left\">Rotate left</nve-button>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-right\">Rotate right</nve-button>\n  <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n</section>\n<nve-toggletip id=\"popover\">popover</nve-toggletip>\n<script type=\"module\">\n  const target = document.getElementById(\"rotation-target\");\n  target.addEventListener(\"command\", (event) => {\n    if (event.command === \"--rotate-left\") {\n      target.style.rotate = \"-90deg\";\n    } else if (event.command === \"--rotate-right\") {\n      target.style.rotate = \"90deg\";\n    }\n  });\n</script>\n",
       "summary": "Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.",
       "description": "",
       "composition": true,
@@ -182,7 +182,7 @@
     {
       "id": "button-background-override",
       "name": "BackgroundOverride",
-      "template": "<style>\n  nve-button.custom {\n    --color: var(--nve-sys-text-black-color);\n    --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, var(--nve-ref-color-yellow-amber-900) 60%);\n    &:hover {\n      --background-image: linear-gradient(\n        340deg,\n        rgb(255 234 177) 0%,\n        color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%\n      );\n    }\n  }\n</style>\n<nve-button class=\"custom\">Create Account</nve-button>\n<nve-button>Create Account</nve-button>\n",
+      "template": "<style>\n  nve-button.custom {\n    --color: var(--nve-sys-text-black-color);\n    --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, var(--nve-ref-color-yellow-amber-900) 60%);\n    &:hover {\n      --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%);\n    }\n  }\n</style>\n<nve-button class=\"custom\">Create Account</nve-button>\n<nve-button>Create Account</nve-button>\n",
       "summary": "Override button appearance with custom CSS properties for brand-specific designs while maintaining functionality.",
       "description": "",
       "composition": false,
@@ -222,7 +222,7 @@
     {
       "id": "button-contrast-colored-backgrounds",
       "name": "ContrastColoredBackgrounds",
-      "template": "<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n  <nve-toolbar status=\"accent\">\n    <div nve-text=\"label medium sm\">10 Selected</div>\n    <nve-button slot=\"suffix\">Edit</nve-button>\n  </nve-toolbar>\n  <nve-alert-group status=\"danger\">\n    <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n  </nve-alert-group>\n  <nve-card style=\"width: 280px\">\n    <nve-card-content\n      style=\"\n        width: 100%;\n        height: 100%;\n        aspect-ratio: 16/9;\n        object-fit: cover;\n        background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% /\n          40px 40px;\n        background-position: center;\n        border-style: hidden;\n      \"\n    >\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n  <nve-toolbar status=\"accent\">\n    <div nve-text=\"label medium sm\">10 Selected</div>\n    <nve-button slot=\"suffix\">Edit</nve-button>\n  </nve-toolbar>\n  <nve-alert-group status=\"danger\">\n    <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n  </nve-alert-group>\n  <nve-card style=\"width: 280px\">\n    <nve-card-content\n      style=\"\n        width: 100%;\n        height: 100%;\n        aspect-ratio: 16/9;\n        object-fit: cover;\n        background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% / 40px 40px;\n        background-position: center;\n        border-style: hidden;\n      \"\n    >\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</div>\n",
       "summary": "Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.",
       "description": "",
       "composition": true,

package/dist/button/button2.js

@@ -12,7 +12,7 @@ var s = class extends o(r) {
 	static {
 		this.metadata = {
 			tag: "nve-button",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	render() {

package/dist/button-group/button-group2.js

@@ -26,7 +26,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-button-group",
-			version: "2.8.0",
+			version: "2.9.0",
 			children: [
 				"nve-button",
 				"nve-icon-button",

package/dist/card/card.examples.json

@@ -23,7 +23,7 @@
     {
       "id": "card-media-card",
       "name": "MediaCard",
-      "template": "<div nve-layout=\"grid gap:md span-items:6 align:stretch\" style=\"max-width: 900px\">\n  <nve-card style=\"height: 100%; width: 100%\">\n    <img\n      src=\"/static/images/test-image-1.svg\"\n      alt=\"example visualization for media card demo\"\n      loading=\"lazy\"\n      style=\"width: 100%; object-fit: cover\"\n    />\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  <nve-card style=\"height: 100%; width: 100%\">\n    <img\n      src=\"/static/images/test-image-1.svg\"\n      alt=\"example visualization for media card demo\"\n      loading=\"lazy\"\n      style=\"width: 100%; object-fit: cover\"\n    />\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n    </nve-card-content>\n  </nve-card>\n</div>\n",
+      "template": "<div nve-layout=\"grid gap:md span-items:6 align:stretch\" style=\"max-width: 900px\">\n  <nve-card style=\"height: 100%; width: 100%\">\n    <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  <nve-card style=\"height: 100%; width: 100%\">\n    <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n    </nve-card-content>\n  </nve-card>\n</div>\n",
       "summary": "Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.",
       "description": "",
       "composition": false,
@@ -41,7 +41,7 @@
     {
       "id": "card-description-list",
       "name": "DescriptionList",
-      "template": "<nve-card style=\"width: 650px\">\n  <nve-card-header>\n    <h2 nve-text=\"heading sm bold\">Nautical Terms</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <dl nve-layout=\"grid gap:lg\">\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Knot</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">\n        Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the\n        bow (the front of the vessel).\n      </dd>\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">\n        Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing\n        towards the bow (the front of the vessel).\n      </dd>\n    </dl>\n  </nve-card-content>\n</nve-card>\n",
+      "template": "<nve-card style=\"width: 650px\">\n  <nve-card-header>\n    <h2 nve-text=\"heading sm bold\">Nautical Terms</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <dl nve-layout=\"grid gap:lg\">\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Knot</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n    </dl>\n  </nve-card-content>\n</nve-card>\n",
       "summary": "Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.",
       "description": "",
       "composition": false,

package/dist/card/card2.js

@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "2.8.0",
+			version: "2.9.0",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "2.8.0",
+			version: "2.9.0",
 			parents: ["nve-card"]
 		};
 	}
@@ -72,7 +72,7 @@ var m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "2.8.0",
+			version: "2.9.0",
 			parents: ["nve-card"]
 		};
 	}

package/dist/chat-message/chat-message.examples.json

@@ -14,7 +14,7 @@
     {
       "id": "chat-message-arrow-position",
       "name": "ArrowPosition",
-      "template": "<section nve-layout=\"column gap:lg\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"top-start\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"top-end\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"bottom-start\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"bottom-end\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n</section>\n",
+      "template": "<section nve-layout=\"column gap:lg\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"top-start\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"top-end\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"bottom-start\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"bottom-end\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n</section>\n",
       "summary": "Different arrow positions for chat messages. Useful for creating chat bubbles that point to specific elements or users.",
       "description": "",
       "composition": false,
@@ -25,7 +25,7 @@
     {
       "id": "chat-message-flat",
       "name": "Flat",
-      "template": "<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    Your deployment completed successfully. All services are running as expected.\n  </nve-chat-message>\n  <nve-chat-message container=\"flat\" style=\"width: 300px\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    The build pipeline finished processing all stages. Tests passed with 98% coverage, and the deployment to staging was\n    successful. Review the detailed logs in the CI dashboard for more information.\n  </nve-chat-message>\n</section>\n",
+      "template": "<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    Your deployment completed successfully. All services are running as expected.\n  </nve-chat-message>\n  <nve-chat-message container=\"flat\" style=\"width: 300px\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    The build pipeline finished processing all stages. Tests passed with 98% coverage, and the deployment to staging was successful. Review the detailed logs in the CI dashboard for more information.\n  </nve-chat-message>\n</section>\n",
       "summary": "Flat container style with avatar integration. Perfect for modern chat interfaces where messages have a cleaner, flatter appearance.",
       "description": "",
       "composition": false,
@@ -43,7 +43,7 @@
     {
       "id": "chat-message-codeblock",
       "name": "Codeblock",
-      "template": "<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\" style=\"margin-left: auto\">\n    How do I use the chat message component?\n  </nve-chat-message>\n  <nve-chat-message container=\"flat\">\n    Here's the steps you need to do follow to use the chat message component\n    <nve-codeblock language=\"typescript\">\n      import '@nvidia-elements/core/chat-message/define.js';\n      <code nve-text=\"code\"><nve-chat-message></nve-chat-message></code>\n    </nve-codeblock>\n  </nve-chat-message>\n</section>\n",
+      "template": "<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\" style=\"margin-left: auto\"> How do I use the chat message component? </nve-chat-message>\n  <nve-chat-message container=\"flat\">\n    Here's the steps you need to do follow to use the chat message component\n    <nve-codeblock language=\"typescript\">\n      import '@nvidia-elements/core/chat-message/define.js';\n      <code nve-text=\"code\"><nve-chat-message></nve-chat-message></code>\n    </nve-codeblock>\n  </nve-chat-message>\n</section>\n",
       "summary": "Chat messages with code blocks for technical discussions. Perfect for developer chat interfaces or documentation systems.",
       "description": "",
       "composition": false,
@@ -63,7 +63,7 @@
     {
       "id": "chat-message-color",
       "name": "Color",
-      "template": "<section nve-layout=\"column gap:md\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"red-cardinal\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"gray-slate\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"gray-denim\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-indigo\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-cobalt\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-sky\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"teal-cyan\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-mint\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"teal-seafoam\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-grass\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"yellow-amber\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"orange-pumpkin\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"red-tomato\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"pink-magenta\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-plum\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-violet\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-lavender\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"pink-rose\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-jade\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"lime-pear\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"yellow-nova\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"brand-green\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n</section>\n",
+      "template": "<section nve-layout=\"column gap:md\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"red-cardinal\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"gray-slate\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"gray-denim\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-indigo\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-cobalt\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-sky\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"teal-cyan\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-mint\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"teal-seafoam\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-grass\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"yellow-amber\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"orange-pumpkin\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"red-tomato\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"pink-magenta\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-plum\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-violet\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-lavender\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"pink-rose\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-jade\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"lime-pear\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"yellow-nova\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"brand-green\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n</section>\n",
       "summary": "All available color variants for chat messages. Use these to create themed chat interfaces or to differentiate message types and priorities.",
       "description": "",
       "composition": false,

package/dist/chat-message/chat-message2.js

@@ -13,7 +13,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-chat-message",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	render() {

package/dist/checkbox/checkbox-group2.js

@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox-group",
-			version: "2.8.0",
+			version: "2.9.0",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/checkbox/checkbox2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox",
-			version: "2.8.0",
+			version: "2.9.0",
 			children: [
 				"label",
 				"input",

package/dist/color/color2.js

@@ -21,7 +21,7 @@ var f = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-color",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/combobox/combobox.examples.json

@@ -61,7 +61,7 @@
     {
       "id": "combobox-selected-first",
       "name": "SelectedFirst",
-      "template": "<nve-combobox id=\"combobox-selected-first\" style=\"width: 500px; --scroll-height: 220px\">\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n    <option value=\"includes\"></option>\n    <option value=\"user\"></option>\n    <option value=\"progress\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.querySelector(\"#combobox-selected-first\");\n  const select = combobox.querySelector(\"select\");\n  const optionOrder = new Map([...select.options].map((option, index) => [option, index]));\n  combobox.addEventListener(\"open\", () => {\n    const selectedOrder = new Map([...select.selectedOptions].map((option, index) => [option, index]));\n    Array.from(select.options)\n      .sort((a, b) =>\n        Number(b.selected) - Number(a.selected) || (a.selected && b.selected)\n          ? selectedOrder.get(a) - selectedOrder.get(b)\n          : optionOrder.get(a) - optionOrder.get(b),\n      )\n      .forEach((option) => select.append(option));\n  });\n</script>\n",
+      "template": "<nve-combobox id=\"combobox-selected-first\" style=\"width: 500px; --scroll-height: 220px\">\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n    <option value=\"includes\"></option>\n    <option value=\"user\"></option>\n    <option value=\"progress\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.querySelector(\"#combobox-selected-first\");\n  const select = combobox.querySelector(\"select\");\n  const optionOrder = new Map([...select.options].map((option, index) => [option, index]));\n  combobox.addEventListener(\"open\", () => {\n    const selectedOrder = new Map([...select.selectedOptions].map((option, index) => [option, index]));\n    Array.from(select.options)\n      .sort((a, b) => (Number(b.selected) - Number(a.selected) || (a.selected && b.selected) ? selectedOrder.get(a) - selectedOrder.get(b) : optionOrder.get(a) - optionOrder.get(b)))\n      .forEach((option) => select.append(option));\n  });\n</script>\n",
       "summary": "Multi-select that reorders selected options before unselected options after the combobox closes. Use when long filter lists need selected values to stay easy to review.",
       "description": "",
       "composition": false,
@@ -130,7 +130,7 @@
     {
       "id": "combobox-reset",
       "name": "Reset",
-      "template": "<nve-combobox id=\"combobox-reset\" style=\"width: 500px; --scroll-height: 220px\">\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-icon-button aria-label=\"clear selection\" icon-name=\"cancel\" container=\"inline\"></nve-icon-button>\n  <nve-button slot=\"footer\" aria-label=\"clear selection\" container=\"flat\">reset</nve-button>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  document\n    .querySelector(\"#combobox-reset nve-icon-button\")\n    .addEventListener(\"click\", (e) => e.target.parentElement.reset());\n  document.querySelector(\"#combobox-reset nve-button\").addEventListener(\"click\", (e) => e.target.parentElement.reset());\n</script>\n",
+      "template": "<nve-combobox id=\"combobox-reset\" style=\"width: 500px; --scroll-height: 220px\">\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-icon-button aria-label=\"clear selection\" icon-name=\"cancel\" container=\"inline\"></nve-icon-button>\n  <nve-button slot=\"footer\" aria-label=\"clear selection\" container=\"flat\">reset</nve-button>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  document.querySelector(\"#combobox-reset nve-icon-button\").addEventListener(\"click\", (e) => e.target.parentElement.reset());\n  document.querySelector(\"#combobox-reset nve-button\").addEventListener(\"click\", (e) => e.target.parentElement.reset());\n</script>\n",
       "summary": "Multi-select with reset functionality via icon button and footer button to clear all selections.",
       "description": "",
       "composition": true,
@@ -166,7 +166,7 @@
     {
       "id": "combobox-no-tags",
       "name": "NoTags",
-      "template": "<form id=\"hidden-tags\" nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox tag-layout=\"hidden\">\n    <label>label</label>\n    <input type=\"search\" />\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n  </nve-combobox>\n  <div id=\"tags\" nve-layout=\"row gap:xs\"></div>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#hidden-tags\");\n  const select = form.querySelector(\"select\");\n  const tags = form.querySelector(\"#tags\");\n  updateTags();\n  select.addEventListener(\"change\", (e) => updateTags());\n  tags.addEventListener(\"close\", (e) => {\n    Array.from(select.options).find((o) => o.value === e.target.value).selected = false;\n    updateTags();\n  });\n  function updateTags() {\n    tags.innerHTML = \"\";\n    Array.from(select.selectedOptions).forEach(\n      (o) => (tags.innerHTML += '<nve-tag closable value=\"' + o.value + '\">' + o.value + \"</nve-tag>\"),\n    );\n  }\n</script>\n",
+      "template": "<form id=\"hidden-tags\" nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox tag-layout=\"hidden\">\n    <label>label</label>\n    <input type=\"search\" />\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n  </nve-combobox>\n  <div id=\"tags\" nve-layout=\"row gap:xs\"></div>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#hidden-tags\");\n  const select = form.querySelector(\"select\");\n  const tags = form.querySelector(\"#tags\");\n  updateTags();\n  select.addEventListener(\"change\", (e) => updateTags());\n  tags.addEventListener(\"close\", (e) => {\n    Array.from(select.options).find((o) => o.value === e.target.value).selected = false;\n    updateTags();\n  });\n  function updateTags() {\n    tags.innerHTML = \"\";\n    Array.from(select.selectedOptions).forEach((o) => (tags.innerHTML += '<nve-tag closable value=\"' + o.value + '\">' + o.value + \"</nve-tag>\"));\n  }\n</script>\n",
       "summary": "Multi-select without built-in tags, using external tag management for custom selection display.",
       "description": "",
       "composition": false,
@@ -195,7 +195,7 @@
     {
       "id": "combobox-dynamic-typeahead-search",
       "name": "DynamicTypeaheadSearch",
-      "template": "<nve-combobox id=\"combobox\">\n  <label>GPU Search</label>\n  <input type=\"search\" placeholder=\"Type to search…\" />\n  <datalist>\n    <option disabled selected></option>\n  </datalist>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.getElementById(\"combobox\");\n  const input = combobox.querySelector(\"input\");\n  const datalist = combobox.querySelector(\"datalist\");\n  let controller = null;\n  input.addEventListener(\"input\", async () => {\n    if (controller) controller.abort();\n    controller = new AbortController();\n    const query = input.value.trim();\n    if (!query) {\n      datalist.innerHTML = \"\";\n      return;\n    }\n    try {\n      const results = await mockFetch(query, controller.signal);\n      datalist.innerHTML = results.map((v) => '<option value=\"' + v + '\">').join(\"\");\n    } catch (err) {\n      if (err.name !== \"AbortError\") datalist.innerHTML = \"\";\n    }\n  });\n  function mockFetch(query, signal) {\n    return new Promise((resolve, reject) => {\n      const timer = setTimeout(() => {\n        resolve(\n          [\"A100 GPU\", \"H100 GPU\", \"H200 GPU\", \"DGX A100\", \"DGX H100\", \"CUDA Toolkit\"].filter((v) =>\n            v.toLowerCase().startsWith(query.toLowerCase()),\n          ),\n        );\n      }, 500);\n      signal.addEventListener(\"abort\", () => {\n        clearTimeout(timer);\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      });\n    });\n  }\n</script>\n",
+      "template": "<nve-combobox id=\"combobox\">\n  <label>GPU Search</label>\n  <input type=\"search\" placeholder=\"Type to search…\" />\n  <datalist>\n    <option disabled selected></option>\n  </datalist>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.getElementById(\"combobox\");\n  const input = combobox.querySelector(\"input\");\n  const datalist = combobox.querySelector(\"datalist\");\n  let controller = null;\n  input.addEventListener(\"input\", async () => {\n    if (controller) controller.abort();\n    controller = new AbortController();\n    const query = input.value.trim();\n    if (!query) {\n      datalist.innerHTML = \"\";\n      return;\n    }\n    try {\n      const results = await mockFetch(query, controller.signal);\n      datalist.innerHTML = results.map((v) => '<option value=\"' + v + '\">').join(\"\");\n    } catch (err) {\n      if (err.name !== \"AbortError\") datalist.innerHTML = \"\";\n    }\n  });\n  function mockFetch(query, signal) {\n    return new Promise((resolve, reject) => {\n      const timer = setTimeout(() => {\n        resolve([\"A100 GPU\", \"H100 GPU\", \"H200 GPU\", \"DGX A100\", \"DGX H100\", \"CUDA Toolkit\"].filter((v) => v.toLowerCase().startsWith(query.toLowerCase())));\n      }, 500);\n      signal.addEventListener(\"abort\", () => {\n        clearTimeout(timer);\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      });\n    });\n  }\n</script>\n",
       "summary": "Fetches options asynchronously as the user types, cancelling stale requests with AbortController. Use for server-backed search where the full option set is too large to load up front.",
       "description": "",
       "composition": false,
@@ -206,7 +206,7 @@
     {
       "id": "combobox-infinite-scroll",
       "name": "InfiniteScroll",
-      "template": "<nve-combobox id=\"infinite-scroll-combo\" style=\"--scroll-height: 200px\">\n  <label>GPU Models</label>\n  <input type=\"search\" placeholder=\"Scroll to load more…\" />\n  <datalist id=\"infinite-scroll-list\"></datalist>\n</nve-combobox>\n<script type=\"module\">\n  const combo = document.getElementById(\"infinite-scroll-combo\");\n  const datalist = document.getElementById(\"infinite-scroll-list\");\n  let loading = false;\n  async function loadBatch() {\n    if (loading) return;\n    loading = true;\n    const items = await new Promise((resolve) =>\n      setTimeout(\n        () => resolve(Array.from({ length: 100 }, (_, i) => \"GPU Model \" + (datalist.options.length + i + 1))),\n        300,\n      ),\n    );\n    datalist.append(...items.map((v) => new Option(v)));\n    loading = false;\n  }\n  loadBatch();\n  combo.addEventListener(\"scroll\", (e) => {\n    if (e.detail.scrollHeight - e.detail.scrollTop - e.detail.clientHeight <= 128) {\n      loadBatch();\n    }\n  });\n</script>\n",
+      "template": "<nve-combobox id=\"infinite-scroll-combo\" style=\"--scroll-height: 200px\">\n  <label>GPU Models</label>\n  <input type=\"search\" placeholder=\"Scroll to load more…\" />\n  <datalist id=\"infinite-scroll-list\"></datalist>\n</nve-combobox>\n<script type=\"module\">\n  const combo = document.getElementById(\"infinite-scroll-combo\");\n  const datalist = document.getElementById(\"infinite-scroll-list\");\n  let loading = false;\n  async function loadBatch() {\n    if (loading) return;\n    loading = true;\n    const items = await new Promise((resolve) => setTimeout(() => resolve(Array.from({ length: 100 }, (_, i) => \"GPU Model \" + (datalist.options.length + i + 1))), 300));\n    datalist.append(...items.map((v) => new Option(v)));\n    loading = false;\n  }\n  loadBatch();\n  combo.addEventListener(\"scroll\", (e) => {\n    if (e.detail.scrollHeight - e.detail.scrollTop - e.detail.clientHeight <= 128) {\n      loadBatch();\n    }\n  });\n</script>\n",
       "summary": "Infinite scroll combobox loading, using the scroll event to append options as the user nears the end of the list. Use for server-backed datasets where loading all options up front is impractical.",
       "description": "",
       "composition": false,

package/dist/combobox/combobox2.js

@@ -31,7 +31,7 @@ var S = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-combobox",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/copy-button/copy-button.examples.json

@@ -56,7 +56,7 @@
     {
       "id": "copy-button-hint",
       "name": "Hint",
-      "template": "<h2 nve-text=\"body lg\" nve-layout=\"row align:vertical-center\">\n  2d628479c...\n  <nve-copy-button\n    container=\"flat\"\n    value=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\"\n    aria-label=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\"\n    behavior-copy\n  ></nve-copy-button>\n</h2>\n",
+      "template": "<h2 nve-text=\"body lg\" nve-layout=\"row align:vertical-center\">\n  2d628479c...\n  <nve-copy-button container=\"flat\" value=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\" aria-label=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\" behavior-copy></nve-copy-button>\n</h2>\n",
       "summary": "Copy button integrated with text content, showing how to copy truncated values like commit hashes. Perfect for code snippets, IDs, or other long text that users copy while viewing a shortened version.",
       "description": "",
       "composition": false,
@@ -85,7 +85,7 @@
     {
       "id": "copy-button-tooltip-position-override",
       "name": "TooltipPositionOverride",
-      "template": "<style>\n  nve-copy-button.override-position-example {\n    &::part(tooltip-arrow) {\n      position-area: right center;\n      translate: -50% 0%;\n      transform: translate(-2px, 0) rotate(45deg);\n    }\n  }\n</style>\n<nve-copy-button\n  class=\"override-position-example\"\n  value=\"hello\"\n  aria-label=\"copy value\"\n  behavior-copy\n  style=\"position: absolute; top: 12px; right: 12px\"\n></nve-copy-button>\n",
+      "template": "<style>\n  nve-copy-button.override-position-example {\n    &::part(tooltip-arrow) {\n      position-area: right center;\n      translate: -50% 0%;\n      transform: translate(-2px, 0) rotate(45deg);\n    }\n  }\n</style>\n<nve-copy-button class=\"override-position-example\" value=\"hello\" aria-label=\"copy value\" behavior-copy style=\"position: absolute; top: 12px; right: 12px\"></nve-copy-button>\n",
       "summary": "Popover position override in a copy button.",
       "description": "",
       "composition": false,

package/dist/copy-button/copy-button2.js

@@ -32,7 +32,7 @@ var p = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-copy-button",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/custom-elements-jsx.d.ts

@@ -4004,6 +4004,70 @@ export type TreeProps = {
   onselect?: (e: CustomEvent<never>) => void;
 };
 
+export type ViewportGridlinesProps = {
+  /** Content-space x coordinate of the grid origin. */
+  "origin-x"?: number;
+  /** Content-space y coordinate of the grid origin. */
+  "origin-y"?: number;
+  /** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */
+  "target-spacing"?: number;
+  /** Smallest gridline interval in content-space units. */
+  step?: number;
+  /** Content-space x coordinate of the grid origin. */
+  originX?: number;
+  /** Content-space y coordinate of the grid origin. */
+  originY?: number;
+  /** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */
+  targetSpacing?: number;
+};
+
+export type ViewportProps = {
+  /** Inclusive lower scale limit. */
+  "min-scale"?: number;
+  /** Inclusive upper scale limit. */
+  "max-scale"?: number;
+  /** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */
+  "behavior-pan"?: boolean | "space";
+  /** Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. */
+  "behavior-zoom"?: boolean;
+  /** Default uniform CSS-pixel inset reserved around bounds when fitting content. */
+  "fit-inset"?: number;
+  /** CSS-pixel pointer movement required before a pointer pan begins. */
+  "drag-threshold"?: number;
+  /** Horizontal content-space coordinate at the viewport origin. */
+  x?: number;
+  /** Vertical content-space coordinate at the viewport origin. */
+  y?: number;
+  /** Content-to-viewport CSS-pixel scale. */
+  scale?: number;
+  /** Inclusive lower scale limit. */
+  minScale?: number;
+  /** Inclusive upper scale limit. */
+  maxScale?: number;
+  /** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */
+  behaviorPan?: boolean | "space";
+  /** Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. */
+  behaviorZoom?: boolean;
+  /** Fits measurable direct default-slot content once after initial layout. */
+  autoFit?: boolean;
+  /** Default uniform CSS-pixel inset reserved around bounds when fitting content. */
+  fitInset?: number;
+  /** CSS-pixel pointer movement required before a pointer pan begins. */
+  dragThreshold?: number;
+  /** Dispatched once after a render that commits one or more viewport transform changes. */
+  onviewportchange?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  ontype?: (e: CustomEvent<CustomEvent>) => void;
+  /** Dispatched when pointer movement crosses the pan threshold. Cancel to disable built-in pointer panning for the sequence. */
+  onpanstart?: (e: CustomEvent<never>) => void;
+  /** Dispatched when pointer, wheel, keyboard, or command input requests a pan. Cancel to skip the proposed transform mutation. */
+  onpan?: (e: CustomEvent<never>) => void;
+  /** Dispatched when a pointer pan ends, including its terminal reason. */
+  onpanend?: (e: CustomEvent<never>) => void;
+  /** Dispatched when wheel, pinch, or command input requests a scale change. Cancel to skip the proposed transform mutation. */
+  onzoom?: (e: CustomEvent<never>) => void;
+};
+
 export type WeekProps = {
   /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
   "fit-text"?: boolean;
@@ -6363,7 +6427,9 @@ export type CustomElements = {
    *  - **reset()** - Resets control value to initial attribute value and clears any active validation rules.
    *
    * ### **Slots:**
-   *  - _default_ - Control input element
+   *  - **prefix** - Content to display before the textarea.
+   * - **suffix** - Content to display after the textarea.
+   * - _default_ - Control input element
    * - **label** - Label element
    *
    * ### **CSS Properties:**
@@ -6631,6 +6697,51 @@ export type CustomElements = {
    */
   "nve-tree": Partial<TreeProps & BaseProps & BaseEvents>;
 
+  /**
+   * Renders origin-stable, zoom-adaptive gridlines behind viewport content.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--color** - Sets the gridline stroke color. _(default: undefined)_
+   * - **--line-width** - Sets the approximate stroke width in CSS pixels. _(default: undefined)_
+   */
+  "nve-viewport-gridlines": Partial<ViewportGridlinesProps & BaseProps & BaseEvents>;
+
+  /**
+   * A viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **viewportchange** - Dispatched once after a render that commits one or more viewport transform changes.
+   * - **type**
+   * - **panstart** - Dispatched when pointer movement crosses the pan threshold. Cancel to disable built-in pointer panning for the sequence.
+   * - **pan** - Dispatched when pointer, wheel, keyboard, or command input requests a pan. Cancel to skip the proposed transform mutation.
+   * - **panend** - Dispatched when a pointer pan ends, including its terminal reason.
+   * - **zoom** - Dispatched when wheel, pinch, or command input requests a scale change. Cancel to skip the proposed transform mutation.
+   *
+   * ### **Methods:**
+   *  - **toViewportCoords(contentX: _number_, contentY: _number_): _ViewportPoint_** - Converts a content-space point to viewport CSS pixels.
+   * - **toContentCoords(viewportX: _number_, viewportY: _number_): _ViewportPoint_** - Converts a viewport CSS-pixel point to content space.
+   * - **getTransform(): _ViewportTransform_** - Returns the current content-space origin and CSS-pixel scale.
+   * - **getVisibleRect(): _ViewportRect_** - Returns the visible content-space rectangle.
+   * - **animateTo(target: _Partial<ViewportTransform>_, options: _ViewportAnimationOptions_): _void_** - Animates the viewport to the requested partial transform.
+   * - **reveal(region: _{ x: number; y: number; width?: number; height?: number }_, options: _ViewportRevealOptions_): _void_** - Centers or fits a content-space region within the viewport.
+   * - **fitContents(options: _ViewportRevealOptions_): _void_** - Fits the union of direct default-slot element boxes within the viewport.
+   *
+   * ### **Slots:**
+   *  - _default_ - Content positioned in the viewport's infinite content space.
+   * - **background** - Custom content rendered behind viewport content and excluded from content fitting
+   *
+   * ### **CSS Properties:**
+   *  - **--background** - Background color of the fixed viewport area. _(default: undefined)_
+   * - **--min-height** - undefined _(default: undefined)_
+   * - **--pan-cursor** - Cursor shown over a background eligible for primary-pointer panning. _(default: undefined)_
+   * - **--panning-cursor** - Cursor shown while a pointer pan is active. _(default: undefined)_
+   */
+  "nve-viewport": Partial<ViewportProps & BaseProps & BaseEvents>;
+
   /**
    * A week picker is a control that enables users to choose a week value.
    * ---

package/dist/custom-elements-vue.d.ts

@@ -3766,6 +3766,68 @@ type TreeProps = {
   onselect?: (e: CustomEvent<never>) => void;
 };
 
+type ViewportGridlinesProps = {
+  /** Content-space x coordinate of the grid origin. */
+  "origin-x"?: number;
+  /** Content-space y coordinate of the grid origin. */
+  "origin-y"?: number;
+  /** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */
+  "target-spacing"?: number;
+  /** Smallest gridline interval in content-space units. */
+  step?: number;
+  /** Content-space x coordinate of the grid origin. */
+  originX?: number;
+  /** Content-space y coordinate of the grid origin. */
+  originY?: number;
+  /** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */
+  targetSpacing?: number;
+};
+
+type ViewportProps = {
+  /** Inclusive lower scale limit. */
+  "min-scale"?: number;
+  /** Inclusive upper scale limit. */
+  "max-scale"?: number;
+  /** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */
+  "behavior-pan"?: boolean | "space";
+  /** Default uniform CSS-pixel inset reserved around bounds when fitting content. */
+  "fit-inset"?: number;
+  /** CSS-pixel pointer movement required before a pointer pan begins. */
+  "drag-threshold"?: number;
+  /** Horizontal content-space coordinate at the viewport origin. */
+  x?: number;
+  /** Vertical content-space coordinate at the viewport origin. */
+  y?: number;
+  /** Content-to-viewport CSS-pixel scale. */
+  scale?: number;
+  /** Inclusive lower scale limit. */
+  minScale?: number;
+  /** Inclusive upper scale limit. */
+  maxScale?: number;
+  /** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */
+  behaviorPan?: boolean | "space";
+  /** Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. */
+  behaviorZoom?: boolean;
+  /** Fits measurable direct default-slot content once after initial layout. */
+  autoFit?: boolean;
+  /** Default uniform CSS-pixel inset reserved around bounds when fitting content. */
+  fitInset?: number;
+  /** CSS-pixel pointer movement required before a pointer pan begins. */
+  dragThreshold?: number;
+  /** Dispatched once after a render that commits one or more viewport transform changes. */
+  onviewportchange?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  ontype?: (e: CustomEvent<CustomEvent>) => void;
+  /** Dispatched when pointer movement crosses the pan threshold. Cancel to disable built-in pointer panning for the sequence. */
+  onpanstart?: (e: CustomEvent<never>) => void;
+  /** Dispatched when pointer, wheel, keyboard, or command input requests a pan. Cancel to skip the proposed transform mutation. */
+  onpan?: (e: CustomEvent<never>) => void;
+  /** Dispatched when a pointer pan ends, including its terminal reason. */
+  onpanend?: (e: CustomEvent<never>) => void;
+  /** Dispatched when wheel, pinch, or command input requests a scale change. Cancel to skip the proposed transform mutation. */
+  onzoom?: (e: CustomEvent<never>) => void;
+};
+
 type WeekProps = {
   /** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
 Use when embedding within another container such as a toolbar. */
@@ -6121,7 +6183,9 @@ export type CustomElements = {
    *  - **reset()** - Resets control value to initial attribute value and clears any active validation rules.
    *
    * ### **Slots:**
-   *  - _default_ - Control input element
+   *  - **prefix** - Content to display before the textarea.
+   * - **suffix** - Content to display after the textarea.
+   * - _default_ - Control input element
    * - **label** - Label element
    *
    * ### **CSS Properties:**
@@ -6389,6 +6453,51 @@ export type CustomElements = {
    */
   "nve-tree": DefineComponent<TreeProps>;
 
+  /**
+   * Renders origin-stable, zoom-adaptive gridlines behind viewport content.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--color** - Sets the gridline stroke color. _(default: undefined)_
+   * - **--line-width** - Sets the approximate stroke width in CSS pixels. _(default: undefined)_
+   */
+  "nve-viewport-gridlines": DefineComponent<ViewportGridlinesProps>;
+
+  /**
+   * A viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **viewportchange** - Dispatched once after a render that commits one or more viewport transform changes.
+   * - **type**
+   * - **panstart** - Dispatched when pointer movement crosses the pan threshold. Cancel to disable built-in pointer panning for the sequence.
+   * - **pan** - Dispatched when pointer, wheel, keyboard, or command input requests a pan. Cancel to skip the proposed transform mutation.
+   * - **panend** - Dispatched when a pointer pan ends, including its terminal reason.
+   * - **zoom** - Dispatched when wheel, pinch, or command input requests a scale change. Cancel to skip the proposed transform mutation.
+   *
+   * ### **Methods:**
+   *  - **toViewportCoords(contentX: _number_, contentY: _number_): _ViewportPoint_** - Converts a content-space point to viewport CSS pixels.
+   * - **toContentCoords(viewportX: _number_, viewportY: _number_): _ViewportPoint_** - Converts a viewport CSS-pixel point to content space.
+   * - **getTransform(): _ViewportTransform_** - Returns the current content-space origin and CSS-pixel scale.
+   * - **getVisibleRect(): _ViewportRect_** - Returns the visible content-space rectangle.
+   * - **animateTo(target: _Partial<ViewportTransform>_, options: _ViewportAnimationOptions_): _void_** - Animates the viewport to the requested partial transform.
+   * - **reveal(region: _{ x: number; y: number; width?: number; height?: number }_, options: _ViewportRevealOptions_): _void_** - Centers or fits a content-space region within the viewport.
+   * - **fitContents(options: _ViewportRevealOptions_): _void_** - Fits the union of direct default-slot element boxes within the viewport.
+   *
+   * ### **Slots:**
+   *  - _default_ - Content positioned in the viewport's infinite content space.
+   * - **background** - Custom content rendered behind viewport content and excluded from content fitting
+   *
+   * ### **CSS Properties:**
+   *  - **--background** - Background color of the fixed viewport area. _(default: undefined)_
+   * - **--min-height** - undefined _(default: undefined)_
+   * - **--pan-cursor** - Cursor shown over a background eligible for primary-pointer panning. _(default: undefined)_
+   * - **--panning-cursor** - Cursor shown while a pointer pan is active. _(default: undefined)_
+   */
+  "nve-viewport": DefineComponent<ViewportProps>;
+
   /**
    * A week picker is a control that enables users to choose a week value.
    * ---