@zumer/orbit 1.5.0 → 2.0.0

package/dist/orbit.js

@@ -1,6 +1,6 @@
 /*
 * orbit
-* v.1.5.0
+* v.2.0.0
 * Author Juan Martin Muda - Zumerlab
 * License MIT
 */
@@ -18,6 +18,56 @@
     }
     return ((_a = element.classList) == null ? void 0 : _a.contains("orbit")) ? null : void 0;
   }
+  var WARNED = Symbol.for("zumer.orbit.warned.v1");
+  function warnOnce(element, key, message) {
+    const seen = element[WARNED] || (element[WARNED] = /* @__PURE__ */ new Set());
+    if (seen.has(key)) return;
+    seen.add(key);
+    console.warn(`[orbit] ${message}`);
+  }
+  function composedClosest(element, selector) {
+    var _a, _b;
+    for (let current = element; current; current = current.parentElement || ((_a = current.getRootNode) == null ? void 0 : _a.call(current).host)) {
+      if ((_b = current.matches) == null ? void 0 : _b.call(current, selector)) return current;
+    }
+    return null;
+  }
+  var KINDS = ".satellite, .vector, .side, o-arc, o-progress";
+  function describe(element) {
+    const classes = [...element.classList].slice(0, 3).map((name) => "." + name).join("");
+    return `<${element.localName}${classes ? " " + classes : ""}>`;
+  }
+  function diagnose(ring) {
+    const spot = ring.parentElement;
+    const universe = composedClosest(spot.parentElement, ".bigbang, .satellite");
+    if (!universe) {
+      warnOnce(spot, "universe", 'A .gravity-spot is not inside a .bigbang, so it measures the viewport. Wrap it: <div class="bigbang"><div class="gravity-spot">\u2026</div></div>.');
+    } else if (universe.getClientRects().length && (!universe.clientWidth || !universe.clientHeight)) {
+      warnOnce(universe, "empty", `${describe(universe)} has no size (${universe.clientWidth}\xD7${universe.clientHeight}px), so its system is invisible. Give it a width, or place it in a parent with a width.`);
+    }
+    const visual = ring.querySelector(":scope > o-arc, :scope > o-progress");
+    if (visual) {
+      const style = ring.ownerDocument.defaultView.getComputedStyle(ring);
+      const x = style.getPropertyValue("--o-ellipse-x").trim(), y = style.getPropertyValue("--o-ellipse-y").trim();
+      if (x && Number(x) !== 1 || y && Number(y) !== 1) {
+        warnOnce(ring, "ellipse-visual", `${describe(visual)} is on ${describe(ring)}, which is stretched into an ellipse (--o-ellipse-x: ${x || 1}, --o-ellipse-y: ${y || 1}). Arcs and progress are drawn on circles only, so it is hidden. Put it on a round ring.`);
+      }
+    }
+    if (!composedClosest(ring, ".dev-orbit")) return;
+    for (const child of ring.children) {
+      if (orbitNumber(child) !== void 0) {
+        warnOnce(child, "nested-ring", `${describe(child)} is inside another ring. Rings must be direct children of .gravity-spot; to nest a system, put a .gravity-spot directly inside a .satellite.`);
+      } else if (!child.matches(KINDS)) {
+        warnOnce(child, "ring-child", `${describe(child)} is not placed by its ring. A ring holds only .satellite, .vector, .side, <o-arc> and <o-progress>; wrap content as <div class="satellite"><div class="capsule">\u2026</div></div>.`);
+      } else if (child.classList.contains("satellite")) {
+        for (const inner of child.children) {
+          if (!inner.matches(".capsule, .gravity-spot, .bigbang")) {
+            warnOnce(inner, "satellite-child", `${describe(inner)} sits directly in a .satellite. Put content in a .capsule so it stays upright and centered.`);
+          }
+        }
+      }
+    }
+  }
   function setLayoutProperty(element, name, value) {
     const text = String(value);
     if (element.style.getPropertyValue(name) !== text) element.style.setProperty(name, text);
@@ -62,7 +112,8 @@
       else if (child.localName === "o-progress") setLayoutProperty(child, "--o-layout-index", 0);
     }
     const count = Math.max(counts.arc, counts.satellite, counts.vector, 1);
-    const divisor = counts.side ? String(counts.side) : `max(1, ${count} - var(--o-fit-range, 0))`;
+    const points = counts.satellite || counts.vector;
+    const divisor = counts.side ? String(counts.side) : points ? `max(1, ${count} - var(--o-fit-range, 0))` : String(count);
     setLayoutProperty(ring, "--o-layout-angle", `calc(var(--o-range, 360deg) / ${divisor})`);
   }
   function isScope(root) {
@@ -88,10 +139,19 @@
     });
     return doc[REGISTRY];
   }
+  function cancel(state) {
+    if (state.frame < 0) state.view.clearTimeout(-state.frame);
+    else if (state.frame) state.view.cancelAnimationFrame(state.frame);
+    state.frame = 0;
+  }
+  function settle(state) {
+    for (const resolve of state.waiters.splice(0)) resolve();
+  }
   function dispose(state) {
     if (state.disposed) return;
     state.disposed = true;
-    state.view.cancelAnimationFrame(state.frame);
+    cancel(state);
+    settle(state);
     state.observer.disconnect();
     state.resize.disconnect();
     for (const remove of state.listeners) remove();
@@ -146,17 +206,20 @@
       all: true,
       frame: 0,
       disposed: false,
-      listeners: []
+      listeners: [],
+      waiters: []
     };
     const listen = (target, event, listener, options) => {
       target == null ? void 0 : target.addEventListener(event, listener, options);
       state.listeners.push(() => target == null ? void 0 : target.removeEventListener(event, listener, options));
     };
     const queue = () => {
-      if (!state.disposed && !state.frame) state.frame = view.requestAnimationFrame(() => {
+      if (state.disposed || state.frame) return;
+      const run = () => {
         state.frame = 0;
         state.flush();
-      });
+      };
+      state.frame = doc.visibilityState === "hidden" ? -view.setTimeout(run, 0) : view.requestAnimationFrame(run);
     };
     state.queue = queue;
     state.flush = () => flush(state);
@@ -196,6 +259,12 @@
       invalidateDescendants(state);
       queue();
     };
+    listen(doc, "visibilitychange", () => {
+      if (doc.visibilityState === "hidden" && state.frame > 0) {
+        cancel(state);
+        queue();
+      }
+    });
     if (scope === doc) {
       listen(view, "resize", invalidateAll);
       listen(doc.fonts, "loadingdone", invalidateAll);
@@ -255,13 +324,13 @@
     state.scan = false;
   }
   function flush(state) {
-    var _a;
     if (state.disposed) return;
     if (state.scope.host && !state.scope.host.isConnected) {
       dispose(state);
       return;
     }
     state.observer.disconnect();
+    const drawn = [];
     try {
       if (state.scan) discover(state);
       const dirty = state.all ? /* @__PURE__ */ new Set([...state.rings, ...state.visuals]) : state.dirty;
@@ -270,15 +339,21 @@
         if (!target.isConnected) continue;
         if (state.rings.has(target)) {
           layoutRing(target);
+          diagnose(target);
           for (const visual of target.querySelectorAll(VISUALS)) visuals.add(visual);
         } else if (state.visuals.has(target)) visuals.add(target);
       }
-      for (const visual of state.visuals) if (visuals.has(visual)) (_a = visual.update) == null ? void 0 : _a.call(visual);
+      for (const visual of state.visuals) if (visuals.has(visual) && visual.update) {
+        visual.update();
+        drawn.push(visual);
+      }
       state.dirty = /* @__PURE__ */ new Set();
       state.all = false;
     } finally {
       if (!state.disposed) state.observer.observe(state.scope, OBSERVE);
     }
+    for (const visual of drawn) visual.dispatchEvent(new state.view.Event("o-rendered", { bubbles: true, composed: true }));
+    if (!state.frame) settle(state);
   }
   function requestLayout(element = globalThis.document) {
     var _a;
@@ -299,11 +374,22 @@
       if (current !== state && (!current.scope.host || !composedContains(root, current.scope.host))) continue;
       current.scan = true;
       current.all = true;
-      current.view.cancelAnimationFrame(current.frame);
-      current.frame = 0;
+      cancel(current);
       current.flush();
     }
   }
+  function layoutReady(root = globalThis.document) {
+    const scope = scopeFor(root);
+    const state = scope && ensureState(scope);
+    if (!state) return Promise.resolve();
+    pruneDisconnected(state.registry);
+    const pending = [...state.registry.states].filter((current) => current === state || current.scope.host && composedContains(root, current.scope.host));
+    return Promise.all(pending.map((current) => new Promise((resolve) => {
+      current.waiters.push(resolve);
+      current.queue();
+    }))).then(() => {
+    });
+  }
 
   // src/js/orbit-base.js
   var OrbitBase = class extends (globalThis.HTMLElement || class {
@@ -312,8 +398,32 @@
       super();
     }
     connectedCallback() {
+      for (const name of ["value", "max"]) {
+        if (Object.prototype.hasOwnProperty.call(this, name)) {
+          const pending = this[name];
+          delete this[name];
+          this[name] = pending;
+        }
+      }
       requestLayout(this);
     }
+    /** value and max mirror their attributes, so property bindings redraw too. */
+    get value() {
+      const raw = this.getAttribute("value");
+      return raw === null || raw.trim() === "" ? null : Number(raw);
+    }
+    set value(next) {
+      if (next === null || next === void 0 || next === "") this.removeAttribute("value");
+      else this.setAttribute("value", String(next));
+    }
+    get max() {
+      const raw = this.getAttribute("max");
+      return raw === null ? 100 : Number(raw);
+    }
+    set max(next) {
+      if (next === null || next === void 0 || next === "") this.removeAttribute("max");
+      else this.setAttribute("max", String(next));
+    }
     disconnectedCallback() {
       if (this._textFrame) this.ownerDocument.defaultView.cancelAnimationFrame(this._textFrame);
       this._textFrame = 0;
@@ -324,6 +434,28 @@
     readAngle(style, name, fallback = 0) {
       return cssNumber(this, style.getPropertyValue(name), fallback, "angle");
     }
+    /** The value attribute as a number. Invalid values draw nothing, and say why. */
+    readValue() {
+      const raw = this.getAttribute("value");
+      if (raw === null || raw.trim() === "") return 0;
+      const value = Number(raw);
+      if (!Number.isFinite(value)) {
+        warnOnce(this, "value:" + raw, `<${this.localName} value="${raw}"> is not a number, so nothing is drawn.`);
+        return 0;
+      }
+      return value;
+    }
+    /** The max attribute (default 100). It must be a positive number. */
+    readMax() {
+      const raw = this.getAttribute("max");
+      if (raw === null) return 100;
+      const max = Number(raw);
+      if (!(max > 0)) {
+        warnOnce(this, "max:" + raw, `<${this.localName} max="${raw}"> must be a positive number, so nothing is drawn.`);
+        return 0;
+      }
+      return max;
+    }
     getCommonAttributes(element) {
       var _a;
       const style = element.ownerDocument.defaultView.getComputedStyle(element);
@@ -351,7 +483,7 @@
         arcHeight,
         realRadius,
         arcAngle: 0,
-        // Se sobrescribe en cada componente
+        // set by each component
         shape,
         arcHeightPercentage,
         orbitNumber: orbitNumber2,
@@ -364,22 +496,6 @@
       if (!Number.isFinite(value) || !Number.isFinite(maxValue) || maxValue <= 0) return 0;
       return Math.min(1, Math.max(0, value / maxValue)) * Math.max(0, Math.min(360, maxAngle));
     }
-    getControlPoint(x, y, x1, y1, direction = "clockwise") {
-      const xm = (x + x1) / 2;
-      const ym = (y + y1) / 2;
-      const dx = x1 - x;
-      const dy = y1 - y;
-      if (direction === "clockwise") {
-        return {
-          xc: xm + dy * 0.4,
-          yc: ym - dx * 0.4
-        };
-      }
-      return {
-        xc: xm - dy * 0.4,
-        yc: ym + dx * 0.4
-      };
-    }
     arcPoint(radius, angle, radiusAdjustment = 0, angleOffsetDegrees = 0) {
       const adjustedRadius = radius + radiusAdjustment;
       const adjustedAngle = angle + angleOffsetDegrees * Math.PI / 180;
@@ -390,7 +506,7 @@
     }
     calculateCommonArcParameters(arcAngle, radius, arcHeightPercentage, orbitNumber2, shape, strokeWidth, arcHeight, gap = 0) {
       const offset = Math.PI / 2;
-      const fangle = Math.max(0, Math.min(359.999999, arcAngle)) * Math.PI / 180;
+      const fangle = Math.max(0, Math.min(360, arcAngle)) * Math.PI / 180;
       const bigRadius = radius + arcHeightPercentage;
       const smallRadius = Math.max(1e-3, radius - arcHeightPercentage);
       const bigGap = Math.min(fangle * 0.49, (gap + strokeWidth * 1.25) / orbitNumber2 / bigRadius);
@@ -403,19 +519,11 @@
       const upperArcEnd = this.arcPoint(bigRadius, upperAngleEnd);
       const innerArcStart = this.arcPoint(smallRadius, innerAngleStart);
       const innerArcEnd = this.arcPoint(smallRadius, innerAngleEnd);
-      const upperSweep = upperAngleEnd - upperAngleStart;
-      const innerSweep = innerAngleEnd - innerAngleStart;
-      const largeArcFlagUpper = upperSweep > Math.PI ? 1 : 0;
-      const largeArcFlagInner = innerSweep > Math.PI ? 1 : 0;
       return {
         upperArcStart,
         upperArcEnd,
         innerArcStart,
         innerArcEnd,
-        largeArcFlag: largeArcFlagUpper,
-        // back-compat alias; prefer the two below
-        largeArcFlagUpper,
-        largeArcFlagInner,
         bigRadius,
         smallRadius,
         radius,
@@ -425,143 +533,153 @@
         innerAngleEnd
       };
     }
-    generatePathData(shape, params, arcHeight, orbitNumber2) {
-      let d = "";
+    generatePathData(shape, params) {
       switch (shape) {
         case "rounded":
-          d = this.generateRoundedPath(params, arcHeight, orbitNumber2);
-          break;
+          return this.generateRoundedPath(params);
         case "circle":
         case "circle-a":
         case "bullet":
-          d = this.generateCirclePath(params, shape);
-          break;
+          return this.generateCirclePath(params, shape);
         case "circle-b":
-          d = this.generateCircleBPath(params, arcHeight, orbitNumber2);
-          break;
+          return this.generateCircleBPath(params);
         case "arrow":
-          d = this.generateArrowPath(params, orbitNumber2);
-          break;
+          return this.generateArrowPath(params);
         case "backslash":
         case "slash":
-          d = this.generateSlashPath(params, shape, orbitNumber2);
-          break;
+          return this.generateSlashPath(params, shape);
         case "zigzag":
-          d = this.generateZigzagPath(params, arcHeight, orbitNumber2);
-          break;
+          return this.generateZigzagPath(params);
         default:
-          d = this.generateDefaultPath(params);
+          return this.generateDefaultPath(params);
+      }
+    }
+    /** "x,y" of a point at radius and angle (radians), in viewBox units. */
+    pt(radius, angle) {
+      const point = this.arcPoint(radius, angle);
+      return `${point.x},${point.y}`;
+    }
+    /**
+     * SVG arc commands from the current point (at `from`) to `to`, along one
+     * circle. Every arc in Orbit goes through here. Splitting into pieces of at
+     * most 90° means no large-arc flag to get wrong and no arc whose endpoints
+     * coincide, so a full 360° circle is just another arc.
+     */
+    arcTo(radius, from, to) {
+      const steps = Math.max(1, Math.ceil(Math.abs(to - from) / (Math.PI / 2) - 1e-9));
+      const sweep = to >= from ? 1 : 0;
+      let d = "";
+      for (let i = 1; i <= steps; i++) {
+        d += ` A ${radius},${radius} 0 0 ${sweep} ${this.pt(radius, from + (to - from) * i / steps)}`;
       }
       return d;
     }
-    generateRoundedPath(params, arcHeight, orbitNumber2) {
+    /** An open arc along one radius: strokes, curved text and touch areas. */
+    linePath(radius, from, to) {
+      return `M ${this.pt(radius, from)}${this.arcTo(radius, from, to)}`;
+    }
+    /**
+     * Shape endings are sized from the band itself (h = half its thickness, in
+     * viewBox units), so they look the same on every ring and at every size.
+     * Angles are in radians, as in calculateCommonArcParameters().
+     */
+    ending(params, factor) {
       const { bigRadius, smallRadius } = params;
-      const available = Math.min(params.upperAngleEnd - params.upperAngleStart, params.innerAngleEnd - params.innerAngleStart);
-      const curve = Math.min(arcHeight < 5 ? 2.5 : arcHeight < 10 ? 5 : 10, available * 180 / Math.PI * orbitNumber2 * 0.49);
-      const capRad = curve / orbitNumber2 * Math.PI / 180;
-      const flagU = params.upperAngleEnd - params.upperAngleStart - 2 * capRad > Math.PI ? 1 : 0;
-      const flagI = params.innerAngleEnd - params.innerAngleStart - 2 * capRad > Math.PI ? 1 : 0;
-      const newUpperStart = this.arcPoint(bigRadius, params.upperAngleStart, 0, curve / orbitNumber2);
-      const newUpperEnd = this.arcPoint(bigRadius, params.upperAngleEnd, 0, -curve / orbitNumber2);
-      const newInnerStart = this.arcPoint(smallRadius, params.innerAngleStart, 0, curve / orbitNumber2);
-      const newInnerEnd = this.arcPoint(smallRadius, params.innerAngleEnd, 0, -curve / orbitNumber2);
-      const upperPointStart = this.arcPoint(bigRadius, params.upperAngleStart, -(curve / 2) / orbitNumber2, 0);
-      const upperPointEnd = this.arcPoint(bigRadius, params.upperAngleEnd, -(curve / 2) / orbitNumber2, 0);
-      const innerPointStart = this.arcPoint(smallRadius, params.innerAngleStart, curve / 2 / orbitNumber2, 0);
-      const innerPointEnd = this.arcPoint(smallRadius, params.innerAngleEnd, curve / 2 / orbitNumber2, 0);
-      const Q = this.getControlPoint(newUpperEnd.x, newUpperEnd.y, upperPointEnd.x, upperPointEnd.y);
-      const Q1 = this.getControlPoint(innerPointEnd.x, innerPointEnd.y, newInnerEnd.x, newInnerEnd.y);
-      const Q2 = this.getControlPoint(newInnerStart.x, newInnerStart.y, innerPointStart.x, innerPointStart.y);
-      const Q3 = this.getControlPoint(upperPointStart.x, upperPointStart.y, newUpperStart.x, newUpperStart.y);
-      let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${flagU} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
-      d += `Q ${Q.xc},${Q.yc} ${upperPointEnd.x},${upperPointEnd.y} L ${innerPointEnd.x},${innerPointEnd.y}`;
-      d += `Q ${Q1.xc},${Q1.yc} ${newInnerEnd.x},${newInnerEnd.y}`;
-      d += `A ${smallRadius},${smallRadius} 0 ${flagI} 0 ${newInnerStart.x},${newInnerStart.y}`;
-      d += `Q ${Q2.xc},${Q2.yc} ${innerPointStart.x},${innerPointStart.y} L ${upperPointStart.x},${upperPointStart.y}`;
-      d += ` Q ${Q3.xc},${Q3.yc} ${newUpperStart.x},${newUpperStart.y}`;
-      d += ` Z`;
+      const h = (bigRadius - smallRadius) / 2;
+      const middle = (bigRadius + smallRadius) / 2;
+      const span = Math.min(params.upperAngleEnd - params.upperAngleStart, params.innerAngleEnd - params.innerAngleStart);
+      const length = Math.max(0, Math.min(h * factor, span * smallRadius * 0.49));
+      return { h, middle, length, angle: length / middle };
+    }
+    generateDefaultPath(params) {
+      const { bigRadius: R, smallRadius: r, upperAngleStart: uS, upperAngleEnd: uE, innerAngleStart: iS, innerAngleEnd: iE } = params;
+      return `M ${this.pt(R, uS)}${this.arcTo(R, uS, uE)} L ${this.pt(r, iE)}${this.arcTo(r, iE, iS)} Z`;
+    }
+    generateRoundedPath(params) {
+      const { bigRadius: R, smallRadius: r, upperAngleStart: uS, upperAngleEnd: uE, innerAngleStart: iS, innerAngleEnd: iE } = params;
+      const { length: c } = this.ending(params, 0.5);
+      const corner = (radius, angle) => ` A ${c},${c} 0 0 1 ${this.pt(radius, angle)}`;
+      let d = `M ${this.pt(R, uS + c / R)}${this.arcTo(R, uS + c / R, uE - c / R)}`;
+      d += `${corner(R - c, uE)} L ${this.pt(r + c, iE)}${corner(r, iE - c / r)}`;
+      d += this.arcTo(r, iE - c / r, iS + c / r);
+      d += `${corner(r + c, iS)} L ${this.pt(R - c, uS)}${corner(R, uS + c / R)} Z`;
       return d;
     }
-    // Dentro de la clase OrbitCommon en orbit-common.js
     generateCirclePath(params, shape) {
-      const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner } = params;
-      let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlagUpper} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
-      d += ` A 1,1 0 0 1 ${innerArcEnd.x},${innerArcEnd.y} `;
-      d += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${innerArcStart.x},${innerArcStart.y}`;
-      d += ` A 1,1 0 0 ${shape === "circle" || shape === "circle-a" ? 1 : 0} ${upperArcStart.x},${upperArcStart.y} `;
-      d += ` Z`;
+      const { bigRadius: R, smallRadius: r, upperAngleStart: uS, upperAngleEnd: uE, innerAngleStart: iS, innerAngleEnd: iE } = params;
+      const startSweep = shape === "bullet" ? 0 : 1;
+      let d = `M ${this.pt(R, uS)}${this.arcTo(R, uS, uE)} A 1,1 0 0 1 ${this.pt(r, iE)}`;
+      d += `${this.arcTo(r, iE, iS)} A 1,1 0 0 ${startSweep} ${this.pt(R, uS)} Z`;
       return d;
     }
-    generateCircleBPath(params, arcHeight, orbitNumber2) {
-      const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius } = params;
-      const available = Math.min(upperAngleEnd - upperAngleStart, innerAngleEnd - innerAngleStart);
-      const segment = Math.min(arcHeight * 1.36, available * 180 / Math.PI * orbitNumber2 * 0.49);
-      const capRad = segment / orbitNumber2 * Math.PI / 180;
-      const flagU = upperAngleEnd - upperAngleStart - 2 * capRad > Math.PI ? 1 : 0;
-      const flagI = innerAngleEnd - innerAngleStart - 2 * capRad > Math.PI ? 1 : 0;
-      const newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, segment / orbitNumber2);
-      const newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, -segment / orbitNumber2);
-      const newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, segment / orbitNumber2);
-      const newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, -segment / orbitNumber2);
-      let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${flagU} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
-      d += ` A 1,1 0 0 1 ${newInnerEnd.x},${newInnerEnd.y} `;
-      d += ` A ${smallRadius},${smallRadius} 0 ${flagI} 0 ${newInnerStart.x},${newInnerStart.y}`;
-      d += ` A 1,1 0 0 1 ${newUpperStart.x},${newUpperStart.y} `;
-      d += ` Z`;
+    generateCircleBPath(params) {
+      const { bigRadius: R, smallRadius: r } = params;
+      const { h, angle } = this.ending(params, 1);
+      const a0 = params.upperAngleStart + angle;
+      const a1 = params.upperAngleEnd - angle;
+      let d = `M ${this.pt(R, a0)}${this.arcTo(R, a0, a1)} A ${h},${h} 0 0 1 ${this.pt(r, a1)}`;
+      d += `${this.arcTo(r, a1, a0)} A ${h},${h} 0 0 1 ${this.pt(R, a0)} Z`;
       return d;
     }
-    generateArrowPath(params, orbitNumber2) {
-      const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner, radius } = params;
-      const middleEnd = this.arcPoint(radius, params.upperAngleEnd, 0, 24 / orbitNumber2 / 2);
-      const middleStart = this.arcPoint(radius, params.upperAngleStart, 0, 24 / orbitNumber2 / 2);
-      let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlagUpper} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
-      d += `L ${middleEnd.x} ${middleEnd.y}`;
-      d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
-      d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
-      d += `L ${middleStart.x} ${middleStart.y}`;
-      d += `Z`;
+    generateArrowPath(params) {
+      const { bigRadius: R, smallRadius: r } = params;
+      const { middle, angle } = this.ending(params, 1.6);
+      const a0 = params.upperAngleStart;
+      const a1 = params.upperAngleEnd;
+      let d = `M ${this.pt(R, a0)}${this.arcTo(R, a0, a1 - angle)}`;
+      d += ` L ${this.pt(middle, a1)} L ${this.pt(r, a1 - angle)}`;
+      d += `${this.arcTo(r, a1 - angle, a0)} L ${this.pt(middle, a0 + angle)} Z`;
       return d;
     }
-    generateSlashPath(params, shape, orbitNumber2) {
-      const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner } = params;
-      const newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, shape === "backslash" ? 0 : 24 / orbitNumber2 / 2);
-      const newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, shape === "backslash" ? 0 : 24 / orbitNumber2 / 2);
-      const newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, shape === "backslash" ? 24 / orbitNumber2 / 2 : 0);
-      const newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, shape === "backslash" ? 24 / orbitNumber2 / 2 : 0);
-      let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlagUpper} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
-      d += `L ${newInnerEnd.x} ${newInnerEnd.y}`;
-      d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${newInnerStart.x}, ${newInnerStart.y}`;
-      d += `Z`;
-      return d;
+    generateSlashPath(params, shape) {
+      const { bigRadius: R, smallRadius: r } = params;
+      const { angle } = this.ending(params, 1);
+      const a0 = params.upperAngleStart;
+      const a1 = params.upperAngleEnd;
+      const [outer0, outer1, inner0, inner1] = shape === "backslash" ? [a0, a1 - angle, a0 + angle, a1] : [a0 + angle, a1, a0, a1 - angle];
+      return `M ${this.pt(R, outer0)}${this.arcTo(R, outer0, outer1)} L ${this.pt(r, inner1)}${this.arcTo(r, inner1, inner0)} Z`;
     }
-    generateZigzagPath(params, arcHeight, orbitNumber2) {
-      const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner, radius } = params;
-      const h2 = arcHeight / orbitNumber2 / 2;
-      const s2 = this.arcPoint(radius, params.upperAngleStart, -h2, 3);
-      const s3 = this.arcPoint(radius, params.upperAngleStart, 0, 0);
-      const s4 = this.arcPoint(radius, params.upperAngleStart, h2, 3);
-      const e2 = this.arcPoint(radius, params.innerAngleEnd, h2, 3);
-      const e3 = this.arcPoint(radius, params.innerAngleEnd, 0, 0);
-      const e4 = this.arcPoint(radius, params.innerAngleEnd, -h2, 3);
-      let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlagUpper} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
-      d += `L ${e2.x} ${e2.y}`;
-      d += `L ${e3.x} ${e3.y}`;
-      d += `L ${e4.x} ${e4.y}`;
-      d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
-      d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
-      d += `L ${s2.x} ${s2.y}`;
-      d += `L ${s3.x} ${s3.y}`;
-      d += `L ${s4.x} ${s4.y}`;
-      d += `Z`;
+    generateZigzagPath(params) {
+      const { bigRadius: R, smallRadius: r } = params;
+      const { middle, angle } = this.ending(params, 1.6);
+      const a0 = params.upperAngleStart;
+      const a1 = params.upperAngleEnd;
+      let d = `M ${this.pt(R, a0 + angle)}${this.arcTo(R, a0 + angle, a1)}`;
+      d += ` L ${this.pt(middle, a1 - angle)} L ${this.pt(r, a1)}`;
+      d += `${this.arcTo(r, a1, a0 + angle)} L ${this.pt(middle, a0)} Z`;
       return d;
     }
-    generateDefaultPath(params) {
-      const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner } = params;
-      let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlagUpper} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
-      d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
-      d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
-      d += `Z`;
-      return d;
+    /**
+     * The touch area of an interactive arc or progress: an invisible stroke
+     * along the middle of the band, from `from` to `to` degrees (0 = start of
+     * the element). It is as wide as the band plus `hit-width` px on each side,
+     * and catches the pointer whatever the fill, so transparent bands work.
+     */
+    updateHitArea(hit, attrs, from, to) {
+      const extra = Math.max(0, Number(this.getAttribute("hit-width")) || 0);
+      this.fitCanvas(attrs, this.hasAttribute("interactive") ? extra : 0);
+      if (!this.hasAttribute("interactive") || !(to > from) || !(attrs.orbitRadius > 0)) {
+        hit.removeAttribute("d");
+        return;
+      }
+      const radians = (degrees) => (degrees - 90) * Math.PI / 180;
+      hit.setAttribute("d", this.linePath(attrs.realRadius, radians(from), radians(Math.min(to, from + 360))));
+      hit.style.strokeWidth = `${attrs.arcHeight + attrs.strokeWidth + 2 * extra}px`;
+    }
+    /**
+     * Grow the SVG canvas past the ring's box so it covers the whole band, its
+     * stroke and touch area. Some engines (WebKit) neither paint reliably nor
+     * hit-test SVG content that overflows its box.
+     */
+    fitCanvas(attrs, extra) {
+      const svg = this.shadowRoot.querySelector("svg");
+      const scale = attrs.orbitRadius / 50;
+      if (!svg || !(scale > 0)) return;
+      const outer = (attrs.realRadius + attrs.arcHeightPercentage) * scale + attrs.strokeWidth + extra;
+      const pad = Math.max(0, Math.ceil(outer - attrs.orbitRadius));
+      const units = pad / scale;
+      svg.setAttribute("viewBox", `${-units} ${-units} ${100 + 2 * units} ${100 + 2 * units}`);
+      svg.style.inset = `${-pad}px`;
     }
   };
 
@@ -580,17 +698,11 @@
           --o-back-stroke: none;
           --o-back-stroke-width: 1;
         }
-        :host(:hover) {
-          --o-fill: var(--o-gray-light);
-          --o-stroke: var(--o-fill);
-          --o-stroke-width: 1;
-          --o-back-fill: transparent;
-          --o-back-stroke: none;
-          --o-back-stroke-width: 1;
-        }
         svg {
-          width: 100%;
-          height: 100%;
+          position: absolute;
+          inset: 0;
+          width: auto;
+          height: auto;
           overflow: visible;
           pointer-events: none;
         }
@@ -602,6 +714,14 @@
         :host([interactive]) svg * {
           pointer-events: visiblePainted;
         }
+        /* The touch area covers the whole track, whatever its colors. */
+        .hit {
+          fill: none;
+          stroke: transparent;
+        }
+        :host([interactive]) .hit {
+          pointer-events: stroke;
+        }
         :host([interactive]) {
           cursor: pointer;
         }
@@ -617,11 +737,17 @@
           stroke: var(--o-back-stroke);
           stroke-width: var(--o-back-stroke-width);
         }
-        /* variant="stroke": the thin, legible gauge (registro "medidor").
+        /* variant="stroke": the thin, legible gauge.
            The default band is a FILLED donut wedge, so everyone building a
            thin gauge tripped on --o-fill/--o-back-fill. With this variant the
            paths are open arcs and the data color lives where you expect it:
            --o-stroke for the bar, --o-back-stroke for the track. */
+        /* The stroke variant draws a 2px bar over a gray 1px track unless you
+           set your own values on the element. */
+        :host([variant="stroke"]) {
+          --o-stroke-width: 2;
+          --o-back-stroke: var(--o-gray-light);
+        }
         :host([variant="stroke"]) .progress-bar {
           fill: none;
           stroke: var(--o-stroke);
@@ -636,6 +762,7 @@
         }
       </style>
       <svg viewBox="0 0 100 100">
+        <path class="hit" vector-effect="non-scaling-stroke"></path>
         <path class="progress-bg" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
         <path class="progress-bar" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
       </svg>
@@ -648,6 +775,7 @@
       const dBar = isStroke ? this.calculateStrokeArc(attrs, false) : this.calculateArcParameters(attrs, false);
       this.shadowRoot.querySelector(".progress-bg").setAttribute("d", dBg);
       this.shadowRoot.querySelector(".progress-bar").setAttribute("d", dBar);
+      this.updateHitArea(this.shadowRoot.querySelector(".hit"), attrs, 0, attrs.range);
     }
     /**
      * variant="stroke": open arc along the orbit radius (no closed band),
@@ -655,24 +783,17 @@
      */
     calculateStrokeArc(attrs, full) {
       const { realRadius } = attrs;
-      const arcAngle = Math.max(0, Math.min(this.getProgressAngle(attrs, full), 359.999999));
+      const arcAngle = Math.max(0, Math.min(this.getProgressAngle(attrs, full), 360));
       if (!(arcAngle > 0) || !(attrs.orbitRadius > 0)) return "";
-      const a0 = -90 * (Math.PI / 180);
-      const a1 = (-90 + arcAngle) * (Math.PI / 180);
-      const x0 = 50 + realRadius * Math.cos(a0);
-      const y0 = 50 + realRadius * Math.sin(a0);
-      const x1 = 50 + realRadius * Math.cos(a1);
-      const y1 = 50 + realRadius * Math.sin(a1);
-      const largeArcFlag = arcAngle > 180 ? 1 : 0;
-      return `M ${x0},${y0} A ${realRadius},${realRadius} 0 ${largeArcFlag} 1 ${x1},${y1}`;
+      const start = -Math.PI / 2;
+      return this.linePath(realRadius, start, start + arcAngle * Math.PI / 180);
     }
     getAttributes() {
       const common = super.getCommonAttributes(this);
       const range = Math.max(0, Math.min(360, this.readAngle(common.style, "--o-range", 360)));
       const rawValue = common.style.getPropertyValue("--o-progress").trim();
-      const progress = rawValue ? this.readNumber(common.style, "--o-progress", 0) : Number(this.getAttribute("value") || 0);
-      const rawMax = this.getAttribute("max");
-      const maxValue = rawMax === null ? 100 : Number(rawMax);
+      const progress = rawValue ? this.readNumber(common.style, "--o-progress", 0) : this.readValue();
+      const maxValue = this.readMax();
       return {
         ...common,
         range,
@@ -697,7 +818,7 @@
         strokeWidth,
         arcHeight
       );
-      return super.generatePathData(shape, params, arcHeight, orbitNumber2);
+      return super.generatePathData(shape, params);
     }
   };
 
@@ -711,15 +832,11 @@
       --o-stroke-width: 1;
       --o-color: currentcolor;
     }
-    :host(:hover) {
-      --o-fill: var(--o-gray-light);
-      --o-stroke: var(--o-fill);
-      --o-stroke-width: 1;
-      --o-color: currentcolor;
-    }
     svg {
-      width: 100%;
-      height: 100%;
+      position: absolute;
+      inset: 0;
+      width: auto;
+      height: auto;
       overflow: visible;
       pointer-events: none;
     }
@@ -733,6 +850,14 @@
     :host([interactive]) svg * {
       pointer-events: visiblePainted;
     }
+    /* The touch area catches the pointer even where the band is transparent. */
+    #orbitHit {
+      fill: none;
+      stroke: transparent;
+    }
+    :host([interactive]) #orbitHit {
+      pointer-events: stroke;
+    }
     :host([interactive]) {
       cursor: pointer;
     }
@@ -745,18 +870,21 @@
     text {
       fill: var(--o-color);
     }
-    #orbitPath {
-      fill: transparent;
+    /* Guides for text: never painted and never under the pointer. */
+    #orbitPath, #measure {
+      fill: none;
       stroke: none;
-      stroke-width: 0;
+      pointer-events: none;
     }
   </style>
   <svg viewBox="0 0 100 100">
+    <path id="orbitHit" vector-effect="non-scaling-stroke"></path>
     <path id="orbitShape" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
     <path id="orbitPath" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
     <text>
       <textPath href="#orbitPath" alignment-baseline="middle"></textPath>
     </text>
+    <text id="measure" visibility="hidden" aria-hidden="true"></text>
   </svg>
 `;
   var OrbitArc = class extends OrbitBase {
@@ -767,9 +895,10 @@
     }
     update() {
       const attrs = this.getAttributes();
-      const { length, fontSize, textAnchor, fitRange } = attrs;
-      if (this.hasAttribute("value")) {
-        setLayoutProperty(this, "--o-arc-start", `${attrs.stackOffset}deg`);
+      const { fitRange, stacked } = attrs;
+      if (stacked) {
+        const anchor = attrs.auto && this.hasAttribute("text-anchor") ? { middle: -0.5, end: -1 }[attrs.textAnchor] || 0 : 0;
+        setLayoutProperty(this, "--o-arc-start", `${attrs.stackOffset + anchor * attrs.arcAngle}deg`);
         setLayoutProperty(this, "--o_stack", attrs.stackOffset + attrs.arcAngle);
       } else {
         this.style.removeProperty("--o-arc-start");
@@ -780,6 +909,8 @@
       const textPath = this.shadowRoot.querySelector("textPath");
       orbitShape.setAttribute("d", this.calculateArcParameters(attrs).dShape);
       orbitPath.setAttribute("d", this.calculateTextArcParameters(attrs).dPath);
+      this.updateHitArea(this.shadowRoot.querySelector("#orbitHit"), attrs, 0, attrs.arcAngle);
+      const textAnchor = attrs.textAnchor;
       if (textAnchor === "start") {
         textPath.setAttribute("startOffset", "0%");
         textPath.setAttribute("text-anchor", "start");
@@ -795,9 +926,9 @@
       } else {
         textPath.parentElement.removeAttribute("textLength");
       }
-      textPath.parentElement.style.fontSize = `calc(${fontSize} * (100 / (${length}) * (12 / var(--o-orbit-number)))`;
+      textPath.parentElement.style.fontSize = attrs.svgFontSize;
       textPath.textContent = this.textContent;
-      this.warnIfTextOverflows(orbitPath, textPath, fitRange);
+      if (!attrs.auto) this.warnIfTextOverflows(orbitPath, textPath, fitRange);
     }
     /**
      * Curved text has an explicit angular budget: glyphs past the end of the
@@ -818,7 +949,7 @@
           if (pathLen > 0 && textLen > pathLen && this._truncWarned !== raw) {
             this._truncWarned = raw;
             console.warn(
-              `[orbit] <o-arc> text "${raw.length > 34 ? raw.slice(0, 34) + "\u2026" : raw}" overflows its arc (${Math.round(textLen)} > ${Math.round(pathLen)} units) and will clip. Shorten the text, widen --o-range, or use fit-range to squeeze it.`
+              `[orbit] <o-arc> text "${raw.length > 34 ? raw.slice(0, 34) + "\u2026" : raw}" overflows its arc (${Math.round(textLen)} > ${Math.round(pathLen)} units) and will clip. Shorten the text, widen --o-range, add range="auto" to fit the arc to the text, or fit-range to squeeze it.`
             );
           }
         } catch (e) {
@@ -835,23 +966,43 @@
       const textAnchor = this.getAttribute("text-anchor") || "middle";
       const fontSize = style.fontSize || "16px";
       const gap = Math.max(0, this.readNumber(style, "--o-gap", 1));
-      const value = Number(this.getAttribute("value"));
-      const rawMax = this.getAttribute("max");
-      const max = rawMax === null ? 100 : Number(rawMax);
-      const arcAngle = this.hasAttribute("value") ? super.getProgressAngle(range, value, max) : Math.max(0, Math.min(360, this.readAngle(style, "--o-angle", 0)));
+      const svgFontSize = `calc(${fontSize} * (100 / (${length}) * (12 / var(--o-orbit-number)))`;
+      const auto = this.getAttribute("range") === "auto";
+      const stacked = auto || this.hasAttribute("value");
+      let arcAngle;
+      if (auto) arcAngle = this.measureTextAngle(svgFontSize, common.realRadius, gap);
+      else if (this.hasAttribute("value")) arcAngle = super.getProgressAngle(range, this.readValue(), this.readMax());
+      else arcAngle = Math.max(0, Math.min(360, this.readAngle(style, "--o-angle", 0)));
+      this._autoAngle = auto ? arcAngle : 0;
       let stackOffset = 0;
-      if (this.hasAttribute("value")) {
+      if (stacked) {
         for (let prev = this.previousElementSibling; prev; prev = prev.previousElementSibling) {
           if (prev.localName !== "o-arc") continue;
           const previousStyle = this.ownerDocument.defaultView.getComputedStyle(prev);
-          if (prev.hasAttribute("value")) {
+          if (prev.getAttribute("range") === "auto") stackOffset += prev._autoAngle || 0;
+          else if (prev.hasAttribute("value")) {
             const prevMax = prev.hasAttribute("max") ? Number(prev.getAttribute("max")) : 100;
             const prevRange = cssNumber(prev, previousStyle.getPropertyValue("--o-range"), range, "angle");
             stackOffset += super.getProgressAngle(prevRange, Number(prev.getAttribute("value")), prevMax);
           } else stackOffset += cssNumber(prev, previousStyle.getPropertyValue("--o-angle"), 0, "angle");
         }
       }
-      return { ...common, gap, arcAngle, stackOffset, flip, fitRange, length, fontSize, textAnchor };
+      return { ...common, gap, arcAngle, stackOffset, flip, fitRange, length, fontSize, svgFontSize, textAnchor, auto, stacked };
+    }
+    /** range="auto": the angle that fits this arc's text, with half an em of room at each end. */
+    measureTextAngle(svgFontSize, radius, gap) {
+      const text = (this.textContent || "").trim();
+      if (!text || !(radius > 0)) return 0;
+      const measure = this.shadowRoot.querySelector("#measure");
+      measure.style.fontSize = svgFontSize;
+      measure.textContent = text;
+      let length = 0;
+      try {
+        length = measure.getComputedTextLength() + parseFloat(this.ownerDocument.defaultView.getComputedStyle(measure).fontSize);
+      } catch (e) {
+      }
+      if (!(length > 0)) return 0;
+      return Math.min(360, length / radius * 180 / Math.PI + gap);
     }
     calculateArcParameters(attrs) {
       const { arcAngle, realRadius, arcHeightPercentage, orbitNumber: orbitNumber2, shape, strokeWidth, arcHeight, gap } = attrs;
@@ -866,32 +1017,38 @@
         arcHeight,
         gap
       );
-      const dShape = super.generatePathData(shape, params, arcHeight, orbitNumber2);
+      const dShape = super.generatePathData(shape, params);
       return { dShape };
     }
     calculateTextArcParameters(attrs) {
       const { arcAngle, realRadius, gap, flip } = attrs;
       if (!(arcAngle > 0)) return { dPath: "" };
       const adjustedGap = Math.min(gap * 0.5, arcAngle * 0.49);
-      const sweepFlag = flip ? 0 : 1;
-      const largeArcFlag = arcAngle <= 180 ? 0 : 1;
-      let coordX1 = 50 + realRadius * Math.cos((-90 + adjustedGap) * (Math.PI / 180));
-      let coordY1 = 50 + realRadius * Math.sin((-90 + adjustedGap) * (Math.PI / 180));
-      let coordX2 = 50 + realRadius * Math.cos((arcAngle - 90 - adjustedGap) * Math.PI / 180);
-      let coordY2 = 50 + realRadius * Math.sin((arcAngle - 90 - adjustedGap) * Math.PI / 180);
-      const [startX, startY, endX, endY] = flip ? [coordX2, coordY2, coordX1, coordY1] : [coordX1, coordY1, coordX2, coordY2];
-      const dPath = `M ${startX},${startY} A ${realRadius},${realRadius} 0 ${largeArcFlag} ${sweepFlag} ${endX},${endY}`;
-      return { dPath };
+      const start = (adjustedGap - 90) * Math.PI / 180;
+      const end = (arcAngle - adjustedGap - 90) * Math.PI / 180;
+      return { dPath: flip ? this.linePath(realRadius, end, start) : this.linePath(realRadius, start, end) };
     }
-    calcularExpresionCSS(cssExpression) {
+    resolveAngle(cssExpression) {
       return cssNumber(this, cssExpression, 0, "angle");
     }
+    /** @deprecated Use resolveAngle(). */
+    calcularExpresionCSS(cssExpression) {
+      return this.resolveAngle(cssExpression);
+    }
   };
 
   // src/js/orbit-resize.js
   var resizing = /* @__PURE__ */ new WeakMap();
+  var FIXED = /^[+-]?(?:\d+\.?\d*|\.\d+)px$/;
   var Orbit = {
     refresh: refreshLayout,
+    /** A promise that resolves when pending layouts are drawn. */
+    ready: layoutReady,
+    /**
+     * Scale systems that use a fixed px --o-force with their container's width
+     * (500px wide = ratio 1). Systems on the default --o-force already follow
+     * their .bigbang, so they are left alone.
+     */
     resize(parentElementSelector) {
       var _a, _b;
       const parent = typeof parentElementSelector === "string" ? (_a = globalThis.document) == null ? void 0 : _a.querySelector(parentElementSelector) : parentElementSelector;
@@ -904,10 +1061,16 @@
       const view = parent.ownerDocument.defaultView;
       const applyRatio = (width) => {
         if (!(width > 0)) return;
+        let fixed = 0;
         for (const element of parent.querySelectorAll(".gravity-spot")) {
+          if (!FIXED.test(view.getComputedStyle(element).getPropertyValue("--o-force").trim())) continue;
+          fixed++;
           const ratio = String(width / 500);
           if (element.style.getPropertyValue("--o-force-ratio") !== ratio) element.style.setProperty("--o-force-ratio", ratio);
         }
+        if (!fixed) {
+          warnOnce(parent, "resize", "Orbit.resize() has nothing to do here: every .bigbang already scales with its container. It only scales systems that set a fixed px --o-force.");
+        }
         refreshLayout(parent);
       };
       const observer = new view.ResizeObserver((entries) => {