@nvidia-elements/core 2.12.0 → 2.12.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 (174) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/accordion/accordion.examples.json +1 -1
  3. package/dist/accordion/accordion2.js +4 -4
  4. package/dist/alert/alert-group2.js +1 -1
  5. package/dist/alert/alert.examples.json +6 -6
  6. package/dist/alert/alert2.js +1 -1
  7. package/dist/avatar/avatar-group2.js +1 -1
  8. package/dist/avatar/avatar2.js +1 -1
  9. package/dist/badge/badge2.js +1 -1
  10. package/dist/breadcrumb/breadcrumb2.js +1 -1
  11. package/dist/bundles/index.d.ts +467 -467
  12. package/dist/bundles/index.js +1 -1
  13. package/dist/button/button.examples.json +3 -3
  14. package/dist/button/button2.js +1 -1
  15. package/dist/button-group/button-group2.js +1 -1
  16. package/dist/card/card.examples.json +2 -2
  17. package/dist/card/card2.js +4 -4
  18. package/dist/chat-message/chat-message.examples.json +1 -1
  19. package/dist/chat-message/chat-message2.js +1 -1
  20. package/dist/checkbox/checkbox-group2.js +1 -1
  21. package/dist/checkbox/checkbox.examples.json +5 -5
  22. package/dist/checkbox/checkbox2.js +1 -1
  23. package/dist/color/color.examples.json +2 -2
  24. package/dist/color/color2.js +1 -1
  25. package/dist/combobox/combobox.examples.json +7 -7
  26. package/dist/combobox/combobox2.js +1 -1
  27. package/dist/copy-button/copy-button.examples.json +1 -1
  28. package/dist/copy-button/copy-button2.js +1 -1
  29. package/dist/custom-elements.json +28 -14
  30. package/dist/data.snippets.json +18 -18
  31. package/dist/date/date.examples.json +3 -3
  32. package/dist/date/date2.js +1 -1
  33. package/dist/datetime/datetime.examples.json +2 -2
  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 +7 -7
  38. package/dist/dialog/dialog2.js +1 -1
  39. package/dist/divider/divider2.js +1 -1
  40. package/dist/dot/dot2.js +1 -1
  41. package/dist/drawer/drawer-content2.js +1 -1
  42. package/dist/drawer/drawer-footer2.js +1 -1
  43. package/dist/drawer/drawer-header2.js +1 -1
  44. package/dist/drawer/drawer.examples.json +5 -5
  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/dropdown.examples.json +3 -3
  49. package/dist/dropdown/dropdown2.js +1 -1
  50. package/dist/dropdown-group/dropdown-group.js +1 -1
  51. package/dist/dropzone/dropzone.examples.json +2 -2
  52. package/dist/dropzone/dropzone2.js +1 -1
  53. package/dist/file/file.examples.json +2 -2
  54. package/dist/file/file2.js +1 -1
  55. package/dist/format-bytes/format-bytes2.js +1 -1
  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-truncate2.js +1 -1
  60. package/dist/forms/control/control.examples.json +3 -3
  61. package/dist/forms/control/control2.js +1 -1
  62. package/dist/forms/control-group/control-group2.js +1 -1
  63. package/dist/forms/control-message/control-message2.js +1 -1
  64. package/dist/forms/forms.examples.json +7 -7
  65. package/dist/forms/validation.examples.json +4 -4
  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.json +6 -6
  72. package/dist/grid/grid2.js +1 -1
  73. package/dist/grid/header/header2.js +1 -1
  74. package/dist/grid/placeholder/placeholder2.js +1 -1
  75. package/dist/grid/row/row2.js +1 -1
  76. package/dist/icon/icon.examples.json +1 -1
  77. package/dist/icon/icon2.js +2 -2
  78. package/dist/icon/icons.d.ts +2 -1
  79. package/dist/icon/icons.js.map +1 -1
  80. package/dist/icon-button/icon-button2.js +1 -1
  81. package/dist/index.js +1 -1
  82. package/dist/input/input-group.examples.json +3 -3
  83. package/dist/input/input-group2.js +1 -1
  84. package/dist/input/input.examples.json +2 -2
  85. package/dist/input/input2.js +1 -1
  86. package/dist/internal/controllers/gesture.controller.examples.json +1 -1
  87. package/dist/internal/controllers/popover.examples.json +5 -5
  88. package/dist/internal/controllers/type-popover.controller.examples.json +1 -1
  89. package/dist/internal/services/global.service.js +1 -1
  90. package/dist/internal/types/icons.d.ts +1 -0
  91. package/dist/internal/types/index.d.ts +1 -1
  92. package/dist/internal/types/index.js.map +1 -1
  93. package/dist/internal/utils/dom.js +18 -10
  94. package/dist/internal/utils/dom.js.map +1 -1
  95. package/dist/logo/logo2.js +1 -1
  96. package/dist/menu/menu-group2.js +1 -1
  97. package/dist/menu/menu-item2.js +1 -1
  98. package/dist/menu/menu.examples.json +1 -1
  99. package/dist/menu/menu2.js +1 -1
  100. package/dist/month/month.examples.json +2 -2
  101. package/dist/month/month2.js +1 -1
  102. package/dist/notification/notification-group2.js +1 -1
  103. package/dist/notification/notification.examples.json +5 -5
  104. package/dist/notification/notification2.js +1 -1
  105. package/dist/page/page-panel/page-panel-content2.js +1 -1
  106. package/dist/page/page-panel/page-panel-footer2.js +1 -1
  107. package/dist/page/page-panel/page-panel-header2.js +1 -1
  108. package/dist/page/page-panel/page-panel2.js +1 -1
  109. package/dist/page/page.examples.json +25 -25
  110. package/dist/page/page2.js +1 -1
  111. package/dist/page-header/page-header2.js +1 -1
  112. package/dist/page-loader/page-loader.examples.json +1 -1
  113. package/dist/page-loader/page-loader2.js +1 -1
  114. package/dist/pagination/pagination.examples.json +2 -2
  115. package/dist/pagination/pagination2.js +1 -1
  116. package/dist/panel/panel.examples.json +7 -7
  117. package/dist/panel/panel2.js +4 -4
  118. package/dist/password/password.examples.json +2 -2
  119. package/dist/password/password2.js +1 -1
  120. package/dist/preferences-input/preferences-input.examples.json +1 -1
  121. package/dist/preferences-input/preferences-input2.js +1 -1
  122. package/dist/progress-bar/progress-bar2.js +1 -1
  123. package/dist/progress-ring/progress-ring.examples.json +5 -5
  124. package/dist/progress-ring/progress-ring2.js +1 -1
  125. package/dist/progressive-filter-chip/progressive-filter-chip.examples.json +1 -1
  126. package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
  127. package/dist/pulse/pulse2.js +1 -1
  128. package/dist/radio/radio-group2.js +1 -1
  129. package/dist/radio/radio.examples.json +5 -5
  130. package/dist/radio/radio2.js +1 -1
  131. package/dist/range/range.examples.json +2 -2
  132. package/dist/range/range2.js +1 -1
  133. package/dist/resize-handle/resize-handle.examples.json +2 -2
  134. package/dist/resize-handle/resize-handle2.js +1 -1
  135. package/dist/search/search.examples.json +2 -2
  136. package/dist/search/search2.js +1 -1
  137. package/dist/select/select.examples.json +8 -8
  138. package/dist/select/select2.js +1 -1
  139. package/dist/skeleton/skeleton2.js +1 -1
  140. package/dist/sort-button/sort-button2.js +1 -1
  141. package/dist/sparkline/sparkline2.js +1 -1
  142. package/dist/star-rating/star-rating2.js +1 -1
  143. package/dist/steps/steps2.js +2 -2
  144. package/dist/switch/switch-group2.js +1 -1
  145. package/dist/switch/switch.examples.json +5 -5
  146. package/dist/switch/switch2.js +1 -1
  147. package/dist/tabs/tabs-group2.js +1 -1
  148. package/dist/tabs/tabs.examples.json +1 -1
  149. package/dist/tabs/tabs2.js +2 -2
  150. package/dist/tag/tag2.js +1 -1
  151. package/dist/textarea/textarea.examples.json +2 -2
  152. package/dist/textarea/textarea2.js +1 -1
  153. package/dist/time/time.examples.json +2 -2
  154. package/dist/time/time2.js +1 -1
  155. package/dist/toast/toast.examples.json +1 -1
  156. package/dist/toast/toast2.js +1 -1
  157. package/dist/toggletip/toggletip-footer2.js +1 -1
  158. package/dist/toggletip/toggletip-header2.js +1 -1
  159. package/dist/toggletip/toggletip.examples.json +5 -5
  160. package/dist/toggletip/toggletip2.js +1 -1
  161. package/dist/toolbar/toolbar.examples.json +4 -4
  162. package/dist/toolbar/toolbar2.js +1 -1
  163. package/dist/tooltip/tooltip.examples.json +6 -6
  164. package/dist/tooltip/tooltip2.js +1 -1
  165. package/dist/tree/tree-node2.js +1 -1
  166. package/dist/tree/tree.examples.json +2 -2
  167. package/dist/tree/tree2.js +1 -1
  168. package/dist/viewport/viewport-gridlines2.js +1 -1
  169. package/dist/viewport/viewport-minimap2.js +1 -1
  170. package/dist/viewport/viewport.examples.json +9 -9
  171. package/dist/viewport/viewport2.js +1 -1
  172. package/dist/week/week.examples.json +3 -3
  173. package/dist/week/week2.js +1 -1
  174. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## [2.12.1](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.12.0...@nvidia-elements/core-v2.12.1) (2026-10-07)
2
+
3
+ ### Bug Fixes
4
+
5
+ * **ci:** preserve authored contents in example metadata ([0ea8618](https://github.com/NVIDIA/elements/commit/0ea86182b4c654c4d8301bad7fbc06f0d3b11187))
6
+ * **core:** preserve accessors during property observation ([37c137d](https://github.com/NVIDIA/elements/commit/37c137d305273cbf4382908cd00d0ca2dd273036))
7
+ * **docs:** preserve example content through html processing ([7055d3c](https://github.com/NVIDIA/elements/commit/7055d3ce12a10b0e494da9c73c8f34fce62b9884))
8
+ * **docs:** preserve example source during development reloads ([162082b](https://github.com/NVIDIA/elements/commit/162082b8bead05283646ae68ad3ecd391be8c962))
9
+ * **docs:** prevent runtime errors when loading examples pages in dev ([1d57c69](https://github.com/NVIDIA/elements/commit/1d57c690819c009a1abac037b00f631d18db076a))
10
+
1
11
  ## [2.12.0](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.11.2...@nvidia-elements/core-v2.12.0) (2026-10-05)
2
12
 
3
13
  ### Features
@@ -52,7 +52,7 @@
52
52
  {
53
53
  "id": "accordion-custom-icon-button",
54
54
  "name": "CustomIconButton",
55
- "template": "<nve-accordion id=\"custom-icon-button-accordion\">\n <nve-icon-button slot=\"icon-button\" icon-name=\"add\" size=\"sm\" container=\"flat\"></nve-icon-button>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Additional Resources</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n<script type=\"module\">\n const accordion = document.querySelector(\"#custom-icon-button-accordion\");\n const accordionHeader = accordion.querySelector(\"nve-accordion-header\");\n const iconButton = accordion.querySelector(\"nve-icon-button\");\n accordionHeader.addEventListener(\"click\", () => toggle());\n iconButton.addEventListener(\"click\", () => toggle());\n function toggle() {\n accordion.expanded = !accordion.expanded;\n iconButton.iconName = accordion.expanded ? \"minus\" : \"add\";\n }\n</script>\n",
55
+ "template": "<nve-accordion id=\"custom-icon-button-accordion\">\n <nve-icon-button slot=\"icon-button\" icon-name=\"add\" size=\"sm\" container=\"flat\"></nve-icon-button>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Additional Resources</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n<script type=\"module\">\n const accordion = document.querySelector(\"#custom-icon-button-accordion\");\n const accordionHeader = accordion.querySelector(\"nve-accordion-header\");\n const iconButton = accordion.querySelector(\"nve-icon-button\");\n accordionHeader.addEventListener(\"click\", () => toggle());\n iconButton.addEventListener(\"click\", () => toggle());\n\n function toggle() {\n accordion.expanded = !accordion.expanded;\n iconButton.iconName = accordion.expanded ? \"minus\" : \"add\";\n }\n</script>\n",
56
56
  "summary": "Accordion with custom icon button that changes based on state. Use custom icons to provide more semantic indicators (e.g., plus/minus for add/remove patterns, chevron for expand/collapse).",
57
57
  "description": "",
58
58
  "composition": false,
@@ -28,7 +28,7 @@ var b = class extends g {
28
28
  static {
29
29
  this.metadata = {
30
30
  tag: "nve-accordion-header",
31
- version: "2.12.0"
31
+ version: "2.12.1"
32
32
  };
33
33
  }
34
34
  render() {
@@ -46,7 +46,7 @@ var x = class extends g {
46
46
  static {
47
47
  this.metadata = {
48
48
  tag: "nve-accordion-content",
49
- version: "2.12.0"
49
+ version: "2.12.1"
50
50
  };
51
51
  }
52
52
  render() {
@@ -62,7 +62,7 @@ var x = class extends g {
62
62
  static {
63
63
  this.metadata = {
64
64
  tag: "nve-accordion",
65
- version: "2.12.0",
65
+ version: "2.12.1",
66
66
  children: [
67
67
  b.metadata.tag,
68
68
  x.metadata.tag,
@@ -120,7 +120,7 @@ var C = class extends g {
120
120
  static {
121
121
  this.metadata = {
122
122
  tag: "nve-accordion-group",
123
- version: "2.12.0",
123
+ version: "2.12.1",
124
124
  children: [S.metadata.tag]
125
125
  };
126
126
  }
@@ -19,7 +19,7 @@ var f = class extends c {
19
19
  static {
20
20
  this.metadata = {
21
21
  tag: "nve-alert-group",
22
- version: "2.12.0",
22
+ version: "2.12.1",
23
23
  children: [o.metadata.tag]
24
24
  };
25
25
  }
@@ -25,7 +25,7 @@
25
25
  {
26
26
  "id": "alert-status",
27
27
  "name": "Status",
28
- "template": "<div nve-layout=\"column gap:md\">\n <nve-alert>Standard</nve-alert>\n <nve-alert status=\"accent\">Accent</nve-alert>\n <nve-alert status=\"warning\">Warning</nve-alert>\n <nve-alert status=\"success\">Success</nve-alert>\n <nve-alert status=\"danger\">Danger</nve-alert>\n <nve-alert status=\"scheduled\">Scheduled</nve-alert>\n <nve-alert status=\"queued\">Queued</nve-alert>\n <nve-alert status=\"finished\">Finished</nve-alert>\n <nve-alert status=\"failed\">Failed</nve-alert>\n <nve-alert status=\"unknown\">Unknown</nve-alert>\n <nve-alert status=\"pending\">Pending</nve-alert>\n <nve-alert status=\"starting\">Starting</nve-alert>\n <nve-alert status=\"running\">Running</nve-alert>\n <nve-alert status=\"restarting\">Restarting</nve-alert>\n <nve-alert status=\"stopping\">Stopping</nve-alert>\n <nve-alert status=\"ignored\">Ignored</nve-alert>\n</div>\n",
28
+ "template": "<div nve-layout=\"column gap:md\">\n <nve-alert>Standard</nve-alert>\n <nve-alert status=\"accent\">Accent</nve-alert>\n <nve-alert status=\"warning\">Warning</nve-alert>\n <nve-alert status=\"success\">Success</nve-alert>\n <nve-alert status=\"danger\">Danger</nve-alert>\n\n <nve-alert status=\"scheduled\">Scheduled</nve-alert>\n <nve-alert status=\"queued\">Queued</nve-alert>\n <nve-alert status=\"finished\">Finished</nve-alert>\n <nve-alert status=\"failed\">Failed</nve-alert>\n <nve-alert status=\"unknown\">Unknown</nve-alert>\n <nve-alert status=\"pending\">Pending</nve-alert>\n <nve-alert status=\"starting\">Starting</nve-alert>\n <nve-alert status=\"running\">Running</nve-alert>\n <nve-alert status=\"restarting\">Restarting</nve-alert>\n <nve-alert status=\"stopping\">Stopping</nve-alert>\n <nve-alert status=\"ignored\">Ignored</nve-alert>\n</div>\n",
29
29
  "summary": "Extended status variants for workflow and process state communication. Use these specialized states (scheduled, queued, running, failed, etc.) in dashboards, build pipelines, or task management interfaces where users need detailed visibility into process lifecycle stages.",
30
30
  "description": "",
31
31
  "composition": false,
@@ -45,7 +45,7 @@
45
45
  {
46
46
  "id": "alert-group-status",
47
47
  "name": "GroupStatus",
48
- "template": "<div nve-layout=\"column gap:md\">\n <nve-alert-group>\n <nve-alert>Standard</nve-alert>\n <nve-alert>Standard</nve-alert>\n </nve-alert-group>\n <nve-alert-group status=\"accent\">\n <nve-alert>Accent</nve-alert>\n <nve-alert>Accent</nve-alert>\n </nve-alert-group>\n <nve-alert-group status=\"warning\">\n <nve-alert>Warning</nve-alert>\n <nve-alert>Warning</nve-alert>\n </nve-alert-group>\n <nve-alert-group status=\"success\">\n <nve-alert>Success</nve-alert>\n <nve-alert>Success</nve-alert>\n </nve-alert-group>\n <nve-alert-group status=\"danger\">\n <nve-alert>Danger</nve-alert>\n <nve-alert>Danger</nve-alert>\n </nve-alert-group>\n</div>\n",
48
+ "template": "<div nve-layout=\"column gap:md\">\n <nve-alert-group>\n <nve-alert>Standard</nve-alert>\n <nve-alert>Standard</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group status=\"accent\">\n <nve-alert>Accent</nve-alert>\n <nve-alert>Accent</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group status=\"warning\">\n <nve-alert>Warning</nve-alert>\n <nve-alert>Warning</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group status=\"success\">\n <nve-alert>Success</nve-alert>\n <nve-alert>Success</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group status=\"danger\">\n <nve-alert>Danger</nve-alert>\n <nve-alert>Danger</nve-alert>\n </nve-alert-group>\n</div>\n",
49
49
  "summary": "Alert groups with inherited status styling for all children. Applying status at the group level ensures visual consistency across related messages, perfect for form validation where many fields share the same error context.",
50
50
  "description": "",
51
51
  "composition": false,
@@ -63,7 +63,7 @@
63
63
  {
64
64
  "id": "alert-closable",
65
65
  "name": "Closable",
66
- "template": "<div nve-layout=\"column gap:md\">\n <nve-alert-group>\n <nve-alert closable>Standard</nve-alert>\n <nve-alert closable>Standard</nve-alert>\n </nve-alert-group>\n <nve-alert-group status=\"accent\">\n <nve-alert closable>Accent</nve-alert>\n <nve-alert closable>Accent</nve-alert>\n </nve-alert-group>\n <nve-alert-group status=\"warning\">\n <nve-alert closable>Warning</nve-alert>\n <nve-alert closable>Warning</nve-alert>\n </nve-alert-group>\n <nve-alert-group status=\"success\">\n <nve-alert closable>Success</nve-alert>\n <nve-alert closable>Success</nve-alert>\n </nve-alert-group>\n <nve-alert-group status=\"danger\">\n <nve-alert closable>Danger</nve-alert>\n <nve-alert closable>Danger</nve-alert>\n </nve-alert-group>\n</div>\n",
66
+ "template": "<div nve-layout=\"column gap:md\">\n <nve-alert-group>\n <nve-alert closable>Standard</nve-alert>\n <nve-alert closable>Standard</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group status=\"accent\">\n <nve-alert closable>Accent</nve-alert>\n <nve-alert closable>Accent</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group status=\"warning\">\n <nve-alert closable>Warning</nve-alert>\n <nve-alert closable>Warning</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group status=\"success\">\n <nve-alert closable>Success</nve-alert>\n <nve-alert closable>Success</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group status=\"danger\">\n <nve-alert closable>Danger</nve-alert>\n <nve-alert closable>Danger</nve-alert>\n </nve-alert-group>\n</div>\n",
67
67
  "summary": "Closable alerts that users can dismiss. Use closable alerts for messages that become irrelevant after reading (like onboarding tips, one-time announcements, or acknowledged warnings), but avoid for critical errors that need to remain visible until resolved.",
68
68
  "description": "",
69
69
  "composition": false,
@@ -81,7 +81,7 @@
81
81
  {
82
82
  "id": "alert-prominence",
83
83
  "name": "Prominence",
84
- "template": "<nve-page document-scroll>\n <nve-alert-group slot=\"header\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable><span slot=\"prefix\">Standard</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n </nve-alert-group>\n <nve-alert-group slot=\"header\" status=\"accent\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable><span slot=\"prefix\">Accent</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n </nve-alert-group>\n <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable><span slot=\"prefix\">Warning</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n </nve-alert-group>\n <nve-alert-group slot=\"header\" status=\"success\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable><span slot=\"prefix\">Success</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n </nve-alert-group>\n <nve-alert-group slot=\"header\" status=\"danger\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable><span slot=\"prefix\">Danger</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n </nve-alert-group>\n</nve-page>\n",
84
+ "template": "<nve-page document-scroll>\n <nve-alert-group slot=\"header\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable><span slot=\"prefix\">Standard</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n </nve-alert-group>\n\n <nve-alert-group slot=\"header\" status=\"accent\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable><span slot=\"prefix\">Accent</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n </nve-alert-group>\n\n <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable><span slot=\"prefix\">Warning</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n </nve-alert-group>\n\n <nve-alert-group slot=\"header\" status=\"success\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable><span slot=\"prefix\">Success</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n </nve-alert-group>\n\n <nve-alert-group slot=\"header\" status=\"danger\" prominence=\"emphasis\" container=\"full\">\n <nve-alert closable><span slot=\"prefix\">Danger</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n </nve-alert-group>\n</nve-page>\n",
85
85
  "summary": "High-prominence alerts with emphasis styling for full-width banners. Use prominence=\"emphasis\" for system-wide announcements like maintenance windows, feature launches, or critical security updates that need max visibility and impact across the entire interface.",
86
86
  "description": "",
87
87
  "composition": false,
@@ -99,7 +99,7 @@
99
99
  {
100
100
  "id": "alert-color",
101
101
  "name": "Color",
102
- "template": "<div nve-layout=\"column gap:md\">\n <nve-alert-group color=\"red-cardinal\">\n <nve-alert>red-cardinal</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"gray-slate\">\n <nve-alert>gray-slate</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"gray-denim\">\n <nve-alert>gray-denim</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"blue-indigo\">\n <nve-alert>blue-indigo</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"blue-cobalt\">\n <nve-alert>blue-cobalt</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"blue-sky\">\n <nve-alert>blue-sky</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"teal-cyan\">\n <nve-alert>teal-cyan</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"green-mint\">\n <nve-alert>green-mint</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"teal-seafoam\">\n <nve-alert>teal-seafoam</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"green-grass\">\n <nve-alert>green-grass</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"yellow-amber\">\n <nve-alert>yellow-amber</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"orange-pumpkin\">\n <nve-alert>orange-pumpkin</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"red-tomato\">\n <nve-alert>red-tomato</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"pink-magenta\">\n <nve-alert>pink-magenta</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"purple-plum\">\n <nve-alert>purple-plum</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"purple-violet\">\n <nve-alert>purple-violet</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"purple-lavender\">\n <nve-alert>purple-lavender</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"pink-rose\">\n <nve-alert>pink-rose</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"green-jade\">\n <nve-alert>green-jade</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"lime-pear\">\n <nve-alert>lime-pear</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"yellow-nova\">\n <nve-alert>yellow-nova</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"brand-green\">\n <nve-alert>brand-green</nve-alert>\n </nve-alert-group>\n</div>\n",
102
+ "template": "<div nve-layout=\"column gap:md\">\n <nve-alert-group color=\"red-cardinal\">\n <nve-alert>red-cardinal</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"gray-slate\">\n <nve-alert>gray-slate</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"gray-denim\">\n <nve-alert>gray-denim</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"blue-indigo\">\n <nve-alert>blue-indigo</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"blue-cobalt\">\n <nve-alert>blue-cobalt</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"blue-sky\">\n <nve-alert>blue-sky</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"teal-cyan\">\n <nve-alert>teal-cyan</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"green-mint\">\n <nve-alert>green-mint</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"teal-seafoam\">\n <nve-alert>teal-seafoam</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"green-grass\">\n <nve-alert>green-grass</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"yellow-amber\">\n <nve-alert>yellow-amber</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"orange-pumpkin\">\n <nve-alert>orange-pumpkin</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"red-tomato\">\n <nve-alert>red-tomato</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"pink-magenta\">\n <nve-alert>pink-magenta</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"purple-plum\">\n <nve-alert>purple-plum</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"purple-violet\">\n <nve-alert>purple-violet</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"purple-lavender\">\n <nve-alert>purple-lavender</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"pink-rose\">\n <nve-alert>pink-rose</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"green-jade\">\n <nve-alert>green-jade</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"lime-pear\">\n <nve-alert>lime-pear</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"yellow-nova\">\n <nve-alert>yellow-nova</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"brand-green\">\n <nve-alert>brand-green</nve-alert>\n </nve-alert-group>\n</div>\n",
103
103
  "summary": "Custom color variants for brand-specific styling or extra visual differentiation beyond standard status colors. Use custom colors when standard semantic colors don't match your use case, such as category labels, team assignments, or brand-specific messaging.",
104
104
  "description": "",
105
105
  "composition": false,
@@ -110,7 +110,7 @@
110
110
  {
111
111
  "id": "alert-custom-color-combinations",
112
112
  "name": "CustomColorCombinations",
113
- "template": "<div nve-layout=\"column gap:md\">\n <nve-alert-group color=\"blue-indigo\">\n <nve-alert closable>Custom <code nve-text=\"code\">color</code> will theme the <code nve-text=\"code\">closable</code> icon.</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"teal-seafoam\">\n <nve-alert>\n Custom <code nve-text=\"code\">color</code> is compatible with <code nve-text=\"code\">actions</code> button.\n <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n </nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"pink-rose\" status=\"accent\">\n <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"pink-rose\" status=\"success\">\n <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"pink-rose\" status=\"warning\">\n <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"pink-rose\" status=\"danger\">\n <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n </nve-alert-group>\n <nve-alert-group color=\"blue-indigo\" status=\"accent\" prominence=\"emphasis\">\n <nve-alert\n >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n alert color.</nve-alert\n >\n </nve-alert-group>\n <nve-alert-group color=\"blue-indigo\" status=\"success\" prominence=\"emphasis\">\n <nve-alert\n >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n alert color.</nve-alert\n >\n </nve-alert-group>\n <nve-alert-group color=\"blue-indigo\" status=\"warning\" prominence=\"emphasis\">\n <nve-alert\n >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n alert color.</nve-alert\n >\n </nve-alert-group>\n <nve-alert-group color=\"blue-indigo\" status=\"danger\" prominence=\"emphasis\">\n <nve-alert\n >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n alert color.</nve-alert\n >\n </nve-alert-group>\n</div>\n",
113
+ "template": "<div nve-layout=\"column gap:md\">\n <nve-alert-group color=\"blue-indigo\">\n <nve-alert closable>Custom <code nve-text=\"code\">color</code> will theme the <code nve-text=\"code\">closable</code> icon.</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"teal-seafoam\">\n <nve-alert>\n Custom <code nve-text=\"code\">color</code> is compatible with <code nve-text=\"code\">actions</code> button.\n <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n </nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"pink-rose\" status=\"accent\">\n <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"pink-rose\" status=\"success\">\n <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"pink-rose\" status=\"warning\">\n <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"pink-rose\" status=\"danger\">\n <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n </nve-alert-group>\n\n <nve-alert-group color=\"blue-indigo\" status=\"accent\" prominence=\"emphasis\">\n <nve-alert\n >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n alert color.</nve-alert\n >\n </nve-alert-group>\n\n <nve-alert-group color=\"blue-indigo\" status=\"success\" prominence=\"emphasis\">\n <nve-alert\n >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n alert color.</nve-alert\n >\n </nve-alert-group>\n\n <nve-alert-group color=\"blue-indigo\" status=\"warning\" prominence=\"emphasis\">\n <nve-alert\n >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n alert color.</nve-alert\n >\n </nve-alert-group>\n\n <nve-alert-group color=\"blue-indigo\" status=\"danger\" prominence=\"emphasis\">\n <nve-alert\n >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n alert color.</nve-alert\n >\n </nve-alert-group>\n</div>\n",
114
114
  "summary": "Custom color combinations with status icons and prominence for advanced theming. Custom colors interact with status icons and emphasis styling, useful for maintaining brand consistency while preserving semantic meaning through status indicators.",
115
115
  "description": "",
116
116
  "composition": false,
@@ -28,7 +28,7 @@ var v = class extends m {
28
28
  static {
29
29
  this.metadata = {
30
30
  tag: "nve-alert",
31
- version: "2.12.0"
31
+ version: "2.12.1"
32
32
  };
33
33
  }
34
34
  static {
@@ -10,7 +10,7 @@ var a = class extends r {
10
10
  static {
11
11
  this.metadata = {
12
12
  tag: "nve-avatar-group",
13
- version: "2.12.0"
13
+ version: "2.12.1"
14
14
  };
15
15
  }
16
16
  render() {
@@ -11,7 +11,7 @@ var s = class extends i {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-avatar",
14
- version: "2.12.0"
14
+ version: "2.12.1"
15
15
  };
16
16
  }
17
17
  render() {
@@ -25,7 +25,7 @@ var g = class extends f {
25
25
  static {
26
26
  this.metadata = {
27
27
  tag: "nve-badge",
28
- version: "2.12.0"
28
+ version: "2.12.1"
29
29
  };
30
30
  }
31
31
  static {
@@ -24,7 +24,7 @@ var m = class extends u {
24
24
  static {
25
25
  this.metadata = {
26
26
  tag: "nve-breadcrumb",
27
- version: "2.12.0"
27
+ version: "2.12.1"
28
28
  };
29
29
  }
30
30
  static {