use @watch and reorder handlers

src/components/checkbox/checkbox.ts

@@ -64,14 +64,6 @@ export default class SlCheckbox extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
-  updated(changedProps: Map<string, any>) {
-    // Disabled form controls are always valid, so we need to recheck validity when the state changes
-    if (changedProps.get('disabled')) {
-      this.input.disabled = this.disabled;
-      this.invalid = !this.input.checkValidity();
-    }
-  }
-
   /** Simulates a click on the checkbox. */
   click() {
     this.input.click();
@@ -108,6 +100,15 @@ export default class SlCheckbox extends LitElement {
     this.slBlur.emit();
   }
 
+  @watch('disabled')
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (this.input) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
   handleFocus() {
     this.hasFocus = true;
     this.slFocus.emit();

src/components/input/input.ts

@@ -156,14 +156,6 @@ export default class SlInput extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
-  updated(changedProps: Map<string, any>) {
-    // Disabled form controls are always valid, so we need to recheck validity when the state changes
-    if (changedProps.get('disabled')) {
-      this.input.disabled = this.disabled;
-      this.invalid = !this.input.checkValidity();
-    }
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);
@@ -220,28 +212,14 @@ export default class SlInput extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
-  handleChange() {
-    this.value = this.input.value;
-    this.slChange.emit();
-  }
-
-  handleInput() {
-    this.value = this.input.value;
-    this.slInput.emit();
-  }
-
-  handleInvalid() {
-    this.invalid = true;
-  }
-
   handleBlur() {
     this.hasFocus = false;
     this.slBlur.emit();
   }
 
-  handleFocus() {
-    this.hasFocus = true;
-    this.slFocus.emit();
+  handleChange() {
+    this.value = this.input.value;
+    this.slChange.emit();
   }
 
   handleClearClick(event: MouseEvent) {
@@ -254,6 +232,29 @@ export default class SlInput extends LitElement {
     event.stopPropagation();
   }
 
+  @watch('disabled')
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (this.input) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
+  handleFocus() {
+    this.hasFocus = true;
+    this.slFocus.emit();
+  }
+
+  handleInput() {
+    this.value = this.input.value;
+    this.slInput.emit();
+  }
+
+  handleInvalid() {
+    this.invalid = true;
+  }
+
   handlePasswordToggle() {
     this.isPasswordVisible = !this.isPasswordVisible;
   }

src/components/radio/radio.ts

@@ -56,14 +56,6 @@ export default class SlRadio extends LitElement {
   /** Emitted when the control gains focus. */
   @event('sl-focus') slFocus: EventEmitter<void>;
 
-  updated(changedProps: Map<string, any>) {
-    // Disabled form controls are always valid, so we need to recheck validity when the state changes
-    if (changedProps.get('disabled')) {
-      this.input.disabled = this.disabled;
-      this.invalid = !this.input.checkValidity();
-    }
-  }
-
   /** Simulates a click on the radio. */
   click() {
     this.input.click();
@@ -105,6 +97,11 @@ export default class SlRadio extends LitElement {
     return this.getAllRadios().filter(radio => radio !== this) as this[];
   }
 
+  handleBlur() {
+    this.hasFocus = false;
+    this.slBlur.emit();
+  }
+
   @watch('checked', { waitUntilFirstUpdate: true })
   handleCheckedChange() {
     if (this.checked) {
@@ -117,9 +114,13 @@ export default class SlRadio extends LitElement {
     this.checked = true;
   }
 
-  handleBlur() {
-    this.hasFocus = false;
-    this.slBlur.emit();
+  @watch('disabled')
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (this.input) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
   }
 
   handleFocus() {

src/components/range/range.ts

@@ -100,14 +100,6 @@ export default class SlRange extends LitElement {
     });
   }
 
-  updated(changedProps: Map<string, any>) {
-    // Disabled form controls are always valid, so we need to recheck validity when the state changes
-    if (changedProps.get('disabled')) {
-      this.input.disabled = this.disabled;
-      this.invalid = !this.input.checkValidity();
-    }
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver.unobserve(this.input);
@@ -143,6 +135,15 @@ export default class SlRange extends LitElement {
     this.slBlur.emit();
   }
 
+  @watch('disabled')
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (this.input) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
   handleFocus() {
     this.hasFocus = true;
     this.hasTooltip = true;

src/components/select/select.ts

@@ -137,14 +137,6 @@ export default class SlSelect extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
-  updated(changedProps: Map<string, any>) {
-    // Disabled form controls are always valid, so we need to recheck validity when the state changes
-    if (changedProps.get('disabled')) {
-      this.input.disabled = this.disabled;
-      this.invalid = !this.input.checkValidity();
-    }
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver.unobserve(this);
@@ -195,6 +187,19 @@ export default class SlSelect extends LitElement {
     this.syncItemsFromValue();
   }
 
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.disabled && this.isOpen) {
+      this.dropdown.hide();
+    }
+
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (this.input) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
   handleFocus() {
     if (!this.hasFocus) {
       this.hasFocus = true;
@@ -282,13 +287,6 @@ export default class SlSelect extends LitElement {
     this.box.focus();
   }
 
-  @watch('disabled')
-  async handleDisabledChange() {
-    if (this.disabled && this.isOpen) {
-      this.dropdown.hide();
-    }
-  }
-
   @watch('multiple')
   handleMultipleChange() {
     // Cast to array | string based on `this.multiple`

src/components/switch/switch.ts

@@ -64,14 +64,6 @@ export default class SlSwitch extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
-  updated(changedProps: Map<string, any>) {
-    // Disabled form controls are always valid, so we need to recheck validity when the state changes
-    if (changedProps.get('disabled')) {
-      this.input.disabled = this.disabled;
-      this.invalid = !this.input.checkValidity();
-    }
-  }
-
   /** Simulates a click on the switch. */
   click() {
     this.input.click();
@@ -98,13 +90,31 @@ export default class SlSwitch extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
+  handleBlur() {
+    this.hasFocus = false;
+    this.slBlur.emit();
+  }
+
+  @watch('checked')
+  handleCheckedChange() {
+    if (this.input) {
+      this.input.checked = this.checked;
+      this.invalid = !this.input.checkValidity();
+      this.slChange.emit();
+    }
+  }
+
   handleClick() {
     this.checked = !this.checked;
   }
 
-  handleBlur() {
-    this.hasFocus = false;
-    this.slBlur.emit();
+  @watch('disabled')
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (this.input) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
   }
 
   handleFocus() {
@@ -130,15 +140,6 @@ export default class SlSwitch extends LitElement {
     this.input.focus();
   }
 
-  @watch('checked')
-  handleCheckedChange() {
-    if (this.input) {
-      this.input.checked = this.checked;
-      this.invalid = !this.input.checkValidity();
-      this.slChange.emit();
-    }
-  }
-
   render() {
     return html`
       <label

src/components/textarea/textarea.ts

@@ -144,14 +144,6 @@ export default class SlTextarea extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
-  updated(changedProps: Map<string, any>) {
-    // Disabled form controls are always valid, so we need to recheck validity when the state changes
-    if (changedProps.get('disabled')) {
-      this.input.disabled = this.disabled;
-      this.invalid = !this.input.checkValidity();
-    }
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver.unobserve(this.input);
@@ -229,27 +221,36 @@ export default class SlTextarea extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
+  handleBlur() {
+    this.hasFocus = false;
+    this.slBlur.emit();
+  }
+
   handleChange() {
     this.value = this.input.value;
     this.slChange.emit();
   }
 
+  @watch('disabled')
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (this.input) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
+  handleFocus() {
+    this.hasFocus = true;
+    this.slFocus.emit();
+  }
+
   handleInput() {
     this.value = this.input.value;
     this.setTextareaHeight();
     this.slInput.emit();
   }
 
-  handleBlur() {
-    this.hasFocus = false;
-    this.slBlur.emit();
-  }
-
-  handleFocus() {
-    this.hasFocus = true;
-    this.slFocus.emit();
-  }
-
   @watch('rows')
   handleRowsChange() {
     this.setTextareaHeight();