Merge pull request #1603 from ing-bank/experiment-@lion

feat: remove fixed versions @lion and upgrade TSC

.changeset/little-owls-perform.md

@@ -0,0 +1,46 @@
+---
+'@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.
+
+Be sure to [read our Rationale on this change](https://lion-web.netlify.app/docs/rationales/versioning/) and what this means for you as a user.

.changeset/odd-suns-shake.md

@@ -0,0 +1,5 @@
+---
+'@lion/overlays': minor
+---
+
+BREAKING: elevation property setter on OverlayController accepts numbers only, previously this was a number as a string. This syncs it with the getter which returns a number.

docs/components/inputs/select-rich/features.md

@@ -3,7 +3,6 @@
 ```js script
 import { LitElement, html } from '@mdjs/mdjs-preview';
 import '@lion/listbox/define';
-import '@lion/listbox/define';
 import '@lion/select-rich/define';
 ```
 

docs/docs/rationales/TypeScript.md

@@ -0,0 +1,18 @@
+# Rationales >> TypeScript ||30
+
+[TypeScript](https://www.typescriptlang.org) is superset of JavaScript and a popular tool for getting strongly typed syntax and better autocompletion in JavaScript.
+
+We've ensured that the entire Lion library is typed so that you can use it in TypeScript, but there are some caveats.
+
+In Lion, we rely heavily on [Mixins](https://lit.dev/docs/composition/mixins/#mixin-basics) as a pattern for abstracting certain behaviors and properties into implementable interfaces.
+Since JavaScript has a one-dimensional inheritance chain, inheriting from multiple ancestors has always been tricky, the Mixin pattern is used to get around that.
+
+Here's the thing, Mixins have been notoriously difficult to type properly in TypeScript and in addition, we did not feel happy about adding an adhoc compilation step in our developer workflow. Therefore, we opted for typing our code with [JSDoc](https://jsdoc.app/) and using TypeScript to lint our types and generate type definition files.
+
+Consuming Lion as `.js` typed by JSDoc is not much different from consuming it as when they were `.ts` files, but due to Mixins being very tricky to type, we've had to use `@ts-ignore` in a couple of places, most importantly, in many of our mixins.
+
+For context, here's a [thread on the issue](https://github.com/microsoft/TypeScript/issues/36821) of inheritance type constraints in mixins, where a user suggested allowing to ignore the rule that causes problems.
+This suggestion was declined and in [this comment](https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051), Ryan Cavanaugh explained that using `@ts-ignore` is the right way to get around the limitation here.
+As a user of Lion this means that because we've got `@ts-ignore`s in our source code, you may get type errors that originate from Lion, and there's nothing we can do about that, TypeScript's stance is that sometimes rules are too conservative, and ignoring them is the correct answer.
+
+In order to ignore type issues coming from Lion, please use the [skipLibCheck](https://www.typescriptlang.org/tsconfig#skipLibCheck) option in your `ts.config.json`, this will ignore issues that aren't coming from your code.

docs/docs/rationales/versioning.md

@@ -0,0 +1,35 @@
+# Rationales >> Versioning Lion ||20
+
+Since Lion is a monorepository where each package is published separately under the `@lion` scope, we have packages that depend on other packages.
+
+For example, `@lion/dialog` has a dependency on `@lion/overlays`.
+
+The way we now version those is with `^` carets, for example:
+
+```json
+{
+  "dependencies": {
+    "@lion/overlays": "^0.30.0"
+  }
+}
+```
+
+This means:
+
+- For versions >= 1.0.0, get the latest minor of a certain major, major upgrades may contain breaking changes
+- For versions < 1.0.0, get the latest patch of a certain minor, minor upgrades may contain breaking changes
+
+See also, [Semantic Versioning](https://semver.org/).
+
+In the past, we used to have fixed versioning, our rationale was as follows:
+
+> Given there is a subclasser that consumes lion and publishes their own component set, each installation of a certain version of that component set must have the exact same versions of lion installed, so that the experience of the end user is consistent.
+
+**However**, if semver is followed properly, users should never get the situation where they get diverging experiences, because that would only happen in a breaking change.
+Additionally, fixing the versions led to other problems:
+
+- Undedupable installations of the same package. If there are two installations of `@lion/button` and one is installed as a dependency of another lion package, this installation will never be able to be deduped to another version, even if they're on the same minor. This is because the dependency is set to a fixed version, so NPM will see the two installations as incompatible and not dedupe them. For Lion, this can definitely lead to problems, especially with packages like `@lion/form-core`, `@lion/localize`, `@lion/overlays`, due to the singleton nature of some of the parts in those packages.
+- Importing directly from lion as an end user when consuming a subclasser package that uses lion under the hood is dangerous. This is because you will need to always match, **exactly**, the version that is installed by the subclasser package. This means syncing your lion version with the subclasser's installed lion version every time you upgrade.
+- Changesets will see (correctly) every bump in a `@lion` dependency as a semver-incompatible change for its `@lion` dependents and bump them as a result. This means a change to `@lion/core`, no matter how tiny, will bump almost every other `@lion` package "unnecessarily". This results in large changelogs that are mostly meaningless noise, hardly "human readable" which is the goal of changesets when used correctly.
+
+Given all this, we changed our approach to versioning and went back to using `^` carets in our versions and **our new recommendation is to depend on `@lion` with `^` carets**. This should prevent majority of undedupable installation problems our users were having, allow importing from `@lion` directly, more safely, make our changelogs cleaner and reduce our publishing bloat.

package.json

@@ -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/accordion/package.json

@@ -36,7 +36,7 @@
     "lion-accordion.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0"
+    "@lion/core": "^0.20.0"
   },
   "keywords": [
     "accordion",

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/button/package.json

@@ -39,7 +39,7 @@
     "define.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0"
+    "@lion/core": "^0.20.0"
   },
   "keywords": [
     "button",

packages/calendar/package.json

@@ -36,8 +36,8 @@
     "lion-calendar.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/localize": "0.22.0"
+    "@lion/localize": "^0.22.0"
   },
   "keywords": [
     "calendar",

packages/checkbox-group/package.json

@@ -39,9 +39,9 @@
     "lion-checkbox-indeterminate.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/input": "0.15.8"
+    "@lion/input": "^0.15.8"
   },
   "keywords": [
     "checkbox-group",

packages/collapsible/package.json

@@ -38,7 +38,7 @@
     "demo/custom-collapsible.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0"
+    "@lion/core": "^0.20.0"
   },
   "keywords": [
     "collapsible",

packages/combobox/package.json

@@ -45,10 +45,10 @@
     "docs/google-combobox/google-combobox.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/listbox": "0.11.0",
+    "@lion/listbox": "^0.11.0",
-    "@lion/overlays": "0.30.0"
+    "@lion/overlays": "^0.30.0"
   },
   "keywords": [
     "combobox",

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/dialog/package.json

@@ -37,8 +37,8 @@
     "./docs/styled-dialog-content.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/overlays": "0.30.0"
+    "@lion/overlays": "^0.30.0"
   },
   "keywords": [
     "dialog",

packages/fieldset/package.json

@@ -37,8 +37,8 @@
     "./docs/helpers/demo-fieldset-child.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5"
+    "@lion/form-core": "^0.15.5"
   },
   "keywords": [
     "fieldset",

packages/form-core/package.json

@@ -38,8 +38,8 @@
     "lion-validation-feedback.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/localize": "0.22.0"
+    "@lion/localize": "^0.22.0"
   },
   "keywords": [
     "field",

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/form-integrations/package.json

@@ -32,29 +32,29 @@
     "test": "cd ../../ && npm run test:browser -- --group form-integrations"
   },
   "dependencies": {
-    "@lion/button": "0.15.0",
+    "@lion/button": "^0.15.0",
-    "@lion/checkbox-group": "0.18.8",
+    "@lion/checkbox-group": "^0.18.8",
-    "@lion/combobox": "0.8.7",
+    "@lion/combobox": "^0.8.7",
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/fieldset": "0.19.10",
+    "@lion/fieldset": "^0.19.10",
-    "@lion/form": "0.12.8",
+    "@lion/form": "^0.12.8",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/input": "0.15.8",
+    "@lion/input": "^0.15.8",
-    "@lion/input-amount": "0.14.8",
+    "@lion/input-amount": "^0.14.8",
-    "@lion/input-date": "0.12.10",
+    "@lion/input-date": "^0.12.10",
-    "@lion/input-datepicker": "0.23.10",
+    "@lion/input-datepicker": "^0.23.10",
-    "@lion/input-email": "0.13.10",
+    "@lion/input-email": "^0.13.10",
-    "@lion/input-iban": "0.16.8",
+    "@lion/input-iban": "^0.16.8",
-    "@lion/input-range": "0.10.9",
+    "@lion/input-range": "^0.10.9",
-    "@lion/input-stepper": "0.6.8",
+    "@lion/input-stepper": "^0.6.8",
-    "@lion/listbox": "0.11.0",
+    "@lion/listbox": "^0.11.0",
-    "@lion/localize": "0.22.0",
+    "@lion/localize": "^0.22.0",
-    "@lion/radio-group": "0.18.8",
+    "@lion/radio-group": "^0.18.8",
-    "@lion/select": "0.14.8",
+    "@lion/select": "^0.14.8",
-    "@lion/select-rich": "0.28.0",
+    "@lion/select-rich": "^0.28.0",
-    "@lion/switch": "0.18.3",
+    "@lion/switch": "^0.18.3",
-    "@lion/textarea": "0.13.8",
+    "@lion/textarea": "^0.13.8",
-    "@lion/validate-messages": "0.7.8"
+    "@lion/validate-messages": "^0.7.8"
   },
   "keywords": [
     "form",

packages/form/package.json

@@ -36,7 +36,7 @@
     "lion-form.js"
   ],
   "dependencies": {
-    "@lion/fieldset": "0.19.10"
+    "@lion/fieldset": "^0.19.10"
   },
   "keywords": [
     "form",

packages/helpers/package.json

@@ -35,7 +35,7 @@
     "sb-locale-switcher.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0"
+    "@lion/core": "^0.20.0"
   },
   "keywords": [
     "action logger",

packages/icon/package.json

@@ -37,8 +37,8 @@
     "./docs/icon-resolvers.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "singleton-manager": "1.4.3"
+    "singleton-manager": "^1.4.3"
   },
   "keywords": [
     "icon",

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-amount/package.json

@@ -36,11 +36,11 @@
     "lion-input-amount.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/input": "0.15.8",
+    "@lion/input": "^0.15.8",
-    "@lion/localize": "0.22.0",
+    "@lion/localize": "^0.22.0",
-    "@lion/validate-messages": "0.7.8"
+    "@lion/validate-messages": "^0.7.8"
   },
   "keywords": [
     "input-amount",

packages/input-date/package.json

@@ -36,11 +36,11 @@
     "lion-input-date.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/input": "0.15.8",
+    "@lion/input": "^0.15.8",
-    "@lion/localize": "0.22.0",
+    "@lion/localize": "^0.22.0",
-    "@lion/validate-messages": "0.7.8"
+    "@lion/validate-messages": "^0.7.8"
   },
   "keywords": [
     "input-date",

packages/input-datepicker/package.json

@@ -36,13 +36,13 @@
     "lion-input-datepicker.js"
   ],
   "dependencies": {
-    "@lion/calendar": "0.17.0",
+    "@lion/calendar": "^0.17.0",
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/input-date": "0.12.10",
+    "@lion/input-date": "^0.12.10",
-    "@lion/localize": "0.22.0",
+    "@lion/localize": "^0.22.0",
-    "@lion/overlays": "0.30.0",
+    "@lion/overlays": "^0.30.0",
-    "@lion/validate-messages": "0.7.8"
+    "@lion/validate-messages": "^0.7.8"
   },
   "keywords": [
     "calendar",

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/input-email/package.json

@@ -36,11 +36,11 @@
     "lion-input-email.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/input": "0.15.8",
+    "@lion/input": "^0.15.8",
-    "@lion/localize": "0.22.0",
+    "@lion/localize": "^0.22.0",
-    "@lion/validate-messages": "0.7.8"
+    "@lion/validate-messages": "^0.7.8"
   },
   "keywords": [
     "input-email",

packages/input-iban/package.json

@@ -36,11 +36,11 @@
     "lion-input-iban.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/input": "0.15.8",
+    "@lion/input": "^0.15.8",
-    "@lion/localize": "0.22.0",
+    "@lion/localize": "^0.22.0",
-    "@lion/validate-messages": "0.7.8",
+    "@lion/validate-messages": "^0.7.8",
     "ibantools": "^2.2.0"
   },
   "keywords": [

packages/input-range/package.json

@@ -36,9 +36,9 @@
     "lion-input-range.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/input": "0.15.8",
+    "@lion/input": "^0.15.8",
-    "@lion/localize": "0.22.0"
+    "@lion/localize": "^0.22.0"
   },
   "keywords": [
     "input-range",

packages/input-stepper/package.json

@@ -36,9 +36,9 @@
     "lion-input-stepper.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/input": "0.15.8"
+    "@lion/input": "^0.15.8"
   },
   "keywords": [
     "input",

packages/input/package.json

@@ -36,7 +36,7 @@
     "lion-input.js"
   ],
   "dependencies": {
-    "@lion/form-core": "0.15.5"
+    "@lion/form-core": "^0.15.5"
   },
   "keywords": [
     "input",

packages/listbox/package.json

@@ -39,8 +39,8 @@
     "lion-options.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5"
+    "@lion/form-core": "^0.15.5"
   },
   "keywords": [
     "form",

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/package.json

@@ -34,8 +34,8 @@
   "sideEffects": false,
   "dependencies": {
     "@bundled-es-modules/message-format": "6.0.4",
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "singleton-manager": "1.4.3"
+    "singleton-manager": "^1.4.3"
   },
   "keywords": [
     "lion",

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/package.json

@@ -37,9 +37,9 @@
     "./docs/applyDemoOverlayStyles.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
     "@popperjs/core": "^2.5.4",
-    "singleton-manager": "1.4.3"
+    "singleton-manager": "^1.4.3"
   },
   "keywords": [
     "lion",

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/OverlayController.js

@@ -416,14 +416,14 @@ export class OverlayController extends EventTargetShim {
   }
 
   /**
-   * @param {string} value
+   * @param {number} value
    */
   set elevation(value) {
     if (this.contentWrapperNode) {
-      this.contentWrapperNode.style.zIndex = value;
+      this.contentWrapperNode.style.zIndex = `${value}`;
     }
     if (this.backdropNode) {
-      this.backdropNode.style.zIndex = value;
+      this.backdropNode.style.zIndex = `${value}`;
     }
   }
 

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();
-      }
       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/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/pagination/package.json

@@ -36,8 +36,8 @@
     "lion-pagination.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/localize": "0.22.0"
+    "@lion/localize": "^0.22.0"
   },
   "keywords": [
     "lion",

packages/progress-indicator/package.json

@@ -36,8 +36,8 @@
     "lion-progress-indicator.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/localize": "0.22.0"
+    "@lion/localize": "^0.22.0"
   },
   "keywords": [
     "lion",

packages/radio-group/package.json

@@ -38,9 +38,9 @@
     "lion-radio-group.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/input": "0.15.8"
+    "@lion/input": "^0.15.8"
   },
   "keywords": [
     "lion",

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/package.json

@@ -40,11 +40,11 @@
     "lion-select-rich.js"
   ],
   "dependencies": {
-    "@lion/button": "0.15.0",
+    "@lion/button": "^0.15.0",
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/listbox": "0.11.0",
+    "@lion/listbox": "^0.11.0",
-    "@lion/overlays": "0.30.0"
+    "@lion/overlays": "^0.30.0"
   },
   "keywords": [
     "field",

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/select/package.json

@@ -36,8 +36,8 @@
     "lion-select.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5"
+    "@lion/form-core": "^0.15.5"
   },
   "keywords": [
     "lion",

packages/steps/package.json

@@ -38,7 +38,7 @@
     "lion-steps.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0"
+    "@lion/core": "^0.20.0"
   },
   "keywords": [
     "lion",

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 => {

packages/switch/package.json

@@ -38,9 +38,9 @@
     "lion-switch-button.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/helpers": "0.9.6"
+    "@lion/helpers": "^0.9.6"
   },
   "keywords": [
     "lion",

packages/tabs/package.json

@@ -36,7 +36,7 @@
     "lion-tabs.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0"
+    "@lion/core": "^0.20.0"
   },
   "keywords": [
     "lion",

packages/textarea/package.json

@@ -36,8 +36,8 @@
     "lion-textarea.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
     "@types/autosize": "^3.0.7",
     "autosize": "4.0.2"
   },

packages/tooltip/package.json

@@ -36,8 +36,8 @@
     "lion-tooltip.js"
   ],
   "dependencies": {
-    "@lion/core": "0.20.0",
+    "@lion/core": "^0.20.0",
-    "@lion/overlays": "0.30.0"
+    "@lion/overlays": "^0.30.0"
   },
   "keywords": [
     "lion",

packages/validate-messages/package.json

@@ -32,8 +32,8 @@
     "test": "cd ../../ && npm run test:browser -- --group validate-messages"
   },
   "dependencies": {
-    "@lion/form-core": "0.15.5",
+    "@lion/form-core": "^0.15.5",
-    "@lion/localize": "0.22.0"
+    "@lion/localize": "^0.22.0"
   },
   "keywords": [
     "feedback",

scripts/lint-versions.js

@@ -38,7 +38,13 @@ function compareVersions(versionsA, versionsB) {
   let output = '';
   const newVersions = { ...versionsA };
   Object.keys(versionsB).forEach(dep => {
-    if (versionsA[dep] && versionsB[dep] && versionsA[dep] !== versionsB[dep]) {
+    if (
+      versionsA[dep] &&
+      versionsB[dep] &&
+      `^${versionsA[dep]}` !== versionsB[dep] && // allow carets
+      `~${versionsA[dep]}` !== versionsB[dep] && // allow tildes
+      versionsA[dep] !== versionsB[dep] // allow fixed
+    ) {
       output += `  - "${dep}" should be "${versionsA[dep]}" but is "${versionsB[dep]}"\n`;
     }
     if (!newVersions[dep]) {

yarn.lock

@@ -11734,10 +11734,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.9.7:
+typescript@4.5.5:
-  version "3.9.7"
+  version "4.5.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
-  integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
+  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
 
 typescript@~4.3.2:
   version "4.3.5"