uikit 3.14.3-dev.5325d42a0 → 3.14.4-dev.008162cc3

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.3-dev.5325d42a0 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.4-dev.008162cc3 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1060,13 +1060,13 @@
     }
 
     function offsetPosition(element) {
-      const offset = [0, 0];
-
       element = toNode(element);
 
-      do {
-        offset[0] += element.offsetTop;
-        offset[1] += element.offsetLeft;
+      const offset = [element.offsetTop, element.offsetLeft];
+
+      while (element = element.offsetParent) {
+        offset[0] += element.offsetTop + toFloat(css(element, "borderTopWidth"));
+        offset[1] += element.offsetLeft + toFloat(css(element, "borderLeftWidth"));
 
         if (css(element, 'position') === 'fixed') {
           const win = toWindow(element);
@@ -1074,7 +1074,7 @@
           offset[1] += win.scrollX;
           return offset;
         }
-      } while (element = element.offsetParent);
+      }
 
       return offset;
     }
@@ -1293,9 +1293,9 @@
     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 pointerDown$1 = hasPointerEvents ? 'pointerdown' : hasTouch ? 'touchstart' : 'mousedown';
+    const pointerMove$1 = hasPointerEvents ? 'pointermove' : hasTouch ? 'touchmove' : 'mousemove';
+    const pointerUp$1 = hasPointerEvents ? 'pointerup' : hasTouch ? 'touchend' : 'mouseup';
     const pointerEnter = hasPointerEvents ? 'pointerenter' : hasTouch ? '' : 'mouseenter';
     const pointerLeave = hasPointerEvents ? 'pointerleave' : hasTouch ? '' : 'mouseleave';
     const pointerCancel = hasPointerEvents ? 'pointercancel' : 'touchcancel';
@@ -1795,20 +1795,6 @@
 
     }
 
-    function scrollTop(element, top) {
-      if (isWindow(element) || isDocument(element)) {
-        element = scrollingElement(element);
-      } else {
-        element = toNode(element);
-      }
-
-      if (isUndefined(top)) {
-        return element.scrollTop;
-      } else {
-        element.scrollTop = top;
-      }
-    }
-
     function scrollIntoView(element, _temp) {let { offset: offsetBy = 0 } = _temp === void 0 ? {} : _temp;
       const parents = isVisible(element) ? scrollParents(element) : [];
       return parents.reduce(
@@ -1850,7 +1836,7 @@
           (function step() {
             const percent = ease(clamp((Date.now() - start) / duration));
 
-            scrollTop(element, scroll + top * percent);
+            element.scrollTop = scroll + top * percent;
 
             // scroll more if we have not reached our destination
             if (percent === 1) {
@@ -1911,18 +1897,33 @@
     }
 
     function offsetViewport(scrollElement) {
-      let viewportElement = getViewport$1(scrollElement);
+      const window = toWindow(scrollElement);
+      const {
+        document: { body, documentElement } } =
+      window;
+      let viewportElement =
+      scrollElement === scrollingElement(scrollElement) || scrollElement === body ?
+      window :
+      scrollElement;
+
+      const { visualViewport } = window;
+      if (isWindow(viewportElement) && visualViewport) {
+        let { height, width, scale, pageTop: top, pageLeft: left } = visualViewport;
+        height = Math.round(height * scale);
+        width = Math.round(width * scale);
+        return { height, width, top, left, bottom: top + height, right: left + width };
+      }
 
       let rect = offset(viewportElement);
       for (let [prop, dir, start, end] of [
       ['width', 'x', 'left', 'right'],
       ['height', 'y', 'top', 'bottom']])
       {
-        if (!isWindow(viewportElement)) {
-          rect[start] += toFloat(css(viewportElement, "border" + ucfirst(start) + "Width"));
-        } else {
+        if (isWindow(viewportElement)) {
           // iOS 12 returns <body> as scrollingElement
-          viewportElement = viewportElement.document.documentElement;
+          viewportElement = documentElement;
+        } else {
+          rect[start] += toFloat(css(viewportElement, "border" + ucfirst(start) + "Width"));
         }
         rect[prop] = rect[dir] = viewportElement["client" + ucfirst(prop)];
         rect[end] = rect[prop] + rect[start];
@@ -1934,10 +1935,6 @@
       return toWindow(element).document.scrollingElement;
     }
 
-    function getViewport$1(scrollElement) {
-      return scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
-    }
-
     const dirs = [
     ['width', 'x', 'left', 'right'],
     ['height', 'y', 'top', 'bottom']];
@@ -2094,6 +2091,8 @@
               if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
                 return newPos;
               }
+
+              continue;
             }
           }
 
@@ -2194,9 +2193,9 @@
         inBrowser: inBrowser,
         isRtl: isRtl,
         hasTouch: hasTouch,
-        pointerDown: pointerDown,
-        pointerMove: pointerMove,
-        pointerUp: pointerUp,
+        pointerDown: pointerDown$1,
+        pointerMove: pointerMove$1,
+        pointerUp: pointerUp$1,
         pointerEnter: pointerEnter,
         pointerLeave: pointerLeave,
         pointerCancel: pointerCancel,
@@ -2287,7 +2286,6 @@
         getCssVar: getCssVar,
         propName: propName,
         isInView: isInView,
-        scrollTop: scrollTop,
         scrollIntoView: scrollIntoView,
         scrolledOver: scrolledOver,
         scrollParents: scrollParents,
@@ -2950,7 +2948,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.14.3-dev.5325d42a0';
+    UIkit.version = '3.14.4-dev.008162cc3';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3099,11 +3097,6 @@
               return Promise.reject();
             }
 
-            if (!animate) {
-              Animation.cancel(el);
-              Transition.cancel(el);
-            }
-
             const promise = (
             isFunction(animate) ?
             animate :
@@ -3692,6 +3685,9 @@
             offset = offset.reverse();
           }
 
+          const [scrollElement] = scrollParents(element, /auto|scroll/);
+          const { scrollTop, scrollLeft } = scrollElement;
+
           // Ensure none positioned element does not generate scrollbars
           const elDim = dimensions$1(element);
           css(element, { top: -elDim.height, left: -elDim.width });
@@ -3703,6 +3699,10 @@
             flip: this.flip,
             viewportOffset: this.getViewportOffset(element) });
 
+
+          // Restore scroll position
+          scrollElement.scrollTop = scrollTop;
+          scrollElement.scrollLeft = scrollLeft;
         },
 
         getPositionOffset(element) {
@@ -3729,64 +3729,44 @@
           return toPx(getCssVar('position-viewport-offset', element));
         } } };
 
-    let active$1;
-
-    var drop = {
-      mixins: [Container, Lazyload, Position, Togglable],
+    const active$1 = [];
 
-      args: 'pos',
+    var Modal = {
+      mixins: [Class, Container, Togglable],
 
       props: {
-        mode: 'list',
-        toggle: Boolean,
-        boundary: Boolean,
-        boundaryAlign: Boolean,
-        delayShow: Number,
-        delayHide: Number,
-        display: String,
-        clsDrop: String,
-        animateOut: Boolean },
+        selPanel: String,
+        selClose: String,
+        escClose: Boolean,
+        bgClose: Boolean,
+        stack: Boolean },
 
 
       data: {
-        mode: ['click', 'hover'],
-        toggle: '- *',
-        boundary: true,
-        boundaryAlign: false,
-        delayShow: 0,
-        delayHide: 800,
-        display: null,
-        clsDrop: false,
-        animation: ['uk-animation-fade'],
         cls: 'uk-open',
-        container: false,
-        animateOut: false },
+        escClose: true,
+        bgClose: true,
+        overlay: true,
+        stack: false },
 
 
-      created() {
-        this.tracker = new MouseTracker();
-      },
+      computed: {
+        panel(_ref, $el) {let { selPanel } = _ref;
+          return $(selPanel, $el);
+        },
 
-      beforeConnect() {
-        this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
-      },
+        transitionElement() {
+          return this.panel;
+        },
 
-      connected() {
-        addClass(this.$el, this.clsDrop);
+        bgClose(_ref2) {let { bgClose } = _ref2;
+          return bgClose && this.panel;
+        } },
 
-        if (this.toggle && !this.target) {
-          this.target = this.$create('toggle', query(this.toggle, this.$el), {
-            target: this.$el,
-            mode: this.mode }).
-          $el;
-          attr(this.target, 'aria-haspopup', true);
-          this.lazyload(this.target);
-        }
-      },
 
-      disconnected() {
-        if (this.isActive()) {
-          active$1 = null;
+      beforeDisconnect() {
+        if (includes(active$1, this)) {
+          this.toggleElement(this.$el, false, false);
         }
       },
 
@@ -3795,767 +3775,825 @@
         name: 'click',
 
         delegate() {
-          return "." + this.clsDrop + "-close";
+          return this.selClose;
         },
 
         handler(e) {
           e.preventDefault();
-          this.hide(false);
+          this.hide();
         } },
 
 
       {
-        name: 'click',
+        name: 'toggle',
 
-        delegate() {
-          return 'a[href^="#"]';
-        },
+        self: true,
 
-        handler(_ref) {let { defaultPrevented, current: { hash } } = _ref;
-          if (!defaultPrevented && hash && !within(hash, this.$el)) {
-            this.hide(false);
+        handler(e) {
+          if (e.defaultPrevented) {
+            return;
           }
-        } },
 
+          e.preventDefault();
 
-      {
-        name: 'beforescroll',
-
-        handler() {
-          this.hide(false);
+          if (this.isToggled() === includes(active$1, this)) {
+            this.toggle();
+          }
         } },
 
 
       {
-        name: 'toggle',
+        name: 'beforeshow',
 
         self: true,
 
-        handler(e, toggle) {
-          e.preventDefault();
+        handler(e) {
+          if (includes(active$1, this)) {
+            return false;
+          }
 
-          if (this.isToggled()) {
-            this.hide(false);
+          if (!this.stack && active$1.length) {
+            Promise.all(active$1.map((modal) => modal.hide())).then(this.show);
+            e.preventDefault();
           } else {
-            this.show(toggle == null ? void 0 : toggle.$el, false);
+            active$1.push(this);
           }
         } },
 
 
       {
-        name: 'toggleshow',
+        name: 'show',
 
         self: true,
 
-        handler(e, toggle) {
-          e.preventDefault();
-          this.show(toggle == null ? void 0 : toggle.$el);
-        } },
-
-
-      {
-        name: 'togglehide',
+        handler() {
+          once(
+          this.$el,
+          'hide',
+          on(document, 'focusin', (e) => {
+            if (last(active$1) === this && !within(e.target, this.$el)) {
+              this.$el.focus();
+            }
+          }));
 
-        self: true,
 
-        handler(e) {
-          e.preventDefault();
-          if (!matches(this.$el, ':focus,:hover')) {
-            this.hide();
+          if (this.overlay) {
+            once(this.$el, 'hide', preventOverscroll(this.$el));
+            once(this.$el, 'hide', preventBackgroundScroll());
           }
-        } },
 
+          if (this.stack) {
+            css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active$1.length);
+          }
 
-      {
-        name: pointerEnter + " focusin",
+          addClass(document.documentElement, this.clsPage);
 
-        filter() {
-          return includes(this.mode, 'hover');
-        },
+          if (this.bgClose) {
+            once(
+            this.$el,
+            'hide',
+            on(document, pointerDown$1, (_ref3) => {let { target } = _ref3;
+              if (
+              last(active$1) !== this ||
+              this.overlay && !within(target, this.$el) ||
+              within(target, this.panel))
+              {
+                return;
+              }
 
-        handler(e) {
-          if (!isTouch(e)) {
-            this.clearTimers();
-          }
-        } },
+              once(
+              document,
+              pointerUp$1 + " " + pointerCancel + " scroll",
+              (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
+                if (
+                !defaultPrevented &&
+                type === pointerUp$1 &&
+                target === newTarget)
+                {
+                  this.hide();
+                }
+              },
+              true);
 
+            }),
+            { self: true });
 
-      {
-        name: pointerLeave + " focusout",
+          }
 
-        filter() {
-          return includes(this.mode, 'hover');
-        },
+          if (this.escClose) {
+            once(
+            this.$el,
+            'hide',
+            on(document, 'keydown', (e) => {
+              if (e.keyCode === 27 && last(active$1) === this) {
+                this.hide();
+              }
+            }),
+            { self: true });
 
-        handler(e) {
-          if (!isTouch(e) && e.relatedTarget) {
-            this.hide();
           }
         } },
 
 
       {
-        name: 'toggled',
+        name: 'shown',
 
         self: true,
 
-        handler(e, toggled) {
-          if (!toggled) {
-            return;
+        handler() {
+          if (!isFocusable(this.$el)) {
+            attr(this.$el, 'tabindex', '-1');
           }
 
-          this.clearTimers();
-          this.position();
+          if (!$(':focus', this.$el)) {
+            this.$el.focus();
+          }
         } },
 
 
       {
-        name: 'show',
+        name: 'hidden',
 
         self: true,
 
         handler() {
-          active$1 = this;
-
-          this.tracker.init();
+          if (includes(active$1, this)) {
+            active$1.splice(active$1.indexOf(this), 1);
+          }
 
-          for (const handler of [
-          on(
-          document,
-          pointerDown,
-          (_ref2) => {let { target } = _ref2;return (
-              !within(target, this.$el) &&
-              once(
-              document,
-              pointerUp + " " + pointerCancel + " scroll",
-              (_ref3) => {let { defaultPrevented, type, target: newTarget } = _ref3;
-                if (
-                !defaultPrevented &&
-                type === pointerUp &&
-                target === newTarget &&
-                !(this.target && within(target, this.target)))
-                {
-                  this.hide(false);
-                }
-              },
-              true));}),
+          if (!active$1.length) {
+            css(document.body, 'overflowY', '');
+          }
 
+          css(this.$el, 'zIndex', '');
 
+          if (!active$1.some((modal) => modal.clsPage === this.clsPage)) {
+            removeClass(document.documentElement, this.clsPage);
+          }
+        } }],
 
-          on(document, 'keydown', (e) => {
-            if (e.keyCode === 27) {
-              this.hide(false);
-            }
-          }),
 
-          ...(this.display === 'static' && this.align !== 'stretch' ?
-          [] :
-          (() => {
-            const handler = () => this.$emit();
-            return [
-            on(window, 'resize', handler),
-            on(document, 'scroll', handler, true),
-            (() => {
-              const observer = observeResize(
-              scrollParents(this.$el),
-              handler);
 
-              return () => observer.disconnect();
-            })()];
+      methods: {
+        toggle() {
+          return this.isToggled() ? this.hide() : this.show();
+        },
+
+        show() {
+          if (this.container && parent(this.$el) !== this.container) {
+            append(this.container, this.$el);
+            return new Promise((resolve) =>
+            requestAnimationFrame(() => this.show().then(resolve)));
 
-          })())])
-          {
-            once(this.$el, 'hide', handler, { self: true });
           }
-        } },
 
+          return this.toggleElement(this.$el, true, animate(this));
+        },
 
-      {
-        name: 'beforehide',
+        hide() {
+          return this.toggleElement(this.$el, false, animate(this));
+        } } };
 
-        self: true,
 
-        handler() {
-          this.clearTimers();
-        } },
 
+    function animate(_ref5) {let { transitionElement, _toggle } = _ref5;
+      return (el, show) =>
+      new Promise((resolve, reject) =>
+      once(el, 'show hide', () => {
+        el._reject == null ? void 0 : el._reject();
+        el._reject = reject;
 
-      {
-        name: 'hide',
+        _toggle(el, show);
 
-        handler(_ref4) {let { target } = _ref4;
-          if (this.$el !== target) {
-            active$1 =
-            active$1 === null && within(target, this.$el) && this.isToggled() ?
-            this :
-            active$1;
-            return;
-          }
+        const off = once(
+        transitionElement,
+        'transitionstart',
+        () => {
+          once(transitionElement, 'transitionend transitioncancel', resolve, {
+            self: true });
 
-          active$1 = this.isActive() ? null : active$1;
-          this.tracker.cancel();
-        } }],
+          clearTimeout(timer);
+        },
+        { self: true });
 
 
+        const timer = setTimeout(() => {
+          off();
+          resolve();
+        }, toMs(css(transitionElement, 'transitionDuration')));
+      })).
+      then(() => delete el._reject);
+    }
 
-      update: {
-        write() {
-          if (this.isToggled() && !hasClass(this.$el, this.clsEnter)) {
-            this.position();
-          }
-        } },
+    function toMs(time) {
+      return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
+    }
 
+    function preventOverscroll(el) {
+      if (CSS.supports('overscroll-behavior', 'contain')) {
+        const elements = filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow')));
+        css(elements, 'overscrollBehavior', 'contain');
+        return () => css(elements, 'overscrollBehavior', '');
+      }
 
-      methods: {
-        show(target, delay) {if (target === void 0) {target = this.target;}if (delay === void 0) {delay = true;}
-          if (this.isToggled() && target && this.target && target !== this.target) {
-            this.hide(false, false);
-          }
+      let startClientY;
 
-          this.target = target;
+      const events = [
+      on(
+      el,
+      'touchstart',
+      (_ref6) => {let { targetTouches } = _ref6;
+        if (targetTouches.length === 1) {
+          startClientY = targetTouches[0].clientY;
+        }
+      },
+      { passive: true }),
 
-          this.clearTimers();
 
-          if (this.isActive()) {
-            return;
-          }
+      on(
+      el,
+      'touchmove',
+      (e) => {
+        if (e.targetTouches.length !== 1) {
+          return;
+        }
 
-          if (active$1) {
-            if (delay && active$1.isDelaying) {
-              this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
-              return;
-            }
+        let [scrollParent] = scrollParents(e.target, /auto|scroll/);
+        if (!within(scrollParent, el)) {
+          scrollParent = el;
+        }
 
-            let prev;
-            while (active$1 && prev !== active$1 && !within(this.$el, active$1.$el)) {
-              prev = active$1;
-              active$1.hide(false, false);
-            }
-          }
+        const clientY = e.targetTouches[0].clientY - startClientY;
+        const { scrollTop, scrollHeight, clientHeight } = scrollParent;
 
-          if (this.container && parent(this.$el) !== this.container) {
-            append(this.container, this.$el);
-          }
+        if (
+        clientHeight >= scrollHeight ||
+        scrollTop === 0 && clientY > 0 ||
+        scrollHeight - scrollTop <= clientHeight && clientY < 0)
+        {
+          e.cancelable && e.preventDefault();
+        }
+      },
+      { passive: false })];
 
-          this.showTimer = setTimeout(
-          () => this.toggleElement(this.$el, true),
-          delay && this.delayShow || 0);
 
-        },
 
-        hide(delay, animate) {if (delay === void 0) {delay = true;}if (animate === void 0) {animate = true;}
-          const hide = () => this.toggleElement(this.$el, false, this.animateOut && animate);
+      return () => events.forEach((fn) => fn());
+    }
 
-          this.clearTimers();
+    function preventBackgroundScroll() {
+      const { body, documentElement } = document;
+      css(body, {
+        overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
+        touchAction: 'none' });
 
-          this.isDelaying = getPositionedElements(this.$el).some((el) =>
-          this.tracker.movesTo(el));
+      css(documentElement, 'overflowY', 'hidden');
+      return () => {
+        css(documentElement, 'overflowY', '');
+        css(body, { overflowY: '', touchAction: '' });
+      };
+    }
 
+    function filterChildren(el, fn) {
+      const children = [];
+      apply(el, (node) => {
+        if (fn(node)) {
+          children.push(node);
+        }
+      });
+      return children;
+    }
 
-          if (delay && this.isDelaying) {
-            this.hideTimer = setTimeout(this.hide, 50);
-          } else if (delay && this.delayHide) {
-            this.hideTimer = setTimeout(hide, this.delayHide);
-          } else {
-            hide();
-          }
-        },
+    let active;
 
-        clearTimers() {
-          clearTimeout(this.showTimer);
-          clearTimeout(this.hideTimer);
-          this.showTimer = null;
-          this.hideTimer = null;
-          this.isDelaying = false;
-        },
+    var drop = {
+      mixins: [Container, Lazyload, Position, Togglable],
 
-        isActive() {
-          return active$1 === this;
-        },
+      args: 'pos',
 
-        position() {
-          removeClass(this.$el, this.clsDrop + "-stack");
-          toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
-          toggleClass(this.$el, this.clsDrop + "-stretch", this.align === 'stretch');
+      props: {
+        mode: 'list',
+        toggle: Boolean,
+        boundary: Boolean,
+        boundaryAlign: Boolean,
+        delayShow: Number,
+        delayHide: Number,
+        display: String,
+        clsDrop: String,
+        animateOut: Boolean,
+        bgScroll: Boolean },
 
-          const boundary = query(this.boundary, this.$el);
-          const target = boundary && this.boundaryAlign ? boundary : this.target;
-          const [scrollParent] = scrollParents(
-          boundary && this.boundaryAlign ? boundary : this.$el);
 
-          const scrollParentOffset = offset(scrollParent);
-          const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
-          const viewportOffset = this.getViewportOffset(this.$el);
+      data: {
+        mode: ['click', 'hover'],
+        toggle: '- *',
+        boundary: true,
+        boundaryAlign: false,
+        delayShow: 0,
+        delayHide: 800,
+        display: null,
+        clsDrop: false,
+        animation: ['uk-animation-fade'],
+        cls: 'uk-open',
+        container: false,
+        animateOut: false,
+        bgScroll: true },
 
-          css(this.$el, 'maxWidth', '');
-          const maxWidth = scrollParentOffset.width - 2 * viewportOffset;
 
-          if (this.align === 'justify') {
-            const prop = this.axis === 'y' ? 'width' : 'height';
-            css(
-            this.$el,
-            prop,
-            Math.min(
-            (boundary ? boundaryOffset : offset(this.target))[prop],
-            scrollParentOffset[prop] - 2 * viewportOffset));
+      created() {
+        this.tracker = new MouseTracker();
+      },
 
+      beforeConnect() {
+        this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
+      },
 
-          } else if (this.align === 'stretch') {
-            this.flip = this.axis === 'y' ? 'x' : 'y';
-            this.display = 'static';
+      connected() {
+        addClass(this.$el, this.clsDrop);
 
-            const viewport = offsetViewport(scrollParent);
-            const targetDim = offset(target);
-            const elOffset = Math.abs(this.getPositionOffset(this.$el)) + viewportOffset;
+        if (this.toggle && !this.target) {
+          this.target = this.$create('toggle', query(this.toggle, this.$el), {
+            target: this.$el,
+            mode: this.mode }).
+          $el;
+          attr(this.target, 'aria-haspopup', true);
+          this.lazyload(this.target);
+        }
+      },
 
-            css(this.$el, {
-              width:
-              this.axis === 'y' ?
-              viewport.width :
-              (this.dir === 'left' ?
-              targetDim.left - viewport.left :
-              viewport.right - targetDim.right) - elOffset,
-              height:
-              this.axis === 'x' ?
-              viewport.height :
-              (this.dir === 'top' ?
-              targetDim.top - viewport.top :
-              viewport.bottom - targetDim.bottom) - elOffset });
+      disconnected() {
+        if (this.isActive()) {
+          active = null;
+        }
+      },
 
-          } else if (this.$el.offsetWidth > maxWidth) {
-            addClass(this.$el, this.clsDrop + "-stack");
-          }
+      events: [
+      {
+        name: 'click',
 
-          css(this.$el, 'maxWidth', maxWidth);
+        delegate() {
+          return "." + this.clsDrop + "-close";
+        },
 
-          this.positionAt(this.$el, target, boundary);
-        } } };
+        handler(e) {
+          e.preventDefault();
+          this.hide(false);
+        } },
 
 
+      {
+        name: 'click',
 
-    function getPositionedElements(el) {
-      const result = [];
-      apply(el, (el) => css(el, 'position') !== 'static' && result.push(el));
-      return result;
-    }
+        delegate() {
+          return 'a[href^="#"]';
+        },
 
-    var formCustom = {
-      mixins: [Class],
+        handler(_ref) {let { defaultPrevented, current: { hash } } = _ref;
+          if (!defaultPrevented && hash && !within(hash, this.$el)) {
+            this.hide(false);
+          }
+        } },
 
-      args: 'target',
 
-      props: {
-        target: Boolean },
+      {
+        name: 'beforescroll',
 
+        handler() {
+          this.hide(false);
+        } },
 
-      data: {
-        target: false },
 
+      {
+        name: 'toggle',
 
-      computed: {
-        input(_, $el) {
-          return $(selInput, $el);
-        },
+        self: true,
 
-        state() {
-          return this.input.nextElementSibling;
-        },
+        handler(e, toggle) {
+          e.preventDefault();
 
-        target(_ref, $el) {let { target } = _ref;
-          return (
-            target && (
-            target === true && parent(this.input) === $el && this.input.nextElementSibling ||
-            $(target, $el)));
+          if (this.isToggled()) {
+            this.hide(false);
+          } else {
+            this.show(toggle == null ? void 0 : toggle.$el, false);
+          }
+        } },
+
+
+      {
+        name: 'toggleshow',
+
+        self: true,
 
+        handler(e, toggle) {
+          e.preventDefault();
+          this.show(toggle == null ? void 0 : toggle.$el);
         } },
 
 
-      update() {var _input$files;
-        const { target, input } = this;
+      {
+        name: 'togglehide',
 
-        if (!target) {
-          return;
-        }
+        self: true,
 
-        let option;
-        const prop = isInput(target) ? 'value' : 'textContent';
-        const prev = target[prop];
-        const value = (_input$files = input.files) != null && _input$files[0] ?
-        input.files[0].name :
-        matches(input, 'select') && (
-        option = $$('option', input).filter((el) => el.selected)[0]) // eslint-disable-line prefer-destructuring
-        ? option.textContent :
-        input.value;
+        handler(e) {
+          e.preventDefault();
+          if (!matches(this.$el, ':focus,:hover')) {
+            this.hide();
+          }
+        } },
 
-        if (prev !== value) {
-          target[prop] = value;
-        }
-      },
 
-      events: [
       {
-        name: 'change',
+        name: pointerEnter + " focusin",
 
-        handler() {
-          this.$emit();
+        filter() {
+          return includes(this.mode, 'hover');
+        },
+
+        handler(e) {
+          if (!isTouch(e)) {
+            this.clearTimers();
+          }
         } },
 
 
       {
-        name: 'reset',
+        name: pointerLeave + " focusout",
 
-        el() {
-          return closest(this.$el, 'form');
+        filter() {
+          return includes(this.mode, 'hover');
         },
 
-        handler() {
-          this.$emit();
-        } }] };
+        handler(e) {
+          if (!isTouch(e) && e.relatedTarget) {
+            this.hide();
+          }
+        } },
 
-    var Margin = {
-      mixins: [Resize],
 
-      props: {
-        margin: String,
-        firstColumn: Boolean },
+      {
+        name: 'toggled',
 
+        self: true,
 
-      data: {
-        margin: 'uk-margin-small-top',
-        firstColumn: 'uk-first-column' },
+        handler(e, toggled) {
+          if (!toggled) {
+            return;
+          }
 
+          this.clearTimers();
+          this.position();
+        } },
 
-      resizeTargets() {
-        return [this.$el, ...toArray(this.$el.children)];
-      },
 
-      connected() {
-        this.registerObserver(
-        observeMutation(this.$el, () => this.$reset(), {
-          childList: true }));
+      {
+        name: 'show',
 
+        self: true,
 
-      },
+        handler() {
+          active = this;
 
-      update: {
-        read() {
-          const rows = getRows(this.$el.children);
+          this.tracker.init();
 
-          return {
-            rows,
-            columns: getColumns(rows) };
+          for (const handler of [
+          on(
+          document,
+          pointerDown$1,
+          (_ref2) => {let { target } = _ref2;return (
+              !within(target, this.$el) &&
+              once(
+              document,
+              pointerUp$1 + " " + pointerCancel + " scroll",
+              (_ref3) => {let { defaultPrevented, type, target: newTarget } = _ref3;
+                if (
+                !defaultPrevented &&
+                type === pointerUp$1 &&
+                target === newTarget &&
+                !(this.target && within(target, this.target)))
+                {
+                  this.hide(false);
+                }
+              },
+              true));}),
 
-        },
 
-        write(_ref) {let { columns, rows } = _ref;
-          for (const row of rows) {
-            for (const column of row) {
-              toggleClass(column, this.margin, rows[0] !== row);
-              toggleClass(column, this.firstColumn, columns[0].includes(column));
-            }
-          }
-        },
 
-        events: ['resize'] } };
+          on(document, 'keydown', (e) => {
+            if (e.keyCode === 27) {
+              this.hide(false);
+            }
+          }),
 
+          ...(this.bgScroll ?
+          [] :
+          [preventOverscroll(this.$el), preventBackgroundScroll()]),
 
+          ...(this.display === 'static' && this.align !== 'stretch' ?
+          [] :
+          (() => {
+            const handler = () => this.$emit();
+            return [
+            on(window, 'resize', handler),
+            on(document, 'scroll', handler, true),
+            (() => {
+              const observer = observeResize(
+              scrollParents(this.$el),
+              handler);
 
-    function getRows(items) {
-      return sortBy(items, 'top', 'bottom');
-    }
+              return () => observer.disconnect();
+            })()];
 
-    function getColumns(rows) {
-      const columns = [];
+          })())])
+          {
+            once(this.$el, 'hide', handler, { self: true });
+          }
+        } },
 
-      for (const row of rows) {
-        const sorted = sortBy(row, 'left', 'right');
-        for (let j = 0; j < sorted.length; j++) {
-          columns[j] = columns[j] ? columns[j].concat(sorted[j]) : sorted[j];
-        }
-      }
 
-      return isRtl ? columns.reverse() : columns;
-    }
+      {
+        name: 'beforehide',
 
-    function sortBy(items, startProp, endProp) {
-      const sorted = [[]];
+        self: true,
 
-      for (const el of items) {
-        if (!isVisible(el)) {
-          continue;
-        }
+        handler() {
+          this.clearTimers();
+        } },
 
-        let dim = getOffset(el);
 
-        for (let i = sorted.length - 1; i >= 0; i--) {
-          const current = sorted[i];
+      {
+        name: 'hide',
 
-          if (!current[0]) {
-            current.push(el);
-            break;
+        handler(_ref4) {let { target } = _ref4;
+          if (this.$el !== target) {
+            active =
+            active === null && within(target, this.$el) && this.isToggled() ?
+            this :
+            active;
+            return;
           }
 
-          let startDim;
-          if (current[0].offsetParent === el.offsetParent) {
-            startDim = getOffset(current[0]);
-          } else {
-            dim = getOffset(el, true);
-            startDim = getOffset(current[0], true);
-          }
+          active = this.isActive() ? null : active;
+          this.tracker.cancel();
+        } }],
 
-          if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
-            sorted.push([el]);
-            break;
-          }
 
-          if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
-            current.push(el);
-            break;
+
+      update: {
+        write() {
+          if (this.isToggled() && !hasClass(this.$el, this.clsEnter)) {
+            this.position();
           }
+        } },
 
-          if (i === 0) {
-            sorted.unshift([el]);
-            break;
+
+      methods: {
+        show(target, delay) {if (target === void 0) {target = this.target;}if (delay === void 0) {delay = true;}
+          if (this.isToggled() && target && this.target && target !== this.target) {
+            this.hide(false, false);
           }
-        }
-      }
 
-      return sorted;
-    }
+          this.target = target;
 
-    function getOffset(element, offset) {if (offset === void 0) {offset = false;}
-      let { offsetTop, offsetLeft, offsetHeight, offsetWidth } = element;
+          this.clearTimers();
 
-      if (offset) {
-        [offsetTop, offsetLeft] = offsetPosition(element);
-      }
+          if (this.isActive()) {
+            return;
+          }
 
-      return {
-        top: offsetTop,
-        left: offsetLeft,
-        bottom: offsetTop + offsetHeight,
-        right: offsetLeft + offsetWidth };
+          if (active) {
+            if (delay && active.isDelaying) {
+              this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
+              return;
+            }
 
-    }
+            let prev;
+            while (active && prev !== active && !within(this.$el, active.$el)) {
+              prev = active;
+              active.hide(false, false);
+            }
+          }
 
-    var Scroll = {
-      connected() {
-        registerScrollListener(this._uid, () => this.$emit('scroll'));
-      },
+          if (this.container && parent(this.$el) !== this.container) {
+            append(this.container, this.$el);
+          }
 
-      disconnected() {
-        unregisterScrollListener(this._uid);
-      } };
+          this.showTimer = setTimeout(
+          () => this.toggleElement(this.$el, true),
+          delay && this.delayShow || 0);
 
+        },
 
-    const scrollListeners = new Map();
-    let unbindScrollListener;
-    function registerScrollListener(id, listener) {
-      unbindScrollListener =
-      unbindScrollListener ||
-      on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
-        passive: true,
-        capture: true });
+        hide(delay, animate) {if (delay === void 0) {delay = true;}if (animate === void 0) {animate = true;}
+          const hide = () => this.toggleElement(this.$el, false, this.animateOut && animate);
 
+          this.clearTimers();
 
-      scrollListeners.set(id, listener);
-    }
+          this.isDelaying = getPositionedElements(this.$el).some((el) =>
+          this.tracker.movesTo(el));
 
-    function unregisterScrollListener(id) {
-      scrollListeners.delete(id);
-      if (unbindScrollListener && !scrollListeners.size) {
-        unbindScrollListener();
-        unbindScrollListener = null;
-      }
-    }
 
-    var grid = {
-      extends: Margin,
+          if (delay && this.isDelaying) {
+            this.hideTimer = setTimeout(this.hide, 50);
+          } else if (delay && this.delayHide) {
+            this.hideTimer = setTimeout(hide, this.delayHide);
+          } else {
+            hide();
+          }
+        },
 
-      mixins: [Class, Scroll],
+        clearTimers() {
+          clearTimeout(this.showTimer);
+          clearTimeout(this.hideTimer);
+          this.showTimer = null;
+          this.hideTimer = null;
+          this.isDelaying = false;
+        },
 
-      name: 'grid',
+        isActive() {
+          return active === this;
+        },
 
-      props: {
-        masonry: Boolean,
-        parallax: Number },
+        position() {
+          removeClass(this.$el, this.clsDrop + "-stack");
+          toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
+          toggleClass(this.$el, this.clsDrop + "-stretch", this.align === 'stretch');
 
+          const boundary = query(this.boundary, this.$el);
+          const target = boundary && this.boundaryAlign ? boundary : this.target;
+          const [scrollParent] = scrollParents(
+          boundary && this.boundaryAlign ? boundary : this.$el);
 
-      data: {
-        margin: 'uk-grid-margin',
-        clsStack: 'uk-grid-stack',
-        masonry: false,
-        parallax: 0 },
+          const scrollParentOffset = offset(scrollParent);
+          const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
+          const viewportOffset = this.getViewportOffset(this.$el);
 
+          css(this.$el, 'maxWidth', '');
+          const maxWidth = scrollParentOffset.width - 2 * viewportOffset;
 
-      connected() {
-        this.masonry && addClass(this.$el, 'uk-flex-top uk-flex-wrap-top');
-      },
+          if (this.align === 'justify') {
+            const prop = this.axis === 'y' ? 'width' : 'height';
+            css(
+            this.$el,
+            prop,
+            Math.min(
+            (boundary ? boundaryOffset : offset(this.target))[prop],
+            scrollParentOffset[prop] - 2 * viewportOffset));
 
-      update: [
-      {
-        write(_ref) {let { columns } = _ref;
-          toggleClass(this.$el, this.clsStack, columns.length < 2);
-        },
 
-        events: ['resize'] },
+          } else if (this.align === 'stretch') {
+            this.flip = this.axis === 'y' ? 'x' : 'y';
+            this.display = 'static';
 
+            const viewport = offsetViewport(scrollParent);
+            const targetDim = offset(target);
+            const elOffset = Math.abs(this.getPositionOffset(this.$el)) + viewportOffset;
 
-      {
-        read(data) {
-          let { columns, rows } = data;
+            css(this.$el, {
+              width:
+              this.axis === 'y' ?
+              viewport.width :
+              (this.dir === 'left' ?
+              targetDim.left - viewport.left :
+              viewport.right - targetDim.right) - elOffset,
+              height:
+              this.axis === 'x' ?
+              viewport.height :
+              (this.dir === 'top' ?
+              targetDim.top - viewport.top :
+              viewport.bottom - targetDim.bottom) - elOffset });
 
-          // Filter component makes elements positioned absolute
-          if (
-          !columns.length ||
-          !this.masonry && !this.parallax ||
-          positionedAbsolute(this.$el))
-          {
-            data.translates = false;
-            return false;
+          } else if (this.$el.offsetWidth > maxWidth) {
+            addClass(this.$el, this.clsDrop + "-stack");
           }
 
-          let translates = false;
+          css(this.$el, 'maxWidth', maxWidth);
 
-          const nodes = children(this.$el);
-          const columnHeights = getColumnHeights(columns);
-          const margin = getMarginTop(nodes, this.margin) * (rows.length - 1);
-          const elHeight = Math.max(...columnHeights) + margin;
+          this.positionAt(this.$el, target, boundary);
+        } } };
 
-          if (this.masonry) {
-            columns = columns.map((column) => sortBy$1(column, 'offsetTop'));
-            translates = getTranslates(rows, columns);
-          }
 
-          let padding = Math.abs(this.parallax);
-          if (padding) {
-            padding = columnHeights.reduce(
-            (newPadding, hgt, i) =>
-            Math.max(
-            newPadding,
-            hgt + margin + (i % 2 ? padding : padding / 8) - elHeight),
 
-            0);
+    function getPositionedElements(el) {
+      const result = [];
+      apply(el, (el) => css(el, 'position') !== 'static' && result.push(el));
+      return result;
+    }
 
-          }
+    var formCustom = {
+      mixins: [Class],
 
-          return { padding, columns, translates, height: translates ? elHeight : '' };
-        },
+      args: 'target',
 
-        write(_ref2) {let { height, padding } = _ref2;
-          css(this.$el, 'paddingBottom', padding || '');
-          height !== false && css(this.$el, 'height', height);
-        },
+      props: {
+        target: Boolean },
 
-        events: ['resize'] },
 
+      data: {
+        target: false },
 
-      {
-        read() {
-          if (this.parallax && positionedAbsolute(this.$el)) {
-            return false;
-          }
 
-          return {
-            scrolled: this.parallax ?
-            scrolledOver(this.$el) * Math.abs(this.parallax) :
-            false };
+      computed: {
+        input(_, $el) {
+          return $(selInput, $el);
+        },
 
+        state() {
+          return this.input.nextElementSibling;
         },
 
-        write(_ref3) {let { columns, scrolled, translates } = _ref3;
-          if (scrolled === false && !translates) {
-            return;
-          }
+        target(_ref, $el) {let { target } = _ref;
+          return (
+            target && (
+            target === true && parent(this.input) === $el && this.input.nextElementSibling ||
+            $(target, $el)));
 
-          columns.forEach((column, i) =>
-          column.forEach((el, j) =>
-          css(
-          el,
-          'transform',
-          !scrolled && !translates ?
-          '' : "translateY(" + (
+        } },
 
-          (translates && -translates[i][j]) + (
-          scrolled ? i % 2 ? scrolled : scrolled / 8 : 0)) + "px)")));
 
+      update() {var _input$files;
+        const { target, input } = this;
 
+        if (!target) {
+          return;
+        }
 
+        let option;
+        const prop = isInput(target) ? 'value' : 'textContent';
+        const prev = target[prop];
+        const value = (_input$files = input.files) != null && _input$files[0] ?
+        input.files[0].name :
+        matches(input, 'select') && (
+        option = $$('option', input).filter((el) => el.selected)[0]) // eslint-disable-line prefer-destructuring
+        ? option.textContent :
+        input.value;
 
-        },
+        if (prev !== value) {
+          target[prop] = value;
+        }
+      },
 
-        events: ['scroll', 'resize'] }] };
+      events: [
+      {
+        name: 'change',
 
+        handler() {
+          this.$emit();
+        } },
 
 
+      {
+        name: 'reset',
 
-    function positionedAbsolute(el) {
-      return children(el).some((el) => css(el, 'position') === 'absolute');
-    }
+        el() {
+          return closest(this.$el, 'form');
+        },
 
-    function getTranslates(rows, columns) {
-      const rowHeights = rows.map((row) => Math.max(...row.map((el) => el.offsetHeight)));
-
-      return columns.map((elements) => {
-        let prev = 0;
-        return elements.map(
-        (element, row) =>
-        prev += row ? rowHeights[row - 1] - elements[row - 1].offsetHeight : 0);
-
-      });
-    }
-
-    function getMarginTop(nodes, cls) {
-      const [node] = nodes.filter((el) => hasClass(el, cls));
-
-      return toFloat(node ? css(node, 'marginTop') : css(nodes[0], 'paddingLeft'));
-    }
-
-    function getColumnHeights(columns) {
-      return columns.map((column) => column.reduce((sum, el) => sum + el.offsetHeight, 0));
-    }
+        handler() {
+          this.$emit();
+        } }] };
 
-    var heightMatch = {
+    var Margin = {
       mixins: [Resize],
 
-      args: 'target',
-
       props: {
-        target: String,
-        row: Boolean },
+        margin: String,
+        firstColumn: Boolean },
 
 
       data: {
-        target: '> *',
-        row: true },
-
+        margin: 'uk-margin-small-top',
+        firstColumn: 'uk-first-column' },
 
-      computed: {
-        elements: {
-          get(_ref, $el) {let { target } = _ref;
-            return $$(target, $el);
-          },
 
-          watch() {
-            this.$reset();
-          } } },
+      resizeTargets() {
+        return [this.$el, ...toArray(this.$el.children)];
+      },
 
+      connected() {
+        this.registerObserver(
+        observeMutation(this.$el, () => this.$reset(), {
+          childList: true }));
 
 
-      resizeTargets() {
-        return [this.$el, ...this.elements];
       },
 
       update: {
         read() {
+          const rows = getRows(this.$el.children);
+
           return {
-            rows: (this.row ? getRows(this.elements) : [this.elements]).map(match$1) };
+            rows,
+            columns: getColumns(rows) };
 
         },
 
-        write(_ref2) {let { rows } = _ref2;
-          for (const { heights, elements } of rows) {
-            elements.forEach((el, i) => css(el, 'minHeight', heights[i]));
+        write(_ref) {let { columns, rows } = _ref;
+          for (const row of rows) {
+            for (const column of row) {
+              toggleClass(column, this.margin, rows[0] !== row);
+              toggleClass(column, this.firstColumn, columns[0].includes(column));
+            }
           }
         },
 
@@ -4563,1008 +4601,1064 @@
 
 
 
-    function match$1(elements) {
-      if (elements.length < 2) {
-        return { heights: [''], elements };
-      }
+    function getRows(items) {
+      return sortBy(items, 'top', 'bottom');
+    }
 
-      css(elements, 'minHeight', '');
-      let heights = elements.map(getHeight);
-      const max = Math.max(...heights);
+    function getColumns(rows) {
+      const columns = [];
 
-      return {
-        heights: elements.map((el, i) => heights[i].toFixed(2) === max.toFixed(2) ? '' : max),
-        elements };
+      for (const row of rows) {
+        const sorted = sortBy(row, 'left', 'right');
+        for (let j = 0; j < sorted.length; j++) {
+          columns[j] = columns[j] ? columns[j].concat(sorted[j]) : sorted[j];
+        }
+      }
 
+      return isRtl ? columns.reverse() : columns;
     }
 
-    function getHeight(element) {
-      let style = false;
-      if (!isVisible(element)) {
-        style = element.style.display;
-        css(element, 'display', 'block', 'important');
-      }
+    function sortBy(items, startProp, endProp) {
+      const sorted = [[]];
 
-      const height = dimensions$1(element).height - boxModelAdjust(element, 'height', 'content-box');
+      for (const el of items) {
+        if (!isVisible(el)) {
+          continue;
+        }
 
-      if (style !== false) {
-        css(element, 'display', style);
-      }
+        let dim = getOffset(el);
 
-      return height;
-    }
+        for (let i = sorted.length - 1; i >= 0; i--) {
+          const current = sorted[i];
 
-    var heightViewport = {
-      mixins: [Resize],
+          if (!current[0]) {
+            current.push(el);
+            break;
+          }
 
-      props: {
-        expand: Boolean,
-        offsetTop: Boolean,
-        offsetBottom: Boolean,
-        minHeight: Number },
+          let startDim;
+          if (current[0].offsetParent === el.offsetParent) {
+            startDim = getOffset(current[0]);
+          } else {
+            dim = getOffset(el, true);
+            startDim = getOffset(current[0], true);
+          }
 
+          if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
+            sorted.push([el]);
+            break;
+          }
 
-      data: {
-        expand: false,
-        offsetTop: false,
-        offsetBottom: false,
-        minHeight: 0 },
+          if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
+            current.push(el);
+            break;
+          }
 
+          if (i === 0) {
+            sorted.unshift([el]);
+            break;
+          }
+        }
+      }
 
-      resizeTargets() {
-        // check for offsetTop change
-        return [this.$el, ...scrollParents(this.$el, /auto|scroll/)];
-      },
+      return sorted;
+    }
 
-      update: {
-        read(_ref) {let { minHeight: prev } = _ref;
-          if (!isVisible(this.$el)) {
-            return false;
-          }
+    function getOffset(element, offset) {if (offset === void 0) {offset = false;}
+      let { offsetTop, offsetLeft, offsetHeight, offsetWidth } = element;
 
-          let minHeight = '';
-          const box = boxModelAdjust(this.$el, 'height', 'content-box');
+      if (offset) {
+        [offsetTop, offsetLeft] = offsetPosition(element);
+      }
 
-          const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
-          const { height: viewportHeight } = offsetViewport(scrollElement);
+      return {
+        top: offsetTop,
+        left: offsetLeft,
+        bottom: offsetTop + offsetHeight,
+        right: offsetLeft + offsetWidth };
 
-          if (this.expand) {
-            minHeight = Math.max(
-            viewportHeight - (
-            dimensions$1(scrollElement).height - dimensions$1(this.$el).height) -
-            box,
-            0);
+    }
 
-          } else {
-            // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-            minHeight = "calc(" + (
-            document.scrollingElement === scrollElement ? '100vh' : viewportHeight + "px");
+    var Scroll = {
+      connected() {
+        registerScrollListener(this._uid, () => this.$emit('scroll'));
+      },
 
+      disconnected() {
+        unregisterScrollListener(this._uid);
+      } };
 
-            if (this.offsetTop) {
-              const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
-              minHeight += top > 0 && top < viewportHeight / 2 ? " - " + top + "px" : '';
-            }
 
-            if (this.offsetBottom === true) {
-              minHeight += " - " + dimensions$1(this.$el.nextElementSibling).height + "px";
-            } else if (isNumeric(this.offsetBottom)) {
-              minHeight += " - " + this.offsetBottom + "vh";
-            } else if (this.offsetBottom && endsWith(this.offsetBottom, 'px')) {
-              minHeight += " - " + toFloat(this.offsetBottom) + "px";
-            } else if (isString(this.offsetBottom)) {
-              minHeight += " - " + dimensions$1(query(this.offsetBottom, this.$el)).height + "px";
-            }
+    const scrollListeners = new Map();
+    let unbindScrollListener;
+    function registerScrollListener(id, listener) {
+      unbindScrollListener =
+      unbindScrollListener ||
+      on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
+        passive: true,
+        capture: true });
 
-            minHeight += (box ? " - " + box + "px" : '') + ")";
-          }
 
-          return { minHeight, prev };
-        },
+      scrollListeners.set(id, listener);
+    }
 
-        write(_ref2) {let { minHeight } = _ref2;
-          css(this.$el, { minHeight });
+    function unregisterScrollListener(id) {
+      scrollListeners.delete(id);
+      if (unbindScrollListener && !scrollListeners.size) {
+        unbindScrollListener();
+        unbindScrollListener = null;
+      }
+    }
 
-          if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
-            css(this.$el, 'minHeight', this.minHeight);
-          }
-        },
+    var grid = {
+      extends: Margin,
 
-        events: ['resize'] } };
+      mixins: [Class, Scroll],
 
-    var SVG = {
-      args: 'src',
+      name: 'grid',
 
       props: {
-        id: Boolean,
-        icon: String,
-        src: String,
-        style: String,
-        width: Number,
-        height: Number,
-        ratio: Number,
-        class: String,
-        strokeAnimation: Boolean,
-        focusable: Boolean, // IE 11
-        attributes: 'list' },
+        masonry: Boolean,
+        parallax: Number },
 
 
       data: {
-        ratio: 1,
-        include: ['style', 'class', 'focusable'],
-        class: '',
-        strokeAnimation: false },
+        margin: 'uk-grid-margin',
+        clsStack: 'uk-grid-stack',
+        masonry: false,
+        parallax: 0 },
 
 
-      beforeConnect() {
-        this.class += ' uk-svg';
-      },
-
       connected() {
-        if (!this.icon && includes(this.src, '#')) {
-          [this.src, this.icon] = this.src.split('#');
-        }
+        this.masonry && addClass(this.$el, 'uk-flex-top uk-flex-wrap-top');
+      },
 
-        this.svg = this.getSvg().then((el) => {
-          if (this._connected) {
-            const svg = insertSVG(el, this.$el);
+      update: [
+      {
+        write(_ref) {let { columns } = _ref;
+          toggleClass(this.$el, this.clsStack, columns.length < 2);
+        },
 
-            if (this.svgEl && svg !== this.svgEl) {
-              remove$1(this.svgEl);
-            }
+        events: ['resize'] },
 
-            this.applyAttributes(svg, el);
 
-            return this.svgEl = svg;
-          }
-        }, noop);
+      {
+        read(data) {
+          let { columns, rows } = data;
 
-        if (this.strokeAnimation) {
-          this.svg.then((el) => {
-            if (this._connected) {
-              applyAnimation(el);
-              this.registerObserver(
-              observeIntersection(el, (records, observer) => {
-                applyAnimation(el);
-                observer.disconnect();
-              }));
+          // Filter component makes elements positioned absolute
+          if (
+          !columns.length ||
+          !this.masonry && !this.parallax ||
+          positionedAbsolute(this.$el))
+          {
+            data.translates = false;
+            return false;
+          }
 
-            }
-          });
-        }
-      },
+          let translates = false;
 
-      disconnected() {
-        this.svg.then((svg) => {
-          if (this._connected) {
-            return;
-          }
+          const nodes = children(this.$el);
+          const columnHeights = getColumnHeights(columns);
+          const margin = getMarginTop(nodes, this.margin) * (rows.length - 1);
+          const elHeight = Math.max(...columnHeights) + margin;
 
-          if (isVoidElement(this.$el)) {
-            this.$el.hidden = false;
+          if (this.masonry) {
+            columns = columns.map((column) => sortBy$1(column, 'offsetTop'));
+            translates = getTranslates(rows, columns);
           }
 
-          remove$1(svg);
-          this.svgEl = null;
-        });
-
-        this.svg = null;
-      },
+          let padding = Math.abs(this.parallax);
+          if (padding) {
+            padding = columnHeights.reduce(
+            (newPadding, hgt, i) =>
+            Math.max(
+            newPadding,
+            hgt + margin + (i % 2 ? padding : padding / 8) - elHeight),
 
-      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())));
+            0);
 
           }
 
-          return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject('SVG not found.');
+          return { padding, columns, translates, height: translates ? elHeight : '' };
         },
 
-        applyAttributes(el, ref) {
-          for (const prop in this.$options.props) {
-            if (includes(this.include, prop) && prop in this) {
-              attr(el, prop, this[prop]);
-            }
-          }
-
-          for (const attribute in this.attributes) {
-            const [prop, value] = this.attributes[attribute].split(':', 2);
-            attr(el, prop, value);
-          }
+        write(_ref2) {let { height, padding } = _ref2;
+          css(this.$el, 'paddingBottom', padding || '');
+          height !== false && css(this.$el, 'height', height);
+        },
 
-          if (!this.id) {
-            removeAttr(el, 'id');
-          }
+        events: ['resize'] },
 
-          const props = ['width', 'height'];
-          let dimensions = props.map((prop) => this[prop]);
 
-          if (!dimensions.some((val) => val)) {
-            dimensions = props.map((prop) => attr(ref, prop));
+      {
+        read() {
+          if (this.parallax && positionedAbsolute(this.$el)) {
+            return false;
           }
 
-          const viewBox = attr(ref, 'viewBox');
-          if (viewBox && !dimensions.some((val) => val)) {
-            dimensions = viewBox.split(' ').slice(2);
-          }
+          return {
+            scrolled: this.parallax ?
+            scrolledOver(this.$el) * Math.abs(this.parallax) :
+            false };
 
-          dimensions.forEach((val, i) => attr(el, props[i], toFloat(val) * this.ratio || null));
-        } } };
+        },
 
+        write(_ref3) {let { columns, scrolled, translates } = _ref3;
+          if (scrolled === false && !translates) {
+            return;
+          }
 
+          columns.forEach((column, i) =>
+          column.forEach((el, j) =>
+          css(
+          el,
+          'transform',
+          !scrolled && !translates ?
+          '' : "translateY(" + (
 
-    const loadSVG = memoize(async (src) => {
-      if (src) {
-        if (startsWith(src, 'data:')) {
-          return decodeURIComponent(src.split(',')[1]);
-        } else {
-          return (await fetch(src)).text();
-        }
-      } else {
-        return Promise.reject();
-      }
-    });
+          (translates && -translates[i][j]) + (
+          scrolled ? i % 2 ? scrolled : scrolled / 8 : 0)) + "px)")));
 
-    function parseSVG(svg, icon) {var _svg;
-      if (icon && includes(svg, '<symbol')) {
-        svg = parseSymbols(svg, icon) || svg;
-      }
 
-      svg = $(svg.substr(svg.indexOf('<svg')));
-      return ((_svg = svg) == null ? void 0 : _svg.hasChildNodes()) && svg;
-    }
 
-    const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
-    const symbols = {};
 
-    function parseSymbols(svg, icon) {
-      if (!symbols[svg]) {
-        symbols[svg] = {};
+        },
 
-        symbolRe.lastIndex = 0;
+        events: ['scroll', 'resize'] }] };
 
-        let match;
-        while (match = symbolRe.exec(svg)) {
-          symbols[svg][match[3]] = "<svg xmlns=\"http://www.w3.org/2000/svg\"" + match[1] + "svg>";
-        }
-      }
 
-      return symbols[svg][icon];
-    }
 
-    function applyAnimation(el) {
-      const length = getMaxPathLength(el);
 
-      if (length) {
-        el.style.setProperty('--uk-animation-stroke', length);
-      }
+    function positionedAbsolute(el) {
+      return children(el).some((el) => css(el, 'position') === 'absolute');
     }
 
-    function getMaxPathLength(el) {
-      return Math.ceil(
-      Math.max(
-      0,
-      ...$$('[stroke]', el).map((stroke) => {
-        try {
-          return stroke.getTotalLength();
-        } catch (e) {
-          return 0;
-        }
-      })));
+    function getTranslates(rows, columns) {
+      const rowHeights = rows.map((row) => Math.max(...row.map((el) => el.offsetHeight)));
 
+      return columns.map((elements) => {
+        let prev = 0;
+        return elements.map(
+        (element, row) =>
+        prev += row ? rowHeights[row - 1] - elements[row - 1].offsetHeight : 0);
 
+      });
     }
 
-    function insertSVG(el, root) {
-      if (isVoidElement(root) || isTag(root, 'canvas')) {
-        root.hidden = true;
-
-        const next = root.nextElementSibling;
-        return equals(el, next) ? next : after(root, el);
-      }
-
-      const last = root.lastElementChild;
-      return equals(el, last) ? last : append(root, el);
-    }
+    function getMarginTop(nodes, cls) {
+      const [node] = nodes.filter((el) => hasClass(el, cls));
 
-    function equals(el, other) {
-      return isTag(el, 'svg') && isTag(other, 'svg') && innerHTML(el) === innerHTML(other);
+      return toFloat(node ? css(node, 'marginTop') : css(nodes[0], 'paddingLeft'));
     }
 
-    function innerHTML(el) {
-      return (
-      el.innerHTML ||
-      new XMLSerializer().serializeToString(el).replace(/<svg.*?>(.*?)<\/svg>/g, '$1')).
-      replace(/\s/g, '');
+    function getColumnHeights(columns) {
+      return columns.map((column) => column.reduce((sum, el) => sum + el.offsetHeight, 0));
     }
 
-    var closeIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"1\" y1=\"1\" x2=\"13\" y2=\"13\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"13\" y1=\"1\" x2=\"1\" y2=\"13\"/></svg>";
-
-    var closeLarge = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"1\" y1=\"1\" x2=\"19\" y2=\"19\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"19\" y1=\"1\" x2=\"1\" y2=\"19\"/></svg>";
+    var heightMatch = {
+      mixins: [Resize],
 
-    var marker = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"9\" y=\"4\" width=\"1\" height=\"11\"/><rect x=\"4\" y=\"9\" width=\"11\" height=\"1\"/></svg>";
+      args: 'target',
 
-    var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect y=\"9\" width=\"20\" height=\"2\"/><rect y=\"3\" width=\"20\" height=\"2\"/><rect y=\"15\" width=\"20\" height=\"2\"/></svg>";
+      props: {
+        target: String,
+        row: Boolean },
 
-    var overlayIcon = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"19\" y=\"0\" width=\"1\" height=\"40\"/><rect x=\"0\" y=\"19\" width=\"40\" height=\"1\"/></svg>";
 
-    var paginationNext = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 1 6 6 1 11\"/></svg>";
+      data: {
+        target: '> *',
+        row: true },
 
-    var paginationPrevious = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"6 1 1 6 6 11\"/></svg>";
 
-    var searchIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"9\" cy=\"9\" r=\"7\"/><path fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" d=\"M14,14 L18,18 L14,14 Z\"/></svg>";
+      computed: {
+        elements: {
+          get(_ref, $el) {let { target } = _ref;
+            return $$(target, $el);
+          },
 
-    var searchLarge = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" cx=\"17.5\" cy=\"17.5\" r=\"16.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" x1=\"38\" y1=\"39\" x2=\"29\" y2=\"30\"/></svg>";
+          watch() {
+            this.$reset();
+          } } },
 
-    var searchNavbar = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"10.5\" cy=\"10.5\" r=\"9.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"23\" y1=\"23\" x2=\"17\" y2=\"17\"/></svg>";
 
-    var slidenavNext = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"1.225,23 12.775,12 1.225,1 \"/></svg>";
 
-    var slidenavNextLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"4.002,38.547 22.527,20.024 4,1.5 \"/></svg>";
+      resizeTargets() {
+        return [this.$el, ...this.elements];
+      },
 
-    var slidenavPrevious = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"12.775,1 1.225,12 12.775,23 \"/></svg>";
+      update: {
+        read() {
+          return {
+            rows: (this.row ? getRows(this.elements) : [this.elements]).map(match$1) };
 
-    var slidenavPreviousLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"20.527,1.5 2,20.024 20.525,38.547 \"/></svg>";
-
-    var spinner = "<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" cx=\"15\" cy=\"15\" r=\"14\"/></svg>";
-
-    var totop = "<svg width=\"18\" height=\"10\" viewBox=\"0 0 18 10\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 9 9 1 17 9 \"/></svg>";
-
-    const icons = {
-      spinner,
-      totop,
-      marker,
-      'close-icon': closeIcon,
-      'close-large': closeLarge,
-      'navbar-toggle-icon': navbarToggleIcon,
-      'overlay-icon': overlayIcon,
-      'pagination-next': paginationNext,
-      'pagination-previous': paginationPrevious,
-      'search-icon': searchIcon,
-      'search-large': searchLarge,
-      'search-navbar': searchNavbar,
-      'slidenav-next': slidenavNext,
-      'slidenav-next-large': slidenavNextLarge,
-      'slidenav-previous': slidenavPrevious,
-      'slidenav-previous-large': slidenavPreviousLarge };
+        },
 
+        write(_ref2) {let { rows } = _ref2;
+          for (const { heights, elements } of rows) {
+            elements.forEach((el, i) => css(el, 'minHeight', heights[i]));
+          }
+        },
 
-    const Icon = {
-      install: install$3,
+        events: ['resize'] } };
 
-      extends: SVG,
 
-      args: 'icon',
 
-      props: ['icon'],
+    function match$1(elements) {
+      if (elements.length < 2) {
+        return { heights: [''], elements };
+      }
 
-      data: {
-        include: ['focusable'] },
+      css(elements, 'minHeight', '');
+      let heights = elements.map(getHeight);
+      const max = Math.max(...heights);
 
+      return {
+        heights: elements.map((el, i) => heights[i].toFixed(2) === max.toFixed(2) ? '' : max),
+        elements };
 
-      isIcon: true,
+    }
 
-      beforeConnect() {
-        addClass(this.$el, 'uk-icon');
-      },
+    function getHeight(element) {
+      let style = false;
+      if (!isVisible(element)) {
+        style = element.style.display;
+        css(element, 'display', 'block', 'important');
+      }
 
-      methods: {
-        async getSvg() {
-          const icon = getIcon(this.icon);
+      const height = dimensions$1(element).height - boxModelAdjust(element, 'height', 'content-box');
 
-          if (!icon) {
-            throw 'Icon not found.';
-          }
+      if (style !== false) {
+        css(element, 'display', style);
+      }
 
-          return icon;
-        } } };
+      return height;
+    }
 
-    const IconComponent = {
-      args: false,
+    var heightViewport = {
+      mixins: [Resize],
 
-      extends: Icon,
+      props: {
+        expand: Boolean,
+        offsetTop: Boolean,
+        offsetBottom: Boolean,
+        minHeight: Number },
 
-      data: (vm) => ({
-        icon: hyphenate(vm.constructor.options.name) }),
 
+      data: {
+        expand: false,
+        offsetTop: false,
+        offsetBottom: false,
+        minHeight: 0 },
 
-      beforeConnect() {
-        addClass(this.$el, this.$name);
-      } };
 
+      resizeTargets() {
+        // check for offsetTop change
+        return [this.$el, ...scrollParents(this.$el, /auto|scroll/)];
+      },
 
-    const Slidenav = {
-      extends: IconComponent,
+      update: {
+        read(_ref) {let { minHeight: prev } = _ref;
+          if (!isVisible(this.$el)) {
+            return false;
+          }
 
-      beforeConnect() {
-        addClass(this.$el, 'uk-slidenav');
-        const icon = this.$props.icon;
-        this.icon = hasClass(this.$el, 'uk-slidenav-large') ? icon + "-large" : icon;
-      } };
+          let minHeight = '';
+          const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
+          const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
+          const { height: viewportHeight } = offsetViewport(scrollElement);
 
-    const Search = {
-      extends: IconComponent,
+          if (this.expand) {
+            minHeight = Math.max(
+            viewportHeight - (
+            dimensions$1(scrollElement).height - dimensions$1(this.$el).height) -
+            box,
+            0);
 
-      beforeConnect() {
-        this.icon =
-        hasClass(this.$el, 'uk-search-icon') && parents(this.$el, '.uk-search-large').length ?
-        'search-large' :
-        parents(this.$el, '.uk-search-navbar').length ?
-        'search-navbar' :
-        this.$props.icon;
-      } };
+          } else {
+            const isScrollingElement = document.scrollingElement === scrollElement;
 
+            // on mobile devices (iOS and Android) window.innerHeight !== 100vh
+            minHeight = "calc(" + (isScrollingElement ? '100vh' : viewportHeight + "px");
 
-    const Close = {
-      extends: IconComponent,
+            if (this.offsetTop) {
+              if (isScrollingElement) {
+                const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+                minHeight += top > 0 && top < viewportHeight / 2 ? " - " + top + "px" : '';
+              } else {
+                minHeight += " - " + css(scrollElement, 'paddingTop');
+              }
+            }
 
-      beforeConnect() {
-        this.icon = "close-" + (hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon');
-      } };
+            if (this.offsetBottom === true) {
+              minHeight += " - " + dimensions$1(this.$el.nextElementSibling).height + "px";
+            } else if (isNumeric(this.offsetBottom)) {
+              minHeight += " - " + this.offsetBottom + "vh";
+            } else if (this.offsetBottom && endsWith(this.offsetBottom, 'px')) {
+              minHeight += " - " + toFloat(this.offsetBottom) + "px";
+            } else if (isString(this.offsetBottom)) {
+              minHeight += " - " + dimensions$1(query(this.offsetBottom, this.$el)).height + "px";
+            }
 
+            minHeight += (box ? " - " + box + "px" : '') + ")";
+          }
 
-    const Spinner = {
-      extends: IconComponent,
+          return { minHeight, prev };
+        },
 
-      methods: {
-        async getSvg() {
-          const icon = await Icon.methods.getSvg.call(this);
+        write(_ref2) {let { minHeight } = _ref2;
+          css(this.$el, { minHeight });
 
-          if (this.ratio !== 1) {
-            css($('circle', icon), 'strokeWidth', 1 / this.ratio);
+          if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
+            css(this.$el, 'minHeight', this.minHeight);
           }
+        },
 
-          return icon;
-        } } };
+        events: ['resize'] } };
 
+    var SVG = {
+      args: 'src',
 
+      props: {
+        id: Boolean,
+        icon: String,
+        src: String,
+        style: String,
+        width: Number,
+        height: Number,
+        ratio: Number,
+        class: String,
+        strokeAnimation: Boolean,
+        focusable: Boolean, // IE 11
+        attributes: 'list' },
 
-    const parsed = {};
-    function install$3(UIkit) {
-      UIkit.icon.add = (name, svg) => {
-        const added = isString(name) ? { [name]: svg } : name;
-        each(added, (svg, name) => {
-          icons[name] = svg;
-          delete parsed[name];
-        });
 
-        if (UIkit._initialized) {
-          apply(document.body, (el) =>
-          each(UIkit.getComponents(el), (cmp) => {
-            cmp.$options.isIcon && cmp.icon in added && cmp.$reset();
-          }));
+      data: {
+        ratio: 1,
+        include: ['style', 'class', 'focusable'],
+        class: '',
+        strokeAnimation: false },
 
-        }
-      };
-    }
 
-    function getIcon(icon) {
-      if (!icons[icon]) {
-        return null;
-      }
+      beforeConnect() {
+        this.class += ' uk-svg';
+      },
 
-      if (!parsed[icon]) {
-        parsed[icon] = $((icons[applyRtl(icon)] || icons[icon]).trim());
-      }
+      connected() {
+        if (!this.icon && includes(this.src, '#')) {
+          [this.src, this.icon] = this.src.split('#');
+        }
 
-      return parsed[icon].cloneNode(true);
-    }
+        this.svg = this.getSvg().then((el) => {
+          if (this._connected) {
+            const svg = insertSVG(el, this.$el);
 
-    function applyRtl(icon) {
-      return isRtl ? swap(swap(icon, 'left', 'right'), 'previous', 'next') : icon;
-    }
+            if (this.svgEl && svg !== this.svgEl) {
+              remove$1(this.svgEl);
+            }
 
-    const nativeLazyLoad = inBrowser && 'loading' in HTMLImageElement.prototype;
+            this.applyAttributes(svg, el);
 
-    var img = {
-      args: 'dataSrc',
+            return this.svgEl = svg;
+          }
+        }, noop);
 
-      props: {
-        dataSrc: String,
-        sources: String,
-        offsetTop: String,
-        offsetLeft: String,
-        target: String,
-        loading: String },
+        if (this.strokeAnimation) {
+          this.svg.then((el) => {
+            if (this._connected) {
+              applyAnimation(el);
+              this.registerObserver(
+              observeIntersection(el, (records, observer) => {
+                applyAnimation(el);
+                observer.disconnect();
+              }));
 
+            }
+          });
+        }
+      },
 
-      data: {
-        dataSrc: '',
-        sources: false,
-        offsetTop: '50vh',
-        offsetLeft: '50vw',
-        target: false,
-        loading: 'lazy' },
+      disconnected() {
+        this.svg.then((svg) => {
+          if (this._connected) {
+            return;
+          }
 
+          if (isVoidElement(this.$el)) {
+            this.$el.hidden = false;
+          }
 
-      connected() {
-        if (this.loading !== 'lazy') {
-          this.load();
-          return;
-        }
+          remove$1(svg);
+          this.svgEl = null;
+        });
 
-        const target = [this.$el, ...queryAll(this.$props.target, this.$el)];
+        this.svg = null;
+      },
 
-        if (nativeLazyLoad && isImg(this.$el)) {
-          this.$el.loading = 'lazy';
-          setSrcAttrs(this.$el);
+      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())));
 
-          if (target.length === 1) {
-            return;
           }
-        }
-
-        ensureSrcAttribute(this.$el);
 
-        this.registerObserver(
-        observeIntersection(
-        target,
-        (entries, observer) => {
-          this.load();
-          observer.disconnect();
+          return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject('SVG not found.');
         },
-        {
-          rootMargin: toPx(this.offsetTop, 'height') + "px " + toPx(
-          this.offsetLeft,
-          'width') + "px" }));
-
 
+        applyAttributes(el, ref) {
+          for (const prop in this.$options.props) {
+            if (includes(this.include, prop) && prop in this) {
+              attr(el, prop, this[prop]);
+            }
+          }
 
+          for (const attribute in this.attributes) {
+            const [prop, value] = this.attributes[attribute].split(':', 2);
+            attr(el, prop, value);
+          }
 
-      },
+          if (!this.id) {
+            removeAttr(el, 'id');
+          }
 
-      disconnected() {
-        if (this._data.image) {
-          this._data.image.onload = '';
-        }
-      },
+          const props = ['width', 'height'];
+          let dimensions = props.map((prop) => this[prop]);
 
-      methods: {
-        load() {
-          if (this._data.image) {
-            return this._data.image;
+          if (!dimensions.some((val) => val)) {
+            dimensions = props.map((prop) => attr(ref, prop));
           }
 
-          const image = isImg(this.$el) ?
-          this.$el :
-          getImageFromElement(this.$el, this.dataSrc, this.sources);
+          const viewBox = attr(ref, 'viewBox');
+          if (viewBox && !dimensions.some((val) => val)) {
+            dimensions = viewBox.split(' ').slice(2);
+          }
 
-          removeAttr(image, 'loading');
-          setSrcAttrs(this.$el, image.currentSrc);
-          return this._data.image = image;
+          dimensions.forEach((val, i) => attr(el, props[i], toFloat(val) * this.ratio || null));
         } } };
 
 
 
-    function setSrcAttrs(el, src) {
-      if (isImg(el)) {
-        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) {
-          css(el, 'backgroundImage', "url(" + escape(src) + ")");
-          trigger(el, createEvent('load', false));
+    const loadSVG = memoize(async (src) => {
+      if (src) {
+        if (startsWith(src, 'data:')) {
+          return decodeURIComponent(src.split(',')[1]);
+        } else {
+          return (await fetch(src)).text();
         }
+      } else {
+        return Promise.reject();
       }
-    }
+    });
 
-    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 parseSVG(svg, icon) {var _svg;
+      if (icon && includes(svg, '<symbol')) {
+        svg = parseSymbols(svg, icon) || svg;
+      }
+
+      svg = $(svg.substr(svg.indexOf('<svg')));
+      return ((_svg = svg) == null ? void 0 : _svg.hasChildNodes()) && svg;
     }
 
-    function getImageFromElement(el, src, sources) {
-      const img = new Image();
+    const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
+    const symbols = {};
 
-      wrapInPicture(img, sources);
-      setSourceProps(el, img);
-      img.onload = () => {
-        setSrcAttrs(el, img.currentSrc);
-      };
-      attr(img, 'src', src);
-      return img;
-    }
+    function parseSymbols(svg, icon) {
+      if (!symbols[svg]) {
+        symbols[svg] = {};
 
-    function wrapInPicture(img, sources) {
-      sources = parseSources(sources);
+        symbolRe.lastIndex = 0;
 
-      if (sources.length) {
-        const picture = fragment('<picture>');
-        for (const attrs of sources) {
-          const source = fragment('<source>');
-          attr(source, attrs);
-          append(picture, source);
+        let match;
+        while (match = symbolRe.exec(svg)) {
+          symbols[svg][match[3]] = "<svg xmlns=\"http://www.w3.org/2000/svg\"" + match[1] + "svg>";
         }
-        append(picture, img);
       }
+
+      return symbols[svg][icon];
     }
 
-    function parseSources(sources) {
-      if (!sources) {
-        return [];
+    function applyAnimation(el) {
+      const length = getMaxPathLength(el);
+
+      if (length) {
+        el.style.setProperty('--uk-animation-stroke', length);
       }
+    }
 
-      if (startsWith(sources, '[')) {
+    function getMaxPathLength(el) {
+      return Math.ceil(
+      Math.max(
+      0,
+      ...$$('[stroke]', el).map((stroke) => {
         try {
-          sources = JSON.parse(sources);
+          return stroke.getTotalLength();
         } catch (e) {
-          sources = [];
+          return 0;
         }
-      } else {
-        sources = parseOptions(sources);
-      }
+      })));
 
-      if (!isArray(sources)) {
-        sources = [sources];
-      }
 
-      return sources.filter((source) => !isEmpty(source));
     }
 
-    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 insertSVG(el, root) {
+      if (isVoidElement(root) || isTag(root, 'canvas')) {
+        root.hidden = true;
+
+        const next = root.nextElementSibling;
+        return equals(el, next) ? next : after(root, el);
       }
+
+      const last = root.lastElementChild;
+      return equals(el, last) ? last : append(root, el);
     }
 
-    function isPicture(el) {
-      return isTag(el, 'picture');
+    function equals(el, other) {
+      return isTag(el, 'svg') && isTag(other, 'svg') && innerHTML(el) === innerHTML(other);
     }
 
-    function isImg(el) {
-      return isTag(el, 'img');
+    function innerHTML(el) {
+      return (
+      el.innerHTML ||
+      new XMLSerializer().serializeToString(el).replace(/<svg.*?>(.*?)<\/svg>/g, '$1')).
+      replace(/\s/g, '');
     }
 
-    var Media = {
-      props: {
-        media: Boolean },
+    var closeIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"1\" y1=\"1\" x2=\"13\" y2=\"13\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"13\" y1=\"1\" x2=\"1\" y2=\"13\"/></svg>";
 
+    var closeLarge = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"1\" y1=\"1\" x2=\"19\" y2=\"19\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"19\" y1=\"1\" x2=\"1\" y2=\"19\"/></svg>";
 
-      data: {
-        media: false },
+    var marker = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"9\" y=\"4\" width=\"1\" height=\"11\"/><rect x=\"4\" y=\"9\" width=\"11\" height=\"1\"/></svg>";
 
+    var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect y=\"9\" width=\"20\" height=\"2\"/><rect y=\"3\" width=\"20\" height=\"2\"/><rect y=\"15\" width=\"20\" height=\"2\"/></svg>";
 
-      connected() {
-        const media = toMedia(this.media);
-        this.matchMedia = true;
-        if (media) {
-          this.mediaObj = window.matchMedia(media);
-          const handler = () => {
-            this.matchMedia = this.mediaObj.matches;
-            trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
-          };
-          this.offMediaObj = on(this.mediaObj, 'change', () => {
-            handler();
-            this.$emit('resize');
-          });
-          handler();
-        }
-      },
+    var overlayIcon = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"19\" y=\"0\" width=\"1\" height=\"40\"/><rect x=\"0\" y=\"19\" width=\"40\" height=\"1\"/></svg>";
 
-      disconnected() {var _this$offMediaObj;
-        (_this$offMediaObj = this.offMediaObj) == null ? void 0 : _this$offMediaObj.call(this);
-      } };
+    var paginationNext = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 1 6 6 1 11\"/></svg>";
 
+    var paginationPrevious = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"6 1 1 6 6 11\"/></svg>";
 
-    function toMedia(value) {
-      if (isString(value)) {
-        if (startsWith(value, '@')) {
-          const name = "breakpoint-" + value.substr(1);
-          value = toFloat(getCssVar(name));
-        } else if (isNaN(value)) {
-          return value;
-        }
-      }
+    var searchIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"9\" cy=\"9\" r=\"7\"/><path fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" d=\"M14,14 L18,18 L14,14 Z\"/></svg>";
 
-      return value && isNumeric(value) ? "(min-width: " + value + "px)" : '';
-    }
+    var searchLarge = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" cx=\"17.5\" cy=\"17.5\" r=\"16.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" x1=\"38\" y1=\"39\" x2=\"29\" y2=\"30\"/></svg>";
+
+    var searchNavbar = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"10.5\" cy=\"10.5\" r=\"9.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"23\" y1=\"23\" x2=\"17\" y2=\"17\"/></svg>";
+
+    var slidenavNext = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"1.225,23 12.775,12 1.225,1 \"/></svg>";
+
+    var slidenavNextLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"4.002,38.547 22.527,20.024 4,1.5 \"/></svg>";
+
+    var slidenavPrevious = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"12.775,1 1.225,12 12.775,23 \"/></svg>";
+
+    var slidenavPreviousLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"20.527,1.5 2,20.024 20.525,38.547 \"/></svg>";
+
+    var spinner = "<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" cx=\"15\" cy=\"15\" r=\"14\"/></svg>";
+
+    var totop = "<svg width=\"18\" height=\"10\" viewBox=\"0 0 18 10\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 9 9 1 17 9 \"/></svg>";
+
+    const icons = {
+      spinner,
+      totop,
+      marker,
+      'close-icon': closeIcon,
+      'close-large': closeLarge,
+      'navbar-toggle-icon': navbarToggleIcon,
+      'overlay-icon': overlayIcon,
+      'pagination-next': paginationNext,
+      'pagination-previous': paginationPrevious,
+      'search-icon': searchIcon,
+      'search-large': searchLarge,
+      'search-navbar': searchNavbar,
+      'slidenav-next': slidenavNext,
+      'slidenav-next-large': slidenavNextLarge,
+      'slidenav-previous': slidenavPrevious,
+      'slidenav-previous-large': slidenavPreviousLarge };
+
+
+    const Icon = {
+      install: install$3,
+
+      extends: SVG,
+
+      args: 'icon',
+
+      props: ['icon'],
+
+      data: {
+        include: ['focusable'] },
+
+
+      isIcon: true,
+
+      beforeConnect() {
+        addClass(this.$el, 'uk-icon');
+      },
+
+      methods: {
+        async getSvg() {
+          const icon = getIcon(this.icon);
+
+          if (!icon) {
+            throw 'Icon not found.';
+          }
 
-    var leader = {
-      mixins: [Class, Media, Resize],
+          return icon;
+        } } };
 
-      props: {
-        fill: String },
+    const IconComponent = {
+      args: false,
 
+      extends: Icon,
 
-      data: {
-        fill: '',
-        clsWrapper: 'uk-leader-fill',
-        clsHide: 'uk-leader-hide',
-        attrFill: 'data-fill' },
+      data: (vm) => ({
+        icon: hyphenate(vm.constructor.options.name) }),
 
 
-      computed: {
-        fill(_ref) {let { fill } = _ref;
-          return fill || getCssVar('leader-fill-content');
-        } },
+      beforeConnect() {
+        addClass(this.$el, this.$name);
+      } };
 
 
-      connected() {
-        [this.wrapper] = wrapInner(this.$el, "<span class=\"" + this.clsWrapper + "\">");
-      },
+    const Slidenav = {
+      extends: IconComponent,
 
-      disconnected() {
-        unwrap(this.wrapper.childNodes);
-      },
+      beforeConnect() {
+        addClass(this.$el, 'uk-slidenav');
+        const icon = this.$props.icon;
+        this.icon = hasClass(this.$el, 'uk-slidenav-large') ? icon + "-large" : icon;
+      } };
 
-      update: {
-        read() {
-          const width = Math.trunc(this.$el.offsetWidth / 2);
 
-          return {
-            width,
-            fill: this.fill,
-            hide: !this.matchMedia };
+    const Search = {
+      extends: IconComponent,
 
-        },
+      beforeConnect() {
+        this.icon =
+        hasClass(this.$el, 'uk-search-icon') && parents(this.$el, '.uk-search-large').length ?
+        'search-large' :
+        parents(this.$el, '.uk-search-navbar').length ?
+        'search-navbar' :
+        this.$props.icon;
+      } };
 
-        write(_ref2) {let { width, fill, hide } = _ref2;
-          toggleClass(this.wrapper, this.clsHide, hide);
-          attr(this.wrapper, this.attrFill, new Array(width).join(fill));
-        },
 
-        events: ['resize'] } };
+    const Close = {
+      extends: IconComponent,
 
-    const active = [];
+      beforeConnect() {
+        this.icon = "close-" + (hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon');
+      } };
 
-    var Modal = {
-      mixins: [Class, Container, Togglable],
 
-      props: {
-        selPanel: String,
-        selClose: String,
-        escClose: Boolean,
-        bgClose: Boolean,
-        stack: Boolean },
+    const Spinner = {
+      extends: IconComponent,
 
+      methods: {
+        async getSvg() {
+          const icon = await Icon.methods.getSvg.call(this);
 
-      data: {
-        cls: 'uk-open',
-        escClose: true,
-        bgClose: true,
-        overlay: true,
-        stack: false },
+          if (this.ratio !== 1) {
+            css($('circle', icon), 'strokeWidth', 1 / this.ratio);
+          }
 
+          return icon;
+        } } };
 
-      computed: {
-        panel(_ref, $el) {let { selPanel } = _ref;
-          return $(selPanel, $el);
-        },
 
-        transitionElement() {
-          return this.panel;
-        },
 
-        bgClose(_ref2) {let { bgClose } = _ref2;
-          return bgClose && this.panel;
-        } },
+    const parsed = {};
+    function install$3(UIkit) {
+      UIkit.icon.add = (name, svg) => {
+        const added = isString(name) ? { [name]: svg } : name;
+        each(added, (svg, name) => {
+          icons[name] = svg;
+          delete parsed[name];
+        });
 
+        if (UIkit._initialized) {
+          apply(document.body, (el) =>
+          each(UIkit.getComponents(el), (cmp) => {
+            cmp.$options.isIcon && cmp.icon in added && cmp.$reset();
+          }));
 
-      beforeDisconnect() {
-        if (includes(active, this)) {
-          this.toggleElement(this.$el, false, false);
         }
-      },
+      };
+    }
 
-      events: [
-      {
-        name: 'click',
+    function getIcon(icon) {
+      if (!icons[icon]) {
+        return null;
+      }
 
-        delegate() {
-          return this.selClose;
-        },
+      if (!parsed[icon]) {
+        parsed[icon] = $((icons[applyRtl(icon)] || icons[icon]).trim());
+      }
 
-        handler(e) {
-          e.preventDefault();
-          this.hide();
-        } },
+      return parsed[icon].cloneNode(true);
+    }
 
+    function applyRtl(icon) {
+      return isRtl ? swap(swap(icon, 'left', 'right'), 'previous', 'next') : icon;
+    }
 
-      {
-        name: 'toggle',
+    const nativeLazyLoad = inBrowser && 'loading' in HTMLImageElement.prototype;
 
-        self: true,
+    var img = {
+      args: 'dataSrc',
 
-        handler(e) {
-          if (e.defaultPrevented) {
-            return;
-          }
+      props: {
+        dataSrc: String,
+        sources: String,
+        offsetTop: String,
+        offsetLeft: String,
+        target: String,
+        loading: String },
 
-          e.preventDefault();
 
-          if (this.isToggled() === includes(active, this)) {
-            this.toggle();
-          }
-        } },
+      data: {
+        dataSrc: '',
+        sources: false,
+        offsetTop: '50vh',
+        offsetLeft: '50vw',
+        target: false,
+        loading: 'lazy' },
 
 
-      {
-        name: 'beforeshow',
+      connected() {
+        if (this.loading !== 'lazy') {
+          this.load();
+          return;
+        }
 
-        self: true,
+        const target = [this.$el, ...queryAll(this.$props.target, this.$el)];
 
-        handler(e) {
-          if (includes(active, this)) {
-            return false;
-          }
+        if (nativeLazyLoad && isImg(this.$el)) {
+          this.$el.loading = 'lazy';
+          setSrcAttrs(this.$el);
 
-          if (!this.stack && active.length) {
-            Promise.all(active.map((modal) => modal.hide())).then(this.show);
-            e.preventDefault();
-          } else {
-            active.push(this);
+          if (target.length === 1) {
+            return;
           }
-        } },
+        }
 
+        ensureSrcAttribute(this.$el);
 
-      {
-        name: 'show',
+        this.registerObserver(
+        observeIntersection(
+        target,
+        (entries, observer) => {
+          this.load();
+          observer.disconnect();
+        },
+        {
+          rootMargin: toPx(this.offsetTop, 'height') + "px " + toPx(
+          this.offsetLeft,
+          'width') + "px" }));
 
-        self: true,
 
-        handler() {
-          const docEl = document.documentElement;
 
-          if (width(window) > docEl.clientWidth && this.overlay) {
-            css(document.body, 'overflowY', 'scroll');
-          }
 
-          if (this.stack) {
-            css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active.length);
+      },
+
+      disconnected() {
+        if (this._data.image) {
+          this._data.image.onload = '';
+        }
+      },
+
+      methods: {
+        load() {
+          if (this._data.image) {
+            return this._data.image;
           }
 
-          addClass(docEl, this.clsPage);
+          const image = isImg(this.$el) ?
+          this.$el :
+          getImageFromElement(this.$el, this.dataSrc, this.sources);
 
-          if (this.bgClose) {
-            once(
-            this.$el,
-            'hide',
-            on(document, pointerDown, (_ref3) => {let { target } = _ref3;
-              if (
-              last(active) !== this ||
-              this.overlay && !within(target, this.$el) ||
-              within(target, this.panel))
-              {
-                return;
-              }
+          removeAttr(image, 'loading');
+          setSrcAttrs(this.$el, image.currentSrc);
+          return this._data.image = image;
+        } } };
+
+
+
+    function setSrcAttrs(el, src) {
+      if (isImg(el)) {
+        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) {
+          css(el, 'backgroundImage', "url(" + escape(src) + ")");
+          trigger(el, createEvent('load', false));
+        }
+      }
+    }
+
+    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);
+        }
+      });
+    }
 
-              once(
-              document,
-              pointerUp + " " + pointerCancel + " scroll",
-              (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
-                if (
-                !defaultPrevented &&
-                type === pointerUp &&
-                target === newTarget)
-                {
-                  this.hide();
-                }
-              },
-              true);
+    function getImageFromElement(el, src, sources) {
+      const img = new Image();
 
-            }),
-            { self: true });
+      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 (this.escClose) {
-            once(
-            this.$el,
-            'hide',
-            on(document, 'keydown', (e) => {
-              if (e.keyCode === 27 && last(active) === this) {
-                this.hide();
-              }
-            }),
-            { self: true });
+      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];
+      }
 
-      {
-        name: 'shown',
+      return sources.filter((source) => !isEmpty(source));
+    }
 
-        self: true,
+    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>');
+      }
+    }
 
-        handler() {
-          if (!isFocusable(this.$el)) {
-            attr(this.$el, 'tabindex', '-1');
-          }
+    function isPicture(el) {
+      return isTag(el, 'picture');
+    }
 
-          if (!$(':focus', this.$el)) {
-            this.$el.focus();
-          }
-        } },
+    function isImg(el) {
+      return isTag(el, 'img');
+    }
 
+    var Media = {
+      props: {
+        media: Boolean },
 
-      {
-        name: 'hidden',
 
-        self: true,
+      data: {
+        media: false },
 
-        handler() {
-          if (includes(active, this)) {
-            active.splice(active.indexOf(this), 1);
-          }
 
-          if (!active.length) {
-            css(document.body, 'overflowY', '');
-          }
+      connected() {
+        const media = toMedia(this.media);
+        this.matchMedia = true;
+        if (media) {
+          this.mediaObj = window.matchMedia(media);
+          const handler = () => {
+            this.matchMedia = this.mediaObj.matches;
+            trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
+          };
+          this.offMediaObj = on(this.mediaObj, 'change', () => {
+            handler();
+            this.$emit('resize');
+          });
+          handler();
+        }
+      },
 
-          css(this.$el, 'zIndex', '');
+      disconnected() {var _this$offMediaObj;
+        (_this$offMediaObj = this.offMediaObj) == null ? void 0 : _this$offMediaObj.call(this);
+      } };
 
-          if (!active.some((modal) => modal.clsPage === this.clsPage)) {
-            removeClass(document.documentElement, this.clsPage);
-          }
-        } }],
 
+    function toMedia(value) {
+      if (isString(value)) {
+        if (startsWith(value, '@')) {
+          const name = "breakpoint-" + value.substr(1);
+          value = toFloat(getCssVar(name));
+        } else if (isNaN(value)) {
+          return value;
+        }
+      }
+
+      return value && isNumeric(value) ? "(min-width: " + value + "px)" : '';
+    }
 
+    var leader = {
+      mixins: [Class, Media, Resize],
 
-      methods: {
-        toggle() {
-          return this.isToggled() ? this.hide() : this.show();
-        },
+      props: {
+        fill: String },
 
-        show() {
-          if (this.container && parent(this.$el) !== this.container) {
-            append(this.container, this.$el);
-            return new Promise((resolve) =>
-            requestAnimationFrame(() => this.show().then(resolve)));
 
-          }
+      data: {
+        fill: '',
+        clsWrapper: 'uk-leader-fill',
+        clsHide: 'uk-leader-hide',
+        attrFill: 'data-fill' },
 
-          return this.toggleElement(this.$el, true, animate(this));
-        },
 
-        hide() {
-          return this.toggleElement(this.$el, false, animate(this));
-        } } };
+      computed: {
+        fill(_ref) {let { fill } = _ref;
+          return fill || getCssVar('leader-fill-content');
+        } },
 
 
+      connected() {
+        [this.wrapper] = wrapInner(this.$el, "<span class=\"" + this.clsWrapper + "\">");
+      },
 
-    function animate(_ref5) {let { transitionElement, _toggle } = _ref5;
-      return (el, show) =>
-      new Promise((resolve, reject) =>
-      once(el, 'show hide', () => {
-        el._reject == null ? void 0 : el._reject();
-        el._reject = reject;
+      disconnected() {
+        unwrap(this.wrapper.childNodes);
+      },
 
-        _toggle(el, show);
+      update: {
+        read() {
+          const width = Math.trunc(this.$el.offsetWidth / 2);
 
-        const off = once(
-        transitionElement,
-        'transitionstart',
-        () => {
-          once(transitionElement, 'transitionend transitioncancel', resolve, {
-            self: true });
+          return {
+            width,
+            fill: this.fill,
+            hide: !this.matchMedia };
 
-          clearTimeout(timer);
         },
-        { self: true });
-
 
-        const timer = setTimeout(() => {
-          off();
-          resolve();
-        }, toMs(css(transitionElement, 'transitionDuration')));
-      })).
-      then(() => delete el._reject);
-    }
+        write(_ref2) {let { width, fill, hide } = _ref2;
+          toggleClass(this.wrapper, this.clsHide, hide);
+          attr(this.wrapper, this.attrFill, new Array(width).join(fill));
+        },
 
-    function toMs(time) {
-      return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
-    }
+        events: ['resize'] } };
 
     var modal = {
       install: install$2,
@@ -6070,7 +6164,7 @@
 
       methods: {
         getActive() {
-          return active$1 && within(active$1.target, this.$el) && active$1;
+          return active && within(active.target, this.$el) && active;
         },
 
         transitionTo(newHeight, el) {
@@ -6163,7 +6257,7 @@
 
         registerEvent(this, {
           el: this.swipeTarget,
-          name: pointerDown,
+          name: pointerDown$1,
           passive: true,
           handler(e) {
             if (!isTouch(e)) {
@@ -6173,7 +6267,7 @@
             // Handle Swipe Gesture
             const pos = getEventPos(e);
             const target = 'tagName' in e.target ? e.target : parent(e.target);
-            once(document, pointerUp + " " + pointerCancel + " scroll", (e) => {
+            once(document, pointerUp$1 + " " + pointerCancel + " scroll", (e) => {
               const { x, y } = getEventPos(e);
 
               // swipe
@@ -6280,22 +6374,6 @@
         } },
 
 
-      {
-        name: 'touchstart',
-
-        passive: true,
-
-        el() {
-          return this.panel;
-        },
-
-        handler(_ref8) {let { targetTouches } = _ref8;
-          if (targetTouches.length === 1) {
-            this.clientY = targetTouches[0].clientY;
-          }
-        } },
-
-
       {
         name: 'touchmove',
 
@@ -6311,33 +6389,6 @@
         } },
 
 
-      {
-        name: 'touchmove',
-
-        passive: false,
-
-        el() {
-          return this.panel;
-        },
-
-        handler(e) {
-          if (e.targetTouches.length !== 1) {
-            return;
-          }
-
-          const clientY = e.targetTouches[0].clientY - this.clientY;
-          const { scrollTop, scrollHeight, clientHeight } = this.panel;
-
-          if (
-          clientHeight >= scrollHeight ||
-          scrollTop === 0 && clientY > 0 ||
-          scrollHeight - scrollTop <= clientHeight && clientY < 0)
-          {
-            e.cancelable && e.preventDefault();
-          }
-        } },
-
-
       {
         name: 'show',
 
@@ -6349,7 +6400,6 @@
             addClass(parent(this.panel), this.clsMode);
           }
 
-          css(document.documentElement, 'overflowY', this.overlay ? 'hidden' : '');
           addClass(document.body, this.clsContainer, this.clsFlip);
           css(document.body, 'touch-action', 'pan-y pinch-zoom');
           css(this.$el, 'display', 'block');
@@ -6357,7 +6407,7 @@
           addClass(
           this.panel,
           this.clsSidebarAnimation,
-          this.mode !== 'reveal' ? this.clsMode : '');
+          this.mode === 'reveal' ? '' : this.clsMode);
 
 
           height(document.body); // force reflow
@@ -6394,8 +6444,6 @@
           removeClass(this.$el, this.clsOverlay);
           css(this.$el, 'display', '');
           removeClass(document.body, this.clsContainer, this.clsFlip);
-
-          css(document.documentElement, 'overflowY', '');
         } },
 
 
@@ -6871,7 +6919,9 @@
         },
 
         handler() {
-          if (!location.hash || scrollTop(window) === 0) {
+          const { scrollingElement } = document;
+
+          if (!location.hash || scrollingElement.scrollTop === 0) {
             return;
           }
 
@@ -6880,13 +6930,11 @@
             const elOffset = offset(this.$el);
 
             if (this.isFixed && intersectRect(targetOffset, elOffset)) {
-              scrollTop(
-              window,
+              scrollingElement.scrollTop =
               targetOffset.top -
               elOffset.height -
               toPx(this.targetOffset, 'height', this.placeholder) -
-              toPx(this.offset, 'height', this.placeholder));
-
+              toPx(this.offset, 'height', this.placeholder);
             }
           });
         } }],
@@ -6984,7 +7032,7 @@
 
 
         {let { scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end } = _ref4;
-          const scroll = scrollTop(window);
+          const scroll = document.scrollingElement.scrollTop;
           const dir = prevScroll <= scroll ? 'down' : 'up';
 
           return {
@@ -7200,7 +7248,7 @@
 
           watch(connects) {
             if (this.swiping) {
-              css(connects, 'touch-action', 'pan-y pinch-zoom');
+              css(connects, 'touchAction', 'pan-y pinch-zoom');
             }
 
             const index = this.index();
@@ -7393,7 +7441,7 @@
 
       events: [
       {
-        name: pointerDown,
+        name: pointerDown$1,
 
         filter() {
           return includes(this.mode, 'hover');
@@ -7411,7 +7459,7 @@
           trigger(this.$el, 'focus');
           once(
           document,
-          pointerDown,
+          pointerDown$1,
           () => trigger(this.$el, 'blur'),
           true,
           (e) => !within(e.target, this.$el));
@@ -8410,6 +8458,11 @@
           this.interval && clearInterval(this.interval);
         } } };
 
+    const pointerOptions = { passive: false, capture: true };
+    const pointerDown = 'touchstart mousedown';
+    const pointerMove = 'touchmove mousemove';
+    const pointerUp = 'touchend touchcancel mouseup click input';
+
     var SliderDrag = {
       props: {
         draggable: Boolean },
@@ -8462,7 +8515,17 @@
 
         handler(e) {
           e.preventDefault();
-        } }],
+        } },
+
+
+      {
+        // iOS workaround for slider stopping if swiping fast
+        name: pointerMove + " " + pointerUp,
+        el() {
+          return this.list;
+        },
+        handler: noop,
+        ...pointerOptions }],
 
 
 
@@ -8484,10 +8547,10 @@
             this.prevIndex = this.index;
           }
 
-          on(document, pointerMove, this.move, { passive: false });
+          on(document, pointerMove, this.move, pointerOptions);
 
           // 'input' event is triggered by video controls
-          on(document, pointerUp + " " + pointerCancel + " input", this.end, true);
+          on(document, pointerUp, this.end, pointerOptions);
 
           css(this.list, 'userSelect', 'none');
         },
@@ -8567,8 +8630,8 @@
         },
 
         end() {
-          off(document, pointerMove, this.move, { passive: false });
-          off(document, pointerUp + " " + pointerCancel + " input", this.end, true);
+          off(document, pointerMove, this.move, pointerOptions);
+          off(document, pointerUp, this.end, pointerOptions);
 
           if (this.dragging) {
             this.dragging = null;
@@ -8976,7 +9039,7 @@
 
       events: [
       {
-        name: pointerMove + " " + pointerDown + " keydown",
+        name: pointerMove$1 + " " + pointerDown$1 + " keydown",
 
         handler: 'showControls' },
 
@@ -9648,7 +9711,7 @@
         positions[prop] = getBackgroundPos(el, prop);
       }
 
-      return setBackgroundPosFn(bgProps, props, positions);
+      return setBackgroundPosFn(bgProps, positions, props);
     }
 
     function backgroundCoverFn(prop, el, stops, props) {
@@ -10631,7 +10694,7 @@
       },
 
       events: {
-        name: pointerDown,
+        name: pointerDown$1,
         passive: false,
         handler: 'init' },
 
@@ -10761,8 +10824,8 @@
           this.placeholder = placeholder;
           this.origin = { target, index: index(placeholder), ...this.pos };
 
-          on(document, pointerMove, this.move);
-          on(document, pointerUp, this.end);
+          on(document, pointerMove$1, this.move);
+          on(document, pointerUp$1, this.end);
 
           if (!this.threshold) {
             this.start(e);
@@ -10798,8 +10861,8 @@
         },
 
         end() {
-          off(document, pointerMove, this.move);
-          off(document, pointerUp, this.end);
+          off(document, pointerMove$1, this.move);
+          off(document, pointerUp$1, this.end);
 
           if (!this.drag) {
             return;
@@ -10868,7 +10931,7 @@
       let last = Date.now();
       trackTimer = setInterval(() => {
         let { x, y } = pos;
-        y += scrollTop(window);
+        y += document.scrollingElement.scrollTop;
 
         const dist = (Date.now() - last) * 0.3;
         last = Date.now();
@@ -10889,7 +10952,7 @@
           }
 
           if (scroll > 0 && scroll < scrollHeight - height) {
-            scrollTop(scrollEl, scroll);
+            scrollEl.scrollTop = scroll;
             return true;
           }
         });
@@ -11034,11 +11097,11 @@
 
           this._unbind = once(
           document, "show keydown " +
-          pointerDown,
+          pointerDown$1,
           this.hide,
           false,
           (e) =>
-          e.type === pointerDown && !within(e.target, this.$el) ||
+          e.type === pointerDown$1 && !within(e.target, this.$el) ||
           e.type === 'keydown' && e.keyCode === 27 ||
           e.type === 'show' && e.detail[0] !== this && e.detail[0].$name === this.$name);
 
@@ -11109,7 +11172,7 @@
 
         // Clicking a button does not give it focus on all browsers and platforms
         // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
-        [pointerDown](e) {
+        [pointerDown$1](e) {
           if (isTouch(e)) {
             this.show();
           }