chore: upgrade to latest TSC to fix TSC bug caused by prev commit

.changeset/little-owls-perform.md

@@ -0,0 +1,42 @@
+---
+'@lion/accordion': minor
+'@lion/ajax': minor
+'@lion/button': minor
+'@lion/calendar': minor
+'@lion/checkbox-group': minor
+'@lion/collapsible': minor
+'@lion/combobox': minor
+'@lion/core': minor
+'@lion/dialog': minor
+'@lion/fieldset': minor
+'@lion/form': minor
+'@lion/form-core': minor
+'@lion/form-integrations': minor
+'@lion/helpers': minor
+'@lion/icon': minor
+'@lion/input': minor
+'@lion/input-amount': minor
+'@lion/input-date': minor
+'@lion/input-datepicker': minor
+'@lion/input-email': minor
+'@lion/input-iban': minor
+'@lion/input-range': minor
+'@lion/input-stepper': minor
+'@lion/listbox': minor
+'@lion/localize': minor
+'@lion/overlays': minor
+'@lion/pagination': minor
+'@lion/progress-indicator': minor
+'@lion/radio-group': minor
+'@lion/select': minor
+'@lion/select-rich': minor
+'@lion/steps': minor
+'@lion/switch': minor
+'@lion/tabs': minor
+'@lion/textarea': minor
+'@lion/tooltip': minor
+'@lion/validate-messages': minor
+'providence-analytics': patch
+---
+
+Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid. We also unfixed lion's dependencies (now using caret ^) on its own packages, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump.

package.json

@@ -59,8 +59,8 @@
     "@web/dev-server-legacy": "^0.1.7",
     "@web/test-runner": "^0.13.4",
     "@web/test-runner-browserstack": "^0.4.2",
-    "@web/test-runner-commands": "^0.6.1",
+    "@web/test-runner-commands": "^0.4.5",
-    "@web/test-runner-playwright": "^0.8.8",
+    "@web/test-runner-playwright": "^0.8.6",
     "babel-polyfill": "^6.26.0",
     "bundlesize": "^1.0.0-beta.2",
     "chai": "^4.2.0",
@@ -94,7 +94,7 @@
     "rollup": "^2.0.0",
     "sinon": "^7.2.2",
     "ssl-root-cas": "^1.3.1",
-    "typescript": "3.9.7",
+    "typescript": "4.5.5",
     "whatwg-fetch": "^3.0.0"
   },
   "bundlesize": [

packages-node/providence-analytics/package.json

@@ -53,7 +53,7 @@
     "parse5": "^5.1.1",
     "read-package-tree": "5.3.1",
     "semver": "^7.1.3",
-    "typescript": "3.9.7"
+    "typescript": "4.5.5"
   },
   "keywords": [
     "analysis",

packages/ajax/test/Ajax.test.js

@@ -84,9 +84,11 @@ describe('Ajax', () => {
       try {
         await ajax.fetch('/foo');
       } catch (e) {
-        expect(e).to.be.an.instanceOf(AjaxFetchError);
+        // https://github.com/microsoft/TypeScript/issues/20024 open issue, can't type catch clause in param
-        expect(e.request).to.be.an.instanceOf(Request);
+        const _e = /** @type {AjaxFetchError} */ (e);
-        expect(e.response).to.be.an.instanceOf(Response);
+        expect(_e).to.be.an.instanceOf(AjaxFetchError);
+        expect(_e.request).to.be.an.instanceOf(Request);
+        expect(_e.response).to.be.an.instanceOf(Response);
         thrown = true;
       }
       expect(thrown).to.be.true;
@@ -99,9 +101,11 @@ describe('Ajax', () => {
       try {
         await ajax.fetch('/foo');
       } catch (e) {
-        expect(e).to.be.an.instanceOf(AjaxFetchError);
+        // https://github.com/microsoft/TypeScript/issues/20024 open issue, can't type catch clause in param
-        expect(e.request).to.be.an.instanceOf(Request);
+        const _e = /** @type {AjaxFetchError} */ (e);
-        expect(e.response).to.be.an.instanceOf(Response);
+        expect(_e).to.be.an.instanceOf(AjaxFetchError);
+        expect(_e.request).to.be.an.instanceOf(Request);
+        expect(_e.response).to.be.an.instanceOf(Response);
         thrown = true;
       }
       expect(thrown).to.be.true;
@@ -344,7 +348,7 @@ describe('Ajax', () => {
         'Request signal is aborted', // webkit
       ];
 
-      expect(errors.includes(err.message)).to.be.true;
+      expect(errors.includes(/** @type {Error} */ (err).message)).to.be.true;
     });
   });
 });

packages/core/src/DelegateMixin.js

@@ -18,6 +18,7 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  */
 const DelegateMixinImplementation = superclass =>
   // eslint-disable-next-line
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends superclass {
     constructor() {
       super();

packages/core/src/DisabledMixin.js

@@ -10,6 +10,7 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  */
 const DisabledMixinImplementation = superclass =>
   // eslint-disable-next-line no-shadow
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends superclass {
     static get properties() {
       return {

packages/core/src/DisabledWithTabIndexMixin.js

@@ -11,6 +11,7 @@ import { DisabledMixin } from './DisabledMixin.js';
  */
 const DisabledWithTabIndexMixinImplementation = superclass =>
   // eslint-disable-next-line no-shadow
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends DisabledMixin(superclass) {
     static get properties() {
       return {

packages/core/src/SlotMixin.js

@@ -14,6 +14,7 @@ import { isTemplateResult } from 'lit/directive-helpers.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<LitElement>} superclass
  */
 const SlotMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class SlotMixin extends superclass {
     /**
      * @return {SlotsMap}

packages/core/src/UpdateStylesMixin.js

@@ -12,6 +12,7 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  */
 const UpdateStylesMixinImplementation = superclass =>
   // eslint-disable-next-line no-shadow
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends superclass {
     /**
      * @example

packages/core/types/DelegateMixinTypes.d.ts

@@ -10,7 +10,7 @@ export type Delegations = {
 };
 
 export declare class DelegateHost {
-  delegations: Delegations;
+  protected get delegations(): Delegations;
 
   protected _connectDelegateMixin(): void;
 

packages/form-core/src/FocusMixin.js

@@ -20,6 +20,7 @@ function applyFocusVisiblePolyfillWhenNeeded(node) {
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const FocusMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class FocusMixin extends superclass {
     /** @type {any} */
     static get properties() {

packages/form-core/src/FormControlMixin.js

@@ -35,6 +35,7 @@ function uuid(prefix) {
  */
 const FormControlMixinImplementation = superclass =>
   // eslint-disable-next-line no-shadow, no-unused-vars
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class FormControlMixin extends FormRegisteringMixin(DisabledMixin(SlotMixin(superclass))) {
     /** @type {any} */
     static get properties() {

packages/form-core/src/FormatMixin.js

@@ -58,6 +58,7 @@ import { ValidateMixin } from './validate/ValidateMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const FormatMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class FormatMixin extends ValidateMixin(FormControlMixin(superclass)) {
     /** @type {any} */
     static get properties() {

packages/form-core/src/InteractionStateMixin.js

@@ -19,6 +19,7 @@ import { FormControlMixin } from './FormControlMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const InteractionStateMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class InteractionStateMixin extends FormControlMixin(superclass) {
     /** @type {any} */
     static get properties() {
@@ -210,6 +211,7 @@ const InteractionStateMixinImplementation = superclass =>
      * @param {string} type
      * @param {InteractionStates} meta
      */
+    // @ts-expect-error FIXME: istatemixin should implement validatemixin, then @override is valid
     // eslint-disable-next-line class-methods-use-this, no-unused-vars
     _showFeedbackConditionFor(type, meta) {
       return (meta.touched && meta.dirty) || meta.prefilled || meta.submitted;

packages/form-core/src/NativeTextFieldMixin.js

@@ -9,6 +9,7 @@ import { FormatMixin } from './FormatMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass} superclass
  */
 const NativeTextFieldMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class NativeTextFieldMixin extends FormatMixin(FocusMixin(FormControlMixin(superclass))) {
     /** @type {any} */
     static get properties() {

packages/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -21,6 +21,7 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const ChoiceGroupMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class ChoiceGroupMixin extends FormRegistrarMixin(InteractionStateMixin(superclass)) {
     /** @type {any} */
     static get properties() {

packages/form-core/src/choice-group/ChoiceInputMixin.js

@@ -21,6 +21,7 @@ const hasChanged = (nw, old = {}) => nw.value !== old.value || nw.checked !== ol
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const ChoiceInputMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class ChoiceInputMixin extends FormatMixin(superclass) {
     /** @type {any} */
     static get properties() {
@@ -335,6 +336,7 @@ const ChoiceInputMixinImplementation = superclass =>
      * @override
      * Overridden from LionField, since the modelValue should not be cleared.
      */
+    // @ts-expect-error FIXME: @override gives error because LionField is not superclass type, this mixin should only allow LionField extensions
     clear() {
       this.checked = false;
     }

packages/form-core/src/form-group/FormGroupMixin.js

@@ -28,6 +28,7 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const FormGroupMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class FormGroupMixin extends FormRegistrarMixin(
     FormControlMixin(ValidateMixin(DisabledMixin(SlotMixin(superclass)))),
   ) {

packages/form-core/src/registration/FormRegisteringMixin.js

@@ -18,6 +18,7 @@ import { dedupeMixin } from '@lion/core';
  * @param {import('@open-wc/dedupe-mixin').Constructor<LitElement>} superclass
  */
 const FormRegisteringMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends superclass {
     constructor() {
       super();

packages/form-core/src/registration/FormRegistrarMixin.js

@@ -25,6 +25,7 @@ import { FormRegisteringMixin } from './FormRegisteringMixin.js';
  */
 const FormRegistrarMixinImplementation = superclass =>
   // eslint-disable-next-line no-shadow, no-unused-vars
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends FormRegisteringMixin(superclass) {
     /** @type {any} */
     static get properties() {

packages/form-core/src/registration/FormRegistrarPortalMixin.js

@@ -21,6 +21,7 @@ import { dedupeMixin } from '@lion/core';
  */
 const FormRegistrarPortalMixinImplementation = superclass =>
   // eslint-disable-next-line no-shadow, no-unused-vars
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends superclass {
     constructor() {
       super();

packages/form-core/src/utils/SyncUpdatableMixin.js

@@ -24,6 +24,7 @@ import { dedupeMixin } from '@lion/core';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const SyncUpdatableMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends superclass {
     constructor() {
       super();

packages/form-core/src/validate/ValidateMixin.js

@@ -35,6 +35,7 @@ function arrayDiff(array1 = [], array2 = []) {
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 export const ValidateMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class extends FormControlMixin(
     SyncUpdatableMixin(DisabledMixin(SlotMixin(ScopedElementsMixin(superclass)))),
   ) {

packages/form-core/test-suites/form-group/FormGroupMixin.suite.js

@@ -149,7 +149,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
         error = err;
       }
       expect(error).to.be.instanceOf(TypeError);
-      expect(error.message).to.equal('You need to define a name');
+      expect(/** @type {TypeError} */ (error).message).to.equal('You need to define a name');
 
       console.info = orig; // restore original console
     });
@@ -172,7 +172,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         error = err;
       }
       expect(error).to.be.instanceOf(TypeError);
-      expect(error.message).to.equal('You can not have the same name "foo" as your parent');
+      expect(/** @type {TypeError} */ (error).message).to.equal(
+        'You can not have the same name "foo" as your parent',
+      );
 
       console.info = orig; // restore original console
     });
@@ -200,7 +202,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
         error = err;
       }
       expect(error).to.be.instanceOf(TypeError);
-      expect(error.message).to.equal(
+      expect(/** @type {TypeError} */ (error).message).to.equal(
         'Name "fooBar" is already registered - if you want an array add [] to the end',
       );
 

packages/form-core/test/validate/Validator.test.js

@@ -17,7 +17,7 @@ async function expectThrowsAsync(method, errorMessage) {
   }
   expect(error).to.be.an('Error', 'No error was thrown');
   if (errorMessage) {
-    expect(error.message).to.equal(errorMessage);
+    expect(/** @type {Error} */ (error).message).to.equal(errorMessage);
   }
 }
 /**

packages/icon/test/IconManager.test.js

@@ -1,4 +1,4 @@
-import { nothing } from '@lion/core';
+import { nothing, html } from '@lion/core';
 import { expect } from '@open-wc/testing';
 import { stub } from 'sinon';
 import { IconManager } from '../src/IconManager.js';
@@ -42,9 +42,9 @@ describe('IconManager', () => {
 
   it('does not allow adding a resolve for the same namespace twice', () => {
     const manager = new IconManager();
-    manager.addIconResolver('foo', () => {});
+    manager.addIconResolver('foo', () => html``);
 
-    expect(() => manager.addIconResolver('foo', () => {})).to.throw();
+    expect(() => manager.addIconResolver('foo', () => html``)).to.throw();
   });
 
   it('can resolve an icon, specifying separate parameters', async () => {

packages/input-datepicker/test/lion-input-datepicker.test.js

@@ -575,14 +575,15 @@ describe('<lion-input-datepicker>', () => {
 
         const myTag = defineCE(
           class extends LionInputDatepicker {
-            /** @override */
+            // TODO: this method doesn't exist on LionInputDatepicker, so if we re-enable these tests, they should be redone
-            _calendarOverlayTemplate() {
+            // /** @override */
-              return html`
+            // _calendarOverlayTemplate() {
-                <my-calendar-overlay-frame id="calendar-overlay">
+            //   return html`
-                  <span slot="heading">${this.calendarHeading}</span>
+            //     <my-calendar-overlay-frame id="calendar-overlay">
-                </my-calendar-overlay-frame>
+            //       <span slot="heading">${this.calendarHeading}</span>
-              `;
+            //     </my-calendar-overlay-frame>
-            }
+            //   `;
+            // }
 
             /** @override */
             _onCalendarOverlayOpened() {

packages/listbox/src/LionOption.js

@@ -1,5 +1,5 @@
 import { ChoiceInputMixin, FormRegisteringMixin } from '@lion/form-core';
-import { css, DisabledMixin, html, LitElement } from '@lion/core';
+import { css, DisabledMixin, html, LitElement, SlotMixin } from '@lion/core';
 
 /**
  * @typedef {import('@lion/core').TemplateResult } TemplateResult
@@ -14,7 +14,9 @@ import { css, DisabledMixin, html, LitElement } from '@lion/core';
  * Element gets state supplied externally, reflects this to attributes,
  * enabling SubClassers to style based on those states
  */
-export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMixin(LitElement))) {
+export class LionOption extends DisabledMixin(
+  ChoiceInputMixin(FormRegisteringMixin(SlotMixin(LitElement))),
+) {
   /** @type {any} */
   static get properties() {
     return {

packages/listbox/src/ListboxMixin.js

@@ -60,6 +60,7 @@ function uuid() {
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const ListboxMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class ListboxMixin extends FormControlMixin(
     ScopedElementsMixin(ChoiceGroupMixin(SlotMixin(FormRegistrarMixin(superclass)))),
   ) {

packages/listbox/test-suites/ListboxMixin.suite.js

@@ -1380,7 +1380,7 @@ export function runListboxMixinSuite(customConfig = {}) {
           el.appendChild(optionsEl);
           properlyInstantiated = true;
         } catch (e) {
-          throw Error(e);
+          throw Error(/** @type {Error} */ (e).message);
         }
 
         expect(properlyInstantiated).to.be.true;

packages/localize/src/LocalizeMixin.js

@@ -9,8 +9,10 @@ import { localize } from './localize.js';
 /**
  * # LocalizeMixin - for self managed templates
  * @type {LocalizeMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const LocalizeMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class LocalizeMixin extends superclass {
     /**
      * @returns {Object.<string,function>[]}

packages/localize/src/date/getMonthNames.js

@@ -8,10 +8,10 @@ const monthsLocaleCache = {};
  * @desc Returns month names for locale
  * @param {Object} [options]
  * @param {string} [options.locale] locale
- * @param {string} [options.style=long] long, short or narrow
+ * @param {"long" | "numeric" | "2-digit" | "short" | "narrow"} [options.style=long] long, short or narrow
  * @returns {string[]} like: ['January', 'February', ...etc].
  */
-export function getMonthNames({ locale, style = 'long' } = {}) {
+export function getMonthNames({ locale = 'en-GB', style = 'long' } = {}) {
   let months = monthsLocaleCache[locale] && monthsLocaleCache[locale][style];
 
   if (months) {

packages/localize/src/date/getWeekdayNames.js

@@ -22,7 +22,9 @@ function getCachedWeekdayNames(locale) {
     narrow: [],
   };
 
-  ['long', 'short', 'narrow'].forEach(style => {
+  /** @type {Array<"long" | "short" | "narrow">} style */
+  const styles = ['long', 'short', 'narrow'];
+  styles.forEach(style => {
     weekdays = weekdayNamesCache[locale][style];
     const formatter = new Intl.DateTimeFormat(locale, {
       weekday: style,
@@ -48,7 +50,7 @@ function getCachedWeekdayNames(locale) {
  * @param {number} [options.firstDayOfWeek=0] 0 (Sunday), 1 (Monday), etc...
  * @returns {string[]} like: ['Sunday', 'Monday', 'Tuesday', ...etc].
  */
-export function getWeekdayNames({ locale, style = 'long', firstDayOfWeek = 0 } = {}) {
+export function getWeekdayNames({ locale = 'en-GB', style = 'long', firstDayOfWeek = 0 } = {}) {
   const weekdays = getCachedWeekdayNames(locale)[style];
   const orderedWeekdays = [];
   for (let i = firstDayOfWeek; i < firstDayOfWeek + 7; i += 1) {

packages/localize/test/LocalizeManager.test.js

@@ -296,7 +296,7 @@ describe('LocalizeManager', () => {
         });
       } catch (e) {
         expect(e).to.be.instanceof(Error);
-        expect(e.message).to.equal(
+        expect(/** @type {Error} */ (e).message).to.equal(
           'Data for namespace "my-component" and locale "en-GB" could not be loaded. ' +
             'Make sure you have data for locale "en-GB" (and/or generic language "en").',
         );
@@ -356,7 +356,7 @@ describe('LocalizeManager', () => {
           });
         } catch (e) {
           expect(e).to.be.instanceof(Error);
-          expect(e.message).to.equal(
+          expect(/** @type {Error} */ (e).message).to.equal(
             'Data for namespace "my-component" and current locale "nl-NL" or fallback locale "en-GB" could not be loaded. ' +
               'Make sure you have data either for locale "nl-NL" (and/or generic language "nl") or for fallback "en-GB" (and/or "en").',
           );

packages/localize/test/date/formatDate.test.js

@@ -39,6 +39,10 @@ const SUPPORTED_LOCALES = {
   'zh-Hant-TW': 'Chinese (Traditional Han, Taiwan)',
 };
 
+/**
+ * @typedef {import('../../types/LocalizeMixinTypes').FormatDateOptions} FormatDateOptions
+ */
+
 describe('formatDate', () => {
   beforeEach(() => {
     localizeTearDown();
@@ -64,6 +68,7 @@ describe('formatDate', () => {
 
   it('displays the date based on options', async () => {
     const testDate = new Date('2012/05/21');
+    /** @type {FormatDateOptions} */
     const options = {
       weekday: 'long',
       year: 'numeric',
@@ -83,6 +88,7 @@ describe('formatDate', () => {
   });
 
   it('displays Hungarian dates correctly', async () => {
+    /** @type {FormatDateOptions} */
     const options = {
       weekday: 'long',
       year: 'numeric',
@@ -99,6 +105,7 @@ describe('formatDate', () => {
   });
 
   it('displays Bulgarian dates correctly', async () => {
+    /** @type {FormatDateOptions} */
     const options = {
       weekday: 'long',
       year: 'numeric',
@@ -118,6 +125,7 @@ describe('formatDate', () => {
   });
 
   it('displays US dates correctly', async () => {
+    /** @type {FormatDateOptions} */
     const options = {
       weekday: 'long',
       year: 'numeric',
@@ -137,6 +145,7 @@ describe('formatDate', () => {
   });
 
   it('handles locales in options', async () => {
+    /** @type {FormatDateOptions} */
     let options = {
       weekday: 'long',
       year: 'numeric',
@@ -195,6 +204,7 @@ describe('formatDate', () => {
 
     Object.keys(SUPPORTED_LOCALES).forEach(locale => {
       it(`handles options without year for locale: ${locale}`, async () => {
+        /** @type {FormatDateOptions} */
         const options = {
           weekday: 'long',
           month: 'long',
@@ -208,6 +218,7 @@ describe('formatDate', () => {
   });
 
   it('handles options without month', async () => {
+    /** @type {FormatDateOptions} */
     const options = {
       weekday: 'long',
       year: 'numeric',
@@ -218,6 +229,7 @@ describe('formatDate', () => {
   });
 
   it('handles options without day', async () => {
+    /** @type {FormatDateOptions} */
     const options = {
       weekday: 'long',
       year: 'numeric',
@@ -256,6 +268,7 @@ describe('formatDate', () => {
       postProcessors.set('nl-NL', upperCaseProcessor);
       postProcessors.set('de-DE', lowerCaseProcessor);
 
+      /** @type {FormatDateOptions} */
       const options = {
         weekday: 'long',
         year: 'numeric',
@@ -276,6 +289,7 @@ describe('formatDate', () => {
 
     it('displays the appropriate date after post processor set in localize', async () => {
       const testDate = new Date('2012/05/21');
+      /** @type {FormatDateOptions} */
       const options = {
         weekday: 'long',
         year: 'numeric',
@@ -306,6 +320,7 @@ describe('formatDate', () => {
       postProcessors.set('nl-NL', upperCaseProcessor);
       postProcessors.set('de-DE', upperCaseProcessor);
 
+      /** @type {FormatDateOptions} */
       const options = {
         weekday: 'long',
         year: 'numeric',

packages/overlays/src/ArrowMixin.js

@@ -14,6 +14,7 @@ import { OverlayMixin } from './OverlayMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 export const ArrowMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class ArrowMixin extends OverlayMixin(superclass) {
     static get properties() {
       return {

packages/overlays/src/OverlayMixin.js

@@ -10,8 +10,10 @@ import { isEqualConfig } from './utils/is-equal-config.js';
 
 /**
  * @type {OverlayMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 export const OverlayMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class OverlayMixin extends superclass {
     static get properties() {
       return {
@@ -155,7 +157,7 @@ export const OverlayMixinImplementation = superclass =>
       if (this._overlayContentNode) {
         this._overlayContentNode.removeEventListener(
           'close-overlay',
-          this.__closeEventInContentNodeHandler,
+          /** @type {EventListener} */ (this.__closeEventInContentNodeHandler),
         );
       }
     }
@@ -173,16 +175,16 @@ export const OverlayMixinImplementation = superclass =>
     }
 
     disconnectedCallback() {
-      if (super.disconnectedCallback) {
+      super.disconnectedCallback();
-        super.disconnectedCallback();
-      }
       if (this._overlayCtrl) {
         this._teardownOverlayCtrl();
       }
     }
 
     get _overlayInvokerNode() {
-      return Array.from(this.children).find(child => child.slot === 'invoker');
+      return /** @type {HTMLElement | undefined} */ (
+        Array.from(this.children).find(child => child.slot === 'invoker')
+      );
     }
 
     /**
@@ -194,7 +196,9 @@ export const OverlayMixinImplementation = superclass =>
     }
 
     get _overlayBackdropNode() {
-      return Array.from(this.children).find(child => child.slot === 'backdrop');
+      return /** @type {HTMLElement | undefined} */ (
+        Array.from(this.children).find(child => child.slot === 'backdrop')
+      );
     }
 
     get _overlayContentNode() {
@@ -203,11 +207,13 @@ export const OverlayMixinImplementation = superclass =>
           Array.from(this.children).find(child => child.slot === 'content') ||
           this.config.contentNode;
       }
-      return this._cachedOverlayContentNode;
+      return /** @type {HTMLElement} */ (this._cachedOverlayContentNode);
     }
 
     get _overlayContentWrapperNode() {
-      return this.shadowRoot.querySelector('#overlay-content-node-wrapper');
+      return /** @type {HTMLElement | undefined} */ (
+        this.shadowRoot?.querySelector('#overlay-content-node-wrapper')
+      );
     }
 
     /** @protected */

packages/overlays/src/OverlaysManager.js

@@ -113,7 +113,7 @@ export class OverlaysManager {
       .reverse()
       .forEach((ctrl, i) => {
         // eslint-disable-next-line no-param-reassign
-        ctrl.elevation = i + 1;
+        ctrl.elevation = `${i + 1}`;
       });
   }
 

packages/overlays/test/OverlayController.test.js

@@ -1367,7 +1367,7 @@ describe('OverlayController', () => {
         });
         properlyInstantiated = true;
       } catch (e) {
-        throw new Error(e);
+        throw new Error(/** @type {Error} */ (e).message);
       }
       expect(properlyInstantiated).to.be.true;
     });

packages/overlays/types/OverlayMixinTypes.d.ts

@@ -5,7 +5,7 @@ import { OverlayController } from '../src/OverlayController.js';
 
 export interface DefineOverlayConfig {
   /** The interactive element (usually a button) invoking the dialog or tooltip */
-  invokerNode: HTMLElement;
+  invokerNode?: HTMLElement;
   /** The element that is used to position the overlay content relative to. Usually, this is the same element as invokerNode. Should only be provided when invokerNode should not be positioned against */
   referenceNode?: HTMLElement;
   /** The most important element: the overlay itself */

packages/select-rich/index.js

@@ -1,10 +1,11 @@
 /**
- * @deprecated
+ * !deprecated
  * Import here for backwards compatibility
  */
 export { LionOptions } from '@lion/listbox';
+
 /**
- * @deprecated
+ * !deprecated
  * Import here for backwards compatibility
  */
 export { LionOption } from '@lion/listbox';

packages/select-rich/lion-option.js

@@ -1,5 +1,5 @@
 /**
- * @deprecated
+ * !deprecated
  * Import here for backwards compatibility
  */
 import '@lion/listbox/define-option';

packages/select-rich/lion-options.js

@@ -1,5 +1,5 @@
 /**
- * @deprecated
+ * !deprecated
  * Import here for backwards compatibility
  */
 import '@lion/listbox/define-options';

packages/select-rich/src/LionSelectRich.js

@@ -181,7 +181,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
       if (this.disabled) {
         this._invokerNode.makeRequestToBeDisabled();
       } else {
-        console.log('hello', this._invokerNode);
         this._invokerNode.retractRequestToBeDisabled();
       }
     }

packages/select-rich/test/lion-select-rich-dialog-integration.test.js

@@ -50,7 +50,7 @@ describe('Select Rich Integration tests', () => {
       `);
       properlyInstantiated = true;
     } catch (e) {
-      throw new Error(e);
+      throw new Error(/** @type {Error} */ (e).message);
     }
 
     expect(properlyInstantiated).to.be.true;

packages/select-rich/test/lion-select-rich-interaction.test.js

@@ -14,13 +14,18 @@ import '@lion/select-rich/define';
  * @param {LionSelectRich} lionSelectEl
  */
 function getNodes(lionSelectEl) {
-  // @ts-ignore protected members allowed in test
   const {
+    // @ts-ignore protected members allowed in test
     _invokerNode: invoker,
+    // @ts-ignore protected members allowed in test
     _feedbackNode: feedback,
+    // @ts-ignore protected members allowed in test
     _labelNode: label,
+    // @ts-ignore protected members allowed in test
     _helpTextNode: helpText,
+    // @ts-ignore protected members allowed in test
     _listboxNode: listbox,
+    // @ts-ignore protected members allowed in test
   } = lionSelectEl;
   return {
     invoker,

packages/steps/test/lion-steps.test.js

@@ -18,6 +18,7 @@ const fixture = /** @type {(arg: TemplateResult) => Promise<LionSteps>} */ (_fix
  * @param {Object} expected
  * @param {string} expected.transitions
  * @param {string} expected.statuses
+ * @returns {Promise<void>}
  */
 async function checkWorkflow(steps, expected) {
   return new Promise(resolve => {