@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/customize.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/customize.md
7
+
8
+ ----------------------- DO NOT EDIT -----------------------------
9
+
10
+ -->
11
+
12
+ <!DOCTYPE html>
13
+ <html lang="en">
14
+ <head>
15
+ <meta charset="UTF-8" />
16
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
17
+ <title>Auro Web Component Demo | auro-checkbox | Customize</title>
18
+
19
+ <!-- highlight.js Stylesheet -->
20
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
21
+
22
+ <!-- Legacy reference is still needed to support auro-checkbox's use of legacy token values at this time -->
23
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
24
+
25
+ <!-- Design Token Alaska Theme -->
26
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
27
+
28
+ <!-- Webcore Stylesheet Alaska Theme -->
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
30
+
31
+ <!-- Demo Specific Styles -->
32
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
33
+ </head>
34
+ <body class="auro-markdown">
35
+ <main></main>
36
+
37
+ <!-- If additional elements are needed for the demo, add them here. -->
38
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
39
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
40
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
41
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
42
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
43
+ <script type="module">
44
+ import { renderPage } from './demo-support.js';
45
+ await renderPage('./customize.md');
46
+ import { initExamples } from "./api.min.js";
47
+ initExamples();
48
+ </script>
49
+ <script src="./api.min.js" data-demo-script="true" type="module"></script>
50
+ </body>
51
+ </html>
package/components/checkbox/demo/customize.md ADDED
@@ -0,0 +1,361 @@
1
+ <auro-header level="1" id="overview">Checkbox - Customize</auro-header>
2
+ <div class="contentWrapper">
3
+ <nav>
4
+ <auro-nav anchorNavContent=".scrollWrapper">
5
+ <span slot="mobileToggleCollapsed">View More</span>
6
+ <span slot="mobileToggleExpanded">View Less</span>
7
+ <auro-anchorlink fluid href="#appearance">Appearance</auro-anchorlink>
8
+ <auro-anchorlink fluid href="#background" class="level2 body-xs">Light vs. Dark Background</auro-anchorlink>
9
+ <auro-anchorlink fluid href="#horizontal" class="level2 body-xs">Horizontal Layout</auro-anchorlink>
10
+ <auro-anchorlink fluid href="#cssTokens" class="level2 body-xs">Tokens</auro-anchorlink>
11
+ <auro-anchorlink fluid href="#cssParts" class="level2 body-xs">CSS Shadow Parts</auro-anchorlink>
12
+ <auro-anchorlink fluid href="#customBehavior">Behavior</auro-anchorlink>
13
+ <auro-anchorlink fluid href="#disabled" class="level2 body-xs">Disabled</auro-anchorlink>
14
+ <auro-anchorlink fluid href="#disabledGroup" class="level2 body-xs">Disabled Group</auro-anchorlink>
15
+ <auro-anchorlink fluid href="#required" class="level2 body-xs">Required</auro-anchorlink>
16
+ <auro-anchorlink fluid href="#error" class="level2 body-xs">Error</auro-anchorlink>
17
+ <auro-anchorlink fluid href="#noValidate" class="level2 body-xs">No Validation</auro-anchorlink>
18
+ </auro-nav>
19
+ </nav>
20
+ <div class="mainContent">
21
+ <div class="scrollWrapper">
22
+ <section>
23
+ <auro-header level="2" id="appearance">Appearance</auro-header>
24
+ <auro-header level="3" id="background">Light vs. Dark Background</auro-header>
25
+ <p>The <code>appearance</code> attribute defines whether the component renders on lighter or darker backgrounds. Supported values are <code>default</code> and <code>inverse</code>. The default value is <code>default</code>.</p>
26
+ <div class="exampleWrapper">
27
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
28
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
29
+ <auro-checkbox-group>
30
+ <span slot="legend">Form label goes here</span>
31
+ <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
32
+ <auro-checkbox value="value2" name="basic" id="checkbox-basic2">Checkbox option</auro-checkbox>
33
+ <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>
34
+ <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
35
+ </auro-checkbox-group>
36
+ <!-- AURO-GENERATED-CONTENT:END -->
37
+ </div>
38
+ <auro-accordion alignRight>
39
+ <span slot="trigger">See code</span>
40
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
41
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
42
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group&gt;
43
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
44
+ &lt;auro-checkbox value="value1" name="basic" id="checkbox-basic1"&gt;Checkbox option&lt;/auro-checkbox&gt;
45
+ &lt;auro-checkbox value="value2" name="basic" id="checkbox-basic2"&gt;Checkbox option&lt;/auro-checkbox&gt;
46
+ &lt;auro-checkbox value="value3" name="basic" id="checkbox-basic3"&gt;Checkbox option that has some extra text that should wrap when rendered in a narrow container&lt;/auro-checkbox&gt;
47
+ &lt;auro-checkbox value="value4" name="basic" id="checkbox-basic4"&gt;Checkbox option&lt;/auro-checkbox&gt;
48
+ &lt;/auro-checkbox-group&gt;</code></pre>
49
+ <!-- AURO-GENERATED-CONTENT:END -->
50
+ </auro-accordion>
51
+ <div class="exampleWrapper--ondark" aria-hidden>
52
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
53
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
54
+ <auro-checkbox-group appearance="inverse">
55
+ <span slot="legend">Form label goes here</span>
56
+ <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
57
+ <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
58
+ <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
59
+ <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
60
+ </auro-checkbox-group>
61
+ <!-- AURO-GENERATED-CONTENT:END -->
62
+ </div>
63
+ <auro-accordion alignRight>
64
+ <span slot="trigger">See code</span>
65
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
66
+ <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
67
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group appearance="inverse"&gt;
68
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
69
+ &lt;auro-checkbox value="value1" name="basic" id="checkbox-basic1"&gt;Checkbox option&lt;/auro-checkbox&gt;
70
+ &lt;auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
71
+ &lt;auro-checkbox value="value3" name="basic" id="checkbox-basic3"&gt;Checkbox option&lt;/auro-checkbox&gt;
72
+ &lt;auro-checkbox value="value4" name="basic" id="checkbox-basic4"&gt;Checkbox option&lt;/auro-checkbox&gt;
73
+ &lt;/auro-checkbox-group&gt;</code></pre>
74
+ <!-- AURO-GENERATED-CONTENT:END -->
75
+ </auro-accordion>
76
+ <auro-header level="3" id="horizontal">Horizontal Layout</auro-header>
77
+ <p>Using the <code>horizontal</code> attribute will render the checkbox options on a horizontal line.</p>
78
+ <p><strong>Note:</strong> The <code>horizontal</code> attribute has a limit of 3 options. Beyond three, options will be listed vertically.</p>
79
+ <div class="exampleWrapper">
80
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontal.html) -->
81
+ <!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
82
+ <auro-checkbox-group horizontal>
83
+ <span slot="legend">Form label goes here</span>
84
+ <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
85
+ <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
86
+ <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
87
+ </auro-checkbox-group>
88
+ <!-- AURO-GENERATED-CONTENT:END -->
89
+ </div>
90
+ <auro-accordion alignRight>
91
+ <span slot="trigger">See code</span>
92
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontal.html) -->
93
+ <!-- The below code snippet is automatically added from ./../apiExamples/horizontal.html -->
94
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group horizontal&gt;
95
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
96
+ &lt;auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1"&gt;Yes&lt;/auro-checkbox&gt;
97
+ &lt;auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2"&gt;No&lt;/auro-checkbox&gt;
98
+ &lt;auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3"&gt;Maybe&lt;/auro-checkbox&gt;
99
+ &lt;/auro-checkbox-group&gt;</code></pre>
100
+ <!-- AURO-GENERATED-CONTENT:END -->
101
+ </auro-accordion>
102
+ <auro-header level="3" id="cssTokens">Tokens</auro-header>
103
+ <p>The component may be restyled by overriding the following CSS custom properties (design tokens).</p>
104
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
105
+ <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
106
+ <pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
107
+ ​
108
+ :host {
109
+ --ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
110
+ --ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #{v.$ds-advanced-color-boolean-indicator});
111
+ --ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #{v.$ds-advanced-color-boolean-isfalse});
112
+ --ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
113
+ --ds-auro-checkbox-outline-color: transparent;
114
+ --ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
115
+ }</code></pre>
116
+ <!-- AURO-GENERATED-CONTENT:END -->
117
+ <div class="exampleWrapper">
118
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom-tokens.html) -->
119
+ <!-- The below content is automatically added from ./../apiExamples/custom-tokens.html -->
120
+ <style>
121
+ #customTokensExample {
122
+ --ds-auro-checkbox-border-color: purple;
123
+ --ds-auro-checkbox-checkmark-color: white;
124
+ --ds-auro-checkbox-container-color: lavender;
125
+ --ds-auro-checkbox-label-color: purple;
126
+ --ds-auro-checkbox-outline-color: mediumpurple;
127
+ --ds-auro-checkbox-group-text-color: purple;
128
+ }
129
+ </style>
130
+ <auro-checkbox-group id="customTokensExample">
131
+ <span slot="legend">Custom themed checkbox group</span>
132
+ <auro-checkbox value="value1" name="tokens" id="checkbox-tokens1">Checkbox option</auro-checkbox>
133
+ <auro-checkbox value="value2" name="tokens" id="checkbox-tokens2" checked>Checkbox option</auro-checkbox>
134
+ <auro-checkbox value="value3" name="tokens" id="checkbox-tokens3">Checkbox option</auro-checkbox>
135
+ </auro-checkbox-group>
136
+ <!-- AURO-GENERATED-CONTENT:END -->
137
+ </div>
138
+ <auro-accordion alignRight>
139
+ <span slot="trigger">See code</span>
140
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom-tokens.html) -->
141
+ <!-- The below code snippet is automatically added from ./../apiExamples/custom-tokens.html -->
142
+ <pre class="language-html"><code class="language-html">&lt;style&gt;
143
+ #customTokensExample {
144
+ --ds-auro-checkbox-border-color: purple;
145
+ --ds-auro-checkbox-checkmark-color: white;
146
+ --ds-auro-checkbox-container-color: lavender;
147
+ --ds-auro-checkbox-label-color: purple;
148
+ --ds-auro-checkbox-outline-color: mediumpurple;
149
+ --ds-auro-checkbox-group-text-color: purple;
150
+ }
151
+ &lt;/style&gt;
152
+ &lt;auro-checkbox-group id="customTokensExample"&gt;
153
+ &lt;span slot="legend"&gt;Custom themed checkbox group&lt;/span&gt;
154
+ &lt;auro-checkbox value="value1" name="tokens" id="checkbox-tokens1"&gt;Checkbox option&lt;/auro-checkbox&gt;
155
+ &lt;auro-checkbox value="value2" name="tokens" id="checkbox-tokens2" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
156
+ &lt;auro-checkbox value="value3" name="tokens" id="checkbox-tokens3"&gt;Checkbox option&lt;/auro-checkbox&gt;
157
+ &lt;/auro-checkbox-group&gt;</code></pre>
158
+ <!-- AURO-GENERATED-CONTENT:END -->
159
+ </auro-accordion>
160
+ <auro-header level="3" id="cssParts">CSS Shadow Parts</auro-header>
161
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customize/css-parts.md) -->
162
+ <!-- The below content is automatically added from ./../docs/partials/customize/css-parts.md -->
163
+ <p>CSS Shadow Parts allow you to style elements inside a web component's shadow DOM using the <code>::part()</code> pseudo-element. The following parts are exposed by <code>&lt;auro-checkbox&gt;</code>.</p>
164
+ <table class="auro_table">
165
+ <thead>
166
+ <tr>
167
+ <th>Part</th>
168
+ <th>Description</th>
169
+ </tr>
170
+ </thead>
171
+ <tbody>
172
+ <tr><td><code>checkbox</code></td><td>The checkbox container element.</td></tr>
173
+ <tr><td><code>checkbox-input</code></td><td>The checkbox input element.</td></tr>
174
+ <tr><td><code>checkbox-label</code></td><td>The checkbox label element.</td></tr>
175
+ </tbody>
176
+ </table>
177
+ <!-- AURO-GENERATED-CONTENT:END -->
178
+ <div class="exampleWrapper">
179
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/css-parts.html) -->
180
+ <!-- The below content is automatically added from ./../apiExamples/css-parts.html -->
181
+ <style>
182
+ #cssPartsExample::part(checkbox) {
183
+ border: 2px solid mediumpurple;
184
+ border-radius: 6px;
185
+ }
186
+
187
+ #cssPartsExample::part(checkbox-label) {
188
+ font-style: italic;
189
+ color: purple;
190
+ }
191
+ </style>
192
+ <auro-checkbox-group>
193
+ <span slot="legend">CSS Shadow Parts example</span>
194
+ <auro-checkbox id="cssPartsExample" value="styled" name="parts" checked>Styled checkbox</auro-checkbox>
195
+ <auro-checkbox value="default" name="parts" id="checkbox-parts2">Default checkbox</auro-checkbox>
196
+ </auro-checkbox-group>
197
+ <!-- AURO-GENERATED-CONTENT:END -->
198
+ </div>
199
+ <auro-accordion alignRight>
200
+ <span slot="trigger">See code</span>
201
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/css-parts.html) -->
202
+ <!-- The below code snippet is automatically added from ./../apiExamples/css-parts.html -->
203
+ <pre class="language-html"><code class="language-html">&lt;style&gt;
204
+ #cssPartsExample::part(checkbox) {
205
+ border: 2px solid mediumpurple;
206
+ border-radius: 6px;
207
+ }
208
+ ​
209
+ #cssPartsExample::part(checkbox-label) {
210
+ font-style: italic;
211
+ color: purple;
212
+ }
213
+ &lt;/style&gt;
214
+ &lt;auro-checkbox-group&gt;
215
+ &lt;span slot="legend"&gt;CSS Shadow Parts example&lt;/span&gt;
216
+ &lt;auro-checkbox id="cssPartsExample" value="styled" name="parts" checked&gt;Styled checkbox&lt;/auro-checkbox&gt;
217
+ &lt;auro-checkbox value="default" name="parts" id="checkbox-parts2"&gt;Default checkbox&lt;/auro-checkbox&gt;
218
+ &lt;/auro-checkbox-group&gt;</code></pre>
219
+ <!-- AURO-GENERATED-CONTENT:END -->
220
+ </auro-accordion>
221
+ </section>
222
+ <section>
223
+ <auro-header level="2" id="customBehavior">Behavior</auro-header>
224
+ <auro-header level="3" id="disabled">Disabled Checkbox</auro-header>
225
+ <p>Use the <code>disabled</code> attribute to disable individual <code>&lt;auro-checkbox&gt;</code> elements.</p>
226
+ <div class="exampleWrapper">
227
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
228
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
229
+ <auro-checkbox-group>
230
+ <span slot="legend">Form label goes here</span>
231
+ <auro-checkbox value="disabled-value1" name="disabled-value1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
232
+ <auro-checkbox value="disabled-value2" name="disabled-value2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
233
+ <auro-checkbox value="disabled-value3" name="disabled-value3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
234
+ <auro-checkbox value="disabled-value4" name="disabled-value4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
235
+ </auro-checkbox-group>
236
+ <!-- AURO-GENERATED-CONTENT:END -->
237
+ </div>
238
+ <auro-accordion alignRight>
239
+ <span slot="trigger">See code</span>
240
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
241
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
242
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group&gt;
243
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
244
+ &lt;auro-checkbox value="disabled-value1" name="disabled-value1" id="checkbox-disabled1"&gt;Checkbox option&lt;/auro-checkbox&gt;
245
+ &lt;auro-checkbox value="disabled-value2" name="disabled-value2" id="checkbox-disabled2" checked disabled&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
246
+ &lt;auro-checkbox value="disabled-value3" name="disabled-value3" id="checkbox-disabled3" disabled&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
247
+ &lt;auro-checkbox value="disabled-value4" name="disabled-value4" id="checkbox-disabled4" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
248
+ &lt;/auro-checkbox-group&gt;</code></pre>
249
+ <!-- AURO-GENERATED-CONTENT:END -->
250
+ </auro-accordion>
251
+ <auro-header level="3" id="disabledGroup">Disabled Group</auro-header>
252
+ <p>Use the <code>disabled</code> attribute on the <code>&lt;auro-checkbox-group&gt;</code> to disable all checkboxes in the group.</p>
253
+ <div class="exampleWrapper">
254
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled-group.html) -->
255
+ <!-- The below content is automatically added from ./../apiExamples/disabled-group.html -->
256
+ <auro-checkbox-group disabled>
257
+ <span slot="legend">Form label goes here</span>
258
+ <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
259
+ <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
260
+ <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
261
+ <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
262
+ </auro-checkbox-group>
263
+ <!-- AURO-GENERATED-CONTENT:END -->
264
+ </div>
265
+ <auro-accordion alignRight>
266
+ <span slot="trigger">See code</span>
267
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-group.html) -->
268
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled-group.html -->
269
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group disabled&gt;
270
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
271
+ &lt;auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
272
+ &lt;auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
273
+ &lt;auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
274
+ &lt;auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
275
+ &lt;/auro-checkbox-group&gt;</code></pre>
276
+ <!-- AURO-GENERATED-CONTENT:END -->
277
+ </auro-accordion>
278
+ <auro-header level="3" id="required">Required</auro-header>
279
+ <p>When present, the <code>required</code> attribute specifies that at least one <code>&lt;auro-checkbox&gt;</code> within the group must be checked.</p>
280
+ <div class="exampleWrapper">
281
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
282
+ <!-- The below content is automatically added from ./../apiExamples/required.html -->
283
+ <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
284
+ <span slot="legend">Form label goes here</span>
285
+ <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
286
+ <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
287
+ <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
288
+ <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
289
+ </auro-checkbox-group>
290
+ <!-- AURO-GENERATED-CONTENT:END -->
291
+ </div>
292
+ <auro-accordion alignRight>
293
+ <span slot="trigger">See code</span>
294
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
295
+ <!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
296
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group required setCustomValidityValueMissing="Please select an option"&gt;
297
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
298
+ &lt;auro-checkbox value="value1" name="required" id="checkbox-required1"&gt;Checkbox option&lt;/auro-checkbox&gt;
299
+ &lt;auro-checkbox value="value2" name="required" id="checkbox-required2"&gt;Checkbox option&lt;/auro-checkbox&gt;
300
+ &lt;auro-checkbox value="value3" name="required" id="checkbox-required3"&gt;Checkbox option&lt;/auro-checkbox&gt;
301
+ &lt;auro-checkbox value="value4" name="required" id="checkbox-required4"&gt;Checkbox option&lt;/auro-checkbox&gt;
302
+ &lt;/auro-checkbox-group&gt;</code></pre>
303
+ <!-- AURO-GENERATED-CONTENT:END -->
304
+ </auro-accordion>
305
+ <auro-header level="3" id="error">Error</auro-header>
306
+ <p>Use the <code>error</code> attribute to force an error state on the <code>&lt;auro-checkbox-group&gt;</code>. Pass a string with the error message.</p>
307
+ <p><strong>Note:</strong> The <code>error</code> attribute is only supported on the <code>&lt;auro-checkbox-group&gt;</code> element, not on individual checkboxes.</p>
308
+ <div class="exampleWrapper">
309
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error-group.html) -->
310
+ <!-- The below content is automatically added from ./../apiExamples/error-group.html -->
311
+ <auro-checkbox-group error="custom error">
312
+ <span slot="legend">Form label goes here</span>
313
+ <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
314
+ <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
315
+ <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
316
+ <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
317
+ </auro-checkbox-group>
318
+ <!-- AURO-GENERATED-CONTENT:END -->
319
+ </div>
320
+ <auro-accordion alignRight>
321
+ <span slot="trigger">See code</span>
322
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error-group.html) -->
323
+ <!-- The below code snippet is automatically added from ./../apiExamples/error-group.html -->
324
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group error="custom error"&gt;
325
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
326
+ &lt;auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1"&gt;Error checkbox option&lt;/auro-checkbox&gt;
327
+ &lt;auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2"&gt;Error checkbox option&lt;/auro-checkbox&gt;
328
+ &lt;auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3"&gt;Error checkbox option&lt;/auro-checkbox&gt;
329
+ &lt;auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked&gt;Error checkbox option&lt;/auro-checkbox&gt;
330
+ &lt;/auro-checkbox-group&gt;</code></pre>
331
+ <!-- AURO-GENERATED-CONTENT:END -->
332
+ </auro-accordion>
333
+ <auro-header level="3" id="noValidate">No Validation</auro-header>
334
+ <p>Use the <code>noValidate</code> attribute to disable auto-validation on blur. Validation can still be triggered programmatically via the <code>validate()</code> method.</p>
335
+ <div class="exampleWrapper">
336
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-validate.html) -->
337
+ <!-- The below content is automatically added from ./../apiExamples/no-validate.html -->
338
+ <auro-checkbox-group required noValidate setCustomValidityValueMissing="Please select an option" id="noValidateExample">
339
+ <span slot="legend">No auto-validation on blur</span>
340
+ <auro-checkbox value="value1" name="noValidate" id="checkbox-noValidate1">Checkbox option</auro-checkbox>
341
+ <auro-checkbox value="value2" name="noValidate" id="checkbox-noValidate2">Checkbox option</auro-checkbox>
342
+ <auro-checkbox value="value3" name="noValidate" id="checkbox-noValidate3">Checkbox option</auro-checkbox>
343
+ </auro-checkbox-group>
344
+ <!-- AURO-GENERATED-CONTENT:END -->
345
+ </div>
346
+ <auro-accordion alignRight>
347
+ <span slot="trigger">See code</span>
348
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-validate.html) -->
349
+ <!-- The below code snippet is automatically added from ./../apiExamples/no-validate.html -->
350
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group required noValidate setCustomValidityValueMissing="Please select an option" id="noValidateExample"&gt;
351
+ &lt;span slot="legend"&gt;No auto-validation on blur&lt;/span&gt;
352
+ &lt;auro-checkbox value="value1" name="noValidate" id="checkbox-noValidate1"&gt;Checkbox option&lt;/auro-checkbox&gt;
353
+ &lt;auro-checkbox value="value2" name="noValidate" id="checkbox-noValidate2"&gt;Checkbox option&lt;/auro-checkbox&gt;
354
+ &lt;auro-checkbox value="value3" name="noValidate" id="checkbox-noValidate3"&gt;Checkbox option&lt;/auro-checkbox&gt;
355
+ &lt;/auro-checkbox-group&gt;</code></pre>
356
+ <!-- AURO-GENERATED-CONTENT:END -->
357
+ </auro-accordion>
358
+ </section>
359
+ </div>
360
+ </div>
361
+ </div>
package/components/checkbox/demo/demo-support.js ADDED
@@ -0,0 +1,60 @@
1
+ import {unified} from 'unified';
2
+ import remarkParse from 'remark-parse';
3
+ import remarkGfm from 'remark-gfm';
4
+ import remarkRehype from 'remark-rehype';
5
+ import rehypeRaw from 'rehype-raw';
6
+ import rehypeHighlight from 'rehype-highlight';
7
+ import rehypeStringify from 'rehype-stringify';
8
+
9
+ export async function renderPage(mdPath) {
10
+ const response = await fetch(mdPath);
11
+ const text = await response.text();
12
+ const result = await unified()
13
+ .use(remarkParse)
14
+ .use(remarkGfm)
15
+ .use(remarkRehype, { allowDangerousHtml: true })
16
+ .use(rehypeRaw)
17
+ .use(rehypeHighlight)
18
+ .use(rehypeStringify)
19
+ .process(text);
20
+
21
+ document.querySelector('main').innerHTML = String(result);
22
+ addCopyButtons();
23
+ }
24
+
25
+ function addCopyButtons() {
26
+ document.querySelectorAll('pre code[class*="language-"], pre code[class*="hljs"]').forEach((code) => {
27
+ const pre = code.parentElement;
28
+ const wrapper = document.createElement('div');
29
+ wrapper.className = 'pre-wrapper';
30
+ pre.parentNode.insertBefore(wrapper, pre);
31
+ wrapper.appendChild(pre);
32
+ const btn = document.createElement('button');
33
+ btn.className = 'copy-btn';
34
+ btn.textContent = 'Copy';
35
+ btn.addEventListener('click', () => {
36
+ const raw = code.textContent;
37
+ const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n').replace(/^\$ /, '');
38
+ navigator.clipboard.writeText(text).then(() => {
39
+ btn.textContent = 'Copied!';
40
+ setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
41
+ });
42
+ });
43
+ wrapper.appendChild(btn);
44
+ });
45
+ }
46
+
47
+ export function openAccordion(id) {
48
+ document.querySelectorAll('auro-accordion').forEach((accordion) => {
49
+ accordion.removeAttribute('expanded');
50
+ });
51
+ const target = document.getElementById(id);
52
+ if (target) {
53
+ target.setAttribute('expanded', '');
54
+ setTimeout(() => {
55
+ target.scrollIntoView({ behavior: 'smooth', block: 'start' });
56
+ }, 550);
57
+ }
58
+ }
59
+
60
+ window.openAccordion = openAccordion;