@nvidia-elements/core 2.12.0 → 2.12.2

package/dist/page-loader/page-loader.examples.json

@@ -14,7 +14,7 @@
     {
       "id": "page-loader-interactive",
       "name": "Interactive",
-      "template": "<nve-button id=\"loader-btn\">trigger loader</nve-button>\n<nve-page-loader hidden></nve-page-loader>\n<script type=\"module\">\n  let loader = document.querySelector(\"nve-page-loader\");\n  let btn = document.querySelector(\"#loader-btn\");\n  btn.addEventListener(\"click\", () => (loader.hidden = false));\n</script>\n",
+      "template": "<nve-button id=\"loader-btn\">trigger loader</nve-button>\n<nve-page-loader hidden></nve-page-loader>\n\n<script type=\"module\">\n  let loader = document.querySelector(\"nve-page-loader\");\n  let btn = document.querySelector(\"#loader-btn\");\n  btn.addEventListener(\"click\", () => (loader.hidden = false));\n</script>\n",
       "summary": "Interactive page loader that starts programmatically via button click. Use when user actions such as form submissions, data refreshes, or navigation events start loading states rather than on initial page load.",
       "description": "",
       "composition": false,

package/dist/page-loader/page-loader2.js

@@ -18,7 +18,7 @@ var u = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-page-loader",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	static {

package/dist/pagination/pagination.examples.json

@@ -59,7 +59,7 @@
     {
       "id": "pagination-forms",
       "name": "Forms",
-      "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" items=\"100\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <nve-button>submit page 10</nve-button>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"change\", updateValues);\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"submit\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n  function updateValues(e) {\n    e.preventDefault();\n    console.log(e);\n    pre.innerText = JSON.stringify({ ...Object.fromEntries(new FormData(form)), step: form.elements.page.step }, null, 2);\n  }\n</script>\n",
+      "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" items=\"100\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <nve-button>submit page 10</nve-button>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n\n  form.addEventListener(\"change\", updateValues);\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"submit\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n\n  function updateValues(e) {\n    e.preventDefault();\n    console.log(e);\n    pre.innerText = JSON.stringify({ ...Object.fromEntries(new FormData(form)), step: form.elements.page.step }, null, 2);\n  }\n</script>\n",
       "summary": "Pagination as a form associated component that participates in form submission and emits change, input, and step-change events. Use when page selection needs to integrate with form data collection or server-side form handling.",
       "description": "",
       "composition": false,
@@ -86,7 +86,7 @@
     {
       "id": "pagination-dynamic-items",
       "name": "DynamicItems",
-      "template": "<nve-pagination disable-step container=\"inline\" value=\"1\" items=\"100\" step=\"20\"></nve-pagination>\n<script type=\"module\">\n  const pagination = document.querySelector(\"nve-pagination\");\n  let items = loadItems();\n  pagination.addEventListener(\"last-page\", async () => {\n    items = [...items, ...loadItems()];\n    pagination.items = items.length;\n  });\n  function loadItems() {\n    return new Array(100).fill(\"\");\n  }\n</script>\n",
+      "template": "<nve-pagination disable-step container=\"inline\" value=\"1\" items=\"100\" step=\"20\"></nve-pagination>\n\n<script type=\"module\">\n  const pagination = document.querySelector(\"nve-pagination\");\n  let items = loadItems();\n\n  pagination.addEventListener(\"last-page\", async () => {\n    items = [...items, ...loadItems()];\n    pagination.items = items.length;\n  });\n\n  function loadItems() {\n    return new Array(100).fill(\"\");\n  }\n</script>\n",
       "summary": "If the upper bound of items is unknown, use the `last-page` event to determine when to load more data and update the pagination with the latest total of items.",
       "description": "",
       "composition": false,

package/dist/pagination/pagination2.js

@@ -21,7 +21,7 @@ var g = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-pagination",
-			version: "2.12.0",
+			version: "2.12.2",
 			valueSchema: { type: "number" }
 		};
 	}

package/dist/panel/panel.examples.json

@@ -5,7 +5,7 @@
     {
       "id": "panel",
       "name": "Default",
-      "template": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n",
+      "template": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n",
       "summary": "Basic panel layout with header showing session details and metadata in a collapsible side panel.",
       "description": "",
       "composition": false,
@@ -14,7 +14,7 @@
     {
       "id": "panel-left-side-panel",
       "name": "LeftSidePanel",
-      "template": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n",
+      "template": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n",
       "summary": "Left-positioned collapsible panel for sidebar navigation and content details.",
       "description": "",
       "composition": false,
@@ -25,7 +25,7 @@
     {
       "id": "panel-right-side-panel",
       "name": "RightSidePanel",
-      "template": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"right\" style=\"width: 280px; height: 550px\">\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n",
+      "template": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"right\" style=\"width: 280px; height: 550px\">\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n",
       "summary": "Right-positioned collapsible panel for supplementary content and property inspectors.",
       "description": "",
       "composition": false,
@@ -36,7 +36,7 @@
     {
       "id": "panel-closable-panel",
       "name": "ClosablePanel",
-      "template": "<section nve-layout=\"row align:space-between pad:sm full\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand id=\"trigger-closable-false\" expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n  <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n</section>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const panel = document.querySelector(\"nve-panel\");\n    panel.expanded = !panel.expanded;\n  });\n</script>\n",
+      "template": "<section nve-layout=\"row align:space-between pad:sm full\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand id=\"trigger-closable-false\" expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n\n  <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n</section>\n\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const panel = document.querySelector(\"nve-panel\");\n    panel.expanded = !panel.expanded;\n  });\n</script>\n",
       "summary": "Closable panel with external toggle button for programmatic show/hide control.",
       "description": "",
       "composition": true,
@@ -47,7 +47,7 @@
     {
       "id": "panel-with-trigger",
       "name": "WithTrigger",
-      "template": "<section nve-layout=\"row align:space-between pad:sm full\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded closable side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n  <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n</section>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const panel = document.querySelector(\"nve-panel\");\n    panel.expanded = !panel.expanded;\n  });\n</script>\n",
+      "template": "<section nve-layout=\"row align:space-between pad:sm full\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded closable side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n\n  <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n</section>\n\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n\n  button.addEventListener(\"click\", () => {\n    const panel = document.querySelector(\"nve-panel\");\n    panel.expanded = !panel.expanded;\n  });\n</script>\n",
       "summary": "Collapsible panel with built-in close button and external toggle for flexible expand/collapse behavior.",
       "description": "",
       "composition": true,
@@ -58,7 +58,7 @@
     {
       "id": "panel-with-full-header",
       "name": "WithFullHeader",
-      "template": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\">Subtitle</div>\n        <nve-icon-button container=\"flat\" slot=\"action-icon\" icon-name=\"more-actions\"></nve-icon-button>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n",
+      "template": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\">Subtitle</div>\n\n        <nve-icon-button container=\"flat\" slot=\"action-icon\" icon-name=\"more-actions\"></nve-icon-button>\n      </nve-panel-header>\n\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n",
       "summary": "Panel with complete header including title, subtitle, and action icon slots for rich header content.",
       "description": "",
       "composition": true,
@@ -69,7 +69,7 @@
     {
       "id": "panel-with-footer",
       "name": "WithFooter",
-      "template": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 600px\">\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n      <nve-panel-footer>\n        <nve-button interaction=\"destructive\" container=\"flat\">Destructive</nve-button>\n        <nve-button>Default</nve-button>\n      </nve-panel-footer>\n    </nve-panel>\n  </div>\n</section>\n",
+      "template": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 600px\">\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n\n      <nve-panel-footer>\n        <nve-button interaction=\"destructive\" container=\"flat\">Destructive</nve-button>\n        <nve-button>Default</nve-button>\n      </nve-panel-footer>\n    </nve-panel>\n  </div>\n</section>\n",
       "summary": "Panel with footer containing action buttons for form submissions and destructive actions.",
       "description": "",
       "composition": true,

package/dist/panel/panel2.js

@@ -21,7 +21,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel-header",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel-content",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	render() {
@@ -50,7 +50,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel-footer",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	render() {
@@ -69,7 +69,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	static {

package/dist/password/password.examples.json

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

package/dist/password/password2.js

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

package/dist/preferences-input/preferences-input.examples.json

@@ -14,7 +14,7 @@
     {
       "id": "preferences-input-forms",
       "name": "Forms",
-      "template": "<form id=\"preferences-input-form\" nve-layout=\"row gap:md\">\n  <div nve-layout=\"column gap:md\">\n    <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"light\" }'></nve-preferences-input>\n    <nve-button>submit</nve-button>\n  </div>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const preferencesInput = document.querySelector(\"nve-preferences-input\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"change\", renderValues);\n  form.addEventListener(\"input\", renderValues);\n  form.addEventListener(\"submit\", renderValues);\n  pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n\n  function renderValues(e) {\n    e.preventDefault();\n    console.log(e);\n    pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n  }\n</script>\n",
+      "template": "<form id=\"preferences-input-form\" nve-layout=\"row gap:md\">\n  <div nve-layout=\"column gap:md\">\n    <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"light\" }'></nve-preferences-input>\n    <nve-button>submit</nve-button>\n  </div>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const preferencesInput = document.querySelector(\"nve-preferences-input\");\n  const pre = document.querySelector(\"form pre\");\n\n  form.addEventListener(\"change\", renderValues);\n  form.addEventListener(\"input\", renderValues);\n  form.addEventListener(\"submit\", renderValues);\n  pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n\n  function renderValues(e) {\n    e.preventDefault();\n    console.log(e);\n    pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n  }\n</script>\n",
       "summary": "Preferences input integrated with form submission, displaying live JSON value updates.",
       "description": "",
       "composition": false,

package/dist/preferences-input/preferences-input2.js

@@ -43,7 +43,7 @@ var x = class extends g(d) {
 	static {
 		this.metadata = {
 			tag: "nve-preferences-input",
-			version: "2.12.0",
+			version: "2.12.2",
 			valueSchema: {
 				type: "object",
 				properties: {

package/dist/progress-bar/progress-bar2.js

@@ -16,7 +16,7 @@ var c = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-progress-bar",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	render() {

package/dist/progress-ring/progress-ring.examples.json

@@ -14,7 +14,7 @@
     {
       "id": "progress-ring-values",
       "name": "Values",
-      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"0\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"33\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"100\"></nve-progress-ring>\n</div>\n",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" value=\"0\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" value=\"33\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" value=\"100\"></nve-progress-ring>\n</div>\n",
       "summary": "Progress rings displaying completion percentages from indeterminate to 0%, 33%, 66%, and 100%.",
       "description": "",
       "composition": false,
@@ -25,7 +25,7 @@
     {
       "id": "progress-ring-max",
       "name": "Max",
-      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"5\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"10\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"15\"></nve-progress-ring>\n</div>\n",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"5\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"10\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"15\"></nve-progress-ring>\n</div>\n",
       "summary": "Progress rings with custom max values for proportional progress within a defined scale.",
       "description": "",
       "composition": false,
@@ -36,7 +36,7 @@
     {
       "id": "progress-ring-status",
       "name": "Status",
-      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"warning\" value=\"75\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" value=\"75\"></nve-progress-ring>\n  <nve-progress-ring status=\"warning\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\"></nve-progress-ring>\n</div>\n",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"warning\" value=\"75\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"danger\" value=\"75\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"warning\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"danger\"></nve-progress-ring>\n</div>\n",
       "summary": "Progress rings with warning and danger status colors for indicating critical or cautionary states.",
       "description": "",
       "composition": false,
@@ -65,7 +65,7 @@
     {
       "id": "progress-ring-sizing",
       "name": "Sizing",
-      "template": "<div nve-layout=\"row gap:sm pad:md\">\n  <nve-progress-ring status=\"accent\" size=\"xxs\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"sm\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"md\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"lg\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"xl\"></nve-progress-ring>\n</div>\n<div nve-layout=\"row gap:sm pad:md\">\n  <nve-progress-ring status=\"danger\" size=\"xxs\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"xs\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"sm\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"md\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"lg\"></nve-progress-ring>\n</div>\n",
+      "template": "<div nve-layout=\"row gap:sm pad:md\">\n  <nve-progress-ring status=\"accent\" size=\"xxs\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"sm\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"md\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"lg\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"xl\"></nve-progress-ring>\n</div>\n\n<div nve-layout=\"row gap:sm pad:md\">\n  <nve-progress-ring status=\"danger\" size=\"xxs\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"xs\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"sm\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"md\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"lg\"></nve-progress-ring>\n</div>\n",
       "summary": "Progress rings in many sizes from extra-extra-small to extra-large for different UI contexts.",
       "description": "",
       "composition": false,
@@ -76,7 +76,7 @@
     {
       "id": "progress-ring-with-button",
       "name": "WithButton",
-      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-button>\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"emphasis\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"destructive\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button>\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"emphasis\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"destructive\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n</div>\n",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-button>\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n\n  <nve-button interaction=\"emphasis\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n\n  <nve-button interaction=\"destructive\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n\n  <nve-button>\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n\n  <nve-button interaction=\"emphasis\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n\n  <nve-button interaction=\"destructive\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n</div>\n",
       "summary": "Progress rings integrated within buttons to show loading states during actions and operations.",
       "description": "",
       "composition": false,

package/dist/progress-ring/progress-ring2.js

@@ -19,7 +19,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-progress-ring",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	static {

package/dist/progressive-filter-chip/progressive-filter-chip.examples.json

@@ -59,7 +59,7 @@
     {
       "id": "progressive-filter-chip-validation",
       "name": "Validation",
-      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-progressive-filter-chip closable>\n    <nve-input>\n      <input type=\"text\" value=\"validation\" required aria-label=\"validation\" />\n      <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n  <nve-progressive-filter-chip closable>\n    <nve-input status=\"error\">\n      <input type=\"text\" value=\"manual validation\" formnovalidate aria-label=\"manual validation\" />\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-progressive-filter-chip closable>\n    <nve-input>\n      <input type=\"text\" value=\"validation\" required aria-label=\"validation\" />\n      <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n\n  <nve-progressive-filter-chip closable>\n    <nve-input status=\"error\">\n      <input type=\"text\" value=\"manual validation\" formnovalidate aria-label=\"manual validation\" />\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n</div>\n",
       "summary": "Progressive filter chip with input validation states showing required field and error styling.",
       "description": "",
       "composition": true,

package/dist/progressive-filter-chip/progressive-filter-chip2.js

@@ -23,7 +23,7 @@ var b = class extends h {
 	static {
 		this.metadata = {
 			tag: "nve-progressive-filter-chip",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	static {

package/dist/pulse/pulse2.js

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

package/dist/radio/radio-group2.js

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

package/dist/radio/radio.examples.json

@@ -5,7 +5,7 @@
     {
       "id": "radio",
       "name": "Default",
-      "template": "<nve-radio-group>\n  <label>label</label>\n  <nve-radio>\n    <label>radio 1</label>\n    <input type=\"radio\" checked />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 2</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 3</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-control-message>message</nve-control-message>\n</nve-radio-group>\n",
+      "template": "<nve-radio-group>\n  <label>label</label>\n  <nve-radio>\n    <label>radio 1</label>\n    <input type=\"radio\" checked />\n  </nve-radio>\n\n  <nve-radio>\n    <label>radio 2</label>\n    <input type=\"radio\" />\n  </nve-radio>\n\n  <nve-radio>\n    <label>radio 3</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-control-message>message</nve-control-message>\n</nve-radio-group>\n",
       "summary": "Basic radio button group for mutually exclusive single-choice selection from many options.",
       "description": "",
       "composition": false,
@@ -14,7 +14,7 @@
     {
       "id": "radio-vertical-group",
       "name": "VerticalGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group>\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group>\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
       "summary": "Radio groups with vertical layout including validation states for disabled, success, and error.",
       "description": "",
       "composition": false,
@@ -23,7 +23,7 @@
     {
       "id": "radio-vertical-inline-group",
       "name": "VerticalInlineGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
       "summary": "Radio groups with vertical inline layout for compact vertical stacking with inline label positioning.",
       "description": "",
       "composition": false,
@@ -34,7 +34,7 @@
     {
       "id": "radio-horizontal-group",
       "name": "HorizontalGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
       "summary": "Radio groups with horizontal layout for options arranged in a row, ideal for limited choices.",
       "description": "",
       "composition": false,
@@ -45,7 +45,7 @@
     {
       "id": "radio-horizontal-inline-group",
       "name": "HorizontalInlineGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
       "summary": "Radio groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",
       "description": "",
       "composition": false,

package/dist/radio/radio2.js

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

package/dist/range/range.examples.json

@@ -41,7 +41,7 @@
     {
       "id": "range-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-range>\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-range>\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>\n",
       "summary": "Vertical layout configuration for stacked form arrangements, displaying label, slider, and message in a column format with support for states including disabled, success, and error feedback.",
       "description": "",
       "composition": false,
@@ -52,7 +52,7 @@
     {
       "id": "range-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-range layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-range layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>\n",
       "summary": "Horizontal layout configuration for inline form arrangements, positioning label and slider side-by-side for compact displays with support for states including disabled, success, and error feedback.",
       "description": "",
       "composition": false,

package/dist/range/range2.js

@@ -17,7 +17,7 @@ var d = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-range",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	connectedCallback() {

package/dist/resize-handle/resize-handle.examples.json

@@ -41,7 +41,7 @@
     {
       "id": "resize-handle-form",
       "name": "Form",
-      "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const split = document.querySelector(\"#form-demo section\");\n  const handle = document.querySelector(\"#form-demo nve-resize-handle\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form);\n  });\n  handle.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    console.log(\"input\", e.target.value);\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
+      "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const split = document.querySelector(\"#form-demo section\");\n  const handle = document.querySelector(\"#form-demo nve-resize-handle\");\n\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form);\n  });\n\n  handle.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n  });\n\n  handle.addEventListener(\"input\", (e) => {\n    console.log(\"input\", e.target.value);\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
       "summary": "Resize handle as a form control with name attribute for submitting resize values.",
       "description": "",
       "composition": false,
@@ -50,7 +50,7 @@
     {
       "id": "resize-handle-prevent",
       "name": "PreventDefault",
-      "template": "<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector(\"#prevent-default-demo section\");\n  const handle = document.querySelector(\"#prevent-default-demo nve-resize-handle\");\n  handle.addEventListener(\"toggle\", (e) => {\n    e.preventDefault();\n    console.log(\"toggle defaultPrevented:\", e.defaultPrevented);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
+      "template": "<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector(\"#prevent-default-demo section\");\n  const handle = document.querySelector(\"#prevent-default-demo nve-resize-handle\");\n\n  handle.addEventListener(\"toggle\", (e) => {\n    e.preventDefault();\n    console.log(\"toggle defaultPrevented:\", e.defaultPrevented);\n  });\n\n  handle.addEventListener(\"input\", (e) => {\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
       "summary": "Resize handle with prevented default toggle to disable snap-to-boundary on double-click. Use when the default collapse/expand behavior conflicts with custom resize constraints or when you need full control over toggle logic.",
       "description": "",
       "composition": false,

package/dist/resize-handle/resize-handle2.js

@@ -18,7 +18,7 @@ var u = class extends c(a) {
 	static {
 		this.metadata = {
 			tag: "nve-resize-handle",
-			version: "2.12.0",
+			version: "2.12.2",
 			valueSchema: { type: "number" }
 		};
 	}