@aurodesignsystem/auro-formkit 2.0.0-beta.1 → 2.0.0-beta.3

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 (216) hide show
  1. package/.turbo/cache/013a48308b893dac-meta.json +1 -1
  2. package/.turbo/cache/02244170c798a2bd-meta.json +1 -0
  3. package/.turbo/cache/02244170c798a2bd.tar.zst +0 -0
  4. package/.turbo/cache/07ca42419b9f050c-meta.json +1 -1
  5. package/.turbo/cache/0cea4c1f34f3683b-meta.json +1 -1
  6. package/.turbo/cache/17259cf94d8f8925-meta.json +1 -1
  7. package/.turbo/cache/1ab37ce15d9be440-meta.json +1 -0
  8. package/.turbo/cache/1ab37ce15d9be440.tar.zst +0 -0
  9. package/.turbo/cache/1b9818717e4bdf9f-meta.json +1 -0
  10. package/.turbo/cache/1b9818717e4bdf9f.tar.zst +0 -0
  11. package/.turbo/cache/1c0f580d37370ba2-meta.json +1 -0
  12. package/.turbo/cache/1c0f580d37370ba2.tar.zst +0 -0
  13. package/.turbo/cache/1c99a949ec63ab35-meta.json +1 -1
  14. package/.turbo/cache/1de15d89eed2d760-meta.json +1 -1
  15. package/.turbo/cache/2110a4d14e0d11b2-meta.json +1 -0
  16. package/.turbo/cache/2110a4d14e0d11b2.tar.zst +0 -0
  17. package/.turbo/cache/257a7a26ea72dbc5-meta.json +1 -1
  18. package/.turbo/cache/2990aaa7ebc5b967-meta.json +1 -1
  19. package/.turbo/cache/2990aaa7ebc5b967.tar.zst +0 -0
  20. package/.turbo/cache/2fd056afdf4eb39d-meta.json +1 -0
  21. package/.turbo/cache/2fd056afdf4eb39d.tar.zst +0 -0
  22. package/.turbo/cache/3bf45120d0cc9bd8-meta.json +1 -1
  23. package/.turbo/cache/3e12285c614db539-meta.json +1 -0
  24. package/.turbo/cache/3e12285c614db539.tar.zst +0 -0
  25. package/.turbo/cache/45035bf5c4147ccd-meta.json +1 -1
  26. package/.turbo/cache/4f92cea2d8c63de2-meta.json +1 -1
  27. package/.turbo/cache/5bf2d3f7ba5891e0-meta.json +1 -0
  28. package/.turbo/cache/5bf2d3f7ba5891e0.tar.zst +0 -0
  29. package/.turbo/cache/5c16ce3cff5c9dff-meta.json +1 -1
  30. package/.turbo/cache/5f304c0f37ef25f3-meta.json +1 -1
  31. package/.turbo/cache/64de7a53e02db647-meta.json +1 -1
  32. package/.turbo/cache/691a74627ec57993-meta.json +1 -1
  33. package/.turbo/cache/69aae513b7ec6c7d-meta.json +1 -1
  34. package/.turbo/cache/6dd67d179191bda8-meta.json +1 -0
  35. package/.turbo/cache/6dd67d179191bda8.tar.zst +0 -0
  36. package/.turbo/cache/6dd7058e6703cb35-meta.json +1 -1
  37. package/.turbo/cache/73e9073a5274616d-meta.json +1 -1
  38. package/.turbo/cache/773edc0f83c8c5a5-meta.json +1 -1
  39. package/.turbo/cache/784c03fe9fd5ac05-meta.json +1 -1
  40. package/.turbo/cache/786a822763403879-meta.json +1 -1
  41. package/.turbo/cache/7e1043cffa69f327-meta.json +1 -0
  42. package/.turbo/cache/7e1043cffa69f327.tar.zst +0 -0
  43. package/.turbo/cache/80a13352066a9801-meta.json +1 -0
  44. package/.turbo/cache/80a13352066a9801.tar.zst +0 -0
  45. package/.turbo/cache/80b5d974184a01df-meta.json +1 -1
  46. package/.turbo/cache/87219c41a4ace9cd-meta.json +1 -1
  47. package/.turbo/cache/87219c41a4ace9cd.tar.zst +0 -0
  48. package/.turbo/cache/8954c6073396fadd-meta.json +1 -1
  49. package/.turbo/cache/8e79bd5c3a16a72e-meta.json +1 -0
  50. package/.turbo/cache/92daa6d7c389d548-meta.json +1 -1
  51. package/.turbo/cache/993dff2edb7b6766-meta.json +1 -1
  52. package/.turbo/cache/9a097d6576dadd64-meta.json +1 -1
  53. package/.turbo/cache/a63cbfecf0f78586-meta.json +1 -0
  54. package/.turbo/cache/a63cbfecf0f78586.tar.zst +0 -0
  55. package/.turbo/cache/a6a56bb802e1c20f-meta.json +1 -1
  56. package/.turbo/cache/a77bc920ea508bb8-meta.json +1 -1
  57. package/.turbo/cache/a77bc920ea508bb8.tar.zst +0 -0
  58. package/.turbo/cache/b2c66328fdd78093-meta.json +1 -0
  59. package/.turbo/cache/b2c66328fdd78093.tar.zst +0 -0
  60. package/.turbo/cache/b54fc4f664a7a5a0-meta.json +1 -1
  61. package/.turbo/cache/ba4418918621fbcd-meta.json +1 -1
  62. package/.turbo/cache/be7c23c37b8ec74b-meta.json +1 -1
  63. package/.turbo/cache/be7c23c37b8ec74b.tar.zst +0 -0
  64. package/.turbo/cache/bffc7582905c2a5e-meta.json +1 -0
  65. package/.turbo/cache/bffc7582905c2a5e.tar.zst +0 -0
  66. package/.turbo/cache/caa0b4ac8d2a04dd-meta.json +1 -1
  67. package/.turbo/cache/caa0b4ac8d2a04dd.tar.zst +0 -0
  68. package/.turbo/cache/cc81de9c0b452a7c-meta.json +1 -1
  69. package/.turbo/cache/d39e6ef95ebc4cc0-meta.json +1 -0
  70. package/.turbo/cache/d39e6ef95ebc4cc0.tar.zst +0 -0
  71. package/.turbo/cache/d572ebb3c833e8f4-meta.json +1 -0
  72. package/.turbo/cache/d572ebb3c833e8f4.tar.zst +0 -0
  73. package/.turbo/cache/d61543843c932504-meta.json +1 -0
  74. package/.turbo/cache/d61543843c932504.tar.zst +0 -0
  75. package/.turbo/cache/dad1301ac69bcb85-meta.json +1 -1
  76. package/.turbo/cache/dea5945f55c6aba5-meta.json +1 -0
  77. package/.turbo/cache/dea5945f55c6aba5.tar.zst +0 -0
  78. package/.turbo/cache/e992dab20aeefbaf-meta.json +1 -1
  79. package/.turbo/cache/e992dab20aeefbaf.tar.zst +0 -0
  80. package/.turbo/cache/f411e2deb0676959-meta.json +1 -0
  81. package/.turbo/cache/f411e2deb0676959.tar.zst +0 -0
  82. package/.turbo/cache/fa132b5b5f0e75f8-meta.json +1 -1
  83. package/.turbo/cache/fbbe2704bf9cb90b-meta.json +1 -1
  84. package/CHANGELOG.md +34 -0
  85. package/components/checkbox/.turbo/turbo-build.log +3 -3
  86. package/components/checkbox/.turbo/turbo-bundler.log +3 -3
  87. package/components/checkbox/README.md +8 -8
  88. package/components/checkbox/demo/api.md +53 -51
  89. package/components/checkbox/demo/api.min.js +32 -37
  90. package/components/checkbox/demo/index.md +62 -62
  91. package/components/checkbox/demo/index.min.js +32 -37
  92. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  93. package/components/checkbox/dist/auro-checkbox.d.ts +1 -1
  94. package/components/checkbox/dist/index.js +32 -37
  95. package/components/checkbox/src/auro-checkbox-group.js +2 -2
  96. package/components/checkbox/src/auro-checkbox.js +1 -1
  97. package/components/combobox/.turbo/turbo-build.log +3 -3
  98. package/components/combobox/demo/api.md +17 -15
  99. package/components/combobox/demo/api.min.js +104 -116
  100. package/components/combobox/demo/index.min.js +104 -116
  101. package/components/combobox/dist/auro-combobox.d.ts +11 -4
  102. package/components/combobox/dist/auro-combobox.d.ts.map +1 -1
  103. package/components/combobox/dist/index.js +103 -115
  104. package/components/combobox/src/auro-combobox.js +22 -20
  105. package/components/counter/.turbo/turbo-build.log +3 -3
  106. package/components/counter/.turbo/turbo-bundler.log +3 -3
  107. package/components/datepicker/.turbo/turbo-build.log +9 -8
  108. package/components/datepicker/demo/api.md +107 -87
  109. package/components/datepicker/demo/api.min.js +96 -130
  110. package/components/datepicker/demo/index.min.js +96 -130
  111. package/components/datepicker/dist/auro-datepicker.d.ts +6 -13
  112. package/components/datepicker/dist/auro-datepicker.d.ts.map +1 -1
  113. package/components/datepicker/dist/index.js +96 -130
  114. package/components/datepicker/src/auro-datepicker.js +15 -35
  115. package/components/dropdown/.turbo/turbo-build.log +3 -3
  116. package/components/dropdown/.turbo/turbo-bundler.log +2 -2
  117. package/components/form/.turbo/turbo-build.log +3 -3
  118. package/components/form/.turbo/turbo-bundler.log +3 -3
  119. package/components/input/.turbo/turbo-build$colon$sass.log +51 -1
  120. package/components/input/.turbo/turbo-build.log +56 -6
  121. package/components/input/.turbo/turbo-bundler.log +2 -2
  122. package/components/input/.turbo/turbo-sass$colon$render.log +6 -0
  123. package/components/input/demo/api.md +83 -83
  124. package/components/input/demo/api.min.js +52 -61
  125. package/components/input/demo/index.md +6 -6
  126. package/components/input/demo/index.min.js +52 -61
  127. package/components/input/dist/auro-input.d.ts.map +1 -1
  128. package/components/input/dist/base-input.d.ts +5 -12
  129. package/components/input/dist/base-input.d.ts.map +1 -1
  130. package/components/input/dist/index.js +52 -61
  131. package/components/input/dist/styles/mixins-css.d.ts +3 -0
  132. package/components/input/dist/styles/mixins-css.d.ts.map +1 -0
  133. package/components/input/src/auro-input.js +0 -1
  134. package/components/input/src/base-input.js +22 -25
  135. package/components/input/src/styles/borders.scss +3 -19
  136. package/components/input/src/styles/color.css +1 -2
  137. package/components/input/src/styles/color.scss +3 -10
  138. package/components/input/src/styles/input-css.js +1 -1
  139. package/components/input/src/styles/input.css +1 -1
  140. package/components/input/src/styles/input.scss +4 -1
  141. package/components/input/src/styles/label-css.js +1 -1
  142. package/components/input/src/styles/label.css +1 -1
  143. package/components/input/src/styles/label.scss +4 -7
  144. package/components/input/src/styles/mixins-css.js +2 -0
  145. package/components/input/src/styles/mixins.css +1 -0
  146. package/components/input/src/styles/mixins.scss +45 -0
  147. package/components/input/src/styles/notificationIcons-css.js +1 -1
  148. package/components/input/src/styles/notificationIcons.css +13 -12
  149. package/components/input/src/styles/notificationIcons.scss +17 -25
  150. package/components/input/src/styles/style-css.js +1 -1
  151. package/components/input/src/styles/style.css +15 -17
  152. package/components/input/src/styles/style.scss +0 -4
  153. package/components/menu/.turbo/turbo-build.log +3 -3
  154. package/components/menu/.turbo/turbo-bundler.log +3 -3
  155. package/components/menu/demo/api.min.js +1 -1
  156. package/components/menu/demo/index.min.js +1 -1
  157. package/components/menu/dist/auro-menu.d.ts +1 -1
  158. package/components/menu/dist/index.js +1 -1
  159. package/components/menu/src/auro-menu.js +1 -1
  160. package/components/radio/.turbo/turbo-build.log +3 -3
  161. package/components/radio/.turbo/turbo-bundler.log +3 -3
  162. package/components/radio/demo/api.md +3 -1
  163. package/components/radio/demo/api.min.js +30 -35
  164. package/components/radio/demo/index.min.js +30 -35
  165. package/components/radio/dist/index.js +30 -35
  166. package/components/radio/src/auro-radio-group.js +1 -1
  167. package/components/select/.turbo/turbo-build.log +3 -3
  168. package/components/select/demo/api.md +7 -11
  169. package/components/select/demo/api.min.js +33 -60
  170. package/components/select/demo/index.min.js +33 -56
  171. package/components/select/dist/auro-select.d.ts +2 -2
  172. package/components/select/dist/auro-select.d.ts.map +1 -1
  173. package/components/select/dist/index.js +32 -55
  174. package/components/select/src/auro-select.js +3 -21
  175. package/package.json +1 -1
  176. package/packages/form-validation/src/validation.js +29 -34
  177. package/.turbo/cache/0663fcbb1d711029-meta.json +0 -1
  178. package/.turbo/cache/0663fcbb1d711029.tar.zst +0 -0
  179. package/.turbo/cache/0a2b0a4df8a0443f-meta.json +0 -1
  180. package/.turbo/cache/120c8e207aa1ba35-meta.json +0 -1
  181. package/.turbo/cache/120c8e207aa1ba35.tar.zst +0 -0
  182. package/.turbo/cache/141bb7d9a95e288b-meta.json +0 -1
  183. package/.turbo/cache/141bb7d9a95e288b.tar.zst +0 -0
  184. package/.turbo/cache/17dd4bdef6550a07-meta.json +0 -1
  185. package/.turbo/cache/17dd4bdef6550a07.tar.zst +0 -0
  186. package/.turbo/cache/32c0b9995fb5f8dd-meta.json +0 -1
  187. package/.turbo/cache/32c0b9995fb5f8dd.tar.zst +0 -0
  188. package/.turbo/cache/56cb35d4c7473a23-meta.json +0 -1
  189. package/.turbo/cache/56cb35d4c7473a23.tar.zst +0 -0
  190. package/.turbo/cache/626afdc67e0cb540-meta.json +0 -1
  191. package/.turbo/cache/626afdc67e0cb540.tar.zst +0 -0
  192. package/.turbo/cache/6ef81cf9a66f982a-meta.json +0 -1
  193. package/.turbo/cache/6ef81cf9a66f982a.tar.zst +0 -0
  194. package/.turbo/cache/9154e8fe6ab767ea-meta.json +0 -1
  195. package/.turbo/cache/9154e8fe6ab767ea.tar.zst +0 -0
  196. package/.turbo/cache/a49cc58242467fdc-meta.json +0 -1
  197. package/.turbo/cache/a49cc58242467fdc.tar.zst +0 -0
  198. package/.turbo/cache/af061e7a077a9ba5-meta.json +0 -1
  199. package/.turbo/cache/af061e7a077a9ba5.tar.zst +0 -0
  200. package/.turbo/cache/b50f1b283b4b81cd-meta.json +0 -1
  201. package/.turbo/cache/b50f1b283b4b81cd.tar.zst +0 -0
  202. package/.turbo/cache/bb8b41cd0ade3986-meta.json +0 -1
  203. package/.turbo/cache/bb8b41cd0ade3986.tar.zst +0 -0
  204. package/.turbo/cache/bf85bc040b7e64db-meta.json +0 -1
  205. package/.turbo/cache/bf85bc040b7e64db.tar.zst +0 -0
  206. package/.turbo/cache/cd5f6987783fb56d-meta.json +0 -1
  207. package/.turbo/cache/cd5f6987783fb56d.tar.zst +0 -0
  208. package/.turbo/cache/cd845bb6102c589a-meta.json +0 -1
  209. package/.turbo/cache/cd845bb6102c589a.tar.zst +0 -0
  210. package/.turbo/cache/ce67b6522dd09e64-meta.json +0 -1
  211. package/.turbo/cache/ce67b6522dd09e64.tar.zst +0 -0
  212. package/.turbo/cache/d7a47b77deb3d9a4-meta.json +0 -1
  213. package/.turbo/cache/d7a47b77deb3d9a4.tar.zst +0 -0
  214. package/.turbo/cache/ff58f630c9d69af4-meta.json +0 -1
  215. package/.turbo/cache/ff58f630c9d69af4.tar.zst +0 -0
  216. /package/.turbo/cache/{0a2b0a4df8a0443f.tar.zst → 8e79bd5c3a16a72e.tar.zst} +0 -0
package/components/checkbox/demo/index.md CHANGED
@@ -32,10 +32,10 @@ The `<auro-checkbox>` element should be used in situations where users may:
32
32
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
33
33
  <auro-checkbox-group>
34
34
  <span slot="legend">Form label goes here</span>
35
- <auro-checkbox value="checkbox option" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
36
- <auro-checkbox value="checkbox option" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
37
- <auro-checkbox value="checkbox option" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
38
- <auro-checkbox value="checkbox option" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
35
+ <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
36
+ <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
37
+ <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
38
+ <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
39
39
  </auro-checkbox-group>
40
40
  <!-- AURO-GENERATED-CONTENT:END -->
41
41
  </div>
@@ -47,10 +47,10 @@ The `<auro-checkbox>` element should be used in situations where users may:
47
47
  ```html
48
48
  <auro-checkbox-group>
49
49
  <span slot="legend">Form label goes here</span>
50
- <auro-checkbox value="checkbox option" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
51
- <auro-checkbox value="checkbox option" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
52
- <auro-checkbox value="checkbox option" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
53
- <auro-checkbox value="checkbox option" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
50
+ <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
51
+ <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
52
+ <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
53
+ <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
54
54
  </auro-checkbox-group>
55
55
  ```
56
56
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -69,10 +69,10 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
69
69
  <!-- The below content is automatically added from ./../apiExamples/disabledGroup.html -->
70
70
  <auro-checkbox-group disabled>
71
71
  <span slot="legend">Form label goes here</span>
72
- <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
73
- <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
74
- <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
75
- <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
72
+ <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
73
+ <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
74
+ <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
75
+ <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
76
76
  </auro-checkbox-group>
77
77
  <!-- AURO-GENERATED-CONTENT:END -->
78
78
  </div>
@@ -84,10 +84,10 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
84
84
  ```html
85
85
  <auro-checkbox-group disabled>
86
86
  <span slot="legend">Form label goes here</span>
87
- <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
88
- <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
89
- <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
90
- <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
87
+ <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
88
+ <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
89
+ <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
90
+ <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
91
91
  </auro-checkbox-group>
92
92
  ```
93
93
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -102,10 +102,10 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
102
102
  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
103
103
  <auro-checkbox-group>
104
104
  <span slot="legend">Form label goes here</span>
105
- <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
106
- <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
107
- <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
108
- <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
105
+ <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
106
+ <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
107
+ <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
108
+ <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
109
109
  </auro-checkbox-group>
110
110
  <!-- AURO-GENERATED-CONTENT:END -->
111
111
  </div>
@@ -117,10 +117,10 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
117
117
  ```html
118
118
  <auro-checkbox-group>
119
119
  <span slot="legend">Form label goes here</span>
120
- <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
121
- <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
122
- <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
123
- <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
120
+ <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
121
+ <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
122
+ <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
123
+ <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
124
124
  </auro-checkbox-group>
125
125
  ```
126
126
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -135,10 +135,10 @@ When present, the `required` attribute specifies that at least one or more `<aur
135
135
  <!-- The below content is automatically added from ./../apiExamples/required.html -->
136
136
  <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
137
137
  <span slot="legend">Form label goes here</span>
138
- <auro-checkbox value="checked option" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
139
- <auro-checkbox value="checkbox Option" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
140
- <auro-checkbox value="checkbox Option" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
141
- <auro-checkbox value="checkbox Option" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
138
+ <auro-checkbox value="value1" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
139
+ <auro-checkbox value="value2" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
140
+ <auro-checkbox value="value3" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
141
+ <auro-checkbox value="value4" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
142
142
  </auro-checkbox-group>
143
143
  <!-- AURO-GENERATED-CONTENT:END -->
144
144
  </div>
@@ -150,10 +150,10 @@ When present, the `required` attribute specifies that at least one or more `<aur
150
150
  ```html
151
151
  <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
152
152
  <span slot="legend">Form label goes here</span>
153
- <auro-checkbox value="checked option" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
154
- <auro-checkbox value="checkbox Option" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
155
- <auro-checkbox value="checkbox Option" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
156
- <auro-checkbox value="checkbox Option" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
153
+ <auro-checkbox value="value1" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
154
+ <auro-checkbox value="value2" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
155
+ <auro-checkbox value="value3" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
156
+ <auro-checkbox value="value4" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
157
157
  </auro-checkbox-group>
158
158
  ```
159
159
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -172,10 +172,10 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
172
172
  <!-- The below content is automatically added from ./../apiExamples/errorGroup.html -->
173
173
  <auro-checkbox-group error="custom error">
174
174
  <span slot="legend">Form label goes here</span>
175
- <auro-checkbox value="error checkbox option" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
176
- <auro-checkbox value="error checkbox option" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
177
- <auro-checkbox value="error checkbox option" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
178
- <auro-checkbox value="error checkbox option" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
175
+ <auro-checkbox value="error-value1" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
176
+ <auro-checkbox value="error-value2" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
177
+ <auro-checkbox value="error-value3" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
178
+ <auro-checkbox value="error-value4" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
179
179
  </auro-checkbox-group>
180
180
  <!-- AURO-GENERATED-CONTENT:END -->
181
181
  </div>
@@ -187,10 +187,10 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
187
187
  ```html
188
188
  <auro-checkbox-group error="custom error">
189
189
  <span slot="legend">Form label goes here</span>
190
- <auro-checkbox value="error checkbox option" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
191
- <auro-checkbox value="error checkbox option" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
192
- <auro-checkbox value="error checkbox option" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
193
- <auro-checkbox value="error checkbox option" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
190
+ <auro-checkbox value="error-value1" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
191
+ <auro-checkbox value="error-value2" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
192
+ <auro-checkbox value="error-value3" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
193
+ <auro-checkbox value="error-value4" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
194
194
  </auro-checkbox-group>
195
195
  ```
196
196
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -205,9 +205,9 @@ Using the `horizontal` attribute will render the checkbox options on a horizonta
205
205
  <!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
206
206
  <auro-checkbox-group horizontal>
207
207
  <span slot="legend">Form label goes here</span>
208
- <auro-checkbox value="checkbox option" value="yes" id="checkbox-horizontal1">Yes</auro-checkbox>
209
- <auro-checkbox value="checkbox option" value="no" id="checkbox-horizontal2">No</auro-checkbox>
210
- <auro-checkbox value="checkbox option" value="maybe" id="checkbox-horizontal3">Maybe</auro-checkbox>
208
+ <auro-checkbox value="yes" name="yes" id="checkbox-horizontal1">Yes</auro-checkbox>
209
+ <auro-checkbox value="no" name="no" id="checkbox-horizontal2">No</auro-checkbox>
210
+ <auro-checkbox value="maybe" name="maybe" id="checkbox-horizontal3">Maybe</auro-checkbox>
211
211
  </auro-checkbox-group>
212
212
  <!-- AURO-GENERATED-CONTENT:END -->
213
213
  </div>
@@ -219,9 +219,9 @@ Using the `horizontal` attribute will render the checkbox options on a horizonta
219
219
  ```html
220
220
  <auro-checkbox-group horizontal>
221
221
  <span slot="legend">Form label goes here</span>
222
- <auro-checkbox value="checkbox option" value="yes" id="checkbox-horizontal1">Yes</auro-checkbox>
223
- <auro-checkbox value="checkbox option" value="no" id="checkbox-horizontal2">No</auro-checkbox>
224
- <auro-checkbox value="checkbox option" value="maybe" id="checkbox-horizontal3">Maybe</auro-checkbox>
222
+ <auro-checkbox value="yes" name="yes" id="checkbox-horizontal1">Yes</auro-checkbox>
223
+ <auro-checkbox value="no" name="no" id="checkbox-horizontal2">No</auro-checkbox>
224
+ <auro-checkbox value="maybe" name="maybe" id="checkbox-horizontal3">Maybe</auro-checkbox>
225
225
  </auro-checkbox-group>
226
226
  ```
227
227
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -236,10 +236,10 @@ Using the `horizontal` attribute has a limit of 3 options. Beyond three, options
236
236
  <!-- The below content is automatically added from ./../apiExamples/horizontalLimit.html -->
237
237
  <auro-checkbox-group horizontal>
238
238
  <span slot="legend">Form label goes here</span>
239
- <auro-checkbox value="checkbox option" value="yes" id="checkbox-horizontalLimit1">Yes</auro-checkbox>
240
- <auro-checkbox value="checkbox option" value="no" id="checkbox-horizontalLimit2">No</auro-checkbox>
241
- <auro-checkbox value="checkbox option" value="maybe" id="checkbox-horizontalLimit3">Maybe</auro-checkbox>
242
- <auro-checkbox value="checkbox optiom" value="not sure" id="checkbox-horizontalLimit4">Not Sure</auro-checkbox>
239
+ <auro-checkbox value="yes" name="yes" id="checkbox-horizontalLimit1">Yes</auro-checkbox>
240
+ <auro-checkbox value="no" name="no" id="checkbox-horizontalLimit2">No</auro-checkbox>
241
+ <auro-checkbox value="maybe" name="maybe" id="checkbox-horizontalLimit3">Maybe</auro-checkbox>
242
+ <auro-checkbox value="not sure" name="not sure" id="checkbox-horizontalLimit4">Not Sure</auro-checkbox>
243
243
  </auro-checkbox-group>
244
244
  <!-- AURO-GENERATED-CONTENT:END -->
245
245
  </div>
@@ -251,10 +251,10 @@ Using the `horizontal` attribute has a limit of 3 options. Beyond three, options
251
251
  ```html
252
252
  <auro-checkbox-group horizontal>
253
253
  <span slot="legend">Form label goes here</span>
254
- <auro-checkbox value="checkbox option" value="yes" id="checkbox-horizontalLimit1">Yes</auro-checkbox>
255
- <auro-checkbox value="checkbox option" value="no" id="checkbox-horizontalLimit2">No</auro-checkbox>
256
- <auro-checkbox value="checkbox option" value="maybe" id="checkbox-horizontalLimit3">Maybe</auro-checkbox>
257
- <auro-checkbox value="checkbox optiom" value="not sure" id="checkbox-horizontalLimit4">Not Sure</auro-checkbox>
254
+ <auro-checkbox value="yes" name="yes" id="checkbox-horizontalLimit1">Yes</auro-checkbox>
255
+ <auro-checkbox value="no" name="no" id="checkbox-horizontalLimit2">No</auro-checkbox>
256
+ <auro-checkbox value="maybe" name="maybe" id="checkbox-horizontalLimit3">Maybe</auro-checkbox>
257
+ <auro-checkbox value="not sure" name="not sure" id="checkbox-horizontalLimit4">Not Sure</auro-checkbox>
258
258
  </auro-checkbox-group>
259
259
  ```
260
260
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -281,10 +281,10 @@ This will create a new custom element that you can use in your HTML that will fu
281
281
  <!-- The below content is automatically added from ./../apiExamples/customCheckbox.html -->
282
282
  <custom-checkbox-group>
283
283
  <span slot="legend">Form label goes here</span>
284
- <custom-checkbox value="checkbox option" name="example1" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
285
- <custom-checkbox value="checkbox option" name="example2" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
286
- <custom-checkbox value="checkbox option" name="example3" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
287
- <custom-checkbox value="checkbox option" name="example4" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
284
+ <custom-checkbox value="value1" name="example1" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
285
+ <custom-checkbox value="value2" name="example2" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
286
+ <custom-checkbox value="value3" name="example3" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
287
+ <custom-checkbox value="value4" name="example4" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
288
288
  </custom-checkbox-group>
289
289
  <!-- AURO-GENERATED-CONTENT:END -->
290
290
  </div>
@@ -296,10 +296,10 @@ This will create a new custom element that you can use in your HTML that will fu
296
296
  ```html
297
297
  <custom-checkbox-group>
298
298
  <span slot="legend">Form label goes here</span>
299
- <custom-checkbox value="checkbox option" name="example1" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
300
- <custom-checkbox value="checkbox option" name="example2" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
301
- <custom-checkbox value="checkbox option" name="example3" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
302
- <custom-checkbox value="checkbox option" name="example4" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
299
+ <custom-checkbox value="value1" name="example1" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
300
+ <custom-checkbox value="value2" name="example2" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
301
+ <custom-checkbox value="value3" name="example3" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
302
+ <custom-checkbox value="value4" name="example4" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
303
303
  </custom-checkbox-group>
304
304
  ```
305
305
  <!-- AURO-GENERATED-CONTENT:END -->
package/components/checkbox/demo/index.min.js CHANGED
@@ -133,7 +133,7 @@ class AuroLibraryRuntimeUtils {
133
133
  * @attr {Boolean} error - If set to true, sets an error state on the checkbox.
134
134
  * @attr {String} id - Sets the individual `id` per element.
135
135
  * @attr {String} name - Accepts any string, `DOMString` representing the value of the input.
136
- * @attr {String} value - Sets the element's input value.
136
+ * @attr {String} value - Sets the element's input value. Must be unique within an auro-checkbox-group element.
137
137
  * @csspart checkbox - apply css to a specific checkbox.
138
138
  * @csspart checkbox-input - apply css to a specific checkbox's input.
139
139
  * @csspart checkbox-label - apply css to a specific checkbox's label.
@@ -346,20 +346,20 @@ class AuroFormValidation {
346
346
  const pattern = new RegExp(`^${elem.pattern}$`, 'u');
347
347
 
348
348
  if (!pattern.test(elem.value)) {
349
- elem.validity = 'badInput';
350
- elem.setCustomValidity = elem.setCustomValidityBadInput || '';
349
+ elem.validity = 'patternMismatch';
350
+ elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
351
351
  }
352
352
  }
353
353
 
354
354
  // Length > 0 is required to prevent the error message from showing when the input is empty
355
355
  if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
356
356
  elem.validity = 'tooShort';
357
- elem.setCustomValidity = elem.setCustomValidityTooShort || '';
357
+ elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
358
358
  }
359
359
 
360
360
  if (elem.value?.length > elem.maxLength) {
361
361
  elem.validity = 'tooLong';
362
- elem.setCustomValidity = elem.setCustomValidityTooLong || '';
362
+ elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
363
363
  }
364
364
  }
365
365
 
@@ -375,33 +375,32 @@ class AuroFormValidation {
375
375
  const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
376
376
 
377
377
  if (!elem.value.match(emailRegex)) {
378
- elem.validity = 'badInput';
379
- elem.setCustomValidity = elem.setCustomValidityForType || '';
378
+ elem.validity = 'patternMismatch';
379
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
380
380
  }
381
381
  } else if (elem.type === 'credit-card') {
382
382
  if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
383
383
  elem.validity = 'tooShort';
384
- elem.setCustomValidity = elem.setCustomValidityForType || '';
384
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
385
385
  }
386
386
  } else if (elem.type === 'number') {
387
387
  if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
388
388
  elem.validity = 'rangeOverflow';
389
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
389
+ elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
390
390
  }
391
391
 
392
- if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
392
+ if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
393
393
  elem.validity = 'rangeUnderflow';
394
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
394
+ elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
395
395
  }
396
-
397
396
  } else if (elem.type === 'month-day-year' ||
398
397
  elem.type === 'month-year' ||
399
398
  elem.type === 'month-fullYear' ||
400
399
  elem.type === 'year-month-day'
401
400
  ) {
402
- if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
401
+ if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
403
402
  elem.validity = 'tooShort';
404
- elem.setCustomValidity = elem.setCustomValidityForType || '';
403
+ elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
405
404
  } else {
406
405
  const valueDate = new Date(elem.value);
407
406
 
@@ -411,7 +410,7 @@ class AuroFormValidation {
411
410
 
412
411
  if (valueDate > maxDate) {
413
412
  elem.validity = 'rangeOverflow';
414
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
413
+ elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
415
414
  }
416
415
  }
417
416
 
@@ -421,7 +420,7 @@ class AuroFormValidation {
421
420
 
422
421
  if (valueDate < minDate) {
423
422
  elem.validity = 'rangeUnderflow';
424
- elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
423
+ elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
425
424
  }
426
425
  }
427
426
  }
@@ -444,10 +443,10 @@ class AuroFormValidation {
444
443
 
445
444
  if (elem.hasAttribute('error')) {
446
445
  elem.validity = 'customError';
447
- elem.setCustomValidity = elem.error;
446
+ elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
448
447
  } else if (validationShouldRun) {
449
448
  elem.validity = 'valid';
450
- elem.setCustomValidity = '';
449
+ elem.errorMessage = '';
451
450
 
452
451
  /**
453
452
  * Only validate once we interact with the datepicker
@@ -459,7 +458,7 @@ class AuroFormValidation {
459
458
  let hasValue = elem.value && elem.value.length > 0;
460
459
 
461
460
  // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
462
- if (this.auroInputElements && this.auroInputElements.length === 2) {
461
+ if (this.auroInputElements?.length === 2) {
463
462
  if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
464
463
  hasValue = false;
465
464
  }
@@ -467,31 +466,27 @@ class AuroFormValidation {
467
466
 
468
467
  if (!hasValue && elem.required) {
469
468
  elem.validity = 'valueMissing';
470
- elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
469
+ elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
471
470
  } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
472
471
  this.validateType(elem);
473
472
  this.validateAttributes(elem);
474
473
  }
475
474
  }
476
475
 
477
- if (this.auroInputElements && this.auroInputElements.length > 0) {
476
+ if (this.auroInputElements?.length > 0) {
478
477
  elem.validity = this.auroInputElements[0].validity;
479
- elem.setCustomValidity = this.auroInputElements[0].setCustomValidity;
478
+ elem.errorMessage = this.auroInputElements[0].errorMessage;
480
479
 
481
- if (elem.validity === 'valid') {
482
- if (this.auroInputElements.length > 1) {
483
- elem.validity = this.auroInputElements[1].validity;
484
- elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
485
- }
480
+ if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
481
+ elem.validity = this.auroInputElements[1].validity;
482
+ elem.errorMessage = this.auroInputElements[1].errorMessage;
486
483
  }
487
484
  }
488
485
 
489
486
  if (validationShouldRun || elem.hasAttribute('error')) {
490
- if (elem.validity && elem.validity !== 'valid') {
491
- // Use the validity message override if it is declared
492
- if (elem.ValidityMessageOverride) {
493
- elem.setCustomValidity = elem.ValidityMessageOverride;
494
- }
487
+ // Use the validity message override if it is declared
488
+ if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
489
+ elem.errorMessage = elem.ValidityMessageOverride;
495
490
  }
496
491
 
497
492
  this.getErrorMessage(elem);
@@ -537,18 +532,18 @@ class AuroFormValidation {
537
532
  if (elem.validity !== 'valid') {
538
533
  if (elem.setCustomValidity) {
539
534
  elem.errorMessage = elem.setCustomValidity;
540
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
535
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
541
536
  const input = elem.renderRoot.querySelector('input');
542
537
 
543
538
  if (input.validationMessage.length > 0) {
544
539
  elem.errorMessage = input.validationMessage;
545
540
  }
546
- } else if (this.inputElements && this.inputElements.length > 0) {
541
+ } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
547
542
  const firstInput = this.inputElements[0];
548
543
 
549
544
  if (firstInput.validationMessage.length > 0) {
550
545
  elem.errorMessage = firstInput.validationMessage;
551
- } else if (this.inputElements.length === 2) {
546
+ } else if (this.inputElements?.length === 2) {
552
547
  const secondInput = this.inputElements[1];
553
548
 
554
549
  if (secondInput.validationMessage.length > 0) {
@@ -577,7 +572,7 @@ var colorCss = i$4`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([d
577
572
  * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
578
573
  * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
579
574
  * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
580
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
575
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets the validity message to the attribute value.
581
576
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
582
577
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
583
578
  * @attr {Boolean} horizontal - If set, checkboxes will be aligned horizontally.
@@ -877,7 +872,7 @@ class AuroCheckboxGroup extends r {
877
872
  </p>`
878
873
  : x`
879
874
  <p class="checkboxGroupElement-helpText" role="alert" aria-live="assertive" part="helpText">
880
- ${this.setCustomValidity}
875
+ ${this.errorMessage}
881
876
  </p>`
882
877
  }
883
878
  `;
package/components/checkbox/dist/auro-checkbox-group.d.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
6
6
  * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
7
7
  * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
8
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
8
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets the validity message to the attribute value.
9
9
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
10
10
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
11
11
  * @attr {Boolean} horizontal - If set, checkboxes will be aligned horizontally.
package/components/checkbox/dist/auro-checkbox.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  * @attr {Boolean} error - If set to true, sets an error state on the checkbox.
7
7
  * @attr {String} id - Sets the individual `id` per element.
8
8
  * @attr {String} name - Accepts any string, `DOMString` representing the value of the input.
9
- * @attr {String} value - Sets the element's input value.
9
+ * @attr {String} value - Sets the element's input value. Must be unique within an auro-checkbox-group element.
10
10
  * @csspart checkbox - apply css to a specific checkbox.
11
11
  * @csspart checkbox-input - apply css to a specific checkbox's input.
12
12
  * @csspart checkbox-label - apply css to a specific checkbox's label.