@rogieking/figui3 8.0.3 → 8.2.0

package/dist/fig.js

@@ -186,7 +186,7 @@ var wq=(q,Q)=>()=>(q&&(Q=q(q=0)),Q);var yq={};var D0=wq(()=>{/*! Vendored from @
     </svg>
     ${J}
   </fig-button>
-</div>`,this.#q=this.querySelector("fig-input-text"),this.#$=this.querySelector("fig-button"),this.#Q&&this.#J&&this.#$){if(!this.#J.hasAttribute("type"))this.#J.setAttribute("type","dropdown");if(!this.#J.hasAttribute("label"))this.#J.setAttribute("label",$);this.#$.append(this.#J)}this.#Z=this.querySelector("fig-dropdown"),this.#O()}#Y(){this.#R(),this.#Z?.addEventListener("input",this.#_),this.#q?.addEventListener("input",this.#W),this.#q?.addEventListener("change",this.#X)}#R(){this.#Z?.removeEventListener("input",this.#_),this.#q?.removeEventListener("input",this.#W),this.#q?.removeEventListener("change",this.#X)}#z(q){q.stopPropagation();let Q=q.target.closest("fig-dropdown")?.value??"";if(this.#j=!0,this.setAttribute("value",Q),this.#j=!1,this.#q)this.#q.setAttribute("value",Q);this.#B(),this.#H()}#M(q){q.stopPropagation();let Q=q.target.value??"";this.#j=!0,this.setAttribute("value",Q),this.#j=!1,this.#B()}#L(q){q.stopPropagation();let Q=q.target.value??"";this.#j=!0,this.setAttribute("value",Q),this.#j=!1,this.#H()}#B(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value}}))}#H(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value}}))}#k(){return(this.getAttribute("options")||"").split(",").map((q)=>q.trim()).filter(Boolean)}#T(){return(this.getAttribute("aria-label")||this.getAttribute("placeholder")||"Combo input").trim()}#A(){return`${this.#T()} options`}#O(){if(this.#q)this.#N.forEach((q)=>{let Q=this.getAttribute(q);if(Q===null)this.#q.removeAttribute(q);else this.#q.setAttribute(q,Q)});if(this.#Z&&!this.#Z.hasAttribute("aria-label"))this.#Z.setAttribute("label",this.#A())}#f(q){if(this.#q)if(q)this.#q.setAttribute("disabled","");else this.#q.removeAttribute("disabled");if(this.#$)if(q)this.#$.setAttribute("disabled","");else this.#$.removeAttribute("disabled");if(this.#Z)if(q)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled")}focus(){this.#q?.focus()}attributeChangedCallback(q,Q,Z){if(Q===Z)return;switch(q){case"options":if(this.#Z&&!this.#Q){let $=this.#k();this.#Z.replaceChildren(...$.map((J)=>{let j=document.createElement("option");return j.textContent=J,j}))}break;case"placeholder":if(this.#q)this.#q.setAttribute("placeholder",Z||"");this.#O();break;case"value":if(!this.#j&&this.#q)this.#q.setAttribute("value",Z||"");break;case"disabled":this.#f(Z!==null&&Z!=="false");break;case"aria-label":case"aria-labelledby":case"aria-describedby":case"aria-invalid":case"aria-required":this.#O();break}}}O("fig-combo-input",Zq);class M0 extends HTMLElement{#Q="color";#q=null;#Z=!1;constructor(){super();this.#q=this.#X.bind(this)}static get observedAttributes(){return["background","size","selected","disabled","alpha","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.#_(),this.#$(),this.#W()}#$(){let q=this.getAttribute("alpha");if(q!==null)this.style.setProperty("--alpha",q);else this.style.removeProperty("--alpha")}#J(q){if(!q)return"color";let Q=q.toLowerCase();if(Q.includes("gradient"))return"gradient";if(Q.includes("url("))return"image";return"color"}#j(q){if(!q)return"#D9D9D9";if(q.startsWith("#"))return q.slice(0,7);try{let{ctx:Q}=z0(1,1);return Q.fillStyle=q,Q.fillStyle}catch{return"#D9D9D9"}}#N(q){if(!q||!q.includes("var("))return q;let Q=this.style.background;this.style.background=q;let Z=getComputedStyle(this),$=Z.backgroundImage,J=Z.backgroundColor;if(this.style.background=Q,$&&$!=="none")return $;return J||q}#_(){let q=this.getAttribute("background")||"#D9D9D9",Q=q.includes("var("),Z=Q?this.#N(q):q,$=this.#J(Z);if($!==this.#Q||!this.input){if(this.#Q=$,this.setAttribute("data-type",this.#Q),this.input)this.input.removeEventListener("input",this.#q);if(this.#Q==="color"){let j=this.#j(Z);if(this.innerHTML=`<div></div><input type="color" value="${j}" />`,this.input=this.querySelector("input"),!Q)this.input.addEventListener("input",this.#q);this.#W()}else this.innerHTML="<div></div>",this.input=null,this.#W()}else if(this.#Q==="color"&&this.input){let j=this.#j(Z);if(this.input.value!==j)this.input.value=j}let J=/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(q);this.style.setProperty("--swatch-background",J?q:`linear-gradient(${q}, ${q})`)}#W(){let q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";if(this.setAttribute("aria-disabled",q?"true":"false"),this.input){this.input.disabled=q;let Q=this.getAttribute("aria-labelledby"),Z=this.getAttribute("aria-label")||"Color swatch",$=this.getAttribute("aria-describedby");if(Q)this.input.setAttribute("aria-labelledby",Q),this.input.removeAttribute("aria-label");else this.input.setAttribute("aria-label",Z),this.input.removeAttribute("aria-labelledby");if($)this.input.setAttribute("aria-describedby",$);else this.input.removeAttribute("aria-describedby");this.removeAttribute("role"),this.removeAttribute("aria-hidden");return}if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-hidden","true");else this.setAttribute("role","img"),this.removeAttribute("aria-hidden")}#X(q){this.#Z=!0,this.setAttribute("background",q.target.value),this.#Z=!1}get background(){return this.getAttribute("background")}set background(q){this.setAttribute("background",q)}focus(){this.input?.focus()}attributeChangedCallback(q,Q,Z){if(Q===Z)return;if(q==="background"){if(this.#Z){let $=/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(Z);this.style.setProperty("--swatch-background",$?Z:`linear-gradient(${Z}, ${Z})`);return}this.#_()}else if(q==="alpha")this.#$();else if(q==="disabled"||q==="aria-label"||q==="aria-labelledby"||q==="aria-describedby")this.#W()}get alpha(){return this.getAttribute("alpha")}set alpha(q){if(q===null||q===void 0)this.removeAttribute("alpha");else this.setAttribute("alpha",q)}}O("fig-swatch",M0);class $q extends M0{}O("fig-chit",$q);var Jq=["load","error"],jq=["loadstart","progress","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","durationchange","timeupdate","ratechange","resize","volumechange"],iq=[...new Set([...Jq,...jq])];class K0 extends HTMLElement{#Q=null;#q=null;#Z=null;#$=null;#J=null;#j=null;#N=null;#_=this.#s.bind(this);#W=this.#a.bind(this);#X=this.#Q0.bind(this);#G=this.#Z0.bind(this);#K=this.#d.bind(this);#U=null;#Y=null;#R=null;#z=void 0;#M=null;#L=null;#B=null;#H=null;#k=null;#T=null;#A=null;static get observedAttributes(){return["src","type","alt","upload","loading-indicator","label","aspect-ratio","fit","checkerboard","caption","controls","autoplay","loop","muted","poster","aria-label","aria-labelledby","title"]}get mediaKind(){return(this.getAttribute("type")||"image").toLowerCase()==="video"?"video":"image"}get src(){return this.#Q}set src(q){if(this.#Q=q||"",q===null||q===void 0||q==="")this.removeAttribute("src");else this.setAttribute("src",q)}get file(){return this.#N}#O(){return this.#j||this.#Q||""}async getBase64(){if(this.mediaKind!=="image")return null;if(!this.#O())return null;if(!this.#q)return null;try{if(typeof this.#q.decode==="function")await this.#q.decode();else if(!this.#q.complete)await new Promise(($,J)=>{this.#q.addEventListener("load",$,{once:!0}),this.#q.addEventListener("error",J,{once:!0})})}catch{}let q=this.#q.naturalWidth,Q=this.#q.naturalHeight;if(!(q>0)||!(Q>0))return null;let Z=document.createElement("canvas");return Z.width=q,Z.height=Q,Z.getContext("2d").drawImage(this.#q,0,0),Z.toDataURL()}connectedCallback(){this.#Q=this.getAttribute("src")||"";let q=this.getAttribute("aspect-ratio");if(q)this.style.setProperty("--fig-media-aspect-ratio",q);else this.style.setProperty("--fig-media-aspect-ratio","4/3");let Q=this.getAttribute("fit");if(Q)this.style.setProperty("--fig-media-fit",Q);if(this.querySelectorAll("fig-swatch[data-generated]").forEach(($)=>$.remove()),this.#I(),this.#S(),this.#D(),this.#h(),this.#V(),this.#w(),this.#b(),this.hasAttribute("upload")&&this.getAttribute("upload")!=="false"&&!this.querySelector("fig-input-file[data-generated]"))this.#c();this.#$=this.querySelector("fig-input-file[data-generated]"),this.#$?.removeEventListener("change",this.#_),this.#$?.addEventListener("change",this.#_)}disconnectedCallback(){if(this.#$?.removeEventListener("change",this.#_),this.#F(),this.#f(),this.#o(),this.#J)URL.revokeObjectURL(this.#J),this.#J=null;this.#j=null}#f(){if(!this.#q)return;if(iq.forEach((q)=>{this.#q.removeEventListener(q,this.#K)}),this.#q.tagName==="VIDEO")this.#q.removeEventListener("play",this.#W),this.#q.removeEventListener("pause",this.#X),this.#q.removeEventListener("ended",this.#G)}#D(){if(this.#f(),!this.#q)return;if((this.#q.tagName==="VIDEO"?jq:Jq).forEach((Q)=>{this.#q.addEventListener(Q,this.#K)}),this.#q.tagName!=="VIDEO")return;this.#q.addEventListener("play",this.#W),this.#q.addEventListener("pause",this.#X),this.#q.addEventListener("ended",this.#G)}#C(){return this.mediaKind==="image"&&this.getAttribute("loading-indicator")!=="false"&&this.#Z?.hasAttribute("data-generated")&&this.#q?.hasAttribute("data-generated")}#V(){let q=this.#O();if(!q||!this.#C()){this.#F();return}if(this.#q?.tagName==="IMG"&&this.#q.complete&&this.#q.currentSrc){this.#F();return}if(this.#R===q)return;this.#F(),this.#R=q,this.#z=this.getAttribute("aria-busy"),this.setAttribute("aria-busy","true"),this.#Y=setTimeout(()=>{if(this.#Y=null,this.#R!==q||!this.isConnected||!this.#C())return;let Q=document.createElement("fig-spinner");Q.setAttribute("data-generated",""),Q.setAttribute("data-loading-indicator",""),Q.setAttribute("slot","overlay"),Q.setAttribute("aria-hidden","true"),this.append(Q),this.#U=Q},150)}#F(){if(this.#Y!==null)clearTimeout(this.#Y),this.#Y=null;if(this.#U?.remove(),this.#U=null,this.#R=null,this.#z!==void 0){if(this.#z===null)this.removeAttribute("aria-busy");else this.setAttribute("aria-busy",this.#z);this.#z=void 0}}#I(){if(this.#Z?.isConnected)return;let q=this.querySelector(":scope > fig-preview");if(q){this.#Z=q;return}let Q=document.createElement("fig-preview");Q.setAttribute("data-generated",""),this.prepend(Q),this.#Z=Q}#P(){let q=this.mediaKind==="video"?"video":"img";return this.querySelector(`${q}:not([data-generated])`)}#S(){let q=this.#P();if(q){if(this.#I(),this.#q&&this.#q!==q){if(this.#f(),this.#q.hasAttribute("data-generated"))this.#q.remove()}if(this.#q=q,this.#Z&&q.parentElement!==this.#Z)this.#Z.append(q);this.#D(),this.#w();return}this.#I();let Q=this.mediaKind==="video"?"VIDEO":"IMG";if(this.#q&&this.#q.tagName!==Q){if(this.#f(),this.#q.hasAttribute("data-generated"))this.#q.remove();this.#q=null}if(this.#q)return;if(this.mediaKind==="video"){let Z=document.createElement("video");Z.setAttribute("data-generated",""),Z.className="fig-media-element",Z.setAttribute("playsinline",""),Z.preload="auto",this.#Z.append(Z),this.#q=Z;let $=()=>{if(this.#q?.autoplay)return;try{this.#q.currentTime=0.001}catch{}};this.#q.addEventListener("loadedmetadata",$,{once:!0})}else{let Z=document.createElement("img");Z.setAttribute("data-generated",""),Z.className="fig-media-element",Z.loading="lazy",Z.decoding="async",Z.alt=this.getAttribute("alt")||"",this.#Z.append(Z),this.#q=Z}this.#D()}#w(){if(!this.#q)return;if(this.#q.tagName==="IMG"){if(this.hasAttribute("alt")||this.#q.hasAttribute("data-generated"))this.#q.alt=this.getAttribute("alt")||"";return}if(this.#q.tagName!=="VIDEO")return;["aria-label","aria-labelledby","title"].forEach((q)=>{let Q=this.getAttribute(q);if(Q===null)this.#q.removeAttribute(q);else this.#q.setAttribute(q,Q)})}#y(){return this.querySelector(":scope > figcaption:not([data-generated])")}#g(){return Array.from(this.querySelectorAll(":scope > figcaption[data-generated]"))}#b(){let q=this.#y(),Q=this.#g();if(q){Q.forEach((j)=>j.remove());return}let Z=this.getAttribute("caption")||"";if(!Z){Q.forEach((j)=>j.remove());return}let $=Q[0]||document.createElement("figcaption");if(Q.slice(1).forEach((j)=>j.remove()),!$.hasAttribute("data-generated"))$.setAttribute("data-generated","");if($.textContent!==Z)$.textContent=Z;let J=this.querySelector(":scope > fig-media-controls");if(J)J.before($);else if(this.#Z?.isConnected)this.#Z.after($);else if(!$.isConnected)this.append($)}#E(q,Q=!1){if(!this.hasAttribute(q))return Q;return this.getAttribute(q)!=="false"}#h(){if(!this.#q)return;if(!this.#q.hasAttribute("data-generated"))return;let q=this.#O();if(this.#q.getAttribute("src")!==q){if(q)this.#q.setAttribute("src",q);else if(this.#q.removeAttribute("src"),this.#q.tagName==="VIDEO")this.#q.load()}if(this.#q.tagName==="IMG"){this.#w(),this.#V();return}let Q=this.getAttribute("poster");if(Q)this.#q.setAttribute("poster",Q);else this.#q.removeAttribute("poster");this.#q.controls=!1,this.#q.removeAttribute("controls"),this.#q.autoplay=this.#E("autoplay",!1),this.#q.loop=this.#E("loop",!1),this.#q.muted=this.#E("muted",!1),this.#q.playsInline=!0,this.#w(),this.#m(),this.#v(),this.#V()}get mediaEl(){return this.#q}#x(){if(this.mediaKind!=="video")return!1;return Boolean(this.#O())}#v(){let q=this.#M||this.querySelector(":scope > fig-media-controls");if(!q)return;if(this.mediaKind!=="video")return;if(this.#x()){if(q.hasAttribute("data-fig-empty-disabled"))q.removeAttribute("disabled"),q.removeAttribute("data-fig-empty-disabled");return}q.setAttribute("disabled",""),q.setAttribute("data-fig-empty-disabled",""),q.playing=!1,q.time=0,q.duration=0}#m(){if(this.mediaKind!=="video"){this.#o();return}let q=this.querySelector(":scope > fig-media-controls:not([data-generated])");if(q){if(this.#M!==q)this.#o(),this.#M=q;this.#l(),this.#v();return}if(this.#E("controls",!1))this.#r();else this.#o()}#r(){let q=Array.from(this.querySelectorAll(":scope > fig-media-controls[data-generated]")),Q=q[0];if(q.slice(1).forEach(($)=>$.remove()),Q){this.#M=Q,this.#l(),this.#v();return}let Z=document.createElement("fig-media-controls");Z.setAttribute("data-generated",""),this.append(Z),this.#M=Z,this.#l(),this.#v()}#l(){if(!this.#M||!this.#q)return;if(this.#L===this.#q&&this.#B===this.#M){this.#v();return}this.#u();let q=this.#M,Q=this.#q;this.#L=Q,this.#B=q;let Z=null,$=()=>{if(this.#v(),!this.#x())return;if(q.playing=!Q.paused&&!Q.ended,Number.isFinite(Q.duration))q.duration=Q.duration;if(Z!==null)if(Math.abs(Q.currentTime-Z)<0.25)Z=null;else return;q.time=Q.currentTime||0},J=()=>{if(!this.#x())return;let W=Q.play?.();if(W&&typeof W.catch==="function")W.catch(()=>{})},j=()=>Q.pause?.(),_=(W)=>{if(!this.#x())return;let N=Number(W?.detail?.time);if(!Number.isFinite(N))return;Z=N;try{Q.currentTime=N}catch{}};this.#H=$,this.#k=J,this.#T=j,this.#A=_,Q.addEventListener("play",$),Q.addEventListener("pause",$),Q.addEventListener("ended",$),Q.addEventListener("timeupdate",$),Q.addEventListener("loadedmetadata",$),Q.addEventListener("durationchange",$),Q.addEventListener("seeked",$),q.addEventListener("play",J),q.addEventListener("pause",j),q.addEventListener("seek",_),$()}#u(){let q=this.#L,Q=this.#B;if(q&&this.#H)q.removeEventListener("play",this.#H),q.removeEventListener("pause",this.#H),q.removeEventListener("ended",this.#H),q.removeEventListener("timeupdate",this.#H),q.removeEventListener("loadedmetadata",this.#H),q.removeEventListener("durationchange",this.#H),q.removeEventListener("seeked",this.#H);if(Q){if(this.#k)Q.removeEventListener("play",this.#k);if(this.#T)Q.removeEventListener("pause",this.#T);if(this.#A)Q.removeEventListener("seek",this.#A)}this.#L=null,this.#B=null,this.#H=null,this.#k=null,this.#T=null,this.#A=null}#o(){this.#u(),this.querySelectorAll(":scope > fig-media-controls[data-generated]").forEach((q)=>{q.remove()}),this.#M=null}toggle(){if(!this.#q||this.mediaKind!=="video")return;if(this.#q.paused||this.#q.ended)this.play();else this.pause()}play(){if(this.mediaKind!=="video"||!this.#q)return;let q=this.#q.play();if(q&&typeof q.catch==="function")q.catch(()=>{})}pause(){if(this.mediaKind!=="video"||!this.#q)return;this.#q.pause()}#c(){let q=document.createElement("fig-input-file");q.setAttribute("data-generated",""),q.setAttribute("accepts",this.mediaKind==="video"?"video/*":"image/*"),q.setAttribute("variant","overlay");let Q=this.getAttribute("label")||"Upload";if(q.setAttribute("label",this.#Q?"Replace":Q),this.#N?.name)q.setAttribute("filename",this.#N.name);else if(this.#Q)q.setAttribute("url",this.#Q);q.addEventListener("change",this.#_),this.#I(),this.#Z.append(q),this.#$=q}#i(){if(this.#$)this.#$.removeEventListener("change",this.#_),this.#$.remove(),this.#$=null}#s(q){if(q.target!==this.#$)return;let Q=q.detail?.files?.[0],Z=q.detail?.cleared===!0;if(!Q){if(this.#J)URL.revokeObjectURL(this.#J),this.#J=null;if(this.#N=null,this.#j=null,Z)this.src="";if(this.#h(),this.#$){let $=this.getAttribute("label")||"Upload";if(this.#$.setAttribute("label",this.#Q?"Replace":$),this.#$.removeAttribute("filename"),this.#Q)this.#$.setAttribute("url",this.#Q);else this.#$.removeAttribute("url")}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}));return}if(this.#J)URL.revokeObjectURL(this.#J);if(this.#N=Q,this.#J=URL.createObjectURL(Q),this.#j=this.#J,this.#h(),this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{file:Q,src:this.#J}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0})),this.#$)this.#$.removeAttribute("url"),this.#$.setAttribute("filename",Q.name),this.#$.setAttribute("label","Replace")}#p(q){if(!this.#q)return;this.dispatchEvent(new CustomEvent(q,{bubbles:!0,cancelable:!1,composed:!0,detail:{src:this.#Q||"",currentTime:this.#q.currentTime,duration:this.#q.duration}}))}#d(q){let Q=this.#q;if(!Q||q.currentTarget!==Q)return;if(Q.tagName==="IMG"&&(q.type==="load"||q.type==="error"))this.#F();let Z={src:this.#O(),media:Q,originalEvent:q};if(Q.tagName==="VIDEO")Z.currentTime=Q.currentTime,Z.duration=Q.duration,Z.readyState=Q.readyState,Z.networkState=Q.networkState,Z.error=Q.error;this.dispatchEvent(new CustomEvent(q.type,{bubbles:!0,cancelable:!1,composed:!0,detail:Z}))}#a(){this.#p("play")}#Q0(){this.#p("pause")}#Z0(){this.#p("ended")}attributeChangedCallback(q,Q,Z){if(Q===Z)return;if(q==="src"){let $=Z||"",J=$&&($===this.#j||$===this.#J);if(this.#Q=$,this.#J&&!J)URL.revokeObjectURL(this.#J),this.#J=null,this.#j=null,this.#N=null;if(this.#h(),this.#$){let j=this.getAttribute("label")||"Upload";if(this.#$.setAttribute("label",this.#Q?"Replace":j),this.#Q)if(this.#N?.name)this.#$.removeAttribute("url"),this.#$.setAttribute("filename",this.#N.name);else this.#$.setAttribute("url",this.#Q),this.#$.removeAttribute("filename");else this.#$.removeAttribute("url"),this.#$.removeAttribute("filename")}}if(q==="type"){if(this.#S(),this.#h(),this.#$)this.#$.setAttribute("accepts",this.mediaKind==="video"?"video/*":"image/*")}if(["alt","aria-label","aria-labelledby","title"].includes(q))this.#w();if(q==="upload"){let $=Z!==null&&Z!=="false";if($&&!this.#$)this.#c();else if(!$)this.#i()}if(q==="loading-indicator")this.#V();if(q==="aspect-ratio")if(Z)this.style.setProperty("--fig-media-aspect-ratio",Z);else this.style.removeProperty("--fig-media-aspect-ratio");if(q==="fit")if(Z)this.style.setProperty("--fig-media-fit",Z);else this.style.removeProperty("--fig-media-fit");if(q==="label"&&this.#$){let $=this.getAttribute("label")||"Upload";this.#$.setAttribute("label",this.#Q?"Replace":$)}if(["controls","autoplay","loop","muted","poster"].includes(q))this.#h();if(q==="caption")this.#b()}}O("fig-media",K0);class _q extends K0{get mediaKind(){return"image"}}O("fig-image",_q);class Wq extends K0{get mediaKind(){return"video"}}O("fig-video",Wq);class Nq extends HTMLElement{static get observedAttributes(){return["src","alt","label","text","sublabel","selected","disabled","full","size","aspect-ratio","fit","label-line-clamp"]}#Q=null;#q=null;#Z=null;#$=null;#J=!1;#j=new MutationObserver((q)=>{if(!q.some((Z)=>[...Z.addedNodes,...Z.removedNodes].some(($)=>$ instanceof Element&&($.matches("fig-image:not([data-generated]), fig-media:not([data-generated]), fig-preview:not([data-generated]), fig-footer:not([data-generated])")||$.querySelector("fig-image:not([data-generated]), fig-media:not([data-generated]), fig-preview:not([data-generated]), fig-footer:not([data-generated])"))))||!this.isConnected)return;this.#U(),this.#R()});connectedCallback(){this.#j.observe(this,{childList:!0,subtree:!0}),this.#U(),this.#R()}disconnectedCallback(){this.#j.disconnect()}attributeChangedCallback(){if(!this.isConnected)return;this.#U(),this.#R()}#N(){return this.getAttribute("label")??this.getAttribute("text")??""}#_(){return this.getAttribute("sublabel")??""}#W(){return this.getAttribute("label-line-clamp")==="2"?"2":"1"}#X(){return Boolean(this.getAttribute("src"))}#G(){return this.querySelector(":scope > fig-image:not([data-generated]), :scope > fig-media:not([data-generated]), :scope > fig-preview:not([data-generated])")}#K(){this.querySelectorAll(":scope > .fig-card-link").forEach((q)=>{q.querySelectorAll(":scope > .fig-card-media").forEach((Q)=>{while(Q.firstChild)q.insertBefore(Q.firstChild,Q);Q.remove()});while(q.firstChild)this.insertBefore(q.firstChild,q);q.remove()})}#U(){if(this.#K(),!this.#X()){this.#Y();return}let q=this.#G();if(this.#J=Boolean(q),q)this.querySelectorAll(":scope > [data-generated]:not(fig-footer)").forEach((Z)=>Z.remove()),this.#q=null;if(!this.#J){if(this.#q=this.querySelector(":scope > fig-image[data-generated]")||null,!this.#q)this.querySelectorAll(":scope > fig-image, :scope > fig-media, :scope > fig-preview").forEach((Z)=>{if(Z.hasAttribute("data-generated"))Z.remove()}),this.#q=document.createElement("fig-image"),this.#q.setAttribute("data-generated",""),this.#q.setAttribute("full",""),this.#q.setAttribute("size","auto"),this.prepend(this.#q)}if(!Boolean(this.#N()||this.#_())){this.querySelector(":scope > fig-footer[data-generated]")?.remove(),this.#Q=null,this.#Z=null,this.#$=null;return}if(!this.#Q||!this.#Q.isConnected){if(this.#Q=this.querySelector(":scope > fig-footer[data-generated]"),!this.#Q)this.#Q=document.createElement("fig-footer"),this.#Q.setAttribute("data-generated",""),this.appendChild(this.#Q)}if(!this.#Z||!this.#Z.isConnected){if(this.#Z=this.#Q.querySelector(":scope > .fig-card-label[data-generated]"),!this.#Z)this.#Z=document.createElement("label"),this.#Z.className="fig-card-label",this.#Z.setAttribute("data-generated",""),this.#Q.appendChild(this.#Z)}if(!this.#$||!this.#$.isConnected){if(this.#$=this.#Q.querySelector(":scope > .fig-card-sublabel[data-generated]"),!this.#$)this.#$=document.createElement("label"),this.#$.className="fig-card-sublabel",this.#$.setAttribute("data-generated",""),this.#Z.after(this.#$)}}#Y(){if(this.#K(),this.querySelectorAll(":scope > [data-generated]").forEach((Q)=>Q.remove()),this.#q=null,this.#J=!0,this.#Q=null,this.#Z=null,this.#$=null,!this.#N()&&!this.#_())return;this.#Q=document.createElement("fig-footer"),this.#Q.setAttribute("data-generated",""),this.#Z=document.createElement("label"),this.#Z.className="fig-card-label",this.#Z.setAttribute("data-generated",""),this.#Q.appendChild(this.#Z);let q=this.#_();if(this.#$=null,q)this.#$=document.createElement("label"),this.#$.className="fig-card-sublabel",this.#$.setAttribute("data-generated",""),this.#Q.appendChild(this.#$);this.appendChild(this.#Q)}#R(){if(!this.#X()){this.#z();return}let q=T(this,"disabled"),Q=this.#N(),Z=this.#_(),$=this.#W();this.style.setProperty("--fig-card-label-line-clamp",$),this.setAttribute("role","group");let J=[Q,Z].filter(Boolean).join(", ");if(J)this.setAttribute("aria-label",J);else this.removeAttribute("aria-label");if(q)this.setAttribute("aria-disabled","true");else this.removeAttribute("aria-disabled");if(this.#q&&!this.#J){let j=this.getAttribute("src"),_=this.getAttribute("alt"),W=this.getAttribute("aspect-ratio")||"1/1",N=this.getAttribute("fit")||"contain",K=_!=null?_:"";if(j)this.#q.setAttribute("src",j);else this.#q.removeAttribute("src");this.#q.setAttribute("alt",K),this.#q.setAttribute("aspect-ratio",W),this.#q.setAttribute("fit",N),this.#q.setAttribute("full",""),this.#q.setAttribute("size","auto")}if(this.#Z)this.#Z.textContent=Q,this.#Z.hidden=!Q;if(this.#$)this.#$.textContent=Z,this.#$.hidden=!Z;if(this.#Q)this.#Q.hidden=!Q&&!Z}#z(){let q=T(this,"disabled"),Q=this.#N(),Z=this.#_();this.style.setProperty("--fig-card-label-line-clamp",this.#W()),this.setAttribute("role","group");let $=[Q,Z].filter(Boolean).join(", ");if($)this.setAttribute("aria-label",$);else this.removeAttribute("aria-label");if(q)this.setAttribute("aria-disabled","true");else this.removeAttribute("aria-disabled");if(this.#Z)this.#Z.textContent=Q,this.#Z.hidden=!Q;if(this.#$)this.#$.textContent=Z}}O("fig-card",Nq);class Kq extends HTMLElement{#Q=null;#q=null;#Z=null;#$=null;#J=!1;#j=!1;static get observedAttributes(){return["playing","duration","time","disabled"]}connectedCallback(){this.#N(),this.#G(),this.#K(),this.#_()}get playing(){return this.hasAttribute("playing")&&this.getAttribute("playing")!=="false"}set playing(q){if(q)this.setAttribute("playing","");else this.removeAttribute("playing")}get duration(){let q=Number(this.getAttribute("duration"));return Number.isFinite(q)&&q>=0?q:0}set duration(q){let Q=Number(q);if(!Number.isFinite(Q)||Q<0){this.removeAttribute("duration");return}this.setAttribute("duration",String(Q))}get time(){let q=Number(this.getAttribute("time"));return Number.isFinite(q)&&q>=0?q:0}set time(q){let Q=Number(q);if(!Number.isFinite(Q)||Q<0){this.removeAttribute("time");return}this.setAttribute("time",String(Q))}get disabled(){return T(this,"disabled")}set disabled(q){if(q)this.setAttribute("disabled","");else this.removeAttribute("disabled")}attributeChangedCallback(q){if(!this.#j)return;if(q==="playing")this.#G();if(q==="duration"||q==="time")this.#K();if(q==="disabled")this.#_()}#N(){if(this.#j)return;if(this.#j=!0,!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-label","Media controls");let q=document.createElement("fig-tooltip");q.setAttribute("text","Play");let Q=document.createElement("fig-button");Q.setAttribute("variant","ghost"),Q.setAttribute("size","small"),Q.setAttribute("icon","true"),Q.setAttribute("aria-label","Play");let Z=c("play",{className:"fig-media-controls-play-icon"});Q.append(Z),q.append(Q),Q.addEventListener("click",(_)=>{_.preventDefault(),_.stopPropagation(),this.toggle()});let $=document.createElement("fig-slider");$.setAttribute("text","false"),$.setAttribute("min","0"),$.setAttribute("max",String(this.duration)),$.setAttribute("step","1"),$.setAttribute("value",String(this.time)),$.setAttribute("full",""),$.setAttribute("aria-label","Seek"),$.setAttribute("aria-valuetext",this.#X(this.time,this.duration));let J=document.createElement("span");J.className="fig-media-controls-time",J.textContent=this.#W(this.time);let j=(_)=>{if(this.disabled){_.preventDefault?.(),_.stopPropagation();return}let W=_.currentTarget,N=Number(W?.value);if(!Number.isFinite(N))return;this.#J=!0,this.setAttribute("time",String(N)),this.dispatchEvent(new CustomEvent("seek",{bubbles:!0,composed:!0,detail:{time:N}})),requestAnimationFrame(()=>{this.#J=!1})};$.addEventListener("input",j),$.addEventListener("change",j),this.append(q,$,J),this.#Q=Q,this.#q=q,this.#Z=$,this.#$=J,this.#_()}#_(){let q=this.disabled;if(this.setAttribute("aria-disabled",q?"true":"false"),this.#Q)if(q)this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");if(this.#Z)if(q)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled")}#W(q){if(!Number.isFinite(q)||q<0)q=0;let Q=Math.floor(q),Z=Math.floor(Q/60),$=Q%60;return`${String(Z).padStart(2,"0")}:${String($).padStart(2,"0")}`}#X(q,Q=0){let Z=this.#W(q);if(!Number.isFinite(Q)||Q<=0)return Z;return`${Z} of ${this.#W(Q)}`}#G(){if(!this.#Q)return;let q=this.playing;this.#Q.setAttribute("aria-label",q?"Pause":"Play"),this.#q?.setAttribute("text",q?"Pause":"Play");let Q=this.#Q.querySelector(".fig-media-controls-play-icon");if(Q)Q.setAttribute("name",q?"pause":"play")}#K(){if(!this.#Z)return;let q=this.duration;if(Number(this.#Z.getAttribute("max"))!==q)this.#Z.setAttribute("max",String(q));let Q=this.time;if(!this.#J)this.#Z.setAttribute("value",String(Q));if(this.#Z.setAttribute("aria-valuetext",this.#X(Q,q)),this.#$)this.#$.textContent=this.#W(Q)}toggle(){if(this.disabled)return;let q=!this.playing;this.playing=q,this.dispatchEvent(new CustomEvent(q?"play":"pause",{bubbles:!0,composed:!0,detail:{playing:q}}))}play(){if(this.disabled||this.playing)return;this.toggle()}pause(){if(this.disabled||!this.playing)return;this.toggle()}}O("fig-media-controls",Kq);class Gq extends HTMLElement{static observedAttributes=["accepts","label","disabled","multiple","variant","url","filename"];#Q=null;#q=null;#Z=null;#$=null;#J=null;#j=null;get files(){return this.#j}get#N(){let q=this.getAttribute("filename");if(q)return q;let Q=this.getAttribute("url");if(!Q)return"";try{let $=new URL(Q,location.href).pathname.split("/").pop();return $?decodeURIComponent($):Q}catch{return Q}}get value(){if(this.#j&&this.#j.length>0){if(this.#j.length===1)return this.#j[0].name;return`${this.#j.length} files`}return this.#N}connectedCallback(){this.#Y(),this.addEventListener("dragover",this.#G),this.addEventListener("dragleave",this.#K),this.addEventListener("drop",this.#U)}disconnectedCallback(){this.#Q?.removeEventListener("change",this.#W),this.#Z?.removeEventListener("click",this.#X),this.removeEventListener("dragover",this.#G),this.removeEventListener("dragleave",this.#K),this.removeEventListener("drop",this.#U)}attributeChangedCallback(q,Q,Z){if(Q===Z)return;this.#Y()}clear(){if(this.#j=null,this.#Q)this.#Q.value="";this.removeAttribute("url"),this.removeAttribute("filename"),this.#Y(),this.#_({cleared:!0})}#_(q={}){let Q={files:this.#j,...q};this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#W=()=>{if(this.#Q.files.length>0)this.#j=this.#Q.files,this.removeAttribute("url"),this.#Y(),this.#_()};#X=(q)=>{q.stopPropagation(),this.clear()};#G=(q)=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(q.preventDefault(),!this.hasAttribute("dragover")){if(this.setAttribute("dragover",""),this.#J)this.#J.dataset.prevText=this.#J.textContent,this.#J.textContent="Drop file"}};#K=()=>{if(this.removeAttribute("dragover"),this.#J&&this.#J.dataset.prevText!==void 0)this.#J.textContent=this.#J.dataset.prevText,delete this.#J.dataset.prevText};#U=(q)=>{if(q.preventDefault(),this.removeAttribute("dragover"),this.#J&&this.#J.dataset.prevText!==void 0)this.#J.textContent=this.#J.dataset.prevText,delete this.#J.dataset.prevText;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let Q=this.getAttribute("accepts"),Z=Array.from(q.dataTransfer.files);if(Q){let J=Q.split(",").map((j)=>j.trim().toLowerCase());Z=Z.filter((j)=>{let _="."+j.name.split(".").pop().toLowerCase(),W=j.type.toLowerCase();return J.some((N)=>N===_||N===W||N.endsWith("/*")&&W.startsWith(N.slice(0,-1)))})}if(!this.hasAttribute("multiple")||this.getAttribute("multiple")==="false")Z=Z.slice(0,1);if(Z.length===0)return;let $=new DataTransfer;if(Z.forEach((J)=>$.items.add(J)),this.#j=$.files,this.#Q)this.#Q.files=$.files;this.removeAttribute("url"),this.#Y(),this.#_()};#Y(){let q=this.getAttribute("accepts")||"",Q=this.getAttribute("label")||"Upload",Z=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",$=this.hasAttribute("multiple")&&this.getAttribute("multiple")!=="false",J=this.getAttribute("variant")||"input",j=this.#j&&this.#j.length>0||!!this.getAttribute("url")||!!this.getAttribute("filename");if(this.innerHTML="",j){let _=q?`Accepts ${q.split(",").map((U)=>U.trim()).join(", ")}`:"";if(this.#J=document.createElement("fig-button"),this.#J.setAttribute("variant",J),this.#J.setAttribute("type","upload"),this.#J.className="fig-input-file-filename",Z)this.#J.setAttribute("disabled","");let W=document.createElement("fig-truncate");W.setAttribute("position","middle"),W.setAttribute("tooltip","");let N=this.value,K=N.lastIndexOf(".");if(K>0)W.setAttribute("tail",N.slice(K));if(W.textContent=N,this.#J.appendChild(W),this.#Q=document.createElement("input"),this.#Q.type="file",this.#Q.title="",this.#Q.disabled=Z,q)this.#Q.setAttribute("accept",q);if($)this.#Q.setAttribute("multiple","");if(this.#Q.addEventListener("change",this.#W),this.#J.appendChild(this.#Q),_)this.#$=document.createElement("fig-tooltip"),this.#$.setAttribute("text",_),this.#$.appendChild(this.#J),this.appendChild(this.#$);else this.appendChild(this.#J);let G=document.createElement("fig-tooltip");if(G.setAttribute("text","Remove"),this.#Z=document.createElement("fig-button"),this.#Z.setAttribute("variant",J==="overlay"?"overlay":"ghost"),this.#Z.setAttribute("icon","true"),this.#Z.setAttribute("aria-label","Remove"),this.#Z.className="fig-input-file-clear",Z)this.#Z.setAttribute("disabled","");this.#Z.replaceChildren(c("minus")),this.#Z.addEventListener("click",this.#X),G.appendChild(this.#Z),this.appendChild(G)}else{let _=q?`Accepts ${q.split(",").map((W)=>W.trim()).join(", ")}`:"";if(_)this.#$=document.createElement("fig-tooltip"),this.#$.setAttribute("text",_);if(this.#J=document.createElement("fig-button"),this.#J.setAttribute("variant",J),this.#J.setAttribute("type","upload"),this.#J.textContent=Q,Z)this.#J.setAttribute("disabled","");if(this.#Q=document.createElement("input"),this.#Q.type="file",this.#Q.title="",this.#Q.disabled=Z,q)this.#Q.setAttribute("accept",q);if($)this.#Q.setAttribute("multiple","");if(this.#Q.addEventListener("change",this.#W),this.#J.appendChild(this.#Q),this.#$)this.#$.appendChild(this.#J),this.appendChild(this.#$);else this.appendChild(this.#J)}}}O("fig-input-file",Gq);class E extends HTMLElement{#Q={x:0.42,y:0};#q={x:0.58,y:1};#Z={stiffness:200,damping:15,mass:1};#$="bezier";#J=2;#j=null;#N=null;#_=null;#W=null;#X=null;#G=null;#K=null;#U=null;#Y=null;#R=null;#z=null;#M=0.8;#L=200;#B=200;#H=null;#k=null;#T=null;#A=null;#O=5;#f=10;#D=10;#C=3;static PRESETS=[{group:null,name:"Linear",type:"bezier",value:[0,0,1,1]},{group:"Bezier",name:"Ease in",type:"bezier",value:[0.42,0,1,1]},{group:"Bezier",name:"Ease out",type:"bezier",value:[0,0,0.58,1]},{group:"Bezier",name:"Ease in and out",type:"bezier",value:[0.42,0,0.58,1]},{group:"Bezier",name:"Ease in back",type:"bezier",value:[0.6,-0.28,0.735,0.045]},{group:"Bezier",name:"Ease out back",type:"bezier",value:[0.175,0.885,0.32,1.275]},{group:"Bezier",name:"Ease in and out back",type:"bezier",value:[0.68,-0.55,0.265,1.55]},{group:"Bezier",name:"Custom bezier",type:"bezier",value:null},{group:"Spring",name:"Gentle",type:"spring",spring:{stiffness:120,damping:14,mass:1}},{group:"Spring",name:"Quick",type:"spring",spring:{stiffness:380,damping:20,mass:1}},{group:"Spring",name:"Bouncy",type:"spring",spring:{stiffness:250,damping:8,mass:1}},{group:"Spring",name:"Slow",type:"spring",spring:{stiffness:60,damping:11,mass:1}},{group:"Spring",name:"Custom spring",type:"spring",spring:null}];static get observedAttributes(){return["value","precision","aspect-ratio","edit"]}connectedCallback(){this.#J=parseInt(this.getAttribute("precision")||"2"),v(this,"--aspect-ratio",this.getAttribute("aspect-ratio"));let q=this.getAttribute("value");if(q)this.#V(q);this.#R=this.#F(),this.#w(),this.#l()}disconnectedCallback(){if(this.#j=null,this.#A)this.#A.disconnect(),this.#A=null}attributeChangedCallback(q,Q,Z){if(Q===Z)return;if(q==="aspect-ratio"){if(v(this,"--aspect-ratio",Z),this.#N)this.#u(),this.#d();return}if(q==="edit"){if(this.isConnected)this.#w();return}if(q==="value"&&Z){let $=this.#$;if(this.#V(Z),this.#R=this.#F(),$!==this.#$&&this.#S())this.#w();else{if(this.#N)this.#d();this.#q0(),this.#t()}}if(q==="precision")this.#J=parseInt(Z||"2")}get value(){if(this.#$==="spring"){let{stiffness:Q,damping:Z,mass:$}=this.#Z;return`spring(${Q}, ${Z}, ${$})`}let q=this.#J;return`${this.#Q.x.toFixed(q)}, ${this.#Q.y.toFixed(q)}, ${this.#q.x.toFixed(q)}, ${this.#q.y.toFixed(q)}`}get cssValue(){if(this.#$==="spring"){let Q=this.#I(),Z=20,$=Math.max(1,Math.floor(Q.length/20)),J=[];for(let j=0;j<Q.length;j+=$)J.push(Q[j].value.toFixed(3));if(Q.length>0)J.push(Q[Q.length-1].value.toFixed(3));return`linear(${J.join(", ")})`}let q=this.#J;return`cubic-bezier(${this.#Q.x.toFixed(q)}, ${this.#Q.y.toFixed(q)}, ${this.#q.x.toFixed(q)}, ${this.#q.y.toFixed(q)})`}get preset(){return this.#R}set value(q){this.setAttribute("value",q)}#V(q){let Q=q.match(/^spring\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if(Q)return this.#$="spring",this.#Z.stiffness=parseFloat(Q[1]),this.#Z.damping=parseFloat(Q[2]),this.#Z.mass=parseFloat(Q[3]),!0;let Z=q.split(",").map(($)=>parseFloat($.trim()));if(Z.length>=4&&Z.every(($)=>!isNaN($)))return this.#$="bezier",this.#Q.x=Z[0],this.#Q.y=Z[1],this.#q.x=Z[2],this.#q.y=Z[3],!0;return!1}#F(){if(this.#$==="bezier"){for(let Q of E.PRESETS){if(Q.type!=="bezier"||!Q.value)continue;if(Math.abs(this.#Q.x-Q.value[0])<0.001&&Math.abs(this.#Q.y-Q.value[1])<0.001&&Math.abs(this.#q.x-Q.value[2])<0.001&&Math.abs(this.#q.y-Q.value[3])<0.001)return Q.name}return"Custom bezier"}for(let Q of E.PRESETS){if(Q.type!=="spring"||!Q.spring)continue;if(Math.abs(this.#Z.stiffness-Q.spring.stiffness)<0.001&&Math.abs(this.#Z.damping-Q.spring.damping)<0.001&&Math.abs(this.#Z.mass-Q.spring.mass)<0.001)return Q.name}return"Custom spring"}#I(){let{stiffness:q,damping:Q,mass:Z}=this.#Z,$=0.004,J=5,j=[],_=0,W=0;for(let N=0;N<=5;N+=0.004){let K=-q*(_-1)-Q*W;if(W+=K/Z*0.004,_+=W*0.004,j.push({t:N,value:_}),N>0.1&&Math.abs(_-1)<0.0005&&Math.abs(W)<0.0005)break}return j}static#P(q,Q=24){let{stiffness:Z,damping:$,mass:J}=q,j=0.004,_=5,W=[],N=0,K=0;for(let A=0;A<=5;A+=0.004){let R=-Z*(N-1)-$*K;if(K+=R/J*0.004,N+=K*0.004,W.push({t:A,value:N}),A>0.1&&Math.abs(N-1)<0.001&&Math.abs(K)<0.001)break}let G=W[W.length-1].t||1,U=1;for(let A of W)if(A.value>U)U=A.value;let X=0;for(let A of W)if(A.value<X)X=A.value;let z=Math.max(U-X,1),B=6,L=Q-B*2,k=Math.max(1,Math.floor(W.length/30)),H="";for(let A=0;A<W.length;A+=k){let R=B+W[A].t/G*L,D=B+(1-(W[A].value-X)/z)*L;H+=(A===0?"M":"L")+R.toFixed(1)+","+D.toFixed(1)}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${H}" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none"/></svg>`}static curveIcon(q,Q,Z,$,J=24){let _=(J-12)/2,W=48,N=[],K=(R,D,I,S,w)=>{let y=1-w;return y*y*y*R+3*y*y*w*D+3*y*w*w*I+w*w*w*S};for(let R=0;R<=48;R++){let D=R/48;N.push({x:K(0,q,Z,1,D),y:K(0,Q,$,1,D)})}let G=1/0,U=-1/0,X=1/0,z=-1/0;for(let R of N){if(R.x<G)G=R.x;if(R.x>U)U=R.x;if(R.y<X)X=R.y;if(R.y>z)z=R.y}let B=Math.max(U-G,0.000001),L=Math.max(z-X,0.000001),k=(R)=>_+(R-G)/B*12,H=(R)=>_+(1-(R-X)/L)*12,A="";for(let R=0;R<N.length;R++){let D=k(N[R].x),I=H(N[R].y);A+=`${R===0?"M":"L"}${D.toFixed(1)},${I.toFixed(1)}`}return`<svg width="${J}" height="${J}" viewBox="0 0 ${J} ${J}" fill="none"><path d="${A}" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>`}#S(){return this.getAttribute("edit")!=="false"}#w(){if(this.classList.toggle("spring-mode",this.#$==="spring"),this.classList.toggle("bezier-mode",this.#$!=="spring"),this.#v(),this.innerHTML=this.#h(),this.#m(),this.#N)this.#r(),this.#u(),this.#d();this.#t(),this.#L0()}static#y(q){return String(q).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}#g(){return["fig-select","fig-select-options","fig-select-option"].every((q)=>{let Q=customElements.get(q);return typeof Q==="function"&&Q.prototype instanceof HTMLElement})}#b(){let q="",Q=void 0,Z=!1;for(let J of E.PRESETS){if(!this.#S()&&!J.value&&!J.spring)continue;if(J.group!==Q){if(Z)q+="</optgroup>";if(Z=Boolean(J.group),Z)q+=`<optgroup label="${E.#y(J.group)}">`;Q=J.group}let j=E.#y(J.name);q+=`<option value="${j}">${j}</option>`}if(Z)q+="</optgroup>";return`<fig-dropdown class="fig-easing-curve-select" label="Easing preset" value="${E.#y(this.#R)}" full>${q}</fig-dropdown>`}#E(){if(!this.#g())return this.#b();let q="",Q=void 0;for(let $ of E.PRESETS){if(!this.#S()&&!$.value&&!$.spring)continue;if($.group!==Q){if($.group)q+=`<fig-separator label="${E.#y($.group)}"></fig-separator>`;Q=$.group}let J;if($.type==="spring"){let _=$.spring||this.#Z;J=E.#P(_)}else{let _=$.value||[this.#Q.x,this.#Q.y,this.#q.x,this.#q.y];J=E.curveIcon(..._)}let j=E.#y($.name);q+=`<fig-select-option value="${j}" label="${j}"><span slot="prepend">${J}</span><span>${j}</span></fig-select-option>`}return`<fig-select class="fig-easing-curve-select" label="Easing preset" value="${E.#y(this.#R)}" full><fig-select-options>${q}</fig-select-options></fig-select>`}#h(){let Q=this.#E();if(!this.#S())return Q;let Z=`<fig-input-text class="fig-easing-curve-value-input" value="${E.#y(this.value)}" full></fig-input-text>`;if(this.#$==="spring")return`${Q}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
+</div>`,this.#q=this.querySelector("fig-input-text"),this.#$=this.querySelector("fig-button"),this.#Q&&this.#J&&this.#$){if(!this.#J.hasAttribute("type"))this.#J.setAttribute("type","dropdown");if(!this.#J.hasAttribute("label"))this.#J.setAttribute("label",$);this.#$.append(this.#J)}this.#Z=this.querySelector("fig-dropdown"),this.#O()}#Y(){this.#R(),this.#Z?.addEventListener("input",this.#_),this.#q?.addEventListener("input",this.#W),this.#q?.addEventListener("change",this.#X)}#R(){this.#Z?.removeEventListener("input",this.#_),this.#q?.removeEventListener("input",this.#W),this.#q?.removeEventListener("change",this.#X)}#z(q){q.stopPropagation();let Q=q.target.closest("fig-dropdown")?.value??"";if(this.#j=!0,this.setAttribute("value",Q),this.#j=!1,this.#q)this.#q.setAttribute("value",Q);this.#B(),this.#H()}#M(q){q.stopPropagation();let Q=q.target.value??"";this.#j=!0,this.setAttribute("value",Q),this.#j=!1,this.#B()}#L(q){q.stopPropagation();let Q=q.target.value??"";this.#j=!0,this.setAttribute("value",Q),this.#j=!1,this.#H()}#B(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value}}))}#H(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value}}))}#k(){return(this.getAttribute("options")||"").split(",").map((q)=>q.trim()).filter(Boolean)}#T(){return(this.getAttribute("aria-label")||this.getAttribute("placeholder")||"Combo input").trim()}#A(){return`${this.#T()} options`}#O(){if(this.#q)this.#N.forEach((q)=>{let Q=this.getAttribute(q);if(Q===null)this.#q.removeAttribute(q);else this.#q.setAttribute(q,Q)});if(this.#Z&&!this.#Z.hasAttribute("aria-label"))this.#Z.setAttribute("label",this.#A())}#f(q){if(this.#q)if(q)this.#q.setAttribute("disabled","");else this.#q.removeAttribute("disabled");if(this.#$)if(q)this.#$.setAttribute("disabled","");else this.#$.removeAttribute("disabled");if(this.#Z)if(q)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled")}focus(){this.#q?.focus()}attributeChangedCallback(q,Q,Z){if(Q===Z)return;switch(q){case"options":if(this.#Z&&!this.#Q){let $=this.#k();this.#Z.replaceChildren(...$.map((J)=>{let j=document.createElement("option");return j.textContent=J,j}))}break;case"placeholder":if(this.#q)this.#q.setAttribute("placeholder",Z||"");this.#O();break;case"value":if(!this.#j&&this.#q)this.#q.setAttribute("value",Z||"");break;case"disabled":this.#f(Z!==null&&Z!=="false");break;case"aria-label":case"aria-labelledby":case"aria-describedby":case"aria-invalid":case"aria-required":this.#O();break}}}O("fig-combo-input",Zq);class M0 extends HTMLElement{#Q="color";#q=null;#Z=!1;constructor(){super();this.#q=this.#X.bind(this)}static get observedAttributes(){return["background","size","selected","disabled","alpha","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.#_(),this.#$(),this.#W()}#$(){let q=this.getAttribute("alpha");if(q!==null)this.style.setProperty("--alpha",q);else this.style.removeProperty("--alpha")}#J(q){if(!q)return"color";let Q=q.toLowerCase();if(Q.includes("gradient"))return"gradient";if(Q.includes("url("))return"image";return"color"}#j(q){if(!q)return"#D9D9D9";if(q.startsWith("#"))return q.slice(0,7);try{let{ctx:Q}=z0(1,1);return Q.fillStyle=q,Q.fillStyle}catch{return"#D9D9D9"}}#N(q){if(!q||!q.includes("var("))return q;let Q=this.style.background;this.style.background=q;let Z=getComputedStyle(this),$=Z.backgroundImage,J=Z.backgroundColor;if(this.style.background=Q,$&&$!=="none")return $;return J||q}#_(){let q=this.getAttribute("background")||"#D9D9D9",Q=q.includes("var("),Z=Q?this.#N(q):q,$=this.#J(Z);if($!==this.#Q||!this.input){if(this.#Q=$,this.setAttribute("data-type",this.#Q),this.input)this.input.removeEventListener("input",this.#q);if(this.#Q==="color"){let j=this.#j(Z);if(this.innerHTML=`<div></div><input type="color" value="${j}" />`,this.input=this.querySelector("input"),!Q)this.input.addEventListener("input",this.#q);this.#W()}else this.innerHTML="<div></div>",this.input=null,this.#W()}else if(this.#Q==="color"&&this.input){let j=this.#j(Z);if(this.input.value!==j)this.input.value=j}let J=/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(q);this.style.setProperty("--swatch-background",J?q:`linear-gradient(${q}, ${q})`)}#W(){let q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";if(this.setAttribute("aria-disabled",q?"true":"false"),this.input){this.input.disabled=q;let Q=this.getAttribute("aria-labelledby"),Z=this.getAttribute("aria-label")||"Color swatch",$=this.getAttribute("aria-describedby");if(Q)this.input.setAttribute("aria-labelledby",Q),this.input.removeAttribute("aria-label");else this.input.setAttribute("aria-label",Z),this.input.removeAttribute("aria-labelledby");if($)this.input.setAttribute("aria-describedby",$);else this.input.removeAttribute("aria-describedby");this.removeAttribute("role"),this.removeAttribute("aria-hidden");return}if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-hidden","true");else this.setAttribute("role","img"),this.removeAttribute("aria-hidden")}#X(q){this.#Z=!0,this.setAttribute("background",q.target.value),this.#Z=!1}get background(){return this.getAttribute("background")}set background(q){this.setAttribute("background",q)}focus(){this.input?.focus()}attributeChangedCallback(q,Q,Z){if(Q===Z)return;if(q==="background"){if(this.#Z){let $=/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(Z);this.style.setProperty("--swatch-background",$?Z:`linear-gradient(${Z}, ${Z})`);return}this.#_()}else if(q==="alpha")this.#$();else if(q==="disabled"||q==="aria-label"||q==="aria-labelledby"||q==="aria-describedby")this.#W()}get alpha(){return this.getAttribute("alpha")}set alpha(q){if(q===null||q===void 0)this.removeAttribute("alpha");else this.setAttribute("alpha",q)}}O("fig-swatch",M0);class $q extends M0{}O("fig-chit",$q);var Jq=["load","error"],jq=["loadstart","progress","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","durationchange","timeupdate","ratechange","resize","volumechange"],iq=[...new Set([...Jq,...jq])];class K0 extends HTMLElement{#Q=null;#q=null;#Z=null;#$=null;#J=null;#j=null;#N=null;#_=this.#s.bind(this);#W=this.#a.bind(this);#X=this.#Q0.bind(this);#G=this.#Z0.bind(this);#K=this.#d.bind(this);#U=null;#Y=null;#R=null;#z=void 0;#M=null;#L=null;#B=null;#H=null;#k=null;#T=null;#A=null;static get observedAttributes(){return["src","type","alt","upload","loading-indicator","label","aspect-ratio","fit","checkerboard","caption","controls","autoplay","loop","muted","poster","aria-label","aria-labelledby","title"]}get mediaKind(){return(this.getAttribute("type")||"image").toLowerCase()==="video"?"video":"image"}get src(){return this.#Q}set src(q){if(this.#Q=q||"",q===null||q===void 0||q==="")this.removeAttribute("src");else this.setAttribute("src",q)}get file(){return this.#N}#O(){return this.#j||this.#Q||""}async getBase64(){if(this.mediaKind!=="image")return null;if(!this.#O())return null;if(!this.#q)return null;try{if(typeof this.#q.decode==="function")await this.#q.decode();else if(!this.#q.complete)await new Promise(($,J)=>{this.#q.addEventListener("load",$,{once:!0}),this.#q.addEventListener("error",J,{once:!0})})}catch{}let q=this.#q.naturalWidth,Q=this.#q.naturalHeight;if(!(q>0)||!(Q>0))return null;let Z=document.createElement("canvas");return Z.width=q,Z.height=Q,Z.getContext("2d").drawImage(this.#q,0,0),Z.toDataURL()}connectedCallback(){this.#Q=this.getAttribute("src")||"";let q=this.getAttribute("aspect-ratio");if(q)this.style.setProperty("--fig-media-aspect-ratio",q);else this.style.setProperty("--fig-media-aspect-ratio","4/3");let Q=this.getAttribute("fit");if(Q)this.style.setProperty("--fig-media-fit",Q);if(this.querySelectorAll("fig-swatch[data-generated]").forEach(($)=>$.remove()),this.#I(),this.#S(),this.#D(),this.#h(),this.#V(),this.#w(),this.#b(),this.hasAttribute("upload")&&this.getAttribute("upload")!=="false"&&!this.querySelector("fig-input-file[data-generated]"))this.#c();this.#$=this.querySelector("fig-input-file[data-generated]"),this.#$?.removeEventListener("change",this.#_),this.#$?.addEventListener("change",this.#_)}disconnectedCallback(){if(this.#$?.removeEventListener("change",this.#_),this.#F(),this.#f(),this.#o(),this.#J)URL.revokeObjectURL(this.#J),this.#J=null;this.#j=null}#f(){if(!this.#q)return;if(iq.forEach((q)=>{this.#q.removeEventListener(q,this.#K)}),this.#q.tagName==="VIDEO")this.#q.removeEventListener("play",this.#W),this.#q.removeEventListener("pause",this.#X),this.#q.removeEventListener("ended",this.#G)}#D(){if(this.#f(),!this.#q)return;if((this.#q.tagName==="VIDEO"?jq:Jq).forEach((Q)=>{this.#q.addEventListener(Q,this.#K)}),this.#q.tagName!=="VIDEO")return;this.#q.addEventListener("play",this.#W),this.#q.addEventListener("pause",this.#X),this.#q.addEventListener("ended",this.#G)}#C(){return this.mediaKind==="image"&&this.getAttribute("loading-indicator")!=="false"&&this.#Z?.hasAttribute("data-generated")&&this.#q?.hasAttribute("data-generated")}#V(){let q=this.#O();if(!q||!this.#C()){this.#F();return}if(this.#q?.tagName==="IMG"&&this.#q.complete&&this.#q.currentSrc){this.#F();return}if(this.#R===q)return;this.#F(),this.#R=q,this.#z=this.getAttribute("aria-busy"),this.setAttribute("aria-busy","true"),this.#Y=setTimeout(()=>{if(this.#Y=null,this.#R!==q||!this.isConnected||!this.#C())return;let Q=document.createElement("fig-spinner");Q.setAttribute("data-generated",""),Q.setAttribute("data-loading-indicator",""),Q.setAttribute("slot","overlay"),Q.setAttribute("size","small"),Q.setAttribute("aria-hidden","true"),this.append(Q),this.#U=Q},150)}#F(){if(this.#Y!==null)clearTimeout(this.#Y),this.#Y=null;if(this.#U?.remove(),this.#U=null,this.#R=null,this.#z!==void 0){if(this.#z===null)this.removeAttribute("aria-busy");else this.setAttribute("aria-busy",this.#z);this.#z=void 0}}#I(){if(this.#Z?.isConnected)return;let q=this.querySelector(":scope > fig-preview");if(q){this.#Z=q;return}let Q=document.createElement("fig-preview");Q.setAttribute("data-generated",""),this.prepend(Q),this.#Z=Q}#P(){let q=this.mediaKind==="video"?"video":"img";return this.querySelector(`${q}:not([data-generated])`)}#S(){let q=this.#P();if(q){if(this.#I(),this.#q&&this.#q!==q){if(this.#f(),this.#q.hasAttribute("data-generated"))this.#q.remove()}if(this.#q=q,this.#Z&&q.parentElement!==this.#Z)this.#Z.append(q);this.#D(),this.#w();return}this.#I();let Q=this.mediaKind==="video"?"VIDEO":"IMG";if(this.#q&&this.#q.tagName!==Q){if(this.#f(),this.#q.hasAttribute("data-generated"))this.#q.remove();this.#q=null}if(this.#q)return;if(this.mediaKind==="video"){let Z=document.createElement("video");Z.setAttribute("data-generated",""),Z.className="fig-media-element",Z.setAttribute("playsinline",""),Z.preload="auto",this.#Z.append(Z),this.#q=Z;let $=()=>{if(this.#q?.autoplay)return;try{this.#q.currentTime=0.001}catch{}};this.#q.addEventListener("loadedmetadata",$,{once:!0})}else{let Z=document.createElement("img");Z.setAttribute("data-generated",""),Z.className="fig-media-element",Z.loading="lazy",Z.decoding="async",Z.alt=this.getAttribute("alt")||"",this.#Z.append(Z),this.#q=Z}this.#D()}#w(){if(!this.#q)return;if(this.#q.tagName==="IMG"){if(this.hasAttribute("alt")||this.#q.hasAttribute("data-generated"))this.#q.alt=this.getAttribute("alt")||"";return}if(this.#q.tagName!=="VIDEO")return;["aria-label","aria-labelledby","title"].forEach((q)=>{let Q=this.getAttribute(q);if(Q===null)this.#q.removeAttribute(q);else this.#q.setAttribute(q,Q)})}#y(){return this.querySelector(":scope > figcaption:not([data-generated])")}#g(){return Array.from(this.querySelectorAll(":scope > figcaption[data-generated]"))}#b(){let q=this.#y(),Q=this.#g();if(q){Q.forEach((j)=>j.remove());return}let Z=this.getAttribute("caption")||"";if(!Z){Q.forEach((j)=>j.remove());return}let $=Q[0]||document.createElement("figcaption");if(Q.slice(1).forEach((j)=>j.remove()),!$.hasAttribute("data-generated"))$.setAttribute("data-generated","");if($.textContent!==Z)$.textContent=Z;let J=this.querySelector(":scope > fig-media-controls");if(J)J.before($);else if(this.#Z?.isConnected)this.#Z.after($);else if(!$.isConnected)this.append($)}#E(q,Q=!1){if(!this.hasAttribute(q))return Q;return this.getAttribute(q)!=="false"}#h(){if(!this.#q)return;if(!this.#q.hasAttribute("data-generated"))return;let q=this.#O();if(this.#q.getAttribute("src")!==q){if(q)this.#q.setAttribute("src",q);else if(this.#q.removeAttribute("src"),this.#q.tagName==="VIDEO")this.#q.load()}if(this.#q.tagName==="IMG"){this.#w(),this.#V();return}let Q=this.getAttribute("poster");if(Q)this.#q.setAttribute("poster",Q);else this.#q.removeAttribute("poster");this.#q.controls=!1,this.#q.removeAttribute("controls"),this.#q.autoplay=this.#E("autoplay",!1),this.#q.loop=this.#E("loop",!1),this.#q.muted=this.#E("muted",!1),this.#q.playsInline=!0,this.#w(),this.#m(),this.#v(),this.#V()}get mediaEl(){return this.#q}#x(){if(this.mediaKind!=="video")return!1;return Boolean(this.#O())}#v(){let q=this.#M||this.querySelector(":scope > fig-media-controls");if(!q)return;if(this.mediaKind!=="video")return;if(this.#x()){if(q.hasAttribute("data-fig-empty-disabled"))q.removeAttribute("disabled"),q.removeAttribute("data-fig-empty-disabled");return}q.setAttribute("disabled",""),q.setAttribute("data-fig-empty-disabled",""),q.playing=!1,q.time=0,q.duration=0}#m(){if(this.mediaKind!=="video"){this.#o();return}let q=this.querySelector(":scope > fig-media-controls:not([data-generated])");if(q){if(this.#M!==q)this.#o(),this.#M=q;this.#l(),this.#v();return}if(this.#E("controls",!1))this.#r();else this.#o()}#r(){let q=Array.from(this.querySelectorAll(":scope > fig-media-controls[data-generated]")),Q=q[0];if(q.slice(1).forEach(($)=>$.remove()),Q){this.#M=Q,this.#l(),this.#v();return}let Z=document.createElement("fig-media-controls");Z.setAttribute("data-generated",""),this.append(Z),this.#M=Z,this.#l(),this.#v()}#l(){if(!this.#M||!this.#q)return;if(this.#L===this.#q&&this.#B===this.#M){this.#v();return}this.#u();let q=this.#M,Q=this.#q;this.#L=Q,this.#B=q;let Z=null,$=()=>{if(this.#v(),!this.#x())return;if(q.playing=!Q.paused&&!Q.ended,Number.isFinite(Q.duration))q.duration=Q.duration;if(Z!==null)if(Math.abs(Q.currentTime-Z)<0.25)Z=null;else return;q.time=Q.currentTime||0},J=()=>{if(!this.#x())return;let W=Q.play?.();if(W&&typeof W.catch==="function")W.catch(()=>{})},j=()=>Q.pause?.(),_=(W)=>{if(!this.#x())return;let N=Number(W?.detail?.time);if(!Number.isFinite(N))return;Z=N;try{Q.currentTime=N}catch{}};this.#H=$,this.#k=J,this.#T=j,this.#A=_,Q.addEventListener("play",$),Q.addEventListener("pause",$),Q.addEventListener("ended",$),Q.addEventListener("timeupdate",$),Q.addEventListener("loadedmetadata",$),Q.addEventListener("durationchange",$),Q.addEventListener("seeked",$),q.addEventListener("play",J),q.addEventListener("pause",j),q.addEventListener("seek",_),$()}#u(){let q=this.#L,Q=this.#B;if(q&&this.#H)q.removeEventListener("play",this.#H),q.removeEventListener("pause",this.#H),q.removeEventListener("ended",this.#H),q.removeEventListener("timeupdate",this.#H),q.removeEventListener("loadedmetadata",this.#H),q.removeEventListener("durationchange",this.#H),q.removeEventListener("seeked",this.#H);if(Q){if(this.#k)Q.removeEventListener("play",this.#k);if(this.#T)Q.removeEventListener("pause",this.#T);if(this.#A)Q.removeEventListener("seek",this.#A)}this.#L=null,this.#B=null,this.#H=null,this.#k=null,this.#T=null,this.#A=null}#o(){this.#u(),this.querySelectorAll(":scope > fig-media-controls[data-generated]").forEach((q)=>{q.remove()}),this.#M=null}toggle(){if(!this.#q||this.mediaKind!=="video")return;if(this.#q.paused||this.#q.ended)this.play();else this.pause()}play(){if(this.mediaKind!=="video"||!this.#q)return;let q=this.#q.play();if(q&&typeof q.catch==="function")q.catch(()=>{})}pause(){if(this.mediaKind!=="video"||!this.#q)return;this.#q.pause()}#c(){let q=document.createElement("fig-input-file");q.setAttribute("data-generated",""),q.setAttribute("accepts",this.mediaKind==="video"?"video/*":"image/*"),q.setAttribute("variant","overlay");let Q=this.getAttribute("label")||"Upload";if(q.setAttribute("label",this.#Q?"Replace":Q),this.#N?.name)q.setAttribute("filename",this.#N.name);else if(this.#Q)q.setAttribute("url",this.#Q);q.addEventListener("change",this.#_),this.#I(),this.#Z.append(q),this.#$=q}#i(){if(this.#$)this.#$.removeEventListener("change",this.#_),this.#$.remove(),this.#$=null}#s(q){if(q.target!==this.#$)return;let Q=q.detail?.files?.[0],Z=q.detail?.cleared===!0;if(!Q){if(this.#J)URL.revokeObjectURL(this.#J),this.#J=null;if(this.#N=null,this.#j=null,Z)this.src="";if(this.#h(),this.#$){let $=this.getAttribute("label")||"Upload";if(this.#$.setAttribute("label",this.#Q?"Replace":$),this.#$.removeAttribute("filename"),this.#Q)this.#$.setAttribute("url",this.#Q);else this.#$.removeAttribute("url")}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}));return}if(this.#J)URL.revokeObjectURL(this.#J);if(this.#N=Q,this.#J=URL.createObjectURL(Q),this.#j=this.#J,this.#h(),this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{file:Q,src:this.#J}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0})),this.#$)this.#$.removeAttribute("url"),this.#$.setAttribute("filename",Q.name),this.#$.setAttribute("label","Replace")}#p(q){if(!this.#q)return;this.dispatchEvent(new CustomEvent(q,{bubbles:!0,cancelable:!1,composed:!0,detail:{src:this.#Q||"",currentTime:this.#q.currentTime,duration:this.#q.duration}}))}#d(q){let Q=this.#q;if(!Q||q.currentTarget!==Q)return;if(Q.tagName==="IMG"&&(q.type==="load"||q.type==="error"))this.#F();let Z={src:this.#O(),media:Q,originalEvent:q};if(Q.tagName==="VIDEO")Z.currentTime=Q.currentTime,Z.duration=Q.duration,Z.readyState=Q.readyState,Z.networkState=Q.networkState,Z.error=Q.error;this.dispatchEvent(new CustomEvent(q.type,{bubbles:!0,cancelable:!1,composed:!0,detail:Z}))}#a(){this.#p("play")}#Q0(){this.#p("pause")}#Z0(){this.#p("ended")}attributeChangedCallback(q,Q,Z){if(Q===Z)return;if(q==="src"){let $=Z||"",J=$&&($===this.#j||$===this.#J);if(this.#Q=$,this.#J&&!J)URL.revokeObjectURL(this.#J),this.#J=null,this.#j=null,this.#N=null;if(this.#h(),this.#$){let j=this.getAttribute("label")||"Upload";if(this.#$.setAttribute("label",this.#Q?"Replace":j),this.#Q)if(this.#N?.name)this.#$.removeAttribute("url"),this.#$.setAttribute("filename",this.#N.name);else this.#$.setAttribute("url",this.#Q),this.#$.removeAttribute("filename");else this.#$.removeAttribute("url"),this.#$.removeAttribute("filename")}}if(q==="type"){if(this.#S(),this.#h(),this.#$)this.#$.setAttribute("accepts",this.mediaKind==="video"?"video/*":"image/*")}if(["alt","aria-label","aria-labelledby","title"].includes(q))this.#w();if(q==="upload"){let $=Z!==null&&Z!=="false";if($&&!this.#$)this.#c();else if(!$)this.#i()}if(q==="loading-indicator")this.#V();if(q==="aspect-ratio")if(Z)this.style.setProperty("--fig-media-aspect-ratio",Z);else this.style.removeProperty("--fig-media-aspect-ratio");if(q==="fit")if(Z)this.style.setProperty("--fig-media-fit",Z);else this.style.removeProperty("--fig-media-fit");if(q==="label"&&this.#$){let $=this.getAttribute("label")||"Upload";this.#$.setAttribute("label",this.#Q?"Replace":$)}if(["controls","autoplay","loop","muted","poster"].includes(q))this.#h();if(q==="caption")this.#b()}}O("fig-media",K0);class _q extends K0{get mediaKind(){return"image"}}O("fig-image",_q);class Wq extends K0{get mediaKind(){return"video"}}O("fig-video",Wq);class Nq extends HTMLElement{static get observedAttributes(){return["src","alt","label","text","sublabel","selected","disabled","full","size","aspect-ratio","fit","label-line-clamp"]}#Q=null;#q=null;#Z=null;#$=null;#J=!1;#j=new MutationObserver((q)=>{if(!q.some((Z)=>[...Z.addedNodes,...Z.removedNodes].some(($)=>$ instanceof Element&&($.matches("fig-image:not([data-generated]), fig-media:not([data-generated]), fig-preview:not([data-generated]), fig-footer:not([data-generated])")||$.querySelector("fig-image:not([data-generated]), fig-media:not([data-generated]), fig-preview:not([data-generated]), fig-footer:not([data-generated])"))))||!this.isConnected)return;this.#U(),this.#R()});connectedCallback(){this.#j.observe(this,{childList:!0,subtree:!0}),this.#U(),this.#R()}disconnectedCallback(){this.#j.disconnect()}attributeChangedCallback(){if(!this.isConnected)return;this.#U(),this.#R()}#N(){return this.getAttribute("label")??this.getAttribute("text")??""}#_(){return this.getAttribute("sublabel")??""}#W(){return this.getAttribute("label-line-clamp")==="2"?"2":"1"}#X(){return Boolean(this.getAttribute("src"))}#G(){return this.querySelector(":scope > fig-image:not([data-generated]), :scope > fig-media:not([data-generated]), :scope > fig-preview:not([data-generated])")}#K(){this.querySelectorAll(":scope > .fig-card-link").forEach((q)=>{q.querySelectorAll(":scope > .fig-card-media").forEach((Q)=>{while(Q.firstChild)q.insertBefore(Q.firstChild,Q);Q.remove()});while(q.firstChild)this.insertBefore(q.firstChild,q);q.remove()})}#U(){if(this.#K(),!this.#X()){this.#Y();return}let q=this.#G();if(this.#J=Boolean(q),q)this.querySelectorAll(":scope > [data-generated]:not(fig-footer)").forEach((Z)=>Z.remove()),this.#q=null;if(!this.#J){if(this.#q=this.querySelector(":scope > fig-image[data-generated]")||null,!this.#q)this.querySelectorAll(":scope > fig-image, :scope > fig-media, :scope > fig-preview").forEach((Z)=>{if(Z.hasAttribute("data-generated"))Z.remove()}),this.#q=document.createElement("fig-image"),this.#q.setAttribute("data-generated",""),this.#q.setAttribute("full",""),this.#q.setAttribute("size","auto"),this.prepend(this.#q)}if(!Boolean(this.#N()||this.#_())){this.querySelector(":scope > fig-footer[data-generated]")?.remove(),this.#Q=null,this.#Z=null,this.#$=null;return}if(!this.#Q||!this.#Q.isConnected){if(this.#Q=this.querySelector(":scope > fig-footer[data-generated]"),!this.#Q)this.#Q=document.createElement("fig-footer"),this.#Q.setAttribute("data-generated",""),this.appendChild(this.#Q)}if(!this.#Z||!this.#Z.isConnected){if(this.#Z=this.#Q.querySelector(":scope > .fig-card-label[data-generated]"),!this.#Z)this.#Z=document.createElement("label"),this.#Z.className="fig-card-label",this.#Z.setAttribute("data-generated",""),this.#Q.appendChild(this.#Z)}if(!this.#$||!this.#$.isConnected){if(this.#$=this.#Q.querySelector(":scope > .fig-card-sublabel[data-generated]"),!this.#$)this.#$=document.createElement("label"),this.#$.className="fig-card-sublabel",this.#$.setAttribute("data-generated",""),this.#Z.after(this.#$)}}#Y(){if(this.#K(),this.querySelectorAll(":scope > [data-generated]").forEach((Q)=>Q.remove()),this.#q=null,this.#J=!0,this.#Q=null,this.#Z=null,this.#$=null,!this.#N()&&!this.#_())return;this.#Q=document.createElement("fig-footer"),this.#Q.setAttribute("data-generated",""),this.#Z=document.createElement("label"),this.#Z.className="fig-card-label",this.#Z.setAttribute("data-generated",""),this.#Q.appendChild(this.#Z);let q=this.#_();if(this.#$=null,q)this.#$=document.createElement("label"),this.#$.className="fig-card-sublabel",this.#$.setAttribute("data-generated",""),this.#Q.appendChild(this.#$);this.appendChild(this.#Q)}#R(){if(!this.#X()){this.#z();return}let q=T(this,"disabled"),Q=this.#N(),Z=this.#_(),$=this.#W();this.style.setProperty("--fig-card-label-line-clamp",$),this.setAttribute("role","group");let J=[Q,Z].filter(Boolean).join(", ");if(J)this.setAttribute("aria-label",J);else this.removeAttribute("aria-label");if(q)this.setAttribute("aria-disabled","true");else this.removeAttribute("aria-disabled");if(this.#q&&!this.#J){let j=this.getAttribute("src"),_=this.getAttribute("alt"),W=this.getAttribute("aspect-ratio")||"1/1",N=this.getAttribute("fit")||"contain",K=_!=null?_:"";if(j)this.#q.setAttribute("src",j);else this.#q.removeAttribute("src");this.#q.setAttribute("alt",K),this.#q.setAttribute("aspect-ratio",W),this.#q.setAttribute("fit",N),this.#q.setAttribute("full",""),this.#q.setAttribute("size","auto")}if(this.#Z)this.#Z.textContent=Q,this.#Z.hidden=!Q;if(this.#$)this.#$.textContent=Z,this.#$.hidden=!Z;if(this.#Q)this.#Q.hidden=!Q&&!Z}#z(){let q=T(this,"disabled"),Q=this.#N(),Z=this.#_();this.style.setProperty("--fig-card-label-line-clamp",this.#W()),this.setAttribute("role","group");let $=[Q,Z].filter(Boolean).join(", ");if($)this.setAttribute("aria-label",$);else this.removeAttribute("aria-label");if(q)this.setAttribute("aria-disabled","true");else this.removeAttribute("aria-disabled");if(this.#Z)this.#Z.textContent=Q,this.#Z.hidden=!Q;if(this.#$)this.#$.textContent=Z}}O("fig-card",Nq);class Kq extends HTMLElement{#Q=null;#q=null;#Z=null;#$=null;#J=!1;#j=!1;static get observedAttributes(){return["playing","duration","time","disabled"]}connectedCallback(){this.#N(),this.#G(),this.#K(),this.#_()}get playing(){return this.hasAttribute("playing")&&this.getAttribute("playing")!=="false"}set playing(q){if(q)this.setAttribute("playing","");else this.removeAttribute("playing")}get duration(){let q=Number(this.getAttribute("duration"));return Number.isFinite(q)&&q>=0?q:0}set duration(q){let Q=Number(q);if(!Number.isFinite(Q)||Q<0){this.removeAttribute("duration");return}this.setAttribute("duration",String(Q))}get time(){let q=Number(this.getAttribute("time"));return Number.isFinite(q)&&q>=0?q:0}set time(q){let Q=Number(q);if(!Number.isFinite(Q)||Q<0){this.removeAttribute("time");return}this.setAttribute("time",String(Q))}get disabled(){return T(this,"disabled")}set disabled(q){if(q)this.setAttribute("disabled","");else this.removeAttribute("disabled")}attributeChangedCallback(q){if(!this.#j)return;if(q==="playing")this.#G();if(q==="duration"||q==="time")this.#K();if(q==="disabled")this.#_()}#N(){if(this.#j)return;if(this.#j=!0,!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-label","Media controls");let q=document.createElement("fig-tooltip");q.setAttribute("text","Play");let Q=document.createElement("fig-button");Q.setAttribute("variant","ghost"),Q.setAttribute("size","small"),Q.setAttribute("icon","true"),Q.setAttribute("aria-label","Play");let Z=c("play",{className:"fig-media-controls-play-icon"});Q.append(Z),q.append(Q),Q.addEventListener("click",(_)=>{_.preventDefault(),_.stopPropagation(),this.toggle()});let $=document.createElement("fig-slider");$.setAttribute("text","false"),$.setAttribute("min","0"),$.setAttribute("max",String(this.duration)),$.setAttribute("step","1"),$.setAttribute("value",String(this.time)),$.setAttribute("full",""),$.setAttribute("aria-label","Seek"),$.setAttribute("aria-valuetext",this.#X(this.time,this.duration));let J=document.createElement("span");J.className="fig-media-controls-time",J.textContent=this.#W(this.time);let j=(_)=>{if(this.disabled){_.preventDefault?.(),_.stopPropagation();return}let W=_.currentTarget,N=Number(W?.value);if(!Number.isFinite(N))return;this.#J=!0,this.setAttribute("time",String(N)),this.dispatchEvent(new CustomEvent("seek",{bubbles:!0,composed:!0,detail:{time:N}})),requestAnimationFrame(()=>{this.#J=!1})};$.addEventListener("input",j),$.addEventListener("change",j),this.append(q,$,J),this.#Q=Q,this.#q=q,this.#Z=$,this.#$=J,this.#_()}#_(){let q=this.disabled;if(this.setAttribute("aria-disabled",q?"true":"false"),this.#Q)if(q)this.#Q.setAttribute("disabled","");else this.#Q.removeAttribute("disabled");if(this.#Z)if(q)this.#Z.setAttribute("disabled","");else this.#Z.removeAttribute("disabled")}#W(q){if(!Number.isFinite(q)||q<0)q=0;let Q=Math.floor(q),Z=Math.floor(Q/60),$=Q%60;return`${String(Z).padStart(2,"0")}:${String($).padStart(2,"0")}`}#X(q,Q=0){let Z=this.#W(q);if(!Number.isFinite(Q)||Q<=0)return Z;return`${Z} of ${this.#W(Q)}`}#G(){if(!this.#Q)return;let q=this.playing;this.#Q.setAttribute("aria-label",q?"Pause":"Play"),this.#q?.setAttribute("text",q?"Pause":"Play");let Q=this.#Q.querySelector(".fig-media-controls-play-icon");if(Q)Q.setAttribute("name",q?"pause":"play")}#K(){if(!this.#Z)return;let q=this.duration;if(Number(this.#Z.getAttribute("max"))!==q)this.#Z.setAttribute("max",String(q));let Q=this.time;if(!this.#J)this.#Z.setAttribute("value",String(Q));if(this.#Z.setAttribute("aria-valuetext",this.#X(Q,q)),this.#$)this.#$.textContent=this.#W(Q)}toggle(){if(this.disabled)return;let q=!this.playing;this.playing=q,this.dispatchEvent(new CustomEvent(q?"play":"pause",{bubbles:!0,composed:!0,detail:{playing:q}}))}play(){if(this.disabled||this.playing)return;this.toggle()}pause(){if(this.disabled||!this.playing)return;this.toggle()}}O("fig-media-controls",Kq);class Gq extends HTMLElement{static observedAttributes=["accepts","label","disabled","multiple","variant","url","filename"];#Q=null;#q=null;#Z=null;#$=null;#J=null;#j=null;get files(){return this.#j}get#N(){let q=this.getAttribute("filename");if(q)return q;let Q=this.getAttribute("url");if(!Q)return"";try{let $=new URL(Q,location.href).pathname.split("/").pop();return $?decodeURIComponent($):Q}catch{return Q}}get value(){if(this.#j&&this.#j.length>0){if(this.#j.length===1)return this.#j[0].name;return`${this.#j.length} files`}return this.#N}connectedCallback(){this.#Y(),this.addEventListener("dragover",this.#G),this.addEventListener("dragleave",this.#K),this.addEventListener("drop",this.#U)}disconnectedCallback(){this.#Q?.removeEventListener("change",this.#W),this.#Z?.removeEventListener("click",this.#X),this.removeEventListener("dragover",this.#G),this.removeEventListener("dragleave",this.#K),this.removeEventListener("drop",this.#U)}attributeChangedCallback(q,Q,Z){if(Q===Z)return;this.#Y()}clear(){if(this.#j=null,this.#Q)this.#Q.value="";this.removeAttribute("url"),this.removeAttribute("filename"),this.#Y(),this.#_({cleared:!0})}#_(q={}){let Q={files:this.#j,...q};this.dispatchEvent(new CustomEvent("input",{detail:Q,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Q,bubbles:!0}))}#W=()=>{if(this.#Q.files.length>0)this.#j=this.#Q.files,this.removeAttribute("url"),this.#Y(),this.#_()};#X=(q)=>{q.stopPropagation(),this.clear()};#G=(q)=>{if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;if(q.preventDefault(),!this.hasAttribute("dragover")){if(this.setAttribute("dragover",""),this.#J)this.#J.dataset.prevText=this.#J.textContent,this.#J.textContent="Drop file"}};#K=()=>{if(this.removeAttribute("dragover"),this.#J&&this.#J.dataset.prevText!==void 0)this.#J.textContent=this.#J.dataset.prevText,delete this.#J.dataset.prevText};#U=(q)=>{if(q.preventDefault(),this.removeAttribute("dragover"),this.#J&&this.#J.dataset.prevText!==void 0)this.#J.textContent=this.#J.dataset.prevText,delete this.#J.dataset.prevText;if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;let Q=this.getAttribute("accepts"),Z=Array.from(q.dataTransfer.files);if(Q){let J=Q.split(",").map((j)=>j.trim().toLowerCase());Z=Z.filter((j)=>{let _="."+j.name.split(".").pop().toLowerCase(),W=j.type.toLowerCase();return J.some((N)=>N===_||N===W||N.endsWith("/*")&&W.startsWith(N.slice(0,-1)))})}if(!this.hasAttribute("multiple")||this.getAttribute("multiple")==="false")Z=Z.slice(0,1);if(Z.length===0)return;let $=new DataTransfer;if(Z.forEach((J)=>$.items.add(J)),this.#j=$.files,this.#Q)this.#Q.files=$.files;this.removeAttribute("url"),this.#Y(),this.#_()};#Y(){let q=this.getAttribute("accepts")||"",Q=this.getAttribute("label")||"Upload",Z=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",$=this.hasAttribute("multiple")&&this.getAttribute("multiple")!=="false",J=this.getAttribute("variant")||"input",j=this.#j&&this.#j.length>0||!!this.getAttribute("url")||!!this.getAttribute("filename");if(this.innerHTML="",j){let _=q?`Accepts ${q.split(",").map((U)=>U.trim()).join(", ")}`:"";if(this.#J=document.createElement("fig-button"),this.#J.setAttribute("variant",J),this.#J.setAttribute("type","upload"),this.#J.className="fig-input-file-filename",Z)this.#J.setAttribute("disabled","");let W=document.createElement("fig-truncate");W.setAttribute("position","middle"),W.setAttribute("tooltip","");let N=this.value,K=N.lastIndexOf(".");if(K>0)W.setAttribute("tail",N.slice(K));if(W.textContent=N,this.#J.appendChild(W),this.#Q=document.createElement("input"),this.#Q.type="file",this.#Q.title="",this.#Q.disabled=Z,q)this.#Q.setAttribute("accept",q);if($)this.#Q.setAttribute("multiple","");if(this.#Q.addEventListener("change",this.#W),this.#J.appendChild(this.#Q),_)this.#$=document.createElement("fig-tooltip"),this.#$.setAttribute("text",_),this.#$.appendChild(this.#J),this.appendChild(this.#$);else this.appendChild(this.#J);let G=document.createElement("fig-tooltip");if(G.setAttribute("text","Remove"),this.#Z=document.createElement("fig-button"),this.#Z.setAttribute("variant",J==="overlay"?"overlay":"ghost"),this.#Z.setAttribute("icon","true"),this.#Z.setAttribute("aria-label","Remove"),this.#Z.className="fig-input-file-clear",Z)this.#Z.setAttribute("disabled","");this.#Z.replaceChildren(c("minus")),this.#Z.addEventListener("click",this.#X),G.appendChild(this.#Z),this.appendChild(G)}else{let _=q?`Accepts ${q.split(",").map((W)=>W.trim()).join(", ")}`:"";if(_)this.#$=document.createElement("fig-tooltip"),this.#$.setAttribute("text",_);if(this.#J=document.createElement("fig-button"),this.#J.setAttribute("variant",J),this.#J.setAttribute("type","upload"),this.#J.textContent=Q,Z)this.#J.setAttribute("disabled","");if(this.#Q=document.createElement("input"),this.#Q.type="file",this.#Q.title="",this.#Q.disabled=Z,q)this.#Q.setAttribute("accept",q);if($)this.#Q.setAttribute("multiple","");if(this.#Q.addEventListener("change",this.#W),this.#J.appendChild(this.#Q),this.#$)this.#$.appendChild(this.#J),this.appendChild(this.#$);else this.appendChild(this.#J)}}}O("fig-input-file",Gq);class E extends HTMLElement{#Q={x:0.42,y:0};#q={x:0.58,y:1};#Z={stiffness:200,damping:15,mass:1};#$="bezier";#J=2;#j=null;#N=null;#_=null;#W=null;#X=null;#G=null;#K=null;#U=null;#Y=null;#R=null;#z=null;#M=0.8;#L=200;#B=200;#H=null;#k=null;#T=null;#A=null;#O=5;#f=10;#D=10;#C=3;static PRESETS=[{group:null,name:"Linear",type:"bezier",value:[0,0,1,1]},{group:"Bezier",name:"Ease in",type:"bezier",value:[0.42,0,1,1]},{group:"Bezier",name:"Ease out",type:"bezier",value:[0,0,0.58,1]},{group:"Bezier",name:"Ease in and out",type:"bezier",value:[0.42,0,0.58,1]},{group:"Bezier",name:"Ease in back",type:"bezier",value:[0.6,-0.28,0.735,0.045]},{group:"Bezier",name:"Ease out back",type:"bezier",value:[0.175,0.885,0.32,1.275]},{group:"Bezier",name:"Ease in and out back",type:"bezier",value:[0.68,-0.55,0.265,1.55]},{group:"Bezier",name:"Custom bezier",type:"bezier",value:null},{group:"Spring",name:"Gentle",type:"spring",spring:{stiffness:120,damping:14,mass:1}},{group:"Spring",name:"Quick",type:"spring",spring:{stiffness:380,damping:20,mass:1}},{group:"Spring",name:"Bouncy",type:"spring",spring:{stiffness:250,damping:8,mass:1}},{group:"Spring",name:"Slow",type:"spring",spring:{stiffness:60,damping:11,mass:1}},{group:"Spring",name:"Custom spring",type:"spring",spring:null}];static get observedAttributes(){return["value","precision","aspect-ratio","edit"]}connectedCallback(){this.#J=parseInt(this.getAttribute("precision")||"2"),v(this,"--aspect-ratio",this.getAttribute("aspect-ratio"));let q=this.getAttribute("value");if(q)this.#V(q);this.#R=this.#F(),this.#w(),this.#l()}disconnectedCallback(){if(this.#j=null,this.#A)this.#A.disconnect(),this.#A=null}attributeChangedCallback(q,Q,Z){if(Q===Z)return;if(q==="aspect-ratio"){if(v(this,"--aspect-ratio",Z),this.#N)this.#u(),this.#d();return}if(q==="edit"){if(this.isConnected)this.#w();return}if(q==="value"&&Z){let $=this.#$;if(this.#V(Z),this.#R=this.#F(),$!==this.#$&&this.#S())this.#w();else{if(this.#N)this.#d();this.#q0(),this.#t()}}if(q==="precision")this.#J=parseInt(Z||"2")}get value(){if(this.#$==="spring"){let{stiffness:Q,damping:Z,mass:$}=this.#Z;return`spring(${Q}, ${Z}, ${$})`}let q=this.#J;return`${this.#Q.x.toFixed(q)}, ${this.#Q.y.toFixed(q)}, ${this.#q.x.toFixed(q)}, ${this.#q.y.toFixed(q)}`}get cssValue(){if(this.#$==="spring"){let Q=this.#I(),Z=20,$=Math.max(1,Math.floor(Q.length/20)),J=[];for(let j=0;j<Q.length;j+=$)J.push(Q[j].value.toFixed(3));if(Q.length>0)J.push(Q[Q.length-1].value.toFixed(3));return`linear(${J.join(", ")})`}let q=this.#J;return`cubic-bezier(${this.#Q.x.toFixed(q)}, ${this.#Q.y.toFixed(q)}, ${this.#q.x.toFixed(q)}, ${this.#q.y.toFixed(q)})`}get preset(){return this.#R}set value(q){this.setAttribute("value",q)}#V(q){let Q=q.match(/^spring\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if(Q)return this.#$="spring",this.#Z.stiffness=parseFloat(Q[1]),this.#Z.damping=parseFloat(Q[2]),this.#Z.mass=parseFloat(Q[3]),!0;let Z=q.split(",").map(($)=>parseFloat($.trim()));if(Z.length>=4&&Z.every(($)=>!isNaN($)))return this.#$="bezier",this.#Q.x=Z[0],this.#Q.y=Z[1],this.#q.x=Z[2],this.#q.y=Z[3],!0;return!1}#F(){if(this.#$==="bezier"){for(let Q of E.PRESETS){if(Q.type!=="bezier"||!Q.value)continue;if(Math.abs(this.#Q.x-Q.value[0])<0.001&&Math.abs(this.#Q.y-Q.value[1])<0.001&&Math.abs(this.#q.x-Q.value[2])<0.001&&Math.abs(this.#q.y-Q.value[3])<0.001)return Q.name}return"Custom bezier"}for(let Q of E.PRESETS){if(Q.type!=="spring"||!Q.spring)continue;if(Math.abs(this.#Z.stiffness-Q.spring.stiffness)<0.001&&Math.abs(this.#Z.damping-Q.spring.damping)<0.001&&Math.abs(this.#Z.mass-Q.spring.mass)<0.001)return Q.name}return"Custom spring"}#I(){let{stiffness:q,damping:Q,mass:Z}=this.#Z,$=0.004,J=5,j=[],_=0,W=0;for(let N=0;N<=5;N+=0.004){let K=-q*(_-1)-Q*W;if(W+=K/Z*0.004,_+=W*0.004,j.push({t:N,value:_}),N>0.1&&Math.abs(_-1)<0.0005&&Math.abs(W)<0.0005)break}return j}static#P(q,Q=24){let{stiffness:Z,damping:$,mass:J}=q,j=0.004,_=5,W=[],N=0,K=0;for(let A=0;A<=5;A+=0.004){let R=-Z*(N-1)-$*K;if(K+=R/J*0.004,N+=K*0.004,W.push({t:A,value:N}),A>0.1&&Math.abs(N-1)<0.001&&Math.abs(K)<0.001)break}let G=W[W.length-1].t||1,U=1;for(let A of W)if(A.value>U)U=A.value;let X=0;for(let A of W)if(A.value<X)X=A.value;let z=Math.max(U-X,1),B=6,L=Q-B*2,k=Math.max(1,Math.floor(W.length/30)),H="";for(let A=0;A<W.length;A+=k){let R=B+W[A].t/G*L,D=B+(1-(W[A].value-X)/z)*L;H+=(A===0?"M":"L")+R.toFixed(1)+","+D.toFixed(1)}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${H}" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none"/></svg>`}static curveIcon(q,Q,Z,$,J=24){let _=(J-12)/2,W=48,N=[],K=(R,D,I,S,w)=>{let y=1-w;return y*y*y*R+3*y*y*w*D+3*y*w*w*I+w*w*w*S};for(let R=0;R<=48;R++){let D=R/48;N.push({x:K(0,q,Z,1,D),y:K(0,Q,$,1,D)})}let G=1/0,U=-1/0,X=1/0,z=-1/0;for(let R of N){if(R.x<G)G=R.x;if(R.x>U)U=R.x;if(R.y<X)X=R.y;if(R.y>z)z=R.y}let B=Math.max(U-G,0.000001),L=Math.max(z-X,0.000001),k=(R)=>_+(R-G)/B*12,H=(R)=>_+(1-(R-X)/L)*12,A="";for(let R=0;R<N.length;R++){let D=k(N[R].x),I=H(N[R].y);A+=`${R===0?"M":"L"}${D.toFixed(1)},${I.toFixed(1)}`}return`<svg width="${J}" height="${J}" viewBox="0 0 ${J} ${J}" fill="none"><path d="${A}" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>`}#S(){return this.getAttribute("edit")!=="false"}#w(){if(this.classList.toggle("spring-mode",this.#$==="spring"),this.classList.toggle("bezier-mode",this.#$!=="spring"),this.#v(),this.innerHTML=this.#h(),this.#m(),this.#N)this.#r(),this.#u(),this.#d();this.#t(),this.#L0()}static#y(q){return String(q).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}#g(){return["fig-select","fig-select-options","fig-select-option"].every((q)=>{let Q=customElements.get(q);return typeof Q==="function"&&Q.prototype instanceof HTMLElement})}#b(){let q="",Q=void 0,Z=!1;for(let J of E.PRESETS){if(!this.#S()&&!J.value&&!J.spring)continue;if(J.group!==Q){if(Z)q+="</optgroup>";if(Z=Boolean(J.group),Z)q+=`<optgroup label="${E.#y(J.group)}">`;Q=J.group}let j=E.#y(J.name);q+=`<option value="${j}">${j}</option>`}if(Z)q+="</optgroup>";return`<fig-dropdown class="fig-easing-curve-select" label="Easing preset" value="${E.#y(this.#R)}" full>${q}</fig-dropdown>`}#E(){if(!this.#g())return this.#b();let q="",Q=void 0;for(let $ of E.PRESETS){if(!this.#S()&&!$.value&&!$.spring)continue;if($.group!==Q){if($.group)q+=`<fig-separator label="${E.#y($.group)}"></fig-separator>`;Q=$.group}let J;if($.type==="spring"){let _=$.spring||this.#Z;J=E.#P(_)}else{let _=$.value||[this.#Q.x,this.#Q.y,this.#q.x,this.#q.y];J=E.curveIcon(..._)}let j=E.#y($.name);q+=`<fig-select-option value="${j}" label="${j}"><span slot="prepend">${J}</span><span>${j}</span></fig-select-option>`}return`<fig-select class="fig-easing-curve-select" label="Easing preset" value="${E.#y(this.#R)}" full><fig-select-options>${q}</fig-select-options></fig-select>`}#h(){let Q=this.#E();if(!this.#S())return Q;let Z=`<fig-input-text class="fig-easing-curve-value-input" value="${E.#y(this.value)}" full></fig-input-text>`;if(this.#$==="spring")return`${Q}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
         <rect class="fig-easing-curve-bounds" x="0" y="0" width="200" height="200"/>
         <line class="fig-easing-curve-target" x1="0" y1="40" x2="200" y2="40"/>
         <path class="fig-easing-curve-path"/>

package/fig-editor.css

@@ -1,5 +1,4 @@
 @import url("fig-layer.css");
-@import url("fig-lab.css");
 
 :root,
 :host {

package/fig-lab.css

@@ -92,6 +92,7 @@ fig-attachment {
   display: block;
   flex: 0 0 var(--fig-attachment-size);
   width: var(--fig-attachment-size);
+  height: var(--fig-attachment-size);
   min-width: 0;
 
   fig-image {
@@ -315,6 +316,28 @@ fig-content:has(> propskit-group[name]:last-child) {
   padding-bottom: 0;
 }
 
+/* Disabled PropsKit text and number inputs should render without input chrome. */
+:is(
+  propskit-switch,
+  propskit-color,
+  propskit-gradient,
+  propskit-select,
+  propskit-text,
+  propskit-number,
+  propskit-position,
+  propskit-color-point,
+  propskit-point-radius,
+  propskit-point-radius-angle,
+  propskit-point-point,
+  propskit-group,
+  propskit-slider,
+  propskit-oscillator
+) :is(fig-input-text, fig-input-number)[disabled]:not([disabled="false"]) {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
 /* Large size: more left field padding; nudge trailing controls in from
    the right. propskit-select uses shared label padding instead. */
 :is(
@@ -1201,24 +1224,9 @@ propskit-slider {
       }
 
       &[type="hue"] .fig-slider-input-container::after {
-        --propskit-slider-hue-fade-size: 30%;
         background: var(--bg-hue);
-        mask-image: linear-gradient(
-          to right,
-          transparent 0%,
-          rgba(0, 0, 0, 0.16) calc(var(--propskit-slider-progress-percent) - var(--propskit-slider-hue-fade-size)),
-          black var(--propskit-slider-progress-percent),
-          rgba(0, 0, 0, 0.16) calc(var(--propskit-slider-progress-percent) + var(--propskit-slider-hue-fade-size)),
-          transparent 100%
-        );
-        -webkit-mask-image: linear-gradient(
-          to right,
-          transparent 0%,
-          rgba(0, 0, 0, 0.16) calc(var(--propskit-slider-progress-percent) - var(--propskit-slider-hue-fade-size)),
-          black var(--propskit-slider-progress-percent),
-          rgba(0, 0, 0, 0.16) calc(var(--propskit-slider-progress-percent) + var(--propskit-slider-hue-fade-size)),
-          transparent 100%
-        );
+        mask-image: none;
+        -webkit-mask-image: none;
       }
 
       &[type="opacity"] .fig-slider-input-container::before {
@@ -1366,6 +1374,115 @@ propskit-slider {
   }
 }
 
+propskit-color-point,
+propskit-point-point,
+propskit-point-radius,
+propskit-point-radius-angle {
+  display: contents;
+}
+
+propskit-position {
+  --propskit-position-height: 1.5rem;
+  --propskit-position-vertical-padding: var(--spacer-1);
+  --propskit-position-horizontal-padding: var(--spacer-3);
+  --figma-focus-outline-offset: 1px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacer-1);
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--propskit-position-vertical-padding)
+    var(--propskit-position-horizontal-padding);
+
+  &[size="large"] {
+    --propskit-position-height: 2rem;
+
+    .propskit-position-row {
+      --fig-field-label-max-height: var(--spacer-5);
+      padding-left: var(--spacer-2-5);
+    }
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+
+    .propskit-position-row > label {
+      color: var(--figma-color-text-disabled);
+    }
+  }
+
+  .propskit-position-row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: var(--propskit-position-height);
+    min-height: var(--propskit-position-height);
+    padding: 0 var(--spacer-1) 0 var(--spacer-2);
+    padding-right: 0;
+    border-radius: var(--radius-medium);
+    background-color: var(--figma-color-bg-secondary);
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+    }
+
+    &:hover::after {
+      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    }
+
+    & > label {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      flex: 1 1 auto;
+      min-width: 0;
+      margin: 0 auto 0 0;
+      padding: 0;
+      overflow: hidden;
+      color: var(--figma-color-text-secondary);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: none;
+    }
+
+    & > [data-propskit-position-axis] {
+      position: relative;
+      z-index: 1;
+      flex: 0 1 auto;
+      min-width: 0;
+    }
+  }
+
+  fig-input-number {
+    width: 3.85rem;
+    border: 0;
+    background-color: transparent;
+    box-shadow: none;
+    outline: none !important;
+
+    &:hover,
+    &:focus-within {
+      border: 0;
+      background-color: transparent;
+      box-shadow: none;
+      outline: none !important;
+    }
+  }
+
+  fig-input-number[data-propskit-position-axis="y"] {
+    margin-left: calc(-1 * var(--spacer-2));
+  }
+}
+
 /* Canvas Control */
 body {
   --fig-lab-cursor: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_20065_231516)"><g filter="url(%23filter0_d_20065_231516)"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z" fill="white"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z" fill="black"/></g><defs><filter id="filter0_d_20065_231516" x="-0.5" y="0.5" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1.5"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_20065_231516"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_20065_231516" result="shape"/></filter><clipPath id="clip0_20065_231516"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>') 3 3, default;