uikit 3.15.17 → 3.15.18-dev.014d8e608

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.15.17 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.15.18-dev.014d8e608 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -152,7 +152,7 @@
     }
 
     function swap(value, a, b) {
-      return value.replace(new RegExp(a + "|" + b, 'g'), (match) => match === a ? b : a);
+      return value.replace(new RegExp(`${a}|${b}`, 'g'), (match) => match === a ? b : a);
     }
 
     function last(array) {
@@ -171,8 +171,8 @@
     function sortBy$1(array, prop) {
       return array.
       slice().
-      sort((_ref, _ref2) => {let { [prop]: propA = 0 } = _ref;let { [prop]: propB = 0 } = _ref2;return (
-          propA > propB ? 1 : propB > propA ? -1 : 0);});
+      sort(({ [prop]: propA = 0 }, { [prop]: propB = 0 }) =>
+      propA > propB ? 1 : propB > propA ? -1 : 0);
 
     }
 
@@ -185,24 +185,24 @@
 
     function uniqueBy(array, prop) {
       const seen = new Set();
-      return array.filter((_ref3) => {let { [prop]: check } = _ref3;return seen.has(check) ? false : seen.add(check);});
+      return array.filter(({ [prop]: check }) => seen.has(check) ? false : seen.add(check));
     }
 
-    function clamp(number, min, max) {if (min === void 0) {min = 0;}if (max === void 0) {max = 1;}
+    function clamp(number, min = 0, max = 1) {
       return Math.min(Math.max(toNumber(number) || 0, min), max);
     }
 
     function noop() {}
 
-    function intersectRect() {for (var _len = arguments.length, rects = new Array(_len), _key = 0; _key < _len; _key++) {rects[_key] = arguments[_key];}
+    function intersectRect(...rects) {
       return [
       ['bottom', 'top'],
       ['right', 'left']].
       every(
-      (_ref4) => {let [minProp, maxProp] = _ref4;return (
-          Math.min(...rects.map((_ref5) => {let { [minProp]: min } = _ref5;return min;})) -
-          Math.max(...rects.map((_ref6) => {let { [maxProp]: max } = _ref6;return max;})) >
-          0);});
+      ([minProp, maxProp]) =>
+      Math.min(...rects.map(({ [minProp]: min }) => min)) -
+      Math.max(...rects.map(({ [maxProp]: max }) => max)) >
+      0);
 
     }
 
@@ -254,7 +254,7 @@
 
     const Dimensions = { ratio, contain, cover: cover$1 };
 
-    function getIndex(i, elements, current, finite) {if (current === void 0) {current = 0;}if (finite === void 0) {finite = false;}
+    function getIndex(i, elements, current = 0, finite = false) {
       elements = toNodes(elements);
 
       const { length } = elements;
@@ -333,7 +333,7 @@
     }
 
     function data(element, attribute) {
-      for (const name of [attribute, "data-" + attribute]) {
+      for (const name of [attribute, `data-${attribute}`]) {
         if (hasAttr(element, name)) {
           return attr(element, name);
         }
@@ -372,7 +372,7 @@
       return toNodes(element).some((element) => matches(element, selInput));
     }
 
-    const selFocusable = selInput + ",a[href],[tabindex]";
+    const selFocusable = `${selInput},a[href],[tabindex]`;
     function isFocusable(element) {
       return matches(element, selFocusable);
     }
@@ -444,7 +444,7 @@
     const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
     const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
 
-    function getContext(selector, context) {if (context === void 0) {context = document;}
+    function getContext(selector, context = document) {
       return isString(selector) && isContextSelector(selector) || isDocument(context) ?
       context :
       context.ownerDocument;
@@ -453,7 +453,7 @@
     const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
     const sanatize = memoize((selector) => selector.replace(contextSanitizeRe, '$1 *'));
 
-    function _query(selector, context, queryFn) {if (context === void 0) {context = document;}
+    function _query(selector, context = document, queryFn) {
       if (!selector || !isString(selector)) {
         return selector;
       }
@@ -483,7 +483,7 @@
           }
 
           if (ctx) {
-            selector += "" + (selector ? ',' : '') + domPath(ctx) + " " + sel;
+            selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
           }
         }
 
@@ -508,12 +508,12 @@
       while (element.parentNode) {
         const id = attr(element, 'id');
         if (id) {
-          names.unshift("#" + escape(id));
+          names.unshift(`#${escape(id)}`);
           break;
         } else {
           let { tagName } = element;
           if (tagName !== 'HTML') {
-            tagName += ":nth-child(" + (index(element) + 1) + ")";
+            tagName += `:nth-child(${index(element) + 1})`;
           }
           names.unshift(tagName);
           element = element.parentNode;
@@ -526,7 +526,7 @@
       return isString(css) ? CSS.escape(css) : '';
     }
 
-    function on() {for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}
+    function on(...args) {
       let [targets, types, selector, listener, useCapture = false] = getArgs(args);
 
       if (listener.length > 1) {
@@ -550,7 +550,7 @@
       return () => off(targets, types, listener, useCapture);
     }
 
-    function off() {for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}
+    function off(...args) {
       let [targets, types,, listener, useCapture = false] = getArgs(args);
       for (const type of types) {
         for (const target of targets) {
@@ -559,7 +559,7 @@
       }
     }
 
-    function once() {for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {args[_key3] = arguments[_key3];}
+    function once(...args) {
       const [element, types, selector, listener, useCapture = false, condition] = getArgs(args);
       const off = on(
       element,
@@ -584,7 +584,7 @@
 
     }
 
-    function createEvent(e, bubbles, cancelable, detail) {if (bubbles === void 0) {bubbles = true;}if (cancelable === void 0) {cancelable = false;}
+    function createEvent(e, bubbles = true, cancelable = false, detail) {
       if (isString(e)) {
         e = new CustomEvent(e, { bubbles, cancelable, detail });
       }
@@ -755,7 +755,7 @@
       zoom: true
     };
 
-    function css(element, property, value, priority) {if (priority === void 0) {priority = '';}
+    function css(element, property, value, priority = '') {
       const elements = toNodes(element);
       for (const element of elements) {
         if (isString(property)) {
@@ -767,7 +767,7 @@
             element.style.setProperty(
             property,
             isNumeric(value) && !cssNumber[property] ?
-            value + "px" :
+            `${value}px` :
             value || isNumber(value) ?
             value :
             '',
@@ -805,30 +805,30 @@
       }
 
       for (const prefix of ['webkit', 'moz']) {
-        const prefixedName = "-" + prefix + "-" + name;
+        const prefixedName = `-${prefix}-${name}`;
         if (prefixedName in style) {
           return prefixedName;
         }
       }
     }
 
-    function addClass(element) {for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {args[_key - 1] = arguments[_key];}
+    function addClass(element, ...args) {
       apply$1(element, args, 'add');
     }
 
-    function removeClass(element) {for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {args[_key2 - 1] = arguments[_key2];}
+    function removeClass(element, ...args) {
       apply$1(element, args, 'remove');
     }
 
     function removeClasses(element, cls) {
       attr(element, 'class', (value) =>
-      (value || '').replace(new RegExp("\\b" + cls + "\\b\\s?", 'g'), ''));
+      (value || '').replace(new RegExp(`\\b${cls}\\b\\s?`, 'g'), ''));
 
     }
 
-    function replaceClass(element) {
-      (arguments.length <= 1 ? undefined : arguments[1]) && removeClass(element, arguments.length <= 1 ? undefined : arguments[1]);
-      (arguments.length <= 2 ? undefined : arguments[2]) && addClass(element, arguments.length <= 2 ? undefined : arguments[2]);
+    function replaceClass(element, ...args) {
+      args[0] && removeClass(element, args[0]);
+      args[1] && addClass(element, args[1]);
     }
 
     function hasClass(element, cls) {
@@ -862,7 +862,7 @@
       return String(str).split(/\s|,/).filter(Boolean);
     }
 
-    function transition$1(element, props, duration, timing) {if (duration === void 0) {duration = 400;}if (timing === void 0) {timing = 'linear';}
+    function transition$1(element, props, duration = 400, timing = 'linear') {
       duration = Math.round(duration);
       return Promise.all(
       toNodes(element).map(
@@ -880,7 +880,7 @@
         once(
         element,
         'transitionend transitioncanceled',
-        (_ref) => {let { type } = _ref;
+        ({ type }) => {
           clearTimeout(timer);
           removeClass(element, 'uk-transition');
           css(element, {
@@ -896,7 +896,7 @@
         addClass(element, 'uk-transition');
         css(element, {
           transitionProperty: Object.keys(props).map(propName).join(','),
-          transitionDuration: duration + "ms",
+          transitionDuration: `${duration}ms`,
           transitionTimingFunction: timing,
           ...props
         });
@@ -925,7 +925,7 @@
 
     const animationPrefix = 'uk-animation-';
 
-    function animate$2(element, animation, duration, origin, out) {if (duration === void 0) {duration = 200;}
+    function animate$2(element, animation, duration = 200, origin, out) {
       return Promise.all(
       toNodes(element).map(
       (element) =>
@@ -936,30 +936,30 @@
         once(
         element,
         'animationend animationcanceled',
-        (_ref2) => {let { type } = _ref2;
+        ({ type }) => {
           clearTimeout(timer);
 
           type === 'animationcanceled' ? reject() : resolve(element);
 
           css(element, 'animationDuration', '');
-          removeClasses(element, animationPrefix + "\\S*");
+          removeClasses(element, `${animationPrefix}\\S*`);
         },
         { self: true });
 
 
-        css(element, 'animationDuration', duration + "ms");
+        css(element, 'animationDuration', `${duration}ms`);
         addClass(element, animation, animationPrefix + (out ? 'leave' : 'enter'));
 
         if (startsWith(animation, animationPrefix)) {
-          origin && addClass(element, "uk-transform-origin-" + origin);
-          out && addClass(element, animationPrefix + "reverse");
+          origin && addClass(element, `uk-transform-origin-${origin}`);
+          out && addClass(element, `${animationPrefix}reverse`);
         }
       })));
 
 
     }
 
-    const inProgressRe = new RegExp(animationPrefix + "(enter|leave)");
+    const inProgressRe = new RegExp(`${animationPrefix}(enter|leave)`);
 
     const Animation = {
       in: animate$2,
@@ -1181,8 +1181,8 @@
       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"));
+        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);
@@ -1203,18 +1203,18 @@
       return (element, value) => {
         if (isUndefined(value)) {
           if (isWindow(element)) {
-            return element["inner" + propName];
+            return element[`inner${propName}`];
           }
 
           if (isDocument(element)) {
             const doc = element.documentElement;
-            return Math.max(doc["offset" + propName], doc["scroll" + propName]);
+            return Math.max(doc[`offset${propName}`], doc[`scroll${propName}`]);
           }
 
           element = toNode(element);
 
           value = css(element, prop);
-          value = value === 'auto' ? element["offset" + propName] : toFloat(value) || 0;
+          value = value === 'auto' ? element[`offset${propName}`] : toFloat(value) || 0;
 
           return value - boxModelAdjust(element, prop);
         } else {
@@ -1227,13 +1227,13 @@
       };
     }
 
-    function boxModelAdjust(element, prop, sizing) {if (sizing === void 0) {sizing = 'border-box';}
+    function boxModelAdjust(element, prop, sizing = 'border-box') {
       return css(element, 'boxSizing') === sizing ?
       sumBy(
       dirs$1[prop].map(ucfirst),
       (prop) =>
-      toFloat(css(element, "padding" + prop)) +
-      toFloat(css(element, "border" + prop + "Width"))) :
+      toFloat(css(element, `padding${prop}`)) +
+      toFloat(css(element, `border${prop}Width`))) :
 
       0;
     }
@@ -1249,7 +1249,7 @@
       return pos;
     }
 
-    function toPx(value, property, element, offsetDim) {if (property === void 0) {property = 'width';}if (element === void 0) {element = window;}if (offsetDim === void 0) {offsetDim = false;}
+    function toPx(value, property = 'width', element = window, offsetDim = false) {
       if (!isString(value)) {
         return toFloat(value);
       }
@@ -1264,7 +1264,7 @@
         unit === 'vw' ?
         width(toWindow(element)) :
         offsetDim ?
-        element["offset" + ucfirst(property)] :
+        element[`offset${ucfirst(property)}`] :
         dimensions(element)[property],
         value) :
 
@@ -1450,7 +1450,7 @@
     };
 
     // Inspired by http://paulbourke.net/geometry/pointlineplane/
-    function intersect(_ref, _ref2) {let [{ x: x1, y: y1 }, { x: x2, y: y2 }] = _ref;let [{ x: x3, y: y3 }, { x: x4, y: y4 }] = _ref2;
+    function intersect([{ x: x1, y: y1 }, { x: x2, y: y2 }], [{ x: x3, y: y3 }, { x: x4, y: y4 }]) {
       const denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
 
       // Lines are parallel
@@ -1468,7 +1468,7 @@
       return { x: x1 + ua * (x2 - x1), y: y1 + ua * (y2 - y1) };
     }
 
-    function observeIntersection(targets, cb, options, intersecting) {if (intersecting === void 0) {intersecting = true;}
+    function observeIntersection(targets, cb, options, intersecting = true) {
       const observer = new IntersectionObserver(
       intersecting ?
       (entries, observer) => {
@@ -1487,7 +1487,7 @@
     }
 
     const hasResizeObserver = inBrowser && window.ResizeObserver;
-    function observeResize(targets, cb, options) {if (options === void 0) {options = { box: 'border-box' };}
+    function observeResize(targets, cb, options = { box: 'border-box' }) {
       if (hasResizeObserver) {
         return observe(ResizeObserver, targets, cb, options);
       }
@@ -1661,7 +1661,7 @@
       return options;
     }
 
-    function parseOptions(options, args) {if (args === void 0) {args = [];}
+    function parseOptions(options, args = []) {
       try {
         return options ?
         startsWith(options, '{') ?
@@ -1771,7 +1771,7 @@
           listener();
         });
 
-        once(window, 'message', resolve, false, (_ref) => {let { data } = _ref;
+        once(window, 'message', resolve, false, ({ data }) => {
           try {
             data = JSON.parse(data);
             return (
@@ -1784,13 +1784,13 @@
             // noop
           }});
 
-        el.src = "" + el.src + (includes(el.src, '?') ? '&' : '?') + (
-        youtube ? 'enablejsapi=1' : "api=1&player_id=" + id);
-
+        el.src = `${el.src}${includes(el.src, '?') ? '&' : '?'}${
+    youtube ? 'enablejsapi=1' : `api=1&player_id=${id}`
+    }`;
       }).then(() => clearInterval(poller));
     }
 
-    function isInView(element, offsetTop, offsetLeft) {if (offsetTop === void 0) {offsetTop = 0;}if (offsetLeft === void 0) {offsetLeft = 0;}
+    function isInView(element, offsetTop = 0, offsetLeft = 0) {
       if (!isVisible(element)) {
         return false;
       }
@@ -1811,7 +1811,7 @@
 
     }
 
-    function scrollIntoView(element, _temp) {let { offset: offsetBy = 0 } = _temp === void 0 ? {} : _temp;
+    function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
       const parents = isVisible(element) ? scrollParents(element) : [];
       return parents.reduce(
       (fn, scrollElement, i) => {
@@ -1873,7 +1873,7 @@
       }
     }
 
-    function scrolledOver(element, startOffset, endOffset) {if (startOffset === void 0) {startOffset = 0;}if (endOffset === void 0) {endOffset = 0;}
+    function scrolledOver(element, startOffset = 0, endOffset = 0) {
       if (!isVisible(element)) {
         return 0;
       }
@@ -1890,7 +1890,7 @@
       return clamp((scrollTop - start) / (end - start));
     }
 
-    function scrollParents(element, overflowRe, scrollable) {if (overflowRe === void 0) {overflowRe = /auto|scroll|hidden|clip/;}if (scrollable === void 0) {scrollable = false;}
+    function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, scrollable = false) {
       const scrollEl = scrollingElement(element);
 
       let ancestors = parents(element).reverse();
@@ -1929,6 +1929,10 @@
       }
 
       let rect = offset(viewportElement);
+      if (css(viewportElement, 'display') === 'inline') {
+        return rect;
+      }
+
       for (let [prop, dir, start, end] of [
       ['width', 'x', 'left', 'right'],
       ['height', 'y', 'top', 'bottom']])
@@ -1937,9 +1941,9 @@
           // iOS 12 returns <body> as scrollingElement
           viewportElement = documentElement;
         } else {
-          rect[start] += toFloat(css(viewportElement, "border-" + start + "-width"));
+          rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
         }
-        rect[prop] = rect[dir] = viewportElement["client" + ucfirst(prop)];
+        rect[prop] = rect[dir] = viewportElement[`client${ucfirst(prop)}`];
         rect[end] = rect[prop] + rect[start];
       }
       return rect;
@@ -2102,9 +2106,9 @@
       const [scrollElement] = commonScrollParents(element, target);
       const viewport = offsetViewport(scrollElement);
 
-      if (['auto', 'scroll'].includes(css(scrollElement, "overflow-" + axis))) {
-        viewport[start] -= scrollElement["scroll" + ucfirst(start)];
-        viewport[end] = scrollElement["scroll" + ucfirst(prop)];
+      if (['auto', 'scroll'].includes(css(scrollElement, `overflow-${axis}`))) {
+        viewport[start] -= scrollElement[`scroll${ucfirst(start)}`];
+        viewport[end] = scrollElement[`scroll${ucfirst(prop)}`];
       }
 
       viewport[start] += viewportOffset;
@@ -2117,8 +2121,8 @@
       return scrollParents(target).filter((parent) => within(element, parent));
     }
 
-    function getIntersectionArea() {
-      let area = {};for (var _len = arguments.length, rects = new Array(_len), _key = 0; _key < _len; _key++) {rects[_key] = arguments[_key];}
+    function getIntersectionArea(...rects) {
+      let area = {};
       for (const rect of rects) {
         for (const [,, start, end] of dirs) {
           area[start] = Math.max(area[start] || 0, rect[start]);
@@ -2133,7 +2137,7 @@
       return positionA[start] >= positionB[start] && positionA[end] <= positionB[end];
     }
 
-    function flip(element, target, _ref, i) {let { offset, attach } = _ref;
+    function flip(element, target, { offset, attach }, i) {
       return attachTo(element, target, {
         attach: {
           element: flipAttach(attach.element, i),
@@ -2433,7 +2437,7 @@
         delete this._watch;
       };
 
-      UIkit.prototype._callUpdate = function (e) {if (e === void 0) {e = 'update';}
+      UIkit.prototype._callUpdate = function (e = 'update') {
         if (!this._connected) {
           return;
         }
@@ -2612,8 +2616,8 @@
         this._observers = [initPropsObserver(this), initChildListObserver(this)];
       };
 
-      UIkit.prototype.registerObserver = function () {
-        this._observers.push(...arguments);
+      UIkit.prototype.registerObserver = function (...observer) {
+        this._observers.push(...observer);
       };
 
       UIkit.prototype._disconnectObservers = function () {
@@ -2738,7 +2742,7 @@
       [value];
     }
 
-    function normalizeData(_ref, _ref2) {let { data = {} } = _ref;let { args = [], props = {} } = _ref2;
+    function normalizeData({ data = {} }, { args = [], props = {} }) {
       if (isArray(data)) {
         data = data.slice(0, args.length).reduce((data, value, index) => {
           if (isPlainObject(value)) {
@@ -2798,7 +2802,7 @@
       const observer = new MutationObserver((records) => {
         const data = getProps($options);
         if (
-        records.some((_ref3) => {let { attributeName } = _ref3;
+        records.some(({ attributeName }) => {
           const prop = attributeName.replace('data-', '');
           return (prop === id ? attributes : [camelize(prop), camelize(attributeName)]).some(
           (prop) => !isUndefined(data[prop]) && data[prop] !== $props[prop]);
@@ -2811,7 +2815,7 @@
 
       observer.observe(el, {
         attributes: true,
-        attributeFilter: filter.concat(filter.map((key) => "data-" + key))
+        attributeFilter: filter.concat(filter.map((key) => `data-${key}`))
       });
 
       return observer;
@@ -2849,7 +2853,7 @@
         this._callConnected();
       };
 
-      UIkit.prototype.$destroy = function (removeEl) {if (removeEl === void 0) {removeEl = false;}
+      UIkit.prototype.$destroy = function (removeEl = false) {
         const { el, name } = this.$options;
 
         if (el) {
@@ -2877,7 +2881,7 @@
         this._callUpdate(e);
       };
 
-      UIkit.prototype.$update = function (element, e) {if (element === void 0) {element = this.$el;}
+      UIkit.prototype.$update = function (element = this.$el, e) {
         UIkit.update(element, e);
       };
 
@@ -2900,7 +2904,7 @@
 
         if (!options) {
           if (isPlainObject(components$2[id])) {
-            components$2[id] = components$2["data-" + id] = UIkit.extend(components$2[id]);
+            components$2[id] = components$2[`data-${id}`] = UIkit.extend(components$2[id]);
           }
 
           return components$2[id];
@@ -2940,10 +2944,10 @@
         opt.install == null ? void 0 : opt.install(UIkit, opt, name);
 
         if (UIkit._initialized && !opt.functional) {
-          requestAnimationFrame(() => UIkit[name]("[" + id + "],[data-" + id + "]"));
+          requestAnimationFrame(() => UIkit[name](`[${id}],[data-${id}]`));
         }
 
-        return components$2[id] = components$2["data-" + id] = isPlainObject(options) ? opt : options;
+        return components$2[id] = components$2[`data-${id}`] = isPlainObject(options) ? opt : options;
       };
 
       UIkit.getComponents = (element) => (element == null ? void 0 : element[DATA]) || {};
@@ -2982,7 +2986,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.15.17';
+    UIkit.version = '3.15.18-dev.014d8e608';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3023,7 +3027,7 @@
         UIkit._initialized = true;
       });
 
-      function applyChildListMutation(_ref) {let { addedNodes, removedNodes } = _ref;
+      function applyChildListMutation({ addedNodes, removedNodes }) {
         for (const node of addedNodes) {
           apply(node, connect);
         }
@@ -3033,7 +3037,7 @@
         }
       }
 
-      function applyAttributeMutation(_ref2) {let { target, attributeName } = _ref2;
+      function applyAttributeMutation({ target, attributeName }) {
         const name = getComponentName(attributeName);
 
         if (name) {var _UIkit$getComponent;
@@ -3059,7 +3063,7 @@
       },
 
       methods: {
-        lazyload(observeTargets, targets) {if (observeTargets === void 0) {observeTargets = this.$el;}if (targets === void 0) {targets = this.$el;}
+        lazyload(observeTargets = this.$el, targets = this.$el) {
           this.registerObserver(
           observeIntersection(observeTargets, (entries, observer) => {
             for (const el of toNodes(isFunction(targets) ? targets() : targets)) {
@@ -3069,8 +3073,8 @@
             }
 
             for (const el of entries.
-            filter((_ref) => {let { isIntersecting } = _ref;return isIntersecting;}).
-            map((_ref2) => {let { target } = _ref2;return target;})) {
+            filter(({ isIntersecting }) => isIntersecting).
+            map(({ target }) => target)) {
               observer.unobserve(el);
             }
           }));
@@ -3101,11 +3105,11 @@
       },
 
       computed: {
-        hasAnimation(_ref) {let { animation } = _ref;
+        hasAnimation({ animation }) {
           return !!animation[0];
         },
 
-        hasTransition(_ref2) {let { animation } = _ref2;
+        hasTransition({ animation }) {
           return ['slide', 'reveal'].some((transition) => startsWith(animation[0], transition));
         }
       },
@@ -3117,7 +3121,7 @@
           toNodes(targets).map((el) => {
             const show = isBoolean(toggle) ? toggle : !this.isToggled(el);
 
-            if (!trigger(el, "before" + (show ? 'show' : 'hide'), [this])) {
+            if (!trigger(el, `before${show ? 'show' : 'hide'}`, [this])) {
               return Promise.reject();
             }
 
@@ -3153,7 +3157,7 @@
 
         },
 
-        isToggled(el) {if (el === void 0) {el = this.$el;}
+        isToggled(el = this.$el) {
           [el] = toNodes(el);
           return hasClass(el, this.clsEnter) ?
           true :
@@ -3189,7 +3193,7 @@
       }
     };
 
-    function toggleInstant(el, show, _ref3) {let { _toggle } = _ref3;
+    function toggleInstant(el, show, { _toggle }) {
       Animation.cancel(el);
       Transition.cancel(el);
       return _toggle(el, show);
@@ -3197,9 +3201,9 @@
 
     async function toggleTransition(
     el,
-    show, _ref4)
-
-    {var _animation$;let { animation, duration, velocity, transition, _toggle } = _ref4;
+    show,
+    { animation, duration, velocity, transition, _toggle })
+    {var _animation$;
       const [mode = 'reveal', startProp = 'top'] = ((_animation$ = animation[0]) == null ? void 0 : _animation$.split('-')) || [];
 
       const dirs = [
@@ -3210,8 +3214,8 @@
       const end = dir[1] === startProp;
       const props = ['width', 'height'];
       const dimProp = props[dirs.indexOf(dir)];
-      const marginProp = "margin-" + dir[0];
-      const marginStartProp = "margin-" + startProp;
+      const marginProp = `margin-${dir[0]}`;
+      const marginStartProp = `margin-${startProp}`;
 
       let currentDim = dimensions(el)[dimProp];
 
@@ -3344,7 +3348,7 @@
 
       computed: {
         items: {
-          get(_ref, $el) {let { targets } = _ref;
+          get({ targets }, $el) {
             return $$(targets, $el);
           },
 
@@ -3365,12 +3369,12 @@
           immediate: true
         },
 
-        toggles(_ref2) {let { toggle } = _ref2;
+        toggles({ toggle }) {
           return this.items.map((item) => $(toggle, item));
         },
 
         contents: {
-          get(_ref3) {let { content } = _ref3;
+          get({ content }) {
             return this.items.map((item) => $(content, item));
           },
 
@@ -3399,7 +3403,7 @@
         name: 'click',
 
         delegate() {
-          return this.targets + " " + this.$props.toggle;
+          return `${this.targets} ${this.$props.toggle}`;
         },
 
         async handler(e) {var _this$_off;
@@ -3417,7 +3421,7 @@
         async toggle(item, animate) {
           item = this.items[getIndex(item, this.items)];
           let items = [item];
-          const activeItems = filter(this.items, "." + this.clsOpen);
+          const activeItems = filter(this.items, `.${this.clsOpen}`);
 
           if (!this.multiple && !includes(activeItems, items[0])) {
             items = items.concat(activeItems);
@@ -3450,7 +3454,7 @@
       el && (el.hidden = hide);
     }
 
-    async function transition(el, show, _ref4) {var _el$_wrapper;let { content, duration, velocity, transition } = _ref4;
+    async function transition(el, show, { content, duration, velocity, transition }) {var _el$_wrapper;
       content = ((_el$_wrapper = el._wrapper) == null ? void 0 : _el$_wrapper.firstElementChild) || $(content, el);
 
       if (!el._wrapper) {
@@ -3535,7 +3539,7 @@
       }
     };
 
-    function animate$1(el, show, _ref) {let { duration, transition, velocity } = _ref;
+    function animate$1(el, show, { duration, transition, velocity }) {
       const height = toFloat(css(el, 'height'));
       css(el, 'height', height);
       return Transition.start(
@@ -3587,7 +3591,7 @@
       },
 
       update: {
-        read(_ref) {let { visible } = _ref;
+        read({ visible }) {
           if (!isVideo(this.$el)) {
             return false;
           }
@@ -3599,7 +3603,7 @@
           };
         },
 
-        write(_ref2) {let { prev, visible, inView } = _ref2;
+        write({ prev, visible, inView }) {
           if (!visible || this.inView && !inView) {
             pause(this.$el);
           } else if (this.autoplay === true && !prev || this.inView && inView) {
@@ -3677,7 +3681,7 @@
           return coverDim;
         },
 
-        write(_ref) {let { height, width } = _ref;
+        write({ height, width }) {
           css(this.$el, { height, width });
         },
 
@@ -3703,7 +3707,7 @@
       },
 
       computed: {
-        container(_ref) {let { container } = _ref;
+        container({ container }) {
           return container === true && this.$container || container && $(container);
         }
       }
@@ -3719,7 +3723,7 @@
       },
 
       data: {
-        pos: "bottom-" + (isRtl ? 'right' : 'left'),
+        pos: `bottom-${isRtl ? 'right' : 'left'}`,
         offset: false,
         flip: true,
         shift: true,
@@ -3820,7 +3824,7 @@
       },
 
       computed: {
-        panel(_ref, $el) {let { selPanel } = _ref;
+        panel({ selPanel }, $el) {
           return $(selPanel, $el);
         },
 
@@ -3828,7 +3832,7 @@
           return this.panel;
         },
 
-        bgClose(_ref2) {let { bgClose } = _ref2;
+        bgClose({ bgClose }) {
           return bgClose && this.panel;
         }
       },
@@ -3844,7 +3848,7 @@
         name: 'click',
 
         delegate() {
-          return this.selClose + ",a[href*=\"#\"]";
+          return `${this.selClose},a[href*="#"]`;
         },
 
         handler(e) {
@@ -3933,7 +3937,7 @@
             once(
             this.$el,
             'hide',
-            on(document, pointerDown, (_ref3) => {let { target } = _ref3;
+            on(document, pointerDown, ({ target }) => {
               if (
               last(active$1) !== this ||
               this.overlay && !within(target, this.$el) ||
@@ -3944,8 +3948,8 @@
 
               once(
               document,
-              pointerUp + " " + pointerCancel + " scroll",
-              (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
+              `${pointerUp} ${pointerCancel} scroll`,
+              ({ defaultPrevented, type, target: newTarget }) => {
                 if (
                 !defaultPrevented &&
                 type === pointerUp &&
@@ -4033,7 +4037,7 @@
       }
     };
 
-    function animate(el, show, _ref5) {let { transitionElement, _toggle } = _ref5;
+    function animate(el, show, { transitionElement, _toggle }) {
       return new Promise((resolve, reject) =>
       once(el, 'show hide', () => {
         el._reject == null ? void 0 : el._reject();
@@ -4081,7 +4085,7 @@
       on(
       el,
       'touchstart',
-      (_ref6) => {let { targetTouches } = _ref6;
+      ({ targetTouches }) => {
         if (targetTouches.length === 1) {
           startClientY = targetTouches[0].clientY;
         }
@@ -4200,14 +4204,14 @@
       },
 
       computed: {
-        boundary(_ref, $el) {let { boundary, boundaryX, boundaryY } = _ref;
+        boundary({ boundary, boundaryX, boundaryY }, $el) {
           return [
           query(boundaryX || boundary, $el) || window,
           query(boundaryY || boundary, $el) || window];
 
         },
 
-        target(_ref2, $el) {let { target, targetX, targetY } = _ref2;
+        target({ target, targetX, targetY }, $el) {
           targetX = targetX || target || this.targetEl;
           targetY = targetY || target || this.targetEl;
 
@@ -4223,7 +4227,7 @@
       },
 
       beforeConnect() {
-        this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
+        this.clsDrop = this.$props.clsDrop || `uk-${this.$options.name}`;
       },
 
       connected() {
@@ -4238,7 +4242,7 @@
           this.lazyload(this.targetEl);
         }
 
-        this._style = ((_ref3) => {let { width, height } = _ref3;return { width, height };})(this.$el.style);
+        this._style = (({ width, height }) => ({ width, height }))(this.$el.style);
       },
 
       disconnected() {
@@ -4254,7 +4258,7 @@
         name: 'click',
 
         delegate() {
-          return "." + this.clsDrop + "-close";
+          return `.${this.clsDrop}-close`;
         },
 
         handler(e) {
@@ -4270,7 +4274,7 @@
           return 'a[href*="#"]';
         },
 
-        handler(_ref4) {let { defaultPrevented, current } = _ref4;
+        handler({ defaultPrevented, current }) {
           const { hash } = current;
           if (
           !defaultPrevented &&
@@ -4332,7 +4336,7 @@
       },
 
       {
-        name: pointerEnter + " focusin",
+        name: `${pointerEnter} focusin`,
 
         filter() {
           return includes(this.mode, 'hover');
@@ -4346,7 +4350,7 @@
       },
 
       {
-        name: pointerLeave + " focusout",
+        name: `${pointerLeave} focusout`,
 
         filter() {
           return includes(this.mode, 'hover');
@@ -4389,22 +4393,22 @@
           on(
           document,
           pointerDown,
-          (_ref5) => {let { target } = _ref5;return (
-              !within(target, this.$el) &&
-              once(
-              document,
-              pointerUp + " " + pointerCancel + " scroll",
-              (_ref6) => {let { defaultPrevented, type, target: newTarget } = _ref6;
-                if (
-                !defaultPrevented &&
-                type === pointerUp &&
-                target === newTarget &&
-                !(this.targetEl && within(target, this.targetEl)))
-                {
-                  this.hide(false);
-                }
-              },
-              true));}),
+          ({ target }) =>
+          !within(target, this.$el) &&
+          once(
+          document,
+          `${pointerUp} ${pointerCancel} scroll`,
+          ({ defaultPrevented, type, target: newTarget }) => {
+            if (
+            !defaultPrevented &&
+            type === pointerUp &&
+            target === newTarget &&
+            !(this.targetEl && within(target, this.targetEl)))
+            {
+              this.hide(false);
+            }
+          },
+          true)),
 
 
 
@@ -4456,7 +4460,7 @@
       {
         name: 'hide',
 
-        handler(_ref7) {let { target } = _ref7;
+        handler({ target }) {
           if (this.$el !== target) {
             active =
             active === null && within(target, this.$el) && this.isToggled() ?
@@ -4480,7 +4484,7 @@
       },
 
       methods: {
-        show(target, delay) {if (target === void 0) {target = this.targetEl;}if (delay === void 0) {delay = true;}
+        show(target = this.targetEl, delay = true) {
           if (this.isToggled() && target && this.targetEl && target !== this.targetEl) {
             this.hide(false, false);
           }
@@ -4516,7 +4520,7 @@
 
         },
 
-        hide(delay, animate) {if (delay === void 0) {delay = true;}if (animate === void 0) {animate = true;}
+        hide(delay = true, animate = true) {
           const hide = () => this.toggleElement(this.$el, false, this.animateOut && animate);
 
           this.clearTimers();
@@ -4547,7 +4551,7 @@
         },
 
         position() {
-          removeClass(this.$el, this.clsDrop + "-stack");
+          removeClass(this.$el, `${this.clsDrop}-stack`);
           css(this.$el, this._style);
 
           // Ensure none positioned element does not generate scrollbars
@@ -4568,7 +4572,7 @@
                 offset(this.boundary[i])[prop],
                 viewports[i][prop] - 2 * viewportOffset),
 
-                ["overflow-" + axis]: 'auto'
+                [`overflow-${axis}`]: 'auto'
               });
             }
           }
@@ -4576,7 +4580,7 @@
           const maxWidth = viewports[0].width - 2 * viewportOffset;
 
           if (this.$el.offsetWidth > maxWidth) {
-            addClass(this.$el, this.clsDrop + "-stack");
+            addClass(this.$el, `${this.clsDrop}-stack`);
           }
 
           css(this.$el, 'maxWidth', maxWidth);
@@ -4603,7 +4607,7 @@
                 offset(this.boundary[i])[end],
                 viewports[i][end] - viewportOffset) -
                 targetOffset[end]) - positionOffset,
-                ["overflow-" + axis]: 'auto'
+                [`overflow-${axis}`]: 'auto'
               });
 
               this.positionAt(this.$el, this.target, this.boundary);
@@ -4645,7 +4649,7 @@
           return this.input.nextElementSibling;
         },
 
-        target(_ref, $el) {let { target } = _ref;
+        target({ target }, $el) {
           return (
             target && (
             target === true && parent(this.input) === $el && this.input.nextElementSibling ||
@@ -4736,7 +4740,7 @@
           };
         },
 
-        write(_ref) {let { columns, rows } = _ref;
+        write({ columns, rows }) {
           for (const row of rows) {
             for (const column of row) {
               toggleClass(column, this.margin, rows[0] !== row);
@@ -4812,7 +4816,7 @@
       return sorted;
     }
 
-    function getOffset(element, offset) {if (offset === void 0) {offset = false;}
+    function getOffset(element, offset = false) {
       let { offsetTop, offsetLeft, offsetHeight, offsetWidth } = element;
 
       if (offset) {
@@ -4888,7 +4892,7 @@
 
       update: [
       {
-        write(_ref) {let { columns } = _ref;
+        write({ columns }) {
           toggleClass(this.$el, this.clsStack, columns.length < 2);
         },
 
@@ -4936,7 +4940,7 @@
           return { padding, columns, translates, height: translates ? elHeight : '' };
         },
 
-        write(_ref2) {let { height, padding } = _ref2;
+        write({ height, padding }) {
           css(this.$el, 'paddingBottom', padding || '');
           height !== false && css(this.$el, 'height', height);
         },
@@ -4957,7 +4961,7 @@
           };
         },
 
-        write(_ref3) {let { columns, scrolled, translates } = _ref3;
+        write({ columns, scrolled, translates }) {
           if (scrolled === false && !translates) {
             return;
           }
@@ -4968,11 +4972,11 @@
           el,
           'transform',
           !scrolled && !translates ?
-          '' : "translateY(" + (
-
-          (translates && -translates[i][j]) + (
-          scrolled ? i % 2 ? scrolled : scrolled / 8 : 0)) + "px)")));
-
+          '' :
+          `translateY(${
+      (translates && -translates[i][j]) + (
+      scrolled ? i % 2 ? scrolled : scrolled / 8 : 0)
+      }px)`)));
 
 
 
@@ -5022,7 +5026,7 @@
 
       computed: {
         elements: {
-          get(_ref, $el) {let { target } = _ref;
+          get({ target }, $el) {
             return $$(target, $el);
           },
 
@@ -5043,7 +5047,7 @@
           };
         },
 
-        write(_ref2) {let { rows } = _ref2;
+        write({ rows }) {
           for (const { heights, elements } of rows) {
             elements.forEach((el, i) => css(el, 'minHeight', heights[i]));
           }
@@ -5107,7 +5111,7 @@
       },
 
       update: {
-        read(_ref) {let { minHeight: prev } = _ref;
+        read({ minHeight: prev }) {
           if (!isVisible(this.$el)) {
             return false;
           }
@@ -5133,34 +5137,34 @@
             scrollingElement === scrollElement || body === scrollElement;
 
             // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-            minHeight = "calc(" + (isScrollingElement ? '100vh' : viewportHeight + "px");
+            minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;
 
             if (this.offsetTop) {
               if (isScrollingElement) {
                 const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
-                minHeight += top > 0 && top < viewportHeight / 2 ? " - " + top + "px" : '';
+                minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
               } else {
-                minHeight += " - " + css(scrollElement, 'paddingTop');
+                minHeight += ` - ${css(scrollElement, 'paddingTop')}`;
               }
             }
 
             if (this.offsetBottom === true) {
-              minHeight += " - " + dimensions(this.$el.nextElementSibling).height + "px";
+              minHeight += ` - ${dimensions(this.$el.nextElementSibling).height}px`;
             } else if (isNumeric(this.offsetBottom)) {
-              minHeight += " - " + this.offsetBottom + "vh";
+              minHeight += ` - ${this.offsetBottom}vh`;
             } else if (this.offsetBottom && endsWith(this.offsetBottom, 'px')) {
-              minHeight += " - " + toFloat(this.offsetBottom) + "px";
+              minHeight += ` - ${toFloat(this.offsetBottom)}px`;
             } else if (isString(this.offsetBottom)) {
-              minHeight += " - " + dimensions(query(this.offsetBottom, this.$el)).height + "px";
+              minHeight += ` - ${dimensions(query(this.offsetBottom, this.$el)).height}px`;
             }
 
-            minHeight += (box ? " - " + box + "px" : '') + ")";
+            minHeight += `${box ? ` - ${box}px` : ''})`;
           }
 
           return { minHeight, prev };
         },
 
-        write(_ref2) {let { minHeight } = _ref2;
+        write({ minHeight }) {
           css(this.$el, { minHeight });
 
           if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
@@ -5326,7 +5330,7 @@
 
         let match;
         while (match = symbolRe.exec(svg)) {
-          symbols[svg][match[3]] = "<svg xmlns=\"http://www.w3.org/2000/svg\"" + match[1] + "svg>";
+          symbols[svg][match[3]] = `<svg xmlns="http://www.w3.org/2000/svg"${match[1]}svg>`;
         }
       }
 
@@ -5481,7 +5485,7 @@
 
       beforeConnect() {
         const icon = this.$props.icon;
-        this.icon = closest(this.$el, '.uk-nav-primary') ? icon + "-large" : icon;
+        this.icon = closest(this.$el, '.uk-nav-primary') ? `${icon}-large` : icon;
       }
     };
 
@@ -5491,7 +5495,7 @@
       beforeConnect() {
         addClass(this.$el, 'uk-slidenav');
         const icon = this.$props.icon;
-        this.icon = hasClass(this.$el, 'uk-slidenav-large') ? icon + "-large" : icon;
+        this.icon = hasClass(this.$el, 'uk-slidenav-large') ? `${icon}-large` : icon;
       }
     };
 
@@ -5512,7 +5516,7 @@
       extends: IconComponent,
 
       beforeConnect() {
-        this.icon = "close-" + (hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon');
+        this.icon = `close-${hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon'}`;
       }
     };
 
@@ -5650,7 +5654,7 @@
       } else if (src) {
         const change = !includes(el.style.backgroundImage, src);
         if (change) {
-          css(el, 'backgroundImage', "url(" + escape(src) + ")");
+          css(el, 'backgroundImage', `url(${escape(src)})`);
           trigger(el, createEvent('load', false));
         }
       }
@@ -5762,13 +5766,13 @@
     function toMedia(value, element) {
       if (isString(value)) {
         if (startsWith(value, '@')) {
-          value = toFloat(css(element, "--uk-breakpoint-" + value.substr(1)));
+          value = toFloat(css(element, `--uk-breakpoint-${value.substr(1)}`));
         } else if (isNaN(value)) {
           return value;
         }
       }
 
-      return value && isNumeric(value) ? "(min-width: " + value + "px)" : '';
+      return value && isNumeric(value) ? `(min-width: ${value}px)` : '';
     }
 
     var leader = {
@@ -5786,13 +5790,13 @@
       },
 
       computed: {
-        fill(_ref) {let { fill } = _ref;
+        fill({ fill }) {
           return fill || css(this.$el, '--uk-leader-fill-content');
         }
       },
 
       connected() {
-        [this.wrapper] = wrapInner(this.$el, "<span class=\"" + this.clsWrapper + "\">");
+        [this.wrapper] = wrapInner(this.$el, `<span class="${this.clsWrapper}">`);
       },
 
       disconnected() {
@@ -5810,7 +5814,7 @@
           };
         },
 
-        write(_ref2) {let { width, fill, hide } = _ref2;
+        write({ width, fill, hide }) {
           toggleClass(this.wrapper, this.clsHide, hide);
           attr(this.wrapper, this.attrFill, new Array(width).join(fill));
         },
@@ -5861,12 +5865,12 @@
 
     };
 
-    function install(_ref) {let { modal } = _ref;
+    function install({ modal }) {
       modal.dialog = function (content, options) {
-        const dialog = modal("<div class=\"uk-modal\"> <div class=\"uk-modal-dialog\">" +
-
-        content + "</div> </div>",
-
+        const dialog = modal(
+        `<div class="uk-modal">
+                <div class="uk-modal-dialog">${content}</div>
+             </div>`,
         options);
 
 
@@ -5887,14 +5891,14 @@
 
       modal.alert = function (message, options) {
         return openDialog(
-        (_ref2) => {let { labels } = _ref2;return "<div class=\"uk-modal-body\">" + (
-          isString(message) ? message : html(message)) + "</div> <div class=\"uk-modal-footer uk-text-right\"> <button class=\"uk-button uk-button-primary uk-modal-close\" autofocus>" +
-
-
-
-          labels.ok + "</button> </div>";},
-
-
+        ({ labels }) => `<div class="uk-modal-body">${
+    isString(message) ? message : html(message)
+    }</div>
+            <div class="uk-modal-footer uk-text-right">
+                <button class="uk-button uk-button-primary uk-modal-close" autofocus>${
+    labels.ok
+    }</button>
+            </div>`,
         options,
         (deferred) => deferred.resolve());
 
@@ -5902,15 +5906,15 @@
 
       modal.confirm = function (message, options) {
         return openDialog(
-        (_ref3) => {let { labels } = _ref3;return "<form> <div class=\"uk-modal-body\">" + (
-          isString(message) ? message : html(message)) + "</div> <div class=\"uk-modal-footer uk-text-right\"> <button class=\"uk-button uk-button-default uk-modal-close\" type=\"button\">" +
-
-
-          labels.cancel + "</button> <button class=\"uk-button uk-button-primary\" autofocus>" +
-
-          labels.ok + "</button> </div> </form>";},
-
-
+        ({ labels }) => `<form>
+                <div class="uk-modal-body">${isString(message) ? message : html(message)}</div>
+                <div class="uk-modal-footer uk-text-right">
+                    <button class="uk-button uk-button-default uk-modal-close" type="button">${
+    labels.cancel
+    }</button>
+                    <button class="uk-button uk-button-primary" autofocus>${labels.ok}</button>
+                </div>
+            </form>`,
         options,
         (deferred) => deferred.reject());
 
@@ -5918,18 +5922,18 @@
 
       modal.prompt = function (message, value, options) {
         return openDialog(
-        (_ref4) => {let { labels } = _ref4;return "<form class=\"uk-form-stacked\"> <div class=\"uk-modal-body\"> <label>" + (
-
-          isString(message) ? message : html(message)) + "</label> <input class=\"uk-input\" value=\"" + (
-          value || '') + "\" autofocus> </div> <div class=\"uk-modal-footer uk-text-right\"> <button class=\"uk-button uk-button-default uk-modal-close\" type=\"button\">" +
-
-
-
-          labels.cancel + "</button> <button class=\"uk-button uk-button-primary\">" +
-
-          labels.ok + "</button> </div> </form>";},
-
-
+        ({ labels }) => `<form class="uk-form-stacked">
+                <div class="uk-modal-body">
+                    <label>${isString(message) ? message : html(message)}</label>
+                    <input class="uk-input" value="${value || ''}" autofocus>
+                </div>
+                <div class="uk-modal-footer uk-text-right">
+                    <button class="uk-button uk-button-default uk-modal-close" type="button">${
+    labels.cancel
+    }</button>
+                    <button class="uk-button uk-button-primary">${labels.ok}</button>
+                </div>
+            </form>`,
         options,
         (deferred) => deferred.resolve(null),
         (dialog) => $('input', dialog.$el).value);
@@ -6009,12 +6013,12 @@
       },
 
       computed: {
-        dropbarAnchor(_ref, $el) {let { dropbarAnchor } = _ref;
+        dropbarAnchor({ dropbarAnchor }, $el) {
           return query(dropbarAnchor, $el) || $el;
         },
 
         dropbar: {
-          get(_ref2) {let { dropbar } = _ref2;
+          get({ dropbar }) {
             if (!dropbar) {
               return null;
             }
@@ -6039,11 +6043,11 @@
         },
 
         dropdowns: {
-          get(_ref3, $el) {let { clsDrop } = _ref3;
-            const dropdowns = $$("." + clsDrop, $el);
+          get({ clsDrop }, $el) {
+            const dropdowns = $$(`.${clsDrop}`, $el);
 
             if (this.dropContainer !== $el) {
-              for (const el of $$("." + clsDrop, this.dropContainer)) {var _this$getDropdown;
+              for (const el of $$(`.${clsDrop}`, this.dropContainer)) {var _this$getDropdown;
                 const target = (_this$getDropdown = this.getDropdown(el)) == null ? void 0 : _this$getDropdown.targetEl;
                 if (!includes(dropdowns, el) && target && within(target, this.$el)) {
                   dropdowns.push(el);
@@ -6062,7 +6066,7 @@
               ...this.$props,
               flip: false,
               shift: true,
-              pos: "bottom-" + this.align,
+              pos: `bottom-${this.align}`,
               boundary: this.boundary === true ? this.$el : this.boundary
             });
 
@@ -6072,7 +6076,7 @@
         },
 
         toggles: {
-          get(_ref4, $el) {let { dropdown } = _ref4;
+          get({ dropdown }, $el) {
             return $$(dropdown, $el);
           },
 
@@ -6103,7 +6107,7 @@
           return this.dropdown;
         },
 
-        handler(_ref5) {let { current } = _ref5;
+        handler({ current }) {
           const active = this.getActive();
           if (
           active &&
@@ -6133,8 +6137,8 @@
 
             if (!active || active.targetEl !== current) {
               current.click();
-              once(this.dropContainer, 'show', (_ref6) => {let { target } = _ref6;return (
-                  focusFirstFocusableElement(target));});
+              once(this.dropContainer, 'show', ({ target }) =>
+              focusFirstFocusableElement(target));
 
             } else {
               focusFirstFocusableElement(active.$el);
@@ -6153,7 +6157,7 @@
         },
 
         delegate() {
-          return "." + this.clsDrop;
+          return `.${this.clsDrop}`;
         },
 
         handler(e) {
@@ -6224,7 +6228,7 @@
           return this.dropbar;
         },
 
-        handler(_ref7) {let { target } = _ref7;
+        handler({ target }) {
           if (!this.isDropbarDrop(target)) {
             return;
           }
@@ -6233,7 +6237,7 @@
             after(this.dropbarAnchor, this.dropbar);
           }
 
-          addClass(target, this.clsDrop + "-dropbar");
+          addClass(target, `${this.clsDrop}-dropbar`);
         }
       },
 
@@ -6248,18 +6252,18 @@
           return this.dropbar;
         },
 
-        handler(_ref8) {let { target } = _ref8;
+        handler({ target }) {
           if (!this.isDropbarDrop(target)) {
             return;
           }
 
           const drop = this.getDropdown(target);
           this._observer = observeResize([drop.$el, ...drop.target], () => {
-            const targetOffsets = parents(target, "." + this.clsDrop).
+            const targetOffsets = parents(target, `.${this.clsDrop}`).
             concat(target).
             map((el) => offset(el));
-            const minTop = Math.min(...targetOffsets.map((_ref9) => {let { top } = _ref9;return top;}));
-            const maxBottom = Math.max(...targetOffsets.map((_ref10) => {let { bottom } = _ref10;return bottom;}));
+            const minTop = Math.min(...targetOffsets.map(({ top }) => top));
+            const maxBottom = Math.max(...targetOffsets.map(({ bottom }) => bottom));
             const dropbarOffset = offset(this.dropbar);
             css(this.dropbar, 'top', this.dropbar.offsetTop - (dropbarOffset.top - minTop));
             this.transitionTo(
@@ -6305,7 +6309,7 @@
           return this.dropbar;
         },
 
-        handler(_ref11) {var _this$_observer;let { target } = _ref11;
+        handler({ target }) {var _this$_observer;
           if (!this.isDropbarDrop(target)) {
             return;
           }
@@ -6332,7 +6336,7 @@
 
           el = oldHeight < newHeight && el;
 
-          css(el, 'clipPath', "polygon(0 0,100% 0,100% " + oldHeight + "px,0 " + oldHeight + "px)");
+          css(el, 'clipPath', `polygon(0 0,100% 0,100% ${oldHeight}px,0 ${oldHeight}px)`);
 
           height(dropbar, oldHeight);
 
@@ -6342,7 +6346,7 @@
           Transition.start(
           el,
           {
-            clipPath: "polygon(0 0,100% 0,100% " + newHeight + "px,0 " + newHeight + "px)"
+            clipPath: `polygon(0 0,100% 0,100% ${newHeight}px,0 ${newHeight}px)`
           },
           this.duration)]).
 
@@ -6431,7 +6435,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} ${pointerCancel} scroll`, (e) => {
               const { x, y } = getEventPos(e);
 
               // swipe
@@ -6441,7 +6445,7 @@
               {
                 setTimeout(() => {
                   trigger(target, 'swipe');
-                  trigger(target, "swipe" + swipeDirection(pos.x, pos.y, x, y));
+                  trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);
                 });
               }
             });
@@ -6488,27 +6492,27 @@
       },
 
       computed: {
-        clsFlip(_ref) {let { flip, clsFlip } = _ref;
+        clsFlip({ flip, clsFlip }) {
           return flip ? clsFlip : '';
         },
 
-        clsOverlay(_ref2) {let { overlay, clsOverlay } = _ref2;
+        clsOverlay({ overlay, clsOverlay }) {
           return overlay ? clsOverlay : '';
         },
 
-        clsMode(_ref3) {let { mode, clsMode } = _ref3;
-          return clsMode + "-" + mode;
+        clsMode({ mode, clsMode }) {
+          return `${clsMode}-${mode}`;
         },
 
-        clsSidebarAnimation(_ref4) {let { mode, clsSidebarAnimation } = _ref4;
+        clsSidebarAnimation({ mode, clsSidebarAnimation }) {
           return mode === 'none' || mode === 'reveal' ? '' : clsSidebarAnimation;
         },
 
-        clsContainerAnimation(_ref5) {let { mode, clsContainerAnimation } = _ref5;
+        clsContainerAnimation({ mode, clsContainerAnimation }) {
           return mode !== 'push' && mode !== 'reveal' ? '' : clsContainerAnimation;
         },
 
-        transitionElement(_ref6) {let { mode } = _ref6;
+        transitionElement({ mode }) {
           return mode === 'reveal' ? parent(this.panel) : this.panel;
         }
       },
@@ -6645,11 +6649,11 @@
       },
 
       computed: {
-        container(_ref, $el) {let { selContainer } = _ref;
+        container({ selContainer }, $el) {
           return closest($el, selContainer);
         },
 
-        content(_ref2, $el) {let { selContent } = _ref2;
+        content({ selContent }, $el) {
           return closest($el, selContent);
         }
       },
@@ -6672,7 +6676,7 @@
           };
         },
 
-        write(_ref3) {let { max } = _ref3;
+        write({ max }) {
           css(this.$el, { minHeight: this.minHeight, maxHeight: max });
         },
 
@@ -6812,14 +6816,14 @@
 
       computed: {
         elements: {
-          get(_ref, $el) {let { target } = _ref;
+          get({ target }, $el) {
             return target ? $$(target, $el) : [$el];
           },
 
           watch(elements, prev) {
             if (this.hidden) {
               // use `opacity:0` instead of `visibility:hidden` to make content focusable with keyboard
-              css(filter(elements, ":not(." + this.inViewClass + ")"), 'opacity', 0);
+              css(filter(elements, `:not(.${this.inViewClass})`), 'opacity', 0);
             }
 
             if (!isEqual(elements, prev)) {
@@ -6959,7 +6963,7 @@
           immediate: true
         },
 
-        elements(_ref) {let { closest: selector } = _ref;
+        elements({ closest: selector }) {
           return closest(this.links, selector || '*');
         }
       },
@@ -6999,7 +7003,7 @@
           return { active };
         },
 
-        write(_ref2) {let { active } = _ref2;
+        write({ active }) {
           const changed = active !== false && !hasClass(this.elements[active], this.cls);
 
           this.links.forEach((el) => el.blur());
@@ -7057,7 +7061,7 @@
       },
 
       computed: {
-        selTarget(_ref, $el) {let { selTarget } = _ref;
+        selTarget({ selTarget }, $el) {
           return selTarget && $(selTarget, $el) || $el;
         }
       },
@@ -7084,7 +7088,7 @@
           this.hide();
           removeClass(this.selTarget, this.clsInactive);
         }
-        css(this.$el, { position: '', top: '' });
+        reset(this.$el);
 
         remove$1(this.placeholder);
         this.placeholder = null;
@@ -7138,14 +7142,14 @@
 
       update: [
       {
-        read(_ref2, types) {let { height: height$1, width, margin, sticky } = _ref2;
+        read({ height: height$1, width, margin, sticky }, types) {
           this.inactive = !this.matchMedia || !isVisible(this.$el);
 
           if (this.inactive) {
-            return false;
+            return;
           }
 
-          const hide = this.isFixed && types.has('resize');
+          const hide = this.isFixed && types.has('resize') && !sticky;
           if (hide) {
             css(this.selTarget, 'transition', '0s');
             this.hide();
@@ -7196,6 +7200,7 @@
 
 
           sticky =
+          maxScrollHeight &&
           !this.showOnUp &&
           start + offset$1 === topOffset &&
           end ===
@@ -7211,6 +7216,7 @@
             overflow,
             topOffset,
             height: height$1,
+            elHeight,
             width,
             margin,
             top: offsetPosition(referenceElement)[0],
@@ -7218,11 +7224,20 @@
           };
         },
 
-        write(_ref3) {let { height, width, margin, offset, sticky } = _ref3;
+        write({ height, width, margin, offset, sticky }) {
+          if (this.inactive || sticky || !this.isFixed) {
+            reset(this.$el);
+          }
+
+          if (this.inactive) {
+            return;
+          }
+
           if (sticky) {
             height = width = margin = 0;
             css(this.$el, { position: 'sticky', top: offset });
           }
+
           const { placeholder } = this;
 
           css(placeholder, { height, width, margin });
@@ -7237,14 +7252,14 @@
       },
 
       {
-        read(_ref4)
-
-
-
-
-
-
-        {let { scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end } = _ref4;
+        read({
+          scroll: prevScroll = 0,
+          dir: prevDir = 'down',
+          overflow,
+          overflowScroll = 0,
+          start,
+          end
+        }) {
           const scroll = document.scrollingElement.scrollTop;
           const dir = prevScroll <= scroll ? 'down' : 'up';
 
@@ -7335,7 +7350,7 @@
           }
         },
 
-        events: ['resize', 'scroll']
+        events: ['resize', 'resizeViewport', 'scroll']
       }],
 
 
@@ -7375,6 +7390,7 @@
             offset,
             topOffset,
             height,
+            elHeight,
             offsetParentTop,
             sticky
           } = this._data;
@@ -7388,10 +7404,7 @@
               position = 'absolute';
             }
 
-            css(this.$el, {
-              position,
-              width
-            });
+            css(this.$el, { position, width });
             css(this.$el, 'marginTop', 0, 'important');
           }
 
@@ -7402,7 +7415,11 @@
           css(this.$el, 'top', offset);
 
           this.setActive(active);
-          toggleClass(this.$el, this.clsBelow, scroll > topOffset + height);
+          toggleClass(
+          this.$el,
+          this.clsBelow,
+          scroll > topOffset + (sticky ? Math.min(height, elHeight) : height));
+
           addClass(this.$el, this.clsFixed);
         },
 
@@ -7447,6 +7464,10 @@
       return value;
     }
 
+    function reset(el) {
+      css(el, { position: '', top: '', marginTop: '', width: '' });
+    }
+
     var Switcher = {
       mixins: [Lazyload, Swipe, Togglable],
 
@@ -7470,7 +7491,7 @@
 
       computed: {
         connects: {
-          get(_ref, $el) {let { connect } = _ref;
+          get({ connect }, $el) {
             return queryAll(connect, $el);
           },
 
@@ -7501,7 +7522,7 @@
         },
 
         toggles: {
-          get(_ref2, $el) {let { toggle } = _ref2;
+          get({ toggle }, $el) {
             return $$(toggle, $el).filter(
             (el) => !matches(el, '.uk-disabled *, .uk-disabled, [disabled]'));
 
@@ -7548,7 +7569,7 @@
         },
 
         delegate() {
-          return "[" + this.attrItem + "],[data-" + this.attrItem + "]";
+          return `[${this.attrItem}],[data-${this.attrItem}]`;
         },
 
         handler(e) {
@@ -7568,7 +7589,7 @@
           return this.connects;
         },
 
-        handler(_ref3) {let { type } = _ref3;
+        handler({ type }) {
           this.show(endsWith(type, 'Left') ? 'next' : 'previous');
         }
       }],
@@ -7589,7 +7610,7 @@
           });
 
           const animate = prev >= 0 && prev !== next;
-          this.connects.forEach(async (_ref4) => {let { children } = _ref4;
+          this.connects.forEach(async ({ children }) => {
             await this.toggleElement(
             toNodes(children).filter((child) => hasClass(child, this.cls)),
             false,
@@ -7651,7 +7672,7 @@
 
       computed: {
         target: {
-          get(_ref, $el) {let { href, target } = _ref;
+          get({ href, target }, $el) {
             target = queryAll(target || href, $el);
             return target.length && target || [$el];
           },
@@ -7706,7 +7727,7 @@
       },
 
       {
-        name: pointerEnter + " " + pointerLeave + " focus blur",
+        name: `${pointerEnter} ${pointerLeave} focus blur`,
 
         filter() {
           return includes(this.mode, 'hover');
@@ -7740,7 +7761,7 @@
 
           this._showState = show ? expanded : null;
 
-          this.toggle("toggle" + (show ? 'show' : 'hide'));
+          this.toggle(`toggle${show ? 'show' : 'hide'}`);
         }
       },
 
@@ -7793,7 +7814,7 @@
           return this.target;
         },
 
-        handler(_ref2) {let { target, type } = _ref2;
+        handler({ target, type }) {
           this.updateAria(target === this.target[0] && type === 'show');
         }
       },