@redot-src/glare 1.4.0 → 1.4.1

package/dist/glare.esm.js

@@ -1,4 +1,4 @@
-const at = {
+const lt = {
   CLOSE: "Close",
   NEXT: "Next",
   PREV: "Previous",
@@ -17,20 +17,20 @@ const at = {
   ZOOM: "Zoom",
   ZOOM_OUT: "Zoom out"
 };
-function xt(e) {
+function vt(e) {
   const t = e.lang ?? "en";
-  return { ...at, ...e.i18n?.en, ...e.i18n?.[t] };
+  return { ...lt, ...e.i18n?.en, ...e.i18n?.[t] };
 }
 function x(e, t) {
   return e.replace(/\{\{(\w+)\}\}/g, (s, i) => t[i] ?? "");
 }
-function vt(e) {
+function wt(e) {
   return Object.entries(e).map(([t, s]) => `${encodeURIComponent(t)}=${encodeURIComponent(String(s))}`).join("&");
 }
-function wt(e, t) {
+function Et(e, t) {
   return e.replace(/\$(\d+)/g, (s, i) => t[Number(i)] ?? "");
 }
-const Et = {
+const Tt = {
   youtube: {
     matcher: /(?:youtube\.com|youtu\.be|youtube-nocookie\.com)\/(?:watch\?(?:.*&)?v=|v\/|u\/\w\/|embed\/|shorts\/)?([\w-]{11})/i,
     type: "embed",
@@ -60,14 +60,14 @@ const Et = {
 };
 function q(e, t, s) {
   if (typeof e == "function") return e(t, s);
-  if (typeof e == "string") return wt(e, t);
+  if (typeof e == "string") return Et(e, t);
 }
-function Tt(e, t) {
+function St(e, t) {
   for (const s of Object.values(t ?? {})) {
     const i = e.match(s.matcher);
     if (!i) continue;
     let n = q(s.url, i, e) ?? e;
-    return s.params && (n += (n.includes("?") ? "&" : "?") + vt(s.params)), {
+    return s.params && (n += (n.includes("?") ? "&" : "?") + wt(s.params)), {
       src: n,
       type: s.type ?? "iframe",
       thumb: q(s.thumb, i, e)
@@ -96,7 +96,7 @@ const d = (e) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fi
   thumbAjax: d('<path d="M20 15a4 4 0 0 0-3-3.87A6 6 0 1 0 6 14"/><path d="m9 16 3 3 3-3M12 12v7"/>'),
   thumbHtml: d('<path d="m8 9-3 3 3 3M16 9l3 3-3 3M14 5l-4 14"/>'),
   thumbSlide: d('<path d="M6 3h9l4 4v14H6Z"/><path d="M14 3v5h5M9 13h7M9 17h5"/>')
-}, w = (e, t, s, i = "") => `<button type="button" class="glare-button glare-button--${e}" data-glare-${e} title="{{${t}}}" aria-label="{{${t}}}"${i}>${s}</button>`, St = `
+}, w = (e, t, s, i = "") => `<button type="button" class="glare-button glare-button--${e}" data-glare-${e} title="{{${t}}}" aria-label="{{${t}}}"${i}>${s}</button>`, Lt = `
 <div class="glare-container" role="dialog" aria-modal="true" tabindex="-1">
   <div class="glare-bg"></div>
   <div class="glare-progress" hidden></div>
@@ -120,14 +120,14 @@ const d = (e) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fi
   close: w("close", "CLOSE", c.close),
   download: `<a class="glare-button glare-button--download" data-glare-download download target="_blank" rel="noopener" title="{{DOWNLOAD}}" aria-label="{{DOWNLOAD}}">${c.download}</a>`,
   smallBtn: `<button type="button" class="glare-button glare-close-small" data-glare-close title="{{CLOSE}}" aria-label="{{CLOSE}}">${c.close}</button>`
-}, Lt = '<div class="glare-spinner" role="status" aria-label="{{LOADING}}"></div>', Ct = '<div class="glare-error"><p>{{ERROR}}</p></div>', $t = '<video class="glare-video" controls playsinline controlsList="nodownload" poster="{{poster}}"><source src="{{src}}" type="{{format}}"/>{{VIDEO_UNSUPPORTED}}</video>', It = '<iframe class="glare-iframe"></iframe>', lt = {
+}, Ct = '<div class="glare-spinner" role="status" aria-label="{{LOADING}}"></div>', $t = '<div class="glare-error"><p>{{ERROR}}</p></div>', It = '<video class="glare-video" controls playsinline controlsList="nodownload" poster="{{poster}}"><source src="{{src}}" type="{{format}}"/>{{VIDEO_UNSUPPORTED}}</video>', Ot = '<iframe class="glare-iframe"></iframe>', ct = {
   autoStart: !1,
   axis: "x",
   fit: "cover"
 }, N = {
   autoStart: !1,
   speed: 3e3
-}, ct = {
+}, ht = {
   autoStart: !1
 }, R = {
   closeExisting: !1,
@@ -169,38 +169,38 @@ const d = (e) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fi
     dblclickSlide: (e) => e.type === "image" ? "zoom" : !1
   },
   image: { preload: !1 },
-  video: { tpl: $t, format: "", autoStart: !0 },
+  video: { tpl: It, format: "", autoStart: !0 },
   iframe: {
     preload: !0,
     css: {},
     attr: { allowfullscreen: "true", allow: "autoplay; fullscreen; picture-in-picture" },
-    tpl: It
+    tpl: Ot
   },
   ajax: { settings: { headers: { "X-Requested-With": "XMLHttpRequest" } } },
-  media: Et,
+  media: Tt,
   hash: !0,
   slideshow: N,
-  thumbs: lt,
-  fullscreen: ct,
+  thumbs: ct,
+  fullscreen: ht,
   lang: "en",
-  i18n: { en: at },
-  baseTpl: St,
+  i18n: { en: lt },
+  baseTpl: Lt,
   btnTpl: Mt,
-  spinnerTpl: Lt,
-  errorTpl: Ct
-}, Ot = /\.(avif|bmp|gif|jpe?g|png|svg|webp|ico)(\?.*)?$/i, At = /\.(mp4|webm|ogg|ogv|mov|m4v)(\?.*)?$/i, Dt = /\.pdf(\?.*)?$/i, kt = /^(#[\w-]+|\.[\w-]+)$/;
-function Rt(e, t = "image") {
-  return e ? kt.test(e) ? "inline" : Ot.test(e) ? "image" : At.test(e) ? "video" : Dt.test(e) ? "iframe" : t : "html";
+  spinnerTpl: Ct,
+  errorTpl: $t
+}, At = /\.(avif|bmp|gif|jpe?g|png|svg|webp|ico)(\?.*)?$/i, Dt = /\.(mp4|webm|ogg|ogv|mov|m4v)(\?.*)?$/i, kt = /\.pdf(\?.*)?$/i, Rt = /^(#[\w-]+|\.[\w-]+)$/;
+function Ft(e, t = "image") {
+  return e ? Rt.test(e) ? "inline" : At.test(e) ? "image" : Dt.test(e) ? "video" : kt.test(e) ? "iframe" : t : "html";
 }
-function Ft(e) {
+function Ht(e) {
   const t = e.match(/\.(\w+)(?:\?|$)/)?.[1]?.toLowerCase();
   return t ? `video/${t === "ogv" ? "ogg" : t}` : "video/mp4";
 }
-function ht(e, t, s) {
+function ut(e, t, s) {
   const i = typeof e == "string" ? { src: e } : { ...e };
   let n = i.src ?? "", o = i.type, r = i.thumb;
-  const a = n ? Tt(n, s.media) : null;
-  return a && (n = a.src ?? n, o ??= a.type, r ??= a.thumb), o || (o = i.html || i.content ? "html" : Rt(n, s.defaultType)), {
+  const a = n ? St(n, s.media) : null;
+  return a && (n = a.src ?? n, o ??= a.type, r ??= a.thumb), o || (o = i.html || i.content ? "html" : Ft(n, s.defaultType)), {
     ...i,
     index: t,
     src: n,
@@ -212,10 +212,10 @@ function ht(e, t, s) {
   };
 }
 const p = (e, t) => e.getAttribute(t) || void 0;
-function Ht(e, t) {
+function Pt(e, t) {
   return e.map((s, i) => {
     const n = s.querySelector("img"), o = p(s, "data-caption") ?? p(s, "title") ?? "";
-    return ht(
+    return ut(
       {
         src: p(s, "data-src") ?? p(s, "href") ?? "",
         type: p(s, "data-type"),
@@ -235,8 +235,8 @@ function Ht(e, t) {
     );
   });
 }
-function Pt(e, t) {
-  return e.length && e[0].nodeType === 1 ? Ht(e, t) : e.map((s, i) => ht(s, i, t));
+function zt(e, t) {
+  return e.length && e[0].nodeType === 1 ? Pt(e, t) : e.map((s, i) => ut(s, i, t));
 }
 function h(e, t = document) {
   return t.querySelector(e);
@@ -248,13 +248,13 @@ function m(e, t = "", s = "") {
   const i = document.createElement(e);
   return t && (i.className = t), s && (i.innerHTML = s), i;
 }
-function zt(e) {
+function _t(e) {
   return m("div", "", e.trim()).firstElementChild;
 }
 function Z(e) {
   return /[<&]/.test(e) ? new DOMParser().parseFromString(e, "text/html").body.textContent?.trim() ?? "" : e.trim();
 }
-function ut(e, t = document) {
+function dt(e, t = document) {
   return e ? typeof e != "string" ? e : h(e, t) ?? h(e) : null;
 }
 function W(e) {
@@ -263,10 +263,10 @@ function W(e) {
 function f(e, t, s, i) {
   return e.addEventListener(t, s, i), () => e.removeEventListener(t, s, i);
 }
-function dt(e) {
+function ft(e) {
   requestAnimationFrame(() => requestAnimationFrame(e));
 }
-function _t(e, t, s) {
+function Nt(e, t, s) {
   let i = !1;
   const n = () => {
     i || (i = !0, clearTimeout(r), e.removeEventListener("transitionend", o), s());
@@ -276,13 +276,13 @@ function _t(e, t, s) {
   e.addEventListener("transitionend", o);
   const r = setTimeout(n, t + 50);
 }
-function Nt() {
+function Zt() {
   return navigator.maxTouchPoints > 0 && window.matchMedia("(pointer: coarse)").matches;
 }
-function ft() {
+function pt() {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function pt() {
+function mt() {
   const e = document;
   return !!(e.fullscreenEnabled ?? e.webkitFullscreenEnabled);
 }
@@ -296,8 +296,8 @@ function V(e) {
     t.classList.remove(U), t.style.marginRight = "";
 }
 const T = "glare-hidden";
-function Zt(e, t, s, i) {
-  const n = zt(x(e.baseTpl, t));
+function jt(e, t, s, i) {
+  const n = _t(x(e.baseTpl, t));
   n.dataset.glareId = String(s), e.baseClass && n.classList.add(e.baseClass), e.modal && n.classList.add("glare-is-modal");
   const o = h(".glare-stage", n);
   if (!o) throw new Error("baseTpl must contain a .glare-stage element");
@@ -311,9 +311,9 @@ function Zt(e, t, s, i) {
     infobar: h(".glare-infobar", n),
     navigation: h(".glare-navigation", n)
   }, a = i < 2;
-  return r.navigation?.classList.toggle(T, !e.arrows || a), r.infobar?.classList.toggle(T, !e.infobar || a), r.toolbar && jt(r.toolbar, e, t, a), r;
+  return r.navigation?.classList.toggle(T, !e.arrows || a), r.infobar?.classList.toggle(T, !e.infobar || a), r.toolbar && Bt(r.toolbar, e, t, a), r;
 }
-function jt(e, t, s, i) {
+function Bt(e, t, s, i) {
   if (t.toolbar === !1) {
     e.classList.add(T);
     return;
@@ -322,10 +322,10 @@ function jt(e, t, s, i) {
   n.id = `glare-toolbar-menu-${e.closest(".glare-container")?.dataset.glareId ?? ""}`;
   for (const o of t.buttons) {
     if (typeof o != "string") {
-      n.appendChild(Bt(o));
+      n.appendChild(qt(o));
       continue;
     }
-    if (i && (o === "thumbs" || o === "slideshow") || o === "fullscreen" && !pt() || o === "more" || o === "close") continue;
+    if (i && (o === "thumbs" || o === "slideshow") || o === "fullscreen" && !mt() || o === "more" || o === "close") continue;
     const r = t.btnTpl[o];
     r && n.insertAdjacentHTML("beforeend", x(r, s));
   }
@@ -339,23 +339,23 @@ function jt(e, t, s, i) {
     o && e.insertAdjacentHTML("beforeend", x(o, s));
   }
 }
-function Bt({ name: e, label: t, icon: s }) {
+function qt({ name: e, label: t, icon: s }) {
   const i = m("button", `glare-button glare-button--${e}`, s);
   return i.type = "button", i.title = t, i.dataset.glareCustom = e, i.setAttribute("aria-label", t), i;
 }
-function qt(e, t) {
+function Wt(e, t) {
   let s = 0;
   for (let i = e; i instanceof HTMLElement && i !== t; i = i.offsetParent)
     s += i.offsetTop;
   return s;
 }
-function Wt({ container: e, caption: t }) {
+function Ut({ container: e, caption: t }) {
   let s = null;
   const i = () => {
     if (!t) return;
     e.style.setProperty("--glare-caption-inset", `${t.offsetHeight}px`);
     const o = s && h(".glare-content", s);
-    o && Object.assign(t.style, { top: `${qt(o, t.offsetParent) + o.offsetHeight}px`, bottom: "auto" });
+    o && Object.assign(t.style, { top: `${Wt(o, t.offsetParent) + o.offsetHeight}px`, bottom: "auto" });
   }, n = new ResizeObserver(i);
   return t && n.observe(t), i(), {
     follow(o) {
@@ -368,16 +368,16 @@ function Wt({ container: e, caption: t }) {
     destroy: () => n.disconnect()
   };
 }
-function Ut(e, t, s) {
+function Vt(e, t, s) {
   const i = m("div", `glare-slide glare-slide--${t.type}`);
   s.slideClass && i.classList.add(s.slideClass);
   const n = m("div", "glare-content");
   return i.appendChild(n), e.appendChild(i), t.$slide = i, t.$content = n, i;
 }
-function Vt(e, t, s) {
+function Xt(e, t, s) {
   e.style.setProperty("--glare-direction", String(s)), e.classList.add(t ? "glare-slide--opening" : "glare-slide--in"), t && (e.style.transition = "none"), e.offsetWidth, e.classList.add("glare-slide--current"), t && (e.offsetWidth, e.style.transition = "");
 }
-function Xt(e, t, s, i) {
+function X(e, t, s, i) {
   for (const n of I(".glare-slide", e))
     n !== t && (n.classList.contains("glare-slide--out") || n.style.setProperty("--glare-direction", String(i)), n.classList.remove("glare-slide--current", "glare-slide--in", "glare-slide--opening"), n.classList.add("glare-slide--out"), setTimeout(() => n.remove(), s));
 }
@@ -393,11 +393,11 @@ function Kt(e) {
 function Qt(e, t, s, i) {
   e.hasError = !0, e.error = t, e.$content && (e.$content.className = "glare-content glare-content--error", e.$content.innerHTML = x(s.errorTpl, i));
 }
-function mt(e, t) {
+function gt(e, t) {
   return typeof e.toolbar == "boolean" ? e.toolbar : t.type === "image";
 }
 function Jt(e, t) {
-  return typeof e.smallBtn == "boolean" ? e.smallBtn : !mt(e, t);
+  return typeof e.smallBtn == "boolean" ? e.smallBtn : !gt(e, t);
 }
 function te(e, t, s, i, n, o) {
   const { container: r, toolbar: a, infobar: l } = e;
@@ -406,7 +406,7 @@ function te(e, t, s, i, n, o) {
 function ee(e, t, s) {
   if (t.toolbar === !1) return;
   e.classList.remove("glare-toolbar--expanded"), e.querySelector("[data-glare-more]")?.setAttribute("aria-expanded", "false");
-  const i = mt(t, s);
+  const i = gt(t, s);
   if (e.classList.toggle(T, !i), !i) return;
   const n = s.type === "image";
   h("[data-glare-zoom]", e)?.classList.toggle(T, !n);
@@ -426,9 +426,9 @@ function ne(e, t) {
 }
 function oe(e, t, s, i) {
   const n = !t.loop && s === 0, o = !t.loop && s === i - 1;
-  X(h("[data-glare-prev]", e), n), X(h("[data-glare-next]", e), o);
+  G(h("[data-glare-prev]", e), n), G(h("[data-glare-next]", e), o);
 }
-function X(e, t) {
+function G(e, t) {
   e && (e.classList.toggle("glare-is-disabled", t), e.setAttribute("aria-disabled", String(t)));
 }
 function re(e, t, s, i) {
@@ -489,7 +489,7 @@ class ce {
     );
   }
 }
-function G(e) {
+function Y(e) {
   if (typeof e != "object" || e === null) return !1;
   const t = Object.getPrototypeOf(e);
   return t === null || Object.getPrototypeOf(t) === null;
@@ -501,7 +501,7 @@ function F(...e) {
       for (const [i, n] of Object.entries(s)) {
         if (n === void 0) continue;
         const o = t[i];
-        t[i] = G(n) ? F(G(o) ? o : {}, n) : n;
+        t[i] = Y(n) ? F(Y(o) ? o : {}, n) : n;
       }
   return t;
 }
@@ -555,7 +555,7 @@ class ue {
     return { x: E(t, -o, o), y: E(s, -r, r) };
   }
 }
-const de = 6, Y = 120, fe = 100, pe = 0.5, me = 80, ge = 0.4, be = "a, button, input, textarea, select, video, .glare-thumbs", K = (e, t) => Math.hypot(e.x - t.x, e.y - t.y), Q = (e, t) => ({ x: (e.x + t.x) / 2, y: (e.y + t.y) / 2 }), O = (e) => ({ x: e.clientX, y: e.clientY });
+const de = 6, K = 120, fe = 100, pe = 0.5, me = 80, ge = 0.4, be = "a, button, input, textarea, select, video, .glare-thumbs", Q = (e, t) => Math.hypot(e.x - t.x, e.y - t.y), J = (e, t) => ({ x: (e.x + t.x) / 2, y: (e.y + t.y) / 2 }), O = (e) => ({ x: e.clientX, y: e.clientY });
 class ye {
   constructor(t, s) {
     this.stage = t, this.host = s, this.pointers = /* @__PURE__ */ new Map(), this.mode = "idle", this.moved = !1, this.start = [], this.startTime = 0, this.startZoom = { scale: 1, x: 0, y: 0 }, this.startMid = { x: 0, y: 0 }, this.startDistance = 0, this.offs = [
@@ -586,7 +586,7 @@ class ye {
   begin() {
     this.mode === "swipe" && this.releaseStage();
     const t = [...this.pointers.values()];
-    this.start = t, this.startTime = performance.now(), this.startZoom = this.host.zoom.state, this.mode = t.length >= 2 ? "pinch" : "idle", t.length >= 2 && (this.startDistance = K(t[0], t[1]), this.startMid = Q(t[0], t[1]));
+    this.start = t, this.startTime = performance.now(), this.startZoom = this.host.zoom.state, this.mode = t.length >= 2 ? "pinch" : "idle", t.length >= 2 && (this.startDistance = Q(t[0], t[1]), this.startMid = J(t[0], t[1]));
   }
   move(t) {
     const s = [...this.pointers.values()];
@@ -608,8 +608,8 @@ class ye {
   }
   /** Scales around the pinch midpoint so the content under the fingers stays put. */
   pinch(t, s) {
-    const { zoom: i } = this.host, n = Q(t, s), o = i.center() ?? n, r = E(
-      this.startZoom.scale * K(t, s) / (this.startDistance || 1),
+    const { zoom: i } = this.host, n = J(t, s), o = i.center() ?? n, r = E(
+      this.startZoom.scale * Q(t, s) / (this.startDistance || 1),
       S,
       H
     ), a = (this.startMid.x - o.x - this.startZoom.x) / this.startZoom.scale, l = (this.startMid.y - o.y - this.startZoom.y) / this.startZoom.scale;
@@ -622,7 +622,7 @@ class ye {
       this.releaseStage(), this.finishSwipe(i, n, o);
     else if (this.mode === "pan" && this.host.touch.momentum !== !1) {
       const { zoom: r } = this.host;
-      r.apply(r.scale, r.x + o.x * Y, r.y + o.y * Y, 250);
+      r.apply(r.scale, r.x + o.x * K, r.y + o.y * K, 250);
     }
     this.mode = "idle", this.start = [], this.moved && setTimeout(() => this.moved = !1, 0);
   }
@@ -651,18 +651,18 @@ function P(e = window.location.hash) {
   const t = e.replace(/^#/, "").match(xe);
   return t ? { gallery: t[1], index: Math.max(0, parseInt(t[2], 10) - 1) } : null;
 }
-function J(e, t) {
+function tt(e, t) {
   return `${e}-${t + 1}`;
 }
 class ve {
   constructor(t, s) {
     this.glare = t, this.gallery = s, this.pushed = !1, this.off = f(window, "hashchange", () => this.onHashChange());
-    const i = J(s, t.currIndex);
-    tt() !== i && (window.history.pushState(null, "", `#${i}`), this.pushed = !0);
+    const i = tt(s, t.currIndex);
+    et() !== i && (window.history.pushState(null, "", `#${i}`), this.pushed = !0);
   }
   update(t = this.glare.currIndex) {
-    const s = J(this.gallery, t);
-    tt() !== s && this.replace(`#${s}`);
+    const s = tt(this.gallery, t);
+    et() !== s && this.replace(`#${s}`);
   }
   destroy() {
     this.off(), P()?.gallery === this.gallery && (this.pushed ? window.history.back() : this.replace(""));
@@ -676,7 +676,7 @@ class ve {
     window.history.replaceState(null, "", `${s}${i}${t}`);
   }
 }
-const tt = () => window.location.hash.replace(/^#/, "");
+const et = () => window.location.hash.replace(/^#/, "");
 class we {
   constructor(t, s, i) {
     this.glare = t, this.container = s, this.opts = i, this.timer = null, this.active = !1, this.bar = h(".glare-progress", s), this.button = h("[data-glare-slideshow]", s), i.autoStart && this.start();
@@ -706,7 +706,7 @@ class we {
     return !this.glare.opts.loop && this.glare.currIndex === this.glare.group.length - 1;
   }
   schedule() {
-    this.clearTimer(), this.setProgress(0), ft() || (this.bar?.offsetWidth, this.setProgress(1)), this.timer = setTimeout(() => this.atEnd ? this.stop() : this.glare.next(), this.speed);
+    this.clearTimer(), this.setProgress(0), pt() || (this.bar?.offsetWidth, this.setProgress(1)), this.timer = setTimeout(() => this.atEnd ? this.stop() : this.glare.next(), this.speed);
   }
   clearTimer() {
     this.timer && clearTimeout(this.timer), this.timer = null;
@@ -737,7 +737,7 @@ const Ee = {
 function Te(e) {
   return e.thumb || (e.type === "video" ? e.poster : "") || (e.type === "image" ? e.src : "");
 }
-function et(e, t) {
+function st(e, t) {
   e.classList.add("glare-thumbs-item--placeholder"), e.innerHTML = Ee[t] ?? c.thumbSlide;
 }
 class Se {
@@ -777,15 +777,15 @@ class Se {
       const r = Te(n);
       if (r) {
         const a = m("img");
-        a.src = r, a.alt = n.alt || Z(n.caption), a.loading = "lazy", a.onerror = () => et(o, n.type), o.appendChild(a);
+        a.src = r, a.alt = n.alt || Z(n.caption), a.loading = "lazy", a.onerror = () => st(o, n.type), o.appendChild(a);
       } else
-        et(o, n.type);
+        st(o, n.type);
       this.list.appendChild(o), this.offs.push(f(o, "click", () => this.glare.jumpTo(n.index)));
     }
-    (ut(this.opts.parentEl, this.container) ?? this.container).appendChild(this.strip), this.opts.autoStart && this.show(), this.focus();
+    (dt(this.opts.parentEl, this.container) ?? this.container).appendChild(this.strip), this.opts.autoStart && this.show(), this.focus();
   }
 }
-const Me = 40, Le = 150, Ce = 16;
+const Le = 40, Me = 150, Ce = 16;
 class $e {
   constructor(t, s) {
     this.distance = 0, this.fired = !1, this.settle = null, this.off = f(
@@ -793,7 +793,7 @@ class $e {
       "wheel",
       (i) => {
         const n = s.current();
-        !n || i.deltaY === 0 || s.mode === "auto" && n.type !== "image" || n.type === "image" && s.isZoomed() || (i.preventDefault(), this.restartSettle(), !this.fired && (this.distance += Ie(i, t), !(Math.abs(this.distance) < Me) && (this.fired = !0, this.distance > 0 ? s.next() : s.prev())));
+        !n || i.deltaY === 0 || s.mode === "auto" && n.type !== "image" || n.type === "image" && s.isZoomed() || (i.preventDefault(), this.restartSettle(), !this.fired && (this.distance += Ie(i, t), !(Math.abs(this.distance) < Le) && (this.fired = !0, this.distance > 0 ? s.next() : s.prev())));
       },
       { passive: !1 }
     );
@@ -804,14 +804,14 @@ class $e {
   restartSettle() {
     this.settle && clearTimeout(this.settle), this.settle = setTimeout(() => {
       this.distance = 0, this.fired = !1;
-    }, Le);
+    }, Me);
   }
 }
 function Ie(e, t) {
   return e.deltaMode === WheelEvent.DOM_DELTA_LINE ? e.deltaY * Ce : e.deltaMode === WheelEvent.DOM_DELTA_PAGE ? e.deltaY * t.clientHeight : e.deltaY;
 }
 function $(e) {
-  const t = ft(), s = t || !e.animationEffect ? 0 : Math.max(0, e.animationDuration), i = t || !e.transitionEffect ? 0 : Math.max(0, e.transitionDuration);
+  const t = pt(), s = t || !e.animationEffect ? 0 : Math.max(0, e.animationDuration), i = t || !e.transitionEffect ? 0 : Math.max(0, e.transitionDuration);
   return {
     animationEffect: s ? e.animationEffect : !1,
     animationDuration: s,
@@ -826,14 +826,14 @@ function Oe(e, t) {
 function Ae(e, t) {
   e.dataset.transition = $(t).transitionEffect || "none";
 }
-const De = /^(top|center|bottom)-(left|center|right)$/, st = { top: 0, left: 0, center: 0.5, bottom: 1, right: 1 };
+const De = /^(top|center|bottom)-(left|center|right)$/, it = { top: 0, left: 0, center: 0.5, bottom: 1, right: 1 };
 function ke(e, t, s) {
   const i = typeof s == "string" ? De.exec(s) : null;
   if (i) {
-    const u = e.getBoundingClientRect(), g = u.left + u.width * st[i[2]], M = u.top + u.height * st[i[1]];
-    return new DOMRect(g, M, 0, 0);
+    const u = e.getBoundingClientRect(), g = u.left + u.width * it[i[2]], L = u.top + u.height * it[i[1]];
+    return new DOMRect(g, L, 0, 0);
   }
-  const n = (u) => u?.getClientRects().length ? u : null, o = s !== "trigger" && n(ut(s)) || n(t.$trigger);
+  const n = (u) => u?.getClientRects().length ? u : null, o = s !== "trigger" && n(dt(s)) || n(t.$trigger);
   if (!o) return null;
   const r = o.getBoundingClientRect(), l = (o.ownerDocument === e.ownerDocument ? null : o.ownerDocument.defaultView?.frameElement)?.getBoundingClientRect();
   return l ? new DOMRect(r.x + l.x, r.y + l.y, r.width, r.height) : r;
@@ -848,13 +848,13 @@ function Re(e, t, s) {
     transform: `translate3d(${a}px, ${l}px, 0) scale(${r})`,
     opacity: s.zoomOpacity ? "0.2" : "1",
     transitionDuration: "0ms"
-  }), dt(() => {
+  }), ft(() => {
     Object.assign(i.style, { transform: "", opacity: "", transitionDuration: "" });
   });
 }
-function gt(e) {
+function bt(e) {
   const t = F(R, e);
-  return Nt() && t.mobile ? F(t, t.mobile) : t;
+  return Zt() && t.mobile ? F(t, t.mobile) : t;
 }
 function A(e, t) {
   return e ? e === !0 ? { ...t } : { ...t, ...e } : null;
@@ -879,7 +879,7 @@ function He(e, t, s) {
       a >= 0 && C.splice(a, 1);
     }
   };
-  return C.push(r), gt(t).hash && ze(i, n), r;
+  return C.push(r), bt(t).hash && ze(i, n), r;
 }
 function Pe() {
   for (const e of [...C]) e.destroy();
@@ -939,21 +939,21 @@ function Ue(e, t, s) {
       if (e.consumeGesture()) return;
       const a = r.target, l = a.closest("[data-glare-more]");
       if (l) {
-        const L = l.closest(".glare-toolbar"), B = !L?.classList.contains("glare-toolbar--expanded");
-        L?.classList.toggle("glare-toolbar--expanded", B), l.setAttribute("aria-expanded", String(B));
+        const M = l.closest(".glare-toolbar"), B = !M?.classList.contains("glare-toolbar--expanded");
+        M?.classList.toggle("glare-toolbar--expanded", B), l.setAttribute("aria-expanded", String(B));
         return;
       }
-      yt(t);
+      xt(t);
       const u = a.closest("[data-glare-custom]");
       if (u) return Ve(e, u.dataset.glareCustom, r);
-      const g = Ne.find(([L]) => a.closest(L));
+      const g = Ne.find(([M]) => a.closest(M));
       if (g) return g[1](e);
       if (a.closest(".glare-button")) return;
-      const M = D(e, a, "click");
-      if (M) {
-        if (!bt(e, D(e, a, "dblclick"), r))
-          return k(e, M, r);
-        n(), i = setTimeout(() => k(e, M, r), We);
+      const L = D(e, a, "click");
+      if (L) {
+        if (!yt(e, D(e, a, "dblclick"), r))
+          return k(e, L, r);
+        n(), i = setTimeout(() => k(e, L, r), We);
       }
     }),
     f(t, "dblclick", (r) => {
@@ -986,11 +986,11 @@ function D(e, t, s) {
   if (!(i.modal || !t.closest(je)))
     return s === "click" ? i.clickSlide : i.dblclickSlide;
 }
-function bt(e, t, s) {
+function yt(e, t, s) {
   return !t || !e.current ? !1 : typeof t == "function" ? t(e.current, s) : t;
 }
 function k(e, t, s) {
-  switch (bt(e, t, s)) {
+  switch (yt(e, t, s)) {
     case "close":
       return e.close();
     case "next":
@@ -1007,7 +1007,7 @@ function k(e, t, s) {
 }
 function Xe(e, t) {
   if (b.top() !== e) return;
-  if (t.key === "Escape" && yt(e.$refs?.container ?? null)) {
+  if (t.key === "Escape" && xt(e.$refs?.container ?? null)) {
     t.preventDefault();
     return;
   }
@@ -1030,7 +1030,7 @@ function Xe(e, t) {
         return e.fullscreen?.toggle();
     }
 }
-function yt(e) {
+function xt(e) {
   const t = e?.querySelector(".glare-toolbar--expanded");
   return t ? (t.classList.remove("glare-toolbar--expanded"), t.querySelector("[data-glare-more]")?.setAttribute("aria-expanded", "false"), !0) : !1;
 }
@@ -1043,33 +1043,33 @@ function Ge(e, t) {
   const i = s[0], n = s[s.length - 1];
   t.shiftKey && document.activeElement === i ? (t.preventDefault(), n.focus()) : !t.shiftKey && document.activeElement === n && (t.preventDefault(), i.focus());
 }
-const Ye = 1200, it = 16 / 9;
+const Ye = 1200, nt = 16 / 9;
 function Ke(e, t, s) {
   if (t && s) return t / s;
-  const i = String(e.ratio || it).replace(":", "/"), [n, o = "1"] = i.split("/").map((l) => l.trim()), r = parseFloat(n), a = parseFloat(o);
-  return r > 0 && a > 0 ? r / a : it;
+  const i = String(e.ratio || nt).replace(":", "/"), [n, o = "1"] = i.split("/").map((l) => l.trim()), r = parseFloat(n), a = parseFloat(o);
+  return r > 0 && a > 0 ? r / a : nt;
 }
-function nt(e, t, s) {
+function ot(e, t, s) {
   if (!e) return 0;
   if (typeof e == "number") return e;
   const i = e.trim(), n = parseFloat(i);
   return n > 0 ? i.endsWith("%") ? t * n / 100 : i.endsWith("vw") || i.endsWith("vh") ? s * n / 100 : n : 0;
 }
-function ot(e, t) {
+function rt(e, t) {
   const s = t.parentElement;
   if (!s) return;
   const i = getComputedStyle(s), n = s.clientWidth - parseFloat(i.paddingLeft) - parseFloat(i.paddingRight), o = s.clientHeight - parseFloat(i.paddingTop) - parseFloat(i.paddingBottom);
   if (!(n > 0 && o > 0)) return;
   const r = e.width !== void 0 && e.height !== void 0;
-  let a = r ? nt(e.width, n, innerWidth) : n, l = r ? nt(e.height, o, innerHeight) : o;
+  let a = r ? ot(e.width, n, innerWidth) : n, l = r ? ot(e.height, o, innerHeight) : o;
   const u = Ke(e, r ? a : void 0, r ? l : void 0), g = Math.min(1, n / a, o / l);
   a *= g, l *= g, l > a / u ? l = a / u : a > l * u && (a = l * u), t.style.width = `${a}px`, t.style.height = `${l}px`, t.style.aspectRatio = String(u);
 }
 function Qe(e, t) {
-  if (ot(e, t), typeof ResizeObserver > "u" || !t.parentElement) return;
+  if (rt(e, t), typeof ResizeObserver > "u" || !t.parentElement) return;
   const s = new ResizeObserver(() => {
     if (!t.isConnected) return s.disconnect();
-    ot(e, t);
+    rt(e, t);
   });
   s.observe(t.parentElement);
 }
@@ -1079,7 +1079,7 @@ const Je = (e, t, s) => new Promise((i, n) => {
     e.$image = o, e.contentWidth = o.naturalWidth, e.contentHeight = o.naturalHeight, t.appendChild(o), i();
   }, o.onerror = () => n(new Error(`Failed to load image: ${e.src}`)), o.src = e.src;
 }), ts = (e, t, s, i) => {
-  const n = e.format || s.video.format || Ft(e.src);
+  const n = e.format || s.video.format || Ht(e.src);
   t.innerHTML = x(s.video.tpl, {
     ...i,
     src: e.src,
@@ -1089,7 +1089,7 @@ const Je = (e, t, s) => new Promise((i, n) => {
   const o = t.querySelector("video");
   o && (e.autoStart ?? s.video.autoStart) && o.play().catch(() => {
   });
-}, rt = (e, t, s) => new Promise((i) => {
+}, at = (e, t, s) => new Promise((i) => {
   const n = s.iframe, o = m("div", "glare-iframe-wrap", n.tpl), r = o.querySelector("iframe");
   if (!r) throw new Error("Iframe template must contain an <iframe>");
   for (const [a, l] of Object.entries(n.attr)) r.setAttribute(a, l);
@@ -1109,7 +1109,7 @@ const Je = (e, t, s) => new Promise((i, n) => {
   t.innerHTML = await i.text();
 }, is = (e, t) => {
   e.content && typeof e.content == "object" ? t.appendChild(e.content) : t.innerHTML = e.html ?? e.content ?? e.src;
-}, ns = { image: Je, video: ts, embed: rt, iframe: rt, inline: es, ajax: ss, html: is };
+}, ns = { image: Je, video: ts, embed: at, iframe: at, inline: es, ajax: ss, html: is };
 async function os(e, t, s, i) {
   t.innerHTML = "", t.className = `glare-content glare-content--${e.type}`, await ns[e.type](e, t, s, i), e.isLoaded = !0;
 }
@@ -1127,7 +1127,7 @@ function ls(e) {
 }
 const y = class y {
   constructor(t, s = {}, i = 0, n = "") {
-    this.id = ++as, this.current = null, this.currIndex = 0, this.prevIndex = 0, this.isActive = !1, this.isClosing = !1, this.isIdle = !1, this.$refs = null, this.hash = null, this.gestures = null, this.wheel = null, this.cleanups = [], this.captionTracker = null, this.previouslyFocused = null, this.direction = 1, this.opts = gt(s), this.dict = xt(this.opts), this.group = Pt(t, this.opts), this.galleryName = n, this.currIndex = this.clampIndex(i), this.zoom = new ue({
+    this.id = ++as, this.current = null, this.currIndex = 0, this.prevIndex = 0, this.isActive = !1, this.isClosing = !1, this.isIdle = !1, this.$refs = null, this.hash = null, this.gestures = null, this.wheel = null, this.cleanups = [], this.captionTracker = null, this.previouslyFocused = null, this.direction = 1, this.opts = bt(s), this.dict = vt(this.opts), this.group = zt(t, this.opts), this.galleryName = n, this.currIndex = this.clampIndex(i), this.zoom = new ue({
       image: () => this.current?.$image ?? null,
       stage: () => this.$refs?.stage ?? null,
       onChange: (o) => this.syncZoomState(o)
@@ -1137,8 +1137,8 @@ const y = class y {
     if (this.isActive) return this.jumpTo(t);
     if (!this.group.length) return;
     this.opts.closeExisting && y.close(!0), this.currIndex = this.clampIndex(t), this.current = this.group[this.currIndex], this.previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null, this.emit("onInit");
-    const s = Zt(this.opts, this.dict, this.id, this.group.length), { container: i } = s;
-    this.$refs = s, Oe(i, this.opts), this.syncChrome(), this.resolveParent().appendChild(i), this.captionTracker = Wt(s), this.cleanups.push(() => this.captionTracker?.destroy()), this.isActive = !0, b.add(this), this.opts.hideScrollbar && V(!0), this.emit("onActivate"), this.emitSlide("beforeShow", this.current), dt(() => {
+    const s = jt(this.opts, this.dict, this.id, this.group.length), { container: i } = s;
+    i.classList.add("glare-is-loading"), this.$refs = s, Oe(i, this.opts), this.syncChrome(), this.resolveParent().appendChild(i), this.captionTracker = Ut(s), this.cleanups.push(() => this.captionTracker?.destroy()), this.isActive = !0, b.add(this), this.opts.hideScrollbar && V(!0), this.emit("onActivate"), this.emitSlide("beforeShow", this.current), ft(() => {
       this.isActive && (i.classList.add("glare-is-open"), this.showSlide(this.currIndex, !0), this.cleanups.push(Ue(this, i, () => this.onActivity())), this.startModules(s), this.opts.autoFocus && this.focus(), this.idle.reset());
     });
   }
@@ -1147,7 +1147,7 @@ const y = class y {
     this.isClosing = !0, this.slideshow?.stop(), this.idle.stop();
     const { container: t, bg: s } = this.$refs, i = $(this.opts).animationDuration;
     if (i === 0) return this.teardown();
-    t.classList.remove("glare-is-open"), t.classList.add("glare-is-closing"), _t(s ?? t, i, () => this.teardown());
+    t.classList.remove("glare-is-open"), t.classList.add("glare-is-closing"), Nt(s ?? t, i, () => this.teardown());
   }
   next() {
     this.jumpTo(this.currIndex + 1);
@@ -1158,7 +1158,7 @@ const y = class y {
   jumpTo(t) {
     if (!this.isActive || this.isClosing) return;
     const s = this.group.length, i = this.opts.loop ? (t % s + s) % s : E(t, 0, s - 1);
-    i !== this.currIndex && (this.direction = t > this.currIndex ? 1 : -1, this.prevIndex = this.currIndex, this.currIndex = i, this.zoom.reset(), this.current = this.group[i], this.syncChrome(), this.showSlide(i, !1), this.thumbs?.focus(i), this.hash?.update(i), this.slideshow?.onIndexChange(), this.emitSlide("onUpdate", this.current));
+    i !== this.currIndex && (this.direction = t > this.currIndex ? 1 : -1, this.prevIndex = this.currIndex, this.currIndex = i, this.zoom.reset(), this.current = this.group[i], this.$refs?.container.classList.add("glare-is-loading"), this.syncChrome(), this.showSlide(i, !1), this.thumbs?.focus(i), this.hash?.update(i), this.slideshow?.onIndexChange(), this.emitSlide("onUpdate", this.current));
   }
   toggleZoom(t) {
     this.current?.type === "image" && (this.zoom.isZoomed ? this.zoom.toFit() : this.zoom.toActual(t));
@@ -1179,8 +1179,8 @@ const y = class y {
   async showSlide(t, s) {
     const i = this.group[t];
     if (!this.$refs || !i) return;
-    const { container: n, stage: o } = this.$refs, r = Ut(o, i, this.opts);
-    Jt(this.opts, i) && Gt(r, this.opts, this.dict), Yt(o, this.opts, this.dict), this.emitSlide("beforeLoad", i), this.opts.image.preload && rs(this.group, t);
+    const { container: n, stage: o } = this.$refs, r = Vt(o, i, this.opts);
+    Jt(this.opts, i) && Gt(r, this.opts, this.dict), s || X(o, r, 0, this.direction), Yt(o, this.opts, this.dict), this.emitSlide("beforeLoad", i), this.opts.image.preload && rs(this.group, t);
     let a = !1;
     try {
       await os(i, i.$content, this.opts, this.dict);
@@ -1188,7 +1188,7 @@ const y = class y {
       a = !0, Qt(i, l, this.opts, this.dict), this.emitSlide("onError", i), this.opts.onError || console.warn("[glare]", l);
     }
     if (!this.isActive || this.currIndex !== t) return r.remove();
-    a || this.emitSlide("afterLoad", i), Kt(o), s || Ae(n, this.opts), Vt(r, s, this.direction), this.captionTracker?.follow(r), Xt(o, r, $(this.opts).transitionDuration, this.direction), this.syncZoomState(this.zoom.isZoomed), !a && (s && Re(n, i, this.opts), this.emitSlide("afterShow", i));
+    a || this.emitSlide("afterLoad", i), Kt(o), s || Ae(n, this.opts), Xt(r, s, this.direction), this.captionTracker?.follow(r), n.classList.remove("glare-is-loading"), X(o, r, $(this.opts).transitionDuration, this.direction), this.syncZoomState(this.zoom.isZoomed), !a && (s && Re(n, i, this.opts), this.emitSlide("afterShow", i));
   }
   syncChrome() {
     !this.$refs || !this.current || (te(this.$refs, this.opts, this.dict, this.current, this.group.length, this.captionFor(this.current)), this.syncZoomState(this.zoom.isZoomed));
@@ -1205,12 +1205,12 @@ const y = class y {
     return (typeof t == "string" ? document.querySelector(t) : t) ?? document.body;
   }
   startModules({ container: t, stage: s, bg: i }) {
-    const n = this.opts, o = A(n.thumbs, lt);
+    const n = this.opts, o = A(n.thumbs, ct);
     o && (this.thumbs = new Se(this, t, o));
     const r = A(n.slideshow, N);
     r && (this.slideshow = new we(this, t, r));
-    const a = A(n.fullscreen, ct);
-    a && pt() && (this.fullscreen = new ce(this, t, a)), n.hash && this.galleryName && (this.hash = new ve(this, this.galleryName)), n.wheel && (this.wheel = new $e(s, {
+    const a = A(n.fullscreen, ht);
+    a && mt() && (this.fullscreen = new ce(this, t, a)), n.hash && this.galleryName && (this.hash = new ve(this, this.galleryName)), n.wheel && (this.wheel = new $e(s, {
       mode: n.wheel,
       current: () => this.current,
       isZoomed: () => this.zoom.isZoomed,