fix: emit sl-change from radio and switch on user interaction only

src/components/checkbox/checkbox.test.ts

@@ -2,7 +2,7 @@ import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands'
 
 import '../../../dist/shoelace.js';
-import type SlInput from './checkbox';
+import type SlCheckbox from './checkbox';
 
 describe('<sl-checkbox>', () => {
   it('should be disabled with the disabled attribute', async () => {
@@ -13,13 +13,13 @@ describe('<sl-checkbox>', () => {
   });
 
   it('should be valid by default', async () => {
-    const el = (await fixture<SlInput>(html` <sl-checkbox></sl-checkbox> `))
+    const el = (await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `))
 
     expect(el.invalid).to.be.false;
   });
 
   it('should fire sl-change when clicked', async () => {
-    const el = (await fixture<SlInput>(html` <sl-checkbox></sl-checkbox> `))
+    const el = (await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `))
     setTimeout(() => el.shadowRoot?.querySelector('input').click());
     const event = await oneEvent(el, 'sl-change')
     expect(event.target).to.equal(el);
@@ -27,7 +27,7 @@ describe('<sl-checkbox>', () => {
   });
 
   it('should fire sl-change when toggled via keyboard', async () => {
-    const el = (await fixture<SlInput>(html` <sl-checkbox></sl-checkbox> `))
+    const el = (await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `))
     const input = el.shadowRoot?.querySelector('input');
     input.focus();
     setTimeout(() => sendKeys({ press: ' ' }));
@@ -37,7 +37,7 @@ describe('<sl-checkbox>', () => {
   });
 
   it('should not fire sl-change when checked is set by javascript', async () => {
-    const el = (await fixture<SlInput>(html` <sl-checkbox></sl-checkbox> `))
+    const el = (await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `))
     el.addEventListener('sl-change', () => expect.fail('event fired'))
     el.checked = true;
     await el.updateComplete;

src/components/radio/radio.test.ts

@@ -0,0 +1,47 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands'
+
+import '../../../dist/shoelace.js';
+import type SlRadio from './radio';
+
+describe('<sl-radio>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture(html` <sl-radio disabled></sl-radio> `);
+    const radio = el.shadowRoot?.querySelector('input');
+
+    expect(radio.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = (await fixture<SlRadio>(html` <sl-radio></sl-radio> `))
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should fire sl-change when clicked', async () => {
+    const el = (await fixture<SlRadio>(html` <sl-radio></sl-radio> `))
+    setTimeout(() => el.shadowRoot?.querySelector('input').click());
+    const event = await oneEvent(el, 'sl-change')
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should fire sl-change when toggled via keyboard', async () => {
+    const el = (await fixture<SlRadio>(html` <sl-radio></sl-radio> `))
+    const input = el.shadowRoot?.querySelector('input');
+    input.focus();
+    setTimeout(() => sendKeys({ press: ' ' }));
+    const event = await oneEvent(el, 'sl-change')
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should not fire sl-change when checked is set by javascript', async () => {
+    const el = (await fixture<SlRadio>(html` <sl-radio></sl-radio> `))
+    el.addEventListener('sl-change', () => expect.fail('event fired'))
+    el.checked = true;
+    await el.updateComplete;
+    el.checked = false;
+    await el.updateComplete;
+  });
+});

src/components/radio/radio.ts

@@ -104,11 +104,11 @@ export default class SlRadio extends LitElement {
     if (this.checked) {
       this.getSiblingRadios().map(radio => (radio.checked = false));
     }
-    emit(this, 'sl-change');
   }
 
   handleClick() {
     this.checked = true;
+    emit(this, 'sl-change');
   }
 
   @watch('disabled')

src/components/switch/switch.test.ts

@@ -0,0 +1,47 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands'
+
+import '../../../dist/shoelace.js';
+import type SlSwitch from './switch';
+
+describe('<sl-switch>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture(html` <sl-switch disabled></sl-switch> `);
+    const input = el.shadowRoot?.querySelector('input');
+
+    expect(input.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = (await fixture<SlSwitch>(html` <sl-switch></sl-switch> `))
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should fire sl-change when clicked', async () => {
+    const el = (await fixture<SlSwitch>(html` <sl-switch></sl-switch> `))
+    setTimeout(() => el.shadowRoot?.querySelector('input').click());
+    const event = await oneEvent(el, 'sl-change')
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should fire sl-change when toggled via keyboard', async () => {
+    const el = (await fixture<SlSwitch>(html` <sl-switch></sl-switch> `))
+    const input = el.shadowRoot?.querySelector('input');
+    input.focus();
+    setTimeout(() => sendKeys({ press: ' ' }));
+    const event = await oneEvent(el, 'sl-change')
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should not fire sl-change when checked is set by javascript', async () => {
+    const el = (await fixture<SlSwitch>(html` <sl-switch></sl-switch> `))
+    el.addEventListener('sl-change', () => expect.fail('event fired'))
+    el.checked = true;
+    await el.updateComplete;
+    el.checked = false;
+    await el.updateComplete;
+  });
+});

src/components/switch/switch.ts

@@ -97,12 +97,12 @@ export default class SlSwitch extends LitElement {
     if (this.input) {
       this.input.checked = this.checked;
       this.invalid = !this.input.checkValidity();
-      emit(this, 'sl-change');
     }
   }
 
   handleClick() {
     this.checked = !this.checked;
+    emit(this, 'sl-change');
   }
 
   @watch('disabled')