@nvidia-elements/core 2.11.2 → 2.12.1

package/dist/button/button.examples.json

@@ -153,7 +153,7 @@
     {
       "id": "button-form-submit",
       "name": "FormSubmit",
-      "template": "<form id=\"test-form\">\n  <nve-button name=\"test-button\" value=\"test-value\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#test-form\");\n  const button = document.querySelector('[name=\"test-button\"]');\n  button.addEventListener(\"click\", (e) => console.log(e));\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form, e.submitter)));\n  });\n</script>\n",
+      "template": "<form id=\"test-form\">\n  <nve-button name=\"test-button\" value=\"test-value\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#test-form\");\n  const button = document.querySelector('[name=\"test-button\"]');\n\n  button.addEventListener(\"click\", (e) => console.log(e));\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form, e.submitter)));\n  });\n</script>\n",
       "summary": "Form submission button with proper form integration and data handling for user input processing.",
       "description": "",
       "composition": false,
@@ -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(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",
+      "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\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\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% / 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\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\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.11.2"
+			version: "2.12.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.11.2",
+			version: "2.12.1",
 			children: [
 				"nve-button",
 				"nve-icon-button",

package/dist/card/card.examples.json

@@ -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\">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",
+      "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\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\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,
@@ -81,7 +81,7 @@
     {
       "id": "card-audit",
       "name": "Audit",
-      "template": "<!-- invalid padding usage -->\n<nve-card nve-layout=\"pad:md\"></nve-card>\n<!-- invalid parent element -->\n<nve-card-header> card header </nve-card-header>\n<nve-card-content> card content </nve-card-content>\n<nve-card-footer> card footer </nve-card-footer>\n",
+      "template": "<!-- invalid padding usage -->\n<nve-card nve-layout=\"pad:md\"></nve-card>\n\n<!-- invalid parent element -->\n<nve-card-header> card header </nve-card-header>\n<nve-card-content> card content </nve-card-content>\n<nve-card-footer> card footer </nve-card-footer>\n",
       "summary": "Examples of invalid card usage patterns for testing and documentation purposes, showing what not to do when implementing cards.",
       "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.11.2"
+			version: "2.12.1"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "2.11.2",
+			version: "2.12.1",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "2.11.2",
+			version: "2.12.1",
 			parents: ["nve-card"]
 		};
 	}
@@ -72,7 +72,7 @@ var m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "2.11.2",
+			version: "2.12.1",
 			parents: ["nve-card"]
 		};
 	}

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

@@ -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 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\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,

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.11.2"
+			version: "2.12.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.11.2",
+			version: "2.12.1",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/checkbox/checkbox.examples.json

@@ -14,7 +14,7 @@
     {
       "id": "checkbox-states",
       "name": "States",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n  <nve-checkbox>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n  <nve-checkbox>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-checkbox>\n  <nve-checkbox>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-checkbox>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n\n  <nve-checkbox>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n\n  <nve-checkbox>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-checkbox>\n\n  <nve-checkbox>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-checkbox>\n</div>\n",
       "summary": "Checkbox states including default, disabled, success, and error with control messages for validation feedback.",
       "description": "",
       "composition": false,
@@ -23,7 +23,7 @@
     {
       "id": "checkbox-vertical-group",
       "name": "VerticalGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group>\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group>\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group>\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group>\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group>\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group>\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group>\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group>\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
       "summary": "Checkbox group with vertical layout for related options stacked in a column with validation states.",
       "description": "",
       "composition": false,
@@ -32,7 +32,7 @@
     {
       "id": "checkbox-vertical-inline-group",
       "name": "VerticalInlineGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
       "summary": "Checkbox group with vertical inline layout for compact vertical stacking with inline label positioning.",
       "description": "",
       "composition": false,
@@ -43,7 +43,7 @@
     {
       "id": "checkbox-horizontal-group",
       "name": "HorizontalGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
       "summary": "Checkbox group with horizontal layout for related options arranged in a row, ideal for limited choices.",
       "description": "",
       "composition": false,
@@ -54,7 +54,7 @@
     {
       "id": "checkbox-horizontal-inline-group",
       "name": "HorizontalInlineGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
       "summary": "Checkbox group with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",
       "description": "",
       "composition": false,

package/dist/checkbox/checkbox2.js

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

package/dist/color/color.examples.json

@@ -23,7 +23,7 @@
     {
       "id": "color-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-color>\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n  <nve-color>\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n  <nve-color>\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n  <nve-color>\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-color>\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>\n",
       "summary": "Color pickers with vertical layout including validation states for disabled, success, and error.",
       "description": "",
       "composition": false,
@@ -34,7 +34,7 @@
     {
       "id": "color-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-color layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n  <nve-color layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n  <nve-color layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n  <nve-color layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-color layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>\n",
       "summary": "Color pickers with horizontal layout showing validation states for inline forms and compact layouts.",
       "description": "",
       "composition": false,

package/dist/color/color2.js

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

package/dist/combobox/combobox.examples.json

@@ -14,7 +14,7 @@
     {
       "id": "combobox-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\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    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox>\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox>\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\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    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>\n",
       "summary": "Vertical layout showing different combobox states (normal, disabled, success, error) stacked for comparison.",
       "description": "",
       "composition": false,
@@ -25,7 +25,7 @@
     {
       "id": "combobox-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-combobox layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\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    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-combobox layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\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    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\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    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>\n",
       "summary": "Horizontal layout showing different combobox states (normal, disabled, success, error) for inline form layouts.",
       "description": "",
       "composition": false,
@@ -148,7 +148,7 @@
     {
       "id": "combobox-select-all",
       "name": "SelectAll",
-      "template": "<nve-combobox id=\"combobox-select-all\" style=\"width: 500px; --scroll-height: 200px\">\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  <div slot=\"footer\" nve-layout=\"row align:stretch full\">\n    <nve-button container=\"flat\">Select All</nve-button>\n    <nve-button container=\"flat\">Deselect All</nve-button>\n  </div>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.querySelector(\"#combobox-select-all\");\n  const [selectAll, deselectAll] = Array.from(combobox.querySelectorAll(\"nve-button\"));\n  selectAll.addEventListener(\"click\", () => combobox.selectAll());\n  deselectAll.addEventListener(\"click\", () => combobox.reset());\n  combobox.addEventListener(\"change\", (e) => console.log(e.target.selectedOptions));\n</script>\n",
+      "template": "<nve-combobox id=\"combobox-select-all\" style=\"width: 500px; --scroll-height: 200px\">\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  <div slot=\"footer\" nve-layout=\"row align:stretch full\">\n    <nve-button container=\"flat\">Select All</nve-button>\n    <nve-button container=\"flat\">Deselect All</nve-button>\n  </div>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.querySelector(\"#combobox-select-all\");\n  const [selectAll, deselectAll] = Array.from(combobox.querySelectorAll(\"nve-button\"));\n\n  selectAll.addEventListener(\"click\", () => combobox.selectAll());\n  deselectAll.addEventListener(\"click\", () => combobox.reset());\n  combobox.addEventListener(\"change\", (e) => console.log(e.target.selectedOptions));\n</script>\n",
       "summary": "Multi-select with bulk selection controls (Select All/Deselect All) in footer for efficient mass operations.",
       "description": "",
       "composition": true,
@@ -175,7 +175,7 @@
     {
       "id": "combobox-create-options",
       "name": "CreateOptions",
-      "template": "<nve-combobox id=\"creatable-combo\" behavior-create style=\"--scroll-height: 220px\">\n  <label>Tags</label>\n  <input type=\"search\" placeholder=\"Select or create a tag…\" />\n  <select multiple>\n    <option value=\"Go\">Go</option>\n    <option value=\"Rust\">Rust</option>\n    <option value=\"Python\">Python</option>\n    <option value=\"JavaScript\">JavaScript</option>\n    <option value=\"TypeScript\">TypeScript</option>\n    <option value=\"Java\">Java</option>\n    <option value=\"C#\">C#</option>\n    <option value=\"C++\">C++</option>\n    <option value=\"C\">C</option>\n    <option value=\"PHP\">PHP</option>\n  </select>\n  <nve-control-message>Press Enter to create a tag that doesn't exist yet</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.getElementById(\"creatable-combo\");\n  const select = combobox.querySelector(\"select\");\n  combobox.addEventListener(\"create\", (e) => {\n    const option = document.createElement(\"option\");\n    option.value = e.detail.value;\n    option.textContent = e.detail.value;\n    option.selected = true;\n    select.appendChild(option);\n  });\n</script>\n",
+      "template": "<nve-combobox id=\"creatable-combo\" behavior-create style=\"--scroll-height: 220px\">\n  <label>Tags</label>\n  <input type=\"search\" placeholder=\"Select or create a tag…\" />\n  <select multiple>\n    <option value=\"Go\">Go</option>\n    <option value=\"Rust\">Rust</option>\n    <option value=\"Python\">Python</option>\n    <option value=\"JavaScript\">JavaScript</option>\n    <option value=\"TypeScript\">TypeScript</option>\n    <option value=\"Java\">Java</option>\n    <option value=\"C#\">C#</option>\n    <option value=\"C++\">C++</option>\n    <option value=\"C\">C</option>\n    <option value=\"PHP\">PHP</option>\n  </select>\n  <nve-control-message>Press Enter to create a tag that doesn't exist yet</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.getElementById(\"creatable-combo\");\n  const select = combobox.querySelector(\"select\");\n\n  combobox.addEventListener(\"create\", (e) => {\n    const option = document.createElement(\"option\");\n    option.value = e.detail.value;\n    option.textContent = e.detail.value;\n    option.selected = true;\n    select.appendChild(option);\n  });\n</script>\n",
       "summary": "Combobox with create option behavior that allows users to add new options and tags on the fly. Use when the option list is not exhaustive and users need to enter values that don't yet exist.",
       "description": "",
       "composition": false,
@@ -186,7 +186,7 @@
     {
       "id": "combobox-form",
       "name": "Form",
-      "template": "<form nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox style=\"--scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\" name=\"input\" />\n    <select multiple name=\"select\" value=\"priority\">\n      <option value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <div nve-layout=\"row gap:xs\">\n    <nve-button type=\"button\">set</nve-button>\n    <nve-button type=\"reset\">reset</nve-button>\n    <nve-button type=\"submit\">submit</nve-button>\n  </div>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const select = document.querySelector(\"select\");\n  const input = document.querySelector(\"input\");\n  const btn = document.querySelector(\"[type=button]\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(form);\n    console.log(\"input: \", formData.get(\"input\"));\n    console.log(\"select: \", formData.get(\"select\"));\n    console.log(\n      \"selectedOptions: \",\n      Array.from(select.selectedOptions).map((o) => o.value),\n    );\n  });\n  btn.addEventListener(\"click\", () => {\n    select.value = \"status\";\n    select.options[0].selected = true;\n    input.value = \"test\";\n  });\n</script>\n",
+      "template": "<form nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox style=\"--scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\" name=\"input\" />\n    <select multiple name=\"select\" value=\"priority\">\n      <option value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <div nve-layout=\"row gap:xs\">\n    <nve-button type=\"button\">set</nve-button>\n    <nve-button type=\"reset\">reset</nve-button>\n    <nve-button type=\"submit\">submit</nve-button>\n  </div>\n</form>\n\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const select = document.querySelector(\"select\");\n  const input = document.querySelector(\"input\");\n  const btn = document.querySelector(\"[type=button]\");\n\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(form);\n    console.log(\"input: \", formData.get(\"input\"));\n    console.log(\"select: \", formData.get(\"select\"));\n    console.log(\n      \"selectedOptions: \",\n      Array.from(select.selectedOptions).map((o) => o.value),\n    );\n  });\n\n  btn.addEventListener(\"click\", () => {\n    select.value = \"status\";\n    select.options[0].selected = true;\n    input.value = \"test\";\n  });\n</script>\n",
       "summary": "Complete form integration showing combobox with form submission, reset, and programmatic value setting.",
       "description": "",
       "composition": true,
@@ -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([\"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",
+      "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\n<script type=\"module\">\n  const combobox = document.getElementById(\"combobox\");\n  const input = combobox.querySelector(\"input\");\n  const datalist = combobox.querySelector(\"datalist\");\n\n  let controller = null;\n  input.addEventListener(\"input\", async () => {\n    if (controller) controller.abort();\n    controller = new AbortController();\n\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\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) => 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",
+      "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\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\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\n  loadBatch();\n\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.11.2"
+			version: "2.12.1"
 		};
 	}
 	static {

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

@@ -74,7 +74,7 @@
     {
       "id": "copy-button-async-copy",
       "name": "AsyncCopy",
-      "template": "<nve-copy-button id=\"async-copy-button\" value=\"initial value\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n<script type=\"module\">\n  const button = document.querySelector(\"#async-copy-button\");\n  button.addEventListener(\"pointerdown\", () => {\n    button.disabled = true;\n    // do an async operation\n    new Promise((resolve) => setTimeout(resolve, 2000)).then(() => {\n      button.value = \"async value\";\n      button.disabled = false;\n      button.dispatchEvent(new Event(\"click\"));\n    });\n  });\n</script>\n",
+      "template": "<nve-copy-button id=\"async-copy-button\" value=\"initial value\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n\n<script type=\"module\">\n  const button = document.querySelector(\"#async-copy-button\");\n  button.addEventListener(\"pointerdown\", () => {\n    button.disabled = true;\n\n    // do an async operation\n    new Promise((resolve) => setTimeout(resolve, 2000)).then(() => {\n      button.value = \"async value\";\n      button.disabled = false;\n      button.dispatchEvent(new Event(\"click\"));\n    });\n  });\n</script>\n",
       "summary": "Advanced pattern for handling long-running copy to clipboard operations.",
       "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.11.2"
+			version: "2.12.1"
 		};
 	}
 	static {

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

@@ -4039,6 +4039,8 @@ export type ViewportGridlinesProps = {
   "origin-y"?: number;
   /** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */
   "target-spacing"?: number;
+  /** Grid pattern to render. */
+  pattern?: "lines" | "dots" | "crosses";
   /** Smallest gridline interval in content-space units. */
   step?: number;
   /** Content-space x coordinate of the grid origin. */
@@ -6758,13 +6760,15 @@ export type CustomElements = {
   "nve-tree": Partial<TreeProps & BaseProps & BaseEvents>;
 
   /**
-   * Renders origin-stable, zoom-adaptive gridlines behind viewport content.
+   * Renders origin-stable, zoom-adaptive gridline patterns behind viewport content.
    * ---
    *
    *
    * ### **CSS Properties:**
-   *  - **--color** - Sets the gridline stroke color. _(default: undefined)_
+   *  - **--color** - Sets the gridline pattern color. _(default: undefined)_
    * - **--line-width** - Sets the approximate stroke width in CSS pixels. _(default: undefined)_
+   * - **--dot-radius** - Sets the approximate dot radius in CSS pixels. _(default: undefined)_
+   * - **--cross-size** - Sets the approximate full width and height of each cross in CSS pixels. _(default: undefined)_
    */
   "nve-viewport-gridlines": Partial<ViewportGridlinesProps & BaseProps & BaseEvents>;
 

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

@@ -3799,6 +3799,8 @@ type ViewportGridlinesProps = {
   "origin-y"?: number;
   /** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */
   "target-spacing"?: number;
+  /** Grid pattern to render. */
+  pattern?: "lines" | "dots" | "crosses";
   /** Smallest gridline interval in content-space units. */
   step?: number;
   /** Content-space x coordinate of the grid origin. */
@@ -6512,13 +6514,15 @@ export type CustomElements = {
   "nve-tree": DefineComponent<TreeProps>;
 
   /**
-   * Renders origin-stable, zoom-adaptive gridlines behind viewport content.
+   * Renders origin-stable, zoom-adaptive gridline patterns behind viewport content.
    * ---
    *
    *
    * ### **CSS Properties:**
-   *  - **--color** - Sets the gridline stroke color. _(default: undefined)_
+   *  - **--color** - Sets the gridline pattern color. _(default: undefined)_
    * - **--line-width** - Sets the approximate stroke width in CSS pixels. _(default: undefined)_
+   * - **--dot-radius** - Sets the approximate dot radius in CSS pixels. _(default: undefined)_
+   * - **--cross-size** - Sets the approximate full width and height of each cross in CSS pixels. _(default: undefined)_
    */
   "nve-viewport-gridlines": DefineComponent<ViewportGridlinesProps>;