@searchcraft/javascript-sdk 0.12.2 → 0.13.1

package/dist/components/{p-5365011f.js → p-DO5g2x-l.js}

@@ -1,8 +1,8 @@
 const NAMESPACE = 'searchcraft-javascript-sdk';
-const BUILD = /* searchcraft-javascript-sdk */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: false, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: false, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* searchcraft-javascript-sdk */ { hydratedSelectorName: "hydrated", lazyLoad: false, shadowDom: false, slotRelocation: true, state: true, updatable: true};
 
 /*
- Stencil Client Platform v4.25.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.38.3 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -13,8 +13,30 @@ var __export = (target, all) => {
 // src/utils/constants.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
 var HTML_NS = "http://www.w3.org/1999/xhtml";
-
-// src/utils/es2022-rewire-class-members.ts
+var PrimitiveType = /* @__PURE__ */ ((PrimitiveType2) => {
+  PrimitiveType2["Undefined"] = "undefined";
+  PrimitiveType2["Null"] = "null";
+  PrimitiveType2["String"] = "string";
+  PrimitiveType2["Number"] = "number";
+  PrimitiveType2["SpecialNumber"] = "number";
+  PrimitiveType2["Boolean"] = "boolean";
+  PrimitiveType2["BigInt"] = "bigint";
+  return PrimitiveType2;
+})(PrimitiveType || {});
+var NonPrimitiveType = /* @__PURE__ */ ((NonPrimitiveType2) => {
+  NonPrimitiveType2["Array"] = "array";
+  NonPrimitiveType2["Date"] = "date";
+  NonPrimitiveType2["Map"] = "map";
+  NonPrimitiveType2["Object"] = "object";
+  NonPrimitiveType2["RegularExpression"] = "regexp";
+  NonPrimitiveType2["Set"] = "set";
+  NonPrimitiveType2["Channel"] = "channel";
+  NonPrimitiveType2["Symbol"] = "symbol";
+  return NonPrimitiveType2;
+})(NonPrimitiveType || {});
+var TYPE_CONSTANT = "type";
+var VALUE_CONSTANT = "value";
+var SERIALIZED_PREFIX = "serialized:";
 var reWireGetterSetter = (instance, hostRef) => {
   var _a;
   const cmpMeta = hostRef.$cmpMeta$;
@@ -22,48 +44,71 @@ var reWireGetterSetter = (instance, hostRef) => {
   members.map(([memberName, [memberFlags]]) => {
     if ((memberFlags & 31 /* Prop */ || memberFlags & 32 /* State */)) {
       const ogValue = instance[memberName];
-      const ogDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(instance), memberName);
-      Object.defineProperty(instance, memberName, {
-        get() {
-          return ogDescriptor.get.call(this);
-        },
-        set(newValue) {
-          ogDescriptor.set.call(this, newValue);
-        },
-        configurable: true,
-        enumerable: true
-      });
+      const ogDescriptor = getPropertyDescriptor(Object.getPrototypeOf(instance), memberName) || Object.getOwnPropertyDescriptor(instance, memberName);
+      if (ogDescriptor) {
+        Object.defineProperty(instance, memberName, {
+          get() {
+            return ogDescriptor.get.call(this);
+          },
+          set(newValue) {
+            ogDescriptor.set.call(this, newValue);
+          },
+          configurable: true,
+          enumerable: true
+        });
+      }
       instance[memberName] = hostRef.$instanceValues$.has(memberName) ? hostRef.$instanceValues$.get(memberName) : ogValue;
     }
   });
 };
+function getPropertyDescriptor(obj, memberName) {
+  while (obj) {
+    const desc = Object.getOwnPropertyDescriptor(obj, memberName);
+    if (desc == null ? void 0 : desc.get) return desc;
+    obj = Object.getPrototypeOf(obj);
+  }
+  return void 0;
+}
 
 // src/client/client-host-ref.ts
-var hostRefs = /* @__PURE__ */ new WeakMap();
-var deleteHostRef = (ref) => hostRefs.delete(ref);
-var getHostRef = (ref) => hostRefs.get(ref);
+var getHostRef = (ref) => {
+  if (ref.__stencil__getHostRef) {
+    return ref.__stencil__getHostRef();
+  }
+  return void 0;
+};
 var registerHost = (hostElement, cmpMeta) => {
   const hostRef = {
     $flags$: 0,
     $hostElement$: hostElement,
     $cmpMeta$: cmpMeta,
-    $instanceValues$: /* @__PURE__ */ new Map()
+    $instanceValues$: /* @__PURE__ */ new Map(),
+    $serializerValues$: /* @__PURE__ */ new Map()
   };
   {
     hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
     hostElement["s-p"] = [];
     hostElement["s-rc"] = [];
   }
-  const ref = hostRefs.set(hostElement, hostRef);
-  {
+  const ref = hostRef;
+  hostElement.__stencil__getHostRef = () => ref;
+  if (cmpMeta.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.state)) {
     reWireGetterSetter(hostElement, hostRef);
   }
   return ref;
 };
 var isMemberInElement = (elm, memberName) => memberName in elm;
 var consoleError = (e, el) => (0, console.error)(e, el);
+
+// src/runtime/runtime-constants.ts
+var CONTENT_REF_ID = "r";
+var ORG_LOCATION_ID = "o";
+var SLOT_NODE_ID = "s";
+var TEXT_NODE_ID = "t";
+var COMMENT_NODE_ID = "c";
+var HYDRATE_ID = "s-id";
+var HYDRATE_CHILD_ID = "c-id";
 var win = typeof window !== "undefined" ? window : {};
-var doc = win.document || { head: {} };
 var H = win.HTMLElement || class {
 };
 var plt = {
@@ -124,6 +169,106 @@ var isComplexType = (o) => {
   return o === "object" || o === "function";
 };
 
+// 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, {
@@ -172,13 +317,20 @@ var unwrapErr = (result) => {
     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))));
+}
 var updateFallbackSlotVisibility = (elm) => {
-  const childNodes = elm.__childNodes || elm.childNodes;
+  const childNodes = internalCall(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) {
+        if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) {
           slotNode.hidden = true;
         } else {
           slotNode.hidden = false;
@@ -186,31 +338,43 @@ var updateFallbackSlotVisibility = (elm) => {
       }
     });
   }
-  for (const childNode of childNodes) {
-    if (childNode.nodeType === 1 /* ElementNode */ && (childNode.__childNodes || childNode.childNodes).length) {
+  let i2 = 0;
+  for (i2 = 0; i2 < childNodes.length; i2++) {
+    const childNode = childNodes[i2];
+    if (childNode.nodeType === 1 /* ElementNode */ && internalCall(childNode, "childNodes").length) {
       updateFallbackSlotVisibility(childNode);
     }
   }
 };
+var getSlottedChildNodes = (childNodes) => {
+  const result = [];
+  for (let i2 = 0; i2 < childNodes.length; i2++) {
+    const slottedNode = childNodes[i2]["s-nr"] || void 0;
+    if (slottedNode && slottedNode.isConnected) {
+      result.push(slottedNode);
+    }
+  }
+  return result;
+};
 function 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 === void 0 || childNode["s-sn"] === slotName)) {
+    if (childNode["s-sr"] && (!hostName || childNode["s-hn"] === hostName) && (slotName === void 0)) {
       slottedNodes.push(childNode);
-      if (typeof slotName !== "undefined") return slottedNodes;
     }
     slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
   }
   return slottedNodes;
 }
-var getHostSlotChildNodes = (node, slotName, includeSlot = true) => {
+var getSlotChildSiblings = (slot, 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);
+  if (includeSlot && slot["s-sr"] || !slot["s-sr"]) childNodes.push(slot);
+  let node = slot;
+  while (node = node.nextSibling) {
+    if (getSlotName(node) === slotName && (includeSlot || !node["s-sr"])) childNodes.push(node);
   }
   return childNodes;
 };
@@ -229,6 +393,72 @@ var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
   }
   return slotName === "";
 };
+var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
+  if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
+    return;
+  }
+  const slottedNodeLocation = document.createTextNode("");
+  slottedNodeLocation["s-nr"] = newChild;
+  if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
+  const parent = slotNode["s-cr"].parentNode;
+  const appendMethod = internalCall(parent, "appendChild");
+  if (typeof position !== "undefined") {
+    slottedNodeLocation["s-oo"] = position;
+    const childNodes = internalCall(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"] || 0)) 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) => typeof node["s-sn"] === "string" ? node["s-sn"] : node.nodeType === 1 && node.getAttribute("slot") || void 0;
+function patchSlotNode(node) {
+  if (node.assignedElements || node.assignedNodes || !node["s-sr"]) return;
+  const assignedFactory = (elementsOnly) => (function(opts) {
+    const toReturn = [];
+    const slotName = this["s-sn"];
+    if (opts == null ? void 0 : opts.flatten) {
+      console.error(`
+          Flattening is not supported for Stencil non-shadow slots.
+          You can use \`.childNodes\` to nested slot fallback content.
+          If you have a particular use case, please open an issue on the Stencil repo.
+        `);
+    }
+    const parent = this["s-cr"].parentElement;
+    const slottedNodes = parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes);
+    slottedNodes.forEach((n) => {
+      if (slotName === getSlotName(n)) {
+        toReturn.push(n);
+      }
+    });
+    if (elementsOnly) {
+      return toReturn.filter((n) => n.nodeType === 1 /* ElementNode */);
+    }
+    return toReturn;
+  }).bind(node);
+  node.assignedElements = assignedFactory(true);
+  node.assignedNodes = assignedFactory(false);
+}
+function internalCall(node, method) {
+  if ("__" + method in node) {
+    const toReturn = node["__" + method];
+    if (typeof toReturn !== "function") return toReturn;
+    return toReturn.bind(node);
+  } else {
+    if (typeof node[method] !== "function") return node[method];
+    return node[method].bind(node);
+  }
+}
 var createTime = (fnName, tagName = "") => {
   {
     return () => {
@@ -236,6 +466,8 @@ var createTime = (fnName, tagName = "") => {
     };
   }
 };
+var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
+var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -347,13 +579,380 @@ var convertToPrivate = (node) => {
   vnode.$name$ = node.vname;
   return vnode;
 };
-var parsePropertyValue = (propValue, propType) => {
+
+// src/runtime/client-hydrate.ts
+var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+  var _a, _b;
+  const endHydrate = createTime("hydrateClient", tagName);
+  const shadowRoot = hostElm.shadowRoot;
+  const childRenderNodes = [];
+  const slotNodes = [];
+  const slottedNodes = [];
+  const shadowRootNodes = null;
+  const vnode = newVNode(tagName, null);
+  vnode.$elm$ = hostElm;
+  if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
+    initializeDocumentHydrate(win.document.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
+  }
+  hostElm[HYDRATE_ID] = hostId;
+  hostElm.removeAttribute(HYDRATE_ID);
+  hostRef.$vnode$ = clientHydrate(
+    vnode,
+    childRenderNodes,
+    slotNodes,
+    shadowRootNodes,
+    hostElm,
+    hostElm,
+    hostId,
+    slottedNodes
+  );
+  let crIndex = 0;
+  const crLength = childRenderNodes.length;
+  let childRenderNode;
+  for (crIndex; crIndex < crLength; crIndex++) {
+    childRenderNode = childRenderNodes[crIndex];
+    const orgLocationId = childRenderNode.$hostId$ + "." + childRenderNode.$nodeId$;
+    const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
+    const node = childRenderNode.$elm$;
+    if (!shadowRoot) {
+      node["s-hn"] = tagName.toUpperCase();
+      if (childRenderNode.$tag$ === "slot") {
+        node["s-cr"] = hostElm["s-cr"];
+      }
+    } else if (((_a = childRenderNode.$tag$) == null ? void 0 : _a.toString().includes("-")) && childRenderNode.$tag$ !== "slot-fb" && !childRenderNode.$elm$.shadowRoot) {
+      const cmpMeta = getHostRef(childRenderNode.$elm$);
+      if (cmpMeta) {
+        const scopeId3 = getScopeId(
+          cmpMeta.$cmpMeta$);
+        const styleSheet = win.document.querySelector(`style[sty-id="${scopeId3}"]`);
+        if (styleSheet) {
+          hostElm.shadowRoot.append(styleSheet.cloneNode(true));
+        }
+      }
+    }
+    if (childRenderNode.$tag$ === "slot") {
+      childRenderNode.$name$ = childRenderNode.$elm$["s-sn"] || childRenderNode.$elm$["name"] || null;
+      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 (orgLocationNode.parentElement.shadowRoot && orgLocationNode["s-en"] === "") {
+        orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
+      }
+      orgLocationNode.parentNode.removeChild(orgLocationNode);
+      if (!shadowRoot) {
+        node["s-oo"] = parseInt(childRenderNode.$nodeId$);
+      }
+    }
+    if (orgLocationNode && !orgLocationNode["s-id"]) {
+      plt.$orgLocNodes$.delete(orgLocationId);
+    }
+  }
+  const hosts = [];
+  const snLen = slottedNodes.length;
+  let snIndex = 0;
+  let slotGroup;
+  let snGroupIdx;
+  let snGroupLen;
+  let slottedItem;
+  for (snIndex; snIndex < snLen; snIndex++) {
+    slotGroup = slottedNodes[snIndex];
+    if (!slotGroup || !slotGroup.length) continue;
+    snGroupLen = slotGroup.length;
+    snGroupIdx = 0;
+    for (snGroupIdx; snGroupIdx < snGroupLen; snGroupIdx++) {
+      slottedItem = slotGroup[snGroupIdx];
+      if (!hosts[slottedItem.hostId]) {
+        hosts[slottedItem.hostId] = plt.$orgLocNodes$.get(slottedItem.hostId);
+      }
+      if (!hosts[slottedItem.hostId]) continue;
+      const hostEle = hosts[slottedItem.hostId];
+      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
+        hostEle.appendChild(slottedItem.node);
+      }
+      if (!hostEle.shadowRoot || !shadowRoot) {
+        if (!slottedItem.slot["s-cr"]) {
+          slottedItem.slot["s-cr"] = hostEle["s-cr"];
+          if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) {
+            slottedItem.slot["s-cr"] = hostEle;
+          } else {
+            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")) {
+          slottedItem.node.removeAttribute("slot");
+        }
+      }
+    }
+  }
+  hostRef.$hostElement$ = hostElm;
+  endHydrate();
+};
+var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId, slottedNodes = []) => {
+  let childNodeType;
+  let childIdSplt;
+  let childVNode;
+  let i2;
+  if (node.nodeType === 1 /* ElementNode */) {
+    childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
+    if (childNodeType) {
+      childIdSplt = childNodeType.split(".");
+      if (childIdSplt[0] === hostId || childIdSplt[0] === "0") {
+        childVNode = createSimpleVNode({
+          $flags$: 0,
+          $hostId$: childIdSplt[0],
+          $nodeId$: childIdSplt[1],
+          $depth$: childIdSplt[2],
+          $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` 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$ = [];
+        }
+        const slotName = childVNode.$elm$.getAttribute("s-sn");
+        if (typeof slotName === "string") {
+          if (childVNode.$tag$ === "slot-fb") {
+            addSlot(
+              slotName,
+              childIdSplt[2],
+              childVNode,
+              node,
+              parentVNode,
+              childRenderNodes,
+              slotNodes,
+              shadowRootNodes,
+              slottedNodes
+            );
+          }
+          childVNode.$elm$["s-sn"] = slotName;
+          childVNode.$elm$.removeAttribute("s-sn");
+        }
+        if (childVNode.$index$ !== void 0) {
+          parentVNode.$children$[childVNode.$index$] = childVNode;
+        }
+        parentVNode = childVNode;
+      }
+    }
+    if (node.shadowRoot) {
+      for (i2 = node.shadowRoot.childNodes.length - 1; i2 >= 0; i2--) {
+        clientHydrate(
+          parentVNode,
+          childRenderNodes,
+          slotNodes,
+          shadowRootNodes,
+          hostElm,
+          node.shadowRoot.childNodes[i2],
+          hostId,
+          slottedNodes
+        );
+      }
+    }
+    const nonShadowNodes = node.__childNodes || node.childNodes;
+    for (i2 = nonShadowNodes.length - 1; i2 >= 0; i2--) {
+      clientHydrate(
+        parentVNode,
+        childRenderNodes,
+        slotNodes,
+        shadowRootNodes,
+        hostElm,
+        nonShadowNodes[i2],
+        hostId,
+        slottedNodes
+      );
+    }
+  } else if (node.nodeType === 8 /* CommentNode */) {
+    childIdSplt = node.nodeValue.split(".");
+    if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
+      childNodeType = childIdSplt[0];
+      childVNode = createSimpleVNode({
+        $hostId$: childIdSplt[1],
+        $nodeId$: childIdSplt[2],
+        $depth$: childIdSplt[3],
+        $index$: childIdSplt[4] || "0",
+        $elm$: node,
+        $attrs$: null,
+        $children$: null,
+        $key$: null,
+        $name$: null,
+        $tag$: null,
+        $text$: null
+      });
+      if (childNodeType === TEXT_NODE_ID) {
+        childVNode.$elm$ = findCorrespondingNode(node, 3 /* TextNode */);
+        if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
+          childVNode.$text$ = childVNode.$elm$.textContent;
+          childRenderNodes.push(childVNode);
+          node.remove();
+          if (hostId === childVNode.$hostId$) {
+            if (!parentVNode.$children$) {
+              parentVNode.$children$ = [];
+            }
+            parentVNode.$children$[childVNode.$index$] = childVNode;
+          }
+        }
+      } else if (childNodeType === COMMENT_NODE_ID) {
+        childVNode.$elm$ = findCorrespondingNode(node, 8 /* CommentNode */);
+        if (childVNode.$elm$ && childVNode.$elm$.nodeType === 8 /* CommentNode */) {
+          childRenderNodes.push(childVNode);
+          node.remove();
+        }
+      } else if (childVNode.$hostId$ === hostId) {
+        if (childNodeType === SLOT_NODE_ID) {
+          const slotName = node["s-sn"] = childIdSplt[5] || "";
+          addSlot(
+            slotName,
+            childIdSplt[2],
+            childVNode,
+            node,
+            parentVNode,
+            childRenderNodes,
+            slotNodes,
+            shadowRootNodes,
+            slottedNodes
+          );
+        } else if (childNodeType === CONTENT_REF_ID) {
+          {
+            hostElm["s-cr"] = node;
+            node["s-cn"] = true;
+          }
+        }
+      }
+    }
+  } else if (parentVNode && parentVNode.$tag$ === "style") {
+    const vnode = newVNode(null, node.textContent);
+    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;
+};
+var initializeDocumentHydrate = (node, orgLocNodes) => {
+  if (node.nodeType === 1 /* ElementNode */) {
+    const componentId = node[HYDRATE_ID] || node.getAttribute(HYDRATE_ID);
+    if (componentId) {
+      orgLocNodes.set(componentId, node);
+    }
+    let i2 = 0;
+    if (node.shadowRoot) {
+      for (; i2 < node.shadowRoot.childNodes.length; i2++) {
+        initializeDocumentHydrate(node.shadowRoot.childNodes[i2], orgLocNodes);
+      }
+    }
+    const nonShadowNodes = node.__childNodes || node.childNodes;
+    for (i2 = 0; i2 < nonShadowNodes.length; i2++) {
+      initializeDocumentHydrate(nonShadowNodes[i2], orgLocNodes);
+    }
+  } else if (node.nodeType === 8 /* CommentNode */) {
+    const childIdSplt = node.nodeValue.split(".");
+    if (childIdSplt[0] === ORG_LOCATION_ID) {
+      orgLocNodes.set(childIdSplt[1] + "." + childIdSplt[2], node);
+      node.nodeValue = "";
+      node["s-en"] = childIdSplt[3];
+    }
+  }
+};
+var createSimpleVNode = (vnode) => {
+  const defaultVNode = {
+    $flags$: 0,
+    $hostId$: null,
+    $nodeId$: null,
+    $depth$: null,
+    $index$: "0",
+    $elm$: null,
+    $attrs$: null,
+    $children$: null,
+    $key$: null,
+    $name$: null,
+    $tag$: null,
+    $text$: null
+  };
+  return { ...defaultVNode, ...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") : "";
+  {
+    const slot = childVNode.$elm$;
+    const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
+    addSlottedNodes(slottedNodes, slotId, slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
+    patchSlotNode(node);
+    if (shouldMove) {
+      parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
+    }
+  }
+  childRenderNodes.push(childVNode);
+  slotNodes.push(childVNode);
+  if (!parentVNode.$children$) {
+    parentVNode.$children$ = [];
+  }
+  parentVNode.$children$[childVNode.$index$] = childVNode;
+}
+var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) => {
+  var _a, _b;
+  let slottedNode = slotNode.nextSibling;
+  slottedNodes[slotNodeId] = slottedNodes[slotNodeId] || [];
+  if (!slottedNode || ((_a = slottedNode.nodeValue) == null ? void 0 : _a.startsWith(SLOT_NODE_ID + "."))) return;
+  do {
+    if (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (!slottedNode["getAttribute"] || !slottedNode.getAttribute("slot")) && (slottedNode.nodeType === 8 /* CommentNode */ || slottedNode.nodeType === 3 /* TextNode */))) {
+      slottedNode["s-sn"] = slotName;
+      slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
+    }
+    slottedNode = slottedNode == null ? void 0 : slottedNode.nextSibling;
+  } while (slottedNode && !((_b = slottedNode.nodeValue) == null ? void 0 : _b.startsWith(SLOT_NODE_ID + ".")));
+};
+var findCorrespondingNode = (node, type) => {
+  let sibling = node;
+  do {
+    sibling = sibling.nextSibling;
+  } while (sibling && (sibling.nodeType !== type || !sibling.nodeValue));
+  return sibling;
+};
+var createSupportsRuleRe = (selector) => {
+  const safeSelector2 = escapeRegExpSpecialCharacters(selector);
+  return new RegExp(
+    // First capture group: match any context before the selector that's not inside @supports selector()
+    // Using negative lookahead to avoid matching inside @supports selector(...) condition
+    `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector2}))(${safeSelector2}\\b)`,
+    "g"
+  );
+};
+createSupportsRuleRe("::slotted");
+createSupportsRuleRe(":host");
+createSupportsRuleRe(":host-context");
+var parsePropertyValue = (propValue, propType, isFormAssociated) => {
+  if (typeof propValue === "string" && propValue.startsWith(SERIALIZED_PREFIX)) {
+    propValue = deserializeProperty(propValue);
+    return propValue;
+  }
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
-      return propValue === "false" ? false : propValue === "" || !!propValue;
+      {
+        return propValue === "false" ? false : propValue === "" || !!propValue;
+      }
     }
     if (propType & 2 /* Number */) {
-      return parseFloat(propValue);
+      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
     }
     if (propType & 1 /* String */) {
       return String(propValue);
@@ -362,7 +961,9 @@ var parsePropertyValue = (propValue, propType) => {
   }
   return propValue;
 };
-var getElement = (ref) => ref;
+var getElement = (ref) => {
+  return ref;
+};
 
 // src/runtime/event-emitter.ts
 var createEvent = (ref, name, flags) => {
@@ -370,9 +971,9 @@ var createEvent = (ref, name, flags) => {
   return {
     emit: (detail) => {
       return emitEvent(elm, name, {
-        bubbles: !!(flags & 4 /* Bubbles */),
-        composed: !!(flags & 2 /* Composed */),
-        cancelable: !!(flags & 1 /* Cancellable */),
+        bubbles: true,
+        composed: true,
+        cancelable: true,
         detail
       });
     }
@@ -383,108 +984,108 @@ var emitEvent = (elm, name, opts) => {
   elm.dispatchEvent(ev);
   return ev;
 };
-var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
-var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
-  if (oldValue !== newValue) {
-    let isProp = isMemberInElement(elm, memberName);
-    let ln = memberName.toLowerCase();
-    if (memberName === "class") {
-      const classList = elm.classList;
-      const oldClasses = parseClassList(oldValue);
-      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)));
-      }
-    } else if (memberName === "style") {
-      {
-        for (const prop in oldValue) {
-          if (!newValue || newValue[prop] == null) {
-            if (prop.includes("-")) {
-              elm.style.removeProperty(prop);
-            } else {
-              elm.style[prop] = "";
-            }
-          }
-        }
-      }
-      for (const prop in newValue) {
-        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
+  if (oldValue === newValue) {
+    return;
+  }
+  let isProp = isMemberInElement(elm, memberName);
+  let ln = memberName.toLowerCase();
+  if (memberName === "class") {
+    const classList = elm.classList;
+    const oldClasses = parseClassList(oldValue);
+    let newClasses = parseClassList(newValue);
+    if ((elm["s-si"] || elm["s-sc"]) && initialRender) {
+      const scopeId2 = elm["s-sc"] || elm["s-si"];
+      newClasses.push(scopeId2);
+      oldClasses.forEach((c) => {
+        if (c.startsWith(scopeId2)) newClasses.push(c);
+      });
+      newClasses = [...new Set(newClasses)].filter((c) => c);
+      classList.add(...newClasses);
+    } else {
+      classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+      classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+    }
+  } else if (memberName === "style") {
+    {
+      for (const prop in oldValue) {
+        if (!newValue || newValue[prop] == null) {
           if (prop.includes("-")) {
-            elm.style.setProperty(prop, newValue[prop]);
+            elm.style.removeProperty(prop);
           } else {
-            elm.style[prop] = newValue[prop];
+            elm.style[prop] = "";
           }
         }
       }
-    } else if (memberName === "key") ; else if ((!elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
-      if (memberName[2] === "-") {
-        memberName = memberName.slice(3);
-      } else if (isMemberInElement(win, ln)) {
-        memberName = ln.slice(2);
-      } else {
-        memberName = ln[2] + memberName.slice(3);
-      }
-      if (oldValue || newValue) {
-        const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
-        memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
-        if (oldValue) {
-          plt.rel(elm, memberName, oldValue, capture);
-        }
-        if (newValue) {
-          plt.ael(elm, memberName, newValue, capture);
+    }
+    for (const prop in newValue) {
+      if (!oldValue || newValue[prop] !== oldValue[prop]) {
+        if (prop.includes("-")) {
+          elm.style.setProperty(prop, newValue[prop]);
+        } else {
+          elm.style[prop] = newValue[prop];
         }
       }
+    }
+  } else if (memberName === "key") ; else if ((!elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
+    if (memberName[2] === "-") {
+      memberName = memberName.slice(3);
+    } else if (isMemberInElement(win, ln)) {
+      memberName = ln.slice(2);
     } else {
-      const isComplex = isComplexType(newValue);
-      if ((isProp || isComplex && newValue !== null) && !isSvg) {
-        try {
-          if (!elm.tagName.includes("-")) {
-            const n = newValue == null ? "" : newValue;
-            if (memberName === "list") {
-              isProp = false;
-            } else if (oldValue == null || elm[memberName] != n) {
-              if (typeof elm.__lookupSetter__(memberName) === "function") {
-                elm[memberName] = n;
-              } else {
-                elm.setAttribute(memberName, n);
-              }
+      memberName = ln[2] + memberName.slice(3);
+    }
+    if (oldValue || newValue) {
+      const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+      memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+      if (oldValue) {
+        plt.rel(elm, memberName, oldValue, capture);
+      }
+      if (newValue) {
+        plt.ael(elm, memberName, newValue, capture);
+      }
+    }
+  } else {
+    const isComplex = isComplexType(newValue);
+    if ((isProp || isComplex && newValue !== null) && !isSvg) {
+      try {
+        if (!elm.tagName.includes("-")) {
+          const n = newValue == null ? "" : newValue;
+          if (memberName === "list") {
+            isProp = false;
+          } else if (oldValue == null || elm[memberName] != n) {
+            if (typeof elm.__lookupSetter__(memberName) === "function") {
+              elm[memberName] = n;
+            } else {
+              elm.setAttribute(memberName, n);
             }
-          } else if (elm[memberName] !== newValue) {
-            elm[memberName] = newValue;
           }
-        } catch (e) {
+        } else if (elm[memberName] !== newValue) {
+          elm[memberName] = newValue;
         }
+      } catch (e) {
       }
-      if (newValue == null || newValue === false) {
-        if (newValue !== false || elm.getAttribute(memberName) === "") {
-          {
-            elm.removeAttribute(memberName);
-          }
-        }
-      } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
-        newValue = newValue === true ? "" : newValue;
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(memberName) === "") {
         {
-          elm.setAttribute(memberName, newValue);
+          elm.removeAttribute(memberName);
         }
       }
+    } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
+      newValue = newValue === true ? "" : newValue;
+      {
+        elm.setAttribute(memberName, newValue);
+      }
     }
   }
 };
 var parseClassListRegex = /\s/;
 var parseClassList = (value) => {
-  if (typeof value === "object" && "baseVal" in value) {
+  if (typeof value === "object" && value && "baseVal" in value) {
     value = value.baseVal;
   }
-  if (!value) {
+  if (!value || typeof value !== "string") {
     return [];
   }
   return value.split(parseClassListRegex);
@@ -493,19 +1094,35 @@ var CAPTURE_EVENT_SUFFIX = "Capture";
 var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/vdom/update-element.ts
-var updateElement = (oldVnode, newVnode, isSvgMode2) => {
+var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
   const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
   const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || {};
   const newVnodeAttrs = newVnode.$attrs$ || {};
   {
     for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
       if (!(memberName in newVnodeAttrs)) {
-        setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode2, newVnode.$flags$);
+        setAccessor(
+          elm,
+          memberName,
+          oldVnodeAttrs[memberName],
+          void 0,
+          isSvgMode2,
+          newVnode.$flags$,
+          isInitialRender
+        );
       }
     }
   }
   for (const memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) {
-    setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode2, newVnode.$flags$);
+    setAccessor(
+      elm,
+      memberName,
+      oldVnodeAttrs[memberName],
+      newVnodeAttrs[memberName],
+      isSvgMode2,
+      newVnode.$flags$,
+      isInitialRender
+    );
   }
 };
 function sortedAttrNames(attrNames) {
@@ -546,14 +1163,22 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     }
   }
   if (newVNode2.$text$ !== null) {
-    elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
+    elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
   } else if (newVNode2.$flags$ & 1 /* isSlotReference */) {
-    elm = newVNode2.$elm$ = doc.createTextNode("");
+    elm = newVNode2.$elm$ = win.document.createTextNode("");
+    {
+      updateElement(null, newVNode2, isSvgMode);
+    }
   } else {
     if (!isSvgMode) {
       isSvgMode = newVNode2.$tag$ === "svg";
     }
-    elm = newVNode2.$elm$ = doc.createElementNS(
+    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."
+      );
+    }
+    elm = newVNode2.$elm$ = win.document.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
       !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     ) ;
@@ -586,6 +1211,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       elm["s-cr"] = contentRef;
       elm["s-sn"] = newVNode2.$name$ || "";
       elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
+      patchSlotNode(elm);
       oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
       if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
         {
@@ -599,14 +1225,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
 var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ |= 1 /* isTmpDisconnected */;
   const oldSlotChildNodes = Array.from(parentElm.__childNodes || parentElm.childNodes);
-  if (parentElm["s-sr"] && BUILD.experimentalSlotFixes) {
-    let node = parentElm;
-    while (node = node.nextSibling) {
-      if (node && node["s-sn"] === parentElm["s-sn"] && node["s-sh"] === hostTagName) {
-        oldSlotChildNodes.push(node);
-      }
-    }
-  }
   for (let i2 = oldSlotChildNodes.length - 1; i2 >= 0; i2--) {
     const childNode = oldSlotChildNodes[i2];
     if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) {
@@ -620,7 +1238,7 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
       putBackInOriginalLocation(childNode, recursive);
     }
   }
-  plt.$flags$ &= ~1 /* isTmpDisconnected */;
+  plt.$flags$ &= -2 /* isTmpDisconnected */;
 };
 var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
   let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
@@ -776,9 +1394,7 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
       isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
     }
     {
-      if (tag === "slot" && !useNativeShadowDom) ; else {
-        updateElement(oldVNode, newVNode2, isSvgMode);
-      }
+      updateElement(oldVNode, newVNode2, isSvgMode, isInitialRender);
     }
     if (oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
@@ -792,6 +1408,8 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
       !isInitialRender && BUILD.updatable && oldChildren !== null
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
+    } else if (isInitialRender && BUILD.updatable && oldChildren !== null && newChildren === null) {
+      newVNode2.$children$ = oldChildren;
     }
     if (isSvgMode && tag === "svg") {
       isSvgMode = false;
@@ -814,7 +1432,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  )) {
+        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (true)) {
           if (isNodeLocatedInSlot(node, slotName)) {
             let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
             checkSlotFallbackVisibility = true;
@@ -861,7 +1479,8 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   var _a, _b, _c, _d;
   const hostElm = hostRef.$hostElement$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
-  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+  const isHostElement = isHost(renderFnResults);
+  const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
@@ -874,7 +1493,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
   rootVnode.$elm$ = oldVNode.$elm$ = hostElm;
-  useNativeShadowDom = supportsShadow ;
+  useNativeShadowDom = supportsShadow;
   {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
@@ -886,8 +1505,8 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
       markSlotContentForRelocation(rootVnode.$elm$);
       for (const relocateData of relocateNodes) {
         const nodeToRelocate = relocateData.$nodeToRelocate$;
-        if (!nodeToRelocate["s-ol"]) {
-          const orgLocationNode = doc.createTextNode("");
+        if (!nodeToRelocate["s-ol"] && win.document) {
+          const orgLocationNode = win.document.createTextNode("");
           orgLocationNode["s-nr"] = nodeToRelocate;
           insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
         }
@@ -928,7 +1547,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
               }
             }
           }
-          nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](nodeToRelocate);
+          nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](slotRefNode);
         } else {
           if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
             if (isInitialLoad) {
@@ -942,7 +1561,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     if (checkSlotFallbackVisibility) {
       updateFallbackSlotVisibility(rootVnode.$elm$);
     }
-    plt.$flags$ &= ~1 /* isTmpDisconnected */;
+    plt.$flags$ &= -2 /* isTmpDisconnected */;
     relocateNodes.length = 0;
   }
   contentRef = void 0;
@@ -971,6 +1590,12 @@ var scheduleUpdate = (hostRef, isInitialLoad) => {
   }
   attachToAncestor(hostRef, hostRef.$ancestorComponent$);
   const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
+  if (isInitialLoad) {
+    queueMicrotask(() => {
+      dispatch();
+    });
+    return;
+  }
   return writeTask(dispatch) ;
 };
 var dispatchHooks = (hostRef, isInitialLoad) => {
@@ -983,6 +1608,12 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
     );
   }
   let maybePromise;
+  if (isInitialLoad) {
+    maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
+  } else {
+    maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
+  }
+  maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender", void 0, elm));
   endSchedule();
   return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -1022,7 +1653,7 @@ var callRender = (hostRef, instance, elm, isInitialLoad) => {
   try {
     instance = instance.render() ;
     {
-      hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
+      hostRef.$flags$ &= -17 /* isQueuedForUpdate */;
     }
     {
       hostRef.$flags$ |= 2 /* hasRendered */;
@@ -1045,14 +1676,13 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = elm;
   const ancestorComponent = hostRef.$ancestorComponent$;
+  safeCall(instance, "componentDidRender", void 0, elm);
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
-    {
-      safeCall(instance, "componentDidLoad", void 0, elm);
-    }
+    safeCall(instance, "componentDidLoad", void 0, elm);
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);
@@ -1061,6 +1691,7 @@ var postUpdateComponent = (hostRef) => {
       }
     }
   } else {
+    safeCall(instance, "componentDidUpdate", void 0, elm);
     endPostUpdate();
   }
   {
@@ -1071,14 +1702,17 @@ var postUpdateComponent = (hostRef) => {
     if (hostRef.$flags$ & 512 /* needsRerender */) {
       nextTick(() => scheduleUpdate(hostRef, false));
     }
-    hostRef.$flags$ &= ~(4 /* isWaitingForChildren */ | 512 /* needsRerender */);
+    hostRef.$flags$ &= -517;
   }
 };
 var appDidLoad = (who) => {
+  var _a;
+  nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
   {
-    addHydratedFlag(doc.documentElement);
+    if ((_a = plt.$orgLocNodes$) == null ? void 0 : _a.size) {
+      plt.$orgLocNodes$.clear();
+    }
   }
-  nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
 };
 var safeCall = (instance, method, arg, elm) => {
   if (instance && instance[method]) {
@@ -1099,11 +1733,16 @@ var addHydratedFlag = (elm) => {
 var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 var setValue = (ref, propName, newVal, cmpMeta) => {
   const hostRef = getHostRef(ref);
+  if (!hostRef) {
+    return;
+  }
   const elm = ref;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = elm;
-  newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
+  newVal = parsePropertyValue(
+    newVal,
+    cmpMeta.$members$[propName][0]);
   const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if (didValueChange) {
@@ -1122,6 +1761,11 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
         }
       }
       if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+        if (instance.componentShouldUpdate) {
+          if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
+            return;
+          }
+        }
         scheduleUpdate(hostRef, false);
       }
     }
@@ -1132,9 +1776,17 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (Cstr.watchers && !cmpMeta.$watchers$) {
-      cmpMeta.$watchers$ = Cstr.watchers;
+  {
+    {
+      if (Cstr.watchers && !cmpMeta.$watchers$) {
+        cmpMeta.$watchers$ = Cstr.watchers;
+      }
+      if (Cstr.deserializers && !cmpMeta.$deserializers$) {
+        cmpMeta.$deserializers$ = Cstr.deserializers;
+      }
+      if (Cstr.serializers && !cmpMeta.$serializers$) {
+        cmpMeta.$serializers$ = Cstr.serializers;
+      }
     }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
@@ -1142,7 +1794,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(prototype, memberName) || {};
         if (origGetter) cmpMeta.$members$[memberName][0] |= 2048 /* Getter */;
         if (origSetter) cmpMeta.$members$[memberName][0] |= 4096 /* Setter */;
-        if (flags & 1 /* isElementConstructor */ || !origGetter) {
+        {
           Object.defineProperty(prototype, memberName, {
             get() {
               {
@@ -1156,14 +1808,19 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         Object.defineProperty(prototype, memberName, {
           set(newValue) {
             const ref = getHostRef(this);
+            if (!ref) {
+              return;
+            }
             if (origSetter) {
               const currentValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               if (typeof currentValue === "undefined" && ref.$instanceValues$.get(memberName)) {
                 newValue = ref.$instanceValues$.get(memberName);
-              } else if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                ref.$instanceValues$.set(memberName, currentValue);
               }
-              origSetter.apply(this, [parsePropertyValue(newValue, memberFlags)]);
+              origSetter.apply(this, [
+                parsePropertyValue(
+                  newValue,
+                  memberFlags)
+              ]);
               newValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               setValue(this, memberName, newValue, cmpMeta);
               return;
@@ -1182,16 +1839,14 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         plt.jmp(() => {
           var _a2;
           const propName = attrNameToPropName.get(attrName);
-          if (this.hasOwnProperty(propName) && BUILD.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
+          const hostRef = getHostRef(this);
+          if (this.hasOwnProperty(propName) && BUILD.lazyLoad) ;
+          if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
           this[propName] == newValue) {
             return;
           } else if (propName == null) {
-            const hostRef = getHostRef(this);
             const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
-            if (flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
+            if (hostRef && flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
               const elm = this;
               const instance = elm;
               const entry = (_a2 = cmpMeta.$watchers$) == null ? void 0 : _a2[attrName];
@@ -1203,9 +1858,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             }
             return;
           }
+          const propFlags = members.find(([m]) => m === propName);
+          if (propFlags && propFlags[1][0] & 4 /* Boolean */) {
+            newValue = newValue === null || newValue === "false" ? false : true;
+          }
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          newValue = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
-          if (newValue !== this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -1213,7 +1871,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
       Cstr.observedAttributes = Array.from(
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
-          ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
+          ...members.filter(([_, m]) => m[0] & 31 /* HasAttribute */).map(([propName, m]) => {
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
             return attrName;
@@ -1249,11 +1907,21 @@ var fireConnectedCallback = (instance, elm) => {
 var connectedCallback = (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
+    if (!hostRef) {
+      return;
+    }
     const cmpMeta = hostRef.$cmpMeta$;
     const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
     if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
       hostRef.$flags$ |= 1 /* hasConnected */;
+      let hostId;
       {
+        hostId = elm.getAttribute(HYDRATE_ID);
+        if (hostId) {
+          initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
+        }
+      }
+      if (!hostId) {
         if (// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
           setContentReference(elm);
@@ -1262,7 +1930,7 @@ var connectedCallback = (elm) => {
       {
         let ancestorComponent = elm;
         while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
-          if (ancestorComponent["s-p"]) {
+          if (ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
             attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
             break;
           }
@@ -1270,7 +1938,7 @@ var connectedCallback = (elm) => {
       }
       if (cmpMeta.$members$) {
         Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
-          if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
+          if (memberFlags & 31 /* Prop */ && memberName in elm && elm[memberName] !== Object.prototype[memberName]) {
             const value = elm[memberName];
             delete elm[memberName];
             elm[memberName] = value;
@@ -1289,7 +1957,10 @@ var connectedCallback = (elm) => {
   }
 };
 var setContentReference = (elm) => {
-  const contentRefElm = elm["s-cr"] = doc.createComment(
+  if (!win.document) {
+    return;
+  }
+  const contentRefElm = elm["s-cr"] = win.document.createComment(
     ""
   );
   contentRefElm["s-cn"] = true;
@@ -1316,6 +1987,8 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   }
   {
     cmpMeta.$watchers$ = Cstr.$watchers$;
+    cmpMeta.$deserializers$ = Cstr.$deserializers$;
+    cmpMeta.$serializers$ = Cstr.$serializers$;
   }
   const originalConnectedCallback = Cstr.prototype.connectedCallback;
   const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
@@ -1326,7 +1999,10 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     },
     connectedCallback() {
       if (!this.__hasHostListenerAttached) {
-        getHostRef(this);
+        const hostRef = getHostRef(this);
+        if (!hostRef) {
+          return;
+        }
         this.__hasHostListenerAttached = true;
       }
       connectedCallback(this);
@@ -1339,16 +2015,6 @@ var proxyCustomElement = (Cstr, compactMeta) => {
       if (originalDisconnectedCallback) {
         originalDisconnectedCallback.call(this);
       }
-      plt.raf(() => {
-        var _a;
-        const hostRef = getHostRef(this);
-        if (((_a = hostRef == null ? void 0 : hostRef.$vnode$) == null ? void 0 : _a.$elm$) instanceof Node && !hostRef.$vnode$.$elm$.isConnected) {
-          delete hostRef.$vnode$;
-        }
-        if (this instanceof Node && !this.isConnected) {
-          deleteHostRef(this);
-        }
-      });
     },
     __attachShadow() {
       {
@@ -1357,7 +2023,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     }
   });
   Cstr.is = cmpMeta.$tagName$;
-  return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
+  return proxyComponent(Cstr, cmpMeta);
 };
 
 // src/runtime/fragment.ts
@@ -1369,6 +2035,15 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 // src/runtime/platform-options.ts
 var setPlatformOptions = (opts) => Object.assign(plt, opts);
 
-export { Fragment as F, H, setNonce as a, setPlatformOptions as b, createEvent as c, getAssetPath as g, h, proxyCustomElement as p, setAssetPath as s };
+// src/runtime/render.ts
+function render(vnode, container) {
+  const ref = {
+    $hostElement$: container
+  };
+  renderVdom(ref, vnode);
+}
+
+export { Fragment as F, H, setNonce as a, setPlatformOptions as b, createEvent as c, getAssetPath as g, h, proxyCustomElement as p, render as r, setAssetPath as s };
+//# sourceMappingURL=p-DO5g2x-l.js.map
 
-//# sourceMappingURL=p-5365011f.js.map
+//# sourceMappingURL=p-DO5g2x-l.js.map