@nvidia-elements/core 2.8.0 → 2.9.0

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 (222) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/accordion/accordion.examples.json +9 -9
  3. package/dist/accordion/accordion2.js +4 -4
  4. package/dist/alert/alert-group2.js +1 -1
  5. package/dist/alert/alert.examples.json +3 -3
  6. package/dist/alert/alert2.js +1 -1
  7. package/dist/avatar/avatar-group2.js +1 -1
  8. package/dist/avatar/avatar2.js +1 -1
  9. package/dist/badge/badge.examples.json +2 -2
  10. package/dist/badge/badge2.js +1 -1
  11. package/dist/breadcrumb/breadcrumb.examples.json +1 -1
  12. package/dist/breadcrumb/breadcrumb2.js +1 -1
  13. package/dist/bundle.d.ts +2 -0
  14. package/dist/bundles/index.d.ts +211 -0
  15. package/dist/bundles/index.js +6 -6
  16. package/dist/button/button.examples.json +3 -3
  17. package/dist/button/button2.js +1 -1
  18. package/dist/button-group/button-group2.js +1 -1
  19. package/dist/card/card.examples.json +2 -2
  20. package/dist/card/card2.js +4 -4
  21. package/dist/chat-message/chat-message.examples.json +4 -4
  22. package/dist/chat-message/chat-message2.js +1 -1
  23. package/dist/checkbox/checkbox-group2.js +1 -1
  24. package/dist/checkbox/checkbox2.js +1 -1
  25. package/dist/color/color2.js +1 -1
  26. package/dist/combobox/combobox.examples.json +5 -5
  27. package/dist/combobox/combobox2.js +1 -1
  28. package/dist/copy-button/copy-button.examples.json +2 -2
  29. package/dist/copy-button/copy-button2.js +1 -1
  30. package/dist/custom-elements-jsx.d.ts +112 -1
  31. package/dist/custom-elements-vue.d.ts +110 -1
  32. package/dist/custom-elements.json +3554 -291
  33. package/dist/data.html.json +95 -1
  34. package/dist/data.snippets.json +45 -45
  35. package/dist/date/date2.js +1 -1
  36. package/dist/datetime/datetime2.js +1 -1
  37. package/dist/dialog/dialog-footer2.js +1 -1
  38. package/dist/dialog/dialog-header2.js +1 -1
  39. package/dist/dialog/dialog.examples.json +3 -3
  40. package/dist/dialog/dialog2.js +1 -1
  41. package/dist/divider/divider.examples.json +1 -1
  42. package/dist/divider/divider2.js +1 -1
  43. package/dist/dot/dot2.js +1 -1
  44. package/dist/drawer/drawer-content2.js +1 -1
  45. package/dist/drawer/drawer-footer2.js +1 -1
  46. package/dist/drawer/drawer-header2.js +1 -1
  47. package/dist/drawer/drawer2.js +1 -1
  48. package/dist/dropdown/dropdown-footer2.js +1 -1
  49. package/dist/dropdown/dropdown-header2.js +1 -1
  50. package/dist/dropdown/dropdown2.js +1 -1
  51. package/dist/dropdown-group/dropdown-group.examples.json +4 -4
  52. package/dist/dropdown-group/dropdown-group.js +1 -1
  53. package/dist/dropzone/dropzone.examples.json +1 -1
  54. package/dist/dropzone/dropzone2.js +1 -1
  55. package/dist/file/file2.js +1 -1
  56. package/dist/format-bytes/format-bytes2.js +1 -1
  57. package/dist/format-datetime/format-datetime.examples.json +3 -3
  58. package/dist/format-datetime/format-datetime2.js +1 -1
  59. package/dist/format-number/format-number2.js +1 -1
  60. package/dist/format-relative-time/format-relative-time2.js +1 -1
  61. package/dist/format-truncate/format-truncate.examples.json +4 -4
  62. package/dist/format-truncate/format-truncate2.js +1 -1
  63. package/dist/forms/actions.examples.json +1 -1
  64. package/dist/forms/control/control.examples.json +1 -1
  65. package/dist/forms/control/control2.js +1 -1
  66. package/dist/forms/control-group/control-group2.js +1 -1
  67. package/dist/forms/control-message/control-message2.js +1 -1
  68. package/dist/gauge/gauge.examples.json +2 -2
  69. package/dist/gauge/gauge2.js +1 -1
  70. package/dist/grid/cell/cell2.js +1 -1
  71. package/dist/grid/column/column2.js +1 -1
  72. package/dist/grid/footer/footer2.js +1 -1
  73. package/dist/grid/grid.examples.js.map +1 -1
  74. package/dist/grid/grid.examples.json +34 -34
  75. package/dist/grid/grid2.js +1 -1
  76. package/dist/grid/header/header2.js +1 -1
  77. package/dist/grid/placeholder/placeholder2.js +1 -1
  78. package/dist/grid/row/row2.js +1 -1
  79. package/dist/icon/icon2.js +2 -2
  80. package/dist/icon-button/icon-button2.js +1 -1
  81. package/dist/index.js +1 -1
  82. package/dist/input/input-group2.js +1 -1
  83. package/dist/input/input2.js +1 -1
  84. package/dist/internal/controllers/gesture.controller.d.ts +122 -42
  85. package/dist/internal/controllers/gesture.controller.examples.js.map +1 -1
  86. package/dist/internal/controllers/gesture.controller.examples.json +2 -2
  87. package/dist/internal/controllers/gesture.controller.js +300 -159
  88. package/dist/internal/controllers/gesture.controller.js.map +1 -1
  89. package/dist/internal/controllers/key-state.controller.d.ts +18 -0
  90. package/dist/internal/controllers/key-state.controller.js +84 -0
  91. package/dist/internal/controllers/key-state.controller.js.map +1 -0
  92. package/dist/internal/controllers/keynav-grid.controller.examples.json +1 -1
  93. package/dist/internal/controllers/keynav-list.controller.examples.json +1 -1
  94. package/dist/internal/controllers/keynav-spatial.controller.d.ts +4 -1
  95. package/dist/internal/controllers/keynav-spatial.controller.js +7 -6
  96. package/dist/internal/controllers/keynav-spatial.controller.js.map +1 -1
  97. package/dist/internal/controllers/popover.examples.json +2 -2
  98. package/dist/internal/index.d.ts +2 -0
  99. package/dist/internal/index.js +29 -27
  100. package/dist/internal/services/global.service.js +1 -1
  101. package/dist/internal/utils/dom.d.ts +1 -0
  102. package/dist/internal/utils/dom.js +42 -38
  103. package/dist/internal/utils/dom.js.map +1 -1
  104. package/dist/internal/utils/focus.d.ts +2 -0
  105. package/dist/internal/utils/focus.js +14 -7
  106. package/dist/internal/utils/focus.js.map +1 -1
  107. package/dist/internal/utils/numeric.d.ts +3 -0
  108. package/dist/internal/utils/numeric.js +14 -0
  109. package/dist/internal/utils/numeric.js.map +1 -0
  110. package/dist/logo/logo.examples.json +1 -1
  111. package/dist/logo/logo2.js +1 -1
  112. package/dist/menu/menu-item2.js +1 -1
  113. package/dist/menu/menu.examples.js.map +1 -1
  114. package/dist/menu/menu.examples.json +4 -4
  115. package/dist/menu/menu2.js +1 -1
  116. package/dist/month/month2.js +1 -1
  117. package/dist/notification/notification-group2.js +1 -1
  118. package/dist/notification/notification.examples.json +3 -3
  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.json +10 -10
  125. package/dist/page/page2.js +1 -1
  126. package/dist/page-header/page-header.examples.json +1 -1
  127. package/dist/page-header/page-header2.js +1 -1
  128. package/dist/page-loader/page-loader2.js +1 -1
  129. package/dist/pagination/pagination.examples.json +6 -6
  130. package/dist/pagination/pagination2.js +1 -1
  131. package/dist/panel/panel2.js +4 -4
  132. package/dist/password/password2.js +1 -1
  133. package/dist/preferences-input/preferences-input.examples.json +1 -1
  134. package/dist/preferences-input/preferences-input2.js +1 -1
  135. package/dist/progress-bar/progress-bar.examples.json +1 -1
  136. package/dist/progress-bar/progress-bar2.js +1 -1
  137. package/dist/progress-ring/progress-ring2.js +1 -1
  138. package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
  139. package/dist/pulse/pulse2.js +1 -1
  140. package/dist/radio/radio-group2.js +1 -1
  141. package/dist/radio/radio2.js +1 -1
  142. package/dist/range/range.examples.json +1 -1
  143. package/dist/range/range2.js +1 -1
  144. package/dist/resize-handle/resize-handle.examples.json +4 -4
  145. package/dist/resize-handle/resize-handle2.js +6 -10
  146. package/dist/resize-handle/resize-handle2.js.map +1 -1
  147. package/dist/search/search2.js +1 -1
  148. package/dist/select/select2.js +1 -1
  149. package/dist/skeleton/skeleton2.js +1 -1
  150. package/dist/sort-button/sort-button2.js +1 -1
  151. package/dist/sparkline/sparkline.examples.json +2 -2
  152. package/dist/sparkline/sparkline2.js +1 -1
  153. package/dist/star-rating/star-rating2.js +1 -1
  154. package/dist/steps/steps2.js +2 -2
  155. package/dist/switch/switch-group2.js +1 -1
  156. package/dist/switch/switch2.js +1 -1
  157. package/dist/tabs/tabs-group2.js +1 -1
  158. package/dist/tabs/tabs.examples.json +4 -4
  159. package/dist/tabs/tabs2.js +2 -2
  160. package/dist/tag/tag.examples.json +1 -1
  161. package/dist/tag/tag2.js +1 -1
  162. package/dist/textarea/textarea.d.ts +7 -1
  163. package/dist/textarea/textarea.examples.js.map +1 -1
  164. package/dist/textarea/textarea.examples.json +22 -0
  165. package/dist/textarea/textarea.js +1 -1
  166. package/dist/textarea/textarea.js.map +1 -1
  167. package/dist/textarea/textarea2.js +10 -3
  168. package/dist/textarea/textarea2.js.map +1 -1
  169. package/dist/time/time2.js +1 -1
  170. package/dist/toast/toast.examples.json +1 -1
  171. package/dist/toast/toast2.js +1 -1
  172. package/dist/toggletip/toggletip-footer2.js +1 -1
  173. package/dist/toggletip/toggletip-header2.js +1 -1
  174. package/dist/toggletip/toggletip2.js +1 -1
  175. package/dist/toolbar/toolbar2.js +1 -1
  176. package/dist/tooltip/tooltip.examples.json +2 -2
  177. package/dist/tooltip/tooltip2.js +1 -1
  178. package/dist/tree/tree-node2.js +1 -1
  179. package/dist/tree/tree2.js +1 -1
  180. package/dist/viewport/define.d.ts +7 -0
  181. package/dist/viewport/define.js +7 -0
  182. package/dist/viewport/define.js.map +1 -0
  183. package/dist/viewport/index.d.ts +3 -0
  184. package/dist/viewport/index.js +3 -0
  185. package/dist/viewport/viewport-animation.controller.d.ts +21 -0
  186. package/dist/viewport/viewport-animation.controller.js +93 -0
  187. package/dist/viewport/viewport-animation.controller.js.map +1 -0
  188. package/dist/viewport/viewport-autofit.controller.d.ts +18 -0
  189. package/dist/viewport/viewport-autofit.controller.js +105 -0
  190. package/dist/viewport/viewport-autofit.controller.js.map +1 -0
  191. package/dist/viewport/viewport-fitting.utils.d.ts +36 -0
  192. package/dist/viewport/viewport-fitting.utils.js +35 -0
  193. package/dist/viewport/viewport-fitting.utils.js.map +1 -0
  194. package/dist/viewport/viewport-gesture-navigation.controller.d.ts +29 -0
  195. package/dist/viewport/viewport-gesture-navigation.controller.js +311 -0
  196. package/dist/viewport/viewport-gesture-navigation.controller.js.map +1 -0
  197. package/dist/viewport/viewport-gridlines.d.ts +38 -0
  198. package/dist/viewport/viewport-gridlines.js +6 -0
  199. package/dist/viewport/viewport-gridlines.js.map +1 -0
  200. package/dist/viewport/viewport-gridlines.utils.d.ts +11 -0
  201. package/dist/viewport/viewport-gridlines.utils.js +54 -0
  202. package/dist/viewport/viewport-gridlines.utils.js.map +1 -0
  203. package/dist/viewport/viewport-gridlines2.js +154 -0
  204. package/dist/viewport/viewport-gridlines2.js.map +1 -0
  205. package/dist/viewport/viewport-navigation.controller.d.ts +27 -0
  206. package/dist/viewport/viewport-navigation.controller.js +142 -0
  207. package/dist/viewport/viewport-navigation.controller.js.map +1 -0
  208. package/dist/viewport/viewport-navigation.types.d.ts +9 -0
  209. package/dist/viewport/viewport-projection.utils.d.ts +7 -0
  210. package/dist/viewport/viewport-projection.utils.js +25 -0
  211. package/dist/viewport/viewport-projection.utils.js.map +1 -0
  212. package/dist/viewport/viewport.d.ts +92 -0
  213. package/dist/viewport/viewport.examples.js +6 -0
  214. package/dist/viewport/viewport.examples.js.map +1 -0
  215. package/dist/viewport/viewport.examples.json +60 -0
  216. package/dist/viewport/viewport.js +6 -0
  217. package/dist/viewport/viewport.js.map +1 -0
  218. package/dist/viewport/viewport.types.d.ts +66 -0
  219. package/dist/viewport/viewport2.js +375 -0
  220. package/dist/viewport/viewport2.js.map +1 -0
  221. package/dist/week/week2.js +1 -1
  222. package/package.json +14 -2
package/dist/grid/grid.examples.json CHANGED
@@ -5,7 +5,7 @@
5
5
  {
6
6
  "id": "grid",
7
7
  "name": "Default",
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",
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><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column><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><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><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><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><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><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><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><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><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><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><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.",
10
10
  "description": "",
11
11
  "composition": false,
@@ -14,7 +14,7 @@
14
14
  {
15
15
  "id": "grid-keynav",
16
16
  "name": "Keynav",
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",
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>In example 3, moves focus down five rows, scrolling so the bottom row in the currently visible set of rows becomes the first visible row.</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>In example 3, moves focus up 5 rows, scrolling so the top row in the currently visible set of rows becomes the last visible row.</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.",
19
19
  "description": "",
20
20
  "composition": false,
@@ -23,7 +23,7 @@
23
23
  {
24
24
  "id": "grid-multi-select",
25
25
  "name": "MultiSelect",
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",
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> <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> <nve-grid-cell>cell 0-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 1-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 2-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 3-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 4-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 5-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 6-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 7-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 8-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 9-2</nve-grid-cell> <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",
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.",
28
28
  "description": "",
29
29
  "composition": false,
@@ -32,7 +32,7 @@
32
32
  {
33
33
  "id": "grid-bulk-actions",
34
34
  "name": "BulkActions",
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",
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> <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> <nve-grid-cell>cell 0-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 1-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 2-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 3-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 4-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 5-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 6-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 7-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 8-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 9-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 10-2</nve-grid-cell> <nve-grid-cell>cell 10-3</nve-grid-cell> <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> <nve-grid-cell>cell 11-2</nve-grid-cell> <nve-grid-cell>cell 11-3</nve-grid-cell> <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> <nve-grid-cell>cell 12-2</nve-grid-cell> <nve-grid-cell>cell 12-3</nve-grid-cell> <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> <nve-grid-cell>cell 13-2</nve-grid-cell> <nve-grid-cell>cell 13-3</nve-grid-cell> <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> <nve-grid-cell>cell 14-2</nve-grid-cell> <nve-grid-cell>cell 14-3</nve-grid-cell> <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> <nve-grid-cell>cell 15-2</nve-grid-cell> <nve-grid-cell>cell 15-3</nve-grid-cell> <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> <nve-grid-cell>cell 16-2</nve-grid-cell> <nve-grid-cell>cell 16-3</nve-grid-cell> <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> <nve-grid-cell>cell 17-2</nve-grid-cell> <nve-grid-cell>cell 17-3</nve-grid-cell> <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> <nve-grid-cell>cell 18-2</nve-grid-cell> <nve-grid-cell>cell 18-3</nve-grid-cell> <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> <nve-grid-cell>cell 19-2</nve-grid-cell> <nve-grid-cell>cell 19-3</nve-grid-cell> <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.",
37
37
  "description": "",
38
38
  "composition": true,
@@ -41,7 +41,7 @@
41
41
  {
42
42
  "id": "grid-single-select",
43
43
  "name": "SingleSelect",
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",
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> <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> <nve-grid-cell>cell 0-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 1-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 2-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 3-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 4-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 5-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 6-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 7-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 8-2</nve-grid-cell> <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>\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> <nve-grid-cell>cell 9-2</nve-grid-cell> <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",
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.",
46
46
  "description": "",
47
47
  "composition": false,
@@ -50,7 +50,7 @@
50
50
  {
51
51
  "id": "grid-row-action",
52
52
  "name": "RowAction",
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",
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> <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> <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell> <nve-grid-cell>cell 0-4</nve-grid-cell>\n <nve-grid-cell>\n <nve-icon-button id=\"action-0\" popovertarget=\"row-actions-dropdown\" container=\"flat\" icon-name=\"more-actions\" aria-label=\"row 0 actions\"></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> <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell> <nve-grid-cell>cell 1-4</nve-grid-cell>\n <nve-grid-cell>\n <nve-icon-button id=\"action-1\" popovertarget=\"row-actions-dropdown\" container=\"flat\" icon-name=\"more-actions\" aria-label=\"row 1 actions\"></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> <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell> <nve-grid-cell>cell 2-4</nve-grid-cell>\n <nve-grid-cell>\n <nve-icon-button id=\"action-2\" popovertarget=\"row-actions-dropdown\" container=\"flat\" icon-name=\"more-actions\" aria-label=\"row 2 actions\"></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> <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell> <nve-grid-cell>cell 3-4</nve-grid-cell>\n <nve-grid-cell>\n <nve-icon-button id=\"action-3\" popovertarget=\"row-actions-dropdown\" container=\"flat\" icon-name=\"more-actions\" aria-label=\"row 3 actions\"></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> <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell> <nve-grid-cell>cell 4-4</nve-grid-cell>\n <nve-grid-cell>\n <nve-icon-button id=\"action-4\" popovertarget=\"row-actions-dropdown\" container=\"flat\" icon-name=\"more-actions\" aria-label=\"row 4 actions\"></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> <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell> <nve-grid-cell>cell 5-4</nve-grid-cell>\n <nve-grid-cell>\n <nve-icon-button id=\"action-5\" popovertarget=\"row-actions-dropdown\" container=\"flat\" icon-name=\"more-actions\" aria-label=\"row 5 actions\"></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> <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell> <nve-grid-cell>cell 6-4</nve-grid-cell>\n <nve-grid-cell>\n <nve-icon-button id=\"action-6\" popovertarget=\"row-actions-dropdown\" container=\"flat\" icon-name=\"more-actions\" aria-label=\"row 6 actions\"></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> <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell> <nve-grid-cell>cell 7-4</nve-grid-cell>\n <nve-grid-cell>\n <nve-icon-button id=\"action-7\" popovertarget=\"row-actions-dropdown\" container=\"flat\" icon-name=\"more-actions\" aria-label=\"row 7 actions\"></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> <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell> <nve-grid-cell>cell 8-4</nve-grid-cell>\n <nve-grid-cell>\n <nve-icon-button id=\"action-8\" popovertarget=\"row-actions-dropdown\" container=\"flat\" icon-name=\"more-actions\" aria-label=\"row 8 actions\"></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> <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell> <nve-grid-cell>cell 9-4</nve-grid-cell>\n <nve-grid-cell>\n <nve-icon-button id=\"action-9\" popovertarget=\"row-actions-dropdown\" container=\"flat\" icon-name=\"more-actions\" aria-label=\"row 9 actions\"></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.",
55
55
  "description": "",
56
56
  "composition": true,
@@ -59,7 +59,7 @@
59
59
  {
60
60
  "id": "grid-row-groups",
61
61
  "name": "RowGroups",
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",
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> <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 icon-name=\"caret\" container=\"flat\" direction=\"right\" aria-label=\"view session 2yuecae SSD uploads\"></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 icon-name=\"caret\" container=\"flat\" direction=\"down\" aria-label=\"view session mvwgh3t SSD uploads\"></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 icon-name=\"caret\" container=\"flat\" direction=\"right\" aria-label=\"view session bg5ujqp SSD uploads\"></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 icon-name=\"caret\" container=\"flat\" direction=\"right\" aria-label=\"view session 6ruehvh SSD uploads\"></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.",
64
64
  "description": "",
65
65
  "composition": false,
@@ -68,7 +68,7 @@
68
68
  {
69
69
  "id": "grid-footer",
70
70
  "name": "Footer",
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",
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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <nve-grid-cell>cell 10-2</nve-grid-cell> <nve-grid-cell>cell 10-3</nve-grid-cell> <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> <nve-grid-cell>cell 11-2</nve-grid-cell> <nve-grid-cell>cell 11-3</nve-grid-cell> <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> <nve-grid-cell>cell 12-2</nve-grid-cell> <nve-grid-cell>cell 12-3</nve-grid-cell> <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> <nve-grid-cell>cell 13-2</nve-grid-cell> <nve-grid-cell>cell 13-3</nve-grid-cell> <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.",
73
73
  "description": "",
74
74
  "composition": false,
@@ -77,7 +77,7 @@
77
77
  {
78
78
  "id": "grid-pagination",
79
79
  "name": "Pagination",
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",
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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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-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.",
82
82
  "description": "",
83
83
  "composition": false,
@@ -86,7 +86,7 @@
86
86
  {
87
87
  "id": "grid-scroll",
88
88
  "name": "Scroll",
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",
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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <nve-grid-cell>cell 10-2</nve-grid-cell> <nve-grid-cell>cell 10-3</nve-grid-cell> <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> <nve-grid-cell>cell 11-2</nve-grid-cell> <nve-grid-cell>cell 11-3</nve-grid-cell> <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> <nve-grid-cell>cell 12-2</nve-grid-cell> <nve-grid-cell>cell 12-3</nve-grid-cell> <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> <nve-grid-cell>cell 13-2</nve-grid-cell> <nve-grid-cell>cell 13-3</nve-grid-cell> <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> <nve-grid-cell>cell 14-2</nve-grid-cell> <nve-grid-cell>cell 14-3</nve-grid-cell> <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> <nve-grid-cell>cell 15-2</nve-grid-cell> <nve-grid-cell>cell 15-3</nve-grid-cell> <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> <nve-grid-cell>cell 16-2</nve-grid-cell> <nve-grid-cell>cell 16-3</nve-grid-cell> <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> <nve-grid-cell>cell 17-2</nve-grid-cell> <nve-grid-cell>cell 17-3</nve-grid-cell> <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> <nve-grid-cell>cell 18-2</nve-grid-cell> <nve-grid-cell>cell 18-3</nve-grid-cell> <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> <nve-grid-cell>cell 19-2</nve-grid-cell> <nve-grid-cell>cell 19-3</nve-grid-cell> <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> <nve-grid-cell>cell 20-2</nve-grid-cell> <nve-grid-cell>cell 20-3</nve-grid-cell> <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> <nve-grid-cell>cell 21-2</nve-grid-cell> <nve-grid-cell>cell 21-3</nve-grid-cell> <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> <nve-grid-cell>cell 22-2</nve-grid-cell> <nve-grid-cell>cell 22-3</nve-grid-cell> <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> <nve-grid-cell>cell 23-2</nve-grid-cell> <nve-grid-cell>cell 23-3</nve-grid-cell> <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> <nve-grid-cell>cell 24-2</nve-grid-cell> <nve-grid-cell>cell 24-3</nve-grid-cell> <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> <nve-grid-cell>cell 25-2</nve-grid-cell> <nve-grid-cell>cell 25-3</nve-grid-cell> <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> <nve-grid-cell>cell 26-2</nve-grid-cell> <nve-grid-cell>cell 26-3</nve-grid-cell> <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> <nve-grid-cell>cell 27-2</nve-grid-cell> <nve-grid-cell>cell 27-3</nve-grid-cell> <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> <nve-grid-cell>cell 28-2</nve-grid-cell> <nve-grid-cell>cell 28-3</nve-grid-cell> <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> <nve-grid-cell>cell 29-2</nve-grid-cell> <nve-grid-cell>cell 29-3</nve-grid-cell> <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> <nve-grid-cell>cell 30-2</nve-grid-cell> <nve-grid-cell>cell 30-3</nve-grid-cell> <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> <nve-grid-cell>cell 31-2</nve-grid-cell> <nve-grid-cell>cell 31-3</nve-grid-cell> <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> <nve-grid-cell>cell 32-2</nve-grid-cell> <nve-grid-cell>cell 32-3</nve-grid-cell> <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> <nve-grid-cell>cell 33-2</nve-grid-cell> <nve-grid-cell>cell 33-3</nve-grid-cell> <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> <nve-grid-cell>cell 34-2</nve-grid-cell> <nve-grid-cell>cell 34-3</nve-grid-cell> <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> <nve-grid-cell>cell 35-2</nve-grid-cell> <nve-grid-cell>cell 35-3</nve-grid-cell> <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> <nve-grid-cell>cell 36-2</nve-grid-cell> <nve-grid-cell>cell 36-3</nve-grid-cell> <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> <nve-grid-cell>cell 37-2</nve-grid-cell> <nve-grid-cell>cell 37-3</nve-grid-cell> <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> <nve-grid-cell>cell 38-2</nve-grid-cell> <nve-grid-cell>cell 38-3</nve-grid-cell> <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> <nve-grid-cell>cell 39-2</nve-grid-cell> <nve-grid-cell>cell 39-3</nve-grid-cell> <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> <nve-grid-cell>cell 40-2</nve-grid-cell> <nve-grid-cell>cell 40-3</nve-grid-cell> <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> <nve-grid-cell>cell 41-2</nve-grid-cell> <nve-grid-cell>cell 41-3</nve-grid-cell> <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> <nve-grid-cell>cell 42-2</nve-grid-cell> <nve-grid-cell>cell 42-3</nve-grid-cell> <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> <nve-grid-cell>cell 43-2</nve-grid-cell> <nve-grid-cell>cell 43-3</nve-grid-cell> <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> <nve-grid-cell>cell 44-2</nve-grid-cell> <nve-grid-cell>cell 44-3</nve-grid-cell> <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> <nve-grid-cell>cell 45-2</nve-grid-cell> <nve-grid-cell>cell 45-3</nve-grid-cell> <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> <nve-grid-cell>cell 46-2</nve-grid-cell> <nve-grid-cell>cell 46-3</nve-grid-cell> <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> <nve-grid-cell>cell 47-2</nve-grid-cell> <nve-grid-cell>cell 47-3</nve-grid-cell> <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> <nve-grid-cell>cell 48-2</nve-grid-cell> <nve-grid-cell>cell 48-3</nve-grid-cell> <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> <nve-grid-cell>cell 49-2</nve-grid-cell> <nve-grid-cell>cell 49-3</nve-grid-cell> <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> <nve-grid-cell>cell 50-2</nve-grid-cell> <nve-grid-cell>cell 50-3</nve-grid-cell> <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> <nve-grid-cell>cell 51-2</nve-grid-cell> <nve-grid-cell>cell 51-3</nve-grid-cell> <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> <nve-grid-cell>cell 52-2</nve-grid-cell> <nve-grid-cell>cell 52-3</nve-grid-cell> <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> <nve-grid-cell>cell 53-2</nve-grid-cell> <nve-grid-cell>cell 53-3</nve-grid-cell> <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> <nve-grid-cell>cell 54-2</nve-grid-cell> <nve-grid-cell>cell 54-3</nve-grid-cell> <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> <nve-grid-cell>cell 55-2</nve-grid-cell> <nve-grid-cell>cell 55-3</nve-grid-cell> <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> <nve-grid-cell>cell 56-2</nve-grid-cell> <nve-grid-cell>cell 56-3</nve-grid-cell> <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> <nve-grid-cell>cell 57-2</nve-grid-cell> <nve-grid-cell>cell 57-3</nve-grid-cell> <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> <nve-grid-cell>cell 58-2</nve-grid-cell> <nve-grid-cell>cell 58-3</nve-grid-cell> <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> <nve-grid-cell>cell 59-2</nve-grid-cell> <nve-grid-cell>cell 59-3</nve-grid-cell> <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> <nve-grid-cell>cell 60-2</nve-grid-cell> <nve-grid-cell>cell 60-3</nve-grid-cell> <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> <nve-grid-cell>cell 61-2</nve-grid-cell> <nve-grid-cell>cell 61-3</nve-grid-cell> <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> <nve-grid-cell>cell 62-2</nve-grid-cell> <nve-grid-cell>cell 62-3</nve-grid-cell> <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> <nve-grid-cell>cell 63-2</nve-grid-cell> <nve-grid-cell>cell 63-3</nve-grid-cell> <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> <nve-grid-cell>cell 64-2</nve-grid-cell> <nve-grid-cell>cell 64-3</nve-grid-cell> <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> <nve-grid-cell>cell 65-2</nve-grid-cell> <nve-grid-cell>cell 65-3</nve-grid-cell> <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> <nve-grid-cell>cell 66-2</nve-grid-cell> <nve-grid-cell>cell 66-3</nve-grid-cell> <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> <nve-grid-cell>cell 67-2</nve-grid-cell> <nve-grid-cell>cell 67-3</nve-grid-cell> <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> <nve-grid-cell>cell 68-2</nve-grid-cell> <nve-grid-cell>cell 68-3</nve-grid-cell> <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> <nve-grid-cell>cell 69-2</nve-grid-cell> <nve-grid-cell>cell 69-3</nve-grid-cell> <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> <nve-grid-cell>cell 70-2</nve-grid-cell> <nve-grid-cell>cell 70-3</nve-grid-cell> <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> <nve-grid-cell>cell 71-2</nve-grid-cell> <nve-grid-cell>cell 71-3</nve-grid-cell> <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> <nve-grid-cell>cell 72-2</nve-grid-cell> <nve-grid-cell>cell 72-3</nve-grid-cell> <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> <nve-grid-cell>cell 73-2</nve-grid-cell> <nve-grid-cell>cell 73-3</nve-grid-cell> <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> <nve-grid-cell>cell 74-2</nve-grid-cell> <nve-grid-cell>cell 74-3</nve-grid-cell> <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> <nve-grid-cell>cell 75-2</nve-grid-cell> <nve-grid-cell>cell 75-3</nve-grid-cell> <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> <nve-grid-cell>cell 76-2</nve-grid-cell> <nve-grid-cell>cell 76-3</nve-grid-cell> <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> <nve-grid-cell>cell 77-2</nve-grid-cell> <nve-grid-cell>cell 77-3</nve-grid-cell> <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> <nve-grid-cell>cell 78-2</nve-grid-cell> <nve-grid-cell>cell 78-3</nve-grid-cell> <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> <nve-grid-cell>cell 79-2</nve-grid-cell> <nve-grid-cell>cell 79-3</nve-grid-cell> <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> <nve-grid-cell>cell 80-2</nve-grid-cell> <nve-grid-cell>cell 80-3</nve-grid-cell> <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> <nve-grid-cell>cell 81-2</nve-grid-cell> <nve-grid-cell>cell 81-3</nve-grid-cell> <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> <nve-grid-cell>cell 82-2</nve-grid-cell> <nve-grid-cell>cell 82-3</nve-grid-cell> <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> <nve-grid-cell>cell 83-2</nve-grid-cell> <nve-grid-cell>cell 83-3</nve-grid-cell> <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> <nve-grid-cell>cell 84-2</nve-grid-cell> <nve-grid-cell>cell 84-3</nve-grid-cell> <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> <nve-grid-cell>cell 85-2</nve-grid-cell> <nve-grid-cell>cell 85-3</nve-grid-cell> <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> <nve-grid-cell>cell 86-2</nve-grid-cell> <nve-grid-cell>cell 86-3</nve-grid-cell> <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> <nve-grid-cell>cell 87-2</nve-grid-cell> <nve-grid-cell>cell 87-3</nve-grid-cell> <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> <nve-grid-cell>cell 88-2</nve-grid-cell> <nve-grid-cell>cell 88-3</nve-grid-cell> <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> <nve-grid-cell>cell 89-2</nve-grid-cell> <nve-grid-cell>cell 89-3</nve-grid-cell> <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> <nve-grid-cell>cell 90-2</nve-grid-cell> <nve-grid-cell>cell 90-3</nve-grid-cell> <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> <nve-grid-cell>cell 91-2</nve-grid-cell> <nve-grid-cell>cell 91-3</nve-grid-cell> <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> <nve-grid-cell>cell 92-2</nve-grid-cell> <nve-grid-cell>cell 92-3</nve-grid-cell> <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> <nve-grid-cell>cell 93-2</nve-grid-cell> <nve-grid-cell>cell 93-3</nve-grid-cell> <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> <nve-grid-cell>cell 94-2</nve-grid-cell> <nve-grid-cell>cell 94-3</nve-grid-cell> <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> <nve-grid-cell>cell 95-2</nve-grid-cell> <nve-grid-cell>cell 95-3</nve-grid-cell> <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> <nve-grid-cell>cell 96-2</nve-grid-cell> <nve-grid-cell>cell 96-3</nve-grid-cell> <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> <nve-grid-cell>cell 97-2</nve-grid-cell> <nve-grid-cell>cell 97-3</nve-grid-cell> <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> <nve-grid-cell>cell 98-2</nve-grid-cell> <nve-grid-cell>cell 98-3</nve-grid-cell> <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> <nve-grid-cell>cell 99-2</nve-grid-cell> <nve-grid-cell>cell 99-3</nve-grid-cell> <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.",
91
91
  "description": "",
92
92
  "composition": false,
@@ -97,7 +97,7 @@
97
97
  {
98
98
  "id": "grid-scroll-position",
99
99
  "name": "ScrollPosition",
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",
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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <nve-grid-cell>cell 10-2</nve-grid-cell> <nve-grid-cell>cell 10-3</nve-grid-cell> <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> <nve-grid-cell>cell 11-2</nve-grid-cell> <nve-grid-cell>cell 11-3</nve-grid-cell> <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> <nve-grid-cell>cell 12-2</nve-grid-cell> <nve-grid-cell>cell 12-3</nve-grid-cell> <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> <nve-grid-cell>cell 13-2</nve-grid-cell> <nve-grid-cell>cell 13-3</nve-grid-cell> <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> <nve-grid-cell>cell 14-2</nve-grid-cell> <nve-grid-cell>cell 14-3</nve-grid-cell> <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> <nve-grid-cell>cell 15-2</nve-grid-cell> <nve-grid-cell>cell 15-3</nve-grid-cell> <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> <nve-grid-cell>cell 16-2</nve-grid-cell> <nve-grid-cell>cell 16-3</nve-grid-cell> <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> <nve-grid-cell>cell 17-2</nve-grid-cell> <nve-grid-cell>cell 17-3</nve-grid-cell> <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> <nve-grid-cell>cell 18-2</nve-grid-cell> <nve-grid-cell>cell 18-3</nve-grid-cell> <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> <nve-grid-cell>cell 19-2</nve-grid-cell> <nve-grid-cell>cell 19-3</nve-grid-cell> <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.",
102
102
  "description": "",
103
103
  "composition": false,
@@ -106,7 +106,7 @@
106
106
  {
107
107
  "id": "grid-full-height",
108
108
  "name": "FullHeight",
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",
109
+ "template": "<section nve-layout=\"column gap:lg\" style=\"height: 500px; padding: var(--nve-ref-size-100); border: 1px solid var(--nve-ref-border-color-emphasis); resize: vertical; overflow: hidden\">\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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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</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.",
111
111
  "description": "",
112
112
  "composition": false,
@@ -117,7 +117,7 @@
117
117
  {
118
118
  "id": "grid-column-action",
119
119
  "name": "ColumnAction",
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",
120
+ "template": "<nve-grid>\n <nve-grid-header>\n <nve-grid-column> column 0 <nve-icon-button container=\"flat\" popovertarget=\"grid-column-action-dropdown\" icon-name=\"more-actions\" slot=\"actions\"></nve-icon-button> </nve-grid-column>\n <nve-grid-column> column 1 <nve-icon-button container=\"flat\" popovertarget=\"grid-column-action-dropdown\" icon-name=\"more-actions\" slot=\"actions\"></nve-icon-button> </nve-grid-column>\n <nve-grid-column> column 2 <nve-icon-button container=\"flat\" popovertarget=\"grid-column-action-dropdown\" icon-name=\"more-actions\" slot=\"actions\"></nve-icon-button> </nve-grid-column>\n <nve-grid-column> column 3 <nve-icon-button container=\"flat\" popovertarget=\"grid-column-action-dropdown\" icon-name=\"more-actions\" slot=\"actions\"></nve-icon-button> </nve-grid-column>\n <nve-grid-column> column 4 <nve-icon-button container=\"flat\" popovertarget=\"grid-column-action-dropdown\" icon-name=\"more-actions\" slot=\"actions\"></nve-icon-button> </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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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<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.",
122
122
  "description": "",
123
123
  "composition": true,
@@ -126,7 +126,7 @@
126
126
  {
127
127
  "id": "grid-column-width",
128
128
  "name": "ColumnWidth",
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",
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> <nve-grid-column width=\"300px\">column 2</nve-grid-column>\n <nve-grid-column width=\"300px\">column 3</nve-grid-column> <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> <nve-grid-cell>cell 0-2</nve-grid-cell> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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>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.",
131
131
  "description": "",
132
132
  "composition": false,
@@ -135,7 +135,7 @@
135
135
  {
136
136
  "id": "grid-content",
137
137
  "name": "Content",
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",
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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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",
139
139
  "summary": "Basic grid content display with evenly distributed columns, including standard data presentation and cell content wrapping behavior.",
140
140
  "description": "",
141
141
  "composition": false,
@@ -146,7 +146,7 @@
146
146
  {
147
147
  "id": "grid-column-fixed",
148
148
  "name": "ColumnFixed",
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",
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> <nve-grid-column position width=\"200px\">column 1</nve-grid-column> <nve-grid-column position width=\"200px\">column 2</nve-grid-column>\n <nve-grid-column position width=\"200px\">column 3</nve-grid-column> <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> <nve-grid-cell>cell 0-2</nve-grid-cell> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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",
150
150
  "summary": "Fix columns to any given side, but keep fixed columns from spanning past the half way point of the grid.",
151
151
  "description": "",
152
152
  "composition": false,
@@ -155,7 +155,7 @@
155
155
  {
156
156
  "id": "grid-column-multi-fixed",
157
157
  "name": "ColumnMultiFixed",
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",
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><nve-grid-column position width=\"200px\">column 1</nve-grid-column><nve-grid-column position width=\"200px\">column 2</nve-grid-column\n ><nve-grid-column position width=\"200px\">column 3</nve-grid-column><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><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><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><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><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><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><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><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><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><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><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.",
160
160
  "description": "",
161
161
  "composition": false,
@@ -164,7 +164,7 @@
164
164
  {
165
165
  "id": "grid-column-stack-fixed",
166
166
  "name": "ColumnStackFixed",
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",
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> <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell> <nve-grid-cell>cell 0-4</nve-grid-cell>\n <nve-grid-cell>cell 0-5</nve-grid-cell> <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> <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell> <nve-grid-cell>cell 1-4</nve-grid-cell>\n <nve-grid-cell>cell 1-5</nve-grid-cell> <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> <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell> <nve-grid-cell>cell 2-4</nve-grid-cell>\n <nve-grid-cell>cell 2-5</nve-grid-cell> <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> <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell> <nve-grid-cell>cell 3-4</nve-grid-cell>\n <nve-grid-cell>cell 3-5</nve-grid-cell> <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> <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell> <nve-grid-cell>cell 4-4</nve-grid-cell>\n <nve-grid-cell>cell 4-5</nve-grid-cell> <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> <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell> <nve-grid-cell>cell 5-4</nve-grid-cell>\n <nve-grid-cell>cell 5-5</nve-grid-cell> <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> <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell> <nve-grid-cell>cell 6-4</nve-grid-cell>\n <nve-grid-cell>cell 6-5</nve-grid-cell> <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> <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell> <nve-grid-cell>cell 7-4</nve-grid-cell>\n <nve-grid-cell>cell 7-5</nve-grid-cell> <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> <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell> <nve-grid-cell>cell 8-4</nve-grid-cell>\n <nve-grid-cell>cell 8-5</nve-grid-cell> <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> <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell> <nve-grid-cell>cell 9-4</nve-grid-cell>\n <nve-grid-cell>cell 9-5</nve-grid-cell> <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.",
169
169
  "description": "",
170
170
  "composition": false,
@@ -173,7 +173,7 @@
173
173
  {
174
174
  "id": "grid-column-dynamic-fixed",
175
175
  "name": "ColumnDynamicFixed",
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",
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><nve-grid-column width=\"200px\" position>column 1</nve-grid-column><nve-grid-column width=\"200px\" position>column 2</nve-grid-column\n ><nve-grid-column width=\"200px\" position>column 3</nve-grid-column><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><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><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><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><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><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><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><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><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><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><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.",
178
178
  "description": "",
179
179
  "composition": false,
@@ -182,7 +182,7 @@
182
182
  {
183
183
  "id": "grid-column-align-center",
184
184
  "name": "ColumnAlignCenter",
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",
185
+ "template": "<nve-grid>\n <nve-grid-header>\n <nve-grid-column column-align=\"center\">column 0</nve-grid-column><nve-grid-column column-align=\"center\">column 1</nve-grid-column><nve-grid-column column-align=\"center\">column 2</nve-grid-column\n ><nve-grid-column column-align=\"center\">column 3</nve-grid-column><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><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><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><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><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><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><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><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><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><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><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.",
187
187
  "description": "",
188
188
  "composition": false,
@@ -193,7 +193,7 @@
193
193
  {
194
194
  "id": "grid-column-align-end",
195
195
  "name": "ColumnAlignEnd",
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",
196
+ "template": "<nve-grid>\n <nve-grid-header>\n <nve-grid-column column-align=\"end\">column 0</nve-grid-column><nve-grid-column column-align=\"end\">column 1</nve-grid-column><nve-grid-column column-align=\"end\">column 2</nve-grid-column\n ><nve-grid-column column-align=\"end\">column 3</nve-grid-column><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><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><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><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><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><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><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><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><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><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><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.",
198
198
  "description": "",
199
199
  "composition": false,
@@ -204,7 +204,7 @@
204
204
  {
205
205
  "id": "grid-column-align-start",
206
206
  "name": "ColumnAlignStart",
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",
207
+ "template": "<nve-grid>\n <nve-grid-header>\n <nve-grid-column column-align=\"start\">column 0</nve-grid-column><nve-grid-column column-align=\"start\">column 1</nve-grid-column><nve-grid-column column-align=\"start\">column 2</nve-grid-column\n ><nve-grid-column column-align=\"start\">column 3</nve-grid-column><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><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><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><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><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><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><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><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><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><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><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.",
209
209
  "description": "",
210
210
  "composition": false,
@@ -215,7 +215,7 @@
215
215
  {
216
216
  "id": "grid-display-settings",
217
217
  "name": "DisplaySettings",
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",
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 popovertarget=\"column-settings-dropdown\" popovertargetaction=\"hide\" interaction=\"destructive\" container=\"flat\" style=\"--height: initial\">restore settings</nve-button>\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> <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column> <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column> </nve-grid-header>\n\n <nve-grid-row> <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> <nve-grid-cell>cell 0-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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> <nve-grid-cell>cell 1-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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> <nve-grid-cell>cell 2-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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> <nve-grid-cell>cell 3-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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> <nve-grid-cell>cell 4-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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> <nve-grid-cell>cell 5-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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> <nve-grid-cell>cell 6-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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> <nve-grid-cell>cell 7-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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> <nve-grid-cell>cell 8-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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> <nve-grid-cell>cell 9-3</nve-grid-cell> </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.",
220
220
  "description": "",
221
221
  "composition": true,
@@ -224,7 +224,7 @@
224
224
  {
225
225
  "id": "grid-row-sort",
226
226
  "name": "RowSort",
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",
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><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><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><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><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><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><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><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><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><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><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.",
229
229
  "description": "",
230
230
  "composition": false,
@@ -290,7 +290,7 @@
290
290
  {
291
291
  "id": "grid-stripe",
292
292
  "name": "Stripe",
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",
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> <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><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><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><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><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><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><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><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><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><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><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.",
295
295
  "description": "",
296
296
  "composition": false,
@@ -301,7 +301,7 @@
301
301
  {
302
302
  "id": "grid-card",
303
303
  "name": "Card",
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",
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><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><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><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><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><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><nve-grid-cell>cell 4-3</nve-grid-cell><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.",
306
306
  "description": "",
307
307
  "composition": false,
@@ -310,7 +310,7 @@
310
310
  {
311
311
  "id": "grid-card-tabs",
312
312
  "name": "CardTabs",
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",
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><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><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><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><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><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><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><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><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><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><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><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</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.",
315
315
  "description": "",
316
316
  "composition": true,
@@ -330,7 +330,7 @@
330
330
  {
331
331
  "id": "grid-full",
332
332
  "name": "Full",
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",
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><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column><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><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><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><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><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><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><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><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><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><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><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.",
335
335
  "description": "",
336
336
  "composition": false,
@@ -341,7 +341,7 @@
341
341
  {
342
342
  "id": "grid-flat",
343
343
  "name": "Flat",
344
- "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",
344
+ "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><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column><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><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><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><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><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><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><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><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><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><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><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><nve-grid-cell>cell 10-2</nve-grid-cell><nve-grid-cell>cell 10-3</nve-grid-cell><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><nve-grid-cell>cell 11-2</nve-grid-cell><nve-grid-cell>cell 11-3</nve-grid-cell><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><nve-grid-cell>cell 12-2</nve-grid-cell><nve-grid-cell>cell 12-3</nve-grid-cell><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><nve-grid-cell>cell 13-2</nve-grid-cell><nve-grid-cell>cell 13-3</nve-grid-cell><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><nve-grid-cell>cell 14-2</nve-grid-cell><nve-grid-cell>cell 14-3</nve-grid-cell><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><nve-grid-cell>cell 15-2</nve-grid-cell><nve-grid-cell>cell 15-3</nve-grid-cell><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><nve-grid-cell>cell 16-2</nve-grid-cell><nve-grid-cell>cell 16-3</nve-grid-cell><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><nve-grid-cell>cell 17-2</nve-grid-cell><nve-grid-cell>cell 17-3</nve-grid-cell><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><nve-grid-cell>cell 18-2</nve-grid-cell><nve-grid-cell>cell 18-3</nve-grid-cell><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><nve-grid-cell>cell 19-2</nve-grid-cell><nve-grid-cell>cell 19-3</nve-grid-cell><nve-grid-cell>cell 19-4</nve-grid-cell>\n </nve-grid-row>\n</nve-grid>\n",
345
345
  "summary": "Flat container styling for minimal visual weight, providing subtle grid presentation that integrates seamlessly with surrounding content.",
346
346
  "description": "",
347
347
  "composition": false,
@@ -363,7 +363,7 @@
363
363
  {
364
364
  "id": "grid-panel-detail",
365
365
  "name": "PanelDetail",
366
- "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",
366
+ "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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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",
367
367
  "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.",
368
368
  "description": "",
369
369
  "composition": true,
@@ -381,7 +381,7 @@
381
381
  {
382
382
  "id": "grid-invalid-dom",
383
383
  "name": "InvalidDOM",
384
- "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",
384
+ "template": "<nve-grid>\n <nve-grid-header>\n <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column><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><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><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><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><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><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><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><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><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><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> <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><nve-grid-cell>cell 9-3</nve-grid-cell> </nve-grid-row>\n\n <span>invalid</span>\n</nve-grid>\n",
385
385
  "summary": "Examples of invalid grid usage patterns for testing and documentation purposes, showing what not to do when implementing grids.",
386
386
  "description": "",
387
387
  "composition": false,
@@ -392,7 +392,7 @@
392
392
  {
393
393
  "id": "grid-audit",
394
394
  "name": "Audit",
395
- "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",
395
+ "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><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column><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><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><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><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><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><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><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><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><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><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><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",
396
396
  "summary": "Examples of invalid grid usage patterns for testing and documentation purposes, showing what not to do when implementing grids.",
397
397
  "description": "",
398
398
  "composition": false,
@@ -403,7 +403,7 @@
403
403
  {
404
404
  "id": "grid-invalid-column-count",
405
405
  "name": "InvalidColumnCount",
406
- "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",
406
+ "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><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> <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> </nve-grid-row>\n </div>\n\n <div>\n <nve-grid-row> <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> </nve-grid-row>\n </div>\n\n <div>\n <nve-grid-row> <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> </nve-grid-row>\n </div>\n\n <div>\n <nve-grid-row> <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> </nve-grid-row>\n </div>\n</nve-grid>\n",
407
407
  "summary": "Do not set the column count to a value that does not match the number of cells in the row.",
408
408
  "description": "",
409
409
  "composition": false,
@@ -414,7 +414,7 @@
414
414
  {
415
415
  "id": "grid-valid-column-count",
416
416
  "name": "ValidColumnCount",
417
- "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",
417
+ "template": "<nve-grid>\n <nve-grid-header> <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column> </nve-grid-header>\n\n <nve-grid-row> <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><nve-grid-cell>cell 0-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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><nve-grid-cell>cell 1-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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><nve-grid-cell>cell 2-3</nve-grid-cell> </nve-grid-row>\n\n <nve-grid-row> <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><nve-grid-cell>cell 3-3</nve-grid-cell> </nve-grid-row>\n</nve-grid>\n",
418
418
  "summary": "Ensure column count matches the number of cells in the row to preserve keyboard navigation.",
419
419
  "description": "",
420
420
  "composition": false,