@nvidia-elements/core 0.0.9 → 0.0.11

package/dist/page/page.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/page/page.examples.json",
   "items": [
     {
-      "id": "core-page_default",
+      "id": "page",
       "name": "Default",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>panel</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n",
       "summary": "Basic nve-page layout with a header and main content.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-page_slots",
+      "id": "page-slots",
       "name": "Slots",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <h2 nve-text=\"heading\" slot=\"prefix\">header</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>subheader</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left-aside\">\n    <nve-page-panel-content>left-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main>\n    <p nve-text=\"body\">main content</p>\n  </main>\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right-aside\">\n    <nve-page-panel-content>right-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"subfooter\">\n    <nve-page-panel-content>subfooter</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"footer\">\n    <nve-page-panel-content>footer</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n",
       "summary": "Page layout slot reference showing all available panel positions including header, subheader, left, right, bottom, and aside regions. Use as a starting point for understanding how to compose complex application layouts.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-page_content",
+      "id": "page-content",
       "name": "Content",
       "template": "<style>\n  nve-page[debug] {\n    nve-page-panel-content {\n      font-size: var(--nve-ref-font-size-100);\n    }\n    main {\n      min-height: 100vh;\n      padding: var(--nve-ref-space-md);\n    }\n    [slot=\"left\"],\n    [slot=\"right\"],\n    [slot=\"bottom\"] {\n      --background: var(--nve-ref-color-green-grass-400);\n    }\n    [slot=\"left-aside\"],\n    [slot=\"right-aside\"] {\n      --background: var(--nve-ref-color-purple-lavender-400);\n    }\n    [slot=\"header\"],\n    [slot=\"footer\"] {\n      --background: var(--nve-ref-color-red-tomato-400);\n    }\n    [slot=\"subheader\"],\n    [slot=\"subfooter\"] {\n      --background: var(--nve-ref-color-blue-cobalt-400);\n    }\n  }\n</style>\n<nve-page debug>\n  <nve-page-header slot=\"header\">\n    <h2 nve-text=\"heading\" slot=\"prefix\">header</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>subheader</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left-aside\">\n    <nve-page-panel-content>left-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main>\n    <p nve-text=\"body\">main content</p>\n  </main>\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right-aside\">\n    <nve-page-panel-content>right-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"subfooter\">\n    <nve-page-panel-content>subfooter</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"footer\">\n    <nve-page-panel-content>footer</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n",
       "summary": "All slot areas and debug backgrounds for nve-page.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-page_slot-banner",
+      "id": "page-slot-banner",
       "name": "SlotBanner",
       "template": "<nve-page>\n  <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable>\n      <span slot=\"prefix\">Warning</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a>\n    </nve-alert>\n  </nve-alert-group>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n",
       "summary": "Warning banner in the header slot above the page header.",
@@ -43,7 +43,7 @@
       ]
     },
     {
-      "id": "core-page_slot-subheader",
+      "id": "page-slot-subheader",
       "name": "SlotSubheader",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-toolbar slot=\"subheader\">\n    <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\"></nve-icon-button>\n    <h2 nve-text=\"heading sm\">Subheader</h2>\n  </nve-toolbar>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n",
       "summary": "Toolbar in the subheader slot below the header for secondary navigation or actions.",
@@ -54,7 +54,7 @@
       ]
     },
     {
-      "id": "core-page_slot-subheader-large",
+      "id": "page-slot-subheader-large",
       "name": "SlotSubheaderLarge",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md align:stretch\">\n        <div nve-layout=\"row align:space-between align:vertical-center\">\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n            <h2 nve-text=\"heading lg semibold\">Subheader Large</h2>\n          </section>\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-button>Default</nve-button>\n            <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n          </section>\n        </div>\n        <section nve-layout=\"row gap:xl align:vertical-center\">\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Driver</span>\n            <span nve-text=\"body sm bold\">Jane Doe</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Route</span>\n            <span nve-text=\"body sm bold\">Santa Clara</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Status</span>\n            <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n          </div>\n        </section>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n",
       "summary": "Large subheader panel with back navigation, title, metadata, and action buttons. Use for detail pages that need prominent context like entity names, status badges, and key-value metadata above the main content.",
@@ -63,7 +63,7 @@
       "tags": []
     },
     {
-      "id": "core-page_slot-left",
+      "id": "page-slot-left",
       "name": "SlotLeft",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n",
       "summary": "Left slot with a page panel for side navigation or content.",
@@ -74,7 +74,7 @@
       ]
     },
     {
-      "id": "core-page_slot-right",
+      "id": "page-slot-right",
       "name": "SlotRight",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n",
       "summary": "Right slot with a page panel for side content.",
@@ -85,7 +85,7 @@
       ]
     },
     {
-      "id": "core-page_slot-bottom",
+      "id": "page-slot-bottom",
       "name": "SlotBottom",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n",
       "summary": "Bottom slot with a page panel for footer or supplemental content.",
@@ -96,7 +96,7 @@
       ]
     },
     {
-      "id": "core-page_slot-left-aside",
+      "id": "page-slot-left-aside",
       "name": "SlotLeftAside",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"play\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add\"></nve-icon-button>\n      <nve-icon-button icon-name=\"delete\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n",
       "summary": "Left-aside slot with a vertical toolbar for navigation.",
@@ -107,7 +107,7 @@
       ]
     },
     {
-      "id": "core-page_slot-right-aside",
+      "id": "page-slot-right-aside",
       "name": "SlotRightAside",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n",
       "summary": "Right-aside slot with a vertical toolbar for actions or navigation.",
@@ -118,7 +118,7 @@
       ]
     },
     {
-      "id": "core-page_slot-subfooter",
+      "id": "page-slot-subfooter",
       "name": "SlotSubfooter",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n  <nve-toolbar slot=\"subfooter\">\n    <nve-icon-button icon-name=\"information-circle-stroke\"></nve-icon-button>\n    <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n  </nve-toolbar>\n</nve-page>\n",
       "summary": "Subfooter slot with a toolbar for status or metadata.",
@@ -129,7 +129,7 @@
       ]
     },
     {
-      "id": "core-page_slot-footer",
+      "id": "page-slot-footer",
       "name": "SlotFooter",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n  <nve-toolbar slot=\"footer\">\n    <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n    <a href=\"#\" nve-text=\"link sm\">logging</a>\n    <a href=\"#\" nve-text=\"link sm\">contact</a>\n  </nve-toolbar>\n</nve-page>\n",
       "summary": "Footer slot with a toolbar for links or actions.",
@@ -140,7 +140,7 @@
       ]
     },
     {
-      "id": "core-page_invoker-command",
+      "id": "page-invoker-command",
       "name": "InvokerCommand",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-icon-button\n      slot=\"suffix\"\n      commandfor=\"invoker-example\"\n      command=\"--toggle\"\n      container=\"flat\"\n      icon-name=\"menu\"\n      aria-label=\"menu\"\n    ></nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel id=\"invoker-example\" slot=\"left\" size=\"sm\" hidden>\n    <nve-icon-button\n      commandfor=\"invoker-example\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"inline\"\n      icon-name=\"cancel\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n    <nve-page-panel-content>\n      <p nve-text=\"body\">panel content</p>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n",
       "summary": "Use Page Panel with Invoker Command API to dynamically open and close page panels.",
@@ -149,7 +149,7 @@
       "tags": []
     },
     {
-      "id": "core-page_panel-expandable",
+      "id": "page-panel-expandable",
       "name": "PanelExpandable",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel id=\"panel-left\" slot=\"left\" size=\"sm\">\n    <nve-icon-button\n      commandfor=\"panel-left\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"inline\"\n      icon-name=\"double-chevron\"\n      direction=\"left\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <div nve-layout=\"row gap:xs\">\n      <nve-button commandfor=\"panel-left\" command=\"--toggle\">Toggle Left Panel</nve-button>\n      <nve-button commandfor=\"panel-right\" command=\"--toggle\">Toggle Right Panel</nve-button>\n      <nve-button commandfor=\"panel-bottom\" command=\"--toggle\">Toggle Bottom Panel</nve-button>\n    </div>\n  </main>\n  <nve-page-panel id=\"panel-right\" slot=\"right\" size=\"sm\">\n    <nve-icon-button\n      commandfor=\"panel-right\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"inline\"\n      icon-name=\"double-chevron\"\n      direction=\"right\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel id=\"panel-bottom\" slot=\"bottom\" size=\"sm\">\n    <nve-icon-button\n      commandfor=\"panel-bottom\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"inline\"\n      icon-name=\"double-chevron\"\n      direction=\"down\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n",
       "summary": "Expandable page panels that collapse to a slim strip and toggle open with chevron buttons. Use when panels contain supplementary content that users access intermittently, preserving main content space while keeping panels accessible.",
@@ -158,7 +158,7 @@
       "tags": []
     },
     {
-      "id": "core-page_panel-closable",
+      "id": "page-panel-closable",
       "name": "PanelClosable",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel id=\"panel-left\" slot=\"left\" size=\"sm\">\n    <nve-icon-button\n      commandfor=\"panel-left\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"inline\"\n      icon-name=\"cancel\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <div nve-layout=\"row gap:xs\">\n      <nve-button commandfor=\"panel-left\" command=\"--toggle\">Toggle Left Panel</nve-button>\n      <nve-button commandfor=\"panel-right\" command=\"--toggle\">Toggle Right Panel</nve-button>\n      <nve-button commandfor=\"panel-bottom\" command=\"--toggle\">Toggle Bottom Panel</nve-button>\n    </div>\n  </main>\n  <nve-page-panel id=\"panel-right\" slot=\"right\" size=\"sm\">\n    <nve-icon-button\n      commandfor=\"panel-right\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"inline\"\n      icon-name=\"cancel\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel id=\"panel-bottom\" slot=\"bottom\" size=\"sm\">\n    <nve-icon-button\n      commandfor=\"panel-bottom\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"inline\"\n      icon-name=\"cancel\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n",
       "summary": "Closable page panels that fully remove from the layout when dismissed. Use when panels open on demand for temporary tasks like viewing item details or applying filters, and the user needs full main content space when done.",
@@ -167,7 +167,7 @@
       "tags": []
     },
     {
-      "id": "core-page_interaction-drawer",
+      "id": "page-interaction-drawer",
       "name": "InteractionDrawer",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-icon-button\n      popovertarget=\"drawer\"\n      slot=\"prefix\"\n      container=\"flat\"\n      icon-name=\"menu\"\n      aria-label=\"menu\"\n    ></nve-icon-button>\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n  <nve-drawer id=\"drawer\" slot=\"left-aside\" position=\"left\" size=\"sm\" closable style=\"--top: 48px\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading medium sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</nve-page>\n",
       "summary": "Use Drawer to create navigation that is outside the context of the current view.",
@@ -176,7 +176,7 @@
       "tags": []
     },
     {
-      "id": "core-page_interaction-panel-navigation",
+      "id": "page-interaction-panel-navigation",
       "name": "InteractionPanelNavigation",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"repo\" icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"ai\" icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"settings\" icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n  <nve-page-panel id=\"nav-panel\" slot=\"left\" size=\"sm\" hidden>\n    <nve-icon-button\n      commandfor=\"nav-panel\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"inline\"\n      icon-name=\"double-chevron\"\n      direction=\"left\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading medium sm\">git</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-menu id=\"repo\" hidden>\n        <nve-menu-item>Clone</nve-menu-item>\n        <nve-menu-item>Branch</nve-menu-item>\n        <nve-menu-item>Release</nve-menu-item>\n      </nve-menu>\n      <nve-menu id=\"ai\" hidden>\n        <nve-menu-item>Prompts</nve-menu-item>\n        <nve-menu-item>Models</nve-menu-item>\n        <nve-menu-item>Training</nve-menu-item>\n      </nve-menu>\n      <nve-menu id=\"settings\" hidden>\n        <nve-menu-item>Profile</nve-menu-item>\n        <nve-menu-item>Account</nve-menu-item>\n        <nve-menu-item>Logs</nve-menu-item>\n      </nve-menu>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n<script type=\"module\">\n  const toolbar = document.querySelector(\"nve-toolbar\");\n  const panelHeader = document.querySelector(\"nve-page-panel h3\");\n  const menus = Array.from(document.querySelectorAll(\"nve-page-panel nve-menu\"));\n  toolbar.addEventListener(\"click\", (e) => {\n    if (e.target.localName === \"nve-icon-button\") {\n      panelHeader.textContent = e.target.value;\n      menus.forEach((i) => (i.hidden = true));\n      menus.find((i) => i.id === e.target.value).hidden = false;\n    }\n  });\n</script>\n",
       "summary": "Use Page Panel with Toolbar to create complex navigation groups that are within the context of the current view.",
@@ -185,7 +185,7 @@
       "tags": []
     },
     {
-      "id": "core-page_panel-tabs",
+      "id": "page-panel-tabs",
       "name": "PanelTabs",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-header>\n      <nve-tabs behavior-select>\n        <nve-tabs-item selected>Tab 1</nve-tabs-item>\n        <nve-tabs-item>Tab 2</nve-tabs-item>\n        <nve-tabs-item>Tab 3</nve-tabs-item>\n      </nve-tabs>\n    </nve-page-panel-header>\n    <nve-page-panel-content> Panel Content </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n",
       "summary": "Page panel with tabbed header for switching between categorized content views within a sidebar. Use when a panel contains related sections like outline, search, and settings that share the same screen region.",
@@ -194,7 +194,7 @@
       "tags": []
     },
     {
-      "id": "core-page_panel-headings",
+      "id": "page-panel-headings",
       "name": "PanelHeadings",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-header>\n      <div nve-layout=\"column gap:xs\">\n        <h3 nve-text=\"heading medium sm\">Header</h3>\n        <h4 nve-text=\"body muted\">Sub Header</h4>\n      </div>\n    </nve-page-panel-header>\n    <nve-page-panel-content> Panel Content </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n",
       "summary": "Page panel with title and subtitle headings in the header for labeling panel content. Use to provide clear context about what the panel contains, such as a details pane or properties inspector.",
@@ -203,7 +203,7 @@
       "tags": []
     },
     {
-      "id": "core-page_document-scroll",
+      "id": "page-document-scroll",
       "name": "DocumentScroll",
       "template": "<nve-page document-scroll>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\" style=\"min-height: 110vh\">page content</p>\n  </main>\n  <nve-toolbar slot=\"footer\">\n    <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n    <a href=\"#\" nve-text=\"link sm\">logging</a>\n    <a href=\"#\" nve-text=\"link sm\">contact</a>\n  </nve-toolbar>\n</nve-page>\n",
       "summary": "Use document scroll for static content sites that do not require a fixed navigation.",
@@ -212,7 +212,7 @@
       "tags": []
     },
     {
-      "id": "core-page_kitchen-sink",
+      "id": "page-kitchen-sink",
       "name": "KitchenSink",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md align:stretch\">\n        <div nve-layout=\"row align:space-between align:vertical-center\">\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n            <h1 nve-text=\"heading lg\">Session 254a2039f294</h1>\n          </section>\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-button>Default</nve-button>\n            <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n          </section>\n        </div>\n        <section nve-layout=\"row gap:xl align:vertical-center\">\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Session ID</span>\n            <a nve-text=\"body sm bold link\" href=\"#\">254a2039f294</a>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Build</span>\n            <span nve-text=\"body sm bold\">254a2v1801</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Location</span>\n            <span nve-text=\"body sm bold\">Santa Clara</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Status</span>\n            <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n          </div>\n        </section>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"play\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add\"></nve-icon-button>\n      <nve-icon-button icon-name=\"delete\"></nve-icon-button>\n    </nve-button-group>\n    <nve-divider></nve-divider>\n    <nve-button-group>\n      <nve-icon-button icon-name=\"bounding-box\"></nve-icon-button>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"exclamation-triangle\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>\n      <nve-tree behavior-expand>\n        <nve-tree-node><a href=\"#\">Browse</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">Debug</a></nve-tree-node>\n        <nve-tree-node>\n          Events\n          <nve-tree-node><a href=\"#\">Alert</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">Badge</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">Dialog</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node expanded>\n          Sensors\n          <nve-tree-node><a href=\"#\">front_tele_30fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">front_wide_120fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">left_fisheye_200fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">right_fisheye_200fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">rear_left_70fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">rear_right_70fov</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node>\n          Segments\n          <nve-tree-node><a href=\"#\">JavaScript</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">HTML</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">CSS</a></nve-tree-node>\n        </nve-tree-node>\n      </nve-tree>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n    <div style=\"min-height: 100vh; width: 1px\"></div>\n  </main>\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n  <nve-toolbar slot=\"subfooter\">\n    <nve-icon-button icon-name=\"information-circle-stroke\"></nve-icon-button>\n    <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n  </nve-toolbar>\n  <nve-toolbar slot=\"footer\">\n    <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n    <a href=\"#\" nve-text=\"link sm\">logging</a>\n    <a href=\"#\" nve-text=\"link sm\">contact</a>\n  </nve-toolbar>\n</nve-page>\n",
       "summary": "Stress test of all available slot layouts for nve-page.",
@@ -223,29 +223,31 @@
       ]
     },
     {
-      "id": "core-page_layout-card-grid",
+      "id": "page-layout-card-grid",
       "name": "LayoutCardGrid",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <nve-search container=\"flat\">\n      <input type=\"search\" aria-label=\"search drives\" />\n    </nve-search>\n    <nve-button-group container=\"rounded\" behavior-select=\"single\" orientation=\"horizontal\">\n      <nve-icon-button icon-name=\"view-as-grid\" pressed></nve-icon-button>\n      <nve-icon-button icon-name=\"table\"></nve-icon-button>\n      <nve-icon-button icon-name=\"map\"></nve-icon-button>\n    </nve-button-group>\n    <section nve-layout=\"grid span-items:3 gap:md\">\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n\n      <nve-card style=\"height: 100%; width: 100%\">\n        <img\n          src=\"static/images/test-image-1.svg\"\n          alt=\"example visualization for media card demo\"\n          loading=\"lazy\"\n          style=\"width: 100%; object-fit: cover\"\n        />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n    </section>\n  </main>\n</nve-page>\n",
-      "summary": "Card grid page layout for browsable collections like infrastructure dashboards, asset catalogs, or media galleries. Use with view-mode toggles for switching between grid and table presentations.",
+      "summary": "Card grid page layout for browseable collections like infrastructure dashboards, asset catalogs, or media galleries. Use with view-mode toggles for switching between grid and table presentations.",
       "description": "",
       "composition": true,
       "tags": [
-        "pattern"
+        "pattern",
+        "test-case"
       ]
     },
     {
-      "id": "core-page_layout-multi-video",
+      "id": "page-layout-multi-video",
       "name": "LayoutMultiVideo",
       "template": "<style>\n  nve-page {\n    --padding: 0;\n  }\n  .videos {\n    display: grid;\n    align-content: center;\n    grid-template: auto auto auto / 1fr 1fr 1fr;\n    gap: var(--nve-ref-space-xxs);\n    margin: auto;\n    height: 95%;\n    width: 95%;\n    max-width: 1660px;\n    aspect-ratio: 16 / 9;\n  }\n</style>\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md align:stretch\">\n        <div nve-layout=\"row align:space-between align:vertical-center\">\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n            <h2 nve-text=\"heading lg\">Subheader Large</h2>\n          </section>\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-button>Default</nve-button>\n            <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n          </section>\n        </div>\n        <section nve-layout=\"row gap:xl align:vertical-center\">\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Driver</span>\n            <span nve-text=\"body sm bold\">Jane Doe</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Route</span>\n            <span nve-text=\"body sm bold\">Santa Clara</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Status</span>\n            <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n          </div>\n        </section>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content> content... </nve-page-panel-content>\n  </nve-page-panel>\n  <section class=\"videos\">\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-1.mp4\" type=\"video/mp4\" />\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-2.mp4\" type=\"video/mp4\" />\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-3.mp4\" type=\"video/mp4\" />\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-4.mp4\" type=\"video/mp4\" />\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-5.mp4\" type=\"video/mp4\" />\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-6.mp4\" type=\"video/mp4\" />\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-7.mp4\" type=\"video/mp4\" />\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-8.mp4\" type=\"video/mp4\" />\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-9.mp4\" type=\"video/mp4\" />\n    </video>\n  </section>\n  <nve-page-panel slot=\"bottom\" style=\"max-height: 100px\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column align:center\" style=\"max-width: 1024px; margin: 0 auto\">\n        <nve-range>\n          <input type=\"range\" min=\"0\" max=\"100\" value=\"0\" aria-label=\"video playback\" />\n        </nve-range>\n        <nve-button-group container=\"flat\">\n          <nve-icon-button icon-name=\"start\" aria-label=\"start\"></nve-icon-button>\n          <nve-icon-button icon-name=\"play\" aria-label=\"play/pause\"></nve-icon-button>\n          <nve-icon-button icon-name=\"start\" direction=\"down\" aria-label=\"end\"></nve-icon-button>\n        </nve-button-group>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n<script type=\"module\">\n  // DEMO CODE ONLY\n  const videos = Array.from(document.querySelectorAll(\"video\"));\n  const playButton = document.querySelector('nve-icon-button[aria-label=\"play/pause\"]');\n  const startButton = document.querySelector('nve-icon-button[aria-label=\"start\"]');\n  const endButton = document.querySelector('nve-icon-button[aria-label=\"end\"]');\n  const range = document.querySelector(\"nve-range input\");\n  class VideoGroup extends EventTarget {\n    playing = false;\n    videos = [];\n    get duration() {\n      return this.videos[0].duration;\n    }\n    get currentTime() {\n      return this.videos[0].currentTime;\n    }\n    constructor(videos = []) {\n      super();\n      this.videos = videos;\n      async function animate() {\n        if (this.playing && this.videos.every((video) => video.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA)) {\n          await this.#nextFrame();\n          if (this.duration === this.currentTime) {\n            this.pause();\n          }\n        }\n        requestAnimationFrame(animate.bind(this));\n      }\n      animate.call(this);\n    }\n    async #videoMetadataReady() {\n      if (this.videos[0].readyState === 0) {\n        return await new Promise((r) =>\n          this.videos[0].addEventListener(\"loadedmetadata\", () => r(null), { once: true }),\n        );\n      } else {\n        return new Promise((r) => r());\n      }\n    }\n    async play() {\n      await this.#videoMetadataReady();\n      if (this.videos[0].duration === this.videos[0].currentTime) {\n        await this.setCurrentTime(0);\n      }\n      this.playing = true;\n    }\n    pause() {\n      this.playing = false;\n    }\n    stop() {\n      this.pause();\n      this.setCurrentTime(0);\n    }\n    async #nextFrame() {\n      this.videos.forEach((video) => (video.currentTime = video.currentTime + this.videos[0].duration / 60));\n      await this.#timeUpdated();\n    }\n    async setCurrentTime(currentTime) {\n      this.videos.forEach((video) => (video.currentTime = currentTime));\n      await this.#timeUpdated();\n    }\n\n    async #timeUpdated() {\n      await Promise.all(\n        this.videos.map((video) => {\n          return new Promise((r) => video.addEventListener(\"timeupdate\", () => r(null), { once: true }));\n        }),\n      );\n      this.dispatchEvent(\n        new CustomEvent(\"timeupdate\", {\n          detail: { currentTime: this.currentTime, percentage: (this.currentTime / this.duration) * 100 },\n        }),\n      );\n    }\n  }\n  const videoGroup = new VideoGroup(videos);\n  videoGroup.addEventListener(\"timeupdate\", (e) => {\n    range.value = e.detail.percentage;\n  });\n  range.addEventListener(\"input\", (e) => {\n    videoGroup.setCurrentTime(videoGroup.duration * (range.value / 100));\n  });\n  startButton.addEventListener(\"click\", () => {\n    videoGroup.stop();\n  });\n  endButton.addEventListener(\"click\", () => {\n    videoGroup.setCurrentTime(videoGroup.duration);\n  });\n  playButton.addEventListener(\"click\", () => {\n    if (videoGroup.playing) {\n      playButton.iconName = \"play\";\n      videoGroup.pause();\n    } else {\n      playButton.iconName = \"pause\";\n      videoGroup.play();\n    }\n  });\n</script>\n",
       "summary": "Multi-video grid layout with synchronized playback controls for monitoring and review workflows. Ideal for surveillance dashboards, AV sensor feeds, or simulation playback where concurrent streams need simultaneous viewing.",
       "description": "",
       "composition": true,
       "tags": [
-        "pattern"
+        "pattern",
+        "test-case"
       ]
     },
     {
-      "id": "core-page_layout-editor",
+      "id": "page-layout-editor",
       "name": "LayoutEditor",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Playground</h2>\n    <nve-button container=\"flat\">Browse</nve-button>\n    <nve-button container=\"flat\">Editor</nve-button>\n    <nve-button container=\"flat\">Elements</nve-button>\n    <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-toolbar slot=\"subheader\">\n    <nve-icon-button slot=\"prefix\" icon-name=\"split-vertical\"></nve-icon-button>\n    <nve-divider slot=\"prefix\" orientation=\"vertical\"></nve-divider>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\" style=\"text-wrap: nowrap\">Project</h2>\n    <nve-button slot=\"suffix\" interaction=\"emphasis\">Save Project</nve-button>\n    <nve-icon-button slot=\"suffix\" icon-name=\"download\"></nve-icon-button>\n    <nve-divider slot=\"suffix\" orientation=\"vertical\"></nve-divider>\n    <nve-button-group slot=\"suffix\" container=\"rounded\">\n      <nve-icon-button icon-name=\"code\"></nve-icon-button>\n      <nve-icon-button selected icon-name=\"split-vertical\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-horizontal\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-none\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-header> Outline </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-tree behavior-expand>\n        <nve-tree-node><a href=\"#\">html</a></nve-tree-node>\n        <nve-tree-node expanded>\n          head\n          <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node expanded>\n          body\n          <nve-tree-node><a href=\"#\">nve-badge</a></nve-tree-node>\n        </nve-tree-node>\n      </nve-tree>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n  <nve-page-panel id=\"console-panel\" slot=\"bottom\" size=\"sm\">\n    <nve-icon-button\n      commandfor=\"console-panel\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"inline\"\n      icon-name=\"cancel\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n    <nve-page-panel-content>console output</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-toolbar slot=\"footer\">\n    <nve-icon-button icon-name=\"information-circle-stroke\"></nve-icon-button>\n    <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n  </nve-toolbar>\n</nve-page>\n",
       "summary": "IDE-style editor layout with file outline, main editor, and console panels. Use for code playgrounds, configuration editors, or development tools that need a split-pane workspace with toolbar controls.",
@@ -256,7 +258,7 @@
       ]
     },
     {
-      "id": "core-page_resize",
+      "id": "page-resize",
       "name": "Resize",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel style=\"width: 200px\" slot=\"left\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-resize-handle slot=\"left\" min=\"100\" max=\"400\" value=\"200\" step=\"20\" orientation=\"vertical\"></nve-resize-handle>\n</nve-page>\n<script type=\"module\">\n  const handle = document.querySelector(\"nve-resize-handle\");\n  const panel = document.querySelector(\"nve-page-panel\");\n  handle.addEventListener(\"input\", (e) => (panel.style.width = e.target.value + \"px\"));\n</script>\n",
       "summary": "Resizable left panel with drag handle for adjustable sidebar width. Use when users need to control the balance between navigation or outline panels and main content area.",
@@ -265,7 +267,7 @@
       "tags": []
     },
     {
-      "id": "core-page_resize-multi",
+      "id": "page-resize-multi",
       "name": "ResizeMulti",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel style=\"width: 320px\" slot=\"left\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-resize-handle slot=\"left\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n  <nve-resize-handle slot=\"bottom\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n  <nve-page-panel style=\"height: 320px\" slot=\"bottom\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-resize-handle\n    slot=\"right\"\n    dir=\"rtl\"\n    orientation=\"vertical\"\n    min=\"100\"\n    max=\"480\"\n    value=\"320\"\n    step=\"20\"\n  ></nve-resize-handle>\n  <nve-page-panel style=\"width: 320px\" slot=\"right\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n<script type=\"module\">\n  const leftHandle = document.querySelector(\"nve-resize-handle[slot=left]\");\n  const leftPanel = document.querySelector(\"nve-page-panel[slot=left]\");\n  leftHandle.addEventListener(\"input\", (e) => (leftPanel.style.width = e.target.value + \"px\"));\n  const rightHandle = document.querySelector(\"nve-resize-handle[slot=right]\");\n  const rightPanel = document.querySelector(\"nve-page-panel[slot=right]\");\n  rightHandle.addEventListener(\"input\", (e) => (rightPanel.style.width = e.target.value + \"px\"));\n  const bottomHandle = document.querySelector(\"nve-resize-handle[slot=bottom]\");\n  const bottomPanel = document.querySelector(\"nve-page-panel[slot=bottom]\");\n  bottomHandle.addEventListener(\"input\", (e) => (bottomPanel.style.height = e.target.value + \"px\"));\n</script>\n",
       "summary": "Multi-panel resizable layout with independent drag handles on left, right, and bottom panels. Use for complex workspaces like IDEs or dashboards where users need to customize the size of each content region independently.",
@@ -274,7 +276,7 @@
       "tags": []
     },
     {
-      "id": "core-page_resize-snap",
+      "id": "page-resize-snap",
       "name": "ResizeSnap",
       "template": "<nve-page style=\"--padding: var(--nve-ref-space-lg)\">\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <p nve-text=\"body\">Double click the resize handle to snap to the min or max.</p>\n  <nve-page-panel style=\"width: 320px\" slot=\"left\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-resize-handle slot=\"left\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n</nve-page>\n<script type=\"module\">\n  const leftHandle = document.querySelector(\"nve-resize-handle[slot=left]\");\n  const leftPanel = document.querySelector(\"nve-page-panel[slot=left]\");\n  leftHandle.addEventListener(\"input\", (e) => (leftPanel.style.width = e.target.value + \"px\"));\n</script>\n",
       "summary": "Resize handle with snap-to-boundary behavior on double-click for quickly toggling a panel between collapsed and expanded states. Use for detail panels that users frequently show and hide.",
@@ -283,7 +285,7 @@
       "tags": []
     },
     {
-      "id": "core-page_interaction-panel",
+      "id": "page-interaction-panel",
       "name": "InteractionPanel",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-icon-button slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\" closable hidden>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading medium sm\">Panel Header</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <p nve-text=\"body\">Panel Content</p>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n<script type=\"module\">\n  const button = document.querySelector('[aria-label=\"menu\"]');\n  const panel = document.querySelector(\"nve-page-panel\");\n  button.addEventListener(\"click\", () => (panel.hidden = !panel.hidden));\n  panel.addEventListener(\"close\", () => (panel.hidden = true));\n</script>\n",
       "summary": "Example of using explicit event listeners to control the state of a page panel.",
@@ -295,7 +297,7 @@
       ]
     },
     {
-      "id": "core-page_panel-expandable-state",
+      "id": "page-panel-expandable-state",
       "name": "PanelExpandableState",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel expandable slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n  <nve-page-panel expandable slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel expandable slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n",
       "summary": "Expandable page panels in left, right, and bottom slots.",
@@ -305,7 +307,7 @@
       "tags": []
     },
     {
-      "id": "core-page_panel-closable-state",
+      "id": "page-panel-closable-state",
       "name": "PanelClosableState",
       "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel closable slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n  <nve-page-panel closable slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel closable slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n",
       "summary": "Closable page panels in left, right, and bottom slots.",

package/dist/page/page2.js

@@ -16,7 +16,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-page",
-			version: "0.0.9"
+			version: "0.0.11"
 		};
 	}
 	static {

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

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/page-header/page-header.examples.json",
   "items": [
     {
-      "id": "core-page-header_default",
+      "id": "page-header",
       "name": "Default",
       "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n",
       "summary": "Basic page header with logo, navigation links, and user actions in a standard layout structure.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-page-header_dropdown-menu",
+      "id": "page-header-dropdown-menu",
       "name": "DropdownMenu",
       "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\" popovertarget=\"page-header-dropdown\"\n    >EL</nve-icon-button\n  >\n</nve-page-header>\n<nve-dropdown position=\"bottom\" id=\"page-header-dropdown\">\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-divider></nve-divider>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> Menu Item</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n",
       "summary": "Use dropdowns and menus to allow progressive disclosure of extra navigation or global user actions.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-page-header_menu-button",
+      "id": "page-header-menu-button",
       "name": "MenuButton",
       "template": "<nve-page-header>\n  <nve-icon-button slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n",
       "summary": "Use a Icon Button to represent collapsible top-level navigation, optimal for mobile or constrained viewport sizes.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-page-header_app-logo",
+      "id": "page-header-app-logo",
       "name": "AppLogo",
       "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"yellow-nova\">AV</nve-logo>\n  <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n  <nve-button container=\"flat\" selected><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n",
       "summary": "Use the Logo element when representing an application that is part of a suite of applications in a given problem domain.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-page-header_prefix-navigation",
+      "id": "page-header-prefix-navigation",
       "name": "PrefixNavigation",
       "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
       "summary": "Page header with primary navigation positioned after the logo and branding area.",
@@ -48,7 +48,7 @@
       "tags": []
     },
     {
-      "id": "core-page-header_center-navigation",
+      "id": "page-header-center-navigation",
       "name": "CenterNavigation",
       "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <div nve-layout=\"row align:center gap:xxs full\">\n    <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  </div>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
       "summary": "Page header with navigation centered in the available space for balanced visual hierarchy.",
@@ -57,7 +57,7 @@
       "tags": []
     },
     {
-      "id": "core-page-header_suffix-navigation",
+      "id": "page-header-suffix-navigation",
       "name": "SuffixNavigation",
       "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
       "summary": "Page header with all navigation positioned at the end for common and persistent user actions between page navigation.",
@@ -66,7 +66,7 @@
       "tags": []
     },
     {
-      "id": "core-page-header_search",
+      "id": "page-header-search",
       "name": "Search",
       "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-search slot=\"suffix\" rounded style=\"width: 220px\">\n    <input type=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n</nve-page-header>\n",
       "summary": "Page header with integrated search functionality for content discovery within the application.",
@@ -75,7 +75,7 @@
       "tags": []
     },
     {
-      "id": "core-page-header_user-detail",
+      "id": "page-header-user-detail",
       "name": "UserDetail",
       "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">GH</nve-icon-button>\n  <div slot=\"suffix\" nve-layout=\"column gap:md\">\n    <p nve-text=\"label sm trim:none\">Grace Hopper</p>\n    <p nve-text=\"body sm muted trim:none nowrap\">infra-0087ef65-19e80</p>\n  </div>\n</nve-page-header>\n",
       "summary": "Page header displaying user information and avatar for personalized application experiences.",

package/dist/page-header/page-header2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-page-header",
-			version: "0.0.9"
+			version: "0.0.11"
 		};
 	}
 	render() {

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

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/page-loader/page-loader.examples.json",
   "items": [
     {
-      "id": "core-page-loader_default",
+      "id": "page-loader",
       "name": "Default",
       "template": "<nve-page-loader></nve-page-loader>\n",
       "summary": "Full-page loading indicator displaying centered spinner for initial page load states.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-page-loader_interactive",
+      "id": "page-loader-interactive",
       "name": "Interactive",
       "template": "<nve-button id=\"loader-btn\">trigger loader</nve-button>\n<nve-page-loader hidden></nve-page-loader>\n<script type=\"module\">\n  let loader = document.querySelector(\"nve-page-loader\");\n  let btn = document.querySelector(\"#loader-btn\");\n  btn.addEventListener(\"click\", () => (loader.hidden = false));\n</script>\n",
       "summary": "Interactive page loader that starts programmatically via button click. Use when user actions such as form submissions, data refreshes, or navigation events start loading states rather than on initial page load.",