fix watch handlers

docs/getting-started/changelog.md

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - 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)
+- Fixed a bug where some props weren't being watched correctly in `sl-alert` and `sl-color-picker`
 - 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/alert/alert.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, internalProperty, property, 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:./alert.scss';
 
 const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' });
@@ -157,11 +157,13 @@ export default class SlAlert extends LitElement {
     }
   }
 
-  openChanged() {
+  @watch('open')
+  handleOpenChange() {
     this.open ? this.show() : this.hide();
   }
 
-  durationChanged() {
+  @watch('duration')
+  handleDurationChange() {
     this.restartAutoHide();
   }
 

src/components/color-picker/color-picker.ts

@@ -1,7 +1,7 @@
 import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./color-picker.scss';
 import { SlDropdown, SlInput } from '../../shoelace';
 import color from 'color';
@@ -579,15 +579,18 @@ export default class SlColorPicker extends LitElement {
     this.bypassValueParse = false;
   }
 
-  formatChanged() {
+  @watch('format')
+  handleFormatChange() {
     this.syncValues();
   }
 
-  opacityChanged() {
+  @watch('opacity')
+  handleOpacityChange() {
     this.alpha = 100;
   }
 
-  valueChanged(newValue: string, oldValue: string) {
+  @watch('value')
+  handleValueChange(newValue: string, oldValue: string) {
     if (!this.bypassValueParse) {
       const newColor = this.parseColor(newValue);
 

src/components/switch/switch.ts

@@ -108,7 +108,7 @@ export default class SlSwitch extends LitElement {
   }
 
   @watch('checked')
-  checkedChanged() {
+  handleCheckedChange() {
     if (this.input) {
       this.input.checked = this.checked;
       this.slChange.emit();