@stencil/core 4.23.0-dev.1735794112.5d29255 → 4.23.0-dev.1736139708.13ee704

package/internal/hydrate/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Platform v4.23.0-dev.1735794112.5d29255 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.23.0-dev.1736139708.13ee704 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -8,7 +8,7 @@ var __export = (target, all) => {
 };
 
 // src/hydrate/platform/index.ts
-import { BUILD as BUILD22 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD23 } from "@stencil/core/internal/app-data";
 
 // src/runtime/asset-path.ts
 var getAssetPath = (path) => {
@@ -18,7 +18,7 @@ var getAssetPath = (path) => {
 var setAssetPath = (path) => plt.$resourcesUrl$ = path;
 
 // src/runtime/bootstrap-custom-element.ts
-import { BUILD as BUILD18 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD19 } from "@stencil/core/internal/app-data";
 
 // src/utils/constants.ts
 var EMPTY_OBJ = {};
@@ -26,7 +26,7 @@ var SVG_NS = "http://www.w3.org/2000/svg";
 var HTML_NS = "http://www.w3.org/1999/xhtml";
 
 // src/utils/helpers.ts
-var isDef = (v) => v != null;
+var isDef = (v) => v != null && v !== void 0;
 var isComplexType = (o) => {
   o = typeof o;
   return o === "object" || o === "function";
@@ -88,13 +88,13 @@ var unwrapErr = (result) => {
 };
 
 // src/runtime/connected-callback.ts
-import { BUILD as BUILD16 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD17 } from "@stencil/core/internal/app-data";
 
 // src/runtime/client-hydrate.ts
-import { BUILD as BUILD7 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD8 } from "@stencil/core/internal/app-data";
 
 // src/runtime/dom-extras.ts
-import { BUILD as BUILD5 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD6 } from "@stencil/core/internal/app-data";
 
 // src/runtime/runtime-constants.ts
 var CONTENT_REF_ID = "r";
@@ -121,11 +121,114 @@ var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
   "formStateRestoreCallback"
 ];
 
+// src/runtime/slot-polyfill-utils.ts
+import { BUILD } from "@stencil/core/internal/app-data";
+var updateFallbackSlotVisibility = (elm) => {
+  const childNodes = elm.__childNodes || elm.childNodes;
+  if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") {
+    getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
+      var _a;
+      if (slotNode.nodeType === 1 /* ElementNode */ && slotNode.tagName === "SLOT-FB") {
+        if ((_a = getHostSlotChildNodes(slotNode, slotNode["s-sn"], false)) == null ? void 0 : _a.length) {
+          slotNode.hidden = true;
+        } else {
+          slotNode.hidden = false;
+        }
+      }
+    });
+  }
+  for (const childNode of childNodes) {
+    if (childNode.nodeType === 1 /* ElementNode */ && (childNode.__childNodes || childNode.childNodes).length) {
+      updateFallbackSlotVisibility(childNode);
+    }
+  }
+};
+var getSlottedChildNodes = (childNodes) => {
+  const result = [];
+  for (let i2 = 0; i2 < childNodes.length; i2++) {
+    const slottedNode = childNodes[i2]["s-nr"];
+    if (slottedNode && slottedNode.isConnected) {
+      result.push(slottedNode);
+    }
+  }
+  return result;
+};
+var getHostSlotNodes = (childNodes, hostName, slotName) => {
+  let i2 = 0;
+  let slottedNodes = [];
+  let childNode;
+  for (; i2 < childNodes.length; i2++) {
+    childNode = childNodes[i2];
+    if (childNode["s-sr"] && childNode["s-hn"] === hostName && (!slotName || childNode["s-sn"] === slotName)) {
+      slottedNodes.push(childNode);
+      if (typeof slotName !== "undefined") return slottedNodes;
+    }
+    slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
+  }
+  return slottedNodes;
+};
+var getHostSlotChildNodes = (node, slotName, includeSlot = true) => {
+  const childNodes = [];
+  if (includeSlot && node["s-sr"] || !node["s-sr"]) childNodes.push(node);
+  while ((node = node.nextSibling) && node["s-sn"] === slotName) {
+    childNodes.push(node);
+  }
+  return childNodes;
+};
+var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
+  if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
+    if (nodeToRelocate.getAttribute("slot") === null && slotName === "") {
+      return true;
+    }
+    if (nodeToRelocate.getAttribute("slot") === slotName) {
+      return true;
+    }
+    return false;
+  }
+  if (nodeToRelocate["s-sn"] === slotName) {
+    return true;
+  }
+  return slotName === "";
+};
+var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
+  let slottedNodeLocation;
+  if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
+    slottedNodeLocation = newChild["s-ol"];
+  } else {
+    slottedNodeLocation = document.createTextNode("");
+    slottedNodeLocation["s-nr"] = newChild;
+  }
+  if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
+  const parent = slotNode["s-cr"].parentNode;
+  const appendMethod = prepend ? parent.__prepend || parent.prepend : parent.__appendChild || parent.appendChild;
+  if (typeof position !== "undefined") {
+    if (BUILD.hydrateClientSide) {
+      slottedNodeLocation["s-oo"] = position;
+      const childNodes = parent.__childNodes || parent.childNodes;
+      const slotRelocateNodes = [slottedNodeLocation];
+      childNodes.forEach((n) => {
+        if (n["s-nr"]) slotRelocateNodes.push(n);
+      });
+      slotRelocateNodes.sort((a, b) => {
+        if (!a["s-oo"] || a["s-oo"] < b["s-oo"]) return -1;
+        else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
+        return 0;
+      });
+      slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
+    }
+  } else {
+    appendMethod.call(parent, slottedNodeLocation);
+  }
+  newChild["s-ol"] = slottedNodeLocation;
+  newChild["s-sh"] = slotNode["s-hn"];
+};
+var getSlotName = (node) => node["s-sn"] || node.nodeType === 1 && node.getAttribute("slot") || "";
+
 // src/runtime/vdom/vdom-render.ts
-import { BUILD as BUILD4 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD5 } from "@stencil/core/internal/app-data";
 
 // src/runtime/vdom/h.ts
-import { BUILD } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD2 } from "@stencil/core/internal/app-data";
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -141,7 +244,7 @@ var h = (nodeName, vnodeData, ...children) => {
       } else if (child != null && typeof child !== "boolean") {
         if (simple = typeof nodeName !== "function" && !isComplexType(child)) {
           child = String(child);
-        } else if (BUILD.isDev && typeof nodeName !== "function" && child.$flags$ === void 0) {
+        } else if (BUILD2.isDev && typeof nodeName !== "function" && child.$flags$ === void 0) {
           consoleDevError(`vNode passed as children has unexpected type.
 Make sure it's using the correct h() function.
 Empty objects can also be the cause, look for JSX comments that became objects.`);
@@ -157,28 +260,28 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
   };
   walk(children);
   if (vnodeData) {
-    if (BUILD.isDev && nodeName === "input") {
+    if (BUILD2.isDev && nodeName === "input") {
       validateInputProperties(vnodeData);
     }
-    if (BUILD.vdomKey && vnodeData.key) {
+    if (BUILD2.vdomKey && vnodeData.key) {
       key = vnodeData.key;
     }
-    if (BUILD.slotRelocation && vnodeData.name) {
+    if (BUILD2.slotRelocation && vnodeData.name) {
       slotName = vnodeData.name;
     }
-    if (BUILD.vdomClass) {
+    if (BUILD2.vdomClass) {
       const classData = vnodeData.className || vnodeData.class;
       if (classData) {
         vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" ");
       }
     }
   }
-  if (BUILD.isDev && vNodeChildren.some(isHost)) {
+  if (BUILD2.isDev && vNodeChildren.some(isHost)) {
     consoleDevError(`The <Host> must be the single root component. Make sure:
 - You are NOT using hostData() and <Host> in the same component.
 - <Host> is used once, and it's the single root component of the render() function.`);
   }
-  if (BUILD.vdomFunctional && typeof nodeName === "function") {
+  if (BUILD2.vdomFunctional && typeof nodeName === "function") {
     return nodeName(
       vnodeData === null ? {} : vnodeData,
       vNodeChildren,
@@ -190,10 +293,10 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
   if (vNodeChildren.length > 0) {
     vnode.$children$ = vNodeChildren;
   }
-  if (BUILD.vdomKey) {
+  if (BUILD2.vdomKey) {
     vnode.$key$ = key;
   }
-  if (BUILD.slotRelocation) {
+  if (BUILD2.slotRelocation) {
     vnode.$name$ = slotName;
   }
   return vnode;
@@ -206,13 +309,13 @@ var newVNode = (tag, text) => {
     $elm$: null,
     $children$: null
   };
-  if (BUILD.vdomAttribute) {
+  if (BUILD2.vdomAttribute) {
     vnode.$attrs$ = null;
   }
-  if (BUILD.vdomKey) {
+  if (BUILD2.vdomKey) {
     vnode.$key$ = null;
   }
-  if (BUILD.slotRelocation) {
+  if (BUILD2.slotRelocation) {
     vnode.$name$ = null;
   }
   return vnode;
@@ -265,28 +368,35 @@ var validateInputProperties = (inputElm) => {
 };
 
 // src/runtime/vdom/update-element.ts
-import { BUILD as BUILD3 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD4 } from "@stencil/core/internal/app-data";
 
 // src/runtime/vdom/set-accessor.ts
-import { BUILD as BUILD2 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD3 } from "@stencil/core/internal/app-data";
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
   if (oldValue !== newValue) {
     let isProp = isMemberInElement(elm, memberName);
     let ln = memberName.toLowerCase();
-    if (BUILD2.vdomClass && memberName === "class") {
+    if (BUILD3.vdomClass && memberName === "class") {
       const classList = elm.classList;
       const oldClasses = parseClassList(oldValue);
-      const newClasses = parseClassList(newValue);
-      if (elm["s-si"] && newClasses.indexOf(elm["s-si"]) < 0) {
+      let newClasses = parseClassList(newValue);
+      if (elm["s-si"]) {
         newClasses.push(elm["s-si"]);
+        oldClasses.forEach((c) => {
+          if (c.startsWith(elm["s-si"])) newClasses.push(c);
+        });
+        newClasses = [...new Set(newClasses)];
+        classList.add(...newClasses);
+        delete elm["s-si"];
+      } else {
+        classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+        classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
       }
-      classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
-      classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
-    } else if (BUILD2.vdomStyle && memberName === "style") {
-      if (BUILD2.updatable) {
+    } else if (BUILD3.vdomStyle && memberName === "style") {
+      if (BUILD3.updatable) {
         for (const prop in oldValue) {
           if (!newValue || newValue[prop] == null) {
-            if (!BUILD2.hydrateServerSide && prop.includes("-")) {
+            if (!BUILD3.hydrateServerSide && prop.includes("-")) {
               elm.style.removeProperty(prop);
             } else {
               elm.style[prop] = "";
@@ -296,19 +406,19 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       }
       for (const prop in newValue) {
         if (!oldValue || newValue[prop] !== oldValue[prop]) {
-          if (!BUILD2.hydrateServerSide && prop.includes("-")) {
+          if (!BUILD3.hydrateServerSide && prop.includes("-")) {
             elm.style.setProperty(prop, newValue[prop]);
           } else {
             elm.style[prop] = newValue[prop];
           }
         }
       }
-    } else if (BUILD2.vdomKey && memberName === "key") {
-    } else if (BUILD2.vdomRef && memberName === "ref") {
+    } else if (BUILD3.vdomKey && memberName === "key") {
+    } else if (BUILD3.vdomRef && memberName === "ref") {
       if (newValue) {
         newValue(elm);
       }
-    } else if (BUILD2.vdomListener && (BUILD2.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
+    } else if (BUILD3.vdomListener && (BUILD3.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
       if (memberName[2] === "-") {
         memberName = memberName.slice(3);
       } else if (isMemberInElement(win, ln)) {
@@ -326,7 +436,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
           plt.ael(elm, memberName, newValue, capture);
         }
       }
-    } else if (BUILD2.vdomPropOrAttr) {
+    } else if (BUILD3.vdomPropOrAttr) {
       const isComplex = isComplexType(newValue);
       if ((isProp || isComplex && newValue !== null) && !isSvg) {
         try {
@@ -348,7 +458,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
         }
       }
       let xlink = false;
-      if (BUILD2.vdomXlink) {
+      if (BUILD3.vdomXlink) {
         if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
           memberName = ln;
           xlink = true;
@@ -356,7 +466,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       }
       if (newValue == null || newValue === false) {
         if (newValue !== false || elm.getAttribute(memberName) === "") {
-          if (BUILD2.vdomXlink && xlink) {
+          if (BUILD3.vdomXlink && xlink) {
             elm.removeAttributeNS(XLINK_NS, memberName);
           } else {
             elm.removeAttribute(memberName);
@@ -364,7 +474,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
         }
       } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
         newValue = newValue === true ? "" : newValue;
-        if (BUILD2.vdomXlink && xlink) {
+        if (BUILD3.vdomXlink && xlink) {
           elm.setAttributeNS(XLINK_NS, memberName, newValue);
         } else {
           elm.setAttribute(memberName, newValue);
@@ -391,7 +501,7 @@ var updateElement = (oldVnode, newVnode, isSvgMode2) => {
   const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
   const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || EMPTY_OBJ;
   const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
-  if (BUILD3.updatable) {
+  if (BUILD4.updatable) {
     for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
       if (!(memberName in newVnodeAttrs)) {
         setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode2, newVnode.$flags$);
@@ -420,19 +530,16 @@ var useNativeShadowDom = false;
 var checkSlotFallbackVisibility = false;
 var checkSlotRelocate = false;
 var isSvgMode = false;
-var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
+var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   var _a;
   const newVNode2 = newParentVNode.$children$[childIndex];
   let i2 = 0;
   let elm;
   let childNode;
   let oldVNode;
-  if (BUILD4.slotRelocation && !useNativeShadowDom) {
+  if (BUILD5.slotRelocation && !useNativeShadowDom) {
     checkSlotRelocate = true;
     if (newVNode2.$tag$ === "slot") {
-      if (scopeId) {
-        parentElm.classList.add(scopeId + "-s");
-      }
       newVNode2.$flags$ |= newVNode2.$children$ ? (
         // slot element has fallback content
         // still create an element that "mocks" the slot element
@@ -445,48 +552,43 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
       );
     }
   }
-  if (BUILD4.isDev && newVNode2.$elm$) {
+  if (BUILD5.isDev && newVNode2.$elm$) {
     consoleDevError(
       `The JSX ${newVNode2.$text$ !== null ? `"${newVNode2.$text$}" text` : `"${newVNode2.$tag$}" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes`
     );
   }
-  if (BUILD4.vdomText && newVNode2.$text$ !== null) {
+  if (BUILD5.vdomText && newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
-  } else if (BUILD4.slotRelocation && newVNode2.$flags$ & 1 /* isSlotReference */) {
-    elm = newVNode2.$elm$ = BUILD4.isDebug || BUILD4.hydrateServerSide ? slotReferenceDebugNode(newVNode2) : doc.createTextNode("");
+  } else if (BUILD5.slotRelocation && newVNode2.$flags$ & 1 /* isSlotReference */) {
+    elm = newVNode2.$elm$ = BUILD5.isDebug || BUILD5.hydrateServerSide ? slotReferenceDebugNode(newVNode2) : doc.createTextNode("");
   } else {
-    if (BUILD4.svg && !isSvgMode) {
+    if (BUILD5.svg && !isSvgMode) {
       isSvgMode = newVNode2.$tag$ === "svg";
     }
-    elm = newVNode2.$elm$ = BUILD4.svg ? doc.createElementNS(
+    elm = newVNode2.$elm$ = BUILD5.svg ? doc.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
-      !useNativeShadowDom && BUILD4.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD5.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     ) : doc.createElement(
-      !useNativeShadowDom && BUILD4.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD5.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     );
-    if (BUILD4.svg && isSvgMode && newVNode2.$tag$ === "foreignObject") {
+    if (BUILD5.svg && isSvgMode && newVNode2.$tag$ === "foreignObject") {
       isSvgMode = false;
     }
-    if (BUILD4.vdomAttribute) {
+    if (BUILD5.vdomAttribute) {
       updateElement(null, newVNode2, isSvgMode);
     }
-    const rootNode = elm.getRootNode();
-    const isElementWithinShadowRoot = !rootNode.querySelector("body");
-    if (!isElementWithinShadowRoot && BUILD4.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
+    if (BUILD5.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
-    if (BUILD4.scoped) {
-      updateElementScopeIds(elm, parentElm);
-    }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
-        childNode = createElm(oldParentVNode, newVNode2, i2, elm);
+        childNode = createElm(oldParentVNode, newVNode2, i2);
         if (childNode) {
           elm.appendChild(childNode);
         }
       }
     }
-    if (BUILD4.svg) {
+    if (BUILD5.svg) {
       if (newVNode2.$tag$ === "svg") {
         isSvgMode = false;
       } else if (elm.tagName === "foreignObject") {
@@ -495,7 +597,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
   }
   elm["s-hn"] = hostTagName;
-  if (BUILD4.slotRelocation) {
+  if (BUILD5.slotRelocation) {
     if (newVNode2.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
       elm["s-sr"] = true;
       elm["s-cr"] = contentRef;
@@ -503,12 +605,15 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
       elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
       oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
       if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
-        if (BUILD4.experimentalSlotFixes) {
+        if (BUILD5.experimentalSlotFixes) {
           relocateToHostRoot(oldParentVNode.$elm$);
         } else {
           putBackInOriginalLocation(oldParentVNode.$elm$, false);
         }
       }
+      if (BUILD5.scoped) {
+        addRemoveSlotScopedClass(contentRef, elm, newParentVNode.$elm$, oldParentVNode == null ? void 0 : oldParentVNode.$elm$);
+      }
     }
   }
   return elm;
@@ -536,7 +641,7 @@ var relocateToHostRoot = (parentElm) => {
 var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ |= 1 /* isTmpDisconnected */;
   const oldSlotChildNodes = Array.from(parentElm.__childNodes || parentElm.childNodes);
-  if (parentElm["s-sr"] && BUILD4.experimentalSlotFixes) {
+  if (parentElm["s-sr"] && BUILD5.experimentalSlotFixes) {
     let node = parentElm;
     while (node = node.nextSibling) {
       if (node && node["s-sn"] === parentElm["s-sn"] && node["s-sh"] === hostTagName) {
@@ -547,7 +652,7 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
   for (let i2 = oldSlotChildNodes.length - 1; i2 >= 0; i2--) {
     const childNode = oldSlotChildNodes[i2];
     if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) {
-      insertBefore(parentReferenceNode(childNode), childNode, referenceNode(childNode));
+      insertBefore(referenceNode(childNode).parentNode, childNode, referenceNode(childNode));
       childNode["s-ol"].remove();
       childNode["s-ol"] = void 0;
       childNode["s-sh"] = void 0;
@@ -560,17 +665,17 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ &= ~1 /* isTmpDisconnected */;
 };
 var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-  let containerElm = BUILD4.slotRelocation && parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
+  let containerElm = BUILD5.slotRelocation && parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
   let childNode;
-  if (BUILD4.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
+  if (BUILD5.shadowDom && 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;
-        insertBefore(containerElm, childNode, BUILD4.slotRelocation ? referenceNode(before) : before);
+        insertBefore(containerElm, childNode, BUILD5.slotRelocation ? referenceNode(before) : before);
       }
     }
   }
@@ -582,7 +687,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
       const elm = vnode.$elm$;
       nullifyVNodeRefs(vnode);
       if (elm) {
-        if (BUILD4.slotRelocation) {
+        if (BUILD5.slotRelocation) {
           checkSlotFallbackVisibility = true;
           if (elm["s-ol"]) {
             elm["s-ol"].remove();
@@ -626,7 +731,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldEndVnode = oldCh[--oldEndIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
-      if (BUILD4.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+      if (BUILD5.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
         putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
       }
       patch(oldStartVnode, newEndVnode, isInitialRender);
@@ -634,7 +739,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldStartVnode = oldCh[++oldStartIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
-      if (BUILD4.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+      if (BUILD5.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
         putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
       }
       patch(oldEndVnode, newStartVnode, isInitialRender);
@@ -643,7 +748,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       newStartVnode = newCh[++newStartIdx];
     } else {
       idxInOld = -1;
-      if (BUILD4.vdomKey) {
+      if (BUILD5.vdomKey) {
         for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
           if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
             idxInOld = i2;
@@ -651,10 +756,10 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
           }
         }
       }
-      if (BUILD4.vdomKey && idxInOld >= 0) {
+      if (BUILD5.vdomKey && idxInOld >= 0) {
         elmToMove = oldCh[idxInOld];
         if (elmToMove.$tag$ !== newStartVnode.$tag$) {
-          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld, parentElm);
+          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
         } else {
           patch(elmToMove, newStartVnode, isInitialRender);
           oldCh[idxInOld] = void 0;
@@ -662,12 +767,16 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         }
         newStartVnode = newCh[++newStartIdx];
       } else {
-        node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx, parentElm);
+        node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
         newStartVnode = newCh[++newStartIdx];
       }
       if (node) {
-        if (BUILD4.slotRelocation) {
-          insertBefore(parentReferenceNode(oldStartVnode.$elm$), node, referenceNode(oldStartVnode.$elm$));
+        if (BUILD5.slotRelocation) {
+          insertBefore(
+            referenceNode(oldStartVnode.$elm$).parentNode,
+            node,
+            referenceNode(oldStartVnode.$elm$)
+          );
         } else {
           insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
         }
@@ -683,35 +792,26 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       newStartIdx,
       newEndIdx
     );
-  } else if (BUILD4.updatable && newStartIdx > newEndIdx) {
+  } else if (BUILD5.updatable && newStartIdx > newEndIdx) {
     removeVnodes(oldCh, oldStartIdx, oldEndIdx);
   }
 };
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
-    if (BUILD4.slotRelocation && leftVNode.$tag$ === "slot") {
-      if (
-        // The component gets hydrated and no VDOM has been initialized.
-        // Here the comparison can't happen as $name$ property is not set for `leftNode`.
-        "$nodeId$" in leftVNode && isInitialRender && // `leftNode` is not from type HTMLComment which would cause many
-        // hydration comments to be removed
-        leftVNode.$elm$.nodeType !== 8
-      ) {
-        return false;
-      }
+    if (BUILD5.slotRelocation && leftVNode.$tag$ === "slot") {
       return leftVNode.$name$ === rightVNode.$name$;
     }
-    if (BUILD4.vdomKey && !isInitialRender) {
+    if (BUILD5.vdomKey && !isInitialRender) {
       return leftVNode.$key$ === rightVNode.$key$;
     }
+    if (isInitialRender && !leftVNode.$key$ && rightVNode.$key$) {
+      leftVNode.$key$ = rightVNode.$key$;
+    }
     return true;
   }
   return false;
 };
-var referenceNode = (node) => {
-  return node && node["s-ol"] || node;
-};
-var parentReferenceNode = (node) => (node["s-ol"] ? node["s-ol"] : node).parentNode;
+var referenceNode = (node) => node && node["s-ol"] || node;
 var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
@@ -719,13 +819,13 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   let defaultHolder;
-  if (!BUILD4.vdomText || text === null) {
-    if (BUILD4.svg) {
+  if (!BUILD5.vdomText || text === null) {
+    if (BUILD5.svg) {
       isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
     }
-    if (BUILD4.vdomAttribute || BUILD4.reflect) {
-      if (BUILD4.slot && tag === "slot" && !useNativeShadowDom) {
-        if (BUILD4.experimentalSlotFixes && oldVNode.$name$ !== newVNode2.$name$) {
+    if (BUILD5.vdomAttribute || BUILD5.reflect) {
+      if (BUILD5.slot && tag === "slot" && !useNativeShadowDom) {
+        if (BUILD5.experimentalSlotFixes && oldVNode.$name$ !== newVNode2.$name$) {
           newVNode2.$elm$["s-sn"] = newVNode2.$name$ || "";
           relocateToHostRoot(newVNode2.$elm$.parentElement);
         }
@@ -733,55 +833,28 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
         updateElement(oldVNode, newVNode2, isSvgMode);
       }
     }
-    if (BUILD4.updatable && oldChildren !== null && newChildren !== null) {
+    if (BUILD5.updatable && oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
     } else if (newChildren !== null) {
-      if (BUILD4.updatable && BUILD4.vdomText && oldVNode.$text$ !== null) {
+      if (BUILD5.updatable && BUILD5.vdomText && oldVNode.$text$ !== null) {
         elm.textContent = "";
       }
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
     } else if (
       // don't do this on initial render as it can cause non-hydrated content to be removed
-      !isInitialRender && BUILD4.updatable && oldChildren !== null
+      !isInitialRender && BUILD5.updatable && oldChildren !== null
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
-    if (BUILD4.svg && isSvgMode && tag === "svg") {
+    if (BUILD5.svg && isSvgMode && tag === "svg") {
       isSvgMode = false;
     }
-  } else if (BUILD4.vdomText && BUILD4.slotRelocation && (defaultHolder = elm["s-cr"])) {
+  } else if (BUILD5.vdomText && BUILD5.slotRelocation && (defaultHolder = elm["s-cr"])) {
     defaultHolder.parentNode.textContent = text;
-  } else if (BUILD4.vdomText && oldVNode.$text$ !== text) {
+  } else if (BUILD5.vdomText && oldVNode.$text$ !== text) {
     elm.data = text;
   }
 };
-var updateFallbackSlotVisibility = (elm) => {
-  const childNodes = elm.__childNodes || elm.childNodes;
-  for (const childNode of childNodes) {
-    if (childNode.nodeType === 1 /* ElementNode */) {
-      if (childNode["s-sr"]) {
-        const slotName = childNode["s-sn"];
-        childNode.hidden = false;
-        for (const siblingNode of childNodes) {
-          if (siblingNode !== childNode) {
-            if (siblingNode["s-hn"] !== childNode["s-hn"] || slotName !== "") {
-              if (siblingNode.nodeType === 1 /* ElementNode */ && (slotName === siblingNode.getAttribute("slot") || slotName === siblingNode["s-sn"]) || siblingNode.nodeType === 3 /* TextNode */ && slotName === siblingNode["s-sn"]) {
-                childNode.hidden = true;
-                break;
-              }
-            } else if (slotName === siblingNode["s-sn"]) {
-              if (siblingNode.nodeType === 1 /* ElementNode */ || siblingNode.nodeType === 3 /* TextNode */ && siblingNode.textContent.trim() !== "") {
-                childNode.hidden = true;
-                break;
-              }
-            }
-          }
-        }
-      }
-      updateFallbackSlotVisibility(childNode);
-    }
-  }
-};
 var relocateNodes = [];
 var markSlotContentForRelocation = (elm) => {
   let node;
@@ -794,7 +867,7 @@ var markSlotContentForRelocation = (elm) => {
       const slotName = 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"] && (!BUILD4.experimentalSlotFixes || !node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
+        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!BUILD5.experimentalSlotFixes || !node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
           if (isNodeLocatedInSlot(node, slotName)) {
             let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
             checkSlotFallbackVisibility = true;
@@ -832,60 +905,40 @@ var markSlotContentForRelocation = (elm) => {
     }
   }
 };
-var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
-  if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
-    if (nodeToRelocate.getAttribute("slot") === null && slotName === "") {
-      return true;
-    }
-    if (nodeToRelocate.getAttribute("slot") === slotName) {
-      return true;
-    }
-    return false;
-  }
-  if (nodeToRelocate["s-sn"] === slotName) {
-    return true;
-  }
-  return slotName === "";
-};
 var nullifyVNodeRefs = (vNode) => {
-  if (BUILD4.vdomRef) {
+  if (BUILD5.vdomRef) {
     vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
     vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
   }
 };
 var insertBefore = (parent, newNode, reference) => {
-  const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
-  if (BUILD4.scoped) {
-    updateElementScopeIds(newNode, parent);
+  if (BUILD5.scoped && typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
+    addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
   }
+  const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
   return inserted;
 };
-var findScopeIds = (element) => {
-  const scopeIds = [];
-  if (element) {
-    scopeIds.push(
-      ...element["s-scs"] || [],
-      element["s-si"],
-      element["s-sc"],
-      ...findScopeIds(element.parentElement)
-    );
-  }
-  return scopeIds;
-};
-var updateElementScopeIds = (element, parent, iterateChildNodes = false) => {
+function addRemoveSlotScopedClass(reference, slotNode, newParent, oldParent) {
   var _a;
-  if (element && parent && element.nodeType === 1 /* ElementNode */) {
-    const scopeIds = new Set(findScopeIds(parent).filter(Boolean));
-    if (scopeIds.size) {
-      (_a = element.classList) == null ? void 0 : _a.add(...element["s-scs"] = Array.from(scopeIds));
-      if (element["s-ol"] || iterateChildNodes) {
-        for (const childNode of Array.from(element.__childNodes || element.childNodes)) {
-          updateElementScopeIds(childNode, element, true);
+  let scopeId2;
+  if (reference && typeof slotNode["s-sn"] === "string" && !!slotNode["s-sr"] && reference.parentNode && reference.parentNode["s-sc"] && (scopeId2 = slotNode["s-si"] || reference.parentNode["s-sc"])) {
+    const scopeName = slotNode["s-sn"];
+    const hostName = slotNode["s-hn"];
+    (_a = newParent.classList) == null ? void 0 : _a.add(scopeId2 + "-s");
+    if (oldParent && oldParent.classList.contains(scopeId2 + "-s")) {
+      let child = (oldParent.__childNodes || oldParent.childNodes)[0];
+      let found = false;
+      while (child) {
+        if (child["s-sn"] !== scopeName && child["s-hn"] === hostName && !!child["s-sr"]) {
+          found = true;
+          break;
         }
+        child = child.nextSibling;
       }
+      if (!found) oldParent.classList.remove(scopeId2 + "-s");
     }
   }
-};
+}
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   var _a, _b, _c, _d, _e;
   const hostElm = hostRef.$hostElement$;
@@ -893,7 +946,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
   const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
-  if (BUILD4.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
+  if (BUILD5.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
     throw new Error(`The <Host> must be the single root component.
 Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
 
@@ -907,7 +960,7 @@ render() {
 }
   `);
   }
-  if (BUILD4.reflect && cmpMeta.$attrsToReflect$) {
+  if (BUILD5.reflect && cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
     cmpMeta.$attrsToReflect$.map(
       ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
@@ -923,24 +976,24 @@ render() {
   rootVnode.$tag$ = null;
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
-  rootVnode.$elm$ = oldVNode.$elm$ = BUILD4.shadowDom ? hostElm.shadowRoot || hostElm : hostElm;
-  if (BUILD4.scoped || BUILD4.shadowDom) {
+  rootVnode.$elm$ = oldVNode.$elm$ = BUILD5.shadowDom ? hostElm.shadowRoot || hostElm : hostElm;
+  if (BUILD5.scoped || BUILD5.shadowDom) {
     scopeId = hostElm["s-sc"];
   }
   useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
-  if (BUILD4.slotRelocation) {
+  if (BUILD5.slotRelocation) {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
   }
   patch(oldVNode, rootVnode, isInitialLoad);
-  if (BUILD4.slotRelocation) {
+  if (BUILD5.slotRelocation) {
     plt.$flags$ |= 1 /* isTmpDisconnected */;
     if (checkSlotRelocate) {
       markSlotContentForRelocation(rootVnode.$elm$);
       for (const relocateData of relocateNodes) {
         const nodeToRelocate = relocateData.$nodeToRelocate$;
         if (!nodeToRelocate["s-ol"]) {
-          const orgLocationNode = BUILD4.isDebug || BUILD4.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : doc.createTextNode("");
+          const orgLocationNode = BUILD5.isDebug || BUILD5.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : doc.createTextNode("");
           orgLocationNode["s-nr"] = nodeToRelocate;
           insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
         }
@@ -951,7 +1004,7 @@ render() {
         if (slotRefNode) {
           const parentNodeRef = slotRefNode.parentNode;
           let insertBeforeNode = slotRefNode.nextSibling;
-          if (!BUILD4.experimentalSlotFixes || insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */) {
+          if (!BUILD5.hydrateServerSide && (!BUILD5.experimentalSlotFixes || insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */)) {
             let orgLocationNode = (_a = nodeToRelocate["s-ol"]) == null ? void 0 : _a.previousSibling;
             while (orgLocationNode) {
               let refNode = (_b = orgLocationNode["s-nr"]) != null ? _b : null;
@@ -970,11 +1023,11 @@ render() {
           }
           if (!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode || nodeToRelocate.nextSibling !== insertBeforeNode) {
             if (nodeToRelocate !== insertBeforeNode) {
-              if (!BUILD4.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
+              if (!BUILD5.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
                 nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
               }
               insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
-              if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
+              if (nodeToRelocate.nodeType === 1 /* ElementNode */ && nodeToRelocate.tagName !== "SLOT-FB") {
                 nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : false;
               }
             }
@@ -996,7 +1049,7 @@ render() {
     plt.$flags$ &= ~1 /* isTmpDisconnected */;
     relocateNodes.length = 0;
   }
-  if (BUILD4.experimentalScopedSlotChanges && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+  if (BUILD5.experimentalScopedSlotChanges && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
     const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
     for (const childNode of children) {
       if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
@@ -1033,9 +1086,9 @@ var patchCloneNode = (HostElementPrototype) => {
   const orgCloneNode = HostElementPrototype.cloneNode;
   HostElementPrototype.cloneNode = function(deep) {
     const srcNode = this;
-    const isShadowDom = BUILD5.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
+    const isShadowDom = BUILD6.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
     const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
-    if (BUILD5.slot && !isShadowDom && deep) {
+    if (BUILD6.slot && !isShadowDom && deep) {
       let i2 = 0;
       let slotted, nonStencilNode;
       const stencilPrivates = [
@@ -1060,7 +1113,7 @@ var patchCloneNode = (HostElementPrototype) => {
         slotted = childNodes[i2]["s-nr"];
         nonStencilNode = stencilPrivates.every((privateField) => !childNodes[i2][privateField]);
         if (slotted) {
-          if (BUILD5.appendChildSlotFix && clonedNode.__appendChild) {
+          if (BUILD6.appendChildSlotFix && clonedNode.__appendChild) {
             clonedNode.__appendChild(slotted.cloneNode(true));
           } else {
             clonedNode.appendChild(slotted.cloneNode(true));
@@ -1078,7 +1131,7 @@ var patchSlotAppendChild = (HostElementPrototype) => {
   HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
   HostElementPrototype.appendChild = function(newChild) {
     const slotName = newChild["s-sn"] = getSlotName(newChild);
-    const slotNode = getHostSlotNode(this.__childNodes || this.childNodes, slotName, this.tagName);
+    const slotNode = getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, slotName)[0];
     if (slotNode) {
       addSlotRelocateNode(newChild, slotNode);
       const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
@@ -1095,7 +1148,7 @@ var patchSlotRemoveChild = (ElementPrototype) => {
   ElementPrototype.removeChild = function(toRemove) {
     if (toRemove && typeof toRemove["s-sn"] !== "undefined") {
       const childNodes = this.__childNodes || this.childNodes;
-      const slotNode = getHostSlotNode(childNodes, toRemove["s-sn"], this.tagName);
+      const slotNode = getHostSlotNodes(childNodes, this.tagName, toRemove["s-sn"]);
       if (slotNode && toRemove.isConnected) {
         toRemove.remove();
         updateFallbackSlotVisibility(this);
@@ -1114,7 +1167,7 @@ var patchSlotPrepend = (HostElementPrototype) => {
       }
       const slotName = newChild["s-sn"] = getSlotName(newChild);
       const childNodes = this.__childNodes || this.childNodes;
-      const slotNode = getHostSlotNode(childNodes, slotName, this.tagName);
+      const slotNode = getHostSlotNodes(childNodes, this.tagName, slotName)[0];
       if (slotNode) {
         addSlotRelocateNode(newChild, slotNode, true);
         const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
@@ -1332,77 +1385,12 @@ function patchHostOriginalAccessor(accessorName, node) {
   }
   if (accessor) Object.defineProperty(node, "__" + accessorName, accessor);
 }
-var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
-  let slottedNodeLocation;
-  if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
-    slottedNodeLocation = newChild["s-ol"];
-  } else {
-    slottedNodeLocation = document.createTextNode("");
-    slottedNodeLocation["s-nr"] = newChild;
-  }
-  if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
-  const parent = slotNode["s-cr"].parentNode;
-  const appendMethod = prepend ? parent.__prepend || parent.prepend : parent.__appendChild || parent.appendChild;
-  if (typeof position !== "undefined") {
-    if (BUILD5.hydrateClientSide) {
-      slottedNodeLocation["s-oo"] = position;
-      const childNodes = parent.__childNodes || parent.childNodes;
-      const slotRelocateNodes = [slottedNodeLocation];
-      childNodes.forEach((n) => {
-        if (n["s-nr"]) slotRelocateNodes.push(n);
-      });
-      slotRelocateNodes.sort((a, b) => {
-        if (!a["s-oo"] || a["s-oo"] < b["s-oo"]) return -1;
-        else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
-        return 0;
-      });
-      slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
-    }
-  } else {
-    appendMethod.call(parent, slottedNodeLocation);
-  }
-  newChild["s-ol"] = slottedNodeLocation;
-  newChild["s-sh"] = slotNode["s-hn"];
-};
-var getSlottedChildNodes = (childNodes) => {
-  const result = [];
-  for (let i2 = 0; i2 < childNodes.length; i2++) {
-    const slottedNode = childNodes[i2]["s-nr"];
-    if (slottedNode && slottedNode.isConnected) {
-      result.push(slottedNode);
-    }
-  }
-  return result;
-};
-var getSlotName = (node) => node["s-sn"] || node.nodeType === 1 && node.getAttribute("slot") || "";
-var getHostSlotNode = (childNodes, slotName, hostName) => {
-  let i2 = 0;
-  let childNode;
-  for (; i2 < childNodes.length; i2++) {
-    childNode = childNodes[i2];
-    if (childNode["s-sr"] && childNode["s-sn"] === slotName && childNode["s-hn"] === hostName) {
-      return childNode;
-    }
-    childNode = getHostSlotNode(childNode.childNodes, slotName, hostName);
-    if (childNode) {
-      return childNode;
-    }
-  }
-  return null;
-};
-var getHostSlotChildNodes = (n, slotName) => {
-  const childNodes = [n];
-  while ((n = n.nextSibling) && n["s-sn"] === slotName) {
-    childNodes.push(n);
-  }
-  return childNodes;
-};
 
 // src/runtime/profile.ts
-import { BUILD as BUILD6 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD7 } from "@stencil/core/internal/app-data";
 var i = 0;
 var createTime = (fnName, tagName = "") => {
-  if (BUILD6.profile && performance.mark) {
+  if (BUILD7.profile && performance.mark) {
     const key = `st:${fnName}:${tagName}:${i++}`;
     performance.mark(key);
     return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);
@@ -1413,7 +1401,7 @@ var createTime = (fnName, tagName = "") => {
   }
 };
 var uniqueTime = (key, measureText) => {
-  if (BUILD6.profile && performance.mark) {
+  if (BUILD7.profile && performance.mark) {
     if (performance.getEntriesByName(key, "mark").length === 0) {
       performance.mark(key);
     }
@@ -1471,7 +1459,7 @@ var inspect = (ref) => {
   };
 };
 var installDevTools = () => {
-  if (BUILD6.devTools) {
+  if (BUILD7.devTools) {
     const stencil = win.stencil = win.stencil || {};
     const originalInspect = stencil.inspect;
     stencil.inspect = (ref) => {
@@ -1491,9 +1479,19 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const childRenderNodes = [];
   const slotNodes = [];
   const slottedNodes = [];
-  const shadowRootNodes = BUILD7.shadowDom && shadowRoot ? [] : null;
+  const shadowRootNodes = BUILD8.shadowDom && shadowRoot ? [] : null;
   const vnode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
+  let scopeId2;
+  if (BUILD8.scoped) {
+    const cmpMeta = hostRef.$cmpMeta$;
+    if (cmpMeta && cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */ && hostElm["s-sc"]) {
+      scopeId2 = hostElm["s-sc"];
+      hostElm.classList.add(scopeId2 + "-h");
+    } else if (hostElm["s-sc"]) {
+      delete hostElm["s-sc"];
+    }
+  }
   if (!plt.$orgLocNodes$) {
     initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
   }
@@ -1523,6 +1521,18 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         node["s-cr"] = hostElm["s-cr"];
       }
     }
+    if (childRenderNode.$tag$ === "slot") {
+      if (childRenderNode.$children$) {
+        childRenderNode.$flags$ |= 2 /* isSlotFallback */;
+        if (!childRenderNode.$elm$.childNodes.length) {
+          childRenderNode.$children$.forEach((c) => {
+            childRenderNode.$elm$.appendChild(c.$elm$);
+          });
+        }
+      } else {
+        childRenderNode.$flags$ |= 1 /* isSlotReference */;
+      }
+    }
     if (orgLocationNode && orgLocationNode.isConnected) {
       if (shadowRoot && orgLocationNode["s-en"] === "") {
         orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
@@ -1535,8 +1545,8 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     plt.$orgLocNodes$.delete(orgLocationId);
   }
   const hosts = [];
-  let snIndex = 0;
   const snLen = slottedNodes.length;
+  let snIndex = 0;
   let slotGroup;
   let snGroupIdx;
   let snGroupLen;
@@ -1558,11 +1568,10 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) {
           slottedItem.slot["s-cr"] = hostEle;
         } else {
-          const hostChildren = hostEle.__childNodes || hostEle.childNodes;
-          slottedItem.slot["s-cr"] = hostChildren[0];
+          slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
         }
         addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
-        if (BUILD7.experimentalSlotFixes) {
+        if (BUILD8.experimentalSlotFixes) {
           patchNextPrev(slottedItem.node);
         }
       }
@@ -1571,7 +1580,12 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
     }
   }
-  if (BUILD7.shadowDom && shadowRoot) {
+  if (BUILD8.scoped && scopeId2 && slotNodes.length) {
+    slotNodes.forEach((slot) => {
+      slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
+    });
+  }
+  if (BUILD8.shadowDom && shadowRoot) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
     for (rnIdex; rnIdex < rnLen; rnIdex++) {
@@ -1605,15 +1619,19 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
           $index$: childIdSplt[3],
           $tag$: node.tagName.toLowerCase(),
           $elm$: node,
-          // If we don't add the initial classes to the VNode, the first `vdom-render.ts` reconciliation will fail:
-          // client side changes before componentDidLoad will be ignored, `set-accessor.ts` will just take the element's initial classes
-          $attrs$: { class: node.className }
+          // If we don't add the initial classes to the VNode, the first `vdom-render.ts` patch
+          // won't try to reconcile them. Classes set on the node will be blown away.
+          $attrs$: { class: node.className || "" }
         });
         childRenderNodes.push(childVNode);
         node.removeAttribute(HYDRATE_CHILD_ID);
         if (!parentVNode.$children$) {
           parentVNode.$children$ = [];
         }
+        if (BUILD8.scoped && scopeId2) {
+          node["s-si"] = scopeId2;
+          childVNode.$attrs$.class += " " + scopeId2;
+        }
         const slotName = childVNode.$elm$.getAttribute("s-sn");
         if (typeof slotName === "string") {
           if (childVNode.$tag$ === "slot-fb") {
@@ -1628,6 +1646,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
               shadowRootNodes,
               slottedNodes
             );
+            if (BUILD8.scoped && scopeId2) {
+              node.classList.add(scopeId2);
+            }
           }
           childVNode.$elm$["s-sn"] = slotName;
           childVNode.$elm$.removeAttribute("s-sn");
@@ -1635,7 +1656,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         if (childVNode.$index$ !== void 0) {
           parentVNode.$children$[childVNode.$index$] = childVNode;
         }
-        if (scopeId2) node["s-si"] = scopeId2;
         parentVNode = childVNode;
         if (shadowRootNodes && childVNode.$depth$ === "0") {
           shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
@@ -1710,8 +1730,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         }
       } else if (childVNode.$hostId$ === hostId) {
         if (childNodeType === SLOT_NODE_ID) {
-          childVNode.$tag$ = "slot";
-          const slotName = node["s-sn"] = childVNode.$name$ = childIdSplt[5] || "";
+          const slotName = node["s-sn"] = childIdSplt[5] || "";
           addSlot(
             slotName,
             childIdSplt[2],
@@ -1724,9 +1743,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
             slottedNodes
           );
         } else if (childNodeType === CONTENT_REF_ID) {
-          if (BUILD7.shadowDom && shadowRootNodes) {
+          if (BUILD8.shadowDom && shadowRootNodes) {
             node.remove();
-          } else if (BUILD7.slotRelocation) {
+          } else if (BUILD8.slotRelocation) {
             hostElm["s-cr"] = node;
             node["s-cn"] = true;
           }
@@ -1785,8 +1804,10 @@ var createSimpleVNode = (vnode) => {
 };
 function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNodes, slotNodes, shadowRootNodes, slottedNodes) {
   node["s-sr"] = true;
+  childVNode.$name$ = slotName || null;
+  childVNode.$tag$ = "slot";
   const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
-  if (BUILD7.shadowDom && shadowRootNodes) {
+  if (BUILD8.shadowDom && shadowRootNodes) {
     const slot = childVNode.$elm$ = doc.createElement(childVNode.$tag$);
     if (childVNode.$name$) {
       childVNode.$elm$.setAttribute("name", slotName);
@@ -1827,7 +1848,7 @@ var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) =>
 };
 
 // src/runtime/initialize-component.ts
-import { BUILD as BUILD15 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD16 } from "@stencil/core/internal/app-data";
 
 // src/runtime/mode.ts
 var computeMode = (elm) => modeResolutionChain.map((h2) => h2(elm)).find((m) => !!m);
@@ -1835,22 +1856,22 @@ var setMode = (handler) => modeResolutionChain.push(handler);
 var getMode = (ref) => getHostRef(ref).$modeName$;
 
 // src/runtime/proxy-component.ts
-import { BUILD as BUILD14 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD15 } from "@stencil/core/internal/app-data";
 
 // src/runtime/set-value.ts
-import { BUILD as BUILD13 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD14 } from "@stencil/core/internal/app-data";
 
 // src/runtime/parse-property-value.ts
-import { BUILD as BUILD8 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD9 } from "@stencil/core/internal/app-data";
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
-    if (BUILD8.propBoolean && propType & 4 /* Boolean */) {
+    if (BUILD9.propBoolean && propType & 4 /* Boolean */) {
       return propValue === "false" ? false : propValue === "" || !!propValue;
     }
-    if (BUILD8.propNumber && propType & 2 /* Number */) {
+    if (BUILD9.propNumber && propType & 2 /* Number */) {
       return parseFloat(propValue);
     }
-    if (BUILD8.propString && propType & 1 /* String */) {
+    if (BUILD9.propString && propType & 1 /* String */) {
       return String(propValue);
     }
     return propValue;
@@ -1859,21 +1880,21 @@ var parsePropertyValue = (propValue, propType) => {
 };
 
 // src/runtime/update-component.ts
-import { BUILD as BUILD12, NAMESPACE } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD13, NAMESPACE } from "@stencil/core/internal/app-data";
 
 // src/runtime/event-emitter.ts
-import { BUILD as BUILD10 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD11 } from "@stencil/core/internal/app-data";
 
 // src/runtime/element.ts
-import { BUILD as BUILD9 } from "@stencil/core/internal/app-data";
-var getElement = (ref) => BUILD9.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
+import { BUILD as BUILD10 } from "@stencil/core/internal/app-data";
+var getElement = (ref) => BUILD10.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
 
 // src/runtime/event-emitter.ts
 var createEvent = (ref, name, flags) => {
   const elm = getElement(ref);
   return {
     emit: (detail) => {
-      if (BUILD10.isDev && !elm.isConnected) {
+      if (BUILD11.isDev && !elm.isConnected) {
         consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
       }
       return emitEvent(elm, name, {
@@ -1892,7 +1913,7 @@ var emitEvent = (elm, name, opts) => {
 };
 
 // src/runtime/styles.ts
-import { BUILD as BUILD11 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD12 } from "@stencil/core/internal/app-data";
 var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
 var registerStyle = (scopeId2, cssText, allowCS) => {
   let style = styles.get(scopeId2);
@@ -1912,7 +1933,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
   var _a;
   const scopeId2 = getScopeId(cmpMeta, mode);
   const style = styles.get(scopeId2);
-  if (!BUILD11.attachStyles) {
+  if (!BUILD12.attachStyles) {
     return scopeId2;
   }
   styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
@@ -1925,16 +1946,16 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
         rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
       }
       if (!appliedStyles.has(scopeId2)) {
-        if (BUILD11.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
+        if (BUILD12.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
           styleElm.innerHTML = style;
         } else {
-          styleElm = doc.createElement("style");
+          styleElm = document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`) || doc.createElement("style");
           styleElm.innerHTML = style;
           const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(doc);
           if (nonce != null) {
             styleElm.setAttribute("nonce", nonce);
           }
-          if ((BUILD11.hydrateServerSide || BUILD11.hotModuleReplacement) && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+          if ((BUILD12.hydrateServerSide || BUILD12.hotModuleReplacement) && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
             styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
           }
           if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
@@ -1970,7 +1991,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           appliedStyles.add(scopeId2);
         }
       }
-    } else if (BUILD11.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
+    } else if (BUILD12.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
       styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
     }
   }
@@ -1982,43 +2003,40 @@ var attachStyles = (hostRef) => {
   const flags = cmpMeta.$flags$;
   const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
   const scopeId2 = addStyle(
-    BUILD11.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+    BUILD12.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
     cmpMeta,
     hostRef.$modeName$
   );
-  if ((BUILD11.shadowDom || BUILD11.scoped) && BUILD11.cssAnnotations && flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
+  if ((BUILD12.shadowDom || BUILD12.scoped) && BUILD12.cssAnnotations && flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
-    if (BUILD11.scoped && flags & 2 /* scopedCssEncapsulation */) {
-      elm.classList.add(scopeId2 + "-s");
-    }
   }
   endAttachStyles();
 };
-var getScopeId = (cmp, mode) => "sc-" + (BUILD11.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
+var getScopeId = (cmp, mode) => "sc-" + (BUILD12.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
 
 // src/runtime/update-component.ts
 var attachToAncestor = (hostRef, ancestorComponent) => {
-  if (BUILD12.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
+  if (BUILD13.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
     ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = r));
   }
 };
 var scheduleUpdate = (hostRef, isInitialLoad) => {
-  if (BUILD12.taskQueue && BUILD12.updatable) {
+  if (BUILD13.taskQueue && BUILD13.updatable) {
     hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
   }
-  if (BUILD12.asyncLoading && hostRef.$flags$ & 4 /* isWaitingForChildren */) {
+  if (BUILD13.asyncLoading && hostRef.$flags$ & 4 /* isWaitingForChildren */) {
     hostRef.$flags$ |= 512 /* needsRerender */;
     return;
   }
   attachToAncestor(hostRef, hostRef.$ancestorComponent$);
   const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
-  return BUILD12.taskQueue ? writeTask(dispatch) : dispatch();
+  return BUILD13.taskQueue ? writeTask(dispatch) : dispatch();
 };
 var dispatchHooks = (hostRef, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
-  const instance = BUILD12.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD13.lazyLoad ? hostRef.$lazyInstance$ : elm;
   if (!instance) {
     throw new Error(
       `Can't render component <${elm.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`
@@ -2026,7 +2044,7 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   }
   let maybePromise;
   if (isInitialLoad) {
-    if (BUILD12.lazyLoad && BUILD12.hostListener) {
+    if (BUILD13.lazyLoad && BUILD13.hostListener) {
       hostRef.$flags$ |= 256 /* isListenReady */;
       if (hostRef.$queuedListeners$) {
         hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
@@ -2034,17 +2052,17 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
       }
     }
     emitLifecycleEvent(elm, "componentWillLoad");
-    if (BUILD12.cmpWillLoad) {
+    if (BUILD13.cmpWillLoad) {
       maybePromise = safeCall(instance, "componentWillLoad");
     }
   } else {
     emitLifecycleEvent(elm, "componentWillUpdate");
-    if (BUILD12.cmpWillUpdate) {
+    if (BUILD13.cmpWillUpdate) {
       maybePromise = safeCall(instance, "componentWillUpdate");
     }
   }
   emitLifecycleEvent(elm, "componentWillRender");
-  if (BUILD12.cmpWillRender) {
+  if (BUILD13.cmpWillRender) {
     maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender"));
   }
   endSchedule();
@@ -2060,23 +2078,23 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$);
   const rc = elm["s-rc"];
-  if (BUILD12.style && isInitialLoad) {
+  if (BUILD13.style && isInitialLoad) {
     attachStyles(hostRef);
   }
   const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$);
-  if (BUILD12.isDev) {
+  if (BUILD13.isDev) {
     hostRef.$flags$ |= 1024 /* devOnRender */;
   }
-  if (BUILD12.hydrateServerSide) {
+  if (BUILD13.hydrateServerSide) {
     await callRender(hostRef, instance, elm, isInitialLoad);
   } else {
     callRender(hostRef, instance, elm, isInitialLoad);
   }
-  if (BUILD12.isDev) {
+  if (BUILD13.isDev) {
     hostRef.$renderCount$ = hostRef.$renderCount$ === void 0 ? 1 : hostRef.$renderCount$ + 1;
     hostRef.$flags$ &= ~1024 /* devOnRender */;
   }
-  if (BUILD12.hydrateServerSide) {
+  if (BUILD13.hydrateServerSide) {
     try {
       serverSideConnected(elm);
       if (isInitialLoad) {
@@ -2090,13 +2108,13 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
       consoleError(e, elm);
     }
   }
-  if (BUILD12.asyncLoading && rc) {
+  if (BUILD13.asyncLoading && rc) {
     rc.map((cb) => cb());
     elm["s-rc"] = void 0;
   }
   endRender();
   endUpdate();
-  if (BUILD12.asyncLoading) {
+  if (BUILD13.asyncLoading) {
     const childrenPromises = (_a = elm["s-p"]) != null ? _a : [];
     const postUpdate = () => postUpdateComponent(hostRef);
     if (childrenPromises.length === 0) {
@@ -2112,10 +2130,10 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
 };
 var renderingRef = null;
 var callRender = (hostRef, instance, elm, isInitialLoad) => {
-  const allRenderFn = BUILD12.allRenderFn ? true : false;
-  const lazyLoad = BUILD12.lazyLoad ? true : false;
-  const taskQueue = BUILD12.taskQueue ? true : false;
-  const updatable = BUILD12.updatable ? true : false;
+  const allRenderFn = BUILD13.allRenderFn ? true : false;
+  const lazyLoad = BUILD13.lazyLoad ? true : false;
+  const taskQueue = BUILD13.taskQueue ? true : false;
+  const updatable = BUILD13.updatable ? true : false;
   try {
     renderingRef = instance;
     instance = allRenderFn ? instance.render() : instance.render && instance.render();
@@ -2125,9 +2143,9 @@ var callRender = (hostRef, instance, elm, isInitialLoad) => {
     if (updatable || lazyLoad) {
       hostRef.$flags$ |= 2 /* hasRendered */;
     }
-    if (BUILD12.hasRenderFn || BUILD12.reflect) {
-      if (BUILD12.vdomRender || BUILD12.reflect) {
-        if (BUILD12.hydrateServerSide) {
+    if (BUILD13.hasRenderFn || BUILD13.reflect) {
+      if (BUILD13.vdomRender || BUILD13.reflect) {
+        if (BUILD13.hydrateServerSide) {
           return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
         } else {
           renderVdom(hostRef, instance, isInitialLoad);
@@ -2152,57 +2170,57 @@ var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
-  const instance = BUILD12.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD13.lazyLoad ? hostRef.$lazyInstance$ : elm;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  if (BUILD12.cmpDidRender) {
-    if (BUILD12.isDev) {
+  if (BUILD13.cmpDidRender) {
+    if (BUILD13.isDev) {
       hostRef.$flags$ |= 1024 /* devOnRender */;
     }
     safeCall(instance, "componentDidRender");
-    if (BUILD12.isDev) {
+    if (BUILD13.isDev) {
       hostRef.$flags$ &= ~1024 /* devOnRender */;
     }
   }
   emitLifecycleEvent(elm, "componentDidRender");
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
-    if (BUILD12.asyncLoading && BUILD12.cssAnnotations) {
+    if (BUILD13.asyncLoading && BUILD13.cssAnnotations) {
       addHydratedFlag(elm);
     }
-    if (BUILD12.cmpDidLoad) {
-      if (BUILD12.isDev) {
+    if (BUILD13.cmpDidLoad) {
+      if (BUILD13.isDev) {
         hostRef.$flags$ |= 2048 /* devOnDidLoad */;
       }
       safeCall(instance, "componentDidLoad");
-      if (BUILD12.isDev) {
+      if (BUILD13.isDev) {
         hostRef.$flags$ &= ~2048 /* devOnDidLoad */;
       }
     }
     emitLifecycleEvent(elm, "componentDidLoad");
     endPostUpdate();
-    if (BUILD12.asyncLoading) {
+    if (BUILD13.asyncLoading) {
       hostRef.$onReadyResolve$(elm);
       if (!ancestorComponent) {
         appDidLoad(tagName);
       }
     }
   } else {
-    if (BUILD12.cmpDidUpdate) {
-      if (BUILD12.isDev) {
+    if (BUILD13.cmpDidUpdate) {
+      if (BUILD13.isDev) {
         hostRef.$flags$ |= 1024 /* devOnRender */;
       }
       safeCall(instance, "componentDidUpdate");
-      if (BUILD12.isDev) {
+      if (BUILD13.isDev) {
         hostRef.$flags$ &= ~1024 /* devOnRender */;
       }
     }
     emitLifecycleEvent(elm, "componentDidUpdate");
     endPostUpdate();
   }
-  if (BUILD12.method && BUILD12.lazyLoad) {
+  if (BUILD13.method && BUILD13.lazyLoad) {
     hostRef.$onInstanceResolve$(elm);
   }
-  if (BUILD12.asyncLoading) {
+  if (BUILD13.asyncLoading) {
     if (hostRef.$onRenderResolve$) {
       hostRef.$onRenderResolve$();
       hostRef.$onRenderResolve$ = void 0;
@@ -2214,7 +2232,7 @@ var postUpdateComponent = (hostRef) => {
   }
 };
 var forceUpdate = (ref) => {
-  if (BUILD12.updatable && (Build.isBrowser || Build.isTesting)) {
+  if (BUILD13.updatable && (Build.isBrowser || Build.isTesting)) {
     const hostRef = getHostRef(ref);
     const isConnected = hostRef.$hostElement$.isConnected;
     if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
@@ -2225,14 +2243,14 @@ var forceUpdate = (ref) => {
   return false;
 };
 var appDidLoad = (who) => {
-  if (BUILD12.cssAnnotations) {
+  if (BUILD13.cssAnnotations) {
     addHydratedFlag(doc.documentElement);
   }
-  if (BUILD12.asyncQueue) {
+  if (BUILD13.asyncQueue) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
-  if (BUILD12.profile && performance.measure) {
+  if (BUILD13.profile && performance.measure) {
     performance.measure(`[Stencil] ${NAMESPACE} initial load (by ${who})`, "st:app:start");
   }
 };
@@ -2247,7 +2265,7 @@ var safeCall = (instance, method, arg) => {
   return void 0;
 };
 var emitLifecycleEvent = (elm, lifecycleName) => {
-  if (BUILD12.lifecycleDOMEvents) {
+  if (BUILD13.lifecycleDOMEvents) {
     emitEvent(elm, "stencil_" + lifecycleName, {
       bubbles: true,
       composed: true,
@@ -2259,7 +2277,7 @@ var emitLifecycleEvent = (elm, lifecycleName) => {
 };
 var addHydratedFlag = (elm) => {
   var _a, _b;
-  return BUILD12.hydratedClass ? elm.classList.add((_a = BUILD12.hydratedSelectorName) != null ? _a : "hydrated") : BUILD12.hydratedAttribute ? elm.setAttribute((_b = BUILD12.hydratedSelectorName) != null ? _b : "hydrated", "") : void 0;
+  return BUILD13.hydratedClass ? elm.classList.add((_a = BUILD13.hydratedSelectorName) != null ? _a : "hydrated") : BUILD13.hydratedAttribute ? elm.setAttribute((_b = BUILD13.hydratedSelectorName) != null ? _b : "hydrated", "") : void 0;
 };
 var serverSideConnected = (elm) => {
   const children = elm.children;
@@ -2278,21 +2296,21 @@ var serverSideConnected = (elm) => {
 var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 var setValue = (ref, propName, newVal, cmpMeta) => {
   const hostRef = getHostRef(ref);
-  if (BUILD13.lazyLoad && !hostRef) {
+  if (BUILD14.lazyLoad && !hostRef) {
     throw new Error(
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
     );
   }
-  const elm = BUILD13.lazyLoad ? hostRef.$hostElement$ : ref;
+  const elm = BUILD14.lazyLoad ? hostRef.$hostElement$ : ref;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
-  const instance = BUILD13.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD14.lazyLoad ? hostRef.$lazyInstance$ : elm;
   newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
   const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
   const didValueChange = newVal !== oldVal && !areBothNaN;
-  if ((!BUILD13.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
+  if ((!BUILD14.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
-    if (BUILD13.isDev) {
+    if (BUILD14.isDev) {
       if (hostRef.$flags$ & 1024 /* devOnRender */) {
         consoleDevWarn(
           `The state/prop "${propName}" changed during rendering. This can potentially lead to infinite-loops and other bugs.`,
@@ -2315,8 +2333,8 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
         );
       }
     }
-    if (!BUILD13.lazyLoad || instance) {
-      if (BUILD13.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+    if (!BUILD14.lazyLoad || instance) {
+      if (BUILD14.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
         const watchMethods = cmpMeta.$watchers$[propName];
         if (watchMethods) {
           watchMethods.map((watchMethodName) => {
@@ -2328,8 +2346,8 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
           });
         }
       }
-      if (BUILD13.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
-        if (BUILD13.cmpShouldUpdate && instance.componentShouldUpdate) {
+      if (BUILD14.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+        if (BUILD14.cmpShouldUpdate && instance.componentShouldUpdate) {
           if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
             return;
           }
@@ -2344,40 +2362,40 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
-  if (BUILD14.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
+  if (BUILD15.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
     FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach((cbName) => {
       const originalFormAssociatedCallback = prototype[cbName];
       Object.defineProperty(prototype, cbName, {
         value(...args) {
           const hostRef = getHostRef(this);
-          const instance = BUILD14.lazyLoad ? hostRef.$lazyInstance$ : this;
+          const instance = BUILD15.lazyLoad ? hostRef.$lazyInstance$ : this;
           if (!instance) {
             hostRef.$onReadyPromise$.then((asyncInstance) => {
               const cb = asyncInstance[cbName];
               typeof cb === "function" && cb.call(asyncInstance, ...args);
             });
           } else {
-            const cb = BUILD14.lazyLoad ? instance[cbName] : originalFormAssociatedCallback;
+            const cb = BUILD15.lazyLoad ? instance[cbName] : originalFormAssociatedCallback;
             typeof cb === "function" && cb.call(instance, ...args);
           }
         }
       });
     });
   }
-  if (BUILD14.member && cmpMeta.$members$ || BUILD14.watchCallback && (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (BUILD14.watchCallback && Cstr.watchers && !cmpMeta.$watchers$) {
+  if (BUILD15.member && cmpMeta.$members$ || BUILD15.watchCallback && (cmpMeta.$watchers$ || Cstr.watchers)) {
+    if (BUILD15.watchCallback && Cstr.watchers && !cmpMeta.$watchers$) {
       cmpMeta.$watchers$ = Cstr.watchers;
     }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
-      if ((BUILD14.prop || BUILD14.state) && (memberFlags & 31 /* Prop */ || (!BUILD14.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
+      if ((BUILD15.prop || BUILD15.state) && (memberFlags & 31 /* Prop */ || (!BUILD15.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
         if ((memberFlags & 2048 /* Getter */) === 0) {
           Object.defineProperty(prototype, memberName, {
             get() {
               return getValue(this, memberName);
             },
             set(newValue) {
-              if (BUILD14.isDev) {
+              if (BUILD15.isDev) {
                 const ref = getHostRef(this);
                 if (
                   // we are proxying the instance (not element)
@@ -2398,11 +2416,11 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             enumerable: true
           });
         } else if (flags & 1 /* isElementConstructor */ && memberFlags & 2048 /* Getter */) {
-          if (BUILD14.lazyLoad) {
+          if (BUILD15.lazyLoad) {
             Object.defineProperty(prototype, memberName, {
               get() {
                 const ref = getHostRef(this);
-                const instance = BUILD14.lazyLoad && ref ? ref.$lazyInstance$ : prototype;
+                const instance = BUILD15.lazyLoad && ref ? ref.$lazyInstance$ : prototype;
                 if (!instance) return;
                 return instance[memberName];
               },
@@ -2442,7 +2460,7 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             });
           }
         }
-      } else if (BUILD14.lazyLoad && BUILD14.method && flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
+      } else if (BUILD15.lazyLoad && BUILD15.method && flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
         Object.defineProperty(prototype, memberName, {
           value(...args) {
             var _a2;
@@ -2455,13 +2473,13 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
         });
       }
     });
-    if (BUILD14.observeAttribute && (!BUILD14.lazyLoad || flags & 1 /* isElementConstructor */)) {
+    if (BUILD15.observeAttribute && (!BUILD15.lazyLoad || flags & 1 /* isElementConstructor */)) {
       const attrNameToPropName = /* @__PURE__ */ new Map();
       prototype.attributeChangedCallback = function(attrName, oldValue, newValue) {
         plt.jmp(() => {
           var _a2;
           const propName = attrNameToPropName.get(attrName);
-          if (this.hasOwnProperty(propName)) {
+          if (this.hasOwnProperty(propName) && BUILD15.lazyLoad) {
             newValue = this[propName];
             delete this[propName];
           } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
@@ -2471,8 +2489,8 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             const hostRef = getHostRef(this);
             const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
             if (flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
-              const elm = BUILD14.lazyLoad ? hostRef.$hostElement$ : this;
-              const instance = BUILD14.lazyLoad ? hostRef.$lazyInstance$ : elm;
+              const elm = BUILD15.lazyLoad ? hostRef.$hostElement$ : this;
+              const instance = BUILD15.lazyLoad ? hostRef.$lazyInstance$ : elm;
               const entry = (_a2 = cmpMeta.$watchers$) == null ? void 0 : _a2[attrName];
               entry == null ? void 0 : entry.forEach((callbackName) => {
                 if (instance[callbackName] != null) {
@@ -2495,7 +2513,7 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
-            if (BUILD14.reflect && m[0] & 512 /* ReflectAttr */) {
+            if (BUILD15.reflect && m[0] & 512 /* ReflectAttr */) {
               (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
             }
             return attrName;
@@ -2513,7 +2531,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
     hostRef.$flags$ |= 32 /* hasInitializedComponent */;
     const bundleId = cmpMeta.$lazyBundleId$;
-    if ((BUILD15.lazyLoad || BUILD15.hydrateClientSide) && bundleId) {
+    if ((BUILD16.lazyLoad || BUILD16.hydrateClientSide) && bundleId) {
       const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
       if (CstrImport && "then" in CstrImport) {
         const endLoad = uniqueTime(
@@ -2528,15 +2546,15 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       if (!Cstr) {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
-      if (BUILD15.member && !Cstr.isProxied) {
-        if (BUILD15.watchCallback) {
+      if (BUILD16.member && !Cstr.isProxied) {
+        if (BUILD16.watchCallback) {
           cmpMeta.$watchers$ = Cstr.watchers;
         }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
       const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
-      if (BUILD15.member) {
+      if (BUILD16.member) {
         hostRef.$flags$ |= 8 /* isConstructingInstance */;
       }
       try {
@@ -2544,10 +2562,10 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       } catch (e) {
         consoleError(e);
       }
-      if (BUILD15.member) {
+      if (BUILD16.member) {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
-      if (BUILD15.watchCallback) {
+      if (BUILD16.watchCallback) {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
@@ -2557,24 +2575,24 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       const cmpTag = elm.localName;
       customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
     }
-    if (BUILD15.style && Cstr && Cstr.style) {
+    if (BUILD16.style && Cstr && Cstr.style) {
       let style;
       if (typeof Cstr.style === "string") {
         style = Cstr.style;
-      } else if (BUILD15.mode && typeof Cstr.style !== "string") {
+      } else if (BUILD16.mode && typeof Cstr.style !== "string") {
         hostRef.$modeName$ = computeMode(elm);
         if (hostRef.$modeName$) {
           style = Cstr.style[hostRef.$modeName$];
         }
-        if (BUILD15.hydrateServerSide && hostRef.$modeName$) {
+        if (BUILD16.hydrateServerSide && hostRef.$modeName$) {
           elm.setAttribute("s-mode", hostRef.$modeName$);
         }
       }
       const scopeId2 = getScopeId(cmpMeta, hostRef.$modeName$);
       if (!styles.has(scopeId2)) {
         const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
-        if (!BUILD15.hydrateServerSide && BUILD15.shadowDom && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
-        BUILD15.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
+        if (!BUILD16.hydrateServerSide && BUILD16.shadowDom && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+        BUILD16.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
           style = await import("../client/shadow-css.js").then((m) => m.scopeCss(style, scopeId2));
         }
         registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
@@ -2584,14 +2602,14 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
   const ancestorComponent = hostRef.$ancestorComponent$;
   const schedule = () => scheduleUpdate(hostRef, true);
-  if (BUILD15.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) {
+  if (BUILD16.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) {
     ancestorComponent["s-rc"].push(schedule);
   } else {
     schedule();
   }
 };
 var fireConnectedCallback = (instance) => {
-  if (BUILD15.lazyLoad && BUILD15.connectedCallback) {
+  if (BUILD16.lazyLoad && BUILD16.connectedCallback) {
     safeCall(instance, "connectedCallback");
   }
 };
@@ -2602,41 +2620,41 @@ var connectedCallback = (elm) => {
     const hostRef = getHostRef(elm);
     const cmpMeta = hostRef.$cmpMeta$;
     const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
-    if (BUILD16.hostListenerTargetParent) {
+    if (BUILD17.hostListenerTargetParent) {
       addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
     }
     if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
       hostRef.$flags$ |= 1 /* hasConnected */;
       let hostId;
-      if (BUILD16.hydrateClientSide) {
+      if (BUILD17.hydrateClientSide) {
         hostId = elm.getAttribute(HYDRATE_ID);
         if (hostId) {
-          if (BUILD16.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            const scopeId2 = BUILD16.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(elm.shadowRoot, cmpMeta);
+          if (BUILD17.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            const scopeId2 = BUILD17.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(elm.shadowRoot, cmpMeta);
             elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
-          } else if (BUILD16.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
-            const scopeId2 = getScopeId(cmpMeta, BUILD16.mode ? elm.getAttribute("s-mode") : void 0);
+          } else if (BUILD17.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+            const scopeId2 = getScopeId(cmpMeta, BUILD17.mode ? elm.getAttribute("s-mode") : void 0);
             elm["s-sc"] = scopeId2;
           }
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
       }
-      if (BUILD16.slotRelocation && !hostId) {
-        if (BUILD16.hydrateServerSide || (BUILD16.slot || BUILD16.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+      if (BUILD17.slotRelocation && !hostId) {
+        if (BUILD17.hydrateServerSide || (BUILD17.slot || BUILD17.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
           setContentReference(elm);
         }
       }
-      if (BUILD16.asyncLoading) {
+      if (BUILD17.asyncLoading) {
         let ancestorComponent = elm;
         while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
-          if (BUILD16.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
+          if (BUILD17.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
             attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
             break;
           }
         }
       }
-      if (BUILD16.prop && !BUILD16.hydrateServerSide && cmpMeta.$members$) {
+      if (BUILD17.prop && !BUILD17.hydrateServerSide && cmpMeta.$members$) {
         Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
           if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
             const value = elm[memberName];
@@ -2645,7 +2663,7 @@ var connectedCallback = (elm) => {
           }
         });
       }
-      if (BUILD16.initializeNextTick) {
+      if (BUILD17.initializeNextTick) {
         nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
       } else {
         initializeComponent(elm, hostRef, cmpMeta);
@@ -2663,32 +2681,32 @@ var connectedCallback = (elm) => {
 };
 var setContentReference = (elm) => {
   const contentRefElm = elm["s-cr"] = doc.createComment(
-    BUILD16.isDebug ? `content-ref (host=${elm.localName})` : ""
+    BUILD17.isDebug ? `content-ref (host=${elm.localName})` : ""
   );
   contentRefElm["s-cn"] = true;
   insertBefore(elm, contentRefElm, elm.firstChild);
 };
 
 // src/runtime/disconnected-callback.ts
-import { BUILD as BUILD17 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD18 } from "@stencil/core/internal/app-data";
 var disconnectInstance = (instance) => {
-  if (BUILD17.lazyLoad && BUILD17.disconnectedCallback) {
+  if (BUILD18.lazyLoad && BUILD18.disconnectedCallback) {
     safeCall(instance, "disconnectedCallback");
   }
-  if (BUILD17.cmpDidUnload) {
+  if (BUILD18.cmpDidUnload) {
     safeCall(instance, "componentDidUnload");
   }
 };
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
-    if (BUILD17.hostListener) {
+    if (BUILD18.hostListener) {
       if (hostRef.$rmListeners$) {
         hostRef.$rmListeners$.map((rmListener) => rmListener());
         hostRef.$rmListeners$ = void 0;
       }
     }
-    if (!BUILD17.lazyLoad) {
+    if (!BUILD18.lazyLoad) {
       disconnectInstance(elm);
     } else if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
       disconnectInstance(hostRef.$lazyInstance$);
@@ -2707,36 +2725,36 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     $flags$: compactMeta[0],
     $tagName$: compactMeta[1]
   };
-  if (BUILD18.member) {
+  if (BUILD19.member) {
     cmpMeta.$members$ = compactMeta[2];
   }
-  if (BUILD18.hostListener) {
+  if (BUILD19.hostListener) {
     cmpMeta.$listeners$ = compactMeta[3];
   }
-  if (BUILD18.watchCallback) {
+  if (BUILD19.watchCallback) {
     cmpMeta.$watchers$ = Cstr.$watchers$;
   }
-  if (BUILD18.reflect) {
+  if (BUILD19.reflect) {
     cmpMeta.$attrsToReflect$ = [];
   }
-  if (BUILD18.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+  if (BUILD19.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
     cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
   }
-  if (BUILD18.experimentalSlotFixes) {
-    if (BUILD18.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+  if (BUILD19.experimentalSlotFixes) {
+    if (BUILD19.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
       patchPseudoShadowDom(Cstr.prototype);
     }
   } else {
-    if (BUILD18.slotChildNodesFix) {
+    if (BUILD19.slotChildNodesFix) {
       patchChildSlotNodes(Cstr.prototype);
     }
-    if (BUILD18.cloneNodeFix) {
+    if (BUILD19.cloneNodeFix) {
       patchCloneNode(Cstr.prototype);
     }
-    if (BUILD18.appendChildSlotFix) {
+    if (BUILD19.appendChildSlotFix) {
       patchSlotAppendChild(Cstr.prototype);
     }
-    if (BUILD18.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+    if (BUILD19.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
       patchTextContent(Cstr.prototype);
     }
   }
@@ -2754,20 +2772,20 @@ var proxyCustomElement = (Cstr, compactMeta) => {
         this.__hasHostListenerAttached = true;
       }
       connectedCallback(this);
-      if (BUILD18.connectedCallback && originalConnectedCallback) {
+      if (BUILD19.connectedCallback && originalConnectedCallback) {
         originalConnectedCallback.call(this);
       }
     },
     disconnectedCallback() {
       disconnectedCallback(this);
-      if (BUILD18.disconnectedCallback && originalDisconnectedCallback) {
+      if (BUILD19.disconnectedCallback && originalDisconnectedCallback) {
         originalDisconnectedCallback.call(this);
       }
     },
     __attachShadow() {
       if (supportsShadow) {
         if (!this.shadowRoot) {
-          if (BUILD18.shadowDelegatesFocus) {
+          if (BUILD19.shadowDelegatesFocus) {
             this.attachShadow({
               mode: "open",
               delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
@@ -2791,7 +2809,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
 };
 var forceModeUpdate = (elm) => {
-  if (BUILD18.style && BUILD18.mode && !BUILD18.lazyLoad) {
+  if (BUILD19.style && BUILD19.mode && !BUILD19.lazyLoad) {
     const mode = computeMode(elm);
     const hostRef = getHostRef(elm);
     if (hostRef.$modeName$ !== mode) {
@@ -2814,7 +2832,7 @@ var forceModeUpdate = (elm) => {
 };
 
 // src/runtime/bootstrap-lazy.ts
-import { BUILD as BUILD19 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD20 } from "@stencil/core/internal/app-data";
 
 // src/runtime/hmr-component.ts
 var hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
@@ -2826,7 +2844,7 @@ var hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
 // src/runtime/bootstrap-lazy.ts
 var bootstrapLazy = (lazyBundles, options = {}) => {
   var _a;
-  if (BUILD19.profile && performance.mark) {
+  if (BUILD20.profile && performance.mark) {
     performance.mark("st:app:start");
   }
   installDevTools();
@@ -2842,12 +2860,12 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let isBootstrapping = true;
   Object.assign(plt, options);
   plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", doc.baseURI).href;
-  if (BUILD19.asyncQueue) {
+  if (BUILD20.asyncQueue) {
     if (options.syncQueue) {
       plt.$flags$ |= 4 /* queueSync */;
     }
   }
-  if (BUILD19.hydrateClientSide) {
+  if (BUILD20.hydrateClientSide) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
   let hasSlotRelocation = false;
@@ -2863,22 +2881,22 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
         hasSlotRelocation = true;
       }
-      if (BUILD19.member) {
+      if (BUILD20.member) {
         cmpMeta.$members$ = compactMeta[2];
       }
-      if (BUILD19.hostListener) {
+      if (BUILD20.hostListener) {
         cmpMeta.$listeners$ = compactMeta[3];
       }
-      if (BUILD19.reflect) {
+      if (BUILD20.reflect) {
         cmpMeta.$attrsToReflect$ = [];
       }
-      if (BUILD19.watchCallback) {
+      if (BUILD20.watchCallback) {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
       }
-      if (BUILD19.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+      if (BUILD20.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
       }
-      const tagName = BUILD19.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
+      const tagName = BUILD20.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
         constructor(self) {
@@ -2886,10 +2904,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           this.hasRegisteredEventListeners = false;
           self = this;
           registerHost(self, cmpMeta);
-          if (BUILD19.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+          if (BUILD20.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             if (supportsShadow) {
               if (!self.shadowRoot) {
-                if (BUILD19.shadowDelegatesFocus) {
+                if (BUILD20.shadowDelegatesFocus) {
                   self.attachShadow({
                     mode: "open",
                     delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
@@ -2904,7 +2922,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
                   );
                 }
               }
-            } else if (!BUILD19.hydrateServerSide && !("shadowRoot" in self)) {
+            } else if (!BUILD20.hydrateServerSide && !("shadowRoot" in self)) {
               self.shadowRoot = self;
             }
           }
@@ -2932,28 +2950,28 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           return getHostRef(this).$onReadyPromise$;
         }
       };
-      if (BUILD19.experimentalSlotFixes) {
-        if (BUILD19.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+      if (BUILD20.experimentalSlotFixes) {
+        if (BUILD20.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
           patchPseudoShadowDom(HostElement.prototype);
         }
       } else {
-        if (BUILD19.slotChildNodesFix) {
+        if (BUILD20.slotChildNodesFix) {
           patchChildSlotNodes(HostElement.prototype);
         }
-        if (BUILD19.cloneNodeFix) {
+        if (BUILD20.cloneNodeFix) {
           patchCloneNode(HostElement.prototype);
         }
-        if (BUILD19.appendChildSlotFix) {
+        if (BUILD20.appendChildSlotFix) {
           patchSlotAppendChild(HostElement.prototype);
         }
-        if (BUILD19.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+        if (BUILD20.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
           patchTextContent(HostElement.prototype);
         }
       }
-      if (BUILD19.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */) {
+      if (BUILD20.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */) {
         HostElement.formAssociated = true;
       }
-      if (BUILD19.hotModuleReplacement) {
+      if (BUILD20.hotModuleReplacement) {
         HostElement.prototype["s-hmr"] = function(hmrVersionId) {
           hmrStart(this, cmpMeta, hmrVersionId);
         };
@@ -2972,7 +2990,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
     if (hasSlotRelocation) {
       dataStyles.textContent += SLOT_FB_CSS;
     }
-    if (BUILD19.invisiblePrehydration && (BUILD19.hydratedClass || BUILD19.hydratedAttribute)) {
+    if (BUILD20.invisiblePrehydration && (BUILD20.hydratedClass || BUILD20.hydratedAttribute)) {
       dataStyles.textContent += cmpTags.sort() + HYDRATED_CSS;
     }
     if (dataStyles.innerHTML.length) {
@@ -2988,7 +3006,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   if (deferredConnectedCallbacks.length) {
     deferredConnectedCallbacks.map((host) => host.connectedCallback());
   } else {
-    if (BUILD19.profile) {
+    if (BUILD20.profile) {
       plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30, "timeout"));
     } else {
       plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30));
@@ -3001,10 +3019,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 var Fragment = (_, children) => children;
 
 // src/runtime/host-listener.ts
-import { BUILD as BUILD20 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD21 } from "@stencil/core/internal/app-data";
 var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-  if (BUILD20.hostListener && listeners) {
-    if (BUILD20.hostListenerTargetParent) {
+  if (BUILD21.hostListener && listeners) {
+    if (BUILD21.hostListenerTargetParent) {
       if (attachParentListeners) {
         listeners = listeners.filter(([flags]) => flags & 32 /* TargetParent */);
       } else {
@@ -3012,7 +3030,7 @@ var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) =>
       }
     }
     listeners.map(([flags, name, method]) => {
-      const target = BUILD20.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
+      const target = BUILD21.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
       const handler = hostListenerProxy(hostRef, method);
       const opts = hostListenerOpts(flags);
       plt.ael(target, name, handler, opts);
@@ -3023,7 +3041,7 @@ var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) =>
 var hostListenerProxy = (hostRef, methodName) => (ev) => {
   var _a;
   try {
-    if (BUILD20.lazyLoad) {
+    if (BUILD21.lazyLoad) {
       if (hostRef.$flags$ & 256 /* isListenReady */) {
         (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
       } else {
@@ -3037,10 +3055,10 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
   }
 };
 var getHostListenerTarget = (elm, flags) => {
-  if (BUILD20.hostListenerTargetDocument && flags & 4 /* TargetDocument */) return doc;
-  if (BUILD20.hostListenerTargetWindow && flags & 8 /* TargetWindow */) return win;
-  if (BUILD20.hostListenerTargetBody && flags & 16 /* TargetBody */) return doc.body;
-  if (BUILD20.hostListenerTargetParent && flags & 32 /* TargetParent */ && elm.parentElement)
+  if (BUILD21.hostListenerTargetDocument && flags & 4 /* TargetDocument */) return doc;
+  if (BUILD21.hostListenerTargetWindow && flags & 8 /* TargetWindow */) return win;
+  if (BUILD21.hostListenerTargetBody && flags & 16 /* TargetBody */) return doc.body;
+  if (BUILD21.hostListenerTargetParent && flags & 32 /* TargetParent */ && elm.parentElement)
     return elm.parentElement;
   return elm;
 };
@@ -3218,7 +3236,7 @@ var hAsync = (nodeName, vnodeData, ...children) => {
 import { globalScripts } from "@stencil/core/internal/app-globals";
 
 // src/hydrate/platform/proxy-host-element.ts
-import { BUILD as BUILD21 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD22 } from "@stencil/core/internal/app-data";
 function proxyHostElement(elm, cmpMeta) {
   if (typeof elm.componentOnReady !== "function") {
     elm.componentOnReady = componentOnReady;
@@ -3227,7 +3245,7 @@ function proxyHostElement(elm, cmpMeta) {
     elm.forceUpdate = forceUpdate2;
   }
   if (!elm.shadowRoot && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
-    if (BUILD21.shadowDelegatesFocus) {
+    if (BUILD22.shadowDelegatesFocus) {
       elm.attachShadow({
         mode: "open",
         delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
@@ -3541,7 +3559,7 @@ function waitingOnElementsMsg(waitingElements) {
 }
 
 // src/hydrate/platform/index.ts
-import { BUILD as BUILD23, Env, NAMESPACE as NAMESPACE2 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD24, Env, NAMESPACE as NAMESPACE2 } from "@stencil/core/internal/app-data";
 var customError;
 var cmpModules = /* @__PURE__ */ new Map();
 var getModule = (tagName) => {
@@ -3627,7 +3645,7 @@ var plt = {
 var setPlatformHelpers = (helpers) => {
   Object.assign(plt, helpers);
 };
-var supportsShadow = BUILD22.shadowDom;
+var supportsShadow = BUILD23.shadowDom;
 var supportsListenerOptions = false;
 var supportsConstructableStylesheets = false;
 var hostRefs = /* @__PURE__ */ new WeakMap();
@@ -3656,7 +3674,7 @@ var Build = {
 var styles = /* @__PURE__ */ new Map();
 var modeResolutionChain = [];
 export {
-  BUILD23 as BUILD,
+  BUILD24 as BUILD,
   Build,
   Env,
   Fragment,