uikit 3.16.27 → 3.17.1-dev.7c0766a6f

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.16.27 | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
+/*! UIkit 3.17.1-dev.7c0766a6f | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -118,7 +118,7 @@
       }
       return true;
     }
-    function sortBy$1(array, prop) {
+    function sortBy(array, prop) {
       return array.slice().sort(
         ({ [prop]: propA = 0 }, { [prop]: propB = 0 }) => propA > propB ? 1 : propB > propA ? -1 : 0
       );
@@ -229,29 +229,40 @@
       }
     }
 
-    function addClass(element, ...args) {
-      apply$1(element, args, "add");
+    function addClass(element, ...classes) {
+      for (const node of toNodes(element)) {
+        const add = toClasses(classes).filter((cls) => !hasClass(node, cls));
+        if (add.length) {
+          node.classList.add(...add);
+        }
+      }
     }
-    function removeClass(element, ...args) {
-      apply$1(element, args, "remove");
+    function removeClass(element, ...classes) {
+      for (const node of toNodes(element)) {
+        const remove = toClasses(classes).filter((cls) => hasClass(node, cls));
+        if (remove.length) {
+          node.classList.remove(...remove);
+        }
+      }
     }
-    function removeClasses(element, cls) {
-      attr(
-        element,
-        "class",
-        (value) => (value || "").replace(new RegExp(`\\b${cls}\\b\\s?`, "g"), "")
-      );
+    function removeClasses$1(element, clsRegex) {
+      clsRegex = new RegExp(clsRegex);
+      for (const node of toNodes(element)) {
+        node.classList.remove(...toArray(node.classList).filter((cls) => cls.match(clsRegex)));
+      }
     }
-    function replaceClass(element, ...args) {
-      args[0] && removeClass(element, args[0]);
-      args[1] && addClass(element, args[1]);
+    function replaceClass(element, oldClass, newClass) {
+      newClass = toClasses(newClass);
+      oldClass = toClasses(oldClass).filter((cls) => !includes(newClass, cls));
+      removeClass(element, oldClass);
+      addClass(element, newClass);
     }
     function hasClass(element, cls) {
-      [cls] = getClasses(cls);
-      return !!cls && toNodes(element).some((node) => node.classList.contains(cls));
+      [cls] = toClasses(cls);
+      return toNodes(element).some((node) => node.classList.contains(cls));
     }
     function toggleClass(element, cls, force) {
-      const classes = getClasses(cls);
+      const classes = toClasses(cls);
       if (!isUndefined(force)) {
         force = !!force;
       }
@@ -261,14 +272,8 @@
         }
       }
     }
-    function apply$1(element, args, fn) {
-      args = args.reduce((args2, arg) => args2.concat(getClasses(arg)), []);
-      for (const node of toNodes(element)) {
-        node.classList[fn](...args);
-      }
-    }
-    function getClasses(str) {
-      return String(str).split(/[ ,]/).filter(Boolean);
+    function toClasses(str) {
+      return isArray(str) ? str.map(toClasses).flat() : String(str).split(/[ ,]/).filter(Boolean);
     }
 
     const voidElements = {
@@ -315,7 +320,8 @@
       return toNodes(element).some((element2) => element2.matches(selector));
     }
     function closest(element, selector) {
-      return isElement(element) ? element.closest(startsWith(selector, ">") ? selector.slice(1) : selector) : toNodes(element).map((element2) => closest(element2, selector)).filter(Boolean);
+      var _a;
+      return (_a = toNode(element)) == null ? void 0 : _a.closest(startsWith(selector, ">") ? selector.slice(1) : selector);
     }
     function within(element, selector) {
       return isString(selector) ? !!closest(element, selector) : toNode(selector).contains(toNode(element));
@@ -594,6 +600,9 @@
       }
     }
 
+    const clsTransition = "uk-transition";
+    const clsTransitionEnd = "transitionend";
+    const clsTransitionCanceled = "transitioncanceled";
     function transition$1(element, props, duration = 400, timing = "linear") {
       duration = Math.round(duration);
       return Promise.all(
@@ -605,23 +614,23 @@
                 css(element2, name, value);
               }
             }
-            const timer = setTimeout(() => trigger(element2, "transitionend"), duration);
+            const timer = setTimeout(() => trigger(element2, clsTransitionEnd), duration);
             once(
               element2,
-              "transitionend transitioncanceled",
+              [clsTransitionEnd, clsTransitionCanceled],
               ({ type }) => {
                 clearTimeout(timer);
-                removeClass(element2, "uk-transition");
+                removeClass(element2, clsTransition);
                 css(element2, {
                   transitionProperty: "",
                   transitionDuration: "",
                   transitionTimingFunction: ""
                 });
-                type === "transitioncanceled" ? reject() : resolve(element2);
+                type === clsTransitionCanceled ? reject() : resolve(element2);
               },
               { self: true }
             );
-            addClass(element2, "uk-transition");
+            addClass(element2, clsTransition);
             css(element2, {
               transitionProperty: Object.keys(props).map(propName).join(","),
               transitionDuration: `${duration}ms`,
@@ -635,32 +644,34 @@
     const Transition = {
       start: transition$1,
       async stop(element) {
-        trigger(element, "transitionend");
+        trigger(element, clsTransitionEnd);
         await Promise.resolve();
       },
       async cancel(element) {
-        trigger(element, "transitioncanceled");
+        trigger(element, clsTransitionCanceled);
         await Promise.resolve();
       },
       inProgress(element) {
-        return hasClass(element, "uk-transition");
+        return hasClass(element, clsTransition);
       }
     };
     const animationPrefix = "uk-animation-";
+    const clsAnimationEnd = "animationend";
+    const clsAnimationCanceled = "animationcanceled";
     function animate$2(element, animation, duration = 200, origin, out) {
       return Promise.all(
         toNodes(element).map(
           (element2) => new Promise((resolve, reject) => {
-            trigger(element2, "animationcanceled");
-            const timer = setTimeout(() => trigger(element2, "animationend"), duration);
+            trigger(element2, clsAnimationCanceled);
+            const timer = setTimeout(() => trigger(element2, clsAnimationEnd), duration);
             once(
               element2,
-              "animationend animationcanceled",
+              [clsAnimationEnd, clsAnimationCanceled],
               ({ type }) => {
                 clearTimeout(timer);
-                type === "animationcanceled" ? reject() : resolve(element2);
+                type === clsAnimationCanceled ? reject() : resolve(element2);
                 css(element2, "animationDuration", "");
-                removeClasses(element2, `${animationPrefix}\\S*`);
+                removeClasses$1(element2, `${animationPrefix}\\S*`);
               },
               { self: true }
             );
@@ -684,7 +695,7 @@
         return inProgressRe.test(attr(element, "class"));
       },
       cancel(element) {
-        trigger(element, "animationcanceled");
+        trigger(element, clsAnimationCanceled);
       }
     };
 
@@ -742,20 +753,15 @@
     function unwrap(element) {
       toNodes(element).map(parent).filter((value, index, self) => self.indexOf(value) === index).forEach((parent2) => parent2.replaceWith(...parent2.childNodes));
     }
-    const fragmentRe = /^\s*<(\w+|!)[^>]*>/;
     const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
     function fragment(html2) {
       const matches = singleTagRe.exec(html2);
       if (matches) {
         return document.createElement(matches[1]);
       }
-      const container = document.createElement("div");
-      if (fragmentRe.test(html2)) {
-        container.insertAdjacentHTML("beforeend", html2.trim());
-      } else {
-        container.textContent = html2;
-      }
-      return unwrapSingle(container.childNodes);
+      const container = document.createElement("template");
+      container.innerHTML = html2.trim();
+      return unwrapSingle(container.content.childNodes);
     }
     function unwrapSingle(nodes) {
       return nodes.length > 1 ? nodes : nodes[0];
@@ -1210,21 +1216,34 @@
             offsetBy -= top;
             top = 0;
           }
-          return () => scrollTo(scrollElement, top - scrollTop).then(fn);
+          return () => scrollTo(scrollElement, top - scrollTop, element, maxScroll).then(fn);
         },
         () => Promise.resolve()
       )();
-      function scrollTo(element2, top) {
+      function scrollTo(element2, top, targetEl, maxScroll) {
         return new Promise((resolve) => {
           const scroll = element2.scrollTop;
           const duration = getDuration(Math.abs(top));
           const start = Date.now();
+          const targetTop = offset(targetEl).top;
+          let prev = 0;
+          let frames = 15;
           (function step() {
             const percent = ease(clamp((Date.now() - start) / duration));
-            element2.scrollTop = scroll + top * percent;
-            if (percent === 1) {
+            let diff = 0;
+            if (parents2[0] === element2 && scroll + top < maxScroll) {
+              diff = offset(targetEl).top - targetTop;
+              const fixedEl = findFixedElement(targetEl);
+              diff -= fixedEl ? offset(fixedEl).height : 0;
+            }
+            element2.scrollTop = Math[top + diff > 0 ? "max" : "min"](
+              element2.scrollTop,
+              scroll + (top + diff) * percent
+            );
+            if (percent === 1 && (prev === diff || !frames--)) {
               resolve();
             } else {
+              prev = diff;
               requestAnimationFrame(step);
             }
           })();
@@ -1236,6 +1255,11 @@
       function ease(k) {
         return 0.5 * (1 - Math.cos(Math.PI * k));
       }
+      function findFixedElement(target) {
+        return target.ownerDocument.elementsFromPoint(0, 0).find(
+          (el) => ["fixed", "sticky"].includes(css(el, "position")) && !el.contains(target)
+        );
+      }
     }
     function scrolledOver(element, startOffset = 0, endOffset = 0) {
       if (!isVisible(element)) {
@@ -1598,7 +1622,7 @@
         remove: remove$1,
         removeAttr: removeAttr,
         removeClass: removeClass,
-        removeClasses: removeClasses,
+        removeClasses: removeClasses$1,
         replaceClass: replaceClass,
         scrollIntoView: scrollIntoView,
         scrollParent: scrollParent,
@@ -1606,7 +1630,7 @@
         scrolledOver: scrolledOver,
         selFocusable: selFocusable,
         selInput: selInput,
-        sortBy: sortBy$1,
+        sortBy: sortBy,
         startsWith: startsWith,
         sumBy: sumBy,
         swap: swap,
@@ -1766,8 +1790,8 @@
         }
       });
       observer.observe(document, {
-        childList: true,
-        subtree: true
+        subtree: true,
+        childList: true
       });
     }
 
@@ -1865,7 +1889,7 @@
       return childVal !== false && concatStrat(childVal || parentVal);
     };
     strats.update = function(parentVal, childVal) {
-      return sortBy$1(
+      return sortBy(
         concatStrat(parentVal, isFunction(childVal) ? { read: childVal } : childVal),
         "order"
       );
@@ -2122,7 +2146,7 @@
     };
     App.util = util;
     App.options = {};
-    App.version = "3.16.27";
+    App.version = "3.17.1-dev.7c0766a6f";
 
     const PREFIX = "uk-";
     const DATA = "__uikit__";
@@ -2202,12 +2226,12 @@
         apply(document.body, connect);
       }
       new MutationObserver((records) => records.forEach(applyChildListMutation)).observe(document, {
-        childList: true,
-        subtree: true
+        subtree: true,
+        childList: true
       });
       new MutationObserver((records) => records.forEach(applyAttributeMutation)).observe(document, {
-        attributes: true,
-        subtree: true
+        subtree: true,
+        attributes: true
       });
       App._initialized = true;
     }
@@ -2393,10 +2417,7 @@
     function scroll$1(options) {
       return observe(
         (target, handler) => ({
-          disconnect: on(toScrollTargets(target), "scroll", handler, {
-            passive: true,
-            capture: true
-          })
+          disconnect: on(toScrollTargets(target), "scroll", handler, { passive: true })
         }),
         options,
         "scroll"
@@ -2629,7 +2650,6 @@
       }
     }
     function toggleAnimation(el, show, cmp) {
-      Animation.cancel(el);
       const { animation, duration, _toggle } = cmp;
       if (show) {
         _toggle(el, true);
@@ -2926,6 +2946,17 @@
       }
     };
 
+    const coverProps = {
+      top: 0,
+      // resets the css from [uk-cover]
+      left: 0,
+      // resets the css from [uk-cover]
+      width: "100%",
+      height: "100%",
+      transform: "none",
+      objectFit: "cover",
+      objectPosition: "center"
+    };
     var cover = {
       mixins: [Video],
       props: {
@@ -2941,10 +2972,25 @@
         }
       },
       observe: resize({
-        target: ({ $el }) => [getPositionedParent($el) || parent($el)]
+        target: ({ $el }) => [getPositionedParent($el) || parent($el)],
+        filter: ({ _useObjectFit }) => !_useObjectFit
       }),
+      connected() {
+        this._useObjectFit = isTag(this.$el, "img", "video");
+        if (this._useObjectFit) {
+          css(this.$el, coverProps);
+        }
+      },
+      disconnected() {
+        if (this._useObjectFit) {
+          attr(this.$el, "style", "");
+        }
+      },
       update: {
         read() {
+          if (this._useObjectFit) {
+            return;
+          }
           const { ratio, cover } = Dimensions;
           const { $el, width, height } = this;
           let dim = { width, height };
@@ -3127,7 +3173,8 @@
         autoUpdate: Boolean,
         clsDrop: String,
         animateOut: Boolean,
-        bgScroll: Boolean
+        bgScroll: Boolean,
+        closeOnScroll: Boolean
       },
       data: {
         mode: ["click", "hover"],
@@ -3147,7 +3194,8 @@
         bgScroll: true,
         animation: ["uk-animation-fade"],
         cls: "uk-open",
-        container: false
+        container: false,
+        closeOnScroll: false
       },
       computed: {
         boundary({ boundary, boundaryX, boundaryY }, $el) {
@@ -3274,12 +3322,10 @@
           name: "toggled",
           self: true,
           handler(e, toggled) {
-            attr(this.targetEl, "aria-expanded", toggled ? true : null);
-            if (!toggled) {
-              return;
+            if (toggled) {
+              this.clearTimers();
+              this.position();
             }
-            this.clearTimers();
-            this.position();
           }
         },
         {
@@ -3288,11 +3334,13 @@
           handler() {
             active$1 = this;
             this.tracker.init();
+            attr(this.targetEl, "aria-expanded", true);
             const handlers = [
               listenForResize(this),
               listenForEscClose$1(this),
               listenForBackgroundClose$1(this),
               this.autoUpdate && listenForScroll(this),
+              this.closeOnScroll && listenForScrollClose(this),
               !this.bgScroll && preventBackgroundScroll(this.$el)
             ];
             once(this.$el, "hide", () => handlers.forEach((handler) => handler && handler()), {
@@ -3316,6 +3364,7 @@
             }
             active$1 = this.isActive() ? null : active$1;
             this.tracker.cancel();
+            attr(this.targetEl, "aria-expanded", null);
           }
         }
       ],
@@ -3358,6 +3407,7 @@
         hide(delay = true, animate = true) {
           const hide = () => this.toggleElement(this.$el, false, this.animateOut && animate);
           this.clearTimers();
+          this.isDelayedHide = delay;
           this.isDelaying = getPositionedElements(this.$el).some(
             (el) => this.tracker.movesTo(el)
           );
@@ -3453,8 +3503,8 @@
       ];
       return () => off.map((observer) => observer.disconnect());
     }
-    function listenForScroll(drop) {
-      return on([document, ...overflowParents(drop.$el)], "scroll", () => drop.$emit(), {
+    function listenForScroll(drop, fn = () => drop.$emit()) {
+      return on([document, ...overflowParents(drop.$el)], "scroll", fn, {
         passive: true
       });
     }
@@ -3465,6 +3515,9 @@
         }
       });
     }
+    function listenForScrollClose(drop) {
+      return listenForScroll(drop, () => drop.hide(false));
+    }
     function listenForBackgroundClose$1(drop) {
       return on(document, pointerDown, ({ target }) => {
         if (!within(target, drop.$el)) {
@@ -3500,7 +3553,8 @@
         targetX: Boolean,
         targetY: Boolean,
         animation: Boolean,
-        animateOut: Boolean
+        animateOut: Boolean,
+        closeOnScroll: Boolean
       },
       data: {
         align: isRtl ? "right" : "left",
@@ -3524,6 +3578,9 @@
           dropbar = this._dropbar || query(dropbar, this.$el) || $(`+ .${this.clsDropbar}`, this.$el);
           return dropbar ? dropbar : this._dropbar = $("<div></div>");
         },
+        dropbarOffset() {
+          return 0;
+        },
         dropContainer(_, $el) {
           return this.container || $el;
         },
@@ -3685,9 +3742,13 @@
               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));
+              css(
+                this.dropbar,
+                "top",
+                this.dropbar.offsetTop - (dropbarOffset.top - minTop) - this.dropbarOffset
+              );
               this.transitionTo(
-                maxBottom - minTop + toFloat(css(target, "marginBottom")),
+                maxBottom - minTop + toFloat(css(target, "marginBottom")) + this.dropbarOffset,
                 target
               );
             };
@@ -3705,7 +3766,7 @@
           },
           handler(e) {
             const active2 = this.getActive();
-            if (matches(this.dropbar, ":hover") && active2.$el === e.target && !this.items.some((el) => active2.targetEl !== el && matches(el, ":focus"))) {
+            if (matches(this.dropbar, ":hover") && active2.$el === e.target && includes(active2.mode, "hover") && active2.isDelayedHide && !this.items.some((el) => active2.targetEl !== el && matches(el, ":focus"))) {
               e.preventDefault();
             }
           }
@@ -3874,62 +3935,51 @@
       ],
       update: {
         read() {
-          const rows = getRows(this.$el.children);
           return {
-            rows,
-            columns: getColumns(rows)
+            rows: getRows(toArray(this.$el.children))
           };
         },
-        write({ columns, rows }) {
+        write({ rows }) {
           for (const row of rows) {
-            for (const column of row) {
-              toggleClass(column, this.margin, rows[0] !== row);
-              toggleClass(column, this.firstColumn, columns[0].includes(column));
+            for (const el of row) {
+              toggleClass(el, this.margin, rows[0] !== row);
+              toggleClass(el, this.firstColumn, row[isRtl ? row.length - 1 : 0] === el);
             }
           }
         },
         events: ["resize"]
       }
     };
-    function getRows(items) {
-      return sortBy(items, "top", "bottom");
-    }
-    function getColumns(rows) {
-      const columns = [];
-      for (const row of rows) {
-        const sorted = sortBy(row, "left", "right");
-        for (let j = 0; j < sorted.length; j++) {
-          columns[j] = columns[j] ? columns[j].concat(sorted[j]) : sorted[j];
-        }
-      }
-      return isRtl ? columns.reverse() : columns;
-    }
-    function sortBy(items, startProp, endProp) {
+    function getRows(elements) {
       const sorted = [[]];
-      for (const el of items) {
+      const withOffset = elements.some(
+        (el, i) => i && elements[i - 1].offsetParent !== el.offsetParent
+      );
+      for (const el of elements) {
         if (!isVisible(el)) {
           continue;
         }
-        let dim = getOffset(el);
+        const offset = getOffset(el, withOffset);
         for (let i = sorted.length - 1; i >= 0; i--) {
           const current = sorted[i];
           if (!current[0]) {
             current.push(el);
             break;
           }
-          let startDim;
-          if (current[0].offsetParent === el.offsetParent) {
-            startDim = getOffset(current[0]);
-          } else {
-            dim = getOffset(el, true);
-            startDim = getOffset(current[0], true);
-          }
-          if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
+          const offsetCurrent = getOffset(current[0], withOffset);
+          if (offset.top >= offsetCurrent.bottom - 1 && offset.top !== offsetCurrent.top) {
             sorted.push([el]);
             break;
           }
-          if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
-            current.push(el);
+          if (offset.bottom - 1 > offsetCurrent.top || offset.top === offsetCurrent.top) {
+            let j = current.length - 1;
+            for (; j >= 0; j--) {
+              const offsetCurrent2 = getOffset(current[j], withOffset);
+              if (offset.left >= offsetCurrent2.left) {
+                break;
+              }
+            }
+            current.splice(j + 1, 0, el);
             break;
           }
           if (i === 0) {
@@ -3959,52 +4009,77 @@
       name: "grid",
       props: {
         masonry: Boolean,
-        parallax: Number
+        parallax: String,
+        parallaxStart: String,
+        parallaxEnd: String,
+        parallaxJustify: Boolean
       },
       data: {
         margin: "uk-grid-margin",
         clsStack: "uk-grid-stack",
         masonry: false,
-        parallax: 0
+        parallax: 0,
+        parallaxStart: 0,
+        parallaxEnd: 0,
+        parallaxJustify: false
       },
       connected() {
-        this.masonry && addClass(this.$el, "uk-flex-top uk-flex-wrap-top");
+        this.masonry && addClass(this.$el, "uk-flex-top", "uk-flex-wrap-top");
       },
-      observe: scroll$1({ filter: ({ parallax }) => parallax }),
+      observe: scroll$1({ filter: ({ parallax, parallaxJustify }) => parallax || parallaxJustify }),
       update: [
         {
-          write({ columns }) {
-            toggleClass(this.$el, this.clsStack, columns.length < 2);
+          write({ rows }) {
+            toggleClass(this.$el, this.clsStack, !rows[0][1]);
           },
           events: ["resize"]
         },
         {
           read(data) {
-            let { columns, rows } = data;
-            if (!columns.length || !this.masonry && !this.parallax || positionedAbsolute(this.$el)) {
-              data.translates = false;
-              return false;
+            const { rows } = data;
+            let { masonry, parallax, parallaxJustify, margin } = this;
+            parallax = Math.max(0, toPx(parallax));
+            if (!(masonry || parallax || parallaxJustify) || positionedAbsolute(rows) || rows[0].some(
+              (el, i) => rows.some((row) => row[i] && row[i].offsetWidth !== el.offsetWidth)
+            )) {
+              return data.translates = data.scrollColumns = false;
             }
-            let translates = false;
-            const nodes = children(this.$el);
-            const columnHeights = columns.map((column) => sumBy(column, "offsetHeight"));
-            const margin = getMarginTop(nodes, this.margin) * (rows.length - 1);
-            const elHeight = Math.max(...columnHeights) + margin;
-            if (this.masonry) {
-              columns = columns.map((column) => sortBy$1(column, "offsetTop"));
-              translates = getTranslates(rows, columns);
+            let gutter = getGutter(rows, margin);
+            let columns;
+            let translates;
+            if (masonry) {
+              [columns, translates] = applyMasonry(rows, gutter, masonry === "next");
+            } else {
+              columns = transpose(rows);
             }
-            let padding = Math.abs(this.parallax);
-            if (padding) {
-              padding = columnHeights.reduce(
-                (newPadding, hgt, i) => Math.max(
-                  newPadding,
-                  hgt + margin + (i % 2 ? padding : padding / 8) - elHeight
-                ),
-                0
+            const columnHeights = columns.map(
+              (column) => sumBy(column, "offsetHeight") + gutter * (column.length - 1)
+            );
+            const height = Math.max(0, ...columnHeights);
+            let scrollColumns;
+            let parallaxStart;
+            let parallaxEnd;
+            if (parallax || parallaxJustify) {
+              scrollColumns = columnHeights.map(
+                (hgt, i) => parallaxJustify ? height - hgt + parallax : parallax / (i % 2 || 8)
               );
+              if (!parallaxJustify) {
+                parallax = Math.max(
+                  ...columnHeights.map((hgt, i) => hgt + scrollColumns[i] - height)
+                );
+              }
+              parallaxStart = toPx(this.parallaxStart, "height", this.$el, true);
+              parallaxEnd = toPx(this.parallaxEnd, "height", this.$el, true);
             }
-            return { padding, columns, translates, height: translates ? elHeight : "" };
+            return {
+              columns,
+              translates,
+              scrollColumns,
+              parallaxStart,
+              parallaxEnd,
+              padding: parallax,
+              height: translates ? height : ""
+            };
           },
           write({ height, padding }) {
             css(this.$el, "paddingBottom", padding || "");
@@ -4013,47 +4088,78 @@
           events: ["resize"]
         },
         {
-          read() {
-            if (this.parallax && positionedAbsolute(this.$el)) {
+          read({ rows, scrollColumns, parallaxStart, parallaxEnd }) {
+            if (scrollColumns && positionedAbsolute(rows)) {
               return false;
             }
             return {
-              scrolled: this.parallax ? scrolledOver(this.$el) * Math.abs(this.parallax) : false
+              scrolled: scrollColumns ? scrolledOver(this.$el, parallaxStart, parallaxEnd) : false
             };
           },
-          write({ columns, scrolled, translates }) {
-            if (scrolled === false && !translates) {
+          write({ columns, scrolled, scrollColumns, translates }) {
+            if (!scrolled && !translates) {
               return;
             }
             columns.forEach(
-              (column, i) => column.forEach(
-                (el, j) => css(
-                  el,
-                  "transform",
-                  !scrolled && !translates ? "" : `translateY(${(translates && -translates[i][j]) + (scrolled ? i % 2 ? scrolled : scrolled / 8 : 0)}px)`
-                )
-              )
+              (column, i) => column.forEach((el, j) => {
+                let [x, y] = translates && translates[i][j] || [0, 0];
+                if (scrolled) {
+                  y += scrolled * scrollColumns[i];
+                }
+                css(el, "transform", `translate(${x}px, ${y}px)`);
+              })
             );
           },
           events: ["scroll", "resize"]
         }
       ]
     };
-    function positionedAbsolute(el) {
-      return children(el).some((el2) => css(el2, "position") === "absolute");
-    }
-    function getTranslates(rows, columns) {
-      const rowHeights = rows.map((row) => Math.max(...row.map((el) => el.offsetHeight)));
-      return columns.map((elements) => {
-        let prev = 0;
-        return elements.map(
-          (element, row) => prev += row ? rowHeights[row - 1] - elements[row - 1].offsetHeight : 0
-        );
-      });
+    function positionedAbsolute(rows) {
+      return rows.flat().some((el) => css(el, "position") === "absolute");
     }
-    function getMarginTop(nodes, cls) {
-      const [node] = nodes.filter((el) => hasClass(el, cls));
-      return toFloat(node ? css(node, "marginTop") : css(nodes[0], "paddingLeft"));
+    function applyMasonry(rows, gutter, next) {
+      const columns = [];
+      const translates = [];
+      const columnHeights = Array(rows[0].length).fill(0);
+      let rowHeights = 0;
+      for (let row of rows) {
+        if (isRtl) {
+          row = row.reverse();
+        }
+        let height = 0;
+        for (const j in row) {
+          const { offsetWidth, offsetHeight } = row[j];
+          const index = next ? j : columnHeights.indexOf(Math.min(...columnHeights));
+          push(columns, index, row[j]);
+          push(translates, index, [
+            (index - j) * offsetWidth * (isRtl ? -1 : 1),
+            columnHeights[index] - rowHeights
+          ]);
+          columnHeights[index] += offsetHeight + gutter;
+          height = Math.max(height, offsetHeight);
+        }
+        rowHeights += height + gutter;
+      }
+      return [columns, translates];
+    }
+    function getGutter(rows, cls) {
+      const node = rows.flat().find((el) => hasClass(el, cls));
+      return toFloat(node ? css(node, "marginTop") : css(rows[0][0], "paddingLeft"));
+    }
+    function transpose(rows) {
+      const columns = [];
+      for (const row of rows) {
+        for (const i in row) {
+          push(columns, i, row[i]);
+        }
+      }
+      return columns;
+    }
+    function push(array, index, value) {
+      if (!array[index]) {
+        array[index] = [];
+      }
+      array[index].push(value);
     }
 
     var heightMatch = {
@@ -4148,7 +4254,8 @@
           } else {
             if (this.offsetTop) {
               if (isScrollingElement) {
-                const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+                const offsetTopEl = this.offsetTop === true ? this.$el : query(this.offsetTop, this.$el);
+                const top = offsetPosition(offsetTopEl)[0] - offsetPosition(scrollElement)[0];
                 minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : "";
               } else {
                 minHeight += ` - ${css(scrollElement, "paddingTop")}`;
@@ -5005,10 +5112,23 @@
 
     var navbar = {
       extends: Dropnav,
+      props: {
+        dropbarTransparentMode: Boolean
+      },
       data: {
         clsDrop: "uk-navbar-dropdown",
-        selNavItem: ".uk-navbar-nav > li > a,a.uk-navbar-item,button.uk-navbar-item,.uk-navbar-item a,.uk-navbar-item button,.uk-navbar-toggle"
+        selNavItem: ".uk-navbar-nav > li > a,a.uk-navbar-item,button.uk-navbar-item,.uk-navbar-item a,.uk-navbar-item button,.uk-navbar-toggle",
         // Simplify with :where() selector once browser target is Safari 14+
+        selTransparentTarget: '[class*="uk-section"]',
+        dropbarTransparentMode: false
+      },
+      computed: {
+        dropbarOffset() {
+          return this.dropbarTransparentMode === "behind" ? this.$el.offsetHeight : 0;
+        },
+        navbarContainer() {
+          return closest(this.$el, ".uk-navbar-container");
+        }
       },
       watch: {
         items() {
@@ -5027,8 +5147,153 @@
             );
           }
         }
+      },
+      disconnect() {
+        var _a;
+        (_a = this._colorListener) == null ? void 0 : _a.call(this);
+      },
+      observe: [
+        mutation({
+          target: ({ navbarContainer }) => navbarContainer,
+          handler() {
+            this.registerColorListener();
+          },
+          options: { attributes: true, attributeFilter: ["class"], attributeOldValue: true }
+        }),
+        intersection({
+          handler(records) {
+            this._isIntersecting = records[0].isIntersecting;
+            this.registerColorListener();
+          },
+          args: { intersecting: false }
+        })
+      ],
+      events: [
+        {
+          name: "show",
+          el() {
+            return this.dropContainer;
+          },
+          handler({ target }) {
+            const transparentMode = this.getTransparentMode(target);
+            if (!transparentMode || this._mode) {
+              return;
+            }
+            const storePrevColor = () => this._mode = removeClasses(this.navbarContainer, "uk-light", "uk-dark");
+            if (transparentMode === "behind") {
+              const mode = getDropbarBehindColor(this.$el);
+              if (mode) {
+                storePrevColor();
+                addClass(this.navbarContainer, `uk-${mode}`);
+              }
+            }
+            if (transparentMode === "remove") {
+              storePrevColor();
+              removeClass(this.navbarContainer, "uk-navbar-transparent");
+            }
+          }
+        },
+        {
+          name: "hide",
+          el() {
+            return this.dropContainer;
+          },
+          async handler({ target }) {
+            const transparentMode = this.getTransparentMode(target);
+            if (!transparentMode || !this._mode) {
+              return;
+            }
+            await awaitMacroTask();
+            if (this.getActive()) {
+              return;
+            }
+            if (transparentMode === "behind") {
+              const mode = getDropbarBehindColor(this.$el);
+              if (mode) {
+                removeClass(this.navbarContainer, `uk-${mode}`);
+              }
+            }
+            addClass(this.navbarContainer, this._mode);
+            if (transparentMode === "remove") {
+              addClass(this.navbarContainer, "uk-navbar-transparent");
+            }
+            this._mode = null;
+          }
+        }
+      ],
+      methods: {
+        getTransparentMode(el) {
+          if (!this.navbarContainer) {
+            return;
+          }
+          if (this.dropbar && this.isDropbarDrop(el)) {
+            return this.dropbarTransparentMode;
+          }
+          const drop = this.getDropdown(el);
+          if (!drop || !hasClass(el, "uk-dropbar")) {
+            return;
+          }
+          return drop.inset ? "behind" : "remove";
+        },
+        registerColorListener() {
+          const active = this._isIntersecting && hasClass(this.navbarContainer, "uk-navbar-transparent") && !isWithinMixBlendMode(this.navbarContainer) && !$$(".uk-drop", this.dropContainer).map(this.getDropdown).some(
+            (drop) => drop.isToggled() && (drop.inset || this.getTransparentMode(drop.$el) === "behind")
+          );
+          if (this._colorListener) {
+            if (!active) {
+              this._colorListener();
+              this._colorListener = null;
+            }
+            return;
+          }
+          if (!active) {
+            return;
+          }
+          this._colorListener = listenForPositionChange(this.navbarContainer, () => {
+            const { left, top, height } = offset(this.navbarContainer);
+            const startPoint = { x: left, y: Math.max(0, top) + height / 2 };
+            const target = $$(this.selTransparentTarget).find(
+              (target2) => pointInRect(startPoint, offset(target2))
+            );
+            const color = css(target, "--uk-navbar-color");
+            if (color) {
+              replaceClass(this.navbarContainer, "uk-light,uk-dark", `uk-${color}`);
+            }
+          });
+        }
       }
     };
+    function removeClasses(el, ...classes) {
+      for (const cls of classes) {
+        if (hasClass(el, cls)) {
+          removeClass(el, cls);
+          return cls;
+        }
+      }
+    }
+    async function awaitMacroTask() {
+      return new Promise((resolve) => setTimeout(resolve));
+    }
+    function getDropbarBehindColor(el) {
+      return css(el, "--uk-navbar-dropbar-behind-color");
+    }
+    function listenForPositionChange(el, handler) {
+      const parent2 = scrollParent(el, true);
+      const scrollEl = parent2 === document.documentElement ? document : parent2;
+      const off = on(scrollEl, "scroll", handler, { passive: true });
+      const observer = observeResize([el, parent2], handler);
+      return () => {
+        off();
+        observer.disconnect();
+      };
+    }
+    function isWithinMixBlendMode(el) {
+      do {
+        if (css(el, "mixBlendMode") !== "normal") {
+          return true;
+        }
+      } while (el = parent(el));
+    }
 
     var offcanvas = {
       mixins: [Modal],
@@ -5343,7 +5608,7 @@
           }
           this.$emit();
         },
-        options: (instance) => ({ rootMargin: instance.margin }),
+        options: ({ margin }) => ({ rootMargin: margin }),
         args: { intersecting: false }
       }),
       update: [
@@ -5378,7 +5643,7 @@
           toggleClass(el, this.inViewClass, inview);
           toggleClass(el, state.cls);
           if (/\buk-animation-/.test(state.cls)) {
-            const removeAnimationClasses = () => removeClasses(el, "uk-animation-[\\w-]+");
+            const removeAnimationClasses = () => removeClasses$1(el, "uk-animation-[\\w-]+");
             if (inview) {
               state.off = once(el, "animationcancel animationend", removeAnimationClasses);
             } else {
@@ -5395,7 +5660,7 @@
     var scrollspyNav = {
       props: {
         cls: String,
-        closest: String,
+        closest: Boolean,
         scroll: Boolean,
         overflow: Boolean,
         offset: Number
@@ -5412,13 +5677,13 @@
           return $$('a[href*="#"]', $el).filter((el) => el.hash && isSameSiteAnchor(el));
         },
         elements({ closest: selector }) {
-          return closest(this.links, selector || "*");
+          return this.links.map((el) => closest(el, selector || "*"));
         }
       },
       watch: {
         links(links) {
           if (this.scroll) {
-            this.$create("scroll", links, { offset: this.offset || 0 });
+            this.$create("scroll", links, { offset: this.offset });
           }
         }
       },
@@ -5440,7 +5705,9 @@
               active = length - 1;
             } else {
               for (let i = 0; i < targets.length; i++) {
-                if (offset(targets[i]).top - viewport.top - this.offset > 0) {
+                const fixedEl = findFixedElement(targets[i]);
+                const offsetBy = this.offset + (fixedEl ? offset(fixedEl).height : 0);
+                if (offset(targets[i]).top - viewport.top - offsetBy > 0) {
                   break;
                 }
                 active = +i;
@@ -5465,6 +5732,9 @@
         }
       ]
     };
+    function findFixedElement(target) {
+      return target.ownerDocument.elementsFromPoint(1, 1).find((el) => ["fixed", "sticky"].includes(css(el, "position")) && !el.contains(target));
+    }
 
     var sticky = {
       mixins: [Class, Media],
@@ -5553,7 +5823,6 @@
         },
         {
           name: "transitionstart",
-          capture: true,
           handler() {
             this.transitionInProgress = once(
               this.$el,
@@ -5584,7 +5853,10 @@
             }
             const viewport2 = toPx("100vh", "height");
             const dynamicViewport = height(window);
-            const maxScrollHeight = document.scrollingElement.scrollHeight - viewport2;
+            const maxScrollHeight = Math.max(
+              0,
+              document.scrollingElement.scrollHeight - viewport2
+            );
             let position = this.position;
             if (this.overflowFlip && height$1 > viewport2) {
               position = position === "top" ? "bottom" : "top";
@@ -5699,7 +5971,9 @@
                 return;
               }
               if (this.animation && scroll2 > topOffset) {
-                Animation.cancel(this.$el);
+                if (hasClass(this.$el, "uk-animation-leave")) {
+                  return;
+                }
                 Animation.out(this.$el, this.animation).then(() => this.hide(), noop);
               } else {
                 this.hide();
@@ -5707,7 +5981,6 @@
             } else if (this.isFixed) {
               this.update();
             } else if (this.animation && scroll2 > topOffset) {
-              Animation.cancel(this.$el);
               this.show();
               Animation.in(this.$el, this.animation).catch(noop);
             } else {
@@ -5760,15 +6033,12 @@
           if (!sticky) {
             let position = "fixed";
             if (scroll2 > end) {
-              offset += end - offsetParentTop;
+              offset += end - offsetParentTop + overflowScroll - overflow;
               position = "absolute";
             }
             css(this.$el, { position, width, marginTop: 0 }, "important");
           }
-          if (overflow) {
-            offset -= overflowScroll;
-          }
-          css(this.$el, "top", offset);
+          css(this.$el, "top", offset - overflowScroll);
           this.setActive(active);
           toggleClass(
             this.$el,