@aurodesignsystem/auro-formkit 1.6.0-beta.8 → 2.0.0-beta.1

package/components/menu/src/auro-menu.js

@@ -22,13 +22,9 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
  * @attr {String} value - Value selected for the menu.
  * @prop {Boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
  * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
  * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - Text to show while loading attribute is set
@@ -237,13 +233,6 @@ export class AuroMenu extends LitElement {
    * @return {void}
    */
   notifySelectionChange() {
-    // this event needs to be removed after select and combobox are updated to use the new standard name
-    this.dispatchEvent(new CustomEvent('selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
       bubbles: true,
       cancelable: false,
@@ -275,13 +264,6 @@ export class AuroMenu extends LitElement {
               composed: true,
             }));
 
-            // this event needs to be removed after select and combobox are updated to use the new standard name
-            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
-
             this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
               bubbles: true,
               cancelable: false,
@@ -444,13 +426,6 @@ export class AuroMenu extends LitElement {
         // reset the menu to no selection
         this.index = undefined;
 
-        // this event needs to be removed after select and combobox are updated to use the new standard name
-        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
-
         this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
           bubbles: true,
           cancelable: false,
@@ -482,13 +457,6 @@ export class AuroMenu extends LitElement {
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
 
-    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
-
     this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
       bubbles: true,
       cancelable: false,

package/components/menu/src/auro-menuoption.js

@@ -69,8 +69,7 @@ export class AuroMenuOption extends LitElement {
         reflect: true
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       tabIndex: {
         type: Number,

package/components/menu/src/iconVersion.js

@@ -1 +1 @@
-export default '6.1.1';
+export default '6.1.2';

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

@@ -138,13 +138,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 816ms
+created dist in 763ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 484ms
+created ./demo/ in 581ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 369ms
+created ./demo/ in 353ms
 
 > @auro-formkit/auro-radio@4.1.1 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component radio
@@ -193,6 +193,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/radio/
   ⁕ FILE:src=./../apiExamples/horizontal.html 
   ⁕ FILE:src=./../apiExamples/required.html 
   ⁕ FILE:src=./../apiExamples/optionalLabel.html 
+  ⁕ FILE:src=./../apiExamples/resetState.html 
   ⁕ FILE:src=./../apiExamples/dynamic.html 
   ⁕ CODE:src=./../apiExamples/basic.html 
   ⁕ CODE:src=./../apiExamples/basicGroup.html 
@@ -202,6 +203,8 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/radio/
   ⁕ CODE:src=./../apiExamples/horizontal.html 
   ⁕ CODE:src=./../apiExamples/required.html 
   ⁕ CODE:src=./../apiExamples/optionalLabel.html 
+  ⁕ CODE:src=./../apiExamples/resetState.html 
+  ⁕ CODE:src=./../apiExamples/resetState.js 
   ⁕ CODE:src=./../apiExamples/dynamic.html 
   ⁕ CODE:src=./../apiExamples/dynamic.js 
   ⁕ CODE:src=./../src/styles/tokens.scss 

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 888ms
+created dist in 963ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 635ms
+created ./demo/ in 536ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 375ms
+created ./demo/ in 467ms

package/components/radio/demo/api.html

@@ -46,5 +46,6 @@
 
     <!-- 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>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
   </body>
 </html>

package/components/radio/demo/api.js

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

package/components/radio/demo/api.md

@@ -21,9 +21,9 @@
 
 ## Methods
 
-| Method  | Type       | Description                                    |
-|---------|------------|------------------------------------------------|
-| [reset](#reset) | `(): void` | Method for a total reset of the radio element. |
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| [reset](#reset) | `(): void` | Resets component to initial state. |
 
 ## Events
 
@@ -61,6 +61,12 @@
 | [tabIndex](#tabIndex) | `tabIndex` | `number`  | -1      |                                                  |
 | [value](#value)    | `value`    | `string`  |         |                                                  |
 
+## Methods
+
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| [reset](#reset) | `(): void` | Resets component to initial state. |
+
 ## Events
 
 | Event                | Type               | Description                                      |
@@ -328,6 +334,54 @@ The `<auro-radio-group>` supports an `optionalLabel` slot, where users can can o
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Reset State
+
+Use the `reset()` method to reset the `<auro-radio-group>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
+  <auro-button id="resetStateBtn">Reset</auro-button>
+  <br/><br/>
+  <auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="resetGroupRadio3" 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/resetState.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
+
+```html
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br/><br/>
+<auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
+
+```js
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Dynamic Example
 
 This example demonstrates a data drive approach to rendering `<auro-radio>` buttons.

package/components/radio/demo/api.min.js

@@ -15,6 +15,14 @@ function dynamicExample() {
   }
 }
 
+function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -276,6 +284,15 @@ class AuroRadio extends r {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {
@@ -384,6 +401,30 @@ class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private
@@ -398,10 +439,15 @@ class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+    }
+
+    // Length > 0 is required to prevent the error message from showing when the input is empty
+    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
       elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
+    }
+    
+    if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -427,7 +473,7 @@ class AuroFormValidation {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
           elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -532,14 +578,10 @@ class AuroFormValidation {
 
     if (validationShouldRun || elem.hasAttribute('error')) {
       if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
         // Use the validity message override if it is declared
         if (elem.ValidityMessageOverride) {
           elem.setCustomValidity = elem.ValidityMessageOverride;
         }
-      } else {
-        elem.isValid = true;
       }
 
       this.getErrorMessage(elem);
@@ -812,20 +854,20 @@ class AuroRadioGroup extends r {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
+    // Sets first radio button to receive focus during keyboard navigation
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**
@@ -1037,6 +1079,7 @@ function initExamples(initCount) {
 
   try {
     dynamicExample();
+    resetStateExample();
   } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/radio/demo/index.min.js

@@ -259,6 +259,15 @@ class AuroRadio extends r {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {
@@ -367,6 +376,30 @@ class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private
@@ -381,10 +414,15 @@ class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+    }
+
+    // Length > 0 is required to prevent the error message from showing when the input is empty
+    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
       elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
+    }
+    
+    if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -410,7 +448,7 @@ class AuroFormValidation {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
           elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -515,14 +553,10 @@ class AuroFormValidation {
 
     if (validationShouldRun || elem.hasAttribute('error')) {
       if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
         // Use the validity message override if it is declared
         if (elem.ValidityMessageOverride) {
           elem.setCustomValidity = elem.ValidityMessageOverride;
         }
-      } else {
-        elem.isValid = true;
       }
 
       this.getErrorMessage(elem);
@@ -795,20 +829,20 @@ class AuroRadioGroup extends r {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
+    // Sets first radio button to receive focus during keyboard navigation
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**

package/components/radio/dist/auro-radio-group.d.ts

@@ -107,7 +107,7 @@ export class AuroRadioGroup extends LitElement {
      */
     updated(changedProperties: Map<string, any>): void;
     /**
-     * Method for a total reset of the radio element.
+     * Resets component to initial state.
      * @returns {void}
      */
     reset(): void;

package/components/radio/dist/auro-radio.d.ts

@@ -90,6 +90,11 @@ export class AuroRadio extends LitElement {
      * @returns {void}
      */
     private handleBlur;
+    /**
+     * Resets component to initial state.
+     * @returns {void}
+     */
+    reset(): void;
     updated(changedProperties: any): void;
     /**
      * Method for handling content when it is invalid accessibility wise.

package/components/radio/dist/auro-radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-radio.d.ts","sourceRoot":"","sources":["../src/auro-radio.js"],"names":[],"mappings":"AAmBA;;;;;;;;;;GAUG;AAGH;IAeE,+CAMC;IAGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA5DC,iBAAoB;IACpB,kBAAqB;IACrB,kBAAqB;IACrB,eAAkB;IAGlB;;OAEG;IACH,qBAAiD;IAqDnD;;;;;OAKG;IACH,qBAKC;IAED;;;;;OAKG;IACH,oBAOC;IAED;;;;;OAKG;IACH,oBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED,sCAcC;IAED;;;;;OAKG;IACH,gBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED,qBAWC;IALC,wBAAmD;IAQrD,+CAkCC;CACF;2BAjPgC,KAAK"}
+{"version":3,"file":"auro-radio.d.ts","sourceRoot":"","sources":["../src/auro-radio.js"],"names":[],"mappings":"AAmBA;;;;;;;;;;GAUG;AAGH;IAeE,+CAMC;IAGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA5DC,iBAAoB;IACpB,kBAAqB;IACrB,kBAAqB;IACrB,eAAkB;IAGlB;;OAEG;IACH,qBAAiD;IAqDnD;;;;;OAKG;IACH,qBAKC;IAED;;;;;OAKG;IACH,oBAOC;IAED;;;;;OAKG;IACH,oBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED;;;OAGG;IACH,SAFa,IAAI,CAKhB;IAED,sCAcC;IAED;;;;;OAKG;IACH,gBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED,qBAWC;IALC,wBAAmD;IAQrD,+CAkCC;CACF;2BA1PgC,KAAK"}

package/components/radio/dist/index.js

@@ -259,6 +259,15 @@ class AuroRadio extends r {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {
@@ -367,6 +376,30 @@ class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private
@@ -381,10 +414,15 @@ class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+    }
+
+    // Length > 0 is required to prevent the error message from showing when the input is empty
+    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
       elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
+    }
+    
+    if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -410,7 +448,7 @@ class AuroFormValidation {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
           elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -515,14 +553,10 @@ class AuroFormValidation {
 
     if (validationShouldRun || elem.hasAttribute('error')) {
       if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
         // Use the validity message override if it is declared
         if (elem.ValidityMessageOverride) {
           elem.setCustomValidity = elem.ValidityMessageOverride;
         }
-      } else {
-        elem.isValid = true;
       }
 
       this.getErrorMessage(elem);
@@ -795,20 +829,20 @@ class AuroRadioGroup extends r {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
+    // Sets first radio button to receive focus during keyboard navigation
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**

package/components/radio/src/auro-radio-group.js

@@ -216,20 +216,20 @@ export class AuroRadioGroup extends LitElement {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
+    // Sets first radio button to receive focus during keyboard navigation
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**

package/components/radio/src/auro-radio.js

@@ -151,6 +151,15 @@ export class AuroRadio extends LitElement {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {