AlaskaAirlines · jordanjones243 · May 13, 2024 · Mar 28, 2024 · Mar 29, 2024 · Mar 29, 2024
diff --git a/README.md b/README.md
@@ -85,7 +85,7 @@ import "@aurodesignsystem/auro-radio";
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-radio id="radio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+<auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -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
@@ -127,7 +129,7 @@ The following examples illustrate fully functional `<auro-radio>` elements wrapp
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-radio id="radio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+<auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

diff --git a/apiExamples/basic.html b/apiExamples/basic.html
@@ -1 +1 @@
-<auro-radio id="radio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+<auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
diff --git a/apiExamples/basicGroup.html b/apiExamples/basicGroup.html
@@ -1,6 +1,6 @@
 <auro-radio-group>
   <span slot="legend">Form label goes 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 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>
diff --git a/apiExamples/basic2.html → apiExamples/checked.html b/apiExamples/basic2.html → apiExamples/checked.html
@@ -1,6 +1,6 @@
 <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>
+  <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>
diff --git a/apiExamples/customRadio.html b/apiExamples/customRadio.html
@@ -1,6 +1,6 @@
 <custom-radio-group>
   <span slot="legend">Form label goes here</span>
-  <custom-radio id="radio7" label="Yes" name="radioDemo" value="yes"></custom-radio>
-  <custom-radio id="radio8" label="No" name="radioDemo" value="no"></custom-radio>
-  <custom-radio id="radio9" label="Maybe" name="radioDemo" value="maybe"></custom-radio>
+  <custom-radio id="customRadio1" label="Yes" name="radioDemo" value="yes"></custom-radio>
+  <custom-radio id="customRadio2" label="No" name="radioDemo" value="no"></custom-radio>
+  <custom-radio id="customRadio3" label="Maybe" name="radioDemo" value="maybe"></custom-radio>
 </custom-radio-group>
diff --git a/apiExamples/disabled.html b/apiExamples/disabled.html
@@ -1,6 +1,14 @@
 <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 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>
+
diff --git a/apiExamples/disabledGroup.html b/apiExamples/disabledGroup.html
diff --git a/apiExamples/dynamic.html 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
@@ -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 = `dynamicRadio${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
@@ -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="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>
diff --git a/apiExamples/errorGroup.html b/apiExamples/errorGroup.html
diff --git a/apiExamples/horizontal.html b/apiExamples/horizontal.html
@@ -1,6 +1,6 @@
 <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 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>
diff --git a/apiExamples/optionalLabel.html b/apiExamples/optionalLabel.html
@@ -1,7 +1,7 @@
 <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 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>
diff --git a/apiExamples/required.html b/apiExamples/required.html
@@ -1,6 +1,6 @@
-<auro-radio-group required>
+<auro-radio-group required setCustomValidityValueMissing="value missing">
   <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 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>
diff --git a/demo/api.html b/demo/api.html
@@ -3,7 +3,7 @@
   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/apiExamples.md
+  All demo code should be added/edited in ./demo/api.md
 
   With the exception of adding custom elements if needed for the demo.
 
@@ -22,7 +22,6 @@
       href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css"
     />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.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>
@@ -41,6 +40,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
@@ -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);
+    }
+  }
+}