fixes #370

docs/getting-started/changelog.md

@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Fixed a bug where the active tab indicator wouldn't render properly on tabs styled with `flex-end` [#355](https://github.com/shoelace-style/shoelace/issues/355)
+- Fixed a bug where `sl-change` wasn't emitted by `sl-checkbox` or `sl-switch` [#370](https://github.com/shoelace-style/shoelace/issues/370)
 - Improved `@watch` decorator so watch handlers don't run before the first render
 - Removed guards that were added due to previous watch handler behavior
 

src/components/checkbox/checkbox.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./checkbox.scss';
 
 let id = 0;
@@ -104,20 +104,14 @@ export default class SlCheckbox extends LitElement {
     this.input.focus();
   }
 
+  @watch('checked')
+  @watch('indeterminate')
   handleStateChange() {
     this.input.checked = this.checked;
     this.input.indeterminate = this.indeterminate;
     this.slChange.emit();
   }
 
-  checkedChanged() {
-    this.handleStateChange();
-  }
-
-  indeterminateChanged() {
-    this.handleStateChange();
-  }
-
   render() {
     return html`
       <label

src/components/switch/switch.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./switch.scss';
 
 let id = 0;
@@ -107,6 +107,7 @@ export default class SlSwitch extends LitElement {
     this.input.focus();
   }
 
+  @watch('checked')
   checkedChanged() {
     if (this.input) {
       this.input.checked = this.checked;