@nvidia-elements/core 2.8.0 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/dist/accordion/accordion.examples.json +9 -9
- package/dist/accordion/accordion2.js +4 -4
- package/dist/alert/alert-group2.js +1 -1
- package/dist/alert/alert.examples.json +3 -3
- package/dist/alert/alert2.js +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar2.js +1 -1
- package/dist/badge/badge.examples.json +2 -2
- package/dist/badge/badge2.js +1 -1
- package/dist/breadcrumb/breadcrumb.examples.json +1 -1
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/bundle.d.ts +2 -0
- package/dist/bundles/index.d.ts +211 -0
- package/dist/bundles/index.js +6 -6
- package/dist/button/button.examples.json +3 -3
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card.examples.json +2 -2
- package/dist/card/card2.js +4 -4
- package/dist/chat-message/chat-message.examples.json +4 -4
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/color/color2.js +1 -1
- package/dist/combobox/combobox.examples.json +5 -5
- package/dist/combobox/combobox2.js +1 -1
- package/dist/copy-button/copy-button.examples.json +2 -2
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/custom-elements-jsx.d.ts +112 -1
- package/dist/custom-elements-vue.d.ts +110 -1
- package/dist/custom-elements.json +3554 -291
- package/dist/data.html.json +95 -1
- package/dist/data.snippets.json +45 -45
- package/dist/date/date2.js +1 -1
- package/dist/datetime/datetime2.js +1 -1
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog.examples.json +3 -3
- package/dist/dialog/dialog2.js +1 -1
- package/dist/divider/divider.examples.json +1 -1
- package/dist/divider/divider2.js +1 -1
- package/dist/dot/dot2.js +1 -1
- package/dist/drawer/drawer-content2.js +1 -1
- package/dist/drawer/drawer-footer2.js +1 -1
- package/dist/drawer/drawer-header2.js +1 -1
- package/dist/drawer/drawer2.js +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown-group/dropdown-group.examples.json +4 -4
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropzone/dropzone.examples.json +1 -1
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/format-bytes/format-bytes2.js +1 -1
- package/dist/format-datetime/format-datetime.examples.json +3 -3
- package/dist/format-datetime/format-datetime2.js +1 -1
- package/dist/format-number/format-number2.js +1 -1
- package/dist/format-relative-time/format-relative-time2.js +1 -1
- package/dist/format-truncate/format-truncate.examples.json +4 -4
- package/dist/format-truncate/format-truncate2.js +1 -1
- package/dist/forms/actions.examples.json +1 -1
- package/dist/forms/control/control.examples.json +1 -1
- package/dist/forms/control/control2.js +1 -1
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/gauge/gauge.examples.json +2 -2
- package/dist/gauge/gauge2.js +1 -1
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/column/column2.js +1 -1
- package/dist/grid/footer/footer2.js +1 -1
- package/dist/grid/grid.examples.js.map +1 -1
- package/dist/grid/grid.examples.json +34 -34
- package/dist/grid/grid2.js +1 -1
- package/dist/grid/header/header2.js +1 -1
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row2.js +1 -1
- package/dist/icon/icon2.js +2 -2
- package/dist/icon-button/icon-button2.js +1 -1
- package/dist/index.js +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +1 -1
- package/dist/internal/controllers/gesture.controller.d.ts +122 -42
- package/dist/internal/controllers/gesture.controller.examples.js.map +1 -1
- package/dist/internal/controllers/gesture.controller.examples.json +2 -2
- package/dist/internal/controllers/gesture.controller.js +300 -159
- package/dist/internal/controllers/gesture.controller.js.map +1 -1
- package/dist/internal/controllers/key-state.controller.d.ts +18 -0
- package/dist/internal/controllers/key-state.controller.js +84 -0
- package/dist/internal/controllers/key-state.controller.js.map +1 -0
- package/dist/internal/controllers/keynav-grid.controller.examples.json +1 -1
- package/dist/internal/controllers/keynav-list.controller.examples.json +1 -1
- package/dist/internal/controllers/keynav-spatial.controller.d.ts +4 -1
- package/dist/internal/controllers/keynav-spatial.controller.js +7 -6
- package/dist/internal/controllers/keynav-spatial.controller.js.map +1 -1
- package/dist/internal/controllers/popover.examples.json +2 -2
- package/dist/internal/index.d.ts +2 -0
- package/dist/internal/index.js +29 -27
- package/dist/internal/services/global.service.js +1 -1
- package/dist/internal/utils/dom.d.ts +1 -0
- package/dist/internal/utils/dom.js +42 -38
- package/dist/internal/utils/dom.js.map +1 -1
- package/dist/internal/utils/focus.d.ts +2 -0
- package/dist/internal/utils/focus.js +14 -7
- package/dist/internal/utils/focus.js.map +1 -1
- package/dist/internal/utils/numeric.d.ts +3 -0
- package/dist/internal/utils/numeric.js +14 -0
- package/dist/internal/utils/numeric.js.map +1 -0
- package/dist/logo/logo.examples.json +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu.examples.js.map +1 -1
- package/dist/menu/menu.examples.json +4 -4
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month2.js +1 -1
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification.examples.json +3 -3
- package/dist/notification/notification2.js +1 -1
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js +1 -1
- package/dist/page/page-panel/page-panel-header2.js +1 -1
- package/dist/page/page-panel/page-panel2.js +1 -1
- package/dist/page/page.examples.json +10 -10
- package/dist/page/page2.js +1 -1
- package/dist/page-header/page-header.examples.json +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/pagination/pagination.examples.json +6 -6
- package/dist/pagination/pagination2.js +1 -1
- package/dist/panel/panel2.js +4 -4
- package/dist/password/password2.js +1 -1
- package/dist/preferences-input/preferences-input.examples.json +1 -1
- package/dist/preferences-input/preferences-input2.js +1 -1
- package/dist/progress-bar/progress-bar.examples.json +1 -1
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-ring/progress-ring2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
- package/dist/pulse/pulse2.js +1 -1
- package/dist/radio/radio-group2.js +1 -1
- package/dist/radio/radio2.js +1 -1
- package/dist/range/range.examples.json +1 -1
- package/dist/range/range2.js +1 -1
- package/dist/resize-handle/resize-handle.examples.json +4 -4
- package/dist/resize-handle/resize-handle2.js +6 -10
- package/dist/resize-handle/resize-handle2.js.map +1 -1
- package/dist/search/search2.js +1 -1
- package/dist/select/select2.js +1 -1
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/sort-button/sort-button2.js +1 -1
- package/dist/sparkline/sparkline.examples.json +2 -2
- package/dist/sparkline/sparkline2.js +1 -1
- package/dist/star-rating/star-rating2.js +1 -1
- package/dist/steps/steps2.js +2 -2
- package/dist/switch/switch-group2.js +1 -1
- package/dist/switch/switch2.js +1 -1
- package/dist/tabs/tabs-group2.js +1 -1
- package/dist/tabs/tabs.examples.json +4 -4
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tag/tag.examples.json +1 -1
- package/dist/tag/tag2.js +1 -1
- package/dist/textarea/textarea.d.ts +7 -1
- package/dist/textarea/textarea.examples.js.map +1 -1
- package/dist/textarea/textarea.examples.json +22 -0
- package/dist/textarea/textarea.js +1 -1
- package/dist/textarea/textarea.js.map +1 -1
- package/dist/textarea/textarea2.js +10 -3
- package/dist/textarea/textarea2.js.map +1 -1
- package/dist/time/time2.js +1 -1
- package/dist/toast/toast.examples.json +1 -1
- package/dist/toast/toast2.js +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip2.js +1 -1
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/tooltip/tooltip.examples.json +2 -2
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree2.js +1 -1
- package/dist/viewport/define.d.ts +7 -0
- package/dist/viewport/define.js +7 -0
- package/dist/viewport/define.js.map +1 -0
- package/dist/viewport/index.d.ts +3 -0
- package/dist/viewport/index.js +3 -0
- package/dist/viewport/viewport-animation.controller.d.ts +21 -0
- package/dist/viewport/viewport-animation.controller.js +93 -0
- package/dist/viewport/viewport-animation.controller.js.map +1 -0
- package/dist/viewport/viewport-autofit.controller.d.ts +18 -0
- package/dist/viewport/viewport-autofit.controller.js +105 -0
- package/dist/viewport/viewport-autofit.controller.js.map +1 -0
- package/dist/viewport/viewport-fitting.utils.d.ts +36 -0
- package/dist/viewport/viewport-fitting.utils.js +35 -0
- package/dist/viewport/viewport-fitting.utils.js.map +1 -0
- package/dist/viewport/viewport-gesture-navigation.controller.d.ts +29 -0
- package/dist/viewport/viewport-gesture-navigation.controller.js +311 -0
- package/dist/viewport/viewport-gesture-navigation.controller.js.map +1 -0
- package/dist/viewport/viewport-gridlines.d.ts +38 -0
- package/dist/viewport/viewport-gridlines.js +6 -0
- package/dist/viewport/viewport-gridlines.js.map +1 -0
- package/dist/viewport/viewport-gridlines.utils.d.ts +11 -0
- package/dist/viewport/viewport-gridlines.utils.js +54 -0
- package/dist/viewport/viewport-gridlines.utils.js.map +1 -0
- package/dist/viewport/viewport-gridlines2.js +154 -0
- package/dist/viewport/viewport-gridlines2.js.map +1 -0
- package/dist/viewport/viewport-navigation.controller.d.ts +27 -0
- package/dist/viewport/viewport-navigation.controller.js +142 -0
- package/dist/viewport/viewport-navigation.controller.js.map +1 -0
- package/dist/viewport/viewport-navigation.types.d.ts +9 -0
- package/dist/viewport/viewport-projection.utils.d.ts +7 -0
- package/dist/viewport/viewport-projection.utils.js +25 -0
- package/dist/viewport/viewport-projection.utils.js.map +1 -0
- package/dist/viewport/viewport.d.ts +92 -0
- package/dist/viewport/viewport.examples.js +6 -0
- package/dist/viewport/viewport.examples.js.map +1 -0
- package/dist/viewport/viewport.examples.json +60 -0
- package/dist/viewport/viewport.js +6 -0
- package/dist/viewport/viewport.js.map +1 -0
- package/dist/viewport/viewport.types.d.ts +66 -0
- package/dist/viewport/viewport2.js +375 -0
- package/dist/viewport/viewport2.js.map +1 -0
- package/dist/week/week2.js +1 -1
- package/package.json +14 -2
|
@@ -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
|
|
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",
|
|
38
38
|
"summary": "Warning banner in the header slot above the page header.",
|
|
39
39
|
"description": "",
|
|
40
40
|
"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
|
|
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",
|
|
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
|
|
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",
|
|
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
|
|
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",
|
|
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
|
|
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",
|
|
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
|
|
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",
|
|
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,
|
|
@@ -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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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\n src=\"/static/images/test-image-1.svg\"\n alt=\"example visualization for media card demo\"\n loading=\"lazy\"\n style=\"width: 100%; object-fit: cover\"\n />\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 <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",
|
|
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)
|
|
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",
|
|
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
|
|
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",
|
|
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,
|
|
@@ -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
|
|
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",
|
|
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,
|
package/dist/page/page2.js
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
{
|
|
15
15
|
"id": "page-header-dropdown-menu",
|
|
16
16
|
"name": "DropdownMenu",
|
|
17
|
-
"template": "<nve-page-header>\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\" popovertarget=\"page-header-dropdown\"
|
|
17
|
+
"template": "<nve-page-header>\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\" popovertarget=\"page-header-dropdown\">EL</nve-icon-button>\n</nve-page-header>\n<nve-dropdown position=\"bottom\" id=\"page-header-dropdown\">\n <nve-menu>\n <nve-menu-item><nve-icon name=\"person\"></nve-icon> Menu Item</nve-menu-item>\n <nve-menu-item><nve-icon name=\"gear\"></nve-icon> Menu Item</nve-menu-item>\n <nve-menu-item><nve-icon name=\"star\"></nve-icon> Menu Item</nve-menu-item>\n <nve-divider></nve-divider>\n <nve-menu-item><nve-icon name=\"logout\"></nve-icon> Menu Item</nve-menu-item>\n </nve-menu>\n</nve-dropdown>\n",
|
|
18
18
|
"summary": "Use dropdowns and menus to allow progressive disclosure of extra navigation or global user actions.",
|
|
19
19
|
"description": "",
|
|
20
20
|
"composition": true,
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
{
|
|
60
60
|
"id": "pagination-forms",
|
|
61
61
|
"name": "Forms",
|
|
62
|
-
"template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n <nve-pagination name=\"page\" value=\"1\" items=\"100\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n <nve-button>submit page 10</nve-button>\n <pre></pre>\n</form>\n<script type=\"module\">\n const form = document.querySelector(\"form\");\n const pre = document.querySelector(\"form pre\");\n form.addEventListener(\"change\", updateValues);\n form.addEventListener(\"input\", updateValues);\n form.addEventListener(\"submit\", updateValues);\n form.addEventListener(\"step-change\", updateValues);\n function updateValues(e) {\n e.preventDefault();\n console.log(e);\n pre.innerText = JSON.stringify(
|
|
62
|
+
"template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n <nve-pagination name=\"page\" value=\"1\" items=\"100\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n <nve-button>submit page 10</nve-button>\n <pre></pre>\n</form>\n<script type=\"module\">\n const form = document.querySelector(\"form\");\n const pre = document.querySelector(\"form pre\");\n form.addEventListener(\"change\", updateValues);\n form.addEventListener(\"input\", updateValues);\n form.addEventListener(\"submit\", updateValues);\n form.addEventListener(\"step-change\", updateValues);\n function updateValues(e) {\n e.preventDefault();\n console.log(e);\n pre.innerText = JSON.stringify({ ...Object.fromEntries(new FormData(form)), step: form.elements.page.step }, null, 2);\n }\n</script>\n",
|
|
63
63
|
"summary": "Pagination as a form associated component that participates in form submission and emits change, input, and step-change events. Use when page selection needs to integrate with form data collection or server-side form handling.",
|
|
64
64
|
"description": "",
|
|
65
65
|
"composition": false,
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
{
|
|
69
69
|
"id": "pagination-no-items-count",
|
|
70
70
|
"name": "NoItemsCount",
|
|
71
|
-
"template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n <nve-pagination name=\"page\" value=\"1\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n <pre></pre>\n</form>\n<script type=\"module\">\n const form = document.querySelector(\"form\");\n const pre = document.querySelector(\"form pre\");\n form.addEventListener(\"input\", updateValues);\n form.addEventListener(\"step-change\", updateValues);\n function updateValues(e) {\n e.preventDefault();\n pre.innerText = JSON.stringify(
|
|
71
|
+
"template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n <nve-pagination name=\"page\" value=\"1\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n <pre></pre>\n</form>\n<script type=\"module\">\n const form = document.querySelector(\"form\");\n const pre = document.querySelector(\"form pre\");\n form.addEventListener(\"input\", updateValues);\n form.addEventListener(\"step-change\", updateValues);\n function updateValues(e) {\n e.preventDefault();\n pre.innerText = JSON.stringify({ ...Object.fromEntries(new FormData(form)), step: form.elements.page.step }, null, 2);\n }\n</script>\n",
|
|
72
72
|
"summary": "Pagination without items count display, useful when total count is unknown.",
|
|
73
73
|
"description": "",
|
|
74
74
|
"composition": false,
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
{
|
|
118
118
|
"id": "pagination-page-list-pattern",
|
|
119
119
|
"name": "PageListPattern",
|
|
120
|
-
"template": "<nve-toolbar container=\"inset\">\n <nve-button disabled container=\"flat\"
|
|
120
|
+
"template": "<nve-toolbar container=\"inset\">\n <nve-button disabled container=\"flat\"><nve-icon name=\"chevron\" direction=\"left\" size=\"sm\"></nve-icon> previous</nve-button>\n <nve-button container=\"flat\" selected>1</nve-button>\n <nve-button container=\"flat\">2</nve-button>\n <nve-button container=\"flat\">3</nve-button>\n <nve-button container=\"flat\">4</nve-button>\n <nve-button container=\"flat\">next <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon></nve-button>\n</nve-toolbar>\n",
|
|
121
121
|
"summary": "Custom pagination pattern using toolbar with numbered page buttons and navigation arrows.",
|
|
122
122
|
"description": "",
|
|
123
123
|
"composition": true,
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
{
|
|
127
127
|
"id": "pagination-skip-pattern",
|
|
128
128
|
"name": "SkipPattern",
|
|
129
|
-
"template": "<nve-toolbar container=\"inset\">\n <nve-icon-button
|
|
129
|
+
"template": "<nve-toolbar container=\"inset\">\n <nve-icon-button container=\"flat\" icon-name=\"arrow-stop\" direction=\"left\" aria-label=\"first\" disabled></nve-icon-button>\n <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"left\" aria-label=\"previous\"></nve-icon-button>\n <nve-button container=\"flat\" selected>1</nve-button>\n <nve-button container=\"flat\">2</nve-button>\n <nve-button container=\"flat\">3</nve-button>\n <nve-button container=\"flat\">4</nve-button>\n <nve-icon-button icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n <nve-icon-button icon-name=\"arrow-stop\" direction=\"right\" aria-label=\"last\"></nve-icon-button>\n</nve-toolbar>\n",
|
|
130
130
|
"summary": "Enhanced pagination pattern with first/last page buttons and numbered page navigation.",
|
|
131
131
|
"description": "",
|
|
132
132
|
"composition": true,
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
{
|
|
136
136
|
"id": "pagination-vertical-pattern",
|
|
137
137
|
"name": "VerticalPattern",
|
|
138
|
-
"template": "<nve-toolbar container=\"inset\">\n <label nve-text=\"body muted sm\">1 of 13</label>\n <nve-icon-button
|
|
138
|
+
"template": "<nve-toolbar container=\"inset\">\n <label nve-text=\"body muted sm\">1 of 13</label>\n <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"chevron\" direction=\"up\" aria-label=\"previous\"></nve-icon-button>\n <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"chevron\" direction=\"down\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
|
|
139
139
|
"summary": "Vertical pagination pattern with up/down navigation arrows for compact layouts.",
|
|
140
140
|
"description": "",
|
|
141
141
|
"composition": false,
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
{
|
|
145
145
|
"id": "pagination-custom-select-pattern",
|
|
146
146
|
"name": "CustomSelectPattern",
|
|
147
|
-
"template": "<nve-toolbar container=\"inset\">\n <nve-select style=\"--width: 80px\">\n <select aria-label=\"page size\">\n <option value=\"10\">1-10</option>\n </select>\n </nve-select>\n <label nve-text=\"label muted sm\" style=\"width: 40px\">of ~13</label>\n <nve-icon-button
|
|
147
|
+
"template": "<nve-toolbar container=\"inset\">\n <nve-select style=\"--width: 80px\">\n <select aria-label=\"page size\">\n <option value=\"10\">1-10</option>\n </select>\n </nve-select>\n <label nve-text=\"label muted sm\" style=\"width: 40px\">of ~13</label>\n <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"left\" aria-label=\"previous\" disabled></nve-icon-button>\n <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
|
|
148
148
|
"summary": "Custom pagination with select dropdown for page size and navigation arrows.",
|
|
149
149
|
"description": "",
|
|
150
150
|
"composition": true,
|
package/dist/panel/panel2.js
CHANGED
|
@@ -21,7 +21,7 @@ var g = class extends f {
|
|
|
21
21
|
static {
|
|
22
22
|
this.metadata = {
|
|
23
23
|
tag: "nve-panel-header",
|
|
24
|
-
version: "2.
|
|
24
|
+
version: "2.9.0"
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
@@ -37,7 +37,7 @@ var g = class extends f {
|
|
|
37
37
|
static {
|
|
38
38
|
this.metadata = {
|
|
39
39
|
tag: "nve-panel-content",
|
|
40
|
-
version: "2.
|
|
40
|
+
version: "2.9.0"
|
|
41
41
|
};
|
|
42
42
|
}
|
|
43
43
|
render() {
|
|
@@ -50,7 +50,7 @@ var g = class extends f {
|
|
|
50
50
|
static {
|
|
51
51
|
this.metadata = {
|
|
52
52
|
tag: "nve-panel-footer",
|
|
53
|
-
version: "2.
|
|
53
|
+
version: "2.9.0"
|
|
54
54
|
};
|
|
55
55
|
}
|
|
56
56
|
render() {
|
|
@@ -69,7 +69,7 @@ var g = class extends f {
|
|
|
69
69
|
static {
|
|
70
70
|
this.metadata = {
|
|
71
71
|
tag: "nve-panel",
|
|
72
|
-
version: "2.
|
|
72
|
+
version: "2.9.0"
|
|
73
73
|
};
|
|
74
74
|
}
|
|
75
75
|
static {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{
|
|
6
6
|
"id": "preferences-input",
|
|
7
7
|
"name": "Default",
|
|
8
|
-
"template": "<nve-preferences-input
|
|
8
|
+
"template": "<nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'></nve-preferences-input>\n",
|
|
9
9
|
"summary": "Preferences input displaying theme settings (color scheme, scale, reduced motion) for user customization.",
|
|
10
10
|
"description": "",
|
|
11
11
|
"composition": false,
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
{
|
|
68
68
|
"id": "progress-bar-indeterminate-custom-color",
|
|
69
69
|
"name": "IndeterminateCustomColor",
|
|
70
|
-
"template": "<nve-progress-bar
|
|
70
|
+
"template": "<nve-progress-bar style=\"--accent-color: var(--nve-sys-accent-primary-background); --height: var(--nve-ref-size-150); --opacity: 1\"></nve-progress-bar>\n",
|
|
71
71
|
"summary": "Indeterminate progress bar with custom color, height, and opacity for brand-specific styling and visual emphasis.",
|
|
72
72
|
"description": "",
|
|
73
73
|
"composition": false,
|
package/dist/pulse/pulse2.js
CHANGED
package/dist/radio/radio2.js
CHANGED
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
{
|
|
82
82
|
"id": "range-custom-styles",
|
|
83
83
|
"name": "CustomStyles",
|
|
84
|
-
"template": "<nve-range\n style=\"
|
|
84
|
+
"template": "<nve-range\n style=\"--background: #76b900; --track-background: red; --track-height: 4px; --track-border-radius: 16px; --thumb-background: black; --thumb-border: inset 0 0 0 2px white; --thumb-width: 14px; --thumb-height: 14px\"\n>\n <input type=\"range\" aria-label=\"range\" />\n</nve-range>\n",
|
|
85
85
|
"summary": "Range component can have its visual styles overwritten to achieve custom themes.",
|
|
86
86
|
"description": "",
|
|
87
87
|
"composition": false,
|