@uzum-tech/ui 1.8.1 → 1.9.0

package/dist/index.js

@@ -771,6 +771,16 @@
       return /^\d+$/.test(value) ? `${value}px` : value;
     };
 
+    function rtlInset(inset) {
+      const {
+        left,
+        right,
+        top,
+        bottom
+      } = getMargin(inset);
+      return `${top} ${left} ${bottom} ${right}`;
+    }
+
     function ampCount(selector) {
       let cnt = 0;
       for (let i = 0; i < selector.length; ++i) {
@@ -3017,7 +3027,7 @@
       if (typeof selector === 'string') {
         return document.querySelector(selector);
       }
-      return selector();
+      return selector() || null;
     }
 
     var VLazyTeleport = vue.defineComponent({
@@ -3109,8 +3119,11 @@
     };
     const keepOffsetDirection = {
       top: true,
+      // top++
       bottom: false,
+      // top--
       left: true,
+      // left++
       right: false // left--
     };
     const cssPositionToOppositeAlign = {
@@ -4281,6 +4294,7 @@
 
     let maybeTouch;
     function ensureMaybeTouch() {
+      if (typeof document === 'undefined') return false;
       if (maybeTouch === undefined) {
         if ('matchMedia' in window) {
           maybeTouch = window.matchMedia('(pointer:coarse)').matches;
@@ -4292,12 +4306,139 @@
     }
     let wheelScale;
     function ensureWheelScale() {
+      if (typeof document === 'undefined') return 1;
       if (wheelScale === undefined) {
         wheelScale = 'chrome' in window ? window.devicePixelRatio : 1;
       }
       return wheelScale;
     }
 
+    const xScrollInjextionKey = 'VVirtualListXScroll';
+
+    function setupXScroll({
+      columnsRef,
+      renderColRef,
+      renderItemWithColsRef
+    }) {
+      const listWidthRef = vue.ref(0);
+      const scrollLeftRef = vue.ref(0);
+      const xFinweckTreeRef = vue.computed(() => {
+        const columns = columnsRef.value;
+        if (columns.length === 0) {
+          return null;
+        }
+        const ft = new FinweckTree(columns.length, 0);
+        columns.forEach((column, index) => {
+          ft.add(index, column.width);
+        });
+        return ft;
+      });
+      const startIndexRef = useMemo(() => {
+        const xFinweckTree = xFinweckTreeRef.value;
+        if (xFinweckTree !== null) {
+          return Math.max(xFinweckTree.getBound(scrollLeftRef.value) - 1, 0);
+        } else {
+          return 0;
+        }
+      });
+      const getLeft = index => {
+        const xFinweckTree = xFinweckTreeRef.value;
+        if (xFinweckTree !== null) {
+          return xFinweckTree.sum(index);
+        } else {
+          return 0;
+        }
+      };
+      const endIndexRef = useMemo(() => {
+        const xFinweckTree = xFinweckTreeRef.value;
+        if (xFinweckTree !== null) {
+          return Math.min(xFinweckTree.getBound(scrollLeftRef.value + listWidthRef.value) + 1, columnsRef.value.length - 1);
+        } else {
+          return 0;
+        }
+      });
+      vue.provide(xScrollInjextionKey, {
+        startIndexRef,
+        endIndexRef,
+        columnsRef,
+        renderColRef,
+        renderItemWithColsRef,
+        getLeft
+      });
+      return {
+        listWidthRef,
+        scrollLeftRef
+      };
+    }
+
+    const VirtualListRow = vue.defineComponent({
+      name: 'VirtualListRow',
+      props: {
+        index: {
+          type: Number,
+          required: true
+        },
+        item: {
+          type: Object,
+          required: true
+        }
+      },
+      setup() {
+        const {
+          startIndexRef,
+          endIndexRef,
+          columnsRef,
+          getLeft,
+          renderColRef,
+          renderItemWithColsRef
+        } =
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        vue.inject(xScrollInjextionKey);
+        return {
+          startIndex: startIndexRef,
+          endIndex: endIndexRef,
+          columns: columnsRef,
+          renderCol: renderColRef,
+          renderItemWithCols: renderItemWithColsRef,
+          getLeft
+        };
+      },
+      render() {
+        const {
+          startIndex,
+          endIndex,
+          columns,
+          renderCol,
+          renderItemWithCols,
+          getLeft,
+          item
+        } = this;
+        if (renderItemWithCols != null) {
+          return renderItemWithCols({
+            itemIndex: this.index,
+            startColIndex: startIndex,
+            endColIndex: endIndex,
+            allColumns: columns,
+            item,
+            getLeft
+          });
+        }
+        if (renderCol != null) {
+          const items = [];
+          for (let i = startIndex; i <= endIndex; ++i) {
+            const column = columns[i];
+            items.push(renderCol({
+              column,
+              left: getLeft(i),
+              item
+            }));
+          }
+          return items;
+        }
+        return null;
+      }
+    });
+
     /* eslint-disable no-void */
     /* eslint-disable @typescript-eslint/restrict-plus-operands */
     const styles$1 = c('.v-vl', {
@@ -4320,6 +4461,12 @@
           type: Boolean,
           default: true
         },
+        columns: {
+          type: Array,
+          default: () => []
+        },
+        renderCol: Function,
+        renderItemWithCols: Function,
         items: {
           type: Array,
           default: () => []
@@ -4392,7 +4539,7 @@
           // remount
           scrollTo({
             top: scrollTopRef.value,
-            left: scrollLeft
+            left: scrollLeftRef.value
           });
         });
         vue.onDeactivated(() => {
@@ -4401,6 +4548,17 @@
             activateStateInitialized = true;
           }
         });
+        const totalWidthRef = useMemo(() => {
+          if (props.renderCol == null && props.renderItemWithCols == null) {
+            return undefined;
+          }
+          if (props.columns.length === 0) return undefined;
+          let width = 0;
+          props.columns.forEach(column => {
+            width += column.width;
+          });
+          return width;
+        });
         const keyIndexMapRef = vue.computed(() => {
           const map = new Map();
           const {
@@ -4411,6 +4569,14 @@
           });
           return map;
         });
+        const {
+          scrollLeftRef,
+          listWidthRef
+        } = setupXScroll({
+          columnsRef: vue.toRef(props, 'columns'),
+          renderColRef: vue.toRef(props, 'renderCol'),
+          renderItemWithColsRef: vue.toRef(props, 'renderItemWithCols')
+        });
         const listElRef = vue.ref(null);
         const listHeightRef = vue.ref(undefined);
         const keyToHeightOffset = new Map();
@@ -4431,7 +4597,6 @@
           return ft;
         });
         const finweckTreeUpdateTrigger = vue.ref(0);
-        let scrollLeft = 0;
         const scrollTopRef = vue.ref(0);
         const startIndexRef = useMemo(() => {
           return Math.max(finweckTreeRef.value.getBound(scrollTopRef.value - depx(props.paddingTop)) - 1, 0);
@@ -4618,8 +4783,15 @@
           // List is HTMLElement
           if (isHideByVShow(entry.target)) return;
           // If height is same, return
-          if (entry.contentRect.height === listHeightRef.value) return;
+          if (props.renderCol == null && props.renderItemWithCols == null) {
+            if (entry.contentRect.height === listHeightRef.value) return;
+          } else {
+            if (entry.contentRect.height === listHeightRef.value && entry.contentRect.width === listWidthRef.value) {
+              return;
+            }
+          }
           listHeightRef.value = entry.contentRect.height;
+          listWidthRef.value = entry.contentRect.width;
           const {
             onResize
           } = props;
@@ -4633,7 +4805,7 @@
           // https://github.com/TuSimple/naive-ui/issues/811
           if (listEl == null) return;
           scrollTopRef.value = listEl.scrollTop;
-          scrollLeft = listEl.scrollLeft;
+          scrollLeftRef.value = listEl.scrollLeft;
         }
         function isHideByVShow(el) {
           let cursor = el;
@@ -4658,6 +4830,7 @@
             finweckTreeUpdateTrigger.value;
             return [props.itemsStyle, {
               boxSizing: 'content-box',
+              width: pxfy(totalWidthRef.value),
               height: itemResizable ? '' : height,
               minHeight: itemResizable ? height : '',
               paddingTop: pxfy(props.paddingTop),
@@ -4706,24 +4879,40 @@
               class: 'v-vl-visible-items',
               style: this.visibleItemsStyle
             }, this.visibleItemsProps), {
-              default: () => this.viewportItems.map(item => {
-                const key = item[keyField];
-                const index = keyToIndex.get(key);
-                const itemVNode = this.$slots.default({
-                  item,
-                  index
-                })[0];
-                if (itemResizable) {
-                  return vue.h(VResizeObserver, {
-                    key,
-                    onResize: entry => this.handleItemResize(key, entry)
-                  }, {
-                    default: () => itemVNode
-                  });
-                }
-                itemVNode.key = key;
-                return itemVNode;
-              })
+              default: () => {
+                const {
+                  renderCol,
+                  renderItemWithCols
+                } = this;
+                return this.viewportItems.map(item => {
+                  const key = item[keyField];
+                  const index = keyToIndex.get(key);
+                  const renderedCols = renderCol != null ? vue.h(VirtualListRow, {
+                    index,
+                    item
+                  }) : undefined;
+                  const renderedItemWithCols = renderItemWithCols != null ? vue.h(VirtualListRow, {
+                    index,
+                    item
+                  }) : undefined;
+                  const itemVNode = this.$slots.default({
+                    item,
+                    renderedCols,
+                    renderedItemWithCols,
+                    index
+                  })[0];
+                  if (itemResizable) {
+                    return vue.h(VResizeObserver, {
+                      key,
+                      onResize: entry => this.handleItemResize(key, entry)
+                    }, {
+                      default: () => itemVNode
+                    });
+                  }
+                  itemVNode.key = key;
+                  return itemVNode;
+                });
+              }
             })]) : (_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)]);
           }
         });
@@ -4790,6 +4979,7 @@
         getCounter: Function,
         getTail: Function,
         updateCounter: Function,
+        onUpdateCount: Function,
         onUpdateOverflow: Function
       },
       setup(props, {
@@ -4797,7 +4987,7 @@
       }) {
         const selfRef = vue.ref(null);
         const counterRef = vue.ref(null);
-        function deriveCounter() {
+        function deriveCounter(options) {
           const {
             value: self
           } = selfRef;
@@ -4816,6 +5006,13 @@
           const {
             children
           } = self;
+          if (options.showAllItemsBeforeCalculate) {
+            for (const child of children) {
+              if (child.hasAttribute(hiddenAttr)) {
+                child.removeAttribute(hiddenAttr);
+              }
+            }
+          }
           const containerWidth = self.offsetWidth;
           const childWidths = [];
           const tail = slots.tail ? getTail === null || getTail === void 0 ? void 0 : getTail() : null;
@@ -4862,6 +5059,10 @@
                       tail.style.maxWidth = '';
                     }
                   }
+                  const {
+                    onUpdateCount
+                  } = props;
+                  if (onUpdateCount) onUpdateCount(restCount);
                   break;
                 }
               }
@@ -4888,7 +5089,9 @@
           anchorMetaName: cssrAnchorMetaName$1,
           ssr: ssrAdapter
         });
-        vue.onMounted(deriveCounter);
+        vue.onMounted(() => deriveCounter({
+          showAllItemsBeforeCalculate: false
+        }));
         // besides onMounted, other case should be manually triggered, or we shoud watch items
         return {
           selfRef,
@@ -4901,7 +5104,9 @@
           $slots
         } = this;
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        vue.nextTick(this.sync);
+        vue.nextTick(() => this.sync({
+          showAllItemsBeforeCalculate: false
+        }));
         // It shouldn't have border
         return vue.h('div', {
           class: 'v-overflow',
@@ -4969,7 +5174,6 @@
           return !!element.href && element.rel !== 'ignore';
         case 'INPUT':
           return element.type !== 'hidden' && element.type !== 'file';
-        case 'BUTTON':
         case 'SELECT':
         case 'TEXTAREA':
           return true;
@@ -4989,8 +5193,8 @@
           default: true
         },
         onEsc: Function,
-        initialFocusTo: String,
-        finalFocusTo: String,
+        initialFocusTo: [String, Function],
+        finalFocusTo: [String, Function],
         returnFocusOnDeactivated: {
           type: Boolean,
           default: true
@@ -31510,12 +31714,27 @@
       }
     });
 
+    const commonVars$8 = {
+      railInsetHorizontalBottom: "auto 2px 4px 2px",
+      railInsetHorizontalTop: "4px 2px auto 2px",
+      railInsetVerticalRight: "2px 4px 2px auto",
+      railInsetVerticalLeft: "2px auto 2px 4px",
+      railColor: "transparent"
+    };
+
     const self$1m = vars => {
       const {
         scrollbarColor,
-        scrollbarColorHover
+        scrollbarColorHover,
+        scrollbarHeight,
+        scrollbarWidth,
+        scrollbarBorderRadius
       } = vars;
       return {
+        ...commonVars$8,
+        height: scrollbarHeight,
+        width: scrollbarWidth,
+        borderRadius: scrollbarBorderRadius,
         color: scrollbarColor,
         colorHover: scrollbarColorHover
       };
@@ -31585,50 +31804,60 @@
         width: 0;
         height: 0;
         display: none;
-      `), c$1(">", [cB("scrollbar-content", `
+      `), 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", `
-        left: 2px;
-        right: 2px;
-        bottom: 4px;
         height: var(--u-scrollbar-height);
       `, [c$1(">", [cE("scrollbar", `
             height: var(--u-scrollbar-height);
             border-radius: var(--u-scrollbar-border-radius);
             right: 0;
-          `)])]), cM("vertical", `
-        right: 4px;
-        top: 2px;
-        bottom: 2px;
+          `)])]), 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("disabled", [c$1(">", [cE("scrollbar", {
-      pointerEvents: "none"
-    })])]), c$1(">", [cE("scrollbar", `
+          `)])]), 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", {
-      backgroundColor: "var(--u-scrollbar-color-hover)"
-    })])])])])]);
+        `, [fadeInTransition(), c$1("&:hover", "background-color: var(--u-scrollbar-color-hover);")])])])])]);
 
     const scrollbarProps$1 = {
       ...useTheme.props,
-      size: {
-        type: Number,
-        default: 5
-      },
       duration: {
         type: Number,
         default: 0
@@ -31649,7 +31878,7 @@
       content: Function,
       containerClass: String,
       containerStyle: [String, Object],
-      contentClass: String,
+      contentClass: [String, Array],
       contentStyle: [String, Object],
       horizontalRailStyle: [String, Object],
       verticalRailStyle: [String, Object],
@@ -31657,7 +31886,15 @@
       onWheel: Function,
       onResize: Function,
       internalOnUpdateScrollLeft: Function,
-      internalHoistYRail: Boolean
+      internalHoistYRail: Boolean,
+      yPlacement: {
+        type: String,
+        default: "right"
+      },
+      xPlacement: {
+        type: String,
+        default: "bottom"
+      }
     };
     const Scrollbar$1 = vue.defineComponent({
       name: "Scrollbar",
@@ -31690,6 +31927,14 @@
         let memoMouseX = 0;
         let memoMouseY = 0;
         const isIos = useIsIos();
+        const themeRef = useTheme(
+          "Scrollbar",
+          "-scrollbar",
+          style$1C,
+          scrollbarLight,
+          props,
+          mergedClsPrefixRef
+        );
         const yBarSizeRef = vue.computed(() => {
           const { value: containerHeight } = containerHeightRef;
           const { value: contentHeight } = contentHeightRef;
@@ -31699,7 +31944,7 @@
           } else {
             return Math.min(
               containerHeight,
-              yRailSize * containerHeight / contentHeight + props.size * 1.5
+              yRailSize * containerHeight / contentHeight + depx(themeRef.value.self.width) * 1.5
             );
           }
         });
@@ -31713,7 +31958,7 @@
           if (containerWidth === null || contentWidth === null || xRailSize === null) {
             return 0;
           } else {
-            return xRailSize * containerWidth / contentWidth + props.size * 1.5;
+            return xRailSize * containerWidth / contentWidth + depx(themeRef.value.self.height) * 1.5;
           }
         });
         const xBarSizePxRef = vue.computed(() => {
@@ -31728,7 +31973,9 @@
             return 0;
           } else {
             const heightDiff = contentHeight - containerHeight;
-            if (!heightDiff) return 0;
+            if (!heightDiff) {
+              return 0;
+            }
             return containerScrollTop / heightDiff * (yRailSize - yBarSizeRef.value);
           }
         });
@@ -31744,7 +31991,9 @@
             return 0;
           } else {
             const widthDiff = contentWidth - containerWidth;
-            if (!widthDiff) return 0;
+            if (!widthDiff) {
+              return 0;
+            }
             return containerScrollLeft / widthDiff * (xRailSize - xBarSizeRef.value);
           }
         });
@@ -31771,36 +32020,24 @@
         });
         const mergedContainerRef = vue.computed(() => {
           const { container } = props;
-          if (container) return container();
+          if (container) {
+            return container();
+          }
           return containerRef.value;
         });
         const mergedContentRef = vue.computed(() => {
           const { content } = props;
-          if (content) return content();
-          return contentRef.value;
-        });
-        const activateState = useReactivated(() => {
-          if (!props.container) {
-            scrollTo({
-              top: containerScrollTopRef.value,
-              left: containerScrollLeftRef.value
-            });
+          if (content) {
+            return content();
           }
+          return contentRef.value;
         });
-        const handleContentResize = () => {
-          if (activateState.isDeactivated) return;
-          sync();
-        };
-        const handleContainerResize = (e) => {
-          if (activateState.isDeactivated) return;
-          const { onResize } = props;
-          if (onResize) onResize(e);
-          sync();
-        };
         const scrollTo = (options, y) => {
-          if (!props.scrollable) return;
+          if (!props.scrollable) {
+            return;
+          }
           if (typeof options === "number") {
-            scrollToPosition(y ?? 0, options, 0, false, "auto");
+            scrollToPosition(options, y ?? 0, 0, false, "auto");
             return;
           }
           const {
@@ -31826,10 +32063,38 @@
             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;
+          }
+          sync();
+        };
+        const handleContainerResize = (e) => {
+          if (activateState.isDeactivated) {
+            return;
+          }
+          const { onResize } = props;
+          if (onResize) {
+            onResize(e);
+          }
+          sync();
+        };
         const scrollBy = (options, y) => {
-          if (!props.scrollable) return;
+          if (!props.scrollable) {
+            return;
+          }
           const { value: container } = mergedContainerRef;
-          if (!container) return;
+          if (!container) {
+            return;
+          }
           if (typeof options === "object") {
             container.scrollBy(options);
           } else {
@@ -31838,7 +32103,9 @@
         };
         function scrollToPosition(left, top, elSize, debounce, behavior) {
           const { value: container } = mergedContainerRef;
-          if (!container) return;
+          if (!container) {
+            return;
+          }
           if (debounce) {
             const { scrollTop, offsetHeight } = container;
             if (top > scrollTop) {
@@ -31900,7 +32167,9 @@
         }
         function handleScroll(e) {
           const { onScroll } = props;
-          if (onScroll) onScroll(e);
+          if (onScroll) {
+            onScroll(e);
+          }
           syncScrollState();
         }
         function syncScrollState() {
@@ -31950,7 +32219,9 @@
           }
         }
         function sync() {
-          if (!props.scrollable) return;
+          if (!props.scrollable) {
+            return;
+          }
           if (props.useUnifiedContainer) {
             syncUnifiedContainer();
           } else {
@@ -31973,7 +32244,9 @@
           memoMouseX = rtlEnabledRef?.value ? window.innerWidth - e.clientX : e.clientX;
         }
         function handleXScrollMouseMove(e) {
-          if (!xBarPressed) return;
+          if (!xBarPressed) {
+            return;
+          }
           if (xBarVanishTimerId !== void 0) {
             window.clearTimeout(xBarVanishTimerId);
           }
@@ -31983,7 +32256,9 @@
           const { value: containerWidth } = containerWidthRef;
           const { value: contentWidth } = contentWidthRef;
           const { value: xBarSize } = xBarSizeRef;
-          if (containerWidth === null || contentWidth === null) return;
+          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;
@@ -31994,7 +32269,9 @@
           if (container) {
             container.scrollLeft = toScrollLeft * (rtlEnabledRef?.value ? -1 : 1);
             const { internalOnUpdateScrollLeft } = props;
-            if (internalOnUpdateScrollLeft) internalOnUpdateScrollLeft(toScrollLeft);
+            if (internalOnUpdateScrollLeft) {
+              internalOnUpdateScrollLeft(toScrollLeft);
+            }
           }
         }
         function handleXScrollMouseUp(e) {
@@ -32018,7 +32295,9 @@
           memoMouseY = e.clientY;
         }
         function handleYScrollMouseMove(e) {
-          if (!yBarPressed) return;
+          if (!yBarPressed) {
+            return;
+          }
           if (xBarVanishTimerId !== void 0) {
             window.clearTimeout(xBarVanishTimerId);
           }
@@ -32028,7 +32307,9 @@
           const { value: containerHeight } = containerHeightRef;
           const { value: contentHeight } = contentHeightRef;
           const { value: yBarSize } = yBarSizeRef;
-          if (containerHeight === null || contentHeight === null) return;
+          if (containerHeight === null || contentHeight === null) {
+            return;
+          }
           const dY = e.clientY - memoMouseY;
           const dScrollTop = dY * (contentHeight - containerHeight) / (containerHeight - yBarSize);
           const toScrollTopUpperBound = contentHeight - containerHeight;
@@ -32077,7 +32358,9 @@
           }
         });
         vue.onMounted(() => {
-          if (props.container) return;
+          if (props.container) {
+            return;
+          }
           sync();
         });
         vue.onBeforeUnmount(() => {
@@ -32090,31 +32373,74 @@
           off("mousemove", window, handleYScrollMouseMove, true);
           off("mouseup", window, handleYScrollMouseUp, true);
         });
-        const themeRef = useTheme(
-          "Scrollbar",
-          "-scrollbar",
-          style$1C,
-          scrollbarLight,
-          props,
-          mergedClsPrefixRef
-        );
         const cssVarsRef = vue.computed(() => {
           const {
-            common: {
-              cubicBezierEaseInOut,
-              scrollbarBorderRadius,
-              scrollbarHeight,
-              scrollbarWidth
-            },
-            self: { color, colorHover }
+            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": scrollbarBorderRadius,
-            "--u-scrollbar-width": scrollbarWidth,
-            "--u-scrollbar-height": scrollbarHeight
+            "--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;
@@ -32161,22 +32487,29 @@
           mergedClsPrefix,
           triggerDisplayManually,
           rtlEnabled,
-          internalHoistYRail
+          internalHoistYRail,
+          yPlacement,
+          xPlacement,
+          xScrollable
         } = this;
-        if (!this.scrollable) return $slots.default?.();
+        if (!this.scrollable) {
+          return $slots.default?.();
+        }
         const triggerIsNone = this.trigger === "none";
-        const createYRail = (style2) => {
+        const createYRail = (className, style2) => {
           return /* @__PURE__ */ vue.h(
             "div",
             {
               ref: "yRailRef",
               class: [
                 `${mergedClsPrefix}-scrollbar-rail`,
-                `${mergedClsPrefix}-scrollbar-rail--vertical`
+                `${mergedClsPrefix}-scrollbar-rail--vertical`,
+                `${mergedClsPrefix}-scrollbar-rail--vertical--${yPlacement}`,
+                className
               ],
               "data-scrollbar-rail": true,
               style: [style2 || "", this.verticalRailStyle],
-              "aria-hiddens": true
+              "aria-hidden": true
             },
             vue.h(
               triggerIsNone ? Wrapper : vue.Transition,
@@ -32248,14 +32581,15 @@
                   )
                 })
               ),
-              internalHoistYRail ? null : createYRail(void 0),
-              this.xScrollable && /* @__PURE__ */ vue.h(
+              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`,
+                    `${mergedClsPrefix}-scrollbar-rail--horizontal--${xPlacement}`
                   ],
                   style: this.horizontalRailStyle,
                   "data-scrollbar-rail": true,
@@ -32287,7 +32621,7 @@
           default: createChildren
         });
         if (internalHoistYRail) {
-          return /* @__PURE__ */ vue.h(vue.Fragment, null, scrollbarNode, createYRail(this.cssVars));
+          return /* @__PURE__ */ vue.h(vue.Fragment, null, scrollbarNode, createYRail(this.themeClass, this.cssVars));
         } else {
           return scrollbarNode;
         }
@@ -35786,7 +36120,9 @@
             if (patternInputEl) {
               patternInputEl.style.width = `${patternInputMirrorEl.offsetWidth}px`;
               if (props.maxTagCount !== "responsive") {
-                overflowRef.value?.sync();
+                overflowRef.value?.sync({
+                  showAllItemsBeforeCalculate: false
+                });
               }
             }
           }
@@ -37880,8 +38216,8 @@
       const successPress = "#0f9b42";
       const warningHover = "#f79942";
       const warningPress = "#df7a1d";
-      const errorHover = "#f75e4d";
-      const errorPress = "#e53a27";
+      const errorHover = "#cb0000";
+      const errorDisable = "#f8a39a";
       return {
         ...commonVariables$5,
         heightTiny: heightMini,
@@ -37903,20 +38239,28 @@
         colorOpacitySecondaryPressed: "0.28",
         colorOpacitySecondaryFocus: "0.27",
         colorSecondary: elementsTertiary,
-        colorSecondaryHover: elementsTertiary,
+        colorSecondaryHover: elementsQuaternary,
         colorSecondaryPressed: elementsTertiary,
+        colorSecondaryFocus: elementsTertiary,
+        colorSecondaryDisabled: elementsTertiary,
+        textColorSecondaryDisabled: elementsQuinary,
         waveColorSecondary: elementsQuinary,
         // tertiary
         colorTertiary: elementsPrimary,
         colorTertiaryHover: elementsSenary,
         colorTertiaryPressed: elementsPrimary,
-        colorTertiaryDisalbed: elementsTertiary,
-        waveColorTertiary: elementsTertiary,
+        colorTertiaryFocus: elementsPrimary,
+        colorTertiaryDisalbed: elementsQuinary,
+        waveColorTertiary: elementsQuinary,
         textColorTextTertiary: textQuaternary,
+        rippleColorTertiary: elementsQuinary,
         // quaternary
         colorQuaternary: "#0000",
-        colorQuaternaryHover: elementsTertiary,
-        colorQuaternaryPressed: elementsQuaternary,
+        colorQuaternaryHover: elementsQuaternary,
+        colorQuaternaryPressed: "#0000",
+        colorQuaternaryFocus: "#0000",
+        rippleColorQuaternary: elementsQuinary,
+        waveColorQuaternary: elementsQuinary,
         // default type
         color: "#0000",
         colorHover: "#0000",
@@ -37948,10 +38292,10 @@
         rippleColor: brandPrimary500,
         // primary
         colorPrimary: brandPrimary500,
-        colorHoverPrimary: brandPrimary400,
-        colorPressedPrimary: brandPrimary600,
-        colorFocusPrimary: brandPrimary400,
-        colorDisabledPrimary: brandPrimary500,
+        colorHoverPrimary: brandPrimary600,
+        colorPressedPrimary: brandPrimary500,
+        colorFocusPrimary: brandPrimary500,
+        colorDisabledPrimary: brandPrimary300,
         waveColorPrimary: brandPrimary300,
         textColorPrimary: staticWhite,
         textColorHoverPrimary: staticWhite,
@@ -37959,21 +38303,21 @@
         textColorFocusPrimary: staticWhite,
         textColorDisabledPrimary: staticWhite,
         textColorTextPrimary: brandPrimary500,
-        textColorTextHoverPrimary: brandPrimary400,
-        textColorTextPressedPrimary: brandPrimary600,
-        textColorTextFocusPrimary: brandPrimary400,
-        textColorTextDisabledPrimary: textTertiary,
+        textColorTextHoverPrimary: brandPrimary600,
+        textColorTextPressedPrimary: brandPrimary300,
+        textColorTextFocusPrimary: brandPrimary300,
+        textColorTextDisabledPrimary: brandPrimary300,
         textColorGhostPrimary: brandPrimary500,
-        textColorGhostHoverPrimary: brandPrimary400,
-        textColorGhostPressedPrimary: brandPrimary600,
-        textColorGhostFocusPrimary: brandPrimary400,
-        textColorGhostDisabledPrimary: brandPrimary500,
+        textColorGhostHoverPrimary: brandPrimary600,
+        textColorGhostPressedPrimary: brandPrimary500,
+        textColorGhostFocusPrimary: brandPrimary500,
+        textColorGhostDisabledPrimary: brandPrimary300,
         borderPrimary: `2px solid ${brandPrimary500}`,
-        borderHoverPrimary: `2px solid ${brandPrimary400}`,
-        borderPressedPrimary: `2px solid ${brandPrimary600}`,
-        borderFocusPrimary: `2px solid ${brandPrimary400}`,
-        borderDisabledPrimary: `2px solid ${brandPrimary500}`,
-        rippleColorPrimary: brandPrimary500,
+        borderHoverPrimary: `2px solid ${brandPrimary600}`,
+        borderPressedPrimary: `2px solid ${brandPrimary500}`,
+        borderFocusPrimary: `2px solid ${brandPrimary500}`,
+        borderDisabledPrimary: `2px solid ${brandPrimary300}`,
+        rippleColorPrimary: brandPrimary300,
         // info
         colorInfo: brandQuaternary500,
         colorHoverInfo: brandQuaternary300,
@@ -38058,9 +38402,9 @@
         // error
         colorError: staticRed,
         colorHoverError: errorHover,
-        colorPressedError: errorPress,
-        colorFocusError: errorHover,
-        colorDisabledError: staticRed,
+        colorPressedError: staticRed,
+        colorFocusError: staticRed,
+        colorDisabledError: errorDisable,
         textColorError: staticWhite,
         textColorHoverError: staticWhite,
         textColorPressedError: staticWhite,
@@ -38068,20 +38412,20 @@
         textColorDisabledError: staticWhite,
         textColorTextError: staticRed,
         textColorTextHoverError: errorHover,
-        textColorTextPressedError: errorPress,
-        textColorTextFocusError: errorHover,
-        textColorTextDisabledError: textTertiary,
+        textColorTextPressedError: staticRed,
+        textColorTextFocusError: staticRed,
+        textColorTextDisabledError: errorDisable,
         textColorGhostError: staticRed,
         textColorGhostHoverError: errorHover,
-        textColorGhostPressedError: errorPress,
-        textColorGhostFocusError: errorHover,
-        textColorGhostDisabledError: staticRed,
+        textColorGhostPressedError: staticRed,
+        textColorGhostFocusError: staticRed,
+        textColorGhostDisabledError: errorDisable,
         borderError: `2px solid ${staticRed}`,
         borderHoverError: `2px solid ${errorHover}`,
-        borderPressedError: `2px solid ${errorPress}`,
-        borderFocusError: `2px solid ${errorHover}`,
-        borderDisabledError: `2px solid ${staticRed}`,
-        rippleColorError: staticRed,
+        borderPressedError: `2px solid ${staticRed}`,
+        borderFocusError: `2px solid ${staticRed}`,
+        borderDisabledError: `2px solid ${errorDisable}`,
+        rippleColorError: errorDisable,
         waveOpacity: "0.6",
         fontWeight,
         fontWeightStrong
@@ -38129,6 +38473,7 @@
         borderRadiusLarge,
         closeMedium,
         iconMedium,
+        iconLarge,
         fontWeight,
         staticBlack,
         staticWhite,
@@ -38138,10 +38483,10 @@
         brandPrimary500,
         brandSecondary600,
         staticRed,
-        elementsTertiary,
-        textPrimary,
+        elementsQuinary,
         transparencySecondary,
-        transparencyPrimary
+        transparencyPrimary,
+        elementsDarkQuinary
       } = vars;
       return {
         ...commonVars$5,
@@ -38158,47 +38503,53 @@
         borderRadius: borderRadiusLarge,
         closeSize: closeMedium,
         closeIconSize: iconMedium,
-        avatarSize: iconMedium,
+        avatarSize: iconLarge,
         closeMargin: "12px",
         // Default
-        color: staticBlack,
-        iconColor: staticWhite,
-        textColor: staticWhite,
-        closeIconColor: staticWhite,
-        closeIconColorHover: staticWhite,
-        closeIconColorPressed: staticWhite,
+        color: staticWhite,
+        iconColor: elementsDarkQuinary,
+        textColor: staticBlack,
+        closeIconColor: staticBlack,
+        closeIconColorHover: staticBlack,
+        closeIconColorPressed: staticBlack,
         closeColorHover: transparencyTertiary,
         closeColorPressed: transparencyQuinary,
-        titleTextColor: staticWhite,
-        descriptionTextColor: staticWhite,
-        actionTextColor: staticWhite,
+        titleTextColor: staticBlack,
+        descriptionTextColor: staticBlack,
+        actionTextColor: staticBlack,
+        iconWrapperColor: "rgb(16 16 16 / 8%)",
+        iconWrapperPulseColor: "rgb(16 16 16 / 4%)",
         // Success
-        colorSuccess: staticGreen,
-        iconColorSuccess: staticWhite,
-        textColorSuccess: staticWhite,
-        closeIconColorSuccess: staticWhite,
-        closeIconColorHoverSuccess: staticWhite,
-        closeIconColorPressedSuccess: staticWhite,
+        colorSuccess: staticWhite,
+        iconColorSuccess: staticGreen,
+        textColorSuccess: staticBlack,
+        closeIconColorSuccess: staticBlack,
+        closeIconColorHoverSuccess: staticBlack,
+        closeIconColorPressedSuccess: staticBlack,
         closeColorHoverSuccess: transparencyTertiary,
         closeColorPressedSuccess: transparencyQuinary,
-        titleTextColorSuccess: staticWhite,
-        descriptionTextColorSuccess: staticWhite,
-        actionTextColorSuccess: staticWhite,
+        titleTextColorSuccess: staticBlack,
+        descriptionTextColorSuccess: staticBlack,
+        actionTextColorSuccess: staticBlack,
+        iconWrapperColorSuccess: derived.brandTertiary300,
+        iconWrapperPulseColorSuccess: derived.brand350,
         // Info
-        colorInfo: elementsTertiary,
-        iconColorInfo: textPrimary,
-        textColorInfo: textPrimary,
-        closeIconColorInfo: textPrimary,
-        closeIconColorHoverInfo: textPrimary,
-        closeIconColorPressedInfo: textPrimary,
+        colorInfo: staticWhite,
+        iconColorInfo: elementsQuinary,
+        textColorInfo: staticBlack,
+        closeIconColorInfo: staticBlack,
+        closeIconColorHoverInfo: staticBlack,
+        closeIconColorPressedInfo: staticBlack,
         closeColorHoverInfo: transparencySecondary,
         closeColorPressedInfo: transparencyPrimary,
-        titleTextColorInfo: textPrimary,
-        descriptionTextColorInfo: textPrimary,
-        actionTextColorInfo: textPrimary,
+        titleTextColorInfo: staticBlack,
+        descriptionTextColorInfo: staticBlack,
+        actionTextColorInfo: staticBlack,
+        iconWrapperColorInfo: "rgb(197 199 202 / 36%)",
+        iconWrapperPulseColorInfo: "rgb(197 199 202 / 14%)",
         // Warning
-        colorWarning: brandSecondary600,
-        iconColorWarning: staticBlack,
+        colorWarning: staticWhite,
+        iconColorWarning: brandSecondary600,
         textColorWarning: staticBlack,
         closeIconColorWarning: staticBlack,
         closeIconColorHoverWarning: staticBlack,
@@ -38208,30 +38559,36 @@
         titleTextColorWarning: staticBlack,
         descriptionTextColorWarning: staticBlack,
         actionTextColorWarning: staticBlack,
+        iconWrapperColorWarning: "rgb(249 222 109 / 28%)",
+        iconWrapperPulseColorWarning: "rgb(249 222 109 / 18%)",
         // Error
-        colorError: staticRed,
-        iconColorError: staticWhite,
-        textColorError: staticWhite,
-        closeIconColorError: staticWhite,
-        closeIconColorHoverError: staticWhite,
-        closeIconColorPressedError: staticWhite,
+        colorError: staticWhite,
+        iconColorError: staticRed,
+        textColorError: staticBlack,
+        closeIconColorError: staticBlack,
+        closeIconColorHoverError: staticBlack,
+        closeIconColorPressedError: staticBlack,
         closeColorHoverError: transparencyTertiary,
         closeColorPressedError: transparencyQuinary,
-        titleTextColorError: staticWhite,
-        descriptionTextColorError: staticWhite,
-        actionTextColorError: staticWhite,
+        titleTextColorError: staticBlack,
+        descriptionTextColorError: staticBlack,
+        actionTextColorError: staticBlack,
+        iconWrapperColorError: derived.brandQuinary100,
+        iconWrapperPulseColorError: derived.brand550,
         // Primary
-        colorPrimary: brandPrimary500,
-        iconColorPrimary: staticWhite,
-        textColorPrimary: staticWhite,
-        closeIconColorPrimary: staticWhite,
-        closeIconColorHoverPrimary: staticWhite,
-        closeIconColorPressedPrimary: staticWhite,
+        colorPrimary: staticWhite,
+        iconColorPrimary: brandPrimary500,
+        textColorPrimary: staticBlack,
+        closeIconColorPrimary: staticBlack,
+        closeIconColorHoverPrimary: staticBlack,
+        closeIconColorPressedPrimary: staticBlack,
         closeColorHoverPrimary: transparencyTertiary,
         closeColorPressedPrimary: transparencyQuinary,
-        titleTextColorPrimary: staticWhite,
-        descriptionTextColorPrimary: staticWhite,
-        actionTextColorPrimary: staticWhite
+        titleTextColorPrimary: staticBlack,
+        descriptionTextColorPrimary: staticBlack,
+        actionTextColorPrimary: staticBlack,
+        iconWrapperColorPrimary: derived.brandPrimary100,
+        iconWrapperPulseColorPrimary: derived.brandPrimary50
       };
     };
     const notificationLight = createTheme$1({
@@ -41869,9 +42226,9 @@
         fontBodyMedium,
         lineHeightBodyMedium,
         borderRadiusLarge,
-        elementsQuinary,
         containerSecondary,
-        brandPrimary300
+        brandPrimary300,
+        brandPrimary500
       } = vars;
       return {
         baseColor: containerPrimary,
@@ -41879,8 +42236,9 @@
         lineHeight: lineHeightBodyMedium,
         borderRadius: borderRadiusLarge,
         draggerColor: elementsTertiary,
-        draggerBorder: `2px dashed ${elementsQuaternary}`,
-        draggerBorderHover: `2px dashed ${elementsQuinary}`,
+        draggerBorder: `1px dashed ${brandPrimary500}`,
+        draggerBorderHover: `1px solid ${brandPrimary500}`,
+        draggerShadowFocus: `0 0 0 4px ${brandPrimary500}1a`,
         itemColorHover: elementsTertiary,
         itemColorHoverError: changeColor(staticRed, {
           alpha: 0.05
@@ -41890,8 +42248,8 @@
         itemTextColorSuccess: staticGreen,
         itemIconColor: elementsPrimary,
         itemDisabledOpacity: opacityDisabled,
-        itemBorderImageCardError: `2px solid ${staticRed}`,
-        itemBorderImageCard: `2px solid ${elementsQuaternary}`,
+        itemBorderImageCardError: `1px solid ${staticRed}`,
+        itemBorderImageCard: `1px solid ${elementsQuaternary}`,
         draggerIconBgColor: elementsTertiary,
         draggerIconColor: elementsPrimary,
         draggerTitleColor: textPrimary,
@@ -44148,8 +44506,7 @@
     `), cM("dashed", [cE("border, state-border", {
       borderStyle: "dashed !important"
     })]), cM("disabled", {
-      cursor: "not-allowed",
-      opacity: "var(--u-opacity-disabled)"
+      cursor: "not-allowed"
     })]), c$1("@keyframes button-wave-spread", {
       from: {
         boxShadow: "0 0 0.5px 0 var(--u-ripple-color)"
@@ -44374,7 +44731,7 @@
               "--u-text-color": mergedTextColor,
               "--u-text-color-hover": propTextColor ? createHoverColor(propTextColor) : self[createKey("textColorTextHover", mergedType)],
               "--u-text-color-pressed": propTextColor ? createPressedColor(propTextColor) : self[createKey("textColorTextPressed", mergedType)],
-              "--u-text-color-focus": propTextColor ? createHoverColor(propTextColor) : self[createKey("textColorTextHover", mergedType)],
+              "--u-text-color-focus": propTextColor ? createHoverColor(propTextColor) : self[createKey("textColorTextFocus", mergedType)],
               "--u-text-color-disabled": propTextColor || self[createKey("textColorTextDisabled", mergedType)]
             };
           } else if (ghost || dashed) {
@@ -44390,7 +44747,7 @@
               "--u-text-color": mergedTextColor || self[createKey("textColorGhost", mergedType)],
               "--u-text-color-hover": mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey("textColorGhostHover", mergedType)],
               "--u-text-color-pressed": mergedTextColor ? createPressedColor(mergedTextColor) : self[createKey("textColorGhostPressed", mergedType)],
-              "--u-text-color-focus": mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey("textColorGhostHover", mergedType)],
+              "--u-text-color-focus": mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey("textColorGhostFocus", mergedType)],
               "--u-text-color-disabled": mergedTextColor || self[createKey("textColorGhostDisabled", mergedType)]
             };
           } else if (secondary) {
@@ -44409,7 +44766,7 @@
               }) : self.colorSecondaryPressed,
               "--u-color-focus": isColoredType ? changeColor(mergedTextColor, {
                 alpha: Number(self.colorOpacitySecondaryHover)
-              }) : self.colorSecondaryHover,
+              }) : self.colorSecondaryFocus,
               "--u-color-focus-visible": isColoredType ? changeColor(mergedTextColor, {
                 alpha: +self.colorOpacitySecondaryFocus
               }) : self.waveColorSecondary,
@@ -44419,12 +44776,12 @@
               "--u-text-color-hover": mergedTextColor,
               "--u-text-color-pressed": mergedTextColor,
               "--u-text-color-focus": mergedTextColor,
-              "--u-text-color-disabled": mergedTextColor
+              "--u-text-color-disabled": isColoredType ? mergedTextColor : self.textColorSecondaryDisabled
             };
           } else if (tertiary || quaternary) {
             const typeColor = typeIsDefault ? self.textColor : typeIsTertiary ? self.textColorTertiary : self[createKey("color", mergedType)];
             const mergedColor = color || typeColor;
-            colorProps["--u-ripple-color"] = "#0000";
+            colorProps["--u-text-color"] = mergedColor;
             colorProps["--u-text-color"] = mergedColor;
             colorProps["--u-text-color-hover"] = mergedColor;
             colorProps["--u-text-color-pressed"] = mergedColor;
@@ -44434,7 +44791,7 @@
               colorProps["--u-color"] = self.colorTertiary;
               colorProps["--u-color-hover"] = self.colorTertiaryHover;
               colorProps["--u-color-pressed"] = self.colorTertiaryPressed;
-              colorProps["--u-color-focus"] = self.colorTertiaryPressed;
+              colorProps["--u-color-focus"] = self.colorTertiaryFocus;
               colorProps["--u-color-disabled"] = self.colorTertiaryDisalbed;
               colorProps["--u-ripple-color"] = self.colorTertiary;
               colorProps["--u-text-color"] = self.textColorTextTertiary;
@@ -44443,12 +44800,15 @@
               colorProps["--u-text-color-focus"] = self.textColorTextTertiary;
               colorProps["--u-text-color-disabled"] = self.textColorTextTertiary;
               colorProps["--u-color-focus-visible"] = self.waveColorTertiary;
+              colorProps["--u-ripple-color"] = self.rippleColorTertiary;
             } else {
               colorProps["--u-color"] = self.colorQuaternary;
               colorProps["--u-color-hover"] = self.colorQuaternaryHover;
               colorProps["--u-color-pressed"] = self.colorQuaternaryPressed;
-              colorProps["--u-color-focus"] = self.colorQuaternaryHover;
+              colorProps["--u-color-focus"] = self.colorQuaternaryFocus;
               colorProps["--u-color-disabled"] = self.colorQuaternary;
+              colorProps["--u-ripple-color"] = self.rippleColorQuaternary;
+              colorProps["--u-color-focus-visible"] = self.waveColorQuaternary;
             }
           } else {
             colorProps = {
@@ -59743,9 +60103,7 @@
 
     var style$12 = cB("chat", `
   height: 100%;
-  max-height: 100%;
-  min-height: 0;
-  display: flex;
+  background-color: transparent;
   box-sizing: border-box;
   .u-list-item__text {
     grid-template-columns: 1fr !important;
@@ -60495,14 +60853,16 @@
               }
             );
           }
-          return /* @__PURE__ */ vue.h(
-            UEmpty,
-            {
-              ...this.emptyProps,
-              theme: this.mergedTheme.peers.Empty,
-              themeOverrides: this.mergedTheme.peerOverrides.Empty
-            }
-          );
+          return /* @__PURE__ */ vue.h(UFlex, { justify: "center", align: "center", vertical: true }, {
+            default: () => /* @__PURE__ */ vue.h(
+              UEmpty,
+              {
+                ...this.emptyProps,
+                theme: this.mergedTheme.peers.Empty,
+                themeOverrides: this.mergedTheme.peerOverrides.Empty
+              }
+            )
+          });
         })();
         return /* @__PURE__ */ vue.h(
           "div",
@@ -61181,8 +61541,12 @@
         handleDownloadClick,
         capitalizeFirstLetter
       } = opts;
+      const getExt = (name) => {
+        const i = name.lastIndexOf(".");
+        return i === -1 || i === name.length - 1 ? "" : name.slice(i + 1);
+      };
       const isImageType = ["image", "image-card"].includes(listType);
-      const fileExt = file.name.split(".").at(-1) || "";
+      const fileExt = getExt(file.name);
       const capitalizedExt = capitalizeFirstLetter(fileExt);
       const icon = vue.h(
         "div",
@@ -62555,6 +62919,7 @@
         display: block;
       `)]), cM("drag-over", [cB("upload-dragger", `
         border: var(--u-dragger-border-hover);
+        box-shadow: var(--u-dragger-shadow-focus);
       `)]), cE("label", {
       marginBottom: "12px",
       marginTop: 0,
@@ -63534,6 +63899,7 @@
               draggerColor,
               draggerBorder,
               draggerBorderHover,
+              draggerShadowFocus,
               itemColorHover,
               itemColorHoverError,
               itemTextColorError,
@@ -63563,6 +63929,7 @@
             "--u-border-radius": borderRadius,
             "--u-dragger-border": draggerBorder,
             "--u-dragger-border-hover": draggerBorderHover,
+            "--u-dragger-shadow-focus": draggerShadowFocus,
             "--u-dragger-color": draggerColor,
             "--u-font-size": fontSize,
             "--u-item-color-hover": itemColorHover,
@@ -65555,9 +65922,9 @@
         type: Number,
         default: 10
       },
-      maxHeight: {
+      height: {
         type: [String, Number],
-        default: void 0
+        default: 800
       },
       onChatSelect: {
         type: Function,
@@ -65886,15 +66253,15 @@
       render() {
         const { $slots } = this;
         this.onRender?.();
-        const maxHeightStyle = this.maxHeight ? {
-          maxHeight: typeof this.maxHeight === "number" ? `${this.maxHeight}px` : this.maxHeight
+        const heightStyle = this.height ? {
+          height: typeof this.height === "number" ? `${this.height}px` : this.height
         } : {};
         return /* @__PURE__ */ vue.h(
           "div",
           {
             class: [`${this.mergedClsPrefix}-chat`, this.themeClass],
             style: {
-              ...maxHeightStyle,
+              ...heightStyle,
               ...this.cssVars
             }
           },
@@ -65904,7 +66271,7 @@
                 sidebarHeaderMain: $slots.sidebarHeaderMain,
                 sidebarHeaderActions: $slots.sidebarHeaderActions
               })
-            ]), resolveSlot($slots.default, () => [
+            ]), this.selectedChatId && resolveSlot($slots.default, () => [
               /* @__PURE__ */ vue.h(ChatMainArea, null, {
                 headerActions: $slots.headerActions
               })
@@ -112440,6 +112807,78 @@
       }
     });
 
+    const infiniteScrollProps = {
+      distance: {
+        type: Number,
+        default: 0
+      },
+      onLoad: Function,
+      scrollbarProps: Object
+    };
+    var InfiniteScroll = vue.defineComponent({
+      name: "InfiniteScroll",
+      props: infiniteScrollProps,
+      setup(props) {
+        const scrollbarInstRef = vue.ref(null);
+        let loading = false;
+        const handleCheckBottom = async () => {
+          const { value: scrollbarInst } = scrollbarInstRef;
+          if (scrollbarInst) {
+            const { containerRef } = scrollbarInst;
+            const scrollHeight = containerRef?.scrollHeight;
+            const clientHeight = containerRef?.clientHeight;
+            const scrollTop = containerRef?.scrollTop;
+            if (containerRef && scrollHeight !== void 0 && clientHeight !== void 0 && scrollTop !== void 0) {
+              if (scrollTop + clientHeight >= scrollHeight - props.distance) {
+                loading = true;
+                try {
+                  await props.onLoad?.();
+                } catch {
+                }
+                loading = false;
+              }
+            }
+          }
+        };
+        const handleScroll = () => {
+          if (loading) {
+            return;
+          }
+          void handleCheckBottom();
+        };
+        const handleWheel = (e) => {
+          if (e.deltaY <= 0) {
+            return;
+          }
+          if (loading) {
+            return;
+          }
+          void handleCheckBottom();
+        };
+        return {
+          scrollbarInstRef,
+          handleScroll,
+          handleWheel
+        };
+      },
+      render() {
+        return /* @__PURE__ */ vue.h(
+          XScrollbar,
+          {
+            ...this.scrollbarProps,
+            ref: "scrollbarInstRef",
+            onWheel: this.handleWheel,
+            onScroll: this.handleScroll
+          },
+          {
+            default: () => {
+              return resolveSlot(this.$slots.default, () => []);
+            }
+          }
+        );
+      }
+    });
+
     function parse(value) {
       if (value === void 0 || value === null || typeof value === "string" && value.trim() === "") {
         return null;
@@ -118032,7 +118471,9 @@
               [createKey("closeIconColorPressed", type)]: closeIconColorPressed,
               [createKey("titleTextColor", type)]: titleTextColor,
               [createKey("descriptionTextColor", type)]: descriptionTextColor,
-              [createKey("actionTextColor", type)]: actionTextColor
+              [createKey("actionTextColor", type)]: actionTextColor,
+              [createKey("iconWrapperColor", type)]: iconWrapperColor,
+              [createKey("iconWrapperPulseColor", type)]: iconWrapperPulseColor
             },
             common: { cubicBezierEaseOut, cubicBezierEaseIn, cubicBezierEaseInOut }
           } = mergedThemeRef.value;
@@ -118072,7 +118513,12 @@
             "--u-padding-bottom": bottom,
             "--u-meta-font-size": metaFontSize,
             "--u-description-font-size": descriptionFontSize,
-            "--u-avatar-size": avatarSize
+            "--u-avatar-size": avatarSize,
+            "--u-icon-wrapper-color": iconWrapperColor,
+            "--u-icon-wrapper-pulse-color": iconWrapperPulseColor,
+            iconColor,
+            iconWrapperColor,
+            iconWrapperPulseColor
           };
         });
         const themeClassHandle = inlineThemeDisabled ? useThemeClass(
@@ -118096,7 +118542,8 @@
         };
       },
       render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, cssVars } = this;
+        const { iconColor, iconWrapperColor, iconWrapperPulseColor } = cssVars;
         this.onRender?.();
         return /* @__PURE__ */ vue.h(
           "div",
@@ -118120,7 +118567,18 @@
               ],
               style: this.cssVars
             },
-            this.showAvatar ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-notification__avatar` }, this.avatar ? render$1(this.avatar) : /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefix }, () => /* @__PURE__ */ vue.h(InfoOutlineIcon, null))) : null,
+            this.showAvatar ? this.avatar ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-notification__avatar` }, render$1(this.avatar)) : /* @__PURE__ */ vue.h(
+              UIconWrapper,
+              {
+                pulseSize: 52,
+                size: 36,
+                color: iconWrapperColor,
+                pulseColor: iconWrapperPulseColor,
+                variant: "pulse",
+                borderRadius: 60
+              },
+              /* @__PURE__ */ vue.h(UIcon, { color: iconColor, size: 24 }, () => this.type === "success" ? /* @__PURE__ */ vue.h(SuccessIcon, null) : /* @__PURE__ */ vue.h(InfoIcon, null))
+            ) : null,
             this.closable ? /* @__PURE__ */ vue.h(
               UBaseClose,
               {
@@ -118402,6 +118860,8 @@
       display: flex;
       overflow: hidden;
       flex-shrink: 0;
+      padding-top: var(--u-padding-top);
+      padding-bottom: var(--u-padding-bottom);
       padding-left: var(--u-padding-left);
       padding-right: var(--u-padding-right);
       width: var(--u-width);
@@ -118411,12 +118871,14 @@
       border-radius: var(--u-border-radius);
       box-sizing: border-box;
       opacity: 1;
-    `, [cE("avatar", [cB("icon", {
+      box-shadow: 0 0 20px 0 rgba(68, 83, 113, 0.10), 0 12px 20px 0 rgba(68, 83, 113, 0.05);
+    `, [cE("avatar", [cB("icon-wrapper", `
+        `), cB("icon", {
       color: "var(--u-icon-color)"
     }), cB("base-icon", {
       color: "var(--u-icon-color)"
     })]), cM("show-avatar", [cB("notification-main", `
-          margin-left: calc(var(--u-avatar-size) + 16px);
+          margin-left: 16px;
           width: calc(100% - var(--u-avatar-size) + 16px);  
         `)]), cM("closable", [cB("notification-main", [c$1("> *:first-child", `
             padding-right: var(--u-close-size);
@@ -118429,9 +118891,7 @@
             background-color .3s var(--u-bezier),
             color .3s var(--u-bezier);
         `)]), cE("avatar", `
-        position: absolute;
-        top: var(--u-padding-top);
-        left: var(--u-padding-left);
+        position: relative;
         width: var(--u-avatar-size);
         height: var(--u-avatar-size);
         font-size: var(--u-avatar-size);
@@ -118439,18 +118899,18 @@
         align-items: center;
         justify-content: center;
       `, [cB("icon", "transition: color .3s var(--u-bezier);")]), cB("notification-main", `
-        padding-top: var(--u-padding-top);
-        padding-bottom: var(--u-padding-bottom);
+        padding-top: 2px;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
         margin-left: 8px;
         width: calc(100% - 8px);
+        justify-content: center;
       `, [cB("notification-main-footer", `
           display: flex;
           align-items: center;
           justify-content: space-between;
-          margin-top: 12px;
+          margin-top: 8px;
         `, [cE("meta", `
             font-size: var(--u-meta-font-size);
             transition: color .3s var(--u-bezier-ease-out);
@@ -118459,6 +118919,8 @@
             cursor: pointer;
             transition: color .3s var(--u-bezier-ease-out);
             color: var(--u-action-text-color);
+            width: 100%;
+            margin-top: 16px;
           `)]), cE("header", `
           font-weight: var(--u-title-font-weight);
           font-size: var(--u-title-font-size);
@@ -128808,6 +129270,134 @@
       }
     });
 
+    const virtualListProps = {
+      scrollbarProps: Object,
+      items: {
+        type: Array,
+        default: () => []
+      },
+      itemSize: {
+        type: Number,
+        required: true
+      },
+      itemResizable: Boolean,
+      itemsStyle: [String, Object],
+      visibleItemsTag: {
+        type: [String, Object],
+        default: "div"
+      },
+      visibleItemsProps: Object,
+      ignoreItemResize: Boolean,
+      onScroll: Function,
+      onWheel: Function,
+      onResize: Function,
+      defaultScrollKey: [Number, String],
+      defaultScrollIndex: Number,
+      keyField: {
+        type: String,
+        default: "key"
+      },
+      paddingTop: {
+        type: [Number, String],
+        default: 0
+      },
+      paddingBottom: {
+        type: [Number, String],
+        default: 0
+      }
+    };
+    var VirtualList = vue.defineComponent({
+      name: "VirtualList",
+      props: virtualListProps,
+      setup(props) {
+        const scrollbarInstRef = vue.ref(null);
+        const virtualListInstRef = vue.ref(null);
+        function syncScrollbar() {
+          const { value: scrollbarInst } = scrollbarInstRef;
+          if (scrollbarInst) {
+            scrollbarInst.sync();
+          }
+        }
+        function handleScroll(e) {
+          syncScrollbar();
+          props.onScroll?.(e);
+        }
+        function handleResize(e) {
+          syncScrollbar();
+          props.onResize?.(e);
+        }
+        function handleWheel(e) {
+          props.onWheel?.(e);
+        }
+        function scrollTo(options, y) {
+          if (typeof options === "number") {
+            virtualListInstRef.value?.scrollTo(options, y ?? 0);
+          } else {
+            virtualListInstRef.value?.scrollTo(options);
+          }
+        }
+        function getScrollContainer() {
+          return virtualListInstRef.value?.listElRef;
+        }
+        function getScrollContent() {
+          return virtualListInstRef.value?.itemsElRef;
+        }
+        return {
+          scrollTo,
+          scrollbarInstRef,
+          virtualListInstRef,
+          getScrollContainer,
+          getScrollContent,
+          handleScroll,
+          handleResize,
+          handleWheel
+        };
+      },
+      render() {
+        return /* @__PURE__ */ vue.h(
+          XScrollbar,
+          {
+            ...this.scrollbarProps,
+            ref: "scrollbarInstRef",
+            container: this.getScrollContainer,
+            content: this.getScrollContent
+          },
+          {
+            default: () => {
+              return /* @__PURE__ */ vue.h(
+                VVirtualList,
+                {
+                  ref: "virtualListInstRef",
+                  showScrollbar: false,
+                  items: this.items,
+                  itemSize: this.itemSize,
+                  itemResizable: this.itemResizable,
+                  itemsStyle: this.itemsStyle,
+                  visibleItemsTag: this.visibleItemsTag,
+                  visibleItemsProps: this.visibleItemsProps,
+                  ignoreItemResize: this.ignoreItemResize,
+                  keyField: this.keyField,
+                  defaultScrollKey: this.defaultScrollKey,
+                  defaultScrollIndex: this.defaultScrollIndex,
+                  paddingTop: this.paddingTop,
+                  paddingBottom: this.paddingBottom,
+                  onScroll: this.handleScroll,
+                  onResize: this.handleResize,
+                  onWheel: this.handleWheel
+                },
+                {
+                  default: ({
+                    item,
+                    index
+                  }) => this.$slots.default?.({ item, index })
+                }
+              );
+            }
+          }
+        );
+      }
+    });
+
     var style$1 = c$1([cB("watermark-container", `
     position: relative;
   `, [cNotM("selectable", `
@@ -129481,6 +130071,7 @@
         MessageStatus: MessageStatus,
         NA: a,
         NP: p,
+        NVirtualList: VirtualList,
         UActionCard: ActionCard,
         UAffix: UAffix,
         UAlert: Alert,
@@ -129555,6 +130146,7 @@
         UIconWrapper: UIconWrapper,
         UImage: Image$1,
         UImageGroup: UImageGroup,
+        UInfiniteScroll: InfiniteScroll,
         UInput: UInput,
         UInputGroup: UInputGroup,
         UInputGroupLabel: InputGroupLabel,
@@ -129698,6 +130290,7 @@
         iconWrapperProps: iconWrapperProps,
         imageGroupProps: imageGroupProps,
         imageProps: imageProps,
+        infiniteScrollProps: infiniteScrollProps,
         inputGroupLabelProps: inputGroupLabelProps,
         inputGroupProps: inputGroupProps,
         inputNumberProps: inputNumberProps,
@@ -129766,10 +130359,11 @@
         useLoadingBar: useLoadingBar,
         useMessage: useMessage,
         useNotification: useNotification,
+        virtualListProps: virtualListProps,
         watermarkProps: watermarkProps
     });
 
-    var version = "1.8.1";
+    var version = "1.9.0";
 
     function create({
       componentPrefix = "U",
@@ -130579,6 +131173,7 @@
     exports.MessageStatus = MessageStatus;
     exports.NA = a;
     exports.NP = p;
+    exports.NVirtualList = VirtualList;
     exports.UActionCard = ActionCard;
     exports.UAffix = UAffix;
     exports.UAlert = Alert;
@@ -130653,6 +131248,7 @@
     exports.UIconWrapper = UIconWrapper;
     exports.UImage = Image$1;
     exports.UImageGroup = UImageGroup;
+    exports.UInfiniteScroll = InfiniteScroll;
     exports.UInput = UInput;
     exports.UInputGroup = UInputGroup;
     exports.UInputGroupLabel = InputGroupLabel;
@@ -130873,6 +131469,7 @@
     exports.idID = idID;
     exports.imageGroupProps = imageGroupProps;
     exports.imageProps = imageProps;
+    exports.infiniteScrollProps = infiniteScrollProps;
     exports.inputDark = inputDark;
     exports.inputGroupLabelProps = inputGroupLabelProps;
     exports.inputGroupProps = inputGroupProps;
@@ -131033,6 +131630,7 @@
     exports.useThemeVars = useThemeVars;
     exports.version = version;
     exports.viVN = viVN;
+    exports.virtualListProps = virtualListProps;
     exports.watermarkDark = watermarkDark;
     exports.watermarkProps = watermarkProps;
     exports.zhCN = zhCN;