@nvidia-elements/core 0.0.10 → 0.0.11

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 (191) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/accordion/accordion.examples.json +11 -11
  3. package/dist/accordion/accordion2.js +4 -4
  4. package/dist/alert/alert-group2.js +1 -1
  5. package/dist/alert/alert.examples.json +12 -12
  6. package/dist/alert/alert2.js +1 -1
  7. package/dist/avatar/avatar-group2.js +1 -1
  8. package/dist/avatar/avatar.examples.json +6 -6
  9. package/dist/avatar/avatar2.js +1 -1
  10. package/dist/badge/badge.examples.json +12 -12
  11. package/dist/badge/badge2.js +1 -1
  12. package/dist/breadcrumb/breadcrumb.examples.json +3 -3
  13. package/dist/breadcrumb/breadcrumb2.js +1 -1
  14. package/dist/bundles/index.js +3 -3
  15. package/dist/button/button.examples.json +24 -24
  16. package/dist/button/button2.js +1 -1
  17. package/dist/button-group/button-group.examples.json +11 -11
  18. package/dist/button-group/button-group2.js +1 -1
  19. package/dist/card/card.examples.json +10 -10
  20. package/dist/card/card2.js +4 -4
  21. package/dist/chat-message/chat-message.examples.json +7 -7
  22. package/dist/chat-message/chat-message2.js +1 -1
  23. package/dist/checkbox/checkbox-group2.js +1 -1
  24. package/dist/checkbox/checkbox.examples.json +7 -7
  25. package/dist/checkbox/checkbox2.js +1 -1
  26. package/dist/color/color.examples.json +4 -4
  27. package/dist/color/color2.js +1 -1
  28. package/dist/combobox/combobox.examples.json +24 -24
  29. package/dist/combobox/combobox2.js +1 -1
  30. package/dist/copy-button/copy-button.examples.json +9 -9
  31. package/dist/copy-button/copy-button2.js +1 -1
  32. package/dist/custom-elements.json +13 -71
  33. package/dist/date/date.examples.json +7 -7
  34. package/dist/date/date2.js +1 -1
  35. package/dist/datetime/datetime.examples.json +4 -4
  36. package/dist/datetime/datetime2.js +1 -1
  37. package/dist/dialog/dialog-footer2.js +1 -1
  38. package/dist/dialog/dialog-header2.js +1 -1
  39. package/dist/dialog/dialog.examples.json +21 -21
  40. package/dist/dialog/dialog2.js +1 -1
  41. package/dist/divider/divider.examples.json +5 -5
  42. package/dist/divider/divider2.js +1 -1
  43. package/dist/dot/dot.examples.json +5 -5
  44. package/dist/dot/dot2.js +1 -1
  45. package/dist/drawer/drawer-content2.js +1 -1
  46. package/dist/drawer/drawer-footer2.js +1 -1
  47. package/dist/drawer/drawer-header2.js +1 -1
  48. package/dist/drawer/drawer.examples.json +13 -13
  49. package/dist/drawer/drawer2.js +1 -1
  50. package/dist/dropdown/dropdown-footer2.js +1 -1
  51. package/dist/dropdown/dropdown-header2.js +1 -1
  52. package/dist/dropdown/dropdown.examples.json +14 -14
  53. package/dist/dropdown/dropdown2.js +1 -1
  54. package/dist/dropdown-group/dropdown-group.examples.json +4 -4
  55. package/dist/dropdown-group/dropdown-group.js +1 -1
  56. package/dist/dropzone/dropzone.examples.json +3 -3
  57. package/dist/dropzone/dropzone2.js +1 -1
  58. package/dist/file/file.examples.json +3 -3
  59. package/dist/file/file2.js +1 -1
  60. package/dist/format-datetime/format-datetime.examples.json +9 -9
  61. package/dist/format-datetime/format-datetime2.js +1 -1
  62. package/dist/format-relative-time/format-relative-time.examples.json +7 -7
  63. package/dist/format-relative-time/format-relative-time2.js +1 -1
  64. package/dist/forms/actions.examples.json +3 -3
  65. package/dist/forms/control/control.examples.json +11 -11
  66. package/dist/forms/control/control2.js +1 -1
  67. package/dist/forms/control-group/control-group2.js +1 -1
  68. package/dist/forms/control-message/control-message2.js +1 -1
  69. package/dist/forms/forms.examples.json +8 -8
  70. package/dist/forms/validation.examples.json +5 -5
  71. package/dist/grid/cell/cell2.js +1 -1
  72. package/dist/grid/column/column2.js +1 -1
  73. package/dist/grid/footer/footer2.js +1 -1
  74. package/dist/grid/grid.examples.json +43 -43
  75. package/dist/grid/grid2.js +1 -1
  76. package/dist/grid/header/header2.js +2 -2
  77. package/dist/grid/header/header2.js.map +1 -1
  78. package/dist/grid/placeholder/placeholder2.js +1 -1
  79. package/dist/grid/row/row2.js +1 -1
  80. package/dist/icon/icon.examples.json +8 -8
  81. package/dist/icon/icon2.js +2 -2
  82. package/dist/icon-button/icon-button.examples.json +13 -13
  83. package/dist/icon-button/icon-button2.js +1 -1
  84. package/dist/index.js +1 -1
  85. package/dist/input/input-group.examples.json +2 -2
  86. package/dist/input/input-group2.js +1 -1
  87. package/dist/input/input.examples.json +8 -8
  88. package/dist/input/input2.js +1 -1
  89. package/dist/internal/controllers/i18n.controller.examples.json +1 -1
  90. package/dist/internal/controllers/keynav-grid.controller.examples.json +2 -2
  91. package/dist/internal/controllers/keynav-grid.controller.js +15 -7
  92. package/dist/internal/controllers/keynav-grid.controller.js.map +1 -1
  93. package/dist/internal/controllers/keynav-list.controller.examples.json +4 -4
  94. package/dist/internal/controllers/keynav-list.controller.js +11 -5
  95. package/dist/internal/controllers/keynav-list.controller.js.map +1 -1
  96. package/dist/internal/controllers/popover.examples.json +8 -8
  97. package/dist/internal/controllers/type-button.controller.examples.json +1 -1
  98. package/dist/internal/controllers/type-popover.controller.examples.json +2 -2
  99. package/dist/internal/controllers/type-touch.controller.examples.json +1 -1
  100. package/dist/internal/services/global.service.js +1 -1
  101. package/dist/logo/logo.examples.json +6 -6
  102. package/dist/logo/logo2.js +1 -1
  103. package/dist/menu/menu-item2.js +1 -1
  104. package/dist/menu/menu.examples.json +15 -15
  105. package/dist/menu/menu2.js +1 -1
  106. package/dist/month/month.examples.json +4 -4
  107. package/dist/month/month2.js +1 -1
  108. package/dist/notification/notification-group2.js +1 -1
  109. package/dist/notification/notification.examples.json +15 -15
  110. package/dist/notification/notification2.js +1 -1
  111. package/dist/page/page-panel/page-panel-content2.js +1 -1
  112. package/dist/page/page-panel/page-panel-footer2.js +1 -1
  113. package/dist/page/page-panel/page-panel-header2.js +1 -1
  114. package/dist/page/page-panel/page-panel2.js +1 -1
  115. package/dist/page/page.examples.js.map +1 -1
  116. package/dist/page/page.examples.json +36 -34
  117. package/dist/page/page2.js +1 -1
  118. package/dist/page-header/page-header.examples.json +9 -9
  119. package/dist/page-header/page-header2.js +1 -1
  120. package/dist/page-loader/page-loader.examples.json +2 -2
  121. package/dist/page-loader/page-loader2.js +1 -1
  122. package/dist/pagination/pagination.examples.json +16 -16
  123. package/dist/pagination/pagination2.js +1 -1
  124. package/dist/panel/panel.examples.json +7 -7
  125. package/dist/panel/panel2.js +4 -4
  126. package/dist/password/password.examples.json +3 -3
  127. package/dist/password/password2.js +1 -1
  128. package/dist/preferences-input/preferences-input.examples.json +3 -3
  129. package/dist/preferences-input/preferences-input2.js +1 -1
  130. package/dist/progress-bar/progress-bar.examples.json +8 -8
  131. package/dist/progress-bar/progress-bar2.js +1 -1
  132. package/dist/progress-ring/progress-ring.examples.json +8 -8
  133. package/dist/progress-ring/progress-ring2.js +1 -1
  134. package/dist/progressive-filter-chip/progressive-filter-chip.examples.json +7 -7
  135. package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
  136. package/dist/pulse/pulse.examples.json +4 -4
  137. package/dist/pulse/pulse2.js +1 -1
  138. package/dist/radio/radio-group2.js +1 -1
  139. package/dist/radio/radio.examples.json +5 -5
  140. package/dist/radio/radio2.js +1 -1
  141. package/dist/range/range.examples.json +9 -9
  142. package/dist/range/range2.js +1 -1
  143. package/dist/resize-handle/resize-handle.examples.json +7 -7
  144. package/dist/resize-handle/resize-handle2.js +1 -1
  145. package/dist/search/search.examples.json +5 -5
  146. package/dist/search/search2.js +1 -1
  147. package/dist/select/select.examples.json +18 -18
  148. package/dist/select/select2.js +1 -1
  149. package/dist/skeleton/skeleton.examples.json +4 -4
  150. package/dist/skeleton/skeleton2.js +1 -1
  151. package/dist/sort-button/sort-button.examples.json +3 -3
  152. package/dist/sort-button/sort-button2.js +1 -1
  153. package/dist/sparkline/sparkline.examples.json +13 -13
  154. package/dist/sparkline/sparkline.utils.d.ts +26 -5
  155. package/dist/sparkline/sparkline.utils.js +30 -30
  156. package/dist/sparkline/sparkline.utils.js.map +1 -1
  157. package/dist/sparkline/sparkline2.js +21 -6
  158. package/dist/sparkline/sparkline2.js.map +1 -1
  159. package/dist/star-rating/star-rating.examples.json +4 -4
  160. package/dist/star-rating/star-rating2.js +1 -1
  161. package/dist/steps/steps.examples.json +5 -5
  162. package/dist/steps/steps2.js +2 -2
  163. package/dist/switch/switch-group2.js +1 -1
  164. package/dist/switch/switch.examples.json +7 -7
  165. package/dist/switch/switch2.js +1 -1
  166. package/dist/tabs/tabs-group2.js +9 -6
  167. package/dist/tabs/tabs-group2.js.map +1 -1
  168. package/dist/tabs/tabs.examples.json +14 -14
  169. package/dist/tabs/tabs2.js +2 -2
  170. package/dist/tag/tag.examples.json +8 -8
  171. package/dist/tag/tag2.js +1 -1
  172. package/dist/textarea/textarea.examples.json +5 -5
  173. package/dist/textarea/textarea2.js +1 -1
  174. package/dist/time/time.examples.json +4 -4
  175. package/dist/time/time2.js +1 -1
  176. package/dist/toast/toast.examples.json +11 -11
  177. package/dist/toast/toast2.js +1 -1
  178. package/dist/toggletip/toggletip-footer2.js +1 -1
  179. package/dist/toggletip/toggletip-header2.js +1 -1
  180. package/dist/toggletip/toggletip.examples.json +12 -12
  181. package/dist/toggletip/toggletip2.js +1 -1
  182. package/dist/toolbar/toolbar.examples.json +8 -8
  183. package/dist/toolbar/toolbar2.js +1 -1
  184. package/dist/tooltip/tooltip.examples.json +22 -22
  185. package/dist/tooltip/tooltip2.js +1 -1
  186. package/dist/tree/tree-node2.js +1 -1
  187. package/dist/tree/tree.examples.json +13 -13
  188. package/dist/tree/tree2.js +1 -1
  189. package/dist/week/week.examples.json +5 -5
  190. package/dist/week/week2.js +1 -1
  191. package/package.json +3 -3
@@ -3,7 +3,7 @@
3
3
  "entrypoint": "@nvidia-elements/core/checkbox/checkbox.examples.json",
4
4
  "items": [
5
5
  {
6
- "id": "core-checkbox_default",
6
+ "id": "checkbox",
7
7
  "name": "Default",
8
8
  "template": "<nve-checkbox>\n <label>label</label>\n <input type=\"checkbox\" checked />\n</nve-checkbox>\n",
9
9
  "summary": "Basic checkbox component with label for binary selection and form input.",
@@ -12,7 +12,7 @@
12
12
  "tags": []
13
13
  },
14
14
  {
15
- "id": "core-checkbox_states",
15
+ "id": "checkbox-states",
16
16
  "name": "States",
17
17
  "template": "<div nve-layout=\"column gap:lg align:stretch\">\n <nve-checkbox>\n <label>label</label>\n <input type=\"checkbox\" />\n <nve-control-message>message</nve-control-message>\n </nve-checkbox>\n <nve-checkbox>\n <label>disabled</label>\n <input type=\"checkbox\" disabled />\n <nve-control-message>message</nve-control-message>\n </nve-checkbox>\n <nve-checkbox>\n <label>success</label>\n <input type=\"checkbox\" />\n <nve-control-message status=\"success\">message</nve-control-message>\n </nve-checkbox>\n <nve-checkbox>\n <label>error</label>\n <input type=\"checkbox\" />\n <nve-control-message status=\"error\">message</nve-control-message>\n </nve-checkbox>\n</div>\n",
18
18
  "summary": "Checkbox states including default, disabled, success, and error with control messages for validation feedback.",
@@ -21,7 +21,7 @@
21
21
  "tags": []
22
22
  },
23
23
  {
24
- "id": "core-checkbox_vertical-group",
24
+ "id": "checkbox-vertical-group",
25
25
  "name": "VerticalGroup",
26
26
  "template": "<div nve-layout=\"column gap:lg align:stretch\">\n <nve-checkbox-group>\n <label>label</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message>message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group>\n <label>disabled</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked disabled />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" disabled />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" disabled />\n </nve-checkbox>\n <nve-control-message>disabled message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group>\n <label>success</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message status=\"success\">success message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group>\n <label>error</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message status=\"error\">error message</nve-control-message>\n </nve-checkbox-group>\n</div>\n",
27
27
  "summary": "Checkbox group with vertical layout for related options stacked in a column with validation states.",
@@ -30,7 +30,7 @@
30
30
  "tags": []
31
31
  },
32
32
  {
33
- "id": "core-checkbox_vertical-inline-group",
33
+ "id": "checkbox-vertical-inline-group",
34
34
  "name": "VerticalInlineGroup",
35
35
  "template": "<div nve-layout=\"column gap:lg align:stretch\">\n <nve-checkbox-group layout=\"vertical-inline\">\n <label>label</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message>message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group layout=\"vertical-inline\">\n <label>disabled</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked disabled />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" disabled />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" disabled />\n </nve-checkbox>\n <nve-control-message>disabled message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group layout=\"vertical-inline\">\n <label>success</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message status=\"success\">success message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group layout=\"vertical-inline\">\n <label>error</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message status=\"error\">error message</nve-control-message>\n </nve-checkbox-group>\n</div>\n",
36
36
  "summary": "Checkbox group with vertical inline layout for compact vertical stacking with inline label positioning.",
@@ -41,7 +41,7 @@
41
41
  ]
42
42
  },
43
43
  {
44
- "id": "core-checkbox_horizontal-group",
44
+ "id": "checkbox-horizontal-group",
45
45
  "name": "HorizontalGroup",
46
46
  "template": "<div nve-layout=\"column gap:lg align:stretch\">\n <nve-checkbox-group layout=\"horizontal\">\n <label>label</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message>message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group layout=\"horizontal\">\n <label>disabled</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked disabled />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" disabled />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" disabled />\n </nve-checkbox>\n <nve-control-message>disabled message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group layout=\"horizontal\">\n <label>success</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message status=\"success\">success message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group layout=\"horizontal\">\n <label>error</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message status=\"error\">error message</nve-control-message>\n </nve-checkbox-group>\n</div>\n",
47
47
  "summary": "Checkbox group with horizontal layout for related options arranged in a row, ideal for limited choices.",
@@ -52,7 +52,7 @@
52
52
  ]
53
53
  },
54
54
  {
55
- "id": "core-checkbox_horizontal-inline-group",
55
+ "id": "checkbox-horizontal-inline-group",
56
56
  "name": "HorizontalInlineGroup",
57
57
  "template": "<div nve-layout=\"column gap:lg align:stretch\">\n <nve-checkbox-group layout=\"horizontal-inline\">\n <label>label</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message>message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group layout=\"horizontal-inline\">\n <label>disabled</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked disabled />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" disabled />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" disabled />\n </nve-checkbox>\n <nve-control-message>disabled message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group layout=\"horizontal-inline\">\n <label>success</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message status=\"success\">success message</nve-control-message>\n </nve-checkbox-group>\n <nve-checkbox-group layout=\"horizontal-inline\">\n <label>error</label>\n <nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 2</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-checkbox>\n <label>checkbox 3</label>\n <input type=\"checkbox\" />\n </nve-checkbox>\n <nve-control-message status=\"error\">error message</nve-control-message>\n </nve-checkbox-group>\n</div>\n",
58
58
  "summary": "Checkbox group with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",
@@ -63,7 +63,7 @@
63
63
  ]
64
64
  },
65
65
  {
66
- "id": "core-checkbox_indeterminate",
66
+ "id": "checkbox-indeterminate",
67
67
  "name": "Indeterminate",
68
68
  "template": "<nve-checkbox>\n <label>checkbox 1</label>\n <input type=\"checkbox\" checked id=\"indeterminate\" />\n</nve-checkbox>\n<script type=\"module\">\n document.querySelector(\"#indeterminate\").indeterminate = true;\n</script>\n",
69
69
  "summary": "Checkbox with indeterminate state for representing partial selection or mixed values in hierarchical lists.",
@@ -15,7 +15,7 @@ var o = class extends i {
15
15
  static {
16
16
  this.metadata = {
17
17
  tag: "nve-checkbox",
18
- version: "0.0.10",
18
+ version: "0.0.11",
19
19
  children: [
20
20
  "label",
21
21
  "input",
@@ -3,7 +3,7 @@
3
3
  "entrypoint": "@nvidia-elements/core/color/color.examples.json",
4
4
  "items": [
5
5
  {
6
- "id": "core-color_default",
6
+ "id": "color",
7
7
  "name": "Default",
8
8
  "template": "<nve-color>\n <label>label</label>\n <input type=\"color\" />\n <nve-control-message>message</nve-control-message>\n</nve-color>\n",
9
9
  "summary": "Basic color picker input with label and message for selecting hex color values.",
@@ -12,7 +12,7 @@
12
12
  "tags": []
13
13
  },
14
14
  {
15
- "id": "core-color_datalist",
15
+ "id": "color-datalist",
16
16
  "name": "Datalist",
17
17
  "template": "<nve-color>\n <label>label</label>\n <input type=\"color\" />\n <nve-control-message>message</nve-control-message>\n <datalist>\n <option value=\"#1a6b00\"></option>\n <option value=\"#448d00\"></option>\n <option value=\"#69b027\"></option>\n <option value=\"#8ac057\"></option>\n <option value=\"#a9d081\"></option>\n <option value=\"#0758bb\"></option>\n <option value=\"#0865d8\"></option>\n <option value=\"#0971f1\"></option>\n <option value=\"#7298f4\"></option>\n <option value=\"#a1b7f7\"></option>\n <option value=\"#b43931\"></option>\n <option value=\"#d04238\"></option>\n <option value=\"#e94a3f\"></option>\n <option value=\"#ee847f\"></option>\n <option value=\"#f2aba8\"></option>\n </datalist>\n</nve-color>\n",
18
18
  "summary": "Color picker with datalist providing predefined color swatches for quick selection from a color palette.",
@@ -21,7 +21,7 @@
21
21
  "tags": []
22
22
  },
23
23
  {
24
- "id": "core-color_vertical",
24
+ "id": "color-vertical",
25
25
  "name": "Vertical",
26
26
  "template": "<div nve-layout=\"column gap:lg full\">\n <nve-color>\n <label>label</label>\n <input type=\"color\" />\n <nve-control-message>message</nve-control-message>\n </nve-color>\n <nve-color>\n <label>disabled</label>\n <input type=\"color\" disabled />\n <nve-control-message>message</nve-control-message>\n </nve-color>\n <nve-color>\n <label>success</label>\n <input type=\"color\" />\n <nve-control-message status=\"success\">message</nve-control-message>\n </nve-color>\n <nve-color>\n <label>error</label>\n <input type=\"color\" />\n <nve-control-message status=\"error\">message</nve-control-message>\n </nve-color>\n</div>\n",
27
27
  "summary": "Color pickers with vertical layout including validation states for disabled, success, and error.",
@@ -32,7 +32,7 @@
32
32
  ]
33
33
  },
34
34
  {
35
- "id": "core-color_horizontal",
35
+ "id": "color-horizontal",
36
36
  "name": "Horizontal",
37
37
  "template": "<div nve-layout=\"column gap:lg full\">\n <nve-color layout=\"horizontal\">\n <label>label</label>\n <input type=\"color\" />\n <nve-control-message>message</nve-control-message>\n </nve-color>\n <nve-color layout=\"horizontal\">\n <label>disabled</label>\n <input type=\"color\" disabled />\n <nve-control-message>message</nve-control-message>\n </nve-color>\n <nve-color layout=\"horizontal\">\n <label>success</label>\n <input type=\"color\" />\n <nve-control-message status=\"success\">message</nve-control-message>\n </nve-color>\n <nve-color layout=\"horizontal\">\n <label>error</label>\n <input type=\"color\" />\n <nve-control-message status=\"error\">message</nve-control-message>\n </nve-color>\n</div>\n",
38
38
  "summary": "Color pickers with horizontal layout showing validation states for inline forms and compact layouts.",
@@ -21,7 +21,7 @@ var f = class extends a {
21
21
  static {
22
22
  this.metadata = {
23
23
  tag: "nve-color",
24
- version: "0.0.10"
24
+ version: "0.0.11"
25
25
  };
26
26
  }
27
27
  static {
@@ -3,7 +3,7 @@
3
3
  "entrypoint": "@nvidia-elements/core/combobox/combobox.examples.json",
4
4
  "items": [
5
5
  {
6
- "id": "core-combobox_default",
6
+ "id": "combobox",
7
7
  "name": "Default",
8
8
  "template": "<nve-combobox>\n <label>label</label>\n <input type=\"search\" />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
9
9
  "summary": "Basic combobox with search input and datalist options for filtering and selection.",
@@ -12,7 +12,7 @@
12
12
  "tags": []
13
13
  },
14
14
  {
15
- "id": "core-combobox_vertical",
15
+ "id": "combobox-vertical",
16
16
  "name": "Vertical",
17
17
  "template": "<div nve-layout=\"column gap:lg full\">\n <nve-combobox>\n <label>label</label>\n <input type=\"search\" />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n <nve-control-message>message</nve-control-message>\n </nve-combobox>\n <nve-combobox>\n <label>disabled</label>\n <input type=\"search\" disabled />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n <nve-control-message>message</nve-control-message>\n </nve-combobox>\n <nve-combobox>\n <label>success</label>\n <input type=\"search\" />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n <nve-control-message status=\"success\">message</nve-control-message>\n </nve-combobox>\n <nve-combobox>\n <label>error</label>\n <input type=\"search\" />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n <nve-control-message status=\"error\">message</nve-control-message>\n </nve-combobox>\n</div>\n",
18
18
  "summary": "Vertical layout showing different combobox states (normal, disabled, success, error) stacked for comparison.",
@@ -23,7 +23,7 @@
23
23
  ]
24
24
  },
25
25
  {
26
- "id": "core-combobox_horizontal",
26
+ "id": "combobox-horizontal",
27
27
  "name": "Horizontal",
28
28
  "template": "<div nve-layout=\"column gap:lg full\">\n <nve-combobox layout=\"horizontal\">\n <label>label</label>\n <input type=\"search\" />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n <nve-control-message>message</nve-control-message>\n </nve-combobox>\n <nve-combobox layout=\"horizontal\">\n <label>disabled</label>\n <input type=\"search\" disabled />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n <nve-control-message>message</nve-control-message>\n </nve-combobox>\n <nve-combobox layout=\"horizontal\">\n <label>success</label>\n <input type=\"search\" />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n <nve-control-message status=\"success\">message</nve-control-message>\n </nve-combobox>\n <nve-combobox layout=\"horizontal\">\n <label>error</label>\n <input type=\"search\" />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n <nve-control-message status=\"error\">message</nve-control-message>\n </nve-combobox>\n</div>\n",
29
29
  "summary": "Horizontal layout showing different combobox states (normal, disabled, success, error) for inline form layouts.",
@@ -32,7 +32,7 @@
32
32
  "tags": []
33
33
  },
34
34
  {
35
- "id": "core-combobox_flat",
35
+ "id": "combobox-flat",
36
36
  "name": "Flat",
37
37
  "template": "<nve-combobox container=\"flat\">\n <nve-icon name=\"filter\" slot=\"prefix-icon\"></nve-icon>\n <input type=\"search\" aria-label=\"search\" />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n</nve-combobox>\n",
38
38
  "summary": "Flat container style with prefix icon for compact inline filtering interfaces.",
@@ -41,7 +41,7 @@
41
41
  "tags": []
42
42
  },
43
43
  {
44
- "id": "core-combobox_select",
44
+ "id": "combobox-select",
45
45
  "name": "Select",
46
46
  "template": "<nve-combobox>\n <label>label</label>\n <input type=\"search\" />\n <select>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </select>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
47
47
  "summary": "Single select allows users only to select from a predefined list of options. Invalid input is automatically cleared. All options are visible on focus until typing begins for filtering.",
@@ -50,7 +50,7 @@
50
50
  "tags": []
51
51
  },
52
52
  {
53
- "id": "core-combobox_multi-select",
53
+ "id": "combobox-multi-select",
54
54
  "name": "MultiSelect",
55
55
  "template": "<nve-combobox>\n <label>label</label>\n <input type=\"search\" />\n <select multiple>\n <option selected value=\"status\"></option>\n <option selected value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </select>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
56
56
  "summary": "Multi select allows users to select many options from a predefined list. The select `value` will only reflect the first selected value. To get all selected options check the `selected` property on each `<option>` or the select property `selectedOptions`. On focus all options will show until the user starts typing. Select is the selection value of the combobox. The input is the filter value.",
@@ -59,7 +59,7 @@
59
59
  "tags": []
60
60
  },
61
61
  {
62
- "id": "core-combobox_empty-default",
62
+ "id": "combobox-empty",
63
63
  "name": "EmptyDefault",
64
64
  "template": "<nve-combobox>\n <label>label</label>\n <input type=\"search\" />\n <select>\n <option disabled selected></option>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </select>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
65
65
  "summary": "Combobox with an empty initial value using a disabled placeholder option. Use when no default selection exists and the user must make an explicit choice.",
@@ -68,7 +68,7 @@
68
68
  "tags": []
69
69
  },
70
70
  {
71
- "id": "core-combobox_label",
71
+ "id": "combobox-label",
72
72
  "name": "Label",
73
73
  "template": "<nve-combobox>\n <label>label</label>\n <input type=\"search\" />\n <select>\n <option value=\"1\">Status</option>\n <option value=\"2\">Priority</option>\n <option value=\"3\">Date</option>\n <option value=\"4\">Session</option>\n <option value=\"5\">Configuration</option>\n <option value=\"6\">Contains</option>\n </select>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
74
74
  "summary": "Combobox options with display labels that differ from underlying values. Use when option values are IDs or codes but users need to see human-readable text in the input.",
@@ -77,7 +77,7 @@
77
77
  "tags": []
78
78
  },
79
79
  {
80
- "id": "core-combobox_label-multi-select",
80
+ "id": "combobox-label-multi-select",
81
81
  "name": "LabelMultiSelect",
82
82
  "template": "<nve-combobox>\n <label>label</label>\n <input type=\"search\" />\n <select multiple>\n <option value=\"1\">Status</option>\n <option value=\"2\">Priority</option>\n <option value=\"3\">Date</option>\n <option value=\"4\">Session</option>\n <option value=\"5\">Configuration</option>\n <option value=\"6\">Contains</option>\n </select>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
83
83
  "summary": "Multi-select with labeled options where display text differs from option values.",
@@ -86,7 +86,7 @@
86
86
  "tags": []
87
87
  },
88
88
  {
89
- "id": "core-combobox_overflow",
89
+ "id": "combobox-overflow",
90
90
  "name": "Overflow",
91
91
  "template": "<nve-combobox style=\"width: 250px\">\n <label>label</label>\n <input type=\"search\" />\n <select multiple>\n <option selected value=\"status\"></option>\n <option selected value=\"priority\"></option>\n <option selected value=\"date\"></option>\n <option selected value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </select>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
92
92
  "summary": "Overflow behavior where many tags collapse into a simple text label when the parent container is too narrow.",
@@ -97,7 +97,7 @@
97
97
  ]
98
98
  },
99
99
  {
100
- "id": "core-combobox_popover-overflow",
100
+ "id": "combobox-popover-overflow",
101
101
  "name": "PopoverOverflow",
102
102
  "template": "<nve-combobox style=\"width: 100px\">\n <label>label</label>\n <input type=\"search\" />\n <select>\n <option value=\"really-long-text-option-that-keeps-going\"></option>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </select>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
103
103
  "summary": "Combobox handling of long option text in constrained width containers.",
@@ -108,7 +108,7 @@
108
108
  ]
109
109
  },
110
110
  {
111
- "id": "core-combobox_reset",
111
+ "id": "combobox-reset",
112
112
  "name": "Reset",
113
113
  "template": "<nve-combobox id=\"combobox-reset\" style=\"width: 500px; --scroll-height: 220px\">\n <label>label</label>\n <input type=\"search\" />\n <select multiple>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </select>\n <nve-icon-button aria-label=\"clear selection\" icon-name=\"cancel\" container=\"inline\"></nve-icon-button>\n <nve-button slot=\"footer\" aria-label=\"clear selection\" container=\"flat\">reset</nve-button>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n document\n .querySelector(\"#combobox-reset nve-icon-button\")\n .addEventListener(\"click\", (e) => e.target.parentElement.reset());\n document.querySelector(\"#combobox-reset nve-button\").addEventListener(\"click\", (e) => e.target.parentElement.reset());\n</script>\n",
114
114
  "summary": "Multi-select with reset functionality via icon button and footer button to clear all selections.",
@@ -117,7 +117,7 @@
117
117
  "tags": []
118
118
  },
119
119
  {
120
- "id": "core-combobox_footer",
120
+ "id": "combobox-footer",
121
121
  "name": "Footer",
122
122
  "template": "<nve-combobox style=\"width: 500px; --scroll-height: 200px\">\n <label>label</label>\n <input type=\"search\" />\n <select multiple>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n <option value=\"includes\"></option>\n <option value=\"user\"></option>\n <option value=\"progress\"></option>\n </select>\n <nve-button slot=\"footer\" container=\"flat\">action</nve-button>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
123
123
  "summary": "Multi-select with footer action button for extra operations on selected items.",
@@ -126,7 +126,7 @@
126
126
  "tags": []
127
127
  },
128
128
  {
129
- "id": "core-combobox_select-all",
129
+ "id": "combobox-select-all",
130
130
  "name": "SelectAll",
131
131
  "template": "<nve-combobox id=\"combobox-select-all\" style=\"width: 500px; --scroll-height: 200px\">\n <label>label</label>\n <input type=\"search\" />\n <select multiple>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n <option value=\"includes\"></option>\n <option value=\"user\"></option>\n <option value=\"progress\"></option>\n </select>\n <div slot=\"footer\" nve-layout=\"row align:stretch full\">\n <nve-button container=\"flat\">Select All</nve-button>\n <nve-button container=\"flat\">Deselect All</nve-button>\n </div>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n const combobox = document.querySelector(\"#combobox-select-all\");\n const [selectAll, deselectAll] = Array.from(combobox.querySelectorAll(\"nve-button\"));\n selectAll.addEventListener(\"click\", () => combobox.selectAll());\n deselectAll.addEventListener(\"click\", () => combobox.reset());\n combobox.addEventListener(\"change\", (e) => console.log(e.target.selectedOptions));\n</script>\n",
132
132
  "summary": "Multi-select with bulk selection controls (Select All/Deselect All) in footer for efficient mass operations.",
@@ -135,7 +135,7 @@
135
135
  "tags": []
136
136
  },
137
137
  {
138
- "id": "core-combobox_disabled-options",
138
+ "id": "combobox-disabled-options",
139
139
  "name": "DisabledOptions",
140
140
  "template": "<nve-combobox>\n <label>label</label>\n <input type=\"search\" />\n <select multiple>\n <option value=\"status\" disabled></option>\n <option value=\"priority\" disabled></option>\n <option value=\"date\" disabled></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </select>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
141
141
  "summary": "Multi-select with disabled options to show unavailable choices while maintaining visual context.",
@@ -144,7 +144,7 @@
144
144
  "tags": []
145
145
  },
146
146
  {
147
- "id": "core-combobox_no-tags",
147
+ "id": "combobox-no-tags",
148
148
  "name": "NoTags",
149
149
  "template": "<form id=\"notags\" nve-layout=\"column gap:lg align:stretch\">\n <nve-combobox notags>\n <label>label</label>\n <input type=\"search\" />\n <select multiple>\n <option selected value=\"status\"></option>\n <option selected value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </select>\n </nve-combobox>\n <div id=\"tags\" nve-layout=\"row gap:xs\"></div>\n</form>\n<script type=\"module\">\n const form = document.querySelector(\"#notags\");\n const select = form.querySelector(\"select\");\n const tags = form.querySelector(\"#tags\");\n updateTags();\n select.addEventListener(\"change\", (e) => updateTags());\n tags.addEventListener(\"close\", (e) => {\n Array.from(select.options).find((o) => o.value === e.target.value).selected = false;\n updateTags();\n });\n function updateTags() {\n tags.innerHTML = \"\";\n Array.from(select.selectedOptions).forEach(\n (o) => (tags.innerHTML += '<nve-tag closable value=\"' + o.value + '\">' + o.value + \"</nve-tag>\"),\n );\n }\n</script>\n",
150
150
  "summary": "Multi-select without built-in tags, using external tag management for custom selection display.",
@@ -153,7 +153,7 @@
153
153
  "tags": []
154
154
  },
155
155
  {
156
- "id": "core-combobox_create-options",
156
+ "id": "combobox-create-options",
157
157
  "name": "CreateOptions",
158
158
  "template": "<nve-combobox id=\"creatable-combo\" behavior-create style=\"--scroll-height: 220px\">\n <label>Tags</label>\n <input type=\"search\" placeholder=\"Select or create a tag…\" />\n <select multiple>\n <option value=\"Go\">Go</option>\n <option value=\"Rust\">Rust</option>\n <option value=\"Python\">Python</option>\n <option value=\"JavaScript\">JavaScript</option>\n <option value=\"TypeScript\">TypeScript</option>\n <option value=\"Java\">Java</option>\n <option value=\"C#\">C#</option>\n <option value=\"C++\">C++</option>\n <option value=\"C\">C</option>\n <option value=\"PHP\">PHP</option>\n </select>\n <nve-control-message>Press Enter to create a tag that doesn't exist yet</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n const combobox = document.getElementById(\"creatable-combo\");\n const select = combobox.querySelector(\"select\");\n combobox.addEventListener(\"create\", (e) => {\n const option = document.createElement(\"option\");\n option.value = e.detail.value;\n option.textContent = e.detail.value;\n option.selected = true;\n select.appendChild(option);\n });\n</script>\n",
159
159
  "summary": "Combobox with create option behavior that allows users to add new options and tags on the fly. Use when the option list is not exhaustive and users need to enter values that don't yet exist.",
@@ -164,7 +164,7 @@
164
164
  ]
165
165
  },
166
166
  {
167
- "id": "core-combobox_form",
167
+ "id": "combobox-form",
168
168
  "name": "Form",
169
169
  "template": "<form nve-layout=\"column gap:lg align:stretch\">\n <nve-combobox style=\"--scroll-height: 220px\">\n <label>label</label>\n <input type=\"search\" name=\"input\" />\n <select multiple name=\"select\" value=\"priority\">\n <option value=\"status\"></option>\n <option selected value=\"priority\"></option>\n <option selected value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </select>\n <nve-control-message>message</nve-control-message>\n </nve-combobox>\n <div nve-layout=\"row gap:xs\">\n <nve-button type=\"button\">set</nve-button>\n <nve-button type=\"reset\">reset</nve-button>\n <nve-button type=\"submit\">submit</nve-button>\n </div>\n</form>\n<script type=\"module\">\n const form = document.querySelector(\"form\");\n const select = document.querySelector(\"select\");\n const input = document.querySelector(\"input\");\n const btn = document.querySelector(\"[type=button]\");\n form.addEventListener(\"submit\", (e) => {\n e.preventDefault();\n const formData = new FormData(form);\n console.log(\"input: \", formData.get(\"input\"));\n console.log(\"select: \", formData.get(\"select\"));\n console.log(\n \"selectedOptions: \",\n Array.from(select.selectedOptions).map((o) => o.value),\n );\n });\n btn.addEventListener(\"click\", () => {\n select.value = \"status\";\n select.options[0].selected = true;\n input.value = \"test\";\n });\n</script>\n",
170
170
  "summary": "Complete form integration showing combobox with form submission, reset, and programmatic value setting.",
@@ -173,7 +173,7 @@
173
173
  "tags": []
174
174
  },
175
175
  {
176
- "id": "core-combobox_dynamic-typeahead-search",
176
+ "id": "combobox-dynamic-typeahead-search",
177
177
  "name": "DynamicTypeaheadSearch",
178
178
  "template": "<nve-combobox id=\"combobox\">\n <label>GPU Search</label>\n <input type=\"search\" placeholder=\"Type to search…\" />\n <datalist>\n <option disabled selected></option>\n </datalist>\n</nve-combobox>\n<script type=\"module\">\n const combobox = document.getElementById(\"combobox\");\n const input = combobox.querySelector(\"input\");\n const datalist = combobox.querySelector(\"datalist\");\n let controller = null;\n input.addEventListener(\"input\", async () => {\n if (controller) controller.abort();\n controller = new AbortController();\n const query = input.value.trim();\n if (!query) {\n datalist.innerHTML = \"\";\n return;\n }\n try {\n const results = await mockFetch(query, controller.signal);\n datalist.innerHTML = results.map((v) => '<option value=\"' + v + '\">').join(\"\");\n } catch (err) {\n if (err.name !== \"AbortError\") datalist.innerHTML = \"\";\n }\n });\n function mockFetch(query, signal) {\n return new Promise((resolve, reject) => {\n const timer = setTimeout(() => {\n resolve(\n [\"A100 GPU\", \"H100 GPU\", \"H200 GPU\", \"DGX A100\", \"DGX H100\", \"CUDA Toolkit\"].filter((v) =>\n v.toLowerCase().startsWith(query.toLowerCase()),\n ),\n );\n }, 500);\n signal.addEventListener(\"abort\", () => {\n clearTimeout(timer);\n reject(new DOMException(\"Aborted\", \"AbortError\"));\n });\n });\n }\n</script>\n",
179
179
  "summary": "Fetches options asynchronously as the user types, cancelling stale requests with AbortController. Use for server-backed search where the full option set is too large to load up front.",
@@ -184,7 +184,7 @@
184
184
  ]
185
185
  },
186
186
  {
187
- "id": "core-combobox_infinite-scroll",
187
+ "id": "combobox-infinite-scroll",
188
188
  "name": "InfiniteScroll",
189
189
  "template": "<nve-combobox id=\"infinite-scroll-combo\" style=\"--scroll-height: 200px\">\n <label>GPU Models</label>\n <input type=\"search\" placeholder=\"Scroll to load more…\" />\n <datalist id=\"infinite-scroll-list\"></datalist>\n</nve-combobox>\n<script type=\"module\">\n const combo = document.getElementById(\"infinite-scroll-combo\");\n const datalist = document.getElementById(\"infinite-scroll-list\");\n let loading = false;\n async function loadBatch() {\n if (loading) return;\n loading = true;\n const items = await new Promise((resolve) =>\n setTimeout(\n () => resolve(Array.from({ length: 100 }, (_, i) => \"GPU Model \" + (datalist.options.length + i + 1))),\n 300,\n ),\n );\n datalist.append(...items.map((v) => new Option(v)));\n loading = false;\n }\n loadBatch();\n combo.addEventListener(\"scroll\", (e) => {\n if (e.detail.scrollHeight - e.detail.scrollTop - e.detail.clientHeight <= 128) {\n loadBatch();\n }\n });\n</script>\n",
190
190
  "summary": "Infinite scroll combobox loading, using the scroll event to append options as the user nears the end of the list. Use for server-backed datasets where loading all options up front is impractical.",
@@ -195,7 +195,7 @@
195
195
  ]
196
196
  },
197
197
  {
198
- "id": "core-combobox_performance",
198
+ "id": "combobox-performance",
199
199
  "name": "Performance",
200
200
  "template": "<nve-combobox id=\"performance-combobox\">\n <input type=\"search\" aria-label=\"performance test\" />\n <datalist></datalist>\n</nve-combobox>\n<script type=\"module\">\n const datalist = document.querySelector(\"#performance-combobox datalist\");\n const options = new Array(1000).fill(\"\").map((_, i) => {\n const option = document.createElement(\"option\");\n option.value = i + \" item\";\n return option;\n });\n datalist.append(...options);\n</script>\n",
201
201
  "summary": "Performance test with 1000 options to show filtering efficiency with large datasets.",
@@ -207,7 +207,7 @@
207
207
  ]
208
208
  },
209
209
  {
210
- "id": "core-combobox_performance-select",
210
+ "id": "combobox-performance-select",
211
211
  "name": "PerformanceSelect",
212
212
  "template": "<div nve-layout=\"pad:lg\">\n <nve-combobox id=\"performance-combobox\">\n <input type=\"search\" aria-label=\"performance test\" />\n <select multiple></select>\n </nve-combobox>\n</div>\n<script type=\"module\">\n const select = document.querySelector(\"#performance-combobox select\");\n const options = new Array(1000).fill(\"\").map((_, i) => {\n const option = document.createElement(\"option\");\n option.value = i + \" item\";\n return option;\n });\n select.append(...options);\n</script>\n",
213
213
  "summary": "Performance test with 1000 options to show filtering efficiency with large datasets.",
@@ -219,7 +219,7 @@
219
219
  ]
220
220
  },
221
221
  {
222
- "id": "core-combobox_dynamic-options",
222
+ "id": "combobox-dynamic-options",
223
223
  "name": "DynamicOptions",
224
224
  "template": "<nve-combobox id=\"dynamic-options-combobox\">\n <input type=\"search\" aria-label=\"performance test\" />\n <datalist>\n <option>default</option>\n </datalist>\n</nve-combobox>\n<script type=\"module\">\n let i = 0;\n setInterval(function () {\n if (i > 100) clearInterval(interval);\n const datalist = document.querySelector(\"#dynamic-options-combobox datalist\");\n const option = document.createElement(\"option\");\n option.value = i + \" item\";\n datalist.append(option);\n i++;\n console.log(\"append\");\n }, 1000);\n</script>\n",
225
225
  "summary": "Dynamic options with datalist and select variants of combobox.",
@@ -230,7 +230,7 @@
230
230
  ]
231
231
  },
232
232
  {
233
- "id": "core-combobox_filter-demo",
233
+ "id": "combobox-filter-demo",
234
234
  "name": "FilterDemo",
235
235
  "template": "<combobox-demo></combobox-demo>\n",
236
236
  "summary": "Interactive demo showing progressive filter chips with dynamic combobox creation for complex filtering interfaces.",
@@ -31,7 +31,7 @@ var S = class extends l {
31
31
  static {
32
32
  this.metadata = {
33
33
  tag: "nve-combobox",
34
- version: "0.0.10"
34
+ version: "0.0.11"
35
35
  };
36
36
  }
37
37
  static {
@@ -3,7 +3,7 @@
3
3
  "entrypoint": "@nvidia-elements/core/copy-button/copy-button.examples.json",
4
4
  "items": [
5
5
  {
6
- "id": "core-copy-button_default",
6
+ "id": "copy-button",
7
7
  "name": "Default",
8
8
  "template": "<nve-copy-button value=\"hello\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n",
9
9
  "summary": "Standard copy button for copying text to the clipboard on click.",
@@ -12,7 +12,7 @@
12
12
  "tags": []
13
13
  },
14
14
  {
15
- "id": "core-copy-button_disabled",
15
+ "id": "copy-button-disabled",
16
16
  "name": "Disabled",
17
17
  "template": "<nve-copy-button disabled value=\"hello\"></nve-copy-button>\n",
18
18
  "summary": "Copy button in disabled state. Useful for showing when copying is not available or when the user doesn't have permission to copy.",
@@ -23,7 +23,7 @@
23
23
  ]
24
24
  },
25
25
  {
26
- "id": "core-copy-button_flat",
26
+ "id": "copy-button-flat",
27
27
  "name": "Flat",
28
28
  "template": "<nve-copy-button container=\"flat\" value=\"hello\"></nve-copy-button>\n<nve-copy-button container=\"flat\" disabled value=\"hello\"></nve-copy-button>\n",
29
29
  "summary": "Copy buttons with flat container styling, showing both enabled and disabled states. Ideal for inline usage where minimal visual impact matters.",
@@ -34,7 +34,7 @@
34
34
  ]
35
35
  },
36
36
  {
37
- "id": "core-copy-button_behavior-copy",
37
+ "id": "copy-button-behavior-copy",
38
38
  "name": "BehaviorCopy",
39
39
  "template": "<nve-copy-button value=\"hello\" behavior-copy></nve-copy-button>\n",
40
40
  "summary": "Copy button with behavior-copy attribute that automatically handles the copy functionality. Simplifies implementation by providing built-in copy behavior.",
@@ -43,7 +43,7 @@
43
43
  "tags": []
44
44
  },
45
45
  {
46
- "id": "core-copy-button_size",
46
+ "id": "copy-button-size",
47
47
  "name": "Size",
48
48
  "template": "<nve-copy-button size=\"sm\"></nve-copy-button>\n<nve-copy-button></nve-copy-button>\n<nve-copy-button size=\"lg\"></nve-copy-button>\n",
49
49
  "summary": "Copy buttons in different sizes (small, default, large). Useful for adapting to different UI contexts and design requirements.",
@@ -54,7 +54,7 @@
54
54
  ]
55
55
  },
56
56
  {
57
- "id": "core-copy-button_hint",
57
+ "id": "copy-button-hint",
58
58
  "name": "Hint",
59
59
  "template": "<h2 nve-text=\"body lg\" nve-layout=\"row align:vertical-center\">\n 2d628479c...\n <nve-copy-button\n container=\"flat\"\n value=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\"\n aria-label=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\"\n behavior-copy\n ></nve-copy-button>\n</h2>\n",
60
60
  "summary": "Copy button integrated with text content, showing how to copy truncated values like commit hashes. Perfect for code snippets, IDs, or other long text that users copy while viewing a shortened version.",
@@ -63,7 +63,7 @@
63
63
  "tags": []
64
64
  },
65
65
  {
66
- "id": "core-copy-button_icon",
66
+ "id": "copy-button-icon",
67
67
  "name": "Icon",
68
68
  "template": "<nve-copy-button value=\"ssh://elements.git\" aria-label=\"copy git branch\" behavior-copy>\n <nve-icon name=\"branch\" slot=\"icon\"></nve-icon>\n</nve-copy-button>\n",
69
69
  "summary": "Copy button with custom icon in the icon slot. Customizes the button appearance while maintaining copy functionality. Useful for context-specific icons like git branches, URLs, or other specialized content.",
@@ -72,7 +72,7 @@
72
72
  "tags": []
73
73
  },
74
74
  {
75
- "id": "core-copy-button_async-copy",
75
+ "id": "copy-button-async-copy",
76
76
  "name": "AsyncCopy",
77
77
  "template": "<nve-copy-button id=\"async-copy-button\" value=\"initial value\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n<script type=\"module\">\n const button = document.querySelector(\"#async-copy-button\");\n button.addEventListener(\"pointerdown\", () => {\n button.disabled = true;\n // do an async operation\n new Promise((resolve) => setTimeout(resolve, 2000)).then(() => {\n button.value = \"async value\";\n button.disabled = false;\n button.dispatchEvent(new Event(\"click\"));\n });\n });\n</script>\n",
78
78
  "summary": "Advanced pattern for handling long-running copy to clipboard operations.",
@@ -83,7 +83,7 @@
83
83
  ]
84
84
  },
85
85
  {
86
- "id": "core-copy-button_tooltip-position-override",
86
+ "id": "copy-button-tooltip-position-override",
87
87
  "name": "TooltipPositionOverride",
88
88
  "template": "<style>\n nve-copy-button.override-position-example {\n &::part(tooltip-arrow) {\n position-area: right center;\n translate: -50% 0%;\n transform: translate(-2px, 0) rotate(45deg);\n }\n }\n</style>\n<nve-copy-button\n class=\"override-position-example\"\n value=\"hello\"\n aria-label=\"copy value\"\n behavior-copy\n style=\"position: absolute; top: 12px; right: 12px\"\n></nve-copy-button>\n",
89
89
  "summary": "Popover position override in a copy button.",
@@ -22,7 +22,7 @@ var p = class extends a {
22
22
  static {
23
23
  this.metadata = {
24
24
  tag: "nve-copy-button",
25
- version: "0.0.10"
25
+ version: "0.0.11"
26
26
  };
27
27
  }
28
28
  static {