@vue/runtime-dom 3.6.0-alpha.2 → 3.6.0-alpha.3

package/dist/runtime-dom.global.js

@@ -1,12 +1,11 @@
 /**
-* @vue/runtime-dom v3.6.0-alpha.2
+* @vue/runtime-dom v3.6.0-alpha.3
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
 var VueRuntimeDOM = (function (exports) {
   'use strict';
 
-  /*! #__NO_SIDE_EFFECTS__ */
   // @__NO_SIDE_EFFECTS__
   function makeMap(str) {
     const map = /* @__PURE__ */ Object.create(null);
@@ -62,10 +61,10 @@ var VueRuntimeDOM = (function (exports) {
   );
   const cacheStringFunction = (fn) => {
     const cache = /* @__PURE__ */ Object.create(null);
-    return (str) => {
+    return ((str) => {
       const hit = cache[str];
       return hit || (cache[str] = fn(str));
-    };
+    });
   };
   const camelizeRE = /-(\w)/g;
   const camelizeReplacer = (_, c) => c ? c.toUpperCase() : "";
@@ -238,6 +237,9 @@ var VueRuntimeDOM = (function (exports) {
     if ((key === "width" || key === "height") && (tagName === "IMG" || tagName === "VIDEO" || tagName === "CANVAS" || tagName === "SOURCE")) {
       return true;
     }
+    if (key === "sandbox" && tagName === "IFRAME") {
+      return true;
+    }
     return false;
   }
 
@@ -427,6 +429,7 @@ var VueRuntimeDOM = (function (exports) {
   const notifyBuffer = [];
   let batchDepth = 0;
   let activeSub = void 0;
+  let globalVersion = 0;
   let notifyIndex = 0;
   let notifyBufferLength = 0;
   function setActiveSub(sub) {
@@ -449,17 +452,18 @@ var VueRuntimeDOM = (function (exports) {
     if (prevDep !== void 0 && prevDep.dep === dep) {
       return;
     }
-    let nextDep = void 0;
-    const recursedCheck = sub.flags & 4 /* RecursedCheck */;
-    if (recursedCheck) {
-      nextDep = prevDep !== void 0 ? prevDep.nextDep : sub.deps;
-      if (nextDep !== void 0 && nextDep.dep === dep) {
-        sub.depsTail = nextDep;
-        return;
-      }
+    const nextDep = prevDep !== void 0 ? prevDep.nextDep : sub.deps;
+    if (nextDep !== void 0 && nextDep.dep === dep) {
+      nextDep.version = globalVersion;
+      sub.depsTail = nextDep;
+      return;
     }
     const prevSub = dep.subsTail;
+    if (prevSub !== void 0 && prevSub.version === globalVersion && prevSub.sub === sub) {
+      return;
+    }
     const newLink = sub.depsTail = dep.subsTail = {
+      version: globalVersion,
       dep,
       sub,
       prevDep,
@@ -565,6 +569,7 @@ var VueRuntimeDOM = (function (exports) {
     } while (true);
   }
   function startTracking(sub) {
+    ++globalVersion;
     sub.depsTail = void 0;
     sub.flags = sub.flags & -57 | 4 /* RecursedCheck */;
     return setActiveSub(sub);
@@ -665,18 +670,12 @@ var VueRuntimeDOM = (function (exports) {
     } while (link2 !== void 0);
   }
   function isValidLink(checkLink, sub) {
-    const depsTail = sub.depsTail;
-    if (depsTail !== void 0) {
-      let link2 = sub.deps;
-      do {
-        if (link2 === checkLink) {
-          return true;
-        }
-        if (link2 === depsTail) {
-          break;
-        }
-        link2 = link2.nextDep;
-      } while (link2 !== void 0);
+    let link2 = sub.depsTail;
+    while (link2 !== void 0) {
+      if (link2 === checkLink) {
+        return true;
+      }
+      link2 = link2.prevDep;
     }
     return false;
   }
@@ -916,7 +915,7 @@ var VueRuntimeDOM = (function (exports) {
     join(separator) {
       return reactiveReadArray(this).join(separator);
     },
-    // keys() iterator only reads `length`, no optimisation required
+    // keys() iterator only reads `length`, no optimization required
     lastIndexOf(...args) {
       return searchProxy(this, "lastIndexOf", args);
     },
@@ -968,7 +967,7 @@ var VueRuntimeDOM = (function (exports) {
       iter._next = iter.next;
       iter.next = () => {
         const result = iter._next();
-        if (result.value) {
+        if (!result.done) {
           result.value = wrapValue(result.value);
         }
         return result;
@@ -1099,7 +1098,8 @@ var VueRuntimeDOM = (function (exports) {
         return res;
       }
       if (isRef(res)) {
-        return targetIsArray && isIntegerKey(key) ? res : res.value;
+        const value = targetIsArray && isIntegerKey(key) ? res : res.value;
+        return isReadonly2 && isObject(value) ? readonly(value) : value;
       }
       if (isObject(res)) {
         return isReadonly2 ? readonly(res) : reactive(res);
@@ -1121,7 +1121,13 @@ var VueRuntimeDOM = (function (exports) {
         }
         if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
           if (isOldValueReadonly) {
-            return false;
+            {
+              warn$2(
+                `Set operation on key "${String(key)}" failed: target is readonly.`,
+                target[key]
+              );
+            }
+            return true;
           } else {
             oldValue.value = value;
             return true;
@@ -1266,7 +1272,7 @@ var VueRuntimeDOM = (function (exports) {
       get size() {
         const target = this["__v_raw"];
         !readonly && track(toRaw(target), "iterate", ITERATE_KEY);
-        return Reflect.get(target, "size", target);
+        return target.size;
       },
       has(key) {
         const target = this["__v_raw"];
@@ -2269,11 +2275,11 @@ var VueRuntimeDOM = (function (exports) {
     if (depth <= 0 || !isObject(value) || value["__v_skip"]) {
       return value;
     }
-    seen = seen || /* @__PURE__ */ new Set();
-    if (seen.has(value)) {
+    seen = seen || /* @__PURE__ */ new Map();
+    if ((seen.get(value) || 0) >= depth) {
       return value;
     }
-    seen.add(value);
+    seen.set(value, depth);
     depth--;
     if (isRef(value)) {
       traverse(value.value, depth, seen);
@@ -2819,8 +2825,10 @@ var VueRuntimeDOM = (function (exports) {
         instance.hmrRerender();
       } else {
         const i = instance;
-        i.renderCache = [];
-        i.effect.run();
+        if (!(i.effect.flags & 1024)) {
+          i.renderCache = [];
+          i.effect.run();
+        }
       }
       nextTick(() => {
         isHmrUpdating = false;
@@ -2862,7 +2870,10 @@ var VueRuntimeDOM = (function (exports) {
             if (parent.vapor) {
               parent.hmrRerender();
             } else {
-              parent.effect.run();
+              if (!(parent.effect.flags & 1024)) {
+                parent.renderCache = [];
+                parent.effect.run();
+              }
             }
             nextTick(() => {
               isHmrUpdating = false;
@@ -2972,7 +2983,6 @@ var VueRuntimeDOM = (function (exports) {
       _devtoolsComponentRemoved(component);
     }
   };
-  /*! #__NO_SIDE_EFFECTS__ */
   // @__NO_SIDE_EFFECTS__
   function createDevtoolsComponentHook(hook) {
     return (component) => {
@@ -3158,9 +3168,6 @@ var VueRuntimeDOM = (function (exports) {
         insert(mainAnchor, container, anchor);
         const mount = (container2, anchor2) => {
           if (shapeFlag & 16) {
-            if (parentComponent && parentComponent.isCE) {
-              parentComponent.ce._teleportTarget = container2;
-            }
             mountChildren(
               children,
               container2,
@@ -3182,6 +3189,9 @@ var VueRuntimeDOM = (function (exports) {
             } else if (namespace !== "mathml" && isTargetMathML(target)) {
               namespace = "mathml";
             }
+            if (parentComponent && parentComponent.isCE) {
+              (parentComponent.ce._teleportTargets || (parentComponent.ce._teleportTargets = /* @__PURE__ */ new Set())).add(target);
+            }
             if (!disabled) {
               mount(target, targetAnchor);
               updateCssVars(n2, false);
@@ -3382,26 +3392,34 @@ var VueRuntimeDOM = (function (exports) {
   function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, {
     o: { nextSibling, parentNode, querySelector, insert, createText }
   }, hydrateChildren) {
+    function hydrateDisabledTeleport(node2, vnode2, targetStart, targetAnchor) {
+      vnode2.anchor = hydrateChildren(
+        nextSibling(node2),
+        vnode2,
+        parentNode(node2),
+        parentComponent,
+        parentSuspense,
+        slotScopeIds,
+        optimized
+      );
+      vnode2.targetStart = targetStart;
+      vnode2.targetAnchor = targetAnchor;
+    }
     const target = vnode.target = resolveTarget(
       vnode.props,
       querySelector
     );
+    const disabled = isTeleportDisabled(vnode.props);
     if (target) {
-      const disabled = isTeleportDisabled(vnode.props);
       const targetNode = target._lpa || target.firstChild;
       if (vnode.shapeFlag & 16) {
         if (disabled) {
-          vnode.anchor = hydrateChildren(
-            nextSibling(node),
+          hydrateDisabledTeleport(
+            node,
             vnode,
-            parentNode(node),
-            parentComponent,
-            parentSuspense,
-            slotScopeIds,
-            optimized
+            targetNode,
+            targetNode && nextSibling(targetNode)
           );
-          vnode.targetStart = targetNode;
-          vnode.targetAnchor = targetNode && nextSibling(targetNode);
         } else {
           vnode.anchor = nextSibling(node);
           let targetAnchor = targetNode;
@@ -3432,6 +3450,10 @@ var VueRuntimeDOM = (function (exports) {
         }
       }
       updateCssVars(vnode, disabled);
+    } else if (disabled) {
+      if (vnode.shapeFlag & 16) {
+        hydrateDisabledTeleport(node, vnode, node, nextSibling(node));
+      }
     }
     return vnode.anchor && nextSibling(vnode.anchor);
   }
@@ -3472,7 +3494,7 @@ var VueRuntimeDOM = (function (exports) {
       isMounted: false,
       isLeaving: false,
       isUnmounting: false,
-      leavingVNodes: /* @__PURE__ */ new Map()
+      leavingNodes: /* @__PURE__ */ new Map()
     };
     onMounted(() => {
       state.isMounted = true;
@@ -3504,7 +3526,7 @@ var VueRuntimeDOM = (function (exports) {
     onAppearCancelled: TransitionHookValidator
   };
   const recursiveGetSubtree = (instance) => {
-    const subTree = instance.subTree;
+    const subTree = instance.type.__vapor ? instance.block : instance.subTree;
     return subTree.component ? recursiveGetSubtree(subTree.component) : subTree;
   };
   const BaseTransitionImpl = {
@@ -3521,9 +3543,7 @@ var VueRuntimeDOM = (function (exports) {
         const child = findNonCommentChild(children);
         const rawProps = toRaw(props);
         const { mode } = rawProps;
-        if (mode && mode !== "in-out" && mode !== "out-in" && mode !== "default") {
-          warn$1(`invalid <transition> mode: ${mode}`);
-        }
+        checkTransitionMode(mode);
         if (state.isLeaving) {
           return emptyPlaceholder(child);
         }
@@ -3543,7 +3563,7 @@ var VueRuntimeDOM = (function (exports) {
           setTransitionHooks(innerChild, enterHooks);
         }
         let oldInnerChild = instance.subTree && getInnerChild$1(instance.subTree);
-        if (oldInnerChild && oldInnerChild.type !== Comment && !isSameVNodeType(innerChild, oldInnerChild) && recursiveGetSubtree(instance).type !== Comment) {
+        if (oldInnerChild && oldInnerChild.type !== Comment && !isSameVNodeType(oldInnerChild, innerChild) && recursiveGetSubtree(instance).type !== Comment) {
           let leavingHooks = resolveTransitionHooks(
             oldInnerChild,
             rawProps,
@@ -3612,15 +3632,53 @@ var VueRuntimeDOM = (function (exports) {
   }
   const BaseTransition = BaseTransitionImpl;
   function getLeavingNodesForType(state, vnode) {
-    const { leavingVNodes } = state;
-    let leavingVNodesCache = leavingVNodes.get(vnode.type);
+    const { leavingNodes } = state;
+    let leavingVNodesCache = leavingNodes.get(vnode.type);
     if (!leavingVNodesCache) {
       leavingVNodesCache = /* @__PURE__ */ Object.create(null);
-      leavingVNodes.set(vnode.type, leavingVNodesCache);
+      leavingNodes.set(vnode.type, leavingVNodesCache);
     }
     return leavingVNodesCache;
   }
   function resolveTransitionHooks(vnode, props, state, instance, postClone) {
+    const key = String(vnode.key);
+    const leavingVNodesCache = getLeavingNodesForType(state, vnode);
+    const context = {
+      setLeavingNodeCache: () => {
+        leavingVNodesCache[key] = vnode;
+      },
+      unsetLeavingNodeCache: () => {
+        if (leavingVNodesCache[key] === vnode) {
+          delete leavingVNodesCache[key];
+        }
+      },
+      earlyRemove: () => {
+        const leavingVNode = leavingVNodesCache[key];
+        if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el[leaveCbKey]) {
+          leavingVNode.el[leaveCbKey]();
+        }
+      },
+      cloneHooks: (vnode2) => {
+        const hooks = resolveTransitionHooks(
+          vnode2,
+          props,
+          state,
+          instance,
+          postClone
+        );
+        if (postClone) postClone(hooks);
+        return hooks;
+      }
+    };
+    return baseResolveTransitionHooks(context, props, state, instance);
+  }
+  function baseResolveTransitionHooks(context, props, state, instance) {
+    const {
+      setLeavingNodeCache,
+      unsetLeavingNodeCache,
+      earlyRemove,
+      cloneHooks
+    } = context;
     const {
       appear,
       mode,
@@ -3638,8 +3696,6 @@ var VueRuntimeDOM = (function (exports) {
       onAfterAppear,
       onAppearCancelled
     } = props;
-    const key = String(vnode.key);
-    const leavingVNodesCache = getLeavingNodesForType(state, vnode);
     const callHook = (hook, args) => {
       hook && callWithAsyncErrorHandling(
         hook,
@@ -3675,10 +3731,7 @@ var VueRuntimeDOM = (function (exports) {
             /* cancelled */
           );
         }
-        const leavingVNode = leavingVNodesCache[key];
-        if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el[leaveCbKey]) {
-          leavingVNode.el[leaveCbKey]();
-        }
+        earlyRemove();
         callHook(hook, [el]);
       },
       enter(el) {
@@ -3715,7 +3768,6 @@ var VueRuntimeDOM = (function (exports) {
         }
       },
       leave(el, remove) {
-        const key2 = String(vnode.key);
         if (el[enterCbKey$1]) {
           el[enterCbKey$1](
             true
@@ -3737,27 +3789,17 @@ var VueRuntimeDOM = (function (exports) {
             callHook(onAfterLeave, [el]);
           }
           el[leaveCbKey] = void 0;
-          if (leavingVNodesCache[key2] === vnode) {
-            delete leavingVNodesCache[key2];
-          }
+          unsetLeavingNodeCache(el);
         };
-        leavingVNodesCache[key2] = vnode;
+        setLeavingNodeCache(el);
         if (onLeave) {
           callAsyncHook(onLeave, [el, done]);
         } else {
           done();
         }
       },
-      clone(vnode2) {
-        const hooks2 = resolveTransitionHooks(
-          vnode2,
-          props,
-          state,
-          instance,
-          postClone
-        );
-        if (postClone) postClone(hooks2);
-        return hooks2;
+      clone(node) {
+        return cloneHooks(node);
       }
     };
     return hooks;
@@ -3791,8 +3833,15 @@ var VueRuntimeDOM = (function (exports) {
   }
   function setTransitionHooks(vnode, hooks) {
     if (vnode.shapeFlag & 6 && vnode.component) {
-      vnode.transition = hooks;
-      setTransitionHooks(vnode.component.subTree, hooks);
+      if (vnode.type.__vapor) {
+        getVaporInterface(vnode.component, vnode).setTransitionHooks(
+          vnode.component,
+          hooks
+        );
+      } else {
+        vnode.transition = hooks;
+        setTransitionHooks(vnode.component.subTree, hooks);
+      }
     } else if (vnode.shapeFlag & 128) {
       vnode.ssContent.transition = hooks.clone(vnode.ssContent);
       vnode.ssFallback.transition = hooks.clone(vnode.ssFallback);
@@ -3822,8 +3871,12 @@ var VueRuntimeDOM = (function (exports) {
     }
     return ret;
   }
+  function checkTransitionMode(mode) {
+    if (mode && mode !== "in-out" && mode !== "out-in" && mode !== "default") {
+      warn$1(`invalid <transition> mode: ${mode}`);
+    }
+  }
 
-  /*! #__NO_SIDE_EFFECTS__ */
   // @__NO_SIDE_EFFECTS__
   function defineComponent(options, extraOptions) {
     return isFunction(options) ? (
@@ -3876,6 +3929,7 @@ var VueRuntimeDOM = (function (exports) {
     return ret;
   }
 
+  const pendingSetRefMap = /* @__PURE__ */ new WeakMap();
   function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
     if (isArray(rawRef)) {
       rawRef.forEach(
@@ -3907,28 +3961,23 @@ var VueRuntimeDOM = (function (exports) {
     const oldRef = oldRawRef && oldRawRef.r;
     const refs = owner.refs === EMPTY_OBJ ? owner.refs = {} : owner.refs;
     const setupState = owner.setupState;
-    const rawSetupState = toRaw(setupState);
-    const canSetSetupRef = setupState === EMPTY_OBJ ? () => false : (key) => {
-      {
-        if (hasOwn(rawSetupState, key) && !isRef(rawSetupState[key])) {
-          warn$1(
-            `Template ref "${key}" used on a non-ref value. It will not work in the production build.`
-          );
-        }
-        if (knownTemplateRefs.has(rawSetupState[key])) {
-          return false;
-        }
-      }
-      return hasOwn(rawSetupState, key);
+    const canSetSetupRef = createCanSetSetupRefChecker(setupState);
+    const canSetRef = (ref2) => {
+      return !knownTemplateRefs.has(ref2);
     };
     if (oldRef != null && oldRef !== ref) {
+      invalidatePendingSetRef(oldRawRef);
       if (isString(oldRef)) {
         refs[oldRef] = null;
         if (canSetSetupRef(oldRef)) {
           setupState[oldRef] = null;
         }
       } else if (isRef(oldRef)) {
-        oldRef.value = null;
+        if (canSetRef(oldRef)) {
+          oldRef.value = null;
+        }
+        const oldRawRefAtom = oldRawRef;
+        if (oldRawRefAtom.k) refs[oldRawRefAtom.k] = null;
       }
     }
     if (isFunction(ref)) {
@@ -3939,7 +3988,7 @@ var VueRuntimeDOM = (function (exports) {
       if (_isString || _isRef) {
         const doSet = () => {
           if (rawRef.f) {
-            const existing = _isString ? canSetSetupRef(ref) ? setupState[ref] : refs[ref] : ref.value;
+            const existing = _isString ? canSetSetupRef(ref) ? setupState[ref] : refs[ref] : canSetRef(ref) || !rawRef.k ? ref.value : refs[rawRef.k];
             if (isUnmount) {
               isArray(existing) && remove(existing, refValue);
             } else {
@@ -3950,8 +3999,11 @@ var VueRuntimeDOM = (function (exports) {
                     setupState[ref] = refs[ref];
                   }
                 } else {
-                  ref.value = [refValue];
-                  if (rawRef.k) refs[rawRef.k] = ref.value;
+                  const newVal = [refValue];
+                  if (canSetRef(ref)) {
+                    ref.value = newVal;
+                  }
+                  if (rawRef.k) refs[rawRef.k] = newVal;
                 }
               } else if (!existing.includes(refValue)) {
                 existing.push(refValue);
@@ -3963,15 +4015,23 @@ var VueRuntimeDOM = (function (exports) {
               setupState[ref] = value;
             }
           } else if (_isRef) {
-            ref.value = value;
+            if (canSetRef(ref)) {
+              ref.value = value;
+            }
             if (rawRef.k) refs[rawRef.k] = value;
           } else {
             warn$1("Invalid template ref type:", ref, `(${typeof ref})`);
           }
         };
         if (value) {
-          queuePostRenderEffect(doSet, -1, parentSuspense);
+          const job = () => {
+            doSet();
+            pendingSetRefMap.delete(rawRef);
+          };
+          pendingSetRefMap.set(rawRef, job);
+          queuePostRenderEffect(job, -1, parentSuspense);
         } else {
+          invalidatePendingSetRef(rawRef);
           doSet();
         }
       } else {
@@ -3979,6 +4039,29 @@ var VueRuntimeDOM = (function (exports) {
       }
     }
   }
+  function createCanSetSetupRefChecker(setupState) {
+    const rawSetupState = toRaw(setupState);
+    return setupState === void 0 || setupState === EMPTY_OBJ ? NO : (key) => {
+      {
+        if (hasOwn(rawSetupState, key) && !isRef(rawSetupState[key])) {
+          warn$1(
+            `Template ref "${key}" used on a non-ref value. It will not work in the production build.`
+          );
+        }
+        if (knownTemplateRefs.has(rawSetupState[key])) {
+          return false;
+        }
+      }
+      return hasOwn(rawSetupState, key);
+    };
+  }
+  function invalidatePendingSetRef(rawRef) {
+    const pendingSetRef = pendingSetRefMap.get(rawRef);
+    if (pendingSetRef) {
+      pendingSetRef.flags |= 4;
+      pendingSetRefMap.delete(rawRef);
+    }
+  }
 
   let hasLoggedMismatchError = false;
   const logMismatchError = () => {
@@ -4123,6 +4206,12 @@ var VueRuntimeDOM = (function (exports) {
             );
           }
           break;
+        case VaporSlot:
+          nextNode = getVaporInterface(parentComponent, vnode).hydrateSlot(
+            vnode,
+            node
+          );
+          break;
         default:
           if (shapeFlag & 1) {
             if ((domType !== 1 || vnode.type.toLowerCase() !== node.tagName.toLowerCase()) && !isTemplateNode(node)) {
@@ -4138,9 +4227,6 @@ var VueRuntimeDOM = (function (exports) {
               );
             }
           } else if (shapeFlag & 6) {
-            if (vnode.type.__vapor) {
-              throw new Error("Vapor component hydration is not supported yet.");
-            }
             vnode.slotScopeIds = slotScopeIds;
             const container = parentNode(node);
             if (isFragmentStart) {
@@ -4150,15 +4236,25 @@ var VueRuntimeDOM = (function (exports) {
             } else {
               nextNode = nextSibling(node);
             }
-            mountComponent(
-              vnode,
-              container,
-              null,
-              parentComponent,
-              parentSuspense,
-              getContainerType(container),
-              optimized
-            );
+            if (vnode.type.__vapor) {
+              getVaporInterface(parentComponent, vnode).hydrate(
+                vnode,
+                node,
+                container,
+                null,
+                parentComponent
+              );
+            } else {
+              mountComponent(
+                vnode,
+                container,
+                null,
+                parentComponent,
+                parentSuspense,
+                getContainerType(container),
+                optimized
+              );
+            }
             if (isAsyncWrapper(vnode) && !vnode.type.__asyncResolved) {
               let subTree;
               if (isFragmentStart) {
@@ -4243,7 +4339,7 @@ var VueRuntimeDOM = (function (exports) {
           );
           let hasWarned = false;
           while (next) {
-            if (!isMismatchAllowed(el, 1 /* CHILDREN */)) {
+            if (!isMismatchAllowed(el, 1)) {
               if (!hasWarned) {
                 warn$1(
                   `Hydration children mismatch on`,
@@ -4264,14 +4360,16 @@ Server rendered element contains more child nodes than client vdom.`
           if (clientText[0] === "\n" && (el.tagName === "PRE" || el.tagName === "TEXTAREA")) {
             clientText = clientText.slice(1);
           }
-          if (el.textContent !== clientText) {
-            if (!isMismatchAllowed(el, 0 /* TEXT */)) {
+          const { textContent } = el;
+          if (textContent !== clientText && // innerHTML normalize \r\n or \r into a single \n in the DOM
+          textContent !== clientText.replace(/\r\n|\r/g, "\n")) {
+            if (!isMismatchAllowed(el, 0)) {
               warn$1(
                 `Hydration text content mismatch on`,
                 el,
                 `
-  - rendered on server: ${el.textContent}
-  - expected on client: ${vnode.children}`
+  - rendered on server: ${textContent}
+  - expected on client: ${clientText}`
               );
               logMismatchError();
             }
@@ -4347,7 +4445,7 @@ Server rendered element contains more child nodes than client vdom.`
         } else if (isText && !vnode.children) {
           insert(vnode.el = createText(""), container);
         } else {
-          if (!isMismatchAllowed(container, 1 /* CHILDREN */)) {
+          if (!isMismatchAllowed(container, 1)) {
             if (!hasWarned) {
               warn$1(
                 `Hydration children mismatch on`,
@@ -4397,7 +4495,7 @@ Server rendered element contains fewer child nodes than client vdom.`
       }
     };
     const handleMismatch = (node, vnode, parentComponent, parentSuspense, slotScopeIds, isFragment) => {
-      if (!isMismatchAllowed(node.parentElement, 1 /* CHILDREN */)) {
+      if (!isMismatchAllowed(node.parentElement, 1)) {
         warn$1(
           `Hydration node mismatch:
 - rendered on server:`,
@@ -4470,11 +4568,11 @@ Server rendered element contains fewer child nodes than client vdom.`
         parent = parent.parent;
       }
     };
-    const isTemplateNode = (node) => {
-      return node.nodeType === 1 && node.tagName === "TEMPLATE";
-    };
     return [hydrate, hydrateNode];
   }
+  const isTemplateNode = (node) => {
+    return node.nodeType === 1 && node.tagName === "TEMPLATE";
+  };
   function propHasMismatch(el, key, clientValue, vnode, instance) {
     let mismatchType;
     let mismatchKey;
@@ -4489,7 +4587,7 @@ Server rendered element contains fewer child nodes than client vdom.`
       }
       expected = normalizeClass(clientValue);
       if (!isSetEqual(toClassSet(actual || ""), toClassSet(expected))) {
-        mismatchType = 2 /* CLASS */;
+        mismatchType = 2;
         mismatchKey = `class`;
       }
     } else if (key === "style") {
@@ -4508,31 +4606,43 @@ Server rendered element contains fewer child nodes than client vdom.`
         resolveCssVars(instance, vnode, expectedMap);
       }
       if (!isMapEqual(actualMap, expectedMap)) {
-        mismatchType = 3 /* STYLE */;
+        mismatchType = 3;
         mismatchKey = "style";
       }
-    } else if (el instanceof SVGElement && isKnownSvgAttr(key) || el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key))) {
-      if (isBooleanAttr(key)) {
-        actual = el.hasAttribute(key);
-        expected = includeBooleanAttr(clientValue);
-      } else if (clientValue == null) {
-        actual = el.hasAttribute(key);
-        expected = false;
-      } else {
-        if (el.hasAttribute(key)) {
-          actual = el.getAttribute(key);
-        } else if (key === "value" && el.tagName === "TEXTAREA") {
-          actual = el.value;
-        } else {
-          actual = false;
-        }
-        expected = isRenderableAttrValue(clientValue) ? String(clientValue) : false;
-      }
+    } else if (isValidHtmlOrSvgAttribute(el, key)) {
+      ({ actual, expected } = getAttributeMismatch(el, key, clientValue));
       if (actual !== expected) {
-        mismatchType = 4 /* ATTRIBUTE */;
+        mismatchType = 4;
         mismatchKey = key;
       }
     }
+    return warnPropMismatch(el, mismatchKey, mismatchType, actual, expected);
+  }
+  function getAttributeMismatch(el, key, clientValue) {
+    let actual;
+    let expected;
+    if (isBooleanAttr(key)) {
+      actual = el.hasAttribute(key);
+      expected = includeBooleanAttr(clientValue);
+    } else if (clientValue == null) {
+      actual = el.hasAttribute(key);
+      expected = false;
+    } else {
+      if (el.hasAttribute(key)) {
+        actual = el.getAttribute(key);
+      } else if (key === "value" && el.tagName === "TEXTAREA") {
+        actual = el.value;
+      } else {
+        actual = false;
+      }
+      expected = isRenderableAttrValue(clientValue) ? String(clientValue) : false;
+    }
+    return { actual, expected };
+  }
+  function isValidHtmlOrSvgAttribute(el, key) {
+    return el instanceof SVGElement && isKnownSvgAttr(key) || el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key));
+  }
+  function warnPropMismatch(el, mismatchKey, mismatchType, actual, expected) {
     if (mismatchType != null && !isMismatchAllowed(el, mismatchType)) {
       const format = (v) => v === false ? `(not rendered)` : `${mismatchKey}="${v}"`;
       const preSegment = `Hydration ${MismatchTypeString[mismatchType]} mismatch on`;
@@ -4604,14 +4714,14 @@ Server rendered element contains fewer child nodes than client vdom.`
   }
   const allowMismatchAttr = "data-allow-mismatch";
   const MismatchTypeString = {
-    [0 /* TEXT */]: "text",
-    [1 /* CHILDREN */]: "children",
-    [2 /* CLASS */]: "class",
-    [3 /* STYLE */]: "style",
-    [4 /* ATTRIBUTE */]: "attribute"
+    [0]: "text",
+    [1]: "children",
+    [2]: "class",
+    [3]: "style",
+    [4]: "attribute"
   };
   function isMismatchAllowed(el, allowedType) {
-    if (allowedType === 0 /* TEXT */ || allowedType === 1 /* CHILDREN */) {
+    if (allowedType === 0 || allowedType === 1) {
       while (el && !el.hasAttribute(allowMismatchAttr)) {
         el = el.parentElement;
       }
@@ -4623,7 +4733,7 @@ Server rendered element contains fewer child nodes than client vdom.`
       return true;
     } else {
       const list = allowedAttr.split(",");
-      if (allowedType === 0 /* TEXT */ && list.includes("children")) {
+      if (allowedType === 0 && list.includes("children")) {
         return true;
       }
       return list.includes(MismatchTypeString[allowedType]);
@@ -4680,7 +4790,9 @@ Server rendered element contains fewer child nodes than client vdom.`
         hasHydrated = true;
         teardown();
         hydrate();
-        e.target.dispatchEvent(new e.constructor(e.type, e));
+        if (!(`$evt${e.type}` in e.target)) {
+          e.target.dispatchEvent(new e.constructor(e.type, e));
+        }
       }
     };
     const teardown = () => {
@@ -4722,104 +4834,46 @@ Server rendered element contains fewer child nodes than client vdom.`
   }
 
   const isAsyncWrapper = (i) => !!i.type.__asyncLoader;
-  /*! #__NO_SIDE_EFFECTS__ */
   // @__NO_SIDE_EFFECTS__
   function defineAsyncComponent(source) {
-    if (isFunction(source)) {
-      source = { loader: source };
-    }
     const {
-      loader,
-      loadingComponent,
-      errorComponent,
-      delay = 200,
-      hydrate: hydrateStrategy,
-      timeout,
-      // undefined = never times out
-      suspensible = true,
-      onError: userOnError
-    } = source;
-    let pendingRequest = null;
-    let resolvedComp;
-    let retries = 0;
-    const retry = () => {
-      retries++;
-      pendingRequest = null;
-      return load();
-    };
-    const load = () => {
-      let thisRequest;
-      return pendingRequest || (thisRequest = pendingRequest = loader().catch((err) => {
-        err = err instanceof Error ? err : new Error(String(err));
-        if (userOnError) {
-          return new Promise((resolve, reject) => {
-            const userRetry = () => resolve(retry());
-            const userFail = () => reject(err);
-            userOnError(err, userRetry, userFail, retries + 1);
-          });
-        } else {
-          throw err;
-        }
-      }).then((comp) => {
-        if (thisRequest !== pendingRequest && pendingRequest) {
-          return pendingRequest;
-        }
-        if (!comp) {
-          warn$1(
-            `Async component loader resolved to undefined. If you are using retry(), make sure to return its return value.`
-          );
-        }
-        if (comp && (comp.__esModule || comp[Symbol.toStringTag] === "Module")) {
-          comp = comp.default;
-        }
-        if (comp && !isObject(comp) && !isFunction(comp)) {
-          throw new Error(`Invalid async component load result: ${comp}`);
-        }
-        resolvedComp = comp;
-        return comp;
-      }));
-    };
+      load,
+      getResolvedComp,
+      setPendingRequest,
+      source: {
+        loadingComponent,
+        errorComponent,
+        delay,
+        hydrate: hydrateStrategy,
+        timeout,
+        suspensible = true
+      }
+    } = createAsyncComponentContext(source);
     return defineComponent({
       name: "AsyncComponentWrapper",
       __asyncLoader: load,
       __asyncHydrate(el, instance, hydrate) {
-        let patched = false;
-        const doHydrate = hydrateStrategy ? () => {
-          const performHydrate = () => {
-            if (patched) {
-              warn$1(
-                `Skipping lazy hydration for component '${getComponentName(resolvedComp)}': it was updated before lazy hydration performed.`
-              );
-              return;
-            }
-            hydrate();
-          };
-          const teardown = hydrateStrategy(
-            performHydrate,
-            (cb) => forEachElement(el, cb)
-          );
-          if (teardown) {
-            (instance.bum || (instance.bum = [])).push(teardown);
-          }
-          (instance.u || (instance.u = [])).push(() => patched = true);
-        } : hydrate;
-        if (resolvedComp) {
-          doHydrate();
-        } else {
-          load().then(() => !instance.isUnmounted && doHydrate());
-        }
+        performAsyncHydrate(
+          el,
+          instance,
+          hydrate,
+          getResolvedComp,
+          load,
+          hydrateStrategy
+        );
       },
       get __asyncResolved() {
-        return resolvedComp;
+        return getResolvedComp();
       },
       setup() {
         const instance = currentInstance;
         markAsyncBoundary(instance);
+        let resolvedComp = getResolvedComp();
         if (resolvedComp) {
           return () => createInnerComp(resolvedComp, instance);
         }
         const onError = (err) => {
-          pendingRequest = null;
+          setPendingRequest(null);
           handleError(
             err,
             instance,
@@ -4837,25 +4891,11 @@ Server rendered element contains fewer child nodes than client vdom.`
             }) : null;
           });
         }
-        const loaded = ref(false);
-        const error = ref();
-        const delayed = ref(!!delay);
-        if (delay) {
-          setTimeout(() => {
-            delayed.value = false;
-          }, delay);
-        }
-        if (timeout != null) {
-          setTimeout(() => {
-            if (!loaded.value && !error.value) {
-              const err = new Error(
-                `Async component timed out after ${timeout}ms.`
-              );
-              onError(err);
-              error.value = err;
-            }
-          }, timeout);
-        }
+        const { loaded, error, delayed } = useAsyncComponentState(
+          delay,
+          timeout,
+          onError
+        );
         load().then(() => {
           loaded.value = true;
           if (instance.parent && instance.parent.vnode && isKeepAlive(instance.parent.vnode)) {
@@ -4866,6 +4906,7 @@ Server rendered element contains fewer child nodes than client vdom.`
           error.value = err;
         });
         return () => {
+          resolvedComp = getResolvedComp();
           if (loaded.value && resolvedComp) {
             return createInnerComp(resolvedComp, instance);
           } else if (error.value && errorComponent) {
@@ -4873,19 +4914,124 @@ Server rendered element contains fewer child nodes than client vdom.`
               error: error.value
             });
           } else if (loadingComponent && !delayed.value) {
-            return createVNode(loadingComponent);
+            return createInnerComp(
+              loadingComponent,
+              instance
+            );
           }
         };
       }
-    });
-  }
-  function createInnerComp(comp, parent) {
-    const { ref: ref2, props, children, ce } = parent.vnode;
-    const vnode = createVNode(comp, props, children);
-    vnode.ref = ref2;
-    vnode.ce = ce;
-    delete parent.vnode.ce;
-    return vnode;
+    });
+  }
+  function createInnerComp(comp, parent) {
+    const { ref: ref2, props, children, ce } = parent.vnode;
+    const vnode = createVNode(comp, props, children);
+    vnode.ref = ref2;
+    vnode.ce = ce;
+    delete parent.vnode.ce;
+    return vnode;
+  }
+  function createAsyncComponentContext(source) {
+    if (isFunction(source)) {
+      source = { loader: source };
+    }
+    const { loader, onError: userOnError } = source;
+    let pendingRequest = null;
+    let resolvedComp;
+    let retries = 0;
+    const retry = () => {
+      retries++;
+      pendingRequest = null;
+      return load();
+    };
+    const load = () => {
+      let thisRequest;
+      return pendingRequest || (thisRequest = pendingRequest = loader().catch((err) => {
+        err = err instanceof Error ? err : new Error(String(err));
+        if (userOnError) {
+          return new Promise((resolve, reject) => {
+            const userRetry = () => resolve(retry());
+            const userFail = () => reject(err);
+            userOnError(err, userRetry, userFail, retries + 1);
+          });
+        } else {
+          throw err;
+        }
+      }).then((comp) => {
+        if (thisRequest !== pendingRequest && pendingRequest) {
+          return pendingRequest;
+        }
+        if (!comp) {
+          warn$1(
+            `Async component loader resolved to undefined. If you are using retry(), make sure to return its return value.`
+          );
+        }
+        if (comp && (comp.__esModule || comp[Symbol.toStringTag] === "Module")) {
+          comp = comp.default;
+        }
+        if (comp && !isObject(comp) && !isFunction(comp)) {
+          throw new Error(`Invalid async component load result: ${comp}`);
+        }
+        resolvedComp = comp;
+        return comp;
+      }));
+    };
+    return {
+      load,
+      source,
+      getResolvedComp: () => resolvedComp,
+      setPendingRequest: (request) => pendingRequest = request
+    };
+  }
+  const useAsyncComponentState = (delay, timeout, onError) => {
+    const loaded = ref(false);
+    const error = ref();
+    const delayed = ref(!!delay);
+    if (delay) {
+      setTimeout(() => {
+        delayed.value = false;
+      }, delay);
+    }
+    if (timeout != null) {
+      setTimeout(() => {
+        if (!loaded.value && !error.value) {
+          const err = new Error(`Async component timed out after ${timeout}ms.`);
+          onError(err);
+          error.value = err;
+        }
+      }, timeout);
+    }
+    return { loaded, error, delayed };
+  };
+  function performAsyncHydrate(el, instance, hydrate, getResolvedComp, load, hydrateStrategy) {
+    let patched = false;
+    (instance.bu || (instance.bu = [])).push(() => patched = true);
+    const performHydrate = () => {
+      if (patched) {
+        {
+          const resolvedComp = getResolvedComp();
+          warn$1(
+            `Skipping lazy hydration for component '${getComponentName(resolvedComp) || resolvedComp.__file}': it was updated before lazy hydration performed.`
+          );
+        }
+        return;
+      }
+      hydrate();
+    };
+    const doHydrate = hydrateStrategy ? () => {
+      const teardown = hydrateStrategy(
+        performHydrate,
+        (cb) => forEachElement(el, cb)
+      );
+      if (teardown) {
+        (instance.bum || (instance.bum = [])).push(teardown);
+      }
+    } : performHydrate;
+    if (getResolvedComp()) {
+      doHydrate();
+    } else {
+      load().then(() => !instance.isUnmounted && doHydrate());
+    }
   }
 
   const isKeepAlive = (vnode) => vnode.type.__isKeepAlive;
@@ -4910,86 +5056,37 @@ Server rendered element contains fewer child nodes than client vdom.`
         keepAliveInstance.__v_cache = cache;
       }
       const parentSuspense = keepAliveInstance.suspense;
+      const { renderer } = sharedContext;
       const {
-        renderer: {
-          p: patch,
-          m: move,
-          um: _unmount,
-          o: { createElement }
-        }
-      } = sharedContext;
+        um: _unmount,
+        o: { createElement }
+      } = renderer;
       const storageContainer = createElement("div");
+      sharedContext.getStorageContainer = () => storageContainer;
+      sharedContext.getCachedComponent = (vnode) => {
+        const key = vnode.key == null ? vnode.type : vnode.key;
+        return cache.get(key);
+      };
       sharedContext.activate = (vnode, container, anchor, namespace, optimized) => {
-        const instance = vnode.component;
-        move(
+        activate(
           vnode,
           container,
           anchor,
-          0,
+          renderer,
           keepAliveInstance,
-          parentSuspense
-        );
-        patch(
-          instance.vnode,
-          vnode,
-          container,
-          anchor,
-          instance,
           parentSuspense,
           namespace,
-          vnode.slotScopeIds,
           optimized
         );
-        queuePostRenderEffect(
-          () => {
-            instance.isDeactivated = false;
-            if (instance.a) {
-              invokeArrayFns(instance.a);
-            }
-            const vnodeHook = vnode.props && vnode.props.onVnodeMounted;
-            if (vnodeHook) {
-              invokeVNodeHook(vnodeHook, instance.parent, vnode);
-            }
-          },
-          void 0,
-          parentSuspense
-        );
-        {
-          devtoolsComponentAdded(instance);
-        }
       };
       sharedContext.deactivate = (vnode) => {
-        const instance = vnode.component;
-        invalidateMount(instance.m);
-        invalidateMount(instance.a);
-        move(
+        deactivate(
           vnode,
           storageContainer,
-          null,
-          1,
+          renderer,
           keepAliveInstance,
           parentSuspense
         );
-        queuePostRenderEffect(
-          () => {
-            if (instance.da) {
-              invokeArrayFns(instance.da);
-            }
-            const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;
-            if (vnodeHook) {
-              invokeVNodeHook(vnodeHook, instance.parent, vnode);
-            }
-            instance.isDeactivated = true;
-          },
-          void 0,
-          parentSuspense
-        );
-        {
-          devtoolsComponentAdded(instance);
-        }
-        {
-          instance.__keepAliveStorageContainer = storageContainer;
-        }
       };
       function unmount(vnode) {
         resetShapeFlag(vnode);
@@ -5136,7 +5233,7 @@ Server rendered element contains fewer child nodes than client vdom.`
   function onDeactivated(hook, target) {
     registerKeepAliveHook(hook, "da", target);
   }
-  function registerKeepAliveHook(hook, type, target = getCurrentInstance()) {
+  function registerKeepAliveHook(hook, type, target = getCurrentGenericInstance()) {
     const wrappedHook = hook.__wdc || (hook.__wdc = () => {
       let current = target;
       while (current) {
@@ -5150,8 +5247,9 @@ Server rendered element contains fewer child nodes than client vdom.`
     injectHook(type, wrappedHook, target);
     if (target) {
       let current = target.parent;
-      while (current && current.parent && current.parent.vnode) {
-        if (isKeepAlive(current.parent.vnode)) {
+      while (current && current.parent) {
+        let parent = current.parent;
+        if (isKeepAlive(parent.vapor ? parent : parent.vnode)) {
           injectToKeepAliveRoot(wrappedHook, type, target, current);
         }
         current = current.parent;
@@ -5177,6 +5275,71 @@ Server rendered element contains fewer child nodes than client vdom.`
   function getInnerChild(vnode) {
     return vnode.shapeFlag & 128 ? vnode.ssContent : vnode;
   }
+  function activate(vnode, container, anchor, { p: patch, m: move }, parentComponent, parentSuspense, namespace, optimized) {
+    const instance = vnode.component;
+    move(
+      vnode,
+      container,
+      anchor,
+      0,
+      parentComponent,
+      parentSuspense
+    );
+    patch(
+      instance.vnode,
+      vnode,
+      container,
+      anchor,
+      instance,
+      parentSuspense,
+      namespace,
+      vnode.slotScopeIds,
+      optimized
+    );
+    queuePostRenderEffect(
+      () => {
+        instance.isDeactivated = false;
+        if (instance.a) {
+          invokeArrayFns(instance.a);
+        }
+        const vnodeHook = vnode.props && vnode.props.onVnodeMounted;
+        if (vnodeHook) {
+          invokeVNodeHook(vnodeHook, instance.parent, vnode);
+        }
+      },
+      void 0,
+      parentSuspense
+    );
+    {
+      devtoolsComponentAdded(instance);
+    }
+  }
+  function deactivate(vnode, container, { m: move }, parentComponent, parentSuspense) {
+    const instance = vnode.component;
+    invalidateMount(instance.m);
+    invalidateMount(instance.a);
+    move(vnode, container, null, 1, parentComponent, parentSuspense);
+    queuePostRenderEffect(
+      () => {
+        if (instance.da) {
+          invokeArrayFns(instance.da);
+        }
+        const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;
+        if (vnodeHook) {
+          invokeVNodeHook(vnodeHook, instance.parent, vnode);
+        }
+        instance.isDeactivated = true;
+      },
+      void 0,
+      parentSuspense
+    );
+    {
+      devtoolsComponentAdded(instance);
+    }
+    {
+      instance.__keepAliveStorageContainer = container;
+    }
+  }
 
   function injectHook(type, hook, target = currentInstance, prepend = false) {
     if (target) {
@@ -5365,12 +5528,13 @@ If this is a native custom element, make sure to exclude it from component resol
       return ret;
     }
     if (currentRenderingInstance && (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce)) {
+      const hasProps = Object.keys(props).length > 0;
       if (name !== "default") props.name = name;
       return openBlock(), createBlock(
         Fragment,
         null,
         [createVNode("slot", props, fallback && fallback())],
-        64
+        hasProps ? -2 : 64
       );
     }
     if (slot && slot.length > 1) {
@@ -5384,6 +5548,7 @@ If this is a native custom element, make sure to exclude it from component resol
     }
     openBlock();
     const validSlotContent = slot && ensureValidVNode(slot(props));
+    ensureVaporSlotFallback(validSlotContent, fallback);
     const slotKey = props.key || // slot content array of a dynamic conditional slot may have a branch
     // key attached in the `createSlots` helper, respect that
     validSlotContent && validSlotContent.key;
@@ -5413,6 +5578,14 @@ If this is a native custom element, make sure to exclude it from component resol
       return true;
     }) ? vnodes : null;
   }
+  function ensureVaporSlotFallback(vnodes, fallback) {
+    let vaporSlot;
+    if (vnodes && vnodes.length === 1 && isVNode(vnodes[0]) && (vaporSlot = vnodes[0].vs)) {
+      if (!vaporSlot.fallback && fallback) {
+        vaporSlot.fallback = fallback;
+      }
+    }
+  }
 
   function toHandlers(obj, preserveCaseIfNecessary) {
     const ret = {};
@@ -5575,10 +5748,10 @@ If this is a native custom element, make sure to exclude it from component resol
       return true;
     },
     has({
-      _: { data, setupState, accessCache, ctx, appContext, propsOptions }
+      _: { data, setupState, accessCache, ctx, appContext, propsOptions, type }
     }, key) {
-      let normalizedProps;
-      return !!accessCache[key] || data !== EMPTY_OBJ && hasOwn(data, key) || hasSetupBinding(setupState, key) || (normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key) || hasOwn(ctx, key) || hasOwn(publicPropertiesMap, key) || hasOwn(appContext.config.globalProperties, key);
+      let normalizedProps, cssModules;
+      return !!(accessCache[key] || data !== EMPTY_OBJ && key[0] !== "$" && hasOwn(data, key) || hasSetupBinding(setupState, key) || (normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key) || hasOwn(ctx, key) || hasOwn(publicPropertiesMap, key) || hasOwn(appContext.config.globalProperties, key) || (cssModules = type.__cssModules) && cssModules[key]);
     },
     defineProperty(target, key, descriptor) {
       if (descriptor.get != null) {
@@ -5716,15 +5889,15 @@ If this is a native custom element, make sure to exclude it from component resol
     return null;
   }
   function useSlots() {
-    return getContext().slots;
+    return getContext("useSlots").slots;
   }
   function useAttrs() {
-    return getContext().attrs;
+    return getContext("useAttrs").attrs;
   }
-  function getContext() {
+  function getContext(calledFunctionName) {
     const i = getCurrentGenericInstance();
     if (!i) {
-      warn$1(`useContext() called without active instance.`);
+      warn$1(`${calledFunctionName}() called without active instance.`);
     }
     if (i.vapor) {
       return i;
@@ -5980,7 +6153,8 @@ If this is a native custom element, make sure to exclude it from component resol
         expose.forEach((key) => {
           Object.defineProperty(exposed, key, {
             get: () => publicThis[key],
-            set: (val) => publicThis[key] = val
+            set: (val) => publicThis[key] = val,
+            enumerable: true
           });
         });
       } else if (!instance.exposed) {
@@ -6850,7 +7024,7 @@ If you want to remount the same app, move your app creation logic into a factory
     return args.some((elem) => elem.toLowerCase() === "boolean");
   }
 
-  const isInternalKey = (key) => key[0] === "_" || key === "$stable";
+  const isInternalKey = (key) => key === "_" || key === "_ctx" || key === "$stable";
   const normalizeSlotValue = (value) => isArray(value) ? value.map(normalizeVNode) : [normalizeVNode(value)];
   const normalizeSlot = (key, rawSlot, ctx) => {
     if (rawSlot._n) {
@@ -6904,8 +7078,6 @@ If you want to remount the same app, move your app creation logic into a factory
   const initSlots = (instance, children, optimized) => {
     const slots = instance.slots = createInternalObject();
     if (instance.vnode.shapeFlag & 32) {
-      const cacheIndexes = children.__;
-      if (cacheIndexes) def(slots, "__", cacheIndexes, true);
       const type = children._;
       if (type) {
         assignSlots(slots, children, optimized);
@@ -6969,12 +7141,10 @@ If you want to remount the same app, move your app creation logic into a factory
     if (instance.appContext.config.performance && isSupported()) {
       const startTag = `vue-${type}-${instance.uid}`;
       const endTag = startTag + `:end`;
+      const measureName = `<${formatComponentName(instance, instance.type)}> ${type}`;
       perf.mark(endTag);
-      perf.measure(
-        `<${formatComponentName(instance, instance.type)}> ${type}`,
-        startTag,
-        endTag
-      );
+      perf.measure(measureName, startTag, endTag);
+      perf.clearMeasures(measureName);
       perf.clearMarks(startTag);
       perf.clearMarks(endTag);
     }
@@ -7213,15 +7383,25 @@ If you want to remount the same app, move your app creation logic into a factory
           optimized
         );
       } else {
-        patchElement(
-          n1,
-          n2,
-          parentComponent,
-          parentSuspense,
-          namespace,
-          slotScopeIds,
-          optimized
-        );
+        const customElement = !!(n1.el && n1.el._isVueCE) ? n1.el : null;
+        try {
+          if (customElement) {
+            customElement._beginPatch();
+          }
+          patchElement(
+            n1,
+            n2,
+            parentComponent,
+            parentSuspense,
+            namespace,
+            slotScopeIds,
+            optimized
+          );
+        } finally {
+          if (customElement) {
+            customElement._endPatch();
+          }
+        }
       }
     };
     const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
@@ -7272,16 +7452,20 @@ If you want to remount the same app, move your app creation logic into a factory
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
       }
-      const needCallTransitionHooks = needTransition(parentSuspense, transition);
-      if (needCallTransitionHooks) {
-        transition.beforeEnter(el);
+      if (transition) {
+        performTransitionEnter(
+          el,
+          transition,
+          () => hostInsert(el, container, anchor),
+          parentSuspense
+        );
+      } else {
+        hostInsert(el, container, anchor);
       }
-      hostInsert(el, container, anchor);
-      if ((vnodeHook = props && props.onVnodeMounted) || needCallTransitionHooks || dirs) {
+      if ((vnodeHook = props && props.onVnodeMounted) || dirs) {
         queuePostRenderEffect(
           () => {
             vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
-            needCallTransitionHooks && transition.enter(el);
             dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
           },
           void 0,
@@ -7298,21 +7482,9 @@ If you want to remount the same app, move your app creation logic into a factory
           hostSetScopeId(el, slotScopeIds[i]);
         }
       }
-      let subTree = parentComponent && parentComponent.subTree;
-      if (subTree) {
-        if (subTree.patchFlag > 0 && subTree.patchFlag & 2048) {
-          subTree = filterSingleRoot(subTree.children) || subTree;
-        }
-        if (vnode === subTree || isSuspense(subTree.type) && (subTree.ssContent === vnode || subTree.ssFallback === vnode)) {
-          const parentVNode = parentComponent.vnode;
-          setScopeId(
-            el,
-            parentVNode,
-            parentVNode.scopeId,
-            parentVNode.slotScopeIds,
-            parentComponent.parent
-          );
-        }
+      const inheritedScopeIds = getInheritedScopeIds(vnode, parentComponent);
+      for (let i = 0; i < inheritedScopeIds.length; i++) {
+        hostSetScopeId(el, inheritedScopeIds[i]);
       }
     };
     const mountChildren = (children, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, start = 0) => {
@@ -7553,12 +7725,21 @@ If you want to remount the same app, move your app creation logic into a factory
       n2.slotScopeIds = slotScopeIds;
       if (n2.type.__vapor) {
         if (n1 == null) {
-          getVaporInterface(parentComponent, n2).mount(
-            n2,
-            container,
-            anchor,
-            parentComponent
-          );
+          if (n2.shapeFlag & 512) {
+            getVaporInterface(parentComponent, n2).activate(
+              n2,
+              container,
+              anchor,
+              parentComponent
+            );
+          } else {
+            getVaporInterface(parentComponent, n2).mount(
+              n2,
+              container,
+              anchor,
+              parentComponent
+            );
+          }
         } else {
           getVaporInterface(parentComponent, n2).update(
             n1,
@@ -7621,6 +7802,7 @@ If you want to remount the same app, move your app creation logic into a factory
         if (!initialVNode.el) {
           const placeholder = instance.subTree = createVNode(Comment);
           processCommentNode(null, placeholder, container, anchor);
+          initialVNode.placeholder = placeholder.el;
         }
       } else {
         setupRenderEffect(
@@ -8161,7 +8343,11 @@ If you want to remount the same app, move your app creation logic into a factory
         for (i = toBePatched - 1; i >= 0; i--) {
           const nextIndex = s2 + i;
           const nextChild = c2[nextIndex];
-          const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;
+          const anchorVNode = c2[nextIndex + 1];
+          const anchor = nextIndex + 1 < l2 ? (
+            // #13559, fallback to el placeholder for unresolved async component
+            anchorVNode.el || anchorVNode.placeholder
+          ) : parentAnchor;
           if (newIndexToOldIndexMap[i] === 0) {
             patch(
               null,
@@ -8241,12 +8427,12 @@ If you want to remount the same app, move your app creation logic into a factory
       const needTransition2 = moveType !== 2 && shapeFlag & 1 && transition;
       if (needTransition2) {
         if (moveType === 0) {
-          transition.beforeEnter(el);
-          hostInsert(el, container, anchor);
-          queuePostRenderEffect(
-            () => transition.enter(el),
-            void 0,
-            parentSuspense
+          performTransitionEnter(
+            el,
+            transition,
+            () => hostInsert(el, container, anchor),
+            parentSuspense,
+            true
           );
         } else {
           const { leave, delayLeave, afterLeave } = transition;
@@ -8258,6 +8444,12 @@ If you want to remount the same app, move your app creation logic into a factory
             }
           };
           const performLeave = () => {
+            if (el._isLeaving) {
+              el[leaveCbKey](
+                true
+                /* cancelled */
+              );
+            }
             leave(el, () => {
               remove2();
               afterLeave && afterLeave();
@@ -8297,7 +8489,14 @@ If you want to remount the same app, move your app creation logic into a factory
         parentComponent.renderCache[cacheIndex] = void 0;
       }
       if (shapeFlag & 256) {
-        parentComponent.ctx.deactivate(vnode);
+        if (vnode.type.__vapor) {
+          getVaporInterface(parentComponent, vnode).deactivate(
+            vnode,
+            parentComponent.ctx.getStorageContainer()
+          );
+        } else {
+          parentComponent.ctx.deactivate(vnode);
+        }
         return;
       }
       const shouldInvokeDirs = shapeFlag & 1 && dirs;
@@ -8385,22 +8584,15 @@ If you want to remount the same app, move your app creation logic into a factory
         removeStaticNode(vnode);
         return;
       }
-      const performRemove = () => {
-        hostRemove(el);
-        if (transition && !transition.persisted && transition.afterLeave) {
-          transition.afterLeave();
-        }
-      };
-      if (vnode.shapeFlag & 1 && transition && !transition.persisted) {
-        const { leave, delayLeave } = transition;
-        const performLeave = () => leave(el, performRemove);
-        if (delayLeave) {
-          delayLeave(vnode.el, performRemove, performLeave);
-        } else {
-          performLeave();
-        }
+      if (transition) {
+        performTransitionLeave(
+          el,
+          transition,
+          () => hostRemove(el),
+          !!(vnode.shapeFlag & 1)
+        );
       } else {
-        performRemove();
+        hostRemove(el);
       }
     };
     const removeFragment = (cur, end) => {
@@ -8416,27 +8608,12 @@ If you want to remount the same app, move your app creation logic into a factory
       if (instance.type.__hmrId) {
         unregisterHMR(instance);
       }
-      const {
-        bum,
-        scope,
-        effect,
-        subTree,
-        um,
-        m,
-        a,
-        parent,
-        slots: { __: slotCacheKeys }
-      } = instance;
+      const { bum, scope, effect, subTree, um, m, a } = instance;
       invalidateMount(m);
       invalidateMount(a);
       if (bum) {
         invokeArrayFns(bum);
       }
-      if (parent && isArray(slotCacheKeys)) {
-        slotCacheKeys.forEach((v) => {
-          parent.renderCache[v] = void 0;
-        });
-      }
       scope.stop();
       if (effect) {
         effect.stop();
@@ -8450,12 +8627,6 @@ If you want to remount the same app, move your app creation logic into a factory
         void 0,
         parentSuspense
       );
-      if (parentSuspense && parentSuspense.pendingBranch && !parentSuspense.isUnmounted && instance.asyncDep && !instance.asyncResolved && instance.suspenseId === parentSuspense.pendingId) {
-        parentSuspense.deps--;
-        if (parentSuspense.deps === 0) {
-          parentSuspense.resolve();
-        }
-      }
       {
         devtoolsComponentRemoved(instance);
       }
@@ -8468,7 +8639,7 @@ If you want to remount the same app, move your app creation logic into a factory
     const getNextHostNode = (vnode) => {
       if (vnode.shapeFlag & 6) {
         if (vnode.type.__vapor) {
-          return hostNextSibling(vnode.component.block);
+          return hostNextSibling(vnode.anchor);
         }
         return getNextHostNode(vnode.component.subTree);
       }
@@ -8546,6 +8717,7 @@ If you want to remount the same app, move your app creation logic into a factory
     return {
       render,
       hydrate,
+      hydrateNode,
       internals,
       createApp: createAppAPI(
         mountApp,
@@ -8585,7 +8757,8 @@ If you want to remount the same app, move your app creation logic into a factory
           if (!shallow && c2.patchFlag !== -2)
             traverseStaticChildren(c1, c2);
         }
-        if (c2.type === Text) {
+        if (c2.type === Text && // avoid cached text nodes retaining detached dom nodes
+        c2.patchFlag !== -1) {
           c2.el = c1.el;
         }
         if (c2.type === Comment && !c2.el) {
@@ -8598,7 +8771,7 @@ If you want to remount the same app, move your app creation logic into a factory
     }
   }
   function locateNonHydratedAsyncRoot(instance) {
-    const subComponent = instance.vapor ? null : instance.subTree.component;
+    const subComponent = instance.subTree && instance.subTree.component;
     if (subComponent) {
       if (subComponent.asyncDep && !subComponent.asyncResolved) {
         return subComponent;
@@ -8613,6 +8786,34 @@ If you want to remount the same app, move your app creation logic into a factory
         hooks[i].flags |= 4;
     }
   }
+  function performTransitionEnter(el, transition, insert, parentSuspense, force = false) {
+    if (force || needTransition(parentSuspense, transition)) {
+      transition.beforeEnter(el);
+      insert();
+      queuePostRenderEffect(() => transition.enter(el), void 0, parentSuspense);
+    } else {
+      insert();
+    }
+  }
+  function performTransitionLeave(el, transition, remove, isElement = true) {
+    const performRemove = () => {
+      remove();
+      if (transition && !transition.persisted && transition.afterLeave) {
+        transition.afterLeave();
+      }
+    };
+    if (isElement && transition && !transition.persisted) {
+      const { leave, delayLeave } = transition;
+      const performLeave = () => leave(el, performRemove);
+      if (delayLeave) {
+        delayLeave(el, performRemove, performLeave);
+      } else {
+        performLeave();
+      }
+    } else {
+      performRemove();
+    }
+  }
   function getVaporInterface(instance, vnode) {
     const ctx = instance ? instance.appContext : vnode.appContext;
     const res = ctx && ctx.vapor;
@@ -8627,6 +8828,32 @@ app.use(vaporInteropPlugin)
     }
     return res;
   }
+  function getInheritedScopeIds(vnode, parentComponent) {
+    const inheritedScopeIds = [];
+    let currentParent = parentComponent;
+    let currentVNode = vnode;
+    while (currentParent) {
+      let subTree = currentParent.subTree;
+      if (!subTree) break;
+      if (subTree.patchFlag > 0 && subTree.patchFlag & 2048) {
+        subTree = filterSingleRoot(subTree.children) || subTree;
+      }
+      if (currentVNode === subTree || isSuspense(subTree.type) && (subTree.ssContent === currentVNode || subTree.ssFallback === currentVNode)) {
+        const parentVNode = currentParent.vnode;
+        if (parentVNode.scopeId) {
+          inheritedScopeIds.push(parentVNode.scopeId);
+        }
+        if (parentVNode.slotScopeIds) {
+          inheritedScopeIds.push(...parentVNode.slotScopeIds);
+        }
+        currentVNode = parentVNode;
+        currentParent = currentParent.parent;
+      } else {
+        break;
+      }
+    }
+    return inheritedScopeIds;
+  }
 
   const ssrContextKey = Symbol.for("v-scx");
   const useSSRContext = () => {
@@ -8938,8 +9165,9 @@ app.use(vaporInteropPlugin)
   function defaultPropGetter(props, key) {
     return props[key];
   }
+  const mixinEmitsCache = /* @__PURE__ */ new WeakMap();
   function normalizeEmitsOptions(comp, appContext, asMixin = false) {
-    const cache = appContext.emitsCache;
+    const cache = asMixin ? mixinEmitsCache : appContext.emitsCache;
     const cached = cache.get(comp);
     if (cached !== void 0) {
       return cached;
@@ -9387,7 +9615,7 @@ app.use(vaporInteropPlugin)
     const { activeBranch, pendingBranch, isInFallback, isHydrating } = suspense;
     if (pendingBranch) {
       suspense.pendingBranch = newBranch;
-      if (isSameVNodeType(newBranch, pendingBranch)) {
+      if (isSameVNodeType(pendingBranch, newBranch)) {
         patch(
           pendingBranch,
           newBranch,
@@ -9458,7 +9686,7 @@ app.use(vaporInteropPlugin)
             );
             setActiveBranch(suspense, newFallback);
           }
-        } else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
+        } else if (activeBranch && isSameVNodeType(activeBranch, newBranch)) {
           patch(
             activeBranch,
             newBranch,
@@ -9489,7 +9717,7 @@ app.use(vaporInteropPlugin)
         }
       }
     } else {
-      if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
+      if (activeBranch && isSameVNodeType(activeBranch, newBranch)) {
         patch(
           activeBranch,
           newBranch,
@@ -9602,7 +9830,8 @@ app.use(vaporInteropPlugin)
           pendingId,
           effects,
           parentComponent: parentComponent2,
-          container: container2
+          container: container2,
+          isInFallback
         } = suspense;
         let delayEnter = false;
         if (suspense.isHydrating) {
@@ -9620,6 +9849,9 @@ app.use(vaporInteropPlugin)
                   parentComponent2
                 );
                 queuePostFlushCb(effects);
+                if (isInFallback && vnode2.ssFallback) {
+                  vnode2.ssFallback.el = null;
+                }
               }
             };
           }
@@ -9628,6 +9860,9 @@ app.use(vaporInteropPlugin)
               anchor = next(activeBranch);
             }
             unmount(activeBranch, parentComponent2, suspense, true);
+            if (!delayEnter && isInFallback && vnode2.ssFallback) {
+              vnode2.ssFallback.el = null;
+            }
           }
           if (!delayEnter) {
             move(
@@ -9752,6 +9987,7 @@ app.use(vaporInteropPlugin)
             optimized2
           );
           if (placeholder) {
+            vnode2.placeholder = null;
             remove(placeholder);
           }
           updateHOCHostEl(instance, vnode2.el);
@@ -9957,15 +10193,11 @@ app.use(vaporInteropPlugin)
     );
   };
   const normalizeKey = ({ key }) => key != null ? key : null;
-  const normalizeRef = ({
-    ref,
-    ref_key,
-    ref_for
-  }) => {
+  const normalizeRef = ({ ref, ref_key, ref_for }, i = currentRenderingInstance) => {
     if (typeof ref === "number") {
       ref = "" + ref;
     }
-    return ref != null ? isString(ref) || isRef(ref) || isFunction(ref) ? { i: currentRenderingInstance, r: ref, k: ref_key, f: !!ref_for } : ref : null;
+    return ref != null ? isString(ref) || isRef(ref) || isFunction(ref) ? { i, r: ref, k: ref_key, f: !!ref_for } : ref : null;
   };
   function createBaseVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, shapeFlag = type === Fragment ? 0 : 1, isBlockNode = false, needFullChildrenNormalization = false) {
     const vnode = {
@@ -10131,6 +10363,7 @@ Component that was made reactive: `,
       suspense: vnode.suspense,
       ssContent: vnode.ssContent && cloneVNode(vnode.ssContent),
       ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback),
+      placeholder: vnode.placeholder,
       el: vnode.el,
       anchor: vnode.anchor,
       ctx: vnode.ctx,
@@ -10643,7 +10876,7 @@ Component that was made reactive: `,
       return instance.proxy;
     }
   }
-  const classifyRE = /(?:^|[-_])(\w)/g;
+  const classifyRE = /(?:^|[-_])\w/g;
   const classify = (str) => str.replace(classifyRE, (c) => c.toUpperCase()).replace(/[-_]/g, "");
   function getComponentName(Component, includeInferred = true) {
     return isFunction(Component) ? Component.displayName || Component.name : Component.name || includeInferred && Component.__name;
@@ -10679,23 +10912,28 @@ Component that was made reactive: `,
   };
 
   function h(type, propsOrChildren, children) {
-    const l = arguments.length;
-    if (l === 2) {
-      if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
-        if (isVNode(propsOrChildren)) {
-          return createVNode(type, null, [propsOrChildren]);
+    try {
+      setBlockTracking(-1);
+      const l = arguments.length;
+      if (l === 2) {
+        if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
+          if (isVNode(propsOrChildren)) {
+            return createVNode(type, null, [propsOrChildren]);
+          }
+          return createVNode(type, propsOrChildren);
+        } else {
+          return createVNode(type, null, propsOrChildren);
         }
-        return createVNode(type, propsOrChildren);
       } else {
-        return createVNode(type, null, propsOrChildren);
-      }
-    } else {
-      if (l > 3) {
-        children = Array.prototype.slice.call(arguments, 2);
-      } else if (l === 3 && isVNode(children)) {
-        children = [children];
+        if (l > 3) {
+          children = Array.prototype.slice.call(arguments, 2);
+        } else if (l === 3 && isVNode(children)) {
+          children = [children];
+        }
+        return createVNode(type, propsOrChildren, children);
       }
-      return createVNode(type, propsOrChildren, children);
+    } finally {
+      setBlockTracking(1);
     }
   }
 
@@ -10905,7 +11143,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.6.0-alpha.2";
+  const version = "3.6.0-alpha.3";
   const warn = warn$1 ;
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const devtools = devtools$1 ;
@@ -11122,11 +11360,11 @@ Component that was made reactive: `,
         const resolve = () => finishLeave(el, done);
         addTransitionClass(el, leaveFromClass);
         if (!el._enterCancelled) {
-          forceReflow();
+          forceReflow(el);
           addTransitionClass(el, leaveActiveClass);
         } else {
           addTransitionClass(el, leaveActiveClass);
-          forceReflow();
+          forceReflow(el);
         }
         nextFrame(() => {
           if (!el._isLeaving) {
@@ -11252,7 +11490,7 @@ Component that was made reactive: `,
       type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION : ANIMATION : null;
       propCount = type ? type === TRANSITION ? transitionDurations.length : animationDurations.length : 0;
     }
-    const hasTransform = type === TRANSITION && /\b(transform|all)(,|$)/.test(
+    const hasTransform = type === TRANSITION && /\b(?:transform|all)(?:,|$)/.test(
       getStyleProperties(`${TRANSITION}Property`).toString()
     );
     return {
@@ -11272,8 +11510,9 @@ Component that was made reactive: `,
     if (s === "auto") return 0;
     return Number(s.slice(0, -1).replace(",", ".")) * 1e3;
   }
-  function forceReflow() {
-    return document.body.offsetHeight;
+  function forceReflow(el) {
+    const targetDocument = el ? el.ownerDocument : document;
+    return targetDocument.body.offsetHeight;
   }
 
   function patchClass(el, value, isSVG) {
@@ -11293,6 +11532,8 @@ Component that was made reactive: `,
   const vShowOriginalDisplay = Symbol("_vod");
   const vShowHidden = Symbol("_vsh");
   const vShow = {
+    // used for prop mismatch check during hydration
+    name: "show",
     beforeMount(el, { value }, { transition }) {
       el[vShowOriginalDisplay] = el.style.display === "none" ? "" : el.style.display;
       if (transition && value) {
@@ -11326,9 +11567,6 @@ Component that was made reactive: `,
       setDisplay(el, value);
     }
   };
-  {
-    vShow.name = "show";
-  }
   function setDisplay(el, value) {
     el.style.display = value ? el[vShowOriginalDisplay] : "none";
     el[vShowHidden] = !value;
@@ -11407,7 +11645,7 @@ Component that was made reactive: `,
     }
   }
 
-  const displayRE = /(^|;)\s*display\s*:/;
+  const displayRE = /(?:^|;)\s*display\s*:/;
   function patchStyle(el, prev, next) {
     const style = el.style;
     const isCssString = isString(next);
@@ -11712,11 +11950,10 @@ Expected function or array of functions, received type ${typeof value}.`
   }
 
   const REMOVAL = {};
-  /*! #__NO_SIDE_EFFECTS__ */
   // @__NO_SIDE_EFFECTS__
   function defineCustomElement(options, extraOptions, _createApp) {
-    const Comp = defineComponent(options, extraOptions);
-    if (isPlainObject(Comp)) extend(Comp, extraOptions);
+    let Comp = defineComponent(options, extraOptions);
+    if (isPlainObject(Comp)) Comp = extend({}, Comp, extraOptions);
     class VueCustomElement extends VueElement {
       constructor(initialProps) {
         super(Comp, initialProps, _createApp);
@@ -11725,10 +11962,9 @@ Expected function or array of functions, received type ${typeof value}.`
     VueCustomElement.def = Comp;
     return VueCustomElement;
   }
-  /*! #__NO_SIDE_EFFECTS__ */
-  const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
+  const defineSSRCustomElement = (/* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
     return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
-  };
+  });
   const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
   };
   class VueElement extends BaseClass {
@@ -11752,6 +11988,8 @@ Expected function or array of functions, received type ${typeof value}.`
       this._nonce = this._def.nonce;
       this._connected = false;
       this._resolved = false;
+      this._patching = false;
+      this._dirty = false;
       this._numberProps = null;
       this._styleChildren = /* @__PURE__ */ new WeakSet();
       this._ob = null;
@@ -11764,7 +12002,11 @@ Expected function or array of functions, received type ${typeof value}.`
           );
         }
         if (_def.shadowRoot !== false) {
-          this.attachShadow({ mode: "open" });
+          this.attachShadow(
+            extend({}, _def.shadowRootOptions, {
+              mode: "open"
+            })
+          );
           this._root = this.shadowRoot;
         } else {
           this._root = this;
@@ -11824,9 +12066,18 @@ Expected function or array of functions, received type ${typeof value}.`
           this._app && this._app.unmount();
           if (this._instance) this._instance.ce = void 0;
           this._app = this._instance = null;
+          if (this._teleportTargets) {
+            this._teleportTargets.clear();
+            this._teleportTargets = void 0;
+          }
         }
       });
     }
+    _processMutations(mutations) {
+      for (const m of mutations) {
+        this._setAttr(m.attributeName);
+      }
+    }
     /**
      * resolve inner component definition (handle possible async component)
      */
@@ -11837,11 +12088,7 @@ Expected function or array of functions, received type ${typeof value}.`
       for (let i = 0; i < this.attributes.length; i++) {
         this._setAttr(this.attributes[i].name);
       }
-      this._ob = new MutationObserver((mutations) => {
-        for (const m of mutations) {
-          this._setAttr(m.attributeName);
-        }
-      });
+      this._ob = new MutationObserver(this._processMutations.bind(this));
       this._ob.observe(this, { attributes: true });
       const resolve = (def, isAsync = false) => {
         this._resolved = true;
@@ -11918,7 +12165,7 @@ Expected function or array of functions, received type ${typeof value}.`
             return this._getProp(key);
           },
           set(val) {
-            this._setProp(key, val, true, true);
+            this._setProp(key, val, true, !this._patching);
           }
         });
       }
@@ -11944,6 +12191,7 @@ Expected function or array of functions, received type ${typeof value}.`
      */
     _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
       if (val !== this._props[key]) {
+        this._dirty = true;
         if (val === REMOVAL) {
           delete this._props[key];
         } else {
@@ -11957,7 +12205,10 @@ Expected function or array of functions, received type ${typeof value}.`
         }
         if (shouldReflect) {
           const ob = this._ob;
-          ob && ob.disconnect();
+          if (ob) {
+            this._processMutations(ob.takeRecords());
+            ob.disconnect();
+          }
           if (val === true) {
             this.setAttribute(hyphenate(key), "");
           } else if (typeof val === "string" || typeof val === "number") {
@@ -12061,7 +12312,7 @@ Expected function or array of functions, received type ${typeof value}.`
      * Only called when shadowRoot is false
      */
     _renderSlots() {
-      const outlets = (this._teleportTarget || this).querySelectorAll("slot");
+      const outlets = this._getSlots();
       const scopeId = this._instance.type.__scopeId;
       for (let i = 0; i < outlets.length; i++) {
         const o = outlets[i];
@@ -12087,12 +12338,45 @@ Expected function or array of functions, received type ${typeof value}.`
         parent.removeChild(o);
       }
     }
+    /**
+     * @internal
+     */
+    _getSlots() {
+      const roots = [this];
+      if (this._teleportTargets) {
+        roots.push(...this._teleportTargets);
+      }
+      const slots = /* @__PURE__ */ new Set();
+      for (const root of roots) {
+        const found = root.querySelectorAll("slot");
+        for (let i = 0; i < found.length; i++) {
+          slots.add(found[i]);
+        }
+      }
+      return Array.from(slots);
+    }
     /**
      * @internal
      */
     _injectChildStyle(comp) {
       this._applyStyles(comp.styles, comp);
     }
+    /**
+     * @internal
+     */
+    _beginPatch() {
+      this._patching = true;
+      this._dirty = false;
+    }
+    /**
+     * @internal
+     */
+    _endPatch() {
+      this._patching = false;
+      if (this._dirty && this._instance) {
+        this._update();
+      }
+    }
     /**
      * @internal
      */
@@ -12173,26 +12457,13 @@ Expected function or array of functions, received type ${typeof value}.`
           prevChildren = [];
           return;
         }
-        prevChildren.forEach(callPendingCbs);
+        prevChildren.forEach((vnode) => callPendingCbs(vnode.el));
         prevChildren.forEach(recordPosition);
         const movedChildren = prevChildren.filter(applyTranslation);
-        forceReflow();
+        forceReflow(instance.vnode.el);
         movedChildren.forEach((c) => {
           const el = c.el;
-          const style = el.style;
-          addTransitionClass(el, moveClass);
-          style.transform = style.webkitTransform = style.transitionDuration = "";
-          const cb = el[moveCbKey] = (e) => {
-            if (e && e.target !== el) {
-              return;
-            }
-            if (!e || /transform$/.test(e.propertyName)) {
-              el.removeEventListener("transitionend", cb);
-              el[moveCbKey] = null;
-              removeTransitionClass(el, moveClass);
-            }
-          };
-          el.addEventListener("transitionend", cb);
+          handleMovedChildren(el, moveClass);
         });
         prevChildren = [];
       });
@@ -12215,10 +12486,10 @@ Expected function or array of functions, received type ${typeof value}.`
                   instance
                 )
               );
-              positionMap.set(
-                child,
-                child.el.getBoundingClientRect()
-              );
+              positionMap.set(child, {
+                left: child.el.offsetLeft,
+                top: child.el.offsetTop
+              });
             }
           }
         }
@@ -12239,8 +12510,7 @@ Expected function or array of functions, received type ${typeof value}.`
     }
   });
   const TransitionGroup = TransitionGroupImpl;
-  function callPendingCbs(c) {
-    const el = c.el;
+  function callPendingCbs(el) {
     if (el[moveCbKey]) {
       el[moveCbKey]();
     }
@@ -12249,19 +12519,30 @@ Expected function or array of functions, received type ${typeof value}.`
     }
   }
   function recordPosition(c) {
-    newPositionMap.set(c, c.el.getBoundingClientRect());
+    newPositionMap.set(c, {
+      left: c.el.offsetLeft,
+      top: c.el.offsetTop
+    });
   }
   function applyTranslation(c) {
-    const oldPos = positionMap.get(c);
-    const newPos = newPositionMap.get(c);
+    if (baseApplyTranslation(
+      positionMap.get(c),
+      newPositionMap.get(c),
+      c.el
+    )) {
+      return c;
+    }
+  }
+  function baseApplyTranslation(oldPos, newPos, el) {
     const dx = oldPos.left - newPos.left;
     const dy = oldPos.top - newPos.top;
     if (dx || dy) {
-      const s = c.el.style;
+      const s = el.style;
       s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`;
       s.transitionDuration = "0s";
-      return c;
+      return true;
     }
+    return false;
   }
   function hasCSSTransform(el, root, moveClass) {
     const clone = el.cloneNode();
@@ -12279,6 +12560,22 @@ Expected function or array of functions, received type ${typeof value}.`
     container.removeChild(clone);
     return hasTransform;
   }
+  const handleMovedChildren = (el, moveClass) => {
+    const style = el.style;
+    addTransitionClass(el, moveClass);
+    style.transform = style.webkitTransform = style.transitionDuration = "";
+    const cb = el[moveCbKey] = (e) => {
+      if (e && e.target !== el) {
+        return;
+      }
+      if (!e || e.propertyName.endsWith("transform")) {
+        el.removeEventListener("transitionend", cb);
+        el[moveCbKey] = null;
+        removeTransitionClass(el, moveClass);
+      }
+    };
+    el.addEventListener("transitionend", cb);
+  };
 
   const getModelAssigner = (vnode) => {
     const fn = vnode.props["onUpdate:modelValue"] || false;
@@ -12314,21 +12611,21 @@ Expected function or array of functions, received type ${typeof value}.`
       vModelTextUpdate(el, oldValue, value, trim, number, lazy);
     }
   };
+  function castValue(value, trim, number) {
+    if (trim) value = value.trim();
+    if (number) value = looseToNumber(value);
+    return value;
+  }
   const vModelTextInit = (el, trim, number, lazy, set) => {
     addEventListener(el, lazy ? "change" : "input", (e) => {
       if (e.target.composing) return;
-      let domValue = el.value;
-      if (trim) {
-        domValue = domValue.trim();
-      }
-      if (number || el.type === "number") {
-        domValue = looseToNumber(domValue);
-      }
-      (0, el[assignKey])(domValue);
+      (0, el[assignKey])(
+        castValue(el.value, trim, number || el.type === "number")
+      );
     });
-    if (trim) {
+    if (trim || number) {
       addEventListener(el, "change", () => {
-        el.value = el.value.trim();
+        el.value = castValue(el.value, trim, number || el.type === "number");
       });
     }
     if (!lazy) {
@@ -12577,13 +12874,13 @@ Expected function or array of functions, received type ${typeof value}.`
   const withModifiers = (fn, modifiers) => {
     const cache = fn._withMods || (fn._withMods = {});
     const cacheKey = modifiers.join(".");
-    return cache[cacheKey] || (cache[cacheKey] = (event, ...args) => {
+    return cache[cacheKey] || (cache[cacheKey] = ((event, ...args) => {
       for (let i = 0; i < modifiers.length; i++) {
         const guard = modifierGuards[modifiers[i]];
         if (guard && guard(event, modifiers)) return;
       }
       return fn(event, ...args);
-    });
+    }));
   };
   const keyNames = {
     esc: "escape",
@@ -12597,7 +12894,7 @@ Expected function or array of functions, received type ${typeof value}.`
   const withKeys = (fn, modifiers) => {
     const cache = fn._withKeys || (fn._withKeys = {});
     const cacheKey = modifiers.join(".");
-    return cache[cacheKey] || (cache[cacheKey] = (event) => {
+    return cache[cacheKey] || (cache[cacheKey] = ((event) => {
       if (!("key" in event)) {
         return;
       }
@@ -12607,7 +12904,7 @@ Expected function or array of functions, received type ${typeof value}.`
       )) {
         return fn(event);
       }
-    });
+    }));
   };
 
   const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);
@@ -12621,13 +12918,13 @@ Expected function or array of functions, received type ${typeof value}.`
     enabledHydration = true;
     return renderer;
   }
-  const render = (...args) => {
+  const render = ((...args) => {
     ensureRenderer().render(...args);
-  };
-  const hydrate = (...args) => {
+  });
+  const hydrate = ((...args) => {
     ensureHydrationRenderer().hydrate(...args);
-  };
-  const createApp = (...args) => {
+  });
+  const createApp = ((...args) => {
     const app = ensureRenderer().createApp(...args);
     {
       injectNativeTagCheck(app);
@@ -12652,8 +12949,8 @@ Expected function or array of functions, received type ${typeof value}.`
       return proxy;
     };
     return app;
-  };
-  const createSSRApp = (...args) => {
+  });
+  const createSSRApp = ((...args) => {
     const app = ensureHydrationRenderer().createApp(...args);
     {
       injectNativeTagCheck(app);
@@ -12667,7 +12964,7 @@ Expected function or array of functions, received type ${typeof value}.`
       }
     };
     return app;
-  };
+  });
   function resolveRootNamespace(container) {
     if (container instanceof SVGElement) {
       return "svg";