fix: use mdjs-preview in docs for lit compatibility

.changeset/red-pigs-try.md

@@ -0,0 +1,35 @@
+---
+'@lion/accordion': patch
+'@lion/button': patch
+'@lion/calendar': patch
+'@lion/checkbox-group': patch
+'@lion/collapsible': patch
+'@lion/combobox': patch
+'@lion/dialog': patch
+'@lion/fieldset': patch
+'@lion/form': patch
+'@lion/form-core': 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/pagination': patch
+'@lion/progress-indicator': patch
+'@lion/radio-group': patch
+'@lion/select': patch
+'@lion/ajax': patch
+'@lion/core': patch
+'@lion/form-integrations': patch
+'@lion/localize': patch
+'@lion/overlays': patch
+'@lion/validate-messages': patch
+---
+
+use mdjs-preview in docs for lit compatibility

README.md

@@ -67,7 +67,7 @@ npm i @lion/<package-name>
 **This is the main use case for lion**. To import component classes, and extend them for your own design system's components.
 
 ```js
-import { css } from '@lion/core';
+import { css } from '@mdjs/mdjs-preview';
 import { LionInput } from '@lion/input';
 
 class MyInput extends LionInput {

docs/blog/extending-lions-website.md

@@ -84,7 +84,7 @@ Let's convert an example page
 `lion-calendar` is a reusable and accessible calendar view. It depends on [calendar](?path=/docs/calendar--default-story).
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import './lion-calendar.js';
 
 export default {
@@ -103,7 +103,7 @@ export default {
 `lion-calendar` is a reusable and accessible calendar view. It depends on [calendar](../../path/to/calendar.md).
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import '@lion/calendar/define';
 ```
 

docs/blog/introducing-lions-website.md

@@ -36,7 +36,7 @@ Let's convert an example page
 `lion-calendar` is a reusable and accessible calendar view. It depends on [calendar](?path=/docs/calendar--default-story).
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import './lion-calendar.js';
 
 export default {
@@ -55,7 +55,7 @@ export default {
 `lion-calendar` is a reusable and accessible calendar view. It depends on [calendar](../../path/to/calendar.md).
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import '@lion/calendar/define';
 ```
 

docs/components/content/accordion/features.md

@@ -1,7 +1,7 @@
 # Content >> Accordion >> Features ||20
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 
 import '@lion/accordion/define';
 ```

docs/components/content/accordion/overview.md

@@ -4,7 +4,7 @@ A web component that can be used to toggle the display of sections of content.
 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 { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/accordion/define';
 ```
 

docs/components/content/collapsible/examples.md

@@ -1,7 +1,7 @@
 # Content >> Collapsible >> Examples ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/collapsible/define';
 import '@lion/button/define';
 import './assets/CustomCollapsible.js';

docs/components/content/collapsible/features.md

@@ -1,7 +1,7 @@
 # Content >> Collapsible >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/collapsible/define';
 ```
 

docs/components/content/collapsible/overview.md

@@ -3,7 +3,7 @@
 A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an animation to disclose the extra content. There are two slots available respectively; `invoker` to specify the collapsible's invoker and `content` for the extra content of the collapsible.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/collapsible/define';
 ```
 

docs/components/content/progress-indicator/examples.md

@@ -1,7 +1,7 @@
 # Content >> Progress Indicator >> Examples ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import './assets/custom-progress-indicator.js';
 ```
 

docs/components/content/tabs/examples.md

@@ -1,7 +1,7 @@
 # Content >> Tabs >> Examples ||30
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import './src/lea-tabs.js';
 import './src/lea-tab.js';
 import './src/lea-tab-panel.js';

docs/components/content/tabs/features.md

@@ -1,7 +1,7 @@
 # Content >> Tabs >> Features ||20
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 
 import '@lion/tabs/define';
 ```

docs/components/content/tabs/overview.md

@@ -3,7 +3,7 @@
 A web component that allows users to quickly move between a small number of equally important views.
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import '@lion/tabs/define';
 ```
 

docs/components/icons/icon/features.md

@@ -1,7 +1,7 @@
 # Icons >> Icon >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { icons } from '@lion/icon';
 import './assets/iconset-bugs.js';
 import './assets/iconset-misc.js';

docs/components/icons/icon/overview.md

@@ -3,7 +3,7 @@
 A web component for displaying icons.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { icons } from '@lion/icon';
 import '@lion/icon/define';
 

docs/components/inputs/calendar/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Calendar >> Features ||20
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import '@lion/calendar/define';
 ```
 

docs/components/inputs/calendar/overview.md

@@ -3,7 +3,7 @@
 A reusable and accessible calendar view web component.
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import '@lion/calendar/define';
 ```
 

docs/components/inputs/checkbox-group/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Checkbox Group >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/checkbox-group/define';
 ```
 

docs/components/inputs/checkbox-group/overview.md

@@ -6,7 +6,7 @@ Its purpose is to provide a way for users to check **multiple** options amongst
 > You should use our `checkbox` elements as children in checkbox group.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/checkbox-group/define';
 ```
 

docs/components/inputs/combobox/examples.md

@@ -1,7 +1,7 @@
 # Inputs >> Combobox >> Examples ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import './src/md-combobox/md-combobox.js';
 import './src/gh-combobox/gh-combobox.js';
 import './src/wa-combobox/wa-combobox.js';

docs/components/inputs/combobox/features.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 { LitElement, html, repeat } from '@lion/core';
+import { LitElement, html, repeat } from '@mdjs/mdjs-preview';
 import { listboxData } from '../../../../packages/listbox/docs/listboxData.js';
 import { LionCombobox } from '../../../../packages/combobox/src/LionCombobox.js';
 import '@lion/listbox/define';

docs/components/inputs/combobox/overview.md

@@ -13,7 +13,7 @@ availability of the pop-up.
 > Fore more information, consult [Combobox wai-aria design pattern](https://www.w3.org/TR/wai-aria-practices/#combobox)
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { listboxData } from '../../../../packages/listbox/docs/listboxData.js';
 import '@lion/listbox/define';
 import '@lion/combobox/define';

docs/components/inputs/fieldset/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Fieldset >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { localize } from '@lion/localize';
 import { MinLength, Validator, Required } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';

docs/components/inputs/fieldset/overview.md

@@ -1,7 +1,7 @@
 # Inputs >> Fieldset >> Overview ||10
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 
 import '@lion/input/define';
 import '@lion/fieldset/define';

docs/components/inputs/form/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Form >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { Required } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import '@lion/input/define';

docs/components/inputs/form/overview.md

@@ -1,7 +1,7 @@
 # Inputs >> Form >> Overview ||10
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 
 import '@lion/input/define';
 import '@lion/form/define';

docs/components/inputs/input-amount/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Input Amount >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { MaxLength } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 

docs/components/inputs/input-amount/overview.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 '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-amount/define';
 ```
 

docs/components/inputs/input-date/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Input Date >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { MinDate, MinMaxDate, MaxDate } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { formatDate } from '@lion/localize';

docs/components/inputs/input-date/overview.md

@@ -3,7 +3,7 @@
 A web component 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 '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { MinDate, MinMaxDate, MaxDate } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { formatDate } from '@lion/localize';

docs/components/inputs/input-datepicker/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Input Datepicker >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { MinMaxDate, IsDateDisabled } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { formatDate } from '@lion/localize';

docs/components/inputs/input-datepicker/overview.md

@@ -5,7 +5,7 @@ For an input field with a big range, such as `birthday-input`, a datepicker is n
 We encourage using our standard [input-date](../input-date/overview.md) for this.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-datepicker/define';
 ```
 

docs/components/inputs/input-email/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Input Email >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { Validator } from '@lion/form-core';
 import '@lion/input-email/define';
 ```

docs/components/inputs/input-email/overview.md

@@ -3,7 +3,7 @@
 A web component 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 '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-email/define';
 ```
 

docs/components/inputs/input-iban/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Input Iban >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { IsCountryIBAN, IsNotCountryIBAN } from '@lion/input-iban';
 import '@lion/input-iban/define';

docs/components/inputs/input-iban/overview.md

@@ -4,7 +4,7 @@ A web component based on the generic text input field.
 Its purpose is to provide a way for users to fill in an IBAN (International Bank Account Number).
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-iban/define';
 ```
 

docs/components/inputs/input-range/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Input Range >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-range/define';
 ```
 

docs/components/inputs/input-range/overview.md

@@ -3,7 +3,7 @@
 A web component based on the native range input. Its purpose is to provide a way for users to select one value from a range of values.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-range/define';
 ```
 

docs/components/inputs/input-stepper/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Input Stepper >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-stepper/define';
 ```
 

docs/components/inputs/input-stepper/overview.md

@@ -3,7 +3,7 @@
 A web component that 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 '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-stepper/define';
 ```
 

docs/components/inputs/input/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Input >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input/define';
 ```
 

docs/components/inputs/input/overview.md

@@ -1,7 +1,7 @@
 # Inputs >> Input >> Overview ||10
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input/define';
 ```
 

docs/components/inputs/listbox/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Listbox >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { listboxData } from './src/listboxData.js';
 import '@lion/listbox/define';
 ```

docs/components/inputs/listbox/overview.md

@@ -7,7 +7,7 @@ multiple options to be selected is a `multi-select listbox`.
 > From [listbox wai-aria best practices](https://www.w3.org/TR/wai-aria-practices/#Listbox)
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/listbox/define';
 ```
 

docs/components/inputs/radio-group/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Radio Group >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/radio-group/define';
 import '@lion/radio-group/define';
 ```

docs/components/inputs/radio-group/overview.md

@@ -5,7 +5,7 @@ A web component that enhances the functionality of the native `<input type="radi
 You should use our `radio` inside this element.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/radio-group/define';
 ```
 

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

@@ -1,7 +1,7 @@
 # Inputs >> Select Rich >> Features ||20
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import '@lion/listbox/define';
 import '@lion/listbox/define';
 import '@lion/select-rich/define';

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

@@ -8,7 +8,7 @@ Its implementation is based on the following Design pattern:
 <https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html>
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import '@lion/listbox/define';
 import '@lion/select-rich/define';
 ```

docs/components/inputs/select/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Select >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/select/define';
 ```
 

docs/components/inputs/select/overview.md

@@ -6,7 +6,7 @@ You cannot use interactive elements inside the options. Avoid very long names to
 Sets of options where each option name starts with the same word or phrase can also significantly degrade usability for keyboard and screen reader users.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/select/define';
 ```
 

docs/components/inputs/textarea/features.md

@@ -1,7 +1,7 @@
 # Inputs >> Textarea >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/textarea/define';
 ```
 

docs/components/inputs/textarea/overview.md

@@ -4,7 +4,7 @@ A webcomponent that enhances the functionality of the native `<input type="texta
 Its purpose is to provide a way for users to write text that is multiple lines long.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/textarea/define';
 ```
 

docs/components/interaction/button/examples.md

@@ -1,7 +1,7 @@
 # Interaction >> Button >> Examples ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/button/define';
 import iconSvg from './src/icon.svg.js';
 ```

docs/components/interaction/button/features.md

@@ -1,7 +1,7 @@
 # Interaction >> Button >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/button/define';
 ```
 

docs/components/interaction/button/overview.md

@@ -3,7 +3,7 @@
 A button web component that is easily stylable and accessible.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/button/define';
 ```
 

docs/components/interaction/dialog/features.md

@@ -4,7 +4,7 @@
 Its purpose is to make it easy to use our Overlay System declaratively.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/dialog/define';
 
 import { demoStyle } from './src/demoStyle.js';

docs/components/interaction/dialog/overview.md

@@ -4,7 +4,7 @@ A web component that wraps a modal dialog controller.
 Its purpose is to make it easy to use our Overlay System declaratively.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/dialog/define';
 
 import { demoStyle } from './src/demoStyle.js';

docs/components/interaction/tooltip/examples.md

@@ -1,7 +1,7 @@
 # Interaction >> Tooltip >> Examples ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/tooltip/define';
 ```
 

docs/components/interaction/tooltip/features.md

@@ -1,7 +1,7 @@
 # Interaction >> Tooltip >> Features ||20
 
 ```js script
-import { css, html } from '@lion/core';
+import { css, html } from '@mdjs/mdjs-preview';
 import { LionTooltip } from '@lion/tooltip';
 import '@lion/tooltip/define';
 ```

docs/components/interaction/tooltip/overview.md

@@ -4,7 +4,7 @@ A web component used for basic popups on hover.
 Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if the invoker element is focused.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/tooltip/define';
 ```
 

docs/components/navigation/pagination/features.md

@@ -1,7 +1,7 @@
 # Navigation >> Pagination >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/pagination/define';
 ```
 

docs/components/navigation/pagination/overview.md

@@ -3,7 +3,7 @@
 A web component that handles pagination.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/pagination/define';
 ```
 

docs/components/navigation/steps/features.md

@@ -1,7 +1,7 @@
 # Navigation >> Steps >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/steps/define';
 import '@lion/steps/define';
 ```

docs/components/navigation/steps/overview.md

@@ -3,7 +3,7 @@
 A web component that can be used to break a single goal down into dependable sub-tasks.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/steps/define';
 ```
 

docs/docs/node-tools/babel-plugin-extend-docs/overview.md

@@ -83,7 +83,7 @@ paths: [
 We have an existing demo code which we want to reuse.
 
 ```js
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import 'source-pkg/counter/define';
 class MyApp extends LitElement {
   render() {
@@ -112,7 +112,7 @@ tag: {
 ### Result of Replacement of tags
 
 ```js
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import 'extension-pkg/counter/define';
 class MyApp extends LitElement {
   render() {
@@ -130,7 +130,7 @@ customElements.define('my-app', MyApp);
 We have an existing demo code which we want to reuse.
 
 ```js
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import { SourceCounter } from 'source-pkg/counter';
 class TenCounter extends SourceCounter {
   inc() {
@@ -167,7 +167,7 @@ variable: {
 ### Result of Replacement of classes
 
 ```js
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import { SourceCounter } from 'extension-pkg/counter';
 class TenCounter extends SourceCounter {
   inc() {

docs/docs/node-tools/providence-analytics/overview.md

@@ -1,7 +1,7 @@
 # Node Tools >> Providence Analytics >> Overview ||10
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { providenceFlowSvg, providenceInternalFlowSvg } from './assets/_mermaid.svg.js';
 ```
 

docs/docs/node-tools/rocket-preset-extend-lion-docs/overview.md

@@ -76,7 +76,7 @@ as an example this is a part of the lion docs for tabs
 
 ````md
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import '@lion/tabs/define';
 ```
 

docs/docs/systems/core/overview.md

@@ -7,7 +7,7 @@ To be sure a compatible version is used you should import it via this package.
 
 ```js
 // DO
-import { LitElement, html, render } from '@lion/core';
+import { LitElement, html, render } from '@mdjs/mdjs-preview';
 
 // DON'T
 import { LitElement, html, render } from 'lit-element';
@@ -29,7 +29,7 @@ npm i --save @lion/core
 ```
 
 ```js
-import { dedupeMixin, LitElement } from '@lion/core';
+import { dedupeMixin, LitElement } from '@mdjs/mdjs-preview';
 ```
 
 ### Example

docs/docs/systems/form/features.md

@@ -4,7 +4,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 '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/button/define';
 import '@lion/checkbox-group/define';
 import '@lion/combobox/define';

docs/docs/systems/form/formatting-and-parsing.md

@@ -1,7 +1,7 @@
 # Systems >> Form >> Formatting and Parsing ||21
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input/define';
 import { Unparseable } from '@lion/form-core';
 import './assets/h-output.js';

docs/docs/systems/form/interaction-states.md

@@ -1,7 +1,7 @@
 # Systems >> Form >> Interaction States ||22
 
 ```js script
-import { html, render } from '@lion/core';
+import { html, render } from '@mdjs/mdjs-preview';
 import { renderLitAsNode } from '@lion/helpers';
 import '@lion/input/define';
 import '@lion/input-date/define';

docs/docs/systems/form/styling.md

@@ -1,7 +1,7 @@
 # Systems >> Form >> Styling ||40
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input/define';
 import '@lion/button/define';
 ```

docs/docs/systems/form/validate.md

@@ -1,7 +1,7 @@
 # Systems >> Form >> Validate ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { LionInput } from '@lion/input';
 import '@lion/checkbox-group/define';
 import '@lion/checkbox-group/define';

docs/docs/systems/icon/overview.md

@@ -9,7 +9,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 '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 
 export default html` <svg focusable="false" ...>...</svg> `;
 ```

docs/docs/systems/localize/dates.md

@@ -12,7 +12,7 @@ With the `formatDate` you can safely display dates for all languages.
 The input value is `new Date('1987/05/12')`.
 
 ```js script
-import { css, html } from '@lion/core';
+import { css, html } from '@mdjs/mdjs-preview';
 import { formatNumber, formatNumberToParts, formatDate } from '@lion/localize';
 import allLocales from './assets/all-locales.js';
 

docs/docs/systems/localize/numbers.md

@@ -12,7 +12,7 @@ With the `formatNumber` you can safely display a number for all languages.
 The input value is `1234.56`.
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import { formatNumber, formatNumberToParts } from '@lion/localize';
 import allLocales from './assets/all-locales.js';
 

docs/docs/systems/localize/text.md

@@ -3,7 +3,7 @@
 ## As a function
 
 ```js script
-import { html, render, LitElement } from '@lion/core';
+import { html, render, LitElement } from '@mdjs/mdjs-preview';
 import { localize, formatNumber, formatDate, LocalizeMixin } from '@lion/localize';
 import '@lion/helpers/define';
 ```

docs/docs/systems/overlays/configuration.md

@@ -1,7 +1,7 @@
 # Systems >> Overlays >> Configuration ||40
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import './assets/demo-overlay-system.js';
 import './assets/applyDemoOverlayStyles.js';
 ```

docs/docs/systems/overlays/features.md

@@ -1,7 +1,7 @@
 # Systems >> Overlays >> Features ||20
 
 ```js script
-import { html, render, LitElement } from '@lion/core';
+import { html, render, LitElement } from '@mdjs/mdjs-preview';
 import { renderLitAsNode } from '@lion/helpers';
 import {
   ArrowMixin,
@@ -481,7 +481,7 @@ By default, there are only a few `OverlayMixin` methods you need to override to
 - `_teardownOpenCloseListeners`, use this lifecycle hook to ensure that the listeners are removed when the OverlayController is tearing down. For example when the Web Component is disconnected from the DOM.
 
 ```js
-import { LitElement } from '@lion/core';
+import { LitElement } from '@mdjs/mdjs-preview';
 import { OverlayMixin } from '@lion/overlays';
 
 class MyOverlayWC extends OverlayMixin(LitElement) {

docs/docs/systems/overlays/form-integration.md

@@ -1,7 +1,7 @@
 # Systems >> Overlays >> Form Integrations ||60
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-datepicker/define';
 import '@lion/listbox/define';
 import '@lion/listbox/define';

docs/docs/systems/overlays/overview.md

@@ -69,7 +69,7 @@ const ctrl = new OverlayController({
 Or creating your own Web Component which uses the Overlay System
 
 ```js
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import { OverlayMixin, withModalDialogConfig } from '@lion/overlays';
 
 class MyOverlayComponent extends OverlayMixin(LitElement) {

docs/docs/tools/ajax/features.md

@@ -1,7 +1,7 @@
 # Tools >> Ajax >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { renderLitAsNode } from '@lion/helpers';
 import { ajax, createCacheInterceptors } from '@lion/ajax';
 import '@lion/helpers/define';

docs/docs/tools/ajax/overview.md

@@ -1,7 +1,7 @@
 # Tools >> Ajax >> Overview ||10
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { renderLitAsNode } from '@lion/helpers';
 import { ajax, createCacheInterceptors } from '@lion/ajax';
 import '@lion/helpers/define';

docs/docs/tools/helpers/action-logger.md

@@ -3,7 +3,7 @@
 A visual element to show action logs in demos `sb-action-logger`
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/helpers/define';
 ```
 

docs/guides/how-to/create-a-custom-field.md

@@ -1,7 +1,7 @@
 # How To >> Create a custom field ||20
 
 ```js script
-import { html, css, LitElement } from '@lion/core';
+import { html, css, LitElement } from '@mdjs/mdjs-preview';
 import { LionField } from '@lion/form-core';
 import '@lion/form-core/define';
 import '../../docs/systems/form/assets/h-output.js';

docs/guides/how-to/extend-a-native-input.md

@@ -1,7 +1,7 @@
 # How To >> Extend a native Input ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { LionInput } from '@lion/input';
 import { LionInputDate } from '@lion/input-date';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';

docs/guides/how-to/get-started.md

@@ -32,7 +32,7 @@ npm i @lion/<package-name>
 **This is the main use case for lion**. To import component classes, and extend them for your own design system's components.
 
 ```js
-import { css } from '@lion/core';
+import { css } from '@mdjs/mdjs-preview';
 import { LionInput } from '@lion/input';
 
 class MyInput extends LionInput {

docs/guides/principles/scoped-elements.md

@@ -6,7 +6,7 @@ Whenever a lion component uses composition (meaning it uses another lion compone
 apply ScopedElementsMixin to make sure it uses the right version of this internal component.
 
 ```js
-import { ScopedElementsMixin, LitElement, html } from '@lion/core';
+import { ScopedElementsMixin, LitElement, html } from '@mdjs/mdjs-preview';
 
 import { LionInput } from '@lion/input';
 import { LionButton } from '@lion/button';
@@ -89,7 +89,7 @@ connectedCallback() {
 In a less complex case, we might just want to add a child node to the dom.
 
 ```js
-import { ScopedElementsMixin, LitElement, getScopedTagNamegetScopedTagName  } from '@lion/core';
+import { ScopedElementsMixin, LitElement, getScopedTagNamegetScopedTagName  } from '@mdjs/mdjs-preview';
 
 ...
 

packages/core/README.md

@@ -6,7 +6,7 @@ It handles the version of `lit-element` and `lit-html`.
 In order to be sure a compatible version is used import it via this package.
 
 ```js
-import { LitElement, html, render } from '@lion/core';
+import { LitElement, html, render } from '@mdjs/mdjs-preview';
 ```
 
 ## Features
@@ -27,7 +27,7 @@ npm i --save @lion/core
 ```
 
 ```js
-import { dedupeMixin, LitElement } from '@lion/core';
+import { dedupeMixin, LitElement } from '@mdjs/mdjs-preview';
 ```
 
 ### Example