refactor: clean up reactive property definitions

src/components/CheckboxElement.ts

@@ -27,7 +27,7 @@ export default class CheckboxElement extends (LitElement as TypedLitElement<Chec
             margin-right: 4px;
             aspect-ratio: 1;
         }
-        .input-radio[active] {
+        :host([checked]) .input-radio {
             border-color: var(--link-color);
             background: var(--link-color);
         }
@@ -36,23 +36,22 @@ export default class CheckboxElement extends (LitElement as TypedLitElement<Chec
             transform: scale(1.2);
             fill: #FFFFFF;
         }
-        .input-radio:not([active]) svg {
+        :host(:not([checked])) .input-radio svg {
             display: none;
         }
     `;
 
     @property()
     label: string = "";
 
-    @property()
+    @property({ type: Boolean, reflect: true })
     checked: boolean = false;
 
     protected render(): unknown {
         return html`
             <div
                     class="input-radio"
-                    @click=${() => this.setValue(!this.checked)}
-                    ?active=${this.checked}>
+                    @click=${() => this.setValue(!this.checked)}>
                 <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M389-227 154-461l91-92 144 145 327-326 91 90-418 417Z"/></svg>
             </div>
             <span

src/components/ExerciseSelector.ts

@@ -1,4 +1,4 @@
-import { customElement, property } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
 import { css, html, LitElement } from "lit";
 import ExerciseOption from "../models/ExerciseOption";
 import ExerciseSelectorPopup from "./ExerciseSelectorPopup";
@@ -68,8 +68,14 @@ export default class ExerciseSelector extends (LitElement as TypedLitElement<Exe
 
     readonly popupInstance: ExerciseSelectorPopup;
 
-    @property()
-    savedOption: ExerciseOption | null = null;
+    private _savedOption: ExerciseOption | null = null;
+    @state()
+    private set savedOption(value: ExerciseOption | null) {
+        this._savedOption = value;
+    }
+    get savedOption(): ExerciseOption | null {
+        return this._savedOption;
+    }
 
     connectErrorListener!: () => void;
     disconnectErrorListener!: () => void;

src/components/ExerciseSelectorFilterGroup.ts

@@ -76,7 +76,7 @@ export default class ExerciseSelectorFilterGroup extends (LitElement as TypedLit
     @property()
     id: string = "";
 
-    @property()
+    @property({ reflect: true })
     name: string = "";
 
     @property({ type: Boolean, reflect: true })

src/components/ExerciseSelectorFilterOther.ts

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, query, state } from "lit/decorators.js";
 import { RadioGroup } from "../models/RadioGroup";
 import RadioGroupElement from "./RadioGroupElement";
 import { TypedLitElement } from "../models/TypedEventTarget";
@@ -43,8 +43,8 @@ export default class ExerciseSelectorFilterOther extends (LitElement as TypedLit
     private bodyweightFilter: boolean | null = null;
     private favoritesFilter: boolean = false;
 
-    @property()
-    hasActiveFilters: boolean = false;
+    @state()
+    private hasActiveFilters: boolean = false;
 
     @query("#bodyweight-radio-group") bodyweightRadioGroup!: RadioGroupElement<boolean | null>;
     @query("#favorites-radio-group") favoritesRadioGroup!: RadioGroupElement<boolean>;

src/components/ExerciseSelectorFilterPreview.ts

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { ExerciseMuscleGroups } from "../interceptors/ExerciseResponseInterceptor";
 
 @customElement(ExerciseSelectorFilterPreview.NAME)
@@ -77,14 +77,14 @@ export default class ExerciseSelectorFilterPreview extends LitElement {
         }
     `;
 
-    @property()
+    @property({ reflect: true })
     overlayTitle: string = "";
 
     @property({ type: Object })
     muscleMap: ExerciseMuscleGroups | null = null;
 
-    @property({ type: Boolean })
-    isOverlayActive: boolean = false;
+    @state()
+    private isOverlayActive: boolean = false;
 
     protected render(): unknown {
         return html`

src/components/ExerciseSelectorOption.ts

@@ -46,8 +46,14 @@ export default class ExerciseSelectorOption extends (LitElement as TypedLitEleme
 
     private readonly option: ExerciseOption;
 
-    @property({ type: String, attribute: "data-value", reflect: true })
-    value: string;
+    @property({ attribute: "data-label", reflect: true })
+    readonly label: string;
+
+    @property({ attribute: "data-category-value", reflect: true })
+    readonly categoryValue: string;
+
+    @property({ attribute: "data-value", reflect: true })
+    readonly rawValue: string;
 
     @property()
     underlinedValue: string | null = null;
@@ -67,12 +73,15 @@ export default class ExerciseSelectorOption extends (LitElement as TypedLitEleme
         const favoritesService = FavoritesService.INSTANCE;
         this.option = option;
 
-        this.value = option.text;
+        this.label = option.text;
+        this.categoryValue = option.categoryValue;
+        this.rawValue = option.value;
         this.favorited = favoritesService.hasFavorite(option.categoryValue, option.value);
 
         this.addEventListener("mouseover", () => this.dispatchEvent(new CustomEvent(ExerciseSelectorOption.EVENT_MOUSE_OVER, { detail: { option: this.option } })));
         this.addEventListener("click", (e) => this.onClick(e));
     }
+
     connectedCallback() {
         super.connectedCallback();
 
@@ -92,7 +101,7 @@ export default class ExerciseSelectorOption extends (LitElement as TypedLitEleme
         return html`
             <div class="container">
                 <span>
-                    ${unsafeHTML(this.underlinedValue || this.value)}
+                    ${unsafeHTML(this.underlinedValue || this.label)}
                 </span>
                 <div class="favorite" @click=${(event: MouseEvent) => this.onFavoriteToggle(event)}>${unsafeHTML(this.favorited ? "&#9733;" : "&#9734;")}</div>
             </div>

src/components/ExerciseSelectorPopup.ts

@@ -6,7 +6,7 @@ import ExerciseSelectorOption, {
 } from "./ExerciseSelectorOption";
 import MuscleGroupFilter from "./MuscleGroupFilter";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, query, state } from "lit/decorators.js";
 import SearchHelper from "../helpers/SearchHelper";
 import ExerciseSelector from "./ExerciseSelector";
 import { ApplyMode } from "./ExerciseSelectorFilterApplies";
@@ -124,10 +124,17 @@ export default class ExerciseSelectorPopup extends LitElement {
         }
     `;
 
-    host: ExerciseSelector | null = null;
-    @property()
-    suggestedGroup: ExerciseGroup | null = null;
-    allOptions: ReadonlyArray<ExerciseOption> = [];
+    private host: ExerciseSelector | null = null;
+    @state()
+    private suggestedGroup: ExerciseGroup | null = null;
+
+    private _allOptions: ReadonlyArray<ExerciseOption> = [];
+    get allOptions(): ReadonlyArray<ExerciseOption> {
+        return this._allOptions;
+    }
+    private set allOptions(value: ReadonlyArray<ExerciseOption>) {
+        this._allOptions = value;
+    }
 
     readonly options: ReadonlyArray<ExerciseOption>;
     readonly groups: ReadonlyArray<ExerciseGroup> = [];
@@ -137,15 +144,15 @@ export default class ExerciseSelectorPopup extends LitElement {
         return this.filterMuscleGroups.activeFilters;
     }
 
-    applyMode: ApplyMode = "single";
-    bodyweightFilter: boolean | null = null;
-    favoritesFilter: boolean = false;
+    private applyMode: ApplyMode = "single";
+    private bodyweightFilter: boolean | null = null;
+    private favoritesFilter: boolean = false;
 
-    @property()
-    selectedOption: ExerciseOption | null = null;
+    @state()
+    private selectedOption: ExerciseOption | null = null;
 
-    @property()
-    optionsEmpty: boolean = false;
+    @state()
+    private optionsEmpty: boolean = false;
 
     @query(".pseudo-select") pseudoSelectElem!: HTMLDivElement;
     @query("input") inputElem!: HTMLInputElement;

src/components/GenericSnackbar.ts

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
 import { TypedLitElement } from "../models/TypedEventTarget";
 
 @customElement(GenericSnackbar.NAME)
@@ -88,8 +88,8 @@ export default class GenericSnackbar extends (LitElement as TypedLitElement<Gene
         }
     `;
 
-    @property()
-    isRemoving: boolean = false;
+    @state()
+    private isRemoving: boolean = false;
 
     constructor(
         private readonly label: string,

src/components/MuscleGroupFilter.ts

@@ -20,7 +20,7 @@ export default class MuscleGroupFilter extends (LitElement as TypedLitElement<Mu
             flex-direction: row;
             align-items: center;
         }
-        :host(:not([active="true"])) .refined-container,
+        :host(:not([active])) .refined-container,
         :host([value="4"]) .exclude-button {
             display: none;
         }
@@ -53,16 +53,19 @@ export default class MuscleGroupFilter extends (LitElement as TypedLitElement<Mu
         }
     `;
 
-    @property({ attribute: "value", reflect: true })
     private _value: MuscleGroupFilterValue = MuscleGroupFilterValue.INACTIVE;
+    @property({ reflect: true })
+    private set value(val: MuscleGroupFilterValue) {
+        this._value = val;
+    }
     get value(): MuscleGroupFilterValue {
         return this._value;
     }
 
-    @property()
+    @property({ reflect: true })
     muscleGroup: string = "";
 
-    @property({ reflect: true })
+    @property({ type: Boolean, reflect: true })
     active: boolean = false;
 
     @query(".input-container checkbox-elem") input!: CheckboxElement;
@@ -100,10 +103,10 @@ export default class MuscleGroupFilter extends (LitElement as TypedLitElement<Mu
             this.primaryInput.checked = true;
             this.secondaryInput.checked = true;
 
-            this._value = MuscleGroupFilterValue.ALL;
+            this.value = MuscleGroupFilterValue.ALL;
             this.dispatchEvent(new CustomEvent(MuscleGroupFilter.EVENT_ON_ACTIVE, { detail: this }));
         } else {
-            this._value = MuscleGroupFilterValue.INACTIVE;
+            this.value = MuscleGroupFilterValue.INACTIVE;
             this.dispatchEvent(new CustomEvent(MuscleGroupFilter.EVENT_ON_INACTIVE, { detail: this }));
         }
 
@@ -114,9 +117,9 @@ export default class MuscleGroupFilter extends (LitElement as TypedLitElement<Mu
 
     private onRefinedInput(skipUpdate: boolean = false) {
         if (!this.primaryInput.checked && !this.secondaryInput.checked) {
-            this._value = MuscleGroupFilterValue.EXCLUDE;
+            this.value = MuscleGroupFilterValue.EXCLUDE;
         } else {
-            this._value = (this.primaryInput.checked && this.secondaryInput.checked) ? MuscleGroupFilterValue.ALL : (this.primaryInput.checked ? MuscleGroupFilterValue.PRIMARY : MuscleGroupFilterValue.SECONDARY);
+            this.value = (this.primaryInput.checked && this.secondaryInput.checked) ? MuscleGroupFilterValue.ALL : (this.primaryInput.checked ? MuscleGroupFilterValue.PRIMARY : MuscleGroupFilterValue.SECONDARY);
         }
 
         if (!skipUpdate) {

src/components/MuscleGroupPreview.ts

@@ -1,4 +1,4 @@
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -121,15 +121,15 @@ export default class MuscleGroupPreview extends LitElement {
         }
     `;
 
-    @property({ type: Array })
+    @property({ type: Object })
     primaryMuscleGroups: Set<MuscleGroup> = new Set<MuscleGroup>();
-    @property({ type: Array })
+    @property({ type: Object })
     secondaryMuscleGroups: Set<MuscleGroup> = new Set<MuscleGroup>();
 
-    @property({ type: Boolean })
+    @property({ type: Boolean, reflect: true })
     legend: boolean = false;
 
-    @property()
+    @state()
     private muscleGroupClassMaps: Map<MuscleGroup, MuscleGroupClassMap> = new Map();
 
     constructor() {

src/components/RadioGroupElement.ts

@@ -1,4 +1,4 @@
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { RadioGroup } from "../models/RadioGroup";
 import { RadioGroupValue } from "../models/RadioGroupValue";
@@ -39,8 +39,8 @@ export default class RadioGroupElement<T> extends (LitElement as TypedLitElement
     @property({ type: Object })
     radioGroup: RadioGroup<T> | null = null;
 
-    @property()
-    checkedRadioGroupValue: RadioGroupValue<T> | null = null;
+    @state()
+    private checkedRadioGroupValue: RadioGroupValue<T> | null = null;
 
     protected render(): unknown {
         return this.radioGroup ? html`