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

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.4
 * (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() : "";
@@ -85,6 +84,9 @@ var VueRuntimeDOM = (function (exports) {
       return s;
     }
   );
+  const getModifierPropName = (name) => {
+    return `${name === "modelValue" || name === "model-value" ? "model" : name}Modifiers${name === "model" ? "$" : ""}`;
+  };
   const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
   const invokeArrayFns = (fns, ...arg) => {
     for (let i = 0; i < fns.length; i++) {
@@ -238,6 +240,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 +432,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 +455,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 +572,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 +673,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 +918,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 +970,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 +1101,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 +1124,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 +1275,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 +2278,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 +2828,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;
@@ -2833,7 +2844,12 @@ var VueRuntimeDOM = (function (exports) {
     newComp = normalizeClassComponent(newComp);
     updateComponentDef(record.initialDef, newComp);
     const instances = [...record.instances];
-    if (newComp.__vapor) {
+    if (newComp.__vapor && !instances.some((i) => i.ceReload)) {
+      for (const instance of instances) {
+        if (instance.root && instance.root.ce && instance !== instance.root) {
+          instance.root.ce._removeChildStyle(instance.type);
+        }
+      }
       for (const instance of instances) {
         instance.hmrReload(newComp);
       }
@@ -2862,7 +2878,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 +2991,6 @@ var VueRuntimeDOM = (function (exports) {
       _devtoolsComponentRemoved(component);
     }
   };
-  /*! #__NO_SIDE_EFFECTS__ */
   // @__NO_SIDE_EFFECTS__
   function createDevtoolsComponentHook(hook) {
     return (component) => {
@@ -3158,9 +3176,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 +3197,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 +3400,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 +3458,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 +3502,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 +3534,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 +3551,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 +3571,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 +3640,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 +3704,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 +3739,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 +3776,6 @@ var VueRuntimeDOM = (function (exports) {
         }
       },
       leave(el, remove) {
-        const key2 = String(vnode.key);
         if (el[enterCbKey$1]) {
           el[enterCbKey$1](
             true
@@ -3737,27 +3797,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 +3841,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 +3879,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 +3937,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 +3969,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 +3996,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 +4007,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 +4023,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 +4047,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 +4214,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 +4235,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 +4244,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 +4347,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 +4368,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 +4453,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 +4503,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 +4576,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 +4595,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 +4614,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 +4722,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 +4741,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 +4798,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 +4842,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 +4899,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 +4914,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,7 +4922,10 @@ 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
+            );
           }
         };
       }
@@ -4887,6 +4939,108 @@ Server rendered element contains fewer child nodes than client vdom.`
     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;
   const KeepAliveImpl = {
@@ -4910,86 +5064,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 +5241,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 +5255,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 +5283,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 +5536,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 +5556,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 +5586,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 +5756,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 +5897,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 +6161,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 +7032,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 +7086,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 +7149,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 +7391,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 +7460,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 +7490,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 +7733,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 +7810,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 +8351,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 +8435,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 +8452,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 +8497,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 +8592,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 +8616,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 +8635,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 +8647,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 +8725,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 +8765,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 +8779,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 +8794,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 +8836,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 = () => {
@@ -8842,7 +9077,7 @@ app.use(vaporInteropPlugin)
     return res;
   }
   const getModelModifiers = (props, modelName, getter) => {
-    return modelName === "modelValue" || modelName === "model-value" ? getter(props, "modelModifiers") : getter(props, `${modelName}Modifiers`) || getter(props, `${camelize(modelName)}Modifiers`) || getter(props, `${hyphenate(modelName)}Modifiers`);
+    return getter(props, getModifierPropName(modelName)) || getter(props, `${camelize(modelName)}Modifiers`) || getter(props, `${hyphenate(modelName)}Modifiers`);
   };
 
   function emit(instance, event, ...rawArgs) {
@@ -8938,8 +9173,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 +9623,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 +9694,7 @@ app.use(vaporInteropPlugin)
             );
             setActiveBranch(suspense, newFallback);
           }
-        } else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
+        } else if (activeBranch && isSameVNodeType(activeBranch, newBranch)) {
           patch(
             activeBranch,
             newBranch,
@@ -9489,7 +9725,7 @@ app.use(vaporInteropPlugin)
         }
       }
     } else {
-      if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
+      if (activeBranch && isSameVNodeType(activeBranch, newBranch)) {
         patch(
           activeBranch,
           newBranch,
@@ -9602,7 +9838,8 @@ app.use(vaporInteropPlugin)
           pendingId,
           effects,
           parentComponent: parentComponent2,
-          container: container2
+          container: container2,
+          isInFallback
         } = suspense;
         let delayEnter = false;
         if (suspense.isHydrating) {
@@ -9620,6 +9857,9 @@ app.use(vaporInteropPlugin)
                   parentComponent2
                 );
                 queuePostFlushCb(effects);
+                if (isInFallback && vnode2.ssFallback) {
+                  vnode2.ssFallback.el = null;
+                }
               }
             };
           }
@@ -9628,6 +9868,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 +9995,7 @@ app.use(vaporInteropPlugin)
             optimized2
           );
           if (placeholder) {
+            vnode2.placeholder = null;
             remove(placeholder);
           }
           updateHOCHostEl(instance, vnode2.el);
@@ -9957,15 +10201,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 +10371,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,
@@ -10278,6 +10519,25 @@ Component that was made reactive: `,
       simpleSetCurrentInstance(instance);
     }
   };
+  const internalOptions = ["ce", "type"];
+  const useInstanceOption = (key, silent = false) => {
+    const instance = getCurrentGenericInstance();
+    if (!instance) {
+      if (!silent) {
+        warn$1(`useInstanceOption called without an active component instance.`);
+      }
+      return { hasInstance: false, value: void 0 };
+    }
+    if (!internalOptions.includes(key)) {
+      {
+        warn$1(
+          `useInstanceOption only accepts  ${internalOptions.map((k) => `'${k}'`).join(", ")} as key, got '${key}'.`
+        );
+      }
+      return { hasInstance: true, value: void 0 };
+    }
+    return { hasInstance: true, value: instance[key] };
+  };
 
   const emptyAppContext = createAppContext();
   let uid = 0;
@@ -10643,7 +10903,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 +10939,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 +11170,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.6.0-alpha.2";
+  const version = "3.6.0-alpha.4";
   const warn = warn$1 ;
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const devtools = devtools$1 ;
@@ -11122,11 +11387,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 +11517,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 +11537,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 +11559,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 +11594,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 +11672,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 +11977,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,18 +11989,14 @@ 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 {
-    constructor(_def, _props = {}, _createApp = createApp) {
+  class VueElementBase extends BaseClass {
+    constructor(def, props = {}, createAppFn) {
       super();
-      this._def = _def;
-      this._props = _props;
-      this._createApp = _createApp;
       this._isVueCE = true;
       /**
        * @internal
@@ -11746,25 +12006,26 @@ Expected function or array of functions, received type ${typeof value}.`
        * @internal
        */
       this._app = null;
-      /**
-       * @internal
-       */
-      this._nonce = this._def.nonce;
       this._connected = false;
       this._resolved = false;
       this._numberProps = null;
       this._styleChildren = /* @__PURE__ */ new WeakSet();
+      this._patching = false;
+      this._dirty = false;
       this._ob = null;
-      if (this.shadowRoot && _createApp !== createApp) {
+      this._def = def;
+      this._props = props;
+      this._createApp = createAppFn;
+      this._nonce = def.nonce;
+      if (this._needsHydration()) {
         this._root = this.shadowRoot;
       } else {
-        if (this.shadowRoot) {
-          warn(
-            `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
+        if (def.shadowRoot !== false) {
+          this.attachShadow(
+            extend({}, def.shadowRootOptions, {
+              mode: "open"
+            })
           );
-        }
-        if (_def.shadowRoot !== false) {
-          this.attachShadow({ mode: "open" });
           this._root = this.shadowRoot;
         } else {
           this._root = this;
@@ -11779,14 +12040,14 @@ Expected function or array of functions, received type ${typeof value}.`
       this._connected = true;
       let parent = this;
       while (parent = parent && (parent.parentNode || parent.host)) {
-        if (parent instanceof VueElement) {
+        if (parent instanceof VueElementBase) {
           this._parent = parent;
           break;
         }
       }
       if (!this._instance) {
         if (this._resolved) {
-          this._mount(this._def);
+          this._mountComponent(this._def);
         } else {
           if (parent && parent._pendingResolve) {
             this._pendingResolve = parent._pendingResolve.then(() => {
@@ -11799,8 +12060,24 @@ Expected function or array of functions, received type ${typeof value}.`
         }
       }
     }
+    disconnectedCallback() {
+      this._connected = false;
+      nextTick(() => {
+        if (!this._connected) {
+          if (this._ob) {
+            this._ob.disconnect();
+            this._ob = null;
+          }
+          this._unmount();
+          if (this._teleportTargets) {
+            this._teleportTargets.clear();
+            this._teleportTargets = void 0;
+          }
+        }
+      });
+    }
     _setParent(parent = this._parent) {
-      if (parent) {
+      if (parent && this._instance) {
         this._instance.parent = parent._instance;
         this._inheritParentContext(parent);
       }
@@ -11813,19 +12090,10 @@ Expected function or array of functions, received type ${typeof value}.`
         );
       }
     }
-    disconnectedCallback() {
-      this._connected = false;
-      nextTick(() => {
-        if (!this._connected) {
-          if (this._ob) {
-            this._ob.disconnect();
-            this._ob = null;
-          }
-          this._app && this._app.unmount();
-          if (this._instance) this._instance.ce = void 0;
-          this._app = this._instance = null;
-        }
-      });
+    _processMutations(mutations) {
+      for (const m of mutations) {
+        this._setAttr(m.attributeName);
+      }
     }
     /**
      * resolve inner component definition (handle possible async component)
@@ -11837,13 +12105,9 @@ 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) => {
+      const resolve = (def) => {
         this._resolved = true;
         this._pendingResolve = void 0;
         const { props, styles } = def;
@@ -11868,29 +12132,25 @@ Expected function or array of functions, received type ${typeof value}.`
             "Custom element style injection is not supported when using shadowRoot: false"
           );
         }
-        this._mount(def);
+        this._mountComponent(def);
       };
       const asyncDef = this._def.__asyncLoader;
       if (asyncDef) {
+        const { configureApp } = this._def;
         this._pendingResolve = asyncDef().then((def) => {
-          def.configureApp = this._def.configureApp;
-          resolve(this._def = def, true);
+          def.configureApp = configureApp;
+          this._def = def;
+          resolve(def);
         });
       } else {
         resolve(this._def);
       }
     }
-    _mount(def) {
-      if (!def.name) {
-        def.name = "VueElement";
-      }
-      this._app = this._createApp(def);
-      this._inheritParentContext();
-      if (def.configureApp) {
-        def.configureApp(this._app);
-      }
-      this._app._ceVNode = this._createVNode();
-      this._app.mount(this._root);
+    _mountComponent(def) {
+      this._mount(def);
+      this._processExposed();
+    }
+    _processExposed() {
       const exposed = this._instance && this._instance.exposed;
       if (!exposed) return;
       for (const key in exposed) {
@@ -11904,6 +12164,38 @@ Expected function or array of functions, received type ${typeof value}.`
         }
       }
     }
+    _processInstance() {
+      this._instance.ce = this;
+      this._instance.isCE = true;
+      {
+        this._instance.ceReload = (newStyles) => {
+          if (this._styles) {
+            this._styles.forEach((s) => this._root.removeChild(s));
+            this._styles.length = 0;
+          }
+          this._applyStyles(newStyles);
+          if (!this._instance.vapor) {
+            this._instance = null;
+          }
+          this._update();
+        };
+      }
+      const dispatch = (event, args) => {
+        this.dispatchEvent(
+          new CustomEvent(
+            event,
+            isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
+          )
+        );
+      };
+      this._instance.emit = (event, ...args) => {
+        dispatch(event, args);
+        if (hyphenate(event) !== event) {
+          dispatch(hyphenate(event), args);
+        }
+      };
+      this._setParent();
+    }
     _resolveProps(def) {
       const { props } = def;
       const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
@@ -11918,7 +12210,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,11 +12236,12 @@ 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 {
           this._props[key] = val;
-          if (key === "key" && this._app) {
+          if (key === "key" && this._app && this._app._ceVNode) {
             this._app._ceVNode.key = val;
           }
         }
@@ -11957,7 +12250,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") {
@@ -11969,52 +12265,6 @@ Expected function or array of functions, received type ${typeof value}.`
         }
       }
     }
-    _update() {
-      const vnode = this._createVNode();
-      if (this._app) vnode.appContext = this._app._context;
-      render(vnode, this._root);
-    }
-    _createVNode() {
-      const baseProps = {};
-      if (!this.shadowRoot) {
-        baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
-      }
-      const vnode = createVNode(this._def, extend(baseProps, this._props));
-      if (!this._instance) {
-        vnode.ce = (instance) => {
-          this._instance = instance;
-          instance.ce = this;
-          instance.isCE = true;
-          {
-            instance.ceReload = (newStyles) => {
-              if (this._styles) {
-                this._styles.forEach((s) => this._root.removeChild(s));
-                this._styles.length = 0;
-              }
-              this._applyStyles(newStyles);
-              this._instance = null;
-              this._update();
-            };
-          }
-          const dispatch = (event, args) => {
-            this.dispatchEvent(
-              new CustomEvent(
-                event,
-                isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
-              )
-            );
-          };
-          instance.emit = (event, ...args) => {
-            dispatch(event, args);
-            if (hyphenate(event) !== event) {
-              dispatch(hyphenate(event), args);
-            }
-          };
-          this._setParent();
-        };
-      }
-      return vnode;
-    }
     _applyStyles(styles, owner) {
       if (!styles) return;
       if (owner) {
@@ -12061,13 +12311,15 @@ 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;
+      const slotReplacements = /* @__PURE__ */ new Map();
       for (let i = 0; i < outlets.length; i++) {
         const o = outlets[i];
         const slotName = o.getAttribute("name") || "default";
         const content = this._slots[slotName];
         const parent = o.parentNode;
+        const replacementNodes = [];
         if (content) {
           for (const n of content) {
             if (scopeId && n.nodeType === 1) {
@@ -12080,12 +12332,36 @@ Expected function or array of functions, received type ${typeof value}.`
               }
             }
             parent.insertBefore(n, o);
+            replacementNodes.push(n);
           }
         } else {
-          while (o.firstChild) parent.insertBefore(o.firstChild, o);
+          while (o.firstChild) {
+            const child = o.firstChild;
+            parent.insertBefore(child, o);
+            replacementNodes.push(child);
+          }
         }
         parent.removeChild(o);
+        slotReplacements.set(o, replacementNodes);
+      }
+      this._updateSlotNodes(slotReplacements);
+    }
+    /**
+     * @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
@@ -12093,6 +12369,22 @@ Expected function or array of functions, received type ${typeof value}.`
     _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
      */
@@ -12109,13 +12401,76 @@ Expected function or array of functions, received type ${typeof value}.`
       }
     }
   }
+  class VueElement extends VueElementBase {
+    constructor(def, props = {}, createAppFn = createApp) {
+      super(def, props, createAppFn);
+    }
+    _needsHydration() {
+      if (this.shadowRoot && this._createApp !== createApp) {
+        return true;
+      } else {
+        if (this.shadowRoot) {
+          warn(
+            `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
+          );
+        }
+      }
+      return false;
+    }
+    _mount(def) {
+      if (!def.name) {
+        def.name = "VueElement";
+      }
+      this._app = this._createApp(def);
+      this._inheritParentContext();
+      if (def.configureApp) {
+        def.configureApp(this._app);
+      }
+      this._app._ceVNode = this._createVNode();
+      this._app.mount(this._root);
+    }
+    _update() {
+      if (!this._app) return;
+      const vnode = this._createVNode();
+      vnode.appContext = this._app._context;
+      render(vnode, this._root);
+    }
+    _unmount() {
+      if (this._app) {
+        this._app.unmount();
+      }
+      if (this._instance && this._instance.ce) {
+        this._instance.ce = void 0;
+      }
+      this._app = this._instance = null;
+    }
+    /**
+     * Only called when shadowRoot is false
+     */
+    _updateSlotNodes(replacements) {
+    }
+    _createVNode() {
+      const baseProps = {};
+      if (!this.shadowRoot) {
+        baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
+      }
+      const vnode = createVNode(this._def, extend(baseProps, this._props));
+      if (!this._instance) {
+        vnode.ce = (instance) => {
+          this._instance = instance;
+          this._processInstance();
+        };
+      }
+      return vnode;
+    }
+  }
   function useHost(caller) {
-    const instance = getCurrentInstance();
-    const el = instance && instance.ce;
+    const { hasInstance, value } = useInstanceOption("ce", true);
+    const el = value;
     if (el) {
       return el;
     } else {
-      if (!instance) {
+      if (!hasInstance) {
         warn(
           `${caller || "useHost"} called without an active component instance.`
         );
@@ -12173,26 +12528,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 +12557,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 +12581,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 +12590,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 +12631,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 +12682,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 +12945,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 +12965,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 +12975,7 @@ Expected function or array of functions, received type ${typeof value}.`
       )) {
         return fn(event);
       }
-    });
+    }));
   };
 
   const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);
@@ -12621,13 +12989,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 +13020,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 +13035,7 @@ Expected function or array of functions, received type ${typeof value}.`
       }
     };
     return app;
-  };
+  });
   function resolveRootNamespace(container) {
     if (container instanceof SVGElement) {
       return "svg";
@@ -12749,6 +13117,7 @@ Expected function or array of functions, received type ${typeof value}.`
   exports.TransitionGroup = TransitionGroup;
   exports.TriggerOpTypes = TriggerOpTypes;
   exports.VueElement = VueElement;
+  exports.VueElementBase = VueElementBase;
   exports.assertNumber = assertNumber;
   exports.callWithAsyncErrorHandling = callWithAsyncErrorHandling;
   exports.callWithErrorHandling = callWithErrorHandling;
@@ -12813,6 +13182,7 @@ Expected function or array of functions, received type ${typeof value}.`
   exports.mergeModels = mergeModels;
   exports.mergeProps = mergeProps;
   exports.nextTick = nextTick;
+  exports.nodeOps = nodeOps;
   exports.normalizeClass = normalizeClass;
   exports.normalizeProps = normalizeProps;
   exports.normalizeStyle = normalizeStyle;
@@ -12831,6 +13201,7 @@ Expected function or array of functions, received type ${typeof value}.`
   exports.onUpdated = onUpdated;
   exports.onWatcherCleanup = onWatcherCleanup;
   exports.openBlock = openBlock;
+  exports.patchProp = patchProp;
   exports.popScopeId = popScopeId;
   exports.provide = provide;
   exports.proxyRefs = proxyRefs;
@@ -12872,6 +13243,7 @@ Expected function or array of functions, received type ${typeof value}.`
   exports.useCssVars = useCssVars;
   exports.useHost = useHost;
   exports.useId = useId;
+  exports.useInstanceOption = useInstanceOption;
   exports.useModel = useModel;
   exports.useSSRContext = useSSRContext;
   exports.useShadowRoot = useShadowRoot;