npm - uikit - Versions diffs - 3.14.3 → 3.14.4-dev.0097ef093 - Mend

uikit 3.14.3 → 3.14.4-dev.0097ef093

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 (88) hide show

package/CHANGELOG.md +25 -0
package/dist/css/uikit-core-rtl.css +100 -31
package/dist/css/uikit-core-rtl.min.css +1 -1
package/dist/css/uikit-core.css +100 -31
package/dist/css/uikit-core.min.css +1 -1
package/dist/css/uikit-rtl.css +103 -46
package/dist/css/uikit-rtl.min.css +1 -1
package/dist/css/uikit.css +103 -46
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 +189 -26
package/dist/js/components/lightbox-panel.min.js +1 -1
package/dist/js/components/lightbox.js +189 -26
package/dist/js/components/lightbox.min.js +1 -1
package/dist/js/components/notification.js +1 -1
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 +1 -1
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 +1 -1
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 +135 -34
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 +801 -617
package/dist/js/uikit-core.min.js +1 -1
package/dist/js/uikit-icons.js +1 -1
package/dist/js/uikit-icons.min.js +1 -1
package/dist/js/uikit.js +801 -617
package/dist/js/uikit.min.js +1 -1
package/package.json +1 -1
package/src/js/core/accordion.js +3 -3
package/src/js/core/alert.js +1 -1
package/src/js/core/drop.js +47 -20
package/src/js/core/height-viewport.js +14 -9
package/src/js/core/navbar.js +11 -9
package/src/js/core/offcanvas.js +1 -47
package/src/js/core/switcher.js +1 -1
package/src/js/mixin/modal.js +90 -4
package/src/js/mixin/position.js +44 -13
package/src/js/mixin/togglable.js +105 -24
package/src/js/util/animation.js +1 -0
package/src/js/util/viewport.js +21 -10
package/src/less/components/drop.less +19 -5
package/src/less/components/dropdown.less +21 -5
package/src/less/components/margin.less +13 -14
package/src/less/components/modal.less +19 -4
package/src/less/components/nav.less +23 -5
package/src/less/components/navbar.less +56 -25
package/src/less/components/offcanvas.less +21 -21
package/src/less/components/position.less +1 -1
package/src/less/components/utility.less +0 -1
package/src/less/theme/dropdown.less +11 -0
package/src/less/theme/nav.less +3 -7
package/src/less/theme/navbar.less +12 -12
package/src/scss/components/drop.scss +19 -5
package/src/scss/components/dropdown.scss +21 -5
package/src/scss/components/margin.scss +13 -14
package/src/scss/components/modal.scss +19 -4
package/src/scss/components/nav.scss +23 -5
package/src/scss/components/navbar.scss +45 -14
package/src/scss/components/offcanvas.scss +21 -21
package/src/scss/components/position.scss +1 -1
package/src/scss/components/utility.scss +0 -1
package/src/scss/mixins-theme.scss +9 -13
package/src/scss/mixins.scss +2 -0
package/src/scss/theme/dropdown.scss +8 -0
package/src/scss/theme/nav.scss +3 -7
package/src/scss/theme/navbar.scss +9 -0
package/src/scss/variables-theme.scss +35 -14
package/src/scss/variables.scss +33 -13
package/tests/drop.html +151 -2
package/tests/dropdown.html +228 -13
package/tests/height-viewport.html +62 -0
package/tests/navbar.html +325 -18
package/tests/offcanvas.html +8 -8
package/tests/sticky-navbar.html +132 -0

package/dist/js/uikit-core.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.3 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.4-dev.0097ef093 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -868,6 +868,7 @@
     }
     function transition(element, props, duration, timing) {if (duration === void 0) {duration = 400;}if (timing === void 0) {timing = 'linear';}
+      duration = Math.round(duration);
       return Promise.all(
       toNodes(element).map(
       (element) =>
@@ -1887,7 +1888,7 @@
       return clamp((scrollTop - start) / (end - start));
     }
-    function scrollParents(element, overflowRe, scrollable) {if (overflowRe === void 0) {overflowRe = /auto|scroll|hidden/;}if (scrollable === void 0) {scrollable = false;}
+    function scrollParents(element, overflowRe, scrollable) {if (overflowRe === void 0) {overflowRe = /auto|scroll|hidden|clip/;}if (scrollable === void 0) {scrollable = false;}
       const scrollEl = scrollingElement(element);
       let ancestors = parents(element).reverse();
@@ -1910,18 +1911,33 @@
     }
     function offsetViewport(scrollElement) {
-      let viewportElement = getViewport$1(scrollElement);
+      const window = toWindow(scrollElement);
+      const {
+        document: { body, documentElement } } =
+      window;
+      let viewportElement =
+      scrollElement === scrollingElement(scrollElement) || scrollElement === body ?
+      window :
+      scrollElement;
+      const { visualViewport } = window;
+      if (isWindow(viewportElement) && visualViewport) {
+        let { height, width, scale, pageTop: top, pageLeft: left } = visualViewport;
+        height = Math.round(height * scale);
+        width = Math.round(width * scale);
+        return { height, width, top, left, bottom: top + height, right: left + width };
+      }
       let rect = offset(viewportElement);
       for (let [prop, dir, start, end] of [
       ['width', 'x', 'left', 'right'],
       ['height', 'y', 'top', 'bottom']])
       {
-        if (!isWindow(viewportElement)) {
-          rect[start] += toFloat(css(viewportElement, "border" + ucfirst(start) + "Width"));
-        } else {
+        if (isWindow(viewportElement)) {
           // iOS 12 returns <body> as scrollingElement
-          viewportElement = viewportElement.document.documentElement;
+          viewportElement = documentElement;
+        } else {
+          rect[start] += toFloat(css(viewportElement, "border" + ucfirst(start) + "Width"));
         }
         rect[prop] = rect[dir] = viewportElement["client" + ucfirst(prop)];
         rect[end] = rect[prop] + rect[start];
@@ -1933,10 +1949,6 @@
       return toWindow(element).document.scrollingElement;
     }
-    function getViewport$1(scrollElement) {
-      return scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
-    }
     const dirs = [
     ['width', 'x', 'left', 'right'],
     ['height', 'y', 'top', 'bottom']];
@@ -2949,7 +2961,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.14.3';
+    UIkit.version = '3.14.4-dev.0097ef093';
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3058,7 +3070,7 @@
         initProps: {
           overflow: '',
-          height: '',
+          maxHeight: '',
           paddingTop: '',
           paddingBottom: '',
           marginTop: '',
@@ -3068,7 +3080,7 @@
         hideProps: {
           overflow: 'hidden',
-          height: 0,
+          maxHeight: 0,
           paddingTop: 0,
           paddingBottom: 0,
           marginTop: 0,
@@ -3083,7 +3095,7 @@
         },
         hasTransition(_ref2) {let { animation } = _ref2;
-          return this.hasAnimation && animation[0] === true;
+          return startsWith(animation[0], 'slide');
         } },
@@ -3098,18 +3110,13 @@
               return Promise.reject();
             }
-            if (!animate) {
-              Animation.cancel(el);
-              Transition.cancel(el);
-            }
             const promise = (
             isFunction(animate) ?
             animate :
             animate === false || !this.hasAnimation ?
-            this._toggle :
+            toggleInstant(this) :
             this.hasTransition ?
-            toggleHeight(this) :
+            toggleTransition(this) :
             toggleAnimation(this))(
             el, show);
@@ -3173,7 +3180,25 @@
-    function toggleHeight(_ref3)
+    function toggleInstant(_ref3) {let { _toggle } = _ref3;
+      return (el, show) => {
+        Animation.cancel(el);
+        Transition.cancel(el);
+        return _toggle(el, show);
+      };
+    }
+    function toggleTransition(cmp) {
+      switch (cmp.animation[0]) {
+        case 'slide-left':
+          return slideHorizontal(cmp);
+        case 'slide-right':
+          return slideHorizontal(cmp, true);}
+      return slide(cmp);
+    }
+    function slide(_ref4)
@@ -3181,14 +3206,17 @@
-    {let { isToggled, duration, velocity, initProps, hideProps, transition, _toggle } = _ref3;
+    {let { isToggled, duration, velocity, initProps, hideProps, transition, _toggle } = _ref4;
       return (el, show) => {
         const inProgress = Transition.inProgress(el);
-        const inner = el.hasChildNodes() ?
+        const inner =
+        !inProgress && el.hasChildNodes() ?
         toFloat(css(el.firstElementChild, 'marginTop')) +
         toFloat(css(el.lastElementChild, 'marginBottom')) :
         0;
-        const currentHeight = isVisible(el) ? height(el) + (inProgress ? 0 : inner) : 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);
@@ -3196,34 +3224,97 @@
           _toggle(el, true);
         }
-        height(el, '');
+        css(el, 'maxHeight', '');
         // Update child components first
         fastdom.flush();
-        const endHeight = height(el) + (inProgress ? 0 : inner);
-        duration = velocity * el.offsetHeight + duration;
+        const endHeight = toFloat(css(el, 'height')) + inner;
+        duration = velocity * endHeight + duration;
-        height(el, currentHeight);
+        css(el, { ...props, maxHeight: currentHeight });
         return (
         show ?
         Transition.start(
         el,
-        { ...initProps, overflow: 'hidden', height: endHeight },
-        Math.round(duration * (1 - currentHeight / endHeight)),
+        { ...initProps, overflow: 'hidden', maxHeight: endHeight },
+        duration * (1 - currentHeight / endHeight),
         transition) :
         Transition.start(
         el,
         hideProps,
-        Math.round(duration * (currentHeight / endHeight)),
+        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');
+        if (!isToggled(el)) {
+          _toggle(el, true);
+        }
+        const width = toFloat(css(el, 'width'));
+        duration = velocity * width + duration;
+        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 });
+        return (
+        show ?
+        Transition.start(
+        el,
+        {
+          clipPath: useClipPath ? "polygon(0 0,100% 0,100% 100%,0 100%)" : '',
+          marginLeft: 0 },
+        duration * (1 - percent / 100),
+        transition) :
+        Transition.start(
+        el,
+        {
+          clipPath: useClipPath ?
+          right ? "polygon(0 0,0 0,0 100%,0 100%)" : "polygon(100% 0,100% 0,100% 100%,100% 100%)" :
+          '',
+          marginLeft: (right ? 1 : -1) * width },
+        duration * (percent / 100),
+        transition).
+        then(() => _toggle(el, false))).
+        then(() => {
+          css(scrollElement, 'overflowX', '');
+          css(el, { clipPath: '', marginLeft: '' });
+        });
+      };
+    }
     function toggleAnimation(cmp) {
       return (el, show) => {
         Animation.cancel(el);
@@ -3257,7 +3348,7 @@
       data: {
         targets: '> *',
         active: false,
-        animation: [true],
+        animation: ['slide'],
         collapsible: true,
         multiple: false,
         clsOpen: 'uk-open',
@@ -3367,7 +3458,7 @@
               }
               hide(content, false);
-              await toggleHeight(this)(el._wrapper, show);
+              await slide(this)(el._wrapper, show);
               hide(content, !show);
               delete el._wrapper;
@@ -3401,7 +3492,7 @@
       data: {
-        animation: [true],
+        animation: ['slide'],
         selClose: '.uk-alert-close',
         duration: 150,
         hideProps: { opacity: 0, ...Togglable.data.hideProps } },
@@ -3587,23 +3678,17 @@
       connected() {
         this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
-        this.axis = includes(['top', 'bottom'], this.pos[0]) ? 'y' : 'x';
+        [this.dir, this.align] = this.pos;
+        this.axis = includes(['top', 'bottom'], this.dir) ? 'y' : 'x';
       },
       methods: {
         positionAt(element, target, boundary) {
-          const [dir, align] = this.pos;
-          let offset = toPx(
-          this.offset === false ? getCssVar('position-offset', element) : this.offset,
-          this.axis === 'x' ? 'width' : 'height',
-          element);
-          offset = [includes(['left', 'top'], dir) ? -offset : +offset, 0];
+          let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
           const attach = {
-            element: [flipPosition(dir), align],
-            target: [dir, align] };
+            element: [flipPosition(this.dir), this.align],
+            target: [this.dir, this.align] };
           if (this.axis === 'y') {
@@ -3613,71 +3698,81 @@
             offset = offset.reverse();
           }
+          // Ensure none positioned element does not generate scrollbars
+          const elDim = dimensions(element);
+          css(element, { top: -elDim.height, left: -elDim.width });
           positionAt(element, target, {
             attach,
             offset,
             boundary,
             flip: this.flip,
-            viewportOffset: toPx(getCssVar('position-viewport-offset', element)) });
+            viewportOffset: this.getViewportOffset(element) });
-        } } };
+        },
-    let active$1;
+        getPositionOffset(element) {
+          return (
+            toPx(
+            this.offset === false ? getCssVar('position-offset', element) : this.offset,
+            this.axis === 'x' ? 'width' : 'height',
+            element) * (
+            includes(['left', 'top'], this.dir) ? -1 : 1));
-    var drop = {
-      mixins: [Container, Lazyload, Position, Togglable],
+        },
-      args: 'pos',
+        getShiftOffset(element) {
+          return includes(['center', 'justify', 'stretch'], this.align) ?
+          0 :
+          toPx(
+          getCssVar('position-shift-offset', element),
+          this.axis === 'y' ? 'width' : 'height',
+          element) * (
+          includes(['left', 'top'], this.align) ? 1 : -1);
+        },
+        getViewportOffset(element) {
+          return toPx(getCssVar('position-viewport-offset', element));
+        } } };
+    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 },
+        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 },
+        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);
         }
       },
@@ -3686,127 +3781,484 @@
         name: 'click',
         delegate() {
-          return "." + this.clsDrop + "-close";
+          return this.selClose;
         },
         handler(e) {
           e.preventDefault();
-          this.hide(false);
+          this.hide();
         } },
       {
-        name: 'click',
+        name: 'toggle',
-        delegate() {
-          return 'a[href^="#"]';
-        },
+        self: true,
-        handler(_ref) {let { defaultPrevented, current: { hash } } = _ref;
-          if (!defaultPrevented && hash && !within(hash, this.$el)) {
-            this.hide(false);
+        handler(e) {
+          if (e.defaultPrevented) {
+            return;
           }
-        } },
+          e.preventDefault();
-      {
-        name: 'beforescroll',
-        handler() {
-          this.hide(false);
+          if (this.isToggled() === includes(active$1, this)) {
+            this.toggle();
+          }
         } },
       {
-        name: 'toggle',
+        name: 'beforeshow',
         self: true,
-        handler(e, toggle) {
-          e.preventDefault();
+        handler(e) {
+          if (includes(active$1, this)) {
+            return false;
+          }
-          if (this.isToggled()) {
-            this.hide(false);
+          if (!this.stack && active$1.length) {
+            Promise.all(active$1.map((modal) => modal.hide())).then(this.show);
+            e.preventDefault();
           } else {
-            this.show(toggle == null ? void 0 : toggle.$el, false);
+            active$1.push(this);
           }
         } },
       {
-        name: 'toggleshow',
+        name: 'show',
         self: true,
-        handler(e, toggle) {
-          e.preventDefault();
-          this.show(toggle == null ? void 0 : toggle.$el);
-        } },
-      {
-        name: 'togglehide',
+        handler() {
+          once(
+          this.$el,
+          'hide',
+          on(document, 'focusin', (e) => {
+            if (last(active$1) === this && !within(e.target, this.$el)) {
+              this.$el.focus();
+            }
+          }));
-        self: true,
-        handler(e) {
-          e.preventDefault();
-          if (!matches(this.$el, ':focus,:hover')) {
-            this.hide();
+          if (this.overlay) {
+            once(this.$el, 'hide', preventOverscroll(this.$el));
+            once(this.$el, 'hide', preventBackgroundScroll());
           }
-        } },
+          if (this.stack) {
+            css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active$1.length);
+          }
-      {
-        name: pointerEnter + " focusin",
+          addClass(document.documentElement, this.clsPage);
-        filter() {
-          return includes(this.mode, 'hover');
-        },
+          if (this.bgClose) {
+            once(
+            this.$el,
+            'hide',
+            on(document, pointerDown, (_ref3) => {let { target } = _ref3;
+              if (
+              last(active$1) !== this ||
+              this.overlay && !within(target, this.$el) ||
+              within(target, this.panel))
+              {
+                return;
+              }
-        handler(e) {
-          if (!isTouch(e)) {
-            this.clearTimers();
-          }
-        } },
+              once(
+              document,
+              pointerUp + " " + pointerCancel + " scroll",
+              (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
+                if (
+                !defaultPrevented &&
+                type === pointerUp &&
+                target === newTarget)
+                {
+                  this.hide();
+                }
+              },
+              true);
+            }),
+            { self: true });
-      {
-        name: pointerLeave + " focusout",
+          }
-        filter() {
-          return includes(this.mode, 'hover');
-        },
+          if (this.escClose) {
+            once(
+            this.$el,
+            'hide',
+            on(document, 'keydown', (e) => {
+              if (e.keyCode === 27 && last(active$1) === this) {
+                this.hide();
+              }
+            }),
+            { self: true });
-        handler(e) {
-          if (!isTouch(e) && e.relatedTarget) {
-            this.hide();
           }
         } },
       {
-        name: 'toggled',
+        name: 'shown',
         self: true,
-        handler(e, toggled) {
-          if (!toggled) {
-            return;
+        handler() {
+          if (!isFocusable(this.$el)) {
+            attr(this.$el, 'tabindex', '-1');
           }
-          this.clearTimers();
-          this.position();
+          if (!$(':focus', this.$el)) {
+            this.$el.focus();
+          }
         } },
       {
-        name: 'show',
+        name: 'hidden',
         self: true,
         handler() {
-          active$1 = this;
+          if (includes(active$1, this)) {
+            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)) {
+            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());
+    }
+    function preventBackgroundScroll() {
+      const { body, documentElement } = document;
+      css(body, {
+        overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
+        touchAction: 'none' });
+      css(documentElement, 'overflowY', 'hidden');
+      return () => {
+        css(documentElement, 'overflowY', '');
+        css(body, { overflowY: '', touchAction: '' });
+      };
+    }
+    function filterChildren(el, fn) {
+      const children = [];
+      apply(el, (node) => {
+        if (fn(node)) {
+          children.push(node);
+        }
+      });
+      return children;
+    }
+    let active;
+    var drop = {
+      mixins: [Container, Lazyload, Position, Togglable],
+      args: 'pos',
+      props: {
+        mode: 'list',
+        toggle: Boolean,
+        boundary: Boolean,
+        boundaryAlign: Boolean,
+        delayShow: Number,
+        delayHide: Number,
+        display: String,
+        clsDrop: String,
+        animateOut: Boolean,
+        bgScroll: 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,
+        bgScroll: true },
+      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.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 = null;
+        }
+      },
+      events: [
+      {
+        name: 'click',
+        delegate() {
+          return "." + this.clsDrop + "-close";
+        },
+        handler(e) {
+          e.preventDefault();
+          this.hide(false);
+        } },
+      {
+        name: 'click',
+        delegate() {
+          return 'a[href^="#"]';
+        },
+        handler(_ref) {let { defaultPrevented, current: { hash } } = _ref;
+          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);
+        } },
+      {
+        name: 'togglehide',
+        self: true,
+        handler(e) {
+          e.preventDefault();
+          if (!matches(this.$el, ':focus,:hover')) {
+            this.hide();
+          }
+        } },
+      {
+        name: pointerEnter + " focusin",
+        filter() {
+          return includes(this.mode, 'hover');
+        },
+        handler(e) {
+          if (!isTouch(e)) {
+            this.clearTimers();
+          }
+        } },
+      {
+        name: pointerLeave + " focusout",
+        filter() {
+          return includes(this.mode, 'hover');
+        },
+        handler(e) {
+          if (!isTouch(e) && e.relatedTarget) {
+            this.hide();
+          }
+        } },
+      {
+        name: 'toggled',
+        self: true,
+        handler(e, toggled) {
+          if (!toggled) {
+            return;
+          }
+          this.clearTimers();
+          this.position();
+        } },
+      {
+        name: 'show',
+        self: true,
+        handler() {
+          active = this;
           this.tracker.init();
@@ -3839,7 +4291,11 @@
             }
           }),
-          ...(this.display === 'static' ?
+          ...(this.bgScroll ?
+          [] :
+          [preventOverscroll(this.$el), preventBackgroundScroll()]),
+          ...(this.display === 'static' && this.align !== 'stretch' ?
           [] :
           (() => {
             const handler = () => this.$emit();
@@ -3876,14 +4332,14 @@
         handler(_ref4) {let { target } = _ref4;
           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();
         } }],
@@ -3900,7 +4356,7 @@
       methods: {
         show(target, delay) {if (target === void 0) {target = this.target;}if (delay === void 0) {delay = true;}
           if (this.isToggled() && target && this.target && target !== this.target) {
-            this.hide(false);
+            this.hide(false, false);
           }
           this.target = target;
@@ -3911,16 +4367,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);
+            while (active && prev !== active && !within(this.$el, active.$el)) {
+              prev = active;
+              active.hide(false, false);
             }
           }
@@ -3934,8 +4390,8 @@
         },
-        hide(delay) {if (delay === void 0) {delay = true;}
-          const hide = () => this.toggleElement(this.$el, false, false);
+        hide(delay, animate) {if (delay === void 0) {delay = true;}if (animate === void 0) {animate = true;}
+          const hide = () => this.toggleElement(this.$el, false, this.animateOut && animate);
           this.clearTimers();
@@ -3961,34 +4417,57 @@
         },
         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');
           const boundary = query(this.boundary, this.$el);
-          const scrollParentOffset = offset(
-          scrollParents(boundary && this.boundaryAlign ? boundary : this.$el)[0]);
+          const target = boundary && this.boundaryAlign ? boundary : this.target;
+          const [scrollParent] = scrollParents(
+          boundary && this.boundaryAlign ? boundary : this.$el);
+          const scrollParentOffset = offset(scrollParent);
           const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
+          const viewportOffset = this.getViewportOffset(this.$el);
           css(this.$el, 'maxWidth', '');
-          const maxWidth =
-          scrollParentOffset.width -
-          2 * toPx(getCssVar('position-viewport-offset', this.$el));
+          const maxWidth = scrollParentOffset.width - 2 * viewportOffset;
-          if (this.pos[1] === 'justify') {
+          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 * toPx(getCssVar('position-viewport-offset', this.$el))));
+            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) {
             addClass(this.$el, this.clsDrop + "-stack");
@@ -3996,11 +4475,7 @@
           css(this.$el, 'maxWidth', maxWidth);
-          this.positionAt(
-          this.$el,
-          boundary && this.boundaryAlign ? boundary : this.target,
-          boundary);
+          this.positionAt(this.$el, target, boundary);
         } } };
@@ -4485,7 +4960,7 @@
       resizeTargets() {
         // check for offsetTop change
-        return [this.$el, document.documentElement];
+        return [this.$el, ...scrollParents(this.$el, /auto|scroll/)];
       },
       update: {
@@ -4497,21 +4972,25 @@
           let minHeight = '';
           const box = boxModelAdjust(this.$el, 'height', 'content-box');
+          const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
+          const { height: viewportHeight } = offsetViewport(scrollElement);
           if (this.expand) {
             minHeight = Math.max(
-            height(window) - (
-            dimensions(document.documentElement).height -
-            dimensions(this.$el).height) -
+            viewportHeight - (
+            dimensions(scrollElement).height - dimensions(this.$el).height) -
             box,
             0);
           } else {
             // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-            minHeight = 'calc(100vh';
+            minHeight = "calc(" + (
+            document.scrollingElement === scrollElement ? '100vh' : viewportHeight + "px");
             if (this.offsetTop) {
-              const { top } = offset(this.$el);
-              minHeight += top > 0 && top < height(window) / 2 ? " - " + top + "px" : '';
+              const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+              minHeight += top > 0 && top < viewportHeight / 2 ? " - " + top + "px" : '';
             }
             if (this.offsetBottom === true) {
@@ -5027,412 +5506,161 @@
         const value = data(sourceEl, prop);
         if (value) {
           attr(targetEl, prop.replace(/^(data-)+/, ''), value);
-        }
-      });
-    }
-    function getImageFromElement(el, src, sources) {
-      const img = new Image();
-      wrapInPicture(img, sources);
-      setSourceProps(el, img);
-      img.onload = () => {
-        setSrcAttrs(el, img.currentSrc);
-      };
-      attr(img, 'src', src);
-      return img;
-    }
-    function wrapInPicture(img, sources) {
-      sources = parseSources(sources);
-      if (sources.length) {
-        const picture = fragment('<picture>');
-        for (const attrs of sources) {
-          const source = fragment('<source>');
-          attr(source, attrs);
-          append(picture, source);
-        }
-        append(picture, img);
-      }
-    }
-    function parseSources(sources) {
-      if (!sources) {
-        return [];
-      }
-      if (startsWith(sources, '[')) {
-        try {
-          sources = JSON.parse(sources);
-        } catch (e) {
-          sources = [];
-        }
-      } else {
-        sources = parseOptions(sources);
-      }
-      if (!isArray(sources)) {
-        sources = [sources];
-      }
-      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);
+    function getImageFromElement(el, src, sources) {
+      const img = new Image();
-          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;
-              }
+      wrapInPicture(img, sources);
+      setSourceProps(el, img);
+      img.onload = () => {
+        setSrcAttrs(el, img.currentSrc);
+      };
+      attr(img, 'src', src);
+      return img;
+    }
-              once(
-              document,
-              pointerUp + " " + pointerCancel + " scroll",
-              (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
-                if (
-                !defaultPrevented &&
-                type === pointerUp &&
-                target === newTarget)
-                {
-                  this.hide();
-                }
-              },
-              true);
+    function wrapInPicture(img, sources) {
+      sources = parseSources(sources);
-            }),
-            { self: true });
+      if (sources.length) {
+        const picture = fragment('<picture>');
+        for (const attrs of sources) {
+          const source = fragment('<source>');
+          attr(source, attrs);
+          append(picture, source);
+        }
+        append(picture, img);
+      }
+    }
-          }
+    function parseSources(sources) {
+      if (!sources) {
+        return [];
+      }
-          if (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.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) {
+      if (isString(value)) {
+        if (startsWith(value, '@')) {
+          const name = "breakpoint-" + value.substr(1);
+          value = toFloat(getCssVar(name));
+        } else if (isNaN(value)) {
+          return value;
+        }
+      }
+      return value && isNumeric(value) ? "(min-width: " + value + "px)" : '';
+    }
+    var leader = {
+      mixins: [Class, Media, Resize],
-      methods: {
-        toggle() {
-          return this.isToggled() ? this.hide() : this.show();
-        },
+      props: {
+        fill: String },
-        show() {
-          if (this.container && parent(this.$el) !== this.container) {
-            append(this.container, this.$el);
-            return new Promise((resolve) =>
-            requestAnimationFrame(() => this.show().then(resolve)));
-          }
+      data: {
+        fill: '',
+        clsWrapper: 'uk-leader-fill',
+        clsHide: 'uk-leader-hide',
+        attrFill: 'data-fill' },
-          return this.toggleElement(this.$el, true, animate(this));
-        },
-        hide() {
-          return this.toggleElement(this.$el, false, animate(this));
-        } } };
+      computed: {
+        fill(_ref) {let { fill } = _ref;
+          return fill || getCssVar('leader-fill-content');
+        } },
+      connected() {
+        [this.wrapper] = wrapInner(this.$el, "<span class=\"" + this.clsWrapper + "\">");
+      },
-    function animate(_ref5) {let { transitionElement, _toggle } = _ref5;
-      return (el, show) =>
-      new Promise((resolve, reject) =>
-      once(el, 'show hide', () => {
-        el._reject == null ? void 0 : el._reject();
-        el._reject = reject;
+      disconnected() {
+        unwrap(this.wrapper.childNodes);
+      },
-        _toggle(el, show);
+      update: {
+        read() {
+          const width = Math.trunc(this.$el.offsetWidth / 2);
-        const off = once(
-        transitionElement,
-        'transitionstart',
-        () => {
-          once(transitionElement, 'transitionend transitioncancel', resolve, {
-            self: true });
+          return {
+            width,
+            fill: this.fill,
+            hide: !this.matchMedia };
-          clearTimeout(timer);
         },
-        { self: true });
-        const timer = setTimeout(() => {
-          off();
-          resolve();
-        }, toMs(css(transitionElement, 'transitionDuration')));
-      })).
-      then(() => delete el._reject);
-    }
+        write(_ref2) {let { width, fill, hide } = _ref2;
+          toggleClass(this.wrapper, this.clsHide, hide);
+          attr(this.wrapper, this.attrFill, new Array(width).join(fill));
+        },
-    function toMs(time) {
-      return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
-    }
+        events: ['resize'] } };
     var modal = {
       install,
@@ -5845,8 +6073,8 @@
           return this.dropbar;
         },
-        handler(_, _ref9) {let { $el } = _ref9;
-          if (!hasClass($el, this.clsDrop)) {
+        handler(_, _ref9) {let { $el, align } = _ref9;
+          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
             return;
           }
@@ -5869,8 +6097,8 @@
           return this.dropbar;
         },
-        handler(_, _ref10) {let { $el } = _ref10;
-          if (!hasClass($el, this.clsDrop)) {
+        handler(_, _ref10) {let { $el, align } = _ref10;
+          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
             return;
           }
@@ -5920,8 +6148,8 @@
           return this.dropbar;
         },
-        handler(_, _ref12) {let { $el } = _ref12;
-          if (!hasClass($el, this.clsDrop)) {
+        handler(_, _ref12) {let { $el, align } = _ref12;
+          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
             return;
           }
@@ -5938,7 +6166,7 @@
       methods: {
         getActive() {
-          return active$1 && within(active$1.target, this.$el) && active$1;
+          return active && within(active.target, this.$el) && active;
         },
         transitionTo(newHeight, el) {
@@ -5947,7 +6175,7 @@
           el = oldHeight < newHeight && el;
-          css(el, 'clip', "rect(0," + el.offsetWidth + "px," + oldHeight + "px,0)");
+          css(el, 'clipPath', "polygon(0 0,100% 0,100% " + oldHeight + "px,0 " + oldHeight + "px)");
           height(dropbar, oldHeight);
@@ -5956,12 +6184,14 @@
           Transition.start(dropbar, { height: newHeight }, this.duration),
           Transition.start(
           el,
-          { clip: "rect(0," + el.offsetWidth + "px," + newHeight + "px,0)" },
+          {
+            clipPath: "polygon(0 0,100% 0,100% " + newHeight + "px,0 " + newHeight + "px)" },
           this.duration)]).
           catch(noop).
-          then(() => css(el, { clip: '' }));
+          then(() => css(el, { clipPath: '' }));
         },
         getDropdown(el) {
@@ -6146,22 +6376,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',
@@ -6177,33 +6391,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',
@@ -6215,7 +6402,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');
@@ -6223,7 +6409,7 @@
           addClass(
           this.panel,
           this.clsSidebarAnimation,
-          this.mode !== 'reveal' ? this.clsMode : '');
+          this.mode === 'reveal' ? '' : this.clsMode);
           height(document.body); // force reflow
@@ -6260,8 +6446,6 @@
           removeClass(this.$el, this.clsOverlay);
           css(this.$el, 'display', '');
           removeClass(document.body, this.clsContainer, this.clsFlip);
-          css(document.documentElement, 'overflowY', '');
         } },
@@ -7066,7 +7250,7 @@
           watch(connects) {
             if (this.swiping) {
-              css(connects, 'touch-action', 'pan-y pinch-zoom');
+              css(connects, 'touchAction', 'pan-y pinch-zoom');
             }
             const index = this.index();