ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: move all web pkgs into a single npm pkg @lion/ui

Browse source
This commit is contained in:
Thomas Allmer 2022-10-24 16:03:53 +02:00 committed by Thomas Allmer
parent fab6b57b82
commit c9e060fc21
1142 changed files with 1946 additions and 5097 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.changeset/tiny-lamps-melt.md
View file

@ -1,5 +1,5 @@
--- ---
"@lion/calendar": patch '@lion/calendar': patch
--- ---
Fix: calendar translation de.js strings corrected Fix: calendar translation de.js strings corrected

7
.eslintrc.js
View file

@ -1,3 +1,5 @@
const path = require('path');
module.exports = { module.exports = {
extends: ['@open-wc/eslint-config', 'eslint-config-prettier'].map(require.resolve), extends: ['@open-wc/eslint-config', 'eslint-config-prettier'].map(require.resolve),
overrides: [ overrides: [
@ -40,4 +42,9 @@ module.exports = {
}, },
}, },
], ],
settings: {
'import/resolver': {
[path.resolve('./scripts/eslint-resolver.cjs')]: {},
},
},
}; };

2
.lintstagedrc.js
View file

@ -3,7 +3,7 @@ module.exports = {
'*.js': ['eslint --fix', 'prettier --write', 'git add'], '*.js': ['eslint --fix', 'prettier --write', 'git add'],
'*.md': [ '*.md': [
'prettier --write', 'prettier --write',
"markdownlint --ignore '{.github/**/*.md,.changeset/*.md,**/CHANGELOG.md}'", "markdownlint --ignore '{.github/**/*.md,.changeset/*.md,**/CHANGELOG.md,packages/ui/_legacy-changelogs/*.md}'",
'git add', 'git add',
], ],
'package-lock.json': ['node ./scripts/lock-scan.js'], 'package-lock.json': ['node ./scripts/lock-scan.js'],

2
.prettierignore
View file

@ -7,3 +7,5 @@ _site-dev
/docs/_assets/scoped-custom-element-registry.min.js /docs/_assets/scoped-custom-element-registry.min.js
/docs/_assets/scoped-custom-element-registry.min.js.map /docs/_assets/scoped-custom-element-registry.min.js.map
/packages/ui/_legacy-changelogs

2
README.md
View file

@ -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. **This is the main use case for lion**. To import component classes, and extend them for your own design system's components.
```js ```js
import { css } from '@lion/core'; import { css } from 'lit';
import { LionInput } from '@lion/input'; import { LionInput } from '@lion/input';
class MyInput extends LionInput { class MyInput extends LionInput {

34
bundlesize/all.js
View file

@ -1,34 +0,0 @@
import '../packages/accordion/index.js';
import '../packages/ajax/index.js';
import '../packages/button/index.js';
import '../packages/calendar/index.js';
import '../packages/checkbox-group/index.js';
import '../packages/collapsible/index.js';
import '../packages/combobox/index.js';
import '../packages/core/index.js';
import '../packages/dialog/index.js';
import '../packages/fieldset/index.js';
import '../packages/form/index.js';
import '../packages/form-core/index.js';
import '../packages/icon/index.js';
import '../packages/input/index.js';
import '../packages/input-amount/index.js';
import '../packages/input-date/index.js';
import '../packages/input-email/index.js';
import '../packages/input-iban/index.js';
import '../packages/input-range/index.js';
import '../packages/input-stepper/index.js';
import '../packages/listbox/index.js';
import '../packages/localize/index.js';
import '../packages/overlays/index.js';
import '../packages/pagination/index.js';
import '../packages/progress-indicator/index.js';
import '../packages/radio-group/index.js';
import '../packages/select/index.js';
import '../packages/select-rich/index.js';
import '../packages/steps/index.js';
import '../packages/switch/index.js';
import '../packages/tabs/index.js';
import '../packages/textarea/index.js';
import '../packages/tooltip/index.js';
import '../packages/validate-messages/index.js';

1
bundlesize/core.js
View file

@ -1 +0,0 @@
import '../packages/core/index.js';

17
bundlesize/rollup.config.js
View file

@ -1,11 +1,24 @@
import { createBasicConfig } from '@open-wc/building-rollup'; import { createBasicConfig } from '@open-wc/building-rollup';
import { readdirSync } from 'fs';
import path from 'path';
export default ['core', 'all'].map(name => { const entrypoints = readdirSync(new URL('../packages/ui/exports', import.meta.url), {
withFileTypes: true,
});
const entrypointNames = [];
for (const entry of entrypoints) {
const { name } = entry;
if (entry.isFile() && name.endsWith('.js') && !name.endsWith('-test-suites.js')) {
entrypointNames.push(name);
}
}
export default entrypointNames.map(name => {
const config = createBasicConfig(); const config = createBasicConfig();
return { return {
...config, ...config,
input: `bundlesize/${name}.js`, input: path.resolve(`./packages/ui/exports/${name}`),
treeshake: false, treeshake: false,
output: { output: {
...config.output, ...config.output,

0
docs/_includes/_joiningBlocks/header/25-search-input.njk Normal file
View file

2
docs/blog/ing-open-sources-lion.md
View file

@ -150,7 +150,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. 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 ```js
import { css } from 'lit-element'; import { css } from 'lit';
import { LionTabs } from '@lion/tabs'; import { LionTabs } from '@lion/tabs';
export class LeaTabs extends LionTabs { export class LeaTabs extends LionTabs {

6
docs/blog/lion-without-polyfills.md
View file

@ -22,7 +22,8 @@ This means that you can use a Lion Component like `lion-listbox` (which uses com
To clarify: within Lion class files we never import files that run `customElement.define` To clarify: within Lion class files we never import files that run `customElement.define`
```js ```js
import { LitElement, html, ScopedElementsMixin } from '@lion/core'; import { LitElement, html } from 'lit';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { MyCardHeader } from './MyCardHeader.js'; import { MyCardHeader } from './MyCardHeader.js';
export class MyCard extends ScopedElementsMixin(LitElement) { export class MyCard extends ScopedElementsMixin(LitElement) {
@ -76,7 +77,8 @@ If you extend Lion components and you imperatively create scoped custom elements
Be sure to always define **ALL** the sub elements you are using in your template within your `scopedElements` property. Be sure to always define **ALL** the sub elements you are using in your template within your `scopedElements` property.
```js ```js
import { LitElement, html, ScopedElementsMixin } from '@lion/core'; import { LitElement, html } from 'lit';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { MyCardHeader } from './MyCardHeader.js'; import { MyCardHeader } from './MyCardHeader.js';
export class MyCard extends ScopedElementsMixin(LitElement) { export class MyCard extends ScopedElementsMixin(LitElement) {

14
docs/components/accordion/overview.md
View file

@ -7,8 +7,9 @@ import { html as previewHtml } from '@mdjs/mdjs-preview';
``` ```
```js preview-story ```js preview-story
import { html, LitElement, ScopedElementsMixin } from '@lion/core'; import { html, LitElement } from 'lit';
import { LionAccordion } from '@lion/accordion'; import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { LionAccordion } from '@lion/ui/accordion.js';
class MyComponent extends ScopedElementsMixin(LitElement) { class MyComponent extends ScopedElementsMixin(LitElement) {
static get scopedElements() { static get scopedElements() {
@ -75,14 +76,15 @@ export const overview = () => previewHtml`<my-component></my-component>`;
1. Install 1. Install
```bash ```bash
npm i --save @lion/accordion npm i --save @lion/ui
``` ```
2. Use scoped registry 2. Use scoped registry
```js ```js
import { html, LitElement, ScopedElementsMixin } from '@lion/core'; import { html, LitElement } from 'lit';
import { LionAccordion } from '@lion/accordion'; import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { LionAccordion } from '@lion/ui/accordion.js';
class MyComponent extends ScopedElementsMixin(LitElement) { class MyComponent extends ScopedElementsMixin(LitElement) {
static get scopedElements() { static get scopedElements() {
@ -110,7 +112,7 @@ class MyComponent extends ScopedElementsMixin(LitElement) {
```html ```html
<script type="module"> <script type="module">
import '@lion/accordion/define'; import '@lion/ui/define/lion-accordion.js';
</script> </script>
<lion-accordion> <lion-accordion>

4
docs/components/accordion/use-cases.md
View file

@ -3,7 +3,7 @@
```js script ```js script
import { html as previewHtml } from '@mdjs/mdjs-preview'; import { html as previewHtml } from '@mdjs/mdjs-preview';
import '@lion/accordion/define'; import '@lion/ui/define/lion-accordion.js';
``` ```
## Default Accordion collapsed ## Default Accordion collapsed
@ -168,7 +168,7 @@ One way is by creating the DOM elements and appending them as needed. For how th
Another way is by adding data to the Lit property that you loop over in your template. See `__handlePushClick` for an example. Another way is by adding data to the Lit property that you loop over in your template. See `__handlePushClick` for an example.
```js preview-story ```js preview-story
import { html, LitElement } from '@lion/core'; import { html, LitElement } from 'lit';
export const distributeNewElement = () => { export const distributeNewElement = () => {
class DemoDistribute extends LitElement { class DemoDistribute extends LitElement {

2
docs/components/button/examples.md
View file

@ -2,7 +2,7 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/button/define'; import '@lion/ui/define/lion-button.js';
import iconSvg from './src/icon.svg.js'; import iconSvg from './src/icon.svg.js';
``` ```

8
docs/components/button/overview.md
View file

@ -4,7 +4,7 @@ A button web component that is easily stylable and accessible.
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/button/define'; import '@lion/ui/define/lion-button.js';
``` ```
```js preview-story ```js preview-story
@ -20,11 +20,11 @@ export const main = () => html` <lion-button>Default</lion-button> `;
## Installation ## Installation
```bash ```bash
npm i --save @lion/button npm i --save @lion/ui
``` ```
```js ```js
import { LionButton, LionButtonReset, LionButtonSubmit } from '@lion/button'; import { LionButton, LionButtonReset, LionButtonSubmit } from '@lion/ui/button.js';
// or // or
import '@lion/button/define'; import '@lion/ui/define/lion-button.js';
``` ```

2
docs/components/button/use-cases.md
View file

@ -2,7 +2,7 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/button/define'; import '@lion/ui/define/lion-button.js';
``` ```
## With click handler ## With click handler

6
docs/components/calendar/overview.md
View file

@ -4,7 +4,7 @@ A reusable and accessible calendar view web component.
```js script ```js script
import { html, css } from '@mdjs/mdjs-preview'; import { html, css } from '@mdjs/mdjs-preview';
import '@lion/calendar/define'; import '@lion/ui/define/lion-calendar.js';
``` ```
```js preview-story ```js preview-story
@ -41,9 +41,9 @@ export const main = () => {
## Installation ## Installation
```bash ```bash
npm i --save @lion/calendar npm i --save @lion/ui
``` ```
```js ```js
import '@lion/calendar/define'; import '@lion/ui/define/lion-calendar.js';
``` ```

2
docs/components/calendar/use-cases.md
View file

@ -2,7 +2,7 @@
```js script ```js script
import { html, css } from '@mdjs/mdjs-preview'; import { html, css } from '@mdjs/mdjs-preview';
import '@lion/calendar/define'; import '@lion/ui/define/lion-calendar.js';
``` ```
## Selected date ## Selected date

8
docs/components/checkbox-group/overview.md
View file

@ -7,7 +7,8 @@ Its purpose is to provide a way for users to check **multiple** options amongst
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/checkbox-group/define'; import '@lion/ui/define/lion-checkbox-group.js';
import '@lion/ui/define/lion-checkbox.js';
``` ```
```js preview-story ```js preview-story
@ -30,9 +31,10 @@ it has all the features a fieldset has.
## Installation ## Installation
```bash ```bash
npm i --save @lion/checkbox-group npm i --save @lion/ui
``` ```
```js ```js
import '@lion/checkbox-group/define'; import '@lion/ui/define/lion-checkbox-group.js';
import '@lion/ui/define/lion-checkbox.js';
``` ```

3
docs/components/checkbox-group/use-cases.md
View file

@ -2,7 +2,8 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/checkbox-group/define'; import '@lion/ui/define/lion-checkbox-group.js';
import '@lion/ui/define/lion-checkbox.js';
``` ```
## Model value ## Model value

2
docs/components/collapsible/assets/CustomCollapsible.js
View file

@ -1,4 +1,4 @@
import { LionCollapsible } from '@lion/collapsible'; import { LionCollapsible } from '@lion/ui/collapsible.js';
const EVENT = { const EVENT = {
TRANSITION_END: 'transitionend', TRANSITION_END: 'transitionend',

2
docs/components/collapsible/assets/applyDemoCollapsibleStyles.js
View file

@ -1,4 +1,4 @@
import { css } from '@lion/core'; import { css } from 'lit';
const applyDemoCollapsibleStyles = () => { const applyDemoCollapsibleStyles = () => {
const demoCollapsibleStyles = css` const demoCollapsibleStyles = css`

4
docs/components/collapsible/examples.md
View file

@ -2,8 +2,8 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/collapsible/define'; import '@lion/ui/define/lion-collapsible.js';
import '@lion/button/define'; import '@lion/ui/define/lion-button.js';
import './assets/CustomCollapsible.js'; import './assets/CustomCollapsible.js';
import './assets/applyDemoCollapsibleStyles.js'; import './assets/applyDemoCollapsibleStyles.js';
``` ```

8
docs/components/collapsible/overview.md
View file

@ -4,7 +4,7 @@ A combination of a button (the invoker) and a chunk of 'extra content'. This web
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/collapsible/define'; import '@lion/ui/define/lion-collapsible.js';
``` ```
```js preview-story ```js preview-story
@ -29,11 +29,11 @@ export const main = () => html`
## Installation ## Installation
```bash ```bash
npm i --save @lion/collapsible npm i --save @lion/ui
``` ```
```js ```js
import { LionCollapsible } from '@lion/collapsible'; import { LionCollapsible } from '@lion/ui/collapsible.js';
// or // or
import '@lion/collapsible/define'; import '@lion/ui/define/lion-collapsible.js';
``` ```

2
docs/components/collapsible/use-cases.md
View file

@ -2,7 +2,7 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/collapsible/define'; import '@lion/ui/define/lion-collapsible.js';
``` ```
## Default open ## Default open

10
docs/components/combobox/overview.md
View file

@ -15,8 +15,8 @@ availability of the pop-up.
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { listboxData } from '../listbox/src/listboxData.js'; import { listboxData } from '../listbox/src/listboxData.js';
import '@lion/listbox/define'; import '@lion/ui/define/lion-combobox.js';
import '@lion/combobox/define'; import '@lion/ui/define/lion-option.js';
import { lazyRender } from './src/lazyRender.js'; import { lazyRender } from './src/lazyRender.js';
``` ```
@ -42,10 +42,10 @@ export const main = () => html`
## Installation ## Installation
```bash ```bash
npm i --save @lion/combobox npm i --save @lion/ui
``` ```
```js ```js
import '@lion/combobox/define'; import '@lion/ui/define/lion-combobox.js';
import '@lion/listbox/lion-option.js'; import '@lion/ui/define/lion-option.js';
``` ```

2
docs/components/combobox/src/LinkMixin.js
View file

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

2
docs/components/combobox/src/demo-selection-display.js
View file

@ -1,5 +1,5 @@
// eslint-disable-next-line max-classes-per-file // eslint-disable-next-line max-classes-per-file
import { LitElement, html, css, nothing } from '@lion/core'; import { LitElement, html, css, nothing } from 'lit';
/** /**
* Disclaimer: this is just an example component demoing the selection display of LionCombobox * Disclaimer: this is just an example component demoing the selection display of LionCombobox

4
docs/components/combobox/src/gh-combobox/gh-button.js
View file

@ -1,5 +1,5 @@
import { css, html } from '@lion/core'; import { css, html } from 'lit';
import { LionButton } from '@lion/button'; import { LionButton } from '@lion/ui/button.js';
export class GhButton extends LionButton { export class GhButton extends LionButton {
static get properties() { static get properties() {

10
docs/components/combobox/src/gh-combobox/gh-combobox.js
View file

@ -1,8 +1,8 @@
import { css, html } from '@lion/core'; import { css, html } from 'lit';
import { LionOption } from '@lion/listbox'; import { LionOption } from '@lion/ui/listbox.js';
import { renderLitAsNode } from '@lion/helpers'; import { renderLitAsNode } from '@lion/ui/helpers.js';
// import { withModalDialogConfig } from '@lion/overlays'; // import { withModalDialogConfig } from '@lion/ui/overlays.js';
import { LionCombobox } from '@lion/combobox'; import { LionCombobox } from '@lion/ui/combobox.js';
import './gh-button.js'; import './gh-button.js';
export class GhOption extends LionOption { export class GhOption extends LionOption {

2
docs/components/combobox/src/google-combobox/assets/google-clear-icon.js
View file

@ -1,4 +1,4 @@
import { html } from '@lion/core'; import { html } from 'lit';
export default html` export default html`
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

2
docs/components/combobox/src/google-combobox/assets/google-search-icon.js
View file

@ -1,4 +1,4 @@
import { html } from '@lion/core'; import { html } from 'lit';
export default html` export default html`
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

2
docs/components/combobox/src/google-combobox/assets/google-voice-search-icon.js
View file

@ -1,4 +1,4 @@
import { html } from '@lion/core'; import { html } from 'lit';
export default html` export default html`
<svg class="HPVvwb" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg class="HPVvwb" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

8
docs/components/combobox/src/google-combobox/google-combobox.js
View file

@ -1,7 +1,7 @@
import { css, html } from '@lion/core'; import { css, html } from 'lit';
import { LionOption } from '@lion/listbox'; import { LionOption } from '@lion/ui/listbox.js';
import { renderLitAsNode } from '@lion/helpers'; import { renderLitAsNode } from '@lion/ui/helpers.js';
import { LionCombobox } from '@lion/combobox'; import { LionCombobox } from '@lion/ui/combobox.js';
import { LinkMixin } from '../LinkMixin.js'; import { LinkMixin } from '../LinkMixin.js';
import googleSearchIcon from './assets/google-search-icon.js'; import googleSearchIcon from './assets/google-search-icon.js';
import googleVoiceSearchIcon from './assets/google-voice-search-icon.js'; import googleVoiceSearchIcon from './assets/google-voice-search-icon.js';

3
docs/components/combobox/src/md-combobox/MdFieldMixin.js
View file

@ -1,4 +1,5 @@
import { html, css, dedupeMixin } from '@lion/core'; import { html, css } from 'lit';
import { dedupeMixin } from '@open-wc/dedupe-mixin';
export const MdFieldMixin = dedupeMixin( export const MdFieldMixin = dedupeMixin(
superclass => superclass =>

6
docs/components/combobox/src/md-combobox/md-combobox.js
View file

@ -1,6 +1,6 @@
import { css, html } from '@lion/core'; import { css, html } from 'lit';
import { LionOption } from '@lion/listbox'; import { LionOption } from '@lion/ui/listbox.js';
import { LionCombobox } from '@lion/combobox'; import { LionCombobox } from '@lion/ui/combobox.js';
import { MdFieldMixin } from './MdFieldMixin.js'; import { MdFieldMixin } from './MdFieldMixin.js';
import './style/md-ripple.js'; import './style/md-ripple.js';
import './style/load-roboto.js'; import './style/load-roboto.js';

2
docs/components/combobox/src/md-combobox/md-input.js
View file

@ -1,4 +1,4 @@
import { LionInput } from '@lion/input'; import { LionInput } from '@lion/ui/input.js';
import { MdFieldMixin } from './MdFieldMixin.js'; import { MdFieldMixin } from './MdFieldMixin.js';
export class MdInput extends MdFieldMixin(LionInput) {} export class MdInput extends MdFieldMixin(LionInput) {}

2
docs/components/combobox/src/md-combobox/style/md-ripple.js
View file

@ -1,4 +1,4 @@
import { html, css, LitElement } from '@lion/core'; import { html, css, LitElement } from 'lit';
/** /**
* Material Design Ripple Element * Material Design Ripple Element

8
docs/components/combobox/src/wa-combobox/wa-combobox.js
View file

@ -1,7 +1,7 @@
import { html, css } from '@lion/core'; import { html, css } from 'lit';
import { renderLitAsNode } from '@lion/helpers'; import { renderLitAsNode } from '@lion/ui/helpers.js';
import { LionOption } from '@lion/listbox'; import { LionOption } from '@lion/ui/listbox.js';
import { LionCombobox } from '@lion/combobox'; import { LionCombobox } from '@lion/ui/combobox.js';
class WaOption extends LionOption { class WaOption extends LionOption {
static get properties() { static get properties() {

6
docs/components/combobox/use-cases.md
View file

@ -15,9 +15,9 @@ availability of the popup.
```js script ```js script
import { LitElement, html, repeat } from '@mdjs/mdjs-preview'; import { LitElement, html, repeat } from '@mdjs/mdjs-preview';
import { listboxData } from '../listbox/src/listboxData.js'; import { listboxData } from '../listbox/src/listboxData.js';
import { LionCombobox } from '@lion/combobox'; import { LionCombobox } from '@lion/ui/combobox.js';
import '@lion/listbox/define'; import '@lion/ui/define/lion-combobox.js';
import '@lion/combobox/define'; import '@lion/ui/define/lion-option.js';
import './src/demo-selection-display.js'; import './src/demo-selection-display.js';
import { lazyRender } from './src/lazyRender.js'; import { lazyRender } from './src/lazyRender.js';
import levenshtein from './src/levenshtein.js'; import levenshtein from './src/levenshtein.js';

8
docs/components/dialog/overview.md
View file

@ -5,7 +5,7 @@ Its purpose is to make it easy to use our Overlay System declaratively.
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/dialog/define'; import '@lion/ui/define/lion-dialog.js';
import { demoStyle } from './src/demoStyle.js'; import { demoStyle } from './src/demoStyle.js';
``` ```
@ -39,13 +39,13 @@ export const main = () => html`
## Installation ## Installation
```bash ```bash
npm i --save @lion/dialog npm i --save @lion/ui
``` ```
```js ```js
import { LionDialog } from '@lion/dialog'; import { LionDialog } from '@lion/ui/dialog.js';
// or // or
import '@lion/dialog/define'; import '@lion/ui/define/lion-dialog.js';
``` ```
- Your `slot="content"` node will be moved to the global overlay container during initialization. - Your `slot="content"` node will be moved to the global overlay container during initialization.

2
docs/components/dialog/src/demo-dialog-style.js
View file

@ -1,3 +1,3 @@
import { css } from '@lion/core'; import { css } from 'lit';
export default css``; export default css``;

2
docs/components/dialog/src/demoStyle.js
View file

@ -1,4 +1,4 @@
import { css } from '@lion/core'; import { css } from 'lit';
export const demoStyle = css` export const demoStyle = css`
.demo-box { .demo-box {

2
docs/components/dialog/src/slots-dialog-content.js
View file

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

2
docs/components/dialog/src/styled-dialog-content.js
View file

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

2
docs/components/dialog/use-cases.md
View file

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

10
docs/components/fieldset/overview.md
View file

@ -3,8 +3,8 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input/define'; import '@lion/ui/define/lion-input.js';
import '@lion/fieldset/define'; import '@lion/ui/define/lion-fieldset.js';
``` ```
A web component that can be used to group multiple input fields or other fieldsets together. A web component that can be used to group multiple input fields or other fieldsets together.
@ -39,11 +39,11 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
## Installation ## Installation
```bash ```bash
npm i --save @lion/fieldset npm i --save @lion/ui
``` ```
```js ```js
import { LionFieldset } from '@lion/fieldset'; import { LionFieldset } from '@lion/ui/fieldset.js';
// or // or
import '@lion/fieldset/define'; import '@lion/ui/define/lion-fieldset.js';
``` ```

10
docs/components/fieldset/use-cases.md
View file

@ -2,12 +2,12 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { localize } from '@lion/localize'; import { localize } from '@lion/ui/localize.js';
import { MinLength, Validator, Required } from '@lion/form-core'; import { MinLength, Validator, Required } from '@lion/ui/form-core.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import '@lion/input/define'; import '@lion/ui/define/lion-input.js';
import '@lion/fieldset/define'; import '@lion/ui/define/lion-fieldset.js';
``` ```
## With Data ## With Data

8
docs/components/form/overview.md
View file

@ -3,8 +3,8 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input/define'; import '@lion/ui/define/lion-input.js';
import '@lion/form/define'; import '@lion/ui/define/lion-form.js';
``` ```
A web component that enhances the functionality of the native `form` component. A web component that enhances the functionality of the native `form` component.
@ -35,9 +35,9 @@ For more information about fields that are designed for our `form`, please read
## Installation ## Installation
```bash ```bash
npm i --save @lion/form npm i --save @lion/ui
``` ```
```js ```js
import '@lion/form/define'; import '@lion/ui/define/lion-form.js';
``` ```

8
docs/components/form/use-cases.md
View file

@ -2,10 +2,10 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { Required } from '@lion/form-core'; import { Required } from '@lion/ui/form-core.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import '@lion/input/define'; import '@lion/ui/define/lion-input.js';
import '@lion/form/define'; import '@lion/ui/define/lion-form.js';
``` ```
## Submit & Reset ## Submit & Reset

10
docs/components/icon/overview.md
View file

@ -4,8 +4,8 @@ A web component for displaying icons.
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { icons } from '@lion/icon'; import { icons } from '@lion/ui/icon.js';
import '@lion/icon/define'; import '@lion/ui/define/lion-icon.js';
icons.addIconResolver('lion', (iconset, name) => { icons.addIconResolver('lion', (iconset, name) => {
switch (iconset) { switch (iconset) {
@ -30,11 +30,11 @@ export const main = () => html`
## Installation ## Installation
```bash ```bash
npm i --save @lion/icon npm i --save @lion/ui
``` ```
```js ```js
import { LionIcon } from '@lion/icon'; import { LionIcon } from '@lion/ui/icon.js';
// or // or
import '@lion/icon/define'; import '@lion/ui/define/lion-icon.js';
``` ```

4
docs/components/icon/use-cases.md
View file

@ -2,12 +2,12 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { icons } from '@lion/icon'; import { icons } from '@lion/ui/icon.js';
import './assets/iconset-bugs.js'; import './assets/iconset-bugs.js';
import './assets/iconset-misc.js'; import './assets/iconset-misc.js';
import * as spaceSet from './assets/iconset-space.js'; import * as spaceSet from './assets/iconset-space.js';
import '@lion/icon/define'; import '@lion/ui/define/lion-icon.js';
icons.addIconResolver('lion', (iconset, name) => { icons.addIconResolver('lion', (iconset, name) => {
switch (iconset) { switch (iconset) {

8
docs/components/input-amount/overview.md
View file

@ -11,7 +11,7 @@ If there are no valid characters in the input whatsoever, it will provide an err
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input-amount/define'; import '@lion/ui/define/lion-input-amount.js';
``` ```
```js preview-story ```js preview-story
@ -39,11 +39,11 @@ export const main = () => {
## Installation ## Installation
```bash ```bash
npm i --save @lion/input-amount npm i --save @lion/ui
``` ```
```js ```js
import { LionInputAmount } from '@lion/input-amount'; import { LionInputAmount } from '@lion/ui/input-amount.js';
// or // or
import '@lion/input-amount/define'; import '@lion/ui/define/lion-input-amount.js';
``` ```

10
docs/components/input-amount/use-cases.md
View file

@ -2,12 +2,12 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { MaxLength } from '@lion/form-core'; import { MaxLength } from '@lion/ui/form-core.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import { localize } from '@lion/localize'; import { localize } from '@lion/ui/localize.js';
import '@lion/input-amount/define'; import '@lion/ui/define/lion-input-amount.js';
``` ```
## Negative Number ## Negative Number
@ -61,7 +61,7 @@ Separator characters include:
- , (comma) - , (comma)
```js preview-story ```js preview-story
import { preprocessAmount } from '@lion/input-amount'; import { preprocessAmount } from '@lion/ui/input-amount.js';
export const forceDigits = () => html` export const forceDigits = () => html`
<lion-input-amount label="Amount" .preprocessor=${preprocessAmount}></lion-input-amount> <lion-input-amount label="Amount" .preprocessor=${preprocessAmount}></lion-input-amount>

14
docs/components/input-date/overview.md
View file

@ -4,10 +4,10 @@ A web component based on the generic text input field. Its purpose is to provide
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { MinDate, MinMaxDate, MaxDate } from '@lion/form-core'; import { MinDate, MinMaxDate, MaxDate } from '@lion/ui/form-core.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import { formatDate } from '@lion/localize'; import { formatDate } from '@lion/ui/localize.js';
import '@lion/input-date/define'; import '@lion/ui/define/lion-input-date.js';
``` ```
```js preview-story ```js preview-story
@ -29,11 +29,11 @@ export const main = () => html` <lion-input-date label="Date"></lion-input-date>
## Installation ## Installation
```bash ```bash
npm i --save @lion/input-date npm i --save @lion/ui
``` ```
```js ```js
import { LionInputDate } from '@lion/input-date'; import { LionInputDate } from '@lion/ui/input-date.js';
// or // or
import '@lion/input-date/define'; import '@lion/ui/define/lion-input-date.js';
``` ```

8
docs/components/input-date/use-cases.md
View file

@ -2,10 +2,10 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { MinDate, MinMaxDate, MaxDate } from '@lion/form-core'; import { MinDate, MinMaxDate, MaxDate } from '@lion/ui/form-core.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import { formatDate } from '@lion/localize'; import { formatDate } from '@lion/ui/localize.js';
import '@lion/input-date/define'; import '@lion/ui/define/lion-input-date.js';
``` ```
## Is a date ## Is a date

8
docs/components/input-datepicker/overview.md
View file

@ -6,7 +6,7 @@ We encourage using our standard [input-date](../input-date/overview.md) for this
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input-datepicker/define'; import '@lion/ui/define/lion-input-datepicker.js';
``` ```
```js preview-story ```js preview-story
@ -32,11 +32,11 @@ export const main = () => {
## Installation ## Installation
```bash ```bash
npm i --save @lion/input-datepicker npm i --save @lion/ui
``` ```
```js ```js
import { LionInputDatepicker } from '@lion/input-datepicker'; import { LionInputDatepicker } from '@lion/ui/input-datepicker.js';
// or // or
import '@lion/input-datepicker/define'; import '@lion/ui/define/lion-input-datepicker.js';
``` ```

8
docs/components/input-datepicker/use-cases.md
View file

@ -2,10 +2,10 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { MinMaxDate, IsDateDisabled } from '@lion/form-core'; import { MinMaxDate, IsDateDisabled } from '@lion/ui/form-core.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import { formatDate } from '@lion/localize'; import { formatDate } from '@lion/ui/localize.js';
import '@lion/input-datepicker/define'; import '@lion/ui/define/lion-input-datepicker.js';
``` ```
## Minimum and maximum date ## Minimum and maximum date

8
docs/components/input-email/overview.md
View file

@ -4,7 +4,7 @@ A web component based on the generic text input field. Its purpose is to provide
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input-email/define'; import '@lion/ui/define/lion-input-email.js';
``` ```
```js preview-story ```js preview-story
@ -22,11 +22,11 @@ export const main = () => {
## Installation ## Installation
```bash ```bash
npm i --save @lion/input-email npm i --save @lion/ui
``` ```
```js ```js
import { LionInputEmail } from '@lion/input-email'; import { LionInputEmail } from '@lion/ui/input-email.js';
// or // or
import '@lion/input-email/define'; import '@lion/ui/define/lion-input-email.js';
``` ```

4
docs/components/input-email/use-cases.md
View file

@ -2,8 +2,8 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { Validator } from '@lion/form-core'; import { Validator } from '@lion/ui/form-core.js';
import '@lion/input-email/define'; import '@lion/ui/define/lion-input-email.js';
``` ```
## Faulty Prefilled ## Faulty Prefilled

8
docs/components/input-iban/overview.md
View file

@ -5,7 +5,7 @@ Its purpose is to provide a way for users to fill in an IBAN (International Bank
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input-iban/define'; import '@lion/ui/define/lion-input-iban.js';
``` ```
```js preview-story ```js preview-story
@ -27,11 +27,11 @@ export const main = () => {
## Installation ## Installation
```bash ```bash
npm i --save @lion/input-amount npm i --save @lion/ui
``` ```
```js ```js
import { LionInputIban } from '@lion/input-iban'; import { LionInputIban } from '@lion/ui/input-iban.js';
// or // or
import '@lion/input-amount/define'; import '@lion/ui/define/lion-input-amount.js';
``` ```

6
docs/components/input-iban/use-cases.md
View file

@ -2,9 +2,9 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import { IsCountryIBAN, IsNotCountryIBAN } from '@lion/input-iban'; import { IsCountryIBAN, IsNotCountryIBAN } from '@lion/ui/input-iban.js';
import '@lion/input-iban/define'; import '@lion/ui/define/lion-input-iban.js';
``` ```
## Prefilled ## Prefilled

8
docs/components/input-range/overview.md
View file

@ -4,7 +4,7 @@ A web component based on the native range input. Its purpose is to provide a way
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input-range/define'; import '@lion/ui/define/lion-input-range.js';
``` ```
```js preview-story ```js preview-story
@ -24,11 +24,11 @@ export const main = () => html`
## Installation ## Installation
```bash ```bash
npm i --save @lion/input-range npm i --save @lion/ui
``` ```
```js ```js
import { LionInputRange } from '@lion/input-range'; import { LionInputRange } from '@lion/ui/input-range.js';
// or // or
import '@lion/input-range/define'; import '@lion/ui/define/lion-input-range.js';
``` ```

2
docs/components/input-range/use-cases.md
View file

@ -2,7 +2,7 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input-range/define'; import '@lion/ui/define/lion-input-range.js';
``` ```
## Units ## Units

8
docs/components/input-stepper/overview.md
View file

@ -4,7 +4,7 @@ A web component that enables the user to increase and decrease a numeric value b
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input-stepper/define'; import '@lion/ui/define/lion-input-stepper.js';
``` ```
```js preview-story ```js preview-story
@ -26,11 +26,11 @@ export const main = () => html`
## Installation ## Installation
```bash ```bash
npm i --save @lion/input-stepper npm i --save @lion/ui
``` ```
```js ```js
import { LionInputStepper } from '@lion/input-stepper'; import { LionInputStepper } from '@lion/ui/input-stepper.js';
// or // or
import '@lion/input-stepper/define'; import '@lion/ui/define/lion-input-stepper.js';
``` ```

2
docs/components/input-stepper/use-cases.md
View file

@ -2,7 +2,7 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input-stepper/define'; import '@lion/ui/define/lion-input-stepper.js';
``` ```
## Default with no specification ## Default with no specification

4
docs/components/input-tel-dropdown/examples.md
View file

@ -2,9 +2,9 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/select-rich/define'; import '@lion/ui/define/lion-select-rich.js';
import './src/intl-input-tel-dropdown.js'; import './src/intl-input-tel-dropdown.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
``` ```
## Input Tel International ## Input Tel International

10
docs/components/input-tel-dropdown/overview.md
View file

@ -4,8 +4,8 @@ Extension of Input Tel that prefixes a dropdown list that shows all possible reg
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input-tel-dropdown/define'; import '@lion/ui/define/lion-input-tel-dropdown.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
``` ```
```js preview-story ```js preview-story
@ -28,11 +28,11 @@ export const main = () => {
## Installation ## Installation
```bash ```bash
npm i --save @lion/input-tel-dropdown npm i --save @lion/ui
``` ```
```js ```js
import { LionInputTelDropdown } from '@lion/input-tel-dropdown'; import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
// or // or
import '@lion/input-tel-dropdown/define'; import '@lion/ui/define/lion-input-tel-dropdown.js';
``` ```

9
docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
View file

@ -1,5 +1,8 @@
import { html, css, ScopedElementsMixin, ref, repeat } from '@lion/core'; import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { LionInputTelDropdown } from '@lion/input-tel-dropdown'; import { html, css } from 'lit';
import { ref } from 'lit/directives/ref.js';
import { repeat } from 'lit/directives/repeat.js';
import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
import { import {
IntlSelectRich, IntlSelectRich,
IntlOption, IntlOption,
@ -7,7 +10,7 @@ import {
} from '../../select-rich/src/intl-select-rich.js'; } from '../../select-rich/src/intl-select-rich.js';
/** /**
* @typedef {import('@lion/input-tel-dropdown/types').TemplateDataForDropdownInputTel}TemplateDataForDropdownInputTel * @typedef {import('@lion/ui/input-tel-dropdown/types.js').TemplateDataForDropdownInputTel}TemplateDataForDropdownInputTel
*/ */
// Example implementation for https://intl-tel-input.com/ // Example implementation for https://intl-tel-input.com/

8
docs/components/input-tel-dropdown/use-cases.md
View file

@ -2,10 +2,10 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { ref, createRef } from '@lion/core'; import { ref, createRef } from 'lit/directives/ref.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import { PhoneUtilManager } from '@lion/input-tel'; import { PhoneUtilManager } from '@lion/ui/input-tel.js';
import '@lion/input-tel-dropdown/define'; import '@lion/ui/define/lion-input-tel-dropdown.js';
import '../../../docs/fundamentals/systems/form/assets/h-output.js'; import '../../../docs/fundamentals/systems/form/assets/h-output.js';
// TODO: make each example load/use the dependencies by default // TODO: make each example load/use the dependencies by default

15
docs/components/input-tel/overview.md
View file

@ -4,10 +4,11 @@ Input field for entering phone numbers, including validation, formatting and mob
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { ref, createRef } from '@lion/core'; import { ref, createRef } from 'lit/directives/ref.js';
import { PhoneUtilManager } from '@lion/input-tel';
import '@lion/input-tel/define'; import { PhoneUtilManager } from '@lion/ui/input-tel.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import '@lion/ui/define/lion-input-tel.js';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import '../../../docs/fundamentals/systems/form/assets/h-output.js'; import '../../../docs/fundamentals/systems/form/assets/h-output.js';
``` ```
@ -51,11 +52,11 @@ export const main = () => {
## Installation ## Installation
```bash ```bash
npm i --save @lion/input-tel npm i --save @lion/ui
``` ```
```js ```js
import { LionInputTel } from '@lion/input-tel'; import { LionInputTel } from '@lion/ui/input-tel.js';
// or // or
import '@lion/input-tel/define'; import '@lion/ui/define/lion-input-tel.js';
``` ```

4
docs/components/input-tel/src/h-region-code-table.js
View file

@ -1,4 +1,6 @@
import { LitElement, css, html, repeat, ScopedStylesController } from '@lion/core'; import { LitElement, css, html } from 'lit';
import { repeat } from 'lit/directives/repeat.js';
import { ScopedStylesController } from '@lion/ui/core.js';
import { regionMetaList } from '../../select-rich/src/regionMetaList.js'; import { regionMetaList } from '../../select-rich/src/regionMetaList.js';
export class HRegionCodeTable extends LitElement { export class HRegionCodeTable extends LitElement {

12
docs/components/input-tel/use-cases.md
View file

@ -2,12 +2,12 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { ref, createRef } from '@lion/core'; import { ref, createRef } from 'lit/directives/ref.js';
import { Unparseable } from '@lion/form-core'; import { Unparseable } from '@lion/ui/form-core.js';
import { localize } from '@lion/localize'; import { localize } from '@lion/ui/localize.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import { PhoneUtilManager } from '@lion/input-tel'; import { PhoneUtilManager } from '@lion/ui/input-tel.js';
import '@lion/input-tel/define'; import '@lion/ui/define/lion-input-tel.js';
import './src/h-region-code-table.js'; import './src/h-region-code-table.js';
import '../../../docs/fundamentals/systems/form/assets/h-output.js'; import '../../../docs/fundamentals/systems/form/assets/h-output.js';

6
docs/components/input/overview.md
View file

@ -2,7 +2,7 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input/define'; import '@lion/ui/define/lion-input.js';
``` ```
A web component that enhances the functionality of the native `<input>` element. A web component that enhances the functionality of the native `<input>` element.
@ -28,9 +28,9 @@ export const main = () => html`<lion-input label="First Name"></lion-input>`;
## Installation ## Installation
```bash ```bash
npm i --save @lion/input npm i --save @lion/ui
``` ```
```js ```js
import '@lion/input/define'; import '@lion/ui/define/lion-input.js';
``` ```

2
docs/components/input/use-cases.md
View file

@ -2,7 +2,7 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/input/define'; import '@lion/ui/define/lion-input.js';
``` ```
## Label ## Label

8
docs/components/listbox/overview.md
View file

@ -8,7 +8,8 @@ multiple options to be selected is a `multi-select listbox`.
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/listbox/define'; import '@lion/ui/define/lion-listbox.js';
import '@lion/ui/define/lion-option.js';
``` ```
```js preview-story ```js preview-story
@ -32,9 +33,10 @@ export const main = () => html`
## Installation ## Installation
```bash ```bash
npm i --save @lion/listbox npm i --save @lion/ui
``` ```
```js ```js
import '@lion/listbox/define'; import '@lion/ui/define/lion-listbox.js';
import '@lion/ui/define/lion-option.js';
``` ```

3
docs/components/listbox/use-cases.md
View file

@ -3,7 +3,8 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { listboxData } from './src/listboxData.js'; import { listboxData } from './src/listboxData.js';
import '@lion/listbox/define'; import '@lion/ui/define/lion-listbox.js';
import '@lion/ui/define/lion-option.js';
``` ```
## Multiple choice ## Multiple choice

8
docs/components/pagination/overview.md
View file

@ -4,7 +4,7 @@ A web component that handles pagination.
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/pagination/define'; import '@lion/ui/define/lion-pagination.js';
``` ```
```js preview-story ```js preview-story
@ -19,11 +19,11 @@ export const main = () => html` <lion-pagination count="20" current="10"></lion-
## Installation ## Installation
```bash ```bash
npm i --save @lion/pagination npm i --save @lion/ui
``` ```
```js ```js
import { LionPagination } from '@lion/pagination'; import { LionPagination } from '@lion/ui/pagination.js';
// or // or
import '@lion/pagination/define'; import '@lion/ui/define/lion-pagination.js';
``` ```

2
docs/components/pagination/use-cases.md
View file

@ -2,7 +2,7 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/pagination/define'; import '@lion/ui/define/lion-pagination.js';
``` ```
## Without current defined ## Without current defined

4
docs/components/progress-indicator/assets/my-determinate-progress-bar.js
View file

@ -1,5 +1,5 @@
import { css, html } from '@lion/core'; import { css, html } from 'lit';
import { LionProgressIndicator } from '@lion/progress-indicator'; import { LionProgressIndicator } from '@lion/ui/progress-indicator.js';
export class MyDeterminateProgressBar extends LionProgressIndicator { export class MyDeterminateProgressBar extends LionProgressIndicator {
static get styles() { static get styles() {

4
docs/components/progress-indicator/assets/my-indeterminate-progress-spinner.js
View file

@ -1,5 +1,5 @@
import { html, css } from '@lion/core'; import { html, css } from 'lit';
import { LionProgressIndicator } from '@lion/progress-indicator'; import { LionProgressIndicator } from '@lion/ui/progress-indicator.js';
export class MyIndeterminateProgressSpinner extends LionProgressIndicator { export class MyIndeterminateProgressSpinner extends LionProgressIndicator {
static get styles() { static get styles() {

2
docs/components/progress-indicator/examples.md
View file

@ -2,7 +2,7 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/progress-indicator/define'; import '@lion/ui/define/lion-progress-indicator.js';
import './assets/my-indeterminate-progress-spinner.js'; import './assets/my-indeterminate-progress-spinner.js';
import './assets/my-determinate-progress-bar.js'; import './assets/my-determinate-progress-bar.js';

8
docs/components/progress-indicator/overview.md
View file

@ -4,7 +4,7 @@ A web component that implements accessibility requirements for progress indicato
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/progress-indicator/define'; import '@lion/ui/define/lion-progress-indicator.js';
``` ```
```html ```html
@ -26,11 +26,11 @@ This component is designed to be extended in order to add visuals.
## Installation ## Installation
```bash ```bash
npm i --save @lion/progress-indicator npm i --save @lion/ui
``` ```
```js ```js
import { LionProgressIndicator } from '@lion/progress-indicator'; import { LionProgressIndicator } from '@lion/ui/progress-indicator.js';
// or // or
import '@lion/progress-indicator/define'; import '@lion/ui/define/lion-progress-indicator.js';
``` ```

10
docs/components/radio-group/overview.md
View file

@ -6,7 +6,8 @@ You should use our `radio` inside this element.
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/radio-group/define'; import '@lion/ui/define/lion-radio-group.js';
import '@lion/ui/define/lion-radio.js';
``` ```
```js preview-story ```js preview-story
@ -34,11 +35,12 @@ Since it extends from our [fieldset](../fieldset/overview.md), it has all the fe
## Installation ## Installation
```bash ```bash
npm i --save @lion/radio-group npm i --save @lion/ui
``` ```
```js ```js
import { LionRadioGroup, LionRadio } from '@lion/radio-group'; import { LionRadioGroup, LionRadio } from '@lion/ui/radio-group.js';
// or // or
import '@lion/radio-group/define'; import '@lion/ui/define/lion-radio-group.js';
import '@lion/ui/define/lion-radio.js';
``` ```

4
docs/components/radio-group/use-cases.md
View file

@ -2,8 +2,8 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/radio-group/define'; import '@lion/ui/define/lion-radio-group.js';
import '@lion/radio-group/define'; import '@lion/ui/define/lion-radio.js';
``` ```
## Model value ## Model value

4
docs/components/select-rich/examples.md
View file

@ -2,8 +2,8 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { repeat } from '@lion/core'; import { repeat } from 'lit/directives/repeat.js';
import '@lion/select-rich/define'; import '@lion/ui/define/lion-select-rich.js';
import './src/intl-select-rich.js'; import './src/intl-select-rich.js';
import { regionMetaList } from './src/regionMetaList.js'; import { regionMetaList } from './src/regionMetaList.js';
``` ```

15
docs/components/select-rich/overview.md
View file

@ -9,8 +9,8 @@ Its implementation is based on the following Design pattern:
```js script ```js script
import { LitElement, html } from '@mdjs/mdjs-preview'; import { LitElement, html } from '@mdjs/mdjs-preview';
import '@lion/listbox/define'; import '@lion/ui/define/lion-select-rich.js';
import '@lion/select-rich/define'; import '@lion/ui/define/lion-option.js';
``` ```
```js preview-story ```js preview-story
@ -34,14 +34,13 @@ export const main = () => html`
## Installation ## Installation
```bash ```bash
npm i --save @lion/select-rich npm i --save @lion/ui
``` ```
```js ```js
import { LionSelectRich, LionOptions, LionOption } from '@lion/select-rich'; import { LionSelectRich } from '@lion/ui/select-rich.js';
import { LionOptions, LionOption } from '@lion/ui/listbox.js';
// or // or
import '@lion/select-rich/define'; import '@lion/ui/define/lion-select-rich.js';
import '@lion/listbox/define'; import '@lion/ui/define/lion-option.js';
``` ```
> No need to npm install `@lion/option` separately, it comes with the rich select as a dependency

2
docs/components/select-rich/src/flagStyles.js
View file

@ -1,4 +1,4 @@
import { css, unsafeCSS } from '@lion/core'; import { css, unsafeCSS } from 'lit';
const flagsImgUrl = unsafeCSS(new URL('./flags.png', import.meta.url).href); const flagsImgUrl = unsafeCSS(new URL('./flags.png', import.meta.url).href);
const flagsImg2xUrl = unsafeCSS(new URL('./flags@2x.png', import.meta.url).href); const flagsImg2xUrl = unsafeCSS(new URL('./flags@2x.png', import.meta.url).href);

11
docs/components/select-rich/src/intl-select-rich.js
View file

@ -1,11 +1,12 @@
import { html, css, LitElement } from '@lion/core'; import { html, css, LitElement } from 'lit';
import { LionSelectRich, LionOption, LionSelectInvoker } from '@lion/select-rich'; import { LionSelectRich, LionSelectInvoker } from '@lion/ui/select-rich.js';
import { LionOption } from '@lion/ui/listbox.js';
import { flagStyles } from './flagStyles.js'; import { flagStyles } from './flagStyles.js';
/** /**
* @typedef {import('@lion/core').RenderOptions} RenderOptions * @typedef {import('@lion/ui/core.js').RenderOptions} RenderOptions
* @typedef {import('@lion/input-tel/types/types').RegionAndCountryCode} RegionAndCountryCode * @typedef {import('@lion/ui/input-tel/types/types.js').RegionAndCountryCode} RegionAndCountryCode
* @typedef {import('@lion/input-tel/types/types').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel * @typedef {import('@lion/ui/input-tel/types/types.js').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel
* @typedef {{countryCode: string; regionCode: string; nameForRegion: string; nameForLocale: string}} RegionMetaList * @typedef {{countryCode: string; regionCode: string; nameForRegion: string; nameForLocale: string}} RegionMetaList
* @typedef {TemplateDataForDropdownInputTel & {data: {regionMetaList:RegionMetaList}}} TemplateDataForIntlInputTel * @typedef {TemplateDataForDropdownInputTel & {data: {regionMetaList:RegionMetaList}}} TemplateDataForIntlInputTel
*/ */

6
docs/components/select-rich/use-cases.md
View file

@ -2,8 +2,8 @@
```js script ```js script
import { LitElement, html } from '@mdjs/mdjs-preview'; import { LitElement, html } from '@mdjs/mdjs-preview';
import '@lion/listbox/define'; import '@lion/ui/define/lion-select-rich.js';
import '@lion/select-rich/define'; import '@lion/ui/define/lion-option.js';
``` ```
## Model value ## Model value
@ -324,7 +324,7 @@ by putting it in light dom:
``` ```
```js ```js
import { LionSelectInvoker } from '@lion/select-rich'; import { LionSelectInvoker } from '@lion/ui/select-rich.js';
class IntlSelectInvoker extends LionSelectInvoker { class IntlSelectInvoker extends LionSelectInvoker {
/** /**

8
docs/components/select/overview.md
View file

@ -7,7 +7,7 @@ Sets of options where each option name starts with the same word or phrase can a
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/select/define'; import '@lion/ui/define/lion-select.js';
``` ```
```js preview-story ```js preview-story
@ -34,11 +34,11 @@ For most other form elements we do this for you, because there's no need to put
## Installation ## Installation
```bash ```bash
npm i --save @lion/select npm i --save @lion/ui
``` ```
```js ```js
import { LionSelect } from '@lion/select'; import { LionSelect } from '@lion/ui/select.js';
// or // or
import '@lion/select/define'; import '@lion/ui/define/lion-select.js';
``` ```

2
docs/components/select/use-cases.md
View file

@ -2,7 +2,7 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/select/define'; import '@lion/ui/define/lion-select.js';
``` ```
## Pre-select ## Pre-select

10
docs/components/steps/overview.md
View file

@ -4,7 +4,8 @@ A web component that can be used to break a single goal down into dependable sub
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/steps/define'; import '@lion/ui/define/lion-steps.js';
import '@lion/ui/define/lion-step.js';
``` ```
```js preview-story ```js preview-story
@ -51,11 +52,12 @@ In many application you build multi-step workflows like multi-step forms where y
## Installation ## Installation
```bash ```bash
npm i --save @lion/steps npm i --save @lion/ui
``` ```
```js ```js
import { LionSteps, LionStep } from '@lion/steps'; import { LionSteps, LionStep } from '@lion/ui/steps.js';
// or // or
import '@lion/steps/define'; import '@lion/ui/define/lion-steps.js';
import '@lion/ui/define/lion-step.js';
``` ```

4
docs/components/steps/use-cases.md
View file

@ -2,8 +2,8 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import '@lion/steps/define'; import '@lion/ui/define/lion-steps.js';
import '@lion/steps/define'; import '@lion/ui/define/lion-step.js';
``` ```
```js preview-story ```js preview-story

16
docs/components/switch/overview.md
View file

@ -4,12 +4,13 @@
```js script ```js script
import { html as previewHtml } from '@mdjs/mdjs-preview'; import { html as previewHtml } from '@mdjs/mdjs-preview';
import '@lion/switch/define-switch'; import '@lion/ui/define/lion-switch.js';
``` ```
```js preview-story ```js preview-story
import { html, LitElement, ScopedElementsMixin } from '@lion/core'; import { html, LitElement } from 'lit';
import { LionSwitch } from '@lion/switch'; import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { LionSwitch } from '@lion/ui/switch.js';
class MyComponent extends ScopedElementsMixin(LitElement) { class MyComponent extends ScopedElementsMixin(LitElement) {
static get scopedElements() { static get scopedElements() {
@ -43,14 +44,15 @@ export const main = () => previewHtml`<my-component></my-component>`;
1. Install 1. Install
```bash ```bash
npm i --save @lion/switch npm i --save @lion/ui
``` ```
2. Use scoped registry 2. Use scoped registry
```js ```js
import { html, LitElement, ScopedElementsMixin } from '@lion/core'; import { html, LitElement } from 'lit';
import { LionSwitch } from '@lion/switch'; import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import { LionSwitch } from '@lion/ui/switch.js';
class MyComponent extends ScopedElementsMixin(LitElement) { class MyComponent extends ScopedElementsMixin(LitElement) {
static get scopedElements() { static get scopedElements() {
@ -66,7 +68,7 @@ class MyComponent extends ScopedElementsMixin(LitElement) {
```html ```html
<script type="module"> <script type="module">
import '@lion/switch/define-switch'; import '@lion/ui/define/lion-switch.js';
</script> </script>
<lion-switch></lion-switch> <lion-switch></lion-switch>

8
docs/components/switch/use-cases.md
View file

@ -2,10 +2,10 @@
```js script ```js script
import { html } from '@mdjs/mdjs-preview'; import { html } from '@mdjs/mdjs-preview';
import { Validator } from '@lion/form-core'; import { Validator } from '@lion/ui/form-core.js';
import { LionSwitch } from '@lion/switch'; import { LionSwitch } from '@lion/ui/switch.js';
import '@lion/switch/define'; import '@lion/ui/define/lion-switch.js';
import '@lion/helpers/define-sb-action-logger'; import '@lion/ui/define-helpers/sb-action-logger.js';
``` ```
## Disabled ## Disabled

8
docs/components/tabs/overview.md
View file

@ -4,7 +4,7 @@ A web component that allows users to quickly move between a small number of equa
```js script ```js script
import { LitElement, html } from '@mdjs/mdjs-preview'; import { LitElement, html } from '@mdjs/mdjs-preview';
import '@lion/tabs/define'; import '@lion/ui/define/lion-tabs.js';
``` ```
```js preview-story ```js preview-story
@ -21,13 +21,13 @@ export const main = () => html`
## Installation ## Installation
```bash ```bash
npm i --save @lion/tabs npm i --save @lion/ui
``` ```
```js ```js
import { LionTabs } from '@lion/tabs'; import { LionTabs } from '@lion/ui/tabs.js';
// or // or
import '@lion/tabs/define'; import '@lion/ui/define/lion-tabs.js';
``` ```
## Rationale ## Rationale

2
docs/components/tabs/src/lea-tab-panel.js
View file

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

2
docs/components/tabs/src/lea-tab.js
View file

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

4
docs/components/tabs/src/lea-tabs.js
View file

@ -1,5 +1,5 @@
import { css } from '@lion/core'; import { css } from 'lit';
import { LionTabs } from '@lion/tabs'; import { LionTabs } from '@lion/ui/tabs.js';
export class LeaTabs extends LionTabs { export class LeaTabs extends LionTabs {
static get styles() { static get styles() {

Some files were not shown because too many files have changed in this diff Show more