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

.changeset/tiny-lamps-melt.md

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

.eslintrc.js

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

.lintstagedrc.js

@@ -3,7 +3,7 @@ module.exports = {
   '*.js': ['eslint --fix', 'prettier --write', 'git add'],
   '*.md': [
     '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',
   ],
   'package-lock.json': ['node ./scripts/lock-scan.js'],

.prettierignore

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

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 'lit';
 import { LionInput } from '@lion/input';
 
 class MyInput extends LionInput {

bundlesize/all.js

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

bundlesize/core.js

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

bundlesize/rollup.config.js

@@ -1,11 +1,24 @@
 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();
 
   return {
     ...config,
-    input: `bundlesize/${name}.js`,
+    input: path.resolve(`./packages/ui/exports/${name}`),
     treeshake: false,
     output: {
       ...config.output,

docs/blog/ing-open-sources-lion.md

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

docs/blog/lion-without-polyfills.md

@@ -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`
 
 ```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';
 
 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.
 
 ```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';
 
 export class MyCard extends ScopedElementsMixin(LitElement) {

docs/components/accordion/overview.md

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

docs/components/accordion/use-cases.md

@@ -3,7 +3,7 @@
 ```js script
 import { html as previewHtml } from '@mdjs/mdjs-preview';
 
-import '@lion/accordion/define';
+import '@lion/ui/define/lion-accordion.js';
 ```
 
 ## 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.
 
 ```js preview-story
-import { html, LitElement } from '@lion/core';
+import { html, LitElement } from 'lit';
 
 export const distributeNewElement = () => {
   class DemoDistribute extends LitElement {

docs/components/button/examples.md

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

docs/components/button/overview.md

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

docs/components/button/use-cases.md

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

docs/components/calendar/overview.md

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

docs/components/calendar/use-cases.md

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

docs/components/checkbox-group/overview.md

@@ -7,7 +7,8 @@ Its purpose is to provide a way for users to check **multiple** options amongst
 
 ```js script
 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
@@ -30,9 +31,10 @@ it has all the features a fieldset has.
 ## Installation
 
 ```bash
-npm i --save @lion/checkbox-group
+npm i --save @lion/ui
 ```
 
 ```js
-import '@lion/checkbox-group/define';
+import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
 ```

docs/components/checkbox-group/use-cases.md

@@ -2,7 +2,8 @@
 
 ```js script
 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

docs/components/collapsible/assets/CustomCollapsible.js

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

docs/components/collapsible/assets/applyDemoCollapsibleStyles.js

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

docs/components/collapsible/examples.md

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

docs/components/collapsible/overview.md

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

docs/components/collapsible/use-cases.md

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

docs/components/combobox/overview.md

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

docs/components/combobox/src/LinkMixin.js

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

docs/components/combobox/src/demo-selection-display.js

@@ -1,5 +1,5 @@
 // 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

docs/components/combobox/src/gh-combobox/gh-button.js

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

docs/components/combobox/src/gh-combobox/gh-combobox.js

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

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

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

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

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

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

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

docs/components/combobox/src/google-combobox/google-combobox.js

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

docs/components/combobox/src/md-combobox/MdFieldMixin.js

@@ -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(
   superclass =>

docs/components/combobox/src/md-combobox/md-combobox.js

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

docs/components/combobox/src/md-combobox/md-input.js

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

docs/components/combobox/src/md-combobox/style/md-ripple.js

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

docs/components/combobox/src/wa-combobox/wa-combobox.js

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

docs/components/combobox/use-cases.md

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

docs/components/dialog/overview.md

@@ -5,7 +5,7 @@ Its purpose is to make it easy to use our Overlay System declaratively.
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
-import '@lion/dialog/define';
+import '@lion/ui/define/lion-dialog.js';
 
 import { demoStyle } from './src/demoStyle.js';
 ```
@@ -39,13 +39,13 @@ export const main = () => html`
 ## Installation
 
 ```bash
-npm i --save @lion/dialog
+npm i --save @lion/ui
 ```
 
 ```js
-import { LionDialog } from '@lion/dialog';
+import { LionDialog } from '@lion/ui/dialog.js';
 // 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.

docs/components/dialog/src/demo-dialog-style.js

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

docs/components/dialog/src/demoStyle.js

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

docs/components/dialog/src/slots-dialog-content.js

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

docs/components/dialog/src/styled-dialog-content.js

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

docs/components/dialog/use-cases.md

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

docs/components/fieldset/overview.md

@@ -3,8 +3,8 @@
 ```js script
 import { html } from '@mdjs/mdjs-preview';
 
-import '@lion/input/define';
-import '@lion/fieldset/define';
+import '@lion/ui/define/lion-input.js';
+import '@lion/ui/define/lion-fieldset.js';
 ```
 
 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
 
 ```bash
-npm i --save @lion/fieldset
+npm i --save @lion/ui
 ```
 
 ```js
-import { LionFieldset } from '@lion/fieldset';
+import { LionFieldset } from '@lion/ui/fieldset.js';
 // or
-import '@lion/fieldset/define';
+import '@lion/ui/define/lion-fieldset.js';
 ```

docs/components/fieldset/use-cases.md

@@ -2,12 +2,12 @@
 
 ```js script
 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';
+import { localize } from '@lion/ui/localize.js';
+import { MinLength, Validator, Required } from '@lion/ui/form-core.js';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 
-import '@lion/input/define';
-import '@lion/fieldset/define';
+import '@lion/ui/define/lion-input.js';
+import '@lion/ui/define/lion-fieldset.js';
 ```
 
 ## With Data

docs/components/form/overview.md

@@ -3,8 +3,8 @@
 ```js script
 import { html } from '@mdjs/mdjs-preview';
 
-import '@lion/input/define';
-import '@lion/form/define';
+import '@lion/ui/define/lion-input.js';
+import '@lion/ui/define/lion-form.js';
 ```
 
 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
 
 ```bash
-npm i --save @lion/form
+npm i --save @lion/ui
 ```
 
 ```js
-import '@lion/form/define';
+import '@lion/ui/define/lion-form.js';
 ```

docs/components/form/use-cases.md

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

docs/components/icon/overview.md

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

docs/components/icon/use-cases.md

@@ -2,12 +2,12 @@
 
 ```js script
 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-misc.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) => {
   switch (iconset) {

docs/components/input-amount/overview.md

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

docs/components/input-amount/use-cases.md

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

docs/components/input-date/overview.md

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

docs/components/input-date/use-cases.md

@@ -2,10 +2,10 @@
 
 ```js script
 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';
-import '@lion/input-date/define';
+import { MinDate, MinMaxDate, MaxDate } from '@lion/ui/form-core.js';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
+import { formatDate } from '@lion/ui/localize.js';
+import '@lion/ui/define/lion-input-date.js';
 ```
 
 ## Is a date

docs/components/input-datepicker/overview.md

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

docs/components/input-datepicker/use-cases.md

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

docs/components/input-email/overview.md

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

docs/components/input-email/use-cases.md

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

docs/components/input-iban/overview.md

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

docs/components/input-iban/use-cases.md

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

docs/components/input-range/overview.md

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

docs/components/input-range/use-cases.md

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

docs/components/input-stepper/overview.md

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

docs/components/input-stepper/use-cases.md

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

docs/components/input-tel-dropdown/examples.md

@@ -2,9 +2,9 @@
 
 ```js script
 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 { loadDefaultFeedbackMessages } from '@lion/validate-messages';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 ```
 
 ## Input Tel International

docs/components/input-tel-dropdown/overview.md

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

docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js

@@ -1,5 +1,8 @@
-import { html, css, ScopedElementsMixin, ref, repeat } from '@lion/core';
-import { LionInputTelDropdown } from '@lion/input-tel-dropdown';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+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 {
   IntlSelectRich,
   IntlOption,
@@ -7,7 +10,7 @@ import {
 } 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/

docs/components/input-tel-dropdown/use-cases.md

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

docs/components/input-tel/overview.md

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

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

@@ -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';
 
 export class HRegionCodeTable extends LitElement {

docs/components/input-tel/use-cases.md

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

docs/components/input/overview.md

@@ -2,7 +2,7 @@
 
 ```js script
 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.
@@ -28,9 +28,9 @@ export const main = () => html`<lion-input label="First Name"></lion-input>`;
 ## Installation
 
 ```bash
-npm i --save @lion/input
+npm i --save @lion/ui
 ```
 
 ```js
-import '@lion/input/define';
+import '@lion/ui/define/lion-input.js';
 ```

docs/components/input/use-cases.md

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

docs/components/listbox/overview.md

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

docs/components/listbox/use-cases.md

@@ -3,7 +3,8 @@
 ```js script
 import { html } from '@mdjs/mdjs-preview';
 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

docs/components/pagination/overview.md

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

docs/components/pagination/use-cases.md

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

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

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

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

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

docs/components/progress-indicator/examples.md

@@ -2,7 +2,7 @@
 
 ```js script
 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-determinate-progress-bar.js';
 

docs/components/progress-indicator/overview.md

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

docs/components/radio-group/overview.md

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

docs/components/radio-group/use-cases.md

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

docs/components/select-rich/examples.md

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

docs/components/select-rich/overview.md

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

docs/components/select-rich/src/flagStyles.js

@@ -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 flagsImg2xUrl = unsafeCSS(new URL('./flags@2x.png', import.meta.url).href);

docs/components/select-rich/src/intl-select-rich.js

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

docs/components/select-rich/use-cases.md

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

docs/components/select/overview.md

@@ -7,7 +7,7 @@ Sets of options where each option name starts with the same word or phrase can a
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
-import '@lion/select/define';
+import '@lion/ui/define/lion-select.js';
 ```
 
 ```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
 
 ```bash
-npm i --save @lion/select
+npm i --save @lion/ui
 ```
 
 ```js
-import { LionSelect } from '@lion/select';
+import { LionSelect } from '@lion/ui/select.js';
 // or
-import '@lion/select/define';
+import '@lion/ui/define/lion-select.js';
 ```

docs/components/select/use-cases.md

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

docs/components/steps/overview.md

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

docs/components/steps/use-cases.md

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

docs/components/switch/overview.md

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

docs/components/switch/use-cases.md

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

docs/components/tabs/overview.md

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

docs/components/tabs/src/lea-tab-panel.js

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

docs/components/tabs/src/lea-tab.js

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

docs/components/tabs/src/lea-tabs.js

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