@nvidia-elements/core 2.8.0 → 2.8.1

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.8.1"
 		};
 	}
 	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.8.1",
 			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.8.1"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "2.8.0",
+			version: "2.8.1",
 			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.8.1",
 			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.8.1",
 			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.8.1"
 		};
 	}
 	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.8.1",
 			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.8.1",
 			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.8.1"
 		};
 	}
 	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.8.1"
 		};
 	}
 	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.8.1"
 		};
 	}
 	static {

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

@@ -6363,7 +6363,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:**

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

@@ -6121,7 +6121,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:**