@nvidia-elements/core 2.8.0 → 2.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (156) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/accordion/accordion.examples.json +9 -9
  3. package/dist/accordion/accordion2.js +4 -4
  4. package/dist/alert/alert-group2.js +1 -1
  5. package/dist/alert/alert.examples.json +3 -3
  6. package/dist/alert/alert2.js +1 -1
  7. package/dist/avatar/avatar-group2.js +1 -1
  8. package/dist/avatar/avatar2.js +1 -1
  9. package/dist/badge/badge.examples.json +2 -2
  10. package/dist/badge/badge2.js +1 -1
  11. package/dist/breadcrumb/breadcrumb.examples.json +1 -1
  12. package/dist/breadcrumb/breadcrumb2.js +1 -1
  13. package/dist/bundles/index.d.ts +6 -0
  14. package/dist/bundles/index.js +1 -1
  15. package/dist/button/button.examples.json +3 -3
  16. package/dist/button/button2.js +1 -1
  17. package/dist/button-group/button-group2.js +1 -1
  18. package/dist/card/card.examples.json +2 -2
  19. package/dist/card/card2.js +4 -4
  20. package/dist/chat-message/chat-message.examples.json +4 -4
  21. package/dist/chat-message/chat-message2.js +1 -1
  22. package/dist/checkbox/checkbox-group2.js +1 -1
  23. package/dist/checkbox/checkbox2.js +1 -1
  24. package/dist/color/color2.js +1 -1
  25. package/dist/combobox/combobox.examples.json +5 -5
  26. package/dist/combobox/combobox2.js +1 -1
  27. package/dist/copy-button/copy-button.examples.json +2 -2
  28. package/dist/copy-button/copy-button2.js +1 -1
  29. package/dist/custom-elements-jsx.d.ts +3 -1
  30. package/dist/custom-elements-vue.d.ts +3 -1
  31. package/dist/custom-elements.json +41 -33
  32. package/dist/data.html.json +1 -1
  33. package/dist/date/date2.js +1 -1
  34. package/dist/datetime/datetime2.js +1 -1
  35. package/dist/dialog/dialog-footer2.js +1 -1
  36. package/dist/dialog/dialog-header2.js +1 -1
  37. package/dist/dialog/dialog.examples.json +3 -3
  38. package/dist/dialog/dialog2.js +1 -1
  39. package/dist/divider/divider.examples.json +1 -1
  40. package/dist/divider/divider2.js +1 -1
  41. package/dist/dot/dot2.js +1 -1
  42. package/dist/drawer/drawer-content2.js +1 -1
  43. package/dist/drawer/drawer-footer2.js +1 -1
  44. package/dist/drawer/drawer-header2.js +1 -1
  45. package/dist/drawer/drawer2.js +1 -1
  46. package/dist/dropdown/dropdown-footer2.js +1 -1
  47. package/dist/dropdown/dropdown-header2.js +1 -1
  48. package/dist/dropdown/dropdown2.js +1 -1
  49. package/dist/dropdown-group/dropdown-group.examples.json +4 -4
  50. package/dist/dropdown-group/dropdown-group.js +1 -1
  51. package/dist/dropzone/dropzone.examples.json +1 -1
  52. package/dist/dropzone/dropzone2.js +1 -1
  53. package/dist/file/file2.js +1 -1
  54. package/dist/format-bytes/format-bytes2.js +1 -1
  55. package/dist/format-datetime/format-datetime.examples.json +3 -3
  56. package/dist/format-datetime/format-datetime2.js +1 -1
  57. package/dist/format-number/format-number2.js +1 -1
  58. package/dist/format-relative-time/format-relative-time2.js +1 -1
  59. package/dist/format-truncate/format-truncate.examples.json +4 -4
  60. package/dist/format-truncate/format-truncate2.js +1 -1
  61. package/dist/forms/actions.examples.json +1 -1
  62. package/dist/forms/control/control.examples.json +1 -1
  63. package/dist/forms/control/control2.js +1 -1
  64. package/dist/forms/control-group/control-group2.js +1 -1
  65. package/dist/forms/control-message/control-message2.js +1 -1
  66. package/dist/gauge/gauge.examples.json +2 -2
  67. package/dist/gauge/gauge2.js +1 -1
  68. package/dist/grid/cell/cell2.js +1 -1
  69. package/dist/grid/column/column2.js +1 -1
  70. package/dist/grid/footer/footer2.js +1 -1
  71. package/dist/grid/grid.examples.js.map +1 -1
  72. package/dist/grid/grid.examples.json +34 -34
  73. package/dist/grid/grid2.js +1 -1
  74. package/dist/grid/header/header2.js +1 -1
  75. package/dist/grid/placeholder/placeholder2.js +1 -1
  76. package/dist/grid/row/row2.js +1 -1
  77. package/dist/icon/icon2.js +2 -2
  78. package/dist/icon-button/icon-button2.js +1 -1
  79. package/dist/index.js +1 -1
  80. package/dist/input/input-group2.js +1 -1
  81. package/dist/input/input2.js +1 -1
  82. package/dist/internal/controllers/keynav-grid.controller.examples.json +1 -1
  83. package/dist/internal/controllers/keynav-list.controller.examples.json +1 -1
  84. package/dist/internal/controllers/popover.examples.json +2 -2
  85. package/dist/internal/services/global.service.js +1 -1
  86. package/dist/logo/logo.examples.json +1 -1
  87. package/dist/logo/logo2.js +1 -1
  88. package/dist/menu/menu-item2.js +1 -1
  89. package/dist/menu/menu.examples.js.map +1 -1
  90. package/dist/menu/menu.examples.json +4 -4
  91. package/dist/menu/menu2.js +1 -1
  92. package/dist/month/month2.js +1 -1
  93. package/dist/notification/notification-group2.js +1 -1
  94. package/dist/notification/notification.examples.json +3 -3
  95. package/dist/notification/notification2.js +1 -1
  96. package/dist/page/page-panel/page-panel-content2.js +1 -1
  97. package/dist/page/page-panel/page-panel-footer2.js +1 -1
  98. package/dist/page/page-panel/page-panel-header2.js +1 -1
  99. package/dist/page/page-panel/page-panel2.js +1 -1
  100. package/dist/page/page.examples.json +10 -10
  101. package/dist/page/page2.js +1 -1
  102. package/dist/page-header/page-header.examples.json +1 -1
  103. package/dist/page-header/page-header2.js +1 -1
  104. package/dist/page-loader/page-loader2.js +1 -1
  105. package/dist/pagination/pagination.examples.json +6 -6
  106. package/dist/pagination/pagination2.js +1 -1
  107. package/dist/panel/panel2.js +4 -4
  108. package/dist/password/password2.js +1 -1
  109. package/dist/preferences-input/preferences-input.examples.json +1 -1
  110. package/dist/preferences-input/preferences-input2.js +1 -1
  111. package/dist/progress-bar/progress-bar.examples.json +1 -1
  112. package/dist/progress-bar/progress-bar2.js +1 -1
  113. package/dist/progress-ring/progress-ring2.js +1 -1
  114. package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
  115. package/dist/pulse/pulse2.js +1 -1
  116. package/dist/radio/radio-group2.js +1 -1
  117. package/dist/radio/radio2.js +1 -1
  118. package/dist/range/range.examples.json +1 -1
  119. package/dist/range/range2.js +1 -1
  120. package/dist/resize-handle/resize-handle.examples.json +4 -4
  121. package/dist/resize-handle/resize-handle2.js +1 -1
  122. package/dist/search/search2.js +1 -1
  123. package/dist/select/select2.js +1 -1
  124. package/dist/skeleton/skeleton2.js +1 -1
  125. package/dist/sort-button/sort-button2.js +1 -1
  126. package/dist/sparkline/sparkline.examples.json +2 -2
  127. package/dist/sparkline/sparkline2.js +1 -1
  128. package/dist/star-rating/star-rating2.js +1 -1
  129. package/dist/steps/steps2.js +2 -2
  130. package/dist/switch/switch-group2.js +1 -1
  131. package/dist/switch/switch2.js +1 -1
  132. package/dist/tabs/tabs-group2.js +1 -1
  133. package/dist/tabs/tabs.examples.json +4 -4
  134. package/dist/tabs/tabs2.js +2 -2
  135. package/dist/tag/tag.examples.json +1 -1
  136. package/dist/tag/tag2.js +1 -1
  137. package/dist/textarea/textarea.d.ts +7 -1
  138. package/dist/textarea/textarea.examples.js.map +1 -1
  139. package/dist/textarea/textarea.examples.json +22 -0
  140. package/dist/textarea/textarea.js +1 -1
  141. package/dist/textarea/textarea.js.map +1 -1
  142. package/dist/textarea/textarea2.js +10 -3
  143. package/dist/textarea/textarea2.js.map +1 -1
  144. package/dist/time/time2.js +1 -1
  145. package/dist/toast/toast.examples.json +1 -1
  146. package/dist/toast/toast2.js +1 -1
  147. package/dist/toggletip/toggletip-footer2.js +1 -1
  148. package/dist/toggletip/toggletip-header2.js +1 -1
  149. package/dist/toggletip/toggletip2.js +1 -1
  150. package/dist/toolbar/toolbar2.js +1 -1
  151. package/dist/tooltip/tooltip.examples.json +2 -2
  152. package/dist/tooltip/tooltip2.js +1 -1
  153. package/dist/tree/tree-node2.js +1 -1
  154. package/dist/tree/tree2.js +1 -1
  155. package/dist/week/week2.js +1 -1
  156. package/package.json +2 -2
package/dist/grid/grid2.js CHANGED
@@ -23,7 +23,7 @@ var y = class extends g {
23
23
  static {
24
24
  this.metadata = {
25
25
  tag: "nve-grid",
26
- version: "2.8.0",
26
+ version: "2.8.1",
27
27
  children: [
28
28
  d.metadata.tag,
29
29
  f.metadata.tag,
package/dist/grid/header/header2.js CHANGED
@@ -19,7 +19,7 @@ var m = class extends d {
19
19
  static {
20
20
  this.metadata = {
21
21
  tag: "nve-grid-header",
22
- version: "2.8.0",
22
+ version: "2.8.1",
23
23
  children: [c.metadata.tag]
24
24
  };
25
25
  }
package/dist/grid/placeholder/placeholder2.js CHANGED
@@ -10,7 +10,7 @@ var a = class extends r {
10
10
  static {
11
11
  this.metadata = {
12
12
  tag: "nve-grid-placeholder",
13
- version: "2.8.0"
13
+ version: "2.8.1"
14
14
  };
15
15
  }
16
16
  render() {
package/dist/grid/row/row2.js CHANGED
@@ -15,7 +15,7 @@ var u = class extends s {
15
15
  static {
16
16
  this.metadata = {
17
17
  tag: "nve-grid-row",
18
- version: "2.8.0",
18
+ version: "2.8.1",
19
19
  children: [a.metadata.tag]
20
20
  };
21
21
  }
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.8.0"
19
+ version: "2.8.1"
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.8.0");
106
+ let n = e(t.metadata.version), i = e("2.8.1");
107
107
  n.minor <= i.minor && n.major <= i.major && (t._icons = {
108
108
  ...t._icons,
109
109
  ...r
package/dist/icon-button/icon-button2.js CHANGED
@@ -15,7 +15,7 @@ var l = class extends a {
15
15
  static {
16
16
  this.metadata = {
17
17
  tag: "nve-icon-button",
18
- version: "2.8.0"
18
+ version: "2.8.1"
19
19
  };
20
20
  }
21
21
  static {
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.8.0", i = "@nvidia-elements";
5
+ var r = "2.8.1", 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/input-group2.js CHANGED
@@ -11,7 +11,7 @@ var a = class extends n {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-input-group",
14
- version: "2.8.0"
14
+ version: "2.8.1"
15
15
  };
16
16
  }
17
17
  async connectedCallback() {
package/dist/input/input2.js CHANGED
@@ -14,7 +14,7 @@ var a = r, o = class extends n {
14
14
  static {
15
15
  this.metadata = {
16
16
  tag: "nve-input",
17
- version: "2.8.0"
17
+ version: "2.8.1"
18
18
  };
19
19
  }
20
20
  };
package/dist/internal/controllers/keynav-grid.controller.examples.json CHANGED
@@ -4,7 +4,7 @@
4
4
  {
5
5
  "id": "internal-controllers-keynav-grid.controller-styles",
6
6
  "name": "styles",
7
- "template": "section { display: grid; gap: 4px; grid-template-columns: repeat(10, 50px); } .vertical { grid-template-rows: repeat(10,\n1fr); grid-template-columns: 50px; } .row { display: contents; } button { width: 100%; height: 30px; min-width: 30px;\ndisplay: block; } button[selected] { background: green; color: white; }\n",
7
+ "template": "section { display: grid; gap: 4px; grid-template-columns: repeat(10, 50px); } .vertical { grid-template-rows: repeat(10, 1fr); grid-template-columns: 50px; } .row { display: contents; } button { width: 100%; height:\n30px; min-width: 30px; display: block; } button[selected] { background: green; color: white; }\n",
8
8
  "summary": "",
9
9
  "description": "",
10
10
  "composition": false,
package/dist/internal/controllers/keynav-list.controller.examples.json CHANGED
@@ -4,7 +4,7 @@
4
4
  {
5
5
  "id": "internal-controllers-keynav-list.controller-styles",
6
6
  "name": "styles",
7
- "template": "section { display: grid; gap: 4px; grid-template-columns: repeat(10, 50px); } .vertical { grid-template-rows: repeat(10,\n1fr); grid-template-columns: 50px; } .row { display: contents; } button { width: 100%; height: 30px; min-width: 30px;\ndisplay: block; } button[selected] { background: green; color: white; }\n",
7
+ "template": "section { display: grid; gap: 4px; grid-template-columns: repeat(10, 50px); } .vertical { grid-template-rows: repeat(10, 1fr); grid-template-columns: 50px; } .row { display: contents; } button { width: 100%; height:\n30px; min-width: 30px; display: block; } button[selected] { background: green; color: white; }\n",
8
8
  "summary": "",
9
9
  "description": "",
10
10
  "composition": false,
package/dist/internal/controllers/popover.examples.json CHANGED
@@ -15,7 +15,7 @@
15
15
  {
16
16
  "id": "internal-controllers-popover-nested",
17
17
  "name": "Nested",
18
- "template": "<style>\n #root-inner {\n height: 2000px;\n }\n</style>\n<nve-dialog closable modal>\n <h3 nve-text=\"heading\">Dialog</h3>\n <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n <nve-button id=\"dropdown-btn\">search</nve-button>\n <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n <nve-search rounded>\n <label>search dataset</label>\n <nve-icon-button\n id=\"tooltip-btn\"\n icon-name=\"information-circle\"\n container=\"flat\"\n aria-label=\"more details\"\n slot=\"label\"\n ></nve-icon-button>\n <input type=\"search\" placeholder=\"search\" />\n </nve-search>\n <nve-tooltip anchor=\"tooltip-btn\" position=\"top\">hello there</nve-tooltip>\n </nve-dropdown>\n</nve-dialog>\n<nve-notification closable position=\"bottom\" alignment=\"end\">\n <h3 nve-text=\"label\">notification</h3>\n <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
18
+ "template": "<style>\n #root-inner {\n height: 2000px;\n }\n</style>\n<nve-dialog closable modal>\n <h3 nve-text=\"heading\">Dialog</h3>\n <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n <nve-button id=\"dropdown-btn\">search</nve-button>\n <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n <nve-search rounded>\n <label>search dataset</label>\n <nve-icon-button id=\"tooltip-btn\" icon-name=\"information-circle\" container=\"flat\" aria-label=\"more details\" slot=\"label\"></nve-icon-button>\n <input type=\"search\" placeholder=\"search\" />\n </nve-search>\n <nve-tooltip anchor=\"tooltip-btn\" position=\"top\">hello there</nve-tooltip>\n </nve-dropdown>\n</nve-dialog>\n<nve-notification closable position=\"bottom\" alignment=\"end\">\n <h3 nve-text=\"label\">notification</h3>\n <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
19
19
  "summary": "Nested popovers within dialogs and notifications, with proper layering and stacking order.",
20
20
  "description": "",
21
21
  "composition": true,
@@ -46,7 +46,7 @@
46
46
  {
47
47
  "id": "internal-controllers-popover-legacy-interactive",
48
48
  "name": "LegacyInteractive",
49
- "template": "<div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n <nve-tooltip trigger=\"tooltip-btn\" behavior-trigger position=\"top\" hidden>hello there</nve-tooltip>\n <nve-button id=\"tooltip-btn\">tooltip</nve-button>\n <nve-button id=\"toast-btn\">toast</nve-button>\n <nve-toast trigger=\"toast-btn\" behavior-trigger position=\"top\" close-timeout=\"1500\" hidden>copied!</nve-toast>\n <nve-button id=\"drawer-btn\" size=\"sm\">drawer</nve-button>\n <nve-drawer trigger=\"drawer-btn\" behavior-trigger hidden closable modal>\n <nve-drawer-header>\n <h3 nve-text=\"heading semibold sm\">Title</h3>\n </nve-drawer-header>\n <p nve-text=\"body\">some text content in a drawer</p>\n </nve-drawer>\n <nve-button id=\"dropdown-btn\">dropdown</nve-button>\n <nve-dropdown trigger=\"dropdown-btn\" behavior-trigger closable hidden>\n <h3 nve-text=\"heading\">Title</h3>\n <p nve-text=\"body\">some text content in a dropdown</p>\n </nve-dropdown>\n <nve-button id=\"dialog-btn\">dialog</nve-button>\n <nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n <h3 nve-text=\"heading\">Title</h3>\n <p nve-text=\"body\">some text content in a closable dialog</p>\n </nve-dialog>\n <nve-button id=\"notification-btn\">notification snackbar</nve-button>\n <nve-notification\n trigger=\"notification-btn\"\n behavior-trigger\n hidden\n closable\n position=\"bottom\"\n alignment=\"end\"\n close-timeout=\"2000\"\n >\n <h3 nve-text=\"label\">notification</h3>\n <p nve-text=\"body\">some text content in a notification</p>\n </nve-notification>\n</div>\n",
49
+ "template": "<div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n <nve-tooltip trigger=\"tooltip-btn\" behavior-trigger position=\"top\" hidden>hello there</nve-tooltip>\n <nve-button id=\"tooltip-btn\">tooltip</nve-button>\n <nve-button id=\"toast-btn\">toast</nve-button>\n <nve-toast trigger=\"toast-btn\" behavior-trigger position=\"top\" close-timeout=\"1500\" hidden>copied!</nve-toast>\n <nve-button id=\"drawer-btn\" size=\"sm\">drawer</nve-button>\n <nve-drawer trigger=\"drawer-btn\" behavior-trigger hidden closable modal>\n <nve-drawer-header>\n <h3 nve-text=\"heading semibold sm\">Title</h3>\n </nve-drawer-header>\n <p nve-text=\"body\">some text content in a drawer</p>\n </nve-drawer>\n <nve-button id=\"dropdown-btn\">dropdown</nve-button>\n <nve-dropdown trigger=\"dropdown-btn\" behavior-trigger closable hidden>\n <h3 nve-text=\"heading\">Title</h3>\n <p nve-text=\"body\">some text content in a dropdown</p>\n </nve-dropdown>\n <nve-button id=\"dialog-btn\">dialog</nve-button>\n <nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n <h3 nve-text=\"heading\">Title</h3>\n <p nve-text=\"body\">some text content in a closable dialog</p>\n </nve-dialog>\n <nve-button id=\"notification-btn\">notification snackbar</nve-button>\n <nve-notification trigger=\"notification-btn\" behavior-trigger hidden closable position=\"bottom\" alignment=\"end\" close-timeout=\"2000\">\n <h3 nve-text=\"label\">notification</h3>\n <p nve-text=\"body\">some text content in a notification</p>\n </nve-notification>\n</div>\n",
50
50
  "summary": "Legacy implementation showing all popover types using the older trigger/behavior-trigger API for backward compatibility.",
51
51
  "description": "",
52
52
  "deprecated": true,
package/dist/internal/services/global.service.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.8.0"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.8.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)}`);
22
+ }, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.8.1"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.8.1"] = 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/logo.examples.json CHANGED
@@ -45,7 +45,7 @@
45
45
  {
46
46
  "id": "logo-light-theme",
47
47
  "name": "LightTheme",
48
- "template": "<div\n nve-theme=\"root light\"\n nve-layout=\"row gap:xs align:wrap pad:sm\"\n style=\"background: var(--nve-sys-layer-container-background) !important\"\n>\n <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n",
48
+ "template": "<div nve-theme=\"root light\" nve-layout=\"row gap:xs align:wrap pad:sm\" style=\"background: var(--nve-sys-layer-container-background) !important\">\n <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n",
49
49
  "summary": "Logo colors optimized for light theme backgrounds. Ensures proper contrast and visibility when used in light mode interfaces.",
50
50
  "description": "",
51
51
  "composition": false,
package/dist/logo/logo2.js CHANGED
@@ -12,7 +12,7 @@ var c = class extends a {
12
12
  static {
13
13
  this.metadata = {
14
14
  tag: "nve-logo",
15
- version: "2.8.0"
15
+ version: "2.8.1"
16
16
  };
17
17
  }
18
18
  render() {
package/dist/menu/menu-item2.js CHANGED
@@ -13,7 +13,7 @@ var c = class extends s(i) {
13
13
  static {
14
14
  this.metadata = {
15
15
  tag: "nve-menu-item",
16
- version: "2.8.0",
16
+ version: "2.8.1",
17
17
  parents: ["nve-menu"]
18
18
  };
19
19
  }
package/dist/menu/menu.examples.js.map 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/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 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 icons to add visual context and improve usability.\n */\nexport const Icons = {\n render: () => html`\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-menu-item><nve-icon name=\"logout\"></nve-icon> logout</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 name=\"person\"></nve-icon><a href=\"#\">profile</a></nve-menu-item>\n <nve-menu-item><nve-icon name=\"gear\"></nve-icon> <a href=\"#\">settings</a></nve-menu-item>\n <nve-menu-item><nve-icon name=\"star\"></nve-icon> <a href=\"#\">favorites</a></nve-menu-item>\n <nve-menu-item><nve-icon 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><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 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>\n <nve-logo slot=\"prefix\" size=\"sm\">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>\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 </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>\n <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n </nve-page-header>\n <nve-page-panel slot=\"left\" expanded style=\"max-width:280px\">\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>\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 </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/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 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 icons to add visual context and improve usability.\n */\nexport const Icons = {\n render: () => html`\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-menu-item><nve-icon name=\"logout\"></nve-icon> logout</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 name=\"person\"></nve-icon><a href=\"#\">profile</a></nve-menu-item>\n <nve-menu-item><nve-icon name=\"gear\"></nve-icon> <a href=\"#\">settings</a></nve-menu-item>\n <nve-menu-item><nve-icon name=\"star\"></nve-icon> <a href=\"#\">favorites</a></nve-menu-item>\n <nve-menu-item><nve-icon 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><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 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\">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>\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 </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\">NV</nve-logo>\n <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n </nve-page-header>\n <nve-page-panel slot=\"left\" expanded style=\"max-width:280px\">\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>\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 </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"}
package/dist/menu/menu.examples.json CHANGED
@@ -114,7 +114,7 @@
114
114
  {
115
115
  "id": "menu-vertical-navigation-drawer",
116
116
  "name": "VerticalNavigationDrawer",
117
- "template": "<nve-page>\n <nve-page-header>\n <nve-logo slot=\"prefix\" size=\"sm\">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>\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 </nve-drawer-content>\n </nve-drawer>\n</nve-page>\n",
117
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\">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>\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 </nve-drawer-content>\n </nve-drawer>\n</nve-page>\n",
118
118
  "summary": "Use a navigation drawer to overlay page content for out-of-context navigation.",
119
119
  "description": "",
120
120
  "composition": true,
@@ -125,7 +125,7 @@
125
125
  {
126
126
  "id": "menu-vertical-navigation-panel",
127
127
  "name": "VerticalNavigationPanel",
128
- "template": "<nve-page>\n <nve-page-header>\n <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n </nve-page-header>\n <nve-page-panel slot=\"left\" expanded style=\"max-width: 280px\">\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>\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 </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",
128
+ "template": "<nve-page>\n <nve-page-header slot=\"header\">\n <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n </nve-page-header>\n <nve-page-panel slot=\"left\" expanded style=\"max-width: 280px\">\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>\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 </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",
129
129
  "summary": "Use an inline navigation panel to push page content aside when navigation is contextual to the page.",
130
130
  "description": "",
131
131
  "composition": true,
@@ -136,7 +136,7 @@
136
136
  {
137
137
  "id": "menu-item-tooltip",
138
138
  "name": "ItemTooltip",
139
- "template": "<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\"\n >This is a warning tooltip</nve-tooltip\n >\n </nve-menu-item>\n <nve-menu-item>item 3</nve-menu-item>\n</nve-menu>\n",
139
+ "template": "<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",
140
140
  "summary": "Use a tooltip on a menu item to provide extra context and warnings.",
141
141
  "description": "",
142
142
  "composition": true,
@@ -148,7 +148,7 @@
148
148
  {
149
149
  "id": "menu-danger-status",
150
150
  "name": "DangerStatus",
151
- "template": "<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\"\n >icon right <nve-icon id=\"warning-icon\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon\n ></nve-menu-item>\n</nve-menu>\n",
151
+ "template": "<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",
152
152
  "summary": "Menu items with danger status styling for destructive actions like delete or logout operations.",
153
153
  "description": "",
154
154
  "composition": false,
package/dist/menu/menu2.js CHANGED
@@ -16,7 +16,7 @@ var d = class extends c {
16
16
  static {
17
17
  this.metadata = {
18
18
  tag: "nve-menu",
19
- version: "2.8.0",
19
+ version: "2.8.1",
20
20
  children: ["nve-menu-item", "nve-divider"]
21
21
  };
22
22
  }
package/dist/month/month2.js CHANGED
@@ -19,7 +19,7 @@ var l = class extends r {
19
19
  static {
20
20
  this.metadata = {
21
21
  tag: "nve-month",
22
- version: "2.8.0"
22
+ version: "2.8.1"
23
23
  };
24
24
  }
25
25
  static {
package/dist/notification/notification-group2.js CHANGED
@@ -20,7 +20,7 @@ var l = class extends o {
20
20
  static {
21
21
  this.metadata = {
22
22
  tag: "nve-notification-group",
23
- version: "2.8.0",
23
+ version: "2.8.1",
24
24
  children: ["nve-notification"]
25
25
  };
26
26
  }
package/dist/notification/notification.examples.json CHANGED
@@ -45,7 +45,7 @@
45
45
  {
46
46
  "id": "notification-content-wrap",
47
47
  "name": "ContentWrap",
48
- "template": "<nve-notification position=\"center\">\n <h3 nve-text=\"label\">Notification</h3>\n <p nve-text=\"body\" style=\"width: 230px\">\n some text content in a notification with some really long text in it that just keeps going...\n </p>\n</nve-notification>\n",
48
+ "template": "<nve-notification position=\"center\">\n <h3 nve-text=\"label\">Notification</h3>\n <p nve-text=\"body\" style=\"width: 230px\">some text content in a notification with some really long text in it that just keeps going...</p>\n</nve-notification>\n",
49
49
  "summary": "Notification with text wrapping for longer content. Use when notification messages exceed single-line length, but keep content concise for better readability and user comprehension.",
50
50
  "description": "",
51
51
  "composition": false,
@@ -67,7 +67,7 @@
67
67
  {
68
68
  "id": "notification-interactive-group",
69
69
  "name": "InteractiveGroup",
70
- "template": "<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-button>generate</nve-button>\n<script type=\"module\">\n const button = document.querySelector(\"nve-button\");\n button.addEventListener(\"click\", () => {\n const notification = document.createElement(\"nve-notification\");\n notification.closable = true;\n notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n notification.innerHTML =\n '<h3 nve-text=\"label\">' +\n (notification.status ?? \"default\") +\n '</h3><p nve-text=\"body\">some text content in a notification</p>';\n notification.closeTimeout = 1000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n notification.position = \"bottom\";\n notification.alignment = \"end\";\n document.querySelector(\"nve-notification-group\").prepend(notification);\n });\n</script>\n",
70
+ "template": "<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-button>generate</nve-button>\n<script type=\"module\">\n const button = document.querySelector(\"nve-button\");\n button.addEventListener(\"click\", () => {\n const notification = document.createElement(\"nve-notification\");\n notification.closable = true;\n notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n notification.innerHTML = '<h3 nve-text=\"label\">' + (notification.status ?? \"default\") + '</h3><p nve-text=\"body\">some text content in a notification</p>';\n notification.closeTimeout = 1000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n notification.position = \"bottom\";\n notification.alignment = \"end\";\n document.querySelector(\"nve-notification-group\").prepend(notification);\n });\n</script>\n",
71
71
  "summary": "Dynamic notification group with programmatic creation and stacking. Perfect for toast-style notifications generated by user actions or system events, with progressive timeout and automatic removal patterns for managing many notifications.",
72
72
  "description": "",
73
73
  "composition": false,
@@ -140,7 +140,7 @@
140
140
  {
141
141
  "id": "notification-layers",
142
142
  "name": "Layers",
143
- "template": "<nve-button>Notification</nve-button>\n<nve-button popovertarget=\"dialog\">Dialog</nve-button>\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-dialog id=\"dialog\" modal closable>\n <nve-dialog-header>\n <h3 nve-text=\"heading semibold\">Notification</h3>\n </nve-dialog-header>\n <p nve-text=\"body\">This should not cause the dialog to close</p>\n</nve-dialog>\n<script type=\"module\">\n const button = document.querySelector(\"nve-button\");\n button.addEventListener(\"click\", () => {\n const notification = document.createElement(\"nve-notification\");\n notification.closable = true;\n notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n notification.innerHTML =\n '<h3 nve-text=\"label\">' +\n (notification.status ?? \"default\") +\n '</h3><p nve-text=\"body\">some text content in a notification</p>';\n notification.closeTimeout = 3000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n notification.position = \"bottom\";\n notification.alignment = \"end\";\n document.querySelector(\"nve-notification-group\").prepend(notification);\n });\n</script>\n",
143
+ "template": "<nve-button>Notification</nve-button>\n<nve-button popovertarget=\"dialog\">Dialog</nve-button>\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-dialog id=\"dialog\" modal closable>\n <nve-dialog-header>\n <h3 nve-text=\"heading semibold\">Notification</h3>\n </nve-dialog-header>\n <p nve-text=\"body\">This should not cause the dialog to close</p>\n</nve-dialog>\n<script type=\"module\">\n const button = document.querySelector(\"nve-button\");\n button.addEventListener(\"click\", () => {\n const notification = document.createElement(\"nve-notification\");\n notification.closable = true;\n notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n notification.innerHTML = '<h3 nve-text=\"label\">' + (notification.status ?? \"default\") + '</h3><p nve-text=\"body\">some text content in a notification</p>';\n notification.closeTimeout = 3000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n notification.position = \"bottom\";\n notification.alignment = \"end\";\n document.querySelector(\"nve-notification-group\").prepend(notification);\n });\n</script>\n",
144
144
  "summary": "Notification layering with modal dialogs for proper stacking context. Ensures notifications appear above dialogs without interfering with modal interactions, crucial for complex UI layering scenarios.",
145
145
  "description": "",
146
146
  "composition": true,
package/dist/notification/notification2.js CHANGED
@@ -34,7 +34,7 @@ var m = class extends d {
34
34
  static {
35
35
  this.metadata = {
36
36
  tag: "nve-notification",
37
- version: "2.8.0"
37
+ version: "2.8.1"
38
38
  };
39
39
  }
40
40
  static {
package/dist/page/page-panel/page-panel-content2.js CHANGED
@@ -9,7 +9,7 @@ var i = class extends n {
9
9
  static {
10
10
  this.metadata = {
11
11
  tag: "nve-page-panel-content",
12
- version: "2.8.0"
12
+ version: "2.8.1"
13
13
  };
14
14
  }
15
15
  render() {
package/dist/page/page-panel/page-panel-footer2.js CHANGED
@@ -14,7 +14,7 @@ var o = class extends i {
14
14
  static {
15
15
  this.metadata = {
16
16
  tag: "nve-page-panel-footer",
17
- version: "2.8.0"
17
+ version: "2.8.1"
18
18
  };
19
19
  }
20
20
  render() {
package/dist/page/page-panel/page-panel-header2.js CHANGED
@@ -14,7 +14,7 @@ var o = class extends i {
14
14
  static {
15
15
  this.metadata = {
16
16
  tag: "nve-page-panel-header",
17
- version: "2.8.0"
17
+ version: "2.8.1"
18
18
  };
19
19
  }
20
20
  render() {
package/dist/page/page-panel/page-panel2.js CHANGED
@@ -18,7 +18,7 @@ var f = class extends l {
18
18
  static {
19
19
  this.metadata = {
20
20
  tag: "nve-page-panel",
21
- version: "2.8.0",
21
+ version: "2.8.1",
22
22
  parents: ["nve-page"]
23
23
  };
24
24
  }