@zumer/orbit 1.5.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/orbit.min.js CHANGED
@@ -1,10 +1,10 @@
1
1
  /*
2
2
  * orbit
3
- * v.1.5.0
3
+ * v.2.0.0
4
4
  * Author Juan Martin Muda - Zumerlab
5
5
  * License MIT
6
6
  */
7
- (()=>{var x=Symbol.for("zumer.orbit.layout.state.v1"),F=Symbol.for("zumer.orbit.layout.registry.v1"),_=Symbol.for("zumer.orbit.layout.probe.v1"),z="o-arc, o-progress",Z={subtree:!0,childList:!0,characterData:!0,attributes:!0,attributeOldValue:!0};function T(r){var t;for(let o of r.classList||[])if(/^orbit-\d+$/.test(o))return Number(o.slice(6));return(t=r.classList)!=null&&t.contains("orbit")?null:void 0}function P(r,t,o){let n=String(o);r.style.getPropertyValue(t)!==n&&r.style.setProperty(t,n)}function w(r,t,o=0,n="number"){let e=String(t||"").trim();if(!e)return o;if(n==="number"&&/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(e))return Number(e);let i=e.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|grad|turn)?$/);if(n==="angle"&&i)return Number(i[1])*({deg:1,rad:180/Math.PI,grad:.9,turn:360}[i[2]]||1);let a=r.ownerDocument;if(!(a!=null&&a.documentElement))return o;let c=a[_];c||(c=a.createElement("span"),c.setAttribute("data-orbit-measure",""),c.setAttribute("aria-hidden","true"),c.style.cssText="all:initial!important;position:fixed!important;visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;overflow:hidden!important;",a.documentElement.appendChild(c),Object.defineProperty(a,_,{value:c,configurable:!0}));let s=n==="angle"?"rotate":"scale";if(c.style.removeProperty(s),c.style.setProperty(s,e,"important"),!c.style.getPropertyValue(s))return o;let l=a.defaultView.getComputedStyle(c).getPropertyValue(s),h=parseFloat(l);return Number.isFinite(h)?h:o}function G(r){if(r.localName==="o-arc")return"arc";for(let t of["satellite","vector","side"])if(r.classList.contains(t))return t;return null}function X(r){let t={arc:0,satellite:0,vector:0,side:0};for(let e of r.children){let i=G(e);i?P(e,"--o-layout-index",t[i]++-(i==="side"?1:0)):e.localName==="o-progress"&&P(e,"--o-layout-index",0)}let o=Math.max(t.arc,t.satellite,t.vector,1),n=t.side?String(t.side):`max(1, ${o} - var(--o-fit-range, 0))`;P(r,"--o-layout-angle",`calc(var(--o-range, 360deg) / ${n})`)}function B(r){return(r==null?void 0:r.nodeType)===9||(r==null?void 0:r.nodeType)===11&&!!r.host}function V(r){var o;if(B(r))return r;let t=(o=r==null?void 0:r.getRootNode)==null?void 0:o.call(r);return B(t)?t:null}function Q(r,t){var o,n;for(let e=t;e;e=(o=e.getRootNode)==null?void 0:o.call(e).host)if(r===e||(n=r.contains)!=null&&n.call(r,e))return!0;return!1}function J(r){return r[F]||Object.defineProperty(r,F,{value:{states:new Set},configurable:!0}),r[F]}function O(r){if(!r.disposed){r.disposed=!0,r.view.cancelAnimationFrame(r.frame),r.observer.disconnect(),r.resize.disconnect();for(let t of r.listeners)t();r.rings.clear(),r.visuals.clear(),r.dirty.clear(),r.registry.states.delete(r),r.scope[x]===r&&delete r.scope[x]}}function W(r){for(let t of r.states)t.scope.host&&!t.scope.host.isConnected&&O(t)}function E(r,t=r.scope){for(let o of r.registry.states)o!==r&&o.scope.host&&Q(t,o.scope.host)&&(o.all=!0,o.queue())}function K(r){return r.nodeType!==1||r.hasAttribute("data-orbit-measure")?!1:T(r)!==void 0||r.matches(".gravity-spot, o-arc, o-progress")?!0:!!r.querySelector(".gravity-spot, .orbit, [data-orbit-ring], o-arc, o-progress")}function tt(r){return r.nodeType===1&&(r.matches('style, link[rel~="stylesheet"]')||!!r.querySelector('style, link[rel~="stylesheet"]'))}function et(r,t){if(r.type==="childList")return[...r.addedNodes,...r.removedNodes].some(K);if(r.attributeName!=="class")return!1;let o=r.target;return t.rings.has(o)||o.classList.contains("gravity-spot")||T(o)!==void 0||(r.oldValue||"").split(/\s+/).some(n=>n==="gravity-spot"||n==="orbit"||/^orbit-\d+$/.test(n))}function rt(r){let t=r.nodeType===9?r:r.ownerDocument,o=t.defaultView,n=J(t),e={scope:r,doc:t,view:o,registry:n,rings:new Set,visuals:new Set,dirty:new Set,scan:!0,all:!0,frame:0,disposed:!1,listeners:[]},i=(s,l,h,u)=>{s==null||s.addEventListener(l,h,u),e.listeners.push(()=>s==null?void 0:s.removeEventListener(l,h,u))},a=()=>{!e.disposed&&!e.frame&&(e.frame=o.requestAnimationFrame(()=>{e.frame=0,e.flush()}))};e.queue=a,e.flush=()=>ot(e),e.invalidate=(s=r,l=!0)=>{var h,u;if(l&&(s===r||s===t.documentElement||s===t.head))e.all=!0;else{for(let d of e.rings)(d===s||d.contains(s)||l&&((h=s.contains)!=null&&h.call(s,d)))&&e.dirty.add(d);for(let d of e.visuals)(d===s||d.contains(s)||l&&((u=s.contains)!=null&&u.call(s,d)))&&e.dirty.add(d)}(e.all||e.dirty.size||e.scan)&&a()},e.observer=new o.MutationObserver(s=>{var l,h;if(s.some(u=>u.type==="childList")&&W(n),!e.disposed)for(let u of s){let d=u.target.nodeType===3?u.target.parentElement:u.target;if(!d||(l=d.hasAttribute)!=null&&l.call(d,"data-orbit-measure"))continue;let f=et(u,e);f&&(e.scan=!0),u.type==="childList"&&[...u.addedNodes,...u.removedNodes].some(tt)||(h=d.closest)!=null&&h.call(d,"head, style")||d.localName==="link"?(e.all=!0,E(e)):u.type==="attributes"&&E(e,d),e.invalidate(d,u.type==="attributes"||f)}}),e.observer.observe(r,Z),e.resize=new o.ResizeObserver(s=>{for(let l of s)e.dirty.add(l.target);a()});let c=()=>{e.all=!0,E(e),a()};r===t&&(i(o,"resize",c),i(t.fonts,"loadingdone",c)),i(r,"load",s=>{s.target.localName==="link"&&c()},!0);for(let s of["pointerover","pointerout","focusin","focusout"])i(r,s,l=>{e.invalidate(l.target),E(e,l.target)},!0);return Object.defineProperty(r,x,{value:e,configurable:!0}),n.states.add(e),a(),e}function q(r){let t=r.nodeType===9?r:r.ownerDocument;if(!(t!=null&&t.defaultView)||!t.documentElement||r.host&&!r.host.isConnected)return null;if(r[x]&&r[x].doc!==t&&O(r[x]),r.host){let o=V(r.host);o&&q(o)}return r[x]||rt(r)}function nt(r){let t=new Set,o=new Map;for(let e of r.scope.querySelectorAll(".gravity-spot > *")){let i=T(e);if(i===void 0)continue;let a=o.get(e.parentElement)||0;e.classList.contains("orbit")&&o.set(e.parentElement,++a);let c=i===null?a:i;e.setAttribute("data-orbit-ring",""),P(e,"--o-layout-number",c===0?1e-5:c),t.add(e),r.dirty.add(e),r.rings.has(e)||r.resize.observe(e)}for(let e of r.rings)if(!t.has(e)){r.resize.unobserve(e),e.removeAttribute("data-orbit-ring");for(let i of["--o-layout-number","--o-layout-angle"])e.style.removeProperty(i)}r.rings=t;let n=new Set(r.scope.querySelectorAll(z));for(let e of r.visuals)n.has(e)||r.resize.unobserve(e);for(let e of n)r.visuals.has(e)||(r.resize.observe(e),r.dirty.add(e));r.visuals=n,r.scan=!1}function ot(r){var t;if(!r.disposed){if(r.scope.host&&!r.scope.host.isConnected){O(r);return}r.observer.disconnect();try{r.scan&&nt(r);let o=r.all?new Set([...r.rings,...r.visuals]):r.dirty,n=new Set;for(let e of o)if(e.isConnected)if(r.rings.has(e)){X(e);for(let i of e.querySelectorAll(z))n.add(i)}else r.visuals.has(e)&&n.add(e);for(let e of r.visuals)n.has(e)&&((t=e.update)==null||t.call(e));r.dirty=new Set,r.all=!1}finally{r.disposed||r.observer.observe(r.scope,Z)}}}function R(r=globalThis.document){var n;let t=V(r);if(!t)return;let o=q(t);o&&((n=r==null?void 0:r.matches)!=null&&n.call(r,z)&&!o.visuals.has(r)&&(o.scan=!0),o.invalidate(r||t))}function D(r=globalThis.document){let t=V(r);if(!t)return;let o=q(t);if(o){W(o.registry);for(let n of o.registry.states)n!==o&&(!n.scope.host||!Q(r,n.scope.host))||(n.scan=!0,n.all=!0,n.view.cancelAnimationFrame(n.frame),n.frame=0,n.flush())}}var S=class extends(globalThis.HTMLElement||class{}){constructor(){super()}connectedCallback(){R(this)}disconnectedCallback(){this._textFrame&&this.ownerDocument.defaultView.cancelAnimationFrame(this._textFrame),this._textFrame=0}readNumber(t,o,n=0){return w(this,t.getPropertyValue(o),n)}readAngle(t,o,n=0){return w(this,t.getPropertyValue(o),n,"angle")}getCommonAttributes(t){var f;let o=t.ownerDocument.defaultView.getComputedStyle(t),n=parseFloat(o.getPropertyValue("r")),e=Math.max(0,Number.isFinite(n)?n:(((f=t.parentElement)==null?void 0:f.clientWidth)||0)/2),i=Math.max(1e-5,this.readNumber(o,"--o-orbit-number",1)),a=Math.max(0,this.readNumber(o,"--o-size-ratio",1)),c=Math.max(0,this.readNumber(o,"--o-stroke-width",1)),s=t.getAttribute("shape")||"none",l=Math.max(0,e/i*a-c+.3),h=e>0?Math.min(49.999,l*25/e):0,u=0;t.classList.contains("outer-orbit")?u=h:t.classList.contains("quarter-outer-orbit")?u=h*-.5:t.classList.contains("inner-orbit")?u=h*-1:t.classList.contains("quarter-inner-orbit")&&(u=h*.5);let d=50+u;return{orbitRadius:e,arcHeight:l,realRadius:d,arcAngle:0,shape:s,arcHeightPercentage:h,orbitNumber:i,size:a,strokeWidth:c,style:o}}getProgressAngle(t,o,n=100){return!Number.isFinite(o)||!Number.isFinite(n)||n<=0?0:Math.min(1,Math.max(0,o/n))*Math.max(0,Math.min(360,t))}getControlPoint(t,o,n,e,i="clockwise"){let a=(t+n)/2,c=(o+e)/2,s=n-t,l=e-o;return i==="clockwise"?{xc:a+l*.4,yc:c-s*.4}:{xc:a-l*.4,yc:c+s*.4}}arcPoint(t,o,n=0,e=0){let i=t+n,a=o+e*Math.PI/180;return{x:50+i*Math.cos(a),y:50+i*Math.sin(a)}}calculateCommonArcParameters(t,o,n,e,i,a,c,s=0){let l=Math.PI/2,h=Math.max(0,Math.min(359.999999,t))*Math.PI/180,u=o+n,d=Math.max(.001,o-n),f=Math.min(h*.49,(s+a*1.25)/e/u),p=Math.min(h*.49,(s+a*1.25)/e/d),g=f-l,y=h-f-l,m=p-l,A=h-p-l,v=this.arcPoint(u,g),b=this.arcPoint(u,y),k=this.arcPoint(d,m),M=this.arcPoint(d,A),$=y-g,H=A-m,U=$>Math.PI?1:0,Y=H>Math.PI?1:0;return{upperArcStart:v,upperArcEnd:b,innerArcStart:k,innerArcEnd:M,largeArcFlag:U,largeArcFlagUpper:U,largeArcFlagInner:Y,bigRadius:u,smallRadius:d,radius:o,upperAngleStart:g,upperAngleEnd:y,innerAngleStart:m,innerAngleEnd:A}}generatePathData(t,o,n,e){let i="";switch(t){case"rounded":i=this.generateRoundedPath(o,n,e);break;case"circle":case"circle-a":case"bullet":i=this.generateCirclePath(o,t);break;case"circle-b":i=this.generateCircleBPath(o,n,e);break;case"arrow":i=this.generateArrowPath(o,e);break;case"backslash":case"slash":i=this.generateSlashPath(o,t,e);break;case"zigzag":i=this.generateZigzagPath(o,n,e);break;default:i=this.generateDefaultPath(o)}return i}generateRoundedPath(t,o,n){let{bigRadius:e,smallRadius:i}=t,a=Math.min(t.upperAngleEnd-t.upperAngleStart,t.innerAngleEnd-t.innerAngleStart),c=Math.min(o<5?2.5:o<10?5:10,a*180/Math.PI*n*.49),s=c/n*Math.PI/180,l=t.upperAngleEnd-t.upperAngleStart-2*s>Math.PI?1:0,h=t.innerAngleEnd-t.innerAngleStart-2*s>Math.PI?1:0,u=this.arcPoint(e,t.upperAngleStart,0,c/n),d=this.arcPoint(e,t.upperAngleEnd,0,-c/n),f=this.arcPoint(i,t.innerAngleStart,0,c/n),p=this.arcPoint(i,t.innerAngleEnd,0,-c/n),g=this.arcPoint(e,t.upperAngleStart,-(c/2)/n,0),y=this.arcPoint(e,t.upperAngleEnd,-(c/2)/n,0),m=this.arcPoint(i,t.innerAngleStart,c/2/n,0),A=this.arcPoint(i,t.innerAngleEnd,c/2/n,0),v=this.getControlPoint(d.x,d.y,y.x,y.y),b=this.getControlPoint(A.x,A.y,p.x,p.y),k=this.getControlPoint(f.x,f.y,m.x,m.y),M=this.getControlPoint(g.x,g.y,u.x,u.y),$=`M ${u.x},${u.y} A ${e},${e} 0 ${l} 1 ${d.x},${d.y}`;return $+=`Q ${v.xc},${v.yc} ${y.x},${y.y} L ${A.x},${A.y}`,$+=`Q ${b.xc},${b.yc} ${p.x},${p.y}`,$+=`A ${i},${i} 0 ${h} 0 ${f.x},${f.y}`,$+=`Q ${k.xc},${k.yc} ${m.x},${m.y} L ${g.x},${g.y}`,$+=` Q ${M.xc},${M.yc} ${u.x},${u.y}`,$+=" Z",$}generateCirclePath(t,o){let{upperArcStart:n,upperArcEnd:e,innerArcStart:i,innerArcEnd:a,bigRadius:c,smallRadius:s,largeArcFlagUpper:l,largeArcFlagInner:h}=t,u=`M ${n.x},${n.y} A ${c},${c} 0 ${l} 1 ${e.x},${e.y}`;return u+=` A 1,1 0 0 1 ${a.x},${a.y} `,u+=` A ${s},${s} 0 ${h} 0 ${i.x},${i.y}`,u+=` A 1,1 0 0 ${o==="circle"||o==="circle-a"?1:0} ${n.x},${n.y} `,u+=" Z",u}generateCircleBPath(t,o,n){let{upperAngleStart:e,upperAngleEnd:i,innerAngleStart:a,innerAngleEnd:c,bigRadius:s,smallRadius:l}=t,h=Math.min(i-e,c-a),u=Math.min(o*1.36,h*180/Math.PI*n*.49),d=u/n*Math.PI/180,f=i-e-2*d>Math.PI?1:0,p=c-a-2*d>Math.PI?1:0,g=this.arcPoint(s,e,0,u/n),y=this.arcPoint(s,i,0,-u/n),m=this.arcPoint(l,a,0,u/n),A=this.arcPoint(l,c,0,-u/n),v=`M ${g.x},${g.y} A ${s},${s} 0 ${f} 1 ${y.x},${y.y}`;return v+=` A 1,1 0 0 1 ${A.x},${A.y} `,v+=` A ${l},${l} 0 ${p} 0 ${m.x},${m.y}`,v+=` A 1,1 0 0 1 ${g.x},${g.y} `,v+=" Z",v}generateArrowPath(t,o){let{upperArcStart:n,upperArcEnd:e,innerArcStart:i,innerArcEnd:a,bigRadius:c,smallRadius:s,largeArcFlagUpper:l,largeArcFlagInner:h,radius:u}=t,d=this.arcPoint(u,t.upperAngleEnd,0,24/o/2),f=this.arcPoint(u,t.upperAngleStart,0,24/o/2),p=`M ${n.x},${n.y} A ${c},${c} 0 ${l} 1 ${e.x},${e.y}`;return p+=`L ${d.x} ${d.y}`,p+=`L ${a.x} ${a.y}`,p+=`A ${s},${s} 0 ${h} 0 ${i.x}, ${i.y}`,p+=`L ${f.x} ${f.y}`,p+="Z",p}generateSlashPath(t,o,n){let{upperAngleStart:e,upperAngleEnd:i,innerAngleStart:a,innerAngleEnd:c,bigRadius:s,smallRadius:l,largeArcFlagUpper:h,largeArcFlagInner:u}=t,d=this.arcPoint(s,e,0,o==="backslash"?0:24/n/2),f=this.arcPoint(s,i,0,o==="backslash"?0:24/n/2),p=this.arcPoint(l,a,0,o==="backslash"?24/n/2:0),g=this.arcPoint(l,c,0,o==="backslash"?24/n/2:0),y=`M ${d.x},${d.y} A ${s},${s} 0 ${h} 1 ${f.x},${f.y}`;return y+=`L ${g.x} ${g.y}`,y+=`A ${l},${l} 0 ${u} 0 ${p.x}, ${p.y}`,y+="Z",y}generateZigzagPath(t,o,n){let{upperArcStart:e,upperArcEnd:i,innerArcStart:a,innerArcEnd:c,bigRadius:s,smallRadius:l,largeArcFlagUpper:h,largeArcFlagInner:u,radius:d}=t,f=o/n/2,p=this.arcPoint(d,t.upperAngleStart,-f,3),g=this.arcPoint(d,t.upperAngleStart,0,0),y=this.arcPoint(d,t.upperAngleStart,f,3),m=this.arcPoint(d,t.innerAngleEnd,f,3),A=this.arcPoint(d,t.innerAngleEnd,0,0),v=this.arcPoint(d,t.innerAngleEnd,-f,3),b=`M ${e.x},${e.y} A ${s},${s} 0 ${h} 1 ${i.x},${i.y}`;return b+=`L ${m.x} ${m.y}`,b+=`L ${A.x} ${A.y}`,b+=`L ${v.x} ${v.y}`,b+=`L ${c.x} ${c.y}`,b+=`A ${l},${l} 0 ${u} 0 ${a.x}, ${a.y}`,b+=`L ${p.x} ${p.y}`,b+=`L ${g.x} ${g.y}`,b+=`L ${y.x} ${y.y}`,b+="Z",b}generateDefaultPath(t){let{upperArcStart:o,upperArcEnd:n,innerArcStart:e,innerArcEnd:i,bigRadius:a,smallRadius:c,largeArcFlagUpper:s,largeArcFlagInner:l}=t,h=`M ${o.x},${o.y} A ${a},${a} 0 ${s} 1 ${n.x},${n.y}`;return h+=`L ${i.x} ${i.y}`,h+=`A ${c},${c} 0 ${l} 0 ${e.x}, ${e.y}`,h+="Z",h}};var L=class extends S{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
7
+ (()=>{var b=Symbol.for("zumer.orbit.layout.state.v1"),C=Symbol.for("zumer.orbit.layout.registry.v1"),H=Symbol.for("zumer.orbit.layout.probe.v1"),z="o-arc, o-progress",j={subtree:!0,childList:!0,characterData:!0,attributes:!0,attributeOldValue:!0};function $(s){var t;for(let r of s.classList||[])if(/^orbit-\d+$/.test(r))return Number(r.slice(6));return(t=s.classList)!=null&&t.contains("orbit")?null:void 0}var W=Symbol.for("zumer.orbit.warned.v1");function p(s,t,r){let i=s[W]||(s[W]=new Set);i.has(t)||(i.add(t),console.warn(`[orbit] ${r}`))}function _(s,t){var r,i;for(let e=s;e;e=e.parentElement||((r=e.getRootNode)==null?void 0:r.call(e).host))if((i=e.matches)!=null&&i.call(e,t))return e;return null}var Q=".satellite, .vector, .side, o-arc, o-progress";function A(s){let t=[...s.classList].slice(0,3).map(r=>"."+r).join("");return`<${s.localName}${t?" "+t:""}>`}function tt(s){let t=s.parentElement,r=_(t.parentElement,".bigbang, .satellite");r?r.getClientRects().length&&(!r.clientWidth||!r.clientHeight)&&p(r,"empty",`${A(r)} has no size (${r.clientWidth}\xD7${r.clientHeight}px), so its system is invisible. Give it a width, or place it in a parent with a width.`):p(t,"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>.');let i=s.querySelector(":scope > o-arc, :scope > o-progress");if(i){let e=s.ownerDocument.defaultView.getComputedStyle(s),n=e.getPropertyValue("--o-ellipse-x").trim(),o=e.getPropertyValue("--o-ellipse-y").trim();(n&&Number(n)!==1||o&&Number(o)!==1)&&p(s,"ellipse-visual",`${A(i)} is on ${A(s)}, which is stretched into an ellipse (--o-ellipse-x: ${n||1}, --o-ellipse-y: ${o||1}). Arcs and progress are drawn on circles only, so it is hidden. Put it on a round ring.`)}if(_(s,".dev-orbit")){for(let e of s.children)if($(e)!==void 0)p(e,"nested-ring",`${A(e)} 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(!e.matches(Q))p(e,"ring-child",`${A(e)} 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(e.classList.contains("satellite"))for(let n of e.children)n.matches(".capsule, .gravity-spot, .bigbang")||p(n,"satellite-child",`${A(n)} sits directly in a .satellite. Put content in a .capsule so it stays upright and centered.`)}}function v(s,t,r){let i=String(r);s.style.getPropertyValue(t)!==i&&s.style.setProperty(t,i)}function y(s,t,r=0,i="number"){let e=String(t||"").trim();if(!e)return r;if(i==="number"&&/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(e))return Number(e);let n=e.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|grad|turn)?$/);if(i==="angle"&&n)return Number(n[1])*({deg:1,rad:180/Math.PI,grad:.9,turn:360}[n[2]]||1);let o=s.ownerDocument;if(!(o!=null&&o.documentElement))return r;let c=o[H];c||(c=o.createElement("span"),c.setAttribute("data-orbit-measure",""),c.setAttribute("aria-hidden","true"),c.style.cssText="all:initial!important;position:fixed!important;visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;overflow:hidden!important;",o.documentElement.appendChild(c),Object.defineProperty(o,H,{value:c,configurable:!0}));let a=i==="angle"?"rotate":"scale";if(c.style.removeProperty(a),c.style.setProperty(a,e,"important"),!c.style.getPropertyValue(a))return r;let l=o.defaultView.getComputedStyle(c).getPropertyValue(a),u=parseFloat(l);return Number.isFinite(u)?u:r}function et(s){if(s.localName==="o-arc")return"arc";for(let t of["satellite","vector","side"])if(s.classList.contains(t))return t;return null}function rt(s){let t={arc:0,satellite:0,vector:0,side:0};for(let n of s.children){let o=et(n);o?v(n,"--o-layout-index",t[o]++-(o==="side"?1:0)):n.localName==="o-progress"&&v(n,"--o-layout-index",0)}let r=Math.max(t.arc,t.satellite,t.vector,1),i=t.satellite||t.vector,e=t.side?String(t.side):i?`max(1, ${r} - var(--o-fit-range, 0))`:String(r);v(s,"--o-layout-angle",`calc(var(--o-range, 360deg) / ${e})`)}function B(s){return(s==null?void 0:s.nodeType)===9||(s==null?void 0:s.nodeType)===11&&!!s.host}function R(s){var r;if(B(s))return s;let t=(r=s==null?void 0:s.getRootNode)==null?void 0:r.call(s);return B(t)?t:null}function V(s,t){var r,i;for(let e=t;e;e=(r=e.getRootNode)==null?void 0:r.call(e).host)if(s===e||(i=s.contains)!=null&&i.call(s,e))return!0;return!1}function st(s){return s[C]||Object.defineProperty(s,C,{value:{states:new Set},configurable:!0}),s[C]}function O(s){s.frame<0?s.view.clearTimeout(-s.frame):s.frame&&s.view.cancelAnimationFrame(s.frame),s.frame=0}function Z(s){for(let t of s.waiters.splice(0))t()}function q(s){if(!s.disposed){s.disposed=!0,O(s),Z(s),s.observer.disconnect(),s.resize.disconnect();for(let t of s.listeners)t();s.rings.clear(),s.visuals.clear(),s.dirty.clear(),s.registry.states.delete(s),s.scope[b]===s&&delete s.scope[b]}}function F(s){for(let t of s.states)t.scope.host&&!t.scope.host.isConnected&&q(t)}function k(s,t=s.scope){for(let r of s.registry.states)r!==s&&r.scope.host&&V(t,r.scope.host)&&(r.all=!0,r.queue())}function it(s){return s.nodeType!==1||s.hasAttribute("data-orbit-measure")?!1:$(s)!==void 0||s.matches(".gravity-spot, o-arc, o-progress")?!0:!!s.querySelector(".gravity-spot, .orbit, [data-orbit-ring], o-arc, o-progress")}function nt(s){return s.nodeType===1&&(s.matches('style, link[rel~="stylesheet"]')||!!s.querySelector('style, link[rel~="stylesheet"]'))}function ot(s,t){if(s.type==="childList")return[...s.addedNodes,...s.removedNodes].some(it);if(s.attributeName!=="class")return!1;let r=s.target;return t.rings.has(r)||r.classList.contains("gravity-spot")||$(r)!==void 0||(s.oldValue||"").split(/\s+/).some(i=>i==="gravity-spot"||i==="orbit"||/^orbit-\d+$/.test(i))}function at(s){let t=s.nodeType===9?s:s.ownerDocument,r=t.defaultView,i=st(t),e={scope:s,doc:t,view:r,registry:i,rings:new Set,visuals:new Set,dirty:new Set,scan:!0,all:!0,frame:0,disposed:!1,listeners:[],waiters:[]},n=(a,l,u,h)=>{a==null||a.addEventListener(l,u,h),e.listeners.push(()=>a==null?void 0:a.removeEventListener(l,u,h))},o=()=>{if(e.disposed||e.frame)return;let a=()=>{e.frame=0,e.flush()};e.frame=t.visibilityState==="hidden"?-r.setTimeout(a,0):r.requestAnimationFrame(a)};e.queue=o,e.flush=()=>lt(e),e.invalidate=(a=s,l=!0)=>{var u,h;if(l&&(a===s||a===t.documentElement||a===t.head))e.all=!0;else{for(let d of e.rings)(d===a||d.contains(a)||l&&((u=a.contains)!=null&&u.call(a,d)))&&e.dirty.add(d);for(let d of e.visuals)(d===a||d.contains(a)||l&&((h=a.contains)!=null&&h.call(a,d)))&&e.dirty.add(d)}(e.all||e.dirty.size||e.scan)&&o()},e.observer=new r.MutationObserver(a=>{var l,u;if(a.some(h=>h.type==="childList")&&F(i),!e.disposed)for(let h of a){let d=h.target.nodeType===3?h.target.parentElement:h.target;if(!d||(l=d.hasAttribute)!=null&&l.call(d,"data-orbit-measure"))continue;let g=ot(h,e);g&&(e.scan=!0),h.type==="childList"&&[...h.addedNodes,...h.removedNodes].some(nt)||(u=d.closest)!=null&&u.call(d,"head, style")||d.localName==="link"?(e.all=!0,k(e)):h.type==="attributes"&&k(e,d),e.invalidate(d,h.type==="attributes"||g)}}),e.observer.observe(s,j),e.resize=new r.ResizeObserver(a=>{for(let l of a)e.dirty.add(l.target);o()});let c=()=>{e.all=!0,k(e),o()};n(t,"visibilitychange",()=>{t.visibilityState==="hidden"&&e.frame>0&&(O(e),o())}),s===t&&(n(r,"resize",c),n(t.fonts,"loadingdone",c)),n(s,"load",a=>{a.target.localName==="link"&&c()},!0);for(let a of["pointerover","pointerout","focusin","focusout"])n(s,a,l=>{e.invalidate(l.target),k(e,l.target)},!0);return Object.defineProperty(s,b,{value:e,configurable:!0}),i.states.add(e),o(),e}function M(s){let t=s.nodeType===9?s:s.ownerDocument;if(!(t!=null&&t.defaultView)||!t.documentElement||s.host&&!s.host.isConnected)return null;if(s[b]&&s[b].doc!==t&&q(s[b]),s.host){let r=R(s.host);r&&M(r)}return s[b]||at(s)}function ct(s){let t=new Set,r=new Map;for(let e of s.scope.querySelectorAll(".gravity-spot > *")){let n=$(e);if(n===void 0)continue;let o=r.get(e.parentElement)||0;e.classList.contains("orbit")&&r.set(e.parentElement,++o);let c=n===null?o:n;e.setAttribute("data-orbit-ring",""),v(e,"--o-layout-number",c===0?1e-5:c),t.add(e),s.dirty.add(e),s.rings.has(e)||s.resize.observe(e)}for(let e of s.rings)if(!t.has(e)){s.resize.unobserve(e),e.removeAttribute("data-orbit-ring");for(let n of["--o-layout-number","--o-layout-angle"])e.style.removeProperty(n)}s.rings=t;let i=new Set(s.scope.querySelectorAll(z));for(let e of s.visuals)i.has(e)||s.resize.unobserve(e);for(let e of i)s.visuals.has(e)||(s.resize.observe(e),s.dirty.add(e));s.visuals=i,s.scan=!1}function lt(s){if(s.disposed)return;if(s.scope.host&&!s.scope.host.isConnected){q(s);return}s.observer.disconnect();let t=[];try{s.scan&&ct(s);let r=s.all?new Set([...s.rings,...s.visuals]):s.dirty,i=new Set;for(let e of r)if(e.isConnected)if(s.rings.has(e)){rt(e),tt(e);for(let n of e.querySelectorAll(z))i.add(n)}else s.visuals.has(e)&&i.add(e);for(let e of s.visuals)i.has(e)&&e.update&&(e.update(),t.push(e));s.dirty=new Set,s.all=!1}finally{s.disposed||s.observer.observe(s.scope,j)}for(let r of t)r.dispatchEvent(new s.view.Event("o-rendered",{bubbles:!0,composed:!0}));s.frame||Z(s)}function E(s=globalThis.document){var i;let t=R(s);if(!t)return;let r=M(t);r&&((i=s==null?void 0:s.matches)!=null&&i.call(s,z)&&!r.visuals.has(s)&&(r.scan=!0),r.invalidate(s||t))}function D(s=globalThis.document){let t=R(s);if(!t)return;let r=M(t);if(r){F(r.registry);for(let i of r.registry.states)i!==r&&(!i.scope.host||!V(s,i.scope.host))||(i.scan=!0,i.all=!0,O(i),i.flush())}}function G(s=globalThis.document){let t=R(s),r=t&&M(t);if(!r)return Promise.resolve();F(r.registry);let i=[...r.registry.states].filter(e=>e===r||e.scope.host&&V(s,e.scope.host));return Promise.all(i.map(e=>new Promise(n=>{e.waiters.push(n),e.queue()}))).then(()=>{})}var w=class extends(globalThis.HTMLElement||class{}){constructor(){super()}connectedCallback(){for(let t of["value","max"])if(Object.prototype.hasOwnProperty.call(this,t)){let r=this[t];delete this[t],this[t]=r}E(this)}get value(){let t=this.getAttribute("value");return t===null||t.trim()===""?null:Number(t)}set value(t){t==null||t===""?this.removeAttribute("value"):this.setAttribute("value",String(t))}get max(){let t=this.getAttribute("max");return t===null?100:Number(t)}set max(t){t==null||t===""?this.removeAttribute("max"):this.setAttribute("max",String(t))}disconnectedCallback(){this._textFrame&&this.ownerDocument.defaultView.cancelAnimationFrame(this._textFrame),this._textFrame=0}readNumber(t,r,i=0){return y(this,t.getPropertyValue(r),i)}readAngle(t,r,i=0){return y(this,t.getPropertyValue(r),i,"angle")}readValue(){let t=this.getAttribute("value");if(t===null||t.trim()==="")return 0;let r=Number(t);return Number.isFinite(r)?r:(p(this,"value:"+t,`<${this.localName} value="${t}"> is not a number, so nothing is drawn.`),0)}readMax(){let t=this.getAttribute("max");if(t===null)return 100;let r=Number(t);return r>0?r:(p(this,"max:"+t,`<${this.localName} max="${t}"> must be a positive number, so nothing is drawn.`),0)}getCommonAttributes(t){var g;let r=t.ownerDocument.defaultView.getComputedStyle(t),i=parseFloat(r.getPropertyValue("r")),e=Math.max(0,Number.isFinite(i)?i:(((g=t.parentElement)==null?void 0:g.clientWidth)||0)/2),n=Math.max(1e-5,this.readNumber(r,"--o-orbit-number",1)),o=Math.max(0,this.readNumber(r,"--o-size-ratio",1)),c=Math.max(0,this.readNumber(r,"--o-stroke-width",1)),a=t.getAttribute("shape")||"none",l=Math.max(0,e/n*o-c+.3),u=e>0?Math.min(49.999,l*25/e):0,h=0;t.classList.contains("outer-orbit")?h=u:t.classList.contains("quarter-outer-orbit")?h=u*-.5:t.classList.contains("inner-orbit")?h=u*-1:t.classList.contains("quarter-inner-orbit")&&(h=u*.5);let d=50+h;return{orbitRadius:e,arcHeight:l,realRadius:d,arcAngle:0,shape:a,arcHeightPercentage:u,orbitNumber:n,size:o,strokeWidth:c,style:r}}getProgressAngle(t,r,i=100){return!Number.isFinite(r)||!Number.isFinite(i)||i<=0?0:Math.min(1,Math.max(0,r/i))*Math.max(0,Math.min(360,t))}arcPoint(t,r,i=0,e=0){let n=t+i,o=r+e*Math.PI/180;return{x:50+n*Math.cos(o),y:50+n*Math.sin(o)}}calculateCommonArcParameters(t,r,i,e,n,o,c,a=0){let l=Math.PI/2,u=Math.max(0,Math.min(360,t))*Math.PI/180,h=r+i,d=Math.max(.001,r-i),g=Math.min(u*.49,(a+o*1.25)/e/h),m=Math.min(u*.49,(a+o*1.25)/e/d),f=g-l,x=u-g-l,P=m-l,S=u-m-l,U=this.arcPoint(h,f),X=this.arcPoint(h,x),Y=this.arcPoint(d,P),J=this.arcPoint(d,S);return{upperArcStart:U,upperArcEnd:X,innerArcStart:Y,innerArcEnd:J,bigRadius:h,smallRadius:d,radius:r,upperAngleStart:f,upperAngleEnd:x,innerAngleStart:P,innerAngleEnd:S}}generatePathData(t,r){switch(t){case"rounded":return this.generateRoundedPath(r);case"circle":case"circle-a":case"bullet":return this.generateCirclePath(r,t);case"circle-b":return this.generateCircleBPath(r);case"arrow":return this.generateArrowPath(r);case"backslash":case"slash":return this.generateSlashPath(r,t);case"zigzag":return this.generateZigzagPath(r);default:return this.generateDefaultPath(r)}}pt(t,r){let i=this.arcPoint(t,r);return`${i.x},${i.y}`}arcTo(t,r,i){let e=Math.max(1,Math.ceil(Math.abs(i-r)/(Math.PI/2)-1e-9)),n=i>=r?1:0,o="";for(let c=1;c<=e;c++)o+=` A ${t},${t} 0 0 ${n} ${this.pt(t,r+(i-r)*c/e)}`;return o}linePath(t,r,i){return`M ${this.pt(t,r)}${this.arcTo(t,r,i)}`}ending(t,r){let{bigRadius:i,smallRadius:e}=t,n=(i-e)/2,o=(i+e)/2,c=Math.min(t.upperAngleEnd-t.upperAngleStart,t.innerAngleEnd-t.innerAngleStart),a=Math.max(0,Math.min(n*r,c*e*.49));return{h:n,middle:o,length:a,angle:a/o}}generateDefaultPath(t){let{bigRadius:r,smallRadius:i,upperAngleStart:e,upperAngleEnd:n,innerAngleStart:o,innerAngleEnd:c}=t;return`M ${this.pt(r,e)}${this.arcTo(r,e,n)} L ${this.pt(i,c)}${this.arcTo(i,c,o)} Z`}generateRoundedPath(t){let{bigRadius:r,smallRadius:i,upperAngleStart:e,upperAngleEnd:n,innerAngleStart:o,innerAngleEnd:c}=t,{length:a}=this.ending(t,.5),l=(h,d)=>` A ${a},${a} 0 0 1 ${this.pt(h,d)}`,u=`M ${this.pt(r,e+a/r)}${this.arcTo(r,e+a/r,n-a/r)}`;return u+=`${l(r-a,n)} L ${this.pt(i+a,c)}${l(i,c-a/i)}`,u+=this.arcTo(i,c-a/i,o+a/i),u+=`${l(i+a,o)} L ${this.pt(r-a,e)}${l(r,e+a/r)} Z`,u}generateCirclePath(t,r){let{bigRadius:i,smallRadius:e,upperAngleStart:n,upperAngleEnd:o,innerAngleStart:c,innerAngleEnd:a}=t,l=r==="bullet"?0:1,u=`M ${this.pt(i,n)}${this.arcTo(i,n,o)} A 1,1 0 0 1 ${this.pt(e,a)}`;return u+=`${this.arcTo(e,a,c)} A 1,1 0 0 ${l} ${this.pt(i,n)} Z`,u}generateCircleBPath(t){let{bigRadius:r,smallRadius:i}=t,{h:e,angle:n}=this.ending(t,1),o=t.upperAngleStart+n,c=t.upperAngleEnd-n,a=`M ${this.pt(r,o)}${this.arcTo(r,o,c)} A ${e},${e} 0 0 1 ${this.pt(i,c)}`;return a+=`${this.arcTo(i,c,o)} A ${e},${e} 0 0 1 ${this.pt(r,o)} Z`,a}generateArrowPath(t){let{bigRadius:r,smallRadius:i}=t,{middle:e,angle:n}=this.ending(t,1.6),o=t.upperAngleStart,c=t.upperAngleEnd,a=`M ${this.pt(r,o)}${this.arcTo(r,o,c-n)}`;return a+=` L ${this.pt(e,c)} L ${this.pt(i,c-n)}`,a+=`${this.arcTo(i,c-n,o)} L ${this.pt(e,o+n)} Z`,a}generateSlashPath(t,r){let{bigRadius:i,smallRadius:e}=t,{angle:n}=this.ending(t,1),o=t.upperAngleStart,c=t.upperAngleEnd,[a,l,u,h]=r==="backslash"?[o,c-n,o+n,c]:[o+n,c,o,c-n];return`M ${this.pt(i,a)}${this.arcTo(i,a,l)} L ${this.pt(e,h)}${this.arcTo(e,h,u)} Z`}generateZigzagPath(t){let{bigRadius:r,smallRadius:i}=t,{middle:e,angle:n}=this.ending(t,1.6),o=t.upperAngleStart,c=t.upperAngleEnd,a=`M ${this.pt(r,o+n)}${this.arcTo(r,o+n,c)}`;return a+=` L ${this.pt(e,c-n)} L ${this.pt(i,c)}`,a+=`${this.arcTo(i,c,o+n)} L ${this.pt(e,o)} Z`,a}updateHitArea(t,r,i,e){let n=Math.max(0,Number(this.getAttribute("hit-width"))||0);if(this.fitCanvas(r,this.hasAttribute("interactive")?n:0),!this.hasAttribute("interactive")||!(e>i)||!(r.orbitRadius>0)){t.removeAttribute("d");return}let o=c=>(c-90)*Math.PI/180;t.setAttribute("d",this.linePath(r.realRadius,o(i),o(Math.min(e,i+360)))),t.style.strokeWidth=`${r.arcHeight+r.strokeWidth+2*n}px`}fitCanvas(t,r){let i=this.shadowRoot.querySelector("svg"),e=t.orbitRadius/50;if(!i||!(e>0))return;let n=(t.realRadius+t.arcHeightPercentage)*e+t.strokeWidth+r,o=Math.max(0,Math.ceil(n-t.orbitRadius)),c=o/e;i.setAttribute("viewBox",`${-c} ${-c} ${100+2*c} ${100+2*c}`),i.style.inset=`${-o}px`}};var T=class extends w{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
8
8
  <style>
9
9
  :host {
10
10
  --o-fill: var(--o-gray-light);
@@ -14,17 +14,11 @@
14
14
  --o-back-stroke: none;
15
15
  --o-back-stroke-width: 1;
16
16
  }
17
- :host(:hover) {
18
- --o-fill: var(--o-gray-light);
19
- --o-stroke: var(--o-fill);
20
- --o-stroke-width: 1;
21
- --o-back-fill: transparent;
22
- --o-back-stroke: none;
23
- --o-back-stroke-width: 1;
24
- }
25
17
  svg {
26
- width: 100%;
27
- height: 100%;
18
+ position: absolute;
19
+ inset: 0;
20
+ width: auto;
21
+ height: auto;
28
22
  overflow: visible;
29
23
  pointer-events: none;
30
24
  }
@@ -36,6 +30,14 @@
36
30
  :host([interactive]) svg * {
37
31
  pointer-events: visiblePainted;
38
32
  }
33
+ /* The touch area covers the whole track, whatever its colors. */
34
+ .hit {
35
+ fill: none;
36
+ stroke: transparent;
37
+ }
38
+ :host([interactive]) .hit {
39
+ pointer-events: stroke;
40
+ }
39
41
  :host([interactive]) {
40
42
  cursor: pointer;
41
43
  }
@@ -51,11 +53,17 @@
51
53
  stroke: var(--o-back-stroke);
52
54
  stroke-width: var(--o-back-stroke-width);
53
55
  }
54
- /* variant="stroke": the thin, legible gauge (registro "medidor").
56
+ /* variant="stroke": the thin, legible gauge.
55
57
  The default band is a FILLED donut wedge, so everyone building a
56
58
  thin gauge tripped on --o-fill/--o-back-fill. With this variant the
57
59
  paths are open arcs and the data color lives where you expect it:
58
60
  --o-stroke for the bar, --o-back-stroke for the track. */
61
+ /* The stroke variant draws a 2px bar over a gray 1px track unless you
62
+ set your own values on the element. */
63
+ :host([variant="stroke"]) {
64
+ --o-stroke-width: 2;
65
+ --o-back-stroke: var(--o-gray-light);
66
+ }
59
67
  :host([variant="stroke"]) .progress-bar {
60
68
  fill: none;
61
69
  stroke: var(--o-stroke);
@@ -70,10 +78,11 @@
70
78
  }
71
79
  </style>
72
80
  <svg viewBox="0 0 100 100">
81
+ <path class="hit" vector-effect="non-scaling-stroke"></path>
73
82
  <path class="progress-bg" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
74
83
  <path class="progress-bar" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
75
84
  </svg>
76
- `}update(){let t=this.getAttributes(),o=this.getAttribute("variant")==="stroke",n=o?this.calculateStrokeArc(t,!0):this.calculateArcParameters(t,!0),e=o?this.calculateStrokeArc(t,!1):this.calculateArcParameters(t,!1);this.shadowRoot.querySelector(".progress-bg").setAttribute("d",n),this.shadowRoot.querySelector(".progress-bar").setAttribute("d",e)}calculateStrokeArc(t,o){let{realRadius:n}=t,e=Math.max(0,Math.min(this.getProgressAngle(t,o),359.999999));if(!(e>0)||!(t.orbitRadius>0))return"";let i=-90*(Math.PI/180),a=(-90+e)*(Math.PI/180),c=50+n*Math.cos(i),s=50+n*Math.sin(i),l=50+n*Math.cos(a),h=50+n*Math.sin(a),u=e>180?1:0;return`M ${c},${s} A ${n},${n} 0 ${u} 1 ${l},${h}`}getAttributes(){let t=super.getCommonAttributes(this),o=Math.max(0,Math.min(360,this.readAngle(t.style,"--o-range",360))),e=t.style.getPropertyValue("--o-progress").trim()?this.readNumber(t.style,"--o-progress",0):Number(this.getAttribute("value")||0),i=this.getAttribute("max"),a=i===null?100:Number(i);return{...t,range:o,progress:e,maxValue:a}}getProgressAngle(t,o){let{range:n,progress:e,maxValue:i}=t;return o?n:super.getProgressAngle(n,e,i)}calculateArcParameters(t,o){let{shape:n,realRadius:e,arcHeightPercentage:i,orbitNumber:a,strokeWidth:c,arcHeight:s}=t,l=this.getProgressAngle(t,o);if(!(l>0)||!(t.orbitRadius>0))return"";let h=super.calculateCommonArcParameters(l,e,i,a,n,c,s);return super.generatePathData(n,h,s,a)}};var N=typeof document=="undefined"?null:document.createElement("template");N&&(N.innerHTML=`
85
+ `}update(){let t=this.getAttributes(),r=this.getAttribute("variant")==="stroke",i=r?this.calculateStrokeArc(t,!0):this.calculateArcParameters(t,!0),e=r?this.calculateStrokeArc(t,!1):this.calculateArcParameters(t,!1);this.shadowRoot.querySelector(".progress-bg").setAttribute("d",i),this.shadowRoot.querySelector(".progress-bar").setAttribute("d",e),this.updateHitArea(this.shadowRoot.querySelector(".hit"),t,0,t.range)}calculateStrokeArc(t,r){let{realRadius:i}=t,e=Math.max(0,Math.min(this.getProgressAngle(t,r),360));if(!(e>0)||!(t.orbitRadius>0))return"";let n=-Math.PI/2;return this.linePath(i,n,n+e*Math.PI/180)}getAttributes(){let t=super.getCommonAttributes(this),r=Math.max(0,Math.min(360,this.readAngle(t.style,"--o-range",360))),e=t.style.getPropertyValue("--o-progress").trim()?this.readNumber(t.style,"--o-progress",0):this.readValue(),n=this.readMax();return{...t,range:r,progress:e,maxValue:n}}getProgressAngle(t,r){let{range:i,progress:e,maxValue:n}=t;return r?i:super.getProgressAngle(i,e,n)}calculateArcParameters(t,r){let{shape:i,realRadius:e,arcHeightPercentage:n,orbitNumber:o,strokeWidth:c,arcHeight:a}=t,l=this.getProgressAngle(t,r);if(!(l>0)||!(t.orbitRadius>0))return"";let u=super.calculateCommonArcParameters(l,e,n,o,i,c,a);return super.generatePathData(i,u)}};var I=typeof document=="undefined"?null:document.createElement("template");I&&(I.innerHTML=`
77
86
  <style>
78
87
  :host {
79
88
  --o-fill: var(--o-gray-light);
@@ -81,15 +90,11 @@
81
90
  --o-stroke-width: 1;
82
91
  --o-color: currentcolor;
83
92
  }
84
- :host(:hover) {
85
- --o-fill: var(--o-gray-light);
86
- --o-stroke: var(--o-fill);
87
- --o-stroke-width: 1;
88
- --o-color: currentcolor;
89
- }
90
93
  svg {
91
- width: 100%;
92
- height: 100%;
94
+ position: absolute;
95
+ inset: 0;
96
+ width: auto;
97
+ height: auto;
93
98
  overflow: visible;
94
99
  pointer-events: none;
95
100
  }
@@ -103,6 +108,14 @@
103
108
  :host([interactive]) svg * {
104
109
  pointer-events: visiblePainted;
105
110
  }
111
+ /* The touch area catches the pointer even where the band is transparent. */
112
+ #orbitHit {
113
+ fill: none;
114
+ stroke: transparent;
115
+ }
116
+ :host([interactive]) #orbitHit {
117
+ pointer-events: stroke;
118
+ }
106
119
  :host([interactive]) {
107
120
  cursor: pointer;
108
121
  }
@@ -115,17 +128,20 @@
115
128
  text {
116
129
  fill: var(--o-color);
117
130
  }
118
- #orbitPath {
119
- fill: transparent;
131
+ /* Guides for text: never painted and never under the pointer. */
132
+ #orbitPath, #measure {
133
+ fill: none;
120
134
  stroke: none;
121
- stroke-width: 0;
135
+ pointer-events: none;
122
136
  }
123
137
  </style>
124
138
  <svg viewBox="0 0 100 100">
139
+ <path id="orbitHit" vector-effect="non-scaling-stroke"></path>
125
140
  <path id="orbitShape" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
126
141
  <path id="orbitPath" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
127
142
  <text>
128
143
  <textPath href="#orbitPath" alignment-baseline="middle"></textPath>
129
144
  </text>
145
+ <text id="measure" visibility="hidden" aria-hidden="true"></text>
130
146
  </svg>
131
- `);var I=class extends S{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(N.content.cloneNode(!0))}update(){let t=this.getAttributes(),{length:o,fontSize:n,textAnchor:e,fitRange:i}=t;this.hasAttribute("value")?(P(this,"--o-arc-start",`${t.stackOffset}deg`),P(this,"--o_stack",t.stackOffset+t.arcAngle)):(this.style.removeProperty("--o-arc-start"),this.style.removeProperty("--o_stack"));let a=this.shadowRoot.querySelector("#orbitPath"),c=this.shadowRoot.querySelector("#orbitShape"),s=this.shadowRoot.querySelector("textPath");c.setAttribute("d",this.calculateArcParameters(t).dShape),a.setAttribute("d",this.calculateTextArcParameters(t).dPath),e==="start"?(s.setAttribute("startOffset","0%"),s.setAttribute("text-anchor","start")):e==="middle"?(s.setAttribute("startOffset","50%"),s.setAttribute("text-anchor","middle")):e==="end"&&(s.setAttribute("startOffset","100%"),s.setAttribute("text-anchor","end")),i?s.parentElement.setAttribute("textLength",a.getTotalLength()):s.parentElement.removeAttribute("textLength"),s.parentElement.style.fontSize=`calc(${n} * (100 / (${o}) * (12 / var(--o-orbit-number)))`,s.textContent=this.textContent,this.warnIfTextOverflows(a,s,i)}warnIfTextOverflows(t,o,n){let e=(this.textContent||"").trim();!e||n||!this.isConnected||(this._textFrame&&this.ownerDocument.defaultView.cancelAnimationFrame(this._textFrame),this._textFrame=this.ownerDocument.defaultView.requestAnimationFrame(()=>{if(this._textFrame=0,!!this.isConnected)try{let i=t.getTotalLength(),a=o.parentElement.getComputedTextLength();i>0&&a>i&&this._truncWarned!==e&&(this._truncWarned=e,console.warn(`[orbit] <o-arc> text "${e.length>34?e.slice(0,34)+"\u2026":e}" overflows its arc (${Math.round(a)} > ${Math.round(i)} units) and will clip. Shorten the text, widen --o-range, or use fit-range to squeeze it.`))}catch(i){}}))}getAttributes(){let t=super.getCommonAttributes(this),{style:o}=t,n=Math.max(0,Math.min(360,this.readAngle(o,"--o-range",360))),e=this.hasAttribute("flip")||this.classList.contains("flip"),i=this.hasAttribute("fit-range")||this.classList.contains("fit-range"),a=t.orbitRadius*24/t.orbitNumber||100,c=this.getAttribute("text-anchor")||"middle",s=o.fontSize||"16px",l=Math.max(0,this.readNumber(o,"--o-gap",1)),h=Number(this.getAttribute("value")),u=this.getAttribute("max"),d=u===null?100:Number(u),f=this.hasAttribute("value")?super.getProgressAngle(n,h,d):Math.max(0,Math.min(360,this.readAngle(o,"--o-angle",0))),p=0;if(this.hasAttribute("value"))for(let g=this.previousElementSibling;g;g=g.previousElementSibling){if(g.localName!=="o-arc")continue;let y=this.ownerDocument.defaultView.getComputedStyle(g);if(g.hasAttribute("value")){let m=g.hasAttribute("max")?Number(g.getAttribute("max")):100,A=w(g,y.getPropertyValue("--o-range"),n,"angle");p+=super.getProgressAngle(A,Number(g.getAttribute("value")),m)}else p+=w(g,y.getPropertyValue("--o-angle"),0,"angle")}return{...t,gap:l,arcAngle:f,stackOffset:p,flip:e,fitRange:i,length:a,fontSize:s,textAnchor:c}}calculateArcParameters(t){let{arcAngle:o,realRadius:n,arcHeightPercentage:e,orbitNumber:i,shape:a,strokeWidth:c,arcHeight:s,gap:l}=t;if(!(o>0)||!(t.orbitRadius>0))return{dShape:""};let h=super.calculateCommonArcParameters(o,n,e,i,a,c,s,l);return{dShape:super.generatePathData(a,h,s,i)}}calculateTextArcParameters(t){let{arcAngle:o,realRadius:n,gap:e,flip:i}=t;if(!(o>0))return{dPath:""};let a=Math.min(e*.5,o*.49),c=i?0:1,s=o<=180?0:1,l=50+n*Math.cos((-90+a)*(Math.PI/180)),h=50+n*Math.sin((-90+a)*(Math.PI/180)),u=50+n*Math.cos((o-90-a)*Math.PI/180),d=50+n*Math.sin((o-90-a)*Math.PI/180),[f,p,g,y]=i?[u,d,l,h]:[l,h,u,d];return{dPath:`M ${f},${p} A ${n},${n} 0 ${s} ${c} ${g},${y}`}}calcularExpresionCSS(t){return w(this,t,0,"angle")}};var C=new WeakMap,j={refresh:D,resize(r){var a,c;let t=typeof r=="string"?(a=globalThis.document)==null?void 0:a.querySelector(r):r;if(!(t!=null&&t.ownerDocument))return console.error("Orbit.resize: element not found:",r),()=>{};(c=C.get(t))==null||c();let o=t.ownerDocument.defaultView,n=s=>{if(s>0){for(let l of t.querySelectorAll(".gravity-spot")){let h=String(s/500);l.style.getPropertyValue("--o-force-ratio")!==h&&l.style.setProperty("--o-force-ratio",h)}D(t)}},e=new o.ResizeObserver(s=>{for(let l of s)n(l.contentRect.width)});e.observe(t),n(t.clientWidth||t.getBoundingClientRect().width);let i=()=>{e.disconnect(),C.get(t)===i&&C.delete(t)};return C.set(t,i),i}};function st(){typeof customElements=="undefined"||typeof document=="undefined"||(customElements.get("o-progress")||customElements.define("o-progress",L),customElements.get("o-arc")||customElements.define("o-arc",I),R(document),window.Orbit=j)}st();})();
147
+ `);var L=class extends w{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(I.content.cloneNode(!0))}update(){let t=this.getAttributes(),{fitRange:r,stacked:i}=t;if(i){let a=t.auto&&this.hasAttribute("text-anchor")&&{middle:-.5,end:-1}[t.textAnchor]||0;v(this,"--o-arc-start",`${t.stackOffset+a*t.arcAngle}deg`),v(this,"--o_stack",t.stackOffset+t.arcAngle)}else this.style.removeProperty("--o-arc-start"),this.style.removeProperty("--o_stack");let e=this.shadowRoot.querySelector("#orbitPath"),n=this.shadowRoot.querySelector("#orbitShape"),o=this.shadowRoot.querySelector("textPath");n.setAttribute("d",this.calculateArcParameters(t).dShape),e.setAttribute("d",this.calculateTextArcParameters(t).dPath),this.updateHitArea(this.shadowRoot.querySelector("#orbitHit"),t,0,t.arcAngle);let c=t.textAnchor;c==="start"?(o.setAttribute("startOffset","0%"),o.setAttribute("text-anchor","start")):c==="middle"?(o.setAttribute("startOffset","50%"),o.setAttribute("text-anchor","middle")):c==="end"&&(o.setAttribute("startOffset","100%"),o.setAttribute("text-anchor","end")),r?o.parentElement.setAttribute("textLength",e.getTotalLength()):o.parentElement.removeAttribute("textLength"),o.parentElement.style.fontSize=t.svgFontSize,o.textContent=this.textContent,t.auto||this.warnIfTextOverflows(e,o,r)}warnIfTextOverflows(t,r,i){let e=(this.textContent||"").trim();!e||i||!this.isConnected||(this._textFrame&&this.ownerDocument.defaultView.cancelAnimationFrame(this._textFrame),this._textFrame=this.ownerDocument.defaultView.requestAnimationFrame(()=>{if(this._textFrame=0,!!this.isConnected)try{let n=t.getTotalLength(),o=r.parentElement.getComputedTextLength();n>0&&o>n&&this._truncWarned!==e&&(this._truncWarned=e,console.warn(`[orbit] <o-arc> text "${e.length>34?e.slice(0,34)+"\u2026":e}" overflows its arc (${Math.round(o)} > ${Math.round(n)} 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(n){}}))}getAttributes(){let t=super.getCommonAttributes(this),{style:r}=t,i=Math.max(0,Math.min(360,this.readAngle(r,"--o-range",360))),e=this.hasAttribute("flip")||this.classList.contains("flip"),n=this.hasAttribute("fit-range")||this.classList.contains("fit-range"),o=t.orbitRadius*24/t.orbitNumber||100,c=this.getAttribute("text-anchor")||"middle",a=r.fontSize||"16px",l=Math.max(0,this.readNumber(r,"--o-gap",1)),u=`calc(${a} * (100 / (${o}) * (12 / var(--o-orbit-number)))`,h=this.getAttribute("range")==="auto",d=h||this.hasAttribute("value"),g;h?g=this.measureTextAngle(u,t.realRadius,l):this.hasAttribute("value")?g=super.getProgressAngle(i,this.readValue(),this.readMax()):g=Math.max(0,Math.min(360,this.readAngle(r,"--o-angle",0))),this._autoAngle=h?g:0;let m=0;if(d)for(let f=this.previousElementSibling;f;f=f.previousElementSibling){if(f.localName!=="o-arc")continue;let x=this.ownerDocument.defaultView.getComputedStyle(f);if(f.getAttribute("range")==="auto")m+=f._autoAngle||0;else if(f.hasAttribute("value")){let P=f.hasAttribute("max")?Number(f.getAttribute("max")):100,S=y(f,x.getPropertyValue("--o-range"),i,"angle");m+=super.getProgressAngle(S,Number(f.getAttribute("value")),P)}else m+=y(f,x.getPropertyValue("--o-angle"),0,"angle")}return{...t,gap:l,arcAngle:g,stackOffset:m,flip:e,fitRange:n,length:o,fontSize:a,svgFontSize:u,textAnchor:c,auto:h,stacked:d}}measureTextAngle(t,r,i){let e=(this.textContent||"").trim();if(!e||!(r>0))return 0;let n=this.shadowRoot.querySelector("#measure");n.style.fontSize=t,n.textContent=e;let o=0;try{o=n.getComputedTextLength()+parseFloat(this.ownerDocument.defaultView.getComputedStyle(n).fontSize)}catch(c){}return o>0?Math.min(360,o/r*180/Math.PI+i):0}calculateArcParameters(t){let{arcAngle:r,realRadius:i,arcHeightPercentage:e,orbitNumber:n,shape:o,strokeWidth:c,arcHeight:a,gap:l}=t;if(!(r>0)||!(t.orbitRadius>0))return{dShape:""};let u=super.calculateCommonArcParameters(r,i,e,n,o,c,a,l);return{dShape:super.generatePathData(o,u)}}calculateTextArcParameters(t){let{arcAngle:r,realRadius:i,gap:e,flip:n}=t;if(!(r>0))return{dPath:""};let o=Math.min(e*.5,r*.49),c=(o-90)*Math.PI/180,a=(r-o-90)*Math.PI/180;return{dPath:n?this.linePath(i,a,c):this.linePath(i,c,a)}}resolveAngle(t){return y(this,t,0,"angle")}calcularExpresionCSS(t){return this.resolveAngle(t)}};var N=new WeakMap,ut=/^[+-]?(?:\d+\.?\d*|\.\d+)px$/,K={refresh:D,ready:G,resize(s){var o,c;let t=typeof s=="string"?(o=globalThis.document)==null?void 0:o.querySelector(s):s;if(!(t!=null&&t.ownerDocument))return console.error("Orbit.resize: element not found:",s),()=>{};(c=N.get(t))==null||c();let r=t.ownerDocument.defaultView,i=a=>{if(!(a>0))return;let l=0;for(let u of t.querySelectorAll(".gravity-spot")){if(!ut.test(r.getComputedStyle(u).getPropertyValue("--o-force").trim()))continue;l++;let h=String(a/500);u.style.getPropertyValue("--o-force-ratio")!==h&&u.style.setProperty("--o-force-ratio",h)}l||p(t,"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."),D(t)},e=new r.ResizeObserver(a=>{for(let l of a)i(l.contentRect.width)});e.observe(t),i(t.clientWidth||t.getBoundingClientRect().width);let n=()=>{e.disconnect(),N.get(t)===n&&N.delete(t)};return N.set(t,n),n}};function ht(){typeof customElements=="undefined"||typeof document=="undefined"||(customElements.get("o-progress")||customElements.define("o-progress",T),customElements.get("o-arc")||customElements.define("o-arc",L),E(document),window.Orbit=K)}ht();})();