uikit 3.21.14-dev.028df7be8 → 3.21.14-dev.2e8a07c7e

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.21.14-dev.028df7be8 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.21.14-dev.2e8a07c7e | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -350,7 +350,7 @@
       if (isSameSiteAnchor(el)) {
         const { hash, ownerDocument } = toNode(el);
         const id = decodeURIComponent(hash).slice(1);
-        return ownerDocument.getElementById(id) || ownerDocument.getElementsByName(id)[0];
+        return id ? ownerDocument.getElementById(id) || ownerDocument.getElementsByName(id)[0] : ownerDocument;
       }
     }
 
@@ -746,7 +746,9 @@
     }
     function empty(element) {
       element = $(element);
-      element.innerHTML = "";
+      if (element) {
+        element.innerHTML = "";
+      }
       return element;
     }
     function html(parent2, html2) {
@@ -1138,9 +1140,6 @@
         el.muted = true;
       }
     }
-    function isVideo(el) {
-      return isHTML5(el) || isIFrame(el);
-    }
     function isHTML5(el) {
       return isTag(el, "video");
     }
@@ -1606,7 +1605,6 @@
         isTag: isTag,
         isTouch: isTouch,
         isUndefined: isUndefined,
-        isVideo: isVideo,
         isVisible: isVisible,
         isVoidElement: isVoidElement,
         isWindow: isWindow,
@@ -2446,6 +2444,121 @@
       return $("a,button", el) || el;
     }
 
+    var img = {
+      args: "dataSrc",
+      props: {
+        dataSrc: String,
+        sources: String,
+        margin: String,
+        target: String,
+        loading: String
+      },
+      data: {
+        dataSrc: "",
+        sources: false,
+        margin: "50%",
+        target: false,
+        loading: "lazy"
+      },
+      connected() {
+        if (this.loading !== "lazy") {
+          this.load();
+        } else if (isImg(this.$el)) {
+          this.$el.loading = "lazy";
+          setSrcAttrs(this.$el);
+        }
+      },
+      disconnected() {
+        if (this.img) {
+          this.img.onload = "";
+        }
+        delete this.img;
+      },
+      observe: intersection({
+        handler(entries, observer) {
+          this.load();
+          observer.disconnect();
+        },
+        options: ({ margin }) => ({ rootMargin: margin }),
+        filter: ({ loading }) => loading === "lazy",
+        target: ({ $el, $props }) => $props.target ? [$el, ...queryAll($props.target, $el)] : $el
+      }),
+      methods: {
+        load() {
+          if (this.img) {
+            return this.img;
+          }
+          const image = isImg(this.$el) ? this.$el : getImageFromElement(this.$el, this.dataSrc, this.sources);
+          removeAttr(image, "loading");
+          setSrcAttrs(this.$el, image.currentSrc);
+          return this.img = image;
+        }
+      }
+    };
+    function setSrcAttrs(el, src) {
+      if (isImg(el)) {
+        const parentNode = parent(el);
+        const elements = isTag(parentNode, "picture") ? children(parentNode) : [el];
+        elements.forEach((el2) => setSourceProps(el2, el2));
+      } else if (src) {
+        const change = !includes(el.style.backgroundImage, src);
+        if (change) {
+          css(el, "backgroundImage", `url(${escape(src)})`);
+          trigger(el, createEvent("load", false));
+        }
+      }
+    }
+    const srcProps = ["data-src", "data-srcset", "sizes"];
+    function setSourceProps(sourceEl, targetEl) {
+      for (const prop of srcProps) {
+        const value = data(sourceEl, prop);
+        if (value) {
+          attr(targetEl, prop.replace(/data-/g, ""), value);
+        }
+      }
+    }
+    function getImageFromElement(el, src, sources) {
+      const img = new Image();
+      wrapInPicture(img, sources);
+      setSourceProps(el, img);
+      img.onload = () => setSrcAttrs(el, img.currentSrc);
+      attr(img, "src", src);
+      return img;
+    }
+    function wrapInPicture(img, sources) {
+      sources = parseSources(sources);
+      if (sources.length) {
+        const picture = fragment("<picture>");
+        for (const attrs of sources) {
+          const source = fragment("<source>");
+          attr(source, attrs);
+          append(picture, source);
+        }
+        append(picture, img);
+      }
+    }
+    function parseSources(sources) {
+      if (!sources) {
+        return [];
+      }
+      if (startsWith(sources, "[")) {
+        try {
+          sources = JSON.parse(sources);
+        } catch (e) {
+          sources = [];
+        }
+      } else {
+        sources = parseOptions(sources);
+      }
+      if (!isArray(sources)) {
+        sources = [sources];
+      }
+      return sources.filter((source) => !isEmpty(source));
+    }
+    function isImg(el) {
+      return isTag(el, "img");
+    }
+
     let prevented;
     function preventBackgroundScroll(el) {
       const off = on(
@@ -2512,6 +2625,82 @@
       }
     };
 
+    var Position = {
+      props: {
+        pos: String,
+        offset: Boolean,
+        flip: Boolean,
+        shift: Boolean,
+        inset: Boolean
+      },
+      data: {
+        pos: `bottom-${isRtl ? "right" : "left"}`,
+        offset: false,
+        flip: true,
+        shift: true,
+        inset: false
+      },
+      connected() {
+        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";
+      },
+      methods: {
+        positionAt(element, target, boundary) {
+          let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
+          const placement = [this.flip && "flip", this.shift && "shift"];
+          const attach = {
+            element: [this.inset ? this.dir : flipPosition(this.dir), this.align],
+            target: [this.dir, this.align]
+          };
+          if (this.axis === "y") {
+            for (const prop in attach) {
+              attach[prop].reverse();
+            }
+            offset.reverse();
+            placement.reverse();
+          }
+          const restoreScrollPosition = storeScrollPosition(element);
+          const elDim = dimensions$1(element);
+          css(element, { top: -elDim.height, left: -elDim.width });
+          positionAt(element, target, {
+            attach,
+            offset,
+            boundary,
+            placement,
+            viewportOffset: this.getViewportOffset(element)
+          });
+          restoreScrollPosition();
+        },
+        getPositionOffset(element = this.$el) {
+          return toPx(
+            this.offset === false ? css(element, "--uk-position-offset") : this.offset,
+            this.axis === "x" ? "width" : "height",
+            element
+          ) * (includes(["left", "top"], this.dir) ? -1 : 1) * (this.inset ? -1 : 1);
+        },
+        getShiftOffset(element = this.$el) {
+          return this.align === "center" ? 0 : toPx(
+            css(element, "--uk-position-shift-offset"),
+            this.axis === "y" ? "width" : "height",
+            element
+          ) * (includes(["left", "top"], this.align) ? 1 : -1);
+        },
+        getViewportOffset(element) {
+          return toPx(css(element, "--uk-position-viewport-offset"));
+        }
+      }
+    };
+    function storeScrollPosition(element) {
+      const scrollElement = scrollParent(element);
+      const { scrollTop } = scrollElement;
+      return () => {
+        if (scrollTop !== scrollElement.scrollTop) {
+          scrollElement.scrollTop = scrollTop;
+        }
+      };
+    }
+
     var Togglable = {
       props: {
         cls: Boolean,
@@ -2549,8 +2738,14 @@
                 addClass(el, cls);
                 trigger(el, show ? "show" : "hide", [this]);
                 const done = () => {
+                  var _a;
                   removeClass(el, cls);
                   trigger(el, show ? "shown" : "hidden", [this]);
+                  if (show) {
+                    const restoreScrollPosition = storeScrollPosition(el);
+                    (_a = $$("[autofocus]", el).find(isVisible)) == null ? void 0 : _a.focus();
+                    restoreScrollPosition();
+                  }
                 };
                 return promise ? promise.then(done, () => {
                   removeClass(el, cls);
@@ -2583,7 +2778,6 @@
           if (changed) {
             trigger(el, "toggled", [toggled, this]);
           }
-          $$("[autofocus]", el).some((el2) => isVisible(el2) ? el2.focus() || true : el2.blur());
         }
       }
     };
@@ -2714,9 +2908,6 @@
         panel: ({ selPanel }, $el) => $(selPanel, $el),
         transitionElement() {
           return this.panel;
-        },
-        bgClose({ bgClose }) {
-          return bgClose && this.panel;
         }
       },
       connected() {
@@ -2879,7 +3070,7 @@
     }
     function listenForBackgroundClose$1(modal) {
       return on(document, pointerDown$1, ({ target }) => {
-        if (last(active$1) !== modal || modal.overlay && !modal.$el.contains(target) || modal.panel.contains(target)) {
+        if (last(active$1) !== modal || modal.overlay && !modal.$el.contains(target) || !modal.panel || modal.panel.contains(target)) {
           return;
         }
         once(
@@ -2922,11 +3113,7 @@
       return Math.abs(new DOMMatrix(css(el, "transform")).m41 / el.offsetWidth);
     }
     function translate(value = 0, unit = "%") {
-      value += value ? unit : "";
-      return `translate3d(${value}, 0, 0)`;
-    }
-    function scale3d(value) {
-      return `scale3d(${value}, ${value}, 1)`;
+      return value ? `translate3d(${value + unit}, 0, 0)` : "";
     }
 
     function Transitioner$1(prev, next, dir, { animation, easing }) {
@@ -3060,7 +3247,6 @@
     const pointerDown = "touchstart mousedown";
     const pointerMove = "touchmove mousemove";
     const pointerUp = "touchend touchcancel mouseup click input scroll";
-    const preventClick = (e) => e.preventDefault();
     var SliderDrag = {
       props: {
         draggable: Boolean
@@ -3128,9 +3314,6 @@
           if (distance === 0 || this.prevPos === this.pos || !this.dragging && Math.abs(distance) < this.threshold) {
             return;
           }
-          if (!this.dragging) {
-            on(this.list, "click", preventClick, pointerOptions);
-          }
           e.cancelable && e.preventDefault();
           this.dragging = true;
           this.dir = distance < 0 ? 1 : -1;
@@ -3179,6 +3362,7 @@
           off(document, pointerMove, this.move, pointerOptions);
           off(document, pointerUp, this.end, pointerUpOptions);
           if (this.dragging) {
+            setTimeout(on(this.list, "click", (e) => e.preventDefault(), pointerOptions));
             this.dragging = null;
             if (this.index === this.prevIndex) {
               this.percent = 1 - this.percent;
@@ -3189,6 +3373,8 @@
               const dirChange = (isRtl ? this.dir * (isRtl ? 1 : -1) : this.dir) < 0 === this.prevPos > this.pos;
               this.index = dirChange ? this.index : this.prevIndex;
               if (dirChange) {
+                trigger(this.slides[this.prevIndex], "itemhidden", [this]);
+                trigger(this.slides[this.index], "itemshown", [this]);
                 this.percent = 1 - this.percent;
               }
               this.show(
@@ -3197,7 +3383,6 @@
               );
             }
           }
-          setTimeout(() => off(this.list, "click", preventClick, pointerOptions));
           css(this.list, { userSelect: "" });
           this.drag = this.percent = null;
         }
@@ -3302,23 +3487,27 @@
           registerEvent(instance, event);
         } else {
           for (const key in event) {
-            registerEvent(instance, event[key], key);
+            registerEvent(instance, { name: key, handler: event[key] });
           }
         }
       }
     }
-    function registerEvent(instance, event, key) {
-      let { name, el, handler, capture, passive, delegate, filter, self } = isPlainObject(event) ? event : { name: key, handler: event };
-      el = el ? el.call(instance, instance) : instance.$el;
-      if (!el || isArray(el) && !el.length || filter && !filter.call(instance, instance)) {
+    function registerEvent(instance, { name, el, handler, capture, passive, delegate, filter, self }) {
+      if (filter && !filter.call(instance, instance)) {
         return;
       }
       instance._disconnect.push(
-        on(el, name, delegate == null ? void 0 : delegate.call(instance, instance), handler.bind(instance), {
-          passive,
-          capture,
-          self
-        })
+        on(
+          el ? el.call(instance, instance) : instance.$el,
+          name,
+          delegate == null ? void 0 : delegate.call(instance, instance),
+          handler.bind(instance),
+          {
+            passive,
+            capture,
+            self
+          }
+        )
       );
     }
 
@@ -3527,7 +3716,7 @@
     };
     App.util = util;
     App.options = {};
-    App.version = "3.21.14-dev.028df7be8";
+    App.version = "3.21.14-dev.2e8a07c7e";
 
     const PREFIX = "uk-";
     const DATA = "__uikit__";
@@ -3646,7 +3835,7 @@
         const instance = this;
         attachToElement(el, instance);
         instance.$options.el = el;
-        if (document.contains(el)) {
+        if (el.isConnected) {
           callConnected(instance);
         }
       };
@@ -3832,7 +4021,7 @@
               const item = toNumber(cmd);
               const active = item === index;
               toggleClass(el, this.clsActive, active);
-              toggleClass(button, "uk-disabled", this.parallax);
+              toggleClass(button, "uk-disabled", !!this.parallax);
               attr(button, {
                 "aria-selected": active,
                 tabindex: active && !this.parallax ? null : -1
@@ -3935,7 +4124,7 @@
         }
       },
       methods: {
-        show(index, force = false) {
+        async show(index, force = false) {
           var _a;
           if (this.dragging || !this.length || this.parallax) {
             return;
@@ -3971,18 +4160,16 @@
             reset();
             return;
           }
-          const promise = this._show(prev, next, force).then(() => {
-            prev && trigger(prev, "itemhidden", [this]);
-            trigger(next, "itemshown", [this]);
-            stack.shift();
-            this._transitioner = null;
-            if (stack.length) {
-              requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
-            }
-          });
           prev && trigger(prev, "itemhide", [this]);
           trigger(next, "itemshow", [this]);
-          return promise;
+          await this._show(prev, next, force);
+          prev && trigger(prev, "itemhidden", [this]);
+          trigger(next, "itemshown", [this]);
+          stack.shift();
+          this._transitioner = null;
+          if (stack.length) {
+            requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
+          }
         },
         getIndex(index = this.index, prev = this.index) {
           return clamp(
@@ -4052,7 +4239,7 @@
       },
       observe: resize(),
       events: {
-        beforeitemshow({ target }) {
+        itemshow({ target }) {
           addClass(target, this.clsActive);
         },
         itemshown({ target }) {
@@ -4068,87 +4255,210 @@
       ...Animations$2,
       fade: {
         show() {
-          return [{ opacity: 0 }, { opacity: 1 }];
+          return [{ opacity: 0, zIndex: 0 }, { zIndex: -1 }];
         },
         percent(current) {
           return 1 - css(current, "opacity");
         },
         translate(percent) {
-          return [{ opacity: 1 - percent }, { opacity: percent }];
+          return [{ opacity: 1 - percent, zIndex: 0 }, { zIndex: -1 }];
         }
       },
       scale: {
         show() {
-          return [
-            { opacity: 0, transform: scale3d(1 - 0.2) },
-            { opacity: 1, transform: scale3d(1) }
-          ];
+          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.2 * percent) },
-            { opacity: percent, transform: scale3d(1 - 0.2 + 0.2 * percent) }
+            { opacity: 1 - percent, transform: scale3d(1 + 0.5 * percent), zIndex: 0 },
+            { zIndex: -1 }
           ];
         }
-      }
-    };
-
-    var LightboxPanel = {
-      mixins: [Modal, Slideshow],
-      functional: true,
-      props: {
-        delayControls: Number,
-        preload: Number,
-        videoAutoplay: Boolean,
-        template: String
-      },
-      data: () => ({
-        preload: 1,
-        videoAutoplay: false,
-        delayControls: 3e3,
-        items: [],
-        cls: "uk-open",
-        clsPage: "uk-lightbox-page",
-        selList: ".uk-lightbox-items",
-        attrItem: "uk-lightbox-item",
-        selClose: ".uk-close-large",
-        selCaption: ".uk-lightbox-caption",
-        pauseOnHover: false,
-        velocity: 2,
-        Animations: Animations$1,
-        template: `<div class="uk-lightbox uk-overflow-hidden"> <div class="uk-lightbox-items"></div> <div class="uk-lightbox-toolbar uk-position-top uk-text-right uk-transition-slide-top uk-transition-opaque"> <button class="uk-lightbox-toolbar-icon uk-close-large" type="button" uk-close></button> </div> <a class="uk-lightbox-button uk-position-center-left uk-position-medium uk-transition-fade" href uk-slidenav-previous uk-lightbox-item="previous"></a> <a class="uk-lightbox-button uk-position-center-right uk-position-medium uk-transition-fade" href uk-slidenav-next uk-lightbox-item="next"></a> <div class="uk-lightbox-toolbar uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque"></div> </div>`
-      }),
-      created() {
-        const $el = $(this.template);
-        const list = $(this.selList, $el);
-        this.items.forEach(() => append(list, "<div>"));
-        const close = $("[uk-close]", $el);
-        const closeLabel = this.t("close");
-        if (close && closeLabel) {
-          close.dataset.i18n = JSON.stringify({ label: closeLabel });
-        }
-        this.$mount(append(this.container, $el));
+      },
+      pull: {
+        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: {
+        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) {
+      return `scale3d(${value}, ${value}, 1)`;
+    }
+
+    var Animations = {
+      ...Animations$2,
+      fade: {
+        show() {
+          return [{ opacity: 0 }, { opacity: 1 }];
+        },
+        percent(current) {
+          return 1 - css(current, "opacity");
+        },
+        translate(percent) {
+          return [{ opacity: 1 - percent }, { opacity: percent }];
+        }
+      },
+      scale: {
+        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) }
+          ];
+        }
+      }
+    };
+
+    var LightboxPanel = {
+      i18n: {
+        counter: "%s / %s"
+      },
+      mixins: [Modal, Slideshow],
+      functional: true,
+      props: {
+        counter: Boolean,
+        preload: Number,
+        nav: Boolean,
+        slidenav: Boolean,
+        delayControls: Number,
+        videoAutoplay: Boolean,
+        template: String
+      },
+      data: () => ({
+        counter: false,
+        preload: 1,
+        nav: false,
+        slidenav: true,
+        delayControls: 3e3,
+        videoAutoplay: false,
+        items: [],
+        cls: "uk-open",
+        clsPage: "uk-lightbox-page",
+        clsFit: "uk-lightbox-items-fit",
+        clsZoom: "uk-lightbox-zoom",
+        attrItem: "uk-lightbox-item",
+        selList: ".uk-lightbox-items",
+        selClose: ".uk-close-large",
+        selNav: ".uk-lightbox-thumbnav, .uk-lightbox-dotnav",
+        selCaption: ".uk-lightbox-caption",
+        selCounter: ".uk-lightbox-counter",
+        pauseOnHover: false,
+        velocity: 2,
+        Animations,
+        template: `<div class="uk-lightbox uk-overflow-hidden"> <div class="uk-lightbox-items"></div> <div class="uk-position-top-right uk-position-small uk-transition-fade" uk-inverse> <button class="uk-lightbox-close uk-close-large" type="button" uk-close></button> </div> <div class="uk-lightbox-slidenav uk-position-center-left uk-position-medium uk-transition-fade" uk-inverse> <a href uk-slidenav-previous uk-lightbox-item="previous"></a> </div> <div class="uk-lightbox-slidenav uk-position-center-right uk-position-medium uk-transition-fade" uk-inverse> <a href uk-slidenav-next uk-lightbox-item="next"></a> </div> <div class="uk-position-center-right uk-position-medium uk-transition-fade" uk-inverse style="max-height: 90vh; overflow: auto;"> <ul class="uk-lightbox-thumbnav uk-lightbox-thumbnav-vertical uk-thumbnav uk-thumbnav-vertical"></ul> <ul class="uk-lightbox-dotnav uk-dotnav uk-dotnav-vertical"></ul> </div> <div class="uk-lightbox-counter uk-text-large uk-position-top-left uk-position-small uk-transition-fade" uk-inverse></div> <div class="uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque"></div> </div>`
+      }),
+      created() {
+        let $el = $(this.template);
+        if (isTag($el, "template")) {
+          $el = fragment(html($el));
+        }
+        const list = $(this.selList, $el);
+        const navType = this.$props.nav;
+        remove$1($$(this.selNav, $el).filter((el) => !matches(el, `.uk-${navType}`)));
+        for (const [i, item] of this.items.entries()) {
+          append(list, "<div>");
+          if (navType === "thumbnav") {
+            wrapAll(
+              toThumbnavItem(item, this.videoAutoplay),
+              append($(this.selNav, $el), `<li uk-lightbox-item="${i}"><a href></a></li>`)
+            );
+          }
+        }
+        if (!this.slidenav) {
+          remove$1($$(".uk-lightbox-slidenav", $el));
+        }
+        if (!this.counter) {
+          remove$1($(this.selCounter, $el));
+        }
+        addClass(list, this.clsFit);
+        const close = $("[uk-close]", $el);
+        const closeLabel = this.t("close");
+        if (close && closeLabel) {
+          close.dataset.i18n = JSON.stringify({ label: closeLabel });
+        }
+        this.$mount(append(this.container, $el));
       },
       events: [
         {
-          name: `${pointerMove$1} ${pointerDown$1} keydown`,
-          handler() {
-            this.showControls();
+          name: "click",
+          self: true,
+          filter: ({ bgClose }) => bgClose,
+          delegate: ({ selList }) => `${selList} > *`,
+          handler(e) {
+            if (!e.defaultPrevented) {
+              this.hide();
+            }
           }
         },
         {
           name: "click",
           self: true,
-          delegate: ({ selList }) => `${selList} > *`,
+          delegate: ({ clsZoom }) => `.${clsZoom}`,
           handler(e) {
             if (!e.defaultPrevented) {
-              this.hide();
+              toggleClass(this.list, this.clsFit);
             }
           }
         },
+        {
+          name: `${pointerMove$1} ${pointerDown$1} keydown`,
+          filter: ({ delayControls }) => delayControls,
+          handler() {
+            this.showControls();
+          }
+        },
         {
           name: "shown",
           self: true,
@@ -4197,26 +4507,25 @@
         {
           name: "beforeitemshow",
           handler(e) {
+            html($(this.selCaption, this.$el), this.getItem().caption || "");
+            html(
+              $(this.selCounter, this.$el),
+              this.t("counter", this.index + 1, this.slides.length)
+            );
+            for (let j = -this.preload; j <= this.preload; j++) {
+              this.loadItem(this.index + j);
+            }
             if (this.isToggled()) {
               return;
             }
             this.draggable = false;
             e.preventDefault();
             this.toggleElement(this.$el, true, false);
-            this.animation = Animations$1["scale"];
+            this.animation = Animations.scale;
             removeClass(e.target, this.clsActive);
             this.stack.splice(1, 0, this.index);
           }
         },
-        {
-          name: "itemshow",
-          handler() {
-            html($(this.selCaption, this.$el), this.getItem().caption || "");
-            for (let j = -this.preload; j <= this.preload; j++) {
-              this.loadItem(this.index + j);
-            }
-          }
-        },
         {
           name: "itemshown",
           handler() {
@@ -4226,29 +4535,36 @@
         {
           name: "itemload",
           async handler(_, item) {
-            const { source: src, type, alt = "", poster, attrs = {} } = item;
-            this.setItem(item, "<span uk-spinner></span>");
+            const { source: src, type, attrs = {} } = item;
+            this.setItem(item, "<span uk-spinner uk-inverse></span>");
             if (!src) {
               return;
             }
-            let matches;
+            let matches2;
             const iframeAttrs = {
               allowfullscreen: "",
               style: "max-width: 100%; box-sizing: border-box;",
               "uk-responsive": "",
-              "uk-video": `${this.videoAutoplay}`
+              "uk-video": `${Boolean(this.videoAutoplay)}`
             };
-            if (type === "image" || src.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i)) {
-              const img = createEl("img", { src, alt, ...attrs });
-              on(img, "load", () => this.setItem(item, img));
+            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" || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
+            } else if (type === "video" || isVideo(src)) {
+              const inline = this.videoAutoplay === "inline";
               const video = createEl("video", {
                 src,
-                poster,
-                controls: "",
                 playsinline: "",
-                "uk-video": `${this.videoAutoplay}`,
+                controls: inline ? null : "",
+                poster: this.videoAutoplay ? null : item.poster,
+                "uk-video": inline ? "automute: true" : Boolean(this.videoAutoplay),
                 ...attrs
               });
               on(video, "loadedmetadata", () => this.setItem(item, video));
@@ -4263,20 +4579,20 @@
                   ...attrs
                 })
               );
-            } else if (matches = src.match(
+            } else if (matches2 = src.match(
               /\/\/(?:.*?youtube(-nocookie)?\..*?(?:[?&]v=|\/shorts\/)|youtu\.be\/)([\w-]{11})[&?]?(.*)?/
             )) {
               this.setItem(
                 item,
                 createEl("iframe", {
-                  src: `https://www.youtube${matches[1] || ""}.com/embed/${matches[2]}${matches[3] ? `?${matches[3]}` : ""}`,
+                  src: `https://www.youtube${matches2[1] || ""}.com/embed/${matches2[2]}${matches2[3] ? `?${matches2[3]}` : ""}`,
                   width: 1920,
                   height: 1080,
                   ...iframeAttrs,
                   ...attrs
                 })
               );
-            } else if (matches = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/)) {
+            } 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(
@@ -4287,7 +4603,7 @@
                 this.setItem(
                   item,
                   createEl("iframe", {
-                    src: `https://player.vimeo.com/video/${matches[1]}${matches[2] ? `?${matches[2]}` : ""}`,
+                    src: `https://player.vimeo.com/video/${matches2[1]}${matches2[2] ? `?${matches2[2]}` : ""}`,
                     width,
                     height,
                     ...iframeAttrs,
@@ -4299,8 +4615,29 @@
               }
             }
           }
+        },
+        {
+          name: "itemloaded",
+          handler() {
+            this.$emit("resize");
+          }
         }
       ],
+      update: {
+        read() {
+          for (const media of $$(`${this.selList} :not([controls]):is(img,video)`, this.$el)) {
+            toggleClass(
+              media,
+              this.clsZoom,
+              (media.naturalHeight || media.videoHeight) - this.$el.offsetHeight > Math.max(
+                0,
+                (media.naturalWidth || media.videoWidth) - this.$el.offsetWidth
+              )
+            );
+          }
+        },
+        events: ["resize"]
+      },
       methods: {
         loadItem(index = this.index) {
           const item = this.getItem(index);
@@ -4318,11 +4655,11 @@
           return this.slides[this.items.indexOf(item)];
         },
         setError(item) {
-          this.setItem(item, '<span uk-icon="icon: bolt; ratio: 2"></span>');
+          this.setItem(item, '<span uk-icon="icon: bolt; ratio: 2" uk-inverse></span>');
         },
         showControls() {
           clearTimeout(this.controlsTimer);
-          this.controlsTimer = setTimeout(this.hideControls, this.delayControls);
+          this.controlsTimer = this.delayControls && setTimeout(this.hideControls, this.delayControls);
           addClass(this.$el, "uk-active", "uk-transition-active");
         },
         hideControls() {
@@ -4335,7 +4672,26 @@
       attr(el, attrs);
       return el;
     }
+    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,
+        loop: "",
+        playsinline: "",
+        "uk-video": `autoplay: ${Boolean(videoAutoplay)}; automute: true`
+      }) : createEl("canvas");
+      if (item.thumbRatio) {
+        el.style.aspectRatio = item.thumbRatio;
+      }
+      return el;
+    }
+    function isImage(src) {
+      return src == null ? void 0 : src.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i);
+    }
+    function isVideo(src) {
+      return src == null ? void 0 : src.match(/\.(mp4|webm|ogv)($|\?)/i);
+    }
 
+    const selDisabled$1 = ".uk-disabled *, .uk-disabled, [disabled]";
     var lightbox = {
       install: install$3,
       props: { toggle: String },
@@ -4358,17 +4714,23 @@
       },
       events: {
         name: "click",
-        delegate: ({ toggle }) => `${toggle}:not(.uk-disabled)`,
+        delegate: ({ toggle }) => toggle,
         handler(e) {
           if (!e.defaultPrevented) {
             e.preventDefault();
-            this.show(e.current);
+            if (!matches(e.current, selDisabled$1)) {
+              this.show(e.current);
+            }
           }
         }
       },
       methods: {
         show(index) {
-          const items = uniqueBy(this.toggles.map(toItem), "source");
+          let items = this.toggles.map(toItem);
+          if (this.nav === "thumbnav") {
+            ensureThumb.call(this, this.toggles, items);
+          }
+          items = uniqueBy(items, "source");
           if (isElement(index)) {
             const { source } = toItem(index);
             index = findIndex(items, ({ source: src }) => source === src);
@@ -4389,10 +4751,29 @@
       }
       assign(Lightbox.props, UIkit.component("lightboxPanel").options.props);
     }
+    function ensureThumb(toggles, items) {
+      for (const [i, toggle] of Object.entries(toggles)) {
+        if (items[i].thumb) {
+          continue;
+        }
+        const parent = parents(toggle).reverse().concat(toggle).find(
+          (parent2) => this.$el.contains(parent2) && (parent2 === toggle || $$(this.toggle, parent2).length === 1)
+        );
+        if (!parent) {
+          continue;
+        }
+        const media = $("img,video", parent);
+        if (media) {
+          items[i].thumb = media.currentSrc || media.poster || media.src;
+          items[i].thumbRatio = (media.naturalWidth || media.videoWidth) / (media.naturalHeight || media.videoHeight);
+        }
+      }
+    }
     function toItem(el) {
       const item = {};
-      for (const attr2 of ["href", "caption", "type", "poster", "alt", "attrs"]) {
-        item[attr2 === "href" ? "source" : attr2] = data(el, attr2);
+      for (const attribute of el.getAttributeNames()) {
+        const key = attribute.replace(/^data-/, "");
+        item[key === "href" ? "source" : key] = el.getAttribute(attribute);
       }
       item.attrs = parseOptions(item.attrs);
       return item;
@@ -5500,106 +5881,30 @@
       return isIn(type) ^ dir < 0 ? percent : 1 - percent;
     }
 
-    var Animations = {
-      ...Animations$2,
-      fade: {
-        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 }];
-        }
+    var slideshow = {
+      mixins: [Class, Slideshow, SliderReactive, SliderParallax, SliderPreload],
+      props: {
+        ratio: String,
+        minHeight: String,
+        maxHeight: String
       },
-      scale: {
-        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 }
-          ];
-        }
+      data: {
+        ratio: "16:9",
+        minHeight: void 0,
+        maxHeight: void 0,
+        selList: ".uk-slideshow-items",
+        attrItem: "uk-slideshow-item",
+        selNav: ".uk-slideshow-nav",
+        Animations: Animations$1
       },
-      pull: {
-        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: {
-        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 }
-          ];
-        }
-      }
-    };
-
-    var slideshow = {
-      mixins: [Class, Slideshow, SliderReactive, SliderParallax, SliderPreload],
-      props: {
-        ratio: String,
-        minHeight: String,
-        maxHeight: String
-      },
-      data: {
-        ratio: "16:9",
-        minHeight: void 0,
-        maxHeight: void 0,
-        selList: ".uk-slideshow-items",
-        attrItem: "uk-slideshow-item",
-        selNav: ".uk-slideshow-nav",
-        Animations
-      },
-      watch: {
-        list(list) {
-          css(list, {
-            aspectRatio: this.ratio ? this.ratio.replace(":", "/") : void 0,
-            minHeight: this.minHeight,
-            maxHeight: this.maxHeight,
-            minWidth: "100%",
-            maxWidth: "100%"
-          });
+      watch: {
+        list(list) {
+          css(list, {
+            aspectRatio: this.ratio ? this.ratio.replace(":", "/") : void 0,
+            minHeight: this.minHeight,
+            maxHeight: this.maxHeight,
+            width: "100%"
+          });
         }
       },
       methods: {
@@ -5641,8 +5946,8 @@
       events: {
         name: pointerDown$1,
         passive: false,
-        handler() {
-          this.init();
+        handler(e) {
+          this.init(e);
         }
       },
       computed: {
@@ -5919,82 +6224,6 @@
       };
     }
 
-    var Position = {
-      props: {
-        pos: String,
-        offset: Boolean,
-        flip: Boolean,
-        shift: Boolean,
-        inset: Boolean
-      },
-      data: {
-        pos: `bottom-${isRtl ? "right" : "left"}`,
-        offset: false,
-        flip: true,
-        shift: true,
-        inset: false
-      },
-      connected() {
-        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";
-      },
-      methods: {
-        positionAt(element, target, boundary) {
-          let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
-          const placement = [this.flip && "flip", this.shift && "shift"];
-          const attach = {
-            element: [this.inset ? this.dir : flipPosition(this.dir), this.align],
-            target: [this.dir, this.align]
-          };
-          if (this.axis === "y") {
-            for (const prop in attach) {
-              attach[prop].reverse();
-            }
-            offset.reverse();
-            placement.reverse();
-          }
-          const restoreScrollPosition = storeScrollPosition(element);
-          const elDim = dimensions$1(element);
-          css(element, { top: -elDim.height, left: -elDim.width });
-          positionAt(element, target, {
-            attach,
-            offset,
-            boundary,
-            placement,
-            viewportOffset: this.getViewportOffset(element)
-          });
-          restoreScrollPosition();
-        },
-        getPositionOffset(element = this.$el) {
-          return toPx(
-            this.offset === false ? css(element, "--uk-position-offset") : this.offset,
-            this.axis === "x" ? "width" : "height",
-            element
-          ) * (includes(["left", "top"], this.dir) ? -1 : 1) * (this.inset ? -1 : 1);
-        },
-        getShiftOffset(element = this.$el) {
-          return this.align === "center" ? 0 : toPx(
-            css(element, "--uk-position-shift-offset"),
-            this.axis === "y" ? "width" : "height",
-            element
-          ) * (includes(["left", "top"], this.align) ? 1 : -1);
-        },
-        getViewportOffset(element) {
-          return toPx(css(element, "--uk-position-viewport-offset"));
-        }
-      }
-    };
-    function storeScrollPosition(element) {
-      const scrollElement = scrollParent(element);
-      const { scrollTop } = scrollElement;
-      return () => {
-        if (scrollTop !== scrollElement.scrollTop) {
-          scrollElement.scrollTop = scrollTop;
-        }
-      };
-    }
-
     var tooltip = {
       mixins: [Container, Togglable, Position],
       data: {
@@ -6683,7 +6912,7 @@
       ],
       observe: [
         intersection({
-          filter: ({ $el, autoplay }) => autoplay !== "hover" && isVideo($el),
+          filter: ({ autoplay }) => autoplay !== "hover",
           handler([{ isIntersecting }]) {
             if (!document.fullscreenElement) {
               if (isIntersecting) {
@@ -6696,7 +6925,9 @@
             }
           },
           args: { intersecting: false },
-          options: ({ $el, autoplay }) => ({ root: autoplay === "inview" ? null : parent($el) })
+          options: ({ $el, autoplay }) => ({
+            root: autoplay === "inview" ? null : parent($el).closest(":not(a)")
+          })
         })
       ]
     };
@@ -7596,7 +7827,7 @@
       let rowHeights = 0;
       for (let row of rows) {
         if (isRtl) {
-          row = row.reverse();
+          row.reverse();
         }
         let height = 0;
         for (const j in row) {
@@ -7891,107 +8122,6 @@
       dimensions.forEach((val, i) => attr(el, props[i], toFloat(val) * this.ratio || null));
     }
 
-    var svg = {
-      mixins: [Svg],
-      args: "src",
-      props: {
-        src: String,
-        icon: String,
-        attributes: "list",
-        strokeAnimation: Boolean
-      },
-      data: {
-        strokeAnimation: false
-      },
-      observe: [
-        mutation({
-          async handler() {
-            const svg = await this.svg;
-            if (svg) {
-              applyAttributes.call(this, svg);
-            }
-          },
-          options: {
-            attributes: true,
-            attributeFilter: ["id", "class", "style"]
-          }
-        })
-      ],
-      async connected() {
-        if (includes(this.src, "#")) {
-          [this.src, this.icon] = this.src.split("#");
-        }
-        const svg = await this.svg;
-        if (svg) {
-          applyAttributes.call(this, svg);
-          if (this.strokeAnimation) {
-            applyAnimation(svg);
-          }
-        }
-      },
-      methods: {
-        async getSvg() {
-          if (isTag(this.$el, "img") && !this.$el.complete && this.$el.loading === "lazy") {
-            await new Promise((resolve) => once(this.$el, "load", resolve));
-          }
-          return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject("SVG not found.");
-        }
-      }
-    };
-    function applyAttributes(el) {
-      const { $el } = this;
-      addClass(el, attr($el, "class"), "uk-svg");
-      for (let i = 0; i < $el.style.length; i++) {
-        const prop = $el.style[i];
-        css(el, prop, css($el, prop));
-      }
-      for (const attribute in this.attributes) {
-        const [prop, value] = this.attributes[attribute].split(":", 2);
-        attr(el, prop, value);
-      }
-      if (!this.$el.id) {
-        removeAttr(el, "id");
-      }
-    }
-    const loadSVG = memoize(async (src) => {
-      if (src) {
-        if (startsWith(src, "data:")) {
-          return decodeURIComponent(src.split(",")[1]);
-        } else {
-          return (await fetch(src)).text();
-        }
-      } else {
-        return Promise.reject();
-      }
-    });
-    function parseSVG(svg, icon) {
-      if (icon && includes(svg, "<symbol")) {
-        svg = parseSymbols(svg)[icon] || svg;
-      }
-      return stringToSvg(svg);
-    }
-    const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
-    const parseSymbols = memoize(function(svg) {
-      const symbols = {};
-      symbolRe.lastIndex = 0;
-      let match;
-      while (match = symbolRe.exec(svg)) {
-        symbols[match[3]] = `<svg ${match[1]}svg>`;
-      }
-      return symbols;
-    });
-    function applyAnimation(el) {
-      const length = getMaxPathLength(el);
-      if (length) {
-        css(el, "--uk-animation-stroke", length);
-      }
-    }
-    function stringToSvg(string) {
-      const container = document.createElement("template");
-      container.innerHTML = string;
-      return container.content.firstElementChild;
-    }
-
     const icons = {
       spinner,
       totop,
@@ -8162,7 +8292,7 @@
         return null;
       }
       if (!parsed[icon]) {
-        parsed[icon] = stringToSvg(icons[applyRtl(icon)] || icons[icon]);
+        parsed[icon] = fragment(icons[applyRtl(icon)] || icons[icon]);
       }
       return parsed[icon].cloneNode(true);
     }
@@ -8170,123 +8300,6 @@
       return isRtl ? swap(swap(icon, "left", "right"), "previous", "next") : icon;
     }
 
-    var img = {
-      args: "dataSrc",
-      props: {
-        dataSrc: String,
-        sources: String,
-        margin: String,
-        target: String,
-        loading: String
-      },
-      data: {
-        dataSrc: "",
-        sources: false,
-        margin: "50%",
-        target: false,
-        loading: "lazy"
-      },
-      connected() {
-        if (this.loading !== "lazy") {
-          this.load();
-        } else if (isImg(this.$el)) {
-          this.$el.loading = "lazy";
-          setSrcAttrs(this.$el);
-        }
-      },
-      disconnected() {
-        if (this.img) {
-          this.img.onload = "";
-        }
-        delete this.img;
-      },
-      observe: intersection({
-        handler(entries, observer) {
-          this.load();
-          observer.disconnect();
-        },
-        options: ({ margin }) => ({ rootMargin: margin }),
-        filter: ({ loading }) => loading === "lazy",
-        target: ({ $el, $props }) => $props.target ? [$el, ...queryAll($props.target, $el)] : $el
-      }),
-      methods: {
-        load() {
-          if (this.img) {
-            return this.img;
-          }
-          const image = isImg(this.$el) ? this.$el : getImageFromElement(this.$el, this.dataSrc, this.sources);
-          removeAttr(image, "loading");
-          setSrcAttrs(this.$el, image.currentSrc);
-          return this.img = image;
-        }
-      }
-    };
-    function setSrcAttrs(el, src) {
-      if (isImg(el)) {
-        const parentNode = parent(el);
-        const elements = isTag(parentNode, "picture") ? children(parentNode) : [el];
-        elements.forEach((el2) => setSourceProps(el2, el2));
-      } else if (src) {
-        const change = !includes(el.style.backgroundImage, src);
-        if (change) {
-          css(el, "backgroundImage", `url(${escape(src)})`);
-          trigger(el, createEvent("load", false));
-        }
-      }
-    }
-    const srcProps = ["data-src", "data-srcset", "sizes"];
-    function setSourceProps(sourceEl, targetEl) {
-      for (const prop of srcProps) {
-        const value = data(sourceEl, prop);
-        if (value) {
-          attr(targetEl, prop.replace(/^(data-)+/, ""), value);
-        }
-      }
-    }
-    function getImageFromElement(el, src, sources) {
-      const img = new Image();
-      wrapInPicture(img, sources);
-      setSourceProps(el, img);
-      img.onload = () => {
-        setSrcAttrs(el, img.currentSrc);
-      };
-      attr(img, "src", src);
-      return img;
-    }
-    function wrapInPicture(img, sources) {
-      sources = parseSources(sources);
-      if (sources.length) {
-        const picture = fragment("<picture>");
-        for (const attrs of sources) {
-          const source = fragment("<source>");
-          attr(source, attrs);
-          append(picture, source);
-        }
-        append(picture, img);
-      }
-    }
-    function parseSources(sources) {
-      if (!sources) {
-        return [];
-      }
-      if (startsWith(sources, "[")) {
-        try {
-          sources = JSON.parse(sources);
-        } catch (e) {
-          sources = [];
-        }
-      } else {
-        sources = parseOptions(sources);
-      }
-      if (!isArray(sources)) {
-        sources = [sources];
-      }
-      return sources.filter((source) => !isEmpty(source));
-    }
-    function isImg(el) {
-      return isTag(el, "img");
-    }
-
     var inverse = {
       props: {
         target: String,
@@ -8601,7 +8614,10 @@
         {
           name: "hide",
           el: ({ dropContainer }) => dropContainer,
-          async handler() {
+          async handler(e) {
+            if (parent(e.target) !== this.dropContainer) {
+              return;
+            }
             await awaitMacroTask();
             if (!this.getActive() && this._transparent) {
               addClass(this.navbarContainer, clsNavbarTransparent);
@@ -8990,7 +9006,7 @@
       update: [
         {
           read() {
-            const targets = this.links.map((el) => getTargetedElement(el) || el.ownerDocument);
+            const targets = this.links.map((el) => getTargetedElement(el)).filter(Boolean);
             const { length } = targets;
             if (!length || !isVisible(this.$el)) {
               return false;
@@ -9389,6 +9405,104 @@
       }
     }
 
+    var svg = {
+      mixins: [Svg],
+      args: "src",
+      props: {
+        src: String,
+        icon: String,
+        attributes: "list",
+        strokeAnimation: Boolean
+      },
+      data: {
+        strokeAnimation: false
+      },
+      observe: [
+        mutation({
+          async handler() {
+            const svg = await this.svg;
+            if (svg) {
+              applyAttributes.call(this, svg);
+            }
+          },
+          options: {
+            attributes: true,
+            attributeFilter: ["id", "class", "style"]
+          }
+        })
+      ],
+      async connected() {
+        if (includes(this.src, "#")) {
+          [this.src, this.icon] = this.src.split("#");
+        }
+        const svg = await this.svg;
+        if (svg) {
+          applyAttributes.call(this, svg);
+          if (this.strokeAnimation) {
+            applyAnimation(svg);
+          }
+        }
+      },
+      methods: {
+        async getSvg() {
+          if (isTag(this.$el, "img") && !this.$el.complete && this.$el.loading === "lazy") {
+            await new Promise((resolve) => once(this.$el, "load", resolve));
+          }
+          return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject("SVG not found.");
+        }
+      }
+    };
+    function applyAttributes(el) {
+      const { $el } = this;
+      addClass(el, attr($el, "class"), "uk-svg");
+      for (let i = 0; i < $el.style.length; i++) {
+        const prop = $el.style[i];
+        css(el, prop, css($el, prop));
+      }
+      for (const attribute in this.attributes) {
+        const [prop, value] = this.attributes[attribute].split(":", 2);
+        attr(el, prop, value);
+      }
+      if (!this.$el.id) {
+        removeAttr(el, "id");
+      }
+    }
+    const loadSVG = memoize(async (src) => {
+      if (src) {
+        if (startsWith(src, "data:")) {
+          return decodeURIComponent(src.split(",")[1]);
+        } else {
+          const response = await fetch(src);
+          if (response.headers.get("Content-Type") === "image/svg+xml") {
+            return response.text();
+          }
+        }
+      }
+      return Promise.reject();
+    });
+    function parseSVG(svg, icon) {
+      if (icon && includes(svg, "<symbol")) {
+        svg = parseSymbols(svg)[icon] || svg;
+      }
+      return fragment(svg);
+    }
+    const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
+    const parseSymbols = memoize(function(svg) {
+      const symbols = {};
+      symbolRe.lastIndex = 0;
+      let match;
+      while (match = symbolRe.exec(svg)) {
+        symbols[match[3]] = `<svg ${match[1]}svg>`;
+      }
+      return symbols;
+    });
+    function applyAnimation(el) {
+      const length = getMaxPathLength(el);
+      if (length) {
+        css(el, "--uk-animation-stroke", length);
+      }
+    }
+
     const selDisabled = ".uk-disabled *, .uk-disabled, [disabled]";
     var Switcher = {
       mixins: [Togglable],