@rogieking/figui3 6.21.1 → 6.22.0

package/dist/fig-editor.js

@@ -1,9 +1,9 @@
-import"./fig.js";import"./fig-lab.js";function C(j,J){if(!customElements.get(j))customElements.define(j,J)}function L(j){return String(j??"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}var M=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],y=["shorter","longer","increasing","decreasing"],k=new Set(["oklch","hsl"]);function f(j){let J={...j??{}},K=String(J.interpolationSpace??"srgb").toLowerCase();if(!M.includes(K))K="srgb";J.interpolationSpace=K;let U=String(J.hueInterpolation??"shorter").toLowerCase();return J.hueInterpolation=y.includes(U)?U:"shorter",J}function D(j){let J=f(j),K={...J,interpolationSpace:J.interpolationSpace};if(k.has(J.interpolationSpace))K.hueInterpolation=J.hueInterpolation;else delete K.hueInterpolation;return K}function E(j){let J=f(j);if(J.interpolationSpace==="srgb")return"";if(k.has(J.interpolationSpace))return`in ${J.interpolationSpace} ${J.hueInterpolation} hue`;return`in ${J.interpolationSpace}`}function H(j){let J=f(j);if(k.has(J.interpolationSpace))return`${J.interpolationSpace}-${J.hueInterpolation||"shorter"}`;return J.interpolationSpace}function q(j){let J=String(j??"");for(let K of k){let U=`${K}-`;if(J.startsWith(U))return{interpolationSpace:K,hueInterpolation:J.slice(U.length)||"shorter"}}return{interpolationSpace:J||"srgb",hueInterpolation:"shorter"}}class F extends HTMLElement{#U=null;#Y=null;#j=null;#x="solid";anchorElement=null;#O="solid";#A="srgb";#K={h:0,s:0,v:85,a:1};#B="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}]};#X={url:null,scaleMode:"fill",scale:50};#Z={url:null,scaleMode:"fill",scale:50};#$={stream:null,snapshot:null};#R={};#v={};#T=null;#G=null;#_=null;#z=null;#q=!1;#L=!1;#H=null;#P=null;#S=null;#c=null;#I=0;#u=null;#g=null;constructor(){super();this.#u=this.#Oj.bind(this),this.#g=this.#Tj.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","experimental","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#Wj(),this.#t(),this.#W()})}disconnectedCallback(){if(this.#jj(),this.#$.snapshot?.startsWith("blob:")){if(URL.revokeObjectURL(this.#$.snapshot),this.#X.url===this.#$.snapshot)this.#X.url=null;this.#$.snapshot=null}if(this.#Z.url&&this.#Z.url.startsWith("blob:"))URL.revokeObjectURL(this.#Z.url);if(this.#Y)this.#Y.removeAttribute("selected");if(this.#U)this.#U.removeEventListener("click",this.#u),this.#U.removeEventListener("keydown",this.#g)}#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.#U=this.#Y;else if(j.matches("fig-swatch"))this.#Y=j,this.#U=j;else this.#U=j,this.#Y=null;if(this.#b(),this.#U.removeEventListener("click",this.#u),this.#U.addEventListener("click",this.#u),this.#U.removeEventListener("keydown",this.#g),this.#U.addEventListener("keydown",this.#g),this.#Y)requestAnimationFrame(()=>{let J=this.#Y.querySelector('input[type="color"]');if(J)J.remove();this.#b()})}#a(){return this.getAttribute("aria-label")||"Fill picker"}#b(){if(!this.#U)return;let j=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.getAttribute("aria-labelledby");if(!this.#U.hasAttribute("role"))this.#U.setAttribute("role","button");if(this.#U.setAttribute("tabindex",j?"-1":"0"),this.#U.setAttribute("aria-disabled",j?"true":"false"),J)this.#U.setAttribute("aria-labelledby",J),this.#U.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#U.setAttribute("aria-label",`Open ${this.#a()}`),this.#U.removeAttribute("aria-labelledby");else if(this.#U.removeAttribute("aria-labelledby"),!this.#U.hasAttribute("aria-label"))this.#U.setAttribute("aria-label",`Open ${this.#a()}`);let K=this.getAttribute("aria-describedby");if(K)this.#U.setAttribute("aria-describedby",K);else this.#U.removeAttribute("aria-describedby")}#Oj(j){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;j.stopPropagation(),j.preventDefault(),this.#h()}#Tj(j){if(j.key!=="Enter"&&j.key!==" ")return;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;j.preventDefault(),j.stopPropagation(),this.#h()}#t(){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.#O=K.type;if(K.color){if(typeof K.color==="string")this.#K=this.#E(K.color);else if(typeof K.color==="object"&&K.color.h!==void 0)this.#K=K.color}if(K.opacity!==void 0)this.#K.a=K.opacity/100;if(this.#A="srgb",K.gradient)this.#J=f({...this.#J,...K.gradient});if(K.image)this.#X={...this.#X,...K.image};if(K.video)this.#Z={...this.#Z,...K.video};if(K.type&&!J.includes(K.type)){let{type:U,...Q}=K;this.#v[K.type]=Q}}catch(K){if(j.startsWith("#"))this.#O="solid",this.#K=this.#E(j)}}#W(){if(!this.#Y)return;let j,J="cover",K="center";switch(this.#O){case"solid":j=this.#V(this.#K);break;case"gradient":j=this.#Yj();break;case"image":if(this.#X.url){j=`url(${this.#X.url})`;let Q=this.#e(this.#X.scaleMode,this.#X.scale);J=Q.size,K=Q.position}else j="";break;case"video":if(this.#Z.url){j=`url(${this.#Z.url})`;let Q=this.#e(this.#Z.scaleMode,this.#Z.scale);J=Q.size,K=Q.position}else j="";break;default:j=this.#R[this.#O]?.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",K),this.#O==="solid")this.#Y.setAttribute("alpha",this.#K.a);else this.#Y.removeAttribute("alpha")}#e(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"}}}#h(){if(!this.#j)this.#zj();if(this.#S=JSON.stringify(this.value),this.#s(this.#O,{emit:!1}),this.#Y)this.#Y.setAttribute("selected","true");this.#j.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#N(),this.#f()})})}open(){this.#h()}close(){if(this.#j)this.#j.open=!1}#Rj(){if(!this.#j)return;for(let[j,{element:J}]of Object.entries(this.#R)){let K=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((U)=>U.dataset.tab===j);if(!K)continue;while(K.firstChild)J.appendChild(K.firstChild)}}#jj(){if(this.#H)this.#H(),this.#H=null;if(this.#P?.disconnect(),this.#P=null,this.#m(),!this.#j)return;this.#Rj(),this.#j.remove(),this.#j=null,this.#c=null,this.#S=null}#m(){if(this.#I+=1,this.#$.stream)this.#$.stream.getTracks().forEach((J)=>J.stop()),this.#$.stream=null;let j=this.#j?.querySelector(".fig-fill-picker-webcam-video");if(j)j.srcObject=null}#zj(){this.#R={},this.querySelectorAll('[slot^="mode-"]').forEach((Y)=>{let W=Y.getAttribute("slot").slice(5);this.#R[W]={element:Y,label:Y.getAttribute("label")||W.charAt(0).toUpperCase()+W.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.#U;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"},U=this.getAttribute("mode"),Q;if(U){if(Q=U.split(",").map((W)=>W.trim().toLowerCase()).filter((W)=>J.includes(W)||this.#R[W]),Q.length===0)Q=[...J]}else Q=[...J];let X={...K};for(let[Y,{label:W}]of Object.entries(this.#R))X[Y]=W;if(!Q.includes(this.#O))this.#O=Q[0],this.#x=Q[0];let Z;if(Q.length===1)Z=`<h3 class="fig-fill-picker-type-label">${L(X[Q[0]])}</h3>`;else{let Y=Q.map((W)=>`<fig-select-option value="${L(W)}">${L(X[W])}</fig-select-option>`).join(`
-            `);Z=`<fig-select class="fig-fill-picker-type" label="Fill type" value="${L(this.#O)}">
+import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))customElements.define(j,J)}function k(j){return String(j??"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}var A=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],S=["shorter","longer","increasing","decreasing"],D=new Set(["oklch","hsl"]);function R(j){let J={...j??{}},K=String(J.interpolationSpace??"srgb").toLowerCase();if(!A.includes(K))K="srgb";J.interpolationSpace=K;let U=String(J.hueInterpolation??"shorter").toLowerCase();return J.hueInterpolation=S.includes(U)?U:"shorter",J}function V(j){let J=R(j),K={...J,interpolationSpace:J.interpolationSpace};if(D.has(J.interpolationSpace))K.hueInterpolation=J.hueInterpolation;else delete K.hueInterpolation;return K}function y(j){let J=R(j);if(J.interpolationSpace==="srgb")return"";if(D.has(J.interpolationSpace))return`in ${J.interpolationSpace} ${J.hueInterpolation} hue`;return`in ${J.interpolationSpace}`}function N(j){let J=R(j);if(D.has(J.interpolationSpace))return`${J.interpolationSpace}-${J.hueInterpolation||"shorter"}`;return J.interpolationSpace}function H(j){let J=String(j??"");for(let K of D){let U=`${K}-`;if(J.startsWith(U))return{interpolationSpace:K,hueInterpolation:J.slice(U.length)||"shorter"}}return{interpolationSpace:J||"srgb",hueInterpolation:"shorter"}}var P=0;class _ extends HTMLElement{#Q=null;#Y=null;#j=null;#Uj=`fig-fill-picker-dialog-${++P}`;#b="solid";anchorElement=null;#W="solid";#x="srgb";#K={h:0,s:0,v:85,a:1};#S="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}]};#X={url:null,scaleMode:"fill",scale:50};#Z={url:null,scaleMode:"fill",scale:50};#$={stream:null,snapshot:null};#k={};#h={};#O=null;#L=null;#_=null;#f=null;#B=!1;#G=!1;#N=null;#w=null;#m=null;#C=null;#n=null;#v=0;#d=null;#c=null;#p=new Set;#s=new Set;constructor(){super();this.#d=this.#Vj.bind(this),this.#c=this.#_j.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#R(()=>{this.#Dj(),this.#Xj(),this.#z()})}disconnectedCallback(){if(this.#Zj(),this.#Rj(),this.#Tj(),this.#Y)this.#Y.removeAttribute("selected");if(this.#Q)this.#Q.removeEventListener("click",this.#d),this.#Q.removeEventListener("keydown",this.#c);this.#Q=null,this.#Y=null}#M(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#R(j){let J=requestAnimationFrame(()=>{if(this.#p.delete(J),this.isConnected)j()});return this.#p.add(J),J}#Rj(){this.#p.forEach((j)=>cancelAnimationFrame(j)),this.#p.clear()}#Tj(){if(this.#s.forEach((j)=>URL.revokeObjectURL(j)),this.#s.clear(),this.#$.snapshot?.startsWith("blob:")){if(this.#X.url===this.#$.snapshot)this.#X.url=null;this.#$.snapshot=null}}#Dj(){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.#Q=this.#Y;else if(j.matches("fig-swatch"))this.#Y=j,this.#Q=j;else this.#Q=j,this.#Y=null;if(this.#F(),this.#Q.removeEventListener("click",this.#d),this.#Q.addEventListener("click",this.#d),this.#Q.removeEventListener("keydown",this.#c),this.#Q.addEventListener("keydown",this.#c),this.#Y)this.#R(()=>{let J=this.#Y.querySelector('input[type="color"]');if(J)J.remove();this.#F()})}#i(){return this.getAttribute("aria-label")||"Fill picker"}#F(){if(!this.#Q)return;let j=this.#M(),J=this.getAttribute("aria-labelledby");if(!this.#Q.hasAttribute("role"))this.#Q.setAttribute("role","button");if(this.#Q.setAttribute("tabindex",j?"-1":"0"),this.#Q.setAttribute("aria-disabled",j?"true":"false"),this.#Q.setAttribute("aria-haspopup","dialog"),this.#Q.setAttribute("aria-expanded",this.#j?.open?"true":"false"),this.#Q.setAttribute("aria-controls",this.#Uj),this.#Q.removeAttribute("aria-hidden"),J)this.#Q.setAttribute("aria-labelledby",J),this.#Q.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#Q.setAttribute("aria-label",`Open ${this.#i()}`),this.#Q.removeAttribute("aria-labelledby");else if(this.#Q.removeAttribute("aria-labelledby"),!this.#Q.hasAttribute("aria-label"))this.#Q.setAttribute("aria-label",`Open ${this.#i()}`);let K=this.getAttribute("aria-describedby");if(K)this.#Q.setAttribute("aria-describedby",K);else this.#Q.removeAttribute("aria-describedby")}#Vj(j){if(this.#M())return;j.stopPropagation(),j.preventDefault(),this.#l()}#_j(j){if(j.key!=="Enter"&&j.key!==" ")return;if(this.#M())return;j.preventDefault(),j.stopPropagation(),this.#l()}#Xj(){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.#W=K.type;if(K.color){if(typeof K.color==="string")this.#K=this.#I(K.color);else if(typeof K.color==="object"&&K.color.h!==void 0)this.#K=K.color}let U=K.alpha!==void 0?Number(K.alpha):K.opacity!==void 0?Number(K.opacity)/100:void 0;if(Number.isFinite(U))this.#K.a=Math.max(0,Math.min(1,U));if(this.#x="srgb",K.gradient)this.#J=R({...this.#J,...K.gradient});if(K.image)this.#X={...this.#X,...K.image};if(K.video)this.#Z={...this.#Z,...K.video};if(K.type&&!J.includes(K.type)){let{type:Q,...X}=K;this.#h[K.type]=X}}catch(K){if(j.startsWith("#"))this.#W="solid",this.#K=this.#I(j)}}#z(){if(!this.#Y)return;let j,J="cover",K="center";switch(this.#W){case"solid":j=this.#H(this.#K);break;case"gradient":j=this.#fj();break;case"image":if(this.#X.url){j=`url(${this.#X.url})`;let Q=this.#Yj(this.#X.scaleMode,this.#X.scale);J=Q.size,K=Q.position}else j="";break;case"video":if(this.#Z.url){j=`url(${this.#Z.url})`;let Q=this.#Yj(this.#Z.scaleMode,this.#Z.scale);J=Q.size,K=Q.position}else j="";break;default:j=this.#k[this.#W]?.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",K),this.#W==="solid")this.#Y.setAttribute("alpha",this.#K.a);else this.#Y.removeAttribute("alpha")}#Yj(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.#M())return;if(!this.#j)this.#qj();if(this.#m=JSON.stringify(this.value),this.#C=this.#m,this.#o(this.#W,{emit:!1}),this.#Y)this.#Y.setAttribute("selected","true");this.#j.open=!0,this.#F(),this.#R(()=>{this.#j?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#R(()=>{this.#E(),this.#T()})})}open(){this.#l()}close(){if(this.#j)this.#j.open=!1,this.#F()}#Fj(){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((U)=>U.dataset.tab===j);if(!K)continue;while(K.firstChild)J.appendChild(K.firstChild)}}#Zj(){if(this.#N)this.#N(),this.#N=null;if(this.#w?.disconnect(),this.#w=null,this.#r(),!this.#j)return;this.#Fj(),this.#j.remove(),this.#j=null,this.#n=null,this.#m=null,this.#C=null,this.#O=null,this.#L=null,this.#_=null,this.#f=null,this.#G=!1,this.#F()}#r(){if(this.#v+=1,this.#$.stream)this.#$.stream.getTracks().forEach((J)=>J.stop()),this.#$.stream=null;let j=this.#j?.querySelector(".fig-fill-picker-webcam-video");if(j)j.srcObject=null}#qj(){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.#Uj,this.#j.setAttribute("aria-label",this.#i()),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.#Q;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"},U=this.getAttribute("mode"),Q;if(U){if(Q=U.split(",").map(($)=>$.trim().toLowerCase()).filter(($)=>J.includes($)||this.#k[$]),Q.length===0)Q=[...J]}else Q=[...J];let X={...K};for(let[Y,{label:$}]of Object.entries(this.#k))X[Y]=$;if(!Q.includes(this.#W))this.#W=Q[0],this.#b=Q[0];let Z;if(Q.length===1)Z=`<h3 class="fig-fill-picker-type-label">${k(X[Q[0]])}</h3>`;else{let Y=Q.map(($)=>`<fig-select-option value="${k($)}">${k(X[$])}</fig-select-option>`).join(`
+            `);Z=`<fig-select class="fig-fill-picker-type" label="Fill type" value="${k(this.#W)}">
           <fig-select-options>
             ${Y}
           </fig-select-options>
-        </fig-select>`}let $=Q.map((Y)=>`<div class="fig-fill-picker-tab" data-tab="${L(Y)}"></div>`).join(`
+        </fig-select>`}let O=Q.map((Y)=>`<div class="fig-fill-picker-tab" data-tab="${k(Y)}"></div>`).join(`
         `);this.#j.innerHTML=`
       <fig-header>
         ${Z}
@@ -12,15 +12,18 @@ import"./fig.js";import"./fig-lab.js";function C(j,J){if(!customElements.get(j))
         </fig-button>
       </fig-header>
       <fig-content>
-        ${$}
+        ${O}
       </fig-content>
-    `,document.body.appendChild(this.#j);for(let[Y,{element:W}]of Object.entries(this.#R)){let z=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((G)=>G.dataset.tab===Y);if(!z)continue;while(W.firstChild)z.appendChild(W.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:Y,container:z}}))}let T=this.#j.querySelector(".fig-fill-picker-type");if(T)T.addEventListener("change",(Y)=>{let W=typeof Y.detail==="string"?Y.detail:Y.target?.value;if(W)this.#s(W)});this.#j.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#j.open=!1});let O=()=>{if(this.#Y)this.#Y.removeAttribute("selected");if(this.#m(),this.#S!==null&&this.#S!==JSON.stringify(this.value))this.#k();this.#S=null,this.dispatchEvent(new CustomEvent("close"))};this.#j.addEventListener("close",O);let R={solid:()=>this.#Lj(),gradient:()=>this.#Dj(),image:()=>this.#Mj(),video:()=>this.#Ej(),webcam:()=>this.#Pj()};for(let[Y,W]of Object.entries(R))if(!this.#R[Y]&&Q.includes(Y))W();for(let Y of Object.keys(this.#R)){if(J.includes(Y))continue;let W=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((z)=>z.dataset.tab===Y);if(!W)continue;W.addEventListener("input",(z)=>{if(z.target===this)return;if(z.stopPropagation(),z.detail)this.#v[Y]=z.detail;this.#Q()}),W.addEventListener("change",(z)=>{if(z.target===this)return;if(z.stopPropagation(),z.detail)this.#v[Y]=z.detail;this.#k()})}}#s(j,{emit:J=!0}={}){let K=Array.from(this.#j?.querySelectorAll(".fig-fill-picker-tab")??[]).find(($)=>$.dataset.tab===j);if(!K)return;let U=this.#x;if(this.#x=j,this.#O=j,U==="webcam"&&j!=="webcam")this.#m();let Q=this.#j.querySelector(".fig-fill-picker-type");if(Q&&Q.value!==j)Q.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.#D();let $=K.querySelector(".fig-fill-picker-gradient-bar-input");$?.refreshLayout?.(),requestAnimationFrame(()=>{$?.refreshLayout?.()})});if(j==="webcam")this.#c?.();if(this.#W(),J)this.#Q()}#Lj(){let j=this.#j.querySelector('[data-tab="solid"]'),J=this.getAttribute("alpha")!=="false";if(j.innerHTML=`
+    `,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((T)=>T.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 W=()=>{if(this.#Y)this.#Y.removeAttribute("selected");this.#r();let Y=JSON.stringify(this.value);if(this.#C!==null&&this.#C!==Y)this.#V();this.#m=null,this.#C=null,this.#F();let $=this.#Q;this.#R(()=>{if($?.isConnected)HTMLElement.prototype.focus.call($)}),this.dispatchEvent(new CustomEvent("close"))};this.#j.addEventListener("close",W);let L={solid:()=>this.#Bj(),gradient:()=>this.#Ej(),image:()=>this.#uj(),video:()=>this.#bj(),webcam:()=>this.#mj()};for(let[Y,$]of Object.entries(L))if(!this.#k[Y]&&Q.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.#h[Y]=f.detail;this.#U()}),$.addEventListener("change",(f)=>{if(f.target===this)return;if(f.stopPropagation(),f.detail)this.#h[Y]=f.detail;this.#V()})}}#o(j,{emit:J=!0}={}){let K=Array.from(this.#j?.querySelectorAll(".fig-fill-picker-tab")??[]).find((O)=>O.dataset.tab===j);if(!K)return;let U=this.#b;if(this.#b=j,this.#W=j,U==="webcam"&&j!=="webcam")this.#r();let Q=this.#j.querySelector(".fig-fill-picker-type");if(Q&&Q.value!==j)Q.value=j;this.#j.querySelectorAll(".fig-fill-picker-tab").forEach((O)=>{if(O.dataset.tab===j)O.style.display="block";else O.style.display="none"});let Z=this.#j.querySelector("fig-content");if(Z)Z.style.padding=this.#k[j]?"0":"";if(j==="gradient")this.#R(()=>{this.#D();let O=K.querySelector(".fig-fill-picker-gradient-bar-input");O?.refreshLayout?.(),this.#R(()=>{O?.refreshLayout?.()})});if(j==="webcam")this.#n?.();if(this.#z(),J)this.#U()}#Hj(){if(!this.#j?.open)return;if(this.#o(this.#W,{emit:!1}),this.#E(),this.#T(),this.#y(),this.#_)this.#_.setAttribute("value",this.#K.h);if(this.#f)this.#f.setAttribute("value",this.#K.a*100),this.#f.setAttribute("color",this.#H(this.#K));this.#D();let j=this.#j.querySelector('[data-tab="image"]'),J=j?.querySelector(".fig-fill-picker-scale-mode"),K=j?.querySelector(".fig-fill-picker-scale"),U=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(U)this.#A(U);let Q=this.#j.querySelector('[data-tab="video"]'),X=Q?.querySelector(".fig-fill-picker-scale-mode"),Z=Q?.querySelector(".fig-fill-picker-video-preview");if(X)X.value=this.#Z.scaleMode;if(Z)this.#g(Z)}#Bj(){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.#V({...this.#K,a:1})}"
+          color="${this.#H({...this.#K,a:1})}"
           data-no-color-picker
           drag
           drag-surface=".fig-fill-picker-color-area"
@@ -31,10 +34,10 @@ import"./fig.js";import"./fig-lab.js";function C(j,J){if(!customElements.get(j))
       <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.#K.h}"></fig-slider>
-        ${J?`<fig-slider type="opacity" variant="classic" text="false" min="0" max="100" aria-label="Opacity" value="${this.#K.a*100}" color="${this.#V(this.#K)}"></fig-slider>`:""}
+        ${J?`<fig-slider type="opacity" variant="classic" text="false" min="0" max="100" aria-label="Opacity" value="${this.#K.a*100}" color="${this.#H(this.#K)}"></fig-slider>`:""}
       </div>
       <fig-field class="fig-fill-picker-inputs">
-        <fig-select class="fig-fill-picker-input-mode" label="Color value format" value="${L(this.#B)}">
+        <fig-select class="fig-fill-picker-input-mode" label="Color value format" value="${k(this.#S)}">
           <fig-select-options>
             <fig-select-option value="hex">Hex</fig-select-option>
             <fig-select-option value="rgb">RGB</fig-select-option>
@@ -47,7 +50,7 @@ import"./fig.js";import"./fig-lab.js";function C(j,J){if(!customElements.get(j))
         </fig-select>
         <span class="fig-fill-picker-input-fields"></span>
       </fig-field>
-    `,this.#T=j.querySelector("canvas"),this.#G=j.querySelector("fig-handle"),this.#N(),this.#f(),this.#Jj(),this.#_=j.querySelector('fig-slider[type="hue"]'),this.#_.addEventListener("input",(Q)=>{this.#K.h=parseFloat(Q.target.value),this.#N(),this.#f(),this.#C(),this.#Q()}),this.#_.addEventListener("change",()=>{this.#k()}),J)this.#z=j.querySelector('fig-slider[type="opacity"]'),this.#z.addEventListener("input",(Q)=>{this.#K.a=parseFloat(Q.target.value)/100,this.#C(),this.#Q()}),this.#z.addEventListener("change",()=>{this.#k()});j.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(Q)=>{let X=typeof Q.detail==="string"?Q.detail:Q.target?.value;if(!X)return;this.#B=X,this.#Kj()}),this.#Kj();let U=j.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)U.addEventListener("click",async()=>{try{let X=await new EyeDropper().open();this.#K={...this.#E(X.sRGBHex),a:this.#K.a},this.#N(),this.#f(),this.#C(),this.#Q()}catch(Q){}});else U.setAttribute("disabled",""),U.title="EyeDropper not supported in this browser"}#dj(){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.#T=K,this.#Jj()}this.#N(),this.#f()}this.#F(),this.#Q()}#N(){if(!this.#T&&this.#j)this.#T=this.#j.querySelector('[data-tab="solid"] canvas');if(!this.#T)return;let j=this.#A==="display-p3"?"display-p3":"srgb",J=this.#T.getContext("2d",{colorSpace:j});if(!J)return;let K=this.#T.width,U=this.#T.height;J.clearRect(0,0,K,U);let Q=this.#K.h,X=this.#A==="display-p3",Z=J.createLinearGradient(0,0,K,0);if(X){Z.addColorStop(0,"color(display-p3 1 1 1)");let[T,O,R]=hslToP3(Q,100,50);Z.addColorStop(1,`color(display-p3 ${T} ${O} ${R})`)}else Z.addColorStop(0,"#FFFFFF"),Z.addColorStop(1,`hsl(${Q}, 100%, 50%)`);J.fillStyle=Z,J.fillRect(0,0,K,U);let $=J.createLinearGradient(0,0,0,U);$.addColorStop(0,"rgba(0,0,0,0)"),$.addColorStop(1,"rgba(0,0,0,1)"),J.fillStyle=$,J.fillRect(0,0,K,U)}#f(j=0){if(!this.#G||!this.#T)return;let J=this.#T.getBoundingClientRect();if((J.width===0||J.height===0)&&j<5){requestAnimationFrame(()=>this.#f(j+1));return}let K=Math.max(0,Math.min(100,this.#K.s)),U=Math.max(0,Math.min(100,100-this.#K.v));this.#G.setAttribute("value",`${K}% ${U}%`),this.#G.setAttribute("color",this.#V({...this.#K,a:1}))}#p(j,J,K={}){let{updateHandle:U=!0,emitInput:Q=!0,emitChange:X=!1}=K;if(this.#K.s=Math.max(0,Math.min(100,j*100)),this.#K.v=Math.max(0,Math.min(100,(1-J)*100)),this.#G)this.#G.setAttribute("color",this.#V({...this.#K,a:1}));if(U)this.#f();if(this.#C(),Q)this.#Q();if(X)this.#k()}#Jj(){if(this.#H)this.#H(),this.#H=null;if(!this.#T||!this.#G)return;let j=this.#T.parentElement||this.#T,J=this.#G,K=!1,U=(O,R={})=>{let Y=j.getBoundingClientRect();if(Y.width===0||Y.height===0)return;let W=Math.max(0,Math.min(O.clientX-Y.left,Y.width)),z=Math.max(0,Math.min(O.clientY-Y.top,Y.height));this.#p(W/Y.width,z/Y.height,R)},Q=(O)=>{if(O.button!==0)return;if(O.target===J||J.contains(O.target))return;K=!0,this.#q=!0,j.setPointerCapture(O.pointerId),U(O,{updateHandle:!0,emitInput:!0})},X=(O)=>{if(!K)return;if(O.buttons===0){Z();return}U(O,{updateHandle:!0,emitInput:!0})},Z=()=>{if(!K)return;K=!1,this.#q=!1,this.#k()},$=(O)=>{this.#q=!0;let R=O.detail?.px,Y=O.detail?.py;if(!Number.isFinite(R)||!Number.isFinite(Y))return;J.setAttribute("value",`${R*100}% ${Y*100}%`),this.#p(R,Y,{updateHandle:!1,emitInput:!0})},T=(O)=>{let R=O.detail?.px,Y=O.detail?.py;if(Number.isFinite(R)&&Number.isFinite(Y))J.setAttribute("value",`${R*100}% ${Y*100}%`),this.#p(R,Y,{updateHandle:!1,emitInput:!1});this.#q=!1,this.#k()};j.addEventListener("pointerdown",Q),j.addEventListener("pointermove",X),j.addEventListener("pointerup",Z),j.addEventListener("pointercancel",Z),j.addEventListener("lostpointercapture",Z),J.addEventListener("input",$),J.addEventListener("change",T),this.#H=()=>{j.removeEventListener("pointerdown",Q),j.removeEventListener("pointermove",X),j.removeEventListener("pointerup",Z),j.removeEventListener("pointercancel",Z),j.removeEventListener("lostpointercapture",Z),J.removeEventListener("input",$),J.removeEventListener("change",T),this.#q=!1}}#Kj(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=(Z,$)=>`<fig-tooltip text="${Z}">${$}</fig-tooltip>`,K=(Z,$,T,O,R,Y)=>`<fig-input-number class="${Z}" aria-label="${$}" min="${T}" max="${O}"${R!=null?` step="${R}"`:""}${Y?` units="${Y}"`:""}></fig-input-number>`,U=this.getAttribute("alpha")!=="false",Q=()=>U?J("Alpha",K("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):"",X;switch(this.#B){case"rgb":X=`<div class="input-combo">
+    `,this.#O=j.querySelector("canvas"),this.#L=j.querySelector("fig-handle"),this.#a(),this.#E(),this.#T(),this.#$j(),this.#_=j.querySelector('fig-slider[type="hue"]'),this.#_.addEventListener("input",(Q)=>{this.#K.h=parseFloat(Q.target.value),this.#E(),this.#T(),this.#y(),this.#U()}),this.#_.addEventListener("change",()=>{this.#V()}),J)this.#f=j.querySelector('fig-slider[type="opacity"]'),this.#f.addEventListener("input",(Q)=>{this.#K.a=parseFloat(Q.target.value)/100,this.#y(),this.#U()}),this.#f.addEventListener("change",()=>{this.#V()});j.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(Q)=>{let X=typeof Q.detail==="string"?Q.detail:Q.target?.value;if(!X)return;this.#S=X,this.#Wj()}),this.#Wj();let U=j.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)U.addEventListener("click",async()=>{try{let X=await new EyeDropper().open();this.#K={...this.#I(X.sRGBHex),a:this.#K.a},this.#E(),this.#T(),this.#y(),this.#U()}catch(Q){}});else U.setAttribute("disabled",""),U.title="EyeDropper not supported in this browser"}#tj(){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.#O=K,this.#$j()}this.#E(),this.#T()}this.#q(),this.#U()}#E(){if(!this.#O&&this.#j)this.#O=this.#j.querySelector('[data-tab="solid"] canvas');if(!this.#O)return;let j=this.#x==="display-p3"?"display-p3":"srgb",J=this.#O.getContext("2d",{colorSpace:j});if(!J)return;let K=this.#O.width,U=this.#O.height;J.clearRect(0,0,K,U);let Q=this.#K.h,X=this.#x==="display-p3",Z=J.createLinearGradient(0,0,K,0);if(X){Z.addColorStop(0,"color(display-p3 1 1 1)");let[z,W,L]=hslToP3(Q,100,50);Z.addColorStop(1,`color(display-p3 ${z} ${W} ${L})`)}else Z.addColorStop(0,"#FFFFFF"),Z.addColorStop(1,`hsl(${Q}, 100%, 50%)`);J.fillStyle=Z,J.fillRect(0,0,K,U);let O=J.createLinearGradient(0,0,0,U);O.addColorStop(0,"rgba(0,0,0,0)"),O.addColorStop(1,"rgba(0,0,0,1)"),J.fillStyle=O,J.fillRect(0,0,K,U)}#T(j=0){if(!this.#L||!this.#O)return;this.#a();let J=this.#O.getBoundingClientRect();if((J.width===0||J.height===0)&&j<5){this.#R(()=>this.#T(j+1));return}let K=Math.max(0,Math.min(100,this.#K.s)),U=Math.max(0,Math.min(100,100-this.#K.v));this.#L.setAttribute("value",`${K}% ${U}%`),this.#L.setAttribute("color",this.#H({...this.#K,a:1}))}#a(){if(!this.#L)return;this.#L.setAttribute("aria-valuenow",String(Math.round(this.#K.v))),this.#L.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#K.s)}%, brightness ${Math.round(this.#K.v)}%`),this.#L.removeAttribute("aria-pressed")}#t(j,J,K={}){let{updateHandle:U=!0,emitInput:Q=!0,emitChange:X=!1}=K;if(this.#K.s=Math.max(0,Math.min(100,j*100)),this.#K.v=Math.max(0,Math.min(100,(1-J)*100)),this.#L)this.#L.setAttribute("color",this.#H({...this.#K,a:1})),this.#a();if(U)this.#T();if(this.#y(),Q)this.#U();if(X)this.#V()}#$j(){if(this.#N)this.#N(),this.#N=null;if(!this.#O||!this.#L)return;let j=this.#O.parentElement||this.#O,J=this.#L,K=!1,U=(W,L={})=>{let Y=j.getBoundingClientRect();if(Y.width===0||Y.height===0)return;let $=Math.max(0,Math.min(W.clientX-Y.left,Y.width)),f=Math.max(0,Math.min(W.clientY-Y.top,Y.height));this.#t($/Y.width,f/Y.height,L)},Q=(W)=>{if(W.button!==0)return;if(W.target===J||J.contains(W.target))return;K=!0,this.#B=!0,j.setPointerCapture(W.pointerId),U(W,{updateHandle:!0,emitInput:!0})},X=(W)=>{if(!K)return;if(W.buttons===0){Z();return}U(W,{updateHandle:!0,emitInput:!0})},Z=()=>{if(!K)return;K=!1,this.#B=!1,this.#V()},O=(W)=>{this.#B=!0;let L=W.detail?.px,Y=W.detail?.py;if(!Number.isFinite(L)||!Number.isFinite(Y))return;J.setAttribute("value",`${L*100}% ${Y*100}%`),this.#t(L,Y,{updateHandle:!1,emitInput:!0})},z=(W)=>{let L=W.detail?.px,Y=W.detail?.py;if(Number.isFinite(L)&&Number.isFinite(Y))J.setAttribute("value",`${L*100}% ${Y*100}%`),this.#t(L,Y,{updateHandle:!1,emitInput:!1});this.#B=!1,this.#V()};j.addEventListener("pointerdown",Q),j.addEventListener("pointermove",X),j.addEventListener("pointerup",Z),j.addEventListener("pointercancel",Z),j.addEventListener("lostpointercapture",Z),J.addEventListener("input",O),J.addEventListener("change",z),this.#N=()=>{j.removeEventListener("pointerdown",Q),j.removeEventListener("pointermove",X),j.removeEventListener("pointerup",Z),j.removeEventListener("pointercancel",Z),j.removeEventListener("lostpointercapture",Z),J.removeEventListener("input",O),J.removeEventListener("change",z),this.#B=!1}}#Wj(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=(Z,O)=>`<fig-tooltip text="${Z}">${O}</fig-tooltip>`,K=(Z,O,z,W,L,Y)=>`<fig-input-number class="${Z}" aria-label="${O}" min="${z}" max="${W}"${L!=null?` step="${L}"`:""}${Y?` units="${Y}"`:""}></fig-input-number>`,U=this.getAttribute("alpha")!=="false",Q=()=>U?J("Alpha",K("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):"",X;switch(this.#S){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))}
@@ -75,9 +78,9 @@ import"./fig.js";import"./fig-lab.js";function C(j,J){if(!customElements.get(j))
         </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=U?`<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>
           ${Q()}
-        </div>`:'<fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>';break}j.innerHTML=X,this.#fj(),requestAnimationFrame(()=>this.#C())}#fj(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=()=>{if(this.#q)return;let Q=this.#Gj();if(!Q)return;let X=Number.isFinite(Q.a)?Q.a:this.#K.a;if(this.#K={...Q,a:X},this.#N(),this.#f(),this.#_)this.#_.setAttribute("value",this.#K.h);if(this.#z&&Number.isFinite(Q.a))this.#z.setAttribute("value",this.#K.a*100);this.#Q()},K=()=>this.#k();j.querySelectorAll("fig-input-number, fig-input-text").forEach((Q)=>{Q.addEventListener("input",J),Q.addEventListener("change",K)})}#kj(){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))}#Gj(){let j=(U)=>this.#j?.querySelector(`.${U}`),J=(U)=>parseFloat(j(U)?.value??0),K=(U)=>{if(!U)return null;let Q=this.#kj();return{...U,a:Q??U.a??this.#K.a}};switch(this.#B){case"rgb":return K(this.#y({r:J("fig-fill-picker-ci-r"),g:J("fig-fill-picker-ci-g"),b:J("fig-fill-picker-ci-b")}));case"hsl":{let U=this.#bj({h:J("fig-fill-picker-ci-h"),s:J("fig-fill-picker-ci-s"),l:J("fig-fill-picker-ci-l")});return K(this.#y(U))}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 U=this.#$j({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.#y(U))}case"lch":{let U=this.#mj({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.#y(U))}case"css":{let U=j("fig-fill-picker-ci-css");if(!U)return null;return this.#vj(U.value)}default:{let U=j("fig-fill-picker-ci-hex");if(!U)return null;let Q=U.value.replace(/^#/,"");if(Q.length===3)Q=Q[0]+Q[0]+Q[1]+Q[1]+Q[2]+Q[2];if(Q.length===8){let X=parseInt(Q.slice(6,8),16)/255;if(Q=Q.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(Q))return null;return{...this.#E(`#${Q}`),a:X}}if(Q.length!==6||!/^[0-9a-fA-F]{6}$/.test(Q))return null;return K(this.#E(`#${Q}`))}}}#C(){if(!this.#j)return;let j=this.#V(this.#K),J=this.#n(this.#K),K=(Q)=>this.#j.querySelector(`.${Q}`),U=(Q,X)=>{let Z=K(Q);if(Z)Z.setAttribute("value",X)};switch(this.#B){case"rgb":U("fig-fill-picker-ci-r",J.r),U("fig-fill-picker-ci-g",J.g),U("fig-fill-picker-ci-b",J.b);break;case"hsl":{let Q=this.#gj(J);U("fig-fill-picker-ci-h",Math.round(Q.h)),U("fig-fill-picker-ci-s",Math.round(Q.s)),U("fig-fill-picker-ci-l",Math.round(Q.l));break}case"hsb":U("fig-fill-picker-ci-h",Math.round(this.#K.h)),U("fig-fill-picker-ci-s",Math.round(this.#K.s)),U("fig-fill-picker-ci-v",Math.round(this.#K.v));break;case"lab":{let Q=this.#Zj(J);U("fig-fill-picker-ci-okl",Math.round(Q.l*100)),U("fig-fill-picker-ci-oka",+Q.a.toFixed(3)),U("fig-fill-picker-ci-okb",+Q.b.toFixed(3));break}case"lch":{let Q=this.#hj(J);U("fig-fill-picker-ci-okl",Math.round(Q.l*100)),U("fig-fill-picker-ci-okc",+Q.c.toFixed(3)),U("fig-fill-picker-ci-okh",Math.round(Q.h));break}case"css":U("fig-fill-picker-ci-css",this.#xj(this.#K));break;default:U("fig-fill-picker-ci-hex",j.replace(/^#/,"").toUpperCase());break}if(this.#B!=="css"){let Q=Math.round(this.#K.a*1000)/10;U("fig-fill-picker-ci-a",Number.isInteger(Q)?Q:+Q.toFixed(1))}if(this.#z)this.#z.setAttribute("color",j);this.#W()}#Dj(){let j=this.#j.querySelector('[data-tab="gradient"]'),J=H(this.#J);j.innerHTML=`
+        </div>`:'<fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>';break}j.innerHTML=X,this.#Nj(),this.#R(()=>this.#y())}#Nj(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=()=>{if(this.#B)return;let Q=this.#Mj();if(!Q)return;let X=Number.isFinite(Q.a)?Q.a:this.#K.a;if(this.#K={...Q,a:X},this.#E(),this.#T(),this.#_)this.#_.setAttribute("value",this.#K.h);if(this.#f&&Number.isFinite(Q.a))this.#f.setAttribute("value",this.#K.a*100);this.#U()},K=()=>this.#V();j.querySelectorAll("fig-input-number, fig-input-text").forEach((Q)=>{Q.addEventListener("input",J),Q.addEventListener("change",K)})}#Cj(){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))}#Mj(){let j=(U)=>this.#j?.querySelector(`.${U}`),J=(U)=>parseFloat(j(U)?.value??0),K=(U)=>{if(!U)return null;let Q=this.#Cj();return{...U,a:Q??U.a??this.#K.a}};switch(this.#S){case"rgb":return K(this.#P({r:J("fig-fill-picker-ci-r"),g:J("fig-fill-picker-ci-g"),b:J("fig-fill-picker-ci-b")}));case"hsl":{let U=this.#oj({h:J("fig-fill-picker-ci-h"),s:J("fig-fill-picker-ci-s"),l:J("fig-fill-picker-ci-l")});return K(this.#P(U))}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 U=this.#Gj({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.#P(U))}case"lch":{let U=this.#aj({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.#P(U))}case"css":{let U=j("fig-fill-picker-ci-css");if(!U)return null;return this.#ij(U.value)}default:{let U=j("fig-fill-picker-ci-hex");if(!U)return null;let Q=U.value.replace(/^#/,"");if(Q.length===3)Q=Q[0]+Q[0]+Q[1]+Q[1]+Q[2]+Q[2];if(Q.length===8){let X=parseInt(Q.slice(6,8),16)/255;if(Q=Q.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(Q))return null;return{...this.#I(`#${Q}`),a:X}}if(Q.length!==6||!/^[0-9a-fA-F]{6}$/.test(Q))return null;return K(this.#I(`#${Q}`))}}}#y(){if(!this.#j)return;let j=this.#H(this.#K),J=this.#Qj(this.#K),K=(Q)=>this.#j.querySelector(`.${Q}`),U=(Q,X)=>{let Z=K(Q);if(Z)Z.setAttribute("value",X)};switch(this.#S){case"rgb":U("fig-fill-picker-ci-r",J.r),U("fig-fill-picker-ci-g",J.g),U("fig-fill-picker-ci-b",J.b);break;case"hsl":{let Q=this.#rj(J);U("fig-fill-picker-ci-h",Math.round(Q.h)),U("fig-fill-picker-ci-s",Math.round(Q.s)),U("fig-fill-picker-ci-l",Math.round(Q.l));break}case"hsb":U("fig-fill-picker-ci-h",Math.round(this.#K.h)),U("fig-fill-picker-ci-s",Math.round(this.#K.s)),U("fig-fill-picker-ci-v",Math.round(this.#K.v));break;case"lab":{let Q=this.#kj(J);U("fig-fill-picker-ci-okl",Math.round(Q.l*100)),U("fig-fill-picker-ci-oka",+Q.a.toFixed(3)),U("fig-fill-picker-ci-okb",+Q.b.toFixed(3));break}case"lch":{let Q=this.#nj(J);U("fig-fill-picker-ci-okl",Math.round(Q.l*100)),U("fig-fill-picker-ci-okc",+Q.c.toFixed(3)),U("fig-fill-picker-ci-okh",Math.round(Q.h));break}case"css":U("fig-fill-picker-ci-css",this.#sj(this.#K));break;default:U("fig-fill-picker-ci-hex",j.replace(/^#/,"").toUpperCase());break}if(this.#S!=="css"){let Q=Math.round(this.#K.a*1000)/10;U("fig-fill-picker-ci-a",Number.isInteger(Q)?Q:+Q.toFixed(1))}if(this.#f)this.#f.setAttribute("color",j);this.#z()}#Ej(){let j=this.#j.querySelector('[data-tab="gradient"]'),J=N(this.#J);j.innerHTML=`
       <fig-field class="fig-fill-picker-gradient-header">
-        <fig-select class="fig-fill-picker-gradient-type" label="Gradient type" value="${L(this.#J.type)}">
+        <fig-select class="fig-fill-picker-gradient-type" label="Gradient type" value="${k(this.#J.type)}">
           <fig-select-options>
             <fig-select-option value="linear">Linear</fig-select-option>
             <fig-select-option value="radial">Radial</fig-select-option>
@@ -105,7 +108,7 @@ import"./fig.js";import"./fig-lab.js";function C(j,J){if(!customElements.get(j))
         </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:D(this.#J)})}'></fig-input-gradient>
+        <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:V(this.#J)})}'></fig-input-gradient>
       </fig-preview>
       <div class="fig-fill-picker-gradient-stops">
         <fig-header class="fig-fill-picker-gradient-stops-header" borderless>
@@ -123,28 +126,28 @@ import"./fig.js";import"./fig-lab.js";function C(j,J){if(!customElements.get(j))
           <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="${L(J)}">
+          <fig-select class="fig-fill-picker-gradient-space" label="Color interpolation" full value="${k(J)}">
             <fig-select-options>
-              ${this.#Fj()}
+              ${this.#Aj()}
             </fig-select-options>
           </fig-select>
         </fig-field>
       </div>
-    `,this.#D(),this.#Vj(j)}#Fj(){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 U=K.options.map((X)=>{let Z=X.method?X.method.charAt(0).toUpperCase()+X.method.slice(1):"",$=X.append||Z;return`<fig-select-option value="${L(X.value)}" label="${L(X.label)}">
+    `,this.#D(),this.#Sj(j)}#Aj(){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 U=K.options.map((X)=>{let Z=X.method?X.method.charAt(0).toUpperCase()+X.method.slice(1):"",O=X.append||Z;return`<fig-select-option value="${k(X.value)}" label="${k(X.label)}">
           <fig-interpolation-swatch slot="prepend" size="large" aria-hidden="true"></fig-interpolation-swatch>
-          ${L(X.label)}
-          ${$?`<span slot="append">${L($)}</span>`:""}
-        </fig-select-option>`}).join("");return`${K.label||K.separator?`<fig-menu-separator${K.label?` label="${L(K.label)}"`:""}></fig-menu-separator>`:""}${U}`}).join("")}#Vj(j){let J=(Y)=>typeof Y.detail==="string"?Y.detail:Y.target?.value,K=j.querySelector(".fig-fill-picker-gradient-bar-input"),U=(Y)=>{if(!K)return;this.#L=!0;try{K.setAttribute("value",JSON.stringify({type:"gradient",gradient:D(Y)}))}finally{this.#L=!1}},Q=()=>{U(this.#J)};j.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(Y)=>{let W=J(Y);if(!W)return;this.#J.type=W,this.#D(),this.#Q()});let Z=j.querySelector(".fig-fill-picker-gradient-space");if(Z?.querySelectorAll("fig-select-option").forEach((Y)=>{let W=()=>{let z=q(Y.getAttribute("value")||"srgb");U(f({...this.#J,...z}))};Y.addEventListener("pointerenter",W),Y.addEventListener("pointerleave",()=>{if(document.activeElement!==Y)Q()}),Y.addEventListener("focus",W),Y.addEventListener("blur",()=>{if(!Y.matches(":hover"))Q()})}),this.#P?.disconnect(),Z)this.#P=new MutationObserver(()=>{if(!Z.hasAttribute("open"))Q()}),this.#P.observe(Z,{attributes:!0,attributeFilter:["open"]});Z?.addEventListener("change",(Y)=>{let W=J(Y);if(!W)return;let z=q(W);this.#J=f({...this.#J,...z}),this.#D(),this.#Q()}),j.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(Y)=>{let W=parseFloat(Y.target.value)||0;this.#J.angle=(W+90)%360,this.#F(),this.#Q()});let T=j.querySelector(".fig-fill-picker-gradient-cx"),O=j.querySelector(".fig-fill-picker-gradient-cy");if(T?.addEventListener("input",(Y)=>{let W=Number.parseFloat(Y.target.value);this.#J.centerX=Number.isFinite(W)?W:50,this.#F(),this.#Q()}),O?.addEventListener("input",(Y)=>{let W=Number.parseFloat(Y.target.value);this.#J.centerY=Number.isFinite(W)?W:50,this.#F(),this.#Q()}),j.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#J.angle=(Number(this.#J.angle)+90)%360,this.#D(),this.#Q()}),j.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#J.stops.forEach((Y)=>{Y.position=100-Y.position}),this.#J.stops.sort((Y,W)=>Y.position-W.position),this.#D(),this.#Q()}),j.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#J.stops.push({position:50,color:"#888888",opacity:100}),this.#J.stops.sort((W,z)=>W.position-z.position),this.#D(),this.#Q()}),K){let Y=(W)=>{if(W.stopPropagation(),this.#L)return;let z=W.detail;if(!z?.gradient)return;this.#J=f({...this.#J,...z.gradient}),this.#W(),this.#w(),this.#Qj()};K.addEventListener("input",(W)=>{Y(W),this.#Q()}),K.addEventListener("change",(W)=>{Y(W),this.#k()})}j.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(Y)=>{this.#Bj(Y)})}#i(j){let J=String(j.color||"#888888").replace(/^#/,"").slice(0,6),K=j.opacity??100;if(K>=100)return`#${J}`;let U=Math.round(K/100*255).toString(16).padStart(2,"0");return`#${J}${U}`}#_j(j){if(!(j instanceof HTMLElement))return"#888888";if(j.hexOpaque)return this.#r(j.hexOpaque);let J=j.value;if(typeof J==="string"&&J.startsWith("#"))return this.#r(J.length>7?J.slice(0,7):J);let K=j.querySelector('fig-input-text:not([type="number"])'),U=String(K?.value??K?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(U))return`#${U.toUpperCase()}`;let Q=j.getAttribute("value");if(typeof Q==="string"&&Q.startsWith("#"))return this.#r(Q.length>7?Q.slice(0,7):Q);return"#888888"}#r(j){let J=String(j||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(J))return"#888888";return`#${J.toUpperCase()}`}#qj(j){let J=j.querySelector(".fig-fill-picker-stop-position"),K=j.querySelector(".fig-fill-picker-stop-color"),U=parseFloat(J?.value??J?.getAttribute("value")??"0")||0,Q=this.#_j(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.#J.stops[Z])X=this.#J.stops[Z].opacity??100}return{position:U,color:Q,opacity:X}}#l(j){let J=parseInt(j.dataset.index,10);if(isNaN(J)||J<0||J>=this.#J.stops.length)return;let K={...this.#J.stops[J],...this.#qj(j)};this.#J.stops[J]=K,this.#Hj(j,K)}#Hj(j,J){let K=j.querySelector(".fig-fill-picker-stop-position");if(K)K.setAttribute("value",String(J.position));let U=j.querySelector(".fig-fill-picker-stop-color");if(U)U.setAttribute("value",this.#i(J))}#Bj(j){let{oldIndex:J,newIndex:K}=j.detail??{};if(J==null||K==null||J===K||J<0||K<0||J>=this.#J.stops.length||K>=this.#J.stops.length)return;let Q=j.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");Q.forEach((Z)=>this.#l(Z));let[X]=this.#J.stops.splice(J,1);this.#J.stops.splice(K,0,X),Q.forEach((Z,$)=>{Z.dataset.index=String($)}),this.#L=!0;try{this.#w(),this.#F(),this.#Q()}finally{this.#L=!1}}#D(){if(!this.#j)return;let j=this.#j.querySelector('[data-tab="gradient"]');if(!j)return;this.#J=f(this.#J);let J=j.querySelector(".fig-fill-picker-gradient-angle"),K=j.querySelector(".fig-fill-picker-gradient-rotate"),U=j.querySelector(".fig-fill-picker-gradient-center");if(this.#J.type==="radial"){if(J.style.display="none",K)K.style.display="none";U.style.display="flex"}else{J.style.removeProperty("display"),K?.style.removeProperty("display"),U.style.display="none";let X=(this.#J.angle-90+360)%360;J.setAttribute("value",X)}let Q=j.querySelector(".fig-fill-picker-gradient-space");if(Q)Q.value=H(this.#J);this.#w(),this.#F(),this.#Qj()}#Nj(){let j=Array.isArray(this.#J.stops)?[...this.#J.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}))}#w(){if(!this.#j)return;let j=this.#Nj();this.#j.querySelectorAll("fig-interpolation-swatch").forEach((J)=>{let K=J.closest("fig-select-option")?.getAttribute("value")||"srgb",U=q(K),Q={type:"linear",stops:j,interpolationSpace:U.interpolationSpace};if(k.has(U.interpolationSpace))Q.hueInterpolation=U.hueInterpolation;J.value={type:"gradient",gradient:Q}})}#F(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-bar-input");if(j)this.#L=!0,j.setAttribute("value",JSON.stringify({type:"gradient",gradient:D(this.#J)})),this.#L=!1;this.#W()}#Qj(){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.#J.stops.length){this.#J.stops.forEach((U,Q)=>{let X=K[Q];X.dataset.index=Q;let Z=X.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",U.position);let $=X.querySelector(".fig-fill-picker-stop-color");if($)$.setAttribute("value",this.#i(U));let T=X.querySelector(".fig-fill-picker-stop-remove");if(T)if(this.#J.stops.length<=2)T.setAttribute("disabled","");else T.removeAttribute("disabled")});return}this.#Cj(j)}#Cj(j){let J=j.querySelector("fig-reorder");if(!J)return;J.innerHTML=this.#J.stops.map((K,U)=>`
+          ${k(X.label)}
+          ${O?`<span slot="append">${k(O)}</span>`:""}
+        </fig-select-option>`}).join("");return`${K.label||K.separator?`<fig-menu-separator${K.label?` label="${k(K.label)}"`:""}></fig-menu-separator>`:""}${U}`}).join("")}#Sj(j){let J=(Y)=>typeof Y.detail==="string"?Y.detail:Y.target?.value,K=j.querySelector(".fig-fill-picker-gradient-bar-input"),U=(Y)=>{if(!K)return;this.#G=!0;try{K.setAttribute("value",JSON.stringify({type:"gradient",gradient:V(Y)}))}finally{this.#G=!1}},Q=()=>{U(this.#J)};j.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(Y)=>{let $=J(Y);if(!$)return;this.#J.type=$,this.#D(),this.#U()});let Z=j.querySelector(".fig-fill-picker-gradient-space");if(Z?.querySelectorAll("fig-select-option").forEach((Y)=>{let $=()=>{let f=H(Y.getAttribute("value")||"srgb");U(R({...this.#J,...f}))};Y.addEventListener("pointerenter",$),Y.addEventListener("pointerleave",()=>{if(document.activeElement!==Y)Q()}),Y.addEventListener("focus",$),Y.addEventListener("blur",()=>{if(!Y.matches(":hover"))Q()})}),this.#w?.disconnect(),Z)this.#w=new MutationObserver(()=>{if(!Z.hasAttribute("open"))Q()}),this.#w.observe(Z,{attributes:!0,attributeFilter:["open"]});Z?.addEventListener("change",(Y)=>{let $=J(Y);if(!$)return;let f=H($);this.#J=R({...this.#J,...f}),this.#D(),this.#U()}),j.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(Y)=>{let $=parseFloat(Y.target.value)||0;this.#J.angle=($+90)%360,this.#q(),this.#U()});let z=j.querySelector(".fig-fill-picker-gradient-cx"),W=j.querySelector(".fig-fill-picker-gradient-cy");if(z?.addEventListener("input",(Y)=>{let $=Number.parseFloat(Y.target.value);this.#J.centerX=Number.isFinite($)?$:50,this.#q(),this.#U()}),W?.addEventListener("input",(Y)=>{let $=Number.parseFloat(Y.target.value);this.#J.centerY=Number.isFinite($)?$:50,this.#q(),this.#U()}),j.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#J.angle=(Number(this.#J.angle)+90)%360,this.#D(),this.#U()}),j.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#J.stops.forEach((Y)=>{Y.position=100-Y.position}),this.#J.stops.sort((Y,$)=>Y.position-$.position),this.#D(),this.#U()}),j.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#J.stops.push({position:50,color:"#888888",opacity:100}),this.#J.stops.sort(($,f)=>$.position-f.position),this.#D(),this.#U()}),K){let Y=($)=>{if($.stopPropagation(),this.#G)return;let f=$.detail;if(!f?.gradient)return;this.#J=R({...this.#J,...f.gradient}),this.#z(),this.#u(),this.#Oj()};K.addEventListener("input",($)=>{Y($),this.#U()}),K.addEventListener("change",($)=>{Y($),this.#V()})}j.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(Y)=>{this.#xj(Y)})}#e(j){let J=String(j.color||"#888888").replace(/^#/,"").slice(0,6),K=j.opacity??100;if(K>=100)return`#${J}`;let U=Math.round(K/100*255).toString(16).padStart(2,"0");return`#${J}${U}`}#yj(j){if(!(j instanceof HTMLElement))return"#888888";if(j.hexOpaque)return this.#jj(j.hexOpaque);let J=j.value;if(typeof J==="string"&&J.startsWith("#"))return this.#jj(J.length>7?J.slice(0,7):J);let K=j.querySelector('fig-input-text:not([type="number"])'),U=String(K?.value??K?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(U))return`#${U.toUpperCase()}`;let Q=j.getAttribute("value");if(typeof Q==="string"&&Q.startsWith("#"))return this.#jj(Q.length>7?Q.slice(0,7):Q);return"#888888"}#jj(j){let J=String(j||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(J))return"#888888";return`#${J.toUpperCase()}`}#Pj(j){let J=j.querySelector(".fig-fill-picker-stop-position"),K=j.querySelector(".fig-fill-picker-stop-color"),U=parseFloat(J?.value??J?.getAttribute("value")??"0")||0,Q=this.#yj(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.#J.stops[Z])X=this.#J.stops[Z].opacity??100}return{position:U,color:Q,opacity:X}}#Jj(j){let J=parseInt(j.dataset.index,10);if(isNaN(J)||J<0||J>=this.#J.stops.length)return;let K={...this.#J.stops[J],...this.#Pj(j)};this.#J.stops[J]=K,this.#Ij(j,K)}#Ij(j,J){let K=j.querySelector(".fig-fill-picker-stop-position");if(K)K.setAttribute("value",String(J.position));let U=j.querySelector(".fig-fill-picker-stop-color");if(U)U.setAttribute("value",this.#e(J))}#xj(j){let{oldIndex:J,newIndex:K}=j.detail??{};if(J==null||K==null||J===K||J<0||K<0||J>=this.#J.stops.length||K>=this.#J.stops.length)return;let Q=j.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");Q.forEach((Z)=>this.#Jj(Z));let[X]=this.#J.stops.splice(J,1);this.#J.stops.splice(K,0,X),Q.forEach((Z,O)=>{Z.dataset.index=String(O)}),this.#G=!0;try{this.#u(),this.#q(),this.#U()}finally{this.#G=!1}}#D(){if(!this.#j)return;let j=this.#j.querySelector('[data-tab="gradient"]');if(!j)return;this.#J=R(this.#J);let J=j.querySelector(".fig-fill-picker-gradient-angle"),K=j.querySelector(".fig-fill-picker-gradient-rotate"),U=j.querySelector(".fig-fill-picker-gradient-center");if(this.#J.type==="radial"){if(J.style.display="none",K)K.style.display="none";U.style.display="flex"}else{J.style.removeProperty("display"),K?.style.removeProperty("display"),U.style.display="none";let X=(this.#J.angle-90+360)%360;J.setAttribute("value",X)}let Q=j.querySelector(".fig-fill-picker-gradient-space");if(Q)Q.value=N(this.#J);this.#u(),this.#q(),this.#Oj()}#wj(){let j=Array.isArray(this.#J.stops)?[...this.#J.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}))}#u(){if(!this.#j)return;let j=this.#wj();this.#j.querySelectorAll("fig-interpolation-swatch").forEach((J)=>{let K=J.closest("fig-select-option")?.getAttribute("value")||"srgb",U=H(K),Q={type:"linear",stops:j,interpolationSpace:U.interpolationSpace};if(D.has(U.interpolationSpace))Q.hueInterpolation=U.hueInterpolation;J.value={type:"gradient",gradient:Q}})}#q(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-bar-input");if(j)this.#G=!0,j.setAttribute("value",JSON.stringify({type:"gradient",gradient:V(this.#J)})),this.#G=!1;this.#z()}#Oj(){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.#J.stops.length){this.#J.stops.forEach((U,Q)=>{let X=K[Q];X.dataset.index=Q;let Z=X.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",U.position);let O=X.querySelector(".fig-fill-picker-stop-color");if(O)O.setAttribute("value",this.#e(U));let z=X.querySelector(".fig-fill-picker-stop-remove");if(z)if(this.#J.stops.length<=2)z.setAttribute("disabled","");else z.removeAttribute("disabled")});return}this.#vj(j)}#vj(j){let J=j.querySelector("fig-reorder");if(!J)return;J.innerHTML=this.#J.stops.map((K,U)=>`
       <fig-field class="fig-fill-picker-gradient-stop-row" data-index="${U}">
         <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.#i(K)}"></fig-input-color>
+        <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.#e(K)}"></fig-input-color>
         <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#J.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.#l(K),this.#w(),this.#F(),this.#Q()});let U=K.querySelector(".fig-fill-picker-stop-color"),Q=U.querySelector("fig-fill-picker");if(Q)Q.anchorElement=this.#j;else requestAnimationFrame(()=>{let Z=U.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#j});let X=()=>{this.#l(K),this.#L=!0;try{this.#w(),this.#F(),this.#Q()}finally{this.#L=!1}};U.addEventListener("input",X),U.addEventListener("change",X),K.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let Z=parseInt(K.dataset.index,10);if(this.#J.stops.length>2)this.#J.stops.splice(Z,1),this.#D(),this.#Q()})})}#o(j,J=!0){let K=f({...this.#J,interpolationSpace:j??this.#J.interpolationSpace}),U=this.#A==="display-p3",Q=K.stops.map(($)=>{let T=($.opacity??100)/100;return`${U?this.#uj($.color,T):this.#Ij($.color,T)} ${$.position}%`}).join(", "),X=E(K),Z=J&&X?` ${X}`:"";switch(K.type){case"linear":return`linear-gradient(${K.angle}deg${Z}, ${Q})`;case"radial":return`radial-gradient(circle at ${K.centerX}% ${K.centerY}%${Z}, ${Q})`;case"angular":return`conic-gradient(from ${K.angle}deg${Z}, ${Q})`;default:return`linear-gradient(${K.angle}deg${Z}, ${Q})`}}static#Uj=new Map;#Xj(j){let J=F.#Uj.get(j);if(J!==void 0)return J;let K=document.createElement("div");K.style.background=j;let U=!!K.style.background;return F.#Uj.set(j,U),U}#Yj(){let j=this.#o(void 0,!0);if(this.#Xj(j))return j;let J=this.#o("oklab",!0);if(this.#Xj(J))return J;return this.#o("oklab",!1)}#Mj(){let j=this.#j.querySelector('[data-tab="image"]');j.innerHTML=`
+    `).join(""),J.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((K)=>{K.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#Jj(K),this.#u(),this.#q(),this.#U()});let U=K.querySelector(".fig-fill-picker-stop-color"),Q=U.querySelector("fig-fill-picker");if(Q)Q.anchorElement=this.#j;else this.#R(()=>{let Z=U.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#j});let X=()=>{this.#Jj(K),this.#G=!0;try{this.#u(),this.#q(),this.#U()}finally{this.#G=!1}};U.addEventListener("input",X),U.addEventListener("change",X),K.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let Z=parseInt(K.dataset.index,10);if(this.#J.stops.length>2)this.#J.stops.splice(Z,1),this.#D(),this.#U()})})}#Kj(j,J=!0){let K=R({...this.#J,interpolationSpace:j??this.#J.interpolationSpace}),U=this.#x==="display-p3",Q=K.stops.map((O)=>{let z=(O.opacity??100)/100;return`${U?this.#lj(O.color,z):this.#cj(O.color,z)} ${O.position}%`}).join(", "),X=y(K),Z=J&&X?` ${X}`:"";switch(K.type){case"linear":return`linear-gradient(${K.angle}deg${Z}, ${Q})`;case"radial":return`radial-gradient(circle at ${K.centerX}% ${K.centerY}%${Z}, ${Q})`;case"angular":return`conic-gradient(from ${K.angle}deg${Z}, ${Q})`;default:return`linear-gradient(${K.angle}deg${Z}, ${Q})`}}static#zj=new Map;#Lj(j){let J=_.#zj.get(j);if(J!==void 0)return J;let K=document.createElement("div");K.style.background=j;let U=!!K.style.background;return _.#zj.set(j,U),U}#fj(){let j=this.#Kj(void 0,!0);if(this.#Lj(j))return j;let J=this.#Kj("oklab",!0);if(this.#Lj(J))return J;return this.#Kj("oklab",!1)}#uj(){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="${L(this.#X.scaleMode)}">
+        <fig-select class="fig-fill-picker-scale-mode" label="Image scale mode" value="${k(this.#X.scaleMode)}">
           <fig-select-options>
             <fig-select-option value="fill">Fill</fig-select-option>
             <fig-select-option value="fit">Fit</fig-select-option>
@@ -153,26 +156,20 @@ import"./fig.js";import"./fig-lab.js";function C(j,J){if(!customElements.get(j))
           </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-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" alt="Image fill preview" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true"></fig-image>
-    `,this.#yj(j)}#yj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),K=j.querySelector(".fig-fill-picker-scale"),U=j.querySelector(".fig-fill-picker-image-preview");J.addEventListener("change",(Q)=>{let X=typeof Q.detail==="string"?Q.detail:Q.target?.value;if(!X)return;this.#X.scaleMode=X,K.style.display=X==="tile"?"block":"none",this.#M(U),this.#W(),this.#Q()}),K.addEventListener("input",(Q)=>{this.#X.scale=parseFloat(Q.target.value)||100,this.#M(U),this.#W(),this.#Q()}),U.addEventListener("loaded",(Q)=>{let X=Q.detail?.src||U.src;if(!X)return;this.#X.url=X,this.#M(U),this.#W(),this.#Q()}),U.addEventListener("change",()=>{if(U.src)return;this.#X.url=null,this.#M(U),this.#W(),this.#Q()}),this.#M(U)}#M(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}}#d(j){if(j.tagName==="FIG-MEDIA"){if(!this.#Z.url){j.removeAttribute("src"),j.classList.remove("has-media");return}j.setAttribute("src",this.#Z.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.#Z.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.#Z.scaleMode){case"fill":case"crop":j.style.objectFit="cover";break;case"fit":j.style.objectFit="contain";break}}#Ej(){let j=this.#j.querySelector('[data-tab="video"]');j.innerHTML=`
+    `,this.#gj(j)}#gj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),K=j.querySelector(".fig-fill-picker-scale"),U=j.querySelector(".fig-fill-picker-image-preview");J.addEventListener("change",(Q)=>{let X=typeof Q.detail==="string"?Q.detail:Q.target?.value;if(!X)return;this.#X.scaleMode=X,K.style.display=X==="tile"?"block":"none",this.#A(U),this.#z(),this.#U()}),K.addEventListener("input",(Q)=>{this.#X.scale=parseFloat(Q.target.value)||100,this.#A(U),this.#z(),this.#U()}),U.addEventListener("loaded",(Q)=>{let X=Q.detail?.src||U.src;if(!X)return;this.#X.url=X,this.#A(U),this.#z(),this.#U()}),U.addEventListener("change",()=>{if(U.src)return;this.#X.url=null,this.#A(U),this.#z(),this.#U()}),this.#A(U)}#A(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}}#g(j){if(j.tagName==="FIG-MEDIA"){if(!this.#Z.url){j.removeAttribute("src"),j.classList.remove("has-media");return}j.setAttribute("src",this.#Z.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.#Z.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.#Z.scaleMode){case"fill":case"crop":j.style.objectFit="cover";break;case"fit":j.style.objectFit="contain";break}}#bj(){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="${L(this.#Z.scaleMode)}">
+        <fig-select class="fig-fill-picker-scale-mode" label="Video scale mode" value="${k(this.#Z.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-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" 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.#Aj(j)}#Aj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),K=j.querySelector(".fig-fill-picker-video-preview");J.addEventListener("change",(U)=>{let Q=typeof U.detail==="string"?U.detail:U.target?.value;if(!Q)return;this.#Z.scaleMode=Q,this.#d(K),this.#W(),this.#Q()}),K.addEventListener("loaded",(U)=>{let Q=U.detail?.src||K.src;if(!Q)return;this.#Z.url=Q,this.#d(K),K.play?.(),this.#W(),this.#Q()}),K.addEventListener("change",()=>{if(K.src)return;this.#Z.url=null,this.#d(K),this.#W(),this.#Q()}),this.#d(K)}#Pj(){let j=this.#j.querySelector('[data-tab="webcam"]');j.innerHTML=`
+    `,this.#hj(j)}#hj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),K=j.querySelector(".fig-fill-picker-video-preview");J.addEventListener("change",(U)=>{let Q=typeof U.detail==="string"?U.detail:U.target?.value;if(!Q)return;this.#Z.scaleMode=Q,this.#g(K),this.#z(),this.#U()}),K.addEventListener("loaded",(U)=>{let Q=U.detail?.src||K.src;if(!Q)return;this.#Z.url=Q,this.#g(K),K.play?.(),this.#z(),this.#U()}),K.addEventListener("change",()=>{if(K.src)return;this.#Z.url=null,this.#g(K),this.#z(),this.#U()}),this.#g(K)}#mj(){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>
@@ -180,13 +177,13 @@ import"./fig.js";import"./fig-lab.js";function C(j,J){if(!customElements.get(j))
       </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">
+        <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>
+        <fig-button class="fig-fill-picker-webcam-capture" variant="secondary" full disabled>
           Capture
         </fig-button>
       </div>
-    `,this.#Sj(j)}#Sj(j){let J=j.querySelector(".fig-fill-picker-webcam-video"),K=j.querySelector(".fig-fill-picker-webcam-status"),U=j.querySelector(".fig-fill-picker-webcam-capture"),Q=j.querySelector(".fig-fill-picker-webcam-camera"),X=j.querySelector(".fig-fill-picker-camera-select"),Z=async($=null)=>{this.#m();let T=this.#I;try{let O={video:$?{deviceId:{exact:$}}:!0},R=await navigator.mediaDevices.getUserMedia(O);if(T!==this.#I||!this.isConnected||this.#x!=="webcam"){R.getTracks().forEach((z)=>z.stop());return}this.#$.stream=R,J.srcObject=R,J.style.display="block",K.style.display="none";let Y=await navigator.mediaDevices.enumerateDevices();if(T!==this.#I)return;let W=Y.filter((z)=>z.kind==="videoinput");if(W.length>1){Q.style.display="";let z=X.querySelector(":scope > fig-select-options");if(!z)z=document.createElement("fig-select-options"),X.append(z);if(z.replaceChildren(),W.forEach((G,B)=>{let V=document.createElement("fig-select-option");V.value=G.deviceId;let N=G.label||(W.length>1?`Camera ${B+1}`:"Camera");V.textContent=N.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(A,_)=>{return` ${/^\d+$/.test(_)?Number.parseInt(_,10).toString():_.replace(/^0+/,"")||"0"}`}),z.append(V)}),$)X.value=$}else Q.style.display="none",X.querySelector(":scope > fig-select-options")?.replaceChildren()}catch(O){if(T!==this.#I)return;console.error("Webcam error:",O.name,O.message);let R="Camera access denied";if(O.name==="NotAllowedError")R="Camera permission denied";else if(O.name==="NotFoundError")R="No camera found";else if(O.name==="NotReadableError")R="Camera in use by another app";else if(O.name==="OverconstrainedError")R="Camera constraints not supported";else if(!window.isSecureContext)R="Camera requires secure context";K.replaceChildren();let Y=document.createElement("span");Y.textContent=R,K.appendChild(Y),K.style.display="flex",J.style.display="none"}};this.#c=Z,X.addEventListener("change",($)=>{let T=typeof $.detail==="string"?$.detail:$.target?.value;if(T)Z(T)}),U.addEventListener("click",async()=>{if(!this.#$.stream)return;if(!J.videoWidth||!J.videoHeight)return;let $=document.createElement("canvas");$.width=J.videoWidth,$.height=J.videoHeight,$.getContext("2d").drawImage(J,0,0,$.width,$.height);let T=await new Promise((R)=>$.toBlob(R,"image/png"));if(!T)return;if(this.#$.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#$.snapshot);this.#$.snapshot=URL.createObjectURL(T),this.#X.url=this.#$.snapshot;let O=this.#j.querySelector(".fig-fill-picker-image-preview");if(O)this.#M(O);this.#s("image")})}#n(j){let J=j.h/360,K=j.s/100,U=j.v/100,Q,X,Z,$=Math.floor(J*6),T=J*6-$,O=U*(1-K),R=U*(1-T*K),Y=U*(1-(1-T)*K);switch($%6){case 0:Q=U,X=Y,Z=O;break;case 1:Q=R,X=U,Z=O;break;case 2:Q=O,X=U,Z=Y;break;case 3:Q=O,X=R,Z=U;break;case 4:Q=Y,X=O,Z=U;break;case 5:Q=U,X=O,Z=R;break}return{r:Math.round(Q*255),g:Math.round(X*255),b:Math.round(Z*255)}}#y(j){let J=j.r/255,K=j.g/255,U=j.b/255,Q=Math.max(J,K,U),X=Math.min(J,K,U),Z=Q-X,$=0,T=Q===0?0:Z/Q,O=Q;if(Q!==X){switch(Q){case J:$=(K-U)/Z+(K<U?6:0);break;case K:$=(U-J)/Z+2;break;case U:$=(J-K)/Z+4;break}$/=6}return{h:$*360,s:T*100,v:O*100,a:1}}#V(j){if(!j||typeof j.h!=="number"||typeof j.s!=="number"||typeof j.v!=="number")return"#D9D9D9";let J=this.#n(j),K=(U)=>{return(isNaN(U)?217:Math.max(0,Math.min(255,Math.round(U)))).toString(16).padStart(2,"0")};return`#${K(J.r)}${K(J.g)}${K(J.b)}`}#E(j){let J=parseInt(j.slice(1,3),16),K=parseInt(j.slice(3,5),16),U=parseInt(j.slice(5,7),16);return this.#y({r:J,g:K,b:U})}#Ij(j,J=1){let K=parseInt(j.slice(1,3),16),U=parseInt(j.slice(3,5),16),Q=parseInt(j.slice(5,7),16);return`rgba(${K}, ${U}, ${Q}, ${J})`}#wj(j){let J=Math.max(0,Math.min(1,Number(j)||0)),K=Math.round(J*1000)/1000;return String(K)}#xj(j=this.#K){let J=this.#n(j);return`rgba(${J.r}, ${J.g}, ${J.b}, ${this.#wj(j.a)})`}#vj(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 Q=K[1];if(Q.length===3)Q=Q[0]+Q[0]+Q[1]+Q[1]+Q[2]+Q[2];let X=1;if(Q.length===8)X=parseInt(Q.slice(6,8),16)/255,Q=Q.slice(0,6);return{...this.#E(`#${Q}`),a:X}}let U=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(U){let Q=Math.max(0,Math.min(255,Math.round(parseFloat(U[1])))),X=Math.max(0,Math.min(255,Math.round(parseFloat(U[2])))),Z=Math.max(0,Math.min(255,Math.round(parseFloat(U[3])))),$=U[4]!==void 0?Math.max(0,Math.min(1,parseFloat(U[4]))):1;if(![Q,X,Z,$].every(Number.isFinite))return null;return{...this.#y({r:Q,g:X,b:Z}),a:$}}return null}#uj(j,J=1){let K=+(parseInt(j.slice(1,3),16)/255).toFixed(4),U=+(parseInt(j.slice(3,5),16)/255).toFixed(4),Q=+(parseInt(j.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${K} ${U} ${Q} / ${J})`}#gj(j){let J=j.r/255,K=j.g/255,U=j.b/255,Q=Math.max(J,K,U),X=Math.min(J,K,U),Z,$,T=(Q+X)/2;if(Q===X)Z=$=0;else{let O=Q-X;switch($=T>0.5?O/(2-Q-X):O/(Q+X),Q){case J:Z=((K-U)/O+(K<U?6:0))/6;break;case K:Z=((U-J)/O+2)/6;break;case U:Z=((J-K)/O+4)/6;break}}return{h:Z*360,s:$*100,l:T*100}}#bj(j){let J=j.h/360,K=j.s/100,U=j.l/100,Q,X,Z;if(K===0)Q=X=Z=U;else{let $=(R,Y,W)=>{if(W<0)W+=1;if(W>1)W-=1;if(W<0.16666666666666666)return R+(Y-R)*6*W;if(W<0.5)return Y;if(W<0.6666666666666666)return R+(Y-R)*(0.6666666666666666-W)*6;return R},T=U<0.5?U*(1+K):U+K-U*K,O=2*U-T;Q=$(O,T,J+0.3333333333333333),X=$(O,T,J),Z=$(O,T,J-0.3333333333333333)}return{r:Math.round(Q*255),g:Math.round(X*255),b:Math.round(Z*255)}}#Zj(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),U=J(j.g),Q=J(j.b),X=0.4122214708*K+0.5363325363*U+0.0514459929*Q,Z=0.2119034982*K+0.6806995451*U+0.1073969566*Q,$=0.0883024619*K+0.2817188376*U+0.6299787005*Q,T=Math.cbrt(X),O=Math.cbrt(Z),R=Math.cbrt($);return{l:0.2104542553*T+0.793617785*O-0.0040720468*R,a:1.9779984951*T-2.428592205*O+0.4505937099*R,b:0.0259040371*T+0.7827717662*O-0.808675766*R}}#hj(j){let J=this.#Zj(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}}#$j(j){let J=j.l+0.3963377774*j.a+0.2158037573*j.b,K=j.l-0.1055613458*j.a-0.0638541728*j.b,U=j.l-0.0894841775*j.a-1.291485548*j.b,Q=J*J*J,X=K*K*K,Z=U*U*U,$=(T)=>{let O=T<=0.0031308?12.92*T:1.055*Math.pow(T,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,O))*255)};return{r:$(4.0767416621*Q-3.3077115913*X+0.2309699292*Z),g:$(-1.2684380046*Q+2.6097574011*X-0.3413193965*Z),b:$(-0.0041960863*Q-0.7034186147*X+1.707614701*Z)}}#mj(j){let J=j.h*Math.PI/180;return this.#$j({l:j.l,a:j.c*Math.cos(J),b:j.c*Math.sin(J)})}#Q(){this.#W(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#k(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let j={type:this.#O,colorSpace:this.#A};switch(this.#O){case"solid":return{...j,color:this.#V(this.#K),alpha:this.#K.a,hsv:{...this.#K}};case"gradient":return{...j,gradient:D(this.#J),css:this.#Yj()};case"image":return{...j,image:{...this.#X}};case"video":return{...j,video:{...this.#Z}};case"webcam":return{...j,image:{url:this.#$.snapshot,scaleMode:"fill",scale:50}};default:return{...j,...this.#v[this.#O]}}}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.#t(),this.#W(),this.#j){if(!this.#q){if(this.#f(),this.#C(),this.#_)this.#_.setAttribute("value",this.#K.h);if(this.#z)this.#z.setAttribute("value",this.#K.a*100),this.#z.setAttribute("color",this.#V(this.#K))}}break;case"disabled":this.#b();break;case"alpha":case"mode":case"experimental":{if(!this.#j)break;let U=this.#j.open;if(this.#jj(),U&&this.isConnected)this.#h();break}case"aria-label":case"aria-labelledby":case"aria-describedby":this.#b();break}}}C("fig-fill-picker",F);
+    `,this.#dj(j)}#dj(j){let J=j.querySelector(".fig-fill-picker-webcam-video"),K=j.querySelector(".fig-fill-picker-webcam-status"),U=j.querySelector(".fig-fill-picker-webcam-capture"),Q=j.querySelector(".fig-fill-picker-webcam-camera"),X=j.querySelector(".fig-fill-picker-camera-select"),Z=(W)=>{if(W)U.removeAttribute("disabled");else U.setAttribute("disabled","")},O=()=>{let W=!!this.#$.stream&&J.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&J.videoWidth>0&&J.videoHeight>0;if(Z(W),W)K.querySelector("span").textContent="Camera ready",K.style.display="none"};J.addEventListener("loadedmetadata",O),J.addEventListener("canplay",O);let z=async(W=null)=>{this.#r();let L=this.#v;Z(!1),K.querySelector("span").textContent="Starting camera",K.style.display="flex";try{let Y={video:W?{deviceId:{exact:W}}:!0},$=await navigator.mediaDevices.getUserMedia(Y);if(L!==this.#v||!this.isConnected||this.#b!=="webcam"){$.getTracks().forEach((G)=>G.stop());return}this.#$.stream=$,J.srcObject=$,J.style.display="block",O();let f=await navigator.mediaDevices.enumerateDevices();if(L!==this.#v)return;let T=f.filter((G)=>G.kind==="videoinput");if(T.length>1){Q.style.display="";let G=X.querySelector(":scope > fig-select-options");if(!G)G=document.createElement("fig-select-options"),X.append(G);if(G.replaceChildren(),T.forEach((B,C)=>{let F=document.createElement("fig-select-option");F.value=B.deviceId;let M=B.label||(T.length>1?`Camera ${C+1}`:"Camera");F.textContent=M.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(I,q)=>{return` ${/^\d+$/.test(q)?Number.parseInt(q,10).toString():q.replace(/^0+/,"")||"0"}`}),G.append(F)}),W)X.value=W}else Q.style.display="none",X.querySelector(":scope > fig-select-options")?.replaceChildren()}catch(Y){if(L!==this.#v)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.#n=z,X.addEventListener("change",(W)=>{let L=typeof W.detail==="string"?W.detail:W.target?.value;if(L)z(L)}),U.addEventListener("click",async()=>{if(!this.#$.stream)return;if(!J.videoWidth||!J.videoHeight)return;let W=document.createElement("canvas");W.width=J.videoWidth,W.height=J.videoHeight,W.getContext("2d").drawImage(J,0,0,W.width,W.height);let L=await new Promise(($)=>W.toBlob($,"image/png"));if(!L)return;if(this.#$.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#$.snapshot),this.#s.delete(this.#$.snapshot);this.#$.snapshot=URL.createObjectURL(L),this.#s.add(this.#$.snapshot),this.#X.url=this.#$.snapshot;let Y=this.#j.querySelector(".fig-fill-picker-image-preview");if(Y)this.#A(Y);this.#o("image")})}#Qj(j){let J=j.h/360,K=j.s/100,U=j.v/100,Q,X,Z,O=Math.floor(J*6),z=J*6-O,W=U*(1-K),L=U*(1-z*K),Y=U*(1-(1-z)*K);switch(O%6){case 0:Q=U,X=Y,Z=W;break;case 1:Q=L,X=U,Z=W;break;case 2:Q=W,X=U,Z=Y;break;case 3:Q=W,X=L,Z=U;break;case 4:Q=Y,X=W,Z=U;break;case 5:Q=U,X=W,Z=L;break}return{r:Math.round(Q*255),g:Math.round(X*255),b:Math.round(Z*255)}}#P(j){let J=j.r/255,K=j.g/255,U=j.b/255,Q=Math.max(J,K,U),X=Math.min(J,K,U),Z=Q-X,O=0,z=Q===0?0:Z/Q,W=Q;if(Q!==X){switch(Q){case J:O=(K-U)/Z+(K<U?6:0);break;case K:O=(U-J)/Z+2;break;case U:O=(J-K)/Z+4;break}O/=6}return{h:O*360,s:z*100,v:W*100,a:1}}#H(j){if(!j||typeof j.h!=="number"||typeof j.s!=="number"||typeof j.v!=="number")return"#D9D9D9";let J=this.#Qj(j),K=(U)=>{return(isNaN(U)?217:Math.max(0,Math.min(255,Math.round(U)))).toString(16).padStart(2,"0")};return`#${K(J.r)}${K(J.g)}${K(J.b)}`}#I(j){let J=parseInt(j.slice(1,3),16),K=parseInt(j.slice(3,5),16),U=parseInt(j.slice(5,7),16);return this.#P({r:J,g:K,b:U})}#cj(j,J=1){let K=parseInt(j.slice(1,3),16),U=parseInt(j.slice(3,5),16),Q=parseInt(j.slice(5,7),16);return`rgba(${K}, ${U}, ${Q}, ${J})`}#pj(j){let J=Math.max(0,Math.min(1,Number(j)||0)),K=Math.round(J*1000)/1000;return String(K)}#sj(j=this.#K){let J=this.#Qj(j);return`rgba(${J.r}, ${J.g}, ${J.b}, ${this.#pj(j.a)})`}#ij(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 Q=K[1];if(Q.length===3)Q=Q[0]+Q[0]+Q[1]+Q[1]+Q[2]+Q[2];let X=1;if(Q.length===8)X=parseInt(Q.slice(6,8),16)/255,Q=Q.slice(0,6);return{...this.#I(`#${Q}`),a:X}}let U=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(U){let Q=Math.max(0,Math.min(255,Math.round(parseFloat(U[1])))),X=Math.max(0,Math.min(255,Math.round(parseFloat(U[2])))),Z=Math.max(0,Math.min(255,Math.round(parseFloat(U[3])))),O=U[4]!==void 0?Math.max(0,Math.min(1,parseFloat(U[4]))):1;if(![Q,X,Z,O].every(Number.isFinite))return null;return{...this.#P({r:Q,g:X,b:Z}),a:O}}return null}#lj(j,J=1){let K=+(parseInt(j.slice(1,3),16)/255).toFixed(4),U=+(parseInt(j.slice(3,5),16)/255).toFixed(4),Q=+(parseInt(j.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${K} ${U} ${Q} / ${J})`}#rj(j){let J=j.r/255,K=j.g/255,U=j.b/255,Q=Math.max(J,K,U),X=Math.min(J,K,U),Z,O,z=(Q+X)/2;if(Q===X)Z=O=0;else{let W=Q-X;switch(O=z>0.5?W/(2-Q-X):W/(Q+X),Q){case J:Z=((K-U)/W+(K<U?6:0))/6;break;case K:Z=((U-J)/W+2)/6;break;case U:Z=((J-K)/W+4)/6;break}}return{h:Z*360,s:O*100,l:z*100}}#oj(j){let J=j.h/360,K=j.s/100,U=j.l/100,Q,X,Z;if(K===0)Q=X=Z=U;else{let O=(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=U<0.5?U*(1+K):U+K-U*K,W=2*U-z;Q=O(W,z,J+0.3333333333333333),X=O(W,z,J),Z=O(W,z,J-0.3333333333333333)}return{r:Math.round(Q*255),g:Math.round(X*255),b:Math.round(Z*255)}}#kj(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),U=J(j.g),Q=J(j.b),X=0.4122214708*K+0.5363325363*U+0.0514459929*Q,Z=0.2119034982*K+0.6806995451*U+0.1073969566*Q,O=0.0883024619*K+0.2817188376*U+0.6299787005*Q,z=Math.cbrt(X),W=Math.cbrt(Z),L=Math.cbrt(O);return{l:0.2104542553*z+0.793617785*W-0.0040720468*L,a:1.9779984951*z-2.428592205*W+0.4505937099*L,b:0.0259040371*z+0.7827717662*W-0.808675766*L}}#nj(j){let J=this.#kj(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}}#Gj(j){let J=j.l+0.3963377774*j.a+0.2158037573*j.b,K=j.l-0.1055613458*j.a-0.0638541728*j.b,U=j.l-0.0894841775*j.a-1.291485548*j.b,Q=J*J*J,X=K*K*K,Z=U*U*U,O=(z)=>{let W=z<=0.0031308?12.92*z:1.055*Math.pow(z,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,W))*255)};return{r:O(4.0767416621*Q-3.3077115913*X+0.2309699292*Z),g:O(-1.2684380046*Q+2.6097574011*X-0.3413193965*Z),b:O(-0.0041960863*Q-0.7034186147*X+1.707614701*Z)}}#aj(j){let J=j.h*Math.PI/180;return this.#Gj({l:j.l,a:j.c*Math.cos(J),b:j.c*Math.sin(J)})}#U(){if(this.#M())return;this.#z(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#V(){if(this.#M())return;this.#C=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let j={type:this.#W,colorSpace:this.#x};switch(this.#W){case"solid":return{...j,color:this.#H(this.#K),alpha:this.#K.a,hsv:{...this.#K}};case"gradient":return{...j,gradient:V(this.#J),css:this.#fj()};case"image":return{...j,image:{...this.#X}};case"video":return{...j,video:{...this.#Z}};case"webcam":return{...j,image:{url:this.#$.snapshot,scaleMode:"fill",scale:50}};default:return{...j,...this.#h[this.#W]}}}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.#Xj(),this.#z(),this.#j?.open&&!this.#B)this.#Hj(),this.#C=JSON.stringify(this.value);break;case"disabled":if(this.#F(),this.#M()&&this.#j?.open)this.close();break;case"alpha":case"mode":{if(!this.#j)break;let U=this.#j.open;if(this.#Zj(),U&&this.isConnected)this.#l();break}case"aria-label":if(this.#j)this.#j.setAttribute("aria-label",this.#i());case"aria-labelledby":case"aria-describedby":this.#F();break}}}E("fig-fill-picker",_);