@aurodesignsystem-dev/auro-formkit 0.0.0-pr1448.0 → 0.0.0-pr1451.1

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 +15 -21
  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 +41 -22
  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 +12 -17
  37. package/components/combobox/dist/registered.js +12 -17
  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 +4 -4
  50. package/components/datepicker/demo/index.md +79 -87
  51. package/components/datepicker/demo/index.min.js +4 -4
  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 +4 -4
  55. package/components/datepicker/dist/registered.js +4 -4
  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 +27 -33
  75. package/components/form/demo/index.md +27 -33
  76. package/components/form/demo/index.min.js +27 -33
  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 +2 -2
  81. package/components/input/demo/index.md +93 -99
  82. package/components/input/demo/index.min.js +2 -2
  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 +2 -2
  88. package/components/input/dist/registered.js +2 -2
  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 +13 -11
  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/radio/demo/api.md CHANGED
@@ -100,48 +100,44 @@ The `auro-radio` element is used to a button that allows the user to select one
100
100
  ## Basic Radio
101
101
 
102
102
  <div class="exampleWrapper">
103
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
104
- <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
105
- <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
106
- <!-- AURO-GENERATED-CONTENT:END -->
103
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
104
+ <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
105
+ <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
106
+ <!-- AURO-GENERATED-CONTENT:END -->
107
107
  </div>
108
108
  <auro-accordion alignRight>
109
- <span slot="trigger">See code</span>
109
+ <span slot="trigger">See code</span>
110
110
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-standalone.html) -->
111
111
  <!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
112
112
 
113
- ```html
114
- <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
115
- ```
113
+ <pre class="language-html"><code class="language-html">&lt;auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;</code></pre>
116
114
  <!-- AURO-GENERATED-CONTENT:END -->
117
115
  </auro-accordion>
118
116
 
119
117
  ## Basic Radio Group
120
118
 
121
119
  <div class="exampleWrapper">
122
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
123
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
124
- <auro-radio-group>
125
- <span slot="legend">Form label goes here</span>
126
- <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
127
- <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
128
- <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
129
- </auro-radio-group>
130
- <!-- AURO-GENERATED-CONTENT:END -->
120
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
121
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
122
+ <auro-radio-group>
123
+ <span slot="legend">Form label goes here</span>
124
+ <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
125
+ <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
126
+ <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
127
+ </auro-radio-group>
128
+ <!-- AURO-GENERATED-CONTENT:END -->
131
129
  </div>
132
130
  <auro-accordion alignRight>
133
- <span slot="trigger">See code</span>
131
+ <span slot="trigger">See code</span>
134
132
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
135
133
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
136
134
 
137
- ```html
138
- <auro-radio-group>
139
- <span slot="legend">Form label goes here</span>
140
- <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
141
- <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
142
- <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
143
- </auro-radio-group>
144
- ```
135
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
136
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
137
+ &lt;auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
138
+ &lt;auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
139
+ &lt;auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
140
+ &lt;/auro-radio-group&gt;</code></pre>
145
141
  <!-- AURO-GENERATED-CONTENT:END -->
146
142
  </auro-accordion>
147
143
 
@@ -152,45 +148,41 @@ The `auro-radio` element is used to a button that allows the user to select one
152
148
  Use the `appearance="inverse"` attribute to render the radio for use on dark backgrounds.
153
149
 
154
150
  <div class="exampleWrapper--ondark">
155
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
156
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
157
- <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"></auro-radio>
158
- <!-- AURO-GENERATED-CONTENT:END -->
151
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
152
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
153
+ <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"></auro-radio>
154
+ <!-- AURO-GENERATED-CONTENT:END -->
159
155
  </div>
160
156
  <auro-accordion alignRight>
161
- <span slot="trigger">See code</span>
157
+ <span slot="trigger">See code</span>
162
158
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
163
159
  <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
164
160
 
165
- ```html
166
- <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"></auro-radio>
167
- ```
161
+ <pre class="language-html"><code class="language-html">&lt;auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"&gt;&lt;/auro-radio&gt;</code></pre>
168
162
  <!-- AURO-GENERATED-CONTENT:END -->
169
163
  </auro-accordion>
170
164
  <div class="exampleWrapper--ondark">
171
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-group.html) -->
172
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-group.html -->
173
- <auro-radio-group appearance="inverse">
174
- <span slot="legend">Form label goes here</span>
175
- <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
176
- <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
177
- <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
178
- </auro-radio-group>
179
- <!-- AURO-GENERATED-CONTENT:END -->
165
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-group.html) -->
166
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-group.html -->
167
+ <auro-radio-group appearance="inverse">
168
+ <span slot="legend">Form label goes here</span>
169
+ <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
170
+ <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
171
+ <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
172
+ </auro-radio-group>
173
+ <!-- AURO-GENERATED-CONTENT:END -->
180
174
  </div>
181
175
  <auro-accordion alignRight>
182
- <span slot="trigger">See code</span>
176
+ <span slot="trigger">See code</span>
183
177
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-group.html) -->
184
178
  <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-group.html -->
185
179
 
186
- ```html
187
- <auro-radio-group appearance="inverse">
188
- <span slot="legend">Form label goes here</span>
189
- <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
190
- <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
191
- <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
192
- </auro-radio-group>
193
- ```
180
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group appearance="inverse"&gt;
181
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
182
+ &lt;auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
183
+ &lt;auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
184
+ &lt;auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
185
+ &lt;/auro-radio-group&gt;</code></pre>
194
186
  <!-- AURO-GENERATED-CONTENT:END -->
195
187
  </auro-accordion>
196
188
 
@@ -199,50 +191,50 @@ Use the `appearance="inverse"` attribute to render the radio for use on dark bac
199
191
  Use the `checked` attribute to pre-select a `<auro-radio>` element.
200
192
 
201
193
  <div class="exampleWrapper">
202
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/checked.html) -->
203
- <!-- The below content is automatically added from ./../apiExamples/checked.html -->
204
- <auro-radio-group>
205
- <span slot="legend">Form label goes here</span>
206
- <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
207
- <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
208
- <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
209
- </auro-radio-group>
210
- <!-- AURO-GENERATED-CONTENT:END -->
194
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/checked.html) -->
195
+ <!-- The below content is automatically added from ./../apiExamples/checked.html -->
196
+ <auro-radio-group>
197
+ <span slot="legend">Form label goes here</span>
198
+ <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
199
+ <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
200
+ <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
201
+ </auro-radio-group>
202
+ <!-- AURO-GENERATED-CONTENT:END -->
211
203
  </div>
212
204
  <auro-accordion alignRight>
213
- <span slot="trigger">See code</span>
214
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/checked.html) -->
215
- <!-- The below content is automatically added from ./../apiExamples/checked.html -->
216
- <auro-radio-group>
217
- <span slot="legend">Form label goes here</span>
218
- <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
219
- <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
220
- <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
221
- </auro-radio-group>
222
- <!-- AURO-GENERATED-CONTENT:END -->
205
+ <span slot="trigger">See code</span>
206
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/checked.html) -->
207
+ <!-- The below content is automatically added from ./../apiExamples/checked.html -->
208
+ <auro-radio-group>
209
+ <span slot="legend">Form label goes here</span>
210
+ <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
211
+ <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
212
+ <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
213
+ </auro-radio-group>
214
+ <!-- AURO-GENERATED-CONTENT:END -->
223
215
  </auro-accordion>
224
216
  <div class="exampleWrapper--ondark">
225
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-checked.html) -->
226
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-checked.html -->
227
- <auro-radio-group appearance="inverse">
228
- <span slot="legend">Form label goes here</span>
229
- <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
230
- <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
231
- <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
232
- </auro-radio-group>
233
- <!-- AURO-GENERATED-CONTENT:END -->
217
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-checked.html) -->
218
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-checked.html -->
219
+ <auro-radio-group appearance="inverse">
220
+ <span slot="legend">Form label goes here</span>
221
+ <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
222
+ <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
223
+ <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
224
+ </auro-radio-group>
225
+ <!-- AURO-GENERATED-CONTENT:END -->
234
226
  </div>
235
227
  <auro-accordion alignRight>
236
- <span slot="trigger">See code</span>
237
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-checked.html) -->
238
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-checked.html -->
239
- <auro-radio-group appearance="inverse">
240
- <span slot="legend">Form label goes here</span>
241
- <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
242
- <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
243
- <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
244
- </auro-radio-group>
245
- <!-- AURO-GENERATED-CONTENT:END -->
228
+ <span slot="trigger">See code</span>
229
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-checked.html) -->
230
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-checked.html -->
231
+ <auro-radio-group appearance="inverse">
232
+ <span slot="legend">Form label goes here</span>
233
+ <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
234
+ <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
235
+ <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
236
+ </auro-radio-group>
237
+ <!-- AURO-GENERATED-CONTENT:END -->
246
238
  </auro-accordion>
247
239
 
248
240
  ### Disabled
@@ -250,76 +242,74 @@ Use the `checked` attribute to pre-select a `<auro-radio>` element.
250
242
  Use the `disabled` attribute to disable singular `<auro-radio>` elements or the entire `<auro-radio-group>`.
251
243
 
252
244
  <div class="exampleWrapper">
253
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
254
- <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
255
- <auro-radio-group>
256
- <span slot="legend">Form label goes here</span>
257
- <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
258
- <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
259
- <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
260
- </auro-radio-group>
261
- <auro-radio-group disabled>
262
- <span slot="legend">Form label goes here</span>
263
- <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
264
- <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
265
- <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
266
- </auro-radio-group>
267
- <!-- AURO-GENERATED-CONTENT:END -->
245
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
246
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
247
+ <auro-radio-group>
248
+ <span slot="legend">Form label goes here</span>
249
+ <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
250
+ <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
251
+ <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
252
+ </auro-radio-group>
253
+ <auro-radio-group disabled>
254
+ <span slot="legend">Form label goes here</span>
255
+ <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
256
+ <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
257
+ <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
258
+ </auro-radio-group>
259
+ <!-- AURO-GENERATED-CONTENT:END -->
268
260
  </div>
269
261
  <auro-accordion alignRight>
270
- <span slot="trigger">See code</span>
271
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
272
- <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
273
- ```html
274
- <auro-radio-group>
275
- <span slot="legend">Form label goes here</span>
276
- <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
277
- <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
278
- <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
279
- </auro-radio-group>
280
- <auro-radio-group disabled>
281
- <span slot="legend">Form label goes here</span>
282
- <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
283
- <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
284
- <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
285
- </auro-radio-group>
286
- ```
287
- <!-- AURO-GENERATED-CONTENT:END -->
262
+ <span slot="trigger">See code</span>
263
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
264
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
265
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
266
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
267
+ &lt;auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
268
+ &lt;auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled&gt;&lt;/auro-radio&gt;
269
+ &lt;auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
270
+ &lt;/auro-radio-group&gt;
271
+ &lt;auro-radio-group disabled&gt;
272
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
273
+ &lt;auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
274
+ &lt;auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked&gt;&lt;/auro-radio&gt;
275
+ &lt;auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
276
+ &lt;/auro-radio-group&gt;</code></pre>
277
+ <!-- AURO-GENERATED-CONTENT:END -->
288
278
  </auro-accordion>
289
279
  <div class="exampleWrapper--ondark">
290
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
291
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
292
- <auro-radio-group appearance="inverse">
293
- <span slot="legend">Form label goes here</span>
294
- <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
295
- <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
296
- <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
297
- </auro-radio-group>
298
- <auro-radio-group appearance="inverse" disabled>
299
- <span slot="legend">Form label goes here</span>
300
- <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
301
- <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
302
- <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
303
- </auro-radio-group>
304
- <!-- AURO-GENERATED-CONTENT:END -->
280
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
281
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
282
+ <auro-radio-group appearance="inverse">
283
+ <span slot="legend">Form label goes here</span>
284
+ <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
285
+ <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
286
+ <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
287
+ </auro-radio-group>
288
+ <auro-radio-group appearance="inverse" disabled>
289
+ <span slot="legend">Form label goes here</span>
290
+ <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
291
+ <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
292
+ <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
293
+ </auro-radio-group>
294
+ <!-- AURO-GENERATED-CONTENT:END -->
305
295
  </div>
306
296
  <auro-accordion alignRight>
307
- <span slot="trigger">See code</span>
308
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
309
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
310
- <auro-radio-group appearance="inverse">
311
- <span slot="legend">Form label goes here</span>
312
- <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
313
- <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
314
- <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
315
- </auro-radio-group>
316
- <auro-radio-group appearance="inverse" disabled>
317
- <span slot="legend">Form label goes here</span>
318
- <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
319
- <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
320
- <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
321
- </auro-radio-group>
322
- <!-- AURO-GENERATED-CONTENT:END -->
297
+ <span slot="trigger">See code</span>
298
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
299
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
300
+ <auro-radio-group appearance="inverse">
301
+ <span slot="legend">Form label goes here</span>
302
+ <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
303
+ <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
304
+ <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
305
+ </auro-radio-group>
306
+ <auro-radio-group appearance="inverse" disabled>
307
+ <span slot="legend">Form label goes here</span>
308
+ <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
309
+ <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
310
+ <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
311
+ </auro-radio-group>
312
+ <!-- AURO-GENERATED-CONTENT:END -->
323
313
  </auro-accordion>
324
314
 
325
315
  ### Error
@@ -329,52 +319,50 @@ Use the `error` attribute to apply a persistent custom error that supersedes the
329
319
  A custom error message can be set using the `error` attribute, or it can be used in conjunction with the `setCustomValidityCustomError` attribute.
330
320
 
331
321
  <div class="exampleWrapper">
332
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
333
- <!-- The below content is automatically added from ./../apiExamples/error.html -->
334
- <auro-radio-group error="There is an error with this form entry">
335
- <span slot="legend">Form label goes here</span>
336
- <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
337
- <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
338
- <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
339
- </auro-radio-group>
340
- <!-- AURO-GENERATED-CONTENT:END -->
322
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
323
+ <!-- The below content is automatically added from ./../apiExamples/error.html -->
324
+ <auro-radio-group error="There is an error with this form entry">
325
+ <span slot="legend">Form label goes here</span>
326
+ <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
327
+ <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
328
+ <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
329
+ </auro-radio-group>
330
+ <!-- AURO-GENERATED-CONTENT:END -->
341
331
  </div>
342
332
  <auro-accordion alignRight>
343
- <span slot="trigger">See code</span>
344
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
345
- <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
346
- ```html
347
- <auro-radio-group error="There is an error with this form entry">
348
- <span slot="legend">Form label goes here</span>
349
- <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
350
- <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
351
- <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
352
- </auro-radio-group>
353
- ```
354
- <!-- AURO-GENERATED-CONTENT:END -->
333
+ <span slot="trigger">See code</span>
334
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
335
+ <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
336
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group error="There is an error with this form entry"&gt;
337
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
338
+ &lt;auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
339
+ &lt;auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
340
+ &lt;auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
341
+ &lt;/auro-radio-group&gt;</code></pre>
342
+ <!-- AURO-GENERATED-CONTENT:END -->
355
343
  </auro-accordion>
356
344
  <div class="exampleWrapper--ondark">
357
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
358
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
359
- <auro-radio-group appearance="inverse" error="There is an error with this form entry">
360
- <span slot="legend">Form label goes here</span>
361
- <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
362
- <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
363
- <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
364
- </auro-radio-group>
365
- <!-- AURO-GENERATED-CONTENT:END -->
345
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
346
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
347
+ <auro-radio-group appearance="inverse" error="There is an error with this form entry">
348
+ <span slot="legend">Form label goes here</span>
349
+ <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
350
+ <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
351
+ <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
352
+ </auro-radio-group>
353
+ <!-- AURO-GENERATED-CONTENT:END -->
366
354
  </div>
367
355
  <auro-accordion alignRight>
368
- <span slot="trigger">See code</span>
369
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
370
- <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
371
- <auro-radio-group appearance="inverse" error="There is an error with this form entry">
372
- <span slot="legend">Form label goes here</span>
373
- <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
374
- <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
375
- <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
376
- </auro-radio-group>
377
- <!-- AURO-GENERATED-CONTENT:END -->
356
+ <span slot="trigger">See code</span>
357
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
358
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
359
+ <auro-radio-group appearance="inverse" error="There is an error with this form entry">
360
+ <span slot="legend">Form label goes here</span>
361
+ <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
362
+ <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
363
+ <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
364
+ </auro-radio-group>
365
+ <!-- AURO-GENERATED-CONTENT:END -->
378
366
  </auro-accordion>
379
367
 
380
368
  ### Horizontal Group
@@ -384,29 +372,27 @@ Using the `horizontal` attribute will render the `auro-radio` elements in a hori
384
372
  **Note**: Using the horizontal attribute has a limit of 3 options. Beyond three, options will be listed in vertically.
385
373
 
386
374
  <div class="exampleWrapper">
387
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontal.html) -->
388
- <!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
389
- <auro-radio-group horizontal>
390
- <span slot="legend">Form label goes here</span>
391
- <auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
392
- <auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"></auro-radio>
393
- <auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
394
- </auro-radio-group>
395
- <!-- AURO-GENERATED-CONTENT:END -->
375
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontal.html) -->
376
+ <!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
377
+ <auro-radio-group horizontal>
378
+ <span slot="legend">Form label goes here</span>
379
+ <auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
380
+ <auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"></auro-radio>
381
+ <auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
382
+ </auro-radio-group>
383
+ <!-- AURO-GENERATED-CONTENT:END -->
396
384
  </div>
397
385
  <auro-accordion alignRight>
398
- <span slot="trigger">See code</span>
386
+ <span slot="trigger">See code</span>
399
387
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontal.html) -->
400
388
  <!-- The below code snippet is automatically added from ./../apiExamples/horizontal.html -->
401
389
 
402
- ```html
403
- <auro-radio-group horizontal>
404
- <span slot="legend">Form label goes here</span>
405
- <auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
406
- <auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"></auro-radio>
407
- <auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
408
- </auro-radio-group>
409
- ```
390
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group horizontal&gt;
391
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
392
+ &lt;auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
393
+ &lt;auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
394
+ &lt;auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
395
+ &lt;/auro-radio-group&gt;</code></pre>
410
396
  <!-- AURO-GENERATED-CONTENT:END -->
411
397
  </auro-accordion>
412
398
 
@@ -415,29 +401,27 @@ Using the `horizontal` attribute will render the `auro-radio` elements in a hori
415
401
  When present, the `required` attribute specifies that an `<auro-radio>` within the `<auro-radio-group>` must be checked. There is no error message associated with the `required` attribute by default. Use `setCustomValidityValueMissing` to set a custom error message.
416
402
 
417
403
  <div class="exampleWrapper">
418
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
419
- <!-- The below content is automatically added from ./../apiExamples/required.html -->
420
- <auro-radio-group required setCustomValidityValueMissing="value missing">
421
- <span slot="legend">Form label goes here</span>
422
- <auro-radio id="requiredRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
423
- <auro-radio id="requiredRadio2" label="No" name="radioDemo" value="no"></auro-radio>
424
- <auro-radio id="requiredRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
425
- </auro-radio-group>
426
- <!-- AURO-GENERATED-CONTENT:END -->
404
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
405
+ <!-- The below content is automatically added from ./../apiExamples/required.html -->
406
+ <auro-radio-group required setCustomValidityValueMissing="value missing">
407
+ <span slot="legend">Form label goes here</span>
408
+ <auro-radio id="requiredRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
409
+ <auro-radio id="requiredRadio2" label="No" name="radioDemo" value="no"></auro-radio>
410
+ <auro-radio id="requiredRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
411
+ </auro-radio-group>
412
+ <!-- AURO-GENERATED-CONTENT:END -->
427
413
  </div>
428
414
  <auro-accordion alignRight>
429
- <span slot="trigger">See code</span>
415
+ <span slot="trigger">See code</span>
430
416
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
431
417
  <!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
432
418
 
433
- ```html
434
- <auro-radio-group required setCustomValidityValueMissing="value missing">
435
- <span slot="legend">Form label goes here</span>
436
- <auro-radio id="requiredRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
437
- <auro-radio id="requiredRadio2" label="No" name="radioDemo" value="no"></auro-radio>
438
- <auro-radio id="requiredRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
439
- </auro-radio-group>
440
- ```
419
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group required setCustomValidityValueMissing="value missing"&gt;
420
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
421
+ &lt;auro-radio id="requiredRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
422
+ &lt;auro-radio id="requiredRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
423
+ &lt;auro-radio id="requiredRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
424
+ &lt;/auro-radio-group&gt;</code></pre>
441
425
  <!-- AURO-GENERATED-CONTENT:END -->
442
426
  </auro-accordion>
443
427
 
@@ -448,46 +432,42 @@ When present, the `required` attribute specifies that an `<auro-radio>` within t
448
432
  Use the `reset()` method to reset the `<auro-radio-group>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
449
433
 
450
434
  <div class="exampleWrapper">
451
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
452
- <!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
453
- <auro-button id="resetStateBtn">Reset</auro-button>
454
- <br/><br/>
455
- <auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
456
- <span slot="legend">Form label goes here</span>
457
- <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
458
- <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
459
- <auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
460
- </auro-radio-group>
461
- <!-- AURO-GENERATED-CONTENT:END -->
435
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
436
+ <!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
437
+ <auro-button id="resetStateBtn">Reset</auro-button>
438
+ <br/><br/>
439
+ <auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
440
+ <span slot="legend">Form label goes here</span>
441
+ <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
442
+ <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
443
+ <auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
444
+ </auro-radio-group>
445
+ <!-- AURO-GENERATED-CONTENT:END -->
462
446
  </div>
463
447
  <auro-accordion alignRight>
464
- <span slot="trigger">See code</span>
448
+ <span slot="trigger">See code</span>
465
449
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
466
450
  <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
467
451
 
468
- ```html
469
- <auro-button id="resetStateBtn">Reset</auro-button>
470
- <br/><br/>
471
- <auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
472
- <span slot="legend">Form label goes here</span>
473
- <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
474
- <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
475
- <auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
476
- </auro-radio-group>
477
- ```
452
+ <pre class="language-html"><code class="language-html">&lt;auro-button id="resetStateBtn"&gt;Reset&lt;/auro-button&gt;
453
+ &lt;br/&gt;&lt;br/&gt;
454
+ &lt;auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option"&gt;
455
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
456
+ &lt;auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
457
+ &lt;auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
458
+ &lt;auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
459
+ &lt;/auro-radio-group&gt;</code></pre>
478
460
  <!-- AURO-GENERATED-CONTENT:END -->
479
461
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
480
462
  <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
481
463
 
482
- ```js
483
- export function resetStateExample() {
464
+ <pre class="language-js"><code class="language-js">export function resetStateExample() {
484
465
  const elem = document.querySelector('#resetStateExample');
485
-
486
- document.querySelector('#resetStateBtn').addEventListener('click', () => {
466
+ ​
467
+ document.querySelector('#resetStateBtn').addEventListener('click', () =&gt; {
487
468
  elem.reset();
488
469
  });
489
- }
490
- ```
470
+ }</code></pre>
491
471
  <!-- AURO-GENERATED-CONTENT:END -->
492
472
  </auro-accordion>
493
473
 
@@ -498,31 +478,29 @@ export function resetStateExample() {
498
478
  The `<auro-radio-group>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
499
479
 
500
480
  <div class="exampleWrapper">
501
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
502
- <!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
503
- <auro-radio-group>
504
- <span slot="legend">Form label goes here</span>
505
- <span slot="optionalLabel">(add custom label here)</span>
506
- <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
507
- <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
508
- <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
509
- </auro-radio-group>
510
- <!-- AURO-GENERATED-CONTENT:END -->
481
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
482
+ <!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
483
+ <auro-radio-group>
484
+ <span slot="legend">Form label goes here</span>
485
+ <span slot="optionalLabel">(add custom label here)</span>
486
+ <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
487
+ <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
488
+ <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
489
+ </auro-radio-group>
490
+ <!-- AURO-GENERATED-CONTENT:END -->
511
491
  </div>
512
492
  <auro-accordion alignRight>
513
- <span slot="trigger">See code</span>
493
+ <span slot="trigger">See code</span>
514
494
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optional-label.html) -->
515
495
  <!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
516
496
 
517
- ```html
518
- <auro-radio-group>
519
- <span slot="legend">Form label goes here</span>
520
- <span slot="optionalLabel">(add custom label here)</span>
521
- <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
522
- <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
523
- <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
524
- </auro-radio-group>
525
- ```
497
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
498
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
499
+ &lt;span slot="optionalLabel"&gt;(add custom label here)&lt;/span&gt;
500
+ &lt;auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
501
+ &lt;auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
502
+ &lt;auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;
503
+ &lt;/auro-radio-group&gt;</code></pre>
526
504
  <!-- AURO-GENERATED-CONTENT:END -->
527
505
  </auro-accordion>
528
506
 
@@ -535,45 +513,41 @@ This example demonstrates a data drive approach to rendering `<auro-radio>` butt
535
513
  **Note**: When dynamically creating `<auro-radio>` elements, make sure to add an `id` attribute, as it is a required part of the HTML5 spec for all form elements.
536
514
 
537
515
  <div class="exampleWrapper">
538
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamic.html) -->
539
- <!-- The below content is automatically added from ./../apiExamples/dynamic.html -->
540
- <auro-radio-group required id="dynamicExample">
541
- <span slot="legend">Form label goes here</span>
542
- </auro-radio-group>
543
- <!-- AURO-GENERATED-CONTENT:END -->
516
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamic.html) -->
517
+ <!-- The below content is automatically added from ./../apiExamples/dynamic.html -->
518
+ <auro-radio-group required id="dynamicExample">
519
+ <span slot="legend">Form label goes here</span>
520
+ </auro-radio-group>
521
+ <!-- AURO-GENERATED-CONTENT:END -->
544
522
  </div>
545
523
  <auro-accordion alignRight>
546
- <span slot="trigger">See code</span>
524
+ <span slot="trigger">See code</span>
547
525
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic.html) -->
548
526
  <!-- The below code snippet is automatically added from ./../apiExamples/dynamic.html -->
549
527
 
550
- ```html
551
- <auro-radio-group required id="dynamicExample">
552
- <span slot="legend">Form label goes here</span>
553
- </auro-radio-group>
554
- ```
528
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group required id="dynamicExample"&gt;
529
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
530
+ &lt;/auro-radio-group&gt;</code></pre>
555
531
  <!-- AURO-GENERATED-CONTENT:END -->
556
532
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic.js) -->
557
533
  <!-- The below code snippet is automatically added from ./../apiExamples/dynamic.js -->
558
534
 
559
- ```js
560
- export function dynamicExample() {
535
+ <pre class="language-js"><code class="language-js">export function dynamicExample() {
561
536
  const values = ['Yes', 'No', 'Maybe'];
562
537
  const radioGroup = document.getElementById('dynamicExample');
563
-
564
- for (let i = 0; i < values.length; i++) {
538
+ ​
539
+ for (let i = 0; i &lt; values.length; i++) {
565
540
  const radio = document.createElement('auro-radio');
566
-
541
+ ​
567
542
  radio.id = `dynamicRadio${i}`;
568
543
  radio.label = values[i];
569
544
  radio.name = 'radioDemo';
570
545
  radio.value = values[i];
571
546
  radio.textContent = values[i];
572
-
547
+ ​
573
548
  radioGroup.appendChild(radio);
574
549
  }
575
- }
576
- ```
550
+ }</code></pre>
577
551
  <!-- AURO-GENERATED-CONTENT:END -->
578
552
  </auro-accordion>
579
553
 
@@ -582,29 +556,27 @@ export function dynamicExample() {
582
556
  Example to show text wrapping on multiline labels.
583
557
 
584
558
  <div class="exampleWrapper">
585
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiline-group.html) -->
586
- <!-- The below content is automatically added from ./../apiExamples/multiline-group.html -->
587
- <auro-radio-group>
588
- <span slot="legend">Form label goes here</span>
589
- <auro-radio id="basicGroupRadio1" label="Sample text" name="radioDemo" value="option1"></auro-radio>
590
- <auro-radio id="basicGroupRadio2" label="This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines." name="radioDemo" value="option2"></auro-radio>
591
- <auro-radio id="basicGroupRadio3" label="Sample text" name="radioDemo" value="option3"></auro-radio>
592
- </auro-radio-group>
593
- <!-- AURO-GENERATED-CONTENT:END -->
559
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiline-group.html) -->
560
+ <!-- The below content is automatically added from ./../apiExamples/multiline-group.html -->
561
+ <auro-radio-group>
562
+ <span slot="legend">Form label goes here</span>
563
+ <auro-radio id="basicGroupRadio1" label="Sample text" name="radioDemo" value="option1"></auro-radio>
564
+ <auro-radio id="basicGroupRadio2" label="This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines." name="radioDemo" value="option2"></auro-radio>
565
+ <auro-radio id="basicGroupRadio3" label="Sample text" name="radioDemo" value="option3"></auro-radio>
566
+ </auro-radio-group>
567
+ <!-- AURO-GENERATED-CONTENT:END -->
594
568
  </div>
595
569
  <auro-accordion alignRight>
596
- <span slot="trigger">See code</span>
570
+ <span slot="trigger">See code</span>
597
571
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiline-group.html) -->
598
572
  <!-- The below code snippet is automatically added from ./../apiExamples/multiline-group.html -->
599
573
 
600
- ```html
601
- <auro-radio-group>
602
- <span slot="legend">Form label goes here</span>
603
- <auro-radio id="basicGroupRadio1" label="Sample text" name="radioDemo" value="option1"></auro-radio>
604
- <auro-radio id="basicGroupRadio2" label="This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines." name="radioDemo" value="option2"></auro-radio>
605
- <auro-radio id="basicGroupRadio3" label="Sample text" name="radioDemo" value="option3"></auro-radio>
606
- </auro-radio-group>
607
- ```
574
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
575
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
576
+ &lt;auro-radio id="basicGroupRadio1" label="Sample text" name="radioDemo" value="option1"&gt;&lt;/auro-radio&gt;
577
+ &lt;auro-radio id="basicGroupRadio2" label="This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines. This text is long enough to wrap onto multiple lines." name="radioDemo" value="option2"&gt;&lt;/auro-radio&gt;
578
+ &lt;auro-radio id="basicGroupRadio3" label="Sample text" name="radioDemo" value="option3"&gt;&lt;/auro-radio&gt;
579
+ &lt;/auro-radio-group&gt;</code></pre>
608
580
  <!-- AURO-GENERATED-CONTENT:END -->
609
581
  </auro-accordion>
610
582
 
@@ -614,39 +586,37 @@ This example shows how to use `<auro-accordion>` with the `<auro-radio-group>` a
614
586
  nested/optional groups (such as a "More Options" section in a payment processor).
615
587
 
616
588
  <div class="exampleWrapper">
617
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordion-example.html) -->
618
- <!-- The below content is automatically added from ./../apiExamples/accordion-example.html -->
619
- <auro-radio-group>
620
- <span slot="legend">Accordion Test</span>
621
- <auro-radio id="basicGroupRadio1" label="Credit or debit card" name="creditordebit" value="credit"></auro-radio>
622
- <auro-radio id="basicGroupRadio2" label="Apple Pay" name="applePay" value="applePay"></auro-radio>
623
- <auro-radio id="basicGroupRadio3" label="Alaska Airlines Commercial Account" name="alaskaCommercial" value="alaskaCommercial"></auro-radio>
624
- <auro-accordion>
625
- <span slot="trigger">More payment options</span>
626
- <auro-radio id="basicGroupRadio4" label="Click to pay" name="manualCredit" value="manualCredit"></auro-radio>
627
- <auro-radio id="basicGroupRadio5" label="Google Pay" name="googlePay" value="googlePay"></auro-radio>
628
- </auro-accordion>
629
- </auro-radio-group>
630
- <!-- AURO-GENERATED-CONTENT:END -->
589
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordion-example.html) -->
590
+ <!-- The below content is automatically added from ./../apiExamples/accordion-example.html -->
591
+ <auro-radio-group>
592
+ <span slot="legend">Accordion Test</span>
593
+ <auro-radio id="basicGroupRadio1" label="Credit or debit card" name="creditordebit" value="credit"></auro-radio>
594
+ <auro-radio id="basicGroupRadio2" label="Apple Pay" name="applePay" value="applePay"></auro-radio>
595
+ <auro-radio id="basicGroupRadio3" label="Alaska Airlines Commercial Account" name="alaskaCommercial" value="alaskaCommercial"></auro-radio>
596
+ <auro-accordion>
597
+ <span slot="trigger">More payment options</span>
598
+ <auro-radio id="basicGroupRadio4" label="Click to pay" name="manualCredit" value="manualCredit"></auro-radio>
599
+ <auro-radio id="basicGroupRadio5" label="Google Pay" name="googlePay" value="googlePay"></auro-radio>
600
+ </auro-accordion>
601
+ </auro-radio-group>
602
+ <!-- AURO-GENERATED-CONTENT:END -->
631
603
  </div>
632
604
  <auro-accordion alignRight>
633
- <span slot="trigger">See code</span>
605
+ <span slot="trigger">See code</span>
634
606
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordion-example.html) -->
635
607
  <!-- The below code snippet is automatically added from ./../apiExamples/accordion-example.html -->
636
608
 
637
- ```html
638
- <auro-radio-group>
639
- <span slot="legend">Accordion Test</span>
640
- <auro-radio id="basicGroupRadio1" label="Credit or debit card" name="creditordebit" value="credit"></auro-radio>
641
- <auro-radio id="basicGroupRadio2" label="Apple Pay" name="applePay" value="applePay"></auro-radio>
642
- <auro-radio id="basicGroupRadio3" label="Alaska Airlines Commercial Account" name="alaskaCommercial" value="alaskaCommercial"></auro-radio>
643
- <auro-accordion>
644
- <span slot="trigger">More payment options</span>
645
- <auro-radio id="basicGroupRadio4" label="Click to pay" name="manualCredit" value="manualCredit"></auro-radio>
646
- <auro-radio id="basicGroupRadio5" label="Google Pay" name="googlePay" value="googlePay"></auro-radio>
647
- </auro-accordion>
648
- </auro-radio-group>
649
- ```
609
+ <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
610
+ &lt;span slot="legend"&gt;Accordion Test&lt;/span&gt;
611
+ &lt;auro-radio id="basicGroupRadio1" label="Credit or debit card" name="creditordebit" value="credit"&gt;&lt;/auro-radio&gt;
612
+ &lt;auro-radio id="basicGroupRadio2" label="Apple Pay" name="applePay" value="applePay"&gt;&lt;/auro-radio&gt;
613
+ &lt;auro-radio id="basicGroupRadio3" label="Alaska Airlines Commercial Account" name="alaskaCommercial" value="alaskaCommercial"&gt;&lt;/auro-radio&gt;
614
+ &lt;auro-accordion&gt;
615
+ &lt;span slot="trigger"&gt;More payment options&lt;/span&gt;
616
+ &lt;auro-radio id="basicGroupRadio4" label="Click to pay" name="manualCredit" value="manualCredit"&gt;&lt;/auro-radio&gt;
617
+ &lt;auro-radio id="basicGroupRadio5" label="Google Pay" name="googlePay" value="googlePay"&gt;&lt;/auro-radio&gt;
618
+ &lt;/auro-accordion&gt;
619
+ &lt;/auro-radio-group&gt;</code></pre>
650
620
  <!-- AURO-GENERATED-CONTENT:END -->
651
621
  </auro-accordion>
652
622
 
@@ -657,19 +627,17 @@ The component may be restyled by changing the values of the following token(s).
657
627
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
658
628
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
659
629
 
660
- ```scss
661
- @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
662
-
630
+ <pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
631
+ ​
663
632
  :host {
664
633
  // auro-radio-group colors
665
634
  --ds-auro-radio-group-label-color: inherit;
666
-
635
+ ​
667
636
  // auro-radio colors
668
637
  --ds-auro-radio-btn-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
669
638
  --ds-auro-radio-btn-fill-color: transparent;
670
639
  --ds-auro-radio-btn-inset-color: transparent;
671
640
  --ds-auro-radio-label-color: inherit;
672
641
  --ds-auro-radio-tap-color: transparent;
673
- }
674
- ```
642
+ }</code></pre>
675
643
  <!-- AURO-GENERATED-CONTENT:END -->