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

package/dist/js/components/lightbox.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(require('uikit-util')) :
@@ -20,6 +20,177 @@
       }
     }
 
+    function callUpdate(instance, e = "update") {
+      if (!instance._connected) {
+        return;
+      }
+      if (!instance._updates.length) {
+        return;
+      }
+      if (!instance._queued) {
+        instance._queued = /* @__PURE__ */ new Set();
+        util.fastdom.read(() => {
+          if (instance._connected) {
+            runUpdates(instance, instance._queued);
+          }
+          instance._queued = null;
+        });
+      }
+      instance._queued.add(e.type || e);
+    }
+    function runUpdates(instance, types) {
+      for (const { read, write, events = [] } of instance._updates) {
+        if (!types.has("update") && !events.some((type) => types.has(type))) {
+          continue;
+        }
+        let result;
+        if (read) {
+          result = read.call(instance, instance._data, types);
+          if (result && util.isPlainObject(result)) {
+            util.assign(instance._data, result);
+          }
+        }
+        if (write && result !== false) {
+          util.fastdom.write(() => {
+            if (instance._connected) {
+              write.call(instance, instance._data, types);
+            }
+          });
+        }
+      }
+    }
+
+    function resize(options) {
+      return observe(util.observeResize, options, "resize");
+    }
+    function intersection(options) {
+      return observe(util.observeIntersection, options);
+    }
+    function observe(observe2, options, emit) {
+      return {
+        observe: observe2,
+        handler() {
+          callUpdate(this, emit);
+        },
+        ...options
+      };
+    }
+
+    ({
+      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, ...util.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);
+          util.removeAttr(image, "loading");
+          setSrcAttrs(this.$el, image.currentSrc);
+          return this.img = image;
+        }
+      }
+    });
+    function setSrcAttrs(el, src) {
+      if (isImg(el)) {
+        const parentNode = util.parent(el);
+        const elements = util.isTag(parentNode, "picture") ? util.children(parentNode) : [el];
+        elements.forEach((el2) => setSourceProps(el2, el2));
+      } else if (src) {
+        const change = !util.includes(el.style.backgroundImage, src);
+        if (change) {
+          util.css(el, "backgroundImage", `url(${util.escape(src)})`);
+          util.trigger(el, util.createEvent("load", false));
+        }
+      }
+    }
+    const srcProps = ["data-src", "data-srcset", "sizes"];
+    function setSourceProps(sourceEl, targetEl) {
+      for (const prop of srcProps) {
+        const value = util.data(sourceEl, prop);
+        if (value) {
+          util.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);
+      util.attr(img, "src", src);
+      return img;
+    }
+    function wrapInPicture(img, sources) {
+      sources = parseSources(sources);
+      if (sources.length) {
+        const picture = util.fragment("<picture>");
+        for (const attrs of sources) {
+          const source = util.fragment("<source>");
+          util.attr(source, attrs);
+          util.append(picture, source);
+        }
+        util.append(picture, img);
+      }
+    }
+    function parseSources(sources) {
+      if (!sources) {
+        return [];
+      }
+      if (util.startsWith(sources, "[")) {
+        try {
+          sources = JSON.parse(sources);
+        } catch (e) {
+          sources = [];
+        }
+      } else {
+        sources = parseOptions(sources);
+      }
+      if (!util.isArray(sources)) {
+        sources = [sources];
+      }
+      return sources.filter((source) => !util.isEmpty(source));
+    }
+    function isImg(el) {
+      return util.isTag(el, "img");
+    }
+
     let prevented;
     function preventBackgroundScroll(el) {
       const off = util.on(
@@ -92,6 +263,16 @@
       }
     };
 
+    function storeScrollPosition(element) {
+      const scrollElement = util.scrollParent(element);
+      const { scrollTop } = scrollElement;
+      return () => {
+        if (scrollTop !== scrollElement.scrollTop) {
+          scrollElement.scrollTop = scrollTop;
+        }
+      };
+    }
+
     var Togglable = {
       props: {
         cls: Boolean,
@@ -129,8 +310,14 @@
                 util.addClass(el, cls);
                 util.trigger(el, show ? "show" : "hide", [this]);
                 const done = () => {
+                  var _a;
                   util.removeClass(el, cls);
                   util.trigger(el, show ? "shown" : "hidden", [this]);
+                  if (show) {
+                    const restoreScrollPosition = storeScrollPosition(el);
+                    (_a = util.$$("[autofocus]", el).find(util.isVisible)) == null ? void 0 : _a.focus();
+                    restoreScrollPosition();
+                  }
                 };
                 return promise ? promise.then(done, () => {
                   util.removeClass(el, cls);
@@ -163,7 +350,6 @@
           if (changed) {
             util.trigger(el, "toggled", [toggled, this]);
           }
-          util.$$("[autofocus]", el).some((el2) => util.isVisible(el2) ? el2.focus() || true : el2.blur());
         }
       }
     };
@@ -294,9 +480,6 @@
         panel: ({ selPanel }, $el) => util.$(selPanel, $el),
         transitionElement() {
           return this.panel;
-        },
-        bgClose({ bgClose }) {
-          return bgClose && this.panel;
         }
       },
       connected() {
@@ -459,7 +642,7 @@
     }
     function listenForBackgroundClose(modal) {
       return util.on(document, util.pointerDown, ({ target }) => {
-        if (util.last(active) !== modal || modal.overlay && !modal.$el.contains(target) || modal.panel.contains(target)) {
+        if (util.last(active) !== modal || modal.overlay && !modal.$el.contains(target) || !modal.panel || modal.panel.contains(target)) {
           return;
         }
         util.once(
@@ -482,59 +665,6 @@
       });
     }
 
-    function callUpdate(instance, e = "update") {
-      if (!instance._connected) {
-        return;
-      }
-      if (!instance._updates.length) {
-        return;
-      }
-      if (!instance._queued) {
-        instance._queued = /* @__PURE__ */ new Set();
-        util.fastdom.read(() => {
-          if (instance._connected) {
-            runUpdates(instance, instance._queued);
-          }
-          instance._queued = null;
-        });
-      }
-      instance._queued.add(e.type || e);
-    }
-    function runUpdates(instance, types) {
-      for (const { read, write, events = [] } of instance._updates) {
-        if (!types.has("update") && !events.some((type) => types.has(type))) {
-          continue;
-        }
-        let result;
-        if (read) {
-          result = read.call(instance, instance._data, types);
-          if (result && util.isPlainObject(result)) {
-            util.assign(instance._data, result);
-          }
-        }
-        if (write && result !== false) {
-          util.fastdom.write(() => {
-            if (instance._connected) {
-              write.call(instance, instance._data, types);
-            }
-          });
-        }
-      }
-    }
-
-    function resize(options) {
-      return observe(util.observeResize, options, "resize");
-    }
-    function observe(observe2, options, emit) {
-      return {
-        observe: observe2,
-        handler() {
-          callUpdate(this, emit);
-        },
-        ...options
-      };
-    }
-
     var Animations$1 = {
       slide: {
         show(dir) {
@@ -555,11 +685,7 @@
       return Math.abs(new DOMMatrix(util.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(prev, next, dir, { animation, easing }) {
@@ -693,7 +819,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
@@ -761,9 +886,6 @@
           if (distance === 0 || this.prevPos === this.pos || !this.dragging && Math.abs(distance) < this.threshold) {
             return;
           }
-          if (!this.dragging) {
-            util.on(this.list, "click", preventClick, pointerOptions);
-          }
           e.cancelable && e.preventDefault();
           this.dragging = true;
           this.dir = distance < 0 ? 1 : -1;
@@ -812,6 +934,7 @@
           util.off(document, pointerMove, this.move, pointerOptions);
           util.off(document, pointerUp, this.end, pointerUpOptions);
           if (this.dragging) {
+            setTimeout(util.on(this.list, "click", (e) => e.preventDefault(), pointerOptions));
             this.dragging = null;
             if (this.index === this.prevIndex) {
               this.percent = 1 - this.percent;
@@ -822,6 +945,8 @@
               const dirChange = (util.isRtl ? this.dir * (util.isRtl ? 1 : -1) : this.dir) < 0 === this.prevPos > this.pos;
               this.index = dirChange ? this.index : this.prevIndex;
               if (dirChange) {
+                util.trigger(this.slides[this.prevIndex], "itemhidden", [this]);
+                util.trigger(this.slides[this.index], "itemshown", [this]);
                 this.percent = 1 - this.percent;
               }
               this.show(
@@ -830,7 +955,6 @@
               );
             }
           }
-          setTimeout(() => util.off(this.list, "click", preventClick, pointerOptions));
           util.css(this.list, { userSelect: "" });
           this.drag = this.percent = null;
         }
@@ -855,16 +979,11 @@
     }
 
     const keyMap = {
-      TAB: 9,
-      ESC: 27,
       SPACE: 32,
       END: 35,
       HOME: 36,
       LEFT: 37,
-      UP: 38,
-      RIGHT: 39,
-      DOWN: 40
-    };
+      RIGHT: 39};
 
     var SliderNav = {
       i18n: {
@@ -1010,7 +1129,7 @@
               const item = util.toNumber(cmd);
               const active = item === index;
               util.toggleClass(el, this.clsActive, active);
-              util.toggleClass(button, "uk-disabled", this.parallax);
+              util.toggleClass(button, "uk-disabled", !!this.parallax);
               util.attr(button, {
                 "aria-selected": active,
                 tabindex: active && !this.parallax ? null : -1
@@ -1113,7 +1232,7 @@
         }
       },
       methods: {
-        show(index, force = false) {
+        async show(index, force = false) {
           var _a;
           if (this.dragging || !this.length || this.parallax) {
             return;
@@ -1149,18 +1268,16 @@
             reset();
             return;
           }
-          const promise = this._show(prev, next, force).then(() => {
-            prev && util.trigger(prev, "itemhidden", [this]);
-            util.trigger(next, "itemshown", [this]);
-            stack.shift();
-            this._transitioner = null;
-            if (stack.length) {
-              requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
-            }
-          });
           prev && util.trigger(prev, "itemhide", [this]);
           util.trigger(next, "itemshow", [this]);
-          return promise;
+          await this._show(prev, next, force);
+          prev && util.trigger(prev, "itemhidden", [this]);
+          util.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 util.clamp(
@@ -1230,7 +1347,7 @@
       },
       observe: resize(),
       events: {
-        beforeitemshow({ target }) {
+        itemshow({ target }) {
           util.addClass(target, this.clsActive);
         },
         itemshown({ target }) {
@@ -1242,6 +1359,84 @@
       }
     };
 
+    ({
+      ...Animations$1,
+      fade: {
+        show() {
+          return [{ opacity: 0, zIndex: 0 }, { zIndex: -1 }];
+        },
+        percent(current) {
+          return 1 - util.css(current, "opacity");
+        },
+        translate(percent) {
+          return [{ opacity: 1 - percent, zIndex: 0 }, { zIndex: -1 }];
+        }
+      },
+      scale: {
+        show() {
+          return [{ opacity: 0, transform: scale3d(1 + 0.5), zIndex: 0 }, { zIndex: -1 }];
+        },
+        percent(current) {
+          return 1 - util.css(current, "opacity");
+        },
+        translate(percent) {
+          return [
+            { opacity: 1 - percent, transform: scale3d(1 + 0.5 * percent), zIndex: 0 },
+            { zIndex: -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 }
+          ];
+        }
+      }
+    });
+    function scale3d(value) {
+      return `scale3d(${value}, ${value}, 1)`;
+    }
+
     var Animations = {
       ...Animations$1,
       fade: {
@@ -1275,34 +1470,67 @@
     };
 
     var LightboxPanel = {
+      i18n: {
+        counter: "%s / %s"
+      },
       mixins: [Modal, Slideshow],
       functional: true,
       props: {
-        delayControls: Number,
+        counter: Boolean,
         preload: Number,
+        nav: Boolean,
+        slidenav: Boolean,
+        delayControls: Number,
         videoAutoplay: Boolean,
         template: String
       },
       data: () => ({
+        counter: false,
         preload: 1,
-        videoAutoplay: false,
+        nav: false,
+        slidenav: true,
         delayControls: 3e3,
+        videoAutoplay: false,
         items: [],
         cls: "uk-open",
         clsPage: "uk-lightbox-page",
-        selList: ".uk-lightbox-items",
+        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-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>`
+        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() {
-        const $el = util.$(this.template);
+        let $el = util.$(this.template);
+        if (util.isTag($el, "template")) {
+          $el = util.fragment(util.html($el));
+        }
         const list = util.$(this.selList, $el);
-        this.items.forEach(() => util.append(list, "<div>"));
+        const navType = this.$props.nav;
+        util.remove(util.$$(this.selNav, $el).filter((el) => !util.matches(el, `.uk-${navType}`)));
+        for (const [i, item] of this.items.entries()) {
+          util.append(list, "<div>");
+          if (navType === "thumbnav") {
+            util.wrapAll(
+              toThumbnavItem(item, this.videoAutoplay),
+              util.append(util.$(this.selNav, $el), `<li uk-lightbox-item="${i}"><a href></a></li>`)
+            );
+          }
+        }
+        if (!this.slidenav) {
+          util.remove(util.$$(".uk-lightbox-slidenav", $el));
+        }
+        if (!this.counter) {
+          util.remove(util.$(this.selCounter, $el));
+        }
+        util.addClass(list, this.clsFit);
         const close = util.$("[uk-close]", $el);
         const closeLabel = this.t("close");
         if (close && closeLabel) {
@@ -1312,21 +1540,33 @@
       },
       events: [
         {
-          name: `${util.pointerMove} ${util.pointerDown} 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();
+              util.toggleClass(this.list, this.clsFit);
             }
           }
         },
+        {
+          name: `${util.pointerMove} ${util.pointerDown} keydown`,
+          filter: ({ delayControls }) => delayControls,
+          handler() {
+            this.showControls();
+          }
+        },
         {
           name: "shown",
           self: true,
@@ -1375,26 +1615,25 @@
         {
           name: "beforeitemshow",
           handler(e) {
+            util.html(util.$(this.selCaption, this.$el), this.getItem().caption || "");
+            util.html(
+              util.$(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["scale"];
+            this.animation = Animations.scale;
             util.removeClass(e.target, this.clsActive);
             this.stack.splice(1, 0, this.index);
           }
         },
-        {
-          name: "itemshow",
-          handler() {
-            util.html(util.$(this.selCaption, this.$el), this.getItem().caption || "");
-            for (let j = -this.preload; j <= this.preload; j++) {
-              this.loadItem(this.index + j);
-            }
-          }
-        },
         {
           name: "itemshown",
           handler() {
@@ -1404,29 +1643,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 });
-              util.on(img, "load", () => this.setItem(item, img));
+            if (type === "image" || isImage(src)) {
+              const img = createEl("img");
+              wrapInPicture(img, item.sources);
+              util.attr(img, {
+                src,
+                ...util.pick(item, ["alt", "srcset", "sizes"]),
+                ...attrs
+              });
+              util.on(img, "load", () => this.setItem(item, util.parent(img) || img));
               util.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
               });
               util.on(video, "loadedmetadata", () => this.setItem(item, video));
@@ -1441,20 +1687,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(
@@ -1465,7 +1711,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,
@@ -1477,8 +1723,29 @@
               }
             }
           }
+        },
+        {
+          name: "itemloaded",
+          handler() {
+            this.$emit("resize");
+          }
         }
       ],
+      update: {
+        read() {
+          for (const media of util.$$(`${this.selList} :not([controls]):is(img,video)`, this.$el)) {
+            util.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);
@@ -1496,11 +1763,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);
           util.addClass(this.$el, "uk-active", "uk-transition-active");
         },
         hideControls() {
@@ -1513,7 +1780,26 @@
       util.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 = ".uk-disabled *, .uk-disabled, [disabled]";
     var Component = {
       install,
       props: { toggle: String },
@@ -1536,17 +1822,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 (!util.matches(e.current, selDisabled)) {
+              this.show(e.current);
+            }
           }
         }
       },
       methods: {
         show(index) {
-          const items = util.uniqueBy(this.toggles.map(toItem), "source");
+          let items = this.toggles.map(toItem);
+          if (this.nav === "thumbnav") {
+            ensureThumb.call(this, this.toggles, items);
+          }
+          items = util.uniqueBy(items, "source");
           if (util.isElement(index)) {
             const { source } = toItem(index);
             index = util.findIndex(items, ({ source: src }) => source === src);
@@ -1567,10 +1859,29 @@
       }
       util.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 = util.parents(toggle).reverse().concat(toggle).find(
+          (parent2) => this.$el.contains(parent2) && (parent2 === toggle || util.$$(this.toggle, parent2).length === 1)
+        );
+        if (!parent) {
+          continue;
+        }
+        const media = util.$("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] = util.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;