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

package/components/checkbox/demo/api.md

@@ -74,8 +74,8 @@ The `auro-checkbox` element is for the purpose of allowing users to select one o
 | `auroCheckbox-focusin`  | `CustomEvent<any>` |                                                  |
 | `auroCheckbox-focusout` | `CustomEvent<any>` |                                                  |
 | `auroCheckbox-input`    | `CustomEvent<any>` |                                                  |
-| [change](#change)                | `CustomEvent<any>` | (Deprecated) Notifies when checked value is changed. |
-| [input](#input)                 | `InputEvent`       | Notifies when when checked value is changed by user's interface. |
+| [change](#change)                |                    | (Deprecated) Notifies when checked value is changed. |
+| [input](#input)                 |                    | Notifies when when checked value is changed by user's interface. |
 
 ## Slots
 
@@ -95,31 +95,29 @@ The `auro-checkbox` element is for the purpose of allowing users to select one o
 ## Basic
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-checkbox-group>
-    <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 that has some extra text that should wrap when rendered in a narrow container</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:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-checkbox-group>
+<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 that has some extra text that should wrap when rendered in a narrow container</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>
+<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-checkbox-group>
-  <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 that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
-  <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group&gt;
+  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
+  &lt;auro-checkbox value="value1" name="basic" id="checkbox-basic1"&gt;Checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value3" name="basic" id="checkbox-basic3"&gt;Checkbox option that has some extra text that should wrap when rendered in a narrow container&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value4" name="basic" id="checkbox-basic4"&gt;Checkbox option&lt;/auro-checkbox&gt;
+&lt;/auro-checkbox-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -130,27 +128,27 @@ The `auro-checkbox` element is for the purpose of allowing users to select one o
 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 -->
+<!-- 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>
+<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>
-  <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>
+<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 -->
 </auro-accordion>
@@ -164,31 +162,29 @@ Use the `disabled` attribute to disable individual `<auro-checkbox>` elements or
 The `disabled` attribute used to disable a single `<auro-checkbox>` element.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-  <auro-checkbox-group>
-    <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
-  </auro-checkbox-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
+<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
+<auro-checkbox-group>
+<span slot="legend">Form label goes here</span>
+<auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
+<auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
+<auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
+<auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+</auro-checkbox-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<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-checkbox-group>
-  <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group&gt;
+  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
+  &lt;auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1"&gt;Checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
+&lt;/auro-checkbox-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -197,52 +193,50 @@ 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/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>
-    <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
-  </auro-checkbox-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- 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>
+<auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
+<auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
+<auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+</auro-checkbox-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- 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>
-    <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
-  </auro-checkbox-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- 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>
+<auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
+<auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
+<auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+</auro-checkbox-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- 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>
-  <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
-</auro-checkbox-group>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group disabled&gt;
+  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
+  &lt;auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4"&gt;Disabled checkbox option&lt;/auro-checkbox&gt;
+&lt;/auro-checkbox-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- 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>
-  <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+<span slot="legend">Form label goes here</span>
+<auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
+<auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
+<auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
+<auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
 </auro-checkbox-group>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -254,29 +248,27 @@ Using the `horizontal` attribute will render the checkbox options on a horizonta
 **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 -->
+<!-- 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>
+<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>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group horizontal&gt;
+  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
+  &lt;auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1"&gt;Yes&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2"&gt;No&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3"&gt;Maybe&lt;/auro-checkbox&gt;
+&lt;/auro-checkbox-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -295,52 +287,50 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
 **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/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>
-    <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
-  </auro-checkbox-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- 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>
+<auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+<auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+<auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+</auro-checkbox-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- 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>
-    <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
-  </auro-checkbox-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- 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>
+<auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+<auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+<auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+</auro-checkbox-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- 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">
-  <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
-</auro-checkbox-group>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group error="custom error"&gt;
+  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
+  &lt;auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1"&gt;Error checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2"&gt;Error checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3"&gt;Error checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked&gt;Error checkbox option&lt;/auro-checkbox&gt;
+&lt;/auro-checkbox-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- 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>
-  <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+<span slot="legend">Form label goes here</span>
+<auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
+<auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+<auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+<auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
 </auro-checkbox-group>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -350,31 +340,29 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
 When present, the `required` attribute specifies that at least one or more `<auro-checkbox>` elements within the `<auro-checkbox-group>` must be checked.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/required.html -->
-  <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
-    <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
-  </auro-checkbox-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
+<!-- The below content is automatically added from ./../apiExamples/required.html -->
+<auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
+<span slot="legend">Form label goes here</span>
+<auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
+<auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
+<auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
+<auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
+</auro-checkbox-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
 
-```html
-<auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
-  <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group required setCustomValidityValueMissing="Please select an option"&gt;
+  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
+  &lt;auro-checkbox value="value1" name="required" id="checkbox-required1"&gt;Checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value2" name="required" id="checkbox-required2"&gt;Checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value3" name="required" id="checkbox-required3"&gt;Checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value4" name="required" id="checkbox-required4"&gt;Checkbox option&lt;/auro-checkbox&gt;
+&lt;/auro-checkbox-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -385,33 +373,31 @@ When present, the `required` attribute specifies that at least one or more `<aur
 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/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>
-    <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 that has some extra text that should wrap when rendered in a narrow container</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: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>
+<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 that has some extra text that should wrap when rendered in a narrow container</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>
+<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-checkbox-group>
-  <span slot="legend">Form label goes here</span>
-  <span slot="optionalLabel" style="font-size: small; color: grey"> - optional</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 that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
-  <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-checkbox-group&gt;
+  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
+  &lt;span slot="optionalLabel" style="font-size: small; color: grey"&gt; - optional&lt;/span&gt;
+  &lt;auro-checkbox value="value1" name="basic" id="checkbox-basic1"&gt;Checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked&gt;Checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value3" name="basic" id="checkbox-basic3"&gt;Checkbox option that has some extra text that should wrap when rendered in a narrow container&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value4" name="basic" id="checkbox-basic4"&gt;Checkbox option&lt;/auro-checkbox&gt;
+&lt;/auro-checkbox-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -422,48 +408,44 @@ The `<auro-checkbox-group>` supports an `optionalLabel` slot, where users can ca
 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/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">
-    <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="value1" name="resetState" id="checkbox-basic1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value2" name="resetState" id="checkbox-basic2">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value3" name="resetState" id="checkbox-basic3">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value4" name="resetState" id="checkbox-basic4">Checkbox option</auro-checkbox>
-  </auro-checkbox-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- 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">
+<span slot="legend">Form label goes here</span>
+<auro-checkbox value="value1" name="resetState" id="checkbox-basic1">Checkbox option</auro-checkbox>
+<auro-checkbox value="value2" name="resetState" id="checkbox-basic2">Checkbox option</auro-checkbox>
+<auro-checkbox value="value3" name="resetState" id="checkbox-basic3">Checkbox option</auro-checkbox>
+<auro-checkbox value="value4" name="resetState" id="checkbox-basic4">Checkbox option</auro-checkbox>
+</auro-checkbox-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- 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>
-<br/><br/>
-<auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
-  <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="value1" name="resetState" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="resetState" id="checkbox-basic2">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="resetState" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="resetState" id="checkbox-basic4">Checkbox option</auro-checkbox>
-</auro-checkbox-group>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button id="resetStateBtn"&gt;Reset&lt;/auro-button&gt;
+&lt;br/&gt;&lt;br/&gt;
+&lt;auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option"&gt;
+  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
+  &lt;auro-checkbox value="value1" name="resetState" id="checkbox-basic1"&gt;Checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value2" name="resetState" id="checkbox-basic2"&gt;Checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value3" name="resetState" id="checkbox-basic3"&gt;Checkbox option&lt;/auro-checkbox&gt;
+  &lt;auro-checkbox value="value4" name="resetState" id="checkbox-basic4"&gt;Checkbox option&lt;/auro-checkbox&gt;
+&lt;/auro-checkbox-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- 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() {
+<pre class="language-js"><code class="language-js">export function resetStateExample() {
   const elem = document.querySelector('#resetStateExample');
-
-  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+​
+  document.querySelector('#resetStateBtn').addEventListener('click', () =&gt; {
     elem.reset();
   });
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -474,9 +456,8 @@ 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 -->
 
-```scss
-@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
-
+<pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
+​
 :host {
   --ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
   --ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #{v.$ds-advanced-color-boolean-indicator});
@@ -484,6 +465,5 @@ The component may be restyled by changing the values of the following token(s).
   --ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
   --ds-auro-checkbox-outline-color: transparent;
   --ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->