@aurodesignsystem-dev/auro-formkit 0.0.0-pr1456.1 → 0.0.0-pr1457.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (281) hide show
  1. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +10 -10
  3. package/components/bibtemplate/dist/registered.js +10 -10
  4. package/components/checkbox/README.md +26 -56
  5. package/components/checkbox/demo/accessibility.html +48 -0
  6. package/components/checkbox/demo/accessibility.md +44 -0
  7. package/components/checkbox/demo/api.html +17 -26
  8. package/components/checkbox/demo/api.md +0 -396
  9. package/components/checkbox/demo/api.min.js +2 -2106
  10. package/components/checkbox/demo/customize.html +51 -0
  11. package/components/checkbox/demo/customize.md +361 -0
  12. package/components/checkbox/demo/demo-support.js +60 -0
  13. package/components/checkbox/demo/demo-support.min.js +55732 -0
  14. package/components/checkbox/demo/design.html +51 -0
  15. package/components/checkbox/demo/design.md +149 -0
  16. package/components/checkbox/demo/getting-started.html +51 -0
  17. package/components/checkbox/demo/getting-started.md +261 -0
  18. package/components/checkbox/demo/index.html +17 -21
  19. package/components/checkbox/demo/index.md +158 -45
  20. package/components/checkbox/demo/index.min.js +2 -3
  21. package/components/checkbox/demo/install.md +82 -0
  22. package/components/checkbox/demo/keyboard-behavior.html +48 -0
  23. package/components/checkbox/demo/readme.html +10 -18
  24. package/components/checkbox/demo/readme.md +26 -56
  25. package/components/checkbox/demo/styles.min.css +1 -0
  26. package/components/checkbox/demo/styles.scss +1 -0
  27. package/components/checkbox/demo/voiceover.html +48 -0
  28. package/components/checkbox/demo/voiceover.md +37 -0
  29. package/components/checkbox/dist/auro-checkbox-group.d.ts +6 -6
  30. package/components/checkbox/dist/auro-checkbox.d.ts +8 -9
  31. package/components/checkbox/dist/index.js +2 -3
  32. package/components/checkbox/dist/registered.js +2 -3
  33. package/components/combobox/README.md +41 -66
  34. package/components/combobox/demo/accessibility.html +50 -0
  35. package/components/combobox/demo/accessibility.md +77 -0
  36. package/components/combobox/demo/api.html +8 -20
  37. package/components/combobox/demo/api.md +54 -2334
  38. package/components/combobox/demo/api.min.js +3 -17971
  39. package/components/combobox/demo/customize.html +52 -0
  40. package/components/combobox/demo/customize.js +24 -0
  41. package/components/combobox/demo/customize.md +1249 -0
  42. package/components/combobox/demo/customize.min.js +177 -0
  43. package/components/combobox/demo/demo-support.js +60 -0
  44. package/components/combobox/demo/demo-support.min.js +55732 -0
  45. package/components/combobox/demo/design.html +53 -0
  46. package/components/combobox/demo/design.md +283 -0
  47. package/components/combobox/demo/getting-started.html +52 -0
  48. package/components/combobox/demo/getting-started.js +21 -0
  49. package/components/combobox/demo/getting-started.md +397 -0
  50. package/components/combobox/demo/getting-started.min.js +12 -0
  51. package/components/combobox/demo/index.html +16 -22
  52. package/components/combobox/demo/index.js +3 -2
  53. package/components/combobox/demo/index.md +298 -188
  54. package/components/combobox/demo/index.min.js +13 -17956
  55. package/components/combobox/demo/install.md +77 -0
  56. package/components/combobox/demo/{keyboardBehavior.html → keyboard-behavior.html} +5 -11
  57. package/components/combobox/demo/keyboard-behavior.md +276 -0
  58. package/components/combobox/demo/readme.html +5 -11
  59. package/components/combobox/demo/readme.md +41 -66
  60. package/components/combobox/demo/registered.min.js +18095 -0
  61. package/components/combobox/demo/styles.css +974 -0
  62. package/components/combobox/demo/styles.min.css +1 -0
  63. package/components/combobox/demo/styles.scss +1 -0
  64. package/components/combobox/demo/swap-value.min.js +16 -0
  65. package/components/combobox/demo/voiceover.html +59 -0
  66. package/components/combobox/demo/voiceover.md +118 -0
  67. package/components/combobox/dist/auro-combobox.d.ts +35 -35
  68. package/components/combobox/dist/index.js +183 -46
  69. package/components/combobox/dist/registered.js +183 -46
  70. package/components/counter/README.md +37 -55
  71. package/components/counter/demo/api.md +745 -813
  72. package/components/counter/demo/api.min.js +182 -44
  73. package/components/counter/demo/index.md +28 -32
  74. package/components/counter/demo/index.min.js +182 -44
  75. package/components/counter/demo/keyboard-behavior.md +127 -0
  76. package/components/counter/demo/readme.md +37 -55
  77. package/components/counter/dist/auro-counter-group.d.ts +2 -2
  78. package/components/counter/dist/auro-counter.d.ts +10 -10
  79. package/components/counter/dist/index.js +181 -43
  80. package/components/counter/dist/registered.js +181 -43
  81. package/components/datepicker/README.md +23 -51
  82. package/components/datepicker/demo/accessibility.html +50 -0
  83. package/components/datepicker/demo/accessibility.md +64 -0
  84. package/components/datepicker/demo/api.md +0 -1774
  85. package/components/datepicker/demo/api.min.js +2 -24475
  86. package/components/datepicker/demo/auro-datepicker.min.js +24613 -0
  87. package/components/datepicker/demo/customize.html +52 -0
  88. package/components/datepicker/demo/customize.md +723 -0
  89. package/components/datepicker/demo/demo-support.js +60 -0
  90. package/components/datepicker/demo/demo-support.min.js +55732 -0
  91. package/components/datepicker/demo/design.html +54 -0
  92. package/components/datepicker/demo/design.md +158 -0
  93. package/components/datepicker/demo/getting-started.html +52 -0
  94. package/components/datepicker/demo/getting-started.md +237 -0
  95. package/components/datepicker/demo/index.html +14 -35
  96. package/components/datepicker/demo/index.md +201 -152
  97. package/components/datepicker/demo/index.min.js +1 -24474
  98. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  99. package/components/datepicker/demo/readme.md +23 -51
  100. package/components/datepicker/demo/styles.min.css +1 -0
  101. package/components/datepicker/demo/styles.scss +1 -0
  102. package/components/datepicker/demo/voiceover.html +59 -0
  103. package/components/datepicker/demo/voiceover.md +98 -0
  104. package/components/datepicker/dist/index.js +194 -57
  105. package/components/datepicker/dist/registered.js +194 -57
  106. package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +2 -2
  107. package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +13 -13
  108. package/components/datepicker/dist/src/iconVersion.d.ts +2 -0
  109. package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +4 -4
  110. package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +3 -3
  111. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +2 -2
  112. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +1 -1
  113. package/components/dropdown/README.md +35 -53
  114. package/components/dropdown/demo/api.md +717 -773
  115. package/components/dropdown/demo/api.min.js +161 -23
  116. package/components/dropdown/demo/index.md +120 -130
  117. package/components/dropdown/demo/index.min.js +161 -23
  118. package/components/dropdown/demo/{keyboardBehavior.md → keyboard-behavior.md} +52 -57
  119. package/components/dropdown/demo/readme.md +35 -53
  120. package/components/dropdown/dist/auro-dropdown.d.ts +22 -22
  121. package/components/dropdown/dist/auro-dropdownBib.d.ts +3 -3
  122. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +1 -1
  123. package/components/dropdown/dist/iconVersion.d.ts +1 -1
  124. package/components/dropdown/dist/index.js +160 -22
  125. package/components/dropdown/dist/registered.js +160 -22
  126. package/components/form/README.md +14 -34
  127. package/components/form/demo/api.md +156 -162
  128. package/components/form/demo/api.min.js +756 -208
  129. package/components/form/demo/index.md +27 -33
  130. package/components/form/demo/index.min.js +756 -208
  131. package/components/form/demo/keyboard-behavior.md +38 -0
  132. package/components/form/demo/readme.md +14 -34
  133. package/components/input/README.md +28 -53
  134. package/components/input/demo/accessibility.html +37 -0
  135. package/components/input/demo/accessibility.md +69 -0
  136. package/components/input/demo/api.html +17 -23
  137. package/components/input/demo/api.js +4 -23
  138. package/components/input/demo/api.md +67 -1359
  139. package/components/input/demo/api.min.js +1 -7453
  140. package/components/input/demo/auro-input.min.js +7362 -0
  141. package/components/input/demo/customize.html +53 -0
  142. package/components/input/demo/customize.js +25 -0
  143. package/components/input/demo/customize.md +1372 -0
  144. package/components/input/demo/customize.min.js +71 -0
  145. package/components/input/demo/demo-support.js +60 -0
  146. package/components/input/demo/demo-support.min.js +55732 -0
  147. package/components/input/demo/design.html +38 -0
  148. package/components/input/demo/design.md +224 -0
  149. package/components/input/demo/getting-started.html +52 -0
  150. package/components/input/demo/getting-started.js +8 -0
  151. package/components/input/demo/getting-started.md +312 -0
  152. package/components/input/demo/getting-started.min.js +9 -0
  153. package/components/input/demo/index.html +16 -23
  154. package/components/input/demo/index.js +0 -11
  155. package/components/input/demo/index.md +180 -154
  156. package/components/input/demo/index.min.js +1 -7373
  157. package/components/input/demo/keyboard-behavior.html +37 -0
  158. package/components/input/demo/readme.md +28 -53
  159. package/components/input/demo/styles.css +974 -0
  160. package/components/input/demo/styles.min.css +1 -0
  161. package/components/input/demo/styles.scss +1 -0
  162. package/components/input/demo/voiceover.html +37 -0
  163. package/components/input/demo/voiceover.md +70 -0
  164. package/components/input/dist/auro-input.d.ts +1 -1
  165. package/components/input/dist/base-input.d.ts +29 -30
  166. package/components/input/dist/iconVersion.d.ts +1 -1
  167. package/components/input/dist/index.js +10 -11
  168. package/components/input/dist/registered.js +10 -11
  169. package/components/menu/README.md +24 -42
  170. package/components/menu/demo/api.md +785 -829
  171. package/components/menu/demo/api.min.js +7 -7
  172. package/components/menu/demo/index.md +33 -35
  173. package/components/menu/demo/index.min.js +7 -7
  174. package/components/menu/demo/keyboard-behavior.md +18 -0
  175. package/components/menu/demo/readme.md +24 -42
  176. package/components/menu/dist/auro-menu-utils.d.ts +1 -1
  177. package/components/menu/dist/auro-menu.context.d.ts +3 -3
  178. package/components/menu/dist/auro-menu.d.ts +4 -4
  179. package/components/menu/dist/auro-menuoption.d.ts +6 -6
  180. package/components/menu/dist/index.js +6 -6
  181. package/components/menu/dist/registered.js +6 -6
  182. package/components/radio/README.md +22 -49
  183. package/components/radio/demo/accessibility.html +51 -0
  184. package/components/radio/demo/accessibility.md +44 -0
  185. package/components/radio/demo/api.html +13 -20
  186. package/components/radio/demo/api.md +44 -621
  187. package/components/radio/demo/api.min.js +1 -1
  188. package/components/radio/demo/customize.html +53 -0
  189. package/components/radio/demo/customize.md +368 -0
  190. package/components/radio/demo/demo-support.js +60 -0
  191. package/components/radio/demo/design.html +52 -0
  192. package/components/radio/demo/design.md +143 -0
  193. package/components/radio/demo/getting-started.html +54 -0
  194. package/components/radio/demo/getting-started.md +296 -0
  195. package/components/radio/demo/index.html +16 -19
  196. package/components/radio/demo/index.md +124 -63
  197. package/components/radio/demo/index.min.js +1 -1
  198. package/components/radio/demo/keyboard-behavior.html +51 -0
  199. package/components/radio/demo/keyboard-behavior.md +72 -0
  200. package/components/radio/demo/layout.md +30 -0
  201. package/components/radio/demo/readme.html +11 -17
  202. package/components/radio/demo/readme.md +22 -49
  203. package/components/radio/demo/styles.css +974 -0
  204. package/components/radio/demo/voiceover.html +51 -0
  205. package/components/radio/demo/voiceover.md +43 -0
  206. package/components/radio/dist/auro-radio-group.d.ts +9 -9
  207. package/components/radio/dist/auro-radio.d.ts +8 -8
  208. package/components/radio/dist/index.js +1 -1
  209. package/components/radio/dist/registered.js +1 -1
  210. package/components/select/README.md +50 -68
  211. package/components/select/demo/accessibility.html +50 -0
  212. package/components/select/demo/accessibility.md +76 -0
  213. package/components/select/demo/api.html +5 -17
  214. package/components/select/demo/api.md +52 -2422
  215. package/components/select/demo/customize.html +52 -0
  216. package/components/select/demo/customize.js +11 -0
  217. package/components/select/demo/customize.md +1049 -0
  218. package/components/select/demo/customize.min.js +12 -0
  219. package/components/select/demo/demo-support.js +60 -0
  220. package/components/select/demo/demo-support.min.js +55732 -0
  221. package/components/select/demo/design.html +51 -0
  222. package/components/select/demo/design.md +391 -0
  223. package/components/select/demo/getting-started.html +52 -0
  224. package/components/select/demo/getting-started.js +26 -0
  225. package/components/select/demo/getting-started.md +412 -0
  226. package/components/select/demo/getting-started.min.js +56 -0
  227. package/components/select/demo/index.html +18 -35
  228. package/components/select/demo/index.js +5 -3
  229. package/components/select/demo/index.md +165 -345
  230. package/components/select/demo/index.min.js +6 -10484
  231. package/components/select/demo/install.md +95 -0
  232. package/components/select/demo/keyboard-behavior.html +8 -39
  233. package/components/select/demo/keyboard-behavior.md +249 -0
  234. package/components/select/demo/keyboardBehavior.html +5 -38
  235. package/components/select/demo/layout.html +51 -0
  236. package/components/select/demo/readme.html +5 -13
  237. package/components/select/demo/readme.md +50 -68
  238. package/components/select/demo/{api.min.js → registered.min.js} +179 -151
  239. package/components/select/demo/styles.min.css +1 -0
  240. package/components/select/demo/styles.scss +1 -0
  241. package/components/select/demo/voiceover.html +48 -0
  242. package/components/select/demo/voiceover.md +183 -0
  243. package/components/select/dist/auro-select.d.ts +11 -11
  244. package/components/select/dist/index.js +171 -33
  245. package/components/select/dist/registered.js +171 -33
  246. package/custom-elements.json +1491 -1494
  247. package/package.json +37 -30
  248. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  249. package/components/combobox/demo/keyboardBehavior.md +0 -281
  250. package/components/counter/demo/keyboardBehavior.md +0 -127
  251. package/components/datepicker/demo/keyboardBehavior.md +0 -19
  252. package/components/datepicker/dist/iconVersion.d.ts +0 -2
  253. package/components/form/demo/keyboardBehavior.md +0 -0
  254. package/components/input/demo/keyboardBehavior.md +0 -0
  255. package/components/menu/demo/keyboardBehavior.md +0 -0
  256. package/components/radio/demo/keyboardBehavior.md +0 -0
  257. package/components/select/demo/api.js +0 -39
  258. package/components/select/demo/keyboardBehavior.md +0 -245
  259. /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
  260. /package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +0 -0
  261. /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
  262. /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
  263. /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
  264. /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
  265. /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
  266. /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
  267. /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
  268. /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
  269. /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
  270. /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
  271. /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
  272. /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
  273. /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
  274. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
  275. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
  276. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
  277. /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
  278. /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
  279. /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
  280. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
  281. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
package/components/checkbox/demo/api.md CHANGED
@@ -90,400 +90,4 @@ The `auro-checkbox` element is for the purpose of allowing users to select one o
90
90
  | [checkbox](#checkbox) | apply css to a specific checkbox. |
91
91
  | `checkbox-input` | apply css to a specific checkbox's input. |
92
92
  | `checkbox-label` | apply css to a specific checkbox's label. |
93
- <!-- AURO-GENERATED-CONTENT:END -->
94
-
95
- ## Basic
96
-
97
- <div class="exampleWrapper">
98
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
99
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
100
- <auro-checkbox-group>
101
- <span slot="legend">Form label goes here</span>
102
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
103
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
104
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
105
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
106
- </auro-checkbox-group>
107
- <!-- AURO-GENERATED-CONTENT:END -->
108
- </div>
109
- <auro-accordion alignRight>
110
- <span slot="trigger">See code</span>
111
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
112
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
113
-
114
- ```html
115
- <auro-checkbox-group>
116
- <span slot="legend">Form label goes here</span>
117
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
118
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
119
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
120
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
121
- </auro-checkbox-group>
122
- ```
123
- <!-- AURO-GENERATED-CONTENT:END -->
124
- </auro-accordion>
125
-
126
- ## Property & Attribute Examples
127
-
128
- ### Appearance on Dark Backgrounds
129
-
130
- Use the `appearance="inverse"` attribute to render the checkbox for use on dark backgrounds.
131
-
132
- <div class="exampleWrapper--ondark" aria-hidden>
133
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
134
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
135
- <auro-checkbox-group appearance="inverse">
136
- <span slot="legend">Form label goes here</span>
137
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
138
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
139
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
140
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
141
- </auro-checkbox-group>
142
- <!-- AURO-GENERATED-CONTENT:END -->
143
- </div>
144
- <auro-accordion alignRight>
145
- <span slot="trigger">See code</span>
146
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
147
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
148
- <auro-checkbox-group appearance="inverse">
149
- <span slot="legend">Form label goes here</span>
150
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
151
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
152
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
153
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
154
- </auro-checkbox-group>
155
- <!-- AURO-GENERATED-CONTENT:END -->
156
- </auro-accordion>
157
-
158
- ### Disabled
159
-
160
- Use the `disabled` attribute to disable individual `<auro-checkbox>` elements or the entire `<auro-checkbox-group>`.
161
-
162
- #### Disabled Checkbox within Group
163
-
164
- The `disabled` attribute used to disable a single `<auro-checkbox>` element.
165
-
166
- <div class="exampleWrapper">
167
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
168
- <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
169
- <auro-checkbox-group>
170
- <span slot="legend">Form label goes here</span>
171
- <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
172
- <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
173
- <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
174
- <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
175
- </auro-checkbox-group>
176
- <!-- AURO-GENERATED-CONTENT:END -->
177
- </div>
178
- <auro-accordion alignRight>
179
- <span slot="trigger">See code</span>
180
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
181
- <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
182
-
183
- ```html
184
- <auro-checkbox-group>
185
- <span slot="legend">Form label goes here</span>
186
- <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
187
- <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
188
- <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
189
- <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
190
- </auro-checkbox-group>
191
- ```
192
- <!-- AURO-GENERATED-CONTENT:END -->
193
- </auro-accordion>
194
-
195
- #### Disabled Group
196
-
197
- The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
198
-
199
- <div class="exampleWrapper">
200
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled-group.html) -->
201
- <!-- The below content is automatically added from ./../apiExamples/disabled-group.html -->
202
- <auro-checkbox-group disabled>
203
- <span slot="legend">Form label goes here</span>
204
- <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
205
- <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
206
- <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
207
- <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
208
- </auro-checkbox-group>
209
- <!-- AURO-GENERATED-CONTENT:END -->
210
- </div>
211
- <div class="exampleWrapper--ondark" aria-hidden>
212
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
213
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
214
- <auro-checkbox-group appearance="inverse" disabled>
215
- <span slot="legend">Form label goes here</span>
216
- <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
217
- <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
218
- <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
219
- <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
220
- </auro-checkbox-group>
221
- <!-- AURO-GENERATED-CONTENT:END -->
222
- </div>
223
- <auro-accordion alignRight>
224
- <span slot="trigger">See code</span>
225
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-group.html) -->
226
- <!-- The below code snippet is automatically added from ./../apiExamples/disabled-group.html -->
227
-
228
- ```html
229
- <auro-checkbox-group disabled>
230
- <span slot="legend">Form label goes here</span>
231
- <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
232
- <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
233
- <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
234
- <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
235
- </auro-checkbox-group>
236
- ```
237
- <!-- AURO-GENERATED-CONTENT:END -->
238
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
239
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
240
- <auro-checkbox-group appearance="inverse" disabled>
241
- <span slot="legend">Form label goes here</span>
242
- <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
243
- <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
244
- <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
245
- <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
246
- </auro-checkbox-group>
247
- <!-- AURO-GENERATED-CONTENT:END -->
248
- </auro-accordion>
249
-
250
- ### Horizontal Group
251
-
252
- Using the `horizontal` attribute will render the checkbox options on a horizontal line.
253
-
254
- **Note**: Using the `horizontal` attribute has a limit of 3 options. Beyond three, options will be listed in vertically.
255
-
256
- <div class="exampleWrapper">
257
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontal.html) -->
258
- <!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
259
- <auro-checkbox-group horizontal>
260
- <span slot="legend">Form label goes here</span>
261
- <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
262
- <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
263
- <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
264
- </auro-checkbox-group>
265
- <!-- AURO-GENERATED-CONTENT:END -->
266
- </div>
267
- <auro-accordion alignRight>
268
- <span slot="trigger">See code</span>
269
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontal.html) -->
270
- <!-- The below code snippet is automatically added from ./../apiExamples/horizontal.html -->
271
-
272
- ```html
273
- <auro-checkbox-group horizontal>
274
- <span slot="legend">Form label goes here</span>
275
- <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
276
- <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
277
- <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
278
- </auro-checkbox-group>
279
- ```
280
- <!-- AURO-GENERATED-CONTENT:END -->
281
- </auro-accordion>
282
-
283
- ### Form Validation
284
-
285
- In the `auro-checkbox-group` element, the `required` and `error` states are the two possible validation states.
286
-
287
- It should be noted that form validation is only supported within an `auro-checkbox-group` element. In order to support validation on a single `auro-checkbox` element, it must be wrapped in an `auro-checkbox-group`.
288
-
289
- ### Error
290
-
291
- Use the `error` attribute to force an error state on the element.
292
-
293
- The `error` attribute used to set error state on the entire `<auro-checkbox-group>`. If using the `error` attribute on an `<auro-checkbox-group>`, a string with the error message needs to be passed along with the attribute.
294
-
295
- **Note**: The `error` attribute is only supported on the `<auro-checkbox-group>` element, not on individual `<auro-checkbox>` elements.
296
-
297
- <div class="exampleWrapper">
298
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error-group.html) -->
299
- <!-- The below content is automatically added from ./../apiExamples/error-group.html -->
300
- <auro-checkbox-group error="custom error">
301
- <span slot="legend">Form label goes here</span>
302
- <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
303
- <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
304
- <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
305
- <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
306
- </auro-checkbox-group>
307
- <!-- AURO-GENERATED-CONTENT:END -->
308
- </div>
309
- <div class="exampleWrapper--ondark" aria-hidden>
310
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
311
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
312
- <auro-checkbox-group appearance="inverse" error="custom error">
313
- <span slot="legend">Form label goes here</span>
314
- <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
315
- <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
316
- <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
317
- <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
318
- </auro-checkbox-group>
319
- <!-- AURO-GENERATED-CONTENT:END -->
320
- </div>
321
- <auro-accordion alignRight>
322
- <span slot="trigger">See code</span>
323
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error-group.html) -->
324
- <!-- The below code snippet is automatically added from ./../apiExamples/error-group.html -->
325
-
326
- ```html
327
- <auro-checkbox-group error="custom error">
328
- <span slot="legend">Form label goes here</span>
329
- <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
330
- <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
331
- <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
332
- <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
333
- </auro-checkbox-group>
334
- ```
335
- <!-- AURO-GENERATED-CONTENT:END -->
336
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
337
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
338
- <auro-checkbox-group appearance="inverse" error="custom error">
339
- <span slot="legend">Form label goes here</span>
340
- <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
341
- <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
342
- <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
343
- <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
344
- </auro-checkbox-group>
345
- <!-- AURO-GENERATED-CONTENT:END -->
346
- </auro-accordion>
347
-
348
- #### Required
349
-
350
- When present, the `required` attribute specifies that at least one or more `<auro-checkbox>` elements within the `<auro-checkbox-group>` must be checked.
351
-
352
- <div class="exampleWrapper">
353
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
354
- <!-- The below content is automatically added from ./../apiExamples/required.html -->
355
- <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
356
- <span slot="legend">Form label goes here</span>
357
- <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
358
- <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
359
- <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
360
- <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
361
- </auro-checkbox-group>
362
- <!-- AURO-GENERATED-CONTENT:END -->
363
- </div>
364
- <auro-accordion alignRight>
365
- <span slot="trigger">See code</span>
366
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
367
- <!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
368
-
369
- ```html
370
- <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
371
- <span slot="legend">Form label goes here</span>
372
- <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
373
- <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
374
- <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
375
- <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
376
- </auro-checkbox-group>
377
- ```
378
- <!-- AURO-GENERATED-CONTENT:END -->
379
- </auro-accordion>
380
-
381
- ## Slot Examples
382
-
383
- ### Custom Optional Label
384
-
385
- The `<auro-checkbox-group>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
386
-
387
- <div class="exampleWrapper">
388
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
389
- <!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
390
- <auro-checkbox-group>
391
- <span slot="legend">Form label goes here</span>
392
- <span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
393
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
394
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
395
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
396
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
397
- </auro-checkbox-group>
398
- <!-- AURO-GENERATED-CONTENT:END -->
399
- </div>
400
- <auro-accordion alignRight>
401
- <span slot="trigger">See code</span>
402
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optional-label.html) -->
403
- <!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
404
-
405
- ```html
406
- <auro-checkbox-group>
407
- <span slot="legend">Form label goes here</span>
408
- <span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
409
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
410
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
411
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
412
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
413
- </auro-checkbox-group>
414
- ```
415
- <!-- AURO-GENERATED-CONTENT:END -->
416
- </auro-accordion>
417
-
418
- ## Common Usage Patterns & Functional Examples
419
-
420
- ### Reset State
421
-
422
- Use the `reset()` method to reset the `<auro-checkbox-group>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
423
-
424
- <div class="exampleWrapper">
425
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
426
- <!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
427
- <auro-button id="resetStateBtn">Reset</auro-button>
428
- <br/><br/>
429
- <auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
430
- <span slot="legend">Form label goes here</span>
431
- <auro-checkbox value="value1" name="resetState" id="checkbox-basic1">Checkbox option</auro-checkbox>
432
- <auro-checkbox value="value2" name="resetState" id="checkbox-basic2">Checkbox option</auro-checkbox>
433
- <auro-checkbox value="value3" name="resetState" id="checkbox-basic3">Checkbox option</auro-checkbox>
434
- <auro-checkbox value="value4" name="resetState" id="checkbox-basic4">Checkbox option</auro-checkbox>
435
- </auro-checkbox-group>
436
- <!-- AURO-GENERATED-CONTENT:END -->
437
- </div>
438
- <auro-accordion alignRight>
439
- <span slot="trigger">See code</span>
440
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
441
- <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
442
-
443
- ```html
444
- <auro-button id="resetStateBtn">Reset</auro-button>
445
- <br/><br/>
446
- <auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
447
- <span slot="legend">Form label goes here</span>
448
- <auro-checkbox value="value1" name="resetState" id="checkbox-basic1">Checkbox option</auro-checkbox>
449
- <auro-checkbox value="value2" name="resetState" id="checkbox-basic2">Checkbox option</auro-checkbox>
450
- <auro-checkbox value="value3" name="resetState" id="checkbox-basic3">Checkbox option</auro-checkbox>
451
- <auro-checkbox value="value4" name="resetState" id="checkbox-basic4">Checkbox option</auro-checkbox>
452
- </auro-checkbox-group>
453
- ```
454
- <!-- AURO-GENERATED-CONTENT:END -->
455
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
456
- <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
457
-
458
- ```js
459
- export function resetStateExample() {
460
- const elem = document.querySelector('#resetStateExample');
461
-
462
- document.querySelector('#resetStateBtn').addEventListener('click', () => {
463
- elem.reset();
464
- });
465
- }
466
- ```
467
- <!-- AURO-GENERATED-CONTENT:END -->
468
- </auro-accordion>
469
-
470
- ## Restyle Component with CSS Variables
471
-
472
- The component may be restyled by changing the values of the following token(s).
473
-
474
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
475
- <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
476
-
477
- ```scss
478
- @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
479
-
480
- :host {
481
- --ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
482
- --ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #{v.$ds-advanced-color-boolean-indicator});
483
- --ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #{v.$ds-advanced-color-boolean-isfalse});
484
- --ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
485
- --ds-auro-checkbox-outline-color: transparent;
486
- --ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
487
- }
488
- ```
489
93
  <!-- AURO-GENERATED-CONTENT:END -->