chore: prepare decorators for standard decorators

elements/rh-accordion/rh-accordion-header.ts

@@ -49,14 +49,15 @@ const isAccordion = (x: EventTarget): x is RhAccordion =>
 export class RhAccordionHeader extends LitElement {
   static readonly styles = [styles];
 
-  @property({ type: Boolean, reflect: true }) expanded = false;
+  @property({ type: Boolean, reflect: true })
+  accessor expanded = false;
 
+  // @ts-expect-error: lit's types are wrong
   @consume({ context, subscribe: true })
-  @property({ attribute: false })
-  private ctx?: RhAccordionContext;
+  private accessor ctx: RhAccordionContext | undefined;
 
   @colorContextConsumer()
-  private on?: ColorTheme;
+  private accessor on: ColorTheme | undefined;
 
   #dir = new DirController(this);
 

elements/rh-accordion/rh-accordion-panel.ts

@@ -26,16 +26,20 @@ export class RhAccordionPanel extends LitElement {
 
   static readonly styles = [styles];
 
-  @property({ type: Boolean, reflect: true }) expanded = false;
+  @property({ type: Boolean, reflect: true })
+  accessor expanded = false;
 
   @colorContextProvider()
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
+  @property({ reflect: true, attribute: 'color-palette' })
+  accessor colorPalette: ColorPalette | undefined;
 
-  @colorContextConsumer() private on?: ColorTheme;
+  @colorContextConsumer()
+  private accessor on: ColorTheme | undefined;
 
+  // @ts-expect-error: lit's types are wrong
   @consume({ context, subscribe: true })
   @property({ attribute: false })
-  private ctx?: RhAccordionContext;
+  private accessor ctx: RhAccordionContext | undefined;
 
   connectedCallback() {
     super.connectedCallback();

elements/rh-accordion/rh-accordion.ts

@@ -68,26 +68,31 @@ export class RhAccordion extends LitElement {
   /**
    * Sets accordion header's accents position to inline or bottom
    */
-  @property({ attribute: true, reflect: true }) accents?: 'inline' | 'bottom';
+  @property({ attribute: true, reflect: true })
+  accessor accents: 'inline' | 'bottom' | undefined;
 
   /**
    * If this accordion uses large styles
    */
-  @property({ reflect: true, type: Boolean }) large = false;
+  @property({ reflect: true, type: Boolean })
+  accessor large = false;
 
   /**
    * If this accordion has a border
    */
-  @property({ reflect: true, type: Boolean }) bordered = true;
+  @property({ reflect: true, type: Boolean })
+  accessor bordered = true;
 
   /**
    * Color Palette for this accordion.
    * @see https://ux.redhat.com/theming/color-palettes/
    */
   @colorContextProvider()
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
+  @property({ reflect: true, attribute: 'color-palette' })
+  accessor colorPalette: ColorPalette | undefined;
 
-  @colorContextConsumer() private on?: ColorTheme;
+  @colorContextConsumer()
+  private accessor on: ColorTheme | undefined;
 
   /**
    * Sets and reflects the currently expanded accordion 0-based indexes.
@@ -105,10 +110,6 @@ export class RhAccordion extends LitElement {
       return JSON.stringify(old) !== JSON.stringify(value);
     },
   })
-  get expandedIndex() {
-    return this.#expandedIndex;
-  }
-
   set expandedIndex(value) {
     this.#expandedIndex = value;
     this.#expanded = !!this.#expandedIndex.length;
@@ -123,6 +124,10 @@ export class RhAccordion extends LitElement {
     });
   }
 
+  get expandedIndex() {
+    return this.#expandedIndex;
+  }
+
   /** All headers for this accordion */
   get headers() {
     return this.#allHeaders();
@@ -143,7 +148,9 @@ export class RhAccordion extends LitElement {
 
   #mo = new MutationObserver(() => this.updateAccessibility());
 
-  @provide({ context }) private ctx = this.#makeContext();
+  // @ts-expect-error: lit's types are wrong
+  @provide({ context })
+  private accessor ctx = this.#makeContext();
 
   connectedCallback() {
     super.connectedCallback();

elements/rh-alert/rh-alert.ts

@@ -149,7 +149,7 @@ export class RhAlert extends LitElement {
    *  - `success` - Indicates a success state, like if a process was completed without errors.
    */
   @property({ reflect: true })
-  state:
+  accessor state:
     | 'danger'
     | 'warning'
     | 'caution'
@@ -169,15 +169,17 @@ export class RhAlert extends LitElement {
    * update, or confirmation, like the result of a user action that cannot
    * be presented within a specific layout or component.
    */
-  @property({ reflect: true }) variant?: 'alternate' | 'toast' | 'inline';
+  @property({ reflect: true })
+  accessor variant: 'alternate' | 'toast' | 'inline' | undefined;
 
   /**
    * Alert variants have different rules regarding their ability to be dismissed by a user.
    * Default, Info, and Success Inline alerts can be dismissed by a user selecting the close button.
    * Warning and Danger Inline alerts can be dismissed by a user resolving the issues caused by the alert.
    * All Toast alerts can be dismissed by a user selecting the close button or waiting for them to time out.
    */
-  @property({ reflect: true, type: Boolean }) dismissable = false;
+  @property({ reflect: true, type: Boolean })
+  accessor dismissable = false;
 
   #slots = new SlotController(this, 'header', null, 'actions');
 

elements/rh-audio-player/rh-audio-player-about.ts

@@ -25,15 +25,19 @@ export class RhAudioPlayerAbout extends LitElement {
   static readonly styles = [panelStyles, styles];
 
   /** Default label content */
-  @property() label?: string;
+  @property()
+  accessor label: string | undefined;
 
   /** Series this track belongs to, if applicable */
-  @property({ attribute: 'series' }) mediaseries?: string;
+  @property({ attribute: 'series' })
+  accessor mediaseries: string | undefined;
 
   /** Title of audio track */
-  @property({ attribute: 'mediatitle' }) mediatitle?: string;
+  @property({ attribute: 'mediatitle' })
+  accessor mediatitle: string | undefined;
 
-  @queryAssignedElements() private content?: HTMLElement[];
+  @queryAssignedElements()
+  private accessor content: HTMLElement[] | undefined;
 
   #headings = new HeadingLevelContextConsumer(this);
 

elements/rh-audio-player/rh-audio-player-rate-stepper.ts

@@ -25,13 +25,16 @@ export class RhAudioPlayerRateStepper extends LitElement {
   private static pbrFixed = 2;
 
   /** Playback rate */
-  @property({ reflect: true, type: Number, attribute: 'playback-rate' }) playbackRate = 1;
+  @property({ reflect: true, type: Number, attribute: 'playback-rate' })
+  accessor playbackRate = 1;
 
   /** Playback rate */
-  @property({ reflect: true, type: Boolean }) disabled = false;
+  @property({ reflect: true, type: Boolean })
+  accessor disabled = false;
 
   /** Playback rate */
-  @property() label?: string;
+  @property()
+  accessor label: string | undefined;
 
   #dir = new DirController(this);
 

elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts

@@ -16,7 +16,8 @@ import styles from './rh-audio-player-scrolling-text-overflow.css';
 export class RhAudioPlayerScrollingTextOverflow extends LitElement {
   static readonly styles = [styles];
 
-  @colorContextConsumer() private on?: ColorTheme;
+  @colorContextConsumer()
+  private accessor on: ColorTheme | undefined;
 
   #scrolling = false;
 

elements/rh-audio-player/rh-audio-player-subscribe.ts

@@ -24,11 +24,14 @@ import styles from './rh-audio-player-subscribe.css';
 export class RhAudioPlayerSubscribe extends LitElement {
   static readonly styles = [panelStyles, styles];
 
-  @property() heading?: string;
+  @property()
+  accessor heading: string | undefined;
 
-  @property() label?: string;
+  @property()
+  accessor label: string | undefined;
 
-  @queryAssignedElements({ slot: '' }) private body?: HTMLElement[];
+  @queryAssignedElements({ slot: '' })
+  private accessor body: HTMLElement[] | undefined;
 
   #headings = new HeadingLevelContextConsumer(this);
 

elements/rh-audio-player/rh-audio-player.ts

@@ -84,10 +84,12 @@ export class RhAudioPlayer extends LitElement {
   };
 
   /**  Audio's series name, e.g. Podcast series. */
-  @property({ reflect: true }) mediaseries?: string;
+  @property({ reflect: true })
+  accessor mediaseries: string | undefined;
 
   /**  Audio's title, e.g. Podcast episode title. */
-  @property({ reflect: true }) mediatitle?: string;
+  @property({ reflect: true })
+  accessor mediatitle: string | undefined;
 
   /**
    * Layout:
@@ -96,43 +98,52 @@ export class RhAudioPlayer extends LitElement {
    *   - `compact-wide`: like compact but full width
    *   - `full`: maximal controls and artwork
    */
-  @property({ reflect: true }) layout: 'mini' | 'compact' | 'compact-wide' | 'full' = 'mini';
+  @property({ reflect: true })
+  accessor layout: 'mini' | 'compact' | 'compact-wide' | 'full' = 'mini';
 
   /** URL to audio's artwork */
-  @property({ reflect: true }) poster?: string;
+  @property({ reflect: true })
+  accessor poster: string | undefined;
 
   /** Playback volume */
-  @property({ reflect: true, type: Number }) volume = 0.5;
+  @property({ reflect: true, type: Number })
+  accessor volume = 0.5;
 
   /** Playback rate */
-  @property({ reflect: true, type: Number }) playbackRate = 1;
+  @property({ reflect: true, type: Number })
+  accessor playbackRate = 1;
 
-  @property({ reflect: true, type: Boolean }) expanded = false;
+  @property({ reflect: true, type: Boolean })
+  accessor expanded = false;
 
-  @property({ reflect: true }) lang!: string;
+  @property({ reflect: true })
+  accessor lang!: string;
 
-  @property({ attribute: false }) microcopy = {};
+  @property({ attribute: false })
+  accessor microcopy = {};
 
   /** Element's color palette */
   @colorContextProvider()
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
+  @property({ reflect: true, attribute: 'color-palette' })
+  accessor colorPalette: ColorPalette | undefined;
 
-  @colorContextConsumer() private on?: ColorTheme;
+  @colorContextConsumer()
+  private accessor on: ColorTheme | undefined;
 
   @queryAssignedElements({ slot: 'series' })
-  private _mediaseries?: HTMLElement[];
+  private accessor _mediaseries: HTMLElement[] | undefined;
 
   @queryAssignedElements({ slot: 'title' })
-  private _mediatitle?: HTMLElement[];
+  private accessor _mediatitle: HTMLElement[] | undefined;
 
   @queryAssignedElements({ slot: 'transcript', selector: 'rh-transcript' })
-  private _transcripts?: RhTranscript[];
+  private accessor _transcripts: RhTranscript[] | undefined;
 
   @queryAssignedElements({ slot: 'about', selector: 'rh-audio-player-about' })
-  private _abouts?: RhAudioPlayerAbout[];
+  private accessor _abouts: RhAudioPlayerAbout[] | undefined;
 
   @queryAssignedElements({ slot: 'subscribe', selector: 'rh-audio-player-subscribe' })
-  private _subscribe?: RhAudioPlayerSubscribe[];
+  private accessor _subscribe: RhAudioPlayerSubscribe[] | undefined;
 
   get #duration() {
     return this.#mediaElement?.duration ?? 0;

elements/rh-audio-player/rh-cue.ts

@@ -65,19 +65,24 @@ export class RhCue extends LitElement {
   static readonly styles = [styles];
 
   /** Start time, in mm:ss.ms */
-  @property() start?: string;
+  @property()
+  accessor start: string | undefined;
 
   /** End time, in mm:ss.ms */
-  @property() end?: string;
+  @property()
+  accessor end: string | undefined;
 
   /** Text of this cue. Overridden by `text` slot */
-  @property() text?: string;
+  @property()
+  accessor text: string | undefined;
 
   /** Name of voice speaking this text. Overridden by `voice` slot */
-  @property({ reflect: true }) voice?: string;
+  @property({ reflect: true })
+  accessor voice: string | undefined;
 
   /** Whether this cue is active right now */
-  @property({ type: Boolean, reflect: true }) active = false;
+  @property({ type: Boolean, reflect: true })
+  accessor active = false;
 
   #headings = new HeadingLevelContextConsumer(this);
 

elements/rh-audio-player/rh-transcript.ts

@@ -29,17 +29,23 @@ import '@rhds/elements/rh-icon/rh-icon.js';
 export class RhTranscript extends LitElement {
   static readonly styles = [buttonStyles, panelStyles, styles];
 
-  @property() heading?: string;
+  @property()
+  accessor heading: string | undefined;
 
-  @property() label?: string;
+  @property()
+  accessor label: string | undefined;
 
-  @property({ reflect: true }) lang!: string;
+  @property({ reflect: true })
+  accessor lang!: string;
 
-  @state() private _label!: string;
+  @state()
+  private accessor _label!: string;
 
-  @state() private _autoscroll!: string;
+  @state()
+  private accessor _autoscroll!: string;
 
-  @state() private _download!: string;
+  @state()
+  private accessor _download!: string;
 
   @queryAssignedElements({ selector: 'rh-cue' })
   private _cues!: RhCue[];