@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.6

package/components/checkbox/.turbo/turbo-build.log

@@ -1,12 +1,12 @@
 
-> @auro-formkit/auro-checkbox@4.1.0 build
+> @aurodesignsystem/auro-checkbox@4.1.0 build
 > run-s build:sass bundler build:docs types
 
 
-> @auro-formkit/auro-checkbox@4.1.0 build:sass
+> @aurodesignsystem/auro-checkbox@4.1.0 build:sass
 > sass --no-source-map --load-path=../../node_modules "./src/styles/:./src/styles/"
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -16,7 +16,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/auro-checkbox-group.scss 16:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -26,7 +26,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/auro-checkbox.scss 22:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -36,7 +36,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/auro-checkbox.scss 24:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -46,7 +46,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/auro-checkbox.scss 25:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -56,7 +56,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/auro-checkbox.scss 26:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -70,7 +70,7 @@ More info and automated migrator: https://sass-lang.com/d/import
 WARNING: 3 repetitive deprecation warnings omitted.
 Run in verbose mode to see all warnings.
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -80,7 +80,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/color.scss 8:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -90,7 +90,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/colorGroup.scss 8:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -101,33 +101,29 @@ More info and automated migrator: https://sass-lang.com/d/import
     src/styles/tokens.scss 1:9  root stylesheet
 
 
-> @auro-formkit/auro-checkbox@4.1.0 bundler
+> @aurodesignsystem/auro-checkbox@4.1.0 bundler
 > rollup -c node:@auro-formkit/config/rollup
 
 
 ./src/index.js → dist...
-created dist in 817ms
+created dist in 1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 520ms
+created ./demo/ in 653ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 413ms
+created ./demo/ in 871ms
 
-> @auro-formkit/auro-checkbox@4.1.0 build:docs
+> @aurodesignsystem/auro-checkbox@4.1.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component checkbox
 
 Web Component Analyzer analyzing 2 files...
-Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/checkbox/docTemplates/README.md" file...
 ✔ /README.md Updated
  Transforms run
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md 
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md 
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md 
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md 
@@ -135,6 +131,9 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/checkb
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md 
   ⁕ FILE:src=./docs/partials/description.md 
   ⁕ FILE:src=./docs/partials/readmeAddlInfo.md 
+  ⁕ FILE:src=../../docs/templates/componentInstall.md 
+  ⁕ FILE:src=../../docs/templates/componentUsage.md 
+  ⁕ FILE:src=../../docs/templates/componentBundleUseModBrowsers.md 
   ⁕ FILE:src=./docs/partials/useCases.md 
   ⁕ CODE:src=./apiExamples/basic.html 
   ⁕ CODE:src=./apiExamples/basic.html 
@@ -180,6 +179,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/checkb
 
 Docs processed successfully for checkbox
 
-> @auro-formkit/auro-checkbox@4.1.0 types
+> @aurodesignsystem/auro-checkbox@4.1.0 types
 > tsc --project tsconfig.json
 

package/components/checkbox/.turbo/turbo-bundler.log

@@ -1,13 +1,13 @@
 
-> @auro-formkit/auro-checkbox@4.1.0 bundler
+> @aurodesignsystem/auro-checkbox@4.1.0 bundler
 > rollup -c node:@auro-formkit/config/rollup
 
 
 ./src/index.js → dist...
-created dist in 843ms
+created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 409ms
+created ./demo/ in 623ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 442ms
+created ./demo/ in 655ms

package/components/checkbox/.turbo/turbo-postCss$colon$component.log

@@ -1,5 +1,4 @@
 
-> @auro-formkit/auro-checkbox@4.1.0 postCss:component
+> @aurodesignsystem/auro-checkbox@4.1.0 postCss:component
 > node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs
 
-Unable to scan directory: Error: ENOENT: no such file or directory, scandir '/home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-library/scripts/src'

package/components/checkbox/.turbo/turbo-sass$colon$render.log

@@ -1,5 +1,5 @@
 
-> @auro-formkit/auro-checkbox@4.1.0 sass:render
+> @aurodesignsystem/auro-checkbox@4.1.0 sass:render
 > sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js
 
 Rendering src/styles/auro-checkbox-group.css...
@@ -7,23 +7,23 @@ Rendering src/styles/auro-checkbox.css...
 Rendering src/styles/color.css...
 Rendering src/styles/colorGroup.css...
 Rendering src/styles/tokens.css...
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 

package/components/checkbox/.turbo/turbo-types.log

@@ -1,4 +1,4 @@
 
-> @auro-formkit/auro-checkbox@4.1.0 types
+> @aurodesignsystem/auro-checkbox@4.1.0 types
 > tsc --project tsconfig.json
 

package/components/checkbox/README.md

@@ -4,8 +4,8 @@ The README.md file is a compiled document. No edits should be made directly to t
 README.md is created by running `npm run build:docs`.
 
 This file is generated based on a template fetched from
-`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`
-and copied to `./componentDocs/README.md` each time the the docs are compiled.
+`../../docs/templates/componentReadmeTemplate.md`
+and copied to `./componentDocs/README.md` each time the docs are compiled.
 
 The following sections are editable by making changes to the following files:
 
@@ -17,7 +17,7 @@ The following sections are editable by making changes to the following files:
 | Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
 -->
 
-# Formkit/auro-checkbox
+# Checkbox
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
@@ -37,18 +37,12 @@ For the most up to date information on [UI development browser support](https://
 
 ## Install
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) -->
-[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/-formkit/-formkit/auro-checkbox/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/-formkit/-formkit/auro-checkbox/actions/workflows/testPublish.yml)
-[![See it on NPM!](https://img.shields.io/npm/v/@auro-formkit/-formkit/-formkit/auro-checkbox?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@auro-formkit/-formkit/-formkit/auro-checkbox)
-[![License](https://img.shields.io/npm/l/@auro-formkit/-formkit/-formkit/auro-checkbox?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
-![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
 ```shell
-$ npm i @auro-formkit/-formkit/-formkit/auro-checkbox
+$ npm i @aurodesignsystem/auro-formkit
 ```
-
-Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
-
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ### Design Token CSS Custom Property dependency
@@ -61,27 +55,28 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 ### Define dependency in project component
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
-Defining the component dependency within each component that is using the `<-formkit/-formkit/auro-checkbox>` component.
+Defining the component dependency within each component that is using the `<auro-checkbox>` component.
 
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentUsage.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentUsage.md -->
 
 ```js
-import "@auro-formkit/-formkit/-formkit/auro-checkbox";
+import "@aurodesignsystem/auro-formkit/auro-checkbox";
 ```
-
 <!-- 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="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  <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 -->
@@ -89,7 +84,7 @@ import "@auro-formkit/-formkit/-formkit/auro-checkbox";
 ## Install bundled assets from CDN
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `-formkit/-formkit/auro-checkbox__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-checkbox__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
 
 **WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.
 
@@ -97,17 +92,14 @@ In cases where the project is not able to process JS assets, there are pre-proce
 
 ### Bundle example code
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
-
-```html
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentBundleUseModBrowsers.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@auro-formkit/-formkit/-formkit/auro-checkbox@4.1.0/dist/-formkit/-formkit/auro-checkbox__bundled.js" type="module"></script>
-```
-
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-checkbox@2.0.0-beta.5/dist/auro-checkbox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## auro-formkit/auro-checkbox use cases
+## 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 -->
@@ -119,7 +111,7 @@ The `<auro-checkbox>` element should be used in situations where users may:
 
 ## API Code Examples
 
-### Default auro-formkit/auro-checkbox
+### Default auro-checkbox
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -127,10 +119,10 @@ The `<auro-checkbox>` element should be used in situations where users may:
 ```html
 <auro-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  <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 -->
@@ -175,7 +167,7 @@ The custom element API file is generated in the build and committed back to the
 ### Testing
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\-formkit/-formkit/auro-checkbox.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
+Automated tests are required for every Auro component. See `.\test\auro-checkbox.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
 
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/checkbox/demo/api.md

@@ -9,16 +9,15 @@ The auro-checkbox-group element is a wrapper for auro-checkbox element.
 
 | Property                        | Attribute                       | Type      | Default     | Description                                      |
 |---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
-| [disabled](#disabled)                      | `disabled`                      | `boolean` | "undefined" |                                                  |
-| [error](#error)                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets the validity 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.        |
-| [required](#required)                      | `required`                      | `Boolean` | false       | Populates the `required` attribute on the element. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `String`  |             | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `String`  |             | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `String`  |             | Custom help text message to display when validity = `valueMissing`. |
-| [validity](#validity)                      | `validity`                      | `String`  | "undefined" | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         | `array`   | "undefined" |                                                  |
+| [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.        |
+| [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. |
 
 ## Methods
 
@@ -49,12 +48,11 @@ Custom element for the purpose of allowing users to select one or more options o
 
 | Property   | Attribute  | Type      | Default | Description                                      |
 |------------|------------|-----------|---------|--------------------------------------------------|
-| [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, sets an error state on the checkbox. |
-| [id](#id)       | `id`       | `String`  |         | Sets the individual `id` per element.            |
-| [name](#name)     | `name`     | `String`  |         | Accepts any string, `DOMString` representing the value of the input. |
-| [value](#value)    | `value`    | `String`  |         | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
+| [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. |
+| [id](#id)       | `id`       | `string`  |         | Sets the individual `id` per element.            |
+| [name](#name)     | `name`     | `string`  |         | Accepts any string and is used to identify related checkboxes when submitting form data. |
+| [value](#value)    | `value`    | `string`  |         | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
 
 ## Methods
 
@@ -90,10 +88,10 @@ Custom element for the purpose of allowing users to select one or more options o
   <!-- 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="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-    <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+    <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>
@@ -105,10 +103,10 @@ Custom element for the purpose of allowing users to select one or more options o
 ```html
 <auro-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  <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 -->
@@ -127,10 +125,10 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
   <!-- The below content is automatically added from ./../apiExamples/disabledGroup.html -->
   <auro-checkbox-group disabled>
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+    <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>
@@ -142,10 +140,10 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
 ```html
 <auro-checkbox-group disabled>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+  <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 -->
@@ -160,10 +158,10 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
   <!-- 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="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+    <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>
@@ -175,10 +173,10 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
 ```html
 <auro-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+  <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 -->
@@ -199,10 +197,10 @@ When present, the `required` attribute specifies that at least one or more `<aur
   <!-- 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="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value2" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value3" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value4" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
+    <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>
@@ -214,10 +212,10 @@ When present, the `required` attribute specifies that at least one or more `<aur
 ```html
 <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="value1" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
+  <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 -->
@@ -234,10 +232,10 @@ A custom error message can be set using the `error` attribute, or it can be used
   <!-- The below content is automatically added from ./../apiExamples/errorGroup.html -->
   <auro-checkbox-group error="custom error">
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="error-value1" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error-value2" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error-value3" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error-value4" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+    <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>
@@ -249,10 +247,10 @@ A custom error message can be set using the `error` attribute, or it can be used
 ```html
 <auro-checkbox-group error="custom error">
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="error-value1" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value2" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value3" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value4" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+  <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 -->
@@ -271,10 +269,10 @@ Use the `reset()` method to reset the `<auro-checkbox-group>`'s `value` and `val
   <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="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value2" name="example2" id="checkbox-basic2">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-    <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+    <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>
@@ -288,10 +286,10 @@ Use the `reset()` method to reset the `<auro-checkbox-group>`'s `value` and `val
 <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="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="example2" id="checkbox-basic2">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  <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 -->