Fix incorrect initial radiogroup validity

.changeset/vast-buses-boil.md

@@ -0,0 +1,7 @@
+---
+'@sl-design-system/radio-group': patch
+---
+
+Fix bug where radiogroup is invalid even though it has an initial value
+
+The validity was not updated as part of the `slotchange` handler, causing the radiogroup to be invalid on initial render even though one of the radios was checked. This has been fixed by calling `#updateValueAndValidity` at the end of the `slotchange` handler.

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

@@ -249,6 +249,38 @@ describe('sl-radio-group', () => {
     });
   });
 
+  describe('initial value', () => {
+    it('should be valid when the initial value matches one of the options', async () => {
+      el = await fixture(html`
+        <sl-radio-group value="2" required>
+          <sl-radio value="1">Option 1</sl-radio>
+          <sl-radio value="2">Option 2</sl-radio>
+          <sl-radio value="3">Option 3</sl-radio>
+        </sl-radio-group>
+      `);
+
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(el.value).to.equal('2');
+      expect(el.valid).to.be.true;
+    });
+
+    it('should be invalid when the initial value does not match any of the options', async () => {
+      el = await fixture(html`
+        <sl-radio-group value="dummy" required>
+          <sl-radio value="1">Option 1</sl-radio>
+          <sl-radio value="2">Option 2</sl-radio>
+          <sl-radio value="3">Option 3</sl-radio>
+        </sl-radio-group>
+      `);
+
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(el.value).to.equal('dummy');
+      expect(el.valid).to.be.false;
+    });
+  });
+
   describe('validation', () => {
     beforeEach(async () => {
       el = await fixture(html`

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

@@ -227,6 +227,7 @@ export class RadioGroup<T = any> extends FormControlMixin(LitElement) {
     }
 
     this.#observer.observe(this, OBSERVER_OPTIONS);
+    this.#updateValueAndValidity();
   }
 
   #setSelectedOption(option?: Radio<T>, emitEvent = true): void {