@rogieking/figui3 4.4.1 → 4.4.2

package/dist/fig.js

@@ -442,4 +442,4 @@ var W1=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var N1={};var Y0=W1(()=>{/*! Vendored from @
     `,this.#n(Q)}#n(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"),K=async(q=null)=>{try{const _={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(_),$.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.#E=new MutationObserver(()=>{if(Q.style.display!=="none"&&!this.#U.stream)K()}),this.#E.observe(Q,{attributes:!0,attributeFilter:["style"]}),j.addEventListener("change",(q)=>{K(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.#Y.url=this.#U.snapshot,this.#j="image",this.#D(),this.#y(),this.#k("image");const _=this.#J.querySelector("fig-tabs");_.value="image"})}#l(Q){const $=Q.h/360,J=Q.s/100,Z=Q.v/100;let j,K,q;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,K=N,q=Y;break;case 1:j=W,K=Z,q=Y;break;case 2:j=Y,K=Z,q=N;break;case 3:j=Y,K=W,q=Z;break;case 4:j=N,K=Y,q=Z;break;case 5:j=Z,K=Y,q=W;break}return{r:Math.round(j*255),g:Math.round(K*255),b:Math.round(q*255)}}#e(Q){const $=Q.r/255,J=Q.g/255,Z=Q.b/255,j=Math.max($,J,Z),K=Math.min($,J,Z),q=j-K;let _=0;const X=j===0?0:q/j,Y=j;if(j!==K){switch(j){case $:_=(J-Z)/q+(J<Z?6:0);break;case J:_=(Z-$)/q+2;break;case Z:_=($-J)/q+4;break}_/=6}return{h:_*360,s:X*100,v:Y*100,a:1}}#s(Q){if(!Q||typeof Q.h!=="number"||typeof Q.s!=="number"||typeof Q.v!=="number")return"#D9D9D9";const $=this.#l(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)}`}#j0(Q){const $=parseInt(Q.slice(1,3),16),J=parseInt(Q.slice(3,5),16),Z=parseInt(Q.slice(5,7),16);return this.#e({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),K=Math.min($,J,Z);let q,_;const X=(j+K)/2;if(j===K)q=_=0;else{const Y=j-K;switch(_=X>0.5?Y/(2-j-K):Y/(j+K),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:_*100,l:X*100}}#G0(Q){const $=Q.h/360,J=Q.s/100,Z=Q.l/100;let j,K,q;if(J===0)j=K=q=Z;else{const _=(W,N,L)=>{if(L<0)L+=1;if(L>1)L-=1;if(L<0.16666666666666666)return W+(N-W)*6*L;if(L<0.5)return N;if(L<0.6666666666666666)return W+(N-W)*(0.6666666666666666-L)*6;return W},X=Z<0.5?Z*(1+J):Z+J-Z*J,Y=2*Z-X;j=_(Y,X,$+0.3333333333333333),K=_(Y,X,$),q=_(Y,X,$-0.3333333333333333)}return{r:Math.round(j*255),g:Math.round(K*255),b:Math.round(q*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),K=0.4122214708*J+0.5363325363*Z+0.0514459929*j,q=0.2119034982*J+0.6806995451*Z+0.1073969566*j,_=0.0883024619*J+0.2817188376*Z+0.6299787005*j,X=Math.cbrt(K),Y=Math.cbrt(q),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}}#M0(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=$*$*$,K=J*J*J,q=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*K+0.2309699292*q),g:_(-1.2684380046*j+2.6097574011*K-0.3413193965*q),b:_(-0.0041960863*j-0.7034186147*K+1.707614701*q)}}#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.#D(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#u(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){const Q={type:this.#j,colorSpace:this.#Z};switch(this.#j){case"solid":return{...Q,color:this.#s(this.#_),alpha:this.#_.a,hsv:{...this.#_}};case"gradient":return{...Q,gradient:d(this.#q),css:this.#J0()};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.#j]}}}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.#P(),this.#D(),this.#J){if(!this.#A){if(this.#f(),this.#p(),this.#O)this.#O.setAttribute("value",this.#_.h);if(this.#B)this.#B.setAttribute("value",this.#_.a*100),this.#B.setAttribute("color",this.#s(this.#_))}}break;case"disabled":break}}}customElements.define("fig-fill-picker",n);class Q1 extends HTMLElement{#Q=null;#$=null;#J=this.#M.bind(this);#K=this.#O.bind(this);static get observedAttributes(){return["value","selected","disabled","alpha","control"]}get#j(){return this.getAttribute("control")||"color"}connectedCallback(){this.#q(),this.#L()}disconnectedCallback(){this.#Z(),this.removeEventListener("click",this.#Y)}#Z(){if(!this.#Q)return;this.#Q.removeEventListener("input",this.#J),this.#Q.removeEventListener("change",this.#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.#j;if(Q==="add"||Q==="remove"){const q=Q==="add"?"var(--icon-add)":"var(--icon-minus)";this.innerHTML=`<fig-button icon variant="ghost"><span class="fig-mask-icon" style="--icon: ${q}"></span></fig-button>`,this.#Q=null,this.#$=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"',K=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='${K}'>
         <fig-chit background="${J}"></fig-chit>
-      </fig-fill-picker>`,this.#Q=this.querySelector("fig-fill-picker"),this.#$=this.querySelector("fig-chit"),this.#Z(),this.#Q?.addEventListener("input",this.#J),this.#Q?.addEventListener("change",this.#K),this.#$?.addEventListener("click",()=>{this.setAttribute("selected",""),this.#_()})}#Y=()=>{const Q=this.#j;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}=G0(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 K=(q)=>Math.max(0,Math.min(255,Number(q))).toString(16).padStart(2,"0");return`#${K(j[1])}${K(j[2])}${K(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.#Q){const Z=J<1?{type:"solid",color:$,opacity:Math.round(J*100)}:{type:"solid",color:$};if(this.#Q.setAttribute("value",JSON.stringify(Z)),this.#X)this.#Q.removeAttribute("alpha");else this.#Q.setAttribute("alpha","false");if(this.hasAttribute("disabled"))this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled")}if(this.#$)if(this.#$.setAttribute("background",$),this.hasAttribute("disabled"))this.#$.setAttribute("disabled","");else this.#$.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}))}#M(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.#q();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",Q1);class $1 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",$1);class J1 extends HTMLElement{#Q=null;#$=this.#M.bind(this);#J=this.#O.bind(this);#K=this.#A.bind(this);#j=null;#Z=null;#_=null;#X=null;#q=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.#Q}set selectedChoice(Q){if(Q&&!this.contains(Q))return;const $=this.choices;for(let Z of $){const j=Z===Q,K=Z.hasAttribute("selected");if(j&&!K)Z.setAttribute("selected","");else if(!j&&K)Z.removeAttribute("selected")}this.#Q=Q;const J=Q?.getAttribute("value")??"";if(this.getAttribute("value")!==J){if(J)this.setAttribute("value",J)}this.#C(Q)}get value(){return this.#Q?.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.#$),this.addEventListener("keydown",this.#J),this.addEventListener("scroll",this.#K),this.#H(),this.#R(),this.#F(),this.#z(),requestAnimationFrame(()=>{this.#W(),this.#A()})}disconnectedCallback(){this.removeEventListener("click",this.#$),this.removeEventListener("keydown",this.#J),this.removeEventListener("scroll",this.#K),this.#E(),this.#j?.disconnect(),this.#j=null,this.#Z?.disconnect(),this.#Z=null,this.#P()}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 K of j)if(Z)K.setAttribute("aria-disabled","true"),K.setAttribute("tabindex","-1");else K.removeAttribute("aria-disabled"),K.setAttribute("tabindex","0")}if(Q==="choice-element")requestAnimationFrame(()=>this.#W());if(Q==="drag")if(this.#N)this.#R();else this.#E();if(Q==="overflow")this.#H()}#W(){const Q=this.choices;if(!Q.length){this.#Q=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}#M(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.#B()}#O(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=this.choices.filter((K)=>!K.hasAttribute("disabled")||K.getAttribute("disabled")==="false");if(!$.length)return;const J=$.indexOf(this.#Q);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 K=this.#G(document.activeElement);if(K&&K!==this.#Q)this.selectedChoice=K,this.#B()}return;default:return}if(Z!==J&&$[Z])this.selectedChoice=$[Z],$[Z].focus(),this.#B()}#B(){const Q=this.value;this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#A(){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.#A()}),this.#Z.observe(this)}#R(){if(this.#q?.bound)return;if(!this.#N)return;const Q=(K)=>{if(K.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=K.clientX,this.#q.startY=K.clientY,this.#q.scrollLeft=this.scrollLeft,this.#q.scrollTop=this.scrollTop,this.style.cursor="grab",this.style.userSelect="none"},$=(K)=>{if(!this.#q.active)return;const q=this.getAttribute("layout")==="horizontal",_=K.clientX-this.#q.startX,X=K.clientY-this.#q.startY;if(!this.#q.didDrag&&Math.abs(q?_:X)>3)this.#q.didDrag=!0,this.style.cursor="grabbing",this.setPointerCapture(K.pointerId);if(!this.#q.didDrag)return;if(q)this.scrollLeft=this.#q.scrollLeft-_;else this.scrollTop=this.#q.scrollTop-X},J=(K)=>{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="",K.pointerId!==void 0)try{this.releasePointerCapture(K.pointerId)}catch{}if(q)K.preventDefault(),K.stopPropagation()},Z=(K)=>{if(this.#q?.suppressClick)K.stopPropagation(),K.preventDefault(),this.#q.suppressClick=!1},j=(K)=>{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)}#E(){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}#H(){if(this.#Y==="scrollbar")this.#P();else this.#D()}#P(){this.#_?.remove(),this.#X?.remove(),this.#_=null,this.#X=null,this.classList.remove("overflow-start","overflow-end")}#D(){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.#T(-1)}),this.#X.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#T(1)}),this.prepend(this.#_),this.append(this.#X)}#T(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)})}#F(){this.#j?.disconnect(),this.#j=new MutationObserver(()=>{const Q=this.choices;if(this.#Q&&!Q.includes(this.#Q))this.#Q=null,this.#W();else if(!this.#Q&&Q.length)this.#W()}),this.#j.observe(this,{childList:!0,subtree:!0})}}customElements.define("fig-chooser",J1);class Z1 extends HTMLElement{static observedAttributes=["color","selected","disabled","drag","drag-surface","drag-axes","drag-snapping","value","type","control","hit-area","hit-area-mode"];#Q=!1;#$=!1;#J=null;#K=!1;#j=null;#Z=null;get#_(){return this.getAttribute("control")||null}get#X(){return this.#_==="add"||this.#_==="remove"}get#q(){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:$}}#M(){const Q=this.getAttribute("drag-surface");if(!Q||Q==="parent")return this.parentElement;return this.closest(Q)}get value(){const Q=this.#M();if(!Q)return"0% 0%";const $=Q.getBoundingClientRect(),J=this.offsetWidth/2,Z=this.offsetHeight/2,j=parseFloat(this.style.left)||0,K=parseFloat(this.style.top)||0,q=$.width>0?(j+J)/$.width*100:0,_=$.height>0?(K+Z)/$.height*100:0;return`${Math.round(q)}% ${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=(q)=>{if(!q)return 0;const _=q.includes("px"),X=q.includes("%"),Y=parseFloat(q.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]),K=Z(J[1]??J[0]);return{xToken:j,yToken:K}}#B(Q){const $=this.#M();if(!$)return;const{xToken:J,yToken:Z}=this.#O(Q),j=$.getBoundingClientRect(),K=this.offsetWidth/2,q=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 B=(typeof Y==="number"?Y:0)/100*W;return Math.max(-N,Math.min(W-N,B-N))},X=this.#N;if(X.x)this.style.left=`${Math.round(_(J,j.width,K))}px`;if(X.y)this.style.top=`${Math.round(_(Z,j.height,q))}px`}#A(){this.#K=!0,this.setAttribute("value",this.value),this.#K=!1}get#z(){return this.getAttribute("hit-area-mode")||"handle"}#R(){const Q=this.getAttribute("hit-area");if(!Q)return null;const $=Q.trim().split(/\s+/);let J=0,Z=0,j=!1;const K=[];for(let q of $){if(q==="circle"){j=!0;continue}const _=parseFloat(q);if(Number.isFinite(_))K.push(_)}if(K.length>=2)J=K[0],Z=K[1];else if(K.length===1)J=K[0],Z=K[0];else return null;return{vPad:J,hPad:Z,circle:j}}#E(){const Q=this.#R();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.#k(Q)}connectedCallback(){this.#C(),this.#E(),this.addEventListener("click",this.#P),document.addEventListener("pointerdown",this.#D),document.addEventListener("keydown",this.#T);const Q=this.getAttribute("value");if(Q)this.#B(Q);if(this.#X)this.#I()}disconnectedCallback(){if(this.#F(),this.#w(),this.#Z)this.#Z.remove(),this.#Z=null;this.removeEventListener("click",this.#P),document.removeEventListener("pointerdown",this.#D),document.removeEventListener("keydown",this.#T)}select(){if(this.hasAttribute("disabled"))return;if(this.setAttribute("selected",""),this.getAttribute("type")==="color"&&!this.#Q)this.#I()}deselect(){this.removeAttribute("selected"),this.#w()}#P=(Q)=>{if(this.#X)return;if(this.#$){this.#$=!1;return}this.select()};#D=(Q)=>{if(this.#X)return;if(this.contains(Q.target))return;if(this.#j&&Q.target.closest?.("dialog, [popover]"))return;this.deselect()};#T=(Q)=>{if(Q.key!=="Enter")return;if(!this.hasAttribute("selected"))return;if(this.getAttribute("type")!=="color")return;if(this.#j)return;Q.preventDefault(),this.#I()};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&&J)this.#j.setAttribute("value",J)}if(Q==="drag")this.#C();if(Q==="hit-area")this.#E();if(Q==="value"&&!this.#K&&!this.#Q)this.#B(J);if(Q==="control")if(this.#X)this.#w(),this.#I();else this.#w()}#C(){if(this.#Y&&!this.#J)this.#J=(Q)=>this.#k(Q),this.addEventListener("pointerdown",this.#J);else if(!this.#Y&&this.#J)this.#F()}#F(){if(this.#J)this.removeEventListener("pointerdown",this.#J),this.#J=null;this.#Q=!1}#k(Q){if(!this.#Y||this.hasAttribute("disabled"))return;Q.preventDefault();const $=this.#M();if(!$)return;this.#Q=!0;const J=this.#N,Z=this.offsetWidth,j=this.offsetHeight;let K=null;const q=this.getBoundingClientRect(),_=q.left+q.width/2,X=q.top+q.height/2,Y=Q.clientX-_,W=Q.clientY-X,N=Q.clientX,L=Q.clientY,B=3,A=(M,z,R=!1)=>{const E=$.getBoundingClientRect();K=E;const T=parseFloat(this.style.left)||0,S=parseFloat(this.style.top)||0,y=M-Y-E.left-Z/2,I=z-W-E.top-j/2,c=Math.max(-Z/2,Math.min(E.width-Z/2,y)),l=Math.max(-j/2,Math.min(E.height-j/2,I));let h=E.width>0?((J.x?c:T)+Z/2)/E.width:0.5,m=E.height>0?((J.y?l:S)+j/2)/E.height:0.5;if(this.#W(R)){if(J.x)h=this.#L(h);if(J.y)m=this.#L(m);if(J.x&&J.y){const v=this.#G(h,m);h=v.x,m=v.y}}if(J.x){const v=h*E.width-Z/2;this.style.left=`${Math.round(Math.max(-Z/2,Math.min(E.width-Z/2,v)))}px`}if(J.y){const v=m*E.height-j/2;this.style.top=`${Math.round(Math.max(-j/2,Math.min(E.height-j/2,v)))}px`}},U=(M)=>{if(!this.#Q)return;if(!this.#$){const z=M.clientX-N,R=M.clientY-L;if(z*z+R*R<B*B)return;if(this.classList.add("dragging"),this.style.cursor="grabbing",!this.hasAttribute("selected"))this.select()}this.#$=!0,A(M.clientX,M.clientY,M.shiftKey),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{...this.#v(K),shiftKey:M.shiftKey}}))},O=(M)=>{if(this.#Q=!1,this.style.cursor="",this.classList.remove("dragging"),window.removeEventListener("pointermove",U),window.removeEventListener("pointerup",O),this.#$){A(M.clientX,M.clientY,M.shiftKey),this.#A(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.#v(K)}));const z=(R)=>{R.stopPropagation(),R.preventDefault()};this.addEventListener("click",z,{capture:!0,once:!0})}else this.#A();this.#$=!1};window.addEventListener("pointermove",U),window.addEventListener("pointerup",O)}showColorTip(){if(this.#j){this.#j.style.display="";return}this.#I()}hideColorTip(){if(!this.#j)return;this.#j.style.display="none"}#I(){if(this.#j)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.#j=Q}#w(){if(!this.#j)return;this.#j.removeEventListener("input",this.#f),this.#j.removeEventListener("change",this.#x),this.#j.removeEventListener("add",this.#V),this.#j.removeEventListener("remove",this.#V),this.#j.remove(),this.#j=null}#S(Q,$){if($===void 0||$>=100)return Q;const{r:J,g:Z,b:j}=i(Q);return`rgba(${J}, ${Z}, ${j}, ${$/100})`}#f=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",this.#S(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.#S(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}))};#v(Q){const $=this.offsetWidth/2,J=this.offsetHeight/2,Z=parseFloat(this.style.left)||0,j=parseFloat(this.style.top)||0,K=Q.width>0?(Z+$)/Q.width:0,q=Q.height>0?(j+J)/Q.height:0;return{x:Z,y:j,px:K,py:q}}}customElements.define("fig-handle",Z1);class j1 extends HTMLElement{static get observedAttributes(){return["value","disabled"]}get value(){return this.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q??"")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","menuitem");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}attributeChangedCallback(){}}customElements.define("fig-menu-item",j1);class K1 extends HTMLElement{connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","separator")}}customElements.define("fig-menu-separator",K1);class q1 extends HTMLElement{#Q=null;#$=null;#J=null;#K;#j;#Z;#_;#X=-1;static get observedAttributes(){return["position","offset","closedby","disabled","open"]}constructor(){super();this.#K=this.#O.bind(this),this.#j=this.#B.bind(this),this.#Z=this.#A.bind(this),this.#_=this.#z.bind(this)}get value(){return this.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q??"")}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(Q){if(Q)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(this.style.display="contents",this.#q(),this.#Y(),this.#N(),this.#U(),this.#L(),this.#M(),this.open)this.#E()}disconnectedCallback(){if(this.#W(),this.#J)this.#J.disconnect(),this.#J=null;if(this.#Q)this.#Q.removeEventListener("close",this.#_),this.#Q.remove(),this.#Q=null}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="open"){if(J===null||J==="false")this.#H();else this.#E();return}if(Q==="disabled"){if(this.#$)if(J!==null&&J!=="false")this.#$.setAttribute("disabled","");else this.#$.removeAttribute("disabled");return}if(this.#Q&&(Q==="position"||Q==="offset"||Q==="closedby"))if(J!==null)this.#Q.setAttribute(Q,J);else this.#Q.removeAttribute(Q)}#q(){this.#$=this.querySelector("[fig-menu-trigger]")||this.querySelector(":scope > :not(fig-menu-item):not(fig-menu-separator)")}#Y(){this.#Q=document.createElement("dialog",{is:"fig-popup"}),this.#Q.setAttribute("is","fig-popup"),this.#Q.setAttribute("theme","menu"),this.#Q.setAttribute("role","menu");const Q=this.getAttribute("position")||"bottom left";this.#Q.setAttribute("position",Q);const $=this.getAttribute("offset");if($)this.#Q.setAttribute("offset",$);const J=this.getAttribute("closedby");if(J)this.#Q.setAttribute("closedby",J);if(this.#$)this.#Q.anchor=this.#$;this.#Q.addEventListener("close",this.#_),this.appendChild(this.#Q)}#N(){const Q=Array.from(this.querySelectorAll(":scope > fig-menu-item, :scope > fig-menu-separator"));for(let $ of Q)this.#Q.appendChild($)}#U(){if(this.#$)this.#$.addEventListener("click",this.#K),this.#$.setAttribute("aria-haspopup","menu"),this.#$.setAttribute("aria-expanded","false");if(this.#Q)this.#Q.addEventListener("click",this.#j),this.#Q.addEventListener("keydown",this.#Z)}#W(){if(this.#$)this.#$.removeEventListener("click",this.#K);if(this.#Q)this.#Q.removeEventListener("click",this.#j),this.#Q.removeEventListener("keydown",this.#Z)}#L(){this.#J=new MutationObserver((Q)=>{for(let $ of Q)for(let J of $.addedNodes)if(J.nodeType===1&&(J.tagName==="FIG-MENU-ITEM"||J.tagName==="FIG-MENU-SEPARATOR")&&J.parentElement===this)this.#Q.appendChild(J)}),this.#J.observe(this,{childList:!0})}#G(){if(!this.#Q)return[];return Array.from(this.#Q.querySelectorAll("fig-menu-item:not([disabled]):not([disabled='true'])"))}#M(){if(!this.#$)return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.#$.setAttribute("disabled","");else this.#$.removeAttribute("disabled")}#O(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(Q.stopPropagation(),this.open)this.open=!1;else this.open=!0}#B(Q){const $=Q.target.closest("fig-menu-item");if(!$)return;if($.hasAttribute("disabled")&&$.getAttribute("disabled")!=="false")return;this.#R($)}#A(Q){const $=this.#G();if(!$.length)return;switch(Q.key){case"ArrowDown":{Q.preventDefault(),this.#X=Math.min(this.#X+1,$.length-1),$[this.#X]?.focus();break}case"ArrowUp":{Q.preventDefault(),this.#X=Math.max(this.#X-1,0),$[this.#X]?.focus();break}case"Home":{Q.preventDefault(),this.#X=0,$[0]?.focus();break}case"End":{Q.preventDefault(),this.#X=$.length-1,$[this.#X]?.focus();break}case"Enter":case" ":{Q.preventDefault();const J=$[this.#X];if(J)this.#R(J);break}}}#z(){if(this.hasAttribute("open"))this.removeAttribute("open");if(this.#$)this.#$.setAttribute("aria-expanded","false"),this.#$.focus();this.#X=-1}#R(Q){const $=Q.getAttribute("value")||Q.textContent.trim();this.setAttribute("value",$),this.dispatchEvent(new CustomEvent("change",{detail:{value:$,item:Q},bubbles:!0})),this.open=!1}#E(){if(!this.#Q)return;if(this.#Q.open=!0,this.#$)this.#$.setAttribute("aria-expanded","true");this.#X=0,requestAnimationFrame(()=>{const Q=this.#G();if(Q.length)Q[0].focus()})}#H(){if(!this.#Q)return;this.#Q.open=!1}}customElements.define("fig-menu",q1);
+      </fig-fill-picker>`,this.#Q=this.querySelector("fig-fill-picker"),this.#$=this.querySelector("fig-chit"),this.#Z(),this.#Q?.addEventListener("input",this.#J),this.#Q?.addEventListener("change",this.#K),this.#$?.addEventListener("click",()=>{this.setAttribute("selected",""),this.#_()})}#Y=()=>{const Q=this.#j;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}=G0(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 K=(q)=>Math.max(0,Math.min(255,Number(q))).toString(16).padStart(2,"0");return`#${K(j[1])}${K(j[2])}${K(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.#Q){const Z=J<1?{type:"solid",color:$,opacity:Math.round(J*100)}:{type:"solid",color:$};if(this.#Q.setAttribute("value",JSON.stringify(Z)),this.#X)this.#Q.removeAttribute("alpha");else this.#Q.setAttribute("alpha","false");if(this.hasAttribute("disabled"))this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled")}if(this.#$)if(this.#$.setAttribute("background",$),this.hasAttribute("disabled"))this.#$.setAttribute("disabled","");else this.#$.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}))}#M(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.#q();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",Q1);class $1 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",$1);class J1 extends HTMLElement{#Q=null;#$=this.#M.bind(this);#J=this.#O.bind(this);#K=this.#A.bind(this);#j=null;#Z=null;#_=null;#X=null;#q=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.#Q}set selectedChoice(Q){if(Q&&!this.contains(Q))return;const $=this.choices;for(let Z of $){const j=Z===Q,K=Z.hasAttribute("selected");if(j&&!K)Z.setAttribute("selected","");else if(!j&&K)Z.removeAttribute("selected")}this.#Q=Q;const J=Q?.getAttribute("value")??"";if(this.getAttribute("value")!==J){if(J)this.setAttribute("value",J)}this.#C(Q)}get value(){return this.#Q?.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.#$),this.addEventListener("keydown",this.#J),this.addEventListener("scroll",this.#K),this.#H(),this.#R(),this.#F(),this.#z(),requestAnimationFrame(()=>{this.#W(),this.#A()})}disconnectedCallback(){this.removeEventListener("click",this.#$),this.removeEventListener("keydown",this.#J),this.removeEventListener("scroll",this.#K),this.#E(),this.#j?.disconnect(),this.#j=null,this.#Z?.disconnect(),this.#Z=null,this.#P()}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 K of j)if(Z)K.setAttribute("aria-disabled","true"),K.setAttribute("tabindex","-1");else K.removeAttribute("aria-disabled"),K.setAttribute("tabindex","0")}if(Q==="choice-element")requestAnimationFrame(()=>this.#W());if(Q==="drag")if(this.#N)this.#R();else this.#E();if(Q==="overflow")this.#H()}#W(){const Q=this.choices;if(!Q.length){this.#Q=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}#M(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.#B()}#O(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=this.choices.filter((K)=>!K.hasAttribute("disabled")||K.getAttribute("disabled")==="false");if(!$.length)return;const J=$.indexOf(this.#Q);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 K=this.#G(document.activeElement);if(K&&K!==this.#Q)this.selectedChoice=K,this.#B()}return;default:return}if(Z!==J&&$[Z])this.selectedChoice=$[Z],$[Z].focus(),this.#B()}#B(){const Q=this.value;this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#A(){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.#A()}),this.#Z.observe(this)}#R(){if(this.#q?.bound)return;if(!this.#N)return;const Q=(K)=>{if(K.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=K.clientX,this.#q.startY=K.clientY,this.#q.scrollLeft=this.scrollLeft,this.#q.scrollTop=this.scrollTop,this.style.cursor="grab",this.style.userSelect="none"},$=(K)=>{if(!this.#q.active)return;const q=this.getAttribute("layout")==="horizontal",_=K.clientX-this.#q.startX,X=K.clientY-this.#q.startY;if(!this.#q.didDrag&&Math.abs(q?_:X)>3)this.#q.didDrag=!0,this.style.cursor="grabbing",this.setPointerCapture(K.pointerId);if(!this.#q.didDrag)return;if(q)this.scrollLeft=this.#q.scrollLeft-_;else this.scrollTop=this.#q.scrollTop-X},J=(K)=>{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="",K.pointerId!==void 0)try{this.releasePointerCapture(K.pointerId)}catch{}if(q)K.preventDefault(),K.stopPropagation()},Z=(K)=>{if(this.#q?.suppressClick)K.stopPropagation(),K.preventDefault(),this.#q.suppressClick=!1},j=(K)=>{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)}#E(){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}#H(){if(this.#Y==="scrollbar")this.#P();else this.#D()}#P(){this.#_?.remove(),this.#X?.remove(),this.#_=null,this.#X=null,this.classList.remove("overflow-start","overflow-end")}#D(){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.#T(-1)}),this.#X.addEventListener("pointerdown",(Q)=>{Q.stopPropagation(),this.#T(1)}),this.prepend(this.#_),this.append(this.#X)}#T(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)})}#F(){this.#j?.disconnect(),this.#j=new MutationObserver(()=>{const Q=this.choices;if(this.#Q&&!Q.includes(this.#Q))this.#Q=null,this.#W();else if(!this.#Q&&Q.length)this.#W()}),this.#j.observe(this,{childList:!0,subtree:!0})}}customElements.define("fig-chooser",J1);class Z1 extends HTMLElement{static observedAttributes=["color","selected","disabled","drag","drag-surface","drag-axes","drag-snapping","value","type","control","hit-area","hit-area-mode"];#Q=!1;#$=!1;#J=null;#K=!1;#j=null;#Z=null;get#_(){return this.getAttribute("control")||null}get#X(){return this.#_==="add"||this.#_==="remove"}get#q(){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:$}}#M(){const Q=this.getAttribute("drag-surface");if(!Q||Q==="parent")return this.parentElement;return this.closest(Q)}get value(){const Q=this.#M();if(!Q)return"0% 0%";const $=Q.getBoundingClientRect(),J=this.offsetWidth/2,Z=this.offsetHeight/2,j=parseFloat(this.style.left)||0,K=parseFloat(this.style.top)||0,q=$.width>0?(j+J)/$.width*100:0,_=$.height>0?(K+Z)/$.height*100:0;return`${Math.round(q)}% ${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=(q)=>{if(!q)return 0;const _=q.includes("px"),X=q.includes("%"),Y=parseFloat(q.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]),K=Z(J[1]??J[0]);return{xToken:j,yToken:K}}#B(Q){const $=this.#M();if(!$)return;const{xToken:J,yToken:Z}=this.#O(Q),j=$.getBoundingClientRect(),K=this.offsetWidth/2,q=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 B=(typeof Y==="number"?Y:0)/100*W;return Math.max(-N,Math.min(W-N,B-N))},X=this.#N;if(X.x)this.style.left=`${Math.round(_(J,j.width,K))}px`;if(X.y)this.style.top=`${Math.round(_(Z,j.height,q))}px`}#A(){this.#K=!0,this.setAttribute("value",this.value),this.#K=!1}get#z(){return this.getAttribute("hit-area-mode")||"handle"}#R(){const Q=this.getAttribute("hit-area");if(!Q)return null;const $=Q.trim().split(/\s+/);let J=0,Z=0,j=!1;const K=[];for(let q of $){if(q==="circle"){j=!0;continue}const _=parseFloat(q);if(Number.isFinite(_))K.push(_)}if(K.length>=2)J=K[0],Z=K[1];else if(K.length===1)J=K[0],Z=K[0];else return null;return{vPad:J,hPad:Z,circle:j}}#E(){const Q=this.#R();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.#k(Q)}connectedCallback(){this.#C(),this.#E(),this.addEventListener("click",this.#P),document.addEventListener("pointerdown",this.#D),document.addEventListener("keydown",this.#T);const Q=this.getAttribute("value");if(Q)this.#B(Q);if(this.#X)this.#I()}disconnectedCallback(){if(this.#F(),this.#w(),this.#Z)this.#Z.remove(),this.#Z=null;this.removeEventListener("click",this.#P),document.removeEventListener("pointerdown",this.#D),document.removeEventListener("keydown",this.#T)}select(){if(this.hasAttribute("disabled"))return;if(this.setAttribute("selected",""),this.getAttribute("type")==="color"&&!this.#Q)this.#I()}deselect(){this.removeAttribute("selected"),this.#w()}#P=(Q)=>{if(this.#X)return;if(this.#$){this.#$=!1;return}this.select()};#D=(Q)=>{if(this.#X)return;if(this.contains(Q.target))return;if(this.#j&&Q.target.closest?.("dialog, [popover]"))return;this.deselect()};#T=(Q)=>{if(Q.key!=="Enter")return;if(!this.hasAttribute("selected"))return;if(this.getAttribute("type")!=="color")return;if(this.#j)return;Q.preventDefault(),this.#I()};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&&J)this.#j.setAttribute("value",J)}if(Q==="drag")this.#C();if(Q==="hit-area")this.#E();if(Q==="value"&&!this.#K&&!this.#Q)this.#B(J);if(Q==="control")if(this.#X)this.#w(),this.#I();else this.#w()}#C(){if(this.#Y&&!this.#J)this.#J=(Q)=>this.#k(Q),this.addEventListener("pointerdown",this.#J);else if(!this.#Y&&this.#J)this.#F()}#F(){if(this.#J)this.removeEventListener("pointerdown",this.#J),this.#J=null;this.#Q=!1}#k(Q){if(!this.#Y||this.hasAttribute("disabled"))return;Q.preventDefault();const $=this.#M();if(!$)return;this.#Q=!0;const J=this.#N,Z=this.offsetWidth,j=this.offsetHeight;let K=null;const q=this.getBoundingClientRect(),_=q.left+q.width/2,X=q.top+q.height/2,Y=Q.clientX-_,W=Q.clientY-X,N=Q.clientX,L=Q.clientY,B=3,A=(M,z,R=!1)=>{const E=$.getBoundingClientRect();K=E;const T=parseFloat(this.style.left)||0,S=parseFloat(this.style.top)||0,y=M-Y-E.left-Z/2,I=z-W-E.top-j/2,c=Math.max(-Z/2,Math.min(E.width-Z/2,y)),l=Math.max(-j/2,Math.min(E.height-j/2,I));let h=E.width>0?((J.x?c:T)+Z/2)/E.width:0.5,m=E.height>0?((J.y?l:S)+j/2)/E.height:0.5;if(this.#W(R)){if(J.x)h=this.#L(h);if(J.y)m=this.#L(m);if(J.x&&J.y){const v=this.#G(h,m);h=v.x,m=v.y}}if(J.x){const v=h*E.width-Z/2;this.style.left=`${Math.round(Math.max(-Z/2,Math.min(E.width-Z/2,v)))}px`}if(J.y){const v=m*E.height-j/2;this.style.top=`${Math.round(Math.max(-j/2,Math.min(E.height-j/2,v)))}px`}},U=(M)=>{if(!this.#Q)return;if(!this.#$){const z=M.clientX-N,R=M.clientY-L;if(z*z+R*R<B*B)return;if(this.classList.add("dragging"),this.style.cursor="grabbing",!this.hasAttribute("selected"))this.select()}this.#$=!0,A(M.clientX,M.clientY,M.shiftKey),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{...this.#v(K),shiftKey:M.shiftKey}}))},O=(M)=>{if(this.#Q=!1,this.style.cursor="",this.classList.remove("dragging"),window.removeEventListener("pointermove",U),window.removeEventListener("pointerup",O),this.#$){A(M.clientX,M.clientY,M.shiftKey),this.#A(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.#v(K)}));const z=(R)=>{R.stopPropagation(),R.preventDefault()};this.addEventListener("click",z,{capture:!0,once:!0})}else this.#A();this.#$=!1};window.addEventListener("pointermove",U),window.addEventListener("pointerup",O)}showColorTip(){if(this.#j){this.#j.style.display="";return}this.#I()}hideColorTip(){if(!this.#j)return;this.#j.style.display="none"}#I(){if(this.#j)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.#j=Q}#w(){if(!this.#j)return;this.#j.removeEventListener("input",this.#f),this.#j.removeEventListener("change",this.#x),this.#j.removeEventListener("add",this.#V),this.#j.removeEventListener("remove",this.#V),this.#j.remove(),this.#j=null}#S(Q,$){if($===void 0||$>=100)return Q;const{r:J,g:Z,b:j}=i(Q);return`rgba(${J}, ${Z}, ${j}, ${$/100})`}#f=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",this.#S(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.#S(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}))};#v(Q){const $=this.offsetWidth/2,J=this.offsetHeight/2,Z=parseFloat(this.style.left)||0,j=parseFloat(this.style.top)||0,K=Q.width>0?(Z+$)/Q.width:0,q=Q.height>0?(j+J)/Q.height:0;return{x:Z,y:j,px:K,py:q}}}customElements.define("fig-handle",Z1);class j1 extends HTMLElement{static get observedAttributes(){return["value","disabled"]}get value(){return this.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q??"")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","menuitem");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}attributeChangedCallback(){}}customElements.define("fig-menu-item",j1);class K1 extends HTMLElement{connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","separator")}}customElements.define("fig-menu-separator",K1);class q1 extends HTMLElement{#Q=null;#$=null;#J=null;#K;#j;#Z;#_;#X=-1;static get observedAttributes(){return["position","offset","closedby","disabled","open"]}constructor(){super();this.#K=this.#O.bind(this),this.#j=this.#B.bind(this),this.#Z=this.#A.bind(this),this.#_=this.#z.bind(this)}get value(){return this.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q??"")}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(Q){if(Q)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(this.#q(),this.#Y(),this.#N(),this.#U(),this.#L(),this.#M(),this.open)this.#E()}disconnectedCallback(){if(this.#W(),this.#J)this.#J.disconnect(),this.#J=null;if(this.#Q)this.#Q.removeEventListener("close",this.#_),this.#Q.remove(),this.#Q=null}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="open"){if(J===null||J==="false")this.#H();else this.#E();return}if(Q==="disabled"){if(this.#$)if(J!==null&&J!=="false")this.#$.setAttribute("disabled","");else this.#$.removeAttribute("disabled");return}if(this.#Q&&(Q==="position"||Q==="offset"||Q==="closedby"))if(J!==null)this.#Q.setAttribute(Q,J);else this.#Q.removeAttribute(Q)}#q(){this.#$=this.querySelector("[fig-menu-trigger]")||this.querySelector(":scope > :not(fig-menu-item):not(fig-menu-separator)")}#Y(){this.#Q=document.createElement("dialog",{is:"fig-popup"}),this.#Q.setAttribute("is","fig-popup"),this.#Q.setAttribute("theme","menu"),this.#Q.setAttribute("role","menu");const Q=this.getAttribute("position")||"bottom left";this.#Q.setAttribute("position",Q);const $=this.getAttribute("offset");if($)this.#Q.setAttribute("offset",$);const J=this.getAttribute("closedby");if(J)this.#Q.setAttribute("closedby",J);if(this.#$)this.#Q.anchor=this.#$;this.#Q.addEventListener("close",this.#_),this.appendChild(this.#Q)}#N(){const Q=Array.from(this.querySelectorAll(":scope > fig-menu-item, :scope > fig-menu-separator"));for(let $ of Q)this.#Q.appendChild($)}#U(){if(this.#$)this.#$.addEventListener("click",this.#K),this.#$.setAttribute("aria-haspopup","menu"),this.#$.setAttribute("aria-expanded","false");if(this.#Q)this.#Q.addEventListener("click",this.#j),this.#Q.addEventListener("keydown",this.#Z)}#W(){if(this.#$)this.#$.removeEventListener("click",this.#K);if(this.#Q)this.#Q.removeEventListener("click",this.#j),this.#Q.removeEventListener("keydown",this.#Z)}#L(){this.#J=new MutationObserver((Q)=>{for(let $ of Q)for(let J of $.addedNodes){if(J.nodeType!==1||J===this.#Q)continue;if((J.tagName==="FIG-MENU-ITEM"||J.tagName==="FIG-MENU-SEPARATOR")&&J.parentElement===this)this.#Q.appendChild(J);else if(!this.#$&&J.parentElement===this){if(this.#q(),this.#$)this.#$.addEventListener("click",this.#K),this.#$.setAttribute("aria-haspopup","menu"),this.#$.setAttribute("aria-expanded","false"),this.#Q.anchor=this.#$,this.#M()}}}),this.#J.observe(this,{childList:!0})}#G(){if(!this.#Q)return[];return Array.from(this.#Q.querySelectorAll("fig-menu-item:not([disabled]):not([disabled='true'])"))}#M(){if(!this.#$)return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.#$.setAttribute("disabled","");else this.#$.removeAttribute("disabled")}#O(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(Q.stopPropagation(),this.open)this.open=!1;else this.open=!0}#B(Q){const $=Q.target.closest("fig-menu-item");if(!$)return;if($.hasAttribute("disabled")&&$.getAttribute("disabled")!=="false")return;this.#R($)}#A(Q){const $=this.#G();if(!$.length)return;switch(Q.key){case"ArrowDown":{Q.preventDefault(),this.#X=Math.min(this.#X+1,$.length-1),$[this.#X]?.focus();break}case"ArrowUp":{Q.preventDefault(),this.#X=Math.max(this.#X-1,0),$[this.#X]?.focus();break}case"Home":{Q.preventDefault(),this.#X=0,$[0]?.focus();break}case"End":{Q.preventDefault(),this.#X=$.length-1,$[this.#X]?.focus();break}case"Enter":case" ":{Q.preventDefault();const J=$[this.#X];if(J)this.#R(J);break}}}#z(){if(this.hasAttribute("open"))this.removeAttribute("open");if(this.#$)this.#$.setAttribute("aria-expanded","false"),this.#$.focus();this.#X=-1}#R(Q){const $=Q.getAttribute("value")||Q.textContent.trim();this.setAttribute("value",$),this.dispatchEvent(new CustomEvent("change",{detail:{value:$,item:Q},bubbles:!0})),this.open=!1}#E(){if(!this.#Q)return;if(this.#Q.open=!0,this.#$)this.#$.setAttribute("aria-expanded","true");this.#X=0,requestAnimationFrame(()=>{const Q=this.#G();if(Q.length)Q[0].focus()})}#H(){if(!this.#Q)return;this.#Q.open=!1}}customElements.define("fig-menu",q1);

package/fig.js

@@ -14727,8 +14727,6 @@ class FigMenu extends HTMLElement {
   }
 
   connectedCallback() {
-    this.style.display = "contents";
-
     this.#detectTrigger();
     this.#createPopup();
     this.#moveItemsToPopup();
@@ -14850,12 +14848,21 @@ class FigMenu extends HTMLElement {
     this.#observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         for (const node of mutation.addedNodes) {
+          if (node.nodeType !== 1 || node === this.#popup) continue;
           if (
-            node.nodeType === 1 &&
             (node.tagName === "FIG-MENU-ITEM" || node.tagName === "FIG-MENU-SEPARATOR") &&
             node.parentElement === this
           ) {
             this.#popup.appendChild(node);
+          } else if (!this.#trigger && node.parentElement === this) {
+            this.#detectTrigger();
+            if (this.#trigger) {
+              this.#trigger.addEventListener("click", this.#boundTriggerClick);
+              this.#trigger.setAttribute("aria-haspopup", "menu");
+              this.#trigger.setAttribute("aria-expanded", "false");
+              this.#popup.anchor = this.#trigger;
+              this.#syncDisabled();
+            }
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",