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';
 ```