From 1e7551ec0eb477b65e14a9471a1438aa9c5c72e7 Mon Sep 17 00:00:00 2001
From: Jordan Jones <jmjones2463@gmail.com>
Date: Fri, 29 Mar 2024 13:37:06 -0700
Subject: [PATCH] docs(dynamic): refactor structure and add dynamic example
 #125

---
 README.md                      |   2 +
 apiExamples/disabled.html      |   8 ++
 apiExamples/disabledGroup.html |   6 -
 apiExamples/dynamic.html       |   3 +
 apiExamples/dynamic.js         |  16 +++
 apiExamples/error.html         |   8 +-
 apiExamples/errorGroup.html    |   6 -
 demo/api.html                  |   4 +
 demo/api.js                    |  16 +++
 demo/api.md                    |  91 +++++++++---
 demo/api.min.js                |  33 +++++
 demo/index.html                |   1 -
 demo/index.md                  | 256 +--------------------------------
 docs/partials/api.md           |  40 ++++--
 docs/partials/index.md         | 142 ------------------
 docs/partials/useCases.md      |   2 +
 rollup.config.mjs              |  16 ++-
 17 files changed, 202 insertions(+), 448 deletions(-)
 delete mode 100644 apiExamples/disabledGroup.html
 create mode 100644 apiExamples/dynamic.html
 create mode 100644 apiExamples/dynamic.js
 delete mode 100644 apiExamples/errorGroup.html
 create mode 100644 demo/api.js
 create mode 100644 demo/api.min.js

diff --git a/README.md b/README.md
index 7605811..df20c42 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,8 @@ In cases where the project is not able to process JS assets, there are pre-proce
 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
diff --git a/apiExamples/disabled.html b/apiExamples/disabled.html
index fff1889..3eb5df0 100644
--- a/apiExamples/disabled.html
+++ b/apiExamples/disabled.html
@@ -4,3 +4,11 @@
   <auro-radio id="radio11" label="No" name="radioDemo" value="no" disabled></auro-radio>
   <auro-radio id="radio12" 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="radio13" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="radio14" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="radio15" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+
diff --git a/apiExamples/disabledGroup.html b/apiExamples/disabledGroup.html
deleted file mode 100644
index f07e24f..0000000
--- a/apiExamples/disabledGroup.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<auro-radio-group disabled>
-  <span slot="legend">Form label goes here</span>
-  <auro-radio id="radio13" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="radio14" label="No" name="radioDemo" value="no"></auro-radio>
-  <auro-radio id="radio15" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-</auro-radio-group>
diff --git a/apiExamples/dynamic.html b/apiExamples/dynamic.html
new file mode 100644
index 0000000..a700fcc
--- /dev/null
+++ b/apiExamples/dynamic.html
@@ -0,0 +1,3 @@
+<auro-radio-group required id="dynamicExample">
+  <span slot="legend">Form label goes here</span>
+</auro-radio-group>
diff --git a/apiExamples/dynamic.js b/apiExamples/dynamic.js
new file mode 100644
index 0000000..7e4d9b4
--- /dev/null
+++ b/apiExamples/dynamic.js
@@ -0,0 +1,16 @@
+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 = `radio${i}`;
+    radio.label = values[i];
+    radio.name = 'radioDemo';
+    radio.value = values[i];
+    radio.textContent = values[i];
+
+    radioGroup.appendChild(radio);
+  }
+}
diff --git a/apiExamples/error.html b/apiExamples/error.html
index 4e4b95a..086c5ca 100644
--- a/apiExamples/error.html
+++ b/apiExamples/error.html
@@ -1,6 +1,6 @@
-<auro-radio-group>
+<auro-radio-group error="There is an error with this form entry">
   <span slot="legend">Form label goes here</span>
-  <auro-radio id="radio16" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="radio17" label="No" name="radioDemo" value="no" error></auro-radio>
-  <auro-radio id="radio18" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  <auro-radio id="radio19" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="radio20" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="radio21" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
 </auro-radio-group>
diff --git a/apiExamples/errorGroup.html b/apiExamples/errorGroup.html
deleted file mode 100644
index 086c5ca..0000000
--- a/apiExamples/errorGroup.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<auro-radio-group error="There is an error with this form entry">
-  <span slot="legend">Form label goes here</span>
-  <auro-radio id="radio19" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="radio20" label="No" name="radioDemo" value="no"></auro-radio>
-  <auro-radio id="radio21" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-</auro-radio-group>
diff --git a/demo/api.html b/demo/api.html
index 19ecb13..2d5406a 100644
--- a/demo/api.html
+++ b/demo/api.html
@@ -41,6 +41,10 @@
         });
     </script>
     <script type="module" src="../index.js"></script>
+    <script type="module">
+      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>
diff --git a/demo/api.js b/demo/api.js
new file mode 100644
index 0000000..8f9b282
--- /dev/null
+++ b/demo/api.js
@@ -0,0 +1,16 @@
+import { dynamicExample } from "../apiExamples/dynamic";
+
+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);
+    }
+  }
+}
diff --git a/demo/api.md b/demo/api.md
index 7b082a8..49873d0 100644
--- a/demo/api.md
+++ b/demo/api.md
@@ -121,15 +121,17 @@ The following illustrates a default use of the `<auro-radio-group><auro-radio>..
 
 ### Disabled
 
-Use the `disabled` attribute to disable singular `<auro-radio>` elements or the entire `<auro-radio-group>`.
-
-#### Group
-
-The `disabled` attribute used to disable the entire `<auro-radio-group>`.
+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/disabledGroup.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/disabledGroup.html -->
+  <!-- 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="radio10" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="radio11" label="No" name="radioDemo" value="no" disabled></auro-radio>
+    <auro-radio id="radio12" 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="radio13" label="Yes" name="radioDemo" value="yes"></auro-radio>
@@ -140,10 +142,16 @@ The `disabled` attribute used to disable the entire `<auro-radio-group>`.
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabledGroup.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/disabledGroup.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabled.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="radio10" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="radio11" label="No" name="radioDemo" value="no" disabled></auro-radio>
+  <auro-radio id="radio12" 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="radio13" label="Yes" name="radioDemo" value="yes"></auro-radio>
@@ -156,15 +164,11 @@ The `disabled` attribute used to disable the entire `<auro-radio-group>`.
 
 ### Error
 
-Use the `error` attribute to set an error state on the entire `<auro-radio-group>`.
-
-#### Group
-
-The `error` attribute used to set an error state on the entire `<auro-radio-group>`.
+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/errorGroup.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/errorGroup.html -->
+  <!-- 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="radio19" label="Yes" name="radioDemo" value="yes"></auro-radio>
@@ -175,8 +179,8 @@ The `error` attribute used to set an error state on the entire `<auro-radio-grou
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/errorGroup.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/errorGroup.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.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">
@@ -189,7 +193,7 @@ The `error` attribute used to set an error state on the entire `<auro-radio-grou
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### horizontal
+### Horizontal Group
 
 Using the `horizontal` attribute will render the `auro-radio` elements in a horizontal line.
 
@@ -284,4 +288,53 @@ The `<auro-radio-group>` supports an `optionalLabel` slot, where users can can o
 </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 = `radio${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>
diff --git a/demo/api.min.js b/demo/api.min.js
new file mode 100644
index 0000000..fa7d563
--- /dev/null
+++ b/demo/api.min.js
@@ -0,0 +1,33 @@
+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 = `radio${i}`;
+    radio.label = values[i];
+    radio.name = 'radioDemo';
+    radio.value = values[i];
+    radio.textContent = values[i];
+
+    radioGroup.appendChild(radio);
+  }
+}
+
+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);
+    }
+  }
+}
+
+export { initExamples };
diff --git a/demo/index.html b/demo/index.html
index 0a8dc79..7a05c79 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -41,7 +41,6 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../index.js"></script>
     <script type="module">
       import { registerComponent } from '../index.js';
 
diff --git a/demo/index.md b/demo/index.md
index ee40fb1..a1df203 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -18,6 +18,8 @@ This file is generated based on a template fetched from `./docs/partials/demo.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 -->
 
 ## Example(s)
@@ -73,260 +75,6 @@ This is a default configuration using the `<auro-radio-group>` and `<auro-radio>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-<p>Using a similar configuration notice the use of the <code>&#60;slot&#62;</code> element within the <code>&#60;auro-radio&#62;</code> element. This will allow users to override the direct use of content from the <code>value</code> attribute.</p>
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic2.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/basic2.html -->
-  <auro-radio-group>
-    <span slot="legend">Are you willing to volunteer resources?</span>
-    <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Volunteering is AWESOME!</auro-radio>
-    <auro-radio id="radio5" label="No" name="radioDemo" value="no">Sorry, I do not have the time or resources</auro-radio>
-    <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Please send me more information</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/basic2.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basic2.html -->
-
-```html
-<auro-radio-group>
-  <span slot="legend">Are you willing to volunteer resources?</span>
-  <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Volunteering is AWESOME!</auro-radio>
-  <auro-radio id="radio5" label="No" name="radioDemo" value="no">Sorry, I do not have the time or resources</auro-radio>
-  <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Please send me more information</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>`.
-
-#### Group
-
-The `disabled` attribute used to disable the entire `<auro-radio-group>`.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/disabledGroup.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/disabledGroup.html -->
-  <auro-radio-group disabled>
-    <span slot="legend">Form label goes here</span>
-    <auro-radio id="radio13" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="radio14" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="radio15" 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/disabledGroup.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/disabledGroup.html -->
-
-```html
-<auro-radio-group disabled>
-  <span slot="legend">Form label goes here</span>
-  <auro-radio id="radio13" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="radio14" label="No" name="radioDemo" value="no"></auro-radio>
-  <auro-radio id="radio15" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-</auro-radio-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### Single
-
-The `disabled` attribute used to disable a single `<auro-radio>` element.
-
-<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="radio10" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="radio11" label="No" name="radioDemo" value="no" disabled></auro-radio>
-    <auro-radio id="radio12" 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="radio10" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="radio11" label="No" name="radioDemo" value="no" disabled></auro-radio>
-  <auro-radio id="radio12" 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>`.
-
-#### Group
-
-The `error` attribute used to set an error state on the entire `<auro-radio-group>`.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/errorGroup.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/errorGroup.html -->
-  <auro-radio-group error="There is an error with this form entry">
-    <span slot="legend">Form label goes here</span>
-    <auro-radio id="radio19" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="radio20" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="radio21" 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/errorGroup.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/errorGroup.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="radio19" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="radio20" label="No" name="radioDemo" value="no"></auro-radio>
-  <auro-radio id="radio21" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-</auro-radio-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### Single
-
-The `error` attribute used to set an error state on a single `<auro-radio>` element.
-
-<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>
-    <span slot="legend">Form label goes here</span>
-    <auro-radio id="radio16" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="radio17" label="No" name="radioDemo" value="no" error></auro-radio>
-    <auro-radio id="radio18" 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>
-  <span slot="legend">Form label goes here</span>
-  <auro-radio id="radio16" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="radio17" label="No" name="radioDemo" value="no" error></auro-radio>
-  <auro-radio id="radio18" 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.
-
-<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>
-    <span slot="legend">Form label goes here</span>
-    <auro-radio id="radio25" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="radio26" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="radio27" 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>
-  <span slot="legend">Form label goes here</span>
-  <auro-radio id="radio25" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="radio26" label="No" name="radioDemo" value="no"></auro-radio>
-  <auro-radio id="radio27" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-</auro-radio-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Horizontal radio group
-
-Using the `horizontal` attribute will render the checkbox options on a horizontal line.
-
-<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="radio22" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="radio23" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="radio24" 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="radio22" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="radio23" label="No" name="radioDemo" value="no"></auro-radio>
-  <auro-radio id="radio24" 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="radio28" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="radio29" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="radio30" 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="radio28" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="radio29" label="No" name="radioDemo" value="no"></auro-radio>
-  <auro-radio id="radio30" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-</auro-radio-group>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
 
 ## Recommended Use and Version Control
 
diff --git a/docs/partials/api.md b/docs/partials/api.md
index 0815483..79feaf0 100644
--- a/docs/partials/api.md
+++ b/docs/partials/api.md
@@ -41,19 +41,15 @@ The following illustrates a default use of the `<auro-radio-group><auro-radio>..
 
 Use the `disabled` attribute to disable singular `<auro-radio>` elements or the entire `<auro-radio-group>`.
 
-#### Group
-
-The `disabled` attribute used to disable the entire `<auro-radio-group>`.
-
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/disabledGroup.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/disabled.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabledGroup.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabled.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -62,24 +58,20 @@ The `disabled` attribute used to disable the entire `<auro-radio-group>`.
 
 Use the `error` attribute to set an error state on the entire `<auro-radio-group>`.
 
-#### Group
-
-The `error` attribute used to set an error state on the entire `<auro-radio-group>`.
-
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/errorGroup.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/errorGroup.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
 
-### horizontal
+### Horizontal Group
 
 Using the `horizontal` attribute will render the `auro-radio` elements in a horizontal line.
 
@@ -131,3 +123,25 @@ The `<auro-radio-group>` supports an `optionalLabel` slot, where users can can o
 <!-- 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) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/dynamic.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/dynamic.js) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
diff --git a/docs/partials/index.md b/docs/partials/index.md
index 5346988..3fae146 100644
--- a/docs/partials/index.md
+++ b/docs/partials/index.md
@@ -50,148 +50,6 @@ This is a default configuration using the `<auro-radio-group>` and `<auro-radio>
 
 </auro-accordion>
 
-<p>Using a similar configuration notice the use of the <code>&#60;slot&#62;</code> element within the <code>&#60;auro-radio&#62;</code> element. This will allow users to override the direct use of content from the <code>value</code> attribute.</p>
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic2.html) -->
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic2.html) -->
-<!-- AURO-GENERATED-CONTENT:END -->
-
-</auro-accordion>
-
-### Disabled
-
-Use the `disabled` attribute to disable singular `<auro-radio>` elements or the entire `<auro-radio-group>`.
-
-#### Group
-
-The `disabled` attribute used to disable the entire `<auro-radio-group>`.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/disabledGroup.html) -->
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabledGroup.html) -->
-<!-- AURO-GENERATED-CONTENT:END -->
-
-</auro-accordion>
-
-#### Single
-
-The `disabled` attribute used to disable a single `<auro-radio>` element.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/disabled.html) -->
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabled.html) -->
-<!-- AURO-GENERATED-CONTENT:END -->
-
-</auro-accordion>
-
-### Error
-
-Use the `error` attribute to set an error state on the entire `<auro-radio-group>`.
-
-#### Group
-
-The `error` attribute used to set an error state on the entire `<auro-radio-group>`.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/errorGroup.html) -->
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/errorGroup.html) -->
-<!-- AURO-GENERATED-CONTENT:END -->
-
-</auro-accordion>
-
-#### Single
-
-The `error` attribute used to set an error state on a single `<auro-radio>` element.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error.html) -->
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.html) -->
-<!-- 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.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/required.html) -->
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/required.html) -->
-<!-- AURO-GENERATED-CONTENT:END -->
-
-</auro-accordion>
-
-### Horizontal radio group
-
-Using the `horizontal` attribute will render the checkbox options on a horizontal line.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/horizontal.html) -->
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/horizontal.html) -->
-<!-- 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) -->
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/optionalLabel.html) -->
-<!-- AURO-GENERATED-CONTENT:END -->
-
-</auro-accordion>
-
 ## Recommended Use and Version Control
 
 There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `<auro-radio>` custom element is defined automatically.
diff --git a/docs/partials/useCases.md b/docs/partials/useCases.md
index 2170a0c..6ad2c8d 100644
--- a/docs/partials/useCases.md
+++ b/docs/partials/useCases.md
@@ -1,3 +1,5 @@
 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.
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 29387f9..69fcd08 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -1,9 +1,9 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import serve from 'rollup-plugin-serve';
 
-const production = !process.env.ROLLUP_WATCH,
+const production = !process.env.ROLLUP_WATCH;
 
- modernConfig = {
+const modernConfig = {
   input: {
     ['auro-radio__bundled']: './index.js',
   },
@@ -21,4 +21,14 @@ const production = !process.env.ROLLUP_WATCH,
   ]
 };
 
-export default [modernConfig];
+const apiExamplesConfig = {
+  input: {
+    ['api.min']: './demo/api.js',
+  },
+  output: {
+    format: 'esm',
+    dir: 'demo/'
+  }
+};
+
+export default [modernConfig, apiExamplesConfig];