@rogieking/figui3 4.12.1 → 4.12.2

package/dist/fig.js

@@ -446,4 +446,4 @@ var U1=(Q,$)=>()=>(Q&&($=Q(Q=0)),$);var L1={};var N0=U1(()=>{/*! Vendored from @
     `,this.#n(Q)}#n(Q){let $=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{let _={video:q?{deviceId:{exact:q}}:!0};if(this.#U.stream)this.#U.stream.getTracks().forEach((N)=>N.stop());this.#U.stream=await navigator.mediaDevices.getUserMedia(_),$.srcObject=this.#U.stream,$.style.display="block",J.style.display="none";let Y=(await navigator.mediaDevices.enumerateDevices()).filter((N)=>N.kind==="videoinput");if(Y.length>1)j.style.display="block",j.innerHTML=Y.map((N,W)=>`<option value="${N.deviceId}">${N.label||`Camera ${W+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.#H=new MutationObserver(()=>{if(Q.style.display!=="none"&&!this.#U.stream)K()}),this.#H.observe(Q,{attributes:!0,attributeFilter:["style"]}),j.addEventListener("change",(q)=>{K(q.target.value)}),Z.addEventListener("click",()=>{if(!this.#U.stream)return;let 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.#F(),this.#x(),this.#E("image");let _=this.#J.querySelector("fig-tabs");_.value="image"})}#o(Q){let $=Q.h/360,J=Q.s/100,Z=Q.v/100,j,K,q,_=Math.floor($*6),X=$*6-_,Y=Z*(1-J),N=Z*(1-X*J),W=Z*(1-(1-X)*J);switch(_%6){case 0:j=Z,K=W,q=Y;break;case 1:j=N,K=Z,q=Y;break;case 2:j=Y,K=Z,q=W;break;case 3:j=Y,K=N,q=Z;break;case 4:j=W,K=Y,q=Z;break;case 5:j=Z,K=Y,q=N;break}return{r:Math.round(j*255),g:Math.round(K*255),b:Math.round(q*255)}}#e(Q){let $=Q.r/255,J=Q.g/255,Z=Q.b/255,j=Math.max($,J,Z),K=Math.min($,J,Z),q=j-K,_=0,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";let $=this.#o(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){let $=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})}#W0(Q,$=1){let 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){let 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){let $=Q.r/255,J=Q.g/255,Z=Q.b/255,j=Math.max($,J,Z),K=Math.min($,J,Z),q,_,X=(j+K)/2;if(j===K)q=_=0;else{let 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){let $=Q.h/360,J=Q.s/100,Z=Q.l/100,j,K,q;if(J===0)j=K=q=Z;else{let _=(N,W,G)=>{if(G<0)G+=1;if(G>1)G-=1;if(G<0.16666666666666666)return N+(W-N)*6*G;if(G<0.5)return W;if(G<0.6666666666666666)return N+(W-N)*(0.6666666666666666-G)*6;return N},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){let $=(W)=>{return W=W/255,W<=0.04045?W/12.92:Math.pow((W+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),N=Math.cbrt(_);return{l:0.2104542553*X+0.793617785*Y-0.0040720468*N,a:1.9779984951*X-2.428592205*Y+0.4505937099*N,b:0.0259040371*X+0.7827717662*Y-0.808675766*N}}#M0(Q){let $=this.#Y0(Q);return{l:$.l,c:Math.sqrt($.a*$.a+$.b*$.b),h:(Math.atan2($.b,$.a)*180/Math.PI+360)%360}}#N0(Q){let $=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)=>{let 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)}}#B0(Q){let $=Q.h*Math.PI/180;return this.#N0({l:Q.l,a:Q.c*Math.cos($),b:Q.c*Math.sin($)})}#x(){this.#F(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#u(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let 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.#W}};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.#D(),this.#F(),this.#J){if(!this.#O){if(this.#f(),this.#p(),this.#B)this.#B.setAttribute("value",this.#_.h);if(this.#A)this.#A.setAttribute("value",this.#_.a*100),this.#A.setAttribute("color",this.#s(this.#_))}}break;case"disabled":break}}}customElements.define("fig-fill-picker",e);class J1 extends HTMLElement{#$=null;#Q=null;#J=null;#K=this.#B.bind(this);#j=this.#A.bind(this);static get observedAttributes(){return["value","selected","disabled","alpha","control"]}get#Z(){return this.getAttribute("control")||"color"}connectedCallback(){this.#Y(),this.#G()}disconnectedCallback(){this.#_(),this.removeEventListener("click",this.#W)}#_(){if(this.#$)this.#$.removeEventListener("input",this.#K),this.#$.removeEventListener("change",this.#j);if(this.#J)this.#J.disconnect(),this.#J=null}#X(){if(this.#J)this.#J.disconnect(),this.#J=null;if(!this.#Q)return;this.#J=new MutationObserver(()=>{if(this.#Q?.hasAttribute("selected")&&this.#Q.getAttribute("selected")!=="false"){if(!this.hasAttribute("selected"))this.setAttribute("selected","")}else if(this.hasAttribute("selected"))this.removeAttribute("selected")}),this.#J.observe(this.#Q,{attributes:!0,attributeFilter:["selected"]})}get#q(){let Q=this.getAttribute("alpha");return Q===null||Q!=="false"}#Y(){let Q=this.#Z;if(Q==="add"||Q==="remove"){let 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.#$=null,this.#Q=null,this.addEventListener("click",this.#W);return}this.removeEventListener("click",this.#W);let $=(this.getAttribute("value")||"").trim(),J=this.#L($),Z=this.#N($),j=this.#q?"":'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.#$=this.querySelector("fig-fill-picker"),this.#Q=this.querySelector("fig-chit"),this.#_(),this.#$?.addEventListener("input",this.#K),this.#$?.addEventListener("change",this.#j),this.#X()}#W=()=>{let Q=this.#Z;this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,composed:!0}))};#U(Q){if(!Q)return"#D9D9D9";let $=Q.replace("#","").trim();if($.length===3||$.length===4){let[J,Z,j]=$;return`#${J}${J}${Z}${Z}${j}${j}`.toUpperCase()}if($.length===6||$.length===8)return`#${$.slice(0,6)}`.toUpperCase();return"#D9D9D9"}#N(Q){if(!Q)return 1;let $=String(Q).trim();if($.startsWith("#")&&$.length===9)return parseInt($.slice(7,9),16)/255;let J=$.match(/rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/i);if(J)return parseFloat(J[1]);return 1}#L(Q){if(!Q)return"#D9D9D9";let $=String(Q).trim();if($.startsWith("{"))try{let J=JSON.parse($);if(J?.color)return this.#L(J.color)}catch{}if($.startsWith("#"))return this.#U($);try{let{ctx:J}=M0(1,1);J.fillStyle="#000000",J.fillStyle=$;let Z=J.fillStyle;if(Z.startsWith("#"))return this.#U(Z);let j=Z.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(j){let 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"}#G(){let Q=this.getAttribute("value"),$=this.#L(Q),J=this.#N(Q);if(Q!==$&&J>=1){this.setAttribute("value",$);return}if(this.#$){let Z=J<1?{type:"solid",color:$,opacity:Math.round(J*100)}:{type:"solid",color:$};if(this.#$.setAttribute("value",JSON.stringify(Z)),this.#q)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")}#M(Q,$){let J=this.#L(Q?.color),Z=this.#L(this.getAttribute("value"));if(J!==Z)this.setAttribute("value",J);else this.#G();let j={color:this.value};if(this.#q){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.#M(Q.detail,"input")}#A(Q){Q.stopPropagation(),this.#M(Q.detail,"change")}attributeChangedCallback(Q,$,J){if($===J)return;if(!this.isConnected)return;switch(Q){case"control":this.#Y();break;case"value":case"selected":case"disabled":this.#G();break}}get value(){return this.#L(this.getAttribute("value"))}set value(Q){if(Q===null||Q===void 0||Q===""){this.removeAttribute("value");return}this.setAttribute("value",this.#L(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",J1);class Z1 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",Z1);class j1 extends HTMLElement{#$=null;#Q=this.#B.bind(this);#J=this.#A.bind(this);#K=this.#R.bind(this);#j=null;#Z=null;#_=null;#X=null;#q=null;constructor(){super()}static get observedAttributes(){return["value","disabled","choice-element","drag","overflow","loop"]}get#Y(){return this.getAttribute("overflow")==="scrollbar"?"scrollbar":"buttons"}get#W(){let 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;let $=this.choices;for(let Z of $){let j=Z===Q,K=Z.hasAttribute("selected");if(j&&!K)Z.setAttribute("selected","");else if(!j&&K)Z.removeAttribute("selected")}this.#$=Q;let J=Q?.getAttribute("value")??"";if(this.getAttribute("value")!==J){if(J)this.setAttribute("value",J)}this.#k(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.#K),this.#D(),this.#H(),this.#E(),this.#z(),requestAnimationFrame(()=>{this.#L(),this.#R(),this.#N()})}#N(){let Q=()=>{if(!this.isConnected)return;if(this.#$)this.#k(this.#$,"auto")},$=()=>{let J=this.querySelectorAll("img, video");for(let Z of J){if(Z.tagName==="IMG"?Z.complete:Z.readyState>=1)continue;let j=()=>{Z.removeEventListener("load",j),Z.removeEventListener("loadedmetadata",j),Z.removeEventListener("error",j),Q()};Z.addEventListener("load",j),Z.addEventListener("loadedmetadata",j),Z.addEventListener("error",j)}};requestAnimationFrame(()=>{$(),Q()})}disconnectedCallback(){this.removeEventListener("click",this.#Q),this.removeEventListener("keydown",this.#J),this.removeEventListener("scroll",this.#K),this.#P(),this.#j?.disconnect(),this.#j=null,this.#Z?.disconnect(),this.#Z=null,this.#F()}attributeChangedCallback(Q,$,J){if(Q==="value"&&J!==$&&J)this.#G(J);if(Q==="disabled"){let 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.#L());if(Q==="drag")if(this.#W)this.#H();else this.#P();if(Q==="overflow")this.#D()}#L(){let Q=this.choices;if(!Q.length){this.#$=null;return}let $=this.getAttribute("value");if($&&this.#G($))return;let J=Q.find((Z)=>Z.hasAttribute("selected"));if(J){this.selectedChoice=J;return}this.selectedChoice=Q[0]}#G(Q){let $=this.choices;for(let J of $)if(J.getAttribute("value")===Q)return this.selectedChoice=J,!0;return!1}#M(Q){let $=this.#U,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;let $=this.#M(Q.target);if(!$)return;if($.hasAttribute("disabled")&&$.getAttribute("disabled")!=="false")return;this.selectedChoice=$,this.#O()}#A(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let $=this.choices.filter((K)=>!K.hasAttribute("disabled")||K.getAttribute("disabled")==="false");if(!$.length)return;let J=$.indexOf(this.#$),Z=J,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)){let K=this.#M(document.activeElement);if(K&&K!==this.#$)this.selectedChoice=K,this.#O()}return;default:return}if(Z!==J&&$[Z])this.selectedChoice=$[Z],$[Z].focus(),this.#O()}#O(){let Q=this.value;this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#R(){if(this.#Y==="scrollbar")return;let Q=this.getAttribute("layout")==="horizontal",$=2;if(Q){let J=this.scrollLeft<=$,Z=this.scrollLeft+this.clientWidth>=this.scrollWidth-$;this.classList.toggle("overflow-start",!J),this.classList.toggle("overflow-end",!Z)}else{let 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)}#H(){if(this.#q?.bound)return;if(!this.#W)return;let 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;let 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;let 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)}#P(){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}#D(){if(this.#Y==="scrollbar")this.#F();else this.#S()}#F(){this.#_?.remove(),this.#X?.remove(),this.#_=null,this.#X=null,this.classList.remove("overflow-start","overflow-end")}#S(){if(this.#_)return;let Q=()=>{let $=document.createElement("span");return $.className="fig-mask-icon fig-chooser-nav-chevron",$.style.setProperty("--icon","var(--icon-chevron)"),$.style.setProperty("--size","1rem"),$};this.#_=document.createElement("button"),this.#_.className="fig-chooser-nav-start",this.#_.setAttribute("tabindex","-1"),this.#_.setAttribute("aria-label","Scroll back"),this.#_.appendChild(Q()),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.#X.appendChild(Q()),this.#_.addEventListener("pointerup",($)=>{$.stopPropagation(),this.#I(-1)}),this.#X.addEventListener("pointerup",($)=>{$.stopPropagation(),this.#I(1)}),this.prepend(this.#_),this.append(this.#X)}#I(Q){let $=this.getAttribute("layout")==="horizontal",Z=($?this.clientWidth:this.clientHeight)*0.8*Q;this.scrollBy({[$?"left":"top"]:Z,behavior:"smooth"})}#k(Q,$="smooth"){if(!Q)return;requestAnimationFrame(()=>{if(!Q.isConnected)return;let J=this.scrollHeight>this.clientHeight,Z=this.scrollWidth>this.clientWidth;if(!Z&&!J)return;let j=Q.getBoundingClientRect(),K=this.getBoundingClientRect(),q={behavior:$};if(J){let _=j.top-K.top+this.scrollTop+j.height/2;q.top=_-this.clientHeight/2}if(Z){let _=j.left-K.left+this.scrollLeft+j.width/2;q.left=_-this.clientWidth/2}this.scrollTo(q)})}#E(){this.#j?.disconnect(),this.#j=new MutationObserver(()=>{let Q=this.choices;if(this.#$&&!Q.includes(this.#$))this.#$=null,this.#L();else if(!this.#$&&Q.length)this.#L()}),this.#j.observe(this,{childList:!0,subtree:!0})}}customElements.define("fig-chooser",j1);class K1 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;#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(){let Q=this.getAttribute("drag");return Q!==null&&Q!=="false"}get#W(){let Q=(this.getAttribute("drag-axes")||"x,y").toLowerCase();return{x:Q.includes("x"),y:Q.includes("y")}}get#U(){let Q=this.getAttribute("drag-snapping");if(Q===null)return"false";let $=Q.trim().toLowerCase();if($==="modifier")return"modifier";if($===""||$==="true")return"true";return"false"}#N(Q){let $=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){let 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(){let Q=this.getAttribute("drag-surface");if(!Q||Q==="parent")return this.parentElement;return this.closest(Q)}get value(){let Q=this.#M();if(!Q)return"0% 0%";let $=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%")}#B(Q){let $=Q==null?"":String(Q).trim();if(!$)return{xPct:0,yPct:0};let J=$.split(/[\s,]+/).filter(Boolean),Z=(q)=>{if(!q)return 0;let _=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}}#A(Q){let $=this.#M();if(!$)return;let{xToken:J,yToken:Z}=this.#B(Q),j=$.getBoundingClientRect(),K=this.offsetWidth/2,q=this.offsetHeight/2,_=(Y,N,W)=>{if(Y&&typeof Y==="object"&&"px"in Y)return Math.max(-W,Math.min(N-W,Y.px-W));let D=(typeof Y==="number"?Y:0)/100*N;return Math.max(-W,Math.min(N-W,D-W))},X=this.#W;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`}#O(){this.#K=!0,this.setAttribute("value",this.value),this.#K=!1}get#R(){return this.getAttribute("hit-area-mode")||"handle"}#z(){let Q=this.getAttribute("hit-area");if(!Q)return null;let $=Q.trim().split(/\s+/),J=0,Z=0,j=!1,K=[];for(let q of $){if(q==="circle"){j=!0;continue}let _=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}}#H(){let Q=this.#z();if(!Q){if(this.#Z)this.#Z.remove(),this.#Z=null;this.style.removeProperty("--fig-handle-hit-area-size");return}if(!this.#Z){let $=document.createElement("div");$.classList.add("fig-handle-hit-area"),$.addEventListener("pointerdown",(J)=>this.#P(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"}#P(Q){if(this.hasAttribute("disabled"))return;if(Q.target!==this.#Z)return;if(this.#R==="delegate")Q.preventDefault(),Q.stopPropagation(),this.dispatchEvent(new CustomEvent("hitareadown",{bubbles:!0,detail:{originalEvent:Q}}));else this.#E(Q)}connectedCallback(){if(!this.hasAttribute("type"))this.setAttribute("type","canvas");this.#I(),this.#H(),this.addEventListener("click",this.#D),document.addEventListener("pointerdown",this.#F),document.addEventListener("keydown",this.#S);let Q=this.getAttribute("value");if(Q)this.#A(Q);if(this.#X)this.#C()}disconnectedCallback(){if(this.#k(),this.#w(),this.#Z)this.#Z.remove(),this.#Z=null;this.removeEventListener("click",this.#D),document.removeEventListener("pointerdown",this.#F),document.removeEventListener("keydown",this.#S)}select(){if(this.hasAttribute("disabled"))return;if(this.setAttribute("selected",""),this.getAttribute("type")==="color"&&!this.#$)this.#C()}deselect(){this.removeAttribute("selected"),this.#w()}#D=(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.#j&&Q.target.closest?.("dialog, [popover]"))return;this.deselect()};#S=(Q)=>{if(Q.key!=="Enter")return;if(!this.hasAttribute("selected"))return;if(this.getAttribute("type")!=="color")return;if(this.#j)return;Q.preventDefault(),this.#C()};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.#I();if(Q==="hit-area")this.#H();if(Q==="value"&&!this.#K&&!this.#$)this.#A(J);if(Q==="control")if(this.#X)this.#w(),this.#C();else this.#w()}#I(){if(this.#Y&&!this.#J)this.#J=(Q)=>this.#E(Q),this.addEventListener("pointerdown",this.#J);else if(!this.#Y&&this.#J)this.#k()}#k(){if(this.#J)this.removeEventListener("pointerdown",this.#J),this.#J=null;this.#$=!1}#E(Q){if(!this.#Y||this.hasAttribute("disabled"))return;Q.preventDefault();let $=this.#M();if(!$)return;this.#$=!0;let J=this.#W,Z=this.offsetWidth,j=this.offsetHeight,K=null,q=this.getBoundingClientRect(),_=q.left+q.width/2,X=q.top+q.height/2,Y=Q.clientX-_,N=Q.clientY-X,W=Q.clientX,G=Q.clientY,D=3,R=(M,O,A=!1)=>{let H=$.getBoundingClientRect();K=H;let T=parseFloat(this.style.left)||0,S=parseFloat(this.style.top)||0,f=M-Y-H.left-Z/2,I=O-N-H.top-j/2,c=Math.max(-Z/2,Math.min(H.width-Z/2,f)),o=Math.max(-j/2,Math.min(H.height-j/2,I)),h=H.width>0?((J.x?c:T)+Z/2)/H.width:0.5,g=H.height>0?((J.y?o:S)+j/2)/H.height:0.5;if(this.#N(A)){if(J.x)h=this.#L(h);if(J.y)g=this.#L(g);if(J.x&&J.y){let b=this.#G(h,g);h=b.x,g=b.y}}if(J.x){let b=h*H.width-Z/2;this.style.left=`${Math.round(Math.max(-Z/2,Math.min(H.width-Z/2,b)))}px`}if(J.y){let b=g*H.height-j/2;this.style.top=`${Math.round(Math.max(-j/2,Math.min(H.height-j/2,b)))}px`}},L=(M)=>{if(!this.#$)return;if(!this.#Q){let O=M.clientX-W,A=M.clientY-G;if(O*O+A*A<D*D)return;if(this.classList.add("dragging"),this.style.cursor="grabbing",!this.hasAttribute("selected"))this.select()}this.#Q=!0,R(M.clientX,M.clientY,M.shiftKey),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{...this.#b(K),shiftKey:M.shiftKey}}))},B=(M)=>{if(this.#$=!1,this.style.cursor="",this.classList.remove("dragging"),window.removeEventListener("pointermove",L),window.removeEventListener("pointerup",B),this.#Q){R(M.clientX,M.clientY,M.shiftKey),this.#O(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.#b(K)}));let O=(A)=>{A.stopPropagation(),A.preventDefault()};this.addEventListener("click",O,{capture:!0,once:!0})}else this.#O();this.#Q=!1};window.addEventListener("pointermove",L),window.addEventListener("pointerup",B)}showColorTip(){if(this.#j){this.#j.style.display="";return}this.#C()}hideColorTip(){if(!this.#j)return;this.#j.style.display="none"}#C(){if(this.#j)return;let 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.#y),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.#y),this.#j.removeEventListener("add",this.#V),this.#j.removeEventListener("remove",this.#V),this.#j.remove(),this.#j=null}#T(Q,$){if($===void 0||$>=100)return Q;let{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.#T(Q.detail.color,Q.detail.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{color:Q.detail.color,opacity:Q.detail.opacity}}))};#y=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",this.#T(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}))};#b(Q){let $=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",K1);class q1 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",q1);class _1 extends HTMLElement{connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","separator")}}customElements.define("fig-menu-separator",_1);class X1 extends HTMLElement{#$=null;#Q=null;#J=null;#K;#j;#Z;#_;#X=-1;static get observedAttributes(){return["position","offset","closedby","disabled","open"]}constructor(){super();this.#K=this.#B.bind(this),this.#j=this.#A.bind(this),this.#Z=this.#O.bind(this),this.#_=this.#R.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.#W(),this.#U(),this.#L(),this.#M(),this.open)this.#H()}disconnectedCallback(){if(this.#N(),this.#J)this.#J.disconnect(),this.#J=null;if(this.#$)this.#$.removeEventListener("close",this.#_),this.#$.remove(),this.#$=null}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="open"){if(J===null||J==="false")this.#P();else this.#H();return}if(Q==="disabled"){if(this.#Q)if(J!==null&&J!=="false")this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");return}if(this.#$&&(Q==="position"||Q==="offset"||Q==="closedby"))if(J!==null)this.#$.setAttribute(Q,J);else this.#$.removeAttribute(Q)}#q(){this.#Q=this.querySelector("[fig-menu-trigger]")||this.querySelector(":scope > :not(fig-menu-item):not(fig-menu-separator)")}#Y(){this.#$=document.createElement("dialog",{is:"fig-popup"}),this.#$.setAttribute("is","fig-popup"),this.#$.setAttribute("theme","menu"),this.#$.setAttribute("role","menu");let Q=this.getAttribute("position")||"bottom left";this.#$.setAttribute("position",Q);let $=this.getAttribute("offset");if($)this.#$.setAttribute("offset",$);let J=this.getAttribute("closedby");if(J)this.#$.setAttribute("closedby",J);if(this.#Q)this.#$.anchor=this.#Q;this.#$.addEventListener("close",this.#_),this.appendChild(this.#$)}#W(){let Q=Array.from(this.querySelectorAll(":scope > fig-menu-item, :scope > fig-menu-separator"));for(let $ of Q)this.#$.appendChild($)}#U(){if(this.#Q)this.#Q.addEventListener("click",this.#K),this.#Q.setAttribute("aria-haspopup","menu"),this.#Q.setAttribute("aria-expanded","false");if(this.#$)this.#$.addEventListener("click",this.#j),this.#$.addEventListener("keydown",this.#Z)}#N(){if(this.#Q)this.#Q.removeEventListener("click",this.#K);if(this.#$)this.#$.removeEventListener("click",this.#j),this.#$.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.#$)continue;if((J.tagName==="FIG-MENU-ITEM"||J.tagName==="FIG-MENU-SEPARATOR")&&J.parentElement===this)this.#$.appendChild(J);else if(!this.#Q&&J.parentElement===this){if(this.#q(),this.#Q)this.#Q.addEventListener("click",this.#K),this.#Q.setAttribute("aria-haspopup","menu"),this.#Q.setAttribute("aria-expanded","false"),this.#$.anchor=this.#Q,this.#M()}}}),this.#J.observe(this,{childList:!0})}#G(){if(!this.#$)return[];return Array.from(this.#$.querySelectorAll("fig-menu-item:not([disabled]):not([disabled='true'])"))}#M(){if(!this.#Q)return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled")}#B(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(Q.stopPropagation(),this.open)this.open=!1;else this.open=!0}#A(Q){let $=Q.target.closest("fig-menu-item");if(!$)return;if($.hasAttribute("disabled")&&$.getAttribute("disabled")!=="false")return;this.#z($)}#O(Q){let $=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();let J=$[this.#X];if(J)this.#z(J);break}}}#R(){if(this.hasAttribute("open"))this.removeAttribute("open");if(this.#Q)this.#Q.setAttribute("aria-expanded","false"),this.#Q.focus();this.#X=-1}#z(Q){let $=Q.getAttribute("value")||Q.textContent.trim();this.setAttribute("value",$),this.dispatchEvent(new CustomEvent("change",{detail:{value:$,item:Q},bubbles:!0})),this.open=!1}#H(){if(!this.#$)return;if(this.#$.open=!0,this.#Q)this.#Q.setAttribute("aria-expanded","true");this.#X=0,requestAnimationFrame(()=>{let Q=this.#G();if(Q.length)Q[0].focus()})}#P(){if(!this.#$)return;this.#$.open=!1}}customElements.define("fig-menu",X1);
+      </fig-fill-picker>`,this.#$=this.querySelector("fig-fill-picker"),this.#Q=this.querySelector("fig-chit"),this.#_(),this.#$?.addEventListener("input",this.#K),this.#$?.addEventListener("change",this.#j),this.#X()}#W=()=>{let Q=this.#Z;this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,composed:!0}))};#U(Q){if(!Q)return"#D9D9D9";let $=Q.replace("#","").trim();if($.length===3||$.length===4){let[J,Z,j]=$;return`#${J}${J}${Z}${Z}${j}${j}`.toUpperCase()}if($.length===6||$.length===8)return`#${$.slice(0,6)}`.toUpperCase();return"#D9D9D9"}#N(Q){if(!Q)return 1;let $=String(Q).trim();if($.startsWith("#")&&$.length===9)return parseInt($.slice(7,9),16)/255;let J=$.match(/rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/i);if(J)return parseFloat(J[1]);return 1}#L(Q){if(!Q)return"#D9D9D9";let $=String(Q).trim();if($.startsWith("{"))try{let J=JSON.parse($);if(J?.color)return this.#L(J.color)}catch{}if($.startsWith("#"))return this.#U($);try{let{ctx:J}=M0(1,1);J.fillStyle="#000000",J.fillStyle=$;let Z=J.fillStyle;if(Z.startsWith("#"))return this.#U(Z);let j=Z.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(j){let 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"}#G(){let Q=this.getAttribute("value"),$=this.#L(Q),J=this.#N(Q);if(Q!==$&&J>=1){this.setAttribute("value",$);return}if(this.#$){let Z=J<1?{type:"solid",color:$,opacity:Math.round(J*100)}:{type:"solid",color:$};if(this.#$.setAttribute("value",JSON.stringify(Z)),this.#q)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")}#M(Q,$){let J=this.#L(Q?.color),Z=this.#L(this.getAttribute("value"));if(J!==Z)this.setAttribute("value",J);else this.#G();let j={color:this.value};if(this.#q){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.#M(Q.detail,"input")}#A(Q){Q.stopPropagation(),this.#M(Q.detail,"change")}attributeChangedCallback(Q,$,J){if($===J)return;if(!this.isConnected)return;switch(Q){case"control":this.#Y();break;case"value":case"selected":case"disabled":this.#G();break}}get value(){return this.#L(this.getAttribute("value"))}set value(Q){if(Q===null||Q===void 0||Q===""){this.removeAttribute("value");return}this.setAttribute("value",this.#L(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",J1);class Z1 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",Z1);class j1 extends HTMLElement{#$=null;#Q=this.#B.bind(this);#J=this.#A.bind(this);#K=this.#R.bind(this);#j=null;#Z=null;#_=null;#X=null;#q=null;constructor(){super()}static get observedAttributes(){return["value","disabled","choice-element","drag","overflow","loop"]}get#Y(){return this.getAttribute("overflow")==="scrollbar"?"scrollbar":"buttons"}get#W(){let 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;let $=this.choices;for(let Z of $){let j=Z===Q,K=Z.hasAttribute("selected");if(j&&!K)Z.setAttribute("selected","");else if(!j&&K)Z.removeAttribute("selected")}this.#$=Q;let J=Q?.getAttribute("value")??"";if(this.getAttribute("value")!==J){if(J)this.setAttribute("value",J)}this.#k(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.#K),this.#D(),this.#H(),this.#E(),this.#z(),requestAnimationFrame(()=>{this.#L(),this.#R(),this.#N()})}#N(){let Q=()=>{if(!this.isConnected)return;if(this.#$)this.#k(this.#$,"auto")},$=()=>{let J=this.querySelectorAll("img, video");for(let Z of J){if(Z.tagName==="IMG"?Z.complete:Z.readyState>=1)continue;let j=()=>{Z.removeEventListener("load",j),Z.removeEventListener("loadedmetadata",j),Z.removeEventListener("error",j),Q()};Z.addEventListener("load",j),Z.addEventListener("loadedmetadata",j),Z.addEventListener("error",j)}};requestAnimationFrame(()=>{$(),Q()})}disconnectedCallback(){this.removeEventListener("click",this.#Q),this.removeEventListener("keydown",this.#J),this.removeEventListener("scroll",this.#K),this.#P(),this.#j?.disconnect(),this.#j=null,this.#Z?.disconnect(),this.#Z=null,this.#F()}attributeChangedCallback(Q,$,J){if(Q==="value"&&J!==$&&J)this.#G(J);if(Q==="disabled"){let 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.#L());if(Q==="drag")if(this.#W)this.#H();else this.#P();if(Q==="overflow")this.#D()}#L(){let Q=this.choices;if(!Q.length){this.#$=null;return}let $=this.getAttribute("value");if($&&this.#G($))return;let J=Q.find((Z)=>Z.hasAttribute("selected"));if(J){this.selectedChoice=J;return}this.selectedChoice=Q[0]}#G(Q){let $=this.choices;for(let J of $)if(J.getAttribute("value")===Q)return this.selectedChoice=J,!0;return!1}#M(Q){let $=this.#U,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;let $=this.#M(Q.target);if(!$)return;if($.hasAttribute("disabled")&&$.getAttribute("disabled")!=="false")return;this.selectedChoice=$,this.#O()}#A(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let $=this.choices.filter((K)=>!K.hasAttribute("disabled")||K.getAttribute("disabled")==="false");if(!$.length)return;let J=$.indexOf(this.#$),Z=J,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)){let K=this.#M(document.activeElement);if(K&&K!==this.#$)this.selectedChoice=K,this.#O()}return;default:return}if(Z!==J&&$[Z])this.selectedChoice=$[Z],$[Z].focus(),this.#O()}#O(){let Q=this.value;this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#R(){if(this.#Y==="scrollbar")return;let Q=this.getAttribute("layout")==="horizontal",$=2;if(Q){let J=this.scrollWidth-this.clientWidth>$,Z=!J||this.scrollLeft<=$,j=!J||this.scrollLeft+this.clientWidth>=this.scrollWidth-$;this.classList.toggle("overflow-start",!Z),this.classList.toggle("overflow-end",!j)}else{let J=this.scrollHeight-this.clientHeight>$,Z=!J||this.scrollTop<=$,j=!J||this.scrollTop+this.clientHeight>=this.scrollHeight-$;this.classList.toggle("overflow-start",!Z),this.classList.toggle("overflow-end",!j)}}#z(){this.#Z?.disconnect(),this.#Z=new ResizeObserver(()=>{this.#R()}),this.#Z.observe(this)}#H(){if(this.#q?.bound)return;if(!this.#W)return;let 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;let 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;let 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)}#P(){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}#D(){if(this.#Y==="scrollbar")this.#F();else this.#S()}#F(){this.#_?.remove(),this.#X?.remove(),this.#_=null,this.#X=null,this.classList.remove("overflow-start","overflow-end")}#S(){if(this.#_)return;let Q=()=>{let $=document.createElement("span");return $.className="fig-mask-icon fig-chooser-nav-chevron",$.style.setProperty("--icon","var(--icon-chevron)"),$.style.setProperty("--size","1rem"),$};this.#_=document.createElement("button"),this.#_.className="fig-chooser-nav-start",this.#_.setAttribute("tabindex","-1"),this.#_.setAttribute("aria-label","Scroll back"),this.#_.appendChild(Q()),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.#X.appendChild(Q()),this.#_.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#I(-1)}),this.#X.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#I(1)}),this.prepend(this.#_),this.append(this.#X)}#I(Q){let $=this.getAttribute("layout")==="horizontal",Z=($?this.clientWidth:this.clientHeight)*0.8*Q;this.scrollBy({[$?"left":"top"]:Z,behavior:"smooth"})}#k(Q,$="smooth"){if(!Q)return;requestAnimationFrame(()=>{if(!Q.isConnected)return;let J=this.scrollHeight>this.clientHeight,Z=this.scrollWidth>this.clientWidth;if(!Z&&!J)return;let j=Q.getBoundingClientRect(),K=this.getBoundingClientRect(),q={behavior:$};if(J){let _=j.top-K.top+this.scrollTop+j.height/2;q.top=_-this.clientHeight/2}if(Z){let _=j.left-K.left+this.scrollLeft+j.width/2;q.left=_-this.clientWidth/2}this.scrollTo(q)})}#E(){this.#j?.disconnect(),this.#j=new MutationObserver(()=>{let Q=this.choices;if(this.#$&&!Q.includes(this.#$))this.#$=null,this.#L();else if(!this.#$&&Q.length)this.#L()}),this.#j.observe(this,{childList:!0,subtree:!0})}}customElements.define("fig-chooser",j1);class K1 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;#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(){let Q=this.getAttribute("drag");return Q!==null&&Q!=="false"}get#W(){let Q=(this.getAttribute("drag-axes")||"x,y").toLowerCase();return{x:Q.includes("x"),y:Q.includes("y")}}get#U(){let Q=this.getAttribute("drag-snapping");if(Q===null)return"false";let $=Q.trim().toLowerCase();if($==="modifier")return"modifier";if($===""||$==="true")return"true";return"false"}#N(Q){let $=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){let 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(){let Q=this.getAttribute("drag-surface");if(!Q||Q==="parent")return this.parentElement;return this.closest(Q)}get value(){let Q=this.#M();if(!Q)return"0% 0%";let $=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%")}#B(Q){let $=Q==null?"":String(Q).trim();if(!$)return{xPct:0,yPct:0};let J=$.split(/[\s,]+/).filter(Boolean),Z=(q)=>{if(!q)return 0;let _=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}}#A(Q){let $=this.#M();if(!$)return;let{xToken:J,yToken:Z}=this.#B(Q),j=$.getBoundingClientRect(),K=this.offsetWidth/2,q=this.offsetHeight/2,_=(Y,N,W)=>{if(Y&&typeof Y==="object"&&"px"in Y)return Math.max(-W,Math.min(N-W,Y.px-W));let D=(typeof Y==="number"?Y:0)/100*N;return Math.max(-W,Math.min(N-W,D-W))},X=this.#W;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`}#O(){this.#K=!0,this.setAttribute("value",this.value),this.#K=!1}get#R(){return this.getAttribute("hit-area-mode")||"handle"}#z(){let Q=this.getAttribute("hit-area");if(!Q)return null;let $=Q.trim().split(/\s+/),J=0,Z=0,j=!1,K=[];for(let q of $){if(q==="circle"){j=!0;continue}let _=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}}#H(){let Q=this.#z();if(!Q){if(this.#Z)this.#Z.remove(),this.#Z=null;this.style.removeProperty("--fig-handle-hit-area-size");return}if(!this.#Z){let $=document.createElement("div");$.classList.add("fig-handle-hit-area"),$.addEventListener("pointerdown",(J)=>this.#P(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"}#P(Q){if(this.hasAttribute("disabled"))return;if(Q.target!==this.#Z)return;if(this.#R==="delegate")Q.preventDefault(),Q.stopPropagation(),this.dispatchEvent(new CustomEvent("hitareadown",{bubbles:!0,detail:{originalEvent:Q}}));else this.#E(Q)}connectedCallback(){if(!this.hasAttribute("type"))this.setAttribute("type","canvas");this.#I(),this.#H(),this.addEventListener("click",this.#D),document.addEventListener("pointerdown",this.#F),document.addEventListener("keydown",this.#S);let Q=this.getAttribute("value");if(Q)this.#A(Q);if(this.#X)this.#C()}disconnectedCallback(){if(this.#k(),this.#w(),this.#Z)this.#Z.remove(),this.#Z=null;this.removeEventListener("click",this.#D),document.removeEventListener("pointerdown",this.#F),document.removeEventListener("keydown",this.#S)}select(){if(this.hasAttribute("disabled"))return;if(this.setAttribute("selected",""),this.getAttribute("type")==="color"&&!this.#$)this.#C()}deselect(){this.removeAttribute("selected"),this.#w()}#D=(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.#j&&Q.target.closest?.("dialog, [popover]"))return;this.deselect()};#S=(Q)=>{if(Q.key!=="Enter")return;if(!this.hasAttribute("selected"))return;if(this.getAttribute("type")!=="color")return;if(this.#j)return;Q.preventDefault(),this.#C()};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.#I();if(Q==="hit-area")this.#H();if(Q==="value"&&!this.#K&&!this.#$)this.#A(J);if(Q==="control")if(this.#X)this.#w(),this.#C();else this.#w()}#I(){if(this.#Y&&!this.#J)this.#J=(Q)=>this.#E(Q),this.addEventListener("pointerdown",this.#J);else if(!this.#Y&&this.#J)this.#k()}#k(){if(this.#J)this.removeEventListener("pointerdown",this.#J),this.#J=null;this.#$=!1}#E(Q){if(!this.#Y||this.hasAttribute("disabled"))return;Q.preventDefault();let $=this.#M();if(!$)return;this.#$=!0;let J=this.#W,Z=this.offsetWidth,j=this.offsetHeight,K=null,q=this.getBoundingClientRect(),_=q.left+q.width/2,X=q.top+q.height/2,Y=Q.clientX-_,N=Q.clientY-X,W=Q.clientX,G=Q.clientY,D=3,R=(M,O,A=!1)=>{let H=$.getBoundingClientRect();K=H;let T=parseFloat(this.style.left)||0,S=parseFloat(this.style.top)||0,f=M-Y-H.left-Z/2,I=O-N-H.top-j/2,c=Math.max(-Z/2,Math.min(H.width-Z/2,f)),o=Math.max(-j/2,Math.min(H.height-j/2,I)),h=H.width>0?((J.x?c:T)+Z/2)/H.width:0.5,g=H.height>0?((J.y?o:S)+j/2)/H.height:0.5;if(this.#N(A)){if(J.x)h=this.#L(h);if(J.y)g=this.#L(g);if(J.x&&J.y){let b=this.#G(h,g);h=b.x,g=b.y}}if(J.x){let b=h*H.width-Z/2;this.style.left=`${Math.round(Math.max(-Z/2,Math.min(H.width-Z/2,b)))}px`}if(J.y){let b=g*H.height-j/2;this.style.top=`${Math.round(Math.max(-j/2,Math.min(H.height-j/2,b)))}px`}},L=(M)=>{if(!this.#$)return;if(!this.#Q){let O=M.clientX-W,A=M.clientY-G;if(O*O+A*A<D*D)return;if(this.classList.add("dragging"),this.style.cursor="grabbing",!this.hasAttribute("selected"))this.select()}this.#Q=!0,R(M.clientX,M.clientY,M.shiftKey),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{...this.#b(K),shiftKey:M.shiftKey}}))},B=(M)=>{if(this.#$=!1,this.style.cursor="",this.classList.remove("dragging"),window.removeEventListener("pointermove",L),window.removeEventListener("pointerup",B),this.#Q){R(M.clientX,M.clientY,M.shiftKey),this.#O(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.#b(K)}));let O=(A)=>{A.stopPropagation(),A.preventDefault()};this.addEventListener("click",O,{capture:!0,once:!0})}else this.#O();this.#Q=!1};window.addEventListener("pointermove",L),window.addEventListener("pointerup",B)}showColorTip(){if(this.#j){this.#j.style.display="";return}this.#C()}hideColorTip(){if(!this.#j)return;this.#j.style.display="none"}#C(){if(this.#j)return;let 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.#y),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.#y),this.#j.removeEventListener("add",this.#V),this.#j.removeEventListener("remove",this.#V),this.#j.remove(),this.#j=null}#T(Q,$){if($===void 0||$>=100)return Q;let{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.#T(Q.detail.color,Q.detail.opacity)),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{color:Q.detail.color,opacity:Q.detail.opacity}}))};#y=(Q)=>{if(Q.stopPropagation(),Q.detail?.color)this.setAttribute("color",this.#T(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}))};#b(Q){let $=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",K1);class q1 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",q1);class _1 extends HTMLElement{connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","separator")}}customElements.define("fig-menu-separator",_1);class X1 extends HTMLElement{#$=null;#Q=null;#J=null;#K;#j;#Z;#_;#X=-1;static get observedAttributes(){return["position","offset","closedby","disabled","open"]}constructor(){super();this.#K=this.#B.bind(this),this.#j=this.#A.bind(this),this.#Z=this.#O.bind(this),this.#_=this.#R.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.#W(),this.#U(),this.#L(),this.#M(),this.open)this.#H()}disconnectedCallback(){if(this.#N(),this.#J)this.#J.disconnect(),this.#J=null;if(this.#$)this.#$.removeEventListener("close",this.#_),this.#$.remove(),this.#$=null}attributeChangedCallback(Q,$,J){if($===J)return;if(Q==="open"){if(J===null||J==="false")this.#P();else this.#H();return}if(Q==="disabled"){if(this.#Q)if(J!==null&&J!=="false")this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");return}if(this.#$&&(Q==="position"||Q==="offset"||Q==="closedby"))if(J!==null)this.#$.setAttribute(Q,J);else this.#$.removeAttribute(Q)}#q(){this.#Q=this.querySelector("[fig-menu-trigger]")||this.querySelector(":scope > :not(fig-menu-item):not(fig-menu-separator)")}#Y(){this.#$=document.createElement("dialog",{is:"fig-popup"}),this.#$.setAttribute("is","fig-popup"),this.#$.setAttribute("theme","menu"),this.#$.setAttribute("role","menu");let Q=this.getAttribute("position")||"bottom left";this.#$.setAttribute("position",Q);let $=this.getAttribute("offset");if($)this.#$.setAttribute("offset",$);let J=this.getAttribute("closedby");if(J)this.#$.setAttribute("closedby",J);if(this.#Q)this.#$.anchor=this.#Q;this.#$.addEventListener("close",this.#_),this.appendChild(this.#$)}#W(){let Q=Array.from(this.querySelectorAll(":scope > fig-menu-item, :scope > fig-menu-separator"));for(let $ of Q)this.#$.appendChild($)}#U(){if(this.#Q)this.#Q.addEventListener("click",this.#K),this.#Q.setAttribute("aria-haspopup","menu"),this.#Q.setAttribute("aria-expanded","false");if(this.#$)this.#$.addEventListener("click",this.#j),this.#$.addEventListener("keydown",this.#Z)}#N(){if(this.#Q)this.#Q.removeEventListener("click",this.#K);if(this.#$)this.#$.removeEventListener("click",this.#j),this.#$.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.#$)continue;if((J.tagName==="FIG-MENU-ITEM"||J.tagName==="FIG-MENU-SEPARATOR")&&J.parentElement===this)this.#$.appendChild(J);else if(!this.#Q&&J.parentElement===this){if(this.#q(),this.#Q)this.#Q.addEventListener("click",this.#K),this.#Q.setAttribute("aria-haspopup","menu"),this.#Q.setAttribute("aria-expanded","false"),this.#$.anchor=this.#Q,this.#M()}}}),this.#J.observe(this,{childList:!0})}#G(){if(!this.#$)return[];return Array.from(this.#$.querySelectorAll("fig-menu-item:not([disabled]):not([disabled='true'])"))}#M(){if(!this.#Q)return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled")}#B(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(Q.stopPropagation(),this.open)this.open=!1;else this.open=!0}#A(Q){let $=Q.target.closest("fig-menu-item");if(!$)return;if($.hasAttribute("disabled")&&$.getAttribute("disabled")!=="false")return;this.#z($)}#O(Q){let $=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();let J=$[this.#X];if(J)this.#z(J);break}}}#R(){if(this.hasAttribute("open"))this.removeAttribute("open");if(this.#Q)this.#Q.setAttribute("aria-expanded","false"),this.#Q.focus();this.#X=-1}#z(Q){let $=Q.getAttribute("value")||Q.textContent.trim();this.setAttribute("value",$),this.dispatchEvent(new CustomEvent("change",{detail:{value:$,item:Q},bubbles:!0})),this.open=!1}#H(){if(!this.#$)return;if(this.#$.open=!0,this.#Q)this.#Q.setAttribute("aria-expanded","true");this.#X=0,requestAnimationFrame(()=>{let Q=this.#G();if(Q.length)Q[0].focus()})}#P(){if(!this.#$)return;this.#$.open=!1}}customElements.define("fig-menu",X1);

package/fig.js

@@ -14593,14 +14593,18 @@ class FigChooser extends HTMLElement {
     const threshold = 2;
 
     if (isHorizontal) {
-      const atStart = this.scrollLeft <= threshold;
+      const scrollable = this.scrollWidth - this.clientWidth > threshold;
+      const atStart = !scrollable || this.scrollLeft <= threshold;
       const atEnd =
+        !scrollable ||
         this.scrollLeft + this.clientWidth >= this.scrollWidth - threshold;
       this.classList.toggle("overflow-start", !atStart);
       this.classList.toggle("overflow-end", !atEnd);
     } else {
-      const atStart = this.scrollTop <= threshold;
+      const scrollable = this.scrollHeight - this.clientHeight > threshold;
+      const atStart = !scrollable || this.scrollTop <= threshold;
       const atEnd =
+        !scrollable ||
         this.scrollTop + this.clientHeight >= this.scrollHeight - threshold;
       this.classList.toggle("overflow-start", !atStart);
       this.classList.toggle("overflow-end", !atEnd);
@@ -14771,12 +14775,12 @@ class FigChooser extends HTMLElement {
     this.#navEnd.setAttribute("aria-label", "Scroll forward");
     this.#navEnd.appendChild(makeChevron());
 
-    this.#navStart.addEventListener("pointerup", (e) => {
+    this.#navStart.addEventListener("pointerdown", (e) => {
       e.stopPropagation();
       this.#scrollByPage(-1);
     });
 
-    this.#navEnd.addEventListener("pointerup", (e) => {
+    this.#navEnd.addEventListener("pointerdown", (e) => {
       e.stopPropagation();
       this.#scrollByPage(1);
     });

package/package.json

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