@aurodesignsystem-dev/auro-formkit 0.0.0-pr593.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 (268) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +314 -0
  5. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +39 -0
  6. package/components/bibtemplate/dist/headerVersion.d.ts +2 -0
  7. package/components/bibtemplate/dist/iconVersion.d.ts +2 -0
  8. package/components/bibtemplate/dist/index.d.ts +2 -0
  9. package/components/bibtemplate/dist/index.js +709 -0
  10. package/components/bibtemplate/dist/registered.js +709 -0
  11. package/components/bibtemplate/dist/styles/color-css.d.ts +2 -0
  12. package/components/bibtemplate/dist/styles/style-css.d.ts +2 -0
  13. package/components/bibtemplate/dist/styles/tokens-css.d.ts +2 -0
  14. package/components/checkbox/README.md +142 -0
  15. package/components/checkbox/demo/api.html +55 -0
  16. package/components/checkbox/demo/api.js +17 -0
  17. package/components/checkbox/demo/api.md +401 -0
  18. package/components/checkbox/demo/api.min.js +1833 -0
  19. package/components/checkbox/demo/index.html +51 -0
  20. package/components/checkbox/demo/index.js +8 -0
  21. package/components/checkbox/demo/index.md +327 -0
  22. package/components/checkbox/demo/index.min.js +1808 -0
  23. package/components/checkbox/demo/readme.html +50 -0
  24. package/components/checkbox/demo/readme.md +142 -0
  25. package/components/checkbox/dist/auro-checkbox-group.d.ts +166 -0
  26. package/components/checkbox/dist/auro-checkbox.d.ts +129 -0
  27. package/components/checkbox/dist/helptextVersion.d.ts +2 -0
  28. package/components/checkbox/dist/index.d.ts +3 -0
  29. package/components/checkbox/dist/index.js +1757 -0
  30. package/components/checkbox/dist/registered.js +1758 -0
  31. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +2 -0
  32. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +2 -0
  33. package/components/checkbox/dist/styles/color-css.d.ts +2 -0
  34. package/components/checkbox/dist/styles/colorGroup-css.d.ts +2 -0
  35. package/components/checkbox/dist/styles/tokens-css.d.ts +2 -0
  36. package/components/combobox/README.md +152 -0
  37. package/components/combobox/demo/api.html +57 -0
  38. package/components/combobox/demo/api.js +36 -0
  39. package/components/combobox/demo/api.md +1209 -0
  40. package/components/combobox/demo/api.min.js +15117 -0
  41. package/components/combobox/demo/index.html +56 -0
  42. package/components/combobox/demo/index.js +26 -0
  43. package/components/combobox/demo/index.md +621 -0
  44. package/components/combobox/demo/index.min.js +14971 -0
  45. package/components/combobox/demo/readme.html +50 -0
  46. package/components/combobox/demo/readme.md +152 -0
  47. package/components/combobox/dist/auro-combobox.d.ts +384 -0
  48. package/components/combobox/dist/bibtemplateVersion.d.ts +2 -0
  49. package/components/combobox/dist/dropdownVersion.d.ts +2 -0
  50. package/components/combobox/dist/index.d.ts +2 -0
  51. package/components/combobox/dist/index.js +13554 -0
  52. package/components/combobox/dist/inputVersion.d.ts +2 -0
  53. package/components/combobox/dist/registered.js +13556 -0
  54. package/components/combobox/dist/styles/style-css.d.ts +2 -0
  55. package/components/counter/README.md +146 -0
  56. package/components/counter/demo/api.html +54 -0
  57. package/components/counter/demo/api.js +20 -0
  58. package/components/counter/demo/api.md +584 -0
  59. package/components/counter/demo/api.min.js +7111 -0
  60. package/components/counter/demo/index.html +54 -0
  61. package/components/counter/demo/index.js +21 -0
  62. package/components/counter/demo/index.md +244 -0
  63. package/components/counter/demo/index.min.js +7075 -0
  64. package/components/counter/demo/readme.html +50 -0
  65. package/components/counter/demo/readme.md +146 -0
  66. package/components/counter/dist/auro-counter-button.d.ts +12 -0
  67. package/components/counter/dist/auro-counter-group.d.ts +235 -0
  68. package/components/counter/dist/auro-counter-wrapper.d.ts +22 -0
  69. package/components/counter/dist/auro-counter.d.ts +97 -0
  70. package/components/counter/dist/bibtemplateVersion.d.ts +2 -0
  71. package/components/counter/dist/dropdownVersion.d.ts +2 -0
  72. package/components/counter/dist/iconVersion.d.ts +2 -0
  73. package/components/counter/dist/index.d.ts +3 -0
  74. package/components/counter/dist/index.js +7018 -0
  75. package/components/counter/dist/registered.js +7019 -0
  76. package/components/counter/dist/styles/color-css.d.ts +2 -0
  77. package/components/counter/dist/styles/counter-button-color-css.d.ts +2 -0
  78. package/components/counter/dist/styles/counter-button-css.d.ts +2 -0
  79. package/components/counter/dist/styles/counter-group-css.d.ts +2 -0
  80. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +2 -0
  81. package/components/counter/dist/styles/counter-wrapper-css.d.ts +2 -0
  82. package/components/counter/dist/styles/style-css.d.ts +2 -0
  83. package/components/counter/dist/styles/tokens-css.d.ts +2 -0
  84. package/components/datepicker/README.md +140 -0
  85. package/components/datepicker/demo/api.html +57 -0
  86. package/components/datepicker/demo/api.js +35 -0
  87. package/components/datepicker/demo/api.md +1479 -0
  88. package/components/datepicker/demo/api.min.js +24534 -0
  89. package/components/datepicker/demo/index.html +56 -0
  90. package/components/datepicker/demo/index.js +19 -0
  91. package/components/datepicker/demo/index.md +112 -0
  92. package/components/datepicker/demo/index.min.js +24255 -0
  93. package/components/datepicker/demo/readme.html +50 -0
  94. package/components/datepicker/demo/readme.md +140 -0
  95. package/components/datepicker/dist/auro-calendar-cell.d.ts +163 -0
  96. package/components/datepicker/dist/auro-calendar-month.d.ts +20 -0
  97. package/components/datepicker/dist/auro-calendar.d.ts +133 -0
  98. package/components/datepicker/dist/auro-datepicker.d.ts +466 -0
  99. package/components/datepicker/dist/bibtemplateVersion.d.ts +2 -0
  100. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  101. package/components/datepicker/dist/dropdownVersion.d.ts +2 -0
  102. package/components/datepicker/dist/index.d.ts +2 -0
  103. package/components/datepicker/dist/index.js +24185 -0
  104. package/components/datepicker/dist/inputVersion.d.ts +2 -0
  105. package/components/datepicker/dist/popoverVersion.d.ts +2 -0
  106. package/components/datepicker/dist/registered.js +24185 -0
  107. package/components/datepicker/dist/styles/color-calendar-css.d.ts +2 -0
  108. package/components/datepicker/dist/styles/color-cell-css.d.ts +2 -0
  109. package/components/datepicker/dist/styles/color-css.d.ts +2 -0
  110. package/components/datepicker/dist/styles/color-month-css.d.ts +2 -0
  111. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +2 -0
  112. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +2 -0
  113. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +2 -0
  114. package/components/datepicker/dist/styles/style-css.d.ts +2 -0
  115. package/components/datepicker/dist/styles/tokens-css.d.ts +2 -0
  116. package/components/datepicker/dist/utilities.d.ts +78 -0
  117. package/components/datepicker/dist/utilitiesCalendar.d.ts +38 -0
  118. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +50 -0
  119. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +5 -0
  120. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +60 -0
  121. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +1 -0
  122. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +57 -0
  123. package/components/dropdown/README.md +144 -0
  124. package/components/dropdown/demo/api.html +57 -0
  125. package/components/dropdown/demo/api.js +21 -0
  126. package/components/dropdown/demo/api.md +1434 -0
  127. package/components/dropdown/demo/api.min.js +3826 -0
  128. package/components/dropdown/demo/index.html +55 -0
  129. package/components/dropdown/demo/index.js +19 -0
  130. package/components/dropdown/demo/index.md +510 -0
  131. package/components/dropdown/demo/index.min.js +3789 -0
  132. package/components/dropdown/demo/readme.html +50 -0
  133. package/components/dropdown/demo/readme.md +144 -0
  134. package/components/dropdown/dist/auro-dropdown.d.ts +406 -0
  135. package/components/dropdown/dist/auro-dropdownBib.d.ts +46 -0
  136. package/components/dropdown/dist/dropdownVersion.d.ts +2 -0
  137. package/components/dropdown/dist/helptextVersion.d.ts +2 -0
  138. package/components/dropdown/dist/iconVersion.d.ts +2 -0
  139. package/components/dropdown/dist/index.d.ts +2 -0
  140. package/components/dropdown/dist/index.js +3734 -0
  141. package/components/dropdown/dist/registered.js +3734 -0
  142. package/components/dropdown/dist/styles/bibColors-css.d.ts +2 -0
  143. package/components/dropdown/dist/styles/bibStyles-css.d.ts +2 -0
  144. package/components/dropdown/dist/styles/color-css.d.ts +2 -0
  145. package/components/dropdown/dist/styles/style-css.d.ts +2 -0
  146. package/components/dropdown/dist/styles/tokens-css.d.ts +2 -0
  147. package/components/form/README.md +142 -0
  148. package/components/form/demo/api.html +49 -0
  149. package/components/form/demo/api.js +3 -0
  150. package/components/form/demo/api.md +51 -0
  151. package/components/form/demo/api.min.js +638 -0
  152. package/components/form/demo/autocomplete.html +15 -0
  153. package/components/form/demo/index.html +50 -0
  154. package/components/form/demo/index.js +4 -0
  155. package/components/form/demo/index.md +403 -0
  156. package/components/form/demo/index.min.js +639 -0
  157. package/components/form/demo/readme.html +50 -0
  158. package/components/form/demo/readme.md +142 -0
  159. package/components/form/demo/registerDemoDeps.js +23 -0
  160. package/components/form/demo/working.html +118 -0
  161. package/components/form/dist/auro-form.d.ts +223 -0
  162. package/components/form/dist/index.d.ts +2 -0
  163. package/components/form/dist/index.js +614 -0
  164. package/components/form/dist/registered.d.ts +1 -0
  165. package/components/form/dist/registered.js +614 -0
  166. package/components/form/dist/styles/style-css.d.ts +2 -0
  167. package/components/helptext/dist/auro-helptext.d.ts +61 -0
  168. package/components/helptext/dist/index.d.ts +2 -0
  169. package/components/helptext/dist/index.js +209 -0
  170. package/components/helptext/dist/registered.js +209 -0
  171. package/components/helptext/dist/styles/color-css.d.ts +2 -0
  172. package/components/helptext/dist/styles/style-css.d.ts +2 -0
  173. package/components/helptext/dist/styles/tokens-css.d.ts +2 -0
  174. package/components/input/README.md +135 -0
  175. package/components/input/demo/api.html +42 -0
  176. package/components/input/demo/api.js +29 -0
  177. package/components/input/demo/api.md +1252 -0
  178. package/components/input/demo/api.min.js +7238 -0
  179. package/components/input/demo/index.html +43 -0
  180. package/components/input/demo/index.js +20 -0
  181. package/components/input/demo/index.md +202 -0
  182. package/components/input/demo/index.min.js +7157 -0
  183. package/components/input/demo/readme.html +50 -0
  184. package/components/input/demo/readme.md +135 -0
  185. package/components/input/dist/auro-input.d.ts +31 -0
  186. package/components/input/dist/base-input.d.ts +512 -0
  187. package/components/input/dist/buttonVersion.d.ts +2 -0
  188. package/components/input/dist/helptextVersion.d.ts +2 -0
  189. package/components/input/dist/i18n.d.ts +18 -0
  190. package/components/input/dist/iconVersion.d.ts +2 -0
  191. package/components/input/dist/index.d.ts +2 -0
  192. package/components/input/dist/index.js +7063 -0
  193. package/components/input/dist/registered.js +7063 -0
  194. package/components/input/dist/styles/borders-css.d.ts +2 -0
  195. package/components/input/dist/styles/color-css.d.ts +2 -0
  196. package/components/input/dist/styles/input-css.d.ts +2 -0
  197. package/components/input/dist/styles/label-css.d.ts +2 -0
  198. package/components/input/dist/styles/mixins-css.d.ts +2 -0
  199. package/components/input/dist/styles/notificationIcons-css.d.ts +2 -0
  200. package/components/input/dist/styles/style-css.d.ts +2 -0
  201. package/components/input/dist/styles/tokens-css.d.ts +2 -0
  202. package/components/input/dist/utilities.d.ts +25 -0
  203. package/components/menu/README.md +145 -0
  204. package/components/menu/demo/api.html +55 -0
  205. package/components/menu/demo/api.js +27 -0
  206. package/components/menu/demo/api.md +954 -0
  207. package/components/menu/demo/api.min.js +1538 -0
  208. package/components/menu/demo/index.html +52 -0
  209. package/components/menu/demo/index.js +28 -0
  210. package/components/menu/demo/index.md +61 -0
  211. package/components/menu/demo/index.min.js +1484 -0
  212. package/components/menu/demo/readme.html +50 -0
  213. package/components/menu/demo/readme.md +145 -0
  214. package/components/menu/dist/auro-menu-utils.d.ts +42 -0
  215. package/components/menu/dist/auro-menu.d.ts +205 -0
  216. package/components/menu/dist/auro-menuoption.d.ts +63 -0
  217. package/components/menu/dist/dropdownVersion.d.ts +2 -0
  218. package/components/menu/dist/iconVersion.d.ts +2 -0
  219. package/components/menu/dist/index.d.ts +4 -0
  220. package/components/menu/dist/index.js +1426 -0
  221. package/components/menu/dist/registered.js +1427 -0
  222. package/components/menu/dist/styles/color-menu-css.d.ts +2 -0
  223. package/components/menu/dist/styles/color-menuoption-css.d.ts +2 -0
  224. package/components/menu/dist/styles/style-menu-css.d.ts +2 -0
  225. package/components/menu/dist/styles/style-menuoption-css.d.ts +2 -0
  226. package/components/menu/dist/styles/tokens-css.d.ts +2 -0
  227. package/components/radio/README.md +137 -0
  228. package/components/radio/demo/api.html +53 -0
  229. package/components/radio/demo/api.js +19 -0
  230. package/components/radio/demo/api.md +562 -0
  231. package/components/radio/demo/api.min.js +1944 -0
  232. package/components/radio/demo/index.html +50 -0
  233. package/components/radio/demo/index.js +8 -0
  234. package/components/radio/demo/index.md +150 -0
  235. package/components/radio/demo/index.min.js +1901 -0
  236. package/components/radio/demo/readme.html +50 -0
  237. package/components/radio/demo/readme.md +137 -0
  238. package/components/radio/dist/auro-radio-group.d.ts +194 -0
  239. package/components/radio/dist/auro-radio.d.ts +144 -0
  240. package/components/radio/dist/helptextVersion.d.ts +2 -0
  241. package/components/radio/dist/index.d.ts +3 -0
  242. package/components/radio/dist/index.js +1850 -0
  243. package/components/radio/dist/registered.js +1851 -0
  244. package/components/radio/dist/styles/auro-radio-group-css.d.ts +2 -0
  245. package/components/radio/dist/styles/color-css.d.ts +2 -0
  246. package/components/radio/dist/styles/groupColor-css.d.ts +2 -0
  247. package/components/radio/dist/styles/style-css.d.ts +2 -0
  248. package/components/radio/dist/styles/tokens-css.d.ts +2 -0
  249. package/components/select/README.md +144 -0
  250. package/components/select/demo/api.html +71 -0
  251. package/components/select/demo/api.js +35 -0
  252. package/components/select/demo/api.md +1313 -0
  253. package/components/select/demo/api.min.js +7763 -0
  254. package/components/select/demo/index.html +66 -0
  255. package/components/select/demo/index.js +9 -0
  256. package/components/select/demo/index.md +815 -0
  257. package/components/select/demo/index.min.js +7651 -0
  258. package/components/select/demo/readme.html +50 -0
  259. package/components/select/demo/readme.md +144 -0
  260. package/components/select/dist/auro-select.d.ts +359 -0
  261. package/components/select/dist/bibtemplateVersion.d.ts +2 -0
  262. package/components/select/dist/dropdownVersion.d.ts +2 -0
  263. package/components/select/dist/index.d.ts +2 -0
  264. package/components/select/dist/index.js +6300 -0
  265. package/components/select/dist/registered.js +6300 -0
  266. package/components/select/dist/styles/style-css.d.ts +2 -0
  267. package/package.json +217 -0
  268. package/packages/build-tools/src/postinstall.mjs +12 -0
package/components/checkbox/demo/index.html ADDED
@@ -0,0 +1,51 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/demo.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Generator | auro-checkbox custom element</title>
20
+ <link
21
+ rel="stylesheet"
22
+ type="text/css"
23
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
+ />
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
27
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ </head>
31
+ <body class="auro-markdown">
32
+ <main></main>
33
+
34
+ <script type="module">
35
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
36
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
37
+ fetch('./index.md')
38
+ .then((response) => response.text())
39
+ .then((text) => {
40
+ const rawHtml = marked.parse(text);
41
+ document.querySelector('main').innerHTML = rawHtml;
42
+ Prism.highlightAll();
43
+ });
44
+ </script>
45
+ <script src="./index.min.js" data-demo-script="true" type="module"></script>
46
+
47
+ <!-- If additional elements are needed for the demo, add them here. -->
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
49
+ </body>
50
+ </html>
51
+
package/components/checkbox/demo/index.js ADDED
@@ -0,0 +1,8 @@
1
+ import { AuroCheckbox } from '../src/auro-checkbox.js';
2
+ import { AuroCheckboxGroup } from '../src/auro-checkbox-group.js';
3
+
4
+ AuroCheckbox.register(); // registering to `auro-checkbox`
5
+ AuroCheckboxGroup.register(); // registering to `auro-checkbox-group`
6
+
7
+ AuroCheckbox.register('custom-checkbox');
8
+ AuroCheckboxGroup.register('custom-checkbox-group');
package/components/checkbox/demo/index.md ADDED
@@ -0,0 +1,327 @@
1
+ <!--
2
+ The index.md file is a compiled document. No edits should be made directly to this file.
3
+ README.md is created by running `npm run build:docs`.
4
+ This file is generated based on a template fetched from `./docs/partials/index.md`
5
+ -->
6
+
7
+ # Checkbox
8
+
9
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
+ `<auro-checkbox>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of allowing users to select one or more options of a limited number of choices.
12
+ <!-- AURO-GENERATED-CONTENT:END -->
13
+
14
+ ## auro-checkbox use cases
15
+
16
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
18
+ The `<auro-checkbox>` element should be used in situations where users may:
19
+
20
+ * Be filling out a form
21
+ * Need to select one or more options
22
+ <!-- AURO-GENERATED-CONTENT:END -->
23
+
24
+ ## Additional Information
25
+
26
+ ## Example(s)
27
+
28
+ ### Default
29
+
30
+ <div class="exampleWrapper">
31
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
32
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
33
+ <auro-checkbox-group>
34
+ <span slot="legend">Form label goes here</span>
35
+ <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
36
+ <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
37
+ <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
38
+ <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
39
+ </auro-checkbox-group>
40
+ <!-- AURO-GENERATED-CONTENT:END -->
41
+ </div>
42
+ <div class="exampleWrapper--ondark" aria-hidden>
43
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
44
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
45
+ <auro-checkbox-group onDark>
46
+ <span slot="legend">Form label goes here</span>
47
+ <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
48
+ <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
49
+ <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
50
+ <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
51
+ </auro-checkbox-group>
52
+ <!-- AURO-GENERATED-CONTENT:END -->
53
+ </div>
54
+ <auro-accordion alignRight>
55
+ <span slot="trigger">See code</span>
56
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
57
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
58
+
59
+ ```html
60
+ <auro-checkbox-group>
61
+ <span slot="legend">Form label goes here</span>
62
+ <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
63
+ <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
64
+ <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
65
+ <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
66
+ </auro-checkbox-group>
67
+ ```
68
+ <!-- AURO-GENERATED-CONTENT:END -->
69
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
70
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
71
+ <auro-checkbox-group onDark>
72
+ <span slot="legend">Form label goes here</span>
73
+ <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
74
+ <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
75
+ <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
76
+ <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
77
+ </auro-checkbox-group>
78
+ <!-- AURO-GENERATED-CONTENT:END -->
79
+ </auro-accordion>
80
+
81
+ ### Disabled
82
+
83
+ Use the `disabled` attribute to disable individual `<auro-checkbox>` elements or the entire `<auro-checkbox-group>`.
84
+
85
+ #### Disabled Checkbox within Group
86
+
87
+ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
88
+
89
+ <div class="exampleWrapper">
90
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
91
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
92
+ <auro-checkbox-group>
93
+ <span slot="legend">Form label goes here</span>
94
+ <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
95
+ <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
96
+ <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
97
+ <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
98
+ </auro-checkbox-group>
99
+ <!-- AURO-GENERATED-CONTENT:END -->
100
+ </div>
101
+ <auro-accordion alignRight>
102
+ <span slot="trigger">See code</span>
103
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
104
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
105
+
106
+ ```html
107
+ <auro-checkbox-group>
108
+ <span slot="legend">Form label goes here</span>
109
+ <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
110
+ <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
111
+ <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
112
+ <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
113
+ </auro-checkbox-group>
114
+ ```
115
+ <!-- AURO-GENERATED-CONTENT:END -->
116
+ </auro-accordion>
117
+
118
+ #### Disabled Group
119
+
120
+ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
121
+
122
+ <div class="exampleWrapper">
123
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledGroup.html) -->
124
+ <!-- The below content is automatically added from ./../apiExamples/disabledGroup.html -->
125
+ <auro-checkbox-group disabled>
126
+ <span slot="legend">Form label goes here</span>
127
+ <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
128
+ <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
129
+ <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
130
+ <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
131
+ </auro-checkbox-group>
132
+ <!-- AURO-GENERATED-CONTENT:END -->
133
+ </div>
134
+ <div class="exampleWrapper--ondark" aria-hidden>
135
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
136
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
137
+ <auro-checkbox-group onDark disabled>
138
+ <span slot="legend">Form label goes here</span>
139
+ <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
140
+ <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
141
+ <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
142
+ <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
143
+ </auro-checkbox-group>
144
+ <!-- AURO-GENERATED-CONTENT:END -->
145
+ </div>
146
+ <auro-accordion alignRight>
147
+ <span slot="trigger">See code</span>
148
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledGroup.html) -->
149
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabledGroup.html -->
150
+
151
+ ```html
152
+ <auro-checkbox-group disabled>
153
+ <span slot="legend">Form label goes here</span>
154
+ <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
155
+ <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
156
+ <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
157
+ <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
158
+ </auro-checkbox-group>
159
+ ```
160
+ <!-- AURO-GENERATED-CONTENT:END -->
161
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
162
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
163
+ <auro-checkbox-group onDark disabled>
164
+ <span slot="legend">Form label goes here</span>
165
+ <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
166
+ <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
167
+ <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
168
+ <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
169
+ </auro-checkbox-group>
170
+ <!-- AURO-GENERATED-CONTENT:END -->
171
+ </auro-accordion>
172
+
173
+ ### Error
174
+
175
+ Use the `error` attribute to force an error state on the element.
176
+
177
+ #### Checkbox Group with Error
178
+
179
+ 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.
180
+
181
+ <div class="exampleWrapper">
182
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/errorGroup.html) -->
183
+ <!-- The below content is automatically added from ./../apiExamples/errorGroup.html -->
184
+ <auro-checkbox-group error="custom error">
185
+ <span slot="legend">Form label goes here</span>
186
+ <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
187
+ <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
188
+ <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
189
+ <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
190
+ </auro-checkbox-group>
191
+ <!-- AURO-GENERATED-CONTENT:END -->
192
+ </div>
193
+ <div class="exampleWrapper--ondark" aria-hidden>
194
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
195
+ <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
196
+ <auro-checkbox-group onDark error="custom error">
197
+ <span slot="legend">Form label goes here</span>
198
+ <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
199
+ <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
200
+ <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
201
+ <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
202
+ </auro-checkbox-group>
203
+ <!-- AURO-GENERATED-CONTENT:END -->
204
+ </div>
205
+ <auro-accordion alignRight>
206
+ <span slot="trigger">See code</span>
207
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/errorGroup.html) -->
208
+ <!-- The below code snippet is automatically added from ./../apiExamples/errorGroup.html -->
209
+
210
+ ```html
211
+ <auro-checkbox-group error="custom error">
212
+ <span slot="legend">Form label goes here</span>
213
+ <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
214
+ <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
215
+ <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
216
+ <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
217
+ </auro-checkbox-group>
218
+ ```
219
+ <!-- AURO-GENERATED-CONTENT:END -->
220
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
221
+ <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
222
+ <auro-checkbox-group onDark error="custom error">
223
+ <span slot="legend">Form label goes here</span>
224
+ <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
225
+ <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
226
+ <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
227
+ <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
228
+ </auro-checkbox-group>
229
+ <!-- AURO-GENERATED-CONTENT:END -->
230
+ </auro-accordion>
231
+
232
+ #### Required Group
233
+
234
+ When present, the `required` attribute specifies that at least one or more `<auro-checkbox>` elements within the `<auro-checkbox-group>` must be checked.
235
+
236
+ <div class="exampleWrapper">
237
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
238
+ <!-- The below content is automatically added from ./../apiExamples/required.html -->
239
+ <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
240
+ <span slot="legend">Form label goes here</span>
241
+ <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
242
+ <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
243
+ <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
244
+ <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
245
+ </auro-checkbox-group>
246
+ <!-- AURO-GENERATED-CONTENT:END -->
247
+ </div>
248
+ <auro-accordion alignRight>
249
+ <span slot="trigger">See code</span>
250
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
251
+ <!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
252
+
253
+ ```html
254
+ <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
255
+ <span slot="legend">Form label goes here</span>
256
+ <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
257
+ <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
258
+ <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
259
+ <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
260
+ </auro-checkbox-group>
261
+ ```
262
+ <!-- AURO-GENERATED-CONTENT:END -->
263
+ </auro-accordion>
264
+
265
+ ### Horizontal Group
266
+
267
+ Using the `horizontal` attribute will render the checkbox options on a horizontal line.
268
+
269
+ <div class="exampleWrapper">
270
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontal.html) -->
271
+ <!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
272
+ <auro-checkbox-group horizontal>
273
+ <span slot="legend">Form label goes here</span>
274
+ <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
275
+ <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
276
+ <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
277
+ </auro-checkbox-group>
278
+ <!-- AURO-GENERATED-CONTENT:END -->
279
+ </div>
280
+ <auro-accordion alignRight>
281
+ <span slot="trigger">See code</span>
282
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontal.html) -->
283
+ <!-- The below code snippet is automatically added from ./../apiExamples/horizontal.html -->
284
+
285
+ ```html
286
+ <auro-checkbox-group horizontal>
287
+ <span slot="legend">Form label goes here</span>
288
+ <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
289
+ <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
290
+ <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
291
+ </auro-checkbox-group>
292
+ ```
293
+ <!-- AURO-GENERATED-CONTENT:END -->
294
+ </auro-accordion>
295
+
296
+ ### Horizontal Group Limitation
297
+
298
+ Using the `horizontal` attribute has a limit of 3 options. Beyond three, options will be listed in vertically.
299
+
300
+ <div class="exampleWrapper">
301
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontalLimit.html) -->
302
+ <!-- The below content is automatically added from ./../apiExamples/horizontalLimit.html -->
303
+ <auro-checkbox-group horizontal>
304
+ <span slot="legend">Form label goes here</span>
305
+ <auro-checkbox value="yes" name="horizontalLimit" id="checkbox-horizontalLimit1">Yes</auro-checkbox>
306
+ <auro-checkbox value="no" name="horizontalLimit" id="checkbox-horizontalLimit2">No</auro-checkbox>
307
+ <auro-checkbox value="maybe" name="horizontalLimit" id="checkbox-horizontalLimit3">Maybe</auro-checkbox>
308
+ <auro-checkbox value="not sure" name="horizontalLimit" id="checkbox-horizontalLimit4">Not Sure</auro-checkbox>
309
+ </auro-checkbox-group>
310
+ <!-- AURO-GENERATED-CONTENT:END -->
311
+ </div>
312
+ <auro-accordion alignRight>
313
+ <span slot="trigger">See code</span>
314
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontalLimit.html) -->
315
+ <!-- The below code snippet is automatically added from ./../apiExamples/horizontalLimit.html -->
316
+
317
+ ```html
318
+ <auro-checkbox-group horizontal>
319
+ <span slot="legend">Form label goes here</span>
320
+ <auro-checkbox value="yes" name="horizontalLimit" id="checkbox-horizontalLimit1">Yes</auro-checkbox>
321
+ <auro-checkbox value="no" name="horizontalLimit" id="checkbox-horizontalLimit2">No</auro-checkbox>
322
+ <auro-checkbox value="maybe" name="horizontalLimit" id="checkbox-horizontalLimit3">Maybe</auro-checkbox>
323
+ <auro-checkbox value="not sure" name="horizontalLimit" id="checkbox-horizontalLimit4">Not Sure</auro-checkbox>
324
+ </auro-checkbox-group>
325
+ ```
326
+ <!-- AURO-GENERATED-CONTENT:END -->
327
+ </auro-accordion>