@rogieking/figui3 8.2.1 → 8.4.0

package/dist/fig-editor.js

@@ -1,7 +1,6 @@
-import"./fig.js";import"./fig-lab.js";function B(j,J){if(!customElements.get(j))customElements.define(j,J)}function R(j){return String(j??"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function G(j,J){return j.hasAttribute(J)&&j.getAttribute(J)!=="false"}function w(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function v(j,J={}){let K=document.createElement("fig-icon");if(j)K.setAttribute("name",j);if(J.size)K.setAttribute("size",J.size);if(J.className)K.className=J.className;return K}function u({owner:j,onStart:J,onEnd:K,startClass:Q="",endClass:U="",chevronClass:X="",startLabel:Z="Scroll back",endLabel:W="Scroll forward"}={}){let z=(O,L)=>{let Y=document.createElement("button");if(Y.type="button",Y.className=["fig-overflow",`fig-overflow-${O}`,O==="start"?Q:U].filter(Boolean).join(" "),Y.dataset.figOverflow=O,j)Y.setAttribute(`data-fig-${j}-nav`,O);return Y.setAttribute("tabindex","-1"),Y.setAttribute("aria-label",O==="start"?Z:W),Y.appendChild(v("chevron",{size:"small",className:["fig-overflow-chevron",X].filter(Boolean).join(" ")})),Y.addEventListener("click",($)=>{$.preventDefault(),$.stopPropagation(),L?.($)}),Y};return{start:z("start",J),end:z("end",K)}}function E(j,J,K="x",Q=2){if(!j||!J)return!1;let U=K==="x",X=U?J.scrollWidth:J.scrollHeight,Z=U?J.clientWidth:J.clientHeight,W=U?J.scrollLeft:J.scrollTop,z=X-Z>Q,O=!z||W<=Q,L=!z||W+Z>=X-Q;return j.classList.toggle("overflow-start",!O),j.classList.toggle("overflow-end",!L),z}function A(j,J="x",K=1){if(!j)return;let Q=J==="x",X=(Q?j.clientWidth:j.clientHeight)*0.8*K;j.scrollBy({[Q?"left":"top"]:X,behavior:"smooth"})}function g(j,J,K="y",Q="auto"){if(!j||!J||!j.contains(J))return;requestAnimationFrame(()=>{if(!j.isConnected||!J.isConnected)return;let U=K==="x",X=U?j.scrollWidth:j.scrollHeight,Z=U?j.clientWidth:j.clientHeight;if(X<=Z+1){E(j,j,K);return}let W=J.getBoundingClientRect(),z=j.getBoundingClientRect(),O=U?j.scrollLeft:j.scrollTop,L=(U?W.left-z.left:W.top-z.top)+O,Y=U?W.width:W.height,$=X-Z,f=Math.max(0,Math.min(L+Y/2-Z/2,$));j.scrollTo({[U?"left":"top"]:f,behavior:Q}),E(j,j,K)})}function b(j){let J=j||"";if(J.startsWith("["))try{let Q=JSON.parse(J);return Array.isArray(Q)?Q:[]}catch{}let K=J.includes(`
+import"./fig.js";import"./fig-lab.js";function A(j,J){if(!customElements.get(j))customElements.define(j,J)}function R(j,J){return j.hasAttribute(J)&&j.getAttribute(J)!=="false"}function m(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function F(j,J={}){let Q=document.createElement("fig-icon");if(j)Q.setAttribute("name",j);if(J.size)Q.setAttribute("size",J.size);if(J.className)Q.className=J.className;return Q}function v(j,J){let Q=(Z)=>{if(Z===null||Z===void 0||Z===!1)return;if(Array.isArray(Z)){Z.forEach(Q);return}j.append(Z instanceof Node?Z:String(Z))};return Q(J),j}function d(j,J={}){for(let[Q,Z]of Object.entries(J)){if(Z===null||Z===void 0||Z===!1)continue;if(Q==="className")j.className=String(Z);else if(Z===!0)j.setAttribute(Q,"");else j.setAttribute(Q,String(Z))}return j}function q(j,J,Q){let Z=document.createElement(j);return d(Z,J),v(Z,Q)}var c="http://www.w3.org/2000/svg";function u(j,J,Q){let Z=document.createElementNS(c,j);for(let[$,X]of Object.entries(J||{})){if(X===null||X===void 0||X===!1)continue;if($==="className")Z.setAttribute("class",String(X));else if(X===!0)Z.setAttribute($,"");else Z.setAttribute($,String(X))}return v(Z,Q)}function p(j){let J=String(j||"").replace(/^#/,"");return{r:parseInt(J.substring(0,2),16)||0,g:parseInt(J.substring(2,4),16)||0,b:parseInt(J.substring(4,6),16)||0}}function s(j,J,Q){let Z=j/255,$=J/255,X=Q/255,Y=Math.max(Z,$,X),W=Math.min(Z,$,X),U=(Y+W)/2;if(Y===W)return{h:0,s:0,l:U*100};let K=Y-W,O=U>0.5?K/(2-Y-W):K/(Y+W),z;switch(Y){case Z:z=(($-X)/K+($<X?6:0))/6;break;case $:z=((X-Z)/K+2)/6;break;default:z=((Z-$)/K+4)/6;break}return{h:z*360,s:O*100,l:U*100}}function S(j){let J=j/255;return J<=0.04045?J/12.92:Math.pow((J+0.055)/1.055,2.4)}function i(j,J,Q){let Z=S(j),$=S(J),X=S(Q),Y=Math.cbrt(0.4122214708*Z+0.5363325363*$+0.0514459929*X),W=Math.cbrt(0.2119034982*Z+0.6806995451*$+0.1073969566*X),U=Math.cbrt(0.0883024619*Z+0.2817188376*$+0.6299787005*X);return{l:0.2104542553*Y+0.793617785*W-0.0040720468*U,a:1.9779984951*Y-2.428592205*W+0.4505937099*U,b:0.0259040371*Y+0.7827717662*W-0.808675766*U}}function r(j,J,Q){return{l:j,c:Math.sqrt(J*J+Q*Q),h:Math.atan2(Q,J)*180/Math.PI}}function l({owner:j,onStart:J,onEnd:Q,startClass:Z="",endClass:$="",chevronClass:X="",startLabel:Y="Scroll back",endLabel:W="Scroll forward"}={}){let U=(K,O)=>{let z=document.createElement("button");if(z.type="button",z.className=["fig-overflow",`fig-overflow-${K}`,K==="start"?Z:$].filter(Boolean).join(" "),z.dataset.figOverflow=K,j)z.setAttribute(`data-fig-${j}-nav`,K);return z.setAttribute("tabindex","-1"),z.setAttribute("aria-label",K==="start"?Y:W),z.appendChild(F("chevron",{size:"small",className:["fig-overflow-chevron",X].filter(Boolean).join(" ")})),z.addEventListener("click",(f)=>{f.preventDefault(),f.stopPropagation(),O?.(f)}),z};return{start:U("start",J),end:U("end",Q)}}function x(j,J,Q="x",Z=2){if(!j||!J)return!1;let $=Q==="x",X=$?J.scrollWidth:J.scrollHeight,Y=$?J.clientWidth:J.clientHeight,W=$?J.scrollLeft:J.scrollTop,U=X-Y>Z,K=!U||W<=Z,O=!U||W+Y>=X-Z;return j.classList.toggle("overflow-start",!K),j.classList.toggle("overflow-end",!O),U}function w(j,J="x",Q=1){if(!j)return;let Z=J==="x",X=(Z?j.clientWidth:j.clientHeight)*0.8*Q;j.scrollBy({[Z?"left":"top"]:X,behavior:"smooth"})}function o(j,J,Q="y",Z="auto"){if(!j||!J||!j.contains(J))return;requestAnimationFrame(()=>{if(!j.isConnected||!J.isConnected)return;let $=Q==="x",X=$?j.scrollWidth:j.scrollHeight,Y=$?j.clientWidth:j.clientHeight;if(X<=Y+1){x(j,j,Q);return}let W=J.getBoundingClientRect(),U=j.getBoundingClientRect(),K=$?j.scrollLeft:j.scrollTop,O=($?W.left-U.left:W.top-U.top)+K,z=$?W.width:W.height,f=X-Y,L=Math.max(0,Math.min(O+z/2-Y/2,f));j.scrollTo({[$?"left":"top"]:L,behavior:Z}),x(j,j,Q)})}function n(j){let J=j||"";if(J.startsWith("["))try{let Z=JSON.parse(J);return Array.isArray(Z)?Z:[]}catch{}let Q=J.includes(`
 `)?`
-`:",";return J.split(K).map((Q)=>Q.trim()).filter(Boolean)}function h(j){if(j&&typeof j==="object")return String(j.value??j.label??"");return String(j??"")}function m(j){if(j&&typeof j==="object")return String(j.label??j.value??"");return String(j??"")}class y extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let j=this.getAttribute("value");if(j!==null)return j;return(this.textContent||"").trim()}set value(j){if(j===null||j===void 0)this.removeAttribute("value");else this.setAttribute("value",String(j))}get disabled(){return G(this,"disabled")}set disabled(j){if(j)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return G(this,"selected")}set selected(j){if(j)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.#J()}attributeChangedCallback(j,J,K){if(J===K)return;if(j==="disabled")this.#J()}#J(){if(this.disabled)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}B("fig-select-option",y);class P extends HTMLElement{#J=null;#K=null;#j=null;#R=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#V(),this.#Z(),this.#_(),this.addEventListener("scroll",this.#R,{passive:!0}),this.#j?.disconnect(),this.#j=new ResizeObserver(()=>this.syncOverflow()),this.#j.observe(this),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#R),this.#j?.disconnect(),this.#j=null,this.#Q()}syncOverflow(){return this.#Z(),E(this,this,"y")}scrollToOption(j,J="auto"){g(this,j,"y",J)}#V(){let j=this.querySelector(":scope > fig-chooser");if(!j)return;while(j.firstChild)this.insertBefore(j.firstChild,j);j.remove()}#Z(){let j=Array.from(this.children).find((J)=>!J.hasAttribute("data-fig-select-nav"));if(j?.tagName==="FIG-SEPARATOR")j.setAttribute("borderless","")}#_(){if(this.#J&&this.#K&&this.contains(this.#J)&&this.contains(this.#K))return;this.#Q();let j=u({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>A(this,"y",-1),onEnd:()=>A(this,"y",1)});this.#J=j.start,this.#K=j.end,this.prepend(this.#J),this.append(this.#K)}#Q(){this.#J?.remove(),this.#K?.remove(),this.#J=null,this.#K=null,this.classList.remove("overflow-start","overflow-end")}}B("fig-select-options",P);class I extends HTMLElement{#J=null;#K=null;#j=null;#R=null;#V=null;#Z=null;#_=!1;#Q=-1;#F=!1;#U=!1;#X=null;#$=!1;#W=null;#k=null;#g=!1;#z=this.#Hj.bind(this);#L=this.#I.bind(this);#q=this.#N.bind(this);#O=this.#jj.bind(this);#C=this.#Jj.bind(this);#T=this.#Yj.bind(this);static get observedAttributes(){return["value","disabled","label","options","position","offset","closedby","open"]}get value(){return this.getAttribute("value")??""}set value(j){if(j===null||j===void 0)this.removeAttribute("value");else this.setAttribute("value",String(j))}get open(){return G(this,"open")}set open(j){if(j)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(!this.#_)this.#l();if(this.#A(),this.#b(),this.#$j(),this.#s(),this.#P(),this.#kj(),this.#f(),this.open)this.#w()}disconnectedCallback(){this.#Gj(),document.removeEventListener("keydown",this.#O,!0),this.#Z?.disconnect(),this.#Z=null}attributeChangedCallback(j,J,K){if(J===K||!this.#_)return;if(j==="options"){this.#b(),this.#P();return}if(j==="value"||j==="label"){this.#P();return}if(j==="disabled"){this.#$j();return}if(j==="open"){if(K===null||K==="false")this.#Tj();else this.#w();return}if(j==="position"||j==="offset"||j==="closedby")this.#s()}focus(j){this.#J?.focus(j)}blur(){this.#J?.blur()}#M(j){return j?.nodeType===1&&(j.tagName==="FIG-SELECT-OPTION"||j.tagName==="FIG-SEPARATOR"||j.tagName==="FIG-SELECT-OPTIONS")}#A(){for(let j of this.querySelectorAll(":scope > fig-select-options"))if(!j.hasAttribute("slot"))j.setAttribute("slot","panel")}#H(){let J=(this.#V?.assignedElements({flatten:!0})??[]).find((K)=>K.tagName==="FIG-SELECT-OPTIONS");if(J)return J;return this.querySelector(":scope > fig-select-options")}#S(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#e(){let j=this.#H();if(j){if(!j.hasAttribute("slot"))j.setAttribute("slot","panel");return j}return j=document.createElement("fig-select-options"),j.setAttribute("slot","panel"),j.setAttribute("data-fig-generated",""),this.appendChild(j),j}#b(){if(this.#S())return;let j=this.hasAttribute("options"),J=j?this.#e():this.#H();if(!J)return;this.#g=!0;try{for(let U of J.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))U.remove();if(!j)return;let K=b(this.getAttribute("options")),Q=J.querySelector(":scope > .fig-overflow-end");for(let U of K){let X=document.createElement("fig-select-option");if(X.setAttribute("data-fig-generated",""),X.setAttribute("value",h(U)),X.textContent=m(U),Q)J.insertBefore(X,Q);else J.appendChild(X)}}finally{this.#g=!1}}#l(){this.#_=!0;let j=this.attachShadow({mode:"open"});j.innerHTML=`
-      <style>
+`:",";return J.split(Q).map((Z)=>Z.trim()).filter(Boolean)}function a(j){if(j&&typeof j==="object")return String(j.value??j.label??"");return String(j??"")}function t(j){if(j&&typeof j==="object")return String(j.label??j.value??"");return String(j??"")}class b extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let j=this.getAttribute("value");if(j!==null)return j;return(this.textContent||"").trim()}set value(j){if(j===null||j===void 0)this.removeAttribute("value");else this.setAttribute("value",String(j))}get disabled(){return R(this,"disabled")}set disabled(j){if(j)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return R(this,"selected")}set selected(j){if(j)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.#Z()}attributeChangedCallback(j,J,Q){if(J===Q)return;if(j==="disabled")this.#Z()}#Z(){if(this.disabled)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}A("fig-select-option",b);class g extends HTMLElement{#Z=null;#$=null;#X=null;#Y=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#j(),this.#_(),this.#k(),this.addEventListener("scroll",this.#Y,{passive:!0}),this.#X?.disconnect(),this.#X=new ResizeObserver(()=>this.syncOverflow()),this.#X.observe(this),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#Y),this.#X?.disconnect(),this.#X=null,this.#K()}syncOverflow(){return this.#_(),x(this,this,"y")}scrollToOption(j,J="auto"){o(this,j,"y",J)}#j(){let j=this.querySelector(":scope > fig-chooser");if(!j)return;while(j.firstChild)this.insertBefore(j.firstChild,j);j.remove()}#_(){let j=Array.from(this.children).find((J)=>!J.hasAttribute("data-fig-select-nav"));if(j?.tagName==="FIG-SEPARATOR")j.setAttribute("borderless","")}#k(){if(this.#Z&&this.#$&&this.contains(this.#Z)&&this.contains(this.#$))return;this.#K();let j=l({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>w(this,"y",-1),onEnd:()=>w(this,"y",1)});this.#Z=j.start,this.#$=j.end,this.prepend(this.#Z),this.append(this.#$)}#K(){this.#Z?.remove(),this.#$?.remove(),this.#Z=null,this.#$=null,this.classList.remove("overflow-start","overflow-end")}}A("fig-select-options",g);class h extends HTMLElement{#Z=null;#$=null;#X=null;#Y=null;#j=null;#_=null;#k=!1;#K=-1;#T=!1;#Q=!1;#f=null;#J=!1;#W=null;#O=null;#q=!1;#V=this.#kj.bind(this);#I=this.#Vj.bind(this);#L=this.#Nj.bind(this);#G=this.#b.bind(this);#M=this.#D.bind(this);#H=this.#Gj.bind(this);static get observedAttributes(){return["value","disabled","label","options","position","offset","closedby","open"]}get value(){return this.getAttribute("value")??""}set value(j){if(j===null||j===void 0)this.removeAttribute("value");else this.setAttribute("value",String(j))}get open(){return R(this,"open")}set open(j){if(j)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(!this.#k)this.#Jj();if(this.#B(),this.#C(),this.#Qj(),this.#zj(),this.#F(),this.#r(),this.#Lj(),this.open)this.#fj()}disconnectedCallback(){this.#E(),document.removeEventListener("keydown",this.#G,!0),this.#_?.disconnect(),this.#_=null}attributeChangedCallback(j,J,Q){if(J===Q||!this.#k)return;if(j==="options"){this.#C(),this.#F();return}if(j==="value"||j==="label"){this.#F();return}if(j==="disabled"){this.#Qj();return}if(j==="open"){if(Q===null||Q==="false")this.#Hj();else this.#fj();return}if(j==="position"||j==="offset"||j==="closedby")this.#zj()}focus(j){this.#Z?.focus(j)}blur(){this.#Z?.blur()}#N(j){return j?.nodeType===1&&(j.tagName==="FIG-SELECT-OPTION"||j.tagName==="FIG-SEPARATOR"||j.tagName==="FIG-SELECT-OPTIONS")}#B(){for(let j of this.querySelectorAll(":scope > fig-select-options"))if(!j.hasAttribute("slot"))j.setAttribute("slot","panel")}#R(){let J=(this.#j?.assignedElements({flatten:!0})??[]).find((Q)=>Q.tagName==="FIG-SELECT-OPTIONS");if(J)return J;return this.querySelector(":scope > fig-select-options")}#x(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#u(){let j=this.#R();if(j){if(!j.hasAttribute("slot"))j.setAttribute("slot","panel");return j}return j=document.createElement("fig-select-options"),j.setAttribute("slot","panel"),j.setAttribute("data-fig-generated",""),this.appendChild(j),j}#C(){if(this.#x())return;let j=this.hasAttribute("options"),J=j?this.#u():this.#R();if(!J)return;this.#q=!0;try{for(let $ of J.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))$.remove();if(!j)return;let Q=n(this.getAttribute("options")),Z=J.querySelector(":scope > .fig-overflow-end");for(let $ of Q){let X=document.createElement("fig-select-option");if(X.setAttribute("data-fig-generated",""),X.setAttribute("value",a($)),X.textContent=t($),Z)J.insertBefore(X,Z);else J.appendChild(X)}}finally{this.#q=!1}}#Jj(){this.#k=!0;let j=this.attachShadow({mode:"open"}),J=document.createElement("style");J.textContent=`
         :host {
           display: inline-flex;
           position: relative;
@@ -88,193 +87,4 @@ import"./fig.js";import"./fig-lab.js";function B(j,J){if(!customElements.get(j))
           min-height: 0;
           max-height: inherit;
         }
-      </style>
-    `;let J=document.createElement("fig-button");J.className="fig-select-trigger",J.setAttribute("part","trigger"),J.setAttribute("variant","ghost"),J.setAttribute("aria-haspopup","listbox"),J.setAttribute("aria-expanded","false");let K=document.createElement("span");K.className="fig-select-prepend",K.setAttribute("part","prepend"),K.setAttribute("aria-hidden","true");let Q=document.createElement("span");Q.className="fig-select-label",Q.setAttribute("part","label"),J.append(K,Q);let U=document.createElement("dialog",{is:"fig-popup"});if(U.setAttribute("is","fig-popup"),U.setAttribute("part","listbox"),U.setAttribute("theme","menu"),U.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)U.setAttribute("popover","manual");U.id=w(),J.setAttribute("aria-controls",U.id);let X=document.createElement("slot");if(X.setAttribute("name","panel"),U.appendChild(X),j.append(J,U),this.#J=J,this.#j=K,this.#R=Q,this.#K=U,this.#V=X,U.anchor=J,this.#A(),this.#d(),!this.hasAttribute("value")){let Z=this.#y().find((W)=>G(W,"selected"));if(Z)this.setAttribute("value",Z.value)}}#d(){if(!this.#K||this.#U)return;if(typeof this.#K.positionPopup!=="function")return;this.#X=this.#K.positionPopup.bind(this.#K),this.#K.positionPopup=()=>{if(!this.open){this.#X?.();return}this.#B()},this.#U=!0}#c(j){if(!j)return null;let J=document.createRange();J.selectNodeContents(j);let K=[...J.getClientRects()].filter((Q)=>Q.width>0&&Q.height>0);if(K.length)return K[0];return j.getBoundingClientRect()}#r(){if(typeof this.#K?.parseViewportMargins==="function")return this.#K.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#E(){let j=this.#R?.getBoundingClientRect();if(!j)return null;return{x:j.x,y:j.y,width:j.width,height:j.height}}#D(){let j=window.visualViewport;return{width:j?.width??window.innerWidth,height:j?.height??window.innerHeight,offsetLeft:j?.offsetLeft??0,offsetTop:j?.offsetTop??0}}#zj(j,J,K=0.25){if(!j&&!J)return!1;if(!j||!J)return!0;return Math.abs(j.x-J.x)>K||Math.abs(j.y-J.y)>K||Math.abs(j.width-J.width)>K||Math.abs(j.height-J.height)>K}#Lj(j,J,K=0.25){if(!j&&!J)return!1;if(!j||!J)return!0;return Math.abs(j.width-J.width)>K||Math.abs(j.height-J.height)>K||Math.abs(j.offsetLeft-J.offsetLeft)>K||Math.abs(j.offsetTop-J.offsetTop)>K}#fj(){if(!this.#$)return!1;let j=this.#zj(this.#W,this.#E()),J=this.#Lj(this.#k,this.#D());return!j&&!J}#p(){this.#W=this.#E(),this.#k=this.#D()}#B(){if(this.#fj())return;let j=this.#K,J=this.#R;if(!j||!J){this.#X?.();return}let K=this.#y(),Q=K.find((k)=>this.#G(k)===this.value)||K[0];if(!Q){this.#X?.();return}this.#X?.();let U=j.getBoundingClientRect(),X=J.getBoundingClientRect(),Z=this.#c(Q);if(!U.width||!U.height||!X.width||!Z)return;let W=Z.left-U.left,z=Z.top-U.top,L=G(this,"full")?this.getBoundingClientRect().left:X.left-W,Y=X.top-z,$=this.#r();if(typeof j.clampToViewport==="function")({left:L,top:Y}=j.clampToViewport({left:L,top:Y},U,$));else{let{left:k,top:V}=$,N=window.innerWidth-U.width-$.right,_=window.innerHeight-U.height-$.bottom;L=Math.min(Math.max(L,k),Math.max(k,N)),Y=Math.min(Math.max(Y,V),Math.max(V,_))}j.style.setProperty("right","auto","important"),j.style.setProperty("bottom","auto","important"),j.style.setProperty("left",`${Math.round(L)}px`,"important"),j.style.setProperty("top",`${Math.round(Y)}px`,"important");let f=this.#H(),D=this.#c(Q);if(D&&f&&f.scrollHeight>f.clientHeight+1){let k=D.top-X.top;if(Math.abs(k)>0.5)f.scrollTop+=k;f.syncOverflow?.()}if(this.#$||this.open)this.#p()}#kj(){this.#J?.addEventListener("click",this.#z),this.#J?.addEventListener("keydown",this.#O),this.addEventListener("click",this.#L),this.addEventListener("pointerover",this.#q),this.#K?.addEventListener("keydown",this.#O),this.#K?.addEventListener("close",this.#C),this.#V?.addEventListener("slotchange",this.#T)}#Gj(){this.#J?.removeEventListener("click",this.#z),this.#J?.removeEventListener("keydown",this.#O),this.removeEventListener("click",this.#L),this.removeEventListener("pointerover",this.#q),this.#K?.removeEventListener("keydown",this.#O),this.#K?.removeEventListener("close",this.#C),this.#V?.removeEventListener("slotchange",this.#T)}#Yj(){this.#A(),this.#P()}#f(){if(this.#Z)return;this.#Z=new MutationObserver((j)=>{if(this.#F||this.#g)return;let J=!1;for(let K of j){if(K.type==="childList"){if([...K.addedNodes].some((Q)=>this.#M(Q))||[...K.removedNodes].some((Q)=>this.#M(Q))||K.target?.closest?.("fig-select-option"))J=!0}if(K.type==="attributes"&&K.target?.tagName==="FIG-SELECT-OPTION"){if(K.attributeName==="value"||K.attributeName==="disabled"||K.attributeName==="label")J=!0;else if(K.attributeName==="selected"){if(G(K.target,"selected")){let Q=this.#G(K.target);if((this.getAttribute("value")??"")!==Q)this.setAttribute("value",Q),J=!0}else if(this.#G(K.target)===(this.getAttribute("value")??""))J=!0}}if(K.type==="characterData"&&K.target?.parentElement?.tagName==="FIG-SELECT-OPTION")J=!0}if(J)this.#P()}),this.#Z.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#y({enabledOnly:j=!1}={}){let J=this.#H(),K=J?Array.from(J.querySelectorAll(":scope > fig-select-option")):[];if(!j)return K;return K.filter((Q)=>!G(Q,"disabled"))}#G(j){if(!j)return"";if(typeof j.value==="string")return j.value;let J=j.getAttribute?.("value");if(J!=null)return J;return(j.textContent||"").trim()}#Rj(j){if(!j)return"";let J=j.getAttribute?.("label");if(J!=null&&J!=="")return J.trim();let K=[];for(let Q of j.childNodes){if(Q.nodeType===Node.TEXT_NODE){let Z=Q.textContent?.trim();if(Z)K.push(Z);continue}if(!(Q instanceof Element))continue;let U=Q.getAttribute("slot");if(U==="prepend"||U==="append")continue;let X=Q.textContent?.trim();if(X)K.push(X)}if(K.length)return K.join(" ").trim();return(j.textContent||"").trim()}#Zj(j){if(!this.#j)return;let J=j?.querySelector?.(':scope > [slot="prepend"]');this.#j.replaceChildren(...Array.from(J?.childNodes??[],(K)=>K.cloneNode(!0)))}#s(){if(!this.#K)return;this.#K.setAttribute("position",this.getAttribute("position")||"bottom left");let j=this.getAttribute("offset");if(j)this.#K.setAttribute("offset",j);else this.#K.removeAttribute("offset");let J=this.getAttribute("closedby");if(J)this.#K.setAttribute("closedby",J);else this.#K.removeAttribute("closedby")}#$j(){let j=G(this,"disabled");if(this.#J)if(j)this.#J.setAttribute("disabled","");else this.#J.removeAttribute("disabled");if(j&&this.open)this.open=!1}#o(j){if(!j.length)return null;let J=j.find((K)=>G(K,"selected"));if(J&&!G(J,"disabled"))return J;return j.find((K)=>!G(K,"disabled"))||j[0]||null}#Wj(j){this.dispatchEvent(new CustomEvent("input",{detail:j,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:j,bubbles:!0,composed:!0}))}#P(){if(this.#F)return;this.#F=!0;try{let j=this.#y(),J=this.hasAttribute("value"),K=J?this.getAttribute("value"):null,Q=J?j.find((W)=>this.#G(W)===K):null,U=!1;if(!Q){if(J){if(!j.length){if(this.#R)this.#R.textContent=K||this.getAttribute("label")||"";return}if(Q=this.#o(j),Q){let W=this.#G(Q);if(K!==W)this.setAttribute("value",W),U=!0}else this.removeAttribute("value"),U=!0}else if(Q=j.find((W)=>G(W,"selected")),Q)this.setAttribute("value",this.#G(Q)),U=!0}for(let W of j){let z=W===Q;if(W.setAttribute("aria-selected",z?"true":"false"),z)W.setAttribute("selected","");else W.removeAttribute("selected")}let X=Q&&this.#Rj(Q)||this.getAttribute("label")||"";if(this.#R)this.#R.textContent=X;this.#Zj(Q);let Z=this.getAttribute("label")||"Select";if(this.#J?.setAttribute("aria-label",Z),this.#H()?.syncOverflow?.(),U)this.#Wj(this.getAttribute("value")??"")}finally{this.#F=!1}}#Hj(j){if(G(this,"disabled"))return;j.preventDefault(),j.stopPropagation();let J=!this.open;if(J&&this.#K&&this.#J)this.#K.anchor=this.#J;this.open=J}#I(j){let K=(typeof j.composedPath==="function"?j.composedPath():[]).find((Q)=>Q?.tagName==="FIG-SELECT-OPTION");if(!K||!this.contains(K))return;if(G(K,"disabled"))return;this.#Kj(K)}#N(j){let K=(typeof j.composedPath==="function"?j.composedPath():[]).find((Q)=>Q?.tagName==="FIG-SELECT-OPTION");if(!K||!this.contains(K))return;if(G(K,"disabled"))return;if(j.relatedTarget instanceof Node&&K.contains(j.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#G(K),bubbles:!0,composed:!0}))}#jj(j){if(j.currentTarget===document&&j.key!=="Escape")return;if(!(this.open&&(this.#K?.matches?.(":open")??!1))){if(this.#J?.contains(j.target)&&(j.key==="ArrowDown"||j.key==="Enter"||j.key===" ")){if(j.preventDefault(),this.#K&&this.#J)this.#K.anchor=this.#J;this.open=!0,requestAnimationFrame(()=>{let U=this.#y({enabledOnly:!0}).findIndex((X)=>this.#G(X)===this.value);this.#x(U>=0?U:0)})}return}let K=this.#y({enabledOnly:!0});if(!K.length)return;switch(j.key){case"ArrowDown":j.preventDefault(),this.#Qj(),this.#x(this.#Q+1);break;case"ArrowUp":j.preventDefault(),this.#Qj(),this.#x(this.#Q-1);break;case"Home":j.preventDefault(),this.#x(0);break;case"End":j.preventDefault(),this.#x(K.length-1);break;case"Escape":j.preventDefault(),this.open=!1,this.#J?.focus();break;case"Enter":case" ":{this.#Qj();let Q=K[this.#Q];if(!Q)return;j.preventDefault(),this.#Kj(Q);break}}}#Jj(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#J?.setAttribute("aria-expanded","false"),this.#J?.focus(),this.#Q=-1}#Kj(j){let J=this.#G(j);this.setAttribute("value",J),this.#P(),this.#Wj(J),this.open=!1}#n(){return this.#y({enabledOnly:!0})}#Qj(){let j=this.#n();if(!j.length){this.#Q=-1;return}let J=j.find((Q)=>Q===document.activeElement),K=J?j.indexOf(J):-1;this.#Q=K>=0?K:this.#Q}#x(j){let J=this.#n();if(!J.length)return;let K=(j%J.length+J.length)%J.length;this.#Q=K,J[K]?.focus()}#Oj(){if(!this.#K||!this.#J)return;let j=Math.ceil(this.getBoundingClientRect().width),J=Math.ceil(this.#J.getBoundingClientRect().width),K=Math.max(j,J,96);this.#K.style.setProperty("width","max-content","important"),this.#K.style.setProperty("min-width",`${K}px`,"important"),this.#K.style.setProperty("max-width","min(20rem, calc(100vw - 1rem))","important")}#w(){if(!this.#K||G(this,"disabled"))return;if(this.#J)this.#K.anchor=this.#J;this.#d(),this.#$=!1,this.#W=null,this.#k=null,this.#P(),this.#Oj(),this.#K.open=!0,document.addEventListener("keydown",this.#O,!0),this.#J?.setAttribute("aria-expanded","true"),this.#Q=-1,requestAnimationFrame(()=>{this.#Oj(),this.#B();let j=this.#H(),K=this.#n().findIndex((Q)=>this.#G(Q)===this.value);if(K>=0)this.#x(K);else if(this.#J?.hasAttribute("data-focus-visible")||this.#J?.matches?.(":focus-visible"))this.#x(0);j?.syncOverflow?.(),this.#$=!0,this.#p()})}#Tj(){if(!this.#K)return;this.#$=!1,this.#W=null,this.#k=null,document.removeEventListener("keydown",this.#O,!0),this.#K.open=!1,this.#J?.setAttribute("aria-expanded","false")}}B("fig-select",I);var d=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],c=["shorter","longer","increasing","decreasing"],F=new Set(["oklch","hsl"]);function T(j){let J={...j??{}},K=String(J.interpolationSpace??"srgb").toLowerCase();if(!d.includes(K))K="srgb";J.interpolationSpace=K;let Q=String(J.hueInterpolation??"shorter").toLowerCase();return J.hueInterpolation=c.includes(Q)?Q:"shorter",J}function q(j){let J=T(j),K={...J,interpolationSpace:J.interpolationSpace};if(F.has(J.interpolationSpace))K.hueInterpolation=J.hueInterpolation;else delete K.hueInterpolation;return K}function p(j){let J=T(j);if(J.interpolationSpace==="srgb")return"";if(F.has(J.interpolationSpace))return`in ${J.interpolationSpace} ${J.hueInterpolation} hue`;return`in ${J.interpolationSpace}`}function S(j){let J=T(j);if(F.has(J.interpolationSpace))return`${J.interpolationSpace}-${J.hueInterpolation||"shorter"}`;return J.interpolationSpace}function M(j){let J=String(j??"");for(let K of F){let Q=`${K}-`;if(J.startsWith(Q))return{interpolationSpace:K,hueInterpolation:J.slice(Q.length)||"shorter"}}return{interpolationSpace:J||"srgb",hueInterpolation:"shorter"}}var s=0;class H extends HTMLElement{#J=null;#K=null;#j=null;#R=`fig-fill-picker-dialog-${++s}`;#V="solid";anchorElement=null;#Z="solid";#_="srgb";#Q={h:0,s:0,v:85,a:1};#F="hex";#U={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#X={url:null,scaleMode:"fill",scale:50};#$={url:null,scaleMode:"fill",scale:50};#W={stream:null,snapshot:null};#k={};#g={};#z=null;#L=null;#q=null;#O=null;#C=!1;#T=!1;#M=null;#A=null;#H=null;#S=null;#e=null;#b=0;#l=null;#d=null;#c=new Set;#r=new Set;constructor(){super();this.#l=this.#kj.bind(this),this.#d=this.#Gj.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#D(()=>{this.#fj(),this.#Yj(),this.#f()})}disconnectedCallback(){if(this.#Zj(),this.#zj(),this.#Lj(),this.#K)this.#K.removeAttribute("selected");if(this.#J)this.#J.removeEventListener("click",this.#l),this.#J.removeEventListener("keydown",this.#d);this.#J=null,this.#K=null}#E(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#D(j){let J=requestAnimationFrame(()=>{if(this.#c.delete(J),this.isConnected)j()});return this.#c.add(J),J}#zj(){this.#c.forEach((j)=>cancelAnimationFrame(j)),this.#c.clear()}#Lj(){if(this.#r.forEach((j)=>URL.revokeObjectURL(j)),this.#r.clear(),this.#W.snapshot?.startsWith("blob:")){if(this.#X.url===this.#W.snapshot)this.#X.url=null;this.#W.snapshot=null}}#fj(){let j=Array.from(this.children).find((J)=>!J.getAttribute("slot")?.startsWith("mode-"));if(!j)this.#K=document.createElement("fig-swatch"),this.#K.setAttribute("background","#D9D9D9"),this.appendChild(this.#K),this.#J=this.#K;else if(j.matches("fig-swatch, fig-chit"))this.#K=j,this.#J=j;else this.#J=j,this.#K=null;if(this.#B(),this.#J.removeEventListener("click",this.#l),this.#J.addEventListener("click",this.#l),this.#J.removeEventListener("keydown",this.#d),this.#J.addEventListener("keydown",this.#d),this.#K)this.#D(()=>{let J=this.#K.querySelector('input[type="color"]');if(J)J.remove();this.#B()})}#p(){return this.getAttribute("aria-label")||"Fill picker"}#B(){if(!this.#J)return;let j=this.#E(),J=this.getAttribute("aria-labelledby");if(!this.#J.hasAttribute("role"))this.#J.setAttribute("role","button");if(this.#J.setAttribute("tabindex",j?"-1":"0"),this.#J.setAttribute("aria-disabled",j?"true":"false"),this.#J.setAttribute("aria-haspopup","dialog"),this.#J.setAttribute("aria-expanded",this.#j?.open?"true":"false"),this.#J.setAttribute("aria-controls",this.#R),this.#J.removeAttribute("aria-hidden"),J)this.#J.setAttribute("aria-labelledby",J),this.#J.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#J.setAttribute("aria-label",`Open ${this.#p()}`),this.#J.removeAttribute("aria-labelledby");else if(this.#J.removeAttribute("aria-labelledby"),!this.#J.hasAttribute("aria-label"))this.#J.setAttribute("aria-label",`Open ${this.#p()}`);let K=this.getAttribute("aria-describedby");if(K)this.#J.setAttribute("aria-describedby",K);else this.#J.removeAttribute("aria-describedby")}#kj(j){if(this.#E())return;j.stopPropagation(),j.preventDefault(),this.#G()}#Gj(j){if(j.key!=="Enter"&&j.key!==" ")return;if(this.#E())return;j.preventDefault(),j.stopPropagation(),this.#G()}#Yj(){let j=this.getAttribute("value");if(!j)return;let J=["solid","gradient","image","video","webcam"];try{let K=JSON.parse(j);if(K.type)this.#Z=K.type;if(K.color){if(typeof K.color==="string")this.#Q=this.#t(K.color);else if(typeof K.color==="object"&&K.color.h!==void 0)this.#Q=K.color}let Q=K.alpha!==void 0?Number(K.alpha):K.opacity!==void 0?Number(K.opacity)/100:void 0;if(Number.isFinite(Q))this.#Q.a=Math.max(0,Math.min(1,Q));if(this.#_="srgb",K.gradient)this.#U=T({...this.#U,...K.gradient});if(K.image)this.#X={...this.#X,...K.image};if(K.video)this.#$={...this.#$,...K.video};if(K.type&&!J.includes(K.type)){let{type:U,...X}=K;this.#g[K.type]=X}}catch(K){if(j.startsWith("#"))this.#Z="solid",this.#Q=this.#t(j)}}#f(){if(!this.#K)return;let j,J="cover",K="center";switch(this.#Z){case"solid":j=this.#m(this.#Q);break;case"gradient":j=this.#Mj();break;case"image":if(this.#X.url){j=`url(${this.#X.url})`;let U=this.#y(this.#X.scaleMode,this.#X.scale);J=U.size,K=U.position}else j="";break;case"video":if(this.#$.url){j=`url(${this.#$.url})`;let U=this.#y(this.#$.scaleMode,this.#$.scale);J=U.size,K=U.position}else j="";break;default:j=this.#k[this.#Z]?.element?.getAttribute("swatch-background")||"#D9D9D9"}if(this.#K.setAttribute("background",j),this.#K.style.setProperty("--swatch-bg-size",J),this.#K.style.setProperty("--swatch-bg-position",K),this.#Z==="solid")this.#K.setAttribute("alpha",this.#Q.a);else this.#K.removeAttribute("alpha")}#y(j,J){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:`${J}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#G(){if(this.#E())return;if(!this.#j)this.#$j();if(this.#H=JSON.stringify(this.value),this.#S=this.#H,this.#o(this.#Z,{emit:!1}),this.#K)this.#K.setAttribute("selected","true");this.#j.open=!0,this.#B(),this.#D(()=>{this.#j?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#D(()=>{this.#I(),this.#N()})})}open(){this.#G()}close(){if(this.#j)this.#j.open=!1,this.#B()}#Rj(){if(!this.#j)return;for(let[j,{element:J}]of Object.entries(this.#k)){let K=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((Q)=>Q.dataset.tab===j);if(!K)continue;while(K.firstChild)J.appendChild(K.firstChild)}}#Zj(){if(this.#M)this.#M(),this.#M=null;if(this.#A?.disconnect(),this.#A=null,this.#s(),!this.#j)return;this.#Rj(),this.#j.remove(),this.#j=null,this.#e=null,this.#H=null,this.#S=null,this.#z=null,this.#L=null,this.#q=null,this.#O=null,this.#T=!1,this.#B()}#s(){if(this.#b+=1,this.#W.stream)this.#W.stream.getTracks().forEach((J)=>J.stop()),this.#W.stream=null;let j=this.#j?.querySelector(".fig-fill-picker-webcam-video");if(j)j.srcObject=null}#$j(){this.#k={},this.querySelectorAll('[slot^="mode-"]').forEach((Y)=>{let $=Y.getAttribute("slot").slice(5);this.#k[$]={element:Y,label:Y.getAttribute("label")||$.charAt(0).toUpperCase()+$.slice(1)}}),this.#j=document.createElement("dialog",{is:"fig-popup"}),this.#j.setAttribute("is","fig-popup"),this.#j.id=this.#R,this.#j.setAttribute("aria-label",this.#p()),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.#J;let j=this.getAttribute("dialog-position")||"left";this.#j.setAttribute("position",j),this.#j.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let J=["solid","gradient","image","video","webcam"],K={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},Q=this.getAttribute("mode"),U;if(Q){if(U=Q.split(",").map(($)=>$.trim().toLowerCase()).filter(($)=>J.includes($)||this.#k[$]),U.length===0)U=[...J]}else U=[...J];let X={...K};for(let[Y,{label:$}]of Object.entries(this.#k))X[Y]=$;if(!U.includes(this.#Z))this.#Z=U[0],this.#V=U[0];let Z;if(U.length===1)Z=`<h3 class="fig-fill-picker-type-label">${R(X[U[0]])}</h3>`;else{let Y=U.map(($)=>`<fig-select-option value="${R($)}">${R(X[$])}</fig-select-option>`).join(`
-            `);Z=`<fig-select class="fig-fill-picker-type" label="Fill type" value="${R(this.#Z)}">
-          <fig-select-options>
-            ${Y}
-          </fig-select-options>
-        </fig-select>`}let W=U.map((Y)=>`<div class="fig-fill-picker-tab" data-tab="${R(Y)}"></div>`).join(`
-        `);this.#j.innerHTML=`
-      <fig-header>
-        ${Z}
-        <fig-button icon variant="ghost" class="fig-fill-picker-close" aria-label="Close fill picker">
-          <fig-icon name="close"></fig-icon>
-        </fig-button>
-      </fig-header>
-      <fig-content>
-        ${W}
-      </fig-content>
-    `,document.body.appendChild(this.#j);for(let[Y,{element:$}]of Object.entries(this.#k)){let f=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((D)=>D.dataset.tab===Y);if(!f)continue;while($.firstChild)f.appendChild($.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:Y,container:f}}))}let z=this.#j.querySelector(".fig-fill-picker-type");if(z)z.addEventListener("change",(Y)=>{let $=typeof Y.detail==="string"?Y.detail:Y.target?.value;if($)this.#o($)});this.#j.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#j.open=!1});let O=()=>{if(this.#K)this.#K.removeAttribute("selected");this.#s();let Y=JSON.stringify(this.value);if(this.#S!==null&&this.#S!==Y)this.#u();this.#H=null,this.#S=null,this.#B();let $=this.#J;this.#D(()=>{if($?.isConnected)HTMLElement.prototype.focus.call($)}),this.dispatchEvent(new CustomEvent("close"))};this.#j.addEventListener("close",O);let L={solid:()=>this.#P(),gradient:()=>this.#Tj(),image:()=>this.#gj(),video:()=>this.#hj(),webcam:()=>this.#dj()};for(let[Y,$]of Object.entries(L))if(!this.#k[Y]&&U.includes(Y))$();for(let Y of Object.keys(this.#k)){if(J.includes(Y))continue;let $=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((f)=>f.dataset.tab===Y);if(!$)continue;$.addEventListener("input",(f)=>{if(f.target===this)return;if(f.stopPropagation(),f.detail)this.#g[Y]=f.detail;this.#Y()}),$.addEventListener("change",(f)=>{if(f.target===this)return;if(f.stopPropagation(),f.detail)this.#g[Y]=f.detail;this.#u()})}}#o(j,{emit:J=!0}={}){let K=Array.from(this.#j?.querySelectorAll(".fig-fill-picker-tab")??[]).find((W)=>W.dataset.tab===j);if(!K)return;let Q=this.#V;if(this.#V=j,this.#Z=j,Q==="webcam"&&j!=="webcam")this.#s();let U=this.#j.querySelector(".fig-fill-picker-type");if(U&&U.value!==j)U.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 Z=this.#j.querySelector("fig-content");if(Z)Z.style.padding=this.#k[j]?"0":"";if(j==="gradient")this.#D(()=>{this.#v();let W=K.querySelector(".fig-fill-picker-gradient-bar-input");W?.refreshLayout?.(),this.#D(()=>{W?.refreshLayout?.()})});if(j==="webcam")this.#e?.();if(this.#f(),J)this.#Y()}#Wj(){if(!this.#j?.open)return;if(this.#o(this.#Z,{emit:!1}),this.#I(),this.#N(),this.#w(),this.#q)this.#q.setAttribute("value",this.#Q.h);if(this.#O)this.#O.setAttribute("value",this.#Q.a*100),this.#O.setAttribute("color",this.#m(this.#Q));this.#v();let j=this.#j.querySelector('[data-tab="image"]'),J=j?.querySelector(".fig-fill-picker-scale-mode"),K=j?.querySelector(".fig-fill-picker-scale"),Q=j?.querySelector(".fig-fill-picker-image-preview");if(J)J.value=this.#X.scaleMode;if(K)K.setAttribute("value",this.#X.scale),K.style.display=this.#X.scaleMode==="tile"?"block":"none";if(Q)this.#i(Q);let U=this.#j.querySelector('[data-tab="video"]'),X=U?.querySelector(".fig-fill-picker-scale-mode"),Z=U?.querySelector(".fig-fill-picker-video-preview");if(X)X.value=this.#$.scaleMode;if(Z)this.#Xj(Z)}#P(){let j=this.#j.querySelector('[data-tab="solid"]'),J=this.getAttribute("alpha")!=="false";if(j.innerHTML=`
-      <fig-preview class="fig-fill-picker-color-area">
-        <canvas width="200" height="200"></canvas>
-        <fig-handle
-          aria-label="Color saturation and brightness"
-          role="slider"
-          aria-valuemin="0"
-          aria-valuemax="100"
-          type="color"
-          color="${this.#m({...this.#Q,a:1})}"
-          data-no-color-picker
-          drag
-          drag-surface=".fig-fill-picker-color-area"
-          drag-axes="x,y"
-          drag-snapping="modifier"
-        ></fig-handle>
-      </fig-preview>
-      <div class="fig-fill-picker-sliders${J?"":" is-hue-only"}">
-        <fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper" aria-label="Sample color"><fig-icon name="eyedropper"></fig-icon></fig-button></fig-tooltip>
-        <fig-slider type="hue" variant="classic" text="false" min="0" max="360" aria-label="Hue" value="${this.#Q.h}"></fig-slider>
-        ${J?`<fig-slider type="opacity" variant="classic" text="false" min="0" max="100" aria-label="Opacity" value="${this.#Q.a*100}" color="${this.#m(this.#Q)}"></fig-slider>`:""}
-      </div>
-      <fig-field class="fig-fill-picker-inputs">
-        <fig-select class="fig-fill-picker-input-mode" label="Color value format" value="${R(this.#F)}">
-          <fig-select-options>
-            <fig-select-option value="hex">Hex</fig-select-option>
-            <fig-select-option value="rgb">RGB</fig-select-option>
-            <fig-select-option value="css">CSS</fig-select-option>
-            <fig-select-option value="hsl">HSL</fig-select-option>
-            <fig-select-option value="hsb">HSB</fig-select-option>
-            <fig-select-option value="lab">LAB</fig-select-option>
-            <fig-select-option value="lch">LCH</fig-select-option>
-          </fig-select-options>
-        </fig-select>
-        <span class="fig-fill-picker-input-fields"></span>
-      </fig-field>
-    `,this.#z=j.querySelector("canvas"),this.#L=j.querySelector("fig-handle"),this.#jj(),this.#I(),this.#N(),this.#Kj(),this.#q=j.querySelector('fig-slider[type="hue"]'),this.#q.addEventListener("input",(U)=>{this.#Q.h=parseFloat(U.target.value),this.#I(),this.#N(),this.#w(),this.#Y()}),this.#q.addEventListener("change",()=>{this.#u()}),J)this.#O=j.querySelector('fig-slider[type="opacity"]'),this.#O.addEventListener("input",(U)=>{this.#Q.a=parseFloat(U.target.value)/100,this.#w(),this.#Y()}),this.#O.addEventListener("change",()=>{this.#u()});j.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(U)=>{let X=typeof U.detail==="string"?U.detail:U.target?.value;if(!X)return;this.#F=X,this.#n()}),this.#n();let Q=j.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)Q.addEventListener("click",async()=>{try{let X=await new EyeDropper().open();this.#Q={...this.#t(X.sRGBHex),a:this.#Q.a},this.#I(),this.#N(),this.#w(),this.#Y()}catch(U){}});else Q.setAttribute("disabled",""),Q.title="EyeDropper not supported in this browser"}#Hj(){let j=this.#j?.querySelector('[data-tab="solid"]');if(j){let J=j.querySelector("canvas");if(J){let K=document.createElement("canvas");K.width=J.width,K.height=J.height,J.replaceWith(K),this.#z=K,this.#Kj()}this.#I(),this.#N()}this.#h(),this.#Y()}#I(){if(!this.#z&&this.#j)this.#z=this.#j.querySelector('[data-tab="solid"] canvas');if(!this.#z)return;let j=this.#_==="display-p3"?"display-p3":"srgb",J=this.#z.getContext("2d",{colorSpace:j});if(!J)return;let K=this.#z.width,Q=this.#z.height;J.clearRect(0,0,K,Q);let U=this.#Q.h,X=this.#_==="display-p3",Z=J.createLinearGradient(0,0,K,0);if(X){Z.addColorStop(0,"color(display-p3 1 1 1)");let[z,O,L]=hslToP3(U,100,50);Z.addColorStop(1,`color(display-p3 ${z} ${O} ${L})`)}else Z.addColorStop(0,"#FFFFFF"),Z.addColorStop(1,`hsl(${U}, 100%, 50%)`);J.fillStyle=Z,J.fillRect(0,0,K,Q);let W=J.createLinearGradient(0,0,0,Q);W.addColorStop(0,"rgba(0,0,0,0)"),W.addColorStop(1,"rgba(0,0,0,1)"),J.fillStyle=W,J.fillRect(0,0,K,Q)}#N(j=0){if(!this.#L||!this.#z)return;this.#jj();let J=this.#z.getBoundingClientRect();if((J.width===0||J.height===0)&&j<5){this.#D(()=>this.#N(j+1));return}let K=Math.max(0,Math.min(100,this.#Q.s)),Q=Math.max(0,Math.min(100,100-this.#Q.v));this.#L.setAttribute("value",`${K}% ${Q}%`),this.#L.setAttribute("color",this.#m({...this.#Q,a:1}))}#jj(){if(!this.#L)return;this.#L.setAttribute("aria-valuenow",String(Math.round(this.#Q.v))),this.#L.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#Q.s)}%, brightness ${Math.round(this.#Q.v)}%`),this.#L.removeAttribute("aria-pressed")}#Jj(j,J,K={}){let{updateHandle:Q=!0,emitInput:U=!0,emitChange:X=!1}=K;if(this.#Q.s=Math.max(0,Math.min(100,j*100)),this.#Q.v=Math.max(0,Math.min(100,(1-J)*100)),this.#L)this.#L.setAttribute("color",this.#m({...this.#Q,a:1})),this.#jj();if(Q)this.#N();if(this.#w(),U)this.#Y();if(X)this.#u()}#Kj(){if(this.#M)this.#M(),this.#M=null;if(!this.#z||!this.#L)return;let j=this.#z.parentElement||this.#z,J=this.#L,K=!1,Q=(O,L={})=>{let Y=j.getBoundingClientRect();if(Y.width===0||Y.height===0)return;let $=Math.max(0,Math.min(O.clientX-Y.left,Y.width)),f=Math.max(0,Math.min(O.clientY-Y.top,Y.height));this.#Jj($/Y.width,f/Y.height,L)},U=(O)=>{if(O.button!==0)return;if(O.target===J||J.contains(O.target))return;K=!0,this.#C=!0,j.setPointerCapture(O.pointerId),Q(O,{updateHandle:!0,emitInput:!0})},X=(O)=>{if(!K)return;if(O.buttons===0){Z();return}Q(O,{updateHandle:!0,emitInput:!0})},Z=()=>{if(!K)return;K=!1,this.#C=!1,this.#u()},W=(O)=>{this.#C=!0;let L=O.detail?.px,Y=O.detail?.py;if(!Number.isFinite(L)||!Number.isFinite(Y))return;J.setAttribute("value",`${L*100}% ${Y*100}%`),this.#Jj(L,Y,{updateHandle:!1,emitInput:!0})},z=(O)=>{let L=O.detail?.px,Y=O.detail?.py;if(Number.isFinite(L)&&Number.isFinite(Y))J.setAttribute("value",`${L*100}% ${Y*100}%`),this.#Jj(L,Y,{updateHandle:!1,emitInput:!1});this.#C=!1,this.#u()};j.addEventListener("pointerdown",U),j.addEventListener("pointermove",X),j.addEventListener("pointerup",Z),j.addEventListener("pointercancel",Z),j.addEventListener("lostpointercapture",Z),J.addEventListener("input",W),J.addEventListener("change",z),this.#M=()=>{j.removeEventListener("pointerdown",U),j.removeEventListener("pointermove",X),j.removeEventListener("pointerup",Z),j.removeEventListener("pointercancel",Z),j.removeEventListener("lostpointercapture",Z),J.removeEventListener("input",W),J.removeEventListener("change",z),this.#C=!1}}#n(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=(Z,W)=>`<fig-tooltip text="${Z}">${W}</fig-tooltip>`,K=(Z,W,z,O,L,Y)=>`<fig-input-number class="${Z}" aria-label="${W}" min="${z}" max="${O}"${L!=null?` step="${L}"`:""}${Y?` units="${Y}"`:""}></fig-input-number>`,Q=this.getAttribute("alpha")!=="false",U=()=>Q?J("Alpha",K("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):"",X;switch(this.#F){case"rgb":X=`<div class="input-combo">
-          ${J("Red",K("fig-fill-picker-ci-r","Red",0,255))}
-          ${J("Green",K("fig-fill-picker-ci-g","Green",0,255))}
-          ${J("Blue",K("fig-fill-picker-ci-b","Blue",0,255))}
-          ${U()}
-        </div>`;break;case"hsl":X=`<div class="input-combo">
-          ${J("Hue",K("fig-fill-picker-ci-h","Hue",0,360))}
-          ${J("Saturation",K("fig-fill-picker-ci-s","Saturation",0,100))}
-          ${J("Lightness",K("fig-fill-picker-ci-l","Lightness",0,100))}
-          ${U()}
-        </div>`;break;case"hsb":X=`<div class="input-combo">
-          ${J("Hue",K("fig-fill-picker-ci-h","Hue",0,360))}
-          ${J("Saturation",K("fig-fill-picker-ci-s","Saturation",0,100))}
-          ${J("Brightness",K("fig-fill-picker-ci-v","Brightness",0,100))}
-          ${U()}
-        </div>`;break;case"lab":X=`<div class="input-combo">
-          ${J("Lightness",K("fig-fill-picker-ci-okl","Lightness",0,100))}
-          ${J("Green-Red axis",K("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001))}
-          ${J("Blue-Yellow axis",K("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001))}
-          ${U()}
-        </div>`;break;case"lch":X=`<div class="input-combo">
-          ${J("Lightness",K("fig-fill-picker-ci-okl","Lightness",0,100))}
-          ${J("Chroma",K("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001))}
-          ${J("Hue",K("fig-fill-picker-ci-okh","Hue",0,360))}
-          ${U()}
-        </div>`;break;case"css":X='<fig-input-text class="fig-fill-picker-ci-css" aria-label="CSS color" placeholder="rgba(0, 0, 0, 1)"></fig-input-text>';break;default:X=Q?`<div class="input-combo fig-fill-picker-ci-hex-row">
-          <fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>
-          ${U()}
-        </div>`:'<fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>';break}j.innerHTML=X,this.#Qj(),this.#D(()=>this.#w())}#Qj(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=()=>{if(this.#C)return;let U=this.#Oj();if(!U)return;let X=Number.isFinite(U.a)?U.a:this.#Q.a;if(this.#Q={...U,a:X},this.#I(),this.#N(),this.#q)this.#q.setAttribute("value",this.#Q.h);if(this.#O&&Number.isFinite(U.a))this.#O.setAttribute("value",this.#Q.a*100);this.#Y()},K=()=>this.#u();j.querySelectorAll("fig-input-number, fig-input-text").forEach((U)=>{U.addEventListener("input",J),U.addEventListener("change",K)})}#x(){let j=this.#j?.querySelector(".fig-fill-picker-ci-a");if(!j)return;let J=parseFloat(j.value);if(!Number.isFinite(J))return;return Math.max(0,Math.min(1,J/100))}#Oj(){let j=(Q)=>this.#j?.querySelector(`.${Q}`),J=(Q)=>parseFloat(j(Q)?.value??0),K=(Q)=>{if(!Q)return null;let U=this.#x();return{...Q,a:U??Q.a??this.#Q.a}};switch(this.#F){case"rgb":return K(this.#a({r:J("fig-fill-picker-ci-r"),g:J("fig-fill-picker-ci-g"),b:J("fig-fill-picker-ci-b")}));case"hsl":{let Q=this.#nj({h:J("fig-fill-picker-ci-h"),s:J("fig-fill-picker-ci-s"),l:J("fig-fill-picker-ci-l")});return K(this.#a(Q))}case"hsb":return K({h:J("fig-fill-picker-ci-h"),s:J("fig-fill-picker-ci-s"),v:J("fig-fill-picker-ci-v")});case"lab":{let Q=this.#Aj({l:J("fig-fill-picker-ci-okl")/100,a:J("fig-fill-picker-ci-oka"),b:J("fig-fill-picker-ci-okb")});return K(this.#a(Q))}case"lch":{let Q=this.#tj({l:J("fig-fill-picker-ci-okl")/100,c:J("fig-fill-picker-ci-okc"),h:J("fig-fill-picker-ci-okh")});return K(this.#a(Q))}case"css":{let Q=j("fig-fill-picker-ci-css");if(!Q)return null;return this.#lj(Q.value)}default:{let Q=j("fig-fill-picker-ci-hex");if(!Q)return null;let U=Q.value.replace(/^#/,"");if(U.length===3)U=U[0]+U[0]+U[1]+U[1]+U[2]+U[2];if(U.length===8){let X=parseInt(U.slice(6,8),16)/255;if(U=U.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(U))return null;return{...this.#t(`#${U}`),a:X}}if(U.length!==6||!/^[0-9a-fA-F]{6}$/.test(U))return null;return K(this.#t(`#${U}`))}}}#w(){if(!this.#j)return;let j=this.#m(this.#Q),J=this.#qj(this.#Q),K=(U)=>this.#j.querySelector(`.${U}`),Q=(U,X)=>{let Z=K(U);if(Z)Z.setAttribute("value",X)};switch(this.#F){case"rgb":Q("fig-fill-picker-ci-r",J.r),Q("fig-fill-picker-ci-g",J.g),Q("fig-fill-picker-ci-b",J.b);break;case"hsl":{let U=this.#oj(J);Q("fig-fill-picker-ci-h",Math.round(U.h)),Q("fig-fill-picker-ci-s",Math.round(U.s)),Q("fig-fill-picker-ci-l",Math.round(U.l));break}case"hsb":Q("fig-fill-picker-ci-h",Math.round(this.#Q.h)),Q("fig-fill-picker-ci-s",Math.round(this.#Q.s)),Q("fig-fill-picker-ci-v",Math.round(this.#Q.v));break;case"lab":{let U=this.#Ej(J);Q("fig-fill-picker-ci-okl",Math.round(U.l*100)),Q("fig-fill-picker-ci-oka",+U.a.toFixed(3)),Q("fig-fill-picker-ci-okb",+U.b.toFixed(3));break}case"lch":{let U=this.#aj(J);Q("fig-fill-picker-ci-okl",Math.round(U.l*100)),Q("fig-fill-picker-ci-okc",+U.c.toFixed(3)),Q("fig-fill-picker-ci-okh",Math.round(U.h));break}case"css":Q("fig-fill-picker-ci-css",this.#ij(this.#Q));break;default:Q("fig-fill-picker-ci-hex",j.replace(/^#/,"").toUpperCase());break}if(this.#F!=="css"){let U=Math.round(this.#Q.a*1000)/10;Q("fig-fill-picker-ci-a",Number.isInteger(U)?U:+U.toFixed(1))}if(this.#O)this.#O.setAttribute("color",j);this.#f()}#Tj(){let j=this.#j.querySelector('[data-tab="gradient"]'),J=S(this.#U);j.innerHTML=`
-      <fig-field class="fig-fill-picker-gradient-header">
-        <fig-select class="fig-fill-picker-gradient-type" label="Gradient type" value="${R(this.#U.type)}">
-          <fig-select-options>
-            <fig-select-option value="linear">Linear</fig-select-option>
-            <fig-select-option value="radial">Radial</fig-select-option>
-            <fig-select-option value="angular">Angular</fig-select-option>
-          </fig-select-options>
-        </fig-select>
-        <fig-tooltip text="Gradient angle">
-          <fig-input-number class="fig-fill-picker-gradient-angle" aria-label="Gradient angle" value="${(this.#U.angle-90+360)%360}" min="0" max="360" units="°" wrap></fig-input-number>
-        </fig-tooltip>
-        <div class="fig-fill-picker-gradient-center input-combo" style="display: none;">
-          <fig-input-number min="0" max="100" aria-label="Gradient center X" value="${this.#U.centerX}" units="%" class="fig-fill-picker-gradient-cx"></fig-input-number>
-          <fig-input-number min="0" max="100" aria-label="Gradient center Y" value="${this.#U.centerY}" units="%" class="fig-fill-picker-gradient-cy"></fig-input-number>
-        </div>
-        <div class="fig-fill-picker-gradient-actions">
-          <fig-tooltip text="Flip gradient">
-            <fig-button icon variant="ghost" class="fig-fill-picker-gradient-flip" aria-label="Flip gradient">
-              <fig-icon name="swap"></fig-icon>
-            </fig-button>
-          </fig-tooltip>
-          <fig-tooltip text="Rotate gradient">
-            <fig-button icon variant="ghost" class="fig-fill-picker-gradient-rotate" aria-label="Rotate gradient">
-              <fig-icon name="rotate"></fig-icon>
-            </fig-button>
-          </fig-tooltip>
-        </div>
-      </fig-field>
-      <fig-preview class="fig-fill-picker-gradient-preview">
-        <fig-input-gradient class="fig-fill-picker-gradient-bar-input" aria-label="Gradient stops" edit="true" mode="tip" size="large" value='${JSON.stringify({type:"gradient",gradient:q(this.#U)})}'></fig-input-gradient>
-      </fig-preview>
-      <div class="fig-fill-picker-gradient-stops">
-        <fig-header class="fig-fill-picker-gradient-stops-header" borderless>
-          <span>Stops</span>
-          <fig-button icon variant="ghost" class="fig-fill-picker-gradient-add" aria-label="Add gradient stop" title="Add stop">
-            <fig-icon name="add"></fig-icon>
-          </fig-button>
-        </fig-header>
-        <div class="fig-fill-picker-gradient-stops-list">
-          <fig-reorder></fig-reorder>
-        </div>
-      </div>
-      <div class="fig-fill-picker-gradient-interpolation">
-        <fig-header class="fig-fill-picker-gradient-interpolation-header" borderless>
-          <span>Color interpolation</span>
-        </fig-header>
-        <fig-field class="fig-fill-picker-gradient-interpolation-field">
-          <fig-select class="fig-fill-picker-gradient-space" label="Color interpolation" full value="${R(J)}">
-            <fig-select-options>
-              ${this.#Sj()}
-            </fig-select-options>
-          </fig-select>
-        </fig-field>
-      </div>
-    `,this.#v(),this.#yj(j)}#Sj(){let j=["shorter","longer","increasing","decreasing"];return[{label:"Linear",options:[{value:"srgb",label:"sRGB"}]},{label:"",options:[{value:"oklab",label:"OKLAB"}]},{label:"Polar",options:j.map((K)=>({value:`oklch-${K}`,label:`OKLCH ${K.charAt(0).toUpperCase()}${K.slice(1)}`}))},{label:"",separator:!0,options:j.map((K)=>({value:`hsl-${K}`,label:`HSL ${K.charAt(0).toUpperCase()}${K.slice(1)}`}))}].map((K)=>{let Q=K.options.map((X)=>{let Z=X.method?X.method.charAt(0).toUpperCase()+X.method.slice(1):"",W=X.append||Z;return`<fig-select-option value="${R(X.value)}" label="${R(X.label)}">
-          <fig-interpolation-swatch slot="prepend" size="large" aria-hidden="true"></fig-interpolation-swatch>
-          ${R(X.label)}
-          ${W?`<span slot="append">${R(W)}</span>`:""}
-        </fig-select-option>`}).join("");return`${K.label||K.separator?`<fig-separator${K.label?` label="${R(K.label)}"`:""}></fig-separator>`:""}${Q}`}).join("")}#yj(j){let J=(Y)=>typeof Y.detail==="string"?Y.detail:Y.target?.value,K=j.querySelector(".fig-fill-picker-gradient-bar-input"),Q=(Y)=>{if(!K)return;this.#T=!0;try{K.setAttribute("value",JSON.stringify({type:"gradient",gradient:q(Y)}))}finally{this.#T=!1}},U=()=>{Q(this.#U)};j.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(Y)=>{let $=J(Y);if(!$)return;this.#U.type=$,this.#v(),this.#Y()});let Z=j.querySelector(".fig-fill-picker-gradient-space");if(Z?.querySelectorAll("fig-select-option").forEach((Y)=>{let $=()=>{let f=M(Y.getAttribute("value")||"srgb");Q(T({...this.#U,...f}))};Y.addEventListener("pointerenter",$),Y.addEventListener("pointerleave",()=>{if(document.activeElement!==Y)U()}),Y.addEventListener("focus",$),Y.addEventListener("blur",()=>{if(!Y.matches(":hover"))U()})}),this.#A?.disconnect(),Z)this.#A=new MutationObserver(()=>{if(!Z.hasAttribute("open"))U()}),this.#A.observe(Z,{attributes:!0,attributeFilter:["open"]});Z?.addEventListener("change",(Y)=>{let $=J(Y);if(!$)return;let f=M($);this.#U=T({...this.#U,...f}),this.#v(),this.#Y()}),j.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(Y)=>{let $=parseFloat(Y.target.value)||0;this.#U.angle=($+90)%360,this.#h(),this.#Y()});let z=j.querySelector(".fig-fill-picker-gradient-cx"),O=j.querySelector(".fig-fill-picker-gradient-cy");if(z?.addEventListener("input",(Y)=>{let $=Number.parseFloat(Y.target.value);this.#U.centerX=Number.isFinite($)?$:50,this.#h(),this.#Y()}),O?.addEventListener("input",(Y)=>{let $=Number.parseFloat(Y.target.value);this.#U.centerY=Number.isFinite($)?$:50,this.#h(),this.#Y()}),j.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#U.angle=(Number(this.#U.angle)+90)%360,this.#v(),this.#Y()}),j.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#U.stops.forEach((Y)=>{Y.position=100-Y.position}),this.#U.stops.sort((Y,$)=>Y.position-$.position),this.#v(),this.#Y()}),j.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#U.stops.push({position:50,color:"#888888",opacity:100}),this.#U.stops.sort(($,f)=>$.position-f.position),this.#v(),this.#Y()}),K){let Y=($)=>{if($.stopPropagation(),this.#T)return;let f=$.detail;if(!f?.gradient)return;this.#U=T({...this.#U,...f.gradient}),this.#f(),this.#Uj(),this.#Bj()};K.addEventListener("input",($)=>{Y($),this.#Y()}),K.addEventListener("change",($)=>{Y($),this.#u()})}j.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(Y)=>{this.#wj(Y)})}#Dj(j){let J=String(j.color||"#888888").replace(/^#/,"").slice(0,6),K=j.opacity??100;if(K>=100)return`#${J}`;let Q=Math.round(K/100*255).toString(16).padStart(2,"0");return`#${J}${Q}`}#Pj(j){if(!(j instanceof HTMLElement))return"#888888";if(j.hexOpaque)return this.#Vj(j.hexOpaque);let J=j.value;if(typeof J==="string"&&J.startsWith("#"))return this.#Vj(J.length>7?J.slice(0,7):J);let K=j.querySelector('fig-input-text:not([type="number"])'),Q=String(K?.value??K?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(Q))return`#${Q.toUpperCase()}`;let U=j.getAttribute("value");if(typeof U==="string"&&U.startsWith("#"))return this.#Vj(U.length>7?U.slice(0,7):U);return"#888888"}#Vj(j){let J=String(j||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(J))return"#888888";return`#${J.toUpperCase()}`}#Ij(j){let J=j.querySelector(".fig-fill-picker-stop-position"),K=j.querySelector(".fig-fill-picker-stop-color"),Q=parseFloat(J?.value??J?.getAttribute("value")??"0")||0,U=this.#Pj(K),X=100;if(K instanceof HTMLElement&&K.rgba?.a!==void 0)X=Math.round(K.rgba.a*100);else{let Z=parseInt(j.dataset.index,10);if(!isNaN(Z)&&this.#U.stops[Z])X=this.#U.stops[Z].opacity??100}return{position:Q,color:U,opacity:X}}#_j(j){let J=parseInt(j.dataset.index,10);if(isNaN(J)||J<0||J>=this.#U.stops.length)return;let K={...this.#U.stops[J],...this.#Ij(j)};this.#U.stops[J]=K,this.#xj(j,K)}#xj(j,J){let K=j.querySelector(".fig-fill-picker-stop-position");if(K)K.setAttribute("value",String(J.position));let Q=j.querySelector(".fig-fill-picker-stop-color");if(Q)Q.setAttribute("value",this.#Dj(J))}#wj(j){let{oldIndex:J,newIndex:K}=j.detail??{};if(J==null||K==null||J===K||J<0||K<0||J>=this.#U.stops.length||K>=this.#U.stops.length)return;let U=j.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");U.forEach((Z)=>this.#_j(Z));let[X]=this.#U.stops.splice(J,1);this.#U.stops.splice(K,0,X),U.forEach((Z,W)=>{Z.dataset.index=String(W)}),this.#T=!0;try{this.#Uj(),this.#h(),this.#Y()}finally{this.#T=!1}}#v(){if(!this.#j)return;let j=this.#j.querySelector('[data-tab="gradient"]');if(!j)return;this.#U=T(this.#U);let J=j.querySelector(".fig-fill-picker-gradient-angle"),K=j.querySelector(".fig-fill-picker-gradient-rotate"),Q=j.querySelector(".fig-fill-picker-gradient-center");if(this.#U.type==="radial"){if(J.style.display="none",K)K.style.display="none";Q.style.display="flex"}else{J.style.removeProperty("display"),K?.style.removeProperty("display"),Q.style.display="none";let X=(this.#U.angle-90+360)%360;J.setAttribute("value",X)}let U=j.querySelector(".fig-fill-picker-gradient-space");if(U)U.value=S(this.#U);this.#Uj(),this.#h(),this.#Bj()}#vj(){let j=Array.isArray(this.#U.stops)?[...this.#U.stops].sort((J,K)=>(J.position??0)-(K.position??0)):[];if(j.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return j.map((J)=>({color:String(J.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:J.position??0}))}#Uj(){if(!this.#j)return;let j=this.#vj();this.#j.querySelectorAll("fig-interpolation-swatch").forEach((J)=>{let K=J.closest("fig-select-option")?.getAttribute("value")||"srgb",Q=M(K),U={type:"linear",stops:j,interpolationSpace:Q.interpolationSpace};if(F.has(Q.interpolationSpace))U.hueInterpolation=Q.hueInterpolation;J.value={type:"gradient",gradient:U}})}#h(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-bar-input");if(j)this.#T=!0,j.setAttribute("value",JSON.stringify({type:"gradient",gradient:q(this.#U)})),this.#T=!1;this.#f()}#Bj(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-stops-list"),J=j?.querySelector("fig-reorder");if(!j||!J)return;let K=J.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(K.length===this.#U.stops.length){this.#U.stops.forEach((Q,U)=>{let X=K[U];X.dataset.index=U;let Z=X.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",Q.position);let W=X.querySelector(".fig-fill-picker-stop-color");if(W)W.setAttribute("value",this.#Dj(Q));let z=X.querySelector(".fig-fill-picker-stop-remove");if(z)if(this.#U.stops.length<=2)z.setAttribute("disabled","");else z.removeAttribute("disabled")});return}this.#uj(j)}#uj(j){let J=j.querySelector("fig-reorder");if(!J)return;J.innerHTML=this.#U.stops.map((K,Q)=>`
-      <fig-field class="fig-fill-picker-gradient-stop-row" data-index="${Q}">
-        <fig-input-number class="fig-fill-picker-stop-position" aria-label="Gradient stop position" min="0" max="100" value="${K.position}" units="%"></fig-input-number>
-        <fig-input-color class="fig-fill-picker-stop-color" aria-label="Gradient stop color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${this.#Dj(K)}"></fig-input-color>
-        <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#U.stops.length<=2?"disabled":""} aria-label="Remove gradient stop">
-          <fig-icon name="minus"></fig-icon>
-        </fig-button>
-      </fig-field>
-    `).join(""),J.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((K)=>{K.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#_j(K),this.#Uj(),this.#h(),this.#Y()});let Q=K.querySelector(".fig-fill-picker-stop-color"),U=Q.querySelector("fig-fill-picker");if(U)U.anchorElement=this.#j;else this.#D(()=>{let Z=Q.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#j});let X=()=>{this.#_j(K),this.#T=!0;try{this.#Uj(),this.#h(),this.#Y()}finally{this.#T=!1}};Q.addEventListener("input",X),Q.addEventListener("change",X),K.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let Z=parseInt(K.dataset.index,10);if(this.#U.stops.length>2)this.#U.stops.splice(Z,1),this.#v(),this.#Y()})})}#Fj(j,J=!0){let K=T({...this.#U,interpolationSpace:j??this.#U.interpolationSpace}),Q=this.#_==="display-p3",U=K.stops.map((W)=>{let z=(W.opacity??100)/100;return`${Q?this.#rj(W.color,z):this.#pj(W.color,z)} ${W.position}%`}).join(", "),X=p(K),Z=J&&X?` ${X}`:"";switch(K.type){case"linear":return`linear-gradient(${K.angle}deg${Z}, ${U})`;case"radial":return`radial-gradient(circle at ${K.centerX}% ${K.centerY}%${Z}, ${U})`;case"angular":return`conic-gradient(from ${K.angle}deg${Z}, ${U})`;default:return`linear-gradient(${K.angle}deg${Z}, ${U})`}}static#Nj=new Map;#Cj(j){let J=H.#Nj.get(j);if(J!==void 0)return J;let K=document.createElement("div");K.style.background=j;let Q=!!K.style.background;return H.#Nj.set(j,Q),Q}#Mj(){let j=this.#Fj(void 0,!0);if(this.#Cj(j))return j;let J=this.#Fj("oklab",!0);if(this.#Cj(J))return J;return this.#Fj("oklab",!1)}#gj(){let j=this.#j.querySelector('[data-tab="image"]');j.innerHTML=`
-      <fig-field class="fig-fill-picker-media-header">
-        <fig-select class="fig-fill-picker-scale-mode" label="Image scale mode" value="${R(this.#X.scaleMode)}">
-          <fig-select-options>
-            <fig-select-option value="fill">Fill</fig-select-option>
-            <fig-select-option value="fit">Fit</fig-select-option>
-            <fig-select-option value="crop">Crop</fig-select-option>
-            <fig-select-option value="tile">Tile</fig-select-option>
-          </fig-select-options>
-        </fig-select>
-        <fig-input-number class="fig-fill-picker-scale" aria-label="Image tile scale" min="1" max="200" value="${this.#X.scale}" units="%" ${this.#X.scaleMode==="tile"?"":'style="display: none;"'}></fig-input-number>
-      </fig-field>
-      <fig-image class="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"></fig-image>
-    `,this.#bj(j)}#bj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),K=j.querySelector(".fig-fill-picker-scale"),Q=j.querySelector(".fig-fill-picker-image-preview");J.addEventListener("change",(U)=>{let X=typeof U.detail==="string"?U.detail:U.target?.value;if(!X)return;this.#X.scaleMode=X,K.style.display=X==="tile"?"block":"none",this.#i(Q),this.#f(),this.#Y()}),K.addEventListener("input",(U)=>{this.#X.scale=parseFloat(U.target.value)||100,this.#i(Q),this.#f(),this.#Y()}),Q.addEventListener("loaded",(U)=>{let X=U.detail?.src||Q.src;if(!X)return;this.#X.url=X,this.#i(Q),this.#f(),this.#Y()}),Q.addEventListener("change",()=>{if(Q.src)return;this.#X.url=null,this.#i(Q),this.#f(),this.#Y()}),this.#i(Q)}#i(j){if(!this.#X.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.#X.url),j.classList.add("has-media"),j.style.backgroundImage="",j.style.backgroundPosition="",j.style.backgroundRepeat="",j.style.backgroundSize="",j.mediaEl?.style.removeProperty("opacity");let J=j.querySelector("fig-input-file[data-generated]");if(J)J.setAttribute("label","Replace"),J.removeAttribute("url");switch(this.#X.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.#X.url})`,j.style.backgroundPosition="top left",j.style.backgroundSize=`${this.#X.scale}%`,j.style.backgroundRepeat="repeat",j.mediaEl)j.mediaEl.style.opacity="0";break}}#Xj(j){if(j.tagName==="FIG-MEDIA"){if(!this.#$.url){j.removeAttribute("src"),j.classList.remove("has-media");return}j.setAttribute("src",this.#$.url),j.classList.add("has-media");let J=j.querySelector("fig-input-file[data-generated]");if(J)J.setAttribute("label","Replace"),J.removeAttribute("url");switch(this.#$.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.#$.scaleMode){case"fill":case"crop":j.style.objectFit="cover";break;case"fit":j.style.objectFit="contain";break}}#hj(){let j=this.#j.querySelector('[data-tab="video"]');j.innerHTML=`
-      <fig-field class="fig-fill-picker-media-header">
-        <fig-select class="fig-fill-picker-scale-mode" label="Video scale mode" value="${R(this.#$.scaleMode)}">
-          <fig-select-options>
-            <fig-select-option value="fill">Fill</fig-select-option>
-            <fig-select-option value="fit">Fit</fig-select-option>
-            <fig-select-option value="crop">Crop</fig-select-option>
-          </fig-select-options>
-        </fig-select>
-      </fig-field>
-      <fig-media class="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" autoplay="true" controls muted="true" loop="true"></fig-media>
-    `,this.#mj(j)}#mj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),K=j.querySelector(".fig-fill-picker-video-preview");J.addEventListener("change",(Q)=>{let U=typeof Q.detail==="string"?Q.detail:Q.target?.value;if(!U)return;this.#$.scaleMode=U,this.#Xj(K),this.#f(),this.#Y()}),K.addEventListener("loaded",(Q)=>{let U=Q.detail?.src||K.src;if(!U)return;this.#$.url=U,this.#Xj(K),K.play?.(),this.#f(),this.#Y()}),K.addEventListener("change",()=>{if(K.src)return;this.#$.url=null,this.#Xj(K),this.#f(),this.#Y()}),this.#Xj(K)}#dj(){let j=this.#j.querySelector('[data-tab="webcam"]');j.innerHTML=`
-      <fig-field class="fig-fill-picker-webcam-camera" style="display: none;">
-        <fig-select class="fig-fill-picker-camera-select" label="Camera" full>
-          <fig-select-options></fig-select-options>
-        </fig-select>
-      </fig-field>
-      <fig-video class="fig-fill-picker-webcam-preview" aria-label="Webcam preview" aspect-ratio="1/1" fit="cover" checkerboard="true" autoplay="true" muted="true">
-        <video class="fig-fill-picker-webcam-video" autoplay muted playsinline></video>
-        <div class="fig-fill-picker-webcam-status" role="status" aria-live="polite">
-          <span>Camera access required</span>
-        </div>
-      </fig-video>
-      <div class="fig-fill-picker-webcam-controls">
-        <fig-button class="fig-fill-picker-webcam-capture" variant="secondary" full disabled>
-          Capture
-        </fig-button>
-      </div>
-    `,this.#cj(j)}#cj(j){let J=j.querySelector(".fig-fill-picker-webcam-video"),K=j.querySelector(".fig-fill-picker-webcam-status"),Q=j.querySelector(".fig-fill-picker-webcam-capture"),U=j.querySelector(".fig-fill-picker-webcam-camera"),X=j.querySelector(".fig-fill-picker-camera-select"),Z=(O)=>{if(O)Q.removeAttribute("disabled");else Q.setAttribute("disabled","")},W=()=>{let O=!!this.#W.stream&&J.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&J.videoWidth>0&&J.videoHeight>0;if(Z(O),O)K.querySelector("span").textContent="Camera ready",K.style.display="none"};J.addEventListener("loadedmetadata",W),J.addEventListener("canplay",W);let z=async(O=null)=>{this.#s();let L=this.#b;Z(!1),K.querySelector("span").textContent="Starting camera",K.style.display="flex";try{let Y={video:O?{deviceId:{exact:O}}:!0},$=await navigator.mediaDevices.getUserMedia(Y);if(L!==this.#b||!this.isConnected||this.#V!=="webcam"){$.getTracks().forEach((k)=>k.stop());return}this.#W.stream=$,J.srcObject=$,J.style.display="block",W();let f=await navigator.mediaDevices.enumerateDevices();if(L!==this.#b)return;let D=f.filter((k)=>k.kind==="videoinput");if(D.length>1){U.style.display="";let k=X.querySelector(":scope > fig-select-options");if(!k)k=document.createElement("fig-select-options"),X.append(k);if(k.replaceChildren(),D.forEach((V,N)=>{let _=document.createElement("fig-select-option");_.value=V.deviceId;let x=V.label||(D.length>1?`Camera ${N+1}`:"Camera");_.textContent=x.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(i,C)=>{return` ${/^\d+$/.test(C)?Number.parseInt(C,10).toString():C.replace(/^0+/,"")||"0"}`}),k.append(_)}),O)X.value=O}else U.style.display="none",X.querySelector(":scope > fig-select-options")?.replaceChildren()}catch(Y){if(L!==this.#b)return;console.error("Webcam error:",Y.name,Y.message);let $="Camera access denied";if(Y.name==="NotAllowedError")$="Camera permission denied";else if(Y.name==="NotFoundError")$="No camera found";else if(Y.name==="NotReadableError")$="Camera in use by another app";else if(Y.name==="OverconstrainedError")$="Camera constraints not supported";else if(!window.isSecureContext)$="Camera requires secure context";K.replaceChildren();let f=document.createElement("span");f.textContent=$,K.appendChild(f),K.style.display="flex",J.style.display="none",Z(!1)}};this.#e=z,X.addEventListener("change",(O)=>{let L=typeof O.detail==="string"?O.detail:O.target?.value;if(L)z(L)}),Q.addEventListener("click",async()=>{if(!this.#W.stream)return;if(!J.videoWidth||!J.videoHeight)return;let O=document.createElement("canvas");O.width=J.videoWidth,O.height=J.videoHeight,O.getContext("2d").drawImage(J,0,0,O.width,O.height);let L=await new Promise(($)=>O.toBlob($,"image/png"));if(!L)return;if(this.#W.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#W.snapshot),this.#r.delete(this.#W.snapshot);this.#W.snapshot=URL.createObjectURL(L),this.#r.add(this.#W.snapshot),this.#X.url=this.#W.snapshot;let Y=this.#j.querySelector(".fig-fill-picker-image-preview");if(Y)this.#i(Y);this.#o("image")})}#qj(j){let J=j.h/360,K=j.s/100,Q=j.v/100,U,X,Z,W=Math.floor(J*6),z=J*6-W,O=Q*(1-K),L=Q*(1-z*K),Y=Q*(1-(1-z)*K);switch(W%6){case 0:U=Q,X=Y,Z=O;break;case 1:U=L,X=Q,Z=O;break;case 2:U=O,X=Q,Z=Y;break;case 3:U=O,X=L,Z=Q;break;case 4:U=Y,X=O,Z=Q;break;case 5:U=Q,X=O,Z=L;break}return{r:Math.round(U*255),g:Math.round(X*255),b:Math.round(Z*255)}}#a(j){let J=j.r/255,K=j.g/255,Q=j.b/255,U=Math.max(J,K,Q),X=Math.min(J,K,Q),Z=U-X,W=0,z=U===0?0:Z/U,O=U;if(U!==X){switch(U){case J:W=(K-Q)/Z+(K<Q?6:0);break;case K:W=(Q-J)/Z+2;break;case Q:W=(J-K)/Z+4;break}W/=6}return{h:W*360,s:z*100,v:O*100,a:1}}#m(j){if(!j||typeof j.h!=="number"||typeof j.s!=="number"||typeof j.v!=="number")return"#D9D9D9";let J=this.#qj(j),K=(Q)=>{return(isNaN(Q)?217:Math.max(0,Math.min(255,Math.round(Q)))).toString(16).padStart(2,"0")};return`#${K(J.r)}${K(J.g)}${K(J.b)}`}#t(j){let J=parseInt(j.slice(1,3),16),K=parseInt(j.slice(3,5),16),Q=parseInt(j.slice(5,7),16);return this.#a({r:J,g:K,b:Q})}#pj(j,J=1){let K=parseInt(j.slice(1,3),16),Q=parseInt(j.slice(3,5),16),U=parseInt(j.slice(5,7),16);return`rgba(${K}, ${Q}, ${U}, ${J})`}#sj(j){let J=Math.max(0,Math.min(1,Number(j)||0)),K=Math.round(J*1000)/1000;return String(K)}#ij(j=this.#Q){let J=this.#qj(j);return`rgba(${J.r}, ${J.g}, ${J.b}, ${this.#sj(j.a)})`}#lj(j){let J=String(j??"").trim();if(!J)return null;let K=J.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(K){let U=K[1];if(U.length===3)U=U[0]+U[0]+U[1]+U[1]+U[2]+U[2];let X=1;if(U.length===8)X=parseInt(U.slice(6,8),16)/255,U=U.slice(0,6);return{...this.#t(`#${U}`),a:X}}let Q=J.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if(Q){let U=Math.max(0,Math.min(255,Math.round(parseFloat(Q[1])))),X=Math.max(0,Math.min(255,Math.round(parseFloat(Q[2])))),Z=Math.max(0,Math.min(255,Math.round(parseFloat(Q[3])))),W=Q[4]!==void 0?Math.max(0,Math.min(1,parseFloat(Q[4]))):1;if(![U,X,Z,W].every(Number.isFinite))return null;return{...this.#a({r:U,g:X,b:Z}),a:W}}return null}#rj(j,J=1){let K=+(parseInt(j.slice(1,3),16)/255).toFixed(4),Q=+(parseInt(j.slice(3,5),16)/255).toFixed(4),U=+(parseInt(j.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${K} ${Q} ${U} / ${J})`}#oj(j){let J=j.r/255,K=j.g/255,Q=j.b/255,U=Math.max(J,K,Q),X=Math.min(J,K,Q),Z,W,z=(U+X)/2;if(U===X)Z=W=0;else{let O=U-X;switch(W=z>0.5?O/(2-U-X):O/(U+X),U){case J:Z=((K-Q)/O+(K<Q?6:0))/6;break;case K:Z=((Q-J)/O+2)/6;break;case Q:Z=((J-K)/O+4)/6;break}}return{h:Z*360,s:W*100,l:z*100}}#nj(j){let J=j.h/360,K=j.s/100,Q=j.l/100,U,X,Z;if(K===0)U=X=Z=Q;else{let W=(L,Y,$)=>{if($<0)$+=1;if($>1)$-=1;if($<0.16666666666666666)return L+(Y-L)*6*$;if($<0.5)return Y;if($<0.6666666666666666)return L+(Y-L)*(0.6666666666666666-$)*6;return L},z=Q<0.5?Q*(1+K):Q+K-Q*K,O=2*Q-z;U=W(O,z,J+0.3333333333333333),X=W(O,z,J),Z=W(O,z,J-0.3333333333333333)}return{r:Math.round(U*255),g:Math.round(X*255),b:Math.round(Z*255)}}#Ej(j){let J=(Y)=>{return Y=Y/255,Y<=0.04045?Y/12.92:Math.pow((Y+0.055)/1.055,2.4)},K=J(j.r),Q=J(j.g),U=J(j.b),X=0.4122214708*K+0.5363325363*Q+0.0514459929*U,Z=0.2119034982*K+0.6806995451*Q+0.1073969566*U,W=0.0883024619*K+0.2817188376*Q+0.6299787005*U,z=Math.cbrt(X),O=Math.cbrt(Z),L=Math.cbrt(W);return{l:0.2104542553*z+0.793617785*O-0.0040720468*L,a:1.9779984951*z-2.428592205*O+0.4505937099*L,b:0.0259040371*z+0.7827717662*O-0.808675766*L}}#aj(j){let J=this.#Ej(j);return{l:J.l,c:Math.sqrt(J.a*J.a+J.b*J.b),h:(Math.atan2(J.b,J.a)*180/Math.PI+360)%360}}#Aj(j){let J=j.l+0.3963377774*j.a+0.2158037573*j.b,K=j.l-0.1055613458*j.a-0.0638541728*j.b,Q=j.l-0.0894841775*j.a-1.291485548*j.b,U=J*J*J,X=K*K*K,Z=Q*Q*Q,W=(z)=>{let O=z<=0.0031308?12.92*z:1.055*Math.pow(z,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,O))*255)};return{r:W(4.0767416621*U-3.3077115913*X+0.2309699292*Z),g:W(-1.2684380046*U+2.6097574011*X-0.3413193965*Z),b:W(-0.0041960863*U-0.7034186147*X+1.707614701*Z)}}#tj(j){let J=j.h*Math.PI/180;return this.#Aj({l:j.l,a:j.c*Math.cos(J),b:j.c*Math.sin(J)})}#Y(){if(this.#E())return;this.#f(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#u(){if(this.#E())return;this.#S=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let j={type:this.#Z,colorSpace:this.#_};switch(this.#Z){case"solid":return{...j,color:this.#m(this.#Q),alpha:this.#Q.a,hsv:{...this.#Q}};case"gradient":return{...j,gradient:q(this.#U),css:this.#Mj()};case"image":return{...j,image:{...this.#X}};case"video":return{...j,video:{...this.#$}};case"webcam":return{...j,image:{url:this.#W.snapshot,scaleMode:"fill",scale:50}};default:return{...j,...this.#g[this.#Z]}}}set value(j){if(typeof j==="string")this.setAttribute("value",j);else this.setAttribute("value",JSON.stringify(j))}attributeChangedCallback(j,J,K){if(J===K)return;switch(j){case"value":if(this.#Yj(),this.#f(),this.#j?.open&&!this.#C)this.#Wj(),this.#S=JSON.stringify(this.value);break;case"disabled":if(this.#B(),this.#E()&&this.#j?.open)this.close();break;case"alpha":case"mode":{if(!this.#j)break;let Q=this.#j.open;if(this.#Zj(),Q&&this.isConnected)this.#G();break}case"aria-label":if(this.#j)this.#j.setAttribute("aria-label",this.#p());case"aria-labelledby":case"aria-describedby":this.#B();break}}}B("fig-fill-picker",H);
+    `,j.appendChild(J);let Q=document.createElement("fig-button");Q.className="fig-select-trigger",Q.setAttribute("part","trigger"),Q.setAttribute("variant","ghost"),Q.setAttribute("aria-haspopup","listbox"),Q.setAttribute("aria-expanded","false");let Z=document.createElement("span");Z.className="fig-select-prepend",Z.setAttribute("part","prepend"),Z.setAttribute("aria-hidden","true");let $=document.createElement("span");$.className="fig-select-label",$.setAttribute("part","label"),Q.append(Z,$);let X=document.createElement("dialog",{is:"fig-popup"});if(X.setAttribute("is","fig-popup"),X.setAttribute("part","listbox"),X.setAttribute("theme","menu"),X.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)X.setAttribute("popover","manual");X.id=m(),Q.setAttribute("aria-controls",X.id);let Y=document.createElement("slot");if(Y.setAttribute("name","panel"),X.appendChild(Y),j.append(Q,X),this.#Z=Q,this.#X=Z,this.#Y=$,this.#$=X,this.#j=Y,X.anchor=Q,this.#B(),this.#g(),!this.hasAttribute("value")){let W=this.#v().find((U)=>R(U,"selected"));if(W)this.setAttribute("value",W.value)}}#g(){if(!this.#$||this.#Q)return;if(typeof this.#$.positionPopup!=="function")return;this.#f=this.#$.positionPopup.bind(this.#$),this.#$.positionPopup=()=>{if(!this.open){this.#f?.();return}this.#Wj()},this.#Q=!0}#m(j){if(!j)return null;let J=document.createRange();J.selectNodeContents(j);let Q=[...J.getClientRects()].filter((Z)=>Z.width>0&&Z.height>0);if(Q.length)return Q[0];return j.getBoundingClientRect()}#i(){if(typeof this.#$?.parseViewportMargins==="function")return this.#$.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#d(){let j=this.#Y?.getBoundingClientRect();if(!j)return null;return{x:j.x,y:j.y,width:j.width,height:j.height}}#c(){let j=window.visualViewport;return{width:j?.width??window.innerWidth,height:j?.height??window.innerHeight,offsetLeft:j?.offsetLeft??0,offsetTop:j?.offsetTop??0}}#w(j,J,Q=0.25){if(!j&&!J)return!1;if(!j||!J)return!0;return Math.abs(j.x-J.x)>Q||Math.abs(j.y-J.y)>Q||Math.abs(j.width-J.width)>Q||Math.abs(j.height-J.height)>Q}#y(j,J,Q=0.25){if(!j&&!J)return!1;if(!j||!J)return!0;return Math.abs(j.width-J.width)>Q||Math.abs(j.height-J.height)>Q||Math.abs(j.offsetLeft-J.offsetLeft)>Q||Math.abs(j.offsetTop-J.offsetTop)>Q}#Oj(){if(!this.#J)return!1;let j=this.#w(this.#W,this.#d()),J=this.#y(this.#O,this.#c());return!j&&!J}#Yj(){this.#W=this.#d(),this.#O=this.#c()}#Wj(){if(this.#Oj())return;let j=this.#$,J=this.#Y;if(!j||!J){this.#f?.();return}let Q=this.#v(),Z=Q.find((H)=>this.#U(H)===this.value)||Q[0];if(!Z){this.#f?.();return}this.#f?.();let $=j.getBoundingClientRect(),X=J.getBoundingClientRect(),Y=this.#m(Z);if(!$.width||!$.height||!X.width||!Y)return;let W=Y.left-$.left,U=Y.top-$.top,O=R(this,"full")?this.getBoundingClientRect().left:X.left-W,z=X.top-U,f=this.#i();if(typeof j.clampToViewport==="function")({left:O,top:z}=j.clampToViewport({left:O,top:z},$,f));else{let{left:H,top:_}=f,y=window.innerWidth-$.width-f.right,G=window.innerHeight-$.height-f.bottom;O=Math.min(Math.max(O,H),Math.max(H,y)),z=Math.min(Math.max(z,_),Math.max(_,G))}j.style.setProperty("right","auto","important"),j.style.setProperty("bottom","auto","important"),j.style.setProperty("left",`${Math.round(O)}px`,"important"),j.style.setProperty("top",`${Math.round(z)}px`,"important");let L=this.#R(),k=this.#m(Z);if(k&&L&&L.scrollHeight>L.clientHeight+1){let H=k.top-X.top;if(Math.abs(H)>0.5)L.scrollTop+=H;L.syncOverflow?.()}if(this.#J||this.open)this.#Yj()}#r(){this.#Z?.addEventListener("click",this.#V),this.#Z?.addEventListener("keydown",this.#G),this.addEventListener("click",this.#I),this.addEventListener("pointerover",this.#L),this.#$?.addEventListener("keydown",this.#G),this.#$?.addEventListener("close",this.#M),this.#j?.addEventListener("slotchange",this.#H)}#E(){this.#Z?.removeEventListener("click",this.#V),this.#Z?.removeEventListener("keydown",this.#G),this.removeEventListener("click",this.#I),this.removeEventListener("pointerover",this.#L),this.#$?.removeEventListener("keydown",this.#G),this.#$?.removeEventListener("close",this.#M),this.#j?.removeEventListener("slotchange",this.#H)}#Gj(){this.#B(),this.#F()}#Lj(){if(this.#_)return;this.#_=new MutationObserver((j)=>{if(this.#T||this.#q)return;let J=!1;for(let Q of j){if(Q.type==="childList"){if([...Q.addedNodes].some((Z)=>this.#N(Z))||[...Q.removedNodes].some((Z)=>this.#N(Z))||Q.target?.closest?.("fig-select-option"))J=!0}if(Q.type==="attributes"&&Q.target?.tagName==="FIG-SELECT-OPTION"){if(Q.attributeName==="value"||Q.attributeName==="disabled"||Q.attributeName==="label")J=!0;else if(Q.attributeName==="selected"){if(R(Q.target,"selected")){let Z=this.#U(Q.target);if((this.getAttribute("value")??"")!==Z)this.setAttribute("value",Z),J=!0}else if(this.#U(Q.target)===(this.getAttribute("value")??""))J=!0}}if(Q.type==="characterData"&&Q.target?.parentElement?.tagName==="FIG-SELECT-OPTION")J=!0}if(J)this.#F()}),this.#_.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#v({enabledOnly:j=!1}={}){let J=this.#R(),Q=J?Array.from(J.querySelectorAll(":scope > fig-select-option")):[];if(!j)return Q;return Q.filter((Z)=>!R(Z,"disabled"))}#U(j){if(!j)return"";if(typeof j.value==="string")return j.value;let J=j.getAttribute?.("value");if(J!=null)return J;return(j.textContent||"").trim()}#Kj(j){if(!j)return"";let J=j.getAttribute?.("label");if(J!=null&&J!=="")return J.trim();let Q=[];for(let Z of j.childNodes){if(Z.nodeType===Node.TEXT_NODE){let Y=Z.textContent?.trim();if(Y)Q.push(Y);continue}if(!(Z instanceof Element))continue;let $=Z.getAttribute("slot");if($==="prepend"||$==="append")continue;let X=Z.textContent?.trim();if(X)Q.push(X)}if(Q.length)return Q.join(" ").trim();return(j.textContent||"").trim()}#l(j){if(!this.#X)return;let J=j?.querySelector?.(':scope > [slot="prepend"]');this.#X.replaceChildren(...Array.from(J?.childNodes??[],(Q)=>Q.cloneNode(!0)))}#zj(){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 J=this.getAttribute("closedby");if(J)this.#$.setAttribute("closedby",J);else this.#$.removeAttribute("closedby")}#Qj(){let j=R(this,"disabled");if(this.#Z)if(j)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled");if(j&&this.open)this.open=!1}#o(j){if(!j.length)return null;let J=j.find((Q)=>R(Q,"selected"));if(J&&!R(J,"disabled"))return J;return j.find((Q)=>!R(Q,"disabled"))||j[0]||null}#Uj(j){this.dispatchEvent(new CustomEvent("input",{detail:j,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:j,bubbles:!0,composed:!0}))}#F(){if(this.#T)return;this.#T=!0;try{let j=this.#v(),J=this.hasAttribute("value"),Q=J?this.getAttribute("value"):null,Z=J?j.find((W)=>this.#U(W)===Q):null,$=!1;if(!Z){if(J){if(!j.length){if(this.#Y)this.#Y.textContent=Q||this.getAttribute("label")||"";return}if(Z=this.#o(j),Z){let W=this.#U(Z);if(Q!==W)this.setAttribute("value",W),$=!0}else this.removeAttribute("value"),$=!0}else if(Z=j.find((W)=>R(W,"selected")),Z)this.setAttribute("value",this.#U(Z)),$=!0}for(let W of j){let U=W===Z;if(W.setAttribute("aria-selected",U?"true":"false"),U)W.setAttribute("selected","");else W.removeAttribute("selected")}let X=Z&&this.#Kj(Z)||this.getAttribute("label")||"";if(this.#Y)this.#Y.textContent=X;this.#l(Z);let Y=this.getAttribute("label")||"Select";if(this.#Z?.setAttribute("aria-label",Y),this.#R()?.syncOverflow?.(),$)this.#Uj(this.getAttribute("value")??"")}finally{this.#T=!1}}#kj(j){if(R(this,"disabled"))return;j.preventDefault(),j.stopPropagation();let J=!this.open;if(J&&this.#$&&this.#Z)this.#$.anchor=this.#Z;this.open=J}#Vj(j){let Q=(typeof j.composedPath==="function"?j.composedPath():[]).find((Z)=>Z?.tagName==="FIG-SELECT-OPTION");if(!Q||!this.contains(Q))return;if(R(Q,"disabled"))return;this.#n(Q)}#Nj(j){let Q=(typeof j.composedPath==="function"?j.composedPath():[]).find((Z)=>Z?.tagName==="FIG-SELECT-OPTION");if(!Q||!this.contains(Q))return;if(R(Q,"disabled"))return;if(j.relatedTarget instanceof Node&&Q.contains(j.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#U(Q),bubbles:!0,composed:!0}))}#b(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===" ")){if(j.preventDefault(),this.#$&&this.#Z)this.#$.anchor=this.#Z;this.open=!0,requestAnimationFrame(()=>{let $=this.#v({enabledOnly:!0}).findIndex((X)=>this.#U(X)===this.value);this.#A($>=0?$:0)})}return}let Q=this.#v({enabledOnly:!0});if(!Q.length)return;switch(j.key){case"ArrowDown":j.preventDefault(),this.#a(),this.#A(this.#K+1);break;case"ArrowUp":j.preventDefault(),this.#a(),this.#A(this.#K-1);break;case"Home":j.preventDefault(),this.#A(0);break;case"End":j.preventDefault(),this.#A(Q.length-1);break;case"Escape":j.preventDefault(),this.open=!1,this.#Z?.focus();break;case"Enter":case" ":{this.#a();let Z=Q[this.#K];if(!Z)return;j.preventDefault(),this.#n(Z);break}}}#D(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Z?.setAttribute("aria-expanded","false"),this.#Z?.focus(),this.#K=-1}#n(j){let J=this.#U(j);this.setAttribute("value",J),this.#F(),this.#Uj(J),this.open=!1}#p(){return this.#v({enabledOnly:!0})}#a(){let j=this.#p();if(!j.length){this.#K=-1;return}let J=j.find((Z)=>Z===document.activeElement),Q=J?j.indexOf(J):-1;this.#K=Q>=0?Q:this.#K}#A(j){let J=this.#p();if(!J.length)return;let Q=(j%J.length+J.length)%J.length;this.#K=Q,J[Q]?.focus()}#qj(){if(!this.#$||!this.#Z)return;let j=Math.ceil(this.getBoundingClientRect().width),J=Math.ceil(this.#Z.getBoundingClientRect().width),Q=Math.max(j,J,96);this.#$.style.setProperty("width","max-content","important"),this.#$.style.setProperty("min-width",`${Q}px`,"important"),this.#$.style.setProperty("max-width","min(20rem, calc(100vw - 1rem))","important")}#fj(){if(!this.#$||R(this,"disabled"))return;if(this.#Z)this.#$.anchor=this.#Z;this.#g(),this.#J=!1,this.#W=null,this.#O=null,this.#F(),this.#qj(),this.#$.open=!0,document.addEventListener("keydown",this.#G,!0),this.#Z?.setAttribute("aria-expanded","true"),this.#K=-1,requestAnimationFrame(()=>{this.#qj(),this.#Wj();let j=this.#R(),Q=this.#p().findIndex((Z)=>this.#U(Z)===this.value);if(Q>=0)this.#A(Q);else if(this.#Z?.hasAttribute("data-focus-visible")||this.#Z?.matches?.(":focus-visible"))this.#A(0);j?.syncOverflow?.(),this.#J=!0,this.#Yj()})}#Hj(){if(!this.#$)return;this.#J=!1,this.#W=null,this.#O=null,document.removeEventListener("keydown",this.#G,!0),this.#$.open=!1,this.#Z?.setAttribute("aria-expanded","false")}}A("fig-select",h);var e=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],jj=["shorter","longer","increasing","decreasing"],E=new Set(["oklch","hsl"]);function M(j){let J={...j??{}},Q=String(J.interpolationSpace??"srgb").toLowerCase();if(!e.includes(Q))Q="srgb";J.interpolationSpace=Q;let Z=String(J.hueInterpolation??"shorter").toLowerCase();return J.hueInterpolation=jj.includes(Z)?Z:"shorter",J}function P(j){let J=M(j),Q={...J,interpolationSpace:J.interpolationSpace};if(E.has(J.interpolationSpace))Q.hueInterpolation=J.hueInterpolation;else delete Q.hueInterpolation;return Q}function Jj(j){let J=M(j);if(J.interpolationSpace==="srgb")return"";if(E.has(J.interpolationSpace))return`in ${J.interpolationSpace} ${J.hueInterpolation} hue`;return`in ${J.interpolationSpace}`}function I(j){let J=M(j);if(E.has(J.interpolationSpace))return`${J.interpolationSpace}-${J.hueInterpolation||"shorter"}`;return J.interpolationSpace}function C(j){let J=String(j??"");for(let Q of E){let Z=`${Q}-`;if(J.startsWith(Z))return{interpolationSpace:Q,hueInterpolation:J.slice(Z.length)||"shorter"}}return{interpolationSpace:J||"srgb",hueInterpolation:"shorter"}}var Qj=0;class N 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 J=N.#Z,Q=J.find((W)=>W.value===j);if(Q)return Q;let Z=C(j),$=J.find((W)=>W.space===Z.interpolationSpace),X=$?.subtitle.split(" ")[0]??Z.interpolationSpace.toUpperCase(),Y=Z.hueInterpolation;return{value:j,space:Z.interpolationSpace,title:$?.title??"Custom",subtitle:E.has(Z.interpolationSpace)?`${X} ${Y.charAt(0).toUpperCase()}${Y.slice(1)}`:X}}#X=null;#Y=null;#j=null;#_=`fig-fill-picker-dialog-${++Qj}`;#k="solid";anchorElement=null;#K="solid";#T="srgb";#Q={h:0,s:0,v:85,a:1};#f="hex";#J={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#W={url:null,scaleMode:"fill",scale:50};#O={url:null,scaleMode:"fill",scale:50};#q={stream:null,snapshot:null};#V={};#I={};#L=null;#G=null;#M=null;#H=null;#N=!1;#B=!1;#R=null;#x=null;#u=null;#C=null;#Jj=null;#g=0;#m=null;#i=null;#d=new Set;#c=new Set;constructor(){super();this.#m=this.#Gj.bind(this),this.#i=this.#Lj.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#y(()=>{this.#Wj(),this.#v(),this.#U()})}disconnectedCallback(){if(this.#Qj(),this.#Oj(),this.#Yj(),this.#Y)this.#Y.removeAttribute("selected");if(this.#X)this.#X.removeEventListener("click",this.#m),this.#X.removeEventListener("keydown",this.#i);this.#X=null,this.#Y=null}#w(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#y(j){let J=requestAnimationFrame(()=>{if(this.#d.delete(J),this.isConnected)j()});return this.#d.add(J),J}#Oj(){this.#d.forEach((j)=>cancelAnimationFrame(j)),this.#d.clear()}#Yj(){if(this.#c.forEach((j)=>URL.revokeObjectURL(j)),this.#c.clear(),this.#q.snapshot?.startsWith("blob:")){if(this.#W.url===this.#q.snapshot)this.#W.url=null;this.#q.snapshot=null}}#Wj(){let j=Array.from(this.children).find((J)=>!J.getAttribute("slot")?.startsWith("mode-"));if(!j)this.#Y=document.createElement("fig-swatch"),this.#Y.setAttribute("background","#D9D9D9"),this.appendChild(this.#Y),this.#X=this.#Y;else if(j.matches("fig-swatch, fig-chit"))this.#Y=j,this.#X=j;else this.#X=j,this.#Y=null;if(this.#E(),this.#X.removeEventListener("click",this.#m),this.#X.addEventListener("click",this.#m),this.#X.removeEventListener("keydown",this.#i),this.#X.addEventListener("keydown",this.#i),this.#Y)this.#y(()=>{let J=this.#Y.querySelector('input[type="color"]');if(J)J.remove();this.#E()})}#r(){return this.getAttribute("aria-label")||"Fill picker"}#E(){if(!this.#X)return;let j=this.#w(),J=this.getAttribute("aria-labelledby");if(!this.#X.hasAttribute("role"))this.#X.setAttribute("role","button");if(this.#X.setAttribute("tabindex",j?"-1":"0"),this.#X.setAttribute("aria-disabled",j?"true":"false"),this.#X.setAttribute("aria-haspopup","dialog"),this.#X.setAttribute("aria-expanded",this.#j?.open?"true":"false"),this.#X.setAttribute("aria-controls",this.#_),this.#X.removeAttribute("aria-hidden"),J)this.#X.setAttribute("aria-labelledby",J),this.#X.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#X.setAttribute("aria-label",`Open ${this.#r()}`),this.#X.removeAttribute("aria-labelledby");else if(this.#X.removeAttribute("aria-labelledby"),!this.#X.hasAttribute("aria-label"))this.#X.setAttribute("aria-label",`Open ${this.#r()}`);let Q=this.getAttribute("aria-describedby");if(Q)this.#X.setAttribute("aria-describedby",Q);else this.#X.removeAttribute("aria-describedby")}#Gj(j){if(this.#w())return;j.stopPropagation(),j.preventDefault(),this.#l()}#Lj(j){if(j.key!=="Enter"&&j.key!==" ")return;if(this.#w())return;j.preventDefault(),j.stopPropagation(),this.#l()}#v(){let j=this.getAttribute("value");if(!j)return;let J=["solid","gradient","image","video","webcam"];try{let Q=JSON.parse(j);if(Q.type)this.#K=Q.type;if(Q.color){if(typeof Q.color==="string")this.#Q=this.#jj(Q.color);else if(typeof Q.color==="object"&&Q.color.h!==void 0)this.#Q=Q.color}let Z=Q.alpha!==void 0?Number(Q.alpha):Q.opacity!==void 0?Number(Q.opacity)/100:void 0;if(Number.isFinite(Z))this.#Q.a=Math.max(0,Math.min(1,Z));if(this.#T="srgb",Q.gradient)this.#J=M({...this.#J,...Q.gradient});if(Q.image)this.#W={...this.#W,...Q.image};if(Q.video)this.#O={...this.#O,...Q.video};if(Q.type&&!J.includes(Q.type)){let{type:$,...X}=Q;this.#I[Q.type]=X}}catch(Q){if(j.startsWith("#"))this.#K="solid",this.#Q=this.#jj(j)}}#U(){if(!this.#Y)return;let j,J="cover",Q="center";switch(this.#K){case"solid":j=this.#h(this.#Q);break;case"gradient":j=this.#Cj();break;case"image":if(this.#W.url){j=`url(${this.#W.url})`;let $=this.#Kj(this.#W.scaleMode,this.#W.scale);J=$.size,Q=$.position}else j="";break;case"video":if(this.#O.url){j=`url(${this.#O.url})`;let $=this.#Kj(this.#O.scaleMode,this.#O.scale);J=$.size,Q=$.position}else j="";break;case"webcam":j=this.#q.snapshot?`url(${this.#q.snapshot})`:"";break;default:j=this.#V[this.#K]?.element?.getAttribute("swatch-background")||"#D9D9D9"}if(this.#Y.setAttribute("background",j),this.#Y.style.setProperty("--swatch-bg-size",J),this.#Y.style.setProperty("--swatch-bg-position",Q),this.#K==="solid")this.#Y.setAttribute("alpha",this.#Q.a);else this.#Y.removeAttribute("alpha")}#Kj(j,J){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:`${J}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#l(){if(this.#w())return;if(!this.#j)this.#Uj();if(this.#u=JSON.stringify(this.value),this.#C=this.#u,this.#F(this.#K,{emit:!1}),this.#Y)this.#Y.setAttribute("selected","true");this.#j.open=!0,this.#E(),this.#y(()=>{this.#j?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#y(()=>{this.#b(),this.#D()})})}open(){this.#l()}close(){if(this.#j)this.#j.open=!1,this.#E()}#zj(){if(!this.#j)return;for(let[j,{element:J}]of Object.entries(this.#V)){let Q=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((Z)=>Z.dataset.tab===j);if(!Q)continue;while(Q.firstChild)J.appendChild(Q.firstChild)}}#Qj(){if(this.#R)this.#R(),this.#R=null;if(this.#x?.disconnect(),this.#x=null,this.#o(),!this.#j)return;this.#zj(),this.#j.remove(),this.#j=null,this.#Jj=null,this.#u=null,this.#C=null,this.#L=null,this.#G=null,this.#M=null,this.#H=null,this.#B=!1,this.#E()}#o(){if(this.#g+=1,this.#q.stream)this.#q.stream.getTracks().forEach((J)=>J.stop()),this.#q.stream=null;let j=this.#j?.querySelector(".fig-fill-picker-webcam-video");if(j)j.srcObject=null}#Uj(){this.#V={},this.querySelectorAll('[slot^="mode-"]').forEach((f)=>{let L=f.getAttribute("slot").slice(5);this.#V[L]={element:f,label:f.getAttribute("label")||L.charAt(0).toUpperCase()+L.slice(1)}}),this.#j=document.createElement("dialog",{is:"fig-popup"}),this.#j.setAttribute("is","fig-popup"),this.#j.id=this.#_,this.#j.setAttribute("aria-label",this.#r()),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.#X;let j=this.getAttribute("dialog-position")||"left";this.#j.setAttribute("position",j),this.#j.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let J=["solid","gradient","image","video","webcam"],Q={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},Z=this.getAttribute("mode"),$;if(Z){if($=Z.split(",").map((L)=>L.trim().toLowerCase()).filter((L)=>J.includes(L)||this.#V[L]),$.length===0)$=[...J]}else $=[...J];let X={...Q};for(let[f,{label:L}]of Object.entries(this.#V))X[f]=L;if(!$.includes(this.#K))this.#K=$[0],this.#k=$[0];let Y;if($.length===1)Y=q("h3",{className:"fig-fill-picker-type-label"},X[$[0]]);else{let f=q("fig-select-options",{},$.map((L)=>q("fig-select-option",{value:L},X[L])));Y=q("fig-select",{className:"fig-fill-picker-type",label:"Fill type",value:this.#K},f)}let W=$.map((f)=>q("div",{className:"fig-fill-picker-tab","data-tab":f})),U=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",{},[Y,U]),q("fig-content",{},W)),document.body.appendChild(this.#j);for(let[f,{element:L}]of Object.entries(this.#V)){let k=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((H)=>H.dataset.tab===f);if(!k)continue;while(L.firstChild)k.appendChild(L.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:f,container:k}}))}let K=this.#j.querySelector(".fig-fill-picker-type");if(K)K.addEventListener("change",(f)=>{let L=typeof f.detail==="string"?f.detail:f.target?.value;if(L)this.#F(L)});this.#j.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#j.open=!1});let O=()=>{if(this.#Y)this.#Y.removeAttribute("selected");this.#o();let f=JSON.stringify(this.value);if(this.#C!==null&&this.#C!==f)this.#S();this.#u=null,this.#C=null,this.#E();let L=this.#X;this.#y(()=>{if(L?.isConnected)HTMLElement.prototype.focus.call(L)}),this.dispatchEvent(new CustomEvent("close"))};this.#j.addEventListener("close",O);let z={solid:()=>this.#Vj(),gradient:()=>this.#Pj(),image:()=>this.#hj(),video:()=>this.#dj(),webcam:()=>this.#pj()};for(let[f,L]of Object.entries(z))if(!this.#V[f]&&$.includes(f))L();for(let f of Object.keys(this.#V)){if(J.includes(f))continue;let L=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((k)=>k.dataset.tab===f);if(!L)continue;L.addEventListener("input",(k)=>{if(k.target===this)return;if(k.stopPropagation(),k.detail)this.#I[f]=k.detail;this.#z()}),L.addEventListener("change",(k)=>{if(k.target===this)return;if(k.stopPropagation(),k.detail)this.#I[f]=k.detail;this.#S()})}}#F(j,{emit:J=!0}={}){let Q=Array.from(this.#j?.querySelectorAll(".fig-fill-picker-tab")??[]).find((W)=>W.dataset.tab===j);if(!Q)return;let Z=this.#k;if(this.#k=j,this.#K=j,Z==="webcam"&&j!=="webcam")this.#o();let $=this.#j.querySelector(".fig-fill-picker-type");if($&&$.value!==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 Y=this.#j.querySelector("fig-content");if(Y)Y.style.padding=this.#V[j]?"0":"";if(j==="gradient")this.#y(()=>{this.#P();let W=Q.querySelector(".fig-fill-picker-gradient-bar-input");W?.refreshLayout?.(),this.#y(()=>{W?.refreshLayout?.()})});if(j==="webcam")this.#Jj?.();if(this.#U(),J)this.#z()}#kj(){if(!this.#j?.open)return;if(this.#F(this.#K,{emit:!1}),this.#b(),this.#D(),this.#t(),this.#M)this.#M.setAttribute("value",this.#Q.h);if(this.#H)this.#H.setAttribute("value",this.#Q.a*100),this.#H.setAttribute("color",this.#h(this.#Q));this.#P();let j=this.#j.querySelector('[data-tab="image"]'),J=j?.querySelector(".fig-fill-picker-scale-mode"),Q=j?.querySelector(".fig-fill-picker-scale"),Z=j?.querySelector(".fig-fill-picker-image-preview");if(J)J.value=this.#W.scaleMode;if(Q)Q.setAttribute("value",this.#W.scale),Q.style.display=this.#W.scaleMode==="tile"?"block":"none";if(Z)this.#s(Z);let $=this.#j.querySelector('[data-tab="video"]'),X=$?.querySelector(".fig-fill-picker-scale-mode"),Y=$?.querySelector(".fig-fill-picker-video-preview");if(X)X.value=this.#O.scaleMode;if(Y)this.#Xj(Y)}#Vj(){let j=this.#j.querySelector('[data-tab="solid"]'),J=this.getAttribute("alpha")!=="false",Q=q("canvas",{width:"200",height:"200"}),Z=q("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#h({...this.#Q,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),$=q("fig-preview",{className:"fig-fill-picker-color-area"},[Q,Z]),X=q("fig-tooltip",{text:"Sample color"},q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},F("eyedropper"))),Y=q("div",{className:`fig-fill-picker-sliders${J?"":" is-hue-only"}`},[X,q("fig-slider",{type:"hue",variant:"classic",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#Q.h}),J?q("fig-slider",{type:"opacity",variant:"classic",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#Q.a*100,color:this.#h(this.#Q)}):null]),W=q("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([z,f])=>q("fig-select-option",{value:z},f))),U=q("fig-field",{className:"fig-fill-picker-inputs"},[q("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#f},W),q("span",{className:"fig-fill-picker-input-fields"})]);if(j.replaceChildren($,Y,U),this.#L=j.querySelector("canvas"),this.#G=j.querySelector("fig-handle"),this.#n(),this.#b(),this.#D(),this.#a(),this.#M=j.querySelector('fig-slider[type="hue"]'),this.#M.addEventListener("input",(z)=>{this.#Q.h=parseFloat(z.target.value),this.#b(),this.#D(),this.#t(),this.#z()}),this.#M.addEventListener("change",()=>{this.#S()}),J)this.#H=j.querySelector('fig-slider[type="opacity"]'),this.#H.addEventListener("input",(z)=>{this.#Q.a=parseFloat(z.target.value)/100,this.#t(),this.#z()}),this.#H.addEventListener("change",()=>{this.#S()});j.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(z)=>{let f=typeof z.detail==="string"?z.detail:z.target?.value;if(!f)return;this.#f=f,this.#A()}),this.#A();let O=j.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)O.addEventListener("click",async()=>{try{let f=await new EyeDropper().open();this.#Q={...this.#jj(f.sRGBHex),a:this.#Q.a},this.#b(),this.#D(),this.#t(),this.#z()}catch(z){}});else O.setAttribute("disabled",""),O.title="EyeDropper not supported in this browser"}#Nj(){let j=this.#j?.querySelector('[data-tab="solid"]');if(j){let J=j.querySelector("canvas");if(J){let Q=document.createElement("canvas");Q.width=J.width,Q.height=J.height,J.replaceWith(Q),this.#L=Q,this.#a()}this.#b(),this.#D()}this.#$j(),this.#z()}#b(){if(!this.#L&&this.#j)this.#L=this.#j.querySelector('[data-tab="solid"] canvas');if(!this.#L)return;let j=this.#T==="display-p3"?"display-p3":"srgb",J=this.#L.getContext("2d",{colorSpace:j});if(!J)return;let Q=this.#L.width,Z=this.#L.height;J.clearRect(0,0,Q,Z);let $=this.#Q.h,X=this.#T==="display-p3",Y=J.createLinearGradient(0,0,Q,0);if(X){Y.addColorStop(0,"color(display-p3 1 1 1)");let[U,K,O]=hslToP3($,100,50);Y.addColorStop(1,`color(display-p3 ${U} ${K} ${O})`)}else Y.addColorStop(0,"#FFFFFF"),Y.addColorStop(1,`hsl(${$}, 100%, 50%)`);J.fillStyle=Y,J.fillRect(0,0,Q,Z);let W=J.createLinearGradient(0,0,0,Z);W.addColorStop(0,"rgba(0,0,0,0)"),W.addColorStop(1,"rgba(0,0,0,1)"),J.fillStyle=W,J.fillRect(0,0,Q,Z)}#D(j=0){if(!this.#G||!this.#L)return;this.#n();let J=this.#L.getBoundingClientRect();if((J.width===0||J.height===0)&&j<5){this.#y(()=>this.#D(j+1));return}let Q=Math.max(0,Math.min(100,this.#Q.s)),Z=Math.max(0,Math.min(100,100-this.#Q.v));this.#G.setAttribute("value",`${Q}% ${Z}%`),this.#G.setAttribute("color",this.#h({...this.#Q,a:1}))}#n(){if(!this.#G)return;this.#G.setAttribute("aria-valuenow",String(Math.round(this.#Q.v))),this.#G.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#Q.s)}%, brightness ${Math.round(this.#Q.v)}%`),this.#G.removeAttribute("aria-pressed")}#p(j,J,Q={}){let{updateHandle:Z=!0,emitInput:$=!0,emitChange:X=!1}=Q;if(this.#Q.s=Math.max(0,Math.min(100,j*100)),this.#Q.v=Math.max(0,Math.min(100,(1-J)*100)),this.#G)this.#G.setAttribute("color",this.#h({...this.#Q,a:1})),this.#n();if(Z)this.#D();if(this.#t(),$)this.#z();if(X)this.#S()}#a(){if(this.#R)this.#R(),this.#R=null;if(!this.#L||!this.#G)return;let j=this.#L.parentElement||this.#L,J=this.#G,Q=!1,Z=(K,O={})=>{let z=j.getBoundingClientRect();if(z.width===0||z.height===0)return;let f=Math.max(0,Math.min(K.clientX-z.left,z.width)),L=Math.max(0,Math.min(K.clientY-z.top,z.height));this.#p(f/z.width,L/z.height,O)},$=(K)=>{if(K.button!==0)return;if(K.target===J||J.contains(K.target))return;Q=!0,this.#N=!0,j.setPointerCapture(K.pointerId),Z(K,{updateHandle:!0,emitInput:!0})},X=(K)=>{if(!Q)return;if(K.buttons===0){Y();return}Z(K,{updateHandle:!0,emitInput:!0})},Y=()=>{if(!Q)return;Q=!1,this.#N=!1,this.#S()},W=(K)=>{this.#N=!0;let O=K.detail?.px,z=K.detail?.py;if(!Number.isFinite(O)||!Number.isFinite(z))return;J.setAttribute("value",`${O*100}% ${z*100}%`),this.#p(O,z,{updateHandle:!1,emitInput:!0})},U=(K)=>{let O=K.detail?.px,z=K.detail?.py;if(Number.isFinite(O)&&Number.isFinite(z))J.setAttribute("value",`${O*100}% ${z*100}%`),this.#p(O,z,{updateHandle:!1,emitInput:!1});this.#N=!1,this.#S()};j.addEventListener("pointerdown",$),j.addEventListener("pointermove",X),j.addEventListener("pointerup",Y),j.addEventListener("pointercancel",Y),j.addEventListener("lostpointercapture",Y),J.addEventListener("input",W),J.addEventListener("change",U),this.#R=()=>{j.removeEventListener("pointerdown",$),j.removeEventListener("pointermove",X),j.removeEventListener("pointerup",Y),j.removeEventListener("pointercancel",Y),j.removeEventListener("lostpointercapture",Y),J.removeEventListener("input",W),J.removeEventListener("change",U),this.#N=!1}}#A(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=(W,U)=>q("fig-tooltip",{text:W},U),Q=(W,U,K,O,z,f)=>q("fig-input-number",{className:W,"aria-label":U,min:K,max:O,step:z,units:f}),Z=this.getAttribute("alpha")!=="false",$=()=>Z?J("Alpha",Q("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,X=(W,U="")=>q("div",{className:["input-combo",U].filter(Boolean).join(" ")},W),Y;switch(this.#f){case"rgb":Y=X([J("Red",Q("fig-fill-picker-ci-r","Red",0,255)),J("Green",Q("fig-fill-picker-ci-g","Green",0,255)),J("Blue",Q("fig-fill-picker-ci-b","Blue",0,255)),$()]);break;case"hsl":Y=X([J("Hue",Q("fig-fill-picker-ci-h","Hue",0,360)),J("Saturation",Q("fig-fill-picker-ci-s","Saturation",0,100)),J("Lightness",Q("fig-fill-picker-ci-l","Lightness",0,100)),$()]);break;case"hsb":Y=X([J("Hue",Q("fig-fill-picker-ci-h","Hue",0,360)),J("Saturation",Q("fig-fill-picker-ci-s","Saturation",0,100)),J("Brightness",Q("fig-fill-picker-ci-v","Brightness",0,100)),$()]);break;case"lab":Y=X([J("Lightness",Q("fig-fill-picker-ci-okl","Lightness",0,100)),J("Green-Red axis",Q("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),J("Blue-Yellow axis",Q("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),$()]);break;case"lch":Y=X([J("Lightness",Q("fig-fill-picker-ci-okl","Lightness",0,100)),J("Chroma",Q("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),J("Hue",Q("fig-fill-picker-ci-okh","Hue",0,360)),$()]);break;case"css":Y=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"});Y=Z?X([W,$()],"fig-fill-picker-ci-hex-row"):W}break}j.replaceChildren(Y),this.#qj(),this.#y(()=>this.#t())}#qj(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=()=>{if(this.#N)return;let $=this.#Hj();if(!$)return;let X=Number.isFinite($.a)?$.a:this.#Q.a;if(this.#Q={...$,a:X},this.#b(),this.#D(),this.#M)this.#M.setAttribute("value",this.#Q.h);if(this.#H&&Number.isFinite($.a))this.#H.setAttribute("value",this.#Q.a*100);this.#z()},Q=()=>this.#S();j.querySelectorAll("fig-input-number, fig-input-text").forEach(($)=>{$.addEventListener("input",J),$.addEventListener("change",Q)})}#fj(){let j=this.#j?.querySelector(".fig-fill-picker-ci-a");if(!j)return;let J=parseFloat(j.value);if(!Number.isFinite(J))return;return Math.max(0,Math.min(1,J/100))}#Hj(){let j=(Z)=>this.#j?.querySelector(`.${Z}`),J=(Z)=>parseFloat(j(Z)?.value??0),Q=(Z)=>{if(!Z)return null;let $=this.#fj();return{...Z,a:$??Z.a??this.#Q.a}};switch(this.#f){case"rgb":return Q(this.#e({r:J("fig-fill-picker-ci-r"),g:J("fig-fill-picker-ci-g"),b:J("fig-fill-picker-ci-b")}));case"hsl":{let Z=this.#tj({h:J("fig-fill-picker-ci-h"),s:J("fig-fill-picker-ci-s"),l:J("fig-fill-picker-ci-l")});return Q(this.#e(Z))}case"hsb":return Q({h:J("fig-fill-picker-ci-h"),s:J("fig-fill-picker-ci-s"),v:J("fig-fill-picker-ci-v")});case"lab":{let Z=this.#Aj({l:J("fig-fill-picker-ci-okl")/100,a:J("fig-fill-picker-ci-oka"),b:J("fig-fill-picker-ci-okb")});return Q(this.#e(Z))}case"lch":{let Z=this.#jJ({l:J("fig-fill-picker-ci-okl")/100,c:J("fig-fill-picker-ci-okc"),h:J("fig-fill-picker-ci-okh")});return Q(this.#e(Z))}case"css":{let Z=j("fig-fill-picker-ci-css");if(!Z)return null;return this.#oj(Z.value)}default:{let Z=j("fig-fill-picker-ci-hex");if(!Z)return null;let $=Z.value.replace(/^#/,"");if($.length===3)$=$[0]+$[0]+$[1]+$[1]+$[2]+$[2];if($.length===8){let X=parseInt($.slice(6,8),16)/255;if($=$.slice(0,6),!/^[0-9a-fA-F]{6}$/.test($))return null;return{...this.#jj(`#${$}`),a:X}}if($.length!==6||!/^[0-9a-fA-F]{6}$/.test($))return null;return Q(this.#jj(`#${$}`))}}}#t(){if(!this.#j)return;let j=this.#h(this.#Q),J=this.#Mj(this.#Q),Q=($)=>this.#j.querySelector(`.${$}`),Z=($,X)=>{let Y=Q($);if(Y)Y.setAttribute("value",X)};switch(this.#f){case"rgb":Z("fig-fill-picker-ci-r",J.r),Z("fig-fill-picker-ci-g",J.g),Z("fig-fill-picker-ci-b",J.b);break;case"hsl":{let $=this.#aj(J);Z("fig-fill-picker-ci-h",Math.round($.h)),Z("fig-fill-picker-ci-s",Math.round($.s)),Z("fig-fill-picker-ci-l",Math.round($.l));break}case"hsb":Z("fig-fill-picker-ci-h",Math.round(this.#Q.h)),Z("fig-fill-picker-ci-s",Math.round(this.#Q.s)),Z("fig-fill-picker-ci-v",Math.round(this.#Q.v));break;case"lab":{let $=this.#Ej(J);Z("fig-fill-picker-ci-okl",Math.round($.l*100)),Z("fig-fill-picker-ci-oka",+$.a.toFixed(3)),Z("fig-fill-picker-ci-okb",+$.b.toFixed(3));break}case"lch":{let $=this.#ej(J);Z("fig-fill-picker-ci-okl",Math.round($.l*100)),Z("fig-fill-picker-ci-okc",+$.c.toFixed(3)),Z("fig-fill-picker-ci-okh",Math.round($.h));break}case"css":Z("fig-fill-picker-ci-css",this.#lj(this.#Q));break;default:Z("fig-fill-picker-ci-hex",j.replace(/^#/,"").toUpperCase());break}if(this.#f!=="css"){let $=Math.round(this.#Q.a*1000)/10;Z("fig-fill-picker-ci-a",Number.isInteger($)?$:+$.toFixed(1))}if(this.#H)this.#H.setAttribute("color",j);this.#U()}#Pj(){let j=this.#j.querySelector('[data-tab="gradient"]'),J=I(this.#J),Q=q("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#J.type},q("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([k,H])=>q("fig-select-option",{value:k},H)))),Z=(k,H,_)=>q("fig-tooltip",{text:k},q("fig-button",{icon:!0,variant:"ghost",className:H,"aria-label":k},F(_))),$=q("div",{className:"fig-fill-picker-gradient-actions"},[Z("Flip gradient","fig-fill-picker-gradient-flip","swap"),Z("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),X=q("fig-field",{className:"fig-fill-picker-gradient-header"},[Q,$]),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:P(this.#J)})}),W=q("fig-preview",{className:"fig-fill-picker-gradient-preview"},Y),U=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("span",{},"Stops"),U]),q("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]),O=q("fig-segmented-control",{className:"fig-fill-picker-gradient-interpolation-modes","aria-label":"Color interpolation",value:J},N.#Z.filter((k)=>!k.advanced).map(({value:k,space:H,title:_,subtitle:y})=>q("fig-tooltip",{text:`${_} — ${y}`},q("fig-segment",{value:k,"data-space":H,"aria-label":`${_} — ${y}`},q("fig-interpolation-swatch",{"aria-hidden":"true"}))))),z=q("fig-select",{className:"fig-fill-picker-gradient-space",label:"Color interpolation",value:J},q("fig-select-options",{},this.#Sj())),f=q("div",{className:"fig-fill-picker-gradient-interpolation-more"},[q("fig-button",{icon:!0,variant:"ghost","aria-hidden":"true",tabindex:"-1"},F("more")),z]),L=q("fig-field",{className:"fig-fill-picker-gradient-interpolation-field"},[O,f]);j.replaceChildren(X,W,L,K),this.#P(),this.#Ij(j)}#Sj(){let j=({value:Z,title:$,subtitle:X,advanced:Y=!1})=>q("fig-select-option",{value:Z,label:`${$} — ${X}`,className:Y?"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"},$),q("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},X)])]),J=q("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),Q=N.#Z;return[...Q.filter((Z)=>!Z.advanced).map(j),J,...Q.filter((Z)=>Z.advanced).map(j)]}#Ij(j){let J=(G)=>typeof G.detail==="string"?G.detail:G.target?.value,Q=j.querySelector(".fig-fill-picker-gradient-bar-input"),Z=(G)=>{if(!Q)return;this.#B=!0;try{Q.setAttribute("value",JSON.stringify({type:"gradient",gradient:P(G)}))}finally{this.#B=!1}},$=()=>{Z(this.#J)};j.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(G)=>{let V=J(G);if(!V)return;this.#J.type=V,this.#P(),this.#z()});let Y=j.querySelector(".fig-fill-picker-gradient-space"),W=Y?.querySelector("fig-select-options"),U="fig-fill-picker-gradient-interpolation-collapsed",K=W?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),O=()=>Boolean(W?.classList.contains(U)),z=(G)=>{W?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",G?"Show all color interpolation options":"Scroll down")},f=()=>{if(!W)return;W.classList.remove(U),W.style.removeProperty("max-height"),z(!1),W.syncOverflow?.()},L=()=>{if(!W||!K)return;W.style.removeProperty("max-height"),W.classList.add(U),W.scrollTop=0;let G=W.getBoundingClientRect().top,V=K.getBoundingClientRect().top,T=W.querySelector(".fig-overflow-end")?.offsetHeight||0,D=V-G;if(D>0)W.style.maxHeight=`${Math.round(D+T)}px`;z(!0),W.syncOverflow?.()},k=(G)=>Boolean(W?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${G}"]`)),H=()=>{if(k(I(this.#J)))f();else L()};if(W?.addEventListener("click",(G)=>{if(!O())return;if(!G.target?.closest?.(".fig-overflow-end"))return;G.preventDefault(),G.stopPropagation(),f()},!0),W?.addEventListener("focusin",(G)=>{if(!O())return;if(G.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))f()}),W?.addEventListener("scroll",()=>{if(O()&&W.scrollTop!==0)W.scrollTop=0}),Y?.querySelectorAll("fig-select-option").forEach((G)=>{let V=()=>{let T=C(G.getAttribute("value")||"srgb");Z(M({...this.#J,...T}))};G.addEventListener("pointerenter",V),G.addEventListener("pointerleave",()=>{if(document.activeElement!==G)$()}),G.addEventListener("focus",V),G.addEventListener("blur",()=>{if(!G.matches(":hover"))$()})}),this.#x?.disconnect(),Y)this.#x=new MutationObserver(()=>{if(!Y.hasAttribute("open"))$();else this.#y(H)}),this.#x.observe(Y,{attributes:!0,attributeFilter:["open"]});let _=j.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(_?.addEventListener("change",(G)=>{let V=typeof G.detail==="string"?G.detail:G.target?.value;if(!V)return;let T=C(V);this.#J=M({...this.#J,...T}),this.#P(),this.#z()}),_?.querySelectorAll("fig-segment").forEach((G)=>{let V=()=>{Z(M({...this.#J,...C(G.getAttribute("value")||"srgb")}))};G.addEventListener("pointerenter",V),G.addEventListener("pointerleave",$)}),Y?.addEventListener("change",(G)=>{let V=J(G);if(!V)return;let T=C(V);this.#J=M({...this.#J,...T}),this.#P(),this.#z()}),j.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#J.angle=(Number(this.#J.angle)+90)%360,this.#P(),this.#z()}),j.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#J.stops.forEach((G)=>{G.position=100-G.position}),this.#J.stops.sort((G,V)=>G.position-V.position),this.#P(),this.#z()}),j.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#J.stops.push({position:50,color:"#888888",opacity:100}),this.#J.stops.sort((V,T)=>V.position-T.position),this.#P(),this.#z()}),Q){let G=(V)=>{if(V.stopPropagation(),this.#B)return;let T=V.detail;if(!T?.gradient)return;this.#J=M({...this.#J,...T.gradient}),this.#U(),this.#Zj(),this.#yj()};Q.addEventListener("input",(V)=>{G(V),this.#z()}),Q.addEventListener("change",(V)=>{G(V),this.#S()})}j.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(G)=>{this.#vj(G)})}#Bj(j){let J=String(j.color||"#888888").replace(/^#/,"").slice(0,6),Q=j.opacity??100;if(Q>=100)return`#${J}`;let Z=Math.round(Q/100*255).toString(16).padStart(2,"0");return`#${J}${Z}`}#xj(j){if(!(j instanceof HTMLElement))return"#888888";if(j.hexOpaque)return this.#Rj(j.hexOpaque);let J=j.value;if(typeof J==="string"&&J.startsWith("#"))return this.#Rj(J.length>7?J.slice(0,7):J);let Q=j.querySelector('fig-input-text:not([type="number"])'),Z=String(Q?.value??Q?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(Z))return`#${Z.toUpperCase()}`;let $=j.getAttribute("value");if(typeof $==="string"&&$.startsWith("#"))return this.#Rj($.length>7?$.slice(0,7):$);return"#888888"}#Rj(j){let J=String(j||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(J))return"#888888";return`#${J.toUpperCase()}`}#uj(j){let J=j.querySelector(".fig-fill-picker-stop-position"),Q=j.querySelector(".fig-fill-picker-stop-color"),Z=parseFloat(J?.value??J?.getAttribute("value")??"0")||0,$=this.#xj(Q),X=100;if(Q instanceof HTMLElement&&Q.rgba?.a!==void 0)X=Math.round(Q.rgba.a*100);else{let Y=parseInt(j.dataset.index,10);if(!isNaN(Y)&&this.#J.stops[Y])X=this.#J.stops[Y].opacity??100}return{position:Z,color:$,opacity:X}}#_j(j){let J=parseInt(j.dataset.index,10);if(isNaN(J)||J<0||J>=this.#J.stops.length)return;let Q={...this.#J.stops[J],...this.#uj(j)};this.#J.stops[J]=Q,this.#wj(j,Q)}#wj(j,J){let Q=j.querySelector(".fig-fill-picker-stop-position");if(Q)Q.setAttribute("value",String(J.position));let Z=j.querySelector(".fig-fill-picker-stop-color");if(Z)Z.setAttribute("value",this.#Bj(J))}#vj(j){let{oldIndex:J,newIndex:Q}=j.detail??{};if(J==null||Q==null||J===Q||J<0||Q<0||J>=this.#J.stops.length||Q>=this.#J.stops.length)return;let $=j.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");$.forEach((Y)=>this.#_j(Y));let[X]=this.#J.stops.splice(J,1);this.#J.stops.splice(Q,0,X),$.forEach((Y,W)=>{Y.dataset.index=String(W)}),this.#B=!0;try{this.#Zj(),this.#$j(),this.#z()}finally{this.#B=!1}}#P(){if(!this.#j)return;let j=this.#j.querySelector('[data-tab="gradient"]');if(!j)return;this.#J=M(this.#J);let J=I(this.#J),Q=j.querySelector(".fig-fill-picker-gradient-space");if(Q)Q.value=J;let Z=j.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(Z){let $=N.#$(J),X=Z.querySelector(`fig-segment[value="${J}"]`)||Z.querySelector(`fig-segment[data-space="${$.space}"]`);if(X){let Y=`${$.title} — ${$.subtitle}`;X.setAttribute("value",J),X.setAttribute("aria-label",Y);let W=X.closest("fig-tooltip");if(W)W.setAttribute("text",Y);Z.value=J}}this.#Zj(),this.#$j(),this.#yj()}#bj(){let j=Array.isArray(this.#J.stops)?[...this.#J.stops].sort((J,Q)=>(J.position??0)-(Q.position??0)):[];if(j.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return j.map((J)=>({color:String(J.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:J.position??0}))}#Zj(){if(!this.#j)return;let j=this.#bj();this.#j.querySelectorAll("fig-interpolation-swatch").forEach((J)=>{let Q=J.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",Z=C(Q),$={type:"linear",stops:j,interpolationSpace:Z.interpolationSpace};if(E.has(Z.interpolationSpace))$.hueInterpolation=Z.hueInterpolation;J.value={type:"gradient",gradient:$}})}#$j(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-bar-input");if(j)this.#B=!0,j.setAttribute("value",JSON.stringify({type:"gradient",gradient:P(this.#J)})),this.#B=!1;this.#U()}#yj(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-stops-list"),J=j?.querySelector("fig-reorder");if(!j||!J)return;let Q=J.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(Q.length===this.#J.stops.length){this.#J.stops.forEach((Z,$)=>{let X=Q[$];X.dataset.index=$;let Y=X.querySelector(".fig-fill-picker-stop-position");if(Y)Y.setAttribute("value",Z.position);let W=X.querySelector(".fig-fill-picker-stop-color");if(W)W.setAttribute("value",this.#Bj(Z));let U=X.querySelector(".fig-fill-picker-stop-remove");if(U)if(this.#J.stops.length<=2)U.setAttribute("disabled","");else U.removeAttribute("disabled")});return}this.#gj(j)}#gj(j){let J=j.querySelector("fig-reorder");if(!J)return;let Q=this.#J.stops.map((Z,$)=>q("fig-field",{className:"fig-fill-picker-gradient-stop-row","data-index":$},[q("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:Z.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.#Bj(Z)}),q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-stop-remove",disabled:this.#J.stops.length<=2,"aria-label":"Remove gradient stop"},F("minus"))]));J.replaceChildren(...Q),J.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((Z)=>{Z.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#_j(Z),this.#Zj(),this.#$j(),this.#z()});let $=Z.querySelector(".fig-fill-picker-stop-color"),X=$.querySelector("fig-fill-picker");if(X)X.anchorElement=this.#j;else this.#y(()=>{let W=$.querySelector("fig-fill-picker");if(W)W.anchorElement=this.#j});let Y=()=>{this.#_j(Z),this.#B=!0;try{this.#Zj(),this.#$j(),this.#z()}finally{this.#B=!1}};$.addEventListener("input",Y),$.addEventListener("change",Y),Z.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let W=parseInt(Z.dataset.index,10);if(this.#J.stops.length>2)this.#J.stops.splice(W,1),this.#P(),this.#z()})})}#Tj(j,J=!0){let Q=M({...this.#J,interpolationSpace:j??this.#J.interpolationSpace}),Z=this.#T==="display-p3",$=Q.stops.map((W)=>{let U=(W.opacity??100)/100;return`${Z?this.#nj(W.color,U):this.#ij(W.color,U)} ${W.position}%`}).join(", "),X=Jj(Q),Y=J&&X?` ${X}`:"";switch(Q.type){case"linear":return`linear-gradient(${Q.angle}deg${Y}, ${$})`;case"radial":return`radial-gradient(circle at ${Q.centerX}% ${Q.centerY}%${Y}, ${$})`;case"angular":return`conic-gradient(from ${Q.angle}deg${Y}, ${$})`;default:return`linear-gradient(${Q.angle}deg${Y}, ${$})`}}static#Fj=new Map;#Dj(j){let J=N.#Fj.get(j);if(J!==void 0)return J;let Q=document.createElement("div");Q.style.background=j;let Z=!!Q.style.background;return N.#Fj.set(j,Z),Z}#Cj(){let j=this.#Tj(void 0,!0);if(this.#Dj(j))return j;let J=this.#Tj("oklab",!0);if(this.#Dj(J))return J;return this.#Tj("oklab",!1)}#hj(){let j=this.#j.querySelector('[data-tab="image"]'),J=q("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#W.scaleMode},q("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([X,Y])=>q("fig-select-option",{value:X},Y)))),Q=q("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#W.scale,units:"%"});if(this.#W.scaleMode!=="tile")Q.style.display="none";let Z=q("fig-field",{className:"fig-fill-picker-media-header"},[J,Q]),$=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(Z,$),this.#mj(j)}#mj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),Q=j.querySelector(".fig-fill-picker-scale"),Z=j.querySelector(".fig-fill-picker-image-preview");J.addEventListener("change",($)=>{let X=typeof $.detail==="string"?$.detail:$.target?.value;if(!X)return;this.#W.scaleMode=X,Q.style.display=X==="tile"?"block":"none",this.#s(Z),this.#U(),this.#z()}),Q.addEventListener("input",($)=>{this.#W.scale=parseFloat($.target.value)||100,this.#s(Z),this.#U(),this.#z()}),Z.addEventListener("loaded",($)=>{let X=$.detail?.src||Z.src;if(!X)return;this.#W.url=X,this.#s(Z),this.#U(),this.#z()}),Z.addEventListener("change",()=>{if(Z.src)return;this.#W.url=null,this.#s(Z),this.#U(),this.#z()}),this.#s(Z)}#s(j){if(!this.#W.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.#W.url),j.classList.add("has-media"),j.style.backgroundImage="",j.style.backgroundPosition="",j.style.backgroundRepeat="",j.style.backgroundSize="",j.mediaEl?.style.removeProperty("opacity");let J=j.querySelector("fig-input-file[data-generated]");if(J)J.setAttribute("label","Replace"),J.removeAttribute("url");switch(this.#W.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.#W.url})`,j.style.backgroundPosition="top left",j.style.backgroundSize=`${this.#W.scale}%`,j.style.backgroundRepeat="repeat",j.mediaEl)j.mediaEl.style.opacity="0";break}}#Xj(j){if(j.tagName==="FIG-MEDIA"){if(!this.#O.url){j.removeAttribute("src"),j.classList.remove("has-media");return}j.setAttribute("src",this.#O.url),j.classList.add("has-media");let J=j.querySelector("fig-input-file[data-generated]");if(J)J.setAttribute("label","Replace"),J.removeAttribute("url");switch(this.#O.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.#O.scaleMode){case"fill":case"crop":j.style.objectFit="cover";break;case"fit":j.style.objectFit="contain";break}}#dj(){let j=this.#j.querySelector('[data-tab="video"]'),J=q("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#O.scaleMode},q("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([$,X])=>q("fig-select-option",{value:$},X)))),Q=q("fig-field",{className:"fig-fill-picker-media-header"},J),Z=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",autoplay:"true",controls:!0,muted:"true",loop:"true"});j.replaceChildren(Q,Z),this.#cj(j)}#cj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),Q=j.querySelector(".fig-fill-picker-video-preview");J.addEventListener("change",(Z)=>{let $=typeof Z.detail==="string"?Z.detail:Z.target?.value;if(!$)return;this.#O.scaleMode=$,this.#Xj(Q),this.#U(),this.#z()}),Q.addEventListener("loaded",(Z)=>{let $=Z.detail?.src||Q.src;if(!$)return;this.#O.url=$,this.#Xj(Q),Q.play?.(),this.#U(),this.#z()}),Q.addEventListener("change",()=>{if(Q.src)return;this.#O.url=null,this.#Xj(Q),this.#U(),this.#z()}),this.#Xj(Q)}#pj(){let j=this.#j.querySelector('[data-tab="webcam"]'),J=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")));J.style.display="none";let Q=q("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});Q.muted=!0;let Z=q("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},q("span",{},"Camera access required")),$=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"},[Q,Z]),X=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(J,$,X),this.#sj(j)}#sj(j){let J=j.querySelector(".fig-fill-picker-webcam-video"),Q=j.querySelector(".fig-fill-picker-webcam-status"),Z=j.querySelector(".fig-fill-picker-webcam-capture"),$=j.querySelector(".fig-fill-picker-webcam-camera"),X=j.querySelector(".fig-fill-picker-camera-select"),Y=(K)=>{if(K)Z.removeAttribute("disabled");else Z.setAttribute("disabled","")},W=()=>{let K=!!this.#q.stream&&J.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&J.videoWidth>0&&J.videoHeight>0;if(Y(K),K)Q.querySelector("span").textContent="Camera ready",Q.style.display="none"};J.addEventListener("loadedmetadata",W),J.addEventListener("canplay",W);let U=async(K=null)=>{this.#o();let O=this.#g;Y(!1),Q.querySelector("span").textContent="Starting camera",Q.style.display="flex";try{let z={video:K?{deviceId:{exact:K}}:!0},f=await navigator.mediaDevices.getUserMedia(z);if(O!==this.#g||!this.isConnected||this.#k!=="webcam"){f.getTracks().forEach((H)=>H.stop());return}this.#q.stream=f,J.srcObject=f,J.style.display="block",W();let L=await navigator.mediaDevices.enumerateDevices();if(O!==this.#g)return;let k=L.filter((H)=>H.kind==="videoinput");if(k.length>1){$.style.display="";let H=X.querySelector(":scope > fig-select-options");if(!H)H=document.createElement("fig-select-options"),X.append(H);if(H.replaceChildren(),k.forEach((_,y)=>{let G=document.createElement("fig-select-option");G.value=_.deviceId;let V=_.label||(k.length>1?`Camera ${y+1}`:"Camera");G.textContent=V.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(T,D)=>{return` ${/^\d+$/.test(D)?Number.parseInt(D,10).toString():D.replace(/^0+/,"")||"0"}`}),H.append(G)}),K)X.value=K}else $.style.display="none",X.querySelector(":scope > fig-select-options")?.replaceChildren()}catch(z){if(O!==this.#g)return;console.error("Webcam error:",z.name,z.message);let f="Camera access denied";if(z.name==="NotAllowedError")f="Camera permission denied";else if(z.name==="NotFoundError")f="No camera found";else if(z.name==="NotReadableError")f="Camera in use by another app";else if(z.name==="OverconstrainedError")f="Camera constraints not supported";else if(!window.isSecureContext)f="Camera requires secure context";Q.replaceChildren();let L=document.createElement("span");L.textContent=f,Q.appendChild(L),Q.style.display="flex",J.style.display="none",Y(!1)}};this.#Jj=U,X.addEventListener("change",(K)=>{let O=typeof K.detail==="string"?K.detail:K.target?.value;if(O)U(O)}),Z.addEventListener("click",async()=>{if(!this.#q.stream)return;if(!J.videoWidth||!J.videoHeight)return;let K=document.createElement("canvas");K.width=J.videoWidth,K.height=J.videoHeight,K.getContext("2d").drawImage(J,0,0,K.width,K.height);let O=await new Promise((L)=>K.toBlob(L,"image/png"));if(!O)return;if(this.#q.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#q.snapshot),this.#c.delete(this.#q.snapshot);this.#q.snapshot=URL.createObjectURL(O),this.#c.add(this.#q.snapshot),this.#W.url=this.#q.snapshot;let z=this.#j.querySelector(".fig-fill-picker-image-preview");if(z)this.#s(z);if(Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).some((L)=>L.dataset.tab==="image"))this.#F("image");else this.#U(),this.#z();this.#S()})}#Mj(j){let J=j.h/360,Q=j.s/100,Z=j.v/100,$,X,Y,W=Math.floor(J*6),U=J*6-W,K=Z*(1-Q),O=Z*(1-U*Q),z=Z*(1-(1-U)*Q);switch(W%6){case 0:$=Z,X=z,Y=K;break;case 1:$=O,X=Z,Y=K;break;case 2:$=K,X=Z,Y=z;break;case 3:$=K,X=O,Y=Z;break;case 4:$=z,X=K,Y=Z;break;case 5:$=Z,X=K,Y=O;break}return{r:Math.round($*255),g:Math.round(X*255),b:Math.round(Y*255)}}#e(j){let J=j.r/255,Q=j.g/255,Z=j.b/255,$=Math.max(J,Q,Z),X=Math.min(J,Q,Z),Y=$-X,W=0,U=$===0?0:Y/$,K=$;if($!==X){switch($){case J:W=(Q-Z)/Y+(Q<Z?6:0);break;case Q:W=(Z-J)/Y+2;break;case Z:W=(J-Q)/Y+4;break}W/=6}return{h:W*360,s:U*100,v:K*100,a:1}}#h(j){if(!j||typeof j.h!=="number"||typeof j.s!=="number"||typeof j.v!=="number")return"#D9D9D9";let J=this.#Mj(j),Q=(Z)=>{return(isNaN(Z)?217:Math.max(0,Math.min(255,Math.round(Z)))).toString(16).padStart(2,"0")};return`#${Q(J.r)}${Q(J.g)}${Q(J.b)}`}#jj(j){let J=parseInt(j.slice(1,3),16),Q=parseInt(j.slice(3,5),16),Z=parseInt(j.slice(5,7),16);return this.#e({r:J,g:Q,b:Z})}#ij(j,J=1){let Q=parseInt(j.slice(1,3),16),Z=parseInt(j.slice(3,5),16),$=parseInt(j.slice(5,7),16);return`rgba(${Q}, ${Z}, ${$}, ${J})`}#rj(j){let J=Math.max(0,Math.min(1,Number(j)||0)),Q=Math.round(J*1000)/1000;return String(Q)}#lj(j=this.#Q){let J=this.#Mj(j);return`rgba(${J.r}, ${J.g}, ${J.b}, ${this.#rj(j.a)})`}#oj(j){let J=String(j??"").trim();if(!J)return null;let Q=J.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(Q){let $=Q[1];if($.length===3)$=$[0]+$[0]+$[1]+$[1]+$[2]+$[2];let X=1;if($.length===8)X=parseInt($.slice(6,8),16)/255,$=$.slice(0,6);return{...this.#jj(`#${$}`),a:X}}let Z=J.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if(Z){let $=Math.max(0,Math.min(255,Math.round(parseFloat(Z[1])))),X=Math.max(0,Math.min(255,Math.round(parseFloat(Z[2])))),Y=Math.max(0,Math.min(255,Math.round(parseFloat(Z[3])))),W=Z[4]!==void 0?Math.max(0,Math.min(1,parseFloat(Z[4]))):1;if(![$,X,Y,W].every(Number.isFinite))return null;return{...this.#e({r:$,g:X,b:Y}),a:W}}return null}#nj(j,J=1){let Q=+(parseInt(j.slice(1,3),16)/255).toFixed(4),Z=+(parseInt(j.slice(3,5),16)/255).toFixed(4),$=+(parseInt(j.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${Q} ${Z} ${$} / ${J})`}#aj(j){let J=j.r/255,Q=j.g/255,Z=j.b/255,$=Math.max(J,Q,Z),X=Math.min(J,Q,Z),Y,W,U=($+X)/2;if($===X)Y=W=0;else{let K=$-X;switch(W=U>0.5?K/(2-$-X):K/($+X),$){case J:Y=((Q-Z)/K+(Q<Z?6:0))/6;break;case Q:Y=((Z-J)/K+2)/6;break;case Z:Y=((J-Q)/K+4)/6;break}}return{h:Y*360,s:W*100,l:U*100}}#tj(j){let J=j.h/360,Q=j.s/100,Z=j.l/100,$,X,Y;if(Q===0)$=X=Y=Z;else{let W=(O,z,f)=>{if(f<0)f+=1;if(f>1)f-=1;if(f<0.16666666666666666)return O+(z-O)*6*f;if(f<0.5)return z;if(f<0.6666666666666666)return O+(z-O)*(0.6666666666666666-f)*6;return O},U=Z<0.5?Z*(1+Q):Z+Q-Z*Q,K=2*Z-U;$=W(K,U,J+0.3333333333333333),X=W(K,U,J),Y=W(K,U,J-0.3333333333333333)}return{r:Math.round($*255),g:Math.round(X*255),b:Math.round(Y*255)}}#Ej(j){let J=(z)=>{return z=z/255,z<=0.04045?z/12.92:Math.pow((z+0.055)/1.055,2.4)},Q=J(j.r),Z=J(j.g),$=J(j.b),X=0.4122214708*Q+0.5363325363*Z+0.0514459929*$,Y=0.2119034982*Q+0.6806995451*Z+0.1073969566*$,W=0.0883024619*Q+0.2817188376*Z+0.6299787005*$,U=Math.cbrt(X),K=Math.cbrt(Y),O=Math.cbrt(W);return{l:0.2104542553*U+0.793617785*K-0.0040720468*O,a:1.9779984951*U-2.428592205*K+0.4505937099*O,b:0.0259040371*U+0.7827717662*K-0.808675766*O}}#ej(j){let J=this.#Ej(j);return{l:J.l,c:Math.sqrt(J.a*J.a+J.b*J.b),h:(Math.atan2(J.b,J.a)*180/Math.PI+360)%360}}#Aj(j){let J=j.l+0.3963377774*j.a+0.2158037573*j.b,Q=j.l-0.1055613458*j.a-0.0638541728*j.b,Z=j.l-0.0894841775*j.a-1.291485548*j.b,$=J*J*J,X=Q*Q*Q,Y=Z*Z*Z,W=(U)=>{let K=U<=0.0031308?12.92*U:1.055*Math.pow(U,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,K))*255)};return{r:W(4.0767416621*$-3.3077115913*X+0.2309699292*Y),g:W(-1.2684380046*$+2.6097574011*X-0.3413193965*Y),b:W(-0.0041960863*$-0.7034186147*X+1.707614701*Y)}}#jJ(j){let J=j.h*Math.PI/180;return this.#Aj({l:j.l,a:j.c*Math.cos(J),b:j.c*Math.sin(J)})}#z(){if(this.#w())return;this.#U(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#S(){if(this.#w())return;this.#C=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let j={type:this.#K,colorSpace:this.#T};switch(this.#K){case"solid":return{...j,color:this.#h(this.#Q),alpha:this.#Q.a,hsv:{...this.#Q}};case"gradient":return{...j,gradient:P(this.#J),css:this.#Cj()};case"image":return{...j,image:{...this.#W}};case"video":return{...j,video:{...this.#O}};case"webcam":return{...j,image:{url:this.#q.snapshot,scaleMode:"fill",scale:50}};default:return{...j,...this.#I[this.#K]}}}set value(j){if(typeof j==="string")this.setAttribute("value",j);else this.setAttribute("value",JSON.stringify(j))}attributeChangedCallback(j,J,Q){if(J===Q)return;switch(j){case"value":if(this.#v(),this.#U(),this.#j?.open&&!this.#N)this.#kj(),this.#C=JSON.stringify(this.value);break;case"disabled":if(this.#E(),this.#w()&&this.#j?.open)this.close();break;case"alpha":case"mode":{if(!this.#j)break;let Z=this.#j.open;if(this.#Qj(),Z&&this.isConnected)this.#l();break}case"aria-label":if(this.#j)this.#j.setAttribute("aria-label",this.#r());case"aria-labelledby":case"aria-describedby":this.#E();break}}}A("fig-fill-picker",N);class B extends HTMLElement{static#Z=new Set(["oklch","hsl"]);static#$=10;static#X=10;static#Y=8;static#j=3;static#_=210;static#k={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#K=!1;#T=null;#Q=null;#f={...B.#k};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#f}}}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.#J(),this.#W(),this.#x(),this.#u()}attributeChangedCallback(j,J,Q){if(J===Q)return;if(j!=="value")return;if(this.#W(),this.#K)this.#u()}#J(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#W(){let j=this.getAttribute("value");if(!j){this.#f={...B.#k,stops:B.#k.stops.map((J)=>({...J}))};return}try{let J=JSON.parse(j),Q=J?.type==="gradient"&&J.gradient?J.gradient:J?.gradient?J.gradient:J;if(!Q||typeof Q!=="object")return;this.#f=this.#O({...B.#k,...Q})}catch{}}#O(j){let J={...j??{}},Q=String(J.interpolationSpace??"srgb").toLowerCase(),Z=String(J.hueInterpolation??"shorter").toLowerCase(),$=Array.isArray(J.stops)?J.stops.map((X)=>({color:String(X?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:X?.position??0,opacity:X?.opacity??100})):B.#k.stops.map((X)=>({...X}));if($.length<2)return{...B.#k,stops:B.#k.stops.map((X)=>({...X}))};return{type:["linear","radial","angular"].includes(J.type)?J.type:"linear",angle:Number.isFinite(Number(J.angle))?Number(J.angle):135,interpolationSpace:Q,hueInterpolation:Z,stops:$}}#q(){return B.#Z.has(this.#f.interpolationSpace||"srgb")}#V(j){let{r:J,g:Q,b:Z}=p(j);if(this.#f.interpolationSpace==="hsl")return s(J,Q,Z).h;let $=i(J,Q,Z);return(r($.l,$.a,$.b).h%360+360)%360}#I(){let j=this.#N(),J=this.#V(j[0]?.color||"#FF0000"),Q=this.#V(j[j.length-1]?.color||"#4F9EFF"),Z=B.#_-J,X=((B.#_-Q-Z)%360+360)%360,Y=X===0?0:X-360,W=this.#f.hueInterpolation||"shorter",U;if(W==="increasing")U=Y;else if(W==="decreasing")U=X;else if(W==="longer")U=X<180?Y:X;else U=X<=180?X:Y;let K=Math.sign(U),O=Math.asin(B.#j/2/B.#Y)*180/Math.PI,z=Math.min(O,Math.max(0,(Math.abs(U)-0.01)/2));return{startDeg:Z+K*z,sweepDeg:U-K*z*2}}#L(j){let J=j*Math.PI/180;return{x:B.#$+B.#Y*Math.cos(J),y:B.#X+B.#Y*Math.sin(J)}}#G(j,J){let Q=j+J,Z=this.#L(j),$=this.#L(Q),X=Math.abs(J)>180?1:0,Y=J>=0?1:0;return`M ${Z.x} ${Z.y} A ${B.#Y} ${B.#Y} 0 ${X} ${Y} ${$.x} ${$.y}`}#M(){let j=this.#L(180),J=this.#L(0);return`M ${j.x} ${j.y} L ${J.x} ${J.y}`}#H(j){let J=B.#j,Q=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${j}" fill="none" stroke="white" stroke-width="${J}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent(Q)}")`}#N(){return[...this.#f.stops].sort((j,J)=>(j.position??0)-(J.position??0))}#B(){let j=this.#f.interpolationSpace||"srgb";if(j==="srgb")return"";if(B.#Z.has(j))return` in ${j} ${this.#f.hueInterpolation||"shorter"} hue`;return` in ${j}`}#R(){let j=this.#N(),J=this.#B();if(this.#q()){let Z=(B.#_+90)%360,$=this.#f.interpolationSpace,X=(W)=>$==="oklch"?`oklch(65% 0.25 ${W})`:`hsl(${W} 100% 50%)`,Y=[0,300,240,180,120,60,0].map(X).join(", ");return`conic-gradient(from ${Z}deg in ${$} decreasing hue, ${Y})`}let Q=j.map((Z)=>`${Z.color} ${Z.position??0}%`).join(", ");return`linear-gradient(90deg${J}, ${Q})`}#x(){if(this.#K)return;let j=B.#j,J=u("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},u("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":j})),Q=q("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren(J,Q),this.#T=J,this.#Q=Q,this.#K=!0}#u(){if(!this.#Q)return;let j=this.#q();if(this.#T)this.#T.style.display=j?"":"none";let J=j?(()=>{let{startDeg:Z,sweepDeg:$}=this.#I();return this.#G(Z,$)})():this.#M(),Q=this.#H(J);this.#Q.style.setProperty("-webkit-mask-image",Q),this.#Q.style.maskImage=Q,this.#Q.style.background=this.#R()}}A("fig-interpolation-swatch",B);