uikit 3.15.11-dev.fd61e70ff → 3.15.12-dev.0c0d42cdf

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.15.11-dev.fd61e70ff | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.15.12-dev.0c0d42cdf | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -215,8 +215,8 @@
         [aProp]: dimensions[prop] ?
         Math.round(value * dimensions[aProp] / dimensions[prop]) :
         dimensions[aProp],
-        [prop]: value };
-
+        [prop]: value
+      };
     }
 
     function contain(dimensions, maxDimensions) {
@@ -284,7 +284,8 @@
           this.reject = reject;
           this.resolve = resolve;
         });
-      }}
+      }
+    }
 
     function attr(element, name, value) {
       if (isObject(name)) {
@@ -348,8 +349,8 @@
       param: true,
       source: true,
       track: true,
-      wbr: true };
-
+      wbr: true
+    };
     function isVoidElement(element) {
       return toNodes(element).some((element) => voidElements[element.tagName.toLowerCase()]);
     }
@@ -666,8 +667,8 @@
         xhr: new XMLHttpRequest(),
         beforeSend: noop,
         responseType: '',
-        ...options };
-
+        ...options
+      };
       return Promise.resolve().
       then(() => env.beforeSend(env)).
       then(() => send(url, env));
@@ -700,8 +701,8 @@
             reject(
             assign(Error(xhr.statusText), {
               xhr,
-              status: xhr.status }));
-
+              status: xhr.status
+            }));
 
           }
         });
@@ -745,8 +746,8 @@
       'stroke-dashoffset': true,
       widows: true,
       'z-index': true,
-      zoom: true };
-
+      zoom: true
+    };
 
     function css(element, property, value, priority) {if (priority === void 0) {priority = '';}
       const elements = toNodes(element);
@@ -879,8 +880,8 @@
           css(element, {
             transitionProperty: '',
             transitionDuration: '',
-            transitionTimingFunction: '' });
-
+            transitionTimingFunction: ''
+          });
           type === 'transitioncanceled' ? reject() : resolve(element);
         },
         { self: true });
@@ -891,8 +892,8 @@
           transitionProperty: Object.keys(props).map(propName).join(','),
           transitionDuration: duration + "ms",
           transitionTimingFunction: timing,
-          ...props });
-
+          ...props
+        });
       })));
 
 
@@ -913,8 +914,8 @@
 
       inProgress(element) {
         return hasClass(element, 'uk-transition');
-      } };
-
+      }
+    };
 
     const animationPrefix = 'uk-animation-';
 
@@ -967,12 +968,13 @@
 
       cancel(element) {
         trigger(element, 'animationcanceled');
-      } };
+      }
+    };
 
     const dirs$1 = {
       width: ['left', 'right'],
-      height: ['top', 'bottom'] };
-
+      height: ['top', 'bottom']
+    };
 
     function dimensions(element) {
       const rect = isElement(element) ?
@@ -985,8 +987,8 @@
         top: rect.top,
         left: rect.left,
         bottom: rect.top + rect.height,
-        right: rect.left + rect.width };
-
+        right: rect.left + rect.width
+      };
     }
 
     function offset(element, coordinates) {
@@ -1025,8 +1027,8 @@
 
       const {
         ownerDocument: { body, documentElement },
-        offsetParent } =
-      toNode(element);
+        offsetParent
+      } = toNode(element);
       let parent = offsetParent || documentElement;
 
       while (
@@ -1045,8 +1047,8 @@
 
       return {
         top: top - toFloat(css(element, 'marginTop')),
-        left: left - toFloat(css(element, 'marginLeft')) };
-
+        left: left - toFloat(css(element, 'marginLeft'))
+      };
     }
 
     function offsetPosition(element) {
@@ -1278,7 +1280,7 @@
     }
 
     const inBrowser = typeof window !== 'undefined';
-    const isRtl = inBrowser && attr(document.documentElement, 'dir') === 'rtl';
+    const isRtl = inBrowser && document.dir === 'rtl';
 
     const hasTouch = inBrowser && 'ontouchstart' in window;
     const hasPointerEvents = inBrowser && window.PointerEvent;
@@ -1317,8 +1319,8 @@
         remove(this.writes, task);
       },
 
-      flush };
-
+      flush
+    };
 
     function flush(recursion) {
       runTasks(fastdom.reads);
@@ -1420,8 +1422,8 @@
           const intersection = intersect(path, diagonal);
           return intersection && pointInRect(intersection, p);
         });
-      } };
-
+      }
+    };
 
     // 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;
@@ -1473,8 +1475,8 @@
       return {
         disconnect() {
           listeners.delete(cb);
-        } };
-
+        }
+      };
     }
 
     let listeners;
@@ -1778,8 +1780,8 @@
           top: top - offsetTop,
           left: left - offsetLeft,
           bottom: bottom + offsetTop,
-          right: right + offsetLeft };
-
+          right: right + offsetLeft
+        };
       }).
       concat(offset(element)));
 
@@ -1889,8 +1891,8 @@
     function offsetViewport(scrollElement) {
       const window = toWindow(scrollElement);
       const {
-        document: { documentElement } } =
-      window;
+        document: { documentElement }
+      } = window;
       let viewportElement =
       scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
 
@@ -1933,12 +1935,12 @@
         attach: {
           element: ['left', 'top'],
           target: ['left', 'top'],
-          ...options.attach },
-
+          ...options.attach
+        },
         offset: [0, 0],
         placement: [],
-        ...options };
-
+        ...options
+      };
 
       if (!isArray(target)) {
         target = [target, target];
@@ -1953,7 +1955,7 @@
 
       let offsetPosition = position;
       for (const [i, [prop,, start, end]] of Object.entries(dirs)) {
-        const viewport = getViewport$1(target[i], viewportOffset, boundary, i);
+        const viewport = getViewport$2(element, target[i], viewportOffset, boundary, i);
 
         if (isWithin(position, viewport, i)) {
           continue;
@@ -1973,7 +1975,7 @@
 
           offsetBy = flip(element, target, options, i)[start] - position[start];
 
-          const scrollArea = getScrollArea(target[i], viewportOffset, i);
+          const scrollArea = getScrollArea(element, target[i], viewportOffset, i);
 
           if (!isWithin(applyOffset(position, offsetBy, i), scrollArea, i)) {
             if (isWithin(position, scrollArea, i)) {
@@ -2016,11 +2018,11 @@
         attach: {
           element: ['left', 'top'],
           target: ['left', 'top'],
-          ...options.attach },
-
+          ...options.attach
+        },
         offset: [0, 0],
-        ...options };
-
+        ...options
+      };
 
       let elOffset = offset(element);
 
@@ -2053,8 +2055,8 @@
       return attach === 'center' ? dim / 2 : attach === end ? dim : 0;
     }
 
-    function getViewport$1(element, viewportOffset, boundary, i) {
-      let viewport = getIntersectionArea(...scrollParents(element).map(offsetViewport));
+    function getViewport$2(element, target, viewportOffset, boundary, i) {
+      let viewport = getIntersectionArea(...commonScrollParents(element, target).map(offsetViewport));
 
       if (viewportOffset) {
         viewport[dirs[i][2]] += viewportOffset;
@@ -2071,15 +2073,19 @@
       return viewport;
     }
 
-    function getScrollArea(element, viewportOffset, i) {
+    function getScrollArea(element, target, viewportOffset, i) {
       const [prop,, start, end] = dirs[i];
-      const [scrollElement] = scrollParents(element);
+      const [scrollElement] = commonScrollParents(element, target);
       const viewport = offsetViewport(scrollElement);
       viewport[start] -= scrollElement["scroll" + ucfirst(start)] - viewportOffset;
       viewport[end] = viewport[start] + scrollElement["scroll" + ucfirst(prop)] - viewportOffset;
       return viewport;
     }
 
+    function commonScrollParents(element, target) {
+      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];}
       for (const rect of rects) {
@@ -2100,10 +2106,10 @@
       return attachTo(element, target, {
         attach: {
           element: flipAttach(attach.element, i),
-          target: flipAttach(attach.target, i) },
-
-        offset: flipOffset(offset, i) });
-
+          target: flipAttach(attach.target, i)
+        },
+        offset: flipOffset(offset, i)
+      });
     }
 
     function flipAxis(element, target, options) {
@@ -2111,12 +2117,12 @@
         ...options,
         attach: {
           element: options.attach.element.map(flipAttachAxis).reverse(),
-          target: options.attach.target.map(flipAttachAxis).reverse() },
-
+          target: options.attach.target.map(flipAttachAxis).reverse()
+        },
         offset: options.offset.reverse(),
         placement: options.placement.reverse(),
-        recursion: true });
-
+        recursion: true
+      });
     }
 
     function flipAttach(attach, i) {
@@ -2340,8 +2346,8 @@
 
         set(element) {
           container = $(element);
-        } });
-
+        }
+      });
 
       function update(data, e) {
         if (!data) {
@@ -2463,8 +2469,8 @@
 
       function runWatches(initial) {
         const {
-          $options: { computed } } =
-        this;
+          $options: { computed }
+        } = this;
         const values = { ...this._computed };
         this._computed = {};
 
@@ -2642,8 +2648,8 @@
           if (isUndefined(_computed[key])) {
             delete _computed[key];
           }
-        } });
-
+        }
+      });
     }
 
     function registerEvent(component, event, key) {
@@ -2740,8 +2746,8 @@
       const observer = new MutationObserver(() => component._callWatches());
       observer.observe(el, {
         childList: true,
-        subtree: true });
-
+        subtree: true
+      });
 
       return observer;
     }
@@ -2773,8 +2779,8 @@
 
       observer.observe(el, {
         attributes: true,
-        attributeFilter: filter.concat(filter.map((key) => "data-" + key)) });
-
+        attributeFilter: filter.concat(filter.map((key) => "data-" + key))
+      });
 
       return observer;
     }
@@ -2944,7 +2950,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.15.11-dev.fd61e70ff';
+    UIkit.version = '3.15.12-dev.0c0d42cdf';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -2960,6 +2966,8 @@
       }
 
       requestAnimationFrame(function () {
+        trigger(document, 'uikit:init', UIkit);
+
         if (document.body) {
           apply(document.body, connect);
         }
@@ -2968,16 +2976,16 @@
         document,
         {
           childList: true,
-          subtree: true });
-
+          subtree: true
+        });
 
 
         new MutationObserver((records) => records.forEach(applyAttributeMutation)).observe(
         document,
         {
           attributes: true,
-          subtree: true });
-
+          subtree: true
+        });
 
 
         UIkit._initialized = true;
@@ -3010,12 +3018,13 @@
     var Class = {
       connected() {
         addClass(this.$el, this.$options.id);
-      } };
+      }
+    };
 
     var Lazyload = {
       data: {
-        preload: 5 },
-
+        preload: 5
+      },
 
       methods: {
         lazyload(observeTargets, targets) {if (observeTargets === void 0) {observeTargets = this.$el;}if (targets === void 0) {targets = this.$el;}
@@ -3034,7 +3043,9 @@
             }
           }));
 
-        } } };
+        }
+      }
+    };
 
     var Togglable = {
       props: {
@@ -3043,8 +3054,8 @@
         duration: Number,
         velocity: Number,
         origin: String,
-        transition: String },
-
+        transition: String
+      },
 
       data: {
         cls: false,
@@ -3054,8 +3065,8 @@
         origin: false,
         transition: 'ease',
         clsEnter: 'uk-togglabe-enter',
-        clsLeave: 'uk-togglabe-leave' },
-
+        clsLeave: 'uk-togglabe-leave'
+      },
 
       computed: {
         hasAnimation(_ref) {let { animation } = _ref;
@@ -3064,8 +3075,8 @@
 
         hasTransition(_ref2) {let { animation } = _ref2;
           return ['slide', 'reveal'].some((transition) => startsWith(animation[0], transition));
-        } },
-
+        }
+      },
 
       methods: {
         toggleElement(targets, toggle, animate) {
@@ -3142,9 +3153,9 @@
           if (changed) {
             trigger(el, 'toggled', [toggled, this]);
           }
-        } } };
-
-
+        }
+      }
+    };
 
     function toggleInstant(el, show, _ref3) {let { _toggle } = _ref3;
       Animation.cancel(el);
@@ -3216,9 +3227,9 @@
         'borderBottom',
         'borderLeft',
         'borderImage',
-        marginStartProp]) });
-
+        marginStartProp])
 
+      });
 
       css(el, {
         padding: 0,
@@ -3229,8 +3240,8 @@
         width: dim.width,
         height: dim.height,
         overflow: 'hidden',
-        [dimProp]: currentDim });
-
+        [dimProp]: currentDim
+      });
 
       const percent = currentDim / endDim;
       duration = (velocity * endDim + duration) * (show ? 1 - percent : percent);
@@ -3284,8 +3295,8 @@
         multiple: Boolean,
         toggle: String,
         content: String,
-        offset: Number },
-
+        offset: Number
+      },
 
       data: {
         targets: '> *',
@@ -3296,8 +3307,8 @@
         clsOpen: 'uk-open',
         toggle: '> .uk-accordion-title',
         content: '> .uk-accordion-content',
-        offset: 0 },
-
+        offset: 0
+      },
 
       computed: {
         items: {
@@ -3319,8 +3330,8 @@
             }
           },
 
-          immediate: true },
-
+          immediate: true
+        },
 
         toggles(_ref2) {let { toggle } = _ref2;
           return this.items.map((item) => $(toggle, item));
@@ -3343,9 +3354,9 @@
             }
           },
 
-          immediate: true } },
-
-
+          immediate: true
+        }
+      },
 
       connected() {
         this.lazyload();
@@ -3366,8 +3377,8 @@
           this._off = keepScrollPosition(e.target);
           await this.toggle(index(this.toggles, e.current));
           this._off();
-        } }],
-
+        }
+      }],
 
 
       methods: {
@@ -3399,9 +3410,9 @@
           })));
 
 
-        } } };
-
-
+        }
+      }
+    };
 
     function hide(el, hide) {
       el && (el.hidden = hide);
@@ -3462,14 +3473,14 @@
 
       props: {
         animation: Boolean,
-        close: String },
-
+        close: String
+      },
 
       data: {
         animation: true,
         selClose: '.uk-alert-close',
-        duration: 150 },
-
+        duration: 150
+      },
 
       events: {
         name: 'click',
@@ -3481,16 +3492,16 @@
         handler(e) {
           e.preventDefault();
           this.close();
-        } },
-
+        }
+      },
 
       methods: {
         async close() {
           await this.toggleElement(this.$el, false, animate$1);
           this.$destroy(true);
-        } } };
-
-
+        }
+      }
+    };
 
     function animate$1(el, show, _ref) {let { duration, transition, velocity } = _ref;
       const height = toFloat(css(el, 'height'));
@@ -3505,8 +3516,8 @@
         paddingBottom: 0,
         borderTop: 0,
         borderBottom: 0,
-        opacity: 0 },
-
+        opacity: 0
+      },
       velocity * height + duration,
       transition);
 
@@ -3517,13 +3528,13 @@
 
       props: {
         automute: Boolean,
-        autoplay: Boolean },
-
+        autoplay: Boolean
+      },
 
       data: {
         automute: false,
-        autoplay: true },
-
+        autoplay: true
+      },
 
       connected() {
         this.inView = this.autoplay === 'inview';
@@ -3544,24 +3555,27 @@
       },
 
       update: {
-        read() {
+        read(_ref) {let { visible } = _ref;
           if (!isVideo(this.$el)) {
             return false;
           }
 
           return {
+            prev: visible,
             visible: isVisible(this.$el) && css(this.$el, 'visibility') !== 'hidden',
-            inView: this.inView && isInView(this.$el) };
-
+            inView: this.inView && isInView(this.$el)
+          };
         },
 
-        write(_ref) {let { visible, inView } = _ref;
+        write(_ref2) {let { prev, visible, inView } = _ref2;
           if (!visible || this.inView && !inView) {
             pause(this.$el);
-          } else if (this.autoplay === true || this.inView && inView) {
+          } else if (this.autoplay === true && !prev || this.inView && inView) {
             play(this.$el);
           }
-        } } };
+        }
+      }
+    };
 
     var Resize = {
       connected() {var _this$$options$resize;
@@ -3570,25 +3584,26 @@
         this.$emit('resize')));
 
 
-      } };
+      }
+    };
 
     var cover = {
       mixins: [Resize, Video],
 
       props: {
         width: Number,
-        height: Number },
-
+        height: Number
+      },
 
       data: {
-        automute: true },
-
+        automute: true
+      },
 
       events: {
         'load loadedmetadata'() {
           this.$emit('resize');
-        } },
-
+        }
+      },
 
       resizeTargets() {
         return [this.$el, getPositionedParent(this.$el) || parent(this.$el)];
@@ -3604,8 +3619,8 @@
           if (!dim.width || !dim.height) {
             const intrinsic = {
               width: $el.naturalWidth || $el.videoWidth || $el.clientWidth,
-              height: $el.naturalHeight || $el.videoHeight || $el.clientHeight };
-
+              height: $el.naturalHeight || $el.videoHeight || $el.clientHeight
+            };
 
             if (dim.width) {
               dim = ratio(intrinsic, 'width', dim.width);
@@ -3620,8 +3635,8 @@
           getPositionedParent($el) || parent($el);
           const coverDim = cover(dim, {
             width: coverWidth + (coverWidth % 2 ? 1 : 0),
-            height: coverHeight + (coverHeight % 2 ? 1 : 0) });
-
+            height: coverHeight + (coverHeight % 2 ? 1 : 0)
+          });
 
           if (!coverDim.width || !coverDim.height) {
             return false;
@@ -3634,9 +3649,9 @@
           css(this.$el, { height, width });
         },
 
-        events: ['resize'] } };
-
-
+        events: ['resize']
+      }
+    };
 
     function getPositionedParent(el) {
       while (el = parent(el)) {
@@ -3648,17 +3663,19 @@
 
     var Container = {
       props: {
-        container: Boolean },
-
+        container: Boolean
+      },
 
       data: {
-        container: true },
-
+        container: true
+      },
 
       computed: {
         container(_ref) {let { container } = _ref;
           return container === true && this.$container || container && $(container);
-        } } };
+        }
+      }
+    };
 
     var Position = {
       props: {
@@ -3666,16 +3683,16 @@
         offset: null,
         flip: Boolean,
         shift: Boolean,
-        inset: Boolean },
-
+        inset: Boolean
+      },
 
       data: {
         pos: "bottom-" + (isRtl ? 'right' : 'left'),
         offset: false,
         flip: true,
         shift: true,
-        inset: false },
-
+        inset: false
+      },
 
       connected() {
         this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
@@ -3690,8 +3707,8 @@
 
           const attach = {
             element: [this.inset ? this.dir : flipPosition(this.dir), this.align],
-            target: [this.dir, this.align] };
-
+            target: [this.dir, this.align]
+          };
 
           if (this.axis === 'y') {
             for (const prop in attach) {
@@ -3713,8 +3730,8 @@
             offset,
             boundary,
             placement,
-            viewportOffset: this.getViewportOffset(element) });
-
+            viewportOffset: this.getViewportOffset(element)
+          });
 
           // Restore scroll position
           scrollElement.scrollTop = scrollTop;
@@ -3745,7 +3762,9 @@
 
         getViewportOffset(element) {
           return toPx(css(element, '--uk-position-viewport-offset'));
-        } } };
+        }
+      }
+    };
 
     var Style = {
       beforeConnect() {
@@ -3754,7 +3773,8 @@
 
       disconnected() {
         attr(this.$el, 'style', this._style);
-      } };
+      }
+    };
 
     const active$1 = [];
 
@@ -3766,16 +3786,16 @@
         selClose: String,
         escClose: Boolean,
         bgClose: Boolean,
-        stack: Boolean },
-
+        stack: Boolean
+      },
 
       data: {
         cls: 'uk-open',
         escClose: true,
         bgClose: true,
         overlay: true,
-        stack: false },
-
+        stack: false
+      },
 
       computed: {
         panel(_ref, $el) {let { selPanel } = _ref;
@@ -3788,8 +3808,8 @@
 
         bgClose(_ref2) {let { bgClose } = _ref2;
           return bgClose && this.panel;
-        } },
-
+        }
+      },
 
       beforeDisconnect() {
         if (includes(active$1, this)) {
@@ -3808,8 +3828,8 @@
         handler(e) {
           e.preventDefault();
           this.hide();
-        } },
-
+        }
+      },
 
       {
         name: 'click',
@@ -3829,8 +3849,8 @@
           {
             this.hide();
           }
-        } },
-
+        }
+      },
 
       {
         name: 'toggle',
@@ -3847,8 +3867,8 @@
           if (this.isToggled() === includes(active$1, this)) {
             this.toggle();
           }
-        } },
-
+        }
+      },
 
       {
         name: 'beforeshow',
@@ -3866,8 +3886,8 @@
           } else {
             active$1.push(this);
           }
-        } },
-
+        }
+      },
 
       {
         name: 'show',
@@ -3940,8 +3960,8 @@
             { self: true });
 
           }
-        } },
-
+        }
+      },
 
       {
         name: 'shown',
@@ -3956,8 +3976,8 @@
           if (!$(':focus', this.$el)) {
             this.$el.focus();
           }
-        } },
-
+        }
+      },
 
       {
         name: 'hidden',
@@ -3974,8 +3994,8 @@
           if (!active$1.some((modal) => modal.clsPage === this.clsPage)) {
             removeClass(document.documentElement, this.clsPage);
           }
-        } }],
-
+        }
+      }],
 
 
       methods: {
@@ -3996,9 +4016,9 @@
 
         hide() {
           return this.toggleElement(this.$el, false, animate);
-        } } };
-
-
+        }
+      }
+    };
 
     function animate(el, show, _ref6) {let { transitionElement, _toggle } = _ref6;
       return new Promise((resolve, reject) =>
@@ -4013,8 +4033,8 @@
         'transitionstart',
         () => {
           once(transitionElement, 'transitionend transitioncancel', resolve, {
-            self: true });
-
+            self: true
+          });
           clearTimeout(timer);
         },
         { self: true });
@@ -4095,8 +4115,8 @@
       css(scrollingElement, {
         overflowY: 'hidden',
         touchAction: 'none',
-        paddingRight: width(window) - scrollingElement.clientWidth });
-
+        paddingRight: width(window) - scrollingElement.clientWidth
+      });
       return () => {
         prevented = false;
         css(scrollingElement, { overflowY: '', touchAction: '', paddingRight: '' });
@@ -4139,8 +4159,8 @@
         autoUpdate: Boolean,
         clsDrop: String,
         animateOut: Boolean,
-        bgScroll: Boolean },
-
+        bgScroll: Boolean
+      },
 
       data: {
         mode: ['click', 'hover'],
@@ -4160,8 +4180,8 @@
         bgScroll: true,
         animation: ['uk-animation-fade'],
         cls: 'uk-open',
-        container: false },
-
+        container: false
+      },
 
       computed: {
         boundary(_ref, $el) {let { boundary, boundaryX, boundaryY } = _ref;
@@ -4179,8 +4199,8 @@
           targetX === true ? window : query(targetX, $el),
           targetY === true ? window : query(targetY, $el)];
 
-        } },
-
+        }
+      },
 
       created() {
         this.tracker = new MouseTracker();
@@ -4196,8 +4216,8 @@
         if (this.toggle && !this.targetEl) {
           this.targetEl = this.$create('toggle', query(this.toggle, this.$el), {
             target: this.$el,
-            mode: this.mode }).
-          $el;
+            mode: this.mode
+          }).$el;
           attr(this.targetEl, 'aria-haspopup', true);
           this.lazyload(this.targetEl);
         }
@@ -4221,8 +4241,8 @@
         handler(e) {
           e.preventDefault();
           this.hide(false);
-        } },
-
+        }
+      },
 
       {
         name: 'click',
@@ -4241,16 +4261,16 @@
           {
             this.hide(false);
           }
-        } },
-
+        }
+      },
 
       {
         name: 'beforescroll',
 
         handler() {
           this.hide(false);
-        } },
-
+        }
+      },
 
       {
         name: 'toggle',
@@ -4265,8 +4285,8 @@
           } else {
             this.show(toggle == null ? void 0 : toggle.$el, false);
           }
-        } },
-
+        }
+      },
 
       {
         name: 'toggleshow',
@@ -4276,8 +4296,8 @@
         handler(e, toggle) {
           e.preventDefault();
           this.show(toggle == null ? void 0 : toggle.$el);
-        } },
-
+        }
+      },
 
       {
         name: 'togglehide',
@@ -4289,8 +4309,8 @@
           if (!matches(this.$el, ':focus,:hover')) {
             this.hide();
           }
-        } },
-
+        }
+      },
 
       {
         name: pointerEnter + " focusin",
@@ -4303,8 +4323,8 @@
           if (!isTouch(e)) {
             this.clearTimers();
           }
-        } },
-
+        }
+      },
 
       {
         name: pointerLeave + " focusout",
@@ -4317,8 +4337,8 @@
           if (!isTouch(e) && e.relatedTarget) {
             this.hide();
           }
-        } },
-
+        }
+      },
 
       {
         name: 'toggled',
@@ -4332,8 +4352,8 @@
 
           this.clearTimers();
           this.position();
-        } },
-
+        }
+      },
 
       {
         name: 'show',
@@ -4388,8 +4408,8 @@
           ...(this.autoUpdate ?
           [
           on([document, scrollParents(this.$el)], 'scroll', update, {
-            passive: true })] :
-
+            passive: true
+          })] :
 
           []),
 
@@ -4399,10 +4419,10 @@
 
 
           once(this.$el, 'hide', () => handlers.forEach((handler) => handler()), {
-            self: true });
-
-        } },
-
+            self: true
+          });
+        }
+      },
 
       {
         name: 'beforehide',
@@ -4411,8 +4431,8 @@
 
         handler() {
           this.clearTimers();
-        } },
-
+        }
+      },
 
       {
         name: 'hide',
@@ -4428,8 +4448,8 @@
 
           active = this.isActive() ? null : active;
           this.tracker.cancel();
-        } }],
-
+        }
+      }],
 
 
       update: {
@@ -4437,8 +4457,8 @@
           if (this.isToggled() && !hasClass(this.$el, this.clsEnter)) {
             this.position();
           }
-        } },
-
+        }
+      },
 
       methods: {
         show(target, delay) {if (target === void 0) {target = this.targetEl;}if (delay === void 0) {delay = true;}
@@ -4514,7 +4534,7 @@
           // Ensure none positioned element does not generate scrollbars
           this.$el.hidden = true;
 
-          const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
+          const viewports = this.target.map((target) => getViewport$1(this.$el, target));
           const viewportOffset = this.getViewportOffset(this.$el);
 
           const dirs = [
@@ -4529,8 +4549,8 @@
                 offset(this.boundary[i])[prop],
                 viewports[i][prop] - 2 * viewportOffset),
 
-                ["overflow-" + axis]: 'auto' });
-
+                ["overflow-" + axis]: 'auto'
+              });
             }
           }
 
@@ -4564,15 +4584,15 @@
                 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);
             }
           }
-        } } };
-
-
+        }
+      }
+    };
 
     function getPositionedElements(el) {
       const result = [];
@@ -4580,18 +4600,22 @@
       return result;
     }
 
+    function getViewport$1(el, target) {
+      return offsetViewport(scrollParents(target).find((parent) => within(el, parent)));
+    }
+
     var formCustom = {
       mixins: [Class],
 
       args: 'target',
 
       props: {
-        target: Boolean },
-
+        target: Boolean
+      },
 
       data: {
-        target: false },
-
+        target: false
+      },
 
       computed: {
         input(_, $el) {
@@ -4608,8 +4632,8 @@
             target === true && parent(this.input) === $el && this.input.nextElementSibling ||
             $(target, $el)));
 
-        } },
-
+        }
+      },
 
       update() {var _input$files;
         const { target, input } = this;
@@ -4639,8 +4663,8 @@
 
         handler() {
           this.$emit();
-        } },
-
+        }
+      },
 
       {
         name: 'reset',
@@ -4651,20 +4675,23 @@
 
         handler() {
           this.$emit();
-        } }] };
+        }
+      }]
+
+    };
 
     var Margin = {
       mixins: [Resize],
 
       props: {
         margin: String,
-        firstColumn: Boolean },
-
+        firstColumn: Boolean
+      },
 
       data: {
         margin: 'uk-margin-small-top',
-        firstColumn: 'uk-first-column' },
-
+        firstColumn: 'uk-first-column'
+      },
 
       resizeTargets() {
         return [this.$el, ...toArray(this.$el.children)];
@@ -4673,8 +4700,10 @@
       connected() {
         this.registerObserver(
         observeMutation(this.$el, () => this.$reset(), {
-          childList: true }));
-
+          childList: true,
+          attributes: true,
+          attributeFilter: ['style']
+        }));
 
       },
 
@@ -4684,8 +4713,8 @@
 
           return {
             rows,
-            columns: getColumns(rows) };
-
+            columns: getColumns(rows)
+          };
         },
 
         write(_ref) {let { columns, rows } = _ref;
@@ -4697,9 +4726,9 @@
           }
         },
 
-        events: ['resize'] } };
-
-
+        events: ['resize']
+      }
+    };
 
     function getRows(items) {
       return sortBy(items, 'top', 'bottom');
@@ -4775,8 +4804,8 @@
         top: offsetTop,
         left: offsetLeft,
         bottom: offsetTop + offsetHeight,
-        right: offsetLeft + offsetWidth };
-
+        right: offsetLeft + offsetWidth
+      };
     }
 
     var Scroll = {
@@ -4786,8 +4815,8 @@
 
       disconnected() {
         unregisterScrollListener(this._uid);
-      } };
-
+      }
+    };
 
     const scrollListeners = new Map();
     let unbindScrollListener;
@@ -4796,8 +4825,8 @@
       unbindScrollListener ||
       on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
         passive: true,
-        capture: true });
-
+        capture: true
+      });
 
       scrollListeners.set(id, listener);
     }
@@ -4819,15 +4848,15 @@
 
       props: {
         masonry: Boolean,
-        parallax: Number },
-
+        parallax: Number
+      },
 
       data: {
         margin: 'uk-grid-margin',
         clsStack: 'uk-grid-stack',
         masonry: false,
-        parallax: 0 },
-
+        parallax: 0
+      },
 
       connected() {
         this.masonry && addClass(this.$el, 'uk-flex-top uk-flex-wrap-top');
@@ -4844,8 +4873,8 @@
           toggleClass(this.$el, this.clsStack, columns.length < 2);
         },
 
-        events: ['resize'] },
-
+        events: ['resize']
+      },
 
       {
         read(data) {
@@ -4893,8 +4922,8 @@
           height !== false && css(this.$el, 'height', height);
         },
 
-        events: ['resize'] },
-
+        events: ['resize']
+      },
 
       {
         read() {
@@ -4905,8 +4934,8 @@
           return {
             scrolled: this.parallax ?
             scrolledOver(this.$el) * Math.abs(this.parallax) :
-            false };
-
+            false
+          };
         },
 
         write(_ref3) {let { columns, scrolled, translates } = _ref3;
@@ -4930,10 +4959,10 @@
 
         },
 
-        events: ['scroll', 'resize'] }] };
-
-
+        events: ['scroll', 'resize']
+      }]
 
+    };
 
     function positionedAbsolute(el) {
       return children(el).some((el) => css(el, 'position') === 'absolute');
@@ -4968,13 +4997,13 @@
 
       props: {
         target: String,
-        row: Boolean },
-
+        row: Boolean
+      },
 
       data: {
         target: '> *',
-        row: true },
-
+        row: true
+      },
 
       computed: {
         elements: {
@@ -4984,9 +5013,9 @@
 
           watch() {
             this.$reset();
-          } } },
-
-
+          }
+        }
+      },
 
       resizeTargets() {
         return [this.$el, ...this.elements];
@@ -4995,8 +5024,8 @@
       update: {
         read() {
           return {
-            rows: (this.row ? getRows(this.elements) : [this.elements]).map(match) };
-
+            rows: (this.row ? getRows(this.elements) : [this.elements]).map(match)
+          };
         },
 
         write(_ref2) {let { rows } = _ref2;
@@ -5005,9 +5034,9 @@
           }
         },
 
-        events: ['resize'] } };
-
-
+        events: ['resize']
+      }
+    };
 
     function match(elements) {
       if (elements.length < 2) {
@@ -5020,8 +5049,8 @@
 
       return {
         heights: elements.map((el, i) => heights[i].toFixed(2) === max.toFixed(2) ? '' : max),
-        elements };
-
+        elements
+      };
     }
 
     function getHeight(element) {
@@ -5047,15 +5076,15 @@
         expand: Boolean,
         offsetTop: Boolean,
         offsetBottom: Boolean,
-        minHeight: Number },
-
+        minHeight: Number
+      },
 
       data: {
         expand: false,
         offsetTop: false,
         offsetBottom: false,
-        minHeight: 0 },
-
+        minHeight: 0
+      },
 
       resizeTargets() {
         // check for offsetTop change
@@ -5124,7 +5153,9 @@
           }
         },
 
-        events: ['resize'] } };
+        events: ['resize']
+      }
+    };
 
     var SVG = {
       args: 'src',
@@ -5139,15 +5170,15 @@
         ratio: Number,
         class: String,
         strokeAnimation: Boolean,
-        attributes: 'list' },
-
+        attributes: 'list'
+      },
 
       data: {
         ratio: 1,
         include: ['style', 'class'],
         class: '',
-        strokeAnimation: false },
-
+        strokeAnimation: false
+      },
 
       beforeConnect() {
         this.class += ' uk-svg';
@@ -5244,9 +5275,9 @@
           }
 
           dimensions.forEach((val, i) => attr(el, props[i], toFloat(val) * this.ratio || null));
-        } } };
-
-
+        }
+      }
+    };
 
     const loadSVG = memoize(async (src) => {
       if (src) {
@@ -5338,7 +5369,7 @@
 
     var navbarParentIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" points=\"1 3.5 6 8.5 11 3.5\"/></svg>";
 
-    var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><style>.uk-navbar-toggle-animate svg > [class*='line-'] {\n            transition: 0.2s ease-in-out;\n            transition-property: transform, opacity,;\n            transform-origin: center;\n            opacity: 1;\n        }\n\n        .uk-navbar-toggle svg > .line-3 { opacity: 0; }\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-3 { opacity: 1; }\n\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-2 { transform: rotate(45deg); }\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-3 { transform: rotate(-45deg); }\n\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-1,\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-4 { opacity: 0; }\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-1 { transform: translateY(6px) scaleX(0); }\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-4 { transform: translateY(-6px) scaleX(0); }</style><rect class=\"line-1\" y=\"3\" width=\"20\" height=\"2\"/><rect class=\"line-2\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-3\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-4\" y=\"15\" width=\"20\" height=\"2\"/></svg>";
+    var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><style>.uk-navbar-toggle-animate svg>[class*=line-]{transition:.2s ease-in-out;transition-property:transform,opacity,;transform-origin:center;opacity:1}.uk-navbar-toggle svg>.line-3{opacity:0}.uk-navbar-toggle-animate[aria-expanded=true] svg>.line-3{opacity:1}.uk-navbar-toggle-animate[aria-expanded=true] svg>.line-2{transform:rotate(45deg)}.uk-navbar-toggle-animate[aria-expanded=true] svg>.line-3{transform:rotate(-45deg)}.uk-navbar-toggle-animate[aria-expanded=true] svg>.line-1,.uk-navbar-toggle-animate[aria-expanded=true] svg>.line-4{opacity:0}.uk-navbar-toggle-animate[aria-expanded=true] svg>.line-1{transform:translateY(6px) scaleX(0)}.uk-navbar-toggle-animate[aria-expanded=true] svg>.line-4{transform:translateY(-6px) scaleX(0)}</style><rect class=\"line-1\" y=\"3\" width=\"20\" height=\"2\"/><rect class=\"line-2\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-3\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-4\" y=\"15\" width=\"20\" height=\"2\"/></svg>";
 
     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>";
 
@@ -5383,8 +5414,8 @@
       'slidenav-next': slidenavNext,
       'slidenav-next-large': slidenavNextLarge,
       'slidenav-previous': slidenavPrevious,
-      'slidenav-previous-large': slidenavPreviousLarge };
-
+      'slidenav-previous-large': slidenavPreviousLarge
+    };
 
     const Icon = {
       install: install$1,
@@ -5412,7 +5443,9 @@
           }
 
           return icon;
-        } } };
+        }
+      }
+    };
 
     const IconComponent = {
       args: false,
@@ -5420,13 +5453,13 @@
       extends: Icon,
 
       data: (vm) => ({
-        icon: hyphenate(vm.constructor.options.name) }),
-
+        icon: hyphenate(vm.constructor.options.name)
+      }),
 
       beforeConnect() {
         addClass(this.$el, this.$options.id);
-      } };
-
+      }
+    };
 
     const NavParentIcon = {
       extends: IconComponent,
@@ -5434,8 +5467,8 @@
       beforeConnect() {
         const icon = this.$props.icon;
         this.icon = closest(this.$el, '.uk-nav-primary') ? icon + "-large" : icon;
-      } };
-
+      }
+    };
 
     const Slidenav = {
       extends: IconComponent,
@@ -5444,8 +5477,8 @@
         addClass(this.$el, 'uk-slidenav');
         const icon = this.$props.icon;
         this.icon = hasClass(this.$el, 'uk-slidenav-large') ? icon + "-large" : icon;
-      } };
-
+      }
+    };
 
     const Search = {
       extends: IconComponent,
@@ -5457,16 +5490,16 @@
         parents(this.$el, '.uk-search-navbar').length ?
         'search-navbar' :
         this.$props.icon;
-      } };
-
+      }
+    };
 
     const Close = {
       extends: IconComponent,
 
       beforeConnect() {
         this.icon = "close-" + (hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon');
-      } };
-
+      }
+    };
 
     const Spinner = {
       extends: IconComponent,
@@ -5480,9 +5513,9 @@
           }
 
           return icon;
-        } } };
-
-
+        }
+      }
+    };
 
     const parsed = {};
     function install$1(UIkit) {
@@ -5530,8 +5563,8 @@
         offsetTop: String,
         offsetLeft: String,
         target: String,
-        loading: String },
-
+        loading: String
+      },
 
       data: {
         dataSrc: '',
@@ -5539,8 +5572,8 @@
         offsetTop: '50vh',
         offsetLeft: '50vw',
         target: false,
-        loading: 'lazy' },
-
+        loading: 'lazy'
+      },
 
       connected() {
         if (this.loading !== 'lazy') {
@@ -5571,9 +5604,9 @@
         {
           rootMargin: toPx(this.offsetTop, 'height') + "px " + toPx(
           this.offsetLeft,
-          'width') + "px" }));
-
+          'width') + "px"
 
+        }));
 
 
       },
@@ -5597,9 +5630,9 @@
           removeAttr(image, 'loading');
           setSrcAttrs(this.$el, image.currentSrc);
           return this._data.image = image;
-        } } };
-
-
+        }
+      }
+    };
 
     function setSrcAttrs(el, src) {
       if (isImg(el)) {
@@ -5689,12 +5722,12 @@
 
     var Media = {
       props: {
-        media: Boolean },
-
+        media: Boolean
+      },
 
       data: {
-        media: false },
-
+        media: false
+      },
 
       connected() {
         const media = toMedia(this.media, this.$el);
@@ -5715,8 +5748,8 @@
 
       disconnected() {var _this$offMediaObj;
         (_this$offMediaObj = this.offMediaObj) == null ? void 0 : _this$offMediaObj.call(this);
-      } };
-
+      }
+    };
 
     function toMedia(value, element) {
       if (isString(value)) {
@@ -5734,21 +5767,21 @@
       mixins: [Class, Media, Resize],
 
       props: {
-        fill: String },
-
+        fill: String
+      },
 
       data: {
         fill: '',
         clsWrapper: 'uk-leader-fill',
         clsHide: 'uk-leader-hide',
-        attrFill: 'data-fill' },
-
+        attrFill: 'data-fill'
+      },
 
       computed: {
         fill(_ref) {let { fill } = _ref;
           return fill || css(this.$el, '--uk-leader-fill-content');
-        } },
-
+        }
+      },
 
       connected() {
         [this.wrapper] = wrapInner(this.$el, "<span class=\"" + this.clsWrapper + "\">");
@@ -5765,8 +5798,8 @@
           return {
             width,
             fill: this.fill,
-            hide: !this.matchMedia };
-
+            hide: !this.matchMedia
+          };
         },
 
         write(_ref2) {let { width, fill, hide } = _ref2;
@@ -5774,7 +5807,9 @@
           attr(this.wrapper, this.attrFill, new Array(width).join(fill));
         },
 
-        events: ['resize'] } };
+        events: ['resize']
+      }
+    };
 
     var modal = {
       install,
@@ -5785,8 +5820,8 @@
         clsPage: 'uk-modal-page',
         selPanel: '.uk-modal-dialog',
         selClose:
-        '.uk-modal-close, .uk-modal-close-default, .uk-modal-close-outside, .uk-modal-close-full' },
-
+        '.uk-modal-close, .uk-modal-close-default, .uk-modal-close-outside, .uk-modal-close-full'
+      },
 
       events: [
       {
@@ -5802,8 +5837,8 @@
           }
 
           height(this.$el); // force reflow
-        } },
-
+        }
+      },
 
       {
         name: 'hidden',
@@ -5813,10 +5848,10 @@
         handler() {
           css(this.$el, 'display', '');
           removeClass(this.$el, 'uk-flex');
-        } }] };
-
-
+        }
+      }]
 
+    };
 
     function install(_ref) {let { modal } = _ref;
       modal.dialog = function (content, options) {
@@ -5895,8 +5930,8 @@
 
       modal.labels = {
         ok: 'Ok',
-        cancel: 'Cancel' };
-
+        cancel: 'Cancel'
+      };
 
       function openDialog(tmpl, options, hideFn, submitFn) {
         options = { bgClose: false, escClose: true, labels: modal.labels, ...options };
@@ -5927,7 +5962,9 @@
       data: {
         targets: '> .uk-parent',
         toggle: '> a',
-        content: '> ul' } };
+        content: '> ul'
+      }
+    };
 
     var navbar = {
       mixins: [Class, Container],
@@ -5949,8 +5986,8 @@
         targetX: Boolean,
         targetY: Boolean,
         animation: Boolean,
-        animateOut: Boolean },
-
+        animateOut: Boolean
+      },
 
       data: {
         dropdown: '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
@@ -5960,8 +5997,8 @@
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
-        container: false },
-
+        container: false
+      },
 
       computed: {
         dropbarAnchor(_ref, $el) {let { dropbarAnchor } = _ref;
@@ -5986,8 +6023,8 @@
             addClass(dropbar, 'uk-dropbar', 'uk-dropbar-top', 'uk-navbar-dropbar');
           },
 
-          immediate: true },
-
+          immediate: true
+        },
 
         dropContainer(_, $el) {
           return this.container || $el;
@@ -6018,13 +6055,13 @@
               flip: false,
               shift: true,
               pos: "bottom-" + this.align,
-              boundary: this.boundary === true ? this.$el : this.boundary });
-
+              boundary: this.boundary === true ? this.$el : this.boundary
+            });
 
           },
 
-          immediate: true },
-
+          immediate: true
+        },
 
         toggles: {
           get(_ref4, $el) {let { dropdown } = _ref4;
@@ -6041,9 +6078,9 @@
             }
           },
 
-          immediate: true } },
-
-
+          immediate: true
+        }
+      },
 
       disconnected() {
         this.dropbar && remove$1(this.dropbar);
@@ -6069,8 +6106,8 @@
           {
             active.hide(false);
           }
-        } },
-
+        }
+      },
 
       {
         name: 'keydown',
@@ -6097,8 +6134,8 @@
           }
 
           handleNavItemNavigation(e, this.toggles, active);
-        } },
-
+        }
+      },
 
       {
         name: 'keydown',
@@ -6141,8 +6178,8 @@
           }
 
           handleNavItemNavigation(e, this.toggles, active);
-        } },
-
+        }
+      },
 
       {
         name: 'mouseleave',
@@ -6165,8 +6202,8 @@
           {
             active.hide();
           }
-        } },
-
+        }
+      },
 
       {
         name: 'beforeshow',
@@ -6189,8 +6226,8 @@
           }
 
           addClass(target, this.clsDrop + "-dropbar");
-        } },
-
+        }
+      },
 
       {
         name: 'show',
@@ -6222,8 +6259,8 @@
             target);
 
           });
-        } },
-
+        }
+      },
 
       {
         name: 'beforehide',
@@ -6246,8 +6283,8 @@
           {
             e.preventDefault();
           }
-        } },
-
+        }
+      },
 
       {
         name: 'hide',
@@ -6272,8 +6309,8 @@
           if (!active || (active == null ? void 0 : active.$el) === target) {
             this.transitionTo(0);
           }
-        } }],
-
+        }
+      }],
 
 
       methods: {
@@ -6297,8 +6334,8 @@
           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)]).
 
 
@@ -6312,9 +6349,9 @@
 
         isDropbarDrop(el) {
           return this.getDropdown(el) && hasClass(el, this.clsDrop);
-        } } };
-
-
+        }
+      }
+    };
 
     function handleNavItemNavigation(e, toggles, active) {
       const { current, keyCode } = e;
@@ -6351,22 +6388,23 @@
       LEFT: 37,
       UP: 38,
       RIGHT: 39,
-      DOWN: 40 };
+      DOWN: 40
+    };
 
     var Swipe = {
       props: {
-        swiping: Boolean },
-
+        swiping: Boolean
+      },
 
       data: {
-        swiping: true },
-
+        swiping: true
+      },
 
       computed: {
         swipeTarget(props, $el) {
           return $el;
-        } },
-
+        }
+      },
 
       connected() {
         if (!this.swiping) {
@@ -6399,10 +6437,10 @@
                 });
               }
             });
-          } });
-
-      } };
-
+          }
+        });
+      }
+    };
 
     function swipeDirection(x1, y1, x2, y2) {
       return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ?
@@ -6422,8 +6460,8 @@
       props: {
         mode: String,
         flip: Boolean,
-        overlay: Boolean },
-
+        overlay: Boolean
+      },
 
       data: {
         mode: 'slide',
@@ -6438,8 +6476,8 @@
         clsMode: 'uk-offcanvas',
         clsOverlay: 'uk-offcanvas-overlay',
         selClose: '.uk-offcanvas-close',
-        container: false },
-
+        container: false
+      },
 
       computed: {
         clsFlip(_ref) {let { flip, clsFlip } = _ref;
@@ -6464,8 +6502,8 @@
 
         transitionElement(_ref6) {let { mode } = _ref6;
           return mode === 'reveal' ? parent(this.panel) : this.panel;
-        } },
-
+        }
+      },
 
       update: {
         read() {
@@ -6474,8 +6512,8 @@
           }
         },
 
-        events: ['resize'] },
-
+        events: ['resize']
+      },
 
       events: [
       {
@@ -6490,8 +6528,8 @@
 
         handler(e) {
           e.cancelable && e.preventDefault();
-        } },
-
+        }
+      },
 
       {
         name: 'show',
@@ -6521,8 +6559,8 @@
           addClass(body, this.clsContainerAnimation);
 
           this.clsContainerAnimation && suppressUserScale();
-        } },
-
+        }
+      },
 
       {
         name: 'hide',
@@ -6532,8 +6570,8 @@
         handler() {
           removeClass(document.body, this.clsContainerAnimation);
           css(document.body, 'touch-action', '');
-        } },
-
+        }
+      },
 
       {
         name: 'hidden',
@@ -6552,8 +6590,8 @@
           css(this.$el, 'display', '');
           css(this.panel, 'maxWidth', '');
           removeClass(document.body, this.clsContainer, this.clsFlip);
-        } },
-
+        }
+      },
 
       {
         name: 'swipeLeft swipeRight',
@@ -6562,10 +6600,10 @@
           if (this.isToggled() && endsWith(e.type, 'Left') ^ this.flip) {
             this.hide();
           }
-        } }] };
-
-
+        }
+      }]
 
+    };
 
     // Chrome in responsive mode zooms page upon opening offcanvas
     function suppressUserScale() {
@@ -6589,14 +6627,14 @@
       props: {
         selContainer: String,
         selContent: String,
-        minHeight: Number },
-
+        minHeight: Number
+      },
 
       data: {
         selContainer: '.uk-modal',
         selContent: '.uk-modal-dialog',
-        minHeight: 150 },
-
+        minHeight: 150
+      },
 
       computed: {
         container(_ref, $el) {let { selContainer } = _ref;
@@ -6605,8 +6643,8 @@
 
         content(_ref2, $el) {let { selContent } = _ref2;
           return closest($el, selContent);
-        } },
-
+        }
+      },
 
       resizeTargets() {
         return [this.container, this.content];
@@ -6621,16 +6659,18 @@
           return {
             max: Math.max(
             this.minHeight,
-            height(this.container) - (dimensions(this.content).height - height(this.$el))) };
-
+            height(this.container) - (dimensions(this.content).height - height(this.$el)))
 
+          };
         },
 
         write(_ref3) {let { max } = _ref3;
           css(this.$el, { minHeight: this.minHeight, maxHeight: max });
         },
 
-        events: ['resize'] } };
+        events: ['resize']
+      }
+    };
 
     var responsive = {
       mixins: [Resize],
@@ -6658,23 +6698,25 @@
           Dimensions.contain(
           {
             height: this.height,
-            width: this.width },
-
+            width: this.width
+          },
           dim).
           height);
 
         },
 
-        events: ['resize'] } };
+        events: ['resize']
+      }
+    };
 
     var scroll = {
       props: {
-        offset: Number },
-
+        offset: Number
+      },
 
       data: {
-        offset: 0 },
-
+        offset: 0
+      },
 
       connected() {
         registerClick(this);
@@ -6692,9 +6734,9 @@
             await scrollIntoView(el, { offset: this.offset });
             trigger(this.$el, 'scrolled', [this, el]);
           }
-        } } };
-
-
+        }
+      }
+    };
 
     const components$1 = new Set();
     function registerClick(cmp) {
@@ -6742,8 +6784,8 @@
         offsetTop: Number,
         offsetLeft: Number,
         repeat: Boolean,
-        delay: Number },
-
+        delay: Number
+      },
 
       data: () => ({
         cls: '',
@@ -6753,8 +6795,8 @@
         offsetLeft: 0,
         repeat: false,
         delay: 0,
-        inViewClass: 'uk-scrollspy-inview' }),
-
+        inViewClass: 'uk-scrollspy-inview'
+      }),
 
       computed: {
         elements: {
@@ -6773,9 +6815,9 @@
             }
           },
 
-          immediate: true } },
-
-
+          immediate: true
+        }
+      },
 
       connected() {
         this._data.elements = new Map();
@@ -6787,8 +6829,8 @@
           for (const { target: el, isIntersecting } of records) {
             if (!elements.has(el)) {
               elements.set(el, {
-                cls: data(el, 'uk-scrollspy-class') || this.cls });
-
+                cls: data(el, 'uk-scrollspy-class') || this.cls
+              });
             }
 
             const state = elements.get(el);
@@ -6803,9 +6845,9 @@
         },
         {
           rootMargin: toPx(this.offsetTop, 'height') - 1 + "px " + (
-          toPx(this.offsetLeft, 'width') - 1) + "px" },
-
+          toPx(this.offsetLeft, 'width') - 1) + "px"
 
+        },
         false));
 
 
@@ -6837,8 +6879,8 @@
               this.toggle(el, false);
             }
           }
-        } }],
-
+        }
+      }],
 
 
       methods: {
@@ -6871,7 +6913,9 @@
 
           // change to `visibility: hidden` does not trigger observers
           this.$update(el);
-        } } };
+        }
+      }
+    };
 
     var scrollspyNav = {
       mixins: [Scroll],
@@ -6881,16 +6925,16 @@
         closest: String,
         scroll: Boolean,
         overflow: Boolean,
-        offset: Number },
-
+        offset: Number
+      },
 
       data: {
         cls: 'uk-active',
         closest: false,
         scroll: false,
         overflow: true,
-        offset: 0 },
-
+        offset: 0
+      },
 
       computed: {
         links: {
@@ -6904,13 +6948,13 @@
             }
           },
 
-          immediate: true },
-
+          immediate: true
+        },
 
         elements(_ref) {let { closest: selector } = _ref;
           return closest(this.links, selector || '*');
-        } },
-
+        }
+      },
 
       update: [
       {
@@ -6960,7 +7004,10 @@
           }
         },
 
-        events: ['scroll', 'resize'] }] };
+        events: ['scroll', 'resize']
+      }]
+
+    };
 
     var sticky = {
       mixins: [Class, Media, Resize, Scroll],
@@ -6980,8 +7027,8 @@
         clsBelow: String,
         selTarget: String,
         showOnUp: Boolean,
-        targetOffset: Number },
-
+        targetOffset: Number
+      },
 
       data: {
         position: 'top',
@@ -6998,14 +7045,14 @@
         clsBelow: 'uk-sticky-below',
         selTarget: '',
         showOnUp: false,
-        targetOffset: false },
-
+        targetOffset: false
+      },
 
       computed: {
         selTarget(_ref, $el) {let { selTarget } = _ref;
           return selTarget && $(selTarget, $el) || $el;
-        } },
-
+        }
+      },
 
       resizeTargets() {
         return document.documentElement;
@@ -7042,8 +7089,8 @@
 
         handler() {
           this.$emit('resize');
-        } },
-
+        }
+      },
       {
         name: 'load hashchange popstate',
 
@@ -7074,13 +7121,13 @@
               toPx(this.offset, 'height', this.placeholder);
             }
           });
-        } }],
-
+        }
+      }],
 
 
       update: [
       {
-        read(_ref2, types) {let { height: height$1, margin } = _ref2;
+        read(_ref2, types) {let { height: height$1, width, margin } = _ref2;
           this.inactive = !this.matchMedia || !isVisible(this.$el);
 
           if (this.inactive) {
@@ -7094,7 +7141,7 @@
           }
 
           if (!this.active) {
-            height$1 = offset(this.$el).height;
+            ({ height: height$1, width } = offset(this.$el));
             margin = css(this.$el, 'margin');
           }
 
@@ -7103,7 +7150,6 @@
             requestAnimationFrame(() => css(this.selTarget, 'transition', ''));
           }
 
-          const referenceElement = this.isFixed ? this.placeholder : this.$el;
           const windowHeight = height(window);
 
           let position = this.position;
@@ -7111,6 +7157,7 @@
             position = position === 'top' ? 'bottom' : 'top';
           }
 
+          const referenceElement = this.isFixed ? this.placeholder : this.$el;
           let offset$1 = toPx(this.offset, 'height', referenceElement);
           if (position === 'bottom' && (height$1 < windowHeight || this.overflowFlip)) {
             offset$1 += windowHeight - height$1;
@@ -7140,16 +7187,16 @@
             overflow,
             topOffset,
             height: height$1,
+            width,
             margin,
-            width: dimensions(referenceElement).width,
-            top: offsetPosition(referenceElement)[0] };
-
+            top: offsetPosition(referenceElement)[0]
+          };
         },
 
-        write(_ref3) {let { height, margin } = _ref3;
+        write(_ref3) {let { height, width, margin } = _ref3;
           const { placeholder } = this;
 
-          css(placeholder, { height, margin });
+          css(placeholder, { height, width, margin });
 
           if (!within(placeholder, document)) {
             after(this.$el, placeholder);
@@ -7157,8 +7204,8 @@
           }
         },
 
-        events: ['resize'] },
-
+        events: ['resize']
+      },
 
       {
         read(_ref4)
@@ -7183,9 +7230,9 @@
             overflowScroll: clamp(
             overflowScroll + clamp(scroll, start, end) - clamp(prevScroll, start, end),
             0,
-            overflow) };
-
+            overflow)
 
+          };
         },
 
         write(data, types) {
@@ -7199,8 +7246,8 @@
             top,
             start,
             topOffset,
-            height } =
-          data;
+            height
+          } = data;
 
           if (
           scroll < 0 ||
@@ -7261,8 +7308,8 @@
           }
         },
 
-        events: ['resize', 'scroll'] }],
-
+        events: ['resize', 'scroll']
+      }],
 
 
       methods: {
@@ -7290,8 +7337,8 @@
             offset,
             topOffset,
             height,
-            offsetParentTop } =
-          this._data;
+            offsetParentTop
+          } = this._data;
           const active = start !== 0 || scroll > start;
           let position = 'fixed';
 
@@ -7307,8 +7354,8 @@
           css(this.$el, {
             position,
             top: offset + "px",
-            width });
-
+            width
+          });
 
           this.setActive(active);
           toggleClass(this.$el, this.clsBelow, scroll > topOffset + height);
@@ -7325,9 +7372,9 @@
             replaceClass(this.selTarget, this.clsActive, this.clsInactive);
             prev !== active && trigger(this.$el, 'inactive');
           }
-        } } };
-
-
+        }
+      }
+    };
 
     function parseProp(value, el, propOffset, padding) {
       if (!value) {
@@ -7365,8 +7412,8 @@
         connect: String,
         toggle: String,
         itemNav: String,
-        active: Number },
-
+        active: Number
+      },
 
       data: {
         connect: '~.uk-switcher',
@@ -7374,8 +7421,8 @@
         itemNav: false,
         active: 0,
         cls: 'uk-active',
-        attrItem: 'uk-switcher-item' },
-
+        attrItem: 'uk-switcher-item'
+      },
 
       computed: {
         connects: {
@@ -7390,8 +7437,8 @@
           },
 
           document: true,
-          immediate: true },
-
+          immediate: true
+        },
 
         connectChildren: {
           get() {
@@ -7406,8 +7453,8 @@
             }
           },
 
-          immediate: true },
-
+          immediate: true
+        },
 
         toggles: {
           get(_ref2, $el) {let { toggle } = _ref2;
@@ -7421,8 +7468,8 @@
             this.show(~active ? active : toggles[this.active] || toggles[0]);
           },
 
-          immediate: true },
-
+          immediate: true
+        },
 
         children() {
           return children(this.$el).filter((child) =>
@@ -7432,8 +7479,8 @@
 
         swipeTarget() {
           return this.connects;
-        } },
-
+        }
+      },
 
       events: [
       {
@@ -7446,8 +7493,8 @@
         handler(e) {
           e.preventDefault();
           this.show(e.current);
-        } },
-
+        }
+      },
 
       {
         name: 'click',
@@ -7463,8 +7510,8 @@
         handler(e) {
           e.preventDefault();
           this.show(data(e.current, this.attrItem));
-        } },
-
+        }
+      },
 
       {
         name: 'swipeRight swipeLeft',
@@ -7479,8 +7526,8 @@
 
         handler(_ref3) {let { type } = _ref3;
           this.show(endsWith(type, 'Left') ? 'next' : 'previous');
-        } }],
-
+        }
+      }],
 
 
       methods: {
@@ -7506,7 +7553,9 @@
 
             await this.toggleElement(children[active], true, animate);
           });
-        } } };
+        }
+      }
+    };
 
     var tab = {
       mixins: [Class],
@@ -7514,13 +7563,13 @@
       extends: Switcher,
 
       props: {
-        media: Boolean },
-
+        media: Boolean
+      },
 
       data: {
         media: 960,
-        attrItem: 'uk-tab-item' },
-
+        attrItem: 'uk-tab-item'
+      },
 
       connected() {
         const cls = hasClass(this.$el, 'uk-tab-left') ?
@@ -7532,7 +7581,8 @@
         if (cls) {
           this.$create('toggle', this.$el, { cls, mode: 'media', media: this.media });
         }
-      } };
+      }
+    };
 
     const KEY_SPACE = 32;
 
@@ -7545,15 +7595,15 @@
         href: String,
         target: null,
         mode: 'list',
-        queued: Boolean },
-
+        queued: Boolean
+      },
 
       data: {
         href: false,
         target: false,
         mode: 'click',
-        queued: true },
-
+        queued: true
+      },
 
       computed: {
         target: {
@@ -7568,9 +7618,9 @@
           },
 
           document: true,
-          immediate: true } },
-
-
+          immediate: true
+        }
+      },
 
       connected() {
         if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
@@ -7608,8 +7658,8 @@
           if (includes(this.mode, 'click')) {
             this._preventClick = true;
           }
-        } },
-
+        }
+      },
 
       {
         name: pointerEnter + " " + pointerLeave + " focus blur",
@@ -7647,8 +7697,8 @@
           this._showState = show ? expanded : null;
 
           this.toggle("toggle" + (show ? 'show' : 'hide'));
-        } },
-
+        }
+      },
 
       {
         name: 'keydown',
@@ -7662,8 +7712,8 @@
             e.preventDefault();
             this.$el.click();
           }
-        } },
-
+        }
+      },
 
       {
         name: 'click',
@@ -7687,8 +7737,8 @@
           if (!this._preventClick && includes(this.mode, 'click')) {
             this.toggle();
           }
-        } },
-
+        }
+      },
 
       {
         name: 'hide show',
@@ -7701,8 +7751,8 @@
 
         handler(_ref2) {let { target, type } = _ref2;
           this.updateAria(target === this.target[0] && type === 'show');
-        } },
-
+        }
+      },
 
       {
         name: 'mediachange',
@@ -7719,8 +7769,8 @@
           if (mediaObj.matches ^ this.isToggled(this.target)) {
             this.toggle();
           }
-        } }],
-
+        }
+      }],
 
 
       methods: {
@@ -7761,7 +7811,9 @@
           'aria-expanded',
           isBoolean(toggled) ? toggled : this.isToggled(this.target));
 
-        } } };
+        }
+      }
+    };
 
     var components = /*#__PURE__*/Object.freeze({
         __proto__: null,