uikit 3.14.4-dev.871ba3c05 → 3.14.4-dev.8a8016a73

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.4-dev.871ba3c05 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.4-dev.8a8016a73 | 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) {
@@ -785,18 +781,11 @@
       return elements[0];
     }
 
-    const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-    function getCssVar(name, element) {if (element === void 0) {element = document.documentElement;}
-      return css(element, "--uk-" + name).replace(propertyRe, '$2');
-    }
-
     // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
     const propName = memoize((name) => vendorPropName(name));
 
-    const cssPrefixes = ['webkit', 'moz'];
-
     function vendorPropName(name) {
-      if (name[0] === '-') {
+      if (startsWith(name, '--')) {
         return name;
       }
 
@@ -808,11 +797,8 @@
         return name;
       }
 
-      let i = cssPrefixes.length,
-      prefixedName;
-
-      while (i--) {
-        prefixedName = "-" + cssPrefixes[i] + "-" + name;
+      for (const prefix of ['webkit', 'moz']) {
+        const prefixedName = "-" + prefix + "-" + name;
         if (prefixedName in style) {
           return prefixedName;
         }
@@ -913,13 +899,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) {
@@ -929,7 +916,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) =>
@@ -965,10 +952,10 @@
 
     const inProgress = 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) {
@@ -1060,13 +1047,13 @@
     }
 
     function offsetPosition(element) {
-      const offset = [0, 0];
-
       element = toNode(element);
 
-      do {
-        offset[0] += element.offsetTop;
-        offset[1] += element.offsetLeft;
+      const offset = [element.offsetTop, element.offsetLeft];
+
+      while (element = element.offsetParent) {
+        offset[0] += element.offsetTop + toFloat(css(element, "borderTopWidth"));
+        offset[1] += element.offsetLeft + toFloat(css(element, "borderLeftWidth"));
 
         if (css(element, 'position') === 'fixed') {
           const win = toWindow(element);
@@ -1074,7 +1061,7 @@
           offset[1] += win.scrollX;
           return offset;
         }
-      } while (element = element.offsetParent);
+      }
 
       return offset;
     }
@@ -1293,9 +1280,9 @@
     const hasTouch = inBrowser && 'ontouchstart' in window;
     const hasPointerEvents = inBrowser && window.PointerEvent;
 
-    const pointerDown = hasPointerEvents ? 'pointerdown' : hasTouch ? 'touchstart' : 'mousedown';
-    const pointerMove = hasPointerEvents ? 'pointermove' : hasTouch ? 'touchmove' : 'mousemove';
-    const pointerUp = hasPointerEvents ? 'pointerup' : hasTouch ? 'touchend' : 'mouseup';
+    const pointerDown$1 = hasPointerEvents ? 'pointerdown' : hasTouch ? 'touchstart' : 'mousedown';
+    const pointerMove$1 = hasPointerEvents ? 'pointermove' : hasTouch ? 'touchmove' : 'mousemove';
+    const pointerUp$1 = hasPointerEvents ? 'pointerup' : hasTouch ? 'touchend' : 'mouseup';
     const pointerEnter = hasPointerEvents ? 'pointerenter' : hasTouch ? '' : 'mouseenter';
     const pointerLeave = hasPointerEvents ? 'pointerleave' : hasTouch ? '' : 'mouseleave';
     const pointerCancel = hasPointerEvents ? 'pointercancel' : 'touchcancel';
@@ -1795,20 +1782,6 @@
 
     }
 
-    function scrollTop(element, top) {
-      if (isWindow(element) || isDocument(element)) {
-        element = scrollingElement(element);
-      } else {
-        element = toNode(element);
-      }
-
-      if (isUndefined(top)) {
-        return element.scrollTop;
-      } else {
-        element.scrollTop = top;
-      }
-    }
-
     function scrollIntoView(element, _temp) {let { offset: offsetBy = 0 } = _temp === void 0 ? {} : _temp;
       const parents = isVisible(element) ? scrollParents(element) : [];
       return parents.reduce(
@@ -1850,7 +1823,7 @@
           (function step() {
             const percent = ease(clamp((Date.now() - start) / duration));
 
-            scrollTop(element, scroll + top * percent);
+            element.scrollTop = scroll + top * percent;
 
             // scroll more if we have not reached our destination
             if (percent === 1) {
@@ -1913,12 +1886,10 @@
     function offsetViewport(scrollElement) {
       const window = toWindow(scrollElement);
       const {
-        document: { body, documentElement } } =
+        document: { documentElement } } =
       window;
       let viewportElement =
-      scrollElement === scrollingElement(scrollElement) || scrollElement === body ?
-      window :
-      scrollElement;
+      scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
 
       const { visualViewport } = window;
       if (isWindow(viewportElement) && visualViewport) {
@@ -1937,7 +1908,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];
@@ -1962,126 +1933,65 @@
           ...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 } =
+        viewportOffset,
+        placement } =
       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;
-        }
+      let offsetPosition = position;
+      for (const [i, [prop,, start, end]] of Object.entries(dirs)) {
+        let viewports = scrollParents(target[i]);
+        const [scrollElement] = viewports;
 
-        const willFlip =
-        !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
-
-        viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
+        let viewport = getIntersectionArea(...viewports.map(offsetViewport));
 
         if (viewportOffset) {
           viewport[start] += viewportOffset;
           viewport[end] -= viewportOffset;
         }
 
-        if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
-          viewport = getIntersectionArea(viewport, offset(boundary));
+        if (boundary) {
+          viewport = getIntersectionArea(viewport, offsetViewport(boundary));
         }
 
-        const isInStartBoundary = position[start] >= viewport[start];
-        const isInEndBoundary = position[end] <= viewport[end];
+        const isInStartViewport = position[start] >= viewport[start];
+        const isInEndViewport = position[end] <= viewport[end];
 
-        if (isInStartBoundary && isInEndBoundary) {
+        if (isInStartViewport && isInEndViewport) {
           continue;
         }
 
-        let offsetBy;
+        let offsetBy = 0;
 
         // Flip
-        if (willFlip) {
+        if (placement[i] === 'flip') {
           if (
-          elAttach[i] === end && isInStartBoundary ||
-          elAttach[i] === start && isInEndBoundary)
+          targetAttach[i] === end && isInEndViewport ||
+          targetAttach[i] === start && isInStartViewport)
           {
             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;
-
-          if (
-          !isInScrollArea(
-          {
-            ...position,
-            [start]: position[start] + offsetBy,
-            [end]: position[end] + offsetBy },
-
-          scrollElement,
-          i))
+          offsetBy = flip(element, target, options, i)[start] - position[start];
 
-          {
+          if (!isInScrollArea(applyOffset(position, offsetBy, i), scrollElement, i)) {
             if (isInScrollArea(position, scrollElement, i)) {
               continue;
             }
@@ -2090,26 +2000,27 @@
               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() },
+            const newPos = getPosition(element, target, {
+              ...options,
+              attach: {
+                element: elAttach.map(flipAxis).reverse(),
+                target: targetAttach.map(flipAxis).reverse() },
 
-                offset: elOffset.reverse(),
-                flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
-                recursion: true });
+              offset: elOffset.reverse(),
+              placement: placement.reverse(),
+              recursion: true });
 
 
-              if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
-                return newPos;
-              }
+            if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
+              return newPos;
             }
+
+            continue;
           }
 
-          // Move
-        } else {
+          // Shift
+        } else if (placement[i] === 'shift') {
+          const targetDim = offset(target[i]);
           offsetBy =
           clamp(
           clamp(position[start], viewport[start], viewport[end] - position[prop]),
@@ -2118,13 +2029,54 @@
           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 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) {
@@ -2145,12 +2097,32 @@
       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 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 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 flipOffset(offset, i) {
+      offset = [...offset];
+      offset[i] *= -1;
+      return offset;
     }
 
-    function flipDir(prop) {
+    function flipAxis(prop) {
       for (let i = 0; i < dirs.length; i++) {
         const index = dirs[i].indexOf(prop);
         if (~index) {
@@ -2165,7 +2137,7 @@
         getImage: getImage,
         transition: transition,
         Transition: Transition,
-        animate: animate$1,
+        animate: animate$2,
         Animation: Animation,
         attr: attr,
         hasAttr: hasAttr,
@@ -2205,9 +2177,9 @@
         inBrowser: inBrowser,
         isRtl: isRtl,
         hasTouch: hasTouch,
-        pointerDown: pointerDown,
-        pointerMove: pointerMove,
-        pointerUp: pointerUp,
+        pointerDown: pointerDown$1,
+        pointerMove: pointerMove$1,
+        pointerUp: pointerUp$1,
         pointerEnter: pointerEnter,
         pointerLeave: pointerLeave,
         pointerCancel: pointerCancel,
@@ -2295,10 +2267,8 @@
         findAll: findAll,
         escape: escape,
         css: css,
-        getCssVar: getCssVar,
         propName: propName,
         isInView: isInView,
-        scrollTop: scrollTop,
         scrollIntoView: scrollIntoView,
         scrolledOver: scrolledOver,
         scrollParents: scrollParents,
@@ -2621,7 +2591,7 @@
 
         value = props[key] === Boolean && value === '' ? true : coerce$1(props[key], value);
 
-        if (prop === 'target' && (!value || startsWith(value, '_'))) {
+        if (prop === 'target' && startsWith(value, '_')) {
           continue;
         }
 
@@ -2632,7 +2602,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]);
         }
       }
@@ -2961,7 +2931,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.14.4-dev.871ba3c05';
+    UIkit.version = '3.14.4-dev.8a8016a73';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3066,27 +3036,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: {
@@ -3095,7 +3045,7 @@
         },
 
         hasTransition(_ref2) {let { animation } = _ref2;
-          return startsWith(animation[0], 'slide');
+          return ['slide', 'reveal'].some((transition) => startsWith(animation[0], transition));
         } },
 
 
@@ -3188,130 +3138,97 @@
       };
     }
 
-    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;
-
-        Transition.cancel(el);
+        await 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 });
+        const prevProps = Object.fromEntries(
+        ['padding', 'border', 'width', 'height', 'overflow', marginProp, marginStartProp].map(
+        (key) => [key, el.style[key]]));
 
-        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);
-        css(scrollElement, 'overflowX', 'hidden');
+        const dim = dimensions$1(el);
+        const currentMargin = toFloat(css(el, marginProp));
+        const marginStart = toFloat(css(el, marginStartProp));
+        const endDim = dim[dimProp] + marginStart;
 
-        if (!isToggled(el)) {
-          _toggle(el, true);
+        if (!inProgress && !show) {
+          currentDim += marginStart;
         }
 
-        const width = toFloat(css(el, 'width'));
-        duration = velocity * width + duration;
+        const [wrapper] = wrapInner(el, '<div>');
+        css(wrapper, {
+          boxSizing: 'border-box',
+          height: dim.height,
+          width: dim.width,
+          ...css(el, [
+          'padding',
+          'borderTop',
+          'borderRight',
+          'borderBottom',
+          'borderLeft',
+          'borderImage',
+          marginStartProp]) });
 
-        const percent = visible ? (width + marginLeft * (right ? -1 : 1)) / width * 100 : 0;
-        const offsetEl = offset(el);
-        const useClipPath = right ?
-        offsetEl.right < scrollElement.clientWidth :
-        Math.round(offsetEl.left) > 0;
 
-        css(el, {
-          clipPath: useClipPath ?
-          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 });
 
+        css(el, {
+          padding: 0,
+          border: 0,
+          [marginStartProp]: 0,
+          width: dim.width,
+          height: dim.height,
+          overflow: 'hidden',
+          [dimProp]: currentDim });
 
-        return (
-        show ?
-        Transition.start(
-        el,
-        {
-          clipPath: useClipPath ? "polygon(0 0,100% 0,100% 100%,0 100%)" : '',
-          marginLeft: 0 },
 
-        duration * (1 - percent / 100),
-        transition) :
+        const percent = currentDim / endDim;
+        duration = (velocity * endDim + duration) * (show ? 1 - percent : percent);
+        const endProps = { [dimProp]: show ? endDim : 0 };
 
-        Transition.start(
-        el,
-        {
-          clipPath: useClipPath ?
-          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);
+          }
+        }
       };
     }
 
@@ -3336,6 +3253,7 @@
       mixins: [Class, Lazyload, Togglable],
 
       props: {
+        animation: Boolean,
         targets: String,
         active: null,
         collapsible: Boolean,
@@ -3348,7 +3266,7 @@
       data: {
         targets: '> *',
         active: false,
-        animation: ['slide'],
+        animation: true,
         collapsible: true,
         multiple: false,
         clsOpen: 'uk-open',
@@ -3394,7 +3312,7 @@
               hide(
               el,
               !hasClass(
-              this.items.find((item) => item.contains(el)),
+              this.items.find((item) => within(el, item)),
               this.clsOpen));
 
 
@@ -3446,23 +3364,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);
@@ -3488,18 +3398,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() {
@@ -3509,16 +3418,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',
 
@@ -3667,13 +3599,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() {
@@ -3685,19 +3621,24 @@
       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/);
+          const { scrollTop, scrollLeft } = scrollElement;
+
           // Ensure none positioned element does not generate scrollbars
           const elDim = dimensions$1(element);
           css(element, { top: -elDim.height, left: -elDim.width });
@@ -3706,93 +3647,88 @@
             attach,
             offset,
             boundary,
-            flip: this.flip,
+            placement,
             viewportOffset: this.getViewportOffset(element) });
 
+
+          // Restore scroll position
+          scrollElement.scrollTop = scrollTop;
+          scrollElement.scrollLeft = scrollLeft;
         },
 
         getPositionOffset(element) {
           return (
             toPx(
-            this.offset === false ? getCssVar('position-offset', element) : this.offset,
+            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(
-          getCssVar('position-shift-offset', element),
+          css(element, '--uk-position-shift-offset'),
           this.axis === 'y' ? 'width' : 'height',
           element) * (
           includes(['left', 'top'], this.align) ? 1 : -1);
         },
 
         getViewportOffset(element) {
-          return toPx(getCssVar('position-viewport-offset', element));
+          return toPx(css(element, '--uk-position-viewport-offset'));
         } } };
 
-    let active$1;
+    var Style = {
+      beforeConnect() {
+        this._style = attr(this.$el, 'style');
+      },
 
-    var drop = {
-      mixins: [Container, Lazyload, Position, Togglable],
+      disconnected() {
+        attr(this.$el, 'style', this._style);
+      } };
 
-      args: 'pos',
+    const active$1 = [];
+
+    var Modal = {
+      mixins: [Class, Container, Togglable],
 
       props: {
-        mode: 'list',
-        toggle: Boolean,
-        boundary: Boolean,
-        boundaryAlign: Boolean,
-        delayShow: Number,
-        delayHide: Number,
-        display: String,
-        clsDrop: String,
-        animateOut: Boolean },
+        selPanel: String,
+        selClose: String,
+        escClose: Boolean,
+        bgClose: Boolean,
+        stack: Boolean },
 
 
       data: {
-        mode: ['click', 'hover'],
-        toggle: '- *',
-        boundary: true,
-        boundaryAlign: false,
-        delayShow: 0,
-        delayHide: 800,
-        display: null,
-        clsDrop: false,
-        animation: ['uk-animation-fade'],
         cls: 'uk-open',
-        container: false,
-        animateOut: false },
+        escClose: true,
+        bgClose: true,
+        overlay: true,
+        stack: false },
 
 
-      created() {
-        this.tracker = new MouseTracker();
-      },
+      computed: {
+        panel(_ref, $el) {let { selPanel } = _ref;
+          return $(selPanel, $el);
+        },
 
-      beforeConnect() {
-        this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
-      },
+        transitionElement() {
+          return this.panel;
+        },
 
-      connected() {
-        addClass(this.$el, this.clsDrop);
+        bgClose(_ref2) {let { bgClose } = _ref2;
+          return bgClose && this.panel;
+        } },
 
-        if (this.toggle && !this.target) {
-          this.target = this.$create('toggle', query(this.toggle, this.$el), {
-            target: this.$el,
-            mode: this.mode }).
-          $el;
-          attr(this.target, 'aria-haspopup', true);
-          this.lazyload(this.target);
-        }
-      },
 
-      disconnected() {
-        if (this.isActive()) {
-          active$1 = null;
+      beforeDisconnect() {
+        if (includes(active$1, this)) {
+          this.toggleElement(this.$el, false, false);
         }
       },
 
@@ -3801,62 +3737,439 @@
         name: 'click',
 
         delegate() {
-          return "." + this.clsDrop + "-close";
+          return this.selClose;
         },
 
         handler(e) {
           e.preventDefault();
-          this.hide(false);
+          this.hide();
         } },
 
 
       {
-        name: 'click',
+        name: 'toggle',
 
-        delegate() {
-          return 'a[href^="#"]';
-        },
+        self: true,
 
-        handler(_ref) {let { defaultPrevented, current: { hash } } = _ref;
-          if (!defaultPrevented && hash && !within(hash, this.$el)) {
-            this.hide(false);
+        handler(e) {
+          if (e.defaultPrevented) {
+            return;
           }
-        } },
-
 
-      {
-        name: 'beforescroll',
+          e.preventDefault();
 
-        handler() {
-          this.hide(false);
+          if (this.isToggled() === includes(active$1, this)) {
+            this.toggle();
+          }
         } },
 
 
       {
-        name: 'toggle',
+        name: 'beforeshow',
 
         self: true,
 
-        handler(e, toggle) {
-          e.preventDefault();
+        handler(e) {
+          if (includes(active$1, this)) {
+            return false;
+          }
 
-          if (this.isToggled()) {
-            this.hide(false);
+          if (!this.stack && active$1.length) {
+            Promise.all(active$1.map((modal) => modal.hide())).then(this.show);
+            e.preventDefault();
           } else {
-            this.show(toggle == null ? void 0 : toggle.$el, false);
+            active$1.push(this);
           }
         } },
 
 
       {
-        name: 'toggleshow',
+        name: 'show',
 
         self: true,
 
-        handler(e, toggle) {
-          e.preventDefault();
-          this.show(toggle == null ? void 0 : toggle.$el);
-        } },
+        handler() {
+          once(
+          this.$el,
+          'hide',
+          on(document, 'focusin', (e) => {
+            if (last(active$1) === this && !within(e.target, this.$el)) {
+              this.$el.focus();
+            }
+          }));
+
+
+          if (this.overlay) {
+            once(this.$el, 'hidden', preventOverscroll(this.$el));
+            once(this.$el, 'hidden', preventBackgroundScroll());
+          }
+
+          if (this.stack) {
+            css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active$1.length);
+          }
+
+          addClass(document.documentElement, this.clsPage);
+
+          if (this.bgClose) {
+            once(
+            this.$el,
+            'hide',
+            on(document, pointerDown$1, (_ref3) => {let { target } = _ref3;
+              if (
+              last(active$1) !== this ||
+              this.overlay && !within(target, this.$el) ||
+              within(target, this.panel))
+              {
+                return;
+              }
+
+              once(
+              document,
+              pointerUp$1 + " " + pointerCancel + " scroll",
+              (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
+                if (
+                !defaultPrevented &&
+                type === pointerUp$1 &&
+                target === newTarget)
+                {
+                  this.hide();
+                }
+              },
+              true);
+
+            }),
+            { self: true });
+
+          }
+
+          if (this.escClose) {
+            once(
+            this.$el,
+            'hide',
+            on(document, 'keydown', (e) => {
+              if (e.keyCode === 27 && last(active$1) === this) {
+                this.hide();
+              }
+            }),
+            { self: true });
+
+          }
+        } },
+
+
+      {
+        name: 'shown',
+
+        self: true,
+
+        handler() {
+          if (!isFocusable(this.$el)) {
+            attr(this.$el, 'tabindex', '-1');
+          }
+
+          if (!$(':focus', this.$el)) {
+            this.$el.focus();
+          }
+        } },
+
+
+      {
+        name: 'hidden',
+
+        self: true,
+
+        handler() {
+          if (includes(active$1, this)) {
+            active$1.splice(active$1.indexOf(this), 1);
+          }
+
+          css(this.$el, 'zIndex', '');
+
+          if (!active$1.some((modal) => modal.clsPage === this.clsPage)) {
+            removeClass(document.documentElement, this.clsPage);
+          }
+        } }],
+
+
+
+      methods: {
+        toggle() {
+          return this.isToggled() ? this.hide() : this.show();
+        },
+
+        show() {
+          if (this.container && parent(this.$el) !== this.container) {
+            append(this.container, this.$el);
+            return new Promise((resolve) =>
+            requestAnimationFrame(() => this.show().then(resolve)));
+
+          }
+
+          return this.toggleElement(this.$el, true, animate(this));
+        },
+
+        hide() {
+          return this.toggleElement(this.$el, false, animate(this));
+        } } };
+
+
+
+    function animate(_ref5) {let { transitionElement, _toggle } = _ref5;
+      return (el, show) =>
+      new Promise((resolve, reject) =>
+      once(el, 'show hide', () => {
+        el._reject == null ? void 0 : el._reject();
+        el._reject = reject;
+
+        _toggle(el, show);
+
+        const off = once(
+        transitionElement,
+        'transitionstart',
+        () => {
+          once(transitionElement, 'transitionend transitioncancel', resolve, {
+            self: true });
+
+          clearTimeout(timer);
+        },
+        { self: true });
+
+
+        const timer = setTimeout(() => {
+          off();
+          resolve();
+        }, toMs(css(transitionElement, 'transitionDuration')));
+      })).
+      then(() => delete el._reject);
+    }
+
+    function toMs(time) {
+      return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
+    }
+
+    function preventOverscroll(el) {
+      if (CSS.supports('overscroll-behavior', 'contain')) {
+        const elements = filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow')));
+        css(elements, 'overscrollBehavior', 'contain');
+        return () => css(elements, 'overscrollBehavior', '');
+      }
+
+      let startClientY;
+
+      const events = [
+      on(
+      el,
+      'touchstart',
+      (_ref6) => {let { targetTouches } = _ref6;
+        if (targetTouches.length === 1) {
+          startClientY = targetTouches[0].clientY;
+        }
+      },
+      { passive: true }),
+
+
+      on(
+      el,
+      'touchmove',
+      (e) => {
+        if (e.targetTouches.length !== 1) {
+          return;
+        }
+
+        let [scrollParent] = scrollParents(e.target, /auto|scroll/);
+        if (!within(scrollParent, el)) {
+          scrollParent = el;
+        }
+
+        const clientY = e.targetTouches[0].clientY - startClientY;
+        const { scrollTop, scrollHeight, clientHeight } = scrollParent;
+
+        if (
+        clientHeight >= scrollHeight ||
+        scrollTop === 0 && clientY > 0 ||
+        scrollHeight - scrollTop <= clientHeight && clientY < 0)
+        {
+          e.cancelable && e.preventDefault();
+        }
+      },
+      { passive: false })];
+
+
+
+      return () => events.forEach((fn) => fn());
+    }
+
+    let prevented;
+    function preventBackgroundScroll() {
+      if (prevented) {
+        return noop;
+      }
+      prevented = true;
+      const { body, documentElement } = document;
+      css(body, {
+        overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
+        touchAction: 'none' });
+
+      css(documentElement, 'overflowY', 'hidden');
+      return () => {
+        prevented = false;
+        css(documentElement, 'overflowY', '');
+        css(body, { overflowY: '', touchAction: '' });
+      };
+    }
+
+    function filterChildren(el, fn) {
+      const children = [];
+      apply(el, (node) => {
+        if (fn(node)) {
+          children.push(node);
+        }
+      });
+      return children;
+    }
+
+    let active;
+
+    var drop = {
+      mixins: [Container, Lazyload, Position, Style, Togglable],
+
+      args: 'pos',
+
+      props: {
+        mode: 'list',
+        toggle: Boolean,
+        boundary: Boolean,
+        target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
+        stretch: Boolean,
+        delayShow: Number,
+        delayHide: Number,
+        display: String,
+        clsDrop: String,
+        animateOut: Boolean,
+        bgScroll: Boolean },
+
+
+      data: {
+        mode: ['click', 'hover'],
+        toggle: '- *',
+        boundary: false,
+        target: false,
+        targetX: false,
+        targetY: false,
+        stretch: false,
+        delayShow: 0,
+        delayHide: 800,
+        display: null,
+        clsDrop: false,
+        animateOut: false,
+        bgScroll: true,
+        animation: ['uk-animation-fade'],
+        cls: 'uk-open',
+        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() {
+        this.tracker = new MouseTracker();
+      },
+
+      beforeConnect() {
+        this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
+      },
+
+      connected() {
+        addClass(this.$el, this.clsDrop);
+
+        if (this.toggle && !this.targetEl) {
+          this.targetEl = this.$create('toggle', query(this.toggle, this.$el), {
+            target: this.$el,
+            mode: this.mode }).
+          $el;
+          attr(this.targetEl, 'aria-haspopup', true);
+          this.lazyload(this.targetEl);
+        }
+      },
+
+      disconnected() {
+        if (this.isActive()) {
+          active = null;
+        }
+      },
+
+      events: [
+      {
+        name: 'click',
+
+        delegate() {
+          return "." + this.clsDrop + "-close";
+        },
+
+        handler(e) {
+          e.preventDefault();
+          this.hide(false);
+        } },
+
+
+      {
+        name: 'click',
+
+        delegate() {
+          return 'a[href^="#"]';
+        },
+
+        handler(_ref2) {let { defaultPrevented, current: { hash } } = _ref2;
+          if (!defaultPrevented && hash && !within(hash, this.$el)) {
+            this.hide(false);
+          }
+        } },
+
+
+      {
+        name: 'beforescroll',
+
+        handler() {
+          this.hide(false);
+        } },
+
+
+      {
+        name: 'toggle',
+
+        self: true,
+
+        handler(e, toggle) {
+          e.preventDefault();
+
+          if (this.isToggled()) {
+            this.hide(false);
+          } else {
+            this.show(toggle == null ? void 0 : toggle.$el, false);
+          }
+        } },
+
+
+      {
+        name: 'toggleshow',
+
+        self: true,
+
+        handler(e, toggle) {
+          e.preventDefault();
+          this.show(toggle == null ? void 0 : toggle.$el);
+        } },
 
 
       {
@@ -3921,25 +4234,25 @@
         self: true,
 
         handler() {
-          active$1 = this;
+          active = this;
 
           this.tracker.init();
 
           for (const handler of [
           on(
           document,
-          pointerDown,
-          (_ref2) => {let { target } = _ref2;return (
+          pointerDown$1,
+          (_ref3) => {let { target } = _ref3;return (
               !within(target, this.$el) &&
               once(
               document,
-              pointerUp + " " + pointerCancel + " scroll",
-              (_ref3) => {let { defaultPrevented, type, target: newTarget } = _ref3;
+              pointerUp$1 + " " + pointerCancel + " scroll",
+              (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
                 if (
                 !defaultPrevented &&
-                type === pointerUp &&
+                type === pointerUp$1 &&
                 target === newTarget &&
-                !(this.target && within(target, this.target)))
+                !(this.targetEl && within(target, this.targetEl)))
                 {
                   this.hide(false);
                 }
@@ -3954,13 +4267,17 @@
             }
           }),
 
-          ...(this.display === 'static' && this.align !== 'stretch' ?
+          ...(this.bgScroll ?
+          [] :
+          [preventOverscroll(this.$el), preventBackgroundScroll()]),
+
+          ...(this.display === 'static' ?
           [] :
           (() => {
             const handler = () => this.$emit();
             return [
             on(window, 'resize', handler),
-            on(document, 'scroll', handler, true),
+            on([document, scrollParents(this.$el)], 'scroll', handler),
             (() => {
               const observer = observeResize(
               scrollParents(this.$el),
@@ -3989,16 +4306,16 @@
       {
         name: 'hide',
 
-        handler(_ref4) {let { target } = _ref4;
+        handler(_ref5) {let { target } = _ref5;
           if (this.$el !== target) {
-            active$1 =
-            active$1 === null && within(target, this.$el) && this.isToggled() ?
+            active =
+            active === null && within(target, this.$el) && this.isToggled() ?
             this :
-            active$1;
+            active;
             return;
           }
 
-          active$1 = this.isActive() ? null : active$1;
+          active = this.isActive() ? null : active;
           this.tracker.cancel();
         } }],
 
@@ -4013,12 +4330,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();
 
@@ -4026,16 +4343,16 @@
             return;
           }
 
-          if (active$1) {
-            if (delay && active$1.isDelaying) {
+          if (active) {
+            if (delay && active.isDelaying) {
               this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
               return;
             }
 
             let prev;
-            while (active$1 && prev !== active$1 && !within(this.$el, active$1.$el)) {
-              prev = active$1;
-              active$1.hide(false, false);
+            while (active && prev !== active && !within(this.$el, active.$el)) {
+              prev = active;
+              active.hide(false, false);
             }
           }
 
@@ -4076,65 +4393,74 @@
         },
 
         isActive() {
-          return active$1 === this;
+          return active === this;
         },
 
         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 = offsetViewport(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);
+            }
+          }
         } } };
 
 
@@ -4631,8 +4957,11 @@
           let minHeight = '';
           const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
+          const { body, scrollingElement } = document;
           const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
-          const { height: viewportHeight } = offsetViewport(scrollElement);
+          const { height: viewportHeight } = offsetViewport(
+          scrollElement === body ? scrollingElement : scrollElement);
+
 
           if (this.expand) {
             minHeight = Math.max(
@@ -4642,14 +4971,19 @@
             0);
 
           } else {
-            // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-            minHeight = "calc(" + (
-            document.scrollingElement === scrollElement ? '100vh' : viewportHeight + "px");
+            const isScrollingElement =
+            scrollingElement === scrollElement || body === scrollElement;
 
+            // on mobile devices (iOS and Android) window.innerHeight !== 100vh
+            minHeight = "calc(" + (isScrollingElement ? '100vh' : viewportHeight + "px");
 
             if (this.offsetTop) {
-              const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
-              minHeight += top > 0 && top < viewportHeight / 2 ? " - " + top + "px" : '';
+              if (isScrollingElement) {
+                const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+                minHeight += top > 0 && top < viewportHeight / 2 ? " - " + top + "px" : '';
+              } else {
+                minHeight += " - " + css(scrollElement, 'paddingTop');
+              }
             }
 
             if (this.offsetBottom === true) {
@@ -4888,11 +5222,17 @@
 
     var closeIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"1\" y1=\"1\" x2=\"13\" y2=\"13\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"13\" y1=\"1\" x2=\"1\" y2=\"13\"/></svg>";
 
-    var closeLarge = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"1\" y1=\"1\" x2=\"19\" y2=\"19\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"19\" y1=\"1\" x2=\"1\" y2=\"19\"/></svg>";
+    var closeLarge = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"1\" y1=\"1\" x2=\"19\" y2=\"19\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"19\" y1=\"1\" x2=\"1\" y2=\"19\"/></svg>";
+
+    var marker = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"9\" y=\"4\" width=\"1\" height=\"11\"/><rect x=\"4\" y=\"9\" width=\"11\" height=\"1\"/></svg>";
+
+    var navParentIcon = "<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 navParentIconLarge = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" points=\"1 4 7 10 13 4\"/></svg>";
 
-    var marker = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"9\" y=\"4\" width=\"1\" height=\"11\"/><rect x=\"4\" y=\"9\" width=\"11\" height=\"1\"/></svg>";
+    var 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 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[aria-expanded=\"true\"] svg > .line-2 { transform: rotate(45deg); }\n    .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-3 { transform: rotate(-45deg); }\n\n    .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-1,\n    .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-4 { opacity: 0; }\n    .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-1 { transform: translateY(6px) scaleX(0); }\n    .uk-navbar-toggle[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>";
 
@@ -4924,6 +5264,9 @@
       marker,
       'close-icon': closeIcon,
       'close-large': closeLarge,
+      'nav-parent-icon': navParentIcon,
+      'nav-parent-icon-large': navParentIconLarge,
+      'navbar-parent-icon': navbarParentIcon,
       'navbar-toggle-icon': navbarToggleIcon,
       'overlay-icon': overlayIcon,
       'pagination-next': paginationNext,
@@ -4981,6 +5324,15 @@
       } };
 
 
+    const NavParentIcon = {
+      extends: IconComponent,
+
+      beforeConnect() {
+        const icon = this.$props.icon;
+        this.icon = closest(this.$el, '.uk-nav-primary') ? icon + "-large" : icon;
+      } };
+
+
     const Slidenav = {
       extends: IconComponent,
 
@@ -5192,385 +5544,133 @@
           append(picture, source);
         }
         append(picture, img);
-      }
-    }
-
-    function parseSources(sources) {
-      if (!sources) {
-        return [];
-      }
-
-      if (startsWith(sources, '[')) {
-        try {
-          sources = JSON.parse(sources);
-        } catch (e) {
-          sources = [];
-        }
-      } else {
-        sources = parseOptions(sources);
-      }
-
-      if (!isArray(sources)) {
-        sources = [sources];
-      }
-
-      return sources.filter((source) => !isEmpty(source));
-    }
-
-    function ensureSrcAttribute(el) {
-      if (isImg(el) && !hasAttr(el, 'src')) {
-        attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
-      }
-    }
-
-    function isPicture(el) {
-      return isTag(el, 'picture');
-    }
-
-    function isImg(el) {
-      return isTag(el, 'img');
-    }
-
-    var Media = {
-      props: {
-        media: Boolean },
-
-
-      data: {
-        media: false },
-
-
-      connected() {
-        const media = toMedia(this.media);
-        this.matchMedia = true;
-        if (media) {
-          this.mediaObj = window.matchMedia(media);
-          const handler = () => {
-            this.matchMedia = this.mediaObj.matches;
-            trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
-          };
-          this.offMediaObj = on(this.mediaObj, 'change', () => {
-            handler();
-            this.$emit('resize');
-          });
-          handler();
-        }
-      },
-
-      disconnected() {var _this$offMediaObj;
-        (_this$offMediaObj = this.offMediaObj) == null ? void 0 : _this$offMediaObj.call(this);
-      } };
-
-
-    function toMedia(value) {
-      if (isString(value)) {
-        if (startsWith(value, '@')) {
-          const name = "breakpoint-" + value.substr(1);
-          value = toFloat(getCssVar(name));
-        } else if (isNaN(value)) {
-          return value;
-        }
-      }
-
-      return value && isNumeric(value) ? "(min-width: " + value + "px)" : '';
-    }
-
-    var leader = {
-      mixins: [Class, Media, Resize],
-
-      props: {
-        fill: String },
-
-
-      data: {
-        fill: '',
-        clsWrapper: 'uk-leader-fill',
-        clsHide: 'uk-leader-hide',
-        attrFill: 'data-fill' },
-
-
-      computed: {
-        fill(_ref) {let { fill } = _ref;
-          return fill || getCssVar('leader-fill-content');
-        } },
-
-
-      connected() {
-        [this.wrapper] = wrapInner(this.$el, "<span class=\"" + this.clsWrapper + "\">");
-      },
-
-      disconnected() {
-        unwrap(this.wrapper.childNodes);
-      },
-
-      update: {
-        read() {
-          const width = Math.trunc(this.$el.offsetWidth / 2);
-
-          return {
-            width,
-            fill: this.fill,
-            hide: !this.matchMedia };
-
-        },
-
-        write(_ref2) {let { width, fill, hide } = _ref2;
-          toggleClass(this.wrapper, this.clsHide, hide);
-          attr(this.wrapper, this.attrFill, new Array(width).join(fill));
-        },
-
-        events: ['resize'] } };
-
-    const active = [];
-
-    var Modal = {
-      mixins: [Class, Container, Togglable],
-
-      props: {
-        selPanel: String,
-        selClose: String,
-        escClose: Boolean,
-        bgClose: Boolean,
-        stack: Boolean },
-
-
-      data: {
-        cls: 'uk-open',
-        escClose: true,
-        bgClose: true,
-        overlay: true,
-        stack: false },
-
-
-      computed: {
-        panel(_ref, $el) {let { selPanel } = _ref;
-          return $(selPanel, $el);
-        },
-
-        transitionElement() {
-          return this.panel;
-        },
-
-        bgClose(_ref2) {let { bgClose } = _ref2;
-          return bgClose && this.panel;
-        } },
-
-
-      beforeDisconnect() {
-        if (includes(active, this)) {
-          this.toggleElement(this.$el, false, false);
-        }
-      },
-
-      events: [
-      {
-        name: 'click',
-
-        delegate() {
-          return this.selClose;
-        },
-
-        handler(e) {
-          e.preventDefault();
-          this.hide();
-        } },
-
-
-      {
-        name: 'toggle',
-
-        self: true,
-
-        handler(e) {
-          if (e.defaultPrevented) {
-            return;
-          }
-
-          e.preventDefault();
-
-          if (this.isToggled() === includes(active, this)) {
-            this.toggle();
-          }
-        } },
-
-
-      {
-        name: 'beforeshow',
-
-        self: true,
-
-        handler(e) {
-          if (includes(active, this)) {
-            return false;
-          }
-
-          if (!this.stack && active.length) {
-            Promise.all(active.map((modal) => modal.hide())).then(this.show);
-            e.preventDefault();
-          } else {
-            active.push(this);
-          }
-        } },
-
-
-      {
-        name: 'show',
-
-        self: true,
-
-        handler() {
-          const docEl = document.documentElement;
-
-          if (width(window) > docEl.clientWidth && this.overlay) {
-            css(document.body, 'overflowY', 'scroll');
-          }
-
-          if (this.stack) {
-            css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active.length);
-          }
-
-          addClass(docEl, this.clsPage);
-
-          if (this.bgClose) {
-            once(
-            this.$el,
-            'hide',
-            on(document, pointerDown, (_ref3) => {let { target } = _ref3;
-              if (
-              last(active) !== this ||
-              this.overlay && !within(target, this.$el) ||
-              within(target, this.panel))
-              {
-                return;
-              }
-
-              once(
-              document,
-              pointerUp + " " + pointerCancel + " scroll",
-              (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
-                if (
-                !defaultPrevented &&
-                type === pointerUp &&
-                target === newTarget)
-                {
-                  this.hide();
-                }
-              },
-              true);
-
-            }),
-            { self: true });
+      }
+    }
 
-          }
+    function parseSources(sources) {
+      if (!sources) {
+        return [];
+      }
 
-          if (this.escClose) {
-            once(
-            this.$el,
-            'hide',
-            on(document, 'keydown', (e) => {
-              if (e.keyCode === 27 && last(active) === this) {
-                this.hide();
-              }
-            }),
-            { self: true });
+      if (startsWith(sources, '[')) {
+        try {
+          sources = JSON.parse(sources);
+        } catch (e) {
+          sources = [];
+        }
+      } else {
+        sources = parseOptions(sources);
+      }
 
-          }
-        } },
+      if (!isArray(sources)) {
+        sources = [sources];
+      }
 
+      return sources.filter((source) => !isEmpty(source));
+    }
 
-      {
-        name: 'shown',
+    function ensureSrcAttribute(el) {
+      if (isImg(el) && !hasAttr(el, 'src')) {
+        attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
+      }
+    }
 
-        self: true,
+    function isPicture(el) {
+      return isTag(el, 'picture');
+    }
 
-        handler() {
-          if (!isFocusable(this.$el)) {
-            attr(this.$el, 'tabindex', '-1');
-          }
+    function isImg(el) {
+      return isTag(el, 'img');
+    }
 
-          if (!$(':focus', this.$el)) {
-            this.$el.focus();
-          }
-        } },
+    var Media = {
+      props: {
+        media: Boolean },
 
 
-      {
-        name: 'hidden',
+      data: {
+        media: false },
 
-        self: true,
 
-        handler() {
-          if (includes(active, this)) {
-            active.splice(active.indexOf(this), 1);
-          }
+      connected() {
+        const media = toMedia(this.media, this.$el);
+        this.matchMedia = true;
+        if (media) {
+          this.mediaObj = window.matchMedia(media);
+          const handler = () => {
+            this.matchMedia = this.mediaObj.matches;
+            trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
+          };
+          this.offMediaObj = on(this.mediaObj, 'change', () => {
+            handler();
+            this.$emit('resize');
+          });
+          handler();
+        }
+      },
 
-          if (!active.length) {
-            css(document.body, 'overflowY', '');
-          }
+      disconnected() {var _this$offMediaObj;
+        (_this$offMediaObj = this.offMediaObj) == null ? void 0 : _this$offMediaObj.call(this);
+      } };
 
-          css(this.$el, 'zIndex', '');
 
-          if (!active.some((modal) => modal.clsPage === this.clsPage)) {
-            removeClass(document.documentElement, this.clsPage);
-          }
-        } }],
+    function toMedia(value, element) {
+      if (isString(value)) {
+        if (startsWith(value, '@')) {
+          value = toFloat(css(element, "--uk-breakpoint-" + value.substr(1)));
+        } else if (isNaN(value)) {
+          return value;
+        }
+      }
 
+      return value && isNumeric(value) ? "(min-width: " + value + "px)" : '';
+    }
 
+    var leader = {
+      mixins: [Class, Media, Resize],
 
-      methods: {
-        toggle() {
-          return this.isToggled() ? this.hide() : this.show();
-        },
+      props: {
+        fill: String },
 
-        show() {
-          if (this.container && parent(this.$el) !== this.container) {
-            append(this.container, this.$el);
-            return new Promise((resolve) =>
-            requestAnimationFrame(() => this.show().then(resolve)));
 
-          }
+      data: {
+        fill: '',
+        clsWrapper: 'uk-leader-fill',
+        clsHide: 'uk-leader-hide',
+        attrFill: 'data-fill' },
 
-          return this.toggleElement(this.$el, true, animate(this));
-        },
 
-        hide() {
-          return this.toggleElement(this.$el, false, animate(this));
-        } } };
+      computed: {
+        fill(_ref) {let { fill } = _ref;
+          return fill || css(this.$el, '--uk-leader-fill-content');
+        } },
 
 
+      connected() {
+        [this.wrapper] = wrapInner(this.$el, "<span class=\"" + this.clsWrapper + "\">");
+      },
 
-    function animate(_ref5) {let { transitionElement, _toggle } = _ref5;
-      return (el, show) =>
-      new Promise((resolve, reject) =>
-      once(el, 'show hide', () => {
-        el._reject == null ? void 0 : el._reject();
-        el._reject = reject;
+      disconnected() {
+        unwrap(this.wrapper.childNodes);
+      },
 
-        _toggle(el, show);
+      update: {
+        read() {
+          const width = Math.trunc(this.$el.offsetWidth / 2);
 
-        const off = once(
-        transitionElement,
-        'transitionstart',
-        () => {
-          once(transitionElement, 'transitionend transitioncancel', resolve, {
-            self: true });
+          return {
+            width,
+            fill: this.fill,
+            hide: !this.matchMedia };
 
-          clearTimeout(timer);
         },
-        { self: true });
 
+        write(_ref2) {let { width, fill, hide } = _ref2;
+          toggleClass(this.wrapper, this.clsHide, hide);
+          attr(this.wrapper, this.attrFill, new Array(width).join(fill));
+        },
 
-        const timer = setTimeout(() => {
-          off();
-          resolve();
-        }, toMs(css(transitionElement, 'transitionDuration')));
-      })).
-      then(() => delete el._reject);
-    }
-
-    function toMs(time) {
-      return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
-    }
+        events: ['resize'] } };
 
     var modal = {
       install: install$2,
@@ -5734,7 +5834,7 @@
         align: String,
         offset: Number,
         boundary: Boolean,
-        boundaryAlign: Boolean,
+        target: Boolean,
         clsDrop: String,
         delayShow: Number,
         delayHide: Number,
@@ -5751,9 +5851,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,
@@ -5788,7 +5891,7 @@
           },
 
           watch(dropbar) {
-            addClass(dropbar, 'uk-navbar-dropbar');
+            addClass(dropbar, 'uk-dropbar', 'uk-dropbar-top', 'uk-navbar-dropbar');
           },
 
           immediate: true },
@@ -5804,7 +5907,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);
                 }
@@ -5821,8 +5924,7 @@
             {
               ...this.$props,
               boundary: this.boundary,
-              pos: this.pos,
-              offset: this.dropbar || this.offset });
+              pos: this.pos });
 
 
           },
@@ -5867,8 +5969,8 @@
           if (
           active &&
           includes(active.mode, 'hover') &&
-          active.target &&
-          !within(active.target, current) &&
+          active.targetEl &&
+          !within(active.targetEl, current) &&
           !active.isDelaying)
           {
             active.hide(false);
@@ -5890,7 +5992,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));});
@@ -5940,8 +6042,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);
@@ -5983,8 +6085,8 @@
           return this.dropbar;
         },
 
-        handler(_, _ref9) {let { $el, align } = _ref9;
-          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+        handler(_ref9) {let { target } = _ref9;
+          if (!this.isDropbarDrop(target)) {
             return;
           }
 
@@ -5992,7 +6094,7 @@
             after(this.dropbarAnchor || this.$el, this.dropbar);
           }
 
-          addClass($el, this.clsDrop + "-dropbar");
+          addClass(target, this.clsDrop + "-dropbar");
         } },
 
 
@@ -6007,19 +6109,24 @@
           return this.dropbar;
         },
 
-        handler(_, _ref10) {let { $el, align } = _ref10;
-          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+        handler(_ref10) {let { target } = _ref10;
+          if (!this.isDropbarDrop(target)) {
             return;
           }
 
-          this._observer = observeResize($el, () =>
-          this.transitionTo(
-          offset($el).bottom -
-          offset(this.dropbar).top +
-          toFloat(css($el, 'marginBottom')),
-          $el));
-
+          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);
 
+          });
         } },
 
 
@@ -6034,13 +6141,13 @@
           return this.dropbar;
         },
 
-        handler(e, _ref11) {let { $el } = _ref11;
+        handler(e) {
           const active = this.getActive();
 
           if (
           matches(this.dropbar, ':hover') &&
-          (active == null ? void 0 : active.$el) === $el &&
-          !this.toggles.some((el) => active.target !== el && matches(el, ':focus')))
+          (active == null ? void 0 : active.$el) === e.target &&
+          !this.toggles.some((el) => active.targetEl !== el && matches(el, ':focus')))
           {
             e.preventDefault();
           }
@@ -6058,8 +6165,8 @@
           return this.dropbar;
         },
 
-        handler(_, _ref12) {let { $el, align } = _ref12;
-          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+        handler(_ref13) {let { target } = _ref13;
+          if (!this.isDropbarDrop(target)) {
             return;
           }
 
@@ -6067,7 +6174,7 @@
 
           const active = this.getActive();
 
-          if (!active || (active == null ? void 0 : active.$el) === $el) {
+          if (!active || (active == null ? void 0 : active.$el) === target) {
             this.transitionTo(0);
           }
         } }],
@@ -6076,7 +6183,7 @@
 
       methods: {
         getActive() {
-          return active$1 && within(active$1.target, this.$el) && active$1;
+          return active && within(active.targetEl, this.$el) && active;
         },
 
         transitionTo(newHeight, el) {
@@ -6106,13 +6213,17 @@
 
         getDropdown(el) {
           return this.$getComponent(el, 'drop') || this.$getComponent(el, 'dropdown');
+        },
+
+        isDropbarDrop(el) {
+          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
@@ -6169,7 +6280,7 @@
 
         registerEvent(this, {
           el: this.swipeTarget,
-          name: pointerDown,
+          name: pointerDown$1,
           passive: true,
           handler(e) {
             if (!isTouch(e)) {
@@ -6179,7 +6290,7 @@
             // Handle Swipe Gesture
             const pos = getEventPos(e);
             const target = 'tagName' in e.target ? e.target : parent(e.target);
-            once(document, pointerUp + " " + pointerCancel + " scroll", (e) => {
+            once(document, pointerUp$1 + " " + pointerCancel + " scroll", (e) => {
               const { x, y } = getEventPos(e);
 
               // swipe
@@ -6286,22 +6397,6 @@
         } },
 
 
-      {
-        name: 'touchstart',
-
-        passive: true,
-
-        el() {
-          return this.panel;
-        },
-
-        handler(_ref8) {let { targetTouches } = _ref8;
-          if (targetTouches.length === 1) {
-            this.clientY = targetTouches[0].clientY;
-          }
-        } },
-
-
       {
         name: 'touchmove',
 
@@ -6317,33 +6412,6 @@
         } },
 
 
-      {
-        name: 'touchmove',
-
-        passive: false,
-
-        el() {
-          return this.panel;
-        },
-
-        handler(e) {
-          if (e.targetTouches.length !== 1) {
-            return;
-          }
-
-          const clientY = e.targetTouches[0].clientY - this.clientY;
-          const { scrollTop, scrollHeight, clientHeight } = this.panel;
-
-          if (
-          clientHeight >= scrollHeight ||
-          scrollTop === 0 && clientY > 0 ||
-          scrollHeight - scrollTop <= clientHeight && clientY < 0)
-          {
-            e.cancelable && e.preventDefault();
-          }
-        } },
-
-
       {
         name: 'show',
 
@@ -6355,7 +6423,6 @@
             addClass(parent(this.panel), this.clsMode);
           }
 
-          css(document.documentElement, 'overflowY', this.overlay ? 'hidden' : '');
           addClass(document.body, this.clsContainer, this.clsFlip);
           css(document.body, 'touch-action', 'pan-y pinch-zoom');
           css(this.$el, 'display', 'block');
@@ -6363,7 +6430,7 @@
           addClass(
           this.panel,
           this.clsSidebarAnimation,
-          this.mode !== 'reveal' ? this.clsMode : '');
+          this.mode === 'reveal' ? '' : this.clsMode);
 
 
           height(document.body); // force reflow
@@ -6400,8 +6467,6 @@
           removeClass(this.$el, this.clsOverlay);
           css(this.$el, 'display', '');
           removeClass(document.body, this.clsContainer, this.clsFlip);
-
-          css(document.documentElement, 'overflowY', '');
         } },
 
 
@@ -6526,6 +6591,14 @@
         offset: 0 },
 
 
+      connected() {
+        registerClick(this);
+      },
+
+      disconnected() {
+        unregisterClick(this);
+      },
+
       methods: {
         async scrollTo(el) {
           el = el && $(el) || document.body;
@@ -6534,20 +6607,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));
@@ -6877,7 +6969,9 @@
         },
 
         handler() {
-          if (!location.hash || scrollTop(window) === 0) {
+          const { scrollingElement } = document;
+
+          if (!location.hash || scrollingElement.scrollTop === 0) {
             return;
           }
 
@@ -6886,13 +6980,11 @@
             const elOffset = offset(this.$el);
 
             if (this.isFixed && intersectRect(targetOffset, elOffset)) {
-              scrollTop(
-              window,
+              scrollingElement.scrollTop =
               targetOffset.top -
               elOffset.height -
               toPx(this.targetOffset, 'height', this.placeholder) -
-              toPx(this.offset, 'height', this.placeholder));
-
+              toPx(this.offset, 'height', this.placeholder);
             }
           });
         } }],
@@ -6990,7 +7082,7 @@
 
 
         {let { scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end } = _ref4;
-          const scroll = scrollTop(window);
+          const scroll = document.scrollingElement.scrollTop;
           const dir = prevScroll <= scroll ? 'down' : 'up';
 
           return {
@@ -7399,7 +7491,7 @@
 
       events: [
       {
-        name: pointerDown,
+        name: pointerDown$1,
 
         filter() {
           return includes(this.mode, 'hover');
@@ -7417,7 +7509,7 @@
           trigger(this.$el, 'focus');
           once(
           document,
-          pointerDown,
+          pointerDown$1,
           () => trigger(this.$el, 'blur'),
           true,
           (e) => !within(e.target, this.$el));
@@ -7510,7 +7602,7 @@
 
 
       {
-        name: 'toggled',
+        name: 'hide show',
 
         self: true,
 
@@ -7518,10 +7610,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');
         } },
 
 
@@ -7616,10 +7706,12 @@
         Video: Video,
         Close: Close,
         Spinner: Spinner,
+        NavParentIcon: NavParentIcon,
         SlidenavNext: Slidenav,
         SlidenavPrevious: Slidenav,
         SearchIcon: Search,
         Marker: IconComponent,
+        NavbarParentIcon: IconComponent,
         NavbarToggleIcon: IconComponent,
         OverlayIcon: IconComponent,
         PaginationNext: IconComponent,
@@ -8109,7 +8201,7 @@
 
         },
 
-        setState(state, animate) {if (animate === void 0) {animate = true;}
+        async setState(state, animate) {if (animate === void 0) {animate = true;}
           state = { filter: { '': '' }, sort: [], ...state };
 
           trigger(this.$el, 'beforeFilter', [this, state]);
@@ -8118,15 +8210,17 @@
           toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state)));
 
 
-          Promise.all(
+          await Promise.all(
           $$(this.target, this.$el).map((target) => {
             const filterFn = () => {
               applyState(state, target, children(target));
               this.$update(this.$el);
             };
             return animate ? this.animate(filterFn, target) : filterFn();
-          })).
-          then(() => trigger(this.$el, 'afterFilter', [this]));
+          }));
+
+
+          trigger(this.$el, 'afterFilter', [this]);
         },
 
         updateState() {
@@ -8416,6 +8510,11 @@
           this.interval && clearInterval(this.interval);
         } } };
 
+    const pointerOptions = { passive: false, capture: true };
+    const pointerDown = 'touchstart mousedown';
+    const pointerMove = 'touchmove mousemove';
+    const pointerUp = 'touchend touchcancel mouseup click input';
+
     var SliderDrag = {
       props: {
         draggable: Boolean },
@@ -8468,7 +8567,17 @@
 
         handler(e) {
           e.preventDefault();
-        } }],
+        } },
+
+
+      {
+        // iOS workaround for slider stopping if swiping fast
+        name: pointerMove + " " + pointerUp,
+        el() {
+          return this.list;
+        },
+        handler: noop,
+        ...pointerOptions }],
 
 
 
@@ -8490,10 +8599,10 @@
             this.prevIndex = this.index;
           }
 
-          on(document, pointerMove, this.move, { passive: false });
+          on(document, pointerMove, this.move, pointerOptions);
 
           // 'input' event is triggered by video controls
-          on(document, pointerUp + " " + pointerCancel + " input", this.end, true);
+          on(document, pointerUp, this.end, pointerOptions);
 
           css(this.list, 'userSelect', 'none');
         },
@@ -8573,8 +8682,8 @@
         },
 
         end() {
-          off(document, pointerMove, this.move, { passive: false });
-          off(document, pointerUp + " " + pointerCancel + " input", this.end, true);
+          off(document, pointerMove, this.move, pointerOptions);
+          off(document, pointerUp, this.end, pointerOptions);
 
           if (this.dragging) {
             this.dragging = null;
@@ -8982,7 +9091,7 @@
 
       events: [
       {
-        name: pointerMove + " " + pointerDown + " keydown",
+        name: pointerMove$1 + " " + pointerDown$1 + " keydown",
 
         handler: 'showControls' },
 
@@ -10637,7 +10746,7 @@
       },
 
       events: {
-        name: pointerDown,
+        name: pointerDown$1,
         passive: false,
         handler: 'init' },
 
@@ -10767,8 +10876,8 @@
           this.placeholder = placeholder;
           this.origin = { target, index: index(placeholder), ...this.pos };
 
-          on(document, pointerMove, this.move);
-          on(document, pointerUp, this.end);
+          on(document, pointerMove$1, this.move);
+          on(document, pointerUp$1, this.end);
 
           if (!this.threshold) {
             this.start(e);
@@ -10804,8 +10913,8 @@
         },
 
         end() {
-          off(document, pointerMove, this.move);
-          off(document, pointerUp, this.end);
+          off(document, pointerMove$1, this.move);
+          off(document, pointerUp$1, this.end);
 
           if (!this.drag) {
             return;
@@ -10874,7 +10983,7 @@
       let last = Date.now();
       trackTimer = setInterval(() => {
         let { x, y } = pos;
-        y += scrollTop(window);
+        y += document.scrollingElement.scrollTop;
 
         const dist = (Date.now() - last) * 0.3;
         last = Date.now();
@@ -10895,7 +11004,7 @@
           }
 
           if (scroll > 0 && scroll < scrollHeight - height) {
-            scrollTop(scrollEl, scroll);
+            scrollEl.scrollTop = scroll;
             return true;
           }
         });
@@ -11040,11 +11149,11 @@
 
           this._unbind = once(
           document, "show keydown " +
-          pointerDown,
+          pointerDown$1,
           this.hide,
           false,
           (e) =>
-          e.type === pointerDown && !within(e.target, this.$el) ||
+          e.type === pointerDown$1 && !within(e.target, this.$el) ||
           e.type === 'keydown' && e.keyCode === 27 ||
           e.type === 'show' && e.detail[0] !== this && e.detail[0].$name === this.$name);
 
@@ -11115,7 +11224,7 @@
 
         // Clicking a button does not give it focus on all browsers and platforms
         // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
-        [pointerDown](e) {
+        [pointerDown$1](e) {
           if (isTouch(e)) {
             this.show();
           }