@nova-design-system/nova-webcomponents 3.0.0-beta.40 → 3.0.0-beta.42

package/dist/esm/{index-fac2d5d2.js → index-1fb7a9a6.js}

@@ -1,8 +1,8 @@
 const NAMESPACE = 'native';
-const BUILD = /* native */ { allRenderFn: true, appendChildSlotFix: true, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: true, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: true, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: true, experimentalSlotFixes: true, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, 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, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: true, slotChildNodesFix: true, 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: false, watchCallback: true };
+const BUILD = /* native */ { allRenderFn: true, appendChildSlotFix: true, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: true, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: true, experimentalSlotFixes: true, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, 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, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: true, slotChildNodesFix: true, 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: false, watchCallback: true };
 
 /*
- Stencil Client Platform v4.23.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.27.1 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -11,15 +11,19 @@ var __export = (target, all) => {
 };
 
 // src/utils/constants.ts
-var EMPTY_OBJ = {};
 var SVG_NS = "http://www.w3.org/2000/svg";
 var HTML_NS = "http://www.w3.org/1999/xhtml";
 
 // src/client/client-host-ref.ts
-var hostRefs = /* @__PURE__ */ new WeakMap();
-var getHostRef = (ref) => hostRefs.get(ref);
+var getHostRef = (ref) => {
+  if (ref.__stencil__getHostRef) {
+    return ref.__stencil__getHostRef();
+  }
+  return void 0;
+};
 var registerInstance = (lazyInstance, hostRef) => {
-  hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
+  lazyInstance.__stencil__getHostRef = () => hostRef;
+  hostRef.$lazyInstance$ = lazyInstance;
 };
 var registerHost = (hostElement, cmpMeta) => {
   const hostRef = {
@@ -36,7 +40,8 @@ var registerHost = (hostElement, cmpMeta) => {
     hostElement["s-p"] = [];
     hostElement["s-rc"] = [];
   }
-  const ref = hostRefs.set(hostElement, hostRef);
+  const ref = hostRef;
+  hostElement.__stencil__getHostRef = () => ref;
   return ref;
 };
 var isMemberInElement = (elm, memberName) => memberName in elm;
@@ -82,10 +87,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './nv-breadcrumbs.entry.js').then(processMod, consoleError);
-                case 'nv-calendar':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './nv-calendar.entry.js').then(processMod, consoleError);
                 case 'nv-col':
                     return import(
                       /* webpackMode: "lazy" */
@@ -102,6 +103,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './nv-dialog.entry.js').then(processMod, consoleError);
+                case 'nv-fielddate':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './nv-fielddate.entry.js').then(processMod, consoleError);
+                case 'nv-fielddaterange':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './nv-fielddaterange.entry.js').then(processMod, consoleError);
                 case 'nv-fielddropdown':
                     return import(
                       /* webpackMode: "lazy" */
@@ -182,6 +191,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './nv-tooltip.entry.js').then(processMod, consoleError);
+                case 'nv-calendar':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './nv-calendar.entry.js').then(processMod, consoleError);
                 case 'nv-fieldcheckbox':
                     return import(
                       /* webpackMode: "lazy" */
@@ -190,18 +203,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './nv-button.entry.js').then(processMod, consoleError);
-                case 'nv-iconbutton':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './nv-iconbutton.entry.js').then(processMod, consoleError);
                 case 'nv-popover':
                     return import(
                       /* webpackMode: "lazy" */
                       './nv-popover.entry.js').then(processMod, consoleError);
-                case 'nv-loader':
+                case 'nv-iconbutton_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './nv-loader.entry.js').then(processMod, consoleError);
+                      './nv-iconbutton_2.entry.js').then(processMod, consoleError);
                 case 'nv-icon':
                     return import(
                       /* webpackMode: "lazy" */
@@ -214,12 +223,17 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */
     `./${bundleId}.entry.js${""}`
-  ).then((importedModule) => {
-    {
-      cmpModules.set(bundleId, importedModule);
+  ).then(
+    (importedModule) => {
+      {
+        cmpModules.set(bundleId, importedModule);
+      }
+      return importedModule[exportName];
+    },
+    (e) => {
+      consoleError(e, hostRef.$hostElement$);
     }
-    return importedModule[exportName];
-  }, consoleError);
+  );
 };
 
 // src/client/client-style.ts
@@ -243,7 +257,6 @@ var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
   "formStateRestoreCallback"
 ];
 var win = typeof window !== "undefined" ? window : {};
-var doc = win.document || { head: {} };
 var H = win.HTMLElement || class {
 };
 var plt = {
@@ -257,9 +270,10 @@ var plt = {
 };
 var supportsShadow = BUILD.shadowDom;
 var supportsListenerOptions = /* @__PURE__ */ (() => {
+  var _a;
   let supportsListenerOptions2 = false;
   try {
-    doc.addEventListener(
+    (_a = win.document) == null ? void 0 : _a.addEventListener(
       "e",
       null,
       Object.defineProperty({}, "passive", {
@@ -322,9 +336,9 @@ var isComplexType = (o) => {
 };
 
 // src/utils/query-nonce-meta-tag-content.ts
-function queryNonceMetaTagContent(doc2) {
+function queryNonceMetaTagContent(doc) {
   var _a, _b, _c;
-  return (_c = (_b = (_a = doc2.head) == null ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : _b.getAttribute("content")) != null ? _c : void 0;
+  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/result.ts
@@ -376,12 +390,11 @@ var unwrapErr = (result) => {
   }
 };
 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;
@@ -389,31 +402,44 @@ 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 getHostSlotNodes = (childNodes, hostName, slotName) => {
+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 || childNode["s-sn"] === slotName)) {
+    if (childNode["s-sr"] && (!hostName || childNode["s-hn"] === hostName) && (slotName === void 0 || getSlotName(childNode) === slotName)) {
       slottedNodes.push(childNode);
       if (typeof slotName !== "undefined") return slottedNodes;
     }
     slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
   }
   return slottedNodes;
-};
-var getHostSlotChildNodes = (node, slotName, includeSlot = true) => {
+}
+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;
 };
@@ -433,37 +459,202 @@ var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
   return slotName === "";
 };
 var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
-  let slottedNodeLocation;
   if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
-    slottedNodeLocation = newChild["s-ol"];
-  } else {
-    slottedNodeLocation = document.createTextNode("");
-    slottedNodeLocation["s-nr"] = newChild;
+    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 = prepend ? parent.__prepend || parent.prepend : parent.__appendChild || parent.appendChild;
+  const appendMethod = prepend ? internalCall(parent, "prepend") : internalCall(parent, "appendChild");
   if (typeof position !== "undefined") {
-    {
-      slottedNodeLocation["s-oo"] = position;
-      const childNodes = parent.__childNodes || parent.childNodes;
-      const slotRelocateNodes = [slottedNodeLocation];
-      childNodes.forEach((n) => {
-        if (n["s-nr"]) slotRelocateNodes.push(n);
-      });
-      slotRelocateNodes.sort((a, b) => {
-        if (!a["s-oo"] || a["s-oo"] < b["s-oo"]) return -1;
-        else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
-        return 0;
-      });
-      slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
-    }
+    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 dispatchSlotChangeEvent(elm) {
+  elm.dispatchEvent(new CustomEvent("slotchange", { bubbles: false, cancelable: false, composed: false }));
+}
+function findSlotFromSlottedNode(slottedNode, parentHost) {
+  var _a;
+  parentHost = parentHost || ((_a = slottedNode["s-ol"]) == null ? void 0 : _a.parentElement);
+  if (!parentHost) return { slotNode: null, slotName: "" };
+  const slotName = slottedNode["s-sn"] = getSlotName(slottedNode) || "";
+  const childNodes = internalCall(parentHost, "childNodes");
+  const slotNode = getHostSlotNodes(childNodes, parentHost.tagName, slotName)[0];
+  return { slotNode, slotName };
+}
+var patchSlottedNode = (node) => {
+  if (!node || node.__nextSibling !== void 0 || !globalThis.Node) return;
+  patchNextSibling(node);
+  patchPreviousSibling(node);
+  patchParentNode(node);
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    patchNextElementSibling(node);
+    patchPreviousElementSibling(node);
+  }
+};
+var patchNextSibling = (node) => {
+  if (!node || node.__nextSibling) return;
+  patchHostOriginalAccessor("nextSibling", node);
+  Object.defineProperty(node, "nextSibling", {
+    get: function() {
+      var _a;
+      const parentNodes = (_a = this["s-ol"]) == null ? void 0 : _a.parentNode.childNodes;
+      const index = parentNodes == null ? void 0 : parentNodes.indexOf(this);
+      if (parentNodes && index > -1) {
+        return parentNodes[index + 1];
+      }
+      return this.__nextSibling;
+    }
+  });
+};
+var patchNextElementSibling = (element) => {
+  if (!element || element.__nextElementSibling) return;
+  patchHostOriginalAccessor("nextElementSibling", element);
+  Object.defineProperty(element, "nextElementSibling", {
+    get: function() {
+      var _a;
+      const parentEles = (_a = this["s-ol"]) == null ? void 0 : _a.parentNode.children;
+      const index = parentEles == null ? void 0 : parentEles.indexOf(this);
+      if (parentEles && index > -1) {
+        return parentEles[index + 1];
+      }
+      return this.__nextElementSibling;
+    }
+  });
+};
+var patchPreviousSibling = (node) => {
+  if (!node || node.__previousSibling) return;
+  patchHostOriginalAccessor("previousSibling", node);
+  Object.defineProperty(node, "previousSibling", {
+    get: function() {
+      var _a;
+      const parentNodes = (_a = this["s-ol"]) == null ? void 0 : _a.parentNode.childNodes;
+      const index = parentNodes == null ? void 0 : parentNodes.indexOf(this);
+      if (parentNodes && index > -1) {
+        return parentNodes[index - 1];
+      }
+      return this.__previousSibling;
+    }
+  });
+};
+var patchPreviousElementSibling = (element) => {
+  if (!element || element.__previousElementSibling) return;
+  patchHostOriginalAccessor("previousElementSibling", element);
+  Object.defineProperty(element, "previousElementSibling", {
+    get: function() {
+      var _a;
+      const parentNodes = (_a = this["s-ol"]) == null ? void 0 : _a.parentNode.children;
+      const index = parentNodes == null ? void 0 : parentNodes.indexOf(this);
+      if (parentNodes && index > -1) {
+        return parentNodes[index - 1];
+      }
+      return this.__previousElementSibling;
+    }
+  });
+};
+var patchParentNode = (node) => {
+  if (!node || node.__parentNode) return;
+  patchHostOriginalAccessor("parentNode", node);
+  Object.defineProperty(node, "parentNode", {
+    get: function() {
+      var _a;
+      return ((_a = this["s-ol"]) == null ? void 0 : _a.parentNode) || this.__parentNode;
+    },
+    set: function(value) {
+      this.__parentNode = value;
+    }
+  });
+};
+var validElementPatches = ["children", "nextElementSibling", "previousElementSibling"];
+var validNodesPatches = [
+  "childNodes",
+  "firstChild",
+  "lastChild",
+  "nextSibling",
+  "previousSibling",
+  "textContent",
+  "parentNode"
+];
+function patchHostOriginalAccessor(accessorName, node) {
+  let accessor;
+  if (validElementPatches.includes(accessorName)) {
+    accessor = Object.getOwnPropertyDescriptor(Element.prototype, accessorName);
+  } else if (validNodesPatches.includes(accessorName)) {
+    accessor = Object.getOwnPropertyDescriptor(Node.prototype, accessorName);
+  }
+  if (!accessor) {
+    accessor = Object.getOwnPropertyDescriptor(node, accessorName);
+  }
+  if (accessor) Object.defineProperty(node, "__" + accessorName, accessor);
+}
+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 () => {
+      return;
+    };
+  }
+};
+var uniqueTime = (key, measureText) => {
+  {
+    return () => {
+      return;
+    };
+  }
+};
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -575,1172 +766,1133 @@ var convertToPrivate = (node) => {
   vnode.$name$ = node.vname;
   return vnode;
 };
-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)));
+
+// src/runtime/client-hydrate.ts
+var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+  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 (memberName === "style") {
-      {
-        for (const prop in oldValue) {
-          if (!newValue || newValue[prop] == null) {
-            if (prop.includes("-")) {
-              elm.style.removeProperty(prop);
-            } else {
-              elm.style[prop] = "";
-            }
-          }
+    }
+    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 */;
       }
-      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];
-          }
-        }
+    }
+    if (orgLocationNode && orgLocationNode.isConnected) {
+      if (shadowRoot && orgLocationNode["s-en"] === "") {
+        orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
       }
-    } else if (memberName === "key") ; else if (memberName === "ref") {
-      if (newValue) {
-        newValue(elm);
+      orgLocationNode.parentNode.removeChild(orgLocationNode);
+      if (!shadowRoot) {
+        node["s-oo"] = parseInt(childRenderNode.$nodeId$);
       }
-    } else if ((!isProp ) && 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);
+    }
+    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 (oldValue || newValue) {
-        const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
-        memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
-        if (oldValue) {
-          plt.rel(elm, memberName, oldValue, capture);
+      if (!hosts[slottedItem.hostId]) continue;
+      const hostEle = hosts[slottedItem.hostId];
+      if (!hostEle.shadowRoot || !shadowRoot) {
+        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];
         }
-        if (newValue) {
-          plt.ael(elm, memberName, newValue, capture);
+        addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
+        {
+          patchSlottedNode(slottedItem.node);
         }
       }
-    } 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 {
-            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;
-        {
-          elm.setAttribute(memberName, newValue);
-        }
-      }
-    }
-  }
-};
-var parseClassListRegex = /\s/;
-var parseClassList = (value) => {
-  if (typeof value === "object" && "baseVal" in value) {
-    value = value.baseVal;
-  }
-  if (!value) {
-    return [];
-  }
-  return value.split(parseClassListRegex);
-};
-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) => {
-  const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
-  const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || EMPTY_OBJ;
-  const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
-  {
-    for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
-      if (!(memberName in newVnodeAttrs)) {
-        setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode2, newVnode.$flags$);
-      }
-    }
-  }
-  for (const memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) {
-    setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode2, newVnode.$flags$);
-  }
-};
-function sortedAttrNames(attrNames) {
-  return attrNames.includes("ref") ? (
-    // we need to sort these to ensure that `'ref'` is the last attr
-    [...attrNames.filter((attr) => attr !== "ref"), "ref"]
-  ) : (
-    // no need to sort, return the original array
-    attrNames
-  );
-}
-var contentRef;
-var hostTagName;
-var useNativeShadowDom = false;
-var checkSlotFallbackVisibility = false;
-var checkSlotRelocate = false;
-var isSvgMode = false;
-var createElm = (oldParentVNode, newParentVNode, childIndex) => {
-  var _a;
-  const newVNode2 = newParentVNode.$children$[childIndex];
-  let i2 = 0;
-  let elm;
-  let childNode;
-  let oldVNode;
-  if (!useNativeShadowDom) {
-    checkSlotRelocate = true;
-    if (newVNode2.$tag$ === "slot") {
-      newVNode2.$flags$ |= newVNode2.$children$ ? (
-        // slot element has fallback content
-        // still create an element that "mocks" the slot element
-        2 /* isSlotFallback */
-      ) : (
-        // slot element does not have fallback content
-        // create an html comment we'll use to always reference
-        // where actual slot content should sit next to
-        1 /* isSlotReference */
-      );
-    }
-  }
-  if (newVNode2.$text$ !== null) {
-    elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
-  } else if (newVNode2.$flags$ & 1 /* isSlotReference */) {
-    elm = newVNode2.$elm$ = doc.createTextNode("");
-  } else {
-    if (!isSvgMode) {
-      isSvgMode = newVNode2.$tag$ === "svg";
-    }
-    elm = newVNode2.$elm$ = doc.createElementNS(
-      isSvgMode ? SVG_NS : HTML_NS,
-      !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
-    ) ;
-    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
-      isSvgMode = false;
-    }
-    {
-      updateElement(null, newVNode2, isSvgMode);
-    }
-    if (newVNode2.$children$) {
-      for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
-        childNode = createElm(oldParentVNode, newVNode2, i2);
-        if (childNode) {
-          elm.appendChild(childNode);
-        }
-      }
-    }
-    {
-      if (newVNode2.$tag$ === "svg") {
-        isSvgMode = false;
-      } else if (elm.tagName === "foreignObject") {
-        isSvgMode = true;
-      }
-    }
-  }
-  elm["s-hn"] = hostTagName;
-  {
-    if (newVNode2.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
-      elm["s-sr"] = true;
-      elm["s-cr"] = contentRef;
-      elm["s-sn"] = newVNode2.$name$ || "";
-      elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
-      oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
-      if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
-        {
-          relocateToHostRoot(oldParentVNode.$elm$);
-        }
-      }
-    }
-  }
-  return elm;
-};
-var relocateToHostRoot = (parentElm) => {
-  plt.$flags$ |= 1 /* isTmpDisconnected */;
-  const host = parentElm.closest(hostTagName.toLowerCase());
-  if (host != null) {
-    const contentRefNode = Array.from(host.__childNodes || host.childNodes).find(
-      (ref) => ref["s-cr"]
-    );
-    const childNodeArray = Array.from(
-      parentElm.__childNodes || parentElm.childNodes
-    );
-    for (const childNode of contentRefNode ? childNodeArray.reverse() : childNodeArray) {
-      if (childNode["s-sh"] != null) {
-        insertBefore(host, childNode, contentRefNode != null ? contentRefNode : null);
-        childNode["s-sh"] = void 0;
-        checkSlotRelocate = true;
-      }
-    }
-  }
-  plt.$flags$ &= ~1 /* isTmpDisconnected */;
-};
-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"]) {
-      insertBefore(referenceNode(childNode).parentNode, childNode, referenceNode(childNode));
-      childNode["s-ol"].remove();
-      childNode["s-ol"] = void 0;
-      childNode["s-sh"] = void 0;
-      checkSlotRelocate = true;
-    }
-    if (recursive) {
-      putBackInOriginalLocation(childNode, recursive);
-    }
-  }
-  plt.$flags$ &= ~1 /* isTmpDisconnected */;
-};
-var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-  let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
-  let childNode;
-  for (; startIdx <= endIdx; ++startIdx) {
-    if (vnodes[startIdx]) {
-      childNode = createElm(null, parentVNode, startIdx);
-      if (childNode) {
-        vnodes[startIdx].$elm$ = childNode;
-        insertBefore(containerElm, childNode, referenceNode(before) );
+      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
+        hostEle.appendChild(slottedItem.node);
       }
     }
   }
+  plt.$orgLocNodes$.delete(hostElm["s-id"]);
+  hostRef.$hostElement$ = hostElm;
+  endHydrate();
 };
-var removeVnodes = (vnodes, startIdx, endIdx) => {
-  for (let index = startIdx; index <= endIdx; ++index) {
-    const vnode = vnodes[index];
-    if (vnode) {
-      const elm = vnode.$elm$;
-      nullifyVNodeRefs(vnode);
-      if (elm) {
-        {
-          checkSlotFallbackVisibility = true;
-          if (elm["s-ol"]) {
-            elm["s-ol"].remove();
-          } else {
-            putBackInOriginalLocation(elm, true);
-          }
+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$ = [];
         }
-        elm.remove();
-      }
-    }
-  }
-};
-var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = false) => {
-  let oldStartIdx = 0;
-  let newStartIdx = 0;
-  let idxInOld = 0;
-  let i2 = 0;
-  let oldEndIdx = oldCh.length - 1;
-  let oldStartVnode = oldCh[0];
-  let oldEndVnode = oldCh[oldEndIdx];
-  let newEndIdx = newCh.length - 1;
-  let newStartVnode = newCh[0];
-  let newEndVnode = newCh[newEndIdx];
-  let node;
-  let elmToMove;
-  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-    if (oldStartVnode == null) {
-      oldStartVnode = oldCh[++oldStartIdx];
-    } else if (oldEndVnode == null) {
-      oldEndVnode = oldCh[--oldEndIdx];
-    } else if (newStartVnode == null) {
-      newStartVnode = newCh[++newStartIdx];
-    } else if (newEndVnode == null) {
-      newEndVnode = newCh[--newEndIdx];
-    } else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
-      patch(oldStartVnode, newStartVnode, isInitialRender);
-      oldStartVnode = oldCh[++oldStartIdx];
-      newStartVnode = newCh[++newStartIdx];
-    } else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
-      patch(oldEndVnode, newEndVnode, isInitialRender);
-      oldEndVnode = oldCh[--oldEndIdx];
-      newEndVnode = newCh[--newEndIdx];
-    } else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
-      if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
-        putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
-      }
-      patch(oldStartVnode, newEndVnode, isInitialRender);
-      insertBefore(parentElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
-      oldStartVnode = oldCh[++oldStartIdx];
-      newEndVnode = newCh[--newEndIdx];
-    } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
-      if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
-        putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
-      }
-      patch(oldEndVnode, newStartVnode, isInitialRender);
-      insertBefore(parentElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
-      oldEndVnode = oldCh[--oldEndIdx];
-      newStartVnode = newCh[++newStartIdx];
-    } else {
-      idxInOld = -1;
-      {
-        for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
-          if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
-            idxInOld = i2;
-            break;
+        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 (idxInOld >= 0) {
-        elmToMove = oldCh[idxInOld];
-        if (elmToMove.$tag$ !== newStartVnode.$tag$) {
-          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
-        } else {
-          patch(elmToMove, newStartVnode, isInitialRender);
-          oldCh[idxInOld] = void 0;
-          node = elmToMove.$elm$;
-        }
-        newStartVnode = newCh[++newStartIdx];
-      } else {
-        node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
-        newStartVnode = newCh[++newStartIdx];
-      }
-      if (node) {
-        {
-          insertBefore(
-            referenceNode(oldStartVnode.$elm$).parentNode,
-            node,
-            referenceNode(oldStartVnode.$elm$)
-          );
+        if (childVNode.$index$ !== void 0) {
+          parentVNode.$children$[childVNode.$index$] = childVNode;
         }
-      }
-    }
-  }
-  if (oldStartIdx > oldEndIdx) {
-    addVnodes(
-      parentElm,
-      newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$,
-      newVNode2,
-      newCh,
-      newStartIdx,
-      newEndIdx
-    );
-  } else if (newStartIdx > newEndIdx) {
-    removeVnodes(oldCh, oldStartIdx, oldEndIdx);
-  }
-};
-var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
-  if (leftVNode.$tag$ === rightVNode.$tag$) {
-    if (leftVNode.$tag$ === "slot") {
-      return leftVNode.$name$ === rightVNode.$name$;
-    }
-    if (!isInitialRender) {
-      return leftVNode.$key$ === rightVNode.$key$;
-    }
-    if (isInitialRender && !leftVNode.$key$ && rightVNode.$key$) {
-      leftVNode.$key$ = rightVNode.$key$;
-    }
-    return true;
-  }
-  return false;
-};
-var referenceNode = (node) => node && node["s-ol"] || node;
-var patch = (oldVNode, newVNode2, isInitialRender = false) => {
-  const elm = newVNode2.$elm$ = oldVNode.$elm$;
-  const oldChildren = oldVNode.$children$;
-  const newChildren = newVNode2.$children$;
-  const tag = newVNode2.$tag$;
-  const text = newVNode2.$text$;
-  let defaultHolder;
-  if (text === null) {
-    {
-      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
-    }
-    {
-      if (tag === "slot" && !useNativeShadowDom) {
-        if (oldVNode.$name$ !== newVNode2.$name$) {
-          newVNode2.$elm$["s-sn"] = newVNode2.$name$ || "";
-          relocateToHostRoot(newVNode2.$elm$.parentElement);
+        parentVNode = childVNode;
+        if (shadowRootNodes && childVNode.$depth$ === "0") {
+          shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
         }
-      } else {
-        updateElement(oldVNode, newVNode2, isSvgMode);
       }
     }
-    if (oldChildren !== null && newChildren !== null) {
-      updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
-    } else if (newChildren !== null) {
-      if (oldVNode.$text$ !== null) {
-        elm.textContent = "";
+    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
+        );
       }
-      addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
-    } else if (
-      // don't do this on initial render as it can cause non-hydrated content to be removed
-      !isInitialRender && BUILD.updatable && oldChildren !== null
-    ) {
-      removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
-    if (isSvgMode && tag === "svg") {
-      isSvgMode = false;
+    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 ((defaultHolder = elm["s-cr"])) {
-    defaultHolder.parentNode.textContent = text;
-  } else if (oldVNode.$text$ !== text) {
-    elm.data = text;
-  }
-};
-var relocateNodes = [];
-var markSlotContentForRelocation = (elm) => {
-  let node;
-  let hostContentNodes;
-  let j;
-  const children = elm.__childNodes || elm.childNodes;
-  for (const childNode of children) {
-    if (childNode["s-sr"] && (node = childNode["s-cr"]) && node.parentNode) {
-      hostContentNodes = node.parentNode.__childNodes || node.parentNode.childNodes;
-      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"] && (!node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
-          if (isNodeLocatedInSlot(node, slotName)) {
-            let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
-            checkSlotFallbackVisibility = true;
-            node["s-sn"] = node["s-sn"] || slotName;
-            if (relocateNodeData) {
-              relocateNodeData.$nodeToRelocate$["s-sh"] = childNode["s-hn"];
-              relocateNodeData.$slotRefNode$ = childNode;
-            } else {
-              node["s-sh"] = childNode["s-hn"];
-              relocateNodes.push({
-                $slotRefNode$: childNode,
-                $nodeToRelocate$: node
-              });
-            }
-            if (node["s-sr"]) {
-              relocateNodes.map((relocateNode) => {
-                if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node["s-sn"])) {
-                  relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
-                  if (relocateNodeData && !relocateNode.$slotRefNode$) {
-                    relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
-                  }
-                }
-              });
+  } else if (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$ = [];
             }
-          } else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
-            relocateNodes.push({
-              $nodeToRelocate$: node
-            });
+            parentVNode.$children$[childVNode.$index$] = childVNode;
+          }
+          if (shadowRootNodes && childVNode.$depth$ === "0") {
+            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+          }
+        }
+      } 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;
           }
         }
       }
     }
-    if (childNode.nodeType === 1 /* ElementNode */) {
-      markSlotContentForRelocation(childNode);
+  } 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.remove();
     }
   }
+  return parentVNode;
 };
-var nullifyVNodeRefs = (vNode) => {
+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") : "";
   {
-    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+    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) => {
+  let slottedNode = slotNode.nextSibling;
+  slottedNodes[slotNodeId] = slottedNodes[slotNodeId] || [];
+  while (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (slottedNode.nodeType === 8 /* CommentNode */ && slottedNode.nodeValue.indexOf(".") !== 1 || slottedNode.nodeType === 3 /* TextNode */))) {
+    slottedNode["s-sn"] = slotName;
+    slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
+    slottedNode = slottedNode.nextSibling;
   }
 };
-var insertBefore = (parent, newNode, reference) => {
-  const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
-  return inserted;
+var findCorrespondingNode = (node, type) => {
+  let sibling = node;
+  do {
+    sibling = sibling.nextSibling;
+  } while (sibling && (sibling.nodeType !== type || !sibling.nodeValue));
+  return sibling;
 };
-var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
-  var _a, _b, _c, _d, _e;
-  const hostElm = hostRef.$hostElement$;
-  const cmpMeta = hostRef.$cmpMeta$;
-  const oldVNode = hostRef.$vnode$ || newVNode(null, null);
-  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
-  hostTagName = hostElm.tagName;
-  if (cmpMeta.$attrsToReflect$) {
-    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-    cmpMeta.$attrsToReflect$.map(
-      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
-    );
+var parsePropertyValue = (propValue, propType) => {
+  if (propValue != null && !isComplexType(propValue)) {
+    if (propType & 4 /* Boolean */) {
+      return propValue === "false" ? false : propValue === "" || !!propValue;
+    }
+    if (propType & 2 /* Number */) {
+      return parseFloat(propValue);
+    }
+    if (propType & 1 /* String */) {
+      return String(propValue);
+    }
+    return propValue;
   }
-  if (isInitialLoad && rootVnode.$attrs$) {
-    for (const key of Object.keys(rootVnode.$attrs$)) {
-      if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
-        rootVnode.$attrs$[key] = hostElm[key];
-      }
+  return propValue;
+};
+var getElement = (ref) => getHostRef(ref).$hostElement$ ;
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: !!(flags & 4 /* Bubbles */),
+        composed: !!(flags & 2 /* Composed */),
+        cancelable: !!(flags & 1 /* Cancellable */),
+        detail
+      });
+    }
+  };
+};
+var emitEvent = (elm, name, opts) => {
+  const ev = plt.ce(name, opts);
+  elm.dispatchEvent(ev);
+  return ev;
+};
+var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
+var registerStyle = (scopeId2, cssText, allowCS) => {
+  let style = styles.get(scopeId2);
+  if (supportsConstructableStylesheets && allowCS) {
+    style = style || new CSSStyleSheet();
+    if (typeof style === "string") {
+      style = cssText;
+    } else {
+      style.replaceSync(cssText);
     }
+  } else {
+    style = cssText;
   }
-  rootVnode.$tag$ = null;
-  rootVnode.$flags$ |= 4 /* isHost */;
-  hostRef.$vnode$ = rootVnode;
-  rootVnode.$elm$ = oldVNode.$elm$ = hostElm;
-  useNativeShadowDom = supportsShadow ;
-  {
-    contentRef = hostElm["s-cr"];
-    checkSlotFallbackVisibility = false;
+  styles.set(scopeId2, style);
+};
+var addStyle = (styleContainerNode, cmpMeta, mode) => {
+  var _a;
+  const scopeId2 = getScopeId(cmpMeta);
+  const style = styles.get(scopeId2);
+  if (!win.document) {
+    return scopeId2;
   }
-  patch(oldVNode, rootVnode, isInitialLoad);
-  {
-    plt.$flags$ |= 1 /* isTmpDisconnected */;
-    if (checkSlotRelocate) {
-      markSlotContentForRelocation(rootVnode.$elm$);
-      for (const relocateData of relocateNodes) {
-        const nodeToRelocate = relocateData.$nodeToRelocate$;
-        if (!nodeToRelocate["s-ol"]) {
-          const orgLocationNode = doc.createTextNode("");
-          orgLocationNode["s-nr"] = nodeToRelocate;
-          insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
-        }
+  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
+  if (style) {
+    if (typeof style === "string") {
+      styleContainerNode = styleContainerNode.head || styleContainerNode;
+      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+      let styleElm;
+      if (!appliedStyles) {
+        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
       }
-      for (const relocateData of relocateNodes) {
-        const nodeToRelocate = relocateData.$nodeToRelocate$;
-        const slotRefNode = relocateData.$slotRefNode$;
-        if (slotRefNode) {
-          const parentNodeRef = slotRefNode.parentNode;
-          let insertBeforeNode = slotRefNode.nextSibling;
-          if ((insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */)) {
-            let orgLocationNode = (_a = nodeToRelocate["s-ol"]) == null ? void 0 : _a.previousSibling;
-            while (orgLocationNode) {
-              let refNode = (_b = orgLocationNode["s-nr"]) != null ? _b : null;
-              if (refNode && refNode["s-sn"] === nodeToRelocate["s-sn"] && parentNodeRef === refNode.parentNode) {
-                refNode = refNode.nextSibling;
-                while (refNode === nodeToRelocate || (refNode == null ? void 0 : refNode["s-sr"])) {
-                  refNode = refNode == null ? void 0 : refNode.nextSibling;
-                }
-                if (!refNode || !refNode["s-nr"]) {
-                  insertBeforeNode = refNode;
-                  break;
-                }
-              }
-              orgLocationNode = orgLocationNode.previousSibling;
-            }
+      if (!appliedStyles.has(scopeId2)) {
+        if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
+          styleElm.innerHTML = style;
+        } else {
+          styleElm = document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`) || 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 (!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode || nodeToRelocate.nextSibling !== insertBeforeNode) {
-            if (nodeToRelocate !== insertBeforeNode) {
-              insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
-              if (nodeToRelocate.nodeType === 1 /* ElementNode */ && nodeToRelocate.tagName !== "SLOT-FB") {
-                nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : false;
+          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);
+                styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
+              } else {
+                const existingStyleContainer = styleContainerNode.querySelector("style");
+                if (existingStyleContainer) {
+                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
+                } else {
+                  styleContainerNode.prepend(styleElm);
+                }
               }
+            } else {
+              styleContainerNode.append(styleElm);
             }
           }
-          nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](nodeToRelocate);
-        } else {
-          if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
-            if (isInitialLoad) {
-              nodeToRelocate["s-ih"] = (_d = nodeToRelocate.hidden) != null ? _d : false;
-            }
-            nodeToRelocate.hidden = true;
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            styleContainerNode.insertBefore(styleElm, null);
           }
         }
-      }
-    }
-    if (checkSlotFallbackVisibility) {
-      updateFallbackSlotVisibility(rootVnode.$elm$);
-    }
-    plt.$flags$ &= ~1 /* isTmpDisconnected */;
-    relocateNodes.length = 0;
-  }
-  if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
-    const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
-    for (const childNode of children) {
-      if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
-        if (isInitialLoad && childNode["s-ih"] == null) {
-          childNode["s-ih"] = (_e = childNode.hidden) != null ? _e : false;
+        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
+          styleElm.innerHTML += SLOT_FB_CSS;
+        }
+        if (appliedStyles) {
+          appliedStyles.add(scopeId2);
         }
-        childNode.hidden = true;
       }
+    } else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
+      styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
     }
   }
-  contentRef = void 0;
+  return scopeId2;
 };
-var patchNextPrev = (node) => {
-  if (!node || node.__nextSibling || !globalThis.Node) return;
-  patchNextSibling(node);
-  patchPreviousSibling(node);
-  if (node.nodeType === Node.ELEMENT_NODE) {
-    patchNextElementSibling(node);
-    patchPreviousElementSibling(node);
-  }
+var attachStyles = (hostRef) => {
+  const cmpMeta = hostRef.$cmpMeta$;
+  const elm = hostRef.$hostElement$;
+  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
+  addStyle(
+    elm.getRootNode(),
+    cmpMeta);
+  endAttachStyles();
 };
-var patchNextSibling = (node) => {
-  if (!node || node.__nextSibling) return;
-  patchHostOriginalAccessor("nextSibling", node);
-  Object.defineProperty(node, "nextSibling", {
-    get: function() {
-      var _a;
-      const parentNodes = (_a = this["s-ol"]) == null ? void 0 : _a.parentNode.childNodes;
-      const index = parentNodes == null ? void 0 : parentNodes.indexOf(this);
-      if (parentNodes && index > -1) {
-        return parentNodes[index + 1];
+var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
+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"] && initialRender) {
+      newClasses.push(elm["s-si"]);
+      oldClasses.forEach((c) => {
+        if (c.startsWith(elm["s-si"])) newClasses.push(c);
+      });
+      newClasses = [...new Set(newClasses)];
+      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.removeProperty(prop);
+          } else {
+            elm.style[prop] = "";
+          }
+        }
       }
-      return this.__nextSibling;
     }
-  });
-};
-var patchNextElementSibling = (element) => {
-  if (!element || element.__nextElementSibling) return;
-  patchHostOriginalAccessor("nextElementSibling", element);
-  Object.defineProperty(element, "nextElementSibling", {
-    get: function() {
-      var _a;
-      const parentEles = (_a = this["s-ol"]) == null ? void 0 : _a.parentNode.children;
-      const index = parentEles == null ? void 0 : parentEles.indexOf(this);
-      if (parentEles && index > -1) {
-        return parentEles[index + 1];
+    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];
+        }
       }
-      return this.__nextElementSibling;
     }
-  });
-};
-var patchPreviousSibling = (node) => {
-  if (!node || node.__previousSibling) return;
-  patchHostOriginalAccessor("previousSibling", node);
-  Object.defineProperty(node, "previousSibling", {
-    get: function() {
-      var _a;
-      const parentNodes = (_a = this["s-ol"]) == null ? void 0 : _a.parentNode.childNodes;
-      const index = parentNodes == null ? void 0 : parentNodes.indexOf(this);
-      if (parentNodes && index > -1) {
-        return parentNodes[index - 1];
+  } else if (memberName === "key") ; else if (memberName === "ref") {
+    if (newValue) {
+      newValue(elm);
+    }
+  } else if ((!isProp ) && 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);
       }
-      return this.__previousSibling;
     }
-  });
-};
-var patchPreviousElementSibling = (element) => {
-  if (!element || element.__previousElementSibling) return;
-  patchHostOriginalAccessor("previousElementSibling", element);
-  Object.defineProperty(element, "previousElementSibling", {
-    get: function() {
-      var _a;
-      const parentNodes = (_a = this["s-ol"]) == null ? void 0 : _a.parentNode.children;
-      const index = parentNodes == null ? void 0 : parentNodes.indexOf(this);
-      if (parentNodes && index > -1) {
-        return parentNodes[index - 1];
+  } 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) {
+      }
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(memberName) === "") {
+        {
+          elm.removeAttribute(memberName);
+        }
+      }
+    } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
+      newValue = newValue === true ? "" : newValue;
+      {
+        elm.setAttribute(memberName, newValue);
       }
-      return this.__previousElementSibling;
     }
-  });
-};
-var validElementPatches = ["children", "nextElementSibling", "previousElementSibling"];
-var validNodesPatches = [
-  "childNodes",
-  "firstChild",
-  "lastChild",
-  "nextSibling",
-  "previousSibling",
-  "textContent"
-];
-function patchHostOriginalAccessor(accessorName, node) {
-  let accessor;
-  if (validElementPatches.includes(accessorName)) {
-    accessor = Object.getOwnPropertyDescriptor(Element.prototype, accessorName);
-  } else if (validNodesPatches.includes(accessorName)) {
-    accessor = Object.getOwnPropertyDescriptor(Node.prototype, accessorName);
   }
-  if (!accessor) {
-    accessor = Object.getOwnPropertyDescriptor(node, accessorName);
+};
+var parseClassListRegex = /\s/;
+var parseClassList = (value) => {
+  if (typeof value === "object" && value && "baseVal" in value) {
+    value = value.baseVal;
   }
-  if (accessor) Object.defineProperty(node, "__" + accessorName, accessor);
-}
-var createTime = (fnName, tagName = "") => {
-  {
-    return () => {
-      return;
-    };
+  if (!value || typeof value !== "string") {
+    return [];
   }
+  return value.split(parseClassListRegex);
 };
-var uniqueTime = (key, measureText) => {
+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, 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$ || {};
   {
-    return () => {
-      return;
-    };
+    for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
+      if (!(memberName in newVnodeAttrs)) {
+        setAccessor(
+          elm,
+          memberName,
+          oldVnodeAttrs[memberName],
+          void 0,
+          isSvgMode2,
+          newVnode.$flags$,
+          isInitialRender
+        );
+      }
+    }
   }
-};
-
-// src/runtime/client-hydrate.ts
-var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-  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 (!plt.$orgLocNodes$) {
-    initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
+  for (const memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) {
+    setAccessor(
+      elm,
+      memberName,
+      oldVnodeAttrs[memberName],
+      newVnodeAttrs[memberName],
+      isSvgMode2,
+      newVnode.$flags$,
+      isInitialRender
+    );
   }
-  hostElm[HYDRATE_ID] = hostId;
-  hostElm.removeAttribute(HYDRATE_ID);
-  hostRef.$vnode$ = clientHydrate(
-    vnode,
-    childRenderNodes,
-    slotNodes,
-    shadowRootNodes,
-    hostElm,
-    hostElm,
-    hostId,
-    slottedNodes
+};
+function sortedAttrNames(attrNames) {
+  return attrNames.includes("ref") ? (
+    // we need to sort these to ensure that `'ref'` is the last attr
+    [...attrNames.filter((attr) => attr !== "ref"), "ref"]
+  ) : (
+    // no need to sort, return the original array
+    attrNames
   );
-  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"];
-      }
+}
+var contentRef;
+var hostTagName;
+var useNativeShadowDom = false;
+var checkSlotFallbackVisibility = false;
+var checkSlotRelocate = false;
+var isSvgMode = false;
+var createElm = (oldParentVNode, newParentVNode, childIndex) => {
+  var _a;
+  const newVNode2 = newParentVNode.$children$[childIndex];
+  let i2 = 0;
+  let elm;
+  let childNode;
+  let oldVNode;
+  if (!useNativeShadowDom) {
+    checkSlotRelocate = true;
+    if (newVNode2.$tag$ === "slot") {
+      newVNode2.$flags$ |= newVNode2.$children$ ? (
+        // slot element has fallback content
+        // still create an element that "mocks" the slot element
+        2 /* isSlotFallback */
+      ) : (
+        // slot element does not have fallback content
+        // create an html comment we'll use to always reference
+        // where actual slot content should sit next to
+        1 /* isSlotReference */
+      );
+    }
+  }
+  if (newVNode2.$text$ !== null) {
+    elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
+  } else if (newVNode2.$flags$ & 1 /* isSlotReference */) {
+    elm = newVNode2.$elm$ = win.document.createTextNode("");
+    {
+      updateElement(null, newVNode2, isSvgMode);
+    }
+  } else {
+    if (!isSvgMode) {
+      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."
+      );
+    }
+    elm = newVNode2.$elm$ = win.document.createElementNS(
+      isSvgMode ? SVG_NS : HTML_NS,
+      !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+    ) ;
+    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
+      isSvgMode = false;
     }
-    if (childRenderNode.$tag$ === "slot") {
-      if (childRenderNode.$children$) {
-        childRenderNode.$flags$ |= 2 /* isSlotFallback */;
-        if (!childRenderNode.$elm$.childNodes.length) {
-          childRenderNode.$children$.forEach((c) => {
-            childRenderNode.$elm$.appendChild(c.$elm$);
-          });
+    {
+      updateElement(null, newVNode2, isSvgMode);
+    }
+    if (newVNode2.$children$) {
+      for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
+        childNode = createElm(oldParentVNode, newVNode2, i2);
+        if (childNode) {
+          elm.appendChild(childNode);
         }
-      } else {
-        childRenderNode.$flags$ |= 1 /* isSlotReference */;
       }
     }
-    if (orgLocationNode && orgLocationNode.isConnected) {
-      if (shadowRoot && orgLocationNode["s-en"] === "") {
-        orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
-      }
-      orgLocationNode.parentNode.removeChild(orgLocationNode);
-      if (!shadowRoot) {
-        node["s-oo"] = parseInt(childRenderNode.$nodeId$);
+    {
+      if (newVNode2.$tag$ === "svg") {
+        isSvgMode = false;
+      } else if (elm.tagName === "foreignObject") {
+        isSvgMode = true;
       }
     }
-    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 || !shadowRoot) {
-        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"]);
+  elm["s-hn"] = hostTagName;
+  {
+    if (newVNode2.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
+      elm["s-sr"] = true;
+      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$) {
         {
-          patchNextPrev(slottedItem.node);
+          relocateToHostRoot(oldParentVNode.$elm$);
         }
       }
-      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
-        hostEle.appendChild(slottedItem.node);
-      }
     }
   }
-  hostRef.$hostElement$ = hostElm;
-  endHydrate();
+  return elm;
 };
-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 (shadowRootNodes && childVNode.$depth$ === "0") {
-          shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-        }
+var relocateToHostRoot = (parentElm) => {
+  plt.$flags$ |= 1 /* isTmpDisconnected */;
+  const host = parentElm.closest(hostTagName.toLowerCase());
+  if (host != null) {
+    const contentRefNode = Array.from(host.__childNodes || host.childNodes).find(
+      (ref) => ref["s-cr"]
+    );
+    const childNodeArray = Array.from(
+      parentElm.__childNodes || parentElm.childNodes
+    );
+    for (const childNode of contentRefNode ? childNodeArray.reverse() : childNodeArray) {
+      if (childNode["s-sh"] != null) {
+        insertBefore(host, childNode, contentRefNode != null ? contentRefNode : null);
+        childNode["s-sh"] = void 0;
+        checkSlotRelocate = true;
       }
     }
-    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
-        );
+  }
+  plt.$flags$ &= ~1 /* isTmpDisconnected */;
+};
+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);
       }
     }
-    const nonShadowNodes = node.__childNodes || node.childNodes;
-    for (i2 = nonShadowNodes.length - 1; i2 >= 0; i2--) {
-      clientHydrate(
-        parentVNode,
-        childRenderNodes,
-        slotNodes,
-        shadowRootNodes,
-        hostElm,
-        nonShadowNodes[i2],
-        hostId,
-        slottedNodes
-      );
+  }
+  for (let i2 = oldSlotChildNodes.length - 1; i2 >= 0; i2--) {
+    const childNode = oldSlotChildNodes[i2];
+    if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) {
+      insertBefore(referenceNode(childNode).parentNode, childNode, referenceNode(childNode));
+      childNode["s-ol"].remove();
+      childNode["s-ol"] = void 0;
+      childNode["s-sh"] = void 0;
+      checkSlotRelocate = true;
     }
-  } 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$ = node.nextSibling;
-        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;
+    if (recursive) {
+      putBackInOriginalLocation(childNode, recursive);
+    }
+  }
+  plt.$flags$ &= ~1 /* isTmpDisconnected */;
+};
+var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
+  let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
+  let childNode;
+  for (; startIdx <= endIdx; ++startIdx) {
+    if (vnodes[startIdx]) {
+      childNode = createElm(null, parentVNode, startIdx);
+      if (childNode) {
+        vnodes[startIdx].$elm$ = childNode;
+        insertBefore(containerElm, childNode, referenceNode(before) );
+      }
+    }
+  }
+};
+var removeVnodes = (vnodes, startIdx, endIdx) => {
+  for (let index = startIdx; index <= endIdx; ++index) {
+    const vnode = vnodes[index];
+    if (vnode) {
+      const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
+      if (elm) {
+        {
+          checkSlotFallbackVisibility = true;
+          if (elm["s-ol"]) {
+            elm["s-ol"].remove();
+          } else {
+            putBackInOriginalLocation(elm, true);
           }
-          if (shadowRootNodes && childVNode.$depth$ === "0") {
-            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+        }
+        elm.remove();
+      }
+    }
+  }
+};
+var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = false) => {
+  let oldStartIdx = 0;
+  let newStartIdx = 0;
+  let idxInOld = 0;
+  let i2 = 0;
+  let oldEndIdx = oldCh.length - 1;
+  let oldStartVnode = oldCh[0];
+  let oldEndVnode = oldCh[oldEndIdx];
+  let newEndIdx = newCh.length - 1;
+  let newStartVnode = newCh[0];
+  let newEndVnode = newCh[newEndIdx];
+  let node;
+  let elmToMove;
+  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+    if (oldStartVnode == null) {
+      oldStartVnode = oldCh[++oldStartIdx];
+    } else if (oldEndVnode == null) {
+      oldEndVnode = oldCh[--oldEndIdx];
+    } else if (newStartVnode == null) {
+      newStartVnode = newCh[++newStartIdx];
+    } else if (newEndVnode == null) {
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
+      patch(oldStartVnode, newStartVnode, isInitialRender);
+      oldStartVnode = oldCh[++oldStartIdx];
+      newStartVnode = newCh[++newStartIdx];
+    } else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
+      patch(oldEndVnode, newEndVnode, isInitialRender);
+      oldEndVnode = oldCh[--oldEndIdx];
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
+      if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+        putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
+      }
+      patch(oldStartVnode, newEndVnode, isInitialRender);
+      insertBefore(parentElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+      oldStartVnode = oldCh[++oldStartIdx];
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
+      if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+        putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
+      }
+      patch(oldEndVnode, newStartVnode, isInitialRender);
+      insertBefore(parentElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
+      oldEndVnode = oldCh[--oldEndIdx];
+      newStartVnode = newCh[++newStartIdx];
+    } else {
+      idxInOld = -1;
+      {
+        for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
+          if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
+            idxInOld = i2;
+            break;
           }
         }
-      } else if (childNodeType === COMMENT_NODE_ID) {
-        childVNode.$elm$ = node.nextSibling;
-        if (childVNode.$elm$ && childVNode.$elm$.nodeType === 8 /* CommentNode */) {
-          childRenderNodes.push(childVNode);
-          node.remove();
+      }
+      if (idxInOld >= 0) {
+        elmToMove = oldCh[idxInOld];
+        if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
+        } else {
+          patch(elmToMove, newStartVnode, isInitialRender);
+          oldCh[idxInOld] = void 0;
+          node = elmToMove.$elm$;
         }
-      } else if (childVNode.$hostId$ === hostId) {
-        if (childNodeType === SLOT_NODE_ID) {
-          const slotName = node["s-sn"] = childIdSplt[5] || "";
-          addSlot(
-            slotName,
-            childIdSplt[2],
-            childVNode,
+        newStartVnode = newCh[++newStartIdx];
+      } else {
+        node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
+        newStartVnode = newCh[++newStartIdx];
+      }
+      if (node) {
+        {
+          insertBefore(
+            referenceNode(oldStartVnode.$elm$).parentNode,
             node,
-            parentVNode,
-            childRenderNodes,
-            slotNodes,
-            shadowRootNodes,
-            slottedNodes
+            referenceNode(oldStartVnode.$elm$)
           );
-        } 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];
   }
-  return parentVNode;
+  if (oldStartIdx > oldEndIdx) {
+    addVnodes(
+      parentElm,
+      newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$,
+      newVNode2,
+      newCh,
+      newStartIdx,
+      newEndIdx
+    );
+  } else if (newStartIdx > newEndIdx) {
+    removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+  }
 };
-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);
-      }
+var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
+  if (leftVNode.$tag$ === rightVNode.$tag$) {
+    if (leftVNode.$tag$ === "slot") {
+      return leftVNode.$name$ === rightVNode.$name$;
     }
-    const nonShadowNodes = node.__childNodes || node.childNodes;
-    for (i2 = 0; i2 < nonShadowNodes.length; i2++) {
-      initializeDocumentHydrate(nonShadowNodes[i2], orgLocNodes);
+    if (!isInitialRender) {
+      return leftVNode.$key$ === rightVNode.$key$;
     }
-  } 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];
+    if (isInitialRender && !leftVNode.$key$ && rightVNode.$key$) {
+      leftVNode.$key$ = rightVNode.$key$;
     }
+    return true;
   }
+  return false;
 };
-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$);
-    if (shouldMove) {
-      parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
+var referenceNode = (node) => node && node["s-ol"] || node;
+var patch = (oldVNode, newVNode2, isInitialRender = false) => {
+  const elm = newVNode2.$elm$ = oldVNode.$elm$;
+  const oldChildren = oldVNode.$children$;
+  const newChildren = newVNode2.$children$;
+  const tag = newVNode2.$tag$;
+  const text = newVNode2.$text$;
+  let defaultHolder;
+  if (text === null) {
+    {
+      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
     }
-    childRenderNodes.push(childVNode);
-  }
-  slotNodes.push(childVNode);
-  if (!parentVNode.$children$) {
-    parentVNode.$children$ = [];
-  }
-  parentVNode.$children$[childVNode.$index$] = childVNode;
-}
-var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) => {
-  let slottedNode = slotNode.nextSibling;
-  slottedNodes[slotNodeId] = slottedNodes[slotNodeId] || [];
-  while (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (slottedNode.nodeType === 8 /* CommentNode */ && slottedNode.nodeValue.indexOf(".") !== 1 || slottedNode.nodeType === 3 /* TextNode */))) {
-    slottedNode["s-sn"] = slotName;
-    slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
-    slottedNode = slottedNode.nextSibling;
+    {
+      if (tag === "slot" && !useNativeShadowDom) {
+        if (oldVNode.$name$ !== newVNode2.$name$) {
+          newVNode2.$elm$["s-sn"] = newVNode2.$name$ || "";
+          relocateToHostRoot(newVNode2.$elm$.parentElement);
+        }
+      }
+      updateElement(oldVNode, newVNode2, isSvgMode, isInitialRender);
+    }
+    if (oldChildren !== null && newChildren !== null) {
+      updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
+    } else if (newChildren !== null) {
+      if (oldVNode.$text$ !== null) {
+        elm.textContent = "";
+      }
+      addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
+    } else if (
+      // don't do this on initial render as it can cause non-hydrated content to be removed
+      !isInitialRender && BUILD.updatable && oldChildren !== null
+    ) {
+      removeVnodes(oldChildren, 0, oldChildren.length - 1);
+    }
+    if (isSvgMode && tag === "svg") {
+      isSvgMode = false;
+    }
+  } else if ((defaultHolder = elm["s-cr"])) {
+    defaultHolder.parentNode.textContent = text;
+  } else if (oldVNode.$text$ !== text) {
+    elm.data = text;
   }
 };
-var parsePropertyValue = (propValue, propType) => {
-  if (propValue != null && !isComplexType(propValue)) {
-    if (propType & 4 /* Boolean */) {
-      return propValue === "false" ? false : propValue === "" || !!propValue;
-    }
-    if (propType & 2 /* Number */) {
-      return parseFloat(propValue);
+var relocateNodes = [];
+var markSlotContentForRelocation = (elm) => {
+  let node;
+  let hostContentNodes;
+  let j;
+  const children = elm.__childNodes || elm.childNodes;
+  for (const childNode of children) {
+    if (childNode["s-sr"] && (node = childNode["s-cr"]) && node.parentNode) {
+      hostContentNodes = node.parentNode.__childNodes || node.parentNode.childNodes;
+      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"] && (!node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
+          if (isNodeLocatedInSlot(node, slotName)) {
+            let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
+            checkSlotFallbackVisibility = true;
+            node["s-sn"] = node["s-sn"] || slotName;
+            if (relocateNodeData) {
+              relocateNodeData.$nodeToRelocate$["s-sh"] = childNode["s-hn"];
+              relocateNodeData.$slotRefNode$ = childNode;
+            } else {
+              node["s-sh"] = childNode["s-hn"];
+              relocateNodes.push({
+                $slotRefNode$: childNode,
+                $nodeToRelocate$: node
+              });
+            }
+            if (node["s-sr"]) {
+              relocateNodes.map((relocateNode) => {
+                if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node["s-sn"])) {
+                  relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
+                  if (relocateNodeData && !relocateNode.$slotRefNode$) {
+                    relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
+                  }
+                }
+              });
+            }
+          } else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
+            relocateNodes.push({
+              $nodeToRelocate$: node
+            });
+          }
+        }
+      }
     }
-    if (propType & 1 /* String */) {
-      return String(propValue);
+    if (childNode.nodeType === 1 /* ElementNode */) {
+      markSlotContentForRelocation(childNode);
     }
-    return propValue;
   }
-  return propValue;
-};
-var getElement = (ref) => getHostRef(ref).$hostElement$ ;
-
-// src/runtime/event-emitter.ts
-var createEvent = (ref, name, flags) => {
-  const elm = getElement(ref);
-  return {
-    emit: (detail) => {
-      return emitEvent(elm, name, {
-        bubbles: !!(flags & 4 /* Bubbles */),
-        composed: !!(flags & 2 /* Composed */),
-        cancelable: !!(flags & 1 /* Cancellable */),
-        detail
-      });
-    }
-  };
 };
-var emitEvent = (elm, name, opts) => {
-  const ev = plt.ce(name, opts);
-  elm.dispatchEvent(ev);
-  return ev;
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
 };
-var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
-var registerStyle = (scopeId2, cssText, allowCS) => {
-  let style = styles.get(scopeId2);
-  if (supportsConstructableStylesheets && allowCS) {
-    style = style || new CSSStyleSheet();
-    if (typeof style === "string") {
-      style = cssText;
-    } else {
-      style.replaceSync(cssText);
+var insertBefore = (parent, newNode, reference) => {
+  if (typeof newNode["s-sn"] === "string") {
+    if (parent.getRootNode().nodeType !== 11 /* DOCUMENT_FRAGMENT_NODE */) {
+      patchParentNode(newNode);
     }
+    parent.insertBefore(newNode, reference);
+    const { slotNode } = findSlotFromSlottedNode(newNode);
+    if (slotNode) dispatchSlotChangeEvent(slotNode);
+    return newNode;
+  }
+  if (parent.__insertBefore) {
+    return parent.__insertBefore(newNode, reference);
   } else {
-    style = cssText;
+    return parent == null ? void 0 : parent.insertBefore(newNode, reference);
   }
-  styles.set(scopeId2, style);
 };
-var addStyle = (styleContainerNode, cmpMeta, mode) => {
-  var _a;
-  const scopeId2 = getScopeId(cmpMeta);
-  const style = styles.get(scopeId2);
-  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
-  if (style) {
-    if (typeof style === "string") {
-      styleContainerNode = styleContainerNode.head || styleContainerNode;
-      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-      let styleElm;
-      if (!appliedStyles) {
-        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
+var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
+  var _a, _b, _c, _d, _e;
+  const hostElm = hostRef.$hostElement$;
+  const cmpMeta = hostRef.$cmpMeta$;
+  const oldVNode = hostRef.$vnode$ || newVNode(null, null);
+  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+  hostTagName = hostElm.tagName;
+  if (cmpMeta.$attrsToReflect$) {
+    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+    cmpMeta.$attrsToReflect$.map(
+      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
+    );
+  }
+  if (isInitialLoad && rootVnode.$attrs$) {
+    for (const key of Object.keys(rootVnode.$attrs$)) {
+      if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
+        rootVnode.$attrs$[key] = hostElm[key];
       }
-      if (!appliedStyles.has(scopeId2)) {
-        if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
-          styleElm.innerHTML = style;
-        } else {
-          styleElm = document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`) || doc.createElement("style");
-          styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(doc);
-          if (nonce != null) {
-            styleElm.setAttribute("nonce", nonce);
-          }
-          if (!(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);
-            } else if ("host" in styleContainerNode) {
-              if (supportsConstructableStylesheets) {
-                const stylesheet = new CSSStyleSheet();
-                stylesheet.replaceSync(style);
-                styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
-              } else {
-                const existingStyleContainer = styleContainerNode.querySelector("style");
-                if (existingStyleContainer) {
-                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
-                } else {
-                  styleContainerNode.prepend(styleElm);
+    }
+  }
+  rootVnode.$tag$ = null;
+  rootVnode.$flags$ |= 4 /* isHost */;
+  hostRef.$vnode$ = rootVnode;
+  rootVnode.$elm$ = oldVNode.$elm$ = hostElm;
+  useNativeShadowDom = supportsShadow  ;
+  {
+    contentRef = hostElm["s-cr"];
+    checkSlotFallbackVisibility = false;
+  }
+  patch(oldVNode, rootVnode, isInitialLoad);
+  {
+    plt.$flags$ |= 1 /* isTmpDisconnected */;
+    if (checkSlotRelocate) {
+      markSlotContentForRelocation(rootVnode.$elm$);
+      for (const relocateData of relocateNodes) {
+        const nodeToRelocate = relocateData.$nodeToRelocate$;
+        if (!nodeToRelocate["s-ol"] && win.document) {
+          const orgLocationNode = win.document.createTextNode("");
+          orgLocationNode["s-nr"] = nodeToRelocate;
+          insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
+        }
+      }
+      for (const relocateData of relocateNodes) {
+        const nodeToRelocate = relocateData.$nodeToRelocate$;
+        const slotRefNode = relocateData.$slotRefNode$;
+        if (slotRefNode) {
+          const parentNodeRef = slotRefNode.parentNode;
+          let insertBeforeNode = slotRefNode.nextSibling;
+          if ((insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */)) {
+            let orgLocationNode = (_a = nodeToRelocate["s-ol"]) == null ? void 0 : _a.previousSibling;
+            while (orgLocationNode) {
+              let refNode = (_b = orgLocationNode["s-nr"]) != null ? _b : null;
+              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"])) {
+                  refNode = refNode == null ? void 0 : refNode.nextSibling;
+                }
+                if (!refNode || !refNode["s-nr"]) {
+                  insertBeforeNode = refNode;
+                  break;
                 }
               }
-            } else {
-              styleContainerNode.append(styleElm);
+              orgLocationNode = orgLocationNode.previousSibling;
             }
           }
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD") {
-            styleContainerNode.insertBefore(styleElm, null);
+          const parent = nodeToRelocate.__parentNode || nodeToRelocate.parentNode;
+          const nextSibling = nodeToRelocate.__nextSibling || nodeToRelocate.nextSibling;
+          if (!insertBeforeNode && parentNodeRef !== parent || nextSibling !== insertBeforeNode) {
+            if (nodeToRelocate !== insertBeforeNode) {
+              insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
+              if (nodeToRelocate.nodeType === 1 /* ElementNode */ && nodeToRelocate.tagName !== "SLOT-FB") {
+                nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : 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;
           }
         }
-        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
-          styleElm.innerHTML += SLOT_FB_CSS;
-        }
-        if (appliedStyles) {
-          appliedStyles.add(scopeId2);
+      }
+    }
+    if (checkSlotFallbackVisibility) {
+      updateFallbackSlotVisibility(rootVnode.$elm$);
+    }
+    plt.$flags$ &= ~1 /* isTmpDisconnected */;
+    relocateNodes.length = 0;
+  }
+  if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+    const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
+    for (const childNode of children) {
+      if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
+        if (isInitialLoad && childNode["s-ih"] == null) {
+          childNode["s-ih"] = (_e = childNode.hidden) != null ? _e : false;
         }
+        childNode.hidden = true;
       }
-    } else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
-      styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
     }
   }
-  return scopeId2;
-};
-var attachStyles = (hostRef) => {
-  const cmpMeta = hostRef.$cmpMeta$;
-  const elm = hostRef.$hostElement$;
-  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-  addStyle(
-    elm.getRootNode(),
-    cmpMeta);
-  endAttachStyles();
+  contentRef = void 0;
 };
-var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 
 // src/runtime/update-component.ts
 var attachToAncestor = (hostRef, ancestorComponent) => {
   if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
-    ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = r));
+    const index = ancestorComponent["s-p"].push(
+      new Promise(
+        (r) => hostRef.$onRenderResolve$ = () => {
+          ancestorComponent["s-p"].splice(index - 1, 1);
+          r();
+        }
+      )
+    );
   }
 };
 var scheduleUpdate = (hostRef, isInitialLoad) => {
@@ -1769,21 +1921,15 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
     {
       hostRef.$flags$ |= 256 /* isListenReady */;
       if (hostRef.$queuedListeners$) {
-        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
+        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
         hostRef.$queuedListeners$ = void 0;
       }
     }
-    {
-      maybePromise = safeCall(instance, "componentWillLoad");
-    }
+    maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
   } else {
-    {
-      maybePromise = safeCall(instance, "componentWillUpdate");
-    }
-  }
-  {
-    maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender"));
+    maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
   }
+  maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender", void 0, elm));
   endSchedule();
   return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -1853,14 +1999,13 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
+  safeCall(instance, "componentDidRender", void 0, elm);
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
-    {
-      safeCall(instance, "componentDidLoad");
-    }
+    safeCall(instance, "componentDidLoad", void 0, elm);
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);
@@ -1869,6 +2014,7 @@ var postUpdateComponent = (hostRef) => {
       }
     }
   } else {
+    safeCall(instance, "componentDidUpdate", void 0, elm);
     endPostUpdate();
   }
   {
@@ -1896,17 +2042,14 @@ var forceUpdate = (ref) => {
   }
 };
 var appDidLoad = (who) => {
-  {
-    addHydratedFlag(doc.documentElement);
-  }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
 };
-var safeCall = (instance, method, arg) => {
+var safeCall = (instance, method, arg, elm) => {
   if (instance && instance[method]) {
     try {
       return instance[method](arg);
     } catch (e) {
-      consoleError(e);
+      consoleError(e, elm);
     }
   }
   return void 0;
@@ -1948,6 +2091,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);
       }
     }
@@ -1984,62 +2132,69 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
-        if ((memberFlags & 2048 /* Getter */) === 0) {
+        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() {
-              return getValue(this, memberName);
-            },
-            set(newValue) {
-              setValue(this, memberName, newValue, cmpMeta);
-            },
-            configurable: true,
-            enumerable: true
-          });
-        } else if (flags & 1 /* isElementConstructor */ && memberFlags & 2048 /* Getter */) {
-          {
-            Object.defineProperty(prototype, memberName, {
-              get() {
+              {
+                if ((cmpMeta.$members$[memberName][0] & 2048 /* Getter */) === 0) {
+                  return getValue(this, memberName);
+                }
                 const ref = getHostRef(this);
                 const instance = ref ? ref.$lazyInstance$ : prototype;
                 if (!instance) return;
                 return instance[memberName];
-              },
-              configurable: true,
-              enumerable: true
-            });
-          }
-          if (memberFlags & 4096 /* Setter */) {
-            const origSetter = Object.getOwnPropertyDescriptor(prototype, memberName).set;
-            Object.defineProperty(prototype, memberName, {
-              set(newValue) {
-                const ref = getHostRef(this);
-                if (origSetter) {
-                  const currentValue = ref.$hostElement$[memberName];
-                  if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                    ref.$instanceValues$.set(memberName, currentValue);
-                  }
-                  origSetter.apply(this, [parsePropertyValue(newValue, cmpMeta.$members$[memberName][0])]);
-                  setValue(this, memberName, ref.$hostElement$[memberName], cmpMeta);
-                  return;
+              }
+            },
+            configurable: true,
+            enumerable: true
+          });
+        }
+        Object.defineProperty(prototype, memberName, {
+          set(newValue) {
+            const ref = getHostRef(this);
+            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)]);
+              newValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
+              setValue(this, memberName, newValue, cmpMeta);
+              return;
+            }
+            {
+              if ((flags & 1 /* isElementConstructor */) === 0 || (cmpMeta.$members$[memberName][0] & 4096 /* Setter */) === 0) {
+                setValue(this, memberName, newValue, cmpMeta);
+                if (flags & 1 /* isElementConstructor */ && !ref.$lazyInstance$) {
+                  ref.$onReadyPromise$.then(() => {
+                    if (cmpMeta.$members$[memberName][0] & 4096 /* Setter */ && ref.$lazyInstance$[memberName] !== ref.$instanceValues$.get(memberName)) {
+                      ref.$lazyInstance$[memberName] = newValue;
+                    }
+                  });
                 }
-                if (!ref) return;
-                const setterSetVal = () => {
-                  const currentValue = ref.$lazyInstance$[memberName];
-                  if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                    ref.$instanceValues$.set(memberName, currentValue);
-                  }
-                  ref.$lazyInstance$[memberName] = parsePropertyValue(newValue, cmpMeta.$members$[memberName][0]);
-                  setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
-                };
-                if (ref.$lazyInstance$) {
-                  setterSetVal();
-                } else {
-                  ref.$onReadyPromise$.then(() => setterSetVal());
+                return;
+              }
+              const setterSetVal = () => {
+                const currentValue = ref.$lazyInstance$[memberName];
+                if (!ref.$instanceValues$.get(memberName) && currentValue) {
+                  ref.$instanceValues$.set(memberName, currentValue);
                 }
+                ref.$lazyInstance$[memberName] = parsePropertyValue(newValue, memberFlags);
+                setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
+              };
+              if (ref.$lazyInstance$) {
+                setterSetVal();
+              } else {
+                ref.$onReadyPromise$.then(() => setterSetVal());
               }
-            });
+            }
           }
-        }
+        });
       } else if (flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
         Object.defineProperty(prototype, memberName, {
           value(...args) {
@@ -2080,8 +2235,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             return;
           }
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (!propDesc.get || !!propDesc.set) {
-            this[propName] = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
+          newValue = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
+          if (newValue !== this[propName] && (!propDesc.get || !!propDesc.set)) {
+            this[propName] = newValue;
           }
         });
       };
@@ -2111,7 +2267,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
     hostRef.$flags$ |= 32 /* hasInitializedComponent */;
     const bundleId = cmpMeta.$lazyBundleId$;
     if (bundleId) {
-      const CstrImport = loadModule(cmpMeta);
+      const CstrImport = loadModule(cmpMeta, hostRef);
       if (CstrImport && "then" in CstrImport) {
         const endLoad = uniqueTime();
         Cstr = await CstrImport;
@@ -2136,7 +2292,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       try {
         new Cstr(hostRef);
       } catch (e) {
-        consoleError(e);
+        consoleError(e, elm);
       }
       {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
@@ -2145,7 +2301,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
-      fireConnectedCallback(hostRef.$lazyInstance$);
+      fireConnectedCallback(hostRef.$lazyInstance$, elm);
     } else {
       Cstr = elm.constructor;
       const cmpTag = elm.localName;
@@ -2172,9 +2328,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
     schedule();
   }
 };
-var fireConnectedCallback = (instance) => {
+var fireConnectedCallback = (instance, elm) => {
   {
-    safeCall(instance, "connectedCallback");
+    safeCall(instance, "connectedCallback", void 0, elm);
   }
 };
 
@@ -2223,24 +2379,27 @@ var connectedCallback = (elm) => {
     } else {
       addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
-        fireConnectedCallback(hostRef.$lazyInstance$);
+        fireConnectedCallback(hostRef.$lazyInstance$, elm);
       } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-        hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
+        hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$, elm));
       }
     }
     endConnected();
   }
 };
 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;
   insertBefore(elm, contentRefElm, elm.firstChild);
 };
-var disconnectInstance = (instance) => {
+var disconnectInstance = (instance, elm) => {
   {
-    safeCall(instance, "disconnectedCallback");
+    safeCall(instance, "disconnectedCallback", void 0, elm || instance);
   }
 };
 var disconnectedCallback = async (elm) => {
@@ -2253,28 +2412,38 @@ var disconnectedCallback = async (elm) => {
       }
     }
     if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
-      disconnectInstance(hostRef.$lazyInstance$);
+      disconnectInstance(hostRef.$lazyInstance$, elm);
     } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-      hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
+      hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$, elm));
     }
   }
+  if (rootAppliedStyles.has(elm)) {
+    rootAppliedStyles.delete(elm);
+  }
+  if (elm.shadowRoot && rootAppliedStyles.has(elm.shadowRoot)) {
+    rootAppliedStyles.delete(elm.shadowRoot);
+  }
 };
 
 // src/runtime/bootstrap-lazy.ts
 var bootstrapLazy = (lazyBundles, options = {}) => {
   var _a;
+  if (!win.document) {
+    console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");
+    return;
+  }
   const endBootstrap = createTime();
   const cmpTags = [];
   const exclude = options.exclude || [];
   const customElements2 = win.customElements;
-  const head = doc.head;
+  const head = win.document.head;
   const metaCharset = /* @__PURE__ */ head.querySelector("meta[charset]");
-  const dataStyles = /* @__PURE__ */ doc.createElement("style");
+  const dataStyles = /* @__PURE__ */ win.document.createElement("style");
   const deferredConnectedCallbacks = [];
   let appLoadFallback;
   let isBootstrapping = true;
   Object.assign(plt, options);
-  plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", doc.baseURI).href;
+  plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", win.document.baseURI).href;
   {
     plt.$flags$ |= 2 /* appLoaded */;
   }
@@ -2330,6 +2499,17 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
         }
         disconnectedCallback() {
           plt.jmp(() => disconnectedCallback(this));
+          plt.raf(() => {
+            var _a3;
+            const hostRef = getHostRef(this);
+            const i2 = deferredConnectedCallbacks.findIndex((host) => host === this);
+            if (i2 > -1) {
+              deferredConnectedCallbacks.splice(i2, 1);
+            }
+            if (((_a3 = hostRef == null ? void 0 : hostRef.$vnode$) == null ? void 0 : _a3.$elm$) instanceof Node && !hostRef.$vnode$.$elm$.isConnected) {
+              delete hostRef.$vnode$.$elm$;
+            }
+          });
         }
         componentOnReady() {
           return getHostRef(this).$onReadyPromise$;
@@ -2357,7 +2537,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
     }
     if (dataStyles.innerHTML.length) {
       dataStyles.setAttribute("data-styles", "");
-      const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(doc);
+      const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
       if (nonce != null) {
         dataStyles.setAttribute("nonce", nonce);
       }
@@ -2378,9 +2558,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 // src/runtime/fragment.ts
 var Fragment = (_, children) => children;
 var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-  if (listeners) {
+  if (listeners && win.document) {
     listeners.map(([flags, name, method]) => {
-      const target = getHostListenerTarget(elm, flags) ;
+      const target = getHostListenerTarget(win.document, elm, flags) ;
       const handler = hostListenerProxy(hostRef, method);
       const opts = hostListenerOpts(flags);
       plt.ael(target, name, handler, opts);
@@ -2399,11 +2579,13 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
       }
     }
   } catch (e) {
-    consoleError(e);
+    consoleError(e, hostRef.$hostElement$);
   }
 };
-var getHostListenerTarget = (elm, flags) => {
-  if (flags & 4 /* TargetDocument */) return doc;
+var getHostListenerTarget = (doc, elm, flags) => {
+  if (flags & 4 /* TargetDocument */) {
+    return doc;
+  }
   return elm;
 };
 var hostListenerOpts = (flags) => supportsListenerOptions ? {
@@ -2416,4 +2598,4 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 export { Fragment as F, H, Host as a, bootstrapLazy as b, createEvent as c, getRenderingRef as d, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-fac2d5d2.js.map
+//# sourceMappingURL=index-1fb7a9a6.js.map