@nvidia-elements/core 2.12.0 → 2.12.2

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 (175) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/accordion/accordion.examples.json +1 -1
  3. package/dist/accordion/accordion2.js +4 -4
  4. package/dist/alert/alert-group2.js +1 -1
  5. package/dist/alert/alert.examples.json +6 -6
  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/badge2.js +1 -1
  10. package/dist/breadcrumb/breadcrumb2.js +1 -1
  11. package/dist/bundles/index.d.ts +467 -467
  12. package/dist/bundles/index.js +2 -2
  13. package/dist/button/button.examples.json +3 -3
  14. package/dist/button/button2.js +1 -1
  15. package/dist/button-group/button-group2.js +1 -1
  16. package/dist/card/card.examples.json +2 -2
  17. package/dist/card/card2.js +4 -4
  18. package/dist/chat-message/chat-message.examples.json +1 -1
  19. package/dist/chat-message/chat-message2.js +1 -1
  20. package/dist/checkbox/checkbox-group2.js +1 -1
  21. package/dist/checkbox/checkbox.examples.json +5 -5
  22. package/dist/checkbox/checkbox2.js +1 -1
  23. package/dist/color/color.examples.json +2 -2
  24. package/dist/color/color2.js +1 -1
  25. package/dist/combobox/combobox.examples.json +7 -7
  26. package/dist/combobox/combobox2.js +55 -53
  27. package/dist/combobox/combobox2.js.map +1 -1
  28. package/dist/copy-button/copy-button.examples.json +1 -1
  29. package/dist/copy-button/copy-button2.js +1 -1
  30. package/dist/custom-elements.json +28 -14
  31. package/dist/data.snippets.json +18 -18
  32. package/dist/date/date.examples.json +3 -3
  33. package/dist/date/date2.js +1 -1
  34. package/dist/datetime/datetime.examples.json +2 -2
  35. package/dist/datetime/datetime2.js +1 -1
  36. package/dist/dialog/dialog-footer2.js +1 -1
  37. package/dist/dialog/dialog-header2.js +1 -1
  38. package/dist/dialog/dialog.examples.json +7 -7
  39. package/dist/dialog/dialog2.js +1 -1
  40. package/dist/divider/divider2.js +1 -1
  41. package/dist/dot/dot2.js +1 -1
  42. package/dist/drawer/drawer-content2.js +1 -1
  43. package/dist/drawer/drawer-footer2.js +1 -1
  44. package/dist/drawer/drawer-header2.js +1 -1
  45. package/dist/drawer/drawer.examples.json +5 -5
  46. package/dist/drawer/drawer2.js +1 -1
  47. package/dist/dropdown/dropdown-footer2.js +1 -1
  48. package/dist/dropdown/dropdown-header2.js +1 -1
  49. package/dist/dropdown/dropdown.examples.json +3 -3
  50. package/dist/dropdown/dropdown2.js +1 -1
  51. package/dist/dropdown-group/dropdown-group.js +1 -1
  52. package/dist/dropzone/dropzone.examples.json +2 -2
  53. package/dist/dropzone/dropzone2.js +1 -1
  54. package/dist/file/file.examples.json +2 -2
  55. package/dist/file/file2.js +1 -1
  56. package/dist/format-bytes/format-bytes2.js +1 -1
  57. package/dist/format-datetime/format-datetime2.js +1 -1
  58. package/dist/format-number/format-number2.js +1 -1
  59. package/dist/format-relative-time/format-relative-time2.js +1 -1
  60. package/dist/format-truncate/format-truncate2.js +1 -1
  61. package/dist/forms/control/control.examples.json +3 -3
  62. package/dist/forms/control/control2.js +1 -1
  63. package/dist/forms/control-group/control-group2.js +1 -1
  64. package/dist/forms/control-message/control-message2.js +1 -1
  65. package/dist/forms/forms.examples.json +7 -7
  66. package/dist/forms/validation.examples.json +4 -4
  67. package/dist/gauge/gauge.examples.json +2 -2
  68. package/dist/gauge/gauge2.js +1 -1
  69. package/dist/grid/cell/cell2.js +1 -1
  70. package/dist/grid/column/column2.js +1 -1
  71. package/dist/grid/footer/footer2.js +1 -1
  72. package/dist/grid/grid.examples.json +6 -6
  73. package/dist/grid/grid2.js +1 -1
  74. package/dist/grid/header/header2.js +1 -1
  75. package/dist/grid/placeholder/placeholder2.js +1 -1
  76. package/dist/grid/row/row2.js +1 -1
  77. package/dist/icon/icon.examples.json +1 -1
  78. package/dist/icon/icon2.js +2 -2
  79. package/dist/icon/icons.d.ts +2 -1
  80. package/dist/icon/icons.js.map +1 -1
  81. package/dist/icon-button/icon-button2.js +1 -1
  82. package/dist/index.js +1 -1
  83. package/dist/input/input-group.examples.json +3 -3
  84. package/dist/input/input-group2.js +1 -1
  85. package/dist/input/input.examples.json +2 -2
  86. package/dist/input/input2.js +1 -1
  87. package/dist/internal/controllers/gesture.controller.examples.json +1 -1
  88. package/dist/internal/controllers/popover.examples.json +5 -5
  89. package/dist/internal/controllers/type-popover.controller.examples.json +1 -1
  90. package/dist/internal/services/global.service.js +1 -1
  91. package/dist/internal/types/icons.d.ts +1 -0
  92. package/dist/internal/types/index.d.ts +1 -1
  93. package/dist/internal/types/index.js.map +1 -1
  94. package/dist/internal/utils/dom.js +18 -10
  95. package/dist/internal/utils/dom.js.map +1 -1
  96. package/dist/logo/logo2.js +1 -1
  97. package/dist/menu/menu-group2.js +1 -1
  98. package/dist/menu/menu-item2.js +1 -1
  99. package/dist/menu/menu.examples.json +1 -1
  100. package/dist/menu/menu2.js +1 -1
  101. package/dist/month/month.examples.json +2 -2
  102. package/dist/month/month2.js +1 -1
  103. package/dist/notification/notification-group2.js +1 -1
  104. package/dist/notification/notification.examples.json +5 -5
  105. package/dist/notification/notification2.js +1 -1
  106. package/dist/page/page-panel/page-panel-content2.js +1 -1
  107. package/dist/page/page-panel/page-panel-footer2.js +1 -1
  108. package/dist/page/page-panel/page-panel-header2.js +1 -1
  109. package/dist/page/page-panel/page-panel2.js +1 -1
  110. package/dist/page/page.examples.json +25 -25
  111. package/dist/page/page2.js +1 -1
  112. package/dist/page-header/page-header2.js +1 -1
  113. package/dist/page-loader/page-loader.examples.json +1 -1
  114. package/dist/page-loader/page-loader2.js +1 -1
  115. package/dist/pagination/pagination.examples.json +2 -2
  116. package/dist/pagination/pagination2.js +1 -1
  117. package/dist/panel/panel.examples.json +7 -7
  118. package/dist/panel/panel2.js +4 -4
  119. package/dist/password/password.examples.json +2 -2
  120. package/dist/password/password2.js +1 -1
  121. package/dist/preferences-input/preferences-input.examples.json +1 -1
  122. package/dist/preferences-input/preferences-input2.js +1 -1
  123. package/dist/progress-bar/progress-bar2.js +1 -1
  124. package/dist/progress-ring/progress-ring.examples.json +5 -5
  125. package/dist/progress-ring/progress-ring2.js +1 -1
  126. package/dist/progressive-filter-chip/progressive-filter-chip.examples.json +1 -1
  127. package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
  128. package/dist/pulse/pulse2.js +1 -1
  129. package/dist/radio/radio-group2.js +1 -1
  130. package/dist/radio/radio.examples.json +5 -5
  131. package/dist/radio/radio2.js +1 -1
  132. package/dist/range/range.examples.json +2 -2
  133. package/dist/range/range2.js +1 -1
  134. package/dist/resize-handle/resize-handle.examples.json +2 -2
  135. package/dist/resize-handle/resize-handle2.js +1 -1
  136. package/dist/search/search.examples.json +2 -2
  137. package/dist/search/search2.js +1 -1
  138. package/dist/select/select.examples.json +8 -8
  139. package/dist/select/select2.js +1 -1
  140. package/dist/skeleton/skeleton2.js +1 -1
  141. package/dist/sort-button/sort-button2.js +1 -1
  142. package/dist/sparkline/sparkline2.js +1 -1
  143. package/dist/star-rating/star-rating2.js +1 -1
  144. package/dist/steps/steps2.js +2 -2
  145. package/dist/switch/switch-group2.js +1 -1
  146. package/dist/switch/switch.examples.json +5 -5
  147. package/dist/switch/switch2.js +1 -1
  148. package/dist/tabs/tabs-group2.js +1 -1
  149. package/dist/tabs/tabs.examples.json +1 -1
  150. package/dist/tabs/tabs2.js +2 -2
  151. package/dist/tag/tag2.js +1 -1
  152. package/dist/textarea/textarea.examples.json +2 -2
  153. package/dist/textarea/textarea2.js +1 -1
  154. package/dist/time/time.examples.json +2 -2
  155. package/dist/time/time2.js +1 -1
  156. package/dist/toast/toast.examples.json +1 -1
  157. package/dist/toast/toast2.js +1 -1
  158. package/dist/toggletip/toggletip-footer2.js +1 -1
  159. package/dist/toggletip/toggletip-header2.js +1 -1
  160. package/dist/toggletip/toggletip.examples.json +5 -5
  161. package/dist/toggletip/toggletip2.js +1 -1
  162. package/dist/toolbar/toolbar.examples.json +4 -4
  163. package/dist/toolbar/toolbar2.js +1 -1
  164. package/dist/tooltip/tooltip.examples.json +6 -6
  165. package/dist/tooltip/tooltip2.js +1 -1
  166. package/dist/tree/tree-node2.js +1 -1
  167. package/dist/tree/tree.examples.json +2 -2
  168. package/dist/tree/tree2.js +1 -1
  169. package/dist/viewport/viewport-gridlines2.js +1 -1
  170. package/dist/viewport/viewport-minimap2.js +1 -1
  171. package/dist/viewport/viewport.examples.json +9 -9
  172. package/dist/viewport/viewport2.js +1 -1
  173. package/dist/week/week.examples.json +3 -3
  174. package/dist/week/week2.js +1 -1
  175. package/package.json +2 -1
package/dist/page/page.examples.json CHANGED
@@ -23,7 +23,7 @@
23
23
  {
24
24
  "id": "page-content",
25
25
  "name": "Content",
26
- "template": "<style>\n nve-page[debug] {\n nve-page-panel-content {\n font-size: var(--nve-ref-font-size-100);\n }\n main {\n min-height: 100vh;\n padding: var(--nve-ref-space-md);\n }\n [slot=\"left\"],\n [slot=\"right\"],\n [slot=\"bottom\"] {\n --background: var(--nve-ref-color-green-grass-400);\n }\n [slot=\"left-aside\"],\n [slot=\"right-aside\"] {\n --background: var(--nve-ref-color-purple-lavender-400);\n }\n [slot=\"header\"],\n [slot=\"footer\"] {\n --background: var(--nve-ref-color-red-tomato-400);\n }\n [slot=\"subheader\"],\n [slot=\"subfooter\"] {\n --background: var(--nve-ref-color-blue-cobalt-400);\n }\n }\n</style>\n<nve-page debug>\n <nve-page-header slot=\"header\">\n <h2 nve-text=\"heading\" slot=\"prefix\">header</h2>\n </nve-page-header>\n <nve-page-panel slot=\"subheader\">\n <nve-page-panel-content>subheader</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"left-aside\">\n <nve-page-panel-content>left-aside</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"left\" size=\"sm\">\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n <main>\n <p nve-text=\"body\">main content</p>\n </main>\n <nve-page-panel slot=\"bottom\" size=\"sm\">\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"right\" size=\"sm\">\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"right-aside\">\n <nve-page-panel-content>right-aside</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"subfooter\">\n <nve-page-panel-content>subfooter</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"footer\">\n <nve-page-panel-content>footer</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
26
+ "template": "<style>\n nve-page[debug] {\n nve-page-panel-content {\n font-size: var(--nve-ref-font-size-100);\n }\n\n main {\n min-height: 100vh;\n padding: var(--nve-ref-space-md);\n }\n\n [slot=\"left\"],\n [slot=\"right\"],\n [slot=\"bottom\"] {\n --background: var(--nve-ref-color-green-grass-400);\n }\n\n [slot=\"left-aside\"],\n [slot=\"right-aside\"] {\n --background: var(--nve-ref-color-purple-lavender-400);\n }\n\n [slot=\"header\"],\n [slot=\"footer\"] {\n --background: var(--nve-ref-color-red-tomato-400);\n }\n\n [slot=\"subheader\"],\n [slot=\"subfooter\"] {\n --background: var(--nve-ref-color-blue-cobalt-400);\n }\n }\n</style>\n<nve-page debug>\n <nve-page-header slot=\"header\">\n <h2 nve-text=\"heading\" slot=\"prefix\">header</h2>\n </nve-page-header>\n <nve-page-panel slot=\"subheader\">\n <nve-page-panel-content>subheader</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"left-aside\">\n <nve-page-panel-content>left-aside</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"left\" size=\"sm\">\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n <main>\n <p nve-text=\"body\">main content</p>\n </main>\n <nve-page-panel slot=\"bottom\" size=\"sm\">\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"right\" size=\"sm\">\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"right-aside\">\n <nve-page-panel-content>right-aside</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"subfooter\">\n <nve-page-panel-content>subfooter</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"footer\">\n <nve-page-panel-content>footer</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
27
27
  "summary": "All slot areas and debug backgrounds for nve-page.",
28
28
  "description": "",
29
29
  "composition": false,
@@ -34,7 +34,7 @@
34
34
  {
35
35
  "id": "page-slot-banner",
36
36
  "name": "SlotBanner",
37
- "template": "<nve-page>\n <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable> <span slot=\"prefix\">Warning</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a> </nve-alert>\n </nve-alert-group>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
37
+ "template": "<nve-page>\n <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable> <span slot=\"prefix\">Warning</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a> </nve-alert>\n </nve-alert-group>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
38
38
  "summary": "Warning banner in the header slot above the page header.",
39
39
  "description": "",
40
40
  "composition": true,
@@ -45,7 +45,7 @@
45
45
  {
46
46
  "id": "page-slot-subheader",
47
47
  "name": "SlotSubheader",
48
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-toolbar slot=\"subheader\">\n <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\"></nve-icon-button>\n <h2 nve-text=\"heading sm\">Subheader</h2>\n </nve-toolbar>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
48
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-toolbar slot=\"subheader\">\n <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\"></nve-icon-button>\n <h2 nve-text=\"heading sm\">Subheader</h2>\n </nve-toolbar>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
49
49
  "summary": "Toolbar in the subheader slot below the header for secondary navigation or actions.",
50
50
  "description": "",
51
51
  "composition": true,
@@ -56,7 +56,7 @@
56
56
  {
57
57
  "id": "page-slot-subheader-large",
58
58
  "name": "SlotSubheaderLarge",
59
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-page-panel slot=\"subheader\">\n <nve-page-panel-content>\n <div nve-layout=\"column gap:md align:stretch\">\n <div nve-layout=\"row align:space-between align:vertical-center\">\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n <h2 nve-text=\"heading lg semibold\">Subheader Large</h2>\n </section>\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-button>Default</nve-button>\n <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n </section>\n </div>\n <section nve-layout=\"row gap:xl align:vertical-center\">\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Driver</span>\n <span nve-text=\"body sm bold\">Jane Doe</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Route</span>\n <span nve-text=\"body sm bold\">Santa Clara</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Status</span>\n <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n </div>\n </section>\n </div>\n </nve-page-panel-content>\n </nve-page-panel>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
59
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-page-panel slot=\"subheader\">\n <nve-page-panel-content>\n <div nve-layout=\"column gap:md align:stretch\">\n <div nve-layout=\"row align:space-between align:vertical-center\">\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n <h2 nve-text=\"heading lg semibold\">Subheader Large</h2>\n </section>\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-button>Default</nve-button>\n <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n </section>\n </div>\n <section nve-layout=\"row gap:xl align:vertical-center\">\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Driver</span>\n <span nve-text=\"body sm bold\">Jane Doe</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Route</span>\n <span nve-text=\"body sm bold\">Santa Clara</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Status</span>\n <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n </div>\n </section>\n </div>\n </nve-page-panel-content>\n </nve-page-panel>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
60
60
  "summary": "Large subheader panel with back navigation, title, metadata, and action buttons. Use for detail pages that need prominent context like entity names, status badges, and key-value metadata above the main content.",
61
61
  "description": "",
62
62
  "composition": true,
@@ -76,7 +76,7 @@
76
76
  {
77
77
  "id": "page-slot-right",
78
78
  "name": "SlotRight",
79
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n <nve-page-panel slot=\"right\" size=\"sm\">\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
79
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n\n <nve-page-panel slot=\"right\" size=\"sm\">\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
80
80
  "summary": "Right slot with a page panel for side content.",
81
81
  "description": "",
82
82
  "composition": true,
@@ -87,7 +87,7 @@
87
87
  {
88
88
  "id": "page-slot-bottom",
89
89
  "name": "SlotBottom",
90
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n <nve-page-panel slot=\"bottom\" size=\"sm\">\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
90
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n\n <nve-page-panel slot=\"bottom\" size=\"sm\">\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
91
91
  "summary": "Bottom slot with a page panel for footer or supplemental content.",
92
92
  "description": "",
93
93
  "composition": true,
@@ -98,7 +98,7 @@
98
98
  {
99
99
  "id": "page-slot-left-aside",
100
100
  "name": "SlotLeftAside",
101
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"play\" size=\"sm\"></nve-icon-button>\n <nve-icon-button icon-name=\"add\"></nve-icon-button>\n <nve-icon-button icon-name=\"delete\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
101
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"play\" size=\"sm\"></nve-icon-button>\n <nve-icon-button icon-name=\"add\"></nve-icon-button>\n <nve-icon-button icon-name=\"delete\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
102
102
  "summary": "Left-aside slot with a vertical toolbar for navigation.",
103
103
  "description": "",
104
104
  "composition": true,
@@ -109,7 +109,7 @@
109
109
  {
110
110
  "id": "page-slot-right-aside",
111
111
  "name": "SlotRightAside",
112
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
112
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
113
113
  "summary": "Right-aside slot with a vertical toolbar for actions or navigation.",
114
114
  "description": "",
115
115
  "composition": true,
@@ -120,7 +120,7 @@
120
120
  {
121
121
  "id": "page-slot-subfooter",
122
122
  "name": "SlotSubfooter",
123
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n <nve-toolbar slot=\"subfooter\">\n <nve-icon-button icon-name=\"information-circle\"></nve-icon-button>\n <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n </nve-toolbar>\n</nve-page>\n",
123
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n\n <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n\n <nve-toolbar slot=\"subfooter\">\n <nve-icon-button icon-name=\"information-circle\"></nve-icon-button>\n <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n </nve-toolbar>\n</nve-page>\n",
124
124
  "summary": "Subfooter slot with a toolbar for status or metadata.",
125
125
  "description": "",
126
126
  "composition": true,
@@ -131,7 +131,7 @@
131
131
  {
132
132
  "id": "page-slot-footer",
133
133
  "name": "SlotFooter",
134
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n <nve-toolbar slot=\"footer\">\n <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n <a href=\"#\" nve-text=\"link sm\">logging</a>\n <a href=\"#\" nve-text=\"link sm\">contact</a>\n </nve-toolbar>\n</nve-page>\n",
134
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n\n <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n\n <nve-toolbar slot=\"footer\">\n <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n <a href=\"#\" nve-text=\"link sm\">logging</a>\n <a href=\"#\" nve-text=\"link sm\">contact</a>\n </nve-toolbar>\n</nve-page>\n",
135
135
  "summary": "Footer slot with a toolbar for links or actions.",
136
136
  "description": "",
137
137
  "composition": true,
@@ -142,7 +142,7 @@
142
142
  {
143
143
  "id": "page-invoker-command",
144
144
  "name": "InvokerCommand",
145
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-icon-button slot=\"suffix\" commandfor=\"invoker-example\" command=\"--toggle\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n </nve-page-header>\n <nve-page-panel id=\"invoker-example\" slot=\"left\" size=\"sm\" hidden>\n <nve-icon-button commandfor=\"invoker-example\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>\n <p nve-text=\"body\">panel content</p>\n </nve-page-panel-content>\n </nve-page-panel>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
145
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-icon-button slot=\"suffix\" commandfor=\"invoker-example\" command=\"--toggle\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n </nve-page-header>\n\n <nve-page-panel id=\"invoker-example\" slot=\"left\" size=\"sm\" hidden>\n <nve-icon-button commandfor=\"invoker-example\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>\n <p nve-text=\"body\">panel content</p>\n </nve-page-panel-content>\n </nve-page-panel>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n",
146
146
  "summary": "Use Page Panel with Invoker Command API to dynamically open and close page panels.",
147
147
  "description": "",
148
148
  "composition": true,
@@ -151,7 +151,7 @@
151
151
  {
152
152
  "id": "page-panel-expandable",
153
153
  "name": "PanelExpandable",
154
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-page-panel id=\"panel-left\" slot=\"left\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-left\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"left\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <div nve-layout=\"row gap:xs\">\n <nve-button commandfor=\"panel-left\" command=\"--toggle\">Toggle Left Panel</nve-button>\n <nve-button commandfor=\"panel-right\" command=\"--toggle\">Toggle Right Panel</nve-button>\n <nve-button commandfor=\"panel-bottom\" command=\"--toggle\">Toggle Bottom Panel</nve-button>\n </div>\n </main>\n <nve-page-panel id=\"panel-right\" slot=\"right\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-right\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"right\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel id=\"panel-bottom\" slot=\"bottom\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-bottom\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"down\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
154
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-page-panel id=\"panel-left\" slot=\"left\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-left\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"left\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <div nve-layout=\"row gap:xs\">\n <nve-button commandfor=\"panel-left\" command=\"--toggle\">Toggle Left Panel</nve-button>\n <nve-button commandfor=\"panel-right\" command=\"--toggle\">Toggle Right Panel</nve-button>\n <nve-button commandfor=\"panel-bottom\" command=\"--toggle\">Toggle Bottom Panel</nve-button>\n </div>\n </main>\n\n <nve-page-panel id=\"panel-right\" slot=\"right\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-right\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"right\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n\n <nve-page-panel id=\"panel-bottom\" slot=\"bottom\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-bottom\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"down\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
155
155
  "summary": "Expandable page panels that collapse to a slim strip and toggle open with chevron buttons. Use when panels contain supplementary content that users access intermittently, preserving main content space while keeping panels accessible.",
156
156
  "description": "",
157
157
  "composition": true,
@@ -160,7 +160,7 @@
160
160
  {
161
161
  "id": "page-panel-closable",
162
162
  "name": "PanelClosable",
163
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-page-panel id=\"panel-left\" slot=\"left\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-left\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <div nve-layout=\"row gap:xs\">\n <nve-button commandfor=\"panel-left\" command=\"--toggle\">Toggle Left Panel</nve-button>\n <nve-button commandfor=\"panel-right\" command=\"--toggle\">Toggle Right Panel</nve-button>\n <nve-button commandfor=\"panel-bottom\" command=\"--toggle\">Toggle Bottom Panel</nve-button>\n </div>\n </main>\n <nve-page-panel id=\"panel-right\" slot=\"right\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-right\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel id=\"panel-bottom\" slot=\"bottom\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-bottom\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
163
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-page-panel id=\"panel-left\" slot=\"left\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-left\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <div nve-layout=\"row gap:xs\">\n <nve-button commandfor=\"panel-left\" command=\"--toggle\">Toggle Left Panel</nve-button>\n <nve-button commandfor=\"panel-right\" command=\"--toggle\">Toggle Right Panel</nve-button>\n <nve-button commandfor=\"panel-bottom\" command=\"--toggle\">Toggle Bottom Panel</nve-button>\n </div>\n </main>\n\n <nve-page-panel id=\"panel-right\" slot=\"right\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-right\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n\n <nve-page-panel id=\"panel-bottom\" slot=\"bottom\" size=\"sm\">\n <nve-icon-button commandfor=\"panel-bottom\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
164
164
  "summary": "Closable page panels that fully remove from the layout when dismissed. Use when panels open on demand for temporary tasks like viewing item details or applying filters, and the user needs full main content space when done.",
165
165
  "description": "",
166
166
  "composition": true,
@@ -169,7 +169,7 @@
169
169
  {
170
170
  "id": "page-interaction-drawer",
171
171
  "name": "InteractionDrawer",
172
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-icon-button popovertarget=\"drawer\" slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n <nve-drawer id=\"drawer\" position=\"left\" size=\"sm\" closable style=\"--top: 48px\">\n <nve-drawer-header>\n <h3 nve-text=\"heading medium sm\">Drawer Header</h3>\n </nve-drawer-header>\n <nve-drawer-content>\n <p nve-text=\"body\">drawer content</p>\n </nve-drawer-content>\n <nve-drawer-footer>\n <p nve-text=\"body\">drawer footer</p>\n </nve-drawer-footer>\n </nve-drawer>\n</nve-page>\n",
172
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-icon-button popovertarget=\"drawer\" slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n\n <nve-drawer id=\"drawer\" position=\"left\" size=\"sm\" closable style=\"--top: 48px\">\n <nve-drawer-header>\n <h3 nve-text=\"heading medium sm\">Drawer Header</h3>\n </nve-drawer-header>\n <nve-drawer-content>\n <p nve-text=\"body\">drawer content</p>\n </nve-drawer-content>\n <nve-drawer-footer>\n <p nve-text=\"body\">drawer footer</p>\n </nve-drawer-footer>\n </nve-drawer>\n</nve-page>\n",
173
173
  "summary": "Use Drawer to create navigation that is outside the context of the current view.",
174
174
  "description": "",
175
175
  "composition": true,
@@ -178,7 +178,7 @@
178
178
  {
179
179
  "id": "page-interaction-panel-navigation",
180
180
  "name": "InteractionPanelNavigation",
181
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"repo\" icon-name=\"branch\"></nve-icon-button>\n <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"ai\" icon-name=\"sparkles\"></nve-icon-button>\n <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"settings\" icon-name=\"gear\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n <nve-page-panel id=\"nav-panel\" slot=\"left\" size=\"sm\" hidden>\n <nve-icon-button commandfor=\"nav-panel\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"left\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-header>\n <h3 nve-text=\"heading medium sm\">git</h3>\n </nve-page-panel-header>\n <nve-page-panel-content>\n <nve-menu id=\"repo\" hidden>\n <nve-menu-item>Clone</nve-menu-item>\n <nve-menu-item>Branch</nve-menu-item>\n <nve-menu-item>Release</nve-menu-item>\n </nve-menu>\n <nve-menu id=\"ai\" hidden>\n <nve-menu-item>Prompts</nve-menu-item>\n <nve-menu-item>Models</nve-menu-item>\n <nve-menu-item>Training</nve-menu-item>\n </nve-menu>\n <nve-menu id=\"settings\" hidden>\n <nve-menu-item>Profile</nve-menu-item>\n <nve-menu-item>Account</nve-menu-item>\n <nve-menu-item>Logs</nve-menu-item>\n </nve-menu>\n </nve-page-panel-content>\n </nve-page-panel>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n<script type=\"module\">\n const toolbar = document.querySelector(\"nve-toolbar\");\n const panelHeader = document.querySelector(\"nve-page-panel h3\");\n const menus = Array.from(document.querySelectorAll(\"nve-page-panel nve-menu\"));\n toolbar.addEventListener(\"click\", (e) => {\n if (e.target.localName === \"nve-icon-button\") {\n panelHeader.textContent = e.target.value;\n menus.forEach((i) => (i.hidden = true));\n menus.find((i) => i.id === e.target.value).hidden = false;\n }\n });\n</script>\n",
181
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"repo\" icon-name=\"branch\"></nve-icon-button>\n <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"ai\" icon-name=\"sparkles\"></nve-icon-button>\n <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"settings\" icon-name=\"gear\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n\n <nve-page-panel id=\"nav-panel\" slot=\"left\" size=\"sm\" hidden>\n <nve-icon-button commandfor=\"nav-panel\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"left\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-header>\n <h3 nve-text=\"heading medium sm\">git</h3>\n </nve-page-panel-header>\n <nve-page-panel-content>\n <nve-menu id=\"repo\" hidden>\n <nve-menu-item>Clone</nve-menu-item>\n <nve-menu-item>Branch</nve-menu-item>\n <nve-menu-item>Release</nve-menu-item>\n </nve-menu>\n <nve-menu id=\"ai\" hidden>\n <nve-menu-item>Prompts</nve-menu-item>\n <nve-menu-item>Models</nve-menu-item>\n <nve-menu-item>Training</nve-menu-item>\n </nve-menu>\n <nve-menu id=\"settings\" hidden>\n <nve-menu-item>Profile</nve-menu-item>\n <nve-menu-item>Account</nve-menu-item>\n <nve-menu-item>Logs</nve-menu-item>\n </nve-menu>\n </nve-page-panel-content>\n </nve-page-panel>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n</nve-page>\n<script type=\"module\">\n const toolbar = document.querySelector(\"nve-toolbar\");\n const panelHeader = document.querySelector(\"nve-page-panel h3\");\n const menus = Array.from(document.querySelectorAll(\"nve-page-panel nve-menu\"));\n\n toolbar.addEventListener(\"click\", (e) => {\n if (e.target.localName === \"nve-icon-button\") {\n panelHeader.textContent = e.target.value;\n menus.forEach((i) => (i.hidden = true));\n menus.find((i) => i.id === e.target.value).hidden = false;\n }\n });\n</script>\n",
182
182
  "summary": "Use Page Panel with Toolbar to create complex navigation groups that are within the context of the current view.",
183
183
  "description": "",
184
184
  "composition": true,
@@ -187,7 +187,7 @@
187
187
  {
188
188
  "id": "page-panel-tabs",
189
189
  "name": "PanelTabs",
190
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-page-panel slot=\"left\" size=\"sm\">\n <nve-page-panel-header>\n <nve-tabs behavior-select>\n <nve-tabs-item selected>Tab 1</nve-tabs-item>\n <nve-tabs-item>Tab 2</nve-tabs-item>\n <nve-tabs-item>Tab 3</nve-tabs-item>\n </nve-tabs>\n </nve-page-panel-header>\n <nve-page-panel-content> Panel Content </nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
190
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-page-panel slot=\"left\" size=\"sm\">\n <nve-page-panel-header>\n <nve-tabs behavior-select>\n <nve-tabs-item selected>Tab 1</nve-tabs-item>\n <nve-tabs-item>Tab 2</nve-tabs-item>\n <nve-tabs-item>Tab 3</nve-tabs-item>\n </nve-tabs>\n </nve-page-panel-header>\n <nve-page-panel-content> Panel Content </nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n",
191
191
  "summary": "Page panel with tabbed header for switching between categorized content views within a sidebar. Use when a panel contains related sections like outline, search, and settings that share the same screen region.",
192
192
  "description": "",
193
193
  "composition": true,
@@ -205,7 +205,7 @@
205
205
  {
206
206
  "id": "page-document-scroll",
207
207
  "name": "DocumentScroll",
208
- "template": "<nve-page document-scroll>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\" style=\"min-height: 110vh\">page content</p>\n </main>\n <nve-toolbar slot=\"footer\">\n <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n <a href=\"#\" nve-text=\"link sm\">logging</a>\n <a href=\"#\" nve-text=\"link sm\">contact</a>\n </nve-toolbar>\n</nve-page>\n",
208
+ "template": "<nve-page document-scroll>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\" style=\"min-height: 110vh\">page content</p>\n </main>\n\n <nve-toolbar slot=\"footer\">\n <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n <a href=\"#\" nve-text=\"link sm\">logging</a>\n <a href=\"#\" nve-text=\"link sm\">contact</a>\n </nve-toolbar>\n</nve-page>\n",
209
209
  "summary": "Use document scroll for static content sites that do not require a fixed navigation.",
210
210
  "description": "",
211
211
  "composition": true,
@@ -214,7 +214,7 @@
214
214
  {
215
215
  "id": "page-kitchen-sink",
216
216
  "name": "KitchenSink",
217
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-page-panel slot=\"subheader\">\n <nve-page-panel-content>\n <div nve-layout=\"column gap:md align:stretch\">\n <div nve-layout=\"row align:space-between align:vertical-center\">\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n <h1 nve-text=\"heading lg\">Session 254a2039f294</h1>\n </section>\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-button>Default</nve-button>\n <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n </section>\n </div>\n <section nve-layout=\"row gap:xl align:vertical-center\">\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Session ID</span>\n <a nve-text=\"body sm bold link\" href=\"#\">254a2039f294</a>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Build</span>\n <span nve-text=\"body sm bold\">254a2v1801</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Location</span>\n <span nve-text=\"body sm bold\">Santa Clara</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Status</span>\n <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n </div>\n </section>\n </div>\n </nve-page-panel-content>\n </nve-page-panel>\n <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"play\" size=\"sm\"></nve-icon-button>\n <nve-icon-button icon-name=\"add\"></nve-icon-button>\n <nve-icon-button icon-name=\"delete\"></nve-icon-button>\n </nve-button-group>\n <nve-divider></nve-divider>\n <nve-button-group>\n <nve-icon-button icon-name=\"bounding-box\"></nve-icon-button>\n <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n <nve-icon-button icon-name=\"exclamation-triangle\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n <nve-page-panel slot=\"left\" size=\"sm\">\n <nve-page-panel-content>\n <nve-tree behavior-expand>\n <nve-tree-node><a href=\"#\">Browse</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">Debug</a></nve-tree-node>\n <nve-tree-node>\n Events\n <nve-tree-node><a href=\"#\">Alert</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">Badge</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">Dialog</a></nve-tree-node>\n </nve-tree-node>\n <nve-tree-node expanded>\n Sensors\n <nve-tree-node><a href=\"#\">front_tele_30fov</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">front_wide_120fov</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">left_fisheye_200fov</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">right_fisheye_200fov</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">rear_left_70fov</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">rear_right_70fov</a></nve-tree-node>\n </nve-tree-node>\n <nve-tree-node>\n Segments\n <nve-tree-node><a href=\"#\">JavaScript</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">HTML</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">CSS</a></nve-tree-node>\n </nve-tree-node>\n </nve-tree>\n </nve-page-panel-content>\n </nve-page-panel>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n <div style=\"min-height: 100vh; width: 1px\"></div>\n </main>\n <nve-page-panel slot=\"bottom\" size=\"sm\">\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"right\" size=\"sm\">\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n <nve-toolbar slot=\"subfooter\">\n <nve-icon-button icon-name=\"information-circle\"></nve-icon-button>\n <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n </nve-toolbar>\n <nve-toolbar slot=\"footer\">\n <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n <a href=\"#\" nve-text=\"link sm\">logging</a>\n <a href=\"#\" nve-text=\"link sm\">contact</a>\n </nve-toolbar>\n</nve-page>\n",
217
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-page-panel slot=\"subheader\">\n <nve-page-panel-content>\n <div nve-layout=\"column gap:md align:stretch\">\n <div nve-layout=\"row align:space-between align:vertical-center\">\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n <h1 nve-text=\"heading lg\">Session 254a2039f294</h1>\n </section>\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-button>Default</nve-button>\n <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n </section>\n </div>\n <section nve-layout=\"row gap:xl align:vertical-center\">\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Session ID</span>\n <a nve-text=\"body sm bold link\" href=\"#\">254a2039f294</a>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Build</span>\n <span nve-text=\"body sm bold\">254a2v1801</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Location</span>\n <span nve-text=\"body sm bold\">Santa Clara</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Status</span>\n <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n </div>\n </section>\n </div>\n </nve-page-panel-content>\n </nve-page-panel>\n\n <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"play\" size=\"sm\"></nve-icon-button>\n <nve-icon-button icon-name=\"add\"></nve-icon-button>\n <nve-icon-button icon-name=\"delete\"></nve-icon-button>\n </nve-button-group>\n <nve-divider></nve-divider>\n <nve-button-group>\n <nve-icon-button icon-name=\"bounding-box\"></nve-icon-button>\n <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n <nve-icon-button icon-name=\"exclamation-triangle\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n\n <nve-page-panel slot=\"left\" size=\"sm\">\n <nve-page-panel-content>\n <nve-tree behavior-expand>\n <nve-tree-node><a href=\"#\">Browse</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">Debug</a></nve-tree-node>\n <nve-tree-node>\n Events\n <nve-tree-node><a href=\"#\">Alert</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">Badge</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">Dialog</a></nve-tree-node>\n </nve-tree-node>\n <nve-tree-node expanded>\n Sensors\n <nve-tree-node><a href=\"#\">front_tele_30fov</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">front_wide_120fov</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">left_fisheye_200fov</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">right_fisheye_200fov</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">rear_left_70fov</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">rear_right_70fov</a></nve-tree-node>\n </nve-tree-node>\n <nve-tree-node>\n Segments\n <nve-tree-node><a href=\"#\">JavaScript</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">HTML</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">CSS</a></nve-tree-node>\n </nve-tree-node>\n </nve-tree>\n </nve-page-panel-content>\n </nve-page-panel>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n <div style=\"min-height: 100vh; width: 1px\"></div>\n </main>\n\n <nve-page-panel slot=\"bottom\" size=\"sm\">\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n\n <nve-page-panel slot=\"right\" size=\"sm\">\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n\n <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n <nve-button-group>\n <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n\n <nve-toolbar slot=\"subfooter\">\n <nve-icon-button icon-name=\"information-circle\"></nve-icon-button>\n <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n </nve-toolbar>\n\n <nve-toolbar slot=\"footer\">\n <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n <a href=\"#\" nve-text=\"link sm\">logging</a>\n <a href=\"#\" nve-text=\"link sm\">contact</a>\n </nve-toolbar>\n</nve-page>\n",
218
218
  "summary": "Stress test of all available slot layouts for nve-page.",
219
219
  "description": "",
220
220
  "composition": true,
@@ -225,7 +225,7 @@
225
225
  {
226
226
  "id": "page-layout-card-grid",
227
227
  "name": "LayoutCardGrid",
228
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <nve-search container=\"flat\">\n <input type=\"search\" aria-label=\"search drives\" />\n </nve-search>\n <nve-button-group container=\"rounded\" behavior-select=\"single\" orientation=\"horizontal\">\n <nve-icon-button icon-name=\"view-as-grid\" pressed></nve-icon-button>\n <nve-icon-button icon-name=\"table\"></nve-icon-button>\n <nve-icon-button icon-name=\"map\"></nve-icon-button>\n </nve-button-group>\n <section nve-layout=\"grid span-items:3 gap:md\">\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n </section>\n </main>\n</nve-page>\n",
228
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <nve-search container=\"flat\">\n <input type=\"search\" aria-label=\"search drives\" />\n </nve-search>\n\n <nve-button-group container=\"rounded\" behavior-select=\"single\" orientation=\"horizontal\">\n <nve-icon-button icon-name=\"view-as-grid\" pressed></nve-icon-button>\n <nve-icon-button icon-name=\"table\"></nve-icon-button>\n <nve-icon-button icon-name=\"map\"></nve-icon-button>\n </nve-button-group>\n\n <section nve-layout=\"grid span-items:3 gap:md\">\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%\">\n <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n <nve-card-content>\n <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n </section>\n </main>\n</nve-page>\n",
229
229
  "summary": "Card grid page layout for browseable collections like infrastructure dashboards, asset catalogs, or media galleries. Use with view-mode toggles for switching between grid and table presentations.",
230
230
  "description": "",
231
231
  "composition": true,
@@ -237,7 +237,7 @@
237
237
  {
238
238
  "id": "page-layout-multi-video",
239
239
  "name": "LayoutMultiVideo",
240
- "template": "<style>\n nve-page {\n --padding: 0;\n }\n .videos {\n display: grid;\n align-content: center;\n grid-template: auto auto auto / 1fr 1fr 1fr;\n gap: var(--nve-ref-space-xxs);\n margin: auto;\n height: 95%;\n width: 95%;\n max-width: 1660px;\n aspect-ratio: 16 / 9;\n }\n</style>\n<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-page-panel slot=\"subheader\">\n <nve-page-panel-content>\n <div nve-layout=\"column gap:md align:stretch\">\n <div nve-layout=\"row align:space-between align:vertical-center\">\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n <h2 nve-text=\"heading lg\">Subheader Large</h2>\n </section>\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-button>Default</nve-button>\n <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n </section>\n </div>\n <section nve-layout=\"row gap:xl align:vertical-center\">\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Driver</span>\n <span nve-text=\"body sm bold\">Jane Doe</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Route</span>\n <span nve-text=\"body sm bold\">Santa Clara</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Status</span>\n <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n </div>\n </section>\n </div>\n </nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"right\" size=\"sm\">\n <nve-page-panel-content> content... </nve-page-panel-content>\n </nve-page-panel>\n <section class=\"videos\">\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-1.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-2.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-3.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-4.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-5.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-6.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-7.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-8.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-9.mp4\" type=\"video/mp4\" />\n </video>\n </section>\n <nve-page-panel slot=\"bottom\" style=\"max-height: 100px\">\n <nve-page-panel-content>\n <div nve-layout=\"column align:center\" style=\"max-width: 1024px; margin: 0 auto\">\n <nve-range>\n <input type=\"range\" min=\"0\" max=\"100\" value=\"0\" aria-label=\"video playback\" />\n </nve-range>\n <nve-button-group container=\"flat\">\n <nve-icon-button icon-name=\"start\" aria-label=\"start\"></nve-icon-button>\n <nve-icon-button icon-name=\"play\" aria-label=\"play/pause\"></nve-icon-button>\n <nve-icon-button icon-name=\"start\" direction=\"down\" aria-label=\"end\"></nve-icon-button>\n </nve-button-group>\n </div>\n </nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n<script type=\"module\">\n // DEMO CODE ONLY\n const videos = Array.from(document.querySelectorAll(\"video\"));\n const playButton = document.querySelector('nve-icon-button[aria-label=\"play/pause\"]');\n const startButton = document.querySelector('nve-icon-button[aria-label=\"start\"]');\n const endButton = document.querySelector('nve-icon-button[aria-label=\"end\"]');\n const range = document.querySelector(\"nve-range input\");\n class VideoGroup extends EventTarget {\n playing = false;\n videos = [];\n get duration() {\n return this.videos[0].duration;\n }\n get currentTime() {\n return this.videos[0].currentTime;\n }\n constructor(videos = []) {\n super();\n this.videos = videos;\n async function animate() {\n if (this.playing && this.videos.every((video) => video.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA)) {\n await this.#nextFrame();\n if (this.duration === this.currentTime) {\n this.pause();\n }\n }\n requestAnimationFrame(animate.bind(this));\n }\n animate.call(this);\n }\n async #videoMetadataReady() {\n if (this.videos[0].readyState === 0) {\n return await new Promise((r) => this.videos[0].addEventListener(\"loadedmetadata\", () => r(null), { once: true }));\n } else {\n return new Promise((r) => r());\n }\n }\n async play() {\n await this.#videoMetadataReady();\n if (this.videos[0].duration === this.videos[0].currentTime) {\n await this.setCurrentTime(0);\n }\n this.playing = true;\n }\n pause() {\n this.playing = false;\n }\n stop() {\n this.pause();\n this.setCurrentTime(0);\n }\n async #nextFrame() {\n this.videos.forEach((video) => (video.currentTime = video.currentTime + this.videos[0].duration / 60));\n await this.#timeUpdated();\n }\n async setCurrentTime(currentTime) {\n this.videos.forEach((video) => (video.currentTime = currentTime));\n await this.#timeUpdated();\n }\n\n async #timeUpdated() {\n await Promise.all(\n this.videos.map((video) => {\n return new Promise((r) => video.addEventListener(\"timeupdate\", () => r(null), { once: true }));\n }),\n );\n this.dispatchEvent(new CustomEvent(\"timeupdate\", { detail: { currentTime: this.currentTime, percentage: (this.currentTime / this.duration) * 100 } }));\n }\n }\n const videoGroup = new VideoGroup(videos);\n videoGroup.addEventListener(\"timeupdate\", (e) => {\n range.value = e.detail.percentage;\n });\n range.addEventListener(\"input\", (e) => {\n videoGroup.setCurrentTime(videoGroup.duration * (range.value / 100));\n });\n startButton.addEventListener(\"click\", () => {\n videoGroup.stop();\n });\n endButton.addEventListener(\"click\", () => {\n videoGroup.setCurrentTime(videoGroup.duration);\n });\n playButton.addEventListener(\"click\", () => {\n if (videoGroup.playing) {\n playButton.iconName = \"play\";\n videoGroup.pause();\n } else {\n playButton.iconName = \"pause\";\n videoGroup.play();\n }\n });\n</script>\n",
240
+ "template": "<style>\n nve-page {\n --padding: 0;\n }\n\n .videos {\n display: grid;\n align-content: center;\n grid-template: auto auto auto / 1fr 1fr 1fr;\n gap: var(--nve-ref-space-xxs);\n margin: auto;\n height: 95%;\n width: 95%;\n max-width: 1660px;\n aspect-ratio: 16 / 9;\n }\n</style>\n<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-page-panel slot=\"subheader\">\n <nve-page-panel-content>\n <div nve-layout=\"column gap:md align:stretch\">\n <div nve-layout=\"row align:space-between align:vertical-center\">\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n <h2 nve-text=\"heading lg\">Subheader Large</h2>\n </section>\n <section nve-layout=\"row gap:sm align:vertical-center\">\n <nve-button>Default</nve-button>\n <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n </section>\n </div>\n <section nve-layout=\"row gap:xl align:vertical-center\">\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Driver</span>\n <span nve-text=\"body sm bold\">Jane Doe</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Route</span>\n <span nve-text=\"body sm bold\">Santa Clara</span>\n </div>\n <div nve-layout=\"row gap:sm align:center\">\n <span nve-text=\"body sm muted\">Status</span>\n <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n </div>\n </section>\n </div>\n </nve-page-panel-content>\n </nve-page-panel>\n\n <nve-page-panel slot=\"right\" size=\"sm\">\n <nve-page-panel-content> content... </nve-page-panel-content>\n </nve-page-panel>\n\n <section class=\"videos\">\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-1.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-2.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-3.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-4.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-5.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-6.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-7.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-8.mp4\" type=\"video/mp4\" />\n </video>\n <video playsinline muted width=\"100%\">\n <source src=\"video/multi-cam-9.mp4\" type=\"video/mp4\" />\n </video>\n </section>\n\n <nve-page-panel slot=\"bottom\" style=\"max-height: 100px\">\n <nve-page-panel-content>\n <div nve-layout=\"column align:center\" style=\"max-width: 1024px; margin: 0 auto\">\n <nve-range>\n <input type=\"range\" min=\"0\" max=\"100\" value=\"0\" aria-label=\"video playback\" />\n </nve-range>\n <nve-button-group container=\"flat\">\n <nve-icon-button icon-name=\"start\" aria-label=\"start\"></nve-icon-button>\n <nve-icon-button icon-name=\"play\" aria-label=\"play/pause\"></nve-icon-button>\n <nve-icon-button icon-name=\"start\" direction=\"down\" aria-label=\"end\"></nve-icon-button>\n </nve-button-group>\n </div>\n </nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n<script type=\"module\">\n // DEMO CODE ONLY\n const videos = Array.from(document.querySelectorAll(\"video\"));\n const playButton = document.querySelector('nve-icon-button[aria-label=\"play/pause\"]');\n const startButton = document.querySelector('nve-icon-button[aria-label=\"start\"]');\n const endButton = document.querySelector('nve-icon-button[aria-label=\"end\"]');\n const range = document.querySelector(\"nve-range input\");\n\n class VideoGroup extends EventTarget {\n playing = false;\n videos = [];\n\n get duration() {\n return this.videos[0].duration;\n }\n\n get currentTime() {\n return this.videos[0].currentTime;\n }\n\n constructor(videos = []) {\n super();\n this.videos = videos;\n\n async function animate() {\n if (this.playing && this.videos.every((video) => video.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA)) {\n await this.#nextFrame();\n if (this.duration === this.currentTime) {\n this.pause();\n }\n }\n requestAnimationFrame(animate.bind(this));\n }\n\n animate.call(this);\n }\n\n async #videoMetadataReady() {\n if (this.videos[0].readyState === 0) {\n return await new Promise((r) => this.videos[0].addEventListener(\"loadedmetadata\", () => r(null), { once: true }));\n } else {\n return new Promise((r) => r());\n }\n }\n\n async play() {\n await this.#videoMetadataReady();\n\n if (this.videos[0].duration === this.videos[0].currentTime) {\n await this.setCurrentTime(0);\n }\n\n this.playing = true;\n }\n\n pause() {\n this.playing = false;\n }\n\n stop() {\n this.pause();\n this.setCurrentTime(0);\n }\n\n async #nextFrame() {\n this.videos.forEach((video) => (video.currentTime = video.currentTime + this.videos[0].duration / 60));\n await this.#timeUpdated();\n }\n\n async setCurrentTime(currentTime) {\n this.videos.forEach((video) => (video.currentTime = currentTime));\n await this.#timeUpdated();\n }\n\n async #timeUpdated() {\n await Promise.all(\n this.videos.map((video) => {\n return new Promise((r) => video.addEventListener(\"timeupdate\", () => r(null), { once: true }));\n }),\n );\n\n this.dispatchEvent(new CustomEvent(\"timeupdate\", { detail: { currentTime: this.currentTime, percentage: (this.currentTime / this.duration) * 100 } }));\n }\n }\n\n const videoGroup = new VideoGroup(videos);\n\n videoGroup.addEventListener(\"timeupdate\", (e) => {\n range.value = e.detail.percentage;\n });\n\n range.addEventListener(\"input\", (e) => {\n videoGroup.setCurrentTime(videoGroup.duration * (range.value / 100));\n });\n\n startButton.addEventListener(\"click\", () => {\n videoGroup.stop();\n });\n\n endButton.addEventListener(\"click\", () => {\n videoGroup.setCurrentTime(videoGroup.duration);\n });\n\n playButton.addEventListener(\"click\", () => {\n if (videoGroup.playing) {\n playButton.iconName = \"play\";\n videoGroup.pause();\n } else {\n playButton.iconName = \"pause\";\n videoGroup.play();\n }\n });\n</script>\n",
241
241
  "summary": "Multi-video grid layout with synchronized playback controls for monitoring and review workflows. Ideal for surveillance dashboards, AV sensor feeds, or simulation playback where concurrent streams need simultaneous viewing.",
242
242
  "description": "",
243
243
  "composition": true,
@@ -249,7 +249,7 @@
249
249
  {
250
250
  "id": "page-layout-editor",
251
251
  "name": "LayoutEditor",
252
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Playground</h2>\n <nve-button container=\"flat\">Browse</nve-button>\n <nve-button container=\"flat\">Editor</nve-button>\n <nve-button container=\"flat\">Elements</nve-button>\n <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-toolbar slot=\"subheader\">\n <nve-icon-button slot=\"prefix\" icon-name=\"split-vertical\"></nve-icon-button>\n <nve-divider slot=\"prefix\" orientation=\"vertical\"></nve-divider>\n <h2 slot=\"prefix\" nve-text=\"heading sm\" style=\"text-wrap: nowrap\">Project</h2>\n <nve-button slot=\"suffix\" interaction=\"emphasis\">Save Project</nve-button>\n <nve-icon-button slot=\"suffix\" icon-name=\"download\"></nve-icon-button>\n <nve-divider slot=\"suffix\" orientation=\"vertical\"></nve-divider>\n <nve-button-group slot=\"suffix\" container=\"rounded\">\n <nve-icon-button icon-name=\"code\"></nve-icon-button>\n <nve-icon-button selected icon-name=\"split-vertical\"></nve-icon-button>\n <nve-icon-button icon-name=\"split-horizontal\"></nve-icon-button>\n <nve-icon-button icon-name=\"split-none\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n <nve-page-panel slot=\"left\" size=\"sm\">\n <nve-page-panel-header> Outline </nve-page-panel-header>\n <nve-page-panel-content>\n <nve-tree behavior-expand>\n <nve-tree-node><a href=\"#\">html</a></nve-tree-node>\n <nve-tree-node expanded>\n head\n <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n </nve-tree-node>\n <nve-tree-node expanded>\n body\n <nve-tree-node><a href=\"#\">nve-badge</a></nve-tree-node>\n </nve-tree-node>\n </nve-tree>\n </nve-page-panel-content>\n </nve-page-panel>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n <nve-page-panel id=\"console-panel\" slot=\"bottom\" size=\"sm\">\n <nve-icon-button commandfor=\"console-panel\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>console output</nve-page-panel-content>\n </nve-page-panel>\n <nve-toolbar slot=\"footer\">\n <nve-icon-button icon-name=\"information-circle\"></nve-icon-button>\n <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n </nve-toolbar>\n</nve-page>\n",
252
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Playground</h2>\n <nve-button container=\"flat\">Browse</nve-button>\n <nve-button container=\"flat\">Editor</nve-button>\n <nve-button container=\"flat\">Elements</nve-button>\n <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-toolbar slot=\"subheader\">\n <nve-icon-button slot=\"prefix\" icon-name=\"split-vertical\"></nve-icon-button>\n <nve-divider slot=\"prefix\" orientation=\"vertical\"></nve-divider>\n <h2 slot=\"prefix\" nve-text=\"heading sm\" style=\"text-wrap: nowrap\">Project</h2>\n <nve-button slot=\"suffix\" interaction=\"emphasis\">Save Project</nve-button>\n <nve-icon-button slot=\"suffix\" icon-name=\"download\"></nve-icon-button>\n <nve-divider slot=\"suffix\" orientation=\"vertical\"></nve-divider>\n <nve-button-group slot=\"suffix\" container=\"rounded\">\n <nve-icon-button icon-name=\"code\"></nve-icon-button>\n <nve-icon-button selected icon-name=\"split-vertical\"></nve-icon-button>\n <nve-icon-button icon-name=\"split-horizontal\"></nve-icon-button>\n <nve-icon-button icon-name=\"split-none\"></nve-icon-button>\n </nve-button-group>\n </nve-toolbar>\n\n <nve-page-panel slot=\"left\" size=\"sm\">\n <nve-page-panel-header> Outline </nve-page-panel-header>\n <nve-page-panel-content>\n <nve-tree behavior-expand>\n <nve-tree-node><a href=\"#\">html</a></nve-tree-node>\n <nve-tree-node expanded>\n head\n <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n </nve-tree-node>\n <nve-tree-node expanded>\n body\n <nve-tree-node><a href=\"#\">nve-badge</a></nve-tree-node>\n </nve-tree-node>\n </nve-tree>\n </nve-page-panel-content>\n </nve-page-panel>\n\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n </main>\n\n <nve-page-panel id=\"console-panel\" slot=\"bottom\" size=\"sm\">\n <nve-icon-button commandfor=\"console-panel\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n <nve-page-panel-content>console output</nve-page-panel-content>\n </nve-page-panel>\n\n <nve-toolbar slot=\"footer\">\n <nve-icon-button icon-name=\"information-circle\"></nve-icon-button>\n <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n </nve-toolbar>\n</nve-page>\n",
253
253
  "summary": "IDE-style editor layout with file outline, main editor, and console panels. Use for code playgrounds, configuration editors, or development tools that need a split-pane workspace with toolbar controls.",
254
254
  "description": "",
255
255
  "composition": true,
@@ -260,7 +260,7 @@
260
260
  {
261
261
  "id": "page-resize",
262
262
  "name": "Resize",
263
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-page-panel style=\"width: 200px\" slot=\"left\">\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n <nve-resize-handle slot=\"left\" min=\"100\" max=\"400\" value=\"200\" step=\"20\" orientation=\"vertical\"></nve-resize-handle>\n</nve-page>\n<script type=\"module\">\n const handle = document.querySelector(\"nve-resize-handle\");\n const panel = document.querySelector(\"nve-page-panel\");\n handle.addEventListener(\"input\", (e) => (panel.style.width = e.target.value + \"px\"));\n</script>\n",
263
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-page-panel style=\"width: 200px\" slot=\"left\">\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n <nve-resize-handle slot=\"left\" min=\"100\" max=\"400\" value=\"200\" step=\"20\" orientation=\"vertical\"></nve-resize-handle>\n</nve-page>\n\n<script type=\"module\">\n const handle = document.querySelector(\"nve-resize-handle\");\n const panel = document.querySelector(\"nve-page-panel\");\n handle.addEventListener(\"input\", (e) => (panel.style.width = e.target.value + \"px\"));\n</script>\n",
264
264
  "summary": "Resizable left panel with drag handle for adjustable sidebar width. Use when users need to control the balance between navigation or outline panels and main content area.",
265
265
  "description": "",
266
266
  "composition": true,
@@ -269,7 +269,7 @@
269
269
  {
270
270
  "id": "page-resize-multi",
271
271
  "name": "ResizeMulti",
272
- "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-page-panel style=\"width: 320px\" slot=\"left\">\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n <nve-resize-handle slot=\"left\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n <nve-resize-handle slot=\"bottom\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n <nve-page-panel style=\"height: 320px\" slot=\"bottom\">\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n <nve-resize-handle slot=\"right\" dir=\"rtl\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n <nve-page-panel style=\"width: 320px\" slot=\"right\">\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n<script type=\"module\">\n const leftHandle = document.querySelector(\"nve-resize-handle[slot=left]\");\n const leftPanel = document.querySelector(\"nve-page-panel[slot=left]\");\n leftHandle.addEventListener(\"input\", (e) => (leftPanel.style.width = e.target.value + \"px\"));\n const rightHandle = document.querySelector(\"nve-resize-handle[slot=right]\");\n const rightPanel = document.querySelector(\"nve-page-panel[slot=right]\");\n rightHandle.addEventListener(\"input\", (e) => (rightPanel.style.width = e.target.value + \"px\"));\n const bottomHandle = document.querySelector(\"nve-resize-handle[slot=bottom]\");\n const bottomPanel = document.querySelector(\"nve-page-panel[slot=bottom]\");\n bottomHandle.addEventListener(\"input\", (e) => (bottomPanel.style.height = e.target.value + \"px\"));\n</script>\n",
272
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <nve-page-panel style=\"width: 320px\" slot=\"left\">\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n <nve-resize-handle slot=\"left\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n\n <nve-resize-handle slot=\"bottom\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n <nve-page-panel style=\"height: 320px\" slot=\"bottom\">\n <nve-page-panel-content>bottom</nve-page-panel-content>\n </nve-page-panel>\n\n <nve-resize-handle slot=\"right\" dir=\"rtl\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n <nve-page-panel style=\"width: 320px\" slot=\"right\">\n <nve-page-panel-content>right</nve-page-panel-content>\n </nve-page-panel>\n</nve-page>\n\n<script type=\"module\">\n const leftHandle = document.querySelector(\"nve-resize-handle[slot=left]\");\n const leftPanel = document.querySelector(\"nve-page-panel[slot=left]\");\n leftHandle.addEventListener(\"input\", (e) => (leftPanel.style.width = e.target.value + \"px\"));\n\n const rightHandle = document.querySelector(\"nve-resize-handle[slot=right]\");\n const rightPanel = document.querySelector(\"nve-page-panel[slot=right]\");\n rightHandle.addEventListener(\"input\", (e) => (rightPanel.style.width = e.target.value + \"px\"));\n\n const bottomHandle = document.querySelector(\"nve-resize-handle[slot=bottom]\");\n const bottomPanel = document.querySelector(\"nve-page-panel[slot=bottom]\");\n bottomHandle.addEventListener(\"input\", (e) => (bottomPanel.style.height = e.target.value + \"px\"));\n</script>\n",
273
273
  "summary": "Multi-panel resizable layout with independent drag handles on left, right, and bottom panels. Use for complex workspaces like IDEs or dashboards where users need to customize the size of each content region independently.",
274
274
  "description": "",
275
275
  "composition": true,
@@ -278,7 +278,7 @@
278
278
  {
279
279
  "id": "page-resize-snap",
280
280
  "name": "ResizeSnap",
281
- "template": "<nve-page style=\"--padding: var(--nve-ref-space-lg)\">\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <p nve-text=\"body\">Double click the resize handle to snap to the min or max.</p>\n <nve-page-panel style=\"width: 320px\" slot=\"left\">\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n <nve-resize-handle slot=\"left\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n</nve-page>\n<script type=\"module\">\n const leftHandle = document.querySelector(\"nve-resize-handle[slot=left]\");\n const leftPanel = document.querySelector(\"nve-page-panel[slot=left]\");\n leftHandle.addEventListener(\"input\", (e) => (leftPanel.style.width = e.target.value + \"px\"));\n</script>\n",
281
+ "template": "<nve-page style=\"--padding: var(--nve-ref-space-lg)\">\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n\n <p nve-text=\"body\">Double click the resize handle to snap to the min or max.</p>\n\n <nve-page-panel style=\"width: 320px\" slot=\"left\">\n <nve-page-panel-content>left</nve-page-panel-content>\n </nve-page-panel>\n <nve-resize-handle slot=\"left\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n</nve-page>\n<script type=\"module\">\n const leftHandle = document.querySelector(\"nve-resize-handle[slot=left]\");\n const leftPanel = document.querySelector(\"nve-page-panel[slot=left]\");\n leftHandle.addEventListener(\"input\", (e) => (leftPanel.style.width = e.target.value + \"px\"));\n</script>\n",
282
282
  "summary": "Resize handle with snap-to-boundary behavior on double-click for quickly toggling a panel between collapsed and expanded states. Use for detail panels that users frequently show and hide.",
283
283
  "description": "",
284
284
  "composition": true,
@@ -287,7 +287,7 @@
287
287
  {
288
288
  "id": "page-multi-slotted-panel",
289
289
  "name": "MultiSlottedPanel",
290
- "template": "<nve-page id=\"multi-slotted-panel\">\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-page-panel slot=\"left\" size=\"sm\">\n <nve-page-panel-content>panel 1</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"left\" size=\"sm\" hidden>\n <nve-page-panel-content>panel 2</nve-page-panel-content>\n </nve-page-panel>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n <nve-button>panel 1</nve-button>\n <nve-button>panel 2</nve-button>\n </main>\n</nve-page>\n<script type=\"module\">\n const [panel1, panel2] = Array.from(document.querySelectorAll(\"#multi-slotted-panel nve-page-panel\"));\n const [button1, button2] = Array.from(document.querySelectorAll(\"#multi-slotted-panel main nve-button\"));\n button1.addEventListener(\"click\", () => {\n if (panel1.hidden) {\n panel1.hidden = false;\n panel2.hidden = true;\n } else {\n panel1.hidden = true;\n }\n });\n button2.addEventListener(\"click\", () => {\n if (panel2.hidden) {\n panel1.hidden = true;\n panel2.hidden = false;\n } else {\n panel2.hidden = true;\n }\n });\n</script>\n",
290
+ "template": "<nve-page id=\"multi-slotted-panel\">\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n <nve-button selected container=\"flat\">Link 1</nve-button>\n <nve-button container=\"flat\">Link 2</nve-button>\n <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n </nve-page-header>\n <nve-page-panel slot=\"left\" size=\"sm\">\n <nve-page-panel-content>panel 1</nve-page-panel-content>\n </nve-page-panel>\n <nve-page-panel slot=\"left\" size=\"sm\" hidden>\n <nve-page-panel-content>panel 2</nve-page-panel-content>\n </nve-page-panel>\n <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n <h1 nve-text=\"heading\">main</h1>\n <p nve-text=\"body\">page content</p>\n <nve-button>panel 1</nve-button>\n <nve-button>panel 2</nve-button>\n </main>\n</nve-page>\n<script type=\"module\">\n const [panel1, panel2] = Array.from(document.querySelectorAll(\"#multi-slotted-panel nve-page-panel\"));\n const [button1, button2] = Array.from(document.querySelectorAll(\"#multi-slotted-panel main nve-button\"));\n\n button1.addEventListener(\"click\", () => {\n if (panel1.hidden) {\n panel1.hidden = false;\n panel2.hidden = true;\n } else {\n panel1.hidden = true;\n }\n });\n\n button2.addEventListener(\"click\", () => {\n if (panel2.hidden) {\n panel1.hidden = true;\n panel2.hidden = false;\n } else {\n panel2.hidden = true;\n }\n });\n</script>\n",
291
291
  "summary": "Switch between panels that share a page slot. Use this pattern to show one tool panel at a time.",
292
292
  "description": "",
293
293
  "composition": true,
package/dist/page/page2.js CHANGED
@@ -16,7 +16,7 @@ var c = class extends a {
16
16
  static {
17
17
  this.metadata = {
18
18
  tag: "nve-page",
19
- version: "2.12.0"
19
+ version: "2.12.2"
20
20
  };
21
21
  }
22
22
  static {
package/dist/page-header/page-header2.js CHANGED
@@ -12,7 +12,7 @@ var s = class extends a {
12
12
  static {
13
13
  this.metadata = {
14
14
  tag: "nve-page-header",
15
- version: "2.12.0"
15
+ version: "2.12.2"
16
16
  };
17
17
  }
18
18
  render() {