@vue/compat 3.3.4 → 3.3.5

package/dist/vue.runtime.global.js

@@ -37,7 +37,7 @@ var Vue = (function () {
   const isSymbol = (val) => typeof val === "symbol";
   const isObject = (val) => val !== null && typeof val === "object";
   const isPromise = (val) => {
-    return isObject(val) && isFunction(val.then) && isFunction(val.catch);
+    return (isObject(val) || isFunction(val)) && isFunction(val.then) && isFunction(val.catch);
   };
   const objectToString = Object.prototype.toString;
   const toTypeString = (value) => objectToString.call(value);
@@ -68,12 +68,13 @@ var Vue = (function () {
   const hyphenate = cacheStringFunction(
     (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
   );
-  const capitalize = cacheStringFunction(
-    (str) => str.charAt(0).toUpperCase() + str.slice(1)
-  );
-  const toHandlerKey = cacheStringFunction(
-    (str) => str ? `on${capitalize(str)}` : ``
-  );
+  const capitalize = cacheStringFunction((str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  });
+  const toHandlerKey = cacheStringFunction((str) => {
+    const s = str ? `on${capitalize(str)}` : ``;
+    return s;
+  });
   const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
   const invokeArrayFns = (fns, arg) => {
     for (let i = 0; i < fns.length; i++) {
@@ -100,8 +101,8 @@ var Vue = (function () {
     return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {});
   };
 
-  const GLOBALS_WHITE_LISTED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console";
-  const isGloballyWhitelisted = /* @__PURE__ */ makeMap(GLOBALS_WHITE_LISTED);
+  const GLOBALS_ALLOWED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console";
+  const isGloballyAllowed = /* @__PURE__ */ makeMap(GLOBALS_ALLOWED);
 
   function normalizeStyle(value) {
     if (isArray(value)) {
@@ -116,9 +117,7 @@ var Vue = (function () {
         }
       }
       return res;
-    } else if (isString(value)) {
-      return value;
-    } else if (isObject(value)) {
+    } else if (isString(value) || isObject(value)) {
       return value;
     }
   }
@@ -465,7 +464,7 @@ var Vue = (function () {
     }
   }
   function effect(fn, options) {
-    if (fn.effect) {
+    if (fn.effect instanceof ReactiveEffect) {
       fn = fn.effect.fn;
     }
     const _effect = new ReactiveEffect(fn);
@@ -631,10 +630,6 @@ var Vue = (function () {
   const builtInSymbols = new Set(
     /* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol)
   );
-  const get$1 = /* @__PURE__ */ createGetter();
-  const shallowGet = /* @__PURE__ */ createGetter(false, true);
-  const readonlyGet = /* @__PURE__ */ createGetter(true);
-  const shallowReadonlyGet = /* @__PURE__ */ createGetter(true, true);
   const arrayInstrumentations = /* @__PURE__ */ createArrayInstrumentations();
   function createArrayInstrumentations() {
     const instrumentations = {};
@@ -667,8 +662,13 @@ var Vue = (function () {
     track(obj, "has", key);
     return obj.hasOwnProperty(key);
   }
-  function createGetter(isReadonly2 = false, shallow = false) {
-    return function get2(target, key, receiver) {
+  class BaseReactiveHandler {
+    constructor(_isReadonly = false, _shallow = false) {
+      this._isReadonly = _isReadonly;
+      this._shallow = _shallow;
+    }
+    get(target, key, receiver) {
+      const isReadonly2 = this._isReadonly, shallow = this._shallow;
       if (key === "__v_isReactive") {
         return !isReadonly2;
       } else if (key === "__v_isReadonly") {
@@ -704,17 +704,18 @@ var Vue = (function () {
         return isReadonly2 ? readonly(res) : reactive(res);
       }
       return res;
-    };
+    }
   }
-  const set$1 = /* @__PURE__ */ createSetter();
-  const shallowSet = /* @__PURE__ */ createSetter(true);
-  function createSetter(shallow = false) {
-    return function set2(target, key, value, receiver) {
+  class MutableReactiveHandler extends BaseReactiveHandler {
+    constructor(shallow = false) {
+      super(false, shallow);
+    }
+    set(target, key, value, receiver) {
       let oldValue = target[key];
       if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
         return false;
       }
-      if (!shallow) {
+      if (!this._shallow) {
         if (!isShallow(value) && !isReadonly(value)) {
           oldValue = toRaw(oldValue);
           value = toRaw(value);
@@ -734,37 +735,36 @@ var Vue = (function () {
         }
       }
       return result;
-    };
-  }
-  function deleteProperty(target, key) {
-    const hadKey = hasOwn(target, key);
-    const oldValue = target[key];
-    const result = Reflect.deleteProperty(target, key);
-    if (result && hadKey) {
-      trigger(target, "delete", key, void 0, oldValue);
     }
-    return result;
-  }
-  function has$1(target, key) {
-    const result = Reflect.has(target, key);
-    if (!isSymbol(key) || !builtInSymbols.has(key)) {
-      track(target, "has", key);
+    deleteProperty(target, key) {
+      const hadKey = hasOwn(target, key);
+      const oldValue = target[key];
+      const result = Reflect.deleteProperty(target, key);
+      if (result && hadKey) {
+        trigger(target, "delete", key, void 0, oldValue);
+      }
+      return result;
+    }
+    has(target, key) {
+      const result = Reflect.has(target, key);
+      if (!isSymbol(key) || !builtInSymbols.has(key)) {
+        track(target, "has", key);
+      }
+      return result;
+    }
+    ownKeys(target) {
+      track(
+        target,
+        "iterate",
+        isArray(target) ? "length" : ITERATE_KEY
+      );
+      return Reflect.ownKeys(target);
     }
-    return result;
-  }
-  function ownKeys(target) {
-    track(target, "iterate", isArray(target) ? "length" : ITERATE_KEY);
-    return Reflect.ownKeys(target);
   }
-  const mutableHandlers = {
-    get: get$1,
-    set: set$1,
-    deleteProperty,
-    has: has$1,
-    ownKeys
-  };
-  const readonlyHandlers = {
-    get: readonlyGet,
+  class ReadonlyReactiveHandler extends BaseReactiveHandler {
+    constructor(shallow = false) {
+      super(true, shallow);
+    }
     set(target, key) {
       {
         warn$1(
@@ -773,7 +773,7 @@ var Vue = (function () {
         );
       }
       return true;
-    },
+    }
     deleteProperty(target, key) {
       {
         warn$1(
@@ -783,22 +783,13 @@ var Vue = (function () {
       }
       return true;
     }
-  };
-  const shallowReactiveHandlers = /* @__PURE__ */ extend(
-    {},
-    mutableHandlers,
-    {
-      get: shallowGet,
-      set: shallowSet
-    }
-  );
-  const shallowReadonlyHandlers = /* @__PURE__ */ extend(
-    {},
-    readonlyHandlers,
-    {
-      get: shallowReadonlyGet
-    }
+  }
+  const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
+  const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
+  const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
+    true
   );
+  const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
 
   const toShallow = (value) => value;
   const getProto = (v) => Reflect.getPrototypeOf(v);
@@ -807,7 +798,7 @@ var Vue = (function () {
     const rawTarget = toRaw(target);
     const rawKey = toRaw(key);
     if (!isReadonly) {
-      if (key !== rawKey) {
+      if (hasChanged(key, rawKey)) {
         track(rawTarget, "get", key);
       }
       track(rawTarget, "get", rawKey);
@@ -827,7 +818,7 @@ var Vue = (function () {
     const rawTarget = toRaw(target);
     const rawKey = toRaw(key);
     if (!isReadonly) {
-      if (key !== rawKey) {
+      if (hasChanged(key, rawKey)) {
         track(rawTarget, "has", key);
       }
       track(rawTarget, "has", rawKey);
@@ -1357,11 +1348,7 @@ var Vue = (function () {
   }
   function propertyToRef(source, key, defaultValue) {
     const val = source[key];
-    return isRef(val) ? val : new ObjectRefImpl(
-      source,
-      key,
-      defaultValue
-    );
+    return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
   }
 
   class ComputedRefImpl {
@@ -3655,9 +3642,7 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
       }
       if (cb) {
         const newValue = effect.run();
-        if (deep || forceTrigger || (isMultiSource ? newValue.some(
-          (v, i) => hasChanged(v, oldValue[i])
-        ) : hasChanged(newValue, oldValue)) || isArray(newValue) && isCompatEnabled("WATCH_ARRAY", instance)) {
+        if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue)) || isArray(newValue) && isCompatEnabled("WATCH_ARRAY", instance)) {
           if (cleanup) {
             cleanup();
           }
@@ -3831,6 +3816,8 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
     }
   }
 
+  const leaveCbKey = Symbol("_leaveCb");
+  const enterCbKey$1 = Symbol("_enterCb");
   function useTransitionState() {
     const state = {
       isMounted: false,
@@ -3951,9 +3938,9 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
                 oldInnerChild
               );
               leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;
-              el._leaveCb = () => {
+              el[leaveCbKey] = () => {
                 earlyRemove();
-                el._leaveCb = void 0;
+                el[leaveCbKey] = void 0;
                 delete enterHooks.delayedLeave;
               };
               enterHooks.delayedLeave = delayedLeave;
@@ -4027,15 +4014,15 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
             return;
           }
         }
-        if (el._leaveCb) {
-          el._leaveCb(
+        if (el[leaveCbKey]) {
+          el[leaveCbKey](
             true
             /* cancelled */
           );
         }
         const leavingVNode = leavingVNodesCache[key];
-        if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el._leaveCb) {
-          leavingVNode.el._leaveCb();
+        if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el[leaveCbKey]) {
+          leavingVNode.el[leaveCbKey]();
         }
         callHook(hook, [el]);
       },
@@ -4053,7 +4040,7 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
           }
         }
         let called = false;
-        const done = el._enterCb = (cancelled) => {
+        const done = el[enterCbKey$1] = (cancelled) => {
           if (called)
             return;
           called = true;
@@ -4065,7 +4052,7 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
           if (hooks.delayedLeave) {
             hooks.delayedLeave();
           }
-          el._enterCb = void 0;
+          el[enterCbKey$1] = void 0;
         };
         if (hook) {
           callAsyncHook(hook, [el, done]);
@@ -4075,8 +4062,8 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
       },
       leave(el, remove) {
         const key2 = String(vnode.key);
-        if (el._enterCb) {
-          el._enterCb(
+        if (el[enterCbKey$1]) {
+          el[enterCbKey$1](
             true
             /* cancelled */
           );
@@ -4086,7 +4073,7 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
         }
         callHook(onBeforeLeave, [el]);
         let called = false;
-        const done = el._leaveCb = (cancelled) => {
+        const done = el[leaveCbKey] = (cancelled) => {
           if (called)
             return;
           called = true;
@@ -4096,7 +4083,7 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
           } else {
             callHook(onAfterLeave, [el]);
           }
-          el._leaveCb = void 0;
+          el[leaveCbKey] = void 0;
           if (leavingVNodesCache[key2] === vnode) {
             delete leavingVNodesCache[key2];
           }
@@ -4158,6 +4145,8 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
     return ret;
   }
 
+  /*! #__NO_SIDE_EFFECTS__ */
+  // @__NO_SIDE_EFFECTS__
   function defineComponent(options, extraOptions) {
     return isFunction(options) ? (
       // #8326: extend call and options.name access are considered side-effects
@@ -4167,6 +4156,8 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
   }
 
   const isAsyncWrapper = (i) => !!i.type.__asyncLoader;
+  /*! #__NO_SIDE_EFFECTS__ */
+  // @__NO_SIDE_EFFECTS__
   function defineAsyncComponent(source) {
     if (isFunction(source)) {
       source = { loader: source };
@@ -5179,6 +5170,7 @@ If this is a native custom element, make sure to exclude it from component resol
   function installCompatInstanceProperties(map) {
     const set = (target, key, val) => {
       target[key] = val;
+      return target[key];
     };
     const del = (target, key) => {
       delete target[key];
@@ -5456,7 +5448,7 @@ If this is a native custom element, make sure to exclude it from component resol
         return PublicInstanceProxyHandlers.get(target, key, target);
       },
       has(_, key) {
-        const has = key[0] !== "_" && !isGloballyWhitelisted(key);
+        const has = key[0] !== "_" && !isGloballyAllowed(key);
         if (!has && PublicInstanceProxyHandlers.has(_, key)) {
           warn(
             `Property ${JSON.stringify(
@@ -6193,7 +6185,7 @@ If this is a native custom element, make sure to exclude it from component resol
         return vm;
       }
     }
-    Vue.version = `2.6.14-compat:${"3.3.4"}`;
+    Vue.version = `2.6.14-compat:${"3.3.5"}`;
     Vue.config = singletonApp.config;
     Vue.use = (p, ...options) => {
       if (p && isFunction(p.install)) {
@@ -6601,7 +6593,7 @@ If this is a native custom element, make sure to exclude it from component resol
           },
           set() {
             warn(
-              `app.config.unwrapInjectedRef has been deprecated. 3.3 now alawys unwraps injected refs in Options API.`
+              `app.config.unwrapInjectedRef has been deprecated. 3.3 now always unwraps injected refs in Options API.`
             );
           }
         });
@@ -6688,10 +6680,7 @@ If this is a native custom element, make sure to exclude it from component resol
  If you want to mount another app on the same host container, you need to unmount the previous app by calling \`app.unmount()\` first.`
               );
             }
-            const vnode = createVNode(
-              rootComponent,
-              rootProps
-            );
+            const vnode = createVNode(rootComponent, rootProps);
             vnode.appContext = context;
             {
               context.reload = () => {
@@ -7514,8 +7503,10 @@ If you want to remount the same app, move your app creation logic into a factory
               hasMismatch = true;
               warn(
                 `Hydration text mismatch:
-- Client: ${JSON.stringify(node.data)}
-- Server: ${JSON.stringify(vnode.children)}`
+- Server rendered: ${JSON.stringify(
+                node.data
+              )}
+- Client rendered: ${JSON.stringify(vnode.children)}`
               );
               node.data = vnode.children;
             }
@@ -7718,8 +7709,8 @@ If you want to remount the same app, move your app creation logic into a factory
             hasMismatch = true;
             warn(
               `Hydration text content mismatch in <${vnode.type}>:
-- Client: ${el.textContent}
-- Server: ${vnode.children}`
+- Server rendered: ${el.textContent}
+- Client rendered: ${vnode.children}`
             );
             el.textContent = vnode.children;
           }
@@ -9501,6 +9492,10 @@ If you want to remount the same app, move your app creation logic into a factory
               internals,
               1
             );
+          } else {
+            if (n2.props && n1.props && n2.props.to !== n1.props.to) {
+              n2.props.to = n1.props.to;
+            }
           }
         } else {
           if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {
@@ -10354,9 +10349,12 @@ Component that was made reactive: `,
     if (!skipOptions) {
       setCurrentInstance(instance);
       pauseTracking();
-      applyOptions(instance);
-      resetTracking();
-      unsetCurrentInstance();
+      try {
+        applyOptions(instance);
+      } finally {
+        resetTracking();
+        unsetCurrentInstance();
+      }
     }
     if (!Component.render && instance.render === NOOP && !isSSR) {
       if (!compile && Component.template) {
@@ -10716,7 +10714,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.3.4";
+  const version = "3.3.5";
   const ssrUtils = null;
   const resolveFilter = resolveFilter$1 ;
   const _compatUtils = {
@@ -10795,922 +10793,977 @@ Component that was made reactive: `,
     }
   };
 
-  function patchClass(el, value, isSVG) {
-    const transitionClasses = el._vtc;
-    if (transitionClasses) {
-      value = (value ? [value, ...transitionClasses] : [...transitionClasses]).join(" ");
-    }
-    if (value == null) {
-      el.removeAttribute("class");
-    } else if (isSVG) {
-      el.setAttribute("class", value);
-    } else {
-      el.className = value;
-    }
+  const TRANSITION = "transition";
+  const ANIMATION = "animation";
+  const vtcKey = Symbol("_vtc");
+  const Transition = (props, { slots }) => h(BaseTransition, resolveTransitionProps(props), slots);
+  Transition.displayName = "Transition";
+  {
+    Transition.__isBuiltIn = true;
   }
-
-  function patchStyle(el, prev, next) {
-    const style = el.style;
-    const isCssString = isString(next);
-    if (next && !isCssString) {
-      if (prev && !isString(prev)) {
-        for (const key in prev) {
-          if (next[key] == null) {
-            setStyle(style, key, "");
-          }
-        }
-      }
-      for (const key in next) {
-        setStyle(style, key, next[key]);
-      }
-    } else {
-      const currentDisplay = style.display;
-      if (isCssString) {
-        if (prev !== next) {
-          style.cssText = next;
-        }
-      } else if (prev) {
-        el.removeAttribute("style");
-      }
-      if ("_vod" in el) {
-        style.display = currentDisplay;
-      }
+  const DOMTransitionPropsValidators = {
+    name: String,
+    type: String,
+    css: {
+      type: Boolean,
+      default: true
+    },
+    duration: [String, Number, Object],
+    enterFromClass: String,
+    enterActiveClass: String,
+    enterToClass: String,
+    appearFromClass: String,
+    appearActiveClass: String,
+    appearToClass: String,
+    leaveFromClass: String,
+    leaveActiveClass: String,
+    leaveToClass: String
+  };
+  const TransitionPropsValidators = Transition.props = /* @__PURE__ */ extend(
+    {},
+    BaseTransitionPropsValidators,
+    DOMTransitionPropsValidators
+  );
+  const callHook = (hook, args = []) => {
+    if (isArray(hook)) {
+      hook.forEach((h2) => h2(...args));
+    } else if (hook) {
+      hook(...args);
     }
-  }
-  const semicolonRE = /[^\\];\s*$/;
-  const importantRE = /\s*!important$/;
-  function setStyle(style, name, val) {
-    if (isArray(val)) {
-      val.forEach((v) => setStyle(style, name, v));
-    } else {
-      if (val == null)
-        val = "";
-      {
-        if (semicolonRE.test(val)) {
-          warn(
-            `Unexpected semicolon at the end of '${name}' style value: '${val}'`
-          );
-        }
-      }
-      if (name.startsWith("--")) {
-        style.setProperty(name, val);
-      } else {
-        const prefixed = autoPrefix(style, name);
-        if (importantRE.test(val)) {
-          style.setProperty(
-            hyphenate(prefixed),
-            val.replace(importantRE, ""),
-            "important"
-          );
-        } else {
-          style[prefixed] = val;
-        }
+  };
+  const hasExplicitCallback = (hook) => {
+    return hook ? isArray(hook) ? hook.some((h2) => h2.length > 1) : hook.length > 1 : false;
+  };
+  function resolveTransitionProps(rawProps) {
+    const baseProps = {};
+    for (const key in rawProps) {
+      if (!(key in DOMTransitionPropsValidators)) {
+        baseProps[key] = rawProps[key];
       }
     }
-  }
-  const prefixes = ["Webkit", "Moz", "ms"];
-  const prefixCache = {};
-  function autoPrefix(style, rawName) {
-    const cached = prefixCache[rawName];
-    if (cached) {
-      return cached;
-    }
-    let name = camelize(rawName);
-    if (name !== "filter" && name in style) {
-      return prefixCache[rawName] = name;
-    }
-    name = capitalize(name);
-    for (let i = 0; i < prefixes.length; i++) {
-      const prefixed = prefixes[i] + name;
-      if (prefixed in style) {
-        return prefixCache[rawName] = prefixed;
-      }
+    if (rawProps.css === false) {
+      return baseProps;
     }
-    return rawName;
-  }
-
-  const xlinkNS = "http://www.w3.org/1999/xlink";
-  function patchAttr(el, key, value, isSVG, instance) {
-    if (isSVG && key.startsWith("xlink:")) {
-      if (value == null) {
-        el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
-      } else {
-        el.setAttributeNS(xlinkNS, key, value);
-      }
-    } else {
-      if (compatCoerceAttr(el, key, value, instance)) {
-        return;
+    const {
+      name = "v",
+      type,
+      duration,
+      enterFromClass = `${name}-enter-from`,
+      enterActiveClass = `${name}-enter-active`,
+      enterToClass = `${name}-enter-to`,
+      appearFromClass = enterFromClass,
+      appearActiveClass = enterActiveClass,
+      appearToClass = enterToClass,
+      leaveFromClass = `${name}-leave-from`,
+      leaveActiveClass = `${name}-leave-active`,
+      leaveToClass = `${name}-leave-to`
+    } = rawProps;
+    const legacyClassEnabled = compatUtils.isCompatEnabled("TRANSITION_CLASSES", null);
+    let legacyEnterFromClass;
+    let legacyAppearFromClass;
+    let legacyLeaveFromClass;
+    if (legacyClassEnabled) {
+      const toLegacyClass = (cls) => cls.replace(/-from$/, "");
+      if (!rawProps.enterFromClass) {
+        legacyEnterFromClass = toLegacyClass(enterFromClass);
       }
-      const isBoolean = isSpecialBooleanAttr(key);
-      if (value == null || isBoolean && !includeBooleanAttr(value)) {
-        el.removeAttribute(key);
-      } else {
-        el.setAttribute(key, isBoolean ? "" : value);
+      if (!rawProps.appearFromClass) {
+        legacyAppearFromClass = toLegacyClass(appearFromClass);
       }
-    }
-  }
-  const isEnumeratedAttr = /* @__PURE__ */ makeMap("contenteditable,draggable,spellcheck") ;
-  function compatCoerceAttr(el, key, value, instance = null) {
-    if (isEnumeratedAttr(key)) {
-      const v2CoercedValue = value === null ? "false" : typeof value !== "boolean" && value !== void 0 ? "true" : null;
-      if (v2CoercedValue && compatUtils.softAssertCompatEnabled(
-        "ATTR_ENUMERATED_COERCION",
-        instance,
-        key,
-        value,
-        v2CoercedValue
-      )) {
-        el.setAttribute(key, v2CoercedValue);
-        return true;
+      if (!rawProps.leaveFromClass) {
+        legacyLeaveFromClass = toLegacyClass(leaveFromClass);
       }
-    } else if (value === false && !isSpecialBooleanAttr(key) && compatUtils.softAssertCompatEnabled(
-      "ATTR_FALSE_VALUE",
-      instance,
-      key
-    )) {
-      el.removeAttribute(key);
-      return true;
     }
-    return false;
-  }
-
-  function patchDOMProp(el, key, value, prevChildren, parentComponent, parentSuspense, unmountChildren) {
-    if (key === "innerHTML" || key === "textContent") {
-      if (prevChildren) {
-        unmountChildren(prevChildren, parentComponent, parentSuspense);
-      }
-      el[key] = value == null ? "" : value;
-      return;
-    }
-    const tag = el.tagName;
-    if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
-    !tag.includes("-")) {
-      el._value = value;
-      const oldValue = tag === "OPTION" ? el.getAttribute("value") : el.value;
-      const newValue = value == null ? "" : value;
-      if (oldValue !== newValue) {
-        el.value = newValue;
-      }
-      if (value == null) {
-        el.removeAttribute(key);
-      }
-      return;
-    }
-    let needRemove = false;
-    if (value === "" || value == null) {
-      const type = typeof el[key];
-      if (type === "boolean") {
-        value = includeBooleanAttr(value);
-      } else if (value == null && type === "string") {
-        value = "";
-        needRemove = true;
-      } else if (type === "number") {
-        value = 0;
-        needRemove = true;
-      }
-    } else {
-      if (value === false && compatUtils.isCompatEnabled(
-        "ATTR_FALSE_VALUE",
-        parentComponent
-      )) {
-        const type = typeof el[key];
-        if (type === "string" || type === "number") {
-          compatUtils.warnDeprecation(
-            "ATTR_FALSE_VALUE",
-            parentComponent,
-            key
-          );
-          value = type === "number" ? 0 : "";
-          needRemove = true;
+    const durations = normalizeDuration(duration);
+    const enterDuration = durations && durations[0];
+    const leaveDuration = durations && durations[1];
+    const {
+      onBeforeEnter,
+      onEnter,
+      onEnterCancelled,
+      onLeave,
+      onLeaveCancelled,
+      onBeforeAppear = onBeforeEnter,
+      onAppear = onEnter,
+      onAppearCancelled = onEnterCancelled
+    } = baseProps;
+    const finishEnter = (el, isAppear, done) => {
+      removeTransitionClass(el, isAppear ? appearToClass : enterToClass);
+      removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
+      done && done();
+    };
+    const finishLeave = (el, done) => {
+      el._isLeaving = false;
+      removeTransitionClass(el, leaveFromClass);
+      removeTransitionClass(el, leaveToClass);
+      removeTransitionClass(el, leaveActiveClass);
+      done && done();
+    };
+    const makeEnterHook = (isAppear) => {
+      return (el, done) => {
+        const hook = isAppear ? onAppear : onEnter;
+        const resolve = () => finishEnter(el, isAppear, done);
+        callHook(hook, [el, resolve]);
+        nextFrame(() => {
+          removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);
+          if (legacyClassEnabled) {
+            const legacyClass = isAppear ? legacyAppearFromClass : legacyEnterFromClass;
+            if (legacyClass) {
+              removeTransitionClass(el, legacyClass);
+            }
+          }
+          addTransitionClass(el, isAppear ? appearToClass : enterToClass);
+          if (!hasExplicitCallback(hook)) {
+            whenTransitionEnds(el, type, enterDuration, resolve);
+          }
+        });
+      };
+    };
+    return extend(baseProps, {
+      onBeforeEnter(el) {
+        callHook(onBeforeEnter, [el]);
+        addTransitionClass(el, enterFromClass);
+        if (legacyClassEnabled && legacyEnterFromClass) {
+          addTransitionClass(el, legacyEnterFromClass);
         }
+        addTransitionClass(el, enterActiveClass);
+      },
+      onBeforeAppear(el) {
+        callHook(onBeforeAppear, [el]);
+        addTransitionClass(el, appearFromClass);
+        if (legacyClassEnabled && legacyAppearFromClass) {
+          addTransitionClass(el, legacyAppearFromClass);
+        }
+        addTransitionClass(el, appearActiveClass);
+      },
+      onEnter: makeEnterHook(false),
+      onAppear: makeEnterHook(true),
+      onLeave(el, done) {
+        el._isLeaving = true;
+        const resolve = () => finishLeave(el, done);
+        addTransitionClass(el, leaveFromClass);
+        if (legacyClassEnabled && legacyLeaveFromClass) {
+          addTransitionClass(el, legacyLeaveFromClass);
+        }
+        forceReflow();
+        addTransitionClass(el, leaveActiveClass);
+        nextFrame(() => {
+          if (!el._isLeaving) {
+            return;
+          }
+          removeTransitionClass(el, leaveFromClass);
+          if (legacyClassEnabled && legacyLeaveFromClass) {
+            removeTransitionClass(el, legacyLeaveFromClass);
+          }
+          addTransitionClass(el, leaveToClass);
+          if (!hasExplicitCallback(onLeave)) {
+            whenTransitionEnds(el, type, leaveDuration, resolve);
+          }
+        });
+        callHook(onLeave, [el, resolve]);
+      },
+      onEnterCancelled(el) {
+        finishEnter(el, false);
+        callHook(onEnterCancelled, [el]);
+      },
+      onAppearCancelled(el) {
+        finishEnter(el, true);
+        callHook(onAppearCancelled, [el]);
+      },
+      onLeaveCancelled(el) {
+        finishLeave(el);
+        callHook(onLeaveCancelled, [el]);
       }
+    });
+  }
+  function normalizeDuration(duration) {
+    if (duration == null) {
+      return null;
+    } else if (isObject(duration)) {
+      return [NumberOf(duration.enter), NumberOf(duration.leave)];
+    } else {
+      const n = NumberOf(duration);
+      return [n, n];
     }
-    try {
-      el[key] = value;
-    } catch (e) {
-      if (!needRemove) {
-        warn(
-          `Failed setting prop "${key}" on <${tag.toLowerCase()}>: value ${value} is invalid.`,
-          e
-        );
-      }
-    }
-    needRemove && el.removeAttribute(key);
   }
-
-  function addEventListener(el, event, handler, options) {
-    el.addEventListener(event, handler, options);
+  function NumberOf(val) {
+    const res = toNumber(val);
+    {
+      assertNumber(res, "<transition> explicit duration");
+    }
+    return res;
   }
-  function removeEventListener(el, event, handler, options) {
-    el.removeEventListener(event, handler, options);
+  function addTransitionClass(el, cls) {
+    cls.split(/\s+/).forEach((c) => c && el.classList.add(c));
+    (el[vtcKey] || (el[vtcKey] = /* @__PURE__ */ new Set())).add(cls);
   }
-  function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
-    const invokers = el._vei || (el._vei = {});
-    const existingInvoker = invokers[rawName];
-    if (nextValue && existingInvoker) {
-      existingInvoker.value = nextValue;
-    } else {
-      const [name, options] = parseName(rawName);
-      if (nextValue) {
-        const invoker = invokers[rawName] = createInvoker(nextValue, instance);
-        addEventListener(el, name, invoker, options);
-      } else if (existingInvoker) {
-        removeEventListener(el, name, existingInvoker, options);
-        invokers[rawName] = void 0;
+  function removeTransitionClass(el, cls) {
+    cls.split(/\s+/).forEach((c) => c && el.classList.remove(c));
+    const _vtc = el[vtcKey];
+    if (_vtc) {
+      _vtc.delete(cls);
+      if (!_vtc.size) {
+        el[vtcKey] = void 0;
       }
     }
   }
-  const optionsModifierRE = /(?:Once|Passive|Capture)$/;
-  function parseName(name) {
-    let options;
-    if (optionsModifierRE.test(name)) {
-      options = {};
-      let m;
-      while (m = name.match(optionsModifierRE)) {
-        name = name.slice(0, name.length - m[0].length);
-        options[m[0].toLowerCase()] = true;
+  function nextFrame(cb) {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(cb);
+    });
+  }
+  let endId = 0;
+  function whenTransitionEnds(el, expectedType, explicitTimeout, resolve) {
+    const id = el._endId = ++endId;
+    const resolveIfNotStale = () => {
+      if (id === el._endId) {
+        resolve();
       }
+    };
+    if (explicitTimeout) {
+      return setTimeout(resolveIfNotStale, explicitTimeout);
     }
-    const event = name[2] === ":" ? name.slice(3) : hyphenate(name.slice(2));
-    return [event, options];
-  }
-  let cachedNow = 0;
-  const p = /* @__PURE__ */ Promise.resolve();
-  const getNow = () => cachedNow || (p.then(() => cachedNow = 0), cachedNow = Date.now());
-  function createInvoker(initialValue, instance) {
-    const invoker = (e) => {
-      if (!e._vts) {
-        e._vts = Date.now();
-      } else if (e._vts <= invoker.attached) {
-        return;
+    const { type, timeout, propCount } = getTransitionInfo(el, expectedType);
+    if (!type) {
+      return resolve();
+    }
+    const endEvent = type + "end";
+    let ended = 0;
+    const end = () => {
+      el.removeEventListener(endEvent, onEnd);
+      resolveIfNotStale();
+    };
+    const onEnd = (e) => {
+      if (e.target === el && ++ended >= propCount) {
+        end();
       }
-      callWithAsyncErrorHandling(
-        patchStopImmediatePropagation(e, invoker.value),
-        instance,
-        5,
-        [e]
-      );
     };
-    invoker.value = initialValue;
-    invoker.attached = getNow();
-    return invoker;
+    setTimeout(() => {
+      if (ended < propCount) {
+        end();
+      }
+    }, timeout + 1);
+    el.addEventListener(endEvent, onEnd);
   }
-  function patchStopImmediatePropagation(e, value) {
-    if (isArray(value)) {
-      const originalStop = e.stopImmediatePropagation;
-      e.stopImmediatePropagation = () => {
-        originalStop.call(e);
-        e._stopped = true;
-      };
-      return value.map((fn) => (e2) => !e2._stopped && fn && fn(e2));
+  function getTransitionInfo(el, expectedType) {
+    const styles = window.getComputedStyle(el);
+    const getStyleProperties = (key) => (styles[key] || "").split(", ");
+    const transitionDelays = getStyleProperties(`${TRANSITION}Delay`);
+    const transitionDurations = getStyleProperties(`${TRANSITION}Duration`);
+    const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
+    const animationDelays = getStyleProperties(`${ANIMATION}Delay`);
+    const animationDurations = getStyleProperties(`${ANIMATION}Duration`);
+    const animationTimeout = getTimeout(animationDelays, animationDurations);
+    let type = null;
+    let timeout = 0;
+    let propCount = 0;
+    if (expectedType === TRANSITION) {
+      if (transitionTimeout > 0) {
+        type = TRANSITION;
+        timeout = transitionTimeout;
+        propCount = transitionDurations.length;
+      }
+    } else if (expectedType === ANIMATION) {
+      if (animationTimeout > 0) {
+        type = ANIMATION;
+        timeout = animationTimeout;
+        propCount = animationDurations.length;
+      }
     } else {
-      return value;
+      timeout = Math.max(transitionTimeout, animationTimeout);
+      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(
+      getStyleProperties(`${TRANSITION}Property`).toString()
+    );
+    return {
+      type,
+      timeout,
+      propCount,
+      hasTransform
+    };
+  }
+  function getTimeout(delays, durations) {
+    while (delays.length < durations.length) {
+      delays = delays.concat(delays);
+    }
+    return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));
+  }
+  function toMs(s) {
+    if (s === "auto")
+      return 0;
+    return Number(s.slice(0, -1).replace(",", ".")) * 1e3;
+  }
+  function forceReflow() {
+    return document.body.offsetHeight;
   }
 
-  const nativeOnRE = /^on[a-z]/;
-  const patchProp = (el, key, prevValue, nextValue, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
-    if (key === "class") {
-      patchClass(el, nextValue, isSVG);
-    } else if (key === "style") {
-      patchStyle(el, prevValue, nextValue);
-    } else if (isOn(key)) {
-      if (!isModelListener(key)) {
-        patchEvent(el, key, prevValue, nextValue, parentComponent);
-      }
-    } else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, nextValue, isSVG)) {
-      patchDOMProp(
-        el,
-        key,
-        nextValue,
-        prevChildren,
-        parentComponent,
-        parentSuspense,
-        unmountChildren
-      );
+  function patchClass(el, value, isSVG) {
+    const transitionClasses = el[vtcKey];
+    if (transitionClasses) {
+      value = (value ? [value, ...transitionClasses] : [...transitionClasses]).join(" ");
+    }
+    if (value == null) {
+      el.removeAttribute("class");
+    } else if (isSVG) {
+      el.setAttribute("class", value);
     } else {
-      if (key === "true-value") {
-        el._trueValue = nextValue;
-      } else if (key === "false-value") {
-        el._falseValue = nextValue;
-      }
-      patchAttr(el, key, nextValue, isSVG, parentComponent);
+      el.className = value;
     }
-  };
-  function shouldSetAsProp(el, key, value, isSVG) {
-    if (isSVG) {
-      if (key === "innerHTML" || key === "textContent") {
-        return true;
+  }
+
+  const vShowOldKey = Symbol("_vod");
+  const vShow = {
+    beforeMount(el, { value }, { transition }) {
+      el[vShowOldKey] = el.style.display === "none" ? "" : el.style.display;
+      if (transition && value) {
+        transition.beforeEnter(el);
+      } else {
+        setDisplay(el, value);
       }
-      if (key in el && nativeOnRE.test(key) && isFunction(value)) {
-        return true;
+    },
+    mounted(el, { value }, { transition }) {
+      if (transition && value) {
+        transition.enter(el);
       }
-      return false;
-    }
-    if (key === "spellcheck" || key === "draggable" || key === "translate") {
-      return false;
-    }
-    if (key === "form") {
-      return false;
-    }
-    if (key === "list" && el.tagName === "INPUT") {
-      return false;
-    }
-    if (key === "type" && el.tagName === "TEXTAREA") {
-      return false;
-    }
-    if (nativeOnRE.test(key) && isString(value)) {
-      return false;
+    },
+    updated(el, { value, oldValue }, { transition }) {
+      if (!value === !oldValue)
+        return;
+      if (transition) {
+        if (value) {
+          transition.beforeEnter(el);
+          setDisplay(el, true);
+          transition.enter(el);
+        } else {
+          transition.leave(el, () => {
+            setDisplay(el, false);
+          });
+        }
+      } else {
+        setDisplay(el, value);
+      }
+    },
+    beforeUnmount(el, { value }) {
+      setDisplay(el, value);
     }
-    return key in el;
+  };
+  function setDisplay(el, value) {
+    el.style.display = value ? el[vShowOldKey] : "none";
   }
 
-  function defineCustomElement(options, hydrate2) {
-    const Comp = defineComponent(options);
-    class VueCustomElement extends VueElement {
-      constructor(initialProps) {
-        super(Comp, initialProps, hydrate2);
+  function patchStyle(el, prev, next) {
+    const style = el.style;
+    const isCssString = isString(next);
+    if (next && !isCssString) {
+      if (prev && !isString(prev)) {
+        for (const key in prev) {
+          if (next[key] == null) {
+            setStyle(style, key, "");
+          }
+        }
       }
-    }
-    VueCustomElement.def = Comp;
-    return VueCustomElement;
+      for (const key in next) {
+        setStyle(style, key, next[key]);
+      }
+    } else {
+      const currentDisplay = style.display;
+      if (isCssString) {
+        if (prev !== next) {
+          style.cssText = next;
+        }
+      } else if (prev) {
+        el.removeAttribute("style");
+      }
+      if (vShowOldKey in el) {
+        style.display = currentDisplay;
+      }
+    }
   }
-  const defineSSRCustomElement = (options) => {
-    return defineCustomElement(options, hydrate);
-  };
-  const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
-  };
-  class VueElement extends BaseClass {
-    constructor(_def, _props = {}, hydrate2) {
-      super();
-      this._def = _def;
-      this._props = _props;
-      /**
-       * @internal
-       */
-      this._instance = null;
-      this._connected = false;
-      this._resolved = false;
-      this._numberProps = null;
-      if (this.shadowRoot && hydrate2) {
-        hydrate2(this._createVNode(), this.shadowRoot);
-      } else {
-        if (this.shadowRoot) {
+  const semicolonRE = /[^\\];\s*$/;
+  const importantRE = /\s*!important$/;
+  function setStyle(style, name, val) {
+    if (isArray(val)) {
+      val.forEach((v) => setStyle(style, name, v));
+    } else {
+      if (val == null)
+        val = "";
+      {
+        if (semicolonRE.test(val)) {
           warn(
-            `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
+            `Unexpected semicolon at the end of '${name}' style value: '${val}'`
           );
         }
-        this.attachShadow({ mode: "open" });
-        if (!this._def.__asyncLoader) {
-          this._resolveProps(this._def);
-        }
       }
-    }
-    connectedCallback() {
-      this._connected = true;
-      if (!this._instance) {
-        if (this._resolved) {
-          this._update();
+      if (name.startsWith("--")) {
+        style.setProperty(name, val);
+      } else {
+        const prefixed = autoPrefix(style, name);
+        if (importantRE.test(val)) {
+          style.setProperty(
+            hyphenate(prefixed),
+            val.replace(importantRE, ""),
+            "important"
+          );
         } else {
-          this._resolveDef();
+          style[prefixed] = val;
         }
       }
     }
-    disconnectedCallback() {
-      this._connected = false;
-      nextTick(() => {
-        if (!this._connected) {
-          render(null, this.shadowRoot);
-          this._instance = null;
-        }
-      });
+  }
+  const prefixes = ["Webkit", "Moz", "ms"];
+  const prefixCache = {};
+  function autoPrefix(style, rawName) {
+    const cached = prefixCache[rawName];
+    if (cached) {
+      return cached;
     }
-    /**
-     * resolve inner component definition (handle possible async component)
-     */
-    _resolveDef() {
-      this._resolved = true;
-      for (let i = 0; i < this.attributes.length; i++) {
-        this._setAttr(this.attributes[i].name);
+    let name = camelize(rawName);
+    if (name !== "filter" && name in style) {
+      return prefixCache[rawName] = name;
+    }
+    name = capitalize(name);
+    for (let i = 0; i < prefixes.length; i++) {
+      const prefixed = prefixes[i] + name;
+      if (prefixed in style) {
+        return prefixCache[rawName] = prefixed;
       }
-      new MutationObserver((mutations) => {
-        for (const m of mutations) {
-          this._setAttr(m.attributeName);
-        }
-      }).observe(this, { attributes: true });
-      const resolve = (def, isAsync = false) => {
-        const { props, styles } = def;
-        let numberProps;
-        if (props && !isArray(props)) {
-          for (const key in props) {
-            const opt = props[key];
-            if (opt === Number || opt && opt.type === Number) {
-              if (key in this._props) {
-                this._props[key] = toNumber(this._props[key]);
-              }
-              (numberProps || (numberProps = /* @__PURE__ */ Object.create(null)))[camelize(key)] = true;
-            }
-          }
-        }
-        this._numberProps = numberProps;
-        if (isAsync) {
-          this._resolveProps(def);
-        }
-        this._applyStyles(styles);
-        this._update();
-      };
-      const asyncDef = this._def.__asyncLoader;
-      if (asyncDef) {
-        asyncDef().then((def) => resolve(def, true));
+    }
+    return rawName;
+  }
+
+  const xlinkNS = "http://www.w3.org/1999/xlink";
+  function patchAttr(el, key, value, isSVG, instance) {
+    if (isSVG && key.startsWith("xlink:")) {
+      if (value == null) {
+        el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
       } else {
-        resolve(this._def);
+        el.setAttributeNS(xlinkNS, key, value);
       }
-    }
-    _resolveProps(def) {
-      const { props } = def;
-      const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
-      for (const key of Object.keys(this)) {
-        if (key[0] !== "_" && declaredPropKeys.includes(key)) {
-          this._setProp(key, this[key], true, false);
-        }
+    } else {
+      if (compatCoerceAttr(el, key, value, instance)) {
+        return;
       }
-      for (const key of declaredPropKeys.map(camelize)) {
-        Object.defineProperty(this, key, {
-          get() {
-            return this._getProp(key);
-          },
-          set(val) {
-            this._setProp(key, val);
-          }
-        });
+      const isBoolean = isSpecialBooleanAttr(key);
+      if (value == null || isBoolean && !includeBooleanAttr(value)) {
+        el.removeAttribute(key);
+      } else {
+        el.setAttribute(key, isBoolean ? "" : value);
       }
     }
-    _setAttr(key) {
-      let value = this.getAttribute(key);
-      const camelKey = camelize(key);
-      if (this._numberProps && this._numberProps[camelKey]) {
-        value = toNumber(value);
+  }
+  const isEnumeratedAttr = /* @__PURE__ */ makeMap("contenteditable,draggable,spellcheck") ;
+  function compatCoerceAttr(el, key, value, instance = null) {
+    if (isEnumeratedAttr(key)) {
+      const v2CoercedValue = value === null ? "false" : typeof value !== "boolean" && value !== void 0 ? "true" : null;
+      if (v2CoercedValue && compatUtils.softAssertCompatEnabled(
+        "ATTR_ENUMERATED_COERCION",
+        instance,
+        key,
+        value,
+        v2CoercedValue
+      )) {
+        el.setAttribute(key, v2CoercedValue);
+        return true;
       }
-      this._setProp(camelKey, value, false);
-    }
-    /**
-     * @internal
-     */
-    _getProp(key) {
-      return this._props[key];
+    } else if (value === false && !isSpecialBooleanAttr(key) && compatUtils.softAssertCompatEnabled(
+      "ATTR_FALSE_VALUE",
+      instance,
+      key
+    )) {
+      el.removeAttribute(key);
+      return true;
     }
-    /**
-     * @internal
-     */
-    _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
-      if (val !== this._props[key]) {
-        this._props[key] = val;
-        if (shouldUpdate && this._instance) {
-          this._update();
-        }
-        if (shouldReflect) {
-          if (val === true) {
-            this.setAttribute(hyphenate(key), "");
-          } else if (typeof val === "string" || typeof val === "number") {
-            this.setAttribute(hyphenate(key), val + "");
-          } else if (!val) {
-            this.removeAttribute(hyphenate(key));
-          }
-        }
+    return false;
+  }
+
+  function patchDOMProp(el, key, value, prevChildren, parentComponent, parentSuspense, unmountChildren) {
+    if (key === "innerHTML" || key === "textContent") {
+      if (prevChildren) {
+        unmountChildren(prevChildren, parentComponent, parentSuspense);
       }
+      el[key] = value == null ? "" : value;
+      return;
     }
-    _update() {
-      render(this._createVNode(), this.shadowRoot);
-    }
-    _createVNode() {
-      const vnode = createVNode(this._def, extend({}, this._props));
-      if (!this._instance) {
-        vnode.ce = (instance) => {
-          this._instance = instance;
-          instance.isCE = true;
-          {
-            instance.ceReload = (newStyles) => {
-              if (this._styles) {
-                this._styles.forEach((s) => this.shadowRoot.removeChild(s));
-                this._styles.length = 0;
-              }
-              this._applyStyles(newStyles);
-              this._instance = null;
-              this._update();
-            };
-          }
-          const dispatch = (event, args) => {
-            this.dispatchEvent(
-              new CustomEvent(event, {
-                detail: args
-              })
-            );
-          };
-          instance.emit = (event, ...args) => {
-            dispatch(event, args);
-            if (hyphenate(event) !== event) {
-              dispatch(hyphenate(event), args);
-            }
-          };
-          let parent = this;
-          while (parent = parent && (parent.parentNode || parent.host)) {
-            if (parent instanceof VueElement) {
-              instance.parent = parent._instance;
-              instance.provides = parent._instance.provides;
-              break;
-            }
-          }
-        };
+    const tag = el.tagName;
+    if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
+    !tag.includes("-")) {
+      el._value = value;
+      const oldValue = tag === "OPTION" ? el.getAttribute("value") : el.value;
+      const newValue = value == null ? "" : value;
+      if (oldValue !== newValue) {
+        el.value = newValue;
       }
-      return vnode;
+      if (value == null) {
+        el.removeAttribute(key);
+      }
+      return;
     }
-    _applyStyles(styles) {
-      if (styles) {
-        styles.forEach((css) => {
-          const s = document.createElement("style");
-          s.textContent = css;
-          this.shadowRoot.appendChild(s);
-          {
-            (this._styles || (this._styles = [])).push(s);
-          }
-        });
+    let needRemove = false;
+    if (value === "" || value == null) {
+      const type = typeof el[key];
+      if (type === "boolean") {
+        value = includeBooleanAttr(value);
+      } else if (value == null && type === "string") {
+        value = "";
+        needRemove = true;
+      } else if (type === "number") {
+        value = 0;
+        needRemove = true;
+      }
+    } else {
+      if (value === false && compatUtils.isCompatEnabled(
+        "ATTR_FALSE_VALUE",
+        parentComponent
+      )) {
+        const type = typeof el[key];
+        if (type === "string" || type === "number") {
+          compatUtils.warnDeprecation(
+            "ATTR_FALSE_VALUE",
+            parentComponent,
+            key
+          );
+          value = type === "number" ? 0 : "";
+          needRemove = true;
+        }
       }
     }
-  }
-
-  function useCssModule(name = "$style") {
-    {
-      {
-        warn(`useCssModule() is not supported in the global build.`);
+    try {
+      el[key] = value;
+    } catch (e) {
+      if (!needRemove) {
+        warn(
+          `Failed setting prop "${key}" on <${tag.toLowerCase()}>: value ${value} is invalid.`,
+          e
+        );
       }
-      return EMPTY_OBJ;
     }
+    needRemove && el.removeAttribute(key);
   }
 
-  function useCssVars(getter) {
-    const instance = getCurrentInstance();
-    if (!instance) {
-      warn(`useCssVars is called without current active component instance.`);
-      return;
-    }
-    const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
-      Array.from(
-        document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
-      ).forEach((node) => setVarsOnNode(node, vars));
-    };
-    const setVars = () => {
-      const vars = getter(instance.proxy);
-      setVarsOnVNode(instance.subTree, vars);
-      updateTeleports(vars);
-    };
-    watchPostEffect(setVars);
-    onMounted(() => {
-      const ob = new MutationObserver(setVars);
-      ob.observe(instance.subTree.el.parentNode, { childList: true });
-      onUnmounted(() => ob.disconnect());
-    });
+  function addEventListener(el, event, handler, options) {
+    el.addEventListener(event, handler, options);
   }
-  function setVarsOnVNode(vnode, vars) {
-    if (vnode.shapeFlag & 128) {
-      const suspense = vnode.suspense;
-      vnode = suspense.activeBranch;
-      if (suspense.pendingBranch && !suspense.isHydrating) {
-        suspense.effects.push(() => {
-          setVarsOnVNode(suspense.activeBranch, vars);
-        });
+  function removeEventListener(el, event, handler, options) {
+    el.removeEventListener(event, handler, options);
+  }
+  const veiKey = Symbol("_vei");
+  function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
+    const invokers = el[veiKey] || (el[veiKey] = {});
+    const existingInvoker = invokers[rawName];
+    if (nextValue && existingInvoker) {
+      existingInvoker.value = nextValue;
+    } else {
+      const [name, options] = parseName(rawName);
+      if (nextValue) {
+        const invoker = invokers[rawName] = createInvoker(nextValue, instance);
+        addEventListener(el, name, invoker, options);
+      } else if (existingInvoker) {
+        removeEventListener(el, name, existingInvoker, options);
+        invokers[rawName] = void 0;
       }
     }
-    while (vnode.component) {
-      vnode = vnode.component.subTree;
-    }
-    if (vnode.shapeFlag & 1 && vnode.el) {
-      setVarsOnNode(vnode.el, vars);
-    } else if (vnode.type === Fragment) {
-      vnode.children.forEach((c) => setVarsOnVNode(c, vars));
-    } else if (vnode.type === Static) {
-      let { el, anchor } = vnode;
-      while (el) {
-        setVarsOnNode(el, vars);
-        if (el === anchor)
-          break;
-        el = el.nextSibling;
+  }
+  const optionsModifierRE = /(?:Once|Passive|Capture)$/;
+  function parseName(name) {
+    let options;
+    if (optionsModifierRE.test(name)) {
+      options = {};
+      let m;
+      while (m = name.match(optionsModifierRE)) {
+        name = name.slice(0, name.length - m[0].length);
+        options[m[0].toLowerCase()] = true;
       }
     }
+    const event = name[2] === ":" ? name.slice(3) : hyphenate(name.slice(2));
+    return [event, options];
   }
-  function setVarsOnNode(el, vars) {
-    if (el.nodeType === 1) {
-      const style = el.style;
-      for (const key in vars) {
-        style.setProperty(`--${key}`, vars[key]);
+  let cachedNow = 0;
+  const p = /* @__PURE__ */ Promise.resolve();
+  const getNow = () => cachedNow || (p.then(() => cachedNow = 0), cachedNow = Date.now());
+  function createInvoker(initialValue, instance) {
+    const invoker = (e) => {
+      if (!e._vts) {
+        e._vts = Date.now();
+      } else if (e._vts <= invoker.attached) {
+        return;
       }
+      callWithAsyncErrorHandling(
+        patchStopImmediatePropagation(e, invoker.value),
+        instance,
+        5,
+        [e]
+      );
+    };
+    invoker.value = initialValue;
+    invoker.attached = getNow();
+    return invoker;
+  }
+  function patchStopImmediatePropagation(e, value) {
+    if (isArray(value)) {
+      const originalStop = e.stopImmediatePropagation;
+      e.stopImmediatePropagation = () => {
+        originalStop.call(e);
+        e._stopped = true;
+      };
+      return value.map((fn) => (e2) => !e2._stopped && fn && fn(e2));
+    } else {
+      return value;
     }
   }
 
-  const TRANSITION = "transition";
-  const ANIMATION = "animation";
-  const Transition = (props, { slots }) => h(BaseTransition, resolveTransitionProps(props), slots);
-  Transition.displayName = "Transition";
-  {
-    Transition.__isBuiltIn = true;
-  }
-  const DOMTransitionPropsValidators = {
-    name: String,
-    type: String,
-    css: {
-      type: Boolean,
-      default: true
-    },
-    duration: [String, Number, Object],
-    enterFromClass: String,
-    enterActiveClass: String,
-    enterToClass: String,
-    appearFromClass: String,
-    appearActiveClass: String,
-    appearToClass: String,
-    leaveFromClass: String,
-    leaveActiveClass: String,
-    leaveToClass: String
+  const nativeOnRE = /^on[a-z]/;
+  const patchProp = (el, key, prevValue, nextValue, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
+    if (key === "class") {
+      patchClass(el, nextValue, isSVG);
+    } else if (key === "style") {
+      patchStyle(el, prevValue, nextValue);
+    } else if (isOn(key)) {
+      if (!isModelListener(key)) {
+        patchEvent(el, key, prevValue, nextValue, parentComponent);
+      }
+    } else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, nextValue, isSVG)) {
+      patchDOMProp(
+        el,
+        key,
+        nextValue,
+        prevChildren,
+        parentComponent,
+        parentSuspense,
+        unmountChildren
+      );
+    } else {
+      if (key === "true-value") {
+        el._trueValue = nextValue;
+      } else if (key === "false-value") {
+        el._falseValue = nextValue;
+      }
+      patchAttr(el, key, nextValue, isSVG, parentComponent);
+    }
   };
-  const TransitionPropsValidators = Transition.props = /* @__PURE__ */ extend(
-    {},
-    BaseTransitionPropsValidators,
-    DOMTransitionPropsValidators
-  );
-  const callHook = (hook, args = []) => {
-    if (isArray(hook)) {
-      hook.forEach((h2) => h2(...args));
-    } else if (hook) {
-      hook(...args);
+  function shouldSetAsProp(el, key, value, isSVG) {
+    if (isSVG) {
+      if (key === "innerHTML" || key === "textContent") {
+        return true;
+      }
+      if (key in el && nativeOnRE.test(key) && isFunction(value)) {
+        return true;
+      }
+      return false;
+    }
+    if (key === "spellcheck" || key === "draggable" || key === "translate") {
+      return false;
+    }
+    if (key === "form") {
+      return false;
+    }
+    if (key === "list" && el.tagName === "INPUT") {
+      return false;
+    }
+    if (key === "type" && el.tagName === "TEXTAREA") {
+      return false;
+    }
+    if (nativeOnRE.test(key) && isString(value)) {
+      return false;
+    }
+    return key in el;
+  }
+
+  /*! #__NO_SIDE_EFFECTS__ */
+  // @__NO_SIDE_EFFECTS__
+  function defineCustomElement(options, hydrate2) {
+    const Comp = defineComponent(options);
+    class VueCustomElement extends VueElement {
+      constructor(initialProps) {
+        super(Comp, initialProps, hydrate2);
+      }
     }
+    VueCustomElement.def = Comp;
+    return VueCustomElement;
+  }
+  /*! #__NO_SIDE_EFFECTS__ */
+  const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options) => {
+    return /* @__PURE__ */ defineCustomElement(options, hydrate);
   };
-  const hasExplicitCallback = (hook) => {
-    return hook ? isArray(hook) ? hook.some((h2) => h2.length > 1) : hook.length > 1 : false;
+  const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
   };
-  function resolveTransitionProps(rawProps) {
-    const baseProps = {};
-    for (const key in rawProps) {
-      if (!(key in DOMTransitionPropsValidators)) {
-        baseProps[key] = rawProps[key];
+  class VueElement extends BaseClass {
+    constructor(_def, _props = {}, hydrate2) {
+      super();
+      this._def = _def;
+      this._props = _props;
+      /**
+       * @internal
+       */
+      this._instance = null;
+      this._connected = false;
+      this._resolved = false;
+      this._numberProps = null;
+      this._ob = null;
+      if (this.shadowRoot && hydrate2) {
+        hydrate2(this._createVNode(), this.shadowRoot);
+      } else {
+        if (this.shadowRoot) {
+          warn(
+            `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
+          );
+        }
+        this.attachShadow({ mode: "open" });
+        if (!this._def.__asyncLoader) {
+          this._resolveProps(this._def);
+        }
       }
     }
-    if (rawProps.css === false) {
-      return baseProps;
-    }
-    const {
-      name = "v",
-      type,
-      duration,
-      enterFromClass = `${name}-enter-from`,
-      enterActiveClass = `${name}-enter-active`,
-      enterToClass = `${name}-enter-to`,
-      appearFromClass = enterFromClass,
-      appearActiveClass = enterActiveClass,
-      appearToClass = enterToClass,
-      leaveFromClass = `${name}-leave-from`,
-      leaveActiveClass = `${name}-leave-active`,
-      leaveToClass = `${name}-leave-to`
-    } = rawProps;
-    const legacyClassEnabled = compatUtils.isCompatEnabled("TRANSITION_CLASSES", null);
-    let legacyEnterFromClass;
-    let legacyAppearFromClass;
-    let legacyLeaveFromClass;
-    if (legacyClassEnabled) {
-      const toLegacyClass = (cls) => cls.replace(/-from$/, "");
-      if (!rawProps.enterFromClass) {
-        legacyEnterFromClass = toLegacyClass(enterFromClass);
-      }
-      if (!rawProps.appearFromClass) {
-        legacyAppearFromClass = toLegacyClass(appearFromClass);
+    connectedCallback() {
+      this._connected = true;
+      if (!this._instance) {
+        if (this._resolved) {
+          this._update();
+        } else {
+          this._resolveDef();
+        }
       }
-      if (!rawProps.leaveFromClass) {
-        legacyLeaveFromClass = toLegacyClass(leaveFromClass);
+    }
+    disconnectedCallback() {
+      this._connected = false;
+      if (this._ob) {
+        this._ob.disconnect();
+        this._ob = null;
       }
+      nextTick(() => {
+        if (!this._connected) {
+          render(null, this.shadowRoot);
+          this._instance = null;
+        }
+      });
     }
-    const durations = normalizeDuration(duration);
-    const enterDuration = durations && durations[0];
-    const leaveDuration = durations && durations[1];
-    const {
-      onBeforeEnter,
-      onEnter,
-      onEnterCancelled,
-      onLeave,
-      onLeaveCancelled,
-      onBeforeAppear = onBeforeEnter,
-      onAppear = onEnter,
-      onAppearCancelled = onEnterCancelled
-    } = baseProps;
-    const finishEnter = (el, isAppear, done) => {
-      removeTransitionClass(el, isAppear ? appearToClass : enterToClass);
-      removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
-      done && done();
-    };
-    const finishLeave = (el, done) => {
-      el._isLeaving = false;
-      removeTransitionClass(el, leaveFromClass);
-      removeTransitionClass(el, leaveToClass);
-      removeTransitionClass(el, leaveActiveClass);
-      done && done();
-    };
-    const makeEnterHook = (isAppear) => {
-      return (el, done) => {
-        const hook = isAppear ? onAppear : onEnter;
-        const resolve = () => finishEnter(el, isAppear, done);
-        callHook(hook, [el, resolve]);
-        nextFrame(() => {
-          removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);
-          if (legacyClassEnabled) {
-            const legacyClass = isAppear ? legacyAppearFromClass : legacyEnterFromClass;
-            if (legacyClass) {
-              removeTransitionClass(el, legacyClass);
+    /**
+     * resolve inner component definition (handle possible async component)
+     */
+    _resolveDef() {
+      this._resolved = true;
+      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.observe(this, { attributes: true });
+      const resolve = (def, isAsync = false) => {
+        const { props, styles } = def;
+        let numberProps;
+        if (props && !isArray(props)) {
+          for (const key in props) {
+            const opt = props[key];
+            if (opt === Number || opt && opt.type === Number) {
+              if (key in this._props) {
+                this._props[key] = toNumber(this._props[key]);
+              }
+              (numberProps || (numberProps = /* @__PURE__ */ Object.create(null)))[camelize(key)] = true;
             }
           }
-          addTransitionClass(el, isAppear ? appearToClass : enterToClass);
-          if (!hasExplicitCallback(hook)) {
-            whenTransitionEnds(el, type, enterDuration, resolve);
-          }
-        });
+        }
+        this._numberProps = numberProps;
+        if (isAsync) {
+          this._resolveProps(def);
+        }
+        this._applyStyles(styles);
+        this._update();
       };
-    };
-    return extend(baseProps, {
-      onBeforeEnter(el) {
-        callHook(onBeforeEnter, [el]);
-        addTransitionClass(el, enterFromClass);
-        if (legacyClassEnabled && legacyEnterFromClass) {
-          addTransitionClass(el, legacyEnterFromClass);
+      const asyncDef = this._def.__asyncLoader;
+      if (asyncDef) {
+        asyncDef().then((def) => resolve(def, true));
+      } else {
+        resolve(this._def);
+      }
+    }
+    _resolveProps(def) {
+      const { props } = def;
+      const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
+      for (const key of Object.keys(this)) {
+        if (key[0] !== "_" && declaredPropKeys.includes(key)) {
+          this._setProp(key, this[key], true, false);
         }
-        addTransitionClass(el, enterActiveClass);
-      },
-      onBeforeAppear(el) {
-        callHook(onBeforeAppear, [el]);
-        addTransitionClass(el, appearFromClass);
-        if (legacyClassEnabled && legacyAppearFromClass) {
-          addTransitionClass(el, legacyAppearFromClass);
+      }
+      for (const key of declaredPropKeys.map(camelize)) {
+        Object.defineProperty(this, key, {
+          get() {
+            return this._getProp(key);
+          },
+          set(val) {
+            this._setProp(key, val);
+          }
+        });
+      }
+    }
+    _setAttr(key) {
+      let value = this.getAttribute(key);
+      const camelKey = camelize(key);
+      if (this._numberProps && this._numberProps[camelKey]) {
+        value = toNumber(value);
+      }
+      this._setProp(camelKey, value, false);
+    }
+    /**
+     * @internal
+     */
+    _getProp(key) {
+      return this._props[key];
+    }
+    /**
+     * @internal
+     */
+    _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
+      if (val !== this._props[key]) {
+        this._props[key] = val;
+        if (shouldUpdate && this._instance) {
+          this._update();
         }
-        addTransitionClass(el, appearActiveClass);
-      },
-      onEnter: makeEnterHook(false),
-      onAppear: makeEnterHook(true),
-      onLeave(el, done) {
-        el._isLeaving = true;
-        const resolve = () => finishLeave(el, done);
-        addTransitionClass(el, leaveFromClass);
-        if (legacyClassEnabled && legacyLeaveFromClass) {
-          addTransitionClass(el, legacyLeaveFromClass);
+        if (shouldReflect) {
+          if (val === true) {
+            this.setAttribute(hyphenate(key), "");
+          } else if (typeof val === "string" || typeof val === "number") {
+            this.setAttribute(hyphenate(key), val + "");
+          } else if (!val) {
+            this.removeAttribute(hyphenate(key));
+          }
         }
-        forceReflow();
-        addTransitionClass(el, leaveActiveClass);
-        nextFrame(() => {
-          if (!el._isLeaving) {
-            return;
+      }
+    }
+    _update() {
+      render(this._createVNode(), this.shadowRoot);
+    }
+    _createVNode() {
+      const vnode = createVNode(this._def, extend({}, this._props));
+      if (!this._instance) {
+        vnode.ce = (instance) => {
+          this._instance = instance;
+          instance.isCE = true;
+          {
+            instance.ceReload = (newStyles) => {
+              if (this._styles) {
+                this._styles.forEach((s) => this.shadowRoot.removeChild(s));
+                this._styles.length = 0;
+              }
+              this._applyStyles(newStyles);
+              this._instance = null;
+              this._update();
+            };
           }
-          removeTransitionClass(el, leaveFromClass);
-          if (legacyClassEnabled && legacyLeaveFromClass) {
-            removeTransitionClass(el, legacyLeaveFromClass);
+          const dispatch = (event, args) => {
+            this.dispatchEvent(
+              new CustomEvent(event, {
+                detail: args
+              })
+            );
+          };
+          instance.emit = (event, ...args) => {
+            dispatch(event, args);
+            if (hyphenate(event) !== event) {
+              dispatch(hyphenate(event), args);
+            }
+          };
+          let parent = this;
+          while (parent = parent && (parent.parentNode || parent.host)) {
+            if (parent instanceof VueElement) {
+              instance.parent = parent._instance;
+              instance.provides = parent._instance.provides;
+              break;
+            }
           }
-          addTransitionClass(el, leaveToClass);
-          if (!hasExplicitCallback(onLeave)) {
-            whenTransitionEnds(el, type, leaveDuration, resolve);
+        };
+      }
+      return vnode;
+    }
+    _applyStyles(styles) {
+      if (styles) {
+        styles.forEach((css) => {
+          const s = document.createElement("style");
+          s.textContent = css;
+          this.shadowRoot.appendChild(s);
+          {
+            (this._styles || (this._styles = [])).push(s);
           }
         });
-        callHook(onLeave, [el, resolve]);
-      },
-      onEnterCancelled(el) {
-        finishEnter(el, false);
-        callHook(onEnterCancelled, [el]);
-      },
-      onAppearCancelled(el) {
-        finishEnter(el, true);
-        callHook(onAppearCancelled, [el]);
-      },
-      onLeaveCancelled(el) {
-        finishLeave(el);
-        callHook(onLeaveCancelled, [el]);
       }
-    });
-  }
-  function normalizeDuration(duration) {
-    if (duration == null) {
-      return null;
-    } else if (isObject(duration)) {
-      return [NumberOf(duration.enter), NumberOf(duration.leave)];
-    } else {
-      const n = NumberOf(duration);
-      return [n, n];
     }
   }
-  function NumberOf(val) {
-    const res = toNumber(val);
+
+  function useCssModule(name = "$style") {
     {
-      assertNumber(res, "<transition> explicit duration");
-    }
-    return res;
-  }
-  function addTransitionClass(el, cls) {
-    cls.split(/\s+/).forEach((c) => c && el.classList.add(c));
-    (el._vtc || (el._vtc = /* @__PURE__ */ new Set())).add(cls);
-  }
-  function removeTransitionClass(el, cls) {
-    cls.split(/\s+/).forEach((c) => c && el.classList.remove(c));
-    const { _vtc } = el;
-    if (_vtc) {
-      _vtc.delete(cls);
-      if (!_vtc.size) {
-        el._vtc = void 0;
+      {
+        warn(`useCssModule() is not supported in the global build.`);
       }
+      return EMPTY_OBJ;
     }
   }
-  function nextFrame(cb) {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(cb);
-    });
-  }
-  let endId = 0;
-  function whenTransitionEnds(el, expectedType, explicitTimeout, resolve) {
-    const id = el._endId = ++endId;
-    const resolveIfNotStale = () => {
-      if (id === el._endId) {
-        resolve();
-      }
-    };
-    if (explicitTimeout) {
-      return setTimeout(resolveIfNotStale, explicitTimeout);
-    }
-    const { type, timeout, propCount } = getTransitionInfo(el, expectedType);
-    if (!type) {
-      return resolve();
+
+  function useCssVars(getter) {
+    const instance = getCurrentInstance();
+    if (!instance) {
+      warn(`useCssVars is called without current active component instance.`);
+      return;
     }
-    const endEvent = type + "end";
-    let ended = 0;
-    const end = () => {
-      el.removeEventListener(endEvent, onEnd);
-      resolveIfNotStale();
+    const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
+      Array.from(
+        document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
+      ).forEach((node) => setVarsOnNode(node, vars));
     };
-    const onEnd = (e) => {
-      if (e.target === el && ++ended >= propCount) {
-        end();
-      }
+    const setVars = () => {
+      const vars = getter(instance.proxy);
+      setVarsOnVNode(instance.subTree, vars);
+      updateTeleports(vars);
     };
-    setTimeout(() => {
-      if (ended < propCount) {
-        end();
-      }
-    }, timeout + 1);
-    el.addEventListener(endEvent, onEnd);
+    watchPostEffect(setVars);
+    onMounted(() => {
+      const ob = new MutationObserver(setVars);
+      ob.observe(instance.subTree.el.parentNode, { childList: true });
+      onUnmounted(() => ob.disconnect());
+    });
   }
-  function getTransitionInfo(el, expectedType) {
-    const styles = window.getComputedStyle(el);
-    const getStyleProperties = (key) => (styles[key] || "").split(", ");
-    const transitionDelays = getStyleProperties(`${TRANSITION}Delay`);
-    const transitionDurations = getStyleProperties(`${TRANSITION}Duration`);
-    const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
-    const animationDelays = getStyleProperties(`${ANIMATION}Delay`);
-    const animationDurations = getStyleProperties(`${ANIMATION}Duration`);
-    const animationTimeout = getTimeout(animationDelays, animationDurations);
-    let type = null;
-    let timeout = 0;
-    let propCount = 0;
-    if (expectedType === TRANSITION) {
-      if (transitionTimeout > 0) {
-        type = TRANSITION;
-        timeout = transitionTimeout;
-        propCount = transitionDurations.length;
+  function setVarsOnVNode(vnode, vars) {
+    if (vnode.shapeFlag & 128) {
+      const suspense = vnode.suspense;
+      vnode = suspense.activeBranch;
+      if (suspense.pendingBranch && !suspense.isHydrating) {
+        suspense.effects.push(() => {
+          setVarsOnVNode(suspense.activeBranch, vars);
+        });
       }
-    } else if (expectedType === ANIMATION) {
-      if (animationTimeout > 0) {
-        type = ANIMATION;
-        timeout = animationTimeout;
-        propCount = animationDurations.length;
+    }
+    while (vnode.component) {
+      vnode = vnode.component.subTree;
+    }
+    if (vnode.shapeFlag & 1 && vnode.el) {
+      setVarsOnNode(vnode.el, vars);
+    } else if (vnode.type === Fragment) {
+      vnode.children.forEach((c) => setVarsOnVNode(c, vars));
+    } else if (vnode.type === Static) {
+      let { el, anchor } = vnode;
+      while (el) {
+        setVarsOnNode(el, vars);
+        if (el === anchor)
+          break;
+        el = el.nextSibling;
       }
-    } else {
-      timeout = Math.max(transitionTimeout, animationTimeout);
-      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(
-      getStyleProperties(`${TRANSITION}Property`).toString()
-    );
-    return {
-      type,
-      timeout,
-      propCount,
-      hasTransform
-    };
   }
-  function getTimeout(delays, durations) {
-    while (delays.length < durations.length) {
-      delays = delays.concat(delays);
+  function setVarsOnNode(el, vars) {
+    if (el.nodeType === 1) {
+      const style = el.style;
+      for (const key in vars) {
+        style.setProperty(`--${key}`, vars[key]);
+      }
     }
-    return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));
-  }
-  function toMs(s) {
-    return Number(s.slice(0, -1).replace(",", ".")) * 1e3;
-  }
-  function forceReflow() {
-    return document.body.offsetHeight;
   }
 
   const positionMap = /* @__PURE__ */ new WeakMap();
   const newPositionMap = /* @__PURE__ */ new WeakMap();
+  const moveCbKey = Symbol("_moveCb");
+  const enterCbKey = Symbol("_enterCb");
   const TransitionGroupImpl = {
     name: "TransitionGroup",
     props: /* @__PURE__ */ extend({}, TransitionPropsValidators, {
@@ -11743,13 +11796,13 @@ Component that was made reactive: `,
           const style = el.style;
           addTransitionClass(el, moveClass);
           style.transform = style.webkitTransform = style.transitionDuration = "";
-          const cb = el._moveCb = (e) => {
+          const cb = el[moveCbKey] = (e) => {
             if (e && e.target !== el) {
               return;
             }
             if (!e || /transform$/.test(e.propertyName)) {
               el.removeEventListener("transitionend", cb);
-              el._moveCb = null;
+              el[moveCbKey] = null;
               removeTransitionClass(el, moveClass);
             }
           };
@@ -11801,11 +11854,11 @@ Component that was made reactive: `,
   const TransitionGroup = TransitionGroupImpl;
   function callPendingCbs(c) {
     const el = c.el;
-    if (el._moveCb) {
-      el._moveCb();
+    if (el[moveCbKey]) {
+      el[moveCbKey]();
     }
-    if (el._enterCb) {
-      el._enterCb();
+    if (el[enterCbKey]) {
+      el[enterCbKey]();
     }
   }
   function recordPosition(c) {
@@ -11825,8 +11878,9 @@ Component that was made reactive: `,
   }
   function hasCSSTransform(el, root, moveClass) {
     const clone = el.cloneNode();
-    if (el._vtc) {
-      el._vtc.forEach((cls) => {
+    const _vtc = el[vtcKey];
+    if (_vtc) {
+      _vtc.forEach((cls) => {
         cls.split(/\s+/).forEach((c) => c && clone.classList.remove(c));
       });
     }
@@ -11853,9 +11907,10 @@ Component that was made reactive: `,
       target.dispatchEvent(new Event("input"));
     }
   }
+  const assignKey = Symbol("_assign");
   const vModelText = {
     created(el, { modifiers: { lazy, trim, number } }, vnode) {
-      el._assign = getModelAssigner(vnode);
+      el[assignKey] = getModelAssigner(vnode);
       const castToNumber = number || vnode.props && vnode.props.type === "number";
       addEventListener(el, lazy ? "change" : "input", (e) => {
         if (e.target.composing)
@@ -11867,7 +11922,7 @@ Component that was made reactive: `,
         if (castToNumber) {
           domValue = looseToNumber(domValue);
         }
-        el._assign(domValue);
+        el[assignKey](domValue);
       });
       if (trim) {
         addEventListener(el, "change", () => {
@@ -11885,7 +11940,7 @@ Component that was made reactive: `,
       el.value = value == null ? "" : value;
     },
     beforeUpdate(el, { value, modifiers: { lazy, trim, number } }, vnode) {
-      el._assign = getModelAssigner(vnode);
+      el[assignKey] = getModelAssigner(vnode);
       if (el.composing)
         return;
       if (document.activeElement === el && el.type !== "range") {
@@ -11909,12 +11964,12 @@ Component that was made reactive: `,
     // #4096 array checkboxes need to be deep traversed
     deep: true,
     created(el, _, vnode) {
-      el._assign = getModelAssigner(vnode);
+      el[assignKey] = getModelAssigner(vnode);
       addEventListener(el, "change", () => {
         const modelValue = el._modelValue;
         const elementValue = getValue(el);
         const checked = el.checked;
-        const assign = el._assign;
+        const assign = el[assignKey];
         if (isArray(modelValue)) {
           const index = looseIndexOf(modelValue, elementValue);
           const found = index !== -1;
@@ -11941,7 +11996,7 @@ Component that was made reactive: `,
     // set initial checked on mount to wait for true-value/false-value
     mounted: setChecked,
     beforeUpdate(el, binding, vnode) {
-      el._assign = getModelAssigner(vnode);
+      el[assignKey] = getModelAssigner(vnode);
       setChecked(el, binding, vnode);
     }
   };
@@ -11958,13 +12013,13 @@ Component that was made reactive: `,
   const vModelRadio = {
     created(el, { value }, vnode) {
       el.checked = looseEqual(value, vnode.props.value);
-      el._assign = getModelAssigner(vnode);
+      el[assignKey] = getModelAssigner(vnode);
       addEventListener(el, "change", () => {
-        el._assign(getValue(el));
+        el[assignKey](getValue(el));
       });
     },
     beforeUpdate(el, { value, oldValue }, vnode) {
-      el._assign = getModelAssigner(vnode);
+      el[assignKey] = getModelAssigner(vnode);
       if (value !== oldValue) {
         el.checked = looseEqual(value, vnode.props.value);
       }
@@ -11979,11 +12034,11 @@ Component that was made reactive: `,
         const selectedVal = Array.prototype.filter.call(el.options, (o) => o.selected).map(
           (o) => number ? looseToNumber(getValue(o)) : getValue(o)
         );
-        el._assign(
+        el[assignKey](
           el.multiple ? isSetModel ? new Set(selectedVal) : selectedVal : selectedVal[0]
         );
       });
-      el._assign = getModelAssigner(vnode);
+      el[assignKey] = getModelAssigner(vnode);
     },
     // set value in mounted & updated because <select> relies on its children
     // <option>s.
@@ -11991,7 +12046,7 @@ Component that was made reactive: `,
       setSelected(el, value);
     },
     beforeUpdate(el, _binding, vnode) {
-      el._assign = getModelAssigner(vnode);
+      el[assignKey] = getModelAssigner(vnode);
     },
     updated(el, { value }) {
       setSelected(el, value);
@@ -12154,45 +12209,6 @@ Component that was made reactive: `,
     };
   };
 
-  const vShow = {
-    beforeMount(el, { value }, { transition }) {
-      el._vod = el.style.display === "none" ? "" : el.style.display;
-      if (transition && value) {
-        transition.beforeEnter(el);
-      } else {
-        setDisplay(el, value);
-      }
-    },
-    mounted(el, { value }, { transition }) {
-      if (transition && value) {
-        transition.enter(el);
-      }
-    },
-    updated(el, { value, oldValue }, { transition }) {
-      if (!value === !oldValue)
-        return;
-      if (transition) {
-        if (value) {
-          transition.beforeEnter(el);
-          setDisplay(el, true);
-          transition.enter(el);
-        } else {
-          transition.leave(el, () => {
-            setDisplay(el, false);
-          });
-        }
-      } else {
-        setDisplay(el, value);
-      }
-    },
-    beforeUnmount(el, { value }) {
-      setDisplay(el, value);
-    }
-  };
-  function setDisplay(el, value) {
-    el.style.display = value ? el._vod : "none";
-  }
-
   const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);
   let renderer;
   let enabledHydration = false;