@rogieking/figui3/dist/fig-editor.js

A lightweight web components library for building Figma plugin and widget UIs with native look and feel

var N=["srgb","srgb-linear","display-p3","oklab","oklch"],f=["shorter","longer","increasing","decreasing"];function O(j){let Q={...j??{}},X=String(Q.interpolationSpace??"oklab").toLowerCase();if(!N.includes(X))X="oklab";if(X==="srgb"||X==="display-p3")X="oklab";Q.interpolationSpace=X;let Y=String(Q.hueInterpolation??"shorter").toLowerCase();return Q.hueInterpolation=f.includes(Y)?Y:"shorter",Q}function V(j){let Q=O(j),X={...Q,interpolationSpace:Q.interpolationSpace};if(Q.interpolationSpace==="oklch")X.hueInterpolation=Q.hueInterpolation;else delete X.hueInterpolation;return X}function D(j){let Q=O(j);if(Q.interpolationSpace==="oklch")return`in oklch ${Q.hueInterpolation} hue`;return`in ${Q.interpolationSpace}`}class M extends HTMLElement{#E=null;#Z=null;#j=null;#b="solid";anchorElement=null;#U="solid";#L="srgb";#X={h:0,s:0,v:85,a:1};#H="hex";#Q={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#$={url:null,scaleMode:"fill",scale:50};#J={url:null,scaleMode:"fill",scale:50};#K={stream:null,snapshot:null};#R={};#S={};#q=null;#B=null;#M=null;#k=null;#F=!1;#V=null;#T=null;#P=null;constructor(){super()}static get observedAttributes(){return["value","disabled","alpha","mode","experimental"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#o(),this.#h(),this.#W()})}disconnectedCallback(){if(this.#V)this.#V(),this.#V=null;if(this.#T)this.#T.disconnect(),this.#T=null;if(this.#P)this.#P.disconnect(),this.#P=null;if(this.#K.stream)this.#K.stream.getTracks().forEach((j)=>j.stop()),this.#K.stream=null;if(this.#K.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#K.snapshot),this.#K.snapshot=null;if(this.#J.url&&this.#J.url.startsWith("blob:"))URL.revokeObjectURL(this.#J.url);if(this.#Z)this.#Z.removeAttribute("selected");if(this.#j)this.#j.close(),this.#j.remove(),this.#j=null}#o(){let j=Array.from(this.children).find((Q)=>!Q.getAttribute("slot")?.startsWith("mode-"));if(!j)this.#Z=document.createElement("fig-chit"),this.#Z.setAttribute("background","#D9D9D9"),this.appendChild(this.#Z),this.#E=this.#Z;else if(j.tagName==="FIG-CHIT")this.#Z=j,this.#E=j;else this.#E=j,this.#Z=null;if(this.#E.addEventListener("click",(Q)=>{if(this.hasAttribute("disabled"))return;Q.stopPropagation(),Q.preventDefault(),this.#m()}),this.#Z)requestAnimationFrame(()=>{let Q=this.#Z.querySelector('input[type="color"]');if(Q)Q.style.pointerEvents="none"})}#h(){let j=this.getAttribute("value");if(!j)return;let Q=["solid","gradient","image","video","webcam"];try{let X=JSON.parse(j);if(X.type)this.#U=X.type;if(X.color){if(typeof X.color==="string")this.#X=this.#I(X.color);else if(typeof X.color==="object"&&X.color.h!==void 0)this.#X=X.color}if(X.opacity!==void 0)this.#X.a=X.opacity/100;if(X.colorSpace==="display-p3"||X.colorSpace==="srgb")this.#L=X.colorSpace;if(X.gradient)this.#Q=O({...this.#Q,...X.gradient});if(X.image)this.#$={...this.#$,...X.image};if(X.video)this.#J={...this.#J,...X.video};if(X.type&&!Q.includes(X.type)){let{type:Y,...Z}=X;this.#S[X.type]=Z}}catch(X){if(j.startsWith("#"))this.#U="solid",this.#X=this.#I(j)}}#W(){if(!this.#Z)return;let j,Q="cover",X="center";switch(this.#U){case"solid":j=this.#O(this.#X);break;case"gradient":j=this.#l();break;case"image":if(this.#$.url){j=`url(${this.#$.url})`;let Z=this.#u(this.#$.scaleMode,this.#$.scale);Q=Z.size,X=Z.position}else j="";break;case"video":if(this.#J.url){j=`url(${this.#J.url})`;let Z=this.#u(this.#J.scaleMode,this.#J.scale);Q=Z.size,X=Z.position}else j="";break;default:j=this.#R[this.#U]?.element?.getAttribute("chit-background")||"#D9D9D9"}if(this.#Z.setAttribute("background",j),this.#Z.style.setProperty("--chit-bg-size",Q),this.#Z.style.setProperty("--chit-bg-position",X),this.#U==="solid")this.#Z.setAttribute("alpha",this.#X.a);else this.#Z.removeAttribute("alpha")}#u(j,Q){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:`${Q}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#m(){if(!this.#j)this.#t();this.#x(this.#U);let j=this.#j.querySelector(".fig-fill-picker-gamut");if(j)j.value=this.#L;if(this.#Z)this.#Z.setAttribute("selected","true");this.#j.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#D(),this.#_()})})}open(){this.#m()}close(){if(this.#j)this.#j.open=!1}#t(){this.#R={},this.querySelectorAll('[slot^="mode-"]').forEach((_)=>{let R=_.getAttribute("slot").slice(5);this.#R[R]={element:_,label:_.getAttribute("label")||R.charAt(0).toUpperCase()+R.slice(1)}}),this.#j=document.createElement("dialog",{is:"fig-popup"}),this.#j.setAttribute("is","fig-popup"),this.#j.setAttribute("drag","true"),this.#j.setAttribute("handle","fig-header"),this.#j.setAttribute("autoresize","false"),this.#j.classList.add("fig-fill-picker-dialog"),this.#j.anchor=this.anchorElement||this.#E;let j=this.getAttribute("dialog-position")||"left";this.#j.setAttribute("position",j),this.#j.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Q=["solid","gradient","image","video","webcam"],X={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},Y=this.getAttribute("mode"),Z;if(Y){if(Z=Y.split(",").map((R)=>R.trim().toLowerCase()).filter((R)=>Q.includes(R)||this.#R[R]),Z.length===0)Z=[...Q]}else Z=[...Q];let $={...X};for(let[_,{label:R}]of Object.entries(this.#R))$[_]=R;if(!Z.includes(this.#U))this.#U=Z[0],this.#b=Z[0];let J=this.getAttribute("experimental"),U=J?`experimental="${J}"`:"",L;if(Z.length===1)L=`<h3 class="fig-fill-picker-type-label">${$[Z[0]]}</h3>`;else{let _=Z.map((R)=>`<option value="${R}">${$[R]}</option>`).join(`
          `);L=`<fig-dropdown class="fig-fill-picker-type" ${U} value="${this.#U}">
          ${_}
        </fig-dropdown>`}let K=Z.map((_)=>`<div class="fig-fill-picker-tab" data-tab="${_}"></div>`).join(`
        `),q=`<fig-dropdown class="fig-fill-picker-gamut" ${U} value="${this.#L}">
          <option value="srgb">sRGB</option>
          <option value="display-p3">Display P3</option>
        </fig-dropdown>`;this.#j.innerHTML=`
      <fig-header>
        ${L}
        ${q}
        <fig-button icon variant="ghost" class="fig-fill-picker-close">
          <fig-icon name="close"></fig-icon>
        </fig-button>
      </fig-header>
      <fig-content>
        ${K}
      </fig-content>
    `,document.body.appendChild(this.#j);for(let[_,{element:R}]of Object.entries(this.#R)){let B=this.#j.querySelector(`[data-tab="${_}"]`);if(!B)continue;while(R.firstChild)B.appendChild(R.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:_,container:B}}))}let W=this.#j.querySelector(".fig-fill-picker-type");if(W)W.addEventListener("change",(_)=>{this.#x(_.target.value)});let z=this.#j.querySelector(".fig-fill-picker-gamut");if(z){let _=(R)=>{let B=R.currentTarget?.value??R.target?.value??R.detail;if(B&&B!==this.#L)this.#L=B,this.#e()};z.addEventListener("input",_),z.addEventListener("change",_)}this.#j.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#j.open=!1});let k=()=>{if(this.#Z)this.#Z.removeAttribute("selected");this.#z(),this.dispatchEvent(new CustomEvent("close"))};this.#j.addEventListener("close",k),this.#T=new MutationObserver(()=>{if(!(this.#j.hasAttribute("open")&&this.#j.getAttribute("open")!=="false"))k()}),this.#T.observe(this.#j,{attributes:!0,attributeFilter:["open"]});let F={solid:()=>this.#a(),gradient:()=>this.#Xj(),image:()=>this.#$j(),video:()=>this.#Kj(),webcam:()=>this.#Uj()};for(let[_,R]of Object.entries(F))if(!this.#R[_]&&Z.includes(_))R();for(let _ of Object.keys(this.#R)){if(Q.includes(_))continue;let R=this.#j.querySelector(`[data-tab="${_}"]`);if(!R)continue;R.addEventListener("input",(B)=>{if(B.target===this)return;if(B.stopPropagation(),B.detail)this.#S[_]=B.detail;this.#Y()}),R.addEventListener("change",(B)=>{if(B.target===this)return;if(B.stopPropagation(),B.detail)this.#S[_]=B.detail;this.#z()})}}#x(j){let Q=this.#j?.querySelector(`.fig-fill-picker-tab[data-tab="${j}"]`);if(!Q)return;this.#b=j,this.#U=j;let X=this.#j.querySelector(".fig-fill-picker-type");if(X&&X.value!==j)X.value=j;this.#j.querySelectorAll(".fig-fill-picker-tab").forEach(($)=>{if($.dataset.tab===j)$.style.display="block";else $.style.display="none"});let Z=this.#j.querySelector("fig-content");if(Z)Z.style.padding=this.#R[j]?"0":"";if(j==="gradient")requestAnimationFrame(()=>{this.#N();let $=Q.querySelector(".fig-fill-picker-gradient-bar-input");$?.refreshLayout?.(),requestAnimationFrame(()=>{$?.refreshLayout?.()})});this.#W(),this.#Y()}#a(){let j=this.#j.querySelector('[data-tab="solid"]'),Q=this.getAttribute("alpha")!=="false",X=this.getAttribute("experimental"),Y=X?`experimental="${X}"`:"";if(j.innerHTML=`
      <fig-preview class="fig-fill-picker-color-area">
        <canvas width="200" height="200"></canvas>
        <fig-handle
          type="color"
          color="${this.#O({...this.#X,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">
        <fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper"><fig-icon name="eyedropper"></fig-icon></fig-button></fig-tooltip>
        <fig-slider type="hue" text="false" min="0" max="360" value="${this.#X.h}"></fig-slider>
        ${Q?`<fig-slider type="opacity" text="true" units="%" min="0" max="100" value="${this.#X.a*100}" color="${this.#O(this.#X)}"></fig-slider>`:""}
      </div>
      <fig-field class="fig-fill-picker-inputs">
        <fig-dropdown class="fig-fill-picker-input-mode" ${Y} value="${this.#H}">
          <option value="hex">Hex</option>
          <option value="rgb">RGB</option>
          <option value="hsl">HSL</option>
          <option value="hsb">HSB</option>
          <option value="lab">LAB</option>
          <option value="lch">LCH</option>
        </fig-dropdown>
        <span class="fig-fill-picker-input-fields"></span>
      </fig-field>
    `,this.#q=j.querySelector("canvas"),this.#B=j.querySelector("fig-handle"),this.#D(),this.#_(),this.#s(),this.#M=j.querySelector('fig-slider[type="hue"]'),this.#M.addEventListener("input",(J)=>{this.#X.h=parseFloat(J.target.value),this.#D(),this.#_(),this.#G(),this.#Y()}),this.#M.addEventListener("change",()=>{this.#z()}),Q)this.#k=j.querySelector('fig-slider[type="opacity"]'),this.#k.addEventListener("input",(J)=>{this.#X.a=parseFloat(J.target.value)/100,this.#G(),this.#Y()}),this.#k.addEventListener("change",()=>{this.#z()});j.querySelector(".fig-fill-picker-input-mode").addEventListener("input",(J)=>{this.#H=J.target.value,this.#g()}),this.#g();let $=j.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)$.addEventListener("click",async()=>{try{let U=await new EyeDropper().open();this.#X={...this.#I(U.sRGBHex),a:this.#X.a},this.#D(),this.#_(),this.#G(),this.#Y()}catch(J){}});else $.setAttribute("disabled",""),$.title="EyeDropper not supported in this browser"}#e(){let j=this.#j?.querySelector('[data-tab="solid"]');if(j){let Q=j.querySelector("canvas");if(Q){let X=document.createElement("canvas");X.width=Q.width,X.height=Q.height,Q.replaceWith(X),this.#q=X,this.#s()}this.#D(),this.#_()}this.#f(),this.#Y()}#D(){if(!this.#q&&this.#j)this.#q=this.#j.querySelector('[data-tab="solid"] canvas');if(!this.#q)return;let j=this.#L==="display-p3"?"display-p3":"srgb",Q=this.#q.getContext("2d",{colorSpace:j});if(!Q)return;let X=this.#q.width,Y=this.#q.height;Q.clearRect(0,0,X,Y);let Z=this.#X.h,$=this.#L==="display-p3",J=Q.createLinearGradient(0,0,X,0);if($){J.addColorStop(0,"color(display-p3 1 1 1)");let[L,K,q]=hslToP3(Z,100,50);J.addColorStop(1,`color(display-p3 ${L} ${K} ${q})`)}else J.addColorStop(0,"#FFFFFF"),J.addColorStop(1,`hsl(${Z}, 100%, 50%)`);Q.fillStyle=J,Q.fillRect(0,0,X,Y);let U=Q.createLinearGradient(0,0,0,Y);U.addColorStop(0,"rgba(0,0,0,0)"),U.addColorStop(1,"rgba(0,0,0,1)"),Q.fillStyle=U,Q.fillRect(0,0,X,Y)}#_(j=0){if(!this.#B||!this.#q)return;let Q=this.#q.getBoundingClientRect();if((Q.width===0||Q.height===0)&&j<5){requestAnimationFrame(()=>this.#_(j+1));return}let X=Math.max(0,Math.min(100,this.#X.s)),Y=Math.max(0,Math.min(100,100-this.#X.v));this.#B.setAttribute("value",`${X}% ${Y}%`),this.#B.setAttribute("color",this.#O({...this.#X,a:1}))}#w(j,Q,X={}){let{updateHandle:Y=!0,emitInput:Z=!0,emitChange:$=!1}=X;if(this.#X.s=Math.max(0,Math.min(100,j*100)),this.#X.v=Math.max(0,Math.min(100,(1-Q)*100)),this.#B)this.#B.setAttribute("color",this.#O({...this.#X,a:1}));if(Y)this.#_();if(this.#G(),Z)this.#Y();if($)this.#z()}#s(){if(this.#V)this.#V(),this.#V=null;if(!this.#q||!this.#B)return;let j=this.#q.parentElement||this.#q,Q=this.#B,X=!1,Y=(K,q={})=>{let W=j.getBoundingClientRect();if(W.width===0||W.height===0)return;let z=Math.max(0,Math.min(K.clientX-W.left,W.width)),k=Math.max(0,Math.min(K.clientY-W.top,W.height));this.#w(z/W.width,k/W.height,q)},Z=(K)=>{if(K.button!==0)return;if(K.target===Q||Q.contains(K.target))return;X=!0,this.#F=!0,j.setPointerCapture(K.pointerId),Y(K,{updateHandle:!0,emitInput:!0})},$=(K)=>{if(!X)return;if(K.buttons===0){J();return}Y(K,{updateHandle:!0,emitInput:!0})},J=()=>{if(!X)return;X=!1,this.#F=!1,this.#z()},U=(K)=>{this.#F=!0;let q=K.detail?.px,W=K.detail?.py;if(!Number.isFinite(q)||!Number.isFinite(W))return;Q.setAttribute("value",`${q*100}% ${W*100}%`),this.#w(q,W,{updateHandle:!1,emitInput:!0})},L=(K)=>{let q=K.detail?.px,W=K.detail?.py;if(Number.isFinite(q)&&Number.isFinite(W))Q.setAttribute("value",`${q*100}% ${W*100}%`),this.#w(q,W,{updateHandle:!1,emitInput:!1});this.#F=!1,this.#z()};j.addEventListener("pointerdown",Z),j.addEventListener("pointermove",$),j.addEventListener("pointerup",J),j.addEventListener("pointercancel",J),j.addEventListener("lostpointercapture",J),Q.addEventListener("input",U),Q.addEventListener("change",L),this.#V=()=>{j.removeEventListener("pointerdown",Z),j.removeEventListener("pointermove",$),j.removeEventListener("pointerup",J),j.removeEventListener("pointercancel",J),j.removeEventListener("lostpointercapture",J),Q.removeEventListener("input",U),Q.removeEventListener("change",L),this.#F=!1}}#g(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let Q=(Z,$)=>`<fig-tooltip text="${Z}">${$}</fig-tooltip>`,X=(Z,$,J,U)=>`<fig-input-number class="${Z}" min="${$}" max="${J}"${U!=null?` step="${U}"`:""}></fig-input-number>`,Y;switch(this.#H){case"rgb":Y=`<div class="input-combo">
          ${Q("Red",X("fig-fill-picker-ci-r",0,255))}
          ${Q("Green",X("fig-fill-picker-ci-g",0,255))}
          ${Q("Blue",X("fig-fill-picker-ci-b",0,255))}
        </div>`;break;case"hsl":Y=`<div class="input-combo">
          ${Q("Hue",X("fig-fill-picker-ci-h",0,360))}
          ${Q("Saturation",X("fig-fill-picker-ci-s",0,100))}
          ${Q("Lightness",X("fig-fill-picker-ci-l",0,100))}
        </div>`;break;case"hsb":Y=`<div class="input-combo">
          ${Q("Hue",X("fig-fill-picker-ci-h",0,360))}
          ${Q("Saturation",X("fig-fill-picker-ci-s",0,100))}
          ${Q("Brightness",X("fig-fill-picker-ci-v",0,100))}
        </div>`;break;case"lab":Y=`<div class="input-combo">
          ${Q("Lightness",X("fig-fill-picker-ci-okl",0,100))}
          ${Q("Green-Red axis",X("fig-fill-picker-ci-oka",-0.4,0.4,0.001))}
          ${Q("Blue-Yellow axis",X("fig-fill-picker-ci-okb",-0.4,0.4,0.001))}
        </div>`;break;case"lch":Y=`<div class="input-combo">
          ${Q("Lightness",X("fig-fill-picker-ci-okl",0,100))}
          ${Q("Chroma",X("fig-fill-picker-ci-okc",0,0.4,0.001))}
          ${Q("Hue",X("fig-fill-picker-ci-okh",0,360))}
        </div>`;break;default:Y='<fig-input-text class="fig-fill-picker-ci-hex" placeholder="FFFFFF"></fig-input-text>';break}j.innerHTML=Y,this.#jj(),requestAnimationFrame(()=>this.#G())}#jj(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let Q=()=>{if(this.#F)return;let Z=this.#Qj();if(!Z)return;if(this.#X={...Z,a:this.#X.a},this.#D(),this.#_(),this.#M)this.#M.setAttribute("value",this.#X.h);this.#Y()},X=()=>this.#z();j.querySelectorAll("fig-input-number, fig-input-text").forEach((Z)=>{Z.addEventListener("input",Q),Z.addEventListener("change",X)})}#Qj(){let j=(X)=>this.#j?.querySelector(`.${X}`),Q=(X)=>parseFloat(j(X)?.value??0);switch(this.#H){case"rgb":return this.#A({r:Q("fig-fill-picker-ci-r"),g:Q("fig-fill-picker-ci-g"),b:Q("fig-fill-picker-ci-b")});case"hsl":{let X=this.#zj({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),l:Q("fig-fill-picker-ci-l")});return this.#A(X)}case"hsb":return{h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),v:Q("fig-fill-picker-ci-v"),a:1};case"lab":{let X=this.#n({l:Q("fig-fill-picker-ci-okl")/100,a:Q("fig-fill-picker-ci-oka"),b:Q("fig-fill-picker-ci-okb")});return this.#A(X)}case"lch":{let X=this.#kj({l:Q("fig-fill-picker-ci-okl")/100,c:Q("fig-fill-picker-ci-okc"),h:Q("fig-fill-picker-ci-okh")});return this.#A(X)}default:{let X=j("fig-fill-picker-ci-hex");if(!X)return null;let Y=X.value.replace(/^#/,"");if(Y.length===3)Y=Y[0]+Y[0]+Y[1]+Y[1]+Y[2]+Y[2];if(Y.length!==6||!/^[0-9a-fA-F]{6}$/.test(Y))return null;return this.#I(`#${Y}`)}}}#G(){if(!this.#j)return;let j=this.#O(this.#X),Q=this.#i(this.#X),X=(Z)=>this.#j.querySelector(`.${Z}`),Y=(Z,$)=>{let J=X(Z);if(J)J.setAttribute("value",$)};switch(this.#H){case"rgb":Y("fig-fill-picker-ci-r",Q.r),Y("fig-fill-picker-ci-g",Q.g),Y("fig-fill-picker-ci-b",Q.b);break;case"hsl":{let Z=this.#_j(Q);Y("fig-fill-picker-ci-h",Math.round(Z.h)),Y("fig-fill-picker-ci-s",Math.round(Z.s)),Y("fig-fill-picker-ci-l",Math.round(Z.l));break}case"hsb":Y("fig-fill-picker-ci-h",Math.round(this.#X.h)),Y("fig-fill-picker-ci-s",Math.round(this.#X.s)),Y("fig-fill-picker-ci-v",Math.round(this.#X.v));break;case"lab":{let Z=this.#r(Q);Y("fig-fill-picker-ci-okl",Math.round(Z.l*100)),Y("fig-fill-picker-ci-oka",+Z.a.toFixed(3)),Y("fig-fill-picker-ci-okb",+Z.b.toFixed(3));break}case"lch":{let Z=this.#Bj(Q);Y("fig-fill-picker-ci-okl",Math.round(Z.l*100)),Y("fig-fill-picker-ci-okc",+Z.c.toFixed(3)),Y("fig-fill-picker-ci-okh",Math.round(Z.h));break}default:Y("fig-fill-picker-ci-hex",j.replace(/^#/,"").toUpperCase());break}if(this.#k)this.#k.setAttribute("color",j);this.#W()}#Xj(){let j=this.#j.querySelector('[data-tab="gradient"]'),Q=this.getAttribute("experimental"),X=Q?`experimental="${Q}"`:"";j.innerHTML=`
      <fig-field class="fig-fill-picker-gradient-header">
        <fig-dropdown class="fig-fill-picker-gradient-type" ${X} value="${this.#Q.type}">
          <option value="linear" selected>Linear</option>
          <option value="radial">Radial</option>
          <option value="angular">Angular</option>
        </fig-dropdown>
        <fig-tooltip text="Rotate gradient">
          <fig-input-number class="fig-fill-picker-gradient-angle" value="${(this.#Q.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" value="${this.#Q.centerX}" units="%" class="fig-fill-picker-gradient-cx"></fig-input-number>
          <fig-input-number min="0" max="100" value="${this.#Q.centerY}" units="%" class="fig-fill-picker-gradient-cy"></fig-input-number>
        </div>
        <fig-tooltip text="Flip gradient">
          <fig-button icon variant="ghost" class="fig-fill-picker-gradient-flip">
            <fig-icon name="swap"></fig-icon>
          </fig-button>
        </fig-tooltip>
      </fig-field>
      <fig-preview class="fig-fill-picker-gradient-preview">
        <fig-input-gradient class="fig-fill-picker-gradient-bar-input" edit="true" size="large" value='${JSON.stringify({type:"gradient",gradient:V(this.#Q)})}'></fig-input-gradient>
      </fig-preview>
      <fig-field class="fig-fill-picker-gradient-interpolation">
        <label>Mixing</label>
        <fig-dropdown class="fig-fill-picker-gradient-space" full ${X} value="${this.#Q.interpolationSpace==="oklch"?`oklch-${this.#Q.hueInterpolation||"shorter"}`:this.#Q.interpolationSpace}">
          <optgroup label="sRGB">
            <option value="srgb-linear">Linear</option>
          </optgroup>
          <optgroup label="OKLab">
            <option value="oklab">Perceptual</option>
          </optgroup>
          <optgroup label="OKLCH">
            <option value="oklch-shorter">Shorter hue</option>
            <option value="oklch-longer">Longer hue</option>
            <option value="oklch-increasing">Increasing hue</option>
            <option value="oklch-decreasing">Decreasing hue</option>
          </optgroup>
        </fig-dropdown>
      </fig-field>
      <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" title="Add stop">
            <fig-icon name="add"></fig-icon>
          </fig-button>
        </fig-header>
        <div class="fig-fill-picker-gradient-stops-list"></div>
      </div>
    `,this.#N(),this.#Yj(j)}#Yj(j){let Q=j.querySelector(".fig-fill-picker-gradient-type"),X=(q)=>q.currentTarget?.value??q.target?.value??q.detail,Y=(q)=>{this.#Q.type=X(q),this.#N(),this.#Y()};Q.addEventListener("input",Y),Q.addEventListener("change",Y);let Z=j.querySelector(".fig-fill-picker-gradient-space"),$=(q)=>{let W=X(q),z=W,k="shorter";if(W.startsWith("oklch-"))z="oklch",k=W.slice(6);this.#Q=O({...this.#Q,interpolationSpace:z,hueInterpolation:k}),this.#N(),this.#Y()};Z?.addEventListener("input",$),Z?.addEventListener("change",$),j.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(q)=>{let W=parseFloat(q.target.value)||0;this.#Q.angle=(W+90)%360,this.#f(),this.#Y()});let U=j.querySelector(".fig-fill-picker-gradient-cx"),L=j.querySelector(".fig-fill-picker-gradient-cy");U?.addEventListener("input",(q)=>{this.#Q.centerX=parseFloat(q.target.value)||50,this.#f(),this.#Y()}),L?.addEventListener("input",(q)=>{this.#Q.centerY=parseFloat(q.target.value)||50,this.#f(),this.#Y()}),j.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#Q.stops.forEach((q)=>{q.position=100-q.position}),this.#Q.stops.sort((q,W)=>q.position-W.position),this.#N(),this.#Y()}),j.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#Q.stops.push({position:50,color:"#888888",opacity:100}),this.#Q.stops.sort((W,z)=>W.position-z.position),this.#N(),this.#Y()});let K=j.querySelector(".fig-fill-picker-gradient-bar-input");if(K){let q=(W)=>{W.stopPropagation();let z=W.detail;if(!z?.gradient)return;this.#Q=O({...this.#Q,...z.gradient}),this.#W(),this.#c()};K.addEventListener("input",(W)=>{q(W),this.#Y()}),K.addEventListener("change",(W)=>{q(W),this.#z()})}}#N(){if(!this.#j)return;let j=this.#j.querySelector('[data-tab="gradient"]');if(!j)return;this.#Q=O(this.#Q);let Q=j.querySelector(".fig-fill-picker-gradient-angle"),X=j.querySelector(".fig-fill-picker-gradient-center");if(this.#Q.type==="radial")Q.style.display="none",X.style.display="flex";else{Q.style.display="block",X.style.display="none";let Z=(this.#Q.angle-90+360)%360;Q.setAttribute("value",Z)}let Y=j.querySelector(".fig-fill-picker-gradient-space");if(Y)Y.value=this.#Q.interpolationSpace==="oklch"?`oklch-${this.#Q.hueInterpolation||"shorter"}`:this.#Q.interpolationSpace;this.#f(),this.#c()}#f(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-bar-input");if(j)j.setAttribute("value",JSON.stringify({type:"gradient",gradient:V(this.#Q)}));this.#W()}#c(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-stops-list");if(!j)return;let Q=j.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(Q.length===this.#Q.stops.length){this.#Q.stops.forEach((X,Y)=>{let Z=Q[Y];Z.dataset.index=Y;let $=Z.querySelector(".fig-fill-picker-stop-position");if($)$.setAttribute("value",X.position);let J=Z.querySelector(".fig-fill-picker-stop-color");if(J)J.setAttribute("value",X.color);let U=Z.querySelector(".fig-fill-picker-stop-remove");if(U)if(this.#Q.stops.length<=2)U.setAttribute("disabled","");else U.removeAttribute("disabled")});return}this.#Zj(j)}#Zj(j){j.innerHTML=this.#Q.stops.map((Q,X)=>`
      <fig-field class="fig-fill-picker-gradient-stop-row" data-index="${X}">
        <fig-input-number class="fig-fill-picker-stop-position" min="0" max="100" value="${Q.position}" units="%"></fig-input-number>
        <fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${Q.color}"></fig-input-color>
        <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#Q.stops.length<=2?"disabled":""}>
          <fig-icon name="minus"></fig-icon>
        </fig-button>
      </fig-field>
    `).join(""),j.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((Q)=>{let X=parseInt(Q.dataset.index);Q.querySelector(".fig-fill-picker-stop-position").addEventListener("input",($)=>{this.#Q.stops[X].position=parseFloat($.target.value)||0,this.#f(),this.#Y()});let Y=Q.querySelector(".fig-fill-picker-stop-color"),Z=Y.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#j;else requestAnimationFrame(()=>{let $=Y.querySelector("fig-fill-picker");if($)$.anchorElement=this.#j});Y.addEventListener("input",($)=>{this.#Q.stops[X].color=$.target.hexOpaque||$.target.value;let J=$.detail?.rgba?.a;if(J!==void 0)this.#Q.stops[X].opacity=Math.round(J*100);this.#f(),this.#Y()}),Q.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{if(this.#Q.stops.length>2)this.#Q.stops.splice(X,1),this.#N(),this.#Y()})})}#v(j,Q=!0){let X=O({...this.#Q,interpolationSpace:j??this.#Q.interpolationSpace}),Y=this.#L==="display-p3",Z=X.stops.map((J)=>{let U=(J.opacity??100)/100;return`${Y?this.#Rj(J.color,U):this.#Lj(J.color,U)} ${J.position}%`}).join(", "),$=Q?` ${D(X)}`:"";switch(X.type){case"linear":return`linear-gradient(${X.angle}deg${$}, ${Z})`;case"radial":return`radial-gradient(circle at ${X.centerX}% ${X.centerY}%${$}, ${Z})`;case"angular":return`conic-gradient(from ${X.angle}deg${$}, ${Z})`;default:return`linear-gradient(${X.angle}deg${$}, ${Z})`}}static#p=new Map;#d(j){let Q=M.#p.get(j);if(Q!==void 0)return Q;let X=document.createElement("div");X.style.background=j;let Y=!!X.style.background;return M.#p.set(j,Y),Y}#l(){let j=this.#v(void 0,!0);if(this.#d(j))return j;let Q=this.#v("oklab",!0);if(this.#d(Q))return Q;return this.#v("oklab",!1)}#$j(){let j=this.#j.querySelector('[data-tab="image"]'),Q=this.getAttribute("experimental"),X=Q?`experimental="${Q}"`:"";j.innerHTML=`
      <fig-field class="fig-fill-picker-media-header">
        <fig-dropdown class="fig-fill-picker-scale-mode" ${X} value="${this.#$.scaleMode}">
          <option value="fill" selected>Fill</option>
          <option value="fit">Fit</option>
          <option value="crop">Crop</option>
          <option value="tile">Tile</option>
        </fig-dropdown>
        <fig-input-number class="fig-fill-picker-scale" min="1" max="200" value="${this.#$.scale}" units="%" ${this.#$.scaleMode==="tile"?"":'style="display: none;"'}></fig-input-number>
        <fig-button class="fig-fill-picker-media-rotate" icon variant="ghost" aria-label="Rotate">
          <fig-icon name="rotate"></fig-icon>
        </fig-button>
      </fig-field>
      <fig-image class="fig-fill-picker-media-preview fig-fill-picker-image-preview" upload="true" label="Upload from computer" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true"></fig-image>
    `,this.#Jj(j)}#Jj(j){let Q=j.querySelector(".fig-fill-picker-scale-mode"),X=j.querySelector(".fig-fill-picker-scale"),Y=j.querySelector(".fig-fill-picker-image-preview");Q.addEventListener("change",(Z)=>{this.#$.scaleMode=Z.target.value,X.style.display=Z.target.value==="tile"?"block":"none",this.#y(Y),this.#W(),this.#Y()}),X.addEventListener("input",(Z)=>{this.#$.scale=parseFloat(Z.target.value)||100,this.#y(Y),this.#W(),this.#Y()}),Y.addEventListener("loaded",(Z)=>{let $=Z.detail?.src||Y.src;if(!$)return;this.#$.url=$,this.#y(Y),this.#W(),this.#Y()}),Y.addEventListener("change",()=>{if(Y.src)return;this.#$.url=null,this.#y(Y),this.#W(),this.#Y()}),this.#y(Y)}#y(j){if(!this.#$.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.#$.url),j.classList.add("has-media"),j.style.backgroundImage="",j.style.backgroundPosition="",j.style.backgroundRepeat="",j.style.backgroundSize="",j.mediaEl?.style.removeProperty("opacity");let Q=j.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#$.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.#$.url})`,j.style.backgroundPosition="top left",j.style.backgroundSize=`${this.#$.scale}%`,j.style.backgroundRepeat="repeat",j.mediaEl)j.mediaEl.style.opacity="0";break}}#C(j){if(j.tagName==="FIG-MEDIA"){if(!this.#J.url){j.removeAttribute("src"),j.classList.remove("has-media");return}j.setAttribute("src",this.#J.url),j.classList.add("has-media");let Q=j.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#J.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.#J.scaleMode){case"fill":case"crop":j.style.objectFit="cover";break;case"fit":j.style.objectFit="contain";break}}#Kj(){let j=this.#j.querySelector('[data-tab="video"]'),Q=this.getAttribute("experimental"),X=Q?`experimental="${Q}"`:"";j.innerHTML=`
      <fig-field class="fig-fill-picker-media-header">
        <fig-dropdown class="fig-fill-picker-scale-mode" ${X} value="${this.#J.scaleMode}">
          <option value="fill" selected>Fill</option>
          <option value="fit">Fit</option>
          <option value="crop">Crop</option>
        </fig-dropdown>
        <fig-button class="fig-fill-picker-media-rotate" icon variant="ghost" aria-label="Rotate">
          <fig-icon name="rotate"></fig-icon>
        </fig-button>
      </fig-field>
      <fig-media class="fig-fill-picker-media-preview fig-fill-picker-video-preview" type="video" upload="true" label="Upload from computer" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true" autoplay="true" muted="true" loop="true"></fig-media>
    `,this.#Wj(j)}#Wj(j){let Q=j.querySelector(".fig-fill-picker-scale-mode"),X=j.querySelector(".fig-fill-picker-video-preview");Q.addEventListener("change",(Y)=>{this.#J.scaleMode=Y.target.value,this.#C(X),this.#W(),this.#Y()}),X.addEventListener("loaded",(Y)=>{let Z=Y.detail?.src||X.src;if(!Z)return;this.#J.url=Z,this.#C(X),X.play?.(),this.#W(),this.#Y()}),X.addEventListener("change",()=>{if(X.src)return;this.#J.url=null,this.#C(X),this.#W(),this.#Y()}),this.#C(X)}#Uj(){let j=this.#j.querySelector('[data-tab="webcam"]'),Q=this.getAttribute("experimental"),X=Q?`experimental="${Q}"`:"";j.innerHTML=`
      <fig-field class="fig-fill-picker-webcam-camera" style="display: none;">
        <fig-dropdown class="fig-fill-picker-camera-select" full ${X}>
        </fig-dropdown>
      </fig-field>
      <fig-video class="fig-fill-picker-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">
          <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>
          Capture
        </fig-button>
      </div>
    `,this.#qj(j)}#qj(j){let Q=j.querySelector(".fig-fill-picker-webcam-video"),X=j.querySelector(".fig-fill-picker-webcam-status"),Y=j.querySelector(".fig-fill-picker-webcam-capture"),Z=j.querySelector(".fig-fill-picker-webcam-camera"),$=j.querySelector(".fig-fill-picker-camera-select"),J=async(U=null)=>{try{let L={video:U?{deviceId:{exact:U}}:!0};if(this.#K.stream)this.#K.stream.getTracks().forEach((W)=>W.stop());this.#K.stream=await navigator.mediaDevices.getUserMedia(L),Q.srcObject=this.#K.stream,Q.style.display="block",X.style.display="none";let q=(await navigator.mediaDevices.enumerateDevices()).filter((W)=>W.kind==="videoinput");if(q.length>1){if(Z.style.display="",$.querySelectorAll(":scope > option, :scope > optgroup").forEach((W)=>W.remove()),q.forEach((W,z)=>{let k=document.createElement("option");k.value=W.deviceId;let F=W.label||(q.length>1?`Camera ${z+1}`:"Camera");k.textContent=F.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(_,R)=>{return` ${/^\d+$/.test(R)?Number.parseInt(R,10).toString():R.replace(/^0+/,"")||"0"}`}),$.append(k)}),U)$.value=U}else Z.style.display="none",$.querySelectorAll(":scope > option, :scope > optgroup").forEach((W)=>W.remove())}catch(L){console.error("Webcam error:",L.name,L.message);let K="Camera access denied";if(L.name==="NotAllowedError")K="Camera permission denied";else if(L.name==="NotFoundError")K="No camera found";else if(L.name==="NotReadableError")K="Camera in use by another app";else if(L.name==="OverconstrainedError")K="Camera constraints not supported";else if(!window.isSecureContext)K="Camera requires secure context";X.innerHTML=`<span>${K}</span>`,X.style.display="flex",Q.style.display="none"}};this.#P=new MutationObserver(()=>{if(j.style.display!=="none"&&!this.#K.stream)J()}),this.#P.observe(j,{attributes:!0,attributeFilter:["style"]}),$.addEventListener("change",(U)=>{J(U.target.value)}),Y.addEventListener("click",async()=>{if(!this.#K.stream)return;if(!Q.videoWidth||!Q.videoHeight)return;let U=document.createElement("canvas");U.width=Q.videoWidth,U.height=Q.videoHeight,U.getContext("2d").drawImage(Q,0,0,U.width,U.height);let L=await new Promise((q)=>U.toBlob(q,"image/png"));if(!L)return;if(this.#K.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#K.snapshot);this.#K.snapshot=URL.createObjectURL(L),this.#$.url=this.#K.snapshot;let K=this.#j.querySelector(".fig-fill-picker-image-preview");if(K)this.#y(K);this.#x("image")})}#i(j){let Q=j.h/360,X=j.s/100,Y=j.v/100,Z,$,J,U=Math.floor(Q*6),L=Q*6-U,K=Y*(1-X),q=Y*(1-L*X),W=Y*(1-(1-L)*X);switch(U%6){case 0:Z=Y,$=W,J=K;break;case 1:Z=q,$=Y,J=K;break;case 2:Z=K,$=Y,J=W;break;case 3:Z=K,$=q,J=Y;break;case 4:Z=W,$=K,J=Y;break;case 5:Z=Y,$=K,J=q;break}return{r:Math.round(Z*255),g:Math.round($*255),b:Math.round(J*255)}}#A(j){let Q=j.r/255,X=j.g/255,Y=j.b/255,Z=Math.max(Q,X,Y),$=Math.min(Q,X,Y),J=Z-$,U=0,L=Z===0?0:J/Z,K=Z;if(Z!==$){switch(Z){case Q:U=(X-Y)/J+(X<Y?6:0);break;case X:U=(Y-Q)/J+2;break;case Y:U=(Q-X)/J+4;break}U/=6}return{h:U*360,s:L*100,v:K*100,a:1}}#O(j){if(!j||typeof j.h!=="number"||typeof j.s!=="number"||typeof j.v!=="number")return"#D9D9D9";let Q=this.#i(j),X=(Y)=>{return(isNaN(Y)?217:Math.max(0,Math.min(255,Math.round(Y)))).toString(16).padStart(2,"0")};return`#${X(Q.r)}${X(Q.g)}${X(Q.b)}`}#I(j){let Q=parseInt(j.slice(1,3),16),X=parseInt(j.slice(3,5),16),Y=parseInt(j.slice(5,7),16);return this.#A({r:Q,g:X,b:Y})}#Lj(j,Q=1){let X=parseInt(j.slice(1,3),16),Y=parseInt(j.slice(3,5),16),Z=parseInt(j.slice(5,7),16);return`rgba(${X}, ${Y}, ${Z}, ${Q})`}#Rj(j,Q=1){let X=+(parseInt(j.slice(1,3),16)/255).toFixed(4),Y=+(parseInt(j.slice(3,5),16)/255).toFixed(4),Z=+(parseInt(j.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${X} ${Y} ${Z} / ${Q})`}#_j(j){let Q=j.r/255,X=j.g/255,Y=j.b/255,Z=Math.max(Q,X,Y),$=Math.min(Q,X,Y),J,U,L=(Z+$)/2;if(Z===$)J=U=0;else{let K=Z-$;switch(U=L>0.5?K/(2-Z-$):K/(Z+$),Z){case Q:J=((X-Y)/K+(X<Y?6:0))/6;break;case X:J=((Y-Q)/K+2)/6;break;case Y:J=((Q-X)/K+4)/6;break}}return{h:J*360,s:U*100,l:L*100}}#zj(j){let Q=j.h/360,X=j.s/100,Y=j.l/100,Z,$,J;if(X===0)Z=$=J=Y;else{let U=(q,W,z)=>{if(z<0)z+=1;if(z>1)z-=1;if(z<0.16666666666666666)return q+(W-q)*6*z;if(z<0.5)return W;if(z<0.6666666666666666)return q+(W-q)*(0.6666666666666666-z)*6;return q},L=Y<0.5?Y*(1+X):Y+X-Y*X,K=2*Y-L;Z=U(K,L,Q+0.3333333333333333),$=U(K,L,Q),J=U(K,L,Q-0.3333333333333333)}return{r:Math.round(Z*255),g:Math.round($*255),b:Math.round(J*255)}}#r(j){let Q=(W)=>{return W=W/255,W<=0.04045?W/12.92:Math.pow((W+0.055)/1.055,2.4)},X=Q(j.r),Y=Q(j.g),Z=Q(j.b),$=0.4122214708*X+0.5363325363*Y+0.0514459929*Z,J=0.2119034982*X+0.6806995451*Y+0.1073969566*Z,U=0.0883024619*X+0.2817188376*Y+0.6299787005*Z,L=Math.cbrt($),K=Math.cbrt(J),q=Math.cbrt(U);return{l:0.2104542553*L+0.793617785*K-0.0040720468*q,a:1.9779984951*L-2.428592205*K+0.4505937099*q,b:0.0259040371*L+0.7827717662*K-0.808675766*q}}#Bj(j){let Q=this.#r(j);return{l:Q.l,c:Math.sqrt(Q.a*Q.a+Q.b*Q.b),h:(Math.atan2(Q.b,Q.a)*180/Math.PI+360)%360}}#n(j){let Q=j.l+0.3963377774*j.a+0.2158037573*j.b,X=j.l-0.1055613458*j.a-0.0638541728*j.b,Y=j.l-0.0894841775*j.a-1.291485548*j.b,Z=Q*Q*Q,$=X*X*X,J=Y*Y*Y,U=(L)=>{let K=L<=0.0031308?12.92*L:1.055*Math.pow(L,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,K))*255)};return{r:U(4.0767416621*Z-3.3077115913*$+0.2309699292*J),g:U(-1.2684380046*Z+2.6097574011*$-0.3413193965*J),b:U(-0.0041960863*Z-0.7034186147*$+1.707614701*J)}}#kj(j){let Q=j.h*Math.PI/180;return this.#n({l:j.l,a:j.c*Math.cos(Q),b:j.c*Math.sin(Q)})}#Y(){this.#W(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#z(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let j={type:this.#U,colorSpace:this.#L};switch(this.#U){case"solid":return{...j,color:this.#O(this.#X),alpha:this.#X.a,hsv:{...this.#X}};case"gradient":return{...j,gradient:V(this.#Q),css:this.#l()};case"image":return{...j,image:{...this.#$}};case"video":return{...j,video:{...this.#J}};case"webcam":return{...j,image:{url:this.#K.snapshot,scaleMode:"fill",scale:50}};default:return{...j,...this.#S[this.#U]}}}set value(j){if(typeof j==="string")this.setAttribute("value",j);else this.setAttribute("value",JSON.stringify(j))}attributeChangedCallback(j,Q,X){if(Q===X)return;switch(j){case"value":if(this.#h(),this.#W(),this.#j){if(!this.#F){if(this.#_(),this.#G(),this.#M)this.#M.setAttribute("value",this.#X.h);if(this.#k)this.#k.setAttribute("value",this.#X.a*100),this.#k.setAttribute("color",this.#O(this.#X))}}break;case"disabled":break}}}customElements.define("fig-fill-picker",M);