@rogieking/figui3 3.21.0 → 3.21.2

package/dist/fig.js

@@ -1,4 +1,4 @@
-var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @ungap/custom-elements-builtin@0.6.5 (ISC). */(function(Q,$,J){if(Q.importNode.length!=1||$.get("ungap-li"))return;var Z="extends";try{var j={};j[Z]="li";var _=HTMLLIElement,q=function(){return Reflect.construct(_,[],q)};if(q.prototype=J.create(_.prototype),$.define("ungap-li",q,j),!/is="ungap-li"/.test(new q().outerHTML))throw j}catch(K){(function(){var X="attributeChangedCallback",Y="connectedCallback",W="disconnectedCallback",N=Element.prototype,U=J.assign,z=J.create,O=J.defineProperties,L=J.getOwnPropertyDescriptor,B=J.setPrototypeOf,M=$.define,F=$.get,E=$.upgrade,k=$.whenDefined,T=z(null),x=new WeakMap,f={childList:!0,subtree:!0};Reflect.ownKeys(self).filter(function(G){return typeof G=="string"&&/^HTML(?!Element)/.test(G)}).forEach(function(G){function R(){}var A=self[G];B(R,A),(R.prototype=A.prototype).constructor=R,A={},A[G]={value:R},O(self,A)}),new MutationObserver(s).observe(Q,f),_0(Document.prototype,"importNode"),_0(Node.prototype,"cloneNode"),O($,{define:{value:function(G,R,A){if(G=G.toLowerCase(),A&&Z in A){T[G]=U({},A,{Class:R});var P=A[Z]+'[is="'+G+'"]',D=Q.querySelectorAll(P);for(var C=0,I=D.length;C<I;C++)u(D[C])}else M.apply($,arguments)}},get:{value:function(G){return G in T?T[G].Class:F.call($,G)}},upgrade:{value:function(G){var R=h(G);if(R&&!(G instanceof R.Class))j0(G,R);else E.call($,G)}},whenDefined:{value:function(G){return G in T?Promise.resolve():k.call($,G)}}});var H=Q.createElement;O(Q,{createElement:{value:function(G,R){var A=H.call(Q,G);if(R&&"is"in R)A.setAttribute("is",R.is),$.upgrade(A);return A}}});var b=L(N,"attachShadow").value,S=L(N,"innerHTML");O(N,{attachShadow:{value:function(){var G=b.apply(this,arguments);return new MutationObserver(s).observe(G,f),G}},innerHTML:{get:S.get,set:function(G){if(S.set.call(this,G),/\bis=("|')?[a-z0-9_-]+\1/i.test(G))i(this,u)}}});function s(G){for(var R=0,A=G.length;R<A;R++){var P=G[R],D=P.addedNodes,C=P.removedNodes;for(var I=0,o=D.length;I<o;I++)u(D[I]);for(var a=0,c0=C.length;a<c0;a++)p(C[a])}}function d(G){for(var R=0,A=G.length;R<A;R++){var P=G[R],D=P.attributeName,C=P.oldValue,I=P.target,o=I.getAttribute(D);if(X in I&&!(C==o&&o==null))I[X](D,C,I.getAttribute(D),null)}}function p(G){if(G.nodeType!==1)return;var R=h(G);if(R&&G instanceof R.Class&&W in G&&x.get(G)!==W)x.set(G,W),Promise.resolve(G).then(Z0);i(G,p)}function h(G){var R=G.getAttribute("is");if(R){if(R=R.toLowerCase(),R in T)return T[R]}return null}function r(G){G[Y]()}function Z0(G){G[W]()}function j0(G,R){var A=R.Class,P=A.observedAttributes||[];if(B(G,A.prototype),P.length){new MutationObserver(d).observe(G,{attributes:!0,attributeFilter:P,attributeOldValue:!0});var D=[];for(var C=0,I=P.length;C<I;C++)D.push({attributeName:P[C],oldValue:null,target:G});d(D)}}function u(G){if(G.nodeType!==1)return;var R=h(G);if(R){if(!(G instanceof R.Class))j0(G,R);if(Y in G&&G.isConnected&&x.get(G)!==Y)x.set(G,Y),Promise.resolve(G).then(r)}i(G,u)}function i(G,R){for(var A=G.content,P=(A&&A.nodeType==11?A:G).querySelectorAll("[is]"),D=0,C=P.length;D<C;D++)R(P[D])}function _0(G,R){var A=G[R],P={};P[R]={value:function(){var D=A.apply(this,arguments);switch(D.nodeType){case 1:case 11:i(D,u)}return D}},O(G,P)}})()}})(document,customElements,Object)});function r0(){if(typeof navigator==="undefined")return!1;const Q=navigator.userAgent||"",$=/\b(iPad|iPhone|iPod)\b/.test(Q)||/\bMacintosh\b/.test(Q)&&/\bMobile\b/.test(Q),J=/\bAppleWebKit\b/.test(Q)&&!/\b(Chrome|Chromium|Edg|OPR|SamsungBrowser)\b/.test(Q);return $||J}function i0(){if(typeof window==="undefined"||!window.customElements||typeof HTMLButtonElement==="undefined")return!1;const Q=`fig-builtin-probe-${Math.random().toString(36).slice(2)}`;class $ extends HTMLButtonElement{}try{return customElements.define(Q,$,{extends:"button"}),document.createElement("button",{is:Q})instanceof $}catch(J){return!1}}function n(Q,$,J){const Z=()=>{if(!customElements.get(Q))customElements.define(Q,$,J)};if(!X0){Z();return}o0.then(Z).catch((j)=>{console.error(`[figui3] Failed to load customized built-in polyfill for "${Q}".`,j)})}function g(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function Y0(){return l0++}function y(Q,$,J){if(J&&J.trim())Q.style.setProperty($,J.trim());else Q.style.removeProperty($)}function e(Q=1,$=1){if(!v)v=document.createElement("canvas"),K0=v.getContext("2d");if(v.width!==Q)v.width=Q;if(v.height!==$)v.height=$;return{canvas:v,ctx:K0}}function w(Q){const $={...Q??{}};let J=String($.interpolationSpace??"oklab").toLowerCase();if(!t0.includes(J))J="oklab";if(J==="srgb"||J==="display-p3")J="oklab";$.interpolationSpace=J;const Z=String($.hueInterpolation??"shorter").toLowerCase();return $.hueInterpolation=a0.includes(Z)?Z:"shorter",$}function Q0(Q){const $=w(Q),J={...$,interpolationSpace:$.interpolationSpace};if($.interpolationSpace==="oklch")J.hueInterpolation=$.hueInterpolation;else delete J.hueInterpolation;return J}function n0(Q){const $=w(Q);if($.interpolationSpace==="oklch")return`in oklch ${$.hueInterpolation} hue`;return`in ${$.interpolationSpace}`}function e0(Q,$,J){return Q5(Q,$,J).map((j)=>+(j/255).toFixed(4))}function Q5(Q,$,J){$/=100,J/=100;const Z=(1-Math.abs(2*J-1))*$,j=Z*(1-Math.abs(Q/60%2-1)),_=J-Z/2;let q,K,X;if(Q<60)q=Z,K=j,X=0;else if(Q<120)q=j,K=Z,X=0;else if(Q<180)q=0,K=Z,X=j;else if(Q<240)q=0,K=j,X=Z;else if(Q<300)q=j,K=0,X=Z;else q=Z,K=0,X=j;return[Math.round((q+_)*255),Math.round((K+_)*255),Math.round((X+_)*255)]}var X0=r0()&&!i0(),o0=(X0?Promise.resolve().then(() => (q0(),d0)):Promise.resolve()).then(()=>{}).catch((Q)=>{throw Q}),l0=1e4,v=null,K0=null;class W0 extends HTMLElement{type;#$;constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0})}connectedCallback(){this.type=this.getAttribute("type")||"button",this.shadowRoot.innerHTML=`
+var n0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var e0={};var W0=n0(()=>{/*! Vendored from @ungap/custom-elements-builtin@0.6.5 (ISC). */(function(Q,$,J){if(Q.importNode.length!=1||$.get("ungap-li"))return;var Z="extends";try{var j={};j[Z]="li";var q=HTMLLIElement,K=function(){return Reflect.construct(q,[],K)};if(K.prototype=J.create(q.prototype),$.define("ungap-li",K,j),!/is="ungap-li"/.test(new K().outerHTML))throw j}catch(_){(function(){var X="attributeChangedCallback",Y="connectedCallback",W="disconnectedCallback",N=Element.prototype,U=J.assign,O=J.create,E=J.defineProperties,L=J.getOwnPropertyDescriptor,M=J.setPrototypeOf,B=$.define,F=$.get,z=$.upgrade,R=$.whenDefined,k=O(null),T=new WeakMap,S={childList:!0,subtree:!0};Reflect.ownKeys(self).filter(function(G){return typeof G=="string"&&/^HTML(?!Element)/.test(G)}).forEach(function(G){function A(){}var D=self[G];M(A,D),(A.prototype=D.prototype).constructor=A,D={},D[G]={value:A},E(self,D)}),new MutationObserver(f).observe(Q,S),Y0(Document.prototype,"importNode"),Y0(Node.prototype,"cloneNode"),E($,{define:{value:function(G,A,D){if(G=G.toLowerCase(),D&&Z in D){k[G]=U({},D,{Class:A});var H=D[Z]+'[is="'+G+'"]',P=Q.querySelectorAll(H);for(var I=0,y=P.length;I<y;I++)i(P[I])}else B.apply($,arguments)}},get:{value:function(G){return G in k?k[G].Class:F.call($,G)}},upgrade:{value:function(G){var A=u(G);if(A&&!(G instanceof A.Class))Z0(G,A);else z.call($,G)}},whenDefined:{value:function(G){return G in k?Promise.resolve():R.call($,G)}}});var C=Q.createElement;E(Q,{createElement:{value:function(G,A){var D=C.call(Q,G);if(A&&"is"in A)D.setAttribute("is",A.is),$.upgrade(D);return D}}});var m=L(N,"attachShadow").value,p=L(N,"innerHTML");E(N,{attachShadow:{value:function(){var G=m.apply(this,arguments);return new MutationObserver(f).observe(G,S),G}},innerHTML:{get:p.get,set:function(G){if(p.set.call(this,G),/\bis=("|')?[a-z0-9_-]+\1/i.test(G))n(this,i)}}});function f(G){for(var A=0,D=G.length;A<D;A++){var H=G[A],P=H.addedNodes,I=H.removedNodes;for(var y=0,e=P.length;y<e;y++)i(P[y]);for(var j0=0,a0=I.length;j0<a0;j0++)w(I[j0])}}function b(G){for(var A=0,D=G.length;A<D;A++){var H=G[A],P=H.attributeName,I=H.oldValue,y=H.target,e=y.getAttribute(P);if(X in y&&!(I==e&&e==null))y[X](P,I,y.getAttribute(P),null)}}function w(G){if(G.nodeType!==1)return;var A=u(G);if(A&&G instanceof A.Class&&W in G&&T.get(G)!==W)T.set(G,W),Promise.resolve(G).then(r);n(G,w)}function u(G){var A=G.getAttribute("is");if(A){if(A=A.toLowerCase(),A in k)return k[A]}return null}function a(G){G[Y]()}function r(G){G[W]()}function Z0(G,A){var D=A.Class,H=D.observedAttributes||[];if(M(G,D.prototype),H.length){new MutationObserver(b).observe(G,{attributes:!0,attributeFilter:H,attributeOldValue:!0});var P=[];for(var I=0,y=H.length;I<y;I++)P.push({attributeName:H[I],oldValue:null,target:G});b(P)}}function i(G){if(G.nodeType!==1)return;var A=u(G);if(A){if(!(G instanceof A.Class))Z0(G,A);if(Y in G&&G.isConnected&&T.get(G)!==Y)T.set(G,Y),Promise.resolve(G).then(a)}n(G,i)}function n(G,A){for(var D=G.content,H=(D&&D.nodeType==11?D:G).querySelectorAll("[is]"),P=0,I=H.length;P<I;P++)A(H[P])}function Y0(G,A){var D=G[A],H={};H[A]={value:function(){var P=D.apply(this,arguments);switch(P.nodeType){case 1:case 11:n(P,i)}return P}},E(G,H)}})()}})(document,customElements,Object)});function Q5(){if(typeof navigator==="undefined")return!1;const Q=navigator.userAgent||"",$=/\b(iPad|iPhone|iPod)\b/.test(Q)||/\bMacintosh\b/.test(Q)&&/\bMobile\b/.test(Q),J=/\bAppleWebKit\b/.test(Q)&&!/\b(Chrome|Chromium|Edg|OPR|SamsungBrowser)\b/.test(Q);return $||J}function $5(){if(typeof window==="undefined"||!window.customElements||typeof HTMLButtonElement==="undefined")return!1;const Q=`fig-builtin-probe-${Math.random().toString(36).slice(2)}`;class $ extends HTMLButtonElement{}try{return customElements.define(Q,$,{extends:"button"}),document.createElement("button",{is:Q})instanceof $}catch(J){return!1}}function q0(Q,$,J){const Z=()=>{if(!customElements.get(Q))customElements.define(Q,$,J)};if(!G0){Z();return}J5.then(Z).catch((j)=>{console.error(`[figui3] Failed to load customized built-in polyfill for "${Q}".`,j)})}function s(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function B0(){return Z5++}function x(Q,$,J){if(J&&J.trim())Q.style.setProperty($,J.trim());else Q.style.removeProperty($)}function O0(Q=1,$=1){if(!g)g=document.createElement("canvas"),N0=g.getContext("2d");if(g.width!==Q)g.width=Q;if(g.height!==$)g.height=$;return{canvas:g,ctx:N0}}function V(Q){const $={...Q??{}};let J=String($.interpolationSpace??"oklab").toLowerCase();if(!j5.includes(J))J="oklab";if(J==="srgb"||J==="display-p3")J="oklab";$.interpolationSpace=J;const Z=String($.hueInterpolation??"shorter").toLowerCase();return $.hueInterpolation=q5.includes(Z)?Z:"shorter",$}function o(Q){const $=V(Q),J={...$,interpolationSpace:$.interpolationSpace};if($.interpolationSpace==="oklch")J.hueInterpolation=$.hueInterpolation;else delete J.hueInterpolation;return J}function y0(Q){const $=V(Q);if($.interpolationSpace==="oklch")return`in oklch ${$.hueInterpolation} hue`;return`in ${$.interpolationSpace}`}function t(Q){const $=Q.replace(/^#/,"");return{r:parseInt($.substring(0,2),16),g:parseInt($.substring(2,4),16),b:parseInt($.substring(4,6),16)}}function h(Q){const $=Q/255;return $<=0.04045?$/12.92:Math.pow(($+0.055)/1.055,2.4)}function d(Q){const $=Q<=0.0031308?12.92*Q:1.055*Math.pow(Q,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,$))*255)}function Q0(Q,$,J){const Z=h(Q),j=h($),q=h(J),K=Math.cbrt(0.4122214708*Z+0.5363325363*j+0.0514459929*q),_=Math.cbrt(0.2119034982*Z+0.6806995451*j+0.1073969566*q),X=Math.cbrt(0.0883024619*Z+0.2817188376*j+0.6299787005*q);return{l:0.2104542553*K+0.793617785*_-0.0040720468*X,a:1.9779984951*K-2.428592205*_+0.4505937099*X,b:0.0259040371*K+0.7827717662*_-0.808675766*X}}function U0(Q,$,J){const Z=Q+0.3963377774*$+0.2158037573*J,j=Q-0.1055613458*$-0.0638541728*J,q=Q-0.0894841775*$-1.291485548*J,K=Z*Z*Z,_=j*j*j,X=q*q*q;return{r:d(4.0767416621*K-3.3077115913*_+0.2309699292*X),g:d(-1.2684380046*K+2.6097574011*_-0.3413193965*X),b:d(-0.0041960863*K-0.7034186147*_+1.707614701*X)}}function L0(Q,$,J){return{l:Q,c:Math.sqrt($*$+J*J),h:Math.atan2(J,$)*180/Math.PI}}function K5(Q,$,J){const Z=J*Math.PI/180;return{l:Q,a:$*Math.cos(Z),b:$*Math.sin(Z)}}function _5(Q,$,J,Z){let j=(Q%360+360)%360,K=($%360+360)%360-j;switch(Z){case"longer":if(K>0&&K<180)K-=360;else if(K<0&&K>-180)K+=360;else if(K===0)K=0;break;case"increasing":if(K<0)K+=360;break;case"decreasing":if(K>0)K-=360;break;default:if(K>180)K-=360;else if(K<-180)K+=360;break}return((j+K*J)%360+360)%360}function X5(Q,$,J,Z){const j=[...Q].sort((B,F)=>B.position-F.position),q=$*100;if(j.length===0)return"#888888";if(q<=j[0].position)return j[0].color;if(q>=j[j.length-1].position)return j[j.length-1].color;let K=0;while(K<j.length-1&&j[K+1].position<q)K++;const _=j[K],X=j[K+1],Y=X.position-_.position,W=Y>0?(q-_.position)/Y:0,N=t(_.color),U=t(X.color);let O,E,L;const M=J||"oklab";if(M==="srgb-linear"){const B=h(N.r),F=h(N.g),z=h(N.b),R=h(U.r),k=h(U.g),T=h(U.b);O=d(B+(R-B)*W),E=d(F+(k-F)*W),L=d(z+(T-z)*W)}else if(M==="oklch"){const B=Q0(N.r,N.g,N.b),F=Q0(U.r,U.g,U.b),z=L0(B.l,B.a,B.b),R=L0(F.l,F.a,F.b),k=z.l+(R.l-z.l)*W,T=z.c+(R.c-z.c)*W,S=_5(z.h,R.h,W,Z||"shorter"),C=K5(k,T,S),m=U0(C.l,C.a,C.b);O=m.r,E=m.g,L=m.b}else{const B=Q0(N.r,N.g,N.b),F=Q0(U.r,U.g,U.b),z=B.l+(F.l-B.l)*W,R=B.a+(F.a-B.a)*W,k=B.b+(F.b-B.b)*W,T=U0(z,R,k);O=T.r,E=T.g,L=T.b}return`#${O.toString(16).padStart(2,"0")}${E.toString(16).padStart(2,"0")}${L.toString(16).padStart(2,"0")}`.toUpperCase()}function Y5(Q,$,J){return W5(Q,$,J).map((j)=>+(j/255).toFixed(4))}function W5(Q,$,J){$/=100,J/=100;const Z=(1-Math.abs(2*J-1))*$,j=Z*(1-Math.abs(Q/60%2-1)),q=J-Z/2;let K,_,X;if(Q<60)K=Z,_=j,X=0;else if(Q<120)K=j,_=Z,X=0;else if(Q<180)K=0,_=Z,X=j;else if(Q<240)K=0,_=j,X=Z;else if(Q<300)K=j,_=0,X=Z;else K=Z,_=0,X=j;return[Math.round((K+q)*255),Math.round((_+q)*255),Math.round((X+q)*255)]}var G0=Q5()&&!$5(),J5=(G0?Promise.resolve().then(() => (W0(),e0)):Promise.resolve()).then(()=>{}).catch((Q)=>{throw Q}),Z5=1e4,g=null,N0=null;class M0 extends HTMLElement{type;#$;constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0})}connectedCallback(){this.type=this.getAttribute("type")||"button",this.shadowRoot.innerHTML=`
             <style>
                 button, button:hover, button:active {
                     padding: 0 var(--spacer-2);
@@ -32,7 +32,7 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
             <button type="${this.type}">
                 <slot></slot>
             </button>
-            `,this.#$=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false",requestAnimationFrame(()=>{this.button=this.shadowRoot.querySelector("button"),this.button.addEventListener("click",this.#Q.bind(this)),this.button.addEventListener("focus",()=>{if(this.button.matches(":focus-visible"))this.setAttribute("data-focus-visible","")}),this.button.addEventListener("blur",()=>{this.removeAttribute("data-focus-visible")})})}get type(){return this.getAttribute("type")||"button"}set type(Q){this.setAttribute("type",Q)}get selected(){return this.#$}set selected(Q){this.setAttribute("selected",Q)}#Q(){if(this.type==="toggle")this.toggleAttribute("selected",!this.hasAttribute("selected"));if(this.type==="submit"){let Q=this.closest("form");if(Q)Q.submit()}if(this.type==="link"){const Q=this.getAttribute("href"),$=this.getAttribute("target");if(Q)if($)window.open(Q,$);else window.location.href=Q}}static get observedAttributes(){return["disabled","selected"]}attributeChangedCallback(Q,$,J){if(this.button)switch(this.button[Q]=J,Q){case"disabled":this.disabled=this.button.disabled=J!==null&&J!=="false";break;case"type":this.type=J,this.button.type=this.type,this.button.setAttribute("type",this.type);break;case"selected":this.#$=J==="true";break}}}customElements.define("fig-button",W0);class N0 extends HTMLElement{#$="Menu";#Q=null;#J;#j;#_=!1;#Z=null;get label(){return this.#$}set label(Q){this.#$=Q}#K;constructor(){super();this.select=document.createElement("select"),this.optionsSlot=document.createElement("slot"),this.attachShadow({mode:"open"}),this.#J=this.#B.bind(this),this.#j=this.#L.bind(this),this.#K=this.slotChange.bind(this)}#X(){if(typeof CSS==="undefined"||typeof CSS.supports!=="function")return!1;try{return CSS.supports("appearance: base-select")&&CSS.supports("selector(::picker(select))")}catch{return!1}}#q(){if(!(this.getAttribute("experimental")||"").split(/\s+/).filter(Boolean).includes("modern")||!this.#X()){this.#_=!1;return}const J=document.createElement("button");J.setAttribute("type","button"),J.setAttribute("aria-hidden","true");const Z=document.createElement("selectedcontent");J.appendChild(Z),this.select.appendChild(J),this.#_=!0,this.#Z=Z}#W(){if(!this.#Z)return;const Q=this.select.selectedOptions?.[0];if(!Q){this.#Z.textContent="";return}this.#Z.innerHTML=Q.innerHTML}#Y(){this.select.addEventListener("input",this.#J),this.select.addEventListener("change",this.#j)}#U(Q){if(!Q||!(Q instanceof Element))return!1;return!!Q.querySelector('fig-checkbox, fig-switch, input[type="checkbox"]')}#N(){if(typeof this.select.showPicker==="function")requestAnimationFrame(()=>{try{this.select.showPicker()}catch{}})}connectedCallback(){this.type=this.getAttribute("type")||"select",this.#$=this.getAttribute("label")||this.#$,this.select.setAttribute("aria-label",this.#$),this.appendChild(this.select),this.shadowRoot.appendChild(this.optionsSlot),this.optionsSlot.addEventListener("slotchange",this.#K),this.#Y()}slotChange(){while(this.select.firstChild)this.select.firstChild.remove();if(this.#q(),this.type==="dropdown"){const Q=document.createElement("option");Q.setAttribute("hidden","true"),Q.setAttribute("selected","true"),Q.selected=!0,this.select.appendChild(Q)}if(this.optionsSlot.assignedNodes().forEach((Q)=>{if(Q.nodeName==="OPTION"||Q.nodeName==="OPTGROUP")this.select.appendChild(Q.cloneNode(!0))}),this.#G(this.value),this.#W(),this.type==="dropdown")this.select.selectedIndex=-1}#B(Q){const $=Q.target.selectedOptions?.[0];if(this.#U($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#N();return}const J=Q.target.value;if(this.type==="dropdown")this.#Q=J;this.setAttribute("value",J),this.#W(),this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0}))}#L(Q){const $=Q.target.selectedOptions?.[0];if(this.#U($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#N();return}const J=this.type==="dropdown"?this.#Q:this.select.value;if(this.type==="dropdown")this.select.selectedIndex=-1;this.#W(),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}focus(){this.select.focus()}blur(){this.select.blur()}get value(){if(this.type==="dropdown")return this.#Q;return this.select?.value}set value(Q){if(this.type==="dropdown")this.#Q=Q;this.setAttribute("value",Q)}static get observedAttributes(){return["value","type","experimental"]}#G(Q){if(this.type==="dropdown")return;if(this.select)this.select.querySelectorAll("option").forEach(($,J)=>{if($.value===this.getAttribute("value"))this.select.selectedIndex=J});this.#W()}attributeChangedCallback(Q,$,J){if(Q==="value")this.#G(J);if(Q==="type")this.type=J;if(Q==="experimental")this.slotChange();if(Q==="label")this.#$=J,this.select.setAttribute("aria-label",this.#$)}disconnectedCallback(){this.optionsSlot.removeEventListener("slotchange",this.#K),this.select.removeEventListener("input",this.#J),this.select.removeEventListener("change",this.#j)}}customElements.define("fig-dropdown",N0);class m extends HTMLElement{static#$=0;static#Q=500;#J;#j;#_;#Z;#K;#X;#q;#W;#Y;#U=!1;#N=null;#B=null;constructor(){super();this.action=this.getAttribute("action")||"hover";let Q=parseInt(this.getAttribute("delay"));this.delay=!isNaN(Q)?Q:500,this.#J=this.#F.bind(this),this.#j=this.hidePopupOutsideClick.bind(this),this.#_=this.showDelayedPopup.bind(this),this.#Z=this.#R.bind(this),this.#K=this.#z.bind(this),this.#X=this.#E.bind(this),this.#q=this.#A.bind(this),this.#W=this.#f.bind(this)}connectedCallback(){this.setup(),this.setupEventListeners()}disconnectedCallback(){if(this.destroy(),document.removeEventListener("mousedown",this.#J,!0),this.#M(),this.action==="click")document.body.removeEventListener("click",this.#j);if(clearTimeout(this.#Y),this.action==="hover")this.removeEventListener("pointerenter",this.#_),this.removeEventListener("pointerleave",this.#Z),this.removeEventListener("touchstart",this.#K),this.removeEventListener("touchmove",this.#X),this.removeEventListener("touchend",this.#q),this.removeEventListener("touchcancel",this.#W);else if(this.action==="click")this.removeEventListener("click",this.#_),this.removeEventListener("touchstart",this.#_)}setup(){this.style.display="contents"}render(){this.destroy();let Q=document.createElement("span");this.popup=document.createElement("span"),this.popup.setAttribute("class","fig-tooltip"),this.popup.setAttribute("role","tooltip");const $=g();if(this.popup.setAttribute("id",$),this.popup.style.position="fixed",this.popup.style.visibility="hidden",this.popup.style.display="inline-flex",this.popup.style.pointerEvents="none",this.popup.append(Q),Q.innerText=this.getAttribute("text"),this.firstElementChild)this.firstElementChild.setAttribute("aria-describedby",$);const J=this.closest("dialog");if(J&&J.open)J.append(this.popup);else document.body.append(this.popup);const Z=Q.childNodes[0];if(Z){const j=document.createRange();j.setStartBefore(Z),j.setEndAfter(Z);const _=j.getBoundingClientRect();Q.style.width=`${_.width}px`}}destroy(){if(this.#M(),this.popup)this.popup.remove(),this.popup=null;if(this.action==="click")document.body.removeEventListener("click",this.#j)}isTouchDevice(){return"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0}setupEventListeners(){if(this.action==="manual")return;if(this.action==="hover"){if(!this.isTouchDevice())this.addEventListener("pointerenter",this.#_),this.addEventListener("pointerleave",this.#Z);this.addEventListener("touchstart",this.#K,{passive:!0}),this.addEventListener("touchmove",this.#X,{passive:!0}),this.addEventListener("touchend",this.#q,{passive:!0}),this.addEventListener("touchcancel",this.#W,{passive:!0})}else if(this.action==="click")this.addEventListener("click",this.#_),document.body.addEventListener("click",this.#j),this.addEventListener("touchstart",this.#_,{passive:!0});document.addEventListener("mousedown",this.#J,!0)}getOffset(){const Q={left:8,top:4,right:8,bottom:4},$=this.getAttribute("offset");if(!$)return Q;const[J,Z,j,_]=$.split(",").map(Number);return{left:isNaN(J)?Q.left:J,top:isNaN(Z)?Q.top:Z,right:isNaN(j)?Q.right:j,bottom:isNaN(_)?Q.bottom:_}}get#L(){return this.hasAttribute("show")&&this.getAttribute("show")!=="false"}showDelayedPopup(){if(this.#L)return;this.render(),clearTimeout(this.timeout);const $=Date.now()-m.#$<m.#Q?0:this.delay;this.timeout=setTimeout(this.showPopup.bind(this),$)}showPopup(){if(!this.popup)this.render();this.popup.style.display="block",this.popup.style.visibility="hidden",this.#G(),this.popup.style.opacity="1",this.popup.style.visibility="visible",this.popup.style.pointerEvents="all",this.popup.style.zIndex=Y0()+1,this.isOpen=!0,m.#$=Date.now(),this.#O()}#G(){if(!this.popup||!this.firstElementChild)return;const Q=this.firstElementChild.getBoundingClientRect(),$=this.popup.getBoundingClientRect(),J=this.getOffset(),Z=this.popup.parentElement,j=Z&&Z!==document.body?Z.getBoundingClientRect():{left:0,top:0};let _=Q.top-$.height-J.top-j.top,q=Q.left+(Q.width-$.width)/2-j.left;if(this.popup.setAttribute("position","top"),_+j.top<0)this.popup.setAttribute("position","bottom"),_=Q.bottom+J.bottom-j.top;const K=q+j.left;if(K<J.left)q=J.left-j.left;else if(K+$.width>window.innerWidth-J.right)q=window.innerWidth-$.width-J.right-j.left;const Y=Q.left-j.left+Q.width/2-q;this.popup.style.setProperty("--beak-offset",`${Y}px`),this.popup.style.top=`${_}px`,this.popup.style.left=`${q}px`}hidePopup(){if(this.#L)return;if(clearTimeout(this.timeout),clearTimeout(this.#Y),this.#M(),this.popup)this.popup.style.opacity="0",this.popup.style.display="block",this.popup.style.pointerEvents="none",this.destroy();this.isOpen=!1,m.#$=Date.now()}#O(){this.#M();const Q=this.firstElementChild;if(!Q)return;this.#N=new MutationObserver(()=>{if(this.#B)cancelAnimationFrame(this.#B);this.#B=requestAnimationFrame(()=>{this.#G()})}),this.#N.observe(Q,{attributes:!0,attributeFilter:["style","class","transform"]})}#M(){if(this.#B)cancelAnimationFrame(this.#B),this.#B=null;if(this.#N)this.#N.disconnect(),this.#N=null}hidePopupOutsideClick(Q){if(this.isOpen&&!this.popup.contains(Q.target))this.hidePopup()}#R(Q){if(!this.#U)this.hidePopup()}#z(Q){if(this.action==="hover")this.#U=!0,clearTimeout(this.#Y),this.showDelayedPopup()}#E(Q){if(this.action==="hover"&&this.#U)clearTimeout(this.#Y),this.#Y=setTimeout(()=>{this.#U=!1,this.hidePopup()},150)}#A(Q){if(this.action==="hover"&&this.#U)clearTimeout(this.#Y),this.#Y=setTimeout(()=>{this.#U=!1,this.hidePopup()},300)}#f(Q){if(this.action==="hover"&&this.#U)this.#U=!1,clearTimeout(this.#Y),this.hidePopup()}static get observedAttributes(){return["action","delay","open","show","text"]}get text(){return this.getAttribute("text")??""}set text(Q){this.setAttribute("text",Q)}#T(Q){if(!this.popup)return;const $=this.popup.firstElementChild??this.popup.firstChild;if(!$)return;$.innerText=Q,$.style.width="";const J=$.childNodes[0];if(J){const Z=document.createRange();Z.setStartBefore(J),Z.setEndAfter(J),$.style.width=`${Z.getBoundingClientRect().width}px`}if(this.isOpen)this.#G()}get open(){return this.hasAttribute("open")&&this.getAttribute("open")==="true"}set open(Q){this.setAttribute("open",Q)}attributeChangedCallback(Q,$,J){if(Q==="action")this.action=J;if(Q==="delay"){let Z=parseInt(J);this.delay=!isNaN(Z)?Z:500}if(Q==="open")if(J==="true")requestAnimationFrame(()=>{this.showDelayedPopup()});else requestAnimationFrame(()=>{this.hidePopup()});if(Q==="show")if(J!==null&&J!=="false")this.showPopup();else this.hidePopup();if(Q==="text")this.#T(J??"")}#F(Q){if(!this.isOpen)return;const $=Q.target;if(this.popup&&this.popup.contains($))return;if($.tagName==="SELECT"||$.hasAttribute("popover")||$.closest("dialog"))this.hidePopup()}}customElements.define("fig-tooltip",m);class U0 extends HTMLDialogElement{#$=!1;#Q=!1;#J={x:0,y:0};#j={x:0,y:0};#_;#Z;#K;#X;#q=16;#W=!1;#Y=3;constructor(){super();this.#_=this.#O.bind(this),this.#Z=this.#M.bind(this),this.#K=this.#R.bind(this),this.#X=this.close.bind(this)}connectedCallback(){this.modal=this.hasAttribute("modal")&&this.getAttribute("modal")!=="false",this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",requestAnimationFrame(()=>{this.#U(),this.#B(),this.#N()})}disconnectedCallback(){this.#L(),this.querySelectorAll("fig-button[close-dialog]").forEach((Q)=>{Q.removeEventListener("click",this.#X)})}#U(){this.querySelectorAll("fig-button[close-dialog]").forEach((Q)=>{Q.removeEventListener("click",this.#X),Q.addEventListener("click",this.#X)})}#N(){const Q=this.getAttribute("position")||"";this.style.position="fixed",this.style.transform="none",this.style.top="auto",this.style.bottom="auto",this.style.left="auto",this.style.right="auto",this.style.margin="0";const $=Q.includes("top"),J=Q.includes("bottom"),Z=Q.includes("left"),j=Q.includes("right"),_=Q.includes("center")&&!$&&!J,q=Q.includes("center")&&!Z&&!j;if($)this.style.top=`${this.#q}px`;else if(J)this.style.bottom=`${this.#q}px`;else if(_)this.style.top="0",this.style.bottom="0";if(Z)this.style.left=`${this.#q}px`;else if(j)this.style.right=`${this.#q}px`;else if(q)this.style.left="0",this.style.right="0";if(_&&q)this.style.margin="auto";else if(_)this.style.marginTop="auto",this.style.marginBottom="auto";else if(q)this.style.marginLeft="auto",this.style.marginRight="auto";this.#W=!0}#B(){if(this.drag){this.addEventListener("pointerdown",this.#_);const Q=this.getAttribute("handle"),$=Q?this.querySelector(Q):this.querySelector("fig-header, header");if($)$.style.cursor="grab"}}#L(){this.removeEventListener("pointerdown",this.#_),document.removeEventListener("pointermove",this.#Z),document.removeEventListener("pointerup",this.#K)}#G(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],J=["FIG-HEADER","FIG-DIALOG","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],Z=(_)=>$.some((q)=>_.matches?.(q))||_.tagName?.startsWith("FIG-")&&!J.includes(_.tagName);if(Z(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(Z(j))return!0;j=j.parentElement}return!1}#O(Q){if(!this.drag)return;if(this.#G(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const Z=this.querySelector($);if(!Z||!Z.contains(Q.target))return}this.#Q=!0,this.#J.x=Q.clientX,this.#J.y=Q.clientY;const J=this.getBoundingClientRect();this.#j.x=Q.clientX-J.left,this.#j.y=Q.clientY-J.top,document.addEventListener("pointermove",this.#Z),document.addEventListener("pointerup",this.#K)}#M(Q){if(this.#Q&&!this.#$){const $=Math.abs(Q.clientX-this.#J.x),J=Math.abs(Q.clientY-this.#J.y);if($>this.#Y||J>this.#Y){this.#$=!0,this.#Q=!1,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const Z=this.getBoundingClientRect();this.style.top=`${Z.top}px`,this.style.left=`${Z.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this.#$)return;this.style.left=`${Q.clientX-this.#j.x}px`,this.style.top=`${Q.clientY-this.#j.y}px`,Q.preventDefault()}#R(Q){if(this.#$)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this.#$=!1,this.#Q=!1,document.removeEventListener("pointermove",this.#Z),document.removeEventListener("pointerup",this.#K),Q.preventDefault()}static get observedAttributes(){return["modal","drag","position","handle"]}attributeChangedCallback(Q,$,J){if(Q==="drag")if(this.drag=J!==null&&J!=="false",this.drag)this.#B();else{this.#L();const Z=this.querySelector("fig-header, header");if(Z)Z.style.cursor=""}if(Q==="position"&&this.#W)this.#N()}}n("fig-dialog",U0,{extends:"dialog"});class L0 extends HTMLDialogElement{_anchorObserver=null;_contentObserver=null;_mutationObserver=null;_anchorTrackRAF=null;_lastAnchorRect=null;_isPopupActive=!1;_boundReposition;_boundScroll;_boundOutsidePointerDown;_rafId=null;_anchorRef=null;_isDragging=!1;_dragPending=!1;_dragStartPos={x:0,y:0};_dragOffset={x:0,y:0};_dragThreshold=3;_boundPointerDown;_boundPointerMove;_boundPointerUp;_wasDragged=!1;constructor(){super();this._boundReposition=this.queueReposition.bind(this),this._boundScroll=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.shouldAutoReposition())this.queueReposition()},this._boundOutsidePointerDown=this.handleOutsidePointerDown.bind(this),this._boundPointerDown=this.handlePointerDown.bind(this),this._boundPointerMove=this.handlePointerMove.bind(this),this._boundPointerUp=this.handlePointerUp.bind(this)}ensureInitialized(){if(typeof this._anchorObserver==="undefined")this._anchorObserver=null;if(typeof this._contentObserver==="undefined")this._contentObserver=null;if(typeof this._mutationObserver==="undefined")this._mutationObserver=null;if(typeof this._anchorTrackRAF==="undefined")this._anchorTrackRAF=null;if(typeof this._lastAnchorRect==="undefined")this._lastAnchorRect=null;if(typeof this._isPopupActive==="undefined")this._isPopupActive=!1;if(typeof this._rafId==="undefined")this._rafId=null;if(typeof this._anchorRef==="undefined")this._anchorRef=null;if(typeof this._isDragging==="undefined")this._isDragging=!1;if(typeof this._dragPending==="undefined")this._dragPending=!1;if(typeof this._dragStartPos==="undefined")this._dragStartPos={x:0,y:0};if(typeof this._dragOffset==="undefined")this._dragOffset={x:0,y:0};if(typeof this._dragThreshold!=="number")this._dragThreshold=3;if(typeof this._wasDragged==="undefined")this._wasDragged=!1;if(typeof this._boundReposition!=="function")this._boundReposition=this.queueReposition.bind(this);if(typeof this._boundScroll!=="function")this._boundScroll=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.shouldAutoReposition())this.queueReposition()};if(typeof this._boundOutsidePointerDown!=="function")this._boundOutsidePointerDown=this.handleOutsidePointerDown.bind(this);if(typeof this._boundPointerDown!=="function")this._boundPointerDown=this.handlePointerDown.bind(this);if(typeof this._boundPointerMove!=="function")this._boundPointerMove=this.handlePointerMove.bind(this);if(typeof this._boundPointerUp!=="function")this._boundPointerUp=this.handlePointerUp.bind(this)}static get observedAttributes(){return["open","anchor","position","offset","variant","theme","drag","handle","autoresize","viewport-margin"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(Q){if(Q===!1||Q==="false"||Q===null){if(!this.open)return;this.removeAttribute("open");return}if(this.open)return;this.setAttribute("open","true")}get anchor(){return this._anchorRef??this.getAttribute("anchor")}set anchor(Q){if(Q instanceof Element)this._anchorRef=Q;else if(typeof Q==="string")this._anchorRef=null,this.setAttribute("anchor",Q);else this._anchorRef=null;if(this.open)this.queueReposition()}connectedCallback(){if(this.ensureInitialized(),!this.hasAttribute("position"))this.setAttribute("position","top center");if(!this.hasAttribute("role"))this.setAttribute("role","dialog");if(!this.hasAttribute("closedby"))this.setAttribute("closedby","any");if(this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",this.addEventListener("close",()=>{if(this.teardownObservers(),this.hasAttribute("open"))this.removeAttribute("open")}),requestAnimationFrame(()=>{this.setupDragListeners()}),this.open)this.showPopup();else this.hidePopup()}disconnectedCallback(){if(this.ensureInitialized(),this.teardownObservers(),this.removeDragListeners(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),this._rafId!==null)cancelAnimationFrame(this._rafId),this._rafId=null}attributeChangedCallback(Q,$,J){if(this.ensureInitialized(),$===J)return;if(Q==="open"){if(J===null||J==="false"){this.hidePopup();return}this.showPopup();return}if(Q==="drag"){if(this.drag=J!==null&&J!=="false",this.drag)this.setupDragListeners();else this.removeDragListeners();return}if(this.open)this.queueReposition(),this.setupObservers()}showPopup(){if(this._isPopupActive){this.queueReposition();return}if(this.style.position="fixed",this.style.inset="auto",this.style.margin="0",this.style.zIndex=String(Y0()+1),!super.open)try{this.show()}catch($){}this.setupObservers(),document.addEventListener("pointerdown",this._boundOutsidePointerDown,!0),this._wasDragged=!1,this.queueReposition(),this._isPopupActive=!0;const Q=this.resolveAnchor();if(Q)Q.classList.add("has-popup-open")}hidePopup(){const Q=this.resolveAnchor();if(Q)Q.classList.remove("has-popup-open");if(this._isPopupActive=!1,this._wasDragged=!1,this.teardownObservers(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),super.open)try{this.close()}catch($){}}get autoresize(){const Q=this.getAttribute("autoresize");return Q===null||Q!=="false"}set autoresize(Q){if(Q||Q==="")this.setAttribute("autoresize",Q===!0?"":Q);else this.removeAttribute("autoresize")}setupObservers(){this.teardownObservers();const Q=this.resolveAnchor();if(Q&&"ResizeObserver"in window)this._anchorObserver=new ResizeObserver(this._boundReposition),this._anchorObserver.observe(Q);if(this.autoresize){if("ResizeObserver"in window)this._contentObserver=new ResizeObserver(this._boundReposition),this._contentObserver.observe(this);this._mutationObserver=new MutationObserver(this._boundReposition),this._mutationObserver.observe(this,{childList:!0,subtree:!0,characterData:!0})}window.addEventListener("resize",this._boundReposition),window.addEventListener("scroll",this._boundScroll,{capture:!0,passive:!0}),this.startAnchorTracking()}teardownObservers(){if(this._anchorObserver)this._anchorObserver.disconnect(),this._anchorObserver=null;if(this._contentObserver)this._contentObserver.disconnect(),this._contentObserver=null;if(this._mutationObserver)this._mutationObserver.disconnect(),this._mutationObserver=null;window.removeEventListener("resize",this._boundReposition),window.removeEventListener("scroll",this._boundScroll,{capture:!0,passive:!0}),this.stopAnchorTracking()}readRectSnapshot(Q){if(!Q)return null;const $=Q.getBoundingClientRect();return{x:$.x,y:$.y,width:$.width,height:$.height}}hasRectChanged(Q,$,J=0.25){if(!Q&&!$)return!1;if(!Q||!$)return!0;return Math.abs(Q.x-$.x)>J||Math.abs(Q.y-$.y)>J||Math.abs(Q.width-$.width)>J||Math.abs(Q.height-$.height)>J}startAnchorTracking(){if(this.stopAnchorTracking(),!this.open)return;const Q=()=>{if(!this.open){this._anchorTrackRAF=null;return}const $=this.resolveAnchor(),J=this.readRectSnapshot($),Z=this.shouldAutoReposition();if(Z&&this.hasRectChanged(this._lastAnchorRect,J))this._lastAnchorRect=J,this.queueReposition();else if(!Z)this._lastAnchorRect=J;this._anchorTrackRAF=requestAnimationFrame(Q)};this._lastAnchorRect=this.readRectSnapshot(this.resolveAnchor()),this._anchorTrackRAF=requestAnimationFrame(Q)}stopAnchorTracking(){if(this._anchorTrackRAF!==null)cancelAnimationFrame(this._anchorTrackRAF),this._anchorTrackRAF=null;this._lastAnchorRect=null}handleOutsidePointerDown(Q){if(!this.open||!super.open)return;const $=this.getAttribute("closedby");if($==="none"||$==="closerequest")return;const J=Q.target;if(!(J instanceof Node))return;if(this.contains(J))return;const Z=this.resolveAnchor();if(Z&&Z.contains(J))return;if(this.isInsideDescendantPopup(J))return;this.open=!1}isInsideDescendantPopup(Q){const $=Q.closest?.('dialog[is="fig-popup"]');if(!$||$===this)return!1;let J=$;const Z=new Set;while(J&&!Z.has(J)){Z.add(J);const j=J.anchor;if(!(j instanceof Element))break;if(this.contains(j))return!0;J=j.closest?.('dialog[is="fig-popup"]')}return!1}setupDragListeners(){if(this.drag)this.addEventListener("pointerdown",this._boundPointerDown)}removeDragListeners(){this.removeEventListener("pointerdown",this._boundPointerDown),document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp)}isInteractiveElement(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],J=["FIG-HEADER","FIG-DIALOG","FIG-POPUP","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],Z=(_)=>$.some((q)=>_.matches?.(q))||_.tagName?.startsWith("FIG-")&&!J.includes(_.tagName);if(Z(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(Z(j))return!0;j=j.parentElement}return!1}handlePointerDown(Q){if(!this.drag)return;if(this.isInteractiveElement(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const Z=this.querySelector($);if(!Z||!Z.contains(Q.target))return}this._dragPending=!0,this._dragStartPos.x=Q.clientX,this._dragStartPos.y=Q.clientY;const J=this.getBoundingClientRect();this._dragOffset.x=Q.clientX-J.left,this._dragOffset.y=Q.clientY-J.top,document.addEventListener("pointermove",this._boundPointerMove),document.addEventListener("pointerup",this._boundPointerUp)}handlePointerMove(Q){if(this._dragPending&&!this._isDragging){const $=Math.abs(Q.clientX-this._dragStartPos.x),J=Math.abs(Q.clientY-this._dragStartPos.y);if($>this._dragThreshold||J>this._dragThreshold){this._isDragging=!0,this._dragPending=!1,this._wasDragged=!0,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const Z=this.getBoundingClientRect();this.style.top=`${Z.top}px`,this.style.left=`${Z.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this._isDragging)return;this.style.left=`${Q.clientX-this._dragOffset.x}px`,this.style.top=`${Q.clientY-this._dragOffset.y}px`,Q.preventDefault()}handlePointerUp(Q){if(this._isDragging)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this._isDragging=!1,this._dragPending=!1,document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp),Q.preventDefault()}resolveAnchor(){if(this._anchorRef)return this._anchorRef;const Q=this.getAttribute("anchor");if(!Q)return null;const $=this.parentElement;if($?.querySelector){const J=$.querySelector(Q);if(J&&!this.contains(J))return J}return document.querySelector(Q)}parsePosition(){const $=(this.getAttribute("position")||"top center").trim().toLowerCase().split(/\s+/).filter(Boolean),J=new Set(["top","center","bottom"]),Z=new Set(["left","center","right"]);let j="top",_="center",q=null;if($.length>=2){if(J.has($[0]))j=$[0];if(Z.has($[1]))_=$[1];return{vertical:j,horizontal:_,shorthand:q}}if($.length===1){const K=$[0];if(K==="top"||K==="bottom")j=K,q=K;else if(K==="left"||K==="right")_=K,q=K;else if(K==="center")j="center",_="center"}return{vertical:j,horizontal:_,shorthand:q}}normalizeOffsetToken(Q,$="0px"){if(!Q)return $;const J=Q.trim();if(!J)return $;if(/^-?\d+(\.\d+)?$/.test(J))return`${J}px`;return J}measureLengthPx(Q,$="x"){if(!Q)return 0;const J=this.normalizeOffsetToken(Q,"0px");if(J.endsWith("px")){const _=parseFloat(J);return Number.isFinite(_)?_:0}const Z=document.createElement("div");if(Z.style.position="fixed",Z.style.visibility="hidden",Z.style.pointerEvents="none",Z.style.left="0",Z.style.top="0",Z.style.margin="0",Z.style.padding="0",Z.style.border="0",$==="x")Z.style.width=J,Z.style.height="0";else Z.style.height=J,Z.style.width="0";document.body.appendChild(Z);const j=Z.getBoundingClientRect();return Z.remove(),$==="x"?j.width:j.height}parseOffset(){const $=(this.getAttribute("offset")||"0 0").trim().split(/\s+/).filter(Boolean),J=this.normalizeOffsetToken($[0],"0px"),Z=this.normalizeOffsetToken($[1],"0px");return{xToken:J,yToken:Z,xPx:this.measureLengthPx(J,"x"),yPx:this.measureLengthPx(Z,"y")}}parseViewportMargins(){const $=(this.getAttribute("viewport-margin")||"8").trim().split(/\s+/).map(Number).filter((Z)=>!Number.isNaN(Z));if($.length===0)return{top:8,right:8,bottom:8,left:8};if($.length===1)return{top:$[0],right:$[0],bottom:$[0],left:$[0]};if($.length===2)return{top:$[0],right:$[1],bottom:$[0],left:$[1]};if($.length===3)return{top:$[0],right:$[1],bottom:$[2],left:$[1]};return{top:$[0],right:$[1],bottom:$[2],left:$[3]}}getPlacementCandidates(Q,$,J){const Z={top:"bottom",bottom:"top",left:"right",right:"left",center:"center"};if(J){const _=J==="left"||J==="right"?["top","bottom"]:["left","right"];return[{v:Q,h:$,s:J},{v:Q,h:$,s:Z[J]},{v:Q,h:$,s:_[0]},{v:Q,h:$,s:_[1]}]}if(Q==="center")return[{v:"center",h:$,s:null},{v:"center",h:Z[$],s:null},{v:"top",h:$,s:null},{v:"bottom",h:$,s:null},{v:"top",h:Z[$],s:null},{v:"bottom",h:Z[$],s:null}];if($==="center")return[{v:Q,h:"center",s:null},{v:Z[Q],h:"center",s:null},{v:Q,h:"left",s:null},{v:Q,h:"right",s:null},{v:Z[Q],h:"left",s:null},{v:Z[Q],h:"right",s:null}];return[{v:Q,h:$,s:null},{v:Z[Q],h:$,s:null},{v:Q,h:Z[$],s:null},{v:Z[Q],h:Z[$],s:null}]}computeCoords(Q,$,J,Z,j,_){let q,K;if(_==="left"||_==="right")return K=_==="left"?Q.left-$.width-j.xPx:Q.right+j.xPx,q=Q.top,{top:q,left:K};if(_==="top"||_==="bottom")return q=_==="top"?Q.top-$.height-j.yPx:Q.bottom+j.yPx,K=Q.left,{top:q,left:K};if(J==="top")q=Q.top-$.height-j.yPx;else if(J==="bottom")q=Q.bottom+j.yPx;else q=Q.top+(Q.height-$.height)/2;if(J==="center")if(Z==="left")K=Q.left-$.width-j.xPx;else if(Z==="right")K=Q.right+j.xPx;else K=Q.left+(Q.width-$.width)/2;else if(Z==="left")K=Q.left+j.xPx;else if(Z==="right")K=Q.right-$.width-j.xPx;else K=Q.left+(Q.width-$.width)/2;return{top:q,left:K}}oppositeSide(Q){return{top:"bottom",bottom:"top",left:"right",right:"left"}[Q]||"bottom"}getPlacementSide(Q,$,J){if(J==="top")return"top";if(J==="bottom")return"bottom";if(J==="left")return"left";if(J==="right")return"right";if(Q!=="center")return Q;if($!=="center")return $;return"top"}updatePopoverBeak(Q,$,J,Z,j){if(this.getAttribute("variant")!=="popover"||!Q){this.style.removeProperty("--beak-offset"),this.removeAttribute("data-beak-side");return}const _=this.oppositeSide(j);this.setAttribute("data-beak-side",_);const q=Q.left+Q.width/2,K=Q.top+Q.height/2,X=this.getBoundingClientRect(),Y=X.width>0&&X.height>0?X:$,W=Y.left,N=Y.top,U=10;let z;if(_==="top"||_==="bottom"){z=q-W;const O=U,L=Math.max(O,Y.width-U);z=Math.min(L,Math.max(O,z))}else{z=K-N;const O=U,L=Math.max(O,Y.height-U);z=Math.min(L,Math.max(O,z))}this.style.setProperty("--beak-offset",`${z}px`)}overflowScore(Q,$,J){const{innerWidth:Z,innerHeight:j}=window,_=Q.left+$.width,q=Q.top+$.height,K=Math.max(0,J.left-Q.left),X=Math.max(0,J.top-Q.top),Y=Math.max(0,_-(Z-J.right)),W=Math.max(0,q-(j-J.bottom));return K+X+Y+W}fits(Q,$,J){return this.overflowScore(Q,$,J)===0}clamp(Q,$,J){const{left:Z,top:j}=J,_=Math.max(J.left,window.innerWidth-$.width-J.right),q=Math.max(J.top,window.innerHeight-$.height-J.bottom);return{left:Math.min(_,Math.max(Z,Q.left)),top:Math.min(q,Math.max(j,Q.top))}}positionPopup(){if(!this.open||!super.open)return;const Q=this.getBoundingClientRect(),$=this.parseOffset(),{vertical:J,horizontal:Z,shorthand:j}=this.parsePosition(),_=this.resolveAnchor(),q=this.parseViewportMargins();if(!_){this.updatePopoverBeak(null,Q,0,0,"top");const z={left:q.left+(window.innerWidth-q.right-q.left-Q.width)/2,top:q.top+(window.innerHeight-q.bottom-q.top-Q.height)/2},O=this.clamp(z,Q,q);this.style.left=`${O.left}px`,this.style.top=`${O.top}px`;return}const K=_.getBoundingClientRect(),X=this.getPlacementCandidates(J,Z,j);let Y=null,W="top",N=Number.POSITIVE_INFINITY;for(let{v:z,h:O,s:L}of X){const B=this.computeCoords(K,Q,z,O,$,L),M=this.getPlacementSide(z,O,L);if(L){const F=this.clamp(B,Q,q);if(L==="left"||L==="right"?B.left>=q.left&&B.left+Q.width<=window.innerWidth-q.right:B.top>=q.top&&B.top+Q.height<=window.innerHeight-q.bottom){this.style.left=`${F.left}px`,this.style.top=`${F.top}px`,this.updatePopoverBeak(K,Q,F.left,F.top,M);return}const k=this.overflowScore(B,Q,q);if(k<N)N=k,Y=F,W=M}else{if(this.fits(B,Q,q)){this.style.left=`${B.left}px`,this.style.top=`${B.top}px`,this.updatePopoverBeak(K,Q,B.left,B.top,M);return}const F=this.overflowScore(B,Q,q);if(F<N)N=F,Y=B,W=M}}const U=this.clamp(Y||{left:0,top:0},Q,q);this.style.left=`${U.left}px`,this.style.top=`${U.top}px`,this.updatePopoverBeak(K,Q,U.left,U.top,W)}queueReposition(){if(!this.open||!this.shouldAutoReposition())return;if(this._rafId!==null)return;this._rafId=requestAnimationFrame(()=>{this._rafId=null,this.positionPopup()})}shouldAutoReposition(){if(!(this.drag&&this._wasDragged))return!0;return!this.resolveAnchor()}}n("fig-popup",L0,{extends:"dialog"});class G0 extends HTMLElement{#$;#Q;constructor(){super();this.content=null,this.#$=!1,this.#Q=this.handleClick.bind(this)}connectedCallback(){this.setAttribute("label",this.innerText),this.setAttribute("role","tab"),this.setAttribute("tabindex","0"),this.addEventListener("click",this.#Q),requestAnimationFrame(()=>{if(typeof this.getAttribute("content")==="string"){if(this.content=document.querySelector(this.getAttribute("content")),this.content)if(this.content.setAttribute("role","tabpanel"),this.#$)this.content.style.display="block",this.setAttribute("aria-selected","true");else this.content.style.display="none",this.setAttribute("aria-selected","false")}})}get selected(){return this.#$}set selected(Q){this.setAttribute("selected",Q?"true":"false")}disconnectedCallback(){this.removeEventListener("click",this.#Q)}handleClick(){if(this.selected=!0,this.content)this.content.style.display="block"}static get observedAttributes(){return["selected"]}attributeChangedCallback(Q,$,J){if(Q==="selected"){if(this.#$=J!==null&&J!=="false",this.setAttribute("aria-selected",this.#$?"true":"false"),this?.content)this.content.style.display=this.#$?"block":"none"}}}customElements.define("fig-tab",G0);class B0 extends HTMLElement{#$;#Q;constructor(){super();this.#$=this.handleClick.bind(this),this.#Q=this.#j.bind(this)}static get observedAttributes(){return["value","name","disabled"]}connectedCallback(){this.name=this.getAttribute("name")||"tabs",this.setAttribute("role","tablist"),this.addEventListener("click",this.#$),this.addEventListener("keydown",this.#Q),requestAnimationFrame(()=>{const Q=this.getAttribute("value");if(Q)this.#_(Q);if(this.hasAttribute("disabled"))this.#J(!0)})}#J(Q){this.querySelectorAll("fig-tab").forEach((J)=>{if(Q)J.setAttribute("disabled",""),J.setAttribute("aria-disabled","true"),J.setAttribute("tabindex","-1");else J.removeAttribute("disabled"),J.removeAttribute("aria-disabled"),J.setAttribute("tabindex","0")})}disconnectedCallback(){this.removeEventListener("click",this.#$),this.removeEventListener("keydown",this.#Q)}#j(Q){const $=Array.from(this.querySelectorAll("fig-tab")),J=$.findIndex((j)=>j.hasAttribute("selected"));let Z=J;switch(Q.key){case"ArrowLeft":case"ArrowUp":Q.preventDefault(),Z=J>0?J-1:$.length-1;break;case"ArrowRight":case"ArrowDown":Q.preventDefault(),Z=J<$.length-1?J+1:0;break;case"Home":Q.preventDefault(),Z=0;break;case"End":Q.preventDefault(),Z=$.length-1;break;default:return}if(Z!==J&&$[Z])$.forEach((j)=>j.removeAttribute("selected")),this.selectedTab=$[Z],this.setAttribute("value",$[Z].getAttribute("value")||""),$[Z].focus()}get value(){return this.selectedTab?.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q)}#_(Q){const $=this.querySelectorAll("fig-tab");for(let J of $)if(J.getAttribute("value")===Q)this.selectedTab=J,J.setAttribute("selected","true");else J.removeAttribute("selected")}attributeChangedCallback(Q,$,J){switch(Q){case"value":if(J!==$)this.#_(J);break;case"disabled":this.#J(J!==null&&J!=="false");break}}handleClick(Q){if(this.hasAttribute("disabled"))return;const $=Q.target;if($.nodeName.toLowerCase()==="fig-tab"){const J=this.querySelectorAll("fig-tab");for(let Z of J)if(Z===$)this.selectedTab=Z,Z.setAttribute("selected","true"),this.setAttribute("value",Z.getAttribute("value")||"");else Z.removeAttribute("selected")}}}customElements.define("fig-tabs",B0);class O0 extends HTMLElement{#$;#Q;#J;constructor(){super();this.#J=this.handleClick.bind(this)}connectedCallback(){this.addEventListener("click",this.#J)}disconnectedCallback(){this.removeEventListener("click",this.#J)}handleClick(){const Q=this.closest("fig-segmented-control");if(Q&&Q.hasAttribute("disabled")&&Q.getAttribute("disabled")!=="false")return;this.setAttribute("selected","true")}get value(){return this.#$}set value(Q){this.#$=Q,this.setAttribute("value",Q)}get selected(){return this.#Q}set selected(Q){this.#Q=Q,this.setAttribute("selected",Q)}static get observedAttributes(){return["selected","value"]}attributeChangedCallback(Q,$,J){switch(Q){case"value":this.#$=J;break;case"selected":this.#Q=J;break}}}customElements.define("fig-segment",O0);class M0 extends HTMLElement{#$=null;#Q=this.handleClick.bind(this);#J=null;#j=null;#_=0;#Z=!1;#K=!1;constructor(){super()}static get observedAttributes(){return["disabled","value","animated","sizing"]}connectedCallback(){this.name=this.getAttribute("name")||"segmented-control",this.addEventListener("click",this.#Q),this.#R(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),this.#M(),this.#L(),requestAnimationFrame(()=>{this.#O({enforceFallback:!0}),this.#G(),this.#N({forceInstant:!0})})}disconnectedCallback(){if(this.removeEventListener("click",this.#Q),this.#J?.disconnect(),this.#J=null,this.#j?.disconnect(),this.#j=null,this.#_)cancelAnimationFrame(this.#_),this.#_=0;this.#Z=!1,this.#K=!1}get selectedSegment(){return this.#$}set selectedSegment(Q){const $=this.querySelectorAll("fig-segment");for(let J of $){const Z=J===Q,j=J.hasAttribute("selected");if(Z&&!j)J.setAttribute("selected","true");else if(!Z&&j)J.removeAttribute("selected")}this.#$=Q instanceof HTMLElement&&this.contains(Q)?Q:null,this.#N()}get value(){return this.getAttribute("value")||""}set value(Q){if(Q===null||Q===void 0){this.removeAttribute("value");return}this.setAttribute("value",String(Q))}#X(Q){this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#q(Q){const $=Q.getAttribute("value");if($!==null){const J=$.trim();if(J.length>0)return J}return Q.textContent?.trim()||""}#W(){const Q=this.querySelectorAll("fig-segment");for(let $ of Q)if($.hasAttribute("selected"))return $;return null}#Y(Q){const $=String(Q??"").trim();if(!$)return!1;const J=this.querySelectorAll("fig-segment");for(let Z of J){const j=this.#q(Z);if(!j)continue;if(j===$)return this.selectedSegment=Z,!0}return!1}#U(){const Q=this.getAttribute("animated");if(Q===null)return!1;if(Q==="")return!0;return Q.trim().toLowerCase()==="true"}#N({forceInstant:Q=!1}={}){if(this.#Z=this.#Z||Q,this.#_)return;this.#_=requestAnimationFrame(()=>{this.#_=0;const $=this.#Z;this.#Z=!1,this.#B({forceInstant:$})})}#B({forceInstant:Q=!1}={}){const $=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.#U(),Z=this.#$&&this.contains(this.#$)?this.#$:this.#W();if($||!J){if(this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready"),!J||$)this.#K=!1;return}if(!Z){if(this.#K)return;this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready");return}const j=this.getBoundingClientRect(),_=Z.getBoundingClientRect();if(j.width<=0||_.width<=0){if(this.#K)return;this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready");return}const q=Math.max(0,_.left-j.left);this.style.setProperty("--seg-indicator-x",`${q}px`),this.style.setProperty("--seg-indicator-w",`${_.width}px`),this.style.setProperty("--seg-indicator-opacity","1"),this.style.setProperty("--seg-indicator-transition-duration",!this.#K||Q?"0ms":"150ms"),this.setAttribute("data-indicator-ready","true"),this.#K=!0}#L(){this.#j?.disconnect(),this.#j=new ResizeObserver(()=>{this.#N()}),this.#G()}#G(){if(!this.#j)return;this.#j.disconnect(),this.#j.observe(this),this.querySelectorAll("fig-segment").forEach((Q)=>{this.#j?.observe(Q)})}#O({enforceFallback:Q=!1}={}){const $=this.querySelectorAll("fig-segment");if($.length===0){this.#$=null,this.#N({forceInstant:!0});return}const J=this.getAttribute("value"),Z=J?.trim()??"";if(J!==null){if(Z!==J){this.setAttribute("value",Z);return}if(Z&&this.#Y(Z))return}const j=this.#W();if(j){this.selectedSegment=j;return}if(Q)this.selectedSegment=$[0]}#M(){this.#J?.disconnect(),this.#J=new MutationObserver((Q)=>{let $=!1;for(let J of Q){if(J.type==="childList"){$=!0;break}if(J.type==="attributes"&&J.target instanceof HTMLElement&&J.target.tagName.toLowerCase()==="fig-segment"&&(J.attributeName==="value"||J.attributeName==="selected")){$=!0;break}if(J.type==="characterData"){$=!0;break}}if($)this.#R(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),this.#G(),this.#O({enforceFallback:!0})}),this.#J.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","selected"]})}handleClick(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=Q.target.closest("fig-segment");if(!$||!this.contains($))return;const J=this.selectedSegment,Z=this.value;this.selectedSegment=$;const j=this.#q($);if(j)this.setAttribute("value",j);else this.removeAttribute("value");const _=this.value;if(J!==$||Z!==_)this.#X(_)}#R(Q){this.setAttribute("aria-disabled",Q?"true":"false"),this.querySelectorAll("fig-segment").forEach(($)=>{if(Q)$.setAttribute("disabled",""),$.setAttribute("aria-disabled","true");else $.removeAttribute("disabled"),$.removeAttribute("aria-disabled")})}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="disabled"){this.#R(J!==null&&J!=="false"),this.#N({forceInstant:!0});return}if(Q==="value"){this.#O({enforceFallback:!1});return}if(Q==="animated"){if(!this.#U())this.#K=!1;this.#N({forceInstant:!0});return}if(Q==="sizing")this.#N({forceInstant:!0})}}customElements.define("fig-segmented-control",M0);class z0 extends HTMLElement{#$=!1;#Q=!1;#J={range:{min:0,max:100,step:1},hue:{min:0,max:255,step:1},delta:{min:-100,max:100,step:1},stepper:{min:0,max:100,step:25},opacity:{min:0,max:100,step:0.1,color:"#FF0000"}};#j;#_;#Z;#K;constructor(){super();this.initialInnerHTML=this.innerHTML,this.#j=(Q)=>{Q.stopPropagation(),this.#M()},this.#_=(Q)=>{Q.stopPropagation(),this.#R()},this.#Z=(Q)=>{Q.stopPropagation(),this.#q()},this.#K=(Q)=>{Q.stopPropagation(),this.#z()}}#X(){const Q=this.getAttribute("value");this.type=this.getAttribute("type")||"range",this.variant=this.getAttribute("variant")||"default",this.text=this.hasAttribute("text")&&this.getAttribute("text")!=="false",this.units=this.getAttribute("units")||"",this.transform=Number(this.getAttribute("transform")||1),this.disabled=this.getAttribute("disabled")?!0:!1,this.precision=this.hasAttribute("precision")?Number(this.getAttribute("precision")):null,this.placeholder=this.getAttribute("placeholder")!==null?this.getAttribute("placeholder"):"##";const $=this.#J[this.type];if(this.min=Number(this.getAttribute("min")||$.min),this.max=Number(this.getAttribute("max")||$.max),this.step=Number(this.getAttribute("step")||$.step),this.color=this.getAttribute("color")||$?.color,this.default=this.hasAttribute("default")?this.getAttribute("default"):this.type==="delta"?0:this.min,this.#Q=Q===null||typeof Q==="string"&&Q.trim()==="",this.value=this.#L(Q),this.color)this.style.setProperty("--color",this.color);let J="",Z=`<div class="fig-slider-input-container" role="group">
+            `,this.#$=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false",requestAnimationFrame(()=>{this.button=this.shadowRoot.querySelector("button"),this.button.addEventListener("click",this.#Q.bind(this)),this.button.addEventListener("focus",()=>{if(this.button.matches(":focus-visible"))this.setAttribute("data-focus-visible","")}),this.button.addEventListener("blur",()=>{this.removeAttribute("data-focus-visible")})})}get type(){return this.getAttribute("type")||"button"}set type(Q){this.setAttribute("type",Q)}get selected(){return this.#$}set selected(Q){this.setAttribute("selected",Q)}#Q(){if(this.type==="toggle")this.toggleAttribute("selected",!this.hasAttribute("selected"));if(this.type==="submit"){let Q=this.closest("form");if(Q)Q.submit()}if(this.type==="link"){const Q=this.getAttribute("href"),$=this.getAttribute("target");if(Q)if($)window.open(Q,$);else window.location.href=Q}}static get observedAttributes(){return["disabled","selected"]}attributeChangedCallback(Q,$,J){if(this.button)switch(this.button[Q]=J,Q){case"disabled":this.disabled=this.button.disabled=J!==null&&J!=="false";break;case"type":this.type=J,this.button.type=this.type,this.button.setAttribute("type",this.type);break;case"selected":this.#$=J==="true";break}}}customElements.define("fig-button",M0);class z0 extends HTMLElement{#$="Menu";#Q=null;#J;#j;#q=!1;#Z=null;get label(){return this.#$}set label(Q){this.#$=Q}#_;constructor(){super();this.select=document.createElement("select"),this.optionsSlot=document.createElement("slot"),this.attachShadow({mode:"open"}),this.#J=this.#L.bind(this),this.#j=this.#G.bind(this),this.#_=this.slotChange.bind(this)}#X(){if(typeof CSS==="undefined"||typeof CSS.supports!=="function")return!1;try{return CSS.supports("appearance: base-select")&&CSS.supports("selector(::picker(select))")}catch{return!1}}#K(){if(!(this.getAttribute("experimental")||"").split(/\s+/).filter(Boolean).includes("modern")||!this.#X()){this.#q=!1;return}const J=document.createElement("button");J.setAttribute("type","button"),J.setAttribute("aria-hidden","true");const Z=document.createElement("selectedcontent");J.appendChild(Z),this.select.appendChild(J),this.#q=!0,this.#Z=Z}#Y(){if(!this.#Z)return;const Q=this.select.selectedOptions?.[0];if(!Q){this.#Z.textContent="";return}this.#Z.innerHTML=Q.innerHTML}#N(){this.select.addEventListener("input",this.#J),this.select.addEventListener("change",this.#j)}#U(Q){if(!Q||!(Q instanceof Element))return!1;return!!Q.querySelector('fig-checkbox, fig-switch, input[type="checkbox"]')}#W(){if(typeof this.select.showPicker==="function")requestAnimationFrame(()=>{try{this.select.showPicker()}catch{}})}connectedCallback(){this.type=this.getAttribute("type")||"select",this.#$=this.getAttribute("label")||this.#$,this.select.setAttribute("aria-label",this.#$),this.appendChild(this.select),this.shadowRoot.appendChild(this.optionsSlot),this.optionsSlot.addEventListener("slotchange",this.#_),this.#N()}slotChange(){while(this.select.firstChild)this.select.firstChild.remove();if(this.#K(),this.type==="dropdown"){const Q=document.createElement("option");Q.setAttribute("hidden","true"),Q.setAttribute("selected","true"),Q.selected=!0,this.select.appendChild(Q)}if(this.optionsSlot.assignedNodes().forEach((Q)=>{if(Q.nodeName==="OPTION"||Q.nodeName==="OPTGROUP")this.select.appendChild(Q.cloneNode(!0))}),this.#B(this.value),this.#Y(),this.type==="dropdown")this.select.selectedIndex=-1}#L(Q){const $=Q.target.selectedOptions?.[0];if(this.#U($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#W();return}const J=Q.target.value;if(this.type==="dropdown")this.#Q=J;this.setAttribute("value",J),this.#Y(),this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0}))}#G(Q){const $=Q.target.selectedOptions?.[0];if(this.#U($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#W();return}const J=this.type==="dropdown"?this.#Q:this.select.value;if(this.type==="dropdown")this.select.selectedIndex=-1;this.#Y(),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}focus(){this.select.focus()}blur(){this.select.blur()}get value(){if(this.type==="dropdown")return this.#Q;return this.select?.value}set value(Q){if(this.type==="dropdown")this.#Q=Q;this.setAttribute("value",Q)}static get observedAttributes(){return["value","type","experimental"]}#B(Q){if(this.type==="dropdown")return;if(this.select)this.select.querySelectorAll("option").forEach(($,J)=>{if($.value===this.getAttribute("value"))this.select.selectedIndex=J});this.#Y()}attributeChangedCallback(Q,$,J){if(Q==="value")this.#B(J);if(Q==="type")this.type=J;if(Q==="experimental")this.slotChange();if(Q==="label")this.#$=J,this.select.setAttribute("aria-label",this.#$)}disconnectedCallback(){this.optionsSlot.removeEventListener("slotchange",this.#_),this.select.removeEventListener("input",this.#J),this.select.removeEventListener("change",this.#j)}}customElements.define("fig-dropdown",z0);class c extends HTMLElement{static#$=0;static#Q=500;#J;#j;#q;#Z;#_;#X;#K;#Y;#N;#U=!1;#W=null;#L=null;constructor(){super();this.action=this.getAttribute("action")||"hover";let Q=parseInt(this.getAttribute("delay"));this.delay=!isNaN(Q)?Q:500,this.#J=this.#F.bind(this),this.#j=this.hidePopupOutsideClick.bind(this),this.#q=this.showDelayedPopup.bind(this),this.#Z=this.#E.bind(this),this.#_=this.#z.bind(this),this.#X=this.#A.bind(this),this.#K=this.#R.bind(this),this.#Y=this.#H.bind(this)}connectedCallback(){this.setup(),this.setupEventListeners()}disconnectedCallback(){if(this.destroy(),document.removeEventListener("mousedown",this.#J,!0),this.#M(),this.action==="click")document.body.removeEventListener("click",this.#j);if(clearTimeout(this.#N),this.action==="hover")this.removeEventListener("pointerenter",this.#q),this.removeEventListener("pointerleave",this.#Z),this.removeEventListener("touchstart",this.#_),this.removeEventListener("touchmove",this.#X),this.removeEventListener("touchend",this.#K),this.removeEventListener("touchcancel",this.#Y);else if(this.action==="click")this.removeEventListener("click",this.#q),this.removeEventListener("touchstart",this.#q)}setup(){this.style.display="contents"}render(){this.destroy();let Q=document.createElement("span");this.popup=document.createElement("span"),this.popup.setAttribute("class","fig-tooltip"),this.popup.setAttribute("role","tooltip");const $=s();this.popup.setAttribute("id",$),this.popup.style.position="fixed",this.popup.style.visibility="hidden",this.popup.style.display="inline-flex",this.popup.style.pointerEvents="none";const J=this.getAttribute("theme");if(J)this.popup.setAttribute("theme",J);const Z=this.getAttribute("pointer");if(Z!==null)this.popup.setAttribute("pointer",Z);if(this.popup.append(Q),Q.innerText=this.getAttribute("text"),this.firstElementChild)this.firstElementChild.setAttribute("aria-describedby",$);const j=this.closest("dialog");if(j&&j.open)j.append(this.popup);else document.body.append(this.popup);const q=Q.childNodes[0];if(q){const K=document.createRange();K.setStartBefore(q),K.setEndAfter(q);const _=K.getBoundingClientRect();Q.style.width=`${_.width}px`}}destroy(){if(this.#M(),this.popup)this.popup.remove(),this.popup=null;if(this.action==="click")document.body.removeEventListener("click",this.#j)}isTouchDevice(){return"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0}setupEventListeners(){if(this.action==="manual")return;if(this.action==="hover"){if(!this.isTouchDevice())this.addEventListener("pointerenter",this.#q),this.addEventListener("pointerleave",this.#Z);this.addEventListener("touchstart",this.#_,{passive:!0}),this.addEventListener("touchmove",this.#X,{passive:!0}),this.addEventListener("touchend",this.#K,{passive:!0}),this.addEventListener("touchcancel",this.#Y,{passive:!0})}else if(this.action==="click")this.addEventListener("click",this.#q),document.body.addEventListener("click",this.#j),this.addEventListener("touchstart",this.#q,{passive:!0});document.addEventListener("mousedown",this.#J,!0)}getOffset(){const Q={left:8,top:4,right:8,bottom:4},$=this.getAttribute("offset");if(!$)return Q;const[J,Z,j,q]=$.split(",").map(Number);return{left:isNaN(J)?Q.left:J,top:isNaN(Z)?Q.top:Z,right:isNaN(j)?Q.right:j,bottom:isNaN(q)?Q.bottom:q}}get#G(){return this.hasAttribute("show")&&this.getAttribute("show")!=="false"}showDelayedPopup(){if(this.#G)return;this.render(),clearTimeout(this.timeout);const $=Date.now()-c.#$<c.#Q?0:this.delay;this.timeout=setTimeout(this.showPopup.bind(this),$)}showPopup(){if(!this.popup)this.render();this.popup.style.display="block",this.popup.style.visibility="hidden",this.#B(),this.popup.style.opacity="1",this.popup.style.visibility="visible",this.popup.style.pointerEvents="all",this.popup.style.zIndex=B0()+1,this.isOpen=!0,c.#$=Date.now(),this.#O()}#B(){if(!this.popup||!this.firstElementChild)return;const Q=this.firstElementChild.getBoundingClientRect(),$=this.popup.getBoundingClientRect(),J=this.getOffset(),Z=this.popup.parentElement,j=Z&&Z!==document.body?Z.getBoundingClientRect():{left:0,top:0};let q=Q.top-$.height-J.top-j.top,K=Q.left+(Q.width-$.width)/2-j.left;if(this.popup.setAttribute("position","top"),q+j.top<0)this.popup.setAttribute("position","bottom"),q=Q.bottom+J.bottom-j.top;const _=K+j.left;if(_<J.left)K=J.left-j.left;else if(_+$.width>window.innerWidth-J.right)K=window.innerWidth-$.width-J.right-j.left;const Y=Q.left-j.left+Q.width/2-K;this.popup.style.setProperty("--beak-offset",`${Y}px`),this.popup.style.top=`${q}px`,this.popup.style.left=`${K}px`}hidePopup(){if(this.#G)return;if(clearTimeout(this.timeout),clearTimeout(this.#N),this.#M(),this.popup)this.popup.style.opacity="0",this.popup.style.display="block",this.popup.style.pointerEvents="none",this.destroy();this.isOpen=!1,c.#$=Date.now()}#O(){this.#M();const Q=this.firstElementChild;if(!Q)return;this.#W=new MutationObserver(()=>{if(this.#L)cancelAnimationFrame(this.#L);this.#L=requestAnimationFrame(()=>{this.#B()})}),this.#W.observe(Q,{attributes:!0,attributeFilter:["style","class","transform"]})}#M(){if(this.#L)cancelAnimationFrame(this.#L),this.#L=null;if(this.#W)this.#W.disconnect(),this.#W=null}hidePopupOutsideClick(Q){if(this.isOpen&&!this.popup.contains(Q.target))this.hidePopup()}#E(Q){if(!this.#U)this.hidePopup()}#z(Q){if(this.action==="hover")this.#U=!0,clearTimeout(this.#N),this.showDelayedPopup()}#A(Q){if(this.action==="hover"&&this.#U)clearTimeout(this.#N),this.#N=setTimeout(()=>{this.#U=!1,this.hidePopup()},150)}#R(Q){if(this.action==="hover"&&this.#U)clearTimeout(this.#N),this.#N=setTimeout(()=>{this.#U=!1,this.hidePopup()},300)}#H(Q){if(this.action==="hover"&&this.#U)this.#U=!1,clearTimeout(this.#N),this.hidePopup()}static get observedAttributes(){return["action","delay","open","pointer","show","text","theme"]}get text(){return this.getAttribute("text")??""}set text(Q){this.setAttribute("text",Q)}#k(Q){if(!this.popup)return;const $=this.popup.firstElementChild??this.popup.firstChild;if(!$)return;$.innerText=Q,$.style.width="";const J=$.childNodes[0];if(J){const Z=document.createRange();Z.setStartBefore(J),Z.setEndAfter(J),$.style.width=`${Z.getBoundingClientRect().width}px`}if(this.isOpen)this.#B()}get open(){return this.hasAttribute("open")&&this.getAttribute("open")==="true"}set open(Q){this.setAttribute("open",Q)}attributeChangedCallback(Q,$,J){if(Q==="action")this.action=J;if(Q==="delay"){let Z=parseInt(J);this.delay=!isNaN(Z)?Z:500}if(Q==="open")if(J==="true")requestAnimationFrame(()=>{this.showDelayedPopup()});else requestAnimationFrame(()=>{this.hidePopup()});if(Q==="show")if(J!==null&&J!=="false")this.showPopup();else this.hidePopup();if(Q==="text")this.#k(J??"");if(Q==="pointer"){if(this.popup)if(J!==null)this.popup.setAttribute("pointer",J);else this.popup.removeAttribute("pointer")}if(Q==="theme"){if(this.popup)if(J)this.popup.setAttribute("theme",J);else this.popup.removeAttribute("theme")}}#F(Q){if(!this.isOpen)return;const $=Q.target;if(this.popup&&this.popup.contains($))return;if($.tagName==="SELECT"||$.hasAttribute("popover")||$.closest("dialog"))this.hidePopup()}}customElements.define("fig-tooltip",c);class E0 extends HTMLDialogElement{#$=!1;#Q=!1;#J={x:0,y:0};#j={x:0,y:0};#q;#Z;#_;#X;#K=16;#Y=!1;#N=3;constructor(){super();this.#q=this.#O.bind(this),this.#Z=this.#M.bind(this),this.#_=this.#E.bind(this),this.#X=this.close.bind(this)}connectedCallback(){this.modal=this.hasAttribute("modal")&&this.getAttribute("modal")!=="false",this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",requestAnimationFrame(()=>{this.#U(),this.#L(),this.#W()})}disconnectedCallback(){this.#G(),this.querySelectorAll("fig-button[close-dialog]").forEach((Q)=>{Q.removeEventListener("click",this.#X)})}#U(){this.querySelectorAll("fig-button[close-dialog]").forEach((Q)=>{Q.removeEventListener("click",this.#X),Q.addEventListener("click",this.#X)})}#W(){const Q=this.getAttribute("position")||"";this.style.position="fixed",this.style.transform="none",this.style.top="auto",this.style.bottom="auto",this.style.left="auto",this.style.right="auto",this.style.margin="0";const $=Q.includes("top"),J=Q.includes("bottom"),Z=Q.includes("left"),j=Q.includes("right"),q=Q.includes("center")&&!$&&!J,K=Q.includes("center")&&!Z&&!j;if($)this.style.top=`${this.#K}px`;else if(J)this.style.bottom=`${this.#K}px`;else if(q)this.style.top="0",this.style.bottom="0";if(Z)this.style.left=`${this.#K}px`;else if(j)this.style.right=`${this.#K}px`;else if(K)this.style.left="0",this.style.right="0";if(q&&K)this.style.margin="auto";else if(q)this.style.marginTop="auto",this.style.marginBottom="auto";else if(K)this.style.marginLeft="auto",this.style.marginRight="auto";this.#Y=!0}#L(){if(this.drag){this.addEventListener("pointerdown",this.#q);const Q=this.getAttribute("handle"),$=Q?this.querySelector(Q):this.querySelector("fig-header, header");if($)$.style.cursor="grab"}}#G(){this.removeEventListener("pointerdown",this.#q),document.removeEventListener("pointermove",this.#Z),document.removeEventListener("pointerup",this.#_)}#B(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],J=["FIG-HEADER","FIG-DIALOG","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],Z=(q)=>$.some((K)=>q.matches?.(K))||q.tagName?.startsWith("FIG-")&&!J.includes(q.tagName);if(Z(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(Z(j))return!0;j=j.parentElement}return!1}#O(Q){if(!this.drag)return;if(this.#B(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const Z=this.querySelector($);if(!Z||!Z.contains(Q.target))return}this.#Q=!0,this.#J.x=Q.clientX,this.#J.y=Q.clientY;const J=this.getBoundingClientRect();this.#j.x=Q.clientX-J.left,this.#j.y=Q.clientY-J.top,document.addEventListener("pointermove",this.#Z),document.addEventListener("pointerup",this.#_)}#M(Q){if(this.#Q&&!this.#$){const $=Math.abs(Q.clientX-this.#J.x),J=Math.abs(Q.clientY-this.#J.y);if($>this.#N||J>this.#N){this.#$=!0,this.#Q=!1,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const Z=this.getBoundingClientRect();this.style.top=`${Z.top}px`,this.style.left=`${Z.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this.#$)return;this.style.left=`${Q.clientX-this.#j.x}px`,this.style.top=`${Q.clientY-this.#j.y}px`,Q.preventDefault()}#E(Q){if(this.#$)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this.#$=!1,this.#Q=!1,document.removeEventListener("pointermove",this.#Z),document.removeEventListener("pointerup",this.#_),Q.preventDefault()}static get observedAttributes(){return["modal","drag","position","handle"]}attributeChangedCallback(Q,$,J){if(Q==="drag")if(this.drag=J!==null&&J!=="false",this.drag)this.#L();else{this.#G();const Z=this.querySelector("fig-header, header");if(Z)Z.style.cursor=""}if(Q==="position"&&this.#Y)this.#W()}}q0("fig-dialog",E0,{extends:"dialog"});class F0 extends HTMLDialogElement{_anchorObserver=null;_contentObserver=null;_mutationObserver=null;_anchorTrackRAF=null;_lastAnchorRect=null;_isPopupActive=!1;_boundReposition;_boundScroll;_boundOutsidePointerDown;_rafId=null;_anchorRef=null;_isDragging=!1;_dragPending=!1;_dragStartPos={x:0,y:0};_dragOffset={x:0,y:0};_dragThreshold=3;_boundPointerDown;_boundPointerMove;_boundPointerUp;_wasDragged=!1;constructor(){super();this._boundReposition=this.queueReposition.bind(this),this._boundScroll=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.shouldAutoReposition())this.queueReposition()},this._boundOutsidePointerDown=this.handleOutsidePointerDown.bind(this),this._boundPointerDown=this.handlePointerDown.bind(this),this._boundPointerMove=this.handlePointerMove.bind(this),this._boundPointerUp=this.handlePointerUp.bind(this)}ensureInitialized(){if(typeof this._anchorObserver==="undefined")this._anchorObserver=null;if(typeof this._contentObserver==="undefined")this._contentObserver=null;if(typeof this._mutationObserver==="undefined")this._mutationObserver=null;if(typeof this._anchorTrackRAF==="undefined")this._anchorTrackRAF=null;if(typeof this._lastAnchorRect==="undefined")this._lastAnchorRect=null;if(typeof this._isPopupActive==="undefined")this._isPopupActive=!1;if(typeof this._rafId==="undefined")this._rafId=null;if(typeof this._anchorRef==="undefined")this._anchorRef=null;if(typeof this._isDragging==="undefined")this._isDragging=!1;if(typeof this._dragPending==="undefined")this._dragPending=!1;if(typeof this._dragStartPos==="undefined")this._dragStartPos={x:0,y:0};if(typeof this._dragOffset==="undefined")this._dragOffset={x:0,y:0};if(typeof this._dragThreshold!=="number")this._dragThreshold=3;if(typeof this._wasDragged==="undefined")this._wasDragged=!1;if(typeof this._boundReposition!=="function")this._boundReposition=this.queueReposition.bind(this);if(typeof this._boundScroll!=="function")this._boundScroll=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.shouldAutoReposition())this.queueReposition()};if(typeof this._boundOutsidePointerDown!=="function")this._boundOutsidePointerDown=this.handleOutsidePointerDown.bind(this);if(typeof this._boundPointerDown!=="function")this._boundPointerDown=this.handlePointerDown.bind(this);if(typeof this._boundPointerMove!=="function")this._boundPointerMove=this.handlePointerMove.bind(this);if(typeof this._boundPointerUp!=="function")this._boundPointerUp=this.handlePointerUp.bind(this)}static get observedAttributes(){return["open","anchor","position","offset","variant","theme","drag","handle","autoresize","viewport-margin"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(Q){if(Q===!1||Q==="false"||Q===null){if(!this.open)return;this.removeAttribute("open");return}if(this.open)return;this.setAttribute("open","true")}get anchor(){return this._anchorRef??this.getAttribute("anchor")}set anchor(Q){if(Q instanceof Element)this._anchorRef=Q;else if(typeof Q==="string")this._anchorRef=null,this.setAttribute("anchor",Q);else this._anchorRef=null;if(this.open)this.queueReposition()}connectedCallback(){if(this.ensureInitialized(),!this.hasAttribute("position"))this.setAttribute("position","top center");if(!this.hasAttribute("role"))this.setAttribute("role","dialog");if(!this.hasAttribute("closedby"))this.setAttribute("closedby","any");if(this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",this.addEventListener("close",()=>{if(this.teardownObservers(),this.hasAttribute("open"))this.removeAttribute("open")}),requestAnimationFrame(()=>{this.setupDragListeners()}),this.open)this.showPopup();else this.hidePopup()}disconnectedCallback(){if(this.ensureInitialized(),this.teardownObservers(),this.removeDragListeners(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),this._rafId!==null)cancelAnimationFrame(this._rafId),this._rafId=null}attributeChangedCallback(Q,$,J){if(this.ensureInitialized(),$===J)return;if(Q==="open"){if(J===null||J==="false"){this.hidePopup();return}this.showPopup();return}if(Q==="drag"){if(this.drag=J!==null&&J!=="false",this.drag)this.setupDragListeners();else this.removeDragListeners();return}if(this.open)this.queueReposition(),this.setupObservers()}showPopup(){if(this._isPopupActive){this.queueReposition();return}if(this.style.position="fixed",this.style.inset="auto",this.style.margin="0",this.style.zIndex=String(B0()+1),!super.open)try{this.show()}catch($){}this.setupObservers(),document.addEventListener("pointerdown",this._boundOutsidePointerDown,!0),this._wasDragged=!1,this.queueReposition(),this._isPopupActive=!0;const Q=this.resolveAnchor();if(Q)Q.classList.add("has-popup-open")}hidePopup(){const Q=this.resolveAnchor();if(Q)Q.classList.remove("has-popup-open");if(this._isPopupActive=!1,this._wasDragged=!1,this.teardownObservers(),document.removeEventListener("pointerdown",this._boundOutsidePointerDown,!0),super.open)try{this.close()}catch($){}}get autoresize(){const Q=this.getAttribute("autoresize");return Q===null||Q!=="false"}set autoresize(Q){if(Q||Q==="")this.setAttribute("autoresize",Q===!0?"":Q);else this.removeAttribute("autoresize")}setupObservers(){this.teardownObservers();const Q=this.resolveAnchor();if(Q&&"ResizeObserver"in window)this._anchorObserver=new ResizeObserver(this._boundReposition),this._anchorObserver.observe(Q);if(this.autoresize){if("ResizeObserver"in window)this._contentObserver=new ResizeObserver(this._boundReposition),this._contentObserver.observe(this);this._mutationObserver=new MutationObserver(this._boundReposition),this._mutationObserver.observe(this,{childList:!0,subtree:!0,characterData:!0})}window.addEventListener("resize",this._boundReposition),window.addEventListener("scroll",this._boundScroll,{capture:!0,passive:!0}),this.startAnchorTracking()}teardownObservers(){if(this._anchorObserver)this._anchorObserver.disconnect(),this._anchorObserver=null;if(this._contentObserver)this._contentObserver.disconnect(),this._contentObserver=null;if(this._mutationObserver)this._mutationObserver.disconnect(),this._mutationObserver=null;window.removeEventListener("resize",this._boundReposition),window.removeEventListener("scroll",this._boundScroll,{capture:!0,passive:!0}),this.stopAnchorTracking()}readRectSnapshot(Q){if(!Q)return null;const $=Q.getBoundingClientRect();return{x:$.x,y:$.y,width:$.width,height:$.height}}hasRectChanged(Q,$,J=0.25){if(!Q&&!$)return!1;if(!Q||!$)return!0;return Math.abs(Q.x-$.x)>J||Math.abs(Q.y-$.y)>J||Math.abs(Q.width-$.width)>J||Math.abs(Q.height-$.height)>J}startAnchorTracking(){if(this.stopAnchorTracking(),!this.open)return;const Q=()=>{if(!this.open){this._anchorTrackRAF=null;return}const $=this.resolveAnchor(),J=this.readRectSnapshot($),Z=this.shouldAutoReposition();if(Z&&this.hasRectChanged(this._lastAnchorRect,J))this._lastAnchorRect=J,this.queueReposition();else if(!Z)this._lastAnchorRect=J;this._anchorTrackRAF=requestAnimationFrame(Q)};this._lastAnchorRect=this.readRectSnapshot(this.resolveAnchor()),this._anchorTrackRAF=requestAnimationFrame(Q)}stopAnchorTracking(){if(this._anchorTrackRAF!==null)cancelAnimationFrame(this._anchorTrackRAF),this._anchorTrackRAF=null;this._lastAnchorRect=null}handleOutsidePointerDown(Q){if(!this.open||!super.open)return;const $=this.getAttribute("closedby");if($==="none"||$==="closerequest")return;const J=Q.target;if(!(J instanceof Node))return;if(this.contains(J))return;const Z=this.resolveAnchor();if(Z&&Z.contains(J))return;if(this.isInsideDescendantPopup(J))return;this.open=!1}isInsideDescendantPopup(Q){const $=Q.closest?.('dialog[is="fig-popup"]');if(!$||$===this)return!1;let J=$;const Z=new Set;while(J&&!Z.has(J)){Z.add(J);const j=J.anchor;if(!(j instanceof Element))break;if(this.contains(j))return!0;J=j.closest?.('dialog[is="fig-popup"]')}return!1}setupDragListeners(){if(this.drag)this.addEventListener("pointerdown",this._boundPointerDown)}removeDragListeners(){this.removeEventListener("pointerdown",this._boundPointerDown),document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp)}isInteractiveElement(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],J=["FIG-HEADER","FIG-DIALOG","FIG-POPUP","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],Z=(q)=>$.some((K)=>q.matches?.(K))||q.tagName?.startsWith("FIG-")&&!J.includes(q.tagName);if(Z(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(Z(j))return!0;j=j.parentElement}return!1}handlePointerDown(Q){if(!this.drag)return;if(this.isInteractiveElement(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const Z=this.querySelector($);if(!Z||!Z.contains(Q.target))return}this._dragPending=!0,this._dragStartPos.x=Q.clientX,this._dragStartPos.y=Q.clientY;const J=this.getBoundingClientRect();this._dragOffset.x=Q.clientX-J.left,this._dragOffset.y=Q.clientY-J.top,document.addEventListener("pointermove",this._boundPointerMove),document.addEventListener("pointerup",this._boundPointerUp)}handlePointerMove(Q){if(this._dragPending&&!this._isDragging){const $=Math.abs(Q.clientX-this._dragStartPos.x),J=Math.abs(Q.clientY-this._dragStartPos.y);if($>this._dragThreshold||J>this._dragThreshold){this._isDragging=!0,this._dragPending=!1,this._wasDragged=!0,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const Z=this.getBoundingClientRect();this.style.top=`${Z.top}px`,this.style.left=`${Z.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this._isDragging)return;this.style.left=`${Q.clientX-this._dragOffset.x}px`,this.style.top=`${Q.clientY-this._dragOffset.y}px`,Q.preventDefault()}handlePointerUp(Q){if(this._isDragging)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this._isDragging=!1,this._dragPending=!1,document.removeEventListener("pointermove",this._boundPointerMove),document.removeEventListener("pointerup",this._boundPointerUp),Q.preventDefault()}resolveAnchor(){if(this._anchorRef)return this._anchorRef;const Q=this.getAttribute("anchor");if(!Q)return null;const $=this.parentElement;if($?.querySelector){const J=$.querySelector(Q);if(J&&!this.contains(J))return J}return document.querySelector(Q)}parsePosition(){const $=(this.getAttribute("position")||"top center").trim().toLowerCase().split(/\s+/).filter(Boolean),J=new Set(["top","center","bottom"]),Z=new Set(["left","center","right"]);let j="top",q="center",K=null;if($.length>=2){if(J.has($[0]))j=$[0];if(Z.has($[1]))q=$[1];return{vertical:j,horizontal:q,shorthand:K}}if($.length===1){const _=$[0];if(_==="top"||_==="bottom")j=_,K=_;else if(_==="left"||_==="right")q=_,K=_;else if(_==="center")j="center",q="center"}return{vertical:j,horizontal:q,shorthand:K}}normalizeOffsetToken(Q,$="0px"){if(!Q)return $;const J=Q.trim();if(!J)return $;if(/^-?\d+(\.\d+)?$/.test(J))return`${J}px`;return J}measureLengthPx(Q,$="x"){if(!Q)return 0;const J=this.normalizeOffsetToken(Q,"0px");if(J.endsWith("px")){const q=parseFloat(J);return Number.isFinite(q)?q:0}const Z=document.createElement("div");if(Z.style.position="fixed",Z.style.visibility="hidden",Z.style.pointerEvents="none",Z.style.left="0",Z.style.top="0",Z.style.margin="0",Z.style.padding="0",Z.style.border="0",$==="x")Z.style.width=J,Z.style.height="0";else Z.style.height=J,Z.style.width="0";document.body.appendChild(Z);const j=Z.getBoundingClientRect();return Z.remove(),$==="x"?j.width:j.height}parseOffset(){const $=(this.getAttribute("offset")||"0 0").trim().split(/\s+/).filter(Boolean),J=this.normalizeOffsetToken($[0],"0px"),Z=this.normalizeOffsetToken($[1],"0px");return{xToken:J,yToken:Z,xPx:this.measureLengthPx(J,"x"),yPx:this.measureLengthPx(Z,"y")}}parseViewportMargins(){const $=(this.getAttribute("viewport-margin")||"8").trim().split(/\s+/).map(Number).filter((Z)=>!Number.isNaN(Z));if($.length===0)return{top:8,right:8,bottom:8,left:8};if($.length===1)return{top:$[0],right:$[0],bottom:$[0],left:$[0]};if($.length===2)return{top:$[0],right:$[1],bottom:$[0],left:$[1]};if($.length===3)return{top:$[0],right:$[1],bottom:$[2],left:$[1]};return{top:$[0],right:$[1],bottom:$[2],left:$[3]}}getPlacementCandidates(Q,$,J){const Z={top:"bottom",bottom:"top",left:"right",right:"left",center:"center"};if(J){const q=J==="left"||J==="right"?["top","bottom"]:["left","right"];return[{v:Q,h:$,s:J},{v:Q,h:$,s:Z[J]},{v:Q,h:$,s:q[0]},{v:Q,h:$,s:q[1]}]}if(Q==="center")return[{v:"center",h:$,s:null},{v:"center",h:Z[$],s:null},{v:"top",h:$,s:null},{v:"bottom",h:$,s:null},{v:"top",h:Z[$],s:null},{v:"bottom",h:Z[$],s:null}];if($==="center")return[{v:Q,h:"center",s:null},{v:Z[Q],h:"center",s:null},{v:Q,h:"left",s:null},{v:Q,h:"right",s:null},{v:Z[Q],h:"left",s:null},{v:Z[Q],h:"right",s:null}];return[{v:Q,h:$,s:null},{v:Z[Q],h:$,s:null},{v:Q,h:Z[$],s:null},{v:Z[Q],h:Z[$],s:null}]}computeCoords(Q,$,J,Z,j,q){let K,_;if(q==="left"||q==="right")return _=q==="left"?Q.left-$.width-j.xPx:Q.right+j.xPx,K=Q.top,{top:K,left:_};if(q==="top"||q==="bottom")return K=q==="top"?Q.top-$.height-j.yPx:Q.bottom+j.yPx,_=Q.left,{top:K,left:_};if(J==="top")K=Q.top-$.height-j.yPx;else if(J==="bottom")K=Q.bottom+j.yPx;else K=Q.top+(Q.height-$.height)/2;if(J==="center")if(Z==="left")_=Q.left-$.width-j.xPx;else if(Z==="right")_=Q.right+j.xPx;else _=Q.left+(Q.width-$.width)/2;else if(Z==="left")_=Q.left+j.xPx;else if(Z==="right")_=Q.right-$.width-j.xPx;else _=Q.left+(Q.width-$.width)/2;return{top:K,left:_}}oppositeSide(Q){return{top:"bottom",bottom:"top",left:"right",right:"left"}[Q]||"bottom"}getPlacementSide(Q,$,J){if(J==="top")return"top";if(J==="bottom")return"bottom";if(J==="left")return"left";if(J==="right")return"right";if(Q!=="center")return Q;if($!=="center")return $;return"top"}updatePopoverBeak(Q,$,J,Z,j){if(this.getAttribute("variant")!=="popover"||!Q){this.style.removeProperty("--beak-offset"),this.removeAttribute("data-beak-side");return}const q=this.oppositeSide(j);this.setAttribute("data-beak-side",q);const K=Q.left+Q.width/2,_=Q.top+Q.height/2,X=this.getBoundingClientRect(),Y=X.width>0&&X.height>0?X:$,W=Y.left,N=Y.top,U=10;let O;if(q==="top"||q==="bottom"){O=K-W;const E=U,L=Math.max(E,Y.width-U);O=Math.min(L,Math.max(E,O))}else{O=_-N;const E=U,L=Math.max(E,Y.height-U);O=Math.min(L,Math.max(E,O))}this.style.setProperty("--beak-offset",`${O}px`)}overflowScore(Q,$,J){const{innerWidth:Z,innerHeight:j}=window,q=Q.left+$.width,K=Q.top+$.height,_=Math.max(0,J.left-Q.left),X=Math.max(0,J.top-Q.top),Y=Math.max(0,q-(Z-J.right)),W=Math.max(0,K-(j-J.bottom));return _+X+Y+W}fits(Q,$,J){return this.overflowScore(Q,$,J)===0}clamp(Q,$,J){const{left:Z,top:j}=J,q=Math.max(J.left,window.innerWidth-$.width-J.right),K=Math.max(J.top,window.innerHeight-$.height-J.bottom);return{left:Math.min(q,Math.max(Z,Q.left)),top:Math.min(K,Math.max(j,Q.top))}}positionPopup(){if(!this.open||!super.open)return;const Q=this.getBoundingClientRect(),$=this.parseOffset(),{vertical:J,horizontal:Z,shorthand:j}=this.parsePosition(),q=this.resolveAnchor(),K=this.parseViewportMargins();if(!q){this.updatePopoverBeak(null,Q,0,0,"top");const O={left:K.left+(window.innerWidth-K.right-K.left-Q.width)/2,top:K.top+(window.innerHeight-K.bottom-K.top-Q.height)/2},E=this.clamp(O,Q,K);this.style.left=`${E.left}px`,this.style.top=`${E.top}px`;return}const _=q.getBoundingClientRect(),X=this.getPlacementCandidates(J,Z,j);let Y=null,W="top",N=Number.POSITIVE_INFINITY;for(let{v:O,h:E,s:L}of X){const M=this.computeCoords(_,Q,O,E,$,L),B=this.getPlacementSide(O,E,L);if(L){const F=this.clamp(M,Q,K);if(L==="left"||L==="right"?M.left>=K.left&&M.left+Q.width<=window.innerWidth-K.right:M.top>=K.top&&M.top+Q.height<=window.innerHeight-K.bottom){this.style.left=`${F.left}px`,this.style.top=`${F.top}px`,this.updatePopoverBeak(_,Q,F.left,F.top,B);return}const R=this.overflowScore(M,Q,K);if(R<N)N=R,Y=F,W=B}else{if(this.fits(M,Q,K)){this.style.left=`${M.left}px`,this.style.top=`${M.top}px`,this.updatePopoverBeak(_,Q,M.left,M.top,B);return}const F=this.overflowScore(M,Q,K);if(F<N)N=F,Y=M,W=B}}const U=this.clamp(Y||{left:0,top:0},Q,K);this.style.left=`${U.left}px`,this.style.top=`${U.top}px`,this.updatePopoverBeak(_,Q,U.left,U.top,W)}queueReposition(){if(!this.open||!this.shouldAutoReposition())return;if(this._rafId!==null)return;this._rafId=requestAnimationFrame(()=>{this._rafId=null,this.positionPopup()})}shouldAutoReposition(){if(!(this.drag&&this._wasDragged))return!0;return!this.resolveAnchor()}}q0("fig-popup",F0,{extends:"dialog"});class R0 extends HTMLElement{#$;#Q;constructor(){super();this.content=null,this.#$=!1,this.#Q=this.handleClick.bind(this)}connectedCallback(){this.setAttribute("label",this.innerText),this.setAttribute("role","tab"),this.setAttribute("tabindex","0"),this.addEventListener("click",this.#Q),requestAnimationFrame(()=>{if(typeof this.getAttribute("content")==="string"){if(this.content=document.querySelector(this.getAttribute("content")),this.content)if(this.content.setAttribute("role","tabpanel"),this.#$)this.content.style.display="block",this.setAttribute("aria-selected","true");else this.content.style.display="none",this.setAttribute("aria-selected","false")}})}get selected(){return this.#$}set selected(Q){this.setAttribute("selected",Q?"true":"false")}disconnectedCallback(){this.removeEventListener("click",this.#Q)}handleClick(){if(this.selected=!0,this.content)this.content.style.display="block"}static get observedAttributes(){return["selected"]}attributeChangedCallback(Q,$,J){if(Q==="selected"){if(this.#$=J!==null&&J!=="false",this.setAttribute("aria-selected",this.#$?"true":"false"),this?.content)this.content.style.display=this.#$?"block":"none"}}}customElements.define("fig-tab",R0);class A0 extends HTMLElement{#$;#Q;constructor(){super();this.#$=this.handleClick.bind(this),this.#Q=this.#j.bind(this)}static get observedAttributes(){return["value","name","disabled"]}connectedCallback(){this.name=this.getAttribute("name")||"tabs",this.setAttribute("role","tablist"),this.addEventListener("click",this.#$),this.addEventListener("keydown",this.#Q),requestAnimationFrame(()=>{const Q=this.getAttribute("value");if(Q)this.#q(Q);if(this.hasAttribute("disabled"))this.#J(!0)})}#J(Q){this.querySelectorAll("fig-tab").forEach((J)=>{if(Q)J.setAttribute("disabled",""),J.setAttribute("aria-disabled","true"),J.setAttribute("tabindex","-1");else J.removeAttribute("disabled"),J.removeAttribute("aria-disabled"),J.setAttribute("tabindex","0")})}disconnectedCallback(){this.removeEventListener("click",this.#$),this.removeEventListener("keydown",this.#Q)}#j(Q){const $=Array.from(this.querySelectorAll("fig-tab")),J=$.findIndex((j)=>j.hasAttribute("selected"));let Z=J;switch(Q.key){case"ArrowLeft":case"ArrowUp":Q.preventDefault(),Z=J>0?J-1:$.length-1;break;case"ArrowRight":case"ArrowDown":Q.preventDefault(),Z=J<$.length-1?J+1:0;break;case"Home":Q.preventDefault(),Z=0;break;case"End":Q.preventDefault(),Z=$.length-1;break;default:return}if(Z!==J&&$[Z])$.forEach((j)=>j.removeAttribute("selected")),this.selectedTab=$[Z],this.setAttribute("value",$[Z].getAttribute("value")||""),$[Z].focus()}get value(){return this.selectedTab?.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q)}#q(Q){const $=this.querySelectorAll("fig-tab");for(let J of $)if(J.getAttribute("value")===Q)this.selectedTab=J,J.setAttribute("selected","true");else J.removeAttribute("selected")}attributeChangedCallback(Q,$,J){switch(Q){case"value":if(J!==$)this.#q(J);break;case"disabled":this.#J(J!==null&&J!=="false");break}}handleClick(Q){if(this.hasAttribute("disabled"))return;const $=Q.target;if($.nodeName.toLowerCase()==="fig-tab"){const J=this.querySelectorAll("fig-tab");for(let Z of J)if(Z===$)this.selectedTab=Z,Z.setAttribute("selected","true"),this.setAttribute("value",Z.getAttribute("value")||"");else Z.removeAttribute("selected")}}}customElements.define("fig-tabs",A0);class D0 extends HTMLElement{#$;#Q;#J;constructor(){super();this.#J=this.handleClick.bind(this)}connectedCallback(){this.addEventListener("click",this.#J)}disconnectedCallback(){this.removeEventListener("click",this.#J)}handleClick(){const Q=this.closest("fig-segmented-control");if(Q&&Q.hasAttribute("disabled")&&Q.getAttribute("disabled")!=="false")return;this.setAttribute("selected","true")}get value(){return this.#$}set value(Q){this.#$=Q,this.setAttribute("value",Q)}get selected(){return this.#Q}set selected(Q){this.#Q=Q,this.setAttribute("selected",Q)}static get observedAttributes(){return["selected","value"]}attributeChangedCallback(Q,$,J){switch(Q){case"value":this.#$=J;break;case"selected":this.#Q=J;break}}}customElements.define("fig-segment",D0);class k0 extends HTMLElement{#$=null;#Q=this.handleClick.bind(this);#J=null;#j=null;#q=0;#Z=!1;#_=!1;constructor(){super()}static get observedAttributes(){return["disabled","value","animated","sizing"]}connectedCallback(){this.name=this.getAttribute("name")||"segmented-control",this.addEventListener("click",this.#Q),this.#E(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),this.#M(),this.#G(),requestAnimationFrame(()=>{this.#O({enforceFallback:!0}),this.#B(),this.#W({forceInstant:!0})})}disconnectedCallback(){if(this.removeEventListener("click",this.#Q),this.#J?.disconnect(),this.#J=null,this.#j?.disconnect(),this.#j=null,this.#q)cancelAnimationFrame(this.#q),this.#q=0;this.#Z=!1,this.#_=!1}get selectedSegment(){return this.#$}set selectedSegment(Q){const $=this.querySelectorAll("fig-segment");for(let J of $){const Z=J===Q,j=J.hasAttribute("selected");if(Z&&!j)J.setAttribute("selected","true");else if(!Z&&j)J.removeAttribute("selected")}this.#$=Q instanceof HTMLElement&&this.contains(Q)?Q:null,this.#W()}get value(){return this.getAttribute("value")||""}set value(Q){if(Q===null||Q===void 0){this.removeAttribute("value");return}this.setAttribute("value",String(Q))}#X(Q){this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#K(Q){const $=Q.getAttribute("value");if($!==null){const J=$.trim();if(J.length>0)return J}return Q.textContent?.trim()||""}#Y(){const Q=this.querySelectorAll("fig-segment");for(let $ of Q)if($.hasAttribute("selected"))return $;return null}#N(Q){const $=String(Q??"").trim();if(!$)return!1;const J=this.querySelectorAll("fig-segment");for(let Z of J){const j=this.#K(Z);if(!j)continue;if(j===$)return this.selectedSegment=Z,!0}return!1}#U(){const Q=this.getAttribute("animated");if(Q===null)return!1;if(Q==="")return!0;return Q.trim().toLowerCase()==="true"}#W({forceInstant:Q=!1}={}){if(this.#Z=this.#Z||Q,this.#q)return;this.#q=requestAnimationFrame(()=>{this.#q=0;const $=this.#Z;this.#Z=!1,this.#L({forceInstant:$})})}#L({forceInstant:Q=!1}={}){const $=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.#U(),Z=this.#$&&this.contains(this.#$)?this.#$:this.#Y();if($||!J){if(this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready"),!J||$)this.#_=!1;return}if(!Z){if(this.#_)return;this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready");return}const j=this.getBoundingClientRect(),q=Z.getBoundingClientRect();if(j.width<=0||q.width<=0){if(this.#_)return;this.style.setProperty("--seg-indicator-opacity","0"),this.style.setProperty("--seg-indicator-transition-duration","0ms"),this.removeAttribute("data-indicator-ready");return}const K=Math.max(0,q.left-j.left);this.style.setProperty("--seg-indicator-x",`${K}px`),this.style.setProperty("--seg-indicator-w",`${q.width}px`),this.style.setProperty("--seg-indicator-opacity","1"),this.style.setProperty("--seg-indicator-transition-duration",!this.#_||Q?"0ms":"150ms"),this.setAttribute("data-indicator-ready","true"),this.#_=!0}#G(){this.#j?.disconnect(),this.#j=new ResizeObserver(()=>{this.#W()}),this.#B()}#B(){if(!this.#j)return;this.#j.disconnect(),this.#j.observe(this),this.querySelectorAll("fig-segment").forEach((Q)=>{this.#j?.observe(Q)})}#O({enforceFallback:Q=!1}={}){const $=this.querySelectorAll("fig-segment");if($.length===0){this.#$=null,this.#W({forceInstant:!0});return}const J=this.getAttribute("value"),Z=J?.trim()??"";if(J!==null){if(Z!==J){this.setAttribute("value",Z);return}if(Z&&this.#N(Z))return}const j=this.#Y();if(j){this.selectedSegment=j;return}if(Q)this.selectedSegment=$[0]}#M(){this.#J?.disconnect(),this.#J=new MutationObserver((Q)=>{let $=!1;for(let J of Q){if(J.type==="childList"){$=!0;break}if(J.type==="attributes"&&J.target instanceof HTMLElement&&J.target.tagName.toLowerCase()==="fig-segment"&&(J.attributeName==="value"||J.attributeName==="selected")){$=!0;break}if(J.type==="characterData"){$=!0;break}}if($)this.#E(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),this.#B(),this.#O({enforceFallback:!0})}),this.#J.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","selected"]})}handleClick(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=Q.target.closest("fig-segment");if(!$||!this.contains($))return;const J=this.selectedSegment,Z=this.value;this.selectedSegment=$;const j=this.#K($);if(j)this.setAttribute("value",j);else this.removeAttribute("value");const q=this.value;if(J!==$||Z!==q)this.#X(q)}#E(Q){this.setAttribute("aria-disabled",Q?"true":"false"),this.querySelectorAll("fig-segment").forEach(($)=>{if(Q)$.setAttribute("disabled",""),$.setAttribute("aria-disabled","true");else $.removeAttribute("disabled"),$.removeAttribute("aria-disabled")})}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="disabled"){this.#E(J!==null&&J!=="false"),this.#W({forceInstant:!0});return}if(Q==="value"){this.#O({enforceFallback:!1});return}if(Q==="animated"){if(!this.#U())this.#_=!1;this.#W({forceInstant:!0});return}if(Q==="sizing")this.#W({forceInstant:!0})}}customElements.define("fig-segmented-control",k0);class T0 extends HTMLElement{#$=!1;#Q=!1;#J={range:{min:0,max:100,step:1},hue:{min:0,max:255,step:1},delta:{min:-100,max:100,step:1},stepper:{min:0,max:100,step:25},opacity:{min:0,max:100,step:0.1,color:"#FF0000"}};#j;#q;#Z;#_;constructor(){super();this.initialInnerHTML=this.innerHTML,this.#j=(Q)=>{Q.stopPropagation(),this.#M()},this.#q=(Q)=>{Q.stopPropagation(),this.#E()},this.#Z=(Q)=>{Q.stopPropagation(),this.#K()},this.#_=(Q)=>{Q.stopPropagation(),this.#z()}}#X(){const Q=this.getAttribute("value");this.type=this.getAttribute("type")||"range",this.variant=this.getAttribute("variant")||"default",this.text=this.hasAttribute("text")&&this.getAttribute("text")!=="false",this.units=this.getAttribute("units")||"",this.transform=Number(this.getAttribute("transform")||1),this.disabled=this.getAttribute("disabled")?!0:!1,this.precision=this.hasAttribute("precision")?Number(this.getAttribute("precision")):null,this.placeholder=this.getAttribute("placeholder")!==null?this.getAttribute("placeholder"):"##";const $=this.#J[this.type];if(this.min=Number(this.getAttribute("min")||$.min),this.max=Number(this.getAttribute("max")||$.max),this.step=Number(this.getAttribute("step")||$.step),this.color=this.getAttribute("color")||$?.color,this.default=this.hasAttribute("default")?this.getAttribute("default"):this.type==="delta"?0:this.min,this.#Q=Q===null||typeof Q==="string"&&Q.trim()==="",this.value=this.#G(Q),this.color)this.style.setProperty("--color",this.color);let J="",Z=`<div class="fig-slider-input-container" role="group">
                 <input 
                     type="range"
                     ${this.text?'tabindex="-1"':""}
@@ -56,38 +56,38 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
                         value="${this.#Q?"":this.value}"
                         ${this.units?`units="${this.units}"`:""}
                         ${this.precision!==null?`precision="${this.precision}"`:""}>
-                    </fig-input-number>`;else J=Z;this.innerHTML=J,requestAnimationFrame(()=>{if(this.input=this.querySelector("[type=range]"),this.inputContainer=this.querySelector(".fig-slider-input-container"),this.input.removeEventListener("input",this.#j),this.input.addEventListener("input",this.#j),this.input.removeEventListener("change",this.#_),this.input.addEventListener("change",this.#_),this.input.addEventListener("pointerdown",()=>{this.#$=!0}),this.input.addEventListener("pointerup",()=>{this.#$=!1}),this.default)this.style.setProperty("--default",this.#W(this.default));if(this.datalist=this.querySelector("datalist"),this.figInputNumber=this.querySelector("fig-input-number"),this.datalist)this.inputContainer.append(this.datalist),this.datalist.setAttribute("id",this.datalist.getAttribute("id")||g()),this.input.setAttribute("list",this.datalist.getAttribute("id"));else if(this.type==="stepper"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",g());let j=(this.max-this.min)/this.step+1;for(let _=0;_<j;_++){let q=document.createElement("option");q.setAttribute("value",this.min+_*this.step),this.datalist.append(q)}this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}else if(this.type==="delta"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",g());let j=document.createElement("option");j.setAttribute("value",this.default),this.datalist.append(j),this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}if(this.datalist){let j=this.datalist.querySelector(`option[value='${this.default}']`);if(j)j.setAttribute("default","true")}if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#Z),this.figInputNumber.addEventListener("input",this.#Z),this.figInputNumber.removeEventListener("change",this.#K),this.figInputNumber.addEventListener("change",this.#K);this.#O()})}connectedCallback(){this.#X()}disconnectedCallback(){if(this.input)this.input.removeEventListener("input",this.#j),this.input.removeEventListener("change",this.#_);if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#Z),this.figInputNumber.removeEventListener("change",this.#K)}#q(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#Q=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#L(Q);this.value=$,this.input.value=String($),this.#O(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}}#W(Q){const{min:$,max:J}=this.#U(),Z=J-$;if(Z===0)return 0;return(Number(Q)-$)/Z}#Y(Q){if(Q===null||Q===void 0)return null;if(typeof Q==="string"&&Q.trim()==="")return null;const $=Number(Q);return Number.isFinite($)?$:null}#U(){let Q=this.#Y(this.min),$=this.#Y(this.max);if(Q===null)Q=0;if($===null)$=Q;if(Q>$)[Q,$]=[$,Q];return{min:Q,max:$}}#N(Q){const{min:$,max:J}=this.#U();return Math.min(J,Math.max($,Q))}#B(){if(this.type==="delta"){const $=this.#Y(this.default);if($!==null)return this.#N($);return this.#N(0)}const{min:Q}=this.#U();return Q}#L(Q){const $=this.#Y(Q);if($===null)return this.#B();return this.#N($)}#G(){let Q=this.#W(this.value);this.style.setProperty("--slider-complete",Q);let $=this.#W(this.default);this.style.setProperty("--default",$),this.style.setProperty("--unchanged",Q===$?1:0)}#O(){let Q=this.input.value;if(this.value=Q,this.#G(),this.input.setAttribute("aria-valuenow",Q),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#Q?"":Q)}#M(){this.#Q=!1,this.#O(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#R(){this.#$=!1,this.#Q=!1,this.#O(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#z(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#Q=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#L(Q);this.value=$,this.input.value=String($),this.#O(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}}static get observedAttributes(){return["value","step","min","max","type","variant","disabled","color","units","transform","text","placeholder","default","precision"]}focus(){this.input.focus()}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"color":this.color=J,this.style.setProperty("--color",this.color);break;case"disabled":if(this.disabled=this.input.disabled=J!==null&&J!=="false",this.figInputNumber)this.figInputNumber.disabled=this.disabled,this.figInputNumber.setAttribute("disabled",this.disabled);break;case"value":if(this.#$)break;if(this.#Q=J===null||typeof J==="string"&&J.trim()==="",this.value=this.#L(J),this.input.value=String(this.value),this.#O(),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#Q?"":this.value);break;case"transform":if(this.transform=Number(J)||1,this.figInputNumber)this.figInputNumber.setAttribute("transform",this.transform);break;case"precision":if(this.precision=J!==null?Number(J):null,this.figInputNumber)if(this.precision!==null)this.figInputNumber.setAttribute("precision",this.precision);else this.figInputNumber.removeAttribute("precision");break;case"placeholder":if(this.placeholder=J!==null?J:"##",this.figInputNumber)this.figInputNumber.setAttribute("placeholder",this.placeholder);break;case"default":this.default=J!==null?J:this.type==="delta"?0:this.min,this.#G();break;case"min":case"max":case"step":case"type":case"variant":case"units":this[Q]=J,this.#X();break;case"text":this.text=J!==null&&J!=="false",this.#X();break;default:this[Q]=this.input[Q]=J,this.#O();break}}}customElements.define("fig-slider",z0);class R0 extends HTMLElement{#$=!1;#Q;#J;#j;#_;#Z;constructor(){super();this.#Q=this.#q.bind(this),this.#J=this.#Y.bind(this),this.#j=this.#Y.bind(this),this.#_=this.#W.bind(this),this.#Z=(Q)=>{Q.stopPropagation(),this.#X(Q)}}connectedCallback(){if(this.multiline=this.hasAttribute("multiline")||!1,this.value=this.getAttribute("value")||"",this.type=this.getAttribute("type")||"text",this.placeholder=this.getAttribute("placeholder")||"",this.name=this.getAttribute("name")||null,this.readonly=this.hasAttribute("readonly")&&this.getAttribute("readonly")!=="false",this.type==="number"){if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.getAttribute("min"))this.input.setAttribute("min",String(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",String(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",String(this.step));if(this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));if(this.transform=Number(this.getAttribute("transform")||1),this.getAttribute("value"))this.value=Number(this.value)}let Q=`<input 
+                    </fig-input-number>`;else J=Z;this.innerHTML=J,requestAnimationFrame(()=>{if(this.input=this.querySelector("[type=range]"),this.inputContainer=this.querySelector(".fig-slider-input-container"),this.input.removeEventListener("input",this.#j),this.input.addEventListener("input",this.#j),this.input.removeEventListener("change",this.#q),this.input.addEventListener("change",this.#q),this.input.addEventListener("pointerdown",()=>{this.#$=!0}),this.input.addEventListener("pointerup",()=>{this.#$=!1}),this.default)this.style.setProperty("--default",this.#Y(this.default));if(this.datalist=this.querySelector("datalist"),this.figInputNumber=this.querySelector("fig-input-number"),this.datalist)this.inputContainer.append(this.datalist),this.datalist.setAttribute("id",this.datalist.getAttribute("id")||s()),this.input.setAttribute("list",this.datalist.getAttribute("id"));else if(this.type==="stepper"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",s());let j=(this.max-this.min)/this.step+1;for(let q=0;q<j;q++){let K=document.createElement("option");K.setAttribute("value",this.min+q*this.step),this.datalist.append(K)}this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}else if(this.type==="delta"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",s());let j=document.createElement("option");j.setAttribute("value",this.default),this.datalist.append(j),this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}if(this.datalist){let j=this.datalist.querySelector(`option[value='${this.default}']`);if(j)j.setAttribute("default","true")}if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#Z),this.figInputNumber.addEventListener("input",this.#Z),this.figInputNumber.removeEventListener("change",this.#_),this.figInputNumber.addEventListener("change",this.#_);this.#O()})}connectedCallback(){this.#X()}disconnectedCallback(){if(this.input)this.input.removeEventListener("input",this.#j),this.input.removeEventListener("change",this.#q);if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#Z),this.figInputNumber.removeEventListener("change",this.#_)}#K(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#Q=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#G(Q);this.value=$,this.input.value=String($),this.#O(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}}#Y(Q){const{min:$,max:J}=this.#U(),Z=J-$;if(Z===0)return 0;return(Number(Q)-$)/Z}#N(Q){if(Q===null||Q===void 0)return null;if(typeof Q==="string"&&Q.trim()==="")return null;const $=Number(Q);return Number.isFinite($)?$:null}#U(){let Q=this.#N(this.min),$=this.#N(this.max);if(Q===null)Q=0;if($===null)$=Q;if(Q>$)[Q,$]=[$,Q];return{min:Q,max:$}}#W(Q){const{min:$,max:J}=this.#U();return Math.min(J,Math.max($,Q))}#L(){if(this.type==="delta"){const $=this.#N(this.default);if($!==null)return this.#W($);return this.#W(0)}const{min:Q}=this.#U();return Q}#G(Q){const $=this.#N(Q);if($===null)return this.#L();return this.#W($)}#B(){let Q=this.#Y(this.value);this.style.setProperty("--slider-complete",Q);let $=this.#Y(this.default);this.style.setProperty("--default",$),this.style.setProperty("--unchanged",Q===$?1:0)}#O(){let Q=this.input.value;if(this.value=Q,this.#B(),this.input.setAttribute("aria-valuenow",Q),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#Q?"":Q)}#M(){this.#Q=!1,this.#O(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#E(){this.#$=!1,this.#Q=!1,this.#O(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#z(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#Q=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#G(Q);this.value=$,this.input.value=String($),this.#O(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}}static get observedAttributes(){return["value","step","min","max","type","variant","disabled","color","units","transform","text","placeholder","default","precision"]}focus(){this.input.focus()}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"color":this.color=J,this.style.setProperty("--color",this.color);break;case"disabled":if(this.disabled=this.input.disabled=J!==null&&J!=="false",this.figInputNumber)this.figInputNumber.disabled=this.disabled,this.figInputNumber.setAttribute("disabled",this.disabled);break;case"value":if(this.#$)break;if(this.#Q=J===null||typeof J==="string"&&J.trim()==="",this.value=this.#G(J),this.input.value=String(this.value),this.#O(),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#Q?"":this.value);break;case"transform":if(this.transform=Number(J)||1,this.figInputNumber)this.figInputNumber.setAttribute("transform",this.transform);break;case"precision":if(this.precision=J!==null?Number(J):null,this.figInputNumber)if(this.precision!==null)this.figInputNumber.setAttribute("precision",this.precision);else this.figInputNumber.removeAttribute("precision");break;case"placeholder":if(this.placeholder=J!==null?J:"##",this.figInputNumber)this.figInputNumber.setAttribute("placeholder",this.placeholder);break;case"default":this.default=J!==null?J:this.type==="delta"?0:this.min,this.#B();break;case"min":case"max":case"step":case"type":case"variant":case"units":this[Q]=J,this.#X();break;case"text":this.text=J!==null&&J!=="false",this.#X();break;default:this[Q]=this.input[Q]=J,this.#O();break}}}customElements.define("fig-slider",T0);class P0 extends HTMLElement{#$=!1;#Q;#J;#j;#q;#Z;constructor(){super();this.#Q=this.#K.bind(this),this.#J=this.#N.bind(this),this.#j=this.#N.bind(this),this.#q=this.#Y.bind(this),this.#Z=(Q)=>{Q.stopPropagation(),this.#X(Q)}}connectedCallback(){if(this.multiline=this.hasAttribute("multiline")||!1,this.value=this.getAttribute("value")||"",this.type=this.getAttribute("type")||"text",this.placeholder=this.getAttribute("placeholder")||"",this.name=this.getAttribute("name")||null,this.readonly=this.hasAttribute("readonly")&&this.getAttribute("readonly")!=="false",this.type==="number"){if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.getAttribute("min"))this.input.setAttribute("min",String(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",String(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",String(this.step));if(this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));if(this.transform=Number(this.getAttribute("transform")||1),this.getAttribute("value"))this.value=Number(this.value)}let Q=`<input 
       type="${this.type}" 
       ${this.name?`name="${this.name}"`:""}
       placeholder="${this.placeholder}"
-      value="${this.type==="number"?this.#K(this.value):this.value}" />`;if(this.multiline)Q=`<textarea  
-      placeholder="${this.placeholder}">${this.value}</textarea>`;requestAnimationFrame(()=>{let $=this.querySelector("[slot=append]"),J=this.querySelector("[slot=prepend]");if(this.innerHTML=Q,J)J.addEventListener("click",this.focus.bind(this)),this.prepend(J);if($)$.addEventListener("click",this.focus.bind(this)),this.append($);if(this.input=this.querySelector("input,textarea"),this.input.readOnly=this.readonly,this.type==="number"){if(this.getAttribute("min"))this.input.setAttribute("min",this.#K(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",this.#K(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",this.#K(this.step));this.addEventListener("pointerdown",this.#_)}this.input.removeEventListener("change",this.#Z),this.input.addEventListener("change",this.#Z)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#Z);this.removeEventListener("pointerdown",this.#_),window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#J),window.removeEventListener("blur",this.#j)}focus(){this.input.focus()}#K(Q){if(Q==="")return"";let $=Number(Q)*(this.transform||1);return $=this.#N($),$}#X(Q){Q.stopPropagation();let $=Q.target.value,J=$;if(this.type==="number")$=$/(this.transform||1),$=this.#U($,!1),J=$*(this.transform||1);this.value=$,this.input.value=J,this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#q(Q){if(this.type!=="number")return;if(Q.buttons===0){this.#Y();return}let $=(this.step||1)*Q.movementX,J=Number(this.input.value);J=J/(this.transform||1)+$,J=this.#U(J,!1);let Z=J*(this.transform||1);J=this.#N(J),Z=this.#N(Z),this.value=J,this.input.value=Z,this.dispatchEvent(new CustomEvent("input",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#W(Q){if(this.type!=="number")return;if(Q.altKey||Q.target.closest("[slot]"))this.#$=!0,this.input.style.cursor=this.style.cursor=document.body.style.cursor="ew-resize",this.style.userSelect="none",window.addEventListener("pointermove",this.#Q),window.addEventListener("pointerup",this.#J),window.addEventListener("blur",this.#j)}#Y(Q){if(this.type!=="number")return;this.#$=!1,this.input.style.cursor=this.style.cursor=document.body.style.cursor="",this.style.userSelect="all",window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#J),window.removeEventListener("blur",this.#j)}#U(Q,$=!0){let J=Q;if(this.type==="number"){if(J=Number(J),typeof this.min==="number")J=Math.max($?this.#K(this.min):this.min,J);if(typeof this.max==="number")J=Math.min($?this.#K(this.max):this.max,J);J=this.#N(J)}return J}#N(Q,$=2){const J=Math.round(Q*100)/100;return Number.isInteger(J)?J:J.toFixed($)}static get observedAttributes(){return["value","placeholder","label","disabled","readonly","type","step","min","max","transform","name"]}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=J!==null&&J!=="false";break;case"readonly":this.readonly=J!==null&&J!=="false",this.input.readOnly=this.readonly;break;case"transform":if(this.type==="number")this.transform=Number(J)||1,this.input.value=this.#K(this.value);break;case"value":if(this.#$)break;let Z=J;if(this.type==="number")Z=this.#U(Z,!1),this.value=Z,this.input.value=this.#K(Z);else this.value=Z,this.input.value=Z;break;case"min":case"max":case"step":if(this[Q]=this.input[Q]=Number(J),this.input)this.input.setAttribute(Q,J);break;case"name":this[Q]=this.input[Q]=J,this.input.setAttribute("name",J);break;default:this[Q]=this.input[Q]=J;break}}}customElements.define("fig-input-text",R0);class F0 extends HTMLElement{#$;#Q;#J;#j;#_;#Z;#K;#X;#q;#W;#Y;#U;#N=!1;#B=null;#L(Q){if(Q&&!this.#B)this.#B=document.createElement("span"),this.#B.className="fig-steppers",this.#B.innerHTML='<button class="fig-stepper-up" tabindex="-1" aria-label="Increase"></button><button class="fig-stepper-down" tabindex="-1" aria-label="Decrease"></button>',this.#B.addEventListener("pointerdown",($)=>{$.preventDefault(),$.stopPropagation();const J=$.target.closest("button");if(!J||this.disabled)return;const Z=J.classList.contains("fig-stepper-up")?1:-1;this.#G(Z),this.input.focus()}),this.append(this.#B);else if(!Q&&this.#B)this.#B.remove(),this.#B=null}#G(Q){const $=this.step||1;let J=this.#O(this.input.value),Z=(J!==""?Number(J)/(this.transform||1):0)+$*Q;Z=this.#D(Z,!1),this.value=Z,this.input.value=this.#M(this.value),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}constructor(){super();this.#$=this.#F.bind(this),this.#Q=this.#C.bind(this),this.#J=this.#C.bind(this),this.#j=this.#P.bind(this),this.#_=(Q)=>{Q.stopPropagation(),this.#T(Q)},this.#Z=(Q)=>{Q.stopPropagation(),this.#f(Q)},this.#K=(Q)=>{this.#z(Q)},this.#X=(Q)=>{this.#E(Q)},this.#q=(Q)=>{this.#A(Q)}}connectedCallback(){const Q=this.getAttribute("value");if(this.value=Q!==null&&Q!==""?Number(Q):"",this.placeholder=this.getAttribute("placeholder")||"",this.name=this.getAttribute("name")||null,this.#W=this.getAttribute("units")||"",this.#Y=this.getAttribute("unit-position")||"suffix",this.#U=this.hasAttribute("precision")?Number(this.getAttribute("precision")):2,this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));this.transform=Number(this.getAttribute("transform")||1);const $=this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false";let J=`<input 
+      value="${this.type==="number"?this.#_(this.value):this.value}" />`;if(this.multiline)Q=`<textarea  
+      placeholder="${this.placeholder}">${this.value}</textarea>`;requestAnimationFrame(()=>{let $=this.querySelector("[slot=append]"),J=this.querySelector("[slot=prepend]");if(this.innerHTML=Q,J)J.addEventListener("click",this.focus.bind(this)),this.prepend(J);if($)$.addEventListener("click",this.focus.bind(this)),this.append($);if(this.input=this.querySelector("input,textarea"),this.input.readOnly=this.readonly,this.type==="number"){if(this.getAttribute("min"))this.input.setAttribute("min",this.#_(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",this.#_(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",this.#_(this.step));this.addEventListener("pointerdown",this.#q)}this.input.removeEventListener("change",this.#Z),this.input.addEventListener("change",this.#Z)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#Z);this.removeEventListener("pointerdown",this.#q),window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#J),window.removeEventListener("blur",this.#j)}focus(){this.input.focus()}#_(Q){if(Q==="")return"";let $=Number(Q)*(this.transform||1);return $=this.#W($),$}#X(Q){Q.stopPropagation();let $=Q.target.value,J=$;if(this.type==="number")$=$/(this.transform||1),$=this.#U($,!1),J=$*(this.transform||1);this.value=$,this.input.value=J,this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#K(Q){if(this.type!=="number")return;if(Q.buttons===0){this.#N();return}let $=(this.step||1)*Q.movementX,J=Number(this.input.value);J=J/(this.transform||1)+$,J=this.#U(J,!1);let Z=J*(this.transform||1);J=this.#W(J),Z=this.#W(Z),this.value=J,this.input.value=Z,this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#Y(Q){if(this.type!=="number")return;if(Q.altKey||Q.target.closest("[slot]"))this.#$=!0,this.input.style.cursor=this.style.cursor=document.body.style.cursor="ew-resize",this.style.userSelect="none",window.addEventListener("pointermove",this.#Q),window.addEventListener("pointerup",this.#J),window.addEventListener("blur",this.#j)}#N(Q){if(this.type!=="number")return;this.#$=!1,this.input.style.cursor=this.style.cursor=document.body.style.cursor="",this.style.userSelect="all",window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#J),window.removeEventListener("blur",this.#j)}#U(Q,$=!0){let J=Q;if(this.type==="number"){if(J=Number(J),typeof this.min==="number")J=Math.max($?this.#_(this.min):this.min,J);if(typeof this.max==="number")J=Math.min($?this.#_(this.max):this.max,J);J=this.#W(J)}return J}#W(Q,$=2){const J=Math.round(Q*100)/100;return Number.isInteger(J)?J:J.toFixed($)}static get observedAttributes(){return["value","placeholder","label","disabled","readonly","type","step","min","max","transform","name"]}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=J!==null&&J!=="false";break;case"readonly":this.readonly=J!==null&&J!=="false",this.input.readOnly=this.readonly;break;case"transform":if(this.type==="number")this.transform=Number(J)||1,this.input.value=this.#_(this.value);break;case"value":if(this.#$)break;let Z=J;if(this.type==="number")Z=this.#U(Z,!1),this.value=Z,this.input.value=this.#_(Z);else this.value=Z,this.input.value=Z;break;case"min":case"max":case"step":if(this[Q]=this.input[Q]=Number(J),this.input)this.input.setAttribute(Q,J);break;case"name":this[Q]=this.input[Q]=J,this.input.setAttribute("name",J);break;case"placeholder":this.placeholder=J??"",this.input.placeholder=this.placeholder;break;default:this[Q]=this.input[Q]=J;break}}}customElements.define("fig-input-text",P0);class H0 extends HTMLElement{#$;#Q;#J;#j;#q;#Z;#_;#X;#K;#Y;#N;#U;#W=!1;#L=null;#G(Q){if(Q&&!this.#L)this.#L=document.createElement("span"),this.#L.className="fig-steppers",this.#L.innerHTML='<button class="fig-stepper-up" tabindex="-1" aria-label="Increase"></button><button class="fig-stepper-down" tabindex="-1" aria-label="Decrease"></button>',this.#L.addEventListener("pointerdown",($)=>{$.preventDefault(),$.stopPropagation();const J=$.target.closest("button");if(!J||this.disabled)return;const Z=J.classList.contains("fig-stepper-up")?1:-1;this.#B(Z),this.input.focus()}),this.append(this.#L);else if(!Q&&this.#L)this.#L.remove(),this.#L=null}#B(Q){const $=this.step||1;let J=this.#O(this.input.value),Z=(J!==""?Number(J)/(this.transform||1):0)+$*Q;Z=this.#D(Z,!1),this.value=Z,this.input.value=this.#M(this.value),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}constructor(){super();this.#$=this.#F.bind(this),this.#Q=this.#S.bind(this),this.#J=this.#S.bind(this),this.#j=this.#I.bind(this),this.#q=(Q)=>{Q.stopPropagation(),this.#k(Q)},this.#Z=(Q)=>{Q.stopPropagation(),this.#H(Q)},this.#_=(Q)=>{this.#z(Q)},this.#X=(Q)=>{this.#A(Q)},this.#K=(Q)=>{this.#R(Q)}}connectedCallback(){const Q=this.getAttribute("value");if(this.value=Q!==null&&Q!==""?Number(Q):"",this.placeholder=this.getAttribute("placeholder")||"",this.name=this.getAttribute("name")||null,this.#Y=this.getAttribute("units")||"",this.#N=this.getAttribute("unit-position")||"suffix",this.#U=this.hasAttribute("precision")?Number(this.getAttribute("precision")):2,this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));this.transform=Number(this.getAttribute("transform")||1);const $=this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false";let J=`<input 
       type="text"
       inputmode="decimal"
       ${this.name?`name="${this.name}"`:""}
       placeholder="${this.placeholder}"
-      value="${this.#M(this.value)}" />`;requestAnimationFrame(()=>{let Z=this.querySelector("[slot=append]"),j=this.querySelector("[slot=prepend]");if(this.innerHTML=J,j)j.addEventListener("click",this.focus.bind(this)),this.prepend(j);if(Z)Z.addEventListener("click",this.focus.bind(this)),this.append(Z);if(this.input=this.querySelector("input"),this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.#L($),this.hasAttribute("disabled")){const _=this.getAttribute("disabled");this.disabled=this.input.disabled=_!=="false"}this.addEventListener("pointerdown",this.#j),this.input.removeEventListener("change",this.#_),this.input.addEventListener("change",this.#_),this.input.removeEventListener("input",this.#Z),this.input.addEventListener("input",this.#Z),this.input.removeEventListener("focus",this.#K),this.input.addEventListener("focus",this.#K),this.input.removeEventListener("blur",this.#X),this.input.addEventListener("blur",this.#X),this.input.removeEventListener("keydown",this.#q),this.input.addEventListener("keydown",this.#q)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#_),this.input.removeEventListener("input",this.#Z),this.input.removeEventListener("focus",this.#K),this.input.removeEventListener("blur",this.#X),this.input.removeEventListener("keydown",this.#q);this.removeEventListener("pointerdown",this.#j),window.removeEventListener("pointermove",this.#$),window.removeEventListener("pointerup",this.#Q),window.removeEventListener("blur",this.#J)}focus(){this.input.focus()}#O(Q){if(!Q)return"";if(!this.#W){let Z=Q.replace(/[^\d.-]/g,"");const j=Z.split(".");if(j.length>2)Z=j[0]+"."+j.slice(1).join("");return Z}let $=Q.replace(this.#W,"").trim();$=$.replace(/[^\d.-]/g,"");const J=$.split(".");if(J.length>2)$=J[0]+"."+J.slice(1).join("");return $}#M(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);if(isNaN($))return"";if($=this.#k($),!this.#W)return $.toString();if(this.#Y==="prefix")return this.#W+$;else return $+this.#W}#R(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);return $=this.#k($),$.toString()}#z(Q){this.#N=!0,setTimeout(()=>{const $=Q.target.value;if($&&this.#W)if(this.#Y==="prefix")Q.target.setSelectionRange(this.#W.length,$.length);else{const J=$.indexOf(this.#W);if(J>-1)Q.target.setSelectionRange(0,J)}},0)}#E(Q){this.#N=!1;let $=this.#O(Q.target.value);if($!==""){let J=Number($)/(this.transform||1);J=this.#D(J,!1),this.value=J,Q.target.value=this.#M(this.value)}else this.value="",Q.target.value="";this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#A(Q){if(this.disabled)return;if(Q.key!=="ArrowUp"&&Q.key!=="ArrowDown")return;Q.preventDefault();const $=this.step||1,J=Q.shiftKey?10:1,Z=$*J*(Q.key==="ArrowUp"?1:-1);let j=this.#O(this.input.value),_=(j!==""?Number(j)/(this.transform||1):0)+Z;_=this.#D(_,!1),this.value=_,this.input.value=this.#M(this.value),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#f(Q){let $=this.#O(Q.target.value);if($!=="")this.value=Number($)/(this.transform||1);else this.value="";this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#T(Q){Q.stopPropagation();let $=this.#O(Q.target.value);if($!==""){let J=Number($)/(this.transform||1);J=this.#D(J,!1),this.value=J,Q.target.value=this.#M(this.value)}else this.value="",Q.target.value="";this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#F(Q){if(this.disabled)return;if(Q.buttons===0){this.#C();return}let $=(this.step||1)*Q.movementX,J=this.#O(this.input.value),Z=Number(J)/(this.transform||1)+$;Z=this.#D(Z,!1),this.value=Z,this.input.value=this.#M(this.value),this.dispatchEvent(new CustomEvent("input",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#P(Q){if(this.disabled)return;if(Q.altKey||Q.target.closest("[slot]"))this.#N=!0,this.input.style.cursor=this.style.cursor=document.body.style.cursor="ew-resize",this.style.userSelect="none",window.addEventListener("pointermove",this.#$),window.addEventListener("pointerup",this.#Q),window.addEventListener("blur",this.#J)}#C(Q){this.#N=!1,this.input.style.cursor=this.style.cursor=document.body.style.cursor="",this.style.userSelect="all",window.removeEventListener("pointermove",this.#$),window.removeEventListener("pointerup",this.#Q),window.removeEventListener("blur",this.#J)}#D(Q,$=!0){let J=Number(Q);if(isNaN(J))return"";if(typeof this.min==="number")J=Math.max(this.min,J);if(typeof this.max==="number")J=Math.min(this.max,J);return J=this.#k(J),J}#k(Q){const $=this.#U??2,J=Math.pow(10,$),Z=Math.round(Q*J)/J;return Number.isInteger(Z)?Z:parseFloat(Z.toFixed($))}static get observedAttributes(){return["value","placeholder","disabled","step","min","max","transform","name","units","unit-position","steppers","precision"]}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=J!==null&&J!=="false";break;case"units":this.#W=J||"",this.input.value=this.#M(this.value);break;case"unit-position":this.#Y=J||"suffix",this.input.value=this.#M(this.value);break;case"transform":this.transform=Number(J)||1,this.input.value=this.#M(this.value);break;case"value":if(this.#N)break;let Z=J!==null&&J!==""?Number(J):"";if(Z!=="")Z=this.#D(Z,!1);this.value=Z,this.input.value=this.#M(this.value);break;case"min":case"max":case"step":if(J===null||J===""){this[Q]=void 0;break}this[Q]=Number(J);break;case"steppers":{const j=J!==null&&J!=="false";this.#L(j);break}case"precision":this.#U=J!==null?Number(J):2,this.input.value=this.#M(this.value);break;case"name":this[Q]=this.input[Q]=J,this.input.setAttribute("name",J);break;default:this[Q]=this.input[Q]=J;break}}}customElements.define("fig-input-number",F0);class E0 extends HTMLElement{constructor(){super()}connectedCallback(){this.src=this.getAttribute("src"),this.name=this.getAttribute("name"),this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials),this.setSrc(this.src),requestAnimationFrame(()=>{this.img=this.querySelector("img")})}setSrc(Q){if(this.src=Q,Q)this.innerHTML=`<img src="${this.src}" ${this.name?`alt="${this.name}"`:""} />`}getInitials(Q){return Q?Q.split(" ").map(($)=>$[0]).join(""):""}static get observedAttributes(){return["src","href","name"]}attributeChangedCallback(Q,$,J){if(this[Q]=J,Q==="name")this.img?.setAttribute("alt",J),this.name=J,this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials);else if(Q==="src")this.src=J,this.setSrc(this.src)}}customElements.define("fig-avatar",E0);class A0 extends HTMLElement{constructor(){super()}static get observedAttributes(){return["label"]}connectedCallback(){requestAnimationFrame(()=>{if(this.label=this.querySelector(":scope>label"),this.input=Array.from(this.childNodes).find((Q)=>Q.nodeName.toLowerCase().startsWith("fig-")),this.input&&this.label){this.label.addEventListener("click",this.focus.bind(this));let Q=this.input.getAttribute("id")||g();this.input.setAttribute("id",Q),this.label.setAttribute("for",Q)}})}attributeChangedCallback(Q,$,J){switch(Q){case"label":if(this.label)this.label.textContent=J;break}}focus(){this.input.focus()}}customElements.define("fig-field",A0);class D0 extends HTMLElement{#$=null;#Q=null;#J=null;#j=null;#_=new Set;#Z=0;#K=null;#X=null;#q=new Set(["variant","color","text","full"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#$)this.#W();if(this.#Y(),this.#U(),this.#G(),!this.#j)this.#j=new MutationObserver((Q)=>{let $=!1,J=!1;for(let Z of Q)if(Z.type==="attributes"){if(Z.attributeName&&this.#q.has(Z.attributeName))continue;if(Z.attributeName==="label"||Z.attributeName==="direction")$=!0;else J=!0}if($)this.#Y();if(J)this.#U()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#j?.disconnect(),this.#Z)cancelAnimationFrame(this.#Z),this.#Z=0;this.#O()}attributeChangedCallback(Q,$,J){if($===J||!this.#$)return;if(Q==="label"||Q==="direction")this.#Y()}#W(){const Q=Array.from(this.childNodes).filter((j)=>{return j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())}),$=document.createElement("fig-field"),J=document.createElement("label"),Z=document.createElement("fig-slider");Z.setAttribute("text","true");for(let j of this.#N()){const _=this.getAttribute(j);Z.setAttribute(j,_??"")}$.append(J,Z),this.#$=$,this.#Q=J,this.#J=Z,this.replaceChildren($);for(let j of Q)this.#J.appendChild(j)}#Y(){if(!this.#$||!this.#Q)return;const Q=this.hasAttribute("label"),$=this.getAttribute("label");if(Q&&($??"").trim()===""){if(this.#Q.parentElement===this.#$)this.#Q.remove()}else if(this.#Q.textContent=Q?$??"":"Label",this.#Q.parentElement!==this.#$)this.#$.prepend(this.#Q);this.#$.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#U(){if(!this.#J)return;const Q=this.#N(),$=new Set(Q.filter((Z)=>Z!=="text"));for(let Z of this.#_)if(!$.has(Z))this.#J.removeAttribute(Z);for(let Z of Q){if(Z==="text")continue;const j=this.getAttribute(Z);this.#J.setAttribute(Z,j??"")}this.#J.removeAttribute("variant"),this.#J.removeAttribute("color"),this.#J.removeAttribute("transform"),this.#J.removeAttribute("full"),this.#J.setAttribute("text","true");const J=(this.getAttribute("type")||"range").toLowerCase();if(J==="delta"||J==="stepper")this.#J.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#J.removeAttribute("default");if(J==="stepper")this.#J.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#J.removeAttribute("step");if(J==="opacity")this.#J.style.setProperty("--color","var(--figma-color-bg-tertiary)");else this.#J.style.removeProperty("--color");this.#_=$,this.#B()}#N(){const Q=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter(($)=>!Q.has($)&&!this.#q.has($))}#B(){if(this.#Z)cancelAnimationFrame(this.#Z);this.#Z=requestAnimationFrame(()=>{this.#Z=0,this.#L()})}#L(){if(!this.#J)return;const Q=this.#J.querySelector("fig-input-number");if(!Q)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){Q.removeAttribute("steppers");return}const J=this.getAttribute("steppers");Q.setAttribute("steppers",J??"")}#G(){if(!this.#J)return;if(!this.#K)this.#K=this.#M.bind(this,"input");if(!this.#X)this.#X=this.#M.bind(this,"change");this.#J.addEventListener("input",this.#K),this.#J.addEventListener("change",this.#X)}#O(){if(!this.#J)return;if(this.#K)this.#J.removeEventListener("input",this.#K);if(this.#X)this.#J.removeEventListener("change",this.#X)}#M(Q,$){$.stopPropagation();const J=$ instanceof CustomEvent&&$.detail!==void 0?$.detail:this.#J?.value;this.dispatchEvent(new CustomEvent(Q,{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}}customElements.define("fig-field-slider",D0);class k0 extends HTMLElement{rgba;hex;#$=100;#Q;#J;#j;#_;constructor(){super()}get picker(){return this.getAttribute("picker")||"native"}set picker(Q){this.setAttribute("picker",Q)}get alpha(){return this.getAttribute("alpha")}set alpha(Q){if(Q===null||Q===void 0||Q===!1)this.removeAttribute("alpha");else this.setAttribute("alpha",String(Q))}#Z(){const Q={},$=this.getAttribute("experimental");if($)Q.experimental=$;for(let{name:J,value:Z}of this.attributes)if(J.startsWith("picker-")&&J!=="picker-anchor")Q[J.slice(7)]=Z;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([J,Z])=>`${J}="${Z}"`).join(" ")}connectedCallback(){if(this.#K)cancelAnimationFrame(this.#K);this.#K=requestAnimationFrame(()=>{this.#K=null,this.#X()})}#K=null;#X(){this.#q(this.getAttribute("value"));const Q=this.picker==="figma",$=this.picker==="false",J=this.getAttribute("alpha")==="true",Z=this.#Z(),_=this.#O?" disabled":"";let q="";if(this.getAttribute("text")==="true"){let X=`<fig-input-text 
+      value="${this.#M(this.value)}" />`;requestAnimationFrame(()=>{let Z=this.querySelector("[slot=append]"),j=this.querySelector("[slot=prepend]");if(this.innerHTML=J,j)j.addEventListener("click",this.focus.bind(this)),this.prepend(j);if(Z)Z.addEventListener("click",this.focus.bind(this)),this.append(Z);if(this.input=this.querySelector("input"),this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.#G($),this.hasAttribute("disabled")){const q=this.getAttribute("disabled");this.disabled=this.input.disabled=q!=="false"}this.addEventListener("pointerdown",this.#j),this.input.removeEventListener("change",this.#q),this.input.addEventListener("change",this.#q),this.input.removeEventListener("input",this.#Z),this.input.addEventListener("input",this.#Z),this.input.removeEventListener("focus",this.#_),this.input.addEventListener("focus",this.#_),this.input.removeEventListener("blur",this.#X),this.input.addEventListener("blur",this.#X),this.input.removeEventListener("keydown",this.#K),this.input.addEventListener("keydown",this.#K)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#q),this.input.removeEventListener("input",this.#Z),this.input.removeEventListener("focus",this.#_),this.input.removeEventListener("blur",this.#X),this.input.removeEventListener("keydown",this.#K);this.removeEventListener("pointerdown",this.#j),window.removeEventListener("pointermove",this.#$),window.removeEventListener("pointerup",this.#Q),window.removeEventListener("blur",this.#J)}focus(){this.input.focus()}#O(Q){if(!Q)return"";if(!this.#Y){let Z=Q.replace(/[^\d.-]/g,"");const j=Z.split(".");if(j.length>2)Z=j[0]+"."+j.slice(1).join("");return Z}let $=Q.replace(this.#Y,"").trim();$=$.replace(/[^\d.-]/g,"");const J=$.split(".");if(J.length>2)$=J[0]+"."+J.slice(1).join("");return $}#M(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);if(isNaN($))return"";if($=this.#T($),!this.#Y)return $.toString();if(this.#N==="prefix")return this.#Y+$;else return $+this.#Y}#E(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);return $=this.#T($),$.toString()}#z(Q){this.#W=!0,setTimeout(()=>{const $=Q.target.value;if($&&this.#Y)if(this.#N==="prefix")Q.target.setSelectionRange(this.#Y.length,$.length);else{const J=$.indexOf(this.#Y);if(J>-1)Q.target.setSelectionRange(0,J)}},0)}#A(Q){this.#W=!1;let $=this.#O(Q.target.value);if($!==""){let J=Number($)/(this.transform||1);J=this.#D(J,!1),this.value=J,Q.target.value=this.#M(this.value)}else this.value="",Q.target.value="";this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#R(Q){if(this.disabled)return;if(Q.key!=="ArrowUp"&&Q.key!=="ArrowDown")return;Q.preventDefault();const $=this.step||1,J=Q.shiftKey?10:1,Z=$*J*(Q.key==="ArrowUp"?1:-1);let j=this.#O(this.input.value),q=(j!==""?Number(j)/(this.transform||1):0)+Z;q=this.#D(q,!1),this.value=q,this.input.value=this.#M(this.value),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#H(Q){let $=this.#O(Q.target.value);if($!=="")this.value=Number($)/(this.transform||1);else this.value="";this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#k(Q){Q.stopPropagation();let $=this.#O(Q.target.value);if($!==""){let J=Number($)/(this.transform||1);J=this.#D(J,!1),this.value=J,Q.target.value=this.#M(this.value)}else this.value="",Q.target.value="";this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#F(Q){if(this.disabled)return;if(Q.buttons===0){this.#S();return}let $=(this.step||1)*Q.movementX,J=this.#O(this.input.value),Z=Number(J)/(this.transform||1)+$;Z=this.#D(Z,!1),this.value=Z,this.input.value=this.#M(this.value),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#I(Q){if(this.disabled)return;if(Q.altKey||Q.target.closest("[slot]"))this.#W=!0,this.input.style.cursor=this.style.cursor=document.body.style.cursor="ew-resize",this.style.userSelect="none",window.addEventListener("pointermove",this.#$),window.addEventListener("pointerup",this.#Q),window.addEventListener("blur",this.#J)}#S(Q){this.#W=!1,this.input.style.cursor=this.style.cursor=document.body.style.cursor="",this.style.userSelect="all",window.removeEventListener("pointermove",this.#$),window.removeEventListener("pointerup",this.#Q),window.removeEventListener("blur",this.#J)}#D(Q,$=!0){let J=Number(Q);if(isNaN(J))return"";if(typeof this.min==="number")J=Math.max(this.min,J);if(typeof this.max==="number")J=Math.min(this.max,J);return J=this.#T(J),J}#T(Q){const $=this.#U??2,J=Math.pow(10,$),Z=Math.round(Q*J)/J;return Number.isInteger(Z)?Z:parseFloat(Z.toFixed($))}static get observedAttributes(){return["value","placeholder","disabled","step","min","max","transform","name","units","unit-position","steppers","precision"]}attributeChangedCallback(Q,$,J){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=J!==null&&J!=="false";break;case"units":this.#Y=J||"",this.input.value=this.#M(this.value);break;case"unit-position":this.#N=J||"suffix",this.input.value=this.#M(this.value);break;case"transform":this.transform=Number(J)||1,this.input.value=this.#M(this.value);break;case"value":if(this.#W)break;let Z=J!==null&&J!==""?Number(J):"";if(Z!=="")Z=this.#D(Z,!1);this.value=Z,this.input.value=this.#M(this.value);break;case"min":case"max":case"step":if(J===null||J===""){this[Q]=void 0;break}this[Q]=Number(J);break;case"steppers":{const j=J!==null&&J!=="false";this.#G(j);break}case"precision":this.#U=J!==null?Number(J):2,this.input.value=this.#M(this.value);break;case"name":this[Q]=this.input[Q]=J,this.input.setAttribute("name",J);break;case"placeholder":this.placeholder=J??"",this.input.placeholder=this.placeholder;break;default:this[Q]=this.input[Q]=J;break}}}customElements.define("fig-input-number",H0);class S0 extends HTMLElement{constructor(){super()}connectedCallback(){this.src=this.getAttribute("src"),this.name=this.getAttribute("name"),this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials),this.setSrc(this.src),requestAnimationFrame(()=>{this.img=this.querySelector("img")})}setSrc(Q){if(this.src=Q,Q)this.innerHTML=`<img src="${this.src}" ${this.name?`alt="${this.name}"`:""} />`}getInitials(Q){return Q?Q.split(" ").map(($)=>$[0]).join(""):""}static get observedAttributes(){return["src","href","name"]}attributeChangedCallback(Q,$,J){if(this[Q]=J,Q==="name")this.img?.setAttribute("alt",J),this.name=J,this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials);else if(Q==="src")this.src=J,this.setSrc(this.src)}}customElements.define("fig-avatar",S0);class C0 extends HTMLElement{constructor(){super()}static get observedAttributes(){return["label"]}connectedCallback(){requestAnimationFrame(()=>{if(this.label=this.querySelector(":scope>label"),this.input=Array.from(this.childNodes).find((Q)=>Q.nodeName.toLowerCase().startsWith("fig-")),this.input&&this.label){this.label.addEventListener("click",this.focus.bind(this));let Q=this.input.getAttribute("id")||s();this.input.setAttribute("id",Q),this.label.setAttribute("for",Q)}})}attributeChangedCallback(Q,$,J){switch(Q){case"label":if(this.label)this.label.textContent=J;break}}focus(){this.input.focus()}}customElements.define("fig-field",C0);class I0 extends HTMLElement{#$=null;#Q=null;#J=null;#j=null;#q=new Set;#Z=0;#_=null;#X=null;#K=new Set(["variant","color","text","full"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#$)this.#Y();if(this.#N(),this.#U(),this.#B(),!this.#j)this.#j=new MutationObserver((Q)=>{let $=!1,J=!1;for(let Z of Q)if(Z.type==="attributes"){if(Z.attributeName&&this.#K.has(Z.attributeName))continue;if(Z.attributeName==="label"||Z.attributeName==="direction")$=!0;else J=!0}if($)this.#N();if(J)this.#U()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#j?.disconnect(),this.#Z)cancelAnimationFrame(this.#Z),this.#Z=0;this.#O()}attributeChangedCallback(Q,$,J){if($===J||!this.#$)return;if(Q==="label"||Q==="direction")this.#N()}#Y(){const Q=Array.from(this.childNodes).filter((j)=>{return j.nodeType!==Node.TEXT_NODE||Boolean(j.textContent?.trim())}),$=document.createElement("fig-field"),J=document.createElement("label"),Z=document.createElement("fig-slider");Z.setAttribute("text","true");for(let j of this.#W()){const q=this.getAttribute(j);Z.setAttribute(j,q??"")}$.append(J,Z),this.#$=$,this.#Q=J,this.#J=Z,this.replaceChildren($);for(let j of Q)this.#J.appendChild(j)}#N(){if(!this.#$||!this.#Q)return;const Q=this.hasAttribute("label"),$=this.getAttribute("label");if(Q&&($??"").trim()===""){if(this.#Q.parentElement===this.#$)this.#Q.remove()}else if(this.#Q.textContent=Q?$??"":"Label",this.#Q.parentElement!==this.#$)this.#$.prepend(this.#Q);this.#$.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#U(){if(!this.#J)return;const Q=this.#W(),$=new Set(Q.filter((Z)=>Z!=="text"));for(let Z of this.#q)if(!$.has(Z))this.#J.removeAttribute(Z);for(let Z of Q){if(Z==="text")continue;const j=this.getAttribute(Z);this.#J.setAttribute(Z,j??"")}this.#J.removeAttribute("variant"),this.#J.removeAttribute("color"),this.#J.removeAttribute("transform"),this.#J.removeAttribute("full"),this.#J.setAttribute("text","true");const J=(this.getAttribute("type")||"range").toLowerCase();if(J==="delta"||J==="stepper")this.#J.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#J.removeAttribute("default");if(J==="stepper")this.#J.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#J.removeAttribute("step");if(J==="opacity")this.#J.style.setProperty("--color","var(--figma-color-bg-tertiary)");else this.#J.style.removeProperty("--color");this.#q=$,this.#L()}#W(){const Q=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter(($)=>!Q.has($)&&!this.#K.has($))}#L(){if(this.#Z)cancelAnimationFrame(this.#Z);this.#Z=requestAnimationFrame(()=>{this.#Z=0,this.#G()})}#G(){if(!this.#J)return;const Q=this.#J.querySelector("fig-input-number");if(!Q)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){Q.removeAttribute("steppers");return}const J=this.getAttribute("steppers");Q.setAttribute("steppers",J??"")}#B(){if(!this.#J)return;if(!this.#_)this.#_=this.#M.bind(this,"input");if(!this.#X)this.#X=this.#M.bind(this,"change");this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#X)}#O(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#X)this.#J.removeEventListener("change",this.#X)}#M(Q,$){$.stopPropagation();const J=$ instanceof CustomEvent&&$.detail!==void 0?$.detail:this.#J?.value;this.dispatchEvent(new CustomEvent(Q,{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}}customElements.define("fig-field-slider",I0);class f0 extends HTMLElement{rgba;hex;#$=100;#Q;#J;#j;#q;constructor(){super()}get picker(){return this.getAttribute("picker")||"native"}set picker(Q){this.setAttribute("picker",Q)}get alpha(){return this.getAttribute("alpha")}set alpha(Q){if(Q===null||Q===void 0||Q===!1)this.removeAttribute("alpha");else this.setAttribute("alpha",String(Q))}#Z(){const Q={},$=this.getAttribute("experimental");if($)Q.experimental=$;for(let{name:J,value:Z}of this.attributes)if(J.startsWith("picker-")&&J!=="picker-anchor")Q[J.slice(7)]=Z;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([J,Z])=>`${J}="${Z}"`).join(" ")}connectedCallback(){if(this.#_)cancelAnimationFrame(this.#_);this.#_=requestAnimationFrame(()=>{this.#_=null,this.#X()})}#_=null;#X(){this.#K(this.getAttribute("value"));const Q=this.picker==="figma",$=this.picker==="false",J=this.getAttribute("alpha")==="true",Z=this.#Z(),q=this.#O?" disabled":"";let K="";if(this.getAttribute("text")==="true"){let X=`<fig-input-text 
         type="text"
         placeholder="000000"
-        value="${this.hexOpaque.slice(1).toUpperCase()}"${_}>
+        value="${this.hexOpaque.slice(1).toUpperCase()}"${q}>
       </fig-input-text>`;if(J)X+=`<fig-tooltip text="Opacity">
                     <fig-input-number 
                         placeholder="##" 
                         min="0"
                         max="100"
                         value="${this.#$}"
-                        units="%"${_}>
+                        units="%"${q}>
                     </fig-input-number>
-                </fig-tooltip>`;let Y="";if(!$)Y=Q?`<fig-fill-picker mode="solid" ${Z} ${J?"":'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}","opacity":${this.#$}}'${_}></fig-fill-picker>`:`<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"${_}></fig-chit>`;q=`<div class="input-combo">
+                </fig-tooltip>`;let Y="";if(!$)Y=Q?`<fig-fill-picker mode="solid" ${Z} ${J?"":'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}","opacity":${this.#$}}'${q}></fig-fill-picker>`:`<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"${q}></fig-chit>`;K=`<div class="input-combo">
                 ${Y}
                 ${X}
-            </div>`}else if($)q="";else q=Q?`<fig-fill-picker mode="solid" ${Z} ${J?"":'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}","opacity":${this.#$}}'${_}></fig-fill-picker>`:`<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"${_}></fig-chit>`;this.innerHTML=q,requestAnimationFrame(()=>{if(this.#Q=this.querySelector("fig-chit"),this.#J=this.querySelector("fig-fill-picker"),this.#j=this.querySelector("fig-input-text:not([type=number])"),this.#_=this.querySelector("fig-input-number"),this.#Q)this.#Q.disabled=this.hasAttribute("disabled"),this.#Q.addEventListener("input",this.#N.bind(this));if(this.#J){const X=this.getAttribute("picker-anchor");if(X==="self")this.#J.anchorElement=this;else if(X){const Y=document.querySelector(X);if(Y)this.#J.anchorElement=Y}if(this.hasAttribute("disabled"))this.#J.setAttribute("disabled","");this.#J.addEventListener("input",this.#B.bind(this)),this.#J.addEventListener("change",this.#U.bind(this))}if(this.#j){const X=this.rgbAlphaToHex(this.rgba,1);if(this.#j.value=X.slice(1).toUpperCase(),this.#Q)this.#Q.background=X;this.#j.addEventListener("input",this.#W.bind(this)),this.#j.addEventListener("change",this.#U.bind(this))}if(this.#_)this.#_.addEventListener("input",this.#Y.bind(this)),this.#_.addEventListener("change",this.#U.bind(this))})}#q(Q){if(this.rgba=this.convertToRGBA(Q),this.value=this.rgbAlphaToHex({r:isNaN(this.rgba.r)?0:this.rgba.r,g:isNaN(this.rgba.g)?0:this.rgba.g,b:isNaN(this.rgba.b)?0:this.rgba.b},this.rgba.a),this.hexWithAlpha=this.value.toUpperCase(),this.hexOpaque=this.hexWithAlpha.slice(0,7),Q.length>7)this.#$=(this.rgba.a*100).toFixed(0);this.style.setProperty("--alpha",this.rgba.a)}#W(Q){Q.stopPropagation();let $=Q.target.value.replace("#","");if(this.#q("#"+$),this.#_)this.#_.setAttribute("value",this.#$);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque);this.#L()}#Y(Q){Q.stopPropagation();const $=Number(Q.target.value)||0,Z=Math.round($/100*255).toString(16).padStart(2,"0");if(this.#q(this.hexOpaque+Z),this.#Q)this.#Q.setAttribute("alpha",this.rgba.a);if(this.#J)this.#J.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.#$}));this.#L()}#U(Q){Q.stopPropagation(),this.#G()}focus(){this.#Q.focus()}#N(Q){if(Q.stopPropagation(),this.#q(Q.target.value),this.#j)this.#j.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());this.#L()}#B(Q){Q.stopPropagation();const $=Q.detail;if($&&$.color){let J=$.color;if($.alpha!==void 0){const Z=Math.round($.alpha*255).toString(16).padStart(2,"0");J=$.color+Z}if(this.#q(J),this.#j)this.#j.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());if(this.#_&&$.alpha!==void 0)this.#_.setAttribute("value",Math.round($.alpha*100));if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);this.#L()}}#L(){const Q=new CustomEvent("input",{bubbles:!0,cancelable:!0});this.dispatchEvent(Q)}#G(){const Q=new CustomEvent("change",{bubbles:!0,cancelable:!0});this.dispatchEvent(Q)}static get observedAttributes(){return["value","style","mode","picker","experimental","alpha","text","disabled"]}get mode(){return this.getAttribute("mode")}set mode(Q){this.setAttribute("mode",Q)}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":if(this.#q(J),this.#j)this.#j.setAttribute("value",this.value);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);if(this.#J)this.#J.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.#$}));if(this.#_)this.#_.setAttribute("value",this.#$);break;case"mode":if(this.#J&&J)this.#J.setAttribute("mode",J);break;case"picker":break;case"alpha":case"text":if(this.isConnected)this.#X();break;case"disabled":this.#M();break}}get#O(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#M(){const Q=this.#O;for(let $ of[this.#Q,this.#j,this.#_]){if(!$)continue;if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}if(this.#J)if(Q)this.#J.setAttribute("disabled","");else this.#J.removeAttribute("disabled")}rgbAlphaToHex({r:Q,g:$,b:J},Z=1){Q=Math.max(0,Math.min(255,Math.round(Q))),$=Math.max(0,Math.min(255,Math.round($))),J=Math.max(0,Math.min(255,Math.round(J))),Z=Math.max(0,Math.min(1,Z));const j=Q.toString(16).padStart(2,"0"),_=$.toString(16).padStart(2,"0"),q=J.toString(16).padStart(2,"0");if(Z===1)return`#${j}${_}${q}`.toUpperCase();const X=Math.round(Z*255).toString(16).padStart(2,"0");return`#${j}${_}${q}${X}`.toUpperCase()}convertToRGBA(Q){let $,J,Z,j=1;if(Q.startsWith("#")){let _=Q.slice(1);if(_.length===8)j=parseInt(_.slice(6),16)/255,_=_.slice(0,6);$=parseInt(_.slice(0,2),16),J=parseInt(_.slice(2,4),16),Z=parseInt(_.slice(4,6),16)}else if(Q.startsWith("rgba")||Q.startsWith("rgb")){let _=Q.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/);if(_)$=parseInt(_[1]),J=parseInt(_[2]),Z=parseInt(_[3]),j=_[4]?parseFloat(_[4]):1}else if(Q.startsWith("hsla")||Q.startsWith("hsl")){let _=Q.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*(\d+(?:\.\d+)?))?\)/);if(_){let q=parseInt(_[1])/360,K=parseInt(_[2])/100,X=parseInt(_[3])/100;if(j=_[4]?parseFloat(_[4]):1,K===0)$=J=Z=X;else{let Y=(U,z,O)=>{if(O<0)O+=1;if(O>1)O-=1;if(O<0.16666666666666666)return U+(z-U)*6*O;if(O<0.5)return z;if(O<0.6666666666666666)return U+(z-U)*(0.6666666666666666-O)*6;return U},W=X<0.5?X*(1+K):X+K-X*K,N=2*X-W;$=Y(N,W,q+0.3333333333333333),J=Y(N,W,q),Z=Y(N,W,q-0.3333333333333333)}$=Math.round($*255),J=Math.round(J*255),Z=Math.round(Z*255)}}else return null;return{r:$,g:J,b:Z,a:j}}}customElements.define("fig-input-color",k0);var t0=["srgb","srgb-linear","display-p3","oklab","oklch"],a0=["shorter","longer","increasing","decreasing"];class T0 extends HTMLElement{#$="solid";#Q;#J;#j;#_={color:"#D9D9D9",alpha:1};#Z={type:"linear",angle:180,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#K={url:null,scaleMode:"fill",scale:50,opacity:1};#X={url:null,scaleMode:"fill",opacity:1};#q={snapshot:null,opacity:1};constructor(){super()}static get observedAttributes(){return["value","disabled","mode","experimental","alpha"]}connectedCallback(){this.#W(),this.#N()}disconnectedCallback(){this.#Q=null,this.#J=null,this.#j=null}#W(){const Q=this.getAttribute("value");if(!Q)return;try{const $=JSON.parse(Q);if($.type)this.#$=$.type;switch(this.#$){case"solid":if($.color)this.#_.color=$.color;if($.alpha!==void 0)this.#_.alpha=$.alpha;if($.opacity!==void 0)this.#_.alpha=$.opacity/100;break;case"gradient":if($.gradient)this.#Z=w({...this.#Z,...$.gradient});break;case"image":if($.image)this.#K={...this.#K,...$.image};break;case"video":if($.video)this.#X={...this.#X,...$.video};break;case"webcam":if($.webcam)this.#q={...this.#q,...$.webcam};if($.opacity!==void 0)this.#q.opacity=$.opacity;break}}catch($){if(Q.startsWith("#")){if(this.#$="solid",this.#_.color=Q.slice(0,7),Q.length>7){const J=Q.slice(7,9);this.#_.alpha=parseInt(J,16)/255}}}}#Y(){const Q={},$=this.getAttribute("mode");if($)Q.mode=$;const J=this.getAttribute("experimental");if(J)Q.experimental=J;const Z=this.getAttribute("alpha");if(Z)Q.alpha=Z;for(let{name:j,value:_}of this.attributes)if(j.startsWith("picker-")&&j!=="picker-anchor")Q[j.slice(7)]=_;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([j,_])=>`${j}="${_}"`).join(" ")}#U(){const Q=this.hasAttribute("disabled");for(let $ of[this.#Q,this.#J,this.#j]){if(!$)continue;if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}}#N(){const Q=this.hasAttribute("disabled"),$=JSON.stringify(this.value),J=this.getAttribute("alpha")!=="false",Z=(q)=>J?`<fig-tooltip text="Opacity">
+            </div>`}else if($)K="";else K=Q?`<fig-fill-picker mode="solid" ${Z} ${J?"":'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}","opacity":${this.#$}}'${q}></fig-fill-picker>`:`<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"${q}></fig-chit>`;this.innerHTML=K,requestAnimationFrame(()=>{if(this.#Q=this.querySelector("fig-chit"),this.#J=this.querySelector("fig-fill-picker"),this.#j=this.querySelector("fig-input-text:not([type=number])"),this.#q=this.querySelector("fig-input-number"),this.#Q)this.#Q.disabled=this.hasAttribute("disabled"),this.#Q.addEventListener("input",this.#W.bind(this));if(this.#J){const X=this.getAttribute("picker-anchor");if(X==="self")this.#J.anchorElement=this;else if(X){const Y=document.querySelector(X);if(Y)this.#J.anchorElement=Y}if(this.hasAttribute("disabled"))this.#J.setAttribute("disabled","");this.#J.addEventListener("input",this.#L.bind(this)),this.#J.addEventListener("change",this.#U.bind(this))}if(this.#j){const X=this.rgbAlphaToHex(this.rgba,1);if(this.#j.value=X.slice(1).toUpperCase(),this.#Q)this.#Q.background=X;this.#j.addEventListener("input",this.#Y.bind(this)),this.#j.addEventListener("change",this.#U.bind(this))}if(this.#q)this.#q.addEventListener("input",this.#N.bind(this)),this.#q.addEventListener("change",this.#U.bind(this))})}#K(Q){if(this.rgba=this.convertToRGBA(Q),this.value=this.rgbAlphaToHex({r:isNaN(this.rgba.r)?0:this.rgba.r,g:isNaN(this.rgba.g)?0:this.rgba.g,b:isNaN(this.rgba.b)?0:this.rgba.b},this.rgba.a),this.hexWithAlpha=this.value.toUpperCase(),this.hexOpaque=this.hexWithAlpha.slice(0,7),Q.length>7)this.#$=(this.rgba.a*100).toFixed(0);this.style.setProperty("--alpha",this.rgba.a)}#Y(Q){Q.stopPropagation();let $=Q.target.value.replace("#","");if(this.#K("#"+$),this.#q)this.#q.setAttribute("value",this.#$);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque);this.#G()}#N(Q){Q.stopPropagation();const $=Number(Q.target.value)||0,Z=Math.round($/100*255).toString(16).padStart(2,"0");if(this.#K(this.hexOpaque+Z),this.#Q)this.#Q.setAttribute("alpha",this.rgba.a);if(this.#J)this.#J.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.#$}));this.#G()}#U(Q){Q.stopPropagation(),this.#B()}focus(){this.#Q.focus()}#W(Q){if(Q.stopPropagation(),this.#K(Q.target.value),this.#j)this.#j.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());this.#G()}#L(Q){Q.stopPropagation();const $=Q.detail;if($&&$.color){let J=$.color;if($.alpha!==void 0){const Z=Math.round($.alpha*255).toString(16).padStart(2,"0");J=$.color+Z}if(this.#K(J),this.#j)this.#j.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());if(this.#q&&$.alpha!==void 0)this.#q.setAttribute("value",Math.round($.alpha*100));if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);this.#G()}}#G(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,hex:this.hex,rgba:this.rgba}}))}#B(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,hex:this.hex,rgba:this.rgba}}))}static get observedAttributes(){return["value","style","mode","picker","experimental","alpha","text","disabled"]}get mode(){return this.getAttribute("mode")}set mode(Q){this.setAttribute("mode",Q)}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":if(this.#K(J),this.#j)this.#j.setAttribute("value",this.value);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);if(this.#J)this.#J.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.#$}));if(this.#q)this.#q.setAttribute("value",this.#$);break;case"mode":if(this.#J&&J)this.#J.setAttribute("mode",J);break;case"picker":break;case"alpha":case"text":if(this.isConnected)this.#X();break;case"disabled":this.#M();break}}get#O(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#M(){const Q=this.#O;for(let $ of[this.#Q,this.#j,this.#q]){if(!$)continue;if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}if(this.#J)if(Q)this.#J.setAttribute("disabled","");else this.#J.removeAttribute("disabled")}rgbAlphaToHex({r:Q,g:$,b:J},Z=1){Q=Math.max(0,Math.min(255,Math.round(Q))),$=Math.max(0,Math.min(255,Math.round($))),J=Math.max(0,Math.min(255,Math.round(J))),Z=Math.max(0,Math.min(1,Z));const j=Q.toString(16).padStart(2,"0"),q=$.toString(16).padStart(2,"0"),K=J.toString(16).padStart(2,"0");if(Z===1)return`#${j}${q}${K}`.toUpperCase();const X=Math.round(Z*255).toString(16).padStart(2,"0");return`#${j}${q}${K}${X}`.toUpperCase()}convertToRGBA(Q){let $,J,Z,j=1;if(Q.startsWith("#")){let q=Q.slice(1);if(q.length===8)j=parseInt(q.slice(6),16)/255,q=q.slice(0,6);$=parseInt(q.slice(0,2),16),J=parseInt(q.slice(2,4),16),Z=parseInt(q.slice(4,6),16)}else if(Q.startsWith("rgba")||Q.startsWith("rgb")){let q=Q.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/);if(q)$=parseInt(q[1]),J=parseInt(q[2]),Z=parseInt(q[3]),j=q[4]?parseFloat(q[4]):1}else if(Q.startsWith("hsla")||Q.startsWith("hsl")){let q=Q.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*(\d+(?:\.\d+)?))?\)/);if(q){let K=parseInt(q[1])/360,_=parseInt(q[2])/100,X=parseInt(q[3])/100;if(j=q[4]?parseFloat(q[4]):1,_===0)$=J=Z=X;else{let Y=(U,O,E)=>{if(E<0)E+=1;if(E>1)E-=1;if(E<0.16666666666666666)return U+(O-U)*6*E;if(E<0.5)return O;if(E<0.6666666666666666)return U+(O-U)*(0.6666666666666666-E)*6;return U},W=X<0.5?X*(1+_):X+_-X*_,N=2*X-W;$=Y(N,W,K+0.3333333333333333),J=Y(N,W,K),Z=Y(N,W,K-0.3333333333333333)}$=Math.round($*255),J=Math.round(J*255),Z=Math.round(Z*255)}}else return null;return{r:$,g:J,b:Z,a:j}}}customElements.define("fig-input-color",f0);var j5=["srgb","srgb-linear","display-p3","oklab","oklch"],q5=["shorter","longer","increasing","decreasing"];class x0 extends HTMLElement{#$="solid";#Q;#J;#j;#q={color:"#D9D9D9",alpha:1};#Z={type:"linear",angle:180,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#_={url:null,scaleMode:"fill",scale:50,opacity:1};#X={url:null,scaleMode:"fill",opacity:1};#K={snapshot:null,opacity:1};constructor(){super()}static get observedAttributes(){return["value","disabled","mode","experimental","alpha"]}connectedCallback(){this.#Y(),this.#W()}disconnectedCallback(){this.#Q=null,this.#J=null,this.#j=null}#Y(){const Q=this.getAttribute("value");if(!Q)return;try{const $=JSON.parse(Q);if($.type)this.#$=$.type;switch(this.#$){case"solid":if($.color)this.#q.color=$.color;if($.alpha!==void 0)this.#q.alpha=$.alpha;if($.opacity!==void 0)this.#q.alpha=$.opacity/100;break;case"gradient":if($.gradient)this.#Z=V({...this.#Z,...$.gradient});break;case"image":if($.image)this.#_={...this.#_,...$.image};break;case"video":if($.video)this.#X={...this.#X,...$.video};break;case"webcam":if($.webcam)this.#K={...this.#K,...$.webcam};if($.opacity!==void 0)this.#K.opacity=$.opacity;break}}catch($){if(Q.startsWith("#")){if(this.#$="solid",this.#q.color=Q.slice(0,7),Q.length>7){const J=Q.slice(7,9);this.#q.alpha=parseInt(J,16)/255}}}}#N(){const Q={},$=this.getAttribute("mode");if($)Q.mode=$;const J=this.getAttribute("experimental");if(J)Q.experimental=J;const Z=this.getAttribute("alpha");if(Z)Q.alpha=Z;for(let{name:j,value:q}of this.attributes)if(j.startsWith("picker-")&&j!=="picker-anchor")Q[j.slice(7)]=q;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([j,q])=>`${j}="${q}"`).join(" ")}#U(){const Q=this.hasAttribute("disabled");for(let $ of[this.#Q,this.#J,this.#j]){if(!$)continue;if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}}#W(){const Q=this.hasAttribute("disabled"),$=JSON.stringify(this.value),J=this.getAttribute("alpha")!=="false",Z=(K)=>J?`<fig-tooltip text="Opacity">
             <fig-input-number 
               class="fig-input-fill-opacity"
               placeholder="##" 
               min="0"
               max="100"
-              value="${q}"
+              value="${K}"
               units="%"
               ${Q?"disabled":""}>
             </fig-input-number>
@@ -96,27 +96,27 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
             type="text"
             class="fig-input-fill-hex"
             placeholder="000000"
-            value="${this.#_.color.slice(1).toUpperCase()}"
+            value="${this.#q.color.slice(1).toUpperCase()}"
             ${Q?"disabled":""}>
           </fig-input-text>
-          ${Z(Math.round(this.#_.alpha*100))}`;break;case"gradient":j=`
+          ${Z(Math.round(this.#q.alpha*100))}`;break;case"gradient":{j=`
           <label class="fig-input-fill-label">${this.#Z.type.charAt(0).toUpperCase()+this.#Z.type.slice(1)}</label>
-          ${Z(this.#Z.stops[0]?.opacity??100)}`;break;case"image":j=`
+          ${Z(100)}`;break}case"image":j=`
           <label class="fig-input-fill-label">Image</label>
-          ${Z(Math.round((this.#K.opacity??1)*100))}`;break;case"video":j=`
+          ${Z(Math.round((this.#_.opacity??1)*100))}`;break;case"video":j=`
           <label class="fig-input-fill-label">Video</label>
           ${Z(Math.round((this.#X.opacity??1)*100))}`;break;case"webcam":j=`
           <label class="fig-input-fill-label">Webcam</label>
-          ${Z(Math.round((this.#q.opacity??1)*100))}`;break}const _=this.#Y();this.innerHTML=`
+          ${Z(Math.round((this.#K.opacity??1)*100))}`;break}const q=this.#N();this.innerHTML=`
       <div class="input-combo">
-        <fig-fill-picker ${_} value='${$}' ${Q?"disabled":""}></fig-fill-picker>
+        <fig-fill-picker ${q} value='${$}' ${Q?"disabled":""}></fig-fill-picker>
         ${j}
-      </div>`,this.#B()}#B(){requestAnimationFrame(()=>{this.#Q=this.querySelector("fig-fill-picker"),this.#J=this.querySelector(".fig-input-fill-opacity"),this.#j=this.querySelector(".fig-input-fill-hex");const Q=this.querySelector(".fig-input-fill-label");if(Q&&this.#Q)Q.addEventListener("click",()=>{const $=this.#Q.querySelector("fig-chit");if($)$.click()});if(this.#Q){const $=this.getAttribute("picker-anchor");if(!$||$==="self")this.#Q.anchorElement=this;else{const J=document.querySelector($);if(J)this.#Q.anchorElement=J}this.#Q.addEventListener("input",(J)=>{J.stopPropagation();const Z=J.detail;if(!Z)return;const j=Z.type,_=j!==this.#$;switch(this.#$=j,j){case"solid":this.#_.color=Z.color,this.#_.alpha=Z.alpha;break;case"gradient":if(Z.gradient)this.#Z=w({...this.#Z,...Z.gradient});break;case"image":if(Z.image)this.#K=Z.image;break;case"video":if(Z.video)this.#X=Z.video;break}if(_)this.#G();else this.#L();this.#R()}),this.#Q.addEventListener("change",(J)=>{J.stopPropagation(),this.#z()})}if(this.#j)this.#j.addEventListener("input",($)=>{$.stopPropagation();const J="#"+$.target.value.replace("#","");this.#_.color=J,this.#O(),this.#R()}),this.#j.addEventListener("change",($)=>{$.stopPropagation(),this.#z()});if(this.#J)this.#J.addEventListener("input",($)=>{$.stopPropagation();const J=parseFloat($.target.value),Z=isNaN(J)?100:J,j=Z/100;switch(this.#$){case"solid":this.#_.alpha=j;break;case"gradient":this.#Z.stops.forEach((_)=>{_.opacity=Z});break;case"image":this.#K.opacity=j;break;case"video":this.#X.opacity=j;break;case"webcam":this.#q.opacity=j;break}this.#O(),this.#M(j),this.#R()}),this.#J.addEventListener("change",($)=>{$.stopPropagation(),this.#z()})})}#L(){switch(this.#$){case"solid":if(this.#j)this.#j.setAttribute("value",this.#_.color.slice(1).toUpperCase());if(this.#J)this.#J.setAttribute("value",Math.round(this.#_.alpha*100));break;case"gradient":{if(this.#J)this.#J.setAttribute("value",this.#Z.stops[0]?.opacity??100);const Q=this.querySelector(".fig-input-fill-label");if(Q){const $=this.#Z.type.charAt(0).toUpperCase()+this.#Z.type.slice(1);Q.textContent=$}break}case"image":if(this.#J)this.#J.setAttribute("value",Math.round((this.#K.opacity??1)*100));break;case"video":if(this.#J)this.#J.setAttribute("value",Math.round((this.#X.opacity??1)*100));break;case"webcam":if(this.#J)this.#J.setAttribute("value",Math.round((this.#q.opacity??1)*100));break}}#G(){const Q=this.hasAttribute("disabled"),$=this.querySelector(".input-combo");if(!$)return;const J=$.querySelector(".fig-input-fill-label"),Z=$.querySelector(".fig-input-fill-hex"),j=$.querySelector(".fig-input-fill-opacity"),_=$.querySelectorAll("fig-tooltip");J?.remove(),Z?.remove(),_.forEach((K)=>K.remove());let q="";switch(this.#$){case"solid":q=`
+      </div>`,this.#L()}#L(){requestAnimationFrame(()=>{this.#Q=this.querySelector("fig-fill-picker"),this.#J=this.querySelector(".fig-input-fill-opacity"),this.#j=this.querySelector(".fig-input-fill-hex");const Q=this.querySelector(".fig-input-fill-label");if(Q&&this.#Q)Q.addEventListener("click",()=>{const $=this.#Q.querySelector("fig-chit");if($)$.click()});if(this.#Q){const $=this.getAttribute("picker-anchor");if(!$||$==="self")this.#Q.anchorElement=this;else{const J=document.querySelector($);if(J)this.#Q.anchorElement=J}this.#Q.addEventListener("input",(J)=>{J.stopPropagation();const Z=J.detail;if(!Z)return;const j=Z.type,q=j!==this.#$;switch(this.#$=j,j){case"solid":this.#q.color=Z.color,this.#q.alpha=Z.alpha;break;case"gradient":if(Z.gradient)this.#Z=V({...this.#Z,...Z.gradient});break;case"image":if(Z.image)this.#_=Z.image;break;case"video":if(Z.video)this.#X=Z.video;break}if(q)this.#B();else this.#G();this.#E()}),this.#Q.addEventListener("change",(J)=>{J.stopPropagation(),this.#z()})}if(this.#j)this.#j.addEventListener("input",($)=>{$.stopPropagation();const J="#"+$.target.value.replace("#","");this.#q.color=J,this.#O(),this.#E()}),this.#j.addEventListener("change",($)=>{$.stopPropagation(),this.#z()});if(this.#J)this.#J.addEventListener("input",($)=>{$.stopPropagation();const J=parseFloat($.target.value),j=(isNaN(J)?100:J)/100;switch(this.#$){case"solid":this.#q.alpha=j;break;case"gradient":break;case"image":this.#_.opacity=j;break;case"video":this.#X.opacity=j;break;case"webcam":this.#K.opacity=j;break}this.#O(),this.#M(j),this.#E()}),this.#J.addEventListener("change",($)=>{$.stopPropagation(),this.#z()})})}#G(){switch(this.#$){case"solid":if(this.#j)this.#j.setAttribute("value",this.#q.color.slice(1).toUpperCase());if(this.#J)this.#J.setAttribute("value",Math.round(this.#q.alpha*100));break;case"gradient":{const Q=this.querySelector(".fig-input-fill-label");if(Q){const $=this.#Z.type.charAt(0).toUpperCase()+this.#Z.type.slice(1);Q.textContent=$}break}case"image":if(this.#J)this.#J.setAttribute("value",Math.round((this.#_.opacity??1)*100));break;case"video":if(this.#J)this.#J.setAttribute("value",Math.round((this.#X.opacity??1)*100));break;case"webcam":if(this.#J)this.#J.setAttribute("value",Math.round((this.#K.opacity??1)*100));break}}#B(){const Q=this.hasAttribute("disabled"),$=this.querySelector(".input-combo");if(!$)return;const J=$.querySelector(".fig-input-fill-label"),Z=$.querySelector(".fig-input-fill-hex"),j=$.querySelector(".fig-input-fill-opacity"),q=$.querySelectorAll("fig-tooltip");J?.remove(),Z?.remove(),q.forEach((_)=>_.remove());let K="";switch(this.#$){case"solid":K=`
           <fig-input-text 
             type="text"
             class="fig-input-fill-hex"
             placeholder="000000"
-            value="${this.#_.color.slice(1).toUpperCase()}"
+            value="${this.#q.color.slice(1).toUpperCase()}"
             ${Q?"disabled":""}>
           </fig-input-text>
           <fig-tooltip text="Opacity">
@@ -125,11 +125,11 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
               placeholder="##" 
               min="0"
               max="100"
-              value="${Math.round(this.#_.alpha*100)}"
+              value="${Math.round(this.#q.alpha*100)}"
               units="%"
               ${Q?"disabled":""}>
             </fig-input-number>
-          </fig-tooltip>`;break;case"gradient":q=`
+          </fig-tooltip>`;break;case"gradient":{K=`
           <label class="fig-input-fill-label">${this.#Z.type.charAt(0).toUpperCase()+this.#Z.type.slice(1)}</label>
           <fig-tooltip text="Opacity">
             <fig-input-number 
@@ -137,11 +137,11 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
               placeholder="##" 
               min="0"
               max="100"
-              value="${this.#Z.stops[0]?.opacity??100}"
+              value="100"
               units="%"
               ${Q?"disabled":""}>
             </fig-input-number>
-          </fig-tooltip>`;break;case"image":q=`
+          </fig-tooltip>`;break}case"image":K=`
           <label class="fig-input-fill-label">Image</label>
           <fig-tooltip text="Opacity">
             <fig-input-number 
@@ -149,11 +149,11 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
               placeholder="##" 
               min="0"
               max="100"
-              value="${Math.round((this.#K.opacity??1)*100)}"
+              value="${Math.round((this.#_.opacity??1)*100)}"
               units="%"
               ${Q?"disabled":""}>
             </fig-input-number>
-          </fig-tooltip>`;break;case"video":q=`
+          </fig-tooltip>`;break;case"video":K=`
           <label class="fig-input-fill-label">Video</label>
           <fig-tooltip text="Opacity">
             <fig-input-number 
@@ -165,7 +165,7 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
               units="%"
               ${Q?"disabled":""}>
             </fig-input-number>
-          </fig-tooltip>`;break;case"webcam":q=`
+          </fig-tooltip>`;break;case"webcam":K=`
           <label class="fig-input-fill-label">Webcam</label>
           <fig-tooltip text="Opacity">
             <fig-input-number 
@@ -173,13 +173,16 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
               placeholder="##" 
               min="0"
               max="100"
-              value="${Math.round((this.#q.opacity??1)*100)}"
+              value="${Math.round((this.#K.opacity??1)*100)}"
               units="%"
               ${Q?"disabled":""}>
             </fig-input-number>
-          </fig-tooltip>`;break}$.insertAdjacentHTML("beforeend",q),requestAnimationFrame(()=>{this.#J=this.querySelector(".fig-input-fill-opacity"),this.#j=this.querySelector(".fig-input-fill-hex");const K=this.querySelector(".fig-input-fill-label");if(K&&this.#Q)K.addEventListener("click",()=>{const X=this.#Q.querySelector("fig-chit");if(X)X.click()});if(this.#j)this.#j.addEventListener("input",(X)=>{X.stopPropagation();const Y="#"+X.target.value.replace("#","");this.#_.color=Y,this.#O(),this.#R()}),this.#j.addEventListener("change",(X)=>{X.stopPropagation(),this.#z()});if(this.#J)this.#J.addEventListener("input",(X)=>{X.stopPropagation();const Y=parseFloat(X.target.value),W=isNaN(Y)?100:Y,N=W/100;switch(this.#$){case"solid":this.#_.alpha=N;break;case"gradient":this.#Z.stops.forEach((U)=>{U.opacity=W});break;case"image":this.#K.opacity=N;break;case"video":this.#X.opacity=N;break;case"webcam":this.#q.opacity=N;break}this.#O(),this.#M(N),this.#R()}),this.#J.addEventListener("change",(X)=>{X.stopPropagation(),this.#z()})})}#O(){if(this.#Q)this.#Q.setAttribute("value",JSON.stringify(this.value))}#M(Q){if(this.#Q){const $=this.#Q.querySelector("fig-chit");if($)$.setAttribute("alpha",Q)}}#R(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#z(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){switch(this.#$){case"solid":return{type:"solid",color:this.#_.color,alpha:this.#_.alpha,opacity:Math.round(this.#_.alpha*100)};case"gradient":return{type:"gradient",gradient:Q0(this.#Z)};case"image":return{type:"image",image:{...this.#K}};case"video":return{type:"video",video:{...this.#X}};case"webcam":return{type:"webcam",webcam:{...this.#q}};default:return{type:this.#$}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":const Z=this.#$;if(this.#W(),this.#Q)if(this.#$!==Z)this.#N();else this.#O(),this.#L();break;case"disabled":this.#U();break;case"mode":case"experimental":if(this.#Q)if(J)this.#Q.setAttribute(Q,J);else this.#Q.removeAttribute(Q);break}}}customElements.define("fig-input-fill",T0);class P0 extends HTMLElement{#$=[];#Q=[];#J=[];#j=null;static get observedAttributes(){return["value","disabled","min","max","expanded","add"]}get#_(){return this.hasAttribute("expanded")&&this.getAttribute("expanded")!=="false"}get#Z(){return!this.hasAttribute("add")||this.getAttribute("add")!=="false"}get#K(){const Q=parseInt(this.getAttribute("min"));return isNaN(Q)?2:Q}get#X(){const Q=parseInt(this.getAttribute("max"));return isNaN(Q)?8:Q}connectedCallback(){if(this.#j)cancelAnimationFrame(this.#j);this.#j=requestAnimationFrame(()=>{this.#j=null,this.#q(),this.#W()})}disconnectedCallback(){if(this.#j)cancelAnimationFrame(this.#j),this.#j=null;this.#Q=[],this.#J=[]}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":this.#q(),this.#L();break;case"disabled":this.#G();break;case"min":case"max":case"expanded":case"add":this.#W();break}}#q(){const Q=this.getAttribute("value");if(!Q){this.#$=[];return}const $=Q.trim();try{const J=JSON.parse($);if(Array.isArray(J)){this.#$=J.map((Z)=>{if(typeof Z==="string")return{color:Z.slice(0,7),alpha:Z.length>7?parseInt(Z.slice(7,9),16)/255:1};if(Z&&typeof Z==="object")return{color:Z.color||"#D9D9D9",alpha:Z.alpha!==void 0?Z.alpha:Z.opacity!==void 0?Z.opacity/100:1};return{color:"#D9D9D9",alpha:1}});return}}catch(J){}if($.includes(",")){this.#$=$.split(",").map((J)=>{const Z=J.trim();return{color:Z.slice(0,7),alpha:Z.length>7?parseInt(Z.slice(7,9),16)/255:1}});return}if($.startsWith("#")){this.#$=[{color:$.slice(0,7),alpha:$.length>7?parseInt($.slice(7,9),16)/255:1}];return}this.#$=[]}get value(){return this.#$.map((Q)=>({...Q}))}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}#W(){const Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";this.innerHTML="",this.#Q=[],this.#J=[];const $=document.createElement("div");$.className="palette-colors-inline";const J=document.createElement("div");if(J.className="palette-colors",this.#$.forEach((j,_)=>{J.appendChild(this.#Y(j,_,Q,{inline:!0}))}),$.appendChild(J),this.#Z)this.#U(Q,$);this.appendChild($);const Z=document.createElement("div");Z.className="palette-colors-expanded",this.#$.forEach((j,_)=>{Z.appendChild(this.#Y(j,_,Q))}),this.appendChild(Z)}#Y(Q,$,J,{inline:Z=!1}={}){const j=Q.alpha<1?Q.color+Math.round(Q.alpha*255).toString(16).padStart(2,"0"):Q.color,_=document.createElement("fig-input-color");if(_.setAttribute("value",j),_.setAttribute("picker","figma"),_.setAttribute("picker-anchor","self"),Z)_.setAttribute("text","false"),_.setAttribute("alpha","true");else _.setAttribute("text","true"),_.setAttribute("alpha","true"),_.setAttribute("full","");if(J)_.setAttribute("disabled","");const q=Z?this.#J:this.#Q,K=(X)=>{X.stopPropagation();const Y=X.currentTarget;this.#$[$]={color:Y.hexOpaque||this.#$[$].color,alpha:Y.rgba?Y.rgba.a:this.#$[$].alpha};const W=q[$];if(W){const N=this.#$[$],U=N.alpha<1?N.color+Math.round(N.alpha*255).toString(16).padStart(2,"0"):N.color;W.setAttribute("value",U)}};if(_.addEventListener("input",(X)=>{K(X),this.#O()}),_.addEventListener("change",(X)=>{K(X),this.#M()}),Z)this.#Q.push(_);else this.#J.push(_);return _}#U(Q,$=this){const J=this.#$.length>=this.#X,Z=document.createElement("fig-button");if(Z.setAttribute("variant","ghost"),Z.setAttribute("icon","true"),Z.setAttribute("aria-label","Add color"),Z.className="palette-add-btn",Q||J)Z.setAttribute("disabled","");Z.innerHTML='<span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>',Z.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(this.#$.length>=this.#X)return;this.#N({color:"#D9D9D9",alpha:1})});const j=document.createElement("fig-tooltip");j.setAttribute("text","Add color"),j.appendChild(Z),$.appendChild(j)}#N(Q){this.#$.push(Q);const $=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.#$.length-1,Z=this.#Y(Q,J,$,{inline:!0}),j=this.querySelector(".palette-colors");if(j)j.appendChild(Z);const _=this.#Y(Q,J,$),q=this.querySelector(".palette-colors-expanded");if(q)q.appendChild(_);if(this.#$.length>=this.#X){const K=this.querySelector(".palette-add-btn");if(K)K.setAttribute("disabled","")}this.#M()}#B(Q){const $=this.#$[Q];if(!$)return;const J=$.alpha<1?$.color+Math.round($.alpha*255).toString(16).padStart(2,"0"):$.color,Z=this.#Q[Q];if(Z)Z.setAttribute("value",J);const j=this.#J[Q];if(j)j.setAttribute("value",J)}#L(){if(this.#Q.length!==this.#$.length){this.#W();return}this.#$.forEach((Q,$)=>{this.#B($)})}#G(){const Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";[...this.#Q,...this.#J].forEach((J)=>{if(Q)J.setAttribute("disabled","");else J.removeAttribute("disabled")});const $=this.querySelector(".palette-add-btn");if($)if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}#O(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#M(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}}customElements.define("fig-input-palette",P0);class c extends HTMLElement{static SHIFT_SNAP=5;#$;#Q;#J=!1;#j=null;#_=null;#Z={type:"linear",angle:180,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};constructor(){super()}static get observedAttributes(){return["value","disabled"]}connectedCallback(){this.#X(),this.#U(),document.addEventListener("keydown",this.#K)}disconnectedCallback(){if(document.removeEventListener("keydown",this.#K),this.#_)this.#_.disconnect(),this.#_=null;clearTimeout(this.#j),this.removeEventListener("pointerenter",this.#O),this.removeEventListener("pointermove",this.#R),this.removeEventListener("pointerleave",this.#M),this.removeEventListener("click",this.#A),this.removeEventListener("dblclick",this.#E)}#K=(Q)=>{const $=document.activeElement,J=$&&($.tagName==="INPUT"||$.tagName==="TEXTAREA"||$.isContentEditable);if(!this.#Q)return;if(Q.key==="Tab"&&!J){const _=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!_)return;Q.preventDefault();const q=[...this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")],K=q.indexOf(_),X=Q.shiftKey?(K-1+q.length)%q.length:(K+1)%q.length;_.deselect(),q[X].select();return}if((Q.key==="ArrowLeft"||Q.key==="ArrowRight")&&!J){const _=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!_)return;const q=parseInt(_.dataset.stopIndex,10);if(isNaN(q)||!this.#Z.stops[q])return;Q.preventDefault();const K=(Q.key==="ArrowRight"?1:-1)*(Q.shiftKey?c.SHIFT_SNAP:1),X=this.#Z.stops[q];X.position=Math.max(0,Math.min(100,X.position+K)),_.setAttribute("value",`${X.position}% 50%`);const Y=_.closest("fig-tooltip");if(Y)Y.text=`${Math.round(X.position)}%`,Y.setAttribute("show","true"),Y.showPopup(),_.hideColorTip(),clearTimeout(this.#j),this.#j=setTimeout(()=>{Y.removeAttribute("show"),_.showColorTip()},600);this.#P(),this.#D(),this.#k();return}if(Q.key!=="Delete"&&Q.key!=="Backspace")return;if(J)return;if(this.#Z.stops.length<=2)return;const Z=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!Z)return;const j=parseInt(Z.dataset.stopIndex,10);if(isNaN(j)||!this.#Z.stops[j])return;Q.preventDefault(),Z.removeAttribute("selected"),this.#Z.stops.splice(j,1),this.#f(),this.#P(),this.#D(),this.#k()};#X(){const Q=this.getAttribute("value");if(!Q)return;try{const $=JSON.parse(Q);if($?.type==="gradient"&&$.gradient){this.#Z=w({...this.#Z,...$.gradient});return}if($?.gradient)this.#Z=w({...this.#Z,...$.gradient})}catch($){}}#q(){const $=[...this.#Z.stops].sort((J,Z)=>J.position-Z.position).map((J)=>`${J.color} ${J.position}%`).join(", ");return`linear-gradient(${this.#Z.angle}deg, ${$})`}#W(){const Q=this.hasAttribute("disabled");return this.#Z.stops.map(($,J)=>`<fig-tooltip action="manual" text="${Math.round($.position)}%"><fig-handle drag drag-axes="x" drag-surface=".fig-input-gradient-track" type="color" color="${$.color}" value="${$.position}% 50%" data-stop-index="${J}"${Q?" disabled":""}></fig-handle></fig-tooltip>`).join("")}#Y=null;#U(){const Q=this.hasAttribute("disabled");this.innerHTML=`
-      <fig-chit size="medium" background="${this.#q()}"${Q?" disabled":""}></fig-chit>
-      <div class="fig-input-gradient-track">${this.#W()}</div>`,this.#$=this.querySelector("fig-chit"),this.#Q=this.querySelector(".fig-input-gradient-track"),this.#B(),this.#C()}#N(Q){const{ctx:$}=e(256,1);$.clearRect(0,0,256,1);const J=$.createLinearGradient(0,0,256,0);for(let K of this.#Z.stops)try{J.addColorStop(K.position/100,K.color)}catch{}$.fillStyle=J,$.fillRect(0,0,256,1);const Z=Math.round(Math.max(0,Math.min(255,Q*255))),[j,_,q]=$.getImageData(Z,0,1,1).data;return`#${j.toString(16).padStart(2,"0")}${_.toString(16).padStart(2,"0")}${q.toString(16).padStart(2,"0")}`.toUpperCase()}#B(){if(!this.#Q||this.hasAttribute("disabled"))return;const Q=document.createElement("fig-handle");Q.classList.add("fig-input-gradient-ghost"),Q.style.position="absolute",Q.style.top="50%",Q.style.transform="translate(-50%, -50%)",Q.style.pointerEvents="none",Q.style.opacity="0",Q.style.transition="opacity 0.15s",Q.style.overflow="visible";const $=document.createElement("fig-color-tip");$.setAttribute("control","add"),$.style.position="absolute",$.style.bottom="calc(100% + 6px)",$.style.left="50%",$.style.transform="translateX(-50%)",$.style.zIndex="10",Q.appendChild($),this.#Q.appendChild(Q),this.#Y=Q,this.addEventListener("pointerenter",this.#O),this.addEventListener("pointermove",this.#R),this.addEventListener("pointerleave",this.#M),this.addEventListener("click",this.#A),this.addEventListener("dblclick",this.#E)}#L(){if(!this.#Y)return;this.#Y.style.opacity="1"}#G(){if(!this.#Y)return;this.#Y.style.opacity="0"}#O=()=>{if(this.#J)return;this.#L()};#M=()=>{this.#G()};#R=(Q)=>{if(this.#J){this.#G();return}if(!this.#Y||!this.#Q)return;if(Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)")){this.#G();return}const $=this.#Q.getBoundingClientRect(),J=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width));this.#Y.style.left=`${J*100}%`;const Z=this.#N(J);this.#Y.setAttribute("color",Z),this.#L()};#z(){const Q=this.#Z.stops.length;if(Q<2)return;for(let $=0;$<Q;$++)this.#Z.stops[$].position=Math.round($/(Q-1)*100);this.#f(),this.#P(),this.#D(),this.#k()}#E=(Q)=>{if(!this.#Q)return;if(!Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)"))return;this.#z(),this.#Q.querySelectorAll("fig-handle[selected]").forEach(($)=>{$.removeAttribute("selected")})};#A=(Q)=>{if(!this.#Q)return;if(this.#J)return;if(Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)")){if(Q.shiftKey){const q=Q.target.closest("fig-handle"),K=parseInt(q?.dataset.stopIndex,10);if(this.#z(),!isNaN(K))this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((X)=>{if(parseInt(X.dataset.stopIndex,10)===K)X.select();else X.deselect()});Q.stopPropagation()}return}const $=this.#Q.getBoundingClientRect(),J=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width)),Z=Math.round(J*100),j=this.#N(J);this.#Z.stops.push({position:Z,color:j,opacity:100}),this.#Z.stops.sort((q,K)=>q.position-K.position);const _=this.#Z.stops.findIndex((q)=>q.position===Z&&q.color===j);this.#f(),this.#P(),this.#D(),this.#k(),requestAnimationFrame(()=>{const K=this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")[_];if(K)K.click()})};#f(){if(!this.#Q)return;const Q=this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)"),$=this.#Z.stops;if(Q.length!==$.length){const J=this.#Y;if(this.#Q.innerHTML=this.#W(),J)this.#Q.appendChild(J);this.#T();return}for(let J=0;J<$.length;J++){const Z=Q[J],j=$[J];Z.dataset.stopIndex=J,Z.setAttribute("value",`${j.position}% 50%`),Z.setAttribute("color",j.color);const _=Z.closest("fig-tooltip");if(_)_.setAttribute("text",`${Math.round(j.position)}%`)}}#T(){if(!this.#_||!this.#Q)return;this.#_.disconnect(),this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((Q)=>{this.#_.observe(Q,{attributes:!0,attributeFilter:["color"]})})}#F(){if(!this.#Q)return;const Q=this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)"),$=this.#Z.stops,J=new Set;Q.forEach((Z)=>{const j=Math.round(parseFloat(Z.getAttribute("value"))||0),_=(Z.getAttribute("color")||"").toUpperCase();let q=-1;for(let K=0;K<$.length;K++){if(J.has(K))continue;if($[K].position===j&&$[K].color.toUpperCase()===_){q=K;break}}if(q===-1){let K=1/0;for(let X=0;X<$.length;X++){if(J.has(X))continue;const Y=Math.abs($[X].position-j);if(Y<K)K=Y,q=X}}if(q!==-1)J.add(q),Z.dataset.stopIndex=q})}#P(){if(!this.#$)return;this.#$.setAttribute("background",this.#q())}#C(){if(!this.#Q)return;this.#Q.addEventListener("pointerdown",(Q)=>{if(this.hasAttribute("disabled"))return;if(Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)"))return;if(Q.button!==0)return;Q.preventDefault();const $=this.#Q.getBoundingClientRect(),J=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width)),Z=Math.round(J*100),j=this.#N(J);this.#Z.stops.push({position:Z,color:j,opacity:100}),this.#Z.stops.sort((X,Y)=>X.position-Y.position);const _=this.#Z.stops.findIndex((X)=>X.position===Z&&X.color===j);this.#f(),this.#P(),this.#D(),this.#G();const K=this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")[_];if(K)K.select(),K.dispatchEvent(new PointerEvent("pointerdown",{bubbles:!0,clientX:Q.clientX,clientY:Q.clientY,pointerId:Q.pointerId,pointerType:Q.pointerType,button:Q.button,buttons:Q.buttons}))}),this.#Q.addEventListener("input",(Q)=>{const $=Q.target.closest("fig-handle");if(!$)return;if(Q.stopPropagation(),!this.#J)$.style.zIndex="5";this.#J=!0;const J=parseInt($.dataset.stopIndex,10);if(isNaN(J)||!this.#Z.stops[J])return;const Z=Q.detail?.px??0,j=Math.round(Z*100);let _=j;const q=this.#Q.getBoundingClientRect().width;if(Q.detail?.shiftKey)_=Math.round(_/c.SHIFT_SNAP)*c.SHIFT_SNAP;else{const X=q>0?5/q*100:0;for(let Y=0;Y<this.#Z.stops.length;Y++){if(Y===J)continue;if(Math.abs(this.#Z.stops[Y].position-_)<=X){_=this.#Z.stops[Y].position;break}}}if(this.#Z.stops[J].position=_,_!==j)$.style.left=`${_/100*q-$.offsetWidth/2}px`;const K=$.closest("fig-tooltip");if(K){if(K.text=`${Math.round(_)}%`,!K.hasAttribute("show"))K.setAttribute("show","true"),$.hideColorTip()}this.#P(),this.#D()}),this.#Q.addEventListener("change",(Q)=>{const $=Q.target.closest("fig-handle");if(!$)return;Q.stopPropagation(),$.style.zIndex="";const J=$.closest("fig-tooltip");if(J)J.removeAttribute("show");$.showColorTip();const Z=parseInt($.dataset.stopIndex,10);if(isNaN(Z)||!this.#Z.stops[Z])return;const j=Q.detail?.px??0;let _=Math.round(j*100);const q=this.#Q.getBoundingClientRect().width,K=q>0?5/q*100:0;for(let X=0;X<this.#Z.stops.length;X++){if(X===Z)continue;if(Math.abs(this.#Z.stops[X].position-_)<=K){_=this.#Z.stops[X].position;break}}this.#Z.stops[Z].position=_,$.style.left=`${_/100*q-$.offsetWidth/2}px`,this.#Z.stops.sort((X,Y)=>X.position-Y.position),this.#F(),this.#P(),this.#k(),requestAnimationFrame(()=>{this.#J=!1})}),this.#_=new MutationObserver((Q)=>{for(let $ of Q){if($.attributeName!=="color")continue;const J=$.target;if(J.classList.contains("fig-input-gradient-ghost"))continue;const Z=parseInt(J.dataset.stopIndex,10);if(isNaN(Z)||!this.#Z.stops[Z])continue;const j=J.getAttribute("color");if(j&&j!==this.#Z.stops[Z].color)this.#Z.stops[Z].color=j,this.#P(),this.#D()}}),this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((Q)=>{this.#_.observe(Q,{attributes:!0,attributeFilter:["color"]})})}#D(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#k(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){return{type:"gradient",gradient:Q0(this.#Z)}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":this.#X(),this.#P(),this.#f();break;case"disabled":this.#H();break}}#H(){const Q=this.hasAttribute("disabled");if(this.#$)if(Q)this.#$.setAttribute("disabled","");else this.#$.removeAttribute("disabled");if(this.#Q)for(let $ of this.#Q.querySelectorAll("fig-handle"))if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}}customElements.define("fig-input-gradient",c);class t extends HTMLElement{#$=null;#Q;constructor(){super();this.input=document.createElement("input"),this.name=this.getAttribute("name")||"checkbox",this.input.value=this.getAttribute("value")||"",this.input.setAttribute("id",g()),this.input.setAttribute("name",this.name),this.input.setAttribute("type","checkbox"),this.input.setAttribute("role","checkbox"),this.#Q=this.handleInput.bind(this)}connectedCallback(){const Q=this.querySelector(":scope > input");if(Q)this.input=Q;else if(!this.input.parentNode)this.append(this.input);if(this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.removeEventListener("change",this.#Q),this.input.addEventListener("change",this.#Q),this.hasAttribute("disabled"))this.input.disabled=!0;if(this.hasAttribute("indeterminate"))this.input.indeterminate=!0,this.input.setAttribute("indeterminate","true");const $=this.querySelector(":scope > label");if($)this.#$=$,this.#$.setAttribute("for",this.input.id);if(this.hasAttribute("label"))this.#J(),this.#$.innerText=this.getAttribute("label");this.render()}static get observedAttributes(){return["disabled","label","checked","name","value","indeterminate"]}#J(){if(!this.#$)this.#$=document.createElement("label"),this.#$.setAttribute("for",this.input.id);if(this.#$&&!this.#$.parentNode&&this.input.parentNode)this.input.after(this.#$)}render(){}focus(){this.input.focus()}get value(){return this.input.value}set value(Q){this.input.value=Q,this.setAttribute("value",Q)}get checked(){return this.input.checked}set checked(Q){if(this.input.checked=Q,Q)this.setAttribute("checked","");else this.removeAttribute("checked")}disconnectedCallback(){this.input.removeEventListener("change",this.#Q),this.input.remove()}attributeChangedCallback(Q,$,J){switch(Q){case"label":if(J)this.#J(),this.#$.innerText=J;else if(this.#$)this.#$.remove(),this.#$=null;break;case"checked":if(this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.checked&&this.hasAttribute("indeterminate"))this.removeAttribute("indeterminate");if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"indeterminate":if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"value":this.input.value=J;break;default:this.input[Q]=J,this.input.setAttribute(Q,J);break}}handleInput(Q){if(Q.stopPropagation(),this.input.indeterminate=!1,this.input.removeAttribute("indeterminate"),this.input.setAttribute("aria-checked",this.input.checked),this.input.checked)this.setAttribute("checked","");else this.removeAttribute("checked");this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{checked:this.input.checked,value:this.input.value}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.input.checked,value:this.input.value}}))}}customElements.define("fig-checkbox",t);class H0 extends t{constructor(){super();this.input.setAttribute("type","radio"),this.input.setAttribute("name",this.getAttribute("name")||"radio")}}customElements.define("fig-radio",H0);class f0 extends t{render(){this.input.setAttribute("class","switch"),this.input.setAttribute("role","switch")}}customElements.define("fig-switch",f0);class C0 extends HTMLDialogElement{_defaultOffset=16;_autoCloseTimer=null;#$;constructor(){super();this.#$=this.handleClose.bind(this)}getOffset(){return parseInt(this.getAttribute("offset")??this._defaultOffset)}connectedCallback(){if(typeof this._defaultOffset!=="number")this._defaultOffset=16;if(typeof this._autoCloseTimer==="undefined")this._autoCloseTimer=null;if(!this.hasAttribute("theme"))this.setAttribute("theme","dark");const Q=this.getAttribute("open")==="true"||this.getAttribute("open")==="";if(this.hasAttribute("open")&&!Q)this.removeAttribute("open");if(!Q)this.close();requestAnimationFrame(()=>{if(this.addCloseListeners(),this.applyPosition(),Q)this.showToast()})}disconnectedCallback(){this.clearAutoClose()}addCloseListeners(){this.querySelectorAll("[close-toast]").forEach((Q)=>{Q.removeEventListener("click",this.#$),Q.addEventListener("click",this.#$)})}handleClose(){this.hideToast()}applyPosition(){this.style.position="fixed",this.style.margin="0",this.style.top="auto",this.style.bottom=`${this.getOffset()}px`,this.style.left="50%",this.style.right="auto",this.style.transform="translateX(-50%)"}startAutoClose(){this.clearAutoClose();const Q=parseInt(this.getAttribute("duration")??"5000");if(Q>0)this._autoCloseTimer=setTimeout(()=>{this.hideToast()},Q)}clearAutoClose(){if(this._autoCloseTimer)clearTimeout(this._autoCloseTimer),this._autoCloseTimer=null}#Q(){if(this.getAttribute("theme")!=="auto")return;const $=(getComputedStyle(document.documentElement).colorScheme||"").includes("dark");this.style.colorScheme=$?"light":"dark"}showToast(){this.#Q(),this.show(),this.applyPosition(),this.startAutoClose(),this.dispatchEvent(new CustomEvent("toast-show",{bubbles:!0}))}hideToast(){this.clearAutoClose(),this.close(),this.dispatchEvent(new CustomEvent("toast-hide",{bubbles:!0}))}static get observedAttributes(){return["duration","offset","open","theme"]}attributeChangedCallback(Q,$,J){if(Q==="offset")this.applyPosition();if(Q==="open")if(J!==null&&J!=="false")this.showToast();else this.hideToast();if(Q==="theme")if(J==="auto")this.#Q();else this.style.removeProperty("color-scheme")}}n("fig-toast",C0,{extends:"dialog"});class S0 extends HTMLElement{#$=!1;#Q=null;constructor(){super();this.#Q=this.handleSelectInput.bind(this)}getOptionsFromAttribute(){return(this.getAttribute("options")||"").split(",")}connectedCallback(){const Q=Array.from(this.children).find((j)=>j.tagName==="FIG-DROPDOWN")||null;if(this.#$=Q!==null,Q)Q.remove();this.options=this.getOptionsFromAttribute(),this.placeholder=this.getAttribute("placeholder")||"",this.value=this.getAttribute("value")||"";const $=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"",Z=this.#$?"":`<fig-dropdown type="dropdown" ${J}>
+          </fig-tooltip>`;break}$.insertAdjacentHTML("beforeend",K),requestAnimationFrame(()=>{this.#J=this.querySelector(".fig-input-fill-opacity"),this.#j=this.querySelector(".fig-input-fill-hex");const _=this.querySelector(".fig-input-fill-label");if(_&&this.#Q)_.addEventListener("click",()=>{const X=this.#Q.querySelector("fig-chit");if(X)X.click()});if(this.#j)this.#j.addEventListener("input",(X)=>{X.stopPropagation();const Y="#"+X.target.value.replace("#","");this.#q.color=Y,this.#O(),this.#E()}),this.#j.addEventListener("change",(X)=>{X.stopPropagation(),this.#z()});if(this.#J)this.#J.addEventListener("input",(X)=>{X.stopPropagation();const Y=parseFloat(X.target.value),N=(isNaN(Y)?100:Y)/100;switch(this.#$){case"solid":this.#q.alpha=N;break;case"gradient":break;case"image":this.#_.opacity=N;break;case"video":this.#X.opacity=N;break;case"webcam":this.#K.opacity=N;break}this.#O(),this.#M(N),this.#E()}),this.#J.addEventListener("change",(X)=>{X.stopPropagation(),this.#z()})})}#O(){if(this.#Q)this.#Q.setAttribute("value",JSON.stringify(this.value))}#M(Q){if(this.#Q){const $=this.#Q.querySelector("fig-chit");if($)$.setAttribute("alpha",Q)}}#E(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#z(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){switch(this.#$){case"solid":return{type:"solid",color:this.#q.color,alpha:this.#q.alpha,opacity:Math.round(this.#q.alpha*100)};case"gradient":return{type:"gradient",gradient:o(this.#Z)};case"image":return{type:"image",image:{...this.#_}};case"video":return{type:"video",video:{...this.#X}};case"webcam":return{type:"webcam",webcam:{...this.#K}};default:return{type:this.#$}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":const Z=this.#$;if(this.#Y(),this.#Q)if(this.#$!==Z)this.#W();else this.#O(),this.#G();break;case"disabled":this.#U();break;case"mode":case"experimental":if(this.#Q)if(J)this.#Q.setAttribute(Q,J);else this.#Q.removeAttribute(Q);break}}}customElements.define("fig-input-fill",x0);class V0 extends HTMLElement{#$=[];#Q=[];#J=[];#j=null;static get observedAttributes(){return["value","disabled","min","max","expanded","add"]}get#q(){return this.hasAttribute("expanded")&&this.getAttribute("expanded")!=="false"}get#Z(){return!this.hasAttribute("add")||this.getAttribute("add")!=="false"}get#_(){const Q=parseInt(this.getAttribute("min"));return isNaN(Q)?2:Q}get#X(){const Q=parseInt(this.getAttribute("max"));return isNaN(Q)?8:Q}connectedCallback(){if(this.#j)cancelAnimationFrame(this.#j);this.#j=requestAnimationFrame(()=>{this.#j=null,this.#K(),this.#Y()})}disconnectedCallback(){if(this.#j)cancelAnimationFrame(this.#j),this.#j=null;this.#Q=[],this.#J=[]}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":this.#K(),this.#G();break;case"disabled":this.#B();break;case"min":case"max":case"expanded":case"add":this.#Y();break}}#K(){const Q=this.getAttribute("value");if(!Q){this.#$=[];return}const $=Q.trim();try{const J=JSON.parse($);if(Array.isArray(J)){this.#$=J.map((Z)=>{if(typeof Z==="string")return{color:Z.slice(0,7),alpha:Z.length>7?parseInt(Z.slice(7,9),16)/255:1};if(Z&&typeof Z==="object")return{color:Z.color||"#D9D9D9",alpha:Z.alpha!==void 0?Z.alpha:Z.opacity!==void 0?Z.opacity/100:1};return{color:"#D9D9D9",alpha:1}});return}}catch(J){}if($.includes(",")){this.#$=$.split(",").map((J)=>{const Z=J.trim();return{color:Z.slice(0,7),alpha:Z.length>7?parseInt(Z.slice(7,9),16)/255:1}});return}if($.startsWith("#")){this.#$=[{color:$.slice(0,7),alpha:$.length>7?parseInt($.slice(7,9),16)/255:1}];return}this.#$=[]}get value(){return this.#$.map((Q)=>({...Q}))}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}#Y(){const Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";this.innerHTML="",this.#Q=[],this.#J=[];const $=document.createElement("div");$.className="palette-colors-inline";const J=document.createElement("div");if(J.className="palette-colors",this.#$.forEach((j,q)=>{J.appendChild(this.#N(j,q,Q,{inline:!0}))}),$.appendChild(J),this.#Z)this.#U(Q,$);this.appendChild($);const Z=document.createElement("div");Z.className="palette-colors-expanded",this.#$.forEach((j,q)=>{Z.appendChild(this.#N(j,q,Q))}),this.appendChild(Z)}#N(Q,$,J,{inline:Z=!1}={}){const j=Q.alpha<1?Q.color+Math.round(Q.alpha*255).toString(16).padStart(2,"0"):Q.color,q=document.createElement("fig-input-color");if(q.setAttribute("value",j),q.setAttribute("picker","figma"),q.setAttribute("picker-anchor","self"),Z)q.setAttribute("text","false"),q.setAttribute("alpha","true");else q.setAttribute("text","true"),q.setAttribute("alpha","true"),q.setAttribute("full","");if(J)q.setAttribute("disabled","");const K=Z?this.#J:this.#Q,_=(X)=>{X.stopPropagation();const Y=X.currentTarget;this.#$[$]={color:Y.hexOpaque||this.#$[$].color,alpha:Y.rgba?Y.rgba.a:this.#$[$].alpha};const W=K[$];if(W){const N=this.#$[$],U=N.alpha<1?N.color+Math.round(N.alpha*255).toString(16).padStart(2,"0"):N.color;W.setAttribute("value",U)}};if(q.addEventListener("input",(X)=>{_(X),this.#O()}),q.addEventListener("change",(X)=>{_(X),this.#M()}),Z)this.#Q.push(q);else this.#J.push(q);return q}#U(Q,$=this){const J=this.#$.length>=this.#X,Z=document.createElement("fig-button");if(Z.setAttribute("variant","ghost"),Z.setAttribute("icon","true"),Z.setAttribute("aria-label","Add color"),Z.className="palette-add-btn",Q||J)Z.setAttribute("disabled","");Z.innerHTML='<span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>',Z.addEventListener("click",()=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(this.#$.length>=this.#X)return;this.#W({color:"#D9D9D9",alpha:1})});const j=document.createElement("fig-tooltip");j.setAttribute("text","Add color"),j.appendChild(Z),$.appendChild(j)}#W(Q){this.#$.push(Q);const $=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.#$.length-1,Z=this.#N(Q,J,$,{inline:!0}),j=this.querySelector(".palette-colors");if(j)j.appendChild(Z);const q=this.#N(Q,J,$),K=this.querySelector(".palette-colors-expanded");if(K)K.appendChild(q);if(this.#$.length>=this.#X){const _=this.querySelector(".palette-add-btn");if(_)_.setAttribute("disabled","")}this.#M()}#L(Q){const $=this.#$[Q];if(!$)return;const J=$.alpha<1?$.color+Math.round($.alpha*255).toString(16).padStart(2,"0"):$.color,Z=this.#Q[Q];if(Z)Z.setAttribute("value",J);const j=this.#J[Q];if(j)j.setAttribute("value",J)}#G(){if(this.#Q.length!==this.#$.length){this.#Y();return}this.#$.forEach((Q,$)=>{this.#L($)})}#B(){const Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";[...this.#Q,...this.#J].forEach((J)=>{if(Q)J.setAttribute("disabled","");else J.removeAttribute("disabled")});const $=this.querySelector(".palette-add-btn");if($)if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}#O(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#M(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}}customElements.define("fig-input-palette",V0);class l extends HTMLElement{static SHIFT_SNAP=5;#$;#Q;#J=!1;#j=null;#q=null;#Z={type:"linear",angle:180,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};constructor(){super()}static get observedAttributes(){return["value","disabled","edit"]}get#_(){const Q=this.getAttribute("edit");if(Q==="false")return"false";if(Q==="picker")return"picker";return"true"}get#X(){return this.#_==="true"}connectedCallback(){if(this.#Y(),this.#B(),this.#X)document.addEventListener("keydown",this.#K)}disconnectedCallback(){if(document.removeEventListener("keydown",this.#K),this.#q)this.#q.disconnect(),this.#q=null;clearTimeout(this.#j),this.removeEventListener("pointerenter",this.#R),this.removeEventListener("pointermove",this.#k),this.removeEventListener("pointerleave",this.#H),this.removeEventListener("click",this.#S),this.removeEventListener("dblclick",this.#I)}#K=(Q)=>{const $=document.activeElement,J=$&&($.tagName==="INPUT"||$.tagName==="TEXTAREA"||$.isContentEditable);if(!this.#Q)return;if(Q.key==="Tab"&&!J){const q=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!q)return;Q.preventDefault();const K=[...this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")],_=K.indexOf(q),X=Q.shiftKey?(_-1+K.length)%K.length:(_+1)%K.length;q.deselect(),K[X].select();return}if((Q.key==="ArrowLeft"||Q.key==="ArrowRight")&&!J){const q=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!q)return;const K=parseInt(q.dataset.stopIndex,10);if(isNaN(K)||!this.#Z.stops[K])return;Q.preventDefault();const _=(Q.key==="ArrowRight"?1:-1)*(Q.shiftKey?l.SHIFT_SNAP:1),X=this.#Z.stops[K];X.position=Math.max(0,Math.min(100,X.position+_)),q.setAttribute("value",`${X.position}% 50%`);const Y=q.closest("fig-tooltip");if(Y)Y.text=`${Math.round(X.position)}%`,Y.setAttribute("show","true"),Y.showPopup(),q.hideColorTip(),clearTimeout(this.#j),this.#j=setTimeout(()=>{Y.removeAttribute("show"),q.showColorTip()},600);this.#C(),this.#x(),this.#V();return}if(Q.key!=="Delete"&&Q.key!=="Backspace")return;if(J)return;if(this.#Z.stops.length<=2)return;const Z=this.#Q.querySelector("fig-handle[selected]:not(.fig-input-gradient-ghost)");if(!Z)return;const j=parseInt(Z.dataset.stopIndex,10);if(isNaN(j)||!this.#Z.stops[j])return;Q.preventDefault(),Z.removeAttribute("selected"),this.#Z.stops.splice(j,1),this.#T(),this.#C(),this.#x(),this.#V()};#Y(){const Q=this.getAttribute("value");if(!Q)return;try{const $=JSON.parse(Q);if($?.type==="gradient"&&$.gradient){this.#Z=V({...this.#Z,...$.gradient}),this.#Z.type="linear",this.#Z.angle=90;return}if($?.gradient)this.#Z=V({...this.#Z,...$.gradient}),this.#Z.type="linear",this.#Z.angle=90}catch($){}}#N(){const $=[...this.#Z.stops].sort((Z,j)=>Z.position-j.position).map((Z)=>{const j=(Z.opacity??100)/100;if(j>=1)return`${Z.color} ${Z.position}%`;const{r:q,g:K,b:_}=t(Z.color);return`rgba(${q}, ${K}, ${_}, ${j}) ${Z.position}%`}).join(", "),J=y0(this.#Z);return`linear-gradient(${this.#Z.angle}deg ${J}, ${$})`}#U(Q){const $=(Q.opacity??100)/100;if($>=1)return Q.color;const{r:J,g:Z,b:j}=t(Q.color);return`rgba(${J}, ${Z}, ${j}, ${$})`}#W(){const Q=this.hasAttribute("disabled");return this.#Z.stops.map(($,J)=>`<fig-tooltip action="manual" text="${Math.round($.position)}%"><fig-handle drag drag-axes="x" drag-surface=".fig-input-gradient-track" type="color" color="${this.#U($)}" value="${$.position}% 50%" hit-area="4" data-stop-index="${J}"${Q?" disabled":""}></fig-handle></fig-tooltip>`).join("")}#L=null;#G=!1;#B(){const Q=this.hasAttribute("disabled"),$=this.#_;if($==="picker"){const J=this.getAttribute("experimental"),Z=J?` experimental="${J}"`:"",j=JSON.stringify(this.value);this.innerHTML=`
+        <fig-fill-picker mode="gradient"${Z} value='${j}'${Q?" disabled":""}>
+          <fig-chit size="medium" background="${this.#N()}"${Q?" disabled":""}></fig-chit>
+        </fig-fill-picker>`,this.#$=this.querySelector("fig-chit"),this.#Q=null,this.#O();return}if(this.innerHTML=`
+      <fig-chit size="medium" background="${this.#N()}"${Q?" disabled":""}></fig-chit>
+      ${$==="true"?`<div class="fig-input-gradient-track">${this.#W()}</div>`:""}`,this.#$=this.querySelector("fig-chit"),this.#Q=this.querySelector(".fig-input-gradient-track"),$==="true")this.#E(),this.#f(),requestAnimationFrame(()=>this.#D())}#O(){const Q=this.querySelector("fig-fill-picker");if(!Q)return;Q.anchorElement=this;const $=(J)=>{J.stopPropagation();const Z=J.detail;if(!Z?.gradient)return;this.#Z=V({...this.#Z,...Z.gradient}),this.#C()};Q.addEventListener("input",(J)=>{$(J),this.#x()}),Q.addEventListener("change",(J)=>{$(J),this.#V()})}#M(Q){return X5(this.#Z.stops,Q,this.#Z.interpolationSpace,this.#Z.hueInterpolation)}#E(){if(!this.#Q||this.hasAttribute("disabled"))return;const Q=document.createElement("fig-handle");Q.classList.add("fig-input-gradient-ghost"),Q.setAttribute("type","color"),Q.setAttribute("control","add"),Q.style.position="absolute",Q.style.top="50%",Q.style.transform="translate(-50%, -50%)",Q.style.pointerEvents="none",Q.style.opacity="0",Q.style.transition="opacity 0.15s",this.#Q.appendChild(Q),this.#L=Q,this.addEventListener("pointerenter",this.#R),this.addEventListener("pointermove",this.#k),this.addEventListener("pointerleave",this.#H),this.addEventListener("click",this.#S),this.addEventListener("dblclick",this.#I)}#z(){if(!this.#L)return;this.#L.style.opacity="1"}#A(){if(!this.#L)return;this.#L.style.opacity="0"}#R=()=>{if(this.#J)return;this.#z()};#H=()=>{this.#A()};#k=(Q)=>{if(this.#J){this.#A();return}if(!this.#L||!this.#Q)return;if(Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)")){this.#A();return}const $=this.#Q.getBoundingClientRect(),J=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width));this.#L.style.left=`${J*100}%`;const Z=this.#M(J);this.#L.setAttribute("color",Z),this.#z()};#F(){const Q=this.#Z.stops.length;if(Q<2)return;for(let $=0;$<Q;$++)this.#Z.stops[$].position=Math.round($/(Q-1)*100);this.#T(),this.#C(),this.#x(),this.#V()}#I=(Q)=>{if(!this.#Q)return;if(!Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)"))return;this.#F(),this.#Q.querySelectorAll("fig-handle[selected]").forEach(($)=>{$.removeAttribute("selected")})};#S=(Q)=>{if(!this.#Q)return;if(this.#J)return;if(this.#G){this.#G=!1;return}if(Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)")){if(Q.shiftKey){const K=Q.target.closest("fig-handle"),_=parseInt(K?.dataset.stopIndex,10);if(this.#F(),!isNaN(_))this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((X)=>{if(parseInt(X.dataset.stopIndex,10)===_)X.select();else X.deselect()});Q.stopPropagation()}return}const $=this.#Q.getBoundingClientRect(),J=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width)),Z=Math.round(J*100),j=this.#M(J);this.#Z.stops.push({position:Z,color:j,opacity:100}),this.#Z.stops.sort((K,_)=>K.position-_.position);const q=this.#Z.stops.findIndex((K)=>K.position===Z&&K.color===j);this.#T(),this.#C(),this.#x(),this.#V(),requestAnimationFrame(()=>{const _=this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")[q];if(_)_.click()})};#D(){if(!this.#Q)return;const Q=this.#Z.stops;this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach(($,J)=>{if(J>=Q.length)return;$.removeAttribute("value"),$.setAttribute("value",`${Q[J].position}% 50%`)})}#T(){if(!this.#Q)return;const Q=this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)"),$=this.#Z.stops;if(Q.length!==$.length){const J=this.#L;if(this.#Q.innerHTML=this.#W(),J)this.#Q.appendChild(J);this.#P(),requestAnimationFrame(()=>this.#D());return}for(let J=0;J<$.length;J++){const Z=Q[J],j=$[J];Z.dataset.stopIndex=J,Z.setAttribute("value",`${j.position}% 50%`),Z.setAttribute("color",this.#U(j));const q=Z.closest("fig-tooltip");if(q)q.setAttribute("text",`${Math.round(j.position)}%`)}}#P(){if(!this.#q||!this.#Q)return;this.#q.disconnect(),this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((Q)=>{this.#q.observe(Q,{attributes:!0,attributeFilter:["color"]})})}#w(){if(!this.#Q)return;const Q=this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)"),$=this.#Z.stops,J=new Set;Q.forEach((Z)=>{const j=Math.round(parseFloat(Z.getAttribute("value"))||0),q=(Z.getAttribute("color")||"").toUpperCase();let K=-1;for(let _=0;_<$.length;_++){if(J.has(_))continue;if($[_].position===j&&$[_].color.toUpperCase()===q){K=_;break}}if(K===-1){let _=1/0;for(let X=0;X<$.length;X++){if(J.has(X))continue;const Y=Math.abs($[X].position-j);if(Y<_)_=Y,K=X}}if(K!==-1)J.add(K),Z.dataset.stopIndex=K})}#C(){if(!this.#$)return;this.#$.setAttribute("background",this.#N())}#f(){if(!this.#Q)return;this.#Q.addEventListener("pointerdown",(Q)=>{if(this.hasAttribute("disabled"))return;if(Q.target.closest("fig-handle:not(.fig-input-gradient-ghost)"))return;if(Q.button!==0)return;Q.preventDefault(),Q.stopPropagation();const $=this.#Q.getBoundingClientRect(),J=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width)),Z=Math.round(J*100),j=this.#M(J);this.#Z.stops.push({position:Z,color:j,opacity:100}),this.#Z.stops.sort((X,Y)=>X.position-Y.position);const q=this.#Z.stops.findIndex((X)=>X.position===Z&&X.color===j);this.#G=!0,this.#T(),this.#C(),this.#x(),this.#A();const _=this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")[q];if(_)this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((X)=>{if(X!==_)X.deselect()}),_.select(),_.dispatchEvent(new PointerEvent("pointerdown",{bubbles:!0,clientX:Q.clientX,clientY:Q.clientY,pointerId:Q.pointerId,pointerType:Q.pointerType,button:Q.button,buttons:Q.buttons}))}),this.#Q.addEventListener("input",(Q)=>{const $=Q.target.closest("fig-handle");if(!$)return;if(Q.stopPropagation(),Q.detail?.color){const X=parseInt($.dataset.stopIndex,10);if(!isNaN(X)&&this.#Z.stops[X]){if(this.#Z.stops[X].color=Q.detail.color,Q.detail.opacity!==void 0)this.#Z.stops[X].opacity=Q.detail.opacity;$.setAttribute("color",this.#U(this.#Z.stops[X])),this.#C(),this.#x()}return}if(!this.#J)$.style.zIndex="5";this.#J=!0;const J=parseInt($.dataset.stopIndex,10);if(isNaN(J)||!this.#Z.stops[J])return;const Z=Q.detail?.px??0,j=Math.round(Z*100);let q=j;const K=this.#Q.getBoundingClientRect().width;if(Q.detail?.shiftKey)q=Math.round(q/l.SHIFT_SNAP)*l.SHIFT_SNAP;else{const X=K>0?5/K*100:0;for(let Y=0;Y<this.#Z.stops.length;Y++){if(Y===J)continue;if(Math.abs(this.#Z.stops[Y].position-q)<=X){q=this.#Z.stops[Y].position;break}}}if(this.#Z.stops[J].position=q,q!==j)$.style.left=`${q/100*K-$.offsetWidth/2}px`;const _=$.closest("fig-tooltip");if(_){if(_.text=`${Math.round(q)}%`,!_.hasAttribute("show"))_.setAttribute("show","true"),$.hideColorTip()}this.#C(),this.#x()}),this.#Q.addEventListener("change",(Q)=>{const $=Q.target.closest("fig-handle");if(!$)return;if(Q.stopPropagation(),Q.detail?.color){const X=parseInt($.dataset.stopIndex,10);if(!isNaN(X)&&this.#Z.stops[X]){if(this.#Z.stops[X].color=Q.detail.color,Q.detail.opacity!==void 0)this.#Z.stops[X].opacity=Q.detail.opacity;$.setAttribute("color",this.#U(this.#Z.stops[X])),this.#C(),this.#V()}return}$.style.zIndex="";const J=$.closest("fig-tooltip");if(J)J.removeAttribute("show");$.showColorTip();const Z=parseInt($.dataset.stopIndex,10);if(isNaN(Z)||!this.#Z.stops[Z])return;const j=Q.detail?.px??0;let q=Math.round(j*100);const K=this.#Q.getBoundingClientRect().width,_=K>0?5/K*100:0;for(let X=0;X<this.#Z.stops.length;X++){if(X===Z)continue;if(Math.abs(this.#Z.stops[X].position-q)<=_){q=this.#Z.stops[X].position;break}}this.#Z.stops[Z].position=q,$.style.left=`${q/100*K-$.offsetWidth/2}px`,this.#Z.stops.sort((X,Y)=>X.position-Y.position),this.#w(),this.#C(),this.#V(),requestAnimationFrame(()=>{this.#J=!1})}),this.#q=new MutationObserver((Q)=>{for(let $ of Q){if($.attributeName!=="color")continue;const J=$.target;if(J.classList.contains("fig-input-gradient-ghost"))continue;const Z=parseInt(J.dataset.stopIndex,10);if(isNaN(Z)||!this.#Z.stops[Z])continue;const j=J.getAttribute("color");if(!j||!j.startsWith("#"))continue;if(j!==this.#Z.stops[Z].color)this.#Z.stops[Z].color=j,this.#C(),this.#x()}}),this.#Q.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((Q)=>{this.#q.observe(Q,{attributes:!0,attributeFilter:["color"]})})}#x(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#V(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){return{type:"gradient",gradient:o(this.#Z)}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":this.#Y(),this.#C(),this.#T();break;case"disabled":this.#m();break;case"edit":if(this.#B(),this.#X)document.addEventListener("keydown",this.#K);else document.removeEventListener("keydown",this.#K);break}}#m(){const Q=this.hasAttribute("disabled");if(this.#$)if(Q)this.#$.setAttribute("disabled","");else this.#$.removeAttribute("disabled");if(this.#Q)for(let $ of this.#Q.querySelectorAll("fig-handle"))if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}}customElements.define("fig-input-gradient",l);class J0 extends HTMLElement{#$=null;#Q;constructor(){super();this.input=document.createElement("input"),this.name=this.getAttribute("name")||"checkbox",this.input.value=this.getAttribute("value")||"",this.input.setAttribute("id",s()),this.input.setAttribute("name",this.name),this.input.setAttribute("type","checkbox"),this.input.setAttribute("role","checkbox"),this.#Q=this.handleInput.bind(this)}connectedCallback(){const Q=this.querySelector(":scope > input");if(Q)this.input=Q;else if(!this.input.parentNode)this.append(this.input);if(this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.removeEventListener("change",this.#Q),this.input.addEventListener("change",this.#Q),this.hasAttribute("disabled"))this.input.disabled=!0;if(this.hasAttribute("indeterminate"))this.input.indeterminate=!0,this.input.setAttribute("indeterminate","true");const $=this.querySelector(":scope > label");if($)this.#$=$,this.#$.setAttribute("for",this.input.id);if(this.hasAttribute("label"))this.#J(),this.#$.innerText=this.getAttribute("label");this.render()}static get observedAttributes(){return["disabled","label","checked","name","value","indeterminate"]}#J(){if(!this.#$)this.#$=document.createElement("label"),this.#$.setAttribute("for",this.input.id);if(this.#$&&!this.#$.parentNode&&this.input.parentNode)this.input.after(this.#$)}render(){}focus(){this.input.focus()}get value(){return this.input.value}set value(Q){this.input.value=Q,this.setAttribute("value",Q)}get checked(){return this.input.checked}set checked(Q){if(this.input.checked=Q,Q)this.setAttribute("checked","");else this.removeAttribute("checked")}disconnectedCallback(){this.input.removeEventListener("change",this.#Q),this.input.remove()}attributeChangedCallback(Q,$,J){switch(Q){case"label":if(J)this.#J(),this.#$.innerText=J;else if(this.#$)this.#$.remove(),this.#$=null;break;case"checked":if(this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.checked&&this.hasAttribute("indeterminate"))this.removeAttribute("indeterminate");if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"indeterminate":if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"value":this.input.value=J;break;default:this.input[Q]=J,this.input.setAttribute(Q,J);break}}handleInput(Q){if(Q.stopPropagation(),this.input.indeterminate=!1,this.input.removeAttribute("indeterminate"),this.input.setAttribute("aria-checked",this.input.checked),this.input.checked)this.setAttribute("checked","");else this.removeAttribute("checked");this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{checked:this.input.checked,value:this.input.value}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.input.checked,value:this.input.value}}))}}customElements.define("fig-checkbox",J0);class w0 extends J0{constructor(){super();this.input.setAttribute("type","radio"),this.input.setAttribute("name",this.getAttribute("name")||"radio")}}customElements.define("fig-radio",w0);class b0 extends J0{render(){this.input.setAttribute("class","switch"),this.input.setAttribute("role","switch")}}customElements.define("fig-switch",b0);class v0 extends HTMLDialogElement{_defaultOffset=16;_autoCloseTimer=null;#$;constructor(){super();this.#$=this.handleClose.bind(this)}getOffset(){return parseInt(this.getAttribute("offset")??this._defaultOffset)}connectedCallback(){if(typeof this._defaultOffset!=="number")this._defaultOffset=16;if(typeof this._autoCloseTimer==="undefined")this._autoCloseTimer=null;if(!this.hasAttribute("theme"))this.setAttribute("theme","dark");const Q=this.getAttribute("open")==="true"||this.getAttribute("open")==="";if(this.hasAttribute("open")&&!Q)this.removeAttribute("open");if(!Q)this.close();requestAnimationFrame(()=>{if(this.addCloseListeners(),this.applyPosition(),Q)this.showToast()})}disconnectedCallback(){this.clearAutoClose()}addCloseListeners(){this.querySelectorAll("[close-toast]").forEach((Q)=>{Q.removeEventListener("click",this.#$),Q.addEventListener("click",this.#$)})}handleClose(){this.hideToast()}applyPosition(){this.style.position="fixed",this.style.margin="0",this.style.top="auto",this.style.bottom=`${this.getOffset()}px`,this.style.left="50%",this.style.right="auto",this.style.transform="translateX(-50%)"}startAutoClose(){this.clearAutoClose();const Q=parseInt(this.getAttribute("duration")??"5000");if(Q>0)this._autoCloseTimer=setTimeout(()=>{this.hideToast()},Q)}clearAutoClose(){if(this._autoCloseTimer)clearTimeout(this._autoCloseTimer),this._autoCloseTimer=null}#Q(){if(this.getAttribute("theme")!=="auto")return;const $=(getComputedStyle(document.documentElement).colorScheme||"").includes("dark");this.style.colorScheme=$?"light":"dark"}showToast(){this.#Q(),this.show(),this.applyPosition(),this.startAutoClose(),this.dispatchEvent(new CustomEvent("toast-show",{bubbles:!0}))}hideToast(){this.clearAutoClose(),this.close(),this.dispatchEvent(new CustomEvent("toast-hide",{bubbles:!0}))}static get observedAttributes(){return["duration","offset","open","theme"]}attributeChangedCallback(Q,$,J){if(Q==="offset")this.applyPosition();if(Q==="open")if(J!==null&&J!=="false")this.showToast();else this.hideToast();if(Q==="theme")if(J==="auto")this.#Q();else this.style.removeProperty("color-scheme")}}q0("fig-toast",v0,{extends:"dialog"});class m0 extends HTMLElement{#$=!1;#Q=null;constructor(){super();this.#Q=this.handleSelectInput.bind(this)}getOptionsFromAttribute(){return(this.getAttribute("options")||"").split(",")}connectedCallback(){const Q=Array.from(this.children).find((j)=>j.tagName==="FIG-DROPDOWN")||null;if(this.#$=Q!==null,Q)Q.remove();this.options=this.getOptionsFromAttribute(),this.placeholder=this.getAttribute("placeholder")||"",this.value=this.getAttribute("value")||"";const $=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"",Z=this.#$?"":`<fig-dropdown type="dropdown" ${J}>
                               ${this.options.map((j)=>`<option>${j}</option>`).join("")}
                             </fig-dropdown>`;this.innerHTML=`<div class="input-combo">
                         <fig-input-text placeholder="${this.placeholder}">
@@ -190,13 +193,13 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
 </svg>
                             ${Z}
                         </fig-button>
-                    </div>`,requestAnimationFrame(()=>{this.input=this.querySelector("fig-input-text");const j=this.querySelector("fig-button");if(this.#$&&Q&&j){if(!Q.hasAttribute("type"))Q.setAttribute("type","dropdown");if($)Q.setAttribute("experimental",$);j.append(Q)}if(this.dropdown=this.querySelector("fig-dropdown"),this.dropdown?.removeEventListener("input",this.#Q),this.dropdown?.addEventListener("input",this.#Q),this.input)this.input.setAttribute("value",this.value);if(this.hasAttribute("disabled"))this.#J(!0)})}disconnectedCallback(){this.dropdown?.removeEventListener("input",this.#Q)}handleSelectInput(Q){this.setAttribute("value",Q.target.closest("fig-dropdown").value)}handleInput(Q){this.value=this.input.value}static get observedAttributes(){return["options","placeholder","value","disabled","experimental"]}focus(){this.input.focus()}#J(Q){if(this.input)if(Q)this.input.setAttribute("disabled","");else this.input.removeAttribute("disabled");const $=this.querySelector("fig-button");if($)if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}attributeChangedCallback(Q,$,J){switch(Q){case"options":if(this.options=J.split(","),this.dropdown&&!this.#$)this.dropdown.innerHTML=this.options.map((Z)=>`<option>${Z}</option>`).join("");break;case"placeholder":if(this.placeholder=J,this.input)this.input.setAttribute("placeholder",J);break;case"value":if(this.value=J,this.input)this.input.setAttribute("value",J);break;case"disabled":this.#J(J!==null&&J!=="false");break;case"experimental":if(this.dropdown){if(J)this.dropdown.setAttribute("experimental",J);else if(!this.#$)this.dropdown.removeAttribute("experimental")}break}}}customElements.define("fig-combo-input",S0);class I0 extends HTMLElement{#$="color";#Q=null;#J=!1;constructor(){super();this.#Q=this.#q.bind(this)}static get observedAttributes(){return["background","size","selected","disabled","alpha"]}connectedCallback(){this.#X(),this.#j()}#j(){const Q=this.getAttribute("alpha");if(Q!==null)this.style.setProperty("--alpha",Q);else this.style.removeProperty("--alpha")}#_(Q){if(!Q)return"color";const $=Q.toLowerCase();if($.includes("gradient"))return"gradient";if($.includes("url("))return"image";return"color"}#Z(Q){if(!Q)return"#D9D9D9";if(Q.startsWith("#"))return Q.slice(0,7);try{const{ctx:$}=e(1,1);return $.fillStyle=Q,$.fillStyle}catch{return"#D9D9D9"}}#K(Q){if(!Q||!Q.includes("var("))return Q;const $=this.style.background;this.style.background=Q;const J=getComputedStyle(this),Z=J.backgroundImage,j=J.backgroundColor;if(this.style.background=$,Z&&Z!=="none")return Z;return j||Q}#X(){const Q=this.getAttribute("background")||"#D9D9D9",$=Q.includes("var("),J=$?this.#K(Q):Q,Z=this.#_(J);if(Z!==this.#$||!this.input){if(this.#$=Z,this.setAttribute("data-type",this.#$),this.input)this.input.removeEventListener("input",this.#Q);if(this.#$==="color"){const j=this.#Z(J);if(this.innerHTML=`<input type="color" value="${j}" />`,this.input=this.querySelector("input"),!$)this.input.addEventListener("input",this.#Q)}else this.innerHTML="",this.input=null}else if(this.#$==="color"&&this.input){const j=this.#Z(J);if(this.input.value!==j)this.input.value=j}this.style.setProperty("--chit-background",Q)}#q(Q){this.#J=!0,this.setAttribute("background",Q.target.value),this.#J=!1}get background(){return this.getAttribute("background")}set background(Q){this.setAttribute("background",Q)}focus(){this.input?.focus()}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="background"){if(this.#J){this.style.setProperty("--chit-background",J);return}this.#X()}else if(Q==="alpha")this.#j()}get alpha(){return this.getAttribute("alpha")}set alpha(Q){if(Q===null||Q===void 0)this.removeAttribute("alpha");else this.setAttribute("alpha",Q)}}customElements.define("fig-chit",I0);class y0 extends HTMLElement{#$=null;#Q=this.#X.bind(this);#J=this.#Z.bind(this);constructor(){super()}#j(){const Q=this.hasAttribute("checkerboard")&&this.getAttribute("checkerboard")!=="false";return`<fig-chit size="large" data-type="image" background="${this.src?`url(${this.src})`:Q?"url()":"var(--figma-color-bg-secondary)"}" disabled${Q?" checkerboard":""}></fig-chit><div>${this.upload?`<fig-button variant="overlay" type="upload">
+                    </div>`,requestAnimationFrame(()=>{this.input=this.querySelector("fig-input-text");const j=this.querySelector("fig-button");if(this.#$&&Q&&j){if(!Q.hasAttribute("type"))Q.setAttribute("type","dropdown");if($)Q.setAttribute("experimental",$);j.append(Q)}if(this.dropdown=this.querySelector("fig-dropdown"),this.dropdown?.removeEventListener("input",this.#Q),this.dropdown?.addEventListener("input",this.#Q),this.input)this.input.setAttribute("value",this.value);if(this.hasAttribute("disabled"))this.#J(!0)})}disconnectedCallback(){this.dropdown?.removeEventListener("input",this.#Q)}handleSelectInput(Q){this.setAttribute("value",Q.target.closest("fig-dropdown").value)}handleInput(Q){this.value=this.input.value}static get observedAttributes(){return["options","placeholder","value","disabled","experimental"]}focus(){this.input.focus()}#J(Q){if(this.input)if(Q)this.input.setAttribute("disabled","");else this.input.removeAttribute("disabled");const $=this.querySelector("fig-button");if($)if(Q)$.setAttribute("disabled","");else $.removeAttribute("disabled")}attributeChangedCallback(Q,$,J){switch(Q){case"options":if(this.options=J.split(","),this.dropdown&&!this.#$)this.dropdown.innerHTML=this.options.map((Z)=>`<option>${Z}</option>`).join("");break;case"placeholder":if(this.placeholder=J,this.input)this.input.setAttribute("placeholder",J);break;case"value":if(this.value=J,this.input)this.input.setAttribute("value",J);break;case"disabled":this.#J(J!==null&&J!=="false");break;case"experimental":if(this.dropdown){if(J)this.dropdown.setAttribute("experimental",J);else if(!this.#$)this.dropdown.removeAttribute("experimental")}break}}}customElements.define("fig-combo-input",m0);class K0 extends HTMLElement{#$="color";#Q=null;#J=!1;constructor(){super();this.#Q=this.#K.bind(this)}static get observedAttributes(){return["background","size","selected","disabled","alpha"]}connectedCallback(){this.#X(),this.#j()}#j(){const Q=this.getAttribute("alpha");if(Q!==null)this.style.setProperty("--alpha",Q);else this.style.removeProperty("--alpha")}#q(Q){if(!Q)return"color";const $=Q.toLowerCase();if($.includes("gradient"))return"gradient";if($.includes("url("))return"image";return"color"}#Z(Q){if(!Q)return"#D9D9D9";if(Q.startsWith("#"))return Q.slice(0,7);try{const{ctx:$}=O0(1,1);return $.fillStyle=Q,$.fillStyle}catch{return"#D9D9D9"}}#_(Q){if(!Q||!Q.includes("var("))return Q;const $=this.style.background;this.style.background=Q;const J=getComputedStyle(this),Z=J.backgroundImage,j=J.backgroundColor;if(this.style.background=$,Z&&Z!=="none")return Z;return j||Q}#X(){const Q=this.getAttribute("background")||"#D9D9D9",$=Q.includes("var("),J=$?this.#_(Q):Q,Z=this.#q(J);if(Z!==this.#$||!this.input){if(this.#$=Z,this.setAttribute("data-type",this.#$),this.input)this.input.removeEventListener("input",this.#Q);if(this.#$==="color"){const q=this.#Z(J);if(this.innerHTML=`<input type="color" value="${q}" />`,this.input=this.querySelector("input"),!$)this.input.addEventListener("input",this.#Q)}else this.innerHTML="",this.input=null}else if(this.#$==="color"&&this.input){const q=this.#Z(J);if(this.input.value!==q)this.input.value=q}const j=/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(Q);this.style.setProperty("--chit-background",j?Q:`linear-gradient(${Q}, ${Q})`)}#K(Q){this.#J=!0,this.setAttribute("background",Q.target.value),this.#J=!1}get background(){return this.getAttribute("background")}set background(Q){this.setAttribute("background",Q)}focus(){this.input?.focus()}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="background"){if(this.#J){const Z=/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(J);this.style.setProperty("--chit-background",Z?J:`linear-gradient(${J}, ${J})`);return}this.#X()}else if(Q==="alpha")this.#j()}get alpha(){return this.getAttribute("alpha")}set alpha(Q){if(Q===null||Q===void 0)this.removeAttribute("alpha");else this.setAttribute("alpha",Q)}}customElements.define("fig-chit",K0);class h0 extends K0{}customElements.define("fig-swatch",h0);class g0 extends HTMLElement{#$=null;#Q=this.#X.bind(this);#J=this.#Z.bind(this);constructor(){super()}#j(){const Q=this.hasAttribute("checkerboard")&&this.getAttribute("checkerboard")!=="false";return`<fig-chit size="large" data-type="image" background="${this.src?`url(${this.src})`:Q?"url()":"var(--figma-color-bg-secondary)"}" disabled${Q?" checkerboard":""}></fig-chit><div>${this.upload?`<fig-button variant="overlay" type="upload">
           ${this.label} 
           <input type="file" accept="image/*" />
         </fig-button>`:""} ${this.download?`<fig-button variant="overlay" icon="true" type="download">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M17.5 13C17.7761 13 18 13.2239 18 13.5V16.5C18 17.3284 17.3284 18 16.5 18H7.5C6.67157 18 6 17.3284 6 16.5V13.5C6 13.2239 6.22386 13 6.5 13C6.77614 13 7 13.2239 7 13.5V16.5C7 16.7761 7.22386 17 7.5 17H16.5C16.7761 17 17 16.7761 17 16.5V13.5C17 13.2239 17.2239 13 17.5 13ZM12 6C12.2761 6 12.5 6.22386 12.5 6.5V12.293L14.6465 10.1465C14.8417 9.95122 15.1583 9.95122 15.3535 10.1465C15.5488 10.3417 15.5488 10.6583 15.3535 10.8535L12.3535 13.8535C12.2597 13.9473 12.1326 14 12 14C11.9006 14 11.8042 13.9704 11.7227 13.916L11.6465 13.8535L8.64648 10.8535C8.45122 10.6583 8.45122 10.3417 8.64648 10.1465C8.84175 9.95122 9.15825 9.95122 9.35352 10.1465L11.5 12.293V6.5C11.5 6.22386 11.7239 6 12 6Z" fill="black"/>
-</svg></fig-button>`:""}</div>`}connectedCallback(){this.#$=this.getAttribute("src")||"",this.upload=this.hasAttribute("upload")&&this.getAttribute("upload")!=="false",this.download=this.hasAttribute("download")&&this.getAttribute("download")!=="false",this.label=this.getAttribute("label")||"Upload",this.size=this.getAttribute("size")||"small",this.innerHTML=this.#j(),this.#_();const Q=this.getAttribute("aspect-ratio");if(Q&&Q!=="auto")this.style.setProperty("--aspect-ratio",Q);const $=this.getAttribute("fit");if($)this.style.setProperty("--fit",$)}disconnectedCallback(){this.fileInput?.removeEventListener("change",this.#Q),this.downloadButton?.removeEventListener("click",this.#J)}#_(){requestAnimationFrame(()=>{if(this.chit=this.querySelector("fig-chit"),this.upload)this.uploadButton=this.querySelector("fig-button[type='upload']"),this.fileInput=this.uploadButton?.querySelector("input"),this.fileInput?.removeEventListener("change",this.#Q),this.fileInput?.addEventListener("change",this.#Q);if(this.download)this.downloadButton=this.querySelector("fig-button[type='download']"),this.downloadButton?.removeEventListener("click",this.#J),this.downloadButton?.addEventListener("click",this.#J)})}#Z(){const Q=document.createElement("a");Q.href=this.blob,Q.download="image.png",Q.click()}async#K(Q){await new Promise(($)=>{this.image=new Image,this.image.crossOrigin="Anonymous",this.image.onload=async()=>{this.aspectRatio=this.image.width/this.image.height;const J=this.getAttribute("aspect-ratio");if(!J||J==="auto")this.style.setProperty("--aspect-ratio",`${this.image.width}/${this.image.height}`);this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{blob:this.blob,base64:this.base64}})),$();const Z=document.createElement("canvas"),j=Z.getContext("2d");Z.width=this.image.width,Z.height=this.image.height,j.drawImage(this.image,0,0),this.base64=Z.toDataURL(),Z.toBlob((_)=>{if(this.blob)URL.revokeObjectURL(this.blob);if(_)this.blob=URL.createObjectURL(_)})},this.image.src=Q})}async#X(Q){if(this.blob)URL.revokeObjectURL(this.blob);this.blob=URL.createObjectURL(Q.target.files[0]);const $=new FileReader;$.readAsDataURL(Q.target.files[0]),await new Promise((J)=>{$.onload=(Z)=>{this.base64=Z.target.result,J()}}),this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{blob:this.blob,base64:this.base64}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0})),this.setAttribute("src",this.blob)}static get observedAttributes(){return["src","upload","download","aspect-ratio","fit","checkerboard"]}get src(){return this.#$}set src(Q){this.#$=Q,this.setAttribute("src",Q)}attributeChangedCallback(Q,$,J){if(Q==="src"){if(this.#$=J,this.chit){const Z=this.hasAttribute("checkerboard")&&this.getAttribute("checkerboard")!=="false";if(this.#$)this.chit.setAttribute("background",`url(${this.#$})`);else this.chit.setAttribute("background",Z?"url()":"var(--figma-color-bg-secondary)")}if(this.#$)this.#K(this.#$)}if(Q==="upload")this.upload=J!==null&&J!=="false",this.innerHTML=this.#j(),this.#_();if(Q==="download")this.download=J!==null&&J!=="false",this.innerHTML=this.#j(),this.#_();if(Q==="size")this.size=J;if(Q==="aspect-ratio"){if(J&&J!=="auto")this.style.setProperty("--aspect-ratio",J);else if(!J)this.style.removeProperty("--aspect-ratio")}if(Q==="fit")if(J)this.style.setProperty("--fit",J);else this.style.removeProperty("--fit");if(Q==="checkerboard"){if(this.chit)if(J!==null&&J!=="false")this.chit.setAttribute("checkerboard","");else this.chit.removeAttribute("checkerboard")}}}customElements.define("fig-image",y0);class V extends HTMLElement{#$={x:0.42,y:0};#Q={x:0.58,y:1};#J={stiffness:200,damping:15,mass:1};#j="bezier";#_=2;#Z=null;#K=null;#X=null;#q=null;#W=null;#Y=null;#U=null;#N=null;#B=null;#L=null;#G=null;#O=null;#M=0.8;#R=200;#z=200;#E=null;#A=null;#f=null;#T=5;#F=2;#P=10;#C=10;#D=3;static PRESETS=[{group:null,name:"Linear",type:"bezier",value:[0,0,1,1]},{group:"Bezier",name:"Ease in",type:"bezier",value:[0.42,0,1,1]},{group:"Bezier",name:"Ease out",type:"bezier",value:[0,0,0.58,1]},{group:"Bezier",name:"Ease in and out",type:"bezier",value:[0.42,0,0.58,1]},{group:"Bezier",name:"Ease in back",type:"bezier",value:[0.6,-0.28,0.735,0.045]},{group:"Bezier",name:"Ease out back",type:"bezier",value:[0.175,0.885,0.32,1.275]},{group:"Bezier",name:"Ease in and out back",type:"bezier",value:[0.68,-0.55,0.265,1.55]},{group:"Bezier",name:"Custom bezier",type:"bezier",value:null},{group:"Spring",name:"Gentle",type:"spring",spring:{stiffness:120,damping:14,mass:1}},{group:"Spring",name:"Quick",type:"spring",spring:{stiffness:380,damping:20,mass:1}},{group:"Spring",name:"Bouncy",type:"spring",spring:{stiffness:250,damping:8,mass:1}},{group:"Spring",name:"Slow",type:"spring",spring:{stiffness:60,damping:11,mass:1}},{group:"Spring",name:"Custom spring",type:"spring",spring:null}];static get observedAttributes(){return["value","precision","aspect-ratio"]}connectedCallback(){this.#_=parseInt(this.getAttribute("precision")||"2"),y(this,"--aspect-ratio",this.getAttribute("aspect-ratio"));const Q=this.getAttribute("value");if(Q)this.#k(Q);this.#G=this.#H(),this.#S(),this.#j0()}disconnectedCallback(){if(this.#Z=null,this.#f)this.#f.disconnect(),this.#f=null}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){if(y(this,"--aspect-ratio",J),this.#K)this.#a(),this.#V();return}if(!this.#K)return;if(Q==="value"&&J){const Z=this.#j;if(this.#k(J),this.#G=this.#H(),Z!==this.#j)this.#S();else this.#V(),this.#u()}if(Q==="precision")this.#_=parseInt(J||"2")}get value(){if(this.#j==="spring"){const{stiffness:$,damping:J,mass:Z}=this.#J;return`spring(${$}, ${J}, ${Z})`}const Q=this.#_;return`${this.#$.x.toFixed(Q)}, ${this.#$.y.toFixed(Q)}, ${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}`}get cssValue(){if(this.#j==="spring"){const $=this.#y(),Z=Math.max(1,Math.floor($.length/20)),j=[];for(let _=0;_<$.length;_+=Z)j.push($[_].value.toFixed(3));if($.length>0)j.push($[$.length-1].value.toFixed(3));return`linear(${j.join(", ")})`}const Q=this.#_;return`cubic-bezier(${this.#$.x.toFixed(Q)}, ${this.#$.y.toFixed(Q)}, ${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)})`}get preset(){return this.#G}set value(Q){this.setAttribute("value",Q)}#k(Q){const $=Q.match(/^spring\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if($){this.#j="spring",this.#J.stiffness=parseFloat($[1]),this.#J.damping=parseFloat($[2]),this.#J.mass=parseFloat($[3]);return}const J=Q.split(",").map((Z)=>parseFloat(Z.trim()));if(J.length>=4&&J.every((Z)=>!isNaN(Z)))this.#j="bezier",this.#$.x=J[0],this.#$.y=J[1],this.#Q.x=J[2],this.#Q.y=J[3]}#H(){if(this.#j==="bezier"){for(let $ of V.PRESETS){if($.type!=="bezier"||!$.value)continue;if(Math.abs(this.#$.x-$.value[0])<0.001&&Math.abs(this.#$.y-$.value[1])<0.001&&Math.abs(this.#Q.x-$.value[2])<0.001&&Math.abs(this.#Q.y-$.value[3])<0.001)return $.name}return"Custom bezier"}for(let $ of V.PRESETS){if($.type!=="spring"||!$.spring)continue;if(Math.abs(this.#J.stiffness-$.spring.stiffness)<0.001&&Math.abs(this.#J.damping-$.spring.damping)<0.001&&Math.abs(this.#J.mass-$.spring.mass)<0.001)return $.name}return"Custom spring"}#y(){const{stiffness:Q,damping:$,mass:J}=this.#J,_=[];let q=0,K=0;for(let X=0;X<=5;X+=0.004){const Y=-Q*(q-1)-$*K;if(K+=Y/J*0.004,q+=K*0.004,_.push({t:X,value:q}),X>0.1&&Math.abs(q-1)<0.0005&&Math.abs(K)<0.0005)break}return _}static#x(Q,$=24){const{stiffness:J,damping:Z,mass:j}=Q,K=[];let X=0,Y=0;for(let F=0;F<=5;F+=0.004){const E=-J*(X-1)-Z*Y;if(Y+=E/j*0.004,X+=Y*0.004,K.push({t:F,value:X}),F>0.1&&Math.abs(X-1)<0.001&&Math.abs(Y)<0.001)break}const W=K[K.length-1].t||1;let N=1;for(let F of K)if(F.value>N)N=F.value;let U=0;for(let F of K)if(F.value<U)U=F.value;const z=Math.max(N-U,1),O=6,L=$-O*2,B=Math.max(1,Math.floor(K.length/30));let M="";for(let F=0;F<K.length;F+=B){const E=O+K[F].t/W*L,k=O+(1-(K[F].value-U)/z)*L;M+=(F===0?"M":"L")+E.toFixed(1)+","+k.toFixed(1)}return`<svg width="${$}" height="${$}" viewBox="0 0 ${$} ${$}" fill="none"><path d="${M}" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none"/></svg>`}static curveIcon(Q,$,J,Z,j=24){const q=(j-12)/2,X=[],Y=(E,k,T,x,f)=>{const H=1-f;return H*H*H*E+3*H*H*f*k+3*H*f*f*T+f*f*f*x};for(let E=0;E<=48;E++){const k=E/48;X.push({x:Y(0,Q,J,1,k),y:Y(0,$,Z,1,k)})}let W=1/0,N=-1/0,U=1/0,z=-1/0;for(let E of X){if(E.x<W)W=E.x;if(E.x>N)N=E.x;if(E.y<U)U=E.y;if(E.y>z)z=E.y}const O=Math.max(N-W,0.000001),L=Math.max(z-U,0.000001),B=(E)=>q+(E-W)/O*12,M=(E)=>q+(1-(E-U)/L)*12;let F="";for(let E=0;E<X.length;E++){const k=B(X[E].x),T=M(X[E].y);F+=`${E===0?"M":"L"}${k.toFixed(1)},${T.toFixed(1)}`}return`<svg width="${j}" height="${j}" viewBox="0 0 ${j} ${j}" fill="none"><path d="${F}" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>`}#S(){this.classList.toggle("spring-mode",this.#j==="spring"),this.classList.toggle("bezier-mode",this.#j!=="spring"),this.#o(),this.innerHTML=this.#m(),this.#l(),this.#r(),this.#a(),this.#V(),this.#_0()}#b(){if(this.getAttribute("dropdown")!=="true")return"";let Q="",$=void 0;for(let J of V.PRESETS){if(J.group!==$){if($!==void 0)Q+="</optgroup>";if(J.group)Q+=`<optgroup label="${J.group}">`;$=J.group}let Z;if(J.type==="spring"){const _=J.spring||this.#J;Z=V.#x(_)}else{const _=J.value||[this.#$.x,this.#$.y,this.#Q.x,this.#Q.y];Z=V.curveIcon(..._)}const j=J.name===this.#G?" selected":"";Q+=`<option value="${J.name}"${j}>${Z} ${J.name}</option>`}if($)Q+="</optgroup>";return`<fig-dropdown class="fig-easing-curve-dropdown" full experimental="modern">${Q}</fig-dropdown>`}#m(){const $=this.#b();if(this.#j==="spring")return`${$}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
+</svg></fig-button>`:""}</div>`}connectedCallback(){this.#$=this.getAttribute("src")||"",this.upload=this.hasAttribute("upload")&&this.getAttribute("upload")!=="false",this.download=this.hasAttribute("download")&&this.getAttribute("download")!=="false",this.label=this.getAttribute("label")||"Upload",this.size=this.getAttribute("size")||"small",this.innerHTML=this.#j(),this.#q();const Q=this.getAttribute("aspect-ratio");if(Q&&Q!=="auto")this.style.setProperty("--aspect-ratio",Q);const $=this.getAttribute("fit");if($)this.style.setProperty("--fit",$)}disconnectedCallback(){this.fileInput?.removeEventListener("change",this.#Q),this.downloadButton?.removeEventListener("click",this.#J)}#q(){requestAnimationFrame(()=>{if(this.chit=this.querySelector("fig-chit"),this.upload)this.uploadButton=this.querySelector("fig-button[type='upload']"),this.fileInput=this.uploadButton?.querySelector("input"),this.fileInput?.removeEventListener("change",this.#Q),this.fileInput?.addEventListener("change",this.#Q);if(this.download)this.downloadButton=this.querySelector("fig-button[type='download']"),this.downloadButton?.removeEventListener("click",this.#J),this.downloadButton?.addEventListener("click",this.#J)})}#Z(){const Q=document.createElement("a");Q.href=this.blob,Q.download="image.png",Q.click()}async#_(Q){await new Promise(($)=>{this.image=new Image,this.image.crossOrigin="Anonymous",this.image.onload=async()=>{this.aspectRatio=this.image.width/this.image.height;const J=this.getAttribute("aspect-ratio");if(!J||J==="auto")this.style.setProperty("--aspect-ratio",`${this.image.width}/${this.image.height}`);this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{blob:this.blob,base64:this.base64}})),$();const Z=document.createElement("canvas"),j=Z.getContext("2d");Z.width=this.image.width,Z.height=this.image.height,j.drawImage(this.image,0,0),this.base64=Z.toDataURL(),Z.toBlob((q)=>{if(this.blob)URL.revokeObjectURL(this.blob);if(q)this.blob=URL.createObjectURL(q)})},this.image.src=Q})}async#X(Q){if(this.blob)URL.revokeObjectURL(this.blob);this.blob=URL.createObjectURL(Q.target.files[0]);const $=new FileReader;$.readAsDataURL(Q.target.files[0]),await new Promise((J)=>{$.onload=(Z)=>{this.base64=Z.target.result,J()}}),this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{blob:this.blob,base64:this.base64}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0})),this.setAttribute("src",this.blob)}static get observedAttributes(){return["src","upload","download","aspect-ratio","fit","checkerboard"]}get src(){return this.#$}set src(Q){this.#$=Q,this.setAttribute("src",Q)}attributeChangedCallback(Q,$,J){if(Q==="src"){if(this.#$=J,this.chit){const Z=this.hasAttribute("checkerboard")&&this.getAttribute("checkerboard")!=="false";if(this.#$)this.chit.setAttribute("background",`url(${this.#$})`);else this.chit.setAttribute("background",Z?"url()":"var(--figma-color-bg-secondary)")}if(this.#$)this.#_(this.#$)}if(Q==="upload")this.upload=J!==null&&J!=="false",this.innerHTML=this.#j(),this.#q();if(Q==="download")this.download=J!==null&&J!=="false",this.innerHTML=this.#j(),this.#q();if(Q==="size")this.size=J;if(Q==="aspect-ratio"){if(J&&J!=="auto")this.style.setProperty("--aspect-ratio",J);else if(!J)this.style.removeProperty("--aspect-ratio")}if(Q==="fit")if(J)this.style.setProperty("--fit",J);else this.style.removeProperty("--fit");if(Q==="checkerboard"){if(this.chit)if(J!==null&&J!=="false")this.chit.setAttribute("checkerboard","");else this.chit.removeAttribute("checkerboard")}}}customElements.define("fig-image",g0);class v extends HTMLElement{#$={x:0.42,y:0};#Q={x:0.58,y:1};#J={stiffness:200,damping:15,mass:1};#j="bezier";#q=2;#Z=null;#_=null;#X=null;#K=null;#Y=null;#N=null;#U=null;#W=null;#L=null;#G=null;#B=null;#O=null;#M=0.8;#E=200;#z=200;#A=null;#R=null;#H=null;#k=5;#F=2;#I=10;#S=10;#D=3;static PRESETS=[{group:null,name:"Linear",type:"bezier",value:[0,0,1,1]},{group:"Bezier",name:"Ease in",type:"bezier",value:[0.42,0,1,1]},{group:"Bezier",name:"Ease out",type:"bezier",value:[0,0,0.58,1]},{group:"Bezier",name:"Ease in and out",type:"bezier",value:[0.42,0,0.58,1]},{group:"Bezier",name:"Ease in back",type:"bezier",value:[0.6,-0.28,0.735,0.045]},{group:"Bezier",name:"Ease out back",type:"bezier",value:[0.175,0.885,0.32,1.275]},{group:"Bezier",name:"Ease in and out back",type:"bezier",value:[0.68,-0.55,0.265,1.55]},{group:"Bezier",name:"Custom bezier",type:"bezier",value:null},{group:"Spring",name:"Gentle",type:"spring",spring:{stiffness:120,damping:14,mass:1}},{group:"Spring",name:"Quick",type:"spring",spring:{stiffness:380,damping:20,mass:1}},{group:"Spring",name:"Bouncy",type:"spring",spring:{stiffness:250,damping:8,mass:1}},{group:"Spring",name:"Slow",type:"spring",spring:{stiffness:60,damping:11,mass:1}},{group:"Spring",name:"Custom spring",type:"spring",spring:null}];static get observedAttributes(){return["value","precision","aspect-ratio"]}connectedCallback(){this.#q=parseInt(this.getAttribute("precision")||"2"),x(this,"--aspect-ratio",this.getAttribute("aspect-ratio"));const Q=this.getAttribute("value");if(Q)this.#T(Q);this.#B=this.#P(),this.#f(),this.#j0()}disconnectedCallback(){if(this.#Z=null,this.#H)this.#H.disconnect(),this.#H=null}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){if(x(this,"--aspect-ratio",J),this.#_)this.#a(),this.#b();return}if(!this.#_)return;if(Q==="value"&&J){const Z=this.#j;if(this.#T(J),this.#B=this.#P(),Z!==this.#j)this.#f();else this.#b(),this.#u()}if(Q==="precision")this.#q=parseInt(J||"2")}get value(){if(this.#j==="spring"){const{stiffness:$,damping:J,mass:Z}=this.#J;return`spring(${$}, ${J}, ${Z})`}const Q=this.#q;return`${this.#$.x.toFixed(Q)}, ${this.#$.y.toFixed(Q)}, ${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}`}get cssValue(){if(this.#j==="spring"){const $=this.#w(),Z=Math.max(1,Math.floor($.length/20)),j=[];for(let q=0;q<$.length;q+=Z)j.push($[q].value.toFixed(3));if($.length>0)j.push($[$.length-1].value.toFixed(3));return`linear(${j.join(", ")})`}const Q=this.#q;return`cubic-bezier(${this.#$.x.toFixed(Q)}, ${this.#$.y.toFixed(Q)}, ${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)})`}get preset(){return this.#B}set value(Q){this.setAttribute("value",Q)}#T(Q){const $=Q.match(/^spring\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if($){this.#j="spring",this.#J.stiffness=parseFloat($[1]),this.#J.damping=parseFloat($[2]),this.#J.mass=parseFloat($[3]);return}const J=Q.split(",").map((Z)=>parseFloat(Z.trim()));if(J.length>=4&&J.every((Z)=>!isNaN(Z)))this.#j="bezier",this.#$.x=J[0],this.#$.y=J[1],this.#Q.x=J[2],this.#Q.y=J[3]}#P(){if(this.#j==="bezier"){for(let $ of v.PRESETS){if($.type!=="bezier"||!$.value)continue;if(Math.abs(this.#$.x-$.value[0])<0.001&&Math.abs(this.#$.y-$.value[1])<0.001&&Math.abs(this.#Q.x-$.value[2])<0.001&&Math.abs(this.#Q.y-$.value[3])<0.001)return $.name}return"Custom bezier"}for(let $ of v.PRESETS){if($.type!=="spring"||!$.spring)continue;if(Math.abs(this.#J.stiffness-$.spring.stiffness)<0.001&&Math.abs(this.#J.damping-$.spring.damping)<0.001&&Math.abs(this.#J.mass-$.spring.mass)<0.001)return $.name}return"Custom spring"}#w(){const{stiffness:Q,damping:$,mass:J}=this.#J,q=[];let K=0,_=0;for(let X=0;X<=5;X+=0.004){const Y=-Q*(K-1)-$*_;if(_+=Y/J*0.004,K+=_*0.004,q.push({t:X,value:K}),X>0.1&&Math.abs(K-1)<0.0005&&Math.abs(_)<0.0005)break}return q}static#C(Q,$=24){const{stiffness:J,damping:Z,mass:j}=Q,_=[];let X=0,Y=0;for(let F=0;F<=5;F+=0.004){const z=-J*(X-1)-Z*Y;if(Y+=z/j*0.004,X+=Y*0.004,_.push({t:F,value:X}),F>0.1&&Math.abs(X-1)<0.001&&Math.abs(Y)<0.001)break}const W=_[_.length-1].t||1;let N=1;for(let F of _)if(F.value>N)N=F.value;let U=0;for(let F of _)if(F.value<U)U=F.value;const O=Math.max(N-U,1),E=6,L=$-E*2,M=Math.max(1,Math.floor(_.length/30));let B="";for(let F=0;F<_.length;F+=M){const z=E+_[F].t/W*L,R=E+(1-(_[F].value-U)/O)*L;B+=(F===0?"M":"L")+z.toFixed(1)+","+R.toFixed(1)}return`<svg width="${$}" height="${$}" viewBox="0 0 ${$} ${$}" fill="none"><path d="${B}" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none"/></svg>`}static curveIcon(Q,$,J,Z,j=24){const K=(j-12)/2,X=[],Y=(z,R,k,T,S)=>{const C=1-S;return C*C*C*z+3*C*C*S*R+3*C*S*S*k+S*S*S*T};for(let z=0;z<=48;z++){const R=z/48;X.push({x:Y(0,Q,J,1,R),y:Y(0,$,Z,1,R)})}let W=1/0,N=-1/0,U=1/0,O=-1/0;for(let z of X){if(z.x<W)W=z.x;if(z.x>N)N=z.x;if(z.y<U)U=z.y;if(z.y>O)O=z.y}const E=Math.max(N-W,0.000001),L=Math.max(O-U,0.000001),M=(z)=>K+(z-W)/E*12,B=(z)=>K+(1-(z-U)/L)*12;let F="";for(let z=0;z<X.length;z++){const R=M(X[z].x),k=B(X[z].y);F+=`${z===0?"M":"L"}${R.toFixed(1)},${k.toFixed(1)}`}return`<svg width="${j}" height="${j}" viewBox="0 0 ${j} ${j}" fill="none"><path d="${F}" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>`}#f(){this.classList.toggle("spring-mode",this.#j==="spring"),this.classList.toggle("bezier-mode",this.#j!=="spring"),this.#o(),this.innerHTML=this.#V(),this.#l(),this.#i(),this.#a(),this.#b(),this.#$0()}#x(){if(this.getAttribute("dropdown")!=="true")return"";let Q="",$=void 0;for(let J of v.PRESETS){if(J.group!==$){if($!==void 0)Q+="</optgroup>";if(J.group)Q+=`<optgroup label="${J.group}">`;$=J.group}let Z;if(J.type==="spring"){const q=J.spring||this.#J;Z=v.#C(q)}else{const q=J.value||[this.#$.x,this.#$.y,this.#Q.x,this.#Q.y];Z=v.curveIcon(...q)}const j=J.name===this.#B?" selected":"";Q+=`<option value="${J.name}"${j}>${Z} ${J.name}</option>`}if($)Q+="</optgroup>";return`<fig-dropdown class="fig-easing-curve-dropdown" full experimental="modern">${Q}</fig-dropdown>`}#V(){const $=this.#x();if(this.#j==="spring")return`${$}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
         <rect class="fig-easing-curve-bounds" x="0" y="0" width="200" height="200"/>
         <line class="fig-easing-curve-target" x1="0" y1="40" x2="200" y2="40"/>
         <line class="fig-easing-curve-diagonal" x1="0" y1="180" x2="0" y2="180"/>
@@ -213,7 +216,7 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
       <circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#F}"/>
       <foreignObject class="fig-easing-curve-handle" data-handle="1" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
       <foreignObject class="fig-easing-curve-handle" data-handle="2" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
-    </svg></div>`}#c(Q,$){const J=getComputedStyle(this).getPropertyValue(Q).trim();if(!J)return $;const Z=Number.parseFloat(J);return Number.isFinite(Z)?Z:$}#o(){this.#F=this.#c("--easing-bezier-endpoint-radius",this.#F),this.#D=this.#c("--easing-duration-bar-radius",this.#D)}#l(){this.#K=this.querySelector(".fig-easing-curve-svg"),this.#X=this.querySelector(".fig-easing-curve-path"),this.#q=this.querySelector('[data-arm="1"]'),this.#W=this.querySelector('[data-arm="2"]'),this.#Y=this.querySelector('[data-handle="1"]')||this.querySelector('[data-handle="bounce"]'),this.#U=this.querySelector('[data-handle="2"]')||this.querySelector('[data-handle="duration"]'),this.#N=this.querySelector('[data-endpoint="start"]'),this.#B=this.querySelector('[data-endpoint="end"]'),this.#L=this.querySelector(".fig-easing-curve-dropdown"),this.#O=this.querySelector(".fig-easing-curve-target"),this.#E=this.querySelector(".fig-easing-curve-bounds"),this.#A=this.querySelector(".fig-easing-curve-diagonal")}#r(){const Q=this.#Y?.querySelector("fig-handle"),$=this.#U?.querySelector("fig-handle");if(Q){const J=Q.offsetWidth||this.#T*2,Z=Q.offsetHeight||this.#T*2;this.#T=Math.max(J,Z)/2,this.#Y.setAttribute("width",J),this.#Y.setAttribute("height",Z)}if($){const J=$.offsetWidth||this.#P,Z=$.offsetHeight||this.#C;if(this.#j==="spring")this.#P=J,this.#C=Z;this.#U.setAttribute("width",J),this.#U.setAttribute("height",Z)}}#j0(){if(this.#f||!window.ResizeObserver)return;this.#f=new ResizeObserver(()=>{if(this.#a())this.#V()}),this.#f.observe(this)}#a(){if(!this.#K)return!1;const Q=this.#K.getBoundingClientRect(),$=Math.max(1,Math.round(Q.width||200)),J=Math.max(1,Math.round(Q.height||200)),Z=$!==this.#R||J!==this.#z;return this.#R=$,this.#z=J,this.#K.setAttribute("viewBox",`0 0 ${$} ${J}`),Z}#g(Q,$){return{x:Q*this.#R,y:(1-$)*this.#z}}#h(Q,$){return{x:Q/this.#R,y:1-$/this.#z}}#s={minVal:0,maxVal:1.2,totalTime:1};#p(Q,$){const Z=this.#z-40,{minVal:j,maxVal:_}=this.#s,q=_-j||1;return{x:Q*this.#R,y:20+(1-($-j)/q)*Z}}#V(){if(this.#a(),this.#j==="spring")this.#w();else this.#$0()}#$0(){if(this.#E)this.#E.setAttribute("x","0"),this.#E.setAttribute("y","0"),this.#E.setAttribute("width",this.#R),this.#E.setAttribute("height",this.#z);if(this.#A)this.#A.setAttribute("x1","0"),this.#A.setAttribute("y1",this.#z),this.#A.setAttribute("x2",this.#R),this.#A.setAttribute("y2","0");const Q=this.#g(0,0),$=this.#g(this.#$.x,this.#$.y),J=this.#g(this.#Q.x,this.#Q.y),Z=this.#g(1,1);this.#X.setAttribute("d",`M${Q.x},${Q.y} C${$.x},${$.y} ${J.x},${J.y} ${Z.x},${Z.y}`),this.#q.setAttribute("x1",Q.x),this.#q.setAttribute("y1",Q.y),this.#q.setAttribute("x2",$.x),this.#q.setAttribute("y2",$.y),this.#W.setAttribute("x1",Z.x),this.#W.setAttribute("y1",Z.y),this.#W.setAttribute("x2",J.x),this.#W.setAttribute("y2",J.y);const j=this.#T;if(this.#Y.setAttribute("x",$.x-j),this.#Y.setAttribute("y",$.y-j),this.#U.setAttribute("x",J.x-j),this.#U.setAttribute("y",J.y-j),this.#N)this.#N.setAttribute("cx",Q.x),this.#N.setAttribute("cy",Q.y);if(this.#B)this.#B.setAttribute("cx",Z.x),this.#B.setAttribute("cy",Z.y)}#w(){if(this.#E)this.#E.setAttribute("x","0"),this.#E.setAttribute("y","0"),this.#E.setAttribute("width",this.#R),this.#E.setAttribute("height",this.#z);const Q=this.#y();if(!Q.length)return;const $=Q[Q.length-1].t||1;let J=0,Z=1;for(let L of Q){if(L.value<J)J=L.value;if(L.value>Z)Z=L.value}const j=Math.max(Math.abs(J-1),Math.abs(Z-1),0.01),_=0;this.#s={minVal:1-j-_,maxVal:1+j+_,totalTime:$};const q=Math.max(0.05,Math.min(0.95,this.#M));let K="";for(let L=0;L<Q.length;L++){const B=Q[L].t/$*q,M=this.#p(B,Q[L].value);K+=(L===0?"M":"L")+M.x.toFixed(1)+","+M.y.toFixed(1)}const X=this.#p(q,1),Y=this.#p(1,1);if(K+=`L${X.x.toFixed(1)},${X.y.toFixed(1)} L${Y.x.toFixed(1)},${Y.y.toFixed(1)}`,this.#X.setAttribute("d",K),this.#O){const L=this.#p(0,1),B=this.#p(1,1);this.#O.setAttribute("x1",L.x),this.#O.setAttribute("y1",L.y),this.#O.setAttribute("x2",B.x),this.#O.setAttribute("y2",B.y)}const W=this.#i(Q),N=W.t/$*q,U=this.#p(N,W.value),z=this.#T;this.#Y.setAttribute("x",U.x-z),this.#Y.setAttribute("y",U.y-z);const O=this.#p(q,1);this.#U.setAttribute("x",O.x-this.#P/2),this.#U.setAttribute("y",O.y-this.#C/2)}#i(Q){let $={t:0,value:1},J=!1;for(let Z of Q){if(Z.value>=0.99)J=!0;if(J&&Z.value>$.value)$={t:Z.t,value:Z.value}}return $}#u(){if(!this.#L)return;this.#L.value=this.#G,this.#e()}#v(Q,$,J){if(!Q)return;for(let Z of Q.querySelectorAll("option"))if(Z.value===$)Z.innerHTML=`${J} ${$}`}#e(){if(!this.#L)return;const Q=V.curveIcon(this.#$.x,this.#$.y,this.#Q.x,this.#Q.y),$=V.#x(this.#J);this.#v(this.#L,"Custom bezier",Q),this.#v(this.#L,"Custom spring",$),this.#v(this.#L.select,"Custom bezier",Q),this.#v(this.#L.select,"Custom spring",$)}#d(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{mode:this.#j,value:this.value,cssValue:this.cssValue,preset:this.#G}}))}#_0(){if(this.#j==="bezier"){this.#Y.addEventListener("pointerdown",($)=>this.#Z0($,1)),this.#U.addEventListener("pointerdown",($)=>this.#Z0($,2));const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#Z0($,this.#K0($))})}else{this.#Y.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#t($,"bounce")}),this.#U.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#t($,"duration")});const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#t($,"duration")})}if(this.#L)this.#L.addEventListener("change",(Q)=>{const $=Q.detail,J=V.PRESETS.find((Z)=>Z.name===$);if(!J)return;if(J.type==="bezier"){if(J.value)this.#$.x=J.value[0],this.#$.y=J.value[1],this.#Q.x=J.value[2],this.#Q.y=J.value[3];if(this.#G=$,this.#j!=="bezier")this.#j="bezier",this.#S();else this.#V()}else if(J.type==="spring"){if(J.spring)this.#J={...J.spring};if(this.#G=$,this.#j!=="spring")this.#j="spring",this.#S();else this.#V()}this.#d("input"),this.#d("change")})}#J0(Q){const $=this.#K.getScreenCTM();if(!$)return{x:0,y:0};const J=$.inverse();return{x:J.a*Q.clientX+J.c*Q.clientY+J.e,y:J.b*Q.clientX+J.d*Q.clientY+J.f}}#K0(Q){return this.#J0(Q).x<=this.#R/2?1:2}#Z0(Q,$){Q.preventDefault(),this.#Z=$;const J=(j)=>{if(!this.#Z)return;const _=this.#J0(j),q=this.#h(_.x,_.y);if(q.x=Math.round(q.x*100)/100,q.y=Math.round(q.y*100)/100,q.x=Math.max(0,Math.min(1,q.x)),this.#Z===1)this.#$.x=q.x,this.#$.y=q.y;else this.#Q.x=q.x,this.#Q.y=q.y;this.#V(),this.#G=this.#H(),this.#u(),this.#d("input")},Z=()=>{this.#Z=null,document.removeEventListener("pointermove",J),document.removeEventListener("pointerup",Z),this.#d("change")};document.addEventListener("pointermove",J),document.addEventListener("pointerup",Z)}#t(Q,$){Q.preventDefault(),this.#Z=$;const J=this.#J.damping,Z=this.#J.stiffness,j=this.#M,_=Q.clientY,q=Q.clientX,K=(Y)=>{if(!this.#Z)return;if($==="bounce"){const W=Y.clientY-_;this.#J.damping=Math.max(1,Math.round(J+W*0.15))}else{const W=Y.clientX-q;this.#M=Math.max(0.05,Math.min(0.95,j+W/200)),this.#J.stiffness=Math.max(10,Math.round(Z-W*1.5))}this.#V(),this.#G=this.#H(),this.#u(),this.#d("input")},X=()=>{this.#Z=null,document.removeEventListener("pointermove",K),document.removeEventListener("pointerup",X),this.#d("change")};document.addEventListener("pointermove",K),document.addEventListener("pointerup",X)}}customElements.define("fig-easing-curve",V);class x0 extends HTMLElement{#$=0;#Q=0;#J=0;#j=1;#_=!1;#Z=!1;#K=null;#X=null;#q=null;#W=null;#Y=[];#U={};static get observedAttributes(){return["value","precision","aspect-ratio","fields","perspective","perspective-origin","transform-origin","selected","drag"]}connectedCallback(){this.#j=parseInt(this.getAttribute("precision")||"1"),y(this,"--aspect-ratio",this.getAttribute("aspect-ratio")),y(this,"--perspective",this.getAttribute("perspective")),y(this,"--perspective-origin",this.getAttribute("perspective-origin")),this.#N(this.getAttribute("transform-origin")),this.#G(this.getAttribute("fields"));const Q=this.getAttribute("value");if(Q)this.#O(Q);this.#M(),this.#L(this.getAttribute("selected")),this.#B()}disconnectedCallback(){if(this.#_=!1,this.#q)window.removeEventListener("keydown",this.#q),window.removeEventListener("keyup",this.#W)}#N(Q){if(!Q||!Q.trim()){this.style.removeProperty("--transform-origin");return}const $=Q.trim().split(/\s+/);if($.length===2)this.style.setProperty("--transform-origin",`${$[0]} ${$[1]} -50cqi`);else this.style.setProperty("--transform-origin",Q.trim())}#B(){if(!this.#X)return;this.#X.style.cursor=this.#T?"":"default"}#L(Q){if(!this.#K)return;const $=this.#K.querySelectorAll(".fig-3d-rotate-face"),J=Q?Q.trim().toLowerCase():"";for(let Z of $)Z.classList.toggle("selected",J!==""&&Z.classList.contains(J))}#G(Q){if(!Q||!Q.trim()){this.#Y=[];return}const $=["rotateX","rotateY","rotateZ"];this.#Y=Q.split(",").map((J)=>J.trim()).filter((J)=>$.includes(J))}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){y(this,"--aspect-ratio",J);return}if(Q==="perspective"){y(this,"--perspective",J);return}if(Q==="perspective-origin"){y(this,"--perspective-origin",J);return}if(Q==="transform-origin"){this.#N(J);return}if(Q==="selected"){this.#L(J);return}if(Q==="drag"){this.#B();return}if(Q==="fields"){if(this.#G(J),this.#K)this.#M();return}if(!this.#K)return;if(Q==="value"&&J){if(this.#_)return;this.#O(J),this.#z(),this.#R()}if(Q==="precision")this.#j=parseInt(J||"1")}get value(){const Q=this.#j;return`rotateX(${this.#$.toFixed(Q)}deg) rotateY(${this.#Q.toFixed(Q)}deg) rotateZ(${this.#J.toFixed(Q)}deg)`}set value(Q){this.setAttribute("value",Q)}get rotateX(){return this.#$}get rotateY(){return this.#Q}get rotateZ(){return this.#J}#O(Q){const $=Q.match(/rotateX\(\s*(-?[\d.]+)\s*deg\s*\)/),J=Q.match(/rotateY\(\s*(-?[\d.]+)\s*deg\s*\)/),Z=Q.match(/rotateZ\(\s*(-?[\d.]+)\s*deg\s*\)/);if($)this.#$=parseFloat($[1]);if(J)this.#Q=parseFloat(J[1]);if(Z)this.#J=parseFloat(Z[1])}#M(){const Q={rotateX:"X",rotateY:"Y",rotateZ:"Z"},$={rotateX:this.#$,rotateY:this.#Q,rotateZ:this.#J},J=this.#Y.map((Z)=>`<fig-input-number
+    </svg></div>`}#m(Q,$){const J=getComputedStyle(this).getPropertyValue(Q).trim();if(!J)return $;const Z=Number.parseFloat(J);return Number.isFinite(Z)?Z:$}#o(){this.#F=this.#m("--easing-bezier-endpoint-radius",this.#F),this.#D=this.#m("--easing-duration-bar-radius",this.#D)}#l(){this.#_=this.querySelector(".fig-easing-curve-svg"),this.#X=this.querySelector(".fig-easing-curve-path"),this.#K=this.querySelector('[data-arm="1"]'),this.#Y=this.querySelector('[data-arm="2"]'),this.#N=this.querySelector('[data-handle="1"]')||this.querySelector('[data-handle="bounce"]'),this.#U=this.querySelector('[data-handle="2"]')||this.querySelector('[data-handle="duration"]'),this.#W=this.querySelector('[data-endpoint="start"]'),this.#L=this.querySelector('[data-endpoint="end"]'),this.#G=this.querySelector(".fig-easing-curve-dropdown"),this.#O=this.querySelector(".fig-easing-curve-target"),this.#A=this.querySelector(".fig-easing-curve-bounds"),this.#R=this.querySelector(".fig-easing-curve-diagonal")}#i(){const Q=this.#N?.querySelector("fig-handle"),$=this.#U?.querySelector("fig-handle");if(Q){const J=Q.offsetWidth||this.#k*2,Z=Q.offsetHeight||this.#k*2;this.#k=Math.max(J,Z)/2,this.#N.setAttribute("width",J),this.#N.setAttribute("height",Z)}if($){const J=$.offsetWidth||this.#I,Z=$.offsetHeight||this.#S;if(this.#j==="spring")this.#I=J,this.#S=Z;this.#U.setAttribute("width",J),this.#U.setAttribute("height",Z)}}#j0(){if(this.#H||!window.ResizeObserver)return;this.#H=new ResizeObserver(()=>{if(this.#a())this.#b()}),this.#H.observe(this)}#a(){if(!this.#_)return!1;const Q=this.#_.getBoundingClientRect(),$=Math.max(1,Math.round(Q.width||200)),J=Math.max(1,Math.round(Q.height||200)),Z=$!==this.#E||J!==this.#z;return this.#E=$,this.#z=J,this.#_.setAttribute("viewBox",`0 0 ${$} ${J}`),Z}#g(Q,$){return{x:Q*this.#E,y:(1-$)*this.#z}}#h(Q,$){return{x:Q/this.#E,y:1-$/this.#z}}#s={minVal:0,maxVal:1.2,totalTime:1};#r(Q,$){const Z=this.#z-40,{minVal:j,maxVal:q}=this.#s,K=q-j||1;return{x:Q*this.#E,y:20+(1-($-j)/K)*Z}}#b(){if(this.#a(),this.#j==="spring")this.#n();else this.#Q0()}#Q0(){if(this.#A)this.#A.setAttribute("x","0"),this.#A.setAttribute("y","0"),this.#A.setAttribute("width",this.#E),this.#A.setAttribute("height",this.#z);if(this.#R)this.#R.setAttribute("x1","0"),this.#R.setAttribute("y1",this.#z),this.#R.setAttribute("x2",this.#E),this.#R.setAttribute("y2","0");const Q=this.#g(0,0),$=this.#g(this.#$.x,this.#$.y),J=this.#g(this.#Q.x,this.#Q.y),Z=this.#g(1,1);this.#X.setAttribute("d",`M${Q.x},${Q.y} C${$.x},${$.y} ${J.x},${J.y} ${Z.x},${Z.y}`),this.#K.setAttribute("x1",Q.x),this.#K.setAttribute("y1",Q.y),this.#K.setAttribute("x2",$.x),this.#K.setAttribute("y2",$.y),this.#Y.setAttribute("x1",Z.x),this.#Y.setAttribute("y1",Z.y),this.#Y.setAttribute("x2",J.x),this.#Y.setAttribute("y2",J.y);const j=this.#k;if(this.#N.setAttribute("x",$.x-j),this.#N.setAttribute("y",$.y-j),this.#U.setAttribute("x",J.x-j),this.#U.setAttribute("y",J.y-j),this.#W)this.#W.setAttribute("cx",Q.x),this.#W.setAttribute("cy",Q.y);if(this.#L)this.#L.setAttribute("cx",Z.x),this.#L.setAttribute("cy",Z.y)}#n(){if(this.#A)this.#A.setAttribute("x","0"),this.#A.setAttribute("y","0"),this.#A.setAttribute("width",this.#E),this.#A.setAttribute("height",this.#z);const Q=this.#w();if(!Q.length)return;const $=Q[Q.length-1].t||1;let J=0,Z=1;for(let L of Q){if(L.value<J)J=L.value;if(L.value>Z)Z=L.value}const j=Math.max(Math.abs(J-1),Math.abs(Z-1),0.01),q=0;this.#s={minVal:1-j-q,maxVal:1+j+q,totalTime:$};const K=Math.max(0.05,Math.min(0.95,this.#M));let _="";for(let L=0;L<Q.length;L++){const M=Q[L].t/$*K,B=this.#r(M,Q[L].value);_+=(L===0?"M":"L")+B.x.toFixed(1)+","+B.y.toFixed(1)}const X=this.#r(K,1),Y=this.#r(1,1);if(_+=`L${X.x.toFixed(1)},${X.y.toFixed(1)} L${Y.x.toFixed(1)},${Y.y.toFixed(1)}`,this.#X.setAttribute("d",_),this.#O){const L=this.#r(0,1),M=this.#r(1,1);this.#O.setAttribute("x1",L.x),this.#O.setAttribute("y1",L.y),this.#O.setAttribute("x2",M.x),this.#O.setAttribute("y2",M.y)}const W=this.#v(Q),N=W.t/$*K,U=this.#r(N,W.value),O=this.#k;this.#N.setAttribute("x",U.x-O),this.#N.setAttribute("y",U.y-O);const E=this.#r(K,1);this.#U.setAttribute("x",E.x-this.#I/2),this.#U.setAttribute("y",E.y-this.#S/2)}#v(Q){let $={t:0,value:1},J=!1;for(let Z of Q){if(Z.value>=0.99)J=!0;if(J&&Z.value>$.value)$={t:Z.t,value:Z.value}}return $}#u(){if(!this.#G)return;this.#G.value=this.#B,this.#c()}#p(Q,$,J){if(!Q)return;for(let Z of Q.querySelectorAll("option"))if(Z.value===$)Z.innerHTML=`${J} ${$}`}#c(){if(!this.#G)return;const Q=v.curveIcon(this.#$.x,this.#$.y,this.#Q.x,this.#Q.y),$=v.#C(this.#J);this.#p(this.#G,"Custom bezier",Q),this.#p(this.#G,"Custom spring",$),this.#p(this.#G.select,"Custom bezier",Q),this.#p(this.#G.select,"Custom spring",$)}#d(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{mode:this.#j,value:this.value,cssValue:this.cssValue,preset:this.#B}}))}#$0(){if(this.#j==="bezier"){this.#N.addEventListener("pointerdown",($)=>this.#K0($,1)),this.#U.addEventListener("pointerdown",($)=>this.#K0($,2));const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#K0($,this.#q0($))})}else{this.#N.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#Z0($,"bounce")}),this.#U.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#Z0($,"duration")});const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#Z0($,"duration")})}if(this.#G)this.#G.addEventListener("change",(Q)=>{const $=Q.detail,J=v.PRESETS.find((Z)=>Z.name===$);if(!J)return;if(J.type==="bezier"){if(J.value)this.#$.x=J.value[0],this.#$.y=J.value[1],this.#Q.x=J.value[2],this.#Q.y=J.value[3];if(this.#B=$,this.#j!=="bezier")this.#j="bezier",this.#f();else this.#b()}else if(J.type==="spring"){if(J.spring)this.#J={...J.spring};if(this.#B=$,this.#j!=="spring")this.#j="spring",this.#f();else this.#b()}this.#d("input"),this.#d("change")})}#J0(Q){const $=this.#_.getScreenCTM();if(!$)return{x:0,y:0};const J=$.inverse();return{x:J.a*Q.clientX+J.c*Q.clientY+J.e,y:J.b*Q.clientX+J.d*Q.clientY+J.f}}#q0(Q){return this.#J0(Q).x<=this.#E/2?1:2}#K0(Q,$){Q.preventDefault(),this.#Z=$;const J=(j)=>{if(!this.#Z)return;const q=this.#J0(j),K=this.#h(q.x,q.y);if(K.x=Math.round(K.x*100)/100,K.y=Math.round(K.y*100)/100,K.x=Math.max(0,Math.min(1,K.x)),this.#Z===1)this.#$.x=K.x,this.#$.y=K.y;else this.#Q.x=K.x,this.#Q.y=K.y;this.#b(),this.#B=this.#P(),this.#u(),this.#d("input")},Z=()=>{this.#Z=null,document.removeEventListener("pointermove",J),document.removeEventListener("pointerup",Z),this.#d("change")};document.addEventListener("pointermove",J),document.addEventListener("pointerup",Z)}#Z0(Q,$){Q.preventDefault(),this.#Z=$;const J=this.#J.damping,Z=this.#J.stiffness,j=this.#M,q=Q.clientY,K=Q.clientX,_=(Y)=>{if(!this.#Z)return;if($==="bounce"){const W=Y.clientY-q;this.#J.damping=Math.max(1,Math.round(J+W*0.15))}else{const W=Y.clientX-K;this.#M=Math.max(0.05,Math.min(0.95,j+W/200)),this.#J.stiffness=Math.max(10,Math.round(Z-W*1.5))}this.#b(),this.#B=this.#P(),this.#u(),this.#d("input")},X=()=>{this.#Z=null,document.removeEventListener("pointermove",_),document.removeEventListener("pointerup",X),this.#d("change")};document.addEventListener("pointermove",_),document.addEventListener("pointerup",X)}}customElements.define("fig-easing-curve",v);class p0 extends HTMLElement{#$=0;#Q=0;#J=0;#j=1;#q=!1;#Z=!1;#_=null;#X=null;#K=null;#Y=null;#N=[];#U={};static get observedAttributes(){return["value","precision","aspect-ratio","fields","perspective","perspective-origin","transform-origin","selected","drag"]}connectedCallback(){this.#j=parseInt(this.getAttribute("precision")||"1"),x(this,"--aspect-ratio",this.getAttribute("aspect-ratio")),x(this,"--perspective",this.getAttribute("perspective")),x(this,"--perspective-origin",this.getAttribute("perspective-origin")),this.#W(this.getAttribute("transform-origin")),this.#B(this.getAttribute("fields"));const Q=this.getAttribute("value");if(Q)this.#O(Q);this.#M(),this.#G(this.getAttribute("selected")),this.#L()}disconnectedCallback(){if(this.#q=!1,this.#K)window.removeEventListener("keydown",this.#K),window.removeEventListener("keyup",this.#Y)}#W(Q){if(!Q||!Q.trim()){this.style.removeProperty("--transform-origin");return}const $=Q.trim().split(/\s+/);if($.length===2)this.style.setProperty("--transform-origin",`${$[0]} ${$[1]} -50cqi`);else this.style.setProperty("--transform-origin",Q.trim())}#L(){if(!this.#X)return;this.#X.style.cursor=this.#k?"":"default"}#G(Q){if(!this.#_)return;const $=this.#_.querySelectorAll(".fig-3d-rotate-face"),J=Q?Q.trim().toLowerCase():"";for(let Z of $)Z.classList.toggle("selected",J!==""&&Z.classList.contains(J))}#B(Q){if(!Q||!Q.trim()){this.#N=[];return}const $=["rotateX","rotateY","rotateZ"];this.#N=Q.split(",").map((J)=>J.trim()).filter((J)=>$.includes(J))}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){x(this,"--aspect-ratio",J);return}if(Q==="perspective"){x(this,"--perspective",J);return}if(Q==="perspective-origin"){x(this,"--perspective-origin",J);return}if(Q==="transform-origin"){this.#W(J);return}if(Q==="selected"){this.#G(J);return}if(Q==="drag"){this.#L();return}if(Q==="fields"){if(this.#B(J),this.#_)this.#M();return}if(!this.#_)return;if(Q==="value"&&J){if(this.#q)return;this.#O(J),this.#z(),this.#E()}if(Q==="precision")this.#j=parseInt(J||"1")}get value(){const Q=this.#j;return`rotateX(${this.#$.toFixed(Q)}deg) rotateY(${this.#Q.toFixed(Q)}deg) rotateZ(${this.#J.toFixed(Q)}deg)`}set value(Q){this.setAttribute("value",Q)}get rotateX(){return this.#$}get rotateY(){return this.#Q}get rotateZ(){return this.#J}#O(Q){const $=Q.match(/rotateX\(\s*(-?[\d.]+)\s*deg\s*\)/),J=Q.match(/rotateY\(\s*(-?[\d.]+)\s*deg\s*\)/),Z=Q.match(/rotateZ\(\s*(-?[\d.]+)\s*deg\s*\)/);if($)this.#$=parseFloat($[1]);if(J)this.#Q=parseFloat(J[1]);if(Z)this.#J=parseFloat(Z[1])}#M(){const Q={rotateX:"X",rotateY:"Y",rotateZ:"Z"},$={rotateX:this.#$,rotateY:this.#Q,rotateZ:this.#J},J=this.#N.map((Z)=>`<fig-input-number
             name="${Z}"
             step="1"
             precision="1"
@@ -231,9 +234,9 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
           <div class="fig-3d-rotate-face bottom"></div>
         </div>
       </div>
-    </div>${J}`,this.#X=this.querySelector(".fig-3d-rotate-container"),this.#K=this.querySelector(".fig-3d-rotate-cube"),this.#U={};for(let Z of this.#Y){const j=this.querySelector(`fig-input-number[name="${Z}"]`);if(j){this.#U[Z]=j;const _=(q)=>{q.stopPropagation();const K=parseFloat(q.target.value);if(isNaN(K))return;if(Z==="rotateX")this.#$=K;else if(Z==="rotateY")this.#Q=K;else if(Z==="rotateZ")this.#J=K;this.#z(),this.#E(q.type)};j.addEventListener("input",_),j.addEventListener("change",_)}}this.#z(),this.#f()}#R(){const Q={rotateX:this.#$,rotateY:this.#Q,rotateZ:this.#J};for(let $ of this.#Y){const J=this.#U[$];if(J)J.setAttribute("value",Q[$].toFixed(this.#j))}}#z(){if(!this.#K)return;this.#K.style.transform=`rotateX(${this.#$}deg) rotateY(${this.#Q}deg) rotateZ(${this.#J}deg)`}#E(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{value:this.value,rotateX:this.#$,rotateY:this.#Q,rotateZ:this.#J}}))}#A(Q){if(!this.#Z)return Q;return Math.round(Q/15)*15}#f(){this.#X.addEventListener("pointerdown",(Q)=>this.#F(Q)),this.#q=(Q)=>{if(Q.key==="Shift")this.#Z=!0},this.#W=(Q)=>{if(Q.key==="Shift")this.#Z=!1},window.addEventListener("keydown",this.#q),window.addEventListener("keyup",this.#W)}get#T(){const Q=this.getAttribute("drag");return Q===null||Q.toLowerCase()!=="false"}#F(Q){if(!this.#T)return;Q.preventDefault(),this.#_=!0,this.#X.classList.add("dragging"),this.#X.setPointerCapture(Q.pointerId);const{clientX:$,clientY:J}=Q,Z=this.#$,j=this.#Q,_=(K)=>{if(!this.#_)return;if(K.buttons===0){q();return}const X=K.clientX-$,Y=K.clientY-J;this.#Q=this.#A(j+X*0.5),this.#$=this.#A(Z-Y*0.5),this.#z(),this.#R(),this.setAttribute("value",this.value),this.#E("input")},q=()=>{if(!this.#_)return;this.setAttribute("value",this.value),this.#_=!1,this.#X.classList.remove("dragging"),this.#X.removeEventListener("pointermove",_),this.#X.removeEventListener("pointerup",q),this.#X.removeEventListener("pointercancel",q),this.#X.removeEventListener("lostpointercapture",q),this.#E("change")};this.#X.addEventListener("pointermove",_),this.#X.addEventListener("pointerup",q),this.#X.addEventListener("pointercancel",q),this.#X.addEventListener("lostpointercapture",q)}}customElements.define("fig-3d-rotate",x0);class $0 extends HTMLElement{#$=50;#Q=50;#J=0;#j=null;#_=[];#Z=null;#K=null;#X=null;#q=!1;#W=!1;#Y=null;#U=null;#N=null;static SNAP_POINTS=[0,16.6667,33.3333,50,66.6667,83.3333,100];static get observedAttributes(){return["value","precision","aspect-ratio","drag","fields"]}connectedCallback(){this.#J=parseInt(this.getAttribute("precision")||"0"),y(this,"--aspect-ratio",this.getAttribute("aspect-ratio")),this.#z(this.getAttribute("value")),this.#E(),this.#G(),this.#f()}disconnectedCallback(){this.#q=!1,this.#m()}get value(){const Q=this.#J;return`${this.#$.toFixed(Q)}% ${this.#Q.toFixed(Q)}%`}set value(Q){this.setAttribute("value",Q)}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){y(this,"--aspect-ratio",J);return}if(Q==="drag"){this.#G();return}if(Q==="fields"){this.#E(),this.#G(),this.#f();return}if(Q==="precision"){this.#J=parseInt(J||"0"),this.#A(),this.#f();return}if(Q==="value"){if(this.#W||this.#q)return;this.#z(J),this.#F(),this.#P(),this.#A()}}get#B(){const Q=this.getAttribute("drag");return Q===null||Q.toLowerCase()!=="false"}get#L(){const Q=this.getAttribute("fields");if(Q===null)return!1;return Q.toLowerCase()!=="false"}#G(){if(!this.#j)return;this.#j.classList.toggle("drag-disabled",!this.#B)}#O(Q){return Math.max(0,Math.min(100,Q))}#M(Q,$){const J=(Q||"").trim().toLowerCase();if(!J)return $==="x"?this.#$:this.#Q;const Z=$==="x"?{left:0,center:50,right:100}:{top:0,center:50,bottom:100};if(J in Z)return Z[J];const j=Number.parseFloat(J.replace("%",""));if(Number.isFinite(j))return j;return $==="x"?this.#$:this.#Q}#R(Q){const $=Q.trim().replace(/,/g," ").split(/\s+/).filter(Boolean);if($.length<1)return;if($.length===1){const J=this.#M($[0],"x");this.#$=J,this.#Q=J;return}this.#$=this.#M($[0],"x"),this.#Q=this.#M($[1],"y")}#z(Q){const $=typeof Q==="string"?Q.trim():"";if(!$){this.#$=50,this.#Q=50;return}this.#R($)}#E(){const Q=Array.from({length:9},(j,_)=>{const q=_%3,K=Math.floor(_/3);return`<span class="origin-grid-cell" data-col="${q}" data-row="${K}">
+    </div>${J}`,this.#X=this.querySelector(".fig-3d-rotate-container"),this.#_=this.querySelector(".fig-3d-rotate-cube"),this.#U={};for(let Z of this.#N){const j=this.querySelector(`fig-input-number[name="${Z}"]`);if(j){this.#U[Z]=j;const q=(K)=>{K.stopPropagation();const _=parseFloat(K.target.value);if(isNaN(_))return;if(Z==="rotateX")this.#$=_;else if(Z==="rotateY")this.#Q=_;else if(Z==="rotateZ")this.#J=_;this.#z(),this.#A(K.type)};j.addEventListener("input",q),j.addEventListener("change",q)}}this.#z(),this.#H()}#E(){const Q={rotateX:this.#$,rotateY:this.#Q,rotateZ:this.#J};for(let $ of this.#N){const J=this.#U[$];if(J)J.setAttribute("value",Q[$].toFixed(this.#j))}}#z(){if(!this.#_)return;this.#_.style.transform=`rotateX(${this.#$}deg) rotateY(${this.#Q}deg) rotateZ(${this.#J}deg)`}#A(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{value:this.value,rotateX:this.#$,rotateY:this.#Q,rotateZ:this.#J}}))}#R(Q){if(!this.#Z)return Q;return Math.round(Q/15)*15}#H(){this.#X.addEventListener("pointerdown",(Q)=>this.#F(Q)),this.#K=(Q)=>{if(Q.key==="Shift")this.#Z=!0},this.#Y=(Q)=>{if(Q.key==="Shift")this.#Z=!1},window.addEventListener("keydown",this.#K),window.addEventListener("keyup",this.#Y)}get#k(){const Q=this.getAttribute("drag");return Q===null||Q.toLowerCase()!=="false"}#F(Q){if(!this.#k)return;Q.preventDefault(),this.#q=!0,this.#X.classList.add("dragging"),this.#X.setPointerCapture(Q.pointerId);const{clientX:$,clientY:J}=Q,Z=this.#$,j=this.#Q,q=(_)=>{if(!this.#q)return;if(_.buttons===0){K();return}const X=_.clientX-$,Y=_.clientY-J;this.#Q=this.#R(j+X*0.5),this.#$=this.#R(Z-Y*0.5),this.#z(),this.#E(),this.setAttribute("value",this.value),this.#A("input")},K=()=>{if(!this.#q)return;this.setAttribute("value",this.value),this.#q=!1,this.#X.classList.remove("dragging"),this.#X.removeEventListener("pointermove",q),this.#X.removeEventListener("pointerup",K),this.#X.removeEventListener("pointercancel",K),this.#X.removeEventListener("lostpointercapture",K),this.#A("change")};this.#X.addEventListener("pointermove",q),this.#X.addEventListener("pointerup",K),this.#X.addEventListener("pointercancel",K),this.#X.addEventListener("lostpointercapture",K)}}customElements.define("fig-3d-rotate",p0);class _0 extends HTMLElement{#$=50;#Q=50;#J=0;#j=null;#q=[];#Z=null;#_=null;#X=null;#K=!1;#Y=!1;#N=null;#U=null;#W=null;static SNAP_POINTS=[0,16.6667,33.3333,50,66.6667,83.3333,100];static get observedAttributes(){return["value","precision","aspect-ratio","drag","fields"]}connectedCallback(){this.#J=parseInt(this.getAttribute("precision")||"0"),x(this,"--aspect-ratio",this.getAttribute("aspect-ratio")),this.#z(this.getAttribute("value")),this.#A(),this.#B(),this.#H()}disconnectedCallback(){this.#K=!1,this.#V()}get value(){const Q=this.#J;return`${this.#$.toFixed(Q)}% ${this.#Q.toFixed(Q)}%`}set value(Q){this.setAttribute("value",Q)}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){x(this,"--aspect-ratio",J);return}if(Q==="drag"){this.#B();return}if(Q==="fields"){this.#A(),this.#B(),this.#H();return}if(Q==="precision"){this.#J=parseInt(J||"0"),this.#R(),this.#H();return}if(Q==="value"){if(this.#Y||this.#K)return;this.#z(J),this.#F(),this.#I(),this.#R()}}get#L(){const Q=this.getAttribute("drag");return Q===null||Q.toLowerCase()!=="false"}get#G(){const Q=this.getAttribute("fields");if(Q===null)return!1;return Q.toLowerCase()!=="false"}#B(){if(!this.#j)return;this.#j.classList.toggle("drag-disabled",!this.#L)}#O(Q){return Math.max(0,Math.min(100,Q))}#M(Q,$){const J=(Q||"").trim().toLowerCase();if(!J)return $==="x"?this.#$:this.#Q;const Z=$==="x"?{left:0,center:50,right:100}:{top:0,center:50,bottom:100};if(J in Z)return Z[J];const j=Number.parseFloat(J.replace("%",""));if(Number.isFinite(j))return j;return $==="x"?this.#$:this.#Q}#E(Q){const $=Q.trim().replace(/,/g," ").split(/\s+/).filter(Boolean);if($.length<1)return;if($.length===1){const J=this.#M($[0],"x");this.#$=J,this.#Q=J;return}this.#$=this.#M($[0],"x"),this.#Q=this.#M($[1],"y")}#z(Q){const $=typeof Q==="string"?Q.trim():"";if(!$){this.#$=50,this.#Q=50;return}this.#E($)}#A(){const Q=Array.from({length:9},(j,q)=>{const K=q%3,_=Math.floor(q/3);return`<span class="origin-grid-cell" data-col="${K}" data-row="${_}">
         <span class="origin-grid-dot"></span>
-      </span>`}).join(""),$=this.#$.toFixed(this.#J),J=this.#Q.toFixed(this.#J),Z=this.#L?`<div class="origin-values">
+      </span>`}).join(""),$=this.#$.toFixed(this.#J),J=this.#Q.toFixed(this.#J),Z=this.#G?`<div class="origin-values">
       <fig-input-number name="x" value="${$}" step="1" units="%"><span slot="prepend">X</span></fig-input-number>
       <fig-input-number name="y" value="${J}" step="1" units="%"><span slot="prepend">Y</span></fig-input-number>
     </div>`:"";this.innerHTML=`<div class="fig-origin-grid-surface">
@@ -242,7 +245,7 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
         <fig-handle></fig-handle>
       </div>
     </div>
-    ${Z}`,this.#j=this.querySelector(".origin-grid"),this.#_=Array.from(this.querySelectorAll(".origin-grid-cell")),this.#Z=this.querySelector("fig-handle"),this.#K=this.querySelector('fig-input-number[name="x"]'),this.#X=this.querySelector('fig-input-number[name="y"]'),this.#F(),this.#P(),this.#A(),this.#o()}#A(){const Q=this.#$.toFixed(this.#J),$=this.#Q.toFixed(this.#J);if(this.#K)this.#K.setAttribute("value",Q);if(this.#X)this.#X.setAttribute("value",$)}#f(){const Q=this.value;if(this.getAttribute("value")===Q)return;this.#W=!0,this.setAttribute("value",Q),this.#W=!1}#T(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{value:this.value,x:this.#$,y:this.#Q}}))}#F(){if(!this.#Z)return;const Q=($)=>16.6667+this.#O($)/100*66.6667;this.#Z.style.left=`${Q(this.#$)}%`,this.#Z.style.top=`${Q(this.#Q)}%`}#P(){if(!this.#Z)return;const Q=this.#$<0||this.#$>100,$=this.#Q<0||this.#Q>100,J=this.#$<0,Z=this.#$>100,j=this.#Q<0,_=this.#Q>100;this.#Z.classList.toggle("beyond-bounds-x",Q),this.#Z.classList.toggle("beyond-bounds-y",$),this.#Z.classList.toggle("overflow-left",J),this.#Z.classList.toggle("overflow-right",Z),this.#Z.classList.toggle("overflow-up",j),this.#Z.classList.toggle("overflow-down",_)}#C(Q,$){if(!this.#j)return null;const J=this.#j.getBoundingClientRect(),Z=(Q-J.left)/Math.max(J.width,1),j=($-J.top)/Math.max(J.height,1);if(Z<0||Z>1||j<0||j>1)return null;const _=Math.max(0,Math.min(2,Math.floor(Z*3))),q=Math.max(0,Math.min(2,Math.floor(j*3)));return this.#_.find((K)=>Number(K.getAttribute("data-col"))===_&&Number(K.getAttribute("data-row"))===q)}#D(){for(let Q of this.#_)Q.classList.remove("is-hovered")}#k(Q){if(this.#D(),Q)Q.classList.add("is-hovered")}#H(Q,$,J){const Z=Number(Q),j=Number($);if(!Number.isFinite(Z)||!Number.isFinite(j))return;if(Z===this.#$&&j===this.#Q&&J==="input")return;this.#$=Z,this.#Q=j,this.#F(),this.#P(),this.#A(),this.#f(),this.#T(J)}#y(Q,$){if(!this.#j)return{x:this.#$,y:this.#Q};const J=this.#j.getBoundingClientRect(),Z=J.width/6,j=J.height/6,_=Math.max(1,J.width-Z*2),q=Math.max(1,J.height-j*2),K=(Q-(J.left+Z))/_,X=($-(J.top+j))/q;return{x:K*100,y:X*100}}#x(Q,$){if(!this.#j)return{x:50,y:50};const J=this.#j.getBoundingClientRect(),Z=(Q-J.left)/Math.max(J.width,1)*3,j=($-J.top)/Math.max(J.height,1)*3,_=Math.max(0,Math.min(2,Math.floor(Z))),q=Math.max(0,Math.min(2,Math.floor(j)));return{x:_*50,y:q*50}}#S(Q){let J=Q,Z=1/0;for(let j of $0.SNAP_POINTS){const _=Math.abs(Q-j);if(_<Z)Z=_,J=j}return Z<=2.5?J:Q}#b(Q,$){if(!$)return Q;return{x:this.#S(Q.x),y:this.#S(Q.y)}}#m(){if(!this.#j||!this.#U||!this.#N)return;this.#j.removeEventListener("pointermove",this.#U),this.#j.removeEventListener("pointerup",this.#N),this.#j.removeEventListener("pointercancel",this.#N),this.#j.removeEventListener("lostpointercapture",this.#N),this.#U=null,this.#N=null}#c(Q){if(!this.#j||!this.#B)return;Q.preventDefault(),this.#q=!0,this.#Y=Q.pointerId;const{clientX:$,clientY:J}=Q,Z=3;let j=!1;this.#j.setPointerCapture(Q.pointerId),this.#U=(_)=>{if(!this.#q||_.pointerId!==this.#Y)return;const q=_.clientX-$,K=_.clientY-J,X=Math.hypot(q,K);if(!j&&X<Z)return;if(!j)j=!0,this.#j.classList.add("is-dragging"),this.#D();const Y=this.#b(this.#y(_.clientX,_.clientY),_.shiftKey);this.#H(Y.x,Y.y,"input")},this.#N=(_)=>{if(!this.#q||_.pointerId!==this.#Y)return;if(this.#q=!1,this.#Y=null,this.#j.classList.remove("is-dragging"),this.#D(),this.#m(),!j){const q=this.#x($,J);this.#H(q.x,q.y,"input")}this.#T("change")},this.#j.addEventListener("pointermove",this.#U),this.#j.addEventListener("pointerup",this.#N),this.#j.addEventListener("pointercancel",this.#N),this.#j.addEventListener("lostpointercapture",this.#N)}#o(){if(!this.#j||!this.#Z)return;this.#j.addEventListener("pointerdown",($)=>{const J=this.#C($.clientX,$.clientY);if(this.#k(J),this.#B){this.#c($);return}const Z=this.#x($.clientX,$.clientY);this.#H(Z.x,Z.y,"input"),this.#T("change")}),this.#j.addEventListener("pointermove",($)=>{if(this.#q)return;const J=this.#C($.clientX,$.clientY);this.#k(J)}),this.#j.addEventListener("pointerleave",()=>{this.#D()});const Q=($,J)=>{if(!$)return;const Z=(j)=>{const _=Number.parseFloat(j.target.value);if(!Number.isFinite(_))return;if(J==="x")this.#H(_,this.#Q,"input");else this.#H(this.#$,_,"input")};$.addEventListener("input",Z),$.addEventListener("change",Z),$.addEventListener("focusout",()=>{this.#T("change")})};Q(this.#K,"x"),Q(this.#X,"y")}}customElements.define("fig-origin-grid",$0);class V0 extends HTMLElement{#$=null;#Q=null;#J=null;#j=null;#_=null;#Z=null;#K=null;#X=null;#q=!1;#W={x:0.5,y:0.5};#Y=!1;constructor(){super();this.position={x:0.5,y:0.5},this.isDragging=!1,this.plane=null,this.cursor=null,this.xInput=null,this.yInput=null,this.coordinates="screen",this.#$=(Q)=>this.#f(Q),this.#Q=()=>{this.isDragging=!0,this.plane?.classList.add("dragging")},this.#J=(Q)=>this.#T(Q),this.#j=()=>this.#F(),this.#_=(Q)=>this.#R(Q),this.#Z=(Q)=>this.#z(Q),this.#K=()=>this.#E(),this.#X=()=>this.#E()}connectedCallback(){requestAnimationFrame(()=>{if(this.precision=this.getAttribute("precision")||3,this.precision=parseInt(this.precision),this.transform=this.getAttribute("transform")||1,this.transform=Number(this.transform),this.coordinates=this.getAttribute("coordinates")||"screen",y(this,"--aspect-ratio",this.getAttribute("aspect-ratio")),!this.hasAttribute("value"))this.setAttribute("value","50% 50%");this.#B(),this.#O(),this.#D(),this.#k(),this.#H(),this.#Y=!0})}#U(Q){return this.coordinates==="math"?1-Q:Q}disconnectedCallback(){this.#M()}get#N(){const Q=this.getAttribute("fields");if(Q===null)return!1;return Q.toLowerCase()!=="false"}#B(){this.innerHTML=this.#G()}#L(){const Q=(this.getAttribute("axis-labels")||"").trim();if(!Q)return{left:"",right:"",top:"",bottom:"",leftNoRotate:!1};const $=Q.split(/\s+/).filter(Boolean);if($.length===1)return{left:"",right:"",top:$[0],bottom:"",leftNoRotate:!1};if($.length===2){const[J,Z]=$;return{left:J,right:"",top:"",bottom:Z,leftNoRotate:!0}}if($.length===4){const[J,Z,j,_]=$;return{left:J,right:Z,top:j,bottom:_,leftNoRotate:!1}}return{left:"",right:"",top:"",bottom:"",leftNoRotate:!1}}#G(){const Q=this.#L();return`        
+    ${Z}`,this.#j=this.querySelector(".origin-grid"),this.#q=Array.from(this.querySelectorAll(".origin-grid-cell")),this.#Z=this.querySelector("fig-handle"),this.#_=this.querySelector('fig-input-number[name="x"]'),this.#X=this.querySelector('fig-input-number[name="y"]'),this.#F(),this.#I(),this.#R(),this.#o()}#R(){const Q=this.#$.toFixed(this.#J),$=this.#Q.toFixed(this.#J);if(this.#_)this.#_.setAttribute("value",Q);if(this.#X)this.#X.setAttribute("value",$)}#H(){const Q=this.value;if(this.getAttribute("value")===Q)return;this.#Y=!0,this.setAttribute("value",Q),this.#Y=!1}#k(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{value:this.value,x:this.#$,y:this.#Q}}))}#F(){if(!this.#Z)return;const Q=($)=>16.6667+this.#O($)/100*66.6667;this.#Z.style.left=`${Q(this.#$)}%`,this.#Z.style.top=`${Q(this.#Q)}%`}#I(){if(!this.#Z)return;const Q=this.#$<0||this.#$>100,$=this.#Q<0||this.#Q>100,J=this.#$<0,Z=this.#$>100,j=this.#Q<0,q=this.#Q>100;this.#Z.classList.toggle("beyond-bounds-x",Q),this.#Z.classList.toggle("beyond-bounds-y",$),this.#Z.classList.toggle("overflow-left",J),this.#Z.classList.toggle("overflow-right",Z),this.#Z.classList.toggle("overflow-up",j),this.#Z.classList.toggle("overflow-down",q)}#S(Q,$){if(!this.#j)return null;const J=this.#j.getBoundingClientRect(),Z=(Q-J.left)/Math.max(J.width,1),j=($-J.top)/Math.max(J.height,1);if(Z<0||Z>1||j<0||j>1)return null;const q=Math.max(0,Math.min(2,Math.floor(Z*3))),K=Math.max(0,Math.min(2,Math.floor(j*3)));return this.#q.find((_)=>Number(_.getAttribute("data-col"))===q&&Number(_.getAttribute("data-row"))===K)}#D(){for(let Q of this.#q)Q.classList.remove("is-hovered")}#T(Q){if(this.#D(),Q)Q.classList.add("is-hovered")}#P(Q,$,J){const Z=Number(Q),j=Number($);if(!Number.isFinite(Z)||!Number.isFinite(j))return;if(Z===this.#$&&j===this.#Q&&J==="input")return;this.#$=Z,this.#Q=j,this.#F(),this.#I(),this.#R(),this.#H(),this.#k(J)}#w(Q,$){if(!this.#j)return{x:this.#$,y:this.#Q};const J=this.#j.getBoundingClientRect(),Z=J.width/6,j=J.height/6,q=Math.max(1,J.width-Z*2),K=Math.max(1,J.height-j*2),_=(Q-(J.left+Z))/q,X=($-(J.top+j))/K;return{x:_*100,y:X*100}}#C(Q,$){if(!this.#j)return{x:50,y:50};const J=this.#j.getBoundingClientRect(),Z=(Q-J.left)/Math.max(J.width,1)*3,j=($-J.top)/Math.max(J.height,1)*3,q=Math.max(0,Math.min(2,Math.floor(Z))),K=Math.max(0,Math.min(2,Math.floor(j)));return{x:q*50,y:K*50}}#f(Q){let J=Q,Z=1/0;for(let j of _0.SNAP_POINTS){const q=Math.abs(Q-j);if(q<Z)Z=q,J=j}return Z<=2.5?J:Q}#x(Q,$){if(!$)return Q;return{x:this.#f(Q.x),y:this.#f(Q.y)}}#V(){if(!this.#j||!this.#U||!this.#W)return;this.#j.removeEventListener("pointermove",this.#U),this.#j.removeEventListener("pointerup",this.#W),this.#j.removeEventListener("pointercancel",this.#W),this.#j.removeEventListener("lostpointercapture",this.#W),this.#U=null,this.#W=null}#m(Q){if(!this.#j||!this.#L)return;Q.preventDefault(),this.#K=!0,this.#N=Q.pointerId;const{clientX:$,clientY:J}=Q,Z=3;let j=!1;this.#j.setPointerCapture(Q.pointerId),this.#U=(q)=>{if(!this.#K||q.pointerId!==this.#N)return;const K=q.clientX-$,_=q.clientY-J,X=Math.hypot(K,_);if(!j&&X<Z)return;if(!j)j=!0,this.#j.classList.add("is-dragging"),this.#D();const Y=this.#x(this.#w(q.clientX,q.clientY),q.shiftKey);this.#P(Y.x,Y.y,"input")},this.#W=(q)=>{if(!this.#K||q.pointerId!==this.#N)return;if(this.#K=!1,this.#N=null,this.#j.classList.remove("is-dragging"),this.#D(),this.#V(),!j){const K=this.#C($,J);this.#P(K.x,K.y,"input")}this.#k("change")},this.#j.addEventListener("pointermove",this.#U),this.#j.addEventListener("pointerup",this.#W),this.#j.addEventListener("pointercancel",this.#W),this.#j.addEventListener("lostpointercapture",this.#W)}#o(){if(!this.#j||!this.#Z)return;this.#j.addEventListener("pointerdown",($)=>{const J=this.#S($.clientX,$.clientY);if(this.#T(J),this.#L){this.#m($);return}const Z=this.#C($.clientX,$.clientY);this.#P(Z.x,Z.y,"input"),this.#k("change")}),this.#j.addEventListener("pointermove",($)=>{if(this.#K)return;const J=this.#S($.clientX,$.clientY);this.#T(J)}),this.#j.addEventListener("pointerleave",()=>{this.#D()});const Q=($,J)=>{if(!$)return;const Z=(j)=>{const q=Number.parseFloat(j.target.value);if(!Number.isFinite(q))return;if(J==="x")this.#P(q,this.#Q,"input");else this.#P(this.#$,q,"input")};$.addEventListener("input",Z),$.addEventListener("change",Z),$.addEventListener("focusout",()=>{this.#k("change")})};Q(this.#_,"x"),Q(this.#X,"y")}}customElements.define("fig-origin-grid",_0);class u0 extends HTMLElement{#$=null;#Q=null;#J=null;#j=null;#q=null;#Z=null;#_=null;#X=null;#K=!1;#Y={x:0.5,y:0.5};#N=!1;constructor(){super();this.position={x:0.5,y:0.5},this.isDragging=!1,this.plane=null,this.cursor=null,this.xInput=null,this.yInput=null,this.coordinates="screen",this.#$=(Q)=>this.#H(Q),this.#Q=()=>{this.isDragging=!0,this.plane?.classList.add("dragging")},this.#J=(Q)=>this.#k(Q),this.#j=()=>this.#F(),this.#q=(Q)=>this.#E(Q),this.#Z=(Q)=>this.#z(Q),this.#_=()=>this.#A(),this.#X=()=>this.#A()}connectedCallback(){requestAnimationFrame(()=>{if(this.precision=this.getAttribute("precision")||3,this.precision=parseInt(this.precision),this.transform=this.getAttribute("transform")||1,this.transform=Number(this.transform),this.coordinates=this.getAttribute("coordinates")||"screen",x(this,"--aspect-ratio",this.getAttribute("aspect-ratio")),!this.hasAttribute("value"))this.setAttribute("value","50% 50%");this.#L(),this.#O(),this.#D(),this.#T(),this.#P(),this.#N=!0})}#U(Q){return this.coordinates==="math"?1-Q:Q}disconnectedCallback(){this.#M()}get#W(){const Q=this.getAttribute("fields");if(Q===null)return!1;return Q.toLowerCase()!=="false"}#L(){this.innerHTML=this.#B()}#G(){const Q=(this.getAttribute("axis-labels")||"").trim();if(!Q)return{left:"",right:"",top:"",bottom:"",leftNoRotate:!1};const $=Q.split(/\s+/).filter(Boolean);if($.length===1)return{left:"",right:"",top:$[0],bottom:"",leftNoRotate:!1};if($.length===2){const[J,Z]=$;return{left:J,right:"",top:"",bottom:Z,leftNoRotate:!0}}if($.length===4){const[J,Z,j,q]=$;return{left:J,right:Z,top:j,bottom:q,leftNoRotate:!1}}return{left:"",right:"",top:"",bottom:"",leftNoRotate:!1}}#B(){const Q=this.#G();return`        
           <div class="fig-input-joystick-plane-container" tabindex="0">
             ${[Q.left?`<label class="fig-joystick-axis-label left${Q.leftNoRotate?" no-rotate":""}" aria-hidden="true">${Q.left}</label>`:"",Q.right?`<label class="fig-joystick-axis-label right" aria-hidden="true">${Q.right}</label>`:"",Q.top?`<label class="fig-joystick-axis-label top" aria-hidden="true">${Q.top}</label>`:"",Q.bottom?`<label class="fig-joystick-axis-label bottom" aria-hidden="true">${Q.bottom}</label>`:""].join("")}
             <div class="fig-input-joystick-plane">
@@ -255,7 +258,7 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
               </fig-button>
             </fig-tooltip>
           </div>
-          ${this.#N?`<div class="joystick-values">
+          ${this.#W?`<div class="joystick-values">
                   <fig-input-number
                     name="x"
                     step="1"
@@ -275,7 +278,7 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
                     <span slot="prepend">Y</span>
                   </fig-input-number>
                 </div>`:""}
-        `}#O(){this.plane=this.querySelector(".fig-input-joystick-plane"),this.cursor=this.querySelector("fig-handle"),this.xInput=this.querySelector("fig-input-number[name='x']"),this.yInput=this.querySelector("fig-input-number[name='y']"),this.plane?.addEventListener("pointerdown",this.#$),this.cursor?.addEventListener("pointerdown",this.#Q),this.cursor?.addEventListener("input",this.#J),this.cursor?.addEventListener("change",this.#j);const Q=this.querySelector(".fig-joystick-reset");if(Q)Q.addEventListener("click",()=>this.#y());if(this.#N&&this.xInput&&this.yInput)this.xInput.addEventListener("input",this.#_),this.xInput.addEventListener("change",this.#_),this.xInput.addEventListener("focusout",this.#K),this.yInput.addEventListener("input",this.#Z),this.yInput.addEventListener("change",this.#Z),this.yInput.addEventListener("focusout",this.#X)}#M(){if(this.plane?.removeEventListener("pointerdown",this.#$),this.cursor?.removeEventListener("pointerdown",this.#Q),this.cursor?.removeEventListener("input",this.#J),this.cursor?.removeEventListener("change",this.#j),this.plane?.classList.remove("dragging"),this.isDragging=!1,this.#N&&this.xInput&&this.yInput)this.xInput.removeEventListener("input",this.#_),this.xInput.removeEventListener("change",this.#_),this.xInput.removeEventListener("focusout",this.#K),this.yInput.removeEventListener("input",this.#Z),this.yInput.removeEventListener("change",this.#Z),this.yInput.removeEventListener("focusout",this.#X)}#R(Q){const $=Number.parseFloat(Q.target.value);if(!Number.isFinite($))return;this.position.x=Math.max(0,Math.min(1,$/100)),this.#D(),this.#k(),this.#P()}#z(Q){const $=Number.parseFloat(Q.target.value);if(!Number.isFinite($))return;this.position.y=Math.max(0,Math.min(1,$/100)),this.#D(),this.#k(),this.#P()}#E(){this.#k(),this.#C()}#A(Q,$,{syncHandle:J=!0}={}){const Z=Math.max(0,Math.min(1,Q)),j=Math.max(0,Math.min(1,$)),_=this.coordinates==="math"?1-j:j;if(this.position={x:Z,y:_},J)this.#D();this.#k()}#f(Q){if(!this.plane||!this.cursor)return;if(Q.target?.closest?.(".fig-joystick-reset, fig-tooltip, fig-handle"))return;const $=this.plane.getBoundingClientRect(),J=$.width>0?(Q.clientX-$.left)/$.width:0.5,Z=$.height>0?(Q.clientY-$.top)/$.height:0.5;this.cursor.value=`${Math.round(J*100)}% ${Math.round(Z*100)}%`,this.#A(J,Z,{syncHandle:!1}),this.#P(),this.#C()}#T(Q){const $=Q.detail??{};if(typeof $.px!=="number"||typeof $.py!=="number")return;this.#A($.px,$.py,{syncHandle:!1}),this.#P()}#F(){this.isDragging=!1,this.plane?.classList.remove("dragging"),this.#k(),this.#C()}#P(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0}))}#C(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}))}#D(){const Q=this.#U(this.position.y);if(this.cursor)this.cursor.value=`${this.position.x*100}% ${Q*100}%`;if(this.#N&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(this.position.x*100)),this.yInput.setAttribute("value",Math.round(this.position.y*100))}#k(){const Q=this.value;if(this.getAttribute("value")!==Q)this.#q=!0,this.setAttribute("value",Q),this.#q=!1;this.#H()}#H(){const Q=this.#W,$=Math.round(this.position.x*100)===Math.round(Q.x*100)&&Math.round(this.position.y*100)===Math.round(Q.y*100);this.toggleAttribute("default",$),this.style.setProperty("--is-not-default",$?"0":"1")}#y(){this.position={...this.#W},this.#D(),this.#k(),this.#P(),this.#C()}focus(){this.querySelector(".fig-input-joystick-plane-container")?.focus()}static get observedAttributes(){return["value","precision","transform","fields","coordinates","aspect-ratio","axis-labels"]}get value(){return`${Math.round(this.position.x*100)}% ${Math.round(this.position.y*100)}%`}set value(Q){const $=Q==null?"":String(Q).trim();if(!$)this.position={x:0.5,y:0.5};else{const J=$.split(/[\s,]+/).filter(Boolean),Z=(q)=>{if(!q)return 0.5;const K=q.includes("%"),X=Number.parseFloat(q.replace(/%/g,"").trim());if(!Number.isFinite(X))return 0.5;const Y=K||Math.abs(X)>1?X/100:X;return Math.max(0,Math.min(1,Y))},j=Z(J[0]),_=Z(J[1]??J[0]);this.position={x:j,y:_}}if(this.#Y)this.#D(),this.#H()}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){y(this,"--aspect-ratio",J);return}if(Q==="value"){if(this.#q||this.isDragging)return;this.value=J}if(Q==="precision")this.precision=parseInt(J);if(Q==="transform")this.transform=Number(J);if(Q==="fields"&&J!==$)this.#M(),this.#B(),this.#O(),this.#D();if(Q==="axis-labels"&&J!==$)this.#M(),this.#B(),this.#O(),this.#D();if(Q==="coordinates")this.coordinates=J||"screen",this.#D()}}customElements.define("fig-joystick",V0);class w0 extends HTMLElement{#$;#Q;#J=null;#j;#_;#Z;#K;#X;#q;constructor(){super();this.angle=0,this.#$=1,this.#Q=0,this.isDragging=!1,this.isShiftHeld=!1,this.handle=null,this.angleInput=null,this.plane=null,this.units="\xB0",this.min=null,this.max=null,this.dial=!0,this.showRotations=!1,this.rotationSpan=null,this.#j=this.#A.bind(this),this.#_=this.#y.bind(this),this.#Z=this.#x.bind(this),this.#K=this.#S.bind(this),this.#X=this.#b.bind(this),this.#q=this.#f.bind(this)}connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||1,this.precision=parseInt(this.precision),this.text=this.getAttribute("text")==="true";let Q=this.getAttribute("units")||"\xB0";if(Q==="deg")Q="\xB0";if(this.units=Q,this.min=this.hasAttribute("min")?Number(this.getAttribute("min")):null,this.max=this.hasAttribute("max")?Number(this.getAttribute("max")):null,this.dial=this.#Y("dial",!0),this.showRotations=this.#U(),this.#W(),this.#z(),this.#H(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#E()}#W(){this.innerHTML=this.#N()}#Y(Q,$=!1){const J=this.getAttribute(Q);if(J===null)return $;const Z=J.trim().toLowerCase();if(Z===""||Z==="true")return!0;if(Z==="false")return!1;return!0}#U(){if(this.hasAttribute("rotations"))return this.#Y("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#Y("show-rotations",!1);return!1}#N(){const Q=this.#G(),$=this.min!==null?`min="${this.min}"`:"",J=this.max!==null?`max="${this.max}"`:"";return`
+        `}#O(){this.plane=this.querySelector(".fig-input-joystick-plane"),this.cursor=this.querySelector("fig-handle"),this.xInput=this.querySelector("fig-input-number[name='x']"),this.yInput=this.querySelector("fig-input-number[name='y']"),this.plane?.addEventListener("pointerdown",this.#$),this.cursor?.addEventListener("pointerdown",this.#Q),this.cursor?.addEventListener("input",this.#J),this.cursor?.addEventListener("change",this.#j);const Q=this.querySelector(".fig-joystick-reset");if(Q)Q.addEventListener("click",()=>this.#w());if(this.#W&&this.xInput&&this.yInput)this.xInput.addEventListener("input",this.#q),this.xInput.addEventListener("change",this.#q),this.xInput.addEventListener("focusout",this.#_),this.yInput.addEventListener("input",this.#Z),this.yInput.addEventListener("change",this.#Z),this.yInput.addEventListener("focusout",this.#X)}#M(){if(this.plane?.removeEventListener("pointerdown",this.#$),this.cursor?.removeEventListener("pointerdown",this.#Q),this.cursor?.removeEventListener("input",this.#J),this.cursor?.removeEventListener("change",this.#j),this.plane?.classList.remove("dragging"),this.isDragging=!1,this.#W&&this.xInput&&this.yInput)this.xInput.removeEventListener("input",this.#q),this.xInput.removeEventListener("change",this.#q),this.xInput.removeEventListener("focusout",this.#_),this.yInput.removeEventListener("input",this.#Z),this.yInput.removeEventListener("change",this.#Z),this.yInput.removeEventListener("focusout",this.#X)}#E(Q){const $=Number.parseFloat(Q.target.value);if(!Number.isFinite($))return;this.position.x=Math.max(0,Math.min(1,$/100)),this.#D(),this.#T(),this.#I()}#z(Q){const $=Number.parseFloat(Q.target.value);if(!Number.isFinite($))return;this.position.y=Math.max(0,Math.min(1,$/100)),this.#D(),this.#T(),this.#I()}#A(){this.#T(),this.#S()}#R(Q,$,{syncHandle:J=!0}={}){const Z=Math.max(0,Math.min(1,Q)),j=Math.max(0,Math.min(1,$)),q=this.coordinates==="math"?1-j:j;if(this.position={x:Z,y:q},J)this.#D();this.#T()}#H(Q){if(!this.plane||!this.cursor)return;if(Q.target?.closest?.(".fig-joystick-reset, fig-tooltip, fig-handle"))return;const $=this.plane.getBoundingClientRect(),J=$.width>0?(Q.clientX-$.left)/$.width:0.5,Z=$.height>0?(Q.clientY-$.top)/$.height:0.5;this.cursor.value=`${Math.round(J*100)}% ${Math.round(Z*100)}%`,this.#R(J,Z,{syncHandle:!1}),this.#I(),this.#S()}#k(Q){const $=Q.detail??{};if(typeof $.px!=="number"||typeof $.py!=="number")return;this.#R($.px,$.py,{syncHandle:!1}),this.#I()}#F(){this.isDragging=!1,this.plane?.classList.remove("dragging"),this.#T(),this.#S()}#I(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#S(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,x:this.position.x,y:this.position.y}}))}#D(){const Q=this.#U(this.position.y);if(this.cursor)this.cursor.value=`${this.position.x*100}% ${Q*100}%`;if(this.#W&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(this.position.x*100)),this.yInput.setAttribute("value",Math.round(this.position.y*100))}#T(){const Q=this.value;if(this.getAttribute("value")!==Q)this.#K=!0,this.setAttribute("value",Q),this.#K=!1;this.#P()}#P(){const Q=this.#Y,$=Math.round(this.position.x*100)===Math.round(Q.x*100)&&Math.round(this.position.y*100)===Math.round(Q.y*100);this.toggleAttribute("default",$),this.style.setProperty("--is-not-default",$?"0":"1")}#w(){this.position={...this.#Y},this.#D(),this.#T(),this.#I(),this.#S()}focus(){this.querySelector(".fig-input-joystick-plane-container")?.focus()}static get observedAttributes(){return["value","precision","transform","fields","coordinates","aspect-ratio","axis-labels"]}get value(){return`${Math.round(this.position.x*100)}% ${Math.round(this.position.y*100)}%`}set value(Q){const $=Q==null?"":String(Q).trim();if(!$)this.position={x:0.5,y:0.5};else{const J=$.split(/[\s,]+/).filter(Boolean),Z=(K)=>{if(!K)return 0.5;const _=K.includes("%"),X=Number.parseFloat(K.replace(/%/g,"").trim());if(!Number.isFinite(X))return 0.5;const Y=_||Math.abs(X)>1?X/100:X;return Math.max(0,Math.min(1,Y))},j=Z(J[0]),q=Z(J[1]??J[0]);this.position={x:j,y:q}}if(this.#N)this.#D(),this.#P()}attributeChangedCallback(Q,$,J){if(Q==="aspect-ratio"){x(this,"--aspect-ratio",J);return}if(Q==="value"){if(this.#K||this.isDragging)return;this.value=J}if(Q==="precision")this.precision=parseInt(J);if(Q==="transform")this.transform=Number(J);if(Q==="fields"&&J!==$)this.#M(),this.#L(),this.#O(),this.#D();if(Q==="axis-labels"&&J!==$)this.#M(),this.#L(),this.#O(),this.#D();if(Q==="coordinates")this.coordinates=J||"screen",this.#D()}}customElements.define("fig-joystick",u0);class c0 extends HTMLElement{#$;#Q;#J=null;#j;#q;#Z;#_;#X;#K;constructor(){super();this.angle=0,this.#$=1,this.#Q=0,this.isDragging=!1,this.isShiftHeld=!1,this.handle=null,this.angleInput=null,this.plane=null,this.units="\xB0",this.min=null,this.max=null,this.dial=!0,this.showRotations=!1,this.rotationSpan=null,this.#j=this.#R.bind(this),this.#q=this.#w.bind(this),this.#Z=this.#C.bind(this),this.#_=this.#f.bind(this),this.#X=this.#x.bind(this),this.#K=this.#H.bind(this)}connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||1,this.precision=parseInt(this.precision),this.text=this.getAttribute("text")==="true";let Q=this.getAttribute("units")||"\xB0";if(Q==="deg")Q="\xB0";if(this.units=Q,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.#U(),this.#Y(),this.#z(),this.#P(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#A()}#Y(){this.innerHTML=this.#W()}#N(Q,$=!1){const J=this.getAttribute(Q);if(J===null)return $;const Z=J.trim().toLowerCase();if(Z===""||Z==="true")return!0;if(Z==="false")return!1;return!0}#U(){if(this.hasAttribute("rotations"))return this.#N("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#N("show-rotations",!1);return!1}#W(){const Q=this.#B(),$=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>`:""}
@@ -288,9 +291,9 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
                 units="${this.units}">
                 ${this.showRotations?'<span slot="append" class="fig-input-angle-rotations"></span>':""}
               </fig-input-number>`:""}
-    `}#B(){const Q=Math.abs(this.#O(this.angle));return Math.floor(Q/360)}#L(){if(!this.rotationSpan)return;const Q=this.#B();if(Q>1)this.rotationSpan.textContent=`\xD7${Q}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#G(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#O(Q){switch(this.units){case"rad":return Q*180/Math.PI;case"turn":return Q*360;default:return Q}}#M(Q){switch(this.units){case"rad":return Q*Math.PI/180;case"turn":return Q/360;default:return Q}}#R(Q,$,J){let Z;switch($){case"rad":Z=Q*180/Math.PI;break;case"turn":Z=Q*360;break;default:Z=Q}switch(J){case"rad":return Z*Math.PI/180;case"turn":return Z/360;default:return Z}}#z(){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.#L(),this.plane?.addEventListener("mousedown",this.#_),this.plane?.addEventListener("touchstart",this.#Z),window.addEventListener("keydown",this.#K),window.addEventListener("keyup",this.#X),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#q);this.addEventListener("change",this.#j,!0)}#E(){if(this.plane?.removeEventListener("mousedown",this.#_),this.plane?.removeEventListener("touchstart",this.#Z),window.removeEventListener("keydown",this.#K),window.removeEventListener("keyup",this.#X),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#q);this.removeEventListener("change",this.#j,!0)}#A(Q){if(!Q.target?.matches?.("input"))return;const J=Q.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(J){const Z=parseFloat(J[1]);let j=J[2].toLowerCase();if(j==="deg")j="\xB0";if(j!==this.units){const _=this.#R(Z,j,this.units);Q.target.value=String(_)}}}#f(Q){Q.stopPropagation(),this.angle=Number(Q.target.value),this.#T(),this.#H(),this.#L(),this.#D(),this.#k()}#T(){const $=this.#O(this.angle)*Math.PI/180;this.#$=Math.cos($),this.#Q=Math.sin($)}#F(Q){if(!this.isShiftHeld)return Q;const $=45;return Math.round(Q/$)*$}#P(Q){const $=this.plane.getBoundingClientRect(),J=$.left+$.width/2,Z=$.top+$.height/2,j=Q.clientX-J,_=Q.clientY-Z;return Math.atan2(_,j)*180/Math.PI}#C(Q){let J=(this.#P(Q)%360+360)%360;if(J=this.#F(J),this.min!==null||this.max!==null)this.angle=this.#M(J);else if(this.#J===null){this.#J=J;const _=(this.#O(this.angle)%360+360)%360;let q=J-_;if(q>180)q-=360;if(q<-180)q+=360;this.angle+=this.#M(q)}else{let j=J-this.#J;if(j>180)j-=360;if(j<-180)j+=360;this.angle+=this.#M(j),this.#J=J}if(this.#T(),this.#H(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#L(),this.#D()}#D(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0}))}#k(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}))}#H(){if(this.handle){const $=this.#O(this.angle)*Math.PI/180,J=this.plane.offsetWidth/2-this.handle.offsetWidth/2,Z=Math.cos($)*J,j=Math.sin($)*J;this.handle.style.transform=`translate(${Z}px, ${j}px)`}}#y(Q){this.isDragging=!0,this.#J=null,this.#C(Q);const $=(Z)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#C(Z)},J=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",J),this.#k()};window.addEventListener("mousemove",$),window.addEventListener("mouseup",J)}#x(Q){Q.preventDefault(),this.isDragging=!0,this.#J=null,this.#C(Q.touches[0]);const $=(Z)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#C(Z.touches[0])},J=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",$),window.removeEventListener("touchend",J),this.#k()};window.addEventListener("touchmove",$),window.addEventListener("touchend",J)}#S(Q){if(Q.key==="Shift")this.isShiftHeld=!0}#b(Q){if(Q.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.#$}get opposite(){return this.#Q}set value(Q){if(isNaN(Q)){console.error("Invalid value: must be a number.");return}if(this.angle=Q,this.#T(),this.#H(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#L()}attributeChangedCallback(Q,$,J){switch(Q){case"value":if(this.isDragging)break;this.value=Number(J);break;case"precision":this.precision=parseInt(J);break;case"text":if(J!==$){if(this.text=J?.toLowerCase()==="true",this.isConnected)this.#W(),this.#z(),this.#H()}break;case"dial":if(this.dial=this.#Y("dial",!0),this.isConnected)this.#W(),this.#z(),this.#H();break;case"units":{let Z=J||"\xB0";if(Z==="deg")Z="\xB0";if(this.units=Z,this.isConnected)this.#W(),this.#z(),this.#H();break}case"min":if(this.min=J!==null?Number(J):null,this.isConnected)this.#W(),this.#z(),this.#H();break;case"max":if(this.max=J!==null?Number(J):null,this.isConnected)this.#W(),this.#z(),this.#H();break;case"rotations":case"show-rotations":if(this.showRotations=this.#U(),this.isConnected)this.#W(),this.#z(),this.#H();break}}}customElements.define("fig-input-angle",w0);class J0 extends HTMLElement{connectedCallback(){const Q=this.getAttribute("duration");if(Q)this.style.setProperty("--shimmer-duration",Q)}static get observedAttributes(){return["duration","playing"]}get playing(){return this.getAttribute("playing")!=="false"}set playing(Q){if(Q)this.removeAttribute("playing");else this.setAttribute("playing","false")}attributeChangedCallback(Q,$,J){if(Q==="duration")this.style.setProperty("--shimmer-duration",J||"1.5s")}}customElements.define("fig-shimmer",J0);class b0 extends J0{}customElements.define("fig-skeleton",b0);class v0 extends HTMLElement{static get observedAttributes(){return["open","visible"]}#$=null;#Q=null;connectedCallback(){requestAnimationFrame(()=>{this.#J()})}disconnectedCallback(){if(this.#$&&this.#Q)this.#$.removeEventListener("click",this.#Q)}#J(){const Q=this.querySelector(":scope > .fig-layer-row");if(!Q)return;if(Q.querySelector(".fig-layer-chevron"))return;this.#$=document.createElement("span"),this.#$.className="fig-layer-chevron",Q.prepend(this.#$),this.#Q=this.#j.bind(this),this.#$.addEventListener("click",this.#Q)}#j(Q){Q.stopPropagation(),this.open=!this.open}get open(){const Q=this.getAttribute("open");return Q!==null&&Q!=="false"}set open(Q){const $=this.open;if(Q)this.setAttribute("open","true");else this.setAttribute("open","false");if($!==Q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:Q},bubbles:!0}))}get visible(){return this.getAttribute("visible")!=="false"}set visible(Q){const $=this.visible;if(Q)this.setAttribute("visible","true");else this.setAttribute("visible","false");if($!==Q)this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:Q},bubbles:!0}))}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="open"){const Z=J!==null&&J!=="false";this.dispatchEvent(new CustomEvent("openchange",{detail:{open:Z},bubbles:!0}))}if(Q==="visible"){const Z=J!=="false";this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:Z},bubbles:!0}))}}}customElements.define("fig-layer",v0);class l extends HTMLElement{#$=null;#Q=null;#J=null;#j="solid";anchorElement=null;#_="solid";#Z="srgb";#K={h:0,s:0,v:85,a:1};#X="hex";#q={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#W={url:null,scaleMode:"fill",scale:50};#Y={url:null,scaleMode:"fill",scale:50};#U={stream:null,snapshot:null};#N={};#B={};#L=null;#G=null;#O=null;#M=null;#R=!1;#z=null;#E=null;#A=null;constructor(){super()}static get observedAttributes(){return["value","disabled","alpha","mode","experimental"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#f(),this.#T(),this.#F()})}disconnectedCallback(){if(this.#z)this.#z(),this.#z=null;if(this.#E)this.#E.disconnect(),this.#E=null;if(this.#A)this.#A.disconnect(),this.#A=null;if(this.#U.stream)this.#U.stream.getTracks().forEach((Q)=>Q.stop()),this.#U.stream=null;if(this.#Y.url&&this.#Y.url.startsWith("blob:"))URL.revokeObjectURL(this.#Y.url);if(this.#Q)this.#Q.removeAttribute("selected");if(this.#J)this.#J.close(),this.#J.remove(),this.#J=null}#f(){const Q=Array.from(this.children).find(($)=>!$.getAttribute("slot")?.startsWith("mode-"));if(!Q)this.#Q=document.createElement("fig-chit"),this.#Q.setAttribute("background","#D9D9D9"),this.appendChild(this.#Q),this.#$=this.#Q;else if(Q.tagName==="FIG-CHIT")this.#Q=Q,this.#$=Q;else this.#$=Q,this.#Q=null;if(this.#$.addEventListener("click",($)=>{if(this.hasAttribute("disabled"))return;$.stopPropagation(),$.preventDefault(),this.#C()}),this.#Q)requestAnimationFrame(()=>{const $=this.#Q.querySelector('input[type="color"]');if($)$.style.pointerEvents="none"})}#T(){const Q=this.getAttribute("value");if(!Q)return;const $=["solid","gradient","image","video","webcam"];try{const J=JSON.parse(Q);if(J.type)this.#_=J.type;if(J.color){if(typeof J.color==="string")this.#K=this.#q0(J.color);else if(typeof J.color==="object"&&J.color.h!==void 0)this.#K=J.color}if(J.opacity!==void 0)this.#K.a=J.opacity/100;if(J.colorSpace==="display-p3"||J.colorSpace==="srgb")this.#Z=J.colorSpace;if(J.gradient)this.#q=w({...this.#q,...J.gradient});if(J.image)this.#W={...this.#W,...J.image};if(J.video)this.#Y={...this.#Y,...J.video};if(J.type&&!$.includes(J.type)){const{type:Z,...j}=J;this.#B[J.type]=j}}catch(J){if(Q.startsWith("#"))this.#_="solid",this.#K=this.#q0(Q)}}#F(){if(!this.#Q)return;let Q,$="cover",J="center";switch(this.#_){case"solid":Q=this.#Q0(this.#K);break;case"gradient":Q=this.#w();break;case"image":if(this.#W.url){Q=`url(${this.#W.url})`;const j=this.#P(this.#W.scaleMode,this.#W.scale);$=j.size,J=j.position}else Q="";break;case"video":if(this.#Y.url){Q=`url(${this.#Y.url})`;const j=this.#P(this.#Y.scaleMode,this.#Y.scale);$=j.size,J=j.position}else Q="";break;default:Q=this.#N[this.#_]?.element?.getAttribute("chit-background")||"#D9D9D9"}if(this.#Q.setAttribute("background",Q),this.#Q.style.setProperty("--chit-bg-size",$),this.#Q.style.setProperty("--chit-bg-position",J),this.#_==="solid")this.#Q.setAttribute("alpha",this.#K.a);else this.#Q.removeAttribute("alpha")}#P(Q,$){switch(Q){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${$}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#C(){if(!this.#J)this.#D();this.#k(this.#_);const Q=this.#J.querySelector(".fig-fill-picker-gamut");if(Q)Q.value=this.#Z;if(this.#Q)this.#Q.setAttribute("selected","true");this.#J.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#x(),this.#S()})})}#D(){this.#N={},this.querySelectorAll('[slot^="mode-"]').forEach((L)=>{const B=L.getAttribute("slot").slice(5);this.#N[B]={element:L,label:L.getAttribute("label")||B.charAt(0).toUpperCase()+B.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.setAttribute("drag","true"),this.#J.setAttribute("handle","fig-header"),this.#J.setAttribute("autoresize","false"),this.#J.classList.add("fig-fill-picker-dialog"),this.#J.anchor=this.anchorElement||this.#$;const Q=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",Q);const $=["solid","gradient","image","video","webcam"],J={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},Z=this.getAttribute("mode");let j;if(Z){if(j=Z.split(",").map((B)=>B.trim().toLowerCase()).filter((B)=>$.includes(B)||this.#N[B]),j.length===0)j=[...$]}else j=[...$];const _={...J};for(let[L,{label:B}]of Object.entries(this.#N))_[L]=B;if(!j.includes(this.#_))this.#_=j[0],this.#j=j[0];const q=this.getAttribute("experimental"),K=q?`experimental="${q}"`:"";let X;if(j.length===1)X=`<h3 class="fig-fill-picker-type-label">${_[j[0]]}</h3>`;else{const L=j.map((B)=>`<option value="${B}">${_[B]}</option>`).join("\n          ");X=`<fig-dropdown class="fig-fill-picker-type" ${K} value="${this.#_}">
+    `}#L(){const Q=Math.abs(this.#O(this.angle));return Math.floor(Q/360)}#G(){if(!this.rotationSpan)return;const Q=this.#L();if(Q>1)this.rotationSpan.textContent=`\xD7${Q}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#B(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#O(Q){switch(this.units){case"rad":return Q*180/Math.PI;case"turn":return Q*360;default:return Q}}#M(Q){switch(this.units){case"rad":return Q*Math.PI/180;case"turn":return Q/360;default:return Q}}#E(Q,$,J){let Z;switch($){case"rad":Z=Q*180/Math.PI;break;case"turn":Z=Q*360;break;default:Z=Q}switch(J){case"rad":return Z*Math.PI/180;case"turn":return Z/360;default:return Z}}#z(){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.#G(),this.plane?.addEventListener("mousedown",this.#q),this.plane?.addEventListener("touchstart",this.#Z),window.addEventListener("keydown",this.#_),window.addEventListener("keyup",this.#X),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#K);this.addEventListener("change",this.#j,!0)}#A(){if(this.plane?.removeEventListener("mousedown",this.#q),this.plane?.removeEventListener("touchstart",this.#Z),window.removeEventListener("keydown",this.#_),window.removeEventListener("keyup",this.#X),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#K);this.removeEventListener("change",this.#j,!0)}#R(Q){if(!Q.target?.matches?.("input"))return;const J=Q.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(J){const Z=parseFloat(J[1]);let j=J[2].toLowerCase();if(j==="deg")j="\xB0";if(j!==this.units){const q=this.#E(Z,j,this.units);Q.target.value=String(q)}}}#H(Q){Q.stopPropagation(),this.angle=Number(Q.target.value),this.#k(),this.#P(),this.#G(),this.#D(),this.#T()}#k(){const $=this.#O(this.angle)*Math.PI/180;this.#$=Math.cos($),this.#Q=Math.sin($)}#F(Q){if(!this.isShiftHeld)return Q;const $=45;return Math.round(Q/$)*$}#I(Q){const $=this.plane.getBoundingClientRect(),J=$.left+$.width/2,Z=$.top+$.height/2,j=Q.clientX-J,q=Q.clientY-Z;return Math.atan2(q,j)*180/Math.PI}#S(Q){let J=(this.#I(Q)%360+360)%360;if(J=this.#F(J),this.min!==null||this.max!==null)this.angle=this.#M(J);else if(this.#J===null){this.#J=J;const q=(this.#O(this.angle)%360+360)%360;let K=J-q;if(K>180)K-=360;if(K<-180)K+=360;this.angle+=this.#M(K)}else{let j=J-this.#J;if(j>180)j-=360;if(j<-180)j+=360;this.angle+=this.#M(j),this.#J=J}if(this.#k(),this.#P(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#G(),this.#D()}#D(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#T(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#P(){if(this.handle){const $=this.#O(this.angle)*Math.PI/180,J=this.plane.offsetWidth/2-this.handle.offsetWidth/2,Z=Math.cos($)*J,j=Math.sin($)*J;this.handle.style.transform=`translate(${Z}px, ${j}px)`}}#w(Q){this.isDragging=!0,this.#J=null,this.#S(Q);const $=(Z)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#S(Z)},J=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",J),this.#T()};window.addEventListener("mousemove",$),window.addEventListener("mouseup",J)}#C(Q){Q.preventDefault(),this.isDragging=!0,this.#J=null,this.#S(Q.touches[0]);const $=(Z)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#S(Z.touches[0])},J=()=>{this.isDragging=!1,this.#J=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",$),window.removeEventListener("touchend",J),this.#T()};window.addEventListener("touchmove",$),window.addEventListener("touchend",J)}#f(Q){if(Q.key==="Shift")this.isShiftHeld=!0}#x(Q){if(Q.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.#$}get opposite(){return this.#Q}set value(Q){if(isNaN(Q)){console.error("Invalid value: must be a number.");return}if(this.angle=Q,this.#k(),this.#P(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#G()}attributeChangedCallback(Q,$,J){switch(Q){case"value":if(this.isDragging)break;this.value=Number(J);break;case"precision":this.precision=parseInt(J);break;case"text":if(J!==$){if(this.text=J?.toLowerCase()==="true",this.isConnected)this.#Y(),this.#z(),this.#P()}break;case"dial":if(this.dial=this.#N("dial",!0),this.isConnected)this.#Y(),this.#z(),this.#P();break;case"units":{let Z=J||"\xB0";if(Z==="deg")Z="\xB0";if(this.units=Z,this.isConnected)this.#Y(),this.#z(),this.#P();break}case"min":if(this.min=J!==null?Number(J):null,this.isConnected)this.#Y(),this.#z(),this.#P();break;case"max":if(this.max=J!==null?Number(J):null,this.isConnected)this.#Y(),this.#z(),this.#P();break;case"rotations":case"show-rotations":if(this.showRotations=this.#U(),this.isConnected)this.#Y(),this.#z(),this.#P();break}}}customElements.define("fig-input-angle",c0);class X0 extends HTMLElement{connectedCallback(){const Q=this.getAttribute("duration");if(Q)this.style.setProperty("--shimmer-duration",Q)}static get observedAttributes(){return["duration","playing"]}get playing(){return this.getAttribute("playing")!=="false"}set playing(Q){if(Q)this.removeAttribute("playing");else this.setAttribute("playing","false")}attributeChangedCallback(Q,$,J){if(Q==="duration")this.style.setProperty("--shimmer-duration",J||"1.5s")}}customElements.define("fig-shimmer",X0);class s0 extends X0{}customElements.define("fig-skeleton",s0);class d0 extends HTMLElement{static get observedAttributes(){return["open","visible"]}#$=null;#Q=null;connectedCallback(){requestAnimationFrame(()=>{this.#J()})}disconnectedCallback(){if(this.#$&&this.#Q)this.#$.removeEventListener("click",this.#Q)}#J(){const Q=this.querySelector(":scope > .fig-layer-row");if(!Q)return;if(Q.querySelector(".fig-layer-chevron"))return;this.#$=document.createElement("span"),this.#$.className="fig-layer-chevron",Q.prepend(this.#$),this.#Q=this.#j.bind(this),this.#$.addEventListener("click",this.#Q)}#j(Q){Q.stopPropagation(),this.open=!this.open}get open(){const Q=this.getAttribute("open");return Q!==null&&Q!=="false"}set open(Q){const $=this.open;if(Q)this.setAttribute("open","true");else this.setAttribute("open","false");if($!==Q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:Q},bubbles:!0}))}get visible(){return this.getAttribute("visible")!=="false"}set visible(Q){const $=this.visible;if(Q)this.setAttribute("visible","true");else this.setAttribute("visible","false");if($!==Q)this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:Q},bubbles:!0}))}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="open"){const Z=J!==null&&J!=="false";this.dispatchEvent(new CustomEvent("openchange",{detail:{open:Z},bubbles:!0}))}if(Q==="visible"){const Z=J!=="false";this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:Z},bubbles:!0}))}}}customElements.define("fig-layer",d0);class $0 extends HTMLElement{#$=null;#Q=null;#J=null;#j="solid";anchorElement=null;#q="solid";#Z="srgb";#_={h:0,s:0,v:85,a:1};#X="hex";#K={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#Y={url:null,scaleMode:"fill",scale:50};#N={url:null,scaleMode:"fill",scale:50};#U={stream:null,snapshot:null};#W={};#L={};#G=null;#B=null;#O=null;#M=null;#E=!1;#z=null;#A=null;#R=null;constructor(){super()}static get observedAttributes(){return["value","disabled","alpha","mode","experimental"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#H(),this.#k(),this.#F()})}disconnectedCallback(){if(this.#z)this.#z(),this.#z=null;if(this.#A)this.#A.disconnect(),this.#A=null;if(this.#R)this.#R.disconnect(),this.#R=null;if(this.#U.stream)this.#U.stream.getTracks().forEach((Q)=>Q.stop()),this.#U.stream=null;if(this.#N.url&&this.#N.url.startsWith("blob:"))URL.revokeObjectURL(this.#N.url);if(this.#Q)this.#Q.removeAttribute("selected");if(this.#J)this.#J.close(),this.#J.remove(),this.#J=null}#H(){const Q=Array.from(this.children).find(($)=>!$.getAttribute("slot")?.startsWith("mode-"));if(!Q)this.#Q=document.createElement("fig-chit"),this.#Q.setAttribute("background","#D9D9D9"),this.appendChild(this.#Q),this.#$=this.#Q;else if(Q.tagName==="FIG-CHIT")this.#Q=Q,this.#$=Q;else this.#$=Q,this.#Q=null;if(this.#$.addEventListener("click",($)=>{if(this.hasAttribute("disabled"))return;$.stopPropagation(),$.preventDefault(),this.#S()}),this.#Q)requestAnimationFrame(()=>{const $=this.#Q.querySelector('input[type="color"]');if($)$.style.pointerEvents="none"})}#k(){const Q=this.getAttribute("value");if(!Q)return;const $=["solid","gradient","image","video","webcam"];try{const J=JSON.parse(Q);if(J.type)this.#q=J.type;if(J.color){if(typeof J.color==="string")this.#_=this.#X0(J.color);else if(typeof J.color==="object"&&J.color.h!==void 0)this.#_=J.color}if(J.opacity!==void 0)this.#_.a=J.opacity/100;if(J.colorSpace==="display-p3"||J.colorSpace==="srgb")this.#Z=J.colorSpace;if(J.gradient)this.#K=V({...this.#K,...J.gradient});if(J.image)this.#Y={...this.#Y,...J.image};if(J.video)this.#N={...this.#N,...J.video};if(J.type&&!$.includes(J.type)){const{type:Z,...j}=J;this.#L[J.type]=j}}catch(J){if(Q.startsWith("#"))this.#q="solid",this.#_=this.#X0(Q)}}#F(){if(!this.#Q)return;let Q,$="cover",J="center";switch(this.#q){case"solid":Q=this.#e(this.#_);break;case"gradient":Q=this.#v();break;case"image":if(this.#Y.url){Q=`url(${this.#Y.url})`;const j=this.#I(this.#Y.scaleMode,this.#Y.scale);$=j.size,J=j.position}else Q="";break;case"video":if(this.#N.url){Q=`url(${this.#N.url})`;const j=this.#I(this.#N.scaleMode,this.#N.scale);$=j.size,J=j.position}else Q="";break;default:Q=this.#W[this.#q]?.element?.getAttribute("chit-background")||"#D9D9D9"}if(this.#Q.setAttribute("background",Q),this.#Q.style.setProperty("--chit-bg-size",$),this.#Q.style.setProperty("--chit-bg-position",J),this.#q==="solid")this.#Q.setAttribute("alpha",this.#_.a);else this.#Q.removeAttribute("alpha")}#I(Q,$){switch(Q){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${$}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#S(){if(!this.#J)this.#D();this.#T(this.#q);const Q=this.#J.querySelector(".fig-fill-picker-gamut");if(Q)Q.value=this.#Z;if(this.#Q)this.#Q.setAttribute("selected","true");this.#J.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#C(),this.#f()})})}#D(){this.#W={},this.querySelectorAll('[slot^="mode-"]').forEach((L)=>{const M=L.getAttribute("slot").slice(5);this.#W[M]={element:L,label:L.getAttribute("label")||M.charAt(0).toUpperCase()+M.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.setAttribute("drag","true"),this.#J.setAttribute("handle","fig-header"),this.#J.setAttribute("autoresize","false"),this.#J.classList.add("fig-fill-picker-dialog"),this.#J.anchor=this.anchorElement||this.#$;const Q=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",Q);const $=["solid","gradient","image","video","webcam"],J={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},Z=this.getAttribute("mode");let j;if(Z){if(j=Z.split(",").map((M)=>M.trim().toLowerCase()).filter((M)=>$.includes(M)||this.#W[M]),j.length===0)j=[...$]}else j=[...$];const q={...J};for(let[L,{label:M}]of Object.entries(this.#W))q[L]=M;if(!j.includes(this.#q))this.#q=j[0],this.#j=j[0];const K=this.getAttribute("experimental"),_=K?`experimental="${K}"`:"";let X;if(j.length===1)X=`<h3 class="fig-fill-picker-type-label">${q[j[0]]}</h3>`;else{const L=j.map((M)=>`<option value="${M}">${q[M]}</option>`).join("\n          ");X=`<fig-dropdown class="fig-fill-picker-type" ${_} value="${this.#q}">
           ${L}
-        </fig-dropdown>`}const Y=j.map((L)=>`<div class="fig-fill-picker-tab" data-tab="${L}"></div>`).join("\n        "),W=`<fig-dropdown class="fig-fill-picker-gamut" ${K} value="${this.#Z}">
+        </fig-dropdown>`}const Y=j.map((L)=>`<div class="fig-fill-picker-tab" data-tab="${L}"></div>`).join("\n        "),W=`<fig-dropdown class="fig-fill-picker-gamut" ${_} value="${this.#Z}">
           <option value="srgb">sRGB</option>
           <option value="display-p3">Display P3</option>
         </fig-dropdown>`;this.#J.innerHTML=`
@@ -304,7 +307,7 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
       <fig-content>
         ${Y}
       </fig-content>
-    `,document.body.appendChild(this.#J);for(let[L,{element:B}]of Object.entries(this.#N)){const M=this.#J.querySelector(`[data-tab="${L}"]`);if(!M)continue;while(B.firstChild)M.appendChild(B.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:L,container:M}}))}const N=this.#J.querySelector(".fig-fill-picker-type");if(N)N.addEventListener("change",(L)=>{this.#k(L.target.value)});const U=this.#J.querySelector(".fig-fill-picker-gamut");if(U){const L=(B)=>{const M=B.currentTarget?.value??B.target?.value??B.detail;if(M&&M!==this.#Z)this.#Z=M,this.#y()};U.addEventListener("input",L),U.addEventListener("change",L)}this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});const z=()=>{if(this.#Q)this.#Q.removeAttribute("selected");this.#n()};this.#J.addEventListener("close",z),this.#E=new MutationObserver(()=>{if(!(this.#J.hasAttribute("open")&&this.#J.getAttribute("open")!=="false"))z()}),this.#E.observe(this.#J,{attributes:!0,attributeFilter:["open"]});const O={solid:()=>this.#H(),gradient:()=>this.#j0(),image:()=>this.#i(),video:()=>this.#d(),webcam:()=>this.#J0()};for(let[L,B]of Object.entries(O))if(!this.#N[L]&&j.includes(L))B();for(let L of Object.keys(this.#N)){if($.includes(L))continue;const B=this.#J.querySelector(`[data-tab="${L}"]`);if(!B)continue;B.addEventListener("input",(M)=>{if(M.target===this)return;if(M.stopPropagation(),M.detail)this.#B[L]=M.detail;this.#I()}),B.addEventListener("change",(M)=>{if(M.target===this)return;if(M.stopPropagation(),M.detail)this.#B[L]=M.detail;this.#n()})}}#k(Q){if(!this.#J?.querySelector(`.fig-fill-picker-tab[data-tab="${Q}"]`))return;this.#j=Q,this.#_=Q;const J=this.#J.querySelector(".fig-fill-picker-type");if(J&&J.value!==Q)J.value=Q;this.#J.querySelectorAll(".fig-fill-picker-tab").forEach((_)=>{if(_.dataset.tab===Q)_.style.display="block";else _.style.display="none"});const j=this.#J.querySelector("fig-content");if(j)j.style.padding=this.#N[Q]?"0":"";if(Q==="gradient")requestAnimationFrame(()=>{this.#g()});this.#F(),this.#I()}#H(){const Q=this.#J.querySelector('[data-tab="solid"]'),$=this.getAttribute("alpha")!=="false",J=this.getAttribute("experimental"),Z=J?`experimental="${J}"`:"",j=localStorage.getItem("figui-color-input-mode");if(j&&["hex","rgb","hsl","hsb","lab","lch"].includes(j))this.#X=j;if(Q.innerHTML=`
+    `,document.body.appendChild(this.#J);for(let[L,{element:M}]of Object.entries(this.#W)){const B=this.#J.querySelector(`[data-tab="${L}"]`);if(!B)continue;while(M.firstChild)B.appendChild(M.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:L,container:B}}))}const N=this.#J.querySelector(".fig-fill-picker-type");if(N)N.addEventListener("change",(L)=>{this.#T(L.target.value)});const U=this.#J.querySelector(".fig-fill-picker-gamut");if(U){const L=(M)=>{const B=M.currentTarget?.value??M.target?.value??M.detail;if(B&&B!==this.#Z)this.#Z=B,this.#w()};U.addEventListener("input",L),U.addEventListener("change",L)}this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});const O=()=>{if(this.#Q)this.#Q.removeAttribute("selected");this.#t()};this.#J.addEventListener("close",O),this.#A=new MutationObserver(()=>{if(!(this.#J.hasAttribute("open")&&this.#J.getAttribute("open")!=="false"))O()}),this.#A.observe(this.#J,{attributes:!0,attributeFilter:["open"]});const E={solid:()=>this.#P(),gradient:()=>this.#j0(),image:()=>this.#u(),video:()=>this.#$0(),webcam:()=>this.#q0()};for(let[L,M]of Object.entries(E))if(!this.#W[L]&&j.includes(L))M();for(let L of Object.keys(this.#W)){if($.includes(L))continue;const M=this.#J.querySelector(`[data-tab="${L}"]`);if(!M)continue;M.addEventListener("input",(B)=>{if(B.target===this)return;if(B.stopPropagation(),B.detail)this.#L[L]=B.detail;this.#y()}),M.addEventListener("change",(B)=>{if(B.target===this)return;if(B.stopPropagation(),B.detail)this.#L[L]=B.detail;this.#t()})}}#T(Q){if(!this.#J?.querySelector(`.fig-fill-picker-tab[data-tab="${Q}"]`))return;this.#j=Q,this.#q=Q;const J=this.#J.querySelector(".fig-fill-picker-type");if(J&&J.value!==Q)J.value=Q;this.#J.querySelectorAll(".fig-fill-picker-tab").forEach((q)=>{if(q.dataset.tab===Q)q.style.display="block";else q.style.display="none"});const j=this.#J.querySelector("fig-content");if(j)j.style.padding=this.#W[Q]?"0":"";if(Q==="gradient")requestAnimationFrame(()=>{this.#g()});this.#F(),this.#y()}#P(){const Q=this.#J.querySelector('[data-tab="solid"]'),$=this.getAttribute("alpha")!=="false",J=this.getAttribute("experimental"),Z=J?`experimental="${J}"`:"",j=localStorage.getItem("figui-color-input-mode");if(j&&["hex","rgb","hsl","hsb","lab","lch"].includes(j))this.#X=j;if(Q.innerHTML=`
       <fig-preview class="fig-fill-picker-color-area">
         <canvas width="200" height="200"></canvas>
         <fig-handle
@@ -316,8 +319,8 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
       </fig-preview>
       <div class="fig-fill-picker-sliders">
         <fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper"><span class="fig-mask-icon" style="--icon: var(--icon-eyedropper)"></span></fig-button></fig-tooltip>
-        <fig-slider type="hue" variant="neue" min="0" max="360" value="${this.#K.h}"></fig-slider>
-        ${$?`<fig-slider type="opacity" variant="neue" text="true" units="%" min="0" max="100" value="${this.#K.a*100}" color="${this.#Q0(this.#K)}"></fig-slider>`:""}
+        <fig-slider type="hue" variant="neue" min="0" max="360" value="${this.#_.h}"></fig-slider>
+        ${$?`<fig-slider type="opacity" variant="neue" text="true" units="%" min="0" max="100" value="${this.#_.a*100}" color="${this.#e(this.#_)}"></fig-slider>`:""}
       </div>
       <fig-field class="fig-fill-picker-inputs" direction="horizontal">
         <fig-dropdown class="fig-fill-picker-input-mode" ${Z} value="${this.#X}">
@@ -330,7 +333,7 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
         </fig-dropdown>
         <span class="fig-fill-picker-input-fields"></span>
       </fig-field>
-    `,this.#L=Q.querySelector("canvas"),this.#G=Q.querySelector("fig-handle"),this.#x(),this.#S(),this.#m(),this.#O=Q.querySelector('fig-slider[type="hue"]'),this.#O.addEventListener("input",(K)=>{this.#K.h=parseFloat(K.target.value),this.#x(),this.#S(),this.#r(),this.#I()}),this.#O.addEventListener("change",()=>{this.#n()}),$)this.#M=Q.querySelector('fig-slider[type="opacity"]'),this.#M.addEventListener("input",(K)=>{this.#K.a=parseFloat(K.target.value)/100,this.#r(),this.#I()}),this.#M.addEventListener("change",()=>{this.#n()});Q.querySelector(".fig-fill-picker-input-mode").addEventListener("input",(K)=>{this.#X=K.target.value,localStorage.setItem("figui-color-input-mode",this.#X),this.#c()}),this.#c();const q=Q.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)q.addEventListener("click",async()=>{try{const X=await new EyeDropper().open();this.#K={...this.#q0(X.sRGBHex),a:this.#K.a},this.#x(),this.#S(),this.#r(),this.#I()}catch(K){}});else q.setAttribute("disabled",""),q.title="EyeDropper not supported in this browser"}#y(){const Q=this.#J?.querySelector('[data-tab="solid"]');if(Q){const $=Q.querySelector("canvas");if($){const J=document.createElement("canvas");J.width=$.width,J.height=$.height,$.replaceWith(J),this.#L=J,this.#m()}this.#x(),this.#S()}this.#h(),this.#I()}#x(){if(!this.#L&&this.#J)this.#L=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#L)return;const Q=this.#Z==="display-p3"?"display-p3":"srgb",$=this.#L.getContext("2d",{colorSpace:Q});if(!$)return;const J=this.#L.width,Z=this.#L.height;$.clearRect(0,0,J,Z);const j=this.#K.h,_=this.#Z==="display-p3",q=$.createLinearGradient(0,0,J,0);if(_){q.addColorStop(0,"color(display-p3 1 1 1)");const[X,Y,W]=e0(j,100,50);q.addColorStop(1,`color(display-p3 ${X} ${Y} ${W})`)}else q.addColorStop(0,"#FFFFFF"),q.addColorStop(1,`hsl(${j}, 100%, 50%)`);$.fillStyle=q,$.fillRect(0,0,J,Z);const K=$.createLinearGradient(0,0,0,Z);K.addColorStop(0,"rgba(0,0,0,0)"),K.addColorStop(1,"rgba(0,0,0,1)"),$.fillStyle=K,$.fillRect(0,0,J,Z)}#S(Q=0){if(!this.#G||!this.#L)return;const $=this.#L.getBoundingClientRect();if(($.width===0||$.height===0)&&Q<5){requestAnimationFrame(()=>this.#S(Q+1));return}const J=Math.max(0,Math.min(100,this.#K.s)),Z=Math.max(0,Math.min(100,100-this.#K.v));this.#G.setAttribute("value",`${J}% ${Z}%`),this.#G.setAttribute("color",this.#Q0({...this.#K,a:1}))}#b(Q,$,J={}){const{updateHandle:Z=!0,emitInput:j=!0,emitChange:_=!1}=J;if(this.#K.s=Math.max(0,Math.min(100,Q*100)),this.#K.v=Math.max(0,Math.min(100,(1-$)*100)),this.#G)this.#G.setAttribute("color",this.#Q0({...this.#K,a:1}));if(Z)this.#S();if(this.#r(),j)this.#I();if(_)this.#n()}#m(){if(this.#z)this.#z(),this.#z=null;if(!this.#L||!this.#G)return;const Q=this.#L.parentElement||this.#L,$=this.#G;let J=!1;const Z=(Y,W={})=>{const N=Q.getBoundingClientRect();if(N.width===0||N.height===0)return;const U=Math.max(0,Math.min(Y.clientX-N.left,N.width)),z=Math.max(0,Math.min(Y.clientY-N.top,N.height));this.#b(U/N.width,z/N.height,W)},j=(Y)=>{if(Y.button!==0)return;if(Y.target===$||$.contains(Y.target))return;J=!0,this.#R=!0,Q.setPointerCapture(Y.pointerId),Z(Y,{updateHandle:!0,emitInput:!0})},_=(Y)=>{if(!J)return;if(Y.buttons===0){q();return}Z(Y,{updateHandle:!0,emitInput:!0})},q=()=>{if(!J)return;J=!1,this.#R=!1,this.#n()},K=(Y)=>{this.#R=!0;const W=Y.detail?.px,N=Y.detail?.py;if(!Number.isFinite(W)||!Number.isFinite(N))return;$.setAttribute("value",`${W*100}% ${N*100}%`),this.#b(W,N,{updateHandle:!1,emitInput:!0})},X=(Y)=>{const W=Y.detail?.px,N=Y.detail?.py;if(Number.isFinite(W)&&Number.isFinite(N))$.setAttribute("value",`${W*100}% ${N*100}%`),this.#b(W,N,{updateHandle:!1,emitInput:!1});this.#R=!1,this.#n()};Q.addEventListener("pointerdown",j),Q.addEventListener("pointermove",_),Q.addEventListener("pointerup",q),Q.addEventListener("pointercancel",q),Q.addEventListener("lostpointercapture",q),$.addEventListener("input",K),$.addEventListener("change",X),this.#z=()=>{Q.removeEventListener("pointerdown",j),Q.removeEventListener("pointermove",_),Q.removeEventListener("pointerup",q),Q.removeEventListener("pointercancel",q),Q.removeEventListener("lostpointercapture",q),$.removeEventListener("input",K),$.removeEventListener("change",X),this.#R=!1}}#c(){const Q=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!Q)return;const $=(j,_)=>`<fig-tooltip text="${j}">${_}</fig-tooltip>`,J=(j,_,q,K)=>`<fig-input-number class="${j}" min="${_}" max="${q}"${K!=null?` step="${K}"`:""}></fig-input-number>`;let Z;switch(this.#X){case"rgb":Z=`<div class="input-combo">
+    `,this.#G=Q.querySelector("canvas"),this.#B=Q.querySelector("fig-handle"),this.#C(),this.#f(),this.#V(),this.#O=Q.querySelector('fig-slider[type="hue"]'),this.#O.addEventListener("input",(_)=>{this.#_.h=parseFloat(_.target.value),this.#C(),this.#f(),this.#i(),this.#y()}),this.#O.addEventListener("change",()=>{this.#t()}),$)this.#M=Q.querySelector('fig-slider[type="opacity"]'),this.#M.addEventListener("input",(_)=>{this.#_.a=parseFloat(_.target.value)/100,this.#i(),this.#y()}),this.#M.addEventListener("change",()=>{this.#t()});Q.querySelector(".fig-fill-picker-input-mode").addEventListener("input",(_)=>{this.#X=_.target.value,localStorage.setItem("figui-color-input-mode",this.#X),this.#m()}),this.#m();const K=Q.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)K.addEventListener("click",async()=>{try{const X=await new EyeDropper().open();this.#_={...this.#X0(X.sRGBHex),a:this.#_.a},this.#C(),this.#f(),this.#i(),this.#y()}catch(_){}});else K.setAttribute("disabled",""),K.title="EyeDropper not supported in this browser"}#w(){const Q=this.#J?.querySelector('[data-tab="solid"]');if(Q){const $=Q.querySelector("canvas");if($){const J=document.createElement("canvas");J.width=$.width,J.height=$.height,$.replaceWith(J),this.#G=J,this.#V()}this.#C(),this.#f()}this.#h(),this.#y()}#C(){if(!this.#G&&this.#J)this.#G=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#G)return;const Q=this.#Z==="display-p3"?"display-p3":"srgb",$=this.#G.getContext("2d",{colorSpace:Q});if(!$)return;const J=this.#G.width,Z=this.#G.height;$.clearRect(0,0,J,Z);const j=this.#_.h,q=this.#Z==="display-p3",K=$.createLinearGradient(0,0,J,0);if(q){K.addColorStop(0,"color(display-p3 1 1 1)");const[X,Y,W]=Y5(j,100,50);K.addColorStop(1,`color(display-p3 ${X} ${Y} ${W})`)}else K.addColorStop(0,"#FFFFFF"),K.addColorStop(1,`hsl(${j}, 100%, 50%)`);$.fillStyle=K,$.fillRect(0,0,J,Z);const _=$.createLinearGradient(0,0,0,Z);_.addColorStop(0,"rgba(0,0,0,0)"),_.addColorStop(1,"rgba(0,0,0,1)"),$.fillStyle=_,$.fillRect(0,0,J,Z)}#f(Q=0){if(!this.#B||!this.#G)return;const $=this.#G.getBoundingClientRect();if(($.width===0||$.height===0)&&Q<5){requestAnimationFrame(()=>this.#f(Q+1));return}const J=Math.max(0,Math.min(100,this.#_.s)),Z=Math.max(0,Math.min(100,100-this.#_.v));this.#B.setAttribute("value",`${J}% ${Z}%`),this.#B.setAttribute("color",this.#e({...this.#_,a:1}))}#x(Q,$,J={}){const{updateHandle:Z=!0,emitInput:j=!0,emitChange:q=!1}=J;if(this.#_.s=Math.max(0,Math.min(100,Q*100)),this.#_.v=Math.max(0,Math.min(100,(1-$)*100)),this.#B)this.#B.setAttribute("color",this.#e({...this.#_,a:1}));if(Z)this.#f();if(this.#i(),j)this.#y();if(q)this.#t()}#V(){if(this.#z)this.#z(),this.#z=null;if(!this.#G||!this.#B)return;const Q=this.#G.parentElement||this.#G,$=this.#B;let J=!1;const Z=(Y,W={})=>{const N=Q.getBoundingClientRect();if(N.width===0||N.height===0)return;const U=Math.max(0,Math.min(Y.clientX-N.left,N.width)),O=Math.max(0,Math.min(Y.clientY-N.top,N.height));this.#x(U/N.width,O/N.height,W)},j=(Y)=>{if(Y.button!==0)return;if(Y.target===$||$.contains(Y.target))return;J=!0,this.#E=!0,Q.setPointerCapture(Y.pointerId),Z(Y,{updateHandle:!0,emitInput:!0})},q=(Y)=>{if(!J)return;if(Y.buttons===0){K();return}Z(Y,{updateHandle:!0,emitInput:!0})},K=()=>{if(!J)return;J=!1,this.#E=!1,this.#t()},_=(Y)=>{this.#E=!0;const W=Y.detail?.px,N=Y.detail?.py;if(!Number.isFinite(W)||!Number.isFinite(N))return;$.setAttribute("value",`${W*100}% ${N*100}%`),this.#x(W,N,{updateHandle:!1,emitInput:!0})},X=(Y)=>{const W=Y.detail?.px,N=Y.detail?.py;if(Number.isFinite(W)&&Number.isFinite(N))$.setAttribute("value",`${W*100}% ${N*100}%`),this.#x(W,N,{updateHandle:!1,emitInput:!1});this.#E=!1,this.#t()};Q.addEventListener("pointerdown",j),Q.addEventListener("pointermove",q),Q.addEventListener("pointerup",K),Q.addEventListener("pointercancel",K),Q.addEventListener("lostpointercapture",K),$.addEventListener("input",_),$.addEventListener("change",X),this.#z=()=>{Q.removeEventListener("pointerdown",j),Q.removeEventListener("pointermove",q),Q.removeEventListener("pointerup",K),Q.removeEventListener("pointercancel",K),Q.removeEventListener("lostpointercapture",K),$.removeEventListener("input",_),$.removeEventListener("change",X),this.#E=!1}}#m(){const Q=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!Q)return;const $=(j,q)=>`<fig-tooltip text="${j}">${q}</fig-tooltip>`,J=(j,q,K,_)=>`<fig-input-number class="${j}" min="${q}" max="${K}"${_!=null?` step="${_}"`:""}></fig-input-number>`;let Z;switch(this.#X){case"rgb":Z=`<div class="input-combo">
           ${$("Red",J("fig-fill-picker-ci-r",0,255))}
           ${$("Green",J("fig-fill-picker-ci-g",0,255))}
           ${$("Blue",J("fig-fill-picker-ci-b",0,255))}
@@ -350,19 +353,19 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
           ${$("Lightness",J("fig-fill-picker-ci-okl",0,100))}
           ${$("Chroma",J("fig-fill-picker-ci-okc",0,0.4,0.001))}
           ${$("Hue",J("fig-fill-picker-ci-okh",0,360))}
-        </div>`;break;default:Z='<fig-input-text class="fig-fill-picker-ci-hex" placeholder="FFFFFF"></fig-input-text>';break}Q.innerHTML=Z,this.#o(),requestAnimationFrame(()=>this.#r())}#o(){const Q=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!Q)return;const $=()=>{if(this.#R)return;const j=this.#l();if(!j)return;if(this.#K={...j,a:this.#K.a},this.#x(),this.#S(),this.#O)this.#O.setAttribute("value",this.#K.h);this.#I()},J=()=>this.#n();Q.querySelectorAll("fig-input-number, fig-input-text").forEach((j)=>{j.addEventListener("input",$),j.addEventListener("change",J)})}#l(){const Q=(J)=>this.#J?.querySelector(`.${J}`),$=(J)=>parseFloat(Q(J)?.value??0);switch(this.#X){case"rgb":return this.#t({r:$("fig-fill-picker-ci-r"),g:$("fig-fill-picker-ci-g"),b:$("fig-fill-picker-ci-b")});case"hsl":{const J=this.#L0({h:$("fig-fill-picker-ci-h"),s:$("fig-fill-picker-ci-s"),l:$("fig-fill-picker-ci-l")});return this.#t(J)}case"hsb":return{h:$("fig-fill-picker-ci-h"),s:$("fig-fill-picker-ci-s"),v:$("fig-fill-picker-ci-v"),a:1};case"lab":{const J=this.#Y0({l:$("fig-fill-picker-ci-okl")/100,a:$("fig-fill-picker-ci-oka"),b:$("fig-fill-picker-ci-okb")});return this.#t(J)}case"lch":{const J=this.#B0({l:$("fig-fill-picker-ci-okl")/100,c:$("fig-fill-picker-ci-okc"),h:$("fig-fill-picker-ci-okh")});return this.#t(J)}default:{const J=Q("fig-fill-picker-ci-hex");if(!J)return null;let Z=J.value.replace(/^#/,"");if(Z.length===3)Z=Z[0]+Z[0]+Z[1]+Z[1]+Z[2]+Z[2];if(Z.length!==6||!/^[0-9a-fA-F]{6}$/.test(Z))return null;return this.#q0(`#${Z}`)}}}#r(){if(!this.#J)return;const Q=this.#Q0(this.#K),$=this.#Z0(this.#K),J=(j)=>this.#J.querySelector(`.${j}`),Z=(j,_)=>{const q=J(j);if(q)q.setAttribute("value",_)};switch(this.#X){case"rgb":Z("fig-fill-picker-ci-r",$.r),Z("fig-fill-picker-ci-g",$.g),Z("fig-fill-picker-ci-b",$.b);break;case"hsl":{const j=this.#U0($);Z("fig-fill-picker-ci-h",Math.round(j.h)),Z("fig-fill-picker-ci-s",Math.round(j.s)),Z("fig-fill-picker-ci-l",Math.round(j.l));break}case"hsb":Z("fig-fill-picker-ci-h",Math.round(this.#K.h)),Z("fig-fill-picker-ci-s",Math.round(this.#K.s)),Z("fig-fill-picker-ci-v",Math.round(this.#K.v));break;case"lab":{const j=this.#X0($);Z("fig-fill-picker-ci-okl",Math.round(j.l*100)),Z("fig-fill-picker-ci-oka",+j.a.toFixed(3)),Z("fig-fill-picker-ci-okb",+j.b.toFixed(3));break}case"lch":{const j=this.#G0($);Z("fig-fill-picker-ci-okl",Math.round(j.l*100)),Z("fig-fill-picker-ci-okc",+j.c.toFixed(3)),Z("fig-fill-picker-ci-okh",Math.round(j.h));break}default:Z("fig-fill-picker-ci-hex",Q.replace(/^#/,"").toUpperCase());break}if(this.#M)this.#M.setAttribute("color",Q);this.#F()}#j0(){const Q=this.#J.querySelector('[data-tab="gradient"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
+        </div>`;break;default:Z='<fig-input-text class="fig-fill-picker-ci-hex" placeholder="FFFFFF"></fig-input-text>';break}Q.innerHTML=Z,this.#o(),requestAnimationFrame(()=>this.#i())}#o(){const Q=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!Q)return;const $=()=>{if(this.#E)return;const j=this.#l();if(!j)return;if(this.#_={...j,a:this.#_.a},this.#C(),this.#f(),this.#O)this.#O.setAttribute("value",this.#_.h);this.#y()},J=()=>this.#t();Q.querySelectorAll("fig-input-number, fig-input-text").forEach((j)=>{j.addEventListener("input",$),j.addEventListener("change",J)})}#l(){const Q=(J)=>this.#J?.querySelector(`.${J}`),$=(J)=>parseFloat(Q(J)?.value??0);switch(this.#X){case"rgb":return this.#_0({r:$("fig-fill-picker-ci-r"),g:$("fig-fill-picker-ci-g"),b:$("fig-fill-picker-ci-b")});case"hsl":{const J=this.#G0({h:$("fig-fill-picker-ci-h"),s:$("fig-fill-picker-ci-s"),l:$("fig-fill-picker-ci-l")});return this.#_0(J)}case"hsb":return{h:$("fig-fill-picker-ci-h"),s:$("fig-fill-picker-ci-s"),v:$("fig-fill-picker-ci-v"),a:1};case"lab":{const J=this.#W0({l:$("fig-fill-picker-ci-okl")/100,a:$("fig-fill-picker-ci-oka"),b:$("fig-fill-picker-ci-okb")});return this.#_0(J)}case"lch":{const J=this.#O0({l:$("fig-fill-picker-ci-okl")/100,c:$("fig-fill-picker-ci-okc"),h:$("fig-fill-picker-ci-okh")});return this.#_0(J)}default:{const J=Q("fig-fill-picker-ci-hex");if(!J)return null;let Z=J.value.replace(/^#/,"");if(Z.length===3)Z=Z[0]+Z[0]+Z[1]+Z[1]+Z[2]+Z[2];if(Z.length!==6||!/^[0-9a-fA-F]{6}$/.test(Z))return null;return this.#X0(`#${Z}`)}}}#i(){if(!this.#J)return;const Q=this.#e(this.#_),$=this.#Z0(this.#_),J=(j)=>this.#J.querySelector(`.${j}`),Z=(j,q)=>{const K=J(j);if(K)K.setAttribute("value",q)};switch(this.#X){case"rgb":Z("fig-fill-picker-ci-r",$.r),Z("fig-fill-picker-ci-g",$.g),Z("fig-fill-picker-ci-b",$.b);break;case"hsl":{const j=this.#L0($);Z("fig-fill-picker-ci-h",Math.round(j.h)),Z("fig-fill-picker-ci-s",Math.round(j.s)),Z("fig-fill-picker-ci-l",Math.round(j.l));break}case"hsb":Z("fig-fill-picker-ci-h",Math.round(this.#_.h)),Z("fig-fill-picker-ci-s",Math.round(this.#_.s)),Z("fig-fill-picker-ci-v",Math.round(this.#_.v));break;case"lab":{const j=this.#Y0($);Z("fig-fill-picker-ci-okl",Math.round(j.l*100)),Z("fig-fill-picker-ci-oka",+j.a.toFixed(3)),Z("fig-fill-picker-ci-okb",+j.b.toFixed(3));break}case"lch":{const j=this.#B0($);Z("fig-fill-picker-ci-okl",Math.round(j.l*100)),Z("fig-fill-picker-ci-okc",+j.c.toFixed(3)),Z("fig-fill-picker-ci-okh",Math.round(j.h));break}default:Z("fig-fill-picker-ci-hex",Q.replace(/^#/,"").toUpperCase());break}if(this.#M)this.#M.setAttribute("color",Q);this.#F()}#j0(){const Q=this.#J.querySelector('[data-tab="gradient"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
       <fig-field class="fig-fill-picker-gradient-header" direction="horizontal">
-        <fig-dropdown class="fig-fill-picker-gradient-type" ${J} value="${this.#q.type}">
+        <fig-dropdown class="fig-fill-picker-gradient-type" ${J} value="${this.#K.type}">
           <option value="linear" selected>Linear</option>
           <option value="radial">Radial</option>
           <option value="angular">Angular</option>
         </fig-dropdown>
         <fig-tooltip text="Rotate gradient">
-          <fig-input-angle class="fig-fill-picker-gradient-angle" value="${(this.#q.angle-90+360)%360}"></fig-input-angle>
+          <fig-input-angle class="fig-fill-picker-gradient-angle" value="${(this.#K.angle-90+360)%360}"></fig-input-angle>
         </fig-tooltip>
         <div class="fig-fill-picker-gradient-center input-combo" style="display: none;">
-          <fig-input-number min="0" max="100" value="${this.#q.centerX}" units="%" class="fig-fill-picker-gradient-cx"></fig-input-number>
-          <fig-input-number min="0" max="100" value="${this.#q.centerY}" units="%" class="fig-fill-picker-gradient-cy"></fig-input-number>
+          <fig-input-number min="0" max="100" value="${this.#K.centerX}" units="%" class="fig-fill-picker-gradient-cx"></fig-input-number>
+          <fig-input-number min="0" max="100" value="${this.#K.centerY}" units="%" class="fig-fill-picker-gradient-cy"></fig-input-number>
         </div>
         <fig-tooltip text="Flip gradient">
           <fig-button icon variant="ghost" class="fig-fill-picker-gradient-flip">
@@ -371,12 +374,11 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
         </fig-tooltip>
       </fig-field>
       <fig-preview class="fig-fill-picker-gradient-preview">
-        <div class="fig-fill-picker-gradient-bar"></div>
-        <div class="fig-fill-picker-gradient-stops-handles"></div>
+        <fig-input-gradient class="fig-fill-picker-gradient-bar-input" edit="true" size="large" value='${JSON.stringify({type:"gradient",gradient:o(this.#K)})}'></fig-input-gradient>
       </fig-preview>
       <fig-field class="fig-fill-picker-gradient-interpolation" direction="horizontal">
         <label>Mixing</label>
-        <fig-dropdown class="fig-fill-picker-gradient-space" full ${J} value="${this.#q.interpolationSpace==="oklch"?`oklch-${this.#q.hueInterpolation||"shorter"}`:this.#q.interpolationSpace}">
+        <fig-dropdown class="fig-fill-picker-gradient-space" full ${J} value="${this.#K.interpolationSpace==="oklch"?`oklch-${this.#K.hueInterpolation||"shorter"}`:this.#K.interpolationSpace}">
           <optgroup label="sRGB">
             <option value="srgb-linear">Linear</option>
           </optgroup>
@@ -400,23 +402,23 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
         </fig-header>
         <div class="fig-fill-picker-gradient-stops-list"></div>
       </div>
-    `,this.#g(),this.#a(Q)}#a(Q){const $=Q.querySelector(".fig-fill-picker-gradient-type"),J=(Y)=>Y.currentTarget?.value??Y.target?.value??Y.detail,Z=(Y)=>{this.#q.type=J(Y),this.#g(),this.#I()};$.addEventListener("input",Z),$.addEventListener("change",Z);const j=Q.querySelector(".fig-fill-picker-gradient-space"),_=(Y)=>{const W=J(Y);let N=W,U="shorter";if(W.startsWith("oklch-"))N="oklch",U=W.slice(6);this.#q=w({...this.#q,interpolationSpace:N,hueInterpolation:U}),this.#g(),this.#I()};j?.addEventListener("input",_),j?.addEventListener("change",_),Q.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(Y)=>{const W=parseFloat(Y.target.value)||0;this.#q.angle=(W+90)%360,this.#h(),this.#I()});const K=Q.querySelector(".fig-fill-picker-gradient-cx"),X=Q.querySelector(".fig-fill-picker-gradient-cy");K?.addEventListener("input",(Y)=>{this.#q.centerX=parseFloat(Y.target.value)||50,this.#h(),this.#I()}),X?.addEventListener("input",(Y)=>{this.#q.centerY=parseFloat(Y.target.value)||50,this.#h(),this.#I()}),Q.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#q.stops.forEach((Y)=>{Y.position=100-Y.position}),this.#q.stops.sort((Y,W)=>Y.position-W.position),this.#g(),this.#I()}),Q.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#q.stops.push({position:50,color:"#888888",opacity:100}),this.#q.stops.sort((W,N)=>W.position-N.position),this.#g(),this.#I()})}#g(){if(!this.#J)return;const Q=this.#J.querySelector('[data-tab="gradient"]');if(!Q)return;this.#q=w(this.#q);const $=Q.querySelector(".fig-fill-picker-gradient-angle"),J=Q.querySelector(".fig-fill-picker-gradient-center");if(this.#q.type==="radial")$.style.display="none",J.style.display="flex";else{$.style.display="block",J.style.display="none";const j=(this.#q.angle-90+360)%360;$.setAttribute("value",j)}const Z=Q.querySelector(".fig-fill-picker-gradient-space");if(Z)Z.value=this.#q.interpolationSpace==="oklch"?`oklch-${this.#q.hueInterpolation||"shorter"}`:this.#q.interpolationSpace;this.#h(),this.#s()}#h(){if(!this.#J)return;const Q=this.#J.querySelector(".fig-fill-picker-gradient-preview"),$=this.#J.querySelector(".fig-fill-picker-gradient-bar");if(Q||$){const J=this.#w();if($)$.style.background=J;if(Q)Q.style.background=J}this.#F()}#s(){if(!this.#J)return;const Q=this.#J.querySelector(".fig-fill-picker-gradient-stops-list");if(!Q)return;Q.innerHTML=this.#q.stops.map(($,J)=>`
+    `,this.#g(),this.#a(Q)}#a(Q){const $=Q.querySelector(".fig-fill-picker-gradient-type"),J=(W)=>W.currentTarget?.value??W.target?.value??W.detail,Z=(W)=>{this.#K.type=J(W),this.#g(),this.#y()};$.addEventListener("input",Z),$.addEventListener("change",Z);const j=Q.querySelector(".fig-fill-picker-gradient-space"),q=(W)=>{const N=J(W);let U=N,O="shorter";if(N.startsWith("oklch-"))U="oklch",O=N.slice(6);this.#K=V({...this.#K,interpolationSpace:U,hueInterpolation:O}),this.#g(),this.#y()};j?.addEventListener("input",q),j?.addEventListener("change",q),Q.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(W)=>{const N=parseFloat(W.target.value)||0;this.#K.angle=(N+90)%360,this.#h(),this.#y()});const _=Q.querySelector(".fig-fill-picker-gradient-cx"),X=Q.querySelector(".fig-fill-picker-gradient-cy");_?.addEventListener("input",(W)=>{this.#K.centerX=parseFloat(W.target.value)||50,this.#h(),this.#y()}),X?.addEventListener("input",(W)=>{this.#K.centerY=parseFloat(W.target.value)||50,this.#h(),this.#y()}),Q.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#K.stops.forEach((W)=>{W.position=100-W.position}),this.#K.stops.sort((W,N)=>W.position-N.position),this.#g(),this.#y()}),Q.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#K.stops.push({position:50,color:"#888888",opacity:100}),this.#K.stops.sort((N,U)=>N.position-U.position),this.#g(),this.#y()});const Y=Q.querySelector(".fig-fill-picker-gradient-bar-input");if(Y){const W=(N)=>{N.stopPropagation();const U=N.detail;if(!U?.gradient)return;this.#K=V({...this.#K,...U.gradient}),this.#F(),this.#s()};Y.addEventListener("input",(N)=>{W(N),this.#y()}),Y.addEventListener("change",(N)=>{W(N),this.#t()})}}#g(){if(!this.#J)return;const Q=this.#J.querySelector('[data-tab="gradient"]');if(!Q)return;this.#K=V(this.#K);const $=Q.querySelector(".fig-fill-picker-gradient-angle"),J=Q.querySelector(".fig-fill-picker-gradient-center");if(this.#K.type==="radial")$.style.display="none",J.style.display="flex";else{$.style.display="block",J.style.display="none";const j=(this.#K.angle-90+360)%360;$.setAttribute("value",j)}const Z=Q.querySelector(".fig-fill-picker-gradient-space");if(Z)Z.value=this.#K.interpolationSpace==="oklch"?`oklch-${this.#K.hueInterpolation||"shorter"}`:this.#K.interpolationSpace;this.#h(),this.#s()}#h(){if(!this.#J)return;const Q=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(Q)Q.setAttribute("value",JSON.stringify({type:"gradient",gradient:o(this.#K)}));this.#F()}#s(){if(!this.#J)return;const Q=this.#J.querySelector(".fig-fill-picker-gradient-stops-list");if(!Q)return;const $=Q.querySelectorAll(".fig-fill-picker-gradient-stop-row");if($.length===this.#K.stops.length){this.#K.stops.forEach((J,Z)=>{const j=$[Z];j.dataset.index=Z;const q=j.querySelector(".fig-fill-picker-stop-position");if(q)q.setAttribute("value",J.position);const K=j.querySelector(".fig-fill-picker-stop-color");if(K)K.setAttribute("value",J.color);const _=j.querySelector(".fig-fill-picker-stop-remove");if(_)if(this.#K.stops.length<=2)_.setAttribute("disabled","");else _.removeAttribute("disabled")});return}this.#r(Q)}#r(Q){Q.innerHTML=this.#K.stops.map(($,J)=>`
       <fig-field class="fig-fill-picker-gradient-stop-row" direction="horizontal" data-index="${J}">
         <fig-input-number class="fig-fill-picker-stop-position" min="0" max="100" value="${$.position}" units="%"></fig-input-number>
         <fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${$.color}"></fig-input-color>
-        <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#q.stops.length<=2?"disabled":""}>
+        <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#K.stops.length<=2?"disabled":""}>
           <span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
         </fig-button>
       </fig-field>
-    `).join(""),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach(($)=>{const J=parseInt($.dataset.index);$.querySelector(".fig-fill-picker-stop-position").addEventListener("input",(_)=>{this.#q.stops[J].position=parseFloat(_.target.value)||0,this.#h(),this.#I()});const Z=$.querySelector(".fig-fill-picker-stop-color"),j=Z.querySelector("fig-fill-picker");if(j)j.anchorElement=this.#J;else requestAnimationFrame(()=>{const _=Z.querySelector("fig-fill-picker");if(_)_.anchorElement=this.#J});Z.addEventListener("input",(_)=>{this.#q.stops[J].color=_.target.hexOpaque||_.target.value;const q=parseFloat(_.target.alpha);this.#q.stops[J].opacity=isNaN(q)?100:q,this.#h(),this.#I()}),$.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{if(this.#q.stops.length>2)this.#q.stops.splice(J,1),this.#g(),this.#I()})})}#p(Q,$=!0){const J=w({...this.#q,interpolationSpace:Q??this.#q.interpolationSpace}),Z=this.#Z==="display-p3",j=J.stops.map((q)=>{return`${Z?this.#N0(q.color,q.opacity/100):this.#W0(q.color,q.opacity/100)} ${q.position}%`}).join(", "),_=$?` ${n0(J)}`:"";switch(J.type){case"linear":return`linear-gradient(${J.angle}deg${_}, ${j})`;case"radial":return`radial-gradient(circle at ${J.centerX}% ${J.centerY}%${_}, ${j})`;case"angular":return`conic-gradient(from ${J.angle}deg${_}, ${j})`;default:return`linear-gradient(${J.angle}deg${_}, ${j})`}}static#V=new Map;#$0(Q){const $=l.#V.get(Q);if($!==void 0)return $;const J=document.createElement("div");J.style.background=Q;const Z=!!J.style.background;return l.#V.set(Q,Z),Z}#w(){const Q=this.#p(void 0,!0);if(this.#$0(Q))return Q;const $=this.#p("oklab",!0);if(this.#$0($))return $;return this.#p("oklab",!1)}#i(){const Q=this.#J.querySelector('[data-tab="image"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
+    `).join(""),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach(($)=>{const J=parseInt($.dataset.index);$.querySelector(".fig-fill-picker-stop-position").addEventListener("input",(q)=>{this.#K.stops[J].position=parseFloat(q.target.value)||0,this.#h(),this.#y()});const Z=$.querySelector(".fig-fill-picker-stop-color"),j=Z.querySelector("fig-fill-picker");if(j)j.anchorElement=this.#J;else requestAnimationFrame(()=>{const q=Z.querySelector("fig-fill-picker");if(q)q.anchorElement=this.#J});Z.addEventListener("input",(q)=>{this.#K.stops[J].color=q.target.hexOpaque||q.target.value;const K=q.detail?.rgba?.a;if(K!==void 0)this.#K.stops[J].opacity=Math.round(K*100);this.#h(),this.#y()}),$.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{if(this.#K.stops.length>2)this.#K.stops.splice(J,1),this.#g(),this.#y()})})}#b(Q,$=!0){const J=V({...this.#K,interpolationSpace:Q??this.#K.interpolationSpace}),Z=this.#Z==="display-p3",j=J.stops.map((K)=>{const _=(K.opacity??100)/100;return`${Z?this.#U0(K.color,_):this.#N0(K.color,_)} ${K.position}%`}).join(", "),q=$?` ${y0(J)}`:"";switch(J.type){case"linear":return`linear-gradient(${J.angle}deg${q}, ${j})`;case"radial":return`radial-gradient(circle at ${J.centerX}% ${J.centerY}%${q}, ${j})`;case"angular":return`conic-gradient(from ${J.angle}deg${q}, ${j})`;default:return`linear-gradient(${J.angle}deg${q}, ${j})`}}static#Q0=new Map;#n(Q){const $=$0.#Q0.get(Q);if($!==void 0)return $;const J=document.createElement("div");J.style.background=Q;const Z=!!J.style.background;return $0.#Q0.set(Q,Z),Z}#v(){const Q=this.#b(void 0,!0);if(this.#n(Q))return Q;const $=this.#b("oklab",!0);if(this.#n($))return $;return this.#b("oklab",!1)}#u(){const Q=this.#J.querySelector('[data-tab="image"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
       <fig-field class="fig-fill-picker-media-header" direction="horizontal">
-        <fig-dropdown class="fig-fill-picker-scale-mode" ${J} value="${this.#W.scaleMode}">
+        <fig-dropdown class="fig-fill-picker-scale-mode" ${J} value="${this.#Y.scaleMode}">
           <option value="fill" selected>Fill</option>
           <option value="fit">Fit</option>
           <option value="crop">Crop</option>
           <option value="tile">Tile</option>
         </fig-dropdown>
-        <fig-input-number class="fig-fill-picker-scale" min="1" max="200" value="${this.#W.scale}" units="%" style="display: none;"></fig-input-number>
+        <fig-input-number class="fig-fill-picker-scale" min="1" max="200" value="${this.#Y.scale}" units="%" style="display: none;"></fig-input-number>
       </fig-field>
       <div class="fig-fill-picker-media-preview">
         <div class="fig-fill-picker-checkerboard"></div>
@@ -426,9 +428,9 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
           <input type="file" accept="image/*" style="display: none;" />
         </fig-button>
       </div>
-    `,this.#u(Q)}#u(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),J=Q.querySelector(".fig-fill-picker-scale"),Z=Q.querySelector(".fig-fill-picker-upload"),j=Q.querySelector('input[type="file"]'),_=Q.querySelector(".fig-fill-picker-image-preview");$.addEventListener("change",(K)=>{this.#W.scaleMode=K.target.value,J.style.display=K.target.value==="tile"?"block":"none",this.#v(_),this.#F(),this.#I()}),J.addEventListener("input",(K)=>{this.#W.scale=parseFloat(K.target.value)||100,this.#v(_),this.#F(),this.#I()}),Z.addEventListener("click",()=>{j.click()}),j.addEventListener("change",(K)=>{const X=K.target.files[0];if(X){const Y=new FileReader;Y.onload=(W)=>{this.#W.url=W.target.result,this.#v(_),this.#F(),this.#I()},Y.readAsDataURL(X)}});const q=Q.querySelector(".fig-fill-picker-media-preview");q.addEventListener("dragover",(K)=>{K.preventDefault(),q.classList.add("dragover")}),q.addEventListener("dragleave",()=>{q.classList.remove("dragover")}),q.addEventListener("drop",(K)=>{K.preventDefault(),q.classList.remove("dragover");const X=K.dataTransfer.files[0];if(X&&X.type.startsWith("image/")){const Y=new FileReader;Y.onload=(W)=>{this.#W.url=W.target.result,this.#v(_),this.#F(),this.#I()},Y.readAsDataURL(X)}})}#v(Q){const $=Q.closest(".fig-fill-picker-media-preview");if(!this.#W.url){Q.style.display="none",$?.classList.remove("has-media");return}switch(Q.style.display="block",$?.classList.add("has-media"),Q.style.backgroundImage=`url(${this.#W.url})`,Q.style.backgroundPosition="center",this.#W.scaleMode){case"fill":Q.style.backgroundSize="cover",Q.style.backgroundRepeat="no-repeat";break;case"fit":Q.style.backgroundSize="contain",Q.style.backgroundRepeat="no-repeat";break;case"crop":Q.style.backgroundSize="cover",Q.style.backgroundRepeat="no-repeat";break;case"tile":Q.style.backgroundSize=`${this.#W.scale}%`,Q.style.backgroundRepeat="repeat",Q.style.backgroundPosition="top left";break}}#e(Q){switch(Q.style.objectPosition="center",Q.style.width="100%",Q.style.height="100%",this.#Y.scaleMode){case"fill":case"crop":Q.style.objectFit="cover";break;case"fit":Q.style.objectFit="contain";break}}#d(){const Q=this.#J.querySelector('[data-tab="video"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
+    `,this.#p(Q)}#p(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),J=Q.querySelector(".fig-fill-picker-scale"),Z=Q.querySelector(".fig-fill-picker-upload"),j=Q.querySelector('input[type="file"]'),q=Q.querySelector(".fig-fill-picker-image-preview");$.addEventListener("change",(_)=>{this.#Y.scaleMode=_.target.value,J.style.display=_.target.value==="tile"?"block":"none",this.#c(q),this.#F(),this.#y()}),J.addEventListener("input",(_)=>{this.#Y.scale=parseFloat(_.target.value)||100,this.#c(q),this.#F(),this.#y()}),Z.addEventListener("click",()=>{j.click()}),j.addEventListener("change",(_)=>{const X=_.target.files[0];if(X){const Y=new FileReader;Y.onload=(W)=>{this.#Y.url=W.target.result,this.#c(q),this.#F(),this.#y()},Y.readAsDataURL(X)}});const K=Q.querySelector(".fig-fill-picker-media-preview");K.addEventListener("dragover",(_)=>{_.preventDefault(),K.classList.add("dragover")}),K.addEventListener("dragleave",()=>{K.classList.remove("dragover")}),K.addEventListener("drop",(_)=>{_.preventDefault(),K.classList.remove("dragover");const X=_.dataTransfer.files[0];if(X&&X.type.startsWith("image/")){const Y=new FileReader;Y.onload=(W)=>{this.#Y.url=W.target.result,this.#c(q),this.#F(),this.#y()},Y.readAsDataURL(X)}})}#c(Q){const $=Q.closest(".fig-fill-picker-media-preview");if(!this.#Y.url){Q.style.display="none",$?.classList.remove("has-media");return}switch(Q.style.display="block",$?.classList.add("has-media"),Q.style.backgroundImage=`url(${this.#Y.url})`,Q.style.backgroundPosition="center",this.#Y.scaleMode){case"fill":Q.style.backgroundSize="cover",Q.style.backgroundRepeat="no-repeat";break;case"fit":Q.style.backgroundSize="contain",Q.style.backgroundRepeat="no-repeat";break;case"crop":Q.style.backgroundSize="cover",Q.style.backgroundRepeat="no-repeat";break;case"tile":Q.style.backgroundSize=`${this.#Y.scale}%`,Q.style.backgroundRepeat="repeat",Q.style.backgroundPosition="top left";break}}#d(Q){switch(Q.style.objectPosition="center",Q.style.width="100%",Q.style.height="100%",this.#N.scaleMode){case"fill":case"crop":Q.style.objectFit="cover";break;case"fit":Q.style.objectFit="contain";break}}#$0(){const Q=this.#J.querySelector('[data-tab="video"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
       <fig-field class="fig-fill-picker-media-header" direction="horizontal">
-        <fig-dropdown class="fig-fill-picker-scale-mode" ${J} value="${this.#Y.scaleMode}">
+        <fig-dropdown class="fig-fill-picker-scale-mode" ${J} value="${this.#N.scaleMode}">
           <option value="fill" selected>Fill</option>
           <option value="fit">Fit</option>
           <option value="crop">Crop</option>
@@ -442,7 +444,7 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
           <input type="file" accept="video/*" style="display: none;" />
         </fig-button>
       </div>
-    `,this.#_0(Q)}#_0(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),J=Q.querySelector(".fig-fill-picker-upload"),Z=Q.querySelector('input[type="file"]'),j=Q.querySelector(".fig-fill-picker-video-preview");$.addEventListener("change",(q)=>{this.#Y.scaleMode=q.target.value,this.#e(j),this.#F(),this.#I()}),J.addEventListener("click",()=>{Z.click()});const _=Q.querySelector(".fig-fill-picker-media-preview");Z.addEventListener("change",(q)=>{const K=q.target.files[0];if(K)this.#Y.url=URL.createObjectURL(K),j.src=this.#Y.url,j.style.display="block",j.play(),_.classList.add("has-media"),this.#e(j),this.#F(),this.#I()}),_.addEventListener("dragover",(q)=>{q.preventDefault(),_.classList.add("dragover")}),_.addEventListener("dragleave",()=>{_.classList.remove("dragover")}),_.addEventListener("drop",(q)=>{q.preventDefault(),_.classList.remove("dragover");const K=q.dataTransfer.files[0];if(K&&K.type.startsWith("video/"))this.#Y.url=URL.createObjectURL(K),j.src=this.#Y.url,j.style.display="block",j.play(),_.classList.add("has-media"),this.#e(j),this.#F(),this.#I()})}#J0(){const Q=this.#J.querySelector('[data-tab="webcam"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
+    `,this.#J0(Q)}#J0(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),J=Q.querySelector(".fig-fill-picker-upload"),Z=Q.querySelector('input[type="file"]'),j=Q.querySelector(".fig-fill-picker-video-preview");$.addEventListener("change",(K)=>{this.#N.scaleMode=K.target.value,this.#d(j),this.#F(),this.#y()}),J.addEventListener("click",()=>{Z.click()});const q=Q.querySelector(".fig-fill-picker-media-preview");Z.addEventListener("change",(K)=>{const _=K.target.files[0];if(_)this.#N.url=URL.createObjectURL(_),j.src=this.#N.url,j.style.display="block",j.play(),q.classList.add("has-media"),this.#d(j),this.#F(),this.#y()}),q.addEventListener("dragover",(K)=>{K.preventDefault(),q.classList.add("dragover")}),q.addEventListener("dragleave",()=>{q.classList.remove("dragover")}),q.addEventListener("drop",(K)=>{K.preventDefault(),q.classList.remove("dragover");const _=K.dataTransfer.files[0];if(_&&_.type.startsWith("video/"))this.#N.url=URL.createObjectURL(_),j.src=this.#N.url,j.style.display="block",j.play(),q.classList.add("has-media"),this.#d(j),this.#F(),this.#y()})}#q0(){const Q=this.#J.querySelector('[data-tab="webcam"]'),$=this.getAttribute("experimental"),J=$?`experimental="${$}"`:"";Q.innerHTML=`
       <div class="fig-fill-picker-webcam-preview">
         <div class="fig-fill-picker-checkerboard"></div>
         <video class="fig-fill-picker-webcam-video" autoplay muted playsinline></video>
@@ -457,7 +459,7 @@ var s0=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var d0={};var q0=s0(()=>{/*! Vendored from @
           Capture
         </fig-button>
       </fig-field>
-    `,this.#K0(Q)}#K0(Q){const $=Q.querySelector(".fig-fill-picker-webcam-video"),J=Q.querySelector(".fig-fill-picker-webcam-status"),Z=Q.querySelector(".fig-fill-picker-webcam-capture"),j=Q.querySelector(".fig-fill-picker-camera-select"),_=async(q=null)=>{try{const K={video:q?{deviceId:{exact:q}}:!0};if(this.#U.stream)this.#U.stream.getTracks().forEach((W)=>W.stop());this.#U.stream=await navigator.mediaDevices.getUserMedia(K),$.srcObject=this.#U.stream,$.style.display="block",J.style.display="none";const Y=(await navigator.mediaDevices.enumerateDevices()).filter((W)=>W.kind==="videoinput");if(Y.length>1)j.style.display="block",j.innerHTML=Y.map((W,N)=>`<option value="${W.deviceId}">${W.label||`Camera ${N+1}`}</option>`).join("")}catch(K){console.error("Webcam error:",K.name,K.message);let X="Camera access denied";if(K.name==="NotAllowedError")X="Camera permission denied";else if(K.name==="NotFoundError")X="No camera found";else if(K.name==="NotReadableError")X="Camera in use by another app";else if(K.name==="OverconstrainedError")X="Camera constraints not supported";else if(!window.isSecureContext)X="Camera requires secure context";J.innerHTML=`<span>${X}</span>`,J.style.display="flex",$.style.display="none"}};this.#A=new MutationObserver(()=>{if(Q.style.display!=="none"&&!this.#U.stream)_()}),this.#A.observe(Q,{attributes:!0,attributeFilter:["style"]}),j.addEventListener("change",(q)=>{_(q.target.value)}),Z.addEventListener("click",()=>{if(!this.#U.stream)return;const q=document.createElement("canvas");q.width=$.videoWidth,q.height=$.videoHeight,q.getContext("2d").drawImage($,0,0),this.#U.snapshot=q.toDataURL("image/png"),this.#W.url=this.#U.snapshot,this.#_="image",this.#F(),this.#I(),this.#k("image");const K=this.#J.querySelector("fig-tabs");K.value="image"})}#Z0(Q){const $=Q.h/360,J=Q.s/100,Z=Q.v/100;let j,_,q;const K=Math.floor($*6),X=$*6-K,Y=Z*(1-J),W=Z*(1-X*J),N=Z*(1-(1-X)*J);switch(K%6){case 0:j=Z,_=N,q=Y;break;case 1:j=W,_=Z,q=Y;break;case 2:j=Y,_=Z,q=N;break;case 3:j=Y,_=W,q=Z;break;case 4:j=N,_=Y,q=Z;break;case 5:j=Z,_=Y,q=W;break}return{r:Math.round(j*255),g:Math.round(_*255),b:Math.round(q*255)}}#t(Q){const $=Q.r/255,J=Q.g/255,Z=Q.b/255,j=Math.max($,J,Z),_=Math.min($,J,Z),q=j-_;let K=0;const X=j===0?0:q/j,Y=j;if(j!==_){switch(j){case $:K=(J-Z)/q+(J<Z?6:0);break;case J:K=(Z-$)/q+2;break;case Z:K=($-J)/q+4;break}K/=6}return{h:K*360,s:X*100,v:Y*100,a:1}}#Q0(Q){if(!Q||typeof Q.h!=="number"||typeof Q.s!=="number"||typeof Q.v!=="number")return"#D9D9D9";const $=this.#Z0(Q),J=(Z)=>{return(isNaN(Z)?217:Math.max(0,Math.min(255,Math.round(Z)))).toString(16).padStart(2,"0")};return`#${J($.r)}${J($.g)}${J($.b)}`}#q0(Q){const $=parseInt(Q.slice(1,3),16),J=parseInt(Q.slice(3,5),16),Z=parseInt(Q.slice(5,7),16);return this.#t({r:$,g:J,b:Z})}#W0(Q,$=1){const J=parseInt(Q.slice(1,3),16),Z=parseInt(Q.slice(3,5),16),j=parseInt(Q.slice(5,7),16);return`rgba(${J}, ${Z}, ${j}, ${$})`}#N0(Q,$=1){const J=+(parseInt(Q.slice(1,3),16)/255).toFixed(4),Z=+(parseInt(Q.slice(3,5),16)/255).toFixed(4),j=+(parseInt(Q.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${J} ${Z} ${j} / ${$})`}#U0(Q){const $=Q.r/255,J=Q.g/255,Z=Q.b/255,j=Math.max($,J,Z),_=Math.min($,J,Z);let q,K;const X=(j+_)/2;if(j===_)q=K=0;else{const Y=j-_;switch(K=X>0.5?Y/(2-j-_):Y/(j+_),j){case $:q=((J-Z)/Y+(J<Z?6:0))/6;break;case J:q=((Z-$)/Y+2)/6;break;case Z:q=(($-J)/Y+4)/6;break}}return{h:q*360,s:K*100,l:X*100}}#L0(Q){const $=Q.h/360,J=Q.s/100,Z=Q.l/100;let j,_,q;if(J===0)j=_=q=Z;else{const K=(W,N,U)=>{if(U<0)U+=1;if(U>1)U-=1;if(U<0.16666666666666666)return W+(N-W)*6*U;if(U<0.5)return N;if(U<0.6666666666666666)return W+(N-W)*(0.6666666666666666-U)*6;return W},X=Z<0.5?Z*(1+J):Z+J-Z*J,Y=2*Z-X;j=K(Y,X,$+0.3333333333333333),_=K(Y,X,$),q=K(Y,X,$-0.3333333333333333)}return{r:Math.round(j*255),g:Math.round(_*255),b:Math.round(q*255)}}#X0(Q){const $=(N)=>{return N=N/255,N<=0.04045?N/12.92:Math.pow((N+0.055)/1.055,2.4)},J=$(Q.r),Z=$(Q.g),j=$(Q.b),_=0.4122214708*J+0.5363325363*Z+0.0514459929*j,q=0.2119034982*J+0.6806995451*Z+0.1073969566*j,K=0.0883024619*J+0.2817188376*Z+0.6299787005*j,X=Math.cbrt(_),Y=Math.cbrt(q),W=Math.cbrt(K);return{l:0.2104542553*X+0.793617785*Y-0.0040720468*W,a:1.9779984951*X-2.428592205*Y+0.4505937099*W,b:0.0259040371*X+0.7827717662*Y-0.808675766*W}}#G0(Q){const $=this.#X0(Q);return{l:$.l,c:Math.sqrt($.a*$.a+$.b*$.b),h:(Math.atan2($.b,$.a)*180/Math.PI+360)%360}}#Y0(Q){const $=Q.l+0.3963377774*Q.a+0.2158037573*Q.b,J=Q.l-0.1055613458*Q.a-0.0638541728*Q.b,Z=Q.l-0.0894841775*Q.a-1.291485548*Q.b,j=$*$*$,_=J*J*J,q=Z*Z*Z,K=(X)=>{const Y=X<=0.0031308?12.92*X:1.055*Math.pow(X,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,Y))*255)};return{r:K(4.0767416621*j-3.3077115913*_+0.2309699292*q),g:K(-1.2684380046*j+2.6097574011*_-0.3413193965*q),b:K(-0.0041960863*j-0.7034186147*_+1.707614701*q)}}#B0(Q){const $=Q.h*Math.PI/180;return this.#Y0({l:Q.l,a:Q.c*Math.cos($),b:Q.c*Math.sin($)})}#I(){this.#F(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#n(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){const Q={type:this.#_,colorSpace:this.#Z};switch(this.#_){case"solid":return{...Q,color:this.#Q0(this.#K),alpha:this.#K.a,hsv:{...this.#K}};case"gradient":return{...Q,gradient:Q0(this.#q),css:this.#w()};case"image":return{...Q,image:{...this.#W}};case"video":return{...Q,video:{...this.#Y}};case"webcam":return{...Q,image:{url:this.#U.snapshot,scaleMode:"fill",scale:50}};default:return{...Q,...this.#B[this.#_]}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":if(this.#T(),this.#F(),this.#J){if(!this.#R){if(this.#S(),this.#r(),this.#O)this.#O.setAttribute("value",this.#K.h);if(this.#M)this.#M.setAttribute("value",this.#K.a*100),this.#M.setAttribute("color",this.#Q0(this.#K))}}break;case"disabled":break}}}customElements.define("fig-fill-picker",l);class h0 extends HTMLElement{#$=null;#Q=null;#J=this.#L.bind(this);#j=this.#G.bind(this);static get observedAttributes(){return["value","selected","disabled","alpha","control"]}get#_(){return this.getAttribute("control")||"color"}connectedCallback(){this.#q(),this.#N()}disconnectedCallback(){this.#Z(),this.removeEventListener("click",this.#W)}#Z(){if(!this.#$)return;this.#$.removeEventListener("input",this.#J),this.#$.removeEventListener("change",this.#j)}#K=()=>{requestAnimationFrame(()=>{const Q=document.querySelector(".fig-fill-picker-dialog[open]");if(!Q)return;Q.addEventListener("close",()=>this.removeAttribute("selected"),{once:!0})})};get#X(){const Q=this.getAttribute("alpha");return Q===null||Q!=="false"}#q(){const Q=this.#_;if(Q==="add"||Q==="remove"){const Z=Q==="add"?"var(--icon-add)":"var(--icon-minus)";this.innerHTML=`<fig-button icon variant="ghost"><span class="fig-mask-icon" style="--icon: ${Z}"></span></fig-button>`,this.#$=null,this.#Q=null,this.addEventListener("click",this.#W);return}this.removeEventListener("click",this.#W);const $=this.#U(this.getAttribute("value")),J=this.#X?"":'alpha="false"';this.innerHTML=`
-      <fig-fill-picker mode="solid" ${J} value='${JSON.stringify({type:"solid",color:$})}'>
-        <fig-chit background="${$}"></fig-chit>
-      </fig-fill-picker>`,this.#$=this.querySelector("fig-fill-picker"),this.#Q=this.querySelector("fig-chit"),this.#Z(),this.#$?.addEventListener("input",this.#J),this.#$?.addEventListener("change",this.#j),this.#Q?.addEventListener("click",()=>{this.setAttribute("selected",""),this.#K()})}#W=()=>{const Q=this.#_;this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,composed:!0}))};#Y(Q){if(!Q)return"#D9D9D9";const $=Q.replace("#","").trim();if($.length===3||$.length===4){const[J,Z,j]=$;return`#${J}${J}${Z}${Z}${j}${j}`.toUpperCase()}if($.length===6||$.length===8)return`#${$.slice(0,6)}`.toUpperCase();return"#D9D9D9"}#U(Q){if(!Q)return"#D9D9D9";const $=String(Q).trim();if($.startsWith("{"))try{const J=JSON.parse($);if(J?.color)return this.#U(J.color)}catch{}if($.startsWith("#"))return this.#Y($);try{const{ctx:J}=e(1,1);J.fillStyle="#000000",J.fillStyle=$;const Z=J.fillStyle;if(Z.startsWith("#"))return this.#Y(Z);const j=Z.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(j){const _=(q)=>Math.max(0,Math.min(255,Number(q))).toString(16).padStart(2,"0");return`#${_(j[1])}${_(j[2])}${_(j[3])}`.toUpperCase()}}catch{}return"#D9D9D9"}#N(){const Q=this.#U(this.getAttribute("value"));if(this.getAttribute("value")!==Q){this.setAttribute("value",Q);return}if(this.#$){if(this.#$.setAttribute("value",JSON.stringify({type:"solid",color:Q})),this.#X)this.#$.removeAttribute("alpha");else this.#$.setAttribute("alpha","false");if(this.hasAttribute("disabled"))this.#$.setAttribute("disabled","");else this.#$.removeAttribute("disabled")}if(this.#Q)if(this.#Q.setAttribute("background",Q),this.hasAttribute("disabled"))this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled")}#B(Q,$){const J=this.#U(Q?.color),Z=this.#U(this.getAttribute("value"));if(J!==Z)this.setAttribute("value",J);else this.#N();const j={color:this.value};if(this.#X&&Q?.opacity!==void 0)j.opacity=Q.opacity;this.dispatchEvent(new CustomEvent($,{bubbles:!0,cancelable:!0,composed:!0,detail:j}))}#L(Q){Q.stopPropagation(),this.#B(Q.detail,"input")}#G(Q){Q.stopPropagation(),this.#B(Q.detail,"change")}attributeChangedCallback(Q,$,J){if($===J)return;if(!this.isConnected)return;switch(Q){case"control":this.#q();break;case"value":case"selected":case"disabled":this.#N();break}}get value(){return this.#U(this.getAttribute("value"))}set value(Q){if(Q===null||Q===void 0||Q===""){this.removeAttribute("value");return}this.setAttribute("value",this.#U(Q))}get selected(){return this.hasAttribute("selected")}set selected(Q){this.toggleAttribute("selected",Boolean(Q))}get disabled(){return this.hasAttribute("disabled")}set disabled(Q){this.toggleAttribute("disabled",Boolean(Q))}}customElements.define("fig-color-tip",h0);class m0 extends HTMLElement{static get observedAttributes(){return["selected","disabled"]}connectedCallback(){if(this.setAttribute("role","option"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","0");if(this.setAttribute("aria-selected",this.hasAttribute("selected")?"true":"false"),this.hasAttribute("disabled"))this.setAttribute("aria-disabled","true")}attributeChangedCallback(Q){if(Q==="selected")this.setAttribute("aria-selected",this.hasAttribute("selected")?"true":"false");if(Q==="disabled")if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else this.removeAttribute("aria-disabled"),this.setAttribute("tabindex","0")}}customElements.define("fig-choice",m0);class g0 extends HTMLElement{#$=null;#Q=this.#G.bind(this);#J=this.#O.bind(this);#j=this.#R.bind(this);#_=null;#Z=null;#K=null;#X=null;#q=null;constructor(){super()}static get observedAttributes(){return["value","disabled","choice-element","drag","overflow","loop","padding"]}get#W(){return this.getAttribute("overflow")==="scrollbar"?"scrollbar":"buttons"}get#Y(){const Q=this.getAttribute("drag");return Q===null||Q!=="false"}get#U(){return this.getAttribute("choice-element")||"fig-choice"}get choices(){return Array.from(this.querySelectorAll(this.#U))}get selectedChoice(){return this.#$}set selectedChoice(Q){if(Q&&!this.contains(Q))return;const $=this.choices;for(let Z of $){const j=Z===Q,_=Z.hasAttribute("selected");if(j&&!_)Z.setAttribute("selected","");else if(!j&&_)Z.removeAttribute("selected")}this.#$=Q;const J=Q?.getAttribute("value")??"";if(this.getAttribute("value")!==J){if(J)this.setAttribute("value",J)}this.#C(Q)}get value(){return this.#$?.getAttribute("value")??""}set value(Q){if(Q===null||Q===void 0||Q==="")return;this.setAttribute("value",String(Q))}connectedCallback(){this.setAttribute("role","listbox"),this.addEventListener("click",this.#Q),this.addEventListener("keydown",this.#J),this.addEventListener("scroll",this.#j),this.#f(),this.#E(),this.#D(),this.#z(),requestAnimationFrame(()=>{this.#N(),this.#R()})}disconnectedCallback(){this.removeEventListener("click",this.#Q),this.removeEventListener("keydown",this.#J),this.removeEventListener("scroll",this.#j),this.#A(),this.#_?.disconnect(),this.#_=null,this.#Z?.disconnect(),this.#Z=null,this.#T()}attributeChangedCallback(Q,$,J){if(Q==="value"&&J!==$&&J)this.#B(J);if(Q==="disabled"){const Z=J!==null&&J!=="false",j=this.choices;for(let _ of j)if(Z)_.setAttribute("aria-disabled","true"),_.setAttribute("tabindex","-1");else _.removeAttribute("aria-disabled"),_.setAttribute("tabindex","0")}if(Q==="choice-element")requestAnimationFrame(()=>this.#N());if(Q==="drag")if(this.#Y)this.#E();else this.#A();if(Q==="overflow")this.#f()}#N(){const Q=this.choices;if(!Q.length){this.#$=null;return}const $=this.getAttribute("value");if($&&this.#B($))return;const J=Q.find((Z)=>Z.hasAttribute("selected"));if(J){this.selectedChoice=J;return}this.selectedChoice=Q[0]}#B(Q){const $=this.choices;for(let J of $)if(J.getAttribute("value")===Q)return this.selectedChoice=J,!0;return!1}#L(Q){const $=this.#U;let J=Q;while(J&&J!==this){if(J.matches($))return J;J=J.parentElement}return null}#G(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=this.#L(Q.target);if(!$)return;if($.hasAttribute("disabled")&&$.getAttribute("disabled")!=="false")return;this.selectedChoice=$,this.#M()}#O(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=this.choices.filter((_)=>!_.hasAttribute("disabled")||_.getAttribute("disabled")==="false");if(!$.length)return;const J=$.indexOf(this.#$);let Z=J;const j=this.hasAttribute("loop");switch(Q.key){case"ArrowDown":case"ArrowRight":if(Q.preventDefault(),J<$.length-1)Z=J+1;else if(j)Z=0;break;case"ArrowUp":case"ArrowLeft":if(Q.preventDefault(),J>0)Z=J-1;else if(j)Z=$.length-1;break;case"Home":Q.preventDefault(),Z=0;break;case"End":Q.preventDefault(),Z=$.length-1;break;case"Enter":case" ":if(Q.preventDefault(),document.activeElement?.matches(this.#U)){const _=this.#L(document.activeElement);if(_&&_!==this.#$)this.selectedChoice=_,this.#M()}return;default:return}if(Z!==J&&$[Z])this.selectedChoice=$[Z],$[Z].focus(),this.#M()}#M(){const Q=this.value;this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#R(){if(this.#W==="scrollbar")return;const Q=this.getAttribute("layout")==="horizontal",$=2;if(Q){const J=this.scrollLeft<=$,Z=this.scrollLeft+this.clientWidth>=this.scrollWidth-$;this.classList.toggle("overflow-start",!J),this.classList.toggle("overflow-end",!Z)}else{const J=this.scrollTop<=$,Z=this.scrollTop+this.clientHeight>=this.scrollHeight-$;this.classList.toggle("overflow-start",!J),this.classList.toggle("overflow-end",!Z)}}#z(){this.#Z?.disconnect(),this.#Z=new ResizeObserver(()=>{this.#R()}),this.#Z.observe(this)}#E(){if(this.#q?.bound)return;if(!this.#Y)return;const Q=(_)=>{if(_.button!==0)return;if(!(this.getAttribute("layout")==="horizontal"?this.scrollWidth>this.clientWidth:this.scrollHeight>this.clientHeight))return;this.#q.active=!0,this.#q.didDrag=!1,this.#q.startX=_.clientX,this.#q.startY=_.clientY,this.#q.scrollLeft=this.scrollLeft,this.#q.scrollTop=this.scrollTop,this.style.cursor="grab",this.style.userSelect="none"},$=(_)=>{if(!this.#q.active)return;const q=this.getAttribute("layout")==="horizontal",K=_.clientX-this.#q.startX,X=_.clientY-this.#q.startY;if(!this.#q.didDrag&&Math.abs(q?K:X)>3)this.#q.didDrag=!0,this.style.cursor="grabbing",this.setPointerCapture(_.pointerId);if(!this.#q.didDrag)return;if(q)this.scrollLeft=this.#q.scrollLeft-K;else this.scrollTop=this.#q.scrollTop-X},J=(_)=>{if(!this.#q.active)return;const q=this.#q.didDrag;if(this.#q.active=!1,this.#q.didDrag=!1,this.style.cursor="",this.style.userSelect="",_.pointerId!==void 0)try{this.releasePointerCapture(_.pointerId)}catch{}if(q)_.preventDefault(),_.stopPropagation()},Z=(_)=>{if(this.#q?.suppressClick)_.stopPropagation(),_.preventDefault(),this.#q.suppressClick=!1},j=(_)=>{if(this.#q?.didDrag)this.#q.suppressClick=!0,setTimeout(()=>{if(this.#q)this.#q.suppressClick=!1},0)};this.#q={active:!1,didDrag:!1,suppressClick:!1,startX:0,startY:0,scrollLeft:0,scrollTop:0,bound:!0,onPointerDown:Q,onPointerMove:$,onPointerUp:J,onClick:Z,onPointerUpCapture:j},this.addEventListener("pointerdown",Q),window.addEventListener("pointermove",$),window.addEventListener("pointerup",J),this.addEventListener("pointerup",j,!0),this.addEventListener("click",Z,!0)}#A(){if(!this.#q?.bound)return;this.removeEventListener("pointerdown",this.#q.onPointerDown),window.removeEventListener("pointermove",this.#q.onPointerMove),window.removeEventListener("pointerup",this.#q.onPointerUp),this.removeEventListener("pointerup",this.#q.onPointerUpCapture,!0),this.removeEventListener("click",this.#q.onClick,!0),this.style.cursor="",this.style.userSelect="",this.#q=null}#f(){if(this.#W==="scrollbar")this.#T();else this.#F()}#T(){this.#K?.remove(),this.#X?.remove(),this.#K=null,this.#X=null,this.classList.remove("overflow-start","overflow-end")}#F(){if(this.#K)return;this.#K=document.createElement("button"),this.#K.className="fig-chooser-nav-start",this.#K.setAttribute("tabindex","-1"),this.#K.setAttribute("aria-label","Scroll back"),this.#X=document.createElement("button"),this.#X.className="fig-chooser-nav-end",this.#X.setAttribute("tabindex","-1"),this.#X.setAttribute("aria-label","Scroll forward"),this.#K.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#P(-1)}),this.#X.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#P(1)}),this.prepend(this.#K),this.append(this.#X)}#P(Q){const $=this.getAttribute("layout")==="horizontal",Z=($?this.clientWidth:this.clientHeight)*0.8*Q;this.scrollBy({[$?"left":"top"]:Z,behavior:"smooth"})}#C(Q){if(!Q)return;requestAnimationFrame(()=>{const $=this.scrollHeight>this.clientHeight,J=this.scrollWidth>this.clientWidth;if(!J&&!$)return;const Z={behavior:"smooth"};if($){const j=Q.offsetTop-this.clientHeight/2+Q.offsetHeight/2;Z.top=j}if(J){const j=Q.offsetLeft-this.clientWidth/2+Q.offsetWidth/2;Z.left=j}this.scrollTo(Z)})}#D(){this.#_?.disconnect(),this.#_=new MutationObserver(()=>{const Q=this.choices;if(this.#$&&!Q.includes(this.#$))this.#$=null,this.#N();else if(!this.#$&&Q.length)this.#N()}),this.#_.observe(this,{childList:!0,subtree:!0})}}customElements.define("fig-chooser",g0);class p0 extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#$=50;#Q=50;#J=75;#j=75;#_=0;#Z=!1;#K=0;#X=null;#q=null;#W=null;#Y=null;#U=null;#N=null;#B=null;#L=null;#G=null;#O=!1;#M=!1;#R=!1;#z=!1;#E="";get#A(){return this.getAttribute("type")||"point"}get#f(){return this.#A==="point-radius"||this.#A==="point-radius-angle"}get#T(){return this.#A==="point-radius-angle"}get#F(){return this.#A==="point-point"}get#P(){return this.#A==="point-radius-angle"||this.#A==="point-point"}get#C(){const Q=this.getAttribute("tooltips");return Q===null||Q!=="false"}get#D(){const Q=this.getAttribute("snapping");if(Q===null)return"false";const $=Q.trim().toLowerCase();if($==="modifier")return"modifier";if($===""||$==="true")return"true";return"false"}#k(Q){const $=this.#D;if($==="true")return!0;if($==="modifier")return!!Q;return!1}get#H(){const Q=this.getAttribute("name");if(Q)return Q.split(",")[0].trim();return`${Math.round(this.#$)}%, ${Math.round(this.#Q)}%`}get#y(){const Q=this.getAttribute("name");if(Q){const $=Q.split(",");if($.length>1)return $[1].trim()}return`${Math.round(this.#J)}%, ${Math.round(this.#j)}%`}get#x(){return this.getAttribute("drag-surface")||"parent"}get#S(){const Q=this.#x;if(Q==="parent")return this.parentElement;return this.closest(Q)}get#b(){const Q=this.#x;if(Q==="parent"){const $=this.parentElement;if($)return $.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return Q}#m(Q){if(this.#Z)return this.#_/100*Q;return this.#_}#c(){if(this.#Z)return`${Math.round(this.#_)}%`;return`${Math.round(this.#_)}px`}connectedCallback(){this.#o(),this.#l()}disconnectedCallback(){this.#J0()}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="value"&&!this.#O&&!this.#M&&!this.#R&&!this.#z)if(this.#o(),this.#X)this.#w();else this.#l();if(Q==="type")this.#o(),this.#l();if(Q==="color"&&this.#X)if(J)this.#X.setAttribute("color",J);else this.#X.removeAttribute("color");if(Q==="disabled")this.#l();if(Q==="tooltips")this.#l();if(Q==="snapping"&&this.#X){if(this.#X.setAttribute("drag-snapping",J||"false"),this.#q)this.#q.setAttribute("drag-snapping",J||"false")}if(Q==="name"){if(this.#N)this.#N.setAttribute("text",this.#H);if(this.#B)this.#B.setAttribute("text",this.#y)}}#o(){const Q=this.getAttribute("value");if(!Q)return;try{const $=JSON.parse(Q);if(typeof $.x==="number")this.#$=$.x;if(typeof $.y==="number")this.#Q=$.y;if($.radius!==void 0){const J=String($.radius);if(J.endsWith("%"))this.#Z=!0,this.#_=parseFloat(J);else this.#Z=!1,this.#_=parseFloat(J);if(!Number.isFinite(this.#_))this.#_=0}if(typeof $.angle==="number")this.#K=$.angle;if(typeof $.x2==="number")this.#J=$.x2;if(typeof $.y2==="number")this.#j=$.y2}catch{}}get value(){const Q={x:this.#$,y:this.#Q};if(this.#f)Q.radius=this.#Z?`${this.#_}%`:this.#_;if(this.#T)Q.angle=this.#K;if(this.#F)Q.x2=this.#J,Q.y2=this.#j;return Q}set value(Q){if(typeof Q==="object")this.setAttribute("value",JSON.stringify(Q));else if(typeof Q==="string")this.setAttribute("value",Q)}#l(){this.innerHTML="",this.#X=null,this.#q=null,this.#W=null,this.#Y=null,this.#U=null,this.#N=null,this.#B=null,this.#L=null,this.#G=null;const Q=this.hasAttribute("disabled"),$=this.#A,J=this.#C,Z=this.#b,j=document.createElement("fig-handle");if(j.setAttribute("drag","true"),j.setAttribute("drag-surface",Z),j.setAttribute("drag-axes","x,y"),j.setAttribute("drag-snapping",this.#D),j.setAttribute("value",`${this.#$}% ${this.#Q}%`),Q)j.setAttribute("disabled","");if($==="color"){j.setAttribute("type","color");const _=this.getAttribute("color");if(_)j.setAttribute("color",_)}if(this.#F)j.setAttribute("hit-area","12 circle"),j.setAttribute("hit-area-mode","delegate");if(this.#X=j,this.#f)this.#r();if(this.#P)this.#j0();if(J){const _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("text",this.#H),_.appendChild(j),this.appendChild(_),this.#N=_}else this.appendChild(j);if(this.#T)this.#a(Q,J,Z);if(this.#F)this.#g(Q,J,Z);this.#e(),requestAnimationFrame(()=>this.#w())}#r(){const $=document.createElementNS("http://www.w3.org/2000/svg","svg");$.classList.add("fig-canvas-control-radius"),$.setAttribute("overflow","visible");const J=document.createElementNS("http://www.w3.org/2000/svg","circle");J.classList.add("fig-canvas-control-radius-hit"),$.appendChild(J);const Z=document.createElementNS("http://www.w3.org/2000/svg","circle");if($.appendChild(Z),this.#Y=$,this.#C){const j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("text",this.#c()),j.appendChild($),this.appendChild(j),this.#L=j}else this.appendChild($);this.#_0(J)}#j0(){const $=document.createElementNS("http://www.w3.org/2000/svg","svg");$.classList.add("fig-canvas-control-angle-svg"),$.setAttribute("overflow","visible"),$.style.position="absolute",$.style.pointerEvents="none";const J=document.createElementNS("http://www.w3.org/2000/svg","line");J.classList.add("fig-canvas-control-angle-line"),$.appendChild(J),this.#U=$,this.appendChild($)}#a(Q,$,J){const Z=document.createElement("fig-handle");if(Z.setAttribute("drag","true"),Z.setAttribute("drag-surface",J),Z.setAttribute("drag-axes","x,y"),Z.setAttribute("size","small"),Z.setAttribute("hit-area","12 circle"),Z.setAttribute("hit-area-mode","delegate"),Q)Z.setAttribute("disabled","");if(this.#W=Z,$){const j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("text",`${Math.round(this.#K)}\xB0`),j.appendChild(Z),this.appendChild(j),this.#G=j}else this.appendChild(Z)}#g(Q,$,J){const Z=document.createElement("fig-handle");if(Z.setAttribute("drag","true"),Z.setAttribute("drag-surface",J),Z.setAttribute("drag-axes","x,y"),Z.setAttribute("drag-snapping",this.#D),Z.setAttribute("hit-area","12 circle"),Z.setAttribute("hit-area-mode","delegate"),Z.setAttribute("value",`${this.#J}% ${this.#j}%`),Q)Z.setAttribute("disabled","");if(this.#q=Z,$){const j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("text",this.#y),j.appendChild(Z),this.appendChild(j),this.#B=j}else this.appendChild(Z)}#h(Q){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(Q)} 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`}#s(Q){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(Q-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`}#p(){if(!this.#W||!this.#T)return;const Q=this.#W.querySelector(".fig-handle-hit-area");if(!Q)return;Q.style.cursor=this.#s(this.#K)}#V(){return Math.atan2(this.#j-this.#Q,this.#J-this.#$)*180/Math.PI}#$0(){if(!this.#F)return;const Q=this.#V(),$=(J,Z)=>{if(!J)return;const j=J.querySelector(".fig-handle-hit-area");if(j)j.style.cursor=this.#s(Z)};$(this.#X,Q+180),$(this.#q,Q)}#w(){const Q=this.#S;if(!Q||!this.#X)return;const $=Q.getBoundingClientRect();if(this.#X.setAttribute("value",`${this.#$}% ${this.#Q}%`),this.#Y){const J=this.#$/100*$.width,Z=this.#Q/100*$.height,j=this.#m($.width),_=this.#Y,q=Math.max(j*2,1);_.style.position="absolute",_.style.width=`${q}px`,_.style.height=`${q}px`,_.style.left=`${J-j}px`,_.style.top=`${Z-j}px`,_.setAttribute("viewBox",`0 0 ${q} ${q}`);const K=_.querySelectorAll("circle");for(let X of K)X.setAttribute("cx",String(j)),X.setAttribute("cy",String(j)),X.setAttribute("r",String(Math.max(j-1,0)));if(this.#L)this.#L.setAttribute("text",this.#c())}if(this.#U&&this.#P){const J=this.#$/100*$.width,Z=this.#Q/100*$.height;let j,_;if(this.#F)j=this.#J/100*$.width,_=this.#j/100*$.height;else{const X=this.#m($.width),Y=this.#K*Math.PI/180;j=J+X*Math.cos(Y),_=Z+X*Math.sin(Y)}const q=this.#U;q.style.width=`${$.width}px`,q.style.height=`${$.height}px`,q.style.left="0",q.style.top="0",q.setAttribute("viewBox",`0 0 ${$.width} ${$.height}`);const K=q.querySelector("line");if(K)K.setAttribute("x1",String(J)),K.setAttribute("y1",String(Z)),K.setAttribute("x2",String(j)),K.setAttribute("y2",String(_))}if(this.#W&&this.#T){const J=this.#$/100*$.width,Z=this.#Q/100*$.height,j=this.#m($.width),_=this.#K*Math.PI/180,q=J+j*Math.cos(_),K=Z+j*Math.sin(_),X=$.width>0?q/$.width*100:0,Y=$.height>0?K/$.height*100:0;if(this.#W.setAttribute("value",`${X}% ${Y}%`),this.#G)this.#G.setAttribute("text",`${Math.round(this.#K)}\xB0`)}if(this.#q&&this.#F){if(this.#q.setAttribute("value",`${this.#J}% ${this.#j}%`),this.#B)this.#B.setAttribute("text",this.#y)}this.#p(),this.#$0()}#i(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#u(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#v(){this.setAttribute("value",JSON.stringify(this.value))}#e(){if(!this.#X)return;if(this.#X.addEventListener("input",(Q)=>{if(Q.stopPropagation(),!this.#O&&this.#F)this.#E=document.body.style.cursor;this.#O=!0;const $=Q.detail?.px??this.#$/100,J=Q.detail?.py??this.#Q/100;if(this.#$=Math.round(Math.max(0,Math.min(100,$*100))),this.#Q=Math.round(Math.max(0,Math.min(100,J*100))),this.#N)this.#N.setAttribute("text",this.#H),this.#N.setAttribute("show","true"),this.#N.showPopup?.();if(this.#w(),this.#F)document.body.style.cursor=this.#h(this.#V());this.#i()}),this.#X.addEventListener("change",(Q)=>{Q.stopPropagation();const $=Q.detail?.px??this.#$/100,J=Q.detail?.py??this.#Q/100;if(this.#$=Math.round(Math.max(0,Math.min(100,$*100))),this.#Q=Math.round(Math.max(0,Math.min(100,J*100))),this.#N)this.#N.removeAttribute("show");if(this.#F)document.body.style.cursor=this.#E??"";this.#w(),this.#v(),this.#u(),requestAnimationFrame(()=>{this.#O=!1})}),this.#W)this.#W.addEventListener("input",(Q)=>{Q.stopPropagation(),this.#z=!0,this.classList.add("fig-canvas-control-ring-active");const $=this.#S;if(!$)return;const J=$.getBoundingClientRect(),Z=this.#$/100*J.width,j=this.#Q/100*J.height,_=Q.detail?.x??0,q=Q.detail?.y??0,K=this.#W.offsetWidth/2,X=this.#W.offsetHeight/2,Y=_+K-Z,W=q+X-j;let N=Math.atan2(W,Y)*180/Math.PI;if(this.#k(Q.detail?.shiftKey))N=Math.round(N/15)*15;this.#K=N;let U=Math.sqrt(Y*Y+W*W);if(this.#k(Q.detail?.shiftKey)){const z=this.#Z?5:10;if(this.#Z){let O=U/J.width*100;O=Math.round(O/z)*z,U=O/100*J.width}else U=Math.round(U/z)*z}if(this.#Z)this.#_=Math.max(0,U/J.width*100);else this.#_=Math.max(0,U);if(this.#w(),this.#G)this.#G.setAttribute("text",`${Math.round(this.#K)}\xB0`),this.#G.setAttribute("show","true"),this.#G.showPopup?.();if(this.#L)this.#L.setAttribute("text",this.#c());this.#i()}),this.#W.addEventListener("change",(Q)=>{if(Q.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#G)this.#G.removeAttribute("show");this.#w(),this.#v(),this.#u(),requestAnimationFrame(()=>{this.#z=!1})}),this.#W.addEventListener("hitareadown",(Q)=>{Q.stopPropagation();const $=Q.detail?.originalEvent;if(!$)return;$.preventDefault(),this.#z=!0,this.classList.add("fig-canvas-control-ring-active");const J=this.#S;if(!J)return;if(this.#G)this.#G.setAttribute("show","true"),this.#G.showPopup?.();const Z=document.body.style.cursor;document.body.style.cursor=this.#s(this.#K);const j=(q)=>{const K=J.getBoundingClientRect(),X=this.#$/100*K.width,Y=this.#Q/100*K.height,W=q.clientX-K.left-X,N=q.clientY-K.top-Y;let U=Math.atan2(N,W)*180/Math.PI;if(this.#k(q.shiftKey))U=Math.round(U/15)*15;if(this.#K=U,this.#w(),document.body.style.cursor=this.#s(this.#K),this.#G)this.#G.setAttribute("text",`${Math.round(this.#K)}\xB0`);this.#i()},_=()=>{if(this.#z=!1,this.classList.remove("fig-canvas-control-ring-active"),document.body.style.cursor=Z,this.#G)this.#G.removeAttribute("show");this.#v(),this.#u(),window.removeEventListener("pointermove",j),window.removeEventListener("pointerup",_)};window.addEventListener("pointermove",j),window.addEventListener("pointerup",_)});if(this.#q)this.#q.addEventListener("input",(Q)=>{if(Q.stopPropagation(),!this.#M)this.#E=document.body.style.cursor;this.#M=!0;const $=Q.detail?.px??this.#J/100,J=Q.detail?.py??this.#j/100;if(this.#J=Math.round(Math.max(0,Math.min(100,$*100))),this.#j=Math.round(Math.max(0,Math.min(100,J*100))),this.#B)this.#B.setAttribute("text",this.#y),this.#B.setAttribute("show","true"),this.#B.showPopup?.();this.#w(),document.body.style.cursor=this.#h(this.#V()),this.#i()}),this.#q.addEventListener("change",(Q)=>{if(Q.stopPropagation(),document.body.style.cursor=this.#E??"",this.#B)this.#B.removeAttribute("show");this.#w(),this.#v(),this.#u(),requestAnimationFrame(()=>{this.#M=!1})}),this.#d(this.#X,!0),this.#d(this.#q,!1)}#d(Q,$){if(!Q)return;Q.addEventListener("hitareadown",(J)=>{J.stopPropagation();const Z=J.detail?.originalEvent;if(!Z)return;Z.preventDefault(),this.#O=!0;const j=this.#S;if(!j)return;const _=j.getBoundingClientRect(),q=$?this.#J:this.#$,K=$?this.#j:this.#Q,X=$?this.#$:this.#J,Y=$?this.#Q:this.#j,W=q/100*_.width,N=K/100*_.height,U=X/100*_.width,z=Y/100*_.height,O=Math.sqrt((U-W)**2+(z-N)**2),L=$?this.#N:this.#B;if(L)L.setAttribute("show","true"),L.showPopup?.();const B=document.body.style.cursor,M=this.#V();document.body.style.cursor=this.#s($?M+180:M);const F=(k)=>{const T=j.getBoundingClientRect(),x=q/100*T.width,f=K/100*T.height,H=k.clientX-T.left-x,b=k.clientY-T.top-f;let S=Math.atan2(b,H);if(this.#k(k.shiftKey))S=Math.round(S*180/Math.PI/15)*15*Math.PI/180;const s=x+O*Math.cos(S),d=f+O*Math.sin(S),p=Math.round(Math.max(0,Math.min(100,s/T.width*100))),h=Math.round(Math.max(0,Math.min(100,d/T.height*100)));if($)this.#$=p,this.#Q=h;else this.#J=p,this.#j=h;this.#w();const r=this.#V();document.body.style.cursor=this.#s($?r+180:r),this.#i()},E=()=>{if(this.#O=!1,document.body.style.cursor=B,L)L.removeAttribute("show");this.#v(),this.#u(),window.removeEventListener("pointermove",F),window.removeEventListener("pointerup",E)};window.addEventListener("pointermove",F),window.addEventListener("pointerup",E)})}#_0(Q){if(!Q)return;Q.addEventListener("pointermove",(J)=>{if(this.#R)return;const Z=this.#S;if(!Z)return;const j=Z.getBoundingClientRect(),_=this.#$/100*j.width,q=this.#Q/100*j.height,K=Math.atan2(J.clientY-j.top-q,J.clientX-j.left-_)*180/Math.PI;Q.style.cursor=this.#h(K)});const $=(J)=>{if(this.hasAttribute("disabled"))return;J.preventDefault(),J.stopPropagation(),this.#R=!0,this.classList.add("fig-canvas-control-ring-active");const Z=this.#S;if(!Z)return;if(this.#L)this.#L.setAttribute("show","true"),this.#L.showPopup?.();const j=document.body.style.cursor;Q.style.pointerEvents="none";const _=Z.getBoundingClientRect(),q=this.#$/100*_.width,K=this.#Q/100*_.height,X=Math.atan2(J.clientY-_.top-K,J.clientX-_.left-q)*180/Math.PI;document.body.style.cursor=this.#h(X);const Y=(N)=>{const U=Z.getBoundingClientRect(),z=this.#$/100*U.width,O=this.#Q/100*U.height,L=N.clientX-U.left-z,B=N.clientY-U.top-O;document.body.style.cursor=this.#h(Math.atan2(B,L)*180/Math.PI);let M=Math.sqrt(L*L+B*B);if(this.#k(N.shiftKey)){const F=this.#Z?5:10;if(this.#Z){let E=M/U.width*100;E=Math.round(E/F)*F,M=E/100*U.width}else M=Math.round(M/F)*F}if(this.#Z)this.#_=Math.max(0,M/U.width*100);else this.#_=Math.max(0,M);this.#w(),this.#i()},W=()=>{if(this.#R=!1,this.classList.remove("fig-canvas-control-ring-active"),Q.style.pointerEvents="",document.body.style.cursor=j,this.#L)this.#L.removeAttribute("show");this.#v(),this.#u(),window.removeEventListener("pointermove",Y),window.removeEventListener("pointerup",W)};window.addEventListener("pointermove",Y),window.addEventListener("pointerup",W)};Q.addEventListener("pointerdown",$),this._radiusDragCleanup=()=>Q.removeEventListener("pointerdown",$)}#J0(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}}customElements.define("fig-canvas-control",p0);class u0 extends HTMLElement{static observedAttributes=["color","selected","disabled","drag","drag-surface","drag-axes","drag-snapping","value","type","control","hit-area","hit-area-mode"];#$=!1;#Q=!1;#J=null;#j=!1;#_=null;#Z=null;get#K(){return this.getAttribute("control")||null}get#X(){return this.#K==="add"||this.#K==="remove"}get#q(){return this.classList.contains("fig-input-gradient-ghost")}get#W(){const Q=this.getAttribute("drag");return Q!==null&&Q!=="false"}get#Y(){const Q=(this.getAttribute("drag-axes")||"x,y").toLowerCase();return{x:Q.includes("x"),y:Q.includes("y")}}get#U(){const Q=this.getAttribute("drag-snapping");if(Q===null)return"false";const $=Q.trim().toLowerCase();if($==="modifier")return"modifier";if($===""||$==="true")return"true";return"false"}#N(Q){const $=this.#U;if($==="true")return!0;if($==="modifier")return!!Q;return!1}#B(Q){if(Q<0.1)return 0;if(Q>0.9)return 1;if(Q>0.4&&Q<0.6)return 0.5;return Q}#L(Q,$){if(Math.abs(Q-$)<0.1){const Z=(Q+$)/2;return{x:Z,y:Z}}if(Math.abs(1-Q-$)<0.1)return{x:Q,y:1-Q};return{x:Q,y:$}}#G(){const Q=this.getAttribute("drag-surface");if(!Q||Q==="parent")return this.parentElement;return this.closest(Q)}get value(){const Q=this.#G();if(!Q)return"0% 0%";const $=Q.getBoundingClientRect(),J=this.offsetWidth/2,Z=this.offsetHeight/2,j=parseFloat(this.style.left)||0,_=parseFloat(this.style.top)||0,q=$.width>0?(j+J)/$.width*100:0,K=$.height>0?(_+Z)/$.height*100:0;return`${Math.round(q)}% ${Math.round(K)}%`}set value(Q){this.setAttribute("value",Q??"0% 0%")}#O(Q){const $=Q==null?"":String(Q).trim();if(!$)return{xPct:0,yPct:0};const J=$.split(/[\s,]+/).filter(Boolean),Z=(q)=>{if(!q)return 0;const K=q.includes("px"),X=q.includes("%"),Y=parseFloat(q.replace(/[%px]/g,""));if(!Number.isFinite(Y))return 0;if(K)return{px:Y};if(X||Math.abs(Y)>1)return Math.max(0,Math.min(100,Y));return Math.max(0,Math.min(100,Y*100))},j=Z(J[0]),_=Z(J[1]??J[0]);return{xToken:j,yToken:_}}#M(Q){const $=this.#G();if(!$)return;const{xToken:J,yToken:Z}=this.#O(Q),j=$.getBoundingClientRect(),_=this.offsetWidth/2,q=this.offsetHeight/2,K=(Y,W,N)=>{if(Y&&typeof Y==="object"&&"px"in Y)return Math.max(-N,Math.min(W-N,Y.px-N));const z=(typeof Y==="number"?Y:0)/100*W;return Math.max(-N,Math.min(W-N,z-N))},X=this.#Y;if(X.x)this.style.left=`${Math.round(K(J,j.width,_))}px`;if(X.y)this.style.top=`${Math.round(K(Z,j.height,q))}px`}#R(){this.#j=!0,this.setAttribute("value",this.value),this.#j=!1}get#z(){return this.getAttribute("hit-area-mode")||"handle"}#E(){const Q=this.getAttribute("hit-area");if(!Q)return null;const $=Q.trim().split(/\s+/);let J=0,Z=0,j=!1;const _=[];for(let q of $){if(q==="circle"){j=!0;continue}const K=parseFloat(q);if(Number.isFinite(K))_.push(K)}if(_.length>=2)J=_[0],Z=_[1];else if(_.length===1)J=_[0],Z=_[0];else return null;return{vPad:J,hPad:Z,circle:j}}#A(){const Q=this.#E();if(!Q){if(this.#Z)this.#Z.remove(),this.#Z=null;this.style.removeProperty("--fig-handle-hit-area-size");return}if(!this.#Z){const $=document.createElement("div");$.classList.add("fig-handle-hit-area"),$.addEventListener("pointerdown",(J)=>this.#f(J)),this.prepend($),this.#Z=$}if(this.style.setProperty("--fig-handle-hit-area-size",String(Q.hPad*2)),Q.circle)this.#Z.style.borderRadius="50%";else this.#Z.style.borderRadius="inherit"}#f(Q){if(this.hasAttribute("disabled"))return;if(Q.target!==this.#Z)return;if(this.#z==="delegate")Q.preventDefault(),Q.stopPropagation(),this.dispatchEvent(new CustomEvent("hitareadown",{bubbles:!0,detail:{originalEvent:Q}}));else this.#k(Q)}connectedCallback(){this.#C(),this.#A(),this.addEventListener("click",this.#T),document.addEventListener("pointerdown",this.#F),document.addEventListener("keydown",this.#P);const Q=this.getAttribute("value");if(Q)this.#M(Q);if(this.#X&&!this.#q)this.#H()}disconnectedCallback(){if(this.#D(),this.#y(),this.#Z)this.#Z.remove(),this.#Z=null;this.removeEventListener("click",this.#T),document.removeEventListener("pointerdown",this.#F),document.removeEventListener("keydown",this.#P)}select(){if(this.hasAttribute("disabled"))return;if(this.setAttribute("selected",""),this.getAttribute("type")==="color"&&!this.#$)this.#H()}deselect(){this.removeAttribute("selected"),this.#y()}#T=(Q)=>{if(this.#X)return;if(this.#Q){this.#Q=!1;return}this.select()};#F=(Q)=>{if(this.#X)return;if(this.contains(Q.target))return;if(this.#_&&Q.target.closest?.("dialog, [popover]"))return;this.deselect()};#P=(Q)=>{if(Q.key!=="Enter")return;if(!this.hasAttribute("selected"))return;if(this.getAttribute("type")!=="color")return;if(this.#_)return;Q.preventDefault(),this.#H()};attributeChangedCallback(Q,$,J){if(Q==="color"){if(!J||J==="false"||J==="true")this.style.removeProperty("--fill");else this.style.setProperty("--fill",J);if(this.#_&&J)this.#_.setAttribute("value",J)}if(Q==="drag")this.#C();if(Q==="hit-area")this.#A();if(Q==="value"&&!this.#j&&!this.#$)this.#M(J);if(Q==="control"&&!this.#q)if(this.#X)this.#y(),this.#H();else this.#y()}#C(){if(this.#W&&!this.#J)this.#J=(Q)=>this.#k(Q),this.addEventListener("pointerdown",this.#J);else if(!this.#W&&this.#J)this.#D()}#D(){if(this.#J)this.removeEventListener("pointerdown",this.#J),this.#J=null;this.#$=!1}#k(Q){if(!this.#W||this.hasAttribute("disabled"))return;Q.preventDefault();const $=this.#G();if(!$)return;this.#$=!0;const J=this.#Y,Z=this.offsetWidth,j=this.offsetHeight;let _=null;const q=this.getBoundingClientRect(),K=q.left+q.width/2,X=q.top+q.height/2,Y=Q.clientX-K,W=Q.clientY-X,N=(O,L,B=!1)=>{const M=$.getBoundingClientRect();_=M;const F=parseFloat(this.style.left)||0,E=parseFloat(this.style.top)||0,k=O-Y-M.left-Z/2,T=L-W-M.top-j/2,x=Math.max(-Z/2,Math.min(M.width-Z/2,k)),f=Math.max(-j/2,Math.min(M.height-j/2,T));let H=M.width>0?((J.x?x:F)+Z/2)/M.width:0.5,b=M.height>0?((J.y?f:E)+j/2)/M.height:0.5;if(this.#N(B)){if(J.x)H=this.#B(H);if(J.y)b=this.#B(b);if(J.x&&J.y){const S=this.#L(H,b);H=S.x,b=S.y}}if(J.x){const S=H*M.width-Z/2;this.style.left=`${Math.round(Math.max(-Z/2,Math.min(M.width-Z/2,S)))}px`}if(J.y){const S=b*M.height-j/2;this.style.top=`${Math.round(Math.max(-j/2,Math.min(M.height-j/2,S)))}px`}},U=(O)=>{if(!this.#$)return;if(!this.#Q){if(this.classList.add("dragging"),this.style.cursor="grabbing",!this.hasAttribute("selected"))this.select()}this.#Q=!0,N(O.clientX,O.clientY,O.shiftKey),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{...this.#m(_),shiftKey:O.shiftKey}}))},z=(O)=>{if(this.#$=!1,this.style.cursor="",this.classList.remove("dragging"),window.removeEventListener("pointermove",U),window.removeEventListener("pointerup",z),this.#Q){N(O.clientX,O.clientY,O.shiftKey),this.#R(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.#m(_)}));const L=(B)=>{B.stopPropagation(),B.preventDefault()};this.addEventListener("click",L,{capture:!0,once:!0})}else this.#R();this.#Q=!1};window.addEventListener("pointermove",U),window.addEventListener("pointerup",z)}showColorTip(){if(this.#_){this.#_.style.display="";return}this.#H()}hideColorTip(){if(!this.#_)return;this.#_.style.display="none"}#H(){if(this.#_)return;const Q=document.createElement("fig-color-tip");if(this.#X)Q.setAttribute("control",this.#K);else Q.setAttribute("value",this.getAttribute("color")||"#D9D9D9"),Q.setAttribute("alpha","true"),Q.setAttribute("selected","");Q.addEventListener("input",this.#x),Q.addEventListener("change",this.#S),Q.addEventListener("add",this.#b),Q.addEventListener("remove",this.#b),this.appendChild(Q),this.#_=Q}#y(){if(!this.#_)return;this.#_.removeEventListener("input",this.#x),this.#_.removeEventListener("change",this.#S),this.#_.removeEventListener("add",this.#b),this.#_.removeEventListener("remove",this.#b),this.#_.remove(),this.#_=null}#x=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",Q.detail.color)};#S=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",Q.detail.color)};#b=(Q)=>{Q.stopPropagation(),this.dispatchEvent(new CustomEvent(Q.type,{bubbles:!0,composed:!0}))};#m(Q){const $=this.offsetWidth/2,J=this.offsetHeight/2,Z=parseFloat(this.style.left)||0,j=parseFloat(this.style.top)||0,_=Q.width>0?(Z+$)/Q.width:0,q=Q.height>0?(j+J)/Q.height:0;return{x:Z,y:j,px:_,py:q}}}customElements.define("fig-handle",u0);
+    `,this.#K0(Q)}#K0(Q){const $=Q.querySelector(".fig-fill-picker-webcam-video"),J=Q.querySelector(".fig-fill-picker-webcam-status"),Z=Q.querySelector(".fig-fill-picker-webcam-capture"),j=Q.querySelector(".fig-fill-picker-camera-select"),q=async(K=null)=>{try{const _={video:K?{deviceId:{exact:K}}:!0};if(this.#U.stream)this.#U.stream.getTracks().forEach((W)=>W.stop());this.#U.stream=await navigator.mediaDevices.getUserMedia(_),$.srcObject=this.#U.stream,$.style.display="block",J.style.display="none";const Y=(await navigator.mediaDevices.enumerateDevices()).filter((W)=>W.kind==="videoinput");if(Y.length>1)j.style.display="block",j.innerHTML=Y.map((W,N)=>`<option value="${W.deviceId}">${W.label||`Camera ${N+1}`}</option>`).join("")}catch(_){console.error("Webcam error:",_.name,_.message);let X="Camera access denied";if(_.name==="NotAllowedError")X="Camera permission denied";else if(_.name==="NotFoundError")X="No camera found";else if(_.name==="NotReadableError")X="Camera in use by another app";else if(_.name==="OverconstrainedError")X="Camera constraints not supported";else if(!window.isSecureContext)X="Camera requires secure context";J.innerHTML=`<span>${X}</span>`,J.style.display="flex",$.style.display="none"}};this.#R=new MutationObserver(()=>{if(Q.style.display!=="none"&&!this.#U.stream)q()}),this.#R.observe(Q,{attributes:!0,attributeFilter:["style"]}),j.addEventListener("change",(K)=>{q(K.target.value)}),Z.addEventListener("click",()=>{if(!this.#U.stream)return;const K=document.createElement("canvas");K.width=$.videoWidth,K.height=$.videoHeight,K.getContext("2d").drawImage($,0,0),this.#U.snapshot=K.toDataURL("image/png"),this.#Y.url=this.#U.snapshot,this.#q="image",this.#F(),this.#y(),this.#T("image");const _=this.#J.querySelector("fig-tabs");_.value="image"})}#Z0(Q){const $=Q.h/360,J=Q.s/100,Z=Q.v/100;let j,q,K;const _=Math.floor($*6),X=$*6-_,Y=Z*(1-J),W=Z*(1-X*J),N=Z*(1-(1-X)*J);switch(_%6){case 0:j=Z,q=N,K=Y;break;case 1:j=W,q=Z,K=Y;break;case 2:j=Y,q=Z,K=N;break;case 3:j=Y,q=W,K=Z;break;case 4:j=N,q=Y,K=Z;break;case 5:j=Z,q=Y,K=W;break}return{r:Math.round(j*255),g:Math.round(q*255),b:Math.round(K*255)}}#_0(Q){const $=Q.r/255,J=Q.g/255,Z=Q.b/255,j=Math.max($,J,Z),q=Math.min($,J,Z),K=j-q;let _=0;const X=j===0?0:K/j,Y=j;if(j!==q){switch(j){case $:_=(J-Z)/K+(J<Z?6:0);break;case J:_=(Z-$)/K+2;break;case Z:_=($-J)/K+4;break}_/=6}return{h:_*360,s:X*100,v:Y*100,a:1}}#e(Q){if(!Q||typeof Q.h!=="number"||typeof Q.s!=="number"||typeof Q.v!=="number")return"#D9D9D9";const $=this.#Z0(Q),J=(Z)=>{return(isNaN(Z)?217:Math.max(0,Math.min(255,Math.round(Z)))).toString(16).padStart(2,"0")};return`#${J($.r)}${J($.g)}${J($.b)}`}#X0(Q){const $=parseInt(Q.slice(1,3),16),J=parseInt(Q.slice(3,5),16),Z=parseInt(Q.slice(5,7),16);return this.#_0({r:$,g:J,b:Z})}#N0(Q,$=1){const J=parseInt(Q.slice(1,3),16),Z=parseInt(Q.slice(3,5),16),j=parseInt(Q.slice(5,7),16);return`rgba(${J}, ${Z}, ${j}, ${$})`}#U0(Q,$=1){const J=+(parseInt(Q.slice(1,3),16)/255).toFixed(4),Z=+(parseInt(Q.slice(3,5),16)/255).toFixed(4),j=+(parseInt(Q.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${J} ${Z} ${j} / ${$})`}#L0(Q){const $=Q.r/255,J=Q.g/255,Z=Q.b/255,j=Math.max($,J,Z),q=Math.min($,J,Z);let K,_;const X=(j+q)/2;if(j===q)K=_=0;else{const Y=j-q;switch(_=X>0.5?Y/(2-j-q):Y/(j+q),j){case $:K=((J-Z)/Y+(J<Z?6:0))/6;break;case J:K=((Z-$)/Y+2)/6;break;case Z:K=(($-J)/Y+4)/6;break}}return{h:K*360,s:_*100,l:X*100}}#G0(Q){const $=Q.h/360,J=Q.s/100,Z=Q.l/100;let j,q,K;if(J===0)j=q=K=Z;else{const _=(W,N,U)=>{if(U<0)U+=1;if(U>1)U-=1;if(U<0.16666666666666666)return W+(N-W)*6*U;if(U<0.5)return N;if(U<0.6666666666666666)return W+(N-W)*(0.6666666666666666-U)*6;return W},X=Z<0.5?Z*(1+J):Z+J-Z*J,Y=2*Z-X;j=_(Y,X,$+0.3333333333333333),q=_(Y,X,$),K=_(Y,X,$-0.3333333333333333)}return{r:Math.round(j*255),g:Math.round(q*255),b:Math.round(K*255)}}#Y0(Q){const $=(N)=>{return N=N/255,N<=0.04045?N/12.92:Math.pow((N+0.055)/1.055,2.4)},J=$(Q.r),Z=$(Q.g),j=$(Q.b),q=0.4122214708*J+0.5363325363*Z+0.0514459929*j,K=0.2119034982*J+0.6806995451*Z+0.1073969566*j,_=0.0883024619*J+0.2817188376*Z+0.6299787005*j,X=Math.cbrt(q),Y=Math.cbrt(K),W=Math.cbrt(_);return{l:0.2104542553*X+0.793617785*Y-0.0040720468*W,a:1.9779984951*X-2.428592205*Y+0.4505937099*W,b:0.0259040371*X+0.7827717662*Y-0.808675766*W}}#B0(Q){const $=this.#Y0(Q);return{l:$.l,c:Math.sqrt($.a*$.a+$.b*$.b),h:(Math.atan2($.b,$.a)*180/Math.PI+360)%360}}#W0(Q){const $=Q.l+0.3963377774*Q.a+0.2158037573*Q.b,J=Q.l-0.1055613458*Q.a-0.0638541728*Q.b,Z=Q.l-0.0894841775*Q.a-1.291485548*Q.b,j=$*$*$,q=J*J*J,K=Z*Z*Z,_=(X)=>{const Y=X<=0.0031308?12.92*X:1.055*Math.pow(X,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,Y))*255)};return{r:_(4.0767416621*j-3.3077115913*q+0.2309699292*K),g:_(-1.2684380046*j+2.6097574011*q-0.3413193965*K),b:_(-0.0041960863*j-0.7034186147*q+1.707614701*K)}}#O0(Q){const $=Q.h*Math.PI/180;return this.#W0({l:Q.l,a:Q.c*Math.cos($),b:Q.c*Math.sin($)})}#y(){this.#F(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#t(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){const Q={type:this.#q,colorSpace:this.#Z};switch(this.#q){case"solid":return{...Q,color:this.#e(this.#_),alpha:this.#_.a,hsv:{...this.#_}};case"gradient":return{...Q,gradient:o(this.#K),css:this.#v()};case"image":return{...Q,image:{...this.#Y}};case"video":return{...Q,video:{...this.#N}};case"webcam":return{...Q,image:{url:this.#U.snapshot,scaleMode:"fill",scale:50}};default:return{...Q,...this.#L[this.#q]}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,J){if($===J)return;switch(Q){case"value":if(this.#k(),this.#F(),this.#J){if(!this.#E){if(this.#f(),this.#i(),this.#O)this.#O.setAttribute("value",this.#_.h);if(this.#M)this.#M.setAttribute("value",this.#_.a*100),this.#M.setAttribute("color",this.#e(this.#_))}}break;case"disabled":break}}}customElements.define("fig-fill-picker",$0);class r0 extends HTMLElement{#$=null;#Q=null;#J=this.#B.bind(this);#j=this.#O.bind(this);static get observedAttributes(){return["value","selected","disabled","alpha","control"]}get#q(){return this.getAttribute("control")||"color"}connectedCallback(){this.#K(),this.#L()}disconnectedCallback(){this.#Z(),this.removeEventListener("click",this.#Y)}#Z(){if(!this.#$)return;this.#$.removeEventListener("input",this.#J),this.#$.removeEventListener("change",this.#j)}#_=()=>{requestAnimationFrame(()=>{const Q=document.querySelector(".fig-fill-picker-dialog[open]");if(!Q)return;Q.addEventListener("close",()=>this.removeAttribute("selected"),{once:!0})})};get#X(){const Q=this.getAttribute("alpha");return Q===null||Q!=="false"}#K(){const Q=this.#q;if(Q==="add"||Q==="remove"){const K=Q==="add"?"var(--icon-add)":"var(--icon-minus)";this.innerHTML=`<fig-button icon variant="ghost"><span class="fig-mask-icon" style="--icon: ${K}"></span></fig-button>`,this.#$=null,this.#Q=null,this.addEventListener("click",this.#Y);return}this.removeEventListener("click",this.#Y);const $=(this.getAttribute("value")||"").trim(),J=this.#W($),Z=this.#U($),j=this.#X?"":'alpha="false"',q=Z<1?JSON.stringify({type:"solid",color:J,opacity:Math.round(Z*100)}):JSON.stringify({type:"solid",color:J});this.innerHTML=`
+      <fig-fill-picker mode="solid" ${j} value='${q}'>
+        <fig-chit background="${J}"></fig-chit>
+      </fig-fill-picker>`,this.#$=this.querySelector("fig-fill-picker"),this.#Q=this.querySelector("fig-chit"),this.#Z(),this.#$?.addEventListener("input",this.#J),this.#$?.addEventListener("change",this.#j),this.#Q?.addEventListener("click",()=>{this.setAttribute("selected",""),this.#_()})}#Y=()=>{const Q=this.#q;this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,composed:!0}))};#N(Q){if(!Q)return"#D9D9D9";const $=Q.replace("#","").trim();if($.length===3||$.length===4){const[J,Z,j]=$;return`#${J}${J}${Z}${Z}${j}${j}`.toUpperCase()}if($.length===6||$.length===8)return`#${$.slice(0,6)}`.toUpperCase();return"#D9D9D9"}#U(Q){if(!Q)return 1;const $=String(Q).trim();if($.startsWith("#")&&$.length===9)return parseInt($.slice(7,9),16)/255;const J=$.match(/rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/i);if(J)return parseFloat(J[1]);return 1}#W(Q){if(!Q)return"#D9D9D9";const $=String(Q).trim();if($.startsWith("{"))try{const J=JSON.parse($);if(J?.color)return this.#W(J.color)}catch{}if($.startsWith("#"))return this.#N($);try{const{ctx:J}=O0(1,1);J.fillStyle="#000000",J.fillStyle=$;const Z=J.fillStyle;if(Z.startsWith("#"))return this.#N(Z);const j=Z.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(j){const q=(K)=>Math.max(0,Math.min(255,Number(K))).toString(16).padStart(2,"0");return`#${q(j[1])}${q(j[2])}${q(j[3])}`.toUpperCase()}}catch{}return"#D9D9D9"}#L(){const Q=this.getAttribute("value"),$=this.#W(Q),J=this.#U(Q);if(Q!==$&&J>=1){this.setAttribute("value",$);return}if(this.#$){const Z=J<1?{type:"solid",color:$,opacity:Math.round(J*100)}:{type:"solid",color:$};if(this.#$.setAttribute("value",JSON.stringify(Z)),this.#X)this.#$.removeAttribute("alpha");else this.#$.setAttribute("alpha","false");if(this.hasAttribute("disabled"))this.#$.setAttribute("disabled","");else this.#$.removeAttribute("disabled")}if(this.#Q)if(this.#Q.setAttribute("background",$),this.hasAttribute("disabled"))this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled")}#G(Q,$){const J=this.#W(Q?.color),Z=this.#W(this.getAttribute("value"));if(J!==Z)this.setAttribute("value",J);else this.#L();const j={color:this.value};if(this.#X){if(Q?.opacity!==void 0)j.opacity=Q.opacity;else if(Q?.alpha!==void 0)j.opacity=Math.round(Q.alpha*100)}this.dispatchEvent(new CustomEvent($,{bubbles:!0,cancelable:!0,composed:!0,detail:j}))}#B(Q){Q.stopPropagation(),this.#G(Q.detail,"input")}#O(Q){Q.stopPropagation(),this.#G(Q.detail,"change")}attributeChangedCallback(Q,$,J){if($===J)return;if(!this.isConnected)return;switch(Q){case"control":this.#K();break;case"value":case"selected":case"disabled":this.#L();break}}get value(){return this.#W(this.getAttribute("value"))}set value(Q){if(Q===null||Q===void 0||Q===""){this.removeAttribute("value");return}this.setAttribute("value",this.#W(Q))}get selected(){return this.hasAttribute("selected")}set selected(Q){this.toggleAttribute("selected",Boolean(Q))}get disabled(){return this.hasAttribute("disabled")}set disabled(Q){this.toggleAttribute("disabled",Boolean(Q))}}customElements.define("fig-color-tip",r0);class i0 extends HTMLElement{static get observedAttributes(){return["selected","disabled"]}connectedCallback(){if(this.setAttribute("role","option"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","0");if(this.setAttribute("aria-selected",this.hasAttribute("selected")?"true":"false"),this.hasAttribute("disabled"))this.setAttribute("aria-disabled","true")}attributeChangedCallback(Q){if(Q==="selected")this.setAttribute("aria-selected",this.hasAttribute("selected")?"true":"false");if(Q==="disabled")if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else this.removeAttribute("aria-disabled"),this.setAttribute("tabindex","0")}}customElements.define("fig-choice",i0);class o0 extends HTMLElement{#$=null;#Q=this.#B.bind(this);#J=this.#O.bind(this);#j=this.#E.bind(this);#q=null;#Z=null;#_=null;#X=null;#K=null;constructor(){super()}static get observedAttributes(){return["value","disabled","choice-element","drag","overflow","loop","padding"]}get#Y(){return this.getAttribute("overflow")==="scrollbar"?"scrollbar":"buttons"}get#N(){const Q=this.getAttribute("drag");return Q===null||Q!=="false"}get#U(){return this.getAttribute("choice-element")||"fig-choice"}get choices(){return Array.from(this.querySelectorAll(this.#U))}get selectedChoice(){return this.#$}set selectedChoice(Q){if(Q&&!this.contains(Q))return;const $=this.choices;for(let Z of $){const j=Z===Q,q=Z.hasAttribute("selected");if(j&&!q)Z.setAttribute("selected","");else if(!j&&q)Z.removeAttribute("selected")}this.#$=Q;const J=Q?.getAttribute("value")??"";if(this.getAttribute("value")!==J){if(J)this.setAttribute("value",J)}this.#S(Q)}get value(){return this.#$?.getAttribute("value")??""}set value(Q){if(Q===null||Q===void 0||Q==="")return;this.setAttribute("value",String(Q))}connectedCallback(){this.setAttribute("role","listbox"),this.addEventListener("click",this.#Q),this.addEventListener("keydown",this.#J),this.addEventListener("scroll",this.#j),this.#H(),this.#A(),this.#D(),this.#z(),requestAnimationFrame(()=>{this.#W(),this.#E()})}disconnectedCallback(){this.removeEventListener("click",this.#Q),this.removeEventListener("keydown",this.#J),this.removeEventListener("scroll",this.#j),this.#R(),this.#q?.disconnect(),this.#q=null,this.#Z?.disconnect(),this.#Z=null,this.#k()}attributeChangedCallback(Q,$,J){if(Q==="value"&&J!==$&&J)this.#L(J);if(Q==="disabled"){const Z=J!==null&&J!=="false",j=this.choices;for(let q of j)if(Z)q.setAttribute("aria-disabled","true"),q.setAttribute("tabindex","-1");else q.removeAttribute("aria-disabled"),q.setAttribute("tabindex","0")}if(Q==="choice-element")requestAnimationFrame(()=>this.#W());if(Q==="drag")if(this.#N)this.#A();else this.#R();if(Q==="overflow")this.#H()}#W(){const Q=this.choices;if(!Q.length){this.#$=null;return}const $=this.getAttribute("value");if($&&this.#L($))return;const J=Q.find((Z)=>Z.hasAttribute("selected"));if(J){this.selectedChoice=J;return}this.selectedChoice=Q[0]}#L(Q){const $=this.choices;for(let J of $)if(J.getAttribute("value")===Q)return this.selectedChoice=J,!0;return!1}#G(Q){const $=this.#U;let J=Q;while(J&&J!==this){if(J.matches($))return J;J=J.parentElement}return null}#B(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=this.#G(Q.target);if(!$)return;if($.hasAttribute("disabled")&&$.getAttribute("disabled")!=="false")return;this.selectedChoice=$,this.#M()}#O(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=this.choices.filter((q)=>!q.hasAttribute("disabled")||q.getAttribute("disabled")==="false");if(!$.length)return;const J=$.indexOf(this.#$);let Z=J;const j=this.hasAttribute("loop");switch(Q.key){case"ArrowDown":case"ArrowRight":if(Q.preventDefault(),J<$.length-1)Z=J+1;else if(j)Z=0;break;case"ArrowUp":case"ArrowLeft":if(Q.preventDefault(),J>0)Z=J-1;else if(j)Z=$.length-1;break;case"Home":Q.preventDefault(),Z=0;break;case"End":Q.preventDefault(),Z=$.length-1;break;case"Enter":case" ":if(Q.preventDefault(),document.activeElement?.matches(this.#U)){const q=this.#G(document.activeElement);if(q&&q!==this.#$)this.selectedChoice=q,this.#M()}return;default:return}if(Z!==J&&$[Z])this.selectedChoice=$[Z],$[Z].focus(),this.#M()}#M(){const Q=this.value;this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#E(){if(this.#Y==="scrollbar")return;const Q=this.getAttribute("layout")==="horizontal",$=2;if(Q){const J=this.scrollLeft<=$,Z=this.scrollLeft+this.clientWidth>=this.scrollWidth-$;this.classList.toggle("overflow-start",!J),this.classList.toggle("overflow-end",!Z)}else{const J=this.scrollTop<=$,Z=this.scrollTop+this.clientHeight>=this.scrollHeight-$;this.classList.toggle("overflow-start",!J),this.classList.toggle("overflow-end",!Z)}}#z(){this.#Z?.disconnect(),this.#Z=new ResizeObserver(()=>{this.#E()}),this.#Z.observe(this)}#A(){if(this.#K?.bound)return;if(!this.#N)return;const Q=(q)=>{if(q.button!==0)return;if(!(this.getAttribute("layout")==="horizontal"?this.scrollWidth>this.clientWidth:this.scrollHeight>this.clientHeight))return;this.#K.active=!0,this.#K.didDrag=!1,this.#K.startX=q.clientX,this.#K.startY=q.clientY,this.#K.scrollLeft=this.scrollLeft,this.#K.scrollTop=this.scrollTop,this.style.cursor="grab",this.style.userSelect="none"},$=(q)=>{if(!this.#K.active)return;const K=this.getAttribute("layout")==="horizontal",_=q.clientX-this.#K.startX,X=q.clientY-this.#K.startY;if(!this.#K.didDrag&&Math.abs(K?_:X)>3)this.#K.didDrag=!0,this.style.cursor="grabbing",this.setPointerCapture(q.pointerId);if(!this.#K.didDrag)return;if(K)this.scrollLeft=this.#K.scrollLeft-_;else this.scrollTop=this.#K.scrollTop-X},J=(q)=>{if(!this.#K.active)return;const K=this.#K.didDrag;if(this.#K.active=!1,this.#K.didDrag=!1,this.style.cursor="",this.style.userSelect="",q.pointerId!==void 0)try{this.releasePointerCapture(q.pointerId)}catch{}if(K)q.preventDefault(),q.stopPropagation()},Z=(q)=>{if(this.#K?.suppressClick)q.stopPropagation(),q.preventDefault(),this.#K.suppressClick=!1},j=(q)=>{if(this.#K?.didDrag)this.#K.suppressClick=!0,setTimeout(()=>{if(this.#K)this.#K.suppressClick=!1},0)};this.#K={active:!1,didDrag:!1,suppressClick:!1,startX:0,startY:0,scrollLeft:0,scrollTop:0,bound:!0,onPointerDown:Q,onPointerMove:$,onPointerUp:J,onClick:Z,onPointerUpCapture:j},this.addEventListener("pointerdown",Q),window.addEventListener("pointermove",$),window.addEventListener("pointerup",J),this.addEventListener("pointerup",j,!0),this.addEventListener("click",Z,!0)}#R(){if(!this.#K?.bound)return;this.removeEventListener("pointerdown",this.#K.onPointerDown),window.removeEventListener("pointermove",this.#K.onPointerMove),window.removeEventListener("pointerup",this.#K.onPointerUp),this.removeEventListener("pointerup",this.#K.onPointerUpCapture,!0),this.removeEventListener("click",this.#K.onClick,!0),this.style.cursor="",this.style.userSelect="",this.#K=null}#H(){if(this.#Y==="scrollbar")this.#k();else this.#F()}#k(){this.#_?.remove(),this.#X?.remove(),this.#_=null,this.#X=null,this.classList.remove("overflow-start","overflow-end")}#F(){if(this.#_)return;this.#_=document.createElement("button"),this.#_.className="fig-chooser-nav-start",this.#_.setAttribute("tabindex","-1"),this.#_.setAttribute("aria-label","Scroll back"),this.#X=document.createElement("button"),this.#X.className="fig-chooser-nav-end",this.#X.setAttribute("tabindex","-1"),this.#X.setAttribute("aria-label","Scroll forward"),this.#_.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#I(-1)}),this.#X.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#I(1)}),this.prepend(this.#_),this.append(this.#X)}#I(Q){const $=this.getAttribute("layout")==="horizontal",Z=($?this.clientWidth:this.clientHeight)*0.8*Q;this.scrollBy({[$?"left":"top"]:Z,behavior:"smooth"})}#S(Q){if(!Q)return;requestAnimationFrame(()=>{const $=this.scrollHeight>this.clientHeight,J=this.scrollWidth>this.clientWidth;if(!J&&!$)return;const Z={behavior:"smooth"};if($){const j=Q.offsetTop-this.clientHeight/2+Q.offsetHeight/2;Z.top=j}if(J){const j=Q.offsetLeft-this.clientWidth/2+Q.offsetWidth/2;Z.left=j}this.scrollTo(Z)})}#D(){this.#q?.disconnect(),this.#q=new MutationObserver(()=>{const Q=this.choices;if(this.#$&&!Q.includes(this.#$))this.#$=null,this.#W();else if(!this.#$&&Q.length)this.#W()}),this.#q.observe(this,{childList:!0,subtree:!0})}}customElements.define("fig-chooser",o0);class l0 extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#$=50;#Q=50;#J=75;#j=75;#q=0;#Z=!1;#_=0;#X=null;#K=null;#Y=null;#N=null;#U=null;#W=null;#L=null;#G=null;#B=null;#O=!1;#M=!1;#E=!1;#z=!1;#A="";get#R(){return this.getAttribute("type")||"point"}get#H(){return this.#R==="point-radius"||this.#R==="point-radius-angle"}get#k(){return this.#R==="point-radius-angle"}get#F(){return this.#R==="point-point"}get#I(){return this.#R==="point-radius-angle"||this.#R==="point-point"}get#S(){const Q=this.getAttribute("tooltips");return Q===null||Q!=="false"}get#D(){const Q=this.getAttribute("snapping");if(Q===null)return"false";const $=Q.trim().toLowerCase();if($==="modifier")return"modifier";if($===""||$==="true")return"true";return"false"}#T(Q){const $=this.#D;if($==="true")return!0;if($==="modifier")return!!Q;return!1}get#P(){const Q=this.getAttribute("name");if(Q)return Q.split(",")[0].trim();return`${Math.round(this.#$)}%, ${Math.round(this.#Q)}%`}get#w(){const Q=this.getAttribute("name");if(Q){const $=Q.split(",");if($.length>1)return $[1].trim()}return`${Math.round(this.#J)}%, ${Math.round(this.#j)}%`}get#C(){return this.getAttribute("drag-surface")||"parent"}get#f(){const Q=this.#C;if(Q==="parent")return this.parentElement;return this.closest(Q)}get#x(){const Q=this.#C;if(Q==="parent"){const $=this.parentElement;if($)return $.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return Q}#V(Q){if(this.#Z)return this.#q/100*Q;return this.#q}#m(){if(this.#Z)return`Radius ${Math.round(this.#q)}%`;return`Radius ${Math.round(this.#q)}`}connectedCallback(){this.#o(),this.#l()}disconnectedCallback(){this.#q0()}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="value"&&!this.#O&&!this.#M&&!this.#E&&!this.#z)if(this.#o(),this.#X)this.#v();else this.#l();if(Q==="type")this.#o(),this.#l();if(Q==="color"&&this.#X)if(J)this.#X.setAttribute("color",J);else this.#X.removeAttribute("color");if(Q==="disabled")this.#l();if(Q==="tooltips")this.#l();if(Q==="snapping"&&this.#X){if(this.#X.setAttribute("drag-snapping",J||"false"),this.#K)this.#K.setAttribute("drag-snapping",J||"false")}if(Q==="name"){if(this.#W)this.#W.setAttribute("text",this.#P);if(this.#L)this.#L.setAttribute("text",this.#w)}}#o(){const Q=this.getAttribute("value");if(!Q)return;try{const $=JSON.parse(Q);if(typeof $.x==="number")this.#$=$.x;if(typeof $.y==="number")this.#Q=$.y;if($.radius!==void 0){const J=String($.radius);if(J.endsWith("%"))this.#Z=!0,this.#q=parseFloat(J);else this.#Z=!1,this.#q=parseFloat(J);if(!Number.isFinite(this.#q))this.#q=0}if(typeof $.angle==="number")this.#_=$.angle;if(typeof $.x2==="number")this.#J=$.x2;if(typeof $.y2==="number")this.#j=$.y2}catch{}}get value(){const Q={x:this.#$,y:this.#Q};if(this.#R==="color"){const $=this.getAttribute("color")||this.#X?.getAttribute("color");if($)Q.color=$}if(this.#H)Q.radius=this.#Z?`${this.#q}%`:this.#q;if(this.#k)Q.angle=this.#_;if(this.#F)Q.x2=this.#J,Q.y2=this.#j;return Q}set value(Q){if(typeof Q==="object")this.setAttribute("value",JSON.stringify(Q));else if(typeof Q==="string")this.setAttribute("value",Q)}#l(){this.innerHTML="",this.#X=null,this.#K=null,this.#Y=null,this.#N=null,this.#U=null,this.#W=null,this.#L=null,this.#G=null,this.#B=null;const Q=this.hasAttribute("disabled"),$=this.#R,J=this.#S,Z=this.#x,j=document.createElement("fig-handle");if(j.setAttribute("drag","true"),j.setAttribute("drag-surface",Z),j.setAttribute("drag-axes","x,y"),j.setAttribute("drag-snapping",this.#D),j.setAttribute("value",`${this.#$}% ${this.#Q}%`),Q)j.setAttribute("disabled","");if($==="color"){j.setAttribute("type","color");const q=this.getAttribute("color");if(q)j.setAttribute("color",q)}if(this.#F)j.setAttribute("hit-area","12 circle"),j.setAttribute("hit-area-mode","delegate");if(this.#X=j,this.#H)this.#i();if(this.#I)this.#j0();if(J){const q=document.createElement("fig-tooltip");q.setAttribute("action","manual"),q.setAttribute("theme","brand"),q.setAttribute("pointer","false"),q.setAttribute("text",this.#P),q.appendChild(j),this.appendChild(q),this.#W=q}else this.appendChild(j);if(this.#k)this.#a(Q,J,Z);if(this.#F)this.#g(Q,J,Z);this.#d(),requestAnimationFrame(()=>this.#v())}#i(){const $=document.createElementNS("http://www.w3.org/2000/svg","svg");$.classList.add("fig-canvas-control-radius"),$.setAttribute("overflow","visible");const J=document.createElementNS("http://www.w3.org/2000/svg","circle");J.classList.add("fig-canvas-control-radius-hit"),$.appendChild(J);const Z=document.createElementNS("http://www.w3.org/2000/svg","circle");if($.appendChild(Z),this.#N=$,this.#S){const j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","brand"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#m()),j.appendChild($),this.appendChild(j),this.#G=j}else this.appendChild($);this.#J0(J)}#j0(){const $=document.createElementNS("http://www.w3.org/2000/svg","svg");$.classList.add("fig-canvas-control-angle-svg"),$.setAttribute("overflow","visible"),$.style.position="absolute",$.style.pointerEvents="none";const J=document.createElementNS("http://www.w3.org/2000/svg","line");J.classList.add("fig-canvas-control-angle-line"),$.appendChild(J),this.#U=$,this.appendChild($)}#a(Q,$,J){const Z=document.createElement("fig-handle");if(Z.setAttribute("drag","true"),Z.setAttribute("drag-surface",J),Z.setAttribute("drag-axes","x,y"),Z.setAttribute("size","small"),Z.setAttribute("hit-area","12 circle"),Z.setAttribute("hit-area-mode","delegate"),Q)Z.setAttribute("disabled","");if(this.#Y=Z,$){const j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","brand"),j.setAttribute("pointer","false"),j.setAttribute("text",`${Math.round(this.#_)}\xB0`),j.appendChild(Z),this.appendChild(j),this.#B=j}else this.appendChild(Z)}#g(Q,$,J){const Z=document.createElement("fig-handle");if(Z.setAttribute("drag","true"),Z.setAttribute("drag-surface",J),Z.setAttribute("drag-axes","x,y"),Z.setAttribute("drag-snapping",this.#D),Z.setAttribute("hit-area","12 circle"),Z.setAttribute("hit-area-mode","delegate"),Z.setAttribute("value",`${this.#J}% ${this.#j}%`),Q)Z.setAttribute("disabled","");if(this.#K=Z,$){const j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","brand"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#w),j.appendChild(Z),this.appendChild(j),this.#L=j}else this.appendChild(Z)}#h(Q){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(Q)} 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`}#s(Q){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(Q-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`}#r(){if(!this.#Y||!this.#k)return;const Q=this.#Y.querySelector(".fig-handle-hit-area");if(!Q)return;Q.style.cursor=this.#s(this.#_)}#b(){return Math.atan2(this.#j-this.#Q,this.#J-this.#$)*180/Math.PI}#Q0(){if(!this.#F)return;const Q=this.#b(),$=(J,Z)=>{if(!J)return;const j=J.querySelector(".fig-handle-hit-area");if(j)j.style.cursor=this.#s(Z)};$(this.#X,Q+180),$(this.#K,Q)}#n(Q,$,J,Z){const j=Q.offsetWidth/2,q=Q.offsetHeight/2;Q.style.left=`${$/100*Z.width-j}px`,Q.style.top=`${J/100*Z.height-q}px`}#v(){const Q=this.#f;if(!Q||!this.#X)return;const $=Q.getBoundingClientRect();if(this.#n(this.#X,this.#$,this.#Q,$),this.#N){const J=this.#$/100*$.width,Z=this.#Q/100*$.height,j=this.#V($.width),q=this.#N,K=Math.max(j*2,1);q.style.position="absolute",q.style.width=`${K}px`,q.style.height=`${K}px`,q.style.left=`${J-j}px`,q.style.top=`${Z-j}px`,q.setAttribute("viewBox",`0 0 ${K} ${K}`);const _=q.querySelectorAll("circle");for(let X of _)X.setAttribute("cx",String(j)),X.setAttribute("cy",String(j)),X.setAttribute("r",String(Math.max(j-1,0)))}if(this.#U&&this.#I){const J=this.#$/100*$.width,Z=this.#Q/100*$.height;let j,q;if(this.#F)j=this.#J/100*$.width,q=this.#j/100*$.height;else{const X=this.#V($.width),Y=this.#_*Math.PI/180;j=J+X*Math.cos(Y),q=Z+X*Math.sin(Y)}const K=this.#U;K.style.width=`${$.width}px`,K.style.height=`${$.height}px`,K.style.left="0",K.style.top="0",K.setAttribute("viewBox",`0 0 ${$.width} ${$.height}`);const _=K.querySelector("line");if(_)_.setAttribute("x1",String(J)),_.setAttribute("y1",String(Z)),_.setAttribute("x2",String(j)),_.setAttribute("y2",String(q))}if(this.#Y&&this.#k){const J=this.#$/100*$.width,Z=this.#Q/100*$.height,j=this.#V($.width),q=this.#_*Math.PI/180,K=J+j*Math.cos(q),_=Z+j*Math.sin(q),X=$.width>0?K/$.width*100:0,Y=$.height>0?_/$.height*100:0;this.#n(this.#Y,X,Y,$)}if(this.#K&&this.#F)this.#n(this.#K,this.#J,this.#j,$);this.#r(),this.#Q0()}#u(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#p(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#c(){this.setAttribute("value",JSON.stringify(this.value))}#d(){if(!this.#X)return;if(this.#X.addEventListener("input",(Q)=>{if(Q.stopPropagation(),Q.detail?.color){this.setAttribute("color",Q.detail.color),this.#u();return}if(!this.#O&&this.#F)this.#A=document.body.style.cursor;this.#O=!0;const $=Q.detail?.px??this.#$/100,J=Q.detail?.py??this.#Q/100;if(this.#$=Math.round(Math.max(0,Math.min(100,$*100))),this.#Q=Math.round(Math.max(0,Math.min(100,J*100))),this.#W&&this.#R!=="color")this.#W.setAttribute("text",this.#P),this.#W.setAttribute("show","true"),this.#W.showPopup?.();if(this.#v(),this.#F)document.body.style.cursor=this.#h(this.#b());this.#u()}),this.#X.addEventListener("change",(Q)=>{if(Q.stopPropagation(),Q.detail?.color){this.setAttribute("color",Q.detail.color),this.#p();return}const $=Q.detail?.px??this.#$/100,J=Q.detail?.py??this.#Q/100;if(this.#$=Math.round(Math.max(0,Math.min(100,$*100))),this.#Q=Math.round(Math.max(0,Math.min(100,J*100))),this.#W&&this.#R!=="color")this.#W.removeAttribute("show");if(this.#F)document.body.style.cursor=this.#A??"";this.#v(),this.#c(),this.#p(),requestAnimationFrame(()=>{this.#O=!1})}),this.#Y)this.#Y.addEventListener("input",(Q)=>{Q.stopPropagation(),this.#z=!0,this.classList.add("fig-canvas-control-ring-active");const $=this.#f;if(!$)return;const J=$.getBoundingClientRect(),Z=this.#$/100*J.width,j=this.#Q/100*J.height,q=Q.detail?.x??0,K=Q.detail?.y??0,_=this.#Y.offsetWidth/2,X=this.#Y.offsetHeight/2,Y=q+_-Z,W=K+X-j;let N=Math.atan2(W,Y)*180/Math.PI;if(this.#T(Q.detail?.shiftKey))N=Math.round(N/15)*15;this.#_=N;let U=Math.sqrt(Y*Y+W*W);if(this.#T(Q.detail?.shiftKey)){const O=this.#Z?5:10;if(this.#Z){let E=U/J.width*100;E=Math.round(E/O)*O,U=E/100*J.width}else U=Math.round(U/O)*O}if(this.#Z)this.#q=Math.max(0,U/J.width*100);else this.#q=Math.max(0,U);if(this.#B)this.#B.setAttribute("text",`Angle ${Math.round(this.#_)}\xB0`),this.#B.setAttribute("show","true"),this.#B.showPopup?.();this.#v(),this.#u()}),this.#Y.addEventListener("change",(Q)=>{if(Q.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#B)this.#B.removeAttribute("show");this.#v(),this.#c(),this.#p(),requestAnimationFrame(()=>{this.#z=!1})}),this.#Y.addEventListener("hitareadown",(Q)=>{Q.stopPropagation();const $=Q.detail?.originalEvent;if(!$)return;$.preventDefault(),this.#z=!0,this.classList.add("fig-canvas-control-ring-active");const J=this.#f;if(!J)return;if(this.#B)this.#B.setAttribute("show","true"),this.#B.showPopup?.();const Z=document.body.style.cursor;let j=Math.round(this.#_);document.body.style.cursor=this.#s(j);const q=(_)=>{const X=J.getBoundingClientRect(),Y=this.#$/100*X.width,W=this.#Q/100*X.height,N=_.clientX-X.left-Y,U=_.clientY-X.top-W;let O=Math.atan2(U,N)*180/Math.PI;if(this.#T(_.shiftKey))O=Math.round(O/15)*15;if(this.#_=O,this.#B)this.#B.setAttribute("text",`Angle ${Math.round(O)}\xB0`);this.#v();const E=Math.round(O);if(E!==j)j=E,document.body.style.cursor=this.#s(E);this.#u()},K=()=>{if(this.#z=!1,this.classList.remove("fig-canvas-control-ring-active"),document.body.style.cursor=Z,this.#B)this.#B.removeAttribute("show");this.#c(),this.#p(),window.removeEventListener("pointermove",q),window.removeEventListener("pointerup",K)};window.addEventListener("pointermove",q),window.addEventListener("pointerup",K)});if(this.#K)this.#K.addEventListener("input",(Q)=>{if(Q.stopPropagation(),!this.#M)this.#A=document.body.style.cursor;this.#M=!0;const $=Q.detail?.px??this.#J/100,J=Q.detail?.py??this.#j/100;if(this.#J=Math.round(Math.max(0,Math.min(100,$*100))),this.#j=Math.round(Math.max(0,Math.min(100,J*100))),this.#L)this.#L.setAttribute("text",this.#w),this.#L.setAttribute("show","true"),this.#L.showPopup?.();this.#v(),document.body.style.cursor=this.#h(this.#b()),this.#u()}),this.#K.addEventListener("change",(Q)=>{if(Q.stopPropagation(),document.body.style.cursor=this.#A??"",this.#L)this.#L.removeAttribute("show");this.#v(),this.#c(),this.#p(),requestAnimationFrame(()=>{this.#M=!1})}),this.#$0(this.#X,!0),this.#$0(this.#K,!1)}#$0(Q,$){if(!Q)return;Q.addEventListener("hitareadown",(J)=>{J.stopPropagation();const Z=J.detail?.originalEvent;if(!Z)return;Z.preventDefault(),this.#O=!0;const j=this.#f;if(!j)return;const q=j.getBoundingClientRect(),K=$?this.#J:this.#$,_=$?this.#j:this.#Q,X=$?this.#$:this.#J,Y=$?this.#Q:this.#j,W=K/100*q.width,N=_/100*q.height,U=X/100*q.width,O=Y/100*q.height,E=Math.sqrt((U-W)**2+(O-N)**2),L=$?this.#W:this.#L;if(L)L.setAttribute("show","true"),L.showPopup?.();const M=document.body.style.cursor,B=this.#b();let F=Math.round($?B+180:B);document.body.style.cursor=this.#s(F);const z=(k)=>{const T=j.getBoundingClientRect(),S=K/100*T.width,C=_/100*T.height,m=k.clientX-T.left-S,p=k.clientY-T.top-C;let f=Math.atan2(p,m);if(this.#T(k.shiftKey))f=Math.round(f*180/Math.PI/15)*15*Math.PI/180;const b=S+E*Math.cos(f),w=C+E*Math.sin(f),u=Math.max(0,Math.min(100,b/T.width*100)),a=Math.max(0,Math.min(100,w/T.height*100));if($)this.#$=u,this.#Q=a;else this.#J=u,this.#j=a;this.#v();const r=Math.round($?this.#b()+180:this.#b());if(r!==F)F=r,document.body.style.cursor=this.#s(r);this.#u()},R=()=>{if(this.#O=!1,document.body.style.cursor=M,L)L.removeAttribute("show");this.#c(),this.#p(),window.removeEventListener("pointermove",z),window.removeEventListener("pointerup",R)};window.addEventListener("pointermove",z),window.addEventListener("pointerup",R)})}#J0(Q){if(!Q)return;Q.addEventListener("pointermove",(J)=>{if(this.#E)return;const Z=this.#f;if(!Z)return;const j=Z.getBoundingClientRect(),q=this.#$/100*j.width,K=this.#Q/100*j.height,_=Math.atan2(J.clientY-j.top-K,J.clientX-j.left-q)*180/Math.PI;Q.style.cursor=this.#h(_)});const $=(J)=>{if(this.hasAttribute("disabled"))return;J.preventDefault(),J.stopPropagation(),this.#E=!0,this.classList.add("fig-canvas-control-ring-active");const Z=this.#f;if(!Z)return;if(this.#G)this.#G.setAttribute("show","true"),this.#G.showPopup?.();const j=document.body.style.cursor;Q.style.pointerEvents="none";const q=Z.getBoundingClientRect(),K=this.#$/100*q.width,_=this.#Q/100*q.height,X=Math.atan2(J.clientY-q.top-_,J.clientX-q.left-K)*180/Math.PI;let Y=Math.round(X);document.body.style.cursor=this.#h(Y);const W=(U)=>{const O=Z.getBoundingClientRect(),E=this.#$/100*O.width,L=this.#Q/100*O.height,M=U.clientX-O.left-E,B=U.clientY-O.top-L,F=Math.round(Math.atan2(B,M)*180/Math.PI);if(F!==Y)Y=F,document.body.style.cursor=this.#h(F);let z=Math.sqrt(M*M+B*B);if(this.#T(U.shiftKey)){const R=this.#Z?5:10;if(this.#Z){let k=z/O.width*100;k=Math.round(k/R)*R,z=k/100*O.width}else z=Math.round(z/R)*R}if(this.#Z)this.#q=Math.max(0,z/O.width*100);else this.#q=Math.max(0,z);if(this.#G)this.#G.setAttribute("text",this.#m());this.#v(),this.#u()},N=()=>{if(this.#E=!1,this.classList.remove("fig-canvas-control-ring-active"),Q.style.pointerEvents="",document.body.style.cursor=j,this.#G)this.#G.removeAttribute("show");this.#c(),this.#p(),window.removeEventListener("pointermove",W),window.removeEventListener("pointerup",N)};window.addEventListener("pointermove",W),window.addEventListener("pointerup",N)};Q.addEventListener("pointerdown",$),this._radiusDragCleanup=()=>Q.removeEventListener("pointerdown",$)}#q0(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}}customElements.define("fig-canvas-control",l0);class t0 extends HTMLElement{static observedAttributes=["color","selected","disabled","drag","drag-surface","drag-axes","drag-snapping","value","type","control","hit-area","hit-area-mode"];#$=!1;#Q=!1;#J=null;#j=!1;#q=null;#Z=null;get#_(){return this.getAttribute("control")||null}get#X(){return this.#_==="add"||this.#_==="remove"}get#K(){return this.classList.contains("fig-input-gradient-ghost")}get#Y(){const Q=this.getAttribute("drag");return Q!==null&&Q!=="false"}get#N(){const Q=(this.getAttribute("drag-axes")||"x,y").toLowerCase();return{x:Q.includes("x"),y:Q.includes("y")}}get#U(){const Q=this.getAttribute("drag-snapping");if(Q===null)return"false";const $=Q.trim().toLowerCase();if($==="modifier")return"modifier";if($===""||$==="true")return"true";return"false"}#W(Q){const $=this.#U;if($==="true")return!0;if($==="modifier")return!!Q;return!1}#L(Q){if(Q<0.1)return 0;if(Q>0.9)return 1;if(Q>0.4&&Q<0.6)return 0.5;return Q}#G(Q,$){if(Math.abs(Q-$)<0.1){const Z=(Q+$)/2;return{x:Z,y:Z}}if(Math.abs(1-Q-$)<0.1)return{x:Q,y:1-Q};return{x:Q,y:$}}#B(){const Q=this.getAttribute("drag-surface");if(!Q||Q==="parent")return this.parentElement;return this.closest(Q)}get value(){const Q=this.#B();if(!Q)return"0% 0%";const $=Q.getBoundingClientRect(),J=this.offsetWidth/2,Z=this.offsetHeight/2,j=parseFloat(this.style.left)||0,q=parseFloat(this.style.top)||0,K=$.width>0?(j+J)/$.width*100:0,_=$.height>0?(q+Z)/$.height*100:0;return`${Math.round(K)}% ${Math.round(_)}%`}set value(Q){this.setAttribute("value",Q??"0% 0%")}#O(Q){const $=Q==null?"":String(Q).trim();if(!$)return{xPct:0,yPct:0};const J=$.split(/[\s,]+/).filter(Boolean),Z=(K)=>{if(!K)return 0;const _=K.includes("px"),X=K.includes("%"),Y=parseFloat(K.replace(/[%px]/g,""));if(!Number.isFinite(Y))return 0;if(_)return{px:Y};if(X||Math.abs(Y)>1)return Math.max(0,Math.min(100,Y));return Math.max(0,Math.min(100,Y*100))},j=Z(J[0]),q=Z(J[1]??J[0]);return{xToken:j,yToken:q}}#M(Q){const $=this.#B();if(!$)return;const{xToken:J,yToken:Z}=this.#O(Q),j=$.getBoundingClientRect(),q=this.offsetWidth/2,K=this.offsetHeight/2,_=(Y,W,N)=>{if(Y&&typeof Y==="object"&&"px"in Y)return Math.max(-N,Math.min(W-N,Y.px-N));const O=(typeof Y==="number"?Y:0)/100*W;return Math.max(-N,Math.min(W-N,O-N))},X=this.#N;if(X.x)this.style.left=`${Math.round(_(J,j.width,q))}px`;if(X.y)this.style.top=`${Math.round(_(Z,j.height,K))}px`}#E(){this.#j=!0,this.setAttribute("value",this.value),this.#j=!1}get#z(){return this.getAttribute("hit-area-mode")||"handle"}#A(){const Q=this.getAttribute("hit-area");if(!Q)return null;const $=Q.trim().split(/\s+/);let J=0,Z=0,j=!1;const q=[];for(let K of $){if(K==="circle"){j=!0;continue}const _=parseFloat(K);if(Number.isFinite(_))q.push(_)}if(q.length>=2)J=q[0],Z=q[1];else if(q.length===1)J=q[0],Z=q[0];else return null;return{vPad:J,hPad:Z,circle:j}}#R(){const Q=this.#A();if(!Q){if(this.#Z)this.#Z.remove(),this.#Z=null;this.style.removeProperty("--fig-handle-hit-area-size");return}if(!this.#Z){const $=document.createElement("div");$.classList.add("fig-handle-hit-area"),$.addEventListener("pointerdown",(J)=>this.#H(J)),this.prepend($),this.#Z=$}if(this.style.setProperty("--fig-handle-hit-area-size",String(Q.hPad*2)),Q.circle)this.#Z.style.borderRadius="50%";else this.#Z.style.borderRadius="inherit"}#H(Q){if(this.hasAttribute("disabled"))return;if(Q.target!==this.#Z)return;if(this.#z==="delegate")Q.preventDefault(),Q.stopPropagation(),this.dispatchEvent(new CustomEvent("hitareadown",{bubbles:!0,detail:{originalEvent:Q}}));else this.#T(Q)}connectedCallback(){this.#S(),this.#R(),this.addEventListener("click",this.#k),document.addEventListener("pointerdown",this.#F),document.addEventListener("keydown",this.#I);const Q=this.getAttribute("value");if(Q)this.#M(Q);if(this.#X)this.#P()}disconnectedCallback(){if(this.#D(),this.#w(),this.#Z)this.#Z.remove(),this.#Z=null;this.removeEventListener("click",this.#k),document.removeEventListener("pointerdown",this.#F),document.removeEventListener("keydown",this.#I)}select(){if(this.hasAttribute("disabled"))return;if(this.setAttribute("selected",""),this.getAttribute("type")==="color"&&!this.#$)this.#P()}deselect(){this.removeAttribute("selected"),this.#w()}#k=(Q)=>{if(this.#X)return;if(this.#Q){this.#Q=!1;return}this.select()};#F=(Q)=>{if(this.#X)return;if(this.contains(Q.target))return;if(this.#q&&Q.target.closest?.("dialog, [popover]"))return;this.deselect()};#I=(Q)=>{if(Q.key!=="Enter")return;if(!this.hasAttribute("selected"))return;if(this.getAttribute("type")!=="color")return;if(this.#q)return;Q.preventDefault(),this.#P()};attributeChangedCallback(Q,$,J){if(Q==="color"){if(!J||J==="false"||J==="true")this.style.removeProperty("--fill");else this.style.setProperty("--fill",J);if(this.#q&&J)this.#q.setAttribute("value",J)}if(Q==="drag")this.#S();if(Q==="hit-area")this.#R();if(Q==="value"&&!this.#j&&!this.#$)this.#M(J);if(Q==="control")if(this.#X)this.#w(),this.#P();else this.#w()}#S(){if(this.#Y&&!this.#J)this.#J=(Q)=>this.#T(Q),this.addEventListener("pointerdown",this.#J);else if(!this.#Y&&this.#J)this.#D()}#D(){if(this.#J)this.removeEventListener("pointerdown",this.#J),this.#J=null;this.#$=!1}#T(Q){if(!this.#Y||this.hasAttribute("disabled"))return;Q.preventDefault();const $=this.#B();if(!$)return;this.#$=!0;const J=this.#N,Z=this.offsetWidth,j=this.offsetHeight;let q=null;const K=this.getBoundingClientRect(),_=K.left+K.width/2,X=K.top+K.height/2,Y=Q.clientX-_,W=Q.clientY-X,N=Q.clientX,U=Q.clientY,O=3,E=(B,F,z=!1)=>{const R=$.getBoundingClientRect();q=R;const k=parseFloat(this.style.left)||0,T=parseFloat(this.style.top)||0,S=B-Y-R.left-Z/2,C=F-W-R.top-j/2,m=Math.max(-Z/2,Math.min(R.width-Z/2,S)),p=Math.max(-j/2,Math.min(R.height-j/2,C));let f=R.width>0?((J.x?m:k)+Z/2)/R.width:0.5,b=R.height>0?((J.y?p:T)+j/2)/R.height:0.5;if(this.#W(z)){if(J.x)f=this.#L(f);if(J.y)b=this.#L(b);if(J.x&&J.y){const w=this.#G(f,b);f=w.x,b=w.y}}if(J.x){const w=f*R.width-Z/2;this.style.left=`${Math.round(Math.max(-Z/2,Math.min(R.width-Z/2,w)))}px`}if(J.y){const w=b*R.height-j/2;this.style.top=`${Math.round(Math.max(-j/2,Math.min(R.height-j/2,w)))}px`}},L=(B)=>{if(!this.#$)return;if(!this.#Q){const F=B.clientX-N,z=B.clientY-U;if(F*F+z*z<O*O)return;if(this.classList.add("dragging"),this.style.cursor="grabbing",!this.hasAttribute("selected"))this.select()}this.#Q=!0,E(B.clientX,B.clientY,B.shiftKey),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{...this.#m(q),shiftKey:B.shiftKey}}))},M=(B)=>{if(this.#$=!1,this.style.cursor="",this.classList.remove("dragging"),window.removeEventListener("pointermove",L),window.removeEventListener("pointerup",M),this.#Q){E(B.clientX,B.clientY,B.shiftKey),this.#E(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.#m(q)}));const F=(z)=>{z.stopPropagation(),z.preventDefault()};this.addEventListener("click",F,{capture:!0,once:!0})}else this.#E();this.#Q=!1};window.addEventListener("pointermove",L),window.addEventListener("pointerup",M)}showColorTip(){if(this.#q){this.#q.style.display="";return}this.#P()}hideColorTip(){if(!this.#q)return;this.#q.style.display="none"}#P(){if(this.#q)return;const Q=document.createElement("fig-color-tip");if(this.#X)Q.setAttribute("control",this.#_);else Q.setAttribute("value",this.getAttribute("color")||"#D9D9D9"),Q.setAttribute("alpha","true"),Q.setAttribute("selected","");Q.addEventListener("input",this.#f),Q.addEventListener("change",this.#x),Q.addEventListener("add",this.#V),Q.addEventListener("remove",this.#V),this.appendChild(Q),this.#q=Q}#w(){if(!this.#q)return;this.#q.removeEventListener("input",this.#f),this.#q.removeEventListener("change",this.#x),this.#q.removeEventListener("add",this.#V),this.#q.removeEventListener("remove",this.#V),this.#q.remove(),this.#q=null}#C(Q,$){if($===void 0||$>=100)return Q;const{r:J,g:Z,b:j}=t(Q);return`rgba(${J}, ${Z}, ${j}, ${$/100})`}#f=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",this.#C(Q.detail.color,Q.detail.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{color:Q.detail.color,opacity:Q.detail.opacity}}))};#x=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",this.#C(Q.detail.color,Q.detail.opacity)),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{color:Q.detail.color,opacity:Q.detail.opacity}}))};#V=(Q)=>{Q.stopPropagation(),this.dispatchEvent(new CustomEvent(Q.type,{bubbles:!0,composed:!0}))};#m(Q){const $=this.offsetWidth/2,J=this.offsetHeight/2,Z=parseFloat(this.style.left)||0,j=parseFloat(this.style.top)||0,q=Q.width>0?(Z+$)/Q.width:0,K=Q.height>0?(j+J)/Q.height:0;return{x:Z,y:j,px:q,py:K}}}customElements.define("fig-handle",t0);