Refactor: mark query and handler properties as readonly

src/components/boolean-input/boolean-input.element.ts

@@ -95,7 +95,7 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
   readonly = false;
 
   @query('#input')
-  protected _input!: HTMLInputElement;
+  protected readonly _input!: HTMLInputElement;
 
   private inputRole: 'checkbox' | 'switch';
 

src/components/breadcrumbs/breadcrumbs.element.ts

@@ -14,7 +14,7 @@ export class UUIBreadcrumbsElement extends LitElement {
     flatten: true,
     selector: 'uui-breadcrumb-item, [uui-breadcrumb-item], [role=listitem]',
   })
-  private slotNodes!: HTMLElement[];
+  private readonly slotNodes!: HTMLElement[];
 
   private elementIsBreadcrumbItem(el: unknown): el is UUIBreadcrumbItemElement {
     return el instanceof UUIBreadcrumbItemElement;

src/components/button/button.element.ts

@@ -145,7 +145,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
   public title: string = '';
 
   @query('#button')
-  protected _button!: HTMLInputElement;
+  protected readonly _button!: HTMLInputElement;
 
   constructor() {
     super();

src/components/color-picker/color-picker.element.ts

@@ -74,9 +74,9 @@
  * @fires {UUIColorPickerChangeEvent} change - Fired when the color changes
  */
 export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
-  @query('[part="input"]') private _input!: UUIInputElement;
-  @query('.color-picker__preview') private _previewButton!: HTMLButtonElement;
-  @query('#swatches') private _swatches!: UUIColorSwatchesElement;
+  @query('[part="input"]') private readonly _input!: UUIInputElement;
+  @query('.color-picker__preview') private readonly _previewButton!: HTMLButtonElement;
+  @query('#swatches') private readonly _swatches!: UUIColorSwatchesElement;
 
   private _value: string = '';
 

src/components/combobox-list/combobox-list.element.ts

@@ -66,13 +66,13 @@ export class UUIComboboxListElement extends LitElement {
     flatten: true,
     selector: 'uui-combobox-list-option:not([disabled])',
   })
-  private _options!: UUIComboboxListOptionElement[];
+  private readonly _options!: UUIComboboxListOptionElement[];
 
   @queryAssignedElements({
     flatten: true,
     selector: 'uui-combobox-list-option[active]',
   })
-  private _activeOptions!: UUIComboboxListOptionElement[];
+  private readonly _activeOptions!: UUIComboboxListOptionElement[];
 
   @state()
   private _value: FormDataEntryValue | FormData = '';

src/components/combobox/combobox-async-example.ts

@@ -38,7 +38,7 @@
   @state()
   _filterValue: string = '';
 
-  private _fetchData = async (searchParam: string): Promise<Array<Fruit>> => {
+  private readonly _fetchData = async (searchParam: string): Promise<Array<Fruit>> => {
     this._loading = true;
     return await new Promise(res =>
       setTimeout(() => {
@@ -54,7 +54,7 @@
     );
   };
 
-  private _handleSearch = async (e: any) => {
+  private readonly _handleSearch = async (e: any) => {
     this._filterValue = e.target.search;
     const response = await this._fetchData(this._filterValue);
     this._options = [...response];

src/components/combobox/combobox-async-options-example.ts

@@ -41,7 +41,7 @@ export class UUIComboboxAsyncOptionsExampleElement extends LitElement {
     this._fetchData();
   }
 
-  private _fetchData = async () => {
+  private readonly _fetchData = async () => {
     const response = await getFruits();
     this._options = [...response];
   };

src/components/combobox/combobox.element.ts

@@ -133,16 +133,16 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
   placeholder = '';
 
   @query('#combobox-input')
-  private _input!: HTMLInputElement;
+  private readonly _input!: HTMLInputElement;
 
   @query('#combobox-popover')
-  private _comboboxPopoverElement?: UUIPopoverContainerElement;
+  private readonly _comboboxPopoverElement?: UUIPopoverContainerElement;
 
   @queryAssignedElements({
     flatten: true,
     selector: 'uui-combobox-list',
   })
-  private _comboboxListElements?: UUIComboboxListElement[];
+  private readonly _comboboxListElements?: UUIComboboxListElement[];
 
   #comboboxList!: UUIComboboxListElement;
   #phoneMediaQuery!: MediaQueryList;

src/components/file-dropzone/file-dropzone.element.ts

@@ -20,10 +20,10 @@ export interface UUIFileFolder {
  */
 export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
   @query('#input')
-  private _input!: HTMLInputElement;
+  private readonly _input!: HTMLInputElement;
 
   @query('#dropzone')
-  private _dropzone!: HTMLElement;
+  private readonly _dropzone!: HTMLElement;
 
   private _acceptedFileExtensions: string[] = [];
   private _acceptedMimeTypes: string[] = [];

src/components/icon-registry/UUIIconRegistry.ts

@@ -27,7 +27,7 @@ export class UUIIconRegistry {
     );
   }
 
-  private _onIconRequest = (event: UUIIconRequestEvent) => {
+  private readonly _onIconRequest = (event: UUIIconRequestEvent) => {
     const icon = this.getIcon(event.detail.iconName);
     if (icon !== null) {
       event.acceptRequest(icon);

src/components/input-file/input-file.element.ts

@@ -19,10 +19,10 @@ import '../file-dropzone/file-dropzone.js';
  */
 export class UUIInputFileElement extends UUIFormControlMixin(LitElement) {
   @query('#dropzone')
-  private _dropzone!: UUIFileDropzoneElement;
+  private readonly _dropzone!: UUIFileDropzoneElement;
 
   @query('#dropzone')
-  private _dropZone: UUIFileDropzoneElement | undefined;
+  private readonly _dropZone: UUIFileDropzoneElement | undefined;
 
   /**
    * Accepted filetypes. Will allow all types if empty.

src/components/input/input.element.ts

@@ -222,7 +222,7 @@ export class UUIInputElement extends UUIFormControlMixin(
   tabIndex: number = 0;
 
   @query('#input')
-  _input!: HTMLInputElement;
+  readonly _input!: HTMLInputElement;
 
   private _type: InputType = 'text';
 

src/components/modal/modal.element.ts

@@ -7,7 +7,7 @@ export const UUIModalCloseEndEvent = 'uui:modal-close-end';
 
 export class UUIModalElement extends LitElement {
   @query('dialog')
-  protected _dialogElement?: HTMLDialogElement;
+  protected readonly _dialogElement?: HTMLDialogElement;
 
   @property({ type: Boolean, reflect: true, attribute: 'is-open' })
   isOpen = false;

src/components/pagination/pagination.element.ts

@@ -103,10 +103,10 @@ export class UUIPaginationElement extends LitElement {
   }
 
   @queryAll('uui-button.nav')
-  private _navButtons!: Array<UUIButtonElement>;
+  private readonly _navButtons!: Array<UUIButtonElement>;
 
   @query('#pages')
-  private _pagesGroup!: any;
+  private readonly _pagesGroup!: any;
 
   /**
    * This property is used to generate a proper `aria-label`. It will be announced by screen reader as: "<<this.label>>. Current page: <<this.current>>"

src/components/radio/radio.element.ts

@@ -16,7 +16,7 @@ import { UUIRadioEvent } from './UUIRadioEvent.js';
  */
 export class UUIRadioElement extends LitElement {
   @query('#input')
-  private _inputElement!: HTMLInputElement;
+  private readonly _inputElement!: HTMLInputElement;
 
   /**
    * This is a name property of the `<uui-radio>` component. It reflects the behaviour of the native `<input />` element and its name attribute.

src/components/range-slider/range-slider.element.ts

@@ -283,19 +283,19 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
   /** Elements */
 
   @query('#range-slider')
-  private _outerTrack!: HTMLElement;
+  private readonly _outerTrack!: HTMLElement;
 
   @query('#inputLow')
-  private _inputLow!: HTMLInputElement;
+  private readonly _inputLow!: HTMLInputElement;
 
   @query('#inputHigh')
-  private _inputHigh!: HTMLInputElement;
+  private readonly _inputHigh!: HTMLInputElement;
 
   @query('.color')
-  private _innerColor!: HTMLElement;
+  private readonly _innerColor!: HTMLElement;
 
   @query('#inner-color-thumb')
-  private _innerColorThumb!: HTMLElement;
+  private readonly _innerColorThumb!: HTMLElement;
 
   /** Constructor and Validator */
 

src/components/ref-node/ref-node.element.ts

@@ -64,7 +64,7 @@ export class UUIRefNodeElement extends UUIRefElement {
   public rel?: string;
 
   @query('#open-part')
-  protected _openPart?: HTMLInputElement;
+  protected readonly _openPart?: HTMLInputElement;
 
   @state()
   private _iconSlotHasContent = false;

src/components/responsive-container/responsive-container.element.ts

@@ -18,13 +18,13 @@ import '../symbol-more/symbol-more.js';
 export class UUIResponsiveContainerElement extends LitElement {
   // These help us find elements inside the component
   @query('#more-button')
-  private _moreButtonElement!: UUIButtonElement;
+  private readonly _moreButtonElement!: UUIButtonElement;
 
   @query('#popover-container')
-  private _popoverContainerElement!: UUIPopoverContainerElement;
+  private readonly _popoverContainerElement!: UUIPopoverContainerElement;
 
   @query('#main')
-  private _mainElement!: HTMLElement;
+  private readonly _mainElement!: HTMLElement;
 
   /**
    * Controls which side items collapse from.
@@ -38,7 +38,7 @@ export class UUIResponsiveContainerElement extends LitElement {
 
   // This gets all elements put inside the slot
   @queryAssignedElements({ flatten: true })
-  private _slottedNodes?: HTMLElement[];
+  private readonly _slottedNodes?: HTMLElement[];
 
   // These store the component's internal state
   #childElements: HTMLElement[] = []; // All child elements

src/components/select/select.element.ts

@@ -107,7 +107,7 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
   private _values: string[] = [];
 
   @query('#native')
-  protected _input!: HTMLSelectElement;
+  protected readonly _input!: HTMLSelectElement;
 
   constructor() {
     super();

src/components/slider/slider.element.ts

@@ -145,10 +145,10 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
   public label!: string;
 
   @query('#input')
-  private _input!: HTMLInputElement;
+  private readonly _input!: HTMLInputElement;
 
   @query('#track')
-  private _track!: HTMLElement;
+  private readonly _track!: HTMLElement;
 
   constructor() {
     super();
@@ -224,7 +224,7 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
     );
   }
 
-  private onWindowResize = () => {
+  private readonly onWindowResize = () => {
     this._stepWidth = this._calculateStepWidth();
   };
 

src/components/table/table-row.element.ts

@@ -27,7 +27,7 @@ export class UUITableRowElement extends SelectOnlyMixin(
     flatten: true,
     selector: 'uui-table-cell, [uui-table-cell], [role=cell]',
   })
-  private slotCellNodes?: unknown[];
+  private readonly slotCellNodes?: unknown[];
 
   protected updated(changedProperties: Map<string | number | symbol, unknown>) {
     if (changedProperties.has('selectOnly')) {

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

@@ -21,18 +21,18 @@ import '../popover-container/popover-container.js';
  */
 export class UUITabGroupElement extends LitElement {
   @query('#more-button')
-  private _moreButtonElement!: UUIButtonElement;
+  private readonly _moreButtonElement!: UUIButtonElement;
 
   @query('#popover-container')
-  private _popoverContainerElement!: UUIPopoverContainerElement;
+  private readonly _popoverContainerElement!: UUIPopoverContainerElement;
 
-  @query('#main') private _mainElement!: HTMLElement;
+  @query('#main') private readonly _mainElement!: HTMLElement;
 
   @queryAssignedElements({
     flatten: true,
     selector: 'uui-tab, [uui-tab], [role=tab]',
   })
-  private _slottedNodes?: HTMLElement[];
+  private readonly _slottedNodes?: HTMLElement[];
 
   /** Stores the current gap used in the breakpoints */
   #currentGap = 0;

src/components/textarea/textarea.element.ts

@@ -106,7 +106,7 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
   ) => `Maximum ${max} characters, ${current - max} too many.`;
 
   @query('#textarea')
-  protected _textarea!: HTMLInputElement;
+  protected readonly _textarea!: HTMLInputElement;
 
   /**
    * Enables automatic height adjustment. The height will be confined within the min and max height if defined.

src/components/toast-notification-container/toast-notification-container.element.ts

@@ -78,13 +78,13 @@ export class UUIToastNotificationContainerElement extends LitElement {
     _modal.open = false;
   }
 
-  private onToastClosed = (e: UUIToastNotificationEvent) => {
+  private readonly onToastClosed = (e: UUIToastNotificationEvent) => {
     this.removeToast(e.target);
   };
 
   private _toasts: UUIToastNotificationElement[] = [];
 
-  private onSlotChanged = (event: any) => {
+  private readonly onSlotChanged = (event: any) => {
     const existingModals = [...this._toasts];
 
     this._toasts = event.target

src/components/toast-notification/toast-notification.element.ts

@@ -91,7 +91,7 @@ export class UUIToastNotificationElement extends LitElement {
   };
 
   @query('#toast')
-  private _toastEl!: HTMLElement;
+  private readonly _toastEl!: HTMLElement;
   private _timer: UUITimer | null = null;
   private _pauseTimer: boolean = false;