@rogieking/figui3 6.9.7 → 6.9.9

package/dist/fig.js

@@ -186,7 +186,7 @@ var H1=(Q,Z)=>()=>(Q&&(Z=Q(Q=0)),Z);var D1={};var M0=H1(()=>{/*! Vendored from @
     </svg>
     ${q}
   </fig-button>
-</div>`,this.#Q=this.querySelector("fig-input-text"),this.#$=this.querySelector("fig-button"),this.#Z&&this.#J&&this.#$){if(!this.#J.hasAttribute("type"))this.#J.setAttribute("type","dropdown");if(!this.#J.hasAttribute("label"))this.#J.setAttribute("label",_);if(J)this.#J.setAttribute("experimental",J);this.#$.append(this.#J)}this.#j=this.querySelector("fig-dropdown"),this.#T()}#W(){this.#M(),this.#j?.addEventListener("input",this.#G),this.#Q?.addEventListener("input",this.#X),this.#Q?.addEventListener("change",this.#N)}#M(){this.#j?.removeEventListener("input",this.#G),this.#Q?.removeEventListener("input",this.#X),this.#Q?.removeEventListener("change",this.#N)}#H(Q){Q.stopPropagation();let Z=Q.target.closest("fig-dropdown")?.value??"";if(this.#q=!0,this.setAttribute("value",Z),this.#q=!1,this.#Q)this.#Q.setAttribute("value",Z);this.#F(),this.#B()}#O(Q){Q.stopPropagation();let Z=Q.target.value??"";this.#q=!0,this.setAttribute("value",Z),this.#q=!1,this.#F()}#L(Q){Q.stopPropagation();let Z=Q.target.value??"";this.#q=!0,this.setAttribute("value",Z),this.#q=!1,this.#B()}#F(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value}}))}#B(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value}}))}#A(){return(this.getAttribute("options")||"").split(",").map((Q)=>Q.trim()).filter(Boolean)}#z(){return(this.getAttribute("aria-label")||this.getAttribute("placeholder")||"Combo input").trim()}#E(){return`${this.#z()} options`}#T(){if(this.#Q)this.#_.forEach((Q)=>{let Z=this.getAttribute(Q);if(Z===null)this.#Q.removeAttribute(Q);else this.#Q.setAttribute(Q,Z)});if(this.#j&&!this.#j.hasAttribute("aria-label"))this.#j.setAttribute("label",this.#E())}#C(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.#j)if(Q)this.#j.setAttribute("disabled","");else this.#j.removeAttribute("disabled")}focus(){this.#Q?.focus()}attributeChangedCallback(Q,Z,$){if(Z===$)return;switch(Q){case"options":if(this.#j&&!this.#Z){let J=this.#A();this.#j.innerHTML=J.map((j)=>`<option>${j}</option>`).join("")}break;case"placeholder":if(this.#Q)this.#Q.setAttribute("placeholder",$||"");this.#T();break;case"value":if(!this.#q&&this.#Q)this.#Q.setAttribute("value",$||"");break;case"disabled":this.#C($!==null&&$!=="false");break;case"experimental":if(this.#j){if($)this.#j.setAttribute("experimental",$);else if(!this.#Z)this.#j.removeAttribute("experimental")}break;case"aria-label":case"aria-labelledby":case"aria-describedby":case"aria-invalid":case"aria-required":this.#T();break}}}customElements.define("fig-combo-input",i0);class r0 extends HTMLElement{#Z="color";#Q=null;#j=!1;constructor(){super();this.#Q=this.#N.bind(this)}static get observedAttributes(){return["background","size","selected","disabled","alpha","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.#G(),this.#$(),this.#X()}#$(){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 Z=Q.toLowerCase();if(Z.includes("gradient"))return"gradient";if(Z.includes("url("))return"image";return"color"}#q(Q){if(!Q)return"#D9D9D9";if(Q.startsWith("#"))return Q.slice(0,7);try{let{ctx:Z}=X0(1,1);return Z.fillStyle=Q,Z.fillStyle}catch{return"#D9D9D9"}}#_(Q){if(!Q||!Q.includes("var("))return Q;let Z=this.style.background;this.style.background=Q;let $=getComputedStyle(this),J=$.backgroundImage,j=$.backgroundColor;if(this.style.background=Z,J&&J!=="none")return J;return j||Q}#G(){let Q=this.getAttribute("background")||"#D9D9D9",Z=Q.includes("var("),$=Z?this.#_(Q):Q,J=this.#J($);if(J!==this.#Z||!this.input){if(this.#Z=J,this.setAttribute("data-type",this.#Z),this.input)this.input.removeEventListener("input",this.#Q);if(this.#Z==="color"){let _=this.#q($);if(this.innerHTML=`<div></div><input type="color" value="${_}" />`,this.input=this.querySelector("input"),!Z)this.input.addEventListener("input",this.#Q);this.#X()}else this.innerHTML="<div></div>",this.input=null,this.#X()}else if(this.#Z==="color"&&this.input){let _=this.#q($);if(this.input.value!==_)this.input.value=_}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})`)}#X(){let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";if(this.setAttribute("aria-disabled",Q?"true":"false"),this.input){this.input.disabled=Q;let Z=this.getAttribute("aria-labelledby"),$=this.getAttribute("aria-label")||"Color swatch",J=this.getAttribute("aria-describedby");if(Z)this.input.setAttribute("aria-labelledby",Z),this.input.removeAttribute("aria-label");else this.input.setAttribute("aria-label",$),this.input.removeAttribute("aria-labelledby");if(J)this.input.setAttribute("aria-describedby",J);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")}#N(Q){this.#j=!0,this.setAttribute("background",Q.target.value),this.#j=!1}get background(){return this.getAttribute("background")}set background(Q){this.setAttribute("background",Q)}focus(){this.input?.focus()}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="background"){if(this.#j){let J=/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test($);this.style.setProperty("--swatch-background",J?$:`linear-gradient(${$}, ${$})`);return}this.#G()}else if(Q==="alpha")this.#$();else if(Q==="disabled"||Q==="aria-label"||Q==="aria-labelledby"||Q==="aria-describedby")this.#X()}get alpha(){return this.getAttribute("alpha")}set alpha(Q){if(Q===null||Q===void 0)this.removeAttribute("alpha");else this.setAttribute("alpha",Q)}}customElements.define("fig-swatch",r0);class Z0 extends HTMLElement{#Z=null;#Q=null;#j=null;#$=null;#J=null;#q=null;#_=null;#G=this.#V.bind(this);#X=this.#v.bind(this);#N=this.#g.bind(this);#Y=this.#u.bind(this);#K=null;#U=null;#W=null;#M=null;#H=null;#O=null;#L=null;static get observedAttributes(){return["src","type","alt","upload","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.#Z}set src(Q){if(this.#Z=Q||"",Q===null||Q===void 0||Q==="")this.removeAttribute("src");else this.setAttribute("src",Q)}get file(){return this.#_}#F(){return this.#q||this.#Z||""}async getBase64(){if(this.mediaKind!=="image")return null;if(!this.#F())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,j)=>{this.#Q.addEventListener("load",J,{once:!0}),this.#Q.addEventListener("error",j,{once:!0})})}catch{}let Q=this.#Q.naturalWidth,Z=this.#Q.naturalHeight;if(!(Q>0)||!(Z>0))return null;let $=document.createElement("canvas");return $.width=Q,$.height=Z,$.getContext("2d").drawImage(this.#Q,0,0),$.toDataURL()}connectedCallback(){this.#Z=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 Z=this.getAttribute("fit");if(Z)this.style.setProperty("--fig-media-fit",Z);if(this.querySelectorAll("fig-swatch[data-generated]").forEach((J)=>J.remove()),this.#A(),this.#E(),this.#P(),this.#T(),this.#D(),this.hasAttribute("upload")&&this.getAttribute("upload")!=="false"&&!this.querySelector("fig-input-file[data-generated]"))this.#f()}disconnectedCallback(){if(this.#$?.removeEventListener("change",this.#G),this.#B(),this.#w(),this.#J)URL.revokeObjectURL(this.#J),this.#J=null;this.#q=null}#B(){if(!this.#Q)return;if(this.#Q.tagName==="VIDEO")this.#Q.removeEventListener("play",this.#X),this.#Q.removeEventListener("pause",this.#N),this.#Q.removeEventListener("ended",this.#Y)}#A(){if(this.#j?.isConnected)return;let Q=this.querySelector(":scope > fig-preview");if(Q){this.#j=Q;return}let Z=document.createElement("fig-preview");Z.setAttribute("data-generated",""),this.prepend(Z),this.#j=Z}#z(){let Q=this.mediaKind==="video"?"video":"img";return this.querySelector(`${Q}:not([data-generated])`)}#E(){let Q=this.#z();if(Q){if(this.#A(),this.#Q&&this.#Q!==Q){if(this.#B(),this.#Q.hasAttribute("data-generated"))this.#Q.remove()}if(this.#Q=Q,this.#j&&Q.parentElement!==this.#j)this.#j.append(Q);this.#T();return}this.#A();let Z=this.mediaKind==="video"?"VIDEO":"IMG";if(this.#Q&&this.#Q.tagName!==Z){if(this.#B(),this.#Q.hasAttribute("data-generated"))this.#Q.remove();this.#Q=null}if(this.#Q)return;if(this.mediaKind==="video"){let $=document.createElement("video");$.setAttribute("data-generated",""),$.className="fig-media-element",$.setAttribute("playsinline",""),$.preload="auto",this.#j.append($),this.#Q=$,this.#Q.addEventListener("play",this.#X),this.#Q.addEventListener("pause",this.#N),this.#Q.addEventListener("ended",this.#Y);let J=()=>{if(this.#Q?.autoplay)return;try{this.#Q.currentTime=0.001}catch{}};this.#Q.addEventListener("loadedmetadata",J,{once:!0})}else{let $=document.createElement("img");$.setAttribute("data-generated",""),$.className="fig-media-element",$.loading="lazy",$.decoding="async",$.alt=this.getAttribute("alt")||"",this.#j.append($),this.#Q=$}}#T(){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 Z=this.getAttribute(Q);if(Z===null)this.#Q.removeAttribute(Q);else this.#Q.setAttribute(Q,Z)})}#C(){return this.querySelector(":scope > caption:not([data-generated])")}#S(){return Array.from(this.querySelectorAll(":scope > caption[data-generated]"))}#D(){let Q=this.#C(),Z=this.#S();if(Q){Z.forEach((_)=>_.remove());return}let $=this.getAttribute("caption")||"";if(!$){Z.forEach((_)=>_.remove());return}let J=Z[0]||document.createElement("caption");if(Z.slice(1).forEach((_)=>_.remove()),!J.hasAttribute("data-generated"))J.setAttribute("data-generated","");if(J.textContent!==$)J.textContent=$;let j=this.querySelector(":scope > fig-media-controls");if(j)j.before(J);else if(this.#j?.isConnected)this.#j.after(J);else if(!J.isConnected)this.append(J)}#k(Q,Z=!1){if(!this.hasAttribute(Q))return Z;return this.getAttribute(Q)!=="false"}#P(){if(!this.#Q)return;if(!this.#Q.hasAttribute("data-generated"))return;let Q=this.#F();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.#T();return}let Z=this.getAttribute("poster");if(Z)this.#Q.setAttribute("poster",Z);else this.#Q.removeAttribute("poster");this.#Q.controls=!1,this.#Q.removeAttribute("controls"),this.#Q.autoplay=this.#k("autoplay",!1),this.#Q.loop=this.#k("loop",!1),this.#Q.muted=this.#k("muted",!1),this.#Q.playsInline=!0,this.#T(),this.#I()}get mediaEl(){return this.#Q}#I(){if(this.mediaKind!=="video"){this.#w();return}let Q=this.querySelector(":scope > fig-media-controls:not([data-generated])");if(Q){if(this.#K!==Q)this.#w(),this.#K=Q;this.#x();return}if(this.#k("controls",!1))this.#R();else this.#w()}#R(){let Q=Array.from(this.querySelectorAll(":scope > fig-media-controls[data-generated]")),Z=Q[0];if(Q.slice(1).forEach((J)=>J.remove()),Z){this.#K=Z,this.#x();return}let $=document.createElement("fig-media-controls");$.setAttribute("data-generated",""),this.append($),this.#K=$,this.#x()}#x(){if(!this.#K||!this.#Q)return;if(this.#U===this.#Q&&this.#W===this.#K)return;this.#b();let Q=this.#K,Z=this.#Q;this.#U=Z,this.#W=Q;let $=null,J=()=>{if(Q.playing=!Z.paused&&!Z.ended,Number.isFinite(Z.duration))Q.duration=Z.duration;if($!==null)if(Math.abs(Z.currentTime-$)<0.25)$=null;else return;Q.time=Z.currentTime||0},j=()=>{let G=Z.play?.();if(G&&typeof G.catch==="function")G.catch(()=>{})},_=()=>Z.pause?.(),q=(G)=>{let X=Number(G?.detail?.time);if(!Number.isFinite(X))return;$=X;try{Z.currentTime=X}catch{}};this.#M=J,this.#H=j,this.#O=_,this.#L=q,Z.addEventListener("play",J),Z.addEventListener("pause",J),Z.addEventListener("ended",J),Z.addEventListener("timeupdate",J),Z.addEventListener("loadedmetadata",J),Z.addEventListener("durationchange",J),Z.addEventListener("seeked",J),Q.addEventListener("play",j),Q.addEventListener("pause",_),Q.addEventListener("seek",q),J()}#b(){let Q=this.#U,Z=this.#W;if(Q&&this.#M)Q.removeEventListener("play",this.#M),Q.removeEventListener("pause",this.#M),Q.removeEventListener("ended",this.#M),Q.removeEventListener("timeupdate",this.#M),Q.removeEventListener("loadedmetadata",this.#M),Q.removeEventListener("durationchange",this.#M),Q.removeEventListener("seeked",this.#M);if(Z){if(this.#H)Z.removeEventListener("play",this.#H);if(this.#O)Z.removeEventListener("pause",this.#O);if(this.#L)Z.removeEventListener("seek",this.#L)}this.#U=null,this.#W=null,this.#M=null,this.#H=null,this.#O=null,this.#L=null}#w(){this.#b(),this.querySelectorAll(":scope > fig-media-controls[data-generated]").forEach((Q)=>{Q.remove()}),this.#K=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()}#f(){let Q=document.createElement("fig-input-file");Q.setAttribute("data-generated",""),Q.setAttribute("accepts",this.mediaKind==="video"?"video/*":"image/*"),Q.setAttribute("variant","overlay");let Z=this.getAttribute("label")||"Upload";if(Q.setAttribute("label",this.#Z?"Replace":Z),this.#_?.name)Q.setAttribute("filename",this.#_.name);else if(this.#Z)Q.setAttribute("url",this.#Z);Q.addEventListener("change",this.#G),this.#A(),this.#j.append(Q),this.#$=Q}#y(){if(this.#$)this.#$.removeEventListener("change",this.#G),this.#$.remove(),this.#$=null}#V(Q){if(Q.target!==this.#$)return;let Z=Q.detail?.files?.[0],$=Q.detail?.cleared===!0;if(!Z){if(this.#J)URL.revokeObjectURL(this.#J),this.#J=null;if(this.#_=null,this.#q=null,$)this.src="";if(this.#P(),this.#$){let J=this.getAttribute("label")||"Upload";if(this.#$.setAttribute("label",this.#Z?"Replace":J),this.#$.removeAttribute("filename"),this.#Z)this.#$.setAttribute("url",this.#Z);else this.#$.removeAttribute("url")}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}));return}if(this.#J)URL.revokeObjectURL(this.#J);if(this.#_=Z,this.#J=URL.createObjectURL(Z),this.#q=this.#J,this.#P(),this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{file:Z,src:this.#J}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0})),this.#$)this.#$.removeAttribute("url"),this.#$.setAttribute("filename",Z.name),this.#$.setAttribute("label","Replace")}#h(Q){if(!this.#Q)return;this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,cancelable:!1,composed:!0,detail:{src:this.#Z||"",currentTime:this.#Q.currentTime,duration:this.#Q.duration}}))}#v(){this.#h("play")}#g(){this.#h("pause")}#u(){this.#h("ended")}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="src"){let J=$||"",j=J&&(J===this.#q||J===this.#J);if(this.#Z=J,this.#J&&!j)URL.revokeObjectURL(this.#J),this.#J=null,this.#q=null,this.#_=null;if(this.#P(),this.#$){let _=this.getAttribute("label")||"Upload";if(this.#$.setAttribute("label",this.#Z?"Replace":_),this.#Z)if(this.#_?.name)this.#$.removeAttribute("url"),this.#$.setAttribute("filename",this.#_.name);else this.#$.setAttribute("url",this.#Z),this.#$.removeAttribute("filename");else this.#$.removeAttribute("url"),this.#$.removeAttribute("filename")}}if(Q==="type"){if(this.#E(),this.#P(),this.#$)this.#$.setAttribute("accepts",this.mediaKind==="video"?"video/*":"image/*")}if(["alt","aria-label","aria-labelledby","title"].includes(Q))this.#T();if(Q==="upload"){let J=$!==null&&$!=="false";if(J&&!this.#$)this.#f();else if(!J)this.#y()}if(Q==="aspect-ratio")if($)this.style.setProperty("--fig-media-aspect-ratio",$);else this.style.removeProperty("--fig-media-aspect-ratio");if(Q==="fit")if($)this.style.setProperty("--fig-media-fit",$);else this.style.removeProperty("--fig-media-fit");if(Q==="label"&&this.#$){let J=this.getAttribute("label")||"Upload";this.#$.setAttribute("label",this.#Z?"Replace":J)}if(["controls","autoplay","loop","muted","poster"].includes(Q))this.#P();if(Q==="caption")this.#D()}}customElements.define("fig-media",Z0);class o0 extends Z0{get mediaKind(){return"image"}}customElements.define("fig-image",o0);class l0 extends Z0{get mediaKind(){return"video"}}customElements.define("fig-video",l0);class a0 extends HTMLElement{#Z=null;#Q=null;#j=null;#$=null;#J=!1;#q=!1;static get observedAttributes(){return["playing","duration","time"]}connectedCallback(){this.#_(),this.#N(),this.#Y()}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 Z=Number(Q);if(!Number.isFinite(Z)||Z<0){this.removeAttribute("duration");return}this.setAttribute("duration",String(Z))}get time(){let Q=Number(this.getAttribute("time"));return Number.isFinite(Q)&&Q>=0?Q:0}set time(Q){let Z=Number(Q);if(!Number.isFinite(Z)||Z<0){this.removeAttribute("time");return}this.setAttribute("time",String(Z))}attributeChangedCallback(Q){if(!this.#q)return;if(Q==="playing")this.#N();if(Q==="duration"||Q==="time")this.#Y()}#_(){if(this.#q)return;if(this.#q=!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 Z=document.createElement("fig-button");Z.setAttribute("variant","ghost"),Z.setAttribute("size","small"),Z.setAttribute("icon","true"),Z.setAttribute("aria-label","Play");let $=v("play",{className:"fig-media-controls-play-icon"});Z.append($),Q.append(Z),Z.addEventListener("click",(q)=>{q.preventDefault(),q.stopPropagation(),this.toggle()});let J=document.createElement("fig-slider");J.setAttribute("text","false"),J.setAttribute("min","0"),J.setAttribute("max",String(this.duration)),J.setAttribute("step","1"),J.setAttribute("value",String(this.time)),J.setAttribute("full",""),J.setAttribute("aria-label","Seek"),J.setAttribute("aria-valuetext",this.#X(this.time,this.duration));let j=document.createElement("span");j.className="fig-media-controls-time",j.textContent=this.#G(this.time);let _=(q)=>{let G=q.currentTarget,X=Number(G?.value);if(!Number.isFinite(X))return;this.#J=!0,this.setAttribute("time",String(X)),this.dispatchEvent(new CustomEvent("seek",{bubbles:!0,composed:!0,detail:{time:X}})),requestAnimationFrame(()=>{this.#J=!1})};J.addEventListener("input",_),J.addEventListener("change",_),this.append(Q,J,j),this.#Z=Z,this.#Q=Q,this.#j=J,this.#$=j}#G(Q){if(!Number.isFinite(Q)||Q<0)Q=0;let Z=Math.floor(Q),$=Math.floor(Z/60),J=Z%60;return`${String($).padStart(2,"0")}:${String(J).padStart(2,"0")}`}#X(Q,Z=0){let $=this.#G(Q);if(!Number.isFinite(Z)||Z<=0)return $;return`${$} of ${this.#G(Z)}`}#N(){if(!this.#Z)return;let Q=this.playing;this.#Z.setAttribute("aria-label",Q?"Pause":"Play"),this.#Q?.setAttribute("text",Q?"Pause":"Play");let Z=this.#Z.querySelector(".fig-media-controls-play-icon");if(Z)Z.setAttribute("name",Q?"pause":"play")}#Y(){if(!this.#j)return;let Q=this.duration;if(Number(this.#j.getAttribute("max"))!==Q)this.#j.setAttribute("max",String(Q));let Z=this.time;if(!this.#J)this.#j.setAttribute("value",String(Z));if(this.#j.setAttribute("aria-valuetext",this.#X(Z,Q)),this.#$)this.#$.textContent=this.#G(Z)}toggle(){let Q=!this.playing;this.playing=Q,this.dispatchEvent(new CustomEvent(Q?"play":"pause",{bubbles:!0,composed:!0,detail:{playing:Q}}))}play(){if(this.playing)return;this.toggle()}pause(){if(!this.playing)return;this.toggle()}}customElements.define("fig-media-controls",a0);class t0 extends HTMLElement{static observedAttributes=["accepts","label","disabled","multiple","variant","url","filename"];#Z=null;#Q=null;#j=null;#$=null;#J=null;#q=null;get files(){return this.#q}get#_(){let Q=this.getAttribute("filename");if(Q)return Q;let Z=this.getAttribute("url");if(!Z)return"";try{let J=new URL(Z,location.href).pathname.split("/").pop();return J?decodeURIComponent(J):Z}catch{return Z}}get value(){if(this.#q&&this.#q.length>0){if(this.#q.length===1)return this.#q[0].name;return`${this.#q.length} files`}return this.#_}connectedCallback(){this.#W(),this.addEventListener("dragover",this.#Y),this.addEventListener("dragleave",this.#K),this.addEventListener("drop",this.#U)}disconnectedCallback(){this.#Z?.removeEventListener("change",this.#X),this.#j?.removeEventListener("click",this.#N),this.removeEventListener("dragover",this.#Y),this.removeEventListener("dragleave",this.#K),this.removeEventListener("drop",this.#U)}attributeChangedCallback(Q,Z,$){if(Z===$)return;this.#W()}clear(){if(this.#q=null,this.#Z)this.#Z.value="";this.removeAttribute("url"),this.removeAttribute("filename"),this.#W(),this.#G({cleared:!0})}#G(Q={}){let Z={files:this.#q,...Q};this.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0}))}#X=()=>{if(this.#Z.files.length>0)this.#q=this.#Z.files,this.removeAttribute("url"),this.#W(),this.#G()};#N=(Q)=>{Q.stopPropagation(),this.clear()};#Y=(Q)=>{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 Z=this.getAttribute("accepts"),$=Array.from(Q.dataTransfer.files);if(Z){let j=Z.split(",").map((_)=>_.trim().toLowerCase());$=$.filter((_)=>{let q="."+_.name.split(".").pop().toLowerCase(),G=_.type.toLowerCase();return j.some((X)=>X===q||X===G||X.endsWith("/*")&&G.startsWith(X.slice(0,-1)))})}if(!this.hasAttribute("multiple"))$=$.slice(0,1);if($.length===0)return;let J=new DataTransfer;if($.forEach((j)=>J.items.add(j)),this.#q=J.files,this.#Z)this.#Z.files=J.files;this.removeAttribute("url"),this.#W(),this.#G()};#W(){let Q=this.getAttribute("accepts")||"",Z=this.getAttribute("label")||"Upload",$=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.hasAttribute("multiple"),j=this.getAttribute("variant")||"input",_=this.#q&&this.#q.length>0||!!this.getAttribute("url")||!!this.getAttribute("filename");if(this.innerHTML="",_){let q=Q?`Accepts ${Q.split(",").map((M)=>M.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",$)this.#J.setAttribute("disabled","");let G=document.createElement("fig-truncate");G.setAttribute("position","middle"),G.setAttribute("tooltip","");let X=this.value,K=X.lastIndexOf(".");if(K>0)G.setAttribute("tail",X.slice(K));if(G.textContent=X,this.#J.appendChild(G),this.#Z=document.createElement("input"),this.#Z.type="file",this.#Z.title="",Q)this.#Z.setAttribute("accept",Q);if(J)this.#Z.setAttribute("multiple","");if(this.#Z.addEventListener("change",this.#X),this.#J.appendChild(this.#Z),q)this.#$=document.createElement("fig-tooltip"),this.#$.setAttribute("text",q),this.#$.appendChild(this.#J),this.appendChild(this.#$);else this.appendChild(this.#J);let N=document.createElement("fig-tooltip");if(N.setAttribute("text","Remove"),this.#j=document.createElement("fig-button"),this.#j.setAttribute("variant",j==="overlay"?"overlay":"ghost"),this.#j.setAttribute("icon","true"),this.#j.setAttribute("aria-label","Remove"),this.#j.className="fig-input-file-clear",$)this.#j.setAttribute("disabled","");this.#j.replaceChildren(v("minus")),this.#j.addEventListener("click",this.#N),N.appendChild(this.#j),this.appendChild(N)}else{let q=Q?`Accepts ${Q.split(",").map((G)=>G.trim()).join(", ")}`:"";if(q)this.#$=document.createElement("fig-tooltip"),this.#$.setAttribute("text",q);if(this.#J=document.createElement("fig-button"),this.#J.setAttribute("variant",j),this.#J.setAttribute("type","upload"),this.#J.textContent=Z,$)this.#J.setAttribute("disabled","");if(this.#Z=document.createElement("input"),this.#Z.type="file",this.#Z.title="",Q)this.#Z.setAttribute("accept",Q);if(J)this.#Z.setAttribute("multiple","");if(this.#Z.addEventListener("change",this.#X),this.#J.appendChild(this.#Z),this.#$)this.#$.appendChild(this.#J),this.appendChild(this.#$);else this.appendChild(this.#J)}}}customElements.define("fig-input-file",t0);class b extends HTMLElement{#Z={x:0.42,y:0};#Q={x:0.58,y:1};#j={stiffness:200,damping:15,mass:1};#$="bezier";#J=2;#q=null;#_=null;#G=null;#X=null;#N=null;#Y=null;#K=null;#U=null;#W=null;#M=null;#H=null;#O=null;#L=null;#F=0.8;#B=200;#A=200;#z=null;#E=null;#T=null;#C=5;#S=2;#D=10;#k=10;#P=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"),x(this,"--aspect-ratio",this.getAttribute("aspect-ratio"));let Q=this.getAttribute("value");if(Q)this.#I(Q);this.#O=this.#R(),this.#f(),this.#d()}disconnectedCallback(){if(this.#q=null,this.#T)this.#T.disconnect(),this.#T=null}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="aspect-ratio"){if(x(this,"--aspect-ratio",$),this.#_)this.#i(),this.#s();return}if(Q==="edit"){if(this.isConnected)this.#f();return}if(Q==="value"&&$){let J=this.#$;if(this.#I($),this.#O=this.#R(),J!==this.#$&&this.#w())this.#f();else{if(this.#_)this.#s();this.#n(),this.#r()}}if(Q==="precision")this.#J=parseInt($||"2")}get value(){if(this.#$==="spring"){let{stiffness:Z,damping:$,mass:J}=this.#j;return`spring(${Z}, ${$}, ${J})`}let Q=this.#J;return`${this.#Z.x.toFixed(Q)}, ${this.#Z.y.toFixed(Q)}, ${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}`}get cssValue(){if(this.#$==="spring"){let Z=this.#x(),$=20,J=Math.max(1,Math.floor(Z.length/20)),j=[];for(let _=0;_<Z.length;_+=J)j.push(Z[_].value.toFixed(3));if(Z.length>0)j.push(Z[Z.length-1].value.toFixed(3));return`linear(${j.join(", ")})`}let Q=this.#J;return`cubic-bezier(${this.#Z.x.toFixed(Q)}, ${this.#Z.y.toFixed(Q)}, ${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)})`}get preset(){return this.#O}set value(Q){this.setAttribute("value",Q)}#I(Q){let Z=Q.match(/^spring\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if(Z)return this.#$="spring",this.#j.stiffness=parseFloat(Z[1]),this.#j.damping=parseFloat(Z[2]),this.#j.mass=parseFloat(Z[3]),!0;let $=Q.split(",").map((J)=>parseFloat(J.trim()));if($.length>=4&&$.every((J)=>!isNaN(J)))return this.#$="bezier",this.#Z.x=$[0],this.#Z.y=$[1],this.#Q.x=$[2],this.#Q.y=$[3],!0;return!1}#R(){if(this.#$==="bezier"){for(let Z of b.PRESETS){if(Z.type!=="bezier"||!Z.value)continue;if(Math.abs(this.#Z.x-Z.value[0])<0.001&&Math.abs(this.#Z.y-Z.value[1])<0.001&&Math.abs(this.#Q.x-Z.value[2])<0.001&&Math.abs(this.#Q.y-Z.value[3])<0.001)return Z.name}return"Custom bezier"}for(let Z of b.PRESETS){if(Z.type!=="spring"||!Z.spring)continue;if(Math.abs(this.#j.stiffness-Z.spring.stiffness)<0.001&&Math.abs(this.#j.damping-Z.spring.damping)<0.001&&Math.abs(this.#j.mass-Z.spring.mass)<0.001)return Z.name}return"Custom spring"}#x(){let{stiffness:Q,damping:Z,mass:$}=this.#j,J=0.004,j=5,_=[],q=0,G=0;for(let X=0;X<=5;X+=0.004){let K=-Q*(q-1)-Z*G;if(G+=K/$*0.004,q+=G*0.004,_.push({t:X,value:q}),X>0.1&&Math.abs(q-1)<0.0005&&Math.abs(G)<0.0005)break}return _}static#b(Q,Z=24){let{stiffness:$,damping:J,mass:j}=Q,_=0.004,q=5,G=[],X=0,K=0;for(let B=0;B<=5;B+=0.004){let O=-$*(X-1)-J*K;if(K+=O/j*0.004,X+=K*0.004,G.push({t:B,value:X}),B>0.1&&Math.abs(X-1)<0.001&&Math.abs(K)<0.001)break}let N=G[G.length-1].t||1,M=1;for(let B of G)if(B.value>M)M=B.value;let L=0;for(let B of G)if(B.value<L)L=B.value;let z=Math.max(M-L,1),U=6,W=Z-U*2,R=Math.max(1,Math.floor(G.length/30)),H="";for(let B=0;B<G.length;B+=R){let O=U+G[B].t/N*W,T=U+(1-(G[B].value-L)/z)*W;H+=(B===0?"M":"L")+O.toFixed(1)+","+T.toFixed(1)}return`<svg width="${Z}" height="${Z}" viewBox="0 0 ${Z} ${Z}" fill="none"><path d="${H}" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none"/></svg>`}static curveIcon(Q,Z,$,J,j=24){let q=(j-12)/2,G=48,X=[],K=(O,T,C,k,I)=>{let S=1-I;return S*S*S*O+3*S*S*I*T+3*S*I*I*C+I*I*I*k};for(let O=0;O<=48;O++){let T=O/48;X.push({x:K(0,Q,$,1,T),y:K(0,Z,J,1,T)})}let N=1/0,M=-1/0,L=1/0,z=-1/0;for(let O of X){if(O.x<N)N=O.x;if(O.x>M)M=O.x;if(O.y<L)L=O.y;if(O.y>z)z=O.y}let U=Math.max(M-N,0.000001),W=Math.max(z-L,0.000001),R=(O)=>q+(O-N)/U*12,H=(O)=>q+(1-(O-L)/W)*12,B="";for(let O=0;O<X.length;O++){let T=R(X[O].x),C=H(X[O].y);B+=`${O===0?"M":"L"}${T.toFixed(1)},${C.toFixed(1)}`}return`<svg width="${j}" height="${j}" viewBox="0 0 ${j} ${j}" fill="none"><path d="${B}" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>`}#w(){return this.getAttribute("edit")!=="false"}#f(){if(this.classList.toggle("spring-mode",this.#$==="spring"),this.classList.toggle("bezier-mode",this.#$!=="spring"),this.#g(),this.innerHTML=this.#h(),this.#u(),this.#_)this.#m(),this.#i(),this.#s();this.#r(),this.#L0()}static#y(Q){return String(Q).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}#V(){let Q="",Z=void 0;for(let $ of b.PRESETS){if(!this.#w()&&!$.value&&!$.spring)continue;if($.group!==Z){if(Z!==void 0)Q+="</optgroup>";if($.group)Q+=`<optgroup label="${$.group}">`;Z=$.group}let J;if($.type==="spring"){let _=$.spring||this.#j;J=b.#b(_)}else{let _=$.value||[this.#Z.x,this.#Z.y,this.#Q.x,this.#Q.y];J=b.curveIcon(..._)}let j=$.name===this.#O?" selected":"";Q+=`<option value="${$.name}"${j}>${J} ${$.name}</option>`}if(Z)Q+="</optgroup>";return`<fig-dropdown class="fig-easing-curve-dropdown" full experimental="modern">${Q}</fig-dropdown>`}#h(){let Z=this.#V();if(!this.#w())return Z;let $=`<fig-input-text class="fig-easing-curve-value-input" value="${b.#y(this.value)}" full></fig-input-text>`;if(this.#$==="spring")return`${Z}<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.#Z&&this.#J&&this.#$){if(!this.#J.hasAttribute("type"))this.#J.setAttribute("type","dropdown");if(!this.#J.hasAttribute("label"))this.#J.setAttribute("label",_);if(J)this.#J.setAttribute("experimental",J);this.#$.append(this.#J)}this.#j=this.querySelector("fig-dropdown"),this.#T()}#W(){this.#M(),this.#j?.addEventListener("input",this.#G),this.#Q?.addEventListener("input",this.#X),this.#Q?.addEventListener("change",this.#N)}#M(){this.#j?.removeEventListener("input",this.#G),this.#Q?.removeEventListener("input",this.#X),this.#Q?.removeEventListener("change",this.#N)}#H(Q){Q.stopPropagation();let Z=Q.target.closest("fig-dropdown")?.value??"";if(this.#q=!0,this.setAttribute("value",Z),this.#q=!1,this.#Q)this.#Q.setAttribute("value",Z);this.#F(),this.#B()}#O(Q){Q.stopPropagation();let Z=Q.target.value??"";this.#q=!0,this.setAttribute("value",Z),this.#q=!1,this.#F()}#L(Q){Q.stopPropagation();let Z=Q.target.value??"";this.#q=!0,this.setAttribute("value",Z),this.#q=!1,this.#B()}#F(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value}}))}#B(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value}}))}#A(){return(this.getAttribute("options")||"").split(",").map((Q)=>Q.trim()).filter(Boolean)}#z(){return(this.getAttribute("aria-label")||this.getAttribute("placeholder")||"Combo input").trim()}#E(){return`${this.#z()} options`}#T(){if(this.#Q)this.#_.forEach((Q)=>{let Z=this.getAttribute(Q);if(Z===null)this.#Q.removeAttribute(Q);else this.#Q.setAttribute(Q,Z)});if(this.#j&&!this.#j.hasAttribute("aria-label"))this.#j.setAttribute("label",this.#E())}#C(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.#j)if(Q)this.#j.setAttribute("disabled","");else this.#j.removeAttribute("disabled")}focus(){this.#Q?.focus()}attributeChangedCallback(Q,Z,$){if(Z===$)return;switch(Q){case"options":if(this.#j&&!this.#Z){let J=this.#A();this.#j.innerHTML=J.map((j)=>`<option>${j}</option>`).join("")}break;case"placeholder":if(this.#Q)this.#Q.setAttribute("placeholder",$||"");this.#T();break;case"value":if(!this.#q&&this.#Q)this.#Q.setAttribute("value",$||"");break;case"disabled":this.#C($!==null&&$!=="false");break;case"experimental":if(this.#j){if($)this.#j.setAttribute("experimental",$);else if(!this.#Z)this.#j.removeAttribute("experimental")}break;case"aria-label":case"aria-labelledby":case"aria-describedby":case"aria-invalid":case"aria-required":this.#T();break}}}customElements.define("fig-combo-input",i0);class r0 extends HTMLElement{#Z="color";#Q=null;#j=!1;constructor(){super();this.#Q=this.#N.bind(this)}static get observedAttributes(){return["background","size","selected","disabled","alpha","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.#G(),this.#$(),this.#X()}#$(){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 Z=Q.toLowerCase();if(Z.includes("gradient"))return"gradient";if(Z.includes("url("))return"image";return"color"}#q(Q){if(!Q)return"#D9D9D9";if(Q.startsWith("#"))return Q.slice(0,7);try{let{ctx:Z}=X0(1,1);return Z.fillStyle=Q,Z.fillStyle}catch{return"#D9D9D9"}}#_(Q){if(!Q||!Q.includes("var("))return Q;let Z=this.style.background;this.style.background=Q;let $=getComputedStyle(this),J=$.backgroundImage,j=$.backgroundColor;if(this.style.background=Z,J&&J!=="none")return J;return j||Q}#G(){let Q=this.getAttribute("background")||"#D9D9D9",Z=Q.includes("var("),$=Z?this.#_(Q):Q,J=this.#J($);if(J!==this.#Z||!this.input){if(this.#Z=J,this.setAttribute("data-type",this.#Z),this.input)this.input.removeEventListener("input",this.#Q);if(this.#Z==="color"){let _=this.#q($);if(this.innerHTML=`<div></div><input type="color" value="${_}" />`,this.input=this.querySelector("input"),!Z)this.input.addEventListener("input",this.#Q);this.#X()}else this.innerHTML="<div></div>",this.input=null,this.#X()}else if(this.#Z==="color"&&this.input){let _=this.#q($);if(this.input.value!==_)this.input.value=_}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})`)}#X(){let Q=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false";if(this.setAttribute("aria-disabled",Q?"true":"false"),this.input){this.input.disabled=Q;let Z=this.getAttribute("aria-labelledby"),$=this.getAttribute("aria-label")||"Color swatch",J=this.getAttribute("aria-describedby");if(Z)this.input.setAttribute("aria-labelledby",Z),this.input.removeAttribute("aria-label");else this.input.setAttribute("aria-label",$),this.input.removeAttribute("aria-labelledby");if(J)this.input.setAttribute("aria-describedby",J);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")}#N(Q){this.#j=!0,this.setAttribute("background",Q.target.value),this.#j=!1}get background(){return this.getAttribute("background")}set background(Q){this.setAttribute("background",Q)}focus(){this.input?.focus()}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="background"){if(this.#j){let J=/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test($);this.style.setProperty("--swatch-background",J?$:`linear-gradient(${$}, ${$})`);return}this.#G()}else if(Q==="alpha")this.#$();else if(Q==="disabled"||Q==="aria-label"||Q==="aria-labelledby"||Q==="aria-describedby")this.#X()}get alpha(){return this.getAttribute("alpha")}set alpha(Q){if(Q===null||Q===void 0)this.removeAttribute("alpha");else this.setAttribute("alpha",Q)}}customElements.define("fig-swatch",r0);class Z0 extends HTMLElement{#Z=null;#Q=null;#j=null;#$=null;#J=null;#q=null;#_=null;#G=this.#V.bind(this);#X=this.#v.bind(this);#N=this.#g.bind(this);#Y=this.#u.bind(this);#K=null;#U=null;#W=null;#M=null;#H=null;#O=null;#L=null;static get observedAttributes(){return["src","type","alt","upload","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.#Z}set src(Q){if(this.#Z=Q||"",Q===null||Q===void 0||Q==="")this.removeAttribute("src");else this.setAttribute("src",Q)}get file(){return this.#_}#F(){return this.#q||this.#Z||""}async getBase64(){if(this.mediaKind!=="image")return null;if(!this.#F())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,j)=>{this.#Q.addEventListener("load",J,{once:!0}),this.#Q.addEventListener("error",j,{once:!0})})}catch{}let Q=this.#Q.naturalWidth,Z=this.#Q.naturalHeight;if(!(Q>0)||!(Z>0))return null;let $=document.createElement("canvas");return $.width=Q,$.height=Z,$.getContext("2d").drawImage(this.#Q,0,0),$.toDataURL()}connectedCallback(){this.#Z=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 Z=this.getAttribute("fit");if(Z)this.style.setProperty("--fig-media-fit",Z);if(this.querySelectorAll("fig-swatch[data-generated]").forEach((J)=>J.remove()),this.#A(),this.#E(),this.#P(),this.#T(),this.#D(),this.hasAttribute("upload")&&this.getAttribute("upload")!=="false"&&!this.querySelector("fig-input-file[data-generated]"))this.#f()}disconnectedCallback(){if(this.#$?.removeEventListener("change",this.#G),this.#B(),this.#w(),this.#J)URL.revokeObjectURL(this.#J),this.#J=null;this.#q=null}#B(){if(!this.#Q)return;if(this.#Q.tagName==="VIDEO")this.#Q.removeEventListener("play",this.#X),this.#Q.removeEventListener("pause",this.#N),this.#Q.removeEventListener("ended",this.#Y)}#A(){if(this.#j?.isConnected)return;let Q=this.querySelector(":scope > fig-preview");if(Q){this.#j=Q;return}let Z=document.createElement("fig-preview");Z.setAttribute("data-generated",""),this.prepend(Z),this.#j=Z}#z(){let Q=this.mediaKind==="video"?"video":"img";return this.querySelector(`${Q}:not([data-generated])`)}#E(){let Q=this.#z();if(Q){if(this.#A(),this.#Q&&this.#Q!==Q){if(this.#B(),this.#Q.hasAttribute("data-generated"))this.#Q.remove()}if(this.#Q=Q,this.#j&&Q.parentElement!==this.#j)this.#j.append(Q);this.#T();return}this.#A();let Z=this.mediaKind==="video"?"VIDEO":"IMG";if(this.#Q&&this.#Q.tagName!==Z){if(this.#B(),this.#Q.hasAttribute("data-generated"))this.#Q.remove();this.#Q=null}if(this.#Q)return;if(this.mediaKind==="video"){let $=document.createElement("video");$.setAttribute("data-generated",""),$.className="fig-media-element",$.setAttribute("playsinline",""),$.preload="auto",this.#j.append($),this.#Q=$,this.#Q.addEventListener("play",this.#X),this.#Q.addEventListener("pause",this.#N),this.#Q.addEventListener("ended",this.#Y);let J=()=>{if(this.#Q?.autoplay)return;try{this.#Q.currentTime=0.001}catch{}};this.#Q.addEventListener("loadedmetadata",J,{once:!0})}else{let $=document.createElement("img");$.setAttribute("data-generated",""),$.className="fig-media-element",$.loading="lazy",$.decoding="async",$.alt=this.getAttribute("alt")||"",this.#j.append($),this.#Q=$}}#T(){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 Z=this.getAttribute(Q);if(Z===null)this.#Q.removeAttribute(Q);else this.#Q.setAttribute(Q,Z)})}#C(){return this.querySelector(":scope > figcaption:not([data-generated])")}#S(){return Array.from(this.querySelectorAll(":scope > figcaption[data-generated]"))}#D(){let Q=this.#C(),Z=this.#S();if(Q){Z.forEach((_)=>_.remove());return}let $=this.getAttribute("caption")||"";if(!$){Z.forEach((_)=>_.remove());return}let J=Z[0]||document.createElement("figcaption");if(Z.slice(1).forEach((_)=>_.remove()),!J.hasAttribute("data-generated"))J.setAttribute("data-generated","");if(J.textContent!==$)J.textContent=$;let j=this.querySelector(":scope > fig-media-controls");if(j)j.before(J);else if(this.#j?.isConnected)this.#j.after(J);else if(!J.isConnected)this.append(J)}#k(Q,Z=!1){if(!this.hasAttribute(Q))return Z;return this.getAttribute(Q)!=="false"}#P(){if(!this.#Q)return;if(!this.#Q.hasAttribute("data-generated"))return;let Q=this.#F();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.#T();return}let Z=this.getAttribute("poster");if(Z)this.#Q.setAttribute("poster",Z);else this.#Q.removeAttribute("poster");this.#Q.controls=!1,this.#Q.removeAttribute("controls"),this.#Q.autoplay=this.#k("autoplay",!1),this.#Q.loop=this.#k("loop",!1),this.#Q.muted=this.#k("muted",!1),this.#Q.playsInline=!0,this.#T(),this.#I()}get mediaEl(){return this.#Q}#I(){if(this.mediaKind!=="video"){this.#w();return}let Q=this.querySelector(":scope > fig-media-controls:not([data-generated])");if(Q){if(this.#K!==Q)this.#w(),this.#K=Q;this.#x();return}if(this.#k("controls",!1))this.#R();else this.#w()}#R(){let Q=Array.from(this.querySelectorAll(":scope > fig-media-controls[data-generated]")),Z=Q[0];if(Q.slice(1).forEach((J)=>J.remove()),Z){this.#K=Z,this.#x();return}let $=document.createElement("fig-media-controls");$.setAttribute("data-generated",""),this.append($),this.#K=$,this.#x()}#x(){if(!this.#K||!this.#Q)return;if(this.#U===this.#Q&&this.#W===this.#K)return;this.#b();let Q=this.#K,Z=this.#Q;this.#U=Z,this.#W=Q;let $=null,J=()=>{if(Q.playing=!Z.paused&&!Z.ended,Number.isFinite(Z.duration))Q.duration=Z.duration;if($!==null)if(Math.abs(Z.currentTime-$)<0.25)$=null;else return;Q.time=Z.currentTime||0},j=()=>{let G=Z.play?.();if(G&&typeof G.catch==="function")G.catch(()=>{})},_=()=>Z.pause?.(),q=(G)=>{let X=Number(G?.detail?.time);if(!Number.isFinite(X))return;$=X;try{Z.currentTime=X}catch{}};this.#M=J,this.#H=j,this.#O=_,this.#L=q,Z.addEventListener("play",J),Z.addEventListener("pause",J),Z.addEventListener("ended",J),Z.addEventListener("timeupdate",J),Z.addEventListener("loadedmetadata",J),Z.addEventListener("durationchange",J),Z.addEventListener("seeked",J),Q.addEventListener("play",j),Q.addEventListener("pause",_),Q.addEventListener("seek",q),J()}#b(){let Q=this.#U,Z=this.#W;if(Q&&this.#M)Q.removeEventListener("play",this.#M),Q.removeEventListener("pause",this.#M),Q.removeEventListener("ended",this.#M),Q.removeEventListener("timeupdate",this.#M),Q.removeEventListener("loadedmetadata",this.#M),Q.removeEventListener("durationchange",this.#M),Q.removeEventListener("seeked",this.#M);if(Z){if(this.#H)Z.removeEventListener("play",this.#H);if(this.#O)Z.removeEventListener("pause",this.#O);if(this.#L)Z.removeEventListener("seek",this.#L)}this.#U=null,this.#W=null,this.#M=null,this.#H=null,this.#O=null,this.#L=null}#w(){this.#b(),this.querySelectorAll(":scope > fig-media-controls[data-generated]").forEach((Q)=>{Q.remove()}),this.#K=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()}#f(){let Q=document.createElement("fig-input-file");Q.setAttribute("data-generated",""),Q.setAttribute("accepts",this.mediaKind==="video"?"video/*":"image/*"),Q.setAttribute("variant","overlay");let Z=this.getAttribute("label")||"Upload";if(Q.setAttribute("label",this.#Z?"Replace":Z),this.#_?.name)Q.setAttribute("filename",this.#_.name);else if(this.#Z)Q.setAttribute("url",this.#Z);Q.addEventListener("change",this.#G),this.#A(),this.#j.append(Q),this.#$=Q}#y(){if(this.#$)this.#$.removeEventListener("change",this.#G),this.#$.remove(),this.#$=null}#V(Q){if(Q.target!==this.#$)return;let Z=Q.detail?.files?.[0],$=Q.detail?.cleared===!0;if(!Z){if(this.#J)URL.revokeObjectURL(this.#J),this.#J=null;if(this.#_=null,this.#q=null,$)this.src="";if(this.#P(),this.#$){let J=this.getAttribute("label")||"Upload";if(this.#$.setAttribute("label",this.#Z?"Replace":J),this.#$.removeAttribute("filename"),this.#Z)this.#$.setAttribute("url",this.#Z);else this.#$.removeAttribute("url")}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}));return}if(this.#J)URL.revokeObjectURL(this.#J);if(this.#_=Z,this.#J=URL.createObjectURL(Z),this.#q=this.#J,this.#P(),this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{file:Z,src:this.#J}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0})),this.#$)this.#$.removeAttribute("url"),this.#$.setAttribute("filename",Z.name),this.#$.setAttribute("label","Replace")}#h(Q){if(!this.#Q)return;this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,cancelable:!1,composed:!0,detail:{src:this.#Z||"",currentTime:this.#Q.currentTime,duration:this.#Q.duration}}))}#v(){this.#h("play")}#g(){this.#h("pause")}#u(){this.#h("ended")}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="src"){let J=$||"",j=J&&(J===this.#q||J===this.#J);if(this.#Z=J,this.#J&&!j)URL.revokeObjectURL(this.#J),this.#J=null,this.#q=null,this.#_=null;if(this.#P(),this.#$){let _=this.getAttribute("label")||"Upload";if(this.#$.setAttribute("label",this.#Z?"Replace":_),this.#Z)if(this.#_?.name)this.#$.removeAttribute("url"),this.#$.setAttribute("filename",this.#_.name);else this.#$.setAttribute("url",this.#Z),this.#$.removeAttribute("filename");else this.#$.removeAttribute("url"),this.#$.removeAttribute("filename")}}if(Q==="type"){if(this.#E(),this.#P(),this.#$)this.#$.setAttribute("accepts",this.mediaKind==="video"?"video/*":"image/*")}if(["alt","aria-label","aria-labelledby","title"].includes(Q))this.#T();if(Q==="upload"){let J=$!==null&&$!=="false";if(J&&!this.#$)this.#f();else if(!J)this.#y()}if(Q==="aspect-ratio")if($)this.style.setProperty("--fig-media-aspect-ratio",$);else this.style.removeProperty("--fig-media-aspect-ratio");if(Q==="fit")if($)this.style.setProperty("--fig-media-fit",$);else this.style.removeProperty("--fig-media-fit");if(Q==="label"&&this.#$){let J=this.getAttribute("label")||"Upload";this.#$.setAttribute("label",this.#Z?"Replace":J)}if(["controls","autoplay","loop","muted","poster"].includes(Q))this.#P();if(Q==="caption")this.#D()}}customElements.define("fig-media",Z0);class o0 extends Z0{get mediaKind(){return"image"}}customElements.define("fig-image",o0);class l0 extends Z0{get mediaKind(){return"video"}}customElements.define("fig-video",l0);class a0 extends HTMLElement{#Z=null;#Q=null;#j=null;#$=null;#J=!1;#q=!1;static get observedAttributes(){return["playing","duration","time"]}connectedCallback(){this.#_(),this.#N(),this.#Y()}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 Z=Number(Q);if(!Number.isFinite(Z)||Z<0){this.removeAttribute("duration");return}this.setAttribute("duration",String(Z))}get time(){let Q=Number(this.getAttribute("time"));return Number.isFinite(Q)&&Q>=0?Q:0}set time(Q){let Z=Number(Q);if(!Number.isFinite(Z)||Z<0){this.removeAttribute("time");return}this.setAttribute("time",String(Z))}attributeChangedCallback(Q){if(!this.#q)return;if(Q==="playing")this.#N();if(Q==="duration"||Q==="time")this.#Y()}#_(){if(this.#q)return;if(this.#q=!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 Z=document.createElement("fig-button");Z.setAttribute("variant","ghost"),Z.setAttribute("size","small"),Z.setAttribute("icon","true"),Z.setAttribute("aria-label","Play");let $=v("play",{className:"fig-media-controls-play-icon"});Z.append($),Q.append(Z),Z.addEventListener("click",(q)=>{q.preventDefault(),q.stopPropagation(),this.toggle()});let J=document.createElement("fig-slider");J.setAttribute("text","false"),J.setAttribute("min","0"),J.setAttribute("max",String(this.duration)),J.setAttribute("step","1"),J.setAttribute("value",String(this.time)),J.setAttribute("full",""),J.setAttribute("aria-label","Seek"),J.setAttribute("aria-valuetext",this.#X(this.time,this.duration));let j=document.createElement("span");j.className="fig-media-controls-time",j.textContent=this.#G(this.time);let _=(q)=>{let G=q.currentTarget,X=Number(G?.value);if(!Number.isFinite(X))return;this.#J=!0,this.setAttribute("time",String(X)),this.dispatchEvent(new CustomEvent("seek",{bubbles:!0,composed:!0,detail:{time:X}})),requestAnimationFrame(()=>{this.#J=!1})};J.addEventListener("input",_),J.addEventListener("change",_),this.append(Q,J,j),this.#Z=Z,this.#Q=Q,this.#j=J,this.#$=j}#G(Q){if(!Number.isFinite(Q)||Q<0)Q=0;let Z=Math.floor(Q),$=Math.floor(Z/60),J=Z%60;return`${String($).padStart(2,"0")}:${String(J).padStart(2,"0")}`}#X(Q,Z=0){let $=this.#G(Q);if(!Number.isFinite(Z)||Z<=0)return $;return`${$} of ${this.#G(Z)}`}#N(){if(!this.#Z)return;let Q=this.playing;this.#Z.setAttribute("aria-label",Q?"Pause":"Play"),this.#Q?.setAttribute("text",Q?"Pause":"Play");let Z=this.#Z.querySelector(".fig-media-controls-play-icon");if(Z)Z.setAttribute("name",Q?"pause":"play")}#Y(){if(!this.#j)return;let Q=this.duration;if(Number(this.#j.getAttribute("max"))!==Q)this.#j.setAttribute("max",String(Q));let Z=this.time;if(!this.#J)this.#j.setAttribute("value",String(Z));if(this.#j.setAttribute("aria-valuetext",this.#X(Z,Q)),this.#$)this.#$.textContent=this.#G(Z)}toggle(){let Q=!this.playing;this.playing=Q,this.dispatchEvent(new CustomEvent(Q?"play":"pause",{bubbles:!0,composed:!0,detail:{playing:Q}}))}play(){if(this.playing)return;this.toggle()}pause(){if(!this.playing)return;this.toggle()}}customElements.define("fig-media-controls",a0);class t0 extends HTMLElement{static observedAttributes=["accepts","label","disabled","multiple","variant","url","filename"];#Z=null;#Q=null;#j=null;#$=null;#J=null;#q=null;get files(){return this.#q}get#_(){let Q=this.getAttribute("filename");if(Q)return Q;let Z=this.getAttribute("url");if(!Z)return"";try{let J=new URL(Z,location.href).pathname.split("/").pop();return J?decodeURIComponent(J):Z}catch{return Z}}get value(){if(this.#q&&this.#q.length>0){if(this.#q.length===1)return this.#q[0].name;return`${this.#q.length} files`}return this.#_}connectedCallback(){this.#W(),this.addEventListener("dragover",this.#Y),this.addEventListener("dragleave",this.#K),this.addEventListener("drop",this.#U)}disconnectedCallback(){this.#Z?.removeEventListener("change",this.#X),this.#j?.removeEventListener("click",this.#N),this.removeEventListener("dragover",this.#Y),this.removeEventListener("dragleave",this.#K),this.removeEventListener("drop",this.#U)}attributeChangedCallback(Q,Z,$){if(Z===$)return;this.#W()}clear(){if(this.#q=null,this.#Z)this.#Z.value="";this.removeAttribute("url"),this.removeAttribute("filename"),this.#W(),this.#G({cleared:!0})}#G(Q={}){let Z={files:this.#q,...Q};this.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0}))}#X=()=>{if(this.#Z.files.length>0)this.#q=this.#Z.files,this.removeAttribute("url"),this.#W(),this.#G()};#N=(Q)=>{Q.stopPropagation(),this.clear()};#Y=(Q)=>{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 Z=this.getAttribute("accepts"),$=Array.from(Q.dataTransfer.files);if(Z){let j=Z.split(",").map((_)=>_.trim().toLowerCase());$=$.filter((_)=>{let q="."+_.name.split(".").pop().toLowerCase(),G=_.type.toLowerCase();return j.some((X)=>X===q||X===G||X.endsWith("/*")&&G.startsWith(X.slice(0,-1)))})}if(!this.hasAttribute("multiple"))$=$.slice(0,1);if($.length===0)return;let J=new DataTransfer;if($.forEach((j)=>J.items.add(j)),this.#q=J.files,this.#Z)this.#Z.files=J.files;this.removeAttribute("url"),this.#W(),this.#G()};#W(){let Q=this.getAttribute("accepts")||"",Z=this.getAttribute("label")||"Upload",$=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",J=this.hasAttribute("multiple"),j=this.getAttribute("variant")||"input",_=this.#q&&this.#q.length>0||!!this.getAttribute("url")||!!this.getAttribute("filename");if(this.innerHTML="",_){let q=Q?`Accepts ${Q.split(",").map((M)=>M.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",$)this.#J.setAttribute("disabled","");let G=document.createElement("fig-truncate");G.setAttribute("position","middle"),G.setAttribute("tooltip","");let X=this.value,K=X.lastIndexOf(".");if(K>0)G.setAttribute("tail",X.slice(K));if(G.textContent=X,this.#J.appendChild(G),this.#Z=document.createElement("input"),this.#Z.type="file",this.#Z.title="",Q)this.#Z.setAttribute("accept",Q);if(J)this.#Z.setAttribute("multiple","");if(this.#Z.addEventListener("change",this.#X),this.#J.appendChild(this.#Z),q)this.#$=document.createElement("fig-tooltip"),this.#$.setAttribute("text",q),this.#$.appendChild(this.#J),this.appendChild(this.#$);else this.appendChild(this.#J);let N=document.createElement("fig-tooltip");if(N.setAttribute("text","Remove"),this.#j=document.createElement("fig-button"),this.#j.setAttribute("variant",j==="overlay"?"overlay":"ghost"),this.#j.setAttribute("icon","true"),this.#j.setAttribute("aria-label","Remove"),this.#j.className="fig-input-file-clear",$)this.#j.setAttribute("disabled","");this.#j.replaceChildren(v("minus")),this.#j.addEventListener("click",this.#N),N.appendChild(this.#j),this.appendChild(N)}else{let q=Q?`Accepts ${Q.split(",").map((G)=>G.trim()).join(", ")}`:"";if(q)this.#$=document.createElement("fig-tooltip"),this.#$.setAttribute("text",q);if(this.#J=document.createElement("fig-button"),this.#J.setAttribute("variant",j),this.#J.setAttribute("type","upload"),this.#J.textContent=Z,$)this.#J.setAttribute("disabled","");if(this.#Z=document.createElement("input"),this.#Z.type="file",this.#Z.title="",Q)this.#Z.setAttribute("accept",Q);if(J)this.#Z.setAttribute("multiple","");if(this.#Z.addEventListener("change",this.#X),this.#J.appendChild(this.#Z),this.#$)this.#$.appendChild(this.#J),this.appendChild(this.#$);else this.appendChild(this.#J)}}}customElements.define("fig-input-file",t0);class b extends HTMLElement{#Z={x:0.42,y:0};#Q={x:0.58,y:1};#j={stiffness:200,damping:15,mass:1};#$="bezier";#J=2;#q=null;#_=null;#G=null;#X=null;#N=null;#Y=null;#K=null;#U=null;#W=null;#M=null;#H=null;#O=null;#L=null;#F=0.8;#B=200;#A=200;#z=null;#E=null;#T=null;#C=5;#S=2;#D=10;#k=10;#P=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"),x(this,"--aspect-ratio",this.getAttribute("aspect-ratio"));let Q=this.getAttribute("value");if(Q)this.#I(Q);this.#O=this.#R(),this.#f(),this.#d()}disconnectedCallback(){if(this.#q=null,this.#T)this.#T.disconnect(),this.#T=null}attributeChangedCallback(Q,Z,$){if(Z===$)return;if(Q==="aspect-ratio"){if(x(this,"--aspect-ratio",$),this.#_)this.#i(),this.#s();return}if(Q==="edit"){if(this.isConnected)this.#f();return}if(Q==="value"&&$){let J=this.#$;if(this.#I($),this.#O=this.#R(),J!==this.#$&&this.#w())this.#f();else{if(this.#_)this.#s();this.#n(),this.#r()}}if(Q==="precision")this.#J=parseInt($||"2")}get value(){if(this.#$==="spring"){let{stiffness:Z,damping:$,mass:J}=this.#j;return`spring(${Z}, ${$}, ${J})`}let Q=this.#J;return`${this.#Z.x.toFixed(Q)}, ${this.#Z.y.toFixed(Q)}, ${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}`}get cssValue(){if(this.#$==="spring"){let Z=this.#x(),$=20,J=Math.max(1,Math.floor(Z.length/20)),j=[];for(let _=0;_<Z.length;_+=J)j.push(Z[_].value.toFixed(3));if(Z.length>0)j.push(Z[Z.length-1].value.toFixed(3));return`linear(${j.join(", ")})`}let Q=this.#J;return`cubic-bezier(${this.#Z.x.toFixed(Q)}, ${this.#Z.y.toFixed(Q)}, ${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)})`}get preset(){return this.#O}set value(Q){this.setAttribute("value",Q)}#I(Q){let Z=Q.match(/^spring\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if(Z)return this.#$="spring",this.#j.stiffness=parseFloat(Z[1]),this.#j.damping=parseFloat(Z[2]),this.#j.mass=parseFloat(Z[3]),!0;let $=Q.split(",").map((J)=>parseFloat(J.trim()));if($.length>=4&&$.every((J)=>!isNaN(J)))return this.#$="bezier",this.#Z.x=$[0],this.#Z.y=$[1],this.#Q.x=$[2],this.#Q.y=$[3],!0;return!1}#R(){if(this.#$==="bezier"){for(let Z of b.PRESETS){if(Z.type!=="bezier"||!Z.value)continue;if(Math.abs(this.#Z.x-Z.value[0])<0.001&&Math.abs(this.#Z.y-Z.value[1])<0.001&&Math.abs(this.#Q.x-Z.value[2])<0.001&&Math.abs(this.#Q.y-Z.value[3])<0.001)return Z.name}return"Custom bezier"}for(let Z of b.PRESETS){if(Z.type!=="spring"||!Z.spring)continue;if(Math.abs(this.#j.stiffness-Z.spring.stiffness)<0.001&&Math.abs(this.#j.damping-Z.spring.damping)<0.001&&Math.abs(this.#j.mass-Z.spring.mass)<0.001)return Z.name}return"Custom spring"}#x(){let{stiffness:Q,damping:Z,mass:$}=this.#j,J=0.004,j=5,_=[],q=0,G=0;for(let X=0;X<=5;X+=0.004){let K=-Q*(q-1)-Z*G;if(G+=K/$*0.004,q+=G*0.004,_.push({t:X,value:q}),X>0.1&&Math.abs(q-1)<0.0005&&Math.abs(G)<0.0005)break}return _}static#b(Q,Z=24){let{stiffness:$,damping:J,mass:j}=Q,_=0.004,q=5,G=[],X=0,K=0;for(let B=0;B<=5;B+=0.004){let O=-$*(X-1)-J*K;if(K+=O/j*0.004,X+=K*0.004,G.push({t:B,value:X}),B>0.1&&Math.abs(X-1)<0.001&&Math.abs(K)<0.001)break}let N=G[G.length-1].t||1,M=1;for(let B of G)if(B.value>M)M=B.value;let L=0;for(let B of G)if(B.value<L)L=B.value;let z=Math.max(M-L,1),U=6,W=Z-U*2,R=Math.max(1,Math.floor(G.length/30)),H="";for(let B=0;B<G.length;B+=R){let O=U+G[B].t/N*W,T=U+(1-(G[B].value-L)/z)*W;H+=(B===0?"M":"L")+O.toFixed(1)+","+T.toFixed(1)}return`<svg width="${Z}" height="${Z}" viewBox="0 0 ${Z} ${Z}" fill="none"><path d="${H}" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none"/></svg>`}static curveIcon(Q,Z,$,J,j=24){let q=(j-12)/2,G=48,X=[],K=(O,T,C,k,I)=>{let S=1-I;return S*S*S*O+3*S*S*I*T+3*S*I*I*C+I*I*I*k};for(let O=0;O<=48;O++){let T=O/48;X.push({x:K(0,Q,$,1,T),y:K(0,Z,J,1,T)})}let N=1/0,M=-1/0,L=1/0,z=-1/0;for(let O of X){if(O.x<N)N=O.x;if(O.x>M)M=O.x;if(O.y<L)L=O.y;if(O.y>z)z=O.y}let U=Math.max(M-N,0.000001),W=Math.max(z-L,0.000001),R=(O)=>q+(O-N)/U*12,H=(O)=>q+(1-(O-L)/W)*12,B="";for(let O=0;O<X.length;O++){let T=R(X[O].x),C=H(X[O].y);B+=`${O===0?"M":"L"}${T.toFixed(1)},${C.toFixed(1)}`}return`<svg width="${j}" height="${j}" viewBox="0 0 ${j} ${j}" fill="none"><path d="${B}" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>`}#w(){return this.getAttribute("edit")!=="false"}#f(){if(this.classList.toggle("spring-mode",this.#$==="spring"),this.classList.toggle("bezier-mode",this.#$!=="spring"),this.#g(),this.innerHTML=this.#h(),this.#u(),this.#_)this.#m(),this.#i(),this.#s();this.#r(),this.#L0()}static#y(Q){return String(Q).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}#V(){let Q="",Z=void 0;for(let $ of b.PRESETS){if(!this.#w()&&!$.value&&!$.spring)continue;if($.group!==Z){if(Z!==void 0)Q+="</optgroup>";if($.group)Q+=`<optgroup label="${$.group}">`;Z=$.group}let J;if($.type==="spring"){let _=$.spring||this.#j;J=b.#b(_)}else{let _=$.value||[this.#Z.x,this.#Z.y,this.#Q.x,this.#Q.y];J=b.curveIcon(..._)}let j=$.name===this.#O?" selected":"";Q+=`<option value="${$.name}"${j}>${J} ${$.name}</option>`}if(Z)Q+="</optgroup>";return`<fig-dropdown class="fig-easing-curve-dropdown" full experimental="modern">${Q}</fig-dropdown>`}#h(){let Z=this.#V();if(!this.#w())return Z;let $=`<fig-input-text class="fig-easing-curve-value-input" value="${b.#y(this.value)}" full></fig-input-text>`;if(this.#$==="spring")return`${Z}<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"/>
         <line class="fig-easing-curve-diagonal" x1="0" y1="180" x2="0" y2="180"/>

package/fig-lab.css

@@ -9,10 +9,11 @@
  */
 
 fig-field-slider {
-  --fig-field-slider-elastic-distance: var(--spacer-2);
+  --fig-field-slider-elastic-distance: calc(var(--spacer-2) + 0.25rem);
   --fig-field-slider-elastic-size: 0px;
-  --fig-field-slider-elastic-position-offset: 0px;
-  --fig-field-slider-elastic-transition: 0.1s ease-out;
+  --fig-field-slider-elastic-scale: 1;
+  --fig-field-slider-elastic-origin: left center;
+  --fig-field-slider-elastic-transition: 0.18s cubic-bezier(0.2, 1.45, 0.35, 1);
   --fig-field-slider-height: 2rem;
   --figma-focus-outline-offset: 1px;
   --fig-field-slider-progress-shadow: inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
@@ -23,9 +24,8 @@ fig-field-slider {
   width: 100%;
   height: var(--fig-field-slider-height);
   border-radius: var(--radius-medium);
-  transition:
-    width var(--fig-field-slider-elastic-transition),
-    transform var(--fig-field-slider-elastic-transition);
+  transform-origin: var(--fig-field-slider-elastic-origin);
+  transition: transform var(--fig-field-slider-elastic-transition);
   
   label {
     pointer-events: none;
@@ -317,8 +317,7 @@ fig-field-slider {
   }
 
   &[data-elastic-dragging="true"] {
-    width: calc(100% + var(--fig-field-slider-elastic-size));
-    transform: translateX(var(--fig-field-slider-elastic-position-offset));
+    transform: scaleX(var(--fig-field-slider-elastic-scale));
     transition: none;
   }
 }

package/fig-lab.js

@@ -25,6 +25,8 @@ class FigFieldSlider extends HTMLElement {
   #isElasticTracking = false;
   #elasticMaxPx = 0;
   #elasticRangeRect = null;
+  #elasticHostWidth = 0;
+  #elasticPointerId = null;
   #boundHandleSliderInput = null;
   #boundHandleSliderChange = null;
   #boundHandleElasticPointerDown = this.#handleElasticPointerDown.bind(this);
@@ -111,6 +113,7 @@ class FigFieldSlider extends HTMLElement {
       this.#focusSyncFrame = 0;
     }
     this.#clearPendingClick();
+    this.#stopElasticTracking();
     this.#resetElasticPull();
     this.#unbindRangeInput();
     this.#unbindSliderEvents();
@@ -327,15 +330,20 @@ class FigFieldSlider extends HTMLElement {
     const rangeInput =
       this.#slider?.querySelector('input[type="range"]') ?? this.#rangeInput;
     if (!rangeInput) return;
+    this.#stopElasticTracking();
+    this.#resetElasticPull();
     this.#rangeInput = rangeInput;
     this.#isElasticTracking = true;
+    this.#elasticPointerId = event.pointerId;
     this.#elasticMaxPx = this.#readElasticDistance();
     const rect = rangeInput.getBoundingClientRect();
+    const hostRect = this.getBoundingClientRect();
     this.#elasticRangeRect = {
       left: rect.left,
       right: rect.right,
       width: rect.width,
     };
+    this.#elasticHostWidth = hostRect.width;
     window.addEventListener("pointermove", this.#boundHandleElasticPointerMove, {
       passive: true,
     });
@@ -345,19 +353,40 @@ class FigFieldSlider extends HTMLElement {
     window.addEventListener("pointercancel", this.#boundHandleElasticPointerEnd, {
       once: true,
     });
+    window.addEventListener("blur", this.#boundHandleElasticPointerEnd, {
+      once: true,
+    });
   }
 
   #handleElasticPointerMove(event) {
     if (!this.#isElasticTracking) return;
+    if (event.pointerId !== this.#elasticPointerId) return;
+    if (event.buttons === 0) {
+      this.#handleElasticPointerEnd(event);
+      return;
+    }
     this.#updateElasticPull(event.clientX);
   }
 
-  #handleElasticPointerEnd() {
+  #handleElasticPointerEnd(event) {
+    if (
+      event?.pointerId !== undefined &&
+      this.#elasticPointerId !== null &&
+      event.pointerId !== this.#elasticPointerId
+    ) {
+      return;
+    }
+    this.#stopElasticTracking();
+    this.#resetElasticPull();
+  }
+
+  #stopElasticTracking() {
     window.removeEventListener("pointermove", this.#boundHandleElasticPointerMove);
     window.removeEventListener("pointerup", this.#boundHandleElasticPointerEnd);
     window.removeEventListener("pointercancel", this.#boundHandleElasticPointerEnd);
+    window.removeEventListener("blur", this.#boundHandleElasticPointerEnd);
     this.#isElasticTracking = false;
-    this.#resetElasticPull();
+    this.#elasticPointerId = null;
   }
 
   #handleContextMenu(event) {
@@ -445,11 +474,15 @@ class FigFieldSlider extends HTMLElement {
       Math.min(this.#elasticMaxPx, overshoot * 0.5),
     );
     const stretch = Math.abs(offset);
+    const scale = this.#elasticHostWidth
+      ? (this.#elasticHostWidth + stretch) / this.#elasticHostWidth
+      : 1;
     this.dataset.elasticDragging = "true";
     this.style.setProperty("--fig-field-slider-elastic-size", `${stretch}px`);
+    this.style.setProperty("--fig-field-slider-elastic-scale", `${scale}`);
     this.style.setProperty(
-      "--fig-field-slider-elastic-position-offset",
-      offset < 0 ? `${-stretch / 2}px` : `${stretch / 2}px`,
+      "--fig-field-slider-elastic-origin",
+      offset < 0 ? "right center" : "left center",
     );
   }
 
@@ -457,12 +490,15 @@ class FigFieldSlider extends HTMLElement {
     this.#clearElasticPull();
     this.#elasticMaxPx = 0;
     this.#elasticRangeRect = null;
+    this.#elasticHostWidth = 0;
+    this.#elasticPointerId = null;
   }
 
   #clearElasticPull() {
     this.removeAttribute("data-elastic-dragging");
     this.style.removeProperty("--fig-field-slider-elastic-size");
-    this.style.removeProperty("--fig-field-slider-elastic-position-offset");
+    this.style.removeProperty("--fig-field-slider-elastic-scale");
+    this.style.removeProperty("--fig-field-slider-elastic-origin");
   }
 
   #valueFromPointer(event) {

package/fig.js

@@ -10999,12 +10999,12 @@ class FigMedia extends HTMLElement {
   }
 
   #userProvidedCaptionEl() {
-    return this.querySelector(":scope > caption:not([data-generated])");
+    return this.querySelector(":scope > figcaption:not([data-generated])");
   }
 
   #generatedCaptionEls() {
     return Array.from(
-      this.querySelectorAll(":scope > caption[data-generated]"),
+      this.querySelectorAll(":scope > figcaption[data-generated]"),
     );
   }
 
@@ -11023,7 +11023,7 @@ class FigMedia extends HTMLElement {
       return;
     }
 
-    const caption = generatedCaptions[0] || document.createElement("caption");
+    const caption = generatedCaptions[0] || document.createElement("figcaption");
     generatedCaptions.slice(1).forEach((duplicate) => duplicate.remove());
     if (!caption.hasAttribute("data-generated")) {
       caption.setAttribute("data-generated", "");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "6.9.7",
+  "version": "6.9.9",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",