@lion/ui 0.0.9 → 0.0.10

package/docs/fundamentals/systems/overlays/configuration.md

@@ -2,8 +2,8 @@
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
-import './assets/demo-overlay-system.js';
-import './assets/applyDemoOverlayStyles.js';
+import './assets/demo-el-using-overlaymixin.mjs';
+import './assets/applyDemoOverlayStyles.mjs';
 ```
 
 The `OverlayController` has many configuration options.
@@ -14,7 +14,7 @@ The `OverlayMixin` exposes these options via `.config`.
 
 Either `'local'` or `'global'`.
 This determines the DOM position of the `contentNode`, either next to the invokerNode,
-or in the `global-overlays` container at the bottom of the `<body>`.
+or in the `overlays` container at the bottom of the `<body>`.
 
 ### Local
 
@@ -28,7 +28,7 @@ export const placementLocal = () => {
         border: 1px solid black;
       }
     </style>
-    <demo-overlay-system .config=${placementModeLocalConfig}>
+    <demo-el-using-overlaymixin .config=${placementModeLocalConfig}>
       <button slot="invoker">Click me to open the local overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -39,7 +39,7 @@ export const placementLocal = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```
@@ -50,7 +50,7 @@ export const placementLocal = () => {
 export const placementGlobal = () => {
   const placementModeGlobalConfig = { placementMode: 'global' };
   return html`
-    <demo-overlay-system .config=${placementModeGlobalConfig}>
+    <demo-el-using-overlaymixin .config=${placementModeGlobalConfig}>
       <button slot="invoker">Click me to open the global overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -61,14 +61,14 @@ export const placementGlobal = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```
 
 ## isTooltip (placementMode: 'local')
 
-As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/349b6dcbd670ce5114adab326e33fd02183c2dae/docs/fundamentals/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
+As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
 
 - Dialogs have a modal option, tooltips don’t
 - Dialogs have interactive content, tooltips don’t
@@ -91,12 +91,12 @@ export const isTooltip = () => {
   const tooltipConfig = { placementMode: 'local', isTooltip: true, handlesAccessibility: true };
 
   return html`
-    <demo-overlay-system id="tooltip" .config=${tooltipConfig}>
+    <demo-el-using-overlaymixin id="tooltip" .config=${tooltipConfig}>
       <button slot="invoker" @mouseenter=${showTooltip} @mouseleave=${hideTooltip}>
         Hover me to open the tooltip!
       </button>
       <div slot="content" class="demo-overlay">Hello!</div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```
@@ -114,7 +114,7 @@ You use the feature on any type of overlay.
 export const trapsKeyboardFocus = () => {
   const trapsKeyboardFocusConfig = { trapsKeyboardFocus: true };
   return html`
-    <demo-overlay-system .config=${trapsKeyboardFocusConfig}>
+    <demo-el-using-overlaymixin .config=${trapsKeyboardFocusConfig}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         <div><a href="#">A focusable anchor</a></div>
@@ -127,7 +127,7 @@ export const trapsKeyboardFocus = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```
@@ -140,7 +140,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
 export const hidesOnEsc = () => {
   const hidesOnEscConfig = { hidesOnEsc: true };
   return html`
-    <demo-overlay-system .config=${hidesOnEscConfig}>
+    <demo-el-using-overlaymixin .config=${hidesOnEscConfig}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -151,7 +151,7 @@ export const hidesOnEsc = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```
@@ -164,7 +164,7 @@ Boolean property. When enabled allows closing the overlay on ESC key, even when
 export const hidesOnOutsideEsc = () => {
   const hidesOnEscConfig = { hidesOnOutsideEsc: true };
   return html`
-    <demo-overlay-system .config=${hidesOnEscConfig}>
+    <demo-el-using-overlaymixin .config=${hidesOnEscConfig}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -175,7 +175,7 @@ export const hidesOnOutsideEsc = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```
@@ -188,7 +188,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
 export const hidesOnOutsideClick = () => {
   const hidesOnOutsideClickConfig = { hidesOnOutsideClick: true };
   return html`
-    <demo-overlay-system .config=${hidesOnOutsideClickConfig}>
+    <demo-el-using-overlaymixin .config=${hidesOnOutsideClickConfig}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         <label for="myInput">Clicking this label should not trigger close</label>
@@ -200,7 +200,7 @@ export const hidesOnOutsideClick = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```
@@ -213,9 +213,12 @@ In the example, we focus the body instead of the `invokerNode`.
 
 ```js preview-story
 export const elementToFocusAfterHide = () => {
-  const elementToFocusAfterHideConfig = { elementToFocusAfterHide: document.body };
+  const btn = document.createElement('button');
+  btn.innerText = 'I should get focus';
+
+  const elementToFocusAfterHideConfig = { elementToFocusAfterHide: btn };
   return html`
-    <demo-overlay-system .config=${elementToFocusAfterHideConfig}>
+    <demo-el-using-overlaymixin .config=${elementToFocusAfterHideConfig}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -226,7 +229,8 @@ export const elementToFocusAfterHide = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
+    ${btn}
   `;
 };
 ```
@@ -239,18 +243,18 @@ Boolean property. When true, will add a backdrop when the overlay is opened.
 > If this is not what you intend, you can make the overlays not nested, where opening one, closes the other.
 > Fortunately, we also have a configuration option that simulates that behavior in the next section `isBlocking`.
 
-The backdrop styling can be configured by targeting the `.global-overlays .global-overlays__backdrop` css selector.
+The backdrop styling can be configured by targeting the `.overlays .overlays__backdrop` css selector.
 
 The backdrop animation can be configured by targeting the
-`.global-overlays .global-overlays__backdrop--animation-in` and
-`.global-overlays .global-overlays__backdrop--animation-out` css selector.
+`.overlays .overlays__backdrop--animation-in` and
+`.overlays .overlays__backdrop--animation-out` css selector.
 This currently only supports CSS Animations, because it relies on the `animationend` event to add/remove classes.
 
 ```js preview-story
 export const hasBackdrop = () => {
   const hasBackdropConfig = { hasBackdrop: true };
   return html`
-    <demo-overlay-system .config=${hasBackdropConfig}>
+    <demo-el-using-overlaymixin .config=${hasBackdropConfig}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -261,7 +265,7 @@ export const hasBackdrop = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```
@@ -274,24 +278,22 @@ Boolean property. When true, will block other overlays.
 export const isBlocking = () => {
   const isBlockingConfig = { hasBackdrop: true, isBlocking: true };
   return html`
-    <demo-overlay-system>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        <div>
-          <demo-overlay-system .config=${isBlockingConfig}>
-            <button slot="invoker">Click me to open another overlay which is blocking</button>
-            <div slot="content" class="demo-overlay demo-overlay--blocking">
-              Hello! You can close this notification here:
-              <button
-                class="close-button"
-                @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-              >
-                ⨯
-              </button>
-            </div>
-          </demo-overlay-system>
-        </div>
-        Hello! You can close this notification here:
+    <demo-el-using-overlaymixin>
+      <button slot="invoker">Overlay A: open first</button>
+      <div slot="content" class="demo-overlay" style="width:200px;">
+        This overlay gets closed when overlay B gets opened
+        <button
+          class="close-button"
+          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+        >
+          ⨯
+        </button>
+      </div>
+    </demo-el-using-overlaymixin>
+    <demo-el-using-overlaymixin .config=${isBlockingConfig}>
+      <button slot="invoker">Overlay B: open second</button>
+      <div slot="content" class="demo-overlay demo-overlay--blocking">
+        Overlay A is hidden... now close me and see overlay A again.
         <button
           class="close-button"
           @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@@ -299,7 +301,7 @@ export const isBlocking = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```
@@ -315,7 +317,7 @@ Boolean property. When true, prevents scrolling content that is outside of the `
 export const preventsScroll = () => {
   const preventsScrollConfig = { preventsScroll: true };
   return html`
-    <demo-overlay-system .config=${preventsScrollConfig}>
+    <demo-el-using-overlaymixin .config=${preventsScrollConfig}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -326,7 +328,7 @@ export const preventsScroll = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```
@@ -351,11 +353,11 @@ Options:
 export const viewportConfig = () => {
   const viewportConfig = {
     placementMode: 'global',
-    viewportConfig: { placement: 'top-left' },
+    viewportConfig: { placement: 'bottom-left' },
   };
   return html`
-    <demo-overlay-system .config=${viewportConfig}>
-      <button slot="invoker">Click me to open the overlay in the top left corner!</button>
+    <demo-el-using-overlaymixin .config=${viewportConfig}>
+      <button slot="invoker">Click me to open the overlay in the bottom left corner!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
@@ -365,7 +367,7 @@ export const viewportConfig = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```
@@ -383,7 +385,7 @@ Features:
 
 > Popper strictly is scoped on positioning. **It does not change the dimensions of the content node nor the invoker node**.
 > This also means that if you use the arrow feature, you are in charge of styling it properly, use the data-popper-placement attribute for this.
-> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/349b6dcbd670ce5114adab326e33fd02183c2dae/docs/components/tooltip/overview.md), where an arrow is set by default.
+> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/tooltip/overview.md), where an arrow is set by default.
 
 To override the default options we set for local mode, you add a `popperConfig` object to the config passed to the OverlayController.
 Here's a succinct overview of some often used popper properties:
@@ -434,7 +436,7 @@ export const popperConfig = () => {
         border: 1px solid black;
       }
     </style>
-    <demo-overlay-system .config=${popperConfig}>
+    <demo-el-using-overlaymixin .config=${popperConfig}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -445,7 +447,7 @@ export const popperConfig = () => {
           ⨯
         </button>
       </div>
-    </demo-overlay-system>
+    </demo-el-using-overlaymixin>
   `;
 };
 ```

package/docs/fundamentals/systems/overlays/overview.md

@@ -6,7 +6,7 @@ Manages their position on the screen relative to other elements, including other
 
 Its purpose is to make it easy to use our Overlay System declaratively. It can be easily extended where needed, to override event listeners and more.
 
-See [lion-dialog](../../../components/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/349b6dcbd670ce5114adab326e33fd02183c2dae/docs/components/tooltip/overview.md) for example Web Component implementations using the Overlay System.
+See [lion-dialog](../../../components/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/tooltip/overview.md) for example Web Component implementations using the Overlay System.
 
 ## Features
 
@@ -18,9 +18,9 @@ See [lion-dialog](../../../components/dialog/overview.md) and [lion-tooltip](htt
 - lion-overlay web component:
   - Show content when clicking the invoker
   - Have a `.config` object to set or update the OverlayController's configuration
-- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/349b6dcbd670ce5114adab326e33fd02183c2dae/docs/fundamentals/systems/overlays/use-cases.md#overlaysmanager), a global repository keeping track of all different types of overlays
-- [**OverlayController**](https://github.com/ing-bank/lion/blob/349b6dcbd670ce5114adab326e33fd02183c2dae/docs/fundamentals/systems/overlays/use-cases.md#overlaycontroller), a single controller class for handling overlays
-- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/349b6dcbd670ce5114adab326e33fd02183c2dae/docs/fundamentals/systems/overlays/use-cases.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
+- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/overlays/use-cases.md#overlaysmanager), a global repository keeping track of all different types of overlays
+- [**OverlayController**](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/overlays/use-cases.md#overlaycontroller), a single controller class for handling overlays
+- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/overlays/use-cases.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
 
 Usually you will use `lion-dialog` (or `lion-tooltip` if this makes more sense).
 
@@ -110,7 +110,7 @@ class MyOverlayComponent extends OverlayMixin(LitElement) {
 
 ## Rationales
 
-Please check the [system rationals](https://github.com/ing-bank/lion/blob/349b6dcbd670ce5114adab326e33fd02183c2dae/docs/fundamentals/systems/overlays/rationale.md) folder, where we go more in-depth.
+Please check the [system rationals](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/overlays/rationale.md) folder, where we go more in-depth.
 
 ### Aria roles