@lion/ui 0.0.9 → 0.0.10

package/custom-elements.json

@@ -871,14 +871,6 @@
             "name": "LionInputDatepicker",
             "module": "../components/input-datepicker/src/LionInputDatepicker.js"
           }
-        },
-        {
-          "kind": "js",
-          "name": "LionCalendarOverlayFrame",
-          "declaration": {
-            "name": "LionCalendarOverlayFrame",
-            "module": "../components/input-datepicker/src/LionCalendarOverlayFrame.js"
-          }
         }
       ]
     },
@@ -1483,14 +1475,6 @@
             "module": "../components/overlays/src/OverlaysManager.js"
           }
         },
-        {
-          "kind": "js",
-          "name": "globalOverlaysStyle",
-          "declaration": {
-            "name": "globalOverlaysStyle",
-            "module": "../components/overlays/src/globalOverlaysStyle.js"
-          }
-        },
         {
           "kind": "js",
           "name": "OverlayController",
@@ -2692,14 +2676,6 @@
             "name": "LionInputDatepicker",
             "module": "\"../components/input-datepicker/src/LionInputDatepicker.js\""
           }
-        },
-        {
-          "kind": "js",
-          "name": "LionCalendarOverlayFrame",
-          "declaration": {
-            "name": "LionCalendarOverlayFrame",
-            "module": "\"../components/input-datepicker/src/LionCalendarOverlayFrame.js\""
-          }
         }
       ]
     },
@@ -3304,14 +3280,6 @@
             "module": "\"../components/overlays/src/OverlaysManager.js\""
           }
         },
-        {
-          "kind": "js",
-          "name": "globalOverlaysStyle",
-          "declaration": {
-            "name": "globalOverlaysStyle",
-            "module": "\"../components/overlays/src/globalOverlaysStyle.js\""
-          }
-        },
         {
           "kind": "js",
           "name": "OverlayController",
@@ -3698,21 +3666,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "exports/define/lion-calendar-overlay-frame.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "lion-calendar-overlay-frame",
-          "declaration": {
-            "name": "LionCalendarOverlayFrame",
-            "module": "/exports/input-datepicker.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "exports/define/lion-calendar.js",
@@ -4463,6 +4416,14 @@
             "module": "../../components/overlays/types/OverlayConfig.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ViewportConfig",
+          "declaration": {
+            "name": "ViewportConfig",
+            "module": "../../components/overlays/types/OverlayConfig.js"
+          }
+        },
         {
           "kind": "js",
           "name": "DefineOverlayConfig",
@@ -19251,59 +19212,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/input-datepicker/src/LionCalendarOverlayFrame.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LionCalendarOverlayFrame",
-          "members": [
-            {
-              "kind": "field",
-              "name": "localizeNamespaces",
-              "static": true
-            },
-            {
-              "kind": "method",
-              "name": "__dispatchCloseEvent",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "name": "close-overlay",
-              "type": {
-                "text": "Event"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "LocalizeMixin",
-              "package": "@lion/ui/localize.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "lion-calendar-overlay-frame",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LionCalendarOverlayFrame",
-          "declaration": {
-            "name": "LionCalendarOverlayFrame",
-            "module": "components/input-datepicker/src/LionCalendarOverlayFrame.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/input-datepicker/src/LionInputDatepicker.js",
@@ -19356,6 +19264,10 @@
               "description": "Defining this overlay as a templates from OverlayMixin\nthis is our source to give as .contentNode to OverlayController.\nImportant: do not change the name of this method.",
               "privacy": "protected"
             },
+            {
+              "kind": "method",
+              "name": "_overlayFrameTemplate"
+            },
             {
               "kind": "method",
               "name": "_calendarTemplate",
@@ -19562,6 +19474,10 @@
             {
               "name": "OverlayMixin",
               "package": "@lion/ui/overlays.js"
+            },
+            {
+              "name": "LocalizeMixin",
+              "package": "@lion/ui/localize.js"
             }
           ],
           "superclass": {
@@ -19583,6 +19499,31 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/input-datepicker/src/localizeNamespaceLoader.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "localizeNamespaceLoader",
+          "parameters": [
+            {
+              "name": "locale"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "localizeNamespaceLoader",
+          "declaration": {
+            "name": "localizeNamespaceLoader",
+            "module": "components/input-datepicker/src/localizeNamespaceLoader.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/input-datepicker/test-helpers/DatepickerInputObject.js",
@@ -27914,7 +27855,7 @@
                 }
               ],
               "type": {
-                "text": "OverlayConfig"
+                "text": "Partial<OverlayConfig>"
               },
               "default": "{}",
               "inheritedFrom": {
@@ -28017,6 +27958,22 @@
                 "module": "components/overlays/src/OverlayMixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "firstUpdated",
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "OverlayMixin",
+                "module": "components/overlays/src/OverlayMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "_overlayInvokerNode",
@@ -28167,19 +28124,6 @@
                 "name": "OverlayMixin",
                 "module": "components/overlays/src/OverlayMixin.js"
               }
-            },
-            {
-              "kind": "field",
-              "name": "__needsSetup",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "true",
-              "inheritedFrom": {
-                "name": "OverlayMixin",
-                "module": "components/overlays/src/OverlayMixin.js"
-              }
             }
           ],
           "mixins": [
@@ -28242,7 +28186,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "OverlayController is the fundament for every single type of overlay. With the right\nconfiguration, it can be used to build (modal) dialogs, tooltips, dropdowns, popovers,\nbottom/top/left/right sheets etc.",
           "name": "OverlayController",
           "members": [
             {
@@ -28258,7 +28202,7 @@
               "name": "content",
               "description": "The contentWrapperNode",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLDialogElement | HTMLDivElement"
               }
             },
             {
@@ -28421,15 +28365,6 @@
                 "text": "ViewportConfig"
               }
             },
-            {
-              "kind": "field",
-              "name": "_renderTarget",
-              "description": "Usually the parent node of contentWrapperNode that either exists locally or globally.\nWhen a responsive scenario is created (in which we switch from global to local or vice versa)\nwe need to know where we should reappend contentWrapperNode (or contentNode in case it's\nprojected).",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "protected"
-            },
             {
               "kind": "field",
               "name": "_referenceNode",
@@ -28482,39 +28417,12 @@
             {
               "kind": "method",
               "name": "_init",
-              "parameters": [
-                {
-                  "name": "{ cfgToAdd }"
-                },
-                {
-                  "name": "options",
-                  "type": {
-                    "text": "{ cfgToAdd: OverlayConfig }"
-                  }
-                }
-              ],
               "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "__initConnectionTarget",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "__initContentWrapperNode",
-              "parameters": [
-                {
-                  "name": "{ cfgToAdd }"
-                },
-                {
-                  "name": "options",
-                  "type": {
-                    "text": "{ cfgToAdd: OverlayConfig }"
-                  }
-                }
-              ],
-              "description": "Cleanup ._contentWrapperNode. We do this, because creating a fresh wrapper\ncan lead to problems with event listeners...",
+              "name": "__initContentDomStructure",
+              "description": "Here we arrange our content node via:\n1. HTMLDialogElement: the content will always be painted to the browser's top layer\n  - no matter what context the contentNode lives in, the overlay will be painted correctly via the <dialog> element,\n    even if 'overflow:hidden' or a css transform is applied in its parent hierarchy.\n  - the dialog element will be unstyled, but will span the whole screen\n  - a backdrop element will be a child of the dialog element, so it leverages the capabilities of the parent\n    (filling the whole screen if wanted an always painted to top layer)\n2. ContentWrapper: the content receives the right positioning styles in a clean/non conflicting way:\n - local positioning: receive inline (position) styling that can never conflict with the already existing computed styles\n - global positioning: receive flex (child) classes that position the content correctly relative to the viewport\n\nThe resulting structure that will be created looks like this:\n\n...\n<dialog role=\"none\">\n  <div id=\"optional-backdrop\"></div>\n  <div id=\"content-wrapper-node\">\n    <!-- this was the (slot for) original content node -->\n    <slot name=\"content\"></slot>\n  </div>\n</dialog>\n...",
               "privacy": "private"
             },
             {
@@ -28644,6 +28552,9 @@
               "kind": "method",
               "name": "_transitionHide",
               "parameters": [
+                {
+                  "name": "{ backdropNode, contentNode }"
+                },
                 {
                   "name": "hideConfig",
                   "type": {
@@ -28660,7 +28571,7 @@
                 {
                   "name": "showConfig",
                   "type": {
-                    "text": "{backdropNode:HTMLElement, contentNode:HTMLElement}"
+                    "text": "{backdropNode:HTMLElement; contentNode:HTMLElement}"
                   }
                 }
               ],
@@ -28673,7 +28584,7 @@
                 {
                   "name": "showConfig",
                   "type": {
-                    "text": "{backdropNode:HTMLElement, contentNode:HTMLElement}"
+                    "text": "{backdropNode:HTMLElement; contentNode:HTMLElement}"
                   }
                 }
               ]
@@ -28874,11 +28785,6 @@
               "kind": "method",
               "name": "teardown"
             },
-            {
-              "kind": "method",
-              "name": "_teardownContentWrapperNode",
-              "privacy": "protected"
-            },
             {
               "kind": "method",
               "name": "__createPopperInstance",
@@ -28895,6 +28801,14 @@
               "privacy": "private",
               "default": "config"
             },
+            {
+              "kind": "field",
+              "name": "config",
+              "type": {
+                "text": "OverlayConfig"
+              },
+              "default": "{}"
+            },
             {
               "kind": "field",
               "name": "_defaultConfig",
@@ -28902,7 +28816,7 @@
                 "text": "OverlayConfig"
               },
               "privacy": "protected",
-              "default": "{\n      placementMode: undefined,\n      contentNode: config.contentNode,\n      contentWrapperNode: config.contentWrapperNode,\n      invokerNode: config.invokerNode,\n      backdropNode: config.backdropNode,\n      referenceNode: undefined,\n      elementToFocusAfterHide: config.invokerNode,\n      inheritsReferenceWidth: 'none',\n      hasBackdrop: false,\n      isBlocking: false,\n      preventsScroll: false,\n      trapsKeyboardFocus: false,\n      hidesOnEsc: false,\n      hidesOnOutsideEsc: false,\n      hidesOnOutsideClick: false,\n      isTooltip: false,\n      invokerRelation: 'description',\n      // handlesUserInteraction: false,\n      handlesAccessibility: false,\n      popperConfig: {\n        placement: 'top',\n        strategy: 'absolute',\n        modifiers: [\n          {\n            name: 'preventOverflow',\n            enabled: true,\n            options: {\n              boundariesElement: 'viewport',\n              padding: 8, // viewport-margin for shifting/sliding\n            },\n          },\n          {\n            name: 'flip',\n            options: {\n              boundariesElement: 'viewport',\n              padding: 16, // viewport-margin for flipping\n            },\n          },\n          {\n            name: 'offset',\n            enabled: true,\n            options: {\n              offset: [0, 8], // horizontal and vertical margin (distance between popper and referenceElement)\n            },\n          },\n          {\n            name: 'arrow',\n            enabled: false,\n          },\n        ],\n      },\n      viewportConfig: {\n        placement: 'center',\n      },\n    }"
+              "default": "{\n      placementMode: undefined,\n      contentNode: config.contentNode,\n      contentWrapperNode: config.contentWrapperNode,\n      invokerNode: config.invokerNode,\n      backdropNode: config.backdropNode,\n      referenceNode: undefined,\n      elementToFocusAfterHide: config.invokerNode,\n      inheritsReferenceWidth: 'none',\n      hasBackdrop: false,\n      isBlocking: false,\n      preventsScroll: false,\n      trapsKeyboardFocus: false,\n      hidesOnEsc: false,\n      hidesOnOutsideEsc: false,\n      hidesOnOutsideClick: false,\n      isTooltip: false,\n      invokerRelation: 'description',\n      // handlesUserInteraction: false,\n      handlesAccessibility: false,\n      popperConfig: {\n        placement: 'top',\n        strategy: 'fixed',\n        modifiers: [\n          {\n            name: 'preventOverflow',\n            enabled: true,\n            options: {\n              boundariesElement: 'viewport',\n              padding: 8, // viewport-margin for shifting/sliding\n            },\n          },\n          {\n            name: 'flip',\n            options: {\n              boundariesElement: 'viewport',\n              padding: 16, // viewport-margin for flipping\n            },\n          },\n          {\n            name: 'offset',\n            enabled: true,\n            options: {\n              offset: [0, 8], // horizontal and vertical margin (distance between popper and referenceElement)\n            },\n          },\n          {\n            name: 'arrow',\n            enabled: false,\n          },\n        ],\n      },\n      viewportConfig: {\n        placement: 'center',\n      },\n      zIndex: 9999,\n    }"
             },
             {
               "kind": "field",
@@ -28934,15 +28848,6 @@
               "privacy": "private",
               "default": "true"
             },
-            {
-              "kind": "field",
-              "name": "__backdropNodeToBeTornDown",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private",
-              "default": "undefined"
-            },
             {
               "kind": "field",
               "name": "addEventListener",
@@ -29034,7 +28939,7 @@
                 }
               ],
               "type": {
-                "text": "OverlayConfig"
+                "text": "Partial<OverlayConfig>"
               },
               "default": "{}"
             },
@@ -29123,6 +29028,18 @@
               "name": "_teardownOpenCloseListeners",
               "privacy": "protected"
             },
+            {
+              "kind": "method",
+              "name": "firstUpdated",
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "_overlayInvokerNode"
@@ -29209,15 +29126,6 @@
                 "text": "boolean"
               },
               "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "__needsSetup",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "true"
             }
           ],
           "events": [
@@ -29283,21 +29191,11 @@
           "description": "`OverlaysManager` which manages overlays which are rendered into the body",
           "name": "OverlaysManager",
           "members": [
-            {
-              "kind": "method",
-              "name": "__createGlobalRootNode",
-              "static": true
-            },
             {
               "kind": "method",
               "name": "__createGlobalStyleNode",
               "static": true
             },
-            {
-              "kind": "field",
-              "name": "globalRootNode",
-              "description": "no setter as .list is intended to be read-only\nYou can use .add or .remove to modify it"
-            },
             {
               "kind": "field",
               "name": "list",
@@ -29498,21 +29396,42 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/overlays/src/globalOverlaysStyle.js",
+      "path": "components/overlays/src/overlayDocumentStyle.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "globalOverlaysStyle",
-          "default": "css`\n  .global-overlays {\n    position: fixed;\n    z-index: 200;\n  }\n\n  .global-overlays__overlay {\n    pointer-events: auto;\n  }\n\n  .global-overlays__overlay-container {\n    display: flex;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n  }\n\n  .global-overlays__overlay-container--top-left {\n    justify-content: flex-start;\n    align-items: flex-start;\n  }\n\n  .global-overlays__overlay-container--top {\n    justify-content: center;\n    align-items: flex-start;\n  }\n\n  .global-overlays__overlay-container--top-right {\n    justify-content: flex-end;\n    align-items: flex-start;\n  }\n\n  .global-overlays__overlay-container--right {\n    justify-content: flex-end;\n    align-items: center;\n  }\n\n  .global-overlays__overlay-container--bottom-left {\n    justify-content: flex-start;\n    align-items: flex-end;\n  }\n\n  .global-overlays__overlay-container--bottom {\n    justify-content: center;\n    align-items: flex-end;\n  }\n\n  .global-overlays__overlay-container--bottom-right {\n    justify-content: flex-end;\n    align-items: flex-end;\n  }\n  .global-overlays__overlay-container--left {\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  .global-overlays__overlay-container--center {\n    justify-content: center;\n    align-items: center;\n  }\n\n  .global-overlays__overlay--bottom-sheet {\n    width: 100%;\n  }\n\n  .global-overlays .global-overlays__backdrop {\n    content: '';\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: -1;\n    background-color: #333333;\n    filter: opacity(30%);\n    display: none;\n  }\n\n  .global-overlays .global-overlays__backdrop--visible {\n    display: block;\n  }\n\n  .global-overlays .global-overlays__backdrop--animation-in {\n    animation: global-overlays-backdrop-fade-in 300ms;\n  }\n\n  .global-overlays .global-overlays__backdrop--animation-out {\n    animation: global-overlays-backdrop-fade-out 300ms;\n    opacity: 0;\n  }\n\n  @keyframes global-overlays-backdrop-fade-in {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @keyframes global-overlays-backdrop-fade-out {\n    from {\n      opacity: 0.3;\n    }\n  }\n\n  body > *[inert] {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    pointer-events: none;\n  }\n\n  body.global-overlays-scroll-lock {\n    overflow: hidden;\n  }\n\n  body.global-overlays-scroll-lock-ios-fix {\n    position: fixed;\n    width: 100%;\n  }\n\n  html.global-overlays-scroll-lock-ios-fix {\n    height: 100vh;\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    .global-overlays .global-overlays__backdrop--animation-in {\n      animation: global-overlays-backdrop-fade-in 1ms;\n    }\n\n    .global-overlays .global-overlays__backdrop--animation-out {\n      animation: global-overlays-backdrop-fade-out 1ms;\n    }\n  }\n`"
+          "name": "overlayDocumentStyle",
+          "default": "css`\n  body > *[inert] {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    pointer-events: none;\n  }\n\n  body.overlays-scroll-lock {\n    overflow: hidden;\n  }\n\n  body.overlays-scroll-lock-ios-fix {\n    position: fixed;\n    width: 100%;\n  }\n\n  html.overlays-scroll-lock-ios-fix {\n    height: 100vh;\n  }\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "globalOverlaysStyle",
+          "name": "overlayDocumentStyle",
           "declaration": {
-            "name": "globalOverlaysStyle",
-            "module": "components/overlays/src/globalOverlaysStyle.js"
+            "name": "overlayDocumentStyle",
+            "module": "components/overlays/src/overlayDocumentStyle.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/overlays/src/overlayShadowDomStyle.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "overlayShadowDomStyle",
+          "default": "css`\n  .overlays {\n    position: fixed;\n    z-index: 200;\n  }\n\n  .overlays__overlay-container {\n    display: flex;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n  }\n\n  .overlays__overlay-container::backdrop {\n    display: none;\n  }\n\n  .overlays__overlay-container--top-left {\n    justify-content: flex-start;\n    align-items: flex-start;\n  }\n\n  .overlays__overlay-container--top {\n    justify-content: center;\n    align-items: flex-start;\n  }\n\n  .overlays__overlay-container--top-right {\n    justify-content: flex-end;\n    align-items: flex-start;\n  }\n\n  .overlays__overlay-container--right {\n    justify-content: flex-end;\n    align-items: center;\n  }\n\n  .overlays__overlay-container--bottom-left {\n    justify-content: flex-start;\n    align-items: flex-end;\n  }\n\n  .overlays__overlay-container--bottom {\n    justify-content: center;\n    align-items: flex-end;\n  }\n\n  .overlays__overlay-container--bottom-right {\n    justify-content: flex-end;\n    align-items: flex-end;\n  }\n\n  .overlays__overlay-container--left {\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  .overlays__overlay-container--center {\n    justify-content: center;\n    align-items: center;\n  }\n\n  .overlays__overlay--bottom-sheet {\n    width: 100%;\n  }\n\n  ::slotted(.overlays__overlay),\n  .overlays__overlay {\n    pointer-events: auto;\n  }\n\n  .overlays__backdrop {\n    content: '';\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: -1;\n    background-color: #333333;\n    display: none;\n  }\n\n  .overlays__backdrop--visible {\n    display: block;\n  }\n\n  .overlays__backdrop--animation-in {\n    animation: overlays-backdrop-fade-in 300ms;\n    opacity: 0.3;\n  }\n\n  .overlays__backdrop--animation-out {\n    animation: overlays-backdrop-fade-out 300ms;\n    opacity: 0;\n  }\n\n  @keyframes overlays-backdrop-fade-in {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @keyframes overlays-backdrop-fade-out {\n    from {\n      opacity: 0.3;\n    }\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    .overlays .overlays__backdrop--animation-in {\n      animation: overlays-backdrop-fade-in 1ms;\n    }\n\n    .overlays .overlays__backdrop--animation-out {\n      animation: overlays-backdrop-fade-out 1ms;\n    }\n  }\n\n  dialog[data-overlay-outer-wrapper] {\n    background-image: none;\n    border-style: none;\n    padding: 0px;\n  }\n\n  /** \n   * We don't want to use pseudo el ::backdrop.  \n   * We have our own, that creates more flexibility wrt scrolling etc.\n   */\n  dialog[data-overlay-outer-wrapper]::backdrop {\n    display: none;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "overlayShadowDomStyle",
+          "declaration": {
+            "name": "overlayShadowDomStyle",
+            "module": "components/overlays/src/overlayShadowDomStyle.js"
           }
         }
       ]
@@ -30208,7 +30127,7 @@
               "kind": "field",
               "name": "config",
               "type": {
-                "text": "OverlayConfig"
+                "text": "Partial<OverlayConfig>"
               }
             },
             {
@@ -31613,19 +31532,9 @@
                 "text": "string"
               },
               "default": "'button'"
-            },
-            {
-              "kind": "field",
-              "name": "",
-              "privacy": "public",
-              "attribute": ""
             }
           ],
           "attributes": [
-            {
-              "name": "",
-              "fieldName": ""
-            },
             {
               "name": "selectedElement",
               "fieldName": "selectedElement"
@@ -33580,12 +33489,6 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist-types/exports/define/lion-calendar-overlay-frame.d.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "dist-types/exports/define/lion-calendar.d.ts",
@@ -33958,6 +33861,14 @@
             "module": "../../components/overlays/types/OverlayConfig.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ViewportConfig",
+          "declaration": {
+            "name": "ViewportConfig",
+            "module": "../../components/overlays/types/OverlayConfig.js"
+          }
+        },
         {
           "kind": "js",
           "name": "DefineOverlayConfig",
@@ -46034,6 +45945,11 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "waitForAllChildrenUpdates",
+              "description": "Prevents errors outside test from being thrown"
             }
           ],
           "superclass": {
@@ -55395,40 +55311,6 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist-types/components/input-datepicker/src/LionCalendarOverlayFrame.d.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LionCalendarOverlayFrame",
-          "members": [
-            {
-              "kind": "field",
-              "name": "__dispatchCloseEvent",
-              "privacy": "private"
-            }
-          ],
-          "superclass": {
-            "name": "LionCalendarOverlayFrame_base",
-            "module": "dist-types/components/input-datepicker/src/LionCalendarOverlayFrame.d.ts"
-          },
-          "tagName": "lion-calendar-overlay-frame",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LionCalendarOverlayFrame",
-          "declaration": {
-            "name": "LionCalendarOverlayFrame",
-            "module": "dist-types/components/input-datepicker/src/LionCalendarOverlayFrame.d.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts",
@@ -55442,7 +55324,7 @@
               "kind": "field",
               "name": "scopedElements",
               "type": {
-                "text": "{\n        'lion-calendar': typeof LionCalendar;\n        'lion-calendar-overlay-frame': typeof LionCalendarOverlayFrame;\n    }"
+                "text": "{\n        'lion-calendar': typeof LionCalendar;\n    }"
               },
               "static": true
             },
@@ -55586,6 +55468,15 @@
               },
               "description": "Defining this overlay as a templates from OverlayMixin\nthis is our source to give as .contentNode to OverlayController.\nImportant: do not change the name of this method."
             },
+            {
+              "kind": "method",
+              "name": "_overlayFrameTemplate",
+              "return": {
+                "type": {
+                  "text": "import(\"lit-html\").TemplateResult<1>"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_calendarTemplate",
@@ -55724,6 +55615,39 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist-types/components/input-datepicker/src/localizeNamespaceLoader.d.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "localizeNamespaceLoader",
+          "return": {
+            "type": {
+              "text": "Promise<{\n    default: object;\n}>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "locale",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "localizeNamespaceLoader",
+          "declaration": {
+            "name": "localizeNamespaceLoader",
+            "module": "dist-types/components/input-datepicker/src/localizeNamespaceLoader.d.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist-types/components/input-datepicker/test/lion-input-datepicker-integrations.test.d.ts",
@@ -62519,14 +62443,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "OverlayController is the fundament for every single type of overlay. With the right\nconfiguration, it can be used to build (modal) dialogs, tooltips, dropdowns, popovers,\nbottom/top/left/right sheets etc.",
           "name": "OverlayController",
           "members": [
             {
               "kind": "field",
               "name": "manager",
               "type": {
-                "text": "any"
+                "text": "import(\"./OverlaysManager.js\").OverlaysManager"
               }
             },
             {
@@ -62534,6 +62458,13 @@
               "name": "__sharedConfig",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "config",
+              "type": {
+                "text": "OverlayConfig"
+              }
+            },
             {
               "kind": "field",
               "name": "_defaultConfig",
@@ -62555,13 +62486,6 @@
               "name": "__originalAttrs",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "__isContentNodeProjected",
-              "type": {
-                "text": "boolean | undefined"
-              }
-            },
             {
               "kind": "field",
               "name": "__hasActiveTrapsKeyboardFocus",
@@ -62572,14 +62496,6 @@
               "name": "__hasActiveBackdrop",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "__backdropNodeToBeTornDown",
-              "privacy": "private",
-              "type": {
-                "text": "HTMLElement | undefined"
-              }
-            },
             {
               "kind": "field",
               "name": "__escKeyHandler",
@@ -62597,7 +62513,7 @@
               "kind": "field",
               "name": "content",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLDialogElement | HTMLDivElement"
               },
               "description": "The contentWrapperNode"
             },
@@ -62761,15 +62677,6 @@
               },
               "description": "Viewport configuration. Will be used when placementMode is 'global'"
             },
-            {
-              "kind": "field",
-              "name": "_renderTarget",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "protected",
-              "description": "Usually the parent node of contentWrapperNode that either exists locally or globally.\nWhen a responsive scenario is created (in which we switch from global to local or vice versa)\nwe need to know where we should reappend contentWrapperNode (or contentNode in case it's\nprojected)."
-            },
             {
               "kind": "field",
               "name": "_referenceNode",
@@ -62819,13 +62726,6 @@
                 "text": "OverlayConfig"
               }
             },
-            {
-              "kind": "field",
-              "name": "config",
-              "type": {
-                "text": "OverlayConfig"
-              }
-            },
             {
               "kind": "field",
               "name": "__elementToFocusAfterHide",
@@ -62852,56 +62752,34 @@
                 "type": {
                   "text": "void"
                 }
-              },
-              "parameters": [
-                {
-                  "name": "{ cfgToAdd }",
-                  "type": {
-                    "text": "{\n        cfgToAdd: OverlayConfig;\n    }"
-                  }
-                },
-                {
-                  "name": "options",
-                  "type": {
-                    "text": "{ cfgToAdd: OverlayConfig }"
-                  }
-                }
-              ]
+              }
             },
             {
               "kind": "field",
-              "name": "__initConnectionTarget",
-              "privacy": "private"
+              "name": "__contentHasBeenInitialized",
+              "type": {
+                "text": "boolean | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "__initContentWrapperNode",
+              "name": "__initContentDomStructure",
               "privacy": "private",
-              "description": "Cleanup ._contentWrapperNode. We do this, because creating a fresh wrapper\ncan lead to problems with event listeners...",
-              "parameters": [
-                {
-                  "name": "options",
-                  "type": {
-                    "text": "{ cfgToAdd: OverlayConfig }"
-                  }
-                }
-              ]
+              "description": "Here we arrange our content node via:\n1. HTMLDialogElement: the content will always be painted to the browser's top layer\n  - no matter what context the contentNode lives in, the overlay will be painted correctly via the <dialog> element,\n    even if 'overflow:hidden' or a css transform is applied in its parent hierarchy.\n  - the dialog element will be unstyled, but will span the whole screen\n  - a backdrop element will be a child of the dialog element, so it leverages the capabilities of the parent\n    (filling the whole screen if wanted an always painted to top layer)\n2. ContentWrapper: the content receives the right positioning styles in a clean/non conflicting way:\n - local positioning: receive inline (position) styling that can never conflict with the already existing computed styles\n - global positioning: receive flex (child) classes that position the content correctly relative to the viewport\n\nThe resulting structure that will be created looks like this:\n\n...\n<dialog role=\"none\">\n  <div id=\"optional-backdrop\"></div>\n  <div id=\"content-wrapper-node\">\n    <!-- this was the (slot for) original content node -->\n    <slot name=\"content\"></slot>\n  </div>\n</dialog>\n..."
             },
             {
               "kind": "field",
-              "name": "__contentWrapperNode",
+              "name": "__wrappingDialogNode",
               "type": {
-                "text": "HTMLElement | HTMLDivElement | undefined"
-              },
-              "description": "config [l2],[l3],[l4]"
+                "text": "HTMLDialogElement | HTMLDivElement | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "__originalContentParent",
+              "name": "__contentWrapperNode",
               "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "description": "config [l2], [l4]"
+                "text": "HTMLDivElement | undefined"
+              }
             },
             {
               "kind": "method",
@@ -63145,6 +63023,12 @@
                 }
               },
               "parameters": [
+                {
+                  "name": "{ backdropNode, contentNode }",
+                  "type": {
+                    "text": "{\n        backdropNode: HTMLElement;\n        contentNode: HTMLElement;\n    }"
+                  }
+                },
                 {
                   "name": "hideConfig",
                   "type": {
@@ -63153,13 +63037,6 @@
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "__backdropAnimation",
-              "type": {
-                "text": "Promise<any> | undefined"
-              }
-            },
             {
               "kind": "method",
               "name": "transitionShow",
@@ -63172,7 +63049,7 @@
                 {
                   "name": "showConfig",
                   "type": {
-                    "text": "{backdropNode:HTMLElement, contentNode:HTMLElement}"
+                    "text": "{backdropNode:HTMLElement; contentNode:HTMLElement}"
                   }
                 }
               ],
@@ -63190,7 +63067,7 @@
                 {
                   "name": "showConfig",
                   "type": {
-                    "text": "{backdropNode:HTMLElement, contentNode:HTMLElement}"
+                    "text": "{backdropNode:HTMLElement; contentNode:HTMLElement}"
                   }
                 }
               ]
@@ -63326,6 +63203,13 @@
                 "text": "HTMLDivElement | undefined"
               }
             },
+            {
+              "kind": "field",
+              "name": "__backdropInitialized",
+              "type": {
+                "text": "boolean | undefined"
+              }
+            },
             {
               "kind": "field",
               "name": "hasActiveTrapsKeyboardFocus",
@@ -63527,16 +63411,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "_teardownContentWrapperNode",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "field",
               "name": "__createPopperInstance",
@@ -63655,16 +63529,6 @@
           "description": "`OverlaysManager` which manages overlays which are rendered into the body",
           "name": "OverlaysManager",
           "members": [
-            {
-              "kind": "method",
-              "name": "__createGlobalRootNode",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "HTMLDivElement"
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "__createGlobalStyleNode",
@@ -63675,14 +63539,6 @@
                 }
               }
             },
-            {
-              "kind": "field",
-              "name": "globalRootNode",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "description": "no setter as .list is intended to be read-only\nYou can use .add or .remove to modify it"
-            },
             {
               "kind": "field",
               "name": "list",
@@ -63935,11 +63791,11 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist-types/components/overlays/src/globalOverlaysStyle.d.ts",
+      "path": "dist-types/components/overlays/src/overlayDocumentStyle.d.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "globalOverlaysStyle",
+          "name": "overlayDocumentStyle",
           "type": {
             "text": "import(\"lit\").CSSResult"
           }
@@ -63948,10 +63804,33 @@
       "exports": [
         {
           "kind": "js",
-          "name": "globalOverlaysStyle",
+          "name": "overlayDocumentStyle",
           "declaration": {
-            "name": "globalOverlaysStyle",
-            "module": "dist-types/components/overlays/src/globalOverlaysStyle.d.ts"
+            "name": "overlayDocumentStyle",
+            "module": "dist-types/components/overlays/src/overlayDocumentStyle.d.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist-types/components/overlays/src/overlayShadowDomStyle.d.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "overlayShadowDomStyle",
+          "type": {
+            "text": "import(\"lit\").CSSResult"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "overlayShadowDomStyle",
+          "declaration": {
+            "name": "overlayShadowDomStyle",
+            "module": "dist-types/components/overlays/src/overlayShadowDomStyle.d.ts"
           }
         }
       ]
@@ -63964,7 +63843,7 @@
           "kind": "variable",
           "name": "overlays",
           "type": {
-            "text": "any"
+            "text": "OverlaysManager"
           }
         }
       ],
@@ -64892,7 +64771,7 @@
               "kind": "field",
               "name": "config",
               "type": {
-                "text": "OverlayConfig"
+                "text": "Partial<OverlayConfig>"
               }
             },
             {
@@ -81922,6 +81801,16 @@
               "type": {
                 "text": "string | undefined"
               }
+            },
+            {
+              "kind": "method",
+              "name": "waitForAllChildrenUpdates",
+              "return": {
+                "type": {
+                  "text": "Promise<any[]>"
+                }
+              },
+              "description": "Prevents errors outside test from being thrown"
             }
           ],
           "superclass": {