@orangelogic/design-system 2.91.0 → 2.93.0

package/library/chunks/{image.DbfpMKMc.js → image.C3LupRuN.js}

@@ -1,12 +1,12 @@
 import { x as T, i as se, E as Le } from "./lit-element.jLBm65_O.js";
-import { C as Re, n as m } from "./lib-cortex-element.CVMmyPMC.js";
+import { C as Re, n as d } from "./lib-cortex-element.CVMmyPMC.js";
 import { r as H } from "./state.CSDxrqLd.js";
 import { e as X } from "./query.BBf1UFkC.js";
 import { E as He, b as de, a as $e } from "./index.Cpamj0jB.js";
 import { c as We } from "./component.styles.CRO4Odto.js";
 import { c as Ae } from "./custom-element.L4WJXn1j.js";
 import { d as Oe } from "./debounce.DaHuiSGU.js";
-import { L as Me } from "./i18n.CgwQHLcP.js";
+import { L as Me } from "./i18n.W6czbRms.js";
 import { w as q } from "./watch.BCJD77bD.js";
 import { e as j } from "./class-map.BiVq-cVR.js";
 import { o as De } from "./if-defined.BRoBj_Rp.js";
@@ -17,14 +17,14 @@ import Be from "../components/popup.js";
 import Ze from "../components/resize-observer.js";
 import Ie from "../components/skeleton.js";
 import Ne from "../components/space.js";
-var Pe = /* @__PURE__ */ ((e) => (e.Bottom = "bottom", e.BottomCenter = "bottom-center", e.BottomLeft = "bottom-left", e.BottomRight = "bottom-right", e.CenterCenter = "center-center", e.CenterLeft = "center-left", e.CenterRight = "center-right", e.Left = "left", e.Right = "right", e.Top = "top", e.TopCenter = "top-center", e.TopLeft = "top-left", e.TopRight = "top-right", e))(Pe || {}), Y = /* @__PURE__ */ ((e) => (e.Jump = "jump", e.None = "none", e.TextReveal = "text-reveal", e.Zoom = "zoom", e))(Y || {}), ge = /* @__PURE__ */ ((e) => (e.PopOut = "pop-out", e.WithinBorders = "within-borders", e))(ge || {}), ue = /* @__PURE__ */ ((e) => (e.Fade = "fade", e.Slide = "slide", e))(ue || {}), ne = /* @__PURE__ */ ((e) => (e.Auto = "auto", e.Fixed = "fixed", e))(ne || {}), Ve = Object.defineProperty, E = (e, t, o, h) => {
-  for (var r = void 0, g = e.length - 1, p; g >= 0; g--)
-    (p = e[g]) && (r = p(t, o, r) || r);
+var Pe = /* @__PURE__ */ ((e) => (e.Bottom = "bottom", e.BottomCenter = "bottom-center", e.BottomLeft = "bottom-left", e.BottomRight = "bottom-right", e.CenterCenter = "center-center", e.CenterLeft = "center-left", e.CenterRight = "center-right", e.Left = "left", e.Right = "right", e.Top = "top", e.TopCenter = "top-center", e.TopLeft = "top-left", e.TopRight = "top-right", e))(Pe || {}), Y = /* @__PURE__ */ ((e) => (e.Jump = "jump", e.None = "none", e.TextReveal = "text-reveal", e.Zoom = "zoom", e))(Y || {}), ge = /* @__PURE__ */ ((e) => (e.PopOut = "pop-out", e.WithinBorders = "within-borders", e))(ge || {}), pe = /* @__PURE__ */ ((e) => (e.Fade = "fade", e.Slide = "slide", e))(pe || {}), ne = /* @__PURE__ */ ((e) => (e.Auto = "auto", e.Fixed = "fixed", e))(ne || {}), Ve = Object.defineProperty, E = (e, t, o, h) => {
+  for (var r = void 0, g = e.length - 1, u; g >= 0; g--)
+    (u = e[g]) && (r = u(t, o, r) || r);
   return r && Ve(t, o, r), r;
 };
 class S extends Re {
   constructor() {
-    super(...arguments), this.hasEvent = !1, this.easing = He.Linear, this.highlightBorder = !1, this.highlightColorOverlay = !1, this.highlightDropShadow = !1, this.highlightBackground = !1, this.highlightOpacity = !1, this.effect = Y.None, this.textRevealStyle = ue.Slide, this.zoomStyle = ge.WithinBorders, this.hasSlotContent = !1, this.isCustomSlot = !1, this.isHovering = !1;
+    super(...arguments), this.hasEvent = !1, this.easing = He.Linear, this.highlightBorder = !1, this.highlightColorOverlay = !1, this.highlightDropShadow = !1, this.highlightBackground = !1, this.highlightOpacity = !1, this.effect = Y.None, this.textRevealStyle = pe.Slide, this.zoomStyle = ge.WithinBorders, this.hasSlotContent = !1, this.isCustomSlot = !1, this.isHovering = !1;
   }
   get easeCSSVariable() {
     return de[this.easing] || de.linear;
@@ -58,46 +58,46 @@ E([
   X("slot")
 ], S.prototype, "slotEl");
 E([
-  m({ attribute: "has-event", reflect: !0, type: Boolean })
+  d({ attribute: "has-event", reflect: !0, type: Boolean })
 ], S.prototype, "hasEvent");
 E([
-  m({ reflect: !0, type: String })
+  d({ reflect: !0, type: String })
 ], S.prototype, "easing");
 E([
-  m({ attribute: "highlight-border", reflect: !0, type: Boolean })
+  d({ attribute: "highlight-border", reflect: !0, type: Boolean })
 ], S.prototype, "highlightBorder");
 E([
-  m({
+  d({
     attribute: "highlight-color-overlay",
     reflect: !0,
     type: Boolean
   })
 ], S.prototype, "highlightColorOverlay");
 E([
-  m({
+  d({
     attribute: "highlight-drop-shadow",
     reflect: !0,
     type: Boolean
   })
 ], S.prototype, "highlightDropShadow");
 E([
-  m({ attribute: "highlight-background", reflect: !0, type: Boolean })
+  d({ attribute: "highlight-background", reflect: !0, type: Boolean })
 ], S.prototype, "highlightBackground");
 E([
-  m({ attribute: "highlight-opacity", reflect: !0, type: Boolean })
+  d({ attribute: "highlight-opacity", reflect: !0, type: Boolean })
 ], S.prototype, "highlightOpacity");
 E([
-  m({ attribute: "effect", reflect: !0, type: String })
+  d({ attribute: "effect", reflect: !0, type: String })
 ], S.prototype, "effect");
 E([
-  m({
+  d({
     attribute: "text-reveal-style",
     reflect: !0,
     type: String
   })
 ], S.prototype, "textRevealStyle");
 E([
-  m({
+  d({
     attribute: "zoom-style",
     reflect: !0,
     type: String
@@ -113,13 +113,13 @@ E([
   H()
 ], S.prototype, "isHovering");
 var Fe = Object.defineProperty, O = (e, t, o, h) => {
-  for (var r = void 0, g = e.length - 1, p; g >= 0; g--)
-    (p = e[g]) && (r = p(t, o, r) || r);
+  for (var r = void 0, g = e.length - 1, u; g >= 0; g--)
+    (u = e[g]) && (r = u(t, o, r) || r);
   return r && Fe(t, o, r), r;
 };
 class A extends S {
   constructor() {
-    super(), this.width = "", this.height = "", this.resizable = !1, this.heightMode = ne.Fixed, this.noLimit = !1, this.isResizeActive = !1, this.isResizing = !1, this.resizeSize = {
+    super(), this.width = "", this.height = "", this.resizable = !1, this.heightMode = ne.Fixed, this.noLimit = !1, this.parentContainer = null, this.isResizeActive = !1, this.isResizing = !1, this.resizeSize = {
       height: 0,
       width: 0
     }, this.maxWidth = 0, this.maxHeight = 0, this.minWidth = 0, this.minHeight = 0, this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -148,13 +148,13 @@ class A extends S {
     );
   }
   handleResizeDragging(t, o = !1, h = !1) {
-    t.preventDefault(), t.stopPropagation(), this.maxWidth = Number.parseInt(getComputedStyle(this).getPropertyValue("--max-width")) || this.parentElement?.clientWidth || 1 / 0, this.maxHeight = Number.parseInt(
+    t.preventDefault(), t.stopPropagation(), this.maxWidth = Number.parseInt(getComputedStyle(this).getPropertyValue("--max-width")) || this.parentContainer?.clientWidth || this.parentElement?.clientWidth || 1 / 0, this.maxHeight = Number.parseInt(
       getComputedStyle(this).getPropertyValue("--max-height")
     ) || 1 / 0, this.minWidth = Number.parseInt(getComputedStyle(this).getPropertyValue("--min-width")) || 40, this.minHeight = Number.parseInt(
       getComputedStyle(this).getPropertyValue("--min-height")
     ) || 40, this.isResizing = !0;
     const r = { x: t.pageX, y: t.pageY };
-    let g = 0, p = 0;
+    let g = 0, u = 0;
     const C = {
       height: this.containingElement?.clientHeight || 0,
       width: this.containingElement?.clientWidth || 0
@@ -173,8 +173,8 @@ class A extends S {
       }
     });
     const Z = ($) => {
-      g = Number(C.width) + (o ? r.x - $.pageX : $.pageX - r.x), p = Number(C.height) + (h ? r.y - $.pageY : $.pageY - r.y), this.keepRatio && (p >= g / this.ratio && (p = g / this.ratio), g >= p * this.ratio && (g = p * this.ratio));
-      let f = g, v = p;
+      g = Number(C.width) + (o ? r.x - $.pageX : $.pageX - r.x), u = Number(C.height) + (h ? r.y - $.pageY : $.pageY - r.y), this.keepRatio && (u >= g / this.ratio && (u = g / this.ratio), g >= u * this.ratio && (g = u * this.ratio));
+      let f = g, v = u;
       if (this.keepRatio) {
         const M = this.maxWidth ?? 1 / 0, y = this.maxHeight ?? 1 / 0;
         let R = Math.min(f, M), k = R / this.ratio;
@@ -186,8 +186,8 @@ class A extends S {
         width: Math.round(f)
       }, this.keepRatio ? (this.minHeight && this.resizeSize.height < this.minHeight && (this.resizeSize.height = this.minHeight, this.resizeSize.width = Math.round(this.minHeight * this.ratio)), this.minWidth && this.resizeSize.width < this.minWidth && (this.resizeSize.width = this.minWidth, this.resizeSize.height = Math.round(this.minWidth / this.ratio))) : (this.minHeight && this.resizeSize.height < this.minHeight && (this.resizeSize.height = this.minHeight), this.minWidth && this.resizeSize.width < this.minWidth && (this.resizeSize.width = this.minWidth));
     }, I = ($) => {
-      if (g > 0 && p > 0) {
-        let f = g, v = p;
+      if (g > 0 && u > 0) {
+        let f = g, v = u;
         if (this.keepRatio) {
           const M = this.maxWidth ?? 1 / 0, y = this.maxHeight ?? 1 / 0;
           let R = Math.min(f, M), k = R / this.ratio;
@@ -236,20 +236,23 @@ O([
   X('[part="base"]')
 ], A.prototype, "containingElement");
 O([
-  m({ reflect: !0, type: String })
+  d({ reflect: !0, type: String })
 ], A.prototype, "width");
 O([
-  m({ reflect: !0, type: String })
+  d({ reflect: !0, type: String })
 ], A.prototype, "height");
 O([
-  m({ type: Boolean })
+  d({ type: Boolean })
 ], A.prototype, "resizable");
 O([
-  m({ attribute: "height-mode", reflect: !0, type: String })
+  d({ attribute: "height-mode", reflect: !0, type: String })
 ], A.prototype, "heightMode");
 O([
-  m({ attribute: "no-limit", reflect: !0, type: Boolean })
+  d({ attribute: "no-limit", reflect: !0, type: Boolean })
 ], A.prototype, "noLimit");
+O([
+  d({ attribute: !1, type: Object })
+], A.prototype, "parentContainer");
 O([
   H()
 ], A.prototype, "isResizeActive");
@@ -275,10 +278,10 @@ var B = Object.assign || function(e) {
   return NodeList.prototype.isPrototypeOf(t);
 }, ee = function(t) {
   return t && t.nodeType === 1;
-}, me = function(t) {
+}, ce = function(t) {
   var o = t.currentSrc || t.src;
   return o.substr(-4).toLowerCase() === ".svg";
-}, ce = function(t) {
+}, me = function(t) {
   try {
     return Array.isArray(t) ? t.filter(Q) : Ue(t) ? [].slice.call(t).filter(Q) : ee(t) ? [t].filter(Q) : typeof t == "string" ? [].slice.call(document.querySelectorAll(t)).filter(Q) : [];
   } catch {
@@ -290,8 +293,8 @@ See: https://github.com/francoischalifour/medium-zoom`);
   var o = document.createElement("div");
   return o.classList.add("medium-zoom-overlay"), o.style.background = t, o;
 }, qe = function(t) {
-  var o = t.getBoundingClientRect(), h = o.top, r = o.left, g = o.width, p = o.height, C = t.cloneNode(), Z = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, I = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
-  return C.removeAttribute("id"), C.style.position = "absolute", C.style.top = h + Z + "px", C.style.left = r + I + "px", C.style.width = g + "px", C.style.height = p + "px", C.style.transform = "", C;
+  var o = t.getBoundingClientRect(), h = o.top, r = o.left, g = o.width, u = o.height, C = t.cloneNode(), Z = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, I = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+  return C.removeAttribute("id"), C.style.position = "absolute", C.style.top = h + Z + "px", C.style.left = r + I + "px", C.style.width = g + "px", C.style.height = u + "px", C.style.transform = "", C;
 }, F = function(t, o) {
   var h = B({
     bubbles: !1,
@@ -317,30 +320,30 @@ See: https://github.com/francoischalifour/medium-zoom`);
   }, g = function() {
     if (!(N || !i.original)) {
       var a = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-      Math.abs(he - a) > d.scrollOffset && setTimeout(y, 150);
+      Math.abs(he - a) > c.scrollOffset && setTimeout(y, 150);
     }
-  }, p = function(a) {
+  }, u = function(a) {
     var n = a.key || a.keyCode;
     (n === "Escape" || n === "Esc" || n === 27) && y();
   }, C = function() {
     var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a;
-    if (a.background && (J.style.background = a.background), a.container && a.container instanceof Object && (n.container = B({}, d.container, a.container)), a.template) {
-      var u = ee(a.template) ? a.template : document.querySelector(a.template);
-      n.template = u;
+    if (a.background && (J.style.background = a.background), a.container && a.container instanceof Object && (n.container = B({}, c.container, a.container)), a.template) {
+      var p = ee(a.template) ? a.template : document.querySelector(a.template);
+      n.template = p;
     }
-    return d = B({}, d, n), L.forEach(function(z) {
+    return c = B({}, c, n), L.forEach(function(z) {
       z.dispatchEvent(F("medium-zoom:update", {
         detail: { zoom: b }
       }));
     }), b;
   }, Z = function() {
     var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    return e(B({}, d, a));
+    return e(B({}, c, a));
   }, I = function() {
-    for (var a = arguments.length, n = Array(a), u = 0; u < a; u++)
-      n[u] = arguments[u];
+    for (var a = arguments.length, n = Array(a), p = 0; p < a; p++)
+      n[p] = arguments[p];
     var z = n.reduce(function(s, w) {
-      return [].concat(s, ce(w));
+      return [].concat(s, me(w));
     }, []);
     return z.filter(function(s) {
       return L.indexOf(s) === -1;
@@ -353,11 +356,11 @@ See: https://github.com/francoischalifour/medium-zoom`);
       });
     }), b;
   }, $ = function() {
-    for (var a = arguments.length, n = Array(a), u = 0; u < a; u++)
-      n[u] = arguments[u];
+    for (var a = arguments.length, n = Array(a), p = 0; p < a; p++)
+      n[p] = arguments[p];
     i.zoomed && y();
     var z = n.length > 0 ? n.reduce(function(s, w) {
-      return [].concat(s, ce(w));
+      return [].concat(s, me(w));
     }, []) : L;
     return z.forEach(function(s) {
       s.classList.remove("medium-zoom-image"), s.dispatchEvent(F("medium-zoom:detach", {
@@ -367,19 +370,19 @@ See: https://github.com/francoischalifour/medium-zoom`);
       return z.indexOf(s) === -1;
     }), b;
   }, f = function(a, n) {
-    var u = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    var p = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     return L.forEach(function(z) {
-      z.addEventListener("medium-zoom:" + a, n, u);
-    }), K.push({ type: "medium-zoom:" + a, listener: n, options: u }), b;
+      z.addEventListener("medium-zoom:" + a, n, p);
+    }), K.push({ type: "medium-zoom:" + a, listener: n, options: p }), b;
   }, v = function(a, n) {
-    var u = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    var p = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     return L.forEach(function(z) {
-      z.removeEventListener("medium-zoom:" + a, n, u);
+      z.removeEventListener("medium-zoom:" + a, n, p);
     }), K = K.filter(function(z) {
       return !(z.type === "medium-zoom:" + a && z.listener.toString() === n.toString());
     }), b;
   }, M = function() {
-    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target, u = function() {
+    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target, p = function() {
       var s = {
         width: document.documentElement.clientWidth,
         height: document.documentElement.clientHeight,
@@ -388,11 +391,11 @@ See: https://github.com/francoischalifour/medium-zoom`);
         right: 0,
         bottom: 0
       }, w = void 0, W = void 0;
-      if (d.container)
-        if (d.container instanceof Object)
-          s = B({}, s, d.container), w = s.width - s.left - s.right - d.margin * 2, W = s.height - s.top - s.bottom - d.margin * 2;
+      if (c.container)
+        if (c.container instanceof Object)
+          s = B({}, s, c.container), w = s.width - s.left - s.right - c.margin * 2, W = s.height - s.top - s.bottom - c.margin * 2;
         else {
-          var P = ee(d.container) ? d.container : document.querySelector(d.container), D = P.getBoundingClientRect(), ie = D.width, fe = D.height, ve = D.left, ze = D.top;
+          var P = ee(c.container) ? c.container : document.querySelector(c.container), D = P.getBoundingClientRect(), ie = D.width, fe = D.height, ve = D.left, ze = D.top;
           s = B({}, s, {
             width: ie,
             height: fe,
@@ -400,8 +403,8 @@ See: https://github.com/francoischalifour/medium-zoom`);
             top: ze
           });
         }
-      w = w || s.width - d.margin * 2, W = W || s.height - d.margin * 2;
-      var _ = i.zoomedHd || i.original, ye = me(_) ? w : _.naturalWidth || w, be = me(_) ? W : _.naturalHeight || W, G = _.getBoundingClientRect(), xe = G.top, we = G.left, oe = G.width, re = G.height, Se = Math.min(Math.max(oe, ye), w) / oe, Ee = Math.min(Math.max(re, be), W) / re, ae = Math.min(Se, Ee), Ce = (-we + (w - oe) / 2 + d.margin + s.left) / ae, ke = (-xe + (W - re) / 2 + d.margin + s.top) / ae, le = "scale(" + ae + ") translate3d(" + Ce + "px, " + ke + "px, 0)";
+      w = w || s.width - c.margin * 2, W = W || s.height - c.margin * 2;
+      var _ = i.zoomedHd || i.original, ye = ce(_) ? w : _.naturalWidth || w, be = ce(_) ? W : _.naturalHeight || W, G = _.getBoundingClientRect(), xe = G.top, we = G.left, oe = G.width, re = G.height, Se = Math.min(Math.max(oe, ye), w) / oe, Ee = Math.min(Math.max(re, be), W) / re, ae = Math.min(Se, Ee), Ce = (-we + (w - oe) / 2 + c.margin + s.left) / ae, ke = (-xe + (W - re) / 2 + c.margin + s.top) / ae, le = "scale(" + ae + ") translate3d(" + Ce + "px, " + ke + "px, 0)";
       i.zoomed.style.transform = le, i.zoomedHd && (i.zoomedHd.style.transform = le);
     };
     return new h(function(z) {
@@ -429,26 +432,26 @@ See: https://github.com/francoischalifour/medium-zoom`);
       }
       if (i.original.dispatchEvent(F("medium-zoom:open", {
         detail: { zoom: b }
-      })), he = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, N = !0, i.zoomed = qe(i.original), document.body.appendChild(J), d.template) {
-        var W = ee(d.template) ? d.template : document.querySelector(d.template);
+      })), he = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, N = !0, i.zoomed = qe(i.original), document.body.appendChild(J), c.template) {
+        var W = ee(c.template) ? c.template : document.querySelector(c.template);
         i.template = document.createElement("div"), i.template.appendChild(W.content.cloneNode(!0)), document.body.appendChild(i.template);
       }
       if (i.original.parentElement && i.original.parentElement.tagName === "PICTURE" && i.original.currentSrc && (i.zoomed.src = i.original.currentSrc), document.body.appendChild(i.zoomed), window.requestAnimationFrame(function() {
         document.body.classList.add("medium-zoom--opened");
       }), i.original.classList.add("medium-zoom-image--hidden"), i.zoomed.classList.add("medium-zoom-image--opened"), i.zoomed.addEventListener("click", y), i.zoomed.addEventListener("transitionend", s), i.original.getAttribute("data-zoom-src")) {
         i.zoomedHd = i.zoomed.cloneNode(), i.zoomedHd.removeAttribute("srcset"), i.zoomedHd.removeAttribute("sizes"), i.zoomedHd.removeAttribute("loading"), i.zoomedHd.src = i.zoomed.getAttribute("data-zoom-src"), i.zoomedHd.onerror = function() {
-          clearInterval(P), console.warn("Unable to reach the zoom image target " + i.zoomedHd.src), i.zoomedHd = null, u();
+          clearInterval(P), console.warn("Unable to reach the zoom image target " + i.zoomedHd.src), i.zoomedHd = null, p();
         };
         var P = setInterval(function() {
-          i.zoomedHd.complete && (clearInterval(P), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), u());
+          i.zoomedHd.complete && (clearInterval(P), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), p());
         }, 10);
       } else if (i.original.hasAttribute("srcset")) {
         i.zoomedHd = i.zoomed.cloneNode(), i.zoomedHd.removeAttribute("sizes"), i.zoomedHd.removeAttribute("loading");
         var D = i.zoomedHd.addEventListener("load", function() {
-          i.zoomedHd.removeEventListener("load", D), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), u();
+          i.zoomedHd.removeEventListener("load", D), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), p();
         });
       } else
-        u();
+        p();
     });
   }, y = function() {
     return new h(function(a) {
@@ -456,8 +459,8 @@ See: https://github.com/francoischalifour/medium-zoom`);
         a(b);
         return;
       }
-      var n = function u() {
-        i.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(i.zoomed), i.zoomedHd && document.body.removeChild(i.zoomedHd), document.body.removeChild(J), i.zoomed.classList.remove("medium-zoom-image--opened"), i.template && document.body.removeChild(i.template), N = !1, i.zoomed.removeEventListener("transitionend", u), i.original.dispatchEvent(F("medium-zoom:closed", {
+      var n = function p() {
+        i.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(i.zoomed), i.zoomedHd && document.body.removeChild(i.zoomedHd), document.body.removeChild(J), i.zoomed.classList.remove("medium-zoom-image--opened"), i.template && document.body.removeChild(i.template), N = !1, i.zoomed.removeEventListener("transitionend", p), i.original.dispatchEvent(F("medium-zoom:closed", {
           detail: { zoom: b }
         })), i.original = null, i.zoomed = null, i.zoomedHd = null, i.template = null, a(b);
       };
@@ -469,27 +472,27 @@ See: https://github.com/francoischalifour/medium-zoom`);
     var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target;
     return i.original ? y() : M({ target: n });
   }, k = function() {
-    return d;
+    return c;
   }, te = function() {
     return L;
-  }, pe = function() {
+  }, ue = function() {
     return i.original;
-  }, L = [], K = [], N = !1, he = 0, d = o, i = {
+  }, L = [], K = [], N = !1, he = 0, c = o, i = {
     original: null,
     zoomed: null,
     zoomedHd: null,
     template: null
     // If the selector is omitted, it's replaced by the options
   };
-  Object.prototype.toString.call(t) === "[object Object]" ? d = t : (t || typeof t == "string") && I(t), d = B({
+  Object.prototype.toString.call(t) === "[object Object]" ? c = t : (t || typeof t == "string") && I(t), c = B({
     margin: 0,
     background: "#fff",
     scrollOffset: 40,
     container: null,
     template: null
-  }, d);
-  var J = Ye(d.background);
-  document.addEventListener("click", r), document.addEventListener("keyup", p), document.addEventListener("scroll", g), window.addEventListener("resize", y);
+  }, c);
+  var J = Ye(c.background);
+  document.addEventListener("click", r), document.addEventListener("keyup", u), document.addEventListener("scroll", g), window.addEventListener("resize", y);
   var b = {
     open: M,
     close: y,
@@ -502,7 +505,7 @@ See: https://github.com/francoischalifour/medium-zoom`);
     off: v,
     getOptions: k,
     getImages: te,
-    getZoomedImage: pe
+    getZoomedImage: ue
   };
   return b;
 };
@@ -762,9 +765,9 @@ const Ge = se`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
     --font-size: var(--cx-font-size-4x-large);
   }
 `;
-var et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, c = (e, t, o, h) => {
-  for (var r = h > 1 ? void 0 : h ? tt(t, o) : t, g = e.length - 1, p; g >= 0; g--)
-    (p = e[g]) && (r = (h ? p(t, o, r) : p(r)) || r);
+var et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, m = (e, t, o, h) => {
+  for (var r = h > 1 ? void 0 : h ? tt(t, o) : t, g = e.length - 1, u; g >= 0; g--)
+    (u = e[g]) && (r = (h ? u(t, o, r) : u(r)) || r);
   return h && r && et(t, o, r), r;
 };
 let l = class extends A {
@@ -937,81 +940,81 @@ l.dependencies = {
   "cx-skeleton": Ie,
   "cx-space": Ne
 };
-c([
+m([
   X(".image")
 ], l.prototype, "imageElement", 2);
-c([
+m([
   X(".zoom-image")
 ], l.prototype, "zoomImageElement", 2);
-c([
+m([
   X(".highlighter")
 ], l.prototype, "highlighterElement", 2);
-c([
+m([
   H()
 ], l.prototype, "isLoaded", 2);
-c([
+m([
   H()
 ], l.prototype, "isError", 2);
-c([
-  m({ reflect: !0, type: String })
+m([
+  d({ reflect: !0, type: String })
 ], l.prototype, "src", 2);
-c([
-  m({ reflect: !0, type: String })
+m([
+  d({ reflect: !0, type: String })
 ], l.prototype, "placeholder", 2);
-c([
-  m({ reflect: !0, type: String })
+m([
+  d({ reflect: !0, type: String })
 ], l.prototype, "alt", 2);
-c([
-  m({ attribute: "object-fit", reflect: !0 })
+m([
+  d({ attribute: "object-fit", reflect: !0 })
 ], l.prototype, "objectFit", 2);
-c([
-  m({ reflect: !0, type: Boolean })
+m([
+  d({ reflect: !0, type: Boolean })
 ], l.prototype, "skeleton", 2);
-c([
-  m({ reflect: !0, type: Boolean })
+m([
+  d({ reflect: !0, type: Boolean })
 ], l.prototype, "fallback", 2);
-c([
-  m({ attribute: "can-zoom", reflect: !0, type: Boolean })
+m([
+  d({ attribute: "can-zoom", reflect: !0, type: Boolean })
 ], l.prototype, "canZoom", 2);
-c([
-  m({ reflect: !0, type: Boolean })
+m([
+  d({ reflect: !0, type: Boolean })
 ], l.prototype, "loading", 2);
-c([
-  m({ reflect: !0, type: Boolean })
+m([
+  d({ reflect: !0, type: Boolean })
 ], l.prototype, "block", 2);
-c([
-  m({ attribute: "html-loading", reflect: !0, type: String })
+m([
+  d({ attribute: "html-loading", reflect: !0, type: String })
 ], l.prototype, "htmlLoading", 2);
-c([
-  m({ attribute: "click-handler-type", reflect: !0, type: String })
+m([
+  d({ attribute: "click-handler-type", reflect: !0, type: String })
 ], l.prototype, "clickHandlerType", 2);
-c([
+m([
   H()
 ], l.prototype, "isZoomed", 2);
-c([
+m([
   H()
 ], l.prototype, "imageRatio", 2);
-c([
+m([
   H()
 ], l.prototype, "parsedAlt", 2);
-c([
+m([
   H()
 ], l.prototype, "parsedAltDarkMode", 2);
-c([
+m([
   q("isLoaded"),
   q("canZoom", { waitUntilFirstUpdate: !0 })
 ], l.prototype, "handleCanZoomChange", 1);
-c([
+m([
   q("objectFit", { waitUntilFirstUpdate: !0 })
 ], l.prototype, "handleObjectFitChange", 1);
-c([
+m([
   q("src"),
   q("srcDarkMode")
 ], l.prototype, "handleSrcChange", 1);
-c([
+m([
   Oe(100)
 ], l.prototype, "updateLastPatchedWidth", 1);
-l = c([
+l = m([
   Ae("cx-image")
 ], l);
 export {
@@ -1021,7 +1024,7 @@ export {
   S as a,
   Y as b,
   U as c,
-  ue as d,
+  pe as d,
   ge as e,
   ne as f,
   _e as r