@rogieking/figui3 11.5.0 → 11.6.1

package/dist/fig-editor.js

@@ -1,6 +1,6 @@
-import"./fig.js";import"./fig-property.js";function y(J,Z){if(!customElements.get(J))customElements.define(J,Z)}function k(J,Z){return J.hasAttribute(Z)&&J.getAttribute(Z)!=="false"}function r(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function x(J){if(!J)return"";return`url("${String(J).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function n(J){let Z=String(J??"").trim();if(!Z||Z.startsWith("{")||Z.startsWith("#"))return!1;if(Z.startsWith("data:video/"))return!0;try{let $=new URL(Z,"https://fig.local").pathname;return/\.(mp4|webm|mov|m4v|ogv)$/i.test($)}catch{return/\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(Z)}}function A(J,Z={}){let $=document.createElement("fig-icon");if(J)$.setAttribute("name",J);if(Z.size)$.setAttribute("size",Z.size);if(Z.className)$.className=Z.className;return $}function p(J,Z){let $=(X)=>{if(X===null||X===void 0||X===!1)return;if(Array.isArray(X)){X.forEach($);return}J.append(X instanceof Node?X:String(X))};return $(Z),J}function a(J,Z={}){for(let[$,X]of Object.entries(Z)){if(X===null||X===void 0||X===!1)continue;if($==="className")J.className=String(X);else if(X===!0)J.setAttribute($,"");else J.setAttribute($,String(X))}return J}function q(J,Z,$){let X=document.createElement(J);return a(X,Z),p(X,$)}class c extends HTMLElement{#Z={};static get observedAttributes(){return["x","y","units"]}connectedCallback(){this.#$(),this.#W()}attributeChangedCallback(J,Z,$){if(Z===$||!this.isConnected)return;if(J==="units")this.#J();else this.#K(J)}get value(){return{x:this.#B("x"),y:this.#B("y")}}#$(){if(this.#Z.x&&this.#Z.y)return;let J=(Z)=>{let $=Z.toUpperCase(),X=q("fig-input-number",{full:!0,"aria-label":`${$} coordinate`,"data-axis":Z},q("span",{slot:"prepend"},$));return X.addEventListener("input",(j)=>this.#U(Z,j)),X.addEventListener("change",(j)=>this.#U(Z,j)),this.#Z[Z]=X,X};this.replaceChildren(q("fig-input-combo",{full:!0},["x","y"].map(J)))}#W(){this.#K("x"),this.#K("y"),this.#J()}#K(J){let Z=this.#Z[J];if(!Z)return;let $=String(this.#B(J));if(Z.getAttribute("value")!==$)Z.setAttribute("value",$)}#J(){let J=this.getAttribute("units");for(let Z of Object.values(this.#Z))if(J===null)Z.removeAttribute("units");else Z.setAttribute("units",J)}#B(J){let Z=Number(this.getAttribute(J));return Number.isFinite(Z)?Z:0}#U(J,Z){Z.stopPropagation();let $=Number(Z.detail);this.setAttribute(J,String(Number.isFinite($)?$:0)),this.dispatchEvent(new CustomEvent(Z.type,{bubbles:!0,detail:this.value}))}}y("fig-input-point",c);function v(J){let Z=J;if(typeof Z==="string"){let $=Z.trim();if(!$)return[];try{Z=JSON.parse($)}catch{Z=$.includes(",")?$.split(","):[$]}}if(!Array.isArray(Z))return[];return Z.map(($)=>{if(typeof $==="string"){let X=$.trim();return{color:X.slice(0,7)||"#D9D9D9",alpha:X.length>7?Math.max(0,Math.min(1,parseInt(X.slice(7,9),16)/255)):1}}if($&&typeof $==="object"){let X=$.alpha!==void 0?Number($.alpha):$.opacity!==void 0?Number($.opacity)/100:1;return{color:String($.color||"#D9D9D9").slice(0,7),alpha:Number.isFinite(X)?Math.max(0,Math.min(1,X)):1}}return{color:"#D9D9D9",alpha:1}})}function t(J){let Z=String(J?.color||"#D9D9D9").slice(0,7),$=Math.max(0,Math.min(1,Number(J?.alpha??1)));if($>=1)return Z;return`${Z}${Math.round($*255).toString(16).padStart(2,"0")}`}function e(J,Z){if(!J&&!Z)return{color:"#D9D9D9",alpha:1};if(!J||!Z)return{...J||Z};let $=u(J.color),X=u(Z.color);return{color:`#${["r","g","b"].map((Y)=>Math.round(($[Y]+X[Y])/2).toString(16).padStart(2,"0")).join("").toUpperCase()}`,alpha:(Number(J.alpha??1)+Number(Z.alpha??1))/2}}var JJ="http://www.w3.org/2000/svg";function h(J,Z,$){let X=document.createElementNS(JJ,J);for(let[j,Y]of Object.entries(Z||{})){if(Y===null||Y===void 0||Y===!1)continue;if(j==="className")X.setAttribute("class",String(Y));else if(Y===!0)X.setAttribute(j,"");else X.setAttribute(j,String(Y))}return p(X,$)}function u(J){let Z=String(J||"").replace(/^#/,"");return{r:parseInt(Z.substring(0,2),16)||0,g:parseInt(Z.substring(2,4),16)||0,b:parseInt(Z.substring(4,6),16)||0}}function ZJ(J,Z,$){let X=J/255,j=Z/255,Y=$/255,Q=Math.max(X,j,Y),W=Math.min(X,j,Y),K=(Q+W)/2;if(Q===W)return{h:0,s:0,l:K*100};let z=Q-W,G=K>0.5?z/(2-Q-W):z/(Q+W),U;switch(Q){case X:U=((j-Y)/z+(j<Y?6:0))/6;break;case j:U=((Y-X)/z+2)/6;break;default:U=((X-j)/z+4)/6;break}return{h:U*360,s:G*100,l:K*100}}function w(J){let Z=J/255;return Z<=0.04045?Z/12.92:Math.pow((Z+0.055)/1.055,2.4)}function $J(J,Z,$){let X=w(J),j=w(Z),Y=w($),Q=Math.cbrt(0.4122214708*X+0.5363325363*j+0.0514459929*Y),W=Math.cbrt(0.2119034982*X+0.6806995451*j+0.1073969566*Y),K=Math.cbrt(0.0883024619*X+0.2817188376*j+0.6299787005*Y);return{l:0.2104542553*Q+0.793617785*W-0.0040720468*K,a:1.9779984951*Q-2.428592205*W+0.4505937099*K,b:0.0259040371*Q+0.7827717662*W-0.808675766*K}}function XJ(J,Z,$){return{l:J,c:Math.sqrt(Z*Z+$*$),h:Math.atan2($,Z)*180/Math.PI}}function jJ({owner:J,onStart:Z,onEnd:$,startClass:X="",endClass:j="",chevronClass:Y="",startLabel:Q="Scroll back",endLabel:W="Scroll forward"}={}){let K=(z,G)=>{let U=document.createElement("button");if(U.type="button",U.className=["fig-overflow",`fig-overflow-${z}`,z==="start"?X:j].filter(Boolean).join(" "),U.dataset.figOverflow=z,J)U.setAttribute(`data-fig-${J}-nav`,z);return U.setAttribute("tabindex","-1"),U.setAttribute("aria-label",z==="start"?Q:W),U.appendChild(A("chevron",{size:"small",className:["fig-overflow-chevron",Y].filter(Boolean).join(" ")})),U.addEventListener("click",(V)=>{V.preventDefault(),V.stopPropagation(),G?.(V)}),U};return{start:K("start",Z),end:K("end",$)}}function b(J,Z,$="x",X=2){if(!J||!Z)return!1;let j=$==="x",Y=j?Z.scrollWidth:Z.scrollHeight,Q=j?Z.clientWidth:Z.clientHeight,W=j?Z.scrollLeft:Z.scrollTop,K=Y-Q>X,z=!K||W<=X,G=!K||W+Q>=Y-X;return J.classList.toggle("overflow-start",!z),J.classList.toggle("overflow-end",!G),K}function g(J,Z="x",$=1){if(!J)return;let X=Z==="x",Y=(X?J.clientWidth:J.clientHeight)*0.8*$;J.scrollBy({[X?"left":"top"]:Y,behavior:"smooth"})}function YJ(J,Z,$="y",X="auto"){if(!J||!Z||!J.contains(Z))return;requestAnimationFrame(()=>{if(!J.isConnected||!Z.isConnected)return;let j=$==="x",Y=j?J.scrollWidth:J.scrollHeight,Q=j?J.clientWidth:J.clientHeight;if(Y<=Q+1){b(J,J,$);return}let W=Z.getBoundingClientRect(),K=J.getBoundingClientRect(),z=j?J.scrollLeft:J.scrollTop,G=(j?W.left-K.left:W.top-K.top)+z,U=j?W.width:W.height,V=Y-Q,H=Math.max(0,Math.min(G+U/2-Q/2,V));J.scrollTo({[j?"left":"top"]:H,behavior:X}),b(J,J,$)})}class s extends HTMLElement{#Z=[];#$=!1;static get observedAttributes(){return["value","min","max","fixed","disabled"]}get#W(){let J=Number.parseInt(this.getAttribute("min"),10);return Number.isFinite(J)?Math.max(0,J):2}get#K(){let J=Number.parseInt(this.getAttribute("max"),10);return Number.isFinite(J)?Math.max(this.#W,J):1/0}get#J(){return k(this,"fixed")}get#B(){return k(this,"disabled")}get value(){return this.#Z.map((J)=>({...J}))}set value(J){this.setAttribute("value",typeof J==="string"?J:JSON.stringify(J??[]))}connectedCallback(){this.#Z=v(this.getAttribute("value")),this.#X()}attributeChangedCallback(J,Z,$){if(Z===$||this.#$)return;if(J==="value")this.#Z=v($);if(this.isConnected)this.#X()}#U(){this.#$=!0,this.setAttribute("value",JSON.stringify(this.#Z)),this.#$=!1}#z(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:this.value}))}#H(J,{rerender:Z=!1}={}){if(this.#U(),Z)this.#X();this.#z(J)}#j(J){let Z=Number.parseInt(J?.dataset.index??"",10);if(this.#B||this.#J||this.#Z.length<=this.#W||!Number.isInteger(Z))return;this.#Z.splice(Z,1),this.#U(),this.#X(),this.#z("input"),this.#z("change")}#q(J,Z){let $=q("fig-input-color",{className:"fig-palette-editor-color",slot:"input",value:t(J),text:!0,alpha:!0,full:!0,disabled:this.#B||null,"aria-label":`Palette color ${Z+1}`}),X=(Y,Q)=>{Y.stopPropagation();let W=$.closest(".fig-palette-editor-color-row"),K=Number.parseInt(W?.dataset.index??"",10);if(!Number.isInteger(K)||!this.#Z[K])return;this.#Z[K]={color:$.hexOpaque||this.#Z[K]?.color||"#D9D9D9",alpha:$.rgba?.a??this.#Z[K]?.alpha??1},this.#H(Q)};$.addEventListener("input",(Y)=>X(Y,"input")),$.addEventListener("change",(Y)=>X(Y,"change"));let j=q("fig-property",{className:"fig-palette-editor-color-row","data-index":Z,leading:"drag",trailing:this.#J?null:"remove","show-trailing":this.#J?null:!0},$);return j.addEventListener("remove",(Y)=>{Y.stopPropagation(),this.#j(j)}),j}#Q=(J)=>{let Z=Number(J.detail?.oldIndex),$=Number(J.detail?.newIndex);if(!Number.isInteger(Z)||!Number.isInteger($)||Z===$||Z<0||$<0||Z>=this.#Z.length||$>=this.#Z.length)return;let[X]=this.#Z.splice(Z,1);this.#Z.splice($,0,X),this.querySelectorAll(".fig-palette-editor-color-row").forEach((j,Y)=>{j.dataset.index=String(Y),j.querySelector(".fig-palette-editor-color")?.setAttribute("aria-label",`Palette color ${Y+1}`),j.querySelector(".fig-palette-editor-remove")?.setAttribute("aria-label",`Remove color ${Y+1}`)}),this.#U(),this.#z("input"),this.#z("change")};#V(J){requestAnimationFrame(()=>{if(!this.isConnected)return;let Z=this.querySelector(`.fig-palette-editor-color-row[data-index="${J}"] .fig-palette-editor-color fig-input-text input`);Z?.focus(),Z?.select()})}#X(){let J=q("fig-reorder",{axis:"vertical",items:".fig-palette-editor-color-row","aria-label":"Palette colors",disabled:this.#B||null},this.#Z.map(($,X)=>this.#q($,X)));J.addEventListener("reorder",this.#Q);let Z=[J];if(!this.#J){let $=q("fig-button",{className:"fig-palette-editor-add",variant:"secondary",full:!0,disabled:this.#B||this.#Z.length>=this.#K||null},"Add color");$.addEventListener("click",()=>{if(this.#B||this.#Z.length>=this.#K)return;let X=this.#Z.length;this.#Z.push(e(this.#Z.at(-2),this.#Z.at(-1))),this.#U(),this.#X(),this.#z("input"),this.#z("change"),this.#V(X)}),Z.push(q("fig-field",{},$))}this.replaceChildren(...Z),this.querySelectorAll(".fig-palette-editor-color-row").forEach(($,X)=>{let j=$.querySelector(':scope > [data-fig-property-action="remove"]');if(!j)return;j.classList.add("fig-palette-editor-remove"),j.setAttribute("aria-label",`Remove color ${X+1}`),j.toggleAttribute("disabled",this.#B||this.#Z.length<=this.#W)})}}y("fig-palette-editor",s);function QJ(J){let Z=J||"";if(Z.startsWith("["))try{let X=JSON.parse(Z);return Array.isArray(X)?X:[]}catch{}let $=Z.includes(`
+import"./fig.js";import"./fig-property.js";import"./fig.js";import"./fig-property.js";var y={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};function k(Z,$={},J=[]){let X=document.createElement(Z);for(let[Q,j]of Object.entries($)){if(j===null||j===void 0||j===!1)continue;if(Q==="className")X.className=String(j);else if(j===!0)X.setAttribute(Q,"");else X.setAttribute(Q,String(j))}let Y=Array.isArray(J)?J:[J];for(let Q of Y){if(Q===null||Q===void 0||Q===!1)continue;X.append(Q instanceof Node?Q:String(Q))}return X}function p(Z){return k("fig-icon",{name:Z})}function JZ(Z,$){return{position:Number.isFinite(Number(Z?.position))?Math.max(0,Math.min(100,Number(Z.position))):$*100,color:c(Z?.color),opacity:Number.isFinite(Number(Z?.opacity))?Math.max(0,Math.min(100,Number(Z.opacity))):100}}function c(Z){let $=String(Z||"#888888").replace(/^#/,"").slice(0,6);return/^[0-9A-Fa-f]{6}$/.test($)?`#${$.toUpperCase()}`:"#888888"}function x(Z){let $=Z;if(typeof $==="string")try{$=JSON.parse($)}catch{$={}}if($?.type==="gradient"&&$.gradient)$=$.gradient;let J=$&&typeof $==="object"?$:{},X=Array.isArray(J.stops)?J.stops.map(JZ):y.stops.map((Y)=>({...Y}));return{...y,...J,type:["linear","radial","angular"].includes(J.type)?J.type:"linear",angle:Number.isFinite(Number(J.angle))?Number(J.angle):y.angle,centerX:Number.isFinite(Number(J.centerX))?Number(J.centerX):y.centerX,centerY:Number.isFinite(Number(J.centerY))?Number(J.centerY):y.centerY,interpolationSpace:"srgb",stops:X.length>=2?X:y.stops.map((Y)=>({...Y}))}}function XZ(Z,$,J){let X=parseInt(Z.slice(1,3),16),Y=parseInt(Z.slice(3,5),16),Q=parseInt(Z.slice(5,7),16);if(J==="display-p3")return`color(display-p3 ${+(X/255).toFixed(4)} ${+(Y/255).toFixed(4)} ${+(Q/255).toFixed(4)} / ${$})`;return`rgba(${X}, ${Y}, ${Q}, ${$})`}function u(Z,{colorSpace:$="srgb"}={}){let J=x(Z),X=J.stops.map((Y)=>`${XZ(Y.color,(Y.opacity??100)/100,$)} ${Y.position}%`).join(", ");switch(J.type){case"radial":return`radial-gradient(circle at ${J.centerX}% ${J.centerY}%, ${X})`;case"angular":return`conic-gradient(from ${J.angle}deg, ${X})`;default:return`linear-gradient(${J.angle}deg, ${X})`}}class s extends HTMLElement{#Z=x();#J=!1;#K=!1;#U=null;static get observedAttributes(){return["value","color-space","disabled"]}get value(){return structuredClone(this.#Z)}set value(Z){this.setAttribute("value",typeof Z==="string"?Z:JSON.stringify(Z??{}))}get cssValue(){return u(this.#Z,{colorSpace:this.getAttribute("color-space")||"srgb"})}get pickerAnchor(){return this.#U}set pickerAnchor(Z){this.#U=Z instanceof Element?Z:null,this.#T()}connectedCallback(){this.#Z=x(this.getAttribute("value")),this.#H()}attributeChangedCallback(Z,$,J){if($===J||this.#J)return;if(Z==="value")this.#Z=x(J);if(this.isConnected)this.#H()}refreshLayout(){this.querySelector(".fig-fill-picker-gradient-bar-input")?.refreshLayout?.()}#$(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#V(){this.#J=!0,this.setAttribute("value",JSON.stringify(this.#Z)),this.#J=!1}#q(){return{type:"gradient",gradient:this.value,css:this.cssValue}}#W(Z){this.#V(),this.dispatchEvent(new CustomEvent(Z,{bubbles:!0,composed:!0,detail:this.#q()}))}#H(){let Z=this.#$(),$=k("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#Z.type,variant:"ghost",disabled:Z},k("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([U,H])=>k("fig-select-option",{value:U},H)))),J=(U,H,z)=>k("fig-tooltip",{text:U},k("fig-button",{icon:!0,variant:"ghost",className:H,"aria-label":U,disabled:Z},p(z))),X=k("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[$,k("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[J("Flip gradient","fig-fill-picker-gradient-flip","swap"),J("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")])]),Y=k("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large",disabled:Z,value:JSON.stringify({type:"gradient",gradient:this.#Z})}),Q=k("fig-preview",{className:"fig-fill-picker-gradient-preview"},Y),j=k("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop",disabled:Z},p("add")),W=document.createElement("fig-reorder");W.toggleAttribute("disabled",Z);let K=k("div",{className:"fig-fill-picker-gradient-stops"},[k("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[k("h3",{},"Stops"),j]),k("div",{className:"fig-fill-picker-gradient-stops-list"},W)]);this.replaceChildren(X,Q,K),this.#j(W),this.#Q()}#Q(){this.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(X)=>{X.stopPropagation();let Y=typeof X.detail==="string"?X.detail:X.target?.value;if(!["linear","radial","angular"].includes(Y))return;this.#Z.type=Y,this.#G(),this.#W("input")}),this.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#Z.angle=(Number(this.#Z.angle)+90)%360,this.#G(),this.#W("input")}),this.querySelector(".fig-fill-picker-gradient-flip")?.addEventListener("click",()=>{this.#Z.stops.forEach((X)=>{X.position=100-X.position}),this.#Z.stops.sort((X,Y)=>X.position-Y.position),this.#H(),this.#W("input")}),this.querySelector(".fig-fill-picker-gradient-add")?.addEventListener("click",()=>{this.#Z.stops.push({position:50,color:"#888888",opacity:100}),this.#Z.stops.sort((X,Y)=>X.position-Y.position),this.#H(),this.#W("input")});let $=this.querySelector(".fig-fill-picker-gradient-bar-input"),J=(X)=>{if(X.stopPropagation(),this.#K||!X.detail?.gradient)return!1;return this.#Z=x({...this.#Z,...X.detail.gradient}),this.#j(this.querySelector(".fig-fill-picker-gradient-stops-list fig-reorder")),!0};$?.addEventListener("input",(X)=>{if(J(X))this.#W("input")}),$?.addEventListener("change",(X)=>{if(J(X))this.#W("change")}),this.querySelector("fig-reorder")?.addEventListener("reorder",(X)=>{let{oldIndex:Y,newIndex:Q}=X.detail??{};if(!Number.isInteger(Y)||!Number.isInteger(Q)||Y===Q)return;this.#X();let[j]=this.#Z.stops.splice(Y,1);this.#Z.stops.splice(Q,0,j),this.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((W,K)=>{W.dataset.index=String(K)}),this.#G(),this.#W("input")})}#B(Z){if((Z.opacity??100)>=100)return Z.color;return`${Z.color}${Math.round((Z.opacity??100)/100*255).toString(16).padStart(2,"0")}`}#Y(Z){let $=Z.querySelector(".fig-fill-picker-stop-position"),J=Z.querySelector(".fig-fill-picker-stop-color"),X=this.#Z.stops[Number(Z.dataset.index)]??{},Y=Number($?.value??$?.getAttribute("value")??0),Q=J?.hexOpaque||(typeof J?.value==="string"?J.value:"")||J?.getAttribute("value");return{position:Number.isFinite(Y)?Math.max(0,Math.min(100,Y)):0,color:c(String(Q||X.color).slice(0,7)),opacity:J?.rgba?.a!==void 0?Math.round(J.rgba.a*100):X.opacity??100}}#z(Z){let $=Number(Z.dataset.index);if(!Number.isInteger($)||!this.#Z.stops[$])return;this.#Z.stops[$]={...this.#Z.stops[$],...this.#Y(Z)};let J=this.#Z.stops[$];Z.querySelector(".fig-fill-picker-stop-position")?.setAttribute("value",String(J.position)),Z.querySelector(".fig-fill-picker-stop-color")?.setAttribute("value",this.#B(J))}#X(){this.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((Z)=>this.#z(Z))}#j(Z){if(!Z)return;let $=this.#$(),J=this.#Z.stops.map((X,Y)=>{let Q=k("fig-property",{className:"fig-fill-picker-gradient-stop-row","data-index":Y,leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},k("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[k("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:X.position,units:"%",disabled:$}),k("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right",value:this.#B(X),disabled:$})])),j=Q.querySelector(".fig-fill-picker-stop-position");j.addEventListener("input",()=>{this.#z(Q),this.#G(),this.#W("input")}),j.addEventListener("change",()=>{this.#z(Q),this.#G(),this.#W("change")});let W=Q.querySelector(".fig-fill-picker-stop-color");for(let K of["input","change"])W.addEventListener(K,(U)=>{U.stopPropagation(),this.#z(Q),this.#G(),this.#W(K)});return Q.addEventListener("remove",(K)=>{if(K.stopPropagation(),this.#Z.stops.length<=2)return;this.#Z.stops.splice(Number(Q.dataset.index),1),this.#H(),this.#W("input")}),Q});Z.replaceChildren(...J),Z.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((X)=>{let Y=X.querySelector(':scope > [data-fig-property-action="remove"]');if(!Y)return;Y.classList.add("fig-fill-picker-stop-remove"),Y.setAttribute("aria-label","Remove gradient stop"),Y.toggleAttribute("disabled",$||this.#Z.stops.length<=2)}),this.#T()}#G(){let Z=this.querySelector(".fig-fill-picker-gradient-bar-input");if(!Z)return;this.#K=!0,Z.value={type:"gradient",gradient:this.#Z},this.#K=!1}#T(){requestAnimationFrame(()=>{if(!this.isConnected)return;this.querySelectorAll(".fig-fill-picker-stop-color").forEach((Z)=>{let $=Z.querySelector("fig-fill-picker");if($)$.anchorElement=this.#U})})}}if(!customElements.get("fig-gradient-editor"))customElements.define("fig-gradient-editor",s);function P(Z,$){if(!customElements.get(Z))customElements.define(Z,$)}function T(Z,$){return Z.hasAttribute($)&&Z.getAttribute($)!=="false"}function YZ(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function h(Z){if(!Z)return"";return`url("${String(Z).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function QZ(Z){let $=String(Z??"").trim();if(!$||$.startsWith("{")||$.startsWith("#"))return!1;if($.startsWith("data:video/"))return!0;try{let J=new URL($,"https://fig.local").pathname;return/\.(mp4|webm|mov|m4v|ogv)$/i.test(J)}catch{return/\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test($)}}function E(Z,$={}){let J=document.createElement("fig-icon");if(Z)J.setAttribute("name",Z);if($.size)J.setAttribute("size",$.size);if($.className)J.className=$.className;return J}function r(Z,$){let J=(X)=>{if(X===null||X===void 0||X===!1)return;if(Array.isArray(X)){X.forEach(J);return}Z.append(X instanceof Node?X:String(X))};return J($),Z}function jZ(Z,$={}){for(let[J,X]of Object.entries($)){if(X===null||X===void 0||X===!1)continue;if(J==="className")Z.className=String(X);else if(X===!0)Z.setAttribute(J,"");else Z.setAttribute(J,String(X))}return Z}function B(Z,$,J){let X=document.createElement(Z);return jZ(X,$),r(X,J)}class n extends HTMLElement{#Z={};static get observedAttributes(){return["x","y","units"]}connectedCallback(){this.#J(),this.#K()}attributeChangedCallback(Z,$,J){if($===J||!this.isConnected)return;if(Z==="units")this.#$();else this.#U(Z)}get value(){return{x:this.#V("x"),y:this.#V("y")}}#J(){if(this.#Z.x&&this.#Z.y)return;let Z=($)=>{let J=$.toUpperCase(),X=B("fig-input-number",{full:!0,"aria-label":`${J} coordinate`,"data-axis":$},B("span",{slot:"prepend"},J));return X.addEventListener("input",(Y)=>this.#q($,Y)),X.addEventListener("change",(Y)=>this.#q($,Y)),this.#Z[$]=X,X};this.replaceChildren(B("fig-input-combo",{full:!0},["x","y"].map(Z)))}#K(){this.#U("x"),this.#U("y"),this.#$()}#U(Z){let $=this.#Z[Z];if(!$)return;let J=String(this.#V(Z));if($.getAttribute("value")!==J)$.setAttribute("value",J)}#$(){let Z=this.getAttribute("units");for(let $ of Object.values(this.#Z))if(Z===null)$.removeAttribute("units");else $.setAttribute("units",Z)}#V(Z){let $=Number(this.getAttribute(Z));return Number.isFinite($)?$:0}#q(Z,$){$.stopPropagation();let J=Number($.detail);this.setAttribute(Z,String(Number.isFinite(J)?J:0)),this.dispatchEvent(new CustomEvent($.type,{bubbles:!0,detail:this.value}))}}P("fig-input-point",n);function d(Z){let $=Z;if(typeof $==="string"){let J=$.trim();if(!J)return[];try{$=JSON.parse(J)}catch{$=J.includes(",")?J.split(","):[J]}}if(!Array.isArray($))return[];return $.map((J)=>{if(typeof J==="string"){let X=J.trim();return{color:X.slice(0,7)||"#D9D9D9",alpha:X.length>7?Math.max(0,Math.min(1,parseInt(X.slice(7,9),16)/255)):1}}if(J&&typeof J==="object"){let X=J.alpha!==void 0?Number(J.alpha):J.opacity!==void 0?Number(J.opacity)/100:1;return{color:String(J.color||"#D9D9D9").slice(0,7),alpha:Number.isFinite(X)?Math.max(0,Math.min(1,X)):1}}return{color:"#D9D9D9",alpha:1}})}function WZ(Z){let $=String(Z?.color||"#D9D9D9").slice(0,7),J=Math.max(0,Math.min(1,Number(Z?.alpha??1)));if(J>=1)return $;return`${$}${Math.round(J*255).toString(16).padStart(2,"0")}`}function KZ(Z,$){if(!Z&&!$)return{color:"#D9D9D9",alpha:1};if(!Z||!$)return{...Z||$};let J=g(Z.color),X=g($.color);return{color:`#${["r","g","b"].map((Q)=>Math.round((J[Q]+X[Q])/2).toString(16).padStart(2,"0")).join("").toUpperCase()}`,alpha:(Number(Z.alpha??1)+Number($.alpha??1))/2}}var UZ="http://www.w3.org/2000/svg";function l(Z,$,J){let X=document.createElementNS(UZ,Z);for(let[Y,Q]of Object.entries($||{})){if(Q===null||Q===void 0||Q===!1)continue;if(Y==="className")X.setAttribute("class",String(Q));else if(Q===!0)X.setAttribute(Y,"");else X.setAttribute(Y,String(Q))}return r(X,J)}function g(Z){let $=String(Z||"").replace(/^#/,"");return{r:parseInt($.substring(0,2),16)||0,g:parseInt($.substring(2,4),16)||0,b:parseInt($.substring(4,6),16)||0}}function zZ(Z,$,J){let X=Z/255,Y=$/255,Q=J/255,j=Math.max(X,Y,Q),W=Math.min(X,Y,Q),K=(j+W)/2;if(j===W)return{h:0,s:0,l:K*100};let U=j-W,H=K>0.5?U/(2-j-W):U/(j+W),z;switch(j){case X:z=((Y-Q)/U+(Y<Q?6:0))/6;break;case Y:z=((Q-X)/U+2)/6;break;default:z=((X-Y)/U+4)/6;break}return{h:z*360,s:H*100,l:K*100}}function v(Z){let $=Z/255;return $<=0.04045?$/12.92:Math.pow(($+0.055)/1.055,2.4)}function qZ(Z,$,J){let X=v(Z),Y=v($),Q=v(J),j=Math.cbrt(0.4122214708*X+0.5363325363*Y+0.0514459929*Q),W=Math.cbrt(0.2119034982*X+0.6806995451*Y+0.1073969566*Q),K=Math.cbrt(0.0883024619*X+0.2817188376*Y+0.6299787005*Q);return{l:0.2104542553*j+0.793617785*W-0.0040720468*K,a:1.9779984951*j-2.428592205*W+0.4505937099*K,b:0.0259040371*j+0.7827717662*W-0.808675766*K}}function HZ(Z,$,J){return{l:Z,c:Math.sqrt($*$+J*J),h:Math.atan2(J,$)*180/Math.PI}}function BZ({owner:Z,onStart:$,onEnd:J,startClass:X="",endClass:Y="",chevronClass:Q="",startLabel:j="Scroll back",endLabel:W="Scroll forward"}={}){let K=(U,H)=>{let z=document.createElement("button");if(z.type="button",z.className=["fig-overflow",`fig-overflow-${U}`,U==="start"?X:Y].filter(Boolean).join(" "),z.dataset.figOverflow=U,Z)z.setAttribute(`data-fig-${Z}-nav`,U);return z.setAttribute("tabindex","-1"),z.setAttribute("aria-label",U==="start"?j:W),z.appendChild(E("chevron",{size:"small",className:["fig-overflow-chevron",Q].filter(Boolean).join(" ")})),z.addEventListener("click",(q)=>{q.preventDefault(),q.stopPropagation(),H?.(q)}),z};return{start:K("start",$),end:K("end",J)}}function m(Z,$,J="x",X=2){if(!Z||!$)return!1;let Y=J==="x",Q=Y?$.scrollWidth:$.scrollHeight,j=Y?$.clientWidth:$.clientHeight,W=Y?$.scrollLeft:$.scrollTop,K=Q-j>X,U=!K||W<=X,H=!K||W+j>=Q-X;return Z.classList.toggle("overflow-start",!U),Z.classList.toggle("overflow-end",!H),K}function o(Z,$="x",J=1){if(!Z)return;let X=$==="x",Q=(X?Z.clientWidth:Z.clientHeight)*0.8*J;Z.scrollBy({[X?"left":"top"]:Q,behavior:"smooth"})}function LZ(Z,$,J="y",X="auto"){if(!Z||!$||!Z.contains($))return;requestAnimationFrame(()=>{if(!Z.isConnected||!$.isConnected)return;let Y=J==="x",Q=Y?Z.scrollWidth:Z.scrollHeight,j=Y?Z.clientWidth:Z.clientHeight;if(Q<=j+1){m(Z,Z,J);return}let W=$.getBoundingClientRect(),K=Z.getBoundingClientRect(),U=Y?Z.scrollLeft:Z.scrollTop,H=(Y?W.left-K.left:W.top-K.top)+U,z=Y?W.width:W.height,q=Q-j,V=Math.max(0,Math.min(H+z/2-j/2,q));Z.scrollTo({[Y?"left":"top"]:V,behavior:X}),m(Z,Z,J)})}class a extends HTMLElement{#Z=[];#J=!1;static get observedAttributes(){return["value","min","max","fixed","disabled"]}get#K(){let Z=Number.parseInt(this.getAttribute("min"),10);return Number.isFinite(Z)?Math.max(0,Z):2}get#U(){let Z=Number.parseInt(this.getAttribute("max"),10);return Number.isFinite(Z)?Math.max(this.#K,Z):1/0}get#$(){return T(this,"fixed")}get#V(){return T(this,"disabled")}get value(){return this.#Z.map((Z)=>({...Z}))}set value(Z){this.setAttribute("value",typeof Z==="string"?Z:JSON.stringify(Z??[]))}connectedCallback(){this.#Z=d(this.getAttribute("value")),this.#X()}attributeChangedCallback(Z,$,J){if($===J||this.#J)return;if(Z==="value")this.#Z=d(J);if(this.isConnected)this.#X()}#q(){this.#J=!0,this.setAttribute("value",JSON.stringify(this.#Z)),this.#J=!1}#W(Z){this.dispatchEvent(new CustomEvent(Z,{bubbles:!0,detail:this.value}))}#H(Z,{rerender:$=!1}={}){if(this.#q(),$)this.#X();this.#W(Z)}#Q(Z){let $=Number.parseInt(Z?.dataset.index??"",10);if(this.#V||this.#$||this.#Z.length<=this.#K||!Number.isInteger($))return;this.#Z.splice($,1),this.#q(),this.#X(),this.#W("input"),this.#W("change")}#B(Z,$){let J=B("fig-input-color",{className:"fig-palette-editor-color",slot:"input",value:WZ(Z),text:!0,alpha:!0,full:!0,disabled:this.#V||null,"aria-label":`Palette color ${$+1}`}),X=(Q,j)=>{Q.stopPropagation();let W=J.closest(".fig-palette-editor-color-row"),K=Number.parseInt(W?.dataset.index??"",10);if(!Number.isInteger(K)||!this.#Z[K])return;this.#Z[K]={color:J.hexOpaque||this.#Z[K]?.color||"#D9D9D9",alpha:J.rgba?.a??this.#Z[K]?.alpha??1},this.#H(j)};J.addEventListener("input",(Q)=>X(Q,"input")),J.addEventListener("change",(Q)=>X(Q,"change"));let Y=B("fig-property",{className:"fig-palette-editor-color-row","data-index":$,leading:"drag",trailing:this.#$?null:"remove","show-trailing":this.#$?null:!0},J);return Y.addEventListener("remove",(Q)=>{Q.stopPropagation(),this.#Q(Y)}),Y}#Y=(Z)=>{let $=Number(Z.detail?.oldIndex),J=Number(Z.detail?.newIndex);if(!Number.isInteger($)||!Number.isInteger(J)||$===J||$<0||J<0||$>=this.#Z.length||J>=this.#Z.length)return;let[X]=this.#Z.splice($,1);this.#Z.splice(J,0,X),this.querySelectorAll(".fig-palette-editor-color-row").forEach((Y,Q)=>{Y.dataset.index=String(Q),Y.querySelector(".fig-palette-editor-color")?.setAttribute("aria-label",`Palette color ${Q+1}`),Y.querySelector(".fig-palette-editor-remove")?.setAttribute("aria-label",`Remove color ${Q+1}`)}),this.#q(),this.#W("input"),this.#W("change")};#z(Z){requestAnimationFrame(()=>{if(!this.isConnected)return;let $=this.querySelector(`.fig-palette-editor-color-row[data-index="${Z}"] .fig-palette-editor-color fig-input-text input`);$?.focus(),$?.select()})}#X(){let Z=B("fig-reorder",{axis:"vertical",items:".fig-palette-editor-color-row","aria-label":"Palette colors",disabled:this.#V||null},this.#Z.map((J,X)=>this.#B(J,X)));Z.addEventListener("reorder",this.#Y);let $=[Z];if(!this.#$){let J=B("fig-button",{className:"fig-palette-editor-add",variant:"secondary",full:!0,disabled:this.#V||this.#Z.length>=this.#U||null},"Add color");J.addEventListener("click",()=>{if(this.#V||this.#Z.length>=this.#U)return;let X=this.#Z.length;this.#Z.push(KZ(this.#Z.at(-2),this.#Z.at(-1))),this.#q(),this.#X(),this.#W("input"),this.#W("change"),this.#z(X)}),$.push(B("fig-field",{},J))}this.replaceChildren(...$),this.querySelectorAll(".fig-palette-editor-color-row").forEach((J,X)=>{let Y=J.querySelector(':scope > [data-fig-property-action="remove"]');if(!Y)return;Y.classList.add("fig-palette-editor-remove"),Y.setAttribute("aria-label",`Remove color ${X+1}`),Y.toggleAttribute("disabled",this.#V||this.#Z.length<=this.#K)})}}P("fig-palette-editor",a);function VZ(Z){let $=Z||"";if($.startsWith("["))try{let X=JSON.parse($);return Array.isArray(X)?X:[]}catch{}let J=$.includes(`
 `)?`
-`:",";return Z.split($).map((X)=>X.trim()).filter(Boolean)}function WJ(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function KJ(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}function d(J){let Z=J.querySelector(":scope > fig-icon[data-fig-select-checkmark]");if(Z)return Z;return Z=A("checkmark",{size:"small",className:"fig-select-option-checkmark"}),Z.setAttribute("slot","prepend"),Z.setAttribute("aria-hidden","true"),Z.setAttribute("data-fig-select-checkmark",""),J.append(Z),Z}class l extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let J=this.getAttribute("value");if(J!==null)return J;return(this.textContent||"").trim()}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get disabled(){return k(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return k(this,"selected")}set selected(J){if(J)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");d(this),this.#Z()}attributeChangedCallback(J,Z,$){if(Z===$)return;if(J==="disabled")this.#Z()}#Z(){if(this.disabled)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}y("fig-select-option",l);class o extends HTMLElement{#Z=null;#$=null;#W=null;#K=null;#J=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#B(),this.#U(),this.addEventListener("scroll",this.#J,{passive:!0}),this.#W?.disconnect(),this.#W=new ResizeObserver(()=>this.syncOverflow()),this.#W.observe(this),this.#K?.disconnect(),this.#K=new MutationObserver(()=>{if(!this.isConnected)return;this.#U(),this.syncOverflow()}),this.#K.observe(this,{childList:!0}),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#J),this.#W?.disconnect(),this.#W=null,this.#K?.disconnect(),this.#K=null,this.#H()}syncOverflow(){return b(this,this,"y")}scrollToOption(J,Z="auto"){YJ(this,J,"y",Z)}#B(){let J=this.querySelector(":scope > fig-chooser");if(!J)return;while(J.firstChild)this.insertBefore(J.firstChild,J);J.remove()}#U(){if(this.#Z&&this.#$&&this.contains(this.#Z)&&this.contains(this.#$)){this.#z();return}this.#H();let J=jJ({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>g(this,"y",-1),onEnd:()=>g(this,"y",1)});this.#Z=J.start,this.#$=J.end,this.#z()}#z(){if(this.firstElementChild!==this.#Z)this.prepend(this.#Z);if(this.lastElementChild!==this.#$)this.append(this.#$)}#H(){this.#Z?.remove(),this.#$?.remove(),this.#Z=null,this.#$=null,this.classList.remove("overflow-start","overflow-end")}}y("fig-select-options",o);class i extends HTMLElement{#Z=null;#$=null;#W=null;#K=null;#J=null;#B=null;#U=null;#z=null;#H=null;#j=!1;#q=-1;#Q=!1;#V=!1;#X=null;#Y=!1;#F=null;#R=null;#L=!1;#f=null;#w=this.#WJ.bind(this);#O=()=>{queueMicrotask(()=>{if(!this.#Z?.matches(":focus-within"))return;this.toggleAttribute("data-focus-visible",this.#Z.hasAttribute("data-focus-visible")||this.#Z.matches(":focus-visible"))})};#M=()=>this.removeAttribute("data-focus-visible");#D=this.#vJ.bind(this);#T=this.#GJ.bind(this);#k=this.#hJ.bind(this);#N=this.#gJ.bind(this);#C=this.#VJ.bind(this);static get observedAttributes(){return["value","disabled","label","options","position","offset","closedby","open","variant","size","menu-anchor","aria-label"]}get value(){return this.getAttribute("value")??""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get open(){return k(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}get menuAnchor(){return this.#f??this.getAttribute("menu-anchor")}set menuAnchor(J){if(J instanceof Element){if(this.hasAttribute("menu-anchor"))this.removeAttribute("menu-anchor");this.#f=J}else if(typeof J==="string"&&J.trim())this.#f=null,this.setAttribute("menu-anchor",J);else this.#f=null,this.removeAttribute("menu-anchor");this.#c()}connectedCallback(){if(!this.#j)this.#e();if(this.#A(),this.#r(),this.#QJ(),this.#m(),this.#qJ(),this.#d(),this.#wJ(),this.#s(),this.open)this.#kJ()}disconnectedCallback(){this.#uJ(),document.removeEventListener("keydown",this.#k,!0),this.#H?.disconnect(),this.#H=null}attributeChangedCallback(J,Z,$){if(Z===$||!this.#j)return;if(J==="options"){this.#r(),this.#d();return}if(J==="value"||J==="label"||J==="aria-label"){this.#d();return}if(J==="disabled"){this.#QJ();return}if(J==="size"){this.#m();return}if(J==="open"){if($===null||$==="false")this.#yJ();else this.#kJ();return}if(J==="menu-anchor"){this.#f=null,this.#c();return}if(J==="position"||J==="offset"||J==="closedby"){if(this.#qJ(),this.open)this.#P()}}focus(J){this.#Z?.focus(J)}blur(){this.#Z?.blur()}#m(){if(!this.#Z)return;let J=this.getAttribute("size");if(J)this.#Z.setAttribute("size",J);else this.#Z.removeAttribute("size")}#u(J){return J?.nodeType===1&&(J.tagName==="FIG-SELECT-OPTION"||J.tagName==="FIG-SEPARATOR"||J.tagName==="FIG-SELECT-OPTIONS")}#A(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#I(){let Z=(this.#z?.assignedElements({flatten:!0})??[]).find(($)=>$.tagName==="FIG-SELECT-OPTIONS");if(Z)return Z;return this.querySelector(":scope > fig-select-options")}#b(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#t(){let J=this.#I();if(J){if(!J.hasAttribute("slot"))J.setAttribute("slot","panel");return J}return J=document.createElement("fig-select-options"),J.setAttribute("slot","panel"),J.setAttribute("data-fig-generated",""),this.appendChild(J),J}#r(){if(this.#b())return;let J=this.hasAttribute("options"),Z=J?this.#t():this.#I();if(!Z)return;this.#L=!0;try{for(let j of Z.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))j.remove();if(!J)return;let $=QJ(this.getAttribute("options")),X=Z.querySelector(":scope > .fig-overflow-end");for(let j of $){let Y=document.createElement("fig-select-option");if(Y.setAttribute("data-fig-generated",""),Y.setAttribute("value",WJ(j)),Y.textContent=KJ(j),X)Z.insertBefore(Y,X);else Z.appendChild(Y)}}finally{this.#L=!1}}#e(){this.#j=!0;let J=this.attachShadow({mode:"open"}),Z=document.createElement("style");Z.textContent=`
+`:",";return $.split(J).map((X)=>X.trim()).filter(Boolean)}function OZ(Z){if(Z&&typeof Z==="object")return String(Z.value??Z.label??"");return String(Z??"")}function _Z(Z){if(Z&&typeof Z==="object")return String(Z.label??Z.value??"");return String(Z??"")}function t(Z){let $=Z.querySelector(":scope > fig-icon[data-fig-select-checkmark]");if($)return $;return $=E("checkmark",{size:"small",className:"fig-select-option-checkmark"}),$.setAttribute("slot","prepend"),$.setAttribute("aria-hidden","true"),$.setAttribute("data-fig-select-checkmark",""),Z.append($),$}class e extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let Z=this.getAttribute("value");if(Z!==null)return Z;return(this.textContent||"").trim()}set value(Z){if(Z===null||Z===void 0)this.removeAttribute("value");else this.setAttribute("value",String(Z))}get disabled(){return T(this,"disabled")}set disabled(Z){if(Z)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return T(this,"selected")}set selected(Z){if(Z)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");t(this),this.#Z()}attributeChangedCallback(Z,$,J){if($===J)return;if(Z==="disabled")this.#Z()}#Z(){if(this.disabled)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}P("fig-select-option",e);class ZZ extends HTMLElement{#Z=null;#J=null;#K=null;#U=null;#$=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#V(),this.#q(),this.addEventListener("scroll",this.#$,{passive:!0}),this.#K?.disconnect(),this.#K=new ResizeObserver(()=>this.syncOverflow()),this.#K.observe(this),this.#U?.disconnect(),this.#U=new MutationObserver(()=>{if(!this.isConnected)return;this.#q(),this.syncOverflow()}),this.#U.observe(this,{childList:!0}),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#$),this.#K?.disconnect(),this.#K=null,this.#U?.disconnect(),this.#U=null,this.#H()}syncOverflow(){return m(this,this,"y")}scrollToOption(Z,$="auto"){LZ(this,Z,"y",$)}#V(){let Z=this.querySelector(":scope > fig-chooser");if(!Z)return;while(Z.firstChild)this.insertBefore(Z.firstChild,Z);Z.remove()}#q(){if(this.#Z&&this.#J&&this.contains(this.#Z)&&this.contains(this.#J)){this.#W();return}this.#H();let Z=BZ({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>o(this,"y",-1),onEnd:()=>o(this,"y",1)});this.#Z=Z.start,this.#J=Z.end,this.#W()}#W(){if(this.firstElementChild!==this.#Z)this.prepend(this.#Z);if(this.lastElementChild!==this.#J)this.append(this.#J)}#H(){this.#Z?.remove(),this.#J?.remove(),this.#Z=null,this.#J=null,this.classList.remove("overflow-start","overflow-end")}}P("fig-select-options",ZZ);class $Z extends HTMLElement{#Z=null;#J=null;#K=null;#U=null;#$=null;#V=null;#q=null;#W=null;#H=null;#Q=!1;#B=-1;#Y=!1;#z=!1;#X=null;#j=!1;#G=null;#T=null;#O=!1;#_=null;#w=this.#WZ.bind(this);#f=()=>{queueMicrotask(()=>{if(!this.#Z?.matches(":focus-within"))return;this.toggleAttribute("data-focus-visible",this.#Z.hasAttribute("data-focus-visible")||this.#Z.matches(":focus-visible"))})};#k=()=>this.removeAttribute("data-focus-visible");#P=this.#hZ.bind(this);#F=this.#BZ.bind(this);#N=this.#vZ.bind(this);#R=this.#gZ.bind(this);#A=this.#qZ.bind(this);static get observedAttributes(){return["value","disabled","label","options","position","offset","closedby","open","variant","size","menu-anchor","aria-label"]}get value(){return this.getAttribute("value")??""}set value(Z){if(Z===null||Z===void 0)this.removeAttribute("value");else this.setAttribute("value",String(Z))}get open(){return T(this,"open")}set open(Z){if(Z)this.setAttribute("open","");else this.removeAttribute("open")}get menuAnchor(){return this.#_??this.getAttribute("menu-anchor")}set menuAnchor(Z){if(Z instanceof Element){if(this.hasAttribute("menu-anchor"))this.removeAttribute("menu-anchor");this.#_=Z}else if(typeof Z==="string"&&Z.trim())this.#_=null,this.setAttribute("menu-anchor",Z);else this.#_=null,this.removeAttribute("menu-anchor");this.#s()}connectedCallback(){if(!this.#Q)this.#e();if(this.#y(),this.#r(),this.#jZ(),this.#p(),this.#HZ(),this.#l(),this.#wZ(),this.#d(),this.open)this.#kZ()}disconnectedCallback(){this.#bZ(),document.removeEventListener("keydown",this.#N,!0),this.#H?.disconnect(),this.#H=null}attributeChangedCallback(Z,$,J){if($===J||!this.#Q)return;if(Z==="options"){this.#r(),this.#l();return}if(Z==="value"||Z==="label"||Z==="aria-label"){this.#l();return}if(Z==="disabled"){this.#jZ();return}if(Z==="size"){this.#p();return}if(Z==="open"){if(J===null||J==="false")this.#CZ();else this.#kZ();return}if(Z==="menu-anchor"){this.#_=null,this.#s();return}if(Z==="position"||Z==="offset"||Z==="closedby"){if(this.#HZ(),this.open)this.#D()}}focus(Z){this.#Z?.focus(Z)}blur(){this.#Z?.blur()}#p(){if(!this.#Z)return;let Z=this.getAttribute("size");if(Z)this.#Z.setAttribute("size",Z);else this.#Z.removeAttribute("size")}#b(Z){return Z?.nodeType===1&&(Z.tagName==="FIG-SELECT-OPTION"||Z.tagName==="FIG-SEPARATOR"||Z.tagName==="FIG-SELECT-OPTIONS")}#y(){for(let Z of this.querySelectorAll(":scope > fig-select-options"))if(!Z.hasAttribute("slot"))Z.setAttribute("slot","panel")}#I(){let $=(this.#W?.assignedElements({flatten:!0})??[]).find((J)=>J.tagName==="FIG-SELECT-OPTIONS");if($)return $;return this.querySelector(":scope > fig-select-options")}#u(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#t(){let Z=this.#I();if(Z){if(!Z.hasAttribute("slot"))Z.setAttribute("slot","panel");return Z}return Z=document.createElement("fig-select-options"),Z.setAttribute("slot","panel"),Z.setAttribute("data-fig-generated",""),this.appendChild(Z),Z}#r(){if(this.#u())return;let Z=this.hasAttribute("options"),$=Z?this.#t():this.#I();if(!$)return;this.#O=!0;try{for(let Y of $.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))Y.remove();if(!Z)return;let J=VZ(this.getAttribute("options")),X=$.querySelector(":scope > .fig-overflow-end");for(let Y of J){let Q=document.createElement("fig-select-option");if(Q.setAttribute("data-fig-generated",""),Q.setAttribute("value",OZ(Y)),Q.textContent=_Z(Y),X)$.insertBefore(Q,X);else $.appendChild(Q)}}finally{this.#O=!1}}#e(){this.#Q=!0;let Z=this.attachShadow({mode:"open"}),$=document.createElement("style");$.textContent=`
         :host {
           display: inline-flex;
           position: relative;
@@ -105,4 +105,4 @@ import"./fig.js";import"./fig-property.js";function y(J,Z){if(!customElements.ge
           min-height: 0;
           max-height: inherit;
         }
-    `,J.appendChild(Z);let $=document.createElement("fig-button");$.className="fig-select-trigger",$.setAttribute("part","trigger"),$.setAttribute("variant","ghost"),$.setAttribute("aria-haspopup","listbox"),$.setAttribute("aria-expanded","false");let X=document.createElement("span");X.className="fig-select-prepend",X.setAttribute("part","prepend"),X.setAttribute("aria-hidden","true");let j=document.createElement("slot");j.setAttribute("name","prepend-trigger"),j.hidden=!0;let Y=document.createElement("span");Y.className="fig-select-prepend-fallback",X.append(j,Y);let Q=document.createElement("span");Q.className="fig-select-label",Q.setAttribute("part","label");let W=document.createElement("slot");W.setAttribute("name","trigger"),W.hidden=!0,$.append(X,Q,W);let K=document.createElement("dialog",{is:"fig-popup"});if(K.setAttribute("is","fig-popup"),K.setAttribute("part","listbox"),K.setAttribute("theme","menu"),K.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)K.setAttribute("popover","manual");K.id=r(),$.setAttribute("aria-controls",K.id);let z=document.createElement("slot");if(z.setAttribute("name","panel"),K.appendChild(z),J.append($,K),this.#Z=$,this.#W=X,this.#K=j,this.#J=Y,this.#B=W,this.#U=Q,this.#$=K,this.#z=z,this.#c(),this.#A(),this.#x(),!this.hasAttribute("value")){let G=this.#XJ().find((U)=>k(U,"selected"));if(G)this.setAttribute("value",G.value)}}#x(){if(!this.#$||this.#V)return;if(typeof this.#$.positionPopup!=="function")return;this.#X=this.#$.positionPopup.bind(this.#$),this.#$.positionPopup=()=>{if(!this.open){this.#X?.();return}this.#P()},this.#V=!0}#n(J){if(!J)return null;let Z=document.createRange();Z.selectNodeContents(J);let $=[...Z.getClientRects()].filter((X)=>X.width>0&&X.height>0);if($.length)return $[0];return J.getBoundingClientRect()}#v(){if(typeof this.#$?.parseViewportMargins==="function")return this.#$.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#y(){if(this.#f?.isConnected)return this.#f;let J=this.getAttribute("menu-anchor");if(J)try{let Z=this.parentElement?.querySelector(J);if(Z&&Z!==this&&!this.contains(Z))return Z;let X=this.getRootNode()?.querySelector?.(J);if(X&&X!==this&&!this.contains(X))return X}catch{}return null}#JJ(){return this.#y()||this.#Z}#p(){return Boolean(this.#y())}#zJ(){return!this.#UJ()&&this.#p()}#c(){if(!this.#$)return;if(this.#$.anchor=this.#JJ(),this.#l(),!this.open)return;this.#Y=!1,this.#F=null,this.#R=null,this.#$.setupObservers?.(),this.#$.queueReposition?.()}#ZJ(){let J=this.#U?.getBoundingClientRect();if(J?.width&&J?.height)return J;let Z=this.querySelector(':scope > [slot="trigger"]')?.getBoundingClientRect();if(Z?.width&&Z?.height)return Z;return this.#W?.getBoundingClientRect()??null}#a(){let Z=(this.#zJ()?this.#y():null)?.getBoundingClientRect()??this.#ZJ();if(!Z)return null;return{x:Z.x,y:Z.y,width:Z.width,height:Z.height}}#$J(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#AJ(J,Z,$=0.25){if(!J&&!Z)return!1;if(!J||!Z)return!0;return Math.abs(J.x-Z.x)>$||Math.abs(J.y-Z.y)>$||Math.abs(J.width-Z.width)>$||Math.abs(J.height-Z.height)>$}#EJ(J,Z,$=0.25){if(!J&&!Z)return!1;if(!J||!Z)return!0;return Math.abs(J.width-Z.width)>$||Math.abs(J.height-Z.height)>$||Math.abs(J.offsetLeft-Z.offsetLeft)>$||Math.abs(J.offsetTop-Z.offsetTop)>$}#SJ(){if(!this.#Y)return!1;let J=this.#AJ(this.#F,this.#a()),Z=this.#EJ(this.#R,this.#$J());return!J&&!Z}#RJ(){this.#F=this.#a(),this.#R=this.#$J()}#UJ(){let J=this.getAttribute("position");return Boolean(J&&J.trim())}#IJ(){if(!this.#$)return;this.#$.style.removeProperty("left"),this.#$.style.removeProperty("top"),this.#$.style.removeProperty("right"),this.#$.style.removeProperty("bottom")}#P(){if(this.#UJ()){if(this.#Y=!1,this.#F=null,this.#R=null,this.#l(),this.#IJ(),this.#xJ())return;this.#X?.(),this.#OJ();return}this.#YJ()}#xJ(){let J=this.#$,Z=this.#y();if(!J||!Z||typeof J.parsePosition!=="function"||typeof J.parseOffset!=="function"||typeof J.computeCoords!=="function")return!1;let $=J.getBoundingClientRect(),X=Z.getBoundingClientRect();if(!$.width||!$.height)return!1;let{vertical:j,horizontal:Y,shorthand:Q}=J.parsePosition(),W=J.parseOffset(),{left:K,top:z}=J.computeCoords(X,$,j,Y,W,Q),G=this.#v();if(typeof J.clampToViewport==="function")({left:K,top:z}=J.clampToViewport({left:K,top:z},$,G));return J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(K)}px`,"important"),J.style.setProperty("top",`${Math.round(z)}px`,"important"),!0}#OJ(){let J=this.#$;if(!J||typeof J.clampToViewport!=="function")return;let Z=J.getBoundingClientRect();if(!Z.width||!Z.height)return;let $=this.#v(),{left:X,top:j}=J.clampToViewport({left:Z.left,top:Z.top},Z,$);J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(X)}px`,"important"),J.style.setProperty("top",`${Math.round(j)}px`,"important")}#YJ(){if(this.#SJ()){this.#OJ();return}let J=this.#$,Z=this.#U;if(!J||!Z){this.#X?.();return}let $=this.#XJ(),X=$.find((L)=>this.#E(L)===this.value)||$[0];if(!X){this.#X?.();return}let j=this.#zJ()?this.#y():null;if(j)this.#l();this.#X?.();let Y=J.getBoundingClientRect(),Q=X.getBoundingClientRect();if(!Y.width||!Y.height||!Q.height)return;let W,K,z;if(j){let L=j.getBoundingClientRect();z=L,W=L.left+(L.width-Y.width)/2,K=L.top+(L.height-Q.height)/2-(Q.top-Y.top)}else{let L=this.#ZJ(),M=this.#n(X);if(!L?.width||!M)return;z=L;let O=M.left-Y.left,T=M.top-Y.top;W=k(this,"full")?this.getBoundingClientRect().left:L.left-O,K=L.top-T}let G=this.#v();if(typeof J.clampToViewport==="function")({left:W,top:K}=J.clampToViewport({left:W,top:K},Y,G));else{let{left:L,top:M}=G,O=window.innerWidth-Y.width-G.right,T=window.innerHeight-Y.height-G.bottom;W=Math.min(Math.max(W,L),Math.max(L,O)),K=Math.min(Math.max(K,M),Math.max(M,T))}J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(W)}px`,"important"),J.style.setProperty("top",`${Math.round(K)}px`,"important");let U=this.#I(),V=X.getBoundingClientRect(),H=j?null:this.#n(X);if(U&&U.scrollHeight>U.clientHeight+1){let L=j?V.top+V.height/2-(z.top+z.height/2):H?H.top-z.top:0;if(Math.abs(L)>0.5)U.scrollTop+=L;U.syncOverflow?.()}if(this.#Y||this.open)this.#RJ()}#wJ(){this.#Z?.addEventListener("click",this.#w),this.#Z?.addEventListener("keydown",this.#k),this.#Z?.addEventListener("focus",this.#O),this.#Z?.addEventListener("blur",this.#M),this.addEventListener("click",this.#D),this.addEventListener("pointerover",this.#T),this.#$?.addEventListener("keydown",this.#k),this.#$?.addEventListener("close",this.#N),this.#z?.addEventListener("slotchange",this.#C)}#uJ(){this.#Z?.removeEventListener("click",this.#w),this.#Z?.removeEventListener("keydown",this.#k),this.#Z?.removeEventListener("focus",this.#O),this.#Z?.removeEventListener("blur",this.#M),this.removeAttribute("data-focus-visible"),this.removeEventListener("click",this.#D),this.removeEventListener("pointerover",this.#T),this.#$?.removeEventListener("keydown",this.#k),this.#$?.removeEventListener("close",this.#N),this.#z?.removeEventListener("slotchange",this.#C)}#VJ(){this.#A(),this.#d()}#s(){if(this.#H)return;this.#H=new MutationObserver((J)=>{if(this.#Q||this.#L)return;let Z=!1;for(let $ of J){if($.type==="childList"){if([...$.addedNodes].some((X)=>this.#u(X))||[...$.removedNodes].some((X)=>this.#u(X))||$.target?.closest?.("fig-select-option"))Z=!0}if($.type==="attributes"&&$.target?.tagName==="FIG-SELECT-OPTION"){if($.attributeName==="value"||$.attributeName==="disabled"||$.attributeName==="label")Z=!0;else if($.attributeName==="selected"){if(k($.target,"selected")){let X=this.#E($.target);if((this.getAttribute("value")??"")!==X)this.setAttribute("value",X),Z=!0}else if(this.#E($.target)===(this.getAttribute("value")??""))Z=!0}}if($.type==="characterData"&&$.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Z=!0}if(Z)this.#d()}),this.#H.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#XJ({enabledOnly:J=!1}={}){let Z=this.#I(),$=Z?Array.from(Z.querySelectorAll(":scope > fig-select-option")):[];if(!J)return $;return $.filter((X)=>!k(X,"disabled"))}#E(J){if(!J)return"";if(typeof J.value==="string")return J.value;let Z=J.getAttribute?.("value");if(Z!=null)return Z;return(J.textContent||"").trim()}#FJ(J){if(!J)return"";let Z=J.getAttribute?.("label");if(Z!=null&&Z!=="")return Z.trim();let $=[];for(let X of J.childNodes){if(X.nodeType===Node.TEXT_NODE){let Q=X.textContent?.trim();if(Q)$.push(Q);continue}if(!(X instanceof Element))continue;let j=X.getAttribute("slot");if(j==="prepend"||j==="append")continue;let Y=X.textContent?.trim();if(Y)$.push(Y)}if($.length)return $.join(" ").trim();return(J.textContent||"").trim()}#_(J){if(!this.#W||!this.#K||!this.#J||!this.#B)return;let Z=this.querySelector(':scope > [slot="trigger"]'),$=this.querySelector(':scope > [slot="prepend-trigger"][data-fig-select-generated]'),X=this.querySelector(':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])'),j=J?.querySelector?.(':scope > [slot="prepend"]:not([data-fig-select-checkmark])');if(this.#B.hidden=!Z,this.#U.hidden=Boolean(Z),this.#W.hidden=Boolean(Z),Z){$?.remove(),this.#W.classList.remove("has-content"),this.#K.hidden=!0,this.#J.replaceChildren();return}if(!X&&j?.childNodes.length){let Q=$||document.createElement("span");if(Q.setAttribute("slot","prepend-trigger"),Q.setAttribute("data-fig-select-generated",""),Q.replaceChildren(...Array.from(j.childNodes,(W)=>W.cloneNode(!0))),Q.parentElement!==this)this.append(Q);X=Q}else if(X)$?.remove();else $?.remove();let Y=Boolean(X);if(this.#W.classList.toggle("has-content",Y),this.#K.hidden=!X,this.#J.hidden=Boolean(X),X){this.#J.replaceChildren();return}this.#J.replaceChildren()}#qJ(){if(!this.#$)return;this.#$.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#$.setAttribute("offset",J);else this.#$.removeAttribute("offset");let Z=this.getAttribute("closedby");if(Z)this.#$.setAttribute("closedby",Z);else this.#$.removeAttribute("closedby")}#QJ(){let J=k(this,"disabled");if(this.#Z)if(J)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled");if(J&&this.open)this.open=!1}#bJ(J){if(!J.length)return null;let Z=J.find(($)=>k($,"selected"));if(Z&&!k(Z,"disabled"))return Z;return J.find(($)=>!k($,"disabled"))||J[0]||null}#MJ(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#d(){if(this.#Q)return;this.#Q=!0;try{let J=this.#XJ(),Z=this.hasAttribute("value"),$=Z?this.getAttribute("value"):null,X=Z?J.find((W)=>this.#E(W)===$):null,j=!1;if(!X){if(Z){if(!J.length){if(this.#U)this.#U.textContent=$||this.getAttribute("label")||"";return}if(X=this.#bJ(J),X){let W=this.#E(X);if($!==W)this.setAttribute("value",W),j=!0}else this.removeAttribute("value"),j=!0}else if(X=J.find((W)=>k(W,"selected")),X)this.setAttribute("value",this.#E(X)),j=!0}for(let W of J){d(W);let K=W===X;if(W.setAttribute("aria-selected",K?"true":"false"),K)W.setAttribute("selected","");else W.removeAttribute("selected")}let Y=X&&this.#FJ(X)||this.getAttribute("label")||"";if(this.#U)this.#U.textContent=Y;this.#_(X);let Q=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#Z?.setAttribute("aria-label",Q),this.#I()?.syncOverflow?.(),j)this.#MJ(this.getAttribute("value")??"")}finally{this.#Q=!1}}#WJ(J){if(k(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Z=!this.open;if(Z)this.#c();this.open=Z}#vJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(k($,"disabled"))return;this.#mJ($)}#GJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(k($,"disabled"))return;if(J.relatedTarget instanceof Node&&$.contains(J.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#E($),bubbles:!0,composed:!0}))}#hJ(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#$?.matches?.(":open")??!1))){if(this.#Z?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" "))J.preventDefault(),this.#c(),this.open=!0,requestAnimationFrame(()=>{let j=this.#XJ({enabledOnly:!0}).findIndex((Y)=>this.#E(Y)===this.value);this.#g(j>=0?j:0)});return}let $=this.#XJ({enabledOnly:!0});if(!$.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#S(),this.#g(this.#q+1,!0);break;case"ArrowUp":J.preventDefault(),this.#S(),this.#g(this.#q-1,!0);break;case"Home":J.preventDefault(),this.#g(0,!0);break;case"End":J.preventDefault(),this.#g($.length-1,!0);break;case"Escape":J.preventDefault(),this.open=!1,this.#Z?.focus();break;case"Enter":case" ":{this.#S();let X=$[this.#q];if(!X)return;J.preventDefault(),this.#mJ(X);break}}}#gJ(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Z?.setAttribute("aria-expanded","false"),this.#Z?.focus(),this.#q=-1}#mJ(J){let Z=this.#E(J);this.setAttribute("value",Z),this.#d(),this.#MJ(Z),this.open=!1}#h(){return this.#XJ({enabledOnly:!0})}#S(){let J=this.#h();if(!J.length){this.#q=-1;return}let Z=J.find((X)=>X===document.activeElement),$=Z?J.indexOf(Z):-1;this.#q=$>=0?$:this.#q}#g(J,Z=!1){let $=this.#h();if(!$.length)return;let X=(J%$.length+$.length)%$.length,j=$[X],Y=document.activeElement!==j;if(this.#q=X,j?.focus(),Z&&Y)this.dispatchEvent(new CustomEvent("optionfocus",{detail:this.#E(j),bubbles:!0,composed:!0}))}#l(){if(!this.#$||!this.#Z)return;let J=Math.ceil(this.getBoundingClientRect().width),Z=Math.ceil(this.#Z.getBoundingClientRect().width),$=Math.max(J,Z,96),X=this.#p()?this.#y():null,j=window.visualViewport?.width??window.innerWidth,Y=window.visualViewport?.height??window.innerHeight,Q=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,W=Math.max(0,Math.min(Math.floor(20*Q),Math.floor(j-16))),K=Math.max(0,Math.floor(Y-16));if(this.#$.style.setProperty("box-sizing","border-box","important"),this.#$.style.setProperty("padding","0","important"),this.#$.style.setProperty("border","0","important"),this.#$.style.setProperty("margin","0","important"),X){let G=X.getBoundingClientRect().width;this.#$.style.setProperty("width","max-content","important"),this.#$.style.setProperty("min-width","0","important"),this.#$.style.setProperty("max-width",`${W}px`,"important");let U=this.#$.getBoundingClientRect().width,V=Math.min(W,Math.max($,U)),H=Math.max(G,V);this.#$.style.setProperty("width",`${H}px`,"important"),this.#$.style.setProperty("min-width",`${H}px`,"important"),this.#$.style.setProperty("max-width",`${H}px`,"important")}else this.#$.style.setProperty("width","max-content","important"),this.#$.style.setProperty("min-width",`${$}px`,"important"),this.#$.style.setProperty("max-width",`${W}px`,"important");this.#$.style.setProperty("max-height",`${K}px`,"important"),this.#$.style.setProperty("height","max-content","important"),this.#$.style.setProperty("overflow","hidden","important");let z=this.#$.getBoundingClientRect();if(z.height>K)this.#$.style.setProperty("height",`${K}px`,"important");if(!X&&z.width>W)this.#$.style.setProperty("width",`${W}px`,"important")}#kJ(){if(!this.#$||k(this,"disabled"))return;this.#c(),this.#x(),this.#Y=!1,this.#F=null,this.#R=null,this.#d(),this.#l(),this.#$.open=!0,document.addEventListener("keydown",this.#k,!0),this.#Z?.setAttribute("aria-expanded","true"),this.#q=-1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#l(),this.#P(),this.#l(),this.#OJ();let J=this.#I(),$=this.#h().findIndex((X)=>this.#E(X)===this.value);if($>=0)this.#g($);else if(this.#Z?.hasAttribute("data-focus-visible")||this.#Z?.matches?.(":focus-visible"))this.#g(0);if(J?.syncOverflow?.(),!this.#UJ())this.#Y=!0,this.#RJ()})})}#yJ(){if(!this.#$)return;this.#Y=!1,this.#F=null,this.#R=null,document.removeEventListener("keydown",this.#k,!0),this.#$.open=!1,this.#Z?.setAttribute("aria-expanded","false")}}y("fig-select",i);var zJ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],UJ=["shorter","longer","increasing","decreasing"],E=new Set(["oklch","hsl"]);function F(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase();if(!zJ.includes($))$="srgb";Z.interpolationSpace=$;let X=String(Z.hueInterpolation??"shorter").toLowerCase();return Z.hueInterpolation=UJ.includes(X)?X:"shorter",Z}function I(J){let Z=F(J);return Z.interpolationSpace="srgb",delete Z.hueInterpolation,Z}function S(J){let Z=I(J),$={...Z,interpolationSpace:Z.interpolationSpace};if(E.has(Z.interpolationSpace))$.hueInterpolation=Z.hueInterpolation;else delete $.hueInterpolation;return $}function VJ(J){let Z=F(J);if(Z.interpolationSpace==="srgb")return"";if(E.has(Z.interpolationSpace))return`in ${Z.interpolationSpace} ${Z.hueInterpolation} hue`;return`in ${Z.interpolationSpace}`}function m(J){let Z=F(J);if(E.has(Z.interpolationSpace))return`${Z.interpolationSpace}-${Z.hueInterpolation||"shorter"}`;return Z.interpolationSpace}function C(J){let Z=String(J??"");for(let $ of E){let X=`${$}-`;if(Z.startsWith(X))return{interpolationSpace:$,hueInterpolation:Z.slice(X.length)||"shorter"}}return{interpolationSpace:Z||"srgb",hueInterpolation:"shorter"}}var qJ=0;class D extends HTMLElement{static#Z=[{value:"srgb",space:"srgb",title:"Classic",subtitle:"sRGB Linear"},{value:"oklab",space:"oklab",title:"Smooth",subtitle:"OKLab"},{value:"oklch-increasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Increasing"},{value:"hsl-increasing",space:"hsl",title:"Vivid",subtitle:"HSL Increasing"},{value:"oklch-decreasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Decreasing",advanced:!0},{value:"hsl-decreasing",space:"hsl",title:"Vivid",subtitle:"HSL Decreasing",advanced:!0}];static#$(J){let Z=D.#Z,$=Z.find((W)=>W.value===J);if($)return $;let X=C(J),j=Z.find((W)=>W.space===X.interpolationSpace),Y=j?.subtitle.split(" ")[0]??X.interpolationSpace.toUpperCase(),Q=X.hueInterpolation;return{value:J,space:X.interpolationSpace,title:j?.title??"Custom",subtitle:E.has(X.interpolationSpace)?`${Y} ${Q.charAt(0).toUpperCase()}${Q.slice(1)}`:Y}}#W=null;#K=null;#J=null;#B=`fig-fill-picker-dialog-${++qJ}`;#U="solid";anchorElement=null;#z="solid";#H="srgb";#j={h:0,s:0,v:85,a:1};#q="hex";#Q={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#V={url:null,scaleMode:"fill",scale:50};#X={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#Y={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#F=null;#R=!1;#L=null;#f={};#w={};#O=null;#M=null;#D=null;#T=null;#k=!1;#N=!1;#C=null;#m=null;#u=null;#A=null;#I=null;#b=0;#t=null;#r=null;#e=new Set;#x=new Set;#n=null;#v=null;constructor(){super();this.#t=this.#XJ.bind(this),this.#r=this.#E.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","webcam-mode","default-video","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#P(()=>{this.#uJ(),this.#FJ(),this.#_(),this.#tJ()})}disconnectedCallback(){if(this.#MJ({stopWebcam:!0}),this.#xJ(),this.#OJ(),this.#YJ(this.#K))this.#K.removeAttribute("selected");if(this.#W)this.#W.removeEventListener("click",this.#t),this.#W.removeEventListener("keydown",this.#r);this.#W=null,this.#K=null}#y(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#JJ(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#p(){return this.#z==="webcam"&&this.#JJ()==="live"&&this.#Y.live!==!1}#zJ(){return{live:this.#JJ()==="live"&&this.#Y.live!==!1,snapshot:this.#Y.snapshot??null,deviceId:this.#Y.deviceId??null,scaleMode:this.#Y.scaleMode||"fill",scale:this.#Y.scale??50,opacity:this.#Y.opacity??1}}#c(){let J=this.#X.url??null;return{url:J,poster:this.#X.poster??null,scaleMode:this.#X.scaleMode||"fill",scale:this.#X.scale??50,opacity:this.#X.opacity??1,...J?{}:{missing:!0}}}#ZJ(J){if(J.webcam&&typeof J.webcam==="object"){let{stream:Z,snapshot:$,...X}=J.webcam;if(Object.assign(this.#Y,X),typeof $==="string"&&$)this.#Y.snapshot=$;return}if(J.type==="webcam"&&J.image){if(J.image.url!=null)this.#Y.snapshot=J.image.url;if(J.image.scaleMode)this.#Y.scaleMode=J.image.scaleMode;if(J.image.scale!=null)this.#Y.scale=J.image.scale}}#a(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#Y.stream,deviceId:this.#Y.deviceId??null}}))}get webcamStream(){return this.#Y.stream}releaseWebcam(){this.#WJ()}#$J(J){if(!J)return null;if(this.#Y.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#Y.snapshot),this.#x.delete(this.#Y.snapshot);return this.#Y.snapshot=URL.createObjectURL(J),this.#x.add(this.#Y.snapshot),this.#Y.snapshot}#AJ(J,Z,$){if(typeof J.getImageData!=="function")return!1;let X;try{X=J.getImageData(0,0,Z,$).data}catch{return!1}let j=Math.max(1,Math.floor(Z*$/256)),Y=0,Q=0,W=0;for(let K=0;K<X.length;K+=j*4){let z=Math.max(X[K],X[K+1],X[K+2]);if(Y=Math.max(Y,z),W+=1,z>24)Q+=1}if(!W)return!0;return Y<=40||Q/W<0.04}async#EJ(J){let Z=[],$=this.#Y.stream?.getVideoTracks?.()?.[0];if($&&typeof ImageCapture==="function")try{if(this.#L?.track!==$)this.#L=new ImageCapture($);Z.push(await this.#L.grabFrame())}catch{this.#L=null}if(typeof createImageBitmap==="function")try{Z.push(await createImageBitmap(J))}catch{}return Z.push(J),Z.filter(Boolean)}async#SJ(J,Z,$,X){let j=await this.#EJ(Z);for(let Y of j){try{J.drawImage(Y,0,0,$,X)}catch{continue}finally{Y.close?.()}if(!this.#AJ(J,$,X))return!0}return!1}#RJ(J){return new Promise((Z)=>{if(typeof J.requestVideoFrameCallback==="function"){let $=setTimeout(()=>Z(!1),400);J.requestVideoFrameCallback(()=>{clearTimeout($),Z(!0)});return}setTimeout(()=>Z(!1),200)})}async#UJ(J){if(!J?.videoWidth||!J.videoHeight)return null;let Z=document.createElement("canvas");Z.width=J.videoWidth,Z.height=J.videoHeight;let $=Z.getContext("2d",{willReadFrequently:!0});if(!$)return null;if(!await this.#SJ($,J,Z.width,Z.height))return null;let j=await new Promise((Y)=>Z.toBlob(Y,"image/png"));return this.#$J(j)}#IJ(J){if(this.#z!=="webcam")return;let Z=this.#Y.stream;if(!Z)return;if(this.#F===Z&&this.#Y.snapshot){this.#_();return}if(this.#R)return;this.#R=!0;let $=(j)=>{if(this.#R=!1,!j||this.#z!=="webcam"||this.#Y.stream!==Z)return;this.#F=Z,this.#_()},X=async()=>{let j=await this.#UJ(J);if(j){$(j);return}if(this.#z!=="webcam"||this.#Y.stream!==Z){this.#R=!1;return}return await this.#RJ(J),X()};X()}#P(J){let Z=requestAnimationFrame(()=>{if(this.#e.delete(Z),this.isConnected)J()});return this.#e.add(Z),Z}#xJ(){this.#e.forEach((J)=>cancelAnimationFrame(J)),this.#e.clear()}#OJ(){let J=new Set([this.#Y.snapshot,this.#X.poster,this.#V.url].filter((Z)=>typeof Z==="string"&&Z.startsWith("blob:")));this.#x.forEach((Z)=>{if(!J.has(Z))URL.revokeObjectURL(Z)}),this.#x.clear(),J.forEach((Z)=>this.#x.add(Z))}#YJ(J){return J?.matches("fig-swatch, fig-chit")??!1}#wJ(J){return this.#YJ(J)||(J?.matches("[data-fig-fill-picker-swatch]")??!1)}#uJ(){let J=Array.from(this.children).find((Z)=>!Z.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#K=document.createElement("fig-swatch"),this.#K.setAttribute("background","#D9D9D9"),this.appendChild(this.#K),this.#W=this.#K;else if(this.#wJ(J))this.#K=J,this.#W=J;else this.#W=J,this.#K=null;if(this.#s(),this.#W.removeEventListener("click",this.#t),this.#W.addEventListener("click",this.#t),this.#W.removeEventListener("keydown",this.#r),this.#W.addEventListener("keydown",this.#r),this.#YJ(this.#K))this.#P(()=>{let Z=this.#K.querySelector('input[type="color"]');if(Z)Z.remove();this.#s()})}#VJ(){return this.getAttribute("aria-label")||"Fill picker"}#s(){if(!this.#W)return;let J=this.#y(),Z=this.getAttribute("aria-labelledby");if(!this.#W.hasAttribute("role"))this.#W.setAttribute("role","button");if(this.#W.setAttribute("tabindex",J?"-1":"0"),this.#W.setAttribute("aria-disabled",J?"true":"false"),this.#W.setAttribute("aria-haspopup","dialog"),this.#W.setAttribute("aria-expanded",this.#J?.open?"true":"false"),this.#W.setAttribute("aria-controls",this.#B),this.#W.removeAttribute("aria-hidden"),Z)this.#W.setAttribute("aria-labelledby",Z),this.#W.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#W.setAttribute("aria-label",`Open ${this.#VJ()}`),this.#W.removeAttribute("aria-labelledby");else if(this.#W.removeAttribute("aria-labelledby"),!this.#W.hasAttribute("aria-label"))this.#W.setAttribute("aria-label",`Open ${this.#VJ()}`);let $=this.getAttribute("aria-describedby");if($)this.#W.setAttribute("aria-describedby",$);else this.#W.removeAttribute("aria-describedby")}#XJ(J){if(this.#y())return;J.stopPropagation(),J.preventDefault(),this.#QJ()}#E(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.#y())return;J.preventDefault(),J.stopPropagation(),this.#QJ()}#FJ(){let J=this.getAttribute("value");if(!J)return;let Z=["solid","gradient","image","video","webcam"];try{let $=JSON.parse(J);if($.type)this.#z=$.type;if($.color){if(typeof $.color==="string")this.#j=this.#_J($.color);else if(typeof $.color==="object"&&$.color.h!==void 0)this.#j=$.color}let X=$.alpha!==void 0?Number($.alpha):$.opacity!==void 0?Number($.opacity)/100:void 0;if(Number.isFinite(X))this.#j.a=Math.max(0,Math.min(1,X));if(this.#H="srgb",$.gradient)this.#Q=I({...this.#Q,...$.gradient});if($.image)this.#V={...this.#V,...$.image};if($.video){let j=this.#X.url;if(this.#X={...this.#X,...$.video},this.#X.missing=!this.#X.url,$.video.poster!=null&&$.video.poster!=="")this.#v=this.#X.url;else if(this.#X.url!==j)this.#LJ();else this.#DJ()}if(this.#ZJ($),$.type&&!Z.includes($.type)){let{type:j,...Y}=$;this.#w[$.type]=Y}}catch($){if(J.startsWith("#")){this.#z="solid",this.#j=this.#_J(J);return}if(n(J)){let X=this.#X.url;if(this.#z="video",this.#X.url=J.trim(),this.#X.missing=!1,this.#X.url!==X)this.#LJ();else this.#DJ()}}}#_(){if(!this.#K)return;let J,Z="cover",$="center";switch(this.#z){case"solid":J=this.#jJ(this.#j);break;case"gradient":J=this.#aJ();break;case"image":if(this.#V.url){J=x(this.#V.url);let X=this.#qJ(this.#V.scaleMode,this.#V.scale);Z=X.size,$=X.position}else J="";break;case"video":if(this.#X.poster){J=x(this.#X.poster);let X=this.#qJ(this.#X.scaleMode,this.#X.scale);Z=X.size,$=X.position}else J="";break;case"webcam":if(this.#Y.snapshot){J=x(this.#Y.snapshot);let X=this.#qJ(this.#Y.scaleMode,this.#Y.scale);Z=X.size,$=X.position}else J="";break;default:{J=(this.#f[this.#z]?.element||this.querySelector(`[slot="mode-${this.#z}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#K.setAttribute("background",J),this.#K.style.setProperty("--swatch-bg-size",Z),this.#K.style.setProperty("--swatch-bg-position",$),this.#z==="solid")this.#K.setAttribute("alpha",this.#j.a);else this.#K.removeAttribute("alpha")}#qJ(J,Z){switch(J){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${Z}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#QJ(){if(this.#y())return;if(!this.#J)this.#vJ();else this.#J.anchor=this.anchorElement||this.#W;if(this.#GJ(this.#z,{emit:!1}),this.#u=JSON.stringify(this.value),this.#A=this.#u,this.#YJ(this.#K))this.#K.setAttribute("selected","true");this.#J.open=!0,this.#s(),this.#P(()=>{this.#J?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#P(()=>{this.#h(),this.#S()})})}open(){this.#QJ()}close(){if(this.#J)this.#J.open=!1,this.#s()}#bJ(){if(!this.#J)return;for(let[J,{element:Z}]of Object.entries(this.#f)){let $=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((X)=>X.dataset.tab===J);if(!$)continue;while($.firstChild)Z.appendChild($.firstChild)}}#MJ({stopWebcam:J=!1}={}){if(this.#C)this.#C(),this.#C=null;if(this.#m?.disconnect(),this.#m=null,!J&&this.#p())this.#d();else this.#WJ();if(!this.#J)return;this.#bJ(),this.#J.remove(),this.#J=null,this.#I=null,this.#u=null,this.#A=null,this.#O=null,this.#M=null,this.#D=null,this.#T=null,this.#N=!1,this.#s()}#d(){this.#b+=1;let J=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#WJ({emit:J=!0}={}){this.#b+=1;let Z=Boolean(this.#Y.stream);if(this.#Y.stream)this.#Y.stream.getTracks().forEach((X)=>X.stop()),this.#Y.stream=null;this.#F=null,this.#R=!1,this.#L=null;let $=this.#J?.querySelector(".fig-fill-picker-webcam-video");if($)$.srcObject=null;if(Z&&J)this.#a()}#vJ(){this.#f={},this.querySelectorAll('[slot^="mode-"]').forEach((V)=>{let H=V.getAttribute("slot").slice(5);this.#f[H]={element:V,label:V.getAttribute("label")||H.charAt(0).toUpperCase()+H.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.id=this.#B,this.#J.setAttribute("aria-label",this.#VJ()),this.#J.setAttribute("drag","true"),this.#J.setAttribute("handle","fig-header"),this.#J.setAttribute("autoresize","false"),this.#J.classList.add("fig-fill-picker-dialog"),this.#J.anchor=this.anchorElement||this.#W;let J=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",J),this.#J.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Z=["solid","gradient","image","video","webcam"],$={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},X=this.getAttribute("mode"),j;if(X){if(j=X.split(",").map((H)=>H.trim().toLowerCase()).filter((H)=>Z.includes(H)||this.#f[H]),j.length===0)j=[...Z]}else j=[...Z];let Y={...$};for(let[V,{label:H}]of Object.entries(this.#f))Y[V]=H;if(!j.includes(this.#z))this.#z=j[0],this.#U=j[0];let Q;if(j.length===1)Q=q("h3",{className:"fig-fill-picker-type-label"},Y[j[0]]);else{let V=q("fig-select-options",{},j.map((H)=>q("fig-select-option",{value:H},Y[H])));Q=q("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#z},V)}let W=j.map((V)=>q("div",{className:"fig-fill-picker-tab","data-tab":V})),K=q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},A("close"));this.#J.replaceChildren(q("fig-header",{},[Q,K]),q("fig-content",{},W)),document.body.appendChild(this.#J);for(let[V,{element:H}]of Object.entries(this.#f)){let L=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((M)=>M.dataset.tab===V);if(!L)continue;while(H.firstChild)L.appendChild(H.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:V,container:L}}))}let z=this.#J.querySelector(".fig-fill-picker-type");if(z)z.addEventListener("change",(V)=>{let H=typeof V.detail==="string"?V.detail:V.target?.value;if(H)this.#GJ(H)});this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});let G=()=>{if(this.#YJ(this.#K))this.#K.removeAttribute("selected");if(this.#p())this.#d();else this.#WJ();let V=JSON.stringify(this.value);if(this.#A!==null&&this.#A!==V)this.#i();this.#u=null,this.#A=null,this.#s();let H=this.#W;this.#P(()=>{if(H?.isConnected)HTMLElement.prototype.focus.call(H)}),this.dispatchEvent(new CustomEvent("close"))};this.#J.addEventListener("close",G);let U={solid:()=>this.#gJ(),gradient:()=>this.#jZ(),image:()=>this.#qZ(),video:()=>this.#BZ(),webcam:()=>this.#_Z()};for(let[V,H]of Object.entries(U))if(!this.#f[V]&&j.includes(V))H();for(let V of Object.keys(this.#f)){if(Z.includes(V))continue;let H=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((L)=>L.dataset.tab===V);if(!H)continue;H.addEventListener("input",(L)=>{if(L.target===this)return;if(L.stopPropagation(),L.detail)this.#w[V]=L.detail;this.#G()}),H.addEventListener("change",(L)=>{if(L.target===this)return;if(L.stopPropagation(),L.detail)this.#w[V]=L.detail;this.#i()})}}#GJ(J,{emit:Z=!0}={}){let $=Array.from(this.#J?.querySelectorAll(".fig-fill-picker-tab")??[]).find((W)=>W.dataset.tab===J);if(!$)return;let X=this.#U;if(this.#U=J,this.#z=J,X==="webcam"&&J!=="webcam")this.#WJ();let j=this.#J.querySelector(".fig-fill-picker-type");if(j&&j.value!==J)j.value=J;this.#J.querySelectorAll(".fig-fill-picker-tab").forEach((W)=>{if(W.dataset.tab===J)W.style.display="block";else W.style.display="none"});let Q=this.#J.querySelector("fig-content");if(Q)Q.style.padding=this.#f[J]?"0":"";if(J==="gradient")this.#P(()=>{this.#o();let W=$.querySelector(".fig-fill-picker-gradient-bar-input");W?.refreshLayout?.(),this.#P(()=>{W?.refreshLayout?.()})});if(J==="video")this.#PJ({emit:!1});if(J==="webcam")this.#Y.live=this.#JJ()==="live",this.#I?.(this.#Y.deviceId);if(this.#_(),Z)this.#G()}#hJ(){if(!this.#J?.open)return;if(this.#GJ(this.#z,{emit:!1}),this.#h(),this.#S(),this.#BJ(),this.#D)this.#D.setAttribute("value",this.#j.h);if(this.#T)this.#T.setAttribute("value",this.#j.a*100),this.#T.setAttribute("color",this.#jJ(this.#j));this.#o();let J=this.#J.querySelector('[data-tab="image"]'),Z=J?.querySelector(".fig-fill-picker-scale-mode"),$=J?.querySelector(".fig-fill-picker-scale"),X=J?.querySelector(".fig-fill-picker-image-preview");if(Z)Z.value=this.#V.scaleMode;if($)$.setAttribute("value",this.#V.scale),$.style.display=this.#V.scaleMode==="tile"?"block":"none";if(X)this.#KJ(X);let j=this.#J.querySelector('[data-tab="video"]'),Y=j?.querySelector(".fig-fill-picker-scale-mode"),Q=j?.querySelector(".fig-fill-picker-video-preview");if(Y)Y.value=this.#X.scaleMode;if(Q)this.#HJ(Q)}#gJ(){let J=this.#J.querySelector('[data-tab="solid"]'),Z=this.getAttribute("alpha")!=="false",$=q("canvas",{width:"200",height:"200"}),X=q("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#jJ({...this.#j,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),j=q("fig-preview",{className:"fig-fill-picker-color-area"},[$,X]),Y=q("fig-tooltip",{text:"Sample color"},q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},A("eyedropper"))),Q=q("div",{className:`fig-fill-picker-sliders${Z?"":" is-hue-only"}`},[Y,q("fig-slider",{type:"hue",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#j.h}),Z?q("fig-slider",{type:"opacity",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#j.a*100,color:this.#jJ(this.#j)}):null]),W=q("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([U,V])=>q("fig-select-option",{value:U},V))),K=q("fig-field",{className:"fig-fill-picker-inputs"},[q("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#q},W),q("span",{className:"fig-fill-picker-input-fields"})]);if(J.replaceChildren(j,Q,K),this.#O=J.querySelector("canvas"),this.#M=J.querySelector("fig-handle"),this.#g(),this.#h(),this.#S(),this.#kJ(),this.#D=J.querySelector('fig-slider[type="hue"]'),this.#D.addEventListener("input",(U)=>{this.#j.h=parseFloat(U.target.value),this.#h(),this.#S(),this.#BJ(),this.#G()}),this.#D.addEventListener("change",()=>{this.#i()}),Z)this.#T=J.querySelector('fig-slider[type="opacity"]'),this.#T.addEventListener("input",(U)=>{this.#j.a=parseFloat(U.target.value)/100,this.#BJ(),this.#G()}),this.#T.addEventListener("change",()=>{this.#i()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(U)=>{let V=typeof U.detail==="string"?U.detail:U.target?.value;if(!V)return;this.#q=V,this.#yJ()}),this.#yJ();let G=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)G.addEventListener("click",async()=>{try{let V=await new EyeDropper().open();this.#j={...this.#_J(V.sRGBHex),a:this.#j.a},this.#h(),this.#S(),this.#BJ(),this.#G()}catch(U){}});else G.setAttribute("disabled",""),G.title="EyeDropper not supported in this browser"}#mJ(){let J=this.#J?.querySelector('[data-tab="solid"]');if(J){let Z=J.querySelector("canvas");if(Z){let $=document.createElement("canvas");$.width=Z.width,$.height=Z.height,Z.replaceWith($),this.#O=$,this.#kJ()}this.#h(),this.#S()}this.#NJ(),this.#G()}#h(){if(!this.#O&&this.#J)this.#O=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#O)return;let J=this.#H==="display-p3"?"display-p3":"srgb",Z=this.#O.getContext("2d",{colorSpace:J});if(!Z)return;let $=this.#O.width,X=this.#O.height;Z.clearRect(0,0,$,X);let j=this.#j.h,Y=this.#H==="display-p3",Q=Z.createLinearGradient(0,0,$,0);if(Y){Q.addColorStop(0,"color(display-p3 1 1 1)");let[K,z,G]=hslToP3(j,100,50);Q.addColorStop(1,`color(display-p3 ${K} ${z} ${G})`)}else Q.addColorStop(0,"#FFFFFF"),Q.addColorStop(1,`hsl(${j}, 100%, 50%)`);Z.fillStyle=Q,Z.fillRect(0,0,$,X);let W=Z.createLinearGradient(0,0,0,X);W.addColorStop(0,"rgba(0,0,0,0)"),W.addColorStop(1,"rgba(0,0,0,1)"),Z.fillStyle=W,Z.fillRect(0,0,$,X)}#S(J=0){if(!this.#M||!this.#O)return;this.#g();let Z=this.#O.getBoundingClientRect();if((Z.width===0||Z.height===0)&&J<5){this.#P(()=>this.#S(J+1));return}let $=Math.max(0,Math.min(100,this.#j.s)),X=Math.max(0,Math.min(100,100-this.#j.v));this.#M.setAttribute("value",`${$}% ${X}%`),this.#M.setAttribute("color",this.#jJ({...this.#j,a:1}))}#g(){if(!this.#M)return;this.#M.setAttribute("aria-valuenow",String(Math.round(this.#j.v))),this.#M.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#j.s)}%, brightness ${Math.round(this.#j.v)}%`),this.#M.removeAttribute("aria-pressed")}#l(J,Z,$={}){let{updateHandle:X=!0,emitInput:j=!0,emitChange:Y=!1}=$;if(this.#j.s=Math.max(0,Math.min(100,J*100)),this.#j.v=Math.max(0,Math.min(100,(1-Z)*100)),this.#M)this.#M.setAttribute("color",this.#jJ({...this.#j,a:1})),this.#g();if(X)this.#S();if(this.#BJ(),j)this.#G();if(Y)this.#i()}#kJ(){if(this.#C)this.#C(),this.#C=null;if(!this.#O||!this.#M)return;let J=this.#O.parentElement||this.#O,Z=this.#M,$=!1,X=(z,G={})=>{let U=J.getBoundingClientRect();if(U.width===0||U.height===0)return;let V=Math.max(0,Math.min(z.clientX-U.left,U.width)),H=Math.max(0,Math.min(z.clientY-U.top,U.height));this.#l(V/U.width,H/U.height,G)},j=(z)=>{if(z.button!==0)return;if(z.target===Z||Z.contains(z.target))return;$=!0,this.#k=!0,J.setPointerCapture(z.pointerId),X(z,{updateHandle:!0,emitInput:!0})},Y=(z)=>{if(!$)return;if(z.buttons===0){Q();return}X(z,{updateHandle:!0,emitInput:!0})},Q=()=>{if(!$)return;$=!1,this.#k=!1,this.#i()},W=(z)=>{this.#k=!0;let G=z.detail?.px,U=z.detail?.py;if(!Number.isFinite(G)||!Number.isFinite(U))return;Z.setAttribute("value",`${G*100}% ${U*100}%`),this.#l(G,U,{updateHandle:!1,emitInput:!0})},K=(z)=>{let G=z.detail?.px,U=z.detail?.py;if(Number.isFinite(G)&&Number.isFinite(U))Z.setAttribute("value",`${G*100}% ${U*100}%`),this.#l(G,U,{updateHandle:!1,emitInput:!1});this.#k=!1,this.#i()};J.addEventListener("pointerdown",j),J.addEventListener("pointermove",Y),J.addEventListener("pointerup",Q),J.addEventListener("pointercancel",Q),J.addEventListener("lostpointercapture",Q),Z.addEventListener("input",W),Z.addEventListener("change",K),this.#C=()=>{J.removeEventListener("pointerdown",j),J.removeEventListener("pointermove",Y),J.removeEventListener("pointerup",Q),J.removeEventListener("pointercancel",Q),J.removeEventListener("lostpointercapture",Q),Z.removeEventListener("input",W),Z.removeEventListener("change",K),this.#k=!1}}#yJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=(W,K)=>q("fig-tooltip",{text:W},K),$=(W,K,z,G,U,V)=>q("fig-input-number",{className:W,"aria-label":K,min:z,max:G,step:U,units:V}),X=this.getAttribute("alpha")!=="false",j=()=>X?Z("Alpha",$("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Y=(W,K="")=>q("div",{className:["input-combo",K].filter(Boolean).join(" ")},W),Q;switch(this.#q){case"rgb":Q=Y([Z("Red",$("fig-fill-picker-ci-r","Red",0,255)),Z("Green",$("fig-fill-picker-ci-g","Green",0,255)),Z("Blue",$("fig-fill-picker-ci-b","Blue",0,255)),j()]);break;case"hsl":Q=Y([Z("Hue",$("fig-fill-picker-ci-h","Hue",0,360)),Z("Saturation",$("fig-fill-picker-ci-s","Saturation",0,100)),Z("Lightness",$("fig-fill-picker-ci-l","Lightness",0,100)),j()]);break;case"hsb":Q=Y([Z("Hue",$("fig-fill-picker-ci-h","Hue",0,360)),Z("Saturation",$("fig-fill-picker-ci-s","Saturation",0,100)),Z("Brightness",$("fig-fill-picker-ci-v","Brightness",0,100)),j()]);break;case"lab":Q=Y([Z("Lightness",$("fig-fill-picker-ci-okl","Lightness",0,100)),Z("Green-Red axis",$("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),Z("Blue-Yellow axis",$("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),j()]);break;case"lch":Q=Y([Z("Lightness",$("fig-fill-picker-ci-okl","Lightness",0,100)),Z("Chroma",$("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),Z("Hue",$("fig-fill-picker-ci-okh","Hue",0,360)),j()]);break;case"css":Q=q("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let W=q("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});Q=X?q("fig-input-combo",{className:"input-combo fig-fill-picker-ci-hex-row",full:!0},[W,j()]):W}break}J.replaceChildren(Q),this.#ZZ(),this.#P(()=>this.#BJ())}#ZZ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=()=>{if(this.#k)return;let j=this.#XZ();if(!j)return;let Y=Number.isFinite(j.a)?j.a:this.#j.a;if(this.#j={...j,a:Y},this.#h(),this.#S(),this.#D)this.#D.setAttribute("value",this.#j.h);if(this.#T&&Number.isFinite(j.a))this.#T.setAttribute("value",this.#j.a*100);this.#G()},$=()=>this.#i();J.querySelectorAll("fig-input-number, fig-input-text").forEach((j)=>{j.addEventListener("input",Z),j.addEventListener("change",$)})}#$Z(){let J=this.#J?.querySelector(".fig-fill-picker-ci-a");if(!J)return;let Z=parseFloat(J.value);if(!Number.isFinite(Z))return;return Math.max(0,Math.min(1,Z/100))}#XZ(){let J=(X)=>this.#J?.querySelector(`.${X}`),Z=(X)=>parseFloat(J(X)?.value??0),$=(X)=>{if(!X)return null;let j=this.#$Z();return{...X,a:j??X.a??this.#j.a}};switch(this.#q){case"rgb":return $(this.#fJ({r:Z("fig-fill-picker-ci-r"),g:Z("fig-fill-picker-ci-g"),b:Z("fig-fill-picker-ci-b")}));case"hsl":{let X=this.#yZ({h:Z("fig-fill-picker-ci-h"),s:Z("fig-fill-picker-ci-s"),l:Z("fig-fill-picker-ci-l")});return $(this.#fJ(X))}case"hsb":return $({h:Z("fig-fill-picker-ci-h"),s:Z("fig-fill-picker-ci-s"),v:Z("fig-fill-picker-ci-v")});case"lab":{let X=this.#JZ({l:Z("fig-fill-picker-ci-okl")/100,a:Z("fig-fill-picker-ci-oka"),b:Z("fig-fill-picker-ci-okb")});return $(this.#fJ(X))}case"lch":{let X=this.#PZ({l:Z("fig-fill-picker-ci-okl")/100,c:Z("fig-fill-picker-ci-okc"),h:Z("fig-fill-picker-ci-okh")});return $(this.#fJ(X))}case"css":{let X=J("fig-fill-picker-ci-css");if(!X)return null;return this.#NZ(X.value)}default:{let X=J("fig-fill-picker-ci-hex");if(!X)return null;let j=X.value.replace(/^#/,"");if(j.length===3)j=j[0]+j[0]+j[1]+j[1]+j[2]+j[2];if(j.length===8){let Y=parseInt(j.slice(6,8),16)/255;if(j=j.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(j))return null;return{...this.#_J(`#${j}`),a:Y}}if(j.length!==6||!/^[0-9a-fA-F]{6}$/.test(j))return null;return $(this.#_J(`#${j}`))}}}#BJ(){if(!this.#J)return;let J=this.#jJ(this.#j),Z=this.#oJ(this.#j),$=(j)=>this.#J.querySelector(`.${j}`),X=(j,Y)=>{let Q=$(j);if(Q)Q.setAttribute("value",Y)};switch(this.#q){case"rgb":X("fig-fill-picker-ci-r",Z.r),X("fig-fill-picker-ci-g",Z.g),X("fig-fill-picker-ci-b",Z.b);break;case"hsl":{let j=this.#FZ(Z);X("fig-fill-picker-ci-h",Math.round(j.h)),X("fig-fill-picker-ci-s",Math.round(j.s)),X("fig-fill-picker-ci-l",Math.round(j.l));break}case"hsb":X("fig-fill-picker-ci-h",Math.round(this.#j.h)),X("fig-fill-picker-ci-s",Math.round(this.#j.s)),X("fig-fill-picker-ci-v",Math.round(this.#j.v));break;case"lab":{let j=this.#eJ(Z);X("fig-fill-picker-ci-okl",Math.round(j.l*100)),X("fig-fill-picker-ci-oka",+j.a.toFixed(3)),X("fig-fill-picker-ci-okb",+j.b.toFixed(3));break}case"lch":{let j=this.#DZ(Z);X("fig-fill-picker-ci-okl",Math.round(j.l*100)),X("fig-fill-picker-ci-okc",+j.c.toFixed(3)),X("fig-fill-picker-ci-okh",Math.round(j.h));break}case"css":X("fig-fill-picker-ci-css",this.#TZ(this.#j));break;default:X("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#q!=="css"){let j=Math.round(this.#j.a*1000)/10;X("fig-fill-picker-ci-a",Number.isInteger(j)?j:+j.toFixed(1))}if(this.#T)this.#T.setAttribute("color",J);this.#_()}#jZ(){let J=this.#J.querySelector('[data-tab="gradient"]'),Z=q("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#Q.type,variant:"ghost"},q("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([z,G])=>q("fig-select-option",{value:z},G)))),$=(z,G,U)=>q("fig-tooltip",{text:z},q("fig-button",{icon:!0,variant:"ghost",className:G,"aria-label":z},A(U))),X=q("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[$("Flip gradient","fig-fill-picker-gradient-flip","swap"),$("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),j=q("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[Z,X]),Y=q("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large",value:JSON.stringify({type:"gradient",gradient:S(this.#Q)})}),Q=q("fig-preview",{className:"fig-fill-picker-gradient-preview"},Y),W=q("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},A("add")),K=q("div",{className:"fig-fill-picker-gradient-stops"},[q("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[q("h3",{},"Stops"),W]),q("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);J.replaceChildren(j,Q,K),this.#o(),this.#YZ(J)}#CZ(){let J=({value:X,title:j,subtitle:Y,advanced:Q=!1})=>q("fig-select-option",{value:X,label:`${j} — ${Y}`,className:Q?"fig-fill-picker-gradient-interpolation-advanced":null},[q("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),q("span",{className:"fig-fill-picker-gradient-interpolation-label"},[q("span",{className:"fig-fill-picker-gradient-interpolation-title"},j),q("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Y)])]),Z=q("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),$=D.#Z;return[...$.filter((X)=>!X.advanced).map(J),Z,...$.filter((X)=>X.advanced).map(J)]}#YZ(J){let Z=(B)=>typeof B.detail==="string"?B.detail:B.target?.value,$=J.querySelector(".fig-fill-picker-gradient-bar-input"),X=(B)=>{if(!$)return;this.#N=!0;try{$.value={type:"gradient",gradient:S(B)}}finally{this.#N=!1}},j=()=>{X(this.#Q)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(B)=>{let f=Z(B);if(!f)return;this.#Q.type=f,this.#o(),this.#G()});let Q=J.querySelector(".fig-fill-picker-gradient-space"),W=Q?.querySelector("fig-select-options"),K="fig-fill-picker-gradient-interpolation-collapsed",z=W?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),G=()=>Boolean(W?.classList.contains(K)),U=(B)=>{W?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",B?"Show all color interpolation options":"Scroll down")},V=()=>{if(!W)return;W.classList.remove(K),W.style.removeProperty("max-height"),U(!1),W.syncOverflow?.()},H=()=>{if(!W||!z)return;W.style.removeProperty("max-height"),W.classList.add(K),W.scrollTop=0;let B=W.getBoundingClientRect().top,f=z.getBoundingClientRect().top,N=W.querySelector(".fig-overflow-end")?.offsetHeight||0,P=f-B;if(P>0)W.style.maxHeight=`${Math.round(P+N)}px`;U(!0),W.syncOverflow?.()},L=(B)=>Boolean(W?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${B}"]`)),M=()=>{if(L(m(this.#Q)))V();else H()};if(W?.addEventListener("click",(B)=>{if(!G())return;if(!B.target?.closest?.(".fig-overflow-end"))return;B.preventDefault(),B.stopPropagation(),V()},!0),W?.addEventListener("focusin",(B)=>{if(!G())return;if(B.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))V()}),W?.addEventListener("scroll",()=>{if(G()&&W.scrollTop!==0)W.scrollTop=0}),Q?.querySelectorAll("fig-select-option").forEach((B)=>{let f=()=>{let N=C(B.getAttribute("value")||"srgb");X(F({...this.#Q,...N}))};B.addEventListener("pointerenter",f),B.addEventListener("pointerleave",()=>{if(document.activeElement!==B)j()}),B.addEventListener("focus",f),B.addEventListener("blur",()=>{if(!B.matches(":hover"))j()})}),this.#m?.disconnect(),Q)this.#m=new MutationObserver(()=>{if(!Q.hasAttribute("open"))j();else this.#P(M)}),this.#m.observe(Q,{attributes:!0,attributeFilter:["open"]});let O=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(O?.addEventListener("change",(B)=>{let f=typeof B.detail==="string"?B.detail:B.target?.value;if(!f)return;let N=C(f);this.#Q=F({...this.#Q,...N}),this.#o(),this.#G()}),O?.querySelectorAll("fig-segment").forEach((B)=>{let f=()=>{X(F({...this.#Q,...C(B.getAttribute("value")||"srgb")}))};B.addEventListener("pointerenter",f),B.addEventListener("pointerleave",j)}),Q?.addEventListener("change",(B)=>{let f=Z(B);if(!f)return;let N=C(f);this.#Q=F({...this.#Q,...N}),this.#o(),this.#G()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#Q.angle=(Number(this.#Q.angle)+90)%360,this.#o(),this.#G()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#Q.stops.forEach((B)=>{B.position=100-B.position}),this.#Q.stops.sort((B,f)=>B.position-f.position),this.#o(),this.#G()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#Q.stops.push({position:50,color:"#888888",opacity:100}),this.#Q.stops.sort((f,N)=>f.position-N.position),this.#o(),this.#G()}),$){let B=(f)=>{if(f.stopPropagation(),this.#N)return;let N=f.detail;if(!N?.gradient)return;this.#Q=I({...this.#Q,...N.gradient}),this.#_(),this.#TJ(),this.#iJ()};$.addEventListener("input",(f)=>{B(f),this.#G()}),$.addEventListener("change",(f)=>{B(f),this.#i()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(B)=>{this.#zZ(B)})}#pJ(J){let Z=String(J.color||"#888888").replace(/^#/,"").slice(0,6),$=J.opacity??100;if($>=100)return`#${Z}`;let X=Math.round($/100*255).toString(16).padStart(2,"0");return`#${Z}${X}`}#QZ(J){if(!(J instanceof HTMLElement))return"#888888";if(J.hexOpaque)return this.#cJ(J.hexOpaque);let Z=J.value;if(typeof Z==="string"&&Z.startsWith("#"))return this.#cJ(Z.length>7?Z.slice(0,7):Z);let $=J.querySelector('fig-input-text:not([type="number"])'),X=String($?.value??$?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(X))return`#${X.toUpperCase()}`;let j=J.getAttribute("value");if(typeof j==="string"&&j.startsWith("#"))return this.#cJ(j.length>7?j.slice(0,7):j);return"#888888"}#cJ(J){let Z=String(J||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(Z))return"#888888";return`#${Z.toUpperCase()}`}#WZ(J){let Z=J.querySelector(".fig-fill-picker-stop-position"),$=J.querySelector(".fig-fill-picker-stop-color"),X=parseFloat(Z?.value??Z?.getAttribute("value")??"0")||0,j=this.#QZ($),Y=100;if($ instanceof HTMLElement&&$.rgba?.a!==void 0)Y=Math.round($.rgba.a*100);else{let Q=parseInt(J.dataset.index,10);if(!isNaN(Q)&&this.#Q.stops[Q])Y=this.#Q.stops[Q].opacity??100}return{position:X,color:j,opacity:Y}}#sJ(J){let Z=parseInt(J.dataset.index,10);if(isNaN(Z)||Z<0||Z>=this.#Q.stops.length)return;let $={...this.#Q.stops[Z],...this.#WZ(J)};this.#Q.stops[Z]=$,this.#KZ(J,$)}#KZ(J,Z){let $=J.querySelector(".fig-fill-picker-stop-position");if($)$.setAttribute("value",String(Z.position));let X=J.querySelector(".fig-fill-picker-stop-color");if(X)X.setAttribute("value",this.#pJ(Z))}#zZ(J){let{oldIndex:Z,newIndex:$}=J.detail??{};if(Z==null||$==null||Z===$||Z<0||$<0||Z>=this.#Q.stops.length||$>=this.#Q.stops.length)return;let j=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");j.forEach((Q)=>this.#sJ(Q));let[Y]=this.#Q.stops.splice(Z,1);this.#Q.stops.splice($,0,Y),j.forEach((Q,W)=>{Q.dataset.index=String(W)}),this.#N=!0;try{this.#TJ(),this.#NJ(),this.#G()}finally{this.#N=!1}}#o(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"]');if(!J)return;this.#Q=I(this.#Q);let Z=m(this.#Q),$=J.querySelector(".fig-fill-picker-gradient-space");if($)$.value=Z;let X=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(X){let j=D.#$(Z),Y=X.querySelector(`fig-segment[value="${Z}"]`)||X.querySelector(`fig-segment[data-space="${j.space}"]`);if(Y){let Q=`${j.title} — ${j.subtitle}`;Y.setAttribute("value",Z),Y.setAttribute("aria-label",Q);let W=Y.closest("fig-tooltip");if(W)W.setAttribute("text",Q);X.value=Z}}this.#TJ(),this.#NJ(),this.#iJ()}#UZ(){let J=Array.isArray(this.#Q.stops)?[...this.#Q.stops].sort((Z,$)=>(Z.position??0)-($.position??0)):[];if(J.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return J.map((Z)=>({color:String(Z.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Z.position??0}))}#TJ(){if(!this.#J)return;let J=this.#UZ();this.#J.querySelectorAll("fig-interpolation-swatch").forEach((Z)=>{let $=Z.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",X=C($),j={type:"linear",stops:J,interpolationSpace:X.interpolationSpace};if(E.has(X.interpolationSpace))j.hueInterpolation=X.hueInterpolation;Z.value={type:"gradient",gradient:j}})}#NJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(J)this.#N=!0,J.value={type:"gradient",gradient:S(this.#Q)},this.#N=!1;this.#_()}#iJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-stops-list"),Z=J?.querySelector("fig-reorder");if(!J||!Z)return;let $=Z.querySelectorAll(".fig-fill-picker-gradient-stop-row");if($.length===this.#Q.stops.length){this.#Q.stops.forEach((X,j)=>{let Y=$[j];Y.dataset.index=j;let Q=Y.querySelector(".fig-fill-picker-stop-position");if(Q)Q.setAttribute("value",X.position);let W=Y.querySelector(".fig-fill-picker-stop-color");if(W)W.setAttribute("value",this.#pJ(X));let K=Y.querySelector(".fig-fill-picker-stop-remove");if(K)if(this.#Q.stops.length<=2)K.setAttribute("disabled","");else K.removeAttribute("disabled")});return}this.#VZ(J)}#VZ(J){let Z=J.querySelector("fig-reorder");if(!Z)return;let $=this.#Q.stops.map((X,j)=>q("fig-property",{className:"fig-fill-picker-gradient-stop-row","data-index":j,leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},q("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[q("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:X.position,units:"%"}),q("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right",value:this.#pJ(X)})])));Z.replaceChildren(...$),Z.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((X)=>{X.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#sJ(X),this.#TJ(),this.#NJ(),this.#G()});let j=X.querySelector(".fig-fill-picker-stop-color"),Y=j.querySelector("fig-fill-picker");if(Y)Y.anchorElement=this.#J;else this.#P(()=>{let K=j.querySelector("fig-fill-picker");if(K)K.anchorElement=this.#J});let Q=()=>{this.#sJ(X),this.#N=!0;try{this.#TJ(),this.#NJ(),this.#G()}finally{this.#N=!1}};j.addEventListener("input",Q),j.addEventListener("change",Q);let W=X.querySelector(':scope > [data-fig-property-action="remove"]');W.classList.add("fig-fill-picker-stop-remove"),W.setAttribute("aria-label","Remove gradient stop"),W.toggleAttribute("disabled",this.#Q.stops.length<=2),X.addEventListener("remove",(K)=>{K.stopPropagation();let z=parseInt(X.dataset.index,10);if(this.#Q.stops.length>2)this.#Q.stops.splice(z,1),this.#o(),this.#G()})})}#dJ(J,Z=!0){let $=F({...this.#Q,interpolationSpace:J??this.#Q.interpolationSpace}),X=this.#H==="display-p3",j=$.stops.map((W)=>{let K=(W.opacity??100)/100;return`${X?this.#RZ(W.color,K):this.#MZ(W.color,K)} ${W.position}%`}).join(", "),Y=VJ($),Q=Z&&Y?` ${Y}`:"";switch($.type){case"linear":return`linear-gradient(${$.angle}deg${Q}, ${j})`;case"radial":return`radial-gradient(circle at ${$.centerX}% ${$.centerY}%${Q}, ${j})`;case"angular":return`conic-gradient(from ${$.angle}deg${Q}, ${j})`;default:return`linear-gradient(${$.angle}deg${Q}, ${j})`}}static#rJ=new Map;#nJ(J){let Z=D.#rJ.get(J);if(Z!==void 0)return Z;let $=document.createElement("div");$.style.background=J;let X=!!$.style.background;return D.#rJ.set(J,X),X}#aJ(){let J=this.#dJ(void 0,!0);if(this.#nJ(J))return J;let Z=this.#dJ("oklab",!0);if(this.#nJ(Z))return Z;return this.#dJ("oklab",!1)}#qZ(){let J=this.#J.querySelector('[data-tab="image"]'),Z=q("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#V.scaleMode},q("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Y,Q])=>q("fig-select-option",{value:Y},Q)))),$=q("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#V.scale,units:"%"});if(this.#V.scaleMode!=="tile")$.style.display="none";let X=q("fig-field",{className:"fig-fill-picker-media-header"},[Z,$]),j=q("fig-image",{className:"fig-fill-picker-media-preview fig-fill-picker-image-preview",upload:"true",label:"Upload from computer",alt:"Image fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true"});J.replaceChildren(X,j),this.#GZ(J)}#GZ(J){let Z=J.querySelector(".fig-fill-picker-scale-mode"),$=J.querySelector(".fig-fill-picker-scale"),X=J.querySelector(".fig-fill-picker-image-preview");Z.addEventListener("change",(j)=>{let Y=typeof j.detail==="string"?j.detail:j.target?.value;if(!Y)return;this.#V.scaleMode=Y,$.style.display=Y==="tile"?"block":"none",this.#KJ(X),this.#_(),this.#G()}),$.addEventListener("input",(j)=>{this.#V.scale=parseFloat(j.target.value)||100,this.#KJ(X),this.#_(),this.#G()}),X.addEventListener("loaded",(j)=>{let Y=j.detail?.src||X.src;if(!Y)return;let Q=Y!==this.#V.url;if(this.#V.url=Y,this.#KJ(X),this.#_(),Q)this.#G();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:j.detail??{src:Y}}))}),X.addEventListener("change",()=>{if(X.src)return;this.#V.url=null,this.#KJ(X),this.#_(),this.#G()}),this.#KJ(X)}#KJ(J){if(!this.#V.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.#V.url),J.classList.add("has-media"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="",J.mediaEl?.style.removeProperty("opacity");let Z=J.querySelector("fig-input-file[data-generated]");if(Z)Z.setAttribute("label","Replace"),Z.removeAttribute("url");switch(this.#V.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.#V.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#V.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#HJ(J){if(J.tagName==="FIG-MEDIA"){if(!this.#X.url){J.removeAttribute("src"),J.classList.remove("has-media");return}if(J.setAttribute("src",this.#X.url),this.#X.poster)J.setAttribute("poster",this.#X.poster);else J.removeAttribute("poster");J.classList.add("has-media");let Z=J.querySelector("fig-input-file[data-generated]");if(Z)Z.setAttribute("label","Replace"),Z.removeAttribute("url");switch(this.#X.scaleMode){case"fill":case"crop":J.setAttribute("fit","cover");break;case"fit":J.setAttribute("fit","contain");break}return}switch(J.style.objectPosition="center",J.style.width="100%",J.style.height="100%",this.#X.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#BZ(){let J=this.#J.querySelector('[data-tab="video"]'),Z=q("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#X.scaleMode},q("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([j,Y])=>q("fig-select-option",{value:j},Y)))),$=q("fig-field",{className:"fig-fill-picker-media-header"},Z),X=q("fig-media",{className:"fig-fill-picker-media-preview fig-fill-picker-video-preview",type:"video",upload:"true",label:"Upload from computer","aria-label":"Video fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",controls:!0,muted:"true",loop:"true"});J.replaceChildren($,X),this.#fZ(J),this.#PJ({emit:!1})}#LJ(){if(this.#X.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#X.poster),this.#x.delete(this.#X.poster);this.#X.poster=null,this.#v=null}#DJ(){if(!this.#X.poster)return;if(this.#v&&this.#v===this.#X.url)return;this.#LJ()}#lJ(){let J=this.#J?.querySelector(".fig-fill-picker-video-preview");if(J)this.#HJ(J)}#PJ({emit:J=!1}={}){if(this.#X.url){if(this.#X.missing=!1,this.#DJ(),!this.#X.poster)this.#CJ(this.#X.url);else this.#lJ();return}let Z=this.getAttribute("default-video");if(!Z){this.#X.missing=!0;return}if(this.#X.url=Z,this.#X.missing=!1,this.#lJ(),this.#CJ(Z),J)this.#G()}#tJ(){if(this.#z!=="video")return;let J=this.#X.url;if(!J)return;if(this.#DJ(),this.#X.poster)return;this.#CJ(J)}async#HZ(J){if(typeof J.requestVideoFrameCallback==="function")await Promise.race([new Promise((Z)=>J.requestVideoFrameCallback(()=>Z())),new Promise((Z)=>setTimeout(Z,80))]);else try{await J.play(),J.pause()}catch{}if(typeof createImageBitmap==="function")try{return await createImageBitmap(J)}catch{}return null}async#LZ(J){let Z=await this.#HZ(J),$=Z?.width||J.videoWidth,X=Z?.height||J.videoHeight;if(!$||!X)return Z?.close?.(),null;let j=typeof OffscreenCanvas==="function"?new OffscreenCanvas($,X):Object.assign(document.createElement("canvas"),{width:$,height:X}),Y=j.getContext("2d");if(!Y)return Z?.close?.(),null;try{Y.drawImage(Z||J,0,0,$,X)}finally{Z?.close?.()}return j.convertToBlob?j.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((Q)=>j.toBlob(Q,"image/jpeg",0.85))}async#CJ(J,{emit:Z=!1}={}){if(!J||this.#n===J)return;this.#n=J;let $=document.createElement("video");$.muted=!0,$.playsInline=!0,$.preload="auto",$.crossOrigin="anonymous";try{if(await new Promise((j,Y)=>{let Q=()=>Y(Error("video poster failed"));$.addEventListener("error",Q,{once:!0}),$.addEventListener("loadeddata",j,{once:!0}),$.src=J}),!$.videoWidth||!$.videoHeight)return;let X=await this.#LZ($);if(!X||this.#X.url!==J)return;if(this.#LJ(),this.#X.poster=URL.createObjectURL(X),this.#v=J,this.#x.add(this.#X.poster),this.#_(),this.#lJ(),Z)this.#G()}catch{}finally{if($.removeAttribute("src"),$.load(),this.#n===J)this.#n=null}}#fZ(J){let Z=J.querySelector(".fig-fill-picker-scale-mode"),$=J.querySelector(".fig-fill-picker-video-preview");Z.addEventListener("change",(X)=>{let j=typeof X.detail==="string"?X.detail:X.target?.value;if(!j)return;this.#X.scaleMode=j,this.#HJ($),this.#_(),this.#G()}),$.addEventListener("loaded",(X)=>{let j=X.detail?.src||$.src;if(!j)return;let Y=j!==this.#X.url;if(Y)this.#LJ();if(this.#X.url=j,this.#X.missing=!1,this.#HJ($),this.#CJ(j),this.#_(),Y)this.#G();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:X.detail??{src:j}}))}),$.addEventListener("change",()=>{if($.src)return;this.#X.url=null,this.#LJ(),this.#PJ(),this.#HJ($),this.#_(),this.#G()}),this.#HJ($)}#_Z(){let J=this.#J.querySelector('[data-tab="webcam"]'),Z=q("fig-field",{className:"fig-fill-picker-webcam-camera"},q("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));Z.style.display="none";let $=q("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});$.muted=!0;let X=q("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},q("span",{},"Camera access required")),j=q("fig-video",{className:"fig-fill-picker-webcam-preview","aria-label":"Webcam preview","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",autoplay:"true",muted:"true"},[$,X]),Y=q("div",{className:"fig-fill-picker-webcam-controls"},q("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));J.replaceChildren(Z,j,Y),this.#OZ(J)}#OZ(J){let Z=J.querySelector(".fig-fill-picker-webcam-video"),$=J.querySelector(".fig-fill-picker-webcam-status"),X=J.querySelector(".fig-fill-picker-webcam-capture"),j=J.querySelector(".fig-fill-picker-webcam-camera"),Y=J.querySelector(".fig-fill-picker-camera-select"),Q=(U)=>{if(U)X.removeAttribute("disabled");else X.setAttribute("disabled","")},W=()=>{let U=!!this.#Y.stream&&Z.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&Z.videoWidth>0&&Z.videoHeight>0;if(Q(U),U)$.querySelector("span").textContent="Camera ready",$.style.display="none",this.#IJ(Z)};Z.addEventListener("loadedmetadata",W),Z.addEventListener("canplay",W),Z.addEventListener("playing",W);let K=(U)=>{this.#Y.stream=U,Z.srcObject=U,Z.muted=!0,Z.playsInline=!0,Z.style.display="block";let V=Z.play?.();if(V?.catch)V.catch(()=>{});W()},z=async(U,V)=>{let H=await navigator.mediaDevices.enumerateDevices();if(U!=null&&U!==this.#b)return;let L=H.filter((M)=>M.kind==="videoinput");if(L.length>1){j.style.display="";let M=Y.querySelector(":scope > fig-select-options");if(!M)M=document.createElement("fig-select-options"),Y.append(M);if(M.replaceChildren(),L.forEach((O,T)=>{let B=document.createElement("fig-select-option");B.value=O.deviceId;let f=O.label||(L.length>1?`Camera ${T+1}`:"Camera");B.textContent=f.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(N,P)=>{return` ${/^\d+$/.test(P)?Number.parseInt(P,10).toString():P.replace(/^0+/,"")||"0"}`}),M.append(B)}),V)Y.value=V}else j.style.display="none",Y.querySelector(":scope > fig-select-options")?.replaceChildren()},G=async(U=null)=>{let V=U||this.#Y.deviceId||null,H=this.#Y.stream,L=H?.getTracks?.().filter((O)=>O.readyState!=="ended")??[];if(H&&L.length){let O=H.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#Y.deviceId||null;if(!V||V===O){K(H),this.#a(),z(null,V||O);return}}this.#WJ({emit:Boolean(H)});let M=this.#b;Q(!1),$.querySelector("span").textContent="Starting camera",$.style.display="flex";try{let O={video:V?{deviceId:{exact:V}}:!0},T=await navigator.mediaDevices.getUserMedia(O);if(M!==this.#b||!this.isConnected||this.#U!=="webcam"){T.getTracks().forEach((f)=>f.stop());return}let B=T.getVideoTracks?.()?.[0];this.#Y.deviceId=V||B?.getSettings?.()?.deviceId||null,this.#Y.live=this.#JJ()==="live",K(T),this.#a(),await z(M,V)}catch(O){if(M!==this.#b)return;console.error("Webcam error:",O.name,O.message);let T="Camera access denied";if(O.name==="NotAllowedError")T="Camera permission denied";else if(O.name==="NotFoundError")T="No camera found";else if(O.name==="NotReadableError")T="Camera in use by another app";else if(O.name==="OverconstrainedError")T="Camera constraints not supported";else if(!window.isSecureContext)T="Camera requires secure context";$.replaceChildren();let B=document.createElement("span");B.textContent=T,$.appendChild(B),$.style.display="flex",Z.style.display="none",Q(!1)}};this.#I=G,Y.addEventListener("change",(U)=>{let V=typeof U.detail==="string"?U.detail:U.target?.value;if(!V||V===this.#Y.deviceId)return;G(V)}),X.addEventListener("click",async()=>{if(!this.#Y.stream)return;let U=await this.#UJ(Z);if(!U)return;this.#V.url=U,this.#Y.live=!1;let V=this.#J.querySelector(".fig-fill-picker-image-preview");if(V)this.#KJ(V);if(Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).some((L)=>L.dataset.tab==="image"))this.#GJ("image");else this.#_(),this.#G();this.#i()})}#oJ(J){let Z=J.h/360,$=J.s/100,X=J.v/100,j,Y,Q,W=Math.floor(Z*6),K=Z*6-W,z=X*(1-$),G=X*(1-K*$),U=X*(1-(1-K)*$);switch(W%6){case 0:j=X,Y=U,Q=z;break;case 1:j=G,Y=X,Q=z;break;case 2:j=z,Y=X,Q=U;break;case 3:j=z,Y=G,Q=X;break;case 4:j=U,Y=z,Q=X;break;case 5:j=X,Y=z,Q=G;break}return{r:Math.round(j*255),g:Math.round(Y*255),b:Math.round(Q*255)}}#fJ(J){let Z=J.r/255,$=J.g/255,X=J.b/255,j=Math.max(Z,$,X),Y=Math.min(Z,$,X),Q=j-Y,W=0,K=j===0?0:Q/j,z=j;if(j!==Y){switch(j){case Z:W=($-X)/Q+($<X?6:0);break;case $:W=(X-Z)/Q+2;break;case X:W=(Z-$)/Q+4;break}W/=6}return{h:W*360,s:K*100,v:z*100,a:1}}#jJ(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Z=this.#oJ(J),$=(X)=>{return(isNaN(X)?217:Math.max(0,Math.min(255,Math.round(X)))).toString(16).padStart(2,"0")};return`#${$(Z.r)}${$(Z.g)}${$(Z.b)}`}#_J(J){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),X=parseInt(J.slice(5,7),16);return this.#fJ({r:Z,g:$,b:X})}#MZ(J,Z=1){let $=parseInt(J.slice(1,3),16),X=parseInt(J.slice(3,5),16),j=parseInt(J.slice(5,7),16);return`rgba(${$}, ${X}, ${j}, ${Z})`}#kZ(J){let Z=Math.max(0,Math.min(1,Number(J)||0)),$=Math.round(Z*1000)/1000;return String($)}#TZ(J=this.#j){let Z=this.#oJ(J);return`rgba(${Z.r}, ${Z.g}, ${Z.b}, ${this.#kZ(J.a)})`}#NZ(J){let Z=String(J??"").trim();if(!Z)return null;let $=Z.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if($){let j=$[1];if(j.length===3)j=j[0]+j[0]+j[1]+j[1]+j[2]+j[2];let Y=1;if(j.length===8)Y=parseInt(j.slice(6,8),16)/255,j=j.slice(0,6);return{...this.#_J(`#${j}`),a:Y}}let X=Z.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if(X){let j=Math.max(0,Math.min(255,Math.round(parseFloat(X[1])))),Y=Math.max(0,Math.min(255,Math.round(parseFloat(X[2])))),Q=Math.max(0,Math.min(255,Math.round(parseFloat(X[3])))),W=X[4]!==void 0?Math.max(0,Math.min(1,parseFloat(X[4]))):1;if(![j,Y,Q,W].every(Number.isFinite))return null;return{...this.#fJ({r:j,g:Y,b:Q}),a:W}}return null}#RZ(J,Z=1){let $=+(parseInt(J.slice(1,3),16)/255).toFixed(4),X=+(parseInt(J.slice(3,5),16)/255).toFixed(4),j=+(parseInt(J.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${$} ${X} ${j} / ${Z})`}#FZ(J){let Z=J.r/255,$=J.g/255,X=J.b/255,j=Math.max(Z,$,X),Y=Math.min(Z,$,X),Q,W,K=(j+Y)/2;if(j===Y)Q=W=0;else{let z=j-Y;switch(W=K>0.5?z/(2-j-Y):z/(j+Y),j){case Z:Q=(($-X)/z+($<X?6:0))/6;break;case $:Q=((X-Z)/z+2)/6;break;case X:Q=((Z-$)/z+4)/6;break}}return{h:Q*360,s:W*100,l:K*100}}#yZ(J){let Z=J.h/360,$=J.s/100,X=J.l/100,j,Y,Q;if($===0)j=Y=Q=X;else{let W=(G,U,V)=>{if(V<0)V+=1;if(V>1)V-=1;if(V<0.16666666666666666)return G+(U-G)*6*V;if(V<0.5)return U;if(V<0.6666666666666666)return G+(U-G)*(0.6666666666666666-V)*6;return G},K=X<0.5?X*(1+$):X+$-X*$,z=2*X-K;j=W(z,K,Z+0.3333333333333333),Y=W(z,K,Z),Q=W(z,K,Z-0.3333333333333333)}return{r:Math.round(j*255),g:Math.round(Y*255),b:Math.round(Q*255)}}#eJ(J){let Z=(U)=>{return U=U/255,U<=0.04045?U/12.92:Math.pow((U+0.055)/1.055,2.4)},$=Z(J.r),X=Z(J.g),j=Z(J.b),Y=0.4122214708*$+0.5363325363*X+0.0514459929*j,Q=0.2119034982*$+0.6806995451*X+0.1073969566*j,W=0.0883024619*$+0.2817188376*X+0.6299787005*j,K=Math.cbrt(Y),z=Math.cbrt(Q),G=Math.cbrt(W);return{l:0.2104542553*K+0.793617785*z-0.0040720468*G,a:1.9779984951*K-2.428592205*z+0.4505937099*G,b:0.0259040371*K+0.7827717662*z-0.808675766*G}}#DZ(J){let Z=this.#eJ(J);return{l:Z.l,c:Math.sqrt(Z.a*Z.a+Z.b*Z.b),h:(Math.atan2(Z.b,Z.a)*180/Math.PI+360)%360}}#JZ(J){let Z=J.l+0.3963377774*J.a+0.2158037573*J.b,$=J.l-0.1055613458*J.a-0.0638541728*J.b,X=J.l-0.0894841775*J.a-1.291485548*J.b,j=Z*Z*Z,Y=$*$*$,Q=X*X*X,W=(K)=>{let z=K<=0.0031308?12.92*K:1.055*Math.pow(K,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,z))*255)};return{r:W(4.0767416621*j-3.3077115913*Y+0.2309699292*Q),g:W(-1.2684380046*j+2.6097574011*Y-0.3413193965*Q),b:W(-0.0041960863*j-0.7034186147*Y+1.707614701*Q)}}#PZ(J){let Z=J.h*Math.PI/180;return this.#JZ({l:J.l,a:J.c*Math.cos(Z),b:J.c*Math.sin(Z)})}#G(){if(this.#y())return;this.#_(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#i(){if(this.#y())return;this.#A=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#z,colorSpace:this.#H};switch(this.#z){case"solid":return{...J,color:this.#jJ(this.#j),alpha:this.#j.a,hsv:{...this.#j}};case"gradient":return{...J,gradient:S(this.#Q),css:this.#aJ()};case"image":return{...J,image:{...this.#V}};case"video":return{...J,video:this.#c()};case"webcam":return{...J,webcam:this.#zJ()};default:return{...J,...this.#w[this.#z]}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Z,$){if(Z===$)return;switch(J){case"value":if(this.#FJ(),this.#_(),this.#tJ(),this.#J?.open&&!this.#k)this.#hJ(),this.#A=JSON.stringify(this.value);break;case"disabled":if(this.#s(),this.#y()&&this.#J?.open)this.close();break;case"alpha":case"mode":{if(!this.#J)break;let X=this.#J.open;if(this.#MJ(),X&&this.isConnected)this.#QJ();break}case"webcam-mode":if(this.#z==="webcam")this.#_();break;case"default-video":if(this.#z==="video")this.#PJ({emit:!1}),this.#_();break;case"aria-label":if(this.#J)this.#J.setAttribute("aria-label",this.#VJ());case"aria-labelledby":case"aria-describedby":this.#s();break}}}y("fig-fill-picker",D);class _ extends HTMLElement{static#Z=new Set(["oklch","hsl"]);static#$=10;static#W=10;static#K=8;static#J=3;static#B=210;static#U={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#z=!1;#H=null;#j=null;#q={..._.#U};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#q}}}set value(J){if(J==null||J===""){this.removeAttribute("value");return}if(typeof J==="string"){this.setAttribute("value",J);return}this.setAttribute("value",JSON.stringify(J))}connectedCallback(){this.#Q(),this.#V(),this.#k(),this.#N()}attributeChangedCallback(J,Z,$){if(Z===$)return;if(J!=="value")return;if(this.#V(),this.#z)this.#N()}#Q(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#V(){let J=this.getAttribute("value");if(!J){this.#q={..._.#U,stops:_.#U.stops.map((Z)=>({...Z}))};return}try{let Z=JSON.parse(J),$=Z?.type==="gradient"&&Z.gradient?Z.gradient:Z?.gradient?Z.gradient:Z;if(!$||typeof $!=="object")return;this.#q=this.#X({..._.#U,...$})}catch{}}#X(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase(),X=String(Z.hueInterpolation??"shorter").toLowerCase(),j=Array.isArray(Z.stops)?Z.stops.map((Y)=>({color:String(Y?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Y?.position??0,opacity:Y?.opacity??100})):_.#U.stops.map((Y)=>({...Y}));if(j.length<2)return{..._.#U,stops:_.#U.stops.map((Y)=>({...Y}))};return{type:["linear","radial","angular"].includes(Z.type)?Z.type:"linear",angle:Number.isFinite(Number(Z.angle))?Number(Z.angle):135,interpolationSpace:$,hueInterpolation:X,stops:j}}#Y(){return _.#Z.has(this.#q.interpolationSpace||"srgb")}#F(J){let{r:Z,g:$,b:X}=u(J);if(this.#q.interpolationSpace==="hsl")return ZJ(Z,$,X).h;let j=$J(Z,$,X);return(XJ(j.l,j.a,j.b).h%360+360)%360}#R(){let J=this.#M(),Z=this.#F(J[0]?.color||"#FF0000"),$=this.#F(J[J.length-1]?.color||"#4F9EFF"),X=_.#B-Z,Y=((_.#B-$-X)%360+360)%360,Q=Y===0?0:Y-360,W=this.#q.hueInterpolation||"shorter",K;if(W==="increasing")K=Q;else if(W==="decreasing")K=Y;else if(W==="longer")K=Y<180?Q:Y;else K=Y<=180?Y:Q;let z=Math.sign(K),G=Math.asin(_.#J/2/_.#K)*180/Math.PI,U=Math.min(G,Math.max(0,(Math.abs(K)-0.01)/2));return{startDeg:X+z*U,sweepDeg:K-z*U*2}}#L(J){let Z=J*Math.PI/180;return{x:_.#$+_.#K*Math.cos(Z),y:_.#W+_.#K*Math.sin(Z)}}#f(J,Z){let $=J+Z,X=this.#L(J),j=this.#L($),Y=Math.abs(Z)>180?1:0,Q=Z>=0?1:0;return`M ${X.x} ${X.y} A ${_.#K} ${_.#K} 0 ${Y} ${Q} ${j.x} ${j.y}`}#w(){let J=this.#L(180),Z=this.#L(0);return`M ${J.x} ${J.y} L ${Z.x} ${Z.y}`}#O(J){let Z=_.#J,$=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${J}" fill="none" stroke="white" stroke-width="${Z}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent($)}")`}#M(){return[...this.#q.stops].sort((J,Z)=>(J.position??0)-(Z.position??0))}#D(){let J=this.#q.interpolationSpace||"srgb";if(J==="srgb")return"";if(_.#Z.has(J))return` in ${J} ${this.#q.hueInterpolation||"shorter"} hue`;return` in ${J}`}#T(){let J=this.#M(),Z=this.#D();if(this.#Y()){let X=(_.#B+90)%360,j=this.#q.interpolationSpace,Y=(W)=>j==="oklch"?`oklch(65% 0.25 ${W})`:`hsl(${W} 100% 50%)`,Q=[0,300,240,180,120,60,0].map(Y).join(", ");return`conic-gradient(from ${X}deg in ${j} decreasing hue, ${Q})`}let $=J.map((X)=>`${X.color} ${X.position??0}%`).join(", ");return`linear-gradient(90deg${Z}, ${$})`}#k(){if(this.#z)return;let J=_.#J,Z=h("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},h("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":J})),$=q("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren(Z,$),this.#H=Z,this.#j=$,this.#z=!0}#N(){if(!this.#j)return;let J=this.#Y();if(this.#H)this.#H.style.display=J?"":"none";let Z=J?(()=>{let{startDeg:X,sweepDeg:j}=this.#R();return this.#f(X,j)})():this.#w(),$=this.#O(Z);this.#j.style.setProperty("-webkit-mask-image",$),this.#j.style.maskImage=$,this.#j.style.background=this.#T()}}y("fig-interpolation-swatch",_);class R extends HTMLElement{static observedAttributes=["axis","handle","items","indicator","disabled"];static#Z=6;static#$=['[draggable]:not([draggable="false"])','img:not([draggable="false"])','a[href]:not([draggable="false"])','input[type="range"]',"fig-handle","fig-slider","fig-input-number","fig-input-gradient","fig-easing-curve","fig-angle","fig-audio","fig-audio-waveform","fig-input-wheel","fig-joystick","fig-origin-grid","fig-chooser","fig-canvas-control"];static#W=new Set(["data-reorder-item","data-reorder-generated-role","data-reorder-handle","role","tabindex","aria-label","aria-roledescription"]);#K=null;#J=null;#B=!1;#U=new Map;#z=null;#H=null;#j=null;connectedCallback(){if(this.style.display="contents",!this.hasAttribute("role"))this.setAttribute("role","list");if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label","Reorderable list");this.#m(),this.#f(),this.#K=new MutationObserver(()=>this.#f()),this.#K.observe(this,{childList:!0}),this.#q()}disconnectedCallback(){this.#K?.disconnect(),this.#K=null,this.#J?.disconnect(),this.#J=null,this.#a(),this.#$J(),this.#p(),this.#j?.remove(),this.#j=null}attributeChangedCallback(J){if(this.isConnected){if(this.#Q)this.#$J();if(J==="indicator")this.#y();this.#q(),this.#f()}}refresh(){if(this.isConnected)this.#f()}#q(){if(!this.#Y){this.#J?.disconnect(),this.#J=null;return}if(this.#J)return;this.#J=new MutationObserver((J)=>{if(!J.some(($)=>$.target.parentElement===this&&!R.#W.has($.attributeName)&&!($.attributeName==="class"&&$.target===this.#z?.item))||this.#B)return;this.#B=!0,queueMicrotask(()=>{if(this.#B=!1,this.isConnected)this.#f()})}),this.#J.observe(this,{subtree:!0,attributes:!0})}get#Q(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#V(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#X(){return(this.getAttribute("handle")||"").trim()}get#Y(){return(this.getAttribute("items")||"").trim()}get#F(){return(this.getAttribute("indicator")||"default").trim().toLowerCase()}#R(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE&&!J.hasAttribute("data-reorder-live"))}#L(){let J=this.#R(),Z=this.#Y;if(!Z)return J;try{return J.filter(($)=>$.matches(Z))}catch{return[]}}#f(){let J=this.#R(),Z=this.#L(),$=new Set(Z);for(let[j,Y]of this.#U)if(!$.has(j))Y.target.removeEventListener("pointerdown",Y.onPointerDown,!0),Y.target.removeEventListener("keydown",Y.onKeyDown),this.#C(Y),this.#U.delete(j);this.#D(J),this.#w(J),this.#M(J.filter((j)=>!$.has(j)));let X=!this.#Q&&Z.length>=2;if(this.#O(Z,X),!X){this.#a();return}for(let j of Z){let Y=this.#k(j),Q=this.#U.get(j);if(Q&&Q.target===Y)continue;if(Q)Q.target.removeEventListener("pointerdown",Q.onPointerDown,!0),this.#U.delete(j);if(!Y)continue;this.#N(j,Y)}this.#T(Z)}#w(J){for(let Z of J)if(Z.removeAttribute("data-reorder-item"),Z.hasAttribute("data-reorder-generated-role"))Z.removeAttribute("role"),Z.removeAttribute("data-reorder-generated-role")}#O(J,Z=!0){for(let $ of J){if(Z)$.setAttribute("data-reorder-item","");if(!$.hasAttribute("role"))$.setAttribute("role","listitem"),$.setAttribute("data-reorder-generated-role","")}}#M(J){for(let Z of J)if(!Z.hasAttribute("role"))Z.setAttribute("role","none"),Z.setAttribute("data-reorder-generated-role","")}#D(J){for(let Z of J)Z.querySelectorAll("[data-reorder-handle]").forEach(($)=>{$.removeAttribute("data-reorder-handle"),$.removeAttribute("aria-roledescription")})}#T(J){if(!this.#X)return;for(let Z of J){let $=Z.querySelector(this.#X);if($)$.setAttribute("data-reorder-handle",""),$.setAttribute("aria-roledescription","reorder handle")}}#k(J){if(this.#X)return J.querySelector(this.#X);return J}#N(J,Z){let $=(K)=>{if(this.#Q||this.#L().length<2)return;if(K.button!==0)return;if(!this.#X&&this.#A(K.target,J))return;this.#t(K,J,Z)},X=Z.getAttribute("tabindex"),j=Z.getAttribute("aria-label"),Y=Z.getAttribute("role"),Q=J.getAttribute("aria-label")||J.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";if(Z.setAttribute("tabindex","0"),Z.setAttribute("aria-label",`Move ${Q}`),Z!==J&&!Z.hasAttribute("role"))Z.setAttribute("role","button");let W=(K)=>{if(this.#Q)return;let z=this.#V==="horizontal",G=z?"ArrowLeft":"ArrowUp",U=z?"ArrowRight":"ArrowDown";if(K.key!==G&&K.key!==U&&K.key!=="Home"&&K.key!=="End")return;K.preventDefault(),K.stopPropagation();let V=this.#L(),H=V.indexOf(J),L=H;if(K.key===G)L=Math.max(0,H-1);else if(K.key===U)L=Math.min(V.length-1,H+1);else if(K.key==="Home")L=0;else if(K.key==="End")L=V.length-1;if(L===H){this.#u(`${Q}, position ${H+1} of ${V.length}`);return}this.#c(J,L),this.#f(),this.#k(J)?.focus(),this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:H,newIndex:L,item:J}})),this.#u(`${Q}, position ${L+1} of ${V.length}`)};Z.addEventListener("pointerdown",$,!0),Z.addEventListener("keydown",W),this.#U.set(J,{target:Z,onPointerDown:$,onKeyDown:W,originalTabIndex:X,originalAriaLabel:j,originalRole:Y})}#C(J){let{target:Z,originalTabIndex:$,originalAriaLabel:X,originalRole:j}=J;if($===null)Z.removeAttribute("tabindex");else Z.setAttribute("tabindex",$);if(X===null)Z.removeAttribute("aria-label");else Z.setAttribute("aria-label",X);if(j===null)Z.removeAttribute("role");else Z.setAttribute("role",j)}#m(){if(this.#j?.isConnected)return;let J=document.createElement("span");J.setAttribute("data-reorder-live",""),J.setAttribute("role","status"),J.setAttribute("aria-live","polite"),J.setAttribute("aria-atomic","true"),Object.assign(J.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}),this.#j=J,document.body.appendChild(J)}#u(J){if(!this.#j)return;this.#j.textContent="",requestAnimationFrame(()=>{if(this.#j)this.#j.textContent=J})}#A(J,Z){let $=J;while($&&$!==Z){if($ instanceof Element){for(let X of R.#$)if($.matches(X))return!0}$=$.parentElement}return!1}static#I="fig-reorder-dragging";static#b(J){document.body.classList.toggle(R.#I,J)}#t(J,Z,$){this.#$J();let X={item:Z,target:$,pointerId:J.pointerId,oldIndex:this.#L().indexOf(Z),targetIndex:this.#L().indexOf(Z),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};X.onMove=(j)=>{if(j.pointerId!==X.pointerId)return;let Y=j.clientX-X.startX,Q=j.clientY-X.startY;if(!X.active){if(Y*Y+Q*Q<R.#Z*R.#Z)return;X.active=!0,J.preventDefault(),J.stopPropagation(),Z.classList.add("dragging"),R.#b(!0);try{$.setPointerCapture(X.pointerId)}catch{}}j.preventDefault();let W=this.#V==="horizontal"?j.clientX:j.clientY,K=this.#r(W);X.targetIndex=K,this.#JJ(K,Z)},X.onKeyDown=(j)=>{if(j.key!=="Escape"||!X.active)return;j.preventDefault(),this.#ZJ(X,!0)},X.onUp=(j)=>{if(j.pointerId!==X.pointerId)return;this.#ZJ(X,j.type==="pointercancel")},this.#z=X,window.addEventListener("pointermove",X.onMove),window.addEventListener("pointerup",X.onUp),window.addEventListener("pointercancel",X.onUp),window.addEventListener("keydown",X.onKeyDown)}#r(J){let Z=this.#L(),$=this.#V==="horizontal";for(let X=0;X<Z.length;X++){let j=Z[X].getBoundingClientRect(),Y=$?j.left+j.width/2:j.top+j.height/2;if(J<Y)return X}return Z.length}#e(J,Z){let $=this.#L(),X=$.indexOf(J);if(X===-1)return!1;let j=Math.max(0,Math.min(Z,$.length));if(Z===X)return!1;if(j>=$.length&&X===$.length-1)return!1;return!0}#x(J){if(!J.length)return null;let Z=1/0,$=-1/0,X=1/0,j=-1/0;for(let Y of J){let Q=Y.getBoundingClientRect();Z=Math.min(Z,Q.left),$=Math.max($,Q.right),X=Math.min(X,Q.top),j=Math.max(j,Q.bottom)}return{left:Z,top:X,width:$-Z,height:j-X}}#n(){let J=[":popover-open",":modal",":fullscreen"],Z=this.parentElement;while(Z){if(J.some((X)=>{try{return Z.matches(X)}catch{return!1}}))return Z;Z=Z.parentElement}return document.body}#v(){if(this.#H)return this.#H;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#V),J.classList.toggle("fig-reorder-indicator-ring",this.#F==="ring"),this.#n().appendChild(J),this.#H=J,J}#y(){this.#H?.classList.toggle("fig-reorder-indicator-ring",this.#F==="ring")}#JJ(J,Z){let $=this.#L();if(!this.#e(Z,J)){this.#p();return}let X=this.#x($);if(!X){this.#p();return}let j=this.#v();if(j.setAttribute("data-axis",this.#V),this.#V==="horizontal"){let Q;if(J<=0)Q=$[0].getBoundingClientRect().left;else if(J>=$.length)Q=$[$.length-1].getBoundingClientRect().right;else Q=$[J].getBoundingClientRect().left;j.style.left=`${Q-1}px`,j.style.top=`${X.top}px`,j.style.width="2px",j.style.height=`${X.height}px`;return}let Y;if(J<=0)Y=$[0].getBoundingClientRect().top;else if(J>=$.length)Y=$[$.length-1].getBoundingClientRect().bottom;else Y=$[J].getBoundingClientRect().top;j.style.left=`${X.left}px`,j.style.top=`${Y-1}px`,j.style.width=`${X.width}px`,j.style.height="2px"}#p(){this.#H?.remove(),this.#H=null}#zJ(J,Z){let $=this.#L(),X=Math.max(0,Math.min(Z,$.length));if(X>=$.length){let Y=$[$.length-1];if(Y&&Y!==J)Y.after(J);return}let j=$[X];if(j!==J)this.insertBefore(J,j)}#c(J,Z){let $=this.#L().filter((j)=>j!==J),X=$[Z]??null;if(X)this.insertBefore(J,X);else if($.length)$[$.length-1].after(J);else this.appendChild(J)}#ZJ(J,Z){let{item:$,oldIndex:X,active:j,onMove:Y,onUp:Q,onKeyDown:W}=J;if(window.removeEventListener("pointermove",Y),window.removeEventListener("pointerup",Q),window.removeEventListener("pointercancel",Q),window.removeEventListener("keydown",W),j){if(!Z){this.#zJ($,J.targetIndex);let K=this.#L().indexOf($);if(K!==-1&&K!==X){this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:X,newIndex:K,item:$}}));let z=$.getAttribute("aria-label")||$.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";this.#u(`${z}, position ${K+1} of ${this.#L().length}`)}}}if($.classList.remove("dragging"),R.#b(!1),this.#p(),this.#z===J)this.#z=null}#a(){for(let[,J]of this.#U)J.target.removeEventListener("pointerdown",J.onPointerDown,!0),J.target.removeEventListener("keydown",J.onKeyDown),this.#C(J);this.#U.clear()}#$J(){if(!this.#z)return;this.#ZJ(this.#z,!0)}}y("fig-reorder",R);
+    `,Z.appendChild($);let J=document.createElement("fig-button");J.className="fig-select-trigger",J.setAttribute("part","trigger"),J.setAttribute("variant","ghost"),J.setAttribute("aria-haspopup","listbox"),J.setAttribute("aria-expanded","false");let X=document.createElement("span");X.className="fig-select-prepend",X.setAttribute("part","prepend"),X.setAttribute("aria-hidden","true");let Y=document.createElement("slot");Y.setAttribute("name","prepend-trigger"),Y.hidden=!0;let Q=document.createElement("span");Q.className="fig-select-prepend-fallback",X.append(Y,Q);let j=document.createElement("span");j.className="fig-select-label",j.setAttribute("part","label");let W=document.createElement("slot");W.setAttribute("name","trigger"),W.hidden=!0,J.append(X,j,W);let K=document.createElement("dialog",{is:"fig-popup"});if(K.setAttribute("is","fig-popup"),K.setAttribute("part","listbox"),K.setAttribute("theme","menu"),K.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)K.setAttribute("popover","manual");K.id=YZ(),J.setAttribute("aria-controls",K.id);let U=document.createElement("slot");if(U.setAttribute("name","panel"),K.appendChild(U),Z.append(J,K),this.#Z=J,this.#K=X,this.#U=Y,this.#$=Q,this.#V=W,this.#q=j,this.#J=K,this.#W=U,this.#s(),this.#y(),this.#x(),!this.hasAttribute("value")){let H=this.#XZ().find((z)=>T(z,"selected"));if(H)this.setAttribute("value",H.value)}}#x(){if(!this.#J||this.#z)return;if(typeof this.#J.positionPopup!=="function")return;this.#X=this.#J.positionPopup.bind(this.#J),this.#J.positionPopup=()=>{if(!this.open){this.#X?.();return}this.#D()},this.#z=!0}#n(Z){if(!Z)return null;let $=document.createRange();$.selectNodeContents(Z);let J=[...$.getClientRects()].filter((X)=>X.width>0&&X.height>0);if(J.length)return J[0];return Z.getBoundingClientRect()}#h(){if(typeof this.#J?.parseViewportMargins==="function")return this.#J.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#C(){if(this.#_?.isConnected)return this.#_;let Z=this.getAttribute("menu-anchor");if(Z)try{let $=this.parentElement?.querySelector(Z);if($&&$!==this&&!this.contains($))return $;let X=this.getRootNode()?.querySelector?.(Z);if(X&&X!==this&&!this.contains(X))return X}catch{}return null}#ZZ(){return this.#C()||this.#Z}#c(){return Boolean(this.#C())}#UZ(){return!this.#zZ()&&this.#c()}#s(){if(!this.#J)return;if(this.#J.anchor=this.#ZZ(),this.#o(),!this.open)return;this.#j=!1,this.#G=null,this.#T=null,this.#J.setupObservers?.(),this.#J.queueReposition?.()}#$Z(){let Z=this.#q?.getBoundingClientRect();if(Z?.width&&Z?.height)return Z;let $=this.querySelector(':scope > [slot="trigger"]')?.getBoundingClientRect();if($?.width&&$?.height)return $;return this.#K?.getBoundingClientRect()??null}#a(){let $=(this.#UZ()?this.#C():null)?.getBoundingClientRect()??this.#$Z();if(!$)return null;return{x:$.x,y:$.y,width:$.width,height:$.height}}#JZ(){let Z=window.visualViewport;return{width:Z?.width??window.innerWidth,height:Z?.height??window.innerHeight,offsetLeft:Z?.offsetLeft??0,offsetTop:Z?.offsetTop??0}}#yZ(Z,$,J=0.25){if(!Z&&!$)return!1;if(!Z||!$)return!0;return Math.abs(Z.x-$.x)>J||Math.abs(Z.y-$.y)>J||Math.abs(Z.width-$.width)>J||Math.abs(Z.height-$.height)>J}#SZ(Z,$,J=0.25){if(!Z&&!$)return!1;if(!Z||!$)return!0;return Math.abs(Z.width-$.width)>J||Math.abs(Z.height-$.height)>J||Math.abs(Z.offsetLeft-$.offsetLeft)>J||Math.abs(Z.offsetTop-$.offsetTop)>J}#EZ(){if(!this.#j)return!1;let Z=this.#yZ(this.#G,this.#a()),$=this.#SZ(this.#T,this.#JZ());return!Z&&!$}#FZ(){this.#G=this.#a(),this.#T=this.#JZ()}#zZ(){let Z=this.getAttribute("position");return Boolean(Z&&Z.trim())}#IZ(){if(!this.#J)return;this.#J.style.removeProperty("left"),this.#J.style.removeProperty("top"),this.#J.style.removeProperty("right"),this.#J.style.removeProperty("bottom")}#D(){if(this.#zZ()){if(this.#j=!1,this.#G=null,this.#T=null,this.#o(),this.#IZ(),this.#xZ())return;this.#X?.(),this.#GZ();return}this.#QZ()}#xZ(){let Z=this.#J,$=this.#C();if(!Z||!$||typeof Z.parsePosition!=="function"||typeof Z.parseOffset!=="function"||typeof Z.computeCoords!=="function")return!1;let J=Z.getBoundingClientRect(),X=$.getBoundingClientRect();if(!J.width||!J.height)return!1;let{vertical:Y,horizontal:Q,shorthand:j}=Z.parsePosition(),W=Z.parseOffset(),{left:K,top:U}=Z.computeCoords(X,J,Y,Q,W,j),H=this.#h();if(typeof Z.clampToViewport==="function")({left:K,top:U}=Z.clampToViewport({left:K,top:U},J,H));return Z.style.setProperty("right","auto","important"),Z.style.setProperty("bottom","auto","important"),Z.style.setProperty("left",`${Math.round(K)}px`,"important"),Z.style.setProperty("top",`${Math.round(U)}px`,"important"),!0}#GZ(){let Z=this.#J;if(!Z||typeof Z.clampToViewport!=="function")return;let $=Z.getBoundingClientRect();if(!$.width||!$.height)return;let J=this.#h(),{left:X,top:Y}=Z.clampToViewport({left:$.left,top:$.top},$,J);Z.style.setProperty("right","auto","important"),Z.style.setProperty("bottom","auto","important"),Z.style.setProperty("left",`${Math.round(X)}px`,"important"),Z.style.setProperty("top",`${Math.round(Y)}px`,"important")}#QZ(){if(this.#EZ()){this.#GZ();return}let Z=this.#J,$=this.#q;if(!Z||!$){this.#X?.();return}let J=this.#XZ(),X=J.find((O)=>this.#S(O)===this.value)||J[0];if(!X){this.#X?.();return}let Y=this.#UZ()?this.#C():null;if(Y)this.#o();this.#X?.();let Q=Z.getBoundingClientRect(),j=X.getBoundingClientRect();if(!Q.width||!Q.height||!j.height)return;let W,K,U;if(Y){let O=Y.getBoundingClientRect();U=O,W=O.left+(O.width-Q.width)/2,K=O.top+(O.height-j.height)/2-(j.top-Q.top)}else{let O=this.#$Z(),f=this.#n(X);if(!O?.width||!f)return;U=O;let G=f.left-Q.left,N=f.top-Q.top;W=T(this,"full")?this.getBoundingClientRect().left:O.left-G,K=O.top-N}let H=this.#h();if(typeof Z.clampToViewport==="function")({left:W,top:K}=Z.clampToViewport({left:W,top:K},Q,H));else{let{left:O,top:f}=H,G=window.innerWidth-Q.width-H.right,N=window.innerHeight-Q.height-H.bottom;W=Math.min(Math.max(W,O),Math.max(O,G)),K=Math.min(Math.max(K,f),Math.max(f,N))}Z.style.setProperty("right","auto","important"),Z.style.setProperty("bottom","auto","important"),Z.style.setProperty("left",`${Math.round(W)}px`,"important"),Z.style.setProperty("top",`${Math.round(K)}px`,"important");let z=this.#I(),q=X.getBoundingClientRect(),V=Y?null:this.#n(X);if(z&&z.scrollHeight>z.clientHeight+1){let O=Y?q.top+q.height/2-(U.top+U.height/2):V?V.top-U.top:0;if(Math.abs(O)>0.5)z.scrollTop+=O;z.syncOverflow?.()}if(this.#j||this.open)this.#FZ()}#wZ(){this.#Z?.addEventListener("click",this.#w),this.#Z?.addEventListener("keydown",this.#N),this.#Z?.addEventListener("focus",this.#f),this.#Z?.addEventListener("blur",this.#k),this.addEventListener("click",this.#P),this.addEventListener("pointerover",this.#F),this.#J?.addEventListener("keydown",this.#N),this.#J?.addEventListener("close",this.#R),this.#W?.addEventListener("slotchange",this.#A)}#bZ(){this.#Z?.removeEventListener("click",this.#w),this.#Z?.removeEventListener("keydown",this.#N),this.#Z?.removeEventListener("focus",this.#f),this.#Z?.removeEventListener("blur",this.#k),this.removeAttribute("data-focus-visible"),this.removeEventListener("click",this.#P),this.removeEventListener("pointerover",this.#F),this.#J?.removeEventListener("keydown",this.#N),this.#J?.removeEventListener("close",this.#R),this.#W?.removeEventListener("slotchange",this.#A)}#qZ(){this.#y(),this.#l()}#d(){if(this.#H)return;this.#H=new MutationObserver((Z)=>{if(this.#Y||this.#O)return;let $=!1;for(let J of Z){if(J.type==="childList"){if([...J.addedNodes].some((X)=>this.#b(X))||[...J.removedNodes].some((X)=>this.#b(X))||J.target?.closest?.("fig-select-option"))$=!0}if(J.type==="attributes"&&J.target?.tagName==="FIG-SELECT-OPTION"){if(J.attributeName==="value"||J.attributeName==="disabled"||J.attributeName==="label")$=!0;else if(J.attributeName==="selected"){if(T(J.target,"selected")){let X=this.#S(J.target);if((this.getAttribute("value")??"")!==X)this.setAttribute("value",X),$=!0}else if(this.#S(J.target)===(this.getAttribute("value")??""))$=!0}}if(J.type==="characterData"&&J.target?.parentElement?.tagName==="FIG-SELECT-OPTION")$=!0}if($)this.#l()}),this.#H.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#XZ({enabledOnly:Z=!1}={}){let $=this.#I(),J=$?Array.from($.querySelectorAll(":scope > fig-select-option")):[];if(!Z)return J;return J.filter((X)=>!T(X,"disabled"))}#S(Z){if(!Z)return"";if(typeof Z.value==="string")return Z.value;let $=Z.getAttribute?.("value");if($!=null)return $;return(Z.textContent||"").trim()}#RZ(Z){if(!Z)return"";let $=Z.getAttribute?.("label");if($!=null&&$!=="")return $.trim();let J=[];for(let X of Z.childNodes){if(X.nodeType===Node.TEXT_NODE){let j=X.textContent?.trim();if(j)J.push(j);continue}if(!(X instanceof Element))continue;let Y=X.getAttribute("slot");if(Y==="prepend"||Y==="append")continue;let Q=X.textContent?.trim();if(Q)J.push(Q)}if(J.length)return J.join(" ").trim();return(Z.textContent||"").trim()}#M(Z){if(!this.#K||!this.#U||!this.#$||!this.#V)return;let $=this.querySelector(':scope > [slot="trigger"]'),J=this.querySelector(':scope > [slot="prepend-trigger"][data-fig-select-generated]'),X=this.querySelector(':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])'),Y=Z?.querySelector?.(':scope > [slot="prepend"]:not([data-fig-select-checkmark])');if(this.#V.hidden=!$,this.#q.hidden=Boolean($),this.#K.hidden=Boolean($),$){J?.remove(),this.#K.classList.remove("has-content"),this.#U.hidden=!0,this.#$.replaceChildren();return}if(!X&&Y?.childNodes.length){let j=J||document.createElement("span");if(j.setAttribute("slot","prepend-trigger"),j.setAttribute("data-fig-select-generated",""),j.replaceChildren(...Array.from(Y.childNodes,(W)=>W.cloneNode(!0))),j.parentElement!==this)this.append(j);X=j}else if(X)J?.remove();else J?.remove();let Q=Boolean(X);if(this.#K.classList.toggle("has-content",Q),this.#U.hidden=!X,this.#$.hidden=Boolean(X),X){this.#$.replaceChildren();return}this.#$.replaceChildren()}#HZ(){if(!this.#J)return;this.#J.setAttribute("position",this.getAttribute("position")||"bottom left");let Z=this.getAttribute("offset");if(Z)this.#J.setAttribute("offset",Z);else this.#J.removeAttribute("offset");let $=this.getAttribute("closedby");if($)this.#J.setAttribute("closedby",$);else this.#J.removeAttribute("closedby")}#jZ(){let Z=T(this,"disabled");if(this.#Z)if(Z)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled");if(Z&&this.open)this.open=!1}#uZ(Z){if(!Z.length)return null;let $=Z.find((J)=>T(J,"selected"));if($&&!T($,"disabled"))return $;return Z.find((J)=>!T(J,"disabled"))||Z[0]||null}#fZ(Z){this.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0,composed:!0}))}#l(){if(this.#Y)return;this.#Y=!0;try{let Z=this.#XZ(),$=this.hasAttribute("value"),J=$?this.getAttribute("value"):null,X=$?Z.find((W)=>this.#S(W)===J):null,Y=!1;if(!X){if($){if(!Z.length){if(this.#q)this.#q.textContent=J||this.getAttribute("label")||"";return}if(X=this.#uZ(Z),X){let W=this.#S(X);if(J!==W)this.setAttribute("value",W),Y=!0}else this.removeAttribute("value"),Y=!0}else if(X=Z.find((W)=>T(W,"selected")),X)this.setAttribute("value",this.#S(X)),Y=!0}for(let W of Z){t(W);let K=W===X;if(W.setAttribute("aria-selected",K?"true":"false"),K)W.setAttribute("selected","");else W.removeAttribute("selected")}let Q=X&&this.#RZ(X)||this.getAttribute("label")||"";if(this.#q)this.#q.textContent=Q;this.#M(X);let j=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#Z?.setAttribute("aria-label",j),this.#I()?.syncOverflow?.(),Y)this.#fZ(this.getAttribute("value")??"")}finally{this.#Y=!1}}#WZ(Z){if(T(this,"disabled"))return;Z.preventDefault(),Z.stopPropagation();let $=!this.open;if($)this.#s();this.open=$}#hZ(Z){let J=(typeof Z.composedPath==="function"?Z.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!J||!this.contains(J))return;if(T(J,"disabled"))return;this.#mZ(J)}#BZ(Z){let J=(typeof Z.composedPath==="function"?Z.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!J||!this.contains(J))return;if(T(J,"disabled"))return;if(Z.relatedTarget instanceof Node&&J.contains(Z.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#S(J),bubbles:!0,composed:!0}))}#vZ(Z){if(Z.currentTarget===document&&Z.key!=="Escape")return;if(!(this.open&&(this.#J?.matches?.(":open")??!1))){if(this.#Z?.contains(Z.target)&&(Z.key==="ArrowDown"||Z.key==="Enter"||Z.key===" "))Z.preventDefault(),this.#s(),this.open=!0,requestAnimationFrame(()=>{let Y=this.#XZ({enabledOnly:!0}).findIndex((Q)=>this.#S(Q)===this.value);this.#g(Y>=0?Y:0)});return}let J=this.#XZ({enabledOnly:!0});if(!J.length)return;switch(Z.key){case"ArrowDown":Z.preventDefault(),this.#E(),this.#g(this.#B+1,!0);break;case"ArrowUp":Z.preventDefault(),this.#E(),this.#g(this.#B-1,!0);break;case"Home":Z.preventDefault(),this.#g(0,!0);break;case"End":Z.preventDefault(),this.#g(J.length-1,!0);break;case"Escape":Z.preventDefault(),this.open=!1,this.#Z?.focus();break;case"Enter":case" ":{this.#E();let X=J[this.#B];if(!X)return;Z.preventDefault(),this.#mZ(X);break}}}#gZ(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Z?.setAttribute("aria-expanded","false"),this.#Z?.focus(),this.#B=-1}#mZ(Z){let $=this.#S(Z);this.setAttribute("value",$),this.#l(),this.#fZ($),this.open=!1}#v(){return this.#XZ({enabledOnly:!0})}#E(){let Z=this.#v();if(!Z.length){this.#B=-1;return}let $=Z.find((X)=>X===document.activeElement),J=$?Z.indexOf($):-1;this.#B=J>=0?J:this.#B}#g(Z,$=!1){let J=this.#v();if(!J.length)return;let X=(Z%J.length+J.length)%J.length,Y=J[X],Q=document.activeElement!==Y;if(this.#B=X,Y?.focus(),$&&Q)this.dispatchEvent(new CustomEvent("optionfocus",{detail:this.#S(Y),bubbles:!0,composed:!0}))}#o(){if(!this.#J||!this.#Z)return;let Z=Math.ceil(this.getBoundingClientRect().width),$=Math.ceil(this.#Z.getBoundingClientRect().width),J=Math.max(Z,$,96),X=this.#c()?this.#C():null,Y=window.visualViewport?.width??window.innerWidth,Q=window.visualViewport?.height??window.innerHeight,j=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,W=Math.max(0,Math.min(Math.floor(20*j),Math.floor(Y-16))),K=Math.max(0,Math.floor(Q-16));if(this.#J.style.setProperty("box-sizing","border-box","important"),this.#J.style.setProperty("padding","0","important"),this.#J.style.setProperty("border","0","important"),this.#J.style.setProperty("margin","0","important"),X){let H=X.getBoundingClientRect().width;this.#J.style.setProperty("width","max-content","important"),this.#J.style.setProperty("min-width","0","important"),this.#J.style.setProperty("max-width",`${W}px`,"important");let z=this.#J.getBoundingClientRect().width,q=Math.min(W,Math.max(J,z)),V=Math.max(H,q);this.#J.style.setProperty("width",`${V}px`,"important"),this.#J.style.setProperty("min-width",`${V}px`,"important"),this.#J.style.setProperty("max-width",`${V}px`,"important")}else this.#J.style.setProperty("width","max-content","important"),this.#J.style.setProperty("min-width",`${J}px`,"important"),this.#J.style.setProperty("max-width",`${W}px`,"important");this.#J.style.setProperty("max-height",`${K}px`,"important"),this.#J.style.setProperty("height","max-content","important"),this.#J.style.setProperty("overflow","hidden","important");let U=this.#J.getBoundingClientRect();if(U.height>K)this.#J.style.setProperty("height",`${K}px`,"important");if(!X&&U.width>W)this.#J.style.setProperty("width",`${W}px`,"important")}#kZ(){if(!this.#J||T(this,"disabled"))return;this.#s(),this.#x(),this.#j=!1,this.#G=null,this.#T=null,this.#l(),this.#o(),this.#J.open=!0,document.addEventListener("keydown",this.#N,!0),this.#Z?.setAttribute("aria-expanded","true"),this.#B=-1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#o(),this.#D(),this.#o(),this.#GZ();let Z=this.#I(),J=this.#v().findIndex((X)=>this.#S(X)===this.value);if(J>=0)this.#g(J);else if(this.#Z?.hasAttribute("data-focus-visible")||this.#Z?.matches?.(":focus-visible"))this.#g(0);if(Z?.syncOverflow?.(),!this.#zZ())this.#j=!0,this.#FZ()})})}#CZ(){if(!this.#J)return;this.#j=!1,this.#G=null,this.#T=null,document.removeEventListener("keydown",this.#N,!0),this.#J.open=!1,this.#Z?.setAttribute("aria-expanded","false")}}P("fig-select",$Z);var MZ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],GZ=["shorter","longer","increasing","decreasing"],I=new Set(["oklch","hsl"]);function C(Z){let $={...Z??{}},J=String($.interpolationSpace??"srgb").toLowerCase();if(!MZ.includes(J))J="srgb";$.interpolationSpace=J;let X=String($.hueInterpolation??"shorter").toLowerCase();return $.hueInterpolation=GZ.includes(X)?X:"shorter",$}function b(Z){let $=C(Z);return $.interpolationSpace="srgb",delete $.hueInterpolation,$}function w(Z){let $=b(Z),J={...$,interpolationSpace:$.interpolationSpace};if(I.has($.interpolationSpace))J.hueInterpolation=$.hueInterpolation;else delete J.hueInterpolation;return J}function fZ(Z){let $=C(Z);if($.interpolationSpace==="srgb")return"";if(I.has($.interpolationSpace))return`in ${$.interpolationSpace} ${$.hueInterpolation} hue`;return`in ${$.interpolationSpace}`}function i(Z){let $=C(Z);if(I.has($.interpolationSpace))return`${$.interpolationSpace}-${$.hueInterpolation||"shorter"}`;return $.interpolationSpace}function S(Z){let $=String(Z??"");for(let J of I){let X=`${J}-`;if($.startsWith(X))return{interpolationSpace:J,hueInterpolation:$.slice(X.length)||"shorter"}}return{interpolationSpace:$||"srgb",hueInterpolation:"shorter"}}var kZ=0;class D extends HTMLElement{static#Z=[{value:"srgb",space:"srgb",title:"Classic",subtitle:"sRGB Linear"},{value:"oklab",space:"oklab",title:"Smooth",subtitle:"OKLab"},{value:"oklch-increasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Increasing"},{value:"hsl-increasing",space:"hsl",title:"Vivid",subtitle:"HSL Increasing"},{value:"oklch-decreasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Decreasing",advanced:!0},{value:"hsl-decreasing",space:"hsl",title:"Vivid",subtitle:"HSL Decreasing",advanced:!0}];static#J(Z){let $=D.#Z,J=$.find((W)=>W.value===Z);if(J)return J;let X=S(Z),Y=$.find((W)=>W.space===X.interpolationSpace),Q=Y?.subtitle.split(" ")[0]??X.interpolationSpace.toUpperCase(),j=X.hueInterpolation;return{value:Z,space:X.interpolationSpace,title:Y?.title??"Custom",subtitle:I.has(X.interpolationSpace)?`${Q} ${j.charAt(0).toUpperCase()}${j.slice(1)}`:Q}}#K=null;#U=null;#$=null;#V=`fig-fill-picker-dialog-${++kZ}`;#q="solid";anchorElement=null;#W="solid";#H="srgb";#Q={h:0,s:0,v:85,a:1};#B="hex";#Y={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#z={url:null,scaleMode:"fill",scale:50};#X={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#j={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#G=null;#T=!1;#O=null;#_={};#w={};#f=null;#k=null;#P=null;#F=null;#N=!1;#R=!1;#A=null;#p=null;#b=null;#y=null;#I=null;#u=0;#t=null;#r=null;#e=new Set;#x=new Set;#n=null;#h=null;constructor(){super();this.#t=this.#XZ.bind(this),this.#r=this.#S.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","webcam-mode","default-video","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#D(()=>{this.#bZ(),this.#RZ(),this.#M(),this.#nZ()})}disconnectedCallback(){if(this.#fZ({stopWebcam:!0}),this.#xZ(),this.#GZ(),this.#QZ(this.#U))this.#U.removeAttribute("selected");if(this.#K)this.#K.removeEventListener("click",this.#t),this.#K.removeEventListener("keydown",this.#r);this.#K=null,this.#U=null}#C(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#ZZ(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#c(){return this.#W==="webcam"&&this.#ZZ()==="live"&&this.#j.live!==!1}#UZ(){return{live:this.#ZZ()==="live"&&this.#j.live!==!1,snapshot:this.#j.snapshot??null,deviceId:this.#j.deviceId??null,scaleMode:this.#j.scaleMode||"fill",scale:this.#j.scale??50,opacity:this.#j.opacity??1}}#s(){let Z=this.#X.url??null;return{url:Z,poster:this.#X.poster??null,scaleMode:this.#X.scaleMode||"fill",scale:this.#X.scale??50,opacity:this.#X.opacity??1,...Z?{}:{missing:!0}}}#$Z(Z){if(Z.webcam&&typeof Z.webcam==="object"){let{stream:$,snapshot:J,...X}=Z.webcam;if(Object.assign(this.#j,X),typeof J==="string"&&J)this.#j.snapshot=J;return}if(Z.type==="webcam"&&Z.image){if(Z.image.url!=null)this.#j.snapshot=Z.image.url;if(Z.image.scaleMode)this.#j.scaleMode=Z.image.scaleMode;if(Z.image.scale!=null)this.#j.scale=Z.image.scale}}#a(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#j.stream,deviceId:this.#j.deviceId??null}}))}get webcamStream(){return this.#j.stream}releaseWebcam(){this.#WZ()}#JZ(Z){if(!Z)return null;if(this.#j.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#j.snapshot),this.#x.delete(this.#j.snapshot);return this.#j.snapshot=URL.createObjectURL(Z),this.#x.add(this.#j.snapshot),this.#j.snapshot}#yZ(Z,$,J){if(typeof Z.getImageData!=="function")return!1;let X;try{X=Z.getImageData(0,0,$,J).data}catch{return!1}let Y=Math.max(1,Math.floor($*J/256)),Q=0,j=0,W=0;for(let K=0;K<X.length;K+=Y*4){let U=Math.max(X[K],X[K+1],X[K+2]);if(Q=Math.max(Q,U),W+=1,U>24)j+=1}if(!W)return!0;return Q<=40||j/W<0.04}async#SZ(Z){let $=[],J=this.#j.stream?.getVideoTracks?.()?.[0];if(J&&typeof ImageCapture==="function")try{if(this.#O?.track!==J)this.#O=new ImageCapture(J);$.push(await this.#O.grabFrame())}catch{this.#O=null}if(typeof createImageBitmap==="function")try{$.push(await createImageBitmap(Z))}catch{}return $.push(Z),$.filter(Boolean)}async#EZ(Z,$,J,X){let Y=await this.#SZ($);for(let Q of Y){try{Z.drawImage(Q,0,0,J,X)}catch{continue}finally{Q.close?.()}if(!this.#yZ(Z,J,X))return!0}return!1}#FZ(Z){return new Promise(($)=>{if(typeof Z.requestVideoFrameCallback==="function"){let J=setTimeout(()=>$(!1),400);Z.requestVideoFrameCallback(()=>{clearTimeout(J),$(!0)});return}setTimeout(()=>$(!1),200)})}async#zZ(Z){if(!Z?.videoWidth||!Z.videoHeight)return null;let $=document.createElement("canvas");$.width=Z.videoWidth,$.height=Z.videoHeight;let J=$.getContext("2d",{willReadFrequently:!0});if(!J)return null;if(!await this.#EZ(J,Z,$.width,$.height))return null;let Y=await new Promise((Q)=>$.toBlob(Q,"image/png"));return this.#JZ(Y)}#IZ(Z){if(this.#W!=="webcam")return;let $=this.#j.stream;if(!$)return;if(this.#G===$&&this.#j.snapshot){this.#M();return}if(this.#T)return;this.#T=!0;let J=(Y)=>{if(this.#T=!1,!Y||this.#W!=="webcam"||this.#j.stream!==$)return;this.#G=$,this.#M()},X=async()=>{let Y=await this.#zZ(Z);if(Y){J(Y);return}if(this.#W!=="webcam"||this.#j.stream!==$){this.#T=!1;return}return await this.#FZ(Z),X()};X()}#D(Z){let $=requestAnimationFrame(()=>{if(this.#e.delete($),this.isConnected)Z()});return this.#e.add($),$}#xZ(){this.#e.forEach((Z)=>cancelAnimationFrame(Z)),this.#e.clear()}#GZ(){let Z=new Set([this.#j.snapshot,this.#X.poster,this.#z.url].filter(($)=>typeof $==="string"&&$.startsWith("blob:")));this.#x.forEach(($)=>{if(!Z.has($))URL.revokeObjectURL($)}),this.#x.clear(),Z.forEach(($)=>this.#x.add($))}#QZ(Z){return Z?.matches("fig-swatch, fig-chit")??!1}#wZ(Z){return this.#QZ(Z)||(Z?.matches("[data-fig-fill-picker-swatch]")??!1)}#bZ(){let Z=Array.from(this.children).find(($)=>!$.getAttribute("slot")?.startsWith("mode-"));if(!Z)this.#U=document.createElement("fig-swatch"),this.#U.setAttribute("background","#D9D9D9"),this.appendChild(this.#U),this.#K=this.#U;else if(this.#wZ(Z))this.#U=Z,this.#K=Z;else this.#K=Z,this.#U=null;if(this.#d(),this.#K.removeEventListener("click",this.#t),this.#K.addEventListener("click",this.#t),this.#K.removeEventListener("keydown",this.#r),this.#K.addEventListener("keydown",this.#r),this.#QZ(this.#U))this.#D(()=>{let $=this.#U.querySelector('input[type="color"]');if($)$.remove();this.#d()})}#qZ(){return this.getAttribute("aria-label")||"Fill picker"}#d(){if(!this.#K)return;let Z=this.#C(),$=this.getAttribute("aria-labelledby");if(!this.#K.hasAttribute("role"))this.#K.setAttribute("role","button");if(this.#K.setAttribute("tabindex",Z?"-1":"0"),this.#K.setAttribute("aria-disabled",Z?"true":"false"),this.#K.setAttribute("aria-haspopup","dialog"),this.#K.setAttribute("aria-expanded",this.#$?.open?"true":"false"),this.#K.setAttribute("aria-controls",this.#V),this.#K.removeAttribute("aria-hidden"),$)this.#K.setAttribute("aria-labelledby",$),this.#K.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#K.setAttribute("aria-label",`Open ${this.#qZ()}`),this.#K.removeAttribute("aria-labelledby");else if(this.#K.removeAttribute("aria-labelledby"),!this.#K.hasAttribute("aria-label"))this.#K.setAttribute("aria-label",`Open ${this.#qZ()}`);let J=this.getAttribute("aria-describedby");if(J)this.#K.setAttribute("aria-describedby",J);else this.#K.removeAttribute("aria-describedby")}#XZ(Z){if(this.#C())return;Z.stopPropagation(),Z.preventDefault(),this.#jZ()}#S(Z){if(Z.key!=="Enter"&&Z.key!==" ")return;if(this.#C())return;Z.preventDefault(),Z.stopPropagation(),this.#jZ()}#RZ(){let Z=this.getAttribute("value");if(!Z)return;let $=["solid","gradient","image","video","webcam"];try{let J=JSON.parse(Z);if(J.type)this.#W=J.type;if(J.color){if(typeof J.color==="string")this.#Q=this.#MZ(J.color);else if(typeof J.color==="object"&&J.color.h!==void 0)this.#Q=J.color}let X=J.alpha!==void 0?Number(J.alpha):J.opacity!==void 0?Number(J.opacity)/100:void 0;if(Number.isFinite(X))this.#Q.a=Math.max(0,Math.min(1,X));if(this.#H="srgb",J.gradient)this.#Y=b({...this.#Y,...J.gradient});if(J.image)this.#z={...this.#z,...J.image};if(J.video){let Y=this.#X.url;if(this.#X={...this.#X,...J.video},this.#X.missing=!this.#X.url,J.video.poster!=null&&J.video.poster!=="")this.#h=this.#X.url;else if(this.#X.url!==Y)this.#OZ();else this.#PZ()}if(this.#$Z(J),J.type&&!$.includes(J.type)){let{type:Y,...Q}=J;this.#w[J.type]=Q}}catch(J){if(Z.startsWith("#")){this.#W="solid",this.#Q=this.#MZ(Z);return}if(QZ(Z)){let X=this.#X.url;if(this.#W="video",this.#X.url=Z.trim(),this.#X.missing=!1,this.#X.url!==X)this.#OZ();else this.#PZ()}}}#M(){if(!this.#U)return;let Z,$="cover",J="center";switch(this.#W){case"solid":Z=this.#YZ(this.#Q);break;case"gradient":Z=this.#rZ();break;case"image":if(this.#z.url){Z=h(this.#z.url);let X=this.#HZ(this.#z.scaleMode,this.#z.scale);$=X.size,J=X.position}else Z="";break;case"video":if(this.#X.poster){Z=h(this.#X.poster);let X=this.#HZ(this.#X.scaleMode,this.#X.scale);$=X.size,J=X.position}else Z="";break;case"webcam":if(this.#j.snapshot){Z=h(this.#j.snapshot);let X=this.#HZ(this.#j.scaleMode,this.#j.scale);$=X.size,J=X.position}else Z="";break;default:{Z=(this.#_[this.#W]?.element||this.querySelector(`[slot="mode-${this.#W}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#U.setAttribute("background",Z),this.#U.style.setProperty("--swatch-bg-size",$),this.#U.style.setProperty("--swatch-bg-position",J),this.#W==="solid")this.#U.setAttribute("alpha",this.#Q.a);else this.#U.removeAttribute("alpha")}#HZ(Z,$){switch(Z){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:`${$}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#jZ(){if(this.#C())return;if(!this.#$)this.#hZ();else this.#$.anchor=this.anchorElement||this.#K;if(this.#BZ(this.#W,{emit:!1}),this.#b=JSON.stringify(this.value),this.#y=this.#b,this.#QZ(this.#U))this.#U.setAttribute("selected","true");this.#$.open=!0,this.#d(),this.#D(()=>{this.#$?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#D(()=>{this.#v(),this.#E()})})}open(){this.#jZ()}close(){if(this.#$)this.#$.open=!1,this.#d()}#uZ(){if(!this.#$)return;for(let[Z,{element:$}]of Object.entries(this.#_)){let J=Array.from(this.#$.querySelectorAll(".fig-fill-picker-tab")).find((X)=>X.dataset.tab===Z);if(!J)continue;while(J.firstChild)$.appendChild(J.firstChild)}}#fZ({stopWebcam:Z=!1}={}){if(this.#A)this.#A(),this.#A=null;if(this.#p?.disconnect(),this.#p=null,!Z&&this.#c())this.#l();else this.#WZ();if(!this.#$)return;this.#uZ(),this.#$.remove(),this.#$=null,this.#I=null,this.#b=null,this.#y=null,this.#f=null,this.#k=null,this.#P=null,this.#F=null,this.#R=!1,this.#d()}#l(){this.#u+=1;let Z=this.#$?.querySelector(".fig-fill-picker-webcam-video");if(Z)Z.srcObject=null}#WZ({emit:Z=!0}={}){this.#u+=1;let $=Boolean(this.#j.stream);if(this.#j.stream)this.#j.stream.getTracks().forEach((X)=>X.stop()),this.#j.stream=null;this.#G=null,this.#T=!1,this.#O=null;let J=this.#$?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null;if($&&Z)this.#a()}#hZ(){this.#_={},this.querySelectorAll('[slot^="mode-"]').forEach((q)=>{let V=q.getAttribute("slot").slice(5);this.#_[V]={element:q,label:q.getAttribute("label")||V.charAt(0).toUpperCase()+V.slice(1)}}),this.#$=document.createElement("dialog",{is:"fig-popup"}),this.#$.setAttribute("is","fig-popup"),this.#$.id=this.#V,this.#$.setAttribute("aria-label",this.#qZ()),this.#$.setAttribute("drag","true"),this.#$.setAttribute("handle","fig-header"),this.#$.setAttribute("autoresize","false"),this.#$.classList.add("fig-fill-picker-dialog"),this.#$.anchor=this.anchorElement||this.#K;let Z=this.getAttribute("dialog-position")||"left";this.#$.setAttribute("position",Z),this.#$.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let $=["solid","gradient","image","video","webcam"],J={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},X=this.getAttribute("mode"),Y;if(X){if(Y=X.split(",").map((V)=>V.trim().toLowerCase()).filter((V)=>$.includes(V)||this.#_[V]),Y.length===0)Y=[...$]}else Y=[...$];let Q={...J};for(let[q,{label:V}]of Object.entries(this.#_))Q[q]=V;if(!Y.includes(this.#W))this.#W=Y[0],this.#q=Y[0];let j;if(Y.length===1)j=B("h3",{className:"fig-fill-picker-type-label"},Q[Y[0]]);else{let q=B("fig-select-options",{},Y.map((V)=>B("fig-select-option",{value:V},Q[V])));j=B("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#W},q)}let W=Y.map((q)=>B("div",{className:"fig-fill-picker-tab","data-tab":q})),K=B("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},E("close"));this.#$.replaceChildren(B("fig-header",{},[j,K]),B("fig-content",{},W)),document.body.appendChild(this.#$);for(let[q,{element:V}]of Object.entries(this.#_)){let O=Array.from(this.#$.querySelectorAll(".fig-fill-picker-tab")).find((f)=>f.dataset.tab===q);if(!O)continue;while(V.firstChild)O.appendChild(V.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:q,container:O}}))}let U=this.#$.querySelector(".fig-fill-picker-type");if(U)U.addEventListener("change",(q)=>{let V=typeof q.detail==="string"?q.detail:q.target?.value;if(V)this.#BZ(V)});this.#$.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#$.open=!1});let H=()=>{if(this.#QZ(this.#U))this.#U.removeAttribute("selected");if(this.#c())this.#l();else this.#WZ();let q=JSON.stringify(this.value);if(this.#y!==null&&this.#y!==q)this.#m();this.#b=null,this.#y=null,this.#d();let V=this.#K;this.#D(()=>{if(V?.isConnected)HTMLElement.prototype.focus.call(V)}),this.dispatchEvent(new CustomEvent("close"))};this.#$.addEventListener("close",H);let z={solid:()=>this.#gZ(),gradient:()=>this.#J0(),image:()=>this.#z0(),video:()=>this.#H0(),webcam:()=>this.#O0()};for(let[q,V]of Object.entries(z))if(!this.#_[q]&&Y.includes(q))V();for(let q of Object.keys(this.#_)){if($.includes(q))continue;let V=Array.from(this.#$.querySelectorAll(".fig-fill-picker-tab")).find((O)=>O.dataset.tab===q);if(!V)continue;V.addEventListener("input",(O)=>{if(O.target===this)return;if(O.stopPropagation(),O.detail)this.#w[q]=O.detail;this.#L()}),V.addEventListener("change",(O)=>{if(O.target===this)return;if(O.stopPropagation(),O.detail)this.#w[q]=O.detail;this.#m()})}}#BZ(Z,{emit:$=!0}={}){let J=Array.from(this.#$?.querySelectorAll(".fig-fill-picker-tab")??[]).find((W)=>W.dataset.tab===Z);if(!J)return;let X=this.#q;if(this.#q=Z,this.#W=Z,X==="webcam"&&Z!=="webcam")this.#WZ();let Y=this.#$.querySelector(".fig-fill-picker-type");if(Y&&Y.value!==Z)Y.value=Z;this.#$.querySelectorAll(".fig-fill-picker-tab").forEach((W)=>{if(W.dataset.tab===Z)W.style.display="block";else W.style.display="none"});let j=this.#$.querySelector("fig-content");if(j)j.style.padding=this.#_[Z]?"0":"";if(Z==="gradient")this.#D(()=>{this.#i();let W=J.querySelector(".fig-fill-picker-gradient-bar-input");W?.refreshLayout?.(),this.#D(()=>{W?.refreshLayout?.()})});if(Z==="video")this.#DZ({emit:!1});if(Z==="webcam")this.#j.live=this.#ZZ()==="live",this.#I?.(this.#j.deviceId);if(this.#M(),$)this.#L()}#vZ(){if(!this.#$?.open)return;if(this.#BZ(this.#W,{emit:!1}),this.#v(),this.#E(),this.#LZ(),this.#P)this.#P.setAttribute("value",this.#Q.h);if(this.#F)this.#F.setAttribute("value",this.#Q.a*100),this.#F.setAttribute("color",this.#YZ(this.#Q));this.#i();let Z=this.#$.querySelector('[data-tab="image"]'),$=Z?.querySelector(".fig-fill-picker-scale-mode"),J=Z?.querySelector(".fig-fill-picker-scale"),X=Z?.querySelector(".fig-fill-picker-image-preview");if($)$.value=this.#z.scaleMode;if(J)J.setAttribute("value",this.#z.scale),J.style.display=this.#z.scaleMode==="tile"?"block":"none";if(X)this.#KZ(X);let Y=this.#$.querySelector('[data-tab="video"]'),Q=Y?.querySelector(".fig-fill-picker-scale-mode"),j=Y?.querySelector(".fig-fill-picker-video-preview");if(Q)Q.value=this.#X.scaleMode;if(j)this.#VZ(j)}#gZ(){let Z=this.#$.querySelector('[data-tab="solid"]'),$=this.getAttribute("alpha")!=="false",J=B("canvas",{width:"200",height:"200"}),X=B("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#YZ({...this.#Q,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),Y=B("fig-preview",{className:"fig-fill-picker-color-area"},[J,X]),Q=B("fig-tooltip",{text:"Sample color"},B("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},E("eyedropper"))),j=B("div",{className:`fig-fill-picker-sliders${$?"":" is-hue-only"}`},[Q,B("fig-slider",{type:"hue",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#Q.h}),$?B("fig-slider",{type:"opacity",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#Q.a*100,color:this.#YZ(this.#Q)}):null]),W=B("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([z,q])=>B("fig-select-option",{value:z},q))),K=B("fig-field",{className:"fig-fill-picker-inputs"},[B("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#B},W),B("span",{className:"fig-fill-picker-input-fields"})]);if(Z.replaceChildren(Y,j,K),this.#f=Z.querySelector("canvas"),this.#k=Z.querySelector("fig-handle"),this.#g(),this.#v(),this.#E(),this.#kZ(),this.#P=Z.querySelector('fig-slider[type="hue"]'),this.#P.addEventListener("input",(z)=>{this.#Q.h=parseFloat(z.target.value),this.#v(),this.#E(),this.#LZ(),this.#L()}),this.#P.addEventListener("change",()=>{this.#m()}),$)this.#F=Z.querySelector('fig-slider[type="opacity"]'),this.#F.addEventListener("input",(z)=>{this.#Q.a=parseFloat(z.target.value)/100,this.#LZ(),this.#L()}),this.#F.addEventListener("change",()=>{this.#m()});Z.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(z)=>{let q=typeof z.detail==="string"?z.detail:z.target?.value;if(!q)return;this.#B=q,this.#CZ()}),this.#CZ();let H=Z.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)H.addEventListener("click",async()=>{try{let q=await new EyeDropper().open();this.#Q={...this.#MZ(q.sRGBHex),a:this.#Q.a},this.#v(),this.#E(),this.#LZ(),this.#L()}catch(z){}});else H.setAttribute("disabled",""),H.title="EyeDropper not supported in this browser"}#mZ(){let Z=this.#$?.querySelector('[data-tab="solid"]');if(Z){let $=Z.querySelector("canvas");if($){let J=document.createElement("canvas");J.width=$.width,J.height=$.height,$.replaceWith(J),this.#f=J,this.#kZ()}this.#v(),this.#E()}this.#NZ(),this.#L()}#v(){if(!this.#f&&this.#$)this.#f=this.#$.querySelector('[data-tab="solid"] canvas');if(!this.#f)return;let Z=this.#H==="display-p3"?"display-p3":"srgb",$=this.#f.getContext("2d",{colorSpace:Z});if(!$)return;let J=this.#f.width,X=this.#f.height;$.clearRect(0,0,J,X);let Y=this.#Q.h,Q=this.#H==="display-p3",j=$.createLinearGradient(0,0,J,0);if(Q){j.addColorStop(0,"color(display-p3 1 1 1)");let[K,U,H]=hslToP3(Y,100,50);j.addColorStop(1,`color(display-p3 ${K} ${U} ${H})`)}else j.addColorStop(0,"#FFFFFF"),j.addColorStop(1,`hsl(${Y}, 100%, 50%)`);$.fillStyle=j,$.fillRect(0,0,J,X);let W=$.createLinearGradient(0,0,0,X);W.addColorStop(0,"rgba(0,0,0,0)"),W.addColorStop(1,"rgba(0,0,0,1)"),$.fillStyle=W,$.fillRect(0,0,J,X)}#E(Z=0){if(!this.#k||!this.#f)return;this.#g();let $=this.#f.getBoundingClientRect();if(($.width===0||$.height===0)&&Z<5){this.#D(()=>this.#E(Z+1));return}let J=Math.max(0,Math.min(100,this.#Q.s)),X=Math.max(0,Math.min(100,100-this.#Q.v));this.#k.setAttribute("value",`${J}% ${X}%`),this.#k.setAttribute("color",this.#YZ({...this.#Q,a:1}))}#g(){if(!this.#k)return;this.#k.setAttribute("aria-valuenow",String(Math.round(this.#Q.v))),this.#k.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#Q.s)}%, brightness ${Math.round(this.#Q.v)}%`),this.#k.removeAttribute("aria-pressed")}#o(Z,$,J={}){let{updateHandle:X=!0,emitInput:Y=!0,emitChange:Q=!1}=J;if(this.#Q.s=Math.max(0,Math.min(100,Z*100)),this.#Q.v=Math.max(0,Math.min(100,(1-$)*100)),this.#k)this.#k.setAttribute("color",this.#YZ({...this.#Q,a:1})),this.#g();if(X)this.#E();if(this.#LZ(),Y)this.#L();if(Q)this.#m()}#kZ(){if(this.#A)this.#A(),this.#A=null;if(!this.#f||!this.#k)return;let Z=this.#f.parentElement||this.#f,$=this.#k,J=!1,X=(U,H={})=>{let z=Z.getBoundingClientRect();if(z.width===0||z.height===0)return;let q=Math.max(0,Math.min(U.clientX-z.left,z.width)),V=Math.max(0,Math.min(U.clientY-z.top,z.height));this.#o(q/z.width,V/z.height,H)},Y=(U)=>{if(U.button!==0)return;if(U.target===$||$.contains(U.target))return;J=!0,this.#N=!0,Z.setPointerCapture(U.pointerId),X(U,{updateHandle:!0,emitInput:!0})},Q=(U)=>{if(!J)return;if(U.buttons===0){j();return}X(U,{updateHandle:!0,emitInput:!0})},j=()=>{if(!J)return;J=!1,this.#N=!1,this.#m()},W=(U)=>{this.#N=!0;let H=U.detail?.px,z=U.detail?.py;if(!Number.isFinite(H)||!Number.isFinite(z))return;$.setAttribute("value",`${H*100}% ${z*100}%`),this.#o(H,z,{updateHandle:!1,emitInput:!0})},K=(U)=>{let H=U.detail?.px,z=U.detail?.py;if(Number.isFinite(H)&&Number.isFinite(z))$.setAttribute("value",`${H*100}% ${z*100}%`),this.#o(H,z,{updateHandle:!1,emitInput:!1});this.#N=!1,this.#m()};Z.addEventListener("pointerdown",Y),Z.addEventListener("pointermove",Q),Z.addEventListener("pointerup",j),Z.addEventListener("pointercancel",j),Z.addEventListener("lostpointercapture",j),$.addEventListener("input",W),$.addEventListener("change",K),this.#A=()=>{Z.removeEventListener("pointerdown",Y),Z.removeEventListener("pointermove",Q),Z.removeEventListener("pointerup",j),Z.removeEventListener("pointercancel",j),Z.removeEventListener("lostpointercapture",j),$.removeEventListener("input",W),$.removeEventListener("change",K),this.#N=!1}}#CZ(){let Z=this.#$?.querySelector(".fig-fill-picker-input-fields");if(!Z)return;let $=(W,K)=>B("fig-tooltip",{text:W},K),J=(W,K,U,H,z,q)=>B("fig-input-number",{className:W,"aria-label":K,min:U,max:H,step:z,units:q}),X=this.getAttribute("alpha")!=="false",Y=()=>X?$("Alpha",J("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Q=(W,K="")=>B("div",{className:["input-combo",K].filter(Boolean).join(" ")},W),j;switch(this.#B){case"rgb":j=Q([$("Red",J("fig-fill-picker-ci-r","Red",0,255)),$("Green",J("fig-fill-picker-ci-g","Green",0,255)),$("Blue",J("fig-fill-picker-ci-b","Blue",0,255)),Y()]);break;case"hsl":j=Q([$("Hue",J("fig-fill-picker-ci-h","Hue",0,360)),$("Saturation",J("fig-fill-picker-ci-s","Saturation",0,100)),$("Lightness",J("fig-fill-picker-ci-l","Lightness",0,100)),Y()]);break;case"hsb":j=Q([$("Hue",J("fig-fill-picker-ci-h","Hue",0,360)),$("Saturation",J("fig-fill-picker-ci-s","Saturation",0,100)),$("Brightness",J("fig-fill-picker-ci-v","Brightness",0,100)),Y()]);break;case"lab":j=Q([$("Lightness",J("fig-fill-picker-ci-okl","Lightness",0,100)),$("Green-Red axis",J("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),$("Blue-Yellow axis",J("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),Y()]);break;case"lch":j=Q([$("Lightness",J("fig-fill-picker-ci-okl","Lightness",0,100)),$("Chroma",J("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),$("Hue",J("fig-fill-picker-ci-okh","Hue",0,360)),Y()]);break;case"css":j=B("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let W=B("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});j=X?B("fig-input-combo",{className:"input-combo fig-fill-picker-ci-hex-row",full:!0},[W,Y()]):W}break}Z.replaceChildren(j),this.#eZ(),this.#D(()=>this.#LZ())}#eZ(){let Z=this.#$?.querySelector(".fig-fill-picker-input-fields");if(!Z)return;let $=()=>{if(this.#N)return;let Y=this.#$0();if(!Y)return;let Q=Number.isFinite(Y.a)?Y.a:this.#Q.a;if(this.#Q={...Y,a:Q},this.#v(),this.#E(),this.#P)this.#P.setAttribute("value",this.#Q.h);if(this.#F&&Number.isFinite(Y.a))this.#F.setAttribute("value",this.#Q.a*100);this.#L()},J=()=>this.#m();Z.querySelectorAll("fig-input-number, fig-input-text").forEach((Y)=>{Y.addEventListener("input",$),Y.addEventListener("change",J)})}#Z0(){let Z=this.#$?.querySelector(".fig-fill-picker-ci-a");if(!Z)return;let $=parseFloat(Z.value);if(!Number.isFinite($))return;return Math.max(0,Math.min(1,$/100))}#$0(){let Z=(X)=>this.#$?.querySelector(`.${X}`),$=(X)=>parseFloat(Z(X)?.value??0),J=(X)=>{if(!X)return null;let Y=this.#Z0();return{...X,a:Y??X.a??this.#Q.a}};switch(this.#B){case"rgb":return J(this.#_Z({r:$("fig-fill-picker-ci-r"),g:$("fig-fill-picker-ci-g"),b:$("fig-fill-picker-ci-b")}));case"hsl":{let X=this.#F0({h:$("fig-fill-picker-ci-h"),s:$("fig-fill-picker-ci-s"),l:$("fig-fill-picker-ci-l")});return J(this.#_Z(X))}case"hsb":return J({h:$("fig-fill-picker-ci-h"),s:$("fig-fill-picker-ci-s"),v:$("fig-fill-picker-ci-v")});case"lab":{let X=this.#tZ({l:$("fig-fill-picker-ci-okl")/100,a:$("fig-fill-picker-ci-oka"),b:$("fig-fill-picker-ci-okb")});return J(this.#_Z(X))}case"lch":{let X=this.#C0({l:$("fig-fill-picker-ci-okl")/100,c:$("fig-fill-picker-ci-okc"),h:$("fig-fill-picker-ci-okh")});return J(this.#_Z(X))}case"css":{let X=Z("fig-fill-picker-ci-css");if(!X)return null;return this.#k0(X.value)}default:{let X=Z("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===8){let Q=parseInt(Y.slice(6,8),16)/255;if(Y=Y.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(Y))return null;return{...this.#MZ(`#${Y}`),a:Q}}if(Y.length!==6||!/^[0-9a-fA-F]{6}$/.test(Y))return null;return J(this.#MZ(`#${Y}`))}}}#LZ(){if(!this.#$)return;let Z=this.#YZ(this.#Q),$=this.#lZ(this.#Q),J=(Y)=>this.#$.querySelector(`.${Y}`),X=(Y,Q)=>{let j=J(Y);if(j)j.setAttribute("value",Q)};switch(this.#B){case"rgb":X("fig-fill-picker-ci-r",$.r),X("fig-fill-picker-ci-g",$.g),X("fig-fill-picker-ci-b",$.b);break;case"hsl":{let Y=this.#N0($);X("fig-fill-picker-ci-h",Math.round(Y.h)),X("fig-fill-picker-ci-s",Math.round(Y.s)),X("fig-fill-picker-ci-l",Math.round(Y.l));break}case"hsb":X("fig-fill-picker-ci-h",Math.round(this.#Q.h)),X("fig-fill-picker-ci-s",Math.round(this.#Q.s)),X("fig-fill-picker-ci-v",Math.round(this.#Q.v));break;case"lab":{let Y=this.#aZ($);X("fig-fill-picker-ci-okl",Math.round(Y.l*100)),X("fig-fill-picker-ci-oka",+Y.a.toFixed(3)),X("fig-fill-picker-ci-okb",+Y.b.toFixed(3));break}case"lch":{let Y=this.#R0($);X("fig-fill-picker-ci-okl",Math.round(Y.l*100)),X("fig-fill-picker-ci-okc",+Y.c.toFixed(3)),X("fig-fill-picker-ci-okh",Math.round(Y.h));break}case"css":X("fig-fill-picker-ci-css",this.#f0(this.#Q));break;default:X("fig-fill-picker-ci-hex",Z.replace(/^#/,"").toUpperCase());break}if(this.#B!=="css"){let Y=Math.round(this.#Q.a*1000)/10;X("fig-fill-picker-ci-a",Number.isInteger(Y)?Y:+Y.toFixed(1))}if(this.#F)this.#F.setAttribute("color",Z);this.#M()}#J0(){{let U=this.#$.querySelector('[data-tab="gradient"]'),H=document.createElement("fig-gradient-editor");H.value=w(this.#Y),H.setAttribute("color-space",this.#H),H.toggleAttribute("disabled",this.#C()),H.pickerAnchor=this.#$;let z=(q)=>{if(q.stopPropagation(),!q.detail?.gradient)return;if(this.#Y=b(q.detail.gradient),this.#M(),q.type==="change")this.#m();else this.#L()};H.addEventListener("input",z),H.addEventListener("change",z),U.replaceChildren(H);return}let Z=this.#$.querySelector('[data-tab="gradient"]'),$=B("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#Y.type,variant:"ghost"},B("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([U,H])=>B("fig-select-option",{value:U},H)))),J=(U,H,z)=>B("fig-tooltip",{text:U},B("fig-button",{icon:!0,variant:"ghost",className:H,"aria-label":U},E(z))),X=B("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[J("Flip gradient","fig-fill-picker-gradient-flip","swap"),J("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),Y=B("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[$,X]),Q=B("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large",value:JSON.stringify({type:"gradient",gradient:w(this.#Y)})}),j=B("fig-preview",{className:"fig-fill-picker-gradient-preview"},Q),W=B("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},E("add")),K=B("div",{className:"fig-fill-picker-gradient-stops"},[B("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[B("h3",{},"Stops"),W]),B("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);Z.replaceChildren(Y,j,K),this.#i(),this.#X0(Z)}#P0(){let Z=({value:X,title:Y,subtitle:Q,advanced:j=!1})=>B("fig-select-option",{value:X,label:`${Y} — ${Q}`,className:j?"fig-fill-picker-gradient-interpolation-advanced":null},[B("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),B("span",{className:"fig-fill-picker-gradient-interpolation-label"},[B("span",{className:"fig-fill-picker-gradient-interpolation-title"},Y),B("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Q)])]),$=B("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),J=D.#Z;return[...J.filter((X)=>!X.advanced).map(Z),$,...J.filter((X)=>X.advanced).map(Z)]}#X0(Z){let $=(L)=>typeof L.detail==="string"?L.detail:L.target?.value,J=Z.querySelector(".fig-fill-picker-gradient-bar-input"),X=(L)=>{if(!J)return;this.#R=!0;try{J.value={type:"gradient",gradient:w(L)}}finally{this.#R=!1}},Y=()=>{X(this.#Y)};Z.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(L)=>{let _=$(L);if(!_)return;this.#Y.type=_,this.#i(),this.#L()});let j=Z.querySelector(".fig-fill-picker-gradient-space"),W=j?.querySelector("fig-select-options"),K="fig-fill-picker-gradient-interpolation-collapsed",U=W?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),H=()=>Boolean(W?.classList.contains(K)),z=(L)=>{W?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",L?"Show all color interpolation options":"Scroll down")},q=()=>{if(!W)return;W.classList.remove(K),W.style.removeProperty("max-height"),z(!1),W.syncOverflow?.()},V=()=>{if(!W||!U)return;W.style.removeProperty("max-height"),W.classList.add(K),W.scrollTop=0;let L=W.getBoundingClientRect().top,_=U.getBoundingClientRect().top,F=W.querySelector(".fig-overflow-end")?.offsetHeight||0,A=_-L;if(A>0)W.style.maxHeight=`${Math.round(A+F)}px`;z(!0),W.syncOverflow?.()},O=(L)=>Boolean(W?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${L}"]`)),f=()=>{if(O(i(this.#Y)))q();else V()};if(W?.addEventListener("click",(L)=>{if(!H())return;if(!L.target?.closest?.(".fig-overflow-end"))return;L.preventDefault(),L.stopPropagation(),q()},!0),W?.addEventListener("focusin",(L)=>{if(!H())return;if(L.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))q()}),W?.addEventListener("scroll",()=>{if(H()&&W.scrollTop!==0)W.scrollTop=0}),j?.querySelectorAll("fig-select-option").forEach((L)=>{let _=()=>{let F=S(L.getAttribute("value")||"srgb");X(C({...this.#Y,...F}))};L.addEventListener("pointerenter",_),L.addEventListener("pointerleave",()=>{if(document.activeElement!==L)Y()}),L.addEventListener("focus",_),L.addEventListener("blur",()=>{if(!L.matches(":hover"))Y()})}),this.#p?.disconnect(),j)this.#p=new MutationObserver(()=>{if(!j.hasAttribute("open"))Y();else this.#D(f)}),this.#p.observe(j,{attributes:!0,attributeFilter:["open"]});let G=Z.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(G?.addEventListener("change",(L)=>{let _=typeof L.detail==="string"?L.detail:L.target?.value;if(!_)return;let F=S(_);this.#Y=C({...this.#Y,...F}),this.#i(),this.#L()}),G?.querySelectorAll("fig-segment").forEach((L)=>{let _=()=>{X(C({...this.#Y,...S(L.getAttribute("value")||"srgb")}))};L.addEventListener("pointerenter",_),L.addEventListener("pointerleave",Y)}),j?.addEventListener("change",(L)=>{let _=$(L);if(!_)return;let F=S(_);this.#Y=C({...this.#Y,...F}),this.#i(),this.#L()}),Z.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#Y.angle=(Number(this.#Y.angle)+90)%360,this.#i(),this.#L()}),Z.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#Y.stops.forEach((L)=>{L.position=100-L.position}),this.#Y.stops.sort((L,_)=>L.position-_.position),this.#i(),this.#L()}),Z.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#Y.stops.push({position:50,color:"#888888",opacity:100}),this.#Y.stops.sort((_,F)=>_.position-F.position),this.#i(),this.#L()}),J){let L=(_)=>{if(_.stopPropagation(),this.#R)return;let F=_.detail;if(!F?.gradient)return;this.#Y=b({...this.#Y,...F.gradient}),this.#M(),this.#TZ(),this.#oZ()};J.addEventListener("input",(_)=>{L(_),this.#L()}),J.addEventListener("change",(_)=>{L(_),this.#m()})}Z.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(L)=>{this.#W0(L)})}#pZ(Z){let $=String(Z.color||"#888888").replace(/^#/,"").slice(0,6),J=Z.opacity??100;if(J>=100)return`#${$}`;let X=Math.round(J/100*255).toString(16).padStart(2,"0");return`#${$}${X}`}#Y0(Z){if(!(Z instanceof HTMLElement))return"#888888";if(Z.hexOpaque)return this.#cZ(Z.hexOpaque);let $=Z.value;if(typeof $==="string"&&$.startsWith("#"))return this.#cZ($.length>7?$.slice(0,7):$);let J=Z.querySelector('fig-input-text:not([type="number"])'),X=String(J?.value??J?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(X))return`#${X.toUpperCase()}`;let Y=Z.getAttribute("value");if(typeof Y==="string"&&Y.startsWith("#"))return this.#cZ(Y.length>7?Y.slice(0,7):Y);return"#888888"}#cZ(Z){let $=String(Z||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test($))return"#888888";return`#${$.toUpperCase()}`}#Q0(Z){let $=Z.querySelector(".fig-fill-picker-stop-position"),J=Z.querySelector(".fig-fill-picker-stop-color"),X=parseFloat($?.value??$?.getAttribute("value")??"0")||0,Y=this.#Y0(J),Q=100;if(J instanceof HTMLElement&&J.rgba?.a!==void 0)Q=Math.round(J.rgba.a*100);else{let j=parseInt(Z.dataset.index,10);if(!isNaN(j)&&this.#Y.stops[j])Q=this.#Y.stops[j].opacity??100}return{position:X,color:Y,opacity:Q}}#sZ(Z){let $=parseInt(Z.dataset.index,10);if(isNaN($)||$<0||$>=this.#Y.stops.length)return;let J={...this.#Y.stops[$],...this.#Q0(Z)};this.#Y.stops[$]=J,this.#j0(Z,J)}#j0(Z,$){let J=Z.querySelector(".fig-fill-picker-stop-position");if(J)J.setAttribute("value",String($.position));let X=Z.querySelector(".fig-fill-picker-stop-color");if(X)X.setAttribute("value",this.#pZ($))}#W0(Z){let{oldIndex:$,newIndex:J}=Z.detail??{};if($==null||J==null||$===J||$<0||J<0||$>=this.#Y.stops.length||J>=this.#Y.stops.length)return;let Y=Z.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");Y.forEach((j)=>this.#sZ(j));let[Q]=this.#Y.stops.splice($,1);this.#Y.stops.splice(J,0,Q),Y.forEach((j,W)=>{j.dataset.index=String(W)}),this.#R=!0;try{this.#TZ(),this.#NZ(),this.#L()}finally{this.#R=!1}}#i(){if(!this.#$)return;let Z=this.#$.querySelector('[data-tab="gradient"]');if(!Z)return;this.#Y=b(this.#Y);let $=Z.querySelector("fig-gradient-editor");if($){$.value=this.#Y,$.setAttribute("color-space",this.#H),$.toggleAttribute("disabled",this.#C()),$.pickerAnchor=this.#$;return}let J=i(this.#Y),X=Z.querySelector(".fig-fill-picker-gradient-space");if(X)X.value=J;let Y=Z.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(Y){let Q=D.#J(J),j=Y.querySelector(`fig-segment[value="${J}"]`)||Y.querySelector(`fig-segment[data-space="${Q.space}"]`);if(j){let W=`${Q.title} — ${Q.subtitle}`;j.setAttribute("value",J),j.setAttribute("aria-label",W);let K=j.closest("fig-tooltip");if(K)K.setAttribute("text",W);Y.value=J}}this.#TZ(),this.#NZ(),this.#oZ()}#K0(){let Z=Array.isArray(this.#Y.stops)?[...this.#Y.stops].sort(($,J)=>($.position??0)-(J.position??0)):[];if(Z.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return Z.map(($)=>({color:String($.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:$.position??0}))}#TZ(){if(!this.#$)return;let Z=this.#K0();this.#$.querySelectorAll("fig-interpolation-swatch").forEach(($)=>{let J=$.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",X=S(J),Y={type:"linear",stops:Z,interpolationSpace:X.interpolationSpace};if(I.has(X.interpolationSpace))Y.hueInterpolation=X.hueInterpolation;$.value={type:"gradient",gradient:Y}})}#NZ(){if(!this.#$)return;let Z=this.#$.querySelector('[data-tab="gradient"] > fig-gradient-editor');if(Z){Z.value=this.#Y,Z.setAttribute("color-space",this.#H),this.#M();return}let $=this.#$.querySelector(".fig-fill-picker-gradient-bar-input");if($)this.#R=!0,$.value={type:"gradient",gradient:w(this.#Y)},this.#R=!1;this.#M()}#oZ(){if(!this.#$)return;let Z=this.#$.querySelector(".fig-fill-picker-gradient-stops-list"),$=Z?.querySelector("fig-reorder");if(!Z||!$)return;let J=$.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(J.length===this.#Y.stops.length){this.#Y.stops.forEach((X,Y)=>{let Q=J[Y];Q.dataset.index=Y;let j=Q.querySelector(".fig-fill-picker-stop-position");if(j)j.setAttribute("value",X.position);let W=Q.querySelector(".fig-fill-picker-stop-color");if(W)W.setAttribute("value",this.#pZ(X));let K=Q.querySelector(".fig-fill-picker-stop-remove");if(K)if(this.#Y.stops.length<=2)K.setAttribute("disabled","");else K.removeAttribute("disabled")});return}this.#U0(Z)}#U0(Z){let $=Z.querySelector("fig-reorder");if(!$)return;let J=this.#Y.stops.map((X,Y)=>B("fig-property",{className:"fig-fill-picker-gradient-stop-row","data-index":Y,leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},B("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[B("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:X.position,units:"%"}),B("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right",value:this.#pZ(X)})])));$.replaceChildren(...J),$.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((X)=>{X.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#sZ(X),this.#TZ(),this.#NZ(),this.#L()});let Y=X.querySelector(".fig-fill-picker-stop-color"),Q=Y.querySelector("fig-fill-picker");if(Q)Q.anchorElement=this.#$;else this.#D(()=>{let K=Y.querySelector("fig-fill-picker");if(K)K.anchorElement=this.#$});let j=()=>{this.#sZ(X),this.#R=!0;try{this.#TZ(),this.#NZ(),this.#L()}finally{this.#R=!1}};Y.addEventListener("input",j),Y.addEventListener("change",j);let W=X.querySelector(':scope > [data-fig-property-action="remove"]');W.classList.add("fig-fill-picker-stop-remove"),W.setAttribute("aria-label","Remove gradient stop"),W.toggleAttribute("disabled",this.#Y.stops.length<=2),X.addEventListener("remove",(K)=>{K.stopPropagation();let U=parseInt(X.dataset.index,10);if(this.#Y.stops.length>2)this.#Y.stops.splice(U,1),this.#i(),this.#L()})})}#D0(Z,$=!0){let J=C({...this.#Y,interpolationSpace:Z??this.#Y.interpolationSpace}),X=this.#H==="display-p3",Y=J.stops.map((W)=>{let K=(W.opacity??100)/100;return`${X?this.#T0(W.color,K):this.#M0(W.color,K)} ${W.position}%`}).join(", "),Q=fZ(J),j=$&&Q?` ${Q}`:"";switch(J.type){case"linear":return`linear-gradient(${J.angle}deg${j}, ${Y})`;case"radial":return`radial-gradient(circle at ${J.centerX}% ${J.centerY}%${j}, ${Y})`;case"angular":return`conic-gradient(from ${J.angle}deg${j}, ${Y})`;default:return`linear-gradient(${J.angle}deg${j}, ${Y})`}}static#iZ=new Map;#A0(Z){let $=D.#iZ.get(Z);if($!==void 0)return $;let J=document.createElement("div");J.style.background=Z;let X=!!J.style.background;return D.#iZ.set(Z,X),X}#rZ(){return u(this.#Y,{colorSpace:this.#H})}#z0(){let Z=this.#$.querySelector('[data-tab="image"]'),$=B("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#z.scaleMode},B("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Q,j])=>B("fig-select-option",{value:Q},j)))),J=B("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#z.scale,units:"%"});if(this.#z.scaleMode!=="tile")J.style.display="none";let X=B("fig-field",{className:"fig-fill-picker-media-header"},[$,J]),Y=B("fig-image",{className:"fig-fill-picker-media-preview fig-fill-picker-image-preview",upload:"true",label:"Upload from computer",alt:"Image fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true"});Z.replaceChildren(X,Y),this.#q0(Z)}#q0(Z){let $=Z.querySelector(".fig-fill-picker-scale-mode"),J=Z.querySelector(".fig-fill-picker-scale"),X=Z.querySelector(".fig-fill-picker-image-preview");$.addEventListener("change",(Y)=>{let Q=typeof Y.detail==="string"?Y.detail:Y.target?.value;if(!Q)return;this.#z.scaleMode=Q,J.style.display=Q==="tile"?"block":"none",this.#KZ(X),this.#M(),this.#L()}),J.addEventListener("input",(Y)=>{this.#z.scale=parseFloat(Y.target.value)||100,this.#KZ(X),this.#M(),this.#L()}),X.addEventListener("loaded",(Y)=>{let Q=Y.detail?.src||X.src;if(!Q)return;let j=Q!==this.#z.url;if(this.#z.url=Q,this.#KZ(X),this.#M(),j)this.#L();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:Y.detail??{src:Q}}))}),X.addEventListener("change",()=>{if(X.src)return;this.#z.url=null,this.#KZ(X),this.#M(),this.#L()}),this.#KZ(X)}#KZ(Z){if(!this.#z.url){Z.removeAttribute("src"),Z.classList.remove("has-media","is-tiled"),Z.style.backgroundImage="",Z.style.backgroundPosition="",Z.style.backgroundRepeat="",Z.style.backgroundSize="";return}Z.setAttribute("src",this.#z.url),Z.classList.add("has-media"),Z.style.backgroundImage="",Z.style.backgroundPosition="",Z.style.backgroundRepeat="",Z.style.backgroundSize="",Z.mediaEl?.style.removeProperty("opacity");let $=Z.querySelector("fig-input-file[data-generated]");if($)$.setAttribute("label","Replace"),$.removeAttribute("url");switch(this.#z.scaleMode){case"fill":Z.classList.remove("is-tiled"),Z.setAttribute("fit","cover");break;case"crop":Z.classList.remove("is-tiled"),Z.setAttribute("fit","cover");break;case"fit":Z.classList.remove("is-tiled"),Z.setAttribute("fit","contain");break;case"tile":if(Z.classList.add("is-tiled"),Z.setAttribute("fit","none"),Z.style.backgroundImage=`url(${this.#z.url})`,Z.style.backgroundPosition="top left",Z.style.backgroundSize=`${this.#z.scale}%`,Z.style.backgroundRepeat="repeat",Z.mediaEl)Z.mediaEl.style.opacity="0";break}}#VZ(Z){if(Z.tagName==="FIG-MEDIA"){if(!this.#X.url){Z.removeAttribute("src"),Z.classList.remove("has-media");return}if(Z.setAttribute("src",this.#X.url),this.#X.poster)Z.setAttribute("poster",this.#X.poster);else Z.removeAttribute("poster");Z.classList.add("has-media");let $=Z.querySelector("fig-input-file[data-generated]");if($)$.setAttribute("label","Replace"),$.removeAttribute("url");switch(this.#X.scaleMode){case"fill":case"crop":Z.setAttribute("fit","cover");break;case"fit":Z.setAttribute("fit","contain");break}return}switch(Z.style.objectPosition="center",Z.style.width="100%",Z.style.height="100%",this.#X.scaleMode){case"fill":case"crop":Z.style.objectFit="cover";break;case"fit":Z.style.objectFit="contain";break}}#H0(){let Z=this.#$.querySelector('[data-tab="video"]'),$=B("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#X.scaleMode},B("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([Y,Q])=>B("fig-select-option",{value:Y},Q)))),J=B("fig-field",{className:"fig-fill-picker-media-header"},$),X=B("fig-media",{className:"fig-fill-picker-media-preview fig-fill-picker-video-preview",type:"video",upload:"true",label:"Upload from computer","aria-label":"Video fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",controls:!0,muted:"true",loop:"true"});Z.replaceChildren(J,X),this.#V0(Z),this.#DZ({emit:!1})}#OZ(){if(this.#X.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#X.poster),this.#x.delete(this.#X.poster);this.#X.poster=null,this.#h=null}#PZ(){if(!this.#X.poster)return;if(this.#h&&this.#h===this.#X.url)return;this.#OZ()}#dZ(){let Z=this.#$?.querySelector(".fig-fill-picker-video-preview");if(Z)this.#VZ(Z)}#DZ({emit:Z=!1}={}){if(this.#X.url){if(this.#X.missing=!1,this.#PZ(),!this.#X.poster)this.#AZ(this.#X.url);else this.#dZ();return}let $=this.getAttribute("default-video");if(!$){this.#X.missing=!0;return}if(this.#X.url=$,this.#X.missing=!1,this.#dZ(),this.#AZ($),Z)this.#L()}#nZ(){if(this.#W!=="video")return;let Z=this.#X.url;if(!Z)return;if(this.#PZ(),this.#X.poster)return;this.#AZ(Z)}async#B0(Z){if(typeof Z.requestVideoFrameCallback==="function")await Promise.race([new Promise(($)=>Z.requestVideoFrameCallback(()=>$())),new Promise(($)=>setTimeout($,80))]);else try{await Z.play(),Z.pause()}catch{}if(typeof createImageBitmap==="function")try{return await createImageBitmap(Z)}catch{}return null}async#L0(Z){let $=await this.#B0(Z),J=$?.width||Z.videoWidth,X=$?.height||Z.videoHeight;if(!J||!X)return $?.close?.(),null;let Y=typeof OffscreenCanvas==="function"?new OffscreenCanvas(J,X):Object.assign(document.createElement("canvas"),{width:J,height:X}),Q=Y.getContext("2d");if(!Q)return $?.close?.(),null;try{Q.drawImage($||Z,0,0,J,X)}finally{$?.close?.()}return Y.convertToBlob?Y.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((j)=>Y.toBlob(j,"image/jpeg",0.85))}async#AZ(Z,{emit:$=!1}={}){if(!Z||this.#n===Z)return;this.#n=Z;let J=document.createElement("video");J.muted=!0,J.playsInline=!0,J.preload="auto",J.crossOrigin="anonymous";try{if(await new Promise((Y,Q)=>{let j=()=>Q(Error("video poster failed"));J.addEventListener("error",j,{once:!0}),J.addEventListener("loadeddata",Y,{once:!0}),J.src=Z}),!J.videoWidth||!J.videoHeight)return;let X=await this.#L0(J);if(!X||this.#X.url!==Z)return;if(this.#OZ(),this.#X.poster=URL.createObjectURL(X),this.#h=Z,this.#x.add(this.#X.poster),this.#M(),this.#dZ(),$)this.#L()}catch{}finally{if(J.removeAttribute("src"),J.load(),this.#n===Z)this.#n=null}}#V0(Z){let $=Z.querySelector(".fig-fill-picker-scale-mode"),J=Z.querySelector(".fig-fill-picker-video-preview");$.addEventListener("change",(X)=>{let Y=typeof X.detail==="string"?X.detail:X.target?.value;if(!Y)return;this.#X.scaleMode=Y,this.#VZ(J),this.#M(),this.#L()}),J.addEventListener("loaded",(X)=>{let Y=X.detail?.src||J.src;if(!Y)return;let Q=Y!==this.#X.url;if(Q)this.#OZ();if(this.#X.url=Y,this.#X.missing=!1,this.#VZ(J),this.#AZ(Y),this.#M(),Q)this.#L();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:X.detail??{src:Y}}))}),J.addEventListener("change",()=>{if(J.src)return;this.#X.url=null,this.#OZ(),this.#DZ(),this.#VZ(J),this.#M(),this.#L()}),this.#VZ(J)}#O0(){let Z=this.#$.querySelector('[data-tab="webcam"]'),$=B("fig-field",{className:"fig-fill-picker-webcam-camera"},B("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));$.style.display="none";let J=B("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});J.muted=!0;let X=B("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},B("span",{},"Camera access required")),Y=B("fig-video",{className:"fig-fill-picker-webcam-preview","aria-label":"Webcam preview","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",autoplay:"true",muted:"true"},[J,X]),Q=B("div",{className:"fig-fill-picker-webcam-controls"},B("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));Z.replaceChildren($,Y,Q),this.#_0(Z)}#_0(Z){let $=Z.querySelector(".fig-fill-picker-webcam-video"),J=Z.querySelector(".fig-fill-picker-webcam-status"),X=Z.querySelector(".fig-fill-picker-webcam-capture"),Y=Z.querySelector(".fig-fill-picker-webcam-camera"),Q=Z.querySelector(".fig-fill-picker-camera-select"),j=(z)=>{if(z)X.removeAttribute("disabled");else X.setAttribute("disabled","")},W=()=>{let z=!!this.#j.stream&&$.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&$.videoWidth>0&&$.videoHeight>0;if(j(z),z)J.querySelector("span").textContent="Camera ready",J.style.display="none",this.#IZ($)};$.addEventListener("loadedmetadata",W),$.addEventListener("canplay",W),$.addEventListener("playing",W);let K=(z)=>{this.#j.stream=z,$.srcObject=z,$.muted=!0,$.playsInline=!0,$.style.display="block";let q=$.play?.();if(q?.catch)q.catch(()=>{});W()},U=async(z,q)=>{let V=await navigator.mediaDevices.enumerateDevices();if(z!=null&&z!==this.#u)return;let O=V.filter((f)=>f.kind==="videoinput");if(O.length>1){Y.style.display="";let f=Q.querySelector(":scope > fig-select-options");if(!f)f=document.createElement("fig-select-options"),Q.append(f);if(f.replaceChildren(),O.forEach((G,N)=>{let L=document.createElement("fig-select-option");L.value=G.deviceId;let _=G.label||(O.length>1?`Camera ${N+1}`:"Camera");L.textContent=_.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(F,A)=>{return` ${/^\d+$/.test(A)?Number.parseInt(A,10).toString():A.replace(/^0+/,"")||"0"}`}),f.append(L)}),q)Q.value=q}else Y.style.display="none",Q.querySelector(":scope > fig-select-options")?.replaceChildren()},H=async(z=null)=>{let q=z||this.#j.deviceId||null,V=this.#j.stream,O=V?.getTracks?.().filter((G)=>G.readyState!=="ended")??[];if(V&&O.length){let G=V.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#j.deviceId||null;if(!q||q===G){K(V),this.#a(),U(null,q||G);return}}this.#WZ({emit:Boolean(V)});let f=this.#u;j(!1),J.querySelector("span").textContent="Starting camera",J.style.display="flex";try{let G={video:q?{deviceId:{exact:q}}:!0},N=await navigator.mediaDevices.getUserMedia(G);if(f!==this.#u||!this.isConnected||this.#q!=="webcam"){N.getTracks().forEach((_)=>_.stop());return}let L=N.getVideoTracks?.()?.[0];this.#j.deviceId=q||L?.getSettings?.()?.deviceId||null,this.#j.live=this.#ZZ()==="live",K(N),this.#a(),await U(f,q)}catch(G){if(f!==this.#u)return;console.error("Webcam error:",G.name,G.message);let N="Camera access denied";if(G.name==="NotAllowedError")N="Camera permission denied";else if(G.name==="NotFoundError")N="No camera found";else if(G.name==="NotReadableError")N="Camera in use by another app";else if(G.name==="OverconstrainedError")N="Camera constraints not supported";else if(!window.isSecureContext)N="Camera requires secure context";J.replaceChildren();let L=document.createElement("span");L.textContent=N,J.appendChild(L),J.style.display="flex",$.style.display="none",j(!1)}};this.#I=H,Q.addEventListener("change",(z)=>{let q=typeof z.detail==="string"?z.detail:z.target?.value;if(!q||q===this.#j.deviceId)return;H(q)}),X.addEventListener("click",async()=>{if(!this.#j.stream)return;let z=await this.#zZ($);if(!z)return;this.#z.url=z,this.#j.live=!1;let q=this.#$.querySelector(".fig-fill-picker-image-preview");if(q)this.#KZ(q);if(Array.from(this.#$.querySelectorAll(".fig-fill-picker-tab")).some((O)=>O.dataset.tab==="image"))this.#BZ("image");else this.#M(),this.#L();this.#m()})}#lZ(Z){let $=Z.h/360,J=Z.s/100,X=Z.v/100,Y,Q,j,W=Math.floor($*6),K=$*6-W,U=X*(1-J),H=X*(1-K*J),z=X*(1-(1-K)*J);switch(W%6){case 0:Y=X,Q=z,j=U;break;case 1:Y=H,Q=X,j=U;break;case 2:Y=U,Q=X,j=z;break;case 3:Y=U,Q=H,j=X;break;case 4:Y=z,Q=U,j=X;break;case 5:Y=X,Q=U,j=H;break}return{r:Math.round(Y*255),g:Math.round(Q*255),b:Math.round(j*255)}}#_Z(Z){let $=Z.r/255,J=Z.g/255,X=Z.b/255,Y=Math.max($,J,X),Q=Math.min($,J,X),j=Y-Q,W=0,K=Y===0?0:j/Y,U=Y;if(Y!==Q){switch(Y){case $:W=(J-X)/j+(J<X?6:0);break;case J:W=(X-$)/j+2;break;case X:W=($-J)/j+4;break}W/=6}return{h:W*360,s:K*100,v:U*100,a:1}}#YZ(Z){if(!Z||typeof Z.h!=="number"||typeof Z.s!=="number"||typeof Z.v!=="number")return"#D9D9D9";let $=this.#lZ(Z),J=(X)=>{return(isNaN(X)?217:Math.max(0,Math.min(255,Math.round(X)))).toString(16).padStart(2,"0")};return`#${J($.r)}${J($.g)}${J($.b)}`}#MZ(Z){let $=parseInt(Z.slice(1,3),16),J=parseInt(Z.slice(3,5),16),X=parseInt(Z.slice(5,7),16);return this.#_Z({r:$,g:J,b:X})}#M0(Z,$=1){let J=parseInt(Z.slice(1,3),16),X=parseInt(Z.slice(3,5),16),Y=parseInt(Z.slice(5,7),16);return`rgba(${J}, ${X}, ${Y}, ${$})`}#G0(Z){let $=Math.max(0,Math.min(1,Number(Z)||0)),J=Math.round($*1000)/1000;return String(J)}#f0(Z=this.#Q){let $=this.#lZ(Z);return`rgba(${$.r}, ${$.g}, ${$.b}, ${this.#G0(Z.a)})`}#k0(Z){let $=String(Z??"").trim();if(!$)return null;let J=$.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(J){let Y=J[1];if(Y.length===3)Y=Y[0]+Y[0]+Y[1]+Y[1]+Y[2]+Y[2];let Q=1;if(Y.length===8)Q=parseInt(Y.slice(6,8),16)/255,Y=Y.slice(0,6);return{...this.#MZ(`#${Y}`),a:Q}}let X=$.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if(X){let Y=Math.max(0,Math.min(255,Math.round(parseFloat(X[1])))),Q=Math.max(0,Math.min(255,Math.round(parseFloat(X[2])))),j=Math.max(0,Math.min(255,Math.round(parseFloat(X[3])))),W=X[4]!==void 0?Math.max(0,Math.min(1,parseFloat(X[4]))):1;if(![Y,Q,j,W].every(Number.isFinite))return null;return{...this.#_Z({r:Y,g:Q,b:j}),a:W}}return null}#T0(Z,$=1){let J=+(parseInt(Z.slice(1,3),16)/255).toFixed(4),X=+(parseInt(Z.slice(3,5),16)/255).toFixed(4),Y=+(parseInt(Z.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${J} ${X} ${Y} / ${$})`}#N0(Z){let $=Z.r/255,J=Z.g/255,X=Z.b/255,Y=Math.max($,J,X),Q=Math.min($,J,X),j,W,K=(Y+Q)/2;if(Y===Q)j=W=0;else{let U=Y-Q;switch(W=K>0.5?U/(2-Y-Q):U/(Y+Q),Y){case $:j=((J-X)/U+(J<X?6:0))/6;break;case J:j=((X-$)/U+2)/6;break;case X:j=(($-J)/U+4)/6;break}}return{h:j*360,s:W*100,l:K*100}}#F0(Z){let $=Z.h/360,J=Z.s/100,X=Z.l/100,Y,Q,j;if(J===0)Y=Q=j=X;else{let W=(H,z,q)=>{if(q<0)q+=1;if(q>1)q-=1;if(q<0.16666666666666666)return H+(z-H)*6*q;if(q<0.5)return z;if(q<0.6666666666666666)return H+(z-H)*(0.6666666666666666-q)*6;return H},K=X<0.5?X*(1+J):X+J-X*J,U=2*X-K;Y=W(U,K,$+0.3333333333333333),Q=W(U,K,$),j=W(U,K,$-0.3333333333333333)}return{r:Math.round(Y*255),g:Math.round(Q*255),b:Math.round(j*255)}}#aZ(Z){let $=(z)=>{return z=z/255,z<=0.04045?z/12.92:Math.pow((z+0.055)/1.055,2.4)},J=$(Z.r),X=$(Z.g),Y=$(Z.b),Q=0.4122214708*J+0.5363325363*X+0.0514459929*Y,j=0.2119034982*J+0.6806995451*X+0.1073969566*Y,W=0.0883024619*J+0.2817188376*X+0.6299787005*Y,K=Math.cbrt(Q),U=Math.cbrt(j),H=Math.cbrt(W);return{l:0.2104542553*K+0.793617785*U-0.0040720468*H,a:1.9779984951*K-2.428592205*U+0.4505937099*H,b:0.0259040371*K+0.7827717662*U-0.808675766*H}}#R0(Z){let $=this.#aZ(Z);return{l:$.l,c:Math.sqrt($.a*$.a+$.b*$.b),h:(Math.atan2($.b,$.a)*180/Math.PI+360)%360}}#tZ(Z){let $=Z.l+0.3963377774*Z.a+0.2158037573*Z.b,J=Z.l-0.1055613458*Z.a-0.0638541728*Z.b,X=Z.l-0.0894841775*Z.a-1.291485548*Z.b,Y=$*$*$,Q=J*J*J,j=X*X*X,W=(K)=>{let U=K<=0.0031308?12.92*K:1.055*Math.pow(K,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,U))*255)};return{r:W(4.0767416621*Y-3.3077115913*Q+0.2309699292*j),g:W(-1.2684380046*Y+2.6097574011*Q-0.3413193965*j),b:W(-0.0041960863*Y-0.7034186147*Q+1.707614701*j)}}#C0(Z){let $=Z.h*Math.PI/180;return this.#tZ({l:Z.l,a:Z.c*Math.cos($),b:Z.c*Math.sin($)})}#L(){if(this.#C())return;this.#M(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#m(){if(this.#C())return;this.#y=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let Z={type:this.#W,colorSpace:this.#H};switch(this.#W){case"solid":return{...Z,color:this.#YZ(this.#Q),alpha:this.#Q.a,hsv:{...this.#Q}};case"gradient":return{...Z,gradient:w(this.#Y),css:this.#rZ()};case"image":return{...Z,image:{...this.#z}};case"video":return{...Z,video:this.#s()};case"webcam":return{...Z,webcam:this.#UZ()};default:return{...Z,...this.#w[this.#W]}}}set value(Z){if(typeof Z==="string")this.setAttribute("value",Z);else this.setAttribute("value",JSON.stringify(Z))}attributeChangedCallback(Z,$,J){if($===J)return;switch(Z){case"value":if(this.#RZ(),this.#M(),this.#nZ(),this.#$?.open&&!this.#N)this.#vZ(),this.#y=JSON.stringify(this.value);break;case"disabled":if(this.#d(),this.#C()&&this.#$?.open)this.close();break;case"alpha":case"mode":{if(!this.#$)break;let X=this.#$.open;if(this.#fZ(),X&&this.isConnected)this.#jZ();break}case"webcam-mode":if(this.#W==="webcam")this.#M();break;case"default-video":if(this.#W==="video")this.#DZ({emit:!1}),this.#M();break;case"aria-label":if(this.#$)this.#$.setAttribute("aria-label",this.#qZ());case"aria-labelledby":case"aria-describedby":this.#d();break}}}P("fig-fill-picker",D);class M extends HTMLElement{static#Z=new Set(["oklch","hsl"]);static#J=10;static#K=10;static#U=8;static#$=3;static#V=210;static#q={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#W=!1;#H=null;#Q=null;#B={...M.#q};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#B}}}set value(Z){if(Z==null||Z===""){this.removeAttribute("value");return}if(typeof Z==="string"){this.setAttribute("value",Z);return}this.setAttribute("value",JSON.stringify(Z))}connectedCallback(){this.#Y(),this.#z(),this.#N(),this.#R()}attributeChangedCallback(Z,$,J){if($===J)return;if(Z!=="value")return;if(this.#z(),this.#W)this.#R()}#Y(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#z(){let Z=this.getAttribute("value");if(!Z){this.#B={...M.#q,stops:M.#q.stops.map(($)=>({...$}))};return}try{let $=JSON.parse(Z),J=$?.type==="gradient"&&$.gradient?$.gradient:$?.gradient?$.gradient:$;if(!J||typeof J!=="object")return;this.#B=this.#X({...M.#q,...J})}catch{}}#X(Z){let $={...Z??{}},J=String($.interpolationSpace??"srgb").toLowerCase(),X=String($.hueInterpolation??"shorter").toLowerCase(),Y=Array.isArray($.stops)?$.stops.map((Q)=>({color:String(Q?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Q?.position??0,opacity:Q?.opacity??100})):M.#q.stops.map((Q)=>({...Q}));if(Y.length<2)return{...M.#q,stops:M.#q.stops.map((Q)=>({...Q}))};return{type:["linear","radial","angular"].includes($.type)?$.type:"linear",angle:Number.isFinite(Number($.angle))?Number($.angle):135,interpolationSpace:J,hueInterpolation:X,stops:Y}}#j(){return M.#Z.has(this.#B.interpolationSpace||"srgb")}#G(Z){let{r:$,g:J,b:X}=g(Z);if(this.#B.interpolationSpace==="hsl")return zZ($,J,X).h;let Y=qZ($,J,X);return(HZ(Y.l,Y.a,Y.b).h%360+360)%360}#T(){let Z=this.#k(),$=this.#G(Z[0]?.color||"#FF0000"),J=this.#G(Z[Z.length-1]?.color||"#4F9EFF"),X=M.#V-$,Q=((M.#V-J-X)%360+360)%360,j=Q===0?0:Q-360,W=this.#B.hueInterpolation||"shorter",K;if(W==="increasing")K=j;else if(W==="decreasing")K=Q;else if(W==="longer")K=Q<180?j:Q;else K=Q<=180?Q:j;let U=Math.sign(K),H=Math.asin(M.#$/2/M.#U)*180/Math.PI,z=Math.min(H,Math.max(0,(Math.abs(K)-0.01)/2));return{startDeg:X+U*z,sweepDeg:K-U*z*2}}#O(Z){let $=Z*Math.PI/180;return{x:M.#J+M.#U*Math.cos($),y:M.#K+M.#U*Math.sin($)}}#_(Z,$){let J=Z+$,X=this.#O(Z),Y=this.#O(J),Q=Math.abs($)>180?1:0,j=$>=0?1:0;return`M ${X.x} ${X.y} A ${M.#U} ${M.#U} 0 ${Q} ${j} ${Y.x} ${Y.y}`}#w(){let Z=this.#O(180),$=this.#O(0);return`M ${Z.x} ${Z.y} L ${$.x} ${$.y}`}#f(Z){let $=M.#$,J=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${Z}" fill="none" stroke="white" stroke-width="${$}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent(J)}")`}#k(){return[...this.#B.stops].sort((Z,$)=>(Z.position??0)-($.position??0))}#P(){let Z=this.#B.interpolationSpace||"srgb";if(Z==="srgb")return"";if(M.#Z.has(Z))return` in ${Z} ${this.#B.hueInterpolation||"shorter"} hue`;return` in ${Z}`}#F(){let Z=this.#k(),$=this.#P();if(this.#j()){let X=(M.#V+90)%360,Y=this.#B.interpolationSpace,Q=(W)=>Y==="oklch"?`oklch(65% 0.25 ${W})`:`hsl(${W} 100% 50%)`,j=[0,300,240,180,120,60,0].map(Q).join(", ");return`conic-gradient(from ${X}deg in ${Y} decreasing hue, ${j})`}let J=Z.map((X)=>`${X.color} ${X.position??0}%`).join(", ");return`linear-gradient(90deg${$}, ${J})`}#N(){if(this.#W)return;let Z=M.#$,$=l("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},l("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":Z})),J=B("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren($,J),this.#H=$,this.#Q=J,this.#W=!0}#R(){if(!this.#Q)return;let Z=this.#j();if(this.#H)this.#H.style.display=Z?"":"none";let $=Z?(()=>{let{startDeg:X,sweepDeg:Y}=this.#T();return this.#_(X,Y)})():this.#w(),J=this.#f($);this.#Q.style.setProperty("-webkit-mask-image",J),this.#Q.style.maskImage=J,this.#Q.style.background=this.#F()}}P("fig-interpolation-swatch",M);class R extends HTMLElement{static observedAttributes=["axis","handle","items","indicator","disabled"];static#Z=6;static#J=['[draggable]:not([draggable="false"])','img:not([draggable="false"])','a[href]:not([draggable="false"])','input[type="range"]',"fig-handle","fig-slider","fig-input-number","fig-input-gradient","fig-easing-curve","fig-angle","fig-audio","fig-audio-waveform","fig-input-wheel","fig-joystick","fig-origin-grid","fig-chooser","fig-canvas-control"];static#K=new Set(["data-reorder-item","data-reorder-generated-role","data-reorder-handle","role","tabindex","aria-label","aria-roledescription"]);#U=null;#$=null;#V=!1;#q=new Map;#W=null;#H=null;#Q=null;connectedCallback(){if(this.style.display="contents",!this.hasAttribute("role"))this.setAttribute("role","list");if(!this.hasAttribute("aria-label"))this.setAttribute("aria-label","Reorderable list");this.#p(),this.#_(),this.#U=new MutationObserver(()=>this.#_()),this.#U.observe(this,{childList:!0}),this.#B()}disconnectedCallback(){this.#U?.disconnect(),this.#U=null,this.#$?.disconnect(),this.#$=null,this.#a(),this.#JZ(),this.#c(),this.#Q?.remove(),this.#Q=null}attributeChangedCallback(Z){if(this.isConnected){if(this.#Y)this.#JZ();if(Z==="indicator")this.#C();this.#B(),this.#_()}}refresh(){if(this.isConnected)this.#_()}#B(){if(!this.#j){this.#$?.disconnect(),this.#$=null;return}if(this.#$)return;this.#$=new MutationObserver((Z)=>{if(!Z.some((J)=>J.target.parentElement===this&&!R.#K.has(J.attributeName)&&!(J.attributeName==="class"&&J.target===this.#W?.item))||this.#V)return;this.#V=!0,queueMicrotask(()=>{if(this.#V=!1,this.isConnected)this.#_()})}),this.#$.observe(this,{subtree:!0,attributes:!0})}get#Y(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#z(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#X(){return(this.getAttribute("handle")||"").trim()}get#j(){return(this.getAttribute("items")||"").trim()}get#G(){return(this.getAttribute("indicator")||"default").trim().toLowerCase()}#T(){return[...this.children].filter((Z)=>Z.nodeType===Node.ELEMENT_NODE&&!Z.hasAttribute("data-reorder-live"))}#O(){let Z=this.#T(),$=this.#j;if(!$)return Z;try{return Z.filter((J)=>J.matches($))}catch{return[]}}#_(){let Z=this.#T(),$=this.#O(),J=new Set($);for(let[Y,Q]of this.#q)if(!J.has(Y))Q.target.removeEventListener("pointerdown",Q.onPointerDown,!0),Q.target.removeEventListener("keydown",Q.onKeyDown),this.#A(Q),this.#q.delete(Y);this.#P(Z),this.#w(Z),this.#k(Z.filter((Y)=>!J.has(Y)));let X=!this.#Y&&$.length>=2;if(this.#f($,X),!X){this.#a();return}for(let Y of $){let Q=this.#N(Y),j=this.#q.get(Y);if(j&&j.target===Q)continue;if(j)j.target.removeEventListener("pointerdown",j.onPointerDown,!0),this.#q.delete(Y);if(!Q)continue;this.#R(Y,Q)}this.#F($)}#w(Z){for(let $ of Z)if($.removeAttribute("data-reorder-item"),$.hasAttribute("data-reorder-generated-role"))$.removeAttribute("role"),$.removeAttribute("data-reorder-generated-role")}#f(Z,$=!0){for(let J of Z){if($)J.setAttribute("data-reorder-item","");if(!J.hasAttribute("role"))J.setAttribute("role","listitem"),J.setAttribute("data-reorder-generated-role","")}}#k(Z){for(let $ of Z)if(!$.hasAttribute("role"))$.setAttribute("role","none"),$.setAttribute("data-reorder-generated-role","")}#P(Z){for(let $ of Z)$.querySelectorAll("[data-reorder-handle]").forEach((J)=>{J.removeAttribute("data-reorder-handle"),J.removeAttribute("aria-roledescription")})}#F(Z){if(!this.#X)return;for(let $ of Z){let J=$.querySelector(this.#X);if(J)J.setAttribute("data-reorder-handle",""),J.setAttribute("aria-roledescription","reorder handle")}}#N(Z){if(this.#X)return Z.querySelector(this.#X);return Z}#R(Z,$){let J=(K)=>{if(this.#Y||this.#O().length<2)return;if(K.button!==0)return;if(!this.#X&&this.#y(K.target,Z))return;this.#t(K,Z,$)},X=$.getAttribute("tabindex"),Y=$.getAttribute("aria-label"),Q=$.getAttribute("role"),j=Z.getAttribute("aria-label")||Z.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";if($.setAttribute("tabindex","0"),$.setAttribute("aria-label",`Move ${j}`),$!==Z&&!$.hasAttribute("role"))$.setAttribute("role","button");let W=(K)=>{if(this.#Y)return;let U=this.#z==="horizontal",H=U?"ArrowLeft":"ArrowUp",z=U?"ArrowRight":"ArrowDown";if(K.key!==H&&K.key!==z&&K.key!=="Home"&&K.key!=="End")return;K.preventDefault(),K.stopPropagation();let q=this.#O(),V=q.indexOf(Z),O=V;if(K.key===H)O=Math.max(0,V-1);else if(K.key===z)O=Math.min(q.length-1,V+1);else if(K.key==="Home")O=0;else if(K.key==="End")O=q.length-1;if(O===V){this.#b(`${j}, position ${V+1} of ${q.length}`);return}this.#s(Z,O),this.#_(),this.#N(Z)?.focus(),this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:V,newIndex:O,item:Z}})),this.#b(`${j}, position ${O+1} of ${q.length}`)};$.addEventListener("pointerdown",J,!0),$.addEventListener("keydown",W),this.#q.set(Z,{target:$,onPointerDown:J,onKeyDown:W,originalTabIndex:X,originalAriaLabel:Y,originalRole:Q})}#A(Z){let{target:$,originalTabIndex:J,originalAriaLabel:X,originalRole:Y}=Z;if(J===null)$.removeAttribute("tabindex");else $.setAttribute("tabindex",J);if(X===null)$.removeAttribute("aria-label");else $.setAttribute("aria-label",X);if(Y===null)$.removeAttribute("role");else $.setAttribute("role",Y)}#p(){if(this.#Q?.isConnected)return;let Z=document.createElement("span");Z.setAttribute("data-reorder-live",""),Z.setAttribute("role","status"),Z.setAttribute("aria-live","polite"),Z.setAttribute("aria-atomic","true"),Object.assign(Z.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}),this.#Q=Z,document.body.appendChild(Z)}#b(Z){if(!this.#Q)return;this.#Q.textContent="",requestAnimationFrame(()=>{if(this.#Q)this.#Q.textContent=Z})}#y(Z,$){let J=Z;while(J&&J!==$){if(J instanceof Element){for(let X of R.#J)if(J.matches(X))return!0}J=J.parentElement}return!1}static#I="fig-reorder-dragging";static#u(Z){document.body.classList.toggle(R.#I,Z)}#t(Z,$,J){this.#JZ();let X={item:$,target:J,pointerId:Z.pointerId,oldIndex:this.#O().indexOf($),targetIndex:this.#O().indexOf($),startX:Z.clientX,startY:Z.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};X.onMove=(Y)=>{if(Y.pointerId!==X.pointerId)return;let Q=Y.clientX-X.startX,j=Y.clientY-X.startY;if(!X.active){if(Q*Q+j*j<R.#Z*R.#Z)return;X.active=!0,Z.preventDefault(),Z.stopPropagation(),$.classList.add("dragging"),R.#u(!0);try{J.setPointerCapture(X.pointerId)}catch{}}Y.preventDefault();let W=this.#z==="horizontal"?Y.clientX:Y.clientY,K=this.#r(W);X.targetIndex=K,this.#ZZ(K,$)},X.onKeyDown=(Y)=>{if(Y.key!=="Escape"||!X.active)return;Y.preventDefault(),this.#$Z(X,!0)},X.onUp=(Y)=>{if(Y.pointerId!==X.pointerId)return;this.#$Z(X,Y.type==="pointercancel")},this.#W=X,window.addEventListener("pointermove",X.onMove),window.addEventListener("pointerup",X.onUp),window.addEventListener("pointercancel",X.onUp),window.addEventListener("keydown",X.onKeyDown)}#r(Z){let $=this.#O(),J=this.#z==="horizontal";for(let X=0;X<$.length;X++){let Y=$[X].getBoundingClientRect(),Q=J?Y.left+Y.width/2:Y.top+Y.height/2;if(Z<Q)return X}return $.length}#e(Z,$){let J=this.#O(),X=J.indexOf(Z);if(X===-1)return!1;let Y=Math.max(0,Math.min($,J.length));if($===X)return!1;if(Y>=J.length&&X===J.length-1)return!1;return!0}#x(Z){if(!Z.length)return null;let $=1/0,J=-1/0,X=1/0,Y=-1/0;for(let Q of Z){let j=Q.getBoundingClientRect();$=Math.min($,j.left),J=Math.max(J,j.right),X=Math.min(X,j.top),Y=Math.max(Y,j.bottom)}return{left:$,top:X,width:J-$,height:Y-X}}#n(){let Z=[":popover-open",":modal",":fullscreen"],$=this.parentElement;while($){if(Z.some((X)=>{try{return $.matches(X)}catch{return!1}}))return $;$=$.parentElement}return document.body}#h(){if(this.#H)return this.#H;let Z=document.createElement("div");return Z.className="fig-reorder-indicator",Z.setAttribute("data-axis",this.#z),Z.classList.toggle("fig-reorder-indicator-ring",this.#G==="ring"),this.#n().appendChild(Z),this.#H=Z,Z}#C(){this.#H?.classList.toggle("fig-reorder-indicator-ring",this.#G==="ring")}#ZZ(Z,$){let J=this.#O();if(!this.#e($,Z)){this.#c();return}let X=this.#x(J);if(!X){this.#c();return}let Y=this.#h();if(Y.setAttribute("data-axis",this.#z),this.#z==="horizontal"){let j;if(Z<=0)j=J[0].getBoundingClientRect().left;else if(Z>=J.length)j=J[J.length-1].getBoundingClientRect().right;else j=J[Z].getBoundingClientRect().left;Y.style.left=`${j-1}px`,Y.style.top=`${X.top}px`,Y.style.width="2px",Y.style.height=`${X.height}px`;return}let Q;if(Z<=0)Q=J[0].getBoundingClientRect().top;else if(Z>=J.length)Q=J[J.length-1].getBoundingClientRect().bottom;else Q=J[Z].getBoundingClientRect().top;Y.style.left=`${X.left}px`,Y.style.top=`${Q-1}px`,Y.style.width=`${X.width}px`,Y.style.height="2px"}#c(){this.#H?.remove(),this.#H=null}#UZ(Z,$){let J=this.#O(),X=Math.max(0,Math.min($,J.length));if(X>=J.length){let Q=J[J.length-1];if(Q&&Q!==Z)Q.after(Z);return}let Y=J[X];if(Y!==Z)this.insertBefore(Z,Y)}#s(Z,$){let J=this.#O().filter((Y)=>Y!==Z),X=J[$]??null;if(X)this.insertBefore(Z,X);else if(J.length)J[J.length-1].after(Z);else this.appendChild(Z)}#$Z(Z,$){let{item:J,oldIndex:X,active:Y,onMove:Q,onUp:j,onKeyDown:W}=Z;if(window.removeEventListener("pointermove",Q),window.removeEventListener("pointerup",j),window.removeEventListener("pointercancel",j),window.removeEventListener("keydown",W),Y){if(!$){this.#UZ(J,Z.targetIndex);let K=this.#O().indexOf(J);if(K!==-1&&K!==X){this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:X,newIndex:K,item:J}}));let U=J.getAttribute("aria-label")||J.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";this.#b(`${U}, position ${K+1} of ${this.#O().length}`)}}}if(J.classList.remove("dragging"),R.#u(!1),this.#c(),this.#W===Z)this.#W=null}#a(){for(let[,Z]of this.#q)Z.target.removeEventListener("pointerdown",Z.onPointerDown,!0),Z.target.removeEventListener("keydown",Z.onKeyDown),this.#A(Z);this.#q.clear()}#JZ(){if(!this.#W)return;this.#$Z(this.#W,!0)}}P("fig-reorder",R);