fix: normalize dependencies

Co-authored-by: jorenbroekema <Joren.Broekema@ing.com>

.changeset/neat-penguins-collect.md

@@ -0,0 +1,45 @@
+---
+'babel-plugin-extend-docs': patch
+'providence-analytics': patch
+'remark-extend': patch
+'@lion/accordion': patch
+'@lion/ajax': patch
+'@lion/button': patch
+'@lion/calendar': patch
+'@lion/checkbox-group': patch
+'@lion/collapsible': patch
+'@lion/combobox': patch
+'@lion/core': patch
+'@lion/dialog': patch
+'@lion/fieldset': patch
+'@lion/form': patch
+'@lion/form-core': patch
+'@lion/form-integrations': patch
+'@lion/helpers': patch
+'@lion/icon': patch
+'@lion/input': patch
+'@lion/input-amount': patch
+'@lion/input-date': patch
+'@lion/input-datepicker': patch
+'@lion/input-email': patch
+'@lion/input-iban': patch
+'@lion/input-range': patch
+'@lion/input-stepper': patch
+'@lion/listbox': patch
+'@lion/localize': patch
+'@lion/overlays': patch
+'@lion/pagination': patch
+'@lion/progress-indicator': patch
+'@lion/radio-group': patch
+'@lion/select': patch
+'@lion/select-rich': patch
+'singleton-manager': patch
+'@lion/steps': patch
+'@lion/switch': patch
+'@lion/tabs': patch
+'@lion/textarea': patch
+'@lion/tooltip': patch
+'@lion/validate-messages': patch
+---
+
+Ensure all lit imports are imported from @lion/core. Remove devDependencies in all subpackages and move to root package.json. Add demo dependencies as real dependencies for users that extend our docs/demos.

demo/README.md

@@ -149,7 +149,7 @@ npm i lit-element @lion/tabs
 Create a `lea-tabs` component by reusing the functionality of Lion. This gives Lea all the functionality and accessible core that she needs for his custom tabs component.
 
 ```js
-import { css } from 'lit-element';
+import { css } from '@lion/core';
 import { LionTabs } from '@lion/tabs';
 
 export class LeaTabs extends LionTabs {
@@ -178,7 +178,7 @@ customElements.define('lea-tabs', LeaTabs);
 Lea also wants to be able to style the tab and tab-panel according to Betatechs visual identity. In order to do so, she creates a `lea-tab-panel` component and a `lea-tab` component, which she can then fully style however she desires, and eventually place inside the `lea-tabs` component. You can see how Lea achieved this in the example down below.
 
 ```js
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from '@lion/core';
 
 export class LeaTab extends LitElement {
   static get styles() {

demo/docs/20-lea-tabs.md

@@ -7,7 +7,7 @@
 `lea-tabs` implements tabs view to allow users to quickly move between a small number of equally important views.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { LitElement } from '@lion/core';
 
 import '../lea-tabs.js';

demo/src/LeaTab.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element';
+import { css, html, LitElement } from '@lion/core';
 
 export class LeaTab extends LitElement {
   static get styles() {

demo/src/LeaTabPanel.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from '@lion/core';
 
 export class LeaTabPanel extends LitElement {
   static get styles() {

demo/src/LeaTabs.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from '@lion/core';
 import { LionTabs } from '@lion/tabs';
 
 export class LeaTabs extends LionTabs {

package.json

@@ -36,6 +36,8 @@
     "test:screenshots:update": "cross-env UPDATE_SCREENSHOTS=true npm run test:screenshots"
   },
   "devDependencies": {
+    "@babel/core": "^7.10.1",
+    "@bundled-es-modules/fetch-mock": "^6.5.2",
     "@changesets/cli": "^2.9.2",
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.0",
@@ -68,16 +70,21 @@
     "lint-staged": "^10.0.0",
     "looks-same": "^7.2.3",
     "markdownlint-cli": "^0.17.0",
+    "mermaid": "^8.2.6",
     "minimist": "^1.2.5",
     "mkdirp-promise": "^5.0.1",
     "mocha": "^7.1.1",
+    "mock-fs": "^4.10.1",
     "npm-run-all": "^4.1.5",
+    "nyc": "^15.0.0",
     "playwright": "^1.7.1",
     "prettier": "^2.0.5",
     "prettier-package-json": "^2.1.3",
+    "remark-html": "^11.0.1",
     "rimraf": "^2.6.3",
     "rollup": "^2.0.0",
     "sinon": "^7.2.2",
+    "ssl-root-cas": "^1.3.1",
     "typescript": "3.9.7",
     "web-component-analyzer": "^1.0.3",
     "webpack-merge": "^4.1.5",

packages-node/babel-plugin-extend-docs/README.md

@@ -80,7 +80,7 @@ paths: [
 We have an existing demo code which we want to reuse.
 
 ```js
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from '@lion/core';
 import './my-counter.js';
 class MyApp extends LitElement {
   render() {
@@ -109,7 +109,7 @@ tag: {
 ### Result of Replacement of tags
 
 ```js
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from '@lion/core';
 import './my-extension/my-extension.js';
 class MyApp extends LitElement {
   render() {
@@ -127,7 +127,7 @@ customElements.define('my-app', MyApp);
 We have an existing demo code which we want to reuse.
 
 ```js
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from '@lion/core';
 import { MyCounter } from './src/MyCounter.js';
 class TenCounter extends MyCounter {
   inc() {
@@ -163,7 +163,7 @@ variable: {
 ### Result of Replacement of classes
 
 ```js
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from '@lion/core';
 import { MyExtension } from './my-extension/index.js';
 class TenCounter extends MyExtension {
   inc() {

packages-node/babel-plugin-extend-docs/demo/my-app.demo.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from '@lion/core';
 
 import { MyCounter } from './src/MyCounter.js';
 import './my-counter.js';

packages-node/babel-plugin-extend-docs/demo/my-extension/MyExtension.js

@@ -1,4 +1,4 @@
-import { html, css } from 'lit-element';
+import { html, css } from '@lion/core';
 import { MyCounter } from '../src/MyCounter.js';
 
 export class MyExtension extends MyCounter {

packages-node/babel-plugin-extend-docs/demo/src/MyCounter.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from '@lion/core';
 
 export class MyCounter extends LitElement {
   static get properties() {

packages-node/babel-plugin-extend-docs/package.json

@@ -24,13 +24,6 @@
     "test:node": "mocha test-node",
     "test:watch": "mocha test-node --watch"
   },
-  "devDependencies": {
-    "@babel/core": "^7.10.1",
-    "mermaid": "^8.2.6",
-    "mock-fs": "^4.10.1",
-    "nyc": "^15.0.0",
-    "ssl-root-cas": "^1.3.1"
-  },
   "keywords": [
     "babel",
     "extend"

packages-node/babel-plugin-extend-docs/test-node/integration.test.js

@@ -27,7 +27,7 @@ const extendDocsConfig = {
 
 describe('babel-plugin-extend-docs: integration tests', () => {
   it('works for the demo', () => {
-    const code = `import { LitElement, html } from 'lit-element';
+    const code = `import { LitElement, html } from '@lion/core';
 import { MyCounter } from './src/MyCounter.js';
 import './my-counter.js';
 
@@ -52,7 +52,7 @@ class MyApp extends LitElement {
 
 customElements.define('my-app', MyApp);
 `;
-    const output = `import { LitElement, html } from "lit-element";
+    const output = `import { LitElement, html } from "@lion/core";
 import { MyExtension } from "./my-extension/index.js";
 import "./my-extension/my-extension.js";
 

packages-node/providence-analytics/README.md

@@ -3,7 +3,7 @@
 # Providence
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { providenceFlowSvg, providenceInternalFlowSvg } from './docs/_mermaid.svg.js';
 
 export default {

packages-node/providence-analytics/package.json

@@ -52,12 +52,6 @@
     "semver": "^7.1.3",
     "typescript": "3.9.7"
   },
-  "devDependencies": {
-    "mermaid": "^8.2.6",
-    "mock-fs": "^4.10.1",
-    "nyc": "^15.0.0",
-    "ssl-root-cas": "^1.3.1"
-  },
   "keywords": [
     "analysis",
     "impact",

packages-node/remark-extend/package.json

@@ -30,9 +30,6 @@
     "unist-util-select": "^3.0.1",
     "unist-util-visit": "^2.0.2"
   },
-  "devDependencies": {
-    "remark-html": "^11.0.1"
-  },
   "keywords": [
     "remark"
   ],

packages/accordion/README.md

@@ -6,8 +6,8 @@
 Its purpose is to reduce the need to scroll when presenting multiple sections of content on a single page. Accordions often allow users to get the big picture before focusing on details.
 
 ```js script
-import { LitElement } from 'lit-element';
+import { LitElement } from '@lion/core';
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import './lion-accordion.js';
 
 export default {

packages/accordion/src/LionAccordion.js

@@ -194,7 +194,7 @@ export class LionAccordion extends LitElement {
     this.__expanded = [];
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this.__setupSlots();

packages/ajax/README.md

@@ -4,7 +4,7 @@
 It is a promise based system for fetching data, based on [axios](https://github.com/axios/axios)
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { ajax } from './src/ajax.js';
 import { AjaxClass } from './src/AjaxClass.js';
 

packages/button/README.md

@@ -5,7 +5,7 @@
 `lion-button` provides a button component that is easily styleable and is accessible.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 
 import './lion-button.js';
 import iconSvg from './docs/assets/icon.svg.js';

packages/button/src/LionButton.js

@@ -196,7 +196,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
   }
 
   /**
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('@lion/core').PropertyValues } changedProperties
    */
   updated(changedProperties) {
     super.updated(changedProperties);

packages/calendar/src/LionCalendar.js

@@ -281,7 +281,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     }
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has('__focusedDate') && this.__focusedDate) {

packages/checkbox-group/README.md

@@ -8,7 +8,7 @@ Its purpose is to provide a way for users to check **multiple** options amongst
 > You should use `<lion-checkbox>` elements as the children of the `<lion-checkbox-group>`.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { Required, Validator } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import './lion-checkbox-group.js';

packages/checkbox-group/package.json

@@ -37,7 +37,8 @@
     "@lion/core": "0.13.6",
     "@lion/fieldset": "0.15.12",
     "@lion/form-core": "0.6.14",
-    "@lion/input": "0.10.12"
+    "@lion/input": "0.10.12",
+    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "checkbox-group",

packages/checkbox-group/src/LionCheckboxGroup.js

@@ -11,7 +11,7 @@ export class LionCheckboxGroup extends ChoiceGroupMixin(FormGroupMixin(LitElemen
     this.multipleChoice = true;
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has('name') && !String(this.name).match(/\[\]$/)) {

packages/collapsible/README.md

@@ -3,7 +3,7 @@
 `lion-collapsible` is a combination of a button (the invoker), a chunk of 'extra content', and an animation that is used to disclose the extra content. There are two slots available respectively; `invoker` to specify collapsible invoker and `content` for the extra content of the collapsible.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 
 import './lion-collapsible.js';
 import './demo/custom-collapsible.js';

packages/collapsible/src/LionCollapsible.js

@@ -67,7 +67,7 @@ export class LionCollapsible extends LitElement {
 
   /**
    * Update aria labels on state change.
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('@lion/core').PropertyValues } changedProperties
    */
   updated(changedProperties) {
     if (changedProperties.has('opened')) {

packages/combobox/README.md

@@ -13,7 +13,7 @@ availability of the popup.
 > Fore more information, consult [Combobox wai-aria design pattern](https://www.w3.org/TR/wai-aria-practices/#combobox)
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { Required } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { listboxData } from '@lion/listbox/docs/listboxData.js';

packages/combobox/docs/LinkMixin.js

@@ -1,7 +1,7 @@
 import { dedupeMixin } from '@lion/core';
 
 /**
- * @typedef {import('lit-element').PropertyValues } changedProperties
+ * @typedef {import('@lion/core').PropertyValues } changedProperties
  */
 
 /**

packages/combobox/docs/Subclassers.md

@@ -1,7 +1,7 @@
 # Combobox Extensions
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import './md-combobox/md-combobox.js';
 import './gh-combobox/gh-combobox.js';
 import './wa-combobox/wa-combobox.js';

packages/combobox/docs/demo-selection-display.js

@@ -94,7 +94,7 @@ export class DemoSelectionDisplay extends LitElement {
   }
 
   /**
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('@lion/core').PropertyValues } changedProperties
    */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
@@ -106,7 +106,7 @@ export class DemoSelectionDisplay extends LitElement {
   }
 
   /**
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('@lion/core').PropertyValues } changedProperties
    */
   onComboboxElementUpdated(changedProperties) {
     if (changedProperties.has('modelValue')) {

packages/combobox/package.json

@@ -45,9 +45,7 @@
     "@lion/core": "0.13.6",
     "@lion/form-core": "0.6.14",
     "@lion/listbox": "0.3.12",
-    "@lion/overlays": "0.22.8"
+    "@lion/overlays": "0.22.8",
-  },
-  "devDependencies": {
     "@lion/validate-messages": "0.3.12"
   },
   "keywords": [

packages/combobox/src/LionCombobox.js

@@ -300,7 +300,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
   }
 
   /**
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('@lion/core').PropertyValues } changedProperties
    */
   updated(changedProperties) {
     super.updated(changedProperties);

packages/combobox/test/lion-combobox.test.js

@@ -533,7 +533,7 @@ describe('lion-combobox', () => {
   describe('Selection display', () => {
     class MySelectionDisplay extends LitElement {
       /**
-       * @param {import('lit-element').PropertyValues } changedProperties
+       * @param {import('@lion/core').PropertyValues } changedProperties
        */
       onComboboxElementUpdated(changedProperties) {
         if (

packages/core/index.d.ts

@@ -21,12 +21,14 @@ export { EventTargetShim } from './src/EventTargetShim.js';
 export {
   css,
   CSSResult,
+  CSSResultArray,
   customElement,
   defaultConverter,
   eventOptions,
   LitElement,
   notEqual,
   property,
+  PropertyValues,
   query,
   queryAll,
   supportsAdoptingStyleSheets,

packages/core/types/DisabledMixinTypes.d.ts

@@ -1,5 +1,5 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
-import { LitElement } from 'lit-element';
+import { LitElement } from '../index.js';
 
 export declare class DisabledHost {
   disabled: boolean;

packages/core/types/DisabledWithTabIndexMixinTypes.d.ts

@@ -1,6 +1,6 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { DisabledHost } from './DisabledMixinTypes';
-import { LitElement } from 'lit-element';
+import { LitElement } from '../index.js';
 export declare class DisabledWithTabIndexHost {
   tabIndex: number;
   /**

packages/dialog/README.md

@@ -6,7 +6,7 @@
 Its purpose is to make it easy to use our Overlay System declaratively.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import demoStyle from './docs/demo-dialog-style.js';
 import './docs/styled-dialog-content.js';
 import './docs/slots-dialog-content.js';

packages/fieldset/README.md

@@ -3,7 +3,7 @@
 `lion-fieldset` groups multiple input fields or other fieldsets together.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import '@lion/input/lion-input.js';
 import { localize } from '@lion/localize';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';

packages/fieldset/package.json

@@ -35,7 +35,8 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/form-core": "0.6.14"
+    "@lion/form-core": "0.6.14",
+    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "fieldset",

packages/form-core/package.json

@@ -35,6 +35,7 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
+    "@lion/input": "0.10.12",
     "@lion/localize": "0.15.3"
   },
   "keywords": [

packages/form-core/src/FormControlMixin.js

@@ -231,7 +231,7 @@ const FormControlMixinImplementation = superclass =>
       }
     }
 
-    /** @param {import('lit-element').PropertyValues } changedProperties */
+    /** @param {import('@lion/core').PropertyValues } changedProperties */
     updated(changedProperties) {
       super.updated(changedProperties);
 

packages/form-core/src/LionField.js

@@ -46,7 +46,7 @@ export class LionField extends FormControlMixin(
   }
 
   /**
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('@lion/core').PropertyValues } changedProperties
    */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);

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

@@ -161,7 +161,7 @@ const ChoiceGroupMixinImplementation = superclass =>
       });
     }
 
-    /** @param {import('lit-element').PropertyValues} changedProperties */
+    /** @param {import('@lion/core').PropertyValues} changedProperties */
     updated(changedProperties) {
       super.updated(changedProperties);
       if (changedProperties.has('name') && this.name !== changedProperties.get('name')) {

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

@@ -92,7 +92,7 @@ const ChoiceInputMixinImplementation = superclass =>
     }
 
     /**
-     * @param {import('lit-element').PropertyValues } changedProperties
+     * @param {import('@lion/core').PropertyValues } changedProperties
      */
     firstUpdated(changedProperties) {
       super.firstUpdated(changedProperties);
@@ -104,7 +104,7 @@ const ChoiceInputMixinImplementation = superclass =>
     }
 
     /**
-     * @param {import('lit-element').PropertyValues } changedProperties
+     * @param {import('@lion/core').PropertyValues } changedProperties
      */
     updated(changedProperties) {
       super.updated(changedProperties);

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

@@ -207,7 +207,7 @@ const FormGroupMixinImplementation = superclass =>
     }
 
     /**
-     * @param {import('lit-element').PropertyValues } changedProperties
+     * @param {import('@lion/core').PropertyValues } changedProperties
      */
     updated(changedProperties) {
       super.updated(changedProperties);

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

@@ -34,7 +34,7 @@ const SyncUpdatableMixinImplementation = superclass =>
       this.__SyncUpdatableNamespace = {};
     }
 
-    /** @param {import('lit-element').PropertyValues } changedProperties */
+    /** @param {import('@lion/core').PropertyValues } changedProperties */
     firstUpdated(changedProperties) {
       super.firstUpdated(changedProperties);
       this.__SyncUpdatableNamespace.connected = true;

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

@@ -33,7 +33,7 @@ export class LionValidationFeedback extends LitElement {
   }
 
   /**
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('@lion/core').PropertyValues } changedProperties
    */
   updated(changedProperties) {
     super.updated(changedProperties);

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

@@ -171,7 +171,7 @@ export const ValidateMixinImplementation = superclass =>
     }
 
     /**
-     * @param {import('lit-element').PropertyValues} changedProperties
+     * @param {import('@lion/core').PropertyValues} changedProperties
      */
     firstUpdated(changedProperties) {
       super.firstUpdated(changedProperties);
@@ -607,7 +607,7 @@ export const ValidateMixinImplementation = superclass =>
       );
     }
 
-    /** @param {import('lit-element').PropertyValues} changedProperties */
+    /** @param {import('@lion/core').PropertyValues} changedProperties */
     updated(changedProperties) {
       super.updated(changedProperties);
 

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

@@ -26,7 +26,7 @@ describe('SyncUpdatableMixin', () => {
           this.propB = 'init-b';
         }
 
-        /** @param {import('lit-element').PropertyValues } changedProperties */
+        /** @param {import('@lion/core').PropertyValues } changedProperties */
         firstUpdated(changedProperties) {
           super.firstUpdated(changedProperties);
           hasCalledFirstUpdated = true;

packages/form-core/types/FormControlMixinTypes.d.ts

@@ -1,5 +1,4 @@
-import { CSSResultArray } from 'lit-element';
+import { LitElement, nothing, TemplateResult, CSSResultArray } from '@lion/core';
-import { LitElement, nothing, TemplateResult } from '@lion/core';
 import { SlotsMap, SlotHost } from '@lion/core/types/SlotMixinTypes';
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { DisabledHost } from '@lion/core/types/DisabledMixinTypes';
@@ -102,7 +101,7 @@ export declare class FormControlHost {
   _isRepropagationEndpoint: boolean;
 
   connectedCallback(): void;
-  updated(changedProperties: import('lit-element').PropertyValues): void;
+  updated(changedProperties: import('@lion/core').PropertyValues): void;
 
   render(): TemplateResult;
   _groupOneTemplate(): TemplateResult;

packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts

@@ -1,6 +1,6 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { LitElement, TemplateResult } from '@lion/core';
-import { CSSResultArray } from 'lit-element';
+import { CSSResultArray } from '@lion/core';
 import { FormatHost } from '../FormatMixinTypes';
 
 export interface ChoiceInputModelValue {

packages/form-core/types/utils/SyncUpdatableMixinTypes.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from '@lion/core';
 import { Constructor } from '@open-wc/dedupe-mixin';
-import { PropertyValues } from 'lit-element';
+import { PropertyValues } from '@lion/core';
 
 export declare interface SyncUpdatableNamespace {
   connected?: boolean;

packages/form-core/types/validate/ValidateMixinTypes.d.ts

@@ -41,9 +41,9 @@ export declare class ValidateHost {
 
   connectedCallback(): void;
   disconnectedCallback(): void;
-  firstUpdated(changedProperties: import('lit-element').PropertyValues): void;
+  firstUpdated(changedProperties: import('@lion/core').PropertyValues): void;
   updateSync(name: string, oldValue: unknown): void;
-  updated(changedProperties: import('lit-element').PropertyValues): void;
+  updated(changedProperties: import('@lion/core').PropertyValues): void;
 
   validate(opts?: { clearCurrentResult?: boolean }): void;
   __storePrevResult(): void;

packages/form-integrations/docs/15-features-overview.md

@@ -6,7 +6,7 @@ This is a meta package to show interaction between various form elements.
 For usage and installation please see the appropriate packages.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import '@lion/checkbox-group/lion-checkbox-group.js';
 import '@lion/checkbox-group/lion-checkbox.js';
 import '@lion/combobox/lion-combobox.js';

packages/form-integrations/docs/17-validation-examples.md

@@ -10,7 +10,7 @@ For an input that may mean that it is not an empty string,
 while for a checkbox group it means at least one checkbox needs to be checked.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 /* eslint-disable import/no-extraneous-dependencies */
 import { LionInput } from '@lion/input';
 import '@lion/input-amount/lion-input-amount.js';

packages/form-integrations/docs/30-system-formatting.md

@@ -3,7 +3,7 @@
 # Formatting and Parsing
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import '@lion/input/lion-input.js';
 import { Unparseable } from '@lion/form-core';
 import '../docs/helper-wc/h-output.js';

packages/form-integrations/docs/35-system-interaction-states.md

@@ -3,7 +3,7 @@
 # Interaction States
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { render } from '@lion/core';
 import { renderLitAsNode } from '@lion/helpers';
 import '@lion/input/lion-input.js';

packages/form-integrations/docs/40-system-creating-a-custom-field.md

@@ -3,7 +3,7 @@
 # Creating a custom field
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { render } from '@lion/core';
 import '@lion/input/lion-input.js';
 import { Validator } from '@lion/form-core';

packages/form-integrations/docs/50-content-inside-fields.md

@@ -3,7 +3,7 @@
 # Content inside fields
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import '@lion/input/lion-input.js';
 import '@lion/button/lion-button.js';
 

packages/form-integrations/docs/60-dialog-integration.md

@@ -3,7 +3,7 @@
 # Forms in a dialog
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import '@lion/dialog/lion-dialog.js';
 import '@lion/select-rich/lion-select-rich.js';
 import '@lion/listbox/lion-options.js';

packages/form-integrations/docs/fieldset-examples.md

@@ -3,7 +3,7 @@
 # Fieldset Examples
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import '@lion/input/lion-input.js';
 import { localize } from '@lion/localize';
 import { MinLength, Validator, Required } from '@lion/form-core';

packages/form/README.md

@@ -4,7 +4,7 @@
 It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview--page).
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import '@lion/input/lion-input.js';
 import './lion-form.js';
 

packages/form/package.json

@@ -34,7 +34,8 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/fieldset": "0.15.12"
+    "@lion/fieldset": "0.15.12",
+    "@lion/input": "0.10.12"
   },
   "keywords": [
     "form",

packages/helpers/sb-action-logger/README.md

@@ -5,7 +5,7 @@
 A visual element to show action logs in Storybook demos `sb-action-logger`
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 
 import '../sb-action-logger.js';
 

packages/icon/README.md

@@ -3,7 +3,7 @@
 A web component for displaying icons.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { icons } from './index.js';
 import './docs/icons/iconset-bugs.js';
 import './docs/icons/iconset-misc.js';

packages/icon/docs/system.md

@@ -15,7 +15,7 @@ application, and you don't need to worry about carefully coordinating the dynami
 For security reasons, icons are defined using lit-html templates to guarantee XSS safety:
 
 ```js
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 
 export default html` <svg focusable="false" ...>...</svg> `;
 ```

packages/icon/src/LionIcon.js

@@ -101,7 +101,7 @@ export class LionIcon extends LitElement {
     this.__svg = nothing;
   }
 
-  /** @param {import('lit-element').PropertyValues} changedProperties */
+  /** @param {import('@lion/core').PropertyValues} changedProperties */
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has('ariaLabel')) {

packages/input-amount/README.md

@@ -10,7 +10,7 @@ Valid characters are digits and separators. Formatting happens on-blur.
 If there are no valid characters in the input whatsoever, it will provide an error feedback.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 
 import './lion-input-amount.js';

packages/input-amount/package.json

@@ -36,9 +36,7 @@
     "@lion/core": "0.13.6",
     "@lion/form-core": "0.6.14",
     "@lion/input": "0.10.12",
-    "@lion/localize": "0.15.3"
+    "@lion/localize": "0.15.3",
-  },
-  "devDependencies": {
     "@lion/validate-messages": "0.3.12"
   },
   "keywords": [

packages/input-amount/src/LionInputAmount.js

@@ -89,7 +89,7 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     }
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has('currency') && this.currency) {

packages/input-date/README.md

@@ -3,7 +3,7 @@
 `lion-input-date` component is based on the generic text input field. Its purpose is to provide a way for users to fill in a date.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { MinDate, MinMaxDate, MaxDate } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 

packages/input-date/package.json

@@ -36,9 +36,7 @@
     "@lion/core": "0.13.6",
     "@lion/form-core": "0.6.14",
     "@lion/input": "0.10.12",
-    "@lion/localize": "0.15.3"
+    "@lion/localize": "0.15.3",
-  },
-  "devDependencies": {
     "@lion/validate-messages": "0.3.12"
   },
   "keywords": [

packages/input-date/src/LionInputDate.js

@@ -36,7 +36,7 @@ export class LionInputDate extends LocalizeMixin(LionInput) {
     this.defaultValidators.push(new IsDate());
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has('locale')) {

packages/input-datepicker/README.md

@@ -7,7 +7,7 @@ For an input field with a big range, such as `birthday-input`, a datepicker is n
 We encourage using the standard [lion-input-date](?path=/docs/form-component-input-date) for this.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { MinMaxDate, IsDateDisabled } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { formatDate } from '@lion/localize';

packages/input-datepicker/package.json

@@ -38,9 +38,7 @@
     "@lion/form-core": "0.6.14",
     "@lion/input-date": "0.8.12",
     "@lion/localize": "0.15.3",
-    "@lion/overlays": "0.22.8"
+    "@lion/overlays": "0.22.8",
-  },
-  "devDependencies": {
     "@lion/validate-messages": "0.3.12"
   },
   "keywords": [

packages/input-datepicker/src/LionInputDatepicker.js

@@ -205,13 +205,13 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     }
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this.__toggleInvokerDisabled();
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has('validators')) {

packages/input-email/README.md

@@ -3,7 +3,7 @@
 `lion-input-email` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an email.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { Validator } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 

packages/input-email/package.json

@@ -36,9 +36,7 @@
     "@lion/core": "0.13.6",
     "@lion/form-core": "0.6.14",
     "@lion/input": "0.10.12",
-    "@lion/localize": "0.15.3"
+    "@lion/localize": "0.15.3",
-  },
-  "devDependencies": {
     "@lion/validate-messages": "0.3.12"
   },
   "keywords": [

packages/input-iban/README.md

@@ -6,7 +6,7 @@
 Its purpose is to provide a way for users to fill in an IBAN (International Bank Account Number).
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { IsCountryIBAN, IsNotCountryIBAN } from './src/validators.js';
 

packages/input-iban/package.json

@@ -37,11 +37,9 @@
     "@lion/form-core": "0.6.14",
     "@lion/input": "0.10.12",
     "@lion/localize": "0.15.3",
+    "@lion/validate-messages": "0.3.12",
     "ibantools": "^2.2.0"
   },
-  "devDependencies": {
-    "@lion/validate-messages": "0.3.12"
-  },
   "keywords": [
     "input-iban",
     "lion",

packages/input-range/README.md

@@ -4,7 +4,7 @@
 Its purpose is to provide a way for users to select one value from a range of values.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 
 import './lion-input-range.js';
 

packages/input-range/package.json

@@ -34,7 +34,6 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/form-core": "0.6.14",
     "@lion/input": "0.10.12",
     "@lion/localize": "0.15.3"
   },

packages/input-range/src/LionInputRange.js

@@ -86,7 +86,7 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
     this.__teardownStyleTag();
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
 
@@ -103,7 +103,7 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
     }
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     if (changedProperties.has('modelValue')) {

packages/input-stepper/README.md

@@ -3,7 +3,7 @@
 `lion-input-stepper` enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot `after` to suffix the extra information.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import '@lion/form/lion-form.js';
 import './lion-input-stepper.js';
 

packages/input-stepper/package.json

@@ -34,6 +34,7 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
+    "@lion/form": "0.7.12",
     "@lion/form-core": "0.6.14",
     "@lion/input": "0.10.12"
   },

packages/input-stepper/src/LionInputStepper.js

@@ -84,7 +84,7 @@ export class LionInputStepper extends LionInput {
     this.removeEventListener('keydown', this.__keyDownHandler);
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
 

packages/input/README.md

@@ -3,7 +3,7 @@
 `lion-input` component is a webcomponent that enhances the functionality of the native `<input>` element.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { MaxLength } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 

packages/input/package.json

@@ -33,8 +33,9 @@
     "lion-input.js"
   ],
   "dependencies": {
-    "@lion/core": "0.13.6",
+    "@lion/form-core": "0.6.14",
-    "@lion/form-core": "0.6.14"
+    "@lion/localize": "0.15.3",
+    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "input",

packages/input/src/LionInput.js

@@ -71,13 +71,13 @@ export class LionInput extends NativeTextFieldMixin(LionField) {
     }
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this.__delegateReadOnly();
   }
 
-  /** @param {import('lit-element').PropertyValues } changedProperties */
+  /** @param {import('@lion/core').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has('type')) {

packages/listbox/package.json

@@ -36,7 +36,8 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/form-core": "0.6.14"
+    "@lion/form-core": "0.6.14",
+    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "form",

packages/listbox/src/LionOption.js

@@ -84,7 +84,7 @@ export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMi
   }
 
   /**
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('@lion/core').PropertyValues } changedProperties
    */
   updated(changedProperties) {
     super.updated(changedProperties);

packages/listbox/src/ListboxMixin.js

@@ -303,7 +303,7 @@ const ListboxMixinImplementation = superclass =>
     }
 
     /**
-     * @param {import('lit-element').PropertyValues } changedProperties
+     * @param {import('@lion/core').PropertyValues } changedProperties
      */
     firstUpdated(changedProperties) {
       super.firstUpdated(changedProperties);
@@ -315,7 +315,7 @@ const ListboxMixinImplementation = superclass =>
     }
 
     /**
-     * @param {import('lit-element').PropertyValues } changedProperties
+     * @param {import('@lion/core').PropertyValues } changedProperties
      */
     updated(changedProperties) {
       super.updated(changedProperties);

packages/localize/docs/10-features-overview.md

@@ -5,7 +5,7 @@
 ### As a function
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { render, LitElement } from '@lion/core';
 import { localize, formatNumber, formatDate, LocalizeMixin } from '../index.js';
 

packages/localize/package.json

@@ -35,9 +35,6 @@
     "@lion/core": "0.13.6",
     "singleton-manager": "1.2.0"
   },
-  "devDependencies": {
-    "@bundled-es-modules/fetch-mock": "^6.5.2"
-  },
   "keywords": [
     "lion",
     "localize",

packages/overlays/docs/20-index.md

@@ -3,7 +3,7 @@
 # Overlay System
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import { render, LitElement } from '@lion/core';
 import { renderLitAsNode } from '@lion/helpers';
 import {

packages/overlays/docs/40-system-configuration.md

@@ -3,7 +3,7 @@
 # Overlay System - Configuration
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@lion/core';
 import '../docs/demo-overlay-system.js';
 import '../docs/applyDemoOverlayStyles.js';
 

packages/overlays/docs/directives/ref.js

@@ -1,7 +1,7 @@
 import { directive } from '@lion/core';
 
 /**
- * @typedef {import('lit-html').PropertyPart} PropertyPart
+ * @typedef {import('@lion/core').PropertyPart} PropertyPart
  */
 
 /** @type {WeakSet<Element>} */

packages/overlays/src/OverlayMixin.js

@@ -111,7 +111,7 @@ export const OverlayMixinImplementation = superclass =>
     }
 
     /**
-     * @param {import('lit-element').PropertyValues } changedProperties
+     * @param {import('@lion/core').PropertyValues } changedProperties
      */
     updated(changedProperties) {
       super.updated(changedProperties);

packages/overlays/types/ArrowMixinTypes.d.ts

@@ -1,6 +1,6 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { LitElement, TemplateResult } from '@lion/core';
-import { CSSResultArray } from 'lit-element';
+import { CSSResultArray } from '@lion/core';
 import Data from 'popper.js';
 import { Options as PopperOptions } from '@popperjs/core/lib/popper';
 import { OverlayConfig } from '../types/OverlayConfig';