fix: emit sl-change from checkbox on user interaction only

fixes #497

src/components/checkbox/checkbox.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 SlInput from './checkbox';
+
+describe('<sl-checkbox>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture(html` <sl-checkbox disabled></sl-checkbox> `);
+    const checkbox = el.shadowRoot?.querySelector('input');
+
+    expect(checkbox.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = (await fixture<SlInput>(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> `))
+    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<SlInput>(html` <sl-checkbox></sl-checkbox> `))
+    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<SlInput>(html` <sl-checkbox></sl-checkbox> `))
+    el.addEventListener('sl-change', () => expect.fail('event fired'))
+    el.checked = true;
+    await el.updateComplete;
+    el.checked = false;
+    await el.updateComplete;
+  });
+});

src/components/checkbox/checkbox.ts

@@ -90,6 +90,7 @@ export default class SlCheckbox extends LitElement {
   handleClick() {
     this.checked = !this.checked;
     this.indeterminate = false;
+    emit(this, 'sl-change');
   }
 
   handleBlur() {
@@ -121,7 +122,6 @@ export default class SlCheckbox extends LitElement {
   @watch('indeterminate', { waitUntilFirstUpdate: true })
   handleStateChange() {
     this.invalid = !this.input.checkValidity();
-    emit(this, 'sl-change');
   }
 
   render() {