@rogieking/figui3 11.6.0 → 11.6.2

package/dist/fig-editor.js

@@ -1,6 +1,6 @@
-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(`
+import"./fig.js";import"./fig-property.js";import{figConvertRGB as i,figHexToRGB as t,figHslToRGB as r,figHsvToRGB as _J,figOklabToOklch as LJ,figOklabToRGB as HJ,figOklchToRGB as OJ,figRGBToHsl as e,figRGBToHsv as MJ,figRGBToOklab as JJ,figRGBToOklch as VJ}from"./fig-color.js";import"./fig.js";import"./fig-property.js";import{figConvertRGB as KJ,figHexToRGB as jJ}from"./fig-color.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 N(J,Z={},$=[]){let X=document.createElement(J);for(let[Q,W]of Object.entries(Z)){if(W===null||W===void 0||W===!1)continue;if(Q==="className")X.className=String(W);else if(W===!0)X.setAttribute(Q,"");else X.setAttribute(Q,String(W))}let Y=Array.isArray($)?$:[$];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 s(J){return N("fig-icon",{name:J})}function UJ(J,Z){return{position:Number.isFinite(Number(J?.position))?Math.max(0,Math.min(100,Number(J.position))):Z*100,color:g(J?.color),opacity:Number.isFinite(Number(J?.opacity))?Math.max(0,Math.min(100,Number(J.opacity))):100}}function g(J){let Z=String(J||"#888888").replace(/^#/,"").slice(0,6);return/^[0-9A-Fa-f]{6}$/.test(Z)?`#${Z.toUpperCase()}`:"#888888"}function d(J,Z){return Number(J?.position)===Number(Z?.position)&&g(J?.color)===g(Z?.color)&&Number(J?.opacity??100)===Number(Z?.opacity??100)}function m(J){if(Array.isArray(J))return J.map(m);if(!J||typeof J!=="object")return J;return Object.fromEntries(Object.keys(J).filter((Z)=>J[Z]!==void 0).sort().map((Z)=>[Z,m(J[Z])]))}function h(J,Z){return!!J&&!!Z&&JSON.stringify(m(J))===JSON.stringify(m(Z))}function b(J){return J.map((Z)=>({...Z}))}function qJ(J,Z){let $=J.length,X=Z.length,Y=Array.from({length:$+1},()=>Array(X+1).fill(0));for(let j=$-1;j>=0;j-=1)for(let U=X-1;U>=0;U-=1)Y[j][U]=d(J[j],Z[U])?Y[j+1][U+1]+1:Math.max(Y[j+1][U],Y[j][U+1]);let Q=[],W=0,K=0;while(W<$&&K<X)if(d(J[W],Z[K]))Q.push([W,K]),W+=1,K+=1;else if(Y[W+1][K]>=Y[W][K+1])W+=1;else K+=1;return Q}function E(J){let Z=J;if(typeof Z==="string")try{Z=JSON.parse(Z)}catch{Z={}}if(Z?.type==="gradient"&&Z.gradient)Z=Z.gradient;let $=Z&&typeof Z==="object"?Z:{},X=Array.isArray($.stops)?$.stops.map(UJ):y.stops.map((Y)=>({...Y}));return{...y,...$,type:["linear","radial","angular"].includes($.type)?$.type:"linear",angle:Number.isFinite(Number($.angle))?Number($.angle):y.angle,centerX:Number.isFinite(Number($.centerX))?Number($.centerX):y.centerX,centerY:Number.isFinite(Number($.centerY))?Number($.centerY):y.centerY,interpolationSpace:"srgb",stops:X.length>=2?X:y.stops.map((Y)=>({...Y}))}}function zJ(J,Z,$){let{r:X,g:Y,b:Q}=jJ(J);if($==="display-p3"){let W=KJ(X,Y,Q,{from:"srgb",to:"display-p3"});return`color(display-p3 ${+(W.r/255).toFixed(4)} ${+(W.g/255).toFixed(4)} ${+(W.b/255).toFixed(4)} / ${Z})`}return`rgba(${X}, ${Y}, ${Q}, ${Z})`}function v(J,{colorSpace:Z="srgb"}={}){let $=E(J),X=$.stops.map((Y)=>`${zJ(Y.color,(Y.opacity??100)/100,Z)} ${Y.position}%`).join(", ");switch($.type){case"radial":return`radial-gradient(circle at ${$.centerX}% ${$.centerY}%, ${X})`;case"angular":return`conic-gradient(from ${$.angle}deg, ${X})`;default:return`linear-gradient(${$.angle}deg, ${X})`}}class l extends HTMLElement{#Z=E();#X=!1;#K=!1;#U=null;#J=!1;#V=null;#q=null;#j=null;#L=null;#W=null;#_=null;#$=[];#z=[];#Y=null;#Q=!1;#k=null;static get observedAttributes(){return["value","color-space","disabled","overflow","show-rows"]}get value(){return structuredClone(this.#Z)}set value(J){this.setAttribute("value",typeof J==="string"?J:JSON.stringify(J??{}))}get cssValue(){return v(this.#Z,{colorSpace:this.getAttribute("color-space")||"srgb"})}get pickerAnchor(){return this.#U}set pickerAnchor(J){this.#U=J instanceof Element?J:null,this.#_J()}connectedCallback(){let J=E(this.getAttribute("value"));if(!h(this.#Z,J))this.#Z=J;this.#P(),this.#b()}attributeChangedCallback(J,Z,$){if(Z===$||this.#X)return;if(J==="value"){let X=E($);if(h(this.#Z,X)){if(this.#Q)this.#k=null;return}if(this.#Q){this.#k=X;return}this.#k=null,this.#Z=X}if(this.isConnected&&this.#J)this.#b()}disconnectedCallback(){if(this.#zJ({reconcile:!1}),this.#k)this.#Z=this.#k,this.#k=null,this.#E()}refreshLayout(){this.#q?.refreshLayout?.()}#F(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#O(){return this.getAttribute("overflow")==="visible"?"visible":"fade"}#M(){let J=Number(this.getAttribute("show-rows"));return Number.isFinite(J)&&J>0?J:null}#E(){this.#X=!0,this.setAttribute("value",JSON.stringify(this.#Z)),this.#X=!1}#G(){return{type:"gradient",gradient:this.value,css:this.cssValue}}#N(J){this.#E(),this.dispatchEvent(new CustomEvent(J,{bubbles:!0,composed:!0,detail:this.#G()}))}#P(){if(this.#J)return;this.#V=N("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",variant:"ghost"},N("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([W,K])=>N("fig-select-option",{value:W},K))));let J=(W,K,j)=>{let U=N("fig-button",{icon:!0,variant:"ghost",className:K,"aria-label":W},s(j));return{button:U,tooltip:N("fig-tooltip",{text:W},U)}},Z=J("Flip gradient","fig-fill-picker-gradient-flip","swap"),$=J("Rotate gradient","fig-fill-picker-gradient-rotate","rotate");this.#L=Z.button,this.#W=$.button;let X=N("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[this.#V,N("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[Z.tooltip,$.tooltip])]);this.#q=N("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large"});let Y=N("fig-preview",{className:"fig-fill-picker-gradient-preview"},this.#q);this.#_=N("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},s("add")),this.#j=document.createElement("fig-reorder");let Q=N("div",{className:"fig-fill-picker-gradient-stops"},[N("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[N("h3",{},"Stops"),this.#_]),N("div",{className:"fig-fill-picker-gradient-stops-list"},this.#j)]);this.replaceChildren(X,Y,Q),this.#V.addEventListener("change",this.#i),this.#V.addEventListener("optionhover",(W)=>W.stopPropagation()),this.#W.addEventListener("click",this.#g),this.#L.addEventListener("click",this.#C),this.#_.addEventListener("click",this.#t),this.#q.addEventListener("input",this.#m),this.#q.addEventListener("change",this.#m),this.#q.addEventListener("pointerdown",this.#e),this.#q.addEventListener("focusin",this.#e),this.#q.addEventListener("click",this.#e),this.#j.addEventListener("reorder",this.#d),this.addEventListener("pointerdown",this.#JJ,!0),this.addEventListener("lostpointercapture",this.#u,!0),this.#J=!0}#T(J){if((J.opacity??100)>=100)return J.color;return`${J.color}${Math.round((J.opacity??100)/100*255).toString(16).padStart(2,"0")}`}#f(J){let Z=J.querySelector(".fig-fill-picker-stop-position"),$=J.querySelector(".fig-fill-picker-stop-color"),X=this.#Z.stops[Number(J.dataset.index)]??{},Y=Number(Z?.value??Z?.getAttribute("value")??0),Q=$?.hexOpaque||(typeof $?.value==="string"?$.value:"")||$?.getAttribute("value");return{position:Number.isFinite(Y)?Math.max(0,Math.min(100,Y)):0,color:g(String(Q||X.color).slice(0,7)),opacity:$?.rgba?.a!==void 0?Math.round($.rgba.a*100):X.opacity??100}}#D(J){let Z=this.#$.indexOf(J);if(!Number.isInteger(Z)||!this.#Z.stops[Z])return;this.#Z.stops[Z]={...this.#Z.stops[Z],...this.#f(J)}}#S(){this.#$.forEach((J)=>this.#D(J))}#c(){let J=N("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",units:"%"}),Z=N("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right"}),$=N("fig-property",{className:"fig-fill-picker-gradient-stop-row",leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},N("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[J,Z]));J.addEventListener("input",(X)=>{X.stopPropagation(),this.#l($,"input")}),J.addEventListener("change",(X)=>{X.stopPropagation(),this.#l($,"change")});for(let X of["input","change"])Z.addEventListener(X,(Y)=>{Y.stopPropagation(),this.#l($,X)});return $.addEventListener("remove",(X)=>{X.stopPropagation(),this.#r($)}),$.addEventListener("pointerdown",(X)=>{if(X.button===0)this.#A($)}),$.addEventListener("click",()=>this.#A($)),$.addEventListener("focusin",()=>this.#A($)),$}#A(J){if(!J||!this.#$.includes(J))return;this.#Y=J,this.#$.forEach((Z)=>{Z.toggleAttribute("selected",Z===J)}),this.#y(),J.scrollIntoView({block:"nearest"})}#y(){let J=this.#$.indexOf(this.#Y);this.#q?.querySelectorAll(".fig-input-gradient-track fig-handle:not(.fig-input-gradient-ghost)").forEach((Z,$)=>{if($===J)Z.select?.();else Z.deselect?.()})}#x(){if(!this.#j)return;let J=this.#Z.stops,Z=this.#$.filter((Y)=>Y.isConnected),$;if(Z.length===J.length)$=[...Z];else{$=Array(J.length).fill(null);let Y=qJ(this.#z,J),Q=new Set;for(let[j,U]of Y){let L=Z[j];if(!L)continue;$[U]=L,Q.add(j)}let W=Z.filter((j,U)=>!Q.has(U));$=$.map((j)=>j??W.shift()??this.#c());let K=new Set($);Z.forEach((j)=>{if(!K.has(j))j.remove()})}let X=this.#j.firstElementChild;for(let Y of $)if(Y===X)X=X.nextElementSibling;else this.#j.insertBefore(Y,X);if(this.#$=$,this.#$.forEach((Y,Q)=>{this.#h(Y,J[Q],Q)}),!this.#$.includes(this.#Y))this.#Y=this.#$[0]??null;this.#$.forEach((Y)=>{Y.toggleAttribute("selected",Y===this.#Y)}),this.#y(),this.#z=b(J),this.#_J()}#h(J,Z,$){let X=this.#F();J.dataset.index=String($);let Y=J.querySelector(".fig-fill-picker-stop-position"),Q=J.querySelector(".fig-fill-picker-stop-color");this.#s(Y,Z.position),this.#s(Q,this.#T(Z)),Y?.toggleAttribute("disabled",X),Q?.toggleAttribute("disabled",X);let W=J.querySelector(':scope > [data-fig-property-action="remove"]');if(W)W.classList.add("fig-fill-picker-stop-remove"),W.setAttribute("aria-label","Remove gradient stop"),W.toggleAttribute("disabled",X||this.#Z.stops.length<=2)}#s(J,Z){if(!J)return;let $=String(Z);if(J.getAttribute("value")===$)return;let X=J.contains(document.activeElement)?document.activeElement:null,Y=X&&"selectionStart"in X&&typeof X.selectionStart==="number"?{start:X.selectionStart,end:X.selectionEnd,direction:X.selectionDirection}:null;if(J.setAttribute("value",$),Y&&X===document.activeElement)try{X.setSelectionRange(Y.start,Y.end,Y.direction)}catch{}}#b(){if(!this.#J)return;let J=this.#F(),Z=this.#O()==="fade";this.#j.classList.toggle("fig-overflow-fade",Z);let $=this.#M();if($===null)this.#j.style.removeProperty("--fig-gradient-editor-overflow-show-rows");else this.#j.style.setProperty("--fig-gradient-editor-overflow-show-rows",String($));this.#s(this.#V,this.#Z.type),this.#V.toggleAttribute("disabled",J),this.#L.toggleAttribute("disabled",J),this.#W.toggleAttribute("disabled",J),this.#_.toggleAttribute("disabled",J),this.#j.toggleAttribute("disabled",J),this.#q.toggleAttribute("disabled",J);let X=E(this.#q.value);if(!h(X,this.#Z))this.#K=!0,this.#q.value={type:"gradient",gradient:this.#Z},this.#K=!1;this.#x()}#R(J,Z,{focusIndex:$=null}={}){let X=E(J),Y=!h(this.#Z,X);if(Y)this.#Z=X,this.#b();if(Z==="change"||Y)this.#N(Z);if($!==null)this.#w($)}#w(J){requestAnimationFrame(()=>{if(!this.isConnected)return;let Z=this.querySelector(`.fig-fill-picker-gradient-stop-row[data-index="${J}"]`),$=Z?.querySelector(".fig-fill-picker-stop-color fig-input-text input");this.#A(Z),$?.focus(),$?.select()})}#i=(J)=>{J.stopPropagation();let Z=typeof J.detail==="string"?J.detail:J.target?.value;if(!["linear","radial","angular"].includes(Z))return;this.#R({...this.#Z,type:Z},"input")};#g=()=>{this.#R({...this.#Z,angle:(Number(this.#Z.angle)+90)%360},"input")};#C=()=>{let J=this.#Z.stops.map((Z)=>({...Z,position:100-Z.position})).sort((Z,$)=>Z.position-$.position);this.#R({...this.#Z,stops:J},"input")};#t=()=>{let J=b(this.#Z.stops),Z=Math.max(0,this.#$.indexOf(this.#Y)),$=Number(J[Z]?.position)||0,X=Number(J[Z+1]?.position??$),Y={position:($+X)/2,color:"#888888",opacity:100},Q=Z+1;J.splice(Q,0,Y),this.#R({...this.#Z,stops:J},"input",{focusIndex:Q})};#m=(J)=>{if(J.stopPropagation(),this.#K||!J.detail?.gradient)return;this.#R({...this.#Z,...J.detail.gradient},J.type)};#e=(J)=>{let Z=J.target?.closest?.("fig-handle:not(.fig-input-gradient-ghost)"),$=Number(Z?.dataset.stopIndex);if(!Number.isInteger($))return;this.#A(this.#$[$])};#d=(J)=>{J.stopPropagation();let{oldIndex:Z,newIndex:$}=J.detail??{};if(!Number.isInteger(Z)||!Number.isInteger($)||Z===$)return;this.#S();let X=b(this.#Z.stops),[Y]=X.splice(Z,1);X.splice($,0,Y);let[Q]=this.#$.splice(Z,1);this.#$.splice($,0,Q),this.#R({...this.#Z,stops:X},"input")};#l(J,Z){let $=this.#$.indexOf(J);if($<0)return;let X=b(this.#Z.stops);X[$]={...X[$],...this.#f(J)},this.#R({...this.#Z,stops:X},Z)}#r(J){if(this.#Z.stops.length<=2)return;let Z=this.#$.indexOf(J);if(Z<0)return;if(J.contains(document.activeElement))this.#_.focus();if(J===this.#Y)this.#Y=this.#$[Z+1]??this.#$[Z-1]??null;let $=b(this.#Z.stops);$.splice(Z,1),this.#R({...this.#Z,stops:$},"input")}#JJ=(J)=>{if(J.button!==0||this.#Q)return;this.#Q=!0,window.addEventListener("pointerup",this.#u,!0),window.addEventListener("pointercancel",this.#u,!0),window.addEventListener("blur",this.#u,!0)};#u=()=>{window.removeEventListener("pointerup",this.#u,!0),window.removeEventListener("pointercancel",this.#u,!0),window.removeEventListener("blur",this.#u,!0),queueMicrotask(()=>this.#zJ({reconcile:!0}))};#zJ({reconcile:J}){window.removeEventListener("pointerup",this.#u,!0),window.removeEventListener("pointercancel",this.#u,!0),window.removeEventListener("blur",this.#u,!0);let Z=this.#Q;if(this.#Q=!1,!J||!Z||!this.#k)return;let $=this.#k;this.#k=null,this.#Z=$,this.#E(),this.#b()}#_J(){requestAnimationFrame(()=>{if(!this.isConnected)return;this.querySelectorAll(".fig-fill-picker-stop-color").forEach((J)=>{let Z=J.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#U})})}}if(!customElements.get("fig-gradient-editor"))customElements.define("fig-gradient-editor",l);function A(J,Z){if(!customElements.get(J))customElements.define(J,Z)}function F(J,Z){return J.hasAttribute(Z)&&J.getAttribute(Z)!=="false"}function kJ(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function p(J){if(!J)return"";return`url("${String(J).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function BJ(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 I(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 ZJ(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 GJ(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 _(J,Z,$){let X=document.createElement(J);return GJ(X,Z),ZJ(X,$)}class $J extends HTMLElement{#Z={};static get observedAttributes(){return["x","y","units"]}connectedCallback(){this.#X(),this.#K()}attributeChangedCallback(J,Z,$){if(Z===$||!this.isConnected)return;if(J==="units")this.#J();else this.#U(J)}get value(){return{x:this.#V("x"),y:this.#V("y")}}#X(){if(this.#Z.x&&this.#Z.y)return;let J=(Z)=>{let $=Z.toUpperCase(),X=_("fig-input-number",{full:!0,"aria-label":`${$} coordinate`,"data-axis":Z},_("span",{slot:"prepend"},$));return X.addEventListener("input",(Y)=>this.#q(Z,Y)),X.addEventListener("change",(Y)=>this.#q(Z,Y)),this.#Z[Z]=X,X};this.replaceChildren(_("fig-input-combo",{full:!0},["x","y"].map(J)))}#K(){this.#U("x"),this.#U("y"),this.#J()}#U(J){let Z=this.#Z[J];if(!Z)return;let $=String(this.#V(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)}#V(J){let Z=Number(this.getAttribute(J));return Number.isFinite(Z)?Z:0}#q(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}))}}A("fig-input-point",$J);var NJ="http://www.w3.org/2000/svg";function o(J,Z,$){let X=document.createElementNS(NJ,J);for(let[Y,Q]of Object.entries(Z||{})){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 ZJ(X,$)}function fJ({owner:J,onStart:Z,onEnd:$,startClass:X="",endClass:Y="",chevronClass:Q="",startLabel:W="Scroll back",endLabel:K="Scroll forward"}={}){let j=(U,L)=>{let q=document.createElement("button");if(q.type="button",q.className=["fig-overflow",`fig-overflow-${U}`,U==="start"?X:Y].filter(Boolean).join(" "),q.dataset.figOverflow=U,J)q.setAttribute(`data-fig-${J}-nav`,U);return q.setAttribute("tabindex","-1"),q.setAttribute("aria-label",U==="start"?W:K),q.appendChild(I("chevron",{size:"small",className:["fig-overflow-chevron",Q].filter(Boolean).join(" ")})),q.addEventListener("click",(z)=>{z.preventDefault(),z.stopPropagation(),L?.(z)}),q};return{start:j("start",Z),end:j("end",$)}}function c(J,Z,$="x",X=2){if(!J||!Z)return!1;let Y=$==="x",Q=Y?Z.scrollWidth:Z.scrollHeight,W=Y?Z.clientWidth:Z.clientHeight,K=Y?Z.scrollLeft:Z.scrollTop,j=Q-W>X,U=!j||K<=X,L=!j||K+W>=Q-X;return J.classList.toggle("overflow-start",!U),J.classList.toggle("overflow-end",!L),j}function a(J,Z="x",$=1){if(!J)return;let X=Z==="x",Q=(X?J.clientWidth:J.clientHeight)*0.8*$;J.scrollBy({[X?"left":"top"]:Q,behavior:"smooth"})}function FJ(J,Z,$="y",X="auto"){if(!J||!Z||!J.contains(Z))return;requestAnimationFrame(()=>{if(!J.isConnected||!Z.isConnected)return;let Y=$==="x",Q=Y?J.scrollWidth:J.scrollHeight,W=Y?J.clientWidth:J.clientHeight;if(Q<=W+1){c(J,J,$);return}let K=Z.getBoundingClientRect(),j=J.getBoundingClientRect(),U=Y?J.scrollLeft:J.scrollTop,L=(Y?K.left-j.left:K.top-j.top)+U,q=Y?K.width:K.height,z=Q-W,O=Math.max(0,Math.min(L+q/2-W/2,z));J.scrollTo({[Y?"left":"top"]:O,behavior:X}),c(J,J,$)})}function TJ(J){let Z=J||"";if(Z.startsWith("["))try{let X=JSON.parse(Z);return Array.isArray(X)?X:[]}catch{}let $=Z.includes(`
 `)?`
-`:",";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=`
+`:",";return Z.split($).map((X)=>X.trim()).filter(Boolean)}function DJ(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function CJ(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}function XJ(J){let Z=J.querySelector(":scope > fig-icon[data-fig-select-checkmark]");if(Z)return Z;return Z=I("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 YJ 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 F(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return F(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");XJ(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")}}A("fig-select-option",YJ);class QJ extends HTMLElement{#Z=null;#X=null;#K=null;#U=null;#J=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#V(),this.#q(),this.addEventListener("scroll",this.#J,{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.#J),this.#K?.disconnect(),this.#K=null,this.#U?.disconnect(),this.#U=null,this.#L()}syncOverflow(){return c(this,this,"y")}scrollToOption(J,Z="auto"){FJ(this,J,"y",Z)}#V(){let J=this.querySelector(":scope > fig-chooser");if(!J)return;while(J.firstChild)this.insertBefore(J.firstChild,J);J.remove()}#q(){if(this.#Z&&this.#X&&this.contains(this.#Z)&&this.contains(this.#X)){this.#j();return}this.#L();let J=fJ({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>a(this,"y",-1),onEnd:()=>a(this,"y",1)});this.#Z=J.start,this.#X=J.end,this.#j()}#j(){if(this.firstElementChild!==this.#Z)this.prepend(this.#Z);if(this.lastElementChild!==this.#X)this.append(this.#X)}#L(){this.#Z?.remove(),this.#X?.remove(),this.#Z=null,this.#X=null,this.classList.remove("overflow-start","overflow-end")}}A("fig-select-options",QJ);class WJ extends HTMLElement{#Z=null;#X=null;#K=null;#U=null;#J=null;#V=null;#q=null;#j=null;#L=null;#W=!1;#_=-1;#$=!1;#z=!1;#Y=null;#Q=!1;#k=null;#F=null;#O=!1;#M=null;#E=this.#UJ.bind(this);#G=()=>{queueMicrotask(()=>{if(!this.#Z?.matches(":focus-within"))return;this.toggleAttribute("data-focus-visible",this.#Z.hasAttribute("data-focus-visible")||this.#Z.matches(":focus-visible"))})};#N=()=>this.removeAttribute("data-focus-visible");#P=this.#hJ.bind(this);#T=this.#MJ.bind(this);#f=this.#gJ.bind(this);#D=this.#mJ.bind(this);#S=this.#HJ.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 F(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}get menuAnchor(){return this.#M??this.getAttribute("menu-anchor")}set menuAnchor(J){if(J instanceof Element){if(this.hasAttribute("menu-anchor"))this.removeAttribute("menu-anchor");this.#M=J}else if(typeof J==="string"&&J.trim())this.#M=null,this.setAttribute("menu-anchor",J);else this.#M=null,this.removeAttribute("menu-anchor");this.#d()}connectedCallback(){if(!this.#W)this.#R();if(this.#y(),this.#b(),this.#jJ(),this.#c(),this.#OJ(),this.#$J(),this.#bJ(),this.#ZJ(),this.open)this.#TJ()}disconnectedCallback(){this.#wJ(),document.removeEventListener("keydown",this.#f,!0),this.#L?.disconnect(),this.#L=null}attributeChangedCallback(J,Z,$){if(Z===$||!this.#W)return;if(J==="options"){this.#b(),this.#$J();return}if(J==="value"||J==="label"||J==="aria-label"){this.#$J();return}if(J==="disabled"){this.#jJ();return}if(J==="size"){this.#c();return}if(J==="open"){if($===null||$==="false")this.#RJ();else this.#TJ();return}if(J==="menu-anchor"){this.#M=null,this.#d();return}if(J==="position"||J==="offset"||J==="closedby"){if(this.#OJ(),this.open)this.#I()}}focus(J){this.#Z?.focus(J)}blur(){this.#Z?.blur()}#c(){if(!this.#Z)return;let J=this.getAttribute("size");if(J)this.#Z.setAttribute("size",J);else this.#Z.removeAttribute("size")}#A(J){return J?.nodeType===1&&(J.tagName==="FIG-SELECT-OPTION"||J.tagName==="FIG-SEPARATOR"||J.tagName==="FIG-SELECT-OPTIONS")}#y(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#x(){let Z=(this.#j?.assignedElements({flatten:!0})??[]).find(($)=>$.tagName==="FIG-SELECT-OPTIONS");if(Z)return Z;return this.querySelector(":scope > fig-select-options")}#h(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#s(){let J=this.#x();if(J){if(!J.hasAttribute("slot"))J.setAttribute("slot","panel");return J}return J=document.createElement("fig-select-options"),J.setAttribute("slot","panel"),J.setAttribute("data-fig-generated",""),this.appendChild(J),J}#b(){if(this.#h())return;let J=this.hasAttribute("options"),Z=J?this.#s():this.#x();if(!Z)return;this.#O=!0;try{for(let Y of Z.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))Y.remove();if(!J)return;let $=TJ(this.getAttribute("options")),X=Z.querySelector(":scope > .fig-overflow-end");for(let Y of $){let Q=document.createElement("fig-select-option");if(Q.setAttribute("data-fig-generated",""),Q.setAttribute("value",DJ(Y)),Q.textContent=CJ(Y),X)Z.insertBefore(Q,X);else Z.appendChild(Q)}}finally{this.#O=!1}}#R(){this.#W=!0;let J=this.attachShadow({mode:"open"}),Z=document.createElement("style");Z.textContent=`
         :host {
           display: inline-flex;
           position: relative;
@@ -105,4 +105,4 @@ import"./fig.js";import"./fig-property.js";import"./fig.js";import"./fig-propert
           min-height: 0;
           max-height: inherit;
         }
-    `,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);
+    `,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 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 W=document.createElement("span");W.className="fig-select-label",W.setAttribute("part","label");let K=document.createElement("slot");K.setAttribute("name","trigger"),K.hidden=!0,$.append(X,W,K);let j=document.createElement("dialog",{is:"fig-popup"});if(j.setAttribute("is","fig-popup"),j.setAttribute("part","listbox"),j.setAttribute("theme","menu"),j.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)j.setAttribute("popover","manual");j.id=kJ(),$.setAttribute("aria-controls",j.id);let U=document.createElement("slot");if(U.setAttribute("name","panel"),j.appendChild(U),J.append($,j),this.#Z=$,this.#K=X,this.#U=Y,this.#J=Q,this.#V=K,this.#q=W,this.#X=j,this.#j=U,this.#d(),this.#y(),this.#w(),!this.hasAttribute("value")){let L=this.#QJ().find((q)=>F(q,"selected"));if(L)this.setAttribute("value",L.value)}}#w(){if(!this.#X||this.#z)return;if(typeof this.#X.positionPopup!=="function")return;this.#Y=this.#X.positionPopup.bind(this.#X),this.#X.positionPopup=()=>{if(!this.open){this.#Y?.();return}this.#I()},this.#z=!0}#i(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()}#g(){if(typeof this.#X?.parseViewportMargins==="function")return this.#X.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#C(){if(this.#M?.isConnected)return this.#M;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}#t(){return this.#C()||this.#Z}#m(){return Boolean(this.#C())}#e(){return!this.#LJ()&&this.#m()}#d(){if(!this.#X)return;if(this.#X.anchor=this.#t(),this.#XJ(),!this.open)return;this.#Q=!1,this.#k=null,this.#F=null,this.#X.setupObservers?.(),this.#X.queueReposition?.()}#l(){let J=this.#q?.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.#K?.getBoundingClientRect()??null}#r(){let Z=(this.#e()?this.#C():null)?.getBoundingClientRect()??this.#l();if(!Z)return null;return{x:Z.x,y:Z.y,width:Z.width,height:Z.height}}#JJ(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#u(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)>$}#zJ(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)>$}#_J(){if(!this.#Q)return!1;let J=this.#u(this.#k,this.#r()),Z=this.#zJ(this.#F,this.#JJ());return!J&&!Z}#PJ(){this.#k=this.#r(),this.#F=this.#JJ()}#LJ(){let J=this.getAttribute("position");return Boolean(J&&J.trim())}#IJ(){if(!this.#X)return;this.#X.style.removeProperty("left"),this.#X.style.removeProperty("top"),this.#X.style.removeProperty("right"),this.#X.style.removeProperty("bottom")}#I(){if(this.#LJ()){if(this.#Q=!1,this.#k=null,this.#F=null,this.#XJ(),this.#IJ(),this.#xJ())return;this.#Y?.(),this.#fJ();return}this.#KJ()}#xJ(){let J=this.#X,Z=this.#C();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:Y,horizontal:Q,shorthand:W}=J.parsePosition(),K=J.parseOffset(),{left:j,top:U}=J.computeCoords(X,$,Y,Q,K,W),L=this.#g();if(typeof J.clampToViewport==="function")({left:j,top:U}=J.clampToViewport({left:j,top:U},$,L));return J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(j)}px`,"important"),J.style.setProperty("top",`${Math.round(U)}px`,"important"),!0}#fJ(){let J=this.#X;if(!J||typeof J.clampToViewport!=="function")return;let Z=J.getBoundingClientRect();if(!Z.width||!Z.height)return;let $=this.#g(),{left:X,top:Y}=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(Y)}px`,"important")}#KJ(){if(this.#_J()){this.#fJ();return}let J=this.#X,Z=this.#q;if(!J||!Z){this.#Y?.();return}let $=this.#QJ(),X=$.find((M)=>this.#v(M)===this.value)||$[0];if(!X){this.#Y?.();return}let Y=this.#e()?this.#C():null;if(Y)this.#XJ();this.#Y?.();let Q=J.getBoundingClientRect(),W=X.getBoundingClientRect();if(!Q.width||!Q.height||!W.height)return;let K,j,U;if(Y){let M=Y.getBoundingClientRect();U=M,K=M.left+(M.width-Q.width)/2,j=M.top+(M.height-W.height)/2-(W.top-Q.top)}else{let M=this.#l(),G=this.#i(X);if(!M?.width||!G)return;U=M;let B=G.left-Q.left,f=G.top-Q.top;K=F(this,"full")?this.getBoundingClientRect().left:M.left-B,j=M.top-f}let L=this.#g();if(typeof J.clampToViewport==="function")({left:K,top:j}=J.clampToViewport({left:K,top:j},Q,L));else{let{left:M,top:G}=L,B=window.innerWidth-Q.width-L.right,f=window.innerHeight-Q.height-L.bottom;K=Math.min(Math.max(K,M),Math.max(M,B)),j=Math.min(Math.max(j,G),Math.max(G,f))}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(j)}px`,"important");let q=this.#x(),z=X.getBoundingClientRect(),O=Y?null:this.#i(X);if(q&&q.scrollHeight>q.clientHeight+1){let M=Y?z.top+z.height/2-(U.top+U.height/2):O?O.top-U.top:0;if(Math.abs(M)>0.5)q.scrollTop+=M;q.syncOverflow?.()}if(this.#Q||this.open)this.#PJ()}#bJ(){this.#Z?.addEventListener("click",this.#E),this.#Z?.addEventListener("keydown",this.#f),this.#Z?.addEventListener("focus",this.#G),this.#Z?.addEventListener("blur",this.#N),this.addEventListener("click",this.#P),this.addEventListener("pointerover",this.#T),this.#X?.addEventListener("keydown",this.#f),this.#X?.addEventListener("close",this.#D),this.#j?.addEventListener("slotchange",this.#S)}#wJ(){this.#Z?.removeEventListener("click",this.#E),this.#Z?.removeEventListener("keydown",this.#f),this.#Z?.removeEventListener("focus",this.#G),this.#Z?.removeEventListener("blur",this.#N),this.removeAttribute("data-focus-visible"),this.removeEventListener("click",this.#P),this.removeEventListener("pointerover",this.#T),this.#X?.removeEventListener("keydown",this.#f),this.#X?.removeEventListener("close",this.#D),this.#j?.removeEventListener("slotchange",this.#S)}#HJ(){this.#y(),this.#$J()}#ZJ(){if(this.#L)return;this.#L=new MutationObserver((J)=>{if(this.#$||this.#O)return;let Z=!1;for(let $ of J){if($.type==="childList"){if([...$.addedNodes].some((X)=>this.#A(X))||[...$.removedNodes].some((X)=>this.#A(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(F($.target,"selected")){let X=this.#v($.target);if((this.getAttribute("value")??"")!==X)this.setAttribute("value",X),Z=!0}else if(this.#v($.target)===(this.getAttribute("value")??""))Z=!0}}if($.type==="characterData"&&$.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Z=!0}if(Z)this.#$J()}),this.#L.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#QJ({enabledOnly:J=!1}={}){let Z=this.#x(),$=Z?Array.from(Z.querySelectorAll(":scope > fig-select-option")):[];if(!J)return $;return $.filter((X)=>!F(X,"disabled"))}#v(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()}#AJ(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 W=X.textContent?.trim();if(W)$.push(W);continue}if(!(X instanceof Element))continue;let Y=X.getAttribute("slot");if(Y==="prepend"||Y==="append")continue;let Q=X.textContent?.trim();if(Q)$.push(Q)}if($.length)return $.join(" ").trim();return(J.textContent||"").trim()}#B(J){if(!this.#K||!this.#U||!this.#J||!this.#V)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])'),Y=J?.querySelector?.(':scope > [slot="prepend"]:not([data-fig-select-checkmark])');if(this.#V.hidden=!Z,this.#q.hidden=Boolean(Z),this.#K.hidden=Boolean(Z),Z){$?.remove(),this.#K.classList.remove("has-content"),this.#U.hidden=!0,this.#J.replaceChildren();return}if(!X&&Y?.childNodes.length){let W=$||document.createElement("span");if(W.setAttribute("slot","prepend-trigger"),W.setAttribute("data-fig-select-generated",""),W.replaceChildren(...Array.from(Y.childNodes,(K)=>K.cloneNode(!0))),W.parentElement!==this)this.append(W);X=W}else if(X)$?.remove();else $?.remove();let Q=Boolean(X);if(this.#K.classList.toggle("has-content",Q),this.#U.hidden=!X,this.#J.hidden=Boolean(X),X){this.#J.replaceChildren();return}this.#J.replaceChildren()}#OJ(){if(!this.#X)return;this.#X.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#X.setAttribute("offset",J);else this.#X.removeAttribute("offset");let Z=this.getAttribute("closedby");if(Z)this.#X.setAttribute("closedby",Z);else this.#X.removeAttribute("closedby")}#jJ(){let J=F(this,"disabled");if(this.#Z)if(J)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled");if(J&&this.open)this.open=!1}#uJ(J){if(!J.length)return null;let Z=J.find(($)=>F($,"selected"));if(Z&&!F(Z,"disabled"))return Z;return J.find(($)=>!F($,"disabled"))||J[0]||null}#FJ(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#$J(){if(this.#$)return;this.#$=!0;try{let J=this.#QJ(),Z=this.hasAttribute("value"),$=Z?this.getAttribute("value"):null,X=Z?J.find((K)=>this.#v(K)===$):null,Y=!1;if(!X){if(Z){if(!J.length){if(this.#q)this.#q.textContent=$||this.getAttribute("label")||"";return}if(X=this.#uJ(J),X){let K=this.#v(X);if($!==K)this.setAttribute("value",K),Y=!0}else this.removeAttribute("value"),Y=!0}else if(X=J.find((K)=>F(K,"selected")),X)this.setAttribute("value",this.#v(X)),Y=!0}for(let K of J){XJ(K);let j=K===X;if(K.setAttribute("aria-selected",j?"true":"false"),j)K.setAttribute("selected","");else K.removeAttribute("selected")}let Q=X&&this.#AJ(X)||this.getAttribute("label")||"";if(this.#q)this.#q.textContent=Q;this.#B(X);let W=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#Z?.setAttribute("aria-label",W),this.#x()?.syncOverflow?.(),Y)this.#FJ(this.getAttribute("value")??"")}finally{this.#$=!1}}#UJ(J){if(F(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Z=!this.open;if(Z)this.#d();this.open=Z}#hJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(F($,"disabled"))return;this.#vJ($)}#MJ(J){let $=(typeof J.composedPath==="function"?J.composedPath():[]).find((X)=>X?.tagName==="FIG-SELECT-OPTION");if(!$||!this.contains($))return;if(F($,"disabled"))return;if(J.relatedTarget instanceof Node&&$.contains(J.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#v($),bubbles:!0,composed:!0}))}#gJ(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#X?.matches?.(":open")??!1))){if(this.#Z?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" "))J.preventDefault(),this.#d(),this.open=!0,requestAnimationFrame(()=>{let Y=this.#QJ({enabledOnly:!0}).findIndex((Q)=>this.#v(Q)===this.value);this.#a(Y>=0?Y:0)});return}let $=this.#QJ({enabledOnly:!0});if(!$.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#p(),this.#a(this.#_+1,!0);break;case"ArrowUp":J.preventDefault(),this.#p(),this.#a(this.#_-1,!0);break;case"Home":J.preventDefault(),this.#a(0,!0);break;case"End":J.preventDefault(),this.#a($.length-1,!0);break;case"Escape":J.preventDefault(),this.open=!1,this.#Z?.focus();break;case"Enter":case" ":{this.#p();let X=$[this.#_];if(!X)return;J.preventDefault(),this.#vJ(X);break}}}#mJ(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Z?.setAttribute("aria-expanded","false"),this.#Z?.focus(),this.#_=-1}#vJ(J){let Z=this.#v(J);this.setAttribute("value",Z),this.#$J(),this.#FJ(Z),this.open=!1}#o(){return this.#QJ({enabledOnly:!0})}#p(){let J=this.#o();if(!J.length){this.#_=-1;return}let Z=J.find((X)=>X===document.activeElement),$=Z?J.indexOf(Z):-1;this.#_=$>=0?$:this.#_}#a(J,Z=!1){let $=this.#o();if(!$.length)return;let X=(J%$.length+$.length)%$.length,Y=$[X],Q=document.activeElement!==Y;if(this.#_=X,Y?.focus(),Z&&Q)this.dispatchEvent(new CustomEvent("optionfocus",{detail:this.#v(Y),bubbles:!0,composed:!0}))}#XJ(){if(!this.#X||!this.#Z)return;let J=Math.ceil(this.getBoundingClientRect().width),Z=Math.ceil(this.#Z.getBoundingClientRect().width),$=Math.max(J,Z,96),X=this.#m()?this.#C():null,Y=window.visualViewport?.width??window.innerWidth,Q=window.visualViewport?.height??window.innerHeight,W=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,K=Math.max(0,Math.min(Math.floor(20*W),Math.floor(Y-16))),j=Math.max(0,Math.floor(Q-16));if(this.#X.style.setProperty("box-sizing","border-box","important"),this.#X.style.setProperty("padding","0","important"),this.#X.style.setProperty("border","0","important"),this.#X.style.setProperty("margin","0","important"),X){let L=X.getBoundingClientRect().width;this.#X.style.setProperty("width","max-content","important"),this.#X.style.setProperty("min-width","0","important"),this.#X.style.setProperty("max-width",`${K}px`,"important");let q=this.#X.getBoundingClientRect().width,z=Math.min(K,Math.max($,q)),O=Math.max(L,z);this.#X.style.setProperty("width",`${O}px`,"important"),this.#X.style.setProperty("min-width",`${O}px`,"important"),this.#X.style.setProperty("max-width",`${O}px`,"important")}else this.#X.style.setProperty("width","max-content","important"),this.#X.style.setProperty("min-width",`${$}px`,"important"),this.#X.style.setProperty("max-width",`${K}px`,"important");this.#X.style.setProperty("max-height",`${j}px`,"important"),this.#X.style.setProperty("height","max-content","important"),this.#X.style.setProperty("overflow","hidden","important");let U=this.#X.getBoundingClientRect();if(U.height>j)this.#X.style.setProperty("height",`${j}px`,"important");if(!X&&U.width>K)this.#X.style.setProperty("width",`${K}px`,"important")}#TJ(){if(!this.#X||F(this,"disabled"))return;this.#d(),this.#w(),this.#Q=!1,this.#k=null,this.#F=null,this.#$J(),this.#XJ(),this.#X.open=!0,document.addEventListener("keydown",this.#f,!0),this.#Z?.setAttribute("aria-expanded","true"),this.#_=-1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#XJ(),this.#I(),this.#XJ(),this.#fJ();let J=this.#x(),$=this.#o().findIndex((X)=>this.#v(X)===this.value);if($>=0)this.#a($);else if(this.#Z?.hasAttribute("data-focus-visible")||this.#Z?.matches?.(":focus-visible"))this.#a(0);if(J?.syncOverflow?.(),!this.#LJ())this.#Q=!0,this.#PJ()})})}#RJ(){if(!this.#X)return;this.#Q=!1,this.#k=null,this.#F=null,document.removeEventListener("keydown",this.#f,!0),this.#X.open=!1,this.#Z?.setAttribute("aria-expanded","false")}}A("fig-select",WJ);var PJ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],AJ=["shorter","longer","increasing","decreasing"],x=new Set(["oklch","hsl"]);function C(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase();if(!PJ.includes($))$="srgb";Z.interpolationSpace=$;let X=String(Z.hueInterpolation??"shorter").toLowerCase();return Z.hueInterpolation=AJ.includes(X)?X:"shorter",Z}function u(J){let Z=C(J);return Z.interpolationSpace="srgb",delete Z.hueInterpolation,Z}function w(J){let Z=u(J),$={...Z,interpolationSpace:Z.interpolationSpace};if(x.has(Z.interpolationSpace))$.hueInterpolation=Z.hueInterpolation;else delete $.hueInterpolation;return $}function RJ(J){let Z=C(J);if(Z.interpolationSpace==="srgb")return"";if(x.has(Z.interpolationSpace))return`in ${Z.interpolationSpace} ${Z.hueInterpolation} hue`;return`in ${Z.interpolationSpace}`}function n(J){let Z=C(J);if(x.has(Z.interpolationSpace))return`${Z.interpolationSpace}-${Z.hueInterpolation||"shorter"}`;return Z.interpolationSpace}function S(J){let Z=String(J??"");for(let $ of x){let X=`${$}-`;if(Z.startsWith(X))return{interpolationSpace:$,hueInterpolation:Z.slice(X.length)||"shorter"}}return{interpolationSpace:Z||"srgb",hueInterpolation:"shorter"}}var yJ=0;class P 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#X(J){let Z=P.#Z,$=Z.find((K)=>K.value===J);if($)return $;let X=S(J),Y=Z.find((K)=>K.space===X.interpolationSpace),Q=Y?.subtitle.split(" ")[0]??X.interpolationSpace.toUpperCase(),W=X.hueInterpolation;return{value:J,space:X.interpolationSpace,title:Y?.title??"Custom",subtitle:x.has(X.interpolationSpace)?`${Q} ${W.charAt(0).toUpperCase()}${W.slice(1)}`:Q}}#K=null;#U=null;#J=null;#V=`fig-fill-picker-dialog-${++yJ}`;#q="solid";anchorElement=null;#j="solid";#L="srgb";#W={h:0,s:0,v:85,a:1};#_="hex";#$={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};#Y={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#Q={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#k=null;#F=!1;#O=null;#M={};#E={};#G=null;#N=null;#P=null;#T=null;#f=!1;#D=!1;#S=null;#c=null;#A=null;#y=null;#x=null;#h=0;#s=null;#b=null;#R=new Set;#w=new Set;#i=null;#g=null;constructor(){super();this.#s=this.#QJ.bind(this),this.#b=this.#v.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.#I(()=>{this.#wJ(),this.#AJ(),this.#B(),this.#aJ()})}disconnectedCallback(){if(this.#FJ({stopWebcam:!0}),this.#xJ(),this.#fJ(),this.#KJ(this.#U))this.#U.removeAttribute("selected");if(this.#K)this.#K.removeEventListener("click",this.#s),this.#K.removeEventListener("keydown",this.#b);this.#K=null,this.#U=null}#C(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#t(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#m(){return this.#j==="webcam"&&this.#t()==="live"&&this.#Q.live!==!1}#e(){return{live:this.#t()==="live"&&this.#Q.live!==!1,snapshot:this.#Q.snapshot??null,deviceId:this.#Q.deviceId??null,scaleMode:this.#Q.scaleMode||"fill",scale:this.#Q.scale??50,opacity:this.#Q.opacity??1}}#d(){let J=this.#Y.url??null;return{url:J,poster:this.#Y.poster??null,scaleMode:this.#Y.scaleMode||"fill",scale:this.#Y.scale??50,opacity:this.#Y.opacity??1,...J?{}:{missing:!0}}}#l(J){if(J.webcam&&typeof J.webcam==="object"){let{stream:Z,snapshot:$,...X}=J.webcam;if(Object.assign(this.#Q,X),typeof $==="string"&&$)this.#Q.snapshot=$;return}if(J.type==="webcam"&&J.image){if(J.image.url!=null)this.#Q.snapshot=J.image.url;if(J.image.scaleMode)this.#Q.scaleMode=J.image.scaleMode;if(J.image.scale!=null)this.#Q.scale=J.image.scale}}#r(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#Q.stream,deviceId:this.#Q.deviceId??null}}))}get webcamStream(){return this.#Q.stream}releaseWebcam(){this.#UJ()}#JJ(J){if(!J)return null;if(this.#Q.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#Q.snapshot),this.#w.delete(this.#Q.snapshot);return this.#Q.snapshot=URL.createObjectURL(J),this.#w.add(this.#Q.snapshot),this.#Q.snapshot}#u(J,Z,$){if(typeof J.getImageData!=="function")return!1;let X;try{X=J.getImageData(0,0,Z,$).data}catch{return!1}let Y=Math.max(1,Math.floor(Z*$/256)),Q=0,W=0,K=0;for(let j=0;j<X.length;j+=Y*4){let U=Math.max(X[j],X[j+1],X[j+2]);if(Q=Math.max(Q,U),K+=1,U>24)W+=1}if(!K)return!0;return Q<=40||W/K<0.04}async#zJ(J){let Z=[],$=this.#Q.stream?.getVideoTracks?.()?.[0];if($&&typeof ImageCapture==="function")try{if(this.#O?.track!==$)this.#O=new ImageCapture($);Z.push(await this.#O.grabFrame())}catch{this.#O=null}if(typeof createImageBitmap==="function")try{Z.push(await createImageBitmap(J))}catch{}return Z.push(J),Z.filter(Boolean)}async#_J(J,Z,$,X){let Y=await this.#zJ(Z);for(let Q of Y){try{J.drawImage(Q,0,0,$,X)}catch{continue}finally{Q.close?.()}if(!this.#u(J,$,X))return!0}return!1}#PJ(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#LJ(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.#_J($,J,Z.width,Z.height))return null;let Y=await new Promise((Q)=>Z.toBlob(Q,"image/png"));return this.#JJ(Y)}#IJ(J){if(this.#j!=="webcam")return;let Z=this.#Q.stream;if(!Z)return;if(this.#k===Z&&this.#Q.snapshot){this.#B();return}if(this.#F)return;this.#F=!0;let $=(Y)=>{if(this.#F=!1,!Y||this.#j!=="webcam"||this.#Q.stream!==Z)return;this.#k=Z,this.#B()},X=async()=>{let Y=await this.#LJ(J);if(Y){$(Y);return}if(this.#j!=="webcam"||this.#Q.stream!==Z){this.#F=!1;return}return await this.#PJ(J),X()};X()}#I(J){let Z=requestAnimationFrame(()=>{if(this.#R.delete(Z),this.isConnected)J()});return this.#R.add(Z),Z}#xJ(){this.#R.forEach((J)=>cancelAnimationFrame(J)),this.#R.clear()}#fJ(){let J=new Set([this.#Q.snapshot,this.#Y.poster,this.#z.url].filter((Z)=>typeof Z==="string"&&Z.startsWith("blob:")));this.#w.forEach((Z)=>{if(!J.has(Z))URL.revokeObjectURL(Z)}),this.#w.clear(),J.forEach((Z)=>this.#w.add(Z))}#KJ(J){return J?.matches("fig-swatch, fig-chit")??!1}#bJ(J){return this.#KJ(J)||(J?.matches("[data-fig-fill-picker-swatch]")??!1)}#wJ(){let J=Array.from(this.children).find((Z)=>!Z.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#U=document.createElement("fig-swatch"),this.#U.setAttribute("background","#D9D9D9"),this.appendChild(this.#U),this.#K=this.#U;else if(this.#bJ(J))this.#U=J,this.#K=J;else this.#K=J,this.#U=null;if(this.#ZJ(),this.#K.removeEventListener("click",this.#s),this.#K.addEventListener("click",this.#s),this.#K.removeEventListener("keydown",this.#b),this.#K.addEventListener("keydown",this.#b),this.#KJ(this.#U))this.#I(()=>{let Z=this.#U.querySelector('input[type="color"]');if(Z)Z.remove();this.#ZJ()})}#HJ(){return this.getAttribute("aria-label")||"Fill picker"}#ZJ(){if(!this.#K)return;let J=this.#C(),Z=this.getAttribute("aria-labelledby");if(!this.#K.hasAttribute("role"))this.#K.setAttribute("role","button");if(this.#K.setAttribute("tabindex",J?"-1":"0"),this.#K.setAttribute("aria-disabled",J?"true":"false"),this.#K.setAttribute("aria-haspopup","dialog"),this.#K.setAttribute("aria-expanded",this.#J?.open?"true":"false"),this.#K.setAttribute("aria-controls",this.#V),this.#K.removeAttribute("aria-hidden"),Z)this.#K.setAttribute("aria-labelledby",Z),this.#K.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#K.setAttribute("aria-label",`Open ${this.#HJ()}`),this.#K.removeAttribute("aria-labelledby");else if(this.#K.removeAttribute("aria-labelledby"),!this.#K.hasAttribute("aria-label"))this.#K.setAttribute("aria-label",`Open ${this.#HJ()}`);let $=this.getAttribute("aria-describedby");if($)this.#K.setAttribute("aria-describedby",$);else this.#K.removeAttribute("aria-describedby")}#QJ(J){if(this.#C())return;J.stopPropagation(),J.preventDefault(),this.#jJ()}#v(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.#C())return;J.preventDefault(),J.stopPropagation(),this.#jJ()}#AJ(){let J=this.getAttribute("value");if(!J)return;let Z=["solid","gradient","image","video","webcam"];try{let $=JSON.parse(J);if($.type)this.#j=$.type;if($.color){if(typeof $.color==="string")this.#W=this.#NJ($.color);else if(typeof $.color==="object"&&$.color.h!==void 0)this.#W=$.color}let X=$.alpha!==void 0?Number($.alpha):$.opacity!==void 0?Number($.opacity)/100:void 0;if(Number.isFinite(X))this.#W.a=Math.max(0,Math.min(1,X));if(this.#L="srgb",$.gradient)this.#$=u({...this.#$,...$.gradient});if($.image)this.#z={...this.#z,...$.image};if($.video){let Y=this.#Y.url;if(this.#Y={...this.#Y,...$.video},this.#Y.missing=!this.#Y.url,$.video.poster!=null&&$.video.poster!=="")this.#g=this.#Y.url;else if(this.#Y.url!==Y)this.#BJ();else this.#yJ()}if(this.#l($),$.type&&!Z.includes($.type)){let{type:Y,...Q}=$;this.#E[$.type]=Q}}catch($){if(J.startsWith("#")){this.#j="solid",this.#W=this.#NJ(J);return}if(BJ(J)){let X=this.#Y.url;if(this.#j="video",this.#Y.url=J.trim(),this.#Y.missing=!1,this.#Y.url!==X)this.#BJ();else this.#yJ()}}}#B(){if(!this.#U)return;let J,Z="cover",$="center";switch(this.#j){case"solid":J=this.#WJ(this.#W);break;case"gradient":J=this.#oJ();break;case"image":if(this.#z.url){J=p(this.#z.url);let X=this.#OJ(this.#z.scaleMode,this.#z.scale);Z=X.size,$=X.position}else J="";break;case"video":if(this.#Y.poster){J=p(this.#Y.poster);let X=this.#OJ(this.#Y.scaleMode,this.#Y.scale);Z=X.size,$=X.position}else J="";break;case"webcam":if(this.#Q.snapshot){J=p(this.#Q.snapshot);let X=this.#OJ(this.#Q.scaleMode,this.#Q.scale);Z=X.size,$=X.position}else J="";break;default:{J=(this.#M[this.#j]?.element||this.querySelector(`[slot="mode-${this.#j}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#U.setAttribute("background",J),this.#U.style.setProperty("--swatch-bg-size",Z),this.#U.style.setProperty("--swatch-bg-position",$),this.#j==="solid")this.#U.setAttribute("alpha",this.#W.a);else this.#U.removeAttribute("alpha")}#OJ(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"}}}#jJ(){if(this.#C())return;if(!this.#J)this.#hJ();else this.#J.anchor=this.anchorElement||this.#K;if(this.#MJ(this.#j,{emit:!1}),this.#A=JSON.stringify(this.value),this.#y=this.#A,this.#KJ(this.#U))this.#U.setAttribute("selected","true");this.#J.open=!0,this.#ZJ(),this.#I(()=>{this.#J?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#I(()=>{this.#o(),this.#p()})})}open(){this.#jJ()}close(){if(this.#J)this.#J.open=!1,this.#ZJ()}#uJ(){if(!this.#J)return;for(let[J,{element:Z}]of Object.entries(this.#M)){let $=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((X)=>X.dataset.tab===J);if(!$)continue;while($.firstChild)Z.appendChild($.firstChild)}}#FJ({stopWebcam:J=!1}={}){if(this.#S)this.#S(),this.#S=null;if(this.#c?.disconnect(),this.#c=null,!J&&this.#m())this.#$J();else this.#UJ();if(!this.#J)return;this.#uJ(),this.#J.remove(),this.#J=null,this.#x=null,this.#A=null,this.#y=null,this.#G=null,this.#N=null,this.#P=null,this.#T=null,this.#D=!1,this.#ZJ()}#$J(){this.#h+=1;let J=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#UJ({emit:J=!0}={}){this.#h+=1;let Z=Boolean(this.#Q.stream);if(this.#Q.stream)this.#Q.stream.getTracks().forEach((X)=>X.stop()),this.#Q.stream=null;this.#k=null,this.#F=!1,this.#O=null;let $=this.#J?.querySelector(".fig-fill-picker-webcam-video");if($)$.srcObject=null;if(Z&&J)this.#r()}#hJ(){this.#M={},this.querySelectorAll('[slot^="mode-"]').forEach((z)=>{let O=z.getAttribute("slot").slice(5);this.#M[O]={element:z,label:z.getAttribute("label")||O.charAt(0).toUpperCase()+O.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.id=this.#V,this.#J.setAttribute("aria-label",this.#HJ()),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.#K;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"),Y;if(X){if(Y=X.split(",").map((O)=>O.trim().toLowerCase()).filter((O)=>Z.includes(O)||this.#M[O]),Y.length===0)Y=[...Z]}else Y=[...Z];let Q={...$};for(let[z,{label:O}]of Object.entries(this.#M))Q[z]=O;if(!Y.includes(this.#j))this.#j=Y[0],this.#q=Y[0];let W;if(Y.length===1)W=_("h3",{className:"fig-fill-picker-type-label"},Q[Y[0]]);else{let z=_("fig-select-options",{},Y.map((O)=>_("fig-select-option",{value:O},Q[O])));W=_("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#j},z)}let K=Y.map((z)=>_("div",{className:"fig-fill-picker-tab","data-tab":z})),j=_("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},I("close"));this.#J.replaceChildren(_("fig-header",{},[W,j]),_("fig-content",{},K)),document.body.appendChild(this.#J);for(let[z,{element:O}]of Object.entries(this.#M)){let M=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((G)=>G.dataset.tab===z);if(!M)continue;while(O.firstChild)M.appendChild(O.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:z,container:M}}))}let U=this.#J.querySelector(".fig-fill-picker-type");if(U)U.addEventListener("change",(z)=>{let O=typeof z.detail==="string"?z.detail:z.target?.value;if(O)this.#MJ(O)});this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});let L=()=>{if(this.#KJ(this.#U))this.#U.removeAttribute("selected");if(this.#m())this.#$J();else this.#UJ();let z=JSON.stringify(this.value);if(this.#y!==null&&this.#y!==z)this.#n();this.#A=null,this.#y=null,this.#ZJ();let O=this.#K;this.#I(()=>{if(O?.isConnected)HTMLElement.prototype.focus.call(O)}),this.dispatchEvent(new CustomEvent("close"))};this.#J.addEventListener("close",L);let q={solid:()=>this.#mJ(),gradient:()=>this.#JZ(),image:()=>this.#jZ(),video:()=>this.#qZ(),webcam:()=>this.#HZ()};for(let[z,O]of Object.entries(q))if(!this.#M[z]&&Y.includes(z))O();for(let z of Object.keys(this.#M)){if(Z.includes(z))continue;let O=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((M)=>M.dataset.tab===z);if(!O)continue;O.addEventListener("input",(M)=>{if(M.target===this)return;if(M.stopPropagation(),M.detail)this.#E[z]=M.detail;this.#H()}),O.addEventListener("change",(M)=>{if(M.target===this)return;if(M.stopPropagation(),M.detail)this.#E[z]=M.detail;this.#n()})}}#MJ(J,{emit:Z=!0}={}){let $=Array.from(this.#J?.querySelectorAll(".fig-fill-picker-tab")??[]).find((K)=>K.dataset.tab===J);if(!$)return;let X=this.#q;if(this.#q=J,this.#j=J,X==="webcam"&&J!=="webcam")this.#UJ();let Y=this.#J.querySelector(".fig-fill-picker-type");if(Y&&Y.value!==J)Y.value=J;this.#J.querySelectorAll(".fig-fill-picker-tab").forEach((K)=>{if(K.dataset.tab===J)K.style.display="block";else K.style.display="none"});let W=this.#J.querySelector("fig-content");if(W)W.style.padding=this.#M[J]?"0":"";if(J==="gradient")this.#I(()=>{this.#YJ();let K=$.querySelector(".fig-fill-picker-gradient-bar-input");K?.refreshLayout?.(),this.#I(()=>{K?.refreshLayout?.()})});if(J==="video")this.#EJ({emit:!1});if(J==="webcam")this.#Q.live=this.#t()==="live",this.#x?.(this.#Q.deviceId);if(this.#B(),Z)this.#H()}#gJ(){if(!this.#J?.open)return;if(this.#MJ(this.#j,{emit:!1}),this.#o(),this.#p(),this.#VJ(),this.#P)this.#P.setAttribute("value",this.#W.h);if(this.#T)this.#T.setAttribute("value",this.#W.a*100),this.#T.setAttribute("color",this.#WJ(this.#W));this.#YJ();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.#z.scaleMode;if($)$.setAttribute("value",this.#z.scale),$.style.display=this.#z.scaleMode==="tile"?"block":"none";if(X)this.#qJ(X);let Y=this.#J.querySelector('[data-tab="video"]'),Q=Y?.querySelector(".fig-fill-picker-scale-mode"),W=Y?.querySelector(".fig-fill-picker-video-preview");if(Q)Q.value=this.#Y.scaleMode;if(W)this.#kJ(W)}#mJ(){let J=this.#J.querySelector('[data-tab="solid"]'),Z=this.getAttribute("alpha")!=="false",$=_("canvas",{width:"200",height:"200"}),X=_("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#WJ({...this.#W,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),Y=_("fig-preview",{className:"fig-fill-picker-color-area"},[$,X]),Q=_("fig-tooltip",{text:"Sample color"},_("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},I("eyedropper"))),W=_("div",{className:`fig-fill-picker-sliders${Z?"":" is-hue-only"}`},[Q,_("fig-slider",{type:"hue",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#W.h}),Z?_("fig-slider",{type:"opacity",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#W.a*100,color:this.#WJ(this.#W)}):null]),K=_("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([q,z])=>_("fig-select-option",{value:q},z))),j=_("fig-field",{className:"fig-fill-picker-inputs"},[_("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#_},K),_("span",{className:"fig-fill-picker-input-fields"})]);if(J.replaceChildren(Y,W,j),this.#G=J.querySelector("canvas"),this.#N=J.querySelector("fig-handle"),this.#a(),this.#o(),this.#p(),this.#TJ(),this.#P=J.querySelector('fig-slider[type="hue"]'),this.#P.addEventListener("input",(q)=>{this.#W.h=parseFloat(q.target.value),this.#o(),this.#p(),this.#VJ(),this.#H()}),this.#P.addEventListener("change",()=>{this.#n()}),Z)this.#T=J.querySelector('fig-slider[type="opacity"]'),this.#T.addEventListener("input",(q)=>{this.#W.a=parseFloat(q.target.value)/100,this.#VJ(),this.#H()}),this.#T.addEventListener("change",()=>{this.#n()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(q)=>{let z=typeof q.detail==="string"?q.detail:q.target?.value;if(!z)return;this.#_=z,this.#RJ()}),this.#RJ();let L=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)L.addEventListener("click",async()=>{try{let z=await new EyeDropper().open();this.#W={...this.#NJ(z.sRGBHex),a:this.#W.a},this.#o(),this.#p(),this.#VJ(),this.#H()}catch(q){}});else L.setAttribute("disabled",""),L.title="EyeDropper not supported in this browser"}#vJ(){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.#G=$,this.#TJ()}this.#o(),this.#p()}this.#CJ(),this.#H()}#o(){if(!this.#G&&this.#J)this.#G=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#G)return;let J=this.#L==="display-p3"?"display-p3":"srgb",Z=this.#G.getContext("2d",{colorSpace:J});if(!Z)return;let $=this.#G.width,X=this.#G.height;Z.clearRect(0,0,$,X);let Y=this.#W.h,Q=this.#L==="display-p3",W=Z.createLinearGradient(0,0,$,0);if(Q){W.addColorStop(0,"color(display-p3 1 1 1)");let j=r(Y,100,50),U=i(j.r,j.g,j.b,{from:"srgb",to:"display-p3"});W.addColorStop(1,`color(display-p3 ${U.r/255} ${U.g/255} ${U.b/255})`)}else W.addColorStop(0,"#FFFFFF"),W.addColorStop(1,`hsl(${Y}, 100%, 50%)`);Z.fillStyle=W,Z.fillRect(0,0,$,X);let K=Z.createLinearGradient(0,0,0,X);K.addColorStop(0,"rgba(0,0,0,0)"),K.addColorStop(1,"rgba(0,0,0,1)"),Z.fillStyle=K,Z.fillRect(0,0,$,X)}#p(J=0){if(!this.#N||!this.#G)return;this.#a();let Z=this.#G.getBoundingClientRect();if((Z.width===0||Z.height===0)&&J<5){this.#I(()=>this.#p(J+1));return}let $=Math.max(0,Math.min(100,this.#W.s)),X=Math.max(0,Math.min(100,100-this.#W.v));this.#N.setAttribute("value",`${$}% ${X}%`),this.#N.setAttribute("color",this.#WJ({...this.#W,a:1}))}#a(){if(!this.#N)return;this.#N.setAttribute("aria-valuenow",String(Math.round(this.#W.v))),this.#N.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#W.s)}%, brightness ${Math.round(this.#W.v)}%`),this.#N.removeAttribute("aria-pressed")}#XJ(J,Z,$={}){let{updateHandle:X=!0,emitInput:Y=!0,emitChange:Q=!1}=$;if(this.#W.s=Math.max(0,Math.min(100,J*100)),this.#W.v=Math.max(0,Math.min(100,(1-Z)*100)),this.#N)this.#N.setAttribute("color",this.#WJ({...this.#W,a:1})),this.#a();if(X)this.#p();if(this.#VJ(),Y)this.#H();if(Q)this.#n()}#TJ(){if(this.#S)this.#S(),this.#S=null;if(!this.#G||!this.#N)return;let J=this.#G.parentElement||this.#G,Z=this.#N,$=!1,X=(U,L={})=>{let q=J.getBoundingClientRect();if(q.width===0||q.height===0)return;let z=Math.max(0,Math.min(U.clientX-q.left,q.width)),O=Math.max(0,Math.min(U.clientY-q.top,q.height));this.#XJ(z/q.width,O/q.height,L)},Y=(U)=>{if(U.button!==0)return;if(U.target===Z||Z.contains(U.target))return;$=!0,this.#f=!0,J.setPointerCapture(U.pointerId),X(U,{updateHandle:!0,emitInput:!0})},Q=(U)=>{if(!$)return;if(U.buttons===0){W();return}X(U,{updateHandle:!0,emitInput:!0})},W=()=>{if(!$)return;$=!1,this.#f=!1,this.#n()},K=(U)=>{this.#f=!0;let L=U.detail?.px,q=U.detail?.py;if(!Number.isFinite(L)||!Number.isFinite(q))return;Z.setAttribute("value",`${L*100}% ${q*100}%`),this.#XJ(L,q,{updateHandle:!1,emitInput:!0})},j=(U)=>{let L=U.detail?.px,q=U.detail?.py;if(Number.isFinite(L)&&Number.isFinite(q))Z.setAttribute("value",`${L*100}% ${q*100}%`),this.#XJ(L,q,{updateHandle:!1,emitInput:!1});this.#f=!1,this.#n()};J.addEventListener("pointerdown",Y),J.addEventListener("pointermove",Q),J.addEventListener("pointerup",W),J.addEventListener("pointercancel",W),J.addEventListener("lostpointercapture",W),Z.addEventListener("input",K),Z.addEventListener("change",j),this.#S=()=>{J.removeEventListener("pointerdown",Y),J.removeEventListener("pointermove",Q),J.removeEventListener("pointerup",W),J.removeEventListener("pointercancel",W),J.removeEventListener("lostpointercapture",W),Z.removeEventListener("input",K),Z.removeEventListener("change",j),this.#f=!1}}#RJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=(K,j)=>_("fig-tooltip",{text:K},j),$=(K,j,U,L,q,z)=>_("fig-input-number",{className:K,"aria-label":j,min:U,max:L,step:q,units:z}),X=this.getAttribute("alpha")!=="false",Y=()=>X?Z("Alpha",$("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Q=(K,j="")=>_("div",{className:["input-combo",j].filter(Boolean).join(" ")},K),W;switch(this.#_){case"rgb":W=Q([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)),Y()]);break;case"hsl":W=Q([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)),Y()]);break;case"hsb":W=Q([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)),Y()]);break;case"lab":W=Q([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)),Y()]);break;case"lch":W=Q([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)),Y()]);break;case"css":W=_("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let K=_("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});W=X?_("fig-input-combo",{className:"input-combo fig-fill-picker-ci-hex-row",full:!0},[K,Y()]):K}break}J.replaceChildren(W),this.#nJ(),this.#I(()=>this.#VJ())}#nJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Z=()=>{if(this.#f)return;let Y=this.#eJ();if(!Y)return;let Q=Number.isFinite(Y.a)?Y.a:this.#W.a;if(this.#W={...Y,a:Q},this.#o(),this.#p(),this.#P)this.#P.setAttribute("value",this.#W.h);if(this.#T&&Number.isFinite(Y.a))this.#T.setAttribute("value",this.#W.a*100);this.#H()},$=()=>this.#n();J.querySelectorAll("fig-input-number, fig-input-text").forEach((Y)=>{Y.addEventListener("input",Z),Y.addEventListener("change",$)})}#tJ(){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))}#eJ(){let J=(X)=>this.#J?.querySelector(`.${X}`),Z=(X)=>parseFloat(J(X)?.value??0),$=(X)=>{if(!X)return null;let Y=this.#tJ();return{...X,a:Y??X.a??this.#W.a}};switch(this.#_){case"rgb":return $(this.#GJ({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.#fZ({h:Z("fig-fill-picker-ci-h"),s:Z("fig-fill-picker-ci-s"),l:Z("fig-fill-picker-ci-l")});return $(this.#GJ(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.#DZ({l:Z("fig-fill-picker-ci-okl")/100,a:Z("fig-fill-picker-ci-oka"),b:Z("fig-fill-picker-ci-okb")});return $(this.#GJ(X))}case"lch":{let X=this.#CZ({l:Z("fig-fill-picker-ci-okl")/100,c:Z("fig-fill-picker-ci-okc"),h:Z("fig-fill-picker-ci-okh")});return $(this.#GJ(X))}case"css":{let X=J("fig-fill-picker-ci-css");if(!X)return null;return this.#BZ(X.value)}default:{let X=J("fig-fill-picker-ci-hex");if(!X)return null;let Y=X.value.replace(/^#/,"");if(Y.length===3)Y=Y[0]+Y[0]+Y[1]+Y[1]+Y[2]+Y[2];if(Y.length===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.#NJ(`#${Y}`),a:Q}}if(Y.length!==6||!/^[0-9a-fA-F]{6}$/.test(Y))return null;return $(this.#NJ(`#${Y}`))}}}#VJ(){if(!this.#J)return;let J=this.#WJ(this.#W),Z=this.#lJ(this.#W),$=(Y)=>this.#J.querySelector(`.${Y}`),X=(Y,Q)=>{let W=$(Y);if(W)W.setAttribute("value",Q)};switch(this.#_){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 Y=this.#NZ(Z);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.#W.h)),X("fig-fill-picker-ci-s",Math.round(this.#W.s)),X("fig-fill-picker-ci-v",Math.round(this.#W.v));break;case"lab":{let Y=this.#FZ(Z);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.#TZ(Z);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.#kZ(this.#W));break;default:X("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#_!=="css"){let Y=Math.round(this.#W.a*1000)/10;X("fig-fill-picker-ci-a",Number.isInteger(Y)?Y:+Y.toFixed(1))}if(this.#T)this.#T.setAttribute("color",J);this.#B()}#JZ(){{let U=this.#J.querySelector('[data-tab="gradient"]'),L=document.createElement("fig-gradient-editor");L.value=w(this.#$),L.setAttribute("color-space",this.#L),L.toggleAttribute("disabled",this.#C()),L.pickerAnchor=this.#J;let q=(z)=>{if(z.stopPropagation(),!z.detail?.gradient)return;if(this.#$=u(z.detail.gradient),this.#B(),z.type==="change")this.#n();else this.#H()};L.addEventListener("input",q),L.addEventListener("change",q),U.replaceChildren(L);return}let J=this.#J.querySelector('[data-tab="gradient"]'),Z=_("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#$.type,variant:"ghost"},_("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([U,L])=>_("fig-select-option",{value:U},L)))),$=(U,L,q)=>_("fig-tooltip",{text:U},_("fig-button",{icon:!0,variant:"ghost",className:L,"aria-label":U},I(q))),X=_("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")]),Y=_("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[Z,X]),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:w(this.#$)})}),W=_("fig-preview",{className:"fig-fill-picker-gradient-preview"},Q),K=_("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},I("add")),j=_("div",{className:"fig-fill-picker-gradient-stops"},[_("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[_("h3",{},"Stops"),K]),_("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);J.replaceChildren(Y,W,j),this.#YJ(),this.#ZZ(J)}#PZ(){let J=({value:X,title:Y,subtitle:Q,advanced:W=!1})=>_("fig-select-option",{value:X,label:`${Y} — ${Q}`,className:W?"fig-fill-picker-gradient-interpolation-advanced":null},[_("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),_("span",{className:"fig-fill-picker-gradient-interpolation-label"},[_("span",{className:"fig-fill-picker-gradient-interpolation-title"},Y),_("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Q)])]),Z=_("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),$=P.#Z;return[...$.filter((X)=>!X.advanced).map(J),Z,...$.filter((X)=>X.advanced).map(J)]}#ZZ(J){let Z=(H)=>typeof H.detail==="string"?H.detail:H.target?.value,$=J.querySelector(".fig-fill-picker-gradient-bar-input"),X=(H)=>{if(!$)return;this.#D=!0;try{$.value={type:"gradient",gradient:w(H)}}finally{this.#D=!1}},Y=()=>{X(this.#$)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(H)=>{let V=Z(H);if(!V)return;this.#$.type=V,this.#YJ(),this.#H()});let W=J.querySelector(".fig-fill-picker-gradient-space"),K=W?.querySelector("fig-select-options"),j="fig-fill-picker-gradient-interpolation-collapsed",U=K?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),L=()=>Boolean(K?.classList.contains(j)),q=(H)=>{K?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",H?"Show all color interpolation options":"Scroll down")},z=()=>{if(!K)return;K.classList.remove(j),K.style.removeProperty("max-height"),q(!1),K.syncOverflow?.()},O=()=>{if(!K||!U)return;K.style.removeProperty("max-height"),K.classList.add(j),K.scrollTop=0;let H=K.getBoundingClientRect().top,V=U.getBoundingClientRect().top,T=K.querySelector(".fig-overflow-end")?.offsetHeight||0,R=V-H;if(R>0)K.style.maxHeight=`${Math.round(R+T)}px`;q(!0),K.syncOverflow?.()},M=(H)=>Boolean(K?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${H}"]`)),G=()=>{if(M(n(this.#$)))z();else O()};if(K?.addEventListener("click",(H)=>{if(!L())return;if(!H.target?.closest?.(".fig-overflow-end"))return;H.preventDefault(),H.stopPropagation(),z()},!0),K?.addEventListener("focusin",(H)=>{if(!L())return;if(H.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))z()}),K?.addEventListener("scroll",()=>{if(L()&&K.scrollTop!==0)K.scrollTop=0}),W?.querySelectorAll("fig-select-option").forEach((H)=>{let V=()=>{let T=S(H.getAttribute("value")||"srgb");X(C({...this.#$,...T}))};H.addEventListener("pointerenter",V),H.addEventListener("pointerleave",()=>{if(document.activeElement!==H)Y()}),H.addEventListener("focus",V),H.addEventListener("blur",()=>{if(!H.matches(":hover"))Y()})}),this.#c?.disconnect(),W)this.#c=new MutationObserver(()=>{if(!W.hasAttribute("open"))Y();else this.#I(G)}),this.#c.observe(W,{attributes:!0,attributeFilter:["open"]});let B=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(B?.addEventListener("change",(H)=>{let V=typeof H.detail==="string"?H.detail:H.target?.value;if(!V)return;let T=S(V);this.#$=C({...this.#$,...T}),this.#YJ(),this.#H()}),B?.querySelectorAll("fig-segment").forEach((H)=>{let V=()=>{X(C({...this.#$,...S(H.getAttribute("value")||"srgb")}))};H.addEventListener("pointerenter",V),H.addEventListener("pointerleave",Y)}),W?.addEventListener("change",(H)=>{let V=Z(H);if(!V)return;let T=S(V);this.#$=C({...this.#$,...T}),this.#YJ(),this.#H()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#$.angle=(Number(this.#$.angle)+90)%360,this.#YJ(),this.#H()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#$.stops.forEach((H)=>{H.position=100-H.position}),this.#$.stops.sort((H,V)=>H.position-V.position),this.#YJ(),this.#H()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#$.stops.push({position:50,color:"#888888",opacity:100}),this.#$.stops.sort((V,T)=>V.position-T.position),this.#YJ(),this.#H()}),$){let H=(V)=>{if(V.stopPropagation(),this.#D)return;let T=V.detail;if(!T?.gradient)return;this.#$=u({...this.#$,...T.gradient}),this.#B(),this.#DJ(),this.#iJ()};$.addEventListener("input",(V)=>{H(V),this.#H()}),$.addEventListener("change",(V)=>{H(V),this.#n()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(H)=>{this.#QZ(H)})}#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}`}#$Z(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 Y=J.getAttribute("value");if(typeof Y==="string"&&Y.startsWith("#"))return this.#cJ(Y.length>7?Y.slice(0,7):Y);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()}`}#XZ(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,Y=this.#$Z($),Q=100;if($ instanceof HTMLElement&&$.rgba?.a!==void 0)Q=Math.round($.rgba.a*100);else{let W=parseInt(J.dataset.index,10);if(!isNaN(W)&&this.#$.stops[W])Q=this.#$.stops[W].opacity??100}return{position:X,color:Y,opacity:Q}}#sJ(J){let Z=parseInt(J.dataset.index,10);if(isNaN(Z)||Z<0||Z>=this.#$.stops.length)return;let $={...this.#$.stops[Z],...this.#XZ(J)};this.#$.stops[Z]=$,this.#YZ(J,$)}#YZ(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))}#QZ(J){let{oldIndex:Z,newIndex:$}=J.detail??{};if(Z==null||$==null||Z===$||Z<0||$<0||Z>=this.#$.stops.length||$>=this.#$.stops.length)return;let Y=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");Y.forEach((W)=>this.#sJ(W));let[Q]=this.#$.stops.splice(Z,1);this.#$.stops.splice($,0,Q),Y.forEach((W,K)=>{W.dataset.index=String(K)}),this.#D=!0;try{this.#DJ(),this.#CJ(),this.#H()}finally{this.#D=!1}}#YJ(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"]');if(!J)return;this.#$=u(this.#$);let Z=J.querySelector("fig-gradient-editor");if(Z){Z.value=this.#$,Z.setAttribute("color-space",this.#L),Z.toggleAttribute("disabled",this.#C()),Z.pickerAnchor=this.#J;return}let $=n(this.#$),X=J.querySelector(".fig-fill-picker-gradient-space");if(X)X.value=$;let Y=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(Y){let Q=P.#X($),W=Y.querySelector(`fig-segment[value="${$}"]`)||Y.querySelector(`fig-segment[data-space="${Q.space}"]`);if(W){let K=`${Q.title} — ${Q.subtitle}`;W.setAttribute("value",$),W.setAttribute("aria-label",K);let j=W.closest("fig-tooltip");if(j)j.setAttribute("text",K);Y.value=$}}this.#DJ(),this.#CJ(),this.#iJ()}#WZ(){let J=Array.isArray(this.#$.stops)?[...this.#$.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}))}#DJ(){if(!this.#J)return;let J=this.#WZ();this.#J.querySelectorAll("fig-interpolation-swatch").forEach((Z)=>{let $=Z.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",X=S($),Y={type:"linear",stops:J,interpolationSpace:X.interpolationSpace};if(x.has(X.interpolationSpace))Y.hueInterpolation=X.hueInterpolation;Z.value={type:"gradient",gradient:Y}})}#CJ(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"] > fig-gradient-editor');if(J){J.value=this.#$,J.setAttribute("color-space",this.#L),this.#B();return}let Z=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(Z)this.#D=!0,Z.value={type:"gradient",gradient:w(this.#$)},this.#D=!1;this.#B()}#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.#$.stops.length){this.#$.stops.forEach((X,Y)=>{let Q=$[Y];Q.dataset.index=Y;let W=Q.querySelector(".fig-fill-picker-stop-position");if(W)W.setAttribute("value",X.position);let K=Q.querySelector(".fig-fill-picker-stop-color");if(K)K.setAttribute("value",this.#pJ(X));let j=Q.querySelector(".fig-fill-picker-stop-remove");if(j)if(this.#$.stops.length<=2)j.setAttribute("disabled","");else j.removeAttribute("disabled")});return}this.#KZ(J)}#KZ(J){let Z=J.querySelector("fig-reorder");if(!Z)return;let $=this.#$.stops.map((X,Y)=>_("fig-property",{className:"fig-fill-picker-gradient-stop-row","data-index":Y,leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},_("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[_("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:X.position,units:"%"}),_("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.#DJ(),this.#CJ(),this.#H()});let Y=X.querySelector(".fig-fill-picker-stop-color"),Q=Y.querySelector("fig-fill-picker");if(Q)Q.anchorElement=this.#J;else this.#I(()=>{let j=Y.querySelector("fig-fill-picker");if(j)j.anchorElement=this.#J});let W=()=>{this.#sJ(X),this.#D=!0;try{this.#DJ(),this.#CJ(),this.#H()}finally{this.#D=!1}};Y.addEventListener("input",W),Y.addEventListener("change",W);let K=X.querySelector(':scope > [data-fig-property-action="remove"]');K.classList.add("fig-fill-picker-stop-remove"),K.setAttribute("aria-label","Remove gradient stop"),K.toggleAttribute("disabled",this.#$.stops.length<=2),X.addEventListener("remove",(j)=>{j.stopPropagation();let U=parseInt(X.dataset.index,10);if(this.#$.stops.length>2)this.#$.stops.splice(U,1),this.#YJ(),this.#H()})})}#AZ(J,Z=!0){let $=C({...this.#$,interpolationSpace:J??this.#$.interpolationSpace}),X=this.#L==="display-p3",Y=$.stops.map((K)=>{let j=(K.opacity??100)/100;return`${X?this.#GZ(K.color,j):this.#MZ(K.color,j)} ${K.position}%`}).join(", "),Q=RJ($),W=Z&&Q?` ${Q}`:"";switch($.type){case"linear":return`linear-gradient(${$.angle}deg${W}, ${Y})`;case"radial":return`radial-gradient(circle at ${$.centerX}% ${$.centerY}%${W}, ${Y})`;case"angular":return`conic-gradient(from ${$.angle}deg${W}, ${Y})`;default:return`linear-gradient(${$.angle}deg${W}, ${Y})`}}static#rJ=new Map;#RZ(J){let Z=P.#rJ.get(J);if(Z!==void 0)return Z;let $=document.createElement("div");$.style.background=J;let X=!!$.style.background;return P.#rJ.set(J,X),X}#oJ(){return v(this.#$,{colorSpace:this.#L})}#jZ(){let J=this.#J.querySelector('[data-tab="image"]'),Z=_("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#z.scaleMode},_("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Q,W])=>_("fig-select-option",{value:Q},W)))),$=_("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")$.style.display="none";let X=_("fig-field",{className:"fig-fill-picker-media-header"},[Z,$]),Y=_("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,Y),this.#UZ(J)}#UZ(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",(Y)=>{let Q=typeof Y.detail==="string"?Y.detail:Y.target?.value;if(!Q)return;this.#z.scaleMode=Q,$.style.display=Q==="tile"?"block":"none",this.#qJ(X),this.#B(),this.#H()}),$.addEventListener("input",(Y)=>{this.#z.scale=parseFloat(Y.target.value)||100,this.#qJ(X),this.#B(),this.#H()}),X.addEventListener("loaded",(Y)=>{let Q=Y.detail?.src||X.src;if(!Q)return;let W=Q!==this.#z.url;if(this.#z.url=Q,this.#qJ(X),this.#B(),W)this.#H();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:Y.detail??{src:Q}}))}),X.addEventListener("change",()=>{if(X.src)return;this.#z.url=null,this.#qJ(X),this.#B(),this.#H()}),this.#qJ(X)}#qJ(J){if(!this.#z.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.#z.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.#z.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.#z.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#z.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#kJ(J){if(J.tagName==="FIG-MEDIA"){if(!this.#Y.url){J.removeAttribute("src"),J.classList.remove("has-media");return}if(J.setAttribute("src",this.#Y.url),this.#Y.poster)J.setAttribute("poster",this.#Y.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.#Y.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.#Y.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#qZ(){let J=this.#J.querySelector('[data-tab="video"]'),Z=_("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#Y.scaleMode},_("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([Y,Q])=>_("fig-select-option",{value:Y},Q)))),$=_("fig-field",{className:"fig-fill-picker-media-header"},Z),X=_("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.#LZ(J),this.#EJ({emit:!1})}#BJ(){if(this.#Y.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#Y.poster),this.#w.delete(this.#Y.poster);this.#Y.poster=null,this.#g=null}#yJ(){if(!this.#Y.poster)return;if(this.#g&&this.#g===this.#Y.url)return;this.#BJ()}#dJ(){let J=this.#J?.querySelector(".fig-fill-picker-video-preview");if(J)this.#kJ(J)}#EJ({emit:J=!1}={}){if(this.#Y.url){if(this.#Y.missing=!1,this.#yJ(),!this.#Y.poster)this.#SJ(this.#Y.url);else this.#dJ();return}let Z=this.getAttribute("default-video");if(!Z){this.#Y.missing=!0;return}if(this.#Y.url=Z,this.#Y.missing=!1,this.#dJ(),this.#SJ(Z),J)this.#H()}#aJ(){if(this.#j!=="video")return;let J=this.#Y.url;if(!J)return;if(this.#yJ(),this.#Y.poster)return;this.#SJ(J)}async#zZ(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#_Z(J){let Z=await this.#zZ(J),$=Z?.width||J.videoWidth,X=Z?.height||J.videoHeight;if(!$||!X)return Z?.close?.(),null;let Y=typeof OffscreenCanvas==="function"?new OffscreenCanvas($,X):Object.assign(document.createElement("canvas"),{width:$,height:X}),Q=Y.getContext("2d");if(!Q)return Z?.close?.(),null;try{Q.drawImage(Z||J,0,0,$,X)}finally{Z?.close?.()}return Y.convertToBlob?Y.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((W)=>Y.toBlob(W,"image/jpeg",0.85))}async#SJ(J,{emit:Z=!1}={}){if(!J||this.#i===J)return;this.#i=J;let $=document.createElement("video");$.muted=!0,$.playsInline=!0,$.preload="auto",$.crossOrigin="anonymous";try{if(await new Promise((Y,Q)=>{let W=()=>Q(Error("video poster failed"));$.addEventListener("error",W,{once:!0}),$.addEventListener("loadeddata",Y,{once:!0}),$.src=J}),!$.videoWidth||!$.videoHeight)return;let X=await this.#_Z($);if(!X||this.#Y.url!==J)return;if(this.#BJ(),this.#Y.poster=URL.createObjectURL(X),this.#g=J,this.#w.add(this.#Y.poster),this.#B(),this.#dJ(),Z)this.#H()}catch{}finally{if($.removeAttribute("src"),$.load(),this.#i===J)this.#i=null}}#LZ(J){let Z=J.querySelector(".fig-fill-picker-scale-mode"),$=J.querySelector(".fig-fill-picker-video-preview");Z.addEventListener("change",(X)=>{let Y=typeof X.detail==="string"?X.detail:X.target?.value;if(!Y)return;this.#Y.scaleMode=Y,this.#kJ($),this.#B(),this.#H()}),$.addEventListener("loaded",(X)=>{let Y=X.detail?.src||$.src;if(!Y)return;let Q=Y!==this.#Y.url;if(Q)this.#BJ();if(this.#Y.url=Y,this.#Y.missing=!1,this.#kJ($),this.#SJ(Y),this.#B(),Q)this.#H();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:X.detail??{src:Y}}))}),$.addEventListener("change",()=>{if($.src)return;this.#Y.url=null,this.#BJ(),this.#EJ(),this.#kJ($),this.#B(),this.#H()}),this.#kJ($)}#HZ(){let J=this.#J.querySelector('[data-tab="webcam"]'),Z=_("fig-field",{className:"fig-fill-picker-webcam-camera"},_("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));Z.style.display="none";let $=_("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});$.muted=!0;let X=_("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},_("span",{},"Camera access required")),Y=_("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]),Q=_("div",{className:"fig-fill-picker-webcam-controls"},_("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));J.replaceChildren(Z,Y,Q),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"),Y=J.querySelector(".fig-fill-picker-webcam-camera"),Q=J.querySelector(".fig-fill-picker-camera-select"),W=(q)=>{if(q)X.removeAttribute("disabled");else X.setAttribute("disabled","")},K=()=>{let q=!!this.#Q.stream&&Z.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&Z.videoWidth>0&&Z.videoHeight>0;if(W(q),q)$.querySelector("span").textContent="Camera ready",$.style.display="none",this.#IJ(Z)};Z.addEventListener("loadedmetadata",K),Z.addEventListener("canplay",K),Z.addEventListener("playing",K);let j=(q)=>{this.#Q.stream=q,Z.srcObject=q,Z.muted=!0,Z.playsInline=!0,Z.style.display="block";let z=Z.play?.();if(z?.catch)z.catch(()=>{});K()},U=async(q,z)=>{let O=await navigator.mediaDevices.enumerateDevices();if(q!=null&&q!==this.#h)return;let M=O.filter((G)=>G.kind==="videoinput");if(M.length>1){Y.style.display="";let G=Q.querySelector(":scope > fig-select-options");if(!G)G=document.createElement("fig-select-options"),Q.append(G);if(G.replaceChildren(),M.forEach((B,f)=>{let H=document.createElement("fig-select-option");H.value=B.deviceId;let V=B.label||(M.length>1?`Camera ${f+1}`:"Camera");H.textContent=V.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(T,R)=>{return` ${/^\d+$/.test(R)?Number.parseInt(R,10).toString():R.replace(/^0+/,"")||"0"}`}),G.append(H)}),z)Q.value=z}else Y.style.display="none",Q.querySelector(":scope > fig-select-options")?.replaceChildren()},L=async(q=null)=>{let z=q||this.#Q.deviceId||null,O=this.#Q.stream,M=O?.getTracks?.().filter((B)=>B.readyState!=="ended")??[];if(O&&M.length){let B=O.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#Q.deviceId||null;if(!z||z===B){j(O),this.#r(),U(null,z||B);return}}this.#UJ({emit:Boolean(O)});let G=this.#h;W(!1),$.querySelector("span").textContent="Starting camera",$.style.display="flex";try{let B={video:z?{deviceId:{exact:z}}:!0},f=await navigator.mediaDevices.getUserMedia(B);if(G!==this.#h||!this.isConnected||this.#q!=="webcam"){f.getTracks().forEach((V)=>V.stop());return}let H=f.getVideoTracks?.()?.[0];this.#Q.deviceId=z||H?.getSettings?.()?.deviceId||null,this.#Q.live=this.#t()==="live",j(f),this.#r(),await U(G,z)}catch(B){if(G!==this.#h)return;console.error("Webcam error:",B.name,B.message);let f="Camera access denied";if(B.name==="NotAllowedError")f="Camera permission denied";else if(B.name==="NotFoundError")f="No camera found";else if(B.name==="NotReadableError")f="Camera in use by another app";else if(B.name==="OverconstrainedError")f="Camera constraints not supported";else if(!window.isSecureContext)f="Camera requires secure context";$.replaceChildren();let H=document.createElement("span");H.textContent=f,$.appendChild(H),$.style.display="flex",Z.style.display="none",W(!1)}};this.#x=L,Q.addEventListener("change",(q)=>{let z=typeof q.detail==="string"?q.detail:q.target?.value;if(!z||z===this.#Q.deviceId)return;L(z)}),X.addEventListener("click",async()=>{if(!this.#Q.stream)return;let q=await this.#LJ(Z);if(!q)return;this.#z.url=q,this.#Q.live=!1;let z=this.#J.querySelector(".fig-fill-picker-image-preview");if(z)this.#qJ(z);if(Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).some((M)=>M.dataset.tab==="image"))this.#MJ("image");else this.#B(),this.#H();this.#n()})}#lJ(J){return _J(J.h,J.s,J.v)}#GJ(J){return{...MJ(J.r,J.g,J.b),a:1}}#WJ(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Z=this.#lJ(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)}`}#NJ(J){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),X=parseInt(J.slice(5,7),16);return this.#GJ({r:Z,g:$,b:X})}#MZ(J,Z=1){let $=parseInt(J.slice(1,3),16),X=parseInt(J.slice(3,5),16),Y=parseInt(J.slice(5,7),16);return`rgba(${$}, ${X}, ${Y}, ${Z})`}#VZ(J){let Z=Math.max(0,Math.min(1,Number(J)||0)),$=Math.round(Z*1000)/1000;return String($)}#kZ(J=this.#W){let Z=this.#lJ(J);return`rgba(${Z.r}, ${Z.g}, ${Z.b}, ${this.#VZ(J.a)})`}#BZ(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 Y=$[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.#NJ(`#${Y}`),a:Q}}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 Y=Math.max(0,Math.min(255,Math.round(parseFloat(X[1])))),Q=Math.max(0,Math.min(255,Math.round(parseFloat(X[2])))),W=Math.max(0,Math.min(255,Math.round(parseFloat(X[3])))),K=X[4]!==void 0?Math.max(0,Math.min(1,parseFloat(X[4]))):1;if(![Y,Q,W,K].every(Number.isFinite))return null;return{...this.#GJ({r:Y,g:Q,b:W}),a:K}}return null}#GZ(J,Z=1){let $=t(J),X=i($.r,$.g,$.b,{from:"srgb",to:"display-p3"}),Y=+(X.r/255).toFixed(4),Q=+(X.g/255).toFixed(4),W=+(X.b/255).toFixed(4);return`color(display-p3 ${Y} ${Q} ${W} / ${Z})`}#NZ(J){return e(J.r,J.g,J.b)}#fZ(J){return r(J.h,J.s,J.l)}#FZ(J){return JJ(J.r,J.g,J.b)}#TZ(J){return VJ(J.r,J.g,J.b)}#DZ(J){return HJ(J.l,J.a,J.b)}#CZ(J){return OJ(J.l,J.c,J.h)}#H(){if(this.#C())return;this.#B(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#n(){if(this.#C())return;this.#y=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#j,colorSpace:this.#L};switch(this.#j){case"solid":return{...J,color:this.#WJ(this.#W),alpha:this.#W.a,hsv:{...this.#W}};case"gradient":return{...J,gradient:w(this.#$),css:this.#oJ()};case"image":return{...J,image:{...this.#z}};case"video":return{...J,video:this.#d()};case"webcam":return{...J,webcam:this.#e()};default:return{...J,...this.#E[this.#j]}}}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.#AJ(),this.#B(),this.#aJ(),this.#J?.open&&!this.#f)this.#gJ(),this.#y=JSON.stringify(this.value);break;case"disabled":if(this.#ZJ(),this.#C()&&this.#J?.open)this.close();break;case"alpha":case"mode":{if(!this.#J)break;let X=this.#J.open;if(this.#FJ(),X&&this.isConnected)this.#jJ();break}case"webcam-mode":if(this.#j==="webcam")this.#B();break;case"default-video":if(this.#j==="video")this.#EJ({emit:!1}),this.#B();break;case"aria-label":if(this.#J)this.#J.setAttribute("aria-label",this.#HJ());case"aria-labelledby":case"aria-describedby":this.#ZJ();break}}}A("fig-fill-picker",P);class k extends HTMLElement{static#Z=new Set(["oklch","hsl"]);static#X=10;static#K=10;static#U=8;static#J=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}]};#j=!1;#L=null;#W=null;#_={...k.#q};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#_}}}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.#$(),this.#z(),this.#f(),this.#D()}attributeChangedCallback(J,Z,$){if(Z===$)return;if(J!=="value")return;if(this.#z(),this.#j)this.#D()}#$(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#z(){let J=this.getAttribute("value");if(!J){this.#_={...k.#q,stops:k.#q.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.#_=this.#Y({...k.#q,...$})}catch{}}#Y(J){let Z={...J??{}},$=String(Z.interpolationSpace??"srgb").toLowerCase(),X=String(Z.hueInterpolation??"shorter").toLowerCase(),Y=Array.isArray(Z.stops)?Z.stops.map((Q)=>({color:String(Q?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Q?.position??0,opacity:Q?.opacity??100})):k.#q.stops.map((Q)=>({...Q}));if(Y.length<2)return{...k.#q,stops:k.#q.stops.map((Q)=>({...Q}))};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:Y}}#Q(){return k.#Z.has(this.#_.interpolationSpace||"srgb")}#k(J){let{r:Z,g:$,b:X}=t(J);if(this.#_.interpolationSpace==="hsl")return e(Z,$,X).h;let Y=JJ(Z,$,X);return(LJ(Y.l,Y.a,Y.b).h%360+360)%360}#F(){let J=this.#N(),Z=this.#k(J[0]?.color||"#FF0000"),$=this.#k(J[J.length-1]?.color||"#4F9EFF"),X=k.#V-Z,Q=((k.#V-$-X)%360+360)%360,W=Q===0?0:Q-360,K=this.#_.hueInterpolation||"shorter",j;if(K==="increasing")j=W;else if(K==="decreasing")j=Q;else if(K==="longer")j=Q<180?W:Q;else j=Q<=180?Q:W;let U=Math.sign(j),L=Math.asin(k.#J/2/k.#U)*180/Math.PI,q=Math.min(L,Math.max(0,(Math.abs(j)-0.01)/2));return{startDeg:X+U*q,sweepDeg:j-U*q*2}}#O(J){let Z=J*Math.PI/180;return{x:k.#X+k.#U*Math.cos(Z),y:k.#K+k.#U*Math.sin(Z)}}#M(J,Z){let $=J+Z,X=this.#O(J),Y=this.#O($),Q=Math.abs(Z)>180?1:0,W=Z>=0?1:0;return`M ${X.x} ${X.y} A ${k.#U} ${k.#U} 0 ${Q} ${W} ${Y.x} ${Y.y}`}#E(){let J=this.#O(180),Z=this.#O(0);return`M ${J.x} ${J.y} L ${Z.x} ${Z.y}`}#G(J){let Z=k.#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($)}")`}#N(){return[...this.#_.stops].sort((J,Z)=>(J.position??0)-(Z.position??0))}#P(){let J=this.#_.interpolationSpace||"srgb";if(J==="srgb")return"";if(k.#Z.has(J))return` in ${J} ${this.#_.hueInterpolation||"shorter"} hue`;return` in ${J}`}#T(){let J=this.#N(),Z=this.#P();if(this.#Q()){let X=(k.#V+90)%360,Y=this.#_.interpolationSpace,Q=(K)=>Y==="oklch"?`oklch(65% 0.25 ${K})`:`hsl(${K} 100% 50%)`,W=[0,300,240,180,120,60,0].map(Q).join(", ");return`conic-gradient(from ${X}deg in ${Y} decreasing hue, ${W})`}let $=J.map((X)=>`${X.color} ${X.position??0}%`).join(", ");return`linear-gradient(90deg${Z}, ${$})`}#f(){if(this.#j)return;let J=k.#J,Z=o("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},o("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":J})),$=_("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren(Z,$),this.#L=Z,this.#W=$,this.#j=!0}#D(){if(!this.#W)return;let J=this.#Q();if(this.#L)this.#L.style.display=J?"":"none";let Z=J?(()=>{let{startDeg:X,sweepDeg:Y}=this.#F();return this.#M(X,Y)})():this.#E(),$=this.#G(Z);this.#W.style.setProperty("-webkit-mask-image",$),this.#W.style.maskImage=$,this.#W.style.background=this.#T()}}A("fig-interpolation-swatch",k);class D extends HTMLElement{static observedAttributes=["axis","handle","items","indicator","disabled"];static#Z=6;static#X=['[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;#J=null;#V=!1;#q=new Map;#j=null;#L=null;#W=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.#c(),this.#M(),this.#U=new MutationObserver(()=>this.#M()),this.#U.observe(this,{childList:!0}),this.#_()}disconnectedCallback(){this.#U?.disconnect(),this.#U=null,this.#J?.disconnect(),this.#J=null,this.#r(),this.#JJ(),this.#m(),this.#W?.remove(),this.#W=null}attributeChangedCallback(J){if(this.isConnected){if(this.#$)this.#JJ();if(J==="indicator")this.#C();this.#_(),this.#M()}}refresh(){if(this.isConnected)this.#M()}#_(){if(!this.#Q){this.#J?.disconnect(),this.#J=null;return}if(this.#J)return;this.#J=new MutationObserver((J)=>{if(!J.some(($)=>$.target.parentElement===this&&!D.#K.has($.attributeName)&&!($.attributeName==="class"&&$.target===this.#j?.item))||this.#V)return;this.#V=!0,queueMicrotask(()=>{if(this.#V=!1,this.isConnected)this.#M()})}),this.#J.observe(this,{subtree:!0,attributes:!0})}get#$(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}get#z(){return(this.getAttribute("axis")||"vertical").trim().toLowerCase()==="horizontal"?"horizontal":"vertical"}get#Y(){return(this.getAttribute("handle")||"").trim()}get#Q(){return(this.getAttribute("items")||"").trim()}get#k(){return(this.getAttribute("indicator")||"default").trim().toLowerCase()}#F(){return[...this.children].filter((J)=>J.nodeType===Node.ELEMENT_NODE&&!J.hasAttribute("data-reorder-live"))}#O(){let J=this.#F(),Z=this.#Q;if(!Z)return J;try{return J.filter(($)=>$.matches(Z))}catch{return[]}}#M(){let J=this.#F(),Z=this.#O(),$=new Set(Z);for(let[Y,Q]of this.#q)if(!$.has(Y))Q.target.removeEventListener("pointerdown",Q.onPointerDown,!0),Q.target.removeEventListener("keydown",Q.onKeyDown),this.#S(Q),this.#q.delete(Y);this.#P(J),this.#E(J),this.#N(J.filter((Y)=>!$.has(Y)));let X=!this.#$&&Z.length>=2;if(this.#G(Z,X),!X){this.#r();return}for(let Y of Z){let Q=this.#f(Y),W=this.#q.get(Y);if(W&&W.target===Q)continue;if(W)W.target.removeEventListener("pointerdown",W.onPointerDown,!0),this.#q.delete(Y);if(!Q)continue;this.#D(Y,Q)}this.#T(Z)}#E(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")}#G(J,Z=!0){for(let $ of J){if(Z)$.setAttribute("data-reorder-item","");if(!$.hasAttribute("role"))$.setAttribute("role","listitem"),$.setAttribute("data-reorder-generated-role","")}}#N(J){for(let Z of J)if(!Z.hasAttribute("role"))Z.setAttribute("role","none"),Z.setAttribute("data-reorder-generated-role","")}#P(J){for(let Z of J)Z.querySelectorAll("[data-reorder-handle]").forEach(($)=>{$.removeAttribute("data-reorder-handle"),$.removeAttribute("aria-roledescription")})}#T(J){if(!this.#Y)return;for(let Z of J){let $=Z.querySelector(this.#Y);if($)$.setAttribute("data-reorder-handle",""),$.setAttribute("aria-roledescription","reorder handle")}}#f(J){if(this.#Y)return J.querySelector(this.#Y);return J}#D(J,Z){let $=(j)=>{if(this.#$||this.#O().length<2)return;if(j.button!==0)return;if(!this.#Y&&this.#y(j.target,J))return;this.#s(j,J,Z)},X=Z.getAttribute("tabindex"),Y=Z.getAttribute("aria-label"),Q=Z.getAttribute("role"),W=J.getAttribute("aria-label")||J.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";if(Z.setAttribute("tabindex","0"),Z.setAttribute("aria-label",`Move ${W}`),Z!==J&&!Z.hasAttribute("role"))Z.setAttribute("role","button");let K=(j)=>{if(this.#$)return;let U=this.#z==="horizontal",L=U?"ArrowLeft":"ArrowUp",q=U?"ArrowRight":"ArrowDown";if(j.key!==L&&j.key!==q&&j.key!=="Home"&&j.key!=="End")return;j.preventDefault(),j.stopPropagation();let z=this.#O(),O=z.indexOf(J),M=O;if(j.key===L)M=Math.max(0,O-1);else if(j.key===q)M=Math.min(z.length-1,O+1);else if(j.key==="Home")M=0;else if(j.key==="End")M=z.length-1;if(M===O){this.#A(`${W}, position ${O+1} of ${z.length}`);return}this.#d(J,M),this.#M(),this.#f(J)?.focus(),this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:O,newIndex:M,item:J}})),this.#A(`${W}, position ${M+1} of ${z.length}`)};Z.addEventListener("pointerdown",$,!0),Z.addEventListener("keydown",K),this.#q.set(J,{target:Z,onPointerDown:$,onKeyDown:K,originalTabIndex:X,originalAriaLabel:Y,originalRole:Q})}#S(J){let{target:Z,originalTabIndex:$,originalAriaLabel:X,originalRole:Y}=J;if($===null)Z.removeAttribute("tabindex");else Z.setAttribute("tabindex",$);if(X===null)Z.removeAttribute("aria-label");else Z.setAttribute("aria-label",X);if(Y===null)Z.removeAttribute("role");else Z.setAttribute("role",Y)}#c(){if(this.#W?.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.#W=J,document.body.appendChild(J)}#A(J){if(!this.#W)return;this.#W.textContent="",requestAnimationFrame(()=>{if(this.#W)this.#W.textContent=J})}#y(J,Z){let $=J;while($&&$!==Z){if($ instanceof Element){for(let X of D.#X)if($.matches(X))return!0}$=$.parentElement}return!1}static#x="fig-reorder-dragging";static#h(J){document.body.classList.toggle(D.#x,J)}#s(J,Z,$){this.#JJ();let X={item:Z,target:$,pointerId:J.pointerId,oldIndex:this.#O().indexOf(Z),targetIndex:this.#O().indexOf(Z),startX:J.clientX,startY:J.clientY,active:!1,onMove:null,onUp:null,onKeyDown:null};X.onMove=(Y)=>{if(Y.pointerId!==X.pointerId)return;let Q=Y.clientX-X.startX,W=Y.clientY-X.startY;if(!X.active){if(Q*Q+W*W<D.#Z*D.#Z)return;X.active=!0,J.preventDefault(),J.stopPropagation(),Z.classList.add("dragging"),D.#h(!0);try{$.setPointerCapture(X.pointerId)}catch{}}Y.preventDefault();let K=this.#z==="horizontal"?Y.clientX:Y.clientY,j=this.#b(K);X.targetIndex=j,this.#t(j,Z)},X.onKeyDown=(Y)=>{if(Y.key!=="Escape"||!X.active)return;Y.preventDefault(),this.#l(X,!0)},X.onUp=(Y)=>{if(Y.pointerId!==X.pointerId)return;this.#l(X,Y.type==="pointercancel")},this.#j=X,window.addEventListener("pointermove",X.onMove),window.addEventListener("pointerup",X.onUp),window.addEventListener("pointercancel",X.onUp),window.addEventListener("keydown",X.onKeyDown)}#b(J){let Z=this.#O(),$=this.#z==="horizontal";for(let X=0;X<Z.length;X++){let Y=Z[X].getBoundingClientRect(),Q=$?Y.left+Y.width/2:Y.top+Y.height/2;if(J<Q)return X}return Z.length}#R(J,Z){let $=this.#O(),X=$.indexOf(J);if(X===-1)return!1;let Y=Math.max(0,Math.min(Z,$.length));if(Z===X)return!1;if(Y>=$.length&&X===$.length-1)return!1;return!0}#w(J){if(!J.length)return null;let Z=1/0,$=-1/0,X=1/0,Y=-1/0;for(let Q of J){let W=Q.getBoundingClientRect();Z=Math.min(Z,W.left),$=Math.max($,W.right),X=Math.min(X,W.top),Y=Math.max(Y,W.bottom)}return{left:Z,top:X,width:$-Z,height:Y-X}}#i(){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}#g(){if(this.#L)return this.#L;let J=document.createElement("div");return J.className="fig-reorder-indicator",J.setAttribute("data-axis",this.#z),J.classList.toggle("fig-reorder-indicator-ring",this.#k==="ring"),this.#i().appendChild(J),this.#L=J,J}#C(){this.#L?.classList.toggle("fig-reorder-indicator-ring",this.#k==="ring")}#t(J,Z){let $=this.#O();if(!this.#R(Z,J)){this.#m();return}let X=this.#w($);if(!X){this.#m();return}let Y=this.#g();if(Y.setAttribute("data-axis",this.#z),this.#z==="horizontal"){let W;if(J<=0)W=$[0].getBoundingClientRect().left;else if(J>=$.length)W=$[$.length-1].getBoundingClientRect().right;else W=$[J].getBoundingClientRect().left;Y.style.left=`${W-1}px`,Y.style.top=`${X.top}px`,Y.style.width="2px",Y.style.height=`${X.height}px`;return}let Q;if(J<=0)Q=$[0].getBoundingClientRect().top;else if(J>=$.length)Q=$[$.length-1].getBoundingClientRect().bottom;else Q=$[J].getBoundingClientRect().top;Y.style.left=`${X.left}px`,Y.style.top=`${Q-1}px`,Y.style.width=`${X.width}px`,Y.style.height="2px"}#m(){this.#L?.remove(),this.#L=null}#e(J,Z){let $=this.#O(),X=Math.max(0,Math.min(Z,$.length));if(X>=$.length){let Q=$[$.length-1];if(Q&&Q!==J)Q.after(J);return}let Y=$[X];if(Y!==J)this.insertBefore(J,Y)}#d(J,Z){let $=this.#O().filter((Y)=>Y!==J),X=$[Z]??null;if(X)this.insertBefore(J,X);else if($.length)$[$.length-1].after(J);else this.appendChild(J)}#l(J,Z){let{item:$,oldIndex:X,active:Y,onMove:Q,onUp:W,onKeyDown:K}=J;if(window.removeEventListener("pointermove",Q),window.removeEventListener("pointerup",W),window.removeEventListener("pointercancel",W),window.removeEventListener("keydown",K),Y){if(!Z){this.#e($,J.targetIndex);let j=this.#O().indexOf($);if(j!==-1&&j!==X){this.dispatchEvent(new CustomEvent("reorder",{bubbles:!0,detail:{oldIndex:X,newIndex:j,item:$}}));let U=$.getAttribute("aria-label")||$.textContent?.trim().replace(/\s+/g," ").slice(0,80)||"item";this.#A(`${U}, position ${j+1} of ${this.#O().length}`)}}}if($.classList.remove("dragging"),D.#h(!1),this.#m(),this.#j===J)this.#j=null}#r(){for(let[,J]of this.#q)J.target.removeEventListener("pointerdown",J.onPointerDown,!0),J.target.removeEventListener("keydown",J.onKeyDown),this.#S(J);this.#q.clear()}#JJ(){if(!this.#j)return;this.#l(this.#j,!0)}}A("fig-reorder",D);