uikit 3.11.2-dev.44c622843 → 3.11.2-dev.536e1a374

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.11.2-dev.44c622843 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.11.2-dev.536e1a374 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -29,19 +29,19 @@
     }
 
     function startsWith(str, search) {
-      return str.startsWith(search);
+      return str == null ? void 0 : str.startsWith == null ? void 0 : str.startsWith(search);
     }
 
     function endsWith(str, search) {
-      return str.endsWith(search);
+      return str == null ? void 0 : str.endsWith == null ? void 0 : str.endsWith(search);
     }
 
     function includes(obj, search) {
-      return obj && obj.includes(search);
+      return obj == null ? void 0 : obj.includes == null ? void 0 : obj.includes(search);
     }
 
     function findIndex(array, predicate) {
-      return array.findIndex(predicate);
+      return array == null ? void 0 : array.findIndex == null ? void 0 : array.findIndex(predicate);
     }
 
     const { isArray, from: toArray } = Array;
@@ -130,14 +130,15 @@
       return element && (isNode(element) ? [element] : Array.from(element).filter(isNode)) || [];
     }
 
-    function toWindow(element) {
+    function toWindow(element) {var _element;
       if (isWindow(element)) {
         return element;
       }
 
       element = toNode(element);
+      const document = isDocument(element) ? element : (_element = element) == null ? void 0 : _element.ownerDocument;
 
-      return element ? (isDocument(element) ? element : element.ownerDocument).defaultView : window;
+      return (document == null ? void 0 : document.defaultView) || window;
     }
 
     function toMs(time) {
@@ -224,7 +225,7 @@
       },
 
       contain(dimensions, maxDimensions) {
-        dimensions = assign({}, dimensions);
+        dimensions = { ...dimensions };
 
         each(
         dimensions,
@@ -339,19 +340,6 @@
       }
     }
 
-    const inBrowser = typeof window !== 'undefined';
-    const isRtl = inBrowser && attr(document.documentElement, 'dir') === 'rtl';
-
-    const hasTouch = inBrowser && 'ontouchstart' in window;
-    const hasPointerEvents = inBrowser && window.PointerEvent;
-
-    const pointerDown = hasPointerEvents ? 'pointerdown' : hasTouch ? 'touchstart' : 'mousedown';
-    const pointerMove = hasPointerEvents ? 'pointermove' : hasTouch ? 'touchmove' : 'mousemove';
-    const pointerUp = hasPointerEvents ? 'pointerup' : hasTouch ? 'touchend' : 'mouseup';
-    const pointerEnter = hasPointerEvents ? 'pointerenter' : hasTouch ? '' : 'mouseenter';
-    const pointerLeave = hasPointerEvents ? 'pointerleave' : hasTouch ? '' : 'mouseleave';
-    const pointerCancel = hasPointerEvents ? 'pointercancel' : 'touchcancel';
-
     const voidElements = {
       area: true,
       base: true,
@@ -390,9 +378,8 @@
       return matches(element, selFocusable);
     }
 
-    function parent(element) {
-      element = toNode(element);
-      return element && isElement(element.parentNode) && element.parentNode;
+    function parent(element) {var _toNode;
+      return (_toNode = toNode(element)) == null ? void 0 : _toNode.parentElement;
     }
 
     function filter$1(element, selector) {
@@ -451,12 +438,6 @@
       return findAll(selector, getContext(selector, context));
     }
 
-    function getContext(selector, context) {if (context === void 0) {context = document;}
-      return isString(selector) && isContextSelector(selector) || isDocument(context) ?
-      context :
-      context.ownerDocument;
-    }
-
     function find(selector, context) {
       return toNode(_query(selector, context, 'querySelector'));
     }
@@ -465,6 +446,17 @@
       return toNodes(_query(selector, context, 'querySelectorAll'));
     }
 
+    const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
+    const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
+
+    function getContext(selector, context) {if (context === void 0) {context = document;}
+      return isString(selector) && isContextSelector(selector) || isDocument(context) ?
+      context :
+      context.ownerDocument;
+    }
+
+    const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
+
     function _query(selector, context, queryFn) {if (context === void 0) {context = document;}
       if (!selector || !isString(selector)) {
         return selector;
@@ -509,11 +501,6 @@
       }
     }
 
-    const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
-    const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
-
-    const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
-
     const selectorRe = /.*?[^\\](?:,|$)/g;
 
     const splitSelector = memoize((selector) =>
@@ -539,13 +526,8 @@
       return names.join(' > ');
     }
 
-    const escapeFn =
-    inBrowser && window.CSS && CSS.escape ||
-    function (css) {
-      return css.replace(/([^\x7f-\uFFFF\w-])/g, (match) => "\\" + match);
-    };
     function escape(css) {
-      return isString(css) ? escapeFn.call(null, css) : '';
+      return isString(css) ? CSS.escape(css) : '';
     }
 
     function on() {for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}
@@ -688,17 +670,14 @@
     }
 
     function ajax(url, options) {
-      const env = assign(
-      {
+      const env = {
         data: null,
         method: 'GET',
         headers: {},
         xhr: new XMLHttpRequest(),
         beforeSend: noop,
-        responseType: '' },
-
-      options);
-
+        responseType: '',
+        ...options };
 
       return Promise.resolve().
       then(() => env.beforeSend(env)).
@@ -749,8 +728,12 @@
       return new Promise((resolve, reject) => {
         const img = new Image();
 
-        img.onerror = (e) => reject(e);
-        img.onload = () => resolve(img);
+        img.onerror = (e) => {
+          reject(e);
+        };
+        img.onload = () => {
+          resolve(img);
+        };
 
         sizes && (img.sizes = sizes);
         srcset && (img.srcset = srcset);
@@ -777,7 +760,8 @@
 
 
     function css(element, property, value, priority) {if (priority === void 0) {priority = '';}
-      return toNodes(element).map((element) => {
+      const elements = toNodes(element);
+      for (const element of elements) {
         if (isString(property)) {
           property = propName(property);
 
@@ -803,9 +787,8 @@
           priority = value;
           each(property, (value, property) => css(element, property, value, priority));
         }
-
-        return element;
-      })[0];
+      }
+      return elements[0];
     }
 
     function getStyles(element, pseudoElt) {
@@ -932,16 +915,11 @@
 
 
         addClass(element, 'uk-transition');
-        css(
-        element,
-        assign(
-        {
+        css(element, {
           transitionProperty: Object.keys(props).map(propName).join(','),
           transitionDuration: duration + "ms",
-          transitionTimingFunction: timing },
-
-        props));
-
+          transitionTimingFunction: timing,
+          ...props });
 
       })));
 
@@ -1041,8 +1019,8 @@
       const currentOffset = dimensions$1(element);
 
       if (element) {
-        const { pageYOffset, pageXOffset } = toWindow(element);
-        const offsetBy = { height: pageYOffset, width: pageXOffset };
+        const { scrollY, scrollX } = toWindow(element);
+        const offsetBy = { height: scrollY, width: scrollX };
 
         for (const dir in dirs$1) {
           for (const i in dirs$1[dir]) {
@@ -1108,8 +1086,8 @@
 
         if (css(element, 'position') === 'fixed') {
           const win = toWindow(element);
-          offset[0] += win.pageYOffset;
-          offset[1] += win.pageXOffset;
+          offset[0] += win.scrollY;
+          offset[1] += win.scrollX;
           return offset;
         }
       } while (element = element.offsetParent);
@@ -1200,8 +1178,8 @@
 
     const calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
     const parseCalc = memoize((calc) => calc.toString().replace(/\s/g, '').match(calcRe) || []);
-    const unitRe = /(?:v[hw]|%)$/;
-    const parseUnit = memoize((str) => (str.match(unitRe) || [])[0]);
+    const unitRe$1 = /(?:v[hw]|%)$/;
+    const parseUnit = memoize((str) => (str.match(unitRe$1) || [])[0]);
 
     function percent(base, value) {
       return base * toFloat(value) / 100;
@@ -1216,6 +1194,10 @@
       once(document, 'DOMContentLoaded', fn);
     }
 
+    function isTag(element, tagName) {var _element$tagName;
+      return (element == null ? void 0 : (_element$tagName = element.tagName) == null ? void 0 : _element$tagName.toLowerCase()) === tagName.toLowerCase();
+    }
+
     function empty(element) {
       return replaceChildren(element, '');
     }
@@ -1224,34 +1206,18 @@
       return isUndefined(html) ? $(parent).innerHTML : replaceChildren(parent, html);
     }
 
-    function replaceChildren(parent, element) {
-      const nodes = $$(element);
-      $(parent).replaceChildren(...nodes);
-      return nodes;
-    }
-
-    function prepend(parent, element) {
-      const nodes = $$(element);
-      $(parent).prepend(...nodes);
-      return nodes;
-    }
-
-    function append(parent, element) {
-      const nodes = $$(element);
-      $(parent).append(...nodes);
-      return nodes;
-    }
-
-    function before(ref, element) {
-      const nodes = $$(element);
-      $(ref).before(...nodes);
-      return nodes;
-    }
+    const replaceChildren = applyFn('replaceChildren');
+    const prepend = applyFn('prepend');
+    const append = applyFn('append');
+    const before = applyFn('before');
+    const after = applyFn('after');
 
-    function after(ref, element) {
-      const nodes = $$(element);
-      $(ref).after(...nodes);
-      return nodes;
+    function applyFn(fn) {
+      return function (ref, element) {var _$;
+        const nodes = toNodes(isString(element) ? fragment(element) : element);
+        (_$ = $(ref)) == null ? void 0 : _$[fn](...nodes);
+        return unwrapSingle(nodes);
+      };
     }
 
     function remove$1(element) {
@@ -1273,7 +1239,7 @@
     function wrapInner(element, structure) {
       return toNodes(
       toNodes(element).map((element) =>
-      element.hasChildNodes ?
+      element.hasChildNodes() ?
       wrapAll(toNodes(element.childNodes), structure) :
       append(element, structure)));
 
@@ -1284,10 +1250,7 @@
       toNodes(element).
       map(parent).
       filter((value, index, self) => self.indexOf(value) === index).
-      forEach((parent) => {
-        before(parent, parent.childNodes);
-        remove$1(parent);
-      });
+      forEach((parent) => parent.replaceWith(...parent.childNodes));
     }
 
     const fragmentRe = /^\s*<(\w+|!)[^>]*>/;
@@ -1306,7 +1269,11 @@
         container.textContent = html;
       }
 
-      return container.childNodes.length > 1 ? toNodes(container.childNodes) : container.firstChild;
+      return unwrapSingle(container.childNodes);
+    }
+
+    function unwrapSingle(nodes) {
+      return nodes.length > 1 ? nodes : nodes[0];
     }
 
     function apply(node, fn) {
@@ -1335,6 +1302,19 @@
       return isString(str) && startsWith(str.trim(), '<');
     }
 
+    const inBrowser = typeof window !== 'undefined';
+    const isRtl = inBrowser && attr(document.documentElement, 'dir') === 'rtl';
+
+    const hasTouch = inBrowser && 'ontouchstart' in window;
+    const hasPointerEvents = inBrowser && window.PointerEvent;
+
+    const pointerDown = hasPointerEvents ? 'pointerdown' : hasTouch ? 'touchstart' : 'mousedown';
+    const pointerMove = hasPointerEvents ? 'pointermove' : hasTouch ? 'touchmove' : 'mousemove';
+    const pointerUp = hasPointerEvents ? 'pointerup' : hasTouch ? 'touchend' : 'mouseup';
+    const pointerEnter = hasPointerEvents ? 'pointerenter' : hasTouch ? '' : 'mouseenter';
+    const pointerLeave = hasPointerEvents ? 'pointerleave' : hasTouch ? '' : 'mouseleave';
+    const pointerCancel = hasPointerEvents ? 'pointercancel' : 'touchcancel';
+
     /*
         Based on:
         Copyright (c) 2016 Wilson Page wilsonpage@me.com
@@ -1487,6 +1467,41 @@
       return { x: x1 + ua * (x2 - x1), y: y1 + ua * (y2 - y1) };
     }
 
+    // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
+    const hasIntersectionObserver =
+    window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype;
+    function observeIntersection(targets, cb, options, intersecting) {if (intersecting === void 0) {intersecting = true;}
+      if (!hasIntersectionObserver) {
+        return;
+      }
+
+      const observer = new IntersectionObserver((entries, observer) => {
+        if (!intersecting || entries.some((entry) => entry.isIntersecting)) {
+          cb(entries, observer);
+        }
+      }, options);
+      for (const el of toNodes(targets)) {
+        observer.observe(el);
+      }
+      return observer;
+    }
+
+    const hasResizeObserver = window.ResizeObserver;
+    function observeResize(targets, cb, options) {if (options === void 0) {options = { box: 'border-box' };}
+      if (!hasResizeObserver) {
+        return;
+      }
+
+      const observer = new ResizeObserver((entries, observer) => {
+        cb(entries, observer);
+      });
+      for (const el of toNodes(targets)) {
+        observer.observe(el, options);
+      }
+
+      return observer;
+    }
+
     const strats = {};
 
     strats.events =
@@ -1526,7 +1541,7 @@
 
     // extend strategy
     strats.computed = strats.methods = function (parentVal, childVal) {
-      return childVal ? parentVal ? assign({}, parentVal, childVal) : childVal : parentVal;
+      return childVal ? parentVal ? { ...parentVal, ...childVal } : childVal : parentVal;
     };
 
     // data strategy
@@ -1666,11 +1681,11 @@
     }
 
     function isHTML5(el) {
-      return (el == null ? void 0 : el.tagName) === 'VIDEO';
+      return isTag(el, 'video');
     }
 
     function isIFrame(el) {
-      return (el == null ? void 0 : el.tagName) === 'IFRAME' && (isYoutube(el) || isVimeo(el));
+      return isTag(el, 'iframe') && (isYoutube(el) || isVimeo(el));
     }
 
     function isYoutube(el) {
@@ -1690,7 +1705,7 @@
 
     function post(el, cmd) {
       try {
-        el.contentWindow.postMessage(JSON.stringify(assign({ event: 'command' }, cmd)), '*');
+        el.contentWindow.postMessage(JSON.stringify({ event: 'command', ...cmd }), '*');
       } catch (e) {
         // noop
       }
@@ -2070,6 +2085,7 @@
         flipPosition: flipPosition,
         toPx: toPx,
         ready: ready,
+        isTag: isTag,
         empty: empty,
         html: html,
         replaceChildren: replaceChildren,
@@ -2163,6 +2179,9 @@
         memoize: memoize,
         Deferred: Deferred,
         MouseTracker: MouseTracker,
+        hasIntersectionObserver: hasIntersectionObserver,
+        observeIntersection: observeIntersection,
+        observeResize: observeResize,
         mergeOptions: mergeOptions,
         parseOptions: parseOptions,
         play: play,
@@ -2340,8 +2359,8 @@
       };
 
       function runUpdates(types) {
-        for (const { read, write, events } of this.$options.update) {
-          if (!types.has('update') && (!events || !events.some((type) => types.has(type)))) {
+        for (const { read, write, events = [] } of this.$options.update) {
+          if (!types.has('update') && !events.some((type) => types.has(type))) {
             continue;
           }
 
@@ -2364,7 +2383,7 @@
         const {
           $options: { computed } } =
         this;
-        const values = assign({}, this._computeds);
+        const values = { ...this._computeds };
         this._computeds = {};
 
         for (const key in computed) {
@@ -2435,7 +2454,7 @@
       UIkit.prototype._initProps = function (props) {
         let key;
 
-        props = props || getProps(this.$options, this.$name);
+        props = props || getProps$1(this.$options, this.$name);
 
         for (key in props) {
           if (!isUndefined(props[key])) {
@@ -2462,204 +2481,236 @@
             }
           }
         }
+        for (const { events = [] } of this.$options.update || []) {
+          if (includes(events, 'scroll')) {
+            registerScrollListener(this._uid, () => this.$emit('scroll'));
+            break;
+          }
+        }
       };
 
       UIkit.prototype._unbindEvents = function () {
         this._events.forEach((unbind) => unbind());
         delete this._events;
+        unregisterScrollListener(this._uid);
       };
 
       UIkit.prototype._initObservers = function () {
         this._observers = [initChildListObserver(this), initPropsObserver(this)];
       };
 
+      UIkit.prototype.registerObserver = function (observer) {
+        this._observers.push(observer);
+      };
+
       UIkit.prototype._disconnectObservers = function () {
         this._observers.forEach((observer) => observer == null ? void 0 : observer.disconnect());
       };
+    }
 
-      function getProps(opts, name) {
-        const data$1 = {};
-        const { args = [], props = {}, el } = opts;
-
-        if (!props) {
-          return data$1;
-        }
+    function getProps$1(opts, name) {
+      const data$1 = {};
+      const { args = [], props = {}, el } = opts;
 
-        for (const key in props) {
-          const prop = hyphenate(key);
-          let value = data(el, prop);
+      if (!props) {
+        return data$1;
+      }
 
-          if (isUndefined(value)) {
-            continue;
-          }
+      for (const key in props) {
+        const prop = hyphenate(key);
+        let value = data(el, prop);
 
-          value = props[key] === Boolean && value === '' ? true : coerce(props[key], value);
+        if (isUndefined(value)) {
+          continue;
+        }
 
-          if (prop === 'target' && (!value || startsWith(value, '_'))) {
-            continue;
-          }
+        value = props[key] === Boolean && value === '' ? true : coerce(props[key], value);
 
-          data$1[key] = value;
+        if (prop === 'target' && (!value || startsWith(value, '_'))) {
+          continue;
         }
 
-        const options = parseOptions(data(el, name), args);
+        data$1[key] = value;
+      }
 
-        for (const key in options) {
-          const prop = camelize(key);
-          if (props[prop] !== undefined) {
-            data$1[prop] = coerce(props[prop], options[key]);
-          }
-        }
+      const options = parseOptions(data(el, name), args);
 
-        return data$1;
+      for (const key in options) {
+        const prop = camelize(key);
+        if (props[prop] !== undefined) {
+          data$1[prop] = coerce(props[prop], options[key]);
+        }
       }
 
-      function registerComputed(component, key, cb) {
-        Object.defineProperty(component, key, {
-          enumerable: true,
+      return data$1;
+    }
 
-          get() {
-            const { _computeds, $props, $el } = component;
+    function registerComputed(component, key, cb) {
+      Object.defineProperty(component, key, {
+        enumerable: true,
 
-            if (!hasOwn(_computeds, key)) {
-              _computeds[key] = (cb.get || cb).call(component, $props, $el);
-            }
+        get() {
+          const { _computeds, $props, $el } = component;
 
-            return _computeds[key];
-          },
+          if (!hasOwn(_computeds, key)) {
+            _computeds[key] = (cb.get || cb).call(component, $props, $el);
+          }
 
-          set(value) {
-            const { _computeds } = component;
+          return _computeds[key];
+        },
 
-            _computeds[key] = cb.set ? cb.set.call(component, value) : value;
+        set(value) {
+          const { _computeds } = component;
 
-            if (isUndefined(_computeds[key])) {
-              delete _computeds[key];
-            }
-          } });
+          _computeds[key] = cb.set ? cb.set.call(component, value) : value;
+
+          if (isUndefined(_computeds[key])) {
+            delete _computeds[key];
+          }
+        } });
 
+    }
+
+    function registerEvent(component, event, key) {
+      if (!isPlainObject(event)) {
+        event = { name: key, handler: event };
       }
 
-      function registerEvent(component, event, key) {
-        if (!isPlainObject(event)) {
-          event = { name: key, handler: event };
-        }
+      let { name, el, handler, capture, passive, delegate, filter, self } = event;
+      el = isFunction(el) ? el.call(component) : el || component.$el;
 
-        let { name, el, handler, capture, passive, delegate, filter, self } = event;
-        el = isFunction(el) ? el.call(component) : el || component.$el;
+      if (isArray(el)) {
+        el.forEach((el) => registerEvent(component, { ...event, el }, key));
+        return;
+      }
 
-        if (isArray(el)) {
-          el.forEach((el) => registerEvent(component, assign({}, event, { el }), key));
-          return;
-        }
+      if (!el || filter && !filter.call(component)) {
+        return;
+      }
 
-        if (!el || filter && !filter.call(component)) {
-          return;
-        }
+      component._events.push(
+      on(
+      el,
+      name,
+      delegate ? isString(delegate) ? delegate : delegate.call(component) : null,
+      isString(handler) ? component[handler] : handler.bind(component),
+      { passive, capture, self }));
 
-        component._events.push(
-        on(
-        el,
-        name,
-        delegate ? isString(delegate) ? delegate : delegate.call(component) : null,
-        isString(handler) ? component[handler] : handler.bind(component),
-        { passive, capture, self }));
 
+    }
 
-      }
+    function notIn(options, key) {
+      return options.every((arr) => !arr || !hasOwn(arr, key));
+    }
 
-      function notIn(options, key) {
-        return options.every((arr) => !arr || !hasOwn(arr, key));
+    function coerce(type, value) {
+      if (type === Boolean) {
+        return toBoolean(value);
+      } else if (type === Number) {
+        return toNumber(value);
+      } else if (type === 'list') {
+        return toList(value);
       }
 
-      function coerce(type, value) {
-        if (type === Boolean) {
-          return toBoolean(value);
-        } else if (type === Number) {
-          return toNumber(value);
-        } else if (type === 'list') {
-          return toList(value);
-        }
+      return type ? type(value) : value;
+    }
 
-        return type ? type(value) : value;
+    function toList(value) {
+      return isArray(value) ?
+      value :
+      isString(value) ?
+      value.
+      split(/,(?![^(]*\))/).
+      map((value) => isNumeric(value) ? toNumber(value) : toBoolean(value.trim())) :
+      [value];
+    }
+
+    function normalizeData(_ref, _ref2) {let { data = {} } = _ref;let { args = [], props = {} } = _ref2;
+      if (isArray(data)) {
+        data = data.slice(0, args.length).reduce((data, value, index) => {
+          if (isPlainObject(value)) {
+            assign(data, value);
+          } else {
+            data[args[index]] = value;
+          }
+          return data;
+        }, {});
       }
 
-      function toList(value) {
-        return isArray(value) ?
-        value :
-        isString(value) ?
-        value.
-        split(/,(?![^(]*\))/).
-        map((value) => isNumeric(value) ? toNumber(value) : toBoolean(value.trim())) :
-        [value];
+      for (const key in data) {
+        if (isUndefined(data[key])) {
+          delete data[key];
+        } else if (props[key]) {
+          data[key] = coerce(props[key], data[key]);
+        }
       }
 
-      function normalizeData(_ref, _ref2) {let { data = {} } = _ref;let { args = [], props = {} } = _ref2;
-        if (isArray(data)) {
-          data = data.slice(0, args.length).reduce((data, value, index) => {
-            if (isPlainObject(value)) {
-              assign(data, value);
-            } else {
-              data[args[index]] = value;
-            }
-            return data;
-          }, {});
-        }
+      return data;
+    }
 
-        for (const key in data) {
-          if (isUndefined(data[key])) {
-            delete data[key];
-          } else if (props[key]) {
-            data[key] = coerce(props[key], data[key]);
-          }
-        }
+    function initChildListObserver(component) {
+      const { el } = component.$options;
 
-        return data;
-      }
+      const observer = new MutationObserver(() => component.$emit());
+      observer.observe(el, {
+        childList: true,
+        subtree: true });
 
-      function initChildListObserver(component) {
-        const { el } = component.$options;
 
-        const observer = new MutationObserver(() => component.$emit());
-        observer.observe(el, {
-          childList: true,
-          subtree: true });
+      return observer;
+    }
 
+    function initPropsObserver(component) {
+      const { $name, $options, $props } = component;
+      const { attrs, props, el } = $options;
 
-        return observer;
+      if (!props || attrs === false) {
+        return;
       }
 
-      function initPropsObserver(component) {
-        const { $name, $options, $props } = component;
-        const { attrs, props, el } = $options;
+      const attributes = isArray(attrs) ? attrs : Object.keys(props);
+      const filter = attributes.map((key) => hyphenate(key)).concat($name);
 
-        if (!props || attrs === false) {
-          return;
+      const observer = new MutationObserver((records) => {
+        const data = getProps$1($options, $name);
+        if (
+        records.some((_ref3) => {let { attributeName } = _ref3;
+          const prop = attributeName.replace('data-', '');
+          return (
+          prop === $name ? attributes : [camelize(prop), camelize(attributeName)]).
+          some((prop) => !isUndefined(data[prop]) && data[prop] !== $props[prop]);
+        }))
+        {
+          component.$reset();
         }
+      });
 
-        const attributes = isArray(attrs) ? attrs : Object.keys(props);
-        const filter = attributes.map((key) => hyphenate(key)).concat($name);
+      observer.observe(el, {
+        attributes: true,
+        attributeFilter: filter.concat(filter.map((key) => "data-" + key)) });
 
-        const observer = new MutationObserver((records) => {
-          const data = getProps($options, $name);
-          if (
-          records.some((_ref3) => {let { attributeName } = _ref3;
-            const prop = attributeName.replace('data-', '');
-            return (
-            prop === $name ? attributes : [camelize(prop), camelize(attributeName)]).
-            some((prop) => !isUndefined(data[prop]) && data[prop] !== $props[prop]);
-          }))
-          {
-            component.$reset();
-          }
-        });
 
-        observer.observe(el, {
-          attributes: true,
-          attributeFilter: filter.concat(filter.map((key) => "data-" + key)) });
+      return observer;
+    }
 
+    const scrollListeners = new Map();
+    let unbindScrollListener;
+    function registerScrollListener(id, listener) {
+      unbindScrollListener =
+      unbindScrollListener ||
+      on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
+        passive: true,
+        capture: true });
 
-        return observer;
+
+      scrollListeners.set(id, listener);
+    }
+
+    function unregisterScrollListener(id) {
+      scrollListeners.delete(id);
+      if (unbindScrollListener && !scrollListeners.size) {
+        unbindScrollListener();
+        unbindScrollListener = null;
       }
     }
 
@@ -2783,7 +2834,7 @@
           }
         };
 
-        const opt = isPlainObject(options) ? assign({}, options) : options.options;
+        const opt = isPlainObject(options) ? { ...options } : options.options;
 
         opt.name = name;
 
@@ -2836,7 +2887,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.11.2-dev.44c622843';
+    UIkit.version = '3.11.2-dev.536e1a374';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -2862,27 +2913,7 @@
 
       on(window, 'load resize', handleResize);
       on(document, 'loadedmetadata load', handleResize, true);
-
-      if ('ResizeObserver' in window) {
-        new ResizeObserver(handleResize).observe(document.documentElement);
-      }
-
-      // throttle `scroll` event (Safari triggers multiple `scroll` events per frame)
-      let pending;
-      on(
-      window,
-      'scroll',
-      (e) => {
-        if (pending) {
-          return;
-        }
-        pending = true;
-        fastdom.read(() => pending = false);
-
-        UIkit.update(null, e.type);
-      },
-      { passive: true, capture: true });
-
+      observeResize(document.documentElement, handleResize);
 
       let started = 0;
       on(
@@ -2901,45 +2932,6 @@
       },
       true);
 
-
-      on(
-      document,
-      pointerDown,
-      (e) => {
-        if (!isTouch(e)) {
-          return;
-        }
-
-        // Handle Swipe Gesture
-        const pos = getEventPos(e);
-        const target = 'tagName' in e.target ? e.target : parent(e.target);
-        once(document, pointerUp + " " + pointerCancel + " scroll", (e) => {
-          const { x, y } = getEventPos(e);
-
-          // swipe
-          if (
-          e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100 ||
-          y && Math.abs(pos.y - y) > 100)
-          {
-            setTimeout(() => {
-              trigger(target, 'swipe');
-              trigger(target, "swipe" + swipeDirection(pos.x, pos.y, x, y));
-            });
-          }
-        });
-      },
-      { passive: true });
-
-    }
-
-    function swipeDirection(x1, y1, x2, y2) {
-      return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ?
-      x1 - x2 > 0 ?
-      'Left' :
-      'Right' :
-      y1 - y2 > 0 ?
-      'Up' :
-      'Down';
     }
 
     function boot (UIkit) {
@@ -3004,6 +2996,23 @@
         !hasClass(this.$el, this.$name) && addClass(this.$el, this.$name);
       } };
 
+    var Lazyload = {
+      methods: {
+        lazyload(observeTargets, targets) {if (observeTargets === void 0) {observeTargets = this.$el;}if (targets === void 0) {targets = this.$el;}
+          this.registerObserver(
+          observeIntersection(observeTargets, (entries, observer) => {
+            for (const el of toNodes(isFunction(targets) ? targets() : targets)) {
+              $$('[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+            }
+            for (const el of entries.
+            filter((_ref) => {let { isIntersecting } = _ref;return isIntersecting;}).
+            map((_ref2) => {let { target } = _ref2;return target;})) {
+              observer.unobserve(el);
+            }
+          }));
+
+        } } };
+
     var Togglable = {
       props: {
         cls: Boolean,
@@ -3135,7 +3144,7 @@
     function toggleHeight(_ref3) {let { isToggled, duration, initProps, hideProps, transition, _toggle } = _ref3;
       return (el, show) => {
         const inProgress = Transition.inProgress(el);
-        const inner = el.hasChildNodes ?
+        const inner = el.hasChildNodes() ?
         toFloat(css(el.firstElementChild, 'marginTop')) +
         toFloat(css(el.lastElementChild, 'marginBottom')) :
         0;
@@ -3159,7 +3168,7 @@
         show ?
         Transition.start(
         el,
-        assign({}, initProps, { overflow: 'hidden', height: endHeight }),
+        { ...initProps, overflow: 'hidden', height: endHeight },
         Math.round(duration * (1 - currentHeight / endHeight)),
         transition) :
 
@@ -3191,7 +3200,7 @@
     }
 
     var Accordion = {
-      mixins: [Class, Togglable],
+      mixins: [Class, Lazyload, Togglable],
 
       props: {
         targets: String,
@@ -3247,6 +3256,10 @@
         } },
 
 
+      connected() {
+        this.lazyload();
+      },
+
       events: [
       {
         name: 'click',
@@ -3331,7 +3344,7 @@
         animation: [true],
         selClose: '.uk-alert-close',
         duration: 150,
-        hideProps: assign({ opacity: 0 }, Togglable.data.hideProps) },
+        hideProps: { opacity: 0, ...Togglable.data.hideProps } },
 
 
       events: [
@@ -3382,6 +3395,8 @@
         if (this.automute) {
           mute(this.$el);
         }
+
+        this.registerObserver(observeIntersection(this.$el, () => this.$emit('scroll'), {}, false));
       },
 
       update: {
@@ -3418,6 +3433,10 @@
         automute: true },
 
 
+      connected() {
+        this.registerObserver(observeResize(this.$el, () => this.$emit('resize')));
+      },
+
       update: {
         read() {
           const el = this.$el;
@@ -3543,7 +3562,7 @@
     let active$1;
 
     var drop = {
-      mixins: [Container, Position, Togglable],
+      mixins: [Container, Lazyload, Position, Togglable],
 
       args: 'pos',
 
@@ -3597,6 +3616,7 @@
             mode: this.mode }).
           $el;
           attr(this.target, 'aria-haspopup', true);
+          this.lazyload(this.target);
         }
       },
 
@@ -3972,7 +3992,7 @@
         name: 'change',
 
         handler() {
-          this.$update();
+          this.$emit();
         } },
 
 
@@ -3984,7 +4004,7 @@
         },
 
         handler() {
-          this.$update();
+          this.$emit();
         } }] };
 
     // Deprecated
@@ -4341,6 +4361,8 @@
     }
 
     var heightViewport = {
+      mixins: [Class],
+
       props: {
         expand: Boolean,
         offsetTop: Boolean,
@@ -4488,6 +4510,12 @@
 
       methods: {
         async getSvg() {
+          if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {
+            return new Promise((resolve) =>
+            once(this.$el, 'load', () => resolve(this.getSvg())));
+
+          }
+
           return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject('SVG not found.');
         },
 
@@ -4587,7 +4615,7 @@
     }
 
     function insertSVG(el, root) {
-      if (isVoidElement(root) || root.tagName === 'CANVAS') {
+      if (isVoidElement(root) || isTag(root, 'canvas')) {
         root.hidden = true;
 
         const next = root.nextElementSibling;
@@ -4599,11 +4627,7 @@
     }
 
     function equals(el, other) {
-      return isSVG(el) && isSVG(other) && innerHTML(el) === innerHTML(other);
-    }
-
-    function isSVG(el) {
-      return (el == null ? void 0 : el.tagName) === 'svg';
+      return isTag(el, 'svg') && isTag(other, 'svg') && innerHTML(el) === innerHTML(other);
     }
 
     function innerHTML(el) {
@@ -4684,14 +4708,14 @@
       },
 
       methods: {
-        getSvg() {
+        async getSvg() {
           const icon = getIcon(this.icon);
 
           if (!icon) {
-            return Promise.reject('Icon not found.');
+            throw 'Icon not found.';
           }
 
-          return Promise.resolve(icon);
+          return icon;
         } } };
 
     const IconComponent = {
@@ -4749,10 +4773,17 @@
     const Spinner = {
       extends: IconComponent,
 
-      async connected() {
-        const svg = await this.svg;
-        svg && this.ratio !== 1 && css($('circle', svg), 'strokeWidth', 1 / this.ratio);
-      } };
+      methods: {
+        async getSvg() {
+          const icon = await Icon.methods.getSvg.call(this);
+
+          if (this.ratio !== 1) {
+            css($('circle', icon), 'strokeWidth', 1 / this.ratio);
+          }
+
+          return icon;
+        } } };
+
 
 
     const parsed = {};
@@ -4790,120 +4821,93 @@
       return isRtl ? swap(swap(icon, 'left', 'right'), 'previous', 'next') : icon;
     }
 
+    const nativeLazyLoad = ('loading' in HTMLImageElement.prototype);
+
     var img = {
       args: 'dataSrc',
 
       props: {
         dataSrc: String,
-        dataSrcset: Boolean,
-        sizes: String,
-        width: Number,
-        height: Number,
+        sources: String,
         offsetTop: String,
         offsetLeft: String,
-        target: String },
+        target: String,
+        loading: String },
 
 
       data: {
         dataSrc: '',
-        dataSrcset: false,
-        sizes: false,
-        width: false,
-        height: false,
+        sources: false,
         offsetTop: '50vh',
         offsetLeft: '50vw',
-        target: false },
+        target: false,
+        loading: 'lazy' },
 
 
       computed: {
-        cacheKey(_ref) {let { dataSrc } = _ref;
-          return this.$name + "." + dataSrc;
-        },
-
-        width(_ref2) {let { width, dataWidth } = _ref2;
-          return width || dataWidth;
-        },
-
-        height(_ref3) {let { height, dataHeight } = _ref3;
-          return height || dataHeight;
-        },
-
-        sizes(_ref4) {let { sizes, dataSizes } = _ref4;
-          return sizes || dataSizes;
-        },
-
-        isImg(_, $el) {
-          return isImg($el);
-        },
-
         target: {
-          get(_ref5) {let { target } = _ref5;
+          get(_ref) {let { target } = _ref;
             return [this.$el, ...queryAll(target, this.$el)];
           },
 
           watch() {
-            this.observe();
-          } },
-
-
-        offsetTop(_ref6) {let { offsetTop } = _ref6;
-          return toPx(offsetTop, 'height');
-        },
+            this.$reset();
+          } } },
 
-        offsetLeft(_ref7) {let { offsetLeft } = _ref7;
-          return toPx(offsetLeft, 'width');
-        } },
 
 
       connected() {
-        if (!window.IntersectionObserver) {
-          setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
+        if (this.loading !== 'lazy' || !hasIntersectionObserver) {
+          this.load();
           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);
+
+        this.registerObserver(
+        observeIntersection(
+        this.target,
+        (entries, observer) => {
+          this.load();
+          observer.disconnect();
+        },
+        {
+          rootMargin: toPx(this.offsetTop, 'height') + "px " + toPx(
+          this.offsetLeft,
+          'width') + "px" }));
+
+
 
 
-        requestAnimationFrame(this.observe);
       },
 
       disconnected() {
-        this.observer && this.observer.disconnect();
+        if (this._data.image) {
+          this._data.image.onload = '';
+        }
       },
 
       update: {
-        read(_ref8) {let { image } = _ref8;
-          if (!this.observer) {
+        write(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(
-          (img) => img && img.currentSrc !== '' && setSrcAttrs(this.$el, currentSrc(img)));
-
-        },
-
-        write(data) {
-          if (this.dataSrcset && window.devicePixelRatio !== 1) {
+          const srcset = data(this.$el, 'data-srcset');
+          if (srcset && window.devicePixelRatio !== 1) {
             const 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");
             }
           }
         },
@@ -4911,43 +4915,28 @@
         events: ['resize'] },
 
 
-      methods: {
-        load(entries) {
-          // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
-          if (
-          !entries.some((entry) => isUndefined(entry.isIntersecting) || entry.isIntersecting))
-          {
-            return;
-          }
-
-          this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(
-          (img) => {
-            setSrcAttrs(this.$el, currentSrc(img), img.srcset, img.sizes);
-            storage[this.cacheKey] = currentSrc(img);
-            return img;
-          },
-          (e) => trigger(this.$el, new e.constructor(e.type, e)));
-
-
-          this.observer.disconnect();
-        },
-
-        observe() {
-          if (this._connected && !this._data.image) {
-            for (const el of this.target) {
-              this.observer.observe(el);
-            }
+      methods: {
+        load() {
+          if (this._data.image) {
+            return this._data.image;
           }
+
+          const image = isImg(this.$el) ?
+          this.$el :
+          getImageFromElement(this.$el, this.dataSrc, this.sources);
+
+          removeAttr(image, 'loading');
+          setSrcAttrs(this.$el, image.currentSrc);
+          return this._data.image = image;
         } } };
 
 
 
-    function setSrcAttrs(el, src, srcset, sizes) {
+    function setSrcAttrs(el, src) {
       if (isImg(el)) {
-        const set = (prop, val) => val && val !== el[prop] && (el[prop] = val);
-        set('sizes', sizes);
-        set('srcset', srcset);
-        set('src', src);
+        const parentNode = parent(el);
+        const elements = isPicture(parentNode) ? children(parentNode) : [el];
+        elements.forEach((el) => setSourceProps(el, el));
       } else if (src) {
         const change = !includes(el.style.backgroundImage, src);
         if (change) {
@@ -4957,16 +4946,62 @@
       }
     }
 
-    function getPlaceholderImage(width, height, sizes) {
-      if (sizes) {
-        ({ width, height } = Dimensions.ratio(
-        { width, height },
-        'width',
-        toPx(sizesToPixel(sizes))));
+    const srcProps = ['data-src', 'data-srcset', 'sizes'];
+    function setSourceProps(sourceEl, targetEl) {
+      srcProps.forEach((prop) => {
+        const value = data(sourceEl, prop);
+        if (value) {
+          attr(targetEl, prop.replace(/^(data-)+/, ''), value);
+        }
+      });
+    }
+
+    function getImageFromElement(el, src, sources) {
+      const img = new Image();
+
+      wrapInPicture(img, sources);
+      setSourceProps(el, img);
+      img.onload = () => {
+        setSrcAttrs(el, img.currentSrc);
+      };
+      attr(img, 'src', src);
+      return img;
+    }
+
+    function wrapInPicture(img, sources) {
+      sources = parseSources(sources);
+
+      if (sources.length) {
+        const picture = fragment('<picture>');
+        for (const attrs of sources) {
+          const 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 "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
+      return sources.filter((source) => !isEmpty(source));
     }
 
     const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -5006,24 +5041,18 @@
       return descriptors.filter((size) => 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 isTag(el, 'picture');
     }
 
-    const key = '__test__';
-    let storage;
-
-    // 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 isImg(el) {
+      return isTag(el, 'img');
     }
 
     var Media = {
@@ -5479,7 +5508,7 @@
 
 
       function openDialog(tmpl, options, hideFn, submitFn) {
-        options = assign({ bgClose: false, escClose: true, labels: modal.labels }, options);
+        options = { bgClose: false, escClose: true, labels: modal.labels, ...options };
 
         const dialog = modal.dialog(tmpl(options), options);
         const deferred = new Deferred();
@@ -5608,10 +5637,11 @@
             this.$create(
             'drop',
             dropdowns.filter((el) => !this.getDropdown(el)),
-            assign({}, this.$props, {
+            {
+              ...this.$props,
               boundary: this.boundary,
               pos: this.pos,
-              offset: this.dropbar || this.offset }));
+              offset: this.dropbar || this.offset });
 
 
           },
@@ -5921,8 +5951,69 @@
       RIGHT: 39,
       DOWN: 40 };
 
+    var Swipe = {
+      props: {
+        swiping: Boolean },
+
+
+      data: {
+        swiping: true },
+
+
+      computed: {
+        swipeTarget(props, $el) {
+          return $el;
+        } },
+
+
+      connected() {
+        if (!this.swiping) {
+          return;
+        }
+
+        registerEvent(this, {
+          el: this.swipeTarget,
+          name: pointerDown,
+          passive: true,
+          handler(e) {
+            if (!isTouch(e)) {
+              return;
+            }
+
+            // Handle Swipe Gesture
+            const pos = getEventPos(e);
+            const target = 'tagName' in e.target ? e.target : parent(e.target);
+            once(document, pointerUp + " " + pointerCancel + " scroll", (e) => {
+              const { x, y } = getEventPos(e);
+
+              // swipe
+              if (
+              e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100 ||
+              y && Math.abs(pos.y - y) > 100)
+              {
+                setTimeout(() => {
+                  trigger(target, 'swipe');
+                  trigger(target, "swipe" + swipeDirection(pos.x, pos.y, x, y));
+                });
+              }
+            });
+          } });
+
+      } };
+
+
+    function swipeDirection(x1, y1, x2, y2) {
+      return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ?
+      x1 - x2 > 0 ?
+      'Left' :
+      'Right' :
+      y1 - y2 > 0 ?
+      'Up' :
+      'Down';
+    }
+
     var offcanvas = {
-      mixins: [Modal],
+      mixins: [Modal, Swipe],
 
       args: 'mode',
 
@@ -6503,26 +6594,11 @@
 
 
       computed: {
-        position(_ref, $el) {let { position } = _ref;
-          return position === 'auto' ?
-          (this.isFixed ? this.placeholder : $el).offsetHeight > height(window) ?
-          'bottom' :
-          'top' :
-          position;
-        },
-
-        offset(_ref2, $el) {let { offset } = _ref2;
-          if (this.position === 'bottom') {
-            offset += '+100vh-100%';
-          }
-          return toPx(offset, 'height', $el);
-        },
-
-        selTarget(_ref3, $el) {let { selTarget } = _ref3;
+        selTarget(_ref, $el) {let { selTarget } = _ref;
           return selTarget && $(selTarget, $el) || $el;
         },
 
-        widthElement(_ref4, $el) {let { widthElement } = _ref4;
+        widthElement(_ref2, $el) {let { widthElement } = _ref2;
           return query(widthElement, $el) || this.placeholder;
         },
 
@@ -6570,41 +6646,36 @@
           return window;
         },
 
+        filter() {
+          return this.targetOffset !== false;
+        },
+
         handler() {
-          if (!(this.targetOffset !== false && location.hash && scrollTop(window) > 0)) {
+          if (!location.hash || scrollTop(window) === 0) {
             return;
           }
 
-          const target = $(location.hash);
-
-          if (target) {
-            fastdom.read(() => {
-              const { top } = offset(target);
-              const elTop = offset(this.$el).top;
-              const elHeight = this.$el.offsetHeight;
+          fastdom.read(() => {
+            const targetOffset = offset($(location.hash));
+            const elOffset = offset(this.$el);
 
-              if (
-              this.isFixed &&
-              elTop + elHeight >= top &&
-              elTop <= top + target.offsetHeight)
-              {
-                scrollTop(
-                window,
-                top -
-                elHeight - (
-                isNumeric(this.targetOffset) ? this.targetOffset : 0) -
-                this.offset);
+            if (this.isFixed && intersectRect(targetOffset, elOffset)) {
+              scrollTop(
+              window,
+              targetOffset.top -
+              elOffset.height -
+              toPx(this.targetOffset, 'height') -
+              toPx(this.offset, 'height'));
 
-              }
-            });
-          }
+            }
+          });
         } }],
 
 
 
       update: [
       {
-        read(_ref5, types) {let { height: height$1, margin } = _ref5;
+        read(_ref3, types) {let { height: height$1, margin } = _ref3;
           this.inactive = !this.matchMedia || !isVisible(this.$el);
 
           if (this.inactive) {
@@ -6613,35 +6684,49 @@
 
           const hide = this.isActive && types.has('resize');
           if (hide) {
+            css(this.selTarget, 'transition', '0s');
             this.hide();
           }
 
           if (!this.isActive) {
-            height$1 = this.$el.offsetHeight;
+            height$1 = offset(this.$el).height;
             margin = css(this.$el, 'margin');
           }
 
           if (hide) {
             this.show();
+            fastdom.write(() => css(this.selTarget, 'transition', ''));
           }
 
-          const overflow = Math.max(0, height$1 + this.offset - height(window));
-
           const referenceElement = this.isFixed ? this.placeholder : this.$el;
+          const windowHeight = height(window);
+
+          let position = this.position;
+          if (position === 'auto' && height$1 > windowHeight) {
+            position = 'bottom';
+          }
+
+          let offset$1 = toPx(this.offset, 'height', referenceElement);
+          if (position === 'bottom') {
+            offset$1 += windowHeight - height$1;
+          }
+
+          const overflow = Math.max(0, height$1 + offset$1 - windowHeight);
           const topOffset = offset(referenceElement).top;
           const offsetParentTop = offset(referenceElement.offsetParent).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) - this.offset;
+          const start = Math.max(top, topOffset) - offset$1;
           const end = bottom ?
-          bottom - this.$el.offsetHeight + overflow - this.offset :
-          getScrollingElement(this.$el).scrollHeight - height(window);
+          bottom - offset(this.$el).height + overflow - offset$1 :
+          getScrollingElement(this.$el).scrollHeight - windowHeight;
 
           return {
             start,
             end,
+            offset: offset$1,
             overflow,
             topOffset,
             offsetParentTop,
@@ -6649,11 +6734,11 @@
             margin,
             width: dimensions$1(isVisible(this.widthElement) ? this.widthElement : this.$el).
             width,
-            top: offsetPosition(this.placeholder)[0] };
+            top: offsetPosition(referenceElement)[0] };
 
         },
 
-        write(_ref6) {let { height, margin } = _ref6;
+        write(_ref4) {let { height, margin } = _ref4;
           const { placeholder } = this;
 
           css(placeholder, { height, margin });
@@ -6670,14 +6755,14 @@
 
 
       {
-        read(_ref7)
+        read(_ref5)
 
 
 
 
 
 
-        {let { scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end } = _ref7;
+        {let { scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end } = _ref5;
           const scroll = scrollTop(window);
           const dir = prevScroll <= scroll ? 'down' : 'up';
 
@@ -6758,7 +6843,7 @@
             }
           } else if (this.isFixed) {
             this.update();
-          } else if (this.animation) {
+          } else if (this.animation && scroll > topOffset) {
             Animation.cancel(this.$el);
             this.show();
             Animation.in(this.$el, this.animation).catch(noop);
@@ -6786,33 +6871,33 @@
         },
 
         update() {
-          const {
+          let {
             width,
             scroll = 0,
             overflow,
             overflowScroll = 0,
             start,
             end,
+            offset,
             topOffset,
             height,
             offsetParentTop } =
           this._data;
           const active = start !== 0 || scroll > start;
-          let top = this.offset;
           let position = 'fixed';
 
           if (scroll > end) {
-            top = end + this.offset - offsetParentTop;
+            offset += end - offsetParentTop;
             position = 'absolute';
           }
 
           if (overflow) {
-            top -= overflowScroll;
+            offset -= overflowScroll;
           }
 
           css(this.$el, {
             position,
-            top: top + "px",
+            top: offset + "px",
             width });
 
 
@@ -6842,7 +6927,7 @@
     }
 
     var Switcher = {
-      mixins: [Togglable],
+      mixins: [Lazyload, Swipe, Togglable],
 
       args: 'connect',
 
@@ -6850,8 +6935,7 @@
         connect: String,
         toggle: String,
         itemNav: String,
-        active: Number,
-        swiping: Boolean },
+        active: Number },
 
 
       data: {
@@ -6859,7 +6943,6 @@
         toggle: '> * > :first-child',
         itemNav: false,
         active: 0,
-        swiping: true,
         cls: 'uk-active',
         attrItem: 'uk-switcher-item' },
 
@@ -6903,9 +6986,17 @@
           return children(this.$el).filter((child) =>
           this.toggles.some((toggle) => within(toggle, child)));
 
+        },
+
+        swipeTarget() {
+          return this.connects;
         } },
 
 
+      connected() {
+        this.lazyload(this.$el, this.connects);
+      },
+
       events: [
       {
         name: 'click',
@@ -7014,7 +7105,7 @@
     const KEY_SPACE = 32;
 
     var toggle = {
-      mixins: [Media, Togglable],
+      mixins: [Lazyload, Media, Togglable],
 
       args: 'target',
 
@@ -7036,6 +7127,7 @@
         if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
           attr(this.$el, 'tabindex', '0');
         }
+        this.lazyload(this.$el, this.target);
       },
 
       computed: {
@@ -7127,7 +7219,7 @@
         name: 'keydown',
 
         filter() {
-          return includes(this.mode, 'click') && this.$el.tagName !== 'INPUT';
+          return includes(this.mode, 'click') && !isTag(this.$el, 'input');
         },
 
         handler(e) {
@@ -7288,6 +7380,8 @@
 
     boot(UIkit);
 
+    const units = ['days', 'hours', 'minutes', 'seconds'];
+
     var countdown = {
       mixins: [Class],
 
@@ -7301,39 +7395,13 @@
         clsWrapper: '.uk-countdown-%unit%' },
 
 
-      computed: {
-        date(_ref) {let { date } = _ref;
-          return Date.parse(date);
-        },
-
-        days(_ref2, $el) {let { clsWrapper } = _ref2;
-          return $(clsWrapper.replace('%unit%', 'days'), $el);
-        },
-
-        hours(_ref3, $el) {let { clsWrapper } = _ref3;
-          return $(clsWrapper.replace('%unit%', 'hours'), $el);
-        },
-
-        minutes(_ref4, $el) {let { clsWrapper } = _ref4;
-          return $(clsWrapper.replace('%unit%', 'minutes'), $el);
-        },
-
-        seconds(_ref5, $el) {let { clsWrapper } = _ref5;
-          return $(clsWrapper.replace('%unit%', 'seconds'), $el);
-        },
-
-        units() {
-          return ['days', 'hours', 'minutes', 'seconds'].filter((unit) => this[unit]);
-        } },
-
-
       connected() {
+        this.date = Date.parse(this.date);
         this.start();
       },
 
       disconnected() {
         this.stop();
-        this.units.forEach((unit) => empty(this[unit]));
       },
 
       events: [
@@ -7354,22 +7422,37 @@
 
 
 
-      update: {
-        write() {
+      methods: {
+        start() {
+          this.stop();
+          this.update();
+          this.timer = setInterval(this.update, 1000);
+        },
+
+        stop() {
+          clearInterval(this.timer);
+        },
+
+        update() {
           const timespan = getTimeSpan(this.date);
 
-          if (timespan.total <= 0) {
+          if (!this.date || timespan.total <= 0) {
             this.stop();
 
             timespan.days = timespan.hours = timespan.minutes = timespan.seconds = 0;
           }
 
-          for (const unit of this.units) {
+          for (const unit of units) {
+            const el = $(this.clsWrapper.replace('%unit%', unit), this.$el);
+
+            if (!el) {
+              continue;
+            }
+
             let digits = String(Math.floor(timespan[unit]));
 
             digits = digits.length < 2 ? "0" + digits : digits;
 
-            const el = this[unit];
             if (el.textContent !== digits) {
               digits = digits.split('');
 
@@ -7380,24 +7463,6 @@
               digits.forEach((digit, i) => el.children[i].textContent = digit);
             }
           }
-        } },
-
-
-      methods: {
-        start() {
-          this.stop();
-
-          if (this.date && this.units.length) {
-            this.$update();
-            this.timer = setInterval(this.$update, 1000);
-          }
-        },
-
-        stop() {
-          if (this.timer) {
-            clearInterval(this.timer);
-            this.timer = null;
-          }
         } } };
 
 
@@ -7571,7 +7636,7 @@
 
           // Reset to previous state
           nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
-          css(target, assign({ display: 'block' }, targetProps));
+          css(target, { display: 'block', ...targetProps });
 
           // Start transitions on next frame
           requestAnimationFrame(() => {
@@ -7603,15 +7668,13 @@
       const zIndex = css(el, 'zIndex');
 
       return isVisible(el) ?
-      assign(
       {
         display: '',
         opacity: opacity ? css(el, 'opacity') : '0',
         pointerEvents: 'none',
         position: 'absolute',
-        zIndex: zIndex === 'auto' ? index(el) : zIndex },
-
-      getPositionWithMargin(el)) :
+        zIndex: zIndex === 'auto' ? index(el) : zIndex,
+        ...getPositionWithMargin(el) } :
 
       false;
     }
@@ -7795,7 +7858,7 @@
         },
 
         setState(state, animate) {if (animate === void 0) {animate = true;}
-          state = assign({ filter: { '': '' }, sort: [] }, state);
+          state = { filter: { '': '' }, sort: [], ...state };
 
           trigger(this.$el, 'beforeFilter', [this, state]);
 
@@ -7895,7 +7958,7 @@
     }
 
     function sortItems(nodes, sort, order) {
-      return assign([], nodes).sort(
+      return [...nodes].sort(
       (a, b) =>
       data(a, sort).localeCompare(data(b, sort), undefined, { numeric: true }) * (
       order === 'asc' || -1));
@@ -7934,7 +7997,8 @@
       return "scale3d(" + value + ", " + value + ", 1)";
     }
 
-    var Animations$1 = assign({}, Animations$2, {
+    var Animations$1 = {
+      ...Animations$2,
       fade: {
         show() {
           return [{ opacity: 0 }, { opacity: 1 }];
@@ -7966,7 +8030,7 @@
           { opacity: 1 - percent, transform: scale3d(1 - 0.2 * percent) },
           { opacity: percent, transform: scale3d(1 - 0.2 + 0.2 * percent) }];
 
-        } } });
+        } } };
 
     function Transitioner$1(prev, next, dir, _ref) {let { animation, easing } = _ref;
       const { percent, translate, show = noop } = animation;
@@ -8440,12 +8504,6 @@
         } },
 
 
-      events: {
-        itemshown() {
-          this.$update(this.list);
-        } },
-
-
       methods: {
         show(index, force) {if (force === void 0) {force = false;}
           if (this.dragging || !this.length) {
@@ -8527,20 +8585,13 @@
         },
 
         _show(prev, next, force) {
-          this._transitioner = this._getTransitioner(
-          prev,
-          next,
-          this.dir,
-          assign(
-          {
+          this._transitioner = this._getTransitioner(prev, next, this.dir, {
             easing: force ?
             next.offsetWidth < 600 ?
             'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */ :
             'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */ :
-            this.easing },
-
-          this.transitionOptions));
-
+            this.easing,
+            ...this.transitionOptions });
 
 
           if (!force && !prev) {
@@ -8605,7 +8656,7 @@
 
       computed: {
         animation(_ref) {let { animation, Animations } = _ref;
-          return assign(Animations[animation] || Animations.slide, { name: animation });
+          return { ...(Animations[animation] || Animations.slide), name: animation };
         },
 
         transitionOptions() {
@@ -8614,19 +8665,15 @@
 
 
       events: {
-        'itemshow itemhide itemshown itemhidden'(_ref2) {let { target } = _ref2;
-          this.$update(target);
-        },
-
-        beforeitemshow(_ref3) {let { target } = _ref3;
+        beforeitemshow(_ref2) {let { target } = _ref2;
           addClass(target, this.clsActive);
         },
 
-        itemshown(_ref4) {let { target } = _ref4;
+        itemshown(_ref3) {let { target } = _ref3;
           addClass(target, this.clsActivated);
         },
 
-        itemhidden(_ref5) {let { target } = _ref5;
+        itemhidden(_ref4) {let { target } = _ref4;
           removeClass(target, this.clsActive, this.clsActivated);
         } } };
 
@@ -8828,28 +8875,20 @@
           if (type === 'image' || src.match(/\.(avif|jpe?g|a?png|gif|svg|webp)($|\?)/i)) {
             try {
               const { width, height } = await getImage(src, attrs.srcset, attrs.size);
-              this.setItem(
-              item,
-              createEl('img', assign({ src, width, height, alt }, attrs)));
-
+              this.setItem(item, createEl('img', { src, width, height, alt, ...attrs }));
             } catch (e) {
               this.setError(item);
             }
 
             // Video
           } else if (type === 'video' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
-            const video = createEl(
-            'video',
-            assign(
-            {
+            const video = createEl('video', {
               src,
               poster,
               controls: '',
               playsinline: '',
-              'uk-video': "" + this.videoAutoplay },
-
-            attrs));
-
+              'uk-video': "" + this.videoAutoplay,
+              ...attrs });
 
 
             on(video, 'loadedmetadata', () => {
@@ -8862,17 +8901,12 @@
           } else if (type === 'iframe' || src.match(/\.(html|php)($|\?)/i)) {
             this.setItem(
             item,
-            createEl(
-            'iframe',
-            assign(
-            {
+            createEl('iframe', {
               src,
               frameborder: '0',
               allowfullscreen: '',
-              class: 'uk-lightbox-iframe' },
-
-            attrs)));
-
+              class: 'uk-lightbox-iframe',
+              ...attrs }));
 
 
 
@@ -8884,19 +8918,14 @@
           {
             this.setItem(
             item,
-            createEl(
-            'iframe',
-            assign(
-            {
-              src: "https://www.youtube" + (matches[1] || '') + ".com/embed/" +
-              matches[2] + (
+            createEl('iframe', {
+              src: "https://www.youtube" + (matches[1] || '') + ".com/embed/" + matches[2] + (
               matches[3] ? "?" + matches[3] : ''),
-              width: 1920,
-              height: 1080 },
-
-            iframeAttrs,
-            attrs)));
 
+              width: 1920,
+              height: 1080,
+              ...iframeAttrs,
+              ...attrs }));
 
 
 
@@ -8916,19 +8945,14 @@
 
               this.setItem(
               item,
-              createEl(
-              'iframe',
-              assign(
-              {
+              createEl('iframe', {
                 src: "https://player.vimeo.com/video/" + matches[1] + (
                 matches[2] ? "?" + matches[2] : ''),
 
                 width,
-                height },
-
-              iframeAttrs,
-              attrs)));
-
+                height,
+                ...iframeAttrs,
+                ...attrs }));
 
 
             } catch (e) {
@@ -9030,8 +9054,7 @@
             index = findIndex(items, (_ref2) => {let { source: src } = _ref2;return source === src;});
           }
 
-          this.panel =
-          this.panel || this.$create('lightboxPanel', assign({}, this.$props, { items }));
+          this.panel = this.panel || this.$create('lightboxPanel', { ...this.$props, items });
 
           on(this.panel.$el, 'hidden', () => this.panel = false);
 
@@ -9225,7 +9248,7 @@
 
 
       events: {
-        bgimageload() {
+        load() {
           this.$emit();
         } },
 
@@ -9236,50 +9259,44 @@
         },
 
         getCss(percent) {
-          return keys(this.props).reduce(
-          (css, prop) => {
+          const css = { transform: '', filter: '' };
+          for (const prop in this.props) {
             this.props[prop](css, percent);
-            return css;
-          },
-          { transform: '', filter: '' });
-
+          }
+          return css;
         } } };
 
 
 
-    function transformFn(prop, el, steps) {
-      const unit = getUnit(steps) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+    function transformFn(prop, el, stops) {
+      const 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));
       }
 
-      steps = steps.map(toFloat);
-
-      if (steps.length === 1) {
-        steps.unshift(prop === 'scale' ? 1 : 0);
+      if (stops.length === 1) {
+        stops.unshift(prop === 'scale' ? 1 : 0);
       }
 
-      return (css, percent) => {
-        let value = getValue(steps, percent);
-
-        if (startsWith(prop, 'translate')) {
-          value = toFloat(value).toFixed(unit === 'px' ? 0 : 6);
-        }
+      stops = parseStops(stops, transformFn);
 
-        css.transform += " " + prop + "(" + value + unit + ")";
+      return (css, percent) => {
+        css.transform += " " + prop + "(" + getValue(stops, percent) + unit + ")";
       };
     }
 
-    function colorFn(prop, el, steps) {
-      if (steps.length === 1) {
-        steps.unshift(getCssValue(el, prop, ''));
+    function colorFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ''));
       }
 
-      steps = steps.map((step) => parseColor(el, step));
+      stops = parseStops(stops, (stop) => parseColor(el, stop));
 
       return (css, percent) => {
-        const [start, end, p] = getStep(steps, percent);
+        const [start, end, p] = getStop(stops, percent);
         const value = start.
         map((value, i) => {
           value += p * (end[i] - value);
@@ -9299,85 +9316,83 @@
       map(toFloat);
     }
 
-    function filterFn(prop, el, steps) {
-      if (steps.length === 1) {
-        steps.unshift(0);
+    function filterFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(0);
       }
 
-      const unit = getUnit(steps) || { blur: 'px', hue: 'deg' }[prop] || '%';
+      const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
       prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
-      steps = steps.map(toFloat);
+      stops = parseStops(stops);
 
       return (css, percent) => {
-        const value = getValue(steps, percent);
+        const value = getValue(stops, percent);
         css.filter += " " + prop + "(" + (value + unit) + ")";
       };
     }
 
-    function cssPropFn(prop, el, steps) {
-      if (steps.length === 1) {
-        steps.unshift(getCssValue(el, prop, ''));
+    function cssPropFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ''));
       }
 
-      steps = steps.map(toFloat);
+      stops = parseStops(stops);
 
       return (css, percent) => {
-        css[prop] = getValue(steps, percent);
+        css[prop] = getValue(stops, percent);
       };
     }
 
-    function strokeFn(prop, el, steps) {
-      if (steps.length === 1) {
-        steps.unshift(0);
+    function strokeFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(0);
       }
 
-      const unit = getUnit(steps);
-      steps = steps.map(toFloat);
+      const unit = getUnit(stops);
+      const length = getMaxPathLength(el);
+      stops = parseStops(stops.reverse(), (stop) => {
+        stop = toFloat(stop);
+        return unit === '%' ? stop * length / 100 : stop;
+      });
 
-      if (!steps.some((step) => step)) {
+      if (!stops.some((_ref) => {let [value] = _ref;return value;})) {
         return noop;
       }
 
-      const length = getMaxPathLength(el);
       css(el, 'strokeDasharray', length);
 
-      if (unit === '%') {
-        steps = steps.map((step) => step * length / 100);
-      }
-
-      steps = steps.reverse();
-
       return (css, percent) => {
-        css.strokeDashoffset = getValue(steps, percent);
+        css.strokeDashoffset = getValue(stops, percent);
       };
     }
 
-    function backgroundFn(prop, el, steps) {
-      if (steps.length === 1) {
-        steps.unshift(0);
+    function backgroundFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(0);
       }
 
       prop = prop.substr(-1);
       const attr = prop === 'y' ? 'height' : 'width';
-      steps = steps.map((step) => toPx(step, attr, el));
+      stops = parseStops(stops, (stop) => toPx(stop, attr, el));
 
       const bgPos = getCssValue(el, "background-position-" + prop, '');
 
       return getCssValue(el, 'backgroundSize', '') === 'cover' ?
-      backgroundCoverFn(prop, el, steps, bgPos, attr) :
-      setBackgroundPosFn(prop, steps, bgPos);
+      backgroundCoverFn(prop, el, stops, bgPos, attr) :
+      setBackgroundPosFn(prop, stops, bgPos);
     }
 
-    function backgroundCoverFn(prop, el, steps, bgPos, attr) {
+    function backgroundCoverFn(prop, el, stops, bgPos, attr) {
       const dimImage = getBackgroundImageDimensions(el);
 
       if (!dimImage.width) {
         return noop;
       }
 
-      const min = Math.min(...steps);
-      const max = Math.max(...steps);
-      const down = steps.indexOf(min) < steps.indexOf(max);
+      const values = stops.map((_ref2) => {let [value] = _ref2;return value;});
+      const min = Math.min(...values);
+      const max = Math.max(...values);
+      const down = values.indexOf(min) < values.indexOf(max);
 
       const diff = max - min;
       let pos = (down ? -diff : 0) - (down ? min : max);
@@ -9402,7 +9417,7 @@
 
       const dim = Dimensions.cover(dimImage, dimEl);
 
-      const fn = setBackgroundPosFn(prop, steps, pos + "px");
+      const fn = setBackgroundPosFn(prop, stops, pos + "px");
       return (css, percent) => {
         fn(css, percent);
         css.backgroundSize = dim.width + "px " + dim.height + "px";
@@ -9410,9 +9425,9 @@
       };
     }
 
-    function setBackgroundPosFn(prop, steps, pos) {
+    function setBackgroundPosFn(prop, stops, pos) {
       return function (css, percent) {
-        css["background-position-" + prop] = "calc(" + pos + " + " + getValue(steps, percent) + "px)";
+        css["background-position-" + prop] = "calc(" + pos + " + " + getValue(stops, percent) + "px)";
       };
     }
 
@@ -9431,8 +9446,9 @@
         if (!image.naturalWidth) {
           image.onload = () => {
             dimensions[src] = toDimensions(image);
-            trigger(el, 'bgimageload');
+            trigger(el, 'load');
           };
+          return toDimensions(image);
         }
       }
 
@@ -9446,27 +9462,71 @@
 
     }
 
-    function getStep(steps, percent) {
-      const count = steps.length - 1;
-      const index = Math.min(Math.floor(count * percent), count - 1);
+    function parseStops(stops, fn) {if (fn === void 0) {fn = toFloat;}
+      const result = [];
+      const { length } = stops;
+      let nullIndex = 0;
+      for (let i = 0; i < length; i++) {
+        let [value, percent] = isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
+        value = fn(value);
+        percent = percent ? toFloat(percent) / 100 : null;
+
+        if (i === 0) {
+          if (percent === null) {
+            percent = 0;
+          } else if (percent) {
+            result.push([value, 0]);
+          }
+        } else if (i === length - 1) {
+          if (percent === null) {
+            percent = 1;
+          } else if (percent !== 1) {
+            result.push([value, percent]);
+            percent = 1;
+          }
+        }
+
+        result.push([value, percent]);
+
+        if (percent === null) {
+          nullIndex++;
+        } else if (nullIndex) {
+          const leftPercent = result[i - nullIndex - 1][1];
+          const p = (percent - leftPercent) / (nullIndex + 1);
+          for (let j = nullIndex; j > 0; j--) {
+            result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
+          }
+
+          nullIndex = 0;
+        }
+      }
+
+      return result;
+    }
+
+    function getStop(stops, percent) {
+      const index = findIndex(stops.slice(1), (_ref3) => {let [, targetPercent] = _ref3;return percent <= targetPercent;}) + 1;
+      return [
+      stops[index - 1][0],
+      stops[index][0],
+      (percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])];
 
-      return steps.
-      slice(index, index + 2).
-      concat(percent === 1 ? 1 : percent % (1 / count) * count);
     }
 
-    function getValue(steps, percent) {
-      const [start, end, p] = getStep(steps, percent);
+    function getValue(stops, percent) {
+      const [start, end, p] = getStop(stops, percent);
       return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
     }
 
-    function getUnit(steps, defaultUnit) {
-      return (
-        steps.reduce(
-        (unit, step) => unit || isString(step) && step.replace(/[\d-]/g, '').trim(),
-        '') ||
-        defaultUnit);
-
+    const unitRe = /^-?\d+([^\s]*)/;
+    function getUnit(stops, defaultUnit) {
+      for (const stop of stops) {
+        const match = stop.match == null ? void 0 : stop.match(unitRe);
+        if (match) {
+          return match[1];
+        }
+      }
+      return defaultUnit;
     }
 
     function getCssValue(el, prop, value) {
@@ -9578,6 +9638,13 @@
 
         events: ['resize'] } };
 
+    var SliderPreload = {
+      mixins: [Lazyload],
+
+      connected() {
+        this.lazyload(this.slides, this.getAdjacentSlides);
+      } };
+
     function Transitioner (prev, next, dir, _ref) {let { center, easing, list } = _ref;
       const deferred = new Deferred();
 
@@ -9744,7 +9811,7 @@
     }
 
     var slider = {
-      mixins: [Class, Slider, SliderReactive],
+      mixins: [Class, Slider, SliderReactive, SliderPreload],
 
       props: {
         center: Boolean,
@@ -9796,48 +9863,39 @@
           return ~index ? index : this.length - 1;
         },
 
-        sets(_ref2) {let { sets } = _ref2;
-          if (!sets) {
+        sets(_ref2) {let { sets: enabled } = _ref2;
+          if (!enabled) {
             return;
           }
 
-          const width = dimensions$1(this.list).width / (this.center ? 2 : 1);
-
           let left = 0;
-          let leftCenter = width;
-          let slideLeft = 0;
+          const sets = [];
+          const width = dimensions$1(this.list).width;
+          for (let i in this.slides) {
+            const slideWidth = dimensions$1(this.slides[i]).width;
 
-          sets = sortBy$1(this.slides, 'offsetLeft').reduce((sets, slide, i) => {
-            const slideWidth = dimensions$1(slide).width;
-            const slideRight = slideLeft + slideWidth;
-
-            if (slideRight > left) {
-              if (!this.center && i > this.maxIndex) {
-                i = this.maxIndex;
-              }
+            if (left + slideWidth > width) {
+              left = 0;
+            }
 
-              if (!includes(sets, i)) {
-                const cmp = this.slides[i + 1];
-                if (
-                this.center &&
-                cmp &&
-                slideWidth < leftCenter - dimensions$1(cmp).width / 2)
-                {
-                  leftCenter -= slideWidth;
-                } else {
-                  leftCenter = width;
-                  sets.push(i);
-                  left = slideLeft + width + (this.center ? slideWidth / 2 : 0);
-                }
+            if (this.center) {
+              if (
+              left < width / 2 &&
+              left + slideWidth + dimensions$1(this.slides[+i + 1]).width / 2 > width / 2)
+              {
+                sets.push(+i);
+                left = width / 2 - slideWidth / 2;
               }
+            } else if (left === 0) {
+              sets.push(Math.min(+i, this.maxIndex));
             }
 
-            slideLeft += slideWidth;
+            left += slideWidth;
+          }
 
+          if (sets.length) {
             return sets;
-          }, []);
-
-          return !isEmpty(sets) && sets;
+          }
         },
 
         transitionOptions() {
@@ -9869,15 +9927,7 @@
             this._translate(1);
           }
 
-          const actives = this._getTransitioner(this.index).getActives();
-          const activeClasses = [
-          this.clsActive,
-          (!this.sets || includes(this.sets, toFloat(this.index))) && this.clsActivated ||
-          ''];
-
-          for (const slide of this.slides) {
-            toggleClass(slide, activeClasses, includes(actives, slide));
-          }
+          this.updateActiveClasses();
         },
 
         events: ['resize'] },
@@ -9925,6 +9975,10 @@
           if (~this.prevIndex) {
             addClass(this._getTransitioner().getItemIn(), this.clsActive);
           }
+        },
+
+        itemshown() {
+          this.updateActiveClasses();
         } },
 
 
@@ -9962,6 +10016,18 @@
           }
         },
 
+        updateActiveClasses() {
+          const actives = this._getTransitioner(this.index).getActives();
+          const activeClasses = [
+          this.clsActive,
+          (!this.sets || includes(this.sets, toFloat(this.index))) && this.clsActivated ||
+          ''];
+
+          for (const slide of this.slides) {
+            toggleClass(slide, activeClasses, includes(actives, slide));
+          }
+        },
+
         getValidIndex(index, prevIndex) {if (index === void 0) {index = this.index;}if (prevIndex === void 0) {prevIndex = this.prevIndex;}
           index = this.getIndex(index, prevIndex);
 
@@ -9981,6 +10047,25 @@
           } while (index !== prev);
 
           return index;
+        },
+
+        getAdjacentSlides() {
+          const { width } = dimensions$1(this.list);
+          const left = -width;
+          const right = width * 2;
+          const slideWidth = dimensions$1(this.slides[this.index]).width;
+          const slideLeft = this.center ? width / 2 - slideWidth / 2 : 0;
+          const slides = new Set();
+          for (const i of [-1, 1]) {
+            let currentLeft = slideLeft + (i > 0 ? slideWidth : 0);
+            let j = 0;
+            do {
+              const slide = this.slides[this.getIndex(this.index + i + j++ * i)];
+              currentLeft += dimensions$1(slide).width * i;
+              slides.add(slide);
+            } while (this.slides.length > j && currentLeft > left && currentLeft < right);
+          }
+          return Array.from(slides);
         } } };
 
 
@@ -10067,7 +10152,8 @@
       return isIn(type) ^ dir < 0 ? percent : 1 - percent;
     }
 
-    var Animations = assign({}, Animations$2, {
+    var Animations = {
+      ...Animations$2,
       fade: {
         show() {
           return [{ opacity: 0, zIndex: 0 }, { zIndex: -1 }];
@@ -10156,10 +10242,10 @@
           { transform: translate(-30 * percent), zIndex: -1 },
           { transform: translate(100 * (1 - percent)), zIndex: 0 }];
 
-        } } });
+        } } };
 
     var slideshow = {
-      mixins: [Class, Slideshow, SliderReactive],
+      mixins: [Class, Slideshow, SliderReactive, SliderPreload],
 
       props: {
         ratio: String,
@@ -10202,7 +10288,13 @@
           height > 0 && css(this.list, 'minHeight', height);
         },
 
-        events: ['resize'] } };
+        events: ['resize'] },
+
+
+      methods: {
+        getAdjacentSlides() {
+          return [1, -1].map((i) => this.slides[this.getIndex(this.index + i)]);
+        } } };
 
     var sortable = {
       mixins: [Class, Animate],
@@ -10375,7 +10467,7 @@
 
           this.touched = new Set([this]);
           this.placeholder = placeholder;
-          this.origin = assign({ target, index: index(placeholder) }, this.pos);
+          this.origin = { target, index: index(placeholder), ...this.pos };
 
           on(document, pointerMove, this.move);
           on(document, pointerUp, this.end);
@@ -10916,6 +11008,7 @@
     }
 
     function chunk(files, size) {
+      files = toArray(files);
       const chunks = [];
       for (let i = 0; i < files.length; i += size) {
         chunks.push(files.slice(i, i + size));