@aurodesignsystem-dev/auro-formkit 0.0.0-pr1448.0 → 0.0.0-pr1451.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 (163) hide show
  1. package/components/checkbox/demo/api.md +201 -221
  2. package/components/checkbox/demo/api.min.js +1 -1
  3. package/components/checkbox/demo/index.md +21 -23
  4. package/components/checkbox/demo/index.min.js +1 -1
  5. package/components/checkbox/demo/keyboard-behavior.md +39 -0
  6. package/components/checkbox/demo/readme.md +23 -35
  7. package/components/checkbox/dist/auro-checkbox-group.d.ts +6 -6
  8. package/components/checkbox/dist/auro-checkbox.d.ts +8 -8
  9. package/components/checkbox/dist/index.js +1 -1
  10. package/components/checkbox/dist/registered.js +1 -1
  11. package/components/combobox/README.md +13 -3
  12. package/components/combobox/demo/accessibility.html +57 -0
  13. package/components/combobox/demo/accessibility.md +77 -0
  14. package/components/combobox/demo/api.html +24 -0
  15. package/components/combobox/demo/api.md +1613 -1685
  16. package/components/combobox/demo/api.min.js +14 -20
  17. package/components/combobox/demo/design.html +83 -0
  18. package/components/combobox/demo/design.md +283 -0
  19. package/components/combobox/demo/index.html +49 -16
  20. package/components/combobox/demo/index.js +3 -2
  21. package/components/combobox/demo/index.md +861 -185
  22. package/components/combobox/demo/index.min.js +40 -21
  23. package/components/combobox/demo/install.html +84 -0
  24. package/components/combobox/demo/install.js +24 -0
  25. package/components/combobox/demo/install.md +100 -0
  26. package/components/combobox/demo/install.min.js +17991 -0
  27. package/components/combobox/demo/{keyboardBehavior.html → keyboard-behavior.html} +2 -1
  28. package/components/combobox/demo/keyboard-behavior.md +276 -0
  29. package/components/combobox/demo/layout.md +112 -0
  30. package/components/combobox/demo/readme.html +25 -1
  31. package/components/combobox/demo/readme.md +50 -52
  32. package/components/combobox/demo/styles.css +141 -0
  33. package/components/combobox/demo/voiceover.html +66 -0
  34. package/components/combobox/demo/voiceover.md +118 -0
  35. package/components/combobox/dist/auro-combobox.d.ts +36 -36
  36. package/components/combobox/dist/index.js +11 -16
  37. package/components/combobox/dist/registered.js +11 -16
  38. package/components/counter/demo/api.md +751 -819
  39. package/components/counter/demo/api.min.js +2 -2
  40. package/components/counter/demo/index.md +35 -39
  41. package/components/counter/demo/index.min.js +2 -2
  42. package/components/counter/demo/keyboard-behavior.md +127 -0
  43. package/components/counter/demo/readme.md +39 -51
  44. package/components/counter/dist/auro-counter-group.d.ts +2 -2
  45. package/components/counter/dist/auro-counter.d.ts +10 -10
  46. package/components/counter/dist/index.js +2 -2
  47. package/components/counter/dist/registered.js +2 -2
  48. package/components/datepicker/demo/api.md +827 -931
  49. package/components/datepicker/demo/api.min.js +3 -3
  50. package/components/datepicker/demo/index.md +79 -87
  51. package/components/datepicker/demo/index.min.js +3 -3
  52. package/components/datepicker/demo/keyboard-behavior.md +19 -0
  53. package/components/datepicker/demo/readme.md +19 -31
  54. package/components/datepicker/dist/index.js +3 -3
  55. package/components/datepicker/dist/registered.js +3 -3
  56. package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +2 -2
  57. package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +13 -13
  58. package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +4 -4
  59. package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +3 -3
  60. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +2 -2
  61. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +1 -1
  62. package/components/dropdown/demo/api.md +795 -851
  63. package/components/dropdown/demo/api.min.js +1 -1
  64. package/components/dropdown/demo/index.md +145 -155
  65. package/components/dropdown/demo/index.min.js +1 -1
  66. package/components/dropdown/demo/keyboard-behavior.md +72 -0
  67. package/components/dropdown/demo/readme.md +39 -51
  68. package/components/dropdown/dist/auro-dropdown.d.ts +22 -22
  69. package/components/dropdown/dist/auro-dropdownBib.d.ts +3 -3
  70. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +1 -1
  71. package/components/dropdown/dist/index.js +1 -1
  72. package/components/dropdown/dist/registered.js +1 -1
  73. package/components/form/demo/api.md +173 -179
  74. package/components/form/demo/api.min.js +24 -30
  75. package/components/form/demo/index.md +27 -33
  76. package/components/form/demo/index.min.js +24 -30
  77. package/components/form/demo/keyboard-behavior.md +38 -0
  78. package/components/form/demo/readme.md +14 -28
  79. package/components/input/demo/api.md +572 -664
  80. package/components/input/demo/api.min.js +1 -1
  81. package/components/input/demo/index.md +93 -99
  82. package/components/input/demo/index.min.js +1 -1
  83. package/components/input/demo/keyboard-behavior.md +25 -0
  84. package/components/input/demo/readme.md +17 -29
  85. package/components/input/dist/auro-input.d.ts +1 -1
  86. package/components/input/dist/base-input.d.ts +29 -29
  87. package/components/input/dist/index.js +1 -1
  88. package/components/input/dist/registered.js +1 -1
  89. package/components/menu/demo/api.md +745 -789
  90. package/components/menu/demo/api.min.js +3 -4
  91. package/components/menu/demo/index.md +35 -37
  92. package/components/menu/demo/index.min.js +3 -4
  93. package/components/menu/demo/keyboard-behavior.md +18 -0
  94. package/components/menu/demo/readme.md +23 -35
  95. package/components/menu/dist/auro-menu-utils.d.ts +1 -1
  96. package/components/menu/dist/auro-menu.context.d.ts +3 -3
  97. package/components/menu/dist/auro-menu.d.ts +5 -5
  98. package/components/menu/dist/auro-menuoption.d.ts +6 -6
  99. package/components/menu/dist/index.js +3 -4
  100. package/components/menu/dist/registered.js +3 -4
  101. package/components/radio/demo/api.md +318 -350
  102. package/components/radio/demo/api.min.js +1 -1
  103. package/components/radio/demo/index.md +25 -29
  104. package/components/radio/demo/index.min.js +1 -1
  105. package/components/radio/demo/keyboard-behavior.md +72 -0
  106. package/components/radio/demo/readme.md +21 -33
  107. package/components/radio/dist/auro-radio-group.d.ts +9 -9
  108. package/components/radio/dist/auro-radio.d.ts +8 -8
  109. package/components/radio/dist/index.js +1 -1
  110. package/components/radio/dist/registered.js +1 -1
  111. package/components/select/README.md +12 -1
  112. package/components/select/demo/accessibility.html +65 -0
  113. package/components/select/demo/accessibility.md +76 -0
  114. package/components/select/demo/api.md +1713 -1793
  115. package/components/select/demo/api.min.js +5 -6
  116. package/components/select/demo/index.html +247 -37
  117. package/components/select/demo/index.md +225 -345
  118. package/components/select/demo/index.min.js +5 -6
  119. package/components/select/demo/keyboard-behavior.md +39 -0
  120. package/components/select/demo/layout.html +59 -0
  121. package/components/select/demo/layout.md +299 -0
  122. package/components/select/demo/readme.md +45 -46
  123. package/components/select/demo/voiceover.html +65 -0
  124. package/components/select/demo/voiceover.md +183 -0
  125. package/components/select/dist/auro-select.d.ts +11 -11
  126. package/components/select/dist/index.js +2 -2
  127. package/components/select/dist/registered.js +2 -2
  128. package/custom-elements.json +1659 -1657
  129. package/package.json +26 -26
  130. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  131. package/components/combobox/demo/keyboardBehavior.md +0 -281
  132. package/components/counter/demo/keyboardBehavior.md +0 -127
  133. package/components/datepicker/demo/keyboardBehavior.md +0 -19
  134. package/components/dropdown/demo/keyboardBehavior.md +0 -77
  135. package/components/form/demo/keyboardBehavior.md +0 -0
  136. package/components/input/demo/keyboardBehavior.md +0 -0
  137. package/components/menu/demo/keyboardBehavior.md +0 -0
  138. package/components/radio/demo/keyboardBehavior.md +0 -0
  139. package/components/select/demo/keyboardBehavior.md +0 -245
  140. /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
  141. /package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +0 -0
  142. /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
  143. /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
  144. /package/components/datepicker/dist/{iconVersion.d.ts → src/iconVersion.d.ts} +0 -0
  145. /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
  146. /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
  147. /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
  148. /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
  149. /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
  150. /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
  151. /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
  152. /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
  153. /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
  154. /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
  155. /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
  156. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
  157. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
  158. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
  159. /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
  160. /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
  161. /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
  162. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
  163. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
package/components/checkbox/demo/api.md CHANGED
@@ -95,31 +95,29 @@ The `auro-checkbox` element is for the purpose of allowing users to select one o
95
95
  ## Basic
96
96
 
97
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 -->
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
108
  </div>
109
109
  <auro-accordion alignRight>
110
- <span slot="trigger">See code</span>
110
+ <span slot="trigger">See code</span>
111
111
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
112
112
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
113
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
- ```
114
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group&gt;
115
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
116
+ &lt;auro-checkbox value="value1" name="basic" id="checkbox-basic1"&gt;Checkbox option&lt;/auro-checkbox&gt;
117
+ &lt;auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
118
+ &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;
119
+ &lt;auro-checkbox value="value4" name="basic" id="checkbox-basic4"&gt;Checkbox option&lt;/auro-checkbox&gt;
120
+ &lt;/auro-checkbox-group&gt;</code></pre>
123
121
  <!-- AURO-GENERATED-CONTENT:END -->
124
122
  </auro-accordion>
125
123
 
@@ -130,27 +128,27 @@ The `auro-checkbox` element is for the purpose of allowing users to select one o
130
128
  Use the `appearance="inverse"` attribute to render the checkbox for use on dark backgrounds.
131
129
 
132
130
  <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 -->
131
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
132
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
133
+ <auro-checkbox-group appearance="inverse">
134
+ <span slot="legend">Form label goes here</span>
135
+ <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
136
+ <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
137
+ <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
138
+ <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
139
+ </auro-checkbox-group>
140
+ <!-- AURO-GENERATED-CONTENT:END -->
143
141
  </div>
144
142
  <auro-accordion alignRight>
145
- <span slot="trigger">See code</span>
143
+ <span slot="trigger">See code</span>
146
144
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
147
145
  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
148
146
  <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>
147
+ <span slot="legend">Form label goes here</span>
148
+ <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
149
+ <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
150
+ <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
151
+ <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
154
152
  </auro-checkbox-group>
155
153
  <!-- AURO-GENERATED-CONTENT:END -->
156
154
  </auro-accordion>
@@ -164,31 +162,29 @@ Use the `disabled` attribute to disable individual `<auro-checkbox>` elements or
164
162
  The `disabled` attribute used to disable a single `<auro-checkbox>` element.
165
163
 
166
164
  <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 -->
165
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
166
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
167
+ <auro-checkbox-group>
168
+ <span slot="legend">Form label goes here</span>
169
+ <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
170
+ <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
171
+ <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
172
+ <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
173
+ </auro-checkbox-group>
174
+ <!-- AURO-GENERATED-CONTENT:END -->
177
175
  </div>
178
176
  <auro-accordion alignRight>
179
- <span slot="trigger">See code</span>
177
+ <span slot="trigger">See code</span>
180
178
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
181
179
  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
182
180
 
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
- ```
181
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group&gt;
182
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
183
+ &lt;auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1"&gt;Checkbox option&lt;/auro-checkbox&gt;
184
+ &lt;auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
185
+ &lt;auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
186
+ &lt;auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
187
+ &lt;/auro-checkbox-group&gt;</code></pre>
192
188
  <!-- AURO-GENERATED-CONTENT:END -->
193
189
  </auro-accordion>
194
190
 
@@ -197,52 +193,50 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
197
193
  The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
198
194
 
199
195
  <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 -->
196
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled-group.html) -->
197
+ <!-- The below content is automatically added from ./../apiExamples/disabled-group.html -->
198
+ <auro-checkbox-group disabled>
199
+ <span slot="legend">Form label goes here</span>
200
+ <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
201
+ <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
202
+ <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
203
+ <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
204
+ </auro-checkbox-group>
205
+ <!-- AURO-GENERATED-CONTENT:END -->
210
206
  </div>
211
207
  <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 -->
208
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
209
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
210
+ <auro-checkbox-group appearance="inverse" disabled>
211
+ <span slot="legend">Form label goes here</span>
212
+ <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
213
+ <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
214
+ <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
215
+ <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
216
+ </auro-checkbox-group>
217
+ <!-- AURO-GENERATED-CONTENT:END -->
222
218
  </div>
223
219
  <auro-accordion alignRight>
224
- <span slot="trigger">See code</span>
220
+ <span slot="trigger">See code</span>
225
221
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-group.html) -->
226
222
  <!-- The below code snippet is automatically added from ./../apiExamples/disabled-group.html -->
227
223
 
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
- ```
224
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group disabled&gt;
225
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
226
+ &lt;auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
227
+ &lt;auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
228
+ &lt;auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
229
+ &lt;auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
230
+ &lt;/auro-checkbox-group&gt;</code></pre>
237
231
  <!-- AURO-GENERATED-CONTENT:END -->
238
232
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
239
233
  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
240
234
  <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>
235
+ <span slot="legend">Form label goes here</span>
236
+ <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
237
+ <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
238
+ <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
239
+ <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
246
240
  </auro-checkbox-group>
247
241
  <!-- AURO-GENERATED-CONTENT:END -->
248
242
  </auro-accordion>
@@ -254,29 +248,27 @@ Using the `horizontal` attribute will render the checkbox options on a horizonta
254
248
  **Note**: Using the `horizontal` attribute has a limit of 3 options. Beyond three, options will be listed in vertically.
255
249
 
256
250
  <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 -->
251
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontal.html) -->
252
+ <!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
253
+ <auro-checkbox-group horizontal>
254
+ <span slot="legend">Form label goes here</span>
255
+ <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
256
+ <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
257
+ <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
258
+ </auro-checkbox-group>
259
+ <!-- AURO-GENERATED-CONTENT:END -->
266
260
  </div>
267
261
  <auro-accordion alignRight>
268
- <span slot="trigger">See code</span>
262
+ <span slot="trigger">See code</span>
269
263
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontal.html) -->
270
264
  <!-- The below code snippet is automatically added from ./../apiExamples/horizontal.html -->
271
265
 
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
- ```
266
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group horizontal&gt;
267
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
268
+ &lt;auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1"&gt;Yes&lt;/auro-checkbox&gt;
269
+ &lt;auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2"&gt;No&lt;/auro-checkbox&gt;
270
+ &lt;auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3"&gt;Maybe&lt;/auro-checkbox&gt;
271
+ &lt;/auro-checkbox-group&gt;</code></pre>
280
272
  <!-- AURO-GENERATED-CONTENT:END -->
281
273
  </auro-accordion>
282
274
 
@@ -295,52 +287,50 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
295
287
  **Note**: The `error` attribute is only supported on the `<auro-checkbox-group>` element, not on individual `<auro-checkbox>` elements.
296
288
 
297
289
  <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 -->
290
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error-group.html) -->
291
+ <!-- The below content is automatically added from ./../apiExamples/error-group.html -->
292
+ <auro-checkbox-group error="custom error">
293
+ <span slot="legend">Form label goes here</span>
294
+ <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
295
+ <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
296
+ <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
297
+ <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
298
+ </auro-checkbox-group>
299
+ <!-- AURO-GENERATED-CONTENT:END -->
308
300
  </div>
309
301
  <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 -->
302
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
303
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
304
+ <auro-checkbox-group appearance="inverse" error="custom error">
305
+ <span slot="legend">Form label goes here</span>
306
+ <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
307
+ <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
308
+ <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
309
+ <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
310
+ </auro-checkbox-group>
311
+ <!-- AURO-GENERATED-CONTENT:END -->
320
312
  </div>
321
313
  <auro-accordion alignRight>
322
- <span slot="trigger">See code</span>
314
+ <span slot="trigger">See code</span>
323
315
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error-group.html) -->
324
316
  <!-- The below code snippet is automatically added from ./../apiExamples/error-group.html -->
325
317
 
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
- ```
318
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group error="custom error"&gt;
319
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
320
+ &lt;auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1"&gt;Error checkbox option&lt;/auro-checkbox&gt;
321
+ &lt;auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2"&gt;Error checkbox option&lt;/auro-checkbox&gt;
322
+ &lt;auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3"&gt;Error checkbox option&lt;/auro-checkbox&gt;
323
+ &lt;auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked&gt;Error checkbox option&lt;/auro-checkbox&gt;
324
+ &lt;/auro-checkbox-group&gt;</code></pre>
335
325
  <!-- AURO-GENERATED-CONTENT:END -->
336
326
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
337
327
  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
338
328
  <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>
329
+ <span slot="legend">Form label goes here</span>
330
+ <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
331
+ <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
332
+ <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
333
+ <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
344
334
  </auro-checkbox-group>
345
335
  <!-- AURO-GENERATED-CONTENT:END -->
346
336
  </auro-accordion>
@@ -350,31 +340,29 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
350
340
  When present, the `required` attribute specifies that at least one or more `<auro-checkbox>` elements within the `<auro-checkbox-group>` must be checked.
351
341
 
352
342
  <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 -->
343
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
344
+ <!-- The below content is automatically added from ./../apiExamples/required.html -->
345
+ <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
346
+ <span slot="legend">Form label goes here</span>
347
+ <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
348
+ <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
349
+ <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
350
+ <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
351
+ </auro-checkbox-group>
352
+ <!-- AURO-GENERATED-CONTENT:END -->
363
353
  </div>
364
354
  <auro-accordion alignRight>
365
- <span slot="trigger">See code</span>
355
+ <span slot="trigger">See code</span>
366
356
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
367
357
  <!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
368
358
 
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
- ```
359
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group required setCustomValidityValueMissing="Please select an option"&gt;
360
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
361
+ &lt;auro-checkbox value="value1" name="required" id="checkbox-required1"&gt;Checkbox option&lt;/auro-checkbox&gt;
362
+ &lt;auro-checkbox value="value2" name="required" id="checkbox-required2"&gt;Checkbox option&lt;/auro-checkbox&gt;
363
+ &lt;auro-checkbox value="value3" name="required" id="checkbox-required3"&gt;Checkbox option&lt;/auro-checkbox&gt;
364
+ &lt;auro-checkbox value="value4" name="required" id="checkbox-required4"&gt;Checkbox option&lt;/auro-checkbox&gt;
365
+ &lt;/auro-checkbox-group&gt;</code></pre>
378
366
  <!-- AURO-GENERATED-CONTENT:END -->
379
367
  </auro-accordion>
380
368
 
@@ -385,33 +373,31 @@ When present, the `required` attribute specifies that at least one or more `<aur
385
373
  The `<auro-checkbox-group>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
386
374
 
387
375
  <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 -->
376
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
377
+ <!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
378
+ <auro-checkbox-group>
379
+ <span slot="legend">Form label goes here</span>
380
+ <span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
381
+ <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
382
+ <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
383
+ <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>
384
+ <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
385
+ </auro-checkbox-group>
386
+ <!-- AURO-GENERATED-CONTENT:END -->
399
387
  </div>
400
388
  <auro-accordion alignRight>
401
- <span slot="trigger">See code</span>
389
+ <span slot="trigger">See code</span>
402
390
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optional-label.html) -->
403
391
  <!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
404
392
 
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
- ```
393
+ <pre class="language-html"><code class="language-html">&lt;auro-checkbox-group&gt;
394
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
395
+ &lt;span slot="optionalLabel" style="font-size: small; color: grey"&gt; - optional&lt;/span&gt;
396
+ &lt;auro-checkbox value="value1" name="basic" id="checkbox-basic1"&gt;Checkbox option&lt;/auro-checkbox&gt;
397
+ &lt;auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
398
+ &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;
399
+ &lt;auro-checkbox value="value4" name="basic" id="checkbox-basic4"&gt;Checkbox option&lt;/auro-checkbox&gt;
400
+ &lt;/auro-checkbox-group&gt;</code></pre>
415
401
  <!-- AURO-GENERATED-CONTENT:END -->
416
402
  </auro-accordion>
417
403
 
@@ -422,48 +408,44 @@ The `<auro-checkbox-group>` supports an `optionalLabel` slot, where users can ca
422
408
  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
409
 
424
410
  <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 -->
411
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
412
+ <!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
413
+ <auro-button id="resetStateBtn">Reset</auro-button>
414
+ <br/><br/>
415
+ <auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
416
+ <span slot="legend">Form label goes here</span>
417
+ <auro-checkbox value="value1" name="resetState" id="checkbox-basic1">Checkbox option</auro-checkbox>
418
+ <auro-checkbox value="value2" name="resetState" id="checkbox-basic2">Checkbox option</auro-checkbox>
419
+ <auro-checkbox value="value3" name="resetState" id="checkbox-basic3">Checkbox option</auro-checkbox>
420
+ <auro-checkbox value="value4" name="resetState" id="checkbox-basic4">Checkbox option</auro-checkbox>
421
+ </auro-checkbox-group>
422
+ <!-- AURO-GENERATED-CONTENT:END -->
437
423
  </div>
438
424
  <auro-accordion alignRight>
439
- <span slot="trigger">See code</span>
425
+ <span slot="trigger">See code</span>
440
426
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
441
427
  <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
442
428
 
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
- ```
429
+ <pre class="language-html"><code class="language-html">&lt;auro-button id="resetStateBtn"&gt;Reset&lt;/auro-button&gt;
430
+ &lt;br/&gt;&lt;br/&gt;
431
+ &lt;auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option"&gt;
432
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
433
+ &lt;auro-checkbox value="value1" name="resetState" id="checkbox-basic1"&gt;Checkbox option&lt;/auro-checkbox&gt;
434
+ &lt;auro-checkbox value="value2" name="resetState" id="checkbox-basic2"&gt;Checkbox option&lt;/auro-checkbox&gt;
435
+ &lt;auro-checkbox value="value3" name="resetState" id="checkbox-basic3"&gt;Checkbox option&lt;/auro-checkbox&gt;
436
+ &lt;auro-checkbox value="value4" name="resetState" id="checkbox-basic4"&gt;Checkbox option&lt;/auro-checkbox&gt;
437
+ &lt;/auro-checkbox-group&gt;</code></pre>
454
438
  <!-- AURO-GENERATED-CONTENT:END -->
455
439
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
456
440
  <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
457
441
 
458
- ```js
459
- export function resetStateExample() {
442
+ <pre class="language-js"><code class="language-js">export function resetStateExample() {
460
443
  const elem = document.querySelector('#resetStateExample');
461
-
462
- document.querySelector('#resetStateBtn').addEventListener('click', () => {
444
+ ​
445
+ document.querySelector('#resetStateBtn').addEventListener('click', () =&gt; {
463
446
  elem.reset();
464
447
  });
465
- }
466
- ```
448
+ }</code></pre>
467
449
  <!-- AURO-GENERATED-CONTENT:END -->
468
450
  </auro-accordion>
469
451
 
@@ -474,9 +456,8 @@ The component may be restyled by changing the values of the following token(s).
474
456
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
475
457
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
476
458
 
477
- ```scss
478
- @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
479
-
459
+ <pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
460
+ ​
480
461
  :host {
481
462
  --ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
482
463
  --ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #{v.$ds-advanced-color-boolean-indicator});
@@ -484,6 +465,5 @@ The component may be restyled by changing the values of the following token(s).
484
465
  --ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
485
466
  --ds-auro-checkbox-outline-color: transparent;
486
467
  --ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
487
- }
488
- ```
468
+ }</code></pre>
489
469
  <!-- AURO-GENERATED-CONTENT:END -->
package/components/checkbox/demo/api.min.js CHANGED
@@ -1689,7 +1689,7 @@ class AuroHelpText extends i$2 {
1689
1689
  }
1690
1690
  }
1691
1691
 
1692
- var formkitVersion = '202604231640';
1692
+ var formkitVersion = '202604232130';
1693
1693
 
1694
1694
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1695
1695
  // See LICENSE in the project root for license information.