uikit 3.11.2-dev.7dd548556 → 3.11.2-dev.92f357b93

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.11.2-dev.7dd548556 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.11.2-dev.92f357b93 | 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,
@@ -304,17 +305,17 @@
       if (isUndefined(value)) {var _toNode;
         return (_toNode = toNode(element)) == null ? void 0 : _toNode.getAttribute(name);
       } else {
-        toNodes(element).forEach((element) => {
+        for (const el of toNodes(element)) {
           if (isFunction(value)) {
-            value = value.call(element, attr(element, name));
+            value = value.call(el, attr(el, name));
           }
 
           if (value === null) {
-            removeAttr(element, name);
+            removeAttr(el, name);
           } else {
-            element.setAttribute(name, value);
+            el.setAttribute(name, value);
           }
-        });
+        }
       }
     }
 
@@ -323,10 +324,12 @@
     }
 
     function removeAttr(element, name) {
-      element = toNodes(element);
-      name.split(' ').forEach((name) =>
-      element.forEach((element) => element.hasAttribute(name) && element.removeAttribute(name)));
-
+      const elements = toNodes(element);
+      for (const attribute of name.split(' ')) {
+        for (const element of elements) {
+          element.removeAttribute(attribute);
+        }
+      }
     }
 
     function data(element, attribute) {
@@ -337,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,
@@ -449,12 +439,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'));
     }
@@ -463,6 +447,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;
@@ -507,11 +502,6 @@
       }
     }
 
-    const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
-    const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
-
-    const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
-
     const selectorRe = /.*?[^\\](?:,|$)/g;
 
     const splitSelector = memoize((selector) =>
@@ -537,13 +527,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];}
@@ -686,17 +671,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)).
@@ -775,7 +757,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);
 
@@ -801,9 +784,8 @@
           priority = value;
           each(property, (value, property) => css(element, property, value, priority));
         }
-
-        return element;
-      })[0];
+      }
+      return elements[0];
     }
 
     function getStyles(element, pseudoElt) {
@@ -930,16 +912,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 });
 
       })));
 
@@ -1214,6 +1191,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, '');
     }
@@ -1222,34 +1203,20 @@
       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;
-    }
+    const replaceChildren = applyFn('replaceChildren');
+    const prepend = applyFn('prepend');
+    const append = applyFn('append');
+    const before = applyFn('before');
+    const after = applyFn('after');
 
-    function append(parent, element) {
-      const nodes = $$(element);
-      $(parent).append(...nodes);
-      return nodes;
-    }
-
-    function before(ref, element) {
-      const nodes = $$(element);
-      $(ref).before(...nodes);
-      return nodes;
-    }
-
-    function after(ref, element) {
-      const nodes = $$(element);
-      $(ref).after(...nodes);
-      return nodes;
+    function applyFn(fn) {
+      return function (ref, element) {
+        const nodes = toNodes(isString(element) ? fragment(element) : element);
+        if (nodes.length) {
+          $(ref)[fn](...nodes);
+        }
+        return unwrapSingle(nodes);
+      };
     }
 
     function remove$1(element) {
@@ -1282,29 +1249,21 @@
       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+|!)[^>]*>/;
-    const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
-
     function fragment(html) {
-      const matches = singleTagRe.exec(html);
-      if (matches) {
-        return document.createElement(matches[1]);
-      }
-
-      const container = document.createElement('div');
-      if (fragmentRe.test(html)) {
-        container.insertAdjacentHTML('beforeend', html.trim());
-      } else {
-        container.textContent = html;
+      const template = document.createElement('template');
+      template.innerHTML = html.trim();
+      const nodes = toNodes(template.content.childNodes);
+      for (const node of nodes) {
+        document.adoptNode(node);
       }
+      return unwrapSingle(nodes);
+    }
 
-      return container.childNodes.length > 1 ? toNodes(container.childNodes) : container.firstChild;
+    function unwrapSingle(nodes) {
+      return nodes.length > 1 ? nodes : nodes[0];
     }
 
     function apply(node, fn) {
@@ -1333,6 +1292,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
@@ -1524,7 +1496,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
@@ -1664,11 +1636,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) {
@@ -1688,7 +1660,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
       }
@@ -1980,14 +1952,14 @@
               if (newVal >= boundary[align] && newVal + dim[prop] <= boundary[alignFlip]) {
                 position[align] = newVal;
 
-                ['element', 'target'].forEach((el) => {
+                for (const el of ['element', 'target']) {
                   if (elemOffset) {
                     flipped[el][dir] =
                     flipped[el][dir] === dirs[prop][1] ?
                     dirs[prop][2] :
                     dirs[prop][1];
                   }
-                });
+                }
 
                 return true;
               }
@@ -2068,6 +2040,7 @@
         flipPosition: flipPosition,
         toPx: toPx,
         ready: ready,
+        isTag: isTag,
         empty: empty,
         html: html,
         replaceChildren: replaceChildren,
@@ -2362,7 +2335,7 @@
         const {
           $options: { computed } } =
         this;
-        const values = assign({}, this._computeds);
+        const values = { ...this._computeds };
         this._computeds = {};
 
         for (const key in computed) {
@@ -2449,9 +2422,9 @@
         }
       };
 
-      UIkit.prototype._initEvents = function () {var _this$$options$events;
+      UIkit.prototype._initEvents = function () {
         this._events = [];
-        (_this$$options$events = this.$options.events) == null ? void 0 : _this$$options$events.forEach((event) => {
+        for (const event of this.$options.events || []) {
           if (hasOwn(event, 'handler')) {
             registerEvent(this, event);
           } else {
@@ -2459,7 +2432,7 @@
               registerEvent(this, event[key], key);
             }
           }
-        });
+        }
       };
 
       UIkit.prototype._unbindEvents = function () {
@@ -2547,7 +2520,7 @@
         el = isFunction(el) ? el.call(component) : el || component.$el;
 
         if (isArray(el)) {
-          el.forEach((el) => registerEvent(component, assign({}, event, { el }), key));
+          el.forEach((el) => registerEvent(component, { ...event, el }, key));
           return;
         }
 
@@ -2781,7 +2754,7 @@
           }
         };
 
-        const opt = isPlainObject(options) ? assign({}, options) : options.options;
+        const opt = isPlainObject(options) ? { ...options } : options.options;
 
         opt.name = name;
 
@@ -2834,7 +2807,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.11.2-dev.7dd548556';
+    UIkit.version = '3.11.2-dev.92f357b93';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3157,7 +3130,7 @@
         show ?
         Transition.start(
         el,
-        assign({}, initProps, { overflow: 'hidden', height: endHeight }),
+        { ...initProps, overflow: 'hidden', height: endHeight },
         Math.round(duration * (1 - currentHeight / endHeight)),
         transition) :
 
@@ -3277,37 +3250,37 @@
             return;
           }
 
-          items.forEach((el) =>
-          this.toggleElement(el, !hasClass(el, this.clsOpen), async (el, show) => {
-            toggleClass(el, this.clsOpen, show);
-            attr($(this.$props.toggle, el), 'aria-expanded', show);
+          for (const el of items) {
+            this.toggleElement(el, !hasClass(el, this.clsOpen), async (el, show) => {
+              toggleClass(el, this.clsOpen, show);
+              attr($(this.$props.toggle, el), 'aria-expanded', show);
 
-            const content = $("" + (el._wrapper ? '> * ' : '') + this.content, el);
+              const content = $("" + (el._wrapper ? '> * ' : '') + this.content, el);
 
-            if (animate === false || !this.hasTransition) {
-              hide(content, !show);
-              return;
-            }
+              if (animate === false || !this.hasTransition) {
+                hide(content, !show);
+                return;
+              }
 
-            if (!el._wrapper) {
-              el._wrapper = wrapAll(content, "<div" + (show ? ' hidden' : '') + ">");
-            }
+              if (!el._wrapper) {
+                el._wrapper = wrapAll(content, "<div" + (show ? ' hidden' : '') + ">");
+              }
 
-            hide(content, false);
-            await toggleHeight(this)(el._wrapper, show);
-            hide(content, !show);
+              hide(content, false);
+              await toggleHeight(this)(el._wrapper, show);
+              hide(content, !show);
 
-            delete el._wrapper;
-            unwrap(content);
+              delete el._wrapper;
+              unwrap(content);
 
-            if (show) {
-              const toggle = $(this.$props.toggle, el);
-              if (!isInView(toggle)) {
-                scrollIntoView(toggle, { offset: this.offset });
+              if (show) {
+                const toggle = $(this.$props.toggle, el);
+                if (!isInView(toggle)) {
+                  scrollIntoView(toggle, { offset: this.offset });
+                }
               }
-            }
-          }));
-
+            });
+          }
         } } };
 
 
@@ -3329,7 +3302,7 @@
         animation: [true],
         selClose: '.uk-alert-close',
         duration: 150,
-        hideProps: assign({ opacity: 0 }, Togglable.data.hideProps) },
+        hideProps: { opacity: 0, ...Togglable.data.hideProps } },
 
 
       events: [
@@ -4290,9 +4263,9 @@
         },
 
         write(_ref2) {let { rows } = _ref2;
-          rows.forEach((_ref3) => {let { heights, elements } = _ref3;return (
-              elements.forEach((el, i) => css(el, 'minHeight', heights[i])));});
-
+          for (const { heights, elements } of rows) {
+            elements.forEach((el, i) => css(el, 'minHeight', heights[i]));
+          }
         },
 
         events: ['resize'] } };
@@ -4486,6 +4459,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.');
         },
 
@@ -4585,7 +4564,7 @@
     }
 
     function insertSVG(el, root) {
-      if (isVoidElement(root) || root.tagName === 'CANVAS') {
+      if (isVoidElement(root) || isTag(root, 'canvas')) {
         root.hidden = true;
 
         const next = root.nextElementSibling;
@@ -4597,11 +4576,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) {
@@ -4788,120 +4763,95 @@
       return isRtl ? swap(swap(icon, 'left', 'right'), 'previous', 'next') : icon;
     }
 
+    const nativeLazyLoad = ('loading' in HTMLImageElement.prototype);
+    const 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,
+        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');
-        },
+          } } },
 
-        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' || !window.IntersectionObserver || !nativeIsIntersecting) {
+          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);
 
+        const rootMargin = toPx(this.offsetTop, 'height') + "px " + toPx(
+        this.offsetLeft,
+        'width') + "px";
 
-        requestAnimationFrame(this.observe);
-      },
+        this.observer = new IntersectionObserver(
+        (entries) => {
+          if (entries.some((entry) => entry.isIntersecting)) {
+            this.load();
+            this.observer.disconnect();
+          }
+        },
+        { rootMargin });
 
-      disconnected() {
-        this.observer && this.observer.disconnect();
+        this.observe();
       },
 
-      update: {
-        read(_ref8) {let { image } = _ref8;
-          if (!this.observer) {
-            return false;
-          }
+      disconnected() {var _this$observer;
+        if (this._data.image) {
+          this._data.image.onload = '';
+        }
 
-          if (!image && document.readyState === 'complete') {
-            this.load(this.observer.takeRecords());
-          }
+        (_this$observer = this.observer) == null ? void 0 : _this$observer.disconnect();
+      },
 
-          if (this.isImg) {
+      update: {
+        write(store) {
+          if (!this.observer || isImg(this.$el)) {
             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");
             }
           }
         },
@@ -4910,40 +4860,35 @@
 
 
       methods: {
-        load(entries) {
-          // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
-          if (
-          !entries.some((entry) => isUndefined(entry.isIntersecting) || entry.isIntersecting))
-          {
-            return;
+        load() {
+          if (this._data.image) {
+            return this._data.image;
           }
 
-          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)));
-
+          const image = isImg(this.$el) ?
+          this.$el :
+          getImageFromElement(this.$el, this.dataSrc, this.sources);
 
-          this.observer.disconnect();
+          removeAttr(image, 'loading');
+          setSrcAttrs(this.$el, image.currentSrc);
+          return this._data.image = image;
         },
 
         observe() {
           if (this._connected && !this._data.image) {
-            this.target.forEach((el) => this.observer.observe(el));
+            for (const el of this.target) {
+              this.observer.observe(el);
+            }
           }
         } } };
 
 
 
-    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) {
@@ -4953,16 +4898,60 @@
       }
     }
 
-    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;
@@ -5002,24 +4991,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 = {
@@ -5475,7 +5458,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();
@@ -5589,12 +5572,12 @@
             const dropdowns = $$("." + clsDrop, $el);
 
             if (this.dropContainer !== $el) {
-              $$("." + clsDrop, this.dropContainer).forEach((el) => {var _this$getDropdown;
+              for (const el of $$("." + clsDrop, this.dropContainer)) {var _this$getDropdown;
                 const target = (_this$getDropdown = this.getDropdown(el)) == null ? void 0 : _this$getDropdown.target;
                 if (!includes(dropdowns, el) && target && within(target, this.$el)) {
                   dropdowns.push(el);
                 }
-              });
+              }
             }
 
             return dropdowns;
@@ -5604,10 +5587,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 });
 
 
           },
@@ -6296,10 +6280,10 @@
 
 
       disconnected() {
-        this.elements.forEach((el) => {
+        for (const el of this.elements) {
           removeClass(el, this.inViewClass, el[stateKey] ? el[stateKey].cls : '');
           delete el[stateKey];
-        });
+        }
       },
 
       update: [
@@ -6314,17 +6298,17 @@
             return false;
           }
 
-          this.elements.forEach((el) => {
+          for (const el of this.elements) {
             if (!el[stateKey]) {
               el[stateKey] = { cls: data(el, 'uk-scrollspy-class') || this.cls };
             }
 
             el[stateKey].show = isInView(el, this.offsetTop, this.offsetLeft);
-          });
+          }
         },
 
         write(data) {
-          this.elements.forEach((el) => {
+          for (const el of this.elements) {
             const state = el[stateKey];
 
             if (state.show && !state.inview && !state.queued) {
@@ -6342,7 +6326,7 @@
             } else if (!state.show && state.inview && !state.queued && this.repeat) {
               this.toggle(el, false);
             }
-          });
+          }
         },
 
         events: ['scroll', 'resize'] }],
@@ -6645,7 +6629,7 @@
             margin,
             width: dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el).
             width,
-            top: offsetPosition(this.placeholder)[0] };
+            top: offsetPosition(referenceElement)[0] };
 
         },
 
@@ -7123,7 +7107,7 @@
         name: 'keydown',
 
         filter() {
-          return includes(this.mode, 'click') && this.$el.tagName !== 'INPUT';
+          return includes(this.mode, 'click') && isTag(this.$el, 'input');
         },
 
         handler(e) {
@@ -7205,10 +7189,10 @@
           const leaving = this.target.filter((el) => hasClass(el, this.clsLeave));
 
           if (leaving.length) {
-            this.target.forEach((el) => {
+            for (const el of this.target) {
               const isLeaving = includes(leaving, el);
               this.toggleElement(el, isLeaving, isLeaving);
-            });
+            }
             return;
           }