@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

package/components/radio/demo/api.md

@@ -1,25 +1,27 @@
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
 <!-- The below content is automatically added from ./../docs/api.md -->
 
-# auro-radio-group
+# auro-radio-group
+
+The `auro-radio-group` element is used to group a set `auro-radio` elements.
 
 ## Properties
 
-| Property                        | Attribute                       | Type      | Default     | Description                                      |
-|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
-| [appearance](#appearance)                    | `appearance`                    | `string`  | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
-| [disabled](#disabled)                      | `disabled`                      | `boolean` | false       |                                                  |
-| [error](#error)                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| [horizontal](#horizontal)                    | `horizontal`                    | `boolean` | false       |                                                  |
-| [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |             | If set, disables auto-validation on blur.        |
-| [onDark](#onDark)                        | `onDark`                        | `Boolean` | false       | DEPRECATED - use `appearance` instead.           |
-| [optionSelected](#optionSelected)                | `optionSelected`                | `Object`  | "undefined" | Specifies the current selected radio button.     |
-| [required](#required)                      | `required`                      | `Boolean` | false       | Populates the `required` attribute on the element. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `String`  |             | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `String`  |             | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `String`  |             | Custom help text message to display when validity = `valueMissing`. |
-| [validity](#validity)                      | `validity`                      | `String`  | "undefined" | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         | `string`  | "undefined" |                                                  |
+| Property                        | Attribute                       | Type                     | Default     | Description                                      |
+|---------------------------------|---------------------------------|--------------------------|-------------|--------------------------------------------------|
+| [appearance](#appearance)                    | `appearance`                    | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
+| [disabled](#disabled)                      | `disabled`                      | `boolean`                |             | If true, all radio buttons will be disabled.     |
+| [error](#error)                         | `error`                         | `string`                 |             | If true, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [horizontal](#horizontal)                    | `horizontal`                    | `boolean`                |             | If true, displays radio buttons horizontally.    |
+| [noValidate](#noValidate)                    | `noValidate`                    | `boolean`                |             | If true, disables auto-validation on blur.       |
+| [onDark](#onDark)                        | `onDark`                        | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `object`                 |             | Specifies the current selected radio button.     |
+| [required](#required)                      | `required`                      | `boolean`                |             | Populates the `required` attribute on the element. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`                 |             | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`                 |             | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`                 |             | Custom help text message to display when validity = `valueMissing`. |
+| [validity](#validity)                      | `validity`                      | `string`                 |             | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         | `string`                 |             | Specifies the current value of the selected radio button. |
 
 ## Methods
 
@@ -49,22 +51,24 @@
 |---------------|--------------------------------------------------|
 | `radio-group` | Apply css to the fieldset element in the shadow DOM |
 
-# auro-radio
+# auro-radio
+
+The `auro-radio` element is used to a button that allows the user to select one option from a set.
 
 ## Properties
 
-| Property     | Attribute    | Type      | Default     | Description                                      |
-|--------------|--------------|-----------|-------------|--------------------------------------------------|
-| [appearance](#appearance) | `appearance` | `string`  | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
-| [checked](#checked)    | `checked`    | `Boolean` | false       | If set to true, the radio button will be filled. |
-| [disabled](#disabled)   | `disabled`   | `Boolean` | false       | If set to true, the radio button will be non-clickable. |
-| [error](#error)      | `error`      | `Boolean` | false       | If set to true, sets an error state on the radio button. |
-| [id](#id)         | `id`         | `string`  |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
-| [label](#label)      | `label`      | `string`  |             |                                                  |
-| [name](#name)       | `name`       | `string`  |             |                                                  |
-| [onDark](#onDark)     | `onDark`     | `Boolean` | false       | DEPRECATED - use `appearance` instead.           |
-| [required](#required)   | `required`   | `Boolean` | false       | Defines element as required.                     |
-| [value](#value)      | `value`      | `string`  |             |                                                  |
+| Property     | Attribute    | Type                     | Default     | Description                                      |
+|--------------|--------------|--------------------------|-------------|--------------------------------------------------|
+| [appearance](#appearance) | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
+| [checked](#checked)    | `checked`    | `boolean`                |             | If set to true, the radio button will be filled. |
+| [disabled](#disabled)   | `disabled`   | `boolean`                |             | If set to true, the radio button will be non-clickable. |
+| [error](#error)      | `error`      | `boolean`                |             | If set to true, sets an error state on the radio button. |
+| [id](#id)         | `id`         | `string`                 |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
+| [label](#label)      | `label`      | `string`                 |             | Label for the radio button.                      |
+| [name](#name)       | `name`       | `string`                 |             | Name for the radio button group.                 |
+| [onDark](#onDark)     | `onDark`     | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| [required](#required)   | `required`   | `boolean`                |             | Defines element as required.                     |
+| [value](#value)      | `value`      | `string`                 |             | The value of the radio button.                   |
 
 ## Methods
 
@@ -93,48 +97,30 @@
 | `radio-label` | apply css to a specific checkbox's label. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## API Examples
-
-### Default
-
-The following example illustrates the default use of the `<auro-radio>` custom element.
+## Basic Radio
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
   <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
-  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"></auro-radio>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-standalone.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
 
 ```html
 <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
-  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"></auro-radio>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
 </auro-accordion>
 
-### Default Group
-
-This is a default configuration using the `<auro-radio-group>` and `<auro-radio>` elements. Notice the use of the `slot` attribute to set the group title of the `<auro-radio-group>`.
+## Basic Radio Group
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basicGroup.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-radio-group>
     <span slot="legend">Form label goes here</span>
     <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
@@ -143,39 +129,69 @@ This is a default configuration using the `<auro-radio-group>` and `<auro-radio>
   </auro-radio-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceGroup.html -->
-  <auro-radio-group appearance="inverse">
-    <span slot="legend">Form label goes here</span>
-    <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-  </auro-radio-group>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+
+```html
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Property & Attribute Examples
+
+### Appearance on Dark Backgrounds
+
+Use the `appearance="inverse"` attribute to render the radio for use on dark backgrounds.
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"></auro-radio>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicGroup.html) -->
-  <!-- The below code snippet is automatically added from ./../apiExamples/basicGroup.html -->
-  ```html
-  <auro-radio-group>
-    <span slot="legend">Form label goes here</span>
-    <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-  </auro-radio-group>
-  ```
-  <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceGroup.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
+
+```html
+<auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"></auro-radio>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-group.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-group.html -->
   <auro-radio-group appearance="inverse">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
     <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
   </auro-radio-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-group.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-group.html -->
+
+```html
+<auro-radio-group appearance="inverse">
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Checked
@@ -193,32 +209,33 @@ Use the `checked` attribute to pre-select a `<auro-radio>` element.
   </auro-radio-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceChecked.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceChecked.html -->
-  <auro-radio-group appearance="inverse">
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/checked.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/checked.html -->
+  <auro-radio-group>
     <span slot="legend">Form label goes here</span>
     <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
     <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
     <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
   </auro-radio-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/checked.html) -->
-  <!-- The below code snippet is automatically added from ./../apiExamples/checked.html -->
-  ```html
-  <auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-checked.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-checked.html -->
+  <auro-radio-group appearance="inverse">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
     <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
     <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
   </auro-radio-group>
-  ```
-  <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceChecked.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceChecked.html -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-checked.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-checked.html -->
   <auro-radio-group appearance="inverse">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
@@ -249,44 +266,47 @@ Use the `disabled` attribute to disable singular `<auro-radio>` elements or the
   </auro-radio-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
-  <auro-radio-group appearance="inverse">
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
+  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
+  ```html
+  <auro-radio-group>
     <span slot="legend">Form label goes here</span>
     <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
     <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
   </auro-radio-group>
-  <auro-radio-group appearance="inverse" disabled>
+  <auro-radio-group disabled>
     <span slot="legend">Form label goes here</span>
     <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
     <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
   </auro-radio-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
-  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
-  ```html
-  <auro-radio-group>
+  ```
+  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
+  <auro-radio-group appearance="inverse">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
     <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
   </auro-radio-group>
-  <auro-radio-group disabled>
+  <auro-radio-group appearance="inverse" disabled>
     <span slot="legend">Form label goes here</span>
     <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
     <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
   </auro-radio-group>
-  ```
-  <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
   <auro-radio-group appearance="inverse">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
@@ -319,17 +339,6 @@ A custom error message can be set using the `error` attribute, or it can be used
   </auro-radio-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceError.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceError.html -->
-  <auro-radio-group appearance="inverse" error="There is an error with this form entry">
-    <span slot="legend">Form label goes here</span>
-    <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-  </auro-radio-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
   <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
@@ -343,8 +352,22 @@ A custom error message can be set using the `error` attribute, or it can be used
   </auro-radio-group>
   ```
   <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceError.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceError.html -->
+</auro-accordion>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
+  <auro-radio-group appearance="inverse" error="There is an error with this form entry">
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
   <auro-radio-group appearance="inverse" error="There is an error with this form entry">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
@@ -418,46 +441,15 @@ When present, the `required` attribute specifies that an `<auro-radio>` within t
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Custom optional label
-
-The `<auro-radio-group>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optionalLabel.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/optionalLabel.html -->
-  <auro-radio-group>
-    <span slot="legend">Form label goes here</span>
-    <span slot="optionalLabel">(add custom label here)</span>
-    <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-  </auro-radio-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optionalLabel.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/optionalLabel.html -->
-
-```html
-<auro-radio-group>
-  <span slot="legend">Form label goes here</span>
-  <span slot="optionalLabel">(add custom label here)</span>
-  <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
-  <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-</auro-radio-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+## Method Examples
 
 ### Reset State
 
 Use the `reset()` method to reset the `<auro-radio-group>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
   <auro-button id="resetStateBtn">Reset</auro-button>
   <br/><br/>
   <auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
@@ -470,8 +462,8 @@ Use the `reset()` method to reset the `<auro-radio-group>`'s `value` and `validi
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
 
 ```html
 <auro-button id="resetStateBtn">Reset</auro-button>
@@ -484,8 +476,8 @@ Use the `reset()` method to reset the `<auro-radio-group>`'s `value` and `validi
 </auro-radio-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
 
 ```js
 export function resetStateExample() {
@@ -499,6 +491,43 @@ export function resetStateExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+## Slot Examples
+
+### Optional Label
+
+The `<auro-radio-group>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <span slot="optionalLabel">(add custom label here)</span>
+    <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optional-label.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
+
+```html
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <span slot="optionalLabel">(add custom label here)</span>
+  <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Common Usage Patterns & Functional Examples
+
 ### Dynamic Example
 
 This example demonstrates a data drive approach to rendering `<auro-radio>` buttons.
@@ -548,13 +577,13 @@ export function dynamicExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Multiline Label
+### Multiline Label
 
 Example to show text wrapping on multiline labels.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multilineGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/multilineGroup.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiline-group.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/multiline-group.html -->
   <auro-radio-group>
     <span slot="legend">Form label goes here</span>
     <auro-radio id="basicGroupRadio1" label="Sample text" name="radioDemo" value="option1"></auro-radio>
@@ -565,8 +594,8 @@ Example to show text wrapping on multiline labels.
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multilineGroup.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/multilineGroup.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiline-group.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/multiline-group.html -->
 
 ```html
 <auro-radio-group>
@@ -579,9 +608,51 @@ Example to show text wrapping on multiline labels.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Theme Support
+### Accordion Nested Group
+
+This example shows how to use `<auro-accordion>` with the `<auro-radio-group>` and `<auro-radio>` elements for
+nested/optional groups (such as a "More Options" section in a payment processor).
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordion-example.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/accordion-example.html -->
+  <auro-radio-group>
+    <span slot="legend">Accordion Test</span>
+    <auro-radio id="basicGroupRadio1" label="Credit or debit card" name="creditordebit" value="credit"></auro-radio>
+    <auro-radio id="basicGroupRadio2" label="Apple Pay" name="applePay" value="applePay"></auro-radio>
+    <auro-radio id="basicGroupRadio3" label="Alaska Airlines Commercial Account" name="alaskaCommercial" value="alaskaCommercial"></auro-radio>
+    <auro-accordion>
+      <span slot="trigger">More payment options</span>
+      <auro-radio id="basicGroupRadio4" label="Click to pay" name="manualCredit" value="manualCredit"></auro-radio>
+      <auro-radio id="basicGroupRadio5" label="Google Pay" name="googlePay" value="googlePay"></auro-radio>
+    </auro-accordion>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordion-example.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/accordion-example.html -->
+
+```html
+<auro-radio-group>
+  <span slot="legend">Accordion Test</span>
+  <auro-radio id="basicGroupRadio1" label="Credit or debit card" name="creditordebit" value="credit"></auro-radio>
+  <auro-radio id="basicGroupRadio2" label="Apple Pay" name="applePay" value="applePay"></auro-radio>
+  <auro-radio id="basicGroupRadio3" label="Alaska Airlines Commercial Account" name="alaskaCommercial" value="alaskaCommercial"></auro-radio>
+  <auro-accordion>
+    <span slot="trigger">More payment options</span>
+    <auro-radio id="basicGroupRadio4" label="Click to pay" name="manualCredit" value="manualCredit"></auro-radio>
+    <auro-radio id="basicGroupRadio5" label="Google Pay" name="googlePay" value="googlePay"></auro-radio>
+  </auro-accordion>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Restyle Component with CSS Variables
 
-The component may be restyled using the following code sample and changing the values of the following token(s).
+The component may be restyled by changing the values of the following token(s).
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
 <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->