npm - uikit - Versions diffs - 3.14.2-dev.e270e98f7 → 3.14.3-dev.5325d42a0 - Mend

uikit 3.14.2-dev.e270e98f7 → 3.14.3-dev.5325d42a0

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

package/CHANGELOG.md +30 -0
package/build/util.js +8 -2
package/dist/css/uikit-core-rtl.css +93 -21
package/dist/css/uikit-core-rtl.min.css +1 -1
package/dist/css/uikit-core.css +93 -21
package/dist/css/uikit-core.min.css +1 -1
package/dist/css/uikit-rtl.css +99 -33
package/dist/css/uikit-rtl.min.css +1 -1
package/dist/css/uikit.css +99 -33
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 +106 -17
package/dist/js/components/lightbox-panel.min.js +1 -1
package/dist/js/components/lightbox.js +106 -17
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 +71 -36
package/dist/js/components/parallax.min.js +1 -1
package/dist/js/components/slider-parallax.js +55 -35
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 +55 -35
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 +142 -36
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 +276 -129
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 +346 -164
package/dist/js/uikit.min.js +1 -1
package/package.json +11 -11
package/src/js/components/parallax.js +16 -1
package/src/js/core/accordion.js +3 -3
package/src/js/core/alert.js +1 -1
package/src/js/core/drop.js +47 -18
package/src/js/core/height-viewport.js +15 -11
package/src/js/core/navbar.js +19 -18
package/src/js/core/scrollspy.js +4 -0
package/src/js/core/toggle.js +9 -8
package/src/js/mixin/parallax.js +54 -34
package/src/js/mixin/position.js +36 -20
package/src/js/mixin/togglable.js +110 -19
package/src/js/util/animation.js +1 -0
package/src/js/util/dom.js +4 -3
package/src/js/util/position.js +24 -22
package/src/js/util/viewport.js +7 -8
package/src/less/components/drop.less +19 -4
package/src/less/components/dropdown.less +21 -4
package/src/less/components/margin.less +13 -14
package/src/less/components/modal.less +19 -4
package/src/less/components/nav.less +1 -1
package/src/less/components/navbar.less +60 -19
package/src/less/components/offcanvas.less +21 -21
package/src/less/components/position.less +1 -1
package/src/less/components/sticky.less +7 -0
package/src/less/components/tooltip.less +1 -0
package/src/less/components/utility.less +1 -2
package/src/less/theme/dropdown.less +11 -0
package/src/less/theme/navbar.less +10 -10
package/src/scss/components/drop.scss +19 -4
package/src/scss/components/dropdown.scss +21 -4
package/src/scss/components/margin.scss +13 -14
package/src/scss/components/modal.scss +19 -4
package/src/scss/components/nav.scss +1 -1
package/src/scss/components/navbar.scss +49 -8
package/src/scss/components/offcanvas.scss +21 -21
package/src/scss/components/position.scss +1 -1
package/src/scss/components/sticky.scss +7 -0
package/src/scss/components/tooltip.scss +1 -0
package/src/scss/components/utility.scss +1 -2
package/src/scss/mixins-theme.scss +8 -10
package/src/scss/mixins.scss +2 -0
package/src/scss/theme/dropdown.scss +8 -0
package/src/scss/theme/navbar.scss +7 -0
package/src/scss/variables-theme.scss +26 -11
package/src/scss/variables.scss +24 -11
package/tests/drop.html +165 -4
package/tests/dropdown.html +234 -13
package/tests/height-viewport.html +62 -0
package/tests/navbar.html +333 -64
package/tests/offcanvas.html +8 -8
package/tests/sticky-navbar.html +132 -0
package/tests/sticky-parallax.html +2 -1
package/tests/sticky.html +5 -4

package/dist/js/uikit.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.2-dev.e270e98f7 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.3-dev.5325d42a0 | 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) =>
@@ -1182,14 +1183,15 @@
     }
     function empty(element) {
-      return replaceChildren(element, '');
+      element = $(element);
+      element.innerHTML = '';
+      return element;
     }
     function html(parent, html) {
-      return isUndefined(html) ? $(parent).innerHTML : replaceChildren(parent, html);
+      return isUndefined(html) ? $(parent).innerHTML : append(empty(parent), html);
     }
-    const replaceChildren = applyFn('replaceChildren');
     const prepend = applyFn('prepend');
     const append = applyFn('append');
     const before = applyFn('before');
@@ -1886,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();
@@ -1916,21 +1918,20 @@
       ['width', 'x', 'left', 'right'],
       ['height', 'y', 'top', 'bottom']])
       {
-        if (!isWindow(getViewport$1(viewportElement))) {
+        if (!isWindow(viewportElement)) {
           rect[start] += toFloat(css(viewportElement, "border" + ucfirst(start) + "Width"));
+        } else {
+          // iOS 12 returns <body> as scrollingElement
+          viewportElement = viewportElement.document.documentElement;
         }
-        rect[prop] = rect[dir] =
-        viewportElement[(isWindow(viewportElement) ? 'inner' : 'client') + ucfirst(prop)];
+        rect[prop] = rect[dir] = viewportElement["client" + ucfirst(prop)];
         rect[end] = rect[prop] + rect[start];
       }
       return rect;
     }
     function scrollingElement(element) {
-      const {
-        document: { scrollingElement } } =
-      toWindow(element);
-      return scrollingElement;
+      return toWindow(element).document.scrollingElement;
     }
     function getViewport$1(scrollElement) {
@@ -1984,6 +1985,10 @@
       return position;
     }
+    function moveBy(start, end, dim) {
+      return start === 'center' ? dim / 2 : start === end ? dim : 0;
+    }
     function attachToWithFlip(element, target, options) {
       const position = attachTo(element, target, options);
       const targetDim = offset(target);
@@ -1994,7 +1999,7 @@
         offset: elOffset,
         boundary,
         viewport,
-        viewportPadding } =
+        viewportOffset } =
       options;
       let viewports = scrollParents(element);
@@ -2015,9 +2020,9 @@
         viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
-        if (viewportPadding) {
-          viewport[start] += viewportPadding;
-          viewport[end] -= viewportPadding;
+        if (viewportOffset) {
+          viewport[start] += viewportOffset;
+          viewport[end] -= viewportOffset;
         }
         if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
@@ -2074,19 +2079,21 @@
               return false;
             }
-            const newPos = attachToWithFlip(element, target, {
-              ...options,
-              attach: {
-                element: elAttach.map(flipDir).reverse(),
-                target: targetAttach.map(flipDir).reverse() },
+            if (flip === true || includes(flip, dirs[1 - i][1])) {
+              const newPos = attachToWithFlip(element, target, {
+                ...options,
+                attach: {
+                  element: elAttach.map(flipDir).reverse(),
+                  target: targetAttach.map(flipDir).reverse() },
-              offset: elOffset.reverse(),
-              flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
-              recursion: true });
+                offset: elOffset.reverse(),
+                flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
+                recursion: true });
-            if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
-              return newPos;
+              if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
+                return newPos;
+              }
             }
           }
@@ -2107,10 +2114,6 @@
       return offsetPosition;
     }
-    function moveBy(start, end, dim) {
-      return start === 'center' ? dim / 2 : start === 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) {
@@ -2176,7 +2179,6 @@
         isTag: isTag,
         empty: empty,
         html: html,
-        replaceChildren: replaceChildren,
         prepend: prepend,
         append: append,
         before: before,
@@ -2948,7 +2950,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.14.2-dev.e270e98f7';
+    UIkit.version = '3.14.3-dev.5325d42a0';
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3057,7 +3059,7 @@
         initProps: {
           overflow: '',
-          height: '',
+          maxHeight: '',
           paddingTop: '',
           paddingBottom: '',
           marginTop: '',
@@ -3067,7 +3069,7 @@
         hideProps: {
           overflow: 'hidden',
-          height: 0,
+          maxHeight: 0,
           paddingTop: 0,
           paddingBottom: 0,
           marginTop: 0,
@@ -3082,7 +3084,7 @@
         },
         hasTransition(_ref2) {let { animation } = _ref2;
-          return this.hasAnimation && animation[0] === true;
+          return startsWith(animation[0], 'slide');
         } },
@@ -3097,13 +3099,18 @@
               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);
@@ -3167,7 +3174,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$1(cmp);
+    }
+    function slide$1(_ref4)
@@ -3175,14 +3200,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);
@@ -3190,34 +3218,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);
@@ -3251,7 +3342,7 @@
       data: {
         targets: '> *',
         active: false,
-        animation: [true],
+        animation: ['slide'],
         collapsible: true,
         multiple: false,
         clsOpen: 'uk-open',
@@ -3361,7 +3452,7 @@
               }
               hide(content, false);
-              await toggleHeight(this)(el._wrapper, show);
+              await slide$1(this)(el._wrapper, show);
               hide(content, !show);
               delete el._wrapper;
@@ -3395,7 +3486,7 @@
       data: {
-        animation: [true],
+        animation: ['slide'],
         selClose: '.uk-alert-close',
         duration: 150,
         hideProps: { opacity: 0, ...Togglable.data.hideProps } },
@@ -3576,49 +3667,66 @@
       data: {
         pos: "bottom-" + (isRtl ? 'right' : 'left'),
         flip: true,
-        offset: false,
-        viewportPadding: 10 },
+        offset: false },
       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: offset$1 } = this;
-          if (!isNumeric(offset$1)) {
-            const node = $(offset$1);
-            offset$1 = node ?
-            offset(node)[this.axis === 'x' ? 'left' : 'top'] -
-            offset(target)[this.axis === 'x' ? 'right' : 'bottom'] :
-            0;
-          }
-          offset$1 = toPx(offset$1) + toPx(getCssVar('position-offset', element));
-          offset$1 = [includes(['left', 'top'], dir) ? -offset$1 : +offset$1, 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') {
             for (const prop in attach) {
               attach[prop] = attach[prop].reverse();
             }
-            offset$1 = offset$1.reverse();
+            offset = offset.reverse();
           }
+          // Ensure none positioned element does not generate scrollbars
+          const elDim = dimensions$1(element);
+          css(element, { top: -elDim.height, left: -elDim.width });
           positionAt(element, target, {
             attach,
-            offset: offset$1,
+            offset,
             boundary,
-            viewportPadding: this.boundaryAlign ? 0 : this.viewportPadding,
-            flip: this.flip });
+            flip: this.flip,
+            viewportOffset: this.getViewportOffset(element) });
+        },
+        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));
+        },
+        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));
         } } };
     let active$1;
@@ -3636,7 +3744,8 @@
         delayShow: Number,
         delayHide: Number,
         display: String,
-        clsDrop: String },
+        clsDrop: String,
+        animateOut: Boolean },
       data: {
@@ -3650,7 +3759,8 @@
         clsDrop: false,
         animation: ['uk-animation-fade'],
         cls: 'uk-open',
-        container: false },
+        container: false,
+        animateOut: false },
       created() {
@@ -3838,7 +3948,7 @@
             }
           }),
-          ...(this.display === 'static' ?
+          ...(this.display === 'static' && this.align !== 'stretch' ?
           [] :
           (() => {
             const handler = () => this.$emit();
@@ -3899,7 +4009,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;
@@ -3919,7 +4029,7 @@
             let prev;
             while (active$1 && prev !== active$1 && !within(this.$el, active$1.$el)) {
               prev = active$1;
-              active$1.hide(false);
+              active$1.hide(false, false);
             }
           }
@@ -3933,8 +4043,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();
@@ -3966,32 +4076,59 @@
         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 [scrollParent] = scrollParents(this.$el);
-          const scrollParentOffset = offsetViewport(scrollParent);
+          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 - (this.boundaryAlign ? 0 : 2 * this.viewportPadding);
+          const maxWidth = scrollParentOffset.width - 2 * viewportOffset;
-          if (this.pos[1] === 'justify') {
+          if (this.align === 'justify') {
             const prop = this.axis === 'y' ? 'width' : 'height';
-            const targetOffset = offset(this.target);
-            const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
-            css(this.$el, prop, alignTo[prop]);
+            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) {
             addClass(this.$el, this.clsDrop + "-stack");
           }
           css(this.$el, 'maxWidth', maxWidth);
-          this.positionAt(
-          this.$el,
-          boundary && this.boundaryAlign ? boundary : this.target,
-          boundary);
+          this.positionAt(this.$el, target, boundary);
         } } };
@@ -4458,7 +4595,7 @@
     }
     var heightViewport = {
-      mixins: [Class, Resize],
+      mixins: [Resize],
       props: {
         expand: Boolean,
@@ -4476,7 +4613,7 @@
       resizeTargets() {
         // check for offsetTop change
-        return [this.$el, document.documentElement];
+        return [this.$el, ...scrollParents(this.$el, /auto|scroll/)];
       },
       update: {
@@ -4488,21 +4625,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$1(document.documentElement).height -
-            dimensions$1(this.$el).height) -
+            viewportHeight - (
+            dimensions$1(scrollElement).height - dimensions$1(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) {
@@ -5836,8 +5977,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;
           }
@@ -5860,19 +6001,19 @@
           return this.dropbar;
         },
-        handler(_, _ref10) {let { $el, pos: [dir] = [] } = _ref10;
-          if (!hasClass($el, this.clsDrop)) {
+        handler(_, _ref10) {let { $el, align } = _ref10;
+          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
             return;
           }
-          if (dir === 'bottom') {
-            this.transitionTo(
-            offset($el).bottom -
-            offset(this.dropbar).top +
-            toFloat(css($el, 'marginBottom')),
-            $el);
+          this._observer = observeResize($el, () =>
+          this.transitionTo(
+          offset($el).bottom -
+          offset(this.dropbar).top +
+          toFloat(css($el, 'marginBottom')),
+          $el));
-          }
         } },
@@ -5911,11 +6052,13 @@
           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;
           }
+          this._observer.disconnect();
           const active = this.getActive();
           if (!active || (active == null ? void 0 : active.$el) === $el) {
@@ -5932,28 +6075,27 @@
         transitionTo(newHeight, el) {
           const { dropbar } = this;
-          const oldHeight = isVisible(dropbar) ? height(dropbar) : 0;
+          const oldHeight = height(dropbar);
           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);
           Transition.cancel([el, dropbar]);
-          return Promise.all([
+          Promise.all([
           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: '' });
-            this.$update(dropbar);
-          });
+          then(() => css(el, { clipPath: '' }));
         },
         getDropdown(el) {
@@ -6519,6 +6661,10 @@
         toggle(el, inview) {
           const state = this._data.elements.get(el);
+          if (!state) {
+            return;
+          }
           state.off == null ? void 0 : state.off();
           css(el, 'visibility', !inview && this.hidden ? 'hidden' : '');
@@ -7254,6 +7400,8 @@
         },
         handler(e) {
+          this._preventClick = null;
           if (!isTouch(e) || this._showState) {
             return;
           }
@@ -7333,9 +7481,14 @@
       {
         name: 'click',
+        filter() {
+          return ['click', 'hover'].some((mode) => includes(this.mode, mode));
+        },
         handler(e) {
           let link;
           if (
+          this._preventClick ||
           closest(e.target, 'a[href="#"], a[href=""]') ||
           (link = closest(e.target, 'a[href]')) && (
           attr(this.$el, 'aria-expanded') !== 'true' ||
@@ -7344,15 +7497,9 @@
             e.preventDefault();
           }
-          if (this._preventClick) {
-            return this._preventClick = null;
-          }
-          if (!includes(this.mode, 'click')) {
-            return;
+          if (!this._preventClick && includes(this.mode, 'click')) {
+            this.toggle();
           }
-          this.toggle();
         } },
@@ -9340,12 +9487,17 @@
       computed: {
         props(properties, $el) {
-          return keys(props).reduce((result, prop) => {
-            if (!isUndefined(properties[prop])) {
-              result[prop] = props[prop](prop, $el, properties[prop].slice());
+          const stops = {};
+          for (const prop in properties) {
+            if (prop in props && !isUndefined(properties[prop])) {
+              stops[prop] = properties[prop].slice();
             }
-            return result;
-          }, {});
+          }
+          const result = {};
+          for (const prop in stops) {
+            result[prop] = props[prop](prop, $el, stops[prop], stops);
+          }
+          return result;
         } },
@@ -9474,58 +9626,66 @@
       };
     }
-    function backgroundFn(prop, el, stops) {
+    function backgroundFn(prop, el, stops, props) {
       if (stops.length === 1) {
         stops.unshift(0);
       }
-      prop = prop.substr(-1);
-      const attr = prop === 'y' ? 'height' : 'width';
-      stops = parseStops(stops, (stop) => toPx(stop, attr, el));
+      const attr = prop === 'bgy' ? 'height' : 'width';
+      props[prop] = parseStops(stops, (stop) => toPx(stop, attr, el));
-      const bgPos = getCssValue(el, "background-position-" + prop, '');
+      const bgProps = ['bgx', 'bgy'].filter((prop) => prop in props);
+      if (bgProps.length === 2 && prop === 'bgx') {
+        return noop;
+      }
+      if (getCssValue(el, 'backgroundSize', '') === 'cover') {
+        return backgroundCoverFn(prop, el, stops, props);
+      }
-      return getCssValue(el, 'backgroundSize', '') === 'cover' ?
-      backgroundCoverFn(prop, el, stops, bgPos, attr) :
-      setBackgroundPosFn(prop, stops, bgPos);
+      const positions = {};
+      for (const prop of bgProps) {
+        positions[prop] = getBackgroundPos(el, prop);
+      }
+      return setBackgroundPosFn(bgProps, props, positions);
     }
-    function backgroundCoverFn(prop, el, stops, bgPos, attr) {
+    function backgroundCoverFn(prop, el, stops, props) {
       const dimImage = getBackgroundImageDimensions(el);
       if (!dimImage.width) {
         return noop;
       }
-      const values = stops.map((_ref2) => {let [value] = _ref2;return value;});
-      const min = Math.min(...values);
-      const max = Math.max(...values);
-      const down = values.indexOf(min) < values.indexOf(max);
-      const diff = max - min;
-      let pos = (down ? -diff : 0) - (down ? min : max);
       const dimEl = {
         width: el.offsetWidth,
         height: el.offsetHeight };
-      const baseDim = Dimensions.cover(dimImage, dimEl);
-      const span = baseDim[attr] - dimEl[attr];
+      const bgProps = ['bgx', 'bgy'].filter((prop) => prop in props);
-      if (span < diff) {
-        dimEl[attr] = baseDim[attr] + diff - span;
-      } else if (span > diff) {
-        const posPercentage = dimEl[attr] / toPx(bgPos, attr, el, true);
+      const positions = {};
+      for (const prop of bgProps) {
+        const values = props[prop].map((_ref2) => {let [value] = _ref2;return value;});
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const down = values.indexOf(min) < values.indexOf(max);
+        const diff = max - min;
-        if (posPercentage) {
-          pos -= (span - diff) / posPercentage;
-        }
+        positions[prop] = (down ? -diff : 0) - (down ? min : max) + "px";
+        dimEl[prop === 'bgy' ? 'height' : 'width'] += diff;
       }
       const dim = Dimensions.cover(dimImage, dimEl);
-      const fn = setBackgroundPosFn(prop, stops, pos + "px");
+      for (const prop of bgProps) {
+        const attr = prop === 'bgy' ? 'height' : 'width';
+        const overflow = dim[attr] - dimEl[attr];
+        positions[prop] = "max(" + getBackgroundPos(el, prop) + ",-" + overflow + "px) + " + positions[prop];
+      }
+      const fn = setBackgroundPosFn(bgProps, positions, props);
       return (css, percent) => {
         fn(css, percent);
         css.backgroundSize = dim.width + "px " + dim.height + "px";
@@ -9533,9 +9693,16 @@
       };
     }
-    function setBackgroundPosFn(prop, stops, pos) {
+    function getBackgroundPos(el, prop) {
+      return getCssValue(el, "background-position-" + prop.substr(-1), '');
+    }
+    function setBackgroundPosFn(bgProps, positions, props) {
       return function (css, percent) {
-        css["background-position-" + prop] = "calc(" + pos + " + " + getValue(stops, percent) + "px)";
+        for (const prop of bgProps) {
+          const value = getValue(props[prop], percent);
+          css["background-position-" + prop.substr(-1)] = "calc(" + positions[prop] + " + " + value + "px)";
+        }
       };
     }
@@ -9721,8 +9888,23 @@
+    /*
+     * Inspired by https://gist.github.com/gre/1650294?permalink_comment_id=3477425#gistcomment-3477425
+     *
+     * linear: 0
+     * easeInSine: 0.5
+     * easeOutSine: -0.5
+     * easeInQuad: 1
+     * easeOutQuad: -1
+     * easeInCubic: 2
+     * easeOutCubic: -2
+     * easeInQuart: 3
+     * easeOutQuart: -3
+     * easeInQuint: 4
+     * easeOutQuint: -4
+     */
     function ease(percent, easing) {
-      return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
+      return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, 1 - easing);
     }
     // SVG elements do not inherit from HTMLElement