refactor: use new listen and observes decorators

elements/pf-accordion/pf-accordion.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit';
-import { observed } from '@patternfly/pfe-core/decorators.js';
+import { listen, observes } from '@patternfly/pfe-core/decorators.js';
 import { property } from 'lit/decorators/property.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 
@@ -114,9 +114,6 @@ export class PfAccordion extends LitElement {
   @property({ type: Boolean, reflect: true }) bordered = false;
 
   /** Whether to apply the `large` style variant */
-  @observed(function largeChanged(this: PfAccordion) {
-    [...this.headers, ...this.panels].forEach(el => el.toggleAttribute('large', this.large));
-  })
   @property({ type: Boolean, reflect: true }) large = false;
 
   @property({ type: Boolean, reflect: true }) fixed = false;
@@ -183,7 +180,6 @@ export class PfAccordion extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener('change', this.#onChange as EventListener);
     this.#mo.observe(this, { childList: true });
     this.#init();
   }
@@ -221,6 +217,13 @@ export class PfAccordion extends LitElement {
     return c && results.every(Boolean);
   }
 
+  @observes('large')
+  protected largeChanged() {
+    for (const el of [...this.headers, ...this.panels]) {
+      el.toggleAttribute('large', this.large);
+    }
+  }
+
   /**
    * Initialize the accordion by connecting headers and panels
    * with aria controls and labels; set up the default disclosure
@@ -280,7 +283,8 @@ export class PfAccordion extends LitElement {
     panel.hidden = true;
   }
 
-  #onChange(event: PfAccordionHeaderChangeEvent) {
+  @listen('change')
+  protected onChange(event: PfAccordionHeaderChangeEvent) {
     if (event instanceof PfAccordionHeaderChangeEvent && event.accordion === this) {
       const index = this.#getIndex(event.target);
       if (event.expanded) {
@@ -358,8 +362,8 @@ export class PfAccordion extends LitElement {
     }
 
     // If the header and panel exist, open both
-    this.#expandHeader(header, index),
-    this.#expandPanel(panel),
+    this.#expandHeader(header, index);
+    this.#expandPanel(panel);
 
     header.focus();
 

elements/pf-jump-links/pf-jump-links-item.ts

@@ -8,7 +8,7 @@ import { InternalsController } from '@patternfly/pfe-core/controllers/internals-
 
 import style from './pf-jump-links-item.css';
 
-import { observed } from '@patternfly/pfe-core/decorators/observed.js';
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 
 /**
  * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link
@@ -28,29 +28,28 @@ export class PfJumpLinksItem extends LitElement {
   };
 
   /** Whether this item is active. */
-  @observed('activeChanged')
   @property({ type: Boolean, reflect: true }) active = false;
 
   /** hypertext reference for this link */
   @property({ reflect: true }) href?: string;
 
-  #internals = InternalsController.of(this, { role: 'listitem' });
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.activeChanged();
-  }
+  #internals = InternalsController.of(this, {
+    role: 'listitem',
+  });
 
   render() {
     return html`
-      <a href="${ifDefined(this.href)}" @focus="${this.#onFocus}" @click="${this.#onClick}">
+      <a href="${ifDefined(this.href)}"
+         @focus="${this.#onFocus}"
+         @click="${this.#onClick}">
         <slot></slot>
       </a>
       <slot name="subsection"></slot>
     `;
   }
 
-  private activeChanged() {
+  @observes('active')
+  protected activeChanged() {
     this.#internals.ariaCurrent = this.active ? 'location' : null;
   }
 

elements/pf-modal/pf-modal.ts

@@ -6,7 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { ComposedEvent } from '@patternfly/pfe-core';
-import { bound, initializer, observed } from '@patternfly/pfe-core/decorators.js';
+import { bound, initializer, observes } from '@patternfly/pfe-core/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
@@ -67,7 +67,7 @@ export class ModalOpenEvent extends ComposedEvent {
  */
 @customElement('pf-modal')
 export class PfModal extends LitElement implements HTMLDialogElement {
-  static override readonly shadowRootOptions = {
+  static override readonly shadowRootOptions: ShadowRootInit = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
   };
@@ -88,11 +88,9 @@ export class PfModal extends LitElement implements HTMLDialogElement {
    */
   @property({ reflect: true }) position?: 'top';
 
-  @observed
   @property({ type: Boolean, reflect: true }) open = false;
 
   /** Optional ID of the trigger element */
-  @observed
   @property() trigger?: string;
 
   /** @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue */
@@ -190,7 +188,8 @@ export class PfModal extends LitElement implements HTMLDialogElement {
     }
   }
 
-  protected async _openChanged(oldValue?: boolean, newValue?: boolean) {
+  @observes('open')
+  protected async openChanged(oldValue?: boolean, newValue?: boolean) {
     // loosening types to prevent running these effects in unexpected circumstances
     // eslint-disable-next-line eqeqeq
     if (oldValue == null || newValue == null || oldValue == newValue) {
@@ -216,7 +215,8 @@ export class PfModal extends LitElement implements HTMLDialogElement {
     }
   }
 
-  protected _triggerChanged() {
+  @observes('trigger')
+  protected triggerChanged() {
     if (this.trigger) {
       this.#triggerElement = (this.getRootNode() as Document | ShadowRoot)
           .getElementById(this.trigger);

elements/pf-tabs/pf-tab.ts

@@ -5,7 +5,7 @@ import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js
 import { classMap } from 'lit/directives/class-map.js';
 import { consume } from '@lit/context';
 
-import { observed } from '@patternfly/pfe-core/decorators.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
@@ -65,10 +65,8 @@ export class PfTab extends LitElement {
   @queryAssignedElements({ slot: 'icon', flatten: true })
   private icons!: HTMLElement[];
 
-  @observed
   @property({ reflect: true, type: Boolean }) active = false;
 
-  @observed
   @property({ reflect: true, type: Boolean }) disabled = false;
 
   @consume({ context, subscribe: true })
@@ -144,14 +142,16 @@ export class PfTab extends LitElement {
     return this.dispatchEvent(new TabExpandEvent(this));
   }
 
-  private _activeChanged(old: boolean) {
+  @observes('active')
+  protected activeChanged(old: boolean) {
     this.#internals.ariaSelected = String(!!this.active);
     if (this.active && !old) {
       this.#activate();
     }
   }
 
-  private _disabledChanged() {
+  @observes('disabled')
+  protected disabledChanged() {
     this.#internals.ariaDisabled = this.disabled ? 'true' : this.ariaDisabled ?? 'false';
   }
 }