uikit 3.17.12-dev.f1425d280 → 3.18.1-dev.edde0251f

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.17.12-dev.f1425d280 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.18.1-dev.edde0251f | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -245,7 +245,7 @@
         }
       }
     }
-    function removeClasses$1(element, clsRegex) {
+    function removeClasses(element, clsRegex) {
       clsRegex = new RegExp(clsRegex);
       for (const node of toNodes(element)) {
         node.classList.remove(...toArray(node.classList).filter((cls) => cls.match(clsRegex)));
@@ -402,7 +402,9 @@
             selector += `${selector ? "," : ""}${domPath(ctx)} ${sel}`;
           }
         }
-        context = document;
+        if (!isDocument(context)) {
+          context = context.ownerDocument;
+        }
       }
       try {
         return context[queryFn](selector);
@@ -410,7 +412,7 @@
         return null;
       }
     }
-    const selectorRe = /.*?[^\\](?:,|$)/g;
+    const selectorRe = /.*?[^\\](?![^(]*\))(?:,|$)/g;
     const splitSelector = memoize(
       (selector) => selector.match(selectorRe).map((selector2) => selector2.replace(/,$/, "").trim())
     );
@@ -576,8 +578,9 @@
           }
           return props;
         } else if (isObject(property)) {
-          priority = value;
-          each(property, (value2, property2) => css(element2, property2, value2, priority));
+          for (const prop in property) {
+            css(element2, prop, property[prop], value);
+          }
         }
       }
       return elements[0];
@@ -601,8 +604,8 @@
     }
 
     const clsTransition = "uk-transition";
-    const clsTransitionEnd = "transitionend";
-    const clsTransitionCanceled = "transitioncanceled";
+    const transitionEnd = "transitionend";
+    const transitionCanceled = "transitioncanceled";
     function transition$1(element, props, duration = 400, timing = "linear") {
       duration = Math.round(duration);
       return Promise.all(
@@ -614,10 +617,10 @@
                 css(element2, name, value);
               }
             }
-            const timer = setTimeout(() => trigger(element2, clsTransitionEnd), duration);
+            const timer = setTimeout(() => trigger(element2, transitionEnd), duration);
             once(
               element2,
-              [clsTransitionEnd, clsTransitionCanceled],
+              [transitionEnd, transitionCanceled],
               ({ type }) => {
                 clearTimeout(timer);
                 removeClass(element2, clsTransition);
@@ -626,7 +629,7 @@
                   transitionDuration: "",
                   transitionTimingFunction: ""
                 });
-                type === clsTransitionCanceled ? reject() : resolve(element2);
+                type === transitionCanceled ? reject() : resolve(element2);
               },
               { self: true }
             );
@@ -644,11 +647,11 @@
     const Transition = {
       start: transition$1,
       async stop(element) {
-        trigger(element, clsTransitionEnd);
+        trigger(element, transitionEnd);
         await Promise.resolve();
       },
       async cancel(element) {
-        trigger(element, clsTransitionCanceled);
+        trigger(element, transitionCanceled);
         await Promise.resolve();
       },
       inProgress(element) {
@@ -656,22 +659,22 @@
       }
     };
     const animationPrefix = "uk-animation-";
-    const clsAnimationEnd = "animationend";
-    const clsAnimationCanceled = "animationcanceled";
+    const animationEnd = "animationend";
+    const animationCanceled = "animationcanceled";
     function animate$2(element, animation, duration = 200, origin, out) {
       return Promise.all(
         toNodes(element).map(
           (element2) => new Promise((resolve, reject) => {
-            trigger(element2, clsAnimationCanceled);
-            const timer = setTimeout(() => trigger(element2, clsAnimationEnd), duration);
+            trigger(element2, animationCanceled);
+            const timer = setTimeout(() => trigger(element2, animationEnd), duration);
             once(
               element2,
-              [clsAnimationEnd, clsAnimationCanceled],
+              [animationEnd, animationCanceled],
               ({ type }) => {
                 clearTimeout(timer);
-                type === clsAnimationCanceled ? reject() : resolve(element2);
+                type === animationCanceled ? reject() : resolve(element2);
                 css(element2, "animationDuration", "");
-                removeClasses$1(element2, `${animationPrefix}\\S*`);
+                removeClasses(element2, `${animationPrefix}\\S*`);
               },
               { self: true }
             );
@@ -695,7 +698,7 @@
         return inProgressRe.test(attr(element, "class"));
       },
       cancel(element) {
-        trigger(element, clsAnimationCanceled);
+        trigger(element, animationCanceled);
       }
     };
 
@@ -737,8 +740,8 @@
     }
     function wrapAll(element, structure) {
       structure = toNode(before(element, structure));
-      while (structure.firstChild) {
-        structure = structure.firstChild;
+      while (structure.firstElementChild) {
+        structure = structure.firstElementChild;
       }
       append(structure, element);
       return structure;
@@ -1005,10 +1008,7 @@
       return ~index && array.splice(index, 1);
     }
 
-    function MouseTracker() {
-    }
-    MouseTracker.prototype = {
-      positions: [],
+    class MouseTracker {
       init() {
         this.positions = [];
         let position;
@@ -1022,17 +1022,17 @@
             this.positions.shift();
           }
         }, 50);
-      },
+      }
       cancel() {
         var _a;
         (_a = this.unbind) == null ? void 0 : _a.call(this);
         clearInterval(this.interval);
-      },
+      }
       movesTo(target) {
-        if (this.positions.length < 2) {
+        if (!this.positions || this.positions.length < 2) {
           return false;
         }
-        const p = target.getBoundingClientRect();
+        const p = dimensions(target);
         const { left, right, top, bottom } = p;
         const [prevPosition] = this.positions;
         const position = last(this.positions);
@@ -1055,7 +1055,7 @@
           return intersection && pointInRect(intersection, p);
         });
       }
-    };
+    }
     function intersect([{ x: x1, y: y1 }, { x: x2, y: y2 }], [{ x: x3, y: y3 }, { x: x4, y: y4 }]) {
       const denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
       if (denominator === 0) {
@@ -1268,7 +1268,7 @@
       const elementOffsetTop = offsetPosition(element)[0] - offsetPosition(scrollElement)[0];
       const start = Math.max(0, elementOffsetTop - viewportHeight + startOffset);
       const end = Math.min(maxScroll, elementOffsetTop + element.offsetHeight - endOffset);
-      return clamp((scrollTop - start) / (end - start));
+      return start < end ? clamp((scrollTop - start) / (end - start)) : 1;
     }
     function scrollParents(element, scrollable = false, props = []) {
       const scrollEl = scrollingElement(element);
@@ -1308,7 +1308,7 @@
         ["height", "y", "top", "bottom"]
       ]) {
         if (isWindow(viewportElement)) {
-          viewportElement = window.document.documentElement;
+          viewportElement = scrollElement.ownerDocument;
         } else {
           rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
         }
@@ -1319,8 +1319,10 @@
       return rect;
     }
     function getCoveringElement(target) {
-      return target.ownerDocument.elementsFromPoint(offset(target).left, 0).find(
-        (el) => !el.contains(target) && (hasPosition(el, "fixed") && zIndex(
+      const { left, width, top } = dimensions(target);
+      return target.ownerDocument.elementsFromPoint(left + width / 2, top).find(
+        (el) => !el.contains(target) && // If e.g. Offcanvas is not yet closed
+        !hasClass(el, "uk-togglable-leave") && (hasPosition(el, "fixed") && zIndex(
           parents(target).reverse().find((parent2) => !parent2.contains(el) && !hasPosition(parent2, "static"))
         ) < zIndex(el) || hasPosition(el, "sticky") && parent(el).contains(target))
       );
@@ -1628,7 +1630,7 @@
         remove: remove$1,
         removeAttr: removeAttr,
         removeClass: removeClass,
-        removeClasses: removeClasses$1,
+        removeClasses: removeClasses,
         replaceClass: replaceClass,
         scrollIntoView: scrollIntoView,
         scrollParent: scrollParent,
@@ -2147,7 +2149,7 @@
     };
     App.util = util;
     App.options = {};
-    App.version = "3.17.12-dev.f1425d280";
+    App.version = "3.18.1-dev.edde0251f";
 
     const PREFIX = "uk-";
     const DATA = "__uikit__";
@@ -2831,7 +2833,7 @@
       let frame;
       (function scroll() {
         frame = requestAnimationFrame(() => {
-          const { top } = el.getBoundingClientRect();
+          const { top } = dimensions(el);
           if (top < 0) {
             scrollElement.scrollTop += top;
           }
@@ -3007,39 +3009,6 @@
       }
     };
 
-    let prevented;
-    function preventBackgroundScroll(el) {
-      const off = on(
-        el,
-        "touchmove",
-        (e) => {
-          if (e.targetTouches.length !== 1 || matches(e.target, 'input[type="range"')) {
-            return;
-          }
-          let { scrollHeight, clientHeight, scrollWidth, clientWidth } = scrollParent(e.target);
-          if (e.cancelable && clientHeight >= scrollHeight && clientWidth >= scrollWidth) {
-            e.preventDefault();
-          }
-        },
-        { passive: false }
-      );
-      if (prevented) {
-        return off;
-      }
-      prevented = true;
-      const { scrollingElement } = document;
-      css(scrollingElement, {
-        overflowY: CSS.supports("overflow", "clip") ? "clip" : "hidden",
-        touchAction: "none",
-        paddingRight: width(window) - scrollingElement.clientWidth || ""
-      });
-      return () => {
-        prevented = false;
-        off();
-        css(scrollingElement, { overflowY: "", touchAction: "", paddingRight: "" });
-      };
-    }
-
     var Position = {
       props: {
         pos: String,
@@ -3116,6 +3085,39 @@
       };
     }
 
+    let prevented;
+    function preventBackgroundScroll(el) {
+      const off = on(
+        el,
+        "touchmove",
+        (e) => {
+          if (e.targetTouches.length !== 1 || matches(e.target, 'input[type="range"')) {
+            return;
+          }
+          let { scrollHeight, clientHeight } = scrollParent(e.target);
+          if (clientHeight >= scrollHeight && e.cancelable) {
+            e.preventDefault();
+          }
+        },
+        { passive: false }
+      );
+      if (prevented) {
+        return off;
+      }
+      prevented = true;
+      const { scrollingElement } = document;
+      css(scrollingElement, {
+        overflowY: CSS.supports("overflow", "clip") ? "clip" : "hidden",
+        touchAction: "none",
+        paddingRight: width(window) - scrollingElement.clientWidth || ""
+      });
+      return () => {
+        prevented = false;
+        off();
+        css(scrollingElement, { overflowY: "", touchAction: "", paddingRight: "" });
+      };
+    }
+
     let active$1;
     var drop = {
       mixins: [Container, Position, Togglable],
@@ -3315,9 +3317,7 @@
         {
           name: "beforehide",
           self: true,
-          handler() {
-            this.clearTimers();
-          }
+          handler: "clearTimers"
         },
         {
           name: "hide",
@@ -3541,8 +3541,12 @@
           dropbar = this._dropbar || query(dropbar, this.$el) || $(`+ .${this.clsDropbar}`, this.$el);
           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) {
           return this.container || $el;
@@ -3701,17 +3705,12 @@
             }
             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
               );
             };
@@ -3765,17 +3764,21 @@
           const oldHeight = height(dropbar);
           el = oldHeight < newHeight && el;
           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);
           await Promise.all([
             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);
         },
         getDropdown(el) {
@@ -4160,7 +4163,9 @@
       let heights = elements.map(getHeight);
       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
       };
     }
@@ -4170,11 +4175,34 @@
         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;
     }
 
+    var heightPlaceholder = {
+      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: height2 }) {
+          css(this.$el, { minHeight: height2 });
+        },
+        events: ["resize"]
+      }
+    };
+
     var heightViewport = {
       props: {
         expand: Boolean,
@@ -4254,7 +4282,7 @@
 
     var navbarParentIcon = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" points=\"1 3.5 6 8.5 11 3.5\"/></svg>";
 
-    var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><style>.uk-navbar-toggle-animate svg&gt;[class*=&quot;line-&quot;]{transition:0.2s ease-in-out;transition-property:transform, opacity;transform-origin:center;opacity:1}.uk-navbar-toggle svg&gt;.line-3{opacity:0}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-3{opacity:1}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-2{transform:rotate(45deg)}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-3{transform:rotate(-45deg)}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-1,.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-4{opacity:0}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-1{transform:translateY(6px) scaleX(0)}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-4{transform:translateY(-6px) scaleX(0)}</style><rect class=\"line-1\" y=\"3\" width=\"20\" height=\"2\"/><rect class=\"line-2\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-3\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-4\" y=\"15\" width=\"20\" height=\"2\"/></svg>";
+    var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><style>.uk-navbar-toggle-animate svg&gt;[class*=&quot;line-&quot;]{transition:0.2s ease-in-out;transition-property:transform, opacity;transform-origin:center;opacity:1}.uk-navbar-toggle-animate svg&gt;.line-3{opacity:0}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-3{opacity:1}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-2{transform:rotate(45deg)}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-3{transform:rotate(-45deg)}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-1,.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-4{opacity:0}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-1{transform:translateY(6px) scaleX(0)}.uk-navbar-toggle-animate[aria-expanded=&quot;true&quot;] svg&gt;.line-4{transform:translateY(-6px) scaleX(0)}</style><rect class=\"line-1\" y=\"3\" width=\"20\" height=\"2\"/><rect class=\"line-2\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-3\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-4\" y=\"15\" width=\"20\" height=\"2\"/></svg>";
 
     var overlayIcon = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><rect x=\"19\" y=\"0\" width=\"1\" height=\"40\"/><rect x=\"0\" y=\"19\" width=\"40\" height=\"1\"/></svg>";
 
@@ -4382,6 +4410,7 @@
       "search-icon": searchIcon,
       "search-large": searchLarge,
       "search-navbar": searchNavbar,
+      "search-toggle-icon": searchIcon,
       "slidenav-next": slidenavNext,
       "slidenav-next-large": slidenavNextLarge,
       "slidenav-previous": slidenavPrevious,
@@ -4428,11 +4457,12 @@
       mixins: [I18n],
       i18n: { toggle: "Open Search", submit: "Submit Search" },
       beforeConnect() {
-        this.icon = hasClass(this.$el, "uk-search-icon") && parents(this.$el, ".uk-search-large").length ? "search-large" : parents(this.$el, ".uk-search-navbar").length ? "search-navbar" : this.$props.icon;
+        const isToggle = hasClass(this.$el, "uk-search-toggle") || hasClass(this.$el, "uk-navbar-toggle");
+        this.icon = isToggle ? "search-toggle-icon" : hasClass(this.$el, "uk-search-icon") && closest(this.$el, ".uk-search-large") ? "search-large" : closest(this.$el, ".uk-search-navbar") ? "search-navbar" : this.$props.icon;
         if (hasAttr(this.$el, "aria-label")) {
           return;
         }
-        if (hasClass(this.$el, "uk-search-toggle") || hasClass(this.$el, "uk-navbar-toggle")) {
+        if (isToggle) {
           const label = this.t("toggle");
           attr(this.$el, "aria-label", label);
         } else {
@@ -4526,7 +4556,9 @@
         }
       };
     }
+    const aliases = { twitter: "x" };
     function getIcon(icon) {
+      icon = aliases[icon] || icon;
       if (!icons[icon]) {
         return null;
       }
@@ -4665,6 +4697,90 @@
       return isTag(el, "img");
     }
 
+    var inverse = {
+      props: {
+        target: String,
+        selActive: String
+      },
+      data: {
+        target: false,
+        selActive: false
+      },
+      computed: {
+        target: ({ target }, $el) => target ? $$(target, $el) : [$el]
+      },
+      observe: [
+        mutation({
+          target: ({ target }) => target,
+          options: { attributes: true, attributeFilter: ["class"], attributeOldValue: true }
+        }),
+        {
+          target: ({ target }) => target,
+          observe: (target, handler) => {
+            const observer = observeResize([...target, document.documentElement], handler);
+            const listener = [
+              on(document, "scroll itemshown itemhidden", handler, {
+                passive: true,
+                capture: true
+              }),
+              on(document, "show hide transitionstart", (e) => {
+                handler();
+                return observer.observe(e.target);
+              }),
+              on(document, "shown hidden transitionend transitioncancel", (e) => {
+                handler();
+                return observer.unobserve(e.target);
+              })
+            ];
+            return {
+              disconnect() {
+                observer.disconnect();
+                listener.map((off) => off());
+              }
+            };
+          },
+          handler() {
+            this.$emit();
+          }
+        }
+      ],
+      update: {
+        read() {
+          for (const target of this.target) {
+            replaceClass(
+              target,
+              "uk-light,uk-dark",
+              !this.selActive || matches(target, this.selActive) ? findTargetColor(target) : ""
+            );
+          }
+        }
+      }
+    };
+    function findTargetColor(target) {
+      const { left, top, height, width } = dimensions(target);
+      let last;
+      for (const percent of [0.25, 0.5, 0.75]) {
+        const elements = target.ownerDocument.elementsFromPoint(
+          Math.max(0, left) + width * percent,
+          Math.max(0, top) + height / 2
+        );
+        for (const element of elements) {
+          if (target.contains(element) || element.closest('[class*="-leave"]') && elements.some((el) => element !== el && matches(el, '[class*="-enter"]'))) {
+            continue;
+          }
+          const color = css(element, "--uk-inverse");
+          if (color) {
+            if (color === last) {
+              return `uk-${color}`;
+            }
+            last = color;
+            break;
+          }
+        }
+      }
+      return last ? `uk-${last}` : "";
+    }
+
     var Media = {
       props: {
         media: Boolean
@@ -4964,6 +5080,15 @@
         selClose: ".uk-modal-close, .uk-modal-close-default, .uk-modal-close-outside, .uk-modal-close-full"
       },
       events: [
+        {
+          name: "fullscreenchange webkitendfullscreen",
+          capture: true,
+          handler(e) {
+            if (isTag(e.target, "video") && this.isToggled() && !document.fullscreenElement) {
+              this.hide();
+            }
+          }
+        },
         {
           name: "show",
           self: true,
@@ -5065,6 +5190,7 @@
       }
     };
 
+    const clsNavbarTransparent = "uk-navbar-transparent";
     var navbar = {
       extends: Dropnav,
       props: {
@@ -5074,49 +5200,25 @@
         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",
         // Simplify with :where() selector once browser target is Safari 14+
-        selTransparentTarget: '[class*="uk-section"]',
         dropbarTransparentMode: false
       },
       computed: {
         navbarContainer: (_, $el) => $el.closest(".uk-navbar-container"),
-        dropbarOffset: ({ dropbarTransparentMode }, $el) => dropbarTransparentMode === "behind" ? $el.offsetHeight : 0
+        dropbarOffset({ dropbarTransparentMode }) {
+          const { offsetTop, offsetHeight } = this.navbarContainer;
+          return offsetTop + (dropbarTransparentMode === "behind" ? 0 : offsetHeight + this.dropbarPositionOffset);
+        }
       },
       watch: {
         items() {
           const justify = hasClass(this.$el, "uk-navbar-justify");
-          for (const container of $$(
-            ".uk-navbar-nav, .uk-navbar-left, .uk-navbar-right",
-            this.$el
-          )) {
-            css(
-              container,
-              "flexGrow",
-              justify ? $$(
-                ".uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle",
-                container
-              ).length : ""
-            );
+          const containers = $$(".uk-navbar-nav, .uk-navbar-left, .uk-navbar-right", this.$el);
+          for (const container of containers) {
+            const items = justify ? $$(".uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle", container).length : "";
+            css(container, "flexGrow", items);
           }
         }
       },
-      disconnect() {
-        var _a;
-        (_a = this._colorListener) == null ? void 0 : _a.call(this);
-      },
-      observe: [
-        mutation({
-          target: ({ navbarContainer }) => navbarContainer,
-          handler: "registerColorListener",
-          options: { attributes: true, attributeFilter: ["class"], attributeOldValue: true }
-        }),
-        intersection({
-          handler(records) {
-            this._isIntersecting = records[0].isIntersecting;
-            this.registerColorListener();
-          },
-          args: { intersecting: false }
-        })
-      ],
       events: [
         {
           name: "show",
@@ -5124,21 +5226,9 @@
             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");
+            if (this.getTransparentMode(target) === "remove" && hasClass(this.navbarContainer, clsNavbarTransparent)) {
+              removeClass(this.navbarContainer, clsNavbarTransparent);
+              this._transparent = true;
             }
           }
         },
@@ -5147,26 +5237,12 @@
           el() {
             return this.dropContainer;
           },
-          async handler({ target }) {
-            const transparentMode = this.getTransparentMode(target);
-            if (!transparentMode || !this._mode) {
-              return;
-            }
+          async handler() {
             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");
+            if (!this.getActive() && this._transparent) {
+              addClass(this.navbarContainer, clsNavbarTransparent);
+              this._transparent = null;
             }
-            this._mode = null;
           }
         }
       ],
@@ -5179,70 +5255,15 @@
             return this.dropbarTransparentMode;
           }
           const drop = this.getDropdown(el);
-          if (!drop || !hasClass(el, "uk-dropbar")) {
-            return;
+          if (drop && hasClass(el, "uk-dropbar")) {
+            return drop.inset ? "behind" : "remove";
           }
-          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() {
+    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],
@@ -5410,27 +5431,7 @@
       props: ["width", "height"],
       connected() {
         addClass(this.$el, "uk-responsive-width");
-      },
-      observe: resize({
-        target: ({ $el }) => [$el, parent($el)]
-      }),
-      update: {
-        read() {
-          return isVisible(this.$el) && this.width && this.height ? { width: width(parent(this.$el)), height: this.height } : false;
-        },
-        write(dim) {
-          height(
-            this.$el,
-            Dimensions.contain(
-              {
-                height: this.height,
-                width: this.width
-              },
-              dim
-            ).height
-          );
-        },
-        events: ["resize"]
+        css(this.$el, "aspectRatio", `${this.width}/${this.height}`);
       }
     };
 
@@ -5576,7 +5577,7 @@
           toggleClass(el, this.inViewClass, inview);
           toggleClass(el, state.cls);
           if (/\buk-animation-/.test(state.cls)) {
-            const removeAnimationClasses = () => removeClasses$1(el, "uk-animation-[\\w-]+");
+            const removeAnimationClasses = () => removeClasses(el, "uk-animation-[\\w-]+");
             if (inview) {
               state.off = once(el, "animationcancel animationend", removeAnimationClasses, {
                 self: true
@@ -5703,7 +5704,7 @@
         targetOffset: false
       },
       computed: {
-        selTarget: ({ selTarget }, $el) => selTarget && $(selTarget, $el) || $el
+        target: ({ selTarget }, $el) => selTarget && $(selTarget, $el) || $el
       },
       connected() {
         this.start = coerce(this.start || this.top);
@@ -5715,16 +5716,26 @@
       beforeDisconnect() {
         if (this.isFixed) {
           this.hide();
-          removeClass(this.selTarget, this.clsInactive);
+          removeClass(this.target, this.clsInactive);
         }
         reset(this.$el);
         remove$1(this.placeholder);
         this.placeholder = null;
       },
       observe: [
-        viewport(),
+        viewport({
+          handler() {
+            if (toPx("100vh", "height") !== this._data.viewport) {
+              this.$emit("resize");
+            }
+          }
+        }),
         scroll$1({ target: () => document.scrollingElement }),
-        resize({ target: ({ $el }) => [$el, document.scrollingElement] })
+        resize({
+          target: () => document.scrollingElement,
+          options: { box: "content-box" }
+        }),
+        resize({ target: ({ $el }) => $el })
       ],
       events: [
         {
@@ -5769,7 +5780,7 @@
             }
             const hide = this.isFixed && !this.transitionInProgress;
             if (hide) {
-              preventTransition(this.$el);
+              preventTransition(this.target);
               this.hide();
             }
             if (!this.active) {
@@ -5804,20 +5815,20 @@
             );
             sticky = maxScrollHeight && !this.showOnUp && start + offset$1 === topOffset && end === Math.min(
               maxScrollHeight,
-              parseProp("!*", this.$el, 0, true) - elHeight - offset$1 + overflow
+              parseProp(true, this.$el, 0, true) - elHeight - offset$1 + overflow
             ) && css(parent(this.$el), "overflowY") === "visible";
             return {
               start,
               end,
               offset: offset$1,
               overflow,
-              topOffset,
               height: height$1,
               elHeight,
               width,
               margin,
               top: offsetPosition(referenceElement)[0],
-              sticky
+              sticky,
+              viewport: viewport2
             };
           },
           write({ height, width, margin, offset, sticky }) {
@@ -5833,10 +5844,10 @@
             }
             const { placeholder } = this;
             css(placeholder, { height, width, margin });
-            if (!document.contains(placeholder)) {
+            if (parent(placeholder) !== parent(this.$el) || sticky ^ index(placeholder) < index(this.$el)) {
+              (sticky ? before : after)(this.$el, placeholder);
               placeholder.hidden = true;
             }
-            (sticky ? before : after)(this.$el, placeholder);
           },
           events: ["resize"]
         },
@@ -5847,18 +5858,21 @@
             overflow,
             overflowScroll = 0,
             start,
-            end
+            end,
+            elHeight,
+            height,
+            sticky
           }) {
             const scroll2 = document.scrollingElement.scrollTop;
             const dir = prevScroll <= scroll2 ? "down" : "up";
+            const referenceElement = this.isFixed ? this.placeholder : this.$el;
             return {
               dir,
               prevDir,
               scroll: scroll2,
               prevScroll,
-              offsetParentTop: offset(
-                (this.isFixed ? this.placeholder : this.$el).offsetParent
-              ).top,
+              below: scroll2 > offset(referenceElement).top + (sticky ? Math.min(height, elHeight) : height),
+              offsetParentTop: offset(referenceElement.offsetParent).top,
               overflowScroll: clamp(
                 overflowScroll + clamp(scroll2, start, end) - clamp(prevScroll, start, end),
                 0,
@@ -5876,8 +5890,7 @@
               prevScroll = 0,
               top,
               start,
-              topOffset,
-              height
+              below
             } = data;
             if (scroll2 < 0 || scroll2 === prevScroll && isScrollUpdate || this.showOnUp && !isScrollUpdate && !this.isFixed) {
               return;
@@ -5890,7 +5903,7 @@
             if (this.showOnUp && !this.isFixed && Math.abs(data.initScroll - scroll2) <= 30 && Math.abs(prevScroll - scroll2) <= 10) {
               return;
             }
-            if (this.inactive || scroll2 < start || this.showOnUp && (scroll2 <= start || dir === "down" && isScrollUpdate || dir === "up" && !this.isFixed && scroll2 <= topOffset + height)) {
+            if (this.inactive || scroll2 < start || this.showOnUp && (scroll2 <= start || dir === "down" && isScrollUpdate || dir === "up" && !this.isFixed && !below)) {
               if (!this.isFixed) {
                 if (Animation.inProgress(this.$el) && top > scroll2) {
                   Animation.cancel(this.$el);
@@ -5898,7 +5911,7 @@
                 }
                 return;
               }
-              if (this.animation && scroll2 > topOffset) {
+              if (this.animation && below) {
                 if (hasClass(this.$el, "uk-animation-leave")) {
                   return;
                 }
@@ -5908,11 +5921,11 @@
               }
             } else if (this.isFixed) {
               this.update();
-            } else if (this.animation && scroll2 > topOffset) {
+            } else if (this.animation && below) {
               this.show();
               Animation.in(this.$el, this.animation).catch(noop);
             } else {
-              preventTransition(this.selTarget);
+              preventTransition(this.target);
               this.show();
             }
           },
@@ -5951,11 +5964,9 @@
             start,
             end,
             offset,
-            topOffset,
-            height,
-            elHeight,
             offsetParentTop,
-            sticky
+            sticky,
+            below
           } = this._data;
           const active = start !== 0 || scroll2 > start;
           if (!sticky) {
@@ -5968,22 +5979,21 @@
           }
           css(this.$el, "top", offset - overflowScroll);
           this.setActive(active);
-          toggleClass(
-            this.$el,
-            this.clsBelow,
-            scroll2 > topOffset + (sticky ? Math.min(height, elHeight) : height)
-          );
+          toggleClass(this.$el, this.clsBelow, below);
           addClass(this.$el, this.clsFixed);
         },
         setActive(active) {
           const prev = this.active;
           this.active = active;
           if (active) {
-            replaceClass(this.selTarget, this.clsInactive, this.clsActive);
+            replaceClass(this.target, this.clsInactive, this.clsActive);
             prev !== active && trigger(this.$el, "active");
           } else {
-            replaceClass(this.selTarget, this.clsActive, this.clsInactive);
-            prev !== active && trigger(this.$el, "inactive");
+            replaceClass(this.target, this.clsActive, this.clsInactive);
+            if (prev !== active) {
+              preventTransition(this.target);
+              trigger(this.$el, "inactive");
+            }
           }
         }
       }
@@ -6487,9 +6497,11 @@
         FormCustom: formCustom,
         Grid: grid,
         HeightMatch: heightMatch,
+        HeightPlaceholder: heightPlaceholder,
         HeightViewport: heightViewport,
         Icon: Icon,
         Img: img,
+        Inverse: inverse,
         Leader: leader,
         Margin: Margin,
         Marker: Marker,