naive-ui 2.30.3 → 2.30.4

package/dist/index.js

@@ -835,6 +835,19 @@
       return !(slot && ensureValidVNode(slot()));
     }
 
+    function mergeEventHandlers(handlers) {
+      const filteredHandlers = handlers.filter(handler => handler !== void 0);
+      if (filteredHandlers.length === 0) return void 0;
+      if (filteredHandlers.length === 1) return filteredHandlers[0];
+      return e => {
+        handlers.forEach(handler => {
+          if (handler) {
+            handler(e);
+          }
+        });
+      };
+    }
+
     const pureNumberRegex = /^(\d|\.)+$/;
     const numberRegex = /(\d|\.)+/;
     function formatLength(length) {
@@ -1706,6 +1719,107 @@
 
     const isBrowser$2 = typeof document !== "undefined" && typeof window !== "undefined";
 
+    const eventSet = /* @__PURE__ */new WeakSet();
+    function markEventEffectPerformed(event) {
+      eventSet.add(event);
+    }
+    function eventEffectNotPerformed(event) {
+      return !eventSet.has(event);
+    }
+
+    function useInjectionInstanceCollection(injectionName, collectionKey, registerKeyRef) {
+      const injection = vue.inject(injectionName, null);
+      if (injection === null) return;
+      const vm = vue.getCurrentInstance()?.proxy;
+      vue.watch(registerKeyRef, registerInstance);
+      registerInstance(registerKeyRef.value);
+      vue.onBeforeUnmount(() => {
+        registerInstance(void 0, registerKeyRef.value);
+      });
+
+      function registerInstance(key, oldKey) {
+        const collection = injection[collectionKey];
+        if (oldKey !== void 0) removeInstance(collection, oldKey);
+        if (key !== void 0) addInstance(collection, key);
+      }
+
+      function removeInstance(collection, key) {
+        if (!collection[key]) collection[key] = [];
+        collection[key].splice(collection[key].findIndex(instance => instance === vm), 1);
+      }
+
+      function addInstance(collection, key) {
+        if (!collection[key]) collection[key] = [];
+
+        if (!~collection[key].findIndex(instance => instance === vm)) {
+          collection[key].push(vm);
+        }
+      }
+    }
+    function useInjectionCollection(injectionName, collectionKey, valueRef) {
+      const injection = vue.inject(injectionName, null);
+      if (injection === null) return;
+
+      if (!(collectionKey in injection)) {
+        injection[collectionKey] = [];
+      }
+
+      injection[collectionKey].push(valueRef.value);
+      vue.watch(valueRef, (value, prevValue) => {
+        const collectionArray = injection[collectionKey];
+        const index = collectionArray.findIndex(collectionValue => collectionValue === prevValue);
+        if (~index) collectionArray.splice(index, 1);
+        collectionArray.push(value);
+      });
+      vue.onBeforeUnmount(() => {
+        const collectionArray = injection[collectionKey];
+        const index = collectionArray.findIndex(collectionValue => collectionValue === valueRef.value);
+        if (~index) collectionArray.splice(index, 1);
+      });
+    }
+    function useInjectionElementCollection(injectionName, collectionKey, getElement) {
+      const injection = vue.inject(injectionName, null);
+      if (injection === null) return;
+
+      if (!(collectionKey in injection)) {
+        injection[collectionKey] = [];
+      }
+
+      vue.onMounted(() => {
+        const el = getElement();
+        if (!el) return;
+        injection[collectionKey].push(el);
+      });
+      vue.onBeforeUnmount(() => {
+        const collectionArray = injection[collectionKey];
+        const element = getElement();
+        const index = collectionArray.findIndex(collectionElement => collectionElement === element);
+        if (~index) collectionArray.splice(index, 1);
+      });
+    }
+
+    function useDeferredTrue(valueRef, delay, shouldDelayRef) {
+      if (!delay) return valueRef;
+      const delayedRef = vue.ref(valueRef.value);
+      let timerId = null;
+      vue.watch(valueRef, value => {
+        if (timerId !== null) window.clearTimeout(timerId);
+
+        if (value === true) {
+          if (shouldDelayRef && !shouldDelayRef.value) {
+            delayedRef.value = true;
+          } else {
+            timerId = window.setTimeout(() => {
+              delayedRef.value = true;
+            }, delay);
+          }
+        } else {
+          delayedRef.value = false;
+        }
+      });
+      return delayedRef;
+    }
+
     function useFalseUntilTruthy(originalRef) {
       const currentRef = vue.ref(!!originalRef.value);
       if (currentRef.value) return vue.readonly(currentRef);
@@ -3423,13 +3537,13 @@
 
 
       sum(i) {
-        if (i === 0) return 0;
+        if (i === undefined) i = this.l;
+        if (i <= 0) return 0;
         const {
           ft,
           min,
           l
         } = this;
-        if (i === undefined) i = l;
         if (i > l) throw new Error('[FinweckTree.sum]: `i` is larger than length.');
         let ret = i * min;
 
@@ -4916,6 +5030,27 @@
 
     });
 
+    let maybeTouch;
+    function ensureMaybeTouch() {
+      if (maybeTouch === undefined) {
+        if ('matchMedia' in window) {
+          maybeTouch = window.matchMedia('(pointer:coarse)').matches;
+        } else {
+          maybeTouch = false;
+        }
+      }
+
+      return maybeTouch;
+    }
+    let wheelScale;
+    function ensureWheelScale() {
+      if (wheelScale === undefined) {
+        wheelScale = 'chrome' in window ? window.devicePixelRatio : 1;
+      }
+
+      return wheelScale;
+    }
+
     /* eslint-disable no-void */
     const styles$1 = c('.v-vl', {
       maxHeight: 'inherit',
@@ -5080,7 +5215,12 @@
           return viewportItems;
         });
 
-        const scrollTo = options => {
+        const scrollTo = (options, y) => {
+          if (typeof options === 'number') {
+            scrollToPosition(options, y, 'auto');
+            return;
+          }
+
           const {
             left,
             top,
@@ -5105,6 +5245,9 @@
           }
         };
 
+        let anchorIndex;
+        let anchorTimerId = null;
+
         function scrollToIndex(index, behavior, debounce) {
           const {
             value: ft
@@ -5118,6 +5261,17 @@
               behavior
             });
           } else {
+            anchorIndex = index;
+
+            if (anchorTimerId !== null) {
+              window.clearTimeout(anchorTimerId);
+            }
+
+            anchorTimerId = window.setTimeout(() => {
+              anchorIndex = undefined;
+              anchorTimerId = null;
+            }, 16); // use 0 ms may be ealier than resize callback...
+
             const {
               scrollTop,
               offsetHeight
@@ -5141,8 +5295,6 @@
               });
             }
           }
-
-          lastScrollAnchorIndex = index;
         }
 
         function scrollToPosition(left, top, behavior) {
@@ -5154,7 +5306,7 @@
         }
 
         function handleItemResize(key, entry) {
-          var _a, _b, _c, _d;
+          var _a, _b, _c;
 
           if (isDeactivated) return;
           if (props.ignoreItemResize) return;
@@ -5179,21 +5331,68 @@
 
           const delta = height - previousHeight;
           if (delta === 0) return;
+          ft.add(index, delta);
+          const listEl = listElRef.value;
+
+          if (listEl != null) {
+            if (anchorIndex === undefined) {
+              const previousHeightSum = ft.sum(index);
+
+              if (listEl.scrollTop > previousHeightSum) {
+                listEl.scrollBy(0, delta);
+              }
+            } else {
+              if (index < anchorIndex) {
+                listEl.scrollBy(0, delta);
+              } else if (index === anchorIndex) {
+                const previousHeightSum = ft.sum(index);
+
+                if (height + previousHeightSum > // Note, listEl shouldn't have border, nor offsetHeight won't be
+                // correct
+                listEl.scrollTop + listEl.offsetHeight) {
+                  listEl.scrollBy(0, delta);
+                }
+              }
+            }
 
-          if (lastAnchorIndex !== undefined && index <= lastAnchorIndex) {
-            (_d = listElRef.value) === null || _d === void 0 ? void 0 : _d.scrollBy(0, delta);
+            syncViewport();
           }
 
-          ft.add(index, delta);
           finweckTreeUpdateTrigger.value++;
         }
 
+        const mayUseWheel = !ensureMaybeTouch();
+        let wheelCatched = false;
+
         function handleListScroll(e) {
-          beforeNextFrameOnce(syncViewport);
-          const {
-            onScroll
-          } = props;
-          if (onScroll !== undefined) onScroll(e);
+          var _a;
+
+          (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
+
+          if (!mayUseWheel || !wheelCatched) {
+            syncViewport();
+          }
+        }
+
+        function handleListWheel(e) {
+          var _a;
+
+          (_a = props.onWheel) === null || _a === void 0 ? void 0 : _a.call(props, e);
+
+          if (mayUseWheel) {
+            e.preventDefault();
+            const listEl = listElRef.value;
+
+            if (listEl != null) {
+              listEl.scrollTop += e.deltaY / ensureWheelScale();
+              listEl.scrollLeft += e.deltaX / ensureWheelScale();
+              syncViewport();
+              wheelCatched = true;
+              beforeNextFrameOnce(() => {
+                wheelCatched = false;
+              });
+            }
+          }
         }
 
         function handleListResize(entry) {
@@ -5209,9 +5408,6 @@
           if (onResize !== undefined) onResize(entry);
         }
 
-        let lastScrollAnchorIndex;
-        let lastAnchorIndex;
-
         function syncViewport() {
           const {
             value: listEl
@@ -5219,10 +5415,8 @@
           // https://github.com/TuSimple/naive-ui/issues/811
 
           if (listEl == null) return;
-          lastAnchorIndex = lastScrollAnchorIndex !== null && lastScrollAnchorIndex !== void 0 ? lastScrollAnchorIndex : startIndexRef.value;
-          lastScrollAnchorIndex = undefined;
-          scrollTopRef.value = listElRef.value.scrollTop;
-          scrollLeft = listElRef.value.scrollLeft;
+          scrollTopRef.value = listEl.scrollTop;
+          scrollLeft = listEl.scrollLeft;
         }
 
         function isHideByVShow(el) {
@@ -5270,6 +5464,7 @@
           scrollTo,
           handleListResize,
           handleListScroll,
+          handleListWheel,
           handleItemResize
         };
       },
@@ -5290,7 +5485,7 @@
             return vue.h('div', vue.mergeProps(this.$attrs, {
               class: ['v-vl', this.showScrollbar && 'v-vl--show-scrollbar'],
               onScroll: this.handleListScroll,
-              onWheel: this.onWheel,
+              onWheel: this.handleListWheel,
               ref: 'listElRef'
             }), [this.items.length !== 0 ? vue.h('div', {
               ref: 'itemsElRef',
@@ -5653,7 +5848,7 @@
 
           if (e.code === 'Escape') {
             if (isCurrentActive()) {
-              (_a = props.onEsc) === null || _a === void 0 ? void 0 : _a.call(props);
+              (_a = props.onEsc) === null || _a === void 0 ? void 0 : _a.call(props, e);
             }
           }
         }
@@ -5983,96 +6178,29 @@
       return isComposingRef;
     };
 
-    function useInjectionInstanceCollection(injectionName, collectionKey, registerKeyRef) {
-      const injection = vue.inject(injectionName, null);
-      if (injection === null) return;
-      const vm = vue.getCurrentInstance()?.proxy;
-      vue.watch(registerKeyRef, registerInstance);
-      registerInstance(registerKeyRef.value);
-      vue.onBeforeUnmount(() => {
-        registerInstance(void 0, registerKeyRef.value);
-      });
-
-      function registerInstance(key, oldKey) {
-        const collection = injection[collectionKey];
-        if (oldKey !== void 0) removeInstance(collection, oldKey);
-        if (key !== void 0) addInstance(collection, key);
-      }
-
-      function removeInstance(collection, key) {
-        if (!collection[key]) collection[key] = [];
-        collection[key].splice(collection[key].findIndex(instance => instance === vm), 1);
-      }
-
-      function addInstance(collection, key) {
-        if (!collection[key]) collection[key] = [];
+    function useReactivated(callback) {
+      const isDeactivatedRef = {
+        isDeactivated: false
+      };
+      let activateStateInitialized = false;
+      vue.onActivated(() => {
+        isDeactivatedRef.isDeactivated = false;
 
-        if (!~collection[key].findIndex(instance => instance === vm)) {
-          collection[key].push(vm);
+        if (!activateStateInitialized) {
+          activateStateInitialized = true;
+          return;
         }
-      }
-    }
-    function useInjectionCollection(injectionName, collectionKey, valueRef) {
-      const injection = vue.inject(injectionName, null);
-      if (injection === null) return;
-
-      if (!(collectionKey in injection)) {
-        injection[collectionKey] = [];
-      }
 
-      injection[collectionKey].push(valueRef.value);
-      vue.watch(valueRef, (value, prevValue) => {
-        const collectionArray = injection[collectionKey];
-        const index = collectionArray.findIndex(collectionValue => collectionValue === prevValue);
-        if (~index) collectionArray.splice(index, 1);
-        collectionArray.push(value);
-      });
-      vue.onBeforeUnmount(() => {
-        const collectionArray = injection[collectionKey];
-        const index = collectionArray.findIndex(collectionValue => collectionValue === valueRef.value);
-        if (~index) collectionArray.splice(index, 1);
-      });
-    }
-    function useInjectionElementCollection(injectionName, collectionKey, getElement) {
-      const injection = vue.inject(injectionName, null);
-      if (injection === null) return;
-
-      if (!(collectionKey in injection)) {
-        injection[collectionKey] = [];
-      }
-
-      vue.onMounted(() => {
-        const el = getElement();
-        if (!el) return;
-        injection[collectionKey].push(el);
-      });
-      vue.onBeforeUnmount(() => {
-        const collectionArray = injection[collectionKey];
-        const element = getElement();
-        const index = collectionArray.findIndex(collectionElement => collectionElement === element);
-        if (~index) collectionArray.splice(index, 1);
+        callback();
       });
-    }
-    function useDeferredTrue(valueRef, delay, shouldDelayRef) {
-      if (!delay) return valueRef;
-      const delayedRef = vue.ref(valueRef.value);
-      let timerId = null;
-      vue.watch(valueRef, value => {
-        if (timerId !== null) window.clearTimeout(timerId);
+      vue.onDeactivated(() => {
+        isDeactivatedRef.isDeactivated = true;
 
-        if (value === true) {
-          if (shouldDelayRef && !shouldDelayRef.value) {
-            delayedRef.value = true;
-          } else {
-            timerId = window.setTimeout(() => {
-              delayedRef.value = true;
-            }, delay);
-          }
-        } else {
-          delayedRef.value = false;
+        if (!activateStateInitialized) {
+          activateStateInitialized = true;
         }
       });
-      return delayedRef;
+      return isDeactivatedRef;
     }
 
     const formItemInjectionKey = createInjectionKey("n-form-item");
@@ -15765,7 +15893,7 @@
           common: mergedCommon,
           self: mergedSelf,
           peers: lodash.exports.merge({}, defaultTheme.peers, globalPeers, peers),
-          peerOverrides: lodash.exports.merge({}, globalPeersOverrides, peersOverrides)
+          peerOverrides: lodash.exports.merge({}, builtinOverrides.peers, globalPeersOverrides, peersOverrides)
         };
       });
       return mergedThemeRef;
@@ -29668,14 +29796,7 @@
             return content();
           return contentRef.value;
         });
-        let isDeactivated = false;
-        let activateStateInitialized = false;
-        vue.onActivated(() => {
-          isDeactivated = false;
-          if (!activateStateInitialized) {
-            activateStateInitialized = true;
-            return;
-          }
+        const activateState = useReactivated(() => {
           if (!props.container) {
             scrollTo({
               top: containerScrollTopRef.value,
@@ -29683,19 +29804,13 @@
             });
           }
         });
-        vue.onDeactivated(() => {
-          isDeactivated = true;
-          if (!activateStateInitialized) {
-            activateStateInitialized = true;
-          }
-        });
         const handleContentResize = () => {
-          if (isDeactivated)
+          if (activateState.isDeactivated)
             return;
           sync();
         };
         const handleContainerResize = (e) => {
-          if (isDeactivated)
+          if (activateState.isDeactivated)
             return;
           const { onResize } = props;
           if (onResize)
@@ -30258,6 +30373,7 @@
           labelFieldRef,
           valueFieldRef,
           showCheckmarkRef,
+          nodePropsRef,
           handleOptionClick,
           handleOptionMouseEnter
         } = vue.inject(internalSelectionMenuInjectionKey);
@@ -30294,6 +30410,7 @@
             return parent && parent.rawNode.type === "group";
           }),
           showCheckmark: showCheckmarkRef,
+          nodeProps: nodePropsRef,
           isPending: isPendingRef,
           isSelected: useMemo(() => {
             const { value } = valueRef;
@@ -30324,6 +30441,7 @@
           isPending,
           isGrouped,
           showCheckmark,
+          nodeProps,
           renderOption,
           renderLabel,
           handleClick,
@@ -30335,10 +30453,13 @@
           render$1(rawNode[this.labelField], rawNode, isSelected),
           showCheckmark && checkmark
         ];
+        const attrs = nodeProps?.(rawNode);
         const node = /* @__PURE__ */ vue.h("div", {
+          ...attrs,
           class: [
             `${clsPrefix}-base-select-option`,
             rawNode.class,
+            attrs?.class,
             {
               [`${clsPrefix}-base-select-option--disabled`]: rawNode.disabled,
               [`${clsPrefix}-base-select-option--selected`]: isSelected,
@@ -30347,10 +30468,13 @@
               [`${clsPrefix}-base-select-option--show-checkmark`]: showCheckmark
             }
           ],
-          style: rawNode.style,
-          onClick: handleClick,
-          onMouseenter: handleMouseEnter,
-          onMousemove: handleMouseMove
+          style: [attrs?.style || "", rawNode.style || ""],
+          onClick: mergeEventHandlers([handleClick, attrs?.onClick]),
+          onMouseenter: mergeEventHandlers([
+            handleMouseEnter,
+            attrs?.onMouseenter
+          ]),
+          onMousemove: mergeEventHandlers([handleMouseMove, attrs?.onMousemove])
         }, /* @__PURE__ */ vue.h("div", {
           class: `${clsPrefix}-base-select-option__content`
         }, children));
@@ -30374,10 +30498,12 @@
         const {
           renderLabelRef,
           renderOptionRef,
-          labelFieldRef
+          labelFieldRef,
+          nodePropsRef
         } = vue.inject(internalSelectionMenuInjectionKey);
         return {
           labelField: labelFieldRef,
+          nodeProps: nodePropsRef,
           renderLabel: renderLabelRef,
           renderOption: renderOptionRef
         };
@@ -30387,11 +30513,14 @@
           clsPrefix,
           renderLabel,
           renderOption,
+          nodeProps,
           tmNode: { rawNode }
         } = this;
+        const attrs = nodeProps?.(rawNode);
         const children = renderLabel ? renderLabel(rawNode, false) : render$1(rawNode[this.labelField], rawNode, false);
         const node = /* @__PURE__ */ vue.h("div", {
-          class: `${clsPrefix}-base-select-group-header`
+          ...attrs,
+          class: [`${clsPrefix}-base-select-group-header`, attrs?.class]
         }, children);
         return rawNode.render ? rawNode.render({ node, option: rawNode }) : renderOption ? renderOption({ node, option: rawNode, selected: false }) : node;
       }
@@ -30552,7 +30681,6 @@
           type: [String, Number, Array],
           default: null
         },
-        width: [Number, String],
         autoPending: Boolean,
         virtualScroll: {
           type: Boolean,
@@ -30574,6 +30702,7 @@
         focusable: Boolean,
         renderLabel: Function,
         renderOption: Function,
+        nodeProps: Function,
         showCheckmark: { type: Boolean, default: true },
         onMousedown: Function,
         onScroll: Function,
@@ -30766,12 +30895,13 @@
           handleOptionMouseEnter,
           handleOptionClick,
           valueSetRef,
+          pendingTmNodeRef: pendingNodeRef,
+          nodePropsRef: vue.toRef(props, "nodeProps"),
           showCheckmarkRef: vue.toRef(props, "showCheckmark"),
           multipleRef: vue.toRef(props, "multiple"),
           valueRef: vue.toRef(props, "value"),
           renderLabelRef: vue.toRef(props, "renderLabel"),
           renderOptionRef: vue.toRef(props, "renderOption"),
-          pendingTmNodeRef: pendingNodeRef,
           labelFieldRef: vue.toRef(props, "labelField"),
           valueFieldRef: vue.toRef(props, "valueField")
         });
@@ -30891,10 +31021,7 @@
             themeClass,
             this.multiple && `${clsPrefix}-base-select-menu--multiple`
           ],
-          style: [
-            { width: formatLength(this.width) },
-            this.cssVars
-          ],
+          style: this.cssVars,
           onFocusin: this.handleFocusin,
           onFocusout: this.handleFocusout,
           onKeyup: this.handleKeyUp,
@@ -31307,6 +31434,7 @@
       scrollable: Boolean,
       contentStyle: [Object, String],
       headerStyle: [Object, String],
+      internalDeactivateImmediately: Boolean,
       animated: Boolean,
       onClickoutside: Function,
       internalTrapFocus: Boolean,
@@ -31339,7 +31467,7 @@
         const displayedRef = vue.ref(false);
         vue.watchEffect(() => {
           const { show } = props;
-          if (show && !isJsdom()) {
+          if (show && !isJsdom() && !props.internalDeactivateImmediately) {
             displayedRef.value = true;
           }
         });
@@ -31376,14 +31504,22 @@
           return directives;
         });
         const styleRef = vue.computed(() => {
-          return [
-            {
-              width: props.width === "trigger" ? "" : formatLength(props.width)
-            },
-            props.maxWidth ? { maxWidth: formatLength(props.maxWidth) } : {},
-            props.minWidth ? { minWidth: formatLength(props.minWidth) } : {},
-            inlineThemeDisabled ? void 0 : cssVarsRef.value
-          ];
+          const width = props.width === "trigger" ? void 0 : formatLength(props.width);
+          const style2 = [];
+          if (width) {
+            style2.push({ width });
+          }
+          const { maxWidth, minWidth } = props;
+          if (maxWidth) {
+            style2.push({ maxWidth: formatLength(maxWidth) });
+          }
+          if (minWidth) {
+            style2.push({ maxWidth: formatLength(minWidth) });
+          }
+          if (!inlineThemeDisabled) {
+            style2.push(cssVarsRef.value);
+          }
+          return style2;
         });
         const cssVarsRef = vue.computed(() => {
           const {
@@ -31675,6 +31811,7 @@
       onClickoutside: Function,
       "onUpdate:show": [Function, Array],
       onUpdateShow: [Function, Array],
+      internalDeactivateImmediately: Boolean,
       internalSyncTargetWithParent: Boolean,
       internalInheritedEventHandlers: {
         type: Array,
@@ -33397,7 +33534,6 @@
         inputProps: Object,
         focused: Boolean,
         renderTag: Function,
-        onKeyup: Function,
         onKeydown: Function,
         onClick: Function,
         onBlur: Function,
@@ -34041,7 +34177,6 @@
           onClick: this.onClick,
           onMouseenter: this.handleMouseEnter,
           onMouseleave: this.handleMouseLeave,
-          onKeyup: this.onKeyup,
           onKeydown: this.onKeydown,
           onFocusin: this.handleFocusin,
           onFocusout: this.handleFocusout,
@@ -35738,8 +35873,88 @@
 
       return count;
     }
-    function isEmptyValue$1(value) {
-      return ["", void 0, null].includes(value);
+    function isEmptyInputValue(value) {
+      return value === "" || value == null;
+    }
+    function useCursor(inputElRef) {
+      const selectionRef = vue.ref(null);
+
+      function recordCursor() {
+        const {
+          value: input
+        } = inputElRef;
+
+        if (!input || !input.focus) {
+          reset();
+          return;
+        }
+
+        const {
+          selectionStart,
+          selectionEnd,
+          value
+        } = input;
+
+        if (selectionStart == null || selectionEnd == null) {
+          reset();
+          return;
+        }
+
+        selectionRef.value = {
+          start: selectionStart,
+          end: selectionEnd,
+          beforeText: value.slice(0, selectionStart),
+          afterText: value.slice(selectionEnd)
+        };
+      }
+
+      function restoreCursor() {
+        const {
+          value: selection
+        } = selectionRef;
+        const {
+          value: inputEl
+        } = inputElRef;
+
+        if (!selection || !inputEl) {
+          return;
+        }
+
+        const {
+          value
+        } = inputEl;
+        const {
+          start,
+          beforeText,
+          afterText
+        } = selection;
+        let startPos = value.length;
+
+        if (value.endsWith(afterText)) {
+          startPos = value.length - afterText.length;
+        } else if (value.startsWith(beforeText)) {
+          startPos = beforeText.length;
+        } else {
+          const beforeLastChar = beforeText[start - 1];
+          const newIndex = value.indexOf(beforeLastChar, start - 1);
+
+          if (newIndex !== -1) {
+            startPos = newIndex + 1;
+          }
+        }
+
+        inputEl.setSelectionRange?.(startPos, startPos);
+      }
+
+      function reset() {
+        selectionRef.value = null;
+      }
+
+      vue.watch(inputElRef, reset);
+      return {
+        recordCursor,
+        restoreCursor
+      };
     }
 
     var WordCount = vue.defineComponent({
@@ -36049,6 +36264,7 @@
         type: Boolean,
         default: void 0
       },
+      allowInput: Function,
       onMousedown: Function,
       onKeydown: Function,
       onKeyup: Function,
@@ -36101,6 +36317,8 @@
         const inputMirrorElRef = vue.ref(null);
         const inputElRef = vue.ref(null);
         const inputEl2Ref = vue.ref(null);
+        const currentFocusedInputRef = vue.ref(null);
+        const focusedInputCursorControl = useCursor(currentFocusedInputRef);
         const textareaScrollbarInstRef = vue.ref(null);
         const { localeRef } = useLocale("Input");
         const uncontrolledValueRef = vue.ref(props.defaultValue);
@@ -36132,13 +36350,13 @@
           const { value: isComposing } = isComposingRef;
           const { value: mergedValue } = mergedValueRef;
           const { value: mergedPlaceholder } = mergedPlaceholderRef;
-          return !isComposing && (isEmptyValue$1(mergedValue) || Array.isArray(mergedValue) && isEmptyValue$1(mergedValue[0])) && mergedPlaceholder[0];
+          return !isComposing && (isEmptyInputValue(mergedValue) || Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[0])) && mergedPlaceholder[0];
         });
         const showPlaceholder2Ref = vue.computed(() => {
           const { value: isComposing } = isComposingRef;
           const { value: mergedValue } = mergedValueRef;
           const { value: mergedPlaceholder } = mergedPlaceholderRef;
-          return !isComposing && mergedPlaceholder[1] && (isEmptyValue$1(mergedValue) || Array.isArray(mergedValue) && isEmptyValue$1(mergedValue[1]));
+          return !isComposing && mergedPlaceholder[1] && (isEmptyInputValue(mergedValue) || Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[1]));
         });
         const mergedFocusRef = useMemo(() => {
           return props.internalForceFocus || focusedRef.value;
@@ -36321,20 +36539,33 @@
           syncSource = targetValue;
           if (isComposingRef.value)
             return;
-          const changedValue = targetValue;
-          if (!props.pair) {
-            event === "input" ? doUpdateValue(changedValue) : doChange(changedValue);
-          } else {
-            let { value } = mergedValueRef;
-            if (!Array.isArray(value)) {
-              value = ["", ""];
+          focusedInputCursorControl.recordCursor();
+          const isIncomingValueValid = allowInput(targetValue);
+          if (isIncomingValueValid) {
+            if (!props.pair) {
+              event === "input" ? doUpdateValue(targetValue) : doChange(targetValue);
             } else {
-              value = [...value];
+              let { value } = mergedValueRef;
+              if (!Array.isArray(value)) {
+                value = ["", ""];
+              } else {
+                value = [value[0], value[1]];
+              }
+              value[index] = targetValue;
+              event === "input" ? doUpdateValue(value) : doChange(value);
             }
-            value[index] = changedValue;
-            event === "input" ? doUpdateValue(value) : doChange(value);
           }
           vm.$forceUpdate();
+          if (!isIncomingValueValid) {
+            void vue.nextTick(focusedInputCursorControl.restoreCursor);
+          }
+        }
+        function allowInput(value) {
+          const { allowInput: allowInput2 } = props;
+          if (typeof allowInput2 === "function") {
+            return allowInput2(value);
+          }
+          return true;
         }
         function handleInputBlur(e) {
           doUpdateValueBlur(e);
@@ -36345,13 +36576,21 @@
             activatedRef.value = false;
           }
           dealWithEvent(e, "blur");
+          currentFocusedInputRef.value = null;
         }
-        function handleInputFocus(e) {
+        function handleInputFocus(e, index) {
           doUpdateValueFocus(e);
           focusedRef.value = true;
           activatedRef.value = true;
           doActivate();
           dealWithEvent(e, "focus");
+          if (index === 0) {
+            currentFocusedInputRef.value = inputElRef.value;
+          } else if (index === 1) {
+            currentFocusedInputRef.value = inputEl2Ref.value;
+          } else if (index === 2) {
+            currentFocusedInputRef.value = textareaElRef.value;
+          }
         }
         function handleWrapperBlur(e) {
           if (props.passivelyActivated) {
@@ -36452,23 +36691,23 @@
           };
           on("mouseup", document, hidePassword);
         }
-        function handleWrapperKeyDown(e) {
+        function handleWrapperKeydown(e) {
           props.onKeydown?.(e);
           switch (e.key) {
             case "Escape":
-              handleWrapperKeyDownEsc();
+              handleWrapperKeydownEsc();
               break;
             case "Enter":
-              handleWrapperKeyDownEnter(e);
+              handleWrapperKeydownEnter(e);
               break;
           }
         }
-        function handleWrapperKeyDownEnter(e) {
+        function handleWrapperKeydownEnter(e) {
           if (props.passivelyActivated) {
             const { value: focused } = activatedRef;
             if (focused) {
               if (props.internalDeactivateOnEnter) {
-                handleWrapperKeyDownEsc();
+                handleWrapperKeydownEsc();
               }
               return;
             }
@@ -36480,7 +36719,7 @@
             }
           }
         }
-        function handleWrapperKeyDownEsc() {
+        function handleWrapperKeydownEsc() {
           if (props.passivelyActivated) {
             activatedRef.value = false;
             void vue.nextTick(() => {
@@ -36518,7 +36757,7 @@
         function deactivate() {
           const { value: wrapperEl } = wrapperElRef;
           if (wrapperEl?.contains(document.activeElement) && wrapperEl !== document.activeElement) {
-            handleWrapperKeyDownEsc();
+            handleWrapperKeydownEsc();
           }
         }
         function syncMirror(value) {
@@ -36746,7 +36985,7 @@
           handleClear,
           handlePasswordToggleClick,
           handlePasswordToggleMousedown,
-          handleWrapperKeyDown,
+          handleWrapperKeydown,
           handleTextAreaMirrorResize,
           getTextareaScrollContainer: () => {
             return textareaElRef.value;
@@ -36790,7 +37029,7 @@
           onCompositionstart: this.handleCompositionStart,
           onCompositionend: this.handleCompositionEnd,
           onKeyup: this.onKeyup,
-          onKeydown: this.handleWrapperKeyDown
+          onKeydown: this.handleWrapperKeydown
         }, /* @__PURE__ */ vue.h("div", {
           class: `${mergedClsPrefix}-input-wrapper`
         }, resolveWrappedSlot($slots.prefix, (children) => children && /* @__PURE__ */ vue.h("div", {
@@ -36829,7 +37068,7 @@
                 scrollContainerWidthStyle
               ],
               onBlur: this.handleInputBlur,
-              onFocus: this.handleInputFocus,
+              onFocus: (e) => this.handleInputFocus(e, 2),
               onInput: this.handleInput,
               onChange: this.handleChange,
               onScroll: this.handleTextAreaScroll
@@ -36874,7 +37113,7 @@
           autofocus: this.autofocus,
           size: this.attrSize,
           onBlur: this.handleInputBlur,
-          onFocus: this.handleInputFocus,
+          onFocus: (e) => this.handleInputFocus(e, 0),
           onInput: (e) => this.handleInput(e, 0),
           onChange: (e) => this.handleChange(e, 0)
         }), this.showPlaceholder1 ? /* @__PURE__ */ vue.h("div", {
@@ -36942,7 +37181,7 @@
           readonly: this.readonly,
           style: this.textDecorationStyle[1],
           onBlur: this.handleInputBlur,
-          onFocus: this.handleInputFocus,
+          onFocus: (e) => this.handleInputFocus(e, 1),
           onInput: (e) => this.handleInput(e, 1),
           onChange: (e) => this.handleChange(e, 1)
         }), this.showPlaceholder2 ? /* @__PURE__ */ vue.h("div", {
@@ -39305,11 +39544,14 @@
           return props.focusable && !props.disabled;
         });
         const handleMousedown = (e) => {
-          if (props.disabled || props.nativeFocusBehavior) {
+          if (props.nativeFocusBehavior) {
+            return;
+          }
+          e.preventDefault();
+          if (props.disabled) {
             return;
           }
           if (mergedFocusableRef.value) {
-            e.preventDefault();
             selfElRef.value?.focus({ preventScroll: true });
           }
         };
@@ -50156,7 +50398,7 @@
           type: Function,
           required: true
         },
-        onKeyup: {
+        onKeydown: {
           type: Function,
           required: true
         },
@@ -50248,10 +50490,7 @@
               onMousedown: this.onMousedown,
               onFocusin: this.handleFocusin,
               onFocusout: this.handleFocusout,
-              onKeyup: this.onKeyup,
-              style: {
-                "--n-col-count": this.menuModel.length
-              }
+              onKeydown: this.onKeydown
             }, this.menuModel[0].length ? /* @__PURE__ */ vue.h("div", {
               class: `${mergedClsPrefix}-cascader-submenu-wrapper`
             }, this.menuModel.map((submenuOptions, index) => /* @__PURE__ */ vue.h(NCascaderSubmenu, {
@@ -50804,6 +51043,8 @@
               doUpdateValue(checkedKeys, checkedKeys.map((checkedKey) => getNode(checkedKey)?.rawNode || null), checkedKeys.map((checkedKey) => getRawNodePath(getPath(checkedKey)?.treeNodePath)));
               if (filterable)
                 focusSelectionInput();
+              keyboardKeyRef.value = key;
+              hoverKeyRef.value = key;
             } catch (err) {
               if (err instanceof SubtreeNotLoadedError) {
                 if (cascaderMenuInstRef.value) {
@@ -50843,6 +51084,8 @@
               allowNotLoaded: props.allowCheckingNotLoaded
             });
             doUpdateValue(checkedKeys, checkedKeys.map((checkedKey) => getNode(checkedKey)?.rawNode || null), checkedKeys.map((checkedKey) => getRawNodePath(getPath(checkedKey)?.treeNodePath)));
+            keyboardKeyRef.value = key;
+            hoverKeyRef.value = key;
           }
         }
         const selectedOptionsRef = vue.computed(() => {
@@ -51059,7 +51302,17 @@
               break;
           }
         }
-        function handleKeyUp(e) {
+        function handleKeydown(e) {
+          switch (e.key) {
+            case " ":
+            case "ArrowDown":
+            case "ArrowUp":
+              if (props.filterable && mergedShowRef.value) {
+                break;
+              }
+              e.preventDefault();
+              break;
+          }
           if (happensIn(e, "action"))
             return;
           switch (e.key) {
@@ -51127,11 +51380,14 @@
               }
               break;
             case "Escape":
-              closeMenu(true);
+              if (mergedShowRef.value) {
+                markEventEffectPerformed(e);
+                closeMenu(true);
+              }
           }
         }
-        function handleMenuKeyUp(e) {
-          handleKeyUp(e);
+        function handleMenuKeydown(e) {
+          handleKeydown(e);
         }
         function handleClear(e) {
           e.stopPropagation();
@@ -51200,18 +51456,6 @@
             doUpdateValue(null, null, null);
           }
         }
-        function handleKeyDown(e) {
-          switch (e.key) {
-            case " ":
-            case "ArrowDown":
-            case "ArrowUp":
-              if (props.filterable && mergedShowRef.value) {
-                return;
-              }
-              e.preventDefault();
-              break;
-          }
-        }
         function syncSelectMenuPosition() {
           selectMenuFollowerRef.value?.syncPosition();
         }
@@ -51339,7 +51583,7 @@
           handleMenuTabout,
           handleMenuFocus,
           handleMenuBlur,
-          handleMenuKeyUp,
+          handleMenuKeydown,
           handleMenuMousedown,
           handleTriggerFocus,
           handleTriggerBlur,
@@ -51347,8 +51591,7 @@
           handleClear,
           handleDeleteOption,
           handlePatternInput,
-          handleKeyDown,
-          handleKeyUp,
+          handleKeydown,
           focused: focusedRef,
           optionHeight: optionHeightRef,
           mergedTheme: themeRef,
@@ -51390,8 +51633,7 @@
                 onClear: this.handleClear,
                 onDeleteOption: this.handleDeleteOption,
                 onPatternInput: this.handlePatternInput,
-                onKeydown: this.handleKeyDown,
-                onKeyup: this.handleKeyUp
+                onKeydown: this.handleKeydown
               })
             }),
             /* @__PURE__ */ vue.h(VFollower, {
@@ -51420,7 +51662,7 @@
                   ],
                   onFocus: this.handleMenuFocus,
                   onBlur: this.handleMenuBlur,
-                  onKeyup: this.handleMenuKeyUp,
+                  onKeydown: this.handleMenuKeydown,
                   onMousedown: this.handleMenuMousedown,
                   onTabout: this.handleMenuTabout
                 }, {
@@ -52688,6 +52930,15 @@
       }
     });
 
+    const popselect = {
+      name: "Popselect",
+      common: derived$1,
+      peers: {
+        Popover: popoverDark,
+        InternalSelectMenu: internalSelectMenuDark
+      }
+    };
+
     function self$O(vars) {
       const {
         boxShadow2
@@ -52696,6 +52947,287 @@
         menuBoxShadow: boxShadow2
       };
     }
+    const popselectLight = createTheme$1({
+      name: "Popselect",
+      common: derived,
+      peers: {
+        Popover: popoverLight,
+        InternalSelectMenu: internalSelectMenuLight
+      },
+      self: self$O
+    });
+
+    const popselectInjectionKey = createInjectionKey("n-popselect");
+
+    var style$_ = cB("popselect-menu", `
+  box-shadow: var(--n-menu-box-shadow);
+`);
+
+    const panelProps$1 = {
+      multiple: Boolean,
+      value: {
+        type: [String, Number, Array],
+        default: null
+      },
+      cancelable: Boolean,
+      options: {
+        type: Array,
+        default: () => []
+      },
+      size: {
+        type: String,
+        default: "medium"
+      },
+      scrollable: Boolean,
+      "onUpdate:value": [Function, Array],
+      onUpdateValue: [Function, Array],
+      onMouseenter: Function,
+      onMouseleave: Function,
+      renderLabel: Function,
+      internalShowCheckmark: {
+        type: Boolean,
+        default: void 0
+      },
+      nodeProps: Function,
+      virtualScroll: Boolean,
+      onChange: [Function, Array]
+    };
+    const panelPropKeys$1 = keysOf(panelProps$1);
+    var NPopselectPanel = vue.defineComponent({
+      name: "PopselectPanel",
+      props: panelProps$1,
+      setup(props) {
+        {
+          vue.watchEffect(() => {
+            if (props.onChange !== void 0) {
+              warn$2("popselect", "`on-change` is deprecated, please use `on-update:value` instead.");
+            }
+          });
+        }
+        const NPopselect = vue.inject(popselectInjectionKey);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const themeRef = useTheme("Popselect", "-pop-select", style$_, popselectLight, NPopselect.props, mergedClsPrefixRef);
+        const treeMateRef = vue.computed(() => {
+          return createTreeMate(props.options, createTmOptions("value", "children"));
+        });
+        function doUpdateValue(value, option) {
+          const {
+            onUpdateValue,
+            "onUpdate:value": _onUpdateValue,
+            onChange
+          } = props;
+          if (onUpdateValue)
+            call(onUpdateValue, value, option);
+          if (_onUpdateValue) {
+            call(_onUpdateValue, value, option);
+          }
+          if (onChange)
+            call(onChange, value, option);
+        }
+        function handleToggle(tmNode) {
+          toggle(tmNode.key);
+        }
+        function handleMenuMousedown(e) {
+          if (!happensIn(e, "action"))
+            e.preventDefault();
+        }
+        function toggle(value) {
+          const {
+            value: { getNode }
+          } = treeMateRef;
+          if (props.multiple) {
+            if (Array.isArray(props.value)) {
+              const newValue = [];
+              const newOptions = [];
+              let shouldAddValue = true;
+              props.value.forEach((v) => {
+                if (v === value) {
+                  shouldAddValue = false;
+                  return;
+                }
+                const tmNode = getNode(v);
+                if (tmNode) {
+                  newValue.push(tmNode.key);
+                  newOptions.push(tmNode.rawNode);
+                }
+              });
+              if (shouldAddValue) {
+                newValue.push(value);
+                newOptions.push(getNode(value).rawNode);
+              }
+              doUpdateValue(newValue, newOptions);
+            } else {
+              const tmNode = getNode(value);
+              if (tmNode) {
+                doUpdateValue([value], [tmNode.rawNode]);
+              }
+            }
+          } else {
+            if (props.value === value && props.cancelable) {
+              doUpdateValue(null, null);
+            } else {
+              const tmNode = getNode(value);
+              if (tmNode) {
+                doUpdateValue(value, tmNode.rawNode);
+              }
+              const { "onUpdate:show": _onUpdateShow, onUpdateShow } = NPopselect.props;
+              if (_onUpdateShow)
+                call(_onUpdateShow, false);
+              if (onUpdateShow)
+                call(onUpdateShow, false);
+              NPopselect.setShow(false);
+            }
+          }
+          void vue.nextTick(() => {
+            NPopselect.syncPosition();
+          });
+        }
+        vue.watch(vue.toRef(props, "options"), () => {
+          void vue.nextTick(() => {
+            NPopselect.syncPosition();
+          });
+        });
+        const cssVarsRef = vue.computed(() => {
+          const {
+            self: { menuBoxShadow }
+          } = themeRef.value;
+          return {
+            "--n-menu-box-shadow": menuBoxShadow
+          };
+        });
+        const themeClassHandle = inlineThemeDisabled ? useThemeClass("select", void 0, cssVarsRef, NPopselect.props) : void 0;
+        return {
+          mergedTheme: NPopselect.mergedThemeRef,
+          mergedClsPrefix: mergedClsPrefixRef,
+          treeMate: treeMateRef,
+          handleToggle,
+          handleMenuMousedown,
+          cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
+          themeClass: themeClassHandle?.themeClass,
+          onRender: themeClassHandle?.onRender
+        };
+      },
+      render() {
+        this.onRender?.();
+        return /* @__PURE__ */ vue.h(NInternalSelectMenu, {
+          clsPrefix: this.mergedClsPrefix,
+          focusable: true,
+          nodeProps: this.nodeProps,
+          class: [`${this.mergedClsPrefix}-popselect-menu`, this.themeClass],
+          style: this.cssVars,
+          theme: this.mergedTheme.peers.InternalSelectMenu,
+          themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu,
+          multiple: this.multiple,
+          treeMate: this.treeMate,
+          size: this.size,
+          value: this.value,
+          virtualScroll: this.virtualScroll,
+          scrollable: this.scrollable,
+          renderLabel: this.renderLabel,
+          onToggle: this.handleToggle,
+          onMouseenter: this.onMouseenter,
+          onMouseleave: this.onMouseenter,
+          onMousedown: this.handleMenuMousedown,
+          showCheckmark: this.internalShowCheckmark
+        }, {
+          action: () => this.$slots.action?.() || [],
+          empty: () => this.$slots.empty?.() || []
+        });
+      }
+    });
+
+    const popselectProps = {
+      ...useTheme.props,
+      ...omit(popoverBaseProps, ["showArrow", "arrow"]),
+      placement: {
+        ...popoverBaseProps.placement,
+        default: "bottom"
+      },
+      trigger: {
+        type: String,
+        default: "hover"
+      },
+      ...panelProps$1
+    };
+    var NPopselect = vue.defineComponent({
+      name: "Popselect",
+      props: popselectProps,
+      inheritAttrs: false,
+      __popover__: true,
+      setup(props) {
+        const themeRef = useTheme("Popselect", "-popselect", void 0, popselectLight, props);
+        const popoverInstRef = vue.ref(null);
+        function syncPosition() {
+          popoverInstRef.value?.syncPosition();
+        }
+        function setShow(value) {
+          popoverInstRef.value?.setShow(value);
+        }
+        vue.provide(popselectInjectionKey, {
+          props,
+          mergedThemeRef: themeRef,
+          syncPosition,
+          setShow
+        });
+        const exposedMethods = {
+          syncPosition,
+          setShow
+        };
+        return {
+          ...exposedMethods,
+          popoverInstRef,
+          mergedTheme: themeRef
+        };
+      },
+      render() {
+        const { mergedTheme } = this;
+        const popoverProps = {
+          theme: mergedTheme.peers.Popover,
+          themeOverrides: mergedTheme.peerOverrides.Popover,
+          builtinThemeOverrides: {
+            padding: "0"
+          },
+          ref: "popoverInstRef",
+          internalRenderBody: (className, ref2, style, onMouseenter, onMouseleave) => {
+            const { $attrs } = this;
+            return /* @__PURE__ */ vue.h(NPopselectPanel, {
+              ...$attrs,
+              class: [$attrs.class, className],
+              style: [$attrs.style, style],
+              ...keep(this.$props, panelPropKeys$1),
+              ref: createRefSetter(ref2),
+              onMouseenter: mergeEventHandlers([
+                onMouseenter,
+                $attrs.onMouseenter
+              ]),
+              onMouseleave: mergeEventHandlers([
+                onMouseleave,
+                $attrs.onMouseleave
+              ])
+            }, {
+              action: () => this.$slots.action?.(),
+              empty: () => this.$slots.empty?.()
+            });
+          }
+        };
+        return /* @__PURE__ */ vue.h(NPopover, {
+          ...omit(this.$props, panelPropKeys$1),
+          ...popoverProps,
+          internalDeactivateImmediately: true
+        }, {
+          trigger: () => this.$slots.default?.()
+        });
+      }
+    });
+
+    function self$N(vars) {
+      const {
+        boxShadow2
+      } = vars;
+      return {
+        menuBoxShadow: boxShadow2
+      };
+    }
     const selectLight = createTheme$1({
       name: "Select",
       common: derived,
@@ -52703,7 +53235,7 @@
         InternalSelection: internalSelectionLight,
         InternalSelectMenu: internalSelectMenuLight
       },
-      self: self$O
+      self: self$N
     });
 
     const selectDark = {
@@ -52713,10 +53245,10 @@
         InternalSelection: internalSelectionDark,
         InternalSelectMenu: internalSelectMenuDark
       },
-      self: self$O
+      self: self$N
     };
 
-    var style$_ = c$1([cB("select", `
+    var style$Z = c$1([cB("select", `
     z-index: auto;
     outline: none;
     width: 100%;
@@ -52853,7 +53385,7 @@
           namespaceRef,
           inlineThemeDisabled
         } = useConfig(props);
-        const themeRef = useTheme("Select", "-select", style$_, selectLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Select", "-select", style$Z, selectLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = vue.ref(props.defaultValue);
         const controlledValueRef = vue.toRef(props, "value");
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
@@ -53290,7 +53822,10 @@
               }
               break;
             case "Escape":
-              closeMenu();
+              if (mergedShowRef.value) {
+                markEventEffectPerformed(e);
+                closeMenu();
+              }
               triggerRef.value?.focus();
               break;
           }
@@ -53540,7 +54075,7 @@
       suffixMarginLarge: "0 0 0 8px"
     };
 
-    const self$N = vars => {
+    const self$M = vars => {
       const {
         textColor2,
         primaryColor,
@@ -53602,9 +54137,10 @@
       common: derived,
       peers: {
         Select: selectLight,
-        Input: inputLight
+        Input: inputLight,
+        Popselect: popselectLight
       },
-      self: self$N
+      self: self$M
     });
 
     const paginationDark = {
@@ -53612,7 +54148,8 @@
       common: derived$1,
       peers: {
         Select: selectDark,
-        Input: inputDark
+        Input: inputDark,
+        Popselect: popselect
       },
 
       self(vars) {
@@ -53623,7 +54160,7 @@
         const borderColorActive = changeColor(primaryColor, {
           alpha: Number(opacity3)
         });
-        const commonSelf = self$N(vars);
+        const commonSelf = self$M(vars);
         commonSelf.itemBorderActive = `1px solid ${borderColorActive}`;
         commonSelf.itemBorderDisabled = "1px solid #0000";
         return commonSelf;
@@ -53645,10 +54182,50 @@
       peers: [inputRtl]
     };
 
-    function pagesToShow(currentPage, pageCount) {
-      let pageSlot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 9;
-      if (pageCount === 1) return [1];
-      if (pageCount === 2) return [1, 2];
+    function createPageItemsInfo(currentPage, pageCount, pageSlot) {
+      let hasFastBackward = false;
+      let hasFastForward = false;
+      let fastBackwardTo = 1;
+      let fastForwardTo = pageCount;
+
+      if (pageCount === 1) {
+        return {
+          hasFastBackward: false,
+          hasFastForward: false,
+          fastForwardTo,
+          fastBackwardTo,
+          items: [{
+            type: "page",
+            label: 1,
+            active: currentPage === 1,
+            mayBeFastBackward: false,
+            mayBeFastForward: false
+          }]
+        };
+      }
+
+      if (pageCount === 2) {
+        return {
+          hasFastBackward: false,
+          hasFastForward: false,
+          fastForwardTo,
+          fastBackwardTo,
+          items: [{
+            type: "page",
+            label: 1,
+            active: currentPage === 1,
+            mayBeFastBackward: false,
+            mayBeFastForward: false
+          }, {
+            type: "page",
+            label: 2,
+            active: currentPage === 2,
+            mayBeFastBackward: true,
+            mayBeFastForward: false
+          }]
+        };
+      }
+
       const firstPage = 1;
       const lastPage = pageCount;
       let middleStart = currentPage;
@@ -53663,68 +54240,105 @@
       if (middleStart > firstPage + 2) leftSplit = true;
       if (middleEnd < lastPage - 2) rightSplit = true;
       const items = [];
-      items.push(firstPage);
+      items.push({
+        type: "page",
+        label: 1,
+        active: currentPage === 1,
+        mayBeFastBackward: false,
+        mayBeFastForward: false
+      });
 
       if (leftSplit) {
-        items.push(-2);
+        hasFastBackward = true;
+        fastBackwardTo = middleStart - 1;
+        items.push({
+          type: "fast-backward",
+          active: false,
+          label: void 0,
+          options: createRange(firstPage + 1, middleStart - 1)
+        });
       } else if (lastPage >= firstPage + 1) {
-        items.push(firstPage + 1);
+        items.push({
+          type: "page",
+          label: firstPage + 1,
+          mayBeFastBackward: true,
+          mayBeFastForward: false,
+          active: currentPage === firstPage + 1
+        });
       }
 
       for (let i = middleStart; i <= middleEnd; ++i) {
-        items.push(i);
+        items.push({
+          type: "page",
+          label: i,
+          mayBeFastBackward: false,
+          mayBeFastForward: false,
+          active: currentPage === i
+        });
       }
 
       if (rightSplit) {
-        items.push(-1);
-      } else if (middleEnd === lastPage - 2 && items[items.length - 1] !== lastPage - 1) {
-        items.push(lastPage - 1);
+        hasFastForward = true;
+        fastForwardTo = middleEnd + 1;
+        items.push({
+          type: "fast-forward",
+          active: false,
+          label: void 0,
+          options: createRange(middleEnd + 1, lastPage - 1)
+        });
+      } else if (middleEnd === lastPage - 2 && items[items.length - 1].label !== lastPage - 1) {
+        items.push({
+          type: "page",
+          mayBeFastForward: true,
+          mayBeFastBackward: false,
+          label: lastPage - 1,
+          active: currentPage === lastPage - 1
+        });
       }
 
-      if (items[items.length - 1] !== lastPage) items.push(lastPage);
-      return items;
-    }
-
-    function mapPagesToPageItems(pages, currentPage) {
-      return pages.map(page => {
-        switch (page) {
-          case -2:
-            return {
-              type: "fast-backward",
-              active: false
-            };
+      if (items[items.length - 1].label !== lastPage) {
+        items.push({
+          type: "page",
+          mayBeFastForward: false,
+          mayBeFastBackward: false,
+          label: lastPage,
+          active: currentPage === lastPage
+        });
+      }
 
-          case -1:
-            return {
-              type: "fast-forward",
-              active: false
-            };
+      return {
+        hasFastBackward,
+        hasFastForward,
+        fastBackwardTo,
+        fastForwardTo,
+        items
+      };
+    }
 
-          default:
-            if (page === currentPage) {
-              return {
-                type: "page",
-                label: page,
-                active: true
-              };
-            } else {
-              return {
-                type: "page",
-                label: page,
-                active: false
-              };
-            }
+    function createRange(from, to) {
+      const range = [];
 
-        }
-      });
-    }
+      for (let i = from; i <= to; ++i) {
+        range.push({
+          label: `${i}`,
+          value: i
+        });
+      }
 
-    function pageItems(currentPage, pageCount, pageSlot) {
-      const pages = pagesToShow(currentPage, pageCount, pageSlot);
-      return mapPagesToPageItems(pages, currentPage);
+      return range;
     }
 
-    var style$Z = cB("pagination", `
+    const hoverStyleProps = `
+  background: var(--n-item-color-hover);
+  color: var(--n-item-text-color-hover);
+  border: var(--n-item-border-hover);
+`;
+    const hoverStyleChildren$1 = [cM("button", `
+    background: var(--n-button-color-hover);
+    border: var(--n-button-border-hover);
+    color: var(--n-button-icon-color-hover);
+  `)];
+    var style$Y = cB("pagination", `
   display: flex;
   vertical-align: middle;
   font-size: var(--n-item-font-size);
@@ -53779,15 +54393,7 @@
       padding: 0;
     `, [cB("base-icon", `
         font-size: var(--n-button-icon-size);
-      `)]), cNotM("disabled", [c$1("&:hover", `
-        background: var(--n-item-color-hover);
-        color: var(--n-item-text-color-hover);
-        border: var(--n-item-border-hover);
-      `, [cM("button", `
-          background: var(--n-button-color-hover);
-          border: var(--n-button-border-hover);
-          color: var(--n-button-icon-color-hover);
-        `)]), c$1("&:active", `
+      `)]), cNotM("disabled", [cM("hover", hoverStyleProps, hoverStyleChildren$1), c$1("&:hover", hoverStyleProps, hoverStyleChildren$1), c$1("&:active", `
         background: var(--n-item-color-pressed);
         color: var(--n-item-text-color-pressed);
         border: var(--n-item-border-pressed);
@@ -53883,7 +54489,7 @@
           inlineThemeDisabled,
           mergedRtlRef
         } = useConfig(props);
-        const themeRef = useTheme("Pagination", "-pagination", style$Z, paginationLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Pagination", "-pagination", style$Y, paginationLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale("Pagination");
         const selfRef = vue.ref(null);
         const jumperRef = vue.ref(null);
@@ -53902,8 +54508,39 @@
             return Math.max(pageCount, 1);
           return 1;
         });
-        const showFastForwardRef = vue.ref(false);
-        const showFastBackwardRef = vue.ref(false);
+        const fastForwardActiveRef = vue.ref(false);
+        const fastBackwardActiveRef = vue.ref(false);
+        const showFastForwardMenuRef = vue.ref(false);
+        const showFastBackwardMenuRef = vue.ref(false);
+        const handleFastForwardMouseenter = () => {
+          fastForwardActiveRef.value = true;
+          disableTransitionOneTick();
+        };
+        const handleFastForwardMouseleave = () => {
+          fastForwardActiveRef.value = false;
+          disableTransitionOneTick();
+        };
+        const handleFastBackwardMouseenter = () => {
+          fastBackwardActiveRef.value = true;
+          disableTransitionOneTick();
+        };
+        const handleFastBackwardMouseleave = () => {
+          fastBackwardActiveRef.value = false;
+          disableTransitionOneTick();
+        };
+        const handleMenuSelect = (value) => {
+          doUpdatePage(value);
+        };
+        const pageItemsInfo = vue.computed(() => createPageItemsInfo(mergedPageRef.value, mergedPageCountRef.value, props.pageSlot));
+        vue.watchEffect(() => {
+          if (!pageItemsInfo.value.hasFastBackward) {
+            fastBackwardActiveRef.value = false;
+            showFastBackwardMenuRef.value = false;
+          } else if (!pageItemsInfo.value.hasFastForward) {
+            fastForwardActiveRef.value = false;
+            showFastForwardMenuRef.value = false;
+          }
+        });
         const pageSizeOptionsRef = vue.computed(() => {
           const suffix = localeRef.value.selectionSuffix;
           return props.pageSizes.map((size) => {
@@ -53997,13 +54634,13 @@
         function fastForward() {
           if (props.disabled)
             return;
-          const page = Math.min(mergedPageRef.value + (props.pageSlot - 4), mergedPageCountRef.value);
+          const page = Math.min(pageItemsInfo.value.fastForwardTo, mergedPageCountRef.value);
           doUpdatePage(page);
         }
         function fastBackward() {
           if (props.disabled)
             return;
-          const page = Math.max(mergedPageRef.value - (props.pageSlot - 4), 1);
+          const page = Math.max(pageItemsInfo.value.fastBackwardTo, 1);
           doUpdatePage(page);
         }
         function handleSizePickerChange(value) {
@@ -54034,36 +54671,6 @@
               break;
           }
         }
-        function handlePageItemMouseEnter(pageItem) {
-          if (props.disabled)
-            return;
-          switch (pageItem.type) {
-            case "fast-backward":
-              showFastBackwardRef.value = true;
-              break;
-            case "fast-forward":
-              showFastForwardRef.value = true;
-              break;
-            default:
-              return;
-          }
-          disableTransitionOneTick();
-        }
-        function handlePageItemMouseLeave(pageItem) {
-          if (props.disabled)
-            return;
-          switch (pageItem.type) {
-            case "fast-backward":
-              showFastBackwardRef.value = false;
-              break;
-            case "fast-forward":
-              showFastForwardRef.value = false;
-              break;
-            default:
-              return;
-          }
-          disableTransitionOneTick();
-        }
         function handleJumperInput(value) {
           jumperValueRef.value = value.replace(/\D+/g, "");
         }
@@ -54180,9 +54787,9 @@
           selfRef,
           jumperRef,
           mergedPage: mergedPageRef,
-          showFastBackward: showFastBackwardRef,
-          showFastForward: showFastForwardRef,
-          pageItems: vue.computed(() => pageItems(mergedPageRef.value, mergedPageCountRef.value, props.pageSlot)),
+          pageItems: vue.computed(() => {
+            return pageItemsInfo.value.items;
+          }),
           mergedItemCount: mergedItemCountRef,
           jumperValue: jumperValueRef,
           pageSizeOptions: pageSizeOptionsRef,
@@ -54193,14 +54800,21 @@
           mergedPageCount: mergedPageCountRef,
           startIndex: startIndexRef,
           endIndex: endIndexRef,
+          showFastForwardMenu: showFastForwardMenuRef,
+          showFastBackwardMenu: showFastBackwardMenuRef,
+          fastForwardActive: fastForwardActiveRef,
+          fastBackwardActive: fastBackwardActiveRef,
+          handleMenuSelect,
+          handleFastForwardMouseenter,
+          handleFastForwardMouseleave,
+          handleFastBackwardMouseenter,
+          handleFastBackwardMouseleave,
           handleJumperInput,
           handleBackwardClick: backward,
           handleForwardClick: forward,
           handlePageItemClick,
           handleSizePickerChange,
           handleQuickJumperKeyUp,
-          handlePageItemMouseEnter,
-          handlePageItemMouseLeave,
           cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
           themeClass: themeClassHandle?.themeClass,
           onRender: themeClassHandle?.onRender
@@ -54214,9 +54828,7 @@
           cssVars,
           mergedPage,
           mergedPageCount,
-          pageItems: pageItems2,
-          showFastBackward,
-          showFastForward,
+          pageItems,
           showSizePicker,
           showQuickJumper,
           mergedTheme,
@@ -54235,8 +54847,6 @@
           handleSizePickerChange,
           handleBackwardClick,
           handlePageItemClick,
-          handlePageItemMouseEnter,
-          handlePageItemMouseLeave,
           handleForwardClick,
           handleQuickJumperKeyUp,
           onRender
@@ -54283,9 +54893,12 @@
           clsPrefix: mergedClsPrefix
         }, {
           default: () => this.rtlEnabled ? /* @__PURE__ */ vue.h(ForwardIcon, null) : /* @__PURE__ */ vue.h(BackwardIcon, null)
-        })), pageItems2.map((pageItem, index) => {
+        })), pageItems.map((pageItem, index) => {
           let contentNode;
-          switch (pageItem.type) {
+          let onMouseenter;
+          let onMouseleave;
+          const { type } = pageItem;
+          switch (type) {
             case "page":
               const pageNode = pageItem.label;
               if (renderLabel) {
@@ -54299,7 +54912,7 @@
               }
               break;
             case "fast-forward":
-              const fastForwardNode = showFastForward ? /* @__PURE__ */ vue.h(NBaseIcon, {
+              const fastForwardNode = this.fastForwardActive ? /* @__PURE__ */ vue.h(NBaseIcon, {
                 clsPrefix: mergedClsPrefix
               }, {
                 default: () => this.rtlEnabled ? /* @__PURE__ */ vue.h(FastBackwardIcon, null) : /* @__PURE__ */ vue.h(FastForwardIcon, null)
@@ -54310,14 +54923,16 @@
                 contentNode = renderLabel({
                   type: "fast-forward",
                   node: fastForwardNode,
-                  active: showFastForward
+                  active: this.fastForwardActive || this.showFastForwardMenu
                 });
               } else {
                 contentNode = fastForwardNode;
               }
+              onMouseenter = this.handleFastForwardMouseenter;
+              onMouseleave = this.handleFastForwardMouseleave;
               break;
             case "fast-backward":
-              const fastBackwardNode = showFastBackward ? /* @__PURE__ */ vue.h(NBaseIcon, {
+              const fastBackwardNode = this.fastBackwardActive ? /* @__PURE__ */ vue.h(NBaseIcon, {
                 clsPrefix: mergedClsPrefix
               }, {
                 default: () => this.rtlEnabled ? /* @__PURE__ */ vue.h(FastForwardIcon, null) : /* @__PURE__ */ vue.h(FastBackwardIcon, null)
@@ -54328,26 +54943,72 @@
                 contentNode = renderLabel({
                   type: "fast-backward",
                   node: fastBackwardNode,
-                  active: showFastBackward
+                  active: this.fastBackwardActive || this.showFastBackwardMenu
                 });
               } else {
                 contentNode = fastBackwardNode;
               }
+              onMouseenter = this.handleFastBackwardMouseenter;
+              onMouseleave = this.handleFastBackwardMouseleave;
               break;
           }
-          return /* @__PURE__ */ vue.h("div", {
+          const itemNode = /* @__PURE__ */ vue.h("div", {
             key: index,
             class: [
               `${mergedClsPrefix}-pagination-item`,
-              {
-                [`${mergedClsPrefix}-pagination-item--active`]: pageItem.active,
-                [`${mergedClsPrefix}-pagination-item--disabled`]: disabled
-              }
+              pageItem.active && `${mergedClsPrefix}-pagination-item--active`,
+              type !== "page" && (type === "fast-backward" && this.showFastBackwardMenu || type === "fast-forward" && this.showFastForwardMenu) && `${mergedClsPrefix}-pagination-item--hover`,
+              disabled && `${mergedClsPrefix}-pagination-item--disabled`,
+              type === "page" && `${mergedClsPrefix}-pagination-item--clickable`
             ],
             onClick: () => handlePageItemClick(pageItem),
-            onMouseenter: () => handlePageItemMouseEnter(pageItem),
-            onMouseleave: () => handlePageItemMouseLeave(pageItem)
+            onMouseenter,
+            onMouseleave
           }, contentNode);
+          if (type === "page" && !pageItem.mayBeFastBackward && !pageItem.mayBeFastForward) {
+            return itemNode;
+          } else {
+            const key = pageItem.type === "page" ? pageItem.mayBeFastBackward ? "fast-backward" : "fast-forward" : pageItem.type;
+            return /* @__PURE__ */ vue.h(NPopselect, {
+              key,
+              trigger: "hover",
+              virtualScroll: true,
+              style: { width: "60px" },
+              theme: mergedTheme.peers.Popselect,
+              themeOverrides: mergedTheme.peerOverrides.Popselect,
+              builtinThemeOverrides: {
+                peers: {
+                  InternalSelectMenu: {
+                    height: "calc(var(--n-option-height) * 4.6)"
+                  }
+                }
+              },
+              nodeProps: () => ({
+                style: {
+                  justifyContent: "center"
+                }
+              }),
+              show: type === "page" ? false : type === "fast-backward" ? this.showFastBackwardMenu : this.showFastForwardMenu,
+              onUpdateShow: (value) => {
+                if (type === "page")
+                  return;
+                if (value) {
+                  if (type === "fast-backward") {
+                    this.showFastBackwardMenu = value;
+                  } else {
+                    this.showFastForwardMenu = value;
+                  }
+                } else {
+                  this.showFastBackwardMenu = false;
+                  this.showFastForwardMenu = false;
+                }
+              },
+              options: pageItem.type !== "page" ? pageItem.options : [],
+              onUpdateValue: this.handleMenuSelect,
+              scrollable: true,
+              internalShowCheckmark: false
+            }, { default: () => itemNode });
+          }
         }), /* @__PURE__ */ vue.h("div", {
           class: [
             `${mergedClsPrefix}-pagination-item`,
@@ -54431,7 +55092,7 @@
 
     };
 
-    const self$M = vars => {
+    const self$L = vars => {
       const {
         borderRadius,
         boxShadow2,
@@ -54451,7 +55112,7 @@
       peers: {
         Popover: popoverLight
       },
-      self: self$M
+      self: self$L
     });
 
     const ellipsisDark = {
@@ -54540,7 +55201,7 @@
 
     };
 
-    const self$L = vars => {
+    const self$K = vars => {
       const {
         borderColor,
         primaryColor,
@@ -54600,7 +55261,7 @@
     const radioLight = {
       name: "Radio",
       common: derived,
-      self: self$L
+      self: self$K
     };
 
     var rtlStyle$6 = c$1([cB("radio", [cM("rtl", `
@@ -54643,7 +55304,7 @@
       actionButtonMargin: "0 8px 0 0"
     };
 
-    const self$K = vars => {
+    const self$J = vars => {
       const {
         cardColor,
         modalColor,
@@ -54716,7 +55377,7 @@
         Popover: popoverLight,
         Ellipsis: ellipsisLight
       },
-      self: self$K
+      self: self$J
     });
 
     const dataTableDark = {
@@ -54734,7 +55395,7 @@
       },
 
       self(vars) {
-        const commonSelf = self$K(vars);
+        const commonSelf = self$J(vars);
         commonSelf.boxShadowAfter = "inset 12px 0 8px -12px rgba(0, 0, 0, .36)";
         commonSelf.boxShadowBefore = "inset -12px 0 8px -12px rgba(0, 0, 0, .36)";
         return commonSelf;
@@ -54788,7 +55449,7 @@
 
     });
 
-    var style$Y = cB("ellipsis", {
+    var style$X = cB("ellipsis", {
       overflow: "hidden"
     }, [cNotM("line-clamp", `
     white-space: nowrap;
@@ -54823,7 +55484,7 @@
       props: ellipsisProps,
       setup(props, { slots, attrs }) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const mergedTheme = useTheme("Ellipsis", "-ellipsis", style$Y, ellipsisLight, props, mergedClsPrefixRef);
+        const mergedTheme = useTheme("Ellipsis", "-ellipsis", style$X, ellipsisLight, props, mergedClsPrefixRef);
         const triggerRef = vue.ref(null);
         const triggerInnerRef = vue.ref(null);
         const tooltipRef = vue.ref(null);
@@ -55213,7 +55874,7 @@
 
     setup.props = radioProps;
 
-    var style$X = cB("radio", `
+    var style$W = cB("radio", `
   line-height: var(--n-label-line-height);
   outline: none;
   position: relative;
@@ -55306,7 +55967,7 @@
       },
       setup(props) {
         const radio = setup(props);
-        const themeRef = useTheme("Radio", "-radio", style$X, radioLight, props, radio.mergedClsPrefix);
+        const themeRef = useTheme("Radio", "-radio", style$W, radioLight, props, radio.mergedClsPrefix);
         const cssVarsRef = vue.computed(() => {
           const {
             mergedSize: { value: size }
@@ -55404,7 +56065,7 @@
       }
     });
 
-    var style$W = cB("radio-group", `
+    var style$V = cB("radio-group", `
   display: inline-block;
   font-size: var(--n-font-size);
 `, [cE("splitor", `
@@ -55575,7 +56236,7 @@
           nTriggerFormFocus
         } = useFormItem(props);
         const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
-        const themeRef = useTheme("Radio", "-radio-group", style$W, radioLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Radio", "-radio-group", style$V, radioLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = vue.ref(props.defaultValue);
         const controlledValueRef = vue.toRef(props, "value");
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
@@ -55726,11 +56387,17 @@
       }
     });
 
-    const selectionColWidth = 40;
-    const expandColWidth = 40;
+    const SELECTION_COL_WIDTH = 40;
+    const EXPAND_COL_WIDTH = 40;
     function getNumberColWidth(col) {
-      if (col.type === "selection") return selectionColWidth;
-      if (col.type === "expand") return expandColWidth;
+      if (col.type === "selection") {
+        return col.width === void 0 ? SELECTION_COL_WIDTH : depx(col.width);
+      }
+
+      if (col.type === "expand") {
+        return col.width === void 0 ? EXPAND_COL_WIDTH : depx(col.width);
+      }
+
       if ("children" in col) return void 0;
 
       if (typeof col.width === "string") {
@@ -55741,11 +56408,11 @@
     }
     function getStringColWidth(col) {
       if (col.type === "selection") {
-        return formatLength(col.width ?? selectionColWidth);
+        return formatLength(col.width ?? SELECTION_COL_WIDTH);
       }
 
       if (col.type === "expand") {
-        return formatLength(col.width ?? expandColWidth);
+        return formatLength(col.width ?? EXPAND_COL_WIDTH);
       }
 
       if ("children" in col) {
@@ -56124,7 +56791,7 @@
       optionIconPrefixWidthHuge: "40px"
     };
 
-    const self$J = vars => {
+    const self$I = vars => {
       const {
         primaryColor,
         textColor2,
@@ -56187,7 +56854,7 @@
       peers: {
         Popover: popoverLight
       },
-      self: self$J
+      self: self$I
     });
 
     const dropdownDark = {
@@ -56203,7 +56870,7 @@
           primaryColor,
           popoverColor
         } = vars;
-        const commonSelf = self$J(vars);
+        const commonSelf = self$I(vars);
         commonSelf.colorInverted = popoverColor;
         commonSelf.optionColorActive = changeColor(primaryColor, {
           alpha: 0.15
@@ -56230,7 +56897,7 @@
       }
     });
 
-    const self$I = vars => {
+    const self$H = vars => {
       const {
         textColorBase,
         opacity1,
@@ -56251,16 +56918,16 @@
     const iconLight = {
       name: "Icon",
       common: derived,
-      self: self$I
+      self: self$H
     };
 
     const iconDark$1 = {
       name: "Icon",
       common: derived$1,
-      self: self$I
+      self: self$H
     };
 
-    var style$V = cB("icon", `
+    var style$U = cB("icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -56298,7 +56965,7 @@
           mergedClsPrefixRef,
           inlineThemeDisabled
         } = useConfig(props);
-        const themeRef = useTheme("Icon", "-icon", style$V, iconLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Icon", "-icon", style$U, iconLight, props, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const {
             depth
@@ -56859,7 +57526,7 @@
       }
     });
 
-    var style$U = cB("dropdown-menu", `
+    var style$T = cB("dropdown-menu", `
   transform-origin: inherit;
   padding: var(--n-padding);
   background-color: var(--n-color);
@@ -57080,7 +57747,7 @@
           }
         }, keyboardEnabledRef);
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme("Dropdown", "-dropdown", style$U, dropdownLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Dropdown", "-dropdown", style$T, dropdownLight, props, mergedClsPrefixRef);
         vue.provide(dropdownInjectionKey, {
           labelFieldRef: vue.toRef(props, "labelField"),
           childrenFieldRef: vue.toRef(props, "childrenField"),
@@ -57426,6 +58093,9 @@
         function handleMouseenter() {
           scrollPartRef.value = "head";
         }
+        function handleMouseleave() {
+          scrollPartRef.value = "body";
+        }
         return {
           componentId,
           mergedSortState: mergedSortStateRef,
@@ -57443,6 +58113,7 @@
           mergedTableLayout: mergedTableLayoutRef,
           headerCheckboxDisabled: headerCheckboxDisabledRef,
           handleMouseenter,
+          handleMouseleave,
           handleCheckboxUpdateChecked,
           handleColHeaderClick,
           handleTableHeaderScroll
@@ -57532,11 +58203,17 @@
         if (!discrete) {
           return theadVNode;
         }
-        const { handleTableHeaderScroll, handleMouseenter, scrollX } = this;
+        const {
+          handleTableHeaderScroll,
+          handleMouseenter,
+          handleMouseleave,
+          scrollX
+        } = this;
         return /* @__PURE__ */ vue.h("div", {
           class: `${mergedClsPrefix}-data-table-base-table-header`,
           onScroll: handleTableHeaderScroll,
-          onMouseenter: handleMouseenter
+          onMouseenter: handleMouseenter,
+          onMouseleave: handleMouseleave
         }, /* @__PURE__ */ vue.h("table", {
           ref: "body",
           class: `${mergedClsPrefix}-data-table-table`,
@@ -57893,7 +58570,14 @@
           scrollbarInstRef.value?.sync();
         }
         const exposedMethods = {
-          getScrollContainer
+          getScrollContainer,
+          scrollTo(arg0, arg1) {
+            if (virtualScrollRef.value) {
+              virtualListRef.value?.scrollTo(arg0, arg1);
+            } else {
+              scrollbarInstRef.value?.scrollTo(arg0, arg1);
+            }
+          }
         };
         const style = c$1([
           ({ props: cProps }) => {
@@ -58254,7 +58938,7 @@
                   rowKey,
                   disabled: rowInfo.tmNode.disabled,
                   onUpdateChecked: (checked, e) => handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey)
-                }) : null : column.type === "expand" ? !isSummary ? !column.expandable || column.expandable?.(rowData, rowIndex) ? /* @__PURE__ */ vue.h(ExpandTrigger, {
+                }) : null : column.type === "expand" ? !isSummary ? !column.expandable || column.expandable?.(rowData) ? /* @__PURE__ */ vue.h(ExpandTrigger, {
                   clsPrefix: mergedClsPrefix,
                   expanded,
                   onClick: () => handleUpdateExpanded(rowKey, null)
@@ -58385,7 +59069,10 @@
         }
         const exposedMethods = {
           getBodyElement,
-          getHeaderElement
+          getHeaderElement,
+          scrollTo(arg0, arg1) {
+            bodyInstRef.value?.scrollTo(arg0, arg1);
+          }
         };
         vue.watchEffect(() => {
           const { value: selfEl } = selfElRef;
@@ -59486,7 +60173,7 @@
       };
     }
 
-    function useExpand(props) {
+    function useExpand(props, treeMateRef) {
       const renderExpandRef = useMemo(() => {
         for (const col of props.columns) {
           if (col.type === "expand") {
@@ -59498,7 +60185,24 @@
           }
         }
       });
-      const uncontrolledExpandedRowKeysRef = vue.ref(props.defaultExpandedRowKeys);
+      let expandable;
+
+      for (const col of props.columns) {
+        if (col.type === "expand") {
+          expandable = col.expandable;
+          break;
+        }
+      }
+
+      const uncontrolledExpandedRowKeysRef = vue.ref(props.defaultExpandAll ? renderExpandRef?.value ? (() => {
+        const expandedKeys = [];
+        treeMateRef.value.treeNodes.forEach(tmNode => {
+          if (expandable?.(tmNode.rawNode)) {
+            expandedKeys.push(tmNode.key);
+          }
+        });
+        return expandedKeys;
+      })() : treeMateRef.value.getNonLeafKeys() : props.defaultExpandedRowKeys);
       const controlledExpandedRowKeysRef = vue.toRef(props, "expandedRowKeys");
       const mergedExpandedRowKeysRef = useMergedState(controlledExpandedRowKeysRef, uncontrolledExpandedRowKeysRef);
 
@@ -59527,7 +60231,7 @@
     }
 
     const fixedColumnStyle = createFixedColumnStyle();
-    var style$T = c$1([cB("data-table", `
+    var style$S = c$1([cB("data-table", `
     width: 100%;
     font-size: var(--n-font-size);
     display: flex;
@@ -59906,6 +60610,7 @@
         type: Array,
         default: []
       },
+      defaultExpandAll: Boolean,
       expandedRowKeys: Array,
       virtualScroll: Boolean,
       tableLayout: {
@@ -59983,7 +60688,7 @@
             return bottomBordered;
           return true;
         });
-        const themeRef = useTheme("DataTable", "-data-table", style$T, dataTableLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("DataTable", "-data-table", style$S, dataTableLight, props, mergedClsPrefixRef);
         const bodyWidthRef = vue.ref(null);
         const scrollPartRef = vue.ref("body");
         vue.onDeactivated(() => {
@@ -60032,7 +60737,7 @@
           mergedExpandedRowKeysRef,
           renderExpandRef,
           doUpdateExpandedRowKeys
-        } = useExpand(props);
+        } = useExpand(props, treeMateRef);
         const {
           handleTableBodyScroll,
           handleTableHeaderScroll,
@@ -60141,7 +60846,10 @@
           clearSorter,
           page,
           sort,
-          clearFilter
+          clearFilter,
+          scrollTo: (arg0, arg1) => {
+            mainTableInstRef.value?.scrollTo(arg0, arg1);
+          }
         };
         const cssVarsRef = vue.computed(() => {
           const { size } = props;
@@ -60305,7 +61013,7 @@
       panelActionPadding: "8px 0"
     };
 
-    const self$H = vars => {
+    const self$G = vars => {
       const {
         popoverColor,
         textColor2,
@@ -60340,7 +61048,7 @@
         Button: buttonLight,
         Input: inputLight
       },
-      self: self$H
+      self: self$G
     });
 
     const timePickerDark = {
@@ -60351,7 +61059,7 @@
         Button: buttonDark,
         Input: inputDark
       },
-      self: self$H
+      self: self$G
     };
 
     var commonVars$6 = {
@@ -60386,7 +61094,7 @@
       calendarRightPaddingMonthrange: "0"
     };
 
-    const self$G = vars => {
+    const self$F = vars => {
       const {
         hoverColor,
         fontSize,
@@ -60445,7 +61153,7 @@
         TimePicker: timePickerLight,
         Scrollbar: scrollbarLight
       },
-      self: self$G
+      self: self$F
     });
 
     const datePickerDark = {
@@ -60464,7 +61172,7 @@
           hoverColor,
           primaryColor
         } = vars;
-        const commonSelf = self$G(vars);
+        const commonSelf = self$F(vars);
         commonSelf.itemColorDisabled = composite(popoverColor, hoverColor);
         commonSelf.itemColorIncluded = changeColor(primaryColor, {
           alpha: 0.15
@@ -65647,7 +66355,7 @@
       }
     });
 
-    var style$S = c$1([cB("time-picker", `
+    var style$R = c$1([cB("time-picker", `
     z-index: auto;
     position: relative;
   `, [cB("time-picker-icon", `
@@ -65832,7 +66540,7 @@
         const { localeRef, dateLocaleRef } = useLocale("TimePicker");
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
-        const themeRef = useTheme("TimePicker", "-time-picker", style$S, timePickerLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("TimePicker", "-time-picker", style$R, timePickerLight, props, mergedClsPrefixRef);
         const keyboardState = useKeyboard$1();
         const inputInstRef = vue.ref(null);
         const panelInstRef = vue.ref(null);
@@ -66039,12 +66747,20 @@
             returnFocus: true
           });
         }
-        function handleMenuKeyDown(e) {
+        function handleInputKeydown(e) {
+          if (e.key === "Escape" && mergedShowRef.value) {
+            markEventEffectPerformed(e);
+          }
+        }
+        function handleMenuKeydown(e) {
           switch (e.key) {
             case "Escape":
-              closePanel({
-                returnFocus: true
-              });
+              if (mergedShowRef.value) {
+                markEventEffectPerformed(e);
+                closePanel({
+                  returnFocus: true
+                });
+              }
               break;
             case "Tab":
               if (keyboardState.shift && e.target === panelInstRef.value?.$el) {
@@ -66365,6 +67081,7 @@
           minuteValue: minuteValueRef,
           secondValue: secondValueRef,
           amPmValue: amPmValueRef,
+          handleInputKeydown,
           handleTimeInputFocus,
           handleTimeInputBlur,
           handleNowClick,
@@ -66381,7 +67098,7 @@
           handleAmPmClick,
           handleTimeInputClear,
           handleFocusDetectorFocus,
-          handleMenuKeyDown,
+          handleMenuKeydown,
           handleTriggerClick,
           mergedTheme: themeRef,
           triggerCssVars: inlineThemeDisabled ? void 0 : triggerCssVarsRef,
@@ -66425,7 +67142,8 @@
                 internalDeactivateOnEnter: true,
                 internalForceFocus: this.mergedShow,
                 readonly: this.inputReadonly || this.mergedDisabled,
-                onClick: this.handleTriggerClick
+                onClick: this.handleTriggerClick,
+                onKeydown: this.handleInputKeydown
               }, this.showIcon ? {
                 [this.clearable ? "clear-icon-placeholder" : "suffix"]: () => /* @__PURE__ */ vue.h(NBaseIcon, {
                   clsPrefix: mergedClsPrefix,
@@ -66476,7 +67194,7 @@
                       confirmText: this.localizedPositiveText,
                       use12Hours: this.use12Hours,
                       onFocusout: this.handleMenuFocusOut,
-                      onKeydown: this.handleMenuKeyDown,
+                      onKeydown: this.handleMenuKeydown,
                       onHourClick: this.handleHourClick,
                       onMinuteClick: this.handleMinuteClick,
                       onSecondClick: this.handleSecondClick,
@@ -67088,6 +67806,7 @@
               return `Q ${item.dateObject.quarter}`;
           }
         };
+        const { useAsQuickJump } = props;
         const renderItem = (item, i, mergedClsPrefix) => {
           const { mergedIsDateDisabled, handleDateClick, handleQuickMonthClick } = useCalendarRef;
           return /* @__PURE__ */ vue.h("div", {
@@ -67098,11 +67817,11 @@
               {
                 [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`]: item.isCurrent,
                 [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`]: item.selected,
-                [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]: mergedIsDateDisabled(item.ts)
+                [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]: !useAsQuickJump && mergedIsDateDisabled(item.ts)
               }
             ],
             onClick: () => {
-              props.useAsQuickJump ? handleQuickMonthClick(item, (value) => props.onUpdateValue(value, false)) : handleDateClick(item);
+              useAsQuickJump ? handleQuickMonthClick(item, (value) => props.onUpdateValue(value, false)) : handleDateClick(item);
             }
           }, getRenderContent(item));
         };
@@ -68901,7 +69620,7 @@
       }
     });
 
-    var style$R = c$1([cB("date-picker", `
+    var style$Q = c$1([cB("date-picker", `
     position: relative;
     z-index: auto;
   `, [cB("date-picker-icon", `
@@ -69351,7 +70070,7 @@
         const singleInputValueRef = vue.ref("");
         const rangeStartInputValueRef = vue.ref("");
         const rangeEndInputValueRef = vue.ref("");
-        const themeRef = useTheme("DatePicker", "-date-picker", style$R, datePickerLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("DatePicker", "-date-picker", style$Q, datePickerLight, props, mergedClsPrefixRef);
         const timePickerSizeRef = vue.computed(() => {
           return mergedComponentPropsRef?.value?.DatePicker?.timePickerSize || "small";
         });
@@ -69529,11 +70248,19 @@
             call(onUpdateShow, show);
           uncontrolledShowRef.value = show;
         }
-        function handleKeyDown(e) {
+        function handleKeydown(e) {
           if (e.key === "Escape") {
-            closeCalendar({
-              returnFocus: true
-            });
+            if (mergedShowRef.value) {
+              markEventEffectPerformed(e);
+              closeCalendar({
+                returnFocus: true
+              });
+            }
+          }
+        }
+        function handleInputKeydown(e) {
+          if (e.key === "Escape" && mergedShowRef.value) {
+            markEventEffectPerformed(e);
           }
         }
         function handleClear() {
@@ -69857,8 +70584,9 @@
           isValueInvalid: uniVaidation.isValueInvalidRef,
           isStartValueInvalid: dualValidation.isStartValueInvalidRef,
           isEndValueInvalid: dualValidation.isEndValueInvalidRef,
+          handleInputKeydown,
           handleClickOutside,
-          handleKeyDown,
+          handleKeydown,
           handleClear,
           handlePanelClear,
           handleTriggerClick,
@@ -69889,7 +70617,7 @@
           onTabOut: this.handlePanelTabOut,
           onClose: this.handlePanelClose,
           onClear: this.handlePanelClear,
-          onKeydown: this.handleKeyDown,
+          onKeydown: this.handleKeydown,
           onConfirm: this.handlePanelConfirm,
           ref: "panelInstRef",
           value: this.pendingValue,
@@ -69940,6 +70668,7 @@
           clearable,
           onClear: this.handleClear,
           onClick: this.handleTriggerClick,
+          onKeydown: this.handleInputKeydown,
           onActivate: this.handleInputActivate,
           onDeactivate: this.handleInputDeactivate,
           onFocus: this.handleInputFocus,
@@ -69954,7 +70683,7 @@
             this.triggerThemeClass
           ],
           style: this.triggerCssVars,
-          onKeydown: this.handleKeyDown
+          onKeydown: this.handleKeydown
         }, /* @__PURE__ */ vue.h(Binder, null, {
           default: () => [
             /* @__PURE__ */ vue.h(VTarget, null, {
@@ -70062,7 +70791,7 @@
       tdPaddingLarge: "0 0 16px 0"
     };
 
-    const self$F = vars => {
+    const self$E = vars => {
       const {
         tableHeaderColor,
         textColor2,
@@ -70102,13 +70831,13 @@
     const descriptionsLight = {
       name: "Descriptions",
       common: derived,
-      self: self$F
+      self: self$E
     };
 
     const descriptionsDark = {
       name: "Descriptions",
       common: derived$1,
-      self: self$F
+      self: self$E
     };
 
     const DESCRIPTION_ITEM_FLAG = Symbol("DESCRIPTION_ITEM_FLAG");
@@ -70120,7 +70849,7 @@
       return false;
     }
 
-    var style$Q = c$1([cB("descriptions", {
+    var style$P = c$1([cB("descriptions", {
       fontSize: "var(--n-font-size)"
     }, [cB("descriptions-separator", `
       display: inline-block;
@@ -70252,7 +70981,7 @@
       props: descriptionProps,
       setup(props) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme("Descriptions", "-descriptions", style$Q, descriptionsLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Descriptions", "-descriptions", style$P, descriptionsLight, props, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const { size, bordered } = props;
           const {
@@ -70469,7 +71198,7 @@
       closeMarginIconTop: "10px 16px 0 0"
     };
 
-    const self$E = vars => {
+    const self$D = vars => {
       const {
         textColor1,
         textColor2,
@@ -70518,7 +71247,7 @@
       peers: {
         Button: buttonLight
       },
-      self: self$E
+      self: self$D
     });
 
     const dialogDark = {
@@ -70527,7 +71256,7 @@
       peers: {
         Button: buttonDark
       },
-      self: self$E
+      self: self$D
     };
 
     const dialogProps = {
@@ -70560,7 +71289,7 @@
     };
     const dialogPropKeys = keysOf(dialogProps);
 
-    var style$P = c$1([cB("dialog", `
+    var style$O = c$1([cB("dialog", `
     word-break: break-word;
     line-height: var(--n-line-height);
     position: relative;
@@ -70670,7 +71399,7 @@
           if (onClose)
             onClose();
         }
-        const themeRef = useTheme("Dialog", "-dialog", style$P, dialogLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Dialog", "-dialog", style$O, dialogLight, props, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const { type } = props;
           const iconPlacement = mergedIconPlacementRef.value;
@@ -70828,7 +71557,7 @@
     const dialogProviderInjectionKey = createInjectionKey("n-dialog-provider");
     const dialogApiInjectionKey = createInjectionKey("n-dialog-api");
 
-    const self$D = vars => {
+    const self$C = vars => {
       const {
         modalColor,
         textColor2,
@@ -70848,7 +71577,7 @@
         Dialog: dialogLight,
         Card: cardLight
       },
-      self: self$D
+      self: self$C
     });
 
     const modalDark = {
@@ -70859,7 +71588,7 @@
         Dialog: dialogDark,
         Card: cardDark
       },
-      self: self$D
+      self: self$C
     };
 
     const presetProps = { ...cardBaseProps,
@@ -71114,7 +71843,7 @@
       }
     });
 
-    var style$O = c$1([cB("modal-container", `
+    var style$N = c$1([cB("modal-container", `
     position: fixed;
     left: 0;
     top: 0;
@@ -71231,7 +71960,7 @@
         }
         const containerRef = vue.ref(null);
         const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme("Modal", "-modal", style$O, modalLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Modal", "-modal", style$N, modalLight, props, mergedClsPrefixRef);
         const clickedRef = useClicked(64);
         const clickedPositionRef = useClickPosition();
         const isMountedRef = isMounted();
@@ -71309,7 +72038,7 @@
         }
         function handleEsc(e) {
           props.onEsc?.();
-          if (props.closeOnEsc) {
+          if (props.show && props.closeOnEsc && eventEffectNotPerformed(e)) {
             !isComposingRef.value && doUpdateShow(false);
           }
         }
@@ -71652,7 +72381,7 @@
       return dialog;
     }
 
-    const self$C = vars => {
+    const self$B = vars => {
       const {
         textColor1,
         dividerColor,
@@ -71667,16 +72396,16 @@
     const dividerLight = {
       name: "Divider",
       common: derived,
-      self: self$C
+      self: self$B
     };
 
     const dividerDark = {
       name: "Divider",
       common: derived$1,
-      self: self$C
+      self: self$B
     };
 
-    var style$N = cB("divider", `
+    var style$M = cB("divider", `
   position: relative;
   display: flex;
   width: 100%;
@@ -71743,7 +72472,7 @@
       props: dividerProps,
       setup(props) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme("Divider", "-divider", style$N, dividerLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Divider", "-divider", style$M, dividerLight, props, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const {
             common: { cubicBezierEaseInOut },
@@ -71797,7 +72526,7 @@
       }
     });
 
-    const self$B = vars => {
+    const self$A = vars => {
       const {
         modalColor,
         textColor1,
@@ -71842,7 +72571,7 @@
       peers: {
         Scrollbar: scrollbarLight
       },
-      self: self$B
+      self: self$A
     });
 
     const drawerDark = {
@@ -71851,7 +72580,7 @@
       peers: {
         Scrollbar: scrollbarDark
       },
-      self: self$B
+      self: self$A
     };
 
     var NDrawerBodyWrapper = vue.defineComponent({
@@ -72089,7 +72818,7 @@
       })];
     }
 
-    var style$M = c$1([cB("drawer", `
+    var style$L = c$1([cB("drawer", `
     word-break: break-word;
     line-height: var(--n-line-height);
     position: absolute;
@@ -72275,7 +73004,7 @@
         }
         const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const isMountedRef = isMounted();
-        const themeRef = useTheme("Drawer", "-drawer", style$M, drawerLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Drawer", "-drawer", style$L, drawerLight, props, mergedClsPrefixRef);
         const styleWidthRef = vue.computed(() => {
           const { placement } = props;
           if (placement === "top" || placement === "bottom")
@@ -72308,9 +73037,9 @@
             onMaskClick(e);
         }
         const isComposingRef = useIsComposing();
-        function handleEsc() {
+        function handleEsc(e) {
           props.onEsc?.();
-          if (props.closeOnEsc) {
+          if (props.show && props.closeOnEsc && eventEffectNotPerformed(e)) {
             !isComposingRef.value && doUpdateShow(false);
           }
         }
@@ -72552,7 +73281,7 @@
 
     };
 
-    const self$A = () => {
+    const self$z = () => {
       return commonVariables$5;
     };
 
@@ -72563,7 +73292,7 @@
         Input: inputLight,
         Button: buttonLight
       },
-      self: self$A
+      self: self$z
     });
 
     var rtlStyle$5 = cB("dynamic-input", [cM("rtl", `
@@ -72733,7 +73462,7 @@
       }
     });
 
-    var style$L = cB("dynamic-input", {
+    var style$K = cB("dynamic-input", {
       width: "100%"
     }, [cB("dynamic-input-item", `
     margin-bottom: 10px;
@@ -72830,7 +73559,7 @@
         const uncontrolledValueRef = vue.ref(props.defaultValue);
         const controlledValueRef = vue.toRef(props, "value");
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
-        const themeRef = useTheme("DynamicInput", "-dynamic-input", style$L, dynamicInputLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("DynamicInput", "-dynamic-input", style$K, dynamicInputLight, props, mergedClsPrefixRef);
         const insertionDisabledRef = vue.computed(() => {
           const { value: mergedValue } = mergedValueRef;
           if (Array.isArray(mergedValue)) {
@@ -73130,13 +73859,13 @@
 
     };
 
-    const self$z = () => {
+    const self$y = () => {
       return commonVars$4;
     };
 
     const spaceLight = {
       name: "Space",
-      self: self$z
+      self: self$y
     };
 
     var rtlStyle$2 = cB("space", [cM("rtl", `
@@ -73322,7 +74051,7 @@
 
     });
 
-    var style$K = cB("dynamic-tags", [cB("input", {
+    var style$J = cB("dynamic-tags", [cB("input", {
       minWidth: "var(--n-input-width)"
     })]);
 
@@ -73374,7 +74103,7 @@
         const showInputRef = vue.ref(false);
         const inputForceFocusedRef = vue.ref(true);
         const inputInstRef = vue.ref(null);
-        const themeRef = useTheme("DynamicTags", "-dynamic-tags", style$K, dynamicTagsLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("DynamicTags", "-dynamic-tags", style$J, dynamicTagsLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = vue.ref(props.defaultValue);
         const controlledValueRef = vue.toRef(props, "value");
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
@@ -73419,7 +74148,7 @@
           const nextValue = externalValue ?? inputValueRef.value;
           if (nextValue) {
             const tags = mergedValueRef.value.slice(0);
-            tags.push(nextValue);
+            tags.push(props.onCreate(nextValue));
             doChange(tags);
           }
           showInputRef.value = false;
@@ -73641,7 +74370,7 @@
       labelTextAlignHorizontal: "right"
     };
 
-    const self$y = vars => {
+    const self$x = vars => {
       const {
         heightSmall,
         heightMedium,
@@ -73667,16 +74396,16 @@
     const formLight = {
       name: "Form",
       common: derived,
-      self: self$y
+      self: self$x
     };
 
     const formItemDark = {
       name: "Form",
       common: derived$1,
-      self: self$y
+      self: self$x
     };
 
-    var style$J = cB("form", [cM("inline", `
+    var style$I = cB("form", [cM("inline", `
     width: 100%;
     display: inline-flex;
     align-items: flex-start;
@@ -73732,7 +74461,7 @@
       props: formProps,
       setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useTheme("Form", "-form", style$J, formLight, props, mergedClsPrefixRef);
+        useTheme("Form", "-form", style$I, formLight, props, mergedClsPrefixRef);
         const formItems = {};
         const maxChildLabelWidthRef = vue.ref(void 0);
         const deriveMaxChildLabelWidth = (currentWidth) => {
@@ -75276,7 +76005,7 @@
       })];
     }
 
-    var style$I = cB("form-item", {
+    var style$H = cB("form-item", {
       display: "grid",
       lineHeight: "var(--n-line-height)"
     }, [cB("form-item-label", `
@@ -75425,7 +76154,7 @@
         const renderExplainsRef = vue.ref([]);
         const feedbackIdRef = vue.ref(createId());
         const mergedDisabledRef = NForm ? vue.toRef(NForm.props, "disabled") : vue.ref(false);
-        const themeRef = useTheme("Form", "-form-item", style$I, formLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Form", "-form-item", style$H, formLight, props, mergedClsPrefixRef);
         vue.watch(vue.toRef(props, "path"), () => {
           if (props.ignorePathChange)
             return;
@@ -75850,7 +76579,7 @@
         right: percent
       })];
     });
-    var style$H = c$1([cB("row", {
+    var style$G = c$1([cB("row", {
       width: "100%",
       display: "flex",
       flexWrap: "wrap"
@@ -75882,7 +76611,7 @@
       props: rowProps,
       setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useStyle("-legacy-grid", style$H, mergedClsPrefixRef);
+        useStyle("-legacy-grid", style$G, mergedClsPrefixRef);
         const verticalGutterRef = useMemo(() => {
           const { gutter } = props;
           if (Array.isArray(gutter)) {
@@ -76192,7 +76921,7 @@
 
     };
 
-    const self$x = vars => {
+    const self$w = vars => {
       const {
         primaryColor,
         successColor,
@@ -76230,10 +76959,10 @@
     const gradientTextLight = {
       name: "GradientText",
       common: derived,
-      self: self$x
+      self: self$w
     };
 
-    var style$G = cB("gradient-text", `
+    var style$F = cB("gradient-text", `
   display: inline-block;
   font-weight: var(--n-font-weight);
   -webkit-background-clip: text;
@@ -76287,7 +77016,7 @@
           }
           return void 0;
         });
-        const themeRef = useTheme("GradientText", "-gradient-text", style$G, gradientTextLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("GradientText", "-gradient-text", style$F, gradientTextLight, props, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const { value: type } = compatibleTypeRef;
           const {
@@ -76523,7 +77252,7 @@
       }
     });
 
-    const self$w = vars => {
+    const self$v = vars => {
       const {
         primaryColor,
         baseColor
@@ -76536,16 +77265,16 @@
     const iconWrapperLight = {
       name: "IconWrapper",
       common: derived,
-      self: self$w
+      self: self$v
     };
 
     const iconDark = {
       name: "IconWrapper",
       common: derived$1,
-      self: self$w
+      self: self$v
     };
 
-    var style$F = cB("icon-wrapper", `
+    var style$E = cB("icon-wrapper", `
   transition:
     color .3s var(--n-bezier),
     background-color .3s var(--n-bezier);
@@ -76573,7 +77302,7 @@
       name: "IconWrapper",
       props: iconWrapperProps,
       setup(props, { slots }) {
-        const themeRef = useTheme("IconWrapper", "-icon-wrapper", style$F, iconWrapperLight, props);
+        const themeRef = useTheme("IconWrapper", "-icon-wrapper", style$E, iconWrapperLight, props);
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const cssVarsRef = vue.computed(() => {
           const {
@@ -76610,7 +77339,7 @@
       }
     });
 
-    function self$v() {
+    function self$u() {
       return {
         toolbarIconColor: "rgba(255, 255, 255, .9)",
         toolbarColor: "rgba(0, 0, 0, .35)",
@@ -76625,7 +77354,7 @@
       peers: {
         Tooltip: tooltipLight
       },
-      self: self$v
+      self: self$u
     });
 
     const buttonGroupDark = {
@@ -76657,7 +77386,7 @@
 
     };
 
-    const self$u = vars => {
+    const self$t = vars => {
       const {
         textColorDisabled
       } = vars;
@@ -76673,7 +77402,7 @@
         Button: buttonLight,
         Input: inputLight
       },
-      self: self$u
+      self: self$t
     });
 
     const layoutDark = {
@@ -76722,7 +77451,7 @@
 
     };
 
-    const self$t = vars => {
+    const self$s = vars => {
       const {
         baseColor,
         textColor2,
@@ -76766,10 +77495,10 @@
       peers: {
         Scrollbar: scrollbarLight
       },
-      self: self$t
+      self: self$s
     });
 
-    const self$s = vars => {
+    const self$r = vars => {
       const {
         textColor2,
         cardColor,
@@ -76794,13 +77523,13 @@
     const listLight = {
       name: "List",
       common: derived,
-      self: self$s
+      self: self$r
     };
 
     const listDark$1 = {
       name: "List",
       common: derived$1,
-      self: self$s
+      self: self$r
     };
 
     const loadingBarDark = {
@@ -76820,7 +77549,7 @@
 
     };
 
-    const self$r = vars => {
+    const self$q = vars => {
       const {
         primaryColor,
         errorColor
@@ -76835,7 +77564,7 @@
     const loadingBarLight = {
       name: "LoadingBar",
       common: derived,
-      self: self$r
+      self: self$q
     };
 
     const logDark = {
@@ -76864,7 +77593,7 @@
 
     };
 
-    const self$q = vars => {
+    const self$p = vars => {
       const {
         textColor2,
         modalColor,
@@ -76888,7 +77617,7 @@
         Scrollbar: scrollbarLight,
         Code: codeLight
       },
-      self: self$q
+      self: self$p
     });
 
     const listDark = {
@@ -76910,7 +77639,7 @@
 
     };
 
-    const self$p = vars => {
+    const self$o = vars => {
       const {
         boxShadow2
       } = vars;
@@ -76926,7 +77655,7 @@
         InternalSelectMenu: internalSelectMenuLight,
         Input: inputLight
       },
-      self: self$p
+      self: self$o
     });
 
     function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -76969,7 +77698,7 @@
         groupTextColorInverted: groupTextColor
       };
     }
-    const self$o = vars => {
+    const self$n = vars => {
       const {
         borderRadius,
         textColor3,
@@ -77041,7 +77770,7 @@
         Tooltip: tooltipLight,
         Dropdown: dropdownLight
       },
-      self: self$o
+      self: self$n
     });
 
     const menuDark = {
@@ -77057,7 +77786,7 @@
           primaryColor,
           primaryColorSuppl
         } = vars;
-        const commonSelf = self$o(vars);
+        const commonSelf = self$n(vars);
         commonSelf.itemColorActive = changeColor(primaryColor, {
           alpha: 0.15
         });
@@ -77088,7 +77817,7 @@
       fontSize: "14px"
     };
 
-    const self$n = vars => {
+    const self$m = vars => {
       const {
         textColor2,
         closeIconColor,
@@ -77170,13 +77899,13 @@
     const messageLight = {
       name: "Message",
       common: derived,
-      self: self$n
+      self: self$m
     };
 
     const messageDark = {
       name: "Message",
       common: derived$1,
-      self: self$n
+      self: self$m
     };
 
     var commonVars$3 = {
@@ -77187,7 +77916,7 @@
       padding: "16px"
     };
 
-    const self$m = vars => {
+    const self$l = vars => {
       const {
         textColor2,
         successColor,
@@ -77238,7 +77967,7 @@
       peers: {
         Scrollbar: scrollbarLight
       },
-      self: self$m
+      self: self$l
     });
 
     const notificationDark = {
@@ -77247,7 +77976,7 @@
       peers: {
         Scrollbar: scrollbarDark
       },
-      self: self$m
+      self: self$l
     };
 
     var common = {
@@ -77255,7 +77984,7 @@
       backSize: "22px"
     };
 
-    function self$l(vars) {
+    function self$k(vars) {
       const {
         textColor1,
         textColor2,
@@ -77278,13 +78007,13 @@
     const pageHeaderLight = createTheme$1({
       name: "PageHeader",
       common: derived,
-      self: self$l
+      self: self$k
     });
 
     const pageHeaderDark = {
       name: "PageHeader",
       common: derived$1,
-      self: self$l
+      self: self$k
     };
 
     var rtlStyle$1 = cB("page-header-wrapper", [cM("rtl", [cB("page-header-header", `
@@ -77315,7 +78044,7 @@
       iconSize: "22px"
     };
 
-    const self$k = vars => {
+    const self$j = vars => {
       const {
         fontSize,
         warningColor
@@ -77332,7 +78061,7 @@
         Button: buttonLight,
         Popover: popoverLight
       },
-      self: self$k
+      self: self$j
     });
 
     const popconfirmDark = {
@@ -77342,35 +78071,8 @@
         Button: buttonDark,
         Popover: popoverDark
       },
-      self: self$k
-    };
-
-    const popselect = {
-      name: "Popselect",
-      common: derived$1,
-      peers: {
-        Popover: popoverDark,
-        InternalSelectMenu: internalSelectMenuDark
-      }
-    };
-
-    function self$j(vars) {
-      const {
-        boxShadow2
-      } = vars;
-      return {
-        menuBoxShadow: boxShadow2
-      };
-    }
-    const popselectLight = createTheme$1({
-      name: "Popselect",
-      common: derived,
-      peers: {
-        Popover: popoverLight,
-        InternalSelectMenu: internalSelectMenuLight
-      },
       self: self$j
-    });
+    };
 
     const self$i = vars => {
       const {
@@ -78601,7 +79303,7 @@
       showToolbarTooltip: Boolean
     };
 
-    var style$E = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
+    var style$D = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
     position: fixed;
     left: 0;
     right: 0;
@@ -78673,7 +79375,7 @@
         }
       },
       setup(props) {
-        const themeRef = useTheme("Image", "-image", style$E, imageLight, props, vue.toRef(props, "clsPrefix"));
+        const themeRef = useTheme("Image", "-image", style$D, imageLight, props, vue.toRef(props, "clsPrefix"));
         let thumbnailEl = null;
         const previewRef = vue.ref(null);
         const previewWrapperRef = vue.ref(null);
@@ -79303,7 +80005,7 @@
       }
     }
 
-    var style$D = c$1([cB("input-number-suffix", `
+    var style$C = c$1([cB("input-number-suffix", `
     display: inline-block;
     margin-right: 10px;
   `), cB("input-number-prefix", `
@@ -79383,7 +80085,7 @@
           });
         }
         const { mergedBorderedRef, mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
-        const themeRef = useTheme("InputNumber", "-input-number", style$D, inputNumberLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("InputNumber", "-input-number", style$C, inputNumberLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale("InputNumber");
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
@@ -79925,7 +80627,13 @@
       }
     });
 
-    var style$C = cB("layout", `
+    const layoutSiderInjectionKey = createInjectionKey("n-layout-sider");
+    const positionProp = {
+      type: String,
+      default: "static"
+    };
+
+    var style$B = cB("layout", `
   color: var(--n-text-color);
   background-color: var(--n-color);
   box-sizing: border-box;
@@ -79949,12 +80657,6 @@
     bottom: 0;
   `)]);
 
-    const layoutSiderInjectionKey = createInjectionKey("n-layout-sider");
-    const positionProp = {
-      type: String,
-      default: "static"
-    };
-
     const layoutProps = {
       embedded: Boolean,
       position: positionProp,
@@ -79986,7 +80688,7 @@
           const scrollableElRef = vue.ref(null);
           const scrollbarInstRef = vue.ref(null);
           const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-          const themeRef = useTheme("Layout", "-layout", style$C, layoutLight, props, mergedClsPrefixRef);
+          const themeRef = useTheme("Layout", "-layout", style$B, layoutLight, props, mergedClsPrefixRef);
           function scrollTo(options, y) {
             if (props.nativeScrollbar) {
               const { value: scrollableEl } = scrollableElRef;
@@ -80005,6 +80707,23 @@
             }
           }
           vue.provide(layoutInjectionKey, props);
+          let scrollX = 0;
+          let scrollY = 0;
+          const handleNativeElScroll = (e) => {
+            const target = e.target;
+            scrollX = target.scrollLeft;
+            scrollY = target.scrollTop;
+            props.onScroll?.(e);
+          };
+          useReactivated(() => {
+            if (props.nativeScrollbar) {
+              const el = scrollableElRef.value;
+              if (el) {
+                el.scrollTop = scrollY;
+                el.scrollLeft = scrollX;
+              }
+            }
+          });
           const hasSiderStyle = {
             display: "flex",
             flexWrap: "nowrap",
@@ -80032,6 +80751,7 @@
             scrollbarInstRef,
             hasSiderStyle,
             mergedTheme: themeRef,
+            handleNativeElScroll,
             cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
             themeClass: themeClassHandle?.themeClass,
             onRender: themeClassHandle?.onRender,
@@ -80055,7 +80775,7 @@
             ref: "scrollableElRef",
             class: `${mergedClsPrefix}-layout-scroll-container`,
             style: [this.contentStyle, hasSiderStyle],
-            onScroll: this.onScroll
+            onScroll: this.handleNativeElScroll
           }, this.$slots) : /* @__PURE__ */ vue.h(Scrollbar$1, {
             ...this.scrollbarProps,
             onScroll: this.onScroll,
@@ -80071,7 +80791,7 @@
 
     var LayoutContent = createLayoutComponent(true);
 
-    var style$B = cB("layout-header", `
+    var style$A = cB("layout-header", `
   transition:
     color .3s var(--n-bezier),
     background-color .3s var(--n-bezier),
@@ -80106,7 +80826,7 @@
       },
       setup(props) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme("Layout", "-layout-header", style$B, layoutLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Layout", "-layout-header", style$A, layoutLight, props, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const {
             common: { cubicBezierEaseInOut },
@@ -80149,7 +80869,7 @@
       }
     });
 
-    var style$A = cB("layout-footer", `
+    var style$z = cB("layout-footer", `
   transition:
     box-shadow .3s var(--n-bezier),
     color .3s var(--n-bezier),
@@ -80178,7 +80898,7 @@
       props: layoutFooterProps,
       setup(props) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme("Layout", "-layout-footer", style$A, layoutLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Layout", "-layout-footer", style$z, layoutLight, props, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const {
             common: { cubicBezierEaseInOut },
@@ -80221,7 +80941,7 @@
       }
     });
 
-    var style$z = cB("layout-sider", `
+    var style$y = cB("layout-sider", `
   flex-shrink: 0;
   box-sizing: border-box;
   position: relative;
@@ -80518,12 +81238,29 @@
               call(onCollapse);
           }
         }
+        let scrollX = 0;
+        let scrollY = 0;
+        const handleNativeElScroll = (e) => {
+          const target = e.target;
+          scrollX = target.scrollLeft;
+          scrollY = target.scrollTop;
+          props.onScroll?.(e);
+        };
+        useReactivated(() => {
+          if (props.nativeScrollbar) {
+            const el = scrollableElRef.value;
+            if (el) {
+              el.scrollTop = scrollY;
+              el.scrollLeft = scrollX;
+            }
+          }
+        });
         vue.provide(layoutSiderInjectionKey, {
           collapsedRef: mergedCollapsedRef,
           collapseModeRef: vue.toRef(props, "collapseMode")
         });
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme("Layout", "-layout-sider", style$z, layoutLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Layout", "-layout-sider", style$y, layoutLight, props, mergedClsPrefixRef);
         function handleTransitionend(e) {
           if (e.propertyName === "max-width") {
             if (mergedCollapsedRef.value) {
@@ -80578,6 +81315,7 @@
           mergedCollapsed: mergedCollapsedRef,
           scrollContainerStyle: scrollContainerStyleRef,
           siderPlacement: siderPlacementRef,
+          handleNativeElScroll,
           handleTransitionend,
           handleTriggerClick,
           inlineThemeDisabled,
@@ -80622,7 +81360,7 @@
           } : void 0
         }, this.$slots) : /* @__PURE__ */ vue.h("div", {
           class: `${mergedClsPrefix}-layout-sider-scroll-container`,
-          onScroll: this.onScroll,
+          onScroll: this.handleNativeElScroll,
           style: [
             this.scrollContainerStyle,
             {
@@ -80645,7 +81383,7 @@
       }
     });
 
-    var style$y = c$1([cB("list", `
+    var style$x = c$1([cB("list", `
     --n-merged-border-color: var(--n-border-color);
     --n-merged-color: var(--n-color);
     font-size: var(--n-font-size);
@@ -80716,7 +81454,7 @@
       props: listProps,
       setup(props) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme("List", "-list", style$y, listLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("List", "-list", style$x, listLight, props, mergedClsPrefixRef);
         vue.provide(listInjectionKey, {
           mergedClsPrefixRef
         });
@@ -80802,7 +81540,7 @@
     const loadingBarProviderInjectionKey = createInjectionKey("n-loading-bar");
     const loadingBarApiInjectionKey = createInjectionKey("n-loading-bar-api");
 
-    var style$x = cB("loading-bar-container", `
+    var style$w = cB("loading-bar-container", `
   z-index: 5999;
   position: fixed;
   top: 0;
@@ -80925,7 +81663,7 @@
         async function handleAfterLeave() {
           await init();
         }
-        const themeRef = useTheme("LoadingBar", "-loading-bar", style$x, loadingBarLight, providerProps, mergedClsPrefixRef);
+        const themeRef = useTheme("LoadingBar", "-loading-bar", style$w, loadingBarLight, providerProps, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const {
             self: { height, colorError, colorLoading }
@@ -81142,7 +81880,7 @@
       }
     });
 
-    var style$w = cB("log", `
+    var style$v = cB("log", `
   position: relative;
   box-sizing: border-box;
   transition: border-color .3s var(--n-bezier);
@@ -81241,7 +81979,7 @@
           return props.lines;
         });
         const scrollbarRef = vue.ref(null);
-        const themeRef = useTheme("Log", "-log", style$w, logLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Log", "-log", style$v, logLight, props, mergedClsPrefixRef);
         function handleScroll(e) {
           const container = e.target;
           const content = container.firstElementChild;
@@ -82022,7 +82760,7 @@
     `), cE("extra", `
       color: var(--n-item-text-color-hover-horizontal);
     `)])];
-    var style$v = c$1([cB("menu", `
+    var style$u = c$1([cB("menu", `
     background-color: var(--n-color);
     color: var(--n-item-text-color);
     overflow: hidden;
@@ -82302,7 +83040,7 @@
           useCheckDeprecated(props);
         }
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme("Menu", "-menu", style$v, menuLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Menu", "-menu", style$u, menuLight, props, mergedClsPrefixRef);
         const layoutSider = vue.inject(layoutSiderInjectionKey, null);
         const mergedCollapsedRef = vue.computed(() => {
           const { collapsed } = props;
@@ -82677,7 +83415,7 @@
       return relativePosition;
     }
 
-    var style$u = c$1([cB("mention", "width: 100%; z-index: auto; position: relative;"), cB("mention-menu", `
+    var style$t = c$1([cB("mention", "width: 100%; z-index: auto; position: relative;"), cB("mention-menu", `
     box-shadow: var(--n-menu-box-shadow);
   `, [fadeInScaleUpTransition({
       originalTransition: "background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier)"
@@ -82750,7 +83488,7 @@
           mergedBorderedRef,
           inlineThemeDisabled
         } = useConfig(props);
-        const themeRef = useTheme("Mention", "-mention", style$u, mentionLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Mention", "-mention", style$t, mentionLight, props, mergedClsPrefixRef);
         const formItem = useFormItem(props);
         const inputInstRef = vue.ref(null);
         const cursorRef = vue.ref(null);
@@ -83091,7 +83829,7 @@
     const messageApiInjectionKey = createInjectionKey("n-message-api");
     const messageProviderInjectionKey = createInjectionKey("n-message-provider");
 
-    var style$t = c$1([cB("message-wrapper", `
+    var style$s = c$1([cB("message-wrapper", `
     margin: var(--n-margin);
     z-index: 0;
     transform-origin: top center;
@@ -83214,7 +83952,7 @@
           props: messageProviderProps,
           mergedClsPrefixRef
         } = vue.inject(messageProviderInjectionKey);
-        const themeRef = useTheme("Message", "-message", style$t, messageLight, messageProviderProps, mergedClsPrefixRef);
+        const themeRef = useTheme("Message", "-message", style$s, messageLight, messageProviderProps, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const { type } = props;
           const {
@@ -83904,7 +84642,7 @@
       }
     });
 
-    var style$s = c$1([cB("notification-container", `
+    var style$r = c$1([cB("notification-container", `
     z-index: 4000;
     position: fixed;
     overflow: visible;
@@ -84169,7 +84907,7 @@
           leavingKeySet.delete(key);
           notificationListRef.value.splice(notificationListRef.value.findIndex((notification) => notification.key === key), 1);
         }
-        const themeRef = useTheme("Notification", "-notification", style$s, notificationLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Notification", "-notification", style$r, notificationLight, props, mergedClsPrefixRef);
         const api = {
           create,
           info: apis[0],
@@ -84245,7 +84983,7 @@
       return api;
     }
 
-    var style$r = c$1([cB("page-header-header", `
+    var style$q = c$1([cB("page-header-header", `
     margin-bottom: 20px;
   `), cB("page-header", `
     display: flex;
@@ -84295,7 +85033,7 @@
       props: pageHeaderProps,
       setup(props) {
         const { mergedClsPrefixRef, mergedRtlRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme("PageHeader", "-page-header", style$r, pageHeaderLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("PageHeader", "-page-header", style$q, pageHeaderLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl("PageHeader", mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const {
@@ -84396,7 +85134,7 @@
 
     const popconfirmInjectionKey = createInjectionKey("n-popconfirm");
 
-    const panelProps$1 = {
+    const panelProps = {
       positiveText: String,
       negativeText: String,
       showIcon: {
@@ -84412,10 +85150,10 @@
         required: true
       }
     };
-    const panelPropKeys$1 = keysOf(panelProps$1);
+    const panelPropKeys = keysOf(panelProps);
     var PopconfirmPanel = vue.defineComponent({
       name: "NPopconfirmPanel",
-      props: panelProps$1,
+      props: panelProps,
       setup(props) {
         const { localeRef } = useLocale("Popconfirm");
         const { inlineThemeDisabled } = useConfig();
@@ -84492,7 +85230,7 @@
       }
     });
 
-    var style$q = cB("popconfirm", [cE("body", `
+    var style$p = cB("popconfirm", [cE("body", `
     font-size: var(--n-font-size);
     display: flex;
     align-items: center;
@@ -84535,7 +85273,7 @@
         const {
           mergedClsPrefixRef
         } = useConfig();
-        const themeRef = useTheme("Popconfirm", "-popconfirm", style$q, popconfirmLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Popconfirm", "-popconfirm", style$p, popconfirmLight, props, mergedClsPrefixRef);
         const popoverInstRef = vue.ref(null);
 
         function handlePositiveClick(e) {
@@ -84591,7 +85329,7 @@
           $props: props,
           mergedTheme
         } = this;
-        return vue.h(NPopover, omit(props, panelPropKeys$1, {
+        return vue.h(NPopover, omit(props, panelPropKeys, {
           theme: mergedTheme.peers.Popover,
           themeOverrides: mergedTheme.peerOverrides.Popover,
           internalExtraClass: ["popconfirm"],
@@ -84599,7 +85337,7 @@
         }), {
           trigger: slots.activator || slots.trigger,
           default: () => {
-            const panelProps = keep(props, panelPropKeys$1);
+            const panelProps = keep(props, panelPropKeys);
             return vue.h(PopconfirmPanel, { ...panelProps,
               onPositiveClick: this.handlePositiveClick,
               onNegativeClick: this.handleNegativeClick
@@ -84610,248 +85348,6 @@
 
     });
 
-    const popselectInjectionKey = createInjectionKey("n-popselect");
-
-    var style$p = cB("popselect-menu", `
-  box-shadow: var(--n-menu-box-shadow);
-`);
-
-    const panelProps = {
-      multiple: Boolean,
-      value: {
-        type: [String, Number, Array],
-        default: null
-      },
-      cancelable: Boolean,
-      options: {
-        type: Array,
-        default: () => []
-      },
-      size: {
-        type: String,
-        default: "medium"
-      },
-      scrollable: Boolean,
-      "onUpdate:value": [Function, Array],
-      onUpdateValue: [Function, Array],
-      onMouseenter: Function,
-      onMouseleave: Function,
-      renderLabel: Function,
-      onChange: [Function, Array]
-    };
-    const panelPropKeys = keysOf(panelProps);
-    var NPopselectPanel = vue.defineComponent({
-      name: "PopselectPanel",
-      props: panelProps,
-      setup(props) {
-        {
-          vue.watchEffect(() => {
-            if (props.onChange !== void 0) {
-              warn$2("popselect", "`on-change` is deprecated, please use `on-update:value` instead.");
-            }
-          });
-        }
-        const NPopselect = vue.inject(popselectInjectionKey);
-        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-        const themeRef = useTheme("Popselect", "-pop-select", style$p, popselectLight, NPopselect.props, mergedClsPrefixRef);
-        const treeMateRef = vue.computed(() => {
-          return createTreeMate(props.options, createTmOptions("value", "children"));
-        });
-        function doUpdateValue(value, option) {
-          const {
-            onUpdateValue,
-            "onUpdate:value": _onUpdateValue,
-            onChange
-          } = props;
-          if (onUpdateValue)
-            call(onUpdateValue, value, option);
-          if (_onUpdateValue) {
-            call(_onUpdateValue, value, option);
-          }
-          if (onChange)
-            call(onChange, value, option);
-        }
-        function handleToggle(tmNode) {
-          toggle(tmNode.key);
-        }
-        function handleMenuMousedown(e) {
-          if (!happensIn(e, "action"))
-            e.preventDefault();
-        }
-        function toggle(value) {
-          const {
-            value: { getNode }
-          } = treeMateRef;
-          if (props.multiple) {
-            if (Array.isArray(props.value)) {
-              const newValue = [];
-              const newOptions = [];
-              let shouldAddValue = true;
-              props.value.forEach((v) => {
-                if (v === value) {
-                  shouldAddValue = false;
-                  return;
-                }
-                const tmNode = getNode(v);
-                if (tmNode) {
-                  newValue.push(tmNode.key);
-                  newOptions.push(tmNode.rawNode);
-                }
-              });
-              if (shouldAddValue) {
-                newValue.push(value);
-                newOptions.push(getNode(value).rawNode);
-              }
-              doUpdateValue(newValue, newOptions);
-            } else {
-              const tmNode = getNode(value);
-              if (tmNode) {
-                doUpdateValue([value], [tmNode.rawNode]);
-              }
-            }
-          } else {
-            if (props.value === value && props.cancelable) {
-              doUpdateValue(null, null);
-            } else {
-              const tmNode = getNode(value);
-              if (tmNode) {
-                doUpdateValue(value, tmNode.rawNode);
-              }
-              NPopselect.setShow(false);
-            }
-          }
-          void vue.nextTick(() => {
-            NPopselect.syncPosition();
-          });
-        }
-        vue.watch(vue.toRef(props, "options"), () => {
-          void vue.nextTick(() => {
-            NPopselect.syncPosition();
-          });
-        });
-        const cssVarsRef = vue.computed(() => {
-          const {
-            self: { menuBoxShadow }
-          } = themeRef.value;
-          return {
-            "--n-menu-box-shadow": menuBoxShadow
-          };
-        });
-        const themeClassHandle = inlineThemeDisabled ? useThemeClass("select", void 0, cssVarsRef, NPopselect.props) : void 0;
-        return {
-          mergedTheme: NPopselect.mergedThemeRef,
-          mergedClsPrefix: mergedClsPrefixRef,
-          treeMate: treeMateRef,
-          handleToggle,
-          handleMenuMousedown,
-          cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
-          themeClass: themeClassHandle?.themeClass,
-          onRender: themeClassHandle?.onRender
-        };
-      },
-      render() {
-        this.onRender?.();
-        return /* @__PURE__ */ vue.h(NInternalSelectMenu, {
-          clsPrefix: this.mergedClsPrefix,
-          focusable: true,
-          class: [`${this.mergedClsPrefix}-popselect-menu`, this.themeClass],
-          style: this.cssVars,
-          theme: this.mergedTheme.peers.InternalSelectMenu,
-          themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu,
-          multiple: this.multiple,
-          treeMate: this.treeMate,
-          size: this.size,
-          value: this.value,
-          virtualScroll: false,
-          scrollable: this.scrollable,
-          renderLabel: this.renderLabel,
-          onToggle: this.handleToggle,
-          onMouseenter: this.onMouseenter,
-          onMouseleave: this.onMouseenter,
-          onMousedown: this.handleMenuMousedown
-        }, {
-          action: () => this.$slots.action?.() || [],
-          empty: () => this.$slots.empty?.() || []
-        });
-      }
-    });
-
-    const popselectProps = {
-      ...useTheme.props,
-      ...omit(popoverBaseProps, ["showArrow", "arrow"]),
-      placement: {
-        ...popoverBaseProps.placement,
-        default: "bottom"
-      },
-      trigger: {
-        type: String,
-        default: "hover"
-      },
-      ...panelProps
-    };
-    var Popselect = vue.defineComponent({
-      name: "Popselect",
-      props: popselectProps,
-      __popover__: true,
-      setup(props) {
-        const themeRef = useTheme("Popselect", "-popselect", void 0, popselectLight, props);
-        const popoverInstRef = vue.ref(null);
-        function syncPosition() {
-          popoverInstRef.value?.syncPosition();
-        }
-        function setShow(value) {
-          popoverInstRef.value?.setShow(value);
-        }
-        vue.provide(popselectInjectionKey, {
-          props,
-          mergedThemeRef: themeRef,
-          syncPosition,
-          setShow
-        });
-        const exposedMethods = {
-          syncPosition,
-          setShow
-        };
-        return {
-          ...exposedMethods,
-          popoverInstRef,
-          mergedTheme: themeRef
-        };
-      },
-      render() {
-        const { mergedTheme } = this;
-        const popoverProps = {
-          theme: mergedTheme.peers.Popover,
-          themeOverrides: mergedTheme.peerOverrides.Popover,
-          builtinThemeOverrides: {
-            padding: "0"
-          },
-          ref: "popoverInstRef",
-          internalRenderBody: (className, ref2, style, onMouseenter, onMouseleave) => {
-            return /* @__PURE__ */ vue.h(NPopselectPanel, {
-              ...vue.mergeProps(this.$attrs, {
-                class: className,
-                style
-              }),
-              ...keep(this.$props, panelPropKeys),
-              ref: createRefSetter(ref2),
-              onMouseenter,
-              onMouseleave
-            }, {
-              action: () => this.$slots.action?.(),
-              empty: () => this.$slots.empty?.()
-            });
-          }
-        };
-        return /* @__PURE__ */ vue.h(NPopover, {
-          ...omit(this.$props, panelPropKeys),
-          ...popoverProps
-        }, {
-          trigger: () => this.$slots.default?.()
-        });
-      }
-    });
-
     var style$o = c$1([cB("progress", {
       display: "inline-block"
     }, [cB("progress-icon", `
@@ -86257,11 +86753,11 @@
     width: 100%;
     cursor: pointer;
     user-select: none;
-  `, [cM("reverse", [cB("slider-handles", [cB("slider-handle", `
+  `, [cM("reverse", [cB("slider-handles", [cB("slider-handle-wrapper", `
           transform: translate(50%, -50%);
         `)]), cB("slider-dots", [cB("slider-dot", `
           transform: translateX(50%, -50%);
-        `)]), cM("vertical", [cB("slider-handles", [cB("slider-handle", `
+        `)]), cM("vertical", [cB("slider-handles", [cB("slider-handle-wrapper", `
             transform: translate(-50%, -50%);
           `)]), cB("slider-marks", [cB("slider-mark", `
             transform: translateY(calc(-50% + var(--n-dot-height) / 2));
@@ -86276,7 +86772,7 @@
         right: 0;
         bottom: calc(var(--n-handle-size) / 2);
         left: 0;
-      `, [cB("slider-handle", `
+      `, [cB("slider-handle-wrapper", `
           top: unset;
           left: 50%;
           transform: translate(-50%, 50%);
@@ -86330,10 +86826,11 @@
       top: 18px;
       left: calc(var(--n-handle-size) / 2);
       right: calc(var(--n-handle-size) / 2);
-    `, [cB("slider-mark", {
-      position: "absolute",
-      transform: "translateX(-50%)"
-    })]), cB("slider-rail", `
+    `, [cB("slider-mark", `
+        position: absolute;
+        transform: translateX(-50%);
+        white-space: nowrap;
+      `)]), cB("slider-rail", `
       width: 100%;
       position: relative;
       height: var(--n-rail-height);
@@ -86353,33 +86850,33 @@
       right: calc(var(--n-handle-size) / 2);
       bottom: 0;
       left: calc(var(--n-handle-size) / 2);
-    `, [cB("slider-handle", `
+    `, [cB("slider-handle-wrapper", `
         outline: none;
-        height: var(--n-handle-size);
-        width: var(--n-handle-size);
-        border-radius: 50%;
-        transition: box-shadow .2s var(--n-bezier), background-color .3s var(--n-bezier);
         position: absolute;
         top: 50%;
         transform: translate(-50%, -50%);
-        overflow: hidden;
         cursor: pointer;
-        background-color: var(--n-handle-color);
-        box-shadow: var(--n-handle-box-shadow);
-      `, [c$1("&:hover", {
-      boxShadow: "var(--n-handle-box-shadow-hover)"
-    }), c$1("&:hover:focus", {
-      boxShadow: "var(--n-handle-box-shadow-active)"
-    }), c$1("&:focus", {
-      boxShadow: "var(--n-handle-box-shadow-focus)"
-    })])]), cB("slider-dots", `
+        display: flex;
+      `, [cB("slider-handle", `
+          height: var(--n-handle-size);
+          width: var(--n-handle-size);
+          border-radius: 50%;
+          overflow: hidden;
+          transition: box-shadow .2s var(--n-bezier), background-color .3s var(--n-bezier);
+          background-color: var(--n-handle-color);
+          box-shadow: var(--n-handle-box-shadow);
+        `, [c$1("&:hover", `
+            box-shadow: var(--n-handle-box-shadow-hover);
+          `)]), c$1("&:focus", [cB("slider-handle", `
+            box-shadow: var(--n-handle-box-shadow-focus);
+          `, [c$1("&:hover", `
+              box-shadow: var(--n-handle-box-shadow-active);
+            `)])])])]), cB("slider-dots", `
       position: absolute;
       top: 50%;
       left: calc(var(--n-handle-size) / 2);
       right: calc(var(--n-handle-size) / 2);
-    `, [cM("transition-disabled", [cB("slider-dot", {
-      transition: "none"
-    })]), cB("slider-dot", `
+    `, [cM("transition-disabled", [cB("slider-dot", "transition: none;")]), cB("slider-dot", `
         transition:
           border-color .3s var(--n-bezier),
           box-shadow .3s var(--n-bezier),
@@ -86393,9 +86890,7 @@
         box-sizing: border-box;
         border: var(--n-dot-border);
         background-color: var(--n-dot-color);
-      `, [cM("active", {
-      border: "var(--n-dot-border-active)"
-    })])])]), cB("slider-handle-indicator", `
+      `, [cM("active", "border: var(--n-dot-border-active);")])])]), cB("slider-handle-indicator", `
     font-size: var(--n-font-size);
     padding: 6px 10px;
     border-radius: var(--n-indicator-border-radius);
@@ -86417,11 +86912,7 @@
       margin-top: 12px;
     `), cM("left", `
       margin-right: 12px;
-    `), fadeInScaleUpTransition()]), insideModal(cB("slider", [cB("slider-dot", {
-      backgroundColor: "var(--n-dot-color-modal)"
-    })])), insidePopover(cB("slider", [cB("slider-dot", {
-      backgroundColor: "var(--n-dot-color-popover)"
-    })]))]);
+    `), fadeInScaleUpTransition()]), insideModal(cB("slider", [cB("slider-dot", "background-color: var(--n-dot-color-modal);")])), insidePopover(cB("slider", [cB("slider-dot", "background-color: var(--n-dot-color-popover);")]))]);
 
     const eventButtonLeft = 0;
     const sliderProps = {
@@ -86563,7 +87054,9 @@
         function isShowTooltip(index) {
           return props.showTooltip || hoverIndexRef.value === index || activeIndexRef.value === index && draggingRef.value;
         }
-        function isSkipCSSDetection(index) {
+        function shouldKeepTooltipTransition(index) {
+          if (!draggingRef.value)
+            return true;
           return !(activeIndexRef.value === index && previousIndexRef.value === index);
         }
         function focusActiveHandle(index) {
@@ -86904,7 +87397,7 @@
           dotTransitionDisabled: dotTransitionDisabledRef,
           markInfos: markInfosRef,
           isShowTooltip,
-          isSkipCSSDetection,
+          shouldKeepTooltipTransition,
           handleRailRef,
           setHandleRefs,
           setFollowerRefs,
@@ -86975,14 +87468,18 @@
               /* @__PURE__ */ vue.h(VTarget, null, {
                 default: () => /* @__PURE__ */ vue.h("div", {
                   ref: this.setHandleRefs(index),
-                  class: `${mergedClsPrefix}-slider-handle`,
+                  class: `${mergedClsPrefix}-slider-handle-wrapper`,
                   tabindex: this.mergedDisabled ? -1 : 0,
                   style: this.getHandleStyle(value, index),
                   onFocus: () => this.handleHandleFocus(index),
                   onBlur: () => this.handleHandleBlur(index),
                   onMouseenter: () => this.handleHandleMouseEnter(index),
                   onMouseleave: () => this.handleHandleMouseLeave(index)
-                })
+                }, resolveSlot(this.$slots.thumb, () => [
+                  /* @__PURE__ */ vue.h("div", {
+                    class: `${mergedClsPrefix}-slider-handle`
+                  })
+                ]))
               }),
               this.tooltip && /* @__PURE__ */ vue.h(VFollower, {
                 ref: this.setFollowerRefs(index),
@@ -86996,9 +87493,13 @@
                 default: () => /* @__PURE__ */ vue.h(vue.Transition, {
                   name: "fade-in-scale-up-transition",
                   appear: this.isMounted,
-                  css: this.isSkipCSSDetection(index),
-                  onEnter: () => this.followerEnabledIndexSet.add(index),
-                  onAfterLeave: () => this.followerEnabledIndexSet.delete(index)
+                  css: this.shouldKeepTooltipTransition(index),
+                  onEnter: () => {
+                    this.followerEnabledIndexSet.add(index);
+                  },
+                  onAfterLeave: () => {
+                    this.followerEnabledIndexSet.delete(index);
+                  }
                 }, {
                   default: () => {
                     if (showTooltip) {
@@ -90968,6 +91469,8 @@
           if (!tmNode.isLeaf && !tmNode.shallowLoaded) {
             if (!NTree.loadingKeysRef.value.has(tmNode.key)) {
               NTree.loadingKeysRef.value.add(tmNode.key);
+            } else {
+              return;
             }
             const {
               onLoadRef: { value: onLoad }
@@ -90996,7 +91499,7 @@
             NTree.handleSelect(tmNode);
           }
           if (expandOnClick && !tmNode.isLeaf) {
-            NTree.handleSwitcherClick(tmNode);
+            handleSwitcherClick();
           }
         }
         function handleContentClick(e) {
@@ -91346,9 +91849,12 @@
       const { value: mergedSelectedKeys } = mergedSelectedKeysRef;
       const treeSelectInjection = vue.inject(treeSelectInjectionKey, null);
       const pendingNodeKeyRef = treeSelectInjection ? treeSelectInjection.pendingNodeKeyRef : vue.ref(mergedSelectedKeys.length ? mergedSelectedKeys[mergedSelectedKeys.length - 1] : null);
-      function handleKeyup(e) {
+      function handleKeydown(e) {
         const { value: pendingNodeKey } = pendingNodeKeyRef;
         if (pendingNodeKey === null) {
+          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+          }
           if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(e.key)) {
             if (pendingNodeKey === null) {
               const { value: fNodes } = fNodesRef;
@@ -91370,6 +91876,7 @@
           if (e.key === "Enter") {
             handleSelect(fNodes[fIndex]);
           } else if (e.key === "ArrowDown") {
+            e.preventDefault();
             fIndex += 1;
             while (fIndex < fNodes.length) {
               if (!fNodes[fIndex].disabled) {
@@ -91379,6 +91886,7 @@
               fIndex += 1;
             }
           } else if (e.key === "ArrowUp") {
+            e.preventDefault();
             fIndex -= 1;
             while (fIndex >= 0) {
               if (!fNodes[fIndex].disabled) {
@@ -91416,16 +91924,8 @@
           }
         }
       }
-      function handleKeydown(e) {
-        switch (e.key) {
-          case "ArrowUp":
-          case "ArrowDown":
-            e.preventDefault();
-        }
-      }
       return {
         pendingNodeKeyRef,
-        handleKeyup,
         handleKeydown
       };
     }
@@ -91829,7 +92329,7 @@
         const controlledExpandedKeysRef = vue.toRef(props, "expandedKeys");
         const mergedExpandedKeysRef = useMergedState(controlledExpandedKeysRef, uncontrolledExpandedKeysRef);
         const fNodesRef = vue.computed(() => displayTreeMateRef.value.getFlattenedNodes(mergedExpandedKeysRef.value));
-        const { pendingNodeKeyRef, handleKeyup, handleKeydown } = useKeyboard({
+        const { pendingNodeKeyRef, handleKeydown } = useKeyboard({
           mergedSelectedKeysRef,
           fNodesRef,
           mergedExpandedKeysRef,
@@ -92528,8 +93028,7 @@
           handleCheck
         });
         const exposedMethods = {
-          handleKeydown,
-          handleKeyup
+          handleKeydown
         };
         const cssVarsRef = vue.computed(() => {
           const {
@@ -92578,7 +93077,6 @@
           handleAfterEnter,
           handleResize,
           handleKeydown: exposedMethods.handleKeydown,
-          handleKeyup: exposedMethods.handleKeyup,
           cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
           themeClass: themeClassHandle?.themeClass,
           onRender: themeClassHandle?.onRender
@@ -92597,7 +93095,6 @@
           disabled,
           internalFocusable,
           checkable,
-          handleKeyup,
           handleKeydown,
           handleFocusout
         } = this;
@@ -92634,7 +93131,6 @@
             theme: mergedTheme.peers.Scrollbar,
             themeOverrides: mergedTheme.peerOverrides.Scrollbar,
             tabindex,
-            onKeyup: mergedFocusable ? handleKeyup : void 0,
             onKeydown: mergedFocusable ? handleKeydown : void 0,
             onFocusout: mergedFocusable ? handleFocusout : void 0
           }, {
@@ -92672,7 +93168,6 @@
           return /* @__PURE__ */ vue.h(XScrollbar, {
             class: treeClass,
             tabindex,
-            onKeyup: mergedFocusable ? handleKeyup : void 0,
             onKeydown: mergedFocusable ? handleKeydown : void 0,
             onFocusout: mergedFocusable ? handleFocusout : void 0,
             style: this.cssVars,
@@ -92689,7 +93184,6 @@
             tabindex,
             ref: "selfElRef",
             style: this.cssVars,
-            onKeyup: mergedFocusable ? handleKeyup : void 0,
             onKeydown: mergedFocusable ? handleKeydown : void 0,
             onFocusout: mergedFocusable ? handleFocusout : void 0,
             onDragleave: draggable ? this.handleDragLeaveTree : void 0
@@ -93136,16 +93630,16 @@
           const { value } = e.target;
           patternRef.value = value;
         }
-        function handleKeydown(e) {
+        function treeHandleKeydown(e) {
           const { value: treeInst } = treeInstRef;
           if (treeInst) {
             treeInst.handleKeydown(e);
           }
         }
-        function handleKeyup(e) {
+        function handleKeydown(e) {
           if (e.key === "Enter") {
             if (mergedShowRef.value) {
-              treeHandleKeyup(e);
+              treeHandleKeydown(e);
               if (!props2.multiple) {
                 closeMenu();
                 focusSelection();
@@ -93155,22 +93649,19 @@
             }
             e.preventDefault();
           } else if (e.key === "Escape") {
-            closeMenu();
-            focusSelection();
+            if (mergedShowRef.value) {
+              markEventEffectPerformed(e);
+              closeMenu();
+              focusSelection();
+            }
           } else {
             if (mergedShowRef.value) {
-              treeHandleKeyup(e);
+              treeHandleKeydown(e);
             } else if (e.key === "ArrowDown") {
               openMenu();
             }
           }
         }
-        function treeHandleKeyup(e) {
-          const { value: treeInst } = treeInstRef;
-          if (treeInst) {
-            treeInst.handleKeyup(e);
-          }
-        }
         function handleTabOut() {
           closeMenu();
           focusSelection();
@@ -93256,7 +93747,6 @@
           handleDeleteOption,
           handlePatternInput,
           handleKeydown,
-          handleKeyup,
           handleTabOut,
           handleMenuMousedown,
           mergedTheme: themeRef,
@@ -93300,8 +93790,9 @@
                 onFocus: this.handleTriggerFocus,
                 onBlur: this.handleTriggerBlur,
                 onDeleteOption: this.handleDeleteOption,
-                onKeydown: this.handleKeydown,
-                onKeyup: this.handleKeyup
+                onKeydown: this.handleKeydown
+              }, {
+                arrow: () => [this.$slots.arrow?.()]
               })
             }),
             /* @__PURE__ */ vue.h(VFollower, {
@@ -93344,7 +93835,6 @@
                     ],
                     tabindex: 0,
                     onMousedown: this.handleMenuMousedown,
-                    onKeyup: this.handleKeyup,
                     onKeydown: this.handleKeydown,
                     onFocusin: this.handleMenuFocusin,
                     onFocusout: this.handleMenuFocusout
@@ -94010,12 +94500,13 @@
         return () => {
           const {
             mergedClsPrefixRef: { value: mergedClsPrefix },
-            mergedDisabledRef: { value: mergedDisabled }
+            mergedDisabledRef: { value: mergedDisabled },
+            maxReachedRef: { value: maxReached }
           } = NUpload;
           return /* @__PURE__ */ vue.h("div", {
             class: [
               `${mergedClsPrefix}-upload-dragger`,
-              mergedDisabled && `${mergedClsPrefix}-upload-dragger--disabled`
+              (mergedDisabled || maxReached) && `${mergedClsPrefix}-upload-dragger--disabled`
             ]
           }, slots);
         };
@@ -94061,25 +94552,7 @@
           return;
         }
 
-        const img = new Image();
-        img.src = window.URL.createObjectURL(file);
-
-        img.onload = () => {
-          const {
-            width,
-            height
-          } = img;
-          const canvas = document.createElement("canvas");
-          const ctx = canvas.getContext("2d");
-          canvas.width = width;
-          canvas.height = height;
-          canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${width}px; height: ${height}px; z-index: 9999; display: none;`;
-          document.body.appendChild(canvas);
-          ctx?.drawImage(img, 0, 0, width, height);
-          const dataURL = canvas.toDataURL();
-          document.body.removeChild(canvas);
-          resolve(dataURL);
-        };
+        resolve(window.URL.createObjectURL(file));
       });
     }
     const environmentSupportFile = isBrowser$2 && window.FileReader && window.File;
@@ -94277,9 +94750,11 @@
             onDragenter: handleTriggerDragEnter,
             onDragleave: handleTriggerDragLeave
           }, isImageCardTypeRef.value ? /* @__PURE__ */ vue.h(NUploadDragger, null, {
-            default: slots.default || (() => /* @__PURE__ */ vue.h(NBaseIcon, {
-              clsPrefix: mergedClsPrefix
-            }, { default: () => /* @__PURE__ */ vue.h(AddIcon, null) }))
+            default: () => resolveSlot(slots.default, () => [
+              /* @__PURE__ */ vue.h(NBaseIcon, {
+                clsPrefix: mergedClsPrefix
+              }, { default: () => /* @__PURE__ */ vue.h(AddIcon, null) })
+            ])
           }) : slots);
         };
       }
@@ -94338,6 +94813,11 @@
       fill: "currentColor"
     })));
 
+    const buttonThemeOverrides = {
+      paddingMedium: "0 3px",
+      heightMedium: "24px",
+      iconSizeMedium: "18px"
+    };
     var NUploadFile = vue.defineComponent({
       name: "UploadFile",
       props: {
@@ -94574,11 +95054,12 @@
           ]
         }, this.showPreviewButton ? /* @__PURE__ */ vue.h(Button, {
           key: "preview",
-          text: true,
+          quaternary: true,
           type: this.buttonType,
           onClick: this.handlePreviewClick,
           theme: mergedTheme.peers.Button,
-          themeOverrides: mergedTheme.peerOverrides.Button
+          themeOverrides: mergedTheme.peerOverrides.Button,
+          builtinThemeOverrides: buttonThemeOverrides
         }, {
           icon: () => /* @__PURE__ */ vue.h(NBaseIcon, {
             clsPrefix
@@ -94587,7 +95068,8 @@
           key: "cancelOrTrash",
           theme: mergedTheme.peers.Button,
           themeOverrides: mergedTheme.peerOverrides.Button,
-          text: true,
+          quaternary: true,
+          builtinThemeOverrides: buttonThemeOverrides,
           type: this.buttonType,
           onClick: this.handleRemoveOrCancelClick
         }, {
@@ -94602,22 +95084,24 @@
           })
         }), this.showRetryButton && !this.disabled && /* @__PURE__ */ vue.h(Button, {
           key: "retry",
-          text: true,
+          quaternary: true,
           type: this.buttonType,
           onClick: this.handleRetryClick,
           theme: mergedTheme.peers.Button,
-          themeOverrides: mergedTheme.peerOverrides.Button
+          themeOverrides: mergedTheme.peerOverrides.Button,
+          builtinThemeOverrides: buttonThemeOverrides
         }, {
           icon: () => /* @__PURE__ */ vue.h(NBaseIcon, {
             clsPrefix
           }, { default: () => /* @__PURE__ */ vue.h(RetryIcon, null) })
         }), this.showDownloadButton ? /* @__PURE__ */ vue.h(Button, {
           key: "download",
-          text: true,
+          quaternary: true,
           type: this.buttonType,
           onClick: this.handleDownloadClick,
           theme: mergedTheme.peers.Button,
-          themeOverrides: mergedTheme.peerOverrides.Button
+          themeOverrides: mergedTheme.peerOverrides.Button,
+          builtinThemeOverrides: buttonThemeOverrides
         }, {
           icon: () => /* @__PURE__ */ vue.h(NBaseIcon, {
             clsPrefix
@@ -94698,7 +95182,6 @@
   `, [c$1("&:hover", `
       border: var(--n-dragger-border-hover);
     `), cM("disabled", `
-      opacity: var(--n-item-disabled-opacity);
       cursor: not-allowed;
     `)]), cB("upload-trigger", `
     display: inline-block;
@@ -94724,7 +95207,7 @@
     line-height: var(--n-line-height);
     opacity: 1;
     transition: opacity .3s var(--n-bezier);
-  `, [cM("disabled", `
+  `, [c$1("a, img", "outline: none;"), cM("disabled", `
       opacity: var(--n-item-disabled-opacity);
       cursor: not-allowed;
     `, [cB("upload-file", "cursor: not-allowed;")]), cM("grid", `
@@ -94788,6 +95271,7 @@
         justify-content: center;
         transition: border-color .3s var(--n-bezier), background-color .3s var(--n-bezier);
         border-radius: var(--n-border-radius);
+        overflow: hidden;
       `, [cB("progress", `
           position: absolute;
           left: 8px;
@@ -95848,7 +96332,7 @@
         NPagination: NPagination,
         NPopconfirm: Popconfirm,
         NPopover: NPopover,
-        NPopselect: Popselect,
+        NPopselect: NPopselect,
         NProgress: NProgress,
         NRadio: NRadio,
         NRadioGroup: NRadioGroup,
@@ -95906,7 +96390,7 @@
         createDiscreteApi: createDiscreteApi
     });
 
-    var version = "2.30.3";
+    var version = "2.30.4";
 
     function create() {
       let {
@@ -96585,7 +97069,7 @@
     exports.NPagination = NPagination;
     exports.NPopconfirm = Popconfirm;
     exports.NPopover = NPopover;
-    exports.NPopselect = Popselect;
+    exports.NPopselect = NPopselect;
     exports.NProgress = NProgress;
     exports.NRadio = NRadio;
     exports.NRadioButton = RadioButton;