@nvidia-elements/core 2.23.5 → 2.24.0

package/dist/dashboard/dashboard.examples.json

@@ -0,0 +1,138 @@
+{
+  "element": "nve-dashboard",
+  "entrypoint": "@nvidia-elements/core/dashboard/dashboard.examples.json",
+  "items": [
+    {
+      "id": "dashboard",
+      "name": "Default",
+      "template": "<div id=\"default-dashboard-example\" nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:md align:space-between align:wrap\">\n    <nve-button id=\"reset-default-layout\">Reset layout</nve-button>\n  </div>\n  <nve-dashboard\n    id=\"default-dashboard\"\n    rearrangeable\n    style=\"height: 600px; --row-size: 90px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"hero-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"hero-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"hero-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"hero-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"hero-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"hero-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"hero-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"hero-changes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"hero-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"hero-notes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>\n        <nve-input>\n          <input aria-label=\"Notes\" value=\"Review findings.\" />\n        </nve-input>\n      </nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n  </nve-dashboard>\n  <script type=\"module\">\n    const example = document.querySelector(\"#default-dashboard-example\");\n    const dashboard = example.querySelector(\"nve-dashboard\");\n    const reset = example.querySelector(\"#reset-default-layout\");\n    const initialValue = dashboard.getAttribute(\"value\");\n    reset.addEventListener(\"click\", () => {\n      dashboard.value = initialValue;\n    });\n  </script>\n</div>\n",
+      "summary": "Arrange panels on a grid while retaining application content.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "dashboard-rearrangeable",
+      "name": "Rearrangeable",
+      "template": "<div id=\"rearrangeable-dashboard-example\" nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:md align:space-between align:wrap\">\n    <nve-button id=\"reset-rearrangeable-layout\">Reset layout</nve-button>\n    <nve-switch id=\"toggle-rearrangeable\">\n      <label>Rearrangeable</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n  </div>\n  <nve-dashboard\n    id=\"rearrangeable-dashboard\"\n    rearrangeable\n    style=\"height: 600px; --row-size: 90px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"rearrangeable-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rearrangeable-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rearrangeable-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rearrangeable-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rearrangeable-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"rearrangeable-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"rearrangeable-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"rearrangeable-changes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"rearrangeable-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"rearrangeable-notes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>\n        <nve-input>\n          <input aria-label=\"Notes\" value=\"Review findings.\" />\n        </nve-input>\n      </nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n  </nve-dashboard>\n  <script type=\"module\">\n    const example = document.querySelector(\"#rearrangeable-dashboard-example\");\n    const dashboard = example.querySelector(\"nve-dashboard\");\n    const toggle = example.querySelector(\"#toggle-rearrangeable input\");\n    const initialValue = dashboard.getAttribute(\"value\");\n    toggle.addEventListener(\"change\", () => {\n      dashboard.rearrangeable = toggle.checked;\n    });\n    example.querySelector(\"#reset-rearrangeable-layout\").addEventListener(\"click\", () => {\n      dashboard.value = initialValue;\n    });\n  </script>\n</div>\n",
+      "summary": "Rearrange and resize panels while retaining application content.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "dashboard-flow",
+      "name": "Flow",
+      "template": "<div id=\"flow-example\" nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:md align:space-between align:vertical-center align:wrap\">\n    <nve-button id=\"reset-flow-layout\">Reset layout</nve-button>\n    <nve-select layout=\"horizontal-inline\" fit-content>\n      <label>Flow</label>\n      <select id=\"flow-mode\">\n        <option value=\"vertical\" selected>Vertical</option>\n        <option value=\"horizontal\">Horizontal</option>\n      </select>\n    </nve-select>\n  </div>\n  <nve-dashboard\n    id=\"flow-dashboard\"\n    rearrangeable\n    style=\"height: 600px; --row-size: 90px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"flow-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"flow-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"flow-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"flow-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"flow-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"flow-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"flow-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"flow-changes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"flow-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"flow-notes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>\n        <nve-input>\n          <input aria-label=\"Notes\" value=\"Review findings.\" />\n        </nve-input>\n      </nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n  </nve-dashboard>\n  <script type=\"module\">\n    const example = document.querySelector(\"#flow-example\");\n    const dashboard = example.querySelector(\"nve-dashboard\");\n    const select = example.querySelector(\"#flow-mode\");\n    const initialLayout = JSON.parse(dashboard.getAttribute(\"value\"));\n    // Transpose the cells, keeping application content in the same panels.\n    function transposeForFlow(layout, flow) {\n      if (layout.grid.flow === flow) return layout;\n      return {\n        ...layout,\n        grid: { ...layout.grid, flow },\n        items: layout.items.map((item) => ({\n          ...item,\n          column: item.row,\n          row: item.column,\n          columnSpan: item.rowSpan,\n          rowSpan: item.columnSpan,\n        })),\n      };\n    }\n    select.addEventListener(\"change\", () => {\n      const layout = JSON.parse(dashboard.value);\n      dashboard.value = JSON.stringify(transposeForFlow(layout, select.value));\n    });\n    example.querySelector(\"#reset-flow-layout\").addEventListener(\"click\", () => {\n      dashboard.value = JSON.stringify(transposeForFlow(initialLayout, select.value));\n    });\n  </script>\n</div>\n",
+      "summary": "Grow vertically within bounded columns or horizontally within bounded rows.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "dashboard-sizing",
+      "name": "Sizing",
+      "template": "<div id=\"sizing-dashboard-example\" nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:md align:space-between align:vertical-center align:wrap\">\n    <nve-button id=\"reset-sizing-layout\">Reset layout</nve-button>\n    <div nve-layout=\"row gap:md align:vertical-center align:wrap\">\n      <nve-select layout=\"horizontal-inline\" fit-content>\n        <label>Sizing</label>\n        <select id=\"sizing-mode\">\n          <option value=\"fit\" selected>Fit</option>\n          <option value=\"fixed\">Fixed</option>\n        </select>\n      </nve-select>\n      <nve-range layout=\"horizontal-inline\" fit-content style=\"width: auto\">\n        <label>Viewport width: <output for=\"sizing-width\">100</output>%</label>\n        <input id=\"sizing-width\" type=\"range\" min=\"50\" max=\"100\" value=\"100\" />\n      </nve-range>\n    </div>\n  </div>\n  <div id=\"sizing-viewport\" style=\"width: 100%\">\n    <nve-dashboard\n      id=\"sizing-dashboard\"\n      rearrangeable\n      style=\"height: 600px; --row-size: 90px; --column-size: 140px\"\n      value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"sizing-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"sizing-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"sizing-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"sizing-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"sizing-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'\n    >\n      <nve-dashboard-panel id=\"sizing-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n        <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n        <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n        <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n      </nve-dashboard-panel>\n      <nve-dashboard-panel id=\"sizing-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n        <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n        <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n        <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n      </nve-dashboard-panel>\n      <nve-dashboard-panel id=\"sizing-changes\" min-column-span=\"2\" min-row-span=\"2\">\n        <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n        <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n      </nve-dashboard-panel>\n      <nve-dashboard-panel id=\"sizing-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n        <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n        <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n      </nve-dashboard-panel>\n      <nve-dashboard-panel id=\"sizing-notes\" min-column-span=\"2\" min-row-span=\"2\">\n        <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n        <nve-dashboard-panel-content>\n          <nve-input>\n            <input aria-label=\"Notes\" value=\"Review findings.\" />\n          </nve-input>\n        </nve-dashboard-panel-content>\n      </nve-dashboard-panel>\n    </nve-dashboard>\n  </div>\n  <script type=\"module\">\n    const example = document.querySelector(\"#sizing-dashboard-example\");\n    const dashboard = example.querySelector(\"nve-dashboard\");\n    const viewport = example.querySelector(\"#sizing-viewport\");\n    const select = example.querySelector(\"#sizing-mode\");\n    const range = example.querySelector(\"#sizing-width\");\n    const output = example.querySelector(\"output\");\n    const initialValue = dashboard.getAttribute(\"value\");\n    select.addEventListener(\"change\", () => {\n      dashboard.sizing = select.value;\n    });\n    range.addEventListener(\"input\", () => {\n      viewport.style.width = range.value + \"%\";\n      output.value = range.value;\n    });\n    example.querySelector(\"#reset-sizing-layout\").addEventListener(\"click\", () => {\n      dashboard.value = initialValue;\n    });\n  </script>\n</div>\n",
+      "summary": "Compare tracks fitted to the viewport with fixed CSS cell dimensions.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "dashboard-guides",
+      "name": "Guides",
+      "template": "<div id=\"guides-example\" nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:md align:space-between align:vertical-center align:wrap\">\n    <nve-button id=\"reset-guides-layout\">Reset layout</nve-button>\n    <nve-select layout=\"horizontal-inline\" fit-content>\n      <label>Guides</label>\n      <select id=\"guides-mode\">\n        <option value=\"auto\">Auto</option>\n        <option value=\"visible\" selected>Visible</option>\n        <option value=\"hidden\">Hidden</option>\n      </select>\n    </nve-select>\n  </div>\n  <nve-dashboard\n    id=\"guided-dashboard\"\n    guides=\"visible\"\n    rearrangeable\n    style=\"height: 702px; --row-size: 90px; --guide-size: var(--nve-ref-size-200)\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"guided-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"guided-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"guided-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"guided-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"guided-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"guided-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"guided-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"guided-changes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"guided-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"guided-notes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>\n        <nve-input>\n          <input aria-label=\"Notes\" value=\"Review findings.\" />\n        </nve-input>\n      </nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n  </nve-dashboard>\n  <script type=\"module\">\n    const example = document.querySelector(\"#guides-example\");\n    const dashboard = example.querySelector(\"nve-dashboard\");\n    const select = example.querySelector(\"#guides-mode\");\n    const initialValue = dashboard.getAttribute(\"value\");\n    select.addEventListener(\"change\", () => {\n      dashboard.guides = select.value;\n    });\n    example.querySelector(\"#reset-guides-layout\").addEventListener(\"click\", () => {\n      dashboard.value = initialValue;\n    });\n  </script>\n</div>\n",
+      "summary": "Choose when to show the grid guides.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "dashboard-auto-settle",
+      "name": "AutoSettle",
+      "template": "<div id=\"auto-settle-example\" nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:md align:space-between align:vertical-center align:wrap\">\n    <nve-button id=\"reset-settle-layout\">Reset layout</nve-button>\n    <nve-switch id=\"toggle-auto-settle\">\n      <label>Auto Settle</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n  </div>\n  <nve-dashboard\n    id=\"settle-dashboard\"\n    guides=\"visible\"\n    rearrangeable\n    style=\"height: 702px; --row-size: 90px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"settle-baseline\",\"column\":0,\"row\":1,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"settle-candidate\",\"column\":3,\"row\":1,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"settle-changes\",\"column\":0,\"row\":3,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"settle-evidence\",\"column\":3,\"row\":3,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"settle-notes\",\"column\":0,\"row\":5,\"columnSpan\":6,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"settle-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"settle-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"settle-changes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"settle-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"settle-notes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>\n        <nve-input>\n          <input aria-label=\"Notes\" value=\"Review findings.\" />\n        </nve-input>\n      </nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n  </nve-dashboard>\n  <script type=\"module\">\n    const example = document.querySelector(\"#auto-settle-example\");\n    const dashboard = example.querySelector(\"nve-dashboard\");\n    const toggle = example.querySelector(\"#toggle-auto-settle input\");\n    const initialValue = dashboard.getAttribute(\"value\");\n    toggle.addEventListener(\"change\", () => {\n      dashboard.autoSettle = toggle.checked;\n    });\n    example.querySelector(\"#reset-settle-layout\").addEventListener(\"click\", () => {\n      dashboard.autoSettle = false;\n      toggle.checked = false;\n      dashboard.value = initialValue;\n    });\n  </script>\n</div>\n",
+      "summary": "Automatically close gaps along the growth axis.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "dashboard-fullscreenable",
+      "name": "Fullscreenable",
+      "template": "<div id=\"fullscreen-dashboard-example\" nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:md align:space-between align:wrap\">\n    <nve-button id=\"reset-fullscreen-layout\">Reset layout</nve-button>\n    <nve-switch id=\"toggle-fullscreenable\">\n      <label>Fullscreenable</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n  </div>\n  <nve-dashboard\n    id=\"fullscreen-dashboard\"\n    fullscreenable\n    rearrangeable\n    style=\"height: 600px; --row-size: 90px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"fullscreen-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"fullscreen-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"fullscreen-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"fullscreen-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"fullscreen-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"fullscreen-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"fullscreen-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"fullscreen-changes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"fullscreen-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"fullscreen-notes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>\n        <nve-input>\n          <input aria-label=\"Notes\" value=\"Review findings.\" />\n        </nve-input>\n      </nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n  </nve-dashboard>\n  <script type=\"module\">\n    const example = document.querySelector(\"#fullscreen-dashboard-example\");\n    const dashboard = example.querySelector(\"nve-dashboard\");\n    const toggle = example.querySelector(\"#toggle-fullscreenable input\");\n    const initialValue = dashboard.getAttribute(\"value\");\n    toggle.addEventListener(\"change\", () => {\n      dashboard.fullscreenable = toggle.checked;\n    });\n    example.querySelector(\"#reset-fullscreen-layout\").addEventListener(\"click\", () => {\n      dashboard.value = initialValue;\n    });\n  </script>\n</div>\n",
+      "summary": "Present one panel in native fullscreen without changing the saved arrangement.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "dashboard-custom-panel-actions",
+      "name": "CustomPanelActions",
+      "template": "<nve-dashboard\n  id=\"actions-dashboard\"\n  rearrangeable\n  style=\"height: 600px; --row-size: 90px\"\n  value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"actions-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"actions-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"actions-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"actions-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"actions-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'\n>\n  <nve-dashboard-panel id=\"actions-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n    <nve-dashboard-panel-header>\n      Baseline\n      <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\" aria-label=\"Baseline actions\" value=\"actions-baseline\" popovertarget=\"dashboard-actions-menu\"></nve-icon-button>\n    </nve-dashboard-panel-header>\n    <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n    <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n  </nve-dashboard-panel>\n  <nve-dashboard-panel id=\"actions-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n    <nve-dashboard-panel-header>\n      Candidate\n      <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\" aria-label=\"Candidate actions\" value=\"actions-candidate\" popovertarget=\"dashboard-actions-menu\"></nve-icon-button>\n    </nve-dashboard-panel-header>\n    <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n    <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n  </nve-dashboard-panel>\n  <nve-dashboard-panel id=\"actions-changes\" min-column-span=\"2\" min-row-span=\"2\">\n    <nve-dashboard-panel-header>\n      Changes\n      <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\" aria-label=\"Changes actions\" value=\"actions-changes\" popovertarget=\"dashboard-actions-menu\"></nve-icon-button>\n    </nve-dashboard-panel-header>\n    <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n  </nve-dashboard-panel>\n  <nve-dashboard-panel id=\"actions-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n    <nve-dashboard-panel-header>\n      Evidence\n      <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\" aria-label=\"Evidence actions\" value=\"actions-evidence\" popovertarget=\"dashboard-actions-menu\"></nve-icon-button>\n    </nve-dashboard-panel-header>\n    <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n  </nve-dashboard-panel>\n  <nve-dashboard-panel id=\"actions-notes\" min-column-span=\"2\" min-row-span=\"2\">\n    <nve-dashboard-panel-header>\n      Notes\n      <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\" aria-label=\"Notes actions\" value=\"actions-notes\" popovertarget=\"dashboard-actions-menu\"></nve-icon-button>\n    </nve-dashboard-panel-header>\n    <nve-dashboard-panel-content>\n      <nve-input>\n        <input aria-label=\"Notes\" value=\"Review findings.\" />\n      </nve-input>\n    </nve-dashboard-panel-content>\n  </nve-dashboard-panel>\n  <nve-dropdown-group>\n    <nve-dropdown id=\"dashboard-actions-menu\">\n      <nve-menu>\n        <nve-menu-item popovertarget=\"dashboard-move-menu\">\n          Move\n          <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n        </nve-menu-item>\n        <nve-menu-item popovertarget=\"dashboard-shrink-menu\">\n          Shrink\n          <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n        </nve-menu-item>\n        <nve-menu-item popovertarget=\"dashboard-grow-menu\">\n          Grow\n          <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n        </nve-menu-item>\n      </nve-menu>\n    </nve-dropdown>\n    <nve-dropdown id=\"dashboard-move-menu\" position=\"right\">\n      <nve-menu>\n        <nve-menu-item commandfor=\"actions-dashboard\" command=\"--move-to-start\">To start</nve-menu-item>\n        <nve-menu-item commandfor=\"actions-dashboard\" command=\"--move-left\">Left</nve-menu-item>\n        <nve-menu-item commandfor=\"actions-dashboard\" command=\"--move-right\">Right</nve-menu-item>\n        <nve-menu-item commandfor=\"actions-dashboard\" command=\"--move-up\">Up</nve-menu-item>\n        <nve-menu-item commandfor=\"actions-dashboard\" command=\"--move-down\">Down</nve-menu-item>\n      </nve-menu>\n    </nve-dropdown>\n    <nve-dropdown id=\"dashboard-shrink-menu\" position=\"right\">\n      <nve-menu>\n        <nve-menu-item commandfor=\"actions-dashboard\" command=\"--decrease-width\">Width</nve-menu-item>\n        <nve-menu-item commandfor=\"actions-dashboard\" command=\"--decrease-height\">Height</nve-menu-item>\n      </nve-menu>\n    </nve-dropdown>\n    <nve-dropdown id=\"dashboard-grow-menu\" position=\"right\">\n      <nve-menu>\n        <nve-menu-item commandfor=\"actions-dashboard\" command=\"--increase-width\">Width</nve-menu-item>\n        <nve-menu-item commandfor=\"actions-dashboard\" command=\"--increase-height\">Height</nve-menu-item>\n      </nve-menu>\n    </nve-dropdown>\n  </nve-dropdown-group>\n  <script type=\"module\">\n    const dashboard = document.querySelector(\"#actions-dashboard\");\n    const dropdownGroup = dashboard.querySelector(\"nve-dropdown-group\");\n    let panelId = \"actions-baseline\";\n    function refresh() {\n      for (const item of dropdownGroup.querySelectorAll(\"[command]\")) {\n        item.value = panelId;\n        item.disabled = !dashboard.isCommandAvailable(item.command, { value: panelId });\n      }\n      for (const trigger of dropdownGroup.querySelectorAll(\"[popovertarget]\")) {\n        const items = trigger.popoverTargetElement.querySelectorAll(\"[command]\");\n        trigger.disabled = [...items].every((item) => item.disabled);\n      }\n    }\n    dropdownGroup.addEventListener(\n      \"beforetoggle\",\n      (event) => {\n        if (event.newState !== \"open\") return;\n        if (event.target.id === \"dashboard-actions-menu\") panelId = event.source?.value ?? panelId;\n        refresh();\n      },\n      true,\n    );\n    dashboard.addEventListener(\"commandavailabilitychange\", refresh);\n    dashboard.addEventListener(\"change\", (event) => {\n      if (event.target === dashboard) dropdownGroup.close();\n    });\n    refresh();\n  </script>\n</nve-dashboard>\n",
+      "summary": "Add custom menus that use invoker commands to move and resize panels.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "dashboard-dynamic-panels",
+      "name": "DynamicPanels",
+      "template": "<div id=\"dynamic-panels-example\" nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:md align:space-between align:wrap\">\n    <nve-button id=\"reset-dynamic-layout\">Reset layout</nve-button>\n    <div nve-layout=\"row gap:sm\">\n      <nve-button id=\"add-dynamic-notes\">Add Notes</nve-button>\n      <nve-button id=\"remove-dynamic-notes\" disabled>Remove Notes</nve-button>\n    </div>\n  </div>\n  <nve-dashboard\n    id=\"dynamic-dashboard\"\n    rearrangeable\n    style=\"height: 400px; --row-size: 90px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"dynamic-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"dynamic-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"dynamic-baseline\" min-column-span=\"3\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"dynamic-candidate\" min-column-span=\"3\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n  </nve-dashboard>\n  <template id=\"dynamic-notes-template\">\n        <nve-dashboard-panel id=\"dynamic-notes\" min-column-span=\"3\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </template>\n  <script type=\"module\">\n    const example = document.querySelector(\"#dynamic-panels-example\");\n    const dashboard = example.querySelector(\"nve-dashboard\");\n    const add = example.querySelector(\"#add-dynamic-notes\");\n    const remove = example.querySelector(\"#remove-dynamic-notes\");\n    const notes = example.querySelector(\"#dynamic-notes-template\").content.firstElementChild;\n    const initialValue = dashboard.getAttribute(\"value\");\n\n    add.addEventListener(\"click\", () => {\n      dashboard.append(notes);\n      add.disabled = true;\n      remove.disabled = false;\n    });\n\n    remove.addEventListener(\"click\", () => {\n      notes.remove();\n      add.disabled = false;\n      remove.disabled = true;\n    });\n\n    example.querySelector(\"#reset-dynamic-layout\").addEventListener(\"click\", () => {\n      dashboard.value = initialValue;\n    });\n  </script>\n</div>\n",
+      "summary": "Add and remove panels through the DOM while preserving application content.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "dashboard-save-restore",
+      "name": "SaveRestore",
+      "template": "<div nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:md align:space-between align:wrap\">\n    <nve-button id=\"reset-layout\">Reset layout</nve-button>\n    <div nve-layout=\"row gap:sm\">\n      <nve-button id=\"save-layout\">Save layout</nve-button>\n      <nve-button id=\"restore-layout\">Restore layout</nve-button>\n    </div>\n  </div>\n  <nve-dashboard\n    id=\"saved-layout\"\n    rearrangeable\n    style=\"height: 600px; --row-size: 90px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"saved-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"saved-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"saved-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"saved-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"saved-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"saved-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"saved-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"saved-changes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"saved-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"saved-notes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>\n        <nve-input>\n          <input aria-label=\"Notes\" value=\"Review findings.\" />\n        </nve-input>\n      </nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n  </nve-dashboard>\n  <script type=\"module\">\n    const dashboard = document.querySelector(\"#saved-layout\");\n    const save = document.querySelector(\"#save-layout\");\n    const restore = document.querySelector(\"#restore-layout\");\n    const reset = document.querySelector(\"#reset-layout\");\n    const initialValue = dashboard.getAttribute(\"value\");\n    let savedValue = initialValue;\n    save.addEventListener(\"click\", () => {\n      savedValue = dashboard.value;\n    });\n    restore.addEventListener(\"click\", () => {\n      dashboard.value = savedValue;\n    });\n    reset.addEventListener(\"click\", () => {\n      dashboard.value = initialValue;\n    });\n  </script>\n</div>\n",
+      "summary": "Save and restore panel placement without recreating application content.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "dashboard-container",
+      "name": "Container",
+      "template": "<div nve-layout=\"column gap:md\">\n  <nve-dashboard\n    container=\"inset\"\n    rearrangeable\n    style=\"height: 260px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":2},\"items\":[{\"id\":\"inset-baseline\",\"column\":0,\"row\":0,\"columnSpan\":1,\"rowSpan\":2},{\"id\":\"inset-candidate\",\"column\":1,\"row\":0,\"columnSpan\":1,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"inset-baseline\"\n      ><nve-dashboard-panel-header>Baseline (inset)</nve-dashboard-panel-header><nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content\n      ><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel\n    >\n    <nve-dashboard-panel id=\"inset-candidate\"\n      ><nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header><nve-dashboard-panel-content>Current run</nve-dashboard-panel-content\n      ><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel\n    >\n  </nve-dashboard>\n  <nve-dashboard\n    container=\"flat\"\n    rearrangeable\n    style=\"height: 260px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":2},\"items\":[{\"id\":\"flat-baseline\",\"column\":0,\"row\":0,\"columnSpan\":1,\"rowSpan\":2},{\"id\":\"flat-candidate\",\"column\":1,\"row\":0,\"columnSpan\":1,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"flat-baseline\"\n      ><nve-dashboard-panel-header>Baseline (flat)</nve-dashboard-panel-header><nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content\n      ><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel\n    >\n    <nve-dashboard-panel id=\"flat-candidate\"\n      ><nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header><nve-dashboard-panel-content>Current run</nve-dashboard-panel-content\n      ><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel\n    >\n  </nve-dashboard>\n  <nve-dashboard\n    container=\"full\"\n    rearrangeable\n    style=\"height: 260px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":2},\"items\":[{\"id\":\"full-baseline\",\"column\":0,\"row\":0,\"columnSpan\":1,\"rowSpan\":2},{\"id\":\"full-candidate\",\"column\":1,\"row\":0,\"columnSpan\":1,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"full-baseline\"\n      ><nve-dashboard-panel-header>Baseline (full)</nve-dashboard-panel-header><nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content\n      ><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel\n    >\n    <nve-dashboard-panel id=\"full-candidate\"\n      ><nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header><nve-dashboard-panel-content>Current run</nve-dashboard-panel-content\n      ><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel\n    >\n  </nve-dashboard>\n</div>\n",
+      "summary": "Match the surrounding layout with inset, flat, or full container framing.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "dashboard-compact-styling",
+      "name": "CompactStyling",
+      "template": "<div id=\"compact-dashboard-example\" nve-layout=\"column gap:md\">\n  <nve-button>Reset layout</nve-button>\n  <style>\n    #condensed-dashboard > nve-dashboard-panel {\n      --box-shadow: none;\n      --border-radius: 0;\n      --control-width: var(--nve-ref-size-600);\n      --control-height: var(--nve-ref-size-800);\n    }\n    #condensed-dashboard nve-dashboard-panel-header {\n      --min-height: var(--nve-ref-size-800);\n      --suffix-padding: var(--nve-ref-size-50);\n      --padding: var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-250);\n    }\n    #condensed-dashboard nve-dashboard-panel-footer {\n      --suffix-padding: var(--nve-ref-size-50);\n      --padding: var(--nve-ref-size-100) var(--nve-ref-size-250);\n    }\n  </style>\n  <nve-dashboard\n    id=\"condensed-dashboard\"\n    rearrangeable\n    style=\"height: 480px; --gap: 0px; --row-size: 80px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"condensed-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"condensed-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"condensed-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"condensed-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"condensed-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"condensed-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header><span nve-text=\"label sm semibold\">Baseline</span></nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer><span nve-text=\"body sm\">Complete</span></nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"condensed-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header><span nve-text=\"label sm semibold\">Candidate</span></nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer><span nve-text=\"body sm\">Complete</span></nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"condensed-changes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header><span nve-text=\"label sm semibold\">Changes</span></nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"condensed-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header><span nve-text=\"label sm semibold\">Evidence</span></nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"condensed-notes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header><span nve-text=\"label sm semibold\">Notes</span></nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>\n        <nve-input>\n          <input aria-label=\"Notes\" value=\"Review findings.\" />\n        </nve-input>\n      </nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n  </nve-dashboard>\n  <script type=\"module\">\n    const example = document.querySelector(\"#compact-dashboard-example\");\n    const dashboard = example.querySelector(\"nve-dashboard\");\n    const initialValue = dashboard.getAttribute(\"value\");\n    example.querySelector(\"nve-button\").addEventListener(\"click\", () => {\n      dashboard.value = initialValue;\n    });\n  </script>\n</div>\n",
+      "summary": "Customize header and footer spacing, control sizes, and panel corners for a compact dashboard.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "theme"
+      ]
+    },
+    {
+      "id": "dashboard-gap",
+      "name": "Gap",
+      "template": "<div id=\"dashboard-gap-example\" nve-layout=\"column gap:md\">\n  <nve-range>\n    <label>\n      Gap:\n      <output for=\"dashboard-gap-range\">0</output>\n      px\n    </label>\n    <input id=\"dashboard-gap-range\" type=\"range\" min=\"0\" max=\"24\" value=\"0\" />\n  </nve-range>\n  <nve-dashboard\n    id=\"gap-dashboard\"\n    container=\"full\"\n    rearrangeable\n    style=\"height: 600px; --row-size: 90px; --gap: 0px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"gap-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"gap-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"gap-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"gap-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"gap-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"gap-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"gap-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"gap-changes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"gap-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"gap-notes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>\n        <nve-input>\n          <input aria-label=\"Notes\" value=\"Review findings.\" />\n        </nve-input>\n      </nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n  </nve-dashboard>\n  <script type=\"module\">\n    const example = document.querySelector(\"#dashboard-gap-example\");\n    const dashboard = example.querySelector(\"nve-dashboard\");\n    const range = example.querySelector('input[type=\"range\"]');\n    const output = example.querySelector(\"output\");\n    range.addEventListener(\"input\", () => {\n      dashboard.style.setProperty(\"--gap\", range.value + \"px\");\n      output.value = range.value;\n    });\n  </script>\n</div>\n",
+      "summary": "Adjust spacing between panels with --gap. Zero joins borders with matching widths.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "dashboard-right-to-left",
+      "name": "RightToLeft",
+      "template": "<div id=\"rtl-dashboard-example\" nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:md align:space-between align:wrap\">\n    <nve-button id=\"reset-rtl-layout\">Reset layout</nve-button>\n  </div>\n  <nve-dashboard\n    id=\"rtl-dashboard\"\n    dir=\"rtl\"\n    rearrangeable\n    guides=\"visible\"\n    style=\"height: 600px; --row-size: 90px\"\n    value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"rtl-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rtl-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rtl-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rtl-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rtl-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'\n  >\n    <nve-dashboard-panel id=\"rtl-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"rtl-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n      <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"rtl-changes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"rtl-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n    <nve-dashboard-panel id=\"rtl-notes\" min-column-span=\"2\" min-row-span=\"2\">\n      <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n      <nve-dashboard-panel-content>\n        <nve-input>\n          <input aria-label=\"Notes\" value=\"Review findings.\" />\n        </nve-input>\n      </nve-dashboard-panel-content>\n    </nve-dashboard-panel>\n  </nve-dashboard>\n  <script type=\"module\">\n    const example = document.querySelector(\"#rtl-dashboard-example\");\n    const dashboard = example.querySelector(\"nve-dashboard\");\n    const reset = example.querySelector(\"#reset-rtl-layout\");\n    const initialValue = dashboard.getAttribute(\"value\");\n    reset.addEventListener(\"click\", () => {\n      dashboard.value = initialValue;\n    });\n  </script>\n</div>\n",
+      "summary": "Mirror panel placement and controls with the reading direction.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/dashboard/dashboard.js

@@ -0,0 +1,5 @@
+// src/dashboard/dashboard.css?inline
+var e = ":host{--column-size: 160px;--row-size: 120px;--gap: var(--nve-ref-space-sm);--_geometry-border-width: 0px;--_authored-gap: max(0px, var(--gap));--_geometry-overlap: calc(var(--_geometry-border-width) * (1 - sign(var(--_authored-gap))));--_geometry-spacing: calc(var(--_authored-gap) - var(--_geometry-overlap));--guide-color: var(--nve-ref-border-color-muted);--guide-size: var(--nve-ref-size-200);--height: 400px;--animation-duration: var(--nve-ref-animation-duration-150);--animation-easing: var(--nve-ref-animation-easing-100);display:block;width:100%;width:stretch;height:var(--height);min-width:0;min-height:0;contain:none}[internal-host]{height:100%;position:relative}.viewport{height:100%;width:100%;overflow:auto;position:relative;scrollbar-width:var(--nve-sys-scrollbar-width);scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color)}.viewport[data-sizing=fit][data-flow=vertical]{overflow:hidden scroll}.viewport[data-sizing=fit][data-flow=horizontal]{overflow:scroll hidden}.canvas{--_pitch-x: calc(var(--column-size) + var(--_geometry-spacing));--_pitch-y: calc(var(--row-size) + var(--_geometry-spacing));--_guide-center-x: calc((100% - var(--_geometry-spacing)) / 2);position:relative;isolation:isolate;overflow:clip}.canvas>slot{display:block;reading-flow:source-order}::slotted(nve-dashboard-panel:not(:state(placed))){display:none}::slotted(nve-dashboard-panel){left:var(--_dashboard-inline-start);right:auto;reading-order:var(--_reading-order, 0)}:host(:dir(rtl)) ::slotted(nve-dashboard-panel){left:auto;right:var(--_dashboard-inline-start)}.viewport[data-sizing=fit][data-flow=vertical] .canvas{--_pitch-x: calc((100% + var(--_geometry-spacing)) / var(--_tracks))}.viewport[data-sizing=fit][data-flow=horizontal] .canvas{--_pitch-y: calc((100% + var(--_geometry-spacing)) / var(--_tracks))}:host(:not([guides=\"hidden\" i])) .canvas[data-arranging],:host([guides=\"visible\" i]) .canvas{background-image:radial-gradient(circle at var(--_guide-center-x) calc((100% - var(--_geometry-spacing)) / 2),var(--guide-color) calc(var(--guide-size) / 2),transparent calc(var(--guide-size) / 2));background-size:var(--_pitch-x) var(--_pitch-y)}:host(:dir(rtl)) .canvas{--_guide-center-x: calc((100% + var(--_geometry-spacing)) / 2);background-position:right top}.metric,.gap-metric{position:absolute;pointer-events:none;visibility:hidden;contain:strict;top:0;left:0}.metric{width:var(--column-size);height:var(--row-size)}.gap-metric{width:var(--_authored-gap);height:var(--_geometry-overlap)}nve-ghost{position:absolute;left:var(--_dashboard-inline-start);right:auto;pointer-events:none;z-index:1;transition-property:left,right,top,width,height;transition-duration:var(--animation-duration);transition-timing-function:var(--animation-easing)}:host(:dir(rtl)) nve-ghost{left:auto;right:var(--_dashboard-inline-start)}.announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(prefers-reduced-motion:reduce){nve-ghost{transition-duration:0s}}.start-cue{position:absolute;inset:0 0 auto;height:var(--nve-ref-size-200);pointer-events:none;z-index:7;background-color:color-mix(in srgb,var(--nve-sys-accent-secondary-background) 16%,transparent)}.viewport[data-flow=horizontal] .start-cue{inset:0 auto;inset-inline-start:0;width:var(--nve-ref-size-200);height:auto}:host(:fullscreen){width:100%;height:100%;background:var(--nve-sys-layer-container-background)}.viewport[data-fullscreen][data-sizing]{overflow:hidden}.viewport[data-fullscreen] .canvas{background-image:none}";
+export { e as default };
+
+//# sourceMappingURL=dashboard.js.map

package/dist/dashboard/dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.js","names":["dashboard_default"],"sources":["../../src/dashboard/dashboard.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n:host {\n  --column-size: 160px;\n  --row-size: 120px;\n  --gap: var(--nve-ref-space-sm);\n  --_geometry-border-width: 0px;\n  --_authored-gap: max(0px, var(--gap));\n  --_geometry-overlap: calc(var(--_geometry-border-width) * (1 - sign(var(--_authored-gap))));\n  --_geometry-spacing: calc(var(--_authored-gap) - var(--_geometry-overlap));\n  --guide-color: var(--nve-ref-border-color-muted);\n  --guide-size: var(--nve-ref-size-200);\n  --height: 400px;\n  --animation-duration: var(--nve-ref-animation-duration-150);\n  --animation-easing: var(--nve-ref-animation-easing-100);\n  display: block;\n  width: 100%;\n  width: stretch;\n  height: var(--height);\n  min-width: 0;\n  min-height: 0;\n  contain: none;\n}\n\n[internal-host] {\n  height: 100%;\n  position: relative;\n}\n\n.viewport {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  position: relative;\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n}\n\n.viewport[data-sizing='fit'][data-flow='vertical'] {\n  overflow: hidden scroll;\n}\n\n.viewport[data-sizing='fit'][data-flow='horizontal'] {\n  overflow: scroll hidden;\n}\n\n.canvas {\n  --_pitch-x: calc(var(--column-size) + var(--_geometry-spacing));\n  --_pitch-y: calc(var(--row-size) + var(--_geometry-spacing));\n  --_guide-center-x: calc((100% - var(--_geometry-spacing)) / 2);\n  position: relative;\n  isolation: isolate;\n  overflow: clip;\n}\n\n.canvas > slot {\n  display: block;\n  reading-flow: source-order;\n}\n\n::slotted(nve-dashboard-panel:not(:state(placed))) {\n  display: none;\n}\n\n::slotted(nve-dashboard-panel) {\n  left: var(--_dashboard-inline-start);\n  right: auto;\n  reading-order: var(--_reading-order, 0);\n}\n\n:host(:dir(rtl)) ::slotted(nve-dashboard-panel) {\n  left: auto;\n  right: var(--_dashboard-inline-start);\n}\n\n.viewport[data-sizing='fit'][data-flow='vertical'] .canvas {\n  --_pitch-x: calc((100% + var(--_geometry-spacing)) / var(--_tracks));\n}\n\n.viewport[data-sizing='fit'][data-flow='horizontal'] .canvas {\n  --_pitch-y: calc((100% + var(--_geometry-spacing)) / var(--_tracks));\n}\n\n:host(:not([guides='hidden' i])) .canvas[data-arranging],\n:host([guides='visible' i]) .canvas {\n  background-image: radial-gradient(\n    circle at var(--_guide-center-x) calc((100% - var(--_geometry-spacing)) / 2),\n    var(--guide-color) calc(var(--guide-size) / 2),\n    transparent calc(var(--guide-size) / 2)\n  );\n  background-size: var(--_pitch-x) var(--_pitch-y);\n}\n\n:host(:dir(rtl)) .canvas {\n  --_guide-center-x: calc((100% + var(--_geometry-spacing)) / 2);\n  background-position: right top;\n}\n\n.metric,\n.gap-metric {\n  position: absolute;\n  pointer-events: none;\n  visibility: hidden;\n  contain: strict;\n  top: 0;\n  left: 0;\n}\n\n.metric {\n  width: var(--column-size);\n  height: var(--row-size);\n}\n\n.gap-metric {\n  width: var(--_authored-gap);\n  height: var(--_geometry-overlap);\n}\n\nnve-ghost {\n  position: absolute;\n  left: var(--_dashboard-inline-start);\n  right: auto;\n  pointer-events: none;\n  z-index: 1;\n  transition-property: left, right, top, width, height;\n  transition-duration: var(--animation-duration);\n  transition-timing-function: var(--animation-easing);\n}\n\n:host(:dir(rtl)) nve-ghost {\n  left: auto;\n  right: var(--_dashboard-inline-start);\n}\n\n.announcement {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  nve-ghost {\n    transition-duration: 0s;\n  }\n}\n\n.start-cue {\n  position: absolute;\n  inset: 0 0 auto;\n  height: var(--nve-ref-size-200);\n  pointer-events: none;\n  z-index: 7;\n  background-color: color-mix(in srgb, var(--nve-sys-accent-secondary-background) 16%, transparent);\n}\n\n.viewport[data-flow='horizontal'] .start-cue {\n  inset: 0 auto;\n  inset-inline-start: 0;\n  width: var(--nve-ref-size-200);\n  height: auto;\n}\n\n:host(:fullscreen) {\n  width: 100%;\n  height: 100%;\n  background: var(--nve-sys-layer-container-background);\n}\n\n.viewport[data-fullscreen][data-sizing] {\n  overflow: hidden;\n}\n\n.viewport[data-fullscreen] .canvas {\n  background-image: none;\n}\n"],"mappings":""}

package/dist/dashboard/dashboard.types.d.ts

@@ -0,0 +1,33 @@
+/** Zero-based grid placement. Columns count from inline start (right in RTL); rows count from the top. Spans are positive cell counts. */
+export interface DashboardGridPlacement {
+    readonly column: number;
+    readonly row: number;
+    readonly columnSpan: number;
+    readonly rowSpan: number;
+}
+export interface DashboardItem extends DashboardGridPlacement {
+    readonly id: string;
+}
+/** Grid and placements of the currently owned panels. */
+export interface DashboardLayout {
+    readonly version: 1;
+    readonly grid: {
+        readonly flow: 'vertical' | 'horizontal';
+        readonly tracks: number;
+    };
+    readonly items: readonly DashboardItem[];
+}
+/** Allowed panel spans in columns and rows, independent of pixel sizing. */
+export interface DashboardSpanConstraints {
+    readonly id: string;
+    readonly minColumnSpan: number;
+    readonly minRowSpan: number;
+    readonly maxColumnSpan: number;
+    readonly maxRowSpan: number;
+}
+export interface DashboardCommandContext {
+    /** Panel ID when a command targets the containing dashboard. */
+    readonly value?: string;
+    /** Integer grid placement for --place; --move-to-start uses only its bounded-axis coordinate. */
+    readonly placement?: DashboardGridPlacement;
+}