Harmonize updated() definitions

- Use proper type
- Use same argument name
- Ensure `super.updated()` is called

src/components/button-group/button-group.ts

@@ -1,3 +1,4 @@
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -32,8 +33,10 @@ export default class WaButtonGroup extends WebAwesomeElement {
   /** The button group's orientation. */
   @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
 
-  updated(changedProps: Map<string, unknown>) {
-    if (changedProps.has('orientation')) {
+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('orientation')) {
       this.setAttribute('aria-orientation', this.orientation);
       this.updateClassNames();
     }

src/components/popup/popup.ts

@@ -1,5 +1,6 @@
 import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';
 import { offsetParent } from 'composed-offset-position';
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -222,11 +223,11 @@ export default class WaPopup extends WebAwesomeElement {
     this.stop();
   }
 
-  async updated(changedProps: Map<string, unknown>) {
-    super.updated(changedProps);
+  async updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
 
     // Start or stop the positioner when active changes
-    if (changedProps.has('active')) {
+    if (changedProperties.has('active')) {
       if (this.active) {
         this.start();
       } else {
@@ -235,7 +236,7 @@ export default class WaPopup extends WebAwesomeElement {
     }
 
     // Update the anchor when anchor changes
-    if (changedProps.has('anchor')) {
+    if (changedProperties.has('anchor')) {
       this.handleAnchorChange();
     }
 

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

@@ -1,3 +1,4 @@
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -38,15 +39,15 @@ export default class WaProgressRing extends WebAwesomeElement {
   /** A custom label for assistive devices. */
   @property() label = '';
 
-  updated(changedProps: Map<string, unknown>) {
-    super.updated(changedProps);
+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
 
     //
     // This block is only required for Safari because it doesn't transition the circle when the custom properties
     // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,
     // but I couldn't pinpoint it so this works around the problem.
     //
-    if (changedProps.has('value')) {
+    if (changedProperties.has('value')) {
       const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
       const circumference = 2 * Math.PI * radius;
       const offset = circumference - (this.value / 100) * circumference;

src/components/textarea/textarea.ts

@@ -1,4 +1,5 @@
-import { html, type PropertyValues } from 'lit';
+import type { PropertyValues } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -272,7 +273,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
     this.setTextareaDimensions();
   }
 
-  protected updated(changedProperties: PropertyValues<this>) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has('resize')) {
       this.setTextareaDimensions();
     }

src/components/viewport-demo/viewport-demo.ts

@@ -1,3 +1,4 @@
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -281,14 +282,14 @@ export default class WaViewportDemo extends WebAwesomeElement {
     }
   }
 
-  updated(changedProperties: Map<string | number | symbol, unknown>) {
+  updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('iframe')) {
+    if (changedProperties.has('iframe' as keyof WaViewportDemo)) {
       this.observeResize();
     }
 
-    if (['zoomLevel', 'availableWidth', 'viewport'].some(p => changedProperties.has(p))) {
+    if (['zoomLevel', 'availableWidth', 'viewport'].some(p => changedProperties.has(p as keyof WaViewportDemo))) {
       this.updateZoom();
     }