@orangelogic/design-system 4.3.0 → 4.4.0

package/library/chunks/{image.CCo__54F.js → image.BM7bPTub.js}

@@ -1,69 +1,69 @@
-import { r as $e, R as Re, H as K, a as ie, b as je } from "./resizable-component.styles.CAfXABBc.js";
+import { r as $e, R as je, H as K, a as ie, b as oe } from "./resizable-component.styles.kMFDlGgv.js";
 import { c as He } from "./component.styles.CAS3c9pM.js";
-import { a as oe } from "./index.Cpamj0jB.js";
-import { P as Te } from "./position-picker.qkbJlboF.js";
-import { c as Ae } from "./custom-element.L4WJXn1j.js";
+import { a as re } from "./index.Cpamj0jB.js";
+import { P as Ae } from "./position-picker.qkbJlboF.js";
+import { c as Te } from "./custom-element.L4WJXn1j.js";
 import { d as Oe } from "./debounce.DaHuiSGU.js";
-import { L as Ze } from "./i18n.Q5_2aVLU.js";
+import { L as Ze } from "./i18n.BSPmBQ73.js";
 import { w as M } from "./watch.DJF5K-8U.js";
 import { a as Ie } from "./url.CGdWC06g.js";
-import { i as le, E as X, x as L } from "./lit-element.jLBm65_O.js";
+import { i as he, E as X, x as R } from "./lit-element.jLBm65_O.js";
 import { n as p } from "./lib-cortex-element.CVMmyPMC.js";
 import { r as E } from "./state.CSDxrqLd.js";
 import { e as G } from "./query.BBf1UFkC.js";
-import { e as S } from "./class-map.BiVq-cVR.js";
-import { o as $ } from "./if-defined.BRoBj_Rp.js";
+import { e as L } from "./class-map.BiVq-cVR.js";
+import { o as S } from "./if-defined.BRoBj_Rp.js";
 import { i as Me } from "./keyed.DdOUTIg-.js";
 import { o as Pe } from "./style-map.llVFPd__.js";
-import { n as T } from "./when.Dr1es41R.js";
+import { n as A } from "./when.Dr1es41R.js";
 import { C as Fe } from "./icon.BLXWp6CU.js";
 import _e from "../components/popup.js";
 import Ne from "../components/resize-observer.js";
 import We from "../components/skeleton.js";
 import Be from "../components/space.js";
-var I = /* @__PURE__ */ ((i) => (i.Automatic = "automatic", i.Manual = "manual", i))(I || {});
+var I = /* @__PURE__ */ ((e) => (e.Automatic = "automatic", e.Manual = "manual", e))(I || {});
 /*! medium-zoom 1.1.0 | MIT License | https://github.com/francoischalifour/medium-zoom */
-var R = Object.assign || function(i) {
-  for (var t = 1; t < arguments.length; t++) {
-    var o = arguments[t];
+var $ = Object.assign || function(e) {
+  for (var i = 1; i < arguments.length; i++) {
+    var o = arguments[i];
     for (var h in o)
-      Object.prototype.hasOwnProperty.call(o, h) && (i[h] = o[h]);
-  }
-  return i;
-}, W = function(t) {
-  return t.tagName === "IMG";
-}, Ue = function(t) {
-  return NodeList.prototype.isPrototypeOf(t);
-}, B = function(t) {
-  return t && t.nodeType === 1;
-}, re = function(t) {
-  var o = t.currentSrc || t.src;
+      Object.prototype.hasOwnProperty.call(o, h) && (e[h] = o[h]);
+  }
+  return e;
+}, W = function(i) {
+  return i.tagName === "IMG";
+}, Ue = function(i) {
+  return NodeList.prototype.isPrototypeOf(i);
+}, B = function(i) {
+  return i && i.nodeType === 1;
+}, ae = function(i) {
+  var o = i.currentSrc || i.src;
   return o.substr(-4).toLowerCase() === ".svg";
-}, ne = function(t) {
+}, ne = function(i) {
   try {
-    return Array.isArray(t) ? t.filter(W) : Ue(t) ? [].slice.call(t).filter(W) : B(t) ? [t].filter(W) : typeof t == "string" ? [].slice.call(document.querySelectorAll(t)).filter(W) : [];
+    return Array.isArray(i) ? i.filter(W) : Ue(i) ? [].slice.call(i).filter(W) : B(i) ? [i].filter(W) : typeof i == "string" ? [].slice.call(document.querySelectorAll(i)).filter(W) : [];
   } 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`);
   }
-}, De = function(t) {
+}, De = function(i) {
   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, d = o.left, C = o.width, k = o.height, z = t.cloneNode(), U = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, P = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+  return o.classList.add("medium-zoom-overlay"), o.style.background = i, o;
+}, qe = function(i) {
+  var o = i.getBoundingClientRect(), h = o.top, d = o.left, C = o.width, k = o.height, z = i.cloneNode(), U = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, P = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
   return z.removeAttribute("id"), z.style.position = "absolute", z.style.top = h + U + "px", z.style.left = d + P + "px", z.style.width = C + "px", z.style.height = k + "px", z.style.transform = "", z;
-}, A = function(t, o) {
-  var h = R({
+}, T = function(i, o) {
+  var h = $({
     bubbles: !1,
     cancelable: !1,
     detail: void 0
   }, o);
   if (typeof window.CustomEvent == "function")
-    return new CustomEvent(t, h);
+    return new CustomEvent(i, h);
   var d = document.createEvent("CustomEvent");
-  return d.initCustomEvent(t, h.bubbles, h.cancelable, h.detail), d;
-}, Ve = function i(t) {
+  return d.initCustomEvent(i, h.bubbles, h.cancelable, h.detail), d;
+}, Ve = function e(i) {
   var o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, h = window.Promise || function(r) {
     function n() {
     }
@@ -76,7 +76,7 @@ See: https://github.com/francoischalifour/medium-zoom`);
     }
     y.indexOf(n) !== -1 && Q({ target: n });
   }, C = function() {
-    if (!(j || !e.original)) {
+    if (!(j || !t.original)) {
       var r = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
       Math.abs(ee - r) > c.scrollOffset && setTimeout(x, 150);
     }
@@ -85,18 +85,18 @@ See: https://github.com/francoischalifour/medium-zoom`);
     (n === "Escape" || n === "Esc" || n === 27) && x();
   }, z = function() {
     var r = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = r;
-    if (r.background && (_.style.background = r.background), r.container && r.container instanceof Object && (n.container = R({}, c.container, r.container)), r.template) {
+    if (r.background && (_.style.background = r.background), r.container && r.container instanceof Object && (n.container = $({}, c.container, r.container)), r.template) {
       var m = B(r.template) ? r.template : document.querySelector(r.template);
       n.template = m;
     }
-    return c = R({}, c, n), y.forEach(function(g) {
-      g.dispatchEvent(A("medium-zoom:update", {
+    return c = $({}, c, n), y.forEach(function(g) {
+      g.dispatchEvent(T("medium-zoom:update", {
         detail: { zoom: u }
       }));
     }), u;
   }, U = function() {
     var r = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    return i(R({}, c, r));
+    return e($({}, c, r));
   }, P = function() {
     for (var r = arguments.length, n = Array(r), m = 0; m < r; m++)
       n[m] = arguments[m];
@@ -113,26 +113,26 @@ See: https://github.com/francoischalifour/medium-zoom`);
         w.addEventListener(v, b, H);
       });
     }), u;
-  }, de = function() {
+  }, me = function() {
     for (var r = arguments.length, n = Array(r), m = 0; m < r; m++)
       n[m] = arguments[m];
-    e.zoomed && x();
+    t.zoomed && x();
     var g = n.length > 0 ? n.reduce(function(s, v) {
       return [].concat(s, ne(v));
     }, []) : y;
     return g.forEach(function(s) {
-      s.classList.remove("medium-zoom-image"), s.dispatchEvent(A("medium-zoom:detach", {
+      s.classList.remove("medium-zoom-image"), s.dispatchEvent(T("medium-zoom:detach", {
         detail: { zoom: u }
       }));
     }), y = y.filter(function(s) {
       return g.indexOf(s) === -1;
     }), u;
-  }, me = function(r, n) {
+  }, ge = function(r, n) {
     var m = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     return y.forEach(function(g) {
       g.addEventListener("medium-zoom:" + r, n, m);
     }), F.push({ type: "medium-zoom:" + r, listener: n, options: m }), u;
-  }, ge = function(r, n) {
+  }, ue = function(r, n) {
     var m = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     return y.forEach(function(g) {
       g.removeEventListener("medium-zoom:" + r, n, m);
@@ -151,19 +151,19 @@ See: https://github.com/francoischalifour/medium-zoom`);
       }, v = void 0, b = void 0;
       if (c.container)
         if (c.container instanceof Object)
-          s = R({}, s, c.container), v = s.width - s.left - s.right - c.margin * 2, b = s.height - s.top - s.bottom - c.margin * 2;
+          s = $({}, s, c.container), v = s.width - s.left - s.right - c.margin * 2, b = s.height - s.top - s.bottom - c.margin * 2;
         else {
-          var H = B(c.container) ? c.container : document.querySelector(c.container), w = H.getBoundingClientRect(), D = w.width, ve = w.height, ye = w.left, be = w.top;
-          s = R({}, s, {
+          var H = B(c.container) ? c.container : document.querySelector(c.container), w = H.getBoundingClientRect(), D = w.width, ye = w.height, be = w.left, ze = w.top;
+          s = $({}, s, {
             width: D,
-            height: ve,
-            left: ye,
-            top: be
+            height: ye,
+            left: be,
+            top: ze
           });
         }
       v = v || s.width - c.margin * 2, b = b || s.height - c.margin * 2;
-      var Z = e.zoomedHd || e.original, ze = re(Z) ? v : Z.naturalWidth || v, xe = re(Z) ? b : Z.naturalHeight || b, N = Z.getBoundingClientRect(), we = N.top, Ee = N.left, q = N.width, V = N.height, Ce = Math.min(Math.max(q, ze), v) / q, ke = Math.min(Math.max(V, xe), b) / V, Y = Math.min(Ce, ke), Le = (-Ee + (v - q) / 2 + c.margin + s.left) / Y, Se = (-we + (b - V) / 2 + c.margin + s.top) / Y, te = "scale(" + Y + ") translate3d(" + Le + "px, " + Se + "px, 0)";
-      e.zoomed.style.transform = te, e.zoomedHd && (e.zoomedHd.style.transform = te);
+      var Z = t.zoomedHd || t.original, xe = ae(Z) ? v : Z.naturalWidth || v, we = ae(Z) ? b : Z.naturalHeight || b, N = Z.getBoundingClientRect(), Ee = N.top, Ce = N.left, q = N.width, V = N.height, ke = Math.min(Math.max(q, xe), v) / q, Re = Math.min(Math.max(V, we), b) / V, Y = Math.min(ke, Re), Le = (-Ce + (v - q) / 2 + c.margin + s.left) / Y, Se = (-Ee + (b - V) / 2 + c.margin + s.top) / Y, te = "scale(" + Y + ") translate3d(" + Le + "px, " + Se + "px, 0)";
+      t.zoomed.style.transform = te, t.zoomedHd && (t.zoomedHd.style.transform = te);
     };
     return new h(function(g) {
       if (n && y.indexOf(n) === -1) {
@@ -171,78 +171,78 @@ See: https://github.com/francoischalifour/medium-zoom`);
         return;
       }
       var s = function D() {
-        j = !1, e.zoomed.removeEventListener("transitionend", D), e.original.dispatchEvent(A("medium-zoom:opened", {
+        j = !1, t.zoomed.removeEventListener("transitionend", D), t.original.dispatchEvent(T("medium-zoom:opened", {
           detail: { zoom: u }
         })), g(u);
       };
-      if (e.zoomed) {
+      if (t.zoomed) {
         g(u);
         return;
       }
       if (n)
-        e.original = n;
+        t.original = n;
       else if (y.length > 0) {
         var v = y;
-        e.original = v[0];
+        t.original = v[0];
       } else {
         g(u);
         return;
       }
-      if (e.original.dispatchEvent(A("medium-zoom:open", {
+      if (t.original.dispatchEvent(T("medium-zoom:open", {
         detail: { zoom: u }
-      })), ee = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, j = !0, e.zoomed = qe(e.original), document.body.appendChild(_), c.template) {
+      })), ee = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, j = !0, t.zoomed = qe(t.original), document.body.appendChild(_), c.template) {
         var b = B(c.template) ? c.template : document.querySelector(c.template);
-        e.template = document.createElement("div"), e.template.appendChild(b.content.cloneNode(!0)), document.body.appendChild(e.template);
+        t.template = document.createElement("div"), t.template.appendChild(b.content.cloneNode(!0)), document.body.appendChild(t.template);
       }
-      if (e.original.parentElement && e.original.parentElement.tagName === "PICTURE" && e.original.currentSrc && (e.zoomed.src = e.original.currentSrc), document.body.appendChild(e.zoomed), window.requestAnimationFrame(function() {
+      if (t.original.parentElement && t.original.parentElement.tagName === "PICTURE" && t.original.currentSrc && (t.zoomed.src = t.original.currentSrc), document.body.appendChild(t.zoomed), window.requestAnimationFrame(function() {
         document.body.classList.add("medium-zoom--opened");
-      }), e.original.classList.add("medium-zoom-image--hidden"), e.zoomed.classList.add("medium-zoom-image--opened"), e.zoomed.addEventListener("click", x), e.zoomed.addEventListener("transitionend", s), e.original.getAttribute("data-zoom-src")) {
-        e.zoomedHd = e.zoomed.cloneNode(), e.zoomedHd.removeAttribute("srcset"), e.zoomedHd.removeAttribute("sizes"), e.zoomedHd.removeAttribute("loading"), e.zoomedHd.src = e.zoomed.getAttribute("data-zoom-src"), e.zoomedHd.onerror = function() {
-          clearInterval(H), console.warn("Unable to reach the zoom image target " + e.zoomedHd.src), e.zoomedHd = null, m();
+      }), t.original.classList.add("medium-zoom-image--hidden"), t.zoomed.classList.add("medium-zoom-image--opened"), t.zoomed.addEventListener("click", x), t.zoomed.addEventListener("transitionend", s), t.original.getAttribute("data-zoom-src")) {
+        t.zoomedHd = t.zoomed.cloneNode(), t.zoomedHd.removeAttribute("srcset"), t.zoomedHd.removeAttribute("sizes"), t.zoomedHd.removeAttribute("loading"), t.zoomedHd.src = t.zoomed.getAttribute("data-zoom-src"), t.zoomedHd.onerror = function() {
+          clearInterval(H), console.warn("Unable to reach the zoom image target " + t.zoomedHd.src), t.zoomedHd = null, m();
         };
         var H = setInterval(function() {
-          e.zoomedHd.complete && (clearInterval(H), e.zoomedHd.classList.add("medium-zoom-image--opened"), e.zoomedHd.addEventListener("click", x), document.body.appendChild(e.zoomedHd), m());
+          t.zoomedHd.complete && (clearInterval(H), t.zoomedHd.classList.add("medium-zoom-image--opened"), t.zoomedHd.addEventListener("click", x), document.body.appendChild(t.zoomedHd), m());
         }, 10);
-      } else if (e.original.hasAttribute("srcset")) {
-        e.zoomedHd = e.zoomed.cloneNode(), e.zoomedHd.removeAttribute("sizes"), e.zoomedHd.removeAttribute("loading");
-        var w = e.zoomedHd.addEventListener("load", function() {
-          e.zoomedHd.removeEventListener("load", w), e.zoomedHd.classList.add("medium-zoom-image--opened"), e.zoomedHd.addEventListener("click", x), document.body.appendChild(e.zoomedHd), m();
+      } else if (t.original.hasAttribute("srcset")) {
+        t.zoomedHd = t.zoomed.cloneNode(), t.zoomedHd.removeAttribute("sizes"), t.zoomedHd.removeAttribute("loading");
+        var w = t.zoomedHd.addEventListener("load", function() {
+          t.zoomedHd.removeEventListener("load", w), t.zoomedHd.classList.add("medium-zoom-image--opened"), t.zoomedHd.addEventListener("click", x), document.body.appendChild(t.zoomedHd), m();
         });
       } else
         m();
     });
   }, x = function() {
     return new h(function(r) {
-      if (j || !e.original) {
+      if (j || !t.original) {
         r(u);
         return;
       }
       var n = function m() {
-        e.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(e.zoomed), e.zoomedHd && document.body.removeChild(e.zoomedHd), document.body.removeChild(_), e.zoomed.classList.remove("medium-zoom-image--opened"), e.template && document.body.removeChild(e.template), j = !1, e.zoomed.removeEventListener("transitionend", m), e.original.dispatchEvent(A("medium-zoom:closed", {
+        t.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(t.zoomed), t.zoomedHd && document.body.removeChild(t.zoomedHd), document.body.removeChild(_), t.zoomed.classList.remove("medium-zoom-image--opened"), t.template && document.body.removeChild(t.template), j = !1, t.zoomed.removeEventListener("transitionend", m), t.original.dispatchEvent(T("medium-zoom:closed", {
           detail: { zoom: u }
-        })), e.original = null, e.zoomed = null, e.zoomedHd = null, e.template = null, r(u);
+        })), t.original = null, t.zoomed = null, t.zoomedHd = null, t.template = null, r(u);
       };
-      j = !0, document.body.classList.remove("medium-zoom--opened"), e.zoomed.style.transform = "", e.zoomedHd && (e.zoomedHd.style.transform = ""), e.template && (e.template.style.transition = "opacity 150ms", e.template.style.opacity = 0), e.original.dispatchEvent(A("medium-zoom:close", {
+      j = !0, document.body.classList.remove("medium-zoom--opened"), t.zoomed.style.transform = "", t.zoomedHd && (t.zoomedHd.style.transform = ""), t.template && (t.template.style.transition = "opacity 150ms", t.template.style.opacity = 0), t.original.dispatchEvent(T("medium-zoom:close", {
         detail: { zoom: u }
-      })), e.zoomed.addEventListener("transitionend", n);
+      })), t.zoomed.addEventListener("transitionend", n);
     });
   }, Q = function() {
     var r = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = r.target;
-    return e.original ? x() : J({ target: n });
-  }, ue = function() {
-    return c;
+    return t.original ? x() : J({ target: n });
   }, pe = function() {
-    return y;
+    return c;
   }, fe = function() {
-    return e.original;
-  }, y = [], F = [], j = !1, ee = 0, c = o, e = {
+    return y;
+  }, ve = function() {
+    return t.original;
+  }, y = [], F = [], j = !1, ee = 0, c = o, t = {
     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]" ? c = t : (t || typeof t == "string") && P(t), c = R({
+  Object.prototype.toString.call(i) === "[object Object]" ? c = i : (i || typeof i == "string") && P(i), c = $({
     margin: 0,
     background: "#fff",
     scrollOffset: 40,
@@ -258,26 +258,26 @@ See: https://github.com/francoischalifour/medium-zoom`);
     update: z,
     clone: U,
     attach: P,
-    detach: de,
-    on: me,
-    off: ge,
-    getOptions: ue,
-    getImages: pe,
-    getZoomedImage: fe
+    detach: me,
+    on: ge,
+    off: ue,
+    getOptions: pe,
+    getImages: fe,
+    getZoomedImage: ve
   };
   return u;
 };
-function Ye(i, t) {
-  t === void 0 && (t = {});
-  var o = t.insertAt;
+function Ye(e, i) {
+  i === void 0 && (i = {});
+  var o = i.insertAt;
   if (!(typeof document > "u")) {
     var h = document.head || document.getElementsByTagName("head")[0], d = document.createElement("style");
-    d.type = "text/css", o === "top" && h.firstChild ? h.insertBefore(d, h.firstChild) : h.appendChild(d), d.styleSheet ? d.styleSheet.cssText = i : d.appendChild(document.createTextNode(i));
+    d.type = "text/css", o === "top" && h.firstChild ? h.insertBefore(d, h.firstChild) : h.appendChild(d), d.styleSheet ? d.styleSheet.cssText = e : d.appendChild(document.createTextNode(e));
   }
 }
 var Ke = ".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}";
 Ye(Ke);
-const Xe = le`: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))}:host([effect=zoom][zoom-style=pop-out]){overflow-clip-margin:var(--column-padding,10px);overflow:clip}.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)}`, Ge = le`
+const Xe = he`: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))}:host([effect=zoom][zoom-style=pop-out]){overflow-clip-margin:var(--column-padding,10px);overflow:clip}.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)}`, Ge = he`
   :host {
     --justify-content: flex-start;
     --border-radius: 0px;
@@ -405,6 +405,19 @@ const Xe = le`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
     outline: none;
   }
 
+  .highlighter--loading-ratio {
+    aspect-ratio: var(--image-loading-aspect-ratio);
+    height: auto;
+    min-height: 0;
+  }
+
+  /* Jump/Zoom put the image in the popup's anchor slot; its host is display: contents. */
+  .highlighter--loading-ratio > .highlightable-item,
+  .highlighter--loading-ratio > .popup-container > .highlightable-item[slot='anchor'] {
+    position: absolute;
+    inset: 0;
+  }
+
   .highlighter--centered {
     display: flex;
     justify-content: center;
@@ -622,16 +635,16 @@ const Xe = le`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
     color: var(--fallback-icon-color);
   }
 `;
-var Je = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, he = (i) => {
-  throw TypeError(i);
-}, l = (i, t, o, h) => {
-  for (var d = h > 1 ? void 0 : h ? Qe(t, o) : t, C = i.length - 1, k; C >= 0; C--)
-    (k = i[C]) && (d = (h ? k(t, o, d) : k(d)) || d);
-  return h && d && Je(t, o, d), d;
-}, ce = (i, t, o) => t.has(i) || he("Cannot " + o), ae = (i, t, o) => (ce(i, t, "read from private field"), o ? o.call(i) : t.get(i)), et = (i, t, o) => t.has(i) ? he("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, o), se = (i, t, o, h) => (ce(i, t, "write to private field"), t.set(i, o), o), O;
-let a = class extends Re {
+var Je = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, ce = (e) => {
+  throw TypeError(e);
+}, l = (e, i, o, h) => {
+  for (var d = h > 1 ? void 0 : h ? Qe(i, o) : i, C = e.length - 1, k; C >= 0; C--)
+    (k = e[C]) && (d = (h ? k(i, o, d) : k(d)) || d);
+  return h && d && Je(i, o, d), d;
+}, de = (e, i, o) => i.has(e) || ce("Cannot " + o), se = (e, i, o) => (de(e, i, "read from private field"), o ? o.call(e) : i.get(e)), et = (e, i, o) => i.has(e) ? ce("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, o), le = (e, i, o, h) => (de(e, i, "write to private field"), i.set(e, o), o), O;
+let a = class extends je {
   constructor() {
-    super(...arguments), this.localize = new Ze(this), this.retryCount = 0, this.retryTimer = null, this.isLoaded = !1, this.isError = !1, this.isRetrying = !1, this.retryIndex = 0, this.src = "", this.srcset = "", this.sizes = "", this.placeholder = "", this.alt = "", this.objectFit = oe.Fill, this.cropFocus = Te.CenterCenter, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.noCrossorigin = !1, this.clickHandlerType = I.Automatic, this.retryOnError = !1, this.maxRetries = 10, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null, et(this, O, "");
+    super(...arguments), this.localize = new Ze(this), this.retryCount = 0, this.retryTimer = null, this.isLoaded = !1, this.isError = !1, this.isRetrying = !1, this.retryIndex = 0, this.src = "", this.aspectRatio = 0, this.srcset = "", this.sizes = "", this.placeholder = "", this.alt = "", this.objectFit = re.Fill, this.cropFocus = Ae.CenterCenter, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.noCrossorigin = !1, this.clickHandlerType = I.Automatic, this.retryOnError = !1, this.maxRetries = 10, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null, et(this, O, "");
   }
   get currentAltValue() {
     return this.alt;
@@ -651,7 +664,7 @@ let a = class extends Re {
    * the focal point must instead be applied by aligning the `<img>` within this flex parent.
    */
   get highlighterCropFocusClass() {
-    return this.objectFit === oe.Contain ? { [`highlightable-item--crop-focus-${this.cropFocus}`]: !0 } : {};
+    return this.objectFit === re.Contain ? { [`highlightable-item--crop-focus-${this.cropFocus}`]: !0 } : {};
   }
   get highlighterClass() {
     return {
@@ -661,13 +674,26 @@ let a = class extends Re {
       ...this.highlighterCropFocusClass
     };
   }
+  get currentAspectRatio() {
+    return this.aspectRatio;
+  }
+  get loadingAspectRatio() {
+    const e = this.currentAspectRatio;
+    return this.heightMode === ie.Auto && !this.isLoaded && !this.isEmpty && Number.isFinite(e) && e > 0 ? e : void 0;
+  }
+  getHighlighterClass(e = !1) {
+    return {
+      ...super.getHighlighterClass(e),
+      "highlighter--loading-ratio": this.loadingAspectRatio !== void 0
+    };
+  }
   get imageClass() {
-    let i = "landscape", t = this.ratio;
+    let e = "landscape", i = this.ratio;
     const o = this.width.endsWith("%") ? this.clientWidth : Number.parseFloat(this.width), h = this.isResizing ? this.resizeSize.width : o, d = this.isResizing ? this.resizeSize.height : Number.parseFloat(this.height);
-    return h && d && (t = h / d), t > this.imageRatio && (i = "portrait"), {
+    return h && d && (i = h / d), i > this.imageRatio && (e = "portrait"), {
       image: !0,
       [`image--${this.objectFit}`]: !0,
-      [`image--${i}`]: !0,
+      [`image--${e}`]: !0,
       [`image--height-${this.heightMode}`]: !0,
       [`image--crop-focus-${this.cropFocus}`]: !0,
       "image--can-zoom": this.canZoom,
@@ -727,8 +753,8 @@ let a = class extends Re {
   handleBlur() {
     this.isZoomed && this.zoom?.close();
   }
-  handleKeyDown(i) {
-    i.target === this.highlighterElement && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this.highlighterElement.click());
+  handleKeyDown(e) {
+    e.target === this.highlighterElement && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.highlighterElement.click());
   }
   async handleCanZoomChange() {
     await this.updateComplete, this.hasZoomAction ? this.initZoom() : (this.zoom?.detach(), this.zoom = null);
@@ -737,20 +763,20 @@ let a = class extends Re {
     await this.updateComplete, this.requestUpdate();
   }
   handleSrcChange() {
-    this.isLoaded = !1, this.isError = !1, this.isRetrying = !1, this.retryCount = 0, this.retryIndex = 0, se(this, O, ""), this.clearRetryTimer();
+    this.isLoaded = !1, this.isError = !1, this.isRetrying = !1, this.retryCount = 0, this.retryIndex = 0, le(this, O, ""), this.clearRetryTimer();
   }
   clearRetryTimer() {
     this.retryTimer !== null && (clearTimeout(this.retryTimer), this.retryTimer = null);
   }
   scheduleRetry() {
-    const i = Math.min(1e3 * Math.pow(2, this.retryCount - 1), 1e4);
+    const e = Math.min(1e3 * Math.pow(2, this.retryCount - 1), 1e4);
     this.retryTimer = setTimeout(() => {
-      this.retryTimer = null, se(this, O, `${this.retryCount}-${Math.random().toString(36).slice(2)}`), this.retryIndex += 1;
-    }, i);
+      this.retryTimer = null, le(this, O, `${this.retryCount}-${Math.random().toString(36).slice(2)}`), this.retryIndex += 1;
+    }, e);
   }
   /** Appends the retry cache-bust param to `src` while a retry attempt is in flight, so a CDN edge caching a corrupted/truncated response is bypassed in favor of a fresh origin fetch. */
-  applyRetryCacheBust(i) {
-    return this.retryIndex === 0 || !ae(this, O) || !i ? i : Ie(i, "cachebust", ae(this, O));
+  applyRetryCacheBust(e) {
+    return this.retryIndex === 0 || !se(this, O) || !e ? e : Ie(e, "cachebust", se(this, O));
   }
   async initZoom() {
     this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = Ve(this.zoomImageElement, {
@@ -763,11 +789,11 @@ let a = class extends Re {
       this.emit("cx-image-zoom-close"), this.isZoomed = !1;
     }));
   }
-  handleLoad(i) {
-    const t = i?.currentTarget ?? this.imageElement;
-    if (!t)
+  handleLoad(e) {
+    const i = e?.currentTarget ?? this.imageElement;
+    if (!i)
       return;
-    const { naturalHeight: o, naturalWidth: h } = t;
+    const { naturalHeight: o, naturalWidth: h } = i;
     this.imageRatio = h / o, this.clearRetryTimer(), this.retryCount = 0, this.isRetrying = !1, this.isLoaded || this.emit("cx-load"), this.isLoaded = !0, this.isError = !1;
   }
   handleError() {
@@ -778,68 +804,70 @@ let a = class extends Re {
     this.isRetrying = !1, this.emit("cx-error"), this.isLoaded = !0, this.isError = !0;
   }
   handleSizeChange() {
-    const i = this.resizeDirection !== ie.Vertical, t = this.resizeDirection !== ie.Horizontal, o = this.isResizing ? `${this.resizeSize.width}px` : this.width, h = this.isResizing ? `${this.resizeSize.height}px` : this.height;
-    i && (this.width || this.isResizing ? this.style.setProperty("--width", o) : this.style.removeProperty("--width")), t && (this.heightMode !== je.Auto && (this.height || this.isResizing) ? this.style.setProperty("--height", h) : this.style.removeProperty("--height"));
+    const e = this.resizeDirection !== oe.Vertical, i = this.resizeDirection !== oe.Horizontal, o = this.isResizing ? `${this.resizeSize.width}px` : this.width, h = this.isResizing ? `${this.resizeSize.height}px` : this.height;
+    e && (this.width || this.isResizing ? this.style.setProperty("--width", o) : this.style.removeProperty("--width")), i && (this.heightMode !== ie.Auto && (this.height || this.isResizing) ? this.style.setProperty("--height", h) : this.style.removeProperty("--height"));
   }
-  handleResize(i) {
-    const { entries: t } = i.detail;
-    for (const o of t)
+  handleResize(e) {
+    const { entries: i } = e.detail;
+    for (const o of i)
       o.target === this.highlighterElement && this.width.endsWith("%") && !this.isResizing && Math.abs(o.contentRect.width - (this.lastPatchedWidth ?? 0)) > 1 && this.updateLastPatchedWidth(o.contentRect.width);
   }
-  updateLastPatchedWidth(i) {
-    this.lastPatchedWidth = i, this.requestUpdate();
+  updateLastPatchedWidth(e) {
+    this.lastPatchedWidth = e, this.requestUpdate();
   }
   /**
    * Support CMS5 click action for the image.
    */
-  handleClickAction(i) {
-    !(i.target instanceof HTMLElement) || this.clickHandlerType === I.Manual || this.canZoom && this.openZoom();
+  handleClickAction(e) {
+    !(e.target instanceof HTMLElement) || this.clickHandlerType === I.Manual || this.canZoom && this.openZoom();
   }
-  updated(i) {
-    super.updated(i), (i.has("width") || i.has("height") || i.has("heightMode") || i.has("resizeSize")) && this.handleSizeChange();
+  updated(e) {
+    super.updated(e);
+    const i = this.loadingAspectRatio;
+    i !== void 0 ? this.style.setProperty("--image-loading-aspect-ratio", String(i)) : this.style.removeProperty("--image-loading-aspect-ratio"), (e.has("width") || e.has("height") || e.has("heightMode") || e.has("resizeSize")) && this.handleSizeChange();
   }
   openZoom() {
     this.zoom && this.zoom.open();
   }
   renderContent() {
-    const i = this.applyRetryCacheBust(this.currentSrc), t = this.currentAltValue;
+    const e = this.applyRetryCacheBust(this.currentSrc), i = this.currentAltValue;
     if (this.retryOnError) {
       if (this.isError && this.retryCount >= this.maxRetries)
         return X;
     } else if (this.isError)
       return X;
-    return L`<div part="content" slot="anchor" class=${S(this.highlighterClass)}>${Me(
+    return R`<div part="content" slot="anchor" class=${L(this.highlighterClass)}>${Me(
       this.retryIndex,
-      L`<img part="image" class=${S(this.imageClass)} src=${i || this.placeholder} srcset=${$(this.srcset || void 0)} sizes=${$(this.sizes || void 0)} alt=${t} aria-label=${t} crossorigin=${$(this.crossorigin)} @load=${this.handleLoad} @error=${this.handleError} loading=${this.retryIndex > 0 ? "eager" : this.htmlLoading} decoding="async" width=${$(this.width || void 0)} height=${$(this.height || void 0)}>`
+      R`<img part="image" class=${L(this.imageClass)} src=${e || this.placeholder} srcset=${S(this.srcset || void 0)} sizes=${S(this.sizes || void 0)} alt=${i} aria-label=${i} crossorigin=${S(this.crossorigin)} @load=${this.handleLoad} @error=${this.handleError} loading=${this.retryIndex > 0 ? "eager" : this.htmlLoading} decoding="async" width=${S(this.width || void 0)} height=${S(this.height || void 0)}>`
     )}</div>`;
   }
   render() {
-    const i = this.hasZoomAction, t = this.currentAltValue;
-    return L`<div part="base" class=${S({
+    const e = this.hasZoomAction, i = this.currentAltValue;
+    return R`<div part="base" class=${L({
       container: !0,
       "container--empty": this.isEmpty,
       "container--loading": this.loading,
       "container--resizing": this.resizable && this.isResizeActive
     })} style=${Pe({
       "--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=${$(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${t} aria-roledescription=${this.localize.term("image")} class=${S(this.isEmpty ? {} : this.getHighlighterClass(this.isError))} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${T(
+    })} data-empty-label=${this.localize.term("emptyImage")} @click=${this.startResizing} @keydown=${this.handleKeyDown}><cx-resize-observer @cx-resize=${this.handleResize}><div part="highlighter" tabindex=${S(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${i} aria-roledescription=${this.localize.term("image")} class=${L(this.isEmpty ? {} : this.getHighlighterClass(this.isError))} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${A(
       this.isEmpty,
       () => X,
-      () => T(
+      () => A(
         this.effect === K.Jump || this.effect === K.Zoom,
-        () => L`<cx-popup class="popup-container" strategy="absolute" active placement="center" sync="both">${this.renderContent()}</cx-popup>`,
+        () => R`<cx-popup class="popup-container" strategy="absolute" active placement="center" sync="both">${this.renderContent()}</cx-popup>`,
         () => this.renderContent()
       )
-    )}<div class="zoom-image-container">${T(
-      i,
-      () => L`<img part="zoom-image" class=${S({
+    )}<div class="zoom-image-container">${A(
+      e,
+      () => R`<img part="zoom-image" class=${L({
         "zoom-image": !0,
         "zoom-image--hidden": !this.isZoomed
-      })} src=${this.applyRetryCacheBust(this.currentSrc) || this.placeholder} alt="" aria-hidden="true" decoding="async" draggable="false" crossorigin=${$(this.crossorigin)}>`
-    )}</div>${T(this.showPlaceholderSkeleton, () => L`<slot name="skeleton" part="skeleton"><div class=${S({
+      })} src=${this.applyRetryCacheBust(this.currentSrc) || this.placeholder} alt="" aria-hidden="true" decoding="async" draggable="false" crossorigin=${S(this.crossorigin)}>`
+    )}</div>${A(this.showPlaceholderSkeleton, () => R`<slot name="skeleton" part="skeleton"><div class=${L({
       skeleton: !0
     })}><cx-skeleton effect="none" role="status" aria-live="polite" aria-label=${this.localize.term("loading")}></cx-skeleton></div></slot>`)}
-          ${T(this.isError, () => L`<slot name="fallback" part="fallback"><cx-space class=${S({ 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>${T(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
+          ${A(this.isError, () => R`<slot name="fallback" part="fallback"><cx-space class=${L({ 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>${A(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
   }
 };
 O = /* @__PURE__ */ new WeakMap();
@@ -875,6 +903,9 @@ l([
 l([
   p({ reflect: !0, type: String })
 ], a.prototype, "src", 2);
+l([
+  p({ attribute: "aspect-ratio", reflect: !0, type: Number })
+], a.prototype, "aspectRatio", 2);
 l([
   p({ reflect: !0, type: String })
 ], a.prototype, "srcset", 2);
@@ -950,7 +981,7 @@ l([
   Oe(100)
 ], a.prototype, "updateLastPatchedWidth", 1);
 a = l([
-  Ae("cx-image")
+  Te("cx-image")
 ], a);
 export {
   a as C,