@orangelogic/design-system 3.1.0 → 3.2.0

package/library/chunks/{image.CTMzUqCC.js → image.B-4cVbol.js}

@@ -1,27 +1,26 @@
-import { r as Re, R as Se, H as V, a as ie, b as $e } from "./resizable-component.styles.CAfXABBc.js";
+import { r as Se, R as Re, H as K, a as ie, b as $e } from "./resizable-component.styles.CAfXABBc.js";
 import { c as He } from "./component.styles.CRO4Odto.js";
 import { a as Te } from "./index.Cpamj0jB.js";
 import { c as Ae } from "./custom-element.L4WJXn1j.js";
 import { d as Oe } from "./debounce.DaHuiSGU.js";
-import { L as je } from "./i18n.DbXTTLXx.js";
-import { w as I } from "./watch.DJF5K-8U.js";
+import { L as je } from "./i18n.BA19xtyU.js";
+import { w as M } from "./watch.DJF5K-8U.js";
 import { a as Ze } from "./url.CGdWC06g.js";
-import { i as se, E as K, x as E } from "./lit-element.jLBm65_O.js";
-import { n as v } from "./lib-cortex-element.CVMmyPMC.js";
-import { r as k } from "./state.CSDxrqLd.js";
+import { i as se, E as X, x as L } 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 C } from "./class-map.BiVq-cVR.js";
-import { o as X } from "./if-defined.BRoBj_Rp.js";
+import { e as S } from "./class-map.BiVq-cVR.js";
+import { o as R } from "./if-defined.BRoBj_Rp.js";
 import { i as Ie } from "./keyed.DdOUTIg-.js";
 import { o as Me } from "./style-map.llVFPd__.js";
-import { n as S } from "./when.Dr1es41R.js";
+import { n as A } from "./when.Dr1es41R.js";
 import { C as _e } from "./icon.CpHbi8tH.js";
 import Pe from "../components/popup.js";
 import Ne from "../components/resize-observer.js";
 import We from "../components/skeleton.js";
 import Be from "../components/space.js";
-import Fe from "../components/spinner.js";
-var Z = /* @__PURE__ */ ((i) => (i.Automatic = "automatic", i.Manual = "manual", i))(Z || {});
+var I = /* @__PURE__ */ ((i) => (i.Automatic = "automatic", i.Manual = "manual", i))(I || {});
 /*! medium-zoom 1.1.0 | MIT License | https://github.com/francoischalifour/medium-zoom */
 var $ = Object.assign || function(i) {
   for (var t = 1; t < arguments.length; t++) {
@@ -30,30 +29,30 @@ var $ = Object.assign || function(i) {
       Object.prototype.hasOwnProperty.call(o, l) && (i[l] = o[l]);
   }
   return i;
-}, W = function(t) {
+}, B = function(t) {
   return t.tagName === "IMG";
-}, Ue = function(t) {
+}, Fe = function(t) {
   return NodeList.prototype.isPrototypeOf(t);
-}, B = function(t) {
+}, F = function(t) {
   return t && t.nodeType === 1;
 }, oe = function(t) {
   var o = t.currentSrc || t.src;
   return o.substr(-4).toLowerCase() === ".svg";
 }, re = function(t) {
   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(t) ? t.filter(B) : Fe(t) ? [].slice.call(t).filter(B) : F(t) ? [t].filter(B) : typeof t == "string" ? [].slice.call(document.querySelectorAll(t)).filter(B) : [];
   } 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) {
+}, Ue = 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(), l = o.top, c = o.left, L = o.width, R = o.height, b = t.cloneNode(), F = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, M = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
-  return b.removeAttribute("id"), b.style.position = "absolute", b.style.top = l + F + "px", b.style.left = c + M + "px", b.style.width = L + "px", b.style.height = R + "px", b.style.transform = "", b;
-}, A = function(t, o) {
+}, De = function(t) {
+  var o = t.getBoundingClientRect(), l = o.top, c = o.left, C = o.width, k = o.height, b = t.cloneNode(), U = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, _ = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+  return b.removeAttribute("id"), b.style.position = "absolute", b.style.top = l + U + "px", b.style.left = c + _ + "px", b.style.width = C + "px", b.style.height = k + "px", b.style.transform = "", b;
+}, O = function(t, o) {
   var l = $({
     bubbles: !1,
     cancelable: !1,
@@ -63,106 +62,106 @@ See: https://github.com/francoischalifour/medium-zoom`);
     return new CustomEvent(t, l);
   var c = document.createEvent("CustomEvent");
   return c.initCustomEvent(t, l.bubbles, l.cancelable, l.detail), c;
-}, Ye = function i(t) {
+}, qe = function i(t) {
   var o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, l = window.Promise || function(r) {
     function a() {
     }
     r(a, a);
   }, c = function(r) {
     var a = r.target;
-    if (a === P) {
+    if (a === N) {
       x();
       return;
     }
     y.indexOf(a) !== -1 && Q({ target: a });
-  }, L = function() {
+  }, C = function() {
     if (!(H || !e.original)) {
       var r = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
       Math.abs(ee - r) > d.scrollOffset && setTimeout(x, 150);
     }
-  }, R = function(r) {
+  }, k = function(r) {
     var a = r.key || r.keyCode;
     (a === "Escape" || a === "Esc" || a === 27) && x();
   }, b = function() {
     var r = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, a = r;
-    if (r.background && (P.style.background = r.background), r.container && r.container instanceof Object && (a.container = $({}, d.container, r.container)), r.template) {
-      var m = B(r.template) ? r.template : document.querySelector(r.template);
+    if (r.background && (N.style.background = r.background), r.container && r.container instanceof Object && (a.container = $({}, d.container, r.container)), r.template) {
+      var m = F(r.template) ? r.template : document.querySelector(r.template);
       a.template = m;
     }
     return d = $({}, d, a), y.forEach(function(g) {
-      g.dispatchEvent(A("medium-zoom:update", {
+      g.dispatchEvent(O("medium-zoom:update", {
         detail: { zoom: u }
       }));
     }), u;
-  }, F = function() {
+  }, U = function() {
     var r = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return i($({}, d, r));
-  }, M = function() {
+  }, _ = function() {
     for (var r = arguments.length, a = Array(r), m = 0; m < r; m++)
       a[m] = arguments[m];
-    var g = a.reduce(function(n, f) {
-      return [].concat(n, re(f));
+    var g = a.reduce(function(s, v) {
+      return [].concat(s, re(v));
     }, []);
-    return g.filter(function(n) {
-      return y.indexOf(n) === -1;
-    }).forEach(function(n) {
-      y.push(n), n.classList.add("medium-zoom-image");
-    }), _.forEach(function(n) {
-      var f = n.type, z = n.listener, T = n.options;
+    return g.filter(function(s) {
+      return y.indexOf(s) === -1;
+    }).forEach(function(s) {
+      y.push(s), s.classList.add("medium-zoom-image");
+    }), P.forEach(function(s) {
+      var v = s.type, z = s.listener, T = s.options;
       g.forEach(function(w) {
-        w.addEventListener(f, z, T);
+        w.addEventListener(v, z, T);
       });
     }), u;
   }, de = function() {
     for (var r = arguments.length, a = Array(r), m = 0; m < r; m++)
       a[m] = arguments[m];
     e.zoomed && x();
-    var g = a.length > 0 ? a.reduce(function(n, f) {
-      return [].concat(n, re(f));
+    var g = a.length > 0 ? a.reduce(function(s, v) {
+      return [].concat(s, re(v));
     }, []) : y;
-    return g.forEach(function(n) {
-      n.classList.remove("medium-zoom-image"), n.dispatchEvent(A("medium-zoom:detach", {
+    return g.forEach(function(s) {
+      s.classList.remove("medium-zoom-image"), s.dispatchEvent(O("medium-zoom:detach", {
         detail: { zoom: u }
       }));
-    }), y = y.filter(function(n) {
-      return g.indexOf(n) === -1;
+    }), y = y.filter(function(s) {
+      return g.indexOf(s) === -1;
     }), u;
   }, ce = function(r, a) {
     var m = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     return y.forEach(function(g) {
       g.addEventListener("medium-zoom:" + r, a, m);
-    }), _.push({ type: "medium-zoom:" + r, listener: a, options: m }), u;
+    }), P.push({ type: "medium-zoom:" + r, listener: a, options: m }), u;
   }, me = function(r, a) {
     var m = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     return y.forEach(function(g) {
       g.removeEventListener("medium-zoom:" + r, a, m);
-    }), _ = _.filter(function(g) {
+    }), P = P.filter(function(g) {
       return !(g.type === "medium-zoom:" + r && g.listener.toString() === a.toString());
     }), u;
   }, J = function() {
     var r = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, a = r.target, m = function() {
-      var n = {
+      var s = {
         width: document.documentElement.clientWidth,
         height: document.documentElement.clientHeight,
         left: 0,
         top: 0,
         right: 0,
         bottom: 0
-      }, f = void 0, z = void 0;
+      }, v = void 0, z = void 0;
       if (d.container)
         if (d.container instanceof Object)
-          n = $({}, n, d.container), f = n.width - n.left - n.right - d.margin * 2, z = n.height - n.top - n.bottom - d.margin * 2;
+          s = $({}, s, d.container), v = s.width - s.left - s.right - d.margin * 2, z = s.height - s.top - s.bottom - d.margin * 2;
         else {
-          var T = B(d.container) ? d.container : document.querySelector(d.container), w = T.getBoundingClientRect(), U = w.width, fe = w.height, ve = w.left, ye = w.top;
-          n = $({}, n, {
-            width: U,
+          var T = F(d.container) ? d.container : document.querySelector(d.container), w = T.getBoundingClientRect(), D = w.width, fe = w.height, ve = w.left, ye = w.top;
+          s = $({}, s, {
+            width: D,
             height: fe,
             left: ve,
             top: ye
           });
         }
-      f = f || n.width - d.margin * 2, z = z || n.height - d.margin * 2;
-      var j = e.zoomedHd || e.original, ze = oe(j) ? f : j.naturalWidth || f, be = oe(j) ? z : j.naturalHeight || z, N = j.getBoundingClientRect(), xe = N.top, we = N.left, D = N.width, q = N.height, Ee = Math.min(Math.max(D, ze), f) / D, Ce = Math.min(Math.max(q, be), z) / q, Y = Math.min(Ee, Ce), ke = (-we + (f - D) / 2 + d.margin + n.left) / Y, Le = (-xe + (z - q) / 2 + d.margin + n.top) / Y, te = "scale(" + Y + ") translate3d(" + ke + "px, " + Le + "px, 0)";
+      v = v || s.width - d.margin * 2, z = z || s.height - d.margin * 2;
+      var Z = e.zoomedHd || e.original, ze = oe(Z) ? v : Z.naturalWidth || v, be = oe(Z) ? z : Z.naturalHeight || z, W = Z.getBoundingClientRect(), xe = W.top, we = W.left, q = W.width, Y = W.height, Ee = Math.min(Math.max(q, ze), v) / q, Ce = Math.min(Math.max(Y, be), z) / Y, V = Math.min(Ee, Ce), ke = (-we + (v - q) / 2 + d.margin + s.left) / V, Le = (-xe + (z - Y) / 2 + d.margin + s.top) / V, te = "scale(" + V + ") translate3d(" + ke + "px, " + Le + "px, 0)";
       e.zoomed.style.transform = te, e.zoomedHd && (e.zoomedHd.style.transform = te);
     };
     return new l(function(g) {
@@ -170,8 +169,8 @@ See: https://github.com/francoischalifour/medium-zoom`);
         g(u);
         return;
       }
-      var n = function U() {
-        H = !1, e.zoomed.removeEventListener("transitionend", U), e.original.dispatchEvent(A("medium-zoom:opened", {
+      var s = function D() {
+        H = !1, e.zoomed.removeEventListener("transitionend", D), e.original.dispatchEvent(O("medium-zoom:opened", {
           detail: { zoom: u }
         })), g(u);
       };
@@ -182,21 +181,21 @@ See: https://github.com/francoischalifour/medium-zoom`);
       if (a)
         e.original = a;
       else if (y.length > 0) {
-        var f = y;
-        e.original = f[0];
+        var v = y;
+        e.original = v[0];
       } else {
         g(u);
         return;
       }
-      if (e.original.dispatchEvent(A("medium-zoom:open", {
+      if (e.original.dispatchEvent(O("medium-zoom:open", {
         detail: { zoom: u }
-      })), ee = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, H = !0, e.zoomed = qe(e.original), document.body.appendChild(P), d.template) {
-        var z = B(d.template) ? d.template : document.querySelector(d.template);
+      })), ee = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, H = !0, e.zoomed = De(e.original), document.body.appendChild(N), d.template) {
+        var z = F(d.template) ? d.template : document.querySelector(d.template);
         e.template = document.createElement("div"), e.template.appendChild(z.content.cloneNode(!0)), document.body.appendChild(e.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() {
         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", n), e.original.getAttribute("data-zoom-src")) {
+      }), 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(T), console.warn("Unable to reach the zoom image target " + e.zoomedHd.src), e.zoomedHd = null, m();
         };
@@ -218,11 +217,11 @@ See: https://github.com/francoischalifour/medium-zoom`);
         return;
       }
       var a = 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(P), e.zoomed.classList.remove("medium-zoom-image--opened"), e.template && document.body.removeChild(e.template), H = !1, e.zoomed.removeEventListener("transitionend", m), e.original.dispatchEvent(A("medium-zoom:closed", {
+        e.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(e.zoomed), e.zoomedHd && document.body.removeChild(e.zoomedHd), document.body.removeChild(N), e.zoomed.classList.remove("medium-zoom-image--opened"), e.template && document.body.removeChild(e.template), H = !1, e.zoomed.removeEventListener("transitionend", m), e.original.dispatchEvent(O("medium-zoom:closed", {
           detail: { zoom: u }
         })), e.original = null, e.zoomed = null, e.zoomedHd = null, e.template = null, r(u);
       };
-      H = !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", {
+      H = !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(O("medium-zoom:close", {
         detail: { zoom: u }
       })), e.zoomed.addEventListener("transitionend", a);
     });
@@ -235,29 +234,29 @@ See: https://github.com/francoischalifour/medium-zoom`);
     return y;
   }, pe = function() {
     return e.original;
-  }, y = [], _ = [], H = !1, ee = 0, d = o, e = {
+  }, y = [], P = [], H = !1, ee = 0, d = o, e = {
     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") && M(t), d = $({
+  Object.prototype.toString.call(t) === "[object Object]" ? d = t : (t || typeof t == "string") && _(t), d = $({
     margin: 0,
     background: "#fff",
     scrollOffset: 40,
     container: null,
     template: null
   }, d);
-  var P = De(d.background);
-  document.addEventListener("click", c), document.addEventListener("keyup", R), document.addEventListener("scroll", L), window.addEventListener("resize", x);
+  var N = Ue(d.background);
+  document.addEventListener("click", c), document.addEventListener("keyup", k), document.addEventListener("scroll", C), window.addEventListener("resize", x);
   var u = {
     open: J,
     close: x,
     toggle: Q,
     update: b,
-    clone: F,
-    attach: M,
+    clone: U,
+    attach: _,
     detach: de,
     on: ce,
     off: me,
@@ -267,7 +266,7 @@ See: https://github.com/francoischalifour/medium-zoom`);
   };
   return u;
 };
-function Ve(i, t) {
+function Ye(i, t) {
   t === void 0 && (t = {});
   var o = t.insertAt;
   if (!(typeof document > "u")) {
@@ -275,9 +274,9 @@ function Ve(i, t) {
     c.type = "text/css", o === "top" && l.firstChild ? l.insertBefore(c, l.firstChild) : l.appendChild(c), c.styleSheet ? c.styleSheet.cssText = i : c.appendChild(document.createTextNode(i));
   }
 }
-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}";
-Ve(Ke);
-const Xe = 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))}: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 = se`
+var Ve = ".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(Ve);
+const Ke = 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))}: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)}`, Xe = se`
   :host {
     --justify-content: flex-start;
     --border-radius: 0px;
@@ -331,7 +330,7 @@ const Xe = se`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
     max-height: 100%;
   }
 
-  ${Xe}
+  ${Ke}
 
   :host([block]) {
     width: 100%;
@@ -523,18 +522,6 @@ const Xe = se`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
     --border-radius: 0;
   }
 
-  .retry-spinner {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .retry-spinner cx-spinner {
-    font-size: var(--cx-font-size-3x-large);
-  }
-
   .fallback {
     align-items: center;
     display: flex;
@@ -548,16 +535,16 @@ const Xe = se`:host([effect=jump]) .container,:host([effect=text-reveal]) .conta
     color: var(--fallback-icon-color);
   }
 `;
-var Je = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, le = (i) => {
+var Ge = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, le = (i) => {
   throw TypeError(i);
 }, h = (i, t, o, l) => {
-  for (var c = l > 1 ? void 0 : l ? Qe(t, o) : t, L = i.length - 1, R; L >= 0; L--)
-    (R = i[L]) && (c = (l ? R(t, o, c) : R(c)) || c);
-  return l && c && Je(t, o, c), c;
-}, he = (i, t, o) => t.has(i) || le("Cannot " + o), ae = (i, t, o) => (he(i, t, "read from private field"), o ? o.call(i) : t.get(i)), et = (i, t, o) => t.has(i) ? le("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, o), ne = (i, t, o, l) => (he(i, t, "write to private field"), t.set(i, o), o), O;
-let s = class extends Se {
+  for (var c = l > 1 ? void 0 : l ? Je(t, o) : t, C = i.length - 1, k; C >= 0; C--)
+    (k = i[C]) && (c = (l ? k(t, o, c) : k(c)) || c);
+  return l && c && Ge(t, o, c), c;
+}, he = (i, t, o) => t.has(i) || le("Cannot " + o), ae = (i, t, o) => (he(i, t, "read from private field"), o ? o.call(i) : t.get(i)), Qe = (i, t, o) => t.has(i) ? le("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, o), ne = (i, t, o, l) => (he(i, t, "write to private field"), t.set(i, o), o), j;
+let n = class extends Re {
   constructor() {
-    super(...arguments), this.localize = new je(this), this.retryCount = 0, this.retryTimer = null, this.isLoaded = !1, this.isError = !1, this.isRetrying = !1, this.retryIndex = 0, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = Te.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.noCrossorigin = !1, this.clickHandlerType = Z.Automatic, this.retryOnError = !1, this.maxRetries = 3, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null, et(this, O, "");
+    super(...arguments), this.localize = new je(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 = Te.Fill, 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 = 3, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null, Qe(this, j, "");
   }
   get currentAltValue() {
     return this.alt;
@@ -566,15 +553,15 @@ let s = class extends Se {
     return this.src;
   }
   get highlighterTabindex() {
-    return this.hasZoomAction && this.clickHandlerType === Z.Automatic ? "0" : void 0;
+    return this.hasZoomAction && this.clickHandlerType === I.Automatic ? "0" : void 0;
   }
   get highlighterRole() {
-    return this.hasZoomAction && this.clickHandlerType === Z.Automatic ? "button" : "img";
+    return this.hasZoomAction && this.clickHandlerType === I.Automatic ? "button" : "img";
   }
   get highlighterClass() {
     return {
       "highlightable-item": !0,
-      "highlightable-item--effect-text-reveal": this.effect === V.TextReveal,
+      "highlightable-item--effect-text-reveal": this.effect === K.TextReveal,
       [`highlightable-item--text-reveal-style-${this.textRevealStyle}`]: !0
     };
   }
@@ -595,6 +582,17 @@ let s = class extends Se {
   get crossorigin() {
     return this.noCrossorigin ? void 0 : "anonymous";
   }
+  /**
+   * Whether to hold the box with a skeleton rather than the loaded image.
+   *
+   * Retries are included: a retry is still "not loaded yet", so it keeps the same
+   * skeleton instead of swapping in a spinner. A spinner would restate what the
+   * skeleton already shows while changing the visual weight of the cell mid-load,
+   * which reads as a layout change on an image-heavy page.
+   */
+  get showPlaceholderSkeleton() {
+    return this.isError ? !1 : this.skeleton && !this.isLoaded || this.loading || this.isRetrying;
+  }
   /**
    * Whether the image have zoom action.
    */
@@ -638,7 +636,7 @@ let s = class extends Se {
     await this.updateComplete, this.requestUpdate();
   }
   handleSrcChange() {
-    this.isLoaded = !1, this.isError = !1, this.isRetrying = !1, this.retryCount = 0, this.retryIndex = 0, ne(this, O, ""), this.clearRetryTimer();
+    this.isLoaded = !1, this.isError = !1, this.isRetrying = !1, this.retryCount = 0, this.retryIndex = 0, ne(this, j, ""), this.clearRetryTimer();
   }
   clearRetryTimer() {
     this.retryTimer !== null && (clearTimeout(this.retryTimer), this.retryTimer = null);
@@ -646,15 +644,15 @@ let s = class extends Se {
   scheduleRetry() {
     const i = Math.min(1e3 * Math.pow(2, this.retryCount - 1), 1e4);
     this.retryTimer = setTimeout(() => {
-      this.retryTimer = null, ne(this, O, `${this.retryCount}-${Math.random().toString(36).slice(2)}`), this.retryIndex += 1;
+      this.retryTimer = null, ne(this, j, `${this.retryCount}-${Math.random().toString(36).slice(2)}`), this.retryIndex += 1;
     }, i);
   }
   /** 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 : Ze(i, "cachebust", ae(this, O));
+    return this.retryIndex === 0 || !ae(this, j) || !i ? i : Ze(i, "cachebust", ae(this, j));
   }
   async initZoom() {
-    this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = Ye(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
@@ -694,7 +692,7 @@ let s = class extends Se {
    * Support CMS5 click action for the image.
    */
   handleClickAction(i) {
-    !(i.target instanceof HTMLElement) || this.clickHandlerType === Z.Manual || this.canZoom && this.openZoom();
+    !(i.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();
@@ -706,150 +704,151 @@ let s = class extends Se {
     const i = this.applyRetryCacheBust(this.currentSrc), t = this.currentAltValue;
     if (this.retryOnError) {
       if (this.isError && this.retryCount >= this.maxRetries)
-        return K;
+        return X;
     } else if (this.isError)
-      return K;
-    return E`<div part="content" slot="anchor" class=${C(this.highlighterClass)}>${Ie(
+      return X;
+    return L`<div part="content" slot="anchor" class=${S(this.highlighterClass)}>${Ie(
       this.retryIndex,
-      E`<img part="image" class=${C(this.imageClass)} src=${i || this.placeholder} alt=${t} aria-label=${t} crossorigin=${X(this.crossorigin)} @load=${this.handleLoad} @error=${this.handleError} loading=${this.retryIndex > 0 ? "eager" : this.htmlLoading}>`
+      L`<img part="image" class=${S(this.imageClass)} src=${i || this.placeholder} srcset=${R(this.srcset || void 0)} sizes=${R(this.sizes || void 0)} alt=${t} aria-label=${t} crossorigin=${R(this.crossorigin)} @load=${this.handleLoad} @error=${this.handleError} loading=${this.retryIndex > 0 ? "eager" : this.htmlLoading} decoding="async" width=${R(this.width || void 0)} height=${R(this.height || void 0)}>`
     )}</div>`;
   }
   render() {
     const i = this.hasZoomAction, t = this.currentAltValue, o = !this.currentSrc && !this.placeholder;
-    return E`<div part="base" class=${C({
+    return L`<div part="base" class=${S({
       container: !0,
       "container--empty": o,
       "container--loading": this.loading,
       "container--resizing": this.resizable && this.isResizeActive
     })} style=${Me({
       "--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=${X(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${t} aria-roledescription=${this.localize.term("image")} class=${C(o ? {} : this.getHighlighterClass(this.isError))} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${S(
+    })} data-empty-label=${this.localize.term("emptyImage")} @click=${this.startResizing} @keydown=${this.handleKeyDown}><cx-resize-observer @cx-resize=${this.handleResize}><div part="highlighter" tabindex=${R(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${t} aria-roledescription=${this.localize.term("image")} class=${S(o ? {} : this.getHighlighterClass(this.isError))} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${A(
       o,
-      () => K,
-      () => S(
-        this.effect === V.Jump || this.effect === V.Zoom,
-        () => E`<cx-popup class="popup-container" strategy="absolute" active placement="center" sync="both">${this.renderContent()}</cx-popup>`,
+      () => X,
+      () => 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>`,
         () => this.renderContent()
       )
-    )}<div class="zoom-image-container">${S(
+    )}<div class="zoom-image-container">${A(
       i,
-      () => E`<img part="zoom-image" class=${C({
+      () => L`<img part="zoom-image" class=${S({
         "zoom-image": !0,
         "zoom-image--hidden": !this.isZoomed
-      })} src=${this.applyRetryCacheBust(this.currentSrc) || this.placeholder} alt="" aria-hidden="true" decoding="async" draggable="false" crossorigin=${X(this.crossorigin)}>`
-    )}</div>${S(
-      (this.skeleton && !this.isLoaded && !this.isError || this.loading) && !this.isRetrying,
-      () => E`<slot name="skeleton" part="skeleton"><div class=${C({
-        skeleton: !0
-      })}><cx-skeleton effect="sheen"></cx-skeleton></div></slot>`
-    )}
-          ${S(this.isRetrying, () => E`<div part="retry-spinner" class=${C({ "retry-spinner": !0 })}><cx-spinner></cx-spinner></div>`)}
-          ${S(this.isError, () => E`<slot name="fallback" part="fallback"><cx-space class=${C({ 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>${S(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
+      })} src=${this.applyRetryCacheBust(this.currentSrc) || this.placeholder} alt="" aria-hidden="true" decoding="async" draggable="false" crossorigin=${R(this.crossorigin)}>`
+    )}</div>${A(this.showPlaceholderSkeleton, () => L`<slot name="skeleton" part="skeleton"><div class=${S({
+      skeleton: !0
+    })}><cx-skeleton effect="sheen" role="status" aria-live="polite" aria-label=${this.localize.term("loading")}></cx-skeleton></div></slot>`)}
+          ${A(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>${A(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
   }
 };
-O = /* @__PURE__ */ new WeakMap();
-s.styles = [He, Re, Ge];
-s.dependencies = {
+j = /* @__PURE__ */ new WeakMap();
+n.styles = [He, Se, Xe];
+n.dependencies = {
   "cx-icon": _e,
   "cx-popup": Pe,
   "cx-resize-observer": Ne,
   "cx-skeleton": We,
-  "cx-space": Be,
-  "cx-spinner": Fe
+  "cx-space": Be
 };
 h([
   G(".image")
-], s.prototype, "imageElement", 2);
+], n.prototype, "imageElement", 2);
 h([
   G(".zoom-image")
-], s.prototype, "zoomImageElement", 2);
+], n.prototype, "zoomImageElement", 2);
 h([
   G(".highlighter")
-], s.prototype, "highlighterElement", 2);
+], n.prototype, "highlighterElement", 2);
+h([
+  E()
+], n.prototype, "isLoaded", 2);
+h([
+  E()
+], n.prototype, "isError", 2);
 h([
-  k()
-], s.prototype, "isLoaded", 2);
+  E()
+], n.prototype, "isRetrying", 2);
 h([
-  k()
-], s.prototype, "isError", 2);
+  E()
+], n.prototype, "retryIndex", 2);
 h([
-  k()
-], s.prototype, "isRetrying", 2);
+  p({ reflect: !0, type: String })
+], n.prototype, "src", 2);
 h([
-  k()
-], s.prototype, "retryIndex", 2);
+  p({ reflect: !0, type: String })
+], n.prototype, "srcset", 2);
 h([
-  v({ reflect: !0, type: String })
-], s.prototype, "src", 2);
+  p({ reflect: !0, type: String })
+], n.prototype, "sizes", 2);
 h([
-  v({ reflect: !0, type: String })
-], s.prototype, "placeholder", 2);
+  p({ reflect: !0, type: String })
+], n.prototype, "placeholder", 2);
 h([
-  v({ reflect: !0, type: String })
-], s.prototype, "alt", 2);
+  p({ reflect: !0, type: String })
+], n.prototype, "alt", 2);
 h([
-  v({ attribute: "object-fit", reflect: !0 })
-], s.prototype, "objectFit", 2);
+  p({ attribute: "object-fit", reflect: !0 })
+], n.prototype, "objectFit", 2);
 h([
-  v({ reflect: !0, type: Boolean })
-], s.prototype, "skeleton", 2);
+  p({ reflect: !0, type: Boolean })
+], n.prototype, "skeleton", 2);
 h([
-  v({ reflect: !0, type: Boolean })
-], s.prototype, "fallback", 2);
+  p({ reflect: !0, type: Boolean })
+], n.prototype, "fallback", 2);
 h([
-  v({ attribute: "can-zoom", reflect: !0, type: Boolean })
-], s.prototype, "canZoom", 2);
+  p({ attribute: "can-zoom", reflect: !0, type: Boolean })
+], n.prototype, "canZoom", 2);
 h([
-  v({ reflect: !0, type: Boolean })
-], s.prototype, "loading", 2);
+  p({ reflect: !0, type: Boolean })
+], n.prototype, "loading", 2);
 h([
-  v({ reflect: !0, type: Boolean })
-], s.prototype, "block", 2);
+  p({ reflect: !0, type: Boolean })
+], n.prototype, "block", 2);
 h([
-  v({ attribute: "html-loading", reflect: !0, type: String })
-], s.prototype, "htmlLoading", 2);
+  p({ attribute: "html-loading", reflect: !0, type: String })
+], n.prototype, "htmlLoading", 2);
 h([
-  v({ attribute: "no-crossorigin", reflect: !0, type: Boolean })
-], s.prototype, "noCrossorigin", 2);
+  p({ attribute: "no-crossorigin", reflect: !0, type: Boolean })
+], n.prototype, "noCrossorigin", 2);
 h([
-  v({ attribute: "click-handler-type", reflect: !0, type: String })
-], s.prototype, "clickHandlerType", 2);
+  p({ attribute: "click-handler-type", reflect: !0, type: String })
+], n.prototype, "clickHandlerType", 2);
 h([
-  v({ attribute: "retry-on-error", reflect: !0, type: Boolean })
-], s.prototype, "retryOnError", 2);
+  p({ attribute: "retry-on-error", reflect: !0, type: Boolean })
+], n.prototype, "retryOnError", 2);
 h([
-  v({ attribute: "max-retries", type: Number })
-], s.prototype, "maxRetries", 2);
+  p({ attribute: "max-retries", type: Number })
+], n.prototype, "maxRetries", 2);
 h([
-  k()
-], s.prototype, "isZoomed", 2);
+  E()
+], n.prototype, "isZoomed", 2);
 h([
-  k()
-], s.prototype, "imageRatio", 2);
+  E()
+], n.prototype, "imageRatio", 2);
 h([
-  k()
-], s.prototype, "parsedAlt", 2);
+  E()
+], n.prototype, "parsedAlt", 2);
 h([
-  k()
-], s.prototype, "parsedAltDarkMode", 2);
+  E()
+], n.prototype, "parsedAltDarkMode", 2);
 h([
-  I("isLoaded"),
-  I("canZoom", { waitUntilFirstUpdate: !0 })
-], s.prototype, "handleCanZoomChange", 1);
+  M("isLoaded"),
+  M("canZoom", { waitUntilFirstUpdate: !0 })
+], n.prototype, "handleCanZoomChange", 1);
 h([
-  I("objectFit", { waitUntilFirstUpdate: !0 })
-], s.prototype, "handleObjectFitChange", 1);
+  M("objectFit", { waitUntilFirstUpdate: !0 })
+], n.prototype, "handleObjectFitChange", 1);
 h([
-  I("src"),
-  I("srcDarkMode")
-], s.prototype, "handleSrcChange", 1);
+  M("src"),
+  M("srcDarkMode")
+], n.prototype, "handleSrcChange", 1);
 h([
   Oe(100)
-], s.prototype, "updateLastPatchedWidth", 1);
-s = h([
+], n.prototype, "updateLastPatchedWidth", 1);
+n = h([
   Ae("cx-image")
-], s);
+], n);
 export {
-  s as C,
-  Z as a
+  n as C,
+  I as a
 };