@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/grid/grid.examples.json

@@ -0,0 +1,431 @@
+{
+  "element": "nve-grid",
+  "entrypoint": "@nvidia-elements/core/grid/grid.examples.json",
+  "items": [
+    {
+      "id": "core-grid_default",
+      "name": "Default",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n    ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column\n    ><nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Basic data grid for tabular data display with columns and rows. Use grids for presenting structured datasets where users need to scan, compare, and analyze information across many columns, such as dashboards, reports, or data management interfaces.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_keynav",
+      "name": "Keynav",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column width=\"150px\">Key</nve-grid-column>\n    <nve-grid-column>Function</nve-grid-column>\n  </nve-grid-header>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <kbd>Right Arrow</kbd>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <ul nve-text=\"list\">\n        <li>Moves focus one cell to the right.</li>\n        <li>If focus is on the right-most cell in the row, focus does not move.</li>\n      </ul>\n    </nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <kbd>Left Arrow</kbd>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <ul nve-text=\"list\">\n        <li>Moves focus one cell to the left.</li>\n        <li>If focus is on the left-most cell in the row, focus does not move.</li>\n      </ul>\n    </nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <kbd>Down Arrow</kbd>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <ul nve-text=\"list\">\n        <li>Moves focus one cell down.</li>\n        <li>If focus is on the bottom cell in the column, focus does not move.</li>\n      </ul>\n    </nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <kbd>Up Arrow</kbd>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <ul nve-text=\"list\">\n        <li>Moves focus one cell Up.</li>\n        <li>If focus is on the top cell in the column, focus does not move.</li>\n      </ul>\n    </nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <kbd>Page Down</kbd>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <ul nve-text=\"list\">\n        <li>\n          In example 3, moves focus down five rows, scrolling so the bottom row in the currently visible set of rows\n          becomes the first visible row.\n        </li>\n        <li>If focus is in the last row, focus does not move.</li>\n      </ul>\n    </nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <kbd>Page Up</kbd>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <ul nve-text=\"list\">\n        <li>\n          In example 3, moves focus up 5 rows, scrolling so the top row in the currently visible set of rows becomes the\n          last visible row.\n        </li>\n        <li>If focus is in the first row of the grid, focus does not move.</li>\n      </ul>\n    </nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <kbd>Home</kbd>\n    </nve-grid-cell>\n    <nve-grid-cell>Moves focus to the first cell in the row that contains focus.</nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <kbd>End</kbd>\n    </nve-grid-cell>\n    <nve-grid-cell>Moves focus to the last cell in the row that contains focus.</nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell> <kbd>Control</kbd> + <kbd>Home</kbd> </nve-grid-cell>\n    <nve-grid-cell>Moves focus to the first cell in the first row.</nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell> <kbd>Control</kbd> + <kbd>End</kbd> </nve-grid-cell>\n    <nve-grid-cell>Moves focus to the last cell in the last row.</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "The datagrid follows the ARIA Authoring Practices Guide for standardized keyboard navigation.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_multi-select",
+      "name": "MultiSelect",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column width=\"max-content\" position=\"fixed\">\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select all rows\" />\n      </nve-checkbox>\n    </nve-grid-column>\n    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    <nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 0\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" checked aria-label=\"select row 1\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 2\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 3\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 4\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 5\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 6\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 7\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 8\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 9\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Multi-select rows with checkboxes for bulk operations. Use multi-select when users need to perform actions on many items at once (like delete, export, or bulk edit), placing checkboxes as the first column and setting the selected attribute for proper accessibility.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_bulk-actions",
+      "name": "BulkActions",
+      "template": "<nve-grid style=\"height: 400px\">\n  <nve-grid-header>\n    <nve-grid-column width=\"max-content\" position=\"fixed\">\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select all rows\" />\n      </nve-checkbox>\n    </nve-grid-column>\n    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    <nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 0\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" checked aria-label=\"select row 1\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 2\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 3\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 4\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 5\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 6\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 7\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 8\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 9\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 10\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 10-0</nve-grid-cell> <nve-grid-cell>cell 10-1</nve-grid-cell>\n    <nve-grid-cell>cell 10-2</nve-grid-cell> <nve-grid-cell>cell 10-3</nve-grid-cell>\n    <nve-grid-cell>cell 10-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 11\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 11-0</nve-grid-cell> <nve-grid-cell>cell 11-1</nve-grid-cell>\n    <nve-grid-cell>cell 11-2</nve-grid-cell> <nve-grid-cell>cell 11-3</nve-grid-cell>\n    <nve-grid-cell>cell 11-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 12\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 12-0</nve-grid-cell> <nve-grid-cell>cell 12-1</nve-grid-cell>\n    <nve-grid-cell>cell 12-2</nve-grid-cell> <nve-grid-cell>cell 12-3</nve-grid-cell>\n    <nve-grid-cell>cell 12-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 13\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 13-0</nve-grid-cell> <nve-grid-cell>cell 13-1</nve-grid-cell>\n    <nve-grid-cell>cell 13-2</nve-grid-cell> <nve-grid-cell>cell 13-3</nve-grid-cell>\n    <nve-grid-cell>cell 13-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 14\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 14-0</nve-grid-cell> <nve-grid-cell>cell 14-1</nve-grid-cell>\n    <nve-grid-cell>cell 14-2</nve-grid-cell> <nve-grid-cell>cell 14-3</nve-grid-cell>\n    <nve-grid-cell>cell 14-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 15\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 15-0</nve-grid-cell> <nve-grid-cell>cell 15-1</nve-grid-cell>\n    <nve-grid-cell>cell 15-2</nve-grid-cell> <nve-grid-cell>cell 15-3</nve-grid-cell>\n    <nve-grid-cell>cell 15-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 16\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 16-0</nve-grid-cell> <nve-grid-cell>cell 16-1</nve-grid-cell>\n    <nve-grid-cell>cell 16-2</nve-grid-cell> <nve-grid-cell>cell 16-3</nve-grid-cell>\n    <nve-grid-cell>cell 16-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 17\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 17-0</nve-grid-cell> <nve-grid-cell>cell 17-1</nve-grid-cell>\n    <nve-grid-cell>cell 17-2</nve-grid-cell> <nve-grid-cell>cell 17-3</nve-grid-cell>\n    <nve-grid-cell>cell 17-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 18\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 18-0</nve-grid-cell> <nve-grid-cell>cell 18-1</nve-grid-cell>\n    <nve-grid-cell>cell 18-2</nve-grid-cell> <nve-grid-cell>cell 18-3</nve-grid-cell>\n    <nve-grid-cell>cell 18-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-checkbox>\n        <input type=\"checkbox\" aria-label=\"select row 19\" />\n      </nve-checkbox>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 19-0</nve-grid-cell> <nve-grid-cell>cell 19-1</nve-grid-cell>\n    <nve-grid-cell>cell 19-2</nve-grid-cell> <nve-grid-cell>cell 19-3</nve-grid-cell>\n    <nve-grid-cell>cell 19-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-toolbar status=\"accent\" slot=\"footer\">\n    <nve-icon-button container=\"flat\" icon-name=\"cancel\" slot=\"prefix\"></nve-icon-button>\n    <p nve-text=\"body\">1 selected</p>\n    <nve-button container=\"flat\" interaction=\"destructive\" slot=\"suffix\">delete</nve-button>\n    <nve-icon-button container=\"flat\" icon-name=\"more-actions\" slot=\"suffix\"></nve-icon-button>\n  </nve-toolbar>\n</nve-grid>\n",
+      "summary": "Use bulk actions for operations on many items. Display only when rows have a selection. Closing bulk actions deselects all selected rows.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-grid_single-select",
+      "name": "SingleSelect",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column width=\"max-content\" position=\"fixed\"></nve-grid-column>\n    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    <nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-radio>\n        <input type=\"radio\" name=\"single-select\" value=\"0\" aria-label=\"select row 0\" />\n      </nve-radio>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-radio>\n        <input type=\"radio\" checked name=\"single-select\" value=\"1\" aria-label=\"select row 1\" />\n      </nve-radio>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-radio>\n        <input type=\"radio\" name=\"single-select\" value=\"2\" aria-label=\"select row 2\" />\n      </nve-radio>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-radio>\n        <input type=\"radio\" name=\"single-select\" value=\"3\" aria-label=\"select row 3\" />\n      </nve-radio>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-radio>\n        <input type=\"radio\" name=\"single-select\" value=\"4\" aria-label=\"select row 4\" />\n      </nve-radio>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-radio>\n        <input type=\"radio\" name=\"single-select\" value=\"5\" aria-label=\"select row 5\" />\n      </nve-radio>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-radio>\n        <input type=\"radio\" name=\"single-select\" value=\"6\" aria-label=\"select row 6\" />\n      </nve-radio>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-radio>\n        <input type=\"radio\" name=\"single-select\" value=\"7\" aria-label=\"select row 7\" />\n      </nve-radio>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-radio>\n        <input type=\"radio\" name=\"single-select\" value=\"8\" aria-label=\"select row 8\" />\n      </nve-radio>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-radio>\n        <input type=\"radio\" name=\"single-select\" value=\"9\" aria-label=\"select row 9\" />\n      </nve-radio>\n    </nve-grid-cell>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "A single select datagrid allows users to choose exactly one row from a data table by providing radio buttons in the first column, ensuring only one item has a selection at a time. To enable single select, place `nve-radio` input as the first grid cell of each row. Set `name` attribute on each radio to ensure to associate the same radio group.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_row-action",
+      "name": "RowAction",
+      "template": "<nve-dropdown id=\"row-actions-dropdown\" align=\"end\">\n  <nve-menu>\n    <nve-menu-item>action 1</nve-menu-item>\n    <nve-menu-item>action 2</nve-menu-item>\n    <nve-menu-item>action 3</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    <nve-grid-column>column 4</nve-grid-column>\n    <nve-grid-column width=\"max-content\" aria-label=\"additonal actions\" position=\"fixed\"></nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-icon-button\n        id=\"action-0\"\n        popovertarget=\"row-actions-dropdown\"\n        container=\"flat\"\n        icon-name=\"more-actions\"\n        aria-label=\"row 0 actions\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-icon-button\n        id=\"action-1\"\n        popovertarget=\"row-actions-dropdown\"\n        container=\"flat\"\n        icon-name=\"more-actions\"\n        aria-label=\"row 1 actions\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-icon-button\n        id=\"action-2\"\n        popovertarget=\"row-actions-dropdown\"\n        container=\"flat\"\n        icon-name=\"more-actions\"\n        aria-label=\"row 2 actions\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-icon-button\n        id=\"action-3\"\n        popovertarget=\"row-actions-dropdown\"\n        container=\"flat\"\n        icon-name=\"more-actions\"\n        aria-label=\"row 3 actions\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-icon-button\n        id=\"action-4\"\n        popovertarget=\"row-actions-dropdown\"\n        container=\"flat\"\n        icon-name=\"more-actions\"\n        aria-label=\"row 4 actions\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-icon-button\n        id=\"action-5\"\n        popovertarget=\"row-actions-dropdown\"\n        container=\"flat\"\n        icon-name=\"more-actions\"\n        aria-label=\"row 5 actions\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-icon-button\n        id=\"action-6\"\n        popovertarget=\"row-actions-dropdown\"\n        container=\"flat\"\n        icon-name=\"more-actions\"\n        aria-label=\"row 6 actions\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-icon-button\n        id=\"action-7\"\n        popovertarget=\"row-actions-dropdown\"\n        container=\"flat\"\n        icon-name=\"more-actions\"\n        aria-label=\"row 7 actions\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-icon-button\n        id=\"action-8\"\n        popovertarget=\"row-actions-dropdown\"\n        container=\"flat\"\n        icon-name=\"more-actions\"\n        aria-label=\"row 8 actions\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-icon-button\n        id=\"action-9\"\n        popovertarget=\"row-actions-dropdown\"\n        container=\"flat\"\n        icon-name=\"more-actions\"\n        aria-label=\"row 9 actions\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Row actions enable extra user actions specific to a given row. Place a `nve-icon-button` at the end of the grid row for actions.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-grid_row-groups",
+      "name": "RowGroups",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column width=\"max-content\" aria-label=\"expand groups\" position=\"fixed\"></nve-grid-column>\n    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    <nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-icon-button\n        icon-name=\"caret\"\n        container=\"flat\"\n        direction=\"right\"\n        aria-label=\"view session 2yuecae SSD uploads\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n    <nve-grid-cell>Session: 2yuecae</nve-grid-cell>\n    <nve-grid-cell>upload</nve-grid-cell>\n    <nve-grid-cell>pending</nve-grid-cell>\n    <nve-grid-cell>p3</nve-grid-cell>\n    <nve-grid-cell>12/04/22</nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row selected>\n    <nve-grid-cell>\n      <nve-icon-button\n        icon-name=\"caret\"\n        container=\"flat\"\n        direction=\"down\"\n        aria-label=\"view session mvwgh3t SSD uploads\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n    <nve-grid-cell>Session: mvwgh3t</nve-grid-cell>\n    <nve-grid-cell>upload</nve-grid-cell>\n    <nve-grid-cell>pending</nve-grid-cell>\n    <nve-grid-cell>p0</nve-grid-cell>\n    <nve-grid-cell>12/11/22</nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell></nve-grid-cell>\n    <nve-grid-cell>SSD: mvwgh3t</nve-grid-cell>\n    <nve-grid-cell>validating</nve-grid-cell>\n    <nve-grid-cell>pending</nve-grid-cell>\n    <nve-grid-cell>p0</nve-grid-cell>\n    <nve-grid-cell>12/11/22</nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell></nve-grid-cell>\n    <nve-grid-cell>SSD: qudbd8x</nve-grid-cell>\n    <nve-grid-cell>uploading</nve-grid-cell>\n    <nve-grid-cell>finished</nve-grid-cell>\n    <nve-grid-cell>p0</nve-grid-cell>\n    <nve-grid-cell>12/11/22</nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell></nve-grid-cell>\n    <nve-grid-cell>SSD: j8hvikt</nve-grid-cell>\n    <nve-grid-cell>queuing</nve-grid-cell>\n    <nve-grid-cell>running</nve-grid-cell>\n    <nve-grid-cell>p0</nve-grid-cell>\n    <nve-grid-cell>12/11/22</nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-icon-button\n        icon-name=\"caret\"\n        container=\"flat\"\n        direction=\"right\"\n        aria-label=\"view session bg5ujqp SSD uploads\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n    <nve-grid-cell>Session: bg5ujqp</nve-grid-cell>\n    <nve-grid-cell>upload</nve-grid-cell>\n    <nve-grid-cell>pending</nve-grid-cell>\n    <nve-grid-cell>p1</nve-grid-cell>\n    <nve-grid-cell>12/12/22</nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <nve-icon-button\n        icon-name=\"caret\"\n        container=\"flat\"\n        direction=\"right\"\n        aria-label=\"view session 6ruehvh SSD uploads\"\n      ></nve-icon-button>\n    </nve-grid-cell>\n    <nve-grid-cell>Session: 6ruehvh</nve-grid-cell>\n    <nve-grid-cell>upload</nve-grid-cell>\n    <nve-grid-cell>pending</nve-grid-cell>\n    <nve-grid-cell>p2</nve-grid-cell>\n    <nve-grid-cell>12/09/22</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Expandable row groups for hierarchical data organization. Use row groups when items have parent-child relationships or nested details (like sessions with uploads, orders with line items), allowing users to progressively disclose details and maintain compact views of large hierarchies.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_footer",
+      "name": "Footer",
+      "template": "<nve-grid style=\"height: 400px\">\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    <nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 10-0</nve-grid-cell> <nve-grid-cell>cell 10-1</nve-grid-cell>\n    <nve-grid-cell>cell 10-2</nve-grid-cell> <nve-grid-cell>cell 10-3</nve-grid-cell>\n    <nve-grid-cell>cell 10-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 11-0</nve-grid-cell> <nve-grid-cell>cell 11-1</nve-grid-cell>\n    <nve-grid-cell>cell 11-2</nve-grid-cell> <nve-grid-cell>cell 11-3</nve-grid-cell>\n    <nve-grid-cell>cell 11-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 12-0</nve-grid-cell> <nve-grid-cell>cell 12-1</nve-grid-cell>\n    <nve-grid-cell>cell 12-2</nve-grid-cell> <nve-grid-cell>cell 12-3</nve-grid-cell>\n    <nve-grid-cell>cell 12-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 13-0</nve-grid-cell> <nve-grid-cell>cell 13-1</nve-grid-cell>\n    <nve-grid-cell>cell 13-2</nve-grid-cell> <nve-grid-cell>cell 13-3</nve-grid-cell>\n    <nve-grid-cell>cell 13-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-footer>\n    <p nve-text=\"body\">footer content</p>\n  </nve-grid-footer>\n</nve-grid>\n",
+      "summary": "The footer displays contextual information or extra user actions such as pagination.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_pagination",
+      "name": "Pagination",
+      "template": "<nve-grid style=\"height: 370px\">\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    <nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-footer>\n    <nve-pagination value=\"1\" items=\"100\" step=\"10\"></nve-pagination>\n  </nve-grid-footer>\n</nve-grid>\n",
+      "summary": "Use the pagination pattern when working with large data sets that need incremental loading or filtering for performance or useability.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_scroll",
+      "name": "Scroll",
+      "template": "<nve-grid style=\"height: 402px\">\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    <nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 10-0</nve-grid-cell> <nve-grid-cell>cell 10-1</nve-grid-cell>\n    <nve-grid-cell>cell 10-2</nve-grid-cell> <nve-grid-cell>cell 10-3</nve-grid-cell>\n    <nve-grid-cell>cell 10-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 11-0</nve-grid-cell> <nve-grid-cell>cell 11-1</nve-grid-cell>\n    <nve-grid-cell>cell 11-2</nve-grid-cell> <nve-grid-cell>cell 11-3</nve-grid-cell>\n    <nve-grid-cell>cell 11-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 12-0</nve-grid-cell> <nve-grid-cell>cell 12-1</nve-grid-cell>\n    <nve-grid-cell>cell 12-2</nve-grid-cell> <nve-grid-cell>cell 12-3</nve-grid-cell>\n    <nve-grid-cell>cell 12-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 13-0</nve-grid-cell> <nve-grid-cell>cell 13-1</nve-grid-cell>\n    <nve-grid-cell>cell 13-2</nve-grid-cell> <nve-grid-cell>cell 13-3</nve-grid-cell>\n    <nve-grid-cell>cell 13-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 14-0</nve-grid-cell> <nve-grid-cell>cell 14-1</nve-grid-cell>\n    <nve-grid-cell>cell 14-2</nve-grid-cell> <nve-grid-cell>cell 14-3</nve-grid-cell>\n    <nve-grid-cell>cell 14-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 15-0</nve-grid-cell> <nve-grid-cell>cell 15-1</nve-grid-cell>\n    <nve-grid-cell>cell 15-2</nve-grid-cell> <nve-grid-cell>cell 15-3</nve-grid-cell>\n    <nve-grid-cell>cell 15-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 16-0</nve-grid-cell> <nve-grid-cell>cell 16-1</nve-grid-cell>\n    <nve-grid-cell>cell 16-2</nve-grid-cell> <nve-grid-cell>cell 16-3</nve-grid-cell>\n    <nve-grid-cell>cell 16-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 17-0</nve-grid-cell> <nve-grid-cell>cell 17-1</nve-grid-cell>\n    <nve-grid-cell>cell 17-2</nve-grid-cell> <nve-grid-cell>cell 17-3</nve-grid-cell>\n    <nve-grid-cell>cell 17-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 18-0</nve-grid-cell> <nve-grid-cell>cell 18-1</nve-grid-cell>\n    <nve-grid-cell>cell 18-2</nve-grid-cell> <nve-grid-cell>cell 18-3</nve-grid-cell>\n    <nve-grid-cell>cell 18-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 19-0</nve-grid-cell> <nve-grid-cell>cell 19-1</nve-grid-cell>\n    <nve-grid-cell>cell 19-2</nve-grid-cell> <nve-grid-cell>cell 19-3</nve-grid-cell>\n    <nve-grid-cell>cell 19-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 20-0</nve-grid-cell> <nve-grid-cell>cell 20-1</nve-grid-cell>\n    <nve-grid-cell>cell 20-2</nve-grid-cell> <nve-grid-cell>cell 20-3</nve-grid-cell>\n    <nve-grid-cell>cell 20-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 21-0</nve-grid-cell> <nve-grid-cell>cell 21-1</nve-grid-cell>\n    <nve-grid-cell>cell 21-2</nve-grid-cell> <nve-grid-cell>cell 21-3</nve-grid-cell>\n    <nve-grid-cell>cell 21-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 22-0</nve-grid-cell> <nve-grid-cell>cell 22-1</nve-grid-cell>\n    <nve-grid-cell>cell 22-2</nve-grid-cell> <nve-grid-cell>cell 22-3</nve-grid-cell>\n    <nve-grid-cell>cell 22-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 23-0</nve-grid-cell> <nve-grid-cell>cell 23-1</nve-grid-cell>\n    <nve-grid-cell>cell 23-2</nve-grid-cell> <nve-grid-cell>cell 23-3</nve-grid-cell>\n    <nve-grid-cell>cell 23-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 24-0</nve-grid-cell> <nve-grid-cell>cell 24-1</nve-grid-cell>\n    <nve-grid-cell>cell 24-2</nve-grid-cell> <nve-grid-cell>cell 24-3</nve-grid-cell>\n    <nve-grid-cell>cell 24-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 25-0</nve-grid-cell> <nve-grid-cell>cell 25-1</nve-grid-cell>\n    <nve-grid-cell>cell 25-2</nve-grid-cell> <nve-grid-cell>cell 25-3</nve-grid-cell>\n    <nve-grid-cell>cell 25-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 26-0</nve-grid-cell> <nve-grid-cell>cell 26-1</nve-grid-cell>\n    <nve-grid-cell>cell 26-2</nve-grid-cell> <nve-grid-cell>cell 26-3</nve-grid-cell>\n    <nve-grid-cell>cell 26-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 27-0</nve-grid-cell> <nve-grid-cell>cell 27-1</nve-grid-cell>\n    <nve-grid-cell>cell 27-2</nve-grid-cell> <nve-grid-cell>cell 27-3</nve-grid-cell>\n    <nve-grid-cell>cell 27-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 28-0</nve-grid-cell> <nve-grid-cell>cell 28-1</nve-grid-cell>\n    <nve-grid-cell>cell 28-2</nve-grid-cell> <nve-grid-cell>cell 28-3</nve-grid-cell>\n    <nve-grid-cell>cell 28-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 29-0</nve-grid-cell> <nve-grid-cell>cell 29-1</nve-grid-cell>\n    <nve-grid-cell>cell 29-2</nve-grid-cell> <nve-grid-cell>cell 29-3</nve-grid-cell>\n    <nve-grid-cell>cell 29-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 30-0</nve-grid-cell> <nve-grid-cell>cell 30-1</nve-grid-cell>\n    <nve-grid-cell>cell 30-2</nve-grid-cell> <nve-grid-cell>cell 30-3</nve-grid-cell>\n    <nve-grid-cell>cell 30-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 31-0</nve-grid-cell> <nve-grid-cell>cell 31-1</nve-grid-cell>\n    <nve-grid-cell>cell 31-2</nve-grid-cell> <nve-grid-cell>cell 31-3</nve-grid-cell>\n    <nve-grid-cell>cell 31-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 32-0</nve-grid-cell> <nve-grid-cell>cell 32-1</nve-grid-cell>\n    <nve-grid-cell>cell 32-2</nve-grid-cell> <nve-grid-cell>cell 32-3</nve-grid-cell>\n    <nve-grid-cell>cell 32-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 33-0</nve-grid-cell> <nve-grid-cell>cell 33-1</nve-grid-cell>\n    <nve-grid-cell>cell 33-2</nve-grid-cell> <nve-grid-cell>cell 33-3</nve-grid-cell>\n    <nve-grid-cell>cell 33-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 34-0</nve-grid-cell> <nve-grid-cell>cell 34-1</nve-grid-cell>\n    <nve-grid-cell>cell 34-2</nve-grid-cell> <nve-grid-cell>cell 34-3</nve-grid-cell>\n    <nve-grid-cell>cell 34-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 35-0</nve-grid-cell> <nve-grid-cell>cell 35-1</nve-grid-cell>\n    <nve-grid-cell>cell 35-2</nve-grid-cell> <nve-grid-cell>cell 35-3</nve-grid-cell>\n    <nve-grid-cell>cell 35-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 36-0</nve-grid-cell> <nve-grid-cell>cell 36-1</nve-grid-cell>\n    <nve-grid-cell>cell 36-2</nve-grid-cell> <nve-grid-cell>cell 36-3</nve-grid-cell>\n    <nve-grid-cell>cell 36-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 37-0</nve-grid-cell> <nve-grid-cell>cell 37-1</nve-grid-cell>\n    <nve-grid-cell>cell 37-2</nve-grid-cell> <nve-grid-cell>cell 37-3</nve-grid-cell>\n    <nve-grid-cell>cell 37-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 38-0</nve-grid-cell> <nve-grid-cell>cell 38-1</nve-grid-cell>\n    <nve-grid-cell>cell 38-2</nve-grid-cell> <nve-grid-cell>cell 38-3</nve-grid-cell>\n    <nve-grid-cell>cell 38-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 39-0</nve-grid-cell> <nve-grid-cell>cell 39-1</nve-grid-cell>\n    <nve-grid-cell>cell 39-2</nve-grid-cell> <nve-grid-cell>cell 39-3</nve-grid-cell>\n    <nve-grid-cell>cell 39-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 40-0</nve-grid-cell> <nve-grid-cell>cell 40-1</nve-grid-cell>\n    <nve-grid-cell>cell 40-2</nve-grid-cell> <nve-grid-cell>cell 40-3</nve-grid-cell>\n    <nve-grid-cell>cell 40-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 41-0</nve-grid-cell> <nve-grid-cell>cell 41-1</nve-grid-cell>\n    <nve-grid-cell>cell 41-2</nve-grid-cell> <nve-grid-cell>cell 41-3</nve-grid-cell>\n    <nve-grid-cell>cell 41-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 42-0</nve-grid-cell> <nve-grid-cell>cell 42-1</nve-grid-cell>\n    <nve-grid-cell>cell 42-2</nve-grid-cell> <nve-grid-cell>cell 42-3</nve-grid-cell>\n    <nve-grid-cell>cell 42-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 43-0</nve-grid-cell> <nve-grid-cell>cell 43-1</nve-grid-cell>\n    <nve-grid-cell>cell 43-2</nve-grid-cell> <nve-grid-cell>cell 43-3</nve-grid-cell>\n    <nve-grid-cell>cell 43-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 44-0</nve-grid-cell> <nve-grid-cell>cell 44-1</nve-grid-cell>\n    <nve-grid-cell>cell 44-2</nve-grid-cell> <nve-grid-cell>cell 44-3</nve-grid-cell>\n    <nve-grid-cell>cell 44-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 45-0</nve-grid-cell> <nve-grid-cell>cell 45-1</nve-grid-cell>\n    <nve-grid-cell>cell 45-2</nve-grid-cell> <nve-grid-cell>cell 45-3</nve-grid-cell>\n    <nve-grid-cell>cell 45-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 46-0</nve-grid-cell> <nve-grid-cell>cell 46-1</nve-grid-cell>\n    <nve-grid-cell>cell 46-2</nve-grid-cell> <nve-grid-cell>cell 46-3</nve-grid-cell>\n    <nve-grid-cell>cell 46-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 47-0</nve-grid-cell> <nve-grid-cell>cell 47-1</nve-grid-cell>\n    <nve-grid-cell>cell 47-2</nve-grid-cell> <nve-grid-cell>cell 47-3</nve-grid-cell>\n    <nve-grid-cell>cell 47-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 48-0</nve-grid-cell> <nve-grid-cell>cell 48-1</nve-grid-cell>\n    <nve-grid-cell>cell 48-2</nve-grid-cell> <nve-grid-cell>cell 48-3</nve-grid-cell>\n    <nve-grid-cell>cell 48-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 49-0</nve-grid-cell> <nve-grid-cell>cell 49-1</nve-grid-cell>\n    <nve-grid-cell>cell 49-2</nve-grid-cell> <nve-grid-cell>cell 49-3</nve-grid-cell>\n    <nve-grid-cell>cell 49-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 50-0</nve-grid-cell> <nve-grid-cell>cell 50-1</nve-grid-cell>\n    <nve-grid-cell>cell 50-2</nve-grid-cell> <nve-grid-cell>cell 50-3</nve-grid-cell>\n    <nve-grid-cell>cell 50-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 51-0</nve-grid-cell> <nve-grid-cell>cell 51-1</nve-grid-cell>\n    <nve-grid-cell>cell 51-2</nve-grid-cell> <nve-grid-cell>cell 51-3</nve-grid-cell>\n    <nve-grid-cell>cell 51-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 52-0</nve-grid-cell> <nve-grid-cell>cell 52-1</nve-grid-cell>\n    <nve-grid-cell>cell 52-2</nve-grid-cell> <nve-grid-cell>cell 52-3</nve-grid-cell>\n    <nve-grid-cell>cell 52-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 53-0</nve-grid-cell> <nve-grid-cell>cell 53-1</nve-grid-cell>\n    <nve-grid-cell>cell 53-2</nve-grid-cell> <nve-grid-cell>cell 53-3</nve-grid-cell>\n    <nve-grid-cell>cell 53-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 54-0</nve-grid-cell> <nve-grid-cell>cell 54-1</nve-grid-cell>\n    <nve-grid-cell>cell 54-2</nve-grid-cell> <nve-grid-cell>cell 54-3</nve-grid-cell>\n    <nve-grid-cell>cell 54-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 55-0</nve-grid-cell> <nve-grid-cell>cell 55-1</nve-grid-cell>\n    <nve-grid-cell>cell 55-2</nve-grid-cell> <nve-grid-cell>cell 55-3</nve-grid-cell>\n    <nve-grid-cell>cell 55-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 56-0</nve-grid-cell> <nve-grid-cell>cell 56-1</nve-grid-cell>\n    <nve-grid-cell>cell 56-2</nve-grid-cell> <nve-grid-cell>cell 56-3</nve-grid-cell>\n    <nve-grid-cell>cell 56-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 57-0</nve-grid-cell> <nve-grid-cell>cell 57-1</nve-grid-cell>\n    <nve-grid-cell>cell 57-2</nve-grid-cell> <nve-grid-cell>cell 57-3</nve-grid-cell>\n    <nve-grid-cell>cell 57-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 58-0</nve-grid-cell> <nve-grid-cell>cell 58-1</nve-grid-cell>\n    <nve-grid-cell>cell 58-2</nve-grid-cell> <nve-grid-cell>cell 58-3</nve-grid-cell>\n    <nve-grid-cell>cell 58-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 59-0</nve-grid-cell> <nve-grid-cell>cell 59-1</nve-grid-cell>\n    <nve-grid-cell>cell 59-2</nve-grid-cell> <nve-grid-cell>cell 59-3</nve-grid-cell>\n    <nve-grid-cell>cell 59-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 60-0</nve-grid-cell> <nve-grid-cell>cell 60-1</nve-grid-cell>\n    <nve-grid-cell>cell 60-2</nve-grid-cell> <nve-grid-cell>cell 60-3</nve-grid-cell>\n    <nve-grid-cell>cell 60-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 61-0</nve-grid-cell> <nve-grid-cell>cell 61-1</nve-grid-cell>\n    <nve-grid-cell>cell 61-2</nve-grid-cell> <nve-grid-cell>cell 61-3</nve-grid-cell>\n    <nve-grid-cell>cell 61-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 62-0</nve-grid-cell> <nve-grid-cell>cell 62-1</nve-grid-cell>\n    <nve-grid-cell>cell 62-2</nve-grid-cell> <nve-grid-cell>cell 62-3</nve-grid-cell>\n    <nve-grid-cell>cell 62-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 63-0</nve-grid-cell> <nve-grid-cell>cell 63-1</nve-grid-cell>\n    <nve-grid-cell>cell 63-2</nve-grid-cell> <nve-grid-cell>cell 63-3</nve-grid-cell>\n    <nve-grid-cell>cell 63-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 64-0</nve-grid-cell> <nve-grid-cell>cell 64-1</nve-grid-cell>\n    <nve-grid-cell>cell 64-2</nve-grid-cell> <nve-grid-cell>cell 64-3</nve-grid-cell>\n    <nve-grid-cell>cell 64-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 65-0</nve-grid-cell> <nve-grid-cell>cell 65-1</nve-grid-cell>\n    <nve-grid-cell>cell 65-2</nve-grid-cell> <nve-grid-cell>cell 65-3</nve-grid-cell>\n    <nve-grid-cell>cell 65-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 66-0</nve-grid-cell> <nve-grid-cell>cell 66-1</nve-grid-cell>\n    <nve-grid-cell>cell 66-2</nve-grid-cell> <nve-grid-cell>cell 66-3</nve-grid-cell>\n    <nve-grid-cell>cell 66-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 67-0</nve-grid-cell> <nve-grid-cell>cell 67-1</nve-grid-cell>\n    <nve-grid-cell>cell 67-2</nve-grid-cell> <nve-grid-cell>cell 67-3</nve-grid-cell>\n    <nve-grid-cell>cell 67-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 68-0</nve-grid-cell> <nve-grid-cell>cell 68-1</nve-grid-cell>\n    <nve-grid-cell>cell 68-2</nve-grid-cell> <nve-grid-cell>cell 68-3</nve-grid-cell>\n    <nve-grid-cell>cell 68-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 69-0</nve-grid-cell> <nve-grid-cell>cell 69-1</nve-grid-cell>\n    <nve-grid-cell>cell 69-2</nve-grid-cell> <nve-grid-cell>cell 69-3</nve-grid-cell>\n    <nve-grid-cell>cell 69-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 70-0</nve-grid-cell> <nve-grid-cell>cell 70-1</nve-grid-cell>\n    <nve-grid-cell>cell 70-2</nve-grid-cell> <nve-grid-cell>cell 70-3</nve-grid-cell>\n    <nve-grid-cell>cell 70-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 71-0</nve-grid-cell> <nve-grid-cell>cell 71-1</nve-grid-cell>\n    <nve-grid-cell>cell 71-2</nve-grid-cell> <nve-grid-cell>cell 71-3</nve-grid-cell>\n    <nve-grid-cell>cell 71-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 72-0</nve-grid-cell> <nve-grid-cell>cell 72-1</nve-grid-cell>\n    <nve-grid-cell>cell 72-2</nve-grid-cell> <nve-grid-cell>cell 72-3</nve-grid-cell>\n    <nve-grid-cell>cell 72-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 73-0</nve-grid-cell> <nve-grid-cell>cell 73-1</nve-grid-cell>\n    <nve-grid-cell>cell 73-2</nve-grid-cell> <nve-grid-cell>cell 73-3</nve-grid-cell>\n    <nve-grid-cell>cell 73-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 74-0</nve-grid-cell> <nve-grid-cell>cell 74-1</nve-grid-cell>\n    <nve-grid-cell>cell 74-2</nve-grid-cell> <nve-grid-cell>cell 74-3</nve-grid-cell>\n    <nve-grid-cell>cell 74-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 75-0</nve-grid-cell> <nve-grid-cell>cell 75-1</nve-grid-cell>\n    <nve-grid-cell>cell 75-2</nve-grid-cell> <nve-grid-cell>cell 75-3</nve-grid-cell>\n    <nve-grid-cell>cell 75-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 76-0</nve-grid-cell> <nve-grid-cell>cell 76-1</nve-grid-cell>\n    <nve-grid-cell>cell 76-2</nve-grid-cell> <nve-grid-cell>cell 76-3</nve-grid-cell>\n    <nve-grid-cell>cell 76-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 77-0</nve-grid-cell> <nve-grid-cell>cell 77-1</nve-grid-cell>\n    <nve-grid-cell>cell 77-2</nve-grid-cell> <nve-grid-cell>cell 77-3</nve-grid-cell>\n    <nve-grid-cell>cell 77-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 78-0</nve-grid-cell> <nve-grid-cell>cell 78-1</nve-grid-cell>\n    <nve-grid-cell>cell 78-2</nve-grid-cell> <nve-grid-cell>cell 78-3</nve-grid-cell>\n    <nve-grid-cell>cell 78-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 79-0</nve-grid-cell> <nve-grid-cell>cell 79-1</nve-grid-cell>\n    <nve-grid-cell>cell 79-2</nve-grid-cell> <nve-grid-cell>cell 79-3</nve-grid-cell>\n    <nve-grid-cell>cell 79-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 80-0</nve-grid-cell> <nve-grid-cell>cell 80-1</nve-grid-cell>\n    <nve-grid-cell>cell 80-2</nve-grid-cell> <nve-grid-cell>cell 80-3</nve-grid-cell>\n    <nve-grid-cell>cell 80-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 81-0</nve-grid-cell> <nve-grid-cell>cell 81-1</nve-grid-cell>\n    <nve-grid-cell>cell 81-2</nve-grid-cell> <nve-grid-cell>cell 81-3</nve-grid-cell>\n    <nve-grid-cell>cell 81-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 82-0</nve-grid-cell> <nve-grid-cell>cell 82-1</nve-grid-cell>\n    <nve-grid-cell>cell 82-2</nve-grid-cell> <nve-grid-cell>cell 82-3</nve-grid-cell>\n    <nve-grid-cell>cell 82-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 83-0</nve-grid-cell> <nve-grid-cell>cell 83-1</nve-grid-cell>\n    <nve-grid-cell>cell 83-2</nve-grid-cell> <nve-grid-cell>cell 83-3</nve-grid-cell>\n    <nve-grid-cell>cell 83-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 84-0</nve-grid-cell> <nve-grid-cell>cell 84-1</nve-grid-cell>\n    <nve-grid-cell>cell 84-2</nve-grid-cell> <nve-grid-cell>cell 84-3</nve-grid-cell>\n    <nve-grid-cell>cell 84-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 85-0</nve-grid-cell> <nve-grid-cell>cell 85-1</nve-grid-cell>\n    <nve-grid-cell>cell 85-2</nve-grid-cell> <nve-grid-cell>cell 85-3</nve-grid-cell>\n    <nve-grid-cell>cell 85-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 86-0</nve-grid-cell> <nve-grid-cell>cell 86-1</nve-grid-cell>\n    <nve-grid-cell>cell 86-2</nve-grid-cell> <nve-grid-cell>cell 86-3</nve-grid-cell>\n    <nve-grid-cell>cell 86-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 87-0</nve-grid-cell> <nve-grid-cell>cell 87-1</nve-grid-cell>\n    <nve-grid-cell>cell 87-2</nve-grid-cell> <nve-grid-cell>cell 87-3</nve-grid-cell>\n    <nve-grid-cell>cell 87-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 88-0</nve-grid-cell> <nve-grid-cell>cell 88-1</nve-grid-cell>\n    <nve-grid-cell>cell 88-2</nve-grid-cell> <nve-grid-cell>cell 88-3</nve-grid-cell>\n    <nve-grid-cell>cell 88-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 89-0</nve-grid-cell> <nve-grid-cell>cell 89-1</nve-grid-cell>\n    <nve-grid-cell>cell 89-2</nve-grid-cell> <nve-grid-cell>cell 89-3</nve-grid-cell>\n    <nve-grid-cell>cell 89-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 90-0</nve-grid-cell> <nve-grid-cell>cell 90-1</nve-grid-cell>\n    <nve-grid-cell>cell 90-2</nve-grid-cell> <nve-grid-cell>cell 90-3</nve-grid-cell>\n    <nve-grid-cell>cell 90-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 91-0</nve-grid-cell> <nve-grid-cell>cell 91-1</nve-grid-cell>\n    <nve-grid-cell>cell 91-2</nve-grid-cell> <nve-grid-cell>cell 91-3</nve-grid-cell>\n    <nve-grid-cell>cell 91-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 92-0</nve-grid-cell> <nve-grid-cell>cell 92-1</nve-grid-cell>\n    <nve-grid-cell>cell 92-2</nve-grid-cell> <nve-grid-cell>cell 92-3</nve-grid-cell>\n    <nve-grid-cell>cell 92-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 93-0</nve-grid-cell> <nve-grid-cell>cell 93-1</nve-grid-cell>\n    <nve-grid-cell>cell 93-2</nve-grid-cell> <nve-grid-cell>cell 93-3</nve-grid-cell>\n    <nve-grid-cell>cell 93-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 94-0</nve-grid-cell> <nve-grid-cell>cell 94-1</nve-grid-cell>\n    <nve-grid-cell>cell 94-2</nve-grid-cell> <nve-grid-cell>cell 94-3</nve-grid-cell>\n    <nve-grid-cell>cell 94-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 95-0</nve-grid-cell> <nve-grid-cell>cell 95-1</nve-grid-cell>\n    <nve-grid-cell>cell 95-2</nve-grid-cell> <nve-grid-cell>cell 95-3</nve-grid-cell>\n    <nve-grid-cell>cell 95-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 96-0</nve-grid-cell> <nve-grid-cell>cell 96-1</nve-grid-cell>\n    <nve-grid-cell>cell 96-2</nve-grid-cell> <nve-grid-cell>cell 96-3</nve-grid-cell>\n    <nve-grid-cell>cell 96-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 97-0</nve-grid-cell> <nve-grid-cell>cell 97-1</nve-grid-cell>\n    <nve-grid-cell>cell 97-2</nve-grid-cell> <nve-grid-cell>cell 97-3</nve-grid-cell>\n    <nve-grid-cell>cell 97-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 98-0</nve-grid-cell> <nve-grid-cell>cell 98-1</nve-grid-cell>\n    <nve-grid-cell>cell 98-2</nve-grid-cell> <nve-grid-cell>cell 98-3</nve-grid-cell>\n    <nve-grid-cell>cell 98-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 99-0</nve-grid-cell> <nve-grid-cell>cell 99-1</nve-grid-cell>\n    <nve-grid-cell>cell 99-2</nve-grid-cell> <nve-grid-cell>cell 99-3</nve-grid-cell>\n    <nve-grid-cell>cell 99-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-footer>footer</nve-grid-footer>\n</nve-grid>\n",
+      "summary": "Fixed-height scrollable grid with persistent header and footer. Use scrollable grids when displaying large datasets where users need to maintain context of column headers and footer controls (like pagination) while scrolling through many rows, improving navigation without losing orientation.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_scroll-position",
+      "name": "ScrollPosition",
+      "template": "<nve-grid id=\"scroll-position-grid\" style=\"height: 402px\">\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    <nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 10-0</nve-grid-cell> <nve-grid-cell>cell 10-1</nve-grid-cell>\n    <nve-grid-cell>cell 10-2</nve-grid-cell> <nve-grid-cell>cell 10-3</nve-grid-cell>\n    <nve-grid-cell>cell 10-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 11-0</nve-grid-cell> <nve-grid-cell>cell 11-1</nve-grid-cell>\n    <nve-grid-cell>cell 11-2</nve-grid-cell> <nve-grid-cell>cell 11-3</nve-grid-cell>\n    <nve-grid-cell>cell 11-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 12-0</nve-grid-cell> <nve-grid-cell>cell 12-1</nve-grid-cell>\n    <nve-grid-cell>cell 12-2</nve-grid-cell> <nve-grid-cell>cell 12-3</nve-grid-cell>\n    <nve-grid-cell>cell 12-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 13-0</nve-grid-cell> <nve-grid-cell>cell 13-1</nve-grid-cell>\n    <nve-grid-cell>cell 13-2</nve-grid-cell> <nve-grid-cell>cell 13-3</nve-grid-cell>\n    <nve-grid-cell>cell 13-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 14-0</nve-grid-cell> <nve-grid-cell>cell 14-1</nve-grid-cell>\n    <nve-grid-cell>cell 14-2</nve-grid-cell> <nve-grid-cell>cell 14-3</nve-grid-cell>\n    <nve-grid-cell>cell 14-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 15-0</nve-grid-cell> <nve-grid-cell>cell 15-1</nve-grid-cell>\n    <nve-grid-cell>cell 15-2</nve-grid-cell> <nve-grid-cell>cell 15-3</nve-grid-cell>\n    <nve-grid-cell>cell 15-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 16-0</nve-grid-cell> <nve-grid-cell>cell 16-1</nve-grid-cell>\n    <nve-grid-cell>cell 16-2</nve-grid-cell> <nve-grid-cell>cell 16-3</nve-grid-cell>\n    <nve-grid-cell>cell 16-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 17-0</nve-grid-cell> <nve-grid-cell>cell 17-1</nve-grid-cell>\n    <nve-grid-cell>cell 17-2</nve-grid-cell> <nve-grid-cell>cell 17-3</nve-grid-cell>\n    <nve-grid-cell>cell 17-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 18-0</nve-grid-cell> <nve-grid-cell>cell 18-1</nve-grid-cell>\n    <nve-grid-cell>cell 18-2</nve-grid-cell> <nve-grid-cell>cell 18-3</nve-grid-cell>\n    <nve-grid-cell>cell 18-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 19-0</nve-grid-cell> <nve-grid-cell>cell 19-1</nve-grid-cell>\n    <nve-grid-cell>cell 19-2</nve-grid-cell> <nve-grid-cell>cell 19-3</nve-grid-cell>\n    <nve-grid-cell>cell 19-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-footer>\n    <nve-button id=\"scroll-top-button\">scroll top</nve-button>\n  </nve-grid-footer>\n</nve-grid>\n<script type=\"module\">\n  const grid = document.querySelector(\"#scroll-position-grid\");\n  const button = document.querySelector(\"#scroll-top-button\");\n  button.addEventListener(\"click\", () => {\n    grid.scrollTo({ top: 0, behavior: \"smooth\" });\n  });\n</script>\n",
+      "summary": "Programmatic scroll control using the grid `scrollTo` API. Use for scroll-to-top buttons, jump-to-row navigation, or restoring scroll position after data refreshes in large datasets.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_full-height",
+      "name": "FullHeight",
+      "template": "<section\n  nve-layout=\"column gap:lg\"\n  style=\"\n    height: 500px;\n    padding: var(--nve-ref-size-100);\n    border: 1px solid var(--nve-ref-border-color-emphasis);\n    resize: vertical;\n    overflow: hidden;\n  \"\n>\n  <nve-search>\n    <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n  </nve-search>\n  <nve-grid style=\"height: 100%; min-height: 0\">\n    <nve-grid-header>\n      <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n      <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n      <nve-grid-column>column 4</nve-grid-column>\n    </nve-grid-header>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n      <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n      <nve-grid-cell>cell 0-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n      <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n      <nve-grid-cell>cell 1-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n      <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n      <nve-grid-cell>cell 2-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n      <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n      <nve-grid-cell>cell 3-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n      <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n      <nve-grid-cell>cell 4-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n      <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n      <nve-grid-cell>cell 5-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n      <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n      <nve-grid-cell>cell 6-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n      <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n      <nve-grid-cell>cell 7-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n      <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n      <nve-grid-cell>cell 8-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n      <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n      <nve-grid-cell>cell 9-4</nve-grid-cell>\n    </nve-grid-row>\n  </nve-grid>\n</section>\n",
+      "summary": "Using `nve-layout=\"column\"` the grid to fill any remaining space of a parent containing element. This is helpful for preserving the grid height/fill while dynamic content above can freely change.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_column-action",
+      "name": "ColumnAction",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>\n      column 0\n      <nve-icon-button\n        container=\"flat\"\n        popovertarget=\"grid-column-action-dropdown\"\n        icon-name=\"more-actions\"\n        slot=\"actions\"\n      ></nve-icon-button>\n    </nve-grid-column>\n    <nve-grid-column>\n      column 1\n      <nve-icon-button\n        container=\"flat\"\n        popovertarget=\"grid-column-action-dropdown\"\n        icon-name=\"more-actions\"\n        slot=\"actions\"\n      ></nve-icon-button>\n    </nve-grid-column>\n    <nve-grid-column>\n      column 2\n      <nve-icon-button\n        container=\"flat\"\n        popovertarget=\"grid-column-action-dropdown\"\n        icon-name=\"more-actions\"\n        slot=\"actions\"\n      ></nve-icon-button>\n    </nve-grid-column>\n    <nve-grid-column>\n      column 3\n      <nve-icon-button\n        container=\"flat\"\n        popovertarget=\"grid-column-action-dropdown\"\n        icon-name=\"more-actions\"\n        slot=\"actions\"\n      ></nve-icon-button>\n    </nve-grid-column>\n    <nve-grid-column>\n      column 4\n      <nve-icon-button\n        container=\"flat\"\n        popovertarget=\"grid-column-action-dropdown\"\n        icon-name=\"more-actions\"\n        slot=\"actions\"\n      ></nve-icon-button>\n    </nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n<nve-dropdown id=\"grid-column-action-dropdown\">\n  <nve-search rounded>\n    <input type=\"search\" placeholder=\"search column\" aria-label=\"search apps\" />\n  </nve-search>\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n",
+      "summary": "Create column actions by using the `nve-icon-button` to trigger dropdowns or panels that reveal more actions to the user.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-grid_column-width",
+      "name": "ColumnWidth",
+      "template": "<nve-grid style=\"height: 400px\">\n  <nve-grid-header>\n    <nve-grid-column width=\"300px\">column 0</nve-grid-column> <nve-grid-column width=\"300px\">column 1</nve-grid-column>\n    <nve-grid-column width=\"300px\">column 2</nve-grid-column> <nve-grid-column width=\"300px\">column 3</nve-grid-column>\n    <nve-grid-column width>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-footer>footer content</nve-grid-footer>\n</nve-grid>\n",
+      "summary": "Column width control for responsive grid layouts, enabling flexible content sizing and optimal space usage across different screen sizes.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_content",
+      "name": "Content",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    <nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Basic grid content display with evenly distributed columns, including standard data presentation and cell content wrapping behavior.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_column-fixed",
+      "name": "ColumnFixed",
+      "template": "<nve-grid style=\"height: 400px; max-width: 800px\">\n  <nve-grid-header>\n    <nve-grid-column position=\"fixed\" width=\"200px\">column 0</nve-grid-column>\n    <nve-grid-column position width=\"200px\">column 1</nve-grid-column>\n    <nve-grid-column position width=\"200px\">column 2</nve-grid-column>\n    <nve-grid-column position width=\"200px\">column 3</nve-grid-column>\n    <nve-grid-column position width=\"200px\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Fix columns to any given side, but keep fixed columns from spanning past the half way point of the grid.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_column-multi-fixed",
+      "name": "ColumnMultiFixed",
+      "template": "<nve-grid style=\"height: 400px; max-width: 800px\">\n  <nve-grid-header>\n    <nve-grid-column position=\"fixed\" width=\"200px\">column 0</nve-grid-column\n    ><nve-grid-column position width=\"200px\">column 1</nve-grid-column\n    ><nve-grid-column position width=\"200px\">column 2</nve-grid-column\n    ><nve-grid-column position width=\"200px\">column 3</nve-grid-column\n    ><nve-grid-column position=\"fixed\" width=\"200px\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_column-stack-fixed",
+      "name": "ColumnStackFixed",
+      "template": "<nve-grid style=\"height: 400px; max-width: 800px\">\n  <nve-grid-header>\n    <nve-grid-column position=\"fixed\" width=\"100px\">Column 1</nve-grid-column>\n    <nve-grid-column position=\"fixed\" width=\"100px\">Column 2</nve-grid-column>\n    <nve-grid-column width=\"200px\">Column 3</nve-grid-column>\n    <nve-grid-column width=\"200px\">Column 4</nve-grid-column>\n    <nve-grid-column width=\"200px\">Column 5</nve-grid-column>\n    <nve-grid-column width=\"200px\">Column 6</nve-grid-column>\n    <nve-grid-column position=\"fixed\" width=\"100px\">Column 7</nve-grid-column>\n    <nve-grid-column position=\"fixed\" width=\"100px\">Column 8</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    <nve-grid-cell>cell 0-4</nve-grid-cell> <nve-grid-cell>cell 0-5</nve-grid-cell>\n    <nve-grid-cell>cell 0-6</nve-grid-cell> <nve-grid-cell>cell 0-7</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell> <nve-grid-cell>cell 1-5</nve-grid-cell>\n    <nve-grid-cell>cell 1-6</nve-grid-cell> <nve-grid-cell>cell 1-7</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    <nve-grid-cell>cell 2-4</nve-grid-cell> <nve-grid-cell>cell 2-5</nve-grid-cell>\n    <nve-grid-cell>cell 2-6</nve-grid-cell> <nve-grid-cell>cell 2-7</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n    <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    <nve-grid-cell>cell 3-4</nve-grid-cell> <nve-grid-cell>cell 3-5</nve-grid-cell>\n    <nve-grid-cell>cell 3-6</nve-grid-cell> <nve-grid-cell>cell 3-7</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n    <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    <nve-grid-cell>cell 4-4</nve-grid-cell> <nve-grid-cell>cell 4-5</nve-grid-cell>\n    <nve-grid-cell>cell 4-6</nve-grid-cell> <nve-grid-cell>cell 4-7</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n    <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    <nve-grid-cell>cell 5-4</nve-grid-cell> <nve-grid-cell>cell 5-5</nve-grid-cell>\n    <nve-grid-cell>cell 5-6</nve-grid-cell> <nve-grid-cell>cell 5-7</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n    <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    <nve-grid-cell>cell 6-4</nve-grid-cell> <nve-grid-cell>cell 6-5</nve-grid-cell>\n    <nve-grid-cell>cell 6-6</nve-grid-cell> <nve-grid-cell>cell 6-7</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n    <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    <nve-grid-cell>cell 7-4</nve-grid-cell> <nve-grid-cell>cell 7-5</nve-grid-cell>\n    <nve-grid-cell>cell 7-6</nve-grid-cell> <nve-grid-cell>cell 7-7</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n    <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    <nve-grid-cell>cell 8-4</nve-grid-cell> <nve-grid-cell>cell 8-5</nve-grid-cell>\n    <nve-grid-cell>cell 8-6</nve-grid-cell> <nve-grid-cell>cell 8-7</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n    <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    <nve-grid-cell>cell 9-4</nve-grid-cell> <nve-grid-cell>cell 9-5</nve-grid-cell>\n    <nve-grid-cell>cell 9-6</nve-grid-cell> <nve-grid-cell>cell 9-7</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Stack and fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_column-dynamic-fixed",
+      "name": "ColumnDynamicFixed",
+      "template": "<nve-grid id=\"column-dynamic-fixed-grid\" style=\"height: 400px\">\n  <nve-grid-header>\n    <nve-grid-column width=\"200px\" position=\"fixed\">column 0</nve-grid-column\n    ><nve-grid-column width=\"200px\" position>column 1</nve-grid-column\n    ><nve-grid-column width=\"200px\" position>column 2</nve-grid-column\n    ><nve-grid-column width=\"200px\" position>column 3</nve-grid-column\n    ><nve-grid-column width=\"200px\" position=\"fixed\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-footer>\n    <nve-button container=\"flat\">add column</nve-button>\n  </nve-grid-footer>\n</nve-grid>\n<script type=\"module\">\n  const grid = document.querySelector(\"#column-dynamic-fixed-grid\");\n  const button = grid.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const columns = Array.from(grid.querySelectorAll(\"nve-grid-column\"));\n    columns.filter((_, i) => i !== 0).forEach((column) => (column.position = null));\n    // add new column\n    const newColumn = document.createElement(\"nve-grid-column\");\n    newColumn.position = \"fixed\";\n    newColumn.width = \"200px\";\n    newColumn.textContent = \"column \" + columns.length;\n    grid.querySelector(\"nve-grid-header\").appendChild(newColumn);\n    // add new cell to each row to the end\n    grid.querySelectorAll(\"nve-grid-row\").forEach((row, i) => {\n      const cell = document.createElement(\"nve-grid-cell\");\n      cell.textContent = \"cell \" + i + \"-\" + columns.length;\n      row.appendChild(cell);\n    });\n  });\n</script>\n",
+      "summary": "Dynamic column management with programmatic addition and positioning, for flexible grid configuration with evolving data requirements.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_column-align-center",
+      "name": "ColumnAlignCenter",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column column-align=\"center\">column 0</nve-grid-column\n    ><nve-grid-column column-align=\"center\">column 1</nve-grid-column\n    ><nve-grid-column column-align=\"center\">column 2</nve-grid-column\n    ><nve-grid-column column-align=\"center\">column 3</nve-grid-column\n    ><nve-grid-column column-align=\"center\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Center-aligned column content for improved visual balance and data presentation, enhancing readability for numeric and centered data types.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_column-align-end",
+      "name": "ColumnAlignEnd",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column column-align=\"end\">column 0</nve-grid-column\n    ><nve-grid-column column-align=\"end\">column 1</nve-grid-column\n    ><nve-grid-column column-align=\"end\">column 2</nve-grid-column\n    ><nve-grid-column column-align=\"end\">column 3</nve-grid-column\n    ><nve-grid-column column-align=\"end\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Right-aligned column content for numeric data and values, providing consistent visual alignment and improved data scanning for financial or metric displays.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_column-align-start",
+      "name": "ColumnAlignStart",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column column-align=\"start\">column 0</nve-grid-column\n    ><nve-grid-column column-align=\"start\">column 1</nve-grid-column\n    ><nve-grid-column column-align=\"start\">column 2</nve-grid-column\n    ><nve-grid-column column-align=\"start\">column 3</nve-grid-column\n    ><nve-grid-column column-align=\"start\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Left-aligned column content for text data and labels, providing consistent visual alignment and improved readability for textual information.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_display-settings",
+      "name": "DisplaySettings",
+      "template": "<div nve-layout=\"column gap:md full\">\n  <nve-dropdown closable id=\"column-settings-dropdown\">\n    <nve-checkbox-group style=\"width: 175px\">\n      <label>Columns</label>\n      <nve-checkbox>\n        <label>Column 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>Column 2</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>Column 3</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>Column 4</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n    </nve-checkbox-group>\n    <nve-divider></nve-divider>\n    <nve-button\n      popovertarget=\"column-settings-dropdown\"\n      popovertargetaction=\"hide\"\n      interaction=\"destructive\"\n      container=\"flat\"\n      style=\"--height: initial\"\n      >restore settings</nve-button\n    >\n  </nve-dropdown>\n  <div nve-layout=\"row gap:sm align:vertical-center\">\n    <p nve-text=\"body muted\">1,145 results found</p>\n    <nve-button popovertarget=\"column-settings-dropdown\">Display Settings</nve-button>\n  </div>\n  <nve-grid>\n    <nve-grid-header>\n      <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n      <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    </nve-grid-header>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n      <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n      <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n      <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n      <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n      <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n      <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n      <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n      <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n      <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n      <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>\n    </nve-grid-row>\n  </nve-grid>\n</div>\n",
+      "summary": "Users can customize their data view through a dropdown menu above the grid,  allowing them to show/hide columns and restore default settings for a personalized experience.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-grid_row-sort",
+      "name": "RowSort",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column> None <nve-sort-button sort=\"none\"></nve-sort-button> </nve-grid-column>\n    <nve-grid-column> Ascending <nve-sort-button sort=\"ascending\"></nve-sort-button> </nve-grid-column>\n    <nve-grid-column> Descending <nve-sort-button sort=\"descending\"></nve-sort-button> </nve-grid-column>\n    <nve-grid-column>Default</nve-grid-column>\n    <nve-grid-column>Default</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Sortable columns with visual indicators for data organization. Use sort buttons on columns where sorting is meaningful (dates, numbers, names) to help users find patterns, identify outliers, or locate specific data points, supporting three states: none, ascending, and descending.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_css-anchor",
+      "name": "CSSAnchor",
+      "template": "<nve-grid style=\"height: 200px\">\n  <nve-grid-header>\n    <nve-grid-column>Empty</nve-grid-column>\n  </nve-grid-header>\n  <nve-grid-row><nve-grid-cell>Empty</nve-grid-cell></nve-grid-row>\n  <nve-grid-row><nve-grid-cell>Empty</nve-grid-cell></nve-grid-row>\n  <nve-grid-row\n    ><nve-grid-cell><span id=\"target\">Target 1</span></nve-grid-cell></nve-grid-row\n  >\n  <nve-grid-row><nve-grid-cell>Empty</nve-grid-cell></nve-grid-row>\n  <nve-grid-row><nve-grid-cell>Empty</nve-grid-cell></nve-grid-row>\n  <nve-grid-row><nve-grid-cell>Empty</nve-grid-cell></nve-grid-row>\n  <nve-grid-row><nve-grid-cell>Empty</nve-grid-cell></nve-grid-row>\n  <nve-grid-row><nve-grid-cell>Empty</nve-grid-cell></nve-grid-row>\n  <nve-grid-row><nve-grid-cell>Empty</nve-grid-cell></nve-grid-row>\n  <nve-grid-row><nve-grid-cell>Empty</nve-grid-cell></nve-grid-row>\n</nve-grid>\n<nve-tooltip anchor=\"target\" position=\"right\">My tooltip</nve-tooltip>\n",
+      "summary": "CSS anchor positioning for tooltips within grid cells, with proper tooltip placement and content visibility in constrained grid environments.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_row-sort-interactive",
+      "name": "RowSortInteractive",
+      "template": "<row-sort-demo></row-sort-demo>\n",
+      "summary": "Row sort sorts the rows of the grid.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_performance-infinite-scroll",
+      "name": "PerformanceInfiniteScroll",
+      "template": "<infinite-scroll-demo></infinite-scroll-demo>\n",
+      "summary": "Infinite scroll loads data as the user scrolls down the grid.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case",
+        "performance"
+      ]
+    },
+    {
+      "id": "core-grid_performance",
+      "name": "Performance",
+      "template": "<section id=\"grid-performance-demo\" nve-layout=\"column gap:md full\" style=\"height: 500px\">\n  <nve-button>show large grid</nve-button>\n  <p nve-text=\"body muted\">1000 rows, 4000 cells</p>\n</section>\n<script type=\"module\">\n  import \"@nvidia-elements/core/grid/define.js\";\n  const section = document.getElementById(\"grid-performance-demo\");\n  const button = section.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const existingGrid = section.querySelector(\"nve-grid\");\n    if (existingGrid) {\n      existingGrid.remove();\n    } else {\n      const grid = document.createElement(\"nve-grid\");\n      grid.style.setProperty(\"height\", \"400px\");\n      grid.style.setProperty(\"max-width\", \"1024px\");\n      const header = document.createElement(\"nve-grid-header\");\n      const columns = new Array(4).fill(\"\").map((_, i) => {\n        const column = document.createElement(\"nve-grid-column\");\n        column.setAttribute(\"width\", \"25%\");\n        column.textContent = \"Column \" + i;\n        return column;\n      });\n      const rows = new Array(1000).fill(\"\").map((_, i) => {\n        const row = document.createElement(\"nve-grid-row\");\n        new Array(4).fill(\"\").forEach((_, c) => {\n          const cell = document.createElement(\"nve-grid-cell\");\n          cell.textContent = \"Cell \" + i + \"-\" + c;\n          row.appendChild(cell);\n        });\n        return row;\n      });\n      header.append(...columns);\n      grid.appendChild(header);\n      grid.append(...rows);\n      section.appendChild(grid);\n    }\n  });\n</script>\n",
+      "summary": "Datagrid performance is heavily dependent on the content within the grid as well as the host environment.",
+      "description": "When rendering large datasets, using the appropriate techniques to maintain good performance matters. - Use pagination or lazy loading to reduce initial render time - Use virtual scroll or batch rendering to improve render performance - Use fixed width columns to improve render performance and reduce layout shift - Avoid duplication of elements within cells, example reuse a single tooltip for all cells vs creating a new tooltip for each cell",
+      "composition": false,
+      "tags": [
+        "performance"
+      ]
+    },
+    {
+      "id": "core-grid_performance-virtual-scroll",
+      "name": "PerformanceVirtualScroll",
+      "template": "<grid-virtual-scroll-demo></grid-virtual-scroll-demo>\n",
+      "summary": "Performance virtual scroll tests the performance of the grid.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case",
+        "performance"
+      ]
+    },
+    {
+      "id": "core-grid_stripe",
+      "name": "Stripe",
+      "template": "<nve-grid stripe>\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>\n    <nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Alternating row background colors for improved scanability. Use striped rows in dense grids or when users frequently scan horizontally across many columns, as the alternating backgrounds help maintain visual alignment and reduce reading errors in wide tables.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_card",
+      "name": "Card",
+      "template": "<nve-card>\n  <nve-card-header>\n    <h2 nve-text=\"heading sm bold\">Data Grid</h2>\n    <h3 nve-text=\"body muted\">Card Example</h3>\n  </nve-card-header>\n  <nve-grid container=\"flat\" style=\"height: 325px\">\n    <nve-grid-header>\n      <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n      ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column\n      ><nve-grid-column>column 4</nve-grid-column>\n    </nve-grid-header>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell\n      ><nve-grid-cell>cell 0-2</nve-grid-cell><nve-grid-cell>cell 0-3</nve-grid-cell\n      ><nve-grid-cell>cell 0-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell\n      ><nve-grid-cell>cell 1-2</nve-grid-cell><nve-grid-cell>cell 1-3</nve-grid-cell\n      ><nve-grid-cell>cell 1-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell\n      ><nve-grid-cell>cell 2-2</nve-grid-cell><nve-grid-cell>cell 2-3</nve-grid-cell\n      ><nve-grid-cell>cell 2-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell\n      ><nve-grid-cell>cell 3-2</nve-grid-cell><nve-grid-cell>cell 3-3</nve-grid-cell\n      ><nve-grid-cell>cell 3-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell\n      ><nve-grid-cell>cell 4-2</nve-grid-cell><nve-grid-cell>cell 4-3</nve-grid-cell\n      ><nve-grid-cell>cell 4-4</nve-grid-cell>\n    </nve-grid-row>\n  </nve-grid>\n</nve-card>\n",
+      "summary": "Nest Grid in Cards for UI patterns such as card tab groups. Use the `container=\"flat\"` attribute to enable proper styling of the grid when nested within a card.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_card-tabs",
+      "name": "CardTabs",
+      "template": "<nve-card>\n  <nve-card-header>\n    <h2 nve-text=\"heading sm bold\">Data Grid</h2>\n    <nve-tabs>\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-card-header>\n  <nve-grid container=\"flat\" style=\"height: 325px\">\n    <nve-grid-header>\n      <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n      ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column\n      ><nve-grid-column>column 4</nve-grid-column>\n    </nve-grid-header>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell\n      ><nve-grid-cell>cell 0-2</nve-grid-cell><nve-grid-cell>cell 0-3</nve-grid-cell\n      ><nve-grid-cell>cell 0-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell\n      ><nve-grid-cell>cell 1-2</nve-grid-cell><nve-grid-cell>cell 1-3</nve-grid-cell\n      ><nve-grid-cell>cell 1-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell\n      ><nve-grid-cell>cell 2-2</nve-grid-cell><nve-grid-cell>cell 2-3</nve-grid-cell\n      ><nve-grid-cell>cell 2-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell\n      ><nve-grid-cell>cell 3-2</nve-grid-cell><nve-grid-cell>cell 3-3</nve-grid-cell\n      ><nve-grid-cell>cell 3-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell\n      ><nve-grid-cell>cell 4-2</nve-grid-cell><nve-grid-cell>cell 4-3</nve-grid-cell\n      ><nve-grid-cell>cell 4-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell\n      ><nve-grid-cell>cell 5-2</nve-grid-cell><nve-grid-cell>cell 5-3</nve-grid-cell\n      ><nve-grid-cell>cell 5-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell\n      ><nve-grid-cell>cell 6-2</nve-grid-cell><nve-grid-cell>cell 6-3</nve-grid-cell\n      ><nve-grid-cell>cell 6-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell\n      ><nve-grid-cell>cell 7-2</nve-grid-cell><nve-grid-cell>cell 7-3</nve-grid-cell\n      ><nve-grid-cell>cell 7-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell\n      ><nve-grid-cell>cell 8-2</nve-grid-cell><nve-grid-cell>cell 8-3</nve-grid-cell\n      ><nve-grid-cell>cell 8-4</nve-grid-cell>\n    </nve-grid-row>\n\n    <nve-grid-row>\n      <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell\n      ><nve-grid-cell>cell 9-2</nve-grid-cell><nve-grid-cell>cell 9-3</nve-grid-cell\n      ><nve-grid-cell>cell 9-4</nve-grid-cell>\n    </nve-grid-row>\n  </nve-grid>\n</nve-card>\n",
+      "summary": "Grid integrated with tabs for organized data presentation, enabling many data views within a single interface for comprehensive information display.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_placeholder",
+      "name": "Placeholder",
+      "template": "<nve-grid style=\"min-height: 400px\">\n  <nve-grid-header>\n    <nve-grid-column></nve-grid-column>\n  </nve-grid-header>\n  <nve-grid-placeholder>\n    <nve-progress-ring status=\"accent\" size=\"lg\"></nve-progress-ring>\n  </nve-grid-placeholder>\n</nve-grid>\n",
+      "summary": "Loading placeholder state with progress indicator. Use grid placeholders during initial data fetching or while loading large datasets, providing visual feedback that content is coming and preventing layout shift when rows populate, improving perceived performance.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_full",
+      "name": "Full",
+      "template": "<nve-grid container=\"full\" style=\"height: 400px\">\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n    ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column\n    ><nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Full-width grid container for max space use, providing edge-to-edge data display for comprehensive information presentation.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_flat",
+      "name": "Flat",
+      "template": "<nve-grid container=\"flat\" style=\"height: 400px\">\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n    ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column\n    ><nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 10-0</nve-grid-cell><nve-grid-cell>cell 10-1</nve-grid-cell\n    ><nve-grid-cell>cell 10-2</nve-grid-cell><nve-grid-cell>cell 10-3</nve-grid-cell\n    ><nve-grid-cell>cell 10-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 11-0</nve-grid-cell><nve-grid-cell>cell 11-1</nve-grid-cell\n    ><nve-grid-cell>cell 11-2</nve-grid-cell><nve-grid-cell>cell 11-3</nve-grid-cell\n    ><nve-grid-cell>cell 11-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 12-0</nve-grid-cell><nve-grid-cell>cell 12-1</nve-grid-cell\n    ><nve-grid-cell>cell 12-2</nve-grid-cell><nve-grid-cell>cell 12-3</nve-grid-cell\n    ><nve-grid-cell>cell 12-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 13-0</nve-grid-cell><nve-grid-cell>cell 13-1</nve-grid-cell\n    ><nve-grid-cell>cell 13-2</nve-grid-cell><nve-grid-cell>cell 13-3</nve-grid-cell\n    ><nve-grid-cell>cell 13-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 14-0</nve-grid-cell><nve-grid-cell>cell 14-1</nve-grid-cell\n    ><nve-grid-cell>cell 14-2</nve-grid-cell><nve-grid-cell>cell 14-3</nve-grid-cell\n    ><nve-grid-cell>cell 14-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 15-0</nve-grid-cell><nve-grid-cell>cell 15-1</nve-grid-cell\n    ><nve-grid-cell>cell 15-2</nve-grid-cell><nve-grid-cell>cell 15-3</nve-grid-cell\n    ><nve-grid-cell>cell 15-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 16-0</nve-grid-cell><nve-grid-cell>cell 16-1</nve-grid-cell\n    ><nve-grid-cell>cell 16-2</nve-grid-cell><nve-grid-cell>cell 16-3</nve-grid-cell\n    ><nve-grid-cell>cell 16-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 17-0</nve-grid-cell><nve-grid-cell>cell 17-1</nve-grid-cell\n    ><nve-grid-cell>cell 17-2</nve-grid-cell><nve-grid-cell>cell 17-3</nve-grid-cell\n    ><nve-grid-cell>cell 17-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 18-0</nve-grid-cell><nve-grid-cell>cell 18-1</nve-grid-cell\n    ><nve-grid-cell>cell 18-2</nve-grid-cell><nve-grid-cell>cell 18-3</nve-grid-cell\n    ><nve-grid-cell>cell 18-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 19-0</nve-grid-cell><nve-grid-cell>cell 19-1</nve-grid-cell\n    ><nve-grid-cell>cell 19-2</nve-grid-cell><nve-grid-cell>cell 19-3</nve-grid-cell\n    ><nve-grid-cell>cell 19-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Flat container styling for minimal visual weight, providing subtle grid presentation that integrates seamlessly with surrounding content.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-grid_focus-types",
+      "name": "FocusTypes",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>span</nve-grid-column>\n    <nve-grid-column>button</nve-grid-column>\n    <nve-grid-column>2x buttons</nve-grid-column>\n    <nve-grid-column>input</nve-grid-column>\n  </nve-grid-header>\n  <nve-grid-row>\n    <nve-grid-cell>\n      <span>span</span>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <button>button</button>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <button>button</button>\n      <button>button</button>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <input />\n    </nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Different focusable element types within grid cells, with keyboard navigation and accessibility support for interactive content.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_panel-detail",
+      "name": "PanelDetail",
+      "template": "<nve-page id=\"grid-panel-demo\">\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n  </nve-page-header>\n  <section nve-layout=\"column gap:md pad:md full\">\n    <nve-grid>\n      <nve-grid-header>\n        <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>\n        <nve-grid-column>column 2</nve-grid-column>\n        <nve-grid-column width=\"max-content\" aria-label=\"details\"></nve-grid-column>\n      </nve-grid-header>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>\n        <nve-grid-cell>cell 0-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"0\" aria-label=\"view 0\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row selected>\n        <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>\n        <nve-grid-cell>cell 1-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"1\" aria-label=\"view 1\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>\n        <nve-grid-cell>cell 2-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"2\" aria-label=\"view 2\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>\n        <nve-grid-cell>cell 3-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"3\" aria-label=\"view 3\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>\n        <nve-grid-cell>cell 4-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"4\" aria-label=\"view 4\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>\n        <nve-grid-cell>cell 5-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"5\" aria-label=\"view 5\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>\n        <nve-grid-cell>cell 6-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"6\" aria-label=\"view 6\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>\n        <nve-grid-cell>cell 7-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"7\" aria-label=\"view 7\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>\n        <nve-grid-cell>cell 8-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"8\" aria-label=\"view 8\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>\n        <nve-grid-cell>cell 9-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"9\" aria-label=\"view 9\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n    </nve-grid>\n  </section>\n  <nve-page-panel slot=\"right\" size=\"sm\" expanded closable>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading medium sm\">Row 2 Details</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm muted\">Task</label>\n          <p nve-text=\"eyebrow sm\">Workflow</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm muted\">Status</label>\n          <nve-badge status=\"success\">Complete</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm muted\">Priority</label>\n          <nve-badge status=\"pending\">P1</nve-badge>\n        </div>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n<script type=\"module\">\n  const page = document.getElementById(\"grid-panel-demo\");\n  const grid = page.querySelector(\"nve-grid\");\n  const panel = page.querySelector(\"nve-page-panel\");\n  const rows = grid.querySelectorAll(\"nve-grid-row\");\n  const heading = page.querySelector(\"nve-page-panel-header h3\");\n  panel.addEventListener(\"close\", () => {\n    rows.forEach((row) => (row.selected = false));\n    panel.hidden = true;\n  });\n  grid.addEventListener(\"click\", (e) => {\n    if (e.target.localName === \"nve-icon-button\") {\n      const row = e.target.closest(\"nve-grid-row\");\n      rows.forEach((row) => (row.selected = false));\n      panel.hidden = false;\n      heading.textContent = \"Row \" + e.target.value + \" Details\";\n      row.selected = !panel.hidden;\n    }\n  });\n</script>\n",
+      "summary": "Use a right aligned nve-page-panel when displaying advanced filtering or display settings for the grid. Item detail panels should be open using a action button placed at the end of the grid row.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-grid_panel-grid",
+      "name": "PanelGrid",
+      "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n  </nve-page-header>\n  <section nve-layout=\"column gap:md pad:md full\">page content</section>\n  <nve-page-panel slot=\"right\" expanded closable>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading medium sm\">Recording</h3>\n    </nve-page-panel-header>\n    <nve-grid container=\"flat\" stripe>\n      <nve-grid-header>\n        <nve-grid-column style=\"height: 0; overflow: hidden\">Key</nve-grid-column>\n        <nve-grid-column style=\"height: 0; overflow: hidden\">Value</nve-grid-column>\n      </nve-grid-header>\n      <nve-grid-row>\n        <nve-grid-cell><p nve-text=\"label muted\">Session ID</p></nve-grid-cell>\n        <nve-grid-cell><p nve-text=\"label\">123456</p></nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell><p nve-text=\"label muted\">Record Date</p></nve-grid-cell>\n        <nve-grid-cell><p nve-text=\"label\">2023-09-04 11:00</p></nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell><p nve-text=\"label muted\">Tag</p></nve-grid-cell>\n        <nve-grid-cell><nve-tag readonly>Production</nve-tag></nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell><p nve-text=\"label muted\">Route ID</p></nve-grid-cell>\n        <nve-grid-cell><p nve-text=\"label\">9876123</p></nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell><p nve-text=\"label muted\">Configuration</p></nve-grid-cell>\n        <nve-grid-cell><p nve-text=\"label\">prod-0.1.0</p></nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell><p nve-text=\"label muted\">Duration</p></nve-grid-cell>\n        <nve-grid-cell><p nve-text=\"label\">1:23:34</p></nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell><p nve-text=\"label muted\">Description</p></nve-grid-cell>\n        <nve-grid-cell><p nve-text=\"label\">local test run</p></nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell><p nve-text=\"label muted\">Number of Sensors</p></nve-grid-cell>\n        <nve-grid-cell><p nve-text=\"label\">24</p></nve-grid-cell>\n      </nve-grid-row>\n    </nve-grid>\n  </nve-page-panel>\n</nve-page>\n",
+      "summary": "Panel Grid displays key value type data sets for details of a given item in a collection.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-grid_invalid-dom",
+      "name": "InvalidDOM",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n    ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column\n    ><nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n  <div>invalid</div>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell>\n  </nve-grid-row>\n\n  <span>invalid</span>\n</nve-grid>\n",
+      "summary": "Examples of invalid grid usage patterns for testing and documentation purposes, showing what not to do when implementing grids.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "anti-pattern"
+      ]
+    },
+    {
+      "id": "core-grid_audit",
+      "name": "Audit",
+      "template": "<nve-grid style=\"height: 450px\">\n  <div hidden></div>\n  <nve-grid-header>\n    <div hidden></div>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n    ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column\n    ><nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <div hidden></div>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <div hidden></div>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <div hidden></div>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <div hidden></div>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <div hidden></div>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <div hidden></div>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <div hidden></div>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <div hidden></div>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <div hidden></div>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <div hidden></div>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Examples of invalid grid usage patterns for testing and documentation purposes, showing what not to do when implementing grids.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "anti-pattern"
+      ]
+    },
+    {
+      "id": "core-grid_invalid-column-count",
+      "name": "InvalidColumnCount",
+      "template": "<nve-grid>\n  <div hidden></div>\n  <nve-grid-header>\n    <div hidden></div>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n    ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column>\n  </nve-grid-header>\n\n  <div>\n    <nve-grid-row>\n      <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell\n      ><nve-grid-cell>cell 0-2</nve-grid-cell>\n    </nve-grid-row>\n  </div>\n\n  <div>\n    <nve-grid-row>\n      <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell\n      ><nve-grid-cell>cell 1-2</nve-grid-cell>\n    </nve-grid-row>\n  </div>\n\n  <div>\n    <nve-grid-row>\n      <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell\n      ><nve-grid-cell>cell 2-2</nve-grid-cell>\n    </nve-grid-row>\n  </div>\n\n  <div>\n    <nve-grid-row>\n      <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell\n      ><nve-grid-cell>cell 3-2</nve-grid-cell>\n    </nve-grid-row>\n  </div>\n</nve-grid>\n",
+      "summary": "Do not set the column count to a value that does not match the number of cells in the row.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "anti-pattern"
+      ]
+    },
+    {
+      "id": "core-grid_valid-column-count",
+      "name": "ValidColumnCount",
+      "template": "<nve-grid>\n  <div hidden></div>\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n    ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Ensure column count matches the number of cells in the row to preserve keyboard navigation.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-grid_sort-visibility",
+      "name": "SortVisibility",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column> Column 1 <nve-sort-button sort=\"none\"></nve-sort-button> </nve-grid-column>\n    <nve-grid-column> Column 2 <nve-sort-button sort=\"ascending\"></nve-sort-button> </nve-grid-column>\n    <nve-grid-column> Column 3 <nve-sort-button sort=\"descending\"></nve-sort-button> </nve-grid-column>\n    <nve-grid-column>Column 4</nve-grid-column>\n  </nve-grid-header>\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-1</nve-grid-cell>\n    <nve-grid-cell>cell 1-2</nve-grid-cell>\n    <nve-grid-cell>cell 1-3</nve-grid-cell>\n    <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Use the `nve-sort-button` to add grid row sort. The grid follows the ARIA sort spec and automatically sets the appropriate accessibility related attributes to convey the current sorting state.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}