@aurodesignsystem/auro-formkit 1.6.0-beta.4

package/components/radio/README.md

@@ -0,0 +1,176 @@
+<!--
+The README.md file is a compiled document. No edits should be made directly to this file.
+
+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.
+
+The following sections are editable by making changes to the following files:
+
+| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
+|------------------------|---------------------------------------------------|-------------------------------------|
+| Description            | Description of the component                      | `./docs/partials/description.md`    |
+| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
+| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
+| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
+-->
+
+# Formkit/auro-radio
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
+<!-- The below content is automatically added from ./docs/partials/description.md -->
+`<auro-radio>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) that is rendered as a small circle, which is filled or highlighted when selected. Only one `<auro-radio>` component in a given `<auro-radio-group>` can be selected at the same time.
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
+<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
+<!-- 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 -->
+
+## 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 -->
+
+## 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-radio/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/-formkit/-formkit/auro-radio/actions/workflows/testPublish.yml)
+[![See it on NPM!](https://img.shields.io/npm/v/@auro-formkit/-formkit/-formkit/auro-radio?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@auro-formkit/-formkit/-formkit/auro-radio)
+[![License](https://img.shields.io/npm/l/@auro-formkit/-formkit/-formkit/auro-radio?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)
+
+```shell
+$ npm i @auro-formkit/-formkit/-formkit/auro-radio
+```
+
+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
+
+<!-- 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 -->
+
+### 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-radio>` component.
+
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) -->
+
+```js
+import "@auro-formkit/-formkit/-formkit/auro-radio";
+```
+
+<!-- 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-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## 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-radio__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.
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### Bundle example code
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/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-radio@4.1.1/dist/-formkit/-formkit/auro-radio__bundled.js" type="module"></script>
+```
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## auro-formkit/auro-radio 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-radio>` element is designed to be a single component for the use of creating an input `type="radio"` with an associated `<label>` that meets all use case and accessibility standards.
+
+The following examples illustrate fully functional `<auro-radio>` elements wrapped with the `<auro-radio-group>` element. The `<auro-radio-group>` element is REQUIRED in order to mantain the relationship between individual `<auro-radio>` elements for functional radio button actions.
+
+**Note**: The `<auro-radio>` element is only for to for use as a set of two or more `<auro-radio>` elements within an `<auro-radio-group>` element.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## API Code Examples
+
+### Default auro-formkit/auro-radio
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
+
+```html
+<auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Development
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) -->
+In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
+
+Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### Start development environment
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md) -->
+Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
+
+```shell
+$ npm run dev
+```
+
+Open [localhost:8000](http://localhost:8000/)
+
+If running separate sessions is preferred, please run the following commands in individual terminal shells.
+
+```shell
+$ npm run build:watch
+
+$ npm run serve
+```
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### API generation
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) -->
+The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### 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-radio.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 -->
+
+### Bundled assets
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md) -->
+Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.
+
+<!-- AURO-GENERATED-CONTENT:END -->

package/components/radio/demo/api.html

@@ -0,0 +1,50 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/api.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Generator | auro-radio custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./api.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        });
+    </script>
+    <script type="module" data-demo-script="true">
+      import { initExamples } from './api.min.js';
+      initExamples();
+    </script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+  </body>
+</html>

package/components/radio/demo/api.js

@@ -0,0 +1,17 @@
+import { dynamicExample } from "../apiExamples/dynamic";
+import './index.js';
+
+export function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    dynamicExample();
+  } catch (error) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}

package/components/radio/demo/api.md

@@ -0,0 +1,401 @@
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
+<!-- The below content is automatically added from ./../docs/api.md -->
+
+# auro-radio-group
+
+## Properties
+
+| Property                        | Attribute                       | Type      | Default     | Description                                      |
+|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
+| [disabled](#disabled)                      | `disabled`                      | `boolean` | false       |                                                  |
+| [error](#error)                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [horizontal](#horizontal)                    | `horizontal`                    | `boolean` | false       |                                                  |
+| [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |             | If set, disables auto-validation on blur.        |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `Object`  | "undefined" | Specifies the current selected radio button.     |
+| [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" |                                                  |
+
+## Methods
+
+| Method  | Type       | Description                                    |
+|---------|------------|------------------------------------------------|
+| [reset](#reset) | `(): void` | Method for a total reset of the radio element. |
+
+## Events
+
+| Event                       | Description                                   |
+|-----------------------------|-----------------------------------------------|
+| `auroFormElement-validated` | Notifies that the element has been validated. |
+
+## Slots
+
+| Name            | Description                                     |
+|-----------------|-------------------------------------------------|
+| [helpText](#helpText)      | Allows for the helper text to be overridden.    |
+| [legend](#legend)        | Allows for the legend to be overridden.         |
+| [optionalLabel](#optionalLabel) | Allows for the optional label to be overridden. |
+
+## CSS Shadow Parts
+
+| Part          | Description                                      |
+|---------------|--------------------------------------------------|
+| `radio-group` | Apply css to the fieldset element in the shadow DOM |
+
+# auro-radio
+
+## Properties
+
+| Property   | Attribute  | Type      | Default | Description                                      |
+|------------|------------|-----------|---------|--------------------------------------------------|
+| [checked](#checked)  | `checked`  | `Boolean` | false   | If set to true, the radio button will be filled. |
+| [disabled](#disabled) | `disabled` | `Boolean` | false   | If set to true, the radio button will be non-clickable. |
+| [error](#error)    | `error`    | `Boolean` | false   | If set to true, sets an error state on the radio button. |
+| [id](#id)       | `id`       | `string`  |         |                                                  |
+| [label](#label)    | `label`    | `string`  |         |                                                  |
+| [name](#name)     | `name`     | `string`  |         |                                                  |
+| [required](#required) | `required` | `Boolean` | false   | Defines element as required.                     |
+| [tabIndex](#tabIndex) | `tabIndex` | `number`  | -1      |                                                  |
+| [value](#value)    | `value`    | `string`  |         |                                                  |
+
+## Events
+
+| Event                | Type               | Description                                      |
+|----------------------|--------------------|--------------------------------------------------|
+| `auroRadio-blur`     | `CustomEvent<any>` | Notifies that the component has lost focus.      |
+| `auroRadio-selected` | `CustomEvent<any>` | Notifies that the component has been marked as checked/selected. |
+| [focusSelected](#focusSelected)      | `CustomEvent<any>` | Notifies that the component has gained focus.    |
+| [resetRadio](#resetRadio)         | `CustomEvent<any>` | Notifies that the component has reset the checked/selected state. |
+| [toggleSelected](#toggleSelected)     | `CustomEvent<any>` | Notifies that the component has toggled the checked/selected state. |
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## API Examples
+
+### Default
+
+The following example illustrates the default use of the `<auro-radio>` custom element.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
+  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+
+```html
+<auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Default Group
+
+This is a default configuration using the `<auro-radio-group>` and `<auro-radio>` elements. Notice the use of the `slot` attribute to set the group title of the `<auro-radio-group>`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicGroup.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basicGroup.html -->
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicGroup.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basicGroup.html -->
+
+```html
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Checked
+
+Use the `checked` attribute to pre-select a `<auro-radio>` element.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/checked.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/checked.html -->
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
+    <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
+    <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/checked.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/checked.html -->
+
+```html
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
+  <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
+  <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Disabled
+
+Use the `disabled` attribute to disable singular `<auro-radio>` elements or the entire `<auro-radio-group>`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
+    <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <auro-radio-group disabled>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
+
+```html
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
+  <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+<auro-radio-group disabled>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Error
+
+Use the `error` attribute to set an error state on the entire `<auro-radio-group>`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/error.html -->
+  <auro-radio-group error="There is an error with this form entry">
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
+
+```html
+<auro-radio-group error="There is an error with this form entry">
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Horizontal Group
+
+Using the `horizontal` attribute will render the `auro-radio` elements in a horizontal line.
+
+**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-radio-group horizontal>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-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-radio-group horizontal>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Required
+
+When present, the `required` attribute specifies that an `<auro-radio>` within the `<auro-radio-group>` must be checked. There is no error message associated with the `required` attribute by default. Use `setCustomValidityValueMissing` to set a custom error message.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/required.html -->
+  <auro-radio-group required setCustomValidityValueMissing="value missing">
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="requiredRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="requiredRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="requiredRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
+
+```html
+<auro-radio-group required setCustomValidityValueMissing="value missing">
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="requiredRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="requiredRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="requiredRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Custom optional label
+
+The `<auro-radio-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-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <span slot="optionalLabel">(add custom label here)</span>
+    <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</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 -->
+
+```html
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <span slot="optionalLabel">(add custom label here)</span>
+  <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Dynamic Example
+
+This example demonstrates a data drive approach to rendering `<auro-radio>` buttons.
+
+**Note**: When dynamically creating `<auro-radio>` elements, make sure to add an `id` attribute, as it is a required part of the HTML5 spec for all form elements.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dynamic.html -->
+  <auro-radio-group required id="dynamicExample">
+    <span slot="legend">Form label goes here</span>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dynamic.html -->
+
+```html
+<auro-radio-group required id="dynamicExample">
+  <span slot="legend">Form label goes here</span>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dynamic.js -->
+
+```js
+export function dynamicExample() {
+  const values = ['Yes', 'No', 'Maybe'];
+  const radioGroup = document.getElementById('dynamicExample');
+
+  for (let i = 0; i < values.length; i++) {
+    const radio = document.createElement('auro-radio');
+
+    radio.id = `dynamicRadio${i}`;
+    radio.label = values[i];
+    radio.name = 'radioDemo';
+    radio.value = values[i];
+    radio.textContent = values[i];
+
+    radioGroup.appendChild(radio);
+  }
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
+
+```scss
+:host {
+  // auro-radio-group colors
+  --ds-auro-radio-group-help-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
+  --ds-auro-radio-group-label-color: inherit;
+
+  // auro-radio colors
+  --ds-auro-radio-btn-border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default);
+  --ds-auro-radio-btn-fill-color: transparent;
+  --ds-auro-radio-btn-inset-color: transparent;
+  --ds-auro-radio-label-color: inherit;
+  --ds-auro-radio-tap-color: transparent;
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->