@otto-de/b2b-core-components 1.9.0 → 1.10.0

package/dist/{cjs/index-8ed011c3.js → esm/index-ab9eb36d.js}

@@ -1,25 +1,3 @@
-'use strict';
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () {
-            return e[k];
-          }
-        });
-      }
-    });
-  }
-  n['default'] = e;
-  return Object.freeze(n);
-}
-
 const NAMESPACE = 'b2b-core-components';
 
 /**
@@ -32,6 +10,7 @@ const NAMESPACE = 'b2b-core-components';
  */
 let scopeId;
 let hostTagName;
+let useNativeShadowDom = false;
 let isSvgMode = false;
 let queuePending = false;
 const createTime = (fnName, tagName = '') => {
@@ -56,6 +35,13 @@ const HYDRATE_ID = 's-id';
 const HYDRATED_STYLE_ID = 'sty-id';
 const HYDRATE_CHILD_ID = 'c-id';
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+/**
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
+ *
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
+ * support as of Stencil v4.
+ */
+const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
 /**
  * Default style mode id
  */
@@ -106,6 +92,7 @@ function queryNonceMetaTagContent(doc) {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let simple = false;
     let lastSimple = false;
     const vNodeChildren = [];
@@ -133,6 +120,9 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
@@ -151,6 +141,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     return vnode;
 };
 /**
@@ -172,6 +165,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -182,6 +178,17 @@ const Host = {};
  * @returns whether it's a Host node or not
  */
 const isHost = (node) => node && node.$tag$ === Host;
+/**
+ * Entrypoint of the client-side hydration process. Facilitates calls to hydrate the
+ * document and all its nodes.
+ *
+ * This process will also reconstruct the shadow root and slot DOM nodes for components using shadow DOM.
+ *
+ * @param hostElm The element to hydrate.
+ * @param tagName The element's tag name.
+ * @param hostId The host ID assigned to the element by the server.
+ * @param hostRef The host reference for the element.
+ */
 const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     const endHydrate = createTime('hydrateClient', tagName);
     const shadowRoot = hostElm.shadowRoot;
@@ -199,6 +206,8 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
         const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
         const node = c.$elm$;
+        // Put the node back in its original location since the native Shadow DOM
+        // can handle rendering it its correct location now
         if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
             orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
         }
@@ -220,6 +229,22 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     }
     endHydrate();
 };
+/**
+ * Recursively constructs the virtual node tree for a host element and its children.
+ * The tree is constructed by parsing the annotations set on the nodes by the server.
+ *
+ * In addition to constructing the vNode tree, we also track information about the node's
+ * descendants like which are slots, which should exist in the shadow root, and which
+ * are nodes that should be rendered as children of the parent node.
+ *
+ * @param parentVNode The vNode representing the parent node.
+ * @param childRenderNodes An array of all child nodes in the parent's node tree.
+ * @param slotNodes An array of all slot nodes in the parent's node tree.
+ * @param shadowRootNodes An array all nodes that should be rendered in the shadow root in the parent's node tree.
+ * @param hostElm The parent element.
+ * @param node The node to construct the vNode tree for.
+ * @param hostId The host ID assigned to the element by the server.
+ */
 const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
     let childNodeType;
     let childIdSplt;
@@ -360,6 +385,13 @@ const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes
         parentVNode.$children$ = [vnode];
     }
 };
+/**
+ * Recursively locate any comments representing an original location for a node in a node's
+ * children or shadowRoot children.
+ *
+ * @param node The node to search.
+ * @param orgLocNodes A map of the original location annotation and the current node being searched.
+ */
 const initializeDocumentHydrate = (node, orgLocNodes) => {
     if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
         let i = 0;
@@ -504,6 +536,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
                     }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
+                // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
+                if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                    styleElm.innerHTML += SLOT_FB_CSS;
+                }
                 if (appliedStyles) {
                     appliedStyles.add(scopeId);
                 }
@@ -595,6 +631,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'key')
+            ;
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -667,7 +705,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                         elm[memberName] = newValue;
                     }
                 }
-                catch (e) { }
+                catch (e) {
+                    /**
+                     * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
+                     */
+                }
             }
             if (newValue == null || newValue === false) {
                 if (newValue !== false || elm.getAttribute(memberName) === '') {
@@ -686,6 +728,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     }
 };
 const parseClassListRegex = /\s/;
+/**
+ * Parsed a string of classnames into an array
+ * @param value className string, e.g. "foo bar baz"
+ * @returns list of classes, e.g. ["foo", "bar", "baz"]
+ */
 const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
 const CAPTURE_EVENT_SUFFIX = 'Capture';
 const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
@@ -772,6 +819,9 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             }
         }
     }
+    // This needs to always happen so we can hide nodes that are projected
+    // to another component but don't end up in a slot
+    elm['s-hn'] = hostTagName;
     return elm;
 };
 /**
@@ -896,10 +946,13 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
  * @param oldCh the old children of the parent node
  * @param newVNode the new VNode which will replace the parent
  * @param newCh the new children of the parent node
+ * @param isInitialRender whether or not this is the first render of the vdom
  */
-const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
+const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -907,6 +960,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // VNode might have been moved left
@@ -921,25 +975,25 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
         else if (newEndVnode == null) {
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldStartVnode, newStartVnode)) {
+        else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
             // if the start nodes are the same then we should patch the new VNode
             // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
             // indices to reflect that. We don't need to move any DOM Nodes around
             // since things are matched up in order.
-            patch(oldStartVnode, newStartVnode);
+            patch(oldStartVnode, newStartVnode, isInitialRender);
             oldStartVnode = oldCh[++oldStartIdx];
             newStartVnode = newCh[++newStartIdx];
         }
-        else if (isSameVnode(oldEndVnode, newEndVnode)) {
+        else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
             // likewise, if the end nodes are the same we patch new onto old and
             // decrement our end indices, and also likewise in this case we don't
             // need to move any DOM Nodes.
-            patch(oldEndVnode, newEndVnode);
+            patch(oldEndVnode, newEndVnode, isInitialRender);
             oldEndVnode = oldCh[--oldEndIdx];
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldStartVnode, newEndVnode)) {
-            patch(oldStartVnode, newEndVnode);
+        else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
+            patch(oldStartVnode, newEndVnode, isInitialRender);
             // We need to move the element for `oldStartVnode` into a position which
             // will be appropriate for `newEndVnode`. For this we can use
             // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
@@ -961,8 +1015,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             oldStartVnode = oldCh[++oldStartIdx];
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldEndVnode, newStartVnode)) {
-            patch(oldEndVnode, newStartVnode);
+        else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
+            patch(oldEndVnode, newStartVnode, isInitialRender);
             // We've already checked above if `oldStartVnode` and `newStartVnode` are
             // the same node, so since we're here we know that they are not. Thus we
             // can move the element for `oldEndVnode` _before_ the element for
@@ -973,7 +1027,41 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // Here we do some checks to match up old and new nodes based on the
+            // `$key$` attribute, which is set by putting a `key="my-key"` attribute
+            // in the JSX for a DOM element in the implementation of a Stencil
+            // component.
+            //
+            // First we check to see if there are any nodes in the array of old
+            // children which have the same key as the first node in the new
+            // children.
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                // We found a node in the old children which matches up with the first
+                // node in the new children! So let's deal with that
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    // the tag doesn't match so we'll need a new DOM element
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                }
+                else {
+                    patch(elmToMove, newStartVnode, isInitialRender);
+                    // invalidate the matching old node so that we won't try to update it
+                    // again later on
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // We either didn't find an element in the old children that matches
                 // the key of the first new child OR the build is not using `key`
                 // attributes at all. In either case we need to create a new element
@@ -1016,12 +1104,21 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
+ * @param isInitialRender whether or not this is the first render of the vdom
  * @returns whether they're equal or not
  */
-const isSameVnode = (leftVNode, rightVNode) => {
+const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (leftVNode.$tag$ === rightVNode.$tag$) {
+        // this will be set if JSX tags in the build have `key` attrs set on them
+        // we only want to check this if we're not on the first render since on
+        // first render `leftVNode.$key$` will always be `null`, so we can be led
+        // astray and, for instance, accidentally delete a DOM node that we want to
+        // keep around.
+        if (!isInitialRender) {
+            return leftVNode.$key$ === rightVNode.$key$;
+        }
         return true;
     }
     return false;
@@ -1033,8 +1130,9 @@ const isSameVnode = (leftVNode, rightVNode) => {
  *
  * @param oldVNode an old VNode whose DOM element and children we want to update
  * @param newVNode a new VNode representing an updated version of the old one
+ * @param isInitialRender whether or not this is the first render of the vdom
  */
-const patch = (oldVNode, newVNode) => {
+const patch = (oldVNode, newVNode, isInitialRender = false) => {
     const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
@@ -1047,8 +1145,7 @@ const patch = (oldVNode, newVNode) => {
             isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
         }
         {
-            if (tag === 'slot')
-                ;
+            if (tag === 'slot' && !useNativeShadowDom) ;
             else {
                 // either this is the first render of an element OR it's an update
                 // AND we already know it's possible it could have changed
@@ -1059,7 +1156,7 @@ const patch = (oldVNode, newVNode) => {
         if (oldChildren !== null && newChildren !== null) {
             // looks like there's child vnodes for both the old and new vnodes
             // so we need to call `updateChildren` to reconcile them
-            updateChildren(elm, oldChildren, newVNode, newChildren);
+            updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
         }
         else if (newChildren !== null) {
             // no old child vnodes, but there are new child vnodes to add
@@ -1153,8 +1250,9 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     {
         scopeId = hostElm['s-sc'];
     }
+    useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
     // synchronous patch
-    patch(oldVNode, rootVnode);
+    patch(oldVNode, rootVnode, isInitialLoad);
 };
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
@@ -1477,13 +1575,13 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     var _a;
+    const prototype = Cstr.prototype;
     if (cmpMeta.$members$) {
         if (Cstr.watchers) {
             cmpMeta.$watchers$ = Cstr.watchers;
         }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
-        const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
             if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
                     ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -1506,8 +1604,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 // proxyComponent - method
                 Object.defineProperty(prototype, memberName, {
                     value(...args) {
+                        var _a;
                         const ref = getHostRef(this);
-                        return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args));
+                        return (_a = ref === null || ref === void 0 ? void 0 : ref.$onInstancePromise$) === null || _a === void 0 ? void 0 : _a.then(() => { var _a; return (_a = ref.$lazyInstance$) === null || _a === void 0 ? void 0 : _a[memberName](...args); });
                     },
                 });
             }
@@ -1516,6 +1615,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             const attrNameToPropName = new Map();
             prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
+                    var _a;
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
                     //  in the case where an attribute was set inline.
@@ -1571,11 +1671,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // 1. The instance is ready
                         // 2. The watchers are ready
                         // 3. The value has changed
-                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                        if (flags &&
+                            !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
                             flags & 128 /* HOST_FLAGS.isWatchReady */ &&
                             newValue !== oldValue) {
                             const instance = hostRef.$lazyInstance$ ;
-                            const entry = cmpMeta.$watchers$[attrName];
+                            const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
                             entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
                                 if (instance[callbackName] != null) {
                                     instance[callbackName].call(instance, newValue, oldValue, attrName);
@@ -1597,10 +1698,11 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 ...members
                     .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
                     .map(([propName, m]) => {
+                    var _a;
                     const attrName = m[1] || propName;
                     attrNameToPropName.set(attrName, propName);
                     if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
-                        cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                        (_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);
                     }
                     return attrName;
                 }),
@@ -1625,7 +1727,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
         // Let the runtime know that the component has been initialized
         hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
-        {
+        const bundleId = cmpMeta.$lazyBundleId$;
+        if (bundleId) {
             // lazy loaded components
             // request the component's implementation to be
             // wired up with the host element
@@ -1672,6 +1775,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
             endNewInstance();
             fireConnectedCallback(hostRef.$lazyInstance$);
         }
+        else {
+            // sync constructor component
+            Cstr = elm.constructor;
+            // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
+            // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
+            // Stencil has completed instantiating the component.
+            customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */));
+        }
         if (Cstr.style) {
             // this component has styles but we haven't registered them yet
             let style = Cstr.style;
@@ -1802,7 +1913,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     const customElements = win.customElements;
     const head = doc.head;
     const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
-    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
+    const dataStyles = /*@__PURE__*/ doc.createElement('style');
     const deferredConnectedCallbacks = [];
     const styles = /*@__PURE__*/ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
     let appLoadFallback;
@@ -1820,6 +1931,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
         }
     }
+    let hasSlotRelocation = false;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
             var _a;
@@ -1829,6 +1941,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 $members$: compactMeta[2],
                 $listeners$: compactMeta[3],
             };
+            // Check if we are using slots outside the shadow DOM in this component.
+            // We'll use this information later to add styles for `slot-fb` elements
+            if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                hasSlotRelocation = true;
+            }
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
@@ -1888,15 +2005,29 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             }
         });
     });
-    {
-        visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
-        visibilityStyle.setAttribute('data-styles', '');
-        // Apply CSP nonce to the style tag if it exists
-        const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
-        if (nonce != null) {
-            visibilityStyle.setAttribute('nonce', nonce);
+    // Only bother generating CSS if we have components
+    // TODO(STENCIL-1118): Add test cases for CSS content based on conditionals
+    if (cmpTags.length > 0) {
+        // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
+        if (hasSlotRelocation) {
+            dataStyles.textContent += SLOT_FB_CSS;
+        }
+        // Add hydration styles
+        {
+            dataStyles.textContent += cmpTags + HYDRATED_CSS;
+        }
+        // If we have styles, add them to the DOM
+        if (dataStyles.innerHTML.length) {
+            dataStyles.setAttribute('data-styles', '');
+            // Apply CSP nonce to the style tag if it exists
+            const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+            if (nonce != null) {
+                dataStyles.setAttribute('nonce', nonce);
+            }
+            // Insert the styles into the document head
+            // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
+            head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
         }
-        head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
@@ -1914,7 +2045,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
     if (listeners) {
         listeners.map(([flags, name, method]) => {
-            const target = elm;
+            const target = getHostListenerTarget(elm, flags) ;
             const handler = hostListenerProxy(hostRef, method);
             const opts = hostListenerOpts(flags);
             plt.ael(target, name, handler, opts);
@@ -1938,8 +2069,18 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
         consoleError(e);
     }
 };
+const getHostListenerTarget = (elm, flags) => {
+    if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
+        return doc;
+    return elm;
+};
 // prettier-ignore
-const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
+const hostListenerOpts = (flags) => supportsListenerOptions
+    ? ({
+        passive: (flags & 1 /* LISTENER_FLAGS.Passive */) !== 0,
+        capture: (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0,
+    })
+    : (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
 /**
  * Assigns the given value to the nonce property on the runtime platform object.
  * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
@@ -1950,8 +2091,19 @@ const setNonce = (nonce) => (plt.$nonce$ = nonce);
 /**
  * A WeakMap mapping runtime component references to their corresponding host reference
  * instances.
+ *
+ * **Note**: If we're in an HMR context we need to store a reference to this
+ * value on `window` in order to maintain the mapping of {@link d.RuntimeRef}
+ * to {@link d.HostRef} across HMR updates.
+ *
+ * This is necessary because when HMR updates for a component are processed by
+ * the browser-side dev server client the JS bundle for that component is
+ * re-fetched. Since the module containing {@link hostRefs} is included in
+ * that bundle, if we do not store a reference to it the new iteration of the
+ * component will not have access to the previous hostRef map, leading to a
+ * bug where the new version of the component cannot properly initialize.
  */
-const hostRefs = /*@__PURE__*/ new WeakMap();
+const hostRefs = new WeakMap();
 /**
  * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
  *
@@ -2007,205 +2159,221 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
         return module[exportName];
     }
     
-    if (!hmrVersionId || !BUILD.hotModuleReplacement) {
-      const processMod = importedModule => {
-        cmpModules.set(bundleId, importedModule);
-        return importedModule[exportName];
-      }
-      switch(bundleId) {
-        
-        case 'b2b-alert.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-alert.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-anchor.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-anchor.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-breadcrumb.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-breadcrumb.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-breadcrumb-item.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-breadcrumb-item.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-card.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-card.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-checkbox-group.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-checkbox-group.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-dropdown.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-dropdown.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-grid.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-grid.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-grid-col.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-grid-col.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-grid-row.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-grid-row.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-label.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-label.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-modal.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-modal.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-multiselect-dropdown.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-multiselect-dropdown.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-pagination.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-pagination.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-paragraph.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-paragraph.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-progress-bar.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-progress-bar.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-radio-button.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-radio-button.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-radio-group.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-radio-group.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-required-separator.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-required-separator.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-scrollable-container.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-scrollable-container.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-search.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-search.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-tab.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-tab.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-tab-group.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-tab-group.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-tab-panel.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-tab-panel.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-table.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-table.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-table-row.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-table-row.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-table-rowgroup.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-table-rowgroup.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-textarea.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-textarea.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-toggle-button.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-toggle-button.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-toggle-chip.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-toggle-chip.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-toggle-group.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-toggle-group.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-tooltip.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-tooltip.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-wizard.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-wizard.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-wizard-step.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-wizard-step.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-chip-component_2.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-chip-component_2.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-headline.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-headline.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-input-group_2.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-input-group_2.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-table-cell_2.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-table-cell_2.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-wizard-icon.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-wizard-icon.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-button_2.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-button_2.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-input_2.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-input_2.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-rounded-icon.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-rounded-icon.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-separator.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-separator.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-checkbox.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-checkbox.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-icon.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-icon.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-input-label.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-input-label.cjs.entry.js')); }).then(processMod, consoleError);
+        if (!hmrVersionId || !BUILD.hotModuleReplacement) {
+          const processMod = importedModule => {
+              cmpModules.set(bundleId, importedModule);
+              return importedModule[exportName];
+          }
+          switch(bundleId) {
+              
+                case 'b2b-alert':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-alert.entry.js').then(processMod, consoleError);
+                case 'b2b-anchor':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-anchor.entry.js').then(processMod, consoleError);
+                case 'b2b-breadcrumb':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-breadcrumb.entry.js').then(processMod, consoleError);
+                case 'b2b-breadcrumb-item':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-breadcrumb-item.entry.js').then(processMod, consoleError);
+                case 'b2b-card':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-card.entry.js').then(processMod, consoleError);
+                case 'b2b-checkbox-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-checkbox-group.entry.js').then(processMod, consoleError);
+                case 'b2b-dropdown':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-dropdown.entry.js').then(processMod, consoleError);
+                case 'b2b-flyout-menu':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-flyout-menu.entry.js').then(processMod, consoleError);
+                case 'b2b-flyout-menu-option':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-flyout-menu-option.entry.js').then(processMod, consoleError);
+                case 'b2b-grid':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-grid.entry.js').then(processMod, consoleError);
+                case 'b2b-grid-col':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-grid-col.entry.js').then(processMod, consoleError);
+                case 'b2b-grid-row':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-grid-row.entry.js').then(processMod, consoleError);
+                case 'b2b-icon-100':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-icon-100.entry.js').then(processMod, consoleError);
+                case 'b2b-label':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-label.entry.js').then(processMod, consoleError);
+                case 'b2b-modal':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-modal.entry.js').then(processMod, consoleError);
+                case 'b2b-multiselect-dropdown':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-multiselect-dropdown.entry.js').then(processMod, consoleError);
+                case 'b2b-pagination':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-pagination.entry.js').then(processMod, consoleError);
+                case 'b2b-paragraph':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-paragraph.entry.js').then(processMod, consoleError);
+                case 'b2b-progress-bar':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-progress-bar.entry.js').then(processMod, consoleError);
+                case 'b2b-radio-button':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-radio-button.entry.js').then(processMod, consoleError);
+                case 'b2b-radio-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-radio-group.entry.js').then(processMod, consoleError);
+                case 'b2b-required-separator':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-required-separator.entry.js').then(processMod, consoleError);
+                case 'b2b-scrollable-container':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-scrollable-container.entry.js').then(processMod, consoleError);
+                case 'b2b-search':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-search.entry.js').then(processMod, consoleError);
+                case 'b2b-tab':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-tab.entry.js').then(processMod, consoleError);
+                case 'b2b-tab-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-tab-group.entry.js').then(processMod, consoleError);
+                case 'b2b-tab-panel':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-tab-panel.entry.js').then(processMod, consoleError);
+                case 'b2b-table':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-table.entry.js').then(processMod, consoleError);
+                case 'b2b-table-row':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-table-row.entry.js').then(processMod, consoleError);
+                case 'b2b-table-rowgroup':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-table-rowgroup.entry.js').then(processMod, consoleError);
+                case 'b2b-textarea':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-textarea.entry.js').then(processMod, consoleError);
+                case 'b2b-toggle-button':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-toggle-button.entry.js').then(processMod, consoleError);
+                case 'b2b-toggle-chip':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-toggle-chip.entry.js').then(processMod, consoleError);
+                case 'b2b-toggle-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-toggle-group.entry.js').then(processMod, consoleError);
+                case 'b2b-toggle-switch':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-toggle-switch.entry.js').then(processMod, consoleError);
+                case 'b2b-tooltip':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-tooltip.entry.js').then(processMod, consoleError);
+                case 'b2b-wizard':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-wizard.entry.js').then(processMod, consoleError);
+                case 'b2b-wizard-step':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-wizard-step.entry.js').then(processMod, consoleError);
+                case 'b2b-chip-component_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-chip-component_2.entry.js').then(processMod, consoleError);
+                case 'b2b-headline':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-headline.entry.js').then(processMod, consoleError);
+                case 'b2b-input-group_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-input-group_2.entry.js').then(processMod, consoleError);
+                case 'b2b-table-cell_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-table-cell_2.entry.js').then(processMod, consoleError);
+                case 'b2b-wizard-icon':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-wizard-icon.entry.js').then(processMod, consoleError);
+                case 'b2b-button_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-button_2.entry.js').then(processMod, consoleError);
+                case 'b2b-input_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-input_2.entry.js').then(processMod, consoleError);
+                case 'b2b-rounded-icon':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-rounded-icon.entry.js').then(processMod, consoleError);
+                case 'b2b-separator':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-separator.entry.js').then(processMod, consoleError);
+                case 'b2b-checkbox':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-checkbox.entry.js').then(processMod, consoleError);
+                case 'b2b-icon':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-icon.entry.js').then(processMod, consoleError);
+                case 'b2b-input-label':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './b2b-input-label.entry.js').then(processMod, consoleError);
+          }
       }
-    }
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+    return import(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */
-    `./${bundleId}.entry.js${''}`)); }).then((importedModule) => {
+    `./${bundleId}.entry.js${''}`).then((importedModule) => {
         {
             cmpModules.set(bundleId, importedModule);
         }
@@ -2227,6 +2395,18 @@ const plt = {
 const supportsShadow = 
 // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
 true;
+const supportsListenerOptions = /*@__PURE__*/ (() => {
+    let supportsListenerOptions = false;
+    try {
+        doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
+            get() {
+                supportsListenerOptions = true;
+            },
+        }));
+    }
+    catch (e) { }
+    return supportsListenerOptions;
+})();
 const promiseResolve = (v) => Promise.resolve(v);
 const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
         try {
@@ -2277,14 +2457,7 @@ const flush = () => {
         }
     }
 };
-const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
+const nextTick = (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-exports.Host = Host;
-exports.bootstrapLazy = bootstrapLazy;
-exports.createEvent = createEvent;
-exports.getElement = getElement;
-exports.h = h;
-exports.promiseResolve = promiseResolve;
-exports.registerInstance = registerInstance;
-exports.setNonce = setNonce;
+export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };