@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/esm/{index-Dx5skKSq.js → index-ai7aDzJN.js}

@@ -1,15 +1,11 @@
 const NAMESPACE = 'dso-toolkit';
-const BUILD = /* dso-toolkit */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, deserializer: false, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propChangeCallback: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, serializer: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true };
+const BUILD = /* dso-toolkit */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, deserializer: false, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propChangeCallback: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, serializer: false, shadowDelegatesFocus: false, shadowDom: true, shadowSlotAssignmentManual: false, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true };
 const Env = /* dso-toolkit */ {};
 
 /*
- Stencil Client Platform v4.39.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.43.0 | MIT Licensed | https://stenciljs.com
  */
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
+
 var Build = {
   isDev: BUILD.isDev ? true : false,
   isBrowser: true,
@@ -237,6 +233,9 @@ var supportsListenerOptions = /* @__PURE__ */ (() => {
 var promiseResolve = (v) => Promise.resolve(v);
 var supportsConstructableStylesheets = BUILD.constructableCSS ? /* @__PURE__ */ (() => {
   try {
+    if (!win.document.adoptedStyleSheets) {
+      return false;
+    }
     new CSSStyleSheet();
     return typeof new CSSStyleSheet().replaceSync === "function";
   } catch (e) {
@@ -324,176 +323,6 @@ var getAssetPath = (path) => {
 };
 var setAssetPath = (path) => plt.$resourcesUrl$ = path;
 
-// src/utils/helpers.ts
-var isDef = (v) => v != null && v !== void 0;
-var isComplexType = (o) => {
-  o = typeof o;
-  return o === "object" || o === "function";
-};
-
-// src/utils/query-nonce-meta-tag-content.ts
-function queryNonceMetaTagContent(doc) {
-  var _a, _b, _c;
-  return (_c = (_b = (_a = doc.head) == null ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : _b.getAttribute("content")) != null ? _c : void 0;
-}
-
-// src/utils/regular-expression.ts
-var escapeRegExpSpecialCharacters = (text) => {
-  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-};
-
-// src/utils/remote-value.ts
-var RemoteValue = class _RemoteValue {
-  /**
-   * Deserializes a LocalValue serialized object back to its original JavaScript representation
-   *
-   * @param serialized The serialized LocalValue object
-   * @returns The original JavaScript value/object
-   */
-  static fromLocalValue(serialized) {
-    const type = serialized[TYPE_CONSTANT];
-    const value = VALUE_CONSTANT in serialized ? serialized[VALUE_CONSTANT] : void 0;
-    switch (type) {
-      case "string" /* String */:
-        return value;
-      case "boolean" /* Boolean */:
-        return value;
-      case "bigint" /* BigInt */:
-        return BigInt(value);
-      case "undefined" /* Undefined */:
-        return void 0;
-      case "null" /* Null */:
-        return null;
-      case "number" /* Number */:
-        if (value === "NaN") return NaN;
-        if (value === "-0") return -0;
-        if (value === "Infinity") return Infinity;
-        if (value === "-Infinity") return -Infinity;
-        return value;
-      case "array" /* Array */:
-        return value.map((item) => _RemoteValue.fromLocalValue(item));
-      case "date" /* Date */:
-        return new Date(value);
-      case "map" /* Map */:
-        const map2 = /* @__PURE__ */ new Map();
-        for (const [key, val] of value) {
-          const deserializedKey = typeof key === "object" && key !== null ? _RemoteValue.fromLocalValue(key) : key;
-          const deserializedValue = _RemoteValue.fromLocalValue(val);
-          map2.set(deserializedKey, deserializedValue);
-        }
-        return map2;
-      case "object" /* Object */:
-        const obj = {};
-        for (const [key, val] of value) {
-          obj[key] = _RemoteValue.fromLocalValue(val);
-        }
-        return obj;
-      case "regexp" /* RegularExpression */:
-        const { pattern, flags } = value;
-        return new RegExp(pattern, flags);
-      case "set" /* Set */:
-        const set = /* @__PURE__ */ new Set();
-        for (const item of value) {
-          set.add(_RemoteValue.fromLocalValue(item));
-        }
-        return set;
-      case "symbol" /* Symbol */:
-        return Symbol(value);
-      default:
-        throw new Error(`Unsupported type: ${type}`);
-    }
-  }
-  /**
-   * Utility method to deserialize multiple LocalValues at once
-   *
-   * @param serializedValues Array of serialized LocalValue objects
-   * @returns Array of deserialized JavaScript values
-   */
-  static fromLocalValueArray(serializedValues) {
-    return serializedValues.map((value) => _RemoteValue.fromLocalValue(value));
-  }
-  /**
-   * Verifies if the given object matches the structure of a serialized LocalValue
-   *
-   * @param obj Object to verify
-   * @returns boolean indicating if the object has LocalValue structure
-   */
-  static isLocalValueObject(obj) {
-    if (typeof obj !== "object" || obj === null) {
-      return false;
-    }
-    if (!obj.hasOwnProperty(TYPE_CONSTANT)) {
-      return false;
-    }
-    const type = obj[TYPE_CONSTANT];
-    const hasTypeProperty = Object.values({ ...PrimitiveType, ...NonPrimitiveType }).includes(type);
-    if (!hasTypeProperty) {
-      return false;
-    }
-    if (type !== "null" /* Null */ && type !== "undefined" /* Undefined */) {
-      return obj.hasOwnProperty(VALUE_CONSTANT);
-    }
-    return true;
-  }
-};
-
-// src/utils/result.ts
-var result_exports = {};
-__export(result_exports, {
-  err: () => err,
-  map: () => map,
-  ok: () => ok,
-  unwrap: () => unwrap,
-  unwrapErr: () => unwrapErr
-});
-var ok = (value) => ({
-  isOk: true,
-  isErr: false,
-  value
-});
-var err = (value) => ({
-  isOk: false,
-  isErr: true,
-  value
-});
-function map(result, fn) {
-  if (result.isOk) {
-    const val = fn(result.value);
-    if (val instanceof Promise) {
-      return val.then((newVal) => ok(newVal));
-    } else {
-      return ok(val);
-    }
-  }
-  if (result.isErr) {
-    const value = result.value;
-    return err(value);
-  }
-  throw "should never get here";
-}
-var unwrap = (result) => {
-  if (result.isOk) {
-    return result.value;
-  } else {
-    throw result.value;
-  }
-};
-var unwrapErr = (result) => {
-  if (result.isErr) {
-    return result.value;
-  } else {
-    throw result.value;
-  }
-};
-
-// src/utils/serialize.ts
-function deserializeProperty(value) {
-  if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
-    return value;
-  }
-  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
-}
-
 // src/utils/style.ts
 function createStyleSheetIfNeededAndSupported(styles2) {
   return void 0;
@@ -503,10 +332,17 @@ function createStyleSheetIfNeededAndSupported(styles2) {
 var globalStyleSheet;
 function createShadowRoot(cmpMeta) {
   var _a;
-  const shadowRoot = BUILD.shadowDelegatesFocus ? this.attachShadow({
-    mode: "open",
-    delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
-  }) : this.attachShadow({ mode: "open" });
+  const opts = { mode: "open" };
+  if (BUILD.shadowDelegatesFocus) {
+    opts.delegatesFocus = !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */);
+  }
+  if (BUILD.shadowSlotAssignmentManual) {
+    const isManual = !!(cmpMeta.$flags$ & 1024 /* shadowSlotAssignmentManual */);
+    if (isManual) {
+      opts.slotAssignment = "manual";
+    }
+  }
+  const shadowRoot = this.attachShadow(opts);
   if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported()) != null ? _a : null;
   if (globalStyleSheet) {
     if (supportsMutableAdoptedStyleSheets) {
@@ -669,7 +505,8 @@ var patchPseudoShadowDom = (hostElementPrototype) => {
   patchSlotRemoveChild(hostElementPrototype);
 };
 var patchCloneNode = (HostElementPrototype) => {
-  const orgCloneNode = HostElementPrototype.cloneNode;
+  if (HostElementPrototype.__cloneNode) return;
+  const orgCloneNode = HostElementPrototype.__cloneNode = HostElementPrototype.cloneNode;
   HostElementPrototype.cloneNode = function(deep) {
     const srcNode = this;
     const isShadowDom = BUILD.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
@@ -714,6 +551,7 @@ var patchCloneNode = (HostElementPrototype) => {
   };
 };
 var patchSlotAppendChild = (HostElementPrototype) => {
+  if (HostElementPrototype.__appendChild) return;
   HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
   HostElementPrototype.appendChild = function(newChild) {
     const { slotName, slotNode } = findSlotFromSlottedNode(newChild, this);
@@ -731,6 +569,7 @@ var patchSlotAppendChild = (HostElementPrototype) => {
   };
 };
 var patchSlotRemoveChild = (ElementPrototype) => {
+  if (ElementPrototype.__removeChild) return;
   ElementPrototype.__removeChild = ElementPrototype.removeChild;
   ElementPrototype.removeChild = function(toRemove) {
     if (toRemove && typeof toRemove["s-sn"] !== "undefined") {
@@ -746,6 +585,7 @@ var patchSlotRemoveChild = (ElementPrototype) => {
   };
 };
 var patchSlotPrepend = (HostElementPrototype) => {
+  if (HostElementPrototype.__prepend) return;
   HostElementPrototype.__prepend = HostElementPrototype.prepend;
   HostElementPrototype.prepend = function(...newChildren) {
     newChildren.forEach((newChild) => {
@@ -772,6 +612,7 @@ var patchSlotPrepend = (HostElementPrototype) => {
   };
 };
 var patchSlotAppend = (HostElementPrototype) => {
+  if (HostElementPrototype.__append) return;
   HostElementPrototype.__append = HostElementPrototype.append;
   HostElementPrototype.append = function(...newChildren) {
     newChildren.forEach((newChild) => {
@@ -783,6 +624,7 @@ var patchSlotAppend = (HostElementPrototype) => {
   };
 };
 var patchSlotInsertAdjacentHTML = (HostElementPrototype) => {
+  if (HostElementPrototype.__insertAdjacentHTML) return;
   const originalInsertAdjacentHtml = HostElementPrototype.insertAdjacentHTML;
   HostElementPrototype.insertAdjacentHTML = function(position, text) {
     if (position !== "afterbegin" && position !== "beforeend") {
@@ -808,6 +650,7 @@ var patchSlotInsertAdjacentText = (HostElementPrototype) => {
   };
 };
 var patchInsertBefore = (HostElementPrototype) => {
+  if (HostElementPrototype.__insertBefore) return;
   const eleProto = HostElementPrototype;
   if (eleProto.__insertBefore) return;
   eleProto.__insertBefore = HostElementPrototype.insertBefore;
@@ -842,6 +685,7 @@ var patchInsertBefore = (HostElementPrototype) => {
   };
 };
 var patchSlotInsertAdjacentElement = (HostElementPrototype) => {
+  if (HostElementPrototype.__insertAdjacentElement) return;
   const originalInsertAdjacentElement = HostElementPrototype.insertAdjacentElement;
   HostElementPrototype.insertAdjacentElement = function(position, element) {
     if (position !== "afterbegin" && position !== "beforeend") {
@@ -1117,6 +961,14 @@ var installDevTools = () => {
     };
   }
 };
+
+// src/utils/query-nonce-meta-tag-content.ts
+function queryNonceMetaTagContent(doc) {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = doc.head) == null ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : _b.getAttribute("content")) != null ? _c : void 0;
+}
+
+// src/runtime/styles.ts
 var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
 var registerStyle = (scopeId2, cssText, allowCS) => {
   let style = styles.get(scopeId2);
@@ -1133,7 +985,7 @@ var registerStyle = (scopeId2, cssText, allowCS) => {
   styles.set(scopeId2, style);
 };
 var addStyle = (styleContainerNode, cmpMeta, mode) => {
-  var _a;
+  var _a, _b, _c;
   const scopeId2 = getScopeId(cmpMeta, mode);
   const style = styles.get(scopeId2);
   if (!BUILD.attachStyles || !win.document) {
@@ -1148,64 +1000,87 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
       if (!appliedStyles) {
         rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
       }
-      if (!appliedStyles.has(scopeId2)) {
-        if (BUILD.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
-          styleElm.innerHTML = style;
-        } else {
-          styleElm = win.document.createElement("style");
-          styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
-          if (nonce != null) {
-            styleElm.setAttribute("nonce", nonce);
-          }
-          if ((BUILD.hydrateServerSide || BUILD.hotModuleReplacement) && (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
-            styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
-          }
-          if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
-            if (styleContainerNode.nodeName === "HEAD") {
-              const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
-              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
-              styleContainerNode.insertBefore(
-                styleElm,
-                (referenceNode2 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
-              );
-            } else if ("host" in styleContainerNode) {
-              if (supportsConstructableStylesheets) {
-                const stylesheet = new CSSStyleSheet();
-                stylesheet.replaceSync(style);
-                if (supportsMutableAdoptedStyleSheets) {
-                  styleContainerNode.adoptedStyleSheets.unshift(stylesheet);
-                } else {
-                  styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
-                }
+      const existingStyleElm = (BUILD.hydrateClientSide || BUILD.hotModuleReplacement) && styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`);
+      if (existingStyleElm) {
+        existingStyleElm.textContent = style;
+      } else if (!appliedStyles.has(scopeId2)) {
+        styleElm = win.document.createElement("style");
+        styleElm.textContent = style;
+        const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
+        if (nonce != null) {
+          styleElm.setAttribute("nonce", nonce);
+        }
+        if ((BUILD.hydrateServerSide || BUILD.hotModuleReplacement) && (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */ || cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
+          styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
+        }
+        if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
+          if (styleContainerNode.nodeName === "HEAD") {
+            const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
+            const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
+            styleContainerNode.insertBefore(
+              styleElm,
+              (referenceNode2 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
+            );
+          } else if ("host" in styleContainerNode) {
+            if (supportsConstructableStylesheets) {
+              const currentWindow = (_b = styleContainerNode.defaultView) != null ? _b : styleContainerNode.ownerDocument.defaultView;
+              const stylesheet = new currentWindow.CSSStyleSheet();
+              stylesheet.replaceSync(style);
+              if (supportsMutableAdoptedStyleSheets) {
+                styleContainerNode.adoptedStyleSheets.unshift(stylesheet);
               } else {
-                const existingStyleContainer = styleContainerNode.querySelector("style");
-                if (existingStyleContainer) {
-                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
-                } else {
-                  styleContainerNode.prepend(styleElm);
-                }
+                styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
               }
             } else {
-              styleContainerNode.append(styleElm);
+              const existingStyleContainer = styleContainerNode.querySelector("style");
+              if (existingStyleContainer) {
+                existingStyleContainer.textContent = style + existingStyleContainer.textContent;
+              } else {
+                styleContainerNode.prepend(styleElm);
+              }
             }
+          } else {
+            styleContainerNode.append(styleElm);
           }
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            styleContainerNode.insertBefore(styleElm, null);
-          }
+        }
+        if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+          styleContainerNode.insertBefore(styleElm, null);
         }
         if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
-          styleElm.innerHTML += SLOT_FB_CSS;
+          styleElm.textContent += SLOT_FB_CSS;
         }
         if (appliedStyles) {
           appliedStyles.add(scopeId2);
         }
       }
-    } else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
-      if (supportsMutableAdoptedStyleSheets) {
-        styleContainerNode.adoptedStyleSheets.push(style);
-      } else {
-        styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+    } else if (BUILD.constructableCSS) {
+      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+      if (!appliedStyles) {
+        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
+      }
+      if (!appliedStyles.has(scopeId2)) {
+        const currentWindow = (_c = styleContainerNode.defaultView) != null ? _c : styleContainerNode.ownerDocument.defaultView;
+        let stylesheet;
+        if (style.constructor === currentWindow.CSSStyleSheet) {
+          stylesheet = style;
+        } else {
+          stylesheet = new currentWindow.CSSStyleSheet();
+          for (let i2 = 0; i2 < style.cssRules.length; i2++) {
+            stylesheet.insertRule(style.cssRules[i2].cssText, i2);
+          }
+        }
+        if (supportsMutableAdoptedStyleSheets) {
+          styleContainerNode.adoptedStyleSheets.push(stylesheet);
+        } else {
+          styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, stylesheet];
+        }
+        appliedStyles.add(scopeId2);
+        if (BUILD.hydrateClientSide && "host" in styleContainerNode) {
+          const ssrStyleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`);
+          if (ssrStyleElm) {
+            writeTask(() => ssrStyleElm.remove());
+          }
+        }
       }
     }
   }
@@ -1239,6 +1114,15 @@ var hydrateScopedToShadow = () => {
     registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
   }
 };
+
+// src/utils/helpers.ts
+var isDef = (v) => v != null && v !== void 0;
+var isComplexType = (o) => {
+  o = typeof o;
+  return o === "object" || o === "function";
+};
+
+// src/runtime/vdom/h.ts
 var h = (nodeName, vnodeData, ...children) => {
   if (typeof nodeName === "string") {
     nodeName = transformTag(nodeName);
@@ -1318,7 +1202,8 @@ var newVNode = (tag, text) => {
   const vnode = {
     $flags$: 0,
     $tag$: tag,
-    $text$: text,
+    // Normalize undefined to null to prevent rendering "undefined" as text
+    $text$: text != null ? text : null,
     $elm$: null,
     $children$: null
   };
@@ -1382,7 +1267,7 @@ var validateInputProperties = (inputElm) => {
 
 // src/runtime/client-hydrate.ts
 var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const endHydrate = createTime("hydrateClient", tagName);
   const shadowRoot = hostElm.shadowRoot;
   const childRenderNodes = [];
@@ -1438,7 +1323,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         );
         const styleSheet = win.document.querySelector(`style[sty-id="${scopeId3}"]`);
         if (styleSheet) {
-          hostElm.shadowRoot.append(styleSheet.cloneNode(true));
+          shadowRootNodes.unshift(styleSheet.cloneNode(true));
         }
       }
     }
@@ -1475,6 +1360,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   let snGroupIdx;
   let snGroupLen;
   let slottedItem;
+  let currentPos = 0;
   for (snIndex; snIndex < snLen; snIndex++) {
     slotGroup = slottedNodes[snIndex];
     if (!slotGroup || !slotGroup.length) continue;
@@ -1488,7 +1374,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       if (!hosts[slottedItem.hostId]) continue;
       const hostEle = hosts[slottedItem.hostId];
       if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
-        hostEle.appendChild(slottedItem.node);
+        hostEle.insertBefore(slottedItem.node, (_c = (_b = slotGroup[snGroupIdx - 1]) == null ? void 0 : _b.node) == null ? void 0 : _c.nextSibling);
       }
       if (!hostEle.shadowRoot || !shadowRoot) {
         if (!slottedItem.slot["s-cr"]) {
@@ -1499,14 +1385,15 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
             slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
           }
         }
-        addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
-        if (((_b = slottedItem.node.parentElement) == null ? void 0 : _b.shadowRoot) && slottedItem.node["getAttribute"] && slottedItem.node.getAttribute("slot")) {
+        addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"] || currentPos);
+        if (((_d = slottedItem.node.parentElement) == null ? void 0 : _d.shadowRoot) && slottedItem.node["getAttribute"] && slottedItem.node.getAttribute("slot")) {
           slottedItem.node.removeAttribute("slot");
         }
         if (BUILD.experimentalSlotFixes) {
           patchSlottedNode(slottedItem.node);
         }
       }
+      currentPos = (slottedItem.node["s-oo"] || currentPos) + 1;
     }
   }
   if (BUILD.scoped && scopeId2 && slotNodes.length) {
@@ -1514,7 +1401,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
     });
   }
-  if (BUILD.shadowDom && shadowRoot) {
+  if (BUILD.shadowDom && shadowRoot && !shadowRoot.childNodes.length) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
     if (rnLen) {
@@ -1528,7 +1415,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
           if (node.nodeType === 1 /* ElementNode */ && node.slot && node.hidden) {
             node.removeAttribute("hidden");
-          } else if (node.nodeType === 8 /* CommentNode */ && !node.nodeValue || node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+          } else if (node.nodeType === 8 /* CommentNode */ && !node.nodeValue) {
             node.parentNode.removeChild(node);
           }
         }
@@ -1695,10 +1582,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
     vnode.$elm$ = node;
     vnode.$index$ = "0";
     parentVNode.$children$ = [vnode];
-  } else {
-    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim() && !node["s-nr"]) {
-      node.remove();
-    }
   }
   return parentVNode;
 };
@@ -1801,6 +1684,11 @@ var findCorrespondingNode = (node, type) => {
   return sibling;
 };
 
+// src/utils/regular-expression.ts
+var escapeRegExpSpecialCharacters = (text) => {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+
 // src/utils/shadow-css.ts
 /**
  * @license
@@ -1866,9 +1754,6 @@ var createSupportsRuleRe = (selector) => {
     "g"
   );
 };
-var _colonSlottedRe = createSupportsRuleRe("::slotted");
-var _colonHostRe = createSupportsRuleRe(":host");
-var _colonHostContextRe = createSupportsRuleRe(":host-context");
 var _commentRe = /\/\*\s*[\s\S]*?\*\//g;
 var stripComments = (input) => {
   return input.replace(_commentRe, "");
@@ -1946,6 +1831,9 @@ var insertPolyfillHostInCssText = (cssText) => {
     supportsBlocks.push(selectorContent);
     return `@supports selector(${placeholder})`;
   });
+  const _colonSlottedRe = createSupportsRuleRe("::slotted");
+  const _colonHostRe = createSupportsRuleRe(":host");
+  const _colonHostContextRe = createSupportsRuleRe(":host-context");
   cssText = cssText.replace(_colonHostContextRe, `$1${_polyfillHostContext}`).replace(_colonHostRe, `$1${_polyfillHost}`).replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
   supportsBlocks.forEach((originalSelector, index) => {
     cssText = cssText.replace(`__supports_${index}__`, originalSelector);
@@ -2200,7 +2088,7 @@ var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
     });
   }
   scoped.slottedSelectors.forEach((slottedSelector) => {
-    const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector), "g");
+    const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector) + "(?=\\s*[,{]|$)", "g");
     cssText = cssText.replace(regex, slottedSelector.updatedSelector);
   });
   cssText = expandPartSelectors(cssText);
@@ -2214,6 +2102,111 @@ var getMode = (ref) => {
   var _a;
   return (_a = getHostRef(ref)) == null ? void 0 : _a.$modeName$;
 };
+
+// src/utils/remote-value.ts
+var RemoteValue = class _RemoteValue {
+  /**
+   * Deserializes a LocalValue serialized object back to its original JavaScript representation
+   *
+   * @param serialized The serialized LocalValue object
+   * @returns The original JavaScript value/object
+   */
+  static fromLocalValue(serialized) {
+    const type = serialized[TYPE_CONSTANT];
+    const value = VALUE_CONSTANT in serialized ? serialized[VALUE_CONSTANT] : void 0;
+    switch (type) {
+      case "string" /* String */:
+        return value;
+      case "boolean" /* Boolean */:
+        return value;
+      case "bigint" /* BigInt */:
+        return BigInt(value);
+      case "undefined" /* Undefined */:
+        return void 0;
+      case "null" /* Null */:
+        return null;
+      case "number" /* Number */:
+        if (value === "NaN") return NaN;
+        if (value === "-0") return -0;
+        if (value === "Infinity") return Infinity;
+        if (value === "-Infinity") return -Infinity;
+        return value;
+      case "array" /* Array */:
+        return value.map((item) => _RemoteValue.fromLocalValue(item));
+      case "date" /* Date */:
+        return new Date(value);
+      case "map" /* Map */:
+        const map = /* @__PURE__ */ new Map();
+        for (const [key, val] of value) {
+          const deserializedKey = typeof key === "object" && key !== null ? _RemoteValue.fromLocalValue(key) : key;
+          const deserializedValue = _RemoteValue.fromLocalValue(val);
+          map.set(deserializedKey, deserializedValue);
+        }
+        return map;
+      case "object" /* Object */:
+        const obj = {};
+        for (const [key, val] of value) {
+          obj[key] = _RemoteValue.fromLocalValue(val);
+        }
+        return obj;
+      case "regexp" /* RegularExpression */:
+        const { pattern, flags } = value;
+        return new RegExp(pattern, flags);
+      case "set" /* Set */:
+        const set = /* @__PURE__ */ new Set();
+        for (const item of value) {
+          set.add(_RemoteValue.fromLocalValue(item));
+        }
+        return set;
+      case "symbol" /* Symbol */:
+        return Symbol(value);
+      default:
+        throw new Error(`Unsupported type: ${type}`);
+    }
+  }
+  /**
+   * Utility method to deserialize multiple LocalValues at once
+   *
+   * @param serializedValues Array of serialized LocalValue objects
+   * @returns Array of deserialized JavaScript values
+   */
+  static fromLocalValueArray(serializedValues) {
+    return serializedValues.map((value) => _RemoteValue.fromLocalValue(value));
+  }
+  /**
+   * Verifies if the given object matches the structure of a serialized LocalValue
+   *
+   * @param obj Object to verify
+   * @returns boolean indicating if the object has LocalValue structure
+   */
+  static isLocalValueObject(obj) {
+    if (typeof obj !== "object" || obj === null) {
+      return false;
+    }
+    if (!obj.hasOwnProperty(TYPE_CONSTANT)) {
+      return false;
+    }
+    const type = obj[TYPE_CONSTANT];
+    const hasTypeProperty = Object.values({ ...PrimitiveType, ...NonPrimitiveType }).includes(type);
+    if (!hasTypeProperty) {
+      return false;
+    }
+    if (type !== "null" /* Null */ && type !== "undefined" /* Undefined */) {
+      return obj.hasOwnProperty(VALUE_CONSTANT);
+    }
+    return true;
+  }
+};
+
+// src/utils/serialize.ts
+function deserializeProperty(value) {
+  if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
+    return value;
+  }
+  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+}
+
+// src/runtime/parse-property-value.ts
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   if ((BUILD.hydrateClientSide || BUILD.hydrateServerSide) && typeof propValue === "string" && propValue.startsWith(SERIALIZED_PREFIX)) {
     propValue = deserializeProperty(propValue);
@@ -2309,7 +2302,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     }
   } else if (BUILD.vdomKey && memberName === "key") ; else if (BUILD.vdomRef && memberName === "ref") {
     if (newValue) {
-      newValue(elm);
+      queueRefAttachment(newValue, elm);
     }
   } else if (BUILD.vdomListener && (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
@@ -2329,6 +2322,36 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         plt.ael(elm, memberName, newValue, capture);
       }
     }
+  } else if (BUILD.vdomPropOrAttr && memberName[0] === "a" && memberName.startsWith("attr:")) {
+    const propName = memberName.slice(5);
+    let attrName;
+    if (BUILD.member) {
+      const hostRef = getHostRef(elm);
+      if (hostRef && hostRef.$cmpMeta$ && hostRef.$cmpMeta$.$members$) {
+        const memberMeta = hostRef.$cmpMeta$.$members$[propName];
+        if (memberMeta && memberMeta[1]) {
+          attrName = memberMeta[1];
+        }
+      }
+    }
+    if (!attrName) {
+      attrName = propName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(attrName) === "") {
+        elm.removeAttribute(attrName);
+      }
+    } else {
+      elm.setAttribute(attrName, newValue === true ? "" : newValue);
+    }
+    return;
+  } else if (BUILD.vdomPropOrAttr && memberName[0] === "p" && memberName.startsWith("prop:")) {
+    const propName = memberName.slice(5);
+    try {
+      elm[propName] = newValue;
+    } catch (e) {
+    }
+    return;
   } else if (BUILD.vdomPropOrAttr) {
     const isComplex = isComplexType(newValue);
     if ((isProp || isComplex && newValue !== null) && !isSvg) {
@@ -2337,7 +2360,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
           const n = newValue == null ? "" : newValue;
           if (memberName === "list") {
             isProp = false;
-          } else if (oldValue == null || elm[memberName] != n) {
+          } else if (oldValue == null || elm[memberName] !== n) {
             if (typeof elm.__lookupSetter__(memberName) === "function") {
               elm[memberName] = n;
             } else {
@@ -2438,6 +2461,8 @@ var useNativeShadowDom = false;
 var checkSlotFallbackVisibility = false;
 var checkSlotRelocate = false;
 var isSvgMode = false;
+var refCallbacksToRemove = [];
+var refCallbacksToAttach = [];
 var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   var _a;
   const newVNode2 = newParentVNode.$children$[childIndex];
@@ -2465,7 +2490,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       `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 (BUILD.vdomText && newVNode2.$text$ !== null) {
+  if (BUILD.vdomText && newVNode2.$text$ != null) {
     elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
   } else if (BUILD.slotRelocation && newVNode2.$flags$ & 1 /* isSlotReference */) {
     elm = newVNode2.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode2) : win.document.createTextNode("");
@@ -2477,9 +2502,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       isSvgMode = newVNode2.$tag$ === "svg";
     }
     if (!win.document) {
-      throw new Error(
-        "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
-      );
+      throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");
     }
     elm = newVNode2.$elm$ = BUILD.svg ? win.document.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
@@ -2497,10 +2520,11 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       elm.classList.add(elm["s-si"] = scopeId);
     }
     if (newVNode2.$children$) {
+      const appendTarget = newVNode2.$tag$ === "template" ? elm.content : elm;
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
         childNode = createElm(oldParentVNode, newVNode2, i2);
         if (childNode) {
-          elm.appendChild(childNode);
+          appendTarget.appendChild(childNode);
         }
       }
     }
@@ -2522,11 +2546,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       patchSlotNode(elm);
       oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
       if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
-        if (BUILD.experimentalSlotFixes) {
-          relocateToHostRoot(oldParentVNode.$elm$);
-        } else {
-          putBackInOriginalLocation(oldParentVNode.$elm$, false);
-        }
+        relocateToHostRoot(oldParentVNode.$elm$);
       }
       if (BUILD.scoped || BUILD.hydrateServerSide && 128 /* shadowNeedsScopedCss */) {
         addRemoveSlotScopedClass(contentRef, elm, newParentVNode.$elm$, oldParentVNode == null ? void 0 : oldParentVNode.$elm$);
@@ -2558,7 +2578,7 @@ var relocateToHostRoot = (parentElm) => {
 var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ |= 1 /* isTmpDisconnected */;
   const oldSlotChildNodes = Array.from(parentElm.__childNodes || parentElm.childNodes);
-  if (parentElm["s-sr"] && BUILD.experimentalSlotFixes) {
+  if (parentElm["s-sr"]) {
     let node = parentElm;
     while (node = node.nextSibling) {
       if (node && node["s-sn"] === parentElm["s-sn"] && node["s-sh"] === hostTagName) {
@@ -2587,6 +2607,9 @@ var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
   if (BUILD.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
     containerElm = containerElm.shadowRoot;
   }
+  if (parentVNode.$tag$ === "template") {
+    containerElm = containerElm.content;
+  }
   for (; startIdx <= endIdx; ++startIdx) {
     if (vnodes[startIdx]) {
       childNode = createElm(null, parentVNode, startIdx);
@@ -2630,6 +2653,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
   let newEndVnode = newCh[newEndIdx];
   let node;
   let elmToMove;
+  const containerElm = newVNode2.$tag$ === "template" ? parentElm.content : parentElm;
   while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
     if (oldStartVnode == null) {
       oldStartVnode = oldCh[++oldStartIdx];
@@ -2652,7 +2676,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
       }
       patch(oldStartVnode, newEndVnode, isInitialRender);
-      insertBefore(parentElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+      insertBefore(containerElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
       oldStartVnode = oldCh[++oldStartIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
@@ -2660,7 +2684,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
       }
       patch(oldEndVnode, newStartVnode, isInitialRender);
-      insertBefore(parentElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
+      insertBefore(containerElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
       oldEndVnode = oldCh[--oldEndIdx];
       newStartVnode = newCh[++newStartIdx];
     } else {
@@ -2736,13 +2760,13 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   let defaultHolder;
-  if (!BUILD.vdomText || text === null) {
+  if (!BUILD.vdomText || text == null) {
     if (BUILD.svg) {
       isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
     }
     if (BUILD.vdomAttribute || BUILD.reflect) {
       if (BUILD.slot && tag === "slot" && !useNativeShadowDom) {
-        if (BUILD.experimentalSlotFixes && oldVNode.$name$ !== newVNode2.$name$) {
+        if (oldVNode.$name$ !== newVNode2.$name$) {
           newVNode2.$elm$["s-sn"] = newVNode2.$name$ || "";
           relocateToHostRoot(newVNode2.$elm$.parentElement);
         }
@@ -2785,7 +2809,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"] && (!BUILD.experimentalSlotFixes || !node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
+        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
           if (isNodeLocatedInSlot(node, slotName)) {
             let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
             checkSlotFallbackVisibility = true;
@@ -2825,23 +2849,40 @@ var markSlotContentForRelocation = (elm) => {
 };
 var nullifyVNodeRefs = (vNode) => {
   if (BUILD.vdomRef) {
-    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    if (vNode.$attrs$ && vNode.$attrs$.ref) {
+      refCallbacksToRemove.push(() => vNode.$attrs$.ref(null));
+    }
     vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
   }
 };
-var insertBefore = (parent, newNode, reference) => {
-  if (BUILD.scoped && typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
-    addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
-  } else if (BUILD.experimentalSlotFixes && typeof newNode["s-sn"] === "string") {
-    if (parent.getRootNode().nodeType !== 11 /* DOCUMENT_FRAGMENT_NODE */) {
-      patchParentNode(newNode);
+var queueRefAttachment = (refCallback, elm) => {
+  if (BUILD.vdomRef) {
+    refCallbacksToAttach.push(() => refCallback(elm));
+  }
+};
+var flushQueuedRefCallbacks = () => {
+  if (BUILD.vdomRef) {
+    refCallbacksToRemove.forEach((cb) => cb());
+    refCallbacksToRemove.length = 0;
+    refCallbacksToAttach.forEach((cb) => cb());
+    refCallbacksToAttach.length = 0;
+  }
+};
+var insertBefore = (parent, newNode, reference, isInitialLoad) => {
+  if (BUILD.slotRelocation) {
+    if (BUILD.scoped && typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
+      addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
+    } else if (typeof newNode["s-sn"] === "string") {
+      if (BUILD.experimentalSlotFixes && parent.getRootNode().nodeType !== 11 /* DOCUMENT_FRAGMENT_NODE */) {
+        patchParentNode(newNode);
+      }
+      parent.insertBefore(newNode, reference);
+      const { slotNode } = findSlotFromSlottedNode(newNode);
+      if (slotNode && !isInitialLoad) dispatchSlotChangeEvent(slotNode);
+      return newNode;
     }
-    parent.insertBefore(newNode, reference);
-    const { slotNode } = findSlotFromSlottedNode(newNode);
-    if (slotNode) dispatchSlotChangeEvent(slotNode);
-    return newNode;
   }
-  if (BUILD.experimentalSlotFixes && parent.__insertBefore) {
+  if (parent.__insertBefore) {
     return parent.__insertBefore(newNode, reference);
   } else {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
@@ -2929,19 +2970,27 @@ render() {
         if (!nodeToRelocate["s-ol"] && win.document) {
           const orgLocationNode = BUILD.isDebug || BUILD.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : win.document.createTextNode("");
           orgLocationNode["s-nr"] = nodeToRelocate;
-          insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
+          insertBefore(
+            nodeToRelocate.parentNode,
+            nodeToRelocate["s-ol"] = orgLocationNode,
+            nodeToRelocate,
+            isInitialLoad
+          );
         }
       }
       for (const relocateData of relocateNodes) {
         const nodeToRelocate = relocateData.$nodeToRelocate$;
         const slotRefNode = relocateData.$slotRefNode$;
+        if (nodeToRelocate.nodeType === 1 /* ElementNode */ && isInitialLoad) {
+          nodeToRelocate["s-ih"] = (_a = nodeToRelocate.hidden) != null ? _a : false;
+        }
         if (slotRefNode) {
           const parentNodeRef = slotRefNode.parentNode;
           let insertBeforeNode = slotRefNode.nextSibling;
-          if (!BUILD.hydrateServerSide && (!BUILD.experimentalSlotFixes || insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */)) {
-            let orgLocationNode = (_a = nodeToRelocate["s-ol"]) == null ? void 0 : _a.previousSibling;
+          if (!BUILD.hydrateServerSide && insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */) {
+            let orgLocationNode = (_b = nodeToRelocate["s-ol"]) == null ? void 0 : _b.previousSibling;
             while (orgLocationNode) {
-              let refNode = (_b = orgLocationNode["s-nr"]) != null ? _b : null;
+              let refNode = (_c = orgLocationNode["s-nr"]) != null ? _c : null;
               if (refNode && refNode["s-sn"] === nodeToRelocate["s-sn"] && parentNodeRef === (refNode.__parentNode || refNode.parentNode)) {
                 refNode = refNode.nextSibling;
                 while (refNode === nodeToRelocate || (refNode == null ? void 0 : refNode["s-sr"])) {
@@ -2959,23 +3008,26 @@ render() {
           const nextSibling = nodeToRelocate.__nextSibling || nodeToRelocate.nextSibling;
           if (!insertBeforeNode && parentNodeRef !== parent || nextSibling !== insertBeforeNode) {
             if (nodeToRelocate !== insertBeforeNode) {
-              if (!BUILD.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
-                nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
+              insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode, isInitialLoad);
+              if (nodeToRelocate.nodeType === 8 /* CommentNode */ && nodeToRelocate.nodeValue.startsWith("s-nt-")) {
+                const textNode = win.document.createTextNode(nodeToRelocate.nodeValue.replace(/^s-nt-/, ""));
+                textNode["s-hn"] = nodeToRelocate["s-hn"];
+                textNode["s-sn"] = nodeToRelocate["s-sn"];
+                textNode["s-sh"] = nodeToRelocate["s-sh"];
+                textNode["s-sr"] = nodeToRelocate["s-sr"];
+                textNode["s-ol"] = nodeToRelocate["s-ol"];
+                textNode["s-ol"]["s-nr"] = textNode;
+                insertBefore(nodeToRelocate.parentNode, textNode, nodeToRelocate, isInitialLoad);
+                nodeToRelocate.parentNode.removeChild(nodeToRelocate);
               }
-              insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
               if (nodeToRelocate.nodeType === 1 /* ElementNode */ && nodeToRelocate.tagName !== "SLOT-FB") {
-                nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : false;
+                nodeToRelocate.hidden = (_d = nodeToRelocate["s-ih"]) != null ? _d : false;
               }
             }
           }
           nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](slotRefNode);
-        } else {
-          if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
-            if (isInitialLoad) {
-              nodeToRelocate["s-ih"] = (_d = nodeToRelocate.hidden) != null ? _d : false;
-            }
-            nodeToRelocate.hidden = true;
-          }
+        } else if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
+          nodeToRelocate.hidden = true;
         }
       }
     }
@@ -2985,18 +3037,26 @@ render() {
     plt.$flags$ &= -2 /* isTmpDisconnected */;
     relocateNodes.length = 0;
   }
-  if (BUILD.experimentalScopedSlotChanges && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+  if (BUILD.slotRelocation && !useNativeShadowDom && !(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && hostElm["s-cr"]) {
     const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
     for (const childNode of children) {
-      if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"] && childNode.nodeType === 1 /* ElementNode */) {
+      if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
         if (isInitialLoad && childNode["s-ih"] == null) {
           childNode["s-ih"] = (_e = childNode.hidden) != null ? _e : false;
         }
-        childNode.hidden = true;
+        if (childNode.nodeType === 1 /* ElementNode */) {
+          childNode.hidden = true;
+        } else if (childNode.nodeType === 3 /* TextNode */ && !!childNode.nodeValue.trim()) {
+          const textCommentNode = win.document.createComment("s-nt-" + childNode.nodeValue);
+          textCommentNode["s-sn"] = childNode["s-sn"];
+          insertBefore(childNode.parentNode, textCommentNode, childNode, isInitialLoad);
+          childNode.parentNode.removeChild(childNode);
+        }
       }
     }
   }
   contentRef = void 0;
+  flushQueuedRefCallbacks();
 };
 var slotReferenceDebugNode = (slotVNode) => {
   var _a;
@@ -3054,6 +3114,10 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   let maybePromise;
   if (isInitialLoad) {
     if (BUILD.lazyLoad) {
+      if (BUILD.slotRelocation && hostRef.$deferredConnectedCallback$) {
+        hostRef.$deferredConnectedCallback$ = false;
+        safeCall(instance, "connectedCallback", void 0, elm);
+      }
       if (BUILD.hostListener) {
         hostRef.$flags$ |= 256 /* isListenReady */;
         if (hostRef.$queuedListeners$) {
@@ -3076,8 +3140,8 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   endSchedule();
   return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
-var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn).catch((err2) => {
-  console.error(err2);
+var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn).catch((err) => {
+  console.error(err);
   fn();
 }) : fn();
 var isPromisey = (maybePromise) => maybePromise instanceof Promise || maybePromise && maybePromise.then && typeof maybePromise.then === "function";
@@ -3128,7 +3192,7 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
     if (childrenPromises.length === 0) {
       postUpdate();
     } else {
-      Promise.all(childrenPromises).then(postUpdate);
+      Promise.all(childrenPromises).then(postUpdate).catch(postUpdate);
       hostRef.$flags$ |= 4 /* isWaitingForChildren */;
       childrenPromises.length = 0;
     }
@@ -3327,12 +3391,22 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   if ((!BUILD.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
     if (BUILD.serializer && BUILD.reflect && cmpMeta.$attrsToReflect$) {
-      if (instance && cmpMeta.$serializers$ && cmpMeta.$serializers$[propName]) {
-        let attrVal = newVal;
-        for (const methodName of cmpMeta.$serializers$[propName]) {
-          attrVal = instance[methodName](attrVal, propName);
+      if (cmpMeta.$serializers$ && cmpMeta.$serializers$[propName]) {
+        const runSerializer = (inst) => {
+          let attrVal = newVal;
+          for (const serializer of cmpMeta.$serializers$[propName]) {
+            const [[methodName]] = Object.entries(serializer);
+            attrVal = inst[methodName](attrVal, propName);
+          }
+          hostRef.$serializerValues$.set(propName, attrVal);
+        };
+        if (instance) {
+          runSerializer(instance);
+        } else {
+          hostRef.$fetchedCbList$.push(() => {
+            runSerializer(hostRef.$lazyInstance$);
+          });
         }
-        hostRef.$serializerValues$.set(propName, attrVal);
       }
     }
     if (BUILD.isDev) {
@@ -3358,25 +3432,35 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
         );
       }
     }
-    if (!BUILD.lazyLoad || instance) {
-      if (BUILD.propChangeCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
-        const watchMethods = cmpMeta.$watchers$[propName];
-        if (watchMethods) {
-          watchMethods.map((watchMethodName) => {
-            try {
-              instance[watchMethodName](newVal, oldVal, propName);
-            } catch (e) {
-              consoleError(e, elm);
+    if (BUILD.propChangeCallback && cmpMeta.$watchers$) {
+      const watchMethods = cmpMeta.$watchers$[propName];
+      if (watchMethods) {
+        watchMethods.map((watcher) => {
+          try {
+            const [[watchMethodName, watcherFlags]] = Object.entries(watcher);
+            if (flags & 128 /* isWatchReady */ || watcherFlags & 1 /* Immediate */) {
+              if (!instance) {
+                hostRef.$fetchedCbList$.push(() => {
+                  hostRef.$lazyInstance$[watchMethodName](newVal, oldVal, propName);
+                });
+              } else {
+                instance[watchMethodName](newVal, oldVal, propName);
+              }
             }
-          });
-        }
-      }
-      if (BUILD.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
-        if (instance.componentShouldUpdate) {
-          if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
-            return;
+          } catch (e) {
+            consoleError(e, elm);
           }
+        });
+      }
+    }
+    if (BUILD.updatable && flags & 2 /* hasRendered */) {
+      if (instance.componentShouldUpdate) {
+        const shouldUpdate = instance.componentShouldUpdate(newVal, oldVal, propName);
+        if (shouldUpdate === false && !(flags & 16 /* isQueuedForUpdate */)) {
+          return;
         }
+      }
+      if (!(flags & 16 /* isQueuedForUpdate */)) {
         scheduleUpdate(hostRef, false);
       }
     }
@@ -3561,7 +3645,8 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
                 this[propName] = deserializeVal;
               }
             };
-            for (const methodName of cmpMeta.$deserializers$[propName]) {
+            for (const deserializer of cmpMeta.$deserializers$[propName]) {
+              const [[methodName]] = Object.entries(deserializer);
               if (BUILD.lazyLoad) {
                 if (hostRef.$lazyInstance$) {
                   setVal(methodName, hostRef.$lazyInstance$);
@@ -3580,13 +3665,14 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             return;
           } else if (propName == null) {
             const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
-            if (hostRef && flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
+            if (hostRef && flags2 && !(flags2 & 8 /* isConstructingInstance */) && newValue !== oldValue) {
               const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : this;
               const instance = BUILD.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) {
-                  instance[callbackName].call(instance, newValue, oldValue, attrName);
+              entry == null ? void 0 : entry.forEach((watcher) => {
+                const [[watchMethodName, watcherFlags]] = Object.entries(watcher);
+                if (instance[watchMethodName] != null && (flags2 & 128 /* isWatchReady */ || watcherFlags & 1 /* Immediate */)) {
+                  instance[watchMethodName].call(instance, newValue, oldValue, attrName);
                 }
               });
             }
@@ -3624,87 +3710,103 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
 // src/runtime/initialize-component.ts
 var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   let Cstr;
-  if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
-    hostRef.$flags$ |= 32 /* hasInitializedComponent */;
-    const bundleId = cmpMeta.$lazyBundleId$;
-    if (BUILD.lazyLoad && bundleId) {
-      const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
-      if (CstrImport && "then" in CstrImport) {
-        const endLoad = uniqueTime(
-          `st:load:${cmpMeta.$tagName$}:${hostRef.$modeName$}`,
-          `[Stencil] Load module for <${cmpMeta.$tagName$}>`
-        );
-        Cstr = await CstrImport;
-        endLoad();
-      } else {
-        Cstr = CstrImport;
-      }
-      if (!Cstr) {
-        throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
-      }
-      if (BUILD.member && !Cstr.isProxied) {
+  try {
+    if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
+      hostRef.$flags$ |= 32 /* hasInitializedComponent */;
+      const bundleId = cmpMeta.$lazyBundleId$;
+      if (BUILD.lazyLoad && bundleId) {
+        const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
+        if (CstrImport && "then" in CstrImport) {
+          const endLoad = uniqueTime(
+            `st:load:${cmpMeta.$tagName$}:${hostRef.$modeName$}`,
+            `[Stencil] Load module for <${cmpMeta.$tagName$}>`
+          );
+          Cstr = await CstrImport;
+          endLoad();
+        } else {
+          Cstr = CstrImport;
+        }
+        if (!Cstr) {
+          throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
+        }
+        if (BUILD.member && !Cstr.isProxied) {
+          if (BUILD.propChangeCallback) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+            cmpMeta.$serializers$ = Cstr.serializers;
+            cmpMeta.$deserializers$ = Cstr.deserializers;
+          }
+          proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
+          Cstr.isProxied = true;
+        }
+        const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
+        if (BUILD.member) {
+          hostRef.$flags$ |= 8 /* isConstructingInstance */;
+        }
+        try {
+          new Cstr(hostRef);
+        } catch (e) {
+          consoleError(e, elm);
+        }
+        if (BUILD.member) {
+          hostRef.$flags$ &= -9 /* isConstructingInstance */;
+        }
         if (BUILD.propChangeCallback) {
-          cmpMeta.$watchers$ = Cstr.watchers;
-          cmpMeta.$serializers$ = Cstr.serializers;
-          cmpMeta.$deserializers$ = Cstr.deserializers;
+          hostRef.$flags$ |= 128 /* isWatchReady */;
         }
-        proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
-        Cstr.isProxied = true;
-      }
-      const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
-      if (BUILD.member) {
-        hostRef.$flags$ |= 8 /* isConstructingInstance */;
-      }
-      try {
-        new Cstr(hostRef);
-      } catch (e) {
-        consoleError(e, elm);
-      }
-      if (BUILD.member) {
-        hostRef.$flags$ &= -9 /* isConstructingInstance */;
-      }
-      if (BUILD.propChangeCallback) {
-        hostRef.$flags$ |= 128 /* isWatchReady */;
-      }
-      endNewInstance();
-      fireConnectedCallback(hostRef.$lazyInstance$, elm);
-    } else {
-      Cstr = elm.constructor;
-      const cmpTag = elm.localName;
-      customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
-    }
-    if (BUILD.style && Cstr && Cstr.style) {
-      let style;
-      if (typeof Cstr.style === "string") {
-        style = Cstr.style;
-      } else if (BUILD.mode && typeof Cstr.style !== "string") {
-        hostRef.$modeName$ = computeMode(elm);
-        if (hostRef.$modeName$) {
-          style = Cstr.style[hostRef.$modeName$];
+        endNewInstance();
+        const needsDeferredCallback = BUILD.slotRelocation && cmpMeta.$flags$ & 4 /* hasSlotRelocation */;
+        if (!needsDeferredCallback) {
+          fireConnectedCallback(hostRef.$lazyInstance$, elm);
+        } else {
+          hostRef.$deferredConnectedCallback$ = true;
         }
-        if (BUILD.hydrateServerSide && hostRef.$modeName$) {
-          elm.setAttribute("s-mode", hostRef.$modeName$);
+      } else {
+        Cstr = elm.constructor;
+        const cmpTag = elm.localName;
+        customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
+      }
+      if (BUILD.style && Cstr && Cstr.style) {
+        let style;
+        if (typeof Cstr.style === "string") {
+          style = Cstr.style;
+        } else if (BUILD.mode && typeof Cstr.style !== "string") {
+          hostRef.$modeName$ = computeMode(elm);
+          if (hostRef.$modeName$) {
+            style = Cstr.style[hostRef.$modeName$];
+          }
+          if (BUILD.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 (BUILD.hydrateServerSide && BUILD.shadowDom) {
-          if (cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
-            style = scopeCss(style, scopeId2);
+        const scopeId2 = getScopeId(cmpMeta, hostRef.$modeName$);
+        if (!styles.has(scopeId2) || BUILD.hotModuleReplacement && hmrVersionId) {
+          const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
+          if (BUILD.hydrateServerSide && BUILD.shadowDom) {
+            if (cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
+              style = scopeCss(style, scopeId2);
+            }
           }
+          registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
+          endRegisterStyles();
         }
-        registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
-        endRegisterStyles();
       }
     }
-  }
-  const ancestorComponent = hostRef.$ancestorComponent$;
-  const schedule = () => scheduleUpdate(hostRef, true);
-  if (BUILD.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) {
-    ancestorComponent["s-rc"].push(schedule);
-  } else {
-    schedule();
+    const ancestorComponent = hostRef.$ancestorComponent$;
+    const schedule = () => scheduleUpdate(hostRef, true);
+    if (BUILD.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) {
+      ancestorComponent["s-rc"].push(schedule);
+    } else {
+      schedule();
+    }
+  } catch (e) {
+    consoleError(e, elm);
+    if (BUILD.asyncLoading && hostRef.$onRenderResolve$) {
+      hostRef.$onRenderResolve$();
+      hostRef.$onRenderResolve$ = void 0;
+    }
+    if (BUILD.asyncLoading && hostRef.$onReadyResolve$) {
+      hostRef.$onReadyResolve$(elm);
+    }
   }
 };
 var fireConnectedCallback = (instance, elm) => {
@@ -3833,89 +3935,99 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     $flags$: compactMeta[0],
     $tagName$: compactMeta[1]
   };
-  if (BUILD.member) {
-    cmpMeta.$members$ = compactMeta[2];
-  }
-  if (BUILD.hostListener) {
-    cmpMeta.$listeners$ = compactMeta[3];
-  }
-  if (BUILD.propChangeCallback) {
-    cmpMeta.$watchers$ = Cstr.$watchers$;
-    cmpMeta.$deserializers$ = Cstr.$deserializers$;
-    cmpMeta.$serializers$ = Cstr.$serializers$;
-  }
-  if (BUILD.reflect) {
-    cmpMeta.$attrsToReflect$ = [];
-  }
-  if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-    cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
-  }
-  if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && cmpMeta.$flags$ & 256 /* hasRenderFn */) {
-    if (BUILD.experimentalSlotFixes) {
-      patchPseudoShadowDom(Cstr.prototype);
-    } else {
-      if (BUILD.slotChildNodesFix) {
-        patchChildSlotNodes(Cstr.prototype);
-      }
-      if (BUILD.cloneNodeFix) {
-        patchCloneNode(Cstr.prototype);
-      }
-      if (BUILD.appendChildSlotFix) {
-        patchSlotAppendChild(Cstr.prototype);
-      }
-      if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
-        patchTextContent(Cstr.prototype);
-      }
+  try {
+    if (BUILD.member) {
+      cmpMeta.$members$ = compactMeta[2];
     }
-  }
-  if (BUILD.hydrateClientSide && BUILD.shadowDom) {
-    hydrateScopedToShadow();
-  }
-  const originalConnectedCallback = Cstr.prototype.connectedCallback;
-  const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
-  Object.assign(Cstr.prototype, {
-    __hasHostListenerAttached: false,
-    __registerHost() {
-      registerHost(this, cmpMeta);
-    },
-    connectedCallback() {
-      if (!this.__hasHostListenerAttached) {
-        const hostRef = getHostRef(this);
-        if (!hostRef) {
-          return;
+    if (BUILD.hostListener) {
+      cmpMeta.$listeners$ = compactMeta[3];
+    }
+    if (BUILD.propChangeCallback) {
+      cmpMeta.$watchers$ = Cstr.$watchers$;
+      cmpMeta.$deserializers$ = Cstr.$deserializers$;
+      cmpMeta.$serializers$ = Cstr.$serializers$;
+    }
+    if (BUILD.reflect) {
+      cmpMeta.$attrsToReflect$ = [];
+    }
+    if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+      cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
+    }
+    if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && cmpMeta.$flags$ & 256 /* hasSlot */) {
+      if (BUILD.experimentalSlotFixes) {
+        patchPseudoShadowDom(Cstr.prototype);
+      } else {
+        if (BUILD.slotChildNodesFix) {
+          patchChildSlotNodes(Cstr.prototype);
+        }
+        if (BUILD.cloneNodeFix) {
+          patchCloneNode(Cstr.prototype);
+        }
+        if (BUILD.appendChildSlotFix) {
+          patchSlotAppendChild(Cstr.prototype);
+        }
+        if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+          patchTextContent(Cstr.prototype);
         }
-        addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
-        this.__hasHostListenerAttached = true;
-      }
-      connectedCallback(this);
-      if (originalConnectedCallback) {
-        originalConnectedCallback.call(this);
-      }
-    },
-    disconnectedCallback() {
-      disconnectedCallback(this);
-      if (originalDisconnectedCallback) {
-        originalDisconnectedCallback.call(this);
       }
-    },
-    __attachShadow() {
-      if (supportsShadow) {
-        if (!this.shadowRoot) {
-          createShadowRoot.call(this, cmpMeta);
-        } else {
-          if (this.shadowRoot.mode !== "open") {
-            throw new Error(
-              `Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`
-            );
+    } else if (BUILD.cloneNodeFix) {
+      patchCloneNode(Cstr.prototype);
+    }
+    if (BUILD.hydrateClientSide && BUILD.shadowDom) {
+      hydrateScopedToShadow();
+    }
+    const originalConnectedCallback = Cstr.prototype.connectedCallback;
+    const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
+    Object.assign(Cstr.prototype, {
+      __hasHostListenerAttached: false,
+      __registerHost() {
+        registerHost(this, cmpMeta);
+      },
+      connectedCallback() {
+        if (!this.__hasHostListenerAttached) {
+          const hostRef = getHostRef(this);
+          if (!hostRef) {
+            return;
           }
+          addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
+          this.__hasHostListenerAttached = true;
+        }
+        connectedCallback(this);
+        if (originalConnectedCallback) {
+          originalConnectedCallback.call(this);
+        }
+      },
+      disconnectedCallback() {
+        disconnectedCallback(this);
+        if (originalDisconnectedCallback) {
+          originalDisconnectedCallback.call(this);
+        }
+      },
+      __attachShadow() {
+        if (supportsShadow) {
+          if (!this.shadowRoot) {
+            createShadowRoot.call(this, cmpMeta);
+          } else {
+            if (this.shadowRoot.mode !== "open") {
+              throw new Error(
+                `Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`
+              );
+            }
+          }
+        } else {
+          this.shadowRoot = this;
         }
-      } else {
-        this.shadowRoot = this;
       }
-    }
-  });
-  Cstr.is = cmpMeta.$tagName$;
-  return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
+    });
+    Object.defineProperty(Cstr, "is", {
+      value: cmpMeta.$tagName$,
+      configurable: true
+    });
+    return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
+  } catch (e) {
+    consoleError(e);
+    return Cstr;
+  }
 };
 var forceModeUpdate = (elm) => {
   if (BUILD.style && BUILD.mode && !BUILD.lazyLoad) {
@@ -4016,10 +4128,12 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       }
       const tagName = BUILD.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
+        ["s-p"];
+        ["s-rc"];
+        hasRegisteredEventListeners = false;
         // StencilLazyHost
         constructor(self) {
           super(self);
-          this.hasRegisteredEventListeners = false;
           self = this;
           registerHost(self, cmpMeta);
           if (BUILD.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
@@ -4079,7 +4193,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           return (_a3 = getHostRef(this)) == null ? void 0 : _a3.$onReadyPromise$;
         }
       };
-      if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && cmpMeta.$flags$ & 256 /* hasRenderFn */) {
+      if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && cmpMeta.$flags$ & 256 /* hasSlot */) {
         if (BUILD.experimentalSlotFixes) {
           patchPseudoShadowDom(HostElement.prototype);
         } else {
@@ -4096,6 +4210,8 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
             patchTextContent(HostElement.prototype);
           }
         }
+      } else if (BUILD.cloneNodeFix) {
+        patchCloneNode(HostElement.prototype);
       }
       if (BUILD.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */) {
         HostElement.formAssociated = true;
@@ -4116,7 +4232,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
     });
   });
   if (cmpTags.length > 0) {
-    if (hasSlotRelocation) {
+    if (BUILD.slotRelocation && hasSlotRelocation) {
       dataStyles.textContent += SLOT_FB_CSS;
     }
     if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {
@@ -4241,6 +4357,55 @@ function setTagTransformer(transformer) {
   tagTransformer = transformer;
 }
 
+// src/runtime/vdom/jsx-dev-runtime.ts
+function jsxDEV(type, props, key, _isStaticChildren, _source, _self) {
+  const propsObj = props || {};
+  const { children, ...rest } = propsObj;
+  let vnodeData = rest;
+  if (key !== void 0 && !("key" in rest)) {
+    vnodeData = { ...rest, key };
+  }
+  if (vnodeData && Object.keys(vnodeData).length === 0) {
+    vnodeData = null;
+  }
+  if (children !== void 0) {
+    if (Array.isArray(children)) {
+      return h(type, vnodeData, ...children);
+    }
+    if (typeof children === "object" && children !== null && "$flags$" in children) {
+      return h(type, vnodeData, children);
+    }
+    return h(type, vnodeData, children);
+  }
+  return h(type, vnodeData);
+}
+
+// src/runtime/vdom/jsx-runtime.ts
+function jsx(type, props, key) {
+  const propsObj = props || {};
+  const { children, ...rest } = propsObj;
+  let vnodeData = rest;
+  if (key !== void 0 && !("key" in rest)) {
+    vnodeData = { ...rest, key };
+  }
+  if (vnodeData && Object.keys(vnodeData).length === 0) {
+    vnodeData = null;
+  }
+  if (children !== void 0) {
+    if (Array.isArray(children)) {
+      return h(type, vnodeData, ...children);
+    }
+    if (typeof children === "object" && children !== null && "$flags$" in children) {
+      return h(type, vnodeData, children);
+    }
+    return h(type, vnodeData, children);
+  }
+  return h(type, vnodeData);
+}
+function jsxs(type, props, key) {
+  return jsx(type, props, key);
+}
+
 // src/runtime/vdom/vdom-annotations.ts
 var insertVdomAnnotations = (doc, staticComponents) => {
   if (doc != null) {
@@ -4421,6 +4586,9 @@ var StencilCore = /*#__PURE__*/Object.freeze({
   h: h,
   insertVdomAnnotations: insertVdomAnnotations,
   isMemberInElement: isMemberInElement,
+  jsx: jsx,
+  jsxDEV: jsxDEV,
+  jsxs: jsxs,
   loadModule: loadModule,
   modeResolutionChain: modeResolutionChain,
   needsScopedSSR: needsScopedSSR,
@@ -4456,6 +4624,3 @@ var StencilCore = /*#__PURE__*/Object.freeze({
 });
 
 export { BUILD as B, Fragment as F, H, NAMESPACE as N, StencilCore as S, Host as a, bootstrapLazy as b, consoleDevInfo as c, createEvent as d, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s, win as w };
-//# sourceMappingURL=index-Dx5skKSq.js.map
-
-//# sourceMappingURL=index-Dx5skKSq.js.map