uikit 3.17.12-dev.f1425d280 → 3.18.1-dev.0856bd8a6

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.17.12-dev.f1425d280",
+  "version": "3.18.1-dev.0856bd8a6",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -19,7 +19,7 @@
     "url": "https://github.com/uikit/uikit/issues"
   },
   "homepage": "https://getuikit.com",
-  "packageManager": "pnpm@8.11.0",
+  "packageManager": "pnpm@8.15.1",
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-replace": "^5.0.5",
@@ -28,7 +28,7 @@
     "chokidar-cli": "^3.0.0",
     "clean-css": "^5.3.3",
     "dateformat": "^5.0.3",
-    "esbuild": "^0.19.9",
+    "esbuild": "^0.20.0",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
     "execa": "^8.0.1",

package/src/images/components/navbar-toggle-icon.svg

@@ -8,7 +8,7 @@
             opacity: 1;
         }
 
-        .uk-navbar-toggle svg > .line-3 { opacity: 0; }
+        .uk-navbar-toggle-animate svg > .line-3 { opacity: 0; }
         .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-3 { opacity: 1; }
 
         .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-2 { transform: rotate(45deg); }

package/src/images/icons/arrow-up-right.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <polyline fill="none" stroke="#000" points="16 10 16 4 10 4"/>
+    <line fill="none" stroke="#000" x1="4" y1="16" x2="16" y2="4"/>
+</svg>

package/src/images/icons/git-branch.svg

@@ -1,6 +1,6 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <circle fill="none" stroke="#000" stroke-width="1.2" cx="7" cy="3" r="2" />
-    <circle fill="none" stroke="#000" stroke-width="1.2" cx="14" cy="6" r="2" />
-    <circle fill="none" stroke="#000" stroke-width="1.2" cx="7" cy="17" r="2" />
-    <path fill="none" stroke="#000" stroke-width="2" d="M14,8 C14,10.41 12.43,10.87 10.56,11.25 C9.09,11.54 7,12.06 7,15 L7,5" />
+    <path fill="none" stroke="#000" d="m13.5,8c0,2.41-1.57,2.87-3.44,3.25-1.47.29-3.56.81-3.56,3.75V5"/>
+    <circle fill="none" stroke="#000" cx="6.5" cy="3" r="1.79"/>
+    <circle fill="none" stroke="#000" cx="13.5" cy="6" r="1.79"/>
+    <circle fill="none" stroke="#000" cx="6.5" cy="17" r="1.79"/>
 </svg>

package/src/images/icons/git-fork.svg

@@ -1,6 +1,6 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <circle fill="none" stroke="#000" stroke-width="1.2" cx="5.79" cy="2.79" r="1.79" />
-    <circle fill="none" stroke="#000" stroke-width="1.2" cx="14.19" cy="2.79" r="1.79" />
-    <ellipse fill="none" stroke="#000" stroke-width="1.2" cx="10.03" cy="16.79" rx="1.79" ry="1.79" />
-    <path fill="none" stroke="#000" stroke-width="2" d="M5.79,4.57 L5.79,6.56 C5.79,9.19 10.03,10.22 10.03,13.31 C10.03,14.86 10.04,14.55 10.04,14.55 C10.04,14.37 10.04,14.86 10.04,13.31 C10.04,10.22 14.2,9.19 14.2,6.56 L14.2,4.57" />
+    <circle fill="none" stroke="#000" cx="6" cy="3" r="1.79"/>
+    <circle fill="none" stroke="#000" cx="14" cy="3" r="1.79"/>
+    <circle fill="none" stroke="#000" cx="10" cy="17" r="1.79"/>
+    <path fill="none" stroke="#000" d="m6,4.78v1.99c0,2.63,4,3.66,4,6.75,0,1.55.01,1.24.01,1.24,0-.18,0,.31,0-1.24,0-3.09,3.99-4.12,3.99-6.75v-1.99"/>
 </svg>

package/src/images/icons/link-external.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <polyline fill="none" stroke="#000" points="14.5 10.5 14.5 16.5 3.5 16.5 3.5 5.5 8.5 5.5"/>
+    <polyline fill="none" stroke="#000" points="17.5 8.5 17.5 2.5 11.5 2.5"/>
+    <line fill="none" stroke="#000" x1="6.5" y1="13.5" x2="17.5" y2="2.5"/>
+</svg>

package/src/images/icons/signal.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="m7.86,1.34l.2.81c-.79.19-1.54.51-2.24.93l-.43-.71c.77-.46,1.6-.81,2.47-1.02Zm4.28,0l-.2.81c.79.19,1.54.51,2.24.93l.43-.72c-.77-.46-1.6-.81-2.47-1.02h0ZM2.37,5.39c-.46.77-.81,1.6-1.02,2.47l.81.2c.19-.79.51-1.54.93-2.24l-.71-.43Zm-.45,4.61c0-.41.03-.81.09-1.21l-.83-.13c-.13.89-.13,1.79,0,2.67l.83-.13c-.06-.4-.09-.81-.09-1.21h0Zm12.69,7.63l-.43-.72c-.7.42-1.45.73-2.24.93l.2.81c.87-.21,1.7-.56,2.46-1.02h0Zm3.47-7.63c0,.41-.03.81-.09,1.21l.83.13c.13-.89.13-1.79,0-2.67l-.83.13c.06.4.09.81.09,1.21Zm.58,2.14l-.81-.2c-.19.79-.51,1.54-.93,2.24l.72.43c.46-.77.81-1.6,1.02-2.47h0Zm-7.44,5.85c-.8.12-1.62.12-2.42,0l-.13.83c.89.13,1.79.13,2.67,0l-.13-.83Zm5.29-3.2c-.48.65-1.06,1.23-1.71,1.71l.5.67c.72-.53,1.36-1.16,1.89-1.88l-.67-.5Zm-1.71-11.29c.65.48,1.23,1.06,1.71,1.71l.67-.5c-.53-.72-1.17-1.35-1.88-1.88l-.5.67Zm-11.29,1.71c.48-.65,1.06-1.23,1.71-1.71l-.5-.67c-.72.53-1.35,1.17-1.88,1.88l.67.5Zm14.14.18l-.72.43c.42.7.73,1.45.93,2.24l.81-.2c-.21-.87-.56-1.7-1.02-2.46h0Zm-8.84-3.38c.8-.12,1.62-.12,2.42,0l.13-.83c-.89-.13-1.79-.13-2.67,0l.13.83Zm-4.86,15.38l-1.73.4.4-1.73-.81-.19-.4,1.73c-.07.28.02.58.22.78s.5.29.78.22l1.73-.39-.19-.82Zm-1.96-2.26l.81.19.28-1.2c-.41-.68-.71-1.42-.9-2.19l-.81.2c.18.74.46,1.45.82,2.12l-.2.88Zm3.9,1.81l-1.19.28.19.81.88-.2c.67.36,1.38.64,2.12.82l.2-.81c-.77-.19-1.51-.5-2.19-.9h0ZM10,2.75c-2.63,0-5.06,1.43-6.34,3.74s-1.19,5.12.21,7.36l-.7,2.97,2.97-.7c2.61,1.64,5.96,1.46,8.37-.46s3.34-5.15,2.32-8.06c-1.02-2.91-3.77-4.85-6.85-4.85Z"/>
+</svg>

package/src/images/icons/telegram.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="m10,1.09C5.08,1.09,1.09,5.08,1.09,10s3.99,8.91,8.91,8.91,8.91-3.99,8.91-8.91S14.92,1.09,10,1.09Zm4.25,5.8c-.03.36-.23,1.62-.44,2.99-.31,1.93-.64,4.04-.64,4.04,0,0-.05.59-.49.7s-1.16-.36-1.29-.46c-.1-.08-1.93-1.24-2.6-1.8-.18-.15-.39-.46.03-.82.93-.85,2.04-1.91,2.7-2.58.31-.31.62-1.03-.67-.15-1.83,1.26-3.63,2.45-3.63,2.45,0,0-.41.26-1.19.03-.77-.23-1.67-.54-1.67-.54,0,0-.62-.39.44-.8h0s4.46-1.83,6-2.47c.59-.26,2.6-1.08,2.6-1.08,0,0,.93-.36.85.52Z"/>
+</svg>

package/src/images/icons/threads.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="m14.47,9.29c-.08-.04-.16-.08-.25-.11-.14-2.66-1.6-4.18-4.04-4.2-.01,0-.02,0-.03,0-1.46,0-2.67.62-3.42,1.76l1.34.92c.56-.85,1.43-1.03,2.08-1.03,0,0,.01,0,.02,0,.8,0,1.41.24,1.8.69.29.33.48.79.57,1.37-.71-.12-1.48-.16-2.31-.11-2.32.13-3.81,1.49-3.71,3.37.05.95.53,1.77,1.34,2.31.69.45,1.57.67,2.49.62,1.21-.07,2.16-.53,2.83-1.38.5-.64.82-1.48.96-2.52.58.35,1.01.81,1.24,1.36.4.94.43,2.48-.83,3.74-1.1,1.1-2.43,1.58-4.43,1.59-2.22-.02-3.9-.73-4.99-2.12-1.02-1.3-1.55-3.18-1.57-5.58.02-2.4.55-4.28,1.57-5.58,1.09-1.39,2.77-2.1,4.99-2.12,2.24.02,3.95.73,5.08,2.13.56.68.98,1.54,1.25,2.55l1.57-.42c-.33-1.23-.86-2.3-1.58-3.18-1.45-1.79-3.58-2.7-6.32-2.72h-.01c-2.73.02-4.84.94-6.25,2.73-1.26,1.6-1.9,3.82-1.93,6.61h0s0,.01,0,.01c.02,2.79.67,5.01,1.93,6.61,1.41,1.8,3.51,2.71,6.25,2.73h.01c2.43-.02,4.14-.65,5.55-2.06,1.85-1.84,1.79-4.16,1.18-5.58-.44-1.02-1.27-1.84-2.41-2.39Zm-4.2,3.95c-1.02.06-2.07-.4-2.12-1.38-.04-.72.52-1.53,2.19-1.63.19-.01.38-.02.56-.02.61,0,1.17.06,1.69.17-.19,2.41-1.32,2.8-2.32,2.85Z"/>
+</svg>

package/src/images/icons/x.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="m15.08,2.1h2.68l-5.89,6.71,6.88,9.1h-5.4l-4.23-5.53-4.84,5.53H1.59l6.24-7.18L1.24,2.1h5.54l3.82,5.05,4.48-5.05Zm-.94,14.23h1.48L6,3.61h-1.6l9.73,12.71h0Z"/>
+</svg>

package/src/js/components/countdown.js

@@ -32,9 +32,7 @@ export default {
     events: {
         name: 'visibilitychange',
 
-        el() {
-            return document;
-        },
+        el: () => document,
 
         handler() {
             if (document.hidden) {

package/src/js/components/internal/slider-preload.js

@@ -5,4 +5,10 @@ export default {
         target: ({ slides }) => slides,
         targets: (instance) => instance.getAdjacentSlides(),
     }),
+
+    methods: {
+        getAdjacentSlides() {
+            return [1, -1].map((i) => this.slides[this.getIndex(this.index + i)]);
+        },
+    },
 };

package/src/js/components/lightbox-panel.js

@@ -101,9 +101,7 @@ export default {
 
             self: true,
 
-            handler() {
-                this.showControls();
-            },
+            handler: 'showControls',
         },
 
         {
@@ -132,9 +130,7 @@ export default {
         {
             name: 'keyup',
 
-            el() {
-                return document;
-            },
+            el: () => document,
 
             handler({ keyCode }) {
                 if (!this.isToggled(this.$el) || !this.draggable) {

package/src/js/components/parallax.js

@@ -1,6 +1,6 @@
 import { css, isVisible, parent, query, scrollParent, scrolledOver, toPx } from 'uikit-util';
 import { resize, scroll, viewport } from '../api/observables';
-import Parallax from '../mixin/parallax';
+import Parallax, { ease } from '../mixin/parallax';
 
 export default {
     mixins: [Parallax],
@@ -80,25 +80,6 @@ export default {
     },
 };
 
-/*
- * 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, 1 - easing);
-}
-
 // SVG elements do not inherit from HTMLElement
 function getOffsetElement(el) {
     return el ? ('offsetTop' in el ? el : getOffsetElement(parent(el))) : document.documentElement;

package/src/js/components/slider.js

@@ -22,12 +22,13 @@ import {
 import { resize } from '../api/observables';
 import Class from '../mixin/class';
 import Slider, { speedUp } from '../mixin/slider';
+import SliderParallax from '../mixin/slider-parallax';
 import SliderReactive from '../mixin/slider-reactive';
 import SliderPreload from './internal/slider-preload';
 import Transitioner, { getMax, getWidth } from './internal/slider-transitioner';
 
 export default {
-    mixins: [Class, Slider, SliderReactive, SliderPreload],
+    mixins: [Class, Slider, SliderReactive, SliderParallax, SliderPreload],
 
     props: {
         center: Boolean,
@@ -45,10 +46,6 @@ export default {
     },
 
     computed: {
-        avgWidth() {
-            return getWidth(this.list) / this.length;
-        },
-
         finite({ finite }) {
             return finite || isFinite(this.list, this.center);
         },
@@ -76,7 +73,7 @@ export default {
         },
 
         sets({ sets: enabled }) {
-            if (!enabled) {
+            if (!enabled || this.parallax) {
                 return;
             }
 
@@ -93,7 +90,9 @@ export default {
                 if (this.center) {
                     if (
                         left < width / 2 &&
-                        left + slideWidth + dimensions(getIndex(+i + 1, this.slides)).width / 2 >
+                        left +
+                            slideWidth +
+                            dimensions(this.slides[getIndex(+i + 1, this.slides)]).width / 2 >
                             width / 2
                     ) {
                         sets.push(+i);
@@ -143,11 +142,7 @@ export default {
                 }
             }
 
-            if (this.length && !this.dragging && !this.stack.length) {
-                this.reorder();
-                this._translate(1);
-            }
-
+            this.reorder();
             this.updateActiveClasses();
         },
 
@@ -185,9 +180,10 @@ export default {
 
             const index =
                 this.dir < 0 || !this.slides[this.prevIndex] ? this.index : this.prevIndex;
+            const avgWidth = getWidth(this.list) / this.length;
             this.duration =
-                speedUp(this.avgWidth / this.velocity) *
-                (dimensions(this.slides[index]).width / this.avgWidth);
+                speedUp(avgWidth / this.velocity) *
+                (dimensions(this.slides[index]).width / avgWidth);
 
             this.reorder();
         },
@@ -196,6 +192,7 @@ export default {
             if (~this.prevIndex) {
                 addClass(this._getTransitioner().getItemIn(), this.clsActive);
             }
+            this.updateActiveClasses(this.prevIndex);
         },
 
         itemshown() {
@@ -237,12 +234,12 @@ export default {
             }
         },
 
-        updateActiveClasses() {
-            const actives = this._getTransitioner(this.index).getActives();
+        updateActiveClasses(currentIndex = this.index) {
+            const actives = this._getTransitioner(currentIndex).getActives();
+
             const activeClasses = [
                 this.clsActive,
-                ((!this.sets || includes(this.sets, toFloat(this.index))) && this.clsActivated) ||
-                    '',
+                !this.sets || includes(this.sets, toFloat(this.index)) ? this.clsActivated : '',
             ];
             for (const slide of this.slides) {
                 const active = includes(actives, slide);
@@ -296,6 +293,29 @@ export default {
             }
             return Array.from(slides);
         },
+
+        getIndexAt(percent) {
+            let index = -1;
+            const firstSlideWidth = dimensions(this.slides[0]).width;
+            const lastSlideWidth = dimensions(last(this.slides)).width;
+            const scrollDist =
+                getWidth(this.list) -
+                (this.center ? firstSlideWidth / 2 + lastSlideWidth / 2 : lastSlideWidth);
+
+            let dist = percent * scrollDist;
+            let slidePercent = 0;
+
+            do {
+                const slideWidth = dimensions(this.slides[++index]).width;
+                const slideDist = this.center
+                    ? slideWidth / 2 + dimensions(this.slides[index + 1]).width / 2
+                    : slideWidth;
+                slidePercent = (dist / slideDist) % 1;
+                dist -= slideDist;
+            } while (dist >= 0 && index < this.maxIndex);
+
+            return [index, slidePercent];
+        },
     },
 };
 

package/src/js/components/slideshow.js

@@ -1,25 +1,24 @@
-import { boxModelAdjust, css, inBrowser } from 'uikit-util';
+import { css } from 'uikit-util';
 import Class from '../mixin/class';
+import SliderParallax from '../mixin/slider-parallax';
 import SliderReactive from '../mixin/slider-reactive';
 import Slideshow from '../mixin/slideshow';
 import SliderPreload from './internal/slider-preload';
 import Animations from './internal/slideshow-animations';
 
-const supportsAspectRatio = inBrowser && CSS.supports('aspect-ratio', '1/1');
-
 export default {
-    mixins: [Class, Slideshow, SliderReactive, SliderPreload],
+    mixins: [Class, Slideshow, SliderReactive, SliderParallax, SliderPreload],
 
     props: {
         ratio: String,
-        minHeight: Number,
-        maxHeight: Number,
+        minHeight: String,
+        maxHeight: String,
     },
 
     data: {
         ratio: '16:9',
-        minHeight: false,
-        maxHeight: false,
+        minHeight: undefined,
+        maxHeight: undefined,
         selList: '.uk-slideshow-items',
         attrItem: 'uk-slideshow-item',
         selNav: '.uk-slideshow-nav',
@@ -28,45 +27,14 @@ export default {
 
     watch: {
         list(list) {
-            if (list && supportsAspectRatio) {
-                css(list, {
-                    aspectRatio: this.ratio.replace(':', '/'),
-                    minHeight: this.minHeight || '',
-                    maxHeight: this.maxHeight || '',
-                    minWidth: '100%',
-                    maxWidth: '100%',
-                });
-            }
-        },
-    },
-
-    update: {
-        // deprecated: Remove with iOS 17
-        read() {
-            if (!this.list || supportsAspectRatio) {
-                return false;
-            }
-
-            let [width, height] = this.ratio.split(':').map(Number);
-
-            height = (height * this.list.offsetWidth) / width || 0;
-
-            if (this.minHeight) {
-                height = Math.max(this.minHeight, height);
-            }
-
-            if (this.maxHeight) {
-                height = Math.min(this.maxHeight, height);
-            }
-
-            return { height: height - boxModelAdjust(this.list, 'height', 'content-box') };
+            css(list, {
+                aspectRatio: this.ratio ? this.ratio.replace(':', '/') : undefined,
+                minHeight: this.minHeight,
+                maxHeight: this.maxHeight,
+                minWidth: '100%',
+                maxWidth: '100%',
+            });
         },
-
-        write({ height }) {
-            height > 0 && css(this.list, 'minHeight', height);
-        },
-
-        events: ['resize'],
     },
 
     methods: {

package/src/js/components/sortable.js

@@ -8,6 +8,7 @@ import {
     before,
     children,
     css,
+    dimensions,
     findIndex,
     getEventPos,
     hasTouch,
@@ -208,7 +209,7 @@ export default {
 
         start(e) {
             this.drag = appendDrag(this.$container, this.placeholder);
-            const { left, top } = this.placeholder.getBoundingClientRect();
+            const { left, top } = dimensions(this.placeholder);
             assign(this.origin, { offsetLeft: this.pos.x - left, offsetTop: this.pos.y - top });
 
             addClass(this.drag, this.clsDrag, this.clsCustom);
@@ -365,7 +366,7 @@ function appendDrag(container, element) {
 }
 
 function findTarget(items, point) {
-    return items[findIndex(items, (item) => pointInRect(point, item.getBoundingClientRect()))];
+    return items[findIndex(items, (item) => pointInRect(point, dimensions(item)))];
 }
 
 function findInsertTarget(list, target, placeholder, x, y, sameList) {
@@ -373,7 +374,7 @@ function findInsertTarget(list, target, placeholder, x, y, sameList) {
         return;
     }
 
-    const rect = target.getBoundingClientRect();
+    const rect = dimensions(target);
     if (!sameList) {
         if (!isHorizontal(list, placeholder)) {
             return y < rect.top + rect.height / 2 ? target : target.nextElementSibling;
@@ -382,7 +383,7 @@ function findInsertTarget(list, target, placeholder, x, y, sameList) {
         return target;
     }
 
-    const placeholderRect = placeholder.getBoundingClientRect();
+    const placeholderRect = dimensions(placeholder);
     const sameRow = linesIntersect(
         [rect.top, rect.bottom],
         [placeholderRect.top, placeholderRect.bottom],
@@ -421,9 +422,9 @@ function isHorizontal(list, placeholder) {
 
     const items = children(list);
     const isHorizontal = items.some((el, i) => {
-        const rectA = el.getBoundingClientRect();
+        const rectA = dimensions(el);
         return items.slice(i + 1).some((el) => {
-            const rectB = el.getBoundingClientRect();
+            const rectB = dimensions(el);
             return !linesIntersect([rectA.left, rectA.right], [rectB.left, rectB.right]);
         });
     });

package/src/js/components/tooltip.js

@@ -169,13 +169,7 @@ function getAlignment(el, target, [dir, align]) {
     }
 
     const props = includes(properties[0], dir) ? properties[1] : properties[0];
-    if (elOffset[props[0]] === targetOffset[props[0]]) {
-        align = props[0];
-    } else if (elOffset[props[1]] === targetOffset[props[1]]) {
-        align = props[1];
-    } else {
-        align = 'center';
-    }
+    align = props.find((prop) => elOffset[prop] === targetOffset[prop]) || 'center';
 
     return [dir, align];
 }

package/src/js/core/accordion.js

@@ -235,7 +235,7 @@ function keepScrollPosition(el) {
     let frame;
     (function scroll() {
         frame = requestAnimationFrame(() => {
-            const { top } = el.getBoundingClientRect();
+            const { top } = dimensions(el);
             if (top < 0) {
                 scrollElement.scrollTop += top;
             }

package/src/js/core/drop.js

@@ -1,5 +1,6 @@
 import {
     $,
+    MouseTracker,
     addClass,
     append,
     apply,
@@ -10,7 +11,6 @@ import {
     isSameSiteAnchor,
     isTouch,
     matches,
-    MouseTracker,
     observeResize,
     observeViewportResize,
     offset,
@@ -31,10 +31,10 @@ import {
 } from 'uikit-util';
 import { lazyload } from '../api/observables';
 import Container from '../mixin/container';
-import { preventBackgroundScroll } from '../mixin/internal/scroll';
 import Position from '../mixin/position';
 import Togglable from '../mixin/togglable';
 import { keyMap } from '../util/keys';
+import { preventBackgroundScroll } from '../util/scroll';
 
 export let active;
 
@@ -291,9 +291,7 @@ export default {
 
             self: true,
 
-            handler() {
-                this.clearTimers();
-            },
+            handler: 'clearTimers',
         },
 
         {

package/src/js/core/dropnav.js

@@ -19,6 +19,7 @@ import {
     remove,
     selFocusable,
     toFloat,
+    toPx,
     Transition,
 } from 'uikit-util';
 import Class from '../mixin/class';
@@ -75,8 +76,13 @@ export default {
             return dropbar ? dropbar : (this._dropbar = $('<div></div>'));
         },
 
-        dropbarOffset() {
-            return 0;
+        dropbarOffset({ target, targetY }, $el) {
+            const { offsetTop, offsetHeight } = query(targetY || target || $el, $el);
+            return offsetTop + offsetHeight + this.dropbarPositionOffset;
+        },
+
+        dropbarPositionOffset(_, $el) {
+            return toPx(css($el, '--uk-position-offset'));
         },
 
         dropContainer(_, $el) {
@@ -287,22 +293,15 @@ export default {
 
                 const drop = this.getDropdown(target);
                 const adjustHeight = () => {
-                    const targetOffsets = parents(target, `.${this.clsDrop}`)
-                        .concat(target)
-                        .map((el) => offset(el));
-                    const minTop = Math.min(...targetOffsets.map(({ top }) => top));
-                    const maxBottom = Math.max(...targetOffsets.map(({ bottom }) => bottom));
-                    const dropbarOffset = offset(this.dropbar);
-                    css(
-                        this.dropbar,
-                        'top',
-                        this.dropbar.offsetTop - (dropbarOffset.top - minTop) - this.dropbarOffset,
+                    const maxBottom = Math.max(
+                        ...parents(target, `.${this.clsDrop}`)
+                            .concat(target)
+                            .map((el) => offset(el).bottom),
                     );
+
+                    css(this.dropbar, 'top', this.dropbarOffset);
                     this.transitionTo(
-                        maxBottom -
-                            minTop +
-                            toFloat(css(target, 'marginBottom')) +
-                            this.dropbarOffset,
+                        maxBottom - offset(this.dropbar).top + toFloat(css(target, 'marginBottom')),
                         target,
                     );
                 };
@@ -377,6 +376,13 @@ export default {
 
             await Transition.cancel([el, dropbar]);
 
+            if (el) {
+                const diff = offset(el).top - offset(dropbar).top - oldHeight;
+                if (diff > 0) {
+                    css(el, 'transitionDelay', `${(diff / newHeight) * this.duration}ms`);
+                }
+            }
+
             css(el, 'clipPath', `polygon(0 0,100% 0,100% ${oldHeight}px,0 ${oldHeight}px)`);
             height(dropbar, oldHeight);
 
@@ -384,11 +390,9 @@ export default {
                 Transition.start(dropbar, { height: newHeight }, this.duration),
                 Transition.start(
                     el,
-                    {
-                        clipPath: `polygon(0 0,100% 0,100% ${newHeight}px,0 ${newHeight}px)`,
-                    },
+                    { clipPath: `polygon(0 0,100% 0,100% ${newHeight}px,0 ${newHeight}px)` },
                     this.duration,
-                ).finally(() => css(el, { clipPath: '' })),
+                ).finally(() => css(el, { clipPath: '', transitionDelay: '' })),
             ]).catch(noop);
         },
 

package/src/js/core/height-match.js

@@ -1,4 +1,4 @@
-import { $$, boxModelAdjust, css, dimensions, isVisible, pick } from 'uikit-util';
+import { $$, boxModelAdjust, css, isVisible, pick } from 'uikit-util';
 import { resize } from '../api/observables';
 import { getRows } from './margin';
 
@@ -50,7 +50,11 @@ function match(elements) {
     const max = Math.max(...heights);
 
     return {
-        heights: elements.map((el, i) => (heights[i].toFixed(2) === max.toFixed(2) ? '' : max)),
+        heights: elements.map((el, i) =>
+            heights[i].toFixed(2) === max.toFixed(2)
+                ? ''
+                : max - boxModelAdjust(el, 'height', 'content-box'),
+        ),
         elements,
     };
 }
@@ -62,7 +66,7 @@ function getHeight(element) {
         css(element, 'display', 'block', 'important');
     }
     css(element, 'minHeight', '');
-    const height = dimensions(element).height - boxModelAdjust(element, 'height', 'content-box');
+    const height = element.offsetHeight;
     css(element, style);
     return height;
 }

package/src/js/core/height-placeholder.js

@@ -0,0 +1,32 @@
+import { css, height, query } from 'uikit-util';
+import { resize } from '../api/observables';
+
+export default {
+    args: 'target',
+
+    props: {
+        target: String,
+    },
+
+    data: {
+        target: '',
+    },
+
+    computed: {
+        target: ({ target }, $el) => query(target, $el),
+    },
+
+    observe: resize({ target: ({ target }) => target }),
+
+    update: {
+        read() {
+            return { height: height(this.target) };
+        },
+
+        write({ height }) {
+            css(this.$el, { minHeight: height });
+        },
+
+        events: ['resize'],
+    },
+};