npm - uikit - Versions diffs - 3.13.8-dev.fd15ccb29 → 3.13.10-dev.4de12886e - Mend

uikit 3.13.8-dev.fd15ccb29 → 3.13.10-dev.4de12886e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/CHANGELOG.md +33 -3
package/build/build.js +4 -1
package/dist/css/uikit-core-rtl.css +11 -2
package/dist/css/uikit-core-rtl.min.css +1 -1
package/dist/css/uikit-core.css +11 -2
package/dist/css/uikit-core.min.css +1 -1
package/dist/css/uikit-rtl.css +11 -2
package/dist/css/uikit-rtl.min.css +1 -1
package/dist/css/uikit.css +11 -2
package/dist/css/uikit.min.css +1 -1
package/dist/js/components/countdown.js +1 -1
package/dist/js/components/countdown.min.js +1 -1
package/dist/js/components/filter.js +1 -1
package/dist/js/components/filter.min.js +1 -1
package/dist/js/components/lightbox-panel.js +7 -3
package/dist/js/components/lightbox-panel.min.js +1 -1
package/dist/js/components/lightbox.js +7 -3
package/dist/js/components/lightbox.min.js +1 -1
package/dist/js/components/notification.js +1 -1
package/dist/js/components/notification.min.js +1 -1
package/dist/js/components/parallax.js +6 -2
package/dist/js/components/parallax.min.js +1 -1
package/dist/js/components/slider-parallax.js +6 -2
package/dist/js/components/slider-parallax.min.js +1 -1
package/dist/js/components/slider.js +1 -1
package/dist/js/components/slider.min.js +1 -1
package/dist/js/components/slideshow-parallax.js +6 -2
package/dist/js/components/slideshow-parallax.min.js +1 -1
package/dist/js/components/slideshow.js +1 -1
package/dist/js/components/slideshow.min.js +1 -1
package/dist/js/components/sortable.js +2 -2
package/dist/js/components/sortable.min.js +1 -1
package/dist/js/components/tooltip.js +4 -2
package/dist/js/components/tooltip.min.js +1 -1
package/dist/js/components/upload.js +1 -1
package/dist/js/components/upload.min.js +1 -1
package/dist/js/uikit-core.js +203 -134
package/dist/js/uikit-core.min.js +1 -1
package/dist/js/uikit-icons.js +1 -1
package/dist/js/uikit-icons.min.js +1 -1
package/dist/js/uikit.js +209 -136
package/dist/js/uikit.min.js +1 -1
package/package.json +1 -1
package/src/js/components/sortable.js +2 -3
package/src/js/core/drop.js +19 -12
package/src/js/core/height-match.js +1 -2
package/src/js/core/margin.js +1 -1
package/src/js/core/navbar.js +17 -7
package/src/js/core/scrollspy-nav.js +4 -9
package/src/js/core/sticky.js +26 -13
package/src/js/core/toggle.js +8 -8
package/src/js/mixin/modal.js +6 -2
package/src/js/mixin/parallax.js +5 -1
package/src/js/mixin/position.js +2 -0
package/src/js/uikit-core.js +0 -4
package/src/js/util/lang.js +0 -4
package/src/js/util/position.js +80 -24
package/src/js/util/viewport.js +42 -22
package/src/less/components/drop.less +0 -1
package/src/less/components/navbar.less +11 -0
package/src/less/components/search.less +2 -0
package/src/less/theme/search.less +6 -0
package/src/scss/components/drop.scss +0 -1
package/src/scss/components/navbar.scss +11 -0
package/src/scss/components/search.scss +2 -0
package/src/scss/mixins-theme.scss +1 -0
package/src/scss/mixins.scss +1 -0
package/src/scss/theme/search.scss +6 -0
package/tests/animation.html +216 -214
package/tests/navbar.html +37 -0
package/tests/sticky-parallax.html +16 -0
package/tests/sticky.html +212 -36
package/src/js/core/core.js +0 -25

package/dist/js/uikit.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! UIkit 3.13.8-dev.fd15ccb29 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.13.10-dev.4de12886e | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -141,10 +141,6 @@
       return (document == null ? void 0 : document.defaultView) || window;
     }
-    function toMs(time) {
-      return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
-    }
     function isEqual(value, other) {
       return (
         value === other ||
@@ -1788,7 +1784,7 @@
       return intersectRect(
       ...scrollParents(element).
       map((parent) => {
-        const { top, left, bottom, right } = offset(getViewport$1(parent));
+        const { top, left, bottom, right } = offsetViewport(parent);
         return {
           top: top - offsetTop,
@@ -1803,7 +1799,7 @@
     function scrollTop(element, top) {
       if (isWindow(element) || isDocument(element)) {
-        element = getScrollingElement(element);
+        element = scrollingElement(element);
       } else {
         element = toNode(element);
       }
@@ -1820,12 +1816,13 @@
       return parents.reduce(
       (fn, scrollElement, i) => {
         const { scrollTop, scrollHeight, offsetHeight } = scrollElement;
-        const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
-        const { height: elHeight, top: elTop } = offset(parents[i - 1] || element);
-        let top = Math.ceil(
-        elTop - offset(getViewport$1(scrollElement)).top - offsetBy + scrollTop);
+        const viewport = offsetViewport(scrollElement);
+        const maxScroll = scrollHeight - viewport.height;
+        const { height: elHeight, top: elTop } = parents[i - 1] ?
+        offsetViewport(parents[i - 1]) :
+        offset(element);
+        let top = Math.ceil(elTop - viewport.top - offsetBy + scrollTop);
         if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
           top += offsetBy;
@@ -1883,7 +1880,7 @@
       const [scrollElement] = scrollParents(element, /auto|scroll/, true);
       const { scrollHeight, scrollTop } = scrollElement;
-      const viewportHeight = getViewportClientHeight(scrollElement);
+      const { height: viewportHeight } = offsetViewport(scrollElement);
       const maxScroll = scrollHeight - viewportHeight;
       const elementOffsetTop = offsetPosition(element)[0] - offsetPosition(scrollElement)[0];
@@ -1894,7 +1891,7 @@
     }
     function scrollParents(element, overflowRe, scrollable) {if (overflowRe === void 0) {overflowRe = /auto|scroll|hidden/;}if (scrollable === void 0) {scrollable = false;}
-      const scrollEl = getScrollingElement(element);
+      const scrollEl = scrollingElement(element);
       let ancestors = parents(element).reverse();
       ancestors = ancestors.slice(ancestors.indexOf(scrollEl) + 1);
@@ -1909,28 +1906,45 @@
       ancestors.filter(
       (parent) =>
       overflowRe.test(css(parent, 'overflow')) && (
-      !scrollable || parent.scrollHeight > getViewportClientHeight(parent)))).
+      !scrollable || parent.scrollHeight > offsetViewport(parent).height))).
       reverse();
     }
-    function getViewport$1(scrollElement) {
-      return scrollElement === getScrollingElement(scrollElement) ? window : scrollElement;
+    function offsetViewport(scrollElement) {
+      let viewportElement = getViewport$1(scrollElement);
+      // iOS 12 returns <body> as scrollingElement
+      if (viewportElement === scrollingElement(viewportElement)) {
+        viewportElement = document.documentElement;
+      }
+      let rect = offset(viewportElement);
+      for (let [prop, dir, start, end] of [
+      ['width', 'x', 'left', 'right'],
+      ['height', 'y', 'top', 'bottom']])
+      {
+        if (!isWindow(getViewport$1(viewportElement))) {
+          rect[start] += toFloat(css(viewportElement, "border" + ucfirst(start) + "Width"));
+        }
+        rect[prop] = rect[dir] = (
+        isWindow(viewportElement) ? scrollingElement(viewportElement) : viewportElement)["client" +
+        ucfirst(prop)];
+        rect[end] = rect[prop] + rect[start];
+      }
+      return rect;
     }
-    // iOS 12 returns <body> as scrollingElement
-    function getViewportClientHeight(scrollElement) {
-      return (
-      scrollElement === getScrollingElement(scrollElement) ?
-      document.documentElement :
-      scrollElement).
-      clientHeight;
+    function scrollingElement(element) {
+      const {
+        document: { scrollingElement } } =
+      toWindow(element);
+      return scrollingElement;
     }
-    function getScrollingElement(element) {
-      const { document } = toWindow(element);
-      return document.scrollingElement || document.documentElement;
+    function getViewport$1(scrollElement) {
+      return scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
     }
     const dirs = [
@@ -1984,18 +1998,21 @@
     function attachToWithFlip(element, target, options) {
       const position = attachTo(element, target, options);
       const targetDim = offset(target);
-      const viewports = scrollParents(element).map(getViewport$1);
+      const viewports = scrollParents(element, /auto|scroll/);
+      const [scrollElement] = viewports;
       let {
         flip,
         attach: { element: elAttach, target: targetAttach },
         offset: elOffset,
         boundary,
-        viewport } =
+        viewport,
+        viewportPadding } =
       options;
       viewports.push(viewport);
+      const offsetPosition = { ...position };
       for (const i in dirs) {
         const [prop, dir, start, end] = dirs[i];
@@ -2006,9 +2023,16 @@
         const willFlip =
         !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
-        viewport = getIntersectionArea(
-        ...viewports,
-        willFlip || position[prop] > offset(boundary)[prop] ? null : boundary);
+        viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
+        if (viewportPadding) {
+          viewport[start] += viewportPadding;
+          viewport[end] -= viewportPadding;
+        }
+        if (boundary && !(willFlip || position[prop] > offset(boundary)[prop])) {
+          viewport = getIntersectionArea(viewport, offset(boundary));
+        }
         const isInStartBoundary = position[start] >= viewport[start];
         const isInEndBoundary = position[end] <= viewport[end];
@@ -2041,6 +2065,41 @@
           0) -
           elOffset[i] * 2;
+          if (
+          !isInScrollArea(
+          {
+            ...position,
+            [start]: position[start] + offsetBy,
+            [end]: position[end] + offsetBy },
+          scrollElement,
+          i))
+          {
+            if (isInScrollArea(position, scrollElement, i)) {
+              continue;
+            }
+            if (options.recursion) {
+              return false;
+            }
+            const newPos = attachToWithFlip(element, target, {
+              ...options,
+              attach: {
+                element: elAttach.map(flipDir).reverse(),
+                target: targetAttach.map(flipDir).reverse() },
+              offset: elOffset.reverse(),
+              flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
+              recursion: true });
+            if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
+              return newPos;
+            }
+          }
           // Move
         } else {
           offsetBy =
@@ -2051,11 +2110,11 @@
           position[start];
         }
-        position[start] = position[dir] = position[start] + offsetBy;
-        position[end] += offsetBy;
+        offsetPosition[start] = position[dir] = position[start] + offsetBy;
+        offsetPosition[end] += offsetBy;
       }
-      return position;
+      return offsetPosition;
     }
     function moveBy(start, end, dim) {
@@ -2063,21 +2122,23 @@
     }
     function getIntersectionArea() {
-      let intersection;for (var _len = arguments.length, elements = new Array(_len), _key = 0; _key < _len; _key++) {elements[_key] = arguments[_key];}
-      for (const el of elements.filter(Boolean)) {
-        const rect = offset(el);
-        if (!intersection) {
-          intersection = rect;
-          continue;
-        }
-        for (const prop of ['left', 'top']) {
-          intersection[prop] = Math.max(rect[prop], intersection[prop]);
-        }
-        for (const prop of ['right', 'bottom']) {
-          intersection[prop] = Math.min(rect[prop], intersection[prop]);
+      let area = {};for (var _len = arguments.length, rects = new Array(_len), _key = 0; _key < _len; _key++) {rects[_key] = arguments[_key];}
+      for (const rect of rects) {
+        for (const [,, start, end] of dirs) {
+          area[start] = Math.max(area[start] || 0, rect[start]);
+          area[end] = Math.min(...[area[end], rect[end]].filter(Boolean));
         }
       }
-      return intersection;
+      return area;
+    }
+    function isInScrollArea(position, scrollElement, dir) {
+      const viewport = offsetViewport(scrollElement);
+      const [prop,, start, end] = dirs[dir];
+      viewport[start] -= scrollElement["scroll" + ucfirst(start)];
+      viewport[end] = viewport[start] + scrollElement["scroll" + ucfirst(prop)];
+      return position[start] >= viewport[start] && position[end] <= viewport[end];
     }
     function intersectLine(dimA, dimB, dir) {
@@ -2085,6 +2146,15 @@
       return dimA[end] > dimB[start] && dimB[end] > dimA[start];
     }
+    function flipDir(prop) {
+      for (const i in dirs) {
+        const index = dirs[i].indexOf(prop);
+        if (~index) {
+          return dirs[1 - i][index % 2 + 2];
+        }
+      }
+    }
     var util = /*#__PURE__*/Object.freeze({
         __proto__: null,
         ajax: ajax,
@@ -2191,7 +2261,6 @@
         toNode: toNode,
         toNodes: toNodes,
         toWindow: toWindow,
-        toMs: toMs,
         isEqual: isEqual,
         swap: swap,
         last: last,
@@ -2230,9 +2299,7 @@
         scrollIntoView: scrollIntoView,
         scrolledOver: scrolledOver,
         scrollParents: scrollParents,
-        getViewport: getViewport$1,
-        getViewportClientHeight: getViewportClientHeight,
-        getScrollingElement: getScrollingElement
+        offsetViewport: offsetViewport
     });
     function globalAPI (UIkit) {
@@ -2891,7 +2958,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.13.8-dev.fd15ccb29';
+    UIkit.version = '3.13.10-dev.4de12886e';
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -2899,30 +2966,6 @@
     componentAPI(UIkit);
     instanceAPI(UIkit);
-    function Core () {
-      if (!inBrowser) {
-        return;
-      }
-      let started = 0;
-      on(
-      document,
-      'animationstart',
-      (_ref) => {let { target } = _ref;
-        if ((css(target, 'animationName') || '').match(/^uk-.*(left|right)/)) {
-          started++;
-          css(document.documentElement, 'overflowX', 'hidden');
-          setTimeout(() => {
-            if (! --started) {
-              css(document.documentElement, 'overflowX', '');
-            }
-          }, toMs(css(target, 'animationDuration')) + 100);
-        }
-      },
-      true);
-    }
     function boot (UIkit) {
       const { connect, disconnect } = UIkit;
@@ -3500,7 +3543,8 @@
       data: {
         pos: "bottom-" + (isRtl ? 'right' : 'left'),
         flip: true,
-        offset: false },
+        offset: false,
+        viewportPadding: 10 },
       connected() {
@@ -3539,6 +3583,7 @@
             attach,
             offset: offset$1,
             boundary,
+            viewportPadding: this.viewportPadding,
             flip: this.flip });
         } } };
@@ -3757,7 +3802,7 @@
               this.hide(false);
             }
           }),
-          on(window, 'resize', () => this.$emit('resize'))])
+          on(window, 'resize', () => this.$emit())])
           {
             once(this.$el, 'hide', handler, { self: true });
           }
@@ -3797,9 +3842,7 @@
           if (this.isToggled() && !hasClass(this.$el, this.clsEnter)) {
             this.position();
           }
-        },
-        events: ['resize'] },
+        } },
       methods: {
@@ -3870,26 +3913,33 @@
         },
         position() {
-          const boundary = query(this.boundary, this.$el) || window;
           removeClass(this.$el, this.clsDrop + "-stack");
           toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
-          const boundaryOffset = offset(boundary);
-          const targetOffset = offset(this.target);
-          const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
-          const prop = this.axis === 'y' ? 'width' : 'height';
+          const boundary = query(this.boundary, this.$el);
+          const [scrollParent] = scrollParents(this.$el);
+          const scrollParentOffset = offsetViewport(scrollParent);
+          const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
-          css(this.$el, "max-" + prop, '');
+          css(this.$el, 'maxWidth', '');
+          const maxWidth = scrollParentOffset.width - (boundary ? 0 : 2 * this.viewportPadding);
           if (this.pos[1] === 'justify') {
+            const prop = this.axis === 'y' ? 'width' : 'height';
+            const targetOffset = offset(this.target);
+            const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
             css(this.$el, prop, alignTo[prop]);
-          } else if (this.$el.offsetWidth > boundaryOffset.width) {
+          } else if (this.$el.offsetWidth > maxWidth) {
             addClass(this.$el, this.clsDrop + "-stack");
           }
-          css(this.$el, "max-" + prop, boundaryOffset[prop]);
+          css(this.$el, 'maxWidth', maxWidth);
+          this.positionAt(
+          this.$el,
+          boundary && this.boundaryAlign ? boundary : this.target,
+          boundary);
-          this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
         } } };
@@ -3987,7 +4037,7 @@
       resizeTargets() {
-        return this.$el.children;
+        return [this.$el, this.$el.children];
       },
       connected() {
@@ -4288,8 +4338,7 @@
       data: {
         target: '> *',
-        row: true,
-        forceHeight: true },
+        row: true },
       computed: {
@@ -4305,7 +4354,7 @@
       resizeTargets() {
-        return this.elements;
+        return [this.$el, this.elements];
       },
       update: {
@@ -5295,7 +5344,7 @@
       return (el, show) =>
       new Promise((resolve, reject) =>
       once(el, 'show hide', () => {
-        el._reject && el._reject();
+        el._reject == null ? void 0 : el._reject();
         el._reject = reject;
         _toggle(el, show);
@@ -5320,6 +5369,10 @@
       then(() => delete el._reject);
     }
+    function toMs(time) {
+      return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
+    }
     var modal = {
       install: install$2,
@@ -5473,8 +5526,6 @@
         toggle: '> a',
         content: '> ul' } };
-    const navItem = '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle';
     var navbar = {
       mixins: [Class, Container],
@@ -5494,7 +5545,7 @@
       data: {
-        dropdown: navItem,
+        dropdown: '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
         align: isRtl ? 'right' : 'left',
         clsDrop: 'uk-navbar-dropdown',
         mode: undefined,
@@ -5507,8 +5558,6 @@
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
-        forceHeight: true,
-        selMinHeight: navItem,
         container: false },
@@ -5582,9 +5631,23 @@
           immediate: true },
-        toggles(_ref6, $el) {let { dropdown } = _ref6;
-          return $$(dropdown, $el);
-        } },
+        toggles: {
+          get(_ref6, $el) {let { dropdown } = _ref6;
+            return $$(dropdown, $el);
+          },
+          watch() {
+            const justify = hasClass(this.$el, 'uk-navbar-justify');
+            for (const container of $$(
+            '.uk-navbar-nav, .uk-navbar-left, .uk-navbar-right',
+            this.$el))
+            {
+              css(container, 'flexGrow', justify ? $$(this.dropdown, container).length : '');
+            }
+          },
+          immediate: true } },
       disconnected() {
@@ -6479,19 +6542,15 @@
           const [scrollElement] = scrollParents(targets, /auto|scroll/, true);
           const { scrollTop, scrollHeight } = scrollElement;
-          const max = scrollHeight - getViewportClientHeight(scrollElement);
+          const viewport = offsetViewport(scrollElement);
+          const max = scrollHeight - viewport.height;
           let active = false;
           if (scrollTop === max) {
             active = length - 1;
           } else {
             for (const i in targets) {
-              if (
-              offset(targets[i]).top -
-              offset(getViewport$1(scrollElement)).top -
-              this.offset >
-              0)
-              {
+              if (offset(targets[i]).top - viewport.top - this.offset > 0) {
                 break;
               }
               active = +i;
@@ -6525,8 +6584,10 @@
       props: {
         position: String,
-        top: null,
+        top: Boolean,
         bottom: Boolean,
+        start: Boolean,
+        end: Boolean,
         offset: String,
         animation: String,
         clsActive: String,
@@ -6540,8 +6601,10 @@
       data: {
         position: 'top',
-        top: 0,
+        top: false,
         bottom: false,
+        start: false,
+        end: false,
         offset: 0,
         animation: '',
         clsActive: 'uk-active',
@@ -6564,6 +6627,9 @@
       },
       connected() {
+        this.start = this.start || this.top;
+        this.end = this.end || this.bottom;
         this.placeholder =
         $('+ .uk-sticky-placeholder', this.$el) ||
         $('<div class="uk-sticky-placeholder"></div>');
@@ -6657,13 +6723,17 @@
           const overflow = Math.max(0, height$1 + offset$1 - windowHeight);
           const topOffset = offset(referenceElement).top;
-          const top = parseProp(this.top, this.$el, topOffset);
-          const bottom = parseProp(this.bottom, this.$el, topOffset + height$1, true);
-          const start = Math.max(top, topOffset) - offset$1;
-          const end = bottom ?
-          bottom - offset(this.$el).height + overflow - offset$1 :
-          getScrollingElement(this.$el).scrollHeight - windowHeight;
+          const start =
+          (this.start === false ?
+          topOffset :
+          parseProp(this.start, this.$el, topOffset)) - offset$1;
+          const end =
+          this.end === false ?
+          document.scrollingElement.scrollHeight - windowHeight :
+          parseProp(this.end, this.$el, topOffset + height$1, true) -
+          offset(this.$el).height +
+          overflow -
+          offset$1;
           return {
             start,
@@ -6709,7 +6779,9 @@
             prevDir,
             scroll,
             prevScroll,
-            offsetParentTop: offset(this.$el.offsetParent).top,
+            offsetParentTop: offset(
+            (this.isFixed ? this.placeholder : this.$el).offsetParent).
+            top,
             overflowScroll: clamp(
             overflowScroll + clamp(scroll, start, end) - clamp(prevScroll, start, end),
             0,
@@ -6864,8 +6936,8 @@
         return 0;
       }
-      if (isString(value) && value.match(/^-?\d/)) {
-        return propOffset + toPx(value);
+      if (isNumeric(value) || isString(value) && value.match(/^-?\d/)) {
+        return propOffset + toPx(value, 'height', el, true);
       } else {
         const refElement = value === true ? parent(el) : query(value, el);
         return (
@@ -7185,15 +7257,7 @@
       {
         name: 'click',
-        filter() {
-          return includes(this.mode, 'click');
-        },
         handler(e) {
-          if (this._preventClick) {
-            return this._preventClick = null;
-          }
           let link;
           if (
           closest(e.target, 'a[href="#"], a[href=""]') ||
@@ -7204,6 +7268,14 @@
             e.preventDefault();
           }
+          if (this._preventClick) {
+            return this._preventClick = null;
+          }
+          if (!includes(this.mode, 'click')) {
+            return;
+          }
           this.toggle();
         } },
@@ -7329,9 +7401,6 @@
     // register components
     each(components$1, (component, name) => UIkit.component(name, component));
-    // core functionality
-    UIkit.use(Core);
     boot(UIkit);
     const units = ['days', 'hours', 'minutes', 'seconds'];
@@ -9226,12 +9295,16 @@
     function transformFn(prop, el, stops) {
-      const unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+      let unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
       let transformFn;
       if (prop === 'x' || prop === 'y') {
         prop = "translate" + ucfirst(prop);
         transformFn = (stop) => toFloat(toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
+      } else if (prop === 'scale') {
+        unit = '';
+        transformFn = (stop) =>
+        getUnit([stop]) ? toPx(stop, 'width', el, true) / el.offsetWidth : stop;
       }
       if (stops.length === 1) {
@@ -10545,7 +10618,7 @@
         some((scrollEl) => {
           let { scrollTop: scroll, scrollHeight } = scrollEl;
-          const { top, bottom, height } = offset(getViewport$1(scrollEl));
+          const { top, bottom, height } = offsetViewport(scrollEl);
           if (top < y && top + 35 > y) {
             scroll -= dist;