chore: updated dep versions and made compatible

.storybook/preview-head.html

@@ -0,0 +1,27 @@
+<style>
+  /**
+   * Temp approach for showing local overlays that flow out of their container
+   * Ideally, this would be configurable in Preview:
+   * https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/Preview.ts
+   */
+
+  .sbdocs.sbdocs-preview {
+    overflow: initial;
+    position: relative;
+    z-index: unset;
+  }
+
+  .sbdocs.sbdocs-preview>div:first-child {
+    z-index: 1;
+  }
+
+  .sbdocs.sbdocs-preview>div>div {
+    overflow: initial;
+    z-index: unset;
+  }
+
+  .sbdocs.sbdocs-preview>div>div [scale='1'] {
+    z-index: 1;
+    transform: none;
+  }
+</style>

packages/ajax/README.md

@@ -27,7 +27,7 @@ export default {
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/ajax
 ```
 

packages/button/README.md

@@ -33,7 +33,7 @@ export const main = () => html` <lion-button>Default</lion-button> `;
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/button
 ```
 

packages/calendar/README.md

@@ -54,7 +54,7 @@ export const main = () => {
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/calendar
 ```
 

packages/checkbox-group/README.md

@@ -44,7 +44,7 @@ Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page)
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/checkbox-group
 ```
 

packages/core/README.md

@@ -34,7 +34,7 @@ import { LitElement, html, render } from '@lion/core';
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/core
 ```
 

packages/dialog/README.md

@@ -1,8 +1,5 @@
-<<<<<<< HEAD
-=======
 [//]: # 'AUTO INSERT HEADER PREPUBLISH'
 
->>>>>>> feat: use markdown javascript (mdjs) for documentation
 # Dialog
 
 `lion-dialog` is a component wrapping a modal dialog controller.
@@ -53,7 +50,7 @@ export const main = () => html`
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/dialog
 ```
 

packages/fieldset/README.md

@@ -50,7 +50,7 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/fieldset
 ```
 

packages/form/README.md

@@ -44,7 +44,7 @@ For more information about fields that are designed for lion-form, please read
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/form
 ```
 

packages/icon/README.md

@@ -43,7 +43,7 @@ export const main = () => html`
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/icon
 ```
 

packages/input-amount/README.md

@@ -50,7 +50,7 @@ export const main = () => {
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/input-amount
 ```
 

packages/input-date/README.md

@@ -39,7 +39,7 @@ export const main = () => html` <lion-input-date label="Date"></lion-input-date>
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/input-date
 ```
 

packages/input-datepicker/README.md

@@ -21,9 +21,7 @@ loadDefaultFeedbackMessages();
 
 ```js preview-story
 export const main = () => {
-  return html`
+  return html` <lion-input-datepicker label="Date" name="date"></lion-input-datepicker> `;
-    <lion-input-datepicker label="Date" name="date"></lion-input-datepicker>
-  `;
 };
 ```
 
@@ -49,7 +47,7 @@ export const main = () => {
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/input-datepicker
 ```
 

packages/input-email/README.md

@@ -34,7 +34,7 @@ export const main = () => {
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/input-email
 ```
 

packages/input-iban/README.md

@@ -43,7 +43,7 @@ export const main = () => {
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/input-amount
 ```
 

packages/input-range/README.md

@@ -35,7 +35,7 @@ export const main = () => html`
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/input-range
 ```
 

packages/input/README.md

@@ -41,7 +41,7 @@ export const main = () => html` <lion-input label="First Name"></lion-input> `;
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/input
 ```
 

packages/localize/README.md

@@ -35,7 +35,7 @@ Further examples can be seen at [Features Overview Demo](?path=/docs/localize-fe
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/localize
 ```
 

packages/localize/_docs/amount-html.md

@@ -11,7 +11,7 @@ The amount formatter returns a number based on the locale by using [Intl NumberF
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/localize
 ```
 

packages/localize/_docs/date.md

@@ -12,7 +12,7 @@ The date formatter returns a date based on the locale by using [Intl DateTimeFor
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/localize
 ```
 

packages/localize/_docs/number.md

@@ -14,7 +14,7 @@ The number formatter returns a number based on the locale by using [Intl NumberF
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/localize
 ```
 

packages/overlays/README.md

@@ -36,7 +36,7 @@ Usually you will use `lion-dialog` (or `lion-tooltip` if this makes more sense).
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/overlays
 npm i --save @lion/dialog
 ```

packages/overlays/docs/20-index.md

@@ -538,9 +538,9 @@ export const declarativeLocalBackdrop = () => {
 Overlays can be nested, as the demo below shows.
 It's also possible to compose a nested construction by moving around dom nodes.
 
-<Preview>
+```js preview-story
-  <Story name="Nested overlays">
+export const nestedOverlays = () => {
-    {html`
+  return html`
     <demo-overlay-system .config="${withModalDialogConfig()}">
       <div slot="content" id="mainContent" class="demo-overlay">
         open nested overlay:
@@ -563,6 +563,6 @@ It's also possible to compose a nested construction by moving around dom nodes.
       </div>
       <button slot="invoker" id="mainInvoker">invoker button</button>
     </demo-overlay-system>
-  `}
+  `;
-  </Story>
+};
-</Preview>
+```

packages/radio-group/README.md

@@ -48,7 +48,7 @@ Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page)
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/radio-group
 ```
 

packages/select-rich/README.md

@@ -45,7 +45,7 @@ export const main = () => html`
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/select-rich
 ```
 

packages/select/README.md

@@ -48,7 +48,7 @@ For most other form elements in `lion` we do this for you, because there's no ne
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/select
 ```
 

packages/singleton-manager/README.md

@@ -7,7 +7,7 @@ Primarily useful if two major version of a package with a singleton is used.
 
 ### Installation
 
-```sh
+```bash
 npm i --save singleton-manager
 ```
 

packages/steps/README.md

@@ -35,7 +35,7 @@ In many application you build multi-step workflows like multi-step forms where y
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/steps
 ```
 

packages/switch/README.md

@@ -32,7 +32,7 @@ export const main = () => html` <lion-switch label="Label" help-text="Help text"
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/switch
 ```
 

packages/tabs/README.md

@@ -37,7 +37,7 @@ export const main = () => html`
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/tabs;
 ```
 
@@ -184,9 +184,7 @@ export const distributeNewElement = () => {
       },
     );
   }
-  return html`
+  return html` <lion-tabs-experimental></lion-tabs-experimental> `;
-    <lion-tabs-experimental></lion-tabs-experimental>
-  `;
 };
 ```
 

packages/textarea/README.md

@@ -37,7 +37,7 @@ export const main = () => html`
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/textarea
 ```
 

packages/tooltip/README.md

@@ -1,11 +1,11 @@
 # Tooltip
 
 `lion-tooltip` is a component used for basic popups on hover.
-Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if th
+Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if the invoker element is focused.
-e invoker element is focused.
 
 ```js script
 import { css, html } from '@lion/core';
+import { LionTooltip } from './src/LionTooltip.js';
 import './lion-tooltip.js';
 
 export default {
@@ -72,7 +72,7 @@ export const main = () => html`
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/tooltip
 ```
 
@@ -165,45 +165,38 @@ Modifier explanations:
 
 ### Arrow
 
-Popper also comes with an arrow modifier.
+By default, the arrow is disabled for our tooltip. Via the `has-arrow` property it can be enabled.
-In our tooltip you can pass an arrow element (e.g. an SVG Element) through the `slot="arrow"`.
 
-We export a `lion-tooltip-arrow` that you can use by default for this.
+> As a Subclasser, you can decide to turn the arrow on by default if this fits your Design System
 
 ```js preview-story
 export const arrow = () => html`
     <style>${tooltipDemoStyles}</style>
-    <lion-tooltip>
+    <lion-tooltip has-arrow>
-      <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
+      <button slot="invoker">Hover me</button>
-      <div slot="content" class="demo-tooltip-content">This is a tooltip<div>
+      <div slot="content">This is a tooltip</div>
-      <lion-tooltip-arrow slot="arrow"></lion-tooltip-arrow>
     </lion-tooltip>
   `;
 ```
 
 #### Use a custom arrow
 
-If you plan on passing your own arrow element, you can extend the `lion-tooltip-arrow`.
+If you plan on providing a custom arrow, you can extend the `lion-tooltip`.
 
-All you need to do is override the `render` method to pass your own SVG, and extend the styles to pass the proper dimensions of your arrow.
+All you need to do is override the `_arrowTemplate` method to pass your own SVG, and extend the styles to pass the proper dimensions of your arrow.
 The rest of the work is done by Popper.js (for positioning) and the `lion-tooltip-arrow` (arrow dimensions, rotation, etc.).
 
 ```js preview-story
 export const customArrow = () => {
   if (!customElements.get('custom-tooltip')) {
-    customElements.define(
+    customElements.define('custom-tooltip', class extends LionTooltip {
-      'custom-tooltip',
-      class extends LionTooltip {
         static get styles() {
-          return [
+          return [super.styles, css`
-            super.styles,
+            :host {
-            css`
+              --tooltip-arrow-width: 20px;
-              :host {
+              --tooltip-arrow-height: 8px;
-                --tooltip-arrow-width: 20px;
+            }
-                --tooltip-arrow-height: 8px;
+          `];
-              }
-            `,
-          ];
         }
         constructor() {
           super();
@@ -216,17 +209,14 @@ export const customArrow = () => {
             </svg>
           `;
         }
-      },
+      });
-    );
+    }
-  }
+    return html`
-  return html`
+      <style>${tooltipDemoStyles}</style>
-    <style>
+      <custom-tooltip>
-      ${tooltipDemoStyles}
+        <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
-    </style>
+        <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
-    <custom-tooltip>
+      </custom-tooltip>
-      <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
+    `;
-      <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
-    </custom-tooltip>
-  `;
 };
 ```

packages/validate/README.md

@@ -43,7 +43,7 @@ For a detailed description of the validation system and the `ValidateMixin`, ple
 
 ### Installation
 
-```sh
+```bash
 npm i --save @lion/validate
 ```