refactor: use typed PropertyValues and always call super method of wi…

…llChange (#2642)

src/components/accordion/accordion.ts

@@ -91,6 +91,8 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('size')) {
       this._expansionPanels.forEach((panel: SbbExpansionPanelElement) => (panel.size = this.size));
     }

src/components/action-group/action-group.ts

@@ -61,6 +61,8 @@ export class SbbActionGroupElement extends LitElement {
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('buttonSize')) {
       this._syncButtons();
     }

src/components/autocomplete/autocomplete.ts

@@ -244,6 +244,7 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
+
     if (changedProperties.has('origin')) {
       this._resetOriginClickListener(this.origin, changedProperties.get('origin'));
     }
@@ -255,7 +256,7 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L
     }
   }
 
-  protected override firstUpdated(changedProperties: PropertyValues): void {
+  protected override firstUpdated(changedProperties: PropertyValues<this>): void {
     super.firstUpdated(changedProperties);
     this._componentSetup();
     this._didLoad = true;

src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts

@@ -3,7 +3,6 @@ import {
   html,
   nothing,
   LitElement,
-  type PropertyValueMap,
   type PropertyValues,
   type TemplateResult,
 } from 'lit';
@@ -79,7 +78,7 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
     this.addEventListener('keydown', (e) => this._handleKeyDown(e), { signal });
   }
 
-  protected override firstUpdated(changedProperties: PropertyValues): void {
+  protected override firstUpdated(changedProperties: PropertyValues<this>): void {
     super.firstUpdated(changedProperties);
     this._resizeObserver.observe(this);
     this.toggleAttribute('data-loaded', true);
@@ -90,14 +89,15 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
     this._resizeObserver.disconnect();
   }
 
-  protected override willUpdate(changedProperties: PropertyValueMap<WithListChildren<this>>): void {
+  protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
     super.willUpdate(changedProperties);
+
     if (changedProperties.has('listChildren')) {
       this._syncBreadcrumbs();
     }
   }
 
-  protected override updated(changedProperties: PropertyValueMap<WithListChildren<this>>): void {
+  protected override updated(changedProperties: PropertyValues<WithListChildren<this>>): void {
     super.updated(changedProperties);
     if (changedProperties.has('listChildren')) {
       Promise.resolve().then(() => this._evaluateCollapsedState());

src/components/calendar/calendar.ts

@@ -251,6 +251,8 @@ export class SbbCalendarElement<T = Date> extends LitElement {
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (!this._initialized) {
       return;
     }

src/components/checkbox/checkbox-group/checkbox-group.ts

@@ -56,6 +56,8 @@ export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) {
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('disabled')) {
       this.checkboxes.forEach((c) => c.requestUpdate?.('disabled'));
     }

src/components/core/mixins/hydration-mixin.ts

@@ -107,14 +107,15 @@ export const SbbHydrationMixin = <T extends AbstractConstructor<LitElement>>(
       return super.createRenderRoot();
     }
 
-    protected override willUpdate(changedProperties: PropertyValues): void {
+    protected override willUpdate(changedProperties: PropertyValues<this>): void {
       super.willUpdate(changedProperties);
+
       if (isServer) {
         this.recoverSsrState?.();
       }
     }
 
-    protected override update(changedProperties: PropertyValues): void {
+    protected override update(changedProperties: PropertyValues<this>): void {
       // When hydration is needed, we wait the hydration process to finish, which is patched
       // into the update method of the LitElement base class.
       super.update(changedProperties);

src/components/core/mixins/named-slot-list-mixin.ts

@@ -16,7 +16,7 @@ const SLOTNAME_PREFIX = 'li';
  * Allows the usage of the string literal 'listChildren'.
  *
  * @example
- * protected override willUpdate(changedProperties: PropertyValueMap<WithListChildren<this>>): void {
+ * protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
  *   if (changedProperties.has('listChildren')) {
  *     ...
  *   }

src/components/core/mixins/required-mixin.ts

@@ -34,6 +34,7 @@ export const SbbRequiredMixin = <
 
     protected override async willUpdate(changedProperties: PropertyValues<this>): Promise<void> {
       super.willUpdate(changedProperties);
+
       if (changedProperties.has('required')) {
         // Firefox needs explicitly set aria-required value.
         this.internals.ariaRequired = `${this.required}`;

src/components/datepicker/common/datepicker-button.ts

@@ -54,6 +54,8 @@ export abstract class SbbDatepickerButton extends SbbNegativeMixin(SbbButtonBase
   }
 
   public override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('datePicker')) {
       this._init(this.datePicker);
     }

src/components/datepicker/datepicker-toggle/datepicker-toggle.ts

@@ -73,6 +73,8 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) {
   }
 
   public override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('datePicker')) {
       this._init(this.datePicker);
     }

src/components/datepicker/datepicker/datepicker.ts

@@ -361,6 +361,8 @@ export class SbbDatepickerElement extends LitElement {
   }
 
   public override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('input')) {
       this._findInput(this.input!, changedProperties.get('input')!);
     }
@@ -375,7 +377,7 @@ export class SbbDatepickerElement extends LitElement {
     this._datePickerController?.abort();
   }
 
-  protected override firstUpdated(changedProperties: PropertyValues): void {
+  protected override firstUpdated(changedProperties: PropertyValues<this>): void {
     super.firstUpdated(changedProperties);
     this._setAriaLiveMessage(this.getValueAsDate());
   }

src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js

@@ -1,7 +1,19 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-dialog-title renders"] = 
+snapshots["sbb-dialog-title renders Light DOM"] = 
+`<sbb-dialog-title
+  aria-level="2"
+  level="2"
+  role="heading"
+  visual-level="3"
+>
+  Title
+</sbb-dialog-title>
+`;
+/* end snapshot sbb-dialog-title renders Light DOM */
+
+snapshots["sbb-dialog-title renders Shadow DOM"] = 
 `<div class="sbb-dialog__header">
   <h2
     class="sbb-title"
@@ -27,9 +39,9 @@ snapshots["sbb-dialog-title renders"] =
   </sbb-secondary-button>
 </div>
 `;
-/* end snapshot sbb-dialog-title renders */
+/* end snapshot sbb-dialog-title renders Shadow DOM */
 
-snapshots["sbb-dialog-title A11y tree Chrome"] = 
+snapshots["sbb-dialog-title renders A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -47,9 +59,9 @@ snapshots["sbb-dialog-title A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-dialog-title A11y tree Chrome */
+/* end snapshot sbb-dialog-title renders A11y tree Chrome */
 
-snapshots["sbb-dialog-title A11y tree Firefox"] = 
+snapshots["sbb-dialog-title renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -67,25 +79,5 @@ snapshots["sbb-dialog-title A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-dialog-title A11y tree Firefox */
-
-snapshots["sbb-dialog-title A11y tree Safari"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": "",
-  "children": [
-    {
-      "role": "heading",
-      "name": "Title"
-    },
-    {
-      "role": "button",
-      "name": "Close secondary window"
-    }
-  ]
-}
-</p>
-`;
-/* end snapshot sbb-dialog-title A11y tree Safari */
+/* end snapshot sbb-dialog-title renders A11y tree Firefox */
 

src/components/dialog/dialog-title/dialog-title.spec.ts

@@ -2,21 +2,27 @@ import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbDialogTitleElement } from './dialog-title.js';
+
 import './dialog-title.js';
 
 describe('sbb-dialog-title', () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog-title>Title</sbb-dialog-title>`);
+  let element: SbbDialogTitleElement;
 
-    expect(root).dom.to.be.equal(`
-      <sbb-dialog-title
-       level="2"
-       role="heading"
-       visual-level="3">Title</sbb-dialog-title>
-    `);
+  describe('renders', () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-dialog-title>Title</sbb-dialog-title>`);
+    });
 
-    await expect(root).shadowDom.to.equalSnapshot();
-  });
+    it('Light DOM', async () => {
+      await expect(element).dom.to.equalSnapshot();
+    });
 
-  testA11yTreeSnapshot(html`<sbb-dialog-title>Title</sbb-dialog-title>`);
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
 });

src/components/dialog/dialog-title/dialog-title.ts

@@ -76,6 +76,8 @@ export class SbbDialogTitleElement extends SbbTitleBase {
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('backButton') || changedProperties.has('accessibilityBackLabel')) {
       this.backButton = !this.backButton && !!this.accessibilityBackLabel ? true : this.backButton;
     }

src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js

@@ -4,6 +4,7 @@ export const snapshots = {};
 snapshots["sbb-dialog renders an open dialog Dom"] = 
 `<sbb-dialog data-state="opening">
   <sbb-dialog-title
+    aria-level="2"
     level="2"
     role="heading"
     visual-level="3"

src/components/dialog/dialog/dialog.ts

@@ -239,7 +239,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     }
   }
 
-  protected override firstUpdated(_changedProperties: PropertyValues): void {
+  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
     this._ariaLiveRef =
       this.shadowRoot!.querySelector<SbbScreenReaderOnlyElement>('sbb-screen-reader-only')!;
 
@@ -250,6 +250,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('negative')) {
       this._syncNegative();
     }

src/components/divider/divider.ts

@@ -21,7 +21,7 @@ export class SbbDividerElement extends SbbNegativeMixin(LitElement) {
   /** Orientation property with possible values 'horizontal' | 'vertical'. Defaults to horizontal. */
   @property({ reflect: true }) public orientation: SbbOrientation = 'horizontal';
 
-  protected override willUpdate(changedProperties: PropertyValues): void {
+  protected override willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
 
     if (changedProperties.has('orientation')) {

src/components/expansion-panel/expansion-panel/expansion-panel.ts

@@ -131,6 +131,8 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('size')) {
       this._headerRef?.setAttribute('data-size', String(this.size));
       this._contentRef?.setAttribute('data-size', String(this.size));

src/components/form-field/form-field/form-field.ts

@@ -140,6 +140,8 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('negative')) {
       this._syncNegative();
     }

src/components/icon/icon.ts

@@ -35,6 +35,8 @@ export class SbbIconElement extends SbbIconBase {
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('name')) {
       this.loadSvgIcon(this.name);
     }

src/components/link-list/link-list.ts

@@ -63,6 +63,7 @@ export class SbbLinkListElement extends SbbNegativeMixin(
 
   protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
     super.willUpdate(changedProperties);
+
     if (
       changedProperties.has('size') ||
       changedProperties.has('negative') ||

src/components/navigation/navigation-list/navigation-list.ts

@@ -43,6 +43,7 @@ export class SbbNavigationListElement extends SbbNamedSlotListMixin<
 
   protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
     super.willUpdate(changedProperties);
+
     if (changedProperties.has('listChildren')) {
       this.listChildren.forEach((c) => (c.size = 'm'));
     }

src/components/navigation/navigation-marker/navigation-marker.ts

@@ -37,6 +37,7 @@ export class SbbNavigationMarkerElement extends SbbNamedSlotListMixin<
 
   protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
     super.willUpdate(changedProperties);
+
     if (changedProperties.has('size') || changedProperties.has('listChildren')) {
       this._updateMarkerActions();
     }

src/components/option/optgroup/optgroup.ts

@@ -61,6 +61,7 @@ export class SbbOptGroupElement extends SbbDisabledMixin(SbbHydrationMixin(LitEl
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
+
     if (changedProperties.has('disabled')) {
       if (!inertAriaGroups) {
         this.setAttribute('aria-disabled', this.disabled.toString());

src/components/option/option/option.ts

@@ -205,7 +205,7 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
     });
   }
 
-  protected override willUpdate(changedProperties: PropertyValues): void {
+  protected override willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
 
     if (changedProperties.has('disabled')) {
@@ -214,7 +214,7 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
     }
   }
 
-  protected override firstUpdated(changedProperties: PropertyValues): void {
+  protected override firstUpdated(changedProperties: PropertyValues<this>): void {
     super.firstUpdated(changedProperties);
 
     // Init first select state because false would not call setter of selected property.

src/components/overlay/overlay.ts

@@ -208,7 +208,7 @@ export class SbbOverlayElement extends SbbNegativeMixin(LitElement) {
     removeInertMechanism();
   }
 
-  protected override firstUpdated(changedProperties: PropertyValues): void {
+  protected override firstUpdated(changedProperties: PropertyValues<this>): void {
     this._ariaLiveRef =
       this.shadowRoot!.querySelector<SbbScreenReaderOnlyElement>('sbb-screen-reader-only')!;
     super.firstUpdated(changedProperties);