@zumer/orbit 1.6.0 → 2.0.1

package/dist/orbit.mjs

@@ -1,6 +1,6 @@
 /*
 * orbit
-* v.1.6.0
+* v.2.0.1
 * Author Juan Martin Muda - Zumerlab
 * License MIT
 */
@@ -18,6 +18,56 @@ function orbitNumber(element) {
   }
   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 @@ function layoutRing(ring) {
     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 @@ function registryFor(doc) {
   });
   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 @@ function createState(scope) {
     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 @@ function createState(scope) {
     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 @@ function discover(state) {
   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 @@ function flush(state) {
       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 @@ function refreshLayout(root = globalThis.document) {
     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 @@ var OrbitBase = class extends (globalThis.HTMLElement || class {
     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 @@ var OrbitBase = class extends (globalThis.HTMLElement || class {
   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 @@ var OrbitBase = class extends (globalThis.HTMLElement || class {
       arcHeight,
       realRadius,
       arcAngle: 0,
-      // Se sobrescribe en cada componente
+      // set by each component
       shape,
       arcHeightPercentage,
       orbitNumber: orbitNumber2,
@@ -364,22 +496,6 @@ var OrbitBase = class extends (globalThis.HTMLElement || class {
     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 @@ var OrbitBase = class extends (globalThis.HTMLElement || class {
   }
   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 @@ var OrbitBase = class extends (globalThis.HTMLElement || class {
     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 @@ var OrbitBase = class extends (globalThis.HTMLElement || class {
       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 @@ var OrbitProgress = class extends OrbitBase {
           --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 @@ var OrbitProgress = class extends OrbitBase {
         :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 @@ var OrbitProgress = class extends OrbitBase {
           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 @@ var OrbitProgress = class extends OrbitBase {
         }
       </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 @@ var OrbitProgress = class extends OrbitBase {
     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),
@@ -657,27 +785,15 @@ var OrbitProgress = class extends OrbitBase {
     const { realRadius } = attrs;
     const arcAngle = Math.max(0, Math.min(this.getProgressAngle(attrs, full), 360));
     if (!(arcAngle > 0) || !(attrs.orbitRadius > 0)) return "";
-    if (arcAngle >= 359.9) {
-      const top = 50 - realRadius;
-      const bottom = 50 + realRadius;
-      return `M 50,${top} A ${realRadius},${realRadius} 0 1 1 50,${bottom} A ${realRadius},${realRadius} 0 1 1 50,${top}`;
-    }
-    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,
@@ -702,7 +818,7 @@ var OrbitProgress = class extends OrbitBase {
       strokeWidth,
       arcHeight
     );
-    return super.generatePathData(shape, params, arcHeight, orbitNumber2);
+    return super.generatePathData(shape, params);
   }
 };
 
@@ -716,15 +832,11 @@ if (template) template.innerHTML = `
       --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;
     }
@@ -738,6 +850,20 @@ if (template) template.innerHTML = `
     :host([interactive]) svg * {
       pointer-events: visiblePainted;
     }
+    /* Text lets the pointer through to the band under it: WebKit fires no
+       click on SVG text inside a shadow root. */
+    :host([interactive]) svg text,
+    :host([interactive]) svg textPath {
+      pointer-events: none;
+    }
+    /* 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;
     }
@@ -750,18 +876,21 @@ if (template) template.innerHTML = `
     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 {
@@ -772,9 +901,10 @@ var OrbitArc = class extends OrbitBase {
   }
   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");
@@ -785,6 +915,8 @@ var OrbitArc = class extends OrbitBase {
     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");
@@ -800,9 +932,9 @@ var OrbitArc = class extends OrbitBase {
     } 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
@@ -823,7 +955,7 @@ var OrbitArc = class extends OrbitBase {
         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) {
@@ -840,23 +972,43 @@ var OrbitArc = class extends OrbitBase {
     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;
@@ -871,32 +1023,38 @@ var OrbitArc = class extends OrbitBase {
       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;
@@ -909,10 +1067,16 @@ var Orbit = {
     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) => {