@nvidia-elements/core 2.12.0 → 2.12.1

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.12.0"
+			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.12.0"
+			version: "2.12.1"
 		};
 	}
 	static {

package/dist/custom-elements.json

@@ -23778,6 +23778,14 @@
             "module": "/src/icon/icons.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "IconName",
+          "declaration": {
+            "name": "IconName",
+            "module": "../internal/types/icons.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ICON_NAMES_SOLID",
@@ -24087,13 +24095,13 @@
             "themes": true,
             "aria": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input",
             "entrypoint": "@nvidia-elements/core/input",
-            "example": "<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>",
+            "example": "<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/input-group/",
             "since": "0.3.0",
             "status": "stable",
             "behavior": "form",
-            "markdown": "## nve-input-group\n\nVisually combines many related input controls into a unified composite field with shared styling.\n\n### Example\n\n```html\n<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/input/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input elements |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| inputs |  | Returns the input elements associated with the control group. |\n| label |  | Returns the label associated with the control group. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |\n| prominence | `'muted'` | Set the visual prominence of the control group |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
+            "markdown": "## nve-input-group\n\nVisually combines many related input controls into a unified composite field with shared styling.\n\n### Example\n\n```html\n<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/input/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input elements |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| inputs |  | Returns the input elements associated with the control group. |\n| label |  | Returns the label associated with the control group. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |\n| prominence | `'muted'` | Set the visual prominence of the control group |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
           },
           "slots": [
             {
@@ -28036,6 +28044,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "/src/internal/types/icons.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "/src/internal/types/index.js",
@@ -35123,13 +35137,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/panel",
-            "example": "<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>",
+            "example": "<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>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/panel/",
             "since": "0.10.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-panel-header\n\nDisplays the title, subtitle, and optional action controls at the top of a panel.\n\n### Example\n\n```html\n<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```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n| action-icon | `string` | Extra Action Button |\n| subtitle | `string` | Subtitle Text |\n| title | `string` | Title Text |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
+            "markdown": "## nve-panel-header\n\nDisplays the title, subtitle, and optional action controls at the top of a panel.\n\n### Example\n\n```html\n<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```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n| action-icon | `string` | Extra Action Button |\n| subtitle | `string` | Subtitle Text |\n| title | `string` | Title Text |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
           }
         },
         {
@@ -35166,13 +35180,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/panel",
-            "example": "<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>",
+            "example": "<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>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/panel/",
             "since": "0.10.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-panel-content\n\nContains the main body content within a panel, providing a structured region for detailed information.\n\n### Example\n\n```html\n<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```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
+            "markdown": "## nve-panel-content\n\nContains the main body content within a panel, providing a structured region for detailed information.\n\n### Example\n\n```html\n<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```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
           }
         },
         {
@@ -35217,13 +35231,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/panel",
-            "example": "<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>",
+            "example": "<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>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/panel/",
             "since": "0.10.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-panel-footer\n\nProvides a designated area at the bottom of a panel for actions or supplementary controls.\n\n### Example\n\n```html\n<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```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel footer content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
+            "markdown": "## nve-panel-footer\n\nProvides a designated area at the bottom of a panel for actions or supplementary controls.\n\n### Example\n\n```html\n<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```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel footer content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
           }
         },
         {
@@ -35483,13 +35497,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/panel",
-            "example": "<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>",
+            "example": "<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>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/panel/",
             "since": "0.10.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-panel\n\nPanel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).\n\n### Example\n\n```html\n<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```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel content |\n| content | `string` | content element (Use `panel-content` or custom content) |\n| footer | `string` | footer element (Use `panel-footer` or custom content) |\n| header | `string` | header element (Use `panel-header` or custom content) |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| behaviorExpand (behavior-expand) | `boolean` | Determines whether the panel should handle auto-closing behavior vs. defaults to off. |\n| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| side | `'left' \\| 'right'` | Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| close | `CustomEvent` | Dispatched when the panel closes. |\n| open | `CustomEvent` | Dispatched when the panel opens. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --panel-button-border-radius | `string` | Border radius of the panel expand/collapse button |"
+            "markdown": "## nve-panel\n\nPanel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).\n\n### Example\n\n```html\n<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```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel content |\n| content | `string` | content element (Use `panel-content` or custom content) |\n| footer | `string` | footer element (Use `panel-footer` or custom content) |\n| header | `string` | header element (Use `panel-header` or custom content) |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| behaviorExpand (behavior-expand) | `boolean` | Determines whether the panel should handle auto-closing behavior vs. defaults to off. |\n| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| side | `'left' \\| 'right'` | Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| close | `CustomEvent` | Dispatched when the panel closes. |\n| open | `CustomEvent` | Dispatched when the panel opens. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --panel-button-border-radius | `string` | Border radius of the panel expand/collapse button |"
           }
         }
       ],
@@ -38370,13 +38384,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/radio/",
             "entrypoint": "@nvidia-elements/core/radio",
-            "example": "<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>",
+            "example": "<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>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/radio/",
             "since": "0.3.0",
             "status": "stable",
             "behavior": "form",
-            "markdown": "## nve-radio\n\nA radio button is a control that enables users to choose one option from a list of mutually exclusive options.\n\n### Example\n\n```html\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```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/radio/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| i18n |  | Enables internal string values to update for internationalization. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |\n| prominence | `'muted'` | Set the visual prominence of the control |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Set current visual state for control. This overrides any validation states active. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| reset | `reset(): unknown` | Resets control value to initial attribute value and clears any active validation rules. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --radio-color | `string` |  |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
+            "markdown": "## nve-radio\n\nA radio button is a control that enables users to choose one option from a list of mutually exclusive options.\n\n### Example\n\n```html\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\n### Import\n\n```javascript\nimport '@nvidia-elements/core/radio/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| i18n |  | Enables internal string values to update for internationalization. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |\n| prominence | `'muted'` | Set the visual prominence of the control |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Set current visual state for control. This overrides any validation states active. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| reset | `reset(): unknown` | Resets control value to initial attribute value and clears any active validation rules. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --radio-color | `string` |  |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
           },
           "slots": [
             {
@@ -54525,13 +54539,13 @@
             "themes": true,
             "aria": "#",
             "entrypoint": "@nvidia-elements/core/viewport",
-            "example": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>",
+            "example": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/viewport/",
             "since": "0.0.0",
             "status": "beta",
             "behavior": "content",
-            "markdown": "## nve-viewport\n\nA viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.\n\n### Example\n\n```html\n<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/viewport/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Content positioned in the viewport's infinite content space. |\n| background | `string` | Custom content rendered behind viewport content and excluded from content fitting |\n| overlay | `string` | Interactive content fixed above the transformed plane and excluded from content fitting |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| autoFit | `boolean` | Fits measurable direct default-slot content once after initial layout. |\n| behaviorPan (behavior-pan) | `boolean \\| 'space'` | Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. |\n| behaviorZoom (behavior-zoom) | `boolean` | Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. |\n| dragThreshold (drag-threshold) | `number` | CSS-pixel pointer movement required before a pointer pan begins. |\n| fitInset (fit-inset) | `number` | Default uniform CSS-pixel inset reserved around bounds when fitting content. |\n| maxScale (max-scale) | `number` | Inclusive upper scale limit. |\n| minScale (min-scale) | `number` | Inclusive lower scale limit. |\n| pannable | `boolean` | Whether the viewport may admit new user-input panning. |\n| scale | `number` | Content-to-viewport CSS-pixel scale. |\n| x | `number` | Horizontal content-space coordinate at the viewport origin. |\n| y | `number` | Vertical content-space coordinate at the viewport origin. |\n| zoomable | `boolean` | Whether the viewport may admit new user-input zooming. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| capabilitieschange | `CustomEvent` | Dispatched after effective user-input pan or zoom admission changes. |\n| pan | `CustomEvent` | Dispatched for admitted user pan proposals. Cancel to skip the proposed transform mutation. |\n| panend | `CustomEvent` | Dispatched once when a sustained pan ends, including its terminal reason. |\n| panstart | `CustomEvent` | Dispatched when a sustained pointer or control pan begins. Cancel to suppress the default for its session. |\n| type | `CustomEvent` |  |\n| viewportchange | `CustomEvent` | Dispatched once after a render that commits one or more viewport transform changes. |\n| zoom | `CustomEvent` | Dispatched for admitted user zoom proposals. Cancel to skip the proposed transform mutation. |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --pan-down | `CommandEvent` | With behavior-pan enabled, pans down by one discrete step. |\n| --pan-left | `CommandEvent` | With behavior-pan enabled, pans left by one discrete step. |\n| --pan-right | `CommandEvent` | With behavior-pan enabled, pans right by one discrete step. |\n| --pan-up | `CommandEvent` | With behavior-pan enabled, pans up by one discrete step. |\n| --zoom-in | `CommandEvent` | With behavior-zoom enabled, animates to the next permitted scale step. |\n| --zoom-out | `CommandEvent` | With behavior-zoom enabled, animates to the previous permitted scale step. |\n| --zoom-reset | `CommandEvent` | With behavior-zoom enabled, animates to 100% scale. |\n| --zoom-to-fit | `CommandEvent` | With behavior-zoom enabled, animates to fit direct default-slot element boxes. |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| animateTo | `animateTo(target: Partial<ViewportTransform>, options?: ViewportAnimationOptions): void` | Animates the viewport to the requested partial transform. |\n| fitContents | `fitContents(options?: ViewportRevealOptions): void` | Fits the union of direct default-slot element boxes within the viewport. |\n| getTransform | `getTransform(): ViewportTransform` | Returns the current content-space origin and CSS-pixel scale. |\n| getVisibleRect | `getVisibleRect(): ViewportRect` | Returns the visible content-space rectangle. |\n| requestPan | `requestPan(proposal: ViewportPanProposal): boolean` | Requests one discrete user-originated pan. When pannable, the viewport dispatches a cancelable `pan` and applies the default transform if no listener cancels the event. Returns true only when that default changes the transform. |\n| requestZoom | `requestZoom(proposal: ViewportZoomProposal, options?: ViewportZoomRequestOptions): boolean` | Requests one discrete user-originated zoom. When zoomable, the viewport dispatches a cancelable `zoom` and applies the default transform if no listener cancels the event. Set `options.animated` to animate the uncanceled default; the option is absent from the `zoom` detail. Returns true when the default changes or schedules a change to the transform. |\n| reveal | `reveal(region: { x: number; y: number; width?: number; height?: number }, options?: ViewportRevealOptions): void` | Centers or fits a content-space region within the viewport. |\n| startPan | `startPan(proposal: ViewportPanProposal): ViewportPanSession \\| undefined` | Starts a sustained semantic pan after the caller crosses its activation threshold. Dispatches `panstart`, performs the initial `pan` update, and returns a session for later updates and one terminal `panend`. Returns undefined when pannable is false. |\n| toContentCoords | `toContentCoords(viewportX: number, viewportY: number): ViewportPoint` | Converts a viewport CSS-pixel point to content space. |\n| toViewportCoords | `toViewportCoords(contentX: number, contentY: number): ViewportPoint` | Converts a content-space point to viewport CSS pixels. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | Background color of the fixed viewport area. [MDN](https://mdn.dev/CSS/background) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --pan-cursor | `string` | Cursor shown over a background eligible for primary-pointer panning. |\n| --panning-cursor | `string` | Cursor shown while a pointer pan is active. |"
+            "markdown": "## nve-viewport\n\nA viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.\n\n### Example\n\n```html\n<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/viewport/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Content positioned in the viewport's infinite content space. |\n| background | `string` | Custom content rendered behind viewport content and excluded from content fitting |\n| overlay | `string` | Interactive content fixed above the transformed plane and excluded from content fitting |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| autoFit | `boolean` | Fits measurable direct default-slot content once after initial layout. |\n| behaviorPan (behavior-pan) | `boolean \\| 'space'` | Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. |\n| behaviorZoom (behavior-zoom) | `boolean` | Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. |\n| dragThreshold (drag-threshold) | `number` | CSS-pixel pointer movement required before a pointer pan begins. |\n| fitInset (fit-inset) | `number` | Default uniform CSS-pixel inset reserved around bounds when fitting content. |\n| maxScale (max-scale) | `number` | Inclusive upper scale limit. |\n| minScale (min-scale) | `number` | Inclusive lower scale limit. |\n| pannable | `boolean` | Whether the viewport may admit new user-input panning. |\n| scale | `number` | Content-to-viewport CSS-pixel scale. |\n| x | `number` | Horizontal content-space coordinate at the viewport origin. |\n| y | `number` | Vertical content-space coordinate at the viewport origin. |\n| zoomable | `boolean` | Whether the viewport may admit new user-input zooming. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| capabilitieschange | `CustomEvent` | Dispatched after effective user-input pan or zoom admission changes. |\n| pan | `CustomEvent` | Dispatched for admitted user pan proposals. Cancel to skip the proposed transform mutation. |\n| panend | `CustomEvent` | Dispatched once when a sustained pan ends, including its terminal reason. |\n| panstart | `CustomEvent` | Dispatched when a sustained pointer or control pan begins. Cancel to suppress the default for its session. |\n| type | `CustomEvent` |  |\n| viewportchange | `CustomEvent` | Dispatched once after a render that commits one or more viewport transform changes. |\n| zoom | `CustomEvent` | Dispatched for admitted user zoom proposals. Cancel to skip the proposed transform mutation. |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --pan-down | `CommandEvent` | With behavior-pan enabled, pans down by one discrete step. |\n| --pan-left | `CommandEvent` | With behavior-pan enabled, pans left by one discrete step. |\n| --pan-right | `CommandEvent` | With behavior-pan enabled, pans right by one discrete step. |\n| --pan-up | `CommandEvent` | With behavior-pan enabled, pans up by one discrete step. |\n| --zoom-in | `CommandEvent` | With behavior-zoom enabled, animates to the next permitted scale step. |\n| --zoom-out | `CommandEvent` | With behavior-zoom enabled, animates to the previous permitted scale step. |\n| --zoom-reset | `CommandEvent` | With behavior-zoom enabled, animates to 100% scale. |\n| --zoom-to-fit | `CommandEvent` | With behavior-zoom enabled, animates to fit direct default-slot element boxes. |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| animateTo | `animateTo(target: Partial<ViewportTransform>, options?: ViewportAnimationOptions): void` | Animates the viewport to the requested partial transform. |\n| fitContents | `fitContents(options?: ViewportRevealOptions): void` | Fits the union of direct default-slot element boxes within the viewport. |\n| getTransform | `getTransform(): ViewportTransform` | Returns the current content-space origin and CSS-pixel scale. |\n| getVisibleRect | `getVisibleRect(): ViewportRect` | Returns the visible content-space rectangle. |\n| requestPan | `requestPan(proposal: ViewportPanProposal): boolean` | Requests one discrete user-originated pan. When pannable, the viewport dispatches a cancelable `pan` and applies the default transform if no listener cancels the event. Returns true only when that default changes the transform. |\n| requestZoom | `requestZoom(proposal: ViewportZoomProposal, options?: ViewportZoomRequestOptions): boolean` | Requests one discrete user-originated zoom. When zoomable, the viewport dispatches a cancelable `zoom` and applies the default transform if no listener cancels the event. Set `options.animated` to animate the uncanceled default; the option is absent from the `zoom` detail. Returns true when the default changes or schedules a change to the transform. |\n| reveal | `reveal(region: { x: number; y: number; width?: number; height?: number }, options?: ViewportRevealOptions): void` | Centers or fits a content-space region within the viewport. |\n| startPan | `startPan(proposal: ViewportPanProposal): ViewportPanSession \\| undefined` | Starts a sustained semantic pan after the caller crosses its activation threshold. Dispatches `panstart`, performs the initial `pan` update, and returns a session for later updates and one terminal `panend`. Returns undefined when pannable is false. |\n| toContentCoords | `toContentCoords(viewportX: number, viewportY: number): ViewportPoint` | Converts a viewport CSS-pixel point to content space. |\n| toViewportCoords | `toViewportCoords(contentX: number, contentY: number): ViewportPoint` | Converts a content-space point to viewport CSS pixels. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | Background color of the fixed viewport area. [MDN](https://mdn.dev/CSS/background) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --pan-cursor | `string` | Cursor shown over a background eligible for primary-pointer panning. |\n| --panning-cursor | `string` | Cursor shown while a pointer pan is active. |"
           },
           "commands": [
             {

package/dist/data.snippets.json

@@ -71,6 +71,24 @@
     "description": "Basic inline search",
     "body": "<nve-search>\n  <input type=\"search\" aria-label=\"${2:search}\" placeholder=\"${3:search}\">\n</nve-search>\n"
   },
+  "Page Header": {
+    "srcFile": "page-header.snippets.html",
+    "prefix": [
+      "page-header"
+    ],
+    "type": "pattern",
+    "description": "Basic page-header layout.",
+    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n</nve-page-header>\n"
+  },
+  "Page Header with Links": {
+    "srcFile": "page-header.snippets.html",
+    "prefix": [
+      "page-header-with-links"
+    ],
+    "type": "pattern",
+    "description": "Basic page-header layout with links.",
+    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">${2:Link 1}</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">${3:Link 2}</a></nve-button>\n</nve-page-header>\n"
+  },
   "Page": {
     "srcFile": "page.snippets.html",
     "prefix": [
@@ -116,24 +134,6 @@
     "description": "Basic page subheader using toolbar.",
     "body": "<nve-toolbar slot=\"subheader\">\n  <h2 nve-text=\"emphasis heading sm\">${1:Subheader}</h2>\n</nve-toolbar>\n"
   },
-  "Page Header": {
-    "srcFile": "page-header.snippets.html",
-    "prefix": [
-      "page-header"
-    ],
-    "type": "pattern",
-    "description": "Basic page-header layout.",
-    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n</nve-page-header>\n"
-  },
-  "Page Header with Links": {
-    "srcFile": "page-header.snippets.html",
-    "prefix": [
-      "page-header-with-links"
-    ],
-    "type": "pattern",
-    "description": "Basic page-header layout with links.",
-    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">${2:Link 1}</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">${3:Link 2}</a></nve-button>\n</nve-page-header>\n"
-  },
   "Input Group": {
     "srcFile": "input.snippets.html",
     "prefix": [

package/dist/date/date.examples.json

@@ -23,7 +23,7 @@
     {
       "id": "date-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date>\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date>\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date>\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date>\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n\n  <nve-date>\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
       "summary": "Date pickers with vertical layout including validation states for disabled, success, and error.",
       "description": "",
       "composition": false,
@@ -34,7 +34,7 @@
     {
       "id": "date-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n\n  <nve-date layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
       "summary": "Date pickers with horizontal layout showing validation states for inline forms and compact layouts.",
       "description": "",
       "composition": false,
@@ -54,7 +54,7 @@
     {
       "id": "date-types",
       "name": "Types",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>date label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-datetime layout=\"horizontal\">\n    <label>datetime label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-month layout=\"horizontal\">\n    <label>month label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n  <nve-week layout=\"horizontal\">\n    <label>week label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-time layout=\"horizontal\">\n    <label>time label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-input-group layout=\"horizontal\">\n    <label>date range</label>\n    <nve-date>\n      <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n    </nve-date>\n    <nve-date>\n      <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n    </nve-date>\n    <nve-control-message>message</nve-control-message>\n  </nve-input-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>date label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-datetime layout=\"horizontal\">\n    <label>datetime label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-month layout=\"horizontal\">\n    <label>month label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-week layout=\"horizontal\">\n    <label>week label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-time layout=\"horizontal\">\n    <label>time label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-input-group layout=\"horizontal\">\n    <label>date range</label>\n    <nve-date>\n      <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n    </nve-date>\n    <nve-date>\n      <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n    </nve-date>\n    <nve-control-message>message</nve-control-message>\n  </nve-input-group>\n</div>\n",
       "summary": "Collection of temporal input types including date, datetime, month, week, time, and date range pickers.",
       "description": "",
       "composition": true,

package/dist/date/date2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-date",
-			version: "2.12.0"
+			version: "2.12.1"
 		};
 	}
 	static {