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

package/dist/runtime-dom.esm-browser.js

@@ -1,9 +1,8 @@
 /**
-* @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
 **/
-/*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
 function makeMap(str) {
   const map = /* @__PURE__ */ Object.create(null);
@@ -59,10 +58,10 @@ const isBuiltInDirective = /* @__PURE__ */ makeMap(
 );
 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() : "";
@@ -235,6 +234,9 @@ function shouldSetAsAttr(tagName, key) {
   if ((key === "width" || key === "height") && (tagName === "IMG" || tagName === "VIDEO" || tagName === "CANVAS" || tagName === "SOURCE")) {
     return true;
   }
+  if (key === "sandbox" && tagName === "IFRAME") {
+    return true;
+  }
   return false;
 }
 
@@ -424,6 +426,7 @@ var ReactiveFlags = /* @__PURE__ */ ((ReactiveFlags2) => {
 const notifyBuffer = [];
 let batchDepth = 0;
 let activeSub = void 0;
+let globalVersion = 0;
 let notifyIndex = 0;
 let notifyBufferLength = 0;
 function setActiveSub(sub) {
@@ -446,17 +449,18 @@ function link(dep, sub) {
   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,
@@ -562,6 +566,7 @@ function propagate(link2) {
   } while (true);
 }
 function startTracking(sub) {
+  ++globalVersion;
   sub.depsTail = void 0;
   sub.flags = sub.flags & -57 | 4 /* RecursedCheck */;
   return setActiveSub(sub);
@@ -662,18 +667,12 @@ function shallowPropagate(link2) {
   } 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;
 }
@@ -913,7 +912,7 @@ const arrayInstrumentations = {
   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);
   },
@@ -965,7 +964,7 @@ function iterator(self, method, wrapValue) {
     iter._next = iter.next;
     iter.next = () => {
       const result = iter._next();
-      if (result.value) {
+      if (!result.done) {
         result.value = wrapValue(result.value);
       }
       return result;
@@ -1096,7 +1095,8 @@ class BaseReactiveHandler {
       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);
@@ -1118,7 +1118,13 @@ class MutableReactiveHandler extends BaseReactiveHandler {
       }
       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;
@@ -1263,7 +1269,7 @@ function createInstrumentations(readonly, shallow) {
     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"];
@@ -2266,11 +2272,11 @@ function traverse(value, depth = Infinity, seen) {
   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);
@@ -2816,8 +2822,10 @@ function rerender(id, newRender) {
       instance.hmrRerender();
     } else {
       const i = instance;
-      i.renderCache = [];
-      i.effect.run();
+      if (!(i.effect.flags & 1024)) {
+        i.renderCache = [];
+        i.effect.run();
+      }
     }
     nextTick(() => {
       isHmrUpdating = false;
@@ -2859,7 +2867,10 @@ function reload(id, newComp) {
           if (parent.vapor) {
             parent.hmrRerender();
           } else {
-            parent.effect.run();
+            if (!(parent.effect.flags & 1024)) {
+              parent.renderCache = [];
+              parent.effect.run();
+            }
           }
           nextTick(() => {
             isHmrUpdating = false;
@@ -2969,7 +2980,6 @@ const devtoolsComponentRemoved = (component) => {
     _devtoolsComponentRemoved(component);
   }
 };
-/*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
 function createDevtoolsComponentHook(hook) {
   return (component) => {
@@ -3155,9 +3165,6 @@ const TeleportImpl = {
       insert(mainAnchor, container, anchor);
       const mount = (container2, anchor2) => {
         if (shapeFlag & 16) {
-          if (parentComponent && parentComponent.isCE) {
-            parentComponent.ce._teleportTarget = container2;
-          }
           mountChildren(
             children,
             container2,
@@ -3179,6 +3186,9 @@ const TeleportImpl = {
           } 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);
@@ -3379,26 +3389,34 @@ function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }
 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;
@@ -3429,6 +3447,10 @@ function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScope
       }
     }
     updateCssVars(vnode, disabled);
+  } else if (disabled) {
+    if (vnode.shapeFlag & 16) {
+      hydrateDisabledTeleport(node, vnode, node, nextSibling(node));
+    }
   }
   return vnode.anchor && nextSibling(vnode.anchor);
 }
@@ -3469,7 +3491,7 @@ function useTransitionState() {
     isMounted: false,
     isLeaving: false,
     isUnmounting: false,
-    leavingVNodes: /* @__PURE__ */ new Map()
+    leavingNodes: /* @__PURE__ */ new Map()
   };
   onMounted(() => {
     state.isMounted = true;
@@ -3501,7 +3523,7 @@ const BaseTransitionPropsValidators = {
   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 = {
@@ -3518,9 +3540,7 @@ const BaseTransitionImpl = {
       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);
       }
@@ -3540,7 +3560,7 @@ const BaseTransitionImpl = {
         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,
@@ -3609,15 +3629,53 @@ function findNonCommentChild(children) {
 }
 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,
@@ -3635,8 +3693,6 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
     onAfterAppear,
     onAppearCancelled
   } = props;
-  const key = String(vnode.key);
-  const leavingVNodesCache = getLeavingNodesForType(state, vnode);
   const callHook = (hook, args) => {
     hook && callWithAsyncErrorHandling(
       hook,
@@ -3672,10 +3728,7 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
           /* cancelled */
         );
       }
-      const leavingVNode = leavingVNodesCache[key];
-      if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el[leaveCbKey]) {
-        leavingVNode.el[leaveCbKey]();
-      }
+      earlyRemove();
       callHook(hook, [el]);
     },
     enter(el) {
@@ -3712,7 +3765,6 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
       }
     },
     leave(el, remove) {
-      const key2 = String(vnode.key);
       if (el[enterCbKey$1]) {
         el[enterCbKey$1](
           true
@@ -3734,27 +3786,17 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
           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;
@@ -3788,8 +3830,15 @@ function getInnerChild$1(vnode) {
 }
 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);
@@ -3819,8 +3868,12 @@ function getTransitionRawChildren(children, keepComment = false, parentKey) {
   }
   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) ? (
@@ -3873,6 +3926,7 @@ function useTemplateRef(key) {
   return ret;
 }
 
+const pendingSetRefMap = /* @__PURE__ */ new WeakMap();
 function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
   if (isArray(rawRef)) {
     rawRef.forEach(
@@ -3904,28 +3958,23 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
   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)) {
@@ -3936,7 +3985,7 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
     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 {
@@ -3947,8 +3996,11 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
                   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);
@@ -3960,15 +4012,23 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
             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 {
@@ -3976,6 +4036,29 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
     }
   }
 }
+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 = () => {
@@ -4120,6 +4203,12 @@ function createHydrationFunctions(rendererInternals) {
           );
         }
         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)) {
@@ -4135,9 +4224,6 @@ function createHydrationFunctions(rendererInternals) {
             );
           }
         } 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) {
@@ -4147,15 +4233,25 @@ function createHydrationFunctions(rendererInternals) {
           } 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) {
@@ -4240,7 +4336,7 @@ function createHydrationFunctions(rendererInternals) {
         );
         let hasWarned = false;
         while (next) {
-          if (!isMismatchAllowed(el, 1 /* CHILDREN */)) {
+          if (!isMismatchAllowed(el, 1)) {
             if (!hasWarned) {
               warn$1(
                 `Hydration children mismatch on`,
@@ -4261,14 +4357,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();
           }
@@ -4344,7 +4442,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`,
@@ -4394,7 +4492,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:`,
@@ -4467,11 +4565,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;
@@ -4486,7 +4584,7 @@ function propHasMismatch(el, key, clientValue, vnode, instance) {
     }
     expected = normalizeClass(clientValue);
     if (!isSetEqual(toClassSet(actual || ""), toClassSet(expected))) {
-      mismatchType = 2 /* CLASS */;
+      mismatchType = 2;
       mismatchKey = `class`;
     }
   } else if (key === "style") {
@@ -4505,31 +4603,43 @@ function propHasMismatch(el, key, clientValue, vnode, instance) {
       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`;
@@ -4601,14 +4711,14 @@ function resolveCssVars(instance, vnode, expectedMap) {
 }
 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;
     }
@@ -4620,7 +4730,7 @@ function isMismatchAllowed(el, allowedType) {
     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]);
@@ -4677,7 +4787,9 @@ const hydrateOnInteraction = (interactions = []) => (hydrate, forEach) => {
       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 = () => {
@@ -4719,104 +4831,46 @@ function forEachElement(node, cb) {
 }
 
 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,
@@ -4834,25 +4888,11 @@ function defineAsyncComponent(source) {
           }) : 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)) {
@@ -4863,6 +4903,7 @@ function defineAsyncComponent(source) {
         error.value = err;
       });
       return () => {
+        resolvedComp = getResolvedComp();
         if (loaded.value && resolvedComp) {
           return createInnerComp(resolvedComp, instance);
         } else if (error.value && errorComponent) {
@@ -4870,19 +4911,124 @@ function defineAsyncComponent(source) {
             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;
@@ -4913,86 +5059,37 @@ const KeepAliveImpl = {
       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);
@@ -5139,7 +5236,7 @@ function onActivated(hook, target) {
 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) {
@@ -5153,8 +5250,9 @@ function registerKeepAliveHook(hook, type, target = getCurrentInstance()) {
   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;
@@ -5180,6 +5278,71 @@ function resetShapeFlag(vnode) {
 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) {
@@ -5368,12 +5531,13 @@ function renderSlot(slots, name, props = {}, fallback, noSlotted) {
     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) {
@@ -5387,6 +5551,7 @@ function renderSlot(slots, name, props = {}, fallback, noSlotted) {
   }
   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;
@@ -5416,6 +5581,14 @@ function ensureValidVNode(vnodes) {
     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 = {};
@@ -5578,10 +5751,10 @@ const PublicInstanceProxyHandlers = {
     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) {
@@ -5719,15 +5892,15 @@ function withDefaults(props, defaults) {
   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;
@@ -5983,7 +6156,8 @@ function applyOptions(instance) {
       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) {
@@ -6856,7 +7030,7 @@ function isBoolean(...args) {
   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) {
@@ -6910,8 +7084,6 @@ const assignSlots = (slots, children, optimized) => {
 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);
@@ -6975,12 +7147,10 @@ function endMeasure(instance, type) {
   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);
   }
@@ -7219,15 +7389,25 @@ function baseCreateRenderer(options, createHydrationFns) {
         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) => {
@@ -7278,16 +7458,20 @@ function baseCreateRenderer(options, createHydrationFns) {
     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,
@@ -7304,21 +7488,9 @@ function baseCreateRenderer(options, createHydrationFns) {
         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) => {
@@ -7559,12 +7731,21 @@ function baseCreateRenderer(options, createHydrationFns) {
     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,
@@ -7627,6 +7808,7 @@ function baseCreateRenderer(options, createHydrationFns) {
       if (!initialVNode.el) {
         const placeholder = instance.subTree = createVNode(Comment);
         processCommentNode(null, placeholder, container, anchor);
+        initialVNode.placeholder = placeholder.el;
       }
     } else {
       setupRenderEffect(
@@ -8167,7 +8349,11 @@ function baseCreateRenderer(options, createHydrationFns) {
       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,
@@ -8247,12 +8433,12 @@ function baseCreateRenderer(options, createHydrationFns) {
     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;
@@ -8264,6 +8450,12 @@ function baseCreateRenderer(options, createHydrationFns) {
           }
         };
         const performLeave = () => {
+          if (el._isLeaving) {
+            el[leaveCbKey](
+              true
+              /* cancelled */
+            );
+          }
           leave(el, () => {
             remove2();
             afterLeave && afterLeave();
@@ -8303,7 +8495,14 @@ function baseCreateRenderer(options, createHydrationFns) {
       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;
@@ -8391,22 +8590,15 @@ function baseCreateRenderer(options, createHydrationFns) {
       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) => {
@@ -8422,27 +8614,12 @@ function baseCreateRenderer(options, createHydrationFns) {
     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();
@@ -8456,12 +8633,6 @@ function baseCreateRenderer(options, createHydrationFns) {
       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);
     }
@@ -8474,7 +8645,7 @@ function baseCreateRenderer(options, createHydrationFns) {
   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);
     }
@@ -8552,6 +8723,7 @@ function baseCreateRenderer(options, createHydrationFns) {
   return {
     render,
     hydrate,
+    hydrateNode,
     internals,
     createApp: createAppAPI(
       mountApp,
@@ -8591,7 +8763,8 @@ function traverseStaticChildren(n1, n2, shallow = false) {
         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) {
@@ -8604,7 +8777,7 @@ function traverseStaticChildren(n1, n2, shallow = false) {
   }
 }
 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;
@@ -8619,6 +8792,34 @@ function invalidateMount(hooks) {
       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;
@@ -8633,6 +8834,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 = () => {
@@ -8972,8 +9199,9 @@ function baseEmit(instance, props, getter, event, ...rawArgs) {
 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;
@@ -9421,7 +9649,7 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, namespace, sl
   const { activeBranch, pendingBranch, isInFallback, isHydrating } = suspense;
   if (pendingBranch) {
     suspense.pendingBranch = newBranch;
-    if (isSameVNodeType(newBranch, pendingBranch)) {
+    if (isSameVNodeType(pendingBranch, newBranch)) {
       patch(
         pendingBranch,
         newBranch,
@@ -9492,7 +9720,7 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, namespace, sl
           );
           setActiveBranch(suspense, newFallback);
         }
-      } else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
+      } else if (activeBranch && isSameVNodeType(activeBranch, newBranch)) {
         patch(
           activeBranch,
           newBranch,
@@ -9523,7 +9751,7 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, namespace, sl
       }
     }
   } else {
-    if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
+    if (activeBranch && isSameVNodeType(activeBranch, newBranch)) {
       patch(
         activeBranch,
         newBranch,
@@ -9636,7 +9864,8 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
         pendingId,
         effects,
         parentComponent: parentComponent2,
-        container: container2
+        container: container2,
+        isInFallback
       } = suspense;
       let delayEnter = false;
       if (suspense.isHydrating) {
@@ -9654,6 +9883,9 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
                 parentComponent2
               );
               queuePostFlushCb(effects);
+              if (isInFallback && vnode2.ssFallback) {
+                vnode2.ssFallback.el = null;
+              }
             }
           };
         }
@@ -9662,6 +9894,9 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
             anchor = next(activeBranch);
           }
           unmount(activeBranch, parentComponent2, suspense, true);
+          if (!delayEnter && isInFallback && vnode2.ssFallback) {
+            vnode2.ssFallback.el = null;
+          }
         }
         if (!delayEnter) {
           move(
@@ -9786,6 +10021,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
           optimized2
         );
         if (placeholder) {
+          vnode2.placeholder = null;
           remove(placeholder);
         }
         updateHOCHostEl(instance, vnode2.el);
@@ -9991,15 +10227,11 @@ const createVNodeWithArgsTransform = (...args) => {
   );
 };
 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 = {
@@ -10165,6 +10397,7 @@ function cloneVNode(vnode, extraProps, mergeRef = false, cloneTransition = false
     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,
@@ -10691,7 +10924,7 @@ function getComponentPublicInstance(instance) {
     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;
@@ -10727,23 +10960,28 @@ const computed = (getterOrOptions, debugOptions) => {
 };
 
 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);
   }
 }
 
@@ -10953,7 +11191,7 @@ function isMemoSame(cached, memo) {
   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 ;
@@ -11182,11 +11420,11 @@ function resolveTransitionProps(rawProps) {
       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) {
@@ -11312,7 +11550,7 @@ function getTransitionInfo(el, expectedType) {
     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 {
@@ -11332,8 +11570,9 @@ function toMs(s) {
   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) {
@@ -11353,6 +11592,8 @@ function patchClass(el, value, isSVG) {
 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) {
@@ -11386,9 +11627,6 @@ const vShow = {
     setDisplay(el, value);
   }
 };
-{
-  vShow.name = "show";
-}
 function setDisplay(el, value) {
   el.style.display = value ? el[vShowOriginalDisplay] : "none";
   el[vShowHidden] = !value;
@@ -11474,7 +11712,7 @@ function setVarsOnNode(el, vars) {
   }
 }
 
-const displayRE = /(^|;)\s*display\s*:/;
+const displayRE = /(?:^|;)\s*display\s*:/;
 function patchStyle(el, prev, next) {
   const style = el.style;
   const isCssString = isString(next);
@@ -11779,11 +12017,10 @@ function shouldSetAsProp(el, key, value, isSVG) {
 }
 
 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);
@@ -11792,10 +12029,9 @@ function defineCustomElement(options, extraOptions, _createApp) {
   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 {
@@ -11819,6 +12055,8 @@ class VueElement extends BaseClass {
     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;
@@ -11831,7 +12069,11 @@ class VueElement extends BaseClass {
         );
       }
       if (_def.shadowRoot !== false) {
-        this.attachShadow({ mode: "open" });
+        this.attachShadow(
+          extend({}, _def.shadowRootOptions, {
+            mode: "open"
+          })
+        );
         this._root = this.shadowRoot;
       } else {
         this._root = this;
@@ -11891,9 +12133,18 @@ class VueElement extends BaseClass {
         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)
    */
@@ -11904,11 +12155,7 @@ class VueElement extends BaseClass {
     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;
@@ -11985,7 +12232,7 @@ class VueElement extends BaseClass {
           return this._getProp(key);
         },
         set(val) {
-          this._setProp(key, val, true, true);
+          this._setProp(key, val, true, !this._patching);
         }
       });
     }
@@ -12011,6 +12258,7 @@ class VueElement extends BaseClass {
    */
   _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
     if (val !== this._props[key]) {
+      this._dirty = true;
       if (val === REMOVAL) {
         delete this._props[key];
       } else {
@@ -12024,7 +12272,10 @@ class VueElement extends BaseClass {
       }
       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") {
@@ -12128,7 +12379,7 @@ class VueElement extends BaseClass {
    * 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];
@@ -12154,12 +12405,45 @@ class VueElement extends BaseClass {
       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
    */
@@ -12252,26 +12536,13 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
         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 = [];
     });
@@ -12294,10 +12565,10 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
                 instance
               )
             );
-            positionMap.set(
-              child,
-              child.el.getBoundingClientRect()
-            );
+            positionMap.set(child, {
+              left: child.el.offsetLeft,
+              top: child.el.offsetTop
+            });
           }
         }
       }
@@ -12318,8 +12589,7 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
   }
 });
 const TransitionGroup = TransitionGroupImpl;
-function callPendingCbs(c) {
-  const el = c.el;
+function callPendingCbs(el) {
   if (el[moveCbKey]) {
     el[moveCbKey]();
   }
@@ -12328,19 +12598,30 @@ function callPendingCbs(c) {
   }
 }
 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();
@@ -12358,6 +12639,22 @@ function hasCSSTransform(el, root, moveClass) {
   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;
@@ -12393,21 +12690,21 @@ const vModelText = {
     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) {
@@ -12690,13 +12987,13 @@ const modifierGuards = {
 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",
@@ -12710,7 +13007,7 @@ const keyNames = {
 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;
     }
@@ -12720,7 +13017,7 @@ const withKeys = (fn, modifiers) => {
     )) {
       return fn(event);
     }
-  });
+  }));
 };
 
 const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);
@@ -12734,13 +13031,13 @@ function ensureHydrationRenderer() {
   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);
@@ -12765,8 +13062,8 @@ const createApp = (...args) => {
     return proxy;
   };
   return app;
-};
-const createSSRApp = (...args) => {
+});
+const createSSRApp = ((...args) => {
   const app = ensureHydrationRenderer().createApp(...args);
   {
     injectNativeTagCheck(app);
@@ -12780,7 +13077,7 @@ const createSSRApp = (...args) => {
     }
   };
   return app;
-};
+});
 function resolveRootNamespace(container) {
   if (container instanceof SVGElement) {
     return "svg";