remove { waitUntilFirstUpdate } when not needed

docs/components/progress-ring.md

@@ -5,7 +5,7 @@
 Progress rings are used to show the progress of a determinate operation in a circular fashion.
 
 ```html preview
-<sl-progress-ring percentage="50"></sl-progress-ring>
+<sl-progress-ring percentage="25"></sl-progress-ring>
 ```
 
 ## Examples

src/components/alert/alert.ts

@@ -168,7 +168,7 @@ export default class SlAlert extends LitElement {
     }
   }
 
-  @watch('duration', { waitUntilFirstUpdate: true })
+  @watch('duration')
   handleDurationChange() {
     this.restartAutoHide();
   }

src/components/progress-ring/progress-ring.ts

@@ -35,10 +35,6 @@ export default class SlProgressRing extends LitElement {
   }
 
   @watch('percentage', { waitUntilFirstUpdate: true })
-  handlePercentageChange() {
-    this.updateProgress();
-  }
-
   updateProgress() {
     const radius = this.indicator.r.baseVal.value;
     const circumference = radius * 2 * Math.PI;

src/components/radio/radio.ts

@@ -102,7 +102,6 @@ export default class SlRadio extends LitElement {
     if (this.checked) {
       this.getSiblingRadios().map(radio => (radio.checked = false));
     }
-    this.input.checked = this.checked;
     this.slChange.emit();
   }
 

src/components/select/select.ts

@@ -187,7 +187,7 @@ export default class SlSelect extends LitElement {
     this.syncItemsFromValue();
   }
 
-  @watch('disabled', { waitUntilFirstUpdate: true })
+  @watch('disabled')
   handleDisabledChange() {
     if (this.disabled && this.isOpen) {
       this.dropdown.hide();
@@ -281,7 +281,7 @@ export default class SlSelect extends LitElement {
     this.box.focus();
   }
 
-  @watch('multiple', { waitUntilFirstUpdate: true })
+  @watch('multiple')
   handleMultipleChange() {
     // Cast to array | string based on `this.multiple`
     const value = this.getValueAsArray();
@@ -289,8 +289,8 @@ export default class SlSelect extends LitElement {
     this.syncItemsFromValue();
   }
 
-  @watch('helpText', { waitUntilFirstUpdate: true })
-  @watch('label', { waitUntilFirstUpdate: true })
+  @watch('helpText')
+  @watch('label')
   async handleSlotChange() {
     this.hasHelpTextSlot = hasSlot(this, 'help-text');
     this.hasLabelSlot = hasSlot(this, 'label');

src/components/tab-group/tab-group.ts

@@ -216,13 +216,15 @@ export default class SlTabGroup extends LitElement {
     });
   }
 
-  @watch('noScrollControls', { waitUntilFirstUpdate: true })
+  @watch('noScrollControls')
   updateScrollControls() {
-    if (this.noScrollControls) {
-      this.hasScrollControls = false;
-    } else {
-      this.hasScrollControls =
-        ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
+    if (this.nav) {
+      if (this.noScrollControls) {
+        this.hasScrollControls = false;
+      } else {
+        this.hasScrollControls =
+          ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
+      }
     }
   }
 
@@ -270,7 +272,7 @@ export default class SlTabGroup extends LitElement {
     });
   }
 
-  @watch('placement', { waitUntilFirstUpdate: true })
+  @watch('placement')
   syncIndicator() {
     if (this.indicator) {
       const tab = this.getActiveTab();

src/components/textarea/textarea.ts

@@ -242,7 +242,7 @@ export default class SlTextarea extends LitElement {
     this.slFocus.emit();
   }
 
-  @watch('rows', { waitUntilFirstUpdate: true })
+  @watch('rows')
   handleRowsChange() {
     this.setTextareaHeight();
   }
@@ -254,17 +254,21 @@ export default class SlTextarea extends LitElement {
     this.hasLabelSlot = hasSlot(this, 'label');
   }
 
-  @watch('value', { waitUntilFirstUpdate: true })
+  @watch('value')
   handleValueChange() {
-    this.invalid = !this.input.checkValidity();
+    if (this.input) {
+      this.invalid = !this.input.checkValidity();
+    }
   }
 
   setTextareaHeight() {
-    if (this.resize === 'auto') {
-      this.input.style.height = 'auto';
-      this.input.style.height = this.input.scrollHeight + 'px';
-    } else {
-      (this.input.style.height as string | undefined) = undefined;
+    if (this.input) {
+      if (this.resize === 'auto') {
+        this.input.style.height = 'auto';
+        this.input.style.height = this.input.scrollHeight + 'px';
+      } else {
+        (this.input.style.height as string | undefined) = undefined;
+      }
     }
   }
 

src/internal/decorators.ts

@@ -65,8 +65,8 @@ export class EventEmitter<T> {
 //
 // Runs when an observed property changes, e.g. @property or @state, but before the component updates.
 //
-// To wait for the update to complete after a change, use `await this.updateComplete` in the handler. To determine if
-// the component has previously been updated/rendered, check `this.hasUpdated` in the handler.
+// To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start
+// watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
 //
 // Usage:
 //