uikit 3.25.27-dev.9e97c1f → 3.25.27

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.25.27-dev.9e97c1f | https://www.getuikit.com | (c) 2014 - 2026 YOOtheme | MIT License */
+/*! UIkit 3.25.27 | 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 key of props) {
-        result[key] = obj[key];
+      for (const prop of props) {
+        result[prop] = obj[prop];
       }
       return result;
     }
@@ -247,12 +247,13 @@
       }
       if (isUndefined(value)) {
         return (_a = toNode(element)) == null ? void 0 : _a.getAttribute(name);
-      }
-      for (const el of toNodes(element)) {
-        if (value === null) {
-          removeAttr(el, name);
-        } else {
-          el.setAttribute(name, value);
+      } else {
+        for (const el of toNodes(element)) {
+          if (value === null) {
+            removeAttr(el, name);
+          } else {
+            el.setAttribute(name, value);
+          }
         }
       }
     }
@@ -589,18 +590,19 @@
           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 values = {};
+          const props = {};
           for (const prop of property) {
-            values[prop] = css(element2, prop);
+            props[prop] = css(element2, prop);
           }
-          return values;
+          return props;
         } else if (isObject(property)) {
           for (const prop in property) {
             css(element2, prop, property[prop], value);
@@ -795,9 +797,7 @@
       );
     }
     function unwrap(element) {
-      for (const elementParent of new Set(toNodes(element).map(parent))) {
-        elementParent.replaceWith(...elementParent.childNodes);
-      }
+      toNodes(element).map(parent).filter((value, index, self) => self.indexOf(value) === index).forEach((parent2) => parent2.replaceWith(...parent2.childNodes));
     }
     const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
     function fragment(html2) {
@@ -1159,9 +1159,7 @@
       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);
@@ -1173,7 +1171,7 @@
     function post(el, cmd) {
       el.contentWindow.postMessage(JSON.stringify({ event: "command", ...cmd }), "*");
     }
-    const stateKey = /* @__PURE__ */ Symbol();
+    const stateKey = "_ukPlayer";
     let counter = 0;
     function enableApi(el) {
       if (el[stateKey]) {
@@ -1204,16 +1202,17 @@
       if (!isVisible(element)) {
         return false;
       }
-      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));
+      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))
+      );
     }
     function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
       const parents2 = isVisible(element) ? scrollParents(element, false, ["hidden"]) : [];
@@ -1297,12 +1296,11 @@
       if (~fixedIndex) {
         ancestors = ancestors.slice(fixedIndex);
       }
-      return [
-        scrollEl,
-        ...ancestors.filter(
+      return [scrollEl].concat(
+        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];
@@ -1884,14 +1882,11 @@
     function coerce$1(type, value) {
       if (type === Boolean) {
         return toBoolean(value);
-      }
-      if (type === Number) {
+      } else if (type === Number) {
         return toNumber(value);
-      }
-      if (type === "list") {
+      } else if (type === "list") {
         return toList(value);
-      }
-      if (type === Object && isString(value)) {
+      } else if (type === Object && isString(value)) {
         return parseOptions(value);
       }
       return type ? type(value) : value;
@@ -1967,9 +1962,9 @@
     function lazyload(options = {}) {
       return intersection({
         handler: function(entries, observer) {
-          const { targets = this.$el, preload = 5, media = false } = options;
+          const { targets = this.$el, preload = 5 } = options;
           for (const el of toNodes(isFunction(targets) ? targets(this) : targets)) {
-            (media ? preloadMedia : loadLazyElements)(el, preload);
+            $$('[loading="lazy"]', el).slice(0, preload - 1).forEach((el2) => removeAttr(el2, "loading"));
           }
           for (const { isIntersecting, target } of entries) {
             isIntersecting && observer.unobserve(target);
@@ -1978,15 +1973,6 @@
         ...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");
     }
@@ -2050,12 +2036,10 @@
     var Margin = {
       props: {
         margin: String,
-        firstRow: Boolean,
         firstColumn: Boolean
       },
       data: {
         margin: "uk-margin-small-top",
-        firstRow: false,
         firstColumn: "uk-first-column"
       },
       observe: [
@@ -2095,7 +2079,6 @@
           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);
             }
           }
@@ -2843,18 +2826,20 @@
       if (show) {
         _toggle(el, true);
       }
-      const prevProps = pick(el.style, [
-        "padding",
-        "border",
-        "width",
-        "height",
-        "minWidth",
-        "minHeight",
-        "overflowY",
-        "overflowX",
-        marginProp,
-        marginStartProp
-      ]);
+      const prevProps = Object.fromEntries(
+        [
+          "padding",
+          "border",
+          "width",
+          "height",
+          "minWidth",
+          "minHeight",
+          "overflowY",
+          "overflowX",
+          marginProp,
+          marginStartProp
+        ].map((key) => [key, el.style[key]])
+      );
       const dim = dimensions$1(el);
       const currentMargin = toFloat(css(el, marginProp));
       const marginStart = toFloat(css(el, marginStartProp));
@@ -3128,11 +3113,18 @@
 
     var Animations$2 = {
       slide: {
-        percent: translated,
-        translate: (percent, dir) => [
-          { transform: translate(dir * -100 * percent) },
-          { transform: translate(dir * 100 * (1 - percent)) }
-        ]
+        show(dir) {
+          return [{ transform: translate(dir * -100) }, { transform: translate() }];
+        },
+        percent(current) {
+          return translated(current);
+        },
+        translate(percent, dir) {
+          return [
+            { transform: translate(dir * -100 * percent) },
+            { transform: translate(dir * 100 * (1 - percent)) }
+          ];
+        }
       }
     };
     function translated(el) {
@@ -3143,8 +3135,8 @@
     }
 
     function Transitioner$1(prev, next, dir, { animation, easing }) {
-      const { percent, translate } = animation;
-      const props = translate(1, dir);
+      const { percent, translate, show = noop } = animation;
+      const props = show(dir);
       const { promise, resolve } = withResolvers();
       return {
         dir,
@@ -3426,7 +3418,7 @@
       return Math.atan2(Math.abs(pos2.y - pos1.y), Math.abs(pos2.x - pos1.x)) * 180 / Math.PI;
     }
 
-    var VERSION = '3.25.27-dev.9e97c1f';
+    var VERSION = '3.25.27';
 
     function initWatches(instance) {
       instance._watches = [];
@@ -3635,7 +3627,7 @@
     }
     const getAttributes = memoize((id, props) => {
       const attributes = Object.keys(props);
-      const filter = [...attributes, id].flatMap((key) => [hyphenate(key), `data-${hyphenate(key)}`]);
+      const filter = attributes.concat(id).flatMap((key) => [hyphenate(key), `data-${hyphenate(key)}`]);
       return { attributes, filter };
     });
     function initPropsObserver(instance) {
@@ -3725,10 +3717,14 @@
     }
     function normalizeData({ data = {} }, { args = [], props = {} }) {
       if (isArray(data)) {
-        data = data.slice(0, args.length).reduce(
-          (data2, value, index) => assign(data2, isPlainObject(value) ? value : { [args[index]]: value }),
-          {}
-        );
+        data = data.slice(0, args.length).reduce((data2, value, index) => {
+          if (isPlainObject(value)) {
+            assign(data2, value);
+          } else {
+            data2[args[index]] = value;
+          }
+          return data2;
+        }, {});
       }
       for (const key in data) {
         if (isUndefined(data[key])) {
@@ -3776,10 +3772,11 @@
       function init(element2) {
         const instance = getComponent(element2, name);
         if (instance) {
-          if (!data) {
+          if (data) {
+            instance.$destroy();
+          } else {
             return instance;
           }
-          instance.$destroy();
         }
         return new Component({ el: element2, data });
       }
@@ -4280,35 +4277,75 @@
     var Animations$1 = {
       ...Animations$2,
       fade: {
-        percent: (current) => 1 - css(current, "opacity"),
-        translate: (percent) => [{ opacity: 1 - percent, zIndex: 0 }, { zIndex: -1 }]
+        show() {
+          return [{ opacity: 0, zIndex: 0 }, { zIndex: -1 }];
+        },
+        percent(current) {
+          return 1 - css(current, "opacity");
+        },
+        translate(percent) {
+          return [{ opacity: 1 - percent, zIndex: 0 }, { zIndex: -1 }];
+        }
       },
       scale: {
-        percent: (current) => 1 - css(current, "opacity"),
-        translate: (percent) => [
-          { opacity: 1 - percent, transform: scale3d(1 + 0.5 * percent), zIndex: 0 },
-          { zIndex: -1 }
-        ]
+        show() {
+          return [{ opacity: 0, transform: scale3d(1 + 0.5), zIndex: 0 }, { zIndex: -1 }];
+        },
+        percent(current) {
+          return 1 - css(current, "opacity");
+        },
+        translate(percent) {
+          return [
+            { opacity: 1 - percent, transform: scale3d(1 + 0.5 * percent), zIndex: 0 },
+            { zIndex: -1 }
+          ];
+        }
       },
       pull: {
-        percent: (current, next, dir) => dir < 0 ? 1 - translated(next) : translated(current),
-        translate: (percent, dir) => dir < 0 ? [
-          { transform: translate(30 * percent), zIndex: -1 },
-          { transform: translate(-100 * (1 - percent)), zIndex: 0 }
-        ] : [
-          { transform: translate(-percent * 100), zIndex: 0 },
-          { transform: translate(30 * (1 - percent)), zIndex: -1 }
-        ]
+        show(dir) {
+          return dir < 0 ? [
+            { transform: translate(30), zIndex: -1 },
+            { transform: translate(), zIndex: 0 }
+          ] : [
+            { transform: translate(-100), zIndex: 0 },
+            { transform: translate(), zIndex: -1 }
+          ];
+        },
+        percent(current, next, dir) {
+          return dir < 0 ? 1 - translated(next) : translated(current);
+        },
+        translate(percent, dir) {
+          return dir < 0 ? [
+            { transform: translate(30 * percent), zIndex: -1 },
+            { transform: translate(-100 * (1 - percent)), zIndex: 0 }
+          ] : [
+            { transform: translate(-percent * 100), zIndex: 0 },
+            { transform: translate(30 * (1 - percent)), zIndex: -1 }
+          ];
+        }
       },
       push: {
-        percent: (current, next, dir) => dir > 0 ? 1 - translated(next) : translated(current),
-        translate: (percent, dir) => dir < 0 ? [
-          { transform: translate(percent * 100), zIndex: 0 },
-          { transform: translate(-30 * (1 - percent)), zIndex: -1 }
-        ] : [
-          { transform: translate(-30 * percent), zIndex: -1 },
-          { transform: translate(100 * (1 - percent)), zIndex: 0 }
-        ]
+        show(dir) {
+          return dir < 0 ? [
+            { transform: translate(100), zIndex: 0 },
+            { transform: translate(), zIndex: -1 }
+          ] : [
+            { transform: translate(-30), zIndex: -1 },
+            { transform: translate(), zIndex: 0 }
+          ];
+        },
+        percent(current, next, dir) {
+          return dir > 0 ? 1 - translated(next) : translated(current);
+        },
+        translate(percent, dir) {
+          return dir < 0 ? [
+            { transform: translate(percent * 100), zIndex: 0 },
+            { transform: translate(-30 * (1 - percent)), zIndex: -1 }
+          ] : [
+            { transform: translate(-30 * percent), zIndex: -1 },
+            { transform: translate(100 * (1 - percent)), zIndex: 0 }
+          ];
+        }
       }
     };
     function scale3d(value) {
@@ -4318,15 +4355,32 @@
     var Animations = {
       ...Animations$2,
       fade: {
-        percent: (current) => 1 - css(current, "opacity"),
-        translate: (percent) => [{ opacity: 1 - percent }, { opacity: percent }]
+        show() {
+          return [{ opacity: 0 }, { opacity: 1 }];
+        },
+        percent(current) {
+          return 1 - css(current, "opacity");
+        },
+        translate(percent) {
+          return [{ opacity: 1 - percent }, { opacity: percent }];
+        }
       },
       scale: {
-        percent: (current) => 1 - css(current, "opacity"),
-        translate: (percent) => [
-          { opacity: 1 - percent, transform: scale3d(1 - 0.2 * percent) },
-          { opacity: percent, transform: scale3d(1 - 0.2 + 0.2 * percent) }
-        ]
+        show() {
+          return [
+            { opacity: 0, transform: scale3d(1 - 0.2) },
+            { opacity: 1, transform: scale3d(1) }
+          ];
+        },
+        percent(current) {
+          return 1 - css(current, "opacity");
+        },
+        translate(percent) {
+          return [
+            { opacity: 1 - percent, transform: scale3d(1 - 0.2 * percent) },
+            { opacity: percent, transform: scale3d(1 - 0.2 + 0.2 * percent) }
+          ];
+        }
       }
     };
 
@@ -4500,22 +4554,81 @@
             if (!src) {
               return;
             }
-            try {
-              for (const loader of [
-                loadImage,
-                loadVideo,
-                loadIframe,
-                loadYouTube,
-                loadVimeo
-              ]) {
-                const content = await loader({ src, type, attrs, item, cmp: this });
-                if (content) {
-                  this.setItem(item, content);
-                  return;
-                }
+            let matches2;
+            const iframeAttrs = {
+              allowfullscreen: "",
+              style: "max-width: 100%; box-sizing: border-box;",
+              "uk-responsive": "",
+              "uk-video": Boolean(this.videoAutoplay)
+            };
+            if (type === "image" || isImage(src)) {
+              const img = createEl("img");
+              wrapInPicture(img, item.sources);
+              attr(img, {
+                src,
+                ...pick(item, ["alt", "srcset", "sizes"]),
+                ...attrs
+              });
+              on(img, "load", () => this.setItem(item, parent(img) || img));
+              on(img, "error", () => this.setError(item));
+            } else if (type === "video" || isVideo(src)) {
+              const inline = this.videoAutoplay === "inline";
+              const video = createEl("video", {
+                src,
+                playsinline: "",
+                controls: inline ? null : "",
+                loop: inline ? "" : null,
+                muted: inline ? "" : null,
+                poster: this.videoAutoplay ? null : item.poster,
+                "uk-video": Boolean(this.videoAutoplay),
+                ...attrs
+              });
+              on(video, "loadedmetadata", () => this.setItem(item, video));
+              on(video, "error", () => this.setError(item));
+            } else if (type === "iframe" || src.match(/\.(html|php)($|\?)/i)) {
+              this.setItem(
+                item,
+                createEl("iframe", {
+                  src,
+                  allowfullscreen: "",
+                  class: "uk-lightbox-iframe",
+                  ...attrs
+                })
+              );
+            } else if (matches2 = src.match(
+              /\/\/(?:.*?youtube(-nocookie)?\..*?(?:[?&]v=|\/shorts\/)|youtu\.be\/)([\w-]{11})[&?]?(.*)?/
+            )) {
+              this.setItem(
+                item,
+                createEl("iframe", {
+                  src: `https://www.youtube${matches2[1] || ""}.com/embed/${matches2[2]}${matches2[3] ? `?${matches2[3]}` : ""}`,
+                  width: 1920,
+                  height: 1080,
+                  ...iframeAttrs,
+                  ...attrs
+                })
+              );
+            } else if (matches2 = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/)) {
+              try {
+                const { height, width } = await (await fetch(
+                  `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURI(
+                src
+              )}`,
+                  { credentials: "omit" }
+                )).json();
+                this.setItem(
+                  item,
+                  createEl("iframe", {
+                    src: `https://player.vimeo.com/video/${matches2[1]}${matches2[2] ? `?${matches2[2]}` : ""}`,
+                    width,
+                    height,
+                    ...iframeAttrs,
+                    ...attrs
+                  })
+                );
+              } catch {
+                this.setError(item);
               }
-            } catch {
-              this.setError(item);
             }
           }
         },
@@ -4575,91 +4688,6 @@
       attr(el, attrs);
       return el;
     }
-    async function loadImage({ src, type, attrs, item }) {
-      if (type !== "image" && !isImage(src)) {
-        return;
-      }
-      const img = createEl("img");
-      wrapInPicture(img, item.sources);
-      attr(img, {
-        src,
-        ...pick(item, ["alt", "srcset", "sizes"]),
-        ...attrs
-      });
-      await img.decode();
-      return parent(img) || img;
-    }
-    function loadVideo({ src, type, attrs, item, cmp }) {
-      if (type !== "video" && !isVideo(src)) {
-        return;
-      }
-      const inline = cmp.videoAutoplay === "inline";
-      const video = createEl("video", {
-        src,
-        playsinline: "",
-        controls: inline ? null : "",
-        loop: inline ? "" : null,
-        muted: inline ? "" : null,
-        poster: cmp.videoAutoplay ? null : item.poster,
-        "uk-video": Boolean(cmp.videoAutoplay),
-        ...attrs
-      });
-      return new Promise((resolve, reject) => {
-        on(video, "loadedmetadata", () => resolve(video));
-        on(video, "error", reject);
-      });
-    }
-    function loadIframe({ src, type, attrs }) {
-      if (type !== "iframe" && !/\.(html|php)($|\?)/i.test(src)) {
-        return;
-      }
-      return createEl("iframe", {
-        src,
-        allowfullscreen: "",
-        class: "uk-lightbox-iframe",
-        ...attrs
-      });
-    }
-    function loadYouTube({ src, attrs, cmp }) {
-      const matches2 = src.match(
-        /\/\/(?:.*?youtube(-nocookie)?\..*?(?:[?&]v=|\/shorts\/)|youtu\.be\/)([\w-]{11})[&?]?(.*)?/
-      );
-      if (!matches2) {
-        return;
-      }
-      return createEl("iframe", {
-        src: `https://www.youtube${matches2[1] || ""}.com/embed/${matches2[2]}${matches2[3] ? `?${matches2[3]}` : ""}`,
-        width: 1920,
-        height: 1080,
-        ...getIframeAttrs(cmp),
-        ...attrs
-      });
-    }
-    async function loadVimeo({ src, attrs, cmp }) {
-      const matches2 = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/);
-      if (!matches2) {
-        return;
-      }
-      const { height, width } = await (await fetch(
-        `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURIComponent(src)}`,
-        { credentials: "omit" }
-      )).json();
-      return createEl("iframe", {
-        src: `https://player.vimeo.com/video/${matches2[1]}${matches2[2] ? `?${matches2[2]}` : ""}`,
-        width,
-        height,
-        ...getIframeAttrs(cmp),
-        ...attrs
-      });
-    }
-    function getIframeAttrs(cmp) {
-      return {
-        allowfullscreen: "",
-        style: "max-width: 100%; box-sizing: border-box;",
-        "uk-responsive": "",
-        "uk-video": Boolean(cmp.videoAutoplay)
-      };
-    }
     function toThumbnavItem(item, videoAutoplay) {
       const el = item.poster || item.thumb && (item.type === "image" || isImage(item.thumb)) ? createEl("img", { src: item.poster || item.thumb, alt: "" }) : item.thumb && (item.type === "video" || isVideo(item.thumb)) ? createEl("video", {
         src: item.thumb,
@@ -4745,7 +4773,7 @@
         if (items[i].thumb) {
           continue;
         }
-        const parent = [...parents(toggle).reverse(), toggle].find(
+        const parent = parents(toggle).reverse().concat(toggle).find(
           (parent2) => this.$el.contains(parent2) && (parent2 === toggle || $$(this.toggle, parent2).length === 1)
         );
         if (!parent) {
@@ -4768,121 +4796,6 @@
       return item;
     }
 
-    const hasAnimationApi = inBrowser && window.Animation;
-    var marquee = {
-      mixins: [Class],
-      props: {
-        velocity: Number,
-        start: Number,
-        reverse: Boolean,
-        pause: Boolean,
-        pauseVelocity: Number,
-        fadeSize: null
-      },
-      data: {
-        velocity: 25,
-        start: 0,
-        reverse: false,
-        pause: false,
-        pauseVelocity: 10,
-        selList: ".uk-marquee-items",
-        fadeSize: 0
-      },
-      computed: {
-        list: ({ selList }, $el) => $(selList, $el),
-        items() {
-          return children(this.list);
-        }
-      },
-      watch: {
-        items() {
-          this.$emit();
-        }
-      },
-      observe: [
-        resize({
-          target: ({ $el, items }) => [$el, ...items]
-        }),
-        intersection({
-          handler(entries) {
-            let active;
-            for (const entry of entries) {
-              entry.target.inert = !entry.isIntersecting;
-              active || (active = entry.isIntersecting && entry.target);
-            }
-            if (!active) {
-              return;
-            }
-            const { items } = this;
-            const index = items.indexOf(active);
-            if (!~index) {
-              return;
-            }
-            const direction = this.reverse ? 1 : -1;
-            for (let offset = 1; offset < items.length; offset++) {
-              const item = items[getIndex(index + direction * offset, items)];
-              if (item.inert) {
-                preloadMedia(item);
-                break;
-              }
-            }
-          },
-          target: ({ items }) => items,
-          args: { intersecting: false },
-          options: ({ $el }) => ({ root: $el })
-        })
-      ],
-      methods: {
-        vertical() {
-          return hasClass(this.$el, `${this.$options.id}-vertical`);
-        }
-      },
-      events: {
-        name: [pointerEnter, pointerLeave],
-        el: ({ $el }) => $el,
-        self: true,
-        filter: ({ pause }) => hasAnimationApi && pause,
-        handler(e) {
-          for (const el of this.items) {
-            for (const animation of el.getAnimations()) {
-              animation.playbackRate = e.type === pointerEnter ? this.pauseVelocity / this.velocity : 1;
-            }
-          }
-        }
-      },
-      update: {
-        write() {
-          const prefix = this.$options.id;
-          const items = this.items;
-          const vertical = this.vertical();
-          css(items, "offset", "none");
-          const dir = vertical ? ["top", "bottom"] : ["left", "right"];
-          if (!vertical && isRtl) {
-            dir.reverse();
-          }
-          const listStart = dimensions$1(this.list)[dir[0]];
-          const itemEnds = items.map((el) => dimensions$1(el)[dir[1]]);
-          const listEnd = Math[!vertical && isRtl ? "min" : "max"](...itemEnds);
-          for (const [index, el] of items.entries()) {
-            const elEnd = itemEnds[index];
-            const line1 = listEnd - elEnd;
-            const line2 = elEnd - listStart;
-            const path = vertical ? `"M0 0 v${line1}M0 ${-line2} v${line2}"` : `"M0 0 h${line1}M${-line2} 0 h${line2}"`;
-            css(el, `--${prefix}-path`, path);
-          }
-          css(this.$el, {
-            [`--${prefix}-duration`]: `${Math.abs(listStart - listEnd) / this.velocity}s`,
-            [`--${prefix}-start`]: this.start,
-            [`--${prefix}-direction`]: this.reverse ? "reverse" : "normal",
-            "--uk-overflow-fade-size": this.fadeSize ? `${toPx(this.fadeSize, vertical ? "height" : "width", this.$el, true)}px` : ""
-          });
-          toggleClass(this.$el, `${prefix}-fade`, this.fadeSize);
-          css(items, "offset", "");
-        },
-        events: ["resize"]
-      }
-    };
-
     var notification = {
       mixins: [Container],
       functional: true,
@@ -4891,7 +4804,6 @@
         message: "",
         status: "",
         timeout: 5e3,
-        duration: 400,
         group: "",
         pos: "top-center",
         clsContainer: "uk-notification",
@@ -4921,11 +4833,10 @@
       },
       async connected() {
         const margin = toFloat(css(this.$el, this.marginProp));
-        await Transition.start(
-          css(this.$el, this.startProps),
-          { opacity: 1, [this.marginProp]: margin },
-          this.duration
-        );
+        await Transition.start(css(this.$el, this.startProps), {
+          opacity: 1,
+          [this.marginProp]: margin
+        });
         if (this.timeout) {
           this.timer = setTimeout(this.close, this.timeout);
         }
@@ -4960,7 +4871,7 @@
             clearTimeout(this.timer);
           }
           if (!immediate) {
-            await Transition.start(this.$el, this.startProps, this.duration);
+            await Transition.start(this.$el, this.startProps);
           }
           removeFn(this.$el);
         }
@@ -5317,7 +5228,10 @@
       return val;
     }
     function fillObject(keys2, value) {
-      return Object.fromEntries(keys2.map((prop) => [prop, value]));
+      return keys2.reduce((data, prop) => {
+        data[prop] = value;
+        return data;
+      }, {});
     }
     function ease(percent, easing) {
       return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, 1 - easing);
@@ -5391,14 +5305,16 @@
       return el ? "offsetTop" in el ? el : getOffsetElement(parent(el)) : document.documentElement;
     }
 
-    var ScrollDriven = {
+    var SliderParallax = {
       props: {
+        parallax: Boolean,
         parallaxTarget: Boolean,
         parallaxStart: String,
         parallaxEnd: String,
         parallaxEasing: Number
       },
       data: {
+        parallax: false,
         parallaxTarget: false,
         parallaxStart: 0,
         parallaxEnd: 0,
@@ -5412,48 +5328,26 @@
         scroll$1({ filter: ({ parallax }) => parallax })
       ],
       computed: {
-        parallaxTargetFallback: ($props, $el) => $el,
         parallaxTarget({ parallaxTarget }, $el) {
-          return parallaxTarget && query(parallaxTarget, $el) || this.parallaxTargetFallback;
+          return parallaxTarget && query(parallaxTarget, $el) || this.list;
         }
       },
       update: {
         read() {
           if (!this.parallax) {
-            return;
+            return false;
           }
           const target = this.parallaxTarget;
           if (!target) {
-            return;
+            return false;
           }
           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 };
+          return { parallax: this.getIndexAt(percent) };
         },
-        events: ["scroll", "resize"]
-      }
-    };
-
-    var SliderParallax = {
-      mixins: [ScrollDriven],
-      props: {
-        parallax: Boolean
-      },
-      data: {
-        parallax: false
-      },
-      computed: {
-        parallaxTargetFallback() {
-          return this.list;
-        }
-      },
-      update: {
-        write({ percent }) {
-          if (!this.parallax) {
-            return;
-          }
-          const [prevIndex, slidePercent] = this.getIndexAt(percent);
+        write({ parallax }) {
+          const [prevIndex, slidePercent] = parallax;
           const nextIndex = this.getValidIndex(prevIndex + Math.ceil(slidePercent));
           const prev = this.slides[prevIndex];
           const next = this.slides[nextIndex];
@@ -5545,8 +5439,7 @@
     var SliderPreload = {
       observe: lazyload({
         target: ({ slides }) => slides,
-        targets: (instance) => instance.getAdjacentSlides(),
-        media: true
+        targets: (instance) => instance.getAdjacentSlides()
       }),
       methods: {
         getAdjacentSlides() {
@@ -6359,7 +6252,7 @@
         inset: false
       },
       connected() {
-        this.pos = [...this.$props.pos.split("-"), "center"].slice(0, 2);
+        this.pos = this.$props.pos.split("-").concat("center").slice(0, 2);
         [this.dir, this.align] = this.pos;
         this.axis = includes(["top", "bottom"], this.dir) ? "y" : "x";
       },
@@ -6762,7 +6655,6 @@
         Filter: filter,
         Lightbox: lightbox,
         LightboxPanel: LightboxPanel,
-        Marquee: marquee,
         Notification: notification,
         Parallax: parallax,
         Slider: slider,
@@ -6846,100 +6738,29 @@
     globalApi(App);
     instanceApi(App);
 
-    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 wrappers = /* @__PURE__ */ new WeakMap();
     var Accordion = {
-      mixins: [Class, Connect],
+      mixins: [Class, Togglable],
       props: {
+        animation: Boolean,
         targets: String,
         active: null,
         collapsible: Boolean,
         multiple: Boolean,
         toggle: String,
         content: String,
-        offset: Number,
-        switcherConnect: String
+        offset: Number
       },
       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,
-        switcherConnect: ""
-      },
-      beforeConnect() {
-        this.connect = this.$props.connect = this.switcherConnect;
+        offset: 0
       },
       computed: {
         items: ({ targets }, $el) => $$(targets, $el),
@@ -6965,12 +6786,6 @@
             this.toggle(active, false);
           }
         },
-        connectChildren() {
-          this.showConnects(
-            findIndex(this.items, (el) => hasClass(el, this.clsOpen)),
-            false
-          );
-        },
         toggles() {
           this.$emit();
         },
@@ -7020,57 +6835,44 @@
           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": controls.join(" "),
+            "aria-controls": content.id,
             "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: {
-        async toggle(item, animate) {
-          animate = animate !== false;
-          const next = getIndex(item, this.items);
-          item = this.items[next];
+        toggle(item, animate) {
+          item = this.items[getIndex(item, this.items)];
           let items = [item];
           const activeItems = filter$1(this.items, `.${this.clsOpen}`);
-          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)
-          ]);
+          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);
+              })
+            )
+          );
         }
       }
     };
@@ -7161,118 +6963,60 @@
       );
     }
 
-    const loopKey = /* @__PURE__ */ Symbol();
     var Video = {
-      mixins: [Media, ScrollDriven],
       args: "autoplay",
       props: {
         automute: Boolean,
         autoplay: Boolean,
         restart: Boolean,
-        inviewMargin: String,
-        inviewQueued: Number,
-        hoverTarget: Boolean,
-        hoverRewind: Number,
-        reducedMotionTime: Number
+        hoverTarget: Boolean
       },
       data: {
         automute: false,
         autoplay: true,
         restart: false,
-        inviewMargin: "0px",
-        inviewQueued: 0,
-        hoverTarget: false,
-        hoverRewind: 0,
-        reducedMotionTime: 0,
-        media: "(prefers-reduced-motion: reduce)"
+        hoverTarget: false
       },
       beforeConnect() {
-        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")) {
+        const isVideo = isTag(this.$el, "video");
+        if (this.autoplay === "inview" && isVideo && !hasAttr(this.$el, "preload")) {
           this.$el.preload = "none";
         }
         if (!isVideo && !hasAttr(this.$el, "allow")) {
           this.$el.allow = "autoplay";
         }
         if (this.autoplay === "hover") {
-          this.hoverTarget = query(this.hoverTarget, this.$el) || this.$el;
-          if (!isFocusable(this.hoverTarget)) {
-            this.hoverTarget.tabIndex = 0;
+          if (isVideo) {
+            this.$el.tabIndex = 0;
+          } else {
+            this.autoplay = true;
           }
         }
         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 }) => hoverTarget,
+          el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
           filter: ({ autoplay }) => autoplay === "hover",
           handler(e) {
-            var _a;
-            (_a = this._reverseAbort) == null ? void 0 : _a.abort();
             if (!isTouch(e) || !isPlaying(this.$el)) {
-              this.play();
+              play(this.$el);
             } else {
-              this.pause();
+              pauseHover(this.$el, this.restart);
             }
           }
         },
         {
           name: `${pointerLeave} focusout`,
-          el: ({ hoverTarget }) => hoverTarget,
+          el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
           filter: ({ autoplay }) => autoplay === "hover",
           handler(e) {
-            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);
+            if (!isTouch(e)) {
+              pauseHover(this.$el, this.restart);
             }
-            playNextQueued();
           }
         }
       ],
@@ -7285,144 +7029,33 @@
           }
         }),
         intersection({
-          filter: ({ $el, interactionDriven }) => !interactionDriven && $el.preload !== "none",
-          handler([{ isIntersecting }]) {
+          filter: ({ $el, autoplay }) => autoplay !== "hover" && $el.preload !== "none",
+          handler([{ isIntersecting, target }]) {
             if (!document.fullscreenElement) {
               if (isIntersecting) {
                 if (this.autoplay) {
-                  this.play();
+                  play(target);
                 }
               } else {
-                this.pause();
+                pauseHover(target, this.restart);
               }
             }
           },
           args: { intersecting: false },
-          options: ({ $el, autoplay, inviewMargin }) => ({
-            root: autoplay === "inview" ? null : parent($el).closest(":not(a)"),
-            rootMargin: autoplay === "inview" ? inviewMargin : "0px"
+          options: ({ $el, autoplay }) => ({
+            root: autoplay === "inview" ? null : parent($el).closest(":not(a)")
           })
         })
-      ],
-      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 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;
+    function pauseHover(el, restart) {
+      pause(el);
+      if (restart && isTag(el, "video")) {
+        el.currentTime = 0;
       }
-      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 = {
@@ -7742,7 +7375,6 @@
           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"]],
@@ -7752,7 +7384,7 @@
             if (this.axis !== axis && includes([axis, true], this.stretch)) {
               css(this.$el, {
                 [prop]: Math.min(
-                  boundaryOffsets[i][prop],
+                  offset(this.boundary[i])[prop],
                   viewports[i][prop] - 2 * viewportOffset
                 ),
                 [`overflow-${axis}`]: "auto"
@@ -7774,10 +7406,10 @@
               const elOffset = offset(this.$el);
               css(this.$el, {
                 [prop]: (targetOffset[start] > elOffset[start] ? targetOffset[this.inset ? end : start] - Math.max(
-                  boundaryOffsets[i][start],
+                  offset(this.boundary[i])[start],
                   viewports[i][start] + viewportOffset
                 ) : Math.min(
-                  boundaryOffsets[i][end],
+                  offset(this.boundary[i])[end],
                   viewports[i][end] - viewportOffset
                 ) - targetOffset[this.inset ? start : end]) - positionOffset,
                 [`overflow-${axis}`]: "auto"
@@ -8033,9 +7665,7 @@
             const drop = this.getDropdown(target);
             const adjustHeight = () => {
               const maxBottom = Math.max(
-                ...[...parents(target, `.${this.clsDrop}`), target].map(
-                  (el) => offset(el).bottom
-                )
+                ...parents(target, `.${this.clsDrop}`).concat(target).map((el) => offset(el).bottom)
               );
               offset(this.dropbar, {
                 left: offset(this.dropbar).left,
@@ -8215,8 +7845,7 @@
         parallaxJustify: Boolean
       },
       data: {
-        margin: "",
-        firstRow: "uk-first-row",
+        margin: "uk-grid-margin",
         clsStack: "uk-grid-stack",
         masonry: false,
         parallax: 0,
@@ -8238,14 +7867,14 @@
         {
           read(data) {
             const { rows } = data;
-            let { masonry, parallax, parallaxJustify } = this;
+            let { masonry, parallax, parallaxJustify, margin } = this;
             parallax = Math.max(0, toPx(parallax));
             if (!(masonry || parallax || parallaxJustify) || positionedAbsolute(rows) || rows[0].some(
               (el, i) => rows.some((row) => row[i] && row[i].offsetWidth !== el.offsetWidth)
             )) {
               return data.translates = data.scrollColumns = false;
             }
-            let gutter = toFloat(css(this.$el, "row-gap"));
+            let gutter = getGutter(rows, margin);
             let columns;
             let translates;
             if (masonry) {
@@ -8338,6 +7967,10 @@
       }
       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) {
@@ -9469,6 +9102,11 @@
           el = el && $(el) || document.body;
           if (trigger(this.$el, "beforescroll", [this, el])) {
             await scrollIntoView(el, { offset: this.offset });
+            if (!isFocusable(el)) {
+              attr(el, "tabindex", "-1");
+              once(el, "blur", () => attr(el, "tabindex", null));
+            }
+            el.focus({ preventScroll: true });
             trigger(this.$el, "scrolled", [this, el]);
           }
         }
@@ -10013,7 +9651,7 @@
       if (!value) {
         return 0;
       }
-      if (isNumeric(value) || isString(value) && /^-?\d/.test(value)) {
+      if (isNumeric(value) || isString(value) && value.match(/^-?\d/)) {
         return propOffset + toPx(value, "height", el, true);
       } else {
         const refElement = value === true ? getVisibleParent(el) : query(value, el);
@@ -10128,9 +9766,10 @@
 
     const selDisabled = ".uk-disabled *, .uk-disabled, [disabled]";
     var Switcher = {
-      mixins: [Connect],
+      mixins: [Togglable],
       args: "connect",
       props: {
+        connect: String,
         toggle: String,
         itemNav: String,
         active: Number,
@@ -10142,12 +9781,20 @@
         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(
@@ -10178,7 +9825,10 @@
       connected() {
         this.$el.role = "tablist";
       },
-      observe: swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping }),
+      observe: [
+        lazyload({ targets: ({ connectChildren }) => connectChildren }),
+        swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping })
+      ],
       events: [
         {
           name: "click keydown",
@@ -10232,16 +9882,24 @@
         }
       ],
       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 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(" ")
-          });
+          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 });
         }
         attr(this.$el, "aria-orientation", matches(this.$el, this.selVertical) ? "vertical" : null);
       },
@@ -10274,7 +9932,15 @@
               tabindex: next === i ? null : -1
             });
           });
-          return this.showConnects(next, prev >= 0 && prev !== next);
+          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);
+            }
+          });
         }
       }
     };