uikit 3.11.1 → 3.11.2-dev.28b7953b9

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.11.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.11.2-dev.28b7953b9 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1587,7 +1587,7 @@
         height: ['top', 'bottom']
     };
 
-    function dimensions(element) {
+    function dimensions$1(element) {
 
         var rect = isElement(element)
             ? toNode(element).getBoundingClientRect()
@@ -1605,7 +1605,7 @@
 
     function offset(element, coordinates) {
 
-        var currentOffset = dimensions(element);
+        var currentOffset = dimensions$1(element);
 
         if (element) {
             var ref = toWindow(element);
@@ -1750,19 +1750,35 @@
         if ( element === void 0 ) element = window;
         if ( offsetDim === void 0 ) offsetDim = false;
 
-        return isNumeric(value)
-            ? +value
-            : endsWith(value, 'vh')
-                ? percent(height(toWindow(element)), value)
-                : endsWith(value, 'vw')
-                    ? percent(width(toWindow(element)), value)
-                    : endsWith(value, '%')
-                        ? percent(offsetDim
-                            ? element[("offset" + (ucfirst(property)))]
-                            : dimensions(element)[property], value)
-                        : toFloat(value);
+
+        if (!isString(value)) {
+            return toFloat(value);
+        }
+
+        return parseCalc(value).reduce(function (result, value) {
+            var unit = parseUnit(value);
+            if (unit) {
+                value = percent(
+                    unit === 'vh'
+                        ? height(toWindow(element))
+                        : unit === 'vw'
+                            ? width(toWindow(element))
+                            : offsetDim
+                                ? element[("offset" + (ucfirst(property)))]
+                                : dimensions$1(element)[property],
+                    value
+                );
+            }
+
+            return result + toFloat(value);
+        }, 0);
     }
 
+    var calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
+    var parseCalc = memoize(function (calc) { return calc.toString().replace(/\s/g, '').match(calcRe) || []; });
+    var unitRe = /(?:v[hw]|%)$/;
+    var parseUnit = memoize(function (str) { return (str.match(unitRe) || [])[0]; });
+
     function percent(base, value) {
         return base * toFloat(value) / 100;
     }
@@ -1800,8 +1816,6 @@
     };
 
     function flush(recursion) {
-        if ( recursion === void 0 ) recursion = 1;
-
         runTasks(fastdom.reads);
         runTasks(fastdom.writes.splice(0));
 
@@ -1823,7 +1837,7 @@
         if (recursion && recursion < RECURSION_LIMIT) {
             Promise$1.resolve().then(function () { return flush(recursion); });
         } else {
-            requestAnimationFrame(function () { return flush(); });
+            requestAnimationFrame(function () { return flush(1); });
         }
 
     }
@@ -2079,9 +2093,8 @@
 
         try {
 
-            return !options
-                ? {}
-                : startsWith(options, '{')
+            return options
+                ? startsWith(options, '{')
                     ? JSON.parse(options)
                     : args.length && !includes(options, ':')
                         ? (( obj = {}, obj[args[0]] = options, obj ))
@@ -2093,7 +2106,8 @@
                                 options[key.trim()] = value.trim();
                             }
                             return options;
-                        }, {});
+                        }, {})
+                : {};
 
         } catch (e) {
             return {};
@@ -2241,7 +2255,11 @@
             element = toNode(element);
         }
 
-        element.scrollTop = top;
+        if (isUndefined(top)) {
+            return element.scrollTop;
+        } else {
+            element.scrollTop = top;
+        }
     }
 
     function scrollIntoView(element, ref) {
@@ -2548,7 +2566,7 @@
         replaceClass: replaceClass,
         hasClass: hasClass,
         toggleClass: toggleClass,
-        dimensions: dimensions,
+        dimensions: dimensions$1,
         offset: offset,
         position: position,
         offsetPosition: offsetPosition,
@@ -2673,7 +2691,8 @@
         scrolledOver: scrolledOver,
         scrollParents: scrollParents,
         getViewport: getViewport$1,
-        getViewportClientHeight: getViewportClientHeight
+        getViewportClientHeight: getViewportClientHeight,
+        getScrollingElement: getScrollingElement
     });
 
     function globalAPI (UIkit) {
@@ -3137,11 +3156,11 @@
                 on(
                     el,
                     name,
-                    !delegate
-                        ? null
-                        : isString(delegate)
+                    delegate
+                        ? isString(delegate)
                             ? delegate
-                            : delegate.call(component),
+                            : delegate.call(component)
+                        : null,
                     isString(handler) ? component[handler] : handler.bind(component),
                     {passive: passive, capture: capture, self: self}
                 )
@@ -3177,30 +3196,26 @@
         }
 
         function normalizeData(ref, ref$1) {
-            var data = ref.data;
-            var args = ref$1.args;
+            var data = ref.data; if ( data === void 0 ) data = {};
+            var args = ref$1.args; if ( args === void 0 ) args = [];
             var props = ref$1.props; if ( props === void 0 ) props = {};
 
-            data = isArray(data)
-                ? !isEmpty(args)
-                    ? data.slice(0, args.length).reduce(function (data, value, index) {
-                        if (isPlainObject(value)) {
-                            assign(data, value);
-                        } else {
-                            data[args[index]] = value;
-                        }
-                        return data;
-                    }, {})
-                    : undefined
-                : data;
-
-            if (data) {
-                for (var key in data) {
-                    if (isUndefined(data[key])) {
-                        delete data[key];
+            if (isArray(data)) {
+                data = data.slice(0, args.length).reduce(function (data, value, index) {
+                    if (isPlainObject(value)) {
+                        assign(data, value);
                     } else {
-                        data[key] = props[key] ? coerce(props[key], data[key]) : data[key];
+                        data[args[index]] = value;
                     }
+                    return data;
+                }, {});
+            }
+
+            for (var key in data) {
+                if (isUndefined(data[key])) {
+                    delete data[key];
+                } else if (props[key]) {
+                    data[key] = coerce(props[key], data[key]);
                 }
             }
 
@@ -3382,7 +3397,7 @@
 
                 return component.options.functional
                     ? new component({data: isPlainObject(element) ? element : [].concat( argsArray )})
-                    : !element ? init(element) : $$(element).map(init)[0];
+                    : element ? $$(element).map(init)[0] : init();
 
                 function init(element) {
 
@@ -3462,7 +3477,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.11.1';
+    UIkit.version = '3.11.2-dev.28b7953b9';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3483,7 +3498,7 @@
                 return;
             }
             pendingResize = true;
-            fastdom.write(function () { return pendingResize = false; });
+            fastdom.read(function () { return pendingResize = false; });
             UIkit.update(null, 'resize');
         };
 
@@ -3502,7 +3517,7 @@
                 return;
             }
             pending = true;
-            fastdom.write(function () { return pending = false; });
+            fastdom.read(function () { return pending = false; });
 
             UIkit.update(null, e.type);
 
@@ -4588,7 +4603,7 @@
                 if (active$1) {
 
                     if (delay && active$1.isDelaying) {
-                        this.showTimer = setTimeout(this.show, 10);
+                        this.showTimer = setTimeout(function () { return matches(target, ':hover') && this$1$1.show(); }, 10);
                         return;
                     }
 
@@ -5222,7 +5237,7 @@
             css(element, 'display', 'block', 'important');
         }
 
-        var height = dimensions(element).height - boxModelAdjust(element, 'height', 'content-box');
+        var height = dimensions$1(element).height - boxModelAdjust(element, 'height', 'content-box');
 
         if (style !== false) {
             css(element, 'display', style);
@@ -5264,7 +5279,7 @@
 
                 if (this.expand) {
 
-                    minHeight = height(window) - (dimensions(document.documentElement).height - dimensions(this.$el).height) - box || '';
+                    minHeight = height(window) - (dimensions$1(document.documentElement).height - dimensions$1(this.$el).height) - box || '';
 
                 } else {
 
@@ -5281,7 +5296,7 @@
 
                     if (this.offsetBottom === true) {
 
-                        minHeight += " - " + (dimensions(this.$el.nextElementSibling).height) + "px";
+                        minHeight += " - " + (dimensions$1(this.$el.nextElementSibling).height) + "px";
 
                     } else if (isNumeric(this.offsetBottom)) {
 
@@ -5293,7 +5308,7 @@
 
                     } else if (isString(this.offsetBottom)) {
 
-                        minHeight += " - " + (dimensions(query(this.offsetBottom, this.$el)).height) + "px";
+                        minHeight += " - " + (dimensions$1(query(this.offsetBottom, this.$el)).height) + "px";
 
                     }
 
@@ -5312,7 +5327,7 @@
                 css(this.$el, {minHeight: minHeight});
 
                 if (minHeight !== prev) {
-                    this.$update(this.$el, 'resize');
+                    trigger(this.$el, 'resize');
                 }
 
                 if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
@@ -5783,16 +5798,16 @@
         return isRtl ? swap(swap(icon, 'left', 'right'), 'previous', 'next') : icon;
     }
 
+    var nativeLazyLoad = 'loading' in HTMLImageElement.prototype;
+    var nativeIsIntersecting = 'isIntersecting' in IntersectionObserverEntry.prototype; // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
+
     var img = {
 
         args: 'dataSrc',
 
         props: {
             dataSrc: String,
-            dataSrcset: Boolean,
-            sizes: String,
-            width: Number,
-            height: Number,
+            dataSources: String,
             offsetTop: String,
             offsetLeft: String,
             target: String
@@ -5800,10 +5815,7 @@
 
         data: {
             dataSrc: '',
-            dataSrcset: false,
-            sizes: false,
-            width: false,
-            height: false,
+            dataSources: [],
             offsetTop: '50vh',
             offsetLeft: '50vw',
             target: false
@@ -5811,37 +5823,6 @@
 
         computed: {
 
-            cacheKey: function(ref) {
-                var dataSrc = ref.dataSrc;
-
-                return ((this.$name) + "." + dataSrc);
-            },
-
-            width: function(ref) {
-                var width = ref.width;
-                var dataWidth = ref.dataWidth;
-
-                return width || dataWidth;
-            },
-
-            height: function(ref) {
-                var height = ref.height;
-                var dataHeight = ref.dataHeight;
-
-                return height || dataHeight;
-            },
-
-            sizes: function(ref) {
-                var sizes = ref.sizes;
-                var dataSizes = ref.dataSizes;
-
-                return sizes || dataSizes;
-            },
-
-            isImg: function(_, $el) {
-                return isImg($el);
-            },
-
             target: {
 
                 get: function(ref) {
@@ -5854,40 +5835,31 @@
                     this.observe();
                 }
 
-            },
-
-            offsetTop: function(ref) {
-                var offsetTop = ref.offsetTop;
-
-                return toPx(offsetTop, 'height');
-            },
-
-            offsetLeft: function(ref) {
-                var offsetLeft = ref.offsetLeft;
-
-                return toPx(offsetLeft, 'width');
             }
 
         },
 
         connected: function() {
 
-            if (!window.IntersectionObserver) {
-                setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
+            if (!window.IntersectionObserver || !nativeIsIntersecting) {
+                setSrcAttrs(this.$el, this.dataSrc);
                 return;
             }
 
-            if (storage[this.cacheKey]) {
-                setSrcAttrs(this.$el, storage[this.cacheKey], this.dataSrcset, this.sizes);
-            } else if (this.isImg && this.width && this.height) {
-                setSrcAttrs(this.$el, getPlaceholderImage(this.width, this.height, this.sizes));
+            if (nativeLazyLoad && isImg(this.$el)) {
+                this.$el.loading = 'lazy';
+                setSrcAttrs(this.$el);
+
+                if (this.target.length === 1) {
+                    return;
+                }
             }
 
-            this.observer = new IntersectionObserver(this.load, {
-                rootMargin: ((this.offsetTop) + "px " + (this.offsetLeft) + "px")
-            });
+            ensureSrcAttribute(this.$el);
 
-            requestAnimationFrame(this.observe);
+            var rootMargin = (toPx(this.offsetTop, 'height')) + "px " + (toPx(this.offsetLeft, 'width')) + "px";
+            this.observer = new IntersectionObserver(this.load, {rootMargin: rootMargin});
+            this.observe();
 
         },
 
@@ -5897,35 +5869,17 @@
 
         update: {
 
-            read: function(ref) {
-                var this$1$1 = this;
-                var image = ref.image;
-
-
-                if (!this.observer) {
+            write: function(store) {
+                if (!this.observer || isImg(this.$el)) {
                     return false;
                 }
-
-                if (!image && document.readyState === 'complete') {
-                    this.load(this.observer.takeRecords());
-                }
-
-                if (this.isImg) {
-                    return false;
-                }
-
-                image && image.then(function (img) { return img && img.currentSrc !== '' && setSrcAttrs(this$1$1.$el, currentSrc(img)); });
-
-            },
-
-            write: function(data) {
-
-                if (this.dataSrcset && window.devicePixelRatio !== 1) {
+                var srcset = data(this.$el, 'data-srcset');
+                if (srcset && window.devicePixelRatio !== 1) {
 
                     var bgSize = css(this.$el, 'backgroundSize');
-                    if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === data.bgSize) {
-                        data.bgSize = getSourceSize(this.dataSrcset, this.sizes);
-                        css(this.$el, 'backgroundSize', ((data.bgSize) + "px"));
+                    if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === store.bgSize) {
+                        store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
+                        css(this.$el, 'backgroundSize', ((store.bgSize) + "px"));
                     }
 
                 }
@@ -5939,21 +5893,26 @@
         methods: {
 
             load: function(entries) {
-                var this$1$1 = this;
 
-
-                // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
-                if (!entries.some(function (entry) { return isUndefined(entry.isIntersecting) || entry.isIntersecting; })) {
+                if (!entries.some(function (entry) { return entry.isIntersecting; })) {
                     return;
                 }
 
-                this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(function (img) {
+                if (this._data.image) {
+                    return this._data.image;
+                }
 
-                    setSrcAttrs(this$1$1.$el, currentSrc(img), img.srcset, img.sizes);
-                    storage[this$1$1.cacheKey] = currentSrc(img);
-                    return img;
+                var image = isImg(this.$el)
+                    ? this.$el
+                    : getImageFromElement(
+                        this.$el,
+                        this.dataSrc,
+                        this.dataSources
+                    );
 
-                }, function (e) { return trigger(this$1$1.$el, new e.constructor(e.type, e)); });
+                this._data.image = image;
+                image.loading = 'eager';
+                setSrcAttrs(this.$el, image.currentSrc);
 
                 this.observer.disconnect();
             },
@@ -5970,13 +5929,14 @@
 
     };
 
-    function setSrcAttrs(el, src, srcset, sizes) {
+    function setSrcAttrs(el, src) {
 
         if (isImg(el)) {
-            var set = function (prop, val) { return val && val !== el[prop] && (el[prop] = val); };
-            set('sizes', sizes);
-            set('srcset', srcset);
-            set('src', src);
+
+            var parentNode = parent(el);
+            var elements = isPicture(parentNode) ? children(parentNode) : [el];
+            elements.forEach(function (el) { return setSourceProps(el, el); });
+
         } else if (src) {
 
             var change = !includes(el.style.backgroundImage, src);
@@ -5989,15 +5949,66 @@
 
     }
 
-    function getPlaceholderImage(width, height, sizes) {
-        var assign;
+    var srcProps = ['data-src', 'data-srcset', 'sizes'];
+    function setSourceProps(sourceEl, targetEl) {
+        srcProps.forEach(function (prop) {
+            var value = data(sourceEl, prop);
+            if (value) {
+                attr(targetEl, prop.replace(/^(data-)+/, ''), value);
+            }
+        });
+    }
 
+    function getImageFromElement(el, src, sources) {
 
-        if (sizes) {
-            ((assign = Dimensions.ratio({width: width, height: height}, 'width', toPx(sizesToPixel(sizes))), width = assign.width, height = assign.height));
+        if (!src) {
+            return false;
         }
 
-        return ("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>");
+        var img = new Image();
+
+        wrapInPicture(img, sources);
+        setSourceProps(el, img);
+        img.onload = function () { return setSrcAttrs(el, img.currentSrc); };
+        attr(img, 'src', src);
+        return img;
+    }
+
+    function wrapInPicture(img, sources) {
+
+        sources = parseSources(sources);
+
+        if (sources.length) {
+            var picture = fragment('<picture>');
+            sources.forEach(function (attrs) {
+                var source = fragment('<source>');
+                attr(source, attrs);
+                append(picture, source);
+            });
+            append(picture, img);
+        }
+    }
+
+    function parseSources(sources) {
+        if (!sources) {
+            return [];
+        }
+
+        if (startsWith(sources, '[')) {
+            try {
+                sources = JSON.parse(sources);
+            } catch (e) {
+                sources = [];
+            }
+        } else {
+            sources = parseOptions(sources);
+        }
+
+        if (!isArray(sources)) {
+            sources = [sources];
+        }
+
+        return sources.filter(function (source) { return !isEmpty(source); });
     }
 
     var sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -6037,24 +6048,22 @@
         return descriptors.filter(function (size) { return size >= srcSize; })[0] || descriptors.pop() || '';
     }
 
-    function isImg(el) {
-        return el.tagName === 'IMG';
+    function ensureSrcAttribute(el) {
+        if (isImg(el) && !hasAttr(el, 'src')) {
+            attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
+        }
     }
 
-    function currentSrc(el) {
-        return el.currentSrc || el.src;
+    function isPicture(el) {
+        return isA(el, 'PICTURE');
     }
 
-    var key = '__test__';
-    var storage;
+    function isImg(el) {
+        return isA(el, 'IMG');
+    }
 
-    // workaround for Safari's private browsing mode and accessing sessionStorage in Blink
-    try {
-        storage = window.sessionStorage || {};
-        storage[key] = 1;
-        delete storage[key];
-    } catch (e) {
-        storage = {};
+    function isA(el, tagName) {
+        return el && el.tagName === tagName;
     }
 
     var Media = {
@@ -6720,7 +6729,7 @@
                     var current = ref.current;
 
                     var active = this.getActive();
-                    if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
+                    if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.isDelaying) {
                         active.hide(false);
                     }
                 }
@@ -6895,7 +6904,11 @@
 
                     var active = this.getActive();
 
-                    if (matches(this.dropbar, ':hover') && active && active.$el === $el) {
+                    if (matches(this.dropbar, ':hover')
+                        && active
+                        && active.$el === $el
+                        && !this.toggles.some(function (el) { return active.target !== el && matches(el, ':focus'); })
+                    ) {
                         e.preventDefault();
                     }
                 }
@@ -7325,7 +7338,7 @@
 
                 return {
                     current: toFloat(css(this.$el, 'maxHeight')),
-                    max: Math.max(this.minHeight, height(this.container) - (dimensions(this.content).height - height(this.$el)))
+                    max: Math.max(this.minHeight, height(this.container) - (dimensions$1(this.content).height - height(this.$el)))
                 };
             },
 
@@ -7687,6 +7700,7 @@
         mixins: [Class, Media],
 
         props: {
+            position: String,
             top: null,
             bottom: Boolean,
             offset: String,
@@ -7702,6 +7716,7 @@
         },
 
         data: {
+            position: 'top',
             top: 0,
             bottom: false,
             offset: 0,
@@ -7718,10 +7733,23 @@
 
         computed: {
 
-            offset: function(ref) {
+            position: function(ref, $el) {
+                var position = ref.position;
+
+                return position === 'auto'
+                    ? (this.isFixed ? this.placeholder : $el).offsetHeight > height(window)
+                        ? 'bottom'
+                        : 'top'
+                    : position;
+            },
+
+            offset: function(ref, $el) {
                 var offset = ref.offset;
 
-                return toPx(offset);
+                if (this.position === 'bottom') {
+                    offset += '+100vh-100%';
+                }
+                return toPx(offset, 'height', $el);
             },
 
             selTarget: function(ref, $el) {
@@ -7788,7 +7816,7 @@
                     var this$1$1 = this;
 
 
-                    if (!(this.targetOffset !== false && location.hash && window.pageYOffset > 0)) {
+                    if (!(this.targetOffset !== false && location.hash && scrollTop(window) > 0)) {
                         return;
                     }
 
@@ -7821,6 +7849,7 @@
 
                 read: function(ref, types) {
                     var height$1 = ref.height;
+                    var margin = ref.margin;
 
 
                     this.inactive = !this.matchMedia || !isVisible(this.$el);
@@ -7829,46 +7858,56 @@
                         return false;
                     }
 
-                    if (this.isActive && types.has('resize')) {
+                    var hide = this.isActive && types.has('resize');
+                    if (hide) {
                         this.hide();
-                        height$1 = this.$el.offsetHeight;
-                        this.show();
                     }
 
-                    height$1 = this.isActive ? height$1 : this.$el.offsetHeight;
+                    if (!this.isActive) {
+                        height$1 = this.$el.offsetHeight;
+                        margin = css(this.$el, 'margin');
+                    }
 
-                    if (height$1 + this.offset > height(window)) {
-                        this.inactive = true;
-                        return false;
+                    if (hide) {
+                        this.show();
                     }
 
+                    var overflow = Math.max(0, height$1 + this.offset - height(window));
+
                     var referenceElement = this.isFixed ? this.placeholder : this.$el;
-                    this.topOffset = offset(referenceElement).top;
-                    this.bottomOffset = this.topOffset + height$1;
-                    this.offsetParentTop = offset(referenceElement.offsetParent).top;
+                    var topOffset = offset(referenceElement).top;
+                    var offsetParentTop = offset(referenceElement.offsetParent).top;
 
-                    var bottom = parseProp('bottom', this);
+                    var top = parseProp(this.top, this.$el, topOffset);
+                    var bottom = parseProp(this.bottom, this.$el, topOffset + height$1);
 
-                    this.top = Math.max(toFloat(parseProp('top', this)), this.topOffset) - this.offset;
-                    this.bottom = bottom && bottom - this.$el.offsetHeight;
-                    this.width = dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el).width;
+                    var start = Math.max(top, topOffset) - this.offset;
+                    var end = bottom
+                        ? bottom - this.$el.offsetHeight + overflow - this.offset
+                        : getScrollingElement(this.$el).scrollHeight - height(window);
 
                     return {
+                        start: start,
+                        end: end,
+                        overflow: overflow,
+                        topOffset: topOffset,
+                        offsetParentTop: offsetParentTop,
                         height: height$1,
-                        top: offsetPosition(this.placeholder)[0],
-                        margins: css(this.$el, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])
+                        margin: margin,
+                        width: dimensions$1(isVisible(this.widthElement) ? this.widthElement : this.$el).width,
+                        top: offsetPosition(this.placeholder)[0]
                     };
                 },
 
                 write: function(ref) {
                     var height = ref.height;
-                    var margins = ref.margins;
+                    var margin = ref.margin;
 
 
                     var ref$1 = this;
                     var placeholder = ref$1.placeholder;
 
-                    css(placeholder, assign({height: height}, margins));
+                    css(placeholder, {height: height, margin: margin});
 
                     if (!within(placeholder, document)) {
                         after(this.$el, placeholder);
@@ -7886,14 +7925,29 @@
             {
 
                 read: function(ref) {
-                    var scroll = ref.scroll; if ( scroll === void 0 ) scroll = 0;
+                    var prevScroll = ref.scroll; if ( prevScroll === void 0 ) prevScroll = 0;
+                    var prevDir = ref.dir; if ( prevDir === void 0 ) prevDir = 'down';
+                    var overflow = ref.overflow;
+                    var overflowScroll = ref.overflowScroll; if ( overflowScroll === void 0 ) overflowScroll = 0;
+                    var start = ref.start;
+                    var end = ref.end;
 
 
-                    this.scroll = window.pageYOffset;
+                    var scroll = scrollTop(window);
+                    var dir = prevScroll <= scroll ? 'down' : 'up';
 
                     return {
-                        dir: scroll <= this.scroll ? 'down' : 'up',
-                        scroll: this.scroll
+                        dir: dir,
+                        prevDir: prevDir,
+                        scroll: scroll,
+                        prevScroll: prevScroll,
+                        overflowScroll: clamp(
+                            overflowScroll
+                            + clamp(scroll, start, end)
+                            - clamp(prevScroll, start, end),
+                            0,
+                            overflow
+                        )
                     };
                 },
 
@@ -7901,35 +7955,34 @@
                     var this$1$1 = this;
 
 
-                    var now = Date.now();
                     var isScrollUpdate = types.has('scroll');
                     var initTimestamp = data.initTimestamp; if ( initTimestamp === void 0 ) initTimestamp = 0;
                     var dir = data.dir;
-                    var lastDir = data.lastDir;
-                    var lastScroll = data.lastScroll;
+                    var prevDir = data.prevDir;
                     var scroll = data.scroll;
+                    var prevScroll = data.prevScroll; if ( prevScroll === void 0 ) prevScroll = 0;
                     var top = data.top;
+                    var start = data.start;
+                    var topOffset = data.topOffset;
+                    var height = data.height;
 
-                    data.lastScroll = scroll;
-
-                    if (scroll < 0 || scroll === lastScroll && isScrollUpdate || this.showOnUp && !isScrollUpdate && !this.isFixed) {
+                    if (scroll < 0 || scroll === prevScroll && isScrollUpdate || this.showOnUp && !isScrollUpdate && !this.isFixed) {
                         return;
                     }
 
-                    if (now - initTimestamp > 300 || dir !== lastDir) {
+                    var now = Date.now();
+                    if (now - initTimestamp > 300 || dir !== prevDir) {
                         data.initScroll = scroll;
                         data.initTimestamp = now;
                     }
 
-                    data.lastDir = dir;
-
-                    if (this.showOnUp && !this.isFixed && Math.abs(data.initScroll - scroll) <= 30 && Math.abs(lastScroll - scroll) <= 10) {
+                    if (this.showOnUp && !this.isFixed && Math.abs(data.initScroll - scroll) <= 30 && Math.abs(prevScroll - scroll) <= 10) {
                         return;
                     }
 
                     if (this.inactive
-                        || scroll < this.top
-                        || this.showOnUp && (scroll <= this.top || dir === 'down' && isScrollUpdate || dir === 'up' && !this.isFixed && scroll <= this.bottomOffset)
+                        || scroll < start
+                        || this.showOnUp && (scroll <= start || dir === 'down' && isScrollUpdate || dir === 'up' && !this.isFixed && scroll <= topOffset + height)
                     ) {
 
                         if (!this.isFixed) {
@@ -7944,7 +7997,7 @@
 
                         this.isFixed = false;
 
-                        if (this.animation && scroll > this.topOffset) {
+                        if (this.animation && scroll > topOffset) {
                             Animation.cancel(this.$el);
                             Animation.out(this.$el, this.animation).then(function () { return this$1$1.hide(); }, noop);
                         } else {
@@ -7994,23 +8047,37 @@
 
             update: function() {
 
-                var active = this.top !== 0 || this.scroll > this.top;
-                var top = Math.max(0, this.offset);
+                var ref = this._data;
+                var width = ref.width;
+                var scroll = ref.scroll; if ( scroll === void 0 ) scroll = 0;
+                var overflow = ref.overflow;
+                var overflowScroll = ref.overflowScroll; if ( overflowScroll === void 0 ) overflowScroll = 0;
+                var start = ref.start;
+                var end = ref.end;
+                var topOffset = ref.topOffset;
+                var height = ref.height;
+                var offsetParentTop = ref.offsetParentTop;
+                var active = start !== 0 || scroll > start;
+                var top = this.offset;
                 var position = 'fixed';
 
-                if (isNumeric(this.bottom) && this.scroll > this.bottom - this.offset) {
-                    top = this.bottom - this.offsetParentTop;
+                if (scroll > end) {
+                    top = end + this.offset - offsetParentTop;
                     position = 'absolute';
                 }
 
+                if (overflow) {
+                    top -= overflowScroll;
+                }
+
                 css(this.$el, {
                     position: position,
                     top: (top + "px"),
-                    width: this.width
+                    width: width
                 });
 
                 this.isActive = active;
-                toggleClass(this.$el, this.clsBelow, this.scroll > this.bottomOffset);
+                toggleClass(this.$el, this.clsBelow, scroll > topOffset + height);
                 addClass(this.$el, this.clsFixed);
 
             }
@@ -8019,16 +8086,10 @@
 
     };
 
-    function parseProp(prop, ref) {
-        var $props = ref.$props;
-        var $el = ref.$el;
-        var propOffset = ref[(prop + "Offset")];
-
-
-        var value = $props[prop];
+    function parseProp(value, el, propOffset) {
 
         if (!value) {
-            return;
+            return 0;
         }
 
         if (isString(value) && value.match(/^-?\d/)) {
@@ -8037,7 +8098,7 @@
 
         } else {
 
-            return offset(value === true ? parent($el) : query(value, $el)).bottom;
+            return offset(value === true ? parent(el) : query(value, el)).bottom;
 
         }
     }
@@ -10734,11 +10795,9 @@
         computed: {
 
             props: function(properties, $el) {
-                var this$1$1 = this;
-
                 return keys(props).reduce(function (result, prop) {
                     if (!isUndefined(properties[prop])) {
-                        result[prop] = props[prop].call(this$1$1, prop, $el, properties[prop].slice());
+                        result[prop] = props[prop](prop, $el, properties[prop].slice());
                     }
                     return result;
                 }, {});
@@ -10746,6 +10805,12 @@
 
         },
 
+        events: {
+            bgimageload: function() {
+                this.$emit();
+            }
+        },
+
         methods: {
 
             reset: function() {
@@ -10893,15 +10958,15 @@
         var bgPos = css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
 
         return getCssValue(el, 'backgroundSize', '') === 'cover'
-            ? backgroundCoverFn.call(this, prop, el, steps, bgPos, attr)
+            ? backgroundCoverFn(prop, el, steps, bgPos, attr)
             : setBackgroundPosFn(prop, steps, bgPos);
     }
 
     function backgroundCoverFn(prop, el, steps, bgPos, attr) {
 
-        var image = getBackgroundImage.call(this, el);
+        var dimImage = getBackgroundImageDimensions(el);
 
-        if (!image.naturalWidth) {
+        if (!dimImage.width) {
             return noop;
         }
 
@@ -10917,11 +10982,6 @@
             height: el.offsetHeight
         };
 
-        var dimImage = {
-            width: image.naturalWidth,
-            height: image.naturalHeight
-        };
-
         var baseDim = Dimensions.cover(dimImage, dimEl);
         var span = baseDim[attr] - dimEl[attr];
 
@@ -10952,26 +11012,34 @@
         };
     }
 
-    function getBackgroundImage(el) {
-        var this$1$1 = this;
-
+    var dimensions = {};
+    function getBackgroundImageDimensions(el) {
         var src = css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
 
-        var data = this._data;
-
-        if (data[src]) {
-            return data[src];
+        if (dimensions[src]) {
+            return dimensions[src];
         }
 
+        var image = new Image();
         if (src) {
-            var img = new Image();
-            img.src = src;
-            if (!img.naturalWidth) {
-                img.onload = function () { return this$1$1.$update(); };
-            }
+            image.src = src;
 
-            return data[src] = img;
+            if (!image.naturalWidth) {
+                image.onload = function () {
+                    dimensions[src] = toDimensions(image);
+                    trigger(el, 'bgimageload');
+                };
+            }
         }
+
+        return dimensions[src] = toDimensions(image);
+    }
+
+    function toDimensions(image) {
+        return {
+            width: image.naturalWidth,
+            height: image.naturalHeight
+        };
     }
 
     function getStep(steps, percent) {
@@ -11042,16 +11110,18 @@
             start: function(ref) {
                 var start = ref.start;
 
-                return parseCalc(start, this.target);
+                return toPx(start, 'height', this.target, true);
             },
 
             end: function(ref) {
                 var end = ref.end;
                 var viewport = ref.viewport;
 
-                return parseCalc(
+                return toPx(
                     end || (viewport = (1 - viewport) * 100) && (viewport + "vh+" + viewport + "%"),
-                    this.target
+                    'height',
+                    this.target,
+                    true
                 );
             }
 
@@ -11098,19 +11168,6 @@
 
     };
 
-    var calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
-    function parseCalc(calc, el) {
-        var match;
-        var result = 0;
-        calc = calc.toString().replace(/\s/g, '');
-        calcRe.lastIndex = 0;
-        while ((match = calcRe.exec(calc)) !== null) {
-            result += toPx(match[0], 'height', el, true);
-        }
-
-        return result;
-    }
-
     function ease(percent, easing) {
         return easing >= 0
             ? Math.pow(percent, easing + 1)
@@ -11160,10 +11217,10 @@
 
         var from = prev
             ? getLeft(prev, list, center)
-            : getLeft(next, list, center) + dimensions(next).width * dir;
+            : getLeft(next, list, center) + dimensions$1(next).width * dir;
         var to = next
             ? getLeft(next, list, center)
-            : from + dimensions(prev).width * dir * (isRtl ? -1 : 1);
+            : from + dimensions$1(prev).width * dir * (isRtl ? -1 : 1);
 
         return {
 
@@ -11212,7 +11269,7 @@
                 css(list, 'transform', translate(clamp(
                     -to + (distance - distance * percent),
                     -getWidth(list),
-                    dimensions(list).width
+                    dimensions$1(list).width
                 ) * (isRtl ? -1 : 1), 'px'));
 
                 var actives = this.getActives();
@@ -11285,30 +11342,30 @@
     }
 
     function getMax(list) {
-        return Math.max(0, getWidth(list) - dimensions(list).width);
+        return Math.max(0, getWidth(list) - dimensions$1(list).width);
     }
 
     function getWidth(list) {
-        return children(list).reduce(function (right, el) { return dimensions(el).width + right; }, 0);
+        return children(list).reduce(function (right, el) { return dimensions$1(el).width + right; }, 0);
     }
 
     function centerEl(el, list) {
-        return dimensions(list).width / 2 - dimensions(el).width / 2;
+        return dimensions$1(list).width / 2 - dimensions$1(el).width / 2;
     }
 
     function getElLeft(el, list) {
-        return el && (position(el).left + (isRtl ? dimensions(el).width - dimensions(list).width : 0)) * (isRtl ? -1 : 1) || 0;
+        return el && (position(el).left + (isRtl ? dimensions$1(el).width - dimensions$1(list).width : 0)) * (isRtl ? -1 : 1) || 0;
     }
 
     function inView(list, listLeft) {
 
         listLeft -= 1;
-        var listWidth = dimensions(list).width;
+        var listWidth = dimensions$1(list).width;
         var listRight = listLeft + listWidth + 2;
 
         return children(list).filter(function (slide) {
             var slideLeft = getElLeft(slide, list);
-            var slideRight = slideLeft + Math.min(dimensions(slide).width, listWidth);
+            var slideRight = slideLeft + Math.min(dimensions$1(slide).width, listWidth);
 
             return slideLeft >= listLeft && slideRight <= listRight;
         });
@@ -11346,7 +11403,7 @@
             finite: function(ref) {
                 var finite = ref.finite;
 
-                return finite || Math.ceil(getWidth(this.list)) < dimensions(this.list).width + getMaxElWidth(this.list) + this.center;
+                return finite || Math.ceil(getWidth(this.list)) < Math.floor(dimensions$1(this.list).width + getMaxElWidth(this.list) + this.center);
             },
 
             maxIndex: function() {
@@ -11367,7 +11424,7 @@
                         return true;
                     }
 
-                    lft += dimensions(el).width;
+                    lft += dimensions$1(el).width;
 
                 });
 
@@ -11383,7 +11440,7 @@
                     return;
                 }
 
-                var width = dimensions(this.list).width / (this.center ? 2 : 1);
+                var width = dimensions$1(this.list).width / (this.center ? 2 : 1);
 
                 var left = 0;
                 var leftCenter = width;
@@ -11391,7 +11448,7 @@
 
                 sets = sortBy$1(this.slides, 'offsetLeft').reduce(function (sets, slide, i) {
 
-                    var slideWidth = dimensions(slide).width;
+                    var slideWidth = dimensions$1(slide).width;
                     var slideRight = slideLeft + slideWidth;
 
                     if (slideRight > left) {
@@ -11403,7 +11460,7 @@
                         if (!includes(sets, i)) {
 
                             var cmp = this$1$1.slides[i + 1];
-                            if (this$1$1.center && cmp && slideWidth < leftCenter - dimensions(cmp).width / 2) {
+                            if (this$1$1.center && cmp && slideWidth < leftCenter - dimensions$1(cmp).width / 2) {
                                 leftCenter -= slideWidth;
                             } else {
                                 leftCenter = width;
@@ -11491,7 +11548,7 @@
                 }
 
                 var index = this.dir < 0 || !this.slides[this.prevIndex] ? this.index : this.prevIndex;
-                this.duration = speedUp(this.avgWidth / this.velocity) * (dimensions(this.slides[index]).width / this.avgWidth);
+                this.duration = speedUp(this.avgWidth / this.velocity) * (dimensions$1(this.slides[index]).width / this.avgWidth);
 
                 this.reorder();
 
@@ -11531,7 +11588,7 @@
                 }
 
                 var next = this.slides[index];
-                var width = dimensions(this.list).width / 2 - dimensions(next).width / 2;
+                var width = dimensions$1(this.list).width / 2 - dimensions$1(next).width / 2;
                 var j = 0;
 
                 while (width > 0) {
@@ -11539,7 +11596,7 @@
                     var slide = this.slides[slideIndex];
 
                     css(slide, 'order', slideIndex > index ? -2 : -1);
-                    width -= dimensions(slide).width;
+                    width -= dimensions$1(slide).width;
                 }
 
             },
@@ -11576,7 +11633,7 @@
     };
 
     function getMaxElWidth(list) {
-        return Math.max.apply(Math, [ 0 ].concat( children(list).map(function (el) { return dimensions(el).width; }) ));
+        return Math.max.apply(Math, [ 0 ].concat( children(list).map(function (el) { return dimensions$1(el).width; }) ));
     }
 
     var sliderParallax = {
@@ -11819,6 +11876,33 @@
             Animations: Animations
         },
 
+        connected: function() {
+            var this$1$1 = this;
+
+            if (window.IntersectionObserver) {
+                this.observer = new IntersectionObserver(function (entries) {
+                    if (entries.some(function (entry) { return entry.isIntersecting; })) {
+                        this$1$1.preloadSlides();
+                    }
+                });
+                this.observer.observe(this.$el);
+            }
+        },
+
+        disconnected: function() {
+            this.observer && this.observer.disconnect();
+        },
+
+        methods: {
+
+            preloadSlides: function() {
+                var this$1$1 = this;
+
+                [1, -1].forEach(function (i) { return removeLazyLoad(this$1$1.slides[this$1$1.getIndex(this$1$1.index + i)]); });
+            }
+
+        },
+
         update: {
 
             read: function() {
@@ -11841,6 +11925,10 @@
                     height = Math.min(this.maxHeight, height);
                 }
 
+                if (isVisible(this.$el)) {
+                    this.preloadSlides();
+                }
+
                 return {height: height - boxModelAdjust(this.list, 'height', 'content-box')};
             },
 
@@ -11856,6 +11944,10 @@
 
     };
 
+    function removeLazyLoad(el) {
+        el && $$('img[loading="lazy"]', el).forEach(function (el) { return el.loading = 'eager'; });
+    }
+
     var sortable = {
 
         mixins: [Class, Animate],
@@ -12090,7 +12182,6 @@
 
                 off(document, pointerMove, this.move);
                 off(document, pointerUp, this.end);
-                off(window, 'scroll', this.scroll);
 
                 if (!this.drag) {
                     return;
@@ -12173,7 +12264,7 @@
 
             var x = pos.x;
             var y = pos.y;
-            y += window.pageYOffset;
+            y += scrollTop(window);
 
             var dist = (Date.now() - last) * .3;
             last = Date.now();