@nvidia-elements/core 2.12.2 → 2.14.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 +21 -0
- package/dist/accordion/accordion.js +1 -1
- package/dist/accordion/accordion.js.map +1 -1
- package/dist/accordion/accordion2.js +4 -4
- package/dist/alert/alert-group2.js +1 -1
- 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/badge2.js +1 -1
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/bundles/index.d.ts +11 -1
- package/dist/bundles/index.js +2 -2
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card2.js +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/combobox2.js +1 -1
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/custom-elements-jsx.d.ts +8 -0
- package/dist/custom-elements-vue.d.ts +8 -0
- package/dist/custom-elements.json +45 -2
- package/dist/data.html.json +6 -1
- 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/dialog2.js +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.js +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-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-truncate2.js +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/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.global.js +1 -1
- package/dist/grid/grid.global.js.map +1 -1
- 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/services/global.service.js +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/menu/menu-group2.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 -2
- 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/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/page2.js +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader2.js +1 -1
- 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-input2.js +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/range2.js +1 -1
- package/dist/resize-handle/resize-handle2.js +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/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/tabs2.js +2 -2
- package/dist/tag/tag2.js +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time2.js +1 -1
- package/dist/toast/toast2.js +1 -1
- package/dist/toggletip/toggletip-footer.js +1 -1
- package/dist/toggletip/toggletip-footer.js.map +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header.js +1 -1
- package/dist/toggletip/toggletip-header.js.map +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/tooltip2.js +1 -1
- package/dist/tree/tree-node.d.ts +2 -0
- package/dist/tree/tree-node.js +1 -1
- package/dist/tree/tree-node.js.map +1 -1
- package/dist/tree/tree-node2.js +2 -2
- package/dist/tree/tree-node2.js.map +1 -1
- package/dist/tree/tree.examples.js.map +1 -1
- package/dist/tree/tree.examples.json +12 -1
- package/dist/tree/tree.global.js +1 -1
- package/dist/tree/tree.global.js.map +1 -1
- package/dist/tree/tree2.js +1 -1
- package/dist/viewport/viewport-gridlines2.js +1 -1
- package/dist/viewport/viewport-minimap2.js +1 -1
- package/dist/viewport/viewport.d.ts +5 -0
- package/dist/viewport/viewport2.js +55 -45
- package/dist/viewport/viewport2.js.map +1 -1
- package/dist/week/week2.js +1 -1
- package/package.json +4 -3
package/dist/grid/grid.global.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/grid/grid.global.css?inline
|
|
2
|
-
var e = "nve-grid-row:has(nve-grid-cell:first-child [nve-control]>input:checked) nve-grid-cell{--background: var(--nve-sys-interaction-highlighted-muted-background);--interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}nve-grid:has(nve-grid-cell:first-child nve-radio),nve-grid:has(nve-grid-cell:first-child nve-checkbox){--grid-auto-columns: 36px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)}nve-grid[container=flat] nve-grid-header{--background: var(--nve-sys-layer-canvas-background)}nve-
|
|
2
|
+
var e = "nve-grid-row:has(nve-grid-cell:first-child [nve-control]>input:checked) nve-grid-cell{--background: var(--nve-sys-interaction-highlighted-muted-background);--interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}nve-grid:has(nve-grid-cell:first-child nve-radio),nve-grid:has(nve-grid-cell:first-child nve-checkbox){--grid-auto-columns: 36px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)}nve-grid[container=flat] nve-grid-header{--background: var(--nve-sys-layer-canvas-background)}nve-dialog,nve-drawer,nve-panel,nve-toggletip,nve-card:not([container=flat]),nve-page-panel:not([container=flat]),nve-accordion:not([container=flat]){nve-grid[container=flat]{nve-grid-header{--background: var(--nve-sys-layer-container-background)}}}nve-grid-cell:has(>nve-icon-button){--padding: 0 var(--nve-ref-size-100)}nve-grid-cell:has(>nve-checkbox),nve-grid-cell:has(>nve-radio){--padding: var(--nve-ref-size-200) var(--nve-ref-size-300)}nve-grid:has(nve-toolbar:not([hidden]))::part(_scrollbox){padding-block-end:var(--nve-ref-size-1000)}nve-grid:has(nve-toolbar:not([hidden])){contain:content}nve-grid-column>nve-sort-button+nve-icon-button{margin-inline-start:initial}nve-grid-cell:focus-within>a{box-shadow:0 0 0 2px Highlight}nve-grid{&:has([scroller]) nve-grid-header{--padding: 0 16px 0 0}[scroller]{scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.global.js","names":[],"sources":["../../src/grid/grid.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-grid-row:has(nve-grid-cell:first-child [nve-control] > input:checked) nve-grid-cell {\n --background: var(--nve-sys-interaction-highlighted-muted-background);\n --interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\nnve-grid:has(nve-grid-cell:first-child nve-radio),\nnve-grid:has(nve-grid-cell:first-child nve-checkbox) {\n --grid-auto-columns: 36px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n}\n\nnve-grid[container='flat'] nve-grid-header {\n --background: var(--nve-sys-layer-canvas-background);\n}\n\nnve-
|
|
1
|
+
{"version":3,"file":"grid.global.js","names":[],"sources":["../../src/grid/grid.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-grid-row:has(nve-grid-cell:first-child [nve-control] > input:checked) nve-grid-cell {\n --background: var(--nve-sys-interaction-highlighted-muted-background);\n --interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\nnve-grid:has(nve-grid-cell:first-child nve-radio),\nnve-grid:has(nve-grid-cell:first-child nve-checkbox) {\n --grid-auto-columns: 36px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n}\n\nnve-grid[container='flat'] nve-grid-header {\n --background: var(--nve-sys-layer-canvas-background);\n}\n\nnve-dialog,\nnve-drawer,\nnve-panel,\nnve-toggletip,\nnve-card:not([container='flat']),\nnve-page-panel:not([container='flat']),\nnve-accordion:not([container='flat']) {\n nve-grid[container='flat'] {\n nve-grid-header {\n --background: var(--nve-sys-layer-container-background);\n }\n }\n}\n\nnve-grid-cell:has(> nve-icon-button) {\n --padding: 0 var(--nve-ref-size-100);\n}\n\nnve-grid-cell:has(> nve-checkbox),\nnve-grid-cell:has(> nve-radio) {\n --padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n}\n\nnve-grid:has(nve-toolbar:not([hidden]))::part(_scrollbox) {\n padding-block-end: var(--nve-ref-size-1000);\n}\n\nnve-grid:has(nve-toolbar:not([hidden])) {\n contain: content;\n}\n\nnve-grid-column > nve-sort-button + nve-icon-button {\n margin-inline-start: initial;\n}\n\nnve-grid-cell:focus-within > a {\n box-shadow: 0 0 0 2px Highlight; /* programmatic focus does not trigger standard outline style */\n}\n\nnve-grid {\n &:has([scroller]) nve-grid-header {\n --padding: 0 16px 0 0;\n }\n\n & [scroller] {\n scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n scrollbar-width: var(--nve-sys-scrollbar-width);\n }\n}\n"],"mappings":""}
|
package/dist/grid/grid2.js
CHANGED
package/dist/grid/row/row2.js
CHANGED
package/dist/icon/icon2.js
CHANGED
|
@@ -16,7 +16,7 @@ var f = class e extends o {
|
|
|
16
16
|
static {
|
|
17
17
|
this.metadata = {
|
|
18
18
|
tag: "nve-icon",
|
|
19
|
-
version: "2.
|
|
19
|
+
version: "2.14.0"
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
22
|
static {
|
|
@@ -103,7 +103,7 @@ a([l({
|
|
|
103
103
|
})], f.prototype, "name", void 0), a([d()], f.prototype, "svg", void 0);
|
|
104
104
|
function p(t) {
|
|
105
105
|
if (typeof globalThis.customElements?.get == "function") {
|
|
106
|
-
let n = e(t.metadata.version), i = e("2.
|
|
106
|
+
let n = e(t.metadata.version), i = e("2.14.0");
|
|
107
107
|
n.minor <= i.minor && n.major <= i.major && (t._icons = {
|
|
108
108
|
...t._icons,
|
|
109
109
|
...r
|
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { I18nService as e } from "./internal/services/i18n.service.js";
|
|
|
2
2
|
import { getThemeTokens as t } from "./internal/utils/dom.js";
|
|
3
3
|
import { statusIcons as n } from "./internal/types/index.js";
|
|
4
4
|
//#region src/index.ts
|
|
5
|
-
var r = "2.
|
|
5
|
+
var r = "2.14.0", i = "@nvidia-elements";
|
|
6
6
|
//#endregion
|
|
7
7
|
export { e as I18nService, i as SCOPE, r as VERSION, t as getThemeTokens, n as statusIcons };
|
|
8
8
|
|
package/dist/input/input2.js
CHANGED
|
@@ -19,7 +19,7 @@ var a = class {
|
|
|
19
19
|
i18nRegistry: {},
|
|
20
20
|
audit: {}
|
|
21
21
|
}
|
|
22
|
-
}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.
|
|
22
|
+
}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.14.0"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.14.0"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
|
|
23
23
|
}
|
|
24
24
|
get state() {
|
|
25
25
|
return globalThis.NVE_ELEMENTS.state;
|
package/dist/logo/logo2.js
CHANGED
package/dist/menu/menu-group2.js
CHANGED
package/dist/menu/menu-item2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.examples.js","names":[],"sources":["../../src/menu/menu.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/dot/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/logo/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n title: 'Elements/Menu',\n component: 'nve-menu'\n};\n\n/**\n * @summary Basic menu with simple text items for the default menu structure and styling.\n */\nexport const Default = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item>item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu items with content slots for icons, dots, and other elements.\n * @tags test-case\n */\nexport const ContentSlots = {\n render: () => html`\n <nve-menu>\n <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Code <nve-dot slot=\"suffix\" size=\"sm\"></nve-dot></nve-menu-item>\n <nve-menu-item><nve-icon name=\"checklist\" slot=\"prefix\"></nve-icon> Lint <nve-dot slot=\"suffix\" status=\"accent\" size=\"sm\"></nve-dot></nve-menu-item>\n <nve-menu-item><nve-icon name=\"terminal\" slot=\"prefix\"></nve-icon> CLI <nve-dot slot=\"suffix\" status=\"success\" size=\"sm\"></nve-dot></nve-menu-item>\n <nve-menu-item><nve-icon name=\"person\" slot=\"prefix\"></nve-icon> Profile <nve-dot slot=\"suffix\" status=\"warning\" size=\"sm\"></nve-dot></nve-menu-item>\n <nve-menu-item><nve-icon name=\"key\" slot=\"prefix\"></nve-icon> Access <nve-dot slot=\"suffix\" status=\"danger\" size=\"sm\"></nve-dot></nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Dynamically toggle the compact state of a menu.\n * @tags test-case\n */\nexport const Compact = {\n render: () => html`\n <nve-switch>\n <label>Compact</label>\n <input id=\"compact-switch\" type=\"checkbox\" aria-label=\"compact menu\" checked />\n </nve-switch>\n <nve-menu density=\"compact\" id=\"compact-menu\">\n <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Code</nve-menu-item>\n <nve-menu-item><nve-icon name=\"checklist\" slot=\"prefix\"></nve-icon> Lint</nve-menu-item>\n <nve-menu-item><nve-icon name=\"terminal\" slot=\"prefix\"></nve-icon> CLI</nve-menu-item>\n <nve-menu-item><nve-icon name=\"person\" slot=\"prefix\"></nve-icon> Profile</nve-menu-item>\n <nve-menu-item><nve-icon name=\"key\" slot=\"prefix\"></nve-icon> Access</nve-menu-item>\n </nve-menu>\n <script type=\"module\">\n document.querySelector('#compact-switch').addEventListener('change', e => {\n document.querySelector('#compact-menu').density = e.target.checked ? 'compact' : 'default';\n }); \n </script>\n `\n};\n\n/**\n * @summary An explicitly expanded group keeps navigation state controlled by the application without enabling automatic state changes. Use when the application owns expansion state.\n */\nexport const ExpandedNavigation = {\n render: () => html`\n <nve-menu-group expanded style=\"--width: 240px\">\n Resources\n <nve-menu>\n <nve-menu-item>Documentation</nve-menu-item>\n <nve-menu-item>Examples</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n `\n};\n\n/**\n * @summary A disabled menu-group header preserves its current expanded content while preventing user toggling. Use when group availability depends on application state.\n */\nexport const UnavailableNavigation = {\n render: () => html`\n <nve-menu-group expanded disabled style=\"--width: 240px\">\n Provisioning\n <nve-menu>\n <nve-menu-item>Clusters</nve-menu-item>\n <nve-menu-item>Storage</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n `\n};\n\n/**\n * @summary Menu with keyboard navigation and ARIA disclosure pattern inside a dropdown. Use when menu items need accessible focus management and arrow key navigation.\n * @tags pattern\n */\nexport const Dropdown = {\n render: () => html`\n <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n <nve-dropdown id=\"dropdown-menu\">\n <nve-menu>\n <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n <nve-divider></nve-divider>\n <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n </nve-menu>\n </nve-dropdown>\n `\n};\n\n/**\n * @summary Menu with a selected item showing the visual state for user-selected options.\n */\nexport const Selected = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item selected>item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu with a current page item showing the visual state for the active/current page in navigation.\n */\nexport const Current = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item current=\"page\">item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary By default Menu will show a blue border on the selected item. You can change the border color by setting `--border-background` on the `<nve-menu-item>`\n * @tags test-case\n */\nexport const BorderBackground = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item current=\"page\" style=\"--border-background: var(--nve-ref-color-brand-green-900);\">item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu with disabled items showing unavailable options while maintaining visual context.\n * @tags test-case\n */\nexport const Disabled = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item disabled>item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu items with links for navigation functionality within menu structures.\n */\nexport const Links = {\n render: () => html`\n <nve-menu>\n <nve-menu-item><nve-icon slot=\"prefix\" name=\"person\"></nve-icon><a href=\"#\">profile</a></nve-menu-item>\n <nve-menu-item><nve-icon slot=\"prefix\" name=\"gear\"></nve-icon> <a href=\"#\">settings</a></nve-menu-item>\n <nve-menu-item><nve-icon slot=\"prefix\" name=\"star\"></nve-icon> <a href=\"#\">favorites</a></nve-menu-item>\n <nve-menu-item><nve-icon slot=\"prefix\" name=\"logout\"></nve-icon> <a href=\"#\">logout</a></nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu item features a default slot for content, along with a suffix slot for displaying elements such as keyboard shortcuts at the end of the menu item container.\n */\nexport const Suffix = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>Copy<kbd slot=\"suffix\" nve-text=\"code flat\">CMD + C</kbd></nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu with constrained height showing scrollable behavior when content exceeds container limits.\n * @tags test-case\n */\nexport const Scroll = {\n render: () => html`\n <nve-menu style=\"--max-height: 150px\">\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item>item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n <nve-menu-item>item 5</nve-menu-item>\n <nve-menu-item>item 6</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Use a dropdown menu with search and branded logos for application selection interfaces.\n * @tags pattern\n */\nexport const Complex = {\n render: () => html`\n <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n <nve-dropdown id=\"dropdown-menu\">\n <nve-search rounded>\n <input type=\"search\" placeholder=\"search tools\" aria-label=\"search apps\" />\n </nve-search>\n <nve-menu>\n <nve-menu-item>\n <nve-logo color=\"pink-rose\" size=\"sm\">Db</nve-logo> Debugger\n </nve-menu-item>\n <nve-menu-item>\n <nve-logo color=\"blue-cobalt\" size=\"sm\">TM</nve-logo> Task Manager\n </nve-menu-item>\n <nve-menu-item>\n <nve-logo color=\"yellow-nova\" size=\"sm\">CI</nve-logo> CI Services\n </nve-menu-item>\n <nve-divider></nve-divider>\n <nve-menu-item>\n <nve-logo size=\"sm\">NV</nve-logo> All Apps\n </nve-menu-item>\n </nve-menu>\n </nve-dropdown>\n `\n};\n\n/**\n * @summary Vertical navigation menu groups with and without icons. For deeply nested navigation use the `nve-tree` component.\n */\nexport const VerticalNavigation = {\n render: () => html`\n <div nve-layout=\"row gap:xl\">\n <nav style=\"width: 175px\">\n <nve-menu-group behavior-expand expanded>\n Overview\n <nve-menu>\n <nve-menu-item current=\"page\"><nve-icon name=\"home\" slot=\"prefix\"></nve-icon> Getting Started</nve-menu-item>\n <nve-menu-item><nve-icon name=\"bell\" slot=\"prefix\"></nve-icon> Alerts</nve-menu-item>\n <nve-menu-item><nve-icon name=\"add\" slot=\"prefix\"></nve-icon> Create New</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Data\n <nve-menu>\n <nve-menu-item><nve-icon name=\"office-building\" slot=\"prefix\"></nve-icon> Catalog</nve-menu-item>\n <nve-menu-item><nve-icon name=\"view-as-grid\" slot=\"prefix\"></nve-icon> Dashboards</nve-menu-item>\n <nve-menu-item><nve-icon name=\"rectangle-stack-horizontal\" slot=\"prefix\"></nve-icon> Volumes</nve-menu-item>\n <nve-menu-item><nve-icon name=\"layers\" slot=\"prefix\"></nve-icon> Models</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Develop\n <nve-menu>\n <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Queries</nve-menu-item>\n <nve-menu-item><nve-icon name=\"doc-checkmark\" slot=\"prefix\"></nve-icon> Notebooks</nve-menu-item>\n <nve-menu-item><nve-icon name=\"branch\" slot=\"prefix\"></nve-icon> Pipelines</nve-menu-item>\n <nve-menu-item><nve-icon name=\"beaker\" slot=\"prefix\"></nve-icon> Experiments</nve-menu-item>\n <nve-menu-item><nve-icon name=\"clock\" slot=\"prefix\"></nve-icon> Runs</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n </nav>\n\n <nav style=\"width: 175px\">\n <nve-menu-group behavior-expand expanded>\n Overview\n <nve-menu>\n <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n <nve-menu-item>Alerts</nve-menu-item>\n <nve-menu-item>Create New</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Data\n <nve-menu>\n <nve-menu-item>Catalog</nve-menu-item>\n <nve-menu-item>Dashboards</nve-menu-item>\n <nve-menu-item>Volumes</nve-menu-item>\n <nve-menu-item>Models</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Develop\n <nve-menu>\n <nve-menu-item>Queries</nve-menu-item>\n <nve-menu-item >Notebooks</nve-menu-item>\n <nve-menu-item>Pipelines</nve-menu-item>\n <nve-menu-item>Experiments</nve-menu-item>\n <nve-menu-item>Runs</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n </nav>\n </div>\n `\n};\n\n/**\n * @summary Use a navigation drawer to overlay page content for out-of-context navigation.\n * @tags pattern\n */\nexport const VerticalNavigationDrawer = {\n render: () => html`\n <nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n </nve-page-header>\n <main nve-layout=\"column gap:md pad:md\">\n <nve-button popovertarget=\"menu-drawer\">toggle drawer</nve-button>\n </main>\n <nve-drawer position=\"right\" size=\"sm\" modal closable id=\"menu-drawer\">\n <nve-drawer-header>\n <h3 nve-text=\"heading\">Drawer</h3>\n </nve-drawer-header>\n <nve-drawer-content>\n <nve-menu-group behavior-expand expanded>\n Overview\n <nve-menu>\n <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n <nve-menu-item>Alerts</nve-menu-item>\n <nve-menu-item>Create New</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Data\n <nve-menu>\n <nve-menu-item>Catalog</nve-menu-item>\n <nve-menu-item>Dashboards</nve-menu-item>\n <nve-menu-item>Volumes</nve-menu-item>\n <nve-menu-item>Models</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Develop\n <nve-menu>\n <nve-menu-item>Queries</nve-menu-item>\n <nve-menu-item >Notebooks</nve-menu-item>\n <nve-menu-item>Pipelines</nve-menu-item>\n <nve-menu-item>Experiments</nve-menu-item>\n <nve-menu-item>Runs</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n </nve-drawer-content>\n </nve-drawer>\n </nve-page>\n `\n};\n\n/**\n * @summary Use an inline navigation panel to push page content aside when navigation is contextual to the page.\n * @tags pattern\n */\nexport const VerticalNavigationPanel = {\n render: () => html`\n<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n </nve-page-header>\n <nve-page-panel slot=\"left\" size=\"sm\" expanded>\n <nve-page-panel-header>\n <h3 nve-text=\"heading\">Drawer</h3>\n </nve-page-panel-header>\n <nve-page-panel-content>\n <nve-menu-group behavior-expand expanded>\n Overview\n <nve-menu>\n <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n <nve-menu-item>Alerts</nve-menu-item>\n <nve-menu-item>Create New</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Data\n <nve-menu>\n <nve-menu-item>Catalog</nve-menu-item>\n <nve-menu-item>Dashboards</nve-menu-item>\n <nve-menu-item>Volumes</nve-menu-item>\n <nve-menu-item>Models</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Develop\n <nve-menu>\n <nve-menu-item>Queries</nve-menu-item>\n <nve-menu-item >Notebooks</nve-menu-item>\n <nve-menu-item>Pipelines</nve-menu-item>\n <nve-menu-item>Experiments</nve-menu-item>\n <nve-menu-item>Runs</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n </nve-page-panel-content>\n </nve-page-panel>\n <main nve-layout=\"column gap:md pad:md\">\n <p nve-text=\"body\">Content</p>\n </main>\n</nve-page>\n `\n};\n\n/**\n * @summary Use a tooltip on a menu item to provide extra context and warnings.\n * @tags pattern test-case\n */\nexport const ItemTooltip = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item popovertarget=\"menu-tooltip\" id=\"menu-item-2\">\n item 2\n <nve-icon id=\"menu-anchor\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon>\n <nve-tooltip anchor=\"menu-anchor\" id=\"menu-tooltip\" style=\"interest-delay-start: 2s\">This is a warning tooltip</nve-tooltip>\n </nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu items with danger status styling for destructive actions like delete or logout operations.\n */\nexport const DangerStatus = {\n render: () => html`\n <nve-menu>\n <nve-menu-item status=\"danger\">default</nve-menu-item>\n <nve-menu-item status=\"danger\" disabled>disabled</nve-menu-item>\n <nve-menu-item status=\"danger\" selected>selected</nve-menu-item>\n <nve-menu-item status=\"danger\" current=\"page\">current</nve-menu-item>\n <nve-menu-item status=\"danger\"><nve-icon name=\"gear\"></nve-icon> icon left</nve-menu-item>\n <nve-menu-item status=\"danger\">icon right <nve-icon id=\"warning-icon\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon></nve-menu-item>\n </nve-menu>\n `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
|
|
1
|
+
{"version":3,"file":"menu.examples.js","names":[],"sources":["../../src/menu/menu.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/dot/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/logo/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n title: 'Elements/Menu',\n component: 'nve-menu'\n};\n\n/**\n * @summary Basic menu with simple text items for the default menu structure and styling.\n */\nexport const Default = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item>item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu items with content slots for icons, dots, and other elements.\n * @tags test-case\n */\nexport const ContentSlots = {\n render: () => html`\n <nve-menu>\n <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Code <nve-dot slot=\"suffix\" size=\"sm\"></nve-dot></nve-menu-item>\n <nve-menu-item><nve-icon name=\"checklist\" slot=\"prefix\"></nve-icon> Lint <nve-dot slot=\"suffix\" status=\"accent\" size=\"sm\"></nve-dot></nve-menu-item>\n <nve-menu-item><nve-icon name=\"terminal\" slot=\"prefix\"></nve-icon> CLI <nve-dot slot=\"suffix\" status=\"success\" size=\"sm\"></nve-dot></nve-menu-item>\n <nve-menu-item><nve-icon name=\"person\" slot=\"prefix\"></nve-icon> Profile <nve-dot slot=\"suffix\" status=\"warning\" size=\"sm\"></nve-dot></nve-menu-item>\n <nve-menu-item><nve-icon name=\"key\" slot=\"prefix\"></nve-icon> Access <nve-dot slot=\"suffix\" status=\"danger\" size=\"sm\"></nve-dot></nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Dynamically toggle the compact state of a menu.\n * @tags test-case\n */\nexport const Compact = {\n render: () => html`\n <nve-switch>\n <label>Compact</label>\n <input id=\"compact-switch\" type=\"checkbox\" aria-label=\"compact menu\" checked />\n </nve-switch>\n <nve-menu density=\"compact\" id=\"compact-menu\">\n <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Code</nve-menu-item>\n <nve-menu-item><nve-icon name=\"checklist\" slot=\"prefix\"></nve-icon> Lint</nve-menu-item>\n <nve-menu-item><nve-icon name=\"terminal\" slot=\"prefix\"></nve-icon> CLI</nve-menu-item>\n <nve-menu-item><nve-icon name=\"person\" slot=\"prefix\"></nve-icon> Profile</nve-menu-item>\n <nve-menu-item><nve-icon name=\"key\" slot=\"prefix\"></nve-icon> Access</nve-menu-item>\n </nve-menu>\n <script type=\"module\">\n document.querySelector('#compact-switch').addEventListener('change', e => {\n document.querySelector('#compact-menu').density = e.target.checked ? 'compact' : 'default';\n }); \n </script>\n `\n};\n\n/**\n * @summary An explicitly expanded group keeps navigation state controlled by the application without enabling automatic state changes. Use when the application owns expansion state.\n */\nexport const ExpandedNavigation = {\n render: () => html`\n <nve-menu-group expanded style=\"--width: 240px\">\n Resources\n <nve-menu>\n <nve-menu-item>Documentation</nve-menu-item>\n <nve-menu-item>Examples</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n `\n};\n\n/**\n * @summary A disabled menu-group header preserves its current expanded content while preventing user toggling. Use when group availability depends on application state.\n */\nexport const UnavailableNavigation = {\n render: () => html`\n <nve-menu-group expanded disabled style=\"--width: 240px\">\n Provisioning\n <nve-menu>\n <nve-menu-item>Clusters</nve-menu-item>\n <nve-menu-item>Storage</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n `\n};\n\n/**\n * @summary Menu with keyboard navigation and ARIA disclosure pattern inside a dropdown. Use when menu items need accessible focus management and arrow key navigation.\n * @tags pattern\n */\nexport const Dropdown = {\n render: () => html`\n <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n <nve-dropdown id=\"dropdown-menu\">\n <nve-menu>\n <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n <nve-divider></nve-divider>\n <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n </nve-menu>\n </nve-dropdown>\n `\n};\n\n/**\n * @summary Menu with a selected item showing the visual state for user-selected options.\n */\nexport const Selected = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item selected>item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu with a current page item showing the visual state for the active/current page in navigation.\n */\nexport const Current = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item current=\"page\">item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary By default Menu will show a blue border on the selected item. You can change the border color by setting `--border-background` on the `<nve-menu-item>`\n * @tags test-case\n */\nexport const BorderBackground = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item current=\"page\" style=\"--border-background: var(--nve-ref-color-brand-green-900);\">item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu with disabled items showing unavailable options while maintaining visual context.\n * @tags test-case\n */\nexport const Disabled = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item disabled>item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu items with links for navigation functionality within menu structures.\n */\nexport const Links = {\n render: () => html`\n <nve-menu>\n <nve-menu-item><nve-icon slot=\"prefix\" name=\"person\"></nve-icon><a href=\"#\">profile</a></nve-menu-item>\n <nve-menu-item><nve-icon slot=\"prefix\" name=\"gear\"></nve-icon> <a href=\"#\">settings</a></nve-menu-item>\n <nve-menu-item><nve-icon slot=\"prefix\" name=\"star\"></nve-icon> <a href=\"#\">favorites</a></nve-menu-item>\n <nve-menu-item><nve-icon slot=\"prefix\" name=\"logout\"></nve-icon> <a href=\"#\">logout</a></nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu item features a default slot for content, along with a suffix slot for displaying elements such as keyboard shortcuts at the end of the menu item container.\n */\nexport const Suffix = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>Copy<kbd slot=\"suffix\" nve-text=\"code flat\">CMD + C</kbd></nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu with constrained height showing scrollable behavior when content exceeds container limits.\n * @tags test-case\n */\nexport const Scroll = {\n render: () => html`\n <nve-menu style=\"--max-height: 150px\">\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item>item 2</nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n <nve-menu-item>item 4</nve-menu-item>\n <nve-menu-item>item 5</nve-menu-item>\n <nve-menu-item>item 6</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Use a dropdown menu with search and branded logos for application selection interfaces.\n * @tags pattern\n */\nexport const Complex = {\n render: () => html`\n <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n <nve-dropdown id=\"dropdown-menu\">\n <nve-search rounded>\n <input type=\"search\" placeholder=\"search tools\" aria-label=\"search apps\" />\n </nve-search>\n <nve-menu>\n <nve-menu-item>\n <nve-logo color=\"pink-rose\" size=\"sm\">Db</nve-logo> Debugger\n </nve-menu-item>\n <nve-menu-item>\n <nve-logo color=\"blue-cobalt\" size=\"sm\">TM</nve-logo> Task Manager\n </nve-menu-item>\n <nve-menu-item>\n <nve-logo color=\"yellow-nova\" size=\"sm\">CI</nve-logo> CI Services\n </nve-menu-item>\n <nve-divider></nve-divider>\n <nve-menu-item>\n <nve-logo size=\"sm\">NV</nve-logo> All Apps\n </nve-menu-item>\n </nve-menu>\n </nve-dropdown>\n `\n};\n\n/**\n * @summary Use vertical navigation menu groups with optional icons to organize related destinations into collapsible sections. Use the `nve-tree` component for deeply nested navigation.\n * @tags pattern\n */\nexport const VerticalNavigation = {\n render: () => html`\n <div nve-layout=\"row gap:xl\">\n <nav style=\"width: 175px\">\n <nve-menu-group behavior-expand expanded>\n Overview\n <nve-menu>\n <nve-menu-item current=\"page\"><nve-icon name=\"home\" slot=\"prefix\"></nve-icon> Getting Started</nve-menu-item>\n <nve-menu-item><nve-icon name=\"bell\" slot=\"prefix\"></nve-icon> Alerts</nve-menu-item>\n <nve-menu-item><nve-icon name=\"add\" slot=\"prefix\"></nve-icon> Create New</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Data\n <nve-menu>\n <nve-menu-item><nve-icon name=\"office-building\" slot=\"prefix\"></nve-icon> Catalog</nve-menu-item>\n <nve-menu-item><nve-icon name=\"view-as-grid\" slot=\"prefix\"></nve-icon> Dashboards</nve-menu-item>\n <nve-menu-item><nve-icon name=\"rectangle-stack-horizontal\" slot=\"prefix\"></nve-icon> Volumes</nve-menu-item>\n <nve-menu-item><nve-icon name=\"layers\" slot=\"prefix\"></nve-icon> Models</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Develop\n <nve-menu>\n <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Queries</nve-menu-item>\n <nve-menu-item><nve-icon name=\"doc-checkmark\" slot=\"prefix\"></nve-icon> Notebooks</nve-menu-item>\n <nve-menu-item><nve-icon name=\"branch\" slot=\"prefix\"></nve-icon> Pipelines</nve-menu-item>\n <nve-menu-item><nve-icon name=\"beaker\" slot=\"prefix\"></nve-icon> Experiments</nve-menu-item>\n <nve-menu-item><nve-icon name=\"clock\" slot=\"prefix\"></nve-icon> Runs</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n </nav>\n\n <nav style=\"width: 175px\">\n <nve-menu-group behavior-expand expanded>\n Overview\n <nve-menu>\n <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n <nve-menu-item>Alerts</nve-menu-item>\n <nve-menu-item>Create New</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Data\n <nve-menu>\n <nve-menu-item>Catalog</nve-menu-item>\n <nve-menu-item>Dashboards</nve-menu-item>\n <nve-menu-item>Volumes</nve-menu-item>\n <nve-menu-item>Models</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Develop\n <nve-menu>\n <nve-menu-item>Queries</nve-menu-item>\n <nve-menu-item >Notebooks</nve-menu-item>\n <nve-menu-item>Pipelines</nve-menu-item>\n <nve-menu-item>Experiments</nve-menu-item>\n <nve-menu-item>Runs</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n </nav>\n </div>\n `\n};\n\n/**\n * @summary Use a navigation drawer to overlay page content for out-of-context navigation.\n * @tags pattern\n */\nexport const VerticalNavigationDrawer = {\n render: () => html`\n <nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n </nve-page-header>\n <main nve-layout=\"column gap:md pad:md\">\n <nve-button popovertarget=\"menu-drawer\">toggle drawer</nve-button>\n </main>\n <nve-drawer position=\"right\" size=\"sm\" modal closable id=\"menu-drawer\">\n <nve-drawer-header>\n <h3 nve-text=\"heading\">Drawer</h3>\n </nve-drawer-header>\n <nve-drawer-content>\n <nve-menu-group behavior-expand expanded>\n Overview\n <nve-menu>\n <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n <nve-menu-item>Alerts</nve-menu-item>\n <nve-menu-item>Create New</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Data\n <nve-menu>\n <nve-menu-item>Catalog</nve-menu-item>\n <nve-menu-item>Dashboards</nve-menu-item>\n <nve-menu-item>Volumes</nve-menu-item>\n <nve-menu-item>Models</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Develop\n <nve-menu>\n <nve-menu-item>Queries</nve-menu-item>\n <nve-menu-item >Notebooks</nve-menu-item>\n <nve-menu-item>Pipelines</nve-menu-item>\n <nve-menu-item>Experiments</nve-menu-item>\n <nve-menu-item>Runs</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n </nve-drawer-content>\n </nve-drawer>\n </nve-page>\n `\n};\n\n/**\n * @summary Use an inline navigation panel to push page content aside when navigation is contextual to the page.\n * @tags pattern\n */\nexport const VerticalNavigationPanel = {\n render: () => html`\n<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n </nve-page-header>\n <nve-page-panel slot=\"left\" size=\"sm\" expanded>\n <nve-page-panel-header>\n <h3 nve-text=\"heading\">Drawer</h3>\n </nve-page-panel-header>\n <nve-page-panel-content>\n <nve-menu-group behavior-expand expanded>\n Overview\n <nve-menu>\n <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n <nve-menu-item>Alerts</nve-menu-item>\n <nve-menu-item>Create New</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Data\n <nve-menu>\n <nve-menu-item>Catalog</nve-menu-item>\n <nve-menu-item>Dashboards</nve-menu-item>\n <nve-menu-item>Volumes</nve-menu-item>\n <nve-menu-item>Models</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Develop\n <nve-menu>\n <nve-menu-item>Queries</nve-menu-item>\n <nve-menu-item >Notebooks</nve-menu-item>\n <nve-menu-item>Pipelines</nve-menu-item>\n <nve-menu-item>Experiments</nve-menu-item>\n <nve-menu-item>Runs</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n </nve-page-panel-content>\n </nve-page-panel>\n <main nve-layout=\"column gap:md pad:md\">\n <p nve-text=\"body\">Content</p>\n </main>\n</nve-page>\n `\n};\n\n/**\n * @summary Use a tooltip on a menu item to provide extra context and warnings.\n * @tags pattern test-case\n */\nexport const ItemTooltip = {\n render: () => html`\n <nve-menu>\n <nve-menu-item>item 1</nve-menu-item>\n <nve-menu-item popovertarget=\"menu-tooltip\" id=\"menu-item-2\">\n item 2\n <nve-icon id=\"menu-anchor\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon>\n <nve-tooltip anchor=\"menu-anchor\" id=\"menu-tooltip\" style=\"interest-delay-start: 2s\">This is a warning tooltip</nve-tooltip>\n </nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n </nve-menu>\n `\n};\n\n/**\n * @summary Menu items with danger status styling for destructive actions like delete or logout operations.\n */\nexport const DangerStatus = {\n render: () => html`\n <nve-menu>\n <nve-menu-item status=\"danger\">default</nve-menu-item>\n <nve-menu-item status=\"danger\" disabled>disabled</nve-menu-item>\n <nve-menu-item status=\"danger\" selected>selected</nve-menu-item>\n <nve-menu-item status=\"danger\" current=\"page\">current</nve-menu-item>\n <nve-menu-item status=\"danger\"><nve-icon name=\"gear\"></nve-icon> icon left</nve-menu-item>\n <nve-menu-item status=\"danger\">icon right <nve-icon id=\"warning-icon\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon></nve-menu-item>\n </nve-menu>\n `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
|
|
@@ -146,10 +146,12 @@
|
|
|
146
146
|
"id": "menu-vertical-navigation",
|
|
147
147
|
"name": "VerticalNavigation",
|
|
148
148
|
"template": "<div nve-layout=\"row gap:xl\">\n <nav style=\"width: 175px\">\n <nve-menu-group behavior-expand expanded>\n Overview\n <nve-menu>\n <nve-menu-item current=\"page\"><nve-icon name=\"home\" slot=\"prefix\"></nve-icon> Getting Started</nve-menu-item>\n <nve-menu-item><nve-icon name=\"bell\" slot=\"prefix\"></nve-icon> Alerts</nve-menu-item>\n <nve-menu-item><nve-icon name=\"add\" slot=\"prefix\"></nve-icon> Create New</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Data\n <nve-menu>\n <nve-menu-item><nve-icon name=\"office-building\" slot=\"prefix\"></nve-icon> Catalog</nve-menu-item>\n <nve-menu-item><nve-icon name=\"view-as-grid\" slot=\"prefix\"></nve-icon> Dashboards</nve-menu-item>\n <nve-menu-item><nve-icon name=\"rectangle-stack-horizontal\" slot=\"prefix\"></nve-icon> Volumes</nve-menu-item>\n <nve-menu-item><nve-icon name=\"layers\" slot=\"prefix\"></nve-icon> Models</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Develop\n <nve-menu>\n <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Queries</nve-menu-item>\n <nve-menu-item><nve-icon name=\"doc-checkmark\" slot=\"prefix\"></nve-icon> Notebooks</nve-menu-item>\n <nve-menu-item><nve-icon name=\"branch\" slot=\"prefix\"></nve-icon> Pipelines</nve-menu-item>\n <nve-menu-item><nve-icon name=\"beaker\" slot=\"prefix\"></nve-icon> Experiments</nve-menu-item>\n <nve-menu-item><nve-icon name=\"clock\" slot=\"prefix\"></nve-icon> Runs</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n </nav>\n\n <nav style=\"width: 175px\">\n <nve-menu-group behavior-expand expanded>\n Overview\n <nve-menu>\n <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n <nve-menu-item>Alerts</nve-menu-item>\n <nve-menu-item>Create New</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Data\n <nve-menu>\n <nve-menu-item>Catalog</nve-menu-item>\n <nve-menu-item>Dashboards</nve-menu-item>\n <nve-menu-item>Volumes</nve-menu-item>\n <nve-menu-item>Models</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n <nve-menu-group behavior-expand expanded>\n Develop\n <nve-menu>\n <nve-menu-item>Queries</nve-menu-item>\n <nve-menu-item>Notebooks</nve-menu-item>\n <nve-menu-item>Pipelines</nve-menu-item>\n <nve-menu-item>Experiments</nve-menu-item>\n <nve-menu-item>Runs</nve-menu-item>\n </nve-menu>\n </nve-menu-group>\n </nav>\n</div>\n",
|
|
149
|
-
"summary": "
|
|
149
|
+
"summary": "Use vertical navigation menu groups with optional icons to organize related destinations into collapsible sections. Use the `nve-tree` component for deeply nested navigation.",
|
|
150
150
|
"description": "",
|
|
151
151
|
"composition": false,
|
|
152
|
-
"tags": [
|
|
152
|
+
"tags": [
|
|
153
|
+
"pattern"
|
|
154
|
+
]
|
|
153
155
|
},
|
|
154
156
|
{
|
|
155
157
|
"id": "menu-vertical-navigation-drawer",
|
package/dist/menu/menu2.js
CHANGED
package/dist/month/month2.js
CHANGED
package/dist/page/page2.js
CHANGED
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.14.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.14.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.14.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.14.0"
|
|
73
73
|
};
|
|
74
74
|
}
|
|
75
75
|
static {
|
package/dist/pulse/pulse2.js
CHANGED
package/dist/radio/radio2.js
CHANGED
package/dist/range/range2.js
CHANGED
package/dist/search/search2.js
CHANGED
package/dist/select/select2.js
CHANGED