@rogieking/figui3 11.3.2 → 11.4.0

package/dist/fig-editor.js

@@ -105,4 +105,4 @@ import"./fig.js";function P(J,Z){if(!customElements.get(J))customElements.define
           min-height: 0;
           max-height: inherit;
         }
-    `,J.appendChild(Z);let $=document.createElement("fig-button");$.className="fig-select-trigger",$.setAttribute("part","trigger"),$.setAttribute("variant","ghost"),$.setAttribute("aria-haspopup","listbox"),$.setAttribute("aria-expanded","false");let X=document.createElement("span");X.className="fig-select-prepend",X.setAttribute("part","prepend"),X.setAttribute("aria-hidden","true");let j=document.createElement("slot");j.setAttribute("name","prepend-trigger"),j.hidden=!0;let Y=document.createElement("span");Y.className="fig-select-prepend-fallback",X.append(j,Y);let Q=document.createElement("span");Q.className="fig-select-label",Q.setAttribute("part","label");let W=document.createElement("slot");W.setAttribute("name","trigger"),W.hidden=!0,$.append(X,Q,W);let K=document.createElement("dialog",{is:"fig-popup"});if(K.setAttribute("is","fig-popup"),K.setAttribute("part","listbox"),K.setAttribute("theme","menu"),K.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)K.setAttribute("popover","manual");K.id=i(),$.setAttribute("aria-controls",K.id);let z=document.createElement("slot");if(z.setAttribute("name","panel"),K.appendChild(z),J.append($,K),this.#Z=$,this.#W=X,this.#z=j,this.#J=Y,this.#f=W,this.#V=Q,this.#$=K,this.#K=z,this.#c(),this.#A(),this.#x(),!this.hasAttribute("value")){let G=this.#XJ().find((U)=>k(U,"selected"));if(G)this.setAttribute("value",G.value)}}#x(){if(!this.#$||this.#U)return;if(typeof this.#$.positionPopup!=="function")return;this.#X=this.#$.positionPopup.bind(this.#$),this.#$.positionPopup=()=>{if(!this.open){this.#X?.();return}this.#P()},this.#U=!0}#n(J){if(!J)return null;let Z=document.createRange();Z.selectNodeContents(J);let $=[...Z.getClientRects()].filter((X)=>X.width>0&&X.height>0);if($.length)return $[0];return J.getBoundingClientRect()}#v(){if(typeof this.#$?.parseViewportMargins==="function")return this.#$.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#y(){if(this.#L?.isConnected)return this.#L;let J=this.getAttribute("menu-anchor");if(J)try{let Z=this.parentElement?.querySelector(J);if(Z&&Z!==this&&!this.contains(Z))return Z;let X=this.getRootNode()?.querySelector?.(J);if(X&&X!==this&&!this.contains(X))return X}catch{}return null}#JJ(){return this.#y()||this.#Z}#p(){return Boolean(this.#y())}#zJ(){return!this.#UJ()&&this.#p()}#c(){if(!this.#$)return;if(this.#$.anchor=this.#JJ(),this.#l(),!this.open)return;this.#Y=!1,this.#F=null,this.#R=null,this.#$.setupObservers?.(),this.#$.queueReposition?.()}#ZJ(){let J=this.#V?.getBoundingClientRect();if(J?.width&&J?.height)return J;let Z=this.querySelector(':scope > [slot="trigger"]')?.getBoundingClientRect();if(Z?.width&&Z?.height)return Z;return this.#W?.getBoundingClientRect()??null}#a(){let Z=(this.#zJ()?this.#y():null)?.getBoundingClientRect()??this.#ZJ();if(!Z)return null;return{x:Z.x,y:Z.y,width:Z.width,height:Z.height}}#$J(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#AJ(J,Z,$=0.25){if(!J&&!Z)return!1;if(!J||!Z)return!0;return Math.abs(J.x-Z.x)>$||Math.abs(J.y-Z.y)>$||Math.abs(J.width-Z.width)>$||Math.abs(J.height-Z.height)>$}#EJ(J,Z,$=0.25){if(!J&&!Z)return!1;if(!J||!Z)return!0;return Math.abs(J.width-Z.width)>$||Math.abs(J.height-Z.height)>$||Math.abs(J.offsetLeft-Z.offsetLeft)>$||Math.abs(J.offsetTop-Z.offsetTop)>$}#SJ(){if(!this.#Y)return!1;let J=this.#AJ(this.#F,this.#a()),Z=this.#EJ(this.#R,this.#$J());return!J&&!Z}#RJ(){this.#F=this.#a(),this.#R=this.#$J()}#UJ(){let J=this.getAttribute("position");return Boolean(J&&J.trim())}#IJ(){if(!this.#$)return;this.#$.style.removeProperty("left"),this.#$.style.removeProperty("top"),this.#$.style.removeProperty("right"),this.#$.style.removeProperty("bottom")}#P(){if(this.#UJ()){if(this.#Y=!1,this.#F=null,this.#R=null,this.#l(),this.#IJ(),this.#xJ())return;this.#X?.(),this.#OJ();return}this.#YJ()}#xJ(){let J=this.#$,Z=this.#y();if(!J||!Z||typeof J.parsePosition!=="function"||typeof J.parseOffset!=="function"||typeof J.computeCoords!=="function")return!1;let $=J.getBoundingClientRect(),X=Z.getBoundingClientRect();if(!$.width||!$.height)return!1;let{vertical:j,horizontal:Y,shorthand:Q}=J.parsePosition(),W=J.parseOffset(),{left:K,top:z}=J.computeCoords(X,$,j,Y,W,Q),G=this.#v();if(typeof J.clampToViewport==="function")({left:K,top:z}=J.clampToViewport({left:K,top:z},$,G));return J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(K)}px`,"important"),J.style.setProperty("top",`${Math.round(z)}px`,"important"),!0}#OJ(){let J=this.#$;if(!J||typeof J.clampToViewport!=="function")return;let Z=J.getBoundingClientRect();if(!Z.width||!Z.height)return;let $=this.#v(),{left:X,top:j}=J.clampToViewport({left:Z.left,top:Z.top},Z,$);J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(X)}px`,"important"),J.style.setProperty("top",`${Math.round(j)}px`,"important")}#YJ(){if(this.#SJ()){this.#OJ();return}let J=this.#$,Z=this.#V;if(!J||!Z){this.#X?.();return}let $=this.#XJ(),X=$.find((L)=>this.#E(L)===this.value)||$[0];if(!X){this.#X?.();return}let j=this.#zJ()?this.#y():null;if(j)this.#l();this.#X?.();let Y=J.getBoundingClientRect(),Q=X.getBoundingClientRect();if(!Y.width||!Y.height||!Q.height)return;let W,K,z;if(j){let L=j.getBoundingClientRect();z=L,W=L.left+(L.width-Y.width)/2,K=L.top+(L.height-Q.height)/2-(Q.top-Y.top)}else{let L=this.#ZJ(),M=this.#n(X);if(!L?.width||!M)return;z=L;let O=M.left-Y.left,T=M.top-Y.top;W=k(this,"full")?this.getBoundingClientRect().left:L.left-O,K=L.top-T}let G=this.#v();if(typeof J.clampToViewport==="function")({left:W,top:K}=J.clampToViewport({left:W,top:K},Y,G));else{let{left:L,top:M}=G,O=window.innerWidth-Y.width-G.right,T=window.innerHeight-Y.height-G.bottom;W=Math.min(Math.max(W,L),Math.max(L,O)),K=Math.min(Math.max(K,M),Math.max(M,T))}J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(W)}px`,"important"),J.style.setProperty("top",`${Math.round(K)}px`,"important");let U=this.#I(),V=X.getBoundingClientRect(),H=j?null:this.#n(X);if(U&&U.scrollHeight>U.clientHeight+1){let L=j?V.top+V.height/2-(z.top+z.height/2):H?H.top-z.top:0;if(Math.abs(L)>0.5)U.scrollTop+=L;U.syncOverflow?.()}if(this.#Y||this.open)this.#RJ()}#wJ(){this.#Z?.addEventListener("click",this.#w),this.#Z?.addEventListener("keydown",this.#k),this.#Z?.addEventListener("focus",this.#O),this.#Z?.addEventListener("blur",this.#M),this.addEventListener("click",this.#D),this.addEventListener("pointerover",this.#T),this.#$?.addEventListener("keydown",this.#k),this.#$?.addEventListener("close",this.#N),this.#K?.addEventListener("slotchange",this.#C)}#uJ(){this.#Z?.removeEventListener("click",this.#w),this.#Z?.removeEventListener("keydown",this.#k),this.#Z?.removeEventListener("focus",this.#O),this.#Z?.removeEventListener("blur",this.#M),this.removeAttribute("data-focus-visible"),this.removeEventListener("click",this.#D),this.removeEventListener("pointerover",this.#T),this.#$?.removeEventListener("keydown",this.#k),this.#$?.removeEventListener("close",this.#N),this.#K?.removeEventListener("slotchange",this.#C)}#VJ(){this.#A(),this.#d()}#s(){if(this.#B)return;this.#B=new MutationObserver((J)=>{if(this.#Q||this.#H)return;let Z=!1;for(let $ of J){if($.type==="childList"){if([...$.addedNodes].some((X)=>this.#u(X))||[...$.removedNodes].some((X)=>this.#u(X))||$.target?.closest?.("fig-select-option"))Z=!0}if($.type==="attributes"&&$.target?.tagName==="FIG-SELECT-OPTION"){if($.attributeName==="value"||$.attributeName==="disabled"||$.attributeName==="label")Z=!0;else if($.attributeName==="selected"){if(k($.target,"selected")){let X=this.#E($.target);if((this.getAttribute("value")??"")!==X)this.setAttribute("value",X),Z=!0}else if(this.#E($.target)===(this.getAttribute("value")??""))Z=!0}}if($.type==="characterData"&&$.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Z=!0}if(Z)this.#d()}),this.#B.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#XJ({enabledOnly:J=!1}={}){let Z=this.#I(),$=Z?Array.from(Z.querySelectorAll(":scope > fig-select-option")):[];if(!J)return $;return $.filter((X)=>!k(X,"disabled"))}#E(J){if(!J)return"";if(typeof J.value==="string")return J.value;let Z=J.getAttribute?.("value");if(Z!=null)return Z;return(J.textContent||"").trim()}#FJ(J){if(!J)return"";let Z=J.getAttribute?.("label");if(Z!=null&&Z!=="")return Z.trim();let $=[];for(let X of J.childNodes){if(X.nodeType===Node.TEXT_NODE){let Q=X.textContent?.trim();if(Q)$.push(Q);continue}if(!(X instanceof Element))continue;let j=X.getAttribute("slot");if(j==="prepend"||j==="append")continue;let Y=X.textContent?.trim();if(Y)$.push(Y)}if($.length)return $.join(" ").trim();return(J.textContent||"").trim()}#_(J){if(!this.#W||!this.#z||!this.#J||!this.#f)return;let Z=this.querySelector(':scope > [slot="trigger"]'),$=this.querySelector(':scope > [slot="prepend-trigger"][data-fig-select-generated]'),X=this.querySelector(':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])'),j=J?.querySelector?.(':scope > [slot="prepend"]:not([data-fig-select-checkmark])');if(this.#f.hidden=!Z,this.#V.hidden=Boolean(Z),this.#W.hidden=Boolean(Z),Z){$?.remove(),this.#W.classList.remove("has-content"),this.#z.hidden=!0,this.#J.replaceChildren();return}if(!X&&j?.childNodes.length){let Q=$||document.createElement("span");if(Q.setAttribute("slot","prepend-trigger"),Q.setAttribute("data-fig-select-generated",""),Q.replaceChildren(...Array.from(j.childNodes,(W)=>W.cloneNode(!0))),Q.parentElement!==this)this.append(Q);X=Q}else if(X)$?.remove();else $?.remove();let Y=Boolean(X);if(this.#W.classList.toggle("has-content",Y),this.#z.hidden=!X,this.#J.hidden=Boolean(X),X){this.#J.replaceChildren();return}this.#J.replaceChildren()}#qJ(){if(!this.#$)return;this.#$.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#$.setAttribute("offset",J);else this.#$.removeAttribute("offset");let Z=this.getAttribute("closedby");if(Z)this.#$.setAttribute("closedby",Z);else this.#$.removeAttribute("closedby")}#QJ(){let J=k(this,"disabled");if(this.#Z)if(J)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled");if(J&&this.open)this.open=!1}#bJ(J){if(!J.length)return null;let Z=J.find(($)=>k($,"selected"));if(Z&&!k(Z,"disabled"))return Z;return J.find(($)=>!k($,"disabled"))||J[0]||null}#MJ(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#d(){if(this.#Q)return;this.#Q=!0;try{let J=this.#XJ(),Z=this.hasAttribute("value"),$=Z?this.getAttribute("value"):null,X=Z?J.find((W)=>this.#E(W)===$):null,j=!1;if(!X){if(Z){if(!J.length){if(this.#V)this.#V.textContent=$||this.getAttribute("label")||"";return}if(X=this.#bJ(J),X){let W=this.#E(X);if($!==W)this.setAttribute("value",W),j=!0}else this.removeAttribute("value"),j=!0}else if(X=J.find((W)=>k(W,"selected")),X)this.setAttribute("value",this.#E(X)),j=!0}for(let W of J){s(W);let K=W===X;if(W.setAttribute("aria-selected",K?"true":"false"),K)W.setAttribute("selected","");else W.removeAttribute("selected")}let Y=X&&this.#FJ(X)||this.getAttribute("label")||"";if(this.#V)this.#V.textContent=Y;this.#_(X);let Q=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#Z?.setAttribute("aria-label",Q),this.#I()?.syncOverflow?.(),j)this.#MJ(this.getAttribute("value")??"")}finally{this.#Q=!1}}#WJ(J){if(k(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Z=!this.open;if(Z)this.#c();this.open=Z}#vJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(k($,"disabled"))return;this.#mJ($)}#GJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(k($,"disabled"))return;if(J.relatedTarget instanceof Node&&$.contains(J.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#E($),bubbles:!0,composed:!0}))}#hJ(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#$?.matches?.(":open")??!1))){if(this.#Z?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" "))J.preventDefault(),this.#c(),this.open=!0,requestAnimationFrame(()=>{let j=this.#XJ({enabledOnly:!0}).findIndex((Y)=>this.#E(Y)===this.value);this.#g(j>=0?j:0)});return}let $=this.#XJ({enabledOnly:!0});if(!$.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#S(),this.#g(this.#q+1,!0);break;case"ArrowUp":J.preventDefault(),this.#S(),this.#g(this.#q-1,!0);break;case"Home":J.preventDefault(),this.#g(0,!0);break;case"End":J.preventDefault(),this.#g($.length-1,!0);break;case"Escape":J.preventDefault(),this.open=!1,this.#Z?.focus();break;case"Enter":case" ":{this.#S();let X=$[this.#q];if(!X)return;J.preventDefault(),this.#mJ(X);break}}}#gJ(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Z?.setAttribute("aria-expanded","false"),this.#Z?.focus(),this.#q=-1}#mJ(J){let Z=this.#E(J);this.setAttribute("value",Z),this.#d(),this.#MJ(Z),this.open=!1}#h(){return this.#XJ({enabledOnly:!0})}#S(){let J=this.#h();if(!J.length){this.#q=-1;return}let Z=J.find((X)=>X===document.activeElement),$=Z?J.indexOf(Z):-1;this.#q=$>=0?$:this.#q}#g(J,Z=!1){let $=this.#h();if(!$.length)return;let X=(J%$.length+$.length)%$.length,j=$[X],Y=document.activeElement!==j;if(this.#q=X,j?.focus(),Z&&Y)this.dispatchEvent(new CustomEvent("optionfocus",{detail:this.#E(j),bubbles:!0,composed:!0}))}#l(){if(!this.#$||!this.#Z)return;let J=Math.ceil(this.getBoundingClientRect().width),Z=Math.ceil(this.#Z.getBoundingClientRect().width),$=Math.max(J,Z,96),X=this.#p()?this.#y():null,j=window.visualViewport?.width??window.innerWidth,Y=window.visualViewport?.height??window.innerHeight,Q=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,W=Math.max(0,Math.min(Math.floor(20*Q),Math.floor(j-16))),K=Math.max(0,Math.floor(Y-16));if(this.#$.style.setProperty("box-sizing","border-box","important"),this.#$.style.setProperty("padding","0","important"),this.#$.style.setProperty("border","0","important"),this.#$.style.setProperty("margin","0","important"),X){let G=X.getBoundingClientRect().width;this.#$.style.setProperty("width","max-content","important"),this.#$.style.setProperty("min-width","0","important"),this.#$.style.setProperty("max-width",`${W}px`,"important");let U=this.#$.getBoundingClientRect().width,V=Math.min(W,Math.max($,U)),H=Math.max(G,V);this.#$.style.setProperty("width",`${H}px`,"important"),this.#$.style.setProperty("min-width",`${H}px`,"important"),this.#$.style.setProperty("max-width",`${H}px`,"important")}else this.#$.style.setProperty("width","max-content","important"),this.#$.style.setProperty("min-width",`${$}px`,"important"),this.#$.style.setProperty("max-width",`${W}px`,"important");this.#$.style.setProperty("max-height",`${K}px`,"important"),this.#$.style.setProperty("height","max-content","important"),this.#$.style.setProperty("overflow","hidden","important");let z=this.#$.getBoundingClientRect();if(z.height>K)this.#$.style.setProperty("height",`${K}px`,"important");if(!X&&z.width>W)this.#$.style.setProperty("width",`${W}px`,"important")}#kJ(){if(!this.#$||k(this,"disabled"))return;this.#c(),this.#x(),this.#Y=!1,this.#F=null,this.#R=null,this.#d(),this.#l(),this.#$.open=!0,document.addEventListener("keydown",this.#k,!0),this.#Z?.setAttribute("aria-expanded","true"),this.#q=-1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#l(),this.#P(),this.#l(),this.#OJ();let J=this.#I(),$=this.#h().findIndex((X)=>this.#E(X)===this.value);if($>=0)this.#g($);else if(this.#Z?.hasAttribute("data-focus-visible")||this.#Z?.matches?.(":focus-visible"))this.#g(0);if(J?.syncOverflow?.(),!this.#UJ())this.#Y=!0,this.#RJ()})})}#yJ(){if(!this.#$)return;this.#Y=!1,this.#F=null,this.#R=null,document.removeEventListener("keydown",this.#k,!0),this.#$.open=!1,this.#Z?.setAttribute("aria-expanded","false")}}P("fig-select",o);var KJ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],zJ=["shorter","longer","increasing","decreasing"],E=new Set(["oklch","hsl"]);function y(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase();if(!KJ.includes($))$="srgb";Z.interpolationSpace=$;let X=String(Z.hueInterpolation??"shorter").toLowerCase();return Z.hueInterpolation=zJ.includes(X)?X:"shorter",Z}function I(J){let Z=y(J);return Z.interpolationSpace="srgb",delete Z.hueInterpolation,Z}function S(J){let Z=I(J),$={...Z,interpolationSpace:Z.interpolationSpace};if(E.has(Z.interpolationSpace))$.hueInterpolation=Z.hueInterpolation;else delete $.hueInterpolation;return $}function UJ(J){let Z=y(J);if(Z.interpolationSpace==="srgb")return"";if(E.has(Z.interpolationSpace))return`in ${Z.interpolationSpace} ${Z.hueInterpolation} hue`;return`in ${Z.interpolationSpace}`}function m(J){let Z=y(J);if(E.has(Z.interpolationSpace))return`${Z.interpolationSpace}-${Z.hueInterpolation||"shorter"}`;return Z.interpolationSpace}function A(J){let Z=String(J??"");for(let $ of E){let X=`${$}-`;if(Z.startsWith(X))return{interpolationSpace:$,hueInterpolation:Z.slice(X.length)||"shorter"}}return{interpolationSpace:Z||"srgb",hueInterpolation:"shorter"}}var VJ=0;class D extends HTMLElement{static#Z=[{value:"srgb",space:"srgb",title:"Classic",subtitle:"sRGB Linear"},{value:"oklab",space:"oklab",title:"Smooth",subtitle:"OKLab"},{value:"oklch-increasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Increasing"},{value:"hsl-increasing",space:"hsl",title:"Vivid",subtitle:"HSL Increasing"},{value:"oklch-decreasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Decreasing",advanced:!0},{value:"hsl-decreasing",space:"hsl",title:"Vivid",subtitle:"HSL Decreasing",advanced:!0}];static#$(J){let Z=D.#Z,$=Z.find((W)=>W.value===J);if($)return $;let X=A(J),j=Z.find((W)=>W.space===X.interpolationSpace),Y=j?.subtitle.split(" ")[0]??X.interpolationSpace.toUpperCase(),Q=X.hueInterpolation;return{value:J,space:X.interpolationSpace,title:j?.title??"Custom",subtitle:E.has(X.interpolationSpace)?`${Y} ${Q.charAt(0).toUpperCase()}${Q.slice(1)}`:Y}}#W=null;#z=null;#J=null;#f=`fig-fill-picker-dialog-${++VJ}`;#V="solid";anchorElement=null;#K="solid";#B="srgb";#j={h:0,s:0,v:85,a:1};#q="hex";#Q={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#U={url:null,scaleMode:"fill",scale:50};#X={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#Y={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#F=null;#R=!1;#H=null;#L={};#w={};#O=null;#M=null;#D=null;#T=null;#k=!1;#N=!1;#C=null;#m=null;#u=null;#A=null;#I=null;#b=0;#t=null;#r=null;#e=new Set;#x=new Set;#n=null;#v=null;constructor(){super();this.#t=this.#XJ.bind(this),this.#r=this.#E.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","webcam-mode","default-video","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#P(()=>{this.#uJ(),this.#FJ(),this.#_(),this.#tJ()})}disconnectedCallback(){if(this.#MJ({stopWebcam:!0}),this.#xJ(),this.#OJ(),this.#YJ(this.#z))this.#z.removeAttribute("selected");if(this.#W)this.#W.removeEventListener("click",this.#t),this.#W.removeEventListener("keydown",this.#r);this.#W=null,this.#z=null}#y(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#JJ(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#p(){return this.#K==="webcam"&&this.#JJ()==="live"&&this.#Y.live!==!1}#zJ(){return{live:this.#JJ()==="live"&&this.#Y.live!==!1,snapshot:this.#Y.snapshot??null,deviceId:this.#Y.deviceId??null,scaleMode:this.#Y.scaleMode||"fill",scale:this.#Y.scale??50,opacity:this.#Y.opacity??1}}#c(){let J=this.#X.url??null;return{url:J,poster:this.#X.poster??null,scaleMode:this.#X.scaleMode||"fill",scale:this.#X.scale??50,opacity:this.#X.opacity??1,...J?{}:{missing:!0}}}#ZJ(J){if(J.webcam&&typeof J.webcam==="object"){let{stream:Z,snapshot:$,...X}=J.webcam;if(Object.assign(this.#Y,X),typeof $==="string"&&$)this.#Y.snapshot=$;return}if(J.type==="webcam"&&J.image){if(J.image.url!=null)this.#Y.snapshot=J.image.url;if(J.image.scaleMode)this.#Y.scaleMode=J.image.scaleMode;if(J.image.scale!=null)this.#Y.scale=J.image.scale}}#a(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#Y.stream,deviceId:this.#Y.deviceId??null}}))}get webcamStream(){return this.#Y.stream}releaseWebcam(){this.#WJ()}#$J(J){if(!J)return null;if(this.#Y.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#Y.snapshot),this.#x.delete(this.#Y.snapshot);return this.#Y.snapshot=URL.createObjectURL(J),this.#x.add(this.#Y.snapshot),this.#Y.snapshot}#AJ(J,Z,$){if(typeof J.getImageData!=="function")return!1;let X;try{X=J.getImageData(0,0,Z,$).data}catch{return!1}let j=Math.max(1,Math.floor(Z*$/256)),Y=0,Q=0,W=0;for(let K=0;K<X.length;K+=j*4){let z=Math.max(X[K],X[K+1],X[K+2]);if(Y=Math.max(Y,z),W+=1,z>24)Q+=1}if(!W)return!0;return Y<=40||Q/W<0.04}async#EJ(J){let Z=[],$=this.#Y.stream?.getVideoTracks?.()?.[0];if($&&typeof ImageCapture==="function")try{if(this.#H?.track!==$)this.#H=new ImageCapture($);Z.push(await this.#H.grabFrame())}catch{this.#H=null}if(typeof createImageBitmap==="function")try{Z.push(await createImageBitmap(J))}catch{}return Z.push(J),Z.filter(Boolean)}async#SJ(J,Z,$,X){let j=await this.#EJ(Z);for(let Y of j){try{J.drawImage(Y,0,0,$,X)}catch{continue}finally{Y.close?.()}if(!this.#AJ(J,$,X))return!0}return!1}#RJ(J){return new Promise((Z)=>{if(typeof J.requestVideoFrameCallback==="function"){let $=setTimeout(()=>Z(!1),400);J.requestVideoFrameCallback(()=>{clearTimeout($),Z(!0)});return}setTimeout(()=>Z(!1),200)})}async#UJ(J){if(!J?.videoWidth||!J.videoHeight)return null;let Z=document.createElement("canvas");Z.width=J.videoWidth,Z.height=J.videoHeight;let $=Z.getContext("2d",{willReadFrequently:!0});if(!$)return null;if(!await this.#SJ($,J,Z.width,Z.height))return null;let j=await new Promise((Y)=>Z.toBlob(Y,"image/png"));return this.#$J(j)}#IJ(J){if(this.#K!=="webcam")return;let Z=this.#Y.stream;if(!Z)return;if(this.#F===Z&&this.#Y.snapshot){this.#_();return}if(this.#R)return;this.#R=!0;let $=(j)=>{if(this.#R=!1,!j||this.#K!=="webcam"||this.#Y.stream!==Z)return;this.#F=Z,this.#_()},X=async()=>{let j=await this.#UJ(J);if(j){$(j);return}if(this.#K!=="webcam"||this.#Y.stream!==Z){this.#R=!1;return}return await this.#RJ(J),X()};X()}#P(J){let Z=requestAnimationFrame(()=>{if(this.#e.delete(Z),this.isConnected)J()});return this.#e.add(Z),Z}#xJ(){this.#e.forEach((J)=>cancelAnimationFrame(J)),this.#e.clear()}#OJ(){let J=new Set([this.#Y.snapshot,this.#X.poster,this.#U.url].filter((Z)=>typeof Z==="string"&&Z.startsWith("blob:")));this.#x.forEach((Z)=>{if(!J.has(Z))URL.revokeObjectURL(Z)}),this.#x.clear(),J.forEach((Z)=>this.#x.add(Z))}#YJ(J){return J?.matches("fig-swatch, fig-chit")??!1}#wJ(J){return this.#YJ(J)||(J?.matches("[data-fig-fill-picker-swatch]")??!1)}#uJ(){let J=Array.from(this.children).find((Z)=>!Z.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#z=document.createElement("fig-swatch"),this.#z.setAttribute("background","#D9D9D9"),this.appendChild(this.#z),this.#W=this.#z;else if(this.#wJ(J))this.#z=J,this.#W=J;else this.#W=J,this.#z=null;if(this.#s(),this.#W.removeEventListener("click",this.#t),this.#W.addEventListener("click",this.#t),this.#W.removeEventListener("keydown",this.#r),this.#W.addEventListener("keydown",this.#r),this.#YJ(this.#z))this.#P(()=>{let Z=this.#z.querySelector('input[type="color"]');if(Z)Z.remove();this.#s()})}#VJ(){return this.getAttribute("aria-label")||"Fill picker"}#s(){if(!this.#W)return;let J=this.#y(),Z=this.getAttribute("aria-labelledby");if(!this.#W.hasAttribute("role"))this.#W.setAttribute("role","button");if(this.#W.setAttribute("tabindex",J?"-1":"0"),this.#W.setAttribute("aria-disabled",J?"true":"false"),this.#W.setAttribute("aria-haspopup","dialog"),this.#W.setAttribute("aria-expanded",this.#J?.open?"true":"false"),this.#W.setAttribute("aria-controls",this.#f),this.#W.removeAttribute("aria-hidden"),Z)this.#W.setAttribute("aria-labelledby",Z),this.#W.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#W.setAttribute("aria-label",`Open ${this.#VJ()}`),this.#W.removeAttribute("aria-labelledby");else if(this.#W.removeAttribute("aria-labelledby"),!this.#W.hasAttribute("aria-label"))this.#W.setAttribute("aria-label",`Open ${this.#VJ()}`);let $=this.getAttribute("aria-describedby");if($)this.#W.setAttribute("aria-describedby",$);else this.#W.removeAttribute("aria-describedby")}#XJ(J){if(this.#y())return;J.stopPropagation(),J.preventDefault(),this.#QJ()}#E(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.#y())return;J.preventDefault(),J.stopPropagation(),this.#QJ()}#FJ(){let J=this.getAttribute("value");if(!J)return;let Z=["solid","gradient","image","video","webcam"];try{let $=JSON.parse(J);if($.type)this.#K=$.type;if($.color){if(typeof $.color==="string")this.#j=this.#_J($.color);else if(typeof $.color==="object"&&$.color.h!==void 0)this.#j=$.color}let X=$.alpha!==void 0?Number($.alpha):$.opacity!==void 0?Number($.opacity)/100:void 0;if(Number.isFinite(X))this.#j.a=Math.max(0,Math.min(1,X));if(this.#B="srgb",$.gradient)this.#Q=I({...this.#Q,...$.gradient});if($.image)this.#U={...this.#U,...$.image};if($.video){let j=this.#X.url;if(this.#X={...this.#X,...$.video},this.#X.missing=!this.#X.url,$.video.poster!=null&&$.video.poster!=="")this.#v=this.#X.url;else if(this.#X.url!==j)this.#LJ();else this.#DJ()}if(this.#ZJ($),$.type&&!Z.includes($.type)){let{type:j,...Y}=$;this.#w[$.type]=Y}}catch($){if(J.startsWith("#")){this.#K="solid",this.#j=this.#_J(J);return}if(r(J)){let X=this.#X.url;if(this.#K="video",this.#X.url=J.trim(),this.#X.missing=!1,this.#X.url!==X)this.#LJ();else this.#DJ()}}}#_(){if(!this.#z)return;let J,Z="cover",$="center";switch(this.#K){case"solid":J=this.#jJ(this.#j);break;case"gradient":J=this.#aJ();break;case"image":if(this.#U.url){J=x(this.#U.url);let X=this.#qJ(this.#U.scaleMode,this.#U.scale);Z=X.size,$=X.position}else J="";break;case"video":if(this.#X.poster){J=x(this.#X.poster);let X=this.#qJ(this.#X.scaleMode,this.#X.scale);Z=X.size,$=X.position}else J="";break;case"webcam":if(this.#Y.snapshot){J=x(this.#Y.snapshot);let X=this.#qJ(this.#Y.scaleMode,this.#Y.scale);Z=X.size,$=X.position}else J="";break;default:{J=(this.#L[this.#K]?.element||this.querySelector(`[slot="mode-${this.#K}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#z.setAttribute("background",J),this.#z.style.setProperty("--swatch-bg-size",Z),this.#z.style.setProperty("--swatch-bg-position",$),this.#K==="solid")this.#z.setAttribute("alpha",this.#j.a);else this.#z.removeAttribute("alpha")}#qJ(J,Z){switch(J){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${Z}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#QJ(){if(this.#y())return;if(!this.#J)this.#vJ();else this.#J.anchor=this.anchorElement||this.#W;if(this.#GJ(this.#K,{emit:!1}),this.#u=JSON.stringify(this.value),this.#A=this.#u,this.#YJ(this.#z))this.#z.setAttribute("selected","true");this.#J.open=!0,this.#s(),this.#P(()=>{this.#J?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#P(()=>{this.#h(),this.#S()})})}open(){this.#QJ()}close(){if(this.#J)this.#J.open=!1,this.#s()}#bJ(){if(!this.#J)return;for(let[J,{element:Z}]of Object.entries(this.#L)){let $=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((X)=>X.dataset.tab===J);if(!$)continue;while($.firstChild)Z.appendChild($.firstChild)}}#MJ({stopWebcam:J=!1}={}){if(this.#C)this.#C(),this.#C=null;if(this.#m?.disconnect(),this.#m=null,!J&&this.#p())this.#d();else this.#WJ();if(!this.#J)return;this.#bJ(),this.#J.remove(),this.#J=null,this.#I=null,this.#u=null,this.#A=null,this.#O=null,this.#M=null,this.#D=null,this.#T=null,this.#N=!1,this.#s()}#d(){this.#b+=1;let J=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#WJ({emit:J=!0}={}){this.#b+=1;let Z=Boolean(this.#Y.stream);if(this.#Y.stream)this.#Y.stream.getTracks().forEach((X)=>X.stop()),this.#Y.stream=null;this.#F=null,this.#R=!1,this.#H=null;let $=this.#J?.querySelector(".fig-fill-picker-webcam-video");if($)$.srcObject=null;if(Z&&J)this.#a()}#vJ(){this.#L={},this.querySelectorAll('[slot^="mode-"]').forEach((V)=>{let H=V.getAttribute("slot").slice(5);this.#L[H]={element:V,label:V.getAttribute("label")||H.charAt(0).toUpperCase()+H.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.id=this.#f,this.#J.setAttribute("aria-label",this.#VJ()),this.#J.setAttribute("drag","true"),this.#J.setAttribute("handle","fig-header"),this.#J.setAttribute("autoresize","false"),this.#J.classList.add("fig-fill-picker-dialog"),this.#J.anchor=this.anchorElement||this.#W;let J=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",J),this.#J.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Z=["solid","gradient","image","video","webcam"],$={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},X=this.getAttribute("mode"),j;if(X){if(j=X.split(",").map((H)=>H.trim().toLowerCase()).filter((H)=>Z.includes(H)||this.#L[H]),j.length===0)j=[...Z]}else j=[...Z];let Y={...$};for(let[V,{label:H}]of Object.entries(this.#L))Y[V]=H;if(!j.includes(this.#K))this.#K=j[0],this.#V=j[0];let Q;if(j.length===1)Q=q("h3",{className:"fig-fill-picker-type-label"},Y[j[0]]);else{let V=q("fig-select-options",{},j.map((H)=>q("fig-select-option",{value:H},Y[H])));Q=q("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#K},V)}let W=j.map((V)=>q("div",{className:"fig-fill-picker-tab","data-tab":V})),K=q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},F("close"));this.#J.replaceChildren(q("fig-header",{},[Q,K]),q("fig-content",{},W)),document.body.appendChild(this.#J);for(let[V,{element:H}]of Object.entries(this.#L)){let L=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((M)=>M.dataset.tab===V);if(!L)continue;while(H.firstChild)L.appendChild(H.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:V,container:L}}))}let z=this.#J.querySelector(".fig-fill-picker-type");if(z)z.addEventListener("change",(V)=>{let H=typeof V.detail==="string"?V.detail:V.target?.value;if(H)this.#GJ(H)});this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});let G=()=>{if(this.#YJ(this.#z))this.#z.removeAttribute("selected");if(this.#p())this.#d();else this.#WJ();let V=JSON.stringify(this.value);if(this.#A!==null&&this.#A!==V)this.#i();this.#u=null,this.#A=null,this.#s();let H=this.#W;this.#P(()=>{if(H?.isConnected)HTMLElement.prototype.focus.call(H)}),this.dispatchEvent(new CustomEvent("close"))};this.#J.addEventListener("close",G);let U={solid:()=>this.#gJ(),gradient:()=>this.#jZ(),image:()=>this.#qZ(),video:()=>this.#BZ(),webcam:()=>this.#_Z()};for(let[V,H]of Object.entries(U))if(!this.#L[V]&&j.includes(V))H();for(let V of Object.keys(this.#L)){if(Z.includes(V))continue;let H=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((L)=>L.dataset.tab===V);if(!H)continue;H.addEventListener("input",(L)=>{if(L.target===this)return;if(L.stopPropagation(),L.detail)this.#w[V]=L.detail;this.#G()}),H.addEventListener("change",(L)=>{if(L.target===this)return;if(L.stopPropagation(),L.detail)this.#w[V]=L.detail;this.#i()})}}#GJ(J,{emit:Z=!0}={}){let $=Array.from(this.#J?.querySelectorAll(".fig-fill-picker-tab")??[]).find((W)=>W.dataset.tab===J);if(!$)return;let X=this.#V;if(this.#V=J,this.#K=J,X==="webcam"&&J!=="webcam")this.#WJ();let j=this.#J.querySelector(".fig-fill-picker-type");if(j&&j.value!==J)j.value=J;this.#J.querySelectorAll(".fig-fill-picker-tab").forEach((W)=>{if(W.dataset.tab===J)W.style.display="block";else W.style.display="none"});let Q=this.#J.querySelector("fig-content");if(Q)Q.style.padding=this.#L[J]?"0":"";if(J==="gradient")this.#P(()=>{this.#o();let W=$.querySelector(".fig-fill-picker-gradient-bar-input");W?.refreshLayout?.(),this.#P(()=>{W?.refreshLayout?.()})});if(J==="video")this.#PJ({emit:!1});if(J==="webcam")this.#Y.live=this.#JJ()==="live",this.#I?.(this.#Y.deviceId);if(this.#_(),Z)this.#G()}#hJ(){if(!this.#J?.open)return;if(this.#GJ(this.#K,{emit:!1}),this.#h(),this.#S(),this.#BJ(),this.#D)this.#D.setAttribute("value",this.#j.h);if(this.#T)this.#T.setAttribute("value",this.#j.a*100),this.#T.setAttribute("color",this.#jJ(this.#j));this.#o();let J=this.#J.querySelector('[data-tab="image"]'),Z=J?.querySelector(".fig-fill-picker-scale-mode"),$=J?.querySelector(".fig-fill-picker-scale"),X=J?.querySelector(".fig-fill-picker-image-preview");if(Z)Z.value=this.#U.scaleMode;if($)$.setAttribute("value",this.#U.scale),$.style.display=this.#U.scaleMode==="tile"?"block":"none";if(X)this.#KJ(X);let j=this.#J.querySelector('[data-tab="video"]'),Y=j?.querySelector(".fig-fill-picker-scale-mode"),Q=j?.querySelector(".fig-fill-picker-video-preview");if(Y)Y.value=this.#X.scaleMode;if(Q)this.#HJ(Q)}#gJ(){let J=this.#J.querySelector('[data-tab="solid"]'),Z=this.getAttribute("alpha")!=="false",$=q("canvas",{width:"200",height:"200"}),X=q("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#jJ({...this.#j,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),j=q("fig-preview",{className:"fig-fill-picker-color-area"},[$,X]),Y=q("fig-tooltip",{text:"Sample color"},q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},F("eyedropper"))),Q=q("div",{className:`fig-fill-picker-sliders${Z?"":" is-hue-only"}`},[Y,q("fig-slider",{type:"hue",variant:"classic",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#j.h}),Z?q("fig-slider",{type:"opacity",variant:"classic",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#j.a*100,color:this.#jJ(this.#j)}):null]),W=q("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([U,V])=>q("fig-select-option",{value:U},V))),K=q("fig-field",{className:"fig-fill-picker-inputs"},[q("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#q},W),q("span",{className:"fig-fill-picker-input-fields"})]);if(J.replaceChildren(j,Q,K),this.#O=J.querySelector("canvas"),this.#M=J.querySelector("fig-handle"),this.#g(),this.#h(),this.#S(),this.#kJ(),this.#D=J.querySelector('fig-slider[type="hue"]'),this.#D.addEventListener("input",(U)=>{this.#j.h=parseFloat(U.target.value),this.#h(),this.#S(),this.#BJ(),this.#G()}),this.#D.addEventListener("change",()=>{this.#i()}),Z)this.#T=J.querySelector('fig-slider[type="opacity"]'),this.#T.addEventListener("input",(U)=>{this.#j.a=parseFloat(U.target.value)/100,this.#BJ(),this.#G()}),this.#T.addEventListener("change",()=>{this.#i()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(U)=>{let V=typeof U.detail==="string"?U.detail:U.target?.value;if(!V)return;this.#q=V,this.#yJ()}),this.#yJ();let G=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)G.addEventListener("click",async()=>{try{let V=await new EyeDropper().open();this.#j={...this.#_J(V.sRGBHex),a:this.#j.a},this.#h(),this.#S(),this.#BJ(),this.#G()}catch(U){}});else G.setAttribute("disabled",""),G.title="EyeDropper not supported in this browser"}#mJ(){let J=this.#J?.querySelector('[data-tab="solid"]');if(J){let Z=J.querySelector("canvas");if(Z){let $=document.createElement("canvas");$.width=Z.width,$.height=Z.height,Z.replaceWith($),this.#O=$,this.#kJ()}this.#h(),this.#S()}this.#NJ(),this.#G()}#h(){if(!this.#O&&this.#J)this.#O=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#O)return;let J=this.#B==="display-p3"?"display-p3":"srgb",Z=this.#O.getContext("2d",{colorSpace:J});if(!Z)return;let $=this.#O.width,X=this.#O.height;Z.clearRect(0,0,$,X);let j=this.#j.h,Y=this.#B==="display-p3",Q=Z.createLinearGradient(0,0,$,0);if(Y){Q.addColorStop(0,"color(display-p3 1 1 1)");let[K,z,G]=hslToP3(j,100,50);Q.addColorStop(1,`color(display-p3 ${K} ${z} ${G})`)}else Q.addColorStop(0,"#FFFFFF"),Q.addColorStop(1,`hsl(${j}, 100%, 50%)`);Z.fillStyle=Q,Z.fillRect(0,0,$,X);let W=Z.createLinearGradient(0,0,0,X);W.addColorStop(0,"rgba(0,0,0,0)"),W.addColorStop(1,"rgba(0,0,0,1)"),Z.fillStyle=W,Z.fillRect(0,0,$,X)}#S(J=0){if(!this.#M||!this.#O)return;this.#g();let Z=this.#O.getBoundingClientRect();if((Z.width===0||Z.height===0)&&J<5){this.#P(()=>this.#S(J+1));return}let $=Math.max(0,Math.min(100,this.#j.s)),X=Math.max(0,Math.min(100,100-this.#j.v));this.#M.setAttribute("value",`${$}% ${X}%`),this.#M.setAttribute("color",this.#jJ({...this.#j,a:1}))}#g(){if(!this.#M)return;this.#M.setAttribute("aria-valuenow",String(Math.round(this.#j.v))),this.#M.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#j.s)}%, brightness ${Math.round(this.#j.v)}%`),this.#M.removeAttribute("aria-pressed")}#l(J,Z,$={}){let{updateHandle:X=!0,emitInput:j=!0,emitChange:Y=!1}=$;if(this.#j.s=Math.max(0,Math.min(100,J*100)),this.#j.v=Math.max(0,Math.min(100,(1-Z)*100)),this.#M)this.#M.setAttribute("color",this.#jJ({...this.#j,a:1})),this.#g();if(X)this.#S();if(this.#BJ(),j)this.#G();if(Y)this.#i()}#kJ(){if(this.#C)this.#C(),this.#C=null;if(!this.#O||!this.#M)return;let J=this.#O.parentElement||this.#O,Z=this.#M,$=!1,X=(z,G={})=>{let U=J.getBoundingClientRect();if(U.width===0||U.height===0)return;let V=Math.max(0,Math.min(z.clientX-U.left,U.width)),H=Math.max(0,Math.min(z.clientY-U.top,U.height));this.#l(V/U.width,H/U.height,G)},j=(z)=>{if(z.button!==0)return;if(z.target===Z||Z.contains(z.target))return;$=!0,this.#k=!0,J.setPointerCapture(z.pointerId),X(z,{updateHandle:!0,emitInput:!0})},Y=(z)=>{if(!$)return;if(z.buttons===0){Q();return}X(z,{updateHandle:!0,emitInput:!0})},Q=()=>{if(!$)return;$=!1,this.#k=!1,this.#i()},W=(z)=>{this.#k=!0;let G=z.detail?.px,U=z.detail?.py;if(!Number.isFinite(G)||!Number.isFinite(U))return;Z.setAttribute("value",`${G*100}% ${U*100}%`),this.#l(G,U,{updateHandle:!1,emitInput:!0})},K=(z)=>{let G=z.detail?.px,U=z.detail?.py;if(Number.isFinite(G)&&Number.isFinite(U))Z.setAttribute("value",`${G*100}% ${U*100}%`),this.#l(G,U,{updateHandle:!1,emitInput:!1});this.#k=!1,this.#i()};J.addEventListener("pointerdown",j),J.addEventListener("pointermove",Y),J.addEventListener("pointerup",Q),J.addEventListener("pointercancel",Q),J.addEventListener("lostpointercapture",Q),Z.addEventListener("input",W),Z.addEventListener("change",K),this.#C=()=>{J.removeEventListener("pointerdown",j),J.removeEventListener("pointermove",Y),J.removeEventListener("pointerup",Q),J.removeEventListener("pointercancel",Q),J.removeEventListener("lostpointercapture",Q),Z.removeEventListener("input",W),Z.removeEventListener("change",K),this.#k=!1}}#yJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=(W,K)=>q("fig-tooltip",{text:W},K),$=(W,K,z,G,U,V)=>q("fig-input-number",{className:W,"aria-label":K,min:z,max:G,step:U,units:V}),X=this.getAttribute("alpha")!=="false",j=()=>X?Z("Alpha",$("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Y=(W,K="")=>q("div",{className:["input-combo",K].filter(Boolean).join(" ")},W),Q;switch(this.#q){case"rgb":Q=Y([Z("Red",$("fig-fill-picker-ci-r","Red",0,255)),Z("Green",$("fig-fill-picker-ci-g","Green",0,255)),Z("Blue",$("fig-fill-picker-ci-b","Blue",0,255)),j()]);break;case"hsl":Q=Y([Z("Hue",$("fig-fill-picker-ci-h","Hue",0,360)),Z("Saturation",$("fig-fill-picker-ci-s","Saturation",0,100)),Z("Lightness",$("fig-fill-picker-ci-l","Lightness",0,100)),j()]);break;case"hsb":Q=Y([Z("Hue",$("fig-fill-picker-ci-h","Hue",0,360)),Z("Saturation",$("fig-fill-picker-ci-s","Saturation",0,100)),Z("Brightness",$("fig-fill-picker-ci-v","Brightness",0,100)),j()]);break;case"lab":Q=Y([Z("Lightness",$("fig-fill-picker-ci-okl","Lightness",0,100)),Z("Green-Red axis",$("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),Z("Blue-Yellow axis",$("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),j()]);break;case"lch":Q=Y([Z("Lightness",$("fig-fill-picker-ci-okl","Lightness",0,100)),Z("Chroma",$("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),Z("Hue",$("fig-fill-picker-ci-okh","Hue",0,360)),j()]);break;case"css":Q=q("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let W=q("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});Q=X?Y([W,j()],"fig-fill-picker-ci-hex-row"):W}break}J.replaceChildren(Q),this.#ZZ(),this.#P(()=>this.#BJ())}#ZZ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=()=>{if(this.#k)return;let j=this.#XZ();if(!j)return;let Y=Number.isFinite(j.a)?j.a:this.#j.a;if(this.#j={...j,a:Y},this.#h(),this.#S(),this.#D)this.#D.setAttribute("value",this.#j.h);if(this.#T&&Number.isFinite(j.a))this.#T.setAttribute("value",this.#j.a*100);this.#G()},$=()=>this.#i();J.querySelectorAll("fig-input-number, fig-input-text").forEach((j)=>{j.addEventListener("input",Z),j.addEventListener("change",$)})}#$Z(){let J=this.#J?.querySelector(".fig-fill-picker-ci-a");if(!J)return;let Z=parseFloat(J.value);if(!Number.isFinite(Z))return;return Math.max(0,Math.min(1,Z/100))}#XZ(){let J=(X)=>this.#J?.querySelector(`.${X}`),Z=(X)=>parseFloat(J(X)?.value??0),$=(X)=>{if(!X)return null;let j=this.#$Z();return{...X,a:j??X.a??this.#j.a}};switch(this.#q){case"rgb":return $(this.#fJ({r:Z("fig-fill-picker-ci-r"),g:Z("fig-fill-picker-ci-g"),b:Z("fig-fill-picker-ci-b")}));case"hsl":{let X=this.#yZ({h:Z("fig-fill-picker-ci-h"),s:Z("fig-fill-picker-ci-s"),l:Z("fig-fill-picker-ci-l")});return $(this.#fJ(X))}case"hsb":return $({h:Z("fig-fill-picker-ci-h"),s:Z("fig-fill-picker-ci-s"),v:Z("fig-fill-picker-ci-v")});case"lab":{let X=this.#JZ({l:Z("fig-fill-picker-ci-okl")/100,a:Z("fig-fill-picker-ci-oka"),b:Z("fig-fill-picker-ci-okb")});return $(this.#fJ(X))}case"lch":{let X=this.#PZ({l:Z("fig-fill-picker-ci-okl")/100,c:Z("fig-fill-picker-ci-okc"),h:Z("fig-fill-picker-ci-okh")});return $(this.#fJ(X))}case"css":{let X=J("fig-fill-picker-ci-css");if(!X)return null;return this.#NZ(X.value)}default:{let X=J("fig-fill-picker-ci-hex");if(!X)return null;let j=X.value.replace(/^#/,"");if(j.length===3)j=j[0]+j[0]+j[1]+j[1]+j[2]+j[2];if(j.length===8){let Y=parseInt(j.slice(6,8),16)/255;if(j=j.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(j))return null;return{...this.#_J(`#${j}`),a:Y}}if(j.length!==6||!/^[0-9a-fA-F]{6}$/.test(j))return null;return $(this.#_J(`#${j}`))}}}#BJ(){if(!this.#J)return;let J=this.#jJ(this.#j),Z=this.#oJ(this.#j),$=(j)=>this.#J.querySelector(`.${j}`),X=(j,Y)=>{let Q=$(j);if(Q)Q.setAttribute("value",Y)};switch(this.#q){case"rgb":X("fig-fill-picker-ci-r",Z.r),X("fig-fill-picker-ci-g",Z.g),X("fig-fill-picker-ci-b",Z.b);break;case"hsl":{let j=this.#FZ(Z);X("fig-fill-picker-ci-h",Math.round(j.h)),X("fig-fill-picker-ci-s",Math.round(j.s)),X("fig-fill-picker-ci-l",Math.round(j.l));break}case"hsb":X("fig-fill-picker-ci-h",Math.round(this.#j.h)),X("fig-fill-picker-ci-s",Math.round(this.#j.s)),X("fig-fill-picker-ci-v",Math.round(this.#j.v));break;case"lab":{let j=this.#eJ(Z);X("fig-fill-picker-ci-okl",Math.round(j.l*100)),X("fig-fill-picker-ci-oka",+j.a.toFixed(3)),X("fig-fill-picker-ci-okb",+j.b.toFixed(3));break}case"lch":{let j=this.#DZ(Z);X("fig-fill-picker-ci-okl",Math.round(j.l*100)),X("fig-fill-picker-ci-okc",+j.c.toFixed(3)),X("fig-fill-picker-ci-okh",Math.round(j.h));break}case"css":X("fig-fill-picker-ci-css",this.#TZ(this.#j));break;default:X("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#q!=="css"){let j=Math.round(this.#j.a*1000)/10;X("fig-fill-picker-ci-a",Number.isInteger(j)?j:+j.toFixed(1))}if(this.#T)this.#T.setAttribute("color",J);this.#_()}#jZ(){let J=this.#J.querySelector('[data-tab="gradient"]'),Z=q("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#Q.type,variant:"ghost"},q("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([z,G])=>q("fig-select-option",{value:z},G)))),$=(z,G,U)=>q("fig-tooltip",{text:z},q("fig-button",{icon:!0,variant:"ghost",className:G,"aria-label":z},F(U))),X=q("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[$("Flip gradient","fig-fill-picker-gradient-flip","swap"),$("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),j=q("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[Z,X]),Y=q("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large",value:JSON.stringify({type:"gradient",gradient:S(this.#Q)})}),Q=q("fig-preview",{className:"fig-fill-picker-gradient-preview"},Y),W=q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},F("add")),K=q("div",{className:"fig-fill-picker-gradient-stops"},[q("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[q("h3",{},"Stops"),W]),q("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);J.replaceChildren(j,Q,K),this.#o(),this.#YZ(J)}#CZ(){let J=({value:X,title:j,subtitle:Y,advanced:Q=!1})=>q("fig-select-option",{value:X,label:`${j} — ${Y}`,className:Q?"fig-fill-picker-gradient-interpolation-advanced":null},[q("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),q("span",{className:"fig-fill-picker-gradient-interpolation-label"},[q("span",{className:"fig-fill-picker-gradient-interpolation-title"},j),q("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Y)])]),Z=q("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),$=D.#Z;return[...$.filter((X)=>!X.advanced).map(J),Z,...$.filter((X)=>X.advanced).map(J)]}#YZ(J){let Z=(B)=>typeof B.detail==="string"?B.detail:B.target?.value,$=J.querySelector(".fig-fill-picker-gradient-bar-input"),X=(B)=>{if(!$)return;this.#N=!0;try{$.value={type:"gradient",gradient:S(B)}}finally{this.#N=!1}},j=()=>{X(this.#Q)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(B)=>{let f=Z(B);if(!f)return;this.#Q.type=f,this.#o(),this.#G()});let Q=J.querySelector(".fig-fill-picker-gradient-space"),W=Q?.querySelector("fig-select-options"),K="fig-fill-picker-gradient-interpolation-collapsed",z=W?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),G=()=>Boolean(W?.classList.contains(K)),U=(B)=>{W?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",B?"Show all color interpolation options":"Scroll down")},V=()=>{if(!W)return;W.classList.remove(K),W.style.removeProperty("max-height"),U(!1),W.syncOverflow?.()},H=()=>{if(!W||!z)return;W.style.removeProperty("max-height"),W.classList.add(K),W.scrollTop=0;let B=W.getBoundingClientRect().top,f=z.getBoundingClientRect().top,N=W.querySelector(".fig-overflow-end")?.offsetHeight||0,C=f-B;if(C>0)W.style.maxHeight=`${Math.round(C+N)}px`;U(!0),W.syncOverflow?.()},L=(B)=>Boolean(W?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${B}"]`)),M=()=>{if(L(m(this.#Q)))V();else H()};if(W?.addEventListener("click",(B)=>{if(!G())return;if(!B.target?.closest?.(".fig-overflow-end"))return;B.preventDefault(),B.stopPropagation(),V()},!0),W?.addEventListener("focusin",(B)=>{if(!G())return;if(B.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))V()}),W?.addEventListener("scroll",()=>{if(G()&&W.scrollTop!==0)W.scrollTop=0}),Q?.querySelectorAll("fig-select-option").forEach((B)=>{let f=()=>{let N=A(B.getAttribute("value")||"srgb");X(y({...this.#Q,...N}))};B.addEventListener("pointerenter",f),B.addEventListener("pointerleave",()=>{if(document.activeElement!==B)j()}),B.addEventListener("focus",f),B.addEventListener("blur",()=>{if(!B.matches(":hover"))j()})}),this.#m?.disconnect(),Q)this.#m=new MutationObserver(()=>{if(!Q.hasAttribute("open"))j();else this.#P(M)}),this.#m.observe(Q,{attributes:!0,attributeFilter:["open"]});let O=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(O?.addEventListener("change",(B)=>{let f=typeof B.detail==="string"?B.detail:B.target?.value;if(!f)return;let N=A(f);this.#Q=y({...this.#Q,...N}),this.#o(),this.#G()}),O?.querySelectorAll("fig-segment").forEach((B)=>{let f=()=>{X(y({...this.#Q,...A(B.getAttribute("value")||"srgb")}))};B.addEventListener("pointerenter",f),B.addEventListener("pointerleave",j)}),Q?.addEventListener("change",(B)=>{let f=Z(B);if(!f)return;let N=A(f);this.#Q=y({...this.#Q,...N}),this.#o(),this.#G()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#Q.angle=(Number(this.#Q.angle)+90)%360,this.#o(),this.#G()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#Q.stops.forEach((B)=>{B.position=100-B.position}),this.#Q.stops.sort((B,f)=>B.position-f.position),this.#o(),this.#G()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#Q.stops.push({position:50,color:"#888888",opacity:100}),this.#Q.stops.sort((f,N)=>f.position-N.position),this.#o(),this.#G()}),$){let B=(f)=>{if(f.stopPropagation(),this.#N)return;let N=f.detail;if(!N?.gradient)return;this.#Q=I({...this.#Q,...N.gradient}),this.#_(),this.#TJ(),this.#iJ()};$.addEventListener("input",(f)=>{B(f),this.#G()}),$.addEventListener("change",(f)=>{B(f),this.#i()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(B)=>{this.#zZ(B)})}#pJ(J){let Z=String(J.color||"#888888").replace(/^#/,"").slice(0,6),$=J.opacity??100;if($>=100)return`#${Z}`;let X=Math.round($/100*255).toString(16).padStart(2,"0");return`#${Z}${X}`}#QZ(J){if(!(J instanceof HTMLElement))return"#888888";if(J.hexOpaque)return this.#cJ(J.hexOpaque);let Z=J.value;if(typeof Z==="string"&&Z.startsWith("#"))return this.#cJ(Z.length>7?Z.slice(0,7):Z);let $=J.querySelector('fig-input-text:not([type="number"])'),X=String($?.value??$?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(X))return`#${X.toUpperCase()}`;let j=J.getAttribute("value");if(typeof j==="string"&&j.startsWith("#"))return this.#cJ(j.length>7?j.slice(0,7):j);return"#888888"}#cJ(J){let Z=String(J||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(Z))return"#888888";return`#${Z.toUpperCase()}`}#WZ(J){let Z=J.querySelector(".fig-fill-picker-stop-position"),$=J.querySelector(".fig-fill-picker-stop-color"),X=parseFloat(Z?.value??Z?.getAttribute("value")??"0")||0,j=this.#QZ($),Y=100;if($ instanceof HTMLElement&&$.rgba?.a!==void 0)Y=Math.round($.rgba.a*100);else{let Q=parseInt(J.dataset.index,10);if(!isNaN(Q)&&this.#Q.stops[Q])Y=this.#Q.stops[Q].opacity??100}return{position:X,color:j,opacity:Y}}#sJ(J){let Z=parseInt(J.dataset.index,10);if(isNaN(Z)||Z<0||Z>=this.#Q.stops.length)return;let $={...this.#Q.stops[Z],...this.#WZ(J)};this.#Q.stops[Z]=$,this.#KZ(J,$)}#KZ(J,Z){let $=J.querySelector(".fig-fill-picker-stop-position");if($)$.setAttribute("value",String(Z.position));let X=J.querySelector(".fig-fill-picker-stop-color");if(X)X.setAttribute("value",this.#pJ(Z))}#zZ(J){let{oldIndex:Z,newIndex:$}=J.detail??{};if(Z==null||$==null||Z===$||Z<0||$<0||Z>=this.#Q.stops.length||$>=this.#Q.stops.length)return;let j=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");j.forEach((Q)=>this.#sJ(Q));let[Y]=this.#Q.stops.splice(Z,1);this.#Q.stops.splice($,0,Y),j.forEach((Q,W)=>{Q.dataset.index=String(W)}),this.#N=!0;try{this.#TJ(),this.#NJ(),this.#G()}finally{this.#N=!1}}#o(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"]');if(!J)return;this.#Q=I(this.#Q);let Z=m(this.#Q),$=J.querySelector(".fig-fill-picker-gradient-space");if($)$.value=Z;let X=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(X){let j=D.#$(Z),Y=X.querySelector(`fig-segment[value="${Z}"]`)||X.querySelector(`fig-segment[data-space="${j.space}"]`);if(Y){let Q=`${j.title} — ${j.subtitle}`;Y.setAttribute("value",Z),Y.setAttribute("aria-label",Q);let W=Y.closest("fig-tooltip");if(W)W.setAttribute("text",Q);X.value=Z}}this.#TJ(),this.#NJ(),this.#iJ()}#UZ(){let J=Array.isArray(this.#Q.stops)?[...this.#Q.stops].sort((Z,$)=>(Z.position??0)-($.position??0)):[];if(J.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return J.map((Z)=>({color:String(Z.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Z.position??0}))}#TJ(){if(!this.#J)return;let J=this.#UZ();this.#J.querySelectorAll("fig-interpolation-swatch").forEach((Z)=>{let $=Z.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",X=A($),j={type:"linear",stops:J,interpolationSpace:X.interpolationSpace};if(E.has(X.interpolationSpace))j.hueInterpolation=X.hueInterpolation;Z.value={type:"gradient",gradient:j}})}#NJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(J)this.#N=!0,J.value={type:"gradient",gradient:S(this.#Q)},this.#N=!1;this.#_()}#iJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-stops-list"),Z=J?.querySelector("fig-reorder");if(!J||!Z)return;let $=Z.querySelectorAll(".fig-fill-picker-gradient-stop-row");if($.length===this.#Q.stops.length){this.#Q.stops.forEach((X,j)=>{let Y=$[j];Y.dataset.index=j;let Q=Y.querySelector(".fig-fill-picker-stop-position");if(Q)Q.setAttribute("value",X.position);let W=Y.querySelector(".fig-fill-picker-stop-color");if(W)W.setAttribute("value",this.#pJ(X));let K=Y.querySelector(".fig-fill-picker-stop-remove");if(K)if(this.#Q.stops.length<=2)K.setAttribute("disabled","");else K.removeAttribute("disabled")});return}this.#VZ(J)}#VZ(J){let Z=J.querySelector("fig-reorder");if(!Z)return;let $=this.#Q.stops.map((X,j)=>q("fig-field",{className:"fig-fill-picker-gradient-stop-row","data-index":j},[q("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:X.position,units:"%"}),q("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right",value:this.#pJ(X)}),q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-stop-remove",disabled:this.#Q.stops.length<=2,"aria-label":"Remove gradient stop"},F("minus"))]));Z.replaceChildren(...$),Z.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((X)=>{X.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#sJ(X),this.#TJ(),this.#NJ(),this.#G()});let j=X.querySelector(".fig-fill-picker-stop-color"),Y=j.querySelector("fig-fill-picker");if(Y)Y.anchorElement=this.#J;else this.#P(()=>{let W=j.querySelector("fig-fill-picker");if(W)W.anchorElement=this.#J});let Q=()=>{this.#sJ(X),this.#N=!0;try{this.#TJ(),this.#NJ(),this.#G()}finally{this.#N=!1}};j.addEventListener("input",Q),j.addEventListener("change",Q),X.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let W=parseInt(X.dataset.index,10);if(this.#Q.stops.length>2)this.#Q.stops.splice(W,1),this.#o(),this.#G()})})}#dJ(J,Z=!0){let $=y({...this.#Q,interpolationSpace:J??this.#Q.interpolationSpace}),X=this.#B==="display-p3",j=$.stops.map((W)=>{let K=(W.opacity??100)/100;return`${X?this.#RZ(W.color,K):this.#MZ(W.color,K)} ${W.position}%`}).join(", "),Y=UJ($),Q=Z&&Y?` ${Y}`:"";switch($.type){case"linear":return`linear-gradient(${$.angle}deg${Q}, ${j})`;case"radial":return`radial-gradient(circle at ${$.centerX}% ${$.centerY}%${Q}, ${j})`;case"angular":return`conic-gradient(from ${$.angle}deg${Q}, ${j})`;default:return`linear-gradient(${$.angle}deg${Q}, ${j})`}}static#rJ=new Map;#nJ(J){let Z=D.#rJ.get(J);if(Z!==void 0)return Z;let $=document.createElement("div");$.style.background=J;let X=!!$.style.background;return D.#rJ.set(J,X),X}#aJ(){let J=this.#dJ(void 0,!0);if(this.#nJ(J))return J;let Z=this.#dJ("oklab",!0);if(this.#nJ(Z))return Z;return this.#dJ("oklab",!1)}#qZ(){let J=this.#J.querySelector('[data-tab="image"]'),Z=q("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#U.scaleMode},q("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Y,Q])=>q("fig-select-option",{value:Y},Q)))),$=q("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#U.scale,units:"%"});if(this.#U.scaleMode!=="tile")$.style.display="none";let X=q("fig-field",{className:"fig-fill-picker-media-header"},[Z,$]),j=q("fig-image",{className:"fig-fill-picker-media-preview fig-fill-picker-image-preview",upload:"true",label:"Upload from computer",alt:"Image fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true"});J.replaceChildren(X,j),this.#GZ(J)}#GZ(J){let Z=J.querySelector(".fig-fill-picker-scale-mode"),$=J.querySelector(".fig-fill-picker-scale"),X=J.querySelector(".fig-fill-picker-image-preview");Z.addEventListener("change",(j)=>{let Y=typeof j.detail==="string"?j.detail:j.target?.value;if(!Y)return;this.#U.scaleMode=Y,$.style.display=Y==="tile"?"block":"none",this.#KJ(X),this.#_(),this.#G()}),$.addEventListener("input",(j)=>{this.#U.scale=parseFloat(j.target.value)||100,this.#KJ(X),this.#_(),this.#G()}),X.addEventListener("loaded",(j)=>{let Y=j.detail?.src||X.src;if(!Y)return;let Q=Y!==this.#U.url;if(this.#U.url=Y,this.#KJ(X),this.#_(),Q)this.#G();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:j.detail??{src:Y}}))}),X.addEventListener("change",()=>{if(X.src)return;this.#U.url=null,this.#KJ(X),this.#_(),this.#G()}),this.#KJ(X)}#KJ(J){if(!this.#U.url){J.removeAttribute("src"),J.classList.remove("has-media","is-tiled"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="";return}J.setAttribute("src",this.#U.url),J.classList.add("has-media"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="",J.mediaEl?.style.removeProperty("opacity");let Z=J.querySelector("fig-input-file[data-generated]");if(Z)Z.setAttribute("label","Replace"),Z.removeAttribute("url");switch(this.#U.scaleMode){case"fill":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"crop":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"fit":J.classList.remove("is-tiled"),J.setAttribute("fit","contain");break;case"tile":if(J.classList.add("is-tiled"),J.setAttribute("fit","none"),J.style.backgroundImage=`url(${this.#U.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#U.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#HJ(J){if(J.tagName==="FIG-MEDIA"){if(!this.#X.url){J.removeAttribute("src"),J.classList.remove("has-media");return}if(J.setAttribute("src",this.#X.url),this.#X.poster)J.setAttribute("poster",this.#X.poster);else J.removeAttribute("poster");J.classList.add("has-media");let Z=J.querySelector("fig-input-file[data-generated]");if(Z)Z.setAttribute("label","Replace"),Z.removeAttribute("url");switch(this.#X.scaleMode){case"fill":case"crop":J.setAttribute("fit","cover");break;case"fit":J.setAttribute("fit","contain");break}return}switch(J.style.objectPosition="center",J.style.width="100%",J.style.height="100%",this.#X.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#BZ(){let J=this.#J.querySelector('[data-tab="video"]'),Z=q("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#X.scaleMode},q("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([j,Y])=>q("fig-select-option",{value:j},Y)))),$=q("fig-field",{className:"fig-fill-picker-media-header"},Z),X=q("fig-media",{className:"fig-fill-picker-media-preview fig-fill-picker-video-preview",type:"video",upload:"true",label:"Upload from computer","aria-label":"Video fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",controls:!0,muted:"true",loop:"true"});J.replaceChildren($,X),this.#fZ(J),this.#PJ({emit:!1})}#LJ(){if(this.#X.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#X.poster),this.#x.delete(this.#X.poster);this.#X.poster=null,this.#v=null}#DJ(){if(!this.#X.poster)return;if(this.#v&&this.#v===this.#X.url)return;this.#LJ()}#lJ(){let J=this.#J?.querySelector(".fig-fill-picker-video-preview");if(J)this.#HJ(J)}#PJ({emit:J=!1}={}){if(this.#X.url){if(this.#X.missing=!1,this.#DJ(),!this.#X.poster)this.#CJ(this.#X.url);else this.#lJ();return}let Z=this.getAttribute("default-video");if(!Z){this.#X.missing=!0;return}if(this.#X.url=Z,this.#X.missing=!1,this.#lJ(),this.#CJ(Z),J)this.#G()}#tJ(){if(this.#K!=="video")return;let J=this.#X.url;if(!J)return;if(this.#DJ(),this.#X.poster)return;this.#CJ(J)}async#HZ(J){if(typeof J.requestVideoFrameCallback==="function")await Promise.race([new Promise((Z)=>J.requestVideoFrameCallback(()=>Z())),new Promise((Z)=>setTimeout(Z,80))]);else try{await J.play(),J.pause()}catch{}if(typeof createImageBitmap==="function")try{return await createImageBitmap(J)}catch{}return null}async#LZ(J){let Z=await this.#HZ(J),$=Z?.width||J.videoWidth,X=Z?.height||J.videoHeight;if(!$||!X)return Z?.close?.(),null;let j=typeof OffscreenCanvas==="function"?new OffscreenCanvas($,X):Object.assign(document.createElement("canvas"),{width:$,height:X}),Y=j.getContext("2d");if(!Y)return Z?.close?.(),null;try{Y.drawImage(Z||J,0,0,$,X)}finally{Z?.close?.()}return j.convertToBlob?j.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((Q)=>j.toBlob(Q,"image/jpeg",0.85))}async#CJ(J,{emit:Z=!1}={}){if(!J||this.#n===J)return;this.#n=J;let $=document.createElement("video");$.muted=!0,$.playsInline=!0,$.preload="auto",$.crossOrigin="anonymous";try{if(await new Promise((j,Y)=>{let Q=()=>Y(Error("video poster failed"));$.addEventListener("error",Q,{once:!0}),$.addEventListener("loadeddata",j,{once:!0}),$.src=J}),!$.videoWidth||!$.videoHeight)return;let X=await this.#LZ($);if(!X||this.#X.url!==J)return;if(this.#LJ(),this.#X.poster=URL.createObjectURL(X),this.#v=J,this.#x.add(this.#X.poster),this.#_(),this.#lJ(),Z)this.#G()}catch{}finally{if($.removeAttribute("src"),$.load(),this.#n===J)this.#n=null}}#fZ(J){let Z=J.querySelector(".fig-fill-picker-scale-mode"),$=J.querySelector(".fig-fill-picker-video-preview");Z.addEventListener("change",(X)=>{let j=typeof X.detail==="string"?X.detail:X.target?.value;if(!j)return;this.#X.scaleMode=j,this.#HJ($),this.#_(),this.#G()}),$.addEventListener("loaded",(X)=>{let j=X.detail?.src||$.src;if(!j)return;let Y=j!==this.#X.url;if(Y)this.#LJ();if(this.#X.url=j,this.#X.missing=!1,this.#HJ($),this.#CJ(j),this.#_(),Y)this.#G();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:X.detail??{src:j}}))}),$.addEventListener("change",()=>{if($.src)return;this.#X.url=null,this.#LJ(),this.#PJ(),this.#HJ($),this.#_(),this.#G()}),this.#HJ($)}#_Z(){let J=this.#J.querySelector('[data-tab="webcam"]'),Z=q("fig-field",{className:"fig-fill-picker-webcam-camera"},q("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));Z.style.display="none";let $=q("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});$.muted=!0;let X=q("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},q("span",{},"Camera access required")),j=q("fig-video",{className:"fig-fill-picker-webcam-preview","aria-label":"Webcam preview","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",autoplay:"true",muted:"true"},[$,X]),Y=q("div",{className:"fig-fill-picker-webcam-controls"},q("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));J.replaceChildren(Z,j,Y),this.#OZ(J)}#OZ(J){let Z=J.querySelector(".fig-fill-picker-webcam-video"),$=J.querySelector(".fig-fill-picker-webcam-status"),X=J.querySelector(".fig-fill-picker-webcam-capture"),j=J.querySelector(".fig-fill-picker-webcam-camera"),Y=J.querySelector(".fig-fill-picker-camera-select"),Q=(U)=>{if(U)X.removeAttribute("disabled");else X.setAttribute("disabled","")},W=()=>{let U=!!this.#Y.stream&&Z.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&Z.videoWidth>0&&Z.videoHeight>0;if(Q(U),U)$.querySelector("span").textContent="Camera ready",$.style.display="none",this.#IJ(Z)};Z.addEventListener("loadedmetadata",W),Z.addEventListener("canplay",W),Z.addEventListener("playing",W);let K=(U)=>{this.#Y.stream=U,Z.srcObject=U,Z.muted=!0,Z.playsInline=!0,Z.style.display="block";let V=Z.play?.();if(V?.catch)V.catch(()=>{});W()},z=async(U,V)=>{let H=await navigator.mediaDevices.enumerateDevices();if(U!=null&&U!==this.#b)return;let L=H.filter((M)=>M.kind==="videoinput");if(L.length>1){j.style.display="";let M=Y.querySelector(":scope > fig-select-options");if(!M)M=document.createElement("fig-select-options"),Y.append(M);if(M.replaceChildren(),L.forEach((O,T)=>{let B=document.createElement("fig-select-option");B.value=O.deviceId;let f=O.label||(L.length>1?`Camera ${T+1}`:"Camera");B.textContent=f.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(N,C)=>{return` ${/^\d+$/.test(C)?Number.parseInt(C,10).toString():C.replace(/^0+/,"")||"0"}`}),M.append(B)}),V)Y.value=V}else j.style.display="none",Y.querySelector(":scope > fig-select-options")?.replaceChildren()},G=async(U=null)=>{let V=U||this.#Y.deviceId||null,H=this.#Y.stream,L=H?.getTracks?.().filter((O)=>O.readyState!=="ended")??[];if(H&&L.length){let O=H.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#Y.deviceId||null;if(!V||V===O){K(H),this.#a(),z(null,V||O);return}}this.#WJ({emit:Boolean(H)});let M=this.#b;Q(!1),$.querySelector("span").textContent="Starting camera",$.style.display="flex";try{let O={video:V?{deviceId:{exact:V}}:!0},T=await navigator.mediaDevices.getUserMedia(O);if(M!==this.#b||!this.isConnected||this.#V!=="webcam"){T.getTracks().forEach((f)=>f.stop());return}let B=T.getVideoTracks?.()?.[0];this.#Y.deviceId=V||B?.getSettings?.()?.deviceId||null,this.#Y.live=this.#JJ()==="live",K(T),this.#a(),await z(M,V)}catch(O){if(M!==this.#b)return;console.error("Webcam error:",O.name,O.message);let T="Camera access denied";if(O.name==="NotAllowedError")T="Camera permission denied";else if(O.name==="NotFoundError")T="No camera found";else if(O.name==="NotReadableError")T="Camera in use by another app";else if(O.name==="OverconstrainedError")T="Camera constraints not supported";else if(!window.isSecureContext)T="Camera requires secure context";$.replaceChildren();let B=document.createElement("span");B.textContent=T,$.appendChild(B),$.style.display="flex",Z.style.display="none",Q(!1)}};this.#I=G,Y.addEventListener("change",(U)=>{let V=typeof U.detail==="string"?U.detail:U.target?.value;if(!V||V===this.#Y.deviceId)return;G(V)}),X.addEventListener("click",async()=>{if(!this.#Y.stream)return;let U=await this.#UJ(Z);if(!U)return;this.#U.url=U,this.#Y.live=!1;let V=this.#J.querySelector(".fig-fill-picker-image-preview");if(V)this.#KJ(V);if(Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).some((L)=>L.dataset.tab==="image"))this.#GJ("image");else this.#_(),this.#G();this.#i()})}#oJ(J){let Z=J.h/360,$=J.s/100,X=J.v/100,j,Y,Q,W=Math.floor(Z*6),K=Z*6-W,z=X*(1-$),G=X*(1-K*$),U=X*(1-(1-K)*$);switch(W%6){case 0:j=X,Y=U,Q=z;break;case 1:j=G,Y=X,Q=z;break;case 2:j=z,Y=X,Q=U;break;case 3:j=z,Y=G,Q=X;break;case 4:j=U,Y=z,Q=X;break;case 5:j=X,Y=z,Q=G;break}return{r:Math.round(j*255),g:Math.round(Y*255),b:Math.round(Q*255)}}#fJ(J){let Z=J.r/255,$=J.g/255,X=J.b/255,j=Math.max(Z,$,X),Y=Math.min(Z,$,X),Q=j-Y,W=0,K=j===0?0:Q/j,z=j;if(j!==Y){switch(j){case Z:W=($-X)/Q+($<X?6:0);break;case $:W=(X-Z)/Q+2;break;case X:W=(Z-$)/Q+4;break}W/=6}return{h:W*360,s:K*100,v:z*100,a:1}}#jJ(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Z=this.#oJ(J),$=(X)=>{return(isNaN(X)?217:Math.max(0,Math.min(255,Math.round(X)))).toString(16).padStart(2,"0")};return`#${$(Z.r)}${$(Z.g)}${$(Z.b)}`}#_J(J){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),X=parseInt(J.slice(5,7),16);return this.#fJ({r:Z,g:$,b:X})}#MZ(J,Z=1){let $=parseInt(J.slice(1,3),16),X=parseInt(J.slice(3,5),16),j=parseInt(J.slice(5,7),16);return`rgba(${$}, ${X}, ${j}, ${Z})`}#kZ(J){let Z=Math.max(0,Math.min(1,Number(J)||0)),$=Math.round(Z*1000)/1000;return String($)}#TZ(J=this.#j){let Z=this.#oJ(J);return`rgba(${Z.r}, ${Z.g}, ${Z.b}, ${this.#kZ(J.a)})`}#NZ(J){let Z=String(J??"").trim();if(!Z)return null;let $=Z.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if($){let j=$[1];if(j.length===3)j=j[0]+j[0]+j[1]+j[1]+j[2]+j[2];let Y=1;if(j.length===8)Y=parseInt(j.slice(6,8),16)/255,j=j.slice(0,6);return{...this.#_J(`#${j}`),a:Y}}let X=Z.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if(X){let j=Math.max(0,Math.min(255,Math.round(parseFloat(X[1])))),Y=Math.max(0,Math.min(255,Math.round(parseFloat(X[2])))),Q=Math.max(0,Math.min(255,Math.round(parseFloat(X[3])))),W=X[4]!==void 0?Math.max(0,Math.min(1,parseFloat(X[4]))):1;if(![j,Y,Q,W].every(Number.isFinite))return null;return{...this.#fJ({r:j,g:Y,b:Q}),a:W}}return null}#RZ(J,Z=1){let $=+(parseInt(J.slice(1,3),16)/255).toFixed(4),X=+(parseInt(J.slice(3,5),16)/255).toFixed(4),j=+(parseInt(J.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${$} ${X} ${j} / ${Z})`}#FZ(J){let Z=J.r/255,$=J.g/255,X=J.b/255,j=Math.max(Z,$,X),Y=Math.min(Z,$,X),Q,W,K=(j+Y)/2;if(j===Y)Q=W=0;else{let z=j-Y;switch(W=K>0.5?z/(2-j-Y):z/(j+Y),j){case Z:Q=(($-X)/z+($<X?6:0))/6;break;case $:Q=((X-Z)/z+2)/6;break;case X:Q=((Z-$)/z+4)/6;break}}return{h:Q*360,s:W*100,l:K*100}}#yZ(J){let Z=J.h/360,$=J.s/100,X=J.l/100,j,Y,Q;if($===0)j=Y=Q=X;else{let W=(G,U,V)=>{if(V<0)V+=1;if(V>1)V-=1;if(V<0.16666666666666666)return G+(U-G)*6*V;if(V<0.5)return U;if(V<0.6666666666666666)return G+(U-G)*(0.6666666666666666-V)*6;return G},K=X<0.5?X*(1+$):X+$-X*$,z=2*X-K;j=W(z,K,Z+0.3333333333333333),Y=W(z,K,Z),Q=W(z,K,Z-0.3333333333333333)}return{r:Math.round(j*255),g:Math.round(Y*255),b:Math.round(Q*255)}}#eJ(J){let Z=(U)=>{return U=U/255,U<=0.04045?U/12.92:Math.pow((U+0.055)/1.055,2.4)},$=Z(J.r),X=Z(J.g),j=Z(J.b),Y=0.4122214708*$+0.5363325363*X+0.0514459929*j,Q=0.2119034982*$+0.6806995451*X+0.1073969566*j,W=0.0883024619*$+0.2817188376*X+0.6299787005*j,K=Math.cbrt(Y),z=Math.cbrt(Q),G=Math.cbrt(W);return{l:0.2104542553*K+0.793617785*z-0.0040720468*G,a:1.9779984951*K-2.428592205*z+0.4505937099*G,b:0.0259040371*K+0.7827717662*z-0.808675766*G}}#DZ(J){let Z=this.#eJ(J);return{l:Z.l,c:Math.sqrt(Z.a*Z.a+Z.b*Z.b),h:(Math.atan2(Z.b,Z.a)*180/Math.PI+360)%360}}#JZ(J){let Z=J.l+0.3963377774*J.a+0.2158037573*J.b,$=J.l-0.1055613458*J.a-0.0638541728*J.b,X=J.l-0.0894841775*J.a-1.291485548*J.b,j=Z*Z*Z,Y=$*$*$,Q=X*X*X,W=(K)=>{let z=K<=0.0031308?12.92*K:1.055*Math.pow(K,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,z))*255)};return{r:W(4.0767416621*j-3.3077115913*Y+0.2309699292*Q),g:W(-1.2684380046*j+2.6097574011*Y-0.3413193965*Q),b:W(-0.0041960863*j-0.7034186147*Y+1.707614701*Q)}}#PZ(J){let Z=J.h*Math.PI/180;return this.#JZ({l:J.l,a:J.c*Math.cos(Z),b:J.c*Math.sin(Z)})}#G(){if(this.#y())return;this.#_(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#i(){if(this.#y())return;this.#A=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#K,colorSpace:this.#B};switch(this.#K){case"solid":return{...J,color:this.#jJ(this.#j),alpha:this.#j.a,hsv:{...this.#j}};case"gradient":return{...J,gradient:S(this.#Q),css:this.#aJ()};case"image":return{...J,image:{...this.#U}};case"video":return{...J,video:this.#c()};case"webcam":return{...J,webcam:this.#zJ()};default:return{...J,...this.#w[this.#K]}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Z,$){if(Z===$)return;switch(J){case"value":if(this.#FJ(),this.#_(),this.#tJ(),this.#J?.open&&!this.#k)this.#hJ(),this.#A=JSON.stringify(this.value);break;case"disabled":if(this.#s(),this.#y()&&this.#J?.open)this.close();break;case"alpha":case"mode":{if(!this.#J)break;let X=this.#J.open;if(this.#MJ(),X&&this.isConnected)this.#QJ();break}case"webcam-mode":if(this.#K==="webcam")this.#_();break;case"default-video":if(this.#K==="video")this.#PJ({emit:!1}),this.#_();break;case"aria-label":if(this.#J)this.#J.setAttribute("aria-label",this.#VJ());case"aria-labelledby":case"aria-describedby":this.#s();break}}}P("fig-fill-picker",D);class _ extends HTMLElement{static#Z=new Set(["oklch","hsl"]);static#$=10;static#W=10;static#z=8;static#J=3;static#f=210;static#V={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#K=!1;#B=null;#j=null;#q={..._.#V};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#q}}}set value(J){if(J==null||J===""){this.removeAttribute("value");return}if(typeof J==="string"){this.setAttribute("value",J);return}this.setAttribute("value",JSON.stringify(J))}connectedCallback(){this.#Q(),this.#U(),this.#k(),this.#N()}attributeChangedCallback(J,Z,$){if(Z===$)return;if(J!=="value")return;if(this.#U(),this.#K)this.#N()}#Q(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#U(){let J=this.getAttribute("value");if(!J){this.#q={..._.#V,stops:_.#V.stops.map((Z)=>({...Z}))};return}try{let Z=JSON.parse(J),$=Z?.type==="gradient"&&Z.gradient?Z.gradient:Z?.gradient?Z.gradient:Z;if(!$||typeof $!=="object")return;this.#q=this.#X({..._.#V,...$})}catch{}}#X(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase(),X=String(Z.hueInterpolation??"shorter").toLowerCase(),j=Array.isArray(Z.stops)?Z.stops.map((Y)=>({color:String(Y?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Y?.position??0,opacity:Y?.opacity??100})):_.#V.stops.map((Y)=>({...Y}));if(j.length<2)return{..._.#V,stops:_.#V.stops.map((Y)=>({...Y}))};return{type:["linear","radial","angular"].includes(Z.type)?Z.type:"linear",angle:Number.isFinite(Number(Z.angle))?Number(Z.angle):135,interpolationSpace:$,hueInterpolation:X,stops:j}}#Y(){return _.#Z.has(this.#q.interpolationSpace||"srgb")}#F(J){let{r:Z,g:$,b:X}=u(J);if(this.#q.interpolationSpace==="hsl")return JJ(Z,$,X).h;let j=ZJ(Z,$,X);return($J(j.l,j.a,j.b).h%360+360)%360}#R(){let J=this.#M(),Z=this.#F(J[0]?.color||"#FF0000"),$=this.#F(J[J.length-1]?.color||"#4F9EFF"),X=_.#f-Z,Y=((_.#f-$-X)%360+360)%360,Q=Y===0?0:Y-360,W=this.#q.hueInterpolation||"shorter",K;if(W==="increasing")K=Q;else if(W==="decreasing")K=Y;else if(W==="longer")K=Y<180?Q:Y;else K=Y<=180?Y:Q;let z=Math.sign(K),G=Math.asin(_.#J/2/_.#z)*180/Math.PI,U=Math.min(G,Math.max(0,(Math.abs(K)-0.01)/2));return{startDeg:X+z*U,sweepDeg:K-z*U*2}}#H(J){let Z=J*Math.PI/180;return{x:_.#$+_.#z*Math.cos(Z),y:_.#W+_.#z*Math.sin(Z)}}#L(J,Z){let $=J+Z,X=this.#H(J),j=this.#H($),Y=Math.abs(Z)>180?1:0,Q=Z>=0?1:0;return`M ${X.x} ${X.y} A ${_.#z} ${_.#z} 0 ${Y} ${Q} ${j.x} ${j.y}`}#w(){let J=this.#H(180),Z=this.#H(0);return`M ${J.x} ${J.y} L ${Z.x} ${Z.y}`}#O(J){let Z=_.#J,$=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${J}" fill="none" stroke="white" stroke-width="${Z}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent($)}")`}#M(){return[...this.#q.stops].sort((J,Z)=>(J.position??0)-(Z.position??0))}#D(){let J=this.#q.interpolationSpace||"srgb";if(J==="srgb")return"";if(_.#Z.has(J))return` in ${J} ${this.#q.hueInterpolation||"shorter"} hue`;return` in ${J}`}#T(){let J=this.#M(),Z=this.#D();if(this.#Y()){let X=(_.#f+90)%360,j=this.#q.interpolationSpace,Y=(W)=>j==="oklch"?`oklch(65% 0.25 ${W})`:`hsl(${W} 100% 50%)`,Q=[0,300,240,180,120,60,0].map(Y).join(", ");return`conic-gradient(from ${X}deg in ${j} decreasing hue, ${Q})`}let $=J.map((X)=>`${X.color} ${X.position??0}%`).join(", ");return`linear-gradient(90deg${Z}, ${$})`}#k(){if(this.#K)return;let J=_.#J,Z=h("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},h("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":J})),$=q("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren(Z,$),this.#B=Z,this.#j=$,this.#K=!0}#N(){if(!this.#j)return;let J=this.#Y();if(this.#B)this.#B.style.display=J?"":"none";let Z=J?(()=>{let{startDeg:X,sweepDeg:j}=this.#R();return this.#L(X,j)})():this.#w(),$=this.#O(Z);this.#j.style.setProperty("-webkit-mask-image",$),this.#j.style.maskImage=$,this.#j.style.background=this.#T()}}P("fig-interpolation-swatch",_);class R extends HTMLElement{static observedAttributes=["axis","handle","items","indicator","disabled"];static#Z=6;static#$=['[draggable]:not([draggable="false"])','img:not([draggable="false"])','a[href]:not([draggable="false"])','input[type="range"]',"fig-handle","fig-slider","fig-input-number","fig-input-gradient","fig-easing-curve","fig-angle","fig-audio-waveform","fig-input-wheel","fig-joystick","fig-origin-grid","fig-chooser","fig-canvas-control"];static#W=new Set(["data-reorder-item","data-reorder-generated-role","data-reorder-handle","role","tabindex","aria-label","aria-roledescription"]);#z=null;#J=null;#f=!1;#V=new Map;#K=null;#B=null;#j=null;connectedCallback(){if(this.style.display="contents",!this.hasAttribute("role"))this.setAttribute("role","list");if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label","Reorderable list");this.#m(),this.#L(),this.#z=new MutationObserver(()=>this.#L()),this.#z.observe(this,{childList:!0}),this.#q()}disconnectedCallback(){this.#z?.disconnect(),this.#z=null,this.#J?.disconnect(),this.#J=null,this.#a(),this.#$J(),this.#p(),this.#j?.remove(),this.#j=null}attributeChangedCallback(J){if(this.isConnected){if(this.#Q)this.#$J();if(J==="indicator")this.#y();this.#q(),this.#L()}}refresh(){if(this.isConnected)this.#L()}#q(){if(!this.#Y){this.#J?.disconnect(),this.#J=null;return}if(this.#J)return;this.#J=new MutationObserver((J)=>{if(!J.some(($)=>$.target.parentElement===this&&!R.#W.has($.attributeName)&&!($.attributeName==="class"&&$.target===this.#K?.item))||this.#f)return;this.#f=!0,queueMicrotask(()=>{if(this.#f=!1,this.isConnected)this.#L()})}),this.#J.observe(this,{subtree:!0,attributes:!0})}get#Q(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#U(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#X(){return(this.getAttribute("handle")||"").trim()}get#Y(){return(this.getAttribute("items")||"").trim()}get#F(){return(this.getAttribute("indicator")||"default").trim().toLowerCase()}#R(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE&&!J.hasAttribute("data-reorder-live"))}#H(){let J=this.#R(),Z=this.#Y;if(!Z)return J;try{return J.filter(($)=>$.matches(Z))}catch{return[]}}#L(){let J=this.#R(),Z=this.#H(),$=new Set(Z);for(let[j,Y]of this.#V)if(!$.has(j))Y.target.removeEventListener("pointerdown",Y.onPointerDown,!0),Y.target.removeEventListener("keydown",Y.onKeyDown),this.#C(Y),this.#V.delete(j);this.#D(J),this.#w(J),this.#M(J.filter((j)=>!$.has(j)));let X=!this.#Q&&Z.length>=2;if(this.#O(Z,X),!X){this.#a();return}for(let j of Z){let Y=this.#k(j),Q=this.#V.get(j);if(Q&&Q.target===Y)continue;if(Q)Q.target.removeEventListener("pointerdown",Q.onPointerDown,!0),this.#V.delete(j);if(!Y)continue;this.#N(j,Y)}this.#T(Z)}#w(J){for(let Z of J)if(Z.removeAttribute("data-reorder-item"),Z.hasAttribute("data-reorder-generated-role"))Z.removeAttribute("role"),Z.removeAttribute("data-reorder-generated-role")}#O(J,Z=!0){for(let $ of J){if(Z)$.setAttribute("data-reorder-item","");if(!$.hasAttribute("role"))$.setAttribute("role","listitem"),$.setAttribute("data-reorder-generated-role","")}}#M(J){for(let Z of J)if(!Z.hasAttribute("role"))Z.setAttribute("role","none"),Z.setAttribute("data-reorder-generated-role","")}#D(J){for(let Z of J)Z.querySelectorAll("[data-reorder-handle]").forEach(($)=>{$.removeAttribute("data-reorder-handle"),$.removeAttribute("aria-roledescription")})}#T(J){if(!this.#X)return;for(let Z of J){let $=Z.querySelector(this.#X);if($)$.setAttribute("data-reorder-handle",""),$.setAttribute("aria-roledescription","reorder handle")}}#k(J){if(this.#X)return J.querySelector(this.#X);return J}#N(J,Z){let $=(K)=>{if(this.#Q||this.#H().length<2)return;if(K.button!==0)return;if(!this.#X&&this.#A(K.target,J))return;this.#t(K,J,Z)},X=Z.getAttribute("tabindex"),j=Z.getAttribute("aria-label"),Y=Z.getAttribute("role"),Q=J.getAttribute("aria-label")||J.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";if(Z.setAttribute("tabindex","0"),Z.setAttribute("aria-label",`Move ${Q}`),Z!==J&&!Z.hasAttribute("role"))Z.setAttribute("role","button");let W=(K)=>{if(this.#Q)return;let z=this.#U==="horizontal",G=z?"ArrowLeft":"ArrowUp",U=z?"ArrowRight":"ArrowDown";if(K.key!==G&&K.key!==U&&K.key!=="Home"&&K.key!=="End")return;K.preventDefault(),K.stopPropagation();let V=this.#H(),H=V.indexOf(J),L=H;if(K.key===G)L=Math.max(0,H-1);else if(K.key===U)L=Math.min(V.length-1,H+1);else if(K.key==="Home")L=0;else if(K.key==="End")L=V.length-1;if(L===H){this.#u(`${Q}, position ${H+1} of ${V.length}`);return}this.#c(J,L),this.#L(),this.#k(J)?.focus(),this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:H,newIndex:L,item:J}})),this.#u(`${Q}, position ${L+1} of ${V.length}`)};Z.addEventListener("pointerdown",$,!0),Z.addEventListener("keydown",W),this.#V.set(J,{target:Z,onPointerDown:$,onKeyDown:W,originalTabIndex:X,originalAriaLabel:j,originalRole:Y})}#C(J){let{target:Z,originalTabIndex:$,originalAriaLabel:X,originalRole:j}=J;if($===null)Z.removeAttribute("tabindex");else Z.setAttribute("tabindex",$);if(X===null)Z.removeAttribute("aria-label");else Z.setAttribute("aria-label",X);if(j===null)Z.removeAttribute("role");else Z.setAttribute("role",j)}#m(){if(this.#j?.isConnected)return;let J=document.createElement("span");J.setAttribute("data-reorder-live",""),J.setAttribute("role","status"),J.setAttribute("aria-live","polite"),J.setAttribute("aria-atomic","true"),Object.assign(J.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}),this.#j=J,document.body.appendChild(J)}#u(J){if(!this.#j)return;this.#j.textContent="",requestAnimationFrame(()=>{if(this.#j)this.#j.textContent=J})}#A(J,Z){let $=J;while($&&$!==Z){if($ instanceof Element){for(let X of R.#$)if($.matches(X))return!0}$=$.parentElement}return!1}static#I="fig-reorder-dragging";static#b(J){document.body.classList.toggle(R.#I,J)}#t(J,Z,$){this.#$J();let X={item:Z,target:$,pointerId:J.pointerId,oldIndex:this.#H().indexOf(Z),targetIndex:this.#H().indexOf(Z),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};X.onMove=(j)=>{if(j.pointerId!==X.pointerId)return;let Y=j.clientX-X.startX,Q=j.clientY-X.startY;if(!X.active){if(Y*Y+Q*Q<R.#Z*R.#Z)return;X.active=!0,J.preventDefault(),J.stopPropagation(),Z.classList.add("dragging"),R.#b(!0);try{$.setPointerCapture(X.pointerId)}catch{}}j.preventDefault();let W=this.#U==="horizontal"?j.clientX:j.clientY,K=this.#r(W);X.targetIndex=K,this.#JJ(K,Z)},X.onKeyDown=(j)=>{if(j.key!=="Escape"||!X.active)return;j.preventDefault(),this.#ZJ(X,!0)},X.onUp=(j)=>{if(j.pointerId!==X.pointerId)return;this.#ZJ(X,j.type==="pointercancel")},this.#K=X,window.addEventListener("pointermove",X.onMove),window.addEventListener("pointerup",X.onUp),window.addEventListener("pointercancel",X.onUp),window.addEventListener("keydown",X.onKeyDown)}#r(J){let Z=this.#H(),$=this.#U==="horizontal";for(let X=0;X<Z.length;X++){let j=Z[X].getBoundingClientRect(),Y=$?j.left+j.width/2:j.top+j.height/2;if(J<Y)return X}return Z.length}#e(J,Z){let $=this.#H(),X=$.indexOf(J);if(X===-1)return!1;let j=Math.max(0,Math.min(Z,$.length));if(Z===X)return!1;if(j>=$.length&&X===$.length-1)return!1;return!0}#x(J){if(!J.length)return null;let Z=1/0,$=-1/0,X=1/0,j=-1/0;for(let Y of J){let Q=Y.getBoundingClientRect();Z=Math.min(Z,Q.left),$=Math.max($,Q.right),X=Math.min(X,Q.top),j=Math.max(j,Q.bottom)}return{left:Z,top:X,width:$-Z,height:j-X}}#n(){let J=[":popover-open",":modal",":fullscreen"],Z=this.parentElement;while(Z){if(J.some((X)=>{try{return Z.matches(X)}catch{return!1}}))return Z;Z=Z.parentElement}return document.body}#v(){if(this.#B)return this.#B;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#U),J.classList.toggle("fig-reorder-indicator-ring",this.#F==="ring"),this.#n().appendChild(J),this.#B=J,J}#y(){this.#B?.classList.toggle("fig-reorder-indicator-ring",this.#F==="ring")}#JJ(J,Z){let $=this.#H();if(!this.#e(Z,J)){this.#p();return}let X=this.#x($);if(!X){this.#p();return}let j=this.#v();if(j.setAttribute("data-axis",this.#U),this.#U==="horizontal"){let Q;if(J<=0)Q=$[0].getBoundingClientRect().left;else if(J>=$.length)Q=$[$.length-1].getBoundingClientRect().right;else Q=$[J].getBoundingClientRect().left;j.style.left=`${Q-1}px`,j.style.top=`${X.top}px`,j.style.width="2px",j.style.height=`${X.height}px`;return}let Y;if(J<=0)Y=$[0].getBoundingClientRect().top;else if(J>=$.length)Y=$[$.length-1].getBoundingClientRect().bottom;else Y=$[J].getBoundingClientRect().top;j.style.left=`${X.left}px`,j.style.top=`${Y-1}px`,j.style.width=`${X.width}px`,j.style.height="2px"}#p(){this.#B?.remove(),this.#B=null}#zJ(J,Z){let $=this.#H(),X=Math.max(0,Math.min(Z,$.length));if(X>=$.length){let Y=$[$.length-1];if(Y&&Y!==J)Y.after(J);return}let j=$[X];if(j!==J)this.insertBefore(J,j)}#c(J,Z){let $=this.#H().filter((j)=>j!==J),X=$[Z]??null;if(X)this.insertBefore(J,X);else if($.length)$[$.length-1].after(J);else this.appendChild(J)}#ZJ(J,Z){let{item:$,oldIndex:X,active:j,onMove:Y,onUp:Q,onKeyDown:W}=J;if(window.removeEventListener("pointermove",Y),window.removeEventListener("pointerup",Q),window.removeEventListener("pointercancel",Q),window.removeEventListener("keydown",W),j){if(!Z){this.#zJ($,J.targetIndex);let K=this.#H().indexOf($);if(K!==-1&&K!==X){this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:X,newIndex:K,item:$}}));let z=$.getAttribute("aria-label")||$.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";this.#u(`${z}, position ${K+1} of ${this.#H().length}`)}}}if($.classList.remove("dragging"),R.#b(!1),this.#p(),this.#K===J)this.#K=null}#a(){for(let[,J]of this.#V)J.target.removeEventListener("pointerdown",J.onPointerDown,!0),J.target.removeEventListener("keydown",J.onKeyDown),this.#C(J);this.#V.clear()}#$J(){if(!this.#K)return;this.#ZJ(this.#K,!0)}}P("fig-reorder",R);
+    `,J.appendChild(Z);let $=document.createElement("fig-button");$.className="fig-select-trigger",$.setAttribute("part","trigger"),$.setAttribute("variant","ghost"),$.setAttribute("aria-haspopup","listbox"),$.setAttribute("aria-expanded","false");let X=document.createElement("span");X.className="fig-select-prepend",X.setAttribute("part","prepend"),X.setAttribute("aria-hidden","true");let j=document.createElement("slot");j.setAttribute("name","prepend-trigger"),j.hidden=!0;let Y=document.createElement("span");Y.className="fig-select-prepend-fallback",X.append(j,Y);let Q=document.createElement("span");Q.className="fig-select-label",Q.setAttribute("part","label");let W=document.createElement("slot");W.setAttribute("name","trigger"),W.hidden=!0,$.append(X,Q,W);let K=document.createElement("dialog",{is:"fig-popup"});if(K.setAttribute("is","fig-popup"),K.setAttribute("part","listbox"),K.setAttribute("theme","menu"),K.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)K.setAttribute("popover","manual");K.id=i(),$.setAttribute("aria-controls",K.id);let z=document.createElement("slot");if(z.setAttribute("name","panel"),K.appendChild(z),J.append($,K),this.#Z=$,this.#W=X,this.#z=j,this.#J=Y,this.#f=W,this.#V=Q,this.#$=K,this.#K=z,this.#c(),this.#A(),this.#x(),!this.hasAttribute("value")){let G=this.#XJ().find((U)=>k(U,"selected"));if(G)this.setAttribute("value",G.value)}}#x(){if(!this.#$||this.#U)return;if(typeof this.#$.positionPopup!=="function")return;this.#X=this.#$.positionPopup.bind(this.#$),this.#$.positionPopup=()=>{if(!this.open){this.#X?.();return}this.#P()},this.#U=!0}#n(J){if(!J)return null;let Z=document.createRange();Z.selectNodeContents(J);let $=[...Z.getClientRects()].filter((X)=>X.width>0&&X.height>0);if($.length)return $[0];return J.getBoundingClientRect()}#v(){if(typeof this.#$?.parseViewportMargins==="function")return this.#$.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#y(){if(this.#L?.isConnected)return this.#L;let J=this.getAttribute("menu-anchor");if(J)try{let Z=this.parentElement?.querySelector(J);if(Z&&Z!==this&&!this.contains(Z))return Z;let X=this.getRootNode()?.querySelector?.(J);if(X&&X!==this&&!this.contains(X))return X}catch{}return null}#JJ(){return this.#y()||this.#Z}#p(){return Boolean(this.#y())}#zJ(){return!this.#UJ()&&this.#p()}#c(){if(!this.#$)return;if(this.#$.anchor=this.#JJ(),this.#l(),!this.open)return;this.#Y=!1,this.#F=null,this.#R=null,this.#$.setupObservers?.(),this.#$.queueReposition?.()}#ZJ(){let J=this.#V?.getBoundingClientRect();if(J?.width&&J?.height)return J;let Z=this.querySelector(':scope > [slot="trigger"]')?.getBoundingClientRect();if(Z?.width&&Z?.height)return Z;return this.#W?.getBoundingClientRect()??null}#a(){let Z=(this.#zJ()?this.#y():null)?.getBoundingClientRect()??this.#ZJ();if(!Z)return null;return{x:Z.x,y:Z.y,width:Z.width,height:Z.height}}#$J(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#AJ(J,Z,$=0.25){if(!J&&!Z)return!1;if(!J||!Z)return!0;return Math.abs(J.x-Z.x)>$||Math.abs(J.y-Z.y)>$||Math.abs(J.width-Z.width)>$||Math.abs(J.height-Z.height)>$}#EJ(J,Z,$=0.25){if(!J&&!Z)return!1;if(!J||!Z)return!0;return Math.abs(J.width-Z.width)>$||Math.abs(J.height-Z.height)>$||Math.abs(J.offsetLeft-Z.offsetLeft)>$||Math.abs(J.offsetTop-Z.offsetTop)>$}#SJ(){if(!this.#Y)return!1;let J=this.#AJ(this.#F,this.#a()),Z=this.#EJ(this.#R,this.#$J());return!J&&!Z}#RJ(){this.#F=this.#a(),this.#R=this.#$J()}#UJ(){let J=this.getAttribute("position");return Boolean(J&&J.trim())}#IJ(){if(!this.#$)return;this.#$.style.removeProperty("left"),this.#$.style.removeProperty("top"),this.#$.style.removeProperty("right"),this.#$.style.removeProperty("bottom")}#P(){if(this.#UJ()){if(this.#Y=!1,this.#F=null,this.#R=null,this.#l(),this.#IJ(),this.#xJ())return;this.#X?.(),this.#OJ();return}this.#YJ()}#xJ(){let J=this.#$,Z=this.#y();if(!J||!Z||typeof J.parsePosition!=="function"||typeof J.parseOffset!=="function"||typeof J.computeCoords!=="function")return!1;let $=J.getBoundingClientRect(),X=Z.getBoundingClientRect();if(!$.width||!$.height)return!1;let{vertical:j,horizontal:Y,shorthand:Q}=J.parsePosition(),W=J.parseOffset(),{left:K,top:z}=J.computeCoords(X,$,j,Y,W,Q),G=this.#v();if(typeof J.clampToViewport==="function")({left:K,top:z}=J.clampToViewport({left:K,top:z},$,G));return J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(K)}px`,"important"),J.style.setProperty("top",`${Math.round(z)}px`,"important"),!0}#OJ(){let J=this.#$;if(!J||typeof J.clampToViewport!=="function")return;let Z=J.getBoundingClientRect();if(!Z.width||!Z.height)return;let $=this.#v(),{left:X,top:j}=J.clampToViewport({left:Z.left,top:Z.top},Z,$);J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(X)}px`,"important"),J.style.setProperty("top",`${Math.round(j)}px`,"important")}#YJ(){if(this.#SJ()){this.#OJ();return}let J=this.#$,Z=this.#V;if(!J||!Z){this.#X?.();return}let $=this.#XJ(),X=$.find((L)=>this.#E(L)===this.value)||$[0];if(!X){this.#X?.();return}let j=this.#zJ()?this.#y():null;if(j)this.#l();this.#X?.();let Y=J.getBoundingClientRect(),Q=X.getBoundingClientRect();if(!Y.width||!Y.height||!Q.height)return;let W,K,z;if(j){let L=j.getBoundingClientRect();z=L,W=L.left+(L.width-Y.width)/2,K=L.top+(L.height-Q.height)/2-(Q.top-Y.top)}else{let L=this.#ZJ(),M=this.#n(X);if(!L?.width||!M)return;z=L;let O=M.left-Y.left,T=M.top-Y.top;W=k(this,"full")?this.getBoundingClientRect().left:L.left-O,K=L.top-T}let G=this.#v();if(typeof J.clampToViewport==="function")({left:W,top:K}=J.clampToViewport({left:W,top:K},Y,G));else{let{left:L,top:M}=G,O=window.innerWidth-Y.width-G.right,T=window.innerHeight-Y.height-G.bottom;W=Math.min(Math.max(W,L),Math.max(L,O)),K=Math.min(Math.max(K,M),Math.max(M,T))}J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(W)}px`,"important"),J.style.setProperty("top",`${Math.round(K)}px`,"important");let U=this.#I(),V=X.getBoundingClientRect(),H=j?null:this.#n(X);if(U&&U.scrollHeight>U.clientHeight+1){let L=j?V.top+V.height/2-(z.top+z.height/2):H?H.top-z.top:0;if(Math.abs(L)>0.5)U.scrollTop+=L;U.syncOverflow?.()}if(this.#Y||this.open)this.#RJ()}#wJ(){this.#Z?.addEventListener("click",this.#w),this.#Z?.addEventListener("keydown",this.#k),this.#Z?.addEventListener("focus",this.#O),this.#Z?.addEventListener("blur",this.#M),this.addEventListener("click",this.#D),this.addEventListener("pointerover",this.#T),this.#$?.addEventListener("keydown",this.#k),this.#$?.addEventListener("close",this.#N),this.#K?.addEventListener("slotchange",this.#C)}#uJ(){this.#Z?.removeEventListener("click",this.#w),this.#Z?.removeEventListener("keydown",this.#k),this.#Z?.removeEventListener("focus",this.#O),this.#Z?.removeEventListener("blur",this.#M),this.removeAttribute("data-focus-visible"),this.removeEventListener("click",this.#D),this.removeEventListener("pointerover",this.#T),this.#$?.removeEventListener("keydown",this.#k),this.#$?.removeEventListener("close",this.#N),this.#K?.removeEventListener("slotchange",this.#C)}#VJ(){this.#A(),this.#d()}#s(){if(this.#B)return;this.#B=new MutationObserver((J)=>{if(this.#Q||this.#H)return;let Z=!1;for(let $ of J){if($.type==="childList"){if([...$.addedNodes].some((X)=>this.#u(X))||[...$.removedNodes].some((X)=>this.#u(X))||$.target?.closest?.("fig-select-option"))Z=!0}if($.type==="attributes"&&$.target?.tagName==="FIG-SELECT-OPTION"){if($.attributeName==="value"||$.attributeName==="disabled"||$.attributeName==="label")Z=!0;else if($.attributeName==="selected"){if(k($.target,"selected")){let X=this.#E($.target);if((this.getAttribute("value")??"")!==X)this.setAttribute("value",X),Z=!0}else if(this.#E($.target)===(this.getAttribute("value")??""))Z=!0}}if($.type==="characterData"&&$.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Z=!0}if(Z)this.#d()}),this.#B.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#XJ({enabledOnly:J=!1}={}){let Z=this.#I(),$=Z?Array.from(Z.querySelectorAll(":scope > fig-select-option")):[];if(!J)return $;return $.filter((X)=>!k(X,"disabled"))}#E(J){if(!J)return"";if(typeof J.value==="string")return J.value;let Z=J.getAttribute?.("value");if(Z!=null)return Z;return(J.textContent||"").trim()}#FJ(J){if(!J)return"";let Z=J.getAttribute?.("label");if(Z!=null&&Z!=="")return Z.trim();let $=[];for(let X of J.childNodes){if(X.nodeType===Node.TEXT_NODE){let Q=X.textContent?.trim();if(Q)$.push(Q);continue}if(!(X instanceof Element))continue;let j=X.getAttribute("slot");if(j==="prepend"||j==="append")continue;let Y=X.textContent?.trim();if(Y)$.push(Y)}if($.length)return $.join(" ").trim();return(J.textContent||"").trim()}#_(J){if(!this.#W||!this.#z||!this.#J||!this.#f)return;let Z=this.querySelector(':scope > [slot="trigger"]'),$=this.querySelector(':scope > [slot="prepend-trigger"][data-fig-select-generated]'),X=this.querySelector(':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])'),j=J?.querySelector?.(':scope > [slot="prepend"]:not([data-fig-select-checkmark])');if(this.#f.hidden=!Z,this.#V.hidden=Boolean(Z),this.#W.hidden=Boolean(Z),Z){$?.remove(),this.#W.classList.remove("has-content"),this.#z.hidden=!0,this.#J.replaceChildren();return}if(!X&&j?.childNodes.length){let Q=$||document.createElement("span");if(Q.setAttribute("slot","prepend-trigger"),Q.setAttribute("data-fig-select-generated",""),Q.replaceChildren(...Array.from(j.childNodes,(W)=>W.cloneNode(!0))),Q.parentElement!==this)this.append(Q);X=Q}else if(X)$?.remove();else $?.remove();let Y=Boolean(X);if(this.#W.classList.toggle("has-content",Y),this.#z.hidden=!X,this.#J.hidden=Boolean(X),X){this.#J.replaceChildren();return}this.#J.replaceChildren()}#qJ(){if(!this.#$)return;this.#$.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#$.setAttribute("offset",J);else this.#$.removeAttribute("offset");let Z=this.getAttribute("closedby");if(Z)this.#$.setAttribute("closedby",Z);else this.#$.removeAttribute("closedby")}#QJ(){let J=k(this,"disabled");if(this.#Z)if(J)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled");if(J&&this.open)this.open=!1}#bJ(J){if(!J.length)return null;let Z=J.find(($)=>k($,"selected"));if(Z&&!k(Z,"disabled"))return Z;return J.find(($)=>!k($,"disabled"))||J[0]||null}#MJ(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#d(){if(this.#Q)return;this.#Q=!0;try{let J=this.#XJ(),Z=this.hasAttribute("value"),$=Z?this.getAttribute("value"):null,X=Z?J.find((W)=>this.#E(W)===$):null,j=!1;if(!X){if(Z){if(!J.length){if(this.#V)this.#V.textContent=$||this.getAttribute("label")||"";return}if(X=this.#bJ(J),X){let W=this.#E(X);if($!==W)this.setAttribute("value",W),j=!0}else this.removeAttribute("value"),j=!0}else if(X=J.find((W)=>k(W,"selected")),X)this.setAttribute("value",this.#E(X)),j=!0}for(let W of J){s(W);let K=W===X;if(W.setAttribute("aria-selected",K?"true":"false"),K)W.setAttribute("selected","");else W.removeAttribute("selected")}let Y=X&&this.#FJ(X)||this.getAttribute("label")||"";if(this.#V)this.#V.textContent=Y;this.#_(X);let Q=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#Z?.setAttribute("aria-label",Q),this.#I()?.syncOverflow?.(),j)this.#MJ(this.getAttribute("value")??"")}finally{this.#Q=!1}}#WJ(J){if(k(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Z=!this.open;if(Z)this.#c();this.open=Z}#vJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(k($,"disabled"))return;this.#mJ($)}#GJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(k($,"disabled"))return;if(J.relatedTarget instanceof Node&&$.contains(J.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#E($),bubbles:!0,composed:!0}))}#hJ(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#$?.matches?.(":open")??!1))){if(this.#Z?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" "))J.preventDefault(),this.#c(),this.open=!0,requestAnimationFrame(()=>{let j=this.#XJ({enabledOnly:!0}).findIndex((Y)=>this.#E(Y)===this.value);this.#g(j>=0?j:0)});return}let $=this.#XJ({enabledOnly:!0});if(!$.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#S(),this.#g(this.#q+1,!0);break;case"ArrowUp":J.preventDefault(),this.#S(),this.#g(this.#q-1,!0);break;case"Home":J.preventDefault(),this.#g(0,!0);break;case"End":J.preventDefault(),this.#g($.length-1,!0);break;case"Escape":J.preventDefault(),this.open=!1,this.#Z?.focus();break;case"Enter":case" ":{this.#S();let X=$[this.#q];if(!X)return;J.preventDefault(),this.#mJ(X);break}}}#gJ(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Z?.setAttribute("aria-expanded","false"),this.#Z?.focus(),this.#q=-1}#mJ(J){let Z=this.#E(J);this.setAttribute("value",Z),this.#d(),this.#MJ(Z),this.open=!1}#h(){return this.#XJ({enabledOnly:!0})}#S(){let J=this.#h();if(!J.length){this.#q=-1;return}let Z=J.find((X)=>X===document.activeElement),$=Z?J.indexOf(Z):-1;this.#q=$>=0?$:this.#q}#g(J,Z=!1){let $=this.#h();if(!$.length)return;let X=(J%$.length+$.length)%$.length,j=$[X],Y=document.activeElement!==j;if(this.#q=X,j?.focus(),Z&&Y)this.dispatchEvent(new CustomEvent("optionfocus",{detail:this.#E(j),bubbles:!0,composed:!0}))}#l(){if(!this.#$||!this.#Z)return;let J=Math.ceil(this.getBoundingClientRect().width),Z=Math.ceil(this.#Z.getBoundingClientRect().width),$=Math.max(J,Z,96),X=this.#p()?this.#y():null,j=window.visualViewport?.width??window.innerWidth,Y=window.visualViewport?.height??window.innerHeight,Q=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,W=Math.max(0,Math.min(Math.floor(20*Q),Math.floor(j-16))),K=Math.max(0,Math.floor(Y-16));if(this.#$.style.setProperty("box-sizing","border-box","important"),this.#$.style.setProperty("padding","0","important"),this.#$.style.setProperty("border","0","important"),this.#$.style.setProperty("margin","0","important"),X){let G=X.getBoundingClientRect().width;this.#$.style.setProperty("width","max-content","important"),this.#$.style.setProperty("min-width","0","important"),this.#$.style.setProperty("max-width",`${W}px`,"important");let U=this.#$.getBoundingClientRect().width,V=Math.min(W,Math.max($,U)),H=Math.max(G,V);this.#$.style.setProperty("width",`${H}px`,"important"),this.#$.style.setProperty("min-width",`${H}px`,"important"),this.#$.style.setProperty("max-width",`${H}px`,"important")}else this.#$.style.setProperty("width","max-content","important"),this.#$.style.setProperty("min-width",`${$}px`,"important"),this.#$.style.setProperty("max-width",`${W}px`,"important");this.#$.style.setProperty("max-height",`${K}px`,"important"),this.#$.style.setProperty("height","max-content","important"),this.#$.style.setProperty("overflow","hidden","important");let z=this.#$.getBoundingClientRect();if(z.height>K)this.#$.style.setProperty("height",`${K}px`,"important");if(!X&&z.width>W)this.#$.style.setProperty("width",`${W}px`,"important")}#kJ(){if(!this.#$||k(this,"disabled"))return;this.#c(),this.#x(),this.#Y=!1,this.#F=null,this.#R=null,this.#d(),this.#l(),this.#$.open=!0,document.addEventListener("keydown",this.#k,!0),this.#Z?.setAttribute("aria-expanded","true"),this.#q=-1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#l(),this.#P(),this.#l(),this.#OJ();let J=this.#I(),$=this.#h().findIndex((X)=>this.#E(X)===this.value);if($>=0)this.#g($);else if(this.#Z?.hasAttribute("data-focus-visible")||this.#Z?.matches?.(":focus-visible"))this.#g(0);if(J?.syncOverflow?.(),!this.#UJ())this.#Y=!0,this.#RJ()})})}#yJ(){if(!this.#$)return;this.#Y=!1,this.#F=null,this.#R=null,document.removeEventListener("keydown",this.#k,!0),this.#$.open=!1,this.#Z?.setAttribute("aria-expanded","false")}}P("fig-select",o);var KJ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],zJ=["shorter","longer","increasing","decreasing"],E=new Set(["oklch","hsl"]);function y(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase();if(!KJ.includes($))$="srgb";Z.interpolationSpace=$;let X=String(Z.hueInterpolation??"shorter").toLowerCase();return Z.hueInterpolation=zJ.includes(X)?X:"shorter",Z}function I(J){let Z=y(J);return Z.interpolationSpace="srgb",delete Z.hueInterpolation,Z}function S(J){let Z=I(J),$={...Z,interpolationSpace:Z.interpolationSpace};if(E.has(Z.interpolationSpace))$.hueInterpolation=Z.hueInterpolation;else delete $.hueInterpolation;return $}function UJ(J){let Z=y(J);if(Z.interpolationSpace==="srgb")return"";if(E.has(Z.interpolationSpace))return`in ${Z.interpolationSpace} ${Z.hueInterpolation} hue`;return`in ${Z.interpolationSpace}`}function m(J){let Z=y(J);if(E.has(Z.interpolationSpace))return`${Z.interpolationSpace}-${Z.hueInterpolation||"shorter"}`;return Z.interpolationSpace}function A(J){let Z=String(J??"");for(let $ of E){let X=`${$}-`;if(Z.startsWith(X))return{interpolationSpace:$,hueInterpolation:Z.slice(X.length)||"shorter"}}return{interpolationSpace:Z||"srgb",hueInterpolation:"shorter"}}var VJ=0;class D extends HTMLElement{static#Z=[{value:"srgb",space:"srgb",title:"Classic",subtitle:"sRGB Linear"},{value:"oklab",space:"oklab",title:"Smooth",subtitle:"OKLab"},{value:"oklch-increasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Increasing"},{value:"hsl-increasing",space:"hsl",title:"Vivid",subtitle:"HSL Increasing"},{value:"oklch-decreasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Decreasing",advanced:!0},{value:"hsl-decreasing",space:"hsl",title:"Vivid",subtitle:"HSL Decreasing",advanced:!0}];static#$(J){let Z=D.#Z,$=Z.find((W)=>W.value===J);if($)return $;let X=A(J),j=Z.find((W)=>W.space===X.interpolationSpace),Y=j?.subtitle.split(" ")[0]??X.interpolationSpace.toUpperCase(),Q=X.hueInterpolation;return{value:J,space:X.interpolationSpace,title:j?.title??"Custom",subtitle:E.has(X.interpolationSpace)?`${Y} ${Q.charAt(0).toUpperCase()}${Q.slice(1)}`:Y}}#W=null;#z=null;#J=null;#f=`fig-fill-picker-dialog-${++VJ}`;#V="solid";anchorElement=null;#K="solid";#B="srgb";#j={h:0,s:0,v:85,a:1};#q="hex";#Q={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#U={url:null,scaleMode:"fill",scale:50};#X={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#Y={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#F=null;#R=!1;#H=null;#L={};#w={};#O=null;#M=null;#D=null;#T=null;#k=!1;#N=!1;#C=null;#m=null;#u=null;#A=null;#I=null;#b=0;#t=null;#r=null;#e=new Set;#x=new Set;#n=null;#v=null;constructor(){super();this.#t=this.#XJ.bind(this),this.#r=this.#E.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","webcam-mode","default-video","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#P(()=>{this.#uJ(),this.#FJ(),this.#_(),this.#tJ()})}disconnectedCallback(){if(this.#MJ({stopWebcam:!0}),this.#xJ(),this.#OJ(),this.#YJ(this.#z))this.#z.removeAttribute("selected");if(this.#W)this.#W.removeEventListener("click",this.#t),this.#W.removeEventListener("keydown",this.#r);this.#W=null,this.#z=null}#y(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#JJ(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#p(){return this.#K==="webcam"&&this.#JJ()==="live"&&this.#Y.live!==!1}#zJ(){return{live:this.#JJ()==="live"&&this.#Y.live!==!1,snapshot:this.#Y.snapshot??null,deviceId:this.#Y.deviceId??null,scaleMode:this.#Y.scaleMode||"fill",scale:this.#Y.scale??50,opacity:this.#Y.opacity??1}}#c(){let J=this.#X.url??null;return{url:J,poster:this.#X.poster??null,scaleMode:this.#X.scaleMode||"fill",scale:this.#X.scale??50,opacity:this.#X.opacity??1,...J?{}:{missing:!0}}}#ZJ(J){if(J.webcam&&typeof J.webcam==="object"){let{stream:Z,snapshot:$,...X}=J.webcam;if(Object.assign(this.#Y,X),typeof $==="string"&&$)this.#Y.snapshot=$;return}if(J.type==="webcam"&&J.image){if(J.image.url!=null)this.#Y.snapshot=J.image.url;if(J.image.scaleMode)this.#Y.scaleMode=J.image.scaleMode;if(J.image.scale!=null)this.#Y.scale=J.image.scale}}#a(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#Y.stream,deviceId:this.#Y.deviceId??null}}))}get webcamStream(){return this.#Y.stream}releaseWebcam(){this.#WJ()}#$J(J){if(!J)return null;if(this.#Y.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#Y.snapshot),this.#x.delete(this.#Y.snapshot);return this.#Y.snapshot=URL.createObjectURL(J),this.#x.add(this.#Y.snapshot),this.#Y.snapshot}#AJ(J,Z,$){if(typeof J.getImageData!=="function")return!1;let X;try{X=J.getImageData(0,0,Z,$).data}catch{return!1}let j=Math.max(1,Math.floor(Z*$/256)),Y=0,Q=0,W=0;for(let K=0;K<X.length;K+=j*4){let z=Math.max(X[K],X[K+1],X[K+2]);if(Y=Math.max(Y,z),W+=1,z>24)Q+=1}if(!W)return!0;return Y<=40||Q/W<0.04}async#EJ(J){let Z=[],$=this.#Y.stream?.getVideoTracks?.()?.[0];if($&&typeof ImageCapture==="function")try{if(this.#H?.track!==$)this.#H=new ImageCapture($);Z.push(await this.#H.grabFrame())}catch{this.#H=null}if(typeof createImageBitmap==="function")try{Z.push(await createImageBitmap(J))}catch{}return Z.push(J),Z.filter(Boolean)}async#SJ(J,Z,$,X){let j=await this.#EJ(Z);for(let Y of j){try{J.drawImage(Y,0,0,$,X)}catch{continue}finally{Y.close?.()}if(!this.#AJ(J,$,X))return!0}return!1}#RJ(J){return new Promise((Z)=>{if(typeof J.requestVideoFrameCallback==="function"){let $=setTimeout(()=>Z(!1),400);J.requestVideoFrameCallback(()=>{clearTimeout($),Z(!0)});return}setTimeout(()=>Z(!1),200)})}async#UJ(J){if(!J?.videoWidth||!J.videoHeight)return null;let Z=document.createElement("canvas");Z.width=J.videoWidth,Z.height=J.videoHeight;let $=Z.getContext("2d",{willReadFrequently:!0});if(!$)return null;if(!await this.#SJ($,J,Z.width,Z.height))return null;let j=await new Promise((Y)=>Z.toBlob(Y,"image/png"));return this.#$J(j)}#IJ(J){if(this.#K!=="webcam")return;let Z=this.#Y.stream;if(!Z)return;if(this.#F===Z&&this.#Y.snapshot){this.#_();return}if(this.#R)return;this.#R=!0;let $=(j)=>{if(this.#R=!1,!j||this.#K!=="webcam"||this.#Y.stream!==Z)return;this.#F=Z,this.#_()},X=async()=>{let j=await this.#UJ(J);if(j){$(j);return}if(this.#K!=="webcam"||this.#Y.stream!==Z){this.#R=!1;return}return await this.#RJ(J),X()};X()}#P(J){let Z=requestAnimationFrame(()=>{if(this.#e.delete(Z),this.isConnected)J()});return this.#e.add(Z),Z}#xJ(){this.#e.forEach((J)=>cancelAnimationFrame(J)),this.#e.clear()}#OJ(){let J=new Set([this.#Y.snapshot,this.#X.poster,this.#U.url].filter((Z)=>typeof Z==="string"&&Z.startsWith("blob:")));this.#x.forEach((Z)=>{if(!J.has(Z))URL.revokeObjectURL(Z)}),this.#x.clear(),J.forEach((Z)=>this.#x.add(Z))}#YJ(J){return J?.matches("fig-swatch, fig-chit")??!1}#wJ(J){return this.#YJ(J)||(J?.matches("[data-fig-fill-picker-swatch]")??!1)}#uJ(){let J=Array.from(this.children).find((Z)=>!Z.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#z=document.createElement("fig-swatch"),this.#z.setAttribute("background","#D9D9D9"),this.appendChild(this.#z),this.#W=this.#z;else if(this.#wJ(J))this.#z=J,this.#W=J;else this.#W=J,this.#z=null;if(this.#s(),this.#W.removeEventListener("click",this.#t),this.#W.addEventListener("click",this.#t),this.#W.removeEventListener("keydown",this.#r),this.#W.addEventListener("keydown",this.#r),this.#YJ(this.#z))this.#P(()=>{let Z=this.#z.querySelector('input[type="color"]');if(Z)Z.remove();this.#s()})}#VJ(){return this.getAttribute("aria-label")||"Fill picker"}#s(){if(!this.#W)return;let J=this.#y(),Z=this.getAttribute("aria-labelledby");if(!this.#W.hasAttribute("role"))this.#W.setAttribute("role","button");if(this.#W.setAttribute("tabindex",J?"-1":"0"),this.#W.setAttribute("aria-disabled",J?"true":"false"),this.#W.setAttribute("aria-haspopup","dialog"),this.#W.setAttribute("aria-expanded",this.#J?.open?"true":"false"),this.#W.setAttribute("aria-controls",this.#f),this.#W.removeAttribute("aria-hidden"),Z)this.#W.setAttribute("aria-labelledby",Z),this.#W.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#W.setAttribute("aria-label",`Open ${this.#VJ()}`),this.#W.removeAttribute("aria-labelledby");else if(this.#W.removeAttribute("aria-labelledby"),!this.#W.hasAttribute("aria-label"))this.#W.setAttribute("aria-label",`Open ${this.#VJ()}`);let $=this.getAttribute("aria-describedby");if($)this.#W.setAttribute("aria-describedby",$);else this.#W.removeAttribute("aria-describedby")}#XJ(J){if(this.#y())return;J.stopPropagation(),J.preventDefault(),this.#QJ()}#E(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.#y())return;J.preventDefault(),J.stopPropagation(),this.#QJ()}#FJ(){let J=this.getAttribute("value");if(!J)return;let Z=["solid","gradient","image","video","webcam"];try{let $=JSON.parse(J);if($.type)this.#K=$.type;if($.color){if(typeof $.color==="string")this.#j=this.#_J($.color);else if(typeof $.color==="object"&&$.color.h!==void 0)this.#j=$.color}let X=$.alpha!==void 0?Number($.alpha):$.opacity!==void 0?Number($.opacity)/100:void 0;if(Number.isFinite(X))this.#j.a=Math.max(0,Math.min(1,X));if(this.#B="srgb",$.gradient)this.#Q=I({...this.#Q,...$.gradient});if($.image)this.#U={...this.#U,...$.image};if($.video){let j=this.#X.url;if(this.#X={...this.#X,...$.video},this.#X.missing=!this.#X.url,$.video.poster!=null&&$.video.poster!=="")this.#v=this.#X.url;else if(this.#X.url!==j)this.#LJ();else this.#DJ()}if(this.#ZJ($),$.type&&!Z.includes($.type)){let{type:j,...Y}=$;this.#w[$.type]=Y}}catch($){if(J.startsWith("#")){this.#K="solid",this.#j=this.#_J(J);return}if(r(J)){let X=this.#X.url;if(this.#K="video",this.#X.url=J.trim(),this.#X.missing=!1,this.#X.url!==X)this.#LJ();else this.#DJ()}}}#_(){if(!this.#z)return;let J,Z="cover",$="center";switch(this.#K){case"solid":J=this.#jJ(this.#j);break;case"gradient":J=this.#aJ();break;case"image":if(this.#U.url){J=x(this.#U.url);let X=this.#qJ(this.#U.scaleMode,this.#U.scale);Z=X.size,$=X.position}else J="";break;case"video":if(this.#X.poster){J=x(this.#X.poster);let X=this.#qJ(this.#X.scaleMode,this.#X.scale);Z=X.size,$=X.position}else J="";break;case"webcam":if(this.#Y.snapshot){J=x(this.#Y.snapshot);let X=this.#qJ(this.#Y.scaleMode,this.#Y.scale);Z=X.size,$=X.position}else J="";break;default:{J=(this.#L[this.#K]?.element||this.querySelector(`[slot="mode-${this.#K}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#z.setAttribute("background",J),this.#z.style.setProperty("--swatch-bg-size",Z),this.#z.style.setProperty("--swatch-bg-position",$),this.#K==="solid")this.#z.setAttribute("alpha",this.#j.a);else this.#z.removeAttribute("alpha")}#qJ(J,Z){switch(J){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${Z}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#QJ(){if(this.#y())return;if(!this.#J)this.#vJ();else this.#J.anchor=this.anchorElement||this.#W;if(this.#GJ(this.#K,{emit:!1}),this.#u=JSON.stringify(this.value),this.#A=this.#u,this.#YJ(this.#z))this.#z.setAttribute("selected","true");this.#J.open=!0,this.#s(),this.#P(()=>{this.#J?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#P(()=>{this.#h(),this.#S()})})}open(){this.#QJ()}close(){if(this.#J)this.#J.open=!1,this.#s()}#bJ(){if(!this.#J)return;for(let[J,{element:Z}]of Object.entries(this.#L)){let $=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((X)=>X.dataset.tab===J);if(!$)continue;while($.firstChild)Z.appendChild($.firstChild)}}#MJ({stopWebcam:J=!1}={}){if(this.#C)this.#C(),this.#C=null;if(this.#m?.disconnect(),this.#m=null,!J&&this.#p())this.#d();else this.#WJ();if(!this.#J)return;this.#bJ(),this.#J.remove(),this.#J=null,this.#I=null,this.#u=null,this.#A=null,this.#O=null,this.#M=null,this.#D=null,this.#T=null,this.#N=!1,this.#s()}#d(){this.#b+=1;let J=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#WJ({emit:J=!0}={}){this.#b+=1;let Z=Boolean(this.#Y.stream);if(this.#Y.stream)this.#Y.stream.getTracks().forEach((X)=>X.stop()),this.#Y.stream=null;this.#F=null,this.#R=!1,this.#H=null;let $=this.#J?.querySelector(".fig-fill-picker-webcam-video");if($)$.srcObject=null;if(Z&&J)this.#a()}#vJ(){this.#L={},this.querySelectorAll('[slot^="mode-"]').forEach((V)=>{let H=V.getAttribute("slot").slice(5);this.#L[H]={element:V,label:V.getAttribute("label")||H.charAt(0).toUpperCase()+H.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.id=this.#f,this.#J.setAttribute("aria-label",this.#VJ()),this.#J.setAttribute("drag","true"),this.#J.setAttribute("handle","fig-header"),this.#J.setAttribute("autoresize","false"),this.#J.classList.add("fig-fill-picker-dialog"),this.#J.anchor=this.anchorElement||this.#W;let J=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",J),this.#J.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Z=["solid","gradient","image","video","webcam"],$={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},X=this.getAttribute("mode"),j;if(X){if(j=X.split(",").map((H)=>H.trim().toLowerCase()).filter((H)=>Z.includes(H)||this.#L[H]),j.length===0)j=[...Z]}else j=[...Z];let Y={...$};for(let[V,{label:H}]of Object.entries(this.#L))Y[V]=H;if(!j.includes(this.#K))this.#K=j[0],this.#V=j[0];let Q;if(j.length===1)Q=q("h3",{className:"fig-fill-picker-type-label"},Y[j[0]]);else{let V=q("fig-select-options",{},j.map((H)=>q("fig-select-option",{value:H},Y[H])));Q=q("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#K},V)}let W=j.map((V)=>q("div",{className:"fig-fill-picker-tab","data-tab":V})),K=q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},F("close"));this.#J.replaceChildren(q("fig-header",{},[Q,K]),q("fig-content",{},W)),document.body.appendChild(this.#J);for(let[V,{element:H}]of Object.entries(this.#L)){let L=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((M)=>M.dataset.tab===V);if(!L)continue;while(H.firstChild)L.appendChild(H.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:V,container:L}}))}let z=this.#J.querySelector(".fig-fill-picker-type");if(z)z.addEventListener("change",(V)=>{let H=typeof V.detail==="string"?V.detail:V.target?.value;if(H)this.#GJ(H)});this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});let G=()=>{if(this.#YJ(this.#z))this.#z.removeAttribute("selected");if(this.#p())this.#d();else this.#WJ();let V=JSON.stringify(this.value);if(this.#A!==null&&this.#A!==V)this.#i();this.#u=null,this.#A=null,this.#s();let H=this.#W;this.#P(()=>{if(H?.isConnected)HTMLElement.prototype.focus.call(H)}),this.dispatchEvent(new CustomEvent("close"))};this.#J.addEventListener("close",G);let U={solid:()=>this.#gJ(),gradient:()=>this.#jZ(),image:()=>this.#qZ(),video:()=>this.#BZ(),webcam:()=>this.#_Z()};for(let[V,H]of Object.entries(U))if(!this.#L[V]&&j.includes(V))H();for(let V of Object.keys(this.#L)){if(Z.includes(V))continue;let H=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((L)=>L.dataset.tab===V);if(!H)continue;H.addEventListener("input",(L)=>{if(L.target===this)return;if(L.stopPropagation(),L.detail)this.#w[V]=L.detail;this.#G()}),H.addEventListener("change",(L)=>{if(L.target===this)return;if(L.stopPropagation(),L.detail)this.#w[V]=L.detail;this.#i()})}}#GJ(J,{emit:Z=!0}={}){let $=Array.from(this.#J?.querySelectorAll(".fig-fill-picker-tab")??[]).find((W)=>W.dataset.tab===J);if(!$)return;let X=this.#V;if(this.#V=J,this.#K=J,X==="webcam"&&J!=="webcam")this.#WJ();let j=this.#J.querySelector(".fig-fill-picker-type");if(j&&j.value!==J)j.value=J;this.#J.querySelectorAll(".fig-fill-picker-tab").forEach((W)=>{if(W.dataset.tab===J)W.style.display="block";else W.style.display="none"});let Q=this.#J.querySelector("fig-content");if(Q)Q.style.padding=this.#L[J]?"0":"";if(J==="gradient")this.#P(()=>{this.#o();let W=$.querySelector(".fig-fill-picker-gradient-bar-input");W?.refreshLayout?.(),this.#P(()=>{W?.refreshLayout?.()})});if(J==="video")this.#PJ({emit:!1});if(J==="webcam")this.#Y.live=this.#JJ()==="live",this.#I?.(this.#Y.deviceId);if(this.#_(),Z)this.#G()}#hJ(){if(!this.#J?.open)return;if(this.#GJ(this.#K,{emit:!1}),this.#h(),this.#S(),this.#BJ(),this.#D)this.#D.setAttribute("value",this.#j.h);if(this.#T)this.#T.setAttribute("value",this.#j.a*100),this.#T.setAttribute("color",this.#jJ(this.#j));this.#o();let J=this.#J.querySelector('[data-tab="image"]'),Z=J?.querySelector(".fig-fill-picker-scale-mode"),$=J?.querySelector(".fig-fill-picker-scale"),X=J?.querySelector(".fig-fill-picker-image-preview");if(Z)Z.value=this.#U.scaleMode;if($)$.setAttribute("value",this.#U.scale),$.style.display=this.#U.scaleMode==="tile"?"block":"none";if(X)this.#KJ(X);let j=this.#J.querySelector('[data-tab="video"]'),Y=j?.querySelector(".fig-fill-picker-scale-mode"),Q=j?.querySelector(".fig-fill-picker-video-preview");if(Y)Y.value=this.#X.scaleMode;if(Q)this.#HJ(Q)}#gJ(){let J=this.#J.querySelector('[data-tab="solid"]'),Z=this.getAttribute("alpha")!=="false",$=q("canvas",{width:"200",height:"200"}),X=q("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#jJ({...this.#j,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),j=q("fig-preview",{className:"fig-fill-picker-color-area"},[$,X]),Y=q("fig-tooltip",{text:"Sample color"},q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},F("eyedropper"))),Q=q("div",{className:`fig-fill-picker-sliders${Z?"":" is-hue-only"}`},[Y,q("fig-slider",{type:"hue",variant:"classic",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#j.h}),Z?q("fig-slider",{type:"opacity",variant:"classic",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#j.a*100,color:this.#jJ(this.#j)}):null]),W=q("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([U,V])=>q("fig-select-option",{value:U},V))),K=q("fig-field",{className:"fig-fill-picker-inputs"},[q("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#q},W),q("span",{className:"fig-fill-picker-input-fields"})]);if(J.replaceChildren(j,Q,K),this.#O=J.querySelector("canvas"),this.#M=J.querySelector("fig-handle"),this.#g(),this.#h(),this.#S(),this.#kJ(),this.#D=J.querySelector('fig-slider[type="hue"]'),this.#D.addEventListener("input",(U)=>{this.#j.h=parseFloat(U.target.value),this.#h(),this.#S(),this.#BJ(),this.#G()}),this.#D.addEventListener("change",()=>{this.#i()}),Z)this.#T=J.querySelector('fig-slider[type="opacity"]'),this.#T.addEventListener("input",(U)=>{this.#j.a=parseFloat(U.target.value)/100,this.#BJ(),this.#G()}),this.#T.addEventListener("change",()=>{this.#i()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(U)=>{let V=typeof U.detail==="string"?U.detail:U.target?.value;if(!V)return;this.#q=V,this.#yJ()}),this.#yJ();let G=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)G.addEventListener("click",async()=>{try{let V=await new EyeDropper().open();this.#j={...this.#_J(V.sRGBHex),a:this.#j.a},this.#h(),this.#S(),this.#BJ(),this.#G()}catch(U){}});else G.setAttribute("disabled",""),G.title="EyeDropper not supported in this browser"}#mJ(){let J=this.#J?.querySelector('[data-tab="solid"]');if(J){let Z=J.querySelector("canvas");if(Z){let $=document.createElement("canvas");$.width=Z.width,$.height=Z.height,Z.replaceWith($),this.#O=$,this.#kJ()}this.#h(),this.#S()}this.#NJ(),this.#G()}#h(){if(!this.#O&&this.#J)this.#O=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#O)return;let J=this.#B==="display-p3"?"display-p3":"srgb",Z=this.#O.getContext("2d",{colorSpace:J});if(!Z)return;let $=this.#O.width,X=this.#O.height;Z.clearRect(0,0,$,X);let j=this.#j.h,Y=this.#B==="display-p3",Q=Z.createLinearGradient(0,0,$,0);if(Y){Q.addColorStop(0,"color(display-p3 1 1 1)");let[K,z,G]=hslToP3(j,100,50);Q.addColorStop(1,`color(display-p3 ${K} ${z} ${G})`)}else Q.addColorStop(0,"#FFFFFF"),Q.addColorStop(1,`hsl(${j}, 100%, 50%)`);Z.fillStyle=Q,Z.fillRect(0,0,$,X);let W=Z.createLinearGradient(0,0,0,X);W.addColorStop(0,"rgba(0,0,0,0)"),W.addColorStop(1,"rgba(0,0,0,1)"),Z.fillStyle=W,Z.fillRect(0,0,$,X)}#S(J=0){if(!this.#M||!this.#O)return;this.#g();let Z=this.#O.getBoundingClientRect();if((Z.width===0||Z.height===0)&&J<5){this.#P(()=>this.#S(J+1));return}let $=Math.max(0,Math.min(100,this.#j.s)),X=Math.max(0,Math.min(100,100-this.#j.v));this.#M.setAttribute("value",`${$}% ${X}%`),this.#M.setAttribute("color",this.#jJ({...this.#j,a:1}))}#g(){if(!this.#M)return;this.#M.setAttribute("aria-valuenow",String(Math.round(this.#j.v))),this.#M.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#j.s)}%, brightness ${Math.round(this.#j.v)}%`),this.#M.removeAttribute("aria-pressed")}#l(J,Z,$={}){let{updateHandle:X=!0,emitInput:j=!0,emitChange:Y=!1}=$;if(this.#j.s=Math.max(0,Math.min(100,J*100)),this.#j.v=Math.max(0,Math.min(100,(1-Z)*100)),this.#M)this.#M.setAttribute("color",this.#jJ({...this.#j,a:1})),this.#g();if(X)this.#S();if(this.#BJ(),j)this.#G();if(Y)this.#i()}#kJ(){if(this.#C)this.#C(),this.#C=null;if(!this.#O||!this.#M)return;let J=this.#O.parentElement||this.#O,Z=this.#M,$=!1,X=(z,G={})=>{let U=J.getBoundingClientRect();if(U.width===0||U.height===0)return;let V=Math.max(0,Math.min(z.clientX-U.left,U.width)),H=Math.max(0,Math.min(z.clientY-U.top,U.height));this.#l(V/U.width,H/U.height,G)},j=(z)=>{if(z.button!==0)return;if(z.target===Z||Z.contains(z.target))return;$=!0,this.#k=!0,J.setPointerCapture(z.pointerId),X(z,{updateHandle:!0,emitInput:!0})},Y=(z)=>{if(!$)return;if(z.buttons===0){Q();return}X(z,{updateHandle:!0,emitInput:!0})},Q=()=>{if(!$)return;$=!1,this.#k=!1,this.#i()},W=(z)=>{this.#k=!0;let G=z.detail?.px,U=z.detail?.py;if(!Number.isFinite(G)||!Number.isFinite(U))return;Z.setAttribute("value",`${G*100}% ${U*100}%`),this.#l(G,U,{updateHandle:!1,emitInput:!0})},K=(z)=>{let G=z.detail?.px,U=z.detail?.py;if(Number.isFinite(G)&&Number.isFinite(U))Z.setAttribute("value",`${G*100}% ${U*100}%`),this.#l(G,U,{updateHandle:!1,emitInput:!1});this.#k=!1,this.#i()};J.addEventListener("pointerdown",j),J.addEventListener("pointermove",Y),J.addEventListener("pointerup",Q),J.addEventListener("pointercancel",Q),J.addEventListener("lostpointercapture",Q),Z.addEventListener("input",W),Z.addEventListener("change",K),this.#C=()=>{J.removeEventListener("pointerdown",j),J.removeEventListener("pointermove",Y),J.removeEventListener("pointerup",Q),J.removeEventListener("pointercancel",Q),J.removeEventListener("lostpointercapture",Q),Z.removeEventListener("input",W),Z.removeEventListener("change",K),this.#k=!1}}#yJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=(W,K)=>q("fig-tooltip",{text:W},K),$=(W,K,z,G,U,V)=>q("fig-input-number",{className:W,"aria-label":K,min:z,max:G,step:U,units:V}),X=this.getAttribute("alpha")!=="false",j=()=>X?Z("Alpha",$("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Y=(W,K="")=>q("div",{className:["input-combo",K].filter(Boolean).join(" ")},W),Q;switch(this.#q){case"rgb":Q=Y([Z("Red",$("fig-fill-picker-ci-r","Red",0,255)),Z("Green",$("fig-fill-picker-ci-g","Green",0,255)),Z("Blue",$("fig-fill-picker-ci-b","Blue",0,255)),j()]);break;case"hsl":Q=Y([Z("Hue",$("fig-fill-picker-ci-h","Hue",0,360)),Z("Saturation",$("fig-fill-picker-ci-s","Saturation",0,100)),Z("Lightness",$("fig-fill-picker-ci-l","Lightness",0,100)),j()]);break;case"hsb":Q=Y([Z("Hue",$("fig-fill-picker-ci-h","Hue",0,360)),Z("Saturation",$("fig-fill-picker-ci-s","Saturation",0,100)),Z("Brightness",$("fig-fill-picker-ci-v","Brightness",0,100)),j()]);break;case"lab":Q=Y([Z("Lightness",$("fig-fill-picker-ci-okl","Lightness",0,100)),Z("Green-Red axis",$("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),Z("Blue-Yellow axis",$("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),j()]);break;case"lch":Q=Y([Z("Lightness",$("fig-fill-picker-ci-okl","Lightness",0,100)),Z("Chroma",$("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),Z("Hue",$("fig-fill-picker-ci-okh","Hue",0,360)),j()]);break;case"css":Q=q("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let W=q("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});Q=X?Y([W,j()],"fig-fill-picker-ci-hex-row"):W}break}J.replaceChildren(Q),this.#ZZ(),this.#P(()=>this.#BJ())}#ZZ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=()=>{if(this.#k)return;let j=this.#XZ();if(!j)return;let Y=Number.isFinite(j.a)?j.a:this.#j.a;if(this.#j={...j,a:Y},this.#h(),this.#S(),this.#D)this.#D.setAttribute("value",this.#j.h);if(this.#T&&Number.isFinite(j.a))this.#T.setAttribute("value",this.#j.a*100);this.#G()},$=()=>this.#i();J.querySelectorAll("fig-input-number, fig-input-text").forEach((j)=>{j.addEventListener("input",Z),j.addEventListener("change",$)})}#$Z(){let J=this.#J?.querySelector(".fig-fill-picker-ci-a");if(!J)return;let Z=parseFloat(J.value);if(!Number.isFinite(Z))return;return Math.max(0,Math.min(1,Z/100))}#XZ(){let J=(X)=>this.#J?.querySelector(`.${X}`),Z=(X)=>parseFloat(J(X)?.value??0),$=(X)=>{if(!X)return null;let j=this.#$Z();return{...X,a:j??X.a??this.#j.a}};switch(this.#q){case"rgb":return $(this.#fJ({r:Z("fig-fill-picker-ci-r"),g:Z("fig-fill-picker-ci-g"),b:Z("fig-fill-picker-ci-b")}));case"hsl":{let X=this.#yZ({h:Z("fig-fill-picker-ci-h"),s:Z("fig-fill-picker-ci-s"),l:Z("fig-fill-picker-ci-l")});return $(this.#fJ(X))}case"hsb":return $({h:Z("fig-fill-picker-ci-h"),s:Z("fig-fill-picker-ci-s"),v:Z("fig-fill-picker-ci-v")});case"lab":{let X=this.#JZ({l:Z("fig-fill-picker-ci-okl")/100,a:Z("fig-fill-picker-ci-oka"),b:Z("fig-fill-picker-ci-okb")});return $(this.#fJ(X))}case"lch":{let X=this.#PZ({l:Z("fig-fill-picker-ci-okl")/100,c:Z("fig-fill-picker-ci-okc"),h:Z("fig-fill-picker-ci-okh")});return $(this.#fJ(X))}case"css":{let X=J("fig-fill-picker-ci-css");if(!X)return null;return this.#NZ(X.value)}default:{let X=J("fig-fill-picker-ci-hex");if(!X)return null;let j=X.value.replace(/^#/,"");if(j.length===3)j=j[0]+j[0]+j[1]+j[1]+j[2]+j[2];if(j.length===8){let Y=parseInt(j.slice(6,8),16)/255;if(j=j.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(j))return null;return{...this.#_J(`#${j}`),a:Y}}if(j.length!==6||!/^[0-9a-fA-F]{6}$/.test(j))return null;return $(this.#_J(`#${j}`))}}}#BJ(){if(!this.#J)return;let J=this.#jJ(this.#j),Z=this.#oJ(this.#j),$=(j)=>this.#J.querySelector(`.${j}`),X=(j,Y)=>{let Q=$(j);if(Q)Q.setAttribute("value",Y)};switch(this.#q){case"rgb":X("fig-fill-picker-ci-r",Z.r),X("fig-fill-picker-ci-g",Z.g),X("fig-fill-picker-ci-b",Z.b);break;case"hsl":{let j=this.#FZ(Z);X("fig-fill-picker-ci-h",Math.round(j.h)),X("fig-fill-picker-ci-s",Math.round(j.s)),X("fig-fill-picker-ci-l",Math.round(j.l));break}case"hsb":X("fig-fill-picker-ci-h",Math.round(this.#j.h)),X("fig-fill-picker-ci-s",Math.round(this.#j.s)),X("fig-fill-picker-ci-v",Math.round(this.#j.v));break;case"lab":{let j=this.#eJ(Z);X("fig-fill-picker-ci-okl",Math.round(j.l*100)),X("fig-fill-picker-ci-oka",+j.a.toFixed(3)),X("fig-fill-picker-ci-okb",+j.b.toFixed(3));break}case"lch":{let j=this.#DZ(Z);X("fig-fill-picker-ci-okl",Math.round(j.l*100)),X("fig-fill-picker-ci-okc",+j.c.toFixed(3)),X("fig-fill-picker-ci-okh",Math.round(j.h));break}case"css":X("fig-fill-picker-ci-css",this.#TZ(this.#j));break;default:X("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#q!=="css"){let j=Math.round(this.#j.a*1000)/10;X("fig-fill-picker-ci-a",Number.isInteger(j)?j:+j.toFixed(1))}if(this.#T)this.#T.setAttribute("color",J);this.#_()}#jZ(){let J=this.#J.querySelector('[data-tab="gradient"]'),Z=q("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#Q.type,variant:"ghost"},q("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([z,G])=>q("fig-select-option",{value:z},G)))),$=(z,G,U)=>q("fig-tooltip",{text:z},q("fig-button",{icon:!0,variant:"ghost",className:G,"aria-label":z},F(U))),X=q("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[$("Flip gradient","fig-fill-picker-gradient-flip","swap"),$("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),j=q("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[Z,X]),Y=q("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large",value:JSON.stringify({type:"gradient",gradient:S(this.#Q)})}),Q=q("fig-preview",{className:"fig-fill-picker-gradient-preview"},Y),W=q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},F("add")),K=q("div",{className:"fig-fill-picker-gradient-stops"},[q("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[q("h3",{},"Stops"),W]),q("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);J.replaceChildren(j,Q,K),this.#o(),this.#YZ(J)}#CZ(){let J=({value:X,title:j,subtitle:Y,advanced:Q=!1})=>q("fig-select-option",{value:X,label:`${j} — ${Y}`,className:Q?"fig-fill-picker-gradient-interpolation-advanced":null},[q("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),q("span",{className:"fig-fill-picker-gradient-interpolation-label"},[q("span",{className:"fig-fill-picker-gradient-interpolation-title"},j),q("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Y)])]),Z=q("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),$=D.#Z;return[...$.filter((X)=>!X.advanced).map(J),Z,...$.filter((X)=>X.advanced).map(J)]}#YZ(J){let Z=(B)=>typeof B.detail==="string"?B.detail:B.target?.value,$=J.querySelector(".fig-fill-picker-gradient-bar-input"),X=(B)=>{if(!$)return;this.#N=!0;try{$.value={type:"gradient",gradient:S(B)}}finally{this.#N=!1}},j=()=>{X(this.#Q)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(B)=>{let f=Z(B);if(!f)return;this.#Q.type=f,this.#o(),this.#G()});let Q=J.querySelector(".fig-fill-picker-gradient-space"),W=Q?.querySelector("fig-select-options"),K="fig-fill-picker-gradient-interpolation-collapsed",z=W?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),G=()=>Boolean(W?.classList.contains(K)),U=(B)=>{W?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",B?"Show all color interpolation options":"Scroll down")},V=()=>{if(!W)return;W.classList.remove(K),W.style.removeProperty("max-height"),U(!1),W.syncOverflow?.()},H=()=>{if(!W||!z)return;W.style.removeProperty("max-height"),W.classList.add(K),W.scrollTop=0;let B=W.getBoundingClientRect().top,f=z.getBoundingClientRect().top,N=W.querySelector(".fig-overflow-end")?.offsetHeight||0,C=f-B;if(C>0)W.style.maxHeight=`${Math.round(C+N)}px`;U(!0),W.syncOverflow?.()},L=(B)=>Boolean(W?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${B}"]`)),M=()=>{if(L(m(this.#Q)))V();else H()};if(W?.addEventListener("click",(B)=>{if(!G())return;if(!B.target?.closest?.(".fig-overflow-end"))return;B.preventDefault(),B.stopPropagation(),V()},!0),W?.addEventListener("focusin",(B)=>{if(!G())return;if(B.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))V()}),W?.addEventListener("scroll",()=>{if(G()&&W.scrollTop!==0)W.scrollTop=0}),Q?.querySelectorAll("fig-select-option").forEach((B)=>{let f=()=>{let N=A(B.getAttribute("value")||"srgb");X(y({...this.#Q,...N}))};B.addEventListener("pointerenter",f),B.addEventListener("pointerleave",()=>{if(document.activeElement!==B)j()}),B.addEventListener("focus",f),B.addEventListener("blur",()=>{if(!B.matches(":hover"))j()})}),this.#m?.disconnect(),Q)this.#m=new MutationObserver(()=>{if(!Q.hasAttribute("open"))j();else this.#P(M)}),this.#m.observe(Q,{attributes:!0,attributeFilter:["open"]});let O=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(O?.addEventListener("change",(B)=>{let f=typeof B.detail==="string"?B.detail:B.target?.value;if(!f)return;let N=A(f);this.#Q=y({...this.#Q,...N}),this.#o(),this.#G()}),O?.querySelectorAll("fig-segment").forEach((B)=>{let f=()=>{X(y({...this.#Q,...A(B.getAttribute("value")||"srgb")}))};B.addEventListener("pointerenter",f),B.addEventListener("pointerleave",j)}),Q?.addEventListener("change",(B)=>{let f=Z(B);if(!f)return;let N=A(f);this.#Q=y({...this.#Q,...N}),this.#o(),this.#G()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#Q.angle=(Number(this.#Q.angle)+90)%360,this.#o(),this.#G()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#Q.stops.forEach((B)=>{B.position=100-B.position}),this.#Q.stops.sort((B,f)=>B.position-f.position),this.#o(),this.#G()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#Q.stops.push({position:50,color:"#888888",opacity:100}),this.#Q.stops.sort((f,N)=>f.position-N.position),this.#o(),this.#G()}),$){let B=(f)=>{if(f.stopPropagation(),this.#N)return;let N=f.detail;if(!N?.gradient)return;this.#Q=I({...this.#Q,...N.gradient}),this.#_(),this.#TJ(),this.#iJ()};$.addEventListener("input",(f)=>{B(f),this.#G()}),$.addEventListener("change",(f)=>{B(f),this.#i()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(B)=>{this.#zZ(B)})}#pJ(J){let Z=String(J.color||"#888888").replace(/^#/,"").slice(0,6),$=J.opacity??100;if($>=100)return`#${Z}`;let X=Math.round($/100*255).toString(16).padStart(2,"0");return`#${Z}${X}`}#QZ(J){if(!(J instanceof HTMLElement))return"#888888";if(J.hexOpaque)return this.#cJ(J.hexOpaque);let Z=J.value;if(typeof Z==="string"&&Z.startsWith("#"))return this.#cJ(Z.length>7?Z.slice(0,7):Z);let $=J.querySelector('fig-input-text:not([type="number"])'),X=String($?.value??$?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(X))return`#${X.toUpperCase()}`;let j=J.getAttribute("value");if(typeof j==="string"&&j.startsWith("#"))return this.#cJ(j.length>7?j.slice(0,7):j);return"#888888"}#cJ(J){let Z=String(J||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(Z))return"#888888";return`#${Z.toUpperCase()}`}#WZ(J){let Z=J.querySelector(".fig-fill-picker-stop-position"),$=J.querySelector(".fig-fill-picker-stop-color"),X=parseFloat(Z?.value??Z?.getAttribute("value")??"0")||0,j=this.#QZ($),Y=100;if($ instanceof HTMLElement&&$.rgba?.a!==void 0)Y=Math.round($.rgba.a*100);else{let Q=parseInt(J.dataset.index,10);if(!isNaN(Q)&&this.#Q.stops[Q])Y=this.#Q.stops[Q].opacity??100}return{position:X,color:j,opacity:Y}}#sJ(J){let Z=parseInt(J.dataset.index,10);if(isNaN(Z)||Z<0||Z>=this.#Q.stops.length)return;let $={...this.#Q.stops[Z],...this.#WZ(J)};this.#Q.stops[Z]=$,this.#KZ(J,$)}#KZ(J,Z){let $=J.querySelector(".fig-fill-picker-stop-position");if($)$.setAttribute("value",String(Z.position));let X=J.querySelector(".fig-fill-picker-stop-color");if(X)X.setAttribute("value",this.#pJ(Z))}#zZ(J){let{oldIndex:Z,newIndex:$}=J.detail??{};if(Z==null||$==null||Z===$||Z<0||$<0||Z>=this.#Q.stops.length||$>=this.#Q.stops.length)return;let j=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");j.forEach((Q)=>this.#sJ(Q));let[Y]=this.#Q.stops.splice(Z,1);this.#Q.stops.splice($,0,Y),j.forEach((Q,W)=>{Q.dataset.index=String(W)}),this.#N=!0;try{this.#TJ(),this.#NJ(),this.#G()}finally{this.#N=!1}}#o(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"]');if(!J)return;this.#Q=I(this.#Q);let Z=m(this.#Q),$=J.querySelector(".fig-fill-picker-gradient-space");if($)$.value=Z;let X=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(X){let j=D.#$(Z),Y=X.querySelector(`fig-segment[value="${Z}"]`)||X.querySelector(`fig-segment[data-space="${j.space}"]`);if(Y){let Q=`${j.title} — ${j.subtitle}`;Y.setAttribute("value",Z),Y.setAttribute("aria-label",Q);let W=Y.closest("fig-tooltip");if(W)W.setAttribute("text",Q);X.value=Z}}this.#TJ(),this.#NJ(),this.#iJ()}#UZ(){let J=Array.isArray(this.#Q.stops)?[...this.#Q.stops].sort((Z,$)=>(Z.position??0)-($.position??0)):[];if(J.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return J.map((Z)=>({color:String(Z.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Z.position??0}))}#TJ(){if(!this.#J)return;let J=this.#UZ();this.#J.querySelectorAll("fig-interpolation-swatch").forEach((Z)=>{let $=Z.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",X=A($),j={type:"linear",stops:J,interpolationSpace:X.interpolationSpace};if(E.has(X.interpolationSpace))j.hueInterpolation=X.hueInterpolation;Z.value={type:"gradient",gradient:j}})}#NJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(J)this.#N=!0,J.value={type:"gradient",gradient:S(this.#Q)},this.#N=!1;this.#_()}#iJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-stops-list"),Z=J?.querySelector("fig-reorder");if(!J||!Z)return;let $=Z.querySelectorAll(".fig-fill-picker-gradient-stop-row");if($.length===this.#Q.stops.length){this.#Q.stops.forEach((X,j)=>{let Y=$[j];Y.dataset.index=j;let Q=Y.querySelector(".fig-fill-picker-stop-position");if(Q)Q.setAttribute("value",X.position);let W=Y.querySelector(".fig-fill-picker-stop-color");if(W)W.setAttribute("value",this.#pJ(X));let K=Y.querySelector(".fig-fill-picker-stop-remove");if(K)if(this.#Q.stops.length<=2)K.setAttribute("disabled","");else K.removeAttribute("disabled")});return}this.#VZ(J)}#VZ(J){let Z=J.querySelector("fig-reorder");if(!Z)return;let $=this.#Q.stops.map((X,j)=>q("fig-field",{className:"fig-fill-picker-gradient-stop-row","data-index":j},[q("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:X.position,units:"%"}),q("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right",value:this.#pJ(X)}),q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-stop-remove",disabled:this.#Q.stops.length<=2,"aria-label":"Remove gradient stop"},F("minus"))]));Z.replaceChildren(...$),Z.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((X)=>{X.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#sJ(X),this.#TJ(),this.#NJ(),this.#G()});let j=X.querySelector(".fig-fill-picker-stop-color"),Y=j.querySelector("fig-fill-picker");if(Y)Y.anchorElement=this.#J;else this.#P(()=>{let W=j.querySelector("fig-fill-picker");if(W)W.anchorElement=this.#J});let Q=()=>{this.#sJ(X),this.#N=!0;try{this.#TJ(),this.#NJ(),this.#G()}finally{this.#N=!1}};j.addEventListener("input",Q),j.addEventListener("change",Q),X.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let W=parseInt(X.dataset.index,10);if(this.#Q.stops.length>2)this.#Q.stops.splice(W,1),this.#o(),this.#G()})})}#dJ(J,Z=!0){let $=y({...this.#Q,interpolationSpace:J??this.#Q.interpolationSpace}),X=this.#B==="display-p3",j=$.stops.map((W)=>{let K=(W.opacity??100)/100;return`${X?this.#RZ(W.color,K):this.#MZ(W.color,K)} ${W.position}%`}).join(", "),Y=UJ($),Q=Z&&Y?` ${Y}`:"";switch($.type){case"linear":return`linear-gradient(${$.angle}deg${Q}, ${j})`;case"radial":return`radial-gradient(circle at ${$.centerX}% ${$.centerY}%${Q}, ${j})`;case"angular":return`conic-gradient(from ${$.angle}deg${Q}, ${j})`;default:return`linear-gradient(${$.angle}deg${Q}, ${j})`}}static#rJ=new Map;#nJ(J){let Z=D.#rJ.get(J);if(Z!==void 0)return Z;let $=document.createElement("div");$.style.background=J;let X=!!$.style.background;return D.#rJ.set(J,X),X}#aJ(){let J=this.#dJ(void 0,!0);if(this.#nJ(J))return J;let Z=this.#dJ("oklab",!0);if(this.#nJ(Z))return Z;return this.#dJ("oklab",!1)}#qZ(){let J=this.#J.querySelector('[data-tab="image"]'),Z=q("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#U.scaleMode},q("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Y,Q])=>q("fig-select-option",{value:Y},Q)))),$=q("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#U.scale,units:"%"});if(this.#U.scaleMode!=="tile")$.style.display="none";let X=q("fig-field",{className:"fig-fill-picker-media-header"},[Z,$]),j=q("fig-image",{className:"fig-fill-picker-media-preview fig-fill-picker-image-preview",upload:"true",label:"Upload from computer",alt:"Image fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true"});J.replaceChildren(X,j),this.#GZ(J)}#GZ(J){let Z=J.querySelector(".fig-fill-picker-scale-mode"),$=J.querySelector(".fig-fill-picker-scale"),X=J.querySelector(".fig-fill-picker-image-preview");Z.addEventListener("change",(j)=>{let Y=typeof j.detail==="string"?j.detail:j.target?.value;if(!Y)return;this.#U.scaleMode=Y,$.style.display=Y==="tile"?"block":"none",this.#KJ(X),this.#_(),this.#G()}),$.addEventListener("input",(j)=>{this.#U.scale=parseFloat(j.target.value)||100,this.#KJ(X),this.#_(),this.#G()}),X.addEventListener("loaded",(j)=>{let Y=j.detail?.src||X.src;if(!Y)return;let Q=Y!==this.#U.url;if(this.#U.url=Y,this.#KJ(X),this.#_(),Q)this.#G();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:j.detail??{src:Y}}))}),X.addEventListener("change",()=>{if(X.src)return;this.#U.url=null,this.#KJ(X),this.#_(),this.#G()}),this.#KJ(X)}#KJ(J){if(!this.#U.url){J.removeAttribute("src"),J.classList.remove("has-media","is-tiled"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="";return}J.setAttribute("src",this.#U.url),J.classList.add("has-media"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="",J.mediaEl?.style.removeProperty("opacity");let Z=J.querySelector("fig-input-file[data-generated]");if(Z)Z.setAttribute("label","Replace"),Z.removeAttribute("url");switch(this.#U.scaleMode){case"fill":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"crop":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"fit":J.classList.remove("is-tiled"),J.setAttribute("fit","contain");break;case"tile":if(J.classList.add("is-tiled"),J.setAttribute("fit","none"),J.style.backgroundImage=`url(${this.#U.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#U.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#HJ(J){if(J.tagName==="FIG-MEDIA"){if(!this.#X.url){J.removeAttribute("src"),J.classList.remove("has-media");return}if(J.setAttribute("src",this.#X.url),this.#X.poster)J.setAttribute("poster",this.#X.poster);else J.removeAttribute("poster");J.classList.add("has-media");let Z=J.querySelector("fig-input-file[data-generated]");if(Z)Z.setAttribute("label","Replace"),Z.removeAttribute("url");switch(this.#X.scaleMode){case"fill":case"crop":J.setAttribute("fit","cover");break;case"fit":J.setAttribute("fit","contain");break}return}switch(J.style.objectPosition="center",J.style.width="100%",J.style.height="100%",this.#X.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#BZ(){let J=this.#J.querySelector('[data-tab="video"]'),Z=q("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#X.scaleMode},q("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([j,Y])=>q("fig-select-option",{value:j},Y)))),$=q("fig-field",{className:"fig-fill-picker-media-header"},Z),X=q("fig-media",{className:"fig-fill-picker-media-preview fig-fill-picker-video-preview",type:"video",upload:"true",label:"Upload from computer","aria-label":"Video fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",controls:!0,muted:"true",loop:"true"});J.replaceChildren($,X),this.#fZ(J),this.#PJ({emit:!1})}#LJ(){if(this.#X.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#X.poster),this.#x.delete(this.#X.poster);this.#X.poster=null,this.#v=null}#DJ(){if(!this.#X.poster)return;if(this.#v&&this.#v===this.#X.url)return;this.#LJ()}#lJ(){let J=this.#J?.querySelector(".fig-fill-picker-video-preview");if(J)this.#HJ(J)}#PJ({emit:J=!1}={}){if(this.#X.url){if(this.#X.missing=!1,this.#DJ(),!this.#X.poster)this.#CJ(this.#X.url);else this.#lJ();return}let Z=this.getAttribute("default-video");if(!Z){this.#X.missing=!0;return}if(this.#X.url=Z,this.#X.missing=!1,this.#lJ(),this.#CJ(Z),J)this.#G()}#tJ(){if(this.#K!=="video")return;let J=this.#X.url;if(!J)return;if(this.#DJ(),this.#X.poster)return;this.#CJ(J)}async#HZ(J){if(typeof J.requestVideoFrameCallback==="function")await Promise.race([new Promise((Z)=>J.requestVideoFrameCallback(()=>Z())),new Promise((Z)=>setTimeout(Z,80))]);else try{await J.play(),J.pause()}catch{}if(typeof createImageBitmap==="function")try{return await createImageBitmap(J)}catch{}return null}async#LZ(J){let Z=await this.#HZ(J),$=Z?.width||J.videoWidth,X=Z?.height||J.videoHeight;if(!$||!X)return Z?.close?.(),null;let j=typeof OffscreenCanvas==="function"?new OffscreenCanvas($,X):Object.assign(document.createElement("canvas"),{width:$,height:X}),Y=j.getContext("2d");if(!Y)return Z?.close?.(),null;try{Y.drawImage(Z||J,0,0,$,X)}finally{Z?.close?.()}return j.convertToBlob?j.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((Q)=>j.toBlob(Q,"image/jpeg",0.85))}async#CJ(J,{emit:Z=!1}={}){if(!J||this.#n===J)return;this.#n=J;let $=document.createElement("video");$.muted=!0,$.playsInline=!0,$.preload="auto",$.crossOrigin="anonymous";try{if(await new Promise((j,Y)=>{let Q=()=>Y(Error("video poster failed"));$.addEventListener("error",Q,{once:!0}),$.addEventListener("loadeddata",j,{once:!0}),$.src=J}),!$.videoWidth||!$.videoHeight)return;let X=await this.#LZ($);if(!X||this.#X.url!==J)return;if(this.#LJ(),this.#X.poster=URL.createObjectURL(X),this.#v=J,this.#x.add(this.#X.poster),this.#_(),this.#lJ(),Z)this.#G()}catch{}finally{if($.removeAttribute("src"),$.load(),this.#n===J)this.#n=null}}#fZ(J){let Z=J.querySelector(".fig-fill-picker-scale-mode"),$=J.querySelector(".fig-fill-picker-video-preview");Z.addEventListener("change",(X)=>{let j=typeof X.detail==="string"?X.detail:X.target?.value;if(!j)return;this.#X.scaleMode=j,this.#HJ($),this.#_(),this.#G()}),$.addEventListener("loaded",(X)=>{let j=X.detail?.src||$.src;if(!j)return;let Y=j!==this.#X.url;if(Y)this.#LJ();if(this.#X.url=j,this.#X.missing=!1,this.#HJ($),this.#CJ(j),this.#_(),Y)this.#G();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:X.detail??{src:j}}))}),$.addEventListener("change",()=>{if($.src)return;this.#X.url=null,this.#LJ(),this.#PJ(),this.#HJ($),this.#_(),this.#G()}),this.#HJ($)}#_Z(){let J=this.#J.querySelector('[data-tab="webcam"]'),Z=q("fig-field",{className:"fig-fill-picker-webcam-camera"},q("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));Z.style.display="none";let $=q("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});$.muted=!0;let X=q("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},q("span",{},"Camera access required")),j=q("fig-video",{className:"fig-fill-picker-webcam-preview","aria-label":"Webcam preview","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",autoplay:"true",muted:"true"},[$,X]),Y=q("div",{className:"fig-fill-picker-webcam-controls"},q("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));J.replaceChildren(Z,j,Y),this.#OZ(J)}#OZ(J){let Z=J.querySelector(".fig-fill-picker-webcam-video"),$=J.querySelector(".fig-fill-picker-webcam-status"),X=J.querySelector(".fig-fill-picker-webcam-capture"),j=J.querySelector(".fig-fill-picker-webcam-camera"),Y=J.querySelector(".fig-fill-picker-camera-select"),Q=(U)=>{if(U)X.removeAttribute("disabled");else X.setAttribute("disabled","")},W=()=>{let U=!!this.#Y.stream&&Z.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&Z.videoWidth>0&&Z.videoHeight>0;if(Q(U),U)$.querySelector("span").textContent="Camera ready",$.style.display="none",this.#IJ(Z)};Z.addEventListener("loadedmetadata",W),Z.addEventListener("canplay",W),Z.addEventListener("playing",W);let K=(U)=>{this.#Y.stream=U,Z.srcObject=U,Z.muted=!0,Z.playsInline=!0,Z.style.display="block";let V=Z.play?.();if(V?.catch)V.catch(()=>{});W()},z=async(U,V)=>{let H=await navigator.mediaDevices.enumerateDevices();if(U!=null&&U!==this.#b)return;let L=H.filter((M)=>M.kind==="videoinput");if(L.length>1){j.style.display="";let M=Y.querySelector(":scope > fig-select-options");if(!M)M=document.createElement("fig-select-options"),Y.append(M);if(M.replaceChildren(),L.forEach((O,T)=>{let B=document.createElement("fig-select-option");B.value=O.deviceId;let f=O.label||(L.length>1?`Camera ${T+1}`:"Camera");B.textContent=f.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(N,C)=>{return` ${/^\d+$/.test(C)?Number.parseInt(C,10).toString():C.replace(/^0+/,"")||"0"}`}),M.append(B)}),V)Y.value=V}else j.style.display="none",Y.querySelector(":scope > fig-select-options")?.replaceChildren()},G=async(U=null)=>{let V=U||this.#Y.deviceId||null,H=this.#Y.stream,L=H?.getTracks?.().filter((O)=>O.readyState!=="ended")??[];if(H&&L.length){let O=H.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#Y.deviceId||null;if(!V||V===O){K(H),this.#a(),z(null,V||O);return}}this.#WJ({emit:Boolean(H)});let M=this.#b;Q(!1),$.querySelector("span").textContent="Starting camera",$.style.display="flex";try{let O={video:V?{deviceId:{exact:V}}:!0},T=await navigator.mediaDevices.getUserMedia(O);if(M!==this.#b||!this.isConnected||this.#V!=="webcam"){T.getTracks().forEach((f)=>f.stop());return}let B=T.getVideoTracks?.()?.[0];this.#Y.deviceId=V||B?.getSettings?.()?.deviceId||null,this.#Y.live=this.#JJ()==="live",K(T),this.#a(),await z(M,V)}catch(O){if(M!==this.#b)return;console.error("Webcam error:",O.name,O.message);let T="Camera access denied";if(O.name==="NotAllowedError")T="Camera permission denied";else if(O.name==="NotFoundError")T="No camera found";else if(O.name==="NotReadableError")T="Camera in use by another app";else if(O.name==="OverconstrainedError")T="Camera constraints not supported";else if(!window.isSecureContext)T="Camera requires secure context";$.replaceChildren();let B=document.createElement("span");B.textContent=T,$.appendChild(B),$.style.display="flex",Z.style.display="none",Q(!1)}};this.#I=G,Y.addEventListener("change",(U)=>{let V=typeof U.detail==="string"?U.detail:U.target?.value;if(!V||V===this.#Y.deviceId)return;G(V)}),X.addEventListener("click",async()=>{if(!this.#Y.stream)return;let U=await this.#UJ(Z);if(!U)return;this.#U.url=U,this.#Y.live=!1;let V=this.#J.querySelector(".fig-fill-picker-image-preview");if(V)this.#KJ(V);if(Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).some((L)=>L.dataset.tab==="image"))this.#GJ("image");else this.#_(),this.#G();this.#i()})}#oJ(J){let Z=J.h/360,$=J.s/100,X=J.v/100,j,Y,Q,W=Math.floor(Z*6),K=Z*6-W,z=X*(1-$),G=X*(1-K*$),U=X*(1-(1-K)*$);switch(W%6){case 0:j=X,Y=U,Q=z;break;case 1:j=G,Y=X,Q=z;break;case 2:j=z,Y=X,Q=U;break;case 3:j=z,Y=G,Q=X;break;case 4:j=U,Y=z,Q=X;break;case 5:j=X,Y=z,Q=G;break}return{r:Math.round(j*255),g:Math.round(Y*255),b:Math.round(Q*255)}}#fJ(J){let Z=J.r/255,$=J.g/255,X=J.b/255,j=Math.max(Z,$,X),Y=Math.min(Z,$,X),Q=j-Y,W=0,K=j===0?0:Q/j,z=j;if(j!==Y){switch(j){case Z:W=($-X)/Q+($<X?6:0);break;case $:W=(X-Z)/Q+2;break;case X:W=(Z-$)/Q+4;break}W/=6}return{h:W*360,s:K*100,v:z*100,a:1}}#jJ(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Z=this.#oJ(J),$=(X)=>{return(isNaN(X)?217:Math.max(0,Math.min(255,Math.round(X)))).toString(16).padStart(2,"0")};return`#${$(Z.r)}${$(Z.g)}${$(Z.b)}`}#_J(J){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),X=parseInt(J.slice(5,7),16);return this.#fJ({r:Z,g:$,b:X})}#MZ(J,Z=1){let $=parseInt(J.slice(1,3),16),X=parseInt(J.slice(3,5),16),j=parseInt(J.slice(5,7),16);return`rgba(${$}, ${X}, ${j}, ${Z})`}#kZ(J){let Z=Math.max(0,Math.min(1,Number(J)||0)),$=Math.round(Z*1000)/1000;return String($)}#TZ(J=this.#j){let Z=this.#oJ(J);return`rgba(${Z.r}, ${Z.g}, ${Z.b}, ${this.#kZ(J.a)})`}#NZ(J){let Z=String(J??"").trim();if(!Z)return null;let $=Z.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if($){let j=$[1];if(j.length===3)j=j[0]+j[0]+j[1]+j[1]+j[2]+j[2];let Y=1;if(j.length===8)Y=parseInt(j.slice(6,8),16)/255,j=j.slice(0,6);return{...this.#_J(`#${j}`),a:Y}}let X=Z.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if(X){let j=Math.max(0,Math.min(255,Math.round(parseFloat(X[1])))),Y=Math.max(0,Math.min(255,Math.round(parseFloat(X[2])))),Q=Math.max(0,Math.min(255,Math.round(parseFloat(X[3])))),W=X[4]!==void 0?Math.max(0,Math.min(1,parseFloat(X[4]))):1;if(![j,Y,Q,W].every(Number.isFinite))return null;return{...this.#fJ({r:j,g:Y,b:Q}),a:W}}return null}#RZ(J,Z=1){let $=+(parseInt(J.slice(1,3),16)/255).toFixed(4),X=+(parseInt(J.slice(3,5),16)/255).toFixed(4),j=+(parseInt(J.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${$} ${X} ${j} / ${Z})`}#FZ(J){let Z=J.r/255,$=J.g/255,X=J.b/255,j=Math.max(Z,$,X),Y=Math.min(Z,$,X),Q,W,K=(j+Y)/2;if(j===Y)Q=W=0;else{let z=j-Y;switch(W=K>0.5?z/(2-j-Y):z/(j+Y),j){case Z:Q=(($-X)/z+($<X?6:0))/6;break;case $:Q=((X-Z)/z+2)/6;break;case X:Q=((Z-$)/z+4)/6;break}}return{h:Q*360,s:W*100,l:K*100}}#yZ(J){let Z=J.h/360,$=J.s/100,X=J.l/100,j,Y,Q;if($===0)j=Y=Q=X;else{let W=(G,U,V)=>{if(V<0)V+=1;if(V>1)V-=1;if(V<0.16666666666666666)return G+(U-G)*6*V;if(V<0.5)return U;if(V<0.6666666666666666)return G+(U-G)*(0.6666666666666666-V)*6;return G},K=X<0.5?X*(1+$):X+$-X*$,z=2*X-K;j=W(z,K,Z+0.3333333333333333),Y=W(z,K,Z),Q=W(z,K,Z-0.3333333333333333)}return{r:Math.round(j*255),g:Math.round(Y*255),b:Math.round(Q*255)}}#eJ(J){let Z=(U)=>{return U=U/255,U<=0.04045?U/12.92:Math.pow((U+0.055)/1.055,2.4)},$=Z(J.r),X=Z(J.g),j=Z(J.b),Y=0.4122214708*$+0.5363325363*X+0.0514459929*j,Q=0.2119034982*$+0.6806995451*X+0.1073969566*j,W=0.0883024619*$+0.2817188376*X+0.6299787005*j,K=Math.cbrt(Y),z=Math.cbrt(Q),G=Math.cbrt(W);return{l:0.2104542553*K+0.793617785*z-0.0040720468*G,a:1.9779984951*K-2.428592205*z+0.4505937099*G,b:0.0259040371*K+0.7827717662*z-0.808675766*G}}#DZ(J){let Z=this.#eJ(J);return{l:Z.l,c:Math.sqrt(Z.a*Z.a+Z.b*Z.b),h:(Math.atan2(Z.b,Z.a)*180/Math.PI+360)%360}}#JZ(J){let Z=J.l+0.3963377774*J.a+0.2158037573*J.b,$=J.l-0.1055613458*J.a-0.0638541728*J.b,X=J.l-0.0894841775*J.a-1.291485548*J.b,j=Z*Z*Z,Y=$*$*$,Q=X*X*X,W=(K)=>{let z=K<=0.0031308?12.92*K:1.055*Math.pow(K,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,z))*255)};return{r:W(4.0767416621*j-3.3077115913*Y+0.2309699292*Q),g:W(-1.2684380046*j+2.6097574011*Y-0.3413193965*Q),b:W(-0.0041960863*j-0.7034186147*Y+1.707614701*Q)}}#PZ(J){let Z=J.h*Math.PI/180;return this.#JZ({l:J.l,a:J.c*Math.cos(Z),b:J.c*Math.sin(Z)})}#G(){if(this.#y())return;this.#_(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#i(){if(this.#y())return;this.#A=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#K,colorSpace:this.#B};switch(this.#K){case"solid":return{...J,color:this.#jJ(this.#j),alpha:this.#j.a,hsv:{...this.#j}};case"gradient":return{...J,gradient:S(this.#Q),css:this.#aJ()};case"image":return{...J,image:{...this.#U}};case"video":return{...J,video:this.#c()};case"webcam":return{...J,webcam:this.#zJ()};default:return{...J,...this.#w[this.#K]}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Z,$){if(Z===$)return;switch(J){case"value":if(this.#FJ(),this.#_(),this.#tJ(),this.#J?.open&&!this.#k)this.#hJ(),this.#A=JSON.stringify(this.value);break;case"disabled":if(this.#s(),this.#y()&&this.#J?.open)this.close();break;case"alpha":case"mode":{if(!this.#J)break;let X=this.#J.open;if(this.#MJ(),X&&this.isConnected)this.#QJ();break}case"webcam-mode":if(this.#K==="webcam")this.#_();break;case"default-video":if(this.#K==="video")this.#PJ({emit:!1}),this.#_();break;case"aria-label":if(this.#J)this.#J.setAttribute("aria-label",this.#VJ());case"aria-labelledby":case"aria-describedby":this.#s();break}}}P("fig-fill-picker",D);class _ extends HTMLElement{static#Z=new Set(["oklch","hsl"]);static#$=10;static#W=10;static#z=8;static#J=3;static#f=210;static#V={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#K=!1;#B=null;#j=null;#q={..._.#V};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#q}}}set value(J){if(J==null||J===""){this.removeAttribute("value");return}if(typeof J==="string"){this.setAttribute("value",J);return}this.setAttribute("value",JSON.stringify(J))}connectedCallback(){this.#Q(),this.#U(),this.#k(),this.#N()}attributeChangedCallback(J,Z,$){if(Z===$)return;if(J!=="value")return;if(this.#U(),this.#K)this.#N()}#Q(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#U(){let J=this.getAttribute("value");if(!J){this.#q={..._.#V,stops:_.#V.stops.map((Z)=>({...Z}))};return}try{let Z=JSON.parse(J),$=Z?.type==="gradient"&&Z.gradient?Z.gradient:Z?.gradient?Z.gradient:Z;if(!$||typeof $!=="object")return;this.#q=this.#X({..._.#V,...$})}catch{}}#X(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase(),X=String(Z.hueInterpolation??"shorter").toLowerCase(),j=Array.isArray(Z.stops)?Z.stops.map((Y)=>({color:String(Y?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Y?.position??0,opacity:Y?.opacity??100})):_.#V.stops.map((Y)=>({...Y}));if(j.length<2)return{..._.#V,stops:_.#V.stops.map((Y)=>({...Y}))};return{type:["linear","radial","angular"].includes(Z.type)?Z.type:"linear",angle:Number.isFinite(Number(Z.angle))?Number(Z.angle):135,interpolationSpace:$,hueInterpolation:X,stops:j}}#Y(){return _.#Z.has(this.#q.interpolationSpace||"srgb")}#F(J){let{r:Z,g:$,b:X}=u(J);if(this.#q.interpolationSpace==="hsl")return JJ(Z,$,X).h;let j=ZJ(Z,$,X);return($J(j.l,j.a,j.b).h%360+360)%360}#R(){let J=this.#M(),Z=this.#F(J[0]?.color||"#FF0000"),$=this.#F(J[J.length-1]?.color||"#4F9EFF"),X=_.#f-Z,Y=((_.#f-$-X)%360+360)%360,Q=Y===0?0:Y-360,W=this.#q.hueInterpolation||"shorter",K;if(W==="increasing")K=Q;else if(W==="decreasing")K=Y;else if(W==="longer")K=Y<180?Q:Y;else K=Y<=180?Y:Q;let z=Math.sign(K),G=Math.asin(_.#J/2/_.#z)*180/Math.PI,U=Math.min(G,Math.max(0,(Math.abs(K)-0.01)/2));return{startDeg:X+z*U,sweepDeg:K-z*U*2}}#H(J){let Z=J*Math.PI/180;return{x:_.#$+_.#z*Math.cos(Z),y:_.#W+_.#z*Math.sin(Z)}}#L(J,Z){let $=J+Z,X=this.#H(J),j=this.#H($),Y=Math.abs(Z)>180?1:0,Q=Z>=0?1:0;return`M ${X.x} ${X.y} A ${_.#z} ${_.#z} 0 ${Y} ${Q} ${j.x} ${j.y}`}#w(){let J=this.#H(180),Z=this.#H(0);return`M ${J.x} ${J.y} L ${Z.x} ${Z.y}`}#O(J){let Z=_.#J,$=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${J}" fill="none" stroke="white" stroke-width="${Z}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent($)}")`}#M(){return[...this.#q.stops].sort((J,Z)=>(J.position??0)-(Z.position??0))}#D(){let J=this.#q.interpolationSpace||"srgb";if(J==="srgb")return"";if(_.#Z.has(J))return` in ${J} ${this.#q.hueInterpolation||"shorter"} hue`;return` in ${J}`}#T(){let J=this.#M(),Z=this.#D();if(this.#Y()){let X=(_.#f+90)%360,j=this.#q.interpolationSpace,Y=(W)=>j==="oklch"?`oklch(65% 0.25 ${W})`:`hsl(${W} 100% 50%)`,Q=[0,300,240,180,120,60,0].map(Y).join(", ");return`conic-gradient(from ${X}deg in ${j} decreasing hue, ${Q})`}let $=J.map((X)=>`${X.color} ${X.position??0}%`).join(", ");return`linear-gradient(90deg${Z}, ${$})`}#k(){if(this.#K)return;let J=_.#J,Z=h("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},h("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":J})),$=q("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren(Z,$),this.#B=Z,this.#j=$,this.#K=!0}#N(){if(!this.#j)return;let J=this.#Y();if(this.#B)this.#B.style.display=J?"":"none";let Z=J?(()=>{let{startDeg:X,sweepDeg:j}=this.#R();return this.#L(X,j)})():this.#w(),$=this.#O(Z);this.#j.style.setProperty("-webkit-mask-image",$),this.#j.style.maskImage=$,this.#j.style.background=this.#T()}}P("fig-interpolation-swatch",_);class R extends HTMLElement{static observedAttributes=["axis","handle","items","indicator","disabled"];static#Z=6;static#$=['[draggable]:not([draggable="false"])','img:not([draggable="false"])','a[href]:not([draggable="false"])','input[type="range"]',"fig-handle","fig-slider","fig-input-number","fig-input-gradient","fig-easing-curve","fig-angle","fig-audio","fig-audio-waveform","fig-input-wheel","fig-joystick","fig-origin-grid","fig-chooser","fig-canvas-control"];static#W=new Set(["data-reorder-item","data-reorder-generated-role","data-reorder-handle","role","tabindex","aria-label","aria-roledescription"]);#z=null;#J=null;#f=!1;#V=new Map;#K=null;#B=null;#j=null;connectedCallback(){if(this.style.display="contents",!this.hasAttribute("role"))this.setAttribute("role","list");if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label","Reorderable list");this.#m(),this.#L(),this.#z=new MutationObserver(()=>this.#L()),this.#z.observe(this,{childList:!0}),this.#q()}disconnectedCallback(){this.#z?.disconnect(),this.#z=null,this.#J?.disconnect(),this.#J=null,this.#a(),this.#$J(),this.#p(),this.#j?.remove(),this.#j=null}attributeChangedCallback(J){if(this.isConnected){if(this.#Q)this.#$J();if(J==="indicator")this.#y();this.#q(),this.#L()}}refresh(){if(this.isConnected)this.#L()}#q(){if(!this.#Y){this.#J?.disconnect(),this.#J=null;return}if(this.#J)return;this.#J=new MutationObserver((J)=>{if(!J.some(($)=>$.target.parentElement===this&&!R.#W.has($.attributeName)&&!($.attributeName==="class"&&$.target===this.#K?.item))||this.#f)return;this.#f=!0,queueMicrotask(()=>{if(this.#f=!1,this.isConnected)this.#L()})}),this.#J.observe(this,{subtree:!0,attributes:!0})}get#Q(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#U(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#X(){return(this.getAttribute("handle")||"").trim()}get#Y(){return(this.getAttribute("items")||"").trim()}get#F(){return(this.getAttribute("indicator")||"default").trim().toLowerCase()}#R(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE&&!J.hasAttribute("data-reorder-live"))}#H(){let J=this.#R(),Z=this.#Y;if(!Z)return J;try{return J.filter(($)=>$.matches(Z))}catch{return[]}}#L(){let J=this.#R(),Z=this.#H(),$=new Set(Z);for(let[j,Y]of this.#V)if(!$.has(j))Y.target.removeEventListener("pointerdown",Y.onPointerDown,!0),Y.target.removeEventListener("keydown",Y.onKeyDown),this.#C(Y),this.#V.delete(j);this.#D(J),this.#w(J),this.#M(J.filter((j)=>!$.has(j)));let X=!this.#Q&&Z.length>=2;if(this.#O(Z,X),!X){this.#a();return}for(let j of Z){let Y=this.#k(j),Q=this.#V.get(j);if(Q&&Q.target===Y)continue;if(Q)Q.target.removeEventListener("pointerdown",Q.onPointerDown,!0),this.#V.delete(j);if(!Y)continue;this.#N(j,Y)}this.#T(Z)}#w(J){for(let Z of J)if(Z.removeAttribute("data-reorder-item"),Z.hasAttribute("data-reorder-generated-role"))Z.removeAttribute("role"),Z.removeAttribute("data-reorder-generated-role")}#O(J,Z=!0){for(let $ of J){if(Z)$.setAttribute("data-reorder-item","");if(!$.hasAttribute("role"))$.setAttribute("role","listitem"),$.setAttribute("data-reorder-generated-role","")}}#M(J){for(let Z of J)if(!Z.hasAttribute("role"))Z.setAttribute("role","none"),Z.setAttribute("data-reorder-generated-role","")}#D(J){for(let Z of J)Z.querySelectorAll("[data-reorder-handle]").forEach(($)=>{$.removeAttribute("data-reorder-handle"),$.removeAttribute("aria-roledescription")})}#T(J){if(!this.#X)return;for(let Z of J){let $=Z.querySelector(this.#X);if($)$.setAttribute("data-reorder-handle",""),$.setAttribute("aria-roledescription","reorder handle")}}#k(J){if(this.#X)return J.querySelector(this.#X);return J}#N(J,Z){let $=(K)=>{if(this.#Q||this.#H().length<2)return;if(K.button!==0)return;if(!this.#X&&this.#A(K.target,J))return;this.#t(K,J,Z)},X=Z.getAttribute("tabindex"),j=Z.getAttribute("aria-label"),Y=Z.getAttribute("role"),Q=J.getAttribute("aria-label")||J.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";if(Z.setAttribute("tabindex","0"),Z.setAttribute("aria-label",`Move ${Q}`),Z!==J&&!Z.hasAttribute("role"))Z.setAttribute("role","button");let W=(K)=>{if(this.#Q)return;let z=this.#U==="horizontal",G=z?"ArrowLeft":"ArrowUp",U=z?"ArrowRight":"ArrowDown";if(K.key!==G&&K.key!==U&&K.key!=="Home"&&K.key!=="End")return;K.preventDefault(),K.stopPropagation();let V=this.#H(),H=V.indexOf(J),L=H;if(K.key===G)L=Math.max(0,H-1);else if(K.key===U)L=Math.min(V.length-1,H+1);else if(K.key==="Home")L=0;else if(K.key==="End")L=V.length-1;if(L===H){this.#u(`${Q}, position ${H+1} of ${V.length}`);return}this.#c(J,L),this.#L(),this.#k(J)?.focus(),this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:H,newIndex:L,item:J}})),this.#u(`${Q}, position ${L+1} of ${V.length}`)};Z.addEventListener("pointerdown",$,!0),Z.addEventListener("keydown",W),this.#V.set(J,{target:Z,onPointerDown:$,onKeyDown:W,originalTabIndex:X,originalAriaLabel:j,originalRole:Y})}#C(J){let{target:Z,originalTabIndex:$,originalAriaLabel:X,originalRole:j}=J;if($===null)Z.removeAttribute("tabindex");else Z.setAttribute("tabindex",$);if(X===null)Z.removeAttribute("aria-label");else Z.setAttribute("aria-label",X);if(j===null)Z.removeAttribute("role");else Z.setAttribute("role",j)}#m(){if(this.#j?.isConnected)return;let J=document.createElement("span");J.setAttribute("data-reorder-live",""),J.setAttribute("role","status"),J.setAttribute("aria-live","polite"),J.setAttribute("aria-atomic","true"),Object.assign(J.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}),this.#j=J,document.body.appendChild(J)}#u(J){if(!this.#j)return;this.#j.textContent="",requestAnimationFrame(()=>{if(this.#j)this.#j.textContent=J})}#A(J,Z){let $=J;while($&&$!==Z){if($ instanceof Element){for(let X of R.#$)if($.matches(X))return!0}$=$.parentElement}return!1}static#I="fig-reorder-dragging";static#b(J){document.body.classList.toggle(R.#I,J)}#t(J,Z,$){this.#$J();let X={item:Z,target:$,pointerId:J.pointerId,oldIndex:this.#H().indexOf(Z),targetIndex:this.#H().indexOf(Z),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};X.onMove=(j)=>{if(j.pointerId!==X.pointerId)return;let Y=j.clientX-X.startX,Q=j.clientY-X.startY;if(!X.active){if(Y*Y+Q*Q<R.#Z*R.#Z)return;X.active=!0,J.preventDefault(),J.stopPropagation(),Z.classList.add("dragging"),R.#b(!0);try{$.setPointerCapture(X.pointerId)}catch{}}j.preventDefault();let W=this.#U==="horizontal"?j.clientX:j.clientY,K=this.#r(W);X.targetIndex=K,this.#JJ(K,Z)},X.onKeyDown=(j)=>{if(j.key!=="Escape"||!X.active)return;j.preventDefault(),this.#ZJ(X,!0)},X.onUp=(j)=>{if(j.pointerId!==X.pointerId)return;this.#ZJ(X,j.type==="pointercancel")},this.#K=X,window.addEventListener("pointermove",X.onMove),window.addEventListener("pointerup",X.onUp),window.addEventListener("pointercancel",X.onUp),window.addEventListener("keydown",X.onKeyDown)}#r(J){let Z=this.#H(),$=this.#U==="horizontal";for(let X=0;X<Z.length;X++){let j=Z[X].getBoundingClientRect(),Y=$?j.left+j.width/2:j.top+j.height/2;if(J<Y)return X}return Z.length}#e(J,Z){let $=this.#H(),X=$.indexOf(J);if(X===-1)return!1;let j=Math.max(0,Math.min(Z,$.length));if(Z===X)return!1;if(j>=$.length&&X===$.length-1)return!1;return!0}#x(J){if(!J.length)return null;let Z=1/0,$=-1/0,X=1/0,j=-1/0;for(let Y of J){let Q=Y.getBoundingClientRect();Z=Math.min(Z,Q.left),$=Math.max($,Q.right),X=Math.min(X,Q.top),j=Math.max(j,Q.bottom)}return{left:Z,top:X,width:$-Z,height:j-X}}#n(){let J=[":popover-open",":modal",":fullscreen"],Z=this.parentElement;while(Z){if(J.some((X)=>{try{return Z.matches(X)}catch{return!1}}))return Z;Z=Z.parentElement}return document.body}#v(){if(this.#B)return this.#B;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#U),J.classList.toggle("fig-reorder-indicator-ring",this.#F==="ring"),this.#n().appendChild(J),this.#B=J,J}#y(){this.#B?.classList.toggle("fig-reorder-indicator-ring",this.#F==="ring")}#JJ(J,Z){let $=this.#H();if(!this.#e(Z,J)){this.#p();return}let X=this.#x($);if(!X){this.#p();return}let j=this.#v();if(j.setAttribute("data-axis",this.#U),this.#U==="horizontal"){let Q;if(J<=0)Q=$[0].getBoundingClientRect().left;else if(J>=$.length)Q=$[$.length-1].getBoundingClientRect().right;else Q=$[J].getBoundingClientRect().left;j.style.left=`${Q-1}px`,j.style.top=`${X.top}px`,j.style.width="2px",j.style.height=`${X.height}px`;return}let Y;if(J<=0)Y=$[0].getBoundingClientRect().top;else if(J>=$.length)Y=$[$.length-1].getBoundingClientRect().bottom;else Y=$[J].getBoundingClientRect().top;j.style.left=`${X.left}px`,j.style.top=`${Y-1}px`,j.style.width=`${X.width}px`,j.style.height="2px"}#p(){this.#B?.remove(),this.#B=null}#zJ(J,Z){let $=this.#H(),X=Math.max(0,Math.min(Z,$.length));if(X>=$.length){let Y=$[$.length-1];if(Y&&Y!==J)Y.after(J);return}let j=$[X];if(j!==J)this.insertBefore(J,j)}#c(J,Z){let $=this.#H().filter((j)=>j!==J),X=$[Z]??null;if(X)this.insertBefore(J,X);else if($.length)$[$.length-1].after(J);else this.appendChild(J)}#ZJ(J,Z){let{item:$,oldIndex:X,active:j,onMove:Y,onUp:Q,onKeyDown:W}=J;if(window.removeEventListener("pointermove",Y),window.removeEventListener("pointerup",Q),window.removeEventListener("pointercancel",Q),window.removeEventListener("keydown",W),j){if(!Z){this.#zJ($,J.targetIndex);let K=this.#H().indexOf($);if(K!==-1&&K!==X){this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:X,newIndex:K,item:$}}));let z=$.getAttribute("aria-label")||$.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";this.#u(`${z}, position ${K+1} of ${this.#H().length}`)}}}if($.classList.remove("dragging"),R.#b(!1),this.#p(),this.#K===J)this.#K=null}#a(){for(let[,J]of this.#V)J.target.removeEventListener("pointerdown",J.onPointerDown,!0),J.target.removeEventListener("keydown",J.onKeyDown),this.#C(J);this.#V.clear()}#$J(){if(!this.#K)return;this.#ZJ(this.#K,!0)}}P("fig-reorder",R);