@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

package/library/chunks/{image.C9avagDq.js → image.CEtCGsNL.js}

@@ -1,30 +1,32 @@
-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 { r as H } from "./state.CSDxrqLd.js";
+import { x as D, i as se, E as ge } from "./lit-element.jLBm65_O.js";
+import { C as Le, n as d } from "./lib-cortex-element.CVMmyPMC.js";
+import { r as L } 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.DMSLciL5.js";
-import { c as Ae } from "./custom-element.L4WJXn1j.js";
+import { c as We } from "./component.styles.CRO4Odto.js";
+import { c as Te } from "./custom-element.L4WJXn1j.js";
 import { d as Oe } from "./debounce.DaHuiSGU.js";
-import { L as Me } from "./i18n.C0iakJkV.js";
-import { w as q } from "./watch.q1sEjPWL.js";
+import { L as Ae } from "./i18n.BFqTRDCA.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";
-import { o as je } from "./style-map.llVFPd__.js";
-import { n as V } from "./when.Dr1es41R.js";
-import Te from "../components/icon.js";
-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) => {
+import { o as Me } from "./if-defined.BRoBj_Rp.js";
+import { e as De, i as je } from "./directive.oAbCiebi.js";
+import { m as Be } from "./directive-helpers.Dm4rc594.js";
+import { o as Ie } from "./style-map.llVFPd__.js";
+import { n as P } from "./when.Dr1es41R.js";
+import _e from "../components/icon.js";
+import Ze from "../components/popup.js";
+import Ne from "../components/resize-observer.js";
+import Pe from "../components/skeleton.js";
+import Ve from "../components/space.js";
+var Fe = /* @__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))(Fe || {}), Y = /* @__PURE__ */ ((e) => (e.Jump = "jump", e.None = "none", e.TextReveal = "text-reveal", e.Zoom = "zoom", e))(Y || {}), ue = /* @__PURE__ */ ((e) => (e.PopOut = "pop-out", e.WithinBorders = "within-borders", e))(ue || {}), pe = /* @__PURE__ */ ((e) => (e.Fade = "fade", e.Slide = "slide", e))(pe || {}), ne = /* @__PURE__ */ ((e) => (e.Auto = "auto", e.Fixed = "fixed", e))(ne || {}), Ue = 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);
-  return r && Ve(t, o, r), r;
+  return r && Ue(t, o, r), r;
 };
-class S extends Re {
+class S extends Le {
   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 = ue.WithinBorders, this.hasSlotContent = !1, this.isCustomSlot = !1, this.isHovering = !1;
   }
   get easeCSSVariable() {
     return de[this.easing] || de.linear;
@@ -58,66 +60,66 @@ 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
   })
 ], S.prototype, "zoomStyle");
 E([
-  H()
+  L()
 ], S.prototype, "hasSlotContent");
 E([
-  H()
+  L()
 ], S.prototype, "isCustomSlot");
 E([
-  H()
+  L()
 ], S.prototype, "isHovering");
-var Fe = Object.defineProperty, O = (e, t, o, h) => {
+var Ye = 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);
-  return r && Fe(t, o, r), r;
+  return r && Ye(t, o, r), r;
 };
-class A extends S {
+class T 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 = {
       height: 0,
@@ -160,8 +162,8 @@ class A extends S {
       width: this.containingElement?.clientWidth || 0
     };
     if (!this.noLimit && this.parentElement) {
-      const $ = getComputedStyle(this.parentElement), f = $.getPropertyValue("padding-left").trim() || "0px", v = $.getPropertyValue("padding-right").trim() || "0px", M = Number(f.replace("px", "")), y = Number(v.replace("px", "")), R = getComputedStyle(this.parentElement).getPropertyValue("--padding").trim() || "0px", k = Number(R.replace("px", "")), te = Math.max(
-        M + y,
+      const $ = getComputedStyle(this.parentElement), f = $.getPropertyValue("padding-left").trim() || "0px", v = $.getPropertyValue("padding-right").trim() || "0px", A = Number(f.replace("px", "")), z = Number(v.replace("px", "")), H = getComputedStyle(this.parentElement).getPropertyValue("--padding").trim() || "0px", k = Number(H.replace("px", "")), te = Math.max(
+        A + z,
         k * 2
       );
       this.maxWidth = Math.max(this.maxWidth - te, 0);
@@ -172,26 +174,26 @@ class A extends S {
         event: t
       }
     });
-    const Z = ($) => {
+    const I = ($) => {
       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;
       if (this.keepRatio) {
-        const M = this.maxWidth ?? 1 / 0, y = this.maxHeight ?? 1 / 0;
-        let R = Math.min(f, M), k = R / this.ratio;
-        k > y && (k = y, R = k * this.ratio), f = R, v = k;
+        const A = this.maxWidth ?? 1 / 0, z = this.maxHeight ?? 1 / 0;
+        let H = Math.min(f, A), k = H / this.ratio;
+        k > z && (k = z, H = k * this.ratio), f = H, v = k;
       } else
         f = this.maxWidth ? Math.min(f, this.maxWidth) : f, v = this.maxHeight ? Math.min(v, this.maxHeight) : v;
       this.resizeSize = {
         height: Math.round(v),
         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 (this.keepRatio) {
-          const M = this.maxWidth ?? 1 / 0, y = this.maxHeight ?? 1 / 0;
-          let R = Math.min(f, M), k = R / this.ratio;
-          k > y && (k = y, R = k * this.ratio), f = R, v = k;
+          const A = this.maxWidth ?? 1 / 0, z = this.maxHeight ?? 1 / 0;
+          let H = Math.min(f, A), k = H / this.ratio;
+          k > z && (k = z, H = k * this.ratio), f = H, v = k;
         } else
           f = this.maxWidth ? Math.min(f, this.maxWidth) : f, v = this.maxHeight ? Math.min(v, this.maxHeight) : v;
         this.keepRatio ? (this.minHeight && v < this.minHeight && (v = this.minHeight, f = Math.round(this.minHeight * this.ratio)), this.minWidth && f < this.minWidth && (f = this.minWidth, v = Math.round(this.minWidth / this.ratio))) : (this.minHeight && v < this.minHeight && (v = this.minHeight), this.minWidth && f < this.minWidth && (f = this.minWidth)), this.width = `${Math.round(f)}px`, this.height = `${Math.round(v)}px`, this.resizeSize = {
@@ -206,13 +208,13 @@ class A extends S {
         }
       }), this.ownerDocument.defaultView?.removeEventListener(
         "mousemove",
-        Z
+        I
       );
     };
     this.ownerDocument.defaultView?.addEventListener(
       "mousemove",
-      Z
-    ), this.ownerDocument.defaultView?.addEventListener("mouseup", I, {
+      I
+    ), this.ownerDocument.defaultView?.addEventListener("mouseup", _, {
       once: !0
     });
   }
@@ -229,87 +231,54 @@ class A extends S {
     this.handleResizeDragging(t, !1, !1);
   }
   renderResizer() {
-    return T`
-      <div
-        class="resizer resizer--top-left"
-        @mousedown=${this.handleResizeDraggingTopLeft}
-      ></div>
-      <div
-        class="resizer resizer--top-right"
-        @mousedown=${this.handleResizeDraggingTopRight}
-      ></div>
-      <div
-        class="resizer resizer--bottom-left"
-        @mousedown=${this.handleResizeDraggingBottomLeft}
-      ></div>
-      <div
-        class="resizer resizer--bottom-right"
-        @mousedown=${this.handleResizeDraggingBottomRight}
-      ></div>
-    `;
+    return D`<div class="resizer resizer--top-left" @mousedown=${this.handleResizeDraggingTopLeft}></div><div class="resizer resizer--top-right" @mousedown=${this.handleResizeDraggingTopRight}></div><div class="resizer resizer--bottom-left" @mousedown=${this.handleResizeDraggingBottomLeft}></div><div class="resizer resizer--bottom-right" @mousedown=${this.handleResizeDraggingBottomRight}></div>`;
   }
 }
 O([
   X('[part="base"]')
-], A.prototype, "containingElement");
+], T.prototype, "containingElement");
 O([
-  m({ reflect: !0, type: String })
-], A.prototype, "width");
+  d({ reflect: !0, type: String })
+], T.prototype, "width");
 O([
-  m({ reflect: !0, type: String })
-], A.prototype, "height");
+  d({ reflect: !0, type: String })
+], T.prototype, "height");
 O([
-  m({ type: Boolean })
-], A.prototype, "resizable");
+  d({ type: Boolean })
+], T.prototype, "resizable");
 O([
-  m({ attribute: "height-mode", reflect: !0, type: String })
-], A.prototype, "heightMode");
+  d({ attribute: "height-mode", reflect: !0, type: String })
+], T.prototype, "heightMode");
 O([
-  m({ attribute: "no-limit", reflect: !0, type: Boolean })
-], A.prototype, "noLimit");
+  d({ attribute: "no-limit", reflect: !0, type: Boolean })
+], T.prototype, "noLimit");
 O([
-  H()
-], A.prototype, "isResizeActive");
+  L()
+], T.prototype, "isResizeActive");
 O([
-  H()
-], A.prototype, "isResizing");
+  L()
+], T.prototype, "isResizing");
 O([
-  H()
-], A.prototype, "resizeSize");
-const _e = se`
-  .resizer {
-    background-color: var(--cx-color-primary);
-    width: 8px;
-    height: 8px;
-    position: absolute;
-    z-index: 100;
-  }
-
-  .resizer--top-left {
-    top: calc(-1px - var(--border-width, 0px));
-    left: calc(-1px - var(--border-width, 0px));
-    cursor: nw-resize;
-  }
-
-  .resizer--top-right {
-    top: calc(-1px - var(--border-width, 0px));
-    right: calc(-1px - var(--border-width, 0px));
-    cursor: ne-resize;
+  L()
+], T.prototype, "resizeSize");
+const qe = se`.resizer{background-color:var(--cx-color-primary);z-index:100;width:8px;height:8px;position:absolute}.resizer--top-left{top:calc(-1px - var(--border-width,0px));left:calc(-1px - var(--border-width,0px));cursor:nw-resize}.resizer--top-right{top:calc(-1px - var(--border-width,0px));right:calc(-1px - var(--border-width,0px));cursor:ne-resize}.resizer--bottom-left{bottom:calc(-1px - var(--border-width,0px));left:calc(-1px - var(--border-width,0px));cursor:sw-resize}.resizer--bottom-right{bottom:calc(-1px - var(--border-width,0px));right:calc(-1px - var(--border-width,0px));cursor:se-resize}`;
+var U = /* @__PURE__ */ ((e) => (e.Automatic = "automatic", e.Manual = "manual", e))(U || {});
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Xe = De(class extends je {
+  constructor() {
+    super(...arguments), this.key = ge;
   }
-
-  .resizer--bottom-left {
-    bottom: calc(-1px - var(--border-width, 0px));
-    left: calc(-1px - var(--border-width, 0px));
-    cursor: sw-resize;
+  render(e, t) {
+    return this.key = e, t;
   }
-
-  .resizer--bottom-right {
-    bottom: calc(-1px - var(--border-width, 0px));
-    right: calc(-1px - var(--border-width, 0px));
-    cursor: se-resize;
+  update(e, [t, o]) {
+    return t !== this.key && (Be(e), this.key = t), o;
   }
-`;
-var U = /* @__PURE__ */ ((e) => (e.Automatic = "automatic", e.Manual = "manual", e))(U || {});
+});
 /*! medium-zoom 1.1.0 | MIT License | https://github.com/francoischalifour/medium-zoom */
 var B = Object.assign || function(e) {
   for (var t = 1; t < arguments.length; t++) {
@@ -320,7 +289,7 @@ var B = Object.assign || function(e) {
   return e;
 }, Q = function(t) {
   return t.tagName === "IMG";
-}, Ue = function(t) {
+}, Ke = function(t) {
   return NodeList.prototype.isPrototypeOf(t);
 }, ee = function(t) {
   return t && t.nodeType === 1;
@@ -329,19 +298,19 @@ var B = Object.assign || function(e) {
   return o.substr(-4).toLowerCase() === ".svg";
 }, ce = 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) : [];
+    return Array.isArray(t) ? t.filter(Q) : Ke(t) ? [].slice.call(t).filter(Q) : ee(t) ? [t].filter(Q) : typeof t == "string" ? [].slice.call(document.querySelectorAll(t)).filter(Q) : [];
   } catch {
     throw new TypeError(`The provided selector is invalid.
 Expects a CSS selector, a Node element, a NodeList or an array.
 See: https://github.com/francoischalifour/medium-zoom`);
   }
-}, Ye = function(t) {
+}, Je = function(t) {
   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;
-}, F = function(t, o) {
+}, Ge = function(t) {
+  var o = t.getBoundingClientRect(), h = o.top, r = o.left, g = o.width, p = o.height, C = t.cloneNode(), I = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, _ = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+  return C.removeAttribute("id"), C.style.position = "absolute", C.style.top = h + I + "px", C.style.left = r + _ + "px", C.style.width = g + "px", C.style.height = p + "px", C.style.transform = "", C;
+}, V = function(t, o) {
   var h = B({
     bubbles: !1,
     cancelable: !1,
@@ -351,7 +320,7 @@ See: https://github.com/francoischalifour/medium-zoom`);
     return new CustomEvent(t, h);
   var r = document.createEvent("CustomEvent");
   return r.initCustomEvent(t, h.bubbles, h.cancelable, h.detail), r;
-}, Xe = function e(t) {
+}, Qe = function e(t) {
   var o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, h = window.Promise || function(a) {
     function n() {
     }
@@ -359,75 +328,75 @@ See: https://github.com/francoischalifour/medium-zoom`);
   }, r = function(a) {
     var n = a.target;
     if (n === J) {
-      y();
+      z();
       return;
     }
-    L.indexOf(n) !== -1 && R({ target: n });
+    R.indexOf(n) !== -1 && H({ target: n });
   }, g = function() {
-    if (!(N || !i.original)) {
+    if (!(Z || !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(z, 150);
     }
   }, p = function(a) {
     var n = a.key || a.keyCode;
-    (n === "Escape" || n === "Esc" || n === 27) && y();
+    (n === "Escape" || n === "Esc" || n === 27) && z();
   }, 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) {
+    if (a.background && (J.style.background = a.background), a.container && a.container instanceof Object && (n.container = B({}, c.container, a.container)), a.template) {
       var u = ee(a.template) ? a.template : document.querySelector(a.template);
       n.template = u;
     }
-    return d = B({}, d, n), L.forEach(function(z) {
-      z.dispatchEvent(F("medium-zoom:update", {
+    return c = B({}, c, n), R.forEach(function(y) {
+      y.dispatchEvent(V("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));
   }, I = function() {
+    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return e(B({}, c, a));
+  }, _ = function() {
     for (var a = arguments.length, n = Array(a), u = 0; u < a; u++)
       n[u] = arguments[u];
-    var z = n.reduce(function(s, w) {
+    var y = n.reduce(function(s, w) {
       return [].concat(s, ce(w));
     }, []);
-    return z.filter(function(s) {
-      return L.indexOf(s) === -1;
+    return y.filter(function(s) {
+      return R.indexOf(s) === -1;
     }).forEach(function(s) {
-      L.push(s), s.classList.add("medium-zoom-image");
+      R.push(s), s.classList.add("medium-zoom-image");
     }), K.forEach(function(s) {
-      var w = s.type, W = s.listener, P = s.options;
-      z.forEach(function(D) {
-        D.addEventListener(w, W, P);
+      var w = s.type, W = s.listener, N = s.options;
+      y.forEach(function(M) {
+        M.addEventListener(w, W, N);
       });
     }), b;
   }, $ = function() {
     for (var a = arguments.length, n = Array(a), u = 0; u < a; u++)
       n[u] = arguments[u];
-    i.zoomed && y();
-    var z = n.length > 0 ? n.reduce(function(s, w) {
+    i.zoomed && z();
+    var y = n.length > 0 ? n.reduce(function(s, w) {
       return [].concat(s, ce(w));
-    }, []) : L;
-    return z.forEach(function(s) {
-      s.classList.remove("medium-zoom-image"), s.dispatchEvent(F("medium-zoom:detach", {
+    }, []) : R;
+    return y.forEach(function(s) {
+      s.classList.remove("medium-zoom-image"), s.dispatchEvent(V("medium-zoom:detach", {
         detail: { zoom: b }
       }));
-    }), L = L.filter(function(s) {
-      return z.indexOf(s) === -1;
+    }), R = R.filter(function(s) {
+      return y.indexOf(s) === -1;
     }), b;
   }, f = function(a, n) {
     var u = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-    return L.forEach(function(z) {
-      z.addEventListener("medium-zoom:" + a, n, u);
+    return R.forEach(function(y) {
+      y.addEventListener("medium-zoom:" + a, n, u);
     }), K.push({ type: "medium-zoom:" + a, listener: n, options: u }), b;
   }, v = function(a, n) {
     var u = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-    return L.forEach(function(z) {
-      z.removeEventListener("medium-zoom:" + a, n, u);
-    }), K = K.filter(function(z) {
-      return !(z.type === "medium-zoom:" + a && z.listener.toString() === n.toString());
+    return R.forEach(function(y) {
+      y.removeEventListener("medium-zoom:" + a, n, u);
+    }), K = K.filter(function(y) {
+      return !(y.type === "medium-zoom:" + a && y.listener.toString() === n.toString());
     }), b;
-  }, M = function() {
+  }, A = function() {
     var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target, u = function() {
       var s = {
         width: document.documentElement.clientWidth,
@@ -437,125 +406,125 @@ 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 N = ee(c.container) ? c.container : document.querySelector(c.container), M = N.getBoundingClientRect(), ie = M.width, ve = M.height, ye = M.left, ze = M.top;
           s = B({}, s, {
             width: ie,
-            height: fe,
-            left: ve,
+            height: ve,
+            left: ye,
             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 F = i.zoomedHd || i.original, be = me(F) ? w : F.naturalWidth || w, xe = me(F) ? W : F.naturalHeight || W, G = F.getBoundingClientRect(), we = G.top, Se = G.left, oe = G.width, re = G.height, Ee = Math.min(Math.max(oe, be), w) / oe, Ce = Math.min(Math.max(re, xe), W) / re, ae = Math.min(Ee, Ce), ke = (-Se + (w - oe) / 2 + c.margin + s.left) / ae, Re = (-we + (W - re) / 2 + c.margin + s.top) / ae, le = "scale(" + ae + ") translate3d(" + ke + "px, " + Re + "px, 0)";
       i.zoomed.style.transform = le, i.zoomedHd && (i.zoomedHd.style.transform = le);
     };
-    return new h(function(z) {
-      if (n && L.indexOf(n) === -1) {
-        z(b);
+    return new h(function(y) {
+      if (n && R.indexOf(n) === -1) {
+        y(b);
         return;
       }
       var s = function ie() {
-        N = !1, i.zoomed.removeEventListener("transitionend", ie), i.original.dispatchEvent(F("medium-zoom:opened", {
+        Z = !1, i.zoomed.removeEventListener("transitionend", ie), i.original.dispatchEvent(V("medium-zoom:opened", {
           detail: { zoom: b }
-        })), z(b);
+        })), y(b);
       };
       if (i.zoomed) {
-        z(b);
+        y(b);
         return;
       }
       if (n)
         i.original = n;
-      else if (L.length > 0) {
-        var w = L;
+      else if (R.length > 0) {
+        var w = R;
         i.original = w[0];
       } else {
-        z(b);
+        y(b);
         return;
       }
-      if (i.original.dispatchEvent(F("medium-zoom:open", {
+      if (i.original.dispatchEvent(V("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, Z = !0, i.zoomed = Ge(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.original.classList.add("medium-zoom-image--hidden"), i.zoomed.classList.add("medium-zoom-image--opened"), i.zoomed.addEventListener("click", z), 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(N), console.warn("Unable to reach the zoom image target " + i.zoomedHd.src), i.zoomedHd = null, u();
         };
-        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());
+        var N = setInterval(function() {
+          i.zoomedHd.complete && (clearInterval(N), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", z), document.body.appendChild(i.zoomedHd), u());
         }, 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();
+        var M = i.zoomedHd.addEventListener("load", function() {
+          i.zoomedHd.removeEventListener("load", M), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", z), document.body.appendChild(i.zoomedHd), u();
         });
       } else
         u();
     });
-  }, y = function() {
+  }, z = function() {
     return new h(function(a) {
-      if (N || !i.original) {
+      if (Z || !i.original) {
         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", {
+        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), Z = !1, i.zoomed.removeEventListener("transitionend", u), i.original.dispatchEvent(V("medium-zoom:closed", {
           detail: { zoom: b }
         })), i.original = null, i.zoomed = null, i.zoomedHd = null, i.template = null, a(b);
       };
-      N = !0, document.body.classList.remove("medium-zoom--opened"), i.zoomed.style.transform = "", i.zoomedHd && (i.zoomedHd.style.transform = ""), i.template && (i.template.style.transition = "opacity 150ms", i.template.style.opacity = 0), i.original.dispatchEvent(F("medium-zoom:close", {
+      Z = !0, document.body.classList.remove("medium-zoom--opened"), i.zoomed.style.transform = "", i.zoomedHd && (i.zoomedHd.style.transform = ""), i.template && (i.template.style.transition = "opacity 150ms", i.template.style.opacity = 0), i.original.dispatchEvent(V("medium-zoom:close", {
         detail: { zoom: b }
       })), i.zoomed.addEventListener("transitionend", n);
     });
-  }, R = function() {
+  }, H = function() {
     var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target;
-    return i.original ? y() : M({ target: n });
+    return i.original ? z() : A({ target: n });
   }, k = function() {
-    return d;
+    return c;
   }, te = function() {
-    return L;
-  }, pe = function() {
+    return R;
+  }, fe = function() {
     return i.original;
-  }, L = [], K = [], N = !1, he = 0, d = o, i = {
+  }, R = [], K = [], Z = !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") && _(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 = Je(c.background);
+  document.addEventListener("click", r), document.addEventListener("keyup", p), document.addEventListener("scroll", g), window.addEventListener("resize", z);
   var b = {
-    open: M,
-    close: y,
-    toggle: R,
+    open: A,
+    close: z,
+    toggle: H,
     update: C,
-    clone: Z,
-    attach: I,
+    clone: I,
+    attach: _,
     detach: $,
     on: f,
     off: v,
     getOptions: k,
     getImages: te,
-    getZoomedImage: pe
+    getZoomedImage: fe
   };
   return b;
 };
-function Ke(e, t) {
+function et(e, t) {
   t === void 0 && (t = {});
   var o = t.insertAt;
   if (!(typeof document > "u")) {
@@ -563,131 +532,9 @@ function Ke(e, t) {
     r.type = "text/css", o === "top" && h.firstChild ? h.insertBefore(r, h.firstChild) : h.appendChild(r), r.styleSheet ? r.styleSheet.cssText = e : r.appendChild(document.createTextNode(e));
   }
 }
-var Je = ".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}";
-Ke(Je);
-const Ge = se`
-  :host([effect='jump']) .container,
-  :host([effect='text-reveal']) .container,
-  :host([effect='zoom']) .container {
-    overflow: initial;
-  }
-
-  :host([effect='jump']) .highlighter {
-    transition:
-      all var(--transition-duration, 0.5s) var(--easing, linear),
-      transform var(--transition-transform-duration, 0.5s) var(--easing, linear);
-  }
-
-  :host([effect='jump']) .highlighter:hover {
-    transform: translateY(
-      calc(var(--highlightable-item-effect-jump-distance, 0) * -1)
-    );
-  }
-
-  .highlighter--effect-text-reveal,
-  :host([effect='zoom']) .highlighter--zoom-style-within-borders {
-    overflow: hidden;
-  }
-
-  :host([effect='zoom'][zoom-style='pop-out']) .highlighter:hover {
-    z-index: 3;
-    animation: none;
-  }
-
-  :host([effect='zoom'][zoom-style='pop-out']) .highlighter:not(:hover) {
-    animation: drop-z var(--transition-transform-duration) forwards;
-  }
-
-  @keyframes drop-z {
-    0% {
-      z-index: 2;
-    }
-
-    99% {
-      z-index: 2;
-    }
-
-    100% {
-      z-index: 0;
-    }
-  }
-
-  .highlighter--can-hover:hover::after,
-  .highlighter--selected::after,
-  .highlighter--color-overlay::after {
-    content: '';
-    position: absolute;
-    pointer-events: none;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    transition: all var(--transition-duration, 0.5s) var(--easing, linear);
-  }
-
-  .highlighter--can-hover:hover::after,
-  .highlighter--selected::after {
-    outline: 2px solid var(--cx-color-primary);
-  }
-
-  .highlighter--border:hover .image {
-    border-color: var(
-      --highlightable-item-highlight-border-color,
-      var(--cx-color-primary)
-    );
-  }
-
-  .highlighter--color-overlay::after {
-    border-radius: var(--border-radius, none);
-  }
-
-  .highlighter--color-overlay:hover::after {
-    background-color: var(
-      --highlightable-item-highlight-color-overlay-color,
-      transparent
-    );
-  }
-
-  .highlighter--drop-shadow:hover .image {
-    box-shadow: var(--highlightable-item-highlight-drop-shadow, none);
-  }
-
-  .highlighter--background:hover .highlightable-item {
-    --content-background-color: var(
-      --highlightable-item-highlight-background,
-      transparent
-    );
-    --highlightable-item-background-color: var(
-      --highlightable-item-highlight-background,
-      transparent
-    );
-  }
-
-  .highlighter--opacity {
-    opacity: var(--highlightable-item-highlight-opacity, 1);
-  }
-
-  :host([effect='zoom'][zoom-style='within-borders']) .highlighter .image,
-  :host([effect='zoom'][zoom-style='pop-out']) .highlighter {
-    transition: transform var(--transition-transform-duration, 0.5s)
-      var(--easing, linear);
-  }
-
-  :host([effect='zoom'][zoom-style='within-borders']) .highlighter:hover .image,
-  :host([effect='zoom'][zoom-style='pop-out']) .highlighter:hover {
-    transform: scale(var(--highlightable-item-effect-zoom-scale, 1));
-  }
-
-  .highlightable-item {
-    transition:
-      background-color var(--transition-duration, 0.5s) var(--easing, linear),
-      border-color var(--transition-duration, 0.5s) var(--easing, linear),
-      box-shadow var(--transition-duration, 0.5s) var(--easing, linear),
-      opacity var(--transition-duration, 0.5s) var(--easing, linear),
-      transform var(--transition-transform-duration, 0.5s) var(--easing, linear),
-      visibility var(--transition-duration, 0.5s) var(--easing, linear);
-  }
-`, Qe = se`
+var tt = ".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}";
+et(tt);
+const it = se`:host([effect=jump]) .container,:host([effect=text-reveal]) .container,:host([effect=zoom]) .container{overflow:initial}:host([effect=jump]) .highlighter{transition:all var(--transition-duration,.5s) var(--easing,linear), transform var(--transition-transform-duration,.5s) var(--easing,linear)}:host([effect=jump]) .highlighter:hover{transform:translateY(calc(var(--highlightable-item-effect-jump-distance,0) * -1))}.highlighter--effect-text-reveal,:host([effect=zoom]) .highlighter--zoom-style-within-borders{overflow:hidden}:host([effect=zoom][zoom-style=pop-out]) .highlighter:hover{z-index:3;animation:none}:host([effect=zoom][zoom-style=pop-out]) .highlighter:not(:hover){animation:drop-z var(--transition-transform-duration) forwards}@keyframes drop-z{0%{z-index:2}99%{z-index:2}to{z-index:0}}.highlighter--can-hover:hover:after,.highlighter--selected:after,.highlighter--color-overlay:after{content:"";pointer-events:none;width:100%;height:100%;transition:all var(--transition-duration,.5s) var(--easing,linear);position:absolute;top:0;left:0}.highlighter--can-hover:hover:after,.highlighter--selected:after{outline:2px solid var(--cx-color-primary)}.highlighter--border:hover .image{border-color:var(--highlightable-item-highlight-border-color,var(--cx-color-primary))}.highlighter--color-overlay:after{border-radius:var(--border-radius,none)}.highlighter--color-overlay:hover:after{background-color:var(--highlightable-item-highlight-color-overlay-color,transparent)}.highlighter--drop-shadow:hover .image{box-shadow:var(--highlightable-item-highlight-drop-shadow,none)}.highlighter--background:hover .highlightable-item{--content-background-color:var(--highlightable-item-highlight-background,transparent);--highlightable-item-background-color:var(--highlightable-item-highlight-background,transparent)}.highlighter--opacity{opacity:var(--highlightable-item-highlight-opacity,1)}:host([effect=zoom][zoom-style=within-borders]) .highlighter .image,:host([effect=zoom][zoom-style=pop-out]) .highlighter{transition:transform var(--transition-transform-duration,.5s) var(--easing,linear)}:host([effect=zoom][zoom-style=within-borders]) .highlighter:hover .image,:host([effect=zoom][zoom-style=pop-out]) .highlighter:hover{transform:scale(var(--highlightable-item-effect-zoom-scale,1))}.highlightable-item{transition:background-color var(--transition-duration,.5s) var(--easing,linear), border-color var(--transition-duration,.5s) var(--easing,linear), box-shadow var(--transition-duration,.5s) var(--easing,linear), opacity var(--transition-duration,.5s) var(--easing,linear), transform var(--transition-transform-duration,.5s) var(--easing,linear), visibility var(--transition-duration,.5s) var(--easing,linear)}`, ot = se`
   :host {
     --justify-content: flex-start;
     --border-radius: 0px;
@@ -740,7 +587,7 @@ const Ge = se`
     max-height: 100%;
   }
 
-  ${Ge}
+  ${it}
 
   :host([block]) {
     width: 100%;
@@ -933,14 +780,14 @@ const Ge = se`
     --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--)
+var rt = Object.defineProperty, at = Object.getOwnPropertyDescriptor, m = (e, t, o, h) => {
+  for (var r = h > 1 ? void 0 : h ? at(t, o) : t, g = e.length - 1, p; g >= 0; g--)
     (p = e[g]) && (r = (h ? p(t, o, r) : p(r)) || r);
-  return h && r && et(t, o, r), r;
+  return h && r && rt(t, o, r), r;
 };
-let l = class extends A {
+let l = class extends T {
   constructor() {
-    super(...arguments), this.localize = new Me(this), this.isLoaded = !1, this.isError = !1, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = $e.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.clickHandlerType = U.Automatic, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null;
+    super(...arguments), this.localize = new Ae(this), this._retryCount = 0, this._retryTimer = null, this.isLoaded = !1, this.isError = !1, this._retryIndex = 0, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = $e.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.clickHandlerType = U.Automatic, this.retryOnError = !1, this.maxRetries = 3, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null;
   }
   get currentAltValue() {
     return this.alt;
@@ -987,7 +834,7 @@ let l = class extends A {
     this.hasUpdated && this.requestUpdate("canZoom");
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.zoom && this.zoom.detach();
+    super.disconnectedCallback(), this.zoom && this.zoom.detach(), this.clearRetryTimer();
   }
   /**
    * Handle mouse enter event.
@@ -1017,10 +864,19 @@ let l = class extends A {
     await this.updateComplete, this.requestUpdate();
   }
   handleSrcChange() {
-    this.isLoaded = !1, this.isError = !1;
+    this.isLoaded = !1, this.isError = !1, this._retryCount = 0, this._retryIndex = 0, this.clearRetryTimer();
+  }
+  clearRetryTimer() {
+    this._retryTimer !== null && (clearTimeout(this._retryTimer), this._retryTimer = null);
+  }
+  scheduleRetry() {
+    const e = Math.min(1e3 * Math.pow(2, this._retryCount - 1), 1e4);
+    this._retryTimer = setTimeout(() => {
+      this._retryTimer = null, this._retryIndex += 1;
+    }, e);
   }
   async initZoom() {
-    this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = Xe(this.zoomImageElement, {
+    this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = Qe(this.zoomImageElement, {
       background: "light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8))",
       margin: 0,
       scrollOffset: 0
@@ -1038,6 +894,10 @@ let l = class extends A {
     this.imageRatio = h / o, this.isLoaded || (this.emit("cx-load"), this.isLoaded = !0, this.isError = !1);
   }
   handleError() {
+    if (this.retryOnError && this._retryCount < this.maxRetries) {
+      this._retryCount += 1, this.scheduleRetry();
+      return;
+    }
     this.emit("cx-error"), this.isLoaded = !0, this.isError = !0;
   }
   handleSizeChange() {
@@ -1066,219 +926,146 @@ let l = class extends A {
   }
   renderContent() {
     const e = this.currentSrc, t = this.currentAltValue;
-    return T`
-      <div
-        part="content"
-        slot="anchor"
-        class=${j(this.highlighterClass)}
-      >
-        <img
-          part="image"
-          class=${j(this.imageClass)}
-          src=${e || this.placeholder}
-          alt=${t}
-          aria-label=${t}
-          crossorigin="anonymous"
-          @load=${this.handleLoad}
-          @error=${this.handleError}
-          loading=${this.htmlLoading}
-        />
-      </div>
-    `;
+    return D`<div part="content" slot="anchor" class=${j(this.highlighterClass)}>${Xe(
+      this._retryIndex,
+      D`<img part="image" class=${j(this.imageClass)} src=${e || this.placeholder} alt=${t} aria-label=${t} crossorigin="anonymous" @load=${this.handleLoad} @error=${this.handleError} loading=${this.htmlLoading}>`
+    )}</div>`;
   }
   render() {
     const e = this.hasZoomAction, t = this.currentAltValue, o = !this.currentSrc && !this.placeholder;
-    return T`<div
-      part="base"
-      class=${j({
+    return D`<div part="base" class=${j({
       container: !0,
       "container--empty": o,
       "container--loading": this.loading,
       "container--resizing": this.resizable && this.isResizeActive
-    })}
-      style=${je({
+    })} style=${Ie({
       "--easing": this.easeCSSVariable
-    })}
-      data-empty-label=${this.localize.term("emptyImage")}
-      @click=${this.startResizing}
-      @keydown=${this.handleKeyDown}
-    >
-      <cx-resize-observer @cx-resize=${this.handleResize}>
-        <div
-          part="highlighter"
-          tabindex=${De(this.highlighterTabindex)}
-          role=${this.highlighterRole}
-          aria-label=${t}
-          aria-roledescription=${this.localize.term("image")}
-          class=${j(o ? {} : this.getHighlighterClass())}
-          @click=${this.handleClickAction}
-          @mouseenter=${this.handleMouseEnter}
-          @mouseleave=${this.handleMouseLeave}
-          @blur=${this.handleBlur}
-        >
-          ${V(
+    })} data-empty-label=${this.localize.term("emptyImage")} @click=${this.startResizing} @keydown=${this.handleKeyDown}><cx-resize-observer @cx-resize=${this.handleResize}><div part="highlighter" tabindex=${Me(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${t} aria-roledescription=${this.localize.term("image")} class=${j(o ? {} : this.getHighlighterClass())} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${P(
       o,
-      () => Le,
-      () => V(
+      () => ge,
+      () => P(
         this.effect === Y.Jump || this.effect === Y.Zoom,
-        () => T`
-                  <cx-popup
-                    class="popup-container"
-                    strategy="absolute"
-                    active
-                    placement="center"
-                    sync="both"
-                  >
-                    ${this.renderContent()}
-                  </cx-popup>
-                `,
+        () => D`<cx-popup class="popup-container" strategy="absolute" active placement="center" sync="both">${this.renderContent()}</cx-popup>`,
         () => this.renderContent()
       )
-    )}
-          <div class="zoom-image-container">
-            ${V(
+    )}<div class="zoom-image-container">${P(
       e,
-      () => T`<img
-                  part="zoom-image"
-                  class=${j({
+      () => D`<img part="zoom-image" class=${j({
         "zoom-image": !0,
         "zoom-image--hidden": !this.isZoomed
-      })}
-                  src=${this.currentSrc || this.placeholder}
-                  alt=""
-                  aria-hidden="true"
-                  decoding="async"
-                  draggable="false"
-                  crossorigin="anonymous"
-                />`
-    )}
-          </div>
-          ${V(
+      })} src=${this.currentSrc || this.placeholder} alt="" aria-hidden="true" decoding="async" draggable="false" crossorigin="anonymous">`
+    )}</div>${P(
       this.skeleton && !this.isLoaded && !this.isError || this.loading,
-      () => T`
-                <slot name="skeleton" part="skeleton">
-                  <div
-                    class=${j({
+      () => D`<slot name="skeleton" part="skeleton"><div class=${j({
         skeleton: !0
-      })}
-                  >
-                    <cx-skeleton effect="sheen"></cx-skeleton>
-                  </div>
-                </slot>
-              `
+      })}><cx-skeleton effect="sheen"></cx-skeleton></div></slot>`
     )}
-          ${V(this.isError && this.fallback, () => T`
-              <slot name="fallback" part="fallback">
-                <cx-space
-                  class=${j({ fallback: !0 })}
-                  direction="column"
-                  align-items="center"
-                  justify-content="center"
-                >
-                  <cx-icon name="hide_image" part="fallback-icon"> </cx-icon>
-                </cx-space>
-              </slot>
-            `)}
-        </div>
-      </cx-resize-observer>
-      ${V(this.resizable && this.isResizeActive, () => this.renderResizer())}
-    </div>`;
+          ${P(this.isError && this.fallback, () => D`<slot name="fallback" part="fallback"><cx-space class=${j({ fallback: !0 })} direction="column" align-items="center" justify-content="center"><cx-icon name="hide_image" part="fallback-icon"> </cx-icon></cx-space></slot>`)}</div></cx-resize-observer>${P(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
   }
 };
-l.styles = [We, _e, Qe];
+l.styles = [We, qe, ot];
 l.dependencies = {
-  "cx-icon": Te,
-  "cx-popup": Be,
-  "cx-resize-observer": Ze,
-  "cx-skeleton": Ie,
-  "cx-space": Ne
+  "cx-icon": _e,
+  "cx-popup": Ze,
+  "cx-resize-observer": Ne,
+  "cx-skeleton": Pe,
+  "cx-space": Ve
 };
-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([
-  H()
+m([
+  L()
 ], l.prototype, "isLoaded", 2);
-c([
-  H()
+m([
+  L()
 ], l.prototype, "isError", 2);
-c([
-  m({ reflect: !0, type: String })
+m([
+  L()
+], l.prototype, "_retryIndex", 2);
+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([
-  H()
+m([
+  d({ attribute: "retry-on-error", type: Boolean })
+], l.prototype, "retryOnError", 2);
+m([
+  d({ attribute: "max-retries", type: Number })
+], l.prototype, "maxRetries", 2);
+m([
+  L()
 ], l.prototype, "isZoomed", 2);
-c([
-  H()
+m([
+  L()
 ], l.prototype, "imageRatio", 2);
-c([
-  H()
+m([
+  L()
 ], l.prototype, "parsedAlt", 2);
-c([
-  H()
+m([
+  L()
 ], 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([
-  Ae("cx-image")
+l = m([
+  Te("cx-image")
 ], l);
 export {
   l as C,
-  Pe as H,
-  A as R,
+  Fe as H,
+  T as R,
   S as a,
   Y as b,
   U as c,
-  ue as d,
-  ge as e,
+  pe as d,
+  ue as e,
   ne as f,
-  _e as r
+  qe as r
 };