@nvidia-elements/core 0.0.10 → 0.0.11

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

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

package/dist/pagination/pagination.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/pagination/pagination.examples.json",
   "items": [
     {
-      "id": "core-pagination_default",
+      "id": "pagination",
       "name": "Default",
       "template": "<nve-pagination value=\"1\" items=\"100\" step=\"10\"></nve-pagination>\n<script type=\"module\">\n  const pagination = document.querySelector(\"nve-pagination\");\n  pagination.addEventListener(\"change\", (e) => console.log(e.target.value));\n</script>\n",
       "summary": "Basic pagination component with default styling and behavior.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_skippable",
+      "id": "pagination-skippable",
       "name": "Skippable",
       "template": "<nve-pagination value=\"1\" items=\"100\" step=\"10\" skippable></nve-pagination>\n",
       "summary": "Pagination with skip buttons to navigate to first and last pages quickly.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_disabled",
+      "id": "pagination-disabled",
       "name": "Disabled",
       "template": "<nve-pagination disabled value=\"1\" items=\"100\" step=\"10\" skippable></nve-pagination>\n",
       "summary": "Disabled pagination component that prevents user interaction.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_flat",
+      "id": "pagination-flat",
       "name": "Flat",
       "template": "<nve-pagination container=\"flat\" value=\"1\" items=\"100\" step=\"10\" skippable></nve-pagination>\n",
       "summary": "Pagination with flat container styling for a more minimal appearance.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_inline",
+      "id": "pagination-inline",
       "name": "Inline",
       "template": "<nve-pagination container=\"inline\" value=\"1\" items=\"100\" step=\"10\"></nve-pagination>\n",
       "summary": "Inline pagination layout that fits inline with content.",
@@ -48,7 +48,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_disable-step",
+      "id": "pagination-disable-step",
       "name": "DisableStep",
       "template": "<nve-pagination disable-step container=\"inline\" value=\"1\" items=\"100\" step=\"10\"></nve-pagination>\n",
       "summary": "Inline pagination with disabled step selector to prevent page size changes.",
@@ -57,7 +57,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_forms",
+      "id": "pagination-forms",
       "name": "Forms",
       "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" items=\"100\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <nve-button>submit page 10</nve-button>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"change\", updateValues);\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"submit\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n  function updateValues(e) {\n    e.preventDefault();\n    console.log(e);\n    pre.innerText = JSON.stringify(\n      { ...Object.fromEntries(new FormData(form)), step: form.elements.page.step },\n      null,\n      2,\n    );\n  }\n</script>\n",
       "summary": "Pagination as a form associated component that participates in form submission and emits change, input, and step-change events. Use when page selection needs to integrate with form data collection or server-side form handling.",
@@ -66,7 +66,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_no-items-count",
+      "id": "pagination-no-items-count",
       "name": "NoItemsCount",
       "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n  function updateValues(e) {\n    e.preventDefault();\n    pre.innerText = JSON.stringify(\n      { ...Object.fromEntries(new FormData(form)), step: form.elements.page.step },\n      null,\n      2,\n    );\n  }\n</script>\n",
       "summary": "Pagination without items count display, useful when total count is unknown.",
@@ -75,7 +75,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_large-values",
+      "id": "pagination-large-values",
       "name": "LargeValues",
       "template": "<nve-pagination container=\"inline\" value=\"1\" items=\"10000\" step=\"100\"></nve-pagination>\n",
       "summary": "Pagination handling large datasets with higher step values for efficient navigation.",
@@ -84,7 +84,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_dynamic-items",
+      "id": "pagination-dynamic-items",
       "name": "DynamicItems",
       "template": "<nve-pagination disable-step container=\"inline\" value=\"1\" items=\"100\" step=\"20\"></nve-pagination>\n<script type=\"module\">\n  const pagination = document.querySelector(\"nve-pagination\");\n  let items = loadItems();\n  pagination.addEventListener(\"last-page\", async () => {\n    items = [...items, ...loadItems()];\n    pagination.items = items.length;\n  });\n  function loadItems() {\n    return new Array(100).fill(\"\");\n  }\n</script>\n",
       "summary": "If the upper bound of items is unknown, use the `last-page` event to determine when to load more data and update the pagination with the latest total of items.",
@@ -95,7 +95,7 @@
       ]
     },
     {
-      "id": "core-pagination_dynamic-step-size",
+      "id": "pagination-dynamic-step-size",
       "name": "DynamicStepSize",
       "template": "<!-- javascript property binding -->\n<nve-pagination value=\"1\" items=\"10000\" step=\"100\" step-sizes=\"[100, 500, 1000]\"></nve-pagination>\n",
       "summary": "When a custom step exists, the select options dynamically adapt to the step and append to the default option list.",
@@ -104,7 +104,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_suffix-label",
+      "id": "pagination-suffix-label",
       "name": "SuffixLabel",
       "template": "<nve-pagination value=\"1\" items=\"50000\" step=\"100\">\n  <span slot=\"suffix-label\">of 50,000+</span>\n</nve-pagination>\n",
       "summary": "Use the `suffix-label` slot to customize the \"of total\" label when dealing with approximated totals from API responses. This is useful when the API returns a limited count but indicates there are more items available.",
@@ -115,7 +115,7 @@
       ]
     },
     {
-      "id": "core-pagination_page-list-pattern",
+      "id": "pagination-page-list-pattern",
       "name": "PageListPattern",
       "template": "<nve-toolbar container=\"inset\">\n  <nve-button disabled container=\"flat\"\n    ><nve-icon name=\"chevron\" direction=\"left\" size=\"sm\"></nve-icon> previous</nve-button\n  >\n  <nve-button container=\"flat\" selected>1</nve-button>\n  <nve-button container=\"flat\">2</nve-button>\n  <nve-button container=\"flat\">3</nve-button>\n  <nve-button container=\"flat\">4</nve-button>\n  <nve-button container=\"flat\">next <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon></nve-button>\n</nve-toolbar>\n",
       "summary": "Custom pagination pattern using toolbar with numbered page buttons and navigation arrows.",
@@ -124,7 +124,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_skip-pattern",
+      "id": "pagination-skip-pattern",
       "name": "SkipPattern",
       "template": "<nve-toolbar container=\"inset\">\n  <nve-icon-button\n    container=\"flat\"\n    icon-name=\"arrow-stop\"\n    direction=\"left\"\n    aria-label=\"first\"\n    disabled\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"left\" aria-label=\"previous\"></nve-icon-button>\n  <nve-button container=\"flat\" selected>1</nve-button>\n  <nve-button container=\"flat\">2</nve-button>\n  <nve-button container=\"flat\">3</nve-button>\n  <nve-button container=\"flat\">4</nve-button>\n  <nve-icon-button icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n  <nve-icon-button icon-name=\"arrow-stop\" direction=\"right\" aria-label=\"last\"></nve-icon-button>\n</nve-toolbar>\n",
       "summary": "Enhanced pagination pattern with first/last page buttons and numbered page navigation.",
@@ -133,7 +133,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_vertical-pattern",
+      "id": "pagination-vertical-pattern",
       "name": "VerticalPattern",
       "template": "<nve-toolbar container=\"inset\">\n  <label nve-text=\"body muted sm\">1 of 13</label>\n  <nve-icon-button\n    container=\"flat\"\n    size=\"sm\"\n    icon-name=\"chevron\"\n    direction=\"up\"\n    aria-label=\"previous\"\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"chevron\" direction=\"down\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
       "summary": "Vertical pagination pattern with up/down navigation arrows for compact layouts.",
@@ -142,7 +142,7 @@
       "tags": []
     },
     {
-      "id": "core-pagination_custom-select-pattern",
+      "id": "pagination-custom-select-pattern",
       "name": "CustomSelectPattern",
       "template": "<nve-toolbar container=\"inset\">\n  <nve-select style=\"--width: 80px\">\n    <select aria-label=\"page size\">\n      <option value=\"10\">1-10</option>\n    </select>\n  </nve-select>\n  <label nve-text=\"label muted sm\" style=\"width: 40px\">of ~13</label>\n  <nve-icon-button\n    container=\"flat\"\n    icon-name=\"chevron\"\n    direction=\"left\"\n    aria-label=\"previous\"\n    disabled\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
       "summary": "Custom pagination with select dropdown for page size and navigation arrows.",

package/dist/pagination/pagination2.js

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

package/dist/panel/panel.examples.json

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

package/dist/panel/panel2.js

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

package/dist/password/password.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/password/password.examples.json",
   "items": [
     {
-      "id": "core-password_default",
+      "id": "password",
       "name": "Default",
       "template": "<nve-password>\n  <label>label</label>\n  <input type=\"password\" value=\"123456\" />\n  <nve-control-message>message</nve-control-message>\n</nve-password>\n",
       "summary": "Basic password input with toggle visibility for secure credential entry and authentication forms.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-password_vertical",
+      "id": "password-vertical",
       "name": "Vertical",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-password>\n    <label>label</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n  <nve-password>\n    <label>disabled</label>\n    <input type=\"password\" value=\"123456\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n  <nve-password>\n    <label>success</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-password>\n  <nve-password>\n    <label>error</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-password>\n</div>\n",
       "summary": "Password inputs with vertical layout including validation states for disabled, success, and error.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-password_horizontal",
+      "id": "password-horizontal",
       "name": "Horizontal",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-password layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n  <nve-password layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"password\" value=\"123456\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n  <nve-password layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-password>\n  <nve-password layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-password>\n</div>\n",
       "summary": "Password inputs with horizontal layout showing validation states for inline forms and compact layouts.",

package/dist/password/password2.js

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

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

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/preferences-input/preferences-input.examples.json",
   "items": [
     {
-      "id": "core-preferences-input_default",
+      "id": "preferences-input",
       "name": "Default",
       "template": "<nve-preferences-input\n  name=\"theme\"\n  value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'\n></nve-preferences-input>\n",
       "summary": "Preferences input displaying theme settings (color scheme, scale, reduced motion) for user customization.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-preferences-input_forms",
+      "id": "preferences-input-forms",
       "name": "Forms",
       "template": "<form id=\"preferences-input-form\" nve-layout=\"row gap:md\">\n  <div nve-layout=\"column gap:md\">\n    <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"light\" }'></nve-preferences-input>\n    <nve-button>submit</nve-button>\n  </div>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const preferencesInput = document.querySelector(\"nve-preferences-input\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"change\", renderValues);\n  form.addEventListener(\"input\", renderValues);\n  form.addEventListener(\"submit\", renderValues);\n  pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n\n  function renderValues(e) {\n    e.preventDefault();\n    console.log(e);\n    pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n  }\n</script>\n",
       "summary": "Preferences input integrated with form submission, displaying live JSON value updates.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-preferences-input_dropdown",
+      "id": "preferences-input-dropdown",
       "name": "Dropdown",
       "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-icon-button slot=\"suffix\" icon-name=\"gear\" size=\"sm\" popovertarget=\"preferences-input\"></nve-icon-button>\n</nve-page-header>\n<nve-dropdown id=\"preferences-input\" position=\"bottom\" alignment=\"end\">\n  <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"dark\" }'></nve-preferences-input>\n</nve-dropdown>\n",
       "summary": "Preferences input embedded in a dropdown menu triggered from a page header settings button.",

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

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

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

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/progress-bar/progress-bar.examples.json",
   "items": [
     {
-      "id": "core-progress-bar_default",
+      "id": "progress-bar",
       "name": "Default",
       "template": "<nve-progress-bar value=\"50\"></nve-progress-bar>\n",
       "summary": "Standard progress bar for representing completion levels from 0% to 100% for task tracking.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-progress-bar_status",
+      "id": "progress-bar-status",
       "name": "Status",
       "template": "<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar value=\"0\"></nve-progress-bar>\n  <nve-progress-bar value=\"10\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"25\"></nve-progress-bar>\n  <nve-progress-bar status=\"success\" value=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\" value=\"75\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\" value=\"100\"></nve-progress-bar>\n</div>\n",
       "summary": "Progress bars with different status colors showing completion levels from 0% to 100% for task tracking.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-progress-bar_max",
+      "id": "progress-bar-max",
       "name": "Max",
       "template": "<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar status=\"accent\" value=\"25\" max=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"45\" max=\"50\"></nve-progress-bar>\n</div>\n",
       "summary": "Progress bars with custom max values for representing non-percentage based progress like file counts or steps.",
@@ -34,7 +34,7 @@
       ]
     },
     {
-      "id": "core-progress-bar_labeled",
+      "id": "progress-bar-labeled",
       "name": "Labeled",
       "template": "<div nve-layout=\"column gap:xs pad:lg align:horizontal-stretch full\">\n  <div nve-layout=\"row align:space-between\">\n    <p nve-text=\"label sm\">Upload Status</p>\n    <p nve-text=\"label emphasis sm\">80%</p>\n  </div>\n  <nve-progress-bar status=\"accent\" value=\"80\"></nve-progress-bar>\n</div>\n",
       "summary": "Use a labeled progress bar with percentage display to communicate upload or task status.",
@@ -45,7 +45,7 @@
       ]
     },
     {
-      "id": "core-progress-bar_indeterminate",
+      "id": "progress-bar-indeterminate",
       "name": "Indeterminate",
       "template": "<nve-progress-bar></nve-progress-bar>\n",
       "summary": "Indeterminate progress bar for showing activity when completion time is unknown, like loading or processing.",
@@ -54,7 +54,7 @@
       "tags": []
     },
     {
-      "id": "core-progress-bar_indeterminate-status-colors",
+      "id": "progress-bar-indeterminate-status-colors",
       "name": "IndeterminateStatusColors",
       "template": "<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar status=\"accent\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\"></nve-progress-bar>\n</div>\n",
       "summary": "Progress bars display as an animated loading indicator when no `value` attribute exists.",
@@ -65,7 +65,7 @@
       ]
     },
     {
-      "id": "core-progress-bar_indeterminate-custom-color",
+      "id": "progress-bar-indeterminate-custom-color",
       "name": "IndeterminateCustomColor",
       "template": "<nve-progress-bar\n  style=\"--accent-color: var(--nve-sys-accent-primary-background); --height: var(--nve-ref-size-150); --opacity: 1\"\n></nve-progress-bar>\n",
       "summary": "Indeterminate progress bar with custom color, height, and opacity for brand-specific styling and visual emphasis.",
@@ -76,7 +76,7 @@
       ]
     },
     {
-      "id": "core-progress-bar_custom-heights",
+      "id": "progress-bar-custom-heights",
       "name": "CustomHeights",
       "template": "<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-100)\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-200)\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-300)\"></nve-progress-bar>\n</div>\n",
       "summary": "Progress bars with custom heights for different visual prominence levels and layout requirements.",

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

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

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

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/progress-ring/progress-ring.examples.json",
   "items": [
     {
-      "id": "core-progress-ring_default",
+      "id": "progress-ring",
       "name": "Default",
       "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n</div>\n",
       "summary": "Circular progress indicators showing indeterminate loading state and determinate completion progress.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-progress-ring_values",
+      "id": "progress-ring-values",
       "name": "Values",
       "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"0\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"33\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"100\"></nve-progress-ring>\n</div>\n",
       "summary": "Progress rings displaying completion percentages from indeterminate to 0%, 33%, 66%, and 100%.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-progress-ring_max",
+      "id": "progress-ring-max",
       "name": "Max",
       "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"5\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"10\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"15\"></nve-progress-ring>\n</div>\n",
       "summary": "Progress rings with custom max values for proportional progress within a defined scale.",
@@ -34,7 +34,7 @@
       ]
     },
     {
-      "id": "core-progress-ring_status",
+      "id": "progress-ring-status",
       "name": "Status",
       "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"warning\" value=\"75\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" value=\"75\"></nve-progress-ring>\n  <nve-progress-ring status=\"warning\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\"></nve-progress-ring>\n</div>\n",
       "summary": "Progress rings with warning and danger status colors for indicating critical or cautionary states.",
@@ -43,7 +43,7 @@
       "tags": []
     },
     {
-      "id": "core-progress-ring_with-text",
+      "id": "progress-ring-with-text",
       "name": "WithText",
       "template": "<div nve-layout=\"row gap:xs align:vertical-center\" nve-text=\"medium\">\n  <nve-progress-ring status=\"accent\" size=\"xs\" aria-labelledby=\"processing-label\"></nve-progress-ring>\n  <span id=\"processing-label\">Processing...</span>\n</div>\n",
       "summary": "Progress ring paired inline with descriptive text label for communicating loading state.",
@@ -52,7 +52,7 @@
       "tags": []
     },
     {
-      "id": "core-progress-ring_slotted-icon",
+      "id": "progress-ring-slotted-icon",
       "name": "SlottedIcon",
       "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\">\n    <nve-icon name=\"pause\" status=\"accent\"></nve-icon>\n  </nve-progress-ring>\n</div>\n",
       "summary": "Progress ring with custom status icon slotted in the center for enhanced visual communication.",
@@ -63,7 +63,7 @@
       ]
     },
     {
-      "id": "core-progress-ring_sizing",
+      "id": "progress-ring-sizing",
       "name": "Sizing",
       "template": "<div nve-layout=\"row gap:sm pad:md\">\n  <nve-progress-ring status=\"accent\" size=\"xxs\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"sm\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"md\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"lg\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"xl\"></nve-progress-ring>\n</div>\n<div nve-layout=\"row gap:sm pad:md\">\n  <nve-progress-ring status=\"danger\" size=\"xxs\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"xs\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"sm\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"md\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"lg\"></nve-progress-ring>\n</div>\n",
       "summary": "Progress rings in many sizes from extra-extra-small to extra-large for different UI contexts.",
@@ -74,7 +74,7 @@
       ]
     },
     {
-      "id": "core-progress-ring_with-button",
+      "id": "progress-ring-with-button",
       "name": "WithButton",
       "template": "<div nve-layout=\"row gap:sm\">\n  <nve-button>\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"emphasis\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"destructive\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button>\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"emphasis\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"destructive\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n</div>\n",
       "summary": "Progress rings integrated within buttons to show loading states during actions and operations.",

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

@@ -20,7 +20,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-progress-ring",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	static {

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

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/progressive-filter-chip/progressive-filter-chip.examples.json",
   "items": [
     {
-      "id": "core-progressive-filter-chip_default",
+      "id": "progressive-filter-chip",
       "name": "Default",
       "template": "<nve-progressive-filter-chip closable>\n  <nve-select>\n    <select aria-label=\"dataset\">\n      <option>workload</option>\n      <option selected>instance</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select aria-label=\"condition\">\n      <option>sort by</option>\n      <option selected>filter by</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select aria-label=\"filter\">\n      <option selected>utilization</option>\n      <option>status</option>\n    </select>\n  </nve-select>\n</nve-progressive-filter-chip>\n",
       "summary": "Basic progressive filter chip with cascading select dropdowns for multi-criteria filtering.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-progressive-filter-chip_layer",
+      "id": "progressive-filter-chip-layer",
       "name": "Layer",
       "template": "<nve-progressive-filter-chip closable>\n  <nve-select>\n    <select aria-label=\"dataset\">\n      <option>workload</option>\n      <option selected>instance</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select aria-label=\"condition\">\n      <option>sort by</option>\n      <option selected>filter by</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select aria-label=\"filter\">\n      <option selected>utilization</option>\n      <option>status</option>\n    </select>\n  </nve-select>\n</nve-progressive-filter-chip>\n",
       "summary": "Progressive filter chip with proper layer stacking within dropdown contexts.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-progressive-filter-chip_multiple",
+      "id": "progressive-filter-chip-multiple",
       "name": "Multiple",
       "template": "<nve-progressive-filter-chip closable>\n  <nve-select>\n    <select aria-label=\"dataset\">\n      <option selected>status</option>\n      <option>workload</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select aria-label=\"condition\">\n      <option selected>filter by</option>\n      <option>sort by</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select multiple aria-label=\"filter\">\n      <option selected>progress</option>\n      <option>pending</option>\n      <option>success</option>\n      <option>failed</option>\n    </select>\n  </nve-select>\n</nve-progressive-filter-chip>\n",
       "summary": "Progressive filter chip with multi-select dropdown for filtering by many values simultaneously.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-progressive-filter-chip_text-input",
+      "id": "progressive-filter-chip-text-input",
       "name": "TextInput",
       "template": "<nve-progressive-filter-chip closable>\n  <nve-select>\n    <select aria-label=\"dataset\">\n      <option selected>memory</option>\n      <option>CPU</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select aria-label=\"condition\">\n      <option selected>greater than</option>\n      <option>less than</option>\n      <option>equal to</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input type=\"number\" min=\"0\" max=\"100\" value=\"50\" aria-label=\"filter\" />\n  </nve-input>\n</nve-progressive-filter-chip>\n",
       "summary": "Progressive filter chip with numeric text input for threshold-based filtering (greater than, less than).",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-progressive-filter-chip_date-range",
+      "id": "progressive-filter-chip-date-range",
       "name": "DateRange",
       "template": "<nve-progressive-filter-chip>\n  <nve-select>\n    <select aria-label=\"date type\">\n      <option>recording date</option>\n      <option>process date</option>\n    </select>\n  </nve-select>\n  <nve-date>\n    <input type=\"date\" value=\"2022-05-11\" aria-label=\"start date\" />\n  </nve-date>\n  <nve-date>\n    <input type=\"date\" value=\"2022-12-07\" aria-label=\"end date\" />\n  </nve-date>\n</nve-progressive-filter-chip>\n",
       "summary": "Progressive filter chip with date picker inputs for filtering by date range criteria.",
@@ -48,7 +48,7 @@
       "tags": []
     },
     {
-      "id": "core-progressive-filter-chip_custom",
+      "id": "progressive-filter-chip-custom",
       "name": "Custom",
       "template": "<nve-progressive-filter-chip closable>\n  <nve-select>\n    <select aria-label=\"dataset\">\n      <option>GPS</option>\n      <option selected>Cellular</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select aria-label=\"condition\">\n      <option>contains</option>\n      <option>excludes</option>\n    </select>\n  </nve-select>\n  <nve-button style=\"width: 190px\" popovertarget=\"map-dropdown\">37.3706254,-121.9671894</nve-button>\n</nve-progressive-filter-chip>\n<nve-dropdown id=\"map-dropdown\">\n  <nve-input>\n    <nve-icon-button icon-name=\"map-pin\" readonly></nve-icon-button>\n    <input value=\"37.3706254,-121.9671894\" disabled aria-label=\"map coordinates\" />\n  </nve-input>\n  <img src=\"static/images/test-map-2.webp\" width=\"300px\" alt=\"non-interactive demo map\" />\n</nve-dropdown>\n",
       "summary": "Progressive filter chip with custom button trigger opening a map coordinate picker dropdown.",
@@ -57,7 +57,7 @@
       "tags": []
     },
     {
-      "id": "core-progressive-filter-chip_validation",
+      "id": "progressive-filter-chip-validation",
       "name": "Validation",
       "template": "<div nve-layout=\"column gap:lg\">\n  <nve-progressive-filter-chip closable>\n    <nve-input>\n      <input type=\"text\" value=\"validation\" required aria-label=\"validation\" />\n      <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n  <nve-progressive-filter-chip closable>\n    <nve-input status=\"error\">\n      <input type=\"text\" value=\"manual validation\" formnovalidate aria-label=\"manual validation\" />\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n</div>\n",
       "summary": "Progressive filter chip with input validation states showing required field and error styling.",