@rogieking/figui3 6.4.1 → 6.4.2

package/dist/fig-lab.css

@@ -0,0 +1 @@
+fig-field-slider{border-radius:var(--radius-medium);--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);width:100%;display:block;position:relative}fig-field-slider:focus-within{outline:1px solid var(--figma-color-border-selected)}fig-field-slider label{pointer-events:none;z-index:1}fig-field-slider[disabled]:not([disabled=false]){pointer-events:none}fig-field-slider[disabled]:not([disabled=false]) label,fig-field-slider[disabled]:not([disabled=false]) input{color:var(--figma-color-text-disabled)}fig-field-slider[disabled]:not([disabled=false]) fig-slider{filter:grayscale()opacity(.5)}fig-field-slider[type=hue] label,fig-field-slider[type=hue] input{text-shadow:var(--field-text-shadow);color:#fff}fig-field-slider fig-field:not([direction=vertical]){padding-left:var(--spacer-2-5);display:flex;position:relative}fig-field-slider fig-field:not([direction=vertical])>label{flex:auto;width:100%;min-width:0;max-width:none}fig-field-slider fig-field:not([direction=vertical]) fig-slider{--slider-height:2rem;--slider-field-height:2rem;--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:calc(var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) * min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--slider-thumb-opacity:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-tick-opacity:1;background-color:#0000;padding:0;position:absolute;inset:0;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color)!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider:has(input[type=range]:focus-within){--slider-thumb-outline:1.5px solid var(--figma-color-border-selected)!important;--slider-thumb-outline-offset:2px!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider .fig-slider-input-container{box-shadow:none!important;background-color:var(--figma-color-bg-secondary)!important}:is(fig-field-slider fig-field:not([direction=vertical]) fig-slider .fig-slider-input-container:hover,fig-field-slider fig-field:not([direction=vertical]) fig-slider .fig-slider-input-container:focus-within):after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-border)!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider .fig-slider-input-container:before{background:var(--figma-color-bg-tertiary)!important;min-width:0!important;box-shadow:none!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider .fig-slider-input-container input[type=range]{border-radius:0!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider:not([type=delta]) .fig-slider-input-container:before{width:var(--slider-percent)!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider[type=delta] .fig-slider-input-container:before{--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}fig-field-slider fig-field:not([direction=vertical]) datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}fig-field-slider fig-field:not([direction=vertical]) fig-input-number{right:var(--spacer-1);border-radius:var(--radius-small);background-color:#0000;border-left:0;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;box-shadow:none!important}fig-field-slider fig-field:not([direction=vertical]) fig-input-number:hover,fig-field-slider fig-field:not([direction=vertical]) fig-input-number:has(input:focus){box-shadow:none!important}fig-field-slider fig-field:not([direction=vertical]) fig-input-number:has(input:focus){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)!important}fig-field-slider fig-field:not([direction=vertical]) fig-input-number input{field-sizing:content;border-radius:var(--radius-small);text-align:right;width:auto;color:var(--field-text-color);flex:none}fig-canvas-control{--fig-canvas-control-line-stroke:light-dark(#fff,#ffffff80);--fig-canvas-control-radius-stroke:#0d99ff;--fig-canvas-control-radius-stroke-halo:#fff;--fig-canvas-control-line-stroke-hover:#0d99ff;--fig-canvas-control-line-stroke-active:#0d99ff;--fig-canvas-control-line-stroke-width:1.5px;--fig-canvas-control-line-stroke-width-hover:2.25px;display:contents}fig-canvas-control>fig-handle,fig-canvas-control>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}fig-canvas-control .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible}fig-canvas-control .fig-canvas-control-radius circle{fill:none;stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill}fig-canvas-control .fig-canvas-control-radius .fig-canvas-control-radius-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) * 2);filter:none}fig-canvas-control .fig-canvas-control-radius .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none}fig-canvas-control .fig-canvas-control-radius .fig-canvas-control-radius-hit:hover~circle:not(.fig-canvas-control-radius-halo){stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}fig-canvas-control.fig-canvas-control-ring-active .fig-canvas-control-radius circle:not(.fig-canvas-control-radius-hit):not(.fig-canvas-control-radius-halo){stroke:var(--fig-canvas-control-line-stroke-active);stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}fig-canvas-control .fig-canvas-control-angle-svg{pointer-events:none}fig-canvas-control .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}fig-canvas-control .fig-canvas-control-angle-line-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) * 2);stroke-linecap:butt;filter:none}fig-canvas-control fig-handle[size=small]{z-index:2}fig-canvas-control fig-handle[size=small] .fig-handle-hit-area{cursor:grab}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex}fig-input-angle>fig-input-number{flex:none;width:auto}fig-input-angle[full]:not([full=false]){width:100%;display:flex}fig-input-angle[full]:not([full=false])>fig-input-number{flex:auto;width:auto;min-width:0}fig-field:not([direction=vertical]) :is(fig-input-angle){flex:1;min-width:0}fig-field:not([direction=vertical]) :is(fig-input-angle) fig-input-number{flex:none;width:auto}fig-input-angle .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid}fig-input-angle .fig-input-angle-plane:focus,fig-input-angle .fig-input-angle-plane.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}fig-input-angle .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid}fig-input-angle .fig-input-angle-handle:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}

package/dist/fig-lab.js

@@ -0,0 +1,14 @@
+class b extends HTMLElement{#G=null;#J=null;#k=null;#_=null;#O=new Set;#$=0;#W=null;#Q=null;#j=new Set(["variant","color","text","full"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#G)this.#Z();if(this.#N(),this.#L(),this.#q(),!this.#_)this.#_=new MutationObserver((k)=>{let G=!1,J=!1;for(let Q of k)if(Q.type==="attributes"){if(Q.attributeName&&this.#j.has(Q.attributeName))continue;if(Q.attributeName==="label"||Q.attributeName==="direction")G=!0;else J=!0}if(G)this.#N();if(J)this.#L()});this.#_.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#_?.disconnect(),this.#$)cancelAnimationFrame(this.#$),this.#$=0;this.#B()}attributeChangedCallback(k,G,J){if(G===J||!this.#G)return;if(k==="label"||k==="direction")this.#N()}#Z(){let k=Array.from(this.childNodes).filter((Z)=>{return Z.nodeType!==Node.TEXT_NODE||Boolean(Z.textContent?.trim())}),G=document.createElement("fig-field"),J=document.createElement("label"),Q=document.createElement("fig-slider");Q.setAttribute("text","true");for(let Z of this.#K()){let _=this.getAttribute(Z);Q.setAttribute(Z,_??"")}G.append(J,Q),this.#G=G,this.#J=J,this.#k=Q,this.replaceChildren(G);for(let Z of k)this.#k.appendChild(Z)}#N(){if(!this.#G||!this.#J)return;let k=this.hasAttribute("label"),G=this.getAttribute("label");if(k&&(G??"").trim()===""){if(this.#J.parentElement===this.#G)this.#J.remove()}else if(this.#J.textContent=k?G??"":"Label",this.#J.parentElement!==this.#G)this.#G.prepend(this.#J);this.#G.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#L(){if(!this.#k)return;let k=this.#K(),G=new Set(k.filter((Q)=>Q!=="text"));for(let Q of this.#O)if(!G.has(Q))this.#k.removeAttribute(Q);for(let Q of k){if(Q==="text")continue;let Z=this.getAttribute(Q);this.#k.setAttribute(Q,Z??"")}this.#k.removeAttribute("variant"),this.#k.removeAttribute("color"),this.#k.removeAttribute("transform"),this.#k.removeAttribute("full"),this.#k.setAttribute("text","true");let J=(this.getAttribute("type")||"range").toLowerCase();if(J==="delta"||J==="stepper")this.#k.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#k.removeAttribute("default");if(J==="stepper")this.#k.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#k.removeAttribute("step");if(J==="opacity")this.#k.style.setProperty("--color","var(--figma-color-bg-tertiary)");else this.#k.style.removeProperty("--color");this.#O=G,this.#X()}#K(){let k=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((G)=>!k.has(G)&&!this.#j.has(G))}#X(){if(this.#$)cancelAnimationFrame(this.#$);this.#$=requestAnimationFrame(()=>{this.#$=0,this.#Y()})}#Y(){if(!this.#k)return;let k=this.#k.querySelector("fig-input-number");if(!k)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){k.removeAttribute("steppers");return}let J=this.getAttribute("steppers");k.setAttribute("steppers",J??"")}#q(){if(!this.#k)return;if(!this.#W)this.#W=this.#z.bind(this,"input");if(!this.#Q)this.#Q=this.#z.bind(this,"change");this.#k.addEventListener("input",this.#W),this.#k.addEventListener("change",this.#Q)}#B(){if(!this.#k)return;if(this.#W)this.#k.removeEventListener("input",this.#W);if(this.#Q)this.#k.removeEventListener("change",this.#Q)}#z(k,G){G.stopPropagation();let J=G instanceof CustomEvent&&G.detail!==void 0?G.detail:this.#k?.value;this.dispatchEvent(new CustomEvent(k,{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}}customElements.define("fig-field-slider",b);class A extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#G=50;#J=50;#k=75;#_=75;#O=0;#$=!1;#W=0;#Q=null;#j=null;#Z=null;#N=null;#L=null;#K=null;#X=null;#Y=null;#q=null;#B=!1;#z=!1;#V=!1;#E=!1;#D="";get#F(){return this.getAttribute("type")||"point"}get#h(){return this.#F==="point-radius"||this.#F==="point-radius-angle"}get#C(){return this.#F==="point-radius-angle"}get#M(){return this.#F==="point-point"}get#v(){return this.#F==="point-radius-angle"||this.#F==="point-point"}get#b(){let k=this.getAttribute("tooltips");return k===null||k!=="false"}get#S(){let k=this.getAttribute("snapping");if(k===null)return"false";let G=k.trim().toLowerCase();if(G==="modifier")return"modifier";if(G===""||G==="true")return"true";return"false"}#R(k){let G=this.#S;if(G==="true")return!0;if(G==="modifier")return!!k;return!1}get#U(){let k=this.getAttribute("name");if(k)return k.split(",")[0].trim();return`${Math.round(this.#G)}%, ${Math.round(this.#J)}%`}get#H(){let k=this.getAttribute("name");if(k){let G=k.split(",");if(G.length>1)return G[1].trim()}return`${Math.round(this.#k)}%, ${Math.round(this.#_)}%`}get#u(){return this.getAttribute("drag-surface")||"parent"}get#f(){let k=this.#u;if(k==="parent")return this.parentElement;return this.closest(k)}get#p(){let k=this.#u;if(k==="parent"){let G=this.parentElement;if(G)return G.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return k}#g(k){if(this.#$)return this.#O/100*k;return this.#O}#s(){if(this.#$)return`Radius ${Math.round(this.#O)}%`;return`Radius ${Math.round(this.#O)}`}connectedCallback(){this.#d(),this.#m()}disconnectedCallback(){this.#$k()}attributeChangedCallback(k,G,J){if(G===J)return;if(k==="value"&&!this.#B&&!this.#z&&!this.#V&&!this.#E)if(this.#d(),this.#Q)this.#I();else this.#m();if(k==="type")this.#d(),this.#m();if(k==="color"&&this.#Q)if(J)this.#Q.setAttribute("color",J);else this.#Q.removeAttribute("color");if(k==="disabled")this.#m();if(k==="tooltips")this.#m();if(k==="snapping"&&this.#Q){if(this.#Q.setAttribute("drag-snapping",J||"false"),this.#j)this.#j.setAttribute("drag-snapping",J||"false")}if(k==="name"){if(this.#K)this.#K.setAttribute("text",this.#U);if(this.#X)this.#X.setAttribute("text",this.#H)}}#d(){let k=this.getAttribute("value");if(!k)return;try{let G=JSON.parse(k);if(typeof G.x==="number")this.#G=G.x;if(typeof G.y==="number")this.#J=G.y;if(G.radius!==void 0){let J=String(G.radius);if(J.endsWith("%"))this.#$=!0,this.#O=parseFloat(J);else this.#$=!1,this.#O=parseFloat(J);if(!Number.isFinite(this.#O))this.#O=0}if(typeof G.angle==="number")this.#W=G.angle;if(typeof G.x2==="number")this.#k=G.x2;if(typeof G.y2==="number")this.#_=G.y2}catch{}}get value(){let k={x:this.#G,y:this.#J};if(this.#F==="color"){let G=this.getAttribute("color")||this.#Q?.getAttribute("color");if(G)k.color=G}if(this.#h)k.radius=this.#$?`${this.#O}%`:this.#O;if(this.#C)k.angle=this.#W;if(this.#M)k.x2=this.#k,k.y2=this.#_;return k}set value(k){if(typeof k==="object")this.setAttribute("value",JSON.stringify(k));else if(typeof k==="string")this.setAttribute("value",k)}#m(){this.innerHTML="",this.#Q=null,this.#j=null,this.#Z=null,this.#N=null,this.#L=null,this.#K=null,this.#X=null,this.#Y=null,this.#q=null;let k=this.hasAttribute("disabled"),G=this.#F,J=this.#b,Q=this.#p,Z=document.createElement("fig-handle");if(Z.setAttribute("drag","true"),Z.setAttribute("drag-surface",Q),Z.setAttribute("drag-axes","x,y"),Z.setAttribute("drag-snapping",this.#S),Z.setAttribute("value",`${this.#G}% ${this.#J}%`),k)Z.setAttribute("disabled","");if(G==="color"){Z.setAttribute("type","color");let _=this.getAttribute("color");if(_)Z.setAttribute("color",_)}else Z.setAttribute("type","canvas");if(this.#M)Z.setAttribute("hit-area","12 circle"),Z.setAttribute("hit-area-mode","delegate");if(this.#Q=Z,this.#h)this.#t();if(this.#v)this.#n();if(J){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#U),_.appendChild(Z),this.appendChild(_),this.#K=_}else this.appendChild(Z);if(this.#C)this.#kk(k,J,Q);if(this.#M)this.#Gk(k,J,Q);this.#Zk(),this.#i(),requestAnimationFrame(()=>this.#I())}#o(k,G,J,Q){if(!k)return;let Z=()=>{if(Q&&Q())return;let $=G();if(!$)return;if(J)$.setAttribute("text",J());$.setAttribute("show","true"),$.showPopup?.()},_=()=>{if(Q&&Q())return;let $=G();if(!$)return;$.removeAttribute("show")};k.addEventListener("pointerenter",Z),k.addEventListener("pointerleave",_)}#i(){if(this.#Q)this.#o(this.#Q,()=>this.#K,()=>this.#U,()=>this.#B||!!this.#Q?.querySelector("fig-color-tip"));if(this.#Z)this.#o(this.#Z,()=>this.#q,()=>`Angle ${Math.round(this.#W)}°`,()=>this.#E||this.#V);if(this.#j)this.#o(this.#j,()=>this.#X,()=>this.#H,()=>this.#z);if(this.#N){let k=this.#N.querySelector(".fig-canvas-control-radius-hit");this.#a(k||this.#N)}if(this.#F==="color"&&this.#Q&&this.#K)new MutationObserver(()=>{if(this.#Q?.querySelector("fig-color-tip"))this.#K?.removeAttribute("show"),this.#K?.hidePopup?.()}).observe(this.#Q,{childList:!0,subtree:!0})}#c(k,G){let J=this.#Y;if(!J?.popup)return;let Q=G-8;J.popup.anchor={getBoundingClientRect:()=>({left:k,top:Q,right:k,bottom:Q,width:0,height:0,x:k,y:Q})},J.popup.queueReposition?.()}#a(k){if(!k)return;k.addEventListener("pointerenter",(G)=>{let J=this.#Y;if(!J)return;J.setAttribute("text",this.#s()),J.setAttribute("show","true"),J.showPopup?.(),this.#c(G.clientX,G.clientY)}),k.addEventListener("pointermove",(G)=>{if(this.#V)return;this.#c(G.clientX,G.clientY)}),k.addEventListener("pointerleave",()=>{if(this.#V)return;let G=this.#Y;if(!G)return;G.removeAttribute("show")})}#t(){let G=document.createElementNS("http://www.w3.org/2000/svg","svg");G.classList.add("fig-canvas-control-radius"),G.setAttribute("overflow","visible");let J=document.createElementNS("http://www.w3.org/2000/svg","circle");J.classList.add("fig-canvas-control-radius-hit"),G.appendChild(J);let Q=document.createElementNS("http://www.w3.org/2000/svg","circle");Q.classList.add("fig-canvas-control-radius-halo"),G.appendChild(Q);let Z=document.createElementNS("http://www.w3.org/2000/svg","circle");if(G.appendChild(Z),this.#N=G,this.#b){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#s()),_.appendChild(G),this.appendChild(_),this.#Y=_}else this.appendChild(G);this.#_k(J)}#n(){let G=document.createElementNS("http://www.w3.org/2000/svg","svg");if(G.classList.add("fig-canvas-control-angle-svg"),G.setAttribute("overflow","visible"),G.style.position="absolute",G.style.pointerEvents="none",this.#M){let Z=document.createElementNS("http://www.w3.org/2000/svg","line");Z.classList.add("fig-canvas-control-angle-line-hit"),Z.setAttribute("stroke","transparent"),Z.setAttribute("stroke-width","12"),Z.setAttribute("stroke-linecap","round"),Z.style.pointerEvents="stroke",Z.style.cursor="move",G.appendChild(Z),this.#e(Z)}let J=document.createElementNS("http://www.w3.org/2000/svg","line");J.classList.add("fig-canvas-control-angle-line-halo"),G.appendChild(J);let Q=document.createElementNS("http://www.w3.org/2000/svg","line");Q.classList.add("fig-canvas-control-angle-line"),G.appendChild(Q),this.#L=G,this.appendChild(G)}#e(k){k.addEventListener("pointerdown",(G)=>{if(this.hasAttribute("disabled"))return;G.preventDefault(),G.stopPropagation();let J=this.#f;if(!J)return;let Q=J.getBoundingClientRect(),Z=G.clientX,_=G.clientY,$=this.#G,O=this.#J,q=this.#k,W=this.#_;this.#B=!0,this.#z=!0;let z=document.body.style.cursor;document.body.style.cursor="move",k.style.pointerEvents="none";let X=(j)=>{let K=J.getBoundingClientRect(),B=K.width>0?(j.clientX-Z)/K.width*100:0,E=K.height>0?(j.clientY-_)/K.height*100:0,V=-Math.min($,q),F=100-Math.max($,q),M=-Math.min(O,W),I=100-Math.max(O,W),U=Math.max(V,Math.min(F,B)),N=Math.max(M,Math.min(I,E));this.#G=$+U,this.#J=O+N,this.#k=q+U,this.#_=W+N,this.#I(),this.#P()},Y=()=>{document.body.style.cursor=z,k.style.pointerEvents="stroke",this.#A(),this.#w(),window.removeEventListener("pointermove",X),window.removeEventListener("pointerup",Y),requestAnimationFrame(()=>{this.#B=!1,this.#z=!1})};window.addEventListener("pointermove",X),window.addEventListener("pointerup",Y)})}#kk(k,G,J){let Q=document.createElement("fig-handle");if(Q.setAttribute("type","canvas"),Q.setAttribute("drag","true"),Q.setAttribute("drag-surface",J),Q.setAttribute("drag-axes","x,y"),Q.setAttribute("size","small"),Q.setAttribute("hit-area","12 circle"),Q.setAttribute("hit-area-mode","delegate"),k)Q.setAttribute("disabled","");if(this.#Z=Q,G){let Z=document.createElement("fig-tooltip");Z.setAttribute("action","manual"),Z.setAttribute("theme","canvas"),Z.setAttribute("pointer","false"),Z.setAttribute("text",`${Math.round(this.#W)}°`),Z.appendChild(Q),this.appendChild(Z),this.#q=Z}else this.appendChild(Q)}#Gk(k,G,J){let Q=document.createElement("fig-handle");if(Q.setAttribute("type","canvas"),Q.setAttribute("drag","true"),Q.setAttribute("drag-surface",J),Q.setAttribute("drag-axes","x,y"),Q.setAttribute("drag-snapping",this.#S),Q.setAttribute("hit-area","12 circle"),Q.setAttribute("hit-area-mode","delegate"),Q.setAttribute("value",`${this.#k}% ${this.#_}%`),k)Q.setAttribute("disabled","");if(this.#j=Q,G){let Z=document.createElement("fig-tooltip");Z.setAttribute("action","manual"),Z.setAttribute("theme","canvas"),Z.setAttribute("pointer","false"),Z.setAttribute("text",this.#H),Z.appendChild(Q),this.appendChild(Z),this.#X=Z}else this.appendChild(Q)}#y(k){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(k)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1212 16.9998L11.5607 17.4394C12.1465 18.0252 12.1464 18.975 11.5606 19.5607C10.9748 20.1465 10.0251 20.1465 9.4393 19.5606L6.4393 16.5604C5.85354 15.9746 5.85357 15.0249 6.43938 14.4391L9.43938 11.4393C10.0252 10.8535 10.9749 10.8536 11.5607 11.4394C12.1465 12.0252 12.1464 12.9749 11.5606 13.5607L11.1215 13.9998L20.8786 13.9999L20.4394 13.5607C19.8536 12.9749 19.8535 12.0252 20.4393 11.4394C21.0251 10.8536 21.9749 10.8536 22.5606 11.4394L25.5606 14.4393C25.842 14.7206 26 15.1021 26 15.4999C26 15.8978 25.842 16.2793 25.5607 16.5606L22.5607 19.5607C21.9749 20.1465 21.0251 20.1465 20.4393 19.5607C19.8536 18.9749 19.8535 18.0252 20.4393 17.4394L20.8788 16.9999L11.1212 16.9998Z' fill='white'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.8536 12.1465C11.0488 12.3417 11.0488 12.6583 10.8535 12.8536L8.70715 14.9998L23.2929 14.9999L21.1465 12.8536C20.9512 12.6583 20.9512 12.3417 21.1464 12.1465C21.3417 11.9512 21.6583 11.9512 21.8535 12.1465L24.8535 15.1464C24.9473 15.2402 25 15.3673 25 15.4999C25 15.6326 24.9473 15.7597 24.8536 15.8535L21.8536 18.8536C21.6583 19.0488 21.3417 19.0488 21.1465 18.8536C20.9512 18.6583 20.9512 18.3417 21.1464 18.1465L23.2929 15.9999L8.70705 15.9998L10.8536 18.1465C11.0488 18.3417 11.0488 18.6583 10.8535 18.8536C10.6583 19.0488 10.3417 19.0488 10.1464 18.8535L7.14643 15.8533C6.95118 15.658 6.95119 15.3415 7.14646 15.1462L10.1465 12.1464C10.3417 11.9512 10.6583 11.9512 10.8536 12.1465Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='3' y='9' width='26' height='15' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, nwse-resize`}#x(k){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(k-45)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M12.5607 22.4393L12.0216 21.9002C17.1558 21.2216 21.2216 17.1558 21.9002 12.0216L22.4393 12.5607C23.0251 13.1464 23.9749 13.1464 24.5607 12.5607C25.1464 11.9749 25.1464 11.0251 24.5607 10.4393L21.5607 7.43934C20.9749 6.85355 20.0251 6.85355 19.4393 7.43934L16.4393 10.4393C15.8536 11.0251 15.8536 11.9749 16.4393 12.5607C17.0251 13.1464 17.9749 13.1464 18.5607 12.5607L18.8056 12.3157C18.1013 15.5527 15.5527 18.1013 12.3157 18.8056L12.5607 18.5607C13.1464 17.9749 13.1464 17.0251 12.5607 16.4393C11.9749 15.8536 11.0251 15.8536 10.4393 16.4393L7.43934 19.4393C6.85356 20.0251 6.85356 20.9749 7.43934 21.5607L10.4393 24.5607C11.0251 25.1464 11.9749 25.1464 12.5607 24.5607C13.1464 23.9749 13.1464 23.0251 12.5607 22.4393Z' fill='white'/%3E%3C/g%3E%3Cpath d='M23.8536 11.8536C23.6583 12.0488 23.3417 12.0488 23.1464 11.8536L21 9.70711V10.5C21 16.299 16.299 21 10.5 21H9.70711L11.8536 23.1464C12.0488 23.3417 12.0488 23.6583 11.8536 23.8536C11.6583 24.0488 11.3417 24.0488 11.1464 23.8536L8.14645 20.8536C7.95119 20.6583 7.95119 20.3417 8.14645 20.1464L11.1464 17.1464C11.3417 16.9512 11.6583 16.9512 11.8536 17.1464C12.0488 17.3417 12.0488 17.6583 11.8536 17.8536L9.70711 20H10.5C15.7467 20 20 15.7467 20 10.5V9.70711L17.8536 11.8536C17.6583 12.0488 17.3417 12.0488 17.1464 11.8536C16.9512 11.6583 16.9512 11.3417 17.1464 11.1464L20.1464 8.14645C20.3417 7.95119 20.6583 7.95119 20.8536 8.14645L23.8536 11.1464C24.0488 11.3417 24.0488 11.6583 23.8536 11.8536Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='4' y='5' width='24' height='24' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, pointer`}#Jk(){if(!this.#Z||!this.#C)return;let k=this.#Z.querySelector(".fig-handle-hit-area");if(!k)return;k.style.cursor=this.#x(this.#W)}#T(){return Math.atan2(this.#_-this.#J,this.#k-this.#G)*180/Math.PI}#Qk(){if(!this.#M)return;let k=this.#T(),G=(J,Q)=>{if(!J)return;let Z=J.querySelector(".fig-handle-hit-area");if(Z)Z.style.cursor=this.#x(Q)};G(this.#Q,k+180),G(this.#j,k)}#r(k,G,J,Q){k.style.setProperty("--fig-handle-position-translate","-50% -50%"),k.style.left=`${G/100*Q.width}px`,k.style.top=`${J/100*Q.height}px`}#I(){let k=this.#f;if(!k||!this.#Q)return;let G=k.getBoundingClientRect();if(this.#r(this.#Q,this.#G,this.#J,G),this.#N){let J=this.#G/100*G.width,Q=this.#J/100*G.height,Z=this.#g(G.width),_=this.#N,$=Math.max(Z*2,1);_.style.position="absolute",_.style.width=`${$}px`,_.style.height=`${$}px`,_.style.left=`${J-Z}px`,_.style.top=`${Q-Z}px`,_.setAttribute("viewBox",`0 0 ${$} ${$}`);let O=_.querySelectorAll("circle");for(let q of O)q.setAttribute("cx",String(Z)),q.setAttribute("cy",String(Z)),q.setAttribute("r",String(Math.max(Z-1,0)))}if(this.#L&&this.#v){let J=this.#G/100*G.width,Q=this.#J/100*G.height,Z,_;if(this.#M)Z=this.#k/100*G.width,_=this.#_/100*G.height;else{let q=this.#g(G.width),W=this.#W*Math.PI/180;Z=J+q*Math.cos(W),_=Q+q*Math.sin(W)}let $=this.#L;$.style.width=`${G.width}px`,$.style.height=`${G.height}px`,$.style.left="0",$.style.top="0",$.setAttribute("viewBox",`0 0 ${G.width} ${G.height}`);let O=$.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo");for(let q of O)q.setAttribute("x1",String(J)),q.setAttribute("y1",String(Q)),q.setAttribute("x2",String(Z)),q.setAttribute("y2",String(_))}if(this.#Z&&this.#C){let J=this.#G/100*G.width,Q=this.#J/100*G.height,Z=this.#g(G.width),_=this.#W*Math.PI/180,$=J+Z*Math.cos(_),O=Q+Z*Math.sin(_),q=G.width>0?$/G.width*100:0,W=G.height>0?O/G.height*100:0;this.#r(this.#Z,q,W,G)}if(this.#j&&this.#M)this.#r(this.#j,this.#k,this.#_,G);this.#Jk(),this.#Qk()}#P(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#w(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#A(){this.setAttribute("value",JSON.stringify(this.value))}#Zk(){if(!this.#Q)return;if(this.#Q.addEventListener("input",(k)=>{if(k.stopPropagation(),k.detail?.color){this.setAttribute("color",k.detail.color),this.#P();return}if(!this.#B&&this.#M)this.#D=document.body.style.cursor;this.#B=!0;let G=k.detail?.px??this.#G/100,J=k.detail?.py??this.#J/100;if(this.#G=Math.round(Math.max(0,Math.min(100,G*100))),this.#J=Math.round(Math.max(0,Math.min(100,J*100))),this.#K)this.#K.removeAttribute("show"),this.#K.hidePopup?.();if(this.#I(),this.#M)document.body.style.cursor=this.#y(this.#T());this.#P()}),this.#Q.addEventListener("change",(k)=>{if(k.stopPropagation(),k.detail?.color){this.setAttribute("color",k.detail.color),this.#w();return}let G=k.detail?.px??this.#G/100,J=k.detail?.py??this.#J/100;if(this.#G=Math.round(Math.max(0,Math.min(100,G*100))),this.#J=Math.round(Math.max(0,Math.min(100,J*100))),this.#K)this.#K.removeAttribute("show");if(this.#M)document.body.style.cursor=this.#D??"";this.#I(),this.#A(),this.#w(),requestAnimationFrame(()=>{this.#B=!1})}),this.#Z)this.#Z.addEventListener("input",(k)=>{k.stopPropagation(),this.#E=!0,this.classList.add("fig-canvas-control-ring-active");let G=this.#f;if(!G)return;let J=G.getBoundingClientRect(),Q=this.#G/100*J.width,Z=this.#J/100*J.height,_=k.detail?.x??0,$=k.detail?.y??0,O=this.#Z.offsetWidth/2,q=this.#Z.offsetHeight/2,W=_+O-Q,z=$+q-Z,X=Math.atan2(z,W)*180/Math.PI;if(this.#R(k.detail?.shiftKey))X=Math.round(X/15)*15;this.#W=X;let Y=Math.sqrt(W*W+z*z);if(this.#R(k.detail?.shiftKey)){let j=this.#$?5:10;if(this.#$){let K=Y/J.width*100;K=Math.round(K/j)*j,Y=K/100*J.width}else Y=Math.round(Y/j)*j}if(this.#$)this.#O=Math.max(0,Y/J.width*100);else this.#O=Math.max(0,Y);if(this.#q)this.#q.setAttribute("text",`Angle ${Math.round(this.#W)}°`),this.#q.setAttribute("show","true"),this.#q.showPopup?.();this.#I(),this.#P()}),this.#Z.addEventListener("change",(k)=>{if(k.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#q)this.#q.removeAttribute("show");this.#I(),this.#A(),this.#w(),requestAnimationFrame(()=>{this.#E=!1})}),this.#Z.addEventListener("hitareadown",(k)=>{k.stopPropagation();let G=k.detail?.originalEvent;if(!G)return;G.preventDefault(),this.#E=!0,this.classList.add("fig-canvas-control-ring-active");let J=this.#f;if(!J)return;if(this.#q)this.#q.setAttribute("show","true"),this.#q.showPopup?.();let Q=document.body.style.cursor,Z=Math.round(this.#W);document.body.style.cursor=this.#x(Z);let _=(O)=>{let q=J.getBoundingClientRect(),W=this.#G/100*q.width,z=this.#J/100*q.height,X=O.clientX-q.left-W,Y=O.clientY-q.top-z,j=Math.atan2(Y,X)*180/Math.PI;if(this.#R(O.shiftKey))j=Math.round(j/15)*15;if(this.#W=j,this.#q)this.#q.setAttribute("text",`Angle ${Math.round(j)}°`);this.#I();let K=Math.round(j);if(K!==Z)Z=K,document.body.style.cursor=this.#x(K);this.#P()},$=()=>{if(this.#E=!1,this.classList.remove("fig-canvas-control-ring-active"),document.body.style.cursor=Q,this.#q)this.#q.removeAttribute("show");this.#A(),this.#w(),window.removeEventListener("pointermove",_),window.removeEventListener("pointerup",$)};window.addEventListener("pointermove",_),window.addEventListener("pointerup",$)});if(this.#j)this.#j.addEventListener("input",(k)=>{if(k.stopPropagation(),!this.#z)this.#D=document.body.style.cursor;this.#z=!0;let G=k.detail?.px??this.#k/100,J=k.detail?.py??this.#_/100;if(this.#k=Math.round(Math.max(0,Math.min(100,G*100))),this.#_=Math.round(Math.max(0,Math.min(100,J*100))),this.#X)this.#X.removeAttribute("show"),this.#X.hidePopup?.();this.#I(),document.body.style.cursor=this.#y(this.#T()),this.#P()}),this.#j.addEventListener("change",(k)=>{if(k.stopPropagation(),document.body.style.cursor=this.#D??"",this.#X)this.#X.removeAttribute("show");this.#I(),this.#A(),this.#w(),requestAnimationFrame(()=>{this.#z=!1})}),this.#l(this.#Q,!0),this.#l(this.#j,!1)}#l(k,G){if(!k)return;k.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault(),this.#B=!0;let Z=this.#f;if(!Z)return;let _=Z.getBoundingClientRect(),$=G?this.#k:this.#G,O=G?this.#_:this.#J,q=G?this.#G:this.#k,W=G?this.#J:this.#_,z=$/100*_.width,X=O/100*_.height,Y=q/100*_.width,j=W/100*_.height,K=Math.sqrt((Y-z)**2+(j-X)**2),B=G?this.#K:this.#X;if(B)B.removeAttribute("show"),B.hidePopup?.();let E=document.body.style.cursor,V=this.#T(),F=Math.round(G?V+180:V);document.body.style.cursor=this.#x(F);let M=(U)=>{let N=Z.getBoundingClientRect(),L=$/100*N.width,R=O/100*N.height,S=U.clientX-N.left-L,x=U.clientY-N.top-R,f=Math.atan2(x,S);if(this.#R(U.shiftKey))f=Math.round(f*180/Math.PI/15)*15*Math.PI/180;let T=L+K*Math.cos(f),H=R+K*Math.sin(f),P=Math.max(0,Math.min(100,T/N.width*100)),w=Math.max(0,Math.min(100,H/N.height*100));if(G)this.#G=P,this.#J=w;else this.#k=P,this.#_=w;this.#I();let C=Math.round(G?this.#T()+180:this.#T());if(C!==F)F=C,document.body.style.cursor=this.#x(C);this.#P()},I=()=>{if(this.#B=!1,document.body.style.cursor=E,B)B.removeAttribute("show");this.#A(),this.#w(),window.removeEventListener("pointermove",M),window.removeEventListener("pointerup",I)};window.addEventListener("pointermove",M),window.addEventListener("pointerup",I)})}#_k(k){if(!k)return;k.addEventListener("pointermove",(J)=>{if(this.#V)return;let Q=this.#f;if(!Q)return;let Z=Q.getBoundingClientRect(),_=this.#G/100*Z.width,$=this.#J/100*Z.height,O=Math.atan2(J.clientY-Z.top-$,J.clientX-Z.left-_)*180/Math.PI;k.style.cursor=this.#y(O)});let G=(J)=>{if(this.hasAttribute("disabled"))return;J.preventDefault(),J.stopPropagation(),this.#V=!0,this.classList.add("fig-canvas-control-ring-active");let Q=this.#f;if(!Q)return;if(this.#Y)this.#Y.setAttribute("show","true"),this.#Y.showPopup?.(),this.#c(J.clientX,J.clientY);if(this.#q)this.#q.removeAttribute("show"),this.#q.hidePopup?.();let Z=this.#Z?.style.pointerEvents,_=this.#Z?.querySelector(".fig-handle-hit-area"),$=_?.style.pointerEvents;if(this.#Z)this.#Z.style.pointerEvents="none";if(_)_.style.pointerEvents="none";let O=document.body.style.cursor;k.style.pointerEvents="none";let q=Q.getBoundingClientRect(),W=this.#G/100*q.width,z=this.#J/100*q.height,X=Math.atan2(J.clientY-q.top-z,J.clientX-q.left-W)*180/Math.PI,Y=Math.round(X);document.body.style.cursor=this.#y(Y);let j=(B)=>{let E=Q.getBoundingClientRect(),V=this.#G/100*E.width,F=this.#J/100*E.height,M=B.clientX-E.left-V,I=B.clientY-E.top-F,U=Math.round(Math.atan2(I,M)*180/Math.PI);if(U!==Y)Y=U,document.body.style.cursor=this.#y(U);let N=Math.sqrt(M*M+I*I);if(this.#R(B.shiftKey)){let L=this.#$?5:10;if(this.#$){let R=N/E.width*100;R=Math.round(R/L)*L,N=R/100*E.width}else N=Math.round(N/L)*L}if(this.#$)this.#O=Math.max(0,N/E.width*100);else this.#O=Math.max(0,N);if(this.#Y)this.#Y.setAttribute("text",this.#s()),this.#c(B.clientX,B.clientY);this.#I(),this.#P()},K=()=>{if(this.#V=!1,this.classList.remove("fig-canvas-control-ring-active"),k.style.pointerEvents="",this.#Z)this.#Z.style.pointerEvents=Z??"";if(_)_.style.pointerEvents=$??"";if(document.body.style.cursor=O,this.#Y)this.#Y.removeAttribute("show");this.#A(),this.#w(),window.removeEventListener("pointermove",j),window.removeEventListener("pointerup",K)};window.addEventListener("pointermove",j),window.addEventListener("pointerup",K)};k.addEventListener("pointerdown",G),this._radiusDragCleanup=()=>k.removeEventListener("pointerdown",G)}#$k(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}}customElements.define("fig-canvas-control",A);class D extends HTMLElement{#G;#J;#k=null;#_;#O;#$;#W;#Q;#j;constructor(){super();this.angle=0,this.#G=1,this.#J=0,this.isDragging=!1,this.isShiftHeld=!1,this.handle=null,this.angleInput=null,this.plane=null,this.units="°",this.min=null,this.max=null,this.dial=!0,this.showRotations=!1,this.rotationSpan=null,this.#_=this.#F.bind(this),this.#O=this.#H.bind(this),this.#$=this.#u.bind(this),this.#W=this.#f.bind(this),this.#Q=this.#p.bind(this),this.#j=this.#h.bind(this)}connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||1,this.precision=parseInt(this.precision),this.text=this.getAttribute("text")==="true";let k=this.getAttribute("units")||"°";if(k==="deg")k="°";if(this.units=k,this.min=this.hasAttribute("min")?Number(this.getAttribute("min")):null,this.max=this.hasAttribute("max")?Number(this.getAttribute("max")):null,this.dial=this.#N("dial",!0),this.showRotations=this.#L(),this.#Z(),this.#E(),this.#U(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#D()}#Z(){this.innerHTML=this.#K()}#N(k,G=!1){let J=this.getAttribute(k);if(J===null)return G;let Q=J.trim().toLowerCase();if(Q===""||Q==="true")return!0;if(Q==="false")return!1;return!0}#L(){if(this.hasAttribute("rotations"))return this.#N("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#N("show-rotations",!1);return!1}#K(){let k=this.#q(),G=this.min!==null?`min="${this.min}"`:"",J=this.max!==null?`max="${this.max}"`:"";return`
+        ${this.dial?`<div class="fig-input-angle-plane" tabindex="0">
+          <div class="fig-input-angle-handle"></div>
+        </div>`:""}
+        ${this.text?`<fig-input-number
+                name="angle"
+                step="${k}"
+                value="${this.angle}"
+                ${G}
+                ${J}
+                units="${this.units}">
+                ${this.showRotations?'<span slot="append" class="fig-input-angle-rotations"></span>':""}
+              </fig-input-number>`:""}
+    `}#X(){let k=Math.abs(this.#B(this.angle));return Math.floor(k/360)}#Y(){if(!this.rotationSpan)return;let k=this.#X();if(k>1)this.rotationSpan.textContent=`×${k}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#q(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#B(k){switch(this.units){case"rad":return k*180/Math.PI;case"turn":return k*360;default:return k}}#z(k){switch(this.units){case"rad":return k*Math.PI/180;case"turn":return k/360;default:return k}}#V(k,G,J){let Q;switch(G){case"rad":Q=k*180/Math.PI;break;case"turn":Q=k*360;break;default:Q=k}switch(J){case"rad":return Q*Math.PI/180;case"turn":return Q/360;default:return Q}}#E(){if(this.handle=this.querySelector(".fig-input-angle-handle"),this.plane=this.querySelector(".fig-input-angle-plane"),this.angleInput=this.querySelector("fig-input-number[name='angle']"),this.rotationSpan=this.querySelector(".fig-input-angle-rotations"),this.#Y(),this.plane?.addEventListener("mousedown",this.#O),this.plane?.addEventListener("touchstart",this.#$),window.addEventListener("keydown",this.#W),window.addEventListener("keyup",this.#Q),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#j);this.addEventListener("change",this.#_,!0)}#D(){if(this.plane?.removeEventListener("mousedown",this.#O),this.plane?.removeEventListener("touchstart",this.#$),window.removeEventListener("keydown",this.#W),window.removeEventListener("keyup",this.#Q),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#j);this.removeEventListener("change",this.#_,!0)}#F(k){if(!k.target?.matches?.("input"))return;let J=k.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(J){let Q=parseFloat(J[1]),Z=J[2].toLowerCase();if(Z==="deg")Z="°";if(Z!==this.units){let _=this.#V(Q,Z,this.units);k.target.value=String(_)}}}#h(k){k.stopPropagation(),this.angle=Number(k.target.value),this.#C(),this.#U(),this.#Y(),this.#S(),this.#R()}#C(){let G=this.#B(this.angle)*Math.PI/180;this.#G=Math.cos(G),this.#J=Math.sin(G)}#M(k){if(!this.isShiftHeld)return k;let G=45;return Math.round(k/G)*G}#v(k){let G=this.plane.getBoundingClientRect(),J=G.left+G.width/2,Q=G.top+G.height/2,Z=k.clientX-J,_=k.clientY-Q;return Math.atan2(_,Z)*180/Math.PI}#b(k){let J=(this.#v(k)%360+360)%360;if(J=this.#M(J),this.min!==null||this.max!==null)this.angle=this.#z(J);else if(this.#k===null){this.#k=J;let _=(this.#B(this.angle)%360+360)%360,$=J-_;if($>180)$-=360;if($<-180)$+=360;this.angle+=this.#z($)}else{let Z=J-this.#k;if(Z>180)Z-=360;if(Z<-180)Z+=360;this.angle+=this.#z(Z),this.#k=J}if(this.#C(),this.#U(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#Y(),this.#S()}#S(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#R(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#U(){if(this.handle){let G=this.#B(this.angle)*Math.PI/180,J=this.plane.offsetWidth/2-this.handle.offsetWidth/2,Q=Math.cos(G)*J,Z=Math.sin(G)*J;this.handle.style.transform=`translate(${Q}px, ${Z}px)`}}#H(k){this.isDragging=!0,this.#k=null,this.#b(k);let G=(Q)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#b(Q)},J=()=>{this.isDragging=!1,this.#k=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",G),window.removeEventListener("mouseup",J),this.#R()};window.addEventListener("mousemove",G),window.addEventListener("mouseup",J)}#u(k){k.preventDefault(),this.isDragging=!0,this.#k=null,this.#b(k.touches[0]);let G=(Q)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#b(Q.touches[0])},J=()=>{this.isDragging=!1,this.#k=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",G),window.removeEventListener("touchend",J),this.#R()};window.addEventListener("touchmove",G),window.addEventListener("touchend",J)}#f(k){if(k.key==="Shift")this.isShiftHeld=!0}#p(k){if(k.key==="Shift")this.isShiftHeld=!1}focus(){this.plane?.focus()}static get observedAttributes(){return["value","precision","text","min","max","units","dial","rotations","show-rotations"]}get value(){return this.angle}get adjacent(){return this.#G}get opposite(){return this.#J}set value(k){if(isNaN(k)){console.error("Invalid value: must be a number.");return}if(this.angle=k,this.#C(),this.#U(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#Y()}attributeChangedCallback(k,G,J){switch(k){case"value":if(this.isDragging)break;this.value=Number(J);break;case"precision":this.precision=parseInt(J);break;case"text":if(J!==G){if(this.text=J?.toLowerCase()==="true",this.isConnected)this.#Z(),this.#E(),this.#U()}break;case"dial":if(this.dial=this.#N("dial",!0),this.isConnected)this.#Z(),this.#E(),this.#U();break;case"units":{let Q=J||"°";if(Q==="deg")Q="°";if(this.units=Q,this.isConnected)this.#Z(),this.#E(),this.#U();break}case"min":if(this.min=J!==null?Number(J):null,this.isConnected)this.#Z(),this.#E(),this.#U();break;case"max":if(this.max=J!==null?Number(J):null,this.isConnected)this.#Z(),this.#E(),this.#U();break;case"rotations":case"show-rotations":if(this.showRotations=this.#L(),this.isConnected)this.#Z(),this.#E(),this.#U();break}}}customElements.define("fig-input-angle",D);

package/fig-lab.css

@@ -0,0 +1,338 @@
+/**
+ * FigUI3 Lab — Experimental component styles
+ *
+ * Depends on base.css and components.css tokens.
+ * Import alongside components.css for opt-in access:
+ *
+ *   <link rel="stylesheet" href="components.css">
+ *   <link rel="stylesheet" href="fig-lab.css">
+ */
+
+fig-field-slider {
+  display: block;
+  position: relative;
+  width: 100%;
+  border-radius: var(--radius-medium);
+  --field-text-shadow: 0 1px 1.5px
+    light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
+
+
+  &:focus-within {
+    outline: 1px solid var(--figma-color-border-selected);
+  }
+
+  label {
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+
+    label,
+    input {
+      color: var(--figma-color-text-disabled);
+    }
+    fig-slider {
+      filter: grayscale(100%) opacity(0.5);
+    }
+  }
+  &[type="hue"] {
+    label,
+    input {
+      text-shadow: var(--field-text-shadow);
+      color: white;
+    }
+  }
+
+  fig-field:not([direction="vertical"]) {
+    position: relative;
+    padding-left: var(--spacer-2-5);
+    display: flex;
+
+    & > label {
+      min-width: 0;
+      max-width: none;
+      width: 100%;
+      flex: 1 1 auto;
+    }
+
+    fig-slider {
+      position: absolute;
+      inset: 0;
+      padding: 0;
+      background-color: transparent;
+      --slider-height: 2rem;
+      --slider-field-height: 2rem;
+      --slider-thumb-width: var(--spacer-1);
+      --slider-thumb-color: light-dark(
+        var(--figma-color-text-secondary),
+        var(--figma-color-text)
+      );
+      --slider-thumb-height: calc(
+        var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) *
+          min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
+      );
+      --slider-border-radius: var(--radius-medium);
+      --slider-tick-width: 0.125rem;
+      --slider-tick-height: var(--spacer-2);
+      --slider-tick-radius: var(--radius-medium);
+      --slider-stepper-padding: 0;
+      --slider-handle-shadow: inset 0 0 0 var(--slider-thumb-height)
+        var(--slider-thumb-color) !important;
+      --slider-thumb-opacity: calc(
+        min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
+      );
+      --slider-tick-opacity: 1;
+
+      &:has(input[type="range"]:focus-within) {
+        --slider-thumb-outline: 1.5px solid var(--figma-color-border-selected) !important;
+        --slider-thumb-outline-offset: 2px !important;
+      }
+
+      .fig-slider-input-container {
+        box-shadow: none !important;
+        background-color: var(--figma-color-bg-secondary) !important;
+        &:hover,
+        &:focus-within {
+          &::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            border-radius: var(--slider-border-radius);
+            box-shadow: inset 0 0 0 1px var(--figma-color-border) !important;
+          }
+        }
+        &::before {
+          background: var(--figma-color-bg-tertiary) !important;
+          min-width: 0 !important;
+          box-shadow: none !important;
+        }
+        input[type="range"] {
+          border-radius: 0 !important;
+        }
+      }
+
+      &:not([type="delta"]) .fig-slider-input-container::before {
+        width: var(--slider-percent) !important;
+      }
+
+      &[type="delta"] .fig-slider-input-container::before {
+        --left-start: calc(
+          var(--start-percent) - var(--slider-thumb-width) / 2
+        ) !important;
+        left: min(
+          var(--left-start),
+          calc(
+            var(--slider-percent) - var(--slider-complete) *
+              var(--slider-thumb-width)
+          )
+        ) !important;
+        --width: calc(var(--slider-percent) - var(--start-percent)) !important;
+        --abs-width: max(
+          calc(
+            var(--width) + var(--slider-thumb-width) / 2 +
+              (1 - var(--slider-complete)) * var(--slider-thumb-width)
+          ),
+          calc(
+            -1 * var(--width) + var(--slider-thumb-width) / 2 +
+              var(--slider-complete) * var(--slider-thumb-width)
+          )
+        ) !important;
+        width: var(--abs-width) !important;
+      }
+    }
+    datalist {
+      mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        transparent var(--spacer-4),
+        white,
+        transparent calc(100% - var(--spacer-4)),
+        transparent 100%
+      );
+    }
+    fig-input-number {
+      background-color: transparent;
+      box-shadow: none !important;
+      position: absolute;
+      right: var(--spacer-1);
+      width: fit-content;
+      min-width: fit-content;
+      max-width: max-content;
+      flex: 0 0 auto;
+      border-left: 0;
+      border-radius: var(--radius-small);
+
+      &:hover,
+      &:has(input:focus) {
+        box-shadow: none !important;
+      }
+      &:has(input:focus) {
+        box-shadow: inset 0 0 0 1px var(--figma-color-border-selected) !important;
+      }
+      input {
+        field-sizing: content;
+        border-radius: var(--radius-small);
+        width: auto;
+        flex: 0 0 auto;
+        text-align: right;
+        color: var(--field-text-color);
+      }
+    }
+  }
+}
+
+/* Canvas Control */
+fig-canvas-control {
+  display: contents;
+  --fig-canvas-control-line-stroke: light-dark(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0.5)
+  );
+  --fig-canvas-control-radius-stroke: #0D99FF;
+  --fig-canvas-control-radius-stroke-halo: #FFFFFF;
+  --fig-canvas-control-line-stroke-hover: #0D99FF;
+  --fig-canvas-control-line-stroke-active: #0D99FF;
+  --fig-canvas-control-line-stroke-width: 1.5px;
+  --fig-canvas-control-line-stroke-width-hover: 2.25px;
+
+  & > fig-handle,
+  & > fig-tooltip:has(fig-handle:not([size="small"])) {
+    z-index: 1;
+  }
+
+  .fig-canvas-control-radius {
+    position: absolute;
+    pointer-events: none;
+    overflow: visible;
+
+    circle {
+      fill: none;
+      stroke: var(--fig-canvas-control-radius-stroke);
+      stroke-width: var(--fig-canvas-control-line-stroke-width);
+      paint-order: stroke fill;
+    }
+
+    .fig-canvas-control-radius-halo {
+      stroke: var(--fig-canvas-control-radius-stroke-halo);
+      stroke-width: calc(var(--fig-canvas-control-line-stroke-width) * 2);
+      filter: none;
+    }
+
+    .fig-canvas-control-radius-hit {
+      stroke: transparent;
+      stroke-width: 12px;
+      pointer-events: stroke;
+      filter: none;
+
+      &:hover ~ circle:not(.fig-canvas-control-radius-halo) {
+        stroke-width: var(--fig-canvas-control-line-stroke-width-hover);
+      }
+    }
+  }
+
+  &.fig-canvas-control-ring-active
+    .fig-canvas-control-radius
+    circle:not(.fig-canvas-control-radius-hit):not(.fig-canvas-control-radius-halo) {
+    stroke: var(--fig-canvas-control-line-stroke-active);
+    stroke-width: var(--fig-canvas-control-line-stroke-width-hover);
+  }
+
+  .fig-canvas-control-angle-svg {
+    pointer-events: none;
+  }
+
+  .fig-canvas-control-angle-line {
+    stroke: var(--fig-canvas-control-radius-stroke);
+    stroke-width: var(--fig-canvas-control-line-stroke-width);
+    paint-order: stroke fill;
+    filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.3))
+      drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.12));
+  }
+
+  .fig-canvas-control-angle-line-halo {
+    stroke: var(--fig-canvas-control-radius-stroke-halo);
+    stroke-width: calc(var(--fig-canvas-control-line-stroke-width) * 2);
+    stroke-linecap: butt;
+    filter: none;
+  }
+
+  fig-handle[size="small"] {
+    z-index: 2;
+
+    .fig-handle-hit-area {
+      cursor: grab;
+    }
+  }
+}
+
+/* Angle Input */
+fig-input-angle {
+  --size: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacer-2);
+  user-select: none;
+
+  > fig-input-number {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  &[full]:not([full="false"]) {
+    display: flex;
+    width: 100%;
+
+    > fig-input-number {
+      flex: 1 1 auto;
+      min-width: 0;
+      width: auto;
+    }
+  }
+
+  fig-field:not([direction="vertical"]) & {
+    flex: 1;
+    min-width: 0;
+
+    fig-input-number {
+      flex: 0 0 auto;
+      width: auto;
+    }
+  }
+
+  .fig-input-angle-plane {
+    display: inline-grid;
+    place-items: center;
+    width: var(--size);
+    height: var(--size);
+    aspect-ratio: 1/1;
+    flex-shrink: 0;
+    background-color: var(--figma-color-bg-secondary);
+    border-radius: 100%;
+    box-shadow: inset 0 0 0 1px var(--figma-color-border);
+    &:focus,
+    &.dragging {
+      outline: 0;
+      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+    }
+  }
+  .fig-input-angle-handle {
+    display: inline-grid;
+    place-items: center;
+    grid-area: 1/1;
+    width: calc(0.5rem + 2px);
+    height: calc(0.5rem + 2px);
+    &::before {
+      content: "";
+      display: block;
+      width: 0.5rem;
+      height: 0.5rem;
+      background: var(--handle-color);
+      box-shadow: var(--handle-shadow);
+      border-radius: 50%;
+    }
+  }
+}
+