@uzum-tech/ui 1.10.1 → 1.11.0

package/dist/index.js

@@ -3431,7 +3431,7 @@
     }
 
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
-    const style$1M = c([c('.v-binder-follower-container', {
+    const style$1N = c([c('.v-binder-follower-container', {
       position: 'absolute',
       left: '0',
       right: '0',
@@ -3510,7 +3510,7 @@
           }
         });
         const ssrAdapter = useSsrAdapter();
-        style$1M.mount({
+        style$1N.mount({
           id: 'vueuc/binder',
           head: true,
           anchorMetaName: cssrAnchorMetaName$1,
@@ -4970,7 +4970,7 @@
 
     /* eslint-disable @typescript-eslint/strict-boolean-expressions */
     const hiddenAttr = 'v-hidden';
-    const style$1L = c('[v-hidden]', {
+    const style$1M = c('[v-hidden]', {
       display: 'none!important'
     });
     var VOverflow = vue.defineComponent({
@@ -5083,7 +5083,7 @@
           }
         }
         const ssrAdapter = useSsrAdapter();
-        style$1L.mount({
+        style$1M.mount({
           id: 'vueuc/overflow',
           head: true,
           anchorMetaName: cssrAnchorMetaName$1,
@@ -28838,7 +28838,7 @@
       };
     }
 
-    var style$1K = cB("affix", [cM("affixed", {
+    var style$1L = cB("affix", [cM("affixed", {
       position: "fixed"
     }, [cM("absolute-positioned", {
       position: "absolute"
@@ -28898,7 +28898,7 @@
       props: affixProps,
       setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useStyle("-affix", style$1K, mergedClsPrefixRef);
+        useStyle("-affix", style$1L, mergedClsPrefixRef);
         let scrollTarget = null;
         const stickToTopRef = vue.ref(false);
         const stickToBottomRef = vue.ref(false);
@@ -30104,7 +30104,7 @@
       }
     });
 
-    var style$1J = cB("base-icon", `
+    var style$1K = cB("base-icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -30140,7 +30140,7 @@
         onMouseup: Function
       },
       setup(props) {
-        useStyle("-base-icon", style$1J, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-icon", style$1K, vue.toRef(props, "clsPrefix"));
       },
       render() {
         return /* @__PURE__ */ vue.h(
@@ -30160,7 +30160,7 @@
       }
     });
 
-    var style$1I = cB("base-close", `
+    var style$1J = cB("base-close", `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -30232,7 +30232,7 @@
         absolute: Boolean
       },
       setup(props) {
-        useStyle("-base-close", style$1I, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-close", style$1J, vue.toRef(props, "clsPrefix"));
         return () => {
           const { clsPrefix, disabled, absolute, round, isButtonTag } = props;
           const Tag = isButtonTag ? "button" : "div";
@@ -30312,7 +30312,7 @@
       })];
     }
 
-    var style$1H = c$1([c$1("@keyframes loading-container-rotate", `
+    var style$1I = c$1([c$1("@keyframes loading-container-rotate", `
     to {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
@@ -30482,7 +30482,7 @@
         ...exposedLoadingProps
       },
       setup(props) {
-        useStyle("-base-loading", style$1H, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-loading", style$1I, vue.toRef(props, "clsPrefix"));
       },
       render() {
         const { clsPrefix, radius, strokeWidth, stroke, scale } = this;
@@ -30729,7 +30729,7 @@
       shadowDepth: "0px 8px 8px 0px rgba(0, 0, 0, 0.25)"
     };
 
-    const self$1q = vars => {
+    const self$1r = vars => {
       const {
         heightSmall,
         heightMedium,
@@ -30750,10 +30750,10 @@
     const skeletonLight$1 = {
       name: "Skeleton",
       common: derived,
-      self: self$1q
+      self: self$1r
     };
 
-    var style$1G = c$1([cB("skeleton", `
+    var style$1H = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -30809,7 +30809,7 @@
         const themeRef = useTheme(
           "Skeleton",
           "-skeleton",
-          style$1G,
+          style$1H,
           skeletonLight$1,
           props,
           mergedClsPrefixRef
@@ -31558,7 +31558,7 @@
       return treemate;
     }
 
-    const self$1p = vars => {
+    const self$1q = vars => {
       const {
         fontBodyMedium,
         fontTitleLarge,
@@ -31590,16 +31590,16 @@
     const emptyLight = {
       name: "Empty",
       common: derived,
-      self: self$1p
+      self: self$1q
     };
 
     const emptyDark$1 = {
       name: "Empty",
       common: derived$1,
-      self: self$1p
+      self: self$1q
     };
 
-    var style$1F = cB("empty", `
+    var style$1G = cB("empty", `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -31676,7 +31676,7 @@
         const themeRef = useTheme(
           "Empty",
           "-empty",
-          style$1F,
+          style$1G,
           emptyLight,
           props,
           mergedClsPrefixRef
@@ -31764,7 +31764,7 @@
       }
     });
 
-    const commonVars$a = {
+    const commonVars$b = {
       railInsetHorizontalBottom: "auto 2px 4px 2px",
       railInsetHorizontalTop: "4px 2px auto 2px",
       railInsetVerticalRight: "2px 4px 2px auto",
@@ -31772,7 +31772,7 @@
       railColor: "transparent"
     };
 
-    const self$1o = vars => {
+    const self$1p = vars => {
       const {
         scrollbarColor,
         scrollbarColorHover,
@@ -31781,7 +31781,7 @@
         scrollbarBorderRadius
       } = vars;
       return {
-        ...commonVars$a,
+        ...commonVars$b,
         height: scrollbarHeight,
         width: scrollbarWidth,
         borderRadius: scrollbarBorderRadius,
@@ -31792,13 +31792,13 @@
     const scrollbarLight = {
       name: "Scrollbar",
       common: derived,
-      self: self$1o
+      self: self$1p
     };
 
     const scrollbarDark = {
       name: "Scrollbar",
       common: derived$1,
-      self: self$1o
+      self: self$1p
     };
 
     var rtlStyle$s = cB("scrollbar", [cM("rtl", `
@@ -31837,7 +31837,7 @@
       })];
     }
 
-    var style$1E = cB("scrollbar", `
+    var style$1F = cB("scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -31980,7 +31980,7 @@
         const themeRef = useTheme(
           "Scrollbar",
           "-scrollbar",
-          style$1E,
+          style$1F,
           scrollbarLight,
           props,
           mergedClsPrefixRef
@@ -32641,7 +32641,7 @@
     });
     const XScrollbar = Scrollbar$1;
 
-    const self$1n = vars => {
+    const self$1o = vars => {
       const {
         borderRadius,
         iconMedium,
@@ -32698,7 +32698,7 @@
         Scrollbar: scrollbarLight,
         Empty: emptyLight
       },
-      self: self$1n
+      self: self$1o
     });
 
     const internalSelectMenuDark = {
@@ -32708,10 +32708,10 @@
         Scrollbar: scrollbarDark,
         Empty: emptyDark$1
       },
-      self: self$1n
+      self: self$1o
     };
 
-    var style$1D = cB("base-account-option", `
+    var style$1E = cB("base-account-option", `
   display: flex;
   align-items: center;
   position: relative;
@@ -32751,7 +32751,7 @@
       font-size: var(--u-avatar-size);
     `)])]);
 
-    var commonVars$9 = {
+    var commonVars$a = {
       iconWidth: "44px",
       iconHeight: "44px",
       iconMargin: "0 16px 0 0",
@@ -32763,7 +32763,7 @@
       avatarSize: "16px"
     };
 
-    const self$1m = vars => {
+    const self$1n = vars => {
       const {
         heightHuge,
         fontBodyLarge,
@@ -32777,7 +32777,7 @@
         elementsSecondary
       } = vars;
       return {
-        ...commonVars$9,
+        ...commonVars$a,
         height: heightHuge,
         labelColor: textSecondary,
         labelFontSize: fontBodyLarge,
@@ -32793,13 +32793,13 @@
     const accountOptionLight = {
       name: "AccountOption",
       common: derived,
-      self: self$1m
+      self: self$1n
     };
 
     const accountOptionDark = {
       name: "AccountOption",
       common: derived$1,
-      self: self$1m
+      self: self$1n
     };
 
     var UBaseAccountOption = vue.defineComponent({
@@ -32817,7 +32817,7 @@
         const themeRef = useTheme(
           "AccountOption",
           "-base-account-option",
-          style$1D,
+          style$1E,
           accountOptionLight,
           props,
           mergedClsPrefixRef
@@ -33121,7 +33121,7 @@
       })];
     }
 
-    var style$1C = cB("base-select-menu", `
+    var style$1D = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -33306,7 +33306,7 @@
         const themeRef = useTheme(
           "InternalSelectMenu",
           "-internal-select-menu",
-          style$1C,
+          style$1D,
           internalSelectMenuLight,
           props,
           vue.toRef(props, "clsPrefix")
@@ -33743,7 +33743,7 @@
       }
     });
 
-    var style$1B = cB("base-wave", `
+    var style$1C = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -33761,7 +33761,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-wave", style$1B, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-wave", style$1C, vue.toRef(props, "clsPrefix"));
         const selfRef = vue.ref(null);
         const activeRef = vue.ref(false);
         let animationTimerId = null;
@@ -33806,7 +33806,7 @@
       }
     });
 
-    var style$1A = cB("base-menu-mask", `
+    var style$1B = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -33829,7 +33829,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-menu-mask", style$1A, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-menu-mask", style$1B, vue.toRef(props, "clsPrefix"));
         const messageRef = vue.ref(null);
         let timerId = null;
         const uncontrolledShowRef = vue.ref(false);
@@ -33862,7 +33862,7 @@
       }
     });
 
-    const self$1l = vars => {
+    const self$1m = vars => {
       const {
         fontBodyMedium,
         containerPrimary,
@@ -33889,13 +33889,13 @@
     const popoverLight = {
       name: "Popover",
       common: derived,
-      self: self$1l
+      self: self$1m
     };
 
     const popoverDark = {
       name: "Popover",
       common: derived$1,
-      self: self$1l
+      self: self$1m
     };
 
     const oppositePlacement = {
@@ -33905,7 +33905,7 @@
       right: "left"
     };
     const arrowSize = "var(--u-arrow-height) * 1.414";
-    var style$1z = c$1([cB("popover", `
+    var style$1A = c$1([cB("popover", `
     transition:
       box-shadow .3s var(--u-bezier),
       background-color .3s var(--u-bezier),
@@ -34096,7 +34096,7 @@
         const themeRef = useTheme(
           "Popover",
           "-popover",
-          style$1z,
+          style$1A,
           popoverLight,
           props,
           mergedClsPrefixRef
@@ -34886,7 +34886,7 @@
       }
     });
 
-    const self$1k = vars => {
+    const self$1l = vars => {
       const {
         opacityDisabled,
         borderRadiusSmall: borderRadius,
@@ -34984,13 +34984,13 @@
     const tagLight = {
       name: "Tag",
       common: derived,
-      self: self$1k
+      self: self$1l
     };
 
     const tagDark = {
       name: "Tag",
       common: derived$1,
-      self: self$1k
+      self: self$1l
     };
 
     var rtlStyle$r = cB("tag", [cM("rtl", `
@@ -35037,7 +35037,7 @@
       }
     };
 
-    var style$1y = cB("tag", `
+    var style$1z = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -35204,7 +35204,7 @@
         const themeRef = useTheme(
           "Tag",
           "-tag",
-          style$1y,
+          style$1z,
           tagLight,
           props,
           mergedClsPrefixRef
@@ -35563,7 +35563,7 @@
       }
     });
 
-    var style$1x = cB("base-clear", `
+    var style$1y = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -35604,7 +35604,7 @@
         onClear: Function
       },
       setup(props) {
-        useStyle("-base-clear", style$1x, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-clear", style$1y, vue.toRef(props, "clsPrefix"));
         return {
           handleMouseDown(e) {
             e.preventDefault();
@@ -35698,7 +35698,7 @@
       }
     });
 
-    const self$1j = vars => {
+    const self$1k = vars => {
       const {
         borderRadius,
         iconMedium,
@@ -35856,7 +35856,7 @@
       peers: {
         Popover: popoverLight
       },
-      self: self$1j
+      self: self$1k
     });
 
     const internalSelectionDark = {
@@ -35865,7 +35865,7 @@
       peers: {
         Popover: popoverDark
       },
-      self: self$1j
+      self: self$1k
     };
 
     function generateSecondaryStates(state) {
@@ -35889,7 +35889,7 @@
         color: var(--u-arrow-color${state}-secondary);
       `)])];
     }
-    var style$1w = c$1([cB("base-selection", `
+    var style$1x = c$1([cB("base-selection", `
     position: relative;
     z-index: auto;
     box-shadow: none;
@@ -36236,7 +36236,7 @@
         const themeRef = useTheme(
           "InternalSelection",
           "-internal-selection",
-          style$1w,
+          style$1x,
           internalSelectionLight,
           props,
           vue.toRef(props, "clsPrefix")
@@ -37299,7 +37299,7 @@
       })];
     }
 
-    var style$1v = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
+    var style$1w = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
     from {
       transform: translateY(60%);
       opacity: 0;
@@ -37418,7 +37418,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-slot-machine", style$1v, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-slot-machine", style$1w, vue.toRef(props, "clsPrefix"));
         const oldValueRef = vue.ref();
         const newValueRef = vue.ref();
         const numbersRef = vue.computed(() => {
@@ -37471,6 +37471,908 @@
       }
     });
 
+    const commonVars$9 = {
+      railInsetHorizontalBottom: "auto 2px 4px 2px",
+      railInsetHorizontalTop: "4px 2px auto 2px",
+      railInsetVerticalRight: "2px 4px 2px auto",
+      railInsetVerticalLeft: "2px auto 2px 4px",
+      railColor: "transparent"
+    };
+
+    const self$1j = vars => {
+      const {
+        scrollbarColor,
+        scrollbarColorHover,
+        scrollbarHeight,
+        scrollbarWidth,
+        scrollbarBorderRadius
+      } = vars;
+      return {
+        ...commonVars$9,
+        height: scrollbarHeight,
+        width: scrollbarWidth,
+        borderRadius: scrollbarBorderRadius,
+        color: scrollbarColor,
+        colorHover: scrollbarColorHover
+      };
+    };
+    const safeTopScrollbarLight = {
+      name: "SafeTopScrollbar",
+      common: derived,
+      self: self$1j
+    };
+
+    const safeTopScrollbarDark = {
+      name: "SafeTopScrollbar",
+      common: derived$1,
+      self: self$1j
+    };
+
+    cB("scrollbar", [cM("rtl", `
+    direction: rtl;
+  `, [c$1(">", [cB("scrollbar-rail", [cM("horizontal", [c$1(">", [cE("scrollbar", `
+              left: 0;
+              right: unset;
+            `)])]), cM("vertical", `
+          left: 4px;
+          right: unset;
+        `)])])])]);
+
+    var style$1v = cB("safe-top-scrollbar", `
+  overflow: hidden;
+  position: relative;
+  z-index: auto;
+  height: 100%;
+  width: 100%;
+`, [c$1(">", [cB("scrollbar-container", `
+      width: 100%;
+      overflow: scroll;
+      height: 100%;
+      min-height: inherit;
+      max-height: inherit;
+      scrollbar-width: none;
+    `, [c$1("&::-webkit-scrollbar, &::-webkit-scrollbar-track-piece, &::-webkit-scrollbar-thumb", `
+        width: 0;
+        height: 0;
+        display: none;
+      `), c$1(">", [
+    // We can't set overflow hidden since it affects positioning.
+    cB("scrollbar-content", `
+          box-sizing: border-box;
+          min-width: 100%;
+        `)])])]), c$1(">, +", [cB("scrollbar-rail", `
+      position: absolute;
+      pointer-events: none;
+      user-select: none;
+      background: var(--u-scrollbar-rail-color);
+      -webkit-user-select: none;
+    `, [cM("horizontal", `
+        height: var(--u-scrollbar-height);
+      `, [c$1(">", [cE("scrollbar", `
+            height: var(--u-scrollbar-height);
+            border-radius: var(--u-scrollbar-border-radius);
+            right: 0;
+          `)])]), cM("horizontal--top", `
+        top: var(--u-scrollbar-rail-top-horizontal-top);  
+        right: var(--u-scrollbar-rail-right-horizontal-top);  
+        bottom: var(--u-scrollbar-rail-bottom-horizontal-top);  
+        left: var(--u-scrollbar-rail-left-horizontal-top);  
+      `), cM("horizontal--bottom", `
+        top: var(--u-scrollbar-rail-top-horizontal-bottom);  
+        right: var(--u-scrollbar-rail-right-horizontal-bottom);  
+        bottom: var(--u-scrollbar-rail-bottom-horizontal-bottom);  
+        left: var(--u-scrollbar-rail-left-horizontal-bottom);  
+      `), cM("vertical", `
+        width: var(--u-scrollbar-width);
+      `, [c$1(">", [cE("scrollbar", `
+            width: var(--u-scrollbar-width);
+            border-radius: var(--u-scrollbar-border-radius);
+            bottom: 0;
+          `)])]), cM("vertical--left", `
+        top: var(--u-scrollbar-rail-top-vertical-left);  
+        right: var(--u-scrollbar-rail-right-vertical-left);  
+        bottom: var(--u-scrollbar-rail-bottom-vertical-left);  
+        left: var(--u-scrollbar-rail-left-vertical-left);  
+      `), cM("vertical--right", `
+        top: var(--u-scrollbar-rail-top-vertical-right);  
+        right: var(--u-scrollbar-rail-right-vertical-right);  
+        bottom: var(--u-scrollbar-rail-bottom-vertical-right);  
+        left: var(--u-scrollbar-rail-left-vertical-right);  
+      `), cM("disabled", [c$1(">", [cE("scrollbar", "pointer-events: none;")])]), c$1(">", [cE("scrollbar", `
+          z-index: 1;
+          position: absolute;
+          cursor: pointer;
+          pointer-events: all;
+          background-color: var(--u-scrollbar-color);
+          transition: background-color .2s var(--u-scrollbar-bezier);
+        `, [fadeInTransition(), c$1("&:hover", "background-color: var(--u-scrollbar-color-hover);")])])])])]);
+
+    const safeTopscrollbarProps = {
+      ...useTheme.props,
+      duration: {
+        type: Number,
+        default: 0
+      },
+      scrollable: {
+        type: Boolean,
+        default: true
+      },
+      xScrollable: Boolean,
+      trigger: {
+        type: String,
+        default: "hover"
+      },
+      useUnifiedContainer: Boolean,
+      triggerDisplayManually: Boolean,
+      // If container is set, resize observer won't not attached
+      container: Function,
+      content: Function,
+      containerClass: String,
+      containerStyle: [String, Object],
+      contentClass: [String, Array],
+      contentStyle: [String, Object],
+      horizontalRailStyle: [String, Object],
+      verticalRailStyle: [String, Object],
+      onScroll: Function,
+      onWheel: Function,
+      onResize: Function,
+      internalOnUpdateScrollLeft: Function,
+      internalHoistYRail: Boolean,
+      yPlacement: {
+        type: String,
+        default: "right"
+      },
+      xPlacement: {
+        type: String,
+        default: "bottom"
+      }
+    };
+    const SafeTopScrollbar$1 = vue.defineComponent({
+      name: "SafeTopScrollbar",
+      props: safeTopscrollbarProps,
+      inheritAttrs: false,
+      setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
+        const rtlEnabledRef = useRtl(
+          "SafeTopScrollbar",
+          mergedRtlRef,
+          mergedClsPrefixRef
+        );
+        const wrapperRef = vue.ref(null);
+        const containerRef = vue.ref(null);
+        const contentRef = vue.ref(null);
+        const yRailRef = vue.ref(null);
+        const xRailRef = vue.ref(null);
+        const contentHeightRef = vue.ref(null);
+        const contentWidthRef = vue.ref(null);
+        const containerHeightRef = vue.ref(null);
+        const containerWidthRef = vue.ref(null);
+        const yRailSizeRef = vue.ref(null);
+        const xRailSizeRef = vue.ref(null);
+        const containerScrollTopRef = vue.ref(0);
+        const containerScrollLeftRef = vue.ref(0);
+        const isShowXBarRef = vue.ref(false);
+        const isShowYBarRef = vue.ref(false);
+        let yBarPressed = false;
+        let xBarPressed = false;
+        let xBarVanishTimerId;
+        let yBarVanishTimerId;
+        let memoYTop = 0;
+        let memoXLeft = 0;
+        let memoMouseX = 0;
+        let memoMouseY = 0;
+        let previousScrollHeight = 0;
+        let previousScrollTop = 0;
+        const isIos = useIsIos();
+        const themeRef = useTheme(
+          "SafeTopScrollbar",
+          "-safe-top-scrollbar",
+          style$1v,
+          safeTopScrollbarLight,
+          props,
+          mergedClsPrefixRef
+        );
+        const yBarSizeRef = vue.computed(() => {
+          const { value: containerHeight } = containerHeightRef;
+          const { value: contentHeight } = contentHeightRef;
+          const { value: yRailSize } = yRailSizeRef;
+          if (containerHeight === null || contentHeight === null || yRailSize === null) {
+            return 0;
+          } else {
+            return Math.min(
+              containerHeight,
+              yRailSize * containerHeight / contentHeight + depx(themeRef.value.self.width) * 1.5
+            );
+          }
+        });
+        const yBarSizePxRef = vue.computed(() => {
+          return `${yBarSizeRef.value}px`;
+        });
+        const xBarSizeRef = vue.computed(() => {
+          const { value: containerWidth } = containerWidthRef;
+          const { value: contentWidth } = contentWidthRef;
+          const { value: xRailSize } = xRailSizeRef;
+          if (containerWidth === null || contentWidth === null || xRailSize === null) {
+            return 0;
+          } else {
+            return xRailSize * containerWidth / contentWidth + depx(themeRef.value.self.height) * 1.5;
+          }
+        });
+        const xBarSizePxRef = vue.computed(() => {
+          return `${xBarSizeRef.value}px`;
+        });
+        const yBarTopRef = vue.computed(() => {
+          const { value: containerHeight } = containerHeightRef;
+          const { value: containerScrollTop } = containerScrollTopRef;
+          const { value: contentHeight } = contentHeightRef;
+          const { value: yRailSize } = yRailSizeRef;
+          if (containerHeight === null || contentHeight === null || yRailSize === null) {
+            return 0;
+          } else {
+            const heightDiff = contentHeight - containerHeight;
+            if (!heightDiff) return 0;
+            return containerScrollTop / heightDiff * (yRailSize - yBarSizeRef.value);
+          }
+        });
+        const yBarTopPxRef = vue.computed(() => {
+          return `${yBarTopRef.value}px`;
+        });
+        const xBarLeftRef = vue.computed(() => {
+          const { value: containerWidth } = containerWidthRef;
+          const { value: containerScrollLeft } = containerScrollLeftRef;
+          const { value: contentWidth } = contentWidthRef;
+          const { value: xRailSize } = xRailSizeRef;
+          if (containerWidth === null || contentWidth === null || xRailSize === null) {
+            return 0;
+          } else {
+            const widthDiff = contentWidth - containerWidth;
+            if (!widthDiff) return 0;
+            return containerScrollLeft / widthDiff * (xRailSize - xBarSizeRef.value);
+          }
+        });
+        const xBarLeftPxRef = vue.computed(() => {
+          return `${xBarLeftRef.value}px`;
+        });
+        const needYBarRef = vue.computed(() => {
+          const { value: containerHeight } = containerHeightRef;
+          const { value: contentHeight } = contentHeightRef;
+          return containerHeight !== null && contentHeight !== null && contentHeight > containerHeight;
+        });
+        const needXBarRef = vue.computed(() => {
+          const { value: containerWidth } = containerWidthRef;
+          const { value: contentWidth } = contentWidthRef;
+          return containerWidth !== null && contentWidth !== null && contentWidth > containerWidth;
+        });
+        const mergedShowXBarRef = vue.computed(() => {
+          const { trigger } = props;
+          return trigger === "none" || isShowXBarRef.value;
+        });
+        const mergedShowYBarRef = vue.computed(() => {
+          const { trigger } = props;
+          return trigger === "none" || isShowYBarRef.value;
+        });
+        const mergedContainerRef = vue.computed(() => {
+          const { container } = props;
+          if (container) return container();
+          return containerRef.value;
+        });
+        const mergedContentRef = vue.computed(() => {
+          const { content } = props;
+          if (content) return content();
+          return contentRef.value;
+        });
+        const scrollTo = (options, y) => {
+          if (!props.scrollable) return;
+          if (typeof options === "number") {
+            scrollToPosition(options, y ?? 0, 0, false, "auto");
+            return;
+          }
+          const {
+            left,
+            top,
+            index,
+            elSize,
+            position,
+            behavior,
+            el,
+            debounce = true
+          } = options;
+          if (left !== void 0 || top !== void 0) {
+            scrollToPosition(left ?? 0, top ?? 0, 0, false, behavior);
+          }
+          if (el !== void 0) {
+            scrollToPosition(0, el.offsetTop, el.offsetHeight, debounce, behavior);
+          } else if (index !== void 0 && elSize !== void 0) {
+            scrollToPosition(0, index * elSize, elSize, debounce, behavior);
+          } else if (position === "bottom") {
+            scrollToPosition(0, Number.MAX_SAFE_INTEGER, 0, false, behavior);
+          } else if (position === "top") {
+            scrollToPosition(0, 0, 0, false, behavior);
+          }
+        };
+        const activateState = useReactivated(() => {
+          if (!props.container) {
+            scrollTo({
+              top: containerScrollTopRef.value,
+              left: containerScrollLeftRef.value
+            });
+          }
+        });
+        const handleContentResize = () => {
+          if (activateState.isDeactivated) return;
+          const { value: container } = mergedContainerRef;
+          if (container && previousScrollHeight > 0) {
+            const currentScrollHeight = container.scrollHeight;
+            const currentScrollTop = container.scrollTop;
+            const savedScrollHeight = previousScrollHeight;
+            const savedScrollTop = previousScrollTop;
+            const heightDiff = currentScrollHeight - savedScrollHeight;
+            if (heightDiff > 0 && currentScrollTop === savedScrollTop) {
+              container.scrollTop = savedScrollTop + heightDiff;
+            }
+            sync();
+          } else {
+            sync();
+          }
+        };
+        const handleContainerResize = (e) => {
+          if (activateState.isDeactivated) return;
+          const { onResize } = props;
+          if (onResize) {
+            onResize(e);
+          }
+          sync();
+        };
+        const scrollBy = (options, y) => {
+          if (!props.scrollable) return;
+          const { value: container } = mergedContainerRef;
+          if (!container) return;
+          if (typeof options === "object") {
+            container.scrollBy(options);
+          } else {
+            container.scrollBy(options, y || 0);
+          }
+        };
+        function scrollToPosition(left, top, elSize, debounce, behavior) {
+          const { value: container } = mergedContainerRef;
+          if (!container) return;
+          if (debounce) {
+            const { scrollTop, offsetHeight } = container;
+            if (top > scrollTop) {
+              if (top + elSize <= scrollTop + offsetHeight) ; else {
+                container.scrollTo({
+                  left,
+                  top: top + elSize - offsetHeight,
+                  behavior
+                });
+              }
+              return;
+            }
+          }
+          container.scrollTo({
+            left,
+            top,
+            behavior
+          });
+        }
+        function handleMouseEnterWrapper() {
+          showXBar();
+          showYBar();
+          sync();
+        }
+        function handleMouseLeaveWrapper() {
+          hideBar();
+        }
+        function hideBar() {
+          hideYBar();
+          hideXBar();
+        }
+        function hideYBar() {
+          if (yBarVanishTimerId !== void 0) {
+            window.clearTimeout(yBarVanishTimerId);
+          }
+          yBarVanishTimerId = window.setTimeout(() => {
+            isShowYBarRef.value = false;
+          }, props.duration);
+        }
+        function hideXBar() {
+          if (xBarVanishTimerId !== void 0) {
+            window.clearTimeout(xBarVanishTimerId);
+          }
+          xBarVanishTimerId = window.setTimeout(() => {
+            isShowXBarRef.value = false;
+          }, props.duration);
+        }
+        function showXBar() {
+          if (xBarVanishTimerId !== void 0) {
+            window.clearTimeout(xBarVanishTimerId);
+          }
+          isShowXBarRef.value = true;
+        }
+        function showYBar() {
+          if (yBarVanishTimerId !== void 0) {
+            window.clearTimeout(yBarVanishTimerId);
+          }
+          isShowYBarRef.value = true;
+        }
+        function handleScroll(e) {
+          const { onScroll } = props;
+          if (onScroll) onScroll(e);
+          const { value: container } = mergedContainerRef;
+          if (container) {
+            previousScrollHeight = container.scrollHeight;
+            previousScrollTop = container.scrollTop;
+          }
+          syncScrollState();
+        }
+        function syncScrollState() {
+          const { value: container } = mergedContainerRef;
+          if (container) {
+            containerScrollTopRef.value = container.scrollTop;
+            containerScrollLeftRef.value = container.scrollLeft * (rtlEnabledRef?.value ? -1 : 1);
+          }
+        }
+        function syncPositionState() {
+          const { value: content } = mergedContentRef;
+          if (content) {
+            contentHeightRef.value = content.offsetHeight;
+            contentWidthRef.value = content.offsetWidth;
+          }
+          const { value: container } = mergedContainerRef;
+          if (container) {
+            containerHeightRef.value = container.offsetHeight;
+            containerWidthRef.value = container.offsetWidth;
+          }
+          const { value: xRailEl } = xRailRef;
+          const { value: yRailEl } = yRailRef;
+          if (xRailEl) {
+            xRailSizeRef.value = xRailEl.offsetWidth;
+          }
+          if (yRailEl) {
+            yRailSizeRef.value = yRailEl.offsetHeight;
+          }
+        }
+        function syncUnifiedContainer() {
+          const { value: container } = mergedContainerRef;
+          if (container) {
+            containerScrollTopRef.value = container.scrollTop;
+            containerScrollLeftRef.value = container.scrollLeft * (rtlEnabledRef?.value ? -1 : 1);
+            containerHeightRef.value = container.offsetHeight;
+            containerWidthRef.value = container.offsetWidth;
+            contentHeightRef.value = container.scrollHeight;
+            contentWidthRef.value = container.scrollWidth;
+          }
+          const { value: xRailEl } = xRailRef;
+          const { value: yRailEl } = yRailRef;
+          if (xRailEl) {
+            xRailSizeRef.value = xRailEl.offsetWidth;
+          }
+          if (yRailEl) {
+            yRailSizeRef.value = yRailEl.offsetHeight;
+          }
+        }
+        function sync() {
+          if (!props.scrollable) return;
+          if (props.useUnifiedContainer) {
+            syncUnifiedContainer();
+          } else {
+            syncPositionState();
+            syncScrollState();
+          }
+          const { value: container } = mergedContainerRef;
+          if (container) {
+            previousScrollHeight = container.scrollHeight;
+            previousScrollTop = container.scrollTop;
+          }
+        }
+        function isMouseUpAway(e) {
+          return !wrapperRef.value?.contains(
+            getPreciseEventTarget(e)
+          );
+        }
+        function handleXScrollMouseDown(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          xBarPressed = true;
+          on("mousemove", window, handleXScrollMouseMove, true);
+          on("mouseup", window, handleXScrollMouseUp, true);
+          memoXLeft = containerScrollLeftRef.value;
+          memoMouseX = rtlEnabledRef?.value ? window.innerWidth - e.clientX : e.clientX;
+        }
+        function handleXScrollMouseMove(e) {
+          if (!xBarPressed) return;
+          if (xBarVanishTimerId !== void 0) {
+            window.clearTimeout(xBarVanishTimerId);
+          }
+          if (yBarVanishTimerId !== void 0) {
+            window.clearTimeout(yBarVanishTimerId);
+          }
+          const { value: containerWidth } = containerWidthRef;
+          const { value: contentWidth } = contentWidthRef;
+          const { value: xBarSize } = xBarSizeRef;
+          if (containerWidth === null || contentWidth === null) return;
+          const dX = rtlEnabledRef?.value ? window.innerWidth - e.clientX - memoMouseX : e.clientX - memoMouseX;
+          const dScrollLeft = dX * (contentWidth - containerWidth) / (containerWidth - xBarSize);
+          const toScrollLeftUpperBound = contentWidth - containerWidth;
+          let toScrollLeft = memoXLeft + dScrollLeft;
+          toScrollLeft = Math.min(toScrollLeftUpperBound, toScrollLeft);
+          toScrollLeft = Math.max(toScrollLeft, 0);
+          const { value: container } = mergedContainerRef;
+          if (container) {
+            container.scrollLeft = toScrollLeft * (rtlEnabledRef?.value ? -1 : 1);
+            const { internalOnUpdateScrollLeft } = props;
+            if (internalOnUpdateScrollLeft) internalOnUpdateScrollLeft(toScrollLeft);
+          }
+        }
+        function handleXScrollMouseUp(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          off("mousemove", window, handleXScrollMouseMove, true);
+          off("mouseup", window, handleXScrollMouseUp, true);
+          xBarPressed = false;
+          sync();
+          if (isMouseUpAway(e)) {
+            hideBar();
+          }
+        }
+        function handleYScrollMouseDown(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          yBarPressed = true;
+          on("mousemove", window, handleYScrollMouseMove, true);
+          on("mouseup", window, handleYScrollMouseUp, true);
+          memoYTop = containerScrollTopRef.value;
+          memoMouseY = e.clientY;
+        }
+        function handleYScrollMouseMove(e) {
+          if (!yBarPressed) return;
+          if (xBarVanishTimerId !== void 0) {
+            window.clearTimeout(xBarVanishTimerId);
+          }
+          if (yBarVanishTimerId !== void 0) {
+            window.clearTimeout(yBarVanishTimerId);
+          }
+          const { value: containerHeight } = containerHeightRef;
+          const { value: contentHeight } = contentHeightRef;
+          const { value: yBarSize } = yBarSizeRef;
+          if (containerHeight === null || contentHeight === null) return;
+          const dY = e.clientY - memoMouseY;
+          const dScrollTop = dY * (contentHeight - containerHeight) / (containerHeight - yBarSize);
+          const toScrollTopUpperBound = contentHeight - containerHeight;
+          let toScrollTop = memoYTop + dScrollTop;
+          toScrollTop = Math.min(toScrollTopUpperBound, toScrollTop);
+          toScrollTop = Math.max(toScrollTop, 0);
+          const { value: container } = mergedContainerRef;
+          if (container) {
+            container.scrollTop = toScrollTop;
+          }
+        }
+        function handleYScrollMouseUp(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          off("mousemove", window, handleYScrollMouseMove, true);
+          off("mouseup", window, handleYScrollMouseUp, true);
+          yBarPressed = false;
+          sync();
+          if (isMouseUpAway(e)) {
+            hideBar();
+          }
+        }
+        vue.watchEffect(() => {
+          const { value: needXBar } = needXBarRef;
+          const { value: needYBar } = needYBarRef;
+          const { value: mergedClsPrefix } = mergedClsPrefixRef;
+          const { value: xRailEl } = xRailRef;
+          const { value: yRailEl } = yRailRef;
+          if (xRailEl) {
+            if (!needXBar) {
+              xRailEl.classList.add(`${mergedClsPrefix}-scrollbar-rail--disabled`);
+            } else {
+              xRailEl.classList.remove(
+                `${mergedClsPrefix}-scrollbar-rail--disabled`
+              );
+            }
+          }
+          if (yRailEl) {
+            if (!needYBar) {
+              yRailEl.classList.add(`${mergedClsPrefix}-scrollbar-rail--disabled`);
+            } else {
+              yRailEl.classList.remove(
+                `${mergedClsPrefix}-scrollbar-rail--disabled`
+              );
+            }
+          }
+        });
+        vue.onMounted(() => {
+          if (props.container) return;
+          sync();
+          const { value: container } = mergedContainerRef;
+          if (container) {
+            previousScrollHeight = container.scrollHeight;
+            previousScrollTop = container.scrollTop;
+          }
+        });
+        vue.onBeforeUnmount(() => {
+          if (xBarVanishTimerId !== void 0) {
+            window.clearTimeout(xBarVanishTimerId);
+          }
+          if (yBarVanishTimerId !== void 0) {
+            window.clearTimeout(yBarVanishTimerId);
+          }
+          off("mousemove", window, handleYScrollMouseMove, true);
+          off("mouseup", window, handleYScrollMouseUp, true);
+        });
+        const cssVarsRef = vue.computed(() => {
+          const {
+            common: { cubicBezierEaseInOut },
+            self: {
+              color,
+              colorHover,
+              height,
+              width,
+              borderRadius,
+              railInsetHorizontalTop,
+              railInsetHorizontalBottom,
+              railInsetVerticalRight,
+              railInsetVerticalLeft,
+              railColor
+            }
+          } = themeRef.value;
+          const {
+            top: railTopHorizontalTop,
+            right: railRightHorizontalTop,
+            bottom: railBottomHorizontalTop,
+            left: railLeftHorizontalTop
+          } = getMargin(railInsetHorizontalTop);
+          const {
+            top: railTopHorizontalBottom,
+            right: railRightHorizontalBottom,
+            bottom: railBottomHorizontalBottom,
+            left: railLeftHorizontalBottom
+          } = getMargin(railInsetHorizontalBottom);
+          const {
+            top: railTopVerticalRight,
+            right: railRightVerticalRight,
+            bottom: railBottomVerticalRight,
+            left: railLeftVerticalRight
+          } = getMargin(
+            rtlEnabledRef?.value ? rtlInset(railInsetVerticalRight) : railInsetVerticalRight
+          );
+          const {
+            top: railTopVerticalLeft,
+            right: railRightVerticalLeft,
+            bottom: railBottomVerticalLeft,
+            left: railLeftVerticalLeft
+          } = getMargin(
+            rtlEnabledRef?.value ? rtlInset(railInsetVerticalLeft) : railInsetVerticalLeft
+          );
+          return {
+            "--u-scrollbar-bezier": cubicBezierEaseInOut,
+            "--u-scrollbar-color": color,
+            "--u-scrollbar-color-hover": colorHover,
+            "--u-scrollbar-border-radius": borderRadius,
+            "--u-scrollbar-width": width,
+            "--u-scrollbar-height": height,
+            "--u-scrollbar-rail-top-horizontal-top": railTopHorizontalTop,
+            "--u-scrollbar-rail-right-horizontal-top": railRightHorizontalTop,
+            "--u-scrollbar-rail-bottom-horizontal-top": railBottomHorizontalTop,
+            "--u-scrollbar-rail-left-horizontal-top": railLeftHorizontalTop,
+            "--u-scrollbar-rail-top-horizontal-bottom": railTopHorizontalBottom,
+            "--u-scrollbar-rail-right-horizontal-bottom": railRightHorizontalBottom,
+            "--u-scrollbar-rail-bottom-horizontal-bottom": railBottomHorizontalBottom,
+            "--u-scrollbar-rail-left-horizontal-bottom": railLeftHorizontalBottom,
+            "--u-scrollbar-rail-top-vertical-right": railTopVerticalRight,
+            "--u-scrollbar-rail-right-vertical-right": railRightVerticalRight,
+            "--u-scrollbar-rail-bottom-vertical-right": railBottomVerticalRight,
+            "--u-scrollbar-rail-left-vertical-right": railLeftVerticalRight,
+            "--u-scrollbar-rail-top-vertical-left": railTopVerticalLeft,
+            "--u-scrollbar-rail-right-vertical-left": railRightVerticalLeft,
+            "--u-scrollbar-rail-bottom-vertical-left": railBottomVerticalLeft,
+            "--u-scrollbar-rail-left-vertical-left": railLeftVerticalLeft,
+            "--u-scrollbar-rail-color": railColor
+          };
+        });
+        const themeClassHandle = inlineThemeDisabled ? useThemeClass("scrollbar", void 0, cssVarsRef, props) : void 0;
+        function getScrollState() {
+          const { value: container } = mergedContainerRef;
+          if (!container) {
+            return { scrollHeight: 0, scrollTop: 0, clientHeight: 0 };
+          }
+          return {
+            scrollHeight: container.scrollHeight,
+            scrollTop: container.scrollTop,
+            clientHeight: container.clientHeight
+          };
+        }
+        function adjustScrollTop(heightDiff) {
+          const { value: container } = mergedContainerRef;
+          if (!container) return;
+          container.scrollTop = container.scrollTop + heightDiff;
+        }
+        const exposedMethods = {
+          scrollTo,
+          scrollBy,
+          sync,
+          syncUnifiedContainer,
+          handleMouseEnterWrapper,
+          handleMouseLeaveWrapper,
+          getScrollState,
+          adjustScrollTop
+        };
+        return {
+          ...exposedMethods,
+          mergedClsPrefix: mergedClsPrefixRef,
+          rtlEnabled: rtlEnabledRef,
+          containerScrollTop: containerScrollTopRef,
+          wrapperRef,
+          containerRef,
+          contentRef,
+          yRailRef,
+          xRailRef,
+          needYBar: needYBarRef,
+          needXBar: needXBarRef,
+          yBarSizePx: yBarSizePxRef,
+          xBarSizePx: xBarSizePxRef,
+          yBarTopPx: yBarTopPxRef,
+          xBarLeftPx: xBarLeftPxRef,
+          isShowXBar: mergedShowXBarRef,
+          isShowYBar: mergedShowYBarRef,
+          isIos,
+          handleScroll,
+          handleContentResize,
+          handleContainerResize,
+          handleYScrollMouseDown,
+          handleXScrollMouseDown,
+          cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
+          themeClass: themeClassHandle?.themeClass,
+          onRender: themeClassHandle?.onRender
+        };
+      },
+      render() {
+        const {
+          $slots,
+          mergedClsPrefix,
+          triggerDisplayManually,
+          rtlEnabled,
+          internalHoistYRail,
+          yPlacement,
+          xPlacement,
+          xScrollable
+        } = this;
+        if (!this.scrollable) return $slots.default?.();
+        const triggerIsNone = this.trigger === "none";
+        const createYRail = (className, style2) => {
+          return /* @__PURE__ */ vue.h(
+            "div",
+            {
+              ref: "yRailRef",
+              class: [
+                `${mergedClsPrefix}-scrollbar-rail`,
+                `${mergedClsPrefix}-scrollbar-rail--vertical`,
+                `${mergedClsPrefix}-scrollbar-rail--vertical--${yPlacement}`,
+                className
+              ],
+              "data-scrollbar-rail": true,
+              style: [style2 || "", this.verticalRailStyle],
+              "aria-hidden": true
+            },
+            vue.h(
+              triggerIsNone ? Wrapper : vue.Transition,
+              triggerIsNone ? null : { name: "fade-in-transition" },
+              {
+                default: () => this.needYBar && this.isShowYBar && !this.isIos ? /* @__PURE__ */ vue.h(
+                  "div",
+                  {
+                    class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`,
+                    style: {
+                      height: this.yBarSizePx,
+                      top: this.yBarTopPx
+                    },
+                    onMousedown: this.handleYScrollMouseDown
+                  }
+                ) : null
+              }
+            )
+          );
+        };
+        const createChildren = () => {
+          this.onRender?.();
+          return vue.h(
+            "div",
+            vue.mergeProps(this.$attrs, {
+              role: "none",
+              ref: "wrapperRef",
+              class: [
+                `${mergedClsPrefix}-safe-top-scrollbar`,
+                this.themeClass,
+                rtlEnabled && `${mergedClsPrefix}-scrollbar--rtl`
+              ],
+              style: this.cssVars,
+              onMouseenter: triggerDisplayManually ? void 0 : this.handleMouseEnterWrapper,
+              onMouseleave: triggerDisplayManually ? void 0 : this.handleMouseLeaveWrapper
+            }),
+            [
+              this.container ? $slots.default?.() : /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  role: "none",
+                  ref: "containerRef",
+                  class: [
+                    `${mergedClsPrefix}-scrollbar-container`,
+                    this.containerClass
+                  ],
+                  style: this.containerStyle,
+                  onScroll: this.handleScroll,
+                  onWheel: this.onWheel
+                },
+                /* @__PURE__ */ vue.h(VResizeObserver, { onResize: this.handleContentResize }, {
+                  default: () => /* @__PURE__ */ vue.h(
+                    "div",
+                    {
+                      ref: "contentRef",
+                      role: "none",
+                      style: [
+                        {
+                          width: this.xScrollable ? "fit-content" : null
+                        },
+                        this.contentStyle
+                      ],
+                      class: [
+                        `${mergedClsPrefix}-scrollbar-content`,
+                        this.contentClass
+                      ]
+                    },
+                    $slots
+                  )
+                })
+              ),
+              internalHoistYRail ? null : createYRail(void 0, void 0),
+              xScrollable && /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  ref: "xRailRef",
+                  class: [
+                    `${mergedClsPrefix}-scrollbar-rail`,
+                    `${mergedClsPrefix}-scrollbar-rail--horizontal`,
+                    `${mergedClsPrefix}-scrollbar-rail--horizontal--${xPlacement}`
+                  ],
+                  style: this.horizontalRailStyle,
+                  "data-scrollbar-rail": true,
+                  "aria-hidden": true
+                },
+                vue.h(
+                  triggerIsNone ? Wrapper : vue.Transition,
+                  triggerIsNone ? null : { name: "fade-in-transition" },
+                  {
+                    default: () => this.needXBar && this.isShowXBar && !this.isIos ? /* @__PURE__ */ vue.h(
+                      "div",
+                      {
+                        class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`,
+                        style: {
+                          width: this.xBarSizePx,
+                          right: rtlEnabled ? this.xBarLeftPx : void 0,
+                          left: rtlEnabled ? void 0 : this.xBarLeftPx
+                        },
+                        onMousedown: this.handleXScrollMouseDown
+                      }
+                    ) : null
+                  }
+                )
+              )
+            ]
+          );
+        };
+        const scrollbarNode = this.container ? createChildren() : /* @__PURE__ */ vue.h(VResizeObserver, { onResize: this.handleContainerResize }, {
+          default: createChildren
+        });
+        if (internalHoistYRail) {
+          return /* @__PURE__ */ vue.h(vue.Fragment, null, scrollbarNode, createYRail(this.themeClass, this.cssVars));
+        } else {
+          return scrollbarNode;
+        }
+      }
+    });
+
     const checkboxGroupInjectionKey = createInjectionKey("u-checkbox-group");
     const checkboxBaseProps = {
       size: String,
@@ -61255,6 +62157,46 @@
       }
     });
 
+    const safeTopScrollbarProps = {
+      ...useTheme.props,
+      trigger: String,
+      xScrollable: Boolean,
+      onScroll: Function,
+      size: Number
+    };
+    const SafeTopScrollbar = vue.defineComponent({
+      name: "SafeTopScrollbar",
+      props: safeTopScrollbarProps,
+      setup() {
+        const scrollbarInstRef = vue.ref(null);
+        const exposedMethods = {
+          scrollTo: (...args) => {
+            scrollbarInstRef.value?.scrollTo(args[0], args[1]);
+          },
+          scrollBy: (...args) => {
+            scrollbarInstRef.value?.scrollBy(args[0], args[1]);
+          },
+          getScrollState: () => {
+            return scrollbarInstRef.value?.getScrollState() || {
+              scrollHeight: 0,
+              scrollTop: 0,
+              clientHeight: 0
+            };
+          },
+          adjustScrollTop: (heightDiff) => {
+            scrollbarInstRef.value?.adjustScrollTop(heightDiff);
+          }
+        };
+        return {
+          ...exposedMethods,
+          scrollbarInstRef
+        };
+      },
+      render() {
+        return /* @__PURE__ */ vue.h(SafeTopScrollbar$1, { ref: "scrollbarInstRef", ...this.$props }, this.$slots);
+      }
+    });
+
     const uploadInjectionKey = createInjectionKey("u-upload");
 
     const isImageFileType = type => type.includes("image/");
@@ -65010,12 +65952,31 @@
         }
       },
       setup(props, { slots }) {
+        const UChat = vue.inject(chatInjectionKey, null);
+        const onAttachmentDownload = UChat?.onAttachmentDownload;
         const getThumbnailUrl = (attachment) => {
           const url = [attachment.preview, attachment.thumbnail].find(
             (value) => typeof value === "string"
           );
           return url ?? null;
         };
+        const handleDownload = async (file) => {
+          if (onAttachmentDownload?.value) {
+            const attachment = props.attachments.find(
+              (att) => att.name === file.name
+            );
+            if (attachment) {
+              try {
+                await onAttachmentDownload.value(attachment);
+                return false;
+              } catch (error) {
+                console.error("Download failed:", error);
+                return false;
+              }
+            }
+          }
+          return true;
+        };
         const renderAttachment = () => {
           const fileList = props.attachments.map(
             (attachment, index) => ({
@@ -65034,6 +65995,7 @@
             UUpload,
             {
               abstract: true,
+              ...props.uploadProps,
               fileList,
               fileListStyle: props.withPadding ? {
                 display: "flex",
@@ -65048,7 +66010,7 @@
               showRetryButton: props.attachments.some(
                 (attachment) => attachment.status === "error"
               ),
-              ...props.uploadProps
+              onDownload: handleDownload
             },
             {
               default: () => /* @__PURE__ */ vue.h(UUploadFileList, null, {
@@ -65627,6 +66589,7 @@
           handleMessageSend,
           handleMessageRetry,
           handleFooterInputChange,
+          onAttachmentUpload,
           onChatClose,
           onChatShare,
           onUserProfile,
@@ -65638,6 +66601,7 @@
         const inputRef = vue.ref();
         const inputValue = vue.ref("");
         const attachmentFileList = vue.ref([]);
+        const uploadedAttachmentsMap = vue.ref(/* @__PURE__ */ new Map());
         const lastScrollTop = vue.ref(0);
         const scrollTopFired = vue.ref(false);
         const scrollBottomFired = vue.ref(false);
@@ -65665,6 +66629,8 @@
               scrollTopFired.value = false;
               scrollBottomFired.value = false;
               shouldScrollOnLoad.value = true;
+              attachmentFileList.value = [];
+              uploadedAttachmentsMap.value.clear();
               if (unreadBeforeRead > 0 && !notificationsShownSetRef.value.has(newChat.id)) {
                 hasUnreadMessages.value = true;
                 showNotificationManually.value = true;
@@ -65936,20 +66902,29 @@
           if ((hasContent || hasAttachments) && selectedChatRef.value && handleMessageSend) {
             isSending.value = true;
             try {
-              const attachments = attachmentFileList.value.length > 0 ? attachmentFileList.value.map((file) => ({
-                id: file.id,
-                type: ChatMessageType.FILE,
-                name: file.name,
-                url: file.url || (file.file ? URL.createObjectURL(file.file) : "#"),
-                size: file.file?.size,
-                thumbnail: file.thumbnailUrl ?? void 0,
-                status: file.status,
-                percentage: file.percentage ?? void 0
-              })) : void 0;
+              const attachments = attachmentFileList.value.length > 0 ? attachmentFileList.value.map((file) => {
+                const uploadedAttachment = uploadedAttachmentsMap.value.get(
+                  file.id
+                );
+                if (uploadedAttachment) {
+                  return uploadedAttachment;
+                }
+                return {
+                  id: file.id,
+                  type: ChatMessageType.FILE,
+                  name: file.name,
+                  url: file.url || (file.file ? URL.createObjectURL(file.file) : "#"),
+                  size: file.file?.size,
+                  thumbnail: file.thumbnailUrl ?? void 0,
+                  status: file.status,
+                  percentage: file.percentage ?? void 0
+                };
+              }) : void 0;
               handleMessageSend(inputValue.value.trim(), attachments);
               inputValue.value = "";
               attachmentFileList.value = [];
               chatInputs.value[selectedChatRef.value.id] = "";
+              uploadedAttachmentsMap.value.clear();
               hasUnreadMessages.value = false;
               showNotificationManually.value = false;
             } finally {
@@ -65959,44 +66934,25 @@
             }
           }
         };
-        let fileUploadTimer = null;
-        const pendingFiles = vue.ref([]);
         const handleFileListUpdate = (fileList) => {
-          const newFiles = fileList.filter(
-            (file) => !attachmentFileList.value.some(
-              (existing) => existing.id === file.id
-            ) && !pendingFiles.value.some(
-              (existing) => existing.id === file.id
-            )
-          );
-          if (newFiles.length > 0) {
-            pendingFiles.value = [...pendingFiles.value, ...newFiles];
-            if (fileUploadTimer) {
-              clearTimeout(fileUploadTimer);
-            }
-            fileUploadTimer = setTimeout(() => {
-              if (pendingFiles.value.length > 0 && handleMessageSend) {
-                const hasError = pendingFiles.value.some(
-                  (file) => file.status === "error"
-                );
-                const batchStatus = hasError ? "error" : "finished";
-                const attachments = pendingFiles.value.map(
-                  (file) => ({
-                    id: file.id,
-                    type: ChatMessageType.FILE,
-                    name: file.name,
-                    url: file.url || (file.file ? URL.createObjectURL(file.file) : "#"),
-                    size: file.file?.size,
-                    thumbnail: file.thumbnailUrl ?? void 0,
-                    status: batchStatus,
-                    percentage: file.percentage ?? void 0
-                  })
-                );
-                handleMessageSend("", attachments);
-                pendingFiles.value = [];
-                attachmentFileList.value = [];
+          attachmentFileList.value = fileList;
+          const uploadCallback = onAttachmentUpload?.value;
+          if (uploadCallback) {
+            const newFiles = fileList.filter(
+              (file) => file.file && !uploadedAttachmentsMap.value.has(file.id)
+            );
+            void (async () => {
+              for (const uploadFile of newFiles) {
+                if (uploadFile.file) {
+                  try {
+                    const attachment = await uploadCallback(uploadFile.file);
+                    uploadedAttachmentsMap.value.set(uploadFile.id, attachment);
+                  } catch (error) {
+                    console.error("File upload failed:", error);
+                  }
+                }
               }
-            }, SENDING_DELAY);
+            })();
           }
         };
         const renderFooter = () => {
@@ -66029,6 +66985,7 @@
                         size: "large",
                         class: `${mergedClsPrefixRef.value}-chat-main__attach-btn`,
                         ...footerButtonPropsRef.value,
+                        disabled: footerInputPropsRef.value?.disabled,
                         theme: mergedThemeRef.value.peers.Button,
                         themeOverrides: mergedThemeRef.value.peerOverrides.Button,
                         onClick: handleClick
@@ -66093,7 +67050,7 @@
       render() {
         const { mergedClsPrefixRef } = vue.inject(chatInjectionKey);
         return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main` }, this.renderHeader(), /* @__PURE__ */ vue.h(
-          Scrollbar,
+          SafeTopScrollbar,
           {
             ref: "messagesBodyRef",
             class: `${mergedClsPrefixRef.value}-chat-main__body`,
@@ -66296,6 +67253,10 @@
         type: Function,
         default: void 0
       },
+      onAttachmentDownload: {
+        type: Function,
+        default: void 0
+      },
       onFilterChange: {
         type: Function,
         default: void 0
@@ -66611,6 +67572,8 @@
           handleNetworkError,
           handleUploadError,
           handleSendError,
+          onAttachmentUpload: vue.toRef(props, "onAttachmentUpload"),
+          onAttachmentDownload: vue.toRef(props, "onAttachmentDownload"),
           onChatClose: vue.toRef(props, "onChatClose"),
           onChatShare: vue.toRef(props, "onChatShare"),
           onUserProfile: vue.toRef(props, "onUserProfile"),
@@ -108509,6 +109472,10 @@
           type: [Boolean, String],
           required: true
         },
+        maxWidth: Number,
+        maxHeight: Number,
+        minWidth: Number,
+        minHeight: Number,
         resizable: Boolean,
         onClickoutside: Function,
         onAfterLeave: Function,
@@ -108534,9 +109501,9 @@
           startPosition = isVertical.value ? e.clientY : e.clientX;
           memoizedBodyStyleCursor = document.body.style.cursor;
           document.body.style.cursor = isVertical.value ? "ns-resize" : "ew-resize";
-          window.addEventListener("mousemove", handleBodyMousemove);
-          window.addEventListener("mouseleave", handleBodyMouseleave);
-          window.addEventListener("mouseup", handleBodyMouseup);
+          document.body.addEventListener("mousemove", handleBodyMousemove);
+          document.body.addEventListener("mouseleave", handleBodyMouseleave);
+          document.body.addEventListener("mouseup", handleBodyMouseup);
         };
         const handleMouseenterResizeTrigger = () => {
           if (hoverTimerId !== null) {
@@ -108559,31 +109526,55 @@
           isHoverOnResizeTriggerRef.value = false;
         };
         const { doUpdateHeight, doUpdateWidth } = UDrawer;
-        const handleBodyMousemove = (e) => {
+        const regulateWidth = (size) => {
+          const { maxWidth } = props;
+          if (maxWidth && size > maxWidth) {
+            return maxWidth;
+          }
+          const { minWidth } = props;
+          if (minWidth && size < minWidth) {
+            return minWidth;
+          }
+          return size;
+        };
+        const regulateHeight = (size) => {
+          const { maxHeight } = props;
+          if (maxHeight && size > maxHeight) {
+            return maxHeight;
+          }
+          const { minHeight } = props;
+          if (minHeight && size < minHeight) {
+            return minHeight;
+          }
+          return size;
+        };
+        function handleBodyMousemove(e) {
           if (isDraggingRef.value) {
             if (isVertical.value) {
               let height = bodyRef.value?.offsetHeight || 0;
               const increment = startPosition - e.clientY;
               height += props.placement === "bottom" ? increment : -increment;
+              height = regulateHeight(height);
               doUpdateHeight(height);
               startPosition = e.clientY;
             } else {
               let width = bodyRef.value?.offsetWidth || 0;
               const increment = startPosition - e.clientX;
               width += props.placement === "right" ? increment : -increment;
+              width = regulateWidth(width);
               doUpdateWidth(width);
               startPosition = e.clientX;
             }
           }
-        };
+        }
         const handleBodyMouseup = () => {
           if (isDraggingRef.value) {
             startPosition = 0;
             isDraggingRef.value = false;
             document.body.style.cursor = memoizedBodyStyleCursor;
-            window.removeEventListener("mousemove", handleBodyMousemove);
-            window.removeEventListener("mouseup", handleBodyMouseup);
-            window.removeEventListener("mouseleave", handleBodyMouseleave);
+            document.body.removeEventListener("mousemove", handleBodyMousemove);
+            document.body.removeEventListener("mouseup", handleBodyMouseup);
+            document.body.removeEventListener("mouseleave", handleBodyMouseleave);
           }
         };
         const handleBodyMouseleave = handleBodyMouseup;
@@ -109075,6 +110066,12 @@
       minHeight: Number,
       resizable: Boolean,
       fullscreen: Boolean,
+      defaultWidth: {
+        type: [Number, String]
+      },
+      defaultHeight: {
+        type: [Number, String]
+      },
       onUpdateWidth: [Function, Array],
       onUpdateHeight: [Function, Array],
       "onUpdate:width": [Function, Array],
@@ -109140,8 +110137,8 @@
           props,
           mergedClsPrefixRef
         );
-        const uncontrolledWidthRef = vue.ref(sizesWidth[props.size]);
-        const uncontrolledHeightRef = vue.ref(sizesHeight[props.size]);
+        const uncontrolledWidthRef = vue.ref(props.defaultWidth || sizesWidth[props.size]);
+        const uncontrolledHeightRef = vue.ref(props.defaultHeight || sizesHeight[props.size]);
         const mergedWidthRef = useMergedState(
           vue.toRef(props, "width"),
           uncontrolledWidthRef
@@ -109162,32 +110159,29 @@
           if (placement === "left" || placement === "right") return "";
           return formatLength(mergedHeightRef.value);
         });
-        const doUpdate = (isHeight, value) => {
-          let {
-            onUpdateWidth: onUpdate,
-            "onUpdate:width": _onUpdate,
-            maxWidth: max,
-            minWidth: min
-          } = props;
-          let _ref = uncontrolledWidthRef;
-          if (isHeight) {
-            onUpdate = props.onUpdateHeight;
-            _onUpdate = props["onUpdate:height"];
-            max = props.maxHeight;
-            min = props.minHeight;
-            _ref = uncontrolledHeightRef;
-          }
-          if (max && value > max) value = max;
-          if (min && value < min) value = min;
-          if (onUpdate) call(onUpdate, value);
-          if (_onUpdate) call(_onUpdate, value);
-          _ref.value = value;
-        };
-        const doUpdateWidth = doUpdate.bind(null, false);
-        const doUpdateHeight = doUpdate.bind(null, true);
+        const doUpdateWidth = (value) => {
+          const { onUpdateWidth, "onUpdate:width": _onUpdateWidth } = props;
+          if (onUpdateWidth) {
+            call(onUpdateWidth, value);
+          }
+          if (_onUpdateWidth) {
+            call(_onUpdateWidth, value);
+          }
+          uncontrolledWidthRef.value = value;
+        };
+        const doUpdateHeight = (value) => {
+          const { onUpdateHeight, "onUpdate:width": _onUpdateHeight } = props;
+          if (onUpdateHeight) {
+            call(onUpdateHeight, value);
+          }
+          if (_onUpdateHeight) {
+            call(_onUpdateHeight, value);
+          }
+          uncontrolledHeightRef.value = value;
+        };
         vue.watchEffect(() => {
-          doUpdateWidth(sizesWidth[props.size]);
-          doUpdateHeight(sizesHeight[props.size]);
+          doUpdateWidth(Number(props.defaultWidth || sizesWidth[props.size]));
+          doUpdateHeight(Number(props.defaultHeight || sizesHeight[props.size]));
         });
         const mergedBodyStyleRef = vue.computed(() => {
           return [
@@ -109373,6 +110367,10 @@
                     trapFocus: this.trapFocus,
                     autoFocus: this.autoFocus,
                     resizable: this.resizable,
+                    maxHeight: this.maxHeight,
+                    minHeight: this.minHeight,
+                    maxWidth: this.maxWidth,
+                    minWidth: this.minWidth,
                     showMask: this.showMask,
                     onEsc: this.handleEsc,
                     onClickoutside: this.handleMaskClick
@@ -135003,6 +136001,7 @@
         URate: Rate,
         UResult: Result,
         URow: URow,
+        USafeTopScrollbar: SafeTopScrollbar,
         UScrollbar: Scrollbar,
         USelect: USelect,
         USkeleton: USkeleton,
@@ -135149,6 +136148,7 @@
         rateProps: rateProps,
         resultProps: resultProps,
         rowProps: rowProps,
+        safeTopScrollbarProps: safeTopScrollbarProps,
         scrollbarProps: scrollbarProps,
         selectProps: selectProps,
         skeletonProps: skeletonProps,
@@ -135187,7 +136187,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.10.1";
+    var version = "1.11.0";
 
     function create({
       componentPrefix = "U",
@@ -135329,6 +136329,7 @@
       Result: resultDark,
       Row: rowDark,
       Scrollbar: scrollbarDark,
+      SafeTopScrollbar: safeTopScrollbarDark,
       Select: selectDark,
       Skeleton: skeletonDark,
       Slider: sliderDark,
@@ -135425,6 +136426,7 @@
       Row: rowLight,
       Result: resultLight,
       Scrollbar: scrollbarLight,
+      SafeTopScrollbar: safeTopScrollbarLight,
       Skeleton: skeletonLight,
       Select: selectLight,
       Slider: sliderLight,
@@ -136114,6 +137116,7 @@
     exports.URate = Rate;
     exports.UResult = Result;
     exports.URow = URow;
+    exports.USafeTopScrollbar = SafeTopScrollbar;
     exports.UScrollbar = Scrollbar;
     exports.USelect = USelect;
     exports.USkeleton = USkeleton;
@@ -136369,6 +137372,7 @@
     exports.resultProps = resultProps;
     exports.rowProps = rowProps;
     exports.ruRU = ruRu;
+    exports.safeTopScrollbarProps = safeTopScrollbarProps;
     exports.scrollbarDark = scrollbarDark;
     exports.scrollbarProps = scrollbarProps;
     exports.selectDark = selectDark;