@vue/runtime-vapor 3.6.0-alpha.3 → 3.6.0-alpha.5

package/dist/runtime-vapor.esm-bundler.js

@@ -1,10 +1,10 @@
 /**
-* @vue/runtime-vapor v3.6.0-alpha.3
+* @vue/runtime-vapor v3.6.0-alpha.5
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
-import { isMismatchAllowed, warn, currentInstance, startMeasure, setCurrentInstance, queuePostFlushCb, queueJob, TransitionPropsValidators, leaveCbKey, isAsyncWrapper, getComponentName, baseResolveTransitionHooks, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, isKeepAlive, isRef, unsafeToTrustedHTML, patchStyle, mergeProps, shouldSetAsProp, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, onMounted, onUpdated, onBeforeUnmount, resetShapeFlag, watch, matches, devtoolsComponentAdded, ensureRenderer, shallowRef, simpleSetCurrentInstance, renderSlot, ensureVaporSlotFallback, createVNode, shallowReactive, createInternalObject, isEmitListener, onScopeDispose, activate as activate$1, setTransitionHooks as setTransitionHooks$1, normalizeRef, isVNode, Fragment, ensureHydrationRenderer, setRef as setRef$1, deactivate as deactivate$1, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, resolvePropValue, resolveTeleportTarget, isTeleportDisabled, isTeleportDeferred, performTransitionEnter, performTransitionLeave, getInheritedScopeIds, registerHMR, endMeasure, unregisterHMR, nextUid, EffectScope as EffectScope$1, expose, callWithErrorHandling, createAppAPI, initFeatureFlags, setDevtoolsHook, flushOnAppMount, normalizeContainer, createAsyncComponentContext, markAsyncBoundary, useAsyncComponentState, performAsyncHydrate, handleError, createCanSetSetupRefChecker, resolveDynamicComponent, vShowOriginalDisplay, vModelTextInit, vModelCheckboxInit, vModelSelectInit, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected, onBeforeUpdate, hasCSSTransform, callPendingCbs, forceReflow, handleMovedChildren, baseApplyTranslation } from '@vue/runtime-dom';
-import { invokeArrayFns, isArray, extend, EMPTY_OBJ, isFunction, NO, hasOwn, normalizeClass, normalizeStyle, includeBooleanAttr, toDisplayString, isString, parseStringStyle, isOn, canSetValueDirectly, stringifyStyle, isReservedProp, EMPTY_ARR, camelize, YES, getGlobalThis, isObject, remove as remove$1, looseEqual } from '@vue/shared';
+import { isMismatchAllowed, warn, currentInstance, startMeasure, setCurrentInstance, queuePostFlushCb, queueJob, TransitionPropsValidators, leaveCbKey, isAsyncWrapper, getComponentName, baseResolveTransitionHooks, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, callWithAsyncErrorHandling, unsafeToTrustedHTML, patchStyle, xlinkNS, mergeProps, shouldSetAsProp, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, isRef, watch, onMounted, onUpdated, onBeforeUnmount, matches, devtoolsComponentAdded, resetShapeFlag, isKeepAlive, ensureRenderer, shallowRef, simpleSetCurrentInstance, renderSlot, ensureVaporSlotFallback, createVNode, shallowReactive, createInternalObject, isEmitListener, onScopeDispose, activate as activate$1, setTransitionHooks as setTransitionHooks$1, normalizeRef, isVNode, Fragment, ensureHydrationRenderer, setRef as setRef$1, deactivate as deactivate$1, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, resolvePropValue, resolveTeleportTarget, isTeleportDisabled, isTeleportDeferred, performTransitionEnter, performTransitionLeave, getInheritedScopeIds, registerHMR, endMeasure, unregisterHMR, nextUid, EffectScope as EffectScope$1, expose, callWithErrorHandling, createAppAPI, initFeatureFlags, setDevtoolsHook, flushOnAppMount, normalizeContainer, createAsyncComponentContext, markAsyncBoundary, useAsyncComponentState, performAsyncHydrate, handleError, VueElementBase, onBeforeUpdate, hasCSSTransform, callPendingCbs, forceReflow, handleMovedChildren, baseApplyTranslation, createCanSetSetupRefChecker, baseUseCssVars, setVarsOnNode, resolveDynamicComponent, vShowOriginalDisplay, vModelTextInit, vModelCheckboxInit, vModelSelectInit, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected } from '@vue/runtime-dom';
+import { invokeArrayFns, isArray, extend, normalizeClass, normalizeStyle, includeBooleanAttr, toDisplayString, isString, parseStringStyle, isOn, canSetValueDirectly, camelize, stringifyStyle, normalizeCssVarValue, getEscapedCssVarName, EMPTY_OBJ, isFunction, NO, hasOwn, isReservedProp, EMPTY_ARR, YES, getGlobalThis, isPlainObject, isObject, remove as remove$1, looseEqual } from '@vue/shared';
 import { ReactiveEffect, setActiveSub, EffectScope, onEffectCleanup, pauseTracking, resetTracking, onScopeDispose as onScopeDispose$1, markRaw, unref, proxyRefs, watch as watch$1, isReactive, isShallow, shallowReadArray, isReadonly, toReadonly, toReactive, shallowRef as shallowRef$1, isRef as isRef$1, traverse } from '@vue/reactivity';
 
 let insertionParent;
@@ -357,6 +357,8 @@ class RenderEffect extends ReactiveEffect {
       if (!!(process.env.NODE_ENV !== "production")) {
         this.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
         this.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
+      }
+      if (!!(process.env.NODE_ENV !== "production") || instance.type.ce) {
         (instance.renderEffects || (instance.renderEffects = [])).push(this);
       }
       job.i = instance;
@@ -544,7 +546,7 @@ function applyTransitionHooks(block, hooks, fallthroughAttrs = true, isResolved
     if (isFrag) setTransitionHooksOnFragment(block, hooks);
     return hooks;
   }
-  const { props, instance, state, delayedLeave } = hooks;
+  const { props, instance, state, delayedLeave, group } = hooks;
   let resolvedHooks = resolveTransitionHooks(
     child,
     props,
@@ -553,6 +555,7 @@ function applyTransitionHooks(block, hooks, fallthroughAttrs = true, isResolved
     (hooks2) => resolvedHooks = hooks2
   );
   resolvedHooks.delayedLeave = delayedLeave;
+  resolvedHooks.group = group;
   child.$transition = resolvedHooks;
   if (isFrag) setTransitionHooksOnFragment(block, resolvedHooks);
   if (fallthroughAttrs && instance.hasFallthrough) {
@@ -642,6 +645,9 @@ function findTransitionBlock(block, inFragment = false) {
 function setTransitionHooksOnFragment(block, hooks) {
   if (isFragment(block)) {
     block.$transition = hooks;
+    if (block.nodes && isFragment(block.nodes)) {
+      setTransitionHooksOnFragment(block.nodes, hooks);
+    }
   } else if (isArray(block)) {
     for (let i = 0; i < block.length; i++) {
       setTransitionHooksOnFragment(block[i], hooks);
@@ -727,14 +733,14 @@ class DynamicFragment extends VaporFragment {
     const prevSub = setActiveSub();
     const parent = isHydrating ? null : this.anchor.parentNode;
     const transition = this.$transition;
-    const instance = currentInstance;
-    this.inKeepAlive = isKeepAlive(instance);
     if (this.scope) {
-      if (this.inKeepAlive) {
-        instance.processFragment(this);
-        if (!this.keptAliveScopes) this.keptAliveScopes = /* @__PURE__ */ new Map();
-        this.keptAliveScopes.set(this.current, this.scope);
-      } else {
+      let preserveScope = false;
+      if (this.beforeTeardown) {
+        preserveScope = this.beforeTeardown.some(
+          (hook) => hook(this.current, this.nodes, this.scope)
+        );
+      }
+      if (!preserveScope) {
         this.scope.stop();
       }
       const mode = transition && transition.mode;
@@ -742,7 +748,7 @@ class DynamicFragment extends VaporFragment {
         applyTransitionLeaveHooks(
           this.nodes,
           transition,
-          () => this.render(render, instance, transition, parent)
+          () => this.render(render, transition, parent)
         );
         parent && remove(this.nodes, parent);
         if (mode === "out-in") {
@@ -753,7 +759,7 @@ class DynamicFragment extends VaporFragment {
         parent && remove(this.nodes, parent);
       }
     }
-    this.render(render, instance, transition, parent);
+    this.render(render, transition, parent);
     if (this.fallback) {
       const hasNestedFragment = isFragment(this.nodes);
       if (hasNestedFragment) {
@@ -776,24 +782,29 @@ class DynamicFragment extends VaporFragment {
     setActiveSub(prevSub);
     if (isHydrating) this.hydrate();
   }
-  render(render, instance, transition, parent) {
+  render(render, transition, parent) {
     if (render) {
-      const scope = this.inKeepAlive && this.keptAliveScopes ? this.keptAliveScopes.get(this.current) : void 0;
+      const scope = this.getScope && this.getScope(this.current);
       if (scope) {
         this.scope = scope;
-        this.keptAliveScopes.delete(this.current);
-        this.scope.resume();
       } else {
         this.scope = new EffectScope();
       }
       this.nodes = this.scope.run(render) || [];
-      if (this.inKeepAlive) {
-        instance.cacheFragment(this);
-      }
       if (transition) {
         this.$transition = applyTransitionHooks(this.nodes, transition);
       }
-      if (parent) insert(this.nodes, parent, this.anchor);
+      if (this.beforeMount) {
+        this.beforeMount.forEach(
+          (hook) => hook(this.current, this.nodes, this.scope)
+        );
+      }
+      if (parent) {
+        insert(this.nodes, parent, this.anchor);
+        if (this.anchor.isConnected && this.updated) {
+          this.updated.forEach((hook) => hook(this.nodes));
+        }
+      }
     } else {
       this.scope = void 0;
       this.nodes = [];
@@ -831,159 +842,8 @@ function findInvalidFragment(fragment) {
 function isFragment(val) {
   return val instanceof VaporFragment;
 }
-
-let currentSlotScopeIds = null;
-function setCurrentSlotScopeIds(scopeIds) {
-  const prev = currentSlotScopeIds;
-  currentSlotScopeIds = scopeIds;
-  return prev;
-}
-const dynamicSlotsProxyHandlers = {
-  get: getSlot,
-  has: (target, key) => !!getSlot(target, key),
-  getOwnPropertyDescriptor(target, key) {
-    const slot = getSlot(target, key);
-    if (slot) {
-      return {
-        configurable: true,
-        enumerable: true,
-        value: slot
-      };
-    }
-  },
-  ownKeys(target) {
-    let keys = Object.keys(target);
-    const dynamicSources = target.$;
-    if (dynamicSources) {
-      keys = keys.filter((k) => k !== "$");
-      for (const source of dynamicSources) {
-        if (isFunction(source)) {
-          const slot = source();
-          if (isArray(slot)) {
-            for (const s of slot) keys.push(String(s.name));
-          } else {
-            keys.push(String(slot.name));
-          }
-        } else {
-          keys.push(...Object.keys(source));
-        }
-      }
-    }
-    return keys;
-  },
-  set: NO,
-  deleteProperty: NO
-};
-function getSlot(target, key) {
-  if (key === "$") return;
-  const dynamicSources = target.$;
-  if (dynamicSources) {
-    let i = dynamicSources.length;
-    let source;
-    while (i--) {
-      source = dynamicSources[i];
-      if (isFunction(source)) {
-        const slot = source();
-        if (slot) {
-          if (isArray(slot)) {
-            for (const s of slot) {
-              if (String(s.name) === key) return s.fn;
-            }
-          } else if (String(slot.name) === key) {
-            return slot.fn;
-          }
-        }
-      } else if (hasOwn(source, key)) {
-        return source[key];
-      }
-    }
-  }
-  if (hasOwn(target, key)) {
-    return target[key];
-  }
-}
-function withVaporCtx(fn) {
-  const instance = currentInstance;
-  return (...args) => {
-    const prev = setCurrentInstance(instance);
-    try {
-      return fn(...args);
-    } finally {
-      setCurrentInstance(...prev);
-    }
-  };
-}
-function createSlot(name, rawProps, fallback, noSlotted) {
-  const _insertionParent = insertionParent;
-  const _insertionAnchor = insertionAnchor;
-  const _isLastInsertion = isLastInsertion;
-  if (!isHydrating) resetInsertionState();
-  const instance = currentInstance;
-  const rawSlots = instance.rawSlots;
-  const slotProps = rawProps ? new Proxy(rawProps, rawPropsProxyHandlers) : EMPTY_OBJ;
-  let fragment;
-  if (isRef(rawSlots._)) {
-    if (isHydrating) locateHydrationNode();
-    fragment = instance.appContext.vapor.vdomSlot(
-      rawSlots._,
-      name,
-      slotProps,
-      instance,
-      fallback
-    );
-  } else {
-    fragment = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("slot") : new DynamicFragment();
-    const isDynamicName = isFunction(name);
-    const slotScopeIds = [];
-    if (!noSlotted) {
-      const scopeId = instance.type.__scopeId;
-      if (scopeId) {
-        slotScopeIds.push(`${scopeId}-s`);
-      }
-    }
-    const renderSlot = () => {
-      const slot = getSlot(rawSlots, isFunction(name) ? name() : name);
-      if (slot) {
-        fragment.fallback = fallback;
-        fragment.update(
-          slot._bound || (slot._bound = () => {
-            const prevSlotScopeIds = setCurrentSlotScopeIds(
-              slotScopeIds.length > 0 ? slotScopeIds : null
-            );
-            try {
-              return slot(slotProps);
-            } finally {
-              setCurrentSlotScopeIds(prevSlotScopeIds);
-            }
-          })
-        );
-      } else {
-        fragment.update(fallback);
-      }
-    };
-    if (isDynamicName || rawSlots.$) {
-      renderEffect(renderSlot);
-    } else {
-      renderSlot();
-    }
-  }
-  if (!isHydrating) {
-    if (!noSlotted) {
-      const scopeId = instance.type.__scopeId;
-      if (scopeId) {
-        setScopeId(fragment, [`${scopeId}-s`]);
-      }
-    }
-    if (_insertionParent) insert(fragment, _insertionParent, _insertionAnchor);
-  } else {
-    if (fragment.insert) {
-      fragment.hydrate();
-    }
-    if (_isLastInsertion) {
-      advanceHydrationNode(_insertionParent);
-    }
-  }
-  return fragment;
+function isDynamicFragment(val) {
+  return val instanceof DynamicFragment;
 }
 
 function addEventListener(el, event, handler, options) {
@@ -1057,6 +917,15 @@ function setDynamicEvents(el, events) {
     on(el, name, events[name], { effect: true });
   }
 }
+function createInvoker(handler) {
+  const i = currentInstance;
+  return (...args) => callWithAsyncErrorHandling(
+    handler,
+    i,
+    5,
+    args
+  );
+}
 
 const hasFallthroughKey = (key) => currentInstance.hasFallthrough && key in currentInstance.attrs;
 function setProp(el, key, value) {
@@ -1066,7 +935,7 @@ function setProp(el, key, value) {
     setAttr(el, key, value);
   }
 }
-function setAttr(el, key, value) {
+function setAttr(el, key, value, isSVG = false) {
   if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
     return;
   }
@@ -1081,14 +950,22 @@ function setAttr(el, key, value) {
   }
   if (value !== el[`$${key}`]) {
     el[`$${key}`] = value;
-    if (value != null) {
-      el.setAttribute(key, value);
+    if (isSVG && key.startsWith("xlink:")) {
+      if (value != null) {
+        el.setAttributeNS(xlinkNS, key, value);
+      } else {
+        el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
+      }
     } else {
-      el.removeAttribute(key);
+      if (value != null) {
+        el.setAttribute(key, value);
+      } else {
+        el.removeAttribute(key);
+      }
     }
   }
 }
-function setDOMProp(el, key, value, forceHydrate = false) {
+function setDOMProp(el, key, value, forceHydrate = false, attrName) {
   if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
     return;
   }
@@ -1122,9 +999,9 @@ function setDOMProp(el, key, value, forceHydrate = false) {
       );
     }
   }
-  needRemove && el.removeAttribute(key);
+  needRemove && el.removeAttribute(attrName || key);
 }
-function setClass(el, value) {
+function setClass(el, value, isSVG = false) {
   if (el.$root) {
     setClassIncremental(el, value);
   } else {
@@ -1134,7 +1011,11 @@ function setClass(el, value) {
       return;
     }
     if (value !== el.$cls) {
-      el.className = el.$cls = value;
+      if (isSVG) {
+        el.setAttribute("class", el.$cls = value);
+      } else {
+        el.className = el.$cls = value;
+      }
     }
   }
 }
@@ -1158,14 +1039,29 @@ function setClassIncremental(el, value) {
     }
   }
 }
+function shouldDeferCheckStyleMismatch(el) {
+  return !!(process.env.NODE_ENV !== "production") && (!!currentInstance.getCssVars || Object.values(el.style).some((v) => v.startsWith("--")));
+}
 function setStyle(el, value) {
   if (el.$root) {
     setStyleIncremental(el, value);
   } else {
     const normalizedValue = normalizeStyle(value);
-    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !styleHasMismatch(el, value, normalizedValue, false)) {
-      el.$sty = normalizedValue;
-      return;
+    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating) {
+      if (shouldDeferCheckStyleMismatch(el)) {
+        const instance = currentInstance;
+        queuePostFlushCb(() => {
+          if (!styleHasMismatch(el, value, normalizedValue, false, instance)) {
+            el.$sty = normalizedValue;
+            return;
+          }
+          patchStyle(el, el.$sty, el.$sty = normalizedValue);
+        });
+        return;
+      } else if (!styleHasMismatch(el, value, normalizedValue, false)) {
+        el.$sty = normalizedValue;
+        return;
+      }
     }
     patchStyle(el, el.$sty, el.$sty = normalizedValue);
   }
@@ -1173,9 +1069,21 @@ function setStyle(el, value) {
 function setStyleIncremental(el, value) {
   const cacheKey = `$styi${isApplyingFallthroughProps ? "$" : ""}`;
   const normalizedValue = isString(value) ? parseStringStyle(value) : normalizeStyle(value);
-  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !styleHasMismatch(el, value, normalizedValue, true)) {
-    el[cacheKey] = normalizedValue;
-    return;
+  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating) {
+    if (shouldDeferCheckStyleMismatch(el)) {
+      const instance = currentInstance;
+      queuePostFlushCb(() => {
+        if (!styleHasMismatch(el, value, normalizedValue, true, instance)) {
+          el[cacheKey] = normalizedValue;
+          return;
+        }
+        patchStyle(el, el[cacheKey], el[cacheKey] = normalizedValue);
+      });
+      return;
+    } else if (!styleHasMismatch(el, value, normalizedValue, true)) {
+      el[cacheKey] = normalizedValue;
+      return;
+    }
   }
   patchStyle(el, el[cacheKey], el[cacheKey] = normalizedValue);
 }
@@ -1296,26 +1204,25 @@ function setHtmlToBlock(block, value) {
     setHtmlToBlock(block.nodes, value);
   }
 }
-function setDynamicProps(el, args) {
+function setDynamicProps(el, args, isSVG) {
   const props = args.length > 1 ? mergeProps(...args) : args[0];
   const cacheKey = `$dprops${isApplyingFallthroughProps ? "$" : ""}`;
   const prevKeys = el[cacheKey];
   if (prevKeys) {
     for (const key of prevKeys) {
       if (!(key in props)) {
-        setDynamicProp(el, key, null);
+        setDynamicProp(el, key, null, isSVG);
       }
     }
   }
   for (const key of el[cacheKey] = Object.keys(props)) {
-    setDynamicProp(el, key, props[key]);
+    setDynamicProp(el, key, props[key], isSVG);
   }
 }
-function setDynamicProp(el, key, value) {
-  const isSVG = false;
+function setDynamicProp(el, key, value, isSVG = false) {
   let forceHydrate = false;
   if (key === "class") {
-    setClass(el, value);
+    setClass(el, value, isSVG);
   } else if (key === "style") {
     setStyle(el, value);
   } else if (isOn(key)) {
@@ -1333,8 +1240,13 @@ function setDynamicProp(el, key, value) {
     } else {
       setDOMProp(el, key, value, forceHydrate);
     }
+  } else if (
+    // custom elements
+    el._isVueCE && (/[A-Z]/.test(key) || !isString(value))
+  ) {
+    setDOMProp(el, camelize(key), value, forceHydrate, key);
   } else {
-    setAttr(el, key, value);
+    setAttr(el, key, value, isSVG);
   }
   return value;
 }
@@ -1347,7 +1259,8 @@ function optimizePropertyLookup() {
   proto.$key = void 0;
   proto.$fc = proto.$evtclick = void 0;
   proto.$root = false;
-  proto.$html = proto.$txt = proto.$cls = proto.$sty = Text.prototype.$txt = "";
+  proto.$html = proto.$cls = proto.$sty = "";
+  Text.prototype.$txt = void 0;
 }
 function classHasMismatch(el, expected, isIncremental) {
   const actual = el.getAttribute("class");
@@ -1370,7 +1283,7 @@ function classHasMismatch(el, expected, isIncremental) {
   }
   return false;
 }
-function styleHasMismatch(el, value, normalizedValue, isIncremental) {
+function styleHasMismatch(el, value, normalizedValue, isIncremental, instance = currentInstance) {
   const actual = el.getAttribute("style");
   const actualStyleMap = toStyleMap(actual || "");
   const expected = isString(value) ? value : stringifyStyle(normalizedValue);
@@ -1378,6 +1291,9 @@ function styleHasMismatch(el, value, normalizedValue, isIncremental) {
   if (el[vShowHidden]) {
     expectedStyleMap.set("display", "none");
   }
+  if (instance) {
+    resolveCssVars(instance, el, expectedStyleMap);
+  }
   let hasMismatch = false;
   if (isIncremental) {
     if (expected) {
@@ -1395,6 +1311,24 @@ function styleHasMismatch(el, value, normalizedValue, isIncremental) {
   }
   return false;
 }
+function resolveCssVars(instance, block, expectedMap) {
+  if (!instance.isMounted) return;
+  const rootBlocks = normalizeBlock(instance);
+  if (instance.getCssVars && normalizeBlock(block).every((b) => rootBlocks.includes(b))) {
+    const cssVars = instance.getCssVars();
+    for (const key in cssVars) {
+      const value = normalizeCssVarValue(cssVars[key]);
+      expectedMap.set(`--${getEscapedCssVarName(key, false)}`, value);
+    }
+  }
+  if (normalizeBlock(block).every((b) => rootBlocks.includes(b)) && instance.parent) {
+    resolveCssVars(
+      instance.parent,
+      instance.block,
+      expectedMap
+    );
+  }
+}
 function attributeHasMismatch(el, key, value) {
   if (isValidHtmlOrSvgAttribute(el, key)) {
     const { actual, expected } = getAttributeMismatch(el, key, value);
@@ -1418,50 +1352,233 @@ function shouldForceHydrate(el, key) {
   tagName.includes("-");
 }
 
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function defineVaporComponent(comp, extraOptions) {
-  if (isFunction(comp)) {
-    return /* @__PURE__ */ (() => extend({ name: comp.name }, extraOptions, {
-      setup: comp,
-      __vapor: true
-    }))();
+let currentSlotScopeIds = null;
+function setCurrentSlotScopeIds(scopeIds) {
+  try {
+    return currentSlotScopeIds;
+  } finally {
+    currentSlotScopeIds = scopeIds;
   }
-  comp.__vapor = true;
-  return comp;
 }
-
-const VaporKeepAliveImpl = defineVaporComponent({
-  name: "VaporKeepAlive",
-  __isKeepAlive: true,
-  props: {
-    include: [String, RegExp, Array],
-    exclude: [String, RegExp, Array],
-    max: [String, Number]
-  },
-  setup(props, { slots }) {
-    if (!slots.default) {
-      return void 0;
-    }
-    const keepAliveInstance = currentInstance;
-    const cache = /* @__PURE__ */ new Map();
-    const keys = /* @__PURE__ */ new Set();
-    const storageContainer = createElement("div");
-    let current;
-    if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
-      keepAliveInstance.__v_cache = cache;
+const dynamicSlotsProxyHandlers = {
+  get: getSlot,
+  has: (target, key) => !!getSlot(target, key),
+  getOwnPropertyDescriptor(target, key) {
+    const slot = getSlot(target, key);
+    if (slot) {
+      return {
+        configurable: true,
+        enumerable: true,
+        value: slot
+      };
     }
-    function shouldCache(instance) {
-      if (isAsyncWrapper(instance) && !instance.type.__asyncResolved) {
-        return false;
+  },
+  ownKeys(target) {
+    let keys = Object.keys(target);
+    const dynamicSources = target.$;
+    if (dynamicSources) {
+      keys = keys.filter((k) => k !== "$");
+      for (const source of dynamicSources) {
+        if (isFunction(source)) {
+          const slot = source();
+          if (isArray(slot)) {
+            for (const s of slot) keys.push(String(s.name));
+          } else {
+            keys.push(String(slot.name));
+          }
+        } else {
+          keys.push(...Object.keys(source));
+        }
       }
-      const { include, exclude } = props;
-      const name = getComponentName(
-        isAsyncWrapper(instance) ? instance.type.__asyncResolved : instance.type
-      );
-      return !(include && (!name || !matches(include, name)) || exclude && name && matches(exclude, name));
     }
-    function innerCacheBlock(key, instance) {
+    return keys;
+  },
+  set: NO,
+  deleteProperty: NO
+};
+function getSlot(target, key) {
+  if (key === "$") return;
+  const dynamicSources = target.$;
+  if (dynamicSources) {
+    let i = dynamicSources.length;
+    let source;
+    while (i--) {
+      source = dynamicSources[i];
+      if (isFunction(source)) {
+        const slot = source();
+        if (slot) {
+          if (isArray(slot)) {
+            for (const s of slot) {
+              if (String(s.name) === key) return s.fn;
+            }
+          } else if (String(slot.name) === key) {
+            return slot.fn;
+          }
+        }
+      } else if (hasOwn(source, key)) {
+        return source[key];
+      }
+    }
+  }
+  if (hasOwn(target, key)) {
+    return target[key];
+  }
+}
+let currentSlotConsumer = null;
+function setCurrentSlotConsumer(consumer) {
+  try {
+    return currentSlotConsumer;
+  } finally {
+    currentSlotConsumer = consumer;
+  }
+}
+function getParentInstance() {
+  return currentSlotConsumer || currentInstance;
+}
+function withVaporCtx(fn) {
+  const owner = currentInstance;
+  return (...args) => {
+    const prev = setCurrentInstance(owner);
+    const prevConsumer = setCurrentSlotConsumer(prev[0]);
+    try {
+      return fn(...args);
+    } finally {
+      setCurrentInstance(...prev);
+      setCurrentSlotConsumer(prevConsumer);
+    }
+  };
+}
+function createSlot(name, rawProps, fallback, noSlotted) {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  const _isLastInsertion = isLastInsertion;
+  if (!isHydrating) resetInsertionState();
+  const instance = currentInstance;
+  const rawSlots = instance.rawSlots;
+  const slotProps = rawProps ? new Proxy(rawProps, rawPropsProxyHandlers) : EMPTY_OBJ;
+  let fragment;
+  if (isRef(rawSlots._)) {
+    if (isHydrating) locateHydrationNode();
+    fragment = instance.appContext.vapor.vdomSlot(
+      rawSlots._,
+      name,
+      slotProps,
+      instance,
+      fallback
+    );
+  } else {
+    fragment = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("slot") : new DynamicFragment();
+    const isDynamicName = isFunction(name);
+    const slotScopeIds = [];
+    if (!noSlotted) {
+      const scopeId = instance.type.__scopeId;
+      if (scopeId) {
+        slotScopeIds.push(`${scopeId}-s`);
+      }
+    }
+    const renderSlot = () => {
+      const slotName = isFunction(name) ? name() : name;
+      if (instance.ce || instance.parent && isAsyncWrapper(instance.parent) && instance.parent.ce) {
+        const el = createElement("slot");
+        renderEffect(() => {
+          setDynamicProps(el, [
+            slotProps,
+            slotName !== "default" ? { name: slotName } : {}
+          ]);
+        });
+        if (fallback) insert(fallback(), el);
+        fragment.nodes = el;
+        return;
+      }
+      const slot = getSlot(rawSlots, slotName);
+      if (slot) {
+        fragment.fallback = fallback;
+        fragment.update(
+          slot._bound || (slot._bound = () => {
+            const prevSlotScopeIds = setCurrentSlotScopeIds(
+              slotScopeIds.length > 0 ? slotScopeIds : null
+            );
+            try {
+              return slot(slotProps);
+            } finally {
+              setCurrentSlotScopeIds(prevSlotScopeIds);
+            }
+          })
+        );
+      } else {
+        fragment.update(fallback);
+      }
+    };
+    if (isDynamicName || rawSlots.$) {
+      renderEffect(renderSlot);
+    } else {
+      renderSlot();
+    }
+  }
+  if (!isHydrating) {
+    if (!noSlotted) {
+      const scopeId = instance.type.__scopeId;
+      if (scopeId) {
+        setScopeId(fragment, [`${scopeId}-s`]);
+      }
+    }
+    if (_insertionParent) insert(fragment, _insertionParent, _insertionAnchor);
+  } else {
+    if (fragment.insert) {
+      fragment.hydrate();
+    }
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
+    }
+  }
+  return fragment;
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function defineVaporComponent(comp, extraOptions) {
+  if (isFunction(comp)) {
+    return /* @__PURE__ */ (() => extend({ name: comp.name }, extraOptions, {
+      setup: comp,
+      __vapor: true
+    }))();
+  }
+  comp.__vapor = true;
+  return comp;
+}
+
+const VaporKeepAliveImpl = defineVaporComponent({
+  name: "VaporKeepAlive",
+  __isKeepAlive: true,
+  props: {
+    include: [String, RegExp, Array],
+    exclude: [String, RegExp, Array],
+    max: [String, Number]
+  },
+  setup(props, { slots }) {
+    if (!slots.default) {
+      return void 0;
+    }
+    const keepAliveInstance = currentInstance;
+    const cache = /* @__PURE__ */ new Map();
+    const keys = /* @__PURE__ */ new Set();
+    const storageContainer = createElement("div");
+    const keptAliveScopes = /* @__PURE__ */ new Map();
+    let current;
+    if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
+      keepAliveInstance.__v_cache = cache;
+    }
+    keepAliveInstance.getStorageContainer = () => storageContainer;
+    keepAliveInstance.getCachedComponent = (comp) => cache.get(comp);
+    keepAliveInstance.activate = (instance, parentNode, anchor) => {
+      current = instance;
+      activate(instance, parentNode, anchor);
+    };
+    keepAliveInstance.deactivate = (instance) => {
+      current = void 0;
+      deactivate(instance, storageContainer);
+    };
+    const innerCacheBlock = (key, instance) => {
       const { max } = props;
       if (cache.has(key)) {
         keys.delete(key);
@@ -1474,116 +1591,49 @@ const VaporKeepAliveImpl = defineVaporComponent({
       }
       cache.set(key, instance);
       current = instance;
-    }
-    function cacheBlock() {
-      const block = keepAliveInstance.block;
-      const innerBlock = getInnerBlock(block);
-      if (!innerBlock || !shouldCache(innerBlock)) return;
-      let toCache;
-      let key;
-      let frag;
-      if (isFragment(block) && (frag = findInteropFragment(block))) {
-        toCache = frag;
-        key = frag.vnode.type;
-      } else {
-        toCache = innerBlock;
-        key = innerBlock.type;
-      }
-      innerCacheBlock(key, toCache);
-    }
-    onMounted(cacheBlock);
-    onUpdated(cacheBlock);
-    onBeforeUnmount(() => {
-      cache.forEach((cached, key) => {
-        const instance = getInstanceFromCache(cached);
-        if (!instance) return;
-        resetCachedShapeFlag(cached);
-        cache.delete(key);
-        if (current) {
-          const currentKey = isVaporComponent(current) ? current.type : current.vnode.type;
-          if (currentKey === key) {
-            const da = instance.da;
-            da && queuePostFlushCb(da);
-            return;
-          }
-        }
-        remove(cached, storageContainer);
-      });
-    });
-    keepAliveInstance.getStorageContainer = () => storageContainer;
-    keepAliveInstance.getCachedComponent = (comp) => {
-      return cache.get(comp);
     };
-    keepAliveInstance.cacheComponent = (instance) => {
-      if (!shouldCache(instance)) return;
-      instance.shapeFlag |= 256;
-      innerCacheBlock(instance.type, instance);
+    const cacheBlock = () => {
+      const block = keepAliveInstance.block;
+      const [innerBlock, interop] = getInnerBlock(block);
+      if (!innerBlock || !shouldCache(innerBlock, props, interop)) return;
+      innerCacheBlock(
+        interop ? innerBlock.vnode.type : innerBlock.type,
+        innerBlock
+      );
     };
-    keepAliveInstance.processFragment = (frag) => {
-      const innerBlock = getInnerBlock(frag.nodes);
-      if (!innerBlock) return;
-      const fragment = findInteropFragment(frag.nodes);
-      if (fragment) {
-        if (cache.has(fragment.vnode.type)) {
-          fragment.vnode.shapeFlag |= 512;
+    const processFragment = (frag) => {
+      const [innerBlock, interop] = getInnerBlock(frag.nodes);
+      if (!innerBlock && !shouldCache(innerBlock, props, interop)) return;
+      if (interop) {
+        if (cache.has(innerBlock.vnode.type)) {
+          innerBlock.vnode.shapeFlag |= 512;
         }
-        if (shouldCache(innerBlock)) {
-          fragment.vnode.shapeFlag |= 256;
+        if (shouldCache(innerBlock, props, true)) {
+          innerBlock.vnode.shapeFlag |= 256;
         }
       } else {
         if (cache.has(innerBlock.type)) {
           innerBlock.shapeFlag |= 512;
         }
-        if (shouldCache(innerBlock)) {
+        if (shouldCache(innerBlock, props)) {
           innerBlock.shapeFlag |= 256;
         }
       }
     };
-    keepAliveInstance.cacheFragment = (fragment) => {
-      const innerBlock = getInnerBlock(fragment.nodes);
-      if (!innerBlock || !shouldCache(innerBlock)) return;
-      let toCache;
+    const cacheFragment = (fragment) => {
+      const [innerBlock, interop] = getInnerBlock(fragment.nodes);
+      if (!innerBlock || !shouldCache(innerBlock, props, interop)) return;
       let key;
-      const frag = findInteropFragment(fragment);
-      if (frag) {
-        frag.vnode.shapeFlag |= 256;
-        toCache = frag;
-        key = frag.vnode.type;
+      if (interop) {
+        innerBlock.vnode.shapeFlag |= 256;
+        key = innerBlock.vnode.type;
       } else {
         innerBlock.shapeFlag |= 256;
-        toCache = innerBlock;
         key = innerBlock.type;
       }
-      innerCacheBlock(key, toCache);
-    };
-    keepAliveInstance.activate = (instance, parentNode, anchor) => {
-      current = instance;
-      activate(instance, parentNode, anchor);
-    };
-    keepAliveInstance.deactivate = (instance) => {
-      current = void 0;
-      deactivate(instance, storageContainer);
+      innerCacheBlock(key, innerBlock);
     };
-    function resetCachedShapeFlag(cached) {
-      if (isVaporComponent(cached)) {
-        resetShapeFlag(cached);
-      } else {
-        resetShapeFlag(cached.vnode);
-      }
-    }
-    let children = slots.default();
-    if (isArray(children) && children.length > 1) {
-      if (!!(process.env.NODE_ENV !== "production")) {
-        warn(`KeepAlive should contain exactly one component child.`);
-      }
-      return children;
-    }
-    if (isVaporComponent(children)) {
-      children.shapeFlag |= 256;
-    } else if (isInteropFragment(children)) {
-      children.vnode.shapeFlag |= 256;
-    }
-    function pruneCache(filter) {
+    const pruneCache = (filter) => {
       cache.forEach((cached, key) => {
         const instance = getInstanceFromCache(cached);
         if (!instance) return;
@@ -1592,8 +1642,8 @@ const VaporKeepAliveImpl = defineVaporComponent({
           pruneCacheEntry(key);
         }
       });
-    }
-    function pruneCacheEntry(key) {
+    };
+    const pruneCacheEntry = (key) => {
       const cached = cache.get(key);
       resetCachedShapeFlag(cached);
       if (cached !== current) {
@@ -1601,7 +1651,7 @@ const VaporKeepAliveImpl = defineVaporComponent({
       }
       cache.delete(key);
       keys.delete(key);
-    }
+    };
     watch(
       () => [props.include, props.exclude],
       ([include, exclude]) => {
@@ -1611,29 +1661,103 @@ const VaporKeepAliveImpl = defineVaporComponent({
       // prune post-render after `current` has been updated
       { flush: "post", deep: true }
     );
+    onMounted(cacheBlock);
+    onUpdated(cacheBlock);
+    onBeforeUnmount(() => {
+      cache.forEach((cached, key) => {
+        const instance = getInstanceFromCache(cached);
+        if (!instance) return;
+        resetCachedShapeFlag(cached);
+        cache.delete(key);
+        if (current) {
+          const currentKey = isVaporComponent(current) ? current.type : current.vnode.type;
+          if (currentKey === key) {
+            const da = instance.da;
+            da && queuePostFlushCb(da);
+            return;
+          }
+        }
+        remove(cached, storageContainer);
+      });
+      keptAliveScopes.forEach((scope) => scope.stop());
+      keptAliveScopes.clear();
+    });
+    let children = slots.default();
+    if (isArray(children)) {
+      children = children.filter((child) => !(child instanceof Comment));
+      if (children.length > 1) {
+        if (!!(process.env.NODE_ENV !== "production")) {
+          warn(`KeepAlive should contain exactly one component child.`);
+        }
+        return children;
+      }
+    }
+    const injectKeepAliveHooks = (frag) => {
+      (frag.beforeTeardown || (frag.beforeTeardown = [])).push(
+        (oldKey, nodes, scope) => {
+          processFragment(frag);
+          keptAliveScopes.set(oldKey, scope);
+          return true;
+        }
+      );
+      (frag.beforeMount || (frag.beforeMount = [])).push(
+        () => cacheFragment(frag)
+      );
+      frag.getScope = (key) => {
+        const scope = keptAliveScopes.get(key);
+        if (scope) {
+          keptAliveScopes.delete(key);
+          return scope;
+        }
+      };
+    };
+    if (isVaporComponent(children)) {
+      children.shapeFlag |= 256;
+      if (isAsyncWrapper(children)) {
+        injectKeepAliveHooks(children.block);
+      }
+    } else if (isInteropFragment(children)) {
+      children.vnode.shapeFlag |= 256;
+    } else if (isDynamicFragment(children)) {
+      processFragment(children);
+      injectKeepAliveHooks(children);
+      if (isVaporComponent(children.nodes) && isAsyncWrapper(children.nodes)) {
+        injectKeepAliveHooks(children.nodes.block);
+      }
+    }
     return children;
   }
 });
+const shouldCache = (block, props, interop = false) => {
+  const isAsync = !interop && isAsyncWrapper(block);
+  const type = interop ? block.vnode.type : block.type;
+  if (isAsync && !type.__asyncResolved) {
+    return true;
+  }
+  const { include, exclude } = props;
+  const name = getComponentName(isAsync ? type.__asyncResolved : type);
+  return !(include && (!name || !matches(include, name)) || exclude && name && matches(exclude, name));
+};
+const resetCachedShapeFlag = (cached) => {
+  if (isVaporComponent(cached)) {
+    resetShapeFlag(cached);
+  } else {
+    resetShapeFlag(cached.vnode);
+  }
+};
 function getInnerBlock(block) {
   if (isVaporComponent(block)) {
-    return block;
+    return [block, false];
   } else if (isInteropFragment(block)) {
-    return block.vnode;
+    return [block, true];
   } else if (isFragment(block)) {
     return getInnerBlock(block.nodes);
   }
+  return [void 0, false];
 }
 function isInteropFragment(block) {
   return !!(isFragment(block) && block.vnode);
 }
-function findInteropFragment(block) {
-  if (isInteropFragment(block)) {
-    return block;
-  }
-  if (isFragment(block)) {
-    return findInteropFragment(block.nodes);
-  }
-}
 function getInstanceFromCache(cached) {
   if (isVaporComponent(cached)) {
     return cached;
@@ -1824,8 +1948,7 @@ const vaporSlotsProxyHandler = {
   }
 };
 let vdomHydrateNode;
-function createVDOMComponent(internals, component, rawProps, rawSlots) {
-  const parentInstance = currentInstance;
+function createVDOMComponent(internals, component, parentComponent, rawProps, rawSlots) {
   const frag = new VaporFragment([]);
   const vnode = frag.vnode = createVNode(
     component,
@@ -1834,7 +1957,10 @@ function createVDOMComponent(internals, component, rawProps, rawSlots) {
   const wrapper = new VaporComponentInstance(
     { props: component.props },
     rawProps,
-    rawSlots
+    rawSlots,
+    parentComponent ? parentComponent.appContext : void 0,
+    void 0,
+    parentComponent
   );
   vnode.vi = (instance) => {
     instance.props = shallowReactive(wrapper.props);
@@ -1854,9 +1980,9 @@ function createVDOMComponent(internals, component, rawProps, rawSlots) {
     if (vnode.shapeFlag & 256) {
       deactivate$1(
         vnode,
-        findParentKeepAlive(parentInstance).getStorageContainer(),
+        findParentKeepAlive(parentComponent).getStorageContainer(),
         internals,
-        parentInstance,
+        parentComponent,
         null
       );
       return;
@@ -1864,12 +1990,12 @@ function createVDOMComponent(internals, component, rawProps, rawSlots) {
     internals.umt(vnode.component, null, !!parentNode);
   };
   frag.hydrate = () => {
-    hydrateVNode(vnode, parentInstance);
+    hydrateVNode(vnode, parentComponent);
     onScopeDispose(unmount, true);
     isMounted = true;
     frag.nodes = vnode.el;
   };
-  vnode.scopeId = parentInstance && parentInstance.type.__scopeId;
+  vnode.scopeId = currentInstance && currentInstance.type.__scopeId || null;
   vnode.slotScopeIds = currentSlotScopeIds;
   frag.insert = (parentNode, anchor, transition) => {
     if (isHydrating) return;
@@ -1879,21 +2005,21 @@ function createVDOMComponent(internals, component, rawProps, rawSlots) {
         parentNode,
         anchor,
         internals,
-        parentInstance,
+        parentComponent,
         null,
         void 0,
         false
       );
     } else {
       const prev = currentInstance;
-      simpleSetCurrentInstance(parentInstance);
+      simpleSetCurrentInstance(parentComponent);
       if (!isMounted) {
         if (transition) setTransitionHooks$1(vnode, transition);
         internals.mt(
           vnode,
           parentNode,
           anchor,
-          parentInstance,
+          parentComponent,
           null,
           void 0,
           false
@@ -1907,12 +2033,13 @@ function createVDOMComponent(internals, component, rawProps, rawSlots) {
           parentNode,
           anchor,
           2,
-          parentInstance
+          parentComponent
         );
       }
       simpleSetCurrentInstance(prev);
     }
     frag.nodes = vnode.el;
+    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
   };
   frag.remove = unmount;
   frag.setRef = (instance, ref, refFor, refKey) => {
@@ -1954,6 +2081,7 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
         internals.um(oldVNode, parentComponent, null);
       }
     };
+    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
   };
   const render = (parentNode, anchor) => {
     renderEffect(() => {
@@ -2154,7 +2282,7 @@ function getPropsProxyHandlers(comp, once) {
         return resolvePropValue(
           propsOptions,
           key,
-          rawProps[rawKey](),
+          resolveSource(rawProps[rawKey]),
           instance,
           resolveDefault
         );
@@ -2257,10 +2385,11 @@ function getAttrFromRawProps(rawProps, key) {
     }
   }
   if (hasOwn(rawProps, key)) {
+    const value = resolveSource(rawProps[key]);
     if (merged) {
-      merged.push(rawProps[key]());
+      merged.push(value);
     } else {
-      return rawProps[key]();
+      return value;
     }
   }
   if (merged && merged.length) {
@@ -2351,7 +2480,7 @@ function resolveDynamicProps(props) {
   const mergedRawProps = {};
   for (const key in props) {
     if (key !== "$") {
-      mergedRawProps[key] = props[key]();
+      mergedRawProps[key] = resolveSource(props[key]);
     }
   }
   if (props.$) {
@@ -2485,6 +2614,7 @@ class TeleportFragment extends VaporFragment {
     };
     this.rawProps = props;
     this.rawSlots = slots;
+    this.parentComponent = currentInstance;
     this.anchor = isHydrating ? void 0 : !!(process.env.NODE_ENV !== "production") ? createComment("teleport end") : createTextNode();
     renderEffect(() => {
       this.resolvedProps = extend(
@@ -2494,6 +2624,7 @@ class TeleportFragment extends VaporFragment {
           rawPropsProxyHandlers
         )
       );
+      this.isDisabled = isTeleportDisabled(this.resolvedProps);
       this.handlePropsUpdate();
     });
     if (!isHydrating) {
@@ -2509,8 +2640,21 @@ class TeleportFragment extends VaporFragment {
         this.rawSlots.default && this.rawSlots.default()
       );
     });
+    const nodes = this.nodes;
+    if (this.parentComponent && this.parentComponent.ut) {
+      if (isFragment(nodes)) {
+        (nodes.updated || (nodes.updated = [])).push(() => updateCssVars(this));
+      } else if (isArray(nodes)) {
+        nodes.forEach((node) => {
+          if (isFragment(node)) {
+            (node.updated || (node.updated = [])).push(
+              () => updateCssVars(this)
+            );
+          }
+        });
+      }
+    }
     if (!!(process.env.NODE_ENV !== "production")) {
-      const nodes = this.nodes;
       if (isVaporComponent(nodes)) {
         nodes.parentTeleport = this;
       } else if (isArray(nodes)) {
@@ -2554,7 +2698,11 @@ class TeleportFragment extends VaporFragment {
           insert(this.targetStart = createTextNode(""), target);
           insert(this.targetAnchor = createTextNode(""), target);
         }
+        if (this.parentComponent && this.parentComponent.isCE) {
+          (this.parentComponent.ce._teleportTargets || (this.parentComponent.ce._teleportTargets = /* @__PURE__ */ new Set())).add(target);
+        }
         mount(target, this.targetAnchor);
+        updateCssVars(this);
       } else if (!!(process.env.NODE_ENV !== "production")) {
         warn(
           `Invalid Teleport target on ${this.targetAnchor ? "update" : "mount"}:`,
@@ -2563,10 +2711,13 @@ class TeleportFragment extends VaporFragment {
         );
       }
     };
-    if (isTeleportDisabled(this.resolvedProps)) {
+    if (this.isDisabled) {
       mount(this.parent, this.anchor);
+      updateCssVars(this);
     } else {
-      if (isTeleportDeferred(this.resolvedProps)) {
+      if (isTeleportDeferred(this.resolvedProps) || // force defer when the parent is not connected to the DOM,
+      // typically due to an early insertion caused by setInsertionState.
+      !this.parent.isConnected) {
         queuePostFlushCb(mountToTarget);
       } else {
         mountToTarget();
@@ -2613,6 +2764,25 @@ function locateTeleportEndAnchor(node = currentHydrationNode) {
   }
   return null;
 }
+function updateCssVars(frag) {
+  const ctx = frag.parentComponent;
+  if (ctx && ctx.ut) {
+    let node, anchor;
+    if (frag.isDisabled) {
+      node = frag.placeholder;
+      anchor = frag.anchor;
+    } else {
+      node = frag.targetStart;
+      anchor = frag.targetAnchor;
+    }
+    while (node && node !== anchor) {
+      if (node.nodeType === 1)
+        node.setAttribute("data-v-owner", String(ctx.uid));
+      node = node.nextSibling;
+    }
+    ctx.ut();
+  }
+}
 
 function isBlock(val) {
   return val instanceof Node || isArray(val) || isVaporComponent(val) || isFragment(val);
@@ -2695,11 +2865,6 @@ function remove(block, parent) {
     if (block.anchor) remove(block.anchor, parent);
     if (block.scope) {
       block.scope.stop();
-      const scopes = block.keptAliveScopes;
-      if (scopes) {
-        scopes.forEach((scope) => scope.stop());
-        scopes.clear();
-      }
     }
   }
 }
@@ -2774,13 +2939,15 @@ function setScopeId(block, scopeIds) {
   }
 }
 function setComponentScopeId(instance) {
-  const parent = instance.parent;
-  if (!parent) return;
+  const { parent, scopeId } = instance;
+  if (!parent || !scopeId) return;
   if (isArray(instance.block) && instance.block.length > 1) return;
   const scopeIds = [];
-  const scopeId = parent.type.__scopeId;
-  if (scopeId) {
+  const parentScopeId = parent && parent.type.__scopeId;
+  if (parentScopeId !== scopeId) {
     scopeIds.push(scopeId);
+  } else {
+    if (parentScopeId) scopeIds.push(parentScopeId);
   }
   if (parent.subTree && parent.subTree.component === instance && parent.vnode.scopeId) {
     scopeIds.push(parent.vnode.scopeId);
@@ -2809,6 +2976,10 @@ function hmrRerender(instance) {
   insert(instance.block, parent, anchor);
 }
 function hmrReload(instance, newComp) {
+  if (instance.parent && isKeepAlive(instance.parent)) {
+    instance.parent.hmrRerender();
+    return;
+  }
   const normalized = normalizeBlock(instance.block);
   const parent = normalized[0].parentNode;
   const anchor = normalized[normalized.length - 1].nextSibling;
@@ -2866,8 +3037,9 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
   } else {
     resetInsertionState();
   }
-  if (isSingleRoot && component.inheritAttrs !== false && isVaporComponent(currentInstance) && currentInstance.hasFallthrough) {
-    const attrs = currentInstance.attrs;
+  const parentInstance = getParentInstance();
+  if (isSingleRoot && component.inheritAttrs !== false && isVaporComponent(parentInstance) && parentInstance.hasFallthrough) {
+    const attrs = parentInstance.attrs;
     if (rawProps) {
       (rawProps.$ || (rawProps.$ = [])).push(
         () => attrs
@@ -2876,18 +3048,21 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
       rawProps = { $: [() => attrs] };
     }
   }
-  if (currentInstance && currentInstance.vapor && isKeepAlive(currentInstance)) {
-    const cached = currentInstance.getCachedComponent(
+  if (parentInstance && parentInstance.vapor && isKeepAlive(parentInstance)) {
+    const cached = parentInstance.getCachedComponent(
       component
     );
     if (cached) return cached;
   }
   if (appContext.vapor && !component.__vapor) {
+    const prevSlotConsumer2 = setCurrentSlotConsumer(null);
     const frag = appContext.vapor.vdomMount(
       component,
+      parentInstance,
       rawProps,
       rawSlots
     );
+    setCurrentSlotConsumer(prevSlotConsumer2);
     if (!isHydrating) {
       if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
     } else {
@@ -2915,15 +3090,15 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
     rawProps,
     rawSlots,
     appContext,
-    once
+    once,
+    parentInstance
   );
-  if (!!(process.env.NODE_ENV !== "production") && component.__hmrId) {
+  const prevSlotConsumer = setCurrentSlotConsumer(null);
+  if (!!(process.env.NODE_ENV !== "production")) {
     registerHMR(instance);
     instance.isSingleRoot = isSingleRoot;
     instance.hmrRerender = hmrRerender.bind(null, instance);
     instance.hmrReload = hmrReload.bind(null, instance);
-  }
-  if (!!(process.env.NODE_ENV !== "production")) {
     pushWarningContext(instance);
     startMeasure(instance, `init`);
     instance.propsOptions = normalizePropsOptions(component);
@@ -2958,6 +3133,7 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
   } else {
     setupComponent(instance, component);
   }
+  setCurrentSlotConsumer(prevSlotConsumer);
   onScopeDispose$1(() => unmountComponent(instance), true);
   if (_insertionParent || isHydrating) {
     mountComponent(instance, _insertionParent, _insertionAnchor);
@@ -3055,16 +3231,16 @@ const emptyContext = {
   provides: /* @__PURE__ */ Object.create(null)
 };
 class VaporComponentInstance {
-  constructor(comp, rawProps, rawSlots, appContext, once) {
+  constructor(comp, rawProps, rawSlots, appContext, once, parent = currentInstance) {
     this.vapor = true;
     this.uid = nextUid();
     this.type = comp;
-    this.parent = currentInstance;
-    this.root = currentInstance ? currentInstance.root : this;
-    if (currentInstance) {
-      this.appContext = currentInstance.appContext;
-      this.provides = currentInstance.provides;
-      this.ids = currentInstance.ids;
+    this.parent = parent;
+    this.root = parent ? parent.root : this;
+    if (parent) {
+      this.appContext = parent.appContext;
+      this.provides = parent.provides;
+      this.ids = parent.ids;
     } else {
       this.appContext = appContext || emptyContext;
       this.provides = Object.create(this.appContext.provides);
@@ -3088,6 +3264,10 @@ class VaporComponentInstance {
     }
     this.rawSlots = rawSlots || EMPTY_OBJ;
     this.slots = rawSlots ? rawSlots.$ ? new Proxy(rawSlots, dynamicSlotsProxyHandlers) : rawSlots : EMPTY_OBJ;
+    this.scopeId = currentInstance && currentInstance.type.__scopeId;
+    if (comp.ce) {
+      comp.ce(this);
+    }
   }
   /**
    * Expose `getKeysFromRawProps` on the instance so it can be used in code
@@ -3111,6 +3291,9 @@ function createComponentWithFallback(comp, rawProps, rawSlots, isSingleRoot, onc
       appContext
     );
   }
+  return createPlainElement(comp, rawProps, rawSlots, isSingleRoot, once);
+}
+function createPlainElement(comp, rawProps, rawSlots, isSingleRoot, once) {
   const _insertionParent = insertionParent;
   const _insertionAnchor = insertionAnchor;
   const _isLastInsertion = isLastInsertion;
@@ -3136,8 +3319,15 @@ function createComponentWithFallback(comp, rawProps, rawSlots, isSingleRoot, onc
       nextNode = locateNextNode(el);
       setCurrentHydrationNode(el.firstChild);
     }
-    if (rawSlots.$) ; else {
-      insert(getSlot(rawSlots, "default")(), el);
+    if (rawSlots.$) {
+      const frag = new DynamicFragment(
+        isHydrating ? "" : !!(process.env.NODE_ENV !== "production") ? "slot" : void 0
+      );
+      renderEffect(() => frag.update(getSlot(rawSlots, "default")));
+      if (!isHydrating) insert(frag, el);
+    } else {
+      const block = getSlot(rawSlots, "default")();
+      if (!isHydrating) insert(block, el);
     }
     if (isHydrating) {
       setCurrentHydrationNode(nextNode);
@@ -3157,6 +3347,11 @@ function mountComponent(instance, parent, anchor) {
     findParentKeepAlive(instance).activate(instance, parent, anchor);
     return;
   }
+  const { root, type } = instance;
+  if (root && root.ce && // @ts-expect-error _def is private
+  root.ce._def.shadowRoot !== false) {
+    root.ce._injectChildStyle(type);
+  }
   if (!!(process.env.NODE_ENV !== "production")) {
     startMeasure(instance, `mount`);
   }
@@ -3213,6 +3408,22 @@ function getRootElement(block) {
       return nodes;
     }
   }
+  if (isArray(block)) {
+    let singleRoot;
+    let hasComment = false;
+    for (const b of block) {
+      if (b instanceof Comment) {
+        hasComment = true;
+        continue;
+      }
+      const thisRoot = getRootElement(b);
+      if (!thisRoot || singleRoot) {
+        return;
+      }
+      singleRoot = thisRoot;
+    }
+    return hasComment ? singleRoot : void 0;
+  }
 }
 
 let _createApp;
@@ -3224,7 +3435,7 @@ const mountApp = (app, container) => {
     }
     container.textContent = "";
   }
-  const instance = createComponent(
+  const instance = app._ceComponent || createComponent(
     app._component,
     app._props,
     null,
@@ -3241,7 +3452,7 @@ const hydrateApp = (app, container) => {
   optimizePropertyLookup();
   let instance;
   withHydration(container, () => {
-    instance = createComponent(
+    instance = app._ceComponent || createComponent(
       app._component,
       app._props,
       null,
@@ -3402,28 +3613,146 @@ function defineVaporAsyncComponent(source) {
   });
 }
 function createInnerComp(comp, parent, frag) {
-  const { rawProps, rawSlots, isSingleRoot, appContext, $transition } = parent;
+  const { rawProps, rawSlots, appContext, $transition } = parent;
   const instance = createComponent(
     comp,
     rawProps,
     rawSlots,
-    isSingleRoot,
+    // rawProps is shared and already contains fallthrough attrs.
+    // so isSingleRoot should be undefined
+    void 0,
     void 0,
     appContext
   );
-  if (parent.parent && isKeepAlive(parent.parent)) {
-    parent.parent.cacheComponent(instance);
-    parent.parent.cacheComponent(parent);
-  }
   if ($transition) setTransitionHooks(instance, $transition);
   frag && frag.setRef && frag.setRef(instance);
   return instance;
 }
 
+// @__NO_SIDE_EFFECTS__
+function defineVaporCustomElement(options, extraOptions, _createApp) {
+  let Comp = defineVaporComponent(options, extraOptions);
+  if (isPlainObject(Comp)) Comp = extend({}, Comp, extraOptions);
+  class VaporCustomElement extends VaporElement {
+    constructor(initialProps) {
+      super(Comp, initialProps, _createApp);
+    }
+  }
+  VaporCustomElement.def = Comp;
+  return VaporCustomElement;
+}
+const defineVaporSSRCustomElement = (/* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
+  return /* @__PURE__ */ defineVaporCustomElement(options, extraOptions, createVaporSSRApp);
+});
+class VaporElement extends VueElementBase {
+  constructor(def, props = {}, createAppFn = createVaporApp) {
+    super(def, props, createAppFn);
+  }
+  _needsHydration() {
+    if (this.shadowRoot && this._createApp !== createVaporApp) {
+      return true;
+    } else {
+      if (!!(process.env.NODE_ENV !== "production") && this.shadowRoot) {
+        warn(
+          `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineVaporSSRCustomElement\`.`
+        );
+      }
+    }
+    return false;
+  }
+  _mount(def) {
+    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) && !def.name) {
+      def.name = "VaporElement";
+    }
+    this._app = this._createApp(this._def);
+    this._inheritParentContext();
+    if (this._def.configureApp) {
+      this._def.configureApp(this._app);
+    }
+    if (this.shadowRoot && this._createApp === createVaporSSRApp) {
+      withHydration(this._root, this._createComponent.bind(this));
+    } else {
+      this._createComponent();
+    }
+    this._app.mount(this._root);
+    if (!this.shadowRoot) {
+      this._renderSlots();
+    }
+  }
+  _update() {
+    if (!this._app) return;
+    const renderEffects = this._instance.renderEffects;
+    if (renderEffects) renderEffects.forEach((e) => e.run());
+  }
+  _unmount() {
+    {
+      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) {
+    this._updateFragmentNodes(
+      this._instance.block,
+      replacements
+    );
+  }
+  /**
+   * Replace slot nodes with their replace content
+   * @internal
+   */
+  _updateFragmentNodes(block, replacements) {
+    if (Array.isArray(block)) {
+      block.forEach((item) => this._updateFragmentNodes(item, replacements));
+      return;
+    }
+    if (!isFragment(block)) return;
+    const { nodes } = block;
+    if (Array.isArray(nodes)) {
+      const newNodes = [];
+      for (const node of nodes) {
+        if (node instanceof HTMLSlotElement) {
+          newNodes.push(...replacements.get(node));
+        } else {
+          this._updateFragmentNodes(node, replacements);
+          newNodes.push(node);
+        }
+      }
+      block.nodes = newNodes;
+    } else if (nodes instanceof HTMLSlotElement) {
+      block.nodes = replacements.get(nodes);
+    } else {
+      this._updateFragmentNodes(nodes, replacements);
+    }
+  }
+  _createComponent() {
+    this._def.ce = (instance) => {
+      this._app._ceComponent = this._instance = instance;
+      if (!this.shadowRoot) {
+        this._instance.u = [this._renderSlots.bind(this)];
+      }
+      this._processInstance();
+    };
+    createComponent(
+      this._def,
+      this._props,
+      void 0,
+      void 0,
+      void 0,
+      this._app._context
+    );
+  }
+}
+
 let t;
 /*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
-function template(html, root) {
+function template(html, root, ns) {
   let node;
   return () => {
     if (isHydrating) {
@@ -3431,59 +3760,228 @@ function template(html, root) {
       if (root) adopted.$root = true;
       return adopted;
     }
-    if (html[0] !== "<") {
-      return createTextNode(html);
+    if (html[0] !== "<") {
+      return createTextNode(html);
+    }
+    if (!node) {
+      t = t || document.createElement("template");
+      if (ns) {
+        const tag = ns === 1 ? "svg" : "math";
+        t.innerHTML = `<${tag}>${html}</${tag}>`;
+        node = _child(_child(t.content));
+      } else {
+        t.innerHTML = html;
+        node = _child(t.content);
+      }
+    }
+    const ret = node.cloneNode(true);
+    if (root) ret.$root = true;
+    return ret;
+  };
+}
+
+function createIf(condition, b1, b2, once) {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  const _isLastInsertion = isLastInsertion;
+  if (!isHydrating) resetInsertionState();
+  let frag;
+  if (once) {
+    frag = condition() ? b1() : b2 ? b2() : [];
+  } else {
+    frag = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if") : new DynamicFragment();
+    renderEffect(() => frag.update(condition() ? b1 : b2));
+  }
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
+  } else {
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
+    }
+  }
+  return frag;
+}
+
+function createKeyedFragment(key, render) {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  const _isLastInsertion = isLastInsertion;
+  if (!isHydrating) resetInsertionState();
+  const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("keyed") : new DynamicFragment();
+  renderEffect(() => {
+    frag.update(render, key());
+  });
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
+  } else {
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
+    }
+  }
+  return frag;
+}
+
+const positionMap = /* @__PURE__ */ new WeakMap();
+const newPositionMap = /* @__PURE__ */ new WeakMap();
+const decorate = (t) => {
+  delete t.props.mode;
+  t.__vapor = true;
+  return t;
+};
+const VaporTransitionGroup = decorate({
+  name: "VaporTransitionGroup",
+  props: /* @__PURE__ */ extend({}, TransitionPropsValidators, {
+    tag: String,
+    moveClass: String
+  }),
+  setup(props, { slots }) {
+    const instance = currentInstance;
+    const state = useTransitionState();
+    const cssTransitionProps = resolveTransitionProps(props);
+    let prevChildren;
+    let children;
+    const slottedBlock = slots.default && slots.default();
+    onBeforeUpdate(() => {
+      prevChildren = [];
+      children = getTransitionBlocks(slottedBlock);
+      if (children) {
+        for (let i = 0; i < children.length; i++) {
+          const child = children[i];
+          if (isValidTransitionBlock(child)) {
+            prevChildren.push(child);
+            child.$transition.disabled = true;
+            positionMap.set(
+              child,
+              getTransitionElement(child).getBoundingClientRect()
+            );
+          }
+        }
+      }
+    });
+    onUpdated(() => {
+      if (!prevChildren.length) {
+        return;
+      }
+      const moveClass = props.moveClass || `${props.name || "v"}-move`;
+      const firstChild = getFirstConnectedChild(prevChildren);
+      if (!firstChild || !hasCSSTransform(
+        firstChild,
+        firstChild.parentNode,
+        moveClass
+      )) {
+        prevChildren = [];
+        return;
+      }
+      prevChildren.forEach(callPendingCbs);
+      prevChildren.forEach((child) => {
+        child.$transition.disabled = false;
+        recordPosition(child);
+      });
+      const movedChildren = prevChildren.filter(applyTranslation);
+      forceReflow();
+      movedChildren.forEach(
+        (c) => handleMovedChildren(
+          getTransitionElement(c),
+          moveClass
+        )
+      );
+      prevChildren = [];
+    });
+    setTransitionHooksOnFragment(slottedBlock, {
+      props: cssTransitionProps,
+      state,
+      instance,
+      group: true
+    });
+    children = getTransitionBlocks(slottedBlock);
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (isValidTransitionBlock(child)) {
+        if (child.$key != null) {
+          const hooks = resolveTransitionHooks(
+            child,
+            cssTransitionProps,
+            state,
+            instance
+          );
+          hooks.group = true;
+          setTransitionHooks(child, hooks);
+        } else if (!!(process.env.NODE_ENV !== "production") && child.$key == null) {
+          warn(`<transition-group> children must be keyed`);
+        }
+      }
+    }
+    const tag = props.tag;
+    if (tag) {
+      const container = createElement(tag);
+      insert(slottedBlock, container);
+      if (instance.hasFallthrough) {
+        container.$root = true;
+        renderEffect(() => applyFallthroughProps(container, instance.attrs));
+      }
+      return container;
+    } else {
+      return slottedBlock;
+    }
+  }
+});
+function getTransitionBlocks(block) {
+  let children = [];
+  if (block instanceof Node) {
+    children.push(block);
+  } else if (isVaporComponent(block)) {
+    children.push(...getTransitionBlocks(block.block));
+  } else if (isArray(block)) {
+    for (let i = 0; i < block.length; i++) {
+      const b = block[i];
+      const blocks = getTransitionBlocks(b);
+      if (isForBlock(b)) blocks.forEach((block2) => block2.$key = b.key);
+      children.push(...blocks);
     }
-    if (!node) {
-      t = t || createElement("template");
-      t.innerHTML = html;
-      node = _child(t.content);
+  } else if (isFragment(block)) {
+    if (block.insert) {
+      children.push(block);
+    } else {
+      children.push(...getTransitionBlocks(block.nodes));
     }
-    const ret = node.cloneNode(true);
-    if (root) ret.$root = true;
-    return ret;
-  };
+  }
+  return children;
 }
-
-function createIf(condition, b1, b2, once) {
-  const _insertionParent = insertionParent;
-  const _insertionAnchor = insertionAnchor;
-  const _isLastInsertion = isLastInsertion;
-  if (!isHydrating) resetInsertionState();
-  let frag;
-  if (once) {
-    frag = condition() ? b1() : b2 ? b2() : [];
-  } else {
-    frag = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if") : new DynamicFragment();
-    renderEffect(() => frag.update(condition() ? b1 : b2));
+function isValidTransitionBlock(block) {
+  return !!(block instanceof Element || isFragment(block) && block.insert);
+}
+function getTransitionElement(c) {
+  return isFragment(c) ? c.nodes : c;
+}
+function recordPosition(c) {
+  newPositionMap.set(c, getTransitionElement(c).getBoundingClientRect());
+}
+function applyTranslation(c) {
+  if (baseApplyTranslation(
+    positionMap.get(c),
+    newPositionMap.get(c),
+    getTransitionElement(c)
+  )) {
+    return c;
   }
-  if (!isHydrating) {
-    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
-  } else {
-    if (_isLastInsertion) {
-      advanceHydrationNode(_insertionParent);
-    }
+}
+function getFirstConnectedChild(children) {
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const el = getTransitionElement(child);
+    if (el.isConnected) return el;
   }
-  return frag;
 }
-
-function createKeyedFragment(key, render) {
-  const _insertionParent = insertionParent;
-  const _insertionAnchor = insertionAnchor;
-  const _isLastInsertion = isLastInsertion;
-  if (!isHydrating) resetInsertionState();
-  const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("keyed") : new DynamicFragment();
-  renderEffect(() => {
-    frag.update(render, key());
-  });
-  if (!isHydrating) {
-    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
-  } else {
-    if (_isLastInsertion) {
-      advanceHydrationNode(_insertionParent);
-    }
+function triggerTransitionGroupUpdate(transition) {
+  const { instance } = transition;
+  if (!instance.isUpdating) {
+    instance.isUpdating = true;
+    if (instance.bu) invokeArrayFns(instance.bu);
+    queuePostFlushCb(() => {
+      instance.isUpdating = false;
+      if (instance.u) invokeArrayFns(instance.u);
+    });
   }
-  return frag;
 }
 
 class ForBlock extends VaporFragment {
@@ -3528,6 +4026,10 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
     const oldLength = oldBlocks.length;
     newBlocks = new Array(newLength);
     let isFallback = false;
+    const transitionHooks = frag.$transition;
+    if (transitionHooks && transitionHooks.group && isMounted) {
+      triggerTransitionGroupUpdate(transitionHooks);
+    }
     const prevSub = setActiveSub();
     if (!isMounted) {
       isMounted = true;
@@ -3743,6 +4245,7 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
     } else {
       oldBlocks = [];
     }
+    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
     setActiveSub(prevSub);
   };
   const needKey = renderItem.length > 1;
@@ -4061,6 +4564,45 @@ const getRefValue = (el) => {
   return el;
 };
 
+function useVaporCssVars(getter) {
+  const instance = currentInstance;
+  baseUseCssVars(
+    instance,
+    () => resolveParentNode(instance.block),
+    getter,
+    (vars) => setVars(instance, vars)
+  );
+}
+function resolveParentNode(block) {
+  if (block instanceof Node) {
+    return block.parentNode;
+  } else if (isArray(block)) {
+    return resolveParentNode(block[0]);
+  } else if (isVaporComponent(block)) {
+    return resolveParentNode(block.block);
+  } else {
+    return resolveParentNode(block.nodes);
+  }
+}
+function setVars(instance, vars) {
+  if (instance.ce) {
+    setVarsOnNode(instance.ce, vars);
+  } else {
+    setVarsOnBlock(instance.block, vars);
+  }
+}
+function setVarsOnBlock(block, vars) {
+  if (block instanceof Node) {
+    setVarsOnNode(block, vars);
+  } else if (isArray(block)) {
+    block.forEach((child) => setVarsOnBlock(child, vars));
+  } else if (isVaporComponent(block)) {
+    setVarsOnBlock(block.block, vars);
+  } else {
+    setVarsOnBlock(block.nodes, vars);
+  }
+}
+
 function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once) {
   const _insertionParent = insertionParent;
   const _insertionAnchor = insertionAnchor;
@@ -4118,7 +4660,7 @@ function applyVShow(target, source) {
 }
 function setDisplay(target, value) {
   if (isVaporComponent(target)) {
-    return setDisplay(target, value);
+    return setDisplay(target.block, value);
   }
   if (isArray(target)) {
     if (target.length === 0) return;
@@ -4246,153 +4788,4 @@ function withVaporDirectives(node, dirs) {
   }
 }
 
-const positionMap = /* @__PURE__ */ new WeakMap();
-const newPositionMap = /* @__PURE__ */ new WeakMap();
-const decorate = (t) => {
-  delete t.props.mode;
-  t.__vapor = true;
-  return t;
-};
-const VaporTransitionGroup = decorate({
-  name: "VaporTransitionGroup",
-  props: /* @__PURE__ */ extend({}, TransitionPropsValidators, {
-    tag: String,
-    moveClass: String
-  }),
-  setup(props, { slots }) {
-    const instance = currentInstance;
-    const state = useTransitionState();
-    const cssTransitionProps = resolveTransitionProps(props);
-    let prevChildren;
-    let children;
-    const slottedBlock = slots.default && slots.default();
-    onBeforeUpdate(() => {
-      prevChildren = [];
-      children = getTransitionBlocks(slottedBlock);
-      if (children) {
-        for (let i = 0; i < children.length; i++) {
-          const child = children[i];
-          if (isValidTransitionBlock(child)) {
-            prevChildren.push(child);
-            child.$transition.disabled = true;
-            positionMap.set(
-              child,
-              getTransitionElement(child).getBoundingClientRect()
-            );
-          }
-        }
-      }
-    });
-    onUpdated(() => {
-      if (!prevChildren.length) {
-        return;
-      }
-      const moveClass = props.moveClass || `${props.name || "v"}-move`;
-      const firstChild = getFirstConnectedChild(prevChildren);
-      if (!firstChild || !hasCSSTransform(
-        firstChild,
-        firstChild.parentNode,
-        moveClass
-      )) {
-        prevChildren = [];
-        return;
-      }
-      prevChildren.forEach(callPendingCbs);
-      prevChildren.forEach((child) => {
-        child.$transition.disabled = false;
-        recordPosition(child);
-      });
-      const movedChildren = prevChildren.filter(applyTranslation);
-      forceReflow();
-      movedChildren.forEach(
-        (c) => handleMovedChildren(
-          getTransitionElement(c),
-          moveClass
-        )
-      );
-      prevChildren = [];
-    });
-    setTransitionHooksOnFragment(slottedBlock, {
-      props: cssTransitionProps,
-      state,
-      instance
-    });
-    children = getTransitionBlocks(slottedBlock);
-    for (let i = 0; i < children.length; i++) {
-      const child = children[i];
-      if (isValidTransitionBlock(child)) {
-        if (child.$key != null) {
-          setTransitionHooks(
-            child,
-            resolveTransitionHooks(child, cssTransitionProps, state, instance)
-          );
-        } else if (!!(process.env.NODE_ENV !== "production") && child.$key == null) {
-          warn(`<transition-group> children must be keyed`);
-        }
-      }
-    }
-    const tag = props.tag;
-    if (tag) {
-      const container = createElement(tag);
-      insert(slottedBlock, container);
-      if (instance.hasFallthrough) {
-        container.$root = true;
-        renderEffect(() => applyFallthroughProps(container, instance.attrs));
-      }
-      return container;
-    } else {
-      const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("transition-group") : new DynamicFragment();
-      renderEffect(() => frag.update(() => slottedBlock));
-      return frag;
-    }
-  }
-});
-function getTransitionBlocks(block) {
-  let children = [];
-  if (block instanceof Node) {
-    children.push(block);
-  } else if (isVaporComponent(block)) {
-    children.push(...getTransitionBlocks(block.block));
-  } else if (isArray(block)) {
-    for (let i = 0; i < block.length; i++) {
-      const b = block[i];
-      const blocks = getTransitionBlocks(b);
-      if (isForBlock(b)) blocks.forEach((block2) => block2.$key = b.key);
-      children.push(...blocks);
-    }
-  } else if (isFragment(block)) {
-    if (block.insert) {
-      children.push(block);
-    } else {
-      children.push(...getTransitionBlocks(block.nodes));
-    }
-  }
-  return children;
-}
-function isValidTransitionBlock(block) {
-  return !!(block instanceof Element || isFragment(block) && block.insert);
-}
-function getTransitionElement(c) {
-  return isFragment(c) ? c.nodes : c;
-}
-function recordPosition(c) {
-  newPositionMap.set(c, getTransitionElement(c).getBoundingClientRect());
-}
-function applyTranslation(c) {
-  if (baseApplyTranslation(
-    positionMap.get(c),
-    newPositionMap.get(c),
-    getTransitionElement(c)
-  )) {
-    return c;
-  }
-}
-function getFirstConnectedChild(children) {
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i];
-    const el = getTransitionElement(child);
-    if (el.isConnected) return el;
-  }
-}
-
-export { VaporFragment, VaporKeepAliveImpl as VaporKeepAlive, VaporTeleportImpl as VaporTeleport, VaporTransition, VaporTransitionGroup, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createKeyedFragment, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, delegate, delegateEvents, getDefaultValue, getRestElement, insert, isFragment, isVaporComponent, next, nthChild, on, prepend, remove, renderEffect, setAttr, setBlockHtml, setBlockText, setClass, setDOMProp, setDynamicEvents, setDynamicProps, setElementText, setHtml, setInsertionState, setProp, setStyle, setText, setValue, template, txt, vaporInteropPlugin, withVaporCtx, withVaporDirectives };
+export { VaporFragment, VaporKeepAliveImpl as VaporKeepAlive, VaporTeleportImpl as VaporTeleport, VaporTransition, VaporTransitionGroup, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createInvoker, createKeyedFragment, createPlainElement, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, defineVaporCustomElement, defineVaporSSRCustomElement, delegate, delegateEvents, getDefaultValue, getRestElement, insert, isFragment, isVaporComponent, next, nthChild, on, prepend, remove, renderEffect, setAttr, setBlockHtml, setBlockText, setClass, setDOMProp, setDynamicEvents, setDynamicProps, setElementText, setHtml, setInsertionState, setProp, setStyle, setText, setValue, template, txt, useVaporCssVars, vaporInteropPlugin, withVaporCtx, withVaporDirectives };