@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

package/components/checkbox/demo/api.md

@@ -3,23 +3,23 @@
 
 # auro-checkbox-group
 
-The auro-checkbox-group element is a wrapper for auro-checkbox element.
+The `auro-checkbox-group` element is a wrapper for `auro-checkbox` 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` | "undefined" | If set, disables the checkbox group.             |
-| [error](#error)                         | `error`                         | `string`  |             | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
-| [horizontal](#horizontal)                    | `horizontal`                    | `boolean` | false       | If set, checkboxes will be aligned horizontally. |
-| [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |             | If set, disables auto-validation on blur.        |
-| [onDark](#onDark)                        | `onDark`                        | `boolean` | false       | DEPRECATED - use `appearance` instead.           |
-| [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. |
+| 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 set, disables the checkbox group.             |
+| [error](#error)                         | `error`                         | `string`                 |             | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| [horizontal](#horizontal)                    | `horizontal`                    | `boolean`                |             | If set, checkboxes will be aligned horizontally. |
+| [noValidate](#noValidate)                    | `noValidate`                    | `boolean`                |             | If set, disables auto-validation on blur.        |
+| [onDark](#onDark)                        | `onDark`                        | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| [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. |
 
 ## Methods
 
@@ -45,21 +45,20 @@ The auro-checkbox-group element is a wrapper for auro-checkbox element.
 
 # auro-checkbox
 
-Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
+The `auro-checkbox` element is for the purpose of allowing users to select one or more options of a limited number of choices.
 
 ## Properties
 
-| Property     | Attribute    | Type      | Default     | Description                                      |
-|--------------|--------------|-----------|-------------|--------------------------------------------------|
-| [appearance](#appearance) | `appearance` | `string`  | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
-| [apperance](#apperance)  |              | `string`  | "default"   |                                                  |
-| [checked](#checked)    | `checked`    | `boolean` | false       | If set to true, the checkbox will be filled with a checkmark. |
-| [disabled](#disabled)   | `disabled`   | `boolean` | false       | If set to true, the checkbox will not be clickable. |
-| [error](#error)      | `error`      | `boolean` | false       | If set to true, the checkbox will be displayed with an error state. |
-| [id](#id)         | `id`         | `string`  |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
-| [name](#name)       | `name`       | `string`  |             | Accepts any string and is used to identify related checkboxes when submitting form data. |
-| [onDark](#onDark)     | `onDark`     | `boolean` | false       | DEPRECATED - use `appearance` instead.           |
-| [value](#value)      | `value`      | `string`  |             | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
+| 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 checkbox will be filled with a checkmark. |
+| [disabled](#disabled)   | `disabled`   | `boolean`                |             | If set to true, the checkbox will not be clickable. |
+| [error](#error)      | `error`      | `boolean`                |             | If set to true, the checkbox will be displayed with an error state. |
+| [id](#id)         | `id`         | `string`                 |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
+| [name](#name)       | `name`       | `string`                 |             | Accepts any string and is used to identify related checkboxes when submitting form data. |
+| [onDark](#onDark)     | `onDark`     | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| [value](#value)      | `value`      | `string`                 |             | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
 
 ## Methods
 
@@ -86,9 +85,7 @@ Custom element for the purpose of allowing users to select one or more options o
 | `checkbox-label` | apply css to a specific checkbox's label. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## API Examples
-
-### Basic
+## Basic
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
@@ -102,18 +99,6 @@ Custom element for the purpose of allowing users to select one or more options o
   </auro-checkbox-group>
   <!-- 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-checkbox-group appearance="inverse">
-    <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-    <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
-  </auro-checkbox-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -129,8 +114,30 @@ Custom element for the purpose of allowing users to select one or more options o
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
-<!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
+</auro-accordion>
+
+## Property & Attribute Examples
+
+### Appearance on Dark Backgrounds
+
+Use the `appearance="inverse"` attribute to render the checkbox for use on dark backgrounds.
+
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+  <auro-checkbox-group appearance="inverse">
+    <span slot="legend">Form label goes here</span>
+    <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+    <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  </auro-checkbox-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
 <auro-checkbox-group appearance="inverse">
   <span slot="legend">Form label goes here</span>
   <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
@@ -138,7 +145,7 @@ Custom element for the purpose of allowing users to select one or more options o
   <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
   <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Disabled
@@ -183,8 +190,8 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
 The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/disabledGroup.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled-group.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/disabled-group.html -->
   <auro-checkbox-group disabled>
     <span slot="legend">Form label goes here</span>
     <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
@@ -195,8 +202,8 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-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-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
   <auro-checkbox-group appearance="inverse" disabled>
     <span slot="legend">Form label goes here</span>
     <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
@@ -208,8 +215,8 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledGroup.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabledGroup.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-group.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/disabled-group.html -->
 
 ```html
 <auro-checkbox-group disabled>
@@ -221,8 +228,8 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
 </auro-checkbox-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:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
 <auro-checkbox-group appearance="inverse" disabled>
   <span slot="legend">Form label goes here</span>
   <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
@@ -233,17 +240,56 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Error
+### Horizontal Group
+
+Using the `horizontal` attribute will render the checkbox options on a horizontal line.
 
-Use the `error` attribute to force an error state on the element.
+**Note**: Using the `horizontal` attribute has a limit of 3 options. Beyond three, options will be listed in vertically.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontal.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
+  <auro-checkbox-group horizontal>
+    <span slot="legend">Form label goes here</span>
+    <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
+    <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
+    <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
+  </auro-checkbox-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontal.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/horizontal.html -->
+
+```html
+<auro-checkbox-group horizontal>
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
+  <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
+  <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
+</auro-checkbox-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 
-#### Checkbox Group with Error
+### Form Validation
+
+In the `auro-checkbox-group` element, the `required` and `error` states are the two possible validation states.
+
+It should be noted that form validation is only supported within an `auro-checkbox-group` element. In order to support validation on a single `auro-checkbox` element, it must be wrapped in an `auro-checkbox-group`.
+
+### Error
+
+Use the `error` attribute to force an error state on the element.
 
 The `error` attribute used to set error state on the entire `<auro-checkbox-group>`. If using the `error` attribute on an `<auro-checkbox-group>`, a string with the error message needs to be passed along with the attribute.
 
+**Note**: The `error` attribute is only supported on the `<auro-checkbox-group>` element, not on individual `<auro-checkbox>` elements.
+
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/errorGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/errorGroup.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error-group.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/error-group.html -->
   <auro-checkbox-group error="custom error">
     <span slot="legend">Form label goes here</span>
     <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
@@ -254,8 +300,8 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
   <!-- 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-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
   <auro-checkbox-group appearance="inverse" error="custom error">
     <span slot="legend">Form label goes here</span>
     <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
@@ -267,8 +313,8 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/errorGroup.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/errorGroup.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error-group.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/error-group.html -->
 
 ```html
 <auro-checkbox-group error="custom error">
@@ -280,8 +326,8 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
 </auro-checkbox-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-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
 <auro-checkbox-group appearance="inverse" error="custom error">
   <span slot="legend">Form label goes here</span>
   <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
@@ -292,12 +338,6 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Form Validation
-
-In the `auro-checkbox-group` element, the `required` and `error` states are the tqo possible validation states.
-
-It should be noted that form validation is only supported within an `auro-checkbox-group` element. In order to support validation on a single `auro-checkbox` element, it must be wrapped in an `auro-checkbox-group`.
-
 #### Required
 
 When present, the `required` attribute specifies that at least one or more `<auro-checkbox>` elements within the `<auro-checkbox-group>` must be checked.
@@ -331,12 +371,15 @@ When present, the `required` attribute specifies that at least one or more `<aur
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Custom optional label <a name="optionalLabel"></a>
+## Slot Examples
+
+### Custom Optional Label
+
 The `<auro-checkbox-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-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
   <auro-checkbox-group>
     <span slot="legend">Form label goes here</span>
     <span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
@@ -349,8 +392,8 @@ The `<auro-checkbox-group>` supports an `optionalLabel` slot, where users can ca
 </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 -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optional-label.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
 
 ```html
 <auro-checkbox-group>
@@ -365,15 +408,15 @@ The `<auro-checkbox-group>` supports an `optionalLabel` slot, where users can ca
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Functional Examples
+## Common Usage Patterns & Functional Examples
 
-#### Reset State
+### Reset State
 
 Use the `reset()` method to reset the `<auro-checkbox-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-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
@@ -387,8 +430,8 @@ Use the `reset()` method to reset the `<auro-checkbox-group>`'s `value` and `val
 </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>
@@ -402,8 +445,8 @@ Use the `reset()` method to reset the `<auro-checkbox-group>`'s `value` and `val
 </auro-checkbox-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() {
@@ -417,9 +460,9 @@ export function resetStateExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Theme Support
+## 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 -->