@zumer/orbit 1.4.8 → 1.4.11

package/dist/orbit.js

@@ -1,6 +1,6 @@
 /*
 * orbit
-* v.1.4.8
+* v.1.4.11
 * Author Juan Martin Muda - Zumerlab
 * License MIT
 */
@@ -9,17 +9,6 @@
   var OrbitBase = class extends HTMLElement {
     constructor() {
       super();
-      this.commonProperties = {
-        orbitRadius: 0,
-        arcHeight: 0,
-        realRadius: 0,
-        arcAngle: 0,
-        shape: "none",
-        arcHeightPercentage: 0,
-        orbitNumber: 1,
-        size: 1,
-        strokeWidth: 1
-      };
     }
     getCommonAttributes(element) {
       const orbitRadius = parseFloat(getComputedStyle(element).getPropertyValue("r") || 0);
@@ -28,7 +17,7 @@
       const strokeWidth = parseFloat(getComputedStyle(element).getPropertyValue("--o-stroke-width") || 1);
       const shape = element.getAttribute("shape") || "none";
       const arcHeight = orbitRadius / orbitNumber * size - strokeWidth + 0.3;
-      const arcHeightPercentage = arcHeight / 2 * 100 / orbitRadius / 2;
+      const arcHeightPercentage = orbitRadius > 0 ? arcHeight / 2 * 100 / orbitRadius / 2 : 0;
       let innerOuter = 0;
       if (element.classList.contains("outer-orbit")) {
         innerOuter = arcHeightPercentage;
@@ -95,13 +84,19 @@
       const upperArcEnd = this.arcPoint(bigRadius, upperAngleEnd);
       const innerArcStart = this.arcPoint(smallRadius, innerAngleStart);
       const innerArcEnd = this.arcPoint(smallRadius, innerAngleEnd);
-      const largeArcFlag = arcAngle <= 180 ? 0 : 1;
+      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,
+        largeArcFlag: largeArcFlagUpper,
+        // back-compat alias; prefer the two below
+        largeArcFlagUpper,
+        largeArcFlagInner,
         bigRadius,
         smallRadius,
         radius,
@@ -141,8 +136,11 @@
       return d;
     }
     generateRoundedPath(params, arcHeight, orbitNumber) {
-      const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag } = params;
+      const { bigRadius, smallRadius } = params;
       const curve = arcHeight < 10 ? 5 : arcHeight < 5 ? 2.5 : 10;
+      const capRad = curve / orbitNumber * 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 / orbitNumber);
       const newUpperEnd = this.arcPoint(bigRadius, params.upperAngleEnd, 0, -curve / orbitNumber);
       const newInnerStart = this.arcPoint(smallRadius, params.innerAngleStart, 0, curve / orbitNumber);
@@ -155,81 +153,81 @@
       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 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
-      d += `Q ${Q.xc}, ${Q.yc} ${upperPointEnd.x} ${upperPointEnd.y} `;
-      d += `L ${upperPointEnd.x} ${upperPointEnd.y}`;
-      d += `L ${innerPointEnd.x} ${innerPointEnd.y}`;
-      d += `Q ${Q1.xc}, ${Q1.yc} ${newInnerEnd.x} ${newInnerEnd.y} `;
-      d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
-      d += `Q ${Q2.xc}, ${Q2.yc} ${innerPointStart.x} ${innerPointStart.y} `;
-      d += `L ${innerPointStart.x} ${innerPointStart.y}`;
-      d += `L ${upperPointStart.x} ${upperPointStart.y}`;
-      d += ` Q ${Q3.xc}, ${Q3.yc} ${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`;
       return d;
     }
     // Dentro de la clase OrbitCommon en orbit-common.js
     generateCirclePath(params, shape) {
-      const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag } = params;
-      let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
+      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 ${largeArcFlag} 0 ${innerArcStart.x},${innerArcStart.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`;
       return d;
     }
     generateCircleBPath(params, arcHeight, orbitNumber) {
-      const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius, largeArcFlag } = params;
+      const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius } = params;
       const segment = arcHeight * 1.36;
+      const capRad = segment / orbitNumber * 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 / orbitNumber);
       const newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, -segment / orbitNumber);
       const newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, segment / orbitNumber);
       const newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, -segment / orbitNumber);
-      let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
+      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 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.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`;
       return d;
     }
     generateArrowPath(params, orbitNumber) {
-      const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag, radius } = params;
+      const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner, radius } = params;
       const middleEnd = this.arcPoint(radius, params.upperAngleEnd, 0, 24 / orbitNumber / 2);
       const middleStart = this.arcPoint(radius, params.upperAngleStart, 0, 24 / orbitNumber / 2);
-      let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
+      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 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
+      d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
       d += `L ${middleStart.x} ${middleStart.y}`;
       d += `Z`;
       return d;
     }
     generateSlashPath(params, shape, orbitNumber) {
-      const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius, largeArcFlag } = params;
+      const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner } = params;
       const newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
       const newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
       const newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
       const newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
-      let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
+      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 ${largeArcFlag} 0 ${newInnerStart.x}, ${newInnerStart.y}`;
+      d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${newInnerStart.x}, ${newInnerStart.y}`;
       d += `Z`;
       return d;
     }
     generateZigzagPath(params, arcHeight, orbitNumber) {
-      const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag, radius } = params;
-      const s2 = this.arcPoint(radius, params.upperAngleStart, -arcHeight / orbitNumber / 2, 3);
-      const s3 = this.arcPoint(radius, params.upperAngleStart, 0 / orbitNumber / 2, 0);
-      const s4 = this.arcPoint(radius, params.upperAngleStart, arcHeight / orbitNumber / 2, 3);
-      const e2 = this.arcPoint(radius, params.innerAngleEnd, arcHeight / orbitNumber / 2, 3);
-      const e3 = this.arcPoint(radius, params.innerAngleEnd, 0 / orbitNumber / 2, 0);
-      const e4 = this.arcPoint(radius, params.innerAngleEnd, -arcHeight / orbitNumber / 2, 3);
-      let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
+      const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner, radius } = params;
+      const h2 = arcHeight / orbitNumber / 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 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.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}`;
@@ -237,10 +235,10 @@
       return d;
     }
     generateDefaultPath(params) {
-      const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag } = params;
-      let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
+      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 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
+      d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
       d += `Z`;
       return d;
     }
@@ -310,14 +308,11 @@
       this.observer.observe(this, { attributes: true, childList: true });
     }
     update() {
-      const progressBg = this.shadowRoot.querySelector(".progress-bg");
-      const progressBar = this.shadowRoot.querySelector(".progress-bar");
-      this.updateArc(progressBg, true);
-      this.updateArc(progressBar, false);
-    }
-    updateArc(arc, full) {
-      const { d } = this.calculateArcParameters(full);
-      arc.setAttribute("d", d);
+      const attrs = this.getAttributes();
+      const dBg = this.calculateArcParameters(attrs, true);
+      const dBar = this.calculateArcParameters(attrs, false);
+      this.shadowRoot.querySelector(".progress-bg").setAttribute("d", dBg);
+      this.shadowRoot.querySelector(".progress-bar").setAttribute("d", dBar);
     }
     getAttributes() {
       const common = super.getCommonAttributes(this);
@@ -331,13 +326,13 @@
         maxValue
       };
     }
-    getProgressAngle(full) {
-      const { range, progress, maxValue } = this.getAttributes();
+    getProgressAngle(attrs, full) {
+      const { range, progress, maxValue } = attrs;
       return full ? (maxValue - 1e-5) / maxValue * range : progress / maxValue * range;
     }
-    calculateArcParameters(full) {
-      const { shape, realRadius, arcHeightPercentage, orbitNumber, strokeWidth, arcHeight } = this.getAttributes();
-      const arcAngle = this.getProgressAngle(full);
+    calculateArcParameters(attrs, full) {
+      const { shape, realRadius, arcHeightPercentage, orbitNumber, strokeWidth, arcHeight } = attrs;
+      const arcAngle = this.getProgressAngle(attrs, full);
       const params = super.calculateCommonArcParameters(
         arcAngle,
         realRadius,
@@ -347,8 +342,7 @@
         strokeWidth,
         arcHeight
       );
-      const d = super.generatePathData(shape, params, arcHeight, orbitNumber);
-      return { d };
+      return super.generatePathData(shape, params, arcHeight, orbitNumber);
     }
   };
 
@@ -411,9 +405,8 @@
       this.setupObservers();
     }
     disconnectedCallback() {
-      var _a, _b;
-      (_a = this.observer) == null ? void 0 : _a.disconnect();
-      (_b = this.textObserver) == null ? void 0 : _b.disconnect();
+      if (this.observer) this.observer.disconnect();
+      if (this.textObserver) this.textObserver.disconnect();
     }
     setupObservers() {
       this.observer = new MutationObserver((mutations) => {
@@ -429,15 +422,13 @@
       this.textObserver.observe(this, { characterData: true, subtree: true });
     }
     update() {
-      const { length, fontSize, textAnchor, fitRange } = this.getAttributes();
-      const orbitPath = this.shadowRoot.getElementById("orbitPath");
-      const orbitShape = this.shadowRoot.getElementById("orbitShape");
-      const text = this.shadowRoot.querySelector("text");
+      const attrs = this.getAttributes();
+      const { length, fontSize, textAnchor, fitRange } = attrs;
+      const orbitPath = this.shadowRoot.querySelector("#orbitPath");
+      const orbitShape = this.shadowRoot.querySelector("#orbitShape");
       const textPath = this.shadowRoot.querySelector("textPath");
-      const { dShape } = this.calculateArcParameters();
-      const { dPath } = this.calculateTextArcParameters();
-      orbitShape.setAttribute("d", dShape);
-      orbitPath.setAttribute("d", dPath);
+      orbitShape.setAttribute("d", this.calculateArcParameters(attrs).dShape);
+      orbitPath.setAttribute("d", this.calculateTextArcParameters(attrs).dPath);
       if (textAnchor === "start") {
         textPath.setAttribute("startOffset", "0%");
         textPath.setAttribute("text-anchor", "start");
@@ -451,7 +442,7 @@
       if (fitRange) {
         textPath.parentElement.setAttribute("textLength", orbitPath.getTotalLength());
       }
-      text.style.fontSize = `calc(${fontSize} * (100 / (${length}) * (12 / var(--o-orbit-number)))`;
+      textPath.parentElement.style.fontSize = `calc(${fontSize} * (100 / (${length}) * (12 / var(--o-orbit-number)))`;
       textPath.textContent = this.textContent;
     }
     getAttributes() {
@@ -459,12 +450,12 @@
       let arcAngle;
       const flip = this.hasAttribute("flip") || this.classList.contains("flip");
       const fitRange = this.hasAttribute("fit-range") || this.classList.contains("fit-range") || false;
-      const length = parseFloat(getComputedStyle(this).getPropertyValue("--o-force"));
+      const length = parseFloat(getComputedStyle(this).getPropertyValue("--o-force")) || 100;
       const textAnchor = this.getAttribute("text-anchor") || "middle";
       const fontSize = getComputedStyle(this).getPropertyValue("font-size") || getComputedStyle(this).getPropertyValue("--font-size");
       const range = parseFloat(getComputedStyle(this).getPropertyValue("--o-range") || 360);
       const value = parseFloat(this.getAttribute("value"));
-      const gap = parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));
+      const gap = parseFloat(getComputedStyle(this).getPropertyValue("--o-gap")) || 1;
       if (value) {
         arcAngle = super.getProgressAngle(range, value);
         const prevElement = this.previousElementSibling;
@@ -491,8 +482,8 @@
         textAnchor
       };
     }
-    calculateArcParameters() {
-      const { arcAngle, realRadius, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight, gap } = this.getAttributes();
+    calculateArcParameters(attrs) {
+      const { arcAngle, realRadius, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight, gap } = attrs;
       const params = super.calculateCommonArcParameters(
         arcAngle,
         realRadius,
@@ -506,8 +497,8 @@
       const dShape = super.generatePathData(shape, params, arcHeight, orbitNumber);
       return { dShape };
     }
-    calculateTextArcParameters() {
-      const { arcAngle, realRadius, gap, flip } = this.getAttributes();
+    calculateTextArcParameters(attrs) {
+      const { arcAngle, realRadius, gap, flip } = attrs;
       const adjustedGap = gap * 0.5;
       const sweepFlag = flip ? 0 : 1;
       const largeArcFlag = arcAngle <= 180 ? 0 : 1;
@@ -533,39 +524,35 @@
   };
 
   // src/js/orbit-resize.js
-  var Orbit = {};
-  Orbit = {
-    resize: (parentElementSelector) => {
-      const parentElement = document.querySelector(parentElementSelector);
-      if (!parentElement) {
-        console.error(`Not found: ${parentElementSelector}`);
+  var Orbit = {
+    resize(parentElementSelector) {
+      const parent = document.querySelector(parentElementSelector);
+      if (!parent) {
+        console.error("Orbit.resize: element not found:", parentElementSelector);
         return;
       }
-      const resizeObserver = new ResizeObserver((entries) => {
-        for (let entry of entries) {
-          const { width } = entry.contentRect;
-          const childElements = parentElement.querySelectorAll(".gravity-spot");
-          if (childElements) {
-            childElements.forEach((childElement) => {
-              let gravityForce = getComputedStyle(childElement).getPropertyValue("--o-force");
-              let forceRatio = width / 500;
-              childElement.style.setProperty("--o-force-ratio", `${forceRatio}`);
-            });
-          } else {
-            console.error("No gravity-spot found");
-          }
+      const applyRatio = (width) => {
+        parent.querySelectorAll(".gravity-spot").forEach((el) => {
+          el.style.setProperty("--o-force-ratio", String(width / 500));
+        });
+      };
+      let w = parent.offsetWidth || parent.getBoundingClientRect().width;
+      if (w > 0) applyRatio(w);
+      else requestAnimationFrame(() => {
+        w = parent.offsetWidth || parent.getBoundingClientRect().width;
+        if (w > 0) applyRatio(w);
+      });
+      const ro = new ResizeObserver((entries) => {
+        for (const e of entries) {
+          if (e.contentRect.width > 0) applyRatio(e.contentRect.width);
         }
       });
-      resizeObserver.observe(parentElement);
+      ro.observe(parent);
     }
   };
 
   // src/orbit.js
-  if (!customElements.get("o-progress")) {
-    customElements.define("o-progress", OrbitProgress);
-  }
-  if (!customElements.get("o-arc")) {
-    customElements.define("o-arc", OrbitArc);
-  }
+  if (!customElements.get("o-progress")) customElements.define("o-progress", OrbitProgress);
+  if (!customElements.get("o-arc")) customElements.define("o-arc", OrbitArc);
   window.Orbit = Orbit;
 })();