npm - uikit - Versions diffs - 3.14.4-dev.fea9fd466 → 3.15.1-dev.022704dc6 - Mend

uikit 3.14.4-dev.fea9fd466 → 3.15.1-dev.022704dc6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/CHANGELOG.md +32 -18
package/build/util.js +1 -0
package/dist/css/uikit-core-rtl.css +284 -63
package/dist/css/uikit-core-rtl.min.css +1 -1
package/dist/css/uikit-core.css +284 -63
package/dist/css/uikit-core.min.css +1 -1
package/dist/css/uikit-rtl.css +306 -92
package/dist/css/uikit-rtl.min.css +1 -1
package/dist/css/uikit.css +306 -92
package/dist/css/uikit.min.css +1 -1
package/dist/js/components/countdown.js +1 -1
package/dist/js/components/countdown.min.js +1 -1
package/dist/js/components/filter.js +1 -1
package/dist/js/components/filter.min.js +1 -1
package/dist/js/components/lightbox-panel.js +98 -131
package/dist/js/components/lightbox-panel.min.js +1 -1
package/dist/js/components/lightbox.js +98 -131
package/dist/js/components/lightbox.min.js +1 -1
package/dist/js/components/notification.js +4 -2
package/dist/js/components/notification.min.js +1 -1
package/dist/js/components/parallax.js +1 -1
package/dist/js/components/parallax.min.js +1 -1
package/dist/js/components/slider-parallax.js +1 -1
package/dist/js/components/slider-parallax.min.js +1 -1
package/dist/js/components/slider.js +9 -2
package/dist/js/components/slider.min.js +1 -1
package/dist/js/components/slideshow-parallax.js +1 -1
package/dist/js/components/slideshow-parallax.min.js +1 -1
package/dist/js/components/slideshow.js +9 -2
package/dist/js/components/slideshow.min.js +1 -1
package/dist/js/components/sortable.js +1 -1
package/dist/js/components/sortable.min.js +1 -1
package/dist/js/components/tooltip.js +101 -136
package/dist/js/components/tooltip.min.js +1 -1
package/dist/js/components/upload.js +1 -1
package/dist/js/components/upload.min.js +1 -1
package/dist/js/uikit-core.js +531 -486
package/dist/js/uikit-core.min.js +17 -1
package/dist/js/uikit-icons.js +1 -1
package/dist/js/uikit-icons.min.js +1 -1
package/dist/js/uikit.js +534 -487
package/dist/js/uikit.min.js +17 -1
package/package.json +11 -11
package/src/images/components/navbar-toggle-icon.svg +25 -3
package/src/js/api/hooks.js +5 -1
package/src/js/api/state.js +2 -2
package/src/js/components/notification.js +3 -1
package/src/js/core/accordion.js +9 -17
package/src/js/core/alert.js +35 -14
package/src/js/core/drop.js +110 -82
package/src/js/core/navbar.js +33 -49
package/src/js/core/offcanvas.js +8 -4
package/src/js/core/scroll.js +37 -10
package/src/js/core/switcher.js +4 -5
package/src/js/core/toggle.js +4 -7
package/src/js/mixin/lazyload.js +8 -1
package/src/js/mixin/modal.js +15 -12
package/src/js/mixin/position.js +21 -22
package/src/js/mixin/style.js +11 -0
package/src/js/mixin/togglable.js +90 -124
package/src/js/util/animation.js +9 -7
package/src/js/util/class.js +3 -1
package/src/js/util/filter.js +3 -7
package/src/js/util/position.js +136 -130
package/src/js/util/viewport.js +1 -1
package/src/less/components/_import.less +1 -0
package/src/less/components/drop.less +1 -18
package/src/less/components/dropbar.less +126 -0
package/src/less/components/dropdown.less +6 -20
package/src/less/components/nav.less +214 -23
package/src/less/components/navbar.less +26 -54
package/src/less/theme/_import.less +1 -0
package/src/less/theme/dropbar.less +44 -0
package/src/less/theme/dropdown.less +0 -11
package/src/less/theme/nav.less +46 -0
package/src/less/theme/navbar.less +5 -36
package/src/scss/components/_import.scss +1 -0
package/src/scss/components/drop.scss +1 -18
package/src/scss/components/dropbar.scss +126 -0
package/src/scss/components/dropdown.scss +6 -20
package/src/scss/components/nav.scss +163 -22
package/src/scss/components/navbar.scss +26 -54
package/src/scss/mixins-theme.scss +81 -35
package/src/scss/mixins.scss +77 -3
package/src/scss/theme/_import.scss +1 -0
package/src/scss/theme/dropbar.scss +44 -0
package/src/scss/theme/dropdown.scss +0 -8
package/src/scss/theme/nav.scss +44 -0
package/src/scss/theme/navbar.scss +4 -8
package/src/scss/variables-theme.scss +58 -13
package/src/scss/variables.scss +46 -8
package/tests/accordion.html +2 -2
package/tests/alert.html +2 -2
package/tests/countdown.html +1 -1
package/tests/drop.html +446 -416
package/tests/dropbar.html +458 -0
package/tests/dropdown.html +8 -470
package/tests/filter.html +9 -12
package/tests/flex.html +36 -36
package/tests/form.html +1 -1
package/tests/grid.html +22 -22
package/tests/height.html +6 -6
package/tests/index.html +127 -108
package/tests/js/index.js +1 -4
package/tests/lightbox.html +5 -5
package/tests/list.html +8 -8
package/tests/modal.html +15 -15
package/tests/nav.html +121 -12
package/tests/navbar.html +111 -220
package/tests/offcanvas.html +10 -14
package/tests/pagination.html +6 -6
package/tests/parallax.html +1 -1
package/tests/position.html +18 -16
package/tests/progress.html +9 -9
package/tests/scroll.html +7 -10
package/tests/search.html +6 -6
package/tests/slider.html +6 -5
package/tests/slideshow.html +8 -8
package/tests/sortable.html +6 -8
package/tests/sticky-navbar.html +15 -15
package/tests/sticky.html +8 -8
package/tests/switcher.html +1 -1
package/tests/tab.html +1 -1
package/tests/table.html +7 -7
package/tests/toggle.html +2 -2
package/tests/tooltip.html +1 -1
package/tests/upload.html +11 -11
package/tests/utility.html +16 -16

package/dist/js/uikit.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.4-dev.fea9fd466 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.15.1-dev.022704dc6 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -383,12 +383,8 @@
     }
     function closest(element, selector) {
-      if (startsWith(selector, '>')) {
-        selector = selector.slice(1);
-      }
       return isElement(element) ?
-      element.closest(selector) :
+      element.closest(startsWith(selector, '>') ? selector.slice(1) : selector) :
       toNodes(element).
       map((element) => closest(element, selector)).
       filter(Boolean);
@@ -396,8 +392,8 @@
     function within(element, selector) {
       return isString(selector) ?
-      matches(element, selector) || !!closest(element, selector) :
-      element === selector || toNode(selector).contains(toNode(element));
+      !!closest(element, selector) :
+      toNode(selector).contains(toNode(element));
     }
     function parents(element, selector) {
@@ -818,7 +814,9 @@
     }
     function removeClasses(element, cls) {
-      attr(element, 'class', (value) => (value || '').replace(new RegExp("\\b" + cls + "\\b", 'g'), ''));
+      attr(element, 'class', (value) =>
+      (value || '').replace(new RegExp("\\b" + cls + "\\b\\s?", 'g'), ''));
     }
     function replaceClass(element) {
@@ -903,13 +901,14 @@
     const Transition = {
       start: transition,
-      stop(element) {
+      async stop(element) {
         trigger(element, 'transitionend');
-        return Promise.resolve();
+        await Promise.resolve();
       },
-      cancel(element) {
+      async cancel(element) {
         trigger(element, 'transitioncanceled');
+        await Promise.resolve();
       },
       inProgress(element) {
@@ -919,7 +918,7 @@
     const animationPrefix = 'uk-animation-';
-    function animate$1(element, animation, duration, origin, out) {if (duration === void 0) {duration = 200;}
+    function animate$2(element, animation, duration, origin, out) {if (duration === void 0) {duration = 200;}
       return Promise.all(
       toNodes(element).map(
       (element) =>
@@ -953,16 +952,17 @@
     }
-    const inProgress = new RegExp(animationPrefix + "(enter|leave)");
+    const inProgressRe = new RegExp(animationPrefix + "(enter|leave)");
     const Animation = {
-      in: animate$1,
+      in: animate$2,
       out(element, animation, duration, origin) {
-        return animate$1(element, animation, duration, origin, true);
+        return animate$2(element, animation, duration, origin, true);
       },
       inProgress(element) {
-        return inProgress.test(attr(element, 'class'));
+        return inProgressRe.test(attr(element, 'class'));
       },
       cancel(element) {
@@ -1911,7 +1911,7 @@
           // iOS 12 returns <body> as scrollingElement
           viewportElement = documentElement;
         } else {
-          rect[start] += toFloat(css(viewportElement, "border" + ucfirst(start) + "Width"));
+          rect[start] += toFloat(css(viewportElement, "border-" + start + "-width"));
         }
         rect[prop] = rect[dir] = viewportElement["client" + ucfirst(prop)];
         rect[end] = rect[prop] + rect[start];
@@ -1936,127 +1936,47 @@
           ...options.attach },
         offset: [0, 0],
+        placement: [],
         ...options };
-      const dim = options.flip ?
-      attachToWithFlip(element, target, options) :
-      attachTo(element, target, options);
-      offset(element, dim);
-    }
-    function attachTo(element, target, options) {
-      let { attach, offset: offsetBy } = {
-        attach: {
-          element: ['left', 'top'],
-          target: ['left', 'top'],
-          ...options.attach },
-        offset: [0, 0],
-        ...options };
-      const position = offset(element);
-      const targetOffset = offset(target);
-      for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
-        position[start] = position[dir] =
-        targetOffset[start] +
-        moveBy(attach.target[i], end, targetOffset[prop]) -
-        moveBy(attach.element[i], end, position[prop]) +
-        +offsetBy[i];
-        position[end] = position[start] + position[prop];
+      if (!isArray(target)) {
+        target = [target, target];
       }
-      return position;
-    }
-    function moveBy(start, end, dim) {
-      return start === 'center' ? dim / 2 : start === end ? dim : 0;
+      offset(element, getPosition(element, target, options));
     }
-    function attachToWithFlip(element, target, options) {
+    function getPosition(element, target, options) {
       const position = attachTo(element, target, options);
-      const targetDim = offset(target);
-      let {
-        flip,
-        attach: { element: elAttach, target: targetAttach },
-        offset: elOffset,
-        boundary,
-        viewport,
-        viewportOffset } =
-      options;
-      let viewports = scrollParents(element);
-      if (boundary === target) {
-        viewports = viewports.filter((viewport) => viewport !== boundary);
-      }
-      const [scrollElement] = viewports;
-      viewports.push(viewport);
-      const offsetPosition = { ...position };
-      for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
-        if (flip !== true && !includes(flip, dir)) {
-          continue;
-        }
-        const willFlip =
-        !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
-        viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
-        if (viewportOffset) {
-          viewport[start] += viewportOffset;
-          viewport[end] -= viewportOffset;
-        }
+      const { boundary, viewportOffset = 0, placement } = options;
-        if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
-          viewport = getIntersectionArea(viewport, offset(boundary));
-        }
-        const isInStartBoundary = position[start] >= viewport[start];
-        const isInEndBoundary = position[end] <= viewport[end];
+      let offsetPosition = position;
+      for (const [i, [prop,, start, end]] of Object.entries(dirs)) {
+        const viewport = getViewport$1(target[i], viewportOffset, boundary, i);
-        if (isInStartBoundary && isInEndBoundary) {
+        if (isWithin(position, viewport, i)) {
           continue;
         }
-        let offsetBy;
+        let offsetBy = 0;
         // Flip
-        if (willFlip) {
+        if (placement[i] === 'flip') {
+          const attach = options.attach.target[i];
           if (
-          elAttach[i] === end && isInStartBoundary ||
-          elAttach[i] === start && isInEndBoundary)
+          attach === end && position[end] <= viewport[end] ||
+          attach === start && position[start] >= viewport[start])
           {
             continue;
           }
-          offsetBy =
-          (elAttach[i] === start ?
-          -position[prop] :
-          elAttach[i] === end ?
-          position[prop] :
-          0) + (
-          targetAttach[i] === start ?
-          targetDim[prop] :
-          targetAttach[i] === end ?
-          -targetDim[prop] :
-          0) -
-          elOffset[i] * 2;
+          offsetBy = flip(element, target, options, i)[start] - position[start];
-          if (
-          !isInScrollArea(
-          {
-            ...position,
-            [start]: position[start] + offsetBy,
-            [end]: position[end] + offsetBy },
+          const scrollArea = getScrollArea(target[i], viewportOffset, i);
-          scrollElement,
-          i))
-          {
-            if (isInScrollArea(position, scrollElement, i)) {
+          if (!isWithin(applyOffset(position, offsetBy, i), scrollArea, i)) {
+            if (isWithin(position, scrollArea, i)) {
               continue;
             }
@@ -2064,27 +1984,19 @@
               return false;
             }
-            if (flip === true || includes(flip, dirs[1 - i][1])) {
-              const newPos = attachToWithFlip(element, target, {
-                ...options,
-                attach: {
-                  element: elAttach.map(flipDir).reverse(),
-                  target: targetAttach.map(flipDir).reverse() },
-                offset: elOffset.reverse(),
-                flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
-                recursion: true });
+            const newPos = flipAxis(element, target, options);
-              if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
-                return newPos;
-              }
+            if (newPos && isWithin(newPos, scrollArea, 1 - i)) {
+              return newPos;
             }
             continue;
           }
-          // Move
-        } else {
+          // Shift
+        } else if (placement[i] === 'shift') {
+          const targetDim = offset(target[i]);
+          const { offset: elOffset } = options;
           offsetBy =
           clamp(
           clamp(position[start], viewport[start], viewport[end] - position[prop]),
@@ -2093,13 +2005,78 @@
           position[start];
         }
-        offsetPosition[start] = position[dir] = position[start] + offsetBy;
-        offsetPosition[end] += offsetBy;
+        offsetPosition = applyOffset(offsetPosition, offsetBy, i);
       }
       return offsetPosition;
     }
+    function attachTo(element, target, options) {
+      let { attach, offset: offsetBy } = {
+        attach: {
+          element: ['left', 'top'],
+          target: ['left', 'top'],
+          ...options.attach },
+        offset: [0, 0],
+        ...options };
+      let elOffset = offset(element);
+      for (const [i, [prop,, start, end]] of Object.entries(dirs)) {
+        const targetOffset =
+        attach.target[i] === attach.element[i] ? offsetViewport(target[i]) : offset(target[i]);
+        elOffset = applyOffset(
+        elOffset,
+        targetOffset[start] -
+        elOffset[start] +
+        moveBy(attach.target[i], end, targetOffset[prop]) -
+        moveBy(attach.element[i], end, elOffset[prop]) +
+        +offsetBy[i],
+        i);
+      }
+      return elOffset;
+    }
+    function applyOffset(position, offset, i) {
+      const [, dir, start, end] = dirs[i];
+      const newPos = { ...position };
+      newPos[start] = position[dir] = position[start] + offset;
+      newPos[end] += offset;
+      return newPos;
+    }
+    function moveBy(attach, end, dim) {
+      return attach === 'center' ? dim / 2 : attach === end ? dim : 0;
+    }
+    function getViewport$1(element, viewportOffset, boundary, i) {
+      let viewport = getIntersectionArea(...scrollParents(element).map(offsetViewport));
+      if (viewportOffset) {
+        viewport[dirs[i][2]] += viewportOffset;
+        viewport[dirs[i][3]] -= viewportOffset;
+      }
+      if (boundary) {
+        viewport = getIntersectionArea(viewport, offset(boundary));
+      }
+      return viewport;
+    }
+    function getScrollArea(element, viewportOffset, i) {
+      const [prop,, start, end] = dirs[i];
+      const [scrollElement] = scrollParents(element);
+      const viewport = offsetViewport(scrollElement);
+      viewport[start] -= scrollElement["scroll" + ucfirst(start)] - viewportOffset;
+      viewport[end] = viewport[start] + scrollElement["scroll" + ucfirst(prop)] - viewportOffset;
+      return viewport;
+    }
     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) {
@@ -2111,21 +2088,44 @@
       return area;
     }
-    function isInScrollArea(position, scrollElement, dir) {
-      const viewport = offsetViewport(scrollElement);
-      const [prop,, start, end] = dirs[dir];
-      viewport[start] -= scrollElement["scroll" + ucfirst(start)];
-      viewport[end] = viewport[start] + scrollElement["scroll" + ucfirst(prop)];
+    function isWithin(positionA, positionB, i) {
+      const [,, start, end] = dirs[i];
+      return positionA[start] >= positionB[start] && positionA[end] <= positionB[end];
+    }
+    function flip(element, target, _ref, i) {let { offset, attach } = _ref;
+      return attachTo(element, target, {
+        attach: {
+          element: flipAttach(attach.element, i),
+          target: flipAttach(attach.target, i) },
+        offset: flipOffset(offset, i) });
+    }
+    function flipAxis(element, target, options) {
+      return getPosition(element, target, {
+        ...options,
+        attach: {
+          element: options.attach.element.map(flipAttachAxis).reverse(),
+          target: options.attach.target.map(flipAttachAxis).reverse() },
+        offset: options.offset.reverse(),
+        placement: options.placement.reverse(),
+        recursion: true });
-      return position[start] >= viewport[start] && position[end] <= viewport[end];
     }
-    function intersectLine(dimA, dimB, dir) {
-      const [,, start, end] = dirs[dir];
-      return dimA[end] > dimB[start] && dimB[end] > dimA[start];
+    function flipAttach(attach, i) {
+      const newAttach = [...attach];
+      const index = dirs[i].indexOf(attach[i]);
+      if (~index) {
+        newAttach[i] = dirs[i][1 - index % 2 + 2];
+      }
+      return newAttach;
     }
-    function flipDir(prop) {
+    function flipAttachAxis(prop) {
       for (let i = 0; i < dirs.length; i++) {
         const index = dirs[i].indexOf(prop);
         if (~index) {
@@ -2134,13 +2134,17 @@
       }
     }
+    function flipOffset(offset, i) {
+      offset = [...offset];
+      offset[i] *= -1;
+      return offset;
+    }
     var util = /*#__PURE__*/Object.freeze({
         __proto__: null,
         ajax: ajax,
         getImage: getImage,
-        transition: transition,
         Transition: Transition,
-        animate: animate$1,
         Animation: Animation,
         attr: attr,
         hasAttr: hasAttr,
@@ -2445,7 +2449,11 @@
           }
           if (write && result !== false) {
-            fastdom.write(() => write.call(this, this._data, types));
+            fastdom.write(() => {
+              if (this._connected) {
+                write.call(this, this._data, types);
+              }
+            });
           }
         }
       }
@@ -2594,7 +2602,7 @@
         value = props[key] === Boolean && value === '' ? true : coerce$1(props[key], value);
-        if (prop === 'target' && (!value || startsWith(value, '_'))) {
+        if (prop === 'target' && startsWith(value, '_')) {
           continue;
         }
@@ -2605,7 +2613,7 @@
       for (const key in options) {
         const prop = camelize(key);
-        if (props[prop] !== undefined) {
+        if (!isUndefined(props[prop])) {
           data$1[prop] = coerce$1(props[prop], options[key]);
         }
       }
@@ -2934,7 +2942,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.14.4-dev.fea9fd466';
+    UIkit.version = '3.15.1-dev.022704dc6';
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3005,13 +3013,20 @@
       } };
     var Lazyload = {
+      data: {
+        preload: 5 },
       methods: {
         lazyload(observeTargets, targets) {if (observeTargets === void 0) {observeTargets = this.$el;}if (targets === void 0) {targets = this.$el;}
           this.registerObserver(
           observeIntersection(observeTargets, (entries, observer) => {
             for (const el of toNodes(isFunction(targets) ? targets() : targets)) {
-              $$('[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+              $$('[loading="lazy"]', el).
+              slice(0, this.preload - 1).
+              forEach((el) => removeAttr(el, 'loading'));
             }
             for (const el of entries.
             filter((_ref) => {let { isIntersecting } = _ref;return isIntersecting;}).
             map((_ref2) => {let { target } = _ref2;return target;})) {
@@ -3039,27 +3054,7 @@
         origin: false,
         transition: 'ease',
         clsEnter: 'uk-togglabe-enter',
-        clsLeave: 'uk-togglabe-leave',
-        initProps: {
-          overflow: '',
-          maxHeight: '',
-          paddingTop: '',
-          paddingBottom: '',
-          marginTop: '',
-          marginBottom: '',
-          boxShadow: '' },
-        hideProps: {
-          overflow: 'hidden',
-          maxHeight: 0,
-          paddingTop: 0,
-          paddingBottom: 0,
-          marginTop: 0,
-          marginBottom: 0,
-          boxShadow: 'none' } },
+        clsLeave: 'uk-togglabe-leave' },
       computed: {
@@ -3068,7 +3063,7 @@
         },
         hasTransition(_ref2) {let { animation } = _ref2;
-          return startsWith(animation[0], 'slide');
+          return ['slide', 'reveal'].some((transition) => startsWith(animation[0], transition));
         } },
@@ -3161,122 +3156,107 @@
       };
     }
-    function toggleTransition(cmp) {
-      switch (cmp.animation[0]) {
-        case 'slide-left':
-          return slideHorizontal(cmp);
-        case 'slide-right':
-          return slideHorizontal(cmp, true);}
-      return slide$1(cmp);
-    }
-    function slide$1(_ref4)
+    function toggleTransition(cmp) {var _cmp$animation$;
+      const [mode = 'reveal', startProp = 'top'] = ((_cmp$animation$ = cmp.animation[0]) == null ? void 0 : _cmp$animation$.split('-')) || [];
+      const dirs = [
+      ['left', 'right'],
+      ['top', 'bottom']];
+      const dir = dirs[includes(dirs[0], startProp) ? 0 : 1];
+      const end = dir[1] === startProp;
+      const props = ['width', 'height'];
+      const dimProp = props[dirs.indexOf(dir)];
+      const marginProp = "margin-" + dir[0];
+      const marginStartProp = "margin-" + startProp;
+      return async (el, show) => {
+        let { duration, velocity, transition, _toggle } = cmp;
+        let currentDim = dimensions$1(el)[dimProp];
-    {let { isToggled, duration, velocity, initProps, hideProps, transition, _toggle } = _ref4;
-      return (el, show) => {
         const inProgress = Transition.inProgress(el);
-        const inner =
-        !inProgress && el.hasChildNodes() ?
-        toFloat(css(el.firstElementChild, 'marginTop')) +
-        toFloat(css(el.lastElementChild, 'marginBottom')) :
-        0;
-        const currentHeight = isVisible(el) ? toFloat(css(el, 'height')) + inner : 0;
-        const props = inProgress ? css(el, Object.keys(initProps)) : show ? hideProps : initProps;
+        await Transition.cancel(el);
-        Transition.cancel(el);
-        if (!isToggled(el)) {
+        if (show) {
           _toggle(el, true);
         }
-        css(el, 'maxHeight', '');
-        // Update child components first
-        fastdom.flush();
-        const endHeight = toFloat(css(el, 'height')) + inner;
-        duration = velocity * endHeight + duration;
-        css(el, { ...props, maxHeight: currentHeight });
-        return (
-        show ?
-        Transition.start(
-        el,
-        { ...initProps, overflow: 'hidden', maxHeight: endHeight },
-        duration * (1 - currentHeight / endHeight),
-        transition) :
-        Transition.start(
-        el,
-        hideProps,
-        duration * (currentHeight / endHeight),
-        transition).
-        then(() => _toggle(el, false))).
-        then(() => css(el, initProps));
-      };
-    }
-    function slideHorizontal(_ref5, right) {let { isToggled, duration, velocity, transition, _toggle } = _ref5;
-      return (el, show) => {
-        const visible = isVisible(el);
-        const marginLeft = toFloat(css(el, 'marginLeft'));
-        Transition.cancel(el);
-        const [scrollElement] = scrollParents(el.offsetParent);
-        css(scrollElement, 'overflowX', 'hidden');
-        if (!isToggled(el)) {
-          _toggle(el, true);
-        }
+        const prevProps = Object.fromEntries(
+        [
+        'padding',
+        'border',
+        'width',
+        'height',
+        'overflowY',
+        'overflowX',
+        marginProp,
+        marginStartProp].
+        map((key) => [key, el.style[key]]));
+        const dim = dimensions$1(el);
+        const currentMargin = toFloat(css(el, marginProp));
+        const marginStart = toFloat(css(el, marginStartProp));
+        const endDim = dim[dimProp] + marginStart;
+        if (!inProgress && !show) {
+          currentDim += marginStart;
+        }
+        const [wrapper] = wrapInner(el, '<div>');
+        css(wrapper, {
+          boxSizing: 'border-box',
+          height: dim.height,
+          width: dim.width,
+          ...css(el, [
+          'overflow',
+          'padding',
+          'borderTop',
+          'borderRight',
+          'borderBottom',
+          'borderLeft',
+          'borderImage',
+          marginStartProp]) });
-        const width = toFloat(css(el, 'width'));
-        duration = velocity * width + duration;
-        const percent = visible ? (width + marginLeft * (right ? -1 : 1)) / width * 100 : 0;
         css(el, {
-          clipPath: right ? "polygon(0 0," +
-          percent + "% 0," + percent + "% 100%,0 100%)" : "polygon(" + (
-          100 - percent) + "% 0,100% 0,100% 100%," + (100 - percent) + "% 100%)",
-          marginLeft: (100 - percent) * (right ? 1 : -1) / 100 * width });
+          padding: 0,
+          border: 0,
+          minWidth: 0,
+          minHeight: 0,
+          [marginStartProp]: 0,
+          width: dim.width,
+          height: dim.height,
+          overflow: 'hidden',
+          [dimProp]: currentDim });
-        return (
-        show ?
-        Transition.start(
-        el,
-        {
-          clipPath: "polygon(0 0,100% 0,100% 100%,0 100%)",
-          marginLeft: 0 },
+        const percent = currentDim / endDim;
+        duration = (velocity * endDim + duration) * (show ? 1 - percent : percent);
+        const endProps = { [dimProp]: show ? endDim : 0 };
-        duration * (1 - percent / 100),
-        transition) :
-        Transition.start(
-        el,
-        {
-          clipPath: right ? "polygon(0 0,0 0,0 100%,0 100%)" : "polygon(100% 0,100% 0,100% 100%,100% 100%)",
+        if (end) {
+          css(el, marginProp, endDim - currentDim + currentMargin);
+          endProps[marginProp] = show ? currentMargin : endDim + currentMargin;
+        }
+        if (!end ^ mode === 'reveal') {
+          css(wrapper, marginProp, -endDim + currentDim);
+          Transition.start(wrapper, { [marginProp]: show ? 0 : -endDim }, duration, transition);
+        }
-          marginLeft: (right ? 1 : -1) * width },
+        try {
+          await Transition.start(el, endProps, duration, transition);
+        } finally {
+          css(el, prevProps);
+          unwrap(wrapper.firstChild);
-        duration * (percent / 100),
-        transition).
-        then(() => _toggle(el, false))).
-        then(() => {
-          css(scrollElement, 'overflowX', '');
-          css(el, { clipPath: '', marginLeft: '' });
-        });
+          if (!show) {
+            _toggle(el, false);
+          }
+        }
       };
     }
@@ -3301,6 +3281,7 @@
       mixins: [Class, Lazyload, Togglable],
       props: {
+        animation: Boolean,
         targets: String,
         active: null,
         collapsible: Boolean,
@@ -3313,7 +3294,7 @@
       data: {
         targets: '> *',
         active: false,
-        animation: ['slide'],
+        animation: true,
         collapsible: true,
         multiple: false,
         clsOpen: 'uk-open',
@@ -3359,7 +3340,7 @@
               hide(
               el,
               !hasClass(
-              this.items.find((item) => item.contains(el)),
+              this.items.find((item) => within(el, item)),
               this.clsOpen));
@@ -3411,23 +3392,15 @@
               toggleClass(el, this.clsOpen, show);
               attr($(this.$props.toggle, el), 'aria-expanded', show);
-              const content = $("" + (el._wrapper ? '> * ' : '') + this.content, el);
+              const content = $(this.content, el);
-              if (animate === false || !this.hasTransition) {
+              if (animate === false || !this.animation) {
+                content.hidden = !show;
                 hide(content, !show);
                 return;
               }
-              if (!el._wrapper) {
-                el._wrapper = wrapAll(content, "<div" + (show ? ' hidden' : '') + ">");
-              }
-              hide(content, false);
-              await slide$1(this)(el._wrapper, show);
-              hide(content, !show);
-              delete el._wrapper;
-              unwrap(content);
+              await toggleTransition(this)(content, show);
               if (show) {
                 const toggle = $(this.$props.toggle, el);
@@ -3453,18 +3426,17 @@
       args: 'animation',
       props: {
+        animation: Boolean,
         close: String },
       data: {
-        animation: ['slide'],
+        animation: true,
         selClose: '.uk-alert-close',
-        duration: 150,
-        hideProps: { opacity: 0, ...Togglable.data.hideProps } },
+        duration: 150 },
-      events: [
-      {
+      events: {
         name: 'click',
         delegate() {
@@ -3474,16 +3446,39 @@
         handler(e) {
           e.preventDefault();
           this.close();
-        } }],
+        } },
       methods: {
         async close() {
-          await this.toggleElement(this.$el);
+          await this.toggleElement(this.$el, false, animate$1(this));
           this.$destroy(true);
         } } };
+    function animate$1(_ref) {let { duration, transition, velocity } = _ref;
+      return (el) => {
+        const height = toFloat(css(el, 'height'));
+        css(el, 'height', height);
+        return Transition.start(
+        el,
+        {
+          height: 0,
+          marginTop: 0,
+          marginBottom: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+          borderTop: 0,
+          borderBottom: 0,
+          opacity: 0 },
+        velocity * height + duration,
+        transition);
+      };
+    }
     var Video = {
       args: 'autoplay',
@@ -3632,13 +3627,17 @@
       props: {
         pos: String,
         offset: null,
-        flip: Boolean },
+        flip: Boolean,
+        shift: Boolean,
+        inset: Boolean },
       data: {
         pos: "bottom-" + (isRtl ? 'right' : 'left'),
+        offset: false,
         flip: true,
-        offset: false },
+        shift: true,
+        inset: false },
       connected() {
@@ -3650,17 +3649,19 @@
       methods: {
         positionAt(element, target, boundary) {
           let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
+          const placement = [this.flip && 'flip', this.shift && 'shift'];
           const attach = {
-            element: [flipPosition(this.dir), this.align],
+            element: [this.inset ? this.dir : flipPosition(this.dir), this.align],
             target: [this.dir, this.align] };
           if (this.axis === 'y') {
             for (const prop in attach) {
-              attach[prop] = attach[prop].reverse();
+              attach[prop].reverse();
             }
-            offset = offset.reverse();
+            offset.reverse();
+            placement.reverse();
           }
           const [scrollElement] = scrollParents(element, /auto|scroll/);
@@ -3670,21 +3671,13 @@
           const elDim = dimensions$1(element);
           css(element, { top: -elDim.height, left: -elDim.width });
-          const args = [
-          element,
-          target,
-          {
+          positionAt(element, target, {
             attach,
             offset,
             boundary,
-            flip: this.flip,
-            viewportOffset: this.getViewportOffset(element) }];
-          trigger(element, 'beforeposition', args);
+            placement,
+            viewportOffset: this.getViewportOffset(element) });
-          positionAt(...args);
           // Restore scroll position
           scrollElement.scrollTop = scrollTop;
@@ -3697,12 +3690,14 @@
             this.offset === false ? css(element, '--uk-position-offset') : this.offset,
             this.axis === 'x' ? 'width' : 'height',
             element) * (
-            includes(['left', 'top'], this.dir) ? -1 : 1));
+            includes(['left', 'top'], this.dir) ? -1 : 1) * (
+            this.inset ? -1 : 1));
         },
         getShiftOffset(element) {
-          return includes(['center', 'justify', 'stretch'], this.align) ?
+          return this.align === 'center' ?
           0 :
           toPx(
           css(element, '--uk-position-shift-offset'),
@@ -3715,6 +3710,15 @@
           return toPx(css(element, '--uk-position-viewport-offset'));
         } } };
+    var Style = {
+      beforeConnect() {
+        this._style = attr(this.$el, 'style');
+      },
+      disconnected() {
+        attr(this.$el, 'style', this._style);
+      } };
     const active$1 = [];
     var Modal = {
@@ -3824,8 +3828,8 @@
           if (this.overlay) {
-            once(this.$el, 'hide', preventOverscroll(this.$el));
-            once(this.$el, 'hide', preventBackgroundScroll());
+            once(this.$el, 'hidden', preventOverscroll(this.$el), { self: true });
+            once(this.$el, 'hidden', preventBackgroundScroll(), { self: true });
           }
           if (this.stack) {
@@ -3907,10 +3911,6 @@
             active$1.splice(active$1.indexOf(this), 1);
           }
-          if (!active$1.length) {
-            css(document.body, 'overflowY', '');
-          }
           css(this.$el, 'zIndex', '');
           if (!active$1.some((modal) => modal.clsPage === this.clsPage)) {
@@ -4027,16 +4027,22 @@
       return () => events.forEach((fn) => fn());
     }
+    let prevented;
     function preventBackgroundScroll() {
-      const { body, documentElement } = document;
-      css(body, {
-        overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
-        touchAction: 'none' });
+      if (prevented) {
+        return noop;
+      }
+      prevented = true;
+      const { scrollingElement } = document;
+      css(scrollingElement, {
+        overflowY: 'hidden',
+        touchAction: 'none',
+        paddingRight: width(window) - scrollingElement.clientWidth });
-      css(documentElement, 'overflowY', 'hidden');
       return () => {
-        css(documentElement, 'overflowY', '');
-        css(body, { overflowY: '', touchAction: '' });
+        prevented = false;
+        css(scrollingElement, { overflowY: '', touchAction: '', paddingRight: '' });
       };
     }
@@ -4053,7 +4059,7 @@
     let active;
     var drop = {
-      mixins: [Container, Lazyload, Position, Togglable],
+      mixins: [Container, Lazyload, Position, Style, Togglable],
       args: 'pos',
@@ -4061,10 +4067,13 @@
         mode: 'list',
         toggle: Boolean,
         boundary: Boolean,
-        boundaryAlign: Boolean,
+        target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
+        stretch: Boolean,
         delayShow: Number,
         delayHide: Number,
-        display: String,
+        autoUpdate: Boolean,
         clsDrop: String,
         animateOut: Boolean,
         bgScroll: Boolean },
@@ -4073,17 +4082,32 @@
       data: {
         mode: ['click', 'hover'],
         toggle: '- *',
-        boundary: true,
-        boundaryAlign: false,
+        boundary: false,
+        target: false,
+        targetX: false,
+        targetY: false,
+        stretch: false,
         delayShow: 0,
         delayHide: 800,
-        display: null,
+        autoUpdate: true,
         clsDrop: false,
+        animateOut: false,
+        bgScroll: true,
         animation: ['uk-animation-fade'],
         cls: 'uk-open',
-        container: false,
-        animateOut: false,
-        bgScroll: true },
+        container: false },
+      computed: {
+        target(_ref, $el) {let { target, targetX, targetY } = _ref;
+          targetX = targetX || target || this.targetEl;
+          targetY = targetY || target || this.targetEl;
+          return [
+          targetX === true ? window : query(targetX, $el),
+          targetY === true ? window : query(targetY, $el)];
+        } },
       created() {
@@ -4097,18 +4121,19 @@
       connected() {
         addClass(this.$el, this.clsDrop);
-        if (this.toggle && !this.target) {
-          this.target = this.$create('toggle', query(this.toggle, this.$el), {
+        if (this.toggle && !this.targetEl) {
+          this.targetEl = this.$create('toggle', query(this.toggle, this.$el), {
             target: this.$el,
             mode: this.mode }).
           $el;
-          attr(this.target, 'aria-haspopup', true);
-          this.lazyload(this.target);
+          attr(this.targetEl, 'aria-haspopup', true);
+          this.lazyload(this.targetEl);
         }
       },
       disconnected() {
         if (this.isActive()) {
+          this.hide(false);
           active = null;
         }
       },
@@ -4134,7 +4159,7 @@
           return 'a[href^="#"]';
         },
-        handler(_ref) {let { defaultPrevented, current: { hash } } = _ref;
+        handler(_ref2) {let { defaultPrevented, current: { hash } } = _ref2;
           if (!defaultPrevented && hash && !within(hash, this.$el)) {
             this.hide(false);
           }
@@ -4242,21 +4267,22 @@
           this.tracker.init();
-          for (const handler of [
+          const update = () => this.$emit();
+          const handlers = [
           on(
           document,
           pointerDown$1,
-          (_ref2) => {let { target } = _ref2;return (
+          (_ref3) => {let { target } = _ref3;return (
               !within(target, this.$el) &&
               once(
               document,
               pointerUp$1 + " " + pointerCancel + " scroll",
-              (_ref3) => {let { defaultPrevented, type, target: newTarget } = _ref3;
+              (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
                 if (
                 !defaultPrevented &&
                 type === pointerUp$1 &&
                 target === newTarget &&
-                !(this.target && within(target, this.target)))
+                !(this.targetEl && within(target, this.targetEl)))
                 {
                   this.hide(false);
                 }
@@ -4271,29 +4297,28 @@
             }
           }),
+          on(window, 'resize', update),
+          (() => {
+            const observer = observeResize(
+            scrollParents(this.$el).concat(this.targetEl),
+            update);
+            return () => observer.disconnect();
+          })(),
+          ...(this.autoUpdate ?
+          [on([document, scrollParents(this.$el)], 'scroll', update)] :
+          []),
           ...(this.bgScroll ?
           [] :
-          [preventOverscroll(this.$el), preventBackgroundScroll()]),
+          [preventOverscroll(this.$el), preventBackgroundScroll()])];
+          once(this.$el, 'hide', () => handlers.forEach((handler) => handler()), {
+            self: true });
-          ...(this.display === 'static' && this.align !== 'stretch' ?
-          [] :
-          (() => {
-            const handler = () => this.$emit();
-            return [
-            on(window, 'resize', handler),
-            on(document, 'scroll', handler, true),
-            (() => {
-              const observer = observeResize(
-              scrollParents(this.$el),
-              handler);
-              return () => observer.disconnect();
-            })()];
-          })())])
-          {
-            once(this.$el, 'hide', handler, { self: true });
-          }
         } },
@@ -4310,7 +4335,7 @@
       {
         name: 'hide',
-        handler(_ref4) {let { target } = _ref4;
+        handler(_ref5) {let { target } = _ref5;
           if (this.$el !== target) {
             active =
             active === null && within(target, this.$el) && this.isToggled() ?
@@ -4334,12 +4359,12 @@
       methods: {
-        show(target, delay) {if (target === void 0) {target = this.target;}if (delay === void 0) {delay = true;}
-          if (this.isToggled() && target && this.target && target !== this.target) {
+        show(target, delay) {if (target === void 0) {target = this.targetEl;}if (delay === void 0) {delay = true;}
+          if (this.isToggled() && target && this.targetEl && target !== this.targetEl) {
             this.hide(false, false);
           }
-          this.target = target;
+          this.targetEl = target;
           this.clearTimers();
@@ -4402,60 +4427,69 @@
         position() {
           removeClass(this.$el, this.clsDrop + "-stack");
-          toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
-          toggleClass(this.$el, this.clsDrop + "-stretch", this.align === 'stretch');
+          attr(this.$el, 'style', this._style);
-          const boundary = query(this.boundary, this.$el);
-          const target = boundary && this.boundaryAlign ? boundary : this.target;
-          const [scrollParent] = scrollParents(
-          boundary && this.boundaryAlign ? boundary : this.$el);
+          // Ensure none positioned element does not generate scrollbars
+          this.$el.hidden = true;
-          const scrollParentOffset = offset(scrollParent);
-          const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
+          const boundary = query(this.boundary, this.$el);
+          const boundaryOffset = offset(boundary || window);
+          const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
           const viewportOffset = this.getViewportOffset(this.$el);
-          css(this.$el, 'maxWidth', '');
-          const maxWidth = scrollParentOffset.width - 2 * viewportOffset;
+          const dirs = [
+          [0, ['x', 'width', 'left', 'right']],
+          [1, ['y', 'height', 'top', 'bottom']]];
-          if (this.align === 'justify') {
-            const prop = this.axis === 'y' ? 'width' : 'height';
-            css(
-            this.$el,
-            prop,
-            Math.min(
-            (boundary ? boundaryOffset : offset(this.target))[prop],
-            scrollParentOffset[prop] - 2 * viewportOffset));
-          } else if (this.align === 'stretch') {
-            this.flip = this.axis === 'y' ? 'x' : 'y';
-            this.display = 'static';
-            const viewport = offsetViewport(scrollParent);
-            const targetDim = offset(target);
-            const elOffset = Math.abs(this.getPositionOffset(this.$el)) + viewportOffset;
-            css(this.$el, {
-              width:
-              this.axis === 'y' ?
-              viewport.width :
-              (this.dir === 'left' ?
-              targetDim.left - viewport.left :
-              viewport.right - targetDim.right) - elOffset,
-              height:
-              this.axis === 'x' ?
-              viewport.height :
-              (this.dir === 'top' ?
-              targetDim.top - viewport.top :
-              viewport.bottom - targetDim.bottom) - elOffset });
-          } else if (this.$el.offsetWidth > maxWidth) {
+          for (const [i, [axis, prop]] of dirs) {
+            if (this.axis !== axis && includes([axis, true], this.stretch)) {
+              css(this.$el, {
+                [prop]: Math.min(
+                boundaryOffset[prop],
+                viewports[i][prop] - 2 * viewportOffset),
+                ["overflow-" + axis]: 'auto' });
+            }
+          }
+          const maxWidth = viewports[0].width - 2 * viewportOffset;
+          if (this.$el.offsetWidth > maxWidth) {
             addClass(this.$el, this.clsDrop + "-stack");
           }
           css(this.$el, 'maxWidth', maxWidth);
-          this.positionAt(this.$el, target, boundary);
+          this.$el.hidden = false;
+          this.positionAt(this.$el, this.target, boundary);
+          for (const [i, [axis, prop, start, end]] of dirs) {
+            if (this.axis === axis && includes([axis, true], this.stretch)) {
+              const positionOffset = Math.abs(this.getPositionOffset(this.$el));
+              const targetOffset = offset(this.target[i]);
+              const elOffset = offset(this.$el);
+              css(this.$el, {
+                [prop]:
+                (targetOffset[start] > elOffset[start] ?
+                targetOffset[start] -
+                Math.max(
+                boundaryOffset[start],
+                viewports[i][start] + viewportOffset) :
+                Math.min(
+                boundaryOffset[end],
+                viewports[i][end] - viewportOffset) -
+                targetOffset[end]) - positionOffset,
+                ["overflow-" + axis]: 'auto' });
+              this.positionAt(this.$el, this.target, boundary);
+            }
+          }
         } } };
@@ -5227,7 +5261,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\"><rect y=\"9\" width=\"20\" height=\"2\"/><rect y=\"3\" width=\"20\" height=\"2\"/><rect 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-'] {\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 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>";
@@ -5829,7 +5863,9 @@
         align: String,
         offset: Number,
         boundary: Boolean,
-        boundaryAlign: Boolean,
+        target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
         clsDrop: String,
         delayShow: Number,
         delayHide: Number,
@@ -5846,9 +5882,12 @@
         offset: undefined,
         delayShow: undefined,
         delayHide: undefined,
-        boundaryAlign: undefined,
-        flip: 'x',
+        flip: false,
+        shift: true,
         boundary: true,
+        target: false,
+        targetX: false,
+        targetY: false,
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
@@ -5861,7 +5900,7 @@
         },
         dropbarAnchor(_ref2, $el) {let { dropbarAnchor } = _ref2;
-          return query(dropbarAnchor, $el);
+          return query(dropbarAnchor, $el) || $el;
         },
         pos(_ref3) {let { align } = _ref3;
@@ -5883,7 +5922,7 @@
           },
           watch(dropbar) {
-            addClass(dropbar, 'uk-navbar-dropbar');
+            addClass(dropbar, 'uk-dropbar', 'uk-dropbar-top', 'uk-navbar-dropbar');
           },
           immediate: true },
@@ -5899,7 +5938,7 @@
             if (this.dropContainer !== $el) {
               for (const el of $$("." + clsDrop, this.dropContainer)) {var _this$getDropdown;
-                const target = (_this$getDropdown = this.getDropdown(el)) == null ? void 0 : _this$getDropdown.target;
+                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);
                 }
@@ -5961,8 +6000,8 @@
           if (
           active &&
           includes(active.mode, 'hover') &&
-          active.target &&
-          !within(active.target, current) &&
+          active.targetEl &&
+          !within(active.targetEl, current) &&
           !active.isDelaying)
           {
             active.hide(false);
@@ -5984,7 +6023,7 @@
           if (keyCode === keyMap.DOWN && hasAttr(current, 'aria-expanded')) {
             e.preventDefault();
-            if (!active || active.target !== current) {
+            if (!active || active.targetEl !== current) {
               current.click();
               once(this.dropContainer, 'show', (_ref8) => {let { target } = _ref8;return (
                   focusFirstFocusableElement(target));});
@@ -6034,8 +6073,8 @@
             }
           }
-          if (keyCode === keyMap.ESC) {var _active$target;
-            active == null ? void 0 : (_active$target = active.target) == null ? void 0 : _active$target.focus();
+          if (keyCode === keyMap.ESC) {var _active$targetEl;
+            active == null ? void 0 : (_active$targetEl = active.targetEl) == null ? void 0 : _active$targetEl.focus();
           }
           handleNavItemNavigation(e, this.toggles, active);
@@ -6082,8 +6121,8 @@
             return;
           }
-          if (!parent(this.dropbar)) {
-            after(this.dropbarAnchor || this.$el, this.dropbar);
+          if (this.dropbar.previousElementSibling !== this.dropbarAnchor) {
+            after(this.dropbarAnchor, this.dropbar);
           }
           addClass(target, this.clsDrop + "-dropbar");
@@ -6106,39 +6145,19 @@
             return;
           }
-          this._observer = observeResize(target, () =>
-          this.transitionTo(
-          offset(target).bottom -
-          offset(this.dropbar).top +
-          toFloat(css(target, 'marginBottom')),
-          target));
-        } },
+          this._observer = observeResize(target, () => {
+            const targetOffsets = parents(target, "." + this.clsDrop).
+            concat(target).
+            map((el) => offset(el));
+            const minTop = Math.min(...targetOffsets.map((_ref11) => {let { top } = _ref11;return top;}));
+            const maxBottom = Math.max(...targetOffsets.map((_ref12) => {let { bottom } = _ref12;return bottom;}));
+            const dropbarOffset = offset(this.dropbar);
+            css(this.dropbar, 'top', this.dropbar.offsetTop - (dropbarOffset.top - minTop));
+            this.transitionTo(
+            maxBottom - minTop + toFloat(css(target, 'marginBottom')),
+            target);
-      {
-        name: 'beforeposition',
-        el() {
-          return this.dropContainer;
-        },
-        filter() {
-          return this.dropbar;
-        },
-        handler(e, element, target, options) {
-          if (!this.isDropbarDrop(element)) {
-            return;
-          }
-          const dropbarOffset = offset(this.dropbar);
-          css(element, 'maxWidth', dropbarOffset.width - options.viewportOffset * 2);
-          options.offset[1] = dropbarOffset.top - offset(target).bottom;
-          options.viewportOffset += dropbarOffset.left;
+          });
         } },
@@ -6159,7 +6178,7 @@
           if (
           matches(this.dropbar, ':hover') &&
           (active == null ? void 0 : active.$el) === e.target &&
-          !this.toggles.some((el) => active.target !== el && matches(el, ':focus')))
+          !this.toggles.some((el) => active.targetEl !== el && matches(el, ':focus')))
           {
             e.preventDefault();
           }
@@ -6177,7 +6196,7 @@
           return this.dropbar;
         },
-        handler(_ref11) {let { target } = _ref11;
+        handler(_ref13) {let { target } = _ref13;
           if (!this.isDropbarDrop(target)) {
             return;
           }
@@ -6195,7 +6214,7 @@
       methods: {
         getActive() {
-          return active && within(active.target, this.$el) && active;
+          return includes(this.dropdowns, active == null ? void 0 : active.$el) && active;
         },
         transitionTo(newHeight, el) {
@@ -6228,15 +6247,14 @@
         },
         isDropbarDrop(el) {
-          const drop = this.getDropdown(el);
-          return drop && hasClass(el, this.clsDrop) && drop.align !== 'stretch';
+          return this.getDropdown(el) && hasClass(el, this.clsDrop);
         } } };
     function handleNavItemNavigation(e, toggles, active) {
       const { current, keyCode } = e;
-      const target = (active == null ? void 0 : active.target) || current;
+      const target = (active == null ? void 0 : active.targetEl) || current;
       const i = toggles.indexOf(target);
       // Left
@@ -6436,9 +6454,12 @@
             addClass(parent(this.panel), this.clsMode);
           }
-          addClass(document.body, this.clsContainer, this.clsFlip);
-          css(document.body, 'touch-action', 'pan-y pinch-zoom');
+          const { body, scrollingElement } = document;
+          addClass(body, this.clsContainer, this.clsFlip);
+          css(body, 'touch-action', 'pan-y pinch-zoom');
           css(this.$el, 'display', 'block');
+          css(this.panel, 'maxWidth', scrollingElement.clientWidth);
           addClass(this.$el, this.clsOverlay);
           addClass(
           this.panel,
@@ -6446,8 +6467,8 @@
           this.mode === 'reveal' ? '' : this.clsMode);
-          height(document.body); // force reflow
-          addClass(document.body, this.clsContainerAnimation);
+          height(body); // force reflow
+          addClass(body, this.clsContainerAnimation);
           this.clsContainerAnimation && suppressUserScale();
         } },
@@ -6479,6 +6500,7 @@
           removeClass(this.panel, this.clsSidebarAnimation, this.clsMode);
           removeClass(this.$el, this.clsOverlay);
           css(this.$el, 'display', '');
+          css(this.panel, 'maxWidth', '');
           removeClass(document.body, this.clsContainer, this.clsFlip);
         } },
@@ -6604,6 +6626,14 @@
         offset: 0 },
+      connected() {
+        registerClick(this);
+      },
+      disconnected() {
+        unregisterClick(this);
+      },
       methods: {
         async scrollTo(el) {
           el = el && $(el) || document.body;
@@ -6612,20 +6642,39 @@
             await scrollIntoView(el, { offset: this.offset });
             trigger(this.$el, 'scrolled', [this, el]);
           }
-        } },
+        } } };
-      events: {
-        click(e) {
-          if (e.defaultPrevented) {
-            return;
-          }
-          e.preventDefault();
-          this.scrollTo(getTargetElement(this.$el));
-        } } };
+    const components$2 = new Set();
+    function registerClick(cmp) {
+      if (!components$2.size) {
+        on(document, 'click', clickHandler);
+      }
+      components$2.add(cmp);
+    }
+    function unregisterClick(cmp) {
+      components$2.delete(cmp);
+      if (!components$2.length) {
+        off(document, 'click', clickHandler);
+      }
+    }
+    function clickHandler(e) {
+      if (e.defaultPrevented) {
+        return;
+      }
+      for (const component of components$2) {
+        if (within(e.target, component.$el)) {
+          e.preventDefault();
+          component.scrollTo(getTargetElement(component.$el));
+        }
+      }
+    }
     function getTargetElement(el) {
       return document.getElementById(decodeURIComponent(el.hash).substring(1));
@@ -7288,9 +7337,10 @@
             }
             const index = this.index();
-            this.connects.forEach((el) =>
-            children(el).forEach((child, i) => toggleClass(child, this.cls, i === index)));
+            this.connects.forEach((el) => {
+              children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
+              this.lazyload(this.$el, children(el));
+            });
           },
           immediate: true },
@@ -7323,8 +7373,6 @@
       connected() {
-        this.lazyload(this.$el, this.connects);
         // check for connects
         ready(() => this.$emit());
       },
@@ -7458,6 +7506,7 @@
           watch() {
             this.updateAria();
+            this.lazyload(this.$el, this.target);
           },
           immediate: true } },
@@ -7469,8 +7518,6 @@
           attr(this.$el, 'tabindex', '0');
         }
-        this.lazyload(this.$el, this.target);
         // check for target
         ready(() => this.$emit());
       },
@@ -7588,7 +7635,7 @@
       {
-        name: 'toggled',
+        name: 'hide show',
         self: true,
@@ -7596,10 +7643,8 @@
           return this.target;
         },
-        handler(e, toggled) {
-          if (e.target === this.target[0]) {
-            this.updateAria(toggled);
-          }
+        handler(_ref2) {let { type } = _ref2;
+          this.updateAria(type === 'show');
         } },
@@ -9480,7 +9525,9 @@
         this.$mount(
         append(
         container, "<div class=\"" +
-        this.clsMsg + (this.status ? " " + this.clsMsg + "-" + this.status : '') + "\"> <a href class=\"" +
+        this.clsMsg + (
+        this.status ? " " + this.clsMsg + "-" + this.status : '') + "\" role=\"alert\"> <a href class=\"" +
         this.clsClose + "\" data-uk-close></a> <div>" +
         this.message + "</div> </div>"));