@six-group/ui-library 0.0.0-insider.fa8b667 → 0.0.0-insider.fade3a2

package/dist/cjs/{index-900437fc.js → index-b288f7d9.js}

@@ -31,11 +31,8 @@ const NAMESPACE = 'ui-library';
  * Modified for Stencil's renderer and slot projection
  */
 let scopeId;
-let contentRef;
 let hostTagName;
 let useNativeShadowDom = false;
-let checkSlotFallbackVisibility = false;
-let checkSlotRelocate = false;
 let isSvgMode = false;
 let queuePending = false;
 const createTime = (fnName, tagName = '') => {
@@ -53,6 +50,13 @@ const uniqueTime = (key, measureText) => {
     }
 };
 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
  */
@@ -104,7 +108,6 @@ function queryNonceMetaTagContent(doc) {
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
     let key = null;
-    let slotName = null;
     let simple = false;
     let lastSimple = false;
     const vNodeChildren = [];
@@ -132,13 +135,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
-        // normalize class / classname attributes
         if (vnodeData.key) {
             key = vnodeData.key;
         }
-        if (vnodeData.name) {
-            slotName = vnodeData.name;
-        }
+        // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -163,9 +163,6 @@ const h = (nodeName, vnodeData, ...children) => {
     {
         vnode.$key$ = key;
     }
-    {
-        vnode.$name$ = slotName;
-    }
     return vnode;
 };
 /**
@@ -190,9 +187,6 @@ const newVNode = (tag, text) => {
     {
         vnode.$key$ = null;
     }
-    {
-        vnode.$name$ = null;
-    }
     return vnode;
 };
 const Host = {};
@@ -372,6 +366,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);
                 }
@@ -505,11 +503,19 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 // except for the first character, we keep the event name case
                 memberName = ln[2] + memberName.slice(3);
             }
-            if (oldValue) {
-                plt.rel(elm, memberName, oldValue, false);
-            }
-            if (newValue) {
-                plt.ael(elm, memberName, newValue, false);
+            if (oldValue || newValue) {
+                // Need to account for "capture" events.
+                // If the event name ends with "Capture", we'll update the name to remove
+                // the "Capture" suffix and make sure the event listener is setup to handle the capture event.
+                const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+                // Make sure we only replace the last instance of "Capture"
+                memberName = memberName.replace(CAPTURE_EVENT_REGEX, '');
+                if (oldValue) {
+                    plt.rel(elm, memberName, oldValue, capture);
+                }
+                if (newValue) {
+                    plt.ael(elm, memberName, newValue, capture);
+                }
             }
         }
         else {
@@ -531,7 +537,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) === '') {
@@ -550,7 +560,14 @@ 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 + '$');
 const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
     // if the element passed in is a shadow root, which is a document fragment
     // then we want to be adding attrs/props to the shadow root's "host" element
@@ -589,39 +606,16 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     let i = 0;
     let elm;
     let childNode;
-    let oldVNode;
-    if (!useNativeShadowDom) {
-        // remember for later we need to check to relocate nodes
-        checkSlotRelocate = true;
-        if (newVNode.$tag$ === 'slot') {
-            if (scopeId) {
-                // scoped css needs to add its scoped id to the parent element
-                parentElm.classList.add(scopeId + '-s');
-            }
-            newVNode.$flags$ |= newVNode.$children$
-                ? // slot element has fallback content
-                    2 /* VNODE_FLAGS.isSlotFallback */
-                : // slot element does not have fallback content
-                    1 /* VNODE_FLAGS.isSlotReference */;
-        }
-    }
     if (newVNode.$text$ !== null) {
         // create text node
         elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
     }
-    else if (newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {
-        // create a slot reference node
-        elm = newVNode.$elm$ =
-            doc.createTextNode('');
-    }
     else {
         if (!isSvgMode) {
             isSvgMode = newVNode.$tag$ === 'svg';
         }
         // create element
-        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */
-                ? 'slot-fb'
-                : newVNode.$tag$)
+        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$tag$)
             );
         if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
             isSvgMode = false;
@@ -638,7 +632,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         if (newVNode.$children$) {
             for (i = 0; i < newVNode.$children$.length; ++i) {
                 // create the node
-                childNode = createElm(oldParentVNode, newVNode, i, elm);
+                childNode = createElm(oldParentVNode, newVNode, i);
                 // return node could have been null
                 if (childNode) {
                     // append our new node
@@ -657,50 +651,11 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             }
         }
     }
-    {
-        elm['s-hn'] = hostTagName;
-        if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) {
-            // remember the content reference comment
-            elm['s-sr'] = true;
-            // remember the content reference comment
-            elm['s-cr'] = contentRef;
-            // remember the slot name, or empty string for default slot
-            elm['s-sn'] = newVNode.$name$ || '';
-            // check if we've got an old vnode for this slot
-            oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
-            if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
-                // we've got an old slot vnode and the wrapper is being replaced
-                // so let's move the old slot content back to it's original location
-                putBackInOriginalLocation(oldParentVNode.$elm$, false);
-            }
-        }
-    }
+    // 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;
 };
-const putBackInOriginalLocation = (parentElm, recursive) => {
-    plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
-    const oldSlotChildNodes = parentElm.childNodes;
-    for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
-        const childNode = oldSlotChildNodes[i];
-        if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
-            // // this child node in the old element is from another component
-            // // remove this node from the old slot's parent
-            // childNode.remove();
-            // and relocate it back to it's original location
-            parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
-            // remove the old original location comment entirely
-            // later on the patch function will know what to do
-            // and move this to the correct spot in need be
-            childNode['s-ol'].remove();
-            childNode['s-ol'] = undefined;
-            checkSlotRelocate = true;
-        }
-        if (recursive) {
-            putBackInOriginalLocation(childNode, recursive);
-        }
-    }
-    plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
-};
 /**
  * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
  * add them to the DOM in the appropriate place.
@@ -717,17 +672,17 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
  * creating DOM nodes (inclusive)
  */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-    let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
+    let containerElm = (parentElm);
     let childNode;
     if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
         containerElm = containerElm.shadowRoot;
     }
     for (; startIdx <= endIdx; ++startIdx) {
         if (vnodes[startIdx]) {
-            childNode = createElm(null, parentVNode, startIdx, parentElm);
+            childNode = createElm(null, parentVNode, startIdx);
             if (childNode) {
                 vnodes[startIdx].$elm$ = childNode;
-                containerElm.insertBefore(childNode, referenceNode(before) );
+                containerElm.insertBefore(childNode, before);
             }
         }
     }
@@ -750,20 +705,6 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
             const elm = vnode.$elm$;
             nullifyVNodeRefs(vnode);
             if (elm) {
-                {
-                    // we're removing this element
-                    // so it's possible we need to show slot fallback content now
-                    checkSlotFallbackVisibility = true;
-                    if (elm['s-ol']) {
-                        // remove the original location comment
-                        elm['s-ol'].remove();
-                    }
-                    else {
-                        // it's possible that child nodes of the node
-                        // that's being removed are slot nodes
-                        putBackInOriginalLocation(elm, true);
-                    }
-                }
                 // remove the vnode's element from the dom
                 elm.remove();
             }
@@ -837,8 +778,9 @@ 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;
@@ -865,42 +807,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)) {
-            // case: "Vnode moved right"
-            //
-            // We've found that the last node in our window on the new children is
-            // the same VNode as the _first_ node in our window on the old children
-            // we're dealing with now. Visually, this is the layout of these two
-            // nodes:
-            //
-            // newCh: [..., newStartVnode , ... , newEndVnode , ...]
-            //                                    ^^^^^^^^^^^
-            // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
-            //              ^^^^^^^^^^^^^
-            //
-            // In this situation we need to patch `newEndVnode` onto `oldStartVnode`
-            // and move the DOM element for `oldStartVnode`.
-            if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
-                putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
-            }
-            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
@@ -922,26 +847,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             oldStartVnode = oldCh[++oldStartIdx];
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldEndVnode, newStartVnode)) {
-            // case: "Vnode moved left"
-            //
-            // We've found that the first node in our window on the new children is
-            // the same VNode as the _last_ node in our window on the old children.
-            // Visually, this is the layout of these two nodes:
-            //
-            // newCh: [..., newStartVnode , ... , newEndVnode , ...]
-            //              ^^^^^^^^^^^^^
-            // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
-            //                                    ^^^^^^^^^^^
-            //
-            // In this situation we need to patch `newStartVnode` onto `oldEndVnode`
-            // (which will handle updating any changed attributes, reconciling their
-            // children etc) but we also need to move the DOM node to which
-            // `oldEndVnode` corresponds.
-            if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
-                putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
-            }
-            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
@@ -975,10 +882,10 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
                 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, parentElm);
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
                 }
                 else {
-                    patch(elmToMove, newStartVnode);
+                    patch(elmToMove, newStartVnode, isInitialRender);
                     // invalidate the matching old node so that we won't try to update it
                     // again later on
                     oldCh[idxInOld] = undefined;
@@ -991,13 +898,13 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
                 // 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
                 // for the new node.
-                node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
+                node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
                 newStartVnode = newCh[++newStartIdx];
             }
             if (node) {
                 // if we created a new node then handle inserting it to the DOM
                 {
-                    parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
+                    oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
                 }
             }
         }
@@ -1029,30 +936,25 @@ 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$) {
-        if (leftVNode.$tag$ === 'slot') {
-            return leftVNode.$name$ === rightVNode.$name$;
-        }
-        // this will be set if components in the build have `key` attrs set on them
-        {
+        // 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;
 };
-const referenceNode = (node) => {
-    // this node was relocated to a new location in the dom
-    // because of some other component's slot
-    // but we still have an html comment in place of where
-    // it's original location was according to it's original vdom
-    return (node && node['s-ol']) || node;
-};
-const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
 /**
  * Handle reconciling an outdated VNode with a new one which corresponds to
  * it. This function handles flushing updates to the DOM and reconciling the
@@ -1060,14 +962,14 @@ const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).paren
  *
  * @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$;
     const tag = newVNode.$tag$;
     const text = newVNode.$text$;
-    let defaultHolder;
     if (text === null) {
         {
             // test if we're rendering an svg element, or still rendering nodes inside of one
@@ -1075,8 +977,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
@@ -1087,7 +988,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
@@ -1106,151 +1007,16 @@ const patch = (oldVNode, newVNode) => {
             isSvgMode = false;
         }
     }
-    else if ((defaultHolder = elm['s-cr'])) {
-        // this element has slotted content
-        defaultHolder.parentNode.textContent = text;
-    }
     else if (oldVNode.$text$ !== text) {
         // update the text content for the text only vnode
         // and also only if the text is different than before
         elm.data = text;
     }
 };
-const updateFallbackSlotVisibility = (elm) => {
-    // tslint:disable-next-line: prefer-const
-    const childNodes = elm.childNodes;
-    let childNode;
-    let i;
-    let ilen;
-    let j;
-    let slotNameAttr;
-    let nodeType;
-    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
-        childNode = childNodes[i];
-        if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-            if (childNode['s-sr']) {
-                // this is a slot fallback node
-                // get the slot name for this slot reference node
-                slotNameAttr = childNode['s-sn'];
-                // by default always show a fallback slot node
-                // then hide it if there are other slots in the light dom
-                childNode.hidden = false;
-                for (j = 0; j < ilen; j++) {
-                    nodeType = childNodes[j].nodeType;
-                    if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
-                        // this sibling node is from a different component OR is a named fallback slot node
-                        if (nodeType === 1 /* NODE_TYPE.ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
-                            childNode.hidden = true;
-                            break;
-                        }
-                    }
-                    else {
-                        // this is a default fallback slot node
-                        // any element or text node (with content)
-                        // should hide the default fallback slot node
-                        if (nodeType === 1 /* NODE_TYPE.ElementNode */ ||
-                            (nodeType === 3 /* NODE_TYPE.TextNode */ && childNodes[j].textContent.trim() !== '')) {
-                            childNode.hidden = true;
-                            break;
-                        }
-                    }
-                }
-            }
-            // keep drilling down
-            updateFallbackSlotVisibility(childNode);
-        }
-    }
-};
-const relocateNodes = [];
-const relocateSlotContent = (elm) => {
-    // tslint:disable-next-line: prefer-const
-    let childNode;
-    let node;
-    let hostContentNodes;
-    let slotNameAttr;
-    let relocateNodeData;
-    let j;
-    let i = 0;
-    const childNodes = elm.childNodes;
-    const ilen = childNodes.length;
-    for (; i < ilen; i++) {
-        childNode = childNodes[i];
-        if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
-            // first got the content reference comment node
-            // then we got it's parent, which is where all the host content is in now
-            hostContentNodes = node.parentNode.childNodes;
-            slotNameAttr = childNode['s-sn'];
-            for (j = hostContentNodes.length - 1; j >= 0; j--) {
-                node = hostContentNodes[j];
-                if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
-                    // let's do some relocating to its new home
-                    // but never relocate a content reference node
-                    // that is suppose to always represent the original content location
-                    if (isNodeLocatedInSlot(node, slotNameAttr)) {
-                        // it's possible we've already decided to relocate this node
-                        relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
-                        // made some changes to slots
-                        // let's make sure we also double check
-                        // fallbacks are correctly hidden or shown
-                        checkSlotFallbackVisibility = true;
-                        node['s-sn'] = node['s-sn'] || slotNameAttr;
-                        if (relocateNodeData) {
-                            // previously we never found a slot home for this node
-                            // but turns out we did, so let's remember it now
-                            relocateNodeData.$slotRefNode$ = childNode;
-                        }
-                        else {
-                            // add to our list of nodes to relocate
-                            relocateNodes.push({
-                                $slotRefNode$: childNode,
-                                $nodeToRelocate$: node,
-                            });
-                        }
-                        if (node['s-sr']) {
-                            relocateNodes.map((relocateNode) => {
-                                if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
-                                    relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
-                                    if (relocateNodeData && !relocateNode.$slotRefNode$) {
-                                        relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
-                                    }
-                                }
-                            });
-                        }
-                    }
-                    else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
-                        // so far this element does not have a slot home, not setting slotRefNode on purpose
-                        // if we never find a home for this element then we'll need to hide it
-                        relocateNodes.push({
-                            $nodeToRelocate$: node,
-                        });
-                    }
-                }
-            }
-        }
-        if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-            relocateSlotContent(childNode);
-        }
-    }
-};
-const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
-    if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-        if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
-            return true;
-        }
-        if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
-            return true;
-        }
-        return false;
-    }
-    if (nodeToRelocate['s-sn'] === slotNameAttr) {
-        return true;
-    }
-    return slotNameAttr === '';
-};
 /**
- * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
- * calling them with `null`. This signals that the DOM element corresponding to
- * the VDom node has been removed from the DOM.
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by calling
+ * them with `null`. This signals that the DOM element corresponding to the VDom
+ * node has been removed from the DOM.
  *
  * @param vNode a virtual DOM node
  */
@@ -1316,90 +1082,9 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     {
         scopeId = hostElm['s-sc'];
     }
-    {
-        contentRef = hostElm['s-cr'];
-        useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
-        // always reset
-        checkSlotFallbackVisibility = false;
-    }
+    useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
     // synchronous patch
-    patch(oldVNode, rootVnode);
-    {
-        // while we're moving nodes around existing nodes, temporarily disable
-        // the disconnectCallback from working
-        plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
-        if (checkSlotRelocate) {
-            relocateSlotContent(rootVnode.$elm$);
-            let relocateData;
-            let nodeToRelocate;
-            let orgLocationNode;
-            let parentNodeRef;
-            let insertBeforeNode;
-            let refNode;
-            let i = 0;
-            for (; i < relocateNodes.length; i++) {
-                relocateData = relocateNodes[i];
-                nodeToRelocate = relocateData.$nodeToRelocate$;
-                if (!nodeToRelocate['s-ol']) {
-                    // add a reference node marking this node's original location
-                    // keep a reference to this node for later lookups
-                    orgLocationNode =
-                        doc.createTextNode('');
-                    orgLocationNode['s-nr'] = nodeToRelocate;
-                    nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
-                }
-            }
-            for (i = 0; i < relocateNodes.length; i++) {
-                relocateData = relocateNodes[i];
-                nodeToRelocate = relocateData.$nodeToRelocate$;
-                if (relocateData.$slotRefNode$) {
-                    // by default we're just going to insert it directly
-                    // after the slot reference node
-                    parentNodeRef = relocateData.$slotRefNode$.parentNode;
-                    insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
-                    orgLocationNode = nodeToRelocate['s-ol'];
-                    while ((orgLocationNode = orgLocationNode.previousSibling)) {
-                        refNode = orgLocationNode['s-nr'];
-                        if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
-                            refNode = refNode.nextSibling;
-                            if (!refNode || !refNode['s-nr']) {
-                                insertBeforeNode = refNode;
-                                break;
-                            }
-                        }
-                    }
-                    if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
-                        nodeToRelocate.nextSibling !== insertBeforeNode) {
-                        // we've checked that it's worth while to relocate
-                        // since that the node to relocate
-                        // has a different next sibling or parent relocated
-                        if (nodeToRelocate !== insertBeforeNode) {
-                            if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
-                                // probably a component in the index.html that doesn't have it's hostname set
-                                nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
-                            }
-                            // add it back to the dom but in its new home
-                            parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
-                        }
-                    }
-                }
-                else {
-                    // this node doesn't have a slot home to go to, so let's hide it
-                    if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-                        nodeToRelocate.hidden = true;
-                    }
-                }
-            }
-        }
-        if (checkSlotFallbackVisibility) {
-            updateFallbackSlotVisibility(rootVnode.$elm$);
-        }
-        // done moving nodes around
-        // allow the disconnect callback to work again
-        plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
-        // always reset
-        relocateNodes.length = 0;
-    }
+    patch(oldVNode, rootVnode, isInitialLoad);
 };
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
@@ -1555,6 +1240,10 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
  */
 const callRender = (hostRef, instance, elm, isInitialLoad) => {
     try {
+        /**
+         * minification optimization: `allRenderFn` is `true` if all components have a `render`
+         * method, so we can call the method immediately. If not, check before calling it.
+         */
         instance = instance.render() ;
         {
             hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
@@ -1637,6 +1326,16 @@ const appDidLoad = (who) => {
     }
     nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
 };
+/**
+ * Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
+ * e.g. custom element node. If a build figures out that e.g. no component
+ * has a `componentDidLoad` method, the instance method gets removed from the
+ * output bundle and this function returns `undefined`.
+ * @param instance any object that may or may not contain methods
+ * @param method method name
+ * @param arg single arbitrary argument
+ * @returns result of method call if it exists, otherwise `undefined`
+ */
 const safeCall = (instance, method, arg) => {
     if (instance && instance[method]) {
         try {
@@ -1704,13 +1403,14 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  * @returns a reference to the same constructor passed in (but now mutated)
  */
 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 */))) {
@@ -1733,16 +1433,18 @@ 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); });
                     },
                 });
             }
         });
         if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
             const attrNameToPropName = new Map();
-            prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+            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.
@@ -1764,12 +1466,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
-                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
+                    //  the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
                     //
-                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
                     //
                     //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
@@ -1789,31 +1491,73 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
                         return;
                     }
+                    else if (propName == null) {
+                        // At this point we should know this is not a "member", so we can treat it like watching an attribute
+                        // on a vanilla web component
+                        const hostRef = getHostRef(this);
+                        const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
+                        // We only want to trigger the callback(s) if:
+                        // 1. The instance is ready
+                        // 2. The watchers are ready
+                        // 3. The value has changed
+                        if (flags &&
+                            !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                            flags & 128 /* HOST_FLAGS.isWatchReady */ &&
+                            newValue !== oldValue) {
+                            const instance = hostRef.$lazyInstance$ ;
+                            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);
+                                }
+                            });
+                        }
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
-            // create an array of attributes to observe
-            // and also create a map of html attribute name to js property name
-            Cstr.observedAttributes = members
-                .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
-                .map(([propName, m]) => {
-                const attrName = m[1] || propName;
-                attrNameToPropName.set(attrName, propName);
-                if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
-                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
-                }
-                return attrName;
-            });
+            // Create an array of attributes to observe
+            // This list in comprised of all strings used within a `@Watch()` decorator
+            // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
+            // As such, there is no way to guarantee type-safety here that a user hasn't entered
+            // an invalid attribute.
+            Cstr.observedAttributes = Array.from(new Set([
+                ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
+                ...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 */) {
+                        (_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);
+                    }
+                    return attrName;
+                }),
+            ]));
         }
     }
     return Cstr;
 };
-const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
+/**
+ * Initialize a Stencil component given a reference to its host element, its
+ * runtime bookkeeping data structure, runtime metadata about the component,
+ * and (optionally) an HMR version ID.
+ *
+ * @param elm a host element
+ * @param hostRef the element's runtime bookkeeping object
+ * @param cmpMeta runtime metadata for the Stencil component
+ * @param hmrVersionId an (optional) HMR version ID
+ */
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
+    let Cstr;
     // initializeComponent
     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
@@ -1860,6 +1604,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             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;
@@ -1900,16 +1652,6 @@ const connectedCallback = (elm) => {
         if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
             // first time this component has connected
             hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
-            {
-                // initUpdate
-                // if the slot polyfill is required we'll need to put some nodes
-                // in here to act as original content anchors as we move nodes around
-                // host element has been connected to the DOM
-                if ((// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
-                        cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
-                    setContentReference(elm);
-                }
-            }
             {
                 // find the first ancestor component (if there is one) and register
                 // this component as one of the actively loading child components for its ancestor
@@ -1956,17 +1698,6 @@ const connectedCallback = (elm) => {
         endConnected();
     }
 };
-const setContentReference = (elm) => {
-    // only required when we're NOT using native shadow dom (slot)
-    // or this browser doesn't support native shadow dom
-    // and this host element was NOT created with SSR
-    // let's pick out the inner content for slot projection
-    // create a node to represent where the original
-    // content was first placed, which is useful later on
-    const contentRefElm = (elm['s-cr'] = doc.createComment(''));
-    contentRefElm['s-cn'] = true;
-    elm.insertBefore(contentRefElm, elm.firstChild);
-};
 const disconnectInstance = (instance) => {
     {
         safeCall(instance, 'disconnectedCallback');
@@ -1997,20 +1728,27 @@ 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 = [];
     let appLoadFallback;
     let isBootstrapping = true;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
+    let hasSlotRelocation = false;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
+            var _a;
             const cmpMeta = {
                 $flags$: compactMeta[0],
                 $tagName$: compactMeta[1],
                 $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];
             }
@@ -2021,7 +1759,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 cmpMeta.$attrsToReflect$ = [];
             }
             {
-                cmpMeta.$watchers$ = {};
+                cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};
             }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
@@ -2070,15 +1808,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;
@@ -2126,7 +1878,12 @@ const getHostListenerTarget = (elm, flags) => {
     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.
@@ -2134,13 +1891,51 @@ const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !==
  * @returns void
  */
 const setNonce = (nonce) => (plt.$nonce$ = nonce);
-const hostRefs = /*@__PURE__*/ new WeakMap();
+/**
+ * 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 = new WeakMap();
+/**
+ * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
+ *
+ * @param ref the runtime ref of interest
+ * @returns the Host reference (if found) or undefined
+ */
 const getHostRef = (ref) => hostRefs.get(ref);
+/**
+ * Register a lazy instance with the {@link hostRefs} object so it's
+ * corresponding {@link d.HostRef} can be retrieved later.
+ *
+ * @param lazyInstance the lazy instance of interest
+ * @param hostRef that instances `HostRef` object
+ * @returns a reference to the host ref WeakMap
+ */
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
-const registerHost = (elm, cmpMeta) => {
+/**
+ * Register a host element for a Stencil component, setting up various metadata
+ * and callbacks based on {@link BUILD} flags as well as the component's runtime
+ * metadata.
+ *
+ * @param hostElement the host element to register
+ * @param cmpMeta runtime metadata for that component
+ * @returns a reference to the host ref WeakMap
+ */
+const registerHost = (hostElement, cmpMeta) => {
     const hostRef = {
         $flags$: 0,
-        $hostElement$: elm,
+        $hostElement$: hostElement,
         $cmpMeta$: cmpMeta,
         $instanceValues$: new Map(),
     };
@@ -2149,11 +1944,11 @@ const registerHost = (elm, cmpMeta) => {
     }
     {
         hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
-        elm['s-p'] = [];
-        elm['s-rc'] = [];
+        hostElement['s-p'] = [];
+        hostElement['s-rc'] = [];
     }
-    addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
-    return hostRefs.set(elm, hostRef);
+    addHostEventListeners(hostElement, hostRef, cmpMeta.$listeners$);
+    return hostRefs.set(hostElement, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;
 const consoleError = (e, el) => (0, console.error)(e, el);
@@ -2166,7 +1961,216 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     if (module) {
         return module[exportName];
     }
-    /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+    
+        if (!hmrVersionId || !BUILD.hotModuleReplacement) {
+          const processMod = importedModule => {
+              cmpModules.set(bundleId, importedModule);
+              return importedModule[exportName];
+          }
+          switch(bundleId) {
+              
+                case 'six-alert.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-alert.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-avatar.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-avatar.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-badge.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-badge.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-card.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-card.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-datepicker.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-datepicker.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-dialog.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-dialog.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-drawer.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-drawer.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-error-page.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-error-page.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-file-list.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-file-list.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-file-list-item.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-file-list-item.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-file-upload.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-file-upload.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-footer.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-footer.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-group-label.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-group-label.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-header.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-header.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-language-switcher.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-language-switcher.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-layout-grid.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-layout-grid.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-main-container.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-main-container.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-menu-divider.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-menu-divider.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-menu-label.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-menu-label.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-progress-bar.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-progress-bar.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-progress-ring.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-progress-ring.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-radio.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-radio.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-range.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-range.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-root.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-root.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-search-field.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-search-field.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-select.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-select.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-sidebar.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-sidebar.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-sidebar-item.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-sidebar-item.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-sidebar-item-group.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-sidebar-item-group.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-switch.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-switch.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-tab.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-tab.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-tab-group.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-tab-group.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-tab-panel.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-tab-panel.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-tag.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-tag.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-textarea.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-textarea.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-tile.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-tile.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-button.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-button.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-details.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-details.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-picto.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-picto.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-stage-indicator.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-stage-indicator.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-timepicker.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-timepicker.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-dropdown_2.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-dropdown_2.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-item-picker.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-item-picker.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-tooltip.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-tooltip.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-spinner.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-spinner.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-checkbox_2.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-checkbox_2.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-input.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-input.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-icon-button.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-icon-button.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-error.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-error.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'six-icon.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './six-icon.cjs.entry.js')); }).then(processMod, consoleError);
+          }
+      }
     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
@@ -2191,6 +2195,18 @@ const plt = {
     rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
     ce: (eventName, opts) => new CustomEvent(eventName, opts),
 };
+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 {
@@ -2241,7 +2257,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;
@@ -2253,4 +2269,4 @@ exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
 
-//# sourceMappingURL=index-900437fc.js.map
+//# sourceMappingURL=index-b288f7d9.js.map