@das-fed/ui 1.1.4 → 6.3.0-beta.1

package/packages/components/scrollbar/index.js

@@ -1,8 +1,13 @@
 import '@das-fed/ui/global/theme';
+import { withInstall as withInstall$1 } from '@das-fed/utils';
+import { warn, getCurrentInstance as getCurrentInstance$1, inject, ref as ref$1, computed, unref as unref$1, defineComponent, onBeforeUnmount, toRef, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow, createElementBlock, Fragment, createVNode, watch as watch$1, nextTick as nextTick$1, provide, reactive, onMounted as onMounted$1, onUpdated, resolveDynamicComponent, renderSlot, createCommentVNode, onUnmounted, mergeProps } from 'vue';
+import { createStyle } from '@das-fed/utils/style';
+import { useZIndex } from '@das-fed/utils/hooks/popup-manager/use-zindex';
+import { unref, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, nextTick, watch, ref } from 'vue-demi';
 
 /*!
  * OverlayScrollbars
- * Version: 2.6.1
+ * Version: 2.8.3
  *
  * Copyright (c) Rene Haas | KingSora.
  * https://github.com/KingSora
@@ -10,7 +15,7 @@ import '@das-fed/ui/global/theme';
  * Released under the MIT license.
  */
 const createCache = (t, n) => {
-  const {o: o, u: s, _: e} = t;
+  const {o: o, i: s, u: e} = t;
   let c = o;
   let r;
   const cacheUpdateContextual = (t, n) => {
@@ -28,7 +33,7 @@ const createCache = (t, n) => {
   return [ n ? cacheUpdateIsolated : cacheUpdateContextual, getCurrentCache ];
 };
 
-const t = typeof window !== "undefined";
+const t = typeof window !== "undefined" && typeof document !== "undefined";
 
 const n = t ? window : {};
 
@@ -38,39 +43,39 @@ const s = Math.min;
 
 const e = Math.round;
 
-const r = n.cancelAnimationFrame;
+const c = Math.abs;
 
-const l = n.requestAnimationFrame;
+const r = Math.sign;
 
-const i = n.setTimeout;
+const l = n.cancelAnimationFrame;
 
-const a = n.clearTimeout;
+const i = n.requestAnimationFrame;
+
+const a = n.setTimeout;
+
+const u = n.clearTimeout;
 
 const getApi = t => typeof n[t] !== "undefined" ? n[t] : void 0;
 
-const u = getApi("MutationObserver");
+const _ = getApi("MutationObserver");
 
-const f = getApi("IntersectionObserver");
+const d = getApi("IntersectionObserver");
 
-const _ = getApi("ResizeObserver");
+const f = getApi("ResizeObserver");
 
-const d = getApi("ScrollTimeline");
+const p = getApi("ScrollTimeline");
 
 const v = t && Node.ELEMENT_NODE;
 
-const {toString: h, hasOwnProperty: p} = Object.prototype;
-
-const g = /^\[object (.+)\]$/;
+const {toString: h, hasOwnProperty: g} = Object.prototype;
 
 const isUndefined = t => t === void 0;
 
 const isNull = t => t === null;
 
-const type = t => isUndefined(t) || isNull(t) ? `${t}` : h.call(t).replace(g, "$1").toLowerCase();
-
-const isNumber = t => typeof t === "number";
+const isNumber$1 = t => typeof t === "number";
 
-const isString = t => typeof t === "string";
+const isString$2 = t => typeof t === "string";
 
 const isBoolean = t => typeof t === "boolean";
 
@@ -78,29 +83,29 @@ const isFunction = t => typeof t === "function";
 
 const isArray = t => Array.isArray(t);
 
-const isObject = t => typeof t === "object" && !isArray(t) && !isNull(t);
+const isObject$1 = t => typeof t === "object" && !isArray(t) && !isNull(t);
 
 const isArrayLike = t => {
   const n = !!t && t.length;
-  const o = isNumber(n) && n > -1 && n % 1 == 0;
-  return isArray(t) || !isFunction(t) && o ? n > 0 && isObject(t) ? n - 1 in t : true : false;
+  const o = isNumber$1(n) && n > -1 && n % 1 == 0;
+  return isArray(t) || !isFunction(t) && o ? n > 0 && isObject$1(t) ? n - 1 in t : true : false;
 };
 
 const isPlainObject = t => {
-  if (!t || !isObject(t) || type(t) !== "object") {
+  if (!t || !isObject$1(t)) {
     return false;
   }
   let n;
   const o = "constructor";
   const s = t[o];
   const e = s && s.prototype;
-  const c = p.call(t, o);
-  const r = e && p.call(e, "isPrototypeOf");
+  const c = g.call(t, o);
+  const r = e && g.call(e, "isPrototypeOf");
   if (s && !c && !r) {
     return false;
   }
   for (n in t) {}
-  return isUndefined(n) || p.call(t, n);
+  return isUndefined(n) || g.call(t, n);
 };
 
 const isHTMLElement = t => {
@@ -131,7 +136,7 @@ const inArray = (t, n) => t.indexOf(n) >= 0;
 const concat = (t, n) => t.concat(n);
 
 const push = (t, n, o) => {
-  !o && !isString(n) && isArrayLike(n) ? Array.prototype.push.apply(t, n) : t.push(n);
+  !isString$2(n) && isArrayLike(n) ? Array.prototype.push.apply(t, n) : t.push(n);
   return t;
 };
 
@@ -153,11 +158,11 @@ const b = "paddingTop";
 
 const w = "paddingRight";
 
-const S = "paddingLeft";
+const y = "paddingLeft";
 
-const y = "paddingBottom";
+const m = "paddingBottom";
 
-const m = "marginLeft";
+const S = "marginLeft";
 
 const O = "marginRight";
 
@@ -169,18 +174,25 @@ const x = "overflowY";
 
 const H = "width";
 
-const I = "height";
+const E = "height";
 
-const z = "hidden";
+const z = "visible";
 
-const E = "visible";
+const I = "hidden";
+
+const A = "scroll";
+
+const capitalizeFirstLetter = t => {
+  const n = String(t || "");
+  return n ? n[0].toUpperCase() + n.slice(1) : "";
+};
 
 const equal = (t, n, o, s) => {
   if (t && n) {
     let e = true;
     each(o, (o => {
-      const c = s ? s(t[o]) : t[o];
-      const r = s ? s(n[o]) : n[o];
+      const c = t[o];
+      const r = n[o];
       if (c !== r) {
         e = false;
       }
@@ -196,67 +208,75 @@ const equalXY = (t, n) => equal(t, n, [ "x", "y" ]);
 
 const equalTRBL = (t, n) => equal(t, n, [ "t", "r", "b", "l" ]);
 
-const noop = () => {};
+const noop$1 = () => {};
 
 const bind = (t, ...n) => t.bind(0, ...n);
 
 const selfClearTimeout = t => {
   let n;
-  const o = t ? i : l;
-  const s = t ? a : r;
+  const o = t ? a : i;
+  const s = t ? u : l;
   return [ e => {
     s(n);
-    n = o(e, isFunction(t) ? t() : t);
+    n = o((() => e()), isFunction(t) ? t() : t);
   }, () => s(n) ];
 };
 
 const debounce = (t, n) => {
-  let o;
-  let s;
-  let e;
-  let c = noop;
-  const {v: u, p: f, S: _} = n || {};
-  const d = function invokeFunctionToDebounce(n) {
-    c();
-    a(o);
-    o = s = void 0;
-    c = noop;
+  const {_: o, p: s, v: e, m: c} = n || {};
+  let r;
+  let _;
+  let d;
+  let f;
+  let p = noop$1;
+  const v = function invokeFunctionToDebounce(n) {
+    p();
+    u(r);
+    f = r = _ = void 0;
+    p = noop$1;
     t.apply(this, n);
   };
-  const mergeParms = t => _ && s ? _(s, t) : t;
+  const mergeParms = t => c && _ ? c(_, t) : t;
   const flush = () => {
-    if (c !== noop) {
-      d(mergeParms(e) || e);
+    if (p !== noop$1) {
+      v(mergeParms(d) || d);
     }
   };
-  const v = function debouncedFn() {
+  const h = function debouncedFn() {
     const t = from(arguments);
-    const n = isFunction(u) ? u() : u;
-    const _ = isNumber(n) && n >= 0;
-    if (_) {
-      const u = isFunction(f) ? f() : f;
-      const _ = isNumber(u) && u >= 0;
-      const v = n > 0 ? i : l;
-      const h = n > 0 ? a : r;
-      const p = mergeParms(t);
-      const g = p || t;
-      const b = d.bind(0, g);
-      c();
-      const w = v(b, n);
-      c = () => h(w);
-      if (_ && !o) {
-        o = i(flush, u);
+    const n = isFunction(o) ? o() : o;
+    const c = isNumber$1(n) && n >= 0;
+    if (c) {
+      const o = isFunction(s) ? s() : s;
+      const c = isNumber$1(o) && o >= 0;
+      const h = n > 0 ? a : i;
+      const g = n > 0 ? u : l;
+      const b = mergeParms(t);
+      const w = b || t;
+      const y = v.bind(0, w);
+      let m;
+      p();
+      if (e && !f) {
+        y();
+        f = true;
+        m = h((() => f = void 0), n);
+      } else {
+        m = h(y, n);
+        if (c && !r) {
+          r = a(flush, o);
+        }
       }
-      s = e = g;
+      p = () => g(m);
+      _ = d = w;
     } else {
-      d(t);
+      v(t);
     }
   };
-  v.m = flush;
-  return v;
+  h.S = flush;
+  return h;
 };
 
-const hasOwnProperty = (t, n) => Object.prototype.hasOwnProperty.call(t, n);
+const hasOwnProperty$1 = (t, n) => Object.prototype.hasOwnProperty.call(t, n);
 
 const keys = t => t ? Object.keys(t) : [];
 
@@ -292,8 +312,8 @@ const assignDeep = (t, n, o, s, e, c, r) => {
 const removeUndefinedProperties = (t, n) => each(assignDeep({}, t), ((t, o, s) => {
   if (t === void 0) {
     delete s[o];
-  } else if (n && t && isPlainObject(t)) {
-    s[o] = removeUndefinedProperties(t, n);
+  } else if (t && isPlainObject(t)) {
+    s[o] = removeUndefinedProperties(t);
   }
 }));
 
@@ -310,9 +330,11 @@ const getDomTokensArray = t => from(new Set((isArray(t) ? t : (t || "").split("
 
 const getAttr = (t, n) => t && t.getAttribute(n);
 
+const hasAttr = (t, n) => t && t.hasAttribute(n);
+
 const setAttrs = (t, n, o) => {
   each(getDomTokensArray(n), (n => {
-    t && t.setAttribute(n, o || "");
+    t && t.setAttribute(n, String(o || ""));
   }));
 };
 
@@ -325,7 +347,9 @@ const domTokenListAttr = (t, n) => {
   const s = bind(setAttrs, t, n);
   const domTokenListOperation = (t, n) => {
     const s = new Set(o);
-    each(getDomTokensArray(t), (t => s[n](t)));
+    each(getDomTokensArray(t), (t => {
+      s[n](t);
+    }));
     return from(s).join(" ");
   };
   return {
@@ -340,6 +364,7 @@ const domTokenListAttr = (t, n) => {
 
 const removeAttrClass = (t, n, o) => {
   domTokenListAttr(t, n).O(o);
+  return bind(addAttrClass, t, n, o);
 };
 
 const addAttrClass = (t, n, o) => {
@@ -347,9 +372,7 @@ const addAttrClass = (t, n, o) => {
   return bind(removeAttrClass, t, n, o);
 };
 
-const addRemoveAttrClass = (t, n, o, s) => {
-  (s ? addAttrClass : removeAttrClass)(t, n, o);
-};
+const addRemoveAttrClass = (t, n, o, s) => (s ? addAttrClass : removeAttrClass)(t, n, o);
 
 const hasAttrClass = (t, n, o) => domTokenListAttr(t, n).C(o);
 
@@ -364,8 +387,6 @@ const addClass = (t, n) => {
   return bind(removeClass, t, n);
 };
 
-const A = t && Element.prototype;
-
 const find = (t, n) => {
   const o = [];
   const s = n ? isElement(n) && n : document;
@@ -379,18 +400,21 @@ const findFirst = (t, n) => {
 
 const is = (t, n) => {
   if (isElement(t)) {
-    const o = A.matches || A.msMatchesSelector;
-    return o.call(t, n);
+    return t.matches(n);
   }
   return false;
 };
 
+const isBodyElement = t => is(t, "body");
+
 const contents = t => t ? from(t.childNodes) : [];
 
 const parent = t => t && t.parentElement;
 
 const closest = (t, n) => isElement(t) && t.closest(n);
 
+const getFocusedElement = t => (document).activeElement;
+
 const liesBetween = (t, n, o) => {
   const s = closest(t, n);
   const e = t && findFirst(o, s);
@@ -432,7 +456,7 @@ const before = (t, n, o) => {
     t.insertBefore(e, s || null);
     return () => removeElements(o);
   }
-  return noop;
+  return noop$1;
 };
 
 const appendChildren = (t, n) => before(t, null, n);
@@ -467,10 +491,10 @@ const ratioToCssPercent = t => `${(validFiniteNumber(t) * 100).toFixed(3)}%`;
 const numberToCssPx = t => `${validFiniteNumber(t)}px`;
 
 function setStyles(t, n) {
-  t && each(n, ((n, o) => {
+  t && n && each(n, ((n, o) => {
     try {
       const s = t.style;
-      const e = isNumber(n) ? numberToCssPx(n) : (n || "") + "";
+      const e = isNumber$1(n) ? numberToCssPx(n) : (n || "") + "";
       if (T.test(o)) {
         s.setProperty(o, e);
       } else {
@@ -481,11 +505,11 @@ function setStyles(t, n) {
 }
 
 function getStyles(t, o, s) {
-  const e = isString(o);
+  const e = isString$2(o);
   let c = e ? "" : {};
   if (t) {
     const r = n.getComputedStyle(t, s) || t.style;
-    c = e ? getCSSVal(r, o) : o.reduce(((t, n) => {
+    c = e ? getCSSVal(r, o) : from(o).reduce(((t, n) => {
       t[n] = getCSSVal(r, n);
       return t;
     }), c);
@@ -493,8 +517,6 @@ function getStyles(t, o, s) {
   return c;
 }
 
-const getDirectionIsRTL = t => getStyles(t, "direction") === "rtl";
-
 const topRightBottomLeft = (t, n, o) => {
   const s = n ? `${n}-` : "";
   const e = o ? `-${o}` : "";
@@ -511,7 +533,9 @@ const topRightBottomLeft = (t, n, o) => {
   };
 };
 
-const getTrasformTranslateValue = (t, n) => `translate${isObject(t) ? `(${t.x},${t.y})` : `${n ? "X" : "Y"}(${t})`}`;
+const getTrasformTranslateValue = (t, n) => `translate${isObject$1(t) ? `(${t.x},${t.y})` : `${n ? "X" : "Y"}(${t})`}`;
+
+const elementHasDimensions = t => !!(t.offsetWidth || t.offsetHeight || t.getClientRects().length);
 
 const D = {
   w: 0,
@@ -523,17 +547,17 @@ const getElmWidthHeightProperty = (t, n) => n ? {
   h: n[`${t}Height`]
 } : D;
 
-const windowSize = t => getElmWidthHeightProperty("inner", t || n);
+const getWindowSize = t => getElmWidthHeightProperty("inner", t || n);
 
 const k = bind(getElmWidthHeightProperty, "offset");
 
-const R = bind(getElmWidthHeightProperty, "client");
+const M = bind(getElmWidthHeightProperty, "client");
 
-const M = bind(getElmWidthHeightProperty, "scroll");
+const R = bind(getElmWidthHeightProperty, "scroll");
 
-const fractionalSize = t => {
+const getFractionalSize = t => {
   const n = parseFloat(getStyles(t, H)) || 0;
-  const o = parseFloat(getStyles(t, I)) || 0;
+  const o = parseFloat(getStyles(t, E)) || 0;
   return {
     w: n - e(n),
     h: o - e(o)
@@ -542,7 +566,9 @@ const fractionalSize = t => {
 
 const getBoundingClientRect = t => t.getBoundingClientRect();
 
-const domRectHasDimensions = t => !!(t && (t[I] || t[H]));
+const hasDimensions = t => !!t && elementHasDimensions(t);
+
+const domRectHasDimensions = t => !!(t && (t[E] || t[H]));
 
 const domRectAppeared = (t, n) => {
   const o = domRectHasDimensions(t);
@@ -552,7 +578,7 @@ const domRectAppeared = (t, n) => {
 
 const removeEventListener = (t, n, o, s) => {
   each(getDomTokensArray(n), (n => {
-    t.removeEventListener(n, o, s);
+    t && t.removeEventListener(n, o, s);
   }));
 };
 
@@ -568,9 +594,9 @@ const addEventListener = (t, n, o, s) => {
   return bind(runEachAndClear, getDomTokensArray(n).map((n => {
     const s = l ? e => {
       removeEventListener(t, n, s, r);
-      o(e);
+      o && o(e);
     } : o;
-    t.addEventListener(n, s, i);
+    t && t.addEventListener(n, s, i);
     return bind(removeEventListener, t, n, s, r);
   })));
 };
@@ -579,39 +605,86 @@ const stopPropagation = t => t.stopPropagation();
 
 const preventDefault = t => t.preventDefault();
 
-const V = {
-  x: 0,
-  y: 0
-};
-
-const absoluteCoordinates = t => {
-  const o = t && getBoundingClientRect(t);
-  return o ? {
-    x: o.left + n.scrollX,
-    y: o.top + n.scrollY
-  } : V;
-};
-
-const convertScrollPosition = (t, n, o) => o ? o.n ? -t + 0 : o.i ? n - t : t : t;
-
-const getRawScrollBounds = (t, n) => [ convertScrollPosition(0, t, n), convertScrollPosition(t, t, n) ];
-
-const getRawScrollRatio = (t, n, o) => capNumber(0, 1, convertScrollPosition(t, n, o) / n || 0);
+const stopAndPrevent = t => stopPropagation(t) || preventDefault(t);
 
 const scrollElementTo = (t, n) => {
-  const {x: o, y: s} = isNumber(n) ? {
+  const {x: o, y: s} = isNumber$1(n) ? {
     x: n,
     y: n
   } : n || {};
-  isNumber(o) && (t.scrollLeft = o);
-  isNumber(s) && (t.scrollTop = s);
+  isNumber$1(o) && (t.scrollLeft = o);
+  isNumber$1(s) && (t.scrollTop = s);
 };
 
-const getElmentScroll = t => ({
+const getElementScroll = t => ({
   x: t.scrollLeft,
   y: t.scrollTop
 });
 
+const getZeroScrollCoordinates = () => ({
+  T: {
+    x: 0,
+    y: 0
+  },
+  D: {
+    x: 0,
+    y: 0
+  }
+});
+
+const sanitizeScrollCoordinates = (t, n) => {
+  const {T: o, D: s} = t;
+  const {w: e, h: l} = n;
+  const sanitizeAxis = (t, n, o) => {
+    let s = r(t) * o;
+    let e = r(n) * o;
+    if (s === e) {
+      const o = c(t);
+      const r = c(n);
+      e = o > r ? 0 : e;
+      s = o < r ? 0 : s;
+    }
+    s = s === e ? 0 : s;
+    return [ s + 0, e + 0 ];
+  };
+  const [i, a] = sanitizeAxis(o.x, s.x, e);
+  const [u, _] = sanitizeAxis(o.y, s.y, l);
+  return {
+    T: {
+      x: i,
+      y: u
+    },
+    D: {
+      x: a,
+      y: _
+    }
+  };
+};
+
+const isDefaultDirectionScrollCoordinates = ({T: t, D: n}) => {
+  const getAxis = (t, n) => t === 0 && t <= n;
+  return {
+    x: getAxis(t.x, n.x),
+    y: getAxis(t.y, n.y)
+  };
+};
+
+const getScrollCoordinatesPercent = ({T: t, D: n}, o) => {
+  const getAxis = (t, n, o) => capNumber(0, 1, (t - o) / (t - n) || 0);
+  return {
+    x: getAxis(t.x, n.x, o.x),
+    y: getAxis(t.y, n.y, o.y)
+  };
+};
+
+const focusElement = t => {
+  if (t && t.focus) {
+    t.focus({
+      preventScroll: true
+    });
+  }
+};
+
 const manageListener = (t, n) => {
   each(createOrKeepArray(n), t);
 };
@@ -634,7 +707,7 @@ const createEventListenerHub = t => {
     }
   };
   const addEvent = (t, o) => {
-    if (isString(t)) {
+    if (isString$2(t)) {
       const s = n.get(t) || new Set;
       n.set(t, s);
       manageListener((t => {
@@ -673,9 +746,9 @@ const opsStringify = t => JSON.stringify(t, ((t, n) => {
   return n;
 }));
 
-const getPropByPath = (t, n) => t ? `${n}`.split(".").reduce(((t, n) => t && hasOwnProperty(t, n) ? t[n] : void 0), t) : void 0;
+const getPropByPath = (t, n) => t ? `${n}`.split(".").reduce(((t, n) => t && hasOwnProperty$1(t, n) ? t[n] : void 0), t) : void 0;
 
-const L = {
+const V = {
   paddingAbsolute: false,
   showNativeOverlaidScrollbars: false,
   update: {
@@ -706,12 +779,12 @@ const getOptionsDiff = (t, n) => {
   each(s, (s => {
     const e = t[s];
     const c = n[s];
-    if (isObject(e) && isObject(c)) {
+    if (isObject$1(e) && isObject$1(c)) {
       assignDeep(o[s] = {}, getOptionsDiff(e, c));
       if (isEmptyObject(o[s])) {
         delete o[s];
       }
-    } else if (hasOwnProperty(n, s) && c !== e) {
+    } else if (hasOwnProperty$1(n, s) && c !== e) {
       let t = true;
       if (isArray(e) || isArray(c)) {
         try {
@@ -730,220 +803,126 @@ const getOptionsDiff = (t, n) => {
 
 const createOptionCheck = (t, n, o) => s => [ getPropByPath(t, s), o || getPropByPath(n, s) !== void 0 ];
 
-const P = `data-overlayscrollbars`;
+const L = `data-overlayscrollbars`;
 
-const U = "os-environment";
+const P = "os-environment";
 
-const B = `${U}-scrollbar-hidden`;
+const U = `${P}-scrollbar-hidden`;
 
-const N = `${P}-initialize`;
+const N = `${L}-initialize`;
 
-const j = P;
+const q = "noClipping";
 
-const F = `${j}-overflow-x`;
+const B = `${L}-body`;
 
-const q = `${j}-overflow-y`;
+const F = L;
 
-const W = "overflowVisible";
+const j = "host";
 
-const X = "scrollbarPressed";
+const X = `${L}-viewport`;
 
-const Y = "updating";
+const Y = C;
 
-const J = "body";
+const W = x;
 
-const K = `${P}-viewport`;
+const J = "arrange";
 
-const Z = "arrange";
+const K = "measuring";
 
 const G = "scrollbarHidden";
 
-const Q = W;
+const Q = "scrollbarPressed";
 
-const tt = `${P}-padding`;
+const Z = "noContent";
 
-const nt = Q;
+const tt = `${L}-padding`;
 
-const ot = `${P}-content`;
+const nt = `${L}-content`;
 
-const st = "os-size-observer";
+const ot = "os-size-observer";
 
-const et = `${st}-appear`;
+const st = `${ot}-appear`;
 
-const ct = `${st}-listener`;
+const et = `${ot}-listener`;
 
-const at = "os-trinsic-observer";
+const it = "os-trinsic-observer";
 
-const ut = "os-theme-none";
+const at = "os-theme-none";
 
-const ft = "os-scrollbar";
+const ut = "os-scrollbar";
 
-const _t = `${ft}-rtl`;
+const _t = `${ut}-rtl`;
 
-const dt = `${ft}-horizontal`;
+const dt = `${ut}-horizontal`;
 
-const vt = `${ft}-vertical`;
+const ft = `${ut}-vertical`;
 
-const ht = `${ft}-track`;
+const pt = `${ut}-track`;
 
-const pt = `${ft}-handle`;
+const vt = `${ut}-handle`;
 
-const gt = `${ft}-visible`;
+const ht = `${ut}-visible`;
 
-const bt = `${ft}-cornerless`;
+const gt = `${ut}-cornerless`;
 
-const wt = `${ft}-interaction`;
+const bt = `${ut}-interaction`;
 
-const St = `${ft}-unusable`;
+const wt = `${ut}-unusable`;
 
-const yt = `${ft}-auto-hide`;
+const yt = `${ut}-auto-hide`;
 
 const mt = `${yt}-hidden`;
 
-const Ot = `${ft}-wheel`;
+const St = `${ut}-wheel`;
 
-const $t = `${ht}-interactive`;
+const Ot = `${pt}-interactive`;
 
-const Ct = `${pt}-interactive`;
+const $t = `${vt}-interactive`;
 
-const xt = {};
-
-const Ht = {};
-
-const addPlugins = t => {
-  each(t, (t => each(t, ((n, o) => {
-    xt[o] = t[o];
-  }))));
-};
-
-const registerPluginModuleInstances = (t, n, o) => keys(t).map((s => {
-  const {static: e, instance: c} = t[s];
-  const [r, l, i] = o || [];
-  const a = o ? c : e;
-  if (a) {
-    const t = o ? a(r, l, n) : a(n);
-    return (i || Ht)[s] = t;
-  }
-}));
-
-const getStaticPluginModuleInstance = t => Ht[t];
-
-const It = "__osOptionsValidationPlugin";
-
-const zt = "__osSizeObserverPlugin";
-
-const getShowNativeOverlaidScrollbars = (t, n) => {
-  const {T: o} = n;
-  const [s, e] = t("showNativeOverlaidScrollbars");
-  return [ s && o.x && o.y, e ];
-};
-
-const overflowIsVisible = t => t.indexOf(E) === 0;
-
-const getViewportOverflowState = (t, n) => {
-  const {D: o} = t;
-  const getStatePerAxis = t => {
-    const s = getStyles(o, t);
-    const e = n ? n[t] : s;
-    const c = e === "scroll";
-    return [ s, c ];
-  };
-  const [s, e] = getStatePerAxis(C);
-  const [c, r] = getStatePerAxis(x);
-  return {
-    k: {
-      x: s,
-      y: c
-    },
-    R: {
-      x: e,
-      y: r
-    }
-  };
-};
-
-const setViewportOverflowState = (t, n, o, s) => {
-  const e = n.x || n.y;
-  const setAxisOverflowStyle = (t, n) => {
-    const o = overflowIsVisible(t);
-    const s = o && e ? "hidden" : "";
-    const c = n && o && t.replace(`${E}-`, "") || s;
-    return [ n && !o ? t : "", overflowIsVisible(c) ? "hidden" : c ];
-  };
-  const [c, r] = setAxisOverflowStyle(o.x, n.x);
-  const [l, i] = setAxisOverflowStyle(o.y, n.y);
-  s[C] = r && l ? r : c;
-  s[x] = i && c ? i : l;
-  return getViewportOverflowState(t, s);
-};
-
-const At = "__osScrollbarsHidingPlugin";
-
-const Dt = "__osClickScrollPlugin";
-
-let Rt;
+let Ct;
 
 const createEnvironment = () => {
-  const getNativeScrollbarSize = (t, n, o, s) => {
-    appendChildren(t, n);
-    const e = R(n);
-    const c = k(n);
-    const r = fractionalSize(o);
-    s && removeElements(n);
+  const getNativeScrollbarSize = (t, n, o) => {
+    appendChildren(document.body, t);
+    appendChildren(document.body, t);
+    const s = M(t);
+    const e = k(t);
+    const c = getFractionalSize(n);
+    o && removeElements(t);
     return {
-      x: c.h - e.h + r.h,
-      y: c.w - e.w + r.w
+      x: e.h - s.h + c.h,
+      y: e.w - s.w + c.w
     };
   };
   const getNativeScrollbarsHiding = t => {
     let n = false;
-    const o = addClass(t, B);
+    const o = addClass(t, U);
     try {
       n = getStyles(t, "scrollbar-width") === "none" || getStyles(t, "display", "::-webkit-scrollbar") === "none";
     } catch (s) {}
     o();
     return n;
   };
-  const getRtlScrollBehavior = (t, n) => {
-    setStyles(t, {
-      [C]: z,
-      [x]: z,
-      direction: "rtl"
-    });
-    scrollElementTo(t, {
-      x: 0
-    });
-    const o = absoluteCoordinates(t);
-    const s = absoluteCoordinates(n);
-    scrollElementTo(t, {
-      x: -999
-    });
-    const e = absoluteCoordinates(n);
-    return {
-      i: o.x === s.x,
-      n: s.x !== e.x
-    };
-  };
-  const {body: t} = document;
-  const o = createDOM(`<div class="${U}"><div></div></div>`);
+  const t = `.${P}{scroll-behavior:auto!important;position:fixed;opacity:0;visibility:hidden;overflow:scroll;height:200px;width:200px;z-index:-1}.${P} div{width:200%;height:200%;margin:10px 0}.${U}{scrollbar-width:none!important}.${U}::-webkit-scrollbar,.${U}::-webkit-scrollbar-corner{appearance:none!important;display:none!important;width:0!important;height:0!important}`;
+  const o = createDOM(`<div class="${P}"><div></div><style>${t}</style></div>`);
   const s = o[0];
   const e = s.firstChild;
   const [c, , r] = createEventListenerHub();
   const [l, i] = createCache({
-    o: getNativeScrollbarSize(t, s, e),
-    u: equalXY
-  }, bind(getNativeScrollbarSize, t, s, e, true));
+    o: getNativeScrollbarSize(s, e),
+    i: equalXY
+  }, bind(getNativeScrollbarSize, s, e, true));
   const [a] = i();
   const u = getNativeScrollbarsHiding(s);
-  const f = {
+  const _ = {
     x: a.x === 0,
     y: a.y === 0
   };
-  const _ = {
+  const d = {
     elements: {
       host: null,
       padding: !u,
-      viewport: t => u && t === t.ownerDocument.body && t,
+      viewport: t => u && isBodyElement(t) && t,
       content: false
     },
     scrollbars: {
@@ -954,42 +933,51 @@ const createEnvironment = () => {
       body: null
     }
   };
-  const v = assignDeep({}, L);
-  const h = bind(assignDeep, {}, v);
-  const p = bind(assignDeep, {}, _);
+  const f = assignDeep({}, V);
+  const v = bind(assignDeep, {}, f);
+  const h = bind(assignDeep, {}, d);
   const g = {
-    P: a,
-    T: f,
-    L: u,
-    J: !!d,
-    K: getRtlScrollBehavior(s, e),
-    Z: bind(c, "r"),
-    G: p,
-    tt: t => assignDeep(_, t) && p(),
-    nt: h,
-    ot: t => assignDeep(v, t) && h(),
-    st: assignDeep({}, _),
-    et: assignDeep({}, v)
+    k: a,
+    M: _,
+    R: u,
+    V: !!p,
+    L: bind(c, "r"),
+    P: h,
+    U: t => assignDeep(d, t) && h(),
+    N: v,
+    q: t => assignDeep(f, t) && v(),
+    B: assignDeep({}, d),
+    F: assignDeep({}, f)
   };
   removeAttrs(s, "style");
   removeElements(s);
-  n.addEventListener("resize", (() => {
-    let t;
-    if (!u && (!f.x || !f.y)) {
-      const n = getStaticPluginModuleInstance(At);
-      const o = n ? n.Y() : noop;
-      t = !!o(g, l);
-    }
-    r("r", [ t ]);
+  addEventListener(n, "resize", (() => {
+    r("r", []);
   }));
+  if (isFunction(n.matchMedia) && !u && (!_.x || !_.y)) {
+    const addZoomListener = t => {
+      const o = n.matchMedia(`(resolution: ${n.devicePixelRatio}dppx)`);
+      addEventListener(o, "change", (() => {
+        t();
+        addZoomListener(t);
+      }), {
+        A: true
+      });
+    };
+    addZoomListener((() => {
+      const [t, n] = l();
+      assignDeep(g.k, t);
+      r("r", [ n ]);
+    }));
+  }
   return g;
 };
 
 const getEnvironment = () => {
-  if (!Rt) {
-    Rt = createEnvironment();
+  if (!Ct) {
+    Ct = createEnvironment();
   }
-  return Rt;
+  return Ct;
 };
 
 const resolveInitialization = (t, n) => isFunction(n) ? n.apply(0, t) : n;
@@ -1008,26 +996,26 @@ const dynamicInitializationElement = (t, n, o, s) => {
 
 const cancelInitialization = (t, n) => {
   const {nativeScrollbarsOverlaid: o, body: s} = n || {};
-  const {T: e, L: c, G: r} = getEnvironment();
+  const {M: e, R: c, P: r} = getEnvironment();
   const {nativeScrollbarsOverlaid: l, body: i} = r().cancel;
   const a = o != null ? o : l;
   const u = isUndefined(s) ? i : s;
-  const f = (e.x || e.y) && a;
-  const _ = t && (isNull(u) ? !c : u);
-  return !!f || !!_;
+  const _ = (e.x || e.y) && a;
+  const d = t && (isNull(u) ? !c : u);
+  return !!_ || !!d;
 };
 
-const Mt = new WeakMap;
+const xt = new WeakMap;
 
 const addInstance = (t, n) => {
-  Mt.set(t, n);
+  xt.set(t, n);
 };
 
 const removeInstance = t => {
-  Mt.delete(t);
+  xt.delete(t);
 };
 
-const getInstance = t => Mt.get(t);
+const getInstance = t => xt.get(t);
 
 const createEventContentChange = (t, n, o) => {
   let s = false;
@@ -1069,62 +1057,63 @@ const createEventContentChange = (t, n, o) => {
 
 const createDOMObserver = (t, n, o, s) => {
   let e = false;
-  const {ct: c, rt: r, lt: l, it: i, ut: a, ft: f} = s || {};
-  const _ = debounce((() => e && o(true)), {
-    v: 33,
+  const {j: c, X: r, Y: l, W: i, J: a, K: u} = s || {};
+  const d = debounce((() => e && o(true)), {
+    _: 33,
     p: 99
   });
-  const [d, v] = createEventContentChange(t, _, l);
-  const h = c || [];
-  const p = r || [];
-  const g = concat(h, p);
+  const [f, p] = createEventContentChange(t, d, l);
+  const v = c || [];
+  const h = r || [];
+  const g = concat(v, h);
   const observerCallback = (e, c) => {
     if (!isEmptyArray(c)) {
-      const r = a || noop;
-      const l = f || noop;
-      const u = [];
+      const r = a || noop$1;
+      const l = u || noop$1;
       const _ = [];
-      let d = false;
-      let h = false;
+      const d = [];
+      let f = false;
+      let v = false;
       each(c, (o => {
-        const {attributeName: e, target: c, type: a, oldValue: f, addedNodes: v, removedNodes: g} = o;
+        const {attributeName: e, target: c, type: a, oldValue: u, addedNodes: p, removedNodes: g} = o;
         const b = a === "attributes";
         const w = a === "childList";
-        const S = t === c;
-        const y = b && e;
-        const m = y && getAttr(c, e || "") || null;
-        const O = y && f !== m;
-        const $ = inArray(p, e) && O;
-        if (n && (w || !S)) {
-          const n = b && O;
+        const y = t === c;
+        const m = b && e;
+        const S = m && getAttr(c, e || "");
+        const O = isString$2(S) ? S : null;
+        const $ = m && u !== O;
+        const C = inArray(h, e) && $;
+        if (n && (w || !y)) {
+          const n = b && $;
           const a = n && i && is(c, i);
-          const _ = a ? !r(c, e, f, m) : !b || n;
-          const d = _ && !l(o, !!a, t, s);
-          each(v, (t => push(u, t)));
-          each(g, (t => push(u, t)));
-          h = h || d;
+          const d = a ? !r(c, e, u, O) : !b || n;
+          const f = d && !l(o, !!a, t, s);
+          each(p, (t => push(_, t)));
+          each(g, (t => push(_, t)));
+          v = v || f;
         }
-        if (!n && S && O && !r(c, e, f, m)) {
-          push(_, e);
-          d = d || $;
+        if (!n && y && $ && !r(c, e, u, O)) {
+          push(d, e);
+          f = f || C;
         }
       }));
-      v((t => deduplicateArray(u).reduce(((n, o) => {
+      p((t => deduplicateArray(_).reduce(((n, o) => {
         push(n, find(t, o));
         return is(o, t) ? push(n, o) : n;
       }), [])));
       if (n) {
-        !e && h && o(false);
+        !e && v && o(false);
         return [ false ];
       }
-      if (!isEmptyArray(_) || d) {
-        const t = [ deduplicateArray(_), d ];
+      if (!isEmptyArray(d) || f) {
+        const t = [ deduplicateArray(d), f ];
         !e && o.apply(0, t);
         return t;
       }
     }
   };
-  const b = new u(bind(observerCallback, false));
+  const b = new _(bind(observerCallback, false));
   return [ () => {
     b.observe(t, {
       attributes: true,
@@ -1137,103 +1126,139 @@ const createDOMObserver = (t, n, o, s) => {
     e = true;
     return () => {
       if (e) {
-        d();
+        f();
         b.disconnect();
         e = false;
       }
     };
   }, () => {
     if (e) {
-      _.m();
+      d.S();
       return observerCallback(true, b.takeRecords());
     }
   } ];
 };
 
+const Ht = {};
+
+const Et = {};
+
+const addPlugins = t => {
+  each(t, (t => each(t, ((n, o) => {
+    Ht[o] = t[o];
+  }))));
+};
+
+const registerPluginModuleInstances = (t, n, o) => keys(t).map((s => {
+  const {static: e, instance: c} = t[s];
+  const [r, l, i] = o || [];
+  const a = o ? c : e;
+  if (a) {
+    const t = o ? a(r, l, n) : a(n);
+    return (i || Et)[s] = t;
+  }
+}));
+
+const getStaticPluginModuleInstance = t => Et[t];
+
+const zt = "__osOptionsValidationPlugin";
+
+const It = "__osSizeObserverPlugin";
+
+const getShowNativeOverlaidScrollbars = (t, n) => {
+  const {M: o} = n;
+  const [s, e] = t("showNativeOverlaidScrollbars");
+  return [ s && o.x && o.y, e ];
+};
+
+const overflowIsVisible = t => t.indexOf(z) === 0;
+
+const createViewportOverflowState = (t, n) => {
+  const getAxisOverflowStyle = (t, n, o, s) => {
+    const e = t === z ? I : t.replace(`${z}-`, "");
+    const c = overflowIsVisible(t);
+    const r = overflowIsVisible(o);
+    if (!n && !s) {
+      return I;
+    }
+    if (c && r) {
+      return z;
+    }
+    if (c) {
+      const t = n ? z : I;
+      return n && s ? e : t;
+    }
+    const l = r && s ? z : I;
+    return n ? e : l;
+  };
+  const o = {
+    x: getAxisOverflowStyle(n.x, t.x, n.y, t.y),
+    y: getAxisOverflowStyle(n.y, t.y, n.x, t.x)
+  };
+  return {
+    G: o,
+    Z: {
+      x: o.x === A,
+      y: o.y === A
+    }
+  };
+};
+
+const Tt = "__osScrollbarsHidingPlugin";
+
+const kt = "__osClickScrollPlugin";
+
 const createSizeObserver = (t, n, o) => {
-  const s = 3333333;
-  const {_t: e, dt: c} = o || {};
-  const r = getStaticPluginModuleInstance(zt);
-  const {K: l} = getEnvironment();
-  const i = bind(getDirectionIsRTL, t);
-  const [a] = createCache({
+  const {dt: s} = o || {};
+  const e = getStaticPluginModuleInstance(It);
+  const [c] = createCache({
     o: false,
-    _: true
+    u: true
   });
   return () => {
     const o = [];
-    const u = createDOM(`<div class="${st}"><div class="${ct}"></div></div>`);
-    const f = u[0];
-    const d = f.firstChild;
+    const r = createDOM(`<div class="${ot}"><div class="${et}"></div></div>`);
+    const l = r[0];
+    const i = l.firstChild;
     const onSizeChangedCallbackProxy = t => {
       const o = t instanceof ResizeObserverEntry;
-      const c = !o && isArray(t);
-      let r = false;
-      let i = false;
-      let u = true;
+      let s = false;
+      let e = false;
       if (o) {
-        const [n, , o] = a(t.contentRect);
-        const s = domRectHasDimensions(n);
-        const e = domRectAppeared(n, o);
-        const c = !o;
-        i = c || e;
-        r = !i && !s;
-        u = !r;
-      } else if (c) {
-        [, u] = t;
+        const [n, , o] = c(t.contentRect);
+        const r = domRectHasDimensions(n);
+        e = domRectAppeared(n, o);
+        s = !e && !r;
       } else {
-        i = t === true;
-      }
-      if (e && u) {
-        const n = c ? t[0] : getDirectionIsRTL(f);
-        scrollElementTo(f, {
-          x: convertScrollPosition(s, s, n && l),
-          y: s
-        });
+        e = t === true;
       }
-      if (!r) {
+      if (!s) {
         n({
-          vt: c ? t : void 0,
-          ht: !c,
-          dt: i
+          ft: true,
+          dt: e
         });
       }
     };
-    if (_) {
-      const t = new _((t => onSizeChangedCallbackProxy(t.pop())));
-      t.observe(d);
+    if (f) {
+      const t = new f((t => onSizeChangedCallbackProxy(t.pop())));
+      t.observe(i);
       push(o, (() => {
         t.disconnect();
       }));
-    } else if (r) {
-      const [t, n] = r(d, onSizeChangedCallbackProxy, c);
-      push(o, concat([ addClass(f, et), addEventListener(f, "animationstart", t) ], n));
+    } else if (e) {
+      const [t, n] = e(i, onSizeChangedCallbackProxy, s);
+      push(o, concat([ addClass(l, st), addEventListener(l, "animationstart", t) ], n));
     } else {
-      return noop;
+      return noop$1;
     }
-    if (e) {
-      const [t] = createCache({
-        o: void 0
-      }, i);
-      push(o, addEventListener(f, "scroll", (n => {
-        const o = t();
-        const [s, e, c] = o;
-        if (e) {
-          removeClass(d, "ltr rtl");
-          addClass(d, s ? "rtl" : "ltr");
-          onSizeChangedCallbackProxy([ !!s, e, c ]);
-        }
-        stopPropagation(n);
-      })));
-    }
-    return bind(runEachAndClear, push(o, appendChildren(t, f)));
+    return bind(runEachAndClear, push(o, appendChildren(t, l)));
   };
 };
 
 const createTrinsicObserver = (t, n) => {
   let o;
   const isHeightIntrinsic = t => t.h === 0 || t.isIntersecting || t.intersectionRatio > 0;
-  const s = createDiv(at);
+  const s = createDiv(it);
   const [e] = createCache({
     o: false
   });
@@ -1247,8 +1272,8 @@ const createTrinsicObserver = (t, n) => {
   const intersectionObserverCallback = (t, n) => triggerOnTrinsicChangedCallback(n.pop(), t);
   return [ () => {
     const n = [];
-    if (f) {
-      o = new f(bind(intersectionObserverCallback, false), {
+    if (d) {
+      o = new d(bind(intersectionObserverCallback, false), {
         root: t
       });
       o.observe(s);
@@ -1274,50 +1299,48 @@ const createObserversSetup = (t, n, o, s) => {
   let l;
   let i;
   let a;
-  const {L: u} = getEnvironment();
-  const f = `[${j}]`;
-  const d = `[${K}]`;
-  const v = [ "tabindex" ];
-  const h = [ "wrap", "cols", "rows" ];
-  const p = [ "id", "class", "style", "open" ];
-  const {gt: g, bt: b, D: w, wt: S, St: y, V: m, yt: O, Ot: $} = t;
-  const C = {
+  const u = `[${F}]`;
+  const _ = `[${X}]`;
+  const d = [];
+  const p = [ "wrap", "cols", "rows" ];
+  const v = [ "id", "class", "style", "open" ];
+  const {vt: h, ht: g, ot: b, gt: w, bt: y, wt: m, nt: S, yt: O, St: $, Ot: C} = t;
+  const getDirectionIsRTL = t => getStyles(t, "direction") === "rtl";
+  const x = {
     $t: false,
-    N: getDirectionIsRTL(g)
+    ct: getDirectionIsRTL(h)
   };
-  const x = getEnvironment();
-  const H = getStaticPluginModuleInstance(At);
-  const [I] = createCache({
-    u: equalWH,
+  const H = getEnvironment();
+  const E = getStaticPluginModuleInstance(Tt);
+  const [z] = createCache({
+    i: equalWH,
     o: {
       w: 0,
       h: 0
     }
   }, (() => {
-    const s = H && H.M(t, n, C, x, o).W;
-    const e = O(Q);
-    const c = !m && O(Z);
-    const r = c && getElmentScroll(w);
-    $(Q);
-    m && $(Y, true);
-    const l = c && s && s()[0];
-    const i = M(S);
-    const a = M(w);
-    const u = fractionalSize(w);
-    $(Q, e);
-    m && $(Y);
-    l && l();
-    scrollElementTo(w, r);
+    const s = E && E.tt(t, n, x, H, o).ut;
+    const e = O && S;
+    const c = !e && hasAttrClass(g, F, q);
+    const r = !S && $(J);
+    const l = r && getElementScroll(w);
+    const i = C(K, c);
+    const a = r && s && s()[0];
+    const u = R(b);
+    const _ = getFractionalSize(b);
+    a && a();
+    scrollElementTo(w, l);
+    c && i();
     return {
-      w: a.w + i.w + u.w,
-      h: a.h + i.h + u.h
+      w: u.w + _.w,
+      h: u.h + _.h
     };
   }));
-  const z = y ? h : concat(p, h);
-  const E = debounce(s, {
-    v: () => e,
+  const I = m ? p : concat(v, p);
+  const A = debounce(s, {
+    _: () => e,
     p: () => c,
-    S(t, n) {
+    m(t, n) {
       const [o] = t;
       const [s] = n;
       return [ concat(keys(o), keys(s)).reduce(((t, n) => {
@@ -1326,108 +1349,95 @@ const createObserversSetup = (t, n, o, s) => {
       }), {}) ];
     }
   });
-  const setDirectionWhenViewportIsTarget = t => {
-    if (m) {
-      const n = getDirectionIsRTL(g);
-      assignDeep(t, {
-        Ct: a !== n
-      });
-      assignDeep(C, {
-        N: n
-      });
-      a = n;
-    }
-  };
-  const updateViewportAttrsFromHost = t => {
-    each(t || v, (t => {
-      if (inArray(v, t)) {
-        const n = getAttr(b, t);
-        if (isString(n)) {
-          setAttrs(w, t, n);
-        } else {
-          removeAttrs(w, t);
-        }
-      }
-    }));
+  const setDirection = t => {
+    const n = getDirectionIsRTL(h);
+    assignDeep(t, {
+      Ct: a !== n
+    });
+    assignDeep(x, {
+      ct: n
+    });
+    a = n;
   };
   const onTrinsicChanged = (t, n) => {
     const [o, e] = t;
     const c = {
       xt: e
     };
-    assignDeep(C, {
+    assignDeep(x, {
       $t: o
     });
     !n && s(c);
     return c;
   };
-  const onSizeChanged = ({ht: t, vt: n, dt: o}) => {
-    const e = t && !o && !n;
-    const c = !e && u ? E : s;
-    const [r, l] = n || [];
-    const i = {
-      ht: t || o,
-      dt: o,
-      Ct: l
+  const onSizeChanged = ({ft: t, dt: n}) => {
+    const o = t && !n;
+    const e = !o && H.R ? A : s;
+    const c = {
+      ft: t || n,
+      dt: n
     };
-    setDirectionWhenViewportIsTarget(i);
-    n && assignDeep(C, {
-      N: r
-    });
-    c(i);
+    setDirection(c);
+    e(c);
   };
   const onContentMutation = (t, n) => {
-    const [, o] = I();
+    const [, o] = z();
     const e = {
       Ht: o
     };
-    setDirectionWhenViewportIsTarget(e);
-    const c = t ? s : E;
+    setDirection(e);
+    const c = t ? s : A;
     o && !n && c(e);
     return e;
   };
   const onHostMutation = (t, n, o) => {
     const s = {
-      It: n
+      Et: n
     };
-    setDirectionWhenViewportIsTarget(s);
+    setDirection(s);
     if (n && !o) {
-      E(s);
-    } else if (!m) {
-      updateViewportAttrsFromHost(t);
+      A(s);
     }
     return s;
   };
-  const {Z: A} = x;
-  const [T, D] = S ? createTrinsicObserver(b, onTrinsicChanged) : [];
-  const k = !m && createSizeObserver(b, onSizeChanged, {
-    dt: true,
-    _t: true
+  const [T, D] = y ? createTrinsicObserver(g, onTrinsicChanged) : [];
+  const k = !S && createSizeObserver(g, onSizeChanged, {
+    dt: true
   });
-  const [R, V] = createDOMObserver(b, false, onHostMutation, {
-    rt: p,
-    ct: concat(p, v)
+  const [M, V] = createDOMObserver(g, false, onHostMutation, {
+    X: v,
+    j: concat(v, d)
   });
-  const L = m && _ && new _((t => {
+  const L = S && f && new f((t => {
     const n = t[t.length - 1].contentRect;
     onSizeChanged({
-      ht: true,
+      ft: true,
       dt: domRectAppeared(n, i)
     });
     i = n;
   }));
+  const P = debounce((() => {
+    const [, t] = z();
+    s({
+      Ht: t
+    });
+  }), {
+    _: 222,
+    v: true
+  });
   return [ () => {
-    updateViewportAttrsFromHost();
-    L && L.observe(b);
+    L && L.observe(g);
     const t = k && k();
     const n = T && T();
-    const o = R();
-    const s = A((t => {
-      const [, n] = I();
-      E({
-        zt: t,
-        Ht: n
-      });
+    const o = M();
+    const s = H.L((t => {
+      if (t) {
+        A({
+          zt: t
+        });
+      } else {
+        P();
+      }
     }));
     return () => {
       L && L.disconnect();
@@ -1437,115 +1447,117 @@ const createObserversSetup = (t, n, o, s) => {
       o();
       s();
     };
-  }, ({Et: t, At: n, Tt: o}) => {
+  }, ({It: t, At: n, Tt: o}) => {
     const s = {};
     const [i] = t("update.ignoreMutation");
-    const [a, u] = t("update.attributes");
-    const [_, v] = t("update.elementEvents");
-    const [h, p] = t("update.debounce");
-    const g = v || u;
-    const b = n || o;
+    const [a, d] = t("update.attributes");
+    const [f, p] = t("update.elementEvents");
+    const [v, h] = t("update.debounce");
+    const g = p || d;
+    const w = n || o;
     const ignoreMutationFromOptions = t => isFunction(i) && i(t);
     if (g) {
       r && r();
       l && l();
-      const [t, n] = createDOMObserver(S || w, true, onContentMutation, {
-        ct: concat(z, a || []),
-        lt: _,
-        it: f,
-        ft: (t, n) => {
+      const [t, n] = createDOMObserver(y || b, true, onContentMutation, {
+        j: concat(I, a || []),
+        Y: f,
+        W: u,
+        K: (t, n) => {
           const {target: o, attributeName: s} = t;
-          const e = !n && s && !m ? liesBetween(o, f, d) : false;
-          return e || !!closest(o, `.${ft}`) || !!ignoreMutationFromOptions(t);
+          const e = !n && s && !S ? liesBetween(o, u, _) : false;
+          return e || !!closest(o, `.${ut}`) || !!ignoreMutationFromOptions(t);
         }
       });
       l = t();
       r = n;
     }
-    if (p) {
-      E.m();
-      if (isArray(h)) {
-        const t = h[0];
-        const n = h[1];
-        e = isNumber(t) && t;
-        c = isNumber(n) && n;
-      } else if (isNumber(h)) {
-        e = h;
+    if (h) {
+      A.S();
+      if (isArray(v)) {
+        const t = v[0];
+        const n = v[1];
+        e = isNumber$1(t) && t;
+        c = isNumber$1(n) && n;
+      } else if (isNumber$1(v)) {
+        e = v;
         c = false;
       } else {
         e = false;
         c = false;
       }
     }
-    if (b) {
+    if (w) {
       const t = V();
       const n = D && D();
       const o = r && r();
-      t && assignDeep(s, onHostMutation(t[0], t[1], b));
-      n && assignDeep(s, onTrinsicChanged(n[0], b));
-      o && assignDeep(s, onContentMutation(o[0], b));
+      t && assignDeep(s, onHostMutation(t[0], t[1], w));
+      n && assignDeep(s, onTrinsicChanged(n[0], w));
+      o && assignDeep(s, onContentMutation(o[0], w));
     }
-    setDirectionWhenViewportIsTarget(s);
+    setDirection(s);
     return s;
-  }, C ];
+  }, x ];
 };
 
 const createScrollbarsSetupElements = (t, n, o, s) => {
-  const {G: e, K: c} = getEnvironment();
-  const {scrollbars: r} = e();
-  const {slot: l} = r;
-  const {gt: i, bt: a, D: u, Dt: f, kt: _, Rt: v, V: h} = n;
-  const {scrollbars: p} = f ? {} : t;
-  const {slot: g} = p || {};
-  const b = new Map;
-  const initScrollTimeline = t => d && new d({
+  const {P: e} = getEnvironment();
+  const {scrollbars: c} = e();
+  const {slot: r} = c;
+  const {vt: l, ht: i, ot: a, Dt: u, gt: _, yt: d, nt: f} = n;
+  const {scrollbars: v} = u ? {} : t;
+  const {slot: h} = v || {};
+  const g = new Map;
+  const initScrollTimeline = t => p && new p({
     source: _,
     axis: t
   });
-  const w = initScrollTimeline("x");
-  const S = initScrollTimeline("y");
-  const y = dynamicInitializationElement([ i, a, u ], (() => h && v ? i : a), l, g);
+  const b = {
+    x: initScrollTimeline("x"),
+    y: initScrollTimeline("y")
+  };
+  const w = dynamicInitializationElement([ l, i, a ], (() => f && d ? l : i), r, h);
   const getScrollbarHandleLengthRatio = (t, n) => {
     if (n) {
-      const o = t ? H : I;
-      const {Mt: s, Vt: e} = n;
+      const o = t ? H : E;
+      const {kt: s, Mt: e} = n;
       const c = getBoundingClientRect(e)[o];
       const r = getBoundingClientRect(s)[o];
       return capNumber(0, 1, c / r || 0);
     }
     const s = t ? "x" : "y";
-    const {Lt: e, Pt: c} = o;
+    const {Rt: e, Vt: c} = o;
     const r = c[s];
     const l = e[s];
     return capNumber(0, 1, r / (r + l) || 0);
   };
-  const getScrollbarHandleOffsetRatio = (t, n, o, s) => {
-    const e = getScrollbarHandleLengthRatio(o, t);
-    return 1 / e * (1 - e) * (s ? 1 - n : n) || 0;
+  const getScrollbarHandleOffsetRatio = (t, n, o) => {
+    const s = getScrollbarHandleLengthRatio(o, t);
+    return 1 / s * (1 - s) * n;
   };
-  const addDirectionRTLKeyframes = (t, n) => assignDeep(t, n ? {
+  const addDirectionRTLKeyframes = t => assignDeep(t, {
     clear: [ "left" ]
-  } : {});
+  });
   const cancelElementAnimations = t => {
-    b.forEach(((n, o) => {
+    g.forEach(((n, o) => {
       const s = t ? inArray(createOrKeepArray(t), o) : true;
       if (s) {
         each(n || [], (t => {
           t && t.cancel();
         }));
-        b.delete(o);
+        g.delete(o);
       }
     }));
   };
   const setElementAnimation = (t, n, o, s) => {
-    const e = b.get(t) || [];
+    const e = g.get(t) || [];
     const c = e.find((t => t && t.timeline === n));
     if (c) {
       c.effect = new KeyframeEffect(t, o, {
         composite: s
       });
     } else {
-      b.set(t, concat(e, [ t.animate(o, {
+      g.set(t, concat(e, [ t.animate(o, {
         timeline: n,
         composite: s
       }) ]));
@@ -1554,7 +1566,7 @@ const createScrollbarsSetupElements = (t, n, o, s) => {
   const scrollbarStructureAddRemoveClass = (t, n, o) => {
     const s = o ? addClass : removeClass;
     each(t, (t => {
-      s(t.Ut, n);
+      s(t.Lt, n);
     }));
   };
   const scrollbarStyle = (t, n) => {
@@ -1565,250 +1577,270 @@ const createScrollbarsSetupElements = (t, n, o, s) => {
   };
   const scrollbarStructureRefreshHandleLength = (t, n) => {
     scrollbarStyle(t, (t => {
-      const {Vt: o} = t;
+      const {Mt: o} = t;
       return [ o, {
-        [n ? H : I]: ratioToCssPercent(getScrollbarHandleLengthRatio(n))
+        [n ? H : E]: ratioToCssPercent(getScrollbarHandleLengthRatio(n))
       } ];
     }));
   };
   const scrollbarStructureRefreshHandleOffset = (t, n) => {
-    const {Lt: s} = o;
-    const e = n ? s.x : s.y;
-    const getTransformValue = (t, o, s) => getTrasformTranslateValue(ratioToCssPercent(getScrollbarHandleOffsetRatio(t, getRawScrollRatio(o, e, s), n, s)), n);
-    if (w && S) {
+    const {Pt: s} = o;
+    const e = n ? "x" : "y";
+    const c = b[e];
+    const r = isDefaultDirectionScrollCoordinates(s)[e];
+    const getAxisTransformValue = (t, o) => getTrasformTranslateValue(ratioToCssPercent(getScrollbarHandleOffsetRatio(t, r ? o : 1 - o, n)), n);
+    if (c) {
       each(t, (t => {
-        const {Ut: o, Vt: s} = t;
-        const r = n && getDirectionIsRTL(o) && c;
-        setElementAnimation(s, n ? w : S, addDirectionRTLKeyframes({
-          transform: getRawScrollBounds(e, r).map((n => getTransformValue(t, n, r)))
-        }, r));
+        const {Mt: n} = t;
+        setElementAnimation(n, c, addDirectionRTLKeyframes({
+          transform: [ 0, 1 ].map((n => getAxisTransformValue(t, n)))
+        }));
       }));
     } else {
-      const o = getElmentScroll(_);
-      scrollbarStyle(t, (t => {
-        const {Vt: s, Ut: e} = t;
-        return [ s, {
-          transform: getTransformValue(t, n ? o.x : o.y, n && getDirectionIsRTL(e) && c)
-        } ];
-      }));
+      scrollbarStyle(t, (t => [ t.Mt, {
+        transform: getAxisTransformValue(t, getScrollCoordinatesPercent(s, getElementScroll(_))[e])
+      } ]));
     }
   };
-  const doRefreshScrollbarOffset = t => h && !v && parent(t) === u;
+  const doRefreshScrollbarOffset = t => f && !d && parent(t) === a;
+  const y = [];
   const m = [];
-  const O = [];
-  const $ = [];
+  const S = [];
   const scrollbarsAddRemoveClass = (t, n, o) => {
     const s = isBoolean(o);
     const e = s ? o : true;
     const c = s ? !o : true;
-    e && scrollbarStructureAddRemoveClass(O, t, n);
-    c && scrollbarStructureAddRemoveClass($, t, n);
+    e && scrollbarStructureAddRemoveClass(m, t, n);
+    c && scrollbarStructureAddRemoveClass(S, t, n);
   };
   const refreshScrollbarsHandleLength = () => {
-    scrollbarStructureRefreshHandleLength(O, true);
-    scrollbarStructureRefreshHandleLength($);
+    scrollbarStructureRefreshHandleLength(m, true);
+    scrollbarStructureRefreshHandleLength(S);
   };
   const refreshScrollbarsHandleOffset = () => {
-    scrollbarStructureRefreshHandleOffset(O, true);
-    scrollbarStructureRefreshHandleOffset($);
+    scrollbarStructureRefreshHandleOffset(m, true);
+    scrollbarStructureRefreshHandleOffset(S);
   };
   const refreshScrollbarsScrollbarOffset = () => {
-    if (h) {
-      const {Lt: t} = o;
-      const n = .5;
-      if (w && S) {
-        each(concat($, O), (({Ut: o}) => {
-          if (doRefreshScrollbarOffset(o)) {
-            const setScrollbarElementAnimation = (t, s, e) => {
-              const r = e && getDirectionIsRTL(o) && c;
-              setElementAnimation(o, t, addDirectionRTLKeyframes({
-                transform: getRawScrollBounds(s - n, r).map((t => getTrasformTranslateValue(numberToCssPx(t), e)))
-              }, r), "add");
-            };
-            setScrollbarElementAnimation(w, t.x, true);
-            setScrollbarElementAnimation(S, t.y);
+    if (f) {
+      const {Rt: t, Pt: n} = o;
+      const s = isDefaultDirectionScrollCoordinates(n);
+      const e = .5;
+      if (b.x && b.y) {
+        each(concat(S, m), (({Lt: n}) => {
+          if (doRefreshScrollbarOffset(n)) {
+            const setScrollbarElementAnimation = o => setElementAnimation(n, b[o], addDirectionRTLKeyframes({
+              transform: [ 0, s[o] ? 1 : -1 ].map((n => getTrasformTranslateValue(numberToCssPx(n * (t[o] - e)), o === "x")))
+            }), "add");
+            setScrollbarElementAnimation("x");
+            setScrollbarElementAnimation("y");
           } else {
-            cancelElementAnimations(o);
+            cancelElementAnimations(n);
           }
         }));
       } else {
-        const n = getElmentScroll(_);
-        const styleScrollbarPosition = o => {
-          const {Ut: s} = o;
-          const e = doRefreshScrollbarOffset(s) && s;
+        const o = getScrollCoordinatesPercent(n, getElementScroll(_));
+        const styleScrollbarPosition = n => {
+          const {Lt: e} = n;
+          const c = doRefreshScrollbarOffset(e) && e;
           const getTranslateValue = (t, n, o) => {
-            const s = getRawScrollRatio(t, n, o);
-            const e = n * s;
-            return numberToCssPx(o ? -e : e);
+            const s = n * t;
+            return numberToCssPx(o ? s : -s);
           };
-          return [ e, {
-            transform: e ? getTrasformTranslateValue({
-              x: getTranslateValue(n.x, t.x, getDirectionIsRTL(s) && c),
-              y: getTranslateValue(n.y, t.y)
-            }) : ""
+          return [ c, c && {
+            transform: getTrasformTranslateValue({
+              x: getTranslateValue(o.x, t.x, s.x),
+              y: getTranslateValue(o.y, t.y, s.y)
+            })
           } ];
         };
-        scrollbarStyle(O, styleScrollbarPosition);
-        scrollbarStyle($, styleScrollbarPosition);
+        scrollbarStyle(m, styleScrollbarPosition);
+        scrollbarStyle(S, styleScrollbarPosition);
       }
     }
   };
   const generateScrollbarDOM = t => {
-    const n = t ? dt : vt;
-    const o = createDiv(`${ft} ${n}`);
-    const e = createDiv(ht);
-    const c = createDiv(pt);
+    const n = t ? dt : ft;
+    const o = createDiv(`${ut} ${n}`);
+    const e = createDiv(pt);
+    const c = createDiv(vt);
     const r = {
-      Ut: o,
-      Mt: e,
-      Vt: c
+      Lt: o,
+      kt: e,
+      Mt: c
     };
-    push(t ? O : $, r);
-    push(m, [ appendChildren(o, e), appendChildren(e, c), bind(removeElements, o), cancelElementAnimations, s(r, scrollbarsAddRemoveClass, scrollbarStructureRefreshHandleOffset, t) ]);
+    push(t ? m : S, r);
+    push(y, [ appendChildren(o, e), appendChildren(e, c), bind(removeElements, o), cancelElementAnimations, s(r, scrollbarsAddRemoveClass, scrollbarStructureRefreshHandleOffset, t) ]);
     return r;
   };
-  const C = bind(generateScrollbarDOM, true);
-  const x = bind(generateScrollbarDOM, false);
+  const O = bind(generateScrollbarDOM, true);
+  const $ = bind(generateScrollbarDOM, false);
   const appendElements = () => {
-    appendChildren(y, O[0].Ut);
-    appendChildren(y, $[0].Ut);
-    return bind(runEachAndClear, m);
+    appendChildren(w, m[0].Lt);
+    appendChildren(w, S[0].Lt);
+    return bind(runEachAndClear, y);
   };
-  C();
-  x();
+  O();
+  $();
   return [ {
-    Bt: refreshScrollbarsHandleLength,
+    Ut: refreshScrollbarsHandleLength,
     Nt: refreshScrollbarsHandleOffset,
-    jt: refreshScrollbarsScrollbarOffset,
-    Ft: scrollbarsAddRemoveClass,
-    qt: {
-      J: w,
-      Wt: O,
-      Xt: C,
-      Yt: bind(scrollbarStyle, O)
+    qt: refreshScrollbarsScrollbarOffset,
+    Bt: scrollbarsAddRemoveClass,
+    Ft: {
+      V: b.x,
+      jt: m,
+      Xt: O,
+      Yt: bind(scrollbarStyle, m)
     },
-    Jt: {
-      J: S,
-      Wt: $,
-      Xt: x,
-      Yt: bind(scrollbarStyle, $)
+    Wt: {
+      V: b.y,
+      jt: S,
+      Xt: $,
+      Yt: bind(scrollbarStyle, S)
     }
   }, appendElements ];
 };
 
-const createScrollbarsSetupEvents = (t, n, o) => {
-  const {bt: s, kt: c, Kt: r} = n;
-  return (n, l, i, a) => {
-    const {Ut: u, Mt: f, Vt: _} = n;
-    const [d, v] = selfClearTimeout(333);
-    const [h, p] = selfClearTimeout();
-    const g = bind(i, [ n ], a);
-    const b = !!c.scrollBy;
-    const w = `client${a ? "X" : "Y"}`;
-    const S = a ? H : I;
-    const y = a ? "left" : "top";
-    const m = a ? "w" : "h";
-    const O = a ? "x" : "y";
-    const isAffectingTransition = t => t.propertyName.indexOf(S) > -1;
-    const createInteractiveScrollEvents = () => {
-      const n = "pointerup pointerleave pointercancel lostpointercapture";
-      const createRelativeHandleMove = (t, n) => s => {
-        const {Lt: e} = o;
-        const r = k(f)[m] - k(_)[m];
-        const l = n * s / r;
-        const i = l * e[O];
-        scrollElementTo(c, {
-          [O]: t + i
-        });
-      };
-      return addEventListener(f, "pointerdown", (o => {
-        const l = closest(o.target, `.${pt}`) === _;
-        const i = l ? _ : f;
-        const a = t.scrollbars;
-        const {button: u, isPrimary: d, pointerType: v} = o;
-        const {pointers: h} = a;
-        const p = u === 0 && d && a[l ? "dragScroll" : "clickScroll"] && (h || []).includes(v);
-        if (p) {
-          const t = !l && o.shiftKey;
-          const a = bind(getBoundingClientRect, _);
-          const u = bind(getBoundingClientRect, f);
-          const getHandleOffset = (t, n) => (t || a())[y] - (n || u())[y];
-          const d = e(getBoundingClientRect(c)[S]) / k(c)[m] || 1;
-          const v = createRelativeHandleMove(getElmentScroll(c)[O] || 0, 1 / d);
-          const h = o[w];
-          const p = a();
-          const g = u();
-          const b = p[S];
-          const $ = getHandleOffset(p, g) + b / 2;
-          const C = h - g[y];
-          const x = l ? 0 : C - $;
-          const releasePointerCapture = t => {
-            runEachAndClear(I);
-            i.releasePointerCapture(t.pointerId);
+const createScrollbarsSetupEvents = (t, n, o, s) => (r, l, i, u) => {
+  const {ht: _, ot: d, nt: f, gt: p, Jt: v, Ot: h} = n;
+  const {Lt: g, kt: b, Mt: w} = r;
+  const [y, m] = selfClearTimeout(333);
+  const [S, O] = selfClearTimeout(444);
+  const [$, C] = selfClearTimeout();
+  const x = bind(i, [ r ], u);
+  const scrollOffsetElementScrollBy = t => {
+    isFunction(p.scrollBy) && p.scrollBy({
+      behavior: "smooth",
+      left: t.x,
+      top: t.y
+    });
+  };
+  const z = u ? H : E;
+  const createInteractiveScrollEvents = () => {
+    const n = "pointerup pointercancel lostpointercapture";
+    const s = `client${u ? "X" : "Y"}`;
+    const r = u ? "left" : "top";
+    const l = u ? "w" : "h";
+    const i = u ? "x" : "y";
+    const createRelativeHandleMove = (t, n) => s => {
+      const {Rt: e} = o;
+      const c = k(b)[l] - k(w)[l];
+      const r = n * s / c;
+      const a = r * e[i];
+      scrollElementTo(p, {
+        [i]: t + a
+      });
+    };
+    return addEventListener(b, "pointerdown", (o => {
+      const a = closest(o.target, `.${vt}`) === w;
+      const u = a ? w : b;
+      const _ = t.scrollbars;
+      const {button: d, isPrimary: f, pointerType: g} = o;
+      const {pointers: y} = _;
+      const m = d === 0 && f && _[a ? "dragScroll" : "clickScroll"] && (y || []).includes(g);
+      if (m) {
+        O();
+        const t = !a && o.shiftKey;
+        const _ = bind(getBoundingClientRect, w);
+        const d = bind(getBoundingClientRect, b);
+        const getHandleOffset = (t, n) => (t || _())[r] - (n || d())[r];
+        const f = e(getBoundingClientRect(p)[z]) / k(p)[l] || 1;
+        const g = createRelativeHandleMove(getElementScroll(p)[i], 1 / f);
+        const y = o[s];
+        const m = _();
+        const $ = d();
+        const C = m[z];
+        const x = getHandleOffset(m, $) + C / 2;
+        const H = y - $[r];
+        const E = a ? 0 : H - x;
+        const releasePointerCapture = t => {
+          runEachAndClear(A);
+          u.releasePointerCapture(t.pointerId);
+        };
+        const addScrollbarPressedClass = () => h(Q, true);
+        const I = addScrollbarPressedClass();
+        const A = [ () => {
+          const t = getElementScroll(p);
+          I();
+          const n = getElementScroll(p);
+          const o = {
+            x: n.x - t.x,
+            y: n.y - t.y
           };
-          const H = addAttrClass(s, j, X);
-          const I = [ H, addEventListener(r, n, releasePointerCapture), addEventListener(r, "selectstart", (t => preventDefault(t)), {
-            H: false
-          }), addEventListener(f, n, releasePointerCapture), addEventListener(f, "pointermove", (n => {
-            const o = n[w] - h;
-            if (l || t) {
-              v(x + o);
-            }
-          })) ];
-          i.setPointerCapture(o.pointerId);
-          if (t) {
-            v(x);
-          } else if (!l) {
-            const t = getStaticPluginModuleInstance(Dt);
-            t && push(I, t(v, getHandleOffset, x, b, C));
+          if (c(o.x) > 3 || c(o.y) > 3) {
+            addScrollbarPressedClass();
+            scrollElementTo(p, t);
+            scrollOffsetElementScrollBy(o);
+            S(I);
+          }
+        }, addEventListener(v, n, releasePointerCapture), addEventListener(v, "selectstart", (t => preventDefault(t)), {
+          H: false
+        }), addEventListener(b, n, releasePointerCapture), addEventListener(b, "pointermove", (n => {
+          const o = n[s] - y;
+          if (a || t) {
+            g(E + o);
           }
+        })) ];
+        u.setPointerCapture(o.pointerId);
+        if (t) {
+          g(E);
+        } else if (!a) {
+          const t = getStaticPluginModuleInstance(kt);
+          t && push(A, t(g, getHandleOffset, E, C, H));
         }
-      }));
-    };
-    let $ = true;
-    return bind(runEachAndClear, [ addEventListener(u, "pointerenter", (() => {
-      l(wt, true);
-    })), addEventListener(u, "pointerleave pointercancel", (() => {
-      l(wt, false);
-    })), addEventListener(u, "wheel", (t => {
-      const {deltaX: n, deltaY: o, deltaMode: e} = t;
-      if (b && $ && e === 0 && parent(u) === s) {
-        c.scrollBy({
-          left: n,
-          top: o,
-          behavior: "smooth"
-        });
-      }
-      $ = false;
-      l(Ot, true);
-      d((() => {
-        $ = true;
-        l(Ot);
-      }));
-      preventDefault(t);
-    }), {
-      H: false,
-      I: true
-    }), addEventListener(_, "transitionstart", (t => {
-      if (isAffectingTransition(t)) {
-        const animateHandleOffset = () => {
-          g();
-          h(animateHandleOffset);
-        };
-        animateHandleOffset();
       }
-    })), addEventListener(_, "transitionend transitioncancel", (t => {
-      if (isAffectingTransition(t)) {
-        p();
-        g();
-      }
-    })), addEventListener(u, "mousedown", bind(addEventListener, r, "click", stopPropagation, {
-      A: true,
-      I: true
-    }), {
-      I: true
-    }), createInteractiveScrollEvents(), v, p ]);
+    }));
   };
+  let I = true;
+  const isAffectingTransition = t => t.propertyName.indexOf(z) > -1;
+  return bind(runEachAndClear, [ addEventListener(w, "pointermove pointerleave", s), addEventListener(g, "pointerenter", (() => {
+    l(bt, true);
+  })), addEventListener(g, "pointerleave pointercancel", (() => {
+    l(bt, false);
+  })), !f && addEventListener(g, "mousedown", (() => {
+    const t = getFocusedElement();
+    if (hasAttr(t, X) || hasAttr(t, F) || t === document.body) {
+      a(bind(focusElement, d), 25);
+    }
+  })), addEventListener(g, "wheel", (t => {
+    const {deltaX: n, deltaY: o, deltaMode: s} = t;
+    if (I && s === 0 && parent(g) === _) {
+      scrollOffsetElementScrollBy({
+        x: n,
+        y: o
+      });
+    }
+    I = false;
+    l(St, true);
+    y((() => {
+      I = true;
+      l(St);
+    }));
+    preventDefault(t);
+  }), {
+    H: false,
+    I: true
+  }), addEventListener(w, "transitionstart", (t => {
+    if (isAffectingTransition(t)) {
+      const animateHandleOffset = () => {
+        x();
+        $(animateHandleOffset);
+      };
+      animateHandleOffset();
+    }
+  })), addEventListener(w, "transitionend transitioncancel", (t => {
+    if (isAffectingTransition(t)) {
+      C();
+      x();
+    }
+  })), addEventListener(g, "pointerdown", bind(addEventListener, v, "click", stopAndPrevent, {
+    A: true,
+    I: true,
+    H: false
+  }), {
+    I: true
+  }), createInteractiveScrollEvents(), m, O, C ]);
 };
 
 const createScrollbarsSetup = (t, n, o, s, e, c) => {
@@ -1817,99 +1849,96 @@ const createScrollbarsSetup = (t, n, o, s, e, c) => {
   let i;
   let a;
   let u;
-  let f = noop;
-  let _ = 0;
-  const [d, v] = selfClearTimeout();
-  const [h, p] = selfClearTimeout();
+  let _ = noop$1;
+  let d = 0;
+  const isHoverablePointerType = t => t.pointerType === "mouse";
+  const [f, p] = selfClearTimeout();
+  const [v, h] = selfClearTimeout(100);
   const [g, b] = selfClearTimeout(100);
-  const [w, S] = selfClearTimeout(100);
-  const [y, m] = selfClearTimeout(100);
-  const [O, $] = selfClearTimeout((() => _));
-  const [C, x] = createScrollbarsSetupElements(t, e, s, createScrollbarsSetupEvents(n, e, s));
-  const {bt: H, Zt: I, Rt: z} = e;
-  const {Ft: E, Bt: A, Nt: T, jt: D} = C;
-  const manageAutoHideSuspension = t => {
-    E(yt, t, true);
-    E(yt, t, false);
-  };
+  const [w, y] = selfClearTimeout((() => d));
+  const [m, S] = createScrollbarsSetupElements(t, e, s, createScrollbarsSetupEvents(n, e, s, (t => isHoverablePointerType(t) && manageScrollbarsAutoHideInstantInteraction())));
+  const {ht: O, Kt: $, yt: C} = e;
+  const {Bt: x, Ut: H, Nt: E, qt: I} = m;
   const manageScrollbarsAutoHide = (t, n) => {
-    $();
+    y();
     if (t) {
-      E(mt);
+      x(mt);
     } else {
-      const t = bind(E, mt, true);
-      if (_ > 0 && !n) {
-        O(t);
+      const t = bind(x, mt, true);
+      if (d > 0 && !n) {
+        w(t);
       } else {
         t();
       }
     }
   };
-  const isHoverablePointerType = t => t.pointerType === "mouse";
+  const manageScrollbarsAutoHideInstantInteraction = () => {
+    if (i ? !r : !a) {
+      manageScrollbarsAutoHide(true);
+      v((() => {
+        manageScrollbarsAutoHide(false);
+      }));
+    }
+  };
+  const manageAutoHideSuspension = t => {
+    x(yt, t, true);
+    x(yt, t, false);
+  };
   const onHostMouseEnter = t => {
     if (isHoverablePointerType(t)) {
-      a = l;
-      a && manageScrollbarsAutoHide(true);
+      r = i;
+      i && manageScrollbarsAutoHide(true);
     }
   };
-  const k = [ b, $, S, m, p, v, () => f(), addEventListener(H, "pointerover", onHostMouseEnter, {
+  const T = [ y, h, b, p, () => _(), addEventListener(O, "pointerover", onHostMouseEnter, {
     A: true
-  }), addEventListener(H, "pointerenter", onHostMouseEnter), addEventListener(H, "pointerleave", (t => {
+  }), addEventListener(O, "pointerenter", onHostMouseEnter), addEventListener(O, "pointerleave", (t => {
     if (isHoverablePointerType(t)) {
-      a = false;
-      l && manageScrollbarsAutoHide(false);
-    }
-  })), addEventListener(H, "pointermove", (t => {
-    isHoverablePointerType(t) && r && d((() => {
-      b();
-      manageScrollbarsAutoHide(true);
-      w((() => {
-        r && manageScrollbarsAutoHide(false);
-      }));
-    }));
-  })), addEventListener(I, "scroll", (t => {
-    h((() => {
-      T();
-      i && manageScrollbarsAutoHide(true);
-      g((() => {
-        i && !a && manageScrollbarsAutoHide(false);
-      }));
+      r = false;
+      i && manageScrollbarsAutoHide(false);
+    }
+  })), addEventListener(O, "pointermove", (t => {
+    isHoverablePointerType(t) && l && manageScrollbarsAutoHideInstantInteraction();
+  })), addEventListener($, "scroll", (t => {
+    f((() => {
+      E();
+      manageScrollbarsAutoHideInstantInteraction();
     }));
     c(t);
-    D();
+    I();
   })) ];
-  return [ () => bind(runEachAndClear, push(k, x())), ({Et: t, Tt: n, Gt: e, Qt: c}) => {
-    const {tn: a, nn: d, sn: v} = c || {};
-    const {Ct: h, dt: p} = e || {};
-    const {N: g} = o;
-    const {T: b} = getEnvironment();
-    const {k: w, en: S} = s;
-    const [m, O] = t("showNativeOverlaidScrollbars");
-    const [$, C] = t("scrollbars.theme");
-    const [x, H] = t("scrollbars.visibility");
-    const [k, R] = t("scrollbars.autoHide");
-    const [M, V] = t("scrollbars.autoHideSuspend");
-    const [L] = t("scrollbars.autoHideDelay");
-    const [P, U] = t("scrollbars.dragScroll");
-    const [B, N] = t("scrollbars.clickScroll");
-    const [j, F] = t("overflow");
-    const q = p && !n;
-    const W = S.x || S.y;
-    const X = a || d || h || n;
-    const Y = v || H || F;
-    const J = m && b.x && b.y;
+  return [ () => bind(runEachAndClear, push(T, S())), ({It: t, Tt: n, Gt: e, Qt: c}) => {
+    const {Zt: r, tn: f, nn: p, sn: v} = c || {};
+    const {Ct: h, dt: b} = e || {};
+    const {ct: w} = o;
+    const {M: y} = getEnvironment();
+    const {G: m, en: S} = s;
+    const [O, T] = t("showNativeOverlaidScrollbars");
+    const [D, k] = t("scrollbars.theme");
+    const [M, R] = t("scrollbars.visibility");
+    const [V, L] = t("scrollbars.autoHide");
+    const [P, U] = t("scrollbars.autoHideSuspend");
+    const [N] = t("scrollbars.autoHideDelay");
+    const [q, B] = t("scrollbars.dragScroll");
+    const [F, j] = t("scrollbars.clickScroll");
+    const [X, Y] = t("overflow");
+    const W = b && !n;
+    const J = S.x || S.y;
+    const K = r || f || v || h || n;
+    const G = p || R || Y;
+    const Q = O && y.x && y.y;
     const setScrollbarVisibility = (t, n, o) => {
-      const s = t.includes("scroll") && (x === "visible" || x === "auto" && n === "scroll");
-      E(gt, s, o);
+      const s = t.includes(A) && (M === z || M === "auto" && n === A);
+      x(ht, s, o);
       return s;
     };
-    _ = L;
-    if (q) {
-      if (M && W) {
+    d = N;
+    if (W) {
+      if (P && J) {
         manageAutoHideSuspension(false);
-        f();
-        y((() => {
-          f = addEventListener(I, "scroll", bind(manageAutoHideSuspension, true), {
+        _();
+        g((() => {
+          _ = addEventListener($, "scroll", bind(manageAutoHideSuspension, true), {
             A: true
           });
         }));
@@ -1917,373 +1946,403 @@ const createScrollbarsSetup = (t, n, o, s, e, c) => {
         manageAutoHideSuspension(true);
       }
     }
-    if (O) {
-      E(ut, J);
+    if (T) {
+      x(at, Q);
     }
-    if (C) {
-      E(u);
-      E($, true);
-      u = $;
+    if (k) {
+      x(u);
+      x(D, true);
+      u = D;
     }
-    if (V && !M) {
+    if (U && !P) {
       manageAutoHideSuspension(true);
     }
-    if (R) {
-      r = k === "move";
-      l = k === "leave";
-      i = k !== "never";
-      manageScrollbarsAutoHide(!i, true);
+    if (L) {
+      l = V === "move";
+      i = V === "leave";
+      a = V === "never";
+      manageScrollbarsAutoHide(a, true);
     }
-    if (U) {
-      E(Ct, P);
+    if (B) {
+      x($t, q);
     }
-    if (N) {
-      E($t, B);
+    if (j) {
+      x(Ot, F);
     }
-    if (Y) {
-      const t = setScrollbarVisibility(j.x, w.x, true);
-      const n = setScrollbarVisibility(j.y, w.y, false);
+    if (G) {
+      const t = setScrollbarVisibility(X.x, m.x, true);
+      const n = setScrollbarVisibility(X.y, m.y, false);
       const o = t && n;
-      E(bt, !o);
+      x(gt, !o);
     }
-    if (X) {
-      A();
-      T();
-      D();
-      E(St, !S.x, true);
-      E(St, !S.y, false);
-      E(_t, g && !z);
+    if (K) {
+      H();
+      E();
+      I();
+      x(wt, !S.x, true);
+      x(wt, !S.y, false);
+      x(_t, w && !C);
     }
-  }, {}, C ];
+  }, {}, m ];
 };
 
 const createStructureSetupElements = t => {
-  const n = getEnvironment();
-  const {G: o, L: s} = n;
-  const {elements: e} = o();
-  const {host: c, padding: r, viewport: l, content: i} = e;
-  const a = isHTMLElement(t);
-  const u = a ? {} : t;
-  const {elements: f} = u;
-  const {host: _, padding: d, viewport: v, content: h} = f || {};
-  const p = a ? t : u.target;
-  const g = is(p, "textarea");
-  const b = p.ownerDocument;
-  const w = b.documentElement;
-  const S = p === b.body;
-  const y = b.defaultView;
-  const getFocusedElement = () => b.activeElement;
-  const focusElm = t => {
-    if (t && t.focus) {
-      t.focus();
-    }
-  };
-  const m = bind(staticInitializationElement, [ p ]);
-  const O = bind(dynamicInitializationElement, [ p ]);
-  const $ = bind(resolveInitialization, [ p ]);
-  const C = bind(createDiv, "");
-  const x = bind(m, C, l);
-  const H = bind(O, C, i);
-  const I = x(v);
-  const z = I === p;
-  const E = z && S;
-  const A = !z && H(h);
-  const T = !z && isHTMLElement(I) && I === A;
-  const D = T && !!$(i);
-  const k = D ? x() : I;
-  const R = D ? A : H();
-  const M = T ? k : I;
-  const V = E ? w : M;
-  const L = g ? m(C, c, _) : p;
-  const P = E ? V : L;
-  const U = T ? R : A;
-  const B = {
-    gt: p,
-    bt: P,
-    D: V,
-    cn: !z && O(C, r, d),
-    wt: U,
-    kt: E ? w : V,
-    Zt: E ? b : V,
-    rn: S ? w : p,
-    ln: y,
-    Kt: b,
-    St: g,
-    Rt: S,
-    Dt: a,
-    V: z,
-    an: T,
-    yt: t => hasAttrClass(V, z ? j : K, t),
-    Ot: (t, n) => addRemoveAttrClass(V, z ? j : K, t, n)
-  };
-  const W = keys(B).reduce(((t, n) => {
-    const o = B[n];
-    return push(t, o && isHTMLElement(o) && !parent(o) ? o : false);
-  }), []);
-  const elementIsGenerated = t => t ? inArray(W, t) : null;
-  const {gt: X, bt: Y, cn: Z, D: Q, wt: nt} = B;
-  const st = [ () => {
-    removeAttrs(Y, [ j, N ]);
-    removeAttrs(X, N);
-    if (S) {
-      removeAttrs(w, [ N, j ]);
+  const o = getEnvironment();
+  const {P: s, R: e} = o;
+  const {elements: c} = s();
+  const {host: r, padding: l, viewport: i, content: a} = c;
+  const u = isHTMLElement(t);
+  const _ = u ? {} : t;
+  const {elements: d} = _;
+  const {host: f, padding: p, viewport: v, content: h} = d || {};
+  const g = u ? t : _.target;
+  const b = isBodyElement(g);
+  const w = is(g, "textarea");
+  const y = g.ownerDocument;
+  const m = y.documentElement;
+  const getDocumentWindow = () => y.defaultView || n;
+  const S = bind(staticInitializationElement, [ g ]);
+  const O = bind(dynamicInitializationElement, [ g ]);
+  const $ = bind(createDiv, "");
+  const C = bind(S, $, i);
+  const x = bind(O, $, a);
+  const H = C(v);
+  const E = H === g;
+  const z = E && b;
+  const I = !E && x(h);
+  const A = !E && H === I;
+  const T = z ? m : H;
+  const D = w ? S($, r, f) : g;
+  const k = z ? T : D;
+  const M = !E && O($, l, p);
+  const R = !A && I;
+  const V = [ R, T, M, k ].map((t => isHTMLElement(t) && !parent(t) && t));
+  const elementIsGenerated = t => t && inArray(V, t);
+  const L = elementIsGenerated(T) ? g : T;
+  const P = {
+    vt: g,
+    ht: k,
+    ot: T,
+    cn: M,
+    bt: R,
+    gt: z ? m : T,
+    Kt: z ? y : T,
+    rn: b ? m : L,
+    Jt: y,
+    wt: w,
+    yt: b,
+    Dt: u,
+    nt: E,
+    ln: getDocumentWindow,
+    St: t => hasAttrClass(T, X, t),
+    Ot: (t, n) => addRemoveAttrClass(T, X, t, n)
+  };
+  const {vt: U, ht: q, cn: Y, ot: W, bt: J} = P;
+  const K = [ () => {
+    removeAttrs(q, [ F, N ]);
+    removeAttrs(U, N);
+    if (b) {
+      removeAttrs(m, [ N, F ]);
     }
   } ];
-  const et = g && elementIsGenerated(Y);
-  let ct = g ? X : contents([ nt, Q, Z, Y, X ].find((t => elementIsGenerated(t) === false)));
-  const rt = E ? X : nt || Q;
-  const lt = bind(runEachAndClear, st);
+  const Q = w && elementIsGenerated(q);
+  let Z = w ? U : contents([ J, W, Y, q, U ].find((t => t && !elementIsGenerated(t))));
+  const ot = z ? U : J || W;
+  const st = bind(runEachAndClear, K);
   const appendElements = () => {
-    const t = getFocusedElement();
+    const t = getDocumentWindow();
+    const n = getFocusedElement();
     const unwrap = t => {
       appendChildren(parent(t), contents(t));
       removeElements(t);
     };
-    const prepareWrapUnwrapFocus = t => t ? addEventListener(t, "focusin focusout focus blur", (t => {
-      stopPropagation(t);
-      t.stopImmediatePropagation();
-    }), {
+    const prepareWrapUnwrapFocus = t => addEventListener(t, "focusin focusout focus blur", stopAndPrevent, {
       I: true,
       H: false
-    }) : noop;
-    const n = prepareWrapUnwrapFocus(t);
-    setAttrs(Y, j, z ? "viewport" : "host");
-    setAttrs(Z, tt, "");
-    setAttrs(nt, ot, "");
-    if (!z) {
-      setAttrs(Q, K, "");
-      S && addAttrClass(w, j, J);
-    }
-    if (et) {
-      insertAfter(X, Y);
-      push(st, (() => {
-        insertAfter(Y, X);
-        removeElements(Y);
+    });
+    const o = "tabindex";
+    const s = getAttr(W, o);
+    const c = prepareWrapUnwrapFocus(n);
+    setAttrs(q, F, E ? "" : j);
+    setAttrs(Y, tt, "");
+    setAttrs(W, X, "");
+    setAttrs(J, nt, "");
+    if (!E) {
+      setAttrs(W, o, s || "-1");
+      b && setAttrs(m, B, "");
+    }
+    if (Q) {
+      insertAfter(U, q);
+      push(K, (() => {
+        insertAfter(q, U);
+        removeElements(q);
       }));
     }
-    appendChildren(rt, ct);
-    appendChildren(Y, Z);
-    appendChildren(Z || Y, !z && Q);
-    appendChildren(Q, nt);
-    push(st, [ n, () => {
+    appendChildren(ot, Z);
+    appendChildren(q, Y);
+    appendChildren(Y || q, !E && W);
+    appendChildren(W, J);
+    push(K, [ c, () => {
       const t = getFocusedElement();
-      const n = prepareWrapUnwrapFocus(t);
-      removeAttrs(Z, tt);
-      removeAttrs(nt, ot);
-      removeAttrs(Q, [ F, q, K ]);
-      elementIsGenerated(nt) && unwrap(nt);
-      elementIsGenerated(Q) && unwrap(Q);
-      elementIsGenerated(Z) && unwrap(Z);
-      focusElm(t);
-      n();
+      const n = elementIsGenerated(W);
+      const e = n && t === W ? U : t;
+      const c = prepareWrapUnwrapFocus(e);
+      removeAttrs(Y, tt);
+      removeAttrs(J, nt);
+      removeAttrs(W, X);
+      b && removeAttrs(m, B);
+      s ? setAttrs(W, o, s) : removeAttrs(W, o);
+      elementIsGenerated(J) && unwrap(J);
+      n && unwrap(W);
+      elementIsGenerated(Y) && unwrap(Y);
+      focusElement(e);
+      c();
     } ]);
-    if (s && !z) {
-      addAttrClass(Q, K, G);
-      push(st, bind(removeAttrs, Q, K));
-    }
-    if (!z && y.top === y && t === p) {
-      const t = "tabindex";
-      const n = getAttr(Q, t);
-      setAttrs(Q, t, "-1");
-      focusElm(Q);
-      const revertViewportTabIndex = () => n ? setAttrs(Q, t, n) : removeAttrs(Q, t);
-      const o = addEventListener(b, "pointerdown keydown", (() => {
-        revertViewportTabIndex();
-        o();
-      }));
-      push(st, [ revertViewportTabIndex, o ]);
-    } else {
-      focusElm(t);
+    if (e && !E) {
+      addAttrClass(W, X, G);
+      push(K, bind(removeAttrs, W, X));
     }
-    n();
-    ct = 0;
-    return lt;
+    focusElement(!E && b && n === U && t.top === t ? W : n);
+    c();
+    Z = 0;
+    return st;
   };
-  return [ B, appendElements, lt ];
+  return [ P, appendElements, st ];
 };
 
-const createTrinsicUpdateSegment = ({wt: t}) => ({Gt: n, un: o, Tt: s}) => {
+const createTrinsicUpdateSegment = ({bt: t}) => ({Gt: n, an: o, Tt: s}) => {
   const {xt: e} = n || {};
   const {$t: c} = o;
   const r = t && (e || s);
   if (r) {
     setStyles(t, {
-      [I]: c && "100%"
+      [E]: c && "100%"
     });
   }
 };
 
-const createPaddingUpdateSegment = ({bt: t, cn: n, D: o, V: s}, e) => {
+const createPaddingUpdateSegment = ({ht: t, cn: n, ot: o, nt: s}, e) => {
   const [c, r] = createCache({
-    u: equalTRBL,
+    i: equalTRBL,
     o: topRightBottomLeft()
   }, bind(topRightBottomLeft, t, "padding", ""));
-  return ({Et: t, Gt: l, un: i, Tt: a}) => {
-    let [u, f] = r(a);
-    const {L: _} = getEnvironment();
-    const {ht: d, Ht: v, Ct: h} = l || {};
-    const {N: p} = i;
+  return ({It: t, Gt: l, an: i, Tt: a}) => {
+    let [u, _] = r(a);
+    const {R: d} = getEnvironment();
+    const {ft: f, Ht: p, Ct: v} = l || {};
+    const {ct: h} = i;
     const [g, C] = t("paddingAbsolute");
-    const x = a || v;
-    if (d || f || x) {
-      [u, f] = c(a);
+    const x = a || p;
+    if (f || _ || x) {
+      [u, _] = c(a);
     }
-    const I = !s && (C || h || f);
-    if (I) {
-      const t = !g || !n && !_;
+    const E = !s && (C || v || _);
+    if (E) {
+      const t = !g || !n && !d;
       const s = u.r + u.l;
       const c = u.t + u.b;
       const r = {
-        [O]: t && !p ? -s : 0,
+        [O]: t && !h ? -s : 0,
         [$]: t ? -c : 0,
-        [m]: t && p ? -s : 0,
+        [S]: t && h ? -s : 0,
         top: t ? -u.t : 0,
-        right: t ? p ? -u.r : "auto" : 0,
-        left: t ? p ? "auto" : -u.l : 0,
+        right: t ? h ? -u.r : "auto" : 0,
+        left: t ? h ? "auto" : -u.l : 0,
         [H]: t && `calc(100% + ${s}px)`
       };
       const l = {
         [b]: t ? u.t : 0,
         [w]: t ? u.r : 0,
-        [y]: t ? u.b : 0,
-        [S]: t ? u.l : 0
+        [m]: t ? u.b : 0,
+        [y]: t ? u.l : 0
       };
       setStyles(n || o, r);
       setStyles(o, l);
       assignDeep(e, {
         cn: u,
-        fn: !t,
-        j: n ? l : assignDeep({}, r, l)
+        un: !t,
+        rt: n ? l : assignDeep({}, r, l)
       });
     }
     return {
-      _n: I
+      _n: E
     };
   };
 };
 
 const createOverflowUpdateSegment = (t, s) => {
   const e = getEnvironment();
-  const {bt: c, cn: r, D: l, V: i, Ot: a, Rt: u, ln: f} = t;
-  const {L: _} = e;
-  const d = u && i;
-  const v = bind(o, 0);
-  const h = {
-    u: equalWH,
+  const {ht: c, cn: r, ot: l, nt: a, Kt: u, gt: _, yt: d, Ot: f, ln: p} = t;
+  const {R: v} = e;
+  const h = d && a;
+  const g = bind(o, 0);
+  const b = [ "display", "direction", "flexDirection", "writingMode" ];
+  const w = {
+    i: equalWH,
     o: {
       w: 0,
       h: 0
     }
   };
-  const p = {
-    u: equalXY,
-    o: {
-      x: z,
-      y: z
-    }
+  const y = {
+    i: equalXY,
+    o: {}
+  };
+  const setMeasuringMode = t => {
+    f(K, !h && t);
   };
   const getOverflowAmount = (t, o) => {
     const s = n.devicePixelRatio % 1 !== 0 ? 1 : 0;
     const e = {
-      w: v(t.w - o.w),
-      h: v(t.h - o.h)
+      w: g(t.w - o.w),
+      h: g(t.h - o.h)
     };
     return {
       w: e.w > s ? e.w : 0,
       h: e.h > s ? e.h : 0
     };
   };
-  const [g, b] = createCache(h, bind(fractionalSize, l));
-  const [w, S] = createCache(h, bind(M, l));
-  const [y, m] = createCache(h);
-  const [O, $] = createCache(h);
-  const [H] = createCache(p);
-  const I = getStaticPluginModuleInstance(At);
-  return ({Et: n, Gt: u, un: h, Tt: p}, {_n: z}) => {
-    const {ht: E, Ht: A, Ct: T, zt: D} = u || {};
-    const k = I && I.M(t, s, h, e, n);
-    const {q: M, W: V, X: L} = k || {};
-    const [P, U] = getShowNativeOverlaidScrollbars(n, e);
-    const [B, N] = n("overflow");
-    const X = E || z || A || T || D || U;
-    const Y = overflowIsVisible(B.x);
-    const J = overflowIsVisible(B.y);
-    const Z = Y || J;
-    let ot = b(p);
-    let st = S(p);
-    let et = m(p);
-    let ct = $(p);
-    let rt;
-    if (U && _) {
-      a(G, !P);
-    }
-    if (X) {
-      if (Z) {
-        a(Q, false);
+  const [m, S] = createCache(w, bind(getFractionalSize, l));
+  const [O, $] = createCache(w, bind(R, l));
+  const [C, x] = createCache(w);
+  const [H] = createCache(y);
+  const [E, T] = createCache(w);
+  const [D] = createCache(y);
+  const [k] = createCache({
+    i: (t, n) => equal(t, n, b),
+    o: {}
+  }, (() => hasDimensions(l) ? getStyles(l, b) : {}));
+  const [V, L] = createCache({
+    i: (t, n) => equalXY(t.T, n.T) && equalXY(t.D, n.D),
+    o: getZeroScrollCoordinates()
+  }, (() => {
+    setMeasuringMode(true);
+    const t = getElementScroll(_);
+    const n = f(Z, true);
+    const o = addEventListener(u, A, (n => {
+      const o = getElementScroll(_);
+      if (n.isTrusted && o.x === t.x && o.y === t.y) {
+        stopPropagation(n);
       }
-      const [t, n] = V ? V(rt) : [];
-      const [s, e] = ot = g(p);
-      const [c, r] = st = w(p);
-      const i = R(l);
-      const u = c;
-      const _ = i;
-      t && t();
-      if ((r || e || U) && n && !P && M && M(n, c, s)) ;
-      const h = windowSize(f);
-      const b = {
-        w: v(o(c.w, u.w) + s.w),
-        h: v(o(c.h, u.h) + s.h)
+    }), {
+      I: true,
+      A: true
+    });
+    scrollElementTo(_, {
+      x: 0,
+      y: 0
+    });
+    n();
+    const s = getElementScroll(_);
+    const e = R(_);
+    scrollElementTo(_, {
+      x: e.w,
+      y: e.h
+    });
+    const c = getElementScroll(_);
+    scrollElementTo(_, {
+      x: c.x - s.x < 1 && -e.w,
+      y: c.y - s.y < 1 && -e.h
+    });
+    const r = getElementScroll(_);
+    scrollElementTo(_, t);
+    i((() => o()));
+    return {
+      T: s,
+      D: r
+    };
+  }));
+  const P = getStaticPluginModuleInstance(Tt);
+  const createViewportOverflowStyleClassName = (t, n) => {
+    const o = n ? Y : W;
+    return `${o}${capitalizeFirstLetter(t)}`;
+  };
+  const setViewportOverflowStyle = t => {
+    const createAllOverflowStyleClassNames = t => [ z, I, A ].map((n => createViewportOverflowStyleClassName(n, t)));
+    const n = createAllOverflowStyleClassNames(true).concat(createAllOverflowStyleClassNames()).join(" ");
+    f(n);
+    f(keys(t).map((n => createViewportOverflowStyleClassName(t[n], n === "x"))).join(" "), true);
+  };
+  return ({It: n, Gt: o, an: i, Tt: a}, {_n: u}) => {
+    const {ft: _, Ht: d, Ct: b, dt: w, zt: y} = o || {};
+    const z = P && P.tt(t, s, i, e, n);
+    const {it: I, ut: A, _t: R} = z || {};
+    const [U, N] = getShowNativeOverlaidScrollbars(n, e);
+    const [B, j] = n("overflow");
+    const X = overflowIsVisible(B.x);
+    const Y = overflowIsVisible(B.y);
+    const W = _ || u || d || b || y || N;
+    let J = S(a);
+    let K = $(a);
+    let Q = x(a);
+    let Z = T(a);
+    if (N && v) {
+      f(G, !U);
+    }
+    if (W) {
+      if (hasAttrClass(c, F, q)) {
+        setMeasuringMode(true);
+      }
+      const [t] = A ? A() : [];
+      const [n] = J = m(a);
+      const [o] = K = O(a);
+      const s = M(l);
+      const e = h && getWindowSize(p());
+      const r = {
+        w: g(o.w + n.w),
+        h: g(o.h + n.h)
       };
-      const S = {
-        w: v((d ? h.w : _.w + v(i.w - c.w)) + s.w),
-        h: v((d ? h.h : _.h + v(i.h - c.h)) + s.h)
+      const i = {
+        w: g((e ? e.w : s.w + g(s.w - o.w)) + n.w),
+        h: g((e ? e.h : s.h + g(s.h - o.h)) + n.h)
       };
-      ct = O(S);
-      et = y(getOverflowAmount(b, S), p);
-    }
-    const [lt, it] = ct;
-    const [at, ut] = et;
-    const [ft, _t] = st;
-    const [dt, vt] = ot;
-    const ht = {
-      x: at.w > 0,
-      y: at.h > 0
-    };
-    const pt = Y && J && (ht.x || ht.y) || Y && ht.x && !ht.y || J && ht.y && !ht.x;
-    const gt = z || T || D || vt || _t || it || ut || N || U || X;
-    if (gt) {
-      const n = {};
-      const o = setViewportOverflowState(t, ht, B, n);
-      L && L(o, h, !!M && M(o, ft, dt), n);
-      if (i) {
-        setAttrs(c, F, n[C]);
-        setAttrs(c, q, n[x]);
-      } else {
-        setStyles(l, n);
+      t && t();
+      Z = E(i);
+      Q = C(getOverflowAmount(r, i), a);
+    }
+    const [nt, ot] = Z;
+    const [st, et] = Q;
+    const [ct, rt] = K;
+    const [lt, it] = J;
+    const [at, ut] = H({
+      x: st.w > 0,
+      y: st.h > 0
+    });
+    const _t = X && Y && (at.x || at.y) || X && at.x && !at.y || Y && at.y && !at.x;
+    const dt = u || b || y || it || rt || ot || et || j || N || W;
+    const ft = createViewportOverflowState(at, B);
+    const [pt, vt] = D(ft.G);
+    const [, ht] = k(a);
+    const gt = b || w || ht || ut || a;
+    const [bt, wt] = gt ? V(a) : L();
+    if (dt) {
+      vt && setViewportOverflowStyle(ft.G);
+      if (R && I) {
+        setStyles(l, R(ft, i, I(ft, ct, lt)));
       }
     }
-    addRemoveAttrClass(c, j, W, pt);
-    addRemoveAttrClass(r, tt, nt, pt);
-    if (!i) {
-      addRemoveAttrClass(l, K, Q, Z);
-    }
-    const [bt, wt] = H(getViewportOverflowState(t).k);
+    setMeasuringMode(false);
+    addRemoveAttrClass(c, F, q, _t);
+    addRemoveAttrClass(r, tt, q, _t);
     assignDeep(s, {
-      k: bt,
-      Pt: {
-        x: lt.w,
-        y: lt.h
+      G: pt,
+      Vt: {
+        x: nt.w,
+        y: nt.h
       },
-      Lt: {
-        x: at.w,
-        y: at.h
+      Rt: {
+        x: st.w,
+        y: st.h
       },
-      en: ht
+      en: at,
+      Pt: sanitizeScrollCoordinates(bt, st)
     });
     return {
-      sn: wt,
-      tn: it,
-      nn: ut
+      nn: vt,
+      Zt: ot,
+      tn: et,
+      sn: wt || et,
+      dn: gt
     };
   };
 };
@@ -2297,110 +2356,112 @@ const createStructureSetup = t => {
       b: 0,
       l: 0
     },
-    fn: false,
-    j: {
+    un: false,
+    rt: {
       [O]: 0,
       [$]: 0,
-      [m]: 0,
+      [S]: 0,
       [b]: 0,
       [w]: 0,
-      [y]: 0,
-      [S]: 0
+      [m]: 0,
+      [y]: 0
     },
-    Pt: {
+    Vt: {
       x: 0,
       y: 0
     },
-    Lt: {
+    Rt: {
       x: 0,
       y: 0
     },
-    k: {
-      x: z,
-      y: z
+    G: {
+      x: I,
+      y: I
     },
     en: {
       x: false,
       y: false
-    }
+    },
+    Pt: getZeroScrollCoordinates()
   };
-  const {gt: c, D: r, V: l} = n;
-  const {L: i, T: a} = getEnvironment();
+  const {vt: c, gt: r, nt: l} = n;
+  const {R: i, M: a} = getEnvironment();
   const u = !i && (a.x || a.y);
-  const f = [ createTrinsicUpdateSegment(n), createPaddingUpdateSegment(n, e), createOverflowUpdateSegment(n, e) ];
+  const _ = [ createTrinsicUpdateSegment(n), createPaddingUpdateSegment(n, e), createOverflowUpdateSegment(n, e) ];
   return [ o, t => {
     const n = {};
     const o = u;
-    const s = o && getElmentScroll(r);
-    const e = l ? addAttrClass(r, j, Y) : noop;
-    each(f, (o => {
+    const s = o && getElementScroll(r);
+    each(_, (o => {
       assignDeep(n, o(t, n) || {});
     }));
-    e();
     scrollElementTo(r, s);
     !l && scrollElementTo(c, 0);
     return n;
   }, e, n, s ];
 };
 
-const createSetups = (t, n, o, s) => {
-  const e = createOptionCheck(n, {});
-  const [c, r, l, i, a] = createStructureSetup(t);
-  const [u, f, _] = createObserversSetup(i, l, e, (t => {
+const createSetups = (t, n, o, s, e) => {
+  const c = createOptionCheck(n, {});
+  const [r, l, i, a, u] = createStructureSetup(t);
+  const [_, d, f] = createObserversSetup(a, i, c, (t => {
     update({}, t);
   }));
-  const [d, v, , h] = createScrollbarsSetup(t, n, _, l, i, s);
+  const [p, v, , h] = createScrollbarsSetup(t, n, f, i, a, e);
   const updateHintsAreTruthy = t => keys(t).some((n => !!t[n]));
-  const update = (t, s) => {
-    const {dn: e, Tt: c, At: l, vn: i} = t;
-    const a = e || {};
-    const u = !!c;
-    const d = {
-      Et: createOptionCheck(n, a, u),
-      dn: a,
-      Tt: u
+  const update = (t, e) => {
+    if (o()) {
+      return false;
+    }
+    const {fn: c, Tt: r, At: i, pn: a} = t;
+    const u = c || {};
+    const _ = !!r;
+    const p = {
+      It: createOptionCheck(n, u, _),
+      fn: u,
+      Tt: _
     };
-    if (i) {
-      v(d);
+    if (a) {
+      v(p);
       return false;
     }
-    const h = s || f(assignDeep({}, d, {
-      At: l
+    const h = e || d(assignDeep({}, p, {
+      At: i
     }));
-    const p = r(assignDeep({}, d, {
-      un: _,
+    const g = l(assignDeep({}, p, {
+      an: f,
       Gt: h
     }));
-    v(assignDeep({}, d, {
+    v(assignDeep({}, p, {
       Gt: h,
-      Qt: p
+      Qt: g
     }));
-    const g = updateHintsAreTruthy(h);
-    const b = updateHintsAreTruthy(p);
-    const w = g || b || !isEmptyObject(a) || u;
-    w && o(t, {
+    const b = updateHintsAreTruthy(h);
+    const w = updateHintsAreTruthy(g);
+    const y = b || w || !isEmptyObject(u) || _;
+    y && s(t, {
       Gt: h,
-      Qt: p
+      Qt: g
     });
-    return w;
+    return y;
   };
   return [ () => {
-    const {rn: t, D: n} = i;
-    const o = getElmentScroll(t);
-    const s = [ u(), c(), d() ];
+    const {rn: t, gt: n} = a;
+    const o = getElementScroll(t);
+    const s = [ _(), r(), p() ];
     scrollElementTo(n, o);
     return bind(runEachAndClear, s);
   }, update, () => ({
-    hn: _,
-    pn: l
+    vn: f,
+    hn: i
   }), {
-    gn: i,
+    gn: a,
     bn: h
-  }, a ];
+  }, u ];
 };
 
 const OverlayScrollbars = (t, n, o) => {
-  const {nt: s} = getEnvironment();
+  const {N: s} = getEnvironment();
   const e = isHTMLElement(t);
   const c = e ? t : t.target;
   const r = getInstance(c);
@@ -2409,28 +2470,29 @@ const OverlayScrollbars = (t, n, o) => {
     const l = [];
     const i = {};
     const validateOptions = t => {
-      const n = removeUndefinedProperties(t, true);
-      const o = getStaticPluginModuleInstance(It);
+      const n = removeUndefinedProperties(t);
+      const o = getStaticPluginModuleInstance(zt);
       return o ? o(n, true) : n;
     };
     const a = assignDeep({}, s(), validateOptions(n));
-    const [u, f, _] = createEventListenerHub();
-    const [d, v, h] = createEventListenerHub(o);
+    const [u, _, d] = createEventListenerHub();
+    const [f, p, v] = createEventListenerHub(o);
     const triggerEvent = (t, n) => {
-      h(t, n);
-      _(t, n);
+      v(t, n);
+      d(t, n);
     };
-    const [p, g, b, w, S] = createSetups(t, a, (({dn: t, Tt: n}, {Gt: o, Qt: s}) => {
-      const {ht: e, Ct: c, xt: r, Ht: l, It: i, dt: a} = o;
-      const {tn: u, nn: f, sn: _} = s;
-      triggerEvent("updated", [ y, {
+    const [h, g, b, w, y] = createSetups(t, a, (() => r), (({fn: t, Tt: n}, {Gt: o, Qt: s}) => {
+      const {ft: e, Ct: c, xt: r, Ht: l, Et: i, dt: a} = o;
+      const {Zt: u, tn: _, nn: d, sn: f} = s;
+      triggerEvent("updated", [ m, {
         updateHints: {
           sizeChanged: !!e,
           directionChanged: !!c,
           heightIntrinsicChanged: !!r,
           overflowEdgeChanged: !!u,
-          overflowAmountChanged: !!f,
-          overflowStyleChanged: !!_,
+          overflowAmountChanged: !!_,
+          overflowStyleChanged: !!d,
+          scrollCoordinatesChanged: !!f,
           contentMutation: !!l,
           hostMutation: !!i,
           appear: !!a
@@ -2438,16 +2500,16 @@ const OverlayScrollbars = (t, n, o) => {
         changedOptions: t || {},
         force: !!n
       } ]);
-    }), (t => triggerEvent("scroll", [ y, t ])));
+    }), (t => triggerEvent("scroll", [ m, t ])));
     const destroy = t => {
       removeInstance(c);
       runEachAndClear(l);
       r = true;
-      triggerEvent("destroyed", [ y, t ]);
-      f();
-      v();
+      triggerEvent("destroyed", [ m, t ]);
+      _();
+      p();
     };
-    const y = {
+    const m = {
       options(t, n) {
         if (t) {
           const o = n ? s() : {};
@@ -2455,25 +2517,29 @@ const OverlayScrollbars = (t, n, o) => {
           if (!isEmptyObject(e)) {
             assignDeep(a, e);
             g({
-              dn: e
+              fn: e
             });
           }
         }
         return assignDeep({}, a);
       },
-      on: d,
+      on: f,
       off: (t, n) => {
-        t && n && v(t, n);
+        t && n && p(t, n);
       },
       state() {
-        const {hn: t, pn: n} = b();
-        const {N: o} = t;
-        const {Pt: s, Lt: e, k: c, en: l, cn: i, fn: a} = n;
+        const {vn: t, hn: n} = b();
+        const {ct: o} = t;
+        const {Vt: s, Rt: e, G: c, en: l, cn: i, un: a, Pt: u} = n;
         return assignDeep({}, {
           overflowEdge: s,
           overflowAmount: e,
           overflowStyle: c,
           hasOverflow: l,
+          scrollCoordinates: {
+            start: u.T,
+            end: u.D
+          },
           padding: i,
           paddingAbsolute: a,
           directionRTL: o,
@@ -2481,10 +2547,10 @@ const OverlayScrollbars = (t, n, o) => {
         });
       },
       elements() {
-        const {gt: t, bt: n, cn: o, D: s, wt: e, kt: c, Zt: r} = w.gn;
-        const {qt: l, Jt: i} = w.bn;
+        const {vt: t, ht: n, cn: o, ot: s, bt: e, gt: c, Kt: r} = w.gn;
+        const {Ft: l, Wt: i} = w.bn;
         const translateScrollbarStructure = t => {
-          const {Vt: n, Mt: o, Ut: s} = t;
+          const {Mt: n, kt: o, Lt: s} = t;
           return {
             scrollbar: s,
             track: o,
@@ -2492,13 +2558,13 @@ const OverlayScrollbars = (t, n, o) => {
           };
         };
         const translateScrollbarsSetupElement = t => {
-          const {Wt: n, Xt: o} = t;
+          const {jt: n, Xt: o} = t;
           const s = translateScrollbarStructure(n[0]);
           return assignDeep({}, s, {
             clone: () => {
               const t = translateScrollbarStructure(o());
               g({
-                vn: true
+                pn: true
               });
               return t;
             }
@@ -2523,17 +2589,17 @@ const OverlayScrollbars = (t, n, o) => {
       destroy: bind(destroy, false),
       plugin: t => i[keys(t)[0]]
     };
-    push(l, [ S ]);
-    addInstance(c, y);
-    registerPluginModuleInstances(xt, OverlayScrollbars, [ y, u, i ]);
-    if (cancelInitialization(w.gn.Rt, !e && t.cancel)) {
+    push(l, [ y ]);
+    addInstance(c, m);
+    registerPluginModuleInstances(Ht, OverlayScrollbars, [ m, u, i ]);
+    if (cancelInitialization(w.gn.yt, !e && t.cancel)) {
       destroy(true);
-      return y;
+      return m;
     }
-    push(l, p());
-    triggerEvent("initialized", [ y ]);
-    y.update(true);
-    return y;
+    push(l, h());
+    triggerEvent("initialized", [ m ]);
+    m.update(true);
+    return m;
   }
   return r;
 };
@@ -2553,29 +2619,26 @@ OverlayScrollbars.valid = t => {
 };
 
 OverlayScrollbars.env = () => {
-  const {P: t, T: n, L: o, K: s, J: e, st: c, et: r, G: l, tt: i, nt: a, ot: u} = getEnvironment();
+  const {k: t, M: n, R: o, V: s, B: e, F: c, P: r, U: l, N: i, q: a} = getEnvironment();
   return assignDeep({}, {
     scrollbarsSize: t,
     scrollbarsOverlaid: n,
     scrollbarsHiding: o,
-    rtlScrollBehavior: s,
-    scrollTimeline: e,
-    staticDefaultInitialization: c,
-    staticDefaultOptions: r,
-    getDefaultInitialization: l,
-    setDefaultInitialization: i,
-    getDefaultOptions: a,
-    setDefaultOptions: u
+    scrollTimeline: s,
+    staticDefaultInitialization: e,
+    staticDefaultOptions: c,
+    getDefaultInitialization: r,
+    setDefaultInitialization: l,
+    getDefaultOptions: i,
+    setDefaultOptions: a
   });
 };
 
 const getEl = async (el, options) => {
   let res = el;
   if (options.target) {
-    if (typeof options.target === "string")
-      res = options.target;
-    if (typeof options.target === "function")
-      res = await options.target(el);
+    if (typeof options.target === "string") res = options.target;
+    if (typeof options.target === "function") res = await options.target(el);
   }
   return res;
 };
@@ -2588,8 +2651,7 @@ const getVisible = (el, options) => {
       visible = options.visible;
     }
   }
-  if (visible === false)
-    return { x: "hidden", y: "hidden" };
+  if (visible === false) return { x: "hidden", y: "hidden" };
   let x = true;
   let y = true;
   if (options.x !== void 0) {
@@ -2612,8 +2674,7 @@ const scrollbar = {
   mounted: async (el, binding, vnode) => {
     const options = (vnode ? binding.value : binding) || {};
     const overlayEl = await getEl(el, options);
-    if (!overlayEl)
-      return;
+    if (!overlayEl) return;
     const overflow = getVisible(overlayEl, options);
     const defaultClassName = "os-theme-dark das-scrollbar";
     const theme = options?.className ? `${defaultClassName} ${options?.className}` : defaultClassName;
@@ -2625,6 +2686,12 @@ const scrollbar = {
         theme
       },
       overflow
+    }, {
+      scroll: (instance2, event) => {
+        if (options && options.scroll && typeof options.scroll === "function") {
+          options.scroll(instance2, event);
+        }
+      }
     });
     if (options && options.scrollReady) {
       options.scrollReady(instance);
@@ -2632,4 +2699,998 @@ const scrollbar = {
   }
 };
 
-export { scrollbar as vScrollbar };
+var _a;
+const isClient = typeof window !== "undefined";
+const isString$1 = (val) => typeof val === "string";
+const noop = () => {
+};
+isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+
+function resolveUnref(r) {
+  return typeof r === "function" ? r() : unref(r);
+}
+function identity(arg) {
+  return arg;
+}
+
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+
+function tryOnMounted(fn, sync = true) {
+  if (getCurrentInstance())
+    onMounted(fn);
+  else if (sync)
+    fn();
+  else
+    nextTick(fn);
+}
+
+function unrefElement(elRef) {
+  var _a;
+  const plain = resolveUnref(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+
+const defaultWindow = isClient ? window : void 0;
+
+function useEventListener(...args) {
+  let target;
+  let events;
+  let listeners;
+  let options;
+  if (isString$1(args[0]) || Array.isArray(args[0])) {
+    [events, listeners, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, events, listeners, options] = args;
+  }
+  if (!target)
+    return noop;
+  if (!Array.isArray(events))
+    events = [events];
+  if (!Array.isArray(listeners))
+    listeners = [listeners];
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, options2) => {
+    el.addEventListener(event, listener, options2);
+    return () => el.removeEventListener(event, listener, options2);
+  };
+  const stopWatch = watch(() => [unrefElement(target), resolveUnref(options)], ([el, options2]) => {
+    cleanup();
+    if (!el)
+      return;
+    cleanups.push(...events.flatMap((event) => {
+      return listeners.map((listener) => register(el, event, listener, options2));
+    }));
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+
+function useSupported(callback, sync = false) {
+  const isSupported = ref();
+  const update = () => isSupported.value = Boolean(callback());
+  update();
+  tryOnMounted(update, sync);
+  return isSupported;
+}
+
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+const globalKey = "__vueuse_ssr_handlers__";
+_global[globalKey] = _global[globalKey] || {};
+
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __objRest$2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function useResizeObserver(target, callback, options = {}) {
+  const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$2(_a, ["window"]);
+  let observer;
+  const isSupported = useSupported(() => window && "ResizeObserver" in window);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (isSupported.value && window && el) {
+      observer = new ResizeObserver(callback);
+      observer.observe(el, observerOptions);
+    }
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+
+var SwipeDirection;
+(function(SwipeDirection2) {
+  SwipeDirection2["UP"] = "UP";
+  SwipeDirection2["RIGHT"] = "RIGHT";
+  SwipeDirection2["DOWN"] = "DOWN";
+  SwipeDirection2["LEFT"] = "LEFT";
+  SwipeDirection2["NONE"] = "NONE";
+})(SwipeDirection || (SwipeDirection = {}));
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const _TransitionPresets = {
+  easeInSine: [0.12, 0, 0.39, 0],
+  easeOutSine: [0.61, 1, 0.88, 1],
+  easeInOutSine: [0.37, 0, 0.63, 1],
+  easeInQuad: [0.11, 0, 0.5, 0],
+  easeOutQuad: [0.5, 1, 0.89, 1],
+  easeInOutQuad: [0.45, 0, 0.55, 1],
+  easeInCubic: [0.32, 0, 0.67, 0],
+  easeOutCubic: [0.33, 1, 0.68, 1],
+  easeInOutCubic: [0.65, 0, 0.35, 1],
+  easeInQuart: [0.5, 0, 0.75, 0],
+  easeOutQuart: [0.25, 1, 0.5, 1],
+  easeInOutQuart: [0.76, 0, 0.24, 1],
+  easeInQuint: [0.64, 0, 0.78, 0],
+  easeOutQuint: [0.22, 1, 0.36, 1],
+  easeInOutQuint: [0.83, 0, 0.17, 1],
+  easeInExpo: [0.7, 0, 0.84, 0],
+  easeOutExpo: [0.16, 1, 0.3, 1],
+  easeInOutExpo: [0.87, 0, 0.13, 1],
+  easeInCirc: [0.55, 0, 1, 0.45],
+  easeOutCirc: [0, 0.55, 0.45, 1],
+  easeInOutCirc: [0.85, 0, 0.15, 1],
+  easeInBack: [0.36, 0, 0.66, -0.56],
+  easeOutBack: [0.34, 1.56, 0.64, 1],
+  easeInOutBack: [0.68, -0.6, 0.32, 1.6]
+};
+__spreadValues({
+  linear: identity
+}, _TransitionPresets);
+
+/**
+* @vue/shared v3.4.27
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+
+
+
+!!(process.env.NODE_ENV !== "production") ? Object.freeze({}) : {};
+!!(process.env.NODE_ENV !== "production") ? Object.freeze([]) : [];
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+const hasOwn = (val, key) => hasOwnProperty.call(val, key);
+const isString = (val) => typeof val === "string";
+const isObject = (val) => val !== null && typeof val === "object";
+
+/**
+ * The inverse of `_.toPairs`; this method returns an object composed
+ * from key-value `pairs`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Array
+ * @param {Array} pairs The key-value pairs.
+ * @returns {Object} Returns the new object.
+ * @example
+ *
+ * _.fromPairs([['a', 1], ['b', 2]]);
+ * // => { 'a': 1, 'b': 2 }
+ */
+function fromPairs(pairs) {
+  var index = -1,
+      length = pairs == null ? 0 : pairs.length,
+      result = {};
+
+  while (++index < length) {
+    var pair = pairs[index];
+    result[pair[0]] = pair[1];
+  }
+  return result;
+}
+
+const isNumber = (val) => typeof val === "number";
+const isStringNumber = (val) => {
+  if (!isString(val)) {
+    return false;
+  }
+  return !Number.isNaN(Number(val));
+};
+
+class ElementPlusError extends Error {
+  constructor(m) {
+    super(m);
+    this.name = "ElementPlusError";
+  }
+}
+function throwError(scope, m) {
+  throw new ElementPlusError(`[${scope}] ${m}`);
+}
+function debugWarn(scope, message) {
+  if (process.env.NODE_ENV !== "production") {
+    const error = isString(scope) ? new ElementPlusError(`[${scope}] ${message}`) : scope;
+    console.warn(error);
+  }
+}
+
+const SCOPE = "utils/dom/style";
+function addUnit(value, defaultUnit = "px") {
+  if (!value)
+    return "";
+  if (isNumber(value) || isStringNumber(value)) {
+    return `${value}${defaultUnit}`;
+  } else if (isString(value)) {
+    return value;
+  }
+  debugWarn(SCOPE, "binding value must be a string or number");
+}
+
+const epPropKey = "__epPropKey";
+const definePropType = (val) => val;
+const isEpProp = (val) => isObject(val) && !!val[epPropKey];
+const buildProp = (prop, key) => {
+  if (!isObject(prop) || isEpProp(prop))
+    return prop;
+  const { values, required, default: defaultValue, type, validator } = prop;
+  const _validator = values || validator ? (val) => {
+    let valid = false;
+    let allowedValues = [];
+    if (values) {
+      allowedValues = Array.from(values);
+      if (hasOwn(prop, "default")) {
+        allowedValues.push(defaultValue);
+      }
+      valid || (valid = allowedValues.includes(val));
+    }
+    if (validator)
+      valid || (valid = validator(val));
+    if (!valid && allowedValues.length > 0) {
+      const allowValuesText = [...new Set(allowedValues)].map((value) => JSON.stringify(value)).join(", ");
+      warn(`Invalid prop: validation failed${key ? ` for prop "${key}"` : ""}. Expected one of [${allowValuesText}], got value ${JSON.stringify(val)}.`);
+    }
+    return valid;
+  } : void 0;
+  const epProp = {
+    type,
+    required: !!required,
+    validator: _validator,
+    [epPropKey]: true
+  };
+  if (hasOwn(prop, "default"))
+    epProp.default = defaultValue;
+  return epProp;
+};
+const buildProps = (props) => fromPairs(Object.entries(props).map(([key, option]) => [
+  key,
+  buildProp(option, key)
+]));
+
+const withInstall = (main, extra) => {
+  main.install = (app) => {
+    for (const comp of [main, ...Object.values({})]) {
+      app.component(comp.name, comp);
+    }
+  };
+  return main;
+};
+
+const defaultNamespace = "el";
+const statePrefix = "is-";
+const _bem = (namespace, block, blockSuffix, element, modifier) => {
+  let cls = `${namespace}-${block}`;
+  if (blockSuffix) {
+    cls += `-${blockSuffix}`;
+  }
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+};
+const namespaceContextKey = Symbol("namespaceContextKey");
+const useGetDerivedNamespace = (namespaceOverrides) => {
+  const derivedNamespace = (getCurrentInstance$1() ? inject(namespaceContextKey, ref$1(defaultNamespace)) : ref$1(defaultNamespace));
+  const namespace = computed(() => {
+    return unref$1(derivedNamespace) || defaultNamespace;
+  });
+  return namespace;
+};
+const useNamespace = (block, namespaceOverrides) => {
+  const namespace = useGetDerivedNamespace();
+  const b = (blockSuffix = "") => _bem(namespace.value, block, blockSuffix, "", "");
+  const e = (element) => element ? _bem(namespace.value, block, "", element, "") : "";
+  const m = (modifier) => modifier ? _bem(namespace.value, block, "", "", modifier) : "";
+  const be = (blockSuffix, element) => blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, "") : "";
+  const em = (element, modifier) => element && modifier ? _bem(namespace.value, block, "", element, modifier) : "";
+  const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, "", modifier) : "";
+  const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : "";
+  const is = (name, ...args) => {
+    const state = args.length >= 1 ? args[0] : true;
+    return name && state ? `${statePrefix}${name}` : "";
+  };
+  const cssVar = (object) => {
+    const styles = {};
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace.value}-${key}`] = object[key];
+      }
+    }
+    return styles;
+  };
+  const cssVarBlock = (object) => {
+    const styles = {};
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace.value}-${block}-${key}`] = object[key];
+      }
+    }
+    return styles;
+  };
+  const cssVarName = (name) => `--${namespace.value}-${name}`;
+  const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
+  return {
+    namespace,
+    b,
+    e,
+    m,
+    be,
+    em,
+    bm,
+    bem,
+    is,
+    cssVar,
+    cssVarName,
+    cssVarBlock,
+    cssVarBlockName
+  };
+};
+
+var _export_sfc$1 = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const GAP = 4;
+const BAR_MAP = {
+  vertical: {
+    offset: "offsetHeight",
+    scroll: "scrollTop",
+    scrollSize: "scrollHeight",
+    size: "height",
+    key: "vertical",
+    axis: "Y",
+    client: "clientY",
+    direction: "top"
+  },
+  horizontal: {
+    offset: "offsetWidth",
+    scroll: "scrollLeft",
+    scrollSize: "scrollWidth",
+    size: "width",
+    key: "horizontal",
+    axis: "X",
+    client: "clientX",
+    direction: "left"
+  }
+};
+const renderThumbStyle = ({
+  move,
+  size,
+  bar
+}) => ({
+  [bar.size]: size,
+  transform: `translate${bar.axis}(${move}%)`
+});
+
+const scrollbarContextKey = Symbol("scrollbarContextKey");
+
+const thumbProps = buildProps({
+  vertical: Boolean,
+  size: String,
+  move: Number,
+  ratio: {
+    type: Number,
+    required: true
+  },
+  always: Boolean
+});
+
+const COMPONENT_NAME$1 = "Thumb";
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "thumb",
+  props: thumbProps,
+  setup(__props) {
+    const props = __props;
+    const scrollbar = inject(scrollbarContextKey);
+    const ns = useNamespace("scrollbar");
+    if (!scrollbar)
+      throwError(COMPONENT_NAME$1, "can not inject scrollbar context");
+    const instance = ref$1();
+    const thumb = ref$1();
+    const thumbState = ref$1({});
+    const visible = ref$1(false);
+    let cursorDown = false;
+    let cursorLeave = false;
+    let originalOnSelectStart = isClient ? document.onselectstart : null;
+    const bar = computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
+    const thumbStyle = computed(() => renderThumbStyle({
+      size: props.size,
+      move: props.move,
+      bar: bar.value
+    }));
+    const offsetRatio = computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
+    const clickThumbHandler = (e) => {
+      var _a;
+      e.stopPropagation();
+      if (e.ctrlKey || [1, 2].includes(e.button))
+        return;
+      (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+      startDrag(e);
+      const el = e.currentTarget;
+      if (!el)
+        return;
+      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+    };
+    const clickTrackHandler = (e) => {
+      if (!thumb.value || !instance.value || !scrollbar.wrapElement)
+        return;
+      const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
+      const thumbHalf = thumb.value[bar.value.offset] / 2;
+      const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const startDrag = (e) => {
+      e.stopImmediatePropagation();
+      cursorDown = true;
+      document.addEventListener("mousemove", mouseMoveDocumentHandler);
+      document.addEventListener("mouseup", mouseUpDocumentHandler);
+      originalOnSelectStart = document.onselectstart;
+      document.onselectstart = () => false;
+    };
+    const mouseMoveDocumentHandler = (e) => {
+      if (!instance.value || !thumb.value)
+        return;
+      if (cursorDown === false)
+        return;
+      const prevPage = thumbState.value[bar.value.axis];
+      if (!prevPage)
+        return;
+      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const mouseUpDocumentHandler = () => {
+      cursorDown = false;
+      thumbState.value[bar.value.axis] = 0;
+      document.removeEventListener("mousemove", mouseMoveDocumentHandler);
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+      restoreOnselectstart();
+      if (cursorLeave)
+        visible.value = false;
+    };
+    const mouseMoveScrollbarHandler = () => {
+      cursorLeave = false;
+      visible.value = !!props.size;
+    };
+    const mouseLeaveScrollbarHandler = () => {
+      cursorLeave = true;
+      visible.value = cursorDown;
+    };
+    onBeforeUnmount(() => {
+      restoreOnselectstart();
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+    });
+    const restoreOnselectstart = () => {
+      if (document.onselectstart !== originalOnSelectStart)
+        document.onselectstart = originalOnSelectStart;
+    };
+    useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
+    useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        name: unref$1(ns).b("fade"),
+        persisted: ""
+      }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("div", {
+            ref_key: "instance",
+            ref: instance,
+            class: normalizeClass([unref$1(ns).e("bar"), unref$1(ns).is(unref$1(bar).key)]),
+            onMousedown: clickTrackHandler
+          }, [
+            createElementVNode("div", {
+              ref_key: "thumb",
+              ref: thumb,
+              class: normalizeClass(unref$1(ns).e("thumb")),
+              style: normalizeStyle(unref$1(thumbStyle)),
+              onMousedown: clickThumbHandler
+            }, null, 38)
+          ], 34), [
+            [vShow, _ctx.always || visible.value]
+          ])
+        ]),
+        _: 1
+      }, 8, ["name"]);
+    };
+  }
+});
+var Thumb = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/scrollbar/src/thumb.vue"]]);
+
+const barProps = buildProps({
+  always: {
+    type: Boolean,
+    default: true
+  },
+  width: String,
+  height: String,
+  ratioX: {
+    type: Number,
+    default: 1
+  },
+  ratioY: {
+    type: Number,
+    default: 1
+  }
+});
+
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "bar",
+  props: barProps,
+  setup(__props, { expose }) {
+    const props = __props;
+    const moveX = ref$1(0);
+    const moveY = ref$1(0);
+    const handleScroll = (wrap) => {
+      if (wrap) {
+        const offsetHeight = wrap.offsetHeight - GAP;
+        const offsetWidth = wrap.offsetWidth - GAP;
+        moveY.value = wrap.scrollTop * 100 / offsetHeight * props.ratioY;
+        moveX.value = wrap.scrollLeft * 100 / offsetWidth * props.ratioX;
+      }
+    };
+    expose({
+      handleScroll
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(Thumb, {
+          move: moveX.value,
+          ratio: _ctx.ratioX,
+          size: _ctx.width,
+          always: _ctx.always
+        }, null, 8, ["move", "ratio", "size", "always"]),
+        createVNode(Thumb, {
+          move: moveY.value,
+          ratio: _ctx.ratioY,
+          size: _ctx.height,
+          vertical: "",
+          always: _ctx.always
+        }, null, 8, ["move", "ratio", "size", "always"])
+      ], 64);
+    };
+  }
+});
+var Bar = /* @__PURE__ */ _export_sfc$1(_sfc_main$2, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/scrollbar/src/bar.vue"]]);
+
+const scrollbarProps = buildProps({
+  height: {
+    type: [String, Number],
+    default: ""
+  },
+  maxHeight: {
+    type: [String, Number],
+    default: ""
+  },
+  native: {
+    type: Boolean,
+    default: false
+  },
+  wrapStyle: {
+    type: definePropType([String, Object, Array]),
+    default: ""
+  },
+  wrapClass: {
+    type: [String, Array],
+    default: ""
+  },
+  viewClass: {
+    type: [String, Array],
+    default: ""
+  },
+  viewStyle: {
+    type: [String, Array, Object],
+    default: ""
+  },
+  noresize: Boolean,
+  tag: {
+    type: String,
+    default: "div"
+  },
+  always: Boolean,
+  minSize: {
+    type: Number,
+    default: 20
+  },
+  id: String,
+  role: String,
+  ariaLabel: String,
+  ariaOrientation: {
+    type: String,
+    values: ["horizontal", "vertical"]
+  }
+});
+const scrollbarEmits = {
+  scroll: ({
+    scrollTop,
+    scrollLeft
+  }) => [scrollTop, scrollLeft].every(isNumber)
+};
+
+const COMPONENT_NAME = "ElScrollbar";
+const __default__ = defineComponent({
+  name: COMPONENT_NAME
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: scrollbarProps,
+  emits: scrollbarEmits,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const ns = useNamespace("scrollbar");
+    let stopResizeObserver = void 0;
+    let stopResizeListener = void 0;
+    const scrollbarRef = ref$1();
+    const wrapRef = ref$1();
+    const resizeRef = ref$1();
+    const sizeWidth = ref$1("0");
+    const sizeHeight = ref$1("0");
+    const barRef = ref$1();
+    const ratioY = ref$1(1);
+    const ratioX = ref$1(1);
+    const wrapStyle = computed(() => {
+      const style = {};
+      if (props.height)
+        style.height = addUnit(props.height);
+      if (props.maxHeight)
+        style.maxHeight = addUnit(props.maxHeight);
+      return [props.wrapStyle, style];
+    });
+    const wrapKls = computed(() => {
+      return [
+        props.wrapClass,
+        ns.e("wrap"),
+        { [ns.em("wrap", "hidden-default")]: !props.native }
+      ];
+    });
+    const resizeKls = computed(() => {
+      return [ns.e("view"), props.viewClass];
+    });
+    const handleScroll = () => {
+      var _a;
+      if (wrapRef.value) {
+        (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
+        emit("scroll", {
+          scrollTop: wrapRef.value.scrollTop,
+          scrollLeft: wrapRef.value.scrollLeft
+        });
+      }
+    };
+    function scrollTo(arg1, arg2) {
+      if (isObject(arg1)) {
+        wrapRef.value.scrollTo(arg1);
+      } else if (isNumber(arg1) && isNumber(arg2)) {
+        wrapRef.value.scrollTo(arg1, arg2);
+      }
+    }
+    const setScrollTop = (value) => {
+      if (!isNumber(value)) {
+        debugWarn(COMPONENT_NAME, "value must be a number");
+        return;
+      }
+      wrapRef.value.scrollTop = value;
+    };
+    const setScrollLeft = (value) => {
+      if (!isNumber(value)) {
+        debugWarn(COMPONENT_NAME, "value must be a number");
+        return;
+      }
+      wrapRef.value.scrollLeft = value;
+    };
+    const update = () => {
+      if (!wrapRef.value)
+        return;
+      const offsetHeight = wrapRef.value.offsetHeight - GAP;
+      const offsetWidth = wrapRef.value.offsetWidth - GAP;
+      const originalHeight = offsetHeight ** 2 / wrapRef.value.scrollHeight;
+      const originalWidth = offsetWidth ** 2 / wrapRef.value.scrollWidth;
+      const height = Math.max(originalHeight, props.minSize);
+      const width = Math.max(originalWidth, props.minSize);
+      ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
+      ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
+      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
+      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
+    };
+    watch$1(() => props.noresize, (noresize) => {
+      if (noresize) {
+        stopResizeObserver == null ? void 0 : stopResizeObserver();
+        stopResizeListener == null ? void 0 : stopResizeListener();
+      } else {
+        ({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update));
+        stopResizeListener = useEventListener("resize", update);
+      }
+    }, { immediate: true });
+    watch$1(() => [props.maxHeight, props.height], () => {
+      if (!props.native)
+        nextTick$1(() => {
+          var _a;
+          update();
+          if (wrapRef.value) {
+            (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
+          }
+        });
+    });
+    provide(scrollbarContextKey, reactive({
+      scrollbarElement: scrollbarRef,
+      wrapElement: wrapRef
+    }));
+    onMounted$1(() => {
+      if (!props.native)
+        nextTick$1(() => {
+          update();
+        });
+    });
+    onUpdated(() => update());
+    expose({
+      wrapRef,
+      update,
+      scrollTo,
+      setScrollTop,
+      setScrollLeft,
+      handleScroll
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "scrollbarRef",
+        ref: scrollbarRef,
+        class: normalizeClass(unref$1(ns).b())
+      }, [
+        createElementVNode("div", {
+          ref_key: "wrapRef",
+          ref: wrapRef,
+          class: normalizeClass(unref$1(wrapKls)),
+          style: normalizeStyle(unref$1(wrapStyle)),
+          onScroll: handleScroll
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+            id: _ctx.id,
+            ref_key: "resizeRef",
+            ref: resizeRef,
+            class: normalizeClass(unref$1(resizeKls)),
+            style: normalizeStyle(_ctx.viewStyle),
+            role: _ctx.role,
+            "aria-label": _ctx.ariaLabel,
+            "aria-orientation": _ctx.ariaOrientation
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["id", "class", "style", "role", "aria-label", "aria-orientation"]))
+        ], 38),
+        !_ctx.native ? (openBlock(), createBlock(Bar, {
+          key: 0,
+          ref_key: "barRef",
+          ref: barRef,
+          height: sizeHeight.value,
+          width: sizeWidth.value,
+          always: _ctx.always,
+          "ratio-x": ratioX.value,
+          "ratio-y": ratioY.value
+        }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : createCommentVNode("v-if", true)
+      ], 2);
+    };
+  }
+});
+var Scrollbar$1 = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/scrollbar/src/scrollbar.vue"]]);
+
+const ElScrollbar = withInstall(Scrollbar$1);
+
+function useZoomObserver(target, scrollbarRef) {
+  if (!target || !scrollbarRef.value) return;
+  let zoomObserver = null;
+  let zoomTimer = null;
+  zoomObserver = new MutationObserver((mutations) => {
+    for (let i = 0; i < mutations.length; i++) {
+      if (mutations[i].type === "attributes" && mutations[i].attributeName === "style") {
+        if (/zoom|scale/g.test(mutations[i].target?.style?.cssText)) {
+          if (zoomTimer) clearTimeout(zoomTimer);
+          zoomTimer = setTimeout(() => {
+            scrollbarRef.value?.update();
+          }, 200);
+          break;
+        }
+      }
+    }
+  });
+  const zoomConfig = { attributes: true };
+  for (let i = 0; i < target.children[0].children.length; i++) {
+    if (zoomObserver) zoomObserver.observe(target.children[0].children[i], zoomConfig);
+  }
+  onUnmounted(() => {
+    if (zoomObserver) zoomObserver.disconnect();
+  });
+}
+let prevScrollHeight = 0;
+function useChildListObserver(target, scrollbarRef) {
+  if (!target || !scrollbarRef.value) return;
+  let observer = null;
+  let childTimer = null;
+  observer = new MutationObserver((mutations) => {
+    for (let i = 0; i < mutations.length; i++) {
+      if (mutations[i].type === "childList") {
+        if (childTimer) clearTimeout(childTimer);
+        childTimer = setTimeout(() => {
+          scrollbarRef.value?.update();
+        }, 200);
+        break;
+      } else if (mutations[i].type === "attributes" && target?.scrollHeight !== prevScrollHeight) {
+        prevScrollHeight = target?.scrollHeight;
+        if (childTimer) clearTimeout(childTimer);
+        childTimer = setTimeout(() => {
+          scrollbarRef.value?.update();
+        }, 200);
+        break;
+      }
+    }
+  });
+  const config = { childList: true, subtree: true, attributes: true };
+  if (observer) observer.observe(target, config);
+  onUnmounted(() => {
+    if (observer) observer.disconnect();
+  });
+}
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "scrollbar",
+  props: {
+    wrapClass: { type: String, required: false, default: "" },
+    viewClass: { type: String, required: false, default: "" }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const scrollbarRef = ref$1(null);
+    function getFlexStyles(element) {
+      var styles = window.getComputedStyle(element);
+      var flexStyles = {
+        display: styles.display,
+        "flex-direction": styles["flex-direction"],
+        "flex-wrap": styles["flex-wrap"],
+        "flex-flow": styles["flex-flow"],
+        "justify-content": styles["justify-content"],
+        "align-items": styles["align-items"],
+        "align-content": styles["align-content"],
+        "flex-grow": styles["flex-grow"],
+        "flex-shrink": styles["flex-shrink"],
+        "flex-basis": styles["flex-basis"],
+        flex: styles.flex,
+        order: styles.order
+      };
+      console.log(element, flexStyles.display);
+      return flexStyles.display === "flex" ? flexStyles : {};
+    }
+    const popupZIndex = ref$1(1);
+    const scrollbarStyle = computed(() => ({
+      "--das-ui-scrollbar-z-index": popupZIndex.value
+    }));
+    const scrollbarClassName = ref$1("");
+    let observer = null;
+    let zoomObserver = null;
+    onMounted$1(() => {
+      scrollbarClassName.value = `das-scrollbar-pro-${parseInt(Math.random() * 1e8)}`;
+      createStyle(scrollbarClassName.value, [
+        {
+          className: `.das-scrollbar-pro-wrap .inherit-scrollbar-parent-flex`,
+          style: getFlexStyles(scrollbarRef.value.wrapRef.parentNode.parentNode)
+        }
+      ]);
+      popupZIndex.value = useZIndex().nextZIndex();
+      const targetNode = scrollbarRef.value.wrapRef;
+      console.log("targetNode-----------", targetNode.children[0].children);
+      useChildListObserver(targetNode, scrollbarRef);
+      useZoomObserver(targetNode, scrollbarRef);
+    });
+    const __returned__ = { props, scrollbarRef, getFlexStyles, popupZIndex, scrollbarStyle, scrollbarClassName, get observer() {
+      return observer;
+    }, set observer(v) {
+      observer = v;
+    }, get zoomObserver() {
+      return zoomObserver;
+    }, set zoomObserver(v) {
+      zoomObserver = v;
+    }, get ElScrollbar() {
+      return ElScrollbar;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["ElScrollbar"], mergeProps({
+    ref: "scrollbarRef",
+    class: "das-scrollbar-pro " + $setup.scrollbarClassName
+  }, _ctx.$attrs, {
+    "wrap-class": "das-scrollbar-pro-wrap " + $props.wrapClass,
+    "view-class": "das-scrollbar-pro-view inherit-scrollbar-parent-flex" + $props.viewClass,
+    style: $setup.scrollbarStyle
+  }), {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default", {}, void 0, true)
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 16, ["class", "wrap-class", "view-class", "style"]);
+}
+var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-41d11606"], ["__file", "/Users/xiecp/das/das-fe/framework/packages/das-ui/packages/components/scrollbar/src/scrollbar.vue"]]);
+
+const DasScrollbar = withInstall$1(Scrollbar);
+
+export { DasScrollbar, scrollbar as vScrollbar };