uikit 3.25.27-dev.2d5695a → 3.25.27-dev.9e97c1f

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.25.27-dev.2d5695a | https://www.getuikit.com | (c) 2014 - 2026 YOOtheme | MIT License */
+/*! UIkit 3.25.27-dev.9e97c1f | https://www.getuikit.com | (c) 2014 - 2026 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -135,8 +135,8 @@
     }
     function pick(obj, props) {
       const result = {};
-      for (const prop of props) {
-        result[prop] = obj[prop];
+      for (const key of props) {
+        result[key] = obj[key];
       }
       return result;
     }
@@ -247,13 +247,12 @@
       }
       if (isUndefined(value)) {
         return (_a = toNode(element)) == null ? void 0 : _a.getAttribute(name);
-      } else {
-        for (const el of toNodes(element)) {
-          if (value === null) {
-            removeAttr(el, name);
-          } else {
-            el.setAttribute(name, value);
-          }
+      }
+      for (const el of toNodes(element)) {
+        if (value === null) {
+          removeAttr(el, name);
+        } else {
+          el.setAttribute(name, value);
         }
       }
     }
@@ -590,19 +589,18 @@
           property = propName(property);
           if (isUndefined(value)) {
             return getComputedStyle(element2).getPropertyValue(property);
-          } else {
-            element2.style.setProperty(
-              property,
-              isNumeric(value) && !cssNumber[property] && !isCustomProperty(property) ? `${value}px` : value || isNumber(value) ? value : "",
-              priority
-            );
           }
+          element2.style.setProperty(
+            property,
+            isNumeric(value) && !cssNumber[property] && !isCustomProperty(property) ? `${value}px` : value || isNumber(value) ? value : "",
+            priority
+          );
         } else if (isArray(property)) {
-          const props = {};
+          const values = {};
           for (const prop of property) {
-            props[prop] = css(element2, prop);
+            values[prop] = css(element2, prop);
           }
-          return props;
+          return values;
         } else if (isObject(property)) {
           for (const prop in property) {
             css(element2, prop, property[prop], value);
@@ -797,7 +795,9 @@
       );
     }
     function unwrap(element) {
-      toNodes(element).map(parent).filter((value, index, self) => self.indexOf(value) === index).forEach((parent2) => parent2.replaceWith(...parent2.childNodes));
+      for (const elementParent of new Set(toNodes(element).map(parent))) {
+        elementParent.replaceWith(...elementParent.childNodes);
+      }
     }
     const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
     function fragment(html2) {
@@ -837,8 +837,8 @@
       width: ["left", "right"],
       height: ["top", "bottom"]
     };
-    function dimensions(element) {
-      const rect = isElement(element) ? toNode(element).getBoundingClientRect() : { height: height(element), width: width(element), top: 0, left: 0 };
+    function dimensions$1(element) {
+      const rect = isElement(element) ? toNode(element).getBoundingClientRect() : { height: height$1(element), width: width(element), top: 0, left: 0 };
       return {
         height: rect.height,
         width: rect.width,
@@ -852,7 +852,7 @@
       if (coordinates) {
         css(element, { left: 0, top: 0 });
       }
-      const currentOffset = dimensions(element);
+      const currentOffset = dimensions$1(element);
       if (element) {
         const { scrollY, scrollX } = toWindow(element);
         const offsetBy = { height: scrollY, width: scrollX };
@@ -904,7 +904,7 @@
       }
       return offset2;
     }
-    const height = dimension("height");
+    const height$1 = dimension("height");
     const width = dimension("width");
     function dimension(prop) {
       const propName = ucfirst(prop);
@@ -953,15 +953,15 @@
       return sumBy(parseCalc(value), (value2) => {
         const unit = parseUnit(value2);
         return unit ? percent(
-          unit === "vh" ? getViewportHeight() : unit === "vw" ? width(toWindow(element)) : offsetDim ? element[`offset${ucfirst(property)}`] : dimensions(element)[property],
+          unit === "vh" ? getViewportHeight() : unit === "vw" ? width(toWindow(element)) : offsetDim ? element[`offset${ucfirst(property)}`] : dimensions$1(element)[property],
           value2
         ) : value2;
       });
     }
     const calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
     const parseCalc = memoize((calc) => calc.toString().replace(/\s/g, "").match(calcRe) || []);
-    const unitRe = /(?:v[hw]|%)$/;
-    const parseUnit = memoize((str) => (str.match(unitRe) || [])[0]);
+    const unitRe$1 = /(?:v[hw]|%)$/;
+    const parseUnit = memoize((str) => (str.match(unitRe$1) || [])[0]);
     function percent(base, value) {
       return base * toFloat(value) / 100;
     }
@@ -1056,7 +1056,7 @@
         if (!this.positions || this.positions.length < 2) {
           return false;
         }
-        const p = dimensions(target);
+        const p = dimensions$1(target);
         const { left, right, top, bottom } = p;
         const [prevPosition] = this.positions;
         const position = last(this.positions);
@@ -1159,7 +1159,9 @@
       return isTag(el, "iframe") && (isYoutube(el) || isVimeo(el));
     }
     function isYoutube(el) {
-      return /\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\//.test(el.src);
+      return /\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\/.*/.test(
+        el.src
+      );
     }
     function isVimeo(el) {
       return /vimeo\.com\/video\/.*/.test(el.src);
@@ -1171,7 +1173,7 @@
     function post(el, cmd) {
       el.contentWindow.postMessage(JSON.stringify({ event: "command", ...cmd }), "*");
     }
-    const stateKey = "_ukPlayer";
+    const stateKey = /* @__PURE__ */ Symbol();
     let counter = 0;
     function enableApi(el) {
       if (el[stateKey]) {
@@ -1202,17 +1204,16 @@
       if (!isVisible(element)) {
         return false;
       }
-      return intersectRect(
-        ...overflowParents(element).map((parent2) => {
-          const { top, left, bottom, right } = offsetViewport(parent2);
-          return {
-            top: top - offsetTop,
-            left: left - offsetLeft,
-            bottom: bottom + offsetTop,
-            right: right + offsetLeft
-          };
-        }).concat(offset(element))
-      );
+      const rects = overflowParents(element).map((parent2) => {
+        const { top, left, bottom, right } = offsetViewport(parent2);
+        return {
+          top: top - offsetTop,
+          left: left - offsetLeft,
+          bottom: bottom + offsetTop,
+          right: right + offsetLeft
+        };
+      });
+      return intersectRect(...rects, offset(element));
     }
     function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
       const parents2 = isVisible(element) ? scrollParents(element, false, ["hidden"]) : [];
@@ -1252,7 +1253,7 @@
             const percent = ease(clamp((Date.now() - start) / duration));
             let diff = 0;
             if (parents2[0] === element2 && scroll + top < maxScroll) {
-              diff = offset(targetEl).top + (isScrollingElement ? 0 : element2.scrollTop) - targetTop - dimensions(getCoveringElement(targetEl)).height;
+              diff = offset(targetEl).top + (isScrollingElement ? 0 : element2.scrollTop) - targetTop - dimensions$1(getCoveringElement(targetEl)).height;
             }
             if (css(element2, "scrollBehavior") !== "auto") {
               css(element2, "scrollBehavior", "auto");
@@ -1296,11 +1297,12 @@
       if (~fixedIndex) {
         ancestors = ancestors.slice(fixedIndex);
       }
-      return [scrollEl].concat(
-        ancestors.filter(
+      return [
+        scrollEl,
+        ...ancestors.filter(
           (parent2) => css(parent2, "overflow").split(" ").some((prop) => includes(["auto", "scroll", ...props], prop)) && (!scrollable || parent2.scrollHeight > offsetViewport(parent2).height)
         )
-      ).reverse();
+      ].reverse();
     }
     function scrollParent(...args) {
       return scrollParents(...args)[0];
@@ -1339,7 +1341,7 @@
     function getCoveringElement(target) {
       const { document } = toWindow(target);
       target = target || document.body;
-      const { left, width, top } = dimensions(target);
+      const { left, width, top } = dimensions$1(target);
       for (const position of top ? [0, top] : [0]) {
         let coverEl;
         for (const el of document.elementsFromPoint(left + width / 2, position)) {
@@ -1348,7 +1350,7 @@
             parents(target).reverse().find(
               (parent2) => !parent2.contains(el) && !hasPosition(parent2, "static")
             )
-          ) < zIndex(el) || hasPosition(el, "sticky") && (!target || parent(el).contains(target))) && (!coverEl || dimensions(coverEl).height < dimensions(el).height)) {
+          ) < zIndex(el) || hasPosition(el, "sticky") && (!target || parent(el).contains(target))) && (!coverEl || dimensions$1(coverEl).height < dimensions$1(el).height)) {
             coverEl = el;
           }
         }
@@ -1569,7 +1571,7 @@
         createEvent: createEvent,
         css: css,
         data: data,
-        dimensions: dimensions,
+        dimensions: dimensions$1,
         each: each,
         empty: empty,
         endsWith: endsWith,
@@ -1589,7 +1591,7 @@
         hasClass: hasClass,
         hasOwn: hasOwn,
         hasTouch: hasTouch,
-        height: height,
+        height: height$1,
         html: html,
         hyphenate: hyphenate,
         inBrowser: inBrowser,
@@ -1689,7 +1691,7 @@
         wrapInner: wrapInner
     });
 
-    var VERSION = '3.25.27-dev.2d5695a';
+    var VERSION = '3.25.27-dev.9e97c1f';
 
     function initUpdates(instance) {
       instance._data = {};
@@ -2002,11 +2004,14 @@
     function coerce$1(type, value) {
       if (type === Boolean) {
         return toBoolean(value);
-      } else if (type === Number) {
+      }
+      if (type === Number) {
         return toNumber(value);
-      } else if (type === "list") {
+      }
+      if (type === "list") {
         return toList(value);
-      } else if (type === Object && isString(value)) {
+      }
+      if (type === Object && isString(value)) {
         return parseOptions(value);
       }
       return type ? type(value) : value;
@@ -2056,7 +2061,7 @@
     }
     const getAttributes = memoize((id, props) => {
       const attributes = Object.keys(props);
-      const filter = attributes.concat(id).flatMap((key) => [hyphenate(key), `data-${hyphenate(key)}`]);
+      const filter = [...attributes, id].flatMap((key) => [hyphenate(key), `data-${hyphenate(key)}`]);
       return { attributes, filter };
     });
     function initPropsObserver(instance) {
@@ -2146,14 +2151,10 @@
     }
     function normalizeData({ data = {} }, { args = [], props = {} }) {
       if (isArray(data)) {
-        data = data.slice(0, args.length).reduce((data2, value, index) => {
-          if (isPlainObject(value)) {
-            assign(data2, value);
-          } else {
-            data2[args[index]] = value;
-          }
-          return data2;
-        }, {});
+        data = data.slice(0, args.length).reduce(
+          (data2, value, index) => assign(data2, isPlainObject(value) ? value : { [args[index]]: value }),
+          {}
+        );
       }
       for (const key in data) {
         if (isUndefined(data[key])) {
@@ -2201,11 +2202,10 @@
       function init(element2) {
         const instance = getComponent(element2, name);
         if (instance) {
-          if (data) {
-            instance.$destroy();
-          } else {
+          if (!data) {
             return instance;
           }
+          instance.$destroy();
         }
         return new Component({ el: element2, data });
       }
@@ -2419,9 +2419,9 @@
     function lazyload(options = {}) {
       return intersection({
         handler: function(entries, observer) {
-          const { targets = this.$el, preload = 5 } = options;
+          const { targets = this.$el, preload = 5, media = false } = options;
           for (const el of toNodes(isFunction(targets) ? targets(this) : targets)) {
-            $$('[loading="lazy"]', el).slice(0, preload - 1).forEach((el2) => removeAttr(el2, "loading"));
+            (media ? preloadMedia : loadLazyElements)(el, preload);
           }
           for (const { isIntersecting, target } of entries) {
             isIntersecting && observer.unobserve(target);
@@ -2430,6 +2430,15 @@
         ...options
       });
     }
+    function preloadMedia(el, preload = 5) {
+      loadLazyElements(el, preload);
+      for (const video of $$('video[preload="none"]', el)) {
+        video.preload = "";
+      }
+    }
+    function loadLazyElements(el, preload) {
+      $$('[loading="lazy"]', el).slice(0, preload - 1).forEach((el2) => removeAttr(el2, "loading"));
+    }
     function viewport(options) {
       return observe((target, handler) => observeViewportResize(handler), options, "resize");
     }
@@ -2502,62 +2511,6 @@
       }
     };
 
-    const keyMap = {
-      TAB: 9,
-      ENTER: 13,
-      ESC: 27,
-      SPACE: 32,
-      END: 35,
-      HOME: 36,
-      LEFT: 37,
-      UP: 38,
-      RIGHT: 39,
-      DOWN: 40
-    };
-    function getNavigationIndex(keyCode, previousKey = keyMap.LEFT, nextKey = keyMap.RIGHT) {
-      switch (keyCode) {
-        case keyMap.HOME:
-          return 0;
-        case keyMap.END:
-          return "last";
-        case previousKey:
-          return "previous";
-        case nextKey:
-          return "next";
-      }
-      return -1;
-    }
-
-    function maybeDefaultPreventClick(e) {
-      if (e.target.closest('a[href="#"],a[href=""]')) {
-        e.preventDefault();
-      }
-    }
-    function onEscape(handler, isEligible = () => true) {
-      return on(document, "keydown", (e) => {
-        if (e.keyCode === keyMap.ESC && isEligible()) {
-          handler(e);
-        }
-      });
-    }
-    function onOutsidePointer(handler, isOutside, isEligible) {
-      return on(document, pointerDown, ({ target }) => {
-        if (!isOutside(target) || isEligible && !isEligible()) {
-          return;
-        }
-        once(
-          document,
-          `${pointerUp} ${pointerCancel} scroll`,
-          ({ defaultPrevented, type, target: newTarget }) => {
-            if (!defaultPrevented && type === pointerUp && target === newTarget) {
-              handler(target);
-            }
-          },
-          true
-        );
-      });
-    }
-
     var Togglable = {
       props: {
         cls: Boolean,
@@ -2650,27 +2603,25 @@
       const dimProp = props[dirs.indexOf(dir)];
       const marginProp = `margin-${dir[0]}`;
       const marginStartProp = `margin-${startProp}`;
-      let currentDim = dimensions(el)[dimProp];
+      let currentDim = dimensions$1(el)[dimProp];
       const inProgress = Transition.inProgress(el);
       await Transition.cancel(el);
       if (show) {
         _toggle(el, true);
       }
-      const prevProps = Object.fromEntries(
-        [
-          "padding",
-          "border",
-          "width",
-          "height",
-          "minWidth",
-          "minHeight",
-          "overflowY",
-          "overflowX",
-          marginProp,
-          marginStartProp
-        ].map((key) => [key, el.style[key]])
-      );
-      const dim = dimensions(el);
+      const prevProps = pick(el.style, [
+        "padding",
+        "border",
+        "width",
+        "height",
+        "minWidth",
+        "minHeight",
+        "overflowY",
+        "overflowX",
+        marginProp,
+        marginStartProp
+      ]);
+      const dim = dimensions$1(el);
       const currentMargin = toFloat(css(el, marginProp));
       const marginStart = toFloat(css(el, marginStartProp));
       const endDim = dim[dimProp] + marginStart;
@@ -2735,29 +2686,156 @@
       _toggle(el, false);
     }
 
+    const TogglableComponent = App.extend(Togglable);
+    var Connect = {
+      mixins: [Togglable],
+      props: {
+        connect: String
+      },
+      data: {
+        connect: "",
+        cls: "uk-active"
+      },
+      computed: {
+        connects: {
+          get: ({ connect }, $el) => connect ? queryAll(connect, $el) : [],
+          observe: ({ connect }) => connect
+        },
+        connectChildren() {
+          return this.connects.flatMap((el) => children(el));
+        }
+      },
+      watch: {
+        connects(connects) {
+          for (const el of connects) {
+            if (isTag(el, "ul")) {
+              el.role = "presentation";
+            }
+          }
+        }
+      },
+      observe: lazyload({ targets: ({ connectChildren }) => connectChildren }),
+      update() {
+        for (const index in this.toggles) {
+          const toggle = this.toggles[index];
+          if (!toggle) {
+            continue;
+          }
+          toggle.id = generateId(this, toggle);
+          for (const { children: children2 } of this.connects) {
+            const item = children2[index];
+            if (item) {
+              attr(item, {
+                id: generateId(this, item),
+                role: "tabpanel",
+                "aria-labelledby": toggle.id
+              });
+            }
+          }
+        }
+      },
+      methods: {
+        showConnects(index, animate) {
+          const toggle = async (el) => {
+            const { children: children2 } = el;
+            const animation = data(el, "uk-switcher-animation");
+            let togglable = animation ? new TogglableComponent({ data: { ...this.$props, animation } }) : this;
+            const actives = toArray(children2).filter(
+              (child, i) => i !== index && hasClass(child, this.cls)
+            );
+            if (await togglable.toggleElement(actives, false, animate)) {
+              await togglable.toggleElement(children2[index], true, animate);
+            }
+          };
+          return Promise.all(this.connects.map(toggle));
+        }
+      }
+    };
+
+    const keyMap = {
+      TAB: 9,
+      ENTER: 13,
+      ESC: 27,
+      SPACE: 32,
+      END: 35,
+      HOME: 36,
+      LEFT: 37,
+      UP: 38,
+      RIGHT: 39,
+      DOWN: 40
+    };
+    function getNavigationIndex(keyCode, previousKey = keyMap.LEFT, nextKey = keyMap.RIGHT) {
+      switch (keyCode) {
+        case keyMap.HOME:
+          return 0;
+        case keyMap.END:
+          return "last";
+        case previousKey:
+          return "previous";
+        case nextKey:
+          return "next";
+      }
+      return -1;
+    }
+
+    function maybeDefaultPreventClick(e) {
+      if (e.target.closest('a[href="#"],a[href=""]')) {
+        e.preventDefault();
+      }
+    }
+    function onEscape(handler, isEligible = () => true) {
+      return on(document, "keydown", (e) => {
+        if (e.keyCode === keyMap.ESC && isEligible()) {
+          handler(e);
+        }
+      });
+    }
+    function onOutsidePointer(handler, isOutside, isEligible) {
+      return on(document, pointerDown, ({ target }) => {
+        if (!isOutside(target) || isEligible && !isEligible()) {
+          return;
+        }
+        once(
+          document,
+          `${pointerUp} ${pointerCancel} scroll`,
+          ({ defaultPrevented, type, target: newTarget }) => {
+            if (!defaultPrevented && type === pointerUp && target === newTarget) {
+              handler(target);
+            }
+          },
+          true
+        );
+      });
+    }
+
     const wrappers = /* @__PURE__ */ new WeakMap();
     var Accordion = {
-      mixins: [Class, Togglable],
+      mixins: [Class, Connect],
       props: {
-        animation: Boolean,
         targets: String,
         active: null,
         collapsible: Boolean,
         multiple: Boolean,
         toggle: String,
         content: String,
-        offset: Number
+        offset: Number,
+        switcherConnect: String
       },
       data: {
         targets: "> *",
         active: false,
-        animation: true,
+        animation: [true],
         collapsible: true,
         multiple: false,
         clsOpen: "uk-open",
+        cls: "uk-active",
         toggle: ".uk-accordion-title",
         content: ".uk-accordion-content",
-        offset: 0
+        offset: 0,
+        switcherConnect: ""
+      },
+      beforeConnect() {
+        this.connect = this.$props.connect = this.switcherConnect;
       },
       computed: {
         items: ({ targets }, $el) => $$(targets, $el),
@@ -2783,6 +2861,12 @@
             this.toggle(active, false);
           }
         },
+        connectChildren() {
+          this.showConnects(
+            findIndex(this.items, (el) => hasClass(el, this.clsOpen)),
+            false
+          );
+        },
         toggles() {
           this.$emit();
         },
@@ -2832,44 +2916,57 @@
           if (!toggle || !content) {
             continue;
           }
-          toggle.id = generateId(this, toggle);
-          content.id = generateId(this, content);
           const active = includes(activeItems, this.items[index2]);
+          attr(content, {
+            id: generateId(this, content),
+            role: "region",
+            "aria-labelledby": toggle.id
+          });
+          if (isTag(content, "ul")) {
+            attr(children(content), "role", "presentation");
+          }
+          const controls = [
+            content.id,
+            ...this.connects.map(({ children: children2 }) => {
+              var _a;
+              return (_a = children2[index2]) == null ? void 0 : _a.id;
+            }).filter(Boolean)
+          ];
           attr(toggle, {
             role: isTag(toggle, "a") ? "button" : null,
-            "aria-controls": content.id,
+            "aria-controls": controls.join(" "),
             "aria-expanded": active,
             "aria-disabled": !this.collapsible && activeItems.length < 2 && active
           });
-          attr(content, { role: "region", "aria-labelledby": toggle.id });
-          if (isTag(content, "ul")) {
-            attr(children(content), "role", "presentation");
-          }
         }
       },
       methods: {
-        toggle(item, animate) {
-          item = this.items[getIndex(item, this.items)];
+        async toggle(item, animate) {
+          animate = animate !== false;
+          const next = getIndex(item, this.items);
+          item = this.items[next];
           let items = [item];
           const activeItems = filter(this.items, `.${this.clsOpen}`);
-          if (!this.multiple && !includes(activeItems, items[0])) {
-            items = items.concat(activeItems);
-          }
-          if (!this.collapsible && activeItems.length < 2 && includes(activeItems, item)) {
-            items = [];
-          }
-          return Promise.all(
-            items.map(
-              (el) => this.toggleElement(el, !includes(activeItems, el), (el2, show) => {
-                toggleClass(el2, this.clsOpen, show);
-                if (animate === false || !this.animation) {
-                  hide($(this.content, el2), !show);
-                  return;
-                }
-                return transition(el2, show, this);
-              })
-            )
-          );
+          const isActive = includes(activeItems, item);
+          if (isActive && !this.collapsible && activeItems.length < 2) {
+            return;
+          }
+          if (!isActive && !this.multiple) {
+            items.push(...activeItems);
+          }
+          const toggle = (el) => this.toggleElement(el, !includes(activeItems, el), (el2, show) => {
+            toggleClass(el2, this.clsOpen, show);
+            if (!animate || !this.hasAnimation) {
+              hide($(this.content, el2), !show);
+              return;
+            }
+            return transition(el2, show, this);
+          });
+          const hideIndex = () => findIndex(this.items, (i) => i !== item && includes(activeItems, i));
+          return Promise.all([
+            ...items.map(toggle),
+            this.showConnects(isActive ? hideIndex() : next, animate)
+          ]);
         }
       }
     };
@@ -2887,7 +2984,7 @@
       const currentHeight = toFloat(css(wrapper, "height"));
       await Transition.cancel(wrapper);
       hide(content, false);
-      const endHeight = sumBy(["marginTop", "marginBottom"], (prop) => css(content, prop)) + dimensions(content).height;
+      const endHeight = sumBy(["marginTop", "marginBottom"], (prop) => css(content, prop)) + dimensions$1(content).height;
       const percent = currentHeight / endHeight;
       duration = endHeight ? (velocity * endHeight + duration) * (show ? 1 - percent : percent) : 0;
       css(wrapper, "height", currentHeight);
@@ -2903,7 +3000,7 @@
       let frame;
       (function scroll() {
         frame = requestAnimationFrame(() => {
-          const { top } = dimensions(el);
+          const { top } = dimensions$1(el);
           if (top < 0) {
             scrollElement.scrollTop += top;
           }
@@ -2935,7 +3032,7 @@
       },
       methods: {
         async close() {
-          await this.toggleElement(this.$el, false, animate$1);
+          await this.toggleElement(this.$el, false, this.animation ? animate$1 : false);
           this.$destroy(true);
         }
       }
@@ -2960,60 +3057,473 @@
       );
     }
 
+    var Media = {
+      props: {
+        media: Boolean
+      },
+      data: {
+        media: false
+      },
+      connected() {
+        const media = toMedia(this.media, this.$el);
+        this.matchMedia = true;
+        if (media) {
+          this.mediaObj = window.matchMedia(media);
+          const handler = () => {
+            this.matchMedia = this.mediaObj.matches;
+            trigger(this.$el, createEvent("mediachange", false, true, [this.mediaObj]));
+          };
+          this.offMediaObj = on(this.mediaObj, "change", () => {
+            handler();
+            this.$emit("resize");
+          });
+          handler();
+        }
+      },
+      disconnected() {
+        var _a;
+        (_a = this.offMediaObj) == null ? void 0 : _a.call(this);
+      }
+    };
+    function toMedia(value, element) {
+      if (isString(value)) {
+        if (startsWith(value, "@")) {
+          value = toFloat(css(element, `--uk-breakpoint-${value.slice(1)}`));
+        } else if (isNaN(value)) {
+          return value;
+        }
+      }
+      return value && isNumeric(value) ? `(min-width: ${value}px)` : "";
+    }
+
+    function getMaxPathLength(el) {
+      return isVisible(el) ? Math.ceil(
+        Math.max(0, ...$$("[stroke]", el).map((stroke) => {
+          var _a;
+          return ((_a = stroke.getTotalLength) == null ? void 0 : _a.call(stroke)) || 0;
+        }))
+      ) : 0;
+    }
+
+    const props = {
+      x: transformFn,
+      y: transformFn,
+      rotate: transformFn,
+      scale: transformFn,
+      color: colorFn,
+      backgroundColor: colorFn,
+      borderColor: colorFn,
+      blur: filterFn,
+      hue: filterFn,
+      fopacity: filterFn,
+      grayscale: filterFn,
+      invert: filterFn,
+      saturate: filterFn,
+      sepia: filterFn,
+      opacity: cssPropFn,
+      stroke: strokeFn,
+      bgx: backgroundFn,
+      bgy: backgroundFn
+    };
+    const { keys } = Object;
+    ({
+      props: fillObject(keys(props), "list"),
+      data: fillObject(keys(props), void 0)});
+    function transformFn(prop, el, stops) {
+      let unit = getUnit(stops) || { x: "px", y: "px", rotate: "deg" }[prop] || "";
+      let transformFn2;
+      if (prop === "x" || prop === "y") {
+        prop = `translate${ucfirst(prop)}`;
+        transformFn2 = (stop) => toFloat(toFloat(stop).toFixed(unit === "px" ? 0 : 6));
+      } else if (prop === "scale") {
+        unit = "";
+        transformFn2 = (stop) => {
+          var _a;
+          return getUnit([stop]) ? toPx(stop, "width", el, true) / el[`offset${((_a = stop.endsWith) == null ? void 0 : _a.call(stop, "vh")) ? "Height" : "Width"}`] : toFloat(stop);
+        };
+      }
+      if (stops.length === 1) {
+        stops.unshift(prop === "scale" ? 1 : 0);
+      }
+      stops = parseStops(stops, transformFn2);
+      return (css2, percent) => {
+        css2.transform = `${css2.transform || ""} ${prop}(${getValue(stops, percent)}${unit})`;
+      };
+    }
+    function colorFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ""));
+      }
+      stops = parseStops(stops, (stop) => parseColor(el, stop));
+      return (css2, percent) => {
+        const [start, end, p] = getStop(stops, percent);
+        const value = start.map((value2, i) => {
+          value2 += p * (end[i] - value2);
+          return i === 3 ? toFloat(value2) : parseInt(value2, 10);
+        }).join(",");
+        css2[prop] = `rgba(${value})`;
+      };
+    }
+    function parseColor(el, color) {
+      return getCssValue(el, "color", color).split(/[(),]/g).slice(1, -1).concat(1).slice(0, 4).map(toFloat);
+    }
+    function filterFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(0);
+      }
+      const unit = getUnit(stops) || { blur: "px", hue: "deg" }[prop] || "%";
+      prop = { fopacity: "opacity", hue: "hue-rotate" }[prop] || prop;
+      stops = parseStops(stops);
+      return (css2, percent) => {
+        const value = getValue(stops, percent);
+        css2.filter = `${css2.filter || ""} ${prop}(${value + unit})`;
+      };
+    }
+    function cssPropFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ""));
+      }
+      stops = parseStops(stops);
+      return (css2, percent) => {
+        css2[prop] = getValue(stops, percent);
+      };
+    }
+    function strokeFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(0);
+      }
+      const unit = getUnit(stops);
+      const length = getMaxPathLength(el);
+      stops = parseStops(stops.reverse(), (stop) => {
+        stop = toFloat(stop);
+        return unit === "%" ? stop * length / 100 : stop;
+      });
+      if (!stops.some(([value]) => value)) {
+        return noop;
+      }
+      css(el, "strokeDasharray", length);
+      return (css2, percent) => {
+        css2.strokeDashoffset = getValue(stops, percent);
+      };
+    }
+    function backgroundFn(prop, el, stops, props2) {
+      if (stops.length === 1) {
+        stops.unshift(0);
+      }
+      const attr = prop === "bgy" ? "height" : "width";
+      props2[prop] = parseStops(stops, (stop) => toPx(stop, attr, el));
+      const bgProps = ["bgx", "bgy"].filter((prop2) => prop2 in props2);
+      if (bgProps.length === 2 && prop === "bgx") {
+        return noop;
+      }
+      if (getCssValue(el, "backgroundSize", "") === "cover") {
+        return backgroundCoverFn(prop, el, stops, props2);
+      }
+      const positions = {};
+      for (const prop2 of bgProps) {
+        positions[prop2] = getBackgroundPos(el, prop2);
+      }
+      return setBackgroundPosFn(bgProps, positions, props2);
+    }
+    function backgroundCoverFn(prop, el, stops, props2) {
+      const dimImage = getBackgroundImageDimensions(el);
+      if (!dimImage.width) {
+        return noop;
+      }
+      const dimEl = {
+        width: el.offsetWidth,
+        height: el.offsetHeight
+      };
+      const bgProps = ["bgx", "bgy"].filter((prop2) => prop2 in props2);
+      const positions = {};
+      for (const prop2 of bgProps) {
+        const values = props2[prop2].map(([value]) => value);
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const down = values.indexOf(min) < values.indexOf(max);
+        const diff = max - min;
+        positions[prop2] = `${(down ? -diff : 0) - (down ? min : max)}px`;
+        dimEl[prop2 === "bgy" ? "height" : "width"] += diff;
+      }
+      const dim = Dimensions.cover(dimImage, dimEl);
+      for (const prop2 of bgProps) {
+        const attr = prop2 === "bgy" ? "height" : "width";
+        const overflow = dim[attr] - dimEl[attr];
+        positions[prop2] = `max(${getBackgroundPos(el, prop2)},-${overflow}px) + ${positions[prop2]}`;
+      }
+      const fn = setBackgroundPosFn(bgProps, positions, props2);
+      return (css2, percent) => {
+        fn(css2, percent);
+        css2.backgroundSize = `${dim.width}px ${dim.height}px`;
+        css2.backgroundRepeat = "no-repeat";
+      };
+    }
+    function getBackgroundPos(el, prop) {
+      return getCssValue(el, `background-position-${prop.slice(-1)}`, "");
+    }
+    function setBackgroundPosFn(bgProps, positions, props2) {
+      return function(css2, percent) {
+        for (const prop of bgProps) {
+          const value = getValue(props2[prop], percent);
+          css2[`background-position-${prop.slice(-1)}`] = `calc(${positions[prop]} + ${value}px)`;
+        }
+      };
+    }
+    const loading = {};
+    const dimensions = {};
+    function getBackgroundImageDimensions(el) {
+      const src = css(el, "backgroundImage").replace(/^none|url\(["']?(.+?)["']?\)$/, "$1");
+      if (dimensions[src]) {
+        return dimensions[src];
+      }
+      const image = new Image();
+      if (src) {
+        image.src = src;
+        if (!image.naturalWidth && !loading[src]) {
+          once(image, "error load", () => {
+            dimensions[src] = toDimensions(image);
+            trigger(el, createEvent("load", false));
+          });
+          loading[src] = true;
+          return toDimensions(image);
+        }
+      }
+      return dimensions[src] = toDimensions(image);
+    }
+    function toDimensions(image) {
+      return {
+        width: image.naturalWidth,
+        height: image.naturalHeight
+      };
+    }
+    function parseStops(stops, fn = toFloat) {
+      const result = [];
+      const { length } = stops;
+      let nullIndex = 0;
+      for (let i = 0; i < length; i++) {
+        let [value, percent] = isString(stops[i]) ? stops[i].trim().split(/ (?![^(]*\))/) : [stops[i]];
+        value = fn(value);
+        percent = percent ? toFloat(percent) / 100 : null;
+        if (i === 0) {
+          if (percent === null) {
+            percent = 0;
+          } else if (percent) {
+            result.push([value, 0]);
+          }
+        } else if (i === length - 1) {
+          if (percent === null) {
+            percent = 1;
+          } else if (percent !== 1) {
+            result.push([value, percent]);
+            percent = 1;
+          }
+        }
+        result.push([value, percent]);
+        if (percent === null) {
+          nullIndex++;
+        } else if (nullIndex) {
+          const leftPercent = result[i - nullIndex - 1][1];
+          const p = (percent - leftPercent) / (nullIndex + 1);
+          for (let j = nullIndex; j > 0; j--) {
+            result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
+          }
+          nullIndex = 0;
+        }
+      }
+      return result;
+    }
+    function getStop(stops, percent) {
+      const index = findIndex(stops.slice(1), ([, targetPercent]) => percent <= targetPercent) + 1;
+      return [
+        stops[index - 1][0],
+        stops[index][0],
+        (percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])
+      ];
+    }
+    function getValue(stops, percent) {
+      const [start, end, p] = getStop(stops, percent);
+      return start + (end - start) * p;
+    }
+    const unitRe = /^-?\d+(?:\.\d+)?(\S+)?/;
+    function getUnit(stops, defaultUnit) {
+      var _a;
+      for (const stop of stops) {
+        const match = (_a = stop.match) == null ? void 0 : _a.call(stop, unitRe);
+        if (match) {
+          return match[1];
+        }
+      }
+      return defaultUnit;
+    }
+    function getCssValue(el, prop, value) {
+      const prev = el.style[prop];
+      const val = css(css(el, prop, value), prop);
+      el.style[prop] = prev;
+      return val;
+    }
+    function fillObject(keys2, value) {
+      return Object.fromEntries(keys2.map((prop) => [prop, value]));
+    }
+    function ease(percent, easing) {
+      return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, 1 - easing);
+    }
+
+    var ScrollDriven = {
+      props: {
+        parallaxTarget: Boolean,
+        parallaxStart: String,
+        parallaxEnd: String,
+        parallaxEasing: Number
+      },
+      data: {
+        parallaxTarget: false,
+        parallaxStart: 0,
+        parallaxEnd: 0,
+        parallaxEasing: 0
+      },
+      observe: [
+        resize({
+          target: ({ $el, parallaxTarget }) => [$el, parallaxTarget],
+          filter: ({ parallax }) => parallax
+        }),
+        scroll$1({ filter: ({ parallax }) => parallax })
+      ],
+      computed: {
+        parallaxTargetFallback: ($props, $el) => $el,
+        parallaxTarget({ parallaxTarget }, $el) {
+          return parallaxTarget && query(parallaxTarget, $el) || this.parallaxTargetFallback;
+        }
+      },
+      update: {
+        read() {
+          if (!this.parallax) {
+            return;
+          }
+          const target = this.parallaxTarget;
+          if (!target) {
+            return;
+          }
+          const start = toPx(this.parallaxStart, "height", target, true);
+          const end = toPx(this.parallaxEnd, "height", target, true);
+          const percent = ease(scrolledOver(target, start, end), this.parallaxEasing);
+          return { percent };
+        },
+        events: ["scroll", "resize"]
+      }
+    };
+
+    const loopKey = /* @__PURE__ */ Symbol();
     var Video = {
+      mixins: [Media, ScrollDriven],
       args: "autoplay",
       props: {
         automute: Boolean,
         autoplay: Boolean,
         restart: Boolean,
-        hoverTarget: Boolean
+        inviewMargin: String,
+        inviewQueued: Number,
+        hoverTarget: Boolean,
+        hoverRewind: Number,
+        reducedMotionTime: Number
       },
       data: {
         automute: false,
         autoplay: true,
         restart: false,
-        hoverTarget: false
+        inviewMargin: "0px",
+        inviewQueued: 0,
+        hoverTarget: false,
+        hoverRewind: 0,
+        reducedMotionTime: 0,
+        media: "(prefers-reduced-motion: reduce)"
       },
       beforeConnect() {
-        const isVideo = isTag(this.$el, "video");
-        if (this.autoplay === "inview" && isVideo && !hasAttr(this.$el, "preload")) {
+        const isVideo = this.isVideo = isTag(this.$el, "video");
+        this.interactionDriven = ["hover", "parallax"].includes(this.autoplay);
+        if (this.interactionDriven && !isVideo) {
+          this.interactionDriven = this.autoplay = false;
+        }
+        this.restart = isVideo && this.restart;
+        this.parallax = this.autoplay === "parallax";
+        this.inviewQueued = isVideo && this.autoplay === "inview" && this.inviewQueued;
+        if (this.inviewQueued) {
+          this.$el[loopKey] = this.$el.loop;
+          this.$el.loop = false;
+        }
+        if (["hover", "inview"].includes(this.autoplay) && isVideo && !hasAttr(this.$el, "preload")) {
           this.$el.preload = "none";
         }
         if (!isVideo && !hasAttr(this.$el, "allow")) {
           this.$el.allow = "autoplay";
         }
         if (this.autoplay === "hover") {
-          if (isVideo) {
-            this.$el.tabIndex = 0;
-          } else {
-            this.autoplay = true;
+          this.hoverTarget = query(this.hoverTarget, this.$el) || this.$el;
+          if (!isFocusable(this.hoverTarget)) {
+            this.hoverTarget.tabIndex = 0;
           }
         }
         if (this.automute || hasAttr(this.$el, "muted")) {
           mute(this.$el);
         }
       },
+      connected() {
+        if (!this.$el.controls && !this.$el.poster && (this.interactionDriven || this.inviewQueued)) {
+          this.cancelPreview = preview(this.$el);
+        }
+      },
+      disconnected() {
+        var _a, _b;
+        (_a = this._reverseAbort) == null ? void 0 : _a.abort();
+        (_b = this.cancelPreview) == null ? void 0 : _b.call(this);
+        this.cancelPreview = null;
+        if (this.$el[loopKey]) {
+          this.$el.loop = true;
+        }
+        queue.delete(this.$el);
+      },
       events: [
         {
           name: `${pointerEnter} focusin`,
-          el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
+          el: ({ hoverTarget }) => hoverTarget,
           filter: ({ autoplay }) => autoplay === "hover",
           handler(e) {
+            var _a;
+            (_a = this._reverseAbort) == null ? void 0 : _a.abort();
             if (!isTouch(e) || !isPlaying(this.$el)) {
-              play(this.$el);
+              this.play();
             } else {
-              pauseHover(this.$el, this.restart);
+              this.pause();
             }
           }
         },
         {
           name: `${pointerLeave} focusout`,
-          el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
+          el: ({ hoverTarget }) => hoverTarget,
           filter: ({ autoplay }) => autoplay === "hover",
           handler(e) {
-            if (!isTouch(e)) {
-              pauseHover(this.$el, this.restart);
+            var _a;
+            if (!isTouch(e) && !this.matchMedia) {
+              (_a = this._reverseAbort) == null ? void 0 : _a.abort();
+              this.pause();
+              this._reverseAbort = playReverse(this.$el, this.hoverRewind);
+            }
+          }
+        },
+        {
+          name: "loadedmetadata durationchange",
+          filter: ({ parallax }) => parallax,
+          handler() {
+            this.$emit("resize");
+          }
+        },
+        {
+          name: "error pause ended",
+          filter: ({ inviewQueued }) => inviewQueued,
+          handler(e) {
+            if (e.type === "error" || e.type === "ended" && !this.$el[loopKey]) {
+              queue.delete(this.$el);
             }
+            playNextQueued();
           }
         }
       ],
@@ -3026,33 +3536,144 @@
           }
         }),
         intersection({
-          filter: ({ $el, autoplay }) => autoplay !== "hover" && $el.preload !== "none",
-          handler([{ isIntersecting, target }]) {
+          filter: ({ $el, interactionDriven }) => !interactionDriven && $el.preload !== "none",
+          handler([{ isIntersecting }]) {
             if (!document.fullscreenElement) {
               if (isIntersecting) {
                 if (this.autoplay) {
-                  play(target);
+                  this.play();
                 }
               } else {
-                pauseHover(target, this.restart);
+                this.pause();
               }
             }
           },
           args: { intersecting: false },
-          options: ({ $el, autoplay }) => ({
-            root: autoplay === "inview" ? null : parent($el).closest(":not(a)")
+          options: ({ $el, autoplay, inviewMargin }) => ({
+            root: autoplay === "inview" ? null : parent($el).closest(":not(a)"),
+            rootMargin: autoplay === "inview" ? inviewMargin : "0px"
           })
         })
-      ]
+      ],
+      update: {
+        write({ percent }) {
+          if (!this.parallax) {
+            return;
+          }
+          const { duration, seeking } = this.$el;
+          if (!isNaN(duration) && !seeking) {
+            const value = this.matchMedia ? this.reducedMotionTime : percent * duration;
+            setCurrentTime(this.$el, value);
+          }
+        },
+        events: ["scroll", "resize"]
+      },
+      methods: {
+        play() {
+          var _a;
+          if (this.matchMedia) {
+            this.pause();
+            if (this.isVideo) {
+              setCurrentTime(this.$el, this.reducedMotionTime);
+            }
+          } else if (this.inviewQueued) {
+            queue.set(this.$el, this.inviewQueued);
+            playNextQueued();
+          } else {
+            (_a = this.cancelPreview) == null ? void 0 : _a.call(this);
+            play(this.$el);
+          }
+        },
+        pause() {
+          pause(this.$el);
+          queue.delete(this.$el);
+          if (this.restart) {
+            setCurrentTime(this.$el, 0);
+          }
+        }
+      }
     };
+    function setCurrentTime(videoEl, time) {
+      if (videoEl.currentTime !== time) {
+        videoEl.currentTime = time;
+      }
+    }
     function isPlaying(videoEl) {
       return !videoEl.paused && !videoEl.ended;
     }
-    function pauseHover(el, restart) {
-      pause(el);
-      if (restart && isTag(el, "video")) {
-        el.currentTime = 0;
+    function preview($el) {
+      if (!$el.requestVideoFrameCallback) {
+        return;
+      }
+      let frame2;
+      const pausePreview = () => {
+        disconnect();
+        pause($el);
+      };
+      const observer = observeIntersection($el, () => {
+        observer.disconnect();
+        frame2 = $el.requestVideoFrameCallback(pausePreview);
+        play($el);
+      });
+      const disconnect = () => {
+        observer.disconnect();
+        $el.cancelVideoFrameCallback(frame2);
+      };
+      return disconnect;
+    }
+    const queue = /* @__PURE__ */ new Map();
+    const played = /* @__PURE__ */ new WeakMap();
+    let frame;
+    function playNextQueued() {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const getPlayed = (el) => {
+          var _a;
+          return (_a = played.get(el)) != null ? _a : 0;
+        };
+        const videos = shuffle(queue.keys()).sort((a, b) => getPlayed(a) - getPlayed(b));
+        let active = videos.filter(isPlaying).length;
+        for (const el of videos) {
+          const maxQueued = queue.get(el);
+          if (isPlaying(el) || active / queue.size >= maxQueued) {
+            continue;
+          }
+          played.set(el, getPlayed(el) + 1);
+          play(el);
+          active++;
+        }
+      });
+    }
+    function shuffle(array) {
+      array = [...array];
+      for (let i = array.length - 1; i > 0; i--) {
+        let j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
       }
+      return array;
+    }
+    function playReverse(el, playbackRate) {
+      const start = el.currentTime;
+      if (isNaN(start) || !playbackRate) {
+        return;
+      }
+      playbackRate *= Math.max(1, start / 10 + 0.5);
+      const controller = new AbortController();
+      const time = Date.now();
+      (function next() {
+        requestAnimationFrame(() => {
+          if (controller.signal.aborted) {
+            return;
+          }
+          if (!el.seeking) {
+            el.currentTime = Math.max(0, start - (Date.now() - time) * playbackRate / 1e3);
+          }
+          if (el.currentTime > 0) {
+            next();
+          }
+        });
+      })();
+      return controller;
     }
 
     var cover = {
@@ -3128,7 +3749,7 @@
         inset: false
       },
       connected() {
-        this.pos = this.$props.pos.split("-").concat("center").slice(0, 2);
+        this.pos = [...this.$props.pos.split("-"), "center"].slice(0, 2);
         [this.dir, this.align] = this.pos;
         this.axis = includes(["top", "bottom"], this.dir) ? "y" : "x";
       },
@@ -3148,7 +3769,7 @@
             placement.reverse();
           }
           const restoreScrollPosition = storeScrollPosition(element);
-          const elDim = dimensions(element);
+          const elDim = dimensions$1(element);
           css(element, { top: -elDim.height, left: -elDim.width });
           positionAt(element, target, {
             attach,
@@ -3515,6 +4136,7 @@
           css(this.$el, this._style);
           this.$el.hidden = true;
           const viewports = this.target.map((target) => getViewport$1(this.$el, target));
+          const boundaryOffsets = this.boundary.map((el) => offset(el));
           const viewportOffset = this.getViewportOffset(this.$el);
           const dirs = [
             [0, ["x", "width", "left", "right"]],
@@ -3524,7 +4146,7 @@
             if (this.axis !== axis && includes([axis, true], this.stretch)) {
               css(this.$el, {
                 [prop]: Math.min(
-                  offset(this.boundary[i])[prop],
+                  boundaryOffsets[i][prop],
                   viewports[i][prop] - 2 * viewportOffset
                 ),
                 [`overflow-${axis}`]: "auto"
@@ -3546,10 +4168,10 @@
               const elOffset = offset(this.$el);
               css(this.$el, {
                 [prop]: (targetOffset[start] > elOffset[start] ? targetOffset[this.inset ? end : start] - Math.max(
-                  offset(this.boundary[i])[start],
+                  boundaryOffsets[i][start],
                   viewports[i][start] + viewportOffset
                 ) : Math.min(
-                  offset(this.boundary[i])[end],
+                  boundaryOffsets[i][end],
                   viewports[i][end] - viewportOffset
                 ) - targetOffset[this.inset ? start : end]) - positionOffset,
                 [`overflow-${axis}`]: "auto"
@@ -3805,7 +4427,9 @@
             const drop = this.getDropdown(target);
             const adjustHeight = () => {
               const maxBottom = Math.max(
-                ...parents(target, `.${this.clsDrop}`).concat(target).map((el) => offset(el).bottom)
+                ...[...parents(target, `.${this.clsDrop}`), target].map(
+                  (el) => offset(el).bottom
+                )
               );
               offset(this.dropbar, {
                 left: offset(this.dropbar).left,
@@ -3855,7 +4479,7 @@
         },
         async transitionTo(newHeight, el) {
           const { dropbar } = this;
-          const oldHeight = height(dropbar);
+          const oldHeight = height$1(dropbar);
           el = oldHeight < newHeight && el;
           await Transition.cancel([el, dropbar]);
           if (el) {
@@ -3865,7 +4489,7 @@
             }
           }
           css(el, "clipPath", `polygon(0 0,100% 0,100% ${oldHeight}px,0 ${oldHeight}px)`);
-          height(dropbar, oldHeight);
+          height$1(dropbar, oldHeight);
           await Promise.all([
             Transition.start(dropbar, { height: newHeight }, this.duration),
             Transition.start(
@@ -3976,10 +4600,12 @@
     var Margin = {
       props: {
         margin: String,
+        firstRow: Boolean,
         firstColumn: Boolean
       },
       data: {
         margin: "uk-margin-small-top",
+        firstRow: false,
         firstColumn: "uk-first-column"
       },
       observe: [
@@ -4019,6 +4645,7 @@
           for (const row of rows) {
             for (const el of row) {
               toggleClass(el, this.margin, rows[0] !== row);
+              toggleClass(el, this.firstRow, rows[0] === row);
               toggleClass(el, this.firstColumn, row[isRtl ? row.length - 1 : 0] === el);
             }
           }
@@ -4090,7 +4717,8 @@
         parallaxJustify: Boolean
       },
       data: {
-        margin: "uk-grid-margin",
+        margin: "",
+        firstRow: "uk-first-row",
         clsStack: "uk-grid-stack",
         masonry: false,
         parallax: 0,
@@ -4112,14 +4740,14 @@
         {
           read(data) {
             const { rows } = data;
-            let { masonry, parallax, parallaxJustify, margin } = this;
+            let { masonry, parallax, parallaxJustify } = 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 gutter = getGutter(rows, margin);
+            let gutter = toFloat(css(this.$el, "row-gap"));
             let columns;
             let translates;
             if (masonry) {
@@ -4212,10 +4840,6 @@
       }
       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) {
@@ -4287,7 +4911,7 @@
         css(element, "display", "block", "important");
       }
       css(element, "minHeight", "");
-      const height = dimensions(element).height - boxModelAdjust(element, "height", "content-box");
+      const height = dimensions$1(element).height - boxModelAdjust(element, "height", "content-box");
       css(element, style);
       return height;
     }
@@ -4318,45 +4942,6 @@
       }
     };
 
-    var Media = {
-      props: {
-        media: Boolean
-      },
-      data: {
-        media: false
-      },
-      connected() {
-        const media = toMedia(this.media, this.$el);
-        this.matchMedia = true;
-        if (media) {
-          this.mediaObj = window.matchMedia(media);
-          const handler = () => {
-            this.matchMedia = this.mediaObj.matches;
-            trigger(this.$el, createEvent("mediachange", false, true, [this.mediaObj]));
-          };
-          this.offMediaObj = on(this.mediaObj, "change", () => {
-            handler();
-            this.$emit("resize");
-          });
-          handler();
-        }
-      },
-      disconnected() {
-        var _a;
-        (_a = this.offMediaObj) == null ? void 0 : _a.call(this);
-      }
-    };
-    function toMedia(value, element) {
-      if (isString(value)) {
-        if (startsWith(value, "@")) {
-          value = toFloat(css(element, `--uk-breakpoint-${value.slice(1)}`));
-        } else if (isNaN(value)) {
-          return value;
-        }
-      }
-      return value && isNumeric(value) ? `(min-width: ${value}px)` : "";
-    }
-
     var heightViewport = {
       mixins: [Media],
       props: {
@@ -4395,7 +4980,7 @@
           const isScrollingElement = scrollingElement === scrollElement || body === scrollElement;
           let minHeight = `calc(${isScrollingElement ? "100vh" : `${viewportHeight}px`}`;
           if (this.expand) {
-            const diff = dimensions(scrollElement).height - dimensions(this.$el).height;
+            const diff = dimensions$1(scrollElement).height - dimensions$1(this.$el).height;
             minHeight += ` - ${diff}px`;
           } else {
             if (this.offsetTop) {
@@ -4408,13 +4993,13 @@
               }
             }
             if (this.offsetBottom === true) {
-              minHeight += ` - ${dimensions(this.$el.nextElementSibling).height}px`;
+              minHeight += ` - ${dimensions$1(this.$el.nextElementSibling).height}px`;
             } else if (isNumeric(this.offsetBottom)) {
               minHeight += ` - ${this.offsetBottom}vh`;
             } else if (this.offsetBottom && endsWith(this.offsetBottom, "px")) {
               minHeight += ` - ${toFloat(this.offsetBottom)}px`;
             } else if (isString(this.offsetBottom)) {
-              minHeight += ` - ${dimensions(query(this.offsetBottom, this.$el)).height}px`;
+              minHeight += ` - ${dimensions$1(query(this.offsetBottom, this.$el)).height}px`;
             }
           }
           minHeight += `${box ? ` - ${box}px` : ""})`;
@@ -4962,8 +5547,8 @@
       }
     };
     function findTargetColor(target) {
-      const dim = dimensions(target);
-      const viewport = dimensions(window);
+      const dim = dimensions$1(target);
+      const viewport = dimensions$1(window);
       if (!intersectRect(dim, viewport)) {
         return false;
       }
@@ -5227,7 +5812,7 @@
         if (last(active) !== modal || modal.$el.contains(e.target)) {
           return;
         }
-        const { left, top, width, height } = dimensions(e.target);
+        const { left, top, width, height } = dimensions$1(e.target);
         const topEl = document.elementFromPoint(left + width / 2, top + height / 2);
         if (topEl && (e.target.contains(topEl) || topEl.contains(e.target))) {
           return;
@@ -5281,7 +5866,7 @@
             } else {
               css(this.$el, "display", "block");
             }
-            height(this.$el);
+            height$1(this.$el);
           }
         },
         {
@@ -5518,7 +6103,7 @@
               this.clsSidebarAnimation,
               this.mode === "reveal" ? "" : this.clsMode
             );
-            height(body);
+            height$1(body);
             addClass(body, this.clsContainerAnimation);
             this.clsContainerAnimation && suppressUserScale();
           }
@@ -5594,7 +6179,7 @@
           return {
             max: Math.max(
               this.minHeight,
-              height(this.container) - (dimensions(this.content).height - height(this.$el))
+              height(this.container) - (dimensions$1(this.content).height - height(this.$el))
             )
           };
         },
@@ -5604,6 +6189,9 @@
         events: ["resize"]
       }
     };
+    function height(el) {
+      return dimensions$1(el).height - boxModelAdjust(el, "height", css(el, "boxSizing"));
+    }
 
     var overflowFade = {
       data: {
@@ -5917,7 +6505,7 @@
             if (scrollTop >= max) {
               active = length - 1;
             } else {
-              const offsetBy = this.offset + dimensions(getCoveringElement()).height + viewport.height * 0.1;
+              const offsetBy = this.offset + dimensions$1(getCoveringElement()).height + viewport.height * 0.1;
               for (let i = 0; i < targets.length; i++) {
                 if (offset(targets[i]).top - viewport.top - offsetBy > 0) {
                   break;
@@ -6036,12 +6624,12 @@
       ],
       update: [
         {
-          read({ height: height$1, width, margin, sticky }, types) {
+          read({ height, width, margin, sticky }, types) {
             this.inactive = !this.matchMedia || !isVisible(this.$el) || !this.$el.offsetHeight;
             if (this.inactive) {
               return;
             }
-            const dynamicViewport = height(window);
+            const dynamicViewport = height$1(window);
             const maxScrollHeight = Math.max(
               0,
               document.scrollingElement.scrollHeight - dynamicViewport
@@ -6056,7 +6644,7 @@
               this.hide();
             }
             if (!this.active) {
-              ({ height: height$1, width } = dimensions(this.$el));
+              ({ height, width } = dimensions$1(this.$el));
               margin = css(this.$el, "margin");
             }
             if (hide) {
@@ -6064,25 +6652,25 @@
             }
             const viewport2 = toPx("100vh", "height");
             let position = this.position;
-            if (this.overflowFlip && height$1 > viewport2) {
+            if (this.overflowFlip && height > viewport2) {
               position = position === "top" ? "bottom" : "top";
             }
             const referenceElement = this.isFixed ? this.placeholder : this.$el;
             let [offset$1, offsetEnd] = [this.offset, this.offsetEnd].map(
               (value) => toPx(value, "height", sticky ? this.$el : referenceElement)
             );
-            if (position === "bottom" && (height$1 < dynamicViewport || this.overflowFlip)) {
-              offset$1 += dynamicViewport - height$1;
+            if (position === "bottom" && (height < dynamicViewport || this.overflowFlip)) {
+              offset$1 += dynamicViewport - height;
             }
-            const elementBox = height$1 + offset$1 + offsetEnd;
+            const elementBox = height + offset$1 + offsetEnd;
             const overflow = this.overflowFlip ? 0 : Math.max(0, elementBox - viewport2);
             const topOffset = offset(referenceElement).top - // offset possible `transform: translateY` animation 'uk-animation-slide-top' while hiding
             new DOMMatrix(css(referenceElement, "transform")).m42;
-            const elHeight = dimensions(this.$el).height;
+            const elHeight = dimensions$1(this.$el).height;
             const start = (this.start === false ? topOffset : parseProp(this.start, this.$el, topOffset)) - offset$1;
             const end = this.end === false ? maxScrollHeight : Math.min(
               maxScrollHeight,
-              parseProp(this.end, this.$el, topOffset + height$1, true) - elHeight - offset$1 + overflow
+              parseProp(this.end, this.$el, topOffset + height, true) - elHeight - offset$1 + overflow
             );
             sticky = !this.showOnUp && start + offset$1 === topOffset && end === Math.min(
               maxScrollHeight,
@@ -6093,7 +6681,7 @@
               end,
               offset: offset$1,
               overflow,
-              height: height$1,
+              height,
               elHeight,
               width,
               margin,
@@ -6270,7 +6858,7 @@
       if (!value) {
         return 0;
       }
-      if (isNumeric(value) || isString(value) && value.match(/^-?\d/)) {
+      if (isNumeric(value) || isString(value) && /^-?\d/.test(value)) {
         return propOffset + toPx(value, "height", el, true);
       } else {
         const refElement = value === true ? getVisibleParent(el) : query(value, el);
@@ -6304,15 +6892,6 @@
       }
     }
 
-    function getMaxPathLength(el) {
-      return isVisible(el) ? Math.ceil(
-        Math.max(0, ...$$("[stroke]", el).map((stroke) => {
-          var _a;
-          return ((_a = stroke.getTotalLength) == null ? void 0 : _a.call(stroke)) || 0;
-        }))
-      ) : 0;
-    }
-
     var svg = {
       mixins: [Svg],
       args: "src",
@@ -6394,10 +6973,9 @@
 
     const selDisabled = ".uk-disabled *, .uk-disabled, [disabled]";
     var Switcher = {
-      mixins: [Togglable],
+      mixins: [Connect],
       args: "connect",
       props: {
-        connect: String,
         toggle: String,
         itemNav: String,
         active: Number,
@@ -6409,20 +6987,12 @@
         toggle: "> * > :first-child",
         itemNav: false,
         active: 0,
-        cls: "uk-active",
         attrItem: "uk-switcher-item",
         selVertical: ".uk-nav",
         followFocus: false,
         swiping: true
       },
       computed: {
-        connects: {
-          get: ({ connect }, $el) => queryAll(connect, $el),
-          observe: ({ connect }) => connect
-        },
-        connectChildren() {
-          return this.connects.flatMap((el) => children(el));
-        },
         toggles: ({ toggle }, $el) => $$(toggle, $el),
         children(_, $el) {
           return children($el).filter(
@@ -6453,10 +7023,7 @@
       connected() {
         this.$el.role = "tablist";
       },
-      observe: [
-        lazyload({ targets: ({ connectChildren }) => connectChildren }),
-        swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping })
-      ],
+      observe: swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping }),
       events: [
         {
           name: "click keydown",
@@ -6510,24 +7077,16 @@
         }
       ],
       update() {
-        var _a;
-        for (const el of this.connects) {
-          if (isTag(el, "ul")) {
-            el.role = "presentation";
-          }
-        }
         attr(children(this.$el), "role", "presentation");
         for (const index in this.toggles) {
-          const toggle = this.toggles[index];
-          const item = (_a = this.connects[0]) == null ? void 0 : _a.children[index];
-          toggle.role = "tab";
-          if (!item) {
-            continue;
-          }
-          toggle.id = generateId(this, toggle);
-          item.id = generateId(this, item);
-          attr(toggle, "aria-controls", item.id);
-          attr(item, { role: "tabpanel", "aria-labelledby": toggle.id });
+          const controls = this.connects.map(({ children: children2 }) => {
+            var _a;
+            return (_a = children2[index]) == null ? void 0 : _a.id;
+          }).filter(Boolean);
+          attr(this.toggles[index], {
+            role: "tab",
+            "aria-controls": controls.join(" ")
+          });
         }
         attr(this.$el, "aria-orientation", matches(this.$el, this.selVertical) ? "vertical" : null);
       },
@@ -6560,15 +7119,7 @@
               tabindex: next === i ? null : -1
             });
           });
-          const animate = prev >= 0 && prev !== next;
-          this.connects.forEach(async ({ children: children2 }) => {
-            const actives = toArray(children2).filter(
-              (child, i) => i !== next && hasClass(child, this.cls)
-            );
-            if (await this.toggleElement(actives, false, animate)) {
-              await this.toggleElement(children2[next], true, animate);
-            }
-          });
+          return this.showConnects(next, prev >= 0 && prev !== next);
         }
       }
     };