Review feedback updates

docs/components/radio-group.md

@@ -42,7 +42,7 @@ You can show a fieldset and legend that wraps the radio group using the `fieldse
 import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option" fieldset>
+  <SlRadioGroup label="Select an option" fieldset value="1">
     <SlRadio value="1" checked>Option 1</SlRadio>
     <SlRadio value="2">Option 2</SlRadio>
     <SlRadio value="3">Option 3</SlRadio>
@@ -62,12 +62,15 @@ Adding a `required` attribute to `sl-radio-group` will require at least one opti
 </sl-radio-group>
 <br />
 <sl-button class="required-button">Validate Group</sl-button>
+<sl-button class="required-reset-button">Reset Group</sl-button>
 
 <script>
   const button = document.querySelector('sl-button.required-button');
+  const resetButton = document.querySelector('sl-button.required-reset-button');
   const group = document.querySelector('sl-radio-group.required-radio-group');
 
-  button.addEventListener('click', ()=> group.reportValidity())
+  button.addEventListener('click', ()=> group.reportValidity());
+  resetButton.addEventListener('click', () => { group.value = ''})
 </script>
 ```
 

src/components/radio-group/radio-group.ts

@@ -17,20 +17,40 @@ import styles from './radio-group.styles';
 @customElement('sl-radio-group')
 export default class SlRadioGroup extends LitElement {
   static styles = styles;
+  private _value: string;
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 
   /** The radio group label. Required for proper accessibility. Alternatively, you can use the label slot. */
   @property() label = '';
 
+  set value(newValue) {
+    const index = this.getAllRadios().findIndex(el => el.value === newValue);
+    const oldValue = this._value;
+
+    if (index > -1) {
+      this.checkRadioByIndex(index);
+      this._value = newValue;
+      this.requestUpdate('value', oldValue);
+    } else {
+      this._value = '';
+      this.deselectAll();
+    }
+  }
+
+  /** The current value of the radio group. */
+  @property()
+  get value() {
+    return this._value;
+  }
+
   /** Shows the fieldset and legend that surrounds the radio group. */
   @property({ type: Boolean, attribute: 'fieldset' }) fieldset = false;
 
   /** Indicates that a selection is required. */
   @property({ type: Boolean, reflect: true }) required = false;
 
-  constructor() {
-    super();
+  connectedCallback() {
     this.addEventListener('sl-change', this.syncRadioButtons);
   }
 
@@ -39,7 +59,7 @@ export default class SlRadioGroup extends LitElement {
   }
 
   syncRadioButtons(event: CustomEvent) {
-    const currentRadio = ev.target;
+    const currentRadio = event.target;
     const radios = this.getAllRadios().filter(el => !el.disabled && el !== currentRadio);
     radios.forEach(el => {
       el.checked = false;
@@ -63,6 +83,23 @@ export default class SlRadioGroup extends LitElement {
     return [...this.querySelectorAll('sl-radio')];
   }
 
+  checkRadioByIndex(index: number): SlRadio[] {
+    const radios = this.deselectAll();
+
+    radios[index].focus();
+    radios[index].checked = true;
+    this._value = radios[index].value;
+
+    return radios;
+  }
+
+  deselectAll(): SlRadio[] {
+    return this.getAllRadios().map(radio => {
+      radio.checked = false;
+      return radio;
+    });
+  }
+
   handleKeyDown(event: KeyboardEvent) {
     if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       const radios = this.getAllRadios().filter(radio => !radio.disabled);
@@ -73,9 +110,7 @@ export default class SlRadioGroup extends LitElement {
       if (index < 0) index = radios.length - 1;
       if (index > radios.length - 1) index = 0;
 
-      this.getAllRadios().map(radio => (radio.checked = false));
-      radios[index].focus();
-      radios[index].checked = true;
+      this.checkRadioByIndex(index);
 
       event.preventDefault();
     }