@nvidia-elements/core 0.0.10 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (200) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/dist/accordion/accordion.examples.json +11 -11
  3. package/dist/accordion/accordion2.js +4 -4
  4. package/dist/alert/alert-group2.js +1 -1
  5. package/dist/alert/alert.examples.json +12 -12
  6. package/dist/alert/alert2.js +1 -1
  7. package/dist/avatar/avatar-group2.js +1 -1
  8. package/dist/avatar/avatar.examples.json +6 -6
  9. package/dist/avatar/avatar2.js +1 -1
  10. package/dist/badge/badge.examples.json +12 -12
  11. package/dist/badge/badge2.js +1 -1
  12. package/dist/breadcrumb/breadcrumb.examples.json +3 -3
  13. package/dist/breadcrumb/breadcrumb2.js +1 -1
  14. package/dist/bundles/index.js +4 -4
  15. package/dist/button/button.examples.json +24 -24
  16. package/dist/button/button2.js +1 -1
  17. package/dist/button-group/button-group.d.ts +1 -1
  18. package/dist/button-group/button-group.examples.json +11 -11
  19. package/dist/button-group/button-group2.js +1 -1
  20. package/dist/button-group/button-group2.js.map +1 -1
  21. package/dist/card/card.examples.json +10 -10
  22. package/dist/card/card2.js +4 -4
  23. package/dist/chat-message/chat-message.examples.json +7 -7
  24. package/dist/chat-message/chat-message2.js +1 -1
  25. package/dist/checkbox/checkbox-group2.js +1 -1
  26. package/dist/checkbox/checkbox.examples.json +7 -7
  27. package/dist/checkbox/checkbox2.js +1 -1
  28. package/dist/color/color.examples.json +4 -4
  29. package/dist/color/color2.js +1 -1
  30. package/dist/combobox/combobox.examples.json +24 -24
  31. package/dist/combobox/combobox2.js +1 -1
  32. package/dist/copy-button/copy-button.examples.json +9 -9
  33. package/dist/copy-button/copy-button2.js +1 -1
  34. package/dist/custom-elements-jsx.d.ts +1 -1
  35. package/dist/custom-elements-vue.d.ts +1 -1
  36. package/dist/custom-elements.json +15 -73
  37. package/dist/data.html.json +2 -2
  38. package/dist/date/date.examples.json +7 -7
  39. package/dist/date/date2.js +1 -1
  40. package/dist/datetime/datetime.examples.json +4 -4
  41. package/dist/datetime/datetime2.js +1 -1
  42. package/dist/dialog/dialog-footer2.js +1 -1
  43. package/dist/dialog/dialog-header2.js +1 -1
  44. package/dist/dialog/dialog.examples.json +21 -21
  45. package/dist/dialog/dialog2.js +1 -1
  46. package/dist/divider/divider.examples.json +5 -5
  47. package/dist/divider/divider2.js +1 -1
  48. package/dist/dot/dot.examples.json +5 -5
  49. package/dist/dot/dot2.js +1 -1
  50. package/dist/drawer/drawer-content2.js +1 -1
  51. package/dist/drawer/drawer-footer2.js +1 -1
  52. package/dist/drawer/drawer-header2.js +1 -1
  53. package/dist/drawer/drawer.examples.json +13 -13
  54. package/dist/drawer/drawer2.js +1 -1
  55. package/dist/dropdown/dropdown-footer2.js +1 -1
  56. package/dist/dropdown/dropdown-header2.js +1 -1
  57. package/dist/dropdown/dropdown.examples.json +14 -14
  58. package/dist/dropdown/dropdown2.js +1 -1
  59. package/dist/dropdown-group/dropdown-group.examples.json +4 -4
  60. package/dist/dropdown-group/dropdown-group.js +1 -1
  61. package/dist/dropzone/dropzone.examples.json +3 -3
  62. package/dist/dropzone/dropzone2.js +1 -1
  63. package/dist/file/file.examples.json +3 -3
  64. package/dist/file/file2.js +1 -1
  65. package/dist/format-datetime/format-datetime.examples.json +9 -9
  66. package/dist/format-datetime/format-datetime2.js +1 -1
  67. package/dist/format-relative-time/format-relative-time.examples.json +7 -7
  68. package/dist/format-relative-time/format-relative-time2.js +73 -53
  69. package/dist/format-relative-time/format-relative-time2.js.map +1 -1
  70. package/dist/forms/actions.examples.json +3 -3
  71. package/dist/forms/control/control.examples.json +11 -11
  72. package/dist/forms/control/control2.js +1 -1
  73. package/dist/forms/control-group/control-group2.js +1 -1
  74. package/dist/forms/control-message/control-message2.js +1 -1
  75. package/dist/forms/forms.examples.json +8 -8
  76. package/dist/forms/validation.examples.js.map +1 -1
  77. package/dist/forms/validation.examples.json +5 -5
  78. package/dist/grid/cell/cell2.js +1 -1
  79. package/dist/grid/column/column2.js +1 -1
  80. package/dist/grid/footer/footer2.js +1 -1
  81. package/dist/grid/grid.examples.json +43 -43
  82. package/dist/grid/grid2.js +1 -1
  83. package/dist/grid/header/header2.js +2 -2
  84. package/dist/grid/header/header2.js.map +1 -1
  85. package/dist/grid/placeholder/placeholder2.js +1 -1
  86. package/dist/grid/row/row2.js +1 -1
  87. package/dist/icon/icon.examples.json +8 -8
  88. package/dist/icon/icon2.js +2 -2
  89. package/dist/icon-button/icon-button.examples.json +13 -13
  90. package/dist/icon-button/icon-button2.js +1 -1
  91. package/dist/index.js +1 -1
  92. package/dist/input/input-group.examples.json +2 -2
  93. package/dist/input/input-group2.js +1 -1
  94. package/dist/input/input.examples.json +8 -8
  95. package/dist/input/input2.js +1 -1
  96. package/dist/internal/controllers/i18n.controller.examples.json +1 -1
  97. package/dist/internal/controllers/keynav-grid.controller.examples.json +2 -2
  98. package/dist/internal/controllers/keynav-grid.controller.js +15 -7
  99. package/dist/internal/controllers/keynav-grid.controller.js.map +1 -1
  100. package/dist/internal/controllers/keynav-list.controller.examples.json +4 -4
  101. package/dist/internal/controllers/keynav-list.controller.js +11 -5
  102. package/dist/internal/controllers/keynav-list.controller.js.map +1 -1
  103. package/dist/internal/controllers/popover.examples.json +8 -8
  104. package/dist/internal/controllers/type-button.controller.examples.json +1 -1
  105. package/dist/internal/controllers/type-popover.controller.examples.json +2 -2
  106. package/dist/internal/controllers/type-touch.controller.examples.json +1 -1
  107. package/dist/internal/services/global.service.js +1 -1
  108. package/dist/internal/utils/objects.js +17 -9
  109. package/dist/internal/utils/objects.js.map +1 -1
  110. package/dist/logo/logo.examples.json +6 -6
  111. package/dist/logo/logo2.js +1 -1
  112. package/dist/menu/menu-item2.js +1 -1
  113. package/dist/menu/menu.examples.json +15 -15
  114. package/dist/menu/menu2.js +1 -1
  115. package/dist/month/month.examples.json +4 -4
  116. package/dist/month/month2.js +1 -1
  117. package/dist/notification/notification-group2.js +1 -1
  118. package/dist/notification/notification.examples.json +15 -15
  119. package/dist/notification/notification2.js +1 -1
  120. package/dist/page/page-panel/page-panel-content2.js +1 -1
  121. package/dist/page/page-panel/page-panel-footer2.js +1 -1
  122. package/dist/page/page-panel/page-panel-header2.js +1 -1
  123. package/dist/page/page-panel/page-panel2.js +1 -1
  124. package/dist/page/page.examples.js.map +1 -1
  125. package/dist/page/page.examples.json +37 -35
  126. package/dist/page/page2.js +1 -1
  127. package/dist/page-header/page-header.examples.json +9 -9
  128. package/dist/page-header/page-header2.js +1 -1
  129. package/dist/page-loader/page-loader.examples.json +2 -2
  130. package/dist/page-loader/page-loader2.js +1 -1
  131. package/dist/pagination/pagination.examples.json +16 -16
  132. package/dist/pagination/pagination2.js +1 -1
  133. package/dist/panel/panel.examples.json +7 -7
  134. package/dist/panel/panel2.js +4 -4
  135. package/dist/password/password.examples.json +3 -3
  136. package/dist/password/password2.js +1 -1
  137. package/dist/preferences-input/preferences-input.examples.json +3 -3
  138. package/dist/preferences-input/preferences-input2.js +1 -1
  139. package/dist/progress-bar/progress-bar.examples.json +8 -8
  140. package/dist/progress-bar/progress-bar2.js +1 -1
  141. package/dist/progress-ring/progress-ring.examples.json +8 -8
  142. package/dist/progress-ring/progress-ring2.js +1 -1
  143. package/dist/progressive-filter-chip/progressive-filter-chip.examples.json +7 -7
  144. package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
  145. package/dist/pulse/pulse.examples.json +4 -4
  146. package/dist/pulse/pulse2.js +1 -1
  147. package/dist/radio/radio-group2.js +1 -1
  148. package/dist/radio/radio.examples.json +5 -5
  149. package/dist/radio/radio2.js +1 -1
  150. package/dist/range/range.examples.json +9 -9
  151. package/dist/range/range2.js +1 -1
  152. package/dist/resize-handle/resize-handle.examples.json +7 -7
  153. package/dist/resize-handle/resize-handle2.js +1 -1
  154. package/dist/search/search.examples.json +5 -5
  155. package/dist/search/search2.js +1 -1
  156. package/dist/select/select.examples.json +18 -18
  157. package/dist/select/select2.js +1 -1
  158. package/dist/skeleton/skeleton.examples.json +4 -4
  159. package/dist/skeleton/skeleton2.js +1 -1
  160. package/dist/sort-button/sort-button.examples.json +3 -3
  161. package/dist/sort-button/sort-button2.js +1 -1
  162. package/dist/sparkline/sparkline.examples.json +13 -13
  163. package/dist/sparkline/sparkline.utils.d.ts +26 -5
  164. package/dist/sparkline/sparkline.utils.js +30 -30
  165. package/dist/sparkline/sparkline.utils.js.map +1 -1
  166. package/dist/sparkline/sparkline2.js +21 -6
  167. package/dist/sparkline/sparkline2.js.map +1 -1
  168. package/dist/star-rating/star-rating.examples.json +4 -4
  169. package/dist/star-rating/star-rating2.js +1 -1
  170. package/dist/steps/steps.examples.json +5 -5
  171. package/dist/steps/steps2.js +2 -2
  172. package/dist/switch/switch-group2.js +1 -1
  173. package/dist/switch/switch.examples.json +7 -7
  174. package/dist/switch/switch2.js +1 -1
  175. package/dist/tabs/tabs-group2.js +9 -6
  176. package/dist/tabs/tabs-group2.js.map +1 -1
  177. package/dist/tabs/tabs.examples.json +14 -14
  178. package/dist/tabs/tabs2.js +2 -2
  179. package/dist/tag/tag.examples.json +8 -8
  180. package/dist/tag/tag2.js +1 -1
  181. package/dist/textarea/textarea.examples.json +5 -5
  182. package/dist/textarea/textarea2.js +1 -1
  183. package/dist/time/time.examples.json +4 -4
  184. package/dist/time/time2.js +1 -1
  185. package/dist/toast/toast.examples.json +11 -11
  186. package/dist/toast/toast2.js +1 -1
  187. package/dist/toggletip/toggletip-footer2.js +1 -1
  188. package/dist/toggletip/toggletip-header2.js +1 -1
  189. package/dist/toggletip/toggletip.examples.json +12 -12
  190. package/dist/toggletip/toggletip2.js +1 -1
  191. package/dist/toolbar/toolbar.examples.json +8 -8
  192. package/dist/toolbar/toolbar2.js +1 -1
  193. package/dist/tooltip/tooltip.examples.json +22 -22
  194. package/dist/tooltip/tooltip2.js +1 -1
  195. package/dist/tree/tree-node2.js +1 -1
  196. package/dist/tree/tree.examples.json +13 -13
  197. package/dist/tree/tree2.js +1 -1
  198. package/dist/week/week.examples.json +5 -5
  199. package/dist/week/week2.js +1 -1
  200. package/package.json +5 -5
package/dist/grid/grid.examples.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "entrypoint": "@nvidia-elements/core/grid/grid.examples.json",
4
4
  "items": [
5
5
  {
6
- "id": "core-grid_default",
6
+ "id": "grid",
7
7
  "name": "Default",
8
8
  "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",
9
9
  "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.",
@@ -12,7 +12,7 @@
12
12
  "tags": []
13
13
  },
14
14
  {
15
- "id": "core-grid_keynav",
15
+ "id": "grid-keynav",
16
16
  "name": "Keynav",
17
17
  "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",
18
18
  "summary": "The datagrid follows the ARIA Authoring Practices Guide for standardized keyboard navigation.",
@@ -21,7 +21,7 @@
21
21
  "tags": []
22
22
  },
23
23
  {
24
- "id": "core-grid_multi-select",
24
+ "id": "grid-multi-select",
25
25
  "name": "MultiSelect",
26
26
  "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",
27
27
  "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.",
@@ -30,7 +30,7 @@
30
30
  "tags": []
31
31
  },
32
32
  {
33
- "id": "core-grid_bulk-actions",
33
+ "id": "grid-bulk-actions",
34
34
  "name": "BulkActions",
35
35
  "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",
36
36
  "summary": "Use bulk actions for operations on many items. Display only when rows have a selection. Closing bulk actions deselects all selected rows.",
@@ -39,7 +39,7 @@
39
39
  "tags": []
40
40
  },
41
41
  {
42
- "id": "core-grid_single-select",
42
+ "id": "grid-single-select",
43
43
  "name": "SingleSelect",
44
44
  "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",
45
45
  "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.",
@@ -48,7 +48,7 @@
48
48
  "tags": []
49
49
  },
50
50
  {
51
- "id": "core-grid_row-action",
51
+ "id": "grid-row-action",
52
52
  "name": "RowAction",
53
53
  "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",
54
54
  "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.",
@@ -57,7 +57,7 @@
57
57
  "tags": []
58
58
  },
59
59
  {
60
- "id": "core-grid_row-groups",
60
+ "id": "grid-row-groups",
61
61
  "name": "RowGroups",
62
62
  "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",
63
63
  "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.",
@@ -66,7 +66,7 @@
66
66
  "tags": []
67
67
  },
68
68
  {
69
- "id": "core-grid_footer",
69
+ "id": "grid-footer",
70
70
  "name": "Footer",
71
71
  "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",
72
72
  "summary": "The footer displays contextual information or extra user actions such as pagination.",
@@ -75,7 +75,7 @@
75
75
  "tags": []
76
76
  },
77
77
  {
78
- "id": "core-grid_pagination",
78
+ "id": "grid-pagination",
79
79
  "name": "Pagination",
80
80
  "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",
81
81
  "summary": "Use the pagination pattern when working with large data sets that need incremental loading or filtering for performance or useability.",
@@ -84,7 +84,7 @@
84
84
  "tags": []
85
85
  },
86
86
  {
87
- "id": "core-grid_scroll",
87
+ "id": "grid-scroll",
88
88
  "name": "Scroll",
89
89
  "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",
90
90
  "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.",
@@ -95,7 +95,7 @@
95
95
  ]
96
96
  },
97
97
  {
98
- "id": "core-grid_scroll-position",
98
+ "id": "grid-scroll-position",
99
99
  "name": "ScrollPosition",
100
100
  "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",
101
101
  "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.",
@@ -104,7 +104,7 @@
104
104
  "tags": []
105
105
  },
106
106
  {
107
- "id": "core-grid_full-height",
107
+ "id": "grid-full-height",
108
108
  "name": "FullHeight",
109
109
  "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",
110
110
  "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.",
@@ -115,7 +115,7 @@
115
115
  ]
116
116
  },
117
117
  {
118
- "id": "core-grid_column-action",
118
+ "id": "grid-column-action",
119
119
  "name": "ColumnAction",
120
120
  "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",
121
121
  "summary": "Create column actions by using the `nve-icon-button` to trigger dropdowns or panels that reveal more actions to the user.",
@@ -124,7 +124,7 @@
124
124
  "tags": []
125
125
  },
126
126
  {
127
- "id": "core-grid_column-width",
127
+ "id": "grid-column-width",
128
128
  "name": "ColumnWidth",
129
129
  "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",
130
130
  "summary": "Column width control for responsive grid layouts, enabling flexible content sizing and optimal space usage across different screen sizes.",
@@ -133,7 +133,7 @@
133
133
  "tags": []
134
134
  },
135
135
  {
136
- "id": "core-grid_content",
136
+ "id": "grid-content",
137
137
  "name": "Content",
138
138
  "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",
139
139
  "summary": "Basic grid content display with evenly distributed columns, including standard data presentation and cell content wrapping behavior.",
@@ -144,7 +144,7 @@
144
144
  ]
145
145
  },
146
146
  {
147
- "id": "core-grid_column-fixed",
147
+ "id": "grid-column-fixed",
148
148
  "name": "ColumnFixed",
149
149
  "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",
150
150
  "summary": "Fix columns to any given side, but keep fixed columns from spanning past the half way point of the grid.",
@@ -153,7 +153,7 @@
153
153
  "tags": []
154
154
  },
155
155
  {
156
- "id": "core-grid_column-multi-fixed",
156
+ "id": "grid-column-multi-fixed",
157
157
  "name": "ColumnMultiFixed",
158
158
  "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",
159
159
  "summary": "Fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.",
@@ -162,7 +162,7 @@
162
162
  "tags": []
163
163
  },
164
164
  {
165
- "id": "core-grid_column-stack-fixed",
165
+ "id": "grid-column-stack-fixed",
166
166
  "name": "ColumnStackFixed",
167
167
  "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",
168
168
  "summary": "Stack and fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.",
@@ -171,7 +171,7 @@
171
171
  "tags": []
172
172
  },
173
173
  {
174
- "id": "core-grid_column-dynamic-fixed",
174
+ "id": "grid-column-dynamic-fixed",
175
175
  "name": "ColumnDynamicFixed",
176
176
  "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",
177
177
  "summary": "Dynamic column management with programmatic addition and positioning, for flexible grid configuration with evolving data requirements.",
@@ -180,7 +180,7 @@
180
180
  "tags": []
181
181
  },
182
182
  {
183
- "id": "core-grid_column-align-center",
183
+ "id": "grid-column-align-center",
184
184
  "name": "ColumnAlignCenter",
185
185
  "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",
186
186
  "summary": "Center-aligned column content for improved visual balance and data presentation, enhancing readability for numeric and centered data types.",
@@ -191,7 +191,7 @@
191
191
  ]
192
192
  },
193
193
  {
194
- "id": "core-grid_column-align-end",
194
+ "id": "grid-column-align-end",
195
195
  "name": "ColumnAlignEnd",
196
196
  "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",
197
197
  "summary": "Right-aligned column content for numeric data and values, providing consistent visual alignment and improved data scanning for financial or metric displays.",
@@ -202,7 +202,7 @@
202
202
  ]
203
203
  },
204
204
  {
205
- "id": "core-grid_column-align-start",
205
+ "id": "grid-column-align-start",
206
206
  "name": "ColumnAlignStart",
207
207
  "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",
208
208
  "summary": "Left-aligned column content for text data and labels, providing consistent visual alignment and improved readability for textual information.",
@@ -213,7 +213,7 @@
213
213
  ]
214
214
  },
215
215
  {
216
- "id": "core-grid_display-settings",
216
+ "id": "grid-display-settings",
217
217
  "name": "DisplaySettings",
218
218
  "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",
219
219
  "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.",
@@ -222,7 +222,7 @@
222
222
  "tags": []
223
223
  },
224
224
  {
225
- "id": "core-grid_row-sort",
225
+ "id": "grid-row-sort",
226
226
  "name": "RowSort",
227
227
  "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",
228
228
  "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.",
@@ -231,7 +231,7 @@
231
231
  "tags": []
232
232
  },
233
233
  {
234
- "id": "core-grid_css-anchor",
234
+ "id": "grid-css-anchor",
235
235
  "name": "CSSAnchor",
236
236
  "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",
237
237
  "summary": "CSS anchor positioning for tooltips within grid cells, with proper tooltip placement and content visibility in constrained grid environments.",
@@ -242,7 +242,7 @@
242
242
  ]
243
243
  },
244
244
  {
245
- "id": "core-grid_row-sort-interactive",
245
+ "id": "grid-row-sort-interactive",
246
246
  "name": "RowSortInteractive",
247
247
  "template": "<row-sort-demo></row-sort-demo>\n",
248
248
  "summary": "Row sort sorts the rows of the grid.",
@@ -253,7 +253,7 @@
253
253
  ]
254
254
  },
255
255
  {
256
- "id": "core-grid_performance-infinite-scroll",
256
+ "id": "grid-performance-infinite-scroll",
257
257
  "name": "PerformanceInfiniteScroll",
258
258
  "template": "<infinite-scroll-demo></infinite-scroll-demo>\n",
259
259
  "summary": "Infinite scroll loads data as the user scrolls down the grid.",
@@ -265,7 +265,7 @@
265
265
  ]
266
266
  },
267
267
  {
268
- "id": "core-grid_performance",
268
+ "id": "grid-performance",
269
269
  "name": "Performance",
270
270
  "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",
271
271
  "summary": "Datagrid performance is heavily dependent on the content within the grid as well as the host environment.",
@@ -276,7 +276,7 @@
276
276
  ]
277
277
  },
278
278
  {
279
- "id": "core-grid_performance-virtual-scroll",
279
+ "id": "grid-performance-virtual-scroll",
280
280
  "name": "PerformanceVirtualScroll",
281
281
  "template": "<grid-virtual-scroll-demo></grid-virtual-scroll-demo>\n",
282
282
  "summary": "Performance virtual scroll tests the performance of the grid.",
@@ -288,7 +288,7 @@
288
288
  ]
289
289
  },
290
290
  {
291
- "id": "core-grid_stripe",
291
+ "id": "grid-stripe",
292
292
  "name": "Stripe",
293
293
  "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",
294
294
  "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.",
@@ -299,7 +299,7 @@
299
299
  ]
300
300
  },
301
301
  {
302
- "id": "core-grid_card",
302
+ "id": "grid-card",
303
303
  "name": "Card",
304
304
  "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",
305
305
  "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.",
@@ -308,7 +308,7 @@
308
308
  "tags": []
309
309
  },
310
310
  {
311
- "id": "core-grid_card-tabs",
311
+ "id": "grid-card-tabs",
312
312
  "name": "CardTabs",
313
313
  "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",
314
314
  "summary": "Grid integrated with tabs for organized data presentation, enabling many data views within a single interface for comprehensive information display.",
@@ -319,7 +319,7 @@
319
319
  ]
320
320
  },
321
321
  {
322
- "id": "core-grid_placeholder",
322
+ "id": "grid-placeholder",
323
323
  "name": "Placeholder",
324
324
  "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",
325
325
  "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.",
@@ -328,7 +328,7 @@
328
328
  "tags": []
329
329
  },
330
330
  {
331
- "id": "core-grid_full",
331
+ "id": "grid-full",
332
332
  "name": "Full",
333
333
  "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",
334
334
  "summary": "Full-width grid container for max space use, providing edge-to-edge data display for comprehensive information presentation.",
@@ -337,7 +337,7 @@
337
337
  "tags": []
338
338
  },
339
339
  {
340
- "id": "core-grid_flat",
340
+ "id": "grid-flat",
341
341
  "name": "Flat",
342
342
  "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",
343
343
  "summary": "Flat container styling for minimal visual weight, providing subtle grid presentation that integrates seamlessly with surrounding content.",
@@ -346,7 +346,7 @@
346
346
  "tags": []
347
347
  },
348
348
  {
349
- "id": "core-grid_focus-types",
349
+ "id": "grid-focus-types",
350
350
  "name": "FocusTypes",
351
351
  "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",
352
352
  "summary": "Different focusable element types within grid cells, with keyboard navigation and accessibility support for interactive content.",
@@ -357,7 +357,7 @@
357
357
  ]
358
358
  },
359
359
  {
360
- "id": "core-grid_panel-detail",
360
+ "id": "grid-panel-detail",
361
361
  "name": "PanelDetail",
362
362
  "template": "<nve-page id=\"grid-panel-demo\">\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n </nve-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=\"label 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",
363
363
  "summary": "Use a 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.",
@@ -366,7 +366,7 @@
366
366
  "tags": []
367
367
  },
368
368
  {
369
- "id": "core-grid_panel-grid",
369
+ "id": "grid-panel-grid",
370
370
  "name": "PanelGrid",
371
371
  "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n </nve-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",
372
372
  "summary": "Panel Grid displays key value type data sets for details of a given item in a collection.",
@@ -375,7 +375,7 @@
375
375
  "tags": []
376
376
  },
377
377
  {
378
- "id": "core-grid_invalid-dom",
378
+ "id": "grid-invalid-dom",
379
379
  "name": "InvalidDOM",
380
380
  "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",
381
381
  "summary": "Examples of invalid grid usage patterns for testing and documentation purposes, showing what not to do when implementing grids.",
@@ -386,7 +386,7 @@
386
386
  ]
387
387
  },
388
388
  {
389
- "id": "core-grid_audit",
389
+ "id": "grid-audit",
390
390
  "name": "Audit",
391
391
  "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",
392
392
  "summary": "Examples of invalid grid usage patterns for testing and documentation purposes, showing what not to do when implementing grids.",
@@ -397,7 +397,7 @@
397
397
  ]
398
398
  },
399
399
  {
400
- "id": "core-grid_invalid-column-count",
400
+ "id": "grid-invalid-column-count",
401
401
  "name": "InvalidColumnCount",
402
402
  "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",
403
403
  "summary": "Do not set the column count to a value that does not match the number of cells in the row.",
@@ -408,7 +408,7 @@
408
408
  ]
409
409
  },
410
410
  {
411
- "id": "core-grid_valid-column-count",
411
+ "id": "grid-valid-column-count",
412
412
  "name": "ValidColumnCount",
413
413
  "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",
414
414
  "summary": "Ensure column count matches the number of cells in the row to preserve keyboard navigation.",
@@ -419,7 +419,7 @@
419
419
  ]
420
420
  },
421
421
  {
422
- "id": "core-grid_sort-visibility",
422
+ "id": "grid-sort-visibility",
423
423
  "name": "SortVisibility",
424
424
  "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",
425
425
  "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.",