npm - @aurodesignsystem/auro-formkit - Versions diffs - 2.0.0-beta.3 → 2.0.0-beta.30 - Mend

@aurodesignsystem/auro-formkit 2.0.0-beta.3 → 2.0.0-beta.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (639) hide show

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

@@ -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
 [36m
 [1m./src/index.js[22m → [1mdist[22m...[39m
-[32mcreated [1mdist[22m in [1m741ms[22m[39m
+[32mcreated [1mdist[22m in [1m981ms[22m[39m
 [36m
 [1m./demo/index.js[22m → [1m./demo/[22m...[39m
-[32mcreated [1m./demo/[22m in [1m538ms[22m[39m
+[32mcreated [1m./demo/[22m in [1m821ms[22m[39m
 [36m
 [1m./demo/api.js[22m → [1m./demo/[22m...[39m
-[32mcreated [1m./demo/[22m in [1m481ms[22m[39m
+[32mcreated [1m./demo/[22m in [1m555ms[22m[39m
-> @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-postCss$colon$component.log CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/README.md CHANGED Viewed

@@ -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.29/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 CHANGED Viewed

@@ -9,22 +9,22 @@ 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
-| Method  | Type       | Description                        |
-|---------|------------|------------------------------------|
-| [reset](#reset) | `(): void` | Resets component to initial state. |
+| Method     | Type                                   | Description                                      |
+|------------|----------------------------------------|--------------------------------------------------|
+| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 ## Events
@@ -49,12 +49,12 @@ 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. |
+| [error](#error)    | `error`    | `boolean` | false   | If set to true, the checkbox will be displayed with an error state. |
+| [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 +90,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 +105,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 +127,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 +142,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 +160,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 +175,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 +199,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 +214,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 +234,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 +249,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 +271,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 +288,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 -->
@@ -326,7 +326,6 @@ The component may be restyled using the following code sample and changing the v
   --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
   --ds-auro-checkbox-label-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
   --ds-auro-checkbox-outline-color: transparent;
-  --ds-auro-checkbox-group-helptext-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-checkbox-group-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }
 ```