@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

package/CHANGELOG.md

@@ -1,11 +1,23 @@
-## [5.9.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.9.0...v5.9.1) (2025-12-12)
+## [5.9.2](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.9.1...v5.9.2) (2026-01-27)
 
 
 ### Bug Fixes
 
-* correct casing on `noCheckmark` so that the property is correctly snyc'd ([dea6dd9](https://github.com/AlaskaAirlines/auro-formkit/commit/dea6dd931c3fe0b55bedb105157e35196d38ea8b))
-* ensure combobox displays the label of the selected menu option and not the value [#1252](https://github.com/AlaskaAirlines/auro-formkit/issues/1252) ([4714ed3](https://github.com/AlaskaAirlines/auro-formkit/commit/4714ed36126afa82e31f9a5eeb7140ec5f596cec))
-* wait for child's attr to update before validate on `error` update [#1191](https://github.com/AlaskaAirlines/auro-formkit/issues/1191) ([931c296](https://github.com/AlaskaAirlines/auro-formkit/commit/931c296933727d02ec18d9b5ab59ded140fbb134))
+* enhance checkbox a11y & add support for VoiceOver [#1258](https://github.com/AlaskaAirlines/auro-formkit/issues/1258) ([db8e0be](https://github.com/AlaskaAirlines/auro-formkit/commit/db8e0be25bf69ea3d2186bd4394de2db0d657691))
+
+
+### Performance Improvements
+
+* modernize checkbox example documentation [#1260](https://github.com/AlaskaAirlines/auro-formkit/issues/1260) [#1270](https://github.com/AlaskaAirlines/auro-formkit/issues/1270) ([fbf5af3](https://github.com/AlaskaAirlines/auro-formkit/commit/fbf5af302ebc3a6fd9e9cc3e2d01c5dfa91cb178))
+* modernize combobox example documentation [#1261](https://github.com/AlaskaAirlines/auro-formkit/issues/1261) ([bfdb6ec](https://github.com/AlaskaAirlines/auro-formkit/commit/bfdb6ec83c36d616d36ee99c18905447ffcdc7e1)), closes [#777](https://github.com/AlaskaAirlines/auro-formkit/issues/777) [#1194](https://github.com/AlaskaAirlines/auro-formkit/issues/1194) [#1273](https://github.com/AlaskaAirlines/auro-formkit/issues/1273)
+* modernize counter example documentation [#1262](https://github.com/AlaskaAirlines/auro-formkit/issues/1262) ([b96e16b](https://github.com/AlaskaAirlines/auro-formkit/commit/b96e16ba77dda295a3cef91fd28483fd31e5bb81))
+* modernize datepicker example documentation [#1263](https://github.com/AlaskaAirlines/auro-formkit/issues/1263) ([cece6f3](https://github.com/AlaskaAirlines/auro-formkit/commit/cece6f33648e6f579711d832b4dbebd5a96dad5b)), closes [#1281](https://github.com/AlaskaAirlines/auro-formkit/issues/1281)
+* modernize dropdown example documentation [#1264](https://github.com/AlaskaAirlines/auro-formkit/issues/1264) ([fa0644f](https://github.com/AlaskaAirlines/auro-formkit/commit/fa0644f0155ea03411b9c0eb2142c5ce22257444)), closes [#777](https://github.com/AlaskaAirlines/auro-formkit/issues/777) [#1284](https://github.com/AlaskaAirlines/auro-formkit/issues/1284)
+* modernize form example documentation [#1259](https://github.com/AlaskaAirlines/auro-formkit/issues/1259) ([47cd1e1](https://github.com/AlaskaAirlines/auro-formkit/commit/47cd1e1f6d1024d39ce932bb4cf4252592d1625b))
+* modernize input example documentation [#1265](https://github.com/AlaskaAirlines/auro-formkit/issues/1265) ([d3a659d](https://github.com/AlaskaAirlines/auro-formkit/commit/d3a659d00355085809af3bb45fcc8be85075f844))
+* modernize menu example documentation [#1266](https://github.com/AlaskaAirlines/auro-formkit/issues/1266) ([03272ff](https://github.com/AlaskaAirlines/auro-formkit/commit/03272ff9d974749d8ad21600583f526e3125d348)), closes [#1288](https://github.com/AlaskaAirlines/auro-formkit/issues/1288)
+* modernize radio example documentation [#1267](https://github.com/AlaskaAirlines/auro-formkit/issues/1267) ([e9f0ee8](https://github.com/AlaskaAirlines/auro-formkit/commit/e9f0ee80f31a209b66b77a4308965bf8043d7ed9))
+* modernize select example documentation [#1290](https://github.com/AlaskaAirlines/auro-formkit/issues/1290) ([c222a1d](https://github.com/AlaskaAirlines/auro-formkit/commit/c222a1d13d10ce4924ec8557ddb63674388e52bf)), closes [#1289](https://github.com/AlaskaAirlines/auro-formkit/issues/1289)
 
 ### Changelog
 

package/components/checkbox/README.md

@@ -18,6 +18,7 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Checkbox
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-checkbox>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of allowing users to select one or more options of a limited number of choices.
@@ -27,7 +28,18 @@ The following sections are editable by making changes to the following files:
 <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
+## Checkbox Use Cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `<auro-checkbox>` element should be used in situations where users may:
+
+* Be filling out a form
+* Need to select one or more options
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Getting Started
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
@@ -40,30 +52,7 @@ $ npm i @aurodesignsystem/auro-formkit
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Import Options
-
-#### Automatic Registration
-
-For automatic registration, simply import the component:
-
-```javascript
-// Registers <auro-checkbox> automatically
-import '@aurodesignsystem/auro-formkit/auro-checkbox';
-```
-
-#### Custom Registration
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroCheckbox.register('custom-checkbox')` method on the component class and pass in a unique name.
-
-```javascript
-// Import the class only
-import { AuroCheckbox } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
-
-// Register with a custom name if desired
-AuroCheckbox.register('custom-checkbox');
-```
-
-#### TypeScript Module Resolution
+### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
@@ -76,31 +65,10 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
 ```
 
 This configuration enables proper module resolution for the component's TypeScript files.
-<!-- AURO-GENERATED-CONTENT:END -->
-**Reference component in HTML**
-
-<!-- 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>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Design Token CSS Custom Property dependency
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
-
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Install from CDN
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
 <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
@@ -110,22 +78,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## auro-checkbox use cases
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
-<!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The `<auro-checkbox>` element should be used in situations where users may:
-
-* Be filling out a form
-* Need to select one or more options
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Formkit development
+## Formkit Development
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
 <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
@@ -139,4 +92,51 @@ To only develop a single component, use the `--filter` flag:
 ```shell
 npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+
+## Custom Component Registration for Version Management
+
+There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
+
+When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
+
+However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
+
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
+
+```js
+// Import the class only
+import { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
+
+// Register with a custom name if desired
+AuroCheckbox.register('custom-checkbox');
+AuroCheckboxGroup.register('custom-checkbox-group');
+```
+
+This will create a new custom element `<custom-checkbox>` and `<custom-checkbox-group>` that behaves exactly like `<auro-checkbox>` and `<auro-checkbox-group>`, allowing both to coexist on the same page without interfering with each other.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <custom-checkbox-group>
+    <span slot="legend">Form label goes here</span>
+    <custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
+  </custom-checkbox-group>
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+```html
+  <custom-checkbox-group>
+    <span slot="legend">Form label goes here</span>
+    <custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
+  </custom-checkbox-group>
+```
+</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/checkbox/demo/api.js

@@ -1,4 +1,4 @@
-import { resetStateExample } from "../apiExamples/resetState";
+import { resetStateExample } from "../apiExamples/reset-state";
 import './index.js';
 
 export function initExamples(initCount) {

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 -->